From 60495e3646f152f649a9ab2d1f17c4bb7d3c4a31 Mon Sep 17 00:00:00 2001 From: Simeon Simeonoff Date: Wed, 26 Aug 2026 11:10:35 +0300 Subject: [PATCH 1/3] feat(palettes): gamut relative palettes initial commit --- _to_delete/_zz_final.scss | 26 + _to_delete/_zz_perf.scss | 18 + _to_delete/_zz_r.scss | 2 + _to_delete/_zz_t1.scss | 35 + _to_delete/_zz_t2.scss | 23 + _to_delete/_zz_t3.scss | 18 + _to_delete/_zz_t4.scss | 37 + _to_delete/_zz_t5.scss | 32 + _to_delete/_zz_t6.scss | 20 + _to_delete/_zz_t7.scss | 14 + _to_delete/_zz_t8.scss | 11 + _to_delete/_zz_t9.scss | 9 + _to_delete/_zz_z.scss | 10 + _to_delete/git-index.lock | 0 _to_delete/git-index.lock2 | 0 _to_delete/l5 | 0 _to_delete/theming-tmp/dark.scss | 5 + _to_delete/theming-tmp/e2e.css | 1044 +++ _to_delete/theming-tmp/perf.css | 242 + _to_delete/theming-tmp/perf.scss | 3 + _to_delete/theming-tmp/shades.html | 746 ++ _to_delete/theming-tmp/t1.css | 39 + _to_delete/theming-tmp/t1.scss | 6 + _to_delete/theming-tmp/t2.css | 239 + _to_delete/theming-tmp/t2.scss | 4 + _to_delete/theming-tmp/t3.scss | 5 + _to_delete/theming-tmp/t4.css | 223 + _to_delete/theming-tmp/t4.scss | 14 + _to_delete/theming-tmp/tests.css | 7928 ++++++++++++++++ _to_delete/theming-tmp2/perf.css | 242 + _to_delete/theming-tmp2/perf.scss | 3 + _to_delete/theming-tmp2/s1.scss | 8 + _to_delete/theming-tmp2/s2.css | 77 + _to_delete/theming-tmp2/s2.scss | 11 + _to_delete/theming-tmp2/s3.scss | 3 + _to_delete/theming-tmp2/shades.html | 380 + _to_delete/theming-tmp2/sweep.mjs | 47 + _to_delete/theming-tmp2/tests.css | 7969 ++++++++++++++++ _to_delete/tmp3/perf.css | 242 + _to_delete/tmp3/perf.scss | 3 + _to_delete/tmp3/s4.scss | 9 + _to_delete/tmp3/s5.scss | 18 + _to_delete/tmp3/shades.html | 436 + _to_delete/tmp3/sweep.mjs | 53 + _to_delete/tmp3/tests.css | 8052 +++++++++++++++++ packages/theming/.scripts/previewShades.mjs | 274 + packages/theming/package.json | 3 +- packages/theming/sass/color/_config.scss | 189 + packages/theming/sass/color/_contrast.scss | 65 + packages/theming/sass/color/_functions.scss | 164 +- packages/theming/sass/color/_gamut.scss | 162 + packages/theming/sass/color/_generator.scss | 394 + packages/theming/sass/color/_index.scss | 2 + .../sass/color/presets/dark/_bootstrap.scss | 1 + .../sass/color/presets/dark/_extra.scss | 2 + .../sass/color/presets/dark/_fluent.scss | 3 + .../sass/color/presets/dark/_material.scss | 1 + .../sass/color/presets/light/_bootstrap.scss | 1 + .../sass/color/presets/light/_extra.scss | 2 + .../sass/color/presets/light/_fluent.scss | 3 + .../sass/color/presets/light/_material.scss | 1 + packages/theming/tests/_color.spec.scss | 281 +- research/dynamic-shades/ramp-prototype.py | 188 + research/dynamic-shades/ramp-prototype.scss | 251 + 64 files changed, 30211 insertions(+), 82 deletions(-) create mode 100644 _to_delete/_zz_final.scss create mode 100644 _to_delete/_zz_perf.scss create mode 100644 _to_delete/_zz_r.scss create mode 100644 _to_delete/_zz_t1.scss create mode 100644 _to_delete/_zz_t2.scss create mode 100644 _to_delete/_zz_t3.scss create mode 100644 _to_delete/_zz_t4.scss create mode 100644 _to_delete/_zz_t5.scss create mode 100644 _to_delete/_zz_t6.scss create mode 100644 _to_delete/_zz_t7.scss create mode 100644 _to_delete/_zz_t8.scss create mode 100644 _to_delete/_zz_t9.scss create mode 100644 _to_delete/_zz_z.scss create mode 100644 _to_delete/git-index.lock create mode 100644 _to_delete/git-index.lock2 create mode 100644 _to_delete/l5 create mode 100644 _to_delete/theming-tmp/dark.scss create mode 100644 _to_delete/theming-tmp/e2e.css create mode 100644 _to_delete/theming-tmp/perf.css create mode 100644 _to_delete/theming-tmp/perf.scss create mode 100644 _to_delete/theming-tmp/shades.html create mode 100644 _to_delete/theming-tmp/t1.css create mode 100644 _to_delete/theming-tmp/t1.scss create mode 100644 _to_delete/theming-tmp/t2.css create mode 100644 _to_delete/theming-tmp/t2.scss create mode 100644 _to_delete/theming-tmp/t3.scss create mode 100644 _to_delete/theming-tmp/t4.css create mode 100644 _to_delete/theming-tmp/t4.scss create mode 100644 _to_delete/theming-tmp/tests.css create mode 100644 _to_delete/theming-tmp2/perf.css create mode 100644 _to_delete/theming-tmp2/perf.scss create mode 100644 _to_delete/theming-tmp2/s1.scss create mode 100644 _to_delete/theming-tmp2/s2.css create mode 100644 _to_delete/theming-tmp2/s2.scss create mode 100644 _to_delete/theming-tmp2/s3.scss create mode 100644 _to_delete/theming-tmp2/shades.html create mode 100644 _to_delete/theming-tmp2/sweep.mjs create mode 100644 _to_delete/theming-tmp2/tests.css create mode 100644 _to_delete/tmp3/perf.css create mode 100644 _to_delete/tmp3/perf.scss create mode 100644 _to_delete/tmp3/s4.scss create mode 100644 _to_delete/tmp3/s5.scss create mode 100644 _to_delete/tmp3/shades.html create mode 100644 _to_delete/tmp3/sweep.mjs create mode 100644 _to_delete/tmp3/tests.css create mode 100644 packages/theming/.scripts/previewShades.mjs create mode 100644 packages/theming/sass/color/_config.scss create mode 100644 packages/theming/sass/color/_contrast.scss create mode 100644 packages/theming/sass/color/_gamut.scss create mode 100644 packages/theming/sass/color/_generator.scss create mode 100644 research/dynamic-shades/ramp-prototype.py create mode 100644 research/dynamic-shades/ramp-prototype.scss diff --git a/_to_delete/_zz_final.scss b/_to_delete/_zz_final.scss new file mode 100644 index 00000000..2b3cd3bb --- /dev/null +++ b/_to_delete/_zz_final.scss @@ -0,0 +1,26 @@ +@use "sass:color"; @use "sass:math"; +// APCA (simplified SAPC-98 / W3 0.98G-4g) feasibility +@function apca-y($col) { + $r: math.pow(math.div(color.channel($col,"red",$space:rgb),255), 2.4); + $g: math.pow(math.div(color.channel($col,"green",$space:rgb),255), 2.4); + $b: math.pow(math.div(color.channel($col,"blue",$space:rgb),255), 2.4); + @return 0.2126729*$r + 0.7151522*$g + 0.0721750*$b; } +@function apca($txt, $bg) { + $yt: apca-y($txt); $yb: apca-y($bg); + @if $yt < 0.022 { $yt: $yt + math.pow(0.022 - $yt, 1.414); } + @if $yb < 0.022 { $yb: $yb + math.pow(0.022 - $yb, 1.414); } + @if $yb > $yt { + @return (math.pow($yb, 0.56) - math.pow($yt, 0.57)) * 1.14 * 100; } + @return (math.pow($yb, 0.65) - math.pow($yt, 0.62)) * 1.14 * 100; } +// the "returned in original space" gotcha + the safe pattern +$base: #3f51b5; +$bad: color.change($base, $lightness: 0.85, $space: oklch); +$good: color.to-gamut(color.to-space(color.change(color.to-space($base, oklch), $lightness: 85%), oklch), srgb, local-minde); +r { + --apca-black-on-white: #{apca(#000, #fff)}; + --apca-blue-on-white: #{apca(#3f51b5, #fff)}; + --bad: #{$bad}; + --bad-in-gamut: #{color.is-in-gamut($bad, srgb)}; + --good: #{$good}; + --good-hex: #{color.to-space($good, rgb)}; +} diff --git a/_to_delete/_zz_perf.scss b/_to_delete/_zz_perf.scss new file mode 100644 index 00000000..11511d9d --- /dev/null +++ b/_to_delete/_zz_perf.scss @@ -0,0 +1,18 @@ +@use "sass:color"; @use "sass:math"; @use "sass:map"; +// realistic: 12 palette colors x 14 shades, each with a binary-search gamut map (20 iters) +@function bs-gamut($L, $C, $H, $iters) { + $lo: 0; $hi: $C; $i: 0; + @while $i < $iters { + $mid: math.div($lo + $hi, 2); + @if color.is-in-gamut(oklch($L * 100% $mid $H), srgb) { $lo: $mid; } @else { $hi: $mid; } + $i: $i + 1; + } + @return oklch($L * 100% $lo $H); +} +$hues: 20 50 80 110 140 170 200 230 260 290 320 350; +$Ls: 0.98 0.95 0.9 0.82 0.74 0.66 0.58 0.5 0.42 0.34 0.26 0.18 0.12 0.08; +:root { + @each $h in $hues { @each $l in $Ls { + --c-#{$h}-#{$l}: #{bs-gamut($l, 0.4, $h, 20)}; + } } +} diff --git a/_to_delete/_zz_r.scss b/_to_delete/_zz_r.scss new file mode 100644 index 00000000..0284585b --- /dev/null +++ b/_to_delete/_zz_r.scss @@ -0,0 +1,2 @@ +@function recurse($n) { @if $n <= 0 { @return 0; } @return 1 + recurse($n - 1); } +f { --r: #{recurse(180)}; } diff --git a/_to_delete/_zz_t1.scss b/_to_delete/_zz_t1.scss new file mode 100644 index 00000000..33597911 --- /dev/null +++ b/_to_delete/_zz_t1.scss @@ -0,0 +1,35 @@ +@use "sass:color"; +@use "sass:math"; +@use "sass:meta"; +@use "sass:list"; + +$c: #3f51b5; +a { + --space: #{color.space($c)}; + --to-oklch: #{color.to-space($c, oklch)}; + --l: #{color.channel($c, "lightness", $space: oklch)}; + --c: #{color.channel($c, "chroma", $space: oklch)}; + --h: #{color.channel($c, "hue", $space: oklch)}; + --lab-a: #{color.channel($c, "a", $space: oklab)}; + --xyz: #{color.to-space($c, xyz)}; + --xyzd65: #{color.to-space($c, xyz-d65)}; + --xyzd50: #{color.to-space($c, xyz-d50)}; + --p3: #{color.to-space($c, display-p3)}; + --a98: #{color.to-space($c, a98-rgb)}; + --rec: #{color.to-space($c, rec2020)}; + --prophoto: #{color.to-space($c, prophoto-rgb)}; + --srgb-lin: #{color.to-space($c, srgb-linear)}; + --hwb: #{color.to-space($c, hwb)}; + --lch: #{color.to-space($c, lch)}; + --legacy: #{color.is-legacy($c)}; + --legacy2: #{color.is-legacy(color.to-space($c, oklch))}; + --raw-oklch: #{oklch(70% 0.2 250)}; + --ingamut: #{color.is-in-gamut(oklch(70% 0.4 250), srgb)}; + --gamut-minde: #{color.to-gamut(oklch(70% 0.4 250), srgb, local-minde)}; + --gamut-clip: #{color.to-gamut(oklch(70% 0.4 250), srgb, clip)}; + --mix-oklch: #{color.mix(red, blue, 50%, oklch)}; + --mix-legacy: #{color.mix(red, blue, 50%)}; + --scale: #{color.scale($c, $lightness: 20%, $space: oklch)}; + --adjust: #{color.adjust($c, $chroma: 0.05, $space: oklch)}; + --change: #{color.change($c, $lightness: 0.8, $space: oklch)}; +} diff --git a/_to_delete/_zz_t2.scss b/_to_delete/_zz_t2.scss new file mode 100644 index 00000000..6d73509f --- /dev/null +++ b/_to_delete/_zz_t2.scss @@ -0,0 +1,23 @@ +@use "sass:math"; +@use "sass:meta"; +b { + --pi: #{math.$pi}; --e: #{math.$e}; + --pow: #{math.pow(2, 10)}; + --pow-frac: #{math.pow(1.2, math.div(1, 2.4))}; + --sqrt: #{math.sqrt(2)}; + --log10: #{math.log(100, 10)}; + --ln: #{math.log(math.$e)}; + --exp-via-pow: #{math.pow(math.$e, 2)}; + --sin-deg: #{math.sin(30deg)}; + --sin-rad: #{math.sin(0.5235987756)}; + --acos: #{math.acos(0.5)}; + --atan2: #{math.atan2(1, -1)}; + --hypot: #{math.hypot(3, 4)}; + --clamp: #{math.clamp(0, 1.5, 1)}; + --div-pct: #{math.div(50%, 100%)}; + --div3: #{math.div(1, 3)}; + --round: #{math.round(2.5)}; + --eps: #{math.$epsilon}; + --maxsafe: #{math.$max-safe-integer}; +} +@debug meta.module-functions("math"); diff --git a/_to_delete/_zz_t3.scss b/_to_delete/_zz_t3.scss new file mode 100644 index 00000000..20e03978 --- /dev/null +++ b/_to_delete/_zz_t3.scss @@ -0,0 +1,18 @@ +@use "sass:color"; +@use "sass:math"; +c { --d: #{color.to-gamut(oklch(70% 0.4 250), srgb, local-minde)}; + --d2: #{color.to-gamut(oklch(70% 0.4 250), $method: clip)}; + --g: #{color.is-in-gamut(oklch(70% 0.4 250))}; + --g2: #{color.is-in-gamut(oklch(70% 0.4 250), display-p3)}; +} +@function bisect($lo, $hi, $n) { + $i: 0; + @while $i < $n { + $mid: math.div($lo + $hi, 2); + @if $mid * $mid > 2 { $hi: $mid; } @else { $lo: $mid; } + $i: $i + 1; + } + @return $lo; +} +@function recurse($n) { @if $n <= 0 { @return 0; } @return 1 + recurse($n - 1); } +f { --sqrt2: #{bisect(1, 2, 200)}; --rec: #{recurse(5000)}; } diff --git a/_to_delete/_zz_t4.scss b/_to_delete/_zz_t4.scss new file mode 100644 index 00000000..0c1e08bb --- /dev/null +++ b/_to_delete/_zz_t4.scss @@ -0,0 +1,37 @@ +@use "sass:color"; @use "sass:math"; +@function bisect($lo, $hi, $n) { + $i: 0; + @while $i < $n { $mid: math.div($lo + $hi, 2); + @if $mid * $mid > 2 { $hi: $mid; } @else { $lo: $mid; } + $i: $i + 1; } + @return $lo; +} +// hand-rolled sRGB -> OKLab +@function lin($c) { @if $c <= 0.04045 { @return math.div($c, 12.92); } + @return math.pow(math.div($c + 0.055, 1.055), 2.4); } +@function srgb-to-oklab($col) { + $r: lin(math.div(color.channel($col,"red",$space:rgb), 255)); + $g: lin(math.div(color.channel($col,"green",$space:rgb), 255)); + $b: lin(math.div(color.channel($col,"blue",$space:rgb), 255)); + $l: math.pow(0.4122214708*$r + 0.5363325363*$g + 0.0514459929*$b, math.div(1,3)); + $m: math.pow(0.2119034982*$r + 0.6806995451*$g + 0.1073969566*$b, math.div(1,3)); + $s: math.pow(0.0883024619*$r + 0.2817188376*$g + 0.6299787005*$b, math.div(1,3)); + @return (L: 0.2104542553*$l + 0.7936177850*$m - 0.0040720468*$s, + a: 1.9779984951*$l - 2.4285922050*$m + 0.4505937099*$s, + b: 0.0259040371*$l + 0.7827717662*$m - 0.8086757660*$s); +} +// WCAG relative luminance + contrast +@function lum($col) { + $r: lin(math.div(color.channel($col,"red",$space:rgb),255)); + $g: lin(math.div(color.channel($col,"green",$space:rgb),255)); + $b: lin(math.div(color.channel($col,"blue",$space:rgb),255)); + @return 0.2126*$r + 0.7152*$g + 0.0722*$b; +} +@function wcag($a, $b) { $la: lum($a); $lb: lum($b); + @if $la < $lb { $t: $la; $la: $lb; $lb: $t; } + @return math.div($la + 0.05, $lb + 0.05); } +g { --sqrt2: #{bisect(1,2,200)}; + --manual-oklab: #{srgb-to-oklab(#3f51b5)}; + --builtin-oklab: #{color.to-space(#3f51b5, oklab)}; + --wcag: #{wcag(#3f51b5, #fff)}; + --wcag2: #{wcag(#000, #fff)}; } diff --git a/_to_delete/_zz_t5.scss b/_to_delete/_zz_t5.scss new file mode 100644 index 00000000..320e4fc2 --- /dev/null +++ b/_to_delete/_zz_t5.scss @@ -0,0 +1,32 @@ +@use "sass:color"; @use "sass:math"; @use "sass:map"; +@function lin($c) { @if $c <= 0.04045 { @return math.div($c, 12.92); } + @return math.pow(math.div($c + 0.055, 1.055), 2.4); } +@function srgb-to-oklab($col) { + $r: lin(math.div(color.channel($col,"red",$space:rgb), 255)); + $g: lin(math.div(color.channel($col,"green",$space:rgb), 255)); + $b: lin(math.div(color.channel($col,"blue",$space:rgb), 255)); + $l: math.pow(0.4122214708*$r + 0.5363325363*$g + 0.0514459929*$b, math.div(1,3)); + $m: math.pow(0.2119034982*$r + 0.6806995451*$g + 0.1073969566*$b, math.div(1,3)); + $s: math.pow(0.0883024619*$r + 0.2817188376*$g + 0.6299787005*$b, math.div(1,3)); + @return (L: 0.2104542553*$l + 0.7936177850*$m - 0.0040720468*$s, + a: 1.9779984951*$l - 2.4285922050*$m + 0.4505937099*$s, + b: 0.0259040371*$l + 0.7827717662*$m - 0.8086757660*$s); +} +@function lum($col) { + $r: lin(math.div(color.channel($col,"red",$space:rgb),255)); + $g: lin(math.div(color.channel($col,"green",$space:rgb),255)); + $b: lin(math.div(color.channel($col,"blue",$space:rgb),255)); + @return 0.2126*$r + 0.7152*$g + 0.0722*$b; } +@function wcag($a,$b) { $la: lum($a); $lb: lum($b); + @if $la < $lb { $t: $la; $la: $lb; $lb: $t; } + @return math.div($la + 0.05, $lb + 0.05); } +$m: srgb-to-oklab(#3f51b5); +g { --mL: #{map.get($m,L)}; --ma: #{map.get($m,a)}; --mb: #{map.get($m,b)}; + --builtin: #{color.to-space(#3f51b5, oklab)}; + --wcag-blue-white: #{wcag(#3f51b5, #fff)}; + --wcag-bw: #{wcag(#000,#fff)}; + // precision: is it stored full-double or truncated? + --p1: #{0.12345678901234567890}; + --p2: #{0.1234567890123 * 1000000000000}; + --eps-test: #{1 + 0.00000000001 - 1}; +} diff --git a/_to_delete/_zz_t6.scss b/_to_delete/_zz_t6.scss new file mode 100644 index 00000000..07fe149a --- /dev/null +++ b/_to_delete/_zz_t6.scss @@ -0,0 +1,20 @@ +@use "sass:color"; +$ok: oklch(70% 0.15 250); +// 1. plain declaration +.a { color: $ok; background: oklch(60% 0.2 30); } +// 2. custom property (needs interpolation) +.b { --brand: #{$ok}; --brand2: #{color.to-space(#3f51b5, oklch)}; } +// 3. does a legacy op force rgb? +.c { color: color.adjust($ok, $lightness: 5%); } +.d { color: color.to-space($ok, srgb); } +.e { color: color.to-gamut($ok, srgb, local-minde); } +.f { color: color.to-space(color.to-gamut($ok, srgb, local-minde), srgb); } +.g { color: color.to-space($ok, rgb); } +// 4. hue unit +.h { color: oklch(70% 0.15 250deg); } +// 5. alpha +.i { color: oklch(70% 0.15 250 / 0.5); } +// 6. relative color syntax passthrough? +.j { color: oklch(from #3f51b5 l c h); } +// 7. none / missing channels +.k { color: oklch(70% 0.15 none); } diff --git a/_to_delete/_zz_t7.scss b/_to_delete/_zz_t7.scss new file mode 100644 index 00000000..e476fd30 --- /dev/null +++ b/_to_delete/_zz_t7.scss @@ -0,0 +1,14 @@ +@use "sass:color"; @use "sass:meta"; @use "sass:math"; +$m: oklch(70% 0.15 none); +a { --type: #{meta.type-of($m)}; + --missing: #{color.is-missing($m, "hue")}; + --powerless: #{color.is-powerless(oklch(70% 0 250), "hue")}; + --same2: #{color.same(#f00, rgb(255 0 0))}; + --ch-alpha: #{color.channel(#f00, "alpha")}; + // channel with $space on non-matching color + --cross: #{color.channel(oklch(70% 0.15 250), "red", $space: rgb)}; + --cross2: #{color.channel(oklch(70% 0.15 250), "lightness", $space: hsl)}; + // out of range channel clamping? + --oor: #{oklch(150% 0.15 250)}; + --neg: #{oklch(70% -0.5 250)}; +} diff --git a/_to_delete/_zz_t8.scss b/_to_delete/_zz_t8.scss new file mode 100644 index 00000000..e251fba7 --- /dev/null +++ b/_to_delete/_zz_t8.scss @@ -0,0 +1,11 @@ +@use "sass:color"; @use "sass:meta"; @use "sass:string"; +a { + // is color-mix() evaluated? + --cm: #{color-mix(in oklch, red, blue)}; + --cmtype: #{meta.type-of(color-mix(in oklch, red, blue))}; + // can sass read a var()? + --v: #{meta.type-of(var(--x))}; + // light-dark passthrough + --ld: light-dark(#fff, #000); +} +@debug meta.module-functions("color"); diff --git a/_to_delete/_zz_t9.scss b/_to_delete/_zz_t9.scss new file mode 100644 index 00000000..07c625fb --- /dev/null +++ b/_to_delete/_zz_t9.scss @@ -0,0 +1,9 @@ +@use "sass:color"; +a { + --g1: #{oklch(70% 0.15 250)}; + --g3: #{color(display-p3 1 0 0)}; + --g4: #{lab(50% 40 -30)}; + --g5: #{lch(50% 40 250)}; + --g6: #{oklab(0.7 0.1 -0.1)}; + --g7: #{hwb(120 20% 30%)}; +} diff --git a/_to_delete/_zz_z.scss b/_to_delete/_zz_z.scss new file mode 100644 index 00000000..82d4cae4 --- /dev/null +++ b/_to_delete/_zz_z.scss @@ -0,0 +1,10 @@ +@use "sass:color"; +$k: color.to-space(#3f51b5, oklch); +z { + --a: #{color.change($k, $lightness: 0.85)}; + --b: #{color.change($k, $lightness: 85%)}; + --c: #{color.change($k, $lightness: 0.85, $space: oklch)}; + --d: #{color.channel($k, "lightness")}; + --mix1: #{color.mix($k, color.to-space(#fff, oklch), 50%, oklch)}; + --mix2: #{color.mix(#3f51b5, #fff, 50%, oklch)}; +} diff --git a/_to_delete/git-index.lock b/_to_delete/git-index.lock new file mode 100644 index 00000000..e69de29b diff --git a/_to_delete/git-index.lock2 b/_to_delete/git-index.lock2 new file mode 100644 index 00000000..e69de29b diff --git a/_to_delete/l5 b/_to_delete/l5 new file mode 100644 index 00000000..e69de29b diff --git a/_to_delete/theming-tmp/dark.scss b/_to_delete/theming-tmp/dark.scss new file mode 100644 index 00000000..5e20e5f9 --- /dev/null +++ b/_to_delete/theming-tmp/dark.scss @@ -0,0 +1,5 @@ +@use '../sass/color' as *; +$d: palette($primary: #09f, $secondary: #df1b74, $surface: #1a1a24, $gray: #dcdce4); +dark-gray { @each $v in ('50','100','300','500','700','900') { #{$v}: color($d, gray, $v); } } +dark-primary { @each $v in ('100','500','900') { #{$v}: color($d, primary, $v); } } +surface { s: color($d, surface, 500); } diff --git a/_to_delete/theming-tmp/e2e.css b/_to_delete/theming-tmp/e2e.css new file mode 100644 index 00000000..5a1792a8 --- /dev/null +++ b/_to_delete/theming-tmp/e2e.css @@ -0,0 +1,1044 @@ +:root { + --ig-wcag-a: 0.31; + --ig-wcag-aa: 0.185; + --ig-wcag-aaa: 0.178; + --ig-contrast-level: var(--ig-wcag-aa); + --y: clamp(0, (y / var(--ig-contrast-level) - 1) * -infinity, 1); + --y-contrast: xyz-d65 var(--y) var(--y) var(--y); +} + +:root { + --ig-primary-50: hsl(from var(--ig-primary-500) h calc(s * 1.23) calc(l * 1.78)); + --ig-primary-50-contrast: hsla(from color(from var(--ig-primary-50) var(--y-contrast)) h 0 l/1); + --ig-primary-100: hsl(from var(--ig-primary-500) h calc(s * 0.8) calc(l * 1.66)); + --ig-primary-100-contrast: hsla(from color(from var(--ig-primary-100) var(--y-contrast)) h 0 l/1); + --ig-primary-200: hsl(from var(--ig-primary-500) h calc(s * 0.64) calc(l * 1.43)); + --ig-primary-200-contrast: hsla(from color(from var(--ig-primary-200) var(--y-contrast)) h 0 l/1); + --ig-primary-300: hsl(from var(--ig-primary-500) h calc(s * 0.73) calc(l * 1.19)); + --ig-primary-300-contrast: hsla(from color(from var(--ig-primary-300) var(--y-contrast)) h 0 l/1); + --ig-primary-400: hsl(from var(--ig-primary-500) h calc(s * 0.875) calc(l * 1.08)); + --ig-primary-400-contrast: hsla(from color(from var(--ig-primary-400) var(--y-contrast)) h 0 l/1); + --ig-primary-500: #09f; + --ig-primary-500-contrast: hsla(from color(from var(--ig-primary-500) var(--y-contrast)) h 0 l/1); + --ig-primary-600: hsl(from var(--ig-primary-500) h calc(s * 1.26) calc(l * 0.89)); + --ig-primary-600-contrast: hsla(from color(from var(--ig-primary-600) var(--y-contrast)) h 0 l/1); + --ig-primary-700: hsl(from var(--ig-primary-500) h calc(s * 1.26) calc(l * 0.81)); + --ig-primary-700-contrast: hsla(from color(from var(--ig-primary-700) var(--y-contrast)) h 0 l/1); + --ig-primary-800: hsl(from var(--ig-primary-500) h calc(s * 1.26) calc(l * 0.73)); + --ig-primary-800-contrast: hsla(from color(from var(--ig-primary-800) var(--y-contrast)) h 0 l/1); + --ig-primary-900: hsl(from var(--ig-primary-500) h calc(s * 1.26) calc(l * 0.64)); + --ig-primary-900-contrast: hsla(from color(from var(--ig-primary-900) var(--y-contrast)) h 0 l/1); + --ig-primary-seed: #09f; + --ig-primary-seed-contrast: hsla(from color(from var(--ig-primary-seed) var(--y-contrast)) h 0 l/1); + --ig-primary-A100: hsl(from var(--ig-primary-500) h calc(s * 1.23) calc(l * 1.34)); + --ig-primary-A100-contrast: hsla(from color(from var(--ig-primary-A100) var(--y-contrast)) h 0 l/1); + --ig-primary-A200: hsl(from var(--ig-primary-500) h calc(s * 1.22) calc(l * 1.16)); + --ig-primary-A200-contrast: hsla(from color(from var(--ig-primary-A200) var(--y-contrast)) h 0 l/1); + --ig-primary-A400: hsl(from var(--ig-primary-500) h calc(s * 1.23) calc(l * 0.91)); + --ig-primary-A400-contrast: hsla(from color(from var(--ig-primary-A400) var(--y-contrast)) h 0 l/1); + --ig-primary-A700: hsl(from var(--ig-primary-500) h calc(s * 1.23) calc(l * 0.65)); + --ig-primary-A700-contrast: hsla(from color(from var(--ig-primary-A700) var(--y-contrast)) h 0 l/1); + --ig-secondary-50: hsl(from var(--ig-secondary-500) h calc(s * 1.23) calc(l * 1.78)); + --ig-secondary-50-contrast: hsla(from color(from var(--ig-secondary-50) var(--y-contrast)) h 0 l/1); + --ig-secondary-100: hsl(from var(--ig-secondary-500) h calc(s * 0.8) calc(l * 1.66)); + --ig-secondary-100-contrast: hsla(from color(from var(--ig-secondary-100) var(--y-contrast)) h 0 l/1); + --ig-secondary-200: hsl(from var(--ig-secondary-500) h calc(s * 0.64) calc(l * 1.43)); + --ig-secondary-200-contrast: hsla(from color(from var(--ig-secondary-200) var(--y-contrast)) h 0 l/1); + --ig-secondary-300: hsl(from var(--ig-secondary-500) h calc(s * 0.73) calc(l * 1.19)); + --ig-secondary-300-contrast: hsla(from color(from var(--ig-secondary-300) var(--y-contrast)) h 0 l/1); + --ig-secondary-400: hsl(from var(--ig-secondary-500) h calc(s * 0.875) calc(l * 1.08)); + --ig-secondary-400-contrast: hsla(from color(from var(--ig-secondary-400) var(--y-contrast)) h 0 l/1); + --ig-secondary-500: #df1b74; + --ig-secondary-500-contrast: hsla(from color(from var(--ig-secondary-500) var(--y-contrast)) h 0 l/1); + --ig-secondary-600: hsl(from var(--ig-secondary-500) h calc(s * 1.26) calc(l * 0.89)); + --ig-secondary-600-contrast: hsla(from color(from var(--ig-secondary-600) var(--y-contrast)) h 0 l/1); + --ig-secondary-700: hsl(from var(--ig-secondary-500) h calc(s * 1.26) calc(l * 0.81)); + --ig-secondary-700-contrast: hsla(from color(from var(--ig-secondary-700) var(--y-contrast)) h 0 l/1); + --ig-secondary-800: hsl(from var(--ig-secondary-500) h calc(s * 1.26) calc(l * 0.73)); + --ig-secondary-800-contrast: hsla(from color(from var(--ig-secondary-800) var(--y-contrast)) h 0 l/1); + --ig-secondary-900: hsl(from var(--ig-secondary-500) h calc(s * 1.26) calc(l * 0.64)); + --ig-secondary-900-contrast: hsla(from color(from var(--ig-secondary-900) var(--y-contrast)) h 0 l/1); + --ig-secondary-seed: #df1b74; + --ig-secondary-seed-contrast: hsla(from color(from var(--ig-secondary-seed) var(--y-contrast)) h 0 l/1); + --ig-secondary-A100: hsl(from var(--ig-secondary-500) h calc(s * 1.23) calc(l * 1.34)); + --ig-secondary-A100-contrast: hsla(from color(from var(--ig-secondary-A100) var(--y-contrast)) h 0 l/1); + --ig-secondary-A200: hsl(from var(--ig-secondary-500) h calc(s * 1.22) calc(l * 1.16)); + --ig-secondary-A200-contrast: hsla(from color(from var(--ig-secondary-A200) var(--y-contrast)) h 0 l/1); + --ig-secondary-A400: hsl(from var(--ig-secondary-500) h calc(s * 1.23) calc(l * 0.91)); + --ig-secondary-A400-contrast: hsla(from color(from var(--ig-secondary-A400) var(--y-contrast)) h 0 l/1); + --ig-secondary-A700: hsl(from var(--ig-secondary-500) h calc(s * 1.23) calc(l * 0.65)); + --ig-secondary-A700-contrast: hsla(from color(from var(--ig-secondary-A700) var(--y-contrast)) h 0 l/1); + --ig-gray-50: hsl(from var(--ig-gray-500) h s 98%); + --ig-gray-50-contrast: hsla(from color(from var(--ig-gray-50) var(--y-contrast)) h 0 l/1); + --ig-gray-100: hsl(from var(--ig-gray-500) h s 96%); + --ig-gray-100-contrast: hsla(from color(from var(--ig-gray-100) var(--y-contrast)) h 0 l/1); + --ig-gray-200: hsl(from var(--ig-gray-500) h s 93%); + --ig-gray-200-contrast: hsla(from color(from var(--ig-gray-200) var(--y-contrast)) h 0 l/1); + --ig-gray-300: hsl(from var(--ig-gray-500) h s 88%); + --ig-gray-300-contrast: hsla(from color(from var(--ig-gray-300) var(--y-contrast)) h 0 l/1); + --ig-gray-400: hsl(from var(--ig-gray-500) h s 74%); + --ig-gray-400-contrast: hsla(from color(from var(--ig-gray-400) var(--y-contrast)) h 0 l/1); + --ig-gray-500: hsl(0, 0%, 62%); + --ig-gray-500-contrast: hsla(from color(from var(--ig-gray-500) var(--y-contrast)) h 0 l/1); + --ig-gray-600: hsl(from var(--ig-gray-500) h s 54%); + --ig-gray-600-contrast: hsla(from color(from var(--ig-gray-600) var(--y-contrast)) h 0 l/1); + --ig-gray-700: hsl(from var(--ig-gray-500) h s 38%); + --ig-gray-700-contrast: hsla(from color(from var(--ig-gray-700) var(--y-contrast)) h 0 l/1); + --ig-gray-800: hsl(from var(--ig-gray-500) h s 26%); + --ig-gray-800-contrast: hsla(from color(from var(--ig-gray-800) var(--y-contrast)) h 0 l/1); + --ig-gray-900: hsl(from var(--ig-gray-500) h s 13%); + --ig-gray-900-contrast: hsla(from color(from var(--ig-gray-900) var(--y-contrast)) h 0 l/1); + --ig-gray-seed: #000; + --ig-gray-seed-contrast: hsla(from color(from var(--ig-gray-seed) var(--y-contrast)) h 0 l/1); + --ig-surface-50: hsl(from var(--ig-surface-500) h calc(s * 1.23) calc(l * 1.78)); + --ig-surface-50-contrast: hsla(from color(from var(--ig-surface-50) var(--y-contrast)) h 0 l/1); + --ig-surface-100: hsl(from var(--ig-surface-500) h calc(s * 0.8) calc(l * 1.66)); + --ig-surface-100-contrast: hsla(from color(from var(--ig-surface-100) var(--y-contrast)) h 0 l/1); + --ig-surface-200: hsl(from var(--ig-surface-500) h calc(s * 0.64) calc(l * 1.43)); + --ig-surface-200-contrast: hsla(from color(from var(--ig-surface-200) var(--y-contrast)) h 0 l/1); + --ig-surface-300: hsl(from var(--ig-surface-500) h calc(s * 0.73) calc(l * 1.19)); + --ig-surface-300-contrast: hsla(from color(from var(--ig-surface-300) var(--y-contrast)) h 0 l/1); + --ig-surface-400: hsl(from var(--ig-surface-500) h calc(s * 0.875) calc(l * 1.08)); + --ig-surface-400-contrast: hsla(from color(from var(--ig-surface-400) var(--y-contrast)) h 0 l/1); + --ig-surface-500: white; + --ig-surface-500-contrast: hsla(from color(from var(--ig-surface-500) var(--y-contrast)) h 0 l/1); + --ig-surface-600: hsl(from var(--ig-surface-500) h calc(s * 1.26) calc(l * 0.89)); + --ig-surface-600-contrast: hsla(from color(from var(--ig-surface-600) var(--y-contrast)) h 0 l/1); + --ig-surface-700: hsl(from var(--ig-surface-500) h calc(s * 1.26) calc(l * 0.81)); + --ig-surface-700-contrast: hsla(from color(from var(--ig-surface-700) var(--y-contrast)) h 0 l/1); + --ig-surface-800: hsl(from var(--ig-surface-500) h calc(s * 1.26) calc(l * 0.73)); + --ig-surface-800-contrast: hsla(from color(from var(--ig-surface-800) var(--y-contrast)) h 0 l/1); + --ig-surface-900: hsl(from var(--ig-surface-500) h calc(s * 1.26) calc(l * 0.64)); + --ig-surface-900-contrast: hsla(from color(from var(--ig-surface-900) var(--y-contrast)) h 0 l/1); + --ig-surface-seed: white; + --ig-surface-seed-contrast: hsla(from color(from var(--ig-surface-seed) var(--y-contrast)) h 0 l/1); + --ig-surface-A100: hsl(from var(--ig-surface-500) h calc(s * 1.23) calc(l * 1.34)); + --ig-surface-A100-contrast: hsla(from color(from var(--ig-surface-A100) var(--y-contrast)) h 0 l/1); + --ig-surface-A200: hsl(from var(--ig-surface-500) h calc(s * 1.22) calc(l * 1.16)); + --ig-surface-A200-contrast: hsla(from color(from var(--ig-surface-A200) var(--y-contrast)) h 0 l/1); + --ig-surface-A400: hsl(from var(--ig-surface-500) h calc(s * 1.23) calc(l * 0.91)); + --ig-surface-A400-contrast: hsla(from color(from var(--ig-surface-A400) var(--y-contrast)) h 0 l/1); + --ig-surface-A700: hsl(from var(--ig-surface-500) h calc(s * 1.23) calc(l * 0.65)); + --ig-surface-A700-contrast: hsla(from color(from var(--ig-surface-A700) var(--y-contrast)) h 0 l/1); + --ig-info-50: hsl(from var(--ig-info-500) h calc(s * 1.23) calc(l * 1.78)); + --ig-info-50-contrast: hsla(from color(from var(--ig-info-50) var(--y-contrast)) h 0 l/1); + --ig-info-100: hsl(from var(--ig-info-500) h calc(s * 0.8) calc(l * 1.66)); + --ig-info-100-contrast: hsla(from color(from var(--ig-info-100) var(--y-contrast)) h 0 l/1); + --ig-info-200: hsl(from var(--ig-info-500) h calc(s * 0.64) calc(l * 1.43)); + --ig-info-200-contrast: hsla(from color(from var(--ig-info-200) var(--y-contrast)) h 0 l/1); + --ig-info-300: hsl(from var(--ig-info-500) h calc(s * 0.73) calc(l * 1.19)); + --ig-info-300-contrast: hsla(from color(from var(--ig-info-300) var(--y-contrast)) h 0 l/1); + --ig-info-400: hsl(from var(--ig-info-500) h calc(s * 0.875) calc(l * 1.08)); + --ig-info-400-contrast: hsla(from color(from var(--ig-info-400) var(--y-contrast)) h 0 l/1); + --ig-info-500: #1377d5; + --ig-info-500-contrast: hsla(from color(from var(--ig-info-500) var(--y-contrast)) h 0 l/1); + --ig-info-600: hsl(from var(--ig-info-500) h calc(s * 1.26) calc(l * 0.89)); + --ig-info-600-contrast: hsla(from color(from var(--ig-info-600) var(--y-contrast)) h 0 l/1); + --ig-info-700: hsl(from var(--ig-info-500) h calc(s * 1.26) calc(l * 0.81)); + --ig-info-700-contrast: hsla(from color(from var(--ig-info-700) var(--y-contrast)) h 0 l/1); + --ig-info-800: hsl(from var(--ig-info-500) h calc(s * 1.26) calc(l * 0.73)); + --ig-info-800-contrast: hsla(from color(from var(--ig-info-800) var(--y-contrast)) h 0 l/1); + --ig-info-900: hsl(from var(--ig-info-500) h calc(s * 1.26) calc(l * 0.64)); + --ig-info-900-contrast: hsla(from color(from var(--ig-info-900) var(--y-contrast)) h 0 l/1); + --ig-info-seed: #1377d5; + --ig-info-seed-contrast: hsla(from color(from var(--ig-info-seed) var(--y-contrast)) h 0 l/1); + --ig-info-A100: hsl(from var(--ig-info-500) h calc(s * 1.23) calc(l * 1.34)); + --ig-info-A100-contrast: hsla(from color(from var(--ig-info-A100) var(--y-contrast)) h 0 l/1); + --ig-info-A200: hsl(from var(--ig-info-500) h calc(s * 1.22) calc(l * 1.16)); + --ig-info-A200-contrast: hsla(from color(from var(--ig-info-A200) var(--y-contrast)) h 0 l/1); + --ig-info-A400: hsl(from var(--ig-info-500) h calc(s * 1.23) calc(l * 0.91)); + --ig-info-A400-contrast: hsla(from color(from var(--ig-info-A400) var(--y-contrast)) h 0 l/1); + --ig-info-A700: hsl(from var(--ig-info-500) h calc(s * 1.23) calc(l * 0.65)); + --ig-info-A700-contrast: hsla(from color(from var(--ig-info-A700) var(--y-contrast)) h 0 l/1); + --ig-success-50: hsl(from var(--ig-success-500) h calc(s * 1.23) calc(l * 1.78)); + --ig-success-50-contrast: hsla(from color(from var(--ig-success-50) var(--y-contrast)) h 0 l/1); + --ig-success-100: hsl(from var(--ig-success-500) h calc(s * 0.8) calc(l * 1.66)); + --ig-success-100-contrast: hsla(from color(from var(--ig-success-100) var(--y-contrast)) h 0 l/1); + --ig-success-200: hsl(from var(--ig-success-500) h calc(s * 0.64) calc(l * 1.43)); + --ig-success-200-contrast: hsla(from color(from var(--ig-success-200) var(--y-contrast)) h 0 l/1); + --ig-success-300: hsl(from var(--ig-success-500) h calc(s * 0.73) calc(l * 1.19)); + --ig-success-300-contrast: hsla(from color(from var(--ig-success-300) var(--y-contrast)) h 0 l/1); + --ig-success-400: hsl(from var(--ig-success-500) h calc(s * 0.875) calc(l * 1.08)); + --ig-success-400-contrast: hsla(from color(from var(--ig-success-400) var(--y-contrast)) h 0 l/1); + --ig-success-500: #4eb862; + --ig-success-500-contrast: hsla(from color(from var(--ig-success-500) var(--y-contrast)) h 0 l/1); + --ig-success-600: hsl(from var(--ig-success-500) h calc(s * 1.26) calc(l * 0.89)); + --ig-success-600-contrast: hsla(from color(from var(--ig-success-600) var(--y-contrast)) h 0 l/1); + --ig-success-700: hsl(from var(--ig-success-500) h calc(s * 1.26) calc(l * 0.81)); + --ig-success-700-contrast: hsla(from color(from var(--ig-success-700) var(--y-contrast)) h 0 l/1); + --ig-success-800: hsl(from var(--ig-success-500) h calc(s * 1.26) calc(l * 0.73)); + --ig-success-800-contrast: hsla(from color(from var(--ig-success-800) var(--y-contrast)) h 0 l/1); + --ig-success-900: hsl(from var(--ig-success-500) h calc(s * 1.26) calc(l * 0.64)); + --ig-success-900-contrast: hsla(from color(from var(--ig-success-900) var(--y-contrast)) h 0 l/1); + --ig-success-seed: #4eb862; + --ig-success-seed-contrast: hsla(from color(from var(--ig-success-seed) var(--y-contrast)) h 0 l/1); + --ig-success-A100: hsl(from var(--ig-success-500) h calc(s * 1.23) calc(l * 1.34)); + --ig-success-A100-contrast: hsla(from color(from var(--ig-success-A100) var(--y-contrast)) h 0 l/1); + --ig-success-A200: hsl(from var(--ig-success-500) h calc(s * 1.22) calc(l * 1.16)); + --ig-success-A200-contrast: hsla(from color(from var(--ig-success-A200) var(--y-contrast)) h 0 l/1); + --ig-success-A400: hsl(from var(--ig-success-500) h calc(s * 1.23) calc(l * 0.91)); + --ig-success-A400-contrast: hsla(from color(from var(--ig-success-A400) var(--y-contrast)) h 0 l/1); + --ig-success-A700: hsl(from var(--ig-success-500) h calc(s * 1.23) calc(l * 0.65)); + --ig-success-A700-contrast: hsla(from color(from var(--ig-success-A700) var(--y-contrast)) h 0 l/1); + --ig-warn-50: hsl(from var(--ig-warn-500) h calc(s * 1.23) calc(l * 1.78)); + --ig-warn-50-contrast: hsla(from color(from var(--ig-warn-50) var(--y-contrast)) h 0 l/1); + --ig-warn-100: hsl(from var(--ig-warn-500) h calc(s * 0.8) calc(l * 1.66)); + --ig-warn-100-contrast: hsla(from color(from var(--ig-warn-100) var(--y-contrast)) h 0 l/1); + --ig-warn-200: hsl(from var(--ig-warn-500) h calc(s * 0.64) calc(l * 1.43)); + --ig-warn-200-contrast: hsla(from color(from var(--ig-warn-200) var(--y-contrast)) h 0 l/1); + --ig-warn-300: hsl(from var(--ig-warn-500) h calc(s * 0.73) calc(l * 1.19)); + --ig-warn-300-contrast: hsla(from color(from var(--ig-warn-300) var(--y-contrast)) h 0 l/1); + --ig-warn-400: hsl(from var(--ig-warn-500) h calc(s * 0.875) calc(l * 1.08)); + --ig-warn-400-contrast: hsla(from color(from var(--ig-warn-400) var(--y-contrast)) h 0 l/1); + --ig-warn-500: #faa419; + --ig-warn-500-contrast: hsla(from color(from var(--ig-warn-500) var(--y-contrast)) h 0 l/1); + --ig-warn-600: hsl(from var(--ig-warn-500) h calc(s * 1.26) calc(l * 0.89)); + --ig-warn-600-contrast: hsla(from color(from var(--ig-warn-600) var(--y-contrast)) h 0 l/1); + --ig-warn-700: hsl(from var(--ig-warn-500) h calc(s * 1.26) calc(l * 0.81)); + --ig-warn-700-contrast: hsla(from color(from var(--ig-warn-700) var(--y-contrast)) h 0 l/1); + --ig-warn-800: hsl(from var(--ig-warn-500) h calc(s * 1.26) calc(l * 0.73)); + --ig-warn-800-contrast: hsla(from color(from var(--ig-warn-800) var(--y-contrast)) h 0 l/1); + --ig-warn-900: hsl(from var(--ig-warn-500) h calc(s * 1.26) calc(l * 0.64)); + --ig-warn-900-contrast: hsla(from color(from var(--ig-warn-900) var(--y-contrast)) h 0 l/1); + --ig-warn-seed: #faa419; + --ig-warn-seed-contrast: hsla(from color(from var(--ig-warn-seed) var(--y-contrast)) h 0 l/1); + --ig-warn-A100: hsl(from var(--ig-warn-500) h calc(s * 1.23) calc(l * 1.34)); + --ig-warn-A100-contrast: hsla(from color(from var(--ig-warn-A100) var(--y-contrast)) h 0 l/1); + --ig-warn-A200: hsl(from var(--ig-warn-500) h calc(s * 1.22) calc(l * 1.16)); + --ig-warn-A200-contrast: hsla(from color(from var(--ig-warn-A200) var(--y-contrast)) h 0 l/1); + --ig-warn-A400: hsl(from var(--ig-warn-500) h calc(s * 1.23) calc(l * 0.91)); + --ig-warn-A400-contrast: hsla(from color(from var(--ig-warn-A400) var(--y-contrast)) h 0 l/1); + --ig-warn-A700: hsl(from var(--ig-warn-500) h calc(s * 1.23) calc(l * 0.65)); + --ig-warn-A700-contrast: hsla(from color(from var(--ig-warn-A700) var(--y-contrast)) h 0 l/1); + --ig-error-50: hsl(from var(--ig-error-500) h calc(s * 1.23) calc(l * 1.78)); + --ig-error-50-contrast: hsla(from color(from var(--ig-error-50) var(--y-contrast)) h 0 l/1); + --ig-error-100: hsl(from var(--ig-error-500) h calc(s * 0.8) calc(l * 1.66)); + --ig-error-100-contrast: hsla(from color(from var(--ig-error-100) var(--y-contrast)) h 0 l/1); + --ig-error-200: hsl(from var(--ig-error-500) h calc(s * 0.64) calc(l * 1.43)); + --ig-error-200-contrast: hsla(from color(from var(--ig-error-200) var(--y-contrast)) h 0 l/1); + --ig-error-300: hsl(from var(--ig-error-500) h calc(s * 0.73) calc(l * 1.19)); + --ig-error-300-contrast: hsla(from color(from var(--ig-error-300) var(--y-contrast)) h 0 l/1); + --ig-error-400: hsl(from var(--ig-error-500) h calc(s * 0.875) calc(l * 1.08)); + --ig-error-400-contrast: hsla(from color(from var(--ig-error-400) var(--y-contrast)) h 0 l/1); + --ig-error-500: #ff134a; + --ig-error-500-contrast: hsla(from color(from var(--ig-error-500) var(--y-contrast)) h 0 l/1); + --ig-error-600: hsl(from var(--ig-error-500) h calc(s * 1.26) calc(l * 0.89)); + --ig-error-600-contrast: hsla(from color(from var(--ig-error-600) var(--y-contrast)) h 0 l/1); + --ig-error-700: hsl(from var(--ig-error-500) h calc(s * 1.26) calc(l * 0.81)); + --ig-error-700-contrast: hsla(from color(from var(--ig-error-700) var(--y-contrast)) h 0 l/1); + --ig-error-800: hsl(from var(--ig-error-500) h calc(s * 1.26) calc(l * 0.73)); + --ig-error-800-contrast: hsla(from color(from var(--ig-error-800) var(--y-contrast)) h 0 l/1); + --ig-error-900: hsl(from var(--ig-error-500) h calc(s * 1.26) calc(l * 0.64)); + --ig-error-900-contrast: hsla(from color(from var(--ig-error-900) var(--y-contrast)) h 0 l/1); + --ig-error-seed: #ff134a; + --ig-error-seed-contrast: hsla(from color(from var(--ig-error-seed) var(--y-contrast)) h 0 l/1); + --ig-error-A100: hsl(from var(--ig-error-500) h calc(s * 1.23) calc(l * 1.34)); + --ig-error-A100-contrast: hsla(from color(from var(--ig-error-A100) var(--y-contrast)) h 0 l/1); + --ig-error-A200: hsl(from var(--ig-error-500) h calc(s * 1.22) calc(l * 1.16)); + --ig-error-A200-contrast: hsla(from color(from var(--ig-error-A200) var(--y-contrast)) h 0 l/1); + --ig-error-A400: hsl(from var(--ig-error-500) h calc(s * 1.23) calc(l * 0.91)); + --ig-error-A400-contrast: hsla(from color(from var(--ig-error-A400) var(--y-contrast)) h 0 l/1); + --ig-error-A700: hsl(from var(--ig-error-500) h calc(s * 1.23) calc(l * 0.65)); + --ig-error-A700-contrast: hsla(from color(from var(--ig-error-A700) var(--y-contrast)) h 0 l/1); +} + +:root { + --ig-font-family: Titillium Web, sans-serif; + --ig-base-font-size: 16px; + --ig-h1-font-size: 6rem; + --ig-h1-font-weight: 300; + --ig-h1-font-style: normal; + --ig-h1-line-height: 7rem; + --ig-h1-letter-spacing: -0.09375rem; + --ig-h1-text-transform: none; + --ig-h1-margin-top: 1.75rem; + --ig-h1-margin-bottom: 3.5rem; + --ig-h2-font-size: 3.75rem; + --ig-h2-font-weight: 300; + --ig-h2-font-style: normal; + --ig-h2-line-height: 4.4375rem; + --ig-h2-letter-spacing: -0.03125rem; + --ig-h2-text-transform: none; + --ig-h2-margin-top: 1.75rem; + --ig-h2-margin-bottom: 1.75rem; + --ig-h3-font-size: 3rem; + --ig-h3-font-weight: 400; + --ig-h3-font-style: normal; + --ig-h3-line-height: 3.5625rem; + --ig-h3-letter-spacing: 0; + --ig-h3-text-transform: none; + --ig-h3-margin-top: 1.75rem; + --ig-h3-margin-bottom: 0; + --ig-h4-font-size: 2.125rem; + --ig-h4-font-weight: 400; + --ig-h4-font-style: normal; + --ig-h4-line-height: 2.5rem; + --ig-h4-letter-spacing: 0.015625rem; + --ig-h4-text-transform: none; + --ig-h4-margin-top: 1.75rem; + --ig-h4-margin-bottom: 0; + --ig-h5-font-size: 1.5rem; + --ig-h5-font-weight: 400; + --ig-h5-font-style: normal; + --ig-h5-line-height: 1.75rem; + --ig-h5-letter-spacing: 0; + --ig-h5-text-transform: none; + --ig-h5-margin-top: 1.75rem; + --ig-h5-margin-bottom: 0; + --ig-h6-font-size: 1.25rem; + --ig-h6-font-weight: 600; + --ig-h6-font-style: normal; + --ig-h6-line-height: 1.5rem; + --ig-h6-letter-spacing: 0.009375rem; + --ig-h6-text-transform: none; + --ig-h6-margin-top: 0; + --ig-h6-margin-bottom: 0; + --ig-subtitle-1-font-size: 1rem; + --ig-subtitle-1-font-weight: 400; + --ig-subtitle-1-font-style: normal; + --ig-subtitle-1-line-height: 1.5rem; + --ig-subtitle-1-letter-spacing: 0.009375rem; + --ig-subtitle-1-text-transform: none; + --ig-subtitle-1-margin-top: 0; + --ig-subtitle-1-margin-bottom: 0; + --ig-subtitle-2-font-size: 0.875rem; + --ig-subtitle-2-font-weight: 600; + --ig-subtitle-2-font-style: normal; + --ig-subtitle-2-line-height: 1.5rem; + --ig-subtitle-2-letter-spacing: 0.00625rem; + --ig-subtitle-2-text-transform: none; + --ig-subtitle-2-margin-top: 0; + --ig-subtitle-2-margin-bottom: 0; + --ig-body-1-font-size: 1rem; + --ig-body-1-font-weight: 400; + --ig-body-1-font-style: normal; + --ig-body-1-line-height: 1.75rem; + --ig-body-1-letter-spacing: 0.03125rem; + --ig-body-1-text-transform: none; + --ig-body-1-margin-top: 1.75rem; + --ig-body-1-margin-bottom: 1rem; + --ig-body-2-font-size: 0.875rem; + --ig-body-2-font-weight: 400; + --ig-body-2-font-style: normal; + --ig-body-2-line-height: 1.25rem; + --ig-body-2-letter-spacing: 0.015625rem; + --ig-body-2-text-transform: none; + --ig-body-2-margin-top: 0; + --ig-body-2-margin-bottom: 0; + --ig-button-font-size: 0.875rem; + --ig-button-font-weight: 600; + --ig-button-font-style: normal; + --ig-button-line-height: 1rem; + --ig-button-letter-spacing: 0.046875rem; + --ig-button-text-transform: uppercase; + --ig-button-margin-top: 0; + --ig-button-margin-bottom: 0; + --ig-caption-font-size: 0.75rem; + --ig-caption-font-weight: 400; + --ig-caption-font-style: normal; + --ig-caption-line-height: 1rem; + --ig-caption-letter-spacing: 0.025rem; + --ig-caption-text-transform: none; + --ig-caption-margin-top: 0; + --ig-caption-margin-bottom: 0; + --ig-overline-font-size: 0.625rem; + --ig-overline-font-weight: 400; + --ig-overline-font-style: normal; + --ig-overline-line-height: 1rem; + --ig-overline-letter-spacing: 0.09375rem; + --ig-overline-text-transform: uppercase; + --ig-overline-margin-top: 0; + --ig-overline-margin-bottom: 0; +} + +.ig-typography h1 { + font-family: var(--ig-h1-font-family, var(--ig-font-family)); + font-size: var(--ig-h1-font-size); + font-weight: var(--ig-h1-font-weight); + font-style: var(--ig-h1-font-style); + line-height: var(--ig-h1-line-height); + letter-spacing: var(--ig-h1-letter-spacing); + text-transform: var(--ig-h1-text-transform); + margin-top: var(--ig-h1-margin-top); + margin-bottom: var(--ig-h1-margin-bottom); +} +.ig-typography h2 { + font-family: var(--ig-h2-font-family, var(--ig-font-family)); + font-size: var(--ig-h2-font-size); + font-weight: var(--ig-h2-font-weight); + font-style: var(--ig-h2-font-style); + line-height: var(--ig-h2-line-height); + letter-spacing: var(--ig-h2-letter-spacing); + text-transform: var(--ig-h2-text-transform); + margin-top: var(--ig-h2-margin-top); + margin-bottom: var(--ig-h2-margin-bottom); +} +.ig-typography h3 { + font-family: var(--ig-h3-font-family, var(--ig-font-family)); + font-size: var(--ig-h3-font-size); + font-weight: var(--ig-h3-font-weight); + font-style: var(--ig-h3-font-style); + line-height: var(--ig-h3-line-height); + letter-spacing: var(--ig-h3-letter-spacing); + text-transform: var(--ig-h3-text-transform); + margin-top: var(--ig-h3-margin-top); + margin-bottom: var(--ig-h3-margin-bottom); +} +.ig-typography h4 { + font-family: var(--ig-h4-font-family, var(--ig-font-family)); + font-size: var(--ig-h4-font-size); + font-weight: var(--ig-h4-font-weight); + font-style: var(--ig-h4-font-style); + line-height: var(--ig-h4-line-height); + letter-spacing: var(--ig-h4-letter-spacing); + text-transform: var(--ig-h4-text-transform); + margin-top: var(--ig-h4-margin-top); + margin-bottom: var(--ig-h4-margin-bottom); +} +.ig-typography h5 { + font-family: var(--ig-h5-font-family, var(--ig-font-family)); + font-size: var(--ig-h5-font-size); + font-weight: var(--ig-h5-font-weight); + font-style: var(--ig-h5-font-style); + line-height: var(--ig-h5-line-height); + letter-spacing: var(--ig-h5-letter-spacing); + text-transform: var(--ig-h5-text-transform); + margin-top: var(--ig-h5-margin-top); + margin-bottom: var(--ig-h5-margin-bottom); +} +.ig-typography h6 { + font-family: var(--ig-h6-font-family, var(--ig-font-family)); + font-size: var(--ig-h6-font-size); + font-weight: var(--ig-h6-font-weight); + font-style: var(--ig-h6-font-style); + line-height: var(--ig-h6-line-height); + letter-spacing: var(--ig-h6-letter-spacing); + text-transform: var(--ig-h6-text-transform); + margin-top: var(--ig-h6-margin-top); + margin-bottom: var(--ig-h6-margin-bottom); +} +.ig-typography p { + font-family: var(--ig-body-1-font-family, var(--ig-font-family)); + font-size: var(--ig-body-1-font-size); + font-weight: var(--ig-body-1-font-weight); + font-style: var(--ig-body-1-font-style); + line-height: var(--ig-body-1-line-height); + letter-spacing: var(--ig-body-1-letter-spacing); + text-transform: var(--ig-body-1-text-transform); + margin-top: var(--ig-body-1-margin-top); + margin-bottom: var(--ig-body-1-margin-bottom); +} +.ig-typography .ig-typography__h1 { + font-family: var(--ig-h1-font-family, var(--ig-font-family)); + font-size: var(--ig-h1-font-size); + font-weight: var(--ig-h1-font-weight); + font-style: var(--ig-h1-font-style); + line-height: var(--ig-h1-line-height); + letter-spacing: var(--ig-h1-letter-spacing); + text-transform: var(--ig-h1-text-transform); + margin-top: var(--ig-h1-margin-top); + margin-bottom: var(--ig-h1-margin-bottom); +} +.ig-typography .ig-typography__h2 { + font-family: var(--ig-h2-font-family, var(--ig-font-family)); + font-size: var(--ig-h2-font-size); + font-weight: var(--ig-h2-font-weight); + font-style: var(--ig-h2-font-style); + line-height: var(--ig-h2-line-height); + letter-spacing: var(--ig-h2-letter-spacing); + text-transform: var(--ig-h2-text-transform); + margin-top: var(--ig-h2-margin-top); + margin-bottom: var(--ig-h2-margin-bottom); +} +.ig-typography .ig-typography__h3 { + font-family: var(--ig-h3-font-family, var(--ig-font-family)); + font-size: var(--ig-h3-font-size); + font-weight: var(--ig-h3-font-weight); + font-style: var(--ig-h3-font-style); + line-height: var(--ig-h3-line-height); + letter-spacing: var(--ig-h3-letter-spacing); + text-transform: var(--ig-h3-text-transform); + margin-top: var(--ig-h3-margin-top); + margin-bottom: var(--ig-h3-margin-bottom); +} +.ig-typography .ig-typography__h4 { + font-family: var(--ig-h4-font-family, var(--ig-font-family)); + font-size: var(--ig-h4-font-size); + font-weight: var(--ig-h4-font-weight); + font-style: var(--ig-h4-font-style); + line-height: var(--ig-h4-line-height); + letter-spacing: var(--ig-h4-letter-spacing); + text-transform: var(--ig-h4-text-transform); + margin-top: var(--ig-h4-margin-top); + margin-bottom: var(--ig-h4-margin-bottom); +} +.ig-typography .ig-typography__h5 { + font-family: var(--ig-h5-font-family, var(--ig-font-family)); + font-size: var(--ig-h5-font-size); + font-weight: var(--ig-h5-font-weight); + font-style: var(--ig-h5-font-style); + line-height: var(--ig-h5-line-height); + letter-spacing: var(--ig-h5-letter-spacing); + text-transform: var(--ig-h5-text-transform); + margin-top: var(--ig-h5-margin-top); + margin-bottom: var(--ig-h5-margin-bottom); +} +.ig-typography .ig-typography__h6 { + font-family: var(--ig-h6-font-family, var(--ig-font-family)); + font-size: var(--ig-h6-font-size); + font-weight: var(--ig-h6-font-weight); + font-style: var(--ig-h6-font-style); + line-height: var(--ig-h6-line-height); + letter-spacing: var(--ig-h6-letter-spacing); + text-transform: var(--ig-h6-text-transform); + margin-top: var(--ig-h6-margin-top); + margin-bottom: var(--ig-h6-margin-bottom); +} +.ig-typography .ig-typography__subtitle-1 { + font-family: var(--ig-subtitle-1-font-family, var(--ig-font-family)); + font-size: var(--ig-subtitle-1-font-size); + font-weight: var(--ig-subtitle-1-font-weight); + font-style: var(--ig-subtitle-1-font-style); + line-height: var(--ig-subtitle-1-line-height); + letter-spacing: var(--ig-subtitle-1-letter-spacing); + text-transform: var(--ig-subtitle-1-text-transform); + margin-top: var(--ig-subtitle-1-margin-top); + margin-bottom: var(--ig-subtitle-1-margin-bottom); +} +.ig-typography .ig-typography__subtitle-2 { + font-family: var(--ig-subtitle-2-font-family, var(--ig-font-family)); + font-size: var(--ig-subtitle-2-font-size); + font-weight: var(--ig-subtitle-2-font-weight); + font-style: var(--ig-subtitle-2-font-style); + line-height: var(--ig-subtitle-2-line-height); + letter-spacing: var(--ig-subtitle-2-letter-spacing); + text-transform: var(--ig-subtitle-2-text-transform); + margin-top: var(--ig-subtitle-2-margin-top); + margin-bottom: var(--ig-subtitle-2-margin-bottom); +} +.ig-typography .ig-typography__body-1 { + font-family: var(--ig-body-1-font-family, var(--ig-font-family)); + font-size: var(--ig-body-1-font-size); + font-weight: var(--ig-body-1-font-weight); + font-style: var(--ig-body-1-font-style); + line-height: var(--ig-body-1-line-height); + letter-spacing: var(--ig-body-1-letter-spacing); + text-transform: var(--ig-body-1-text-transform); + margin-top: var(--ig-body-1-margin-top); + margin-bottom: var(--ig-body-1-margin-bottom); +} +.ig-typography .ig-typography__body-2 { + font-family: var(--ig-body-2-font-family, var(--ig-font-family)); + font-size: var(--ig-body-2-font-size); + font-weight: var(--ig-body-2-font-weight); + font-style: var(--ig-body-2-font-style); + line-height: var(--ig-body-2-line-height); + letter-spacing: var(--ig-body-2-letter-spacing); + text-transform: var(--ig-body-2-text-transform); + margin-top: var(--ig-body-2-margin-top); + margin-bottom: var(--ig-body-2-margin-bottom); +} +.ig-typography .ig-typography__button { + font-family: var(--ig-button-font-family, var(--ig-font-family)); + font-size: var(--ig-button-font-size); + font-weight: var(--ig-button-font-weight); + font-style: var(--ig-button-font-style); + line-height: var(--ig-button-line-height); + letter-spacing: var(--ig-button-letter-spacing); + text-transform: var(--ig-button-text-transform); + margin-top: var(--ig-button-margin-top); + margin-bottom: var(--ig-button-margin-bottom); +} +.ig-typography .ig-typography__caption { + font-family: var(--ig-caption-font-family, var(--ig-font-family)); + font-size: var(--ig-caption-font-size); + font-weight: var(--ig-caption-font-weight); + font-style: var(--ig-caption-font-style); + line-height: var(--ig-caption-line-height); + letter-spacing: var(--ig-caption-letter-spacing); + text-transform: var(--ig-caption-text-transform); + margin-top: var(--ig-caption-margin-top); + margin-bottom: var(--ig-caption-margin-bottom); +} +.ig-typography .ig-typography__overline { + font-family: var(--ig-overline-font-family, var(--ig-font-family)); + font-size: var(--ig-overline-font-size); + font-weight: var(--ig-overline-font-weight); + font-style: var(--ig-overline-font-style); + line-height: var(--ig-overline-line-height); + letter-spacing: var(--ig-overline-letter-spacing); + text-transform: var(--ig-overline-text-transform); + margin-top: var(--ig-overline-margin-top); + margin-bottom: var(--ig-overline-margin-bottom); +} + +:root { + --ig-elevation-0: none; + --ig-elevation-1: 0 calc(var(--ig-elevation-factor, 1) * 1px) calc(var(--ig-elevation-factor, 1) * 3px) 0 rgba(0, 0, 0, 0.26), 0 calc(var(--ig-elevation-factor, 1) * 1px) calc(var(--ig-elevation-factor, 1) * 1px) 0 rgba(0, 0, 0, 0.12), 0 calc(var(--ig-elevation-factor, 1) * 2px) calc(var(--ig-elevation-factor, 1) * 1px) calc(var(--ig-elevation-factor, 1) * -1px) rgba(0, 0, 0, 0.08); + --ig-elevation-2: 0 calc(var(--ig-elevation-factor, 1) * 1px) calc(var(--ig-elevation-factor, 1) * 5px) 0 rgba(0, 0, 0, 0.26), 0 calc(var(--ig-elevation-factor, 1) * 2px) calc(var(--ig-elevation-factor, 1) * 2px) 0 rgba(0, 0, 0, 0.12), 0 calc(var(--ig-elevation-factor, 1) * 3px) calc(var(--ig-elevation-factor, 1) * 1px) calc(var(--ig-elevation-factor, 1) * -2px) rgba(0, 0, 0, 0.08); + --ig-elevation-3: 0 calc(var(--ig-elevation-factor, 1) * 1px) calc(var(--ig-elevation-factor, 1) * 8px) 0 rgba(0, 0, 0, 0.26), 0 calc(var(--ig-elevation-factor, 1) * 3px) calc(var(--ig-elevation-factor, 1) * 4px) 0 rgba(0, 0, 0, 0.12), 0 calc(var(--ig-elevation-factor, 1) * 3px) calc(var(--ig-elevation-factor, 1) * 3px) calc(var(--ig-elevation-factor, 1) * -2px) rgba(0, 0, 0, 0.08); + --ig-elevation-4: 0 calc(var(--ig-elevation-factor, 1) * 2px) calc(var(--ig-elevation-factor, 1) * 4px) calc(var(--ig-elevation-factor, 1) * -1px) rgba(0, 0, 0, 0.26), 0 calc(var(--ig-elevation-factor, 1) * 4px) calc(var(--ig-elevation-factor, 1) * 5px) 0 rgba(0, 0, 0, 0.12), 0 calc(var(--ig-elevation-factor, 1) * 1px) calc(var(--ig-elevation-factor, 1) * 10px) 0 rgba(0, 0, 0, 0.08); + --ig-elevation-5: 0 calc(var(--ig-elevation-factor, 1) * 3px) calc(var(--ig-elevation-factor, 1) * 5px) calc(var(--ig-elevation-factor, 1) * -1px) rgba(0, 0, 0, 0.26), 0 calc(var(--ig-elevation-factor, 1) * 5px) calc(var(--ig-elevation-factor, 1) * 8px) 0 rgba(0, 0, 0, 0.12), 0 calc(var(--ig-elevation-factor, 1) * 1px) calc(var(--ig-elevation-factor, 1) * 14px) 0 rgba(0, 0, 0, 0.08); + --ig-elevation-6: 0 calc(var(--ig-elevation-factor, 1) * 3px) calc(var(--ig-elevation-factor, 1) * 5px) calc(var(--ig-elevation-factor, 1) * -1px) rgba(0, 0, 0, 0.26), 0 calc(var(--ig-elevation-factor, 1) * 6px) calc(var(--ig-elevation-factor, 1) * 10px) 0 rgba(0, 0, 0, 0.12), 0 calc(var(--ig-elevation-factor, 1) * 1px) calc(var(--ig-elevation-factor, 1) * 18px) 0 rgba(0, 0, 0, 0.08); + --ig-elevation-7: 0 calc(var(--ig-elevation-factor, 1) * 4px) calc(var(--ig-elevation-factor, 1) * 5px) calc(var(--ig-elevation-factor, 1) * -2px) rgba(0, 0, 0, 0.26), 0 calc(var(--ig-elevation-factor, 1) * 7px) calc(var(--ig-elevation-factor, 1) * 10px) calc(var(--ig-elevation-factor, 1) * 1px) rgba(0, 0, 0, 0.12), 0 calc(var(--ig-elevation-factor, 1) * 2px) calc(var(--ig-elevation-factor, 1) * 16px) calc(var(--ig-elevation-factor, 1) * 1px) rgba(0, 0, 0, 0.08); + --ig-elevation-8: 0 calc(var(--ig-elevation-factor, 1) * 5px) calc(var(--ig-elevation-factor, 1) * 5px) calc(var(--ig-elevation-factor, 1) * -3px) rgba(0, 0, 0, 0.26), 0 calc(var(--ig-elevation-factor, 1) * 8px) calc(var(--ig-elevation-factor, 1) * 10px) calc(var(--ig-elevation-factor, 1) * 1px) rgba(0, 0, 0, 0.12), 0 calc(var(--ig-elevation-factor, 1) * 3px) calc(var(--ig-elevation-factor, 1) * 14px) calc(var(--ig-elevation-factor, 1) * 2px) rgba(0, 0, 0, 0.08); + --ig-elevation-9: 0 calc(var(--ig-elevation-factor, 1) * 5px) calc(var(--ig-elevation-factor, 1) * 6px) calc(var(--ig-elevation-factor, 1) * -3px) rgba(0, 0, 0, 0.26), 0 calc(var(--ig-elevation-factor, 1) * 9px) calc(var(--ig-elevation-factor, 1) * 12px) calc(var(--ig-elevation-factor, 1) * 1px) rgba(0, 0, 0, 0.12), 0 calc(var(--ig-elevation-factor, 1) * 3px) calc(var(--ig-elevation-factor, 1) * 16px) calc(var(--ig-elevation-factor, 1) * 2px) rgba(0, 0, 0, 0.08); + --ig-elevation-10: 0 calc(var(--ig-elevation-factor, 1) * 6px) calc(var(--ig-elevation-factor, 1) * 6px) calc(var(--ig-elevation-factor, 1) * -3px) rgba(0, 0, 0, 0.26), 0 calc(var(--ig-elevation-factor, 1) * 10px) calc(var(--ig-elevation-factor, 1) * 14px) calc(var(--ig-elevation-factor, 1) * 1px) rgba(0, 0, 0, 0.12), 0 calc(var(--ig-elevation-factor, 1) * 4px) calc(var(--ig-elevation-factor, 1) * 18px) calc(var(--ig-elevation-factor, 1) * 3px) rgba(0, 0, 0, 0.08); + --ig-elevation-11: 0 calc(var(--ig-elevation-factor, 1) * 6px) calc(var(--ig-elevation-factor, 1) * 7px) calc(var(--ig-elevation-factor, 1) * -4px) rgba(0, 0, 0, 0.26), 0 calc(var(--ig-elevation-factor, 1) * 11px) calc(var(--ig-elevation-factor, 1) * 15px) calc(var(--ig-elevation-factor, 1) * 1px) rgba(0, 0, 0, 0.12), 0 calc(var(--ig-elevation-factor, 1) * 4px) calc(var(--ig-elevation-factor, 1) * 20px) calc(var(--ig-elevation-factor, 1) * 3px) rgba(0, 0, 0, 0.08); + --ig-elevation-12: 0 calc(var(--ig-elevation-factor, 1) * 7px) calc(var(--ig-elevation-factor, 1) * 8px) calc(var(--ig-elevation-factor, 1) * -4px) rgba(0, 0, 0, 0.26), 0 calc(var(--ig-elevation-factor, 1) * 12px) calc(var(--ig-elevation-factor, 1) * 17px) calc(var(--ig-elevation-factor, 1) * 2px) rgba(0, 0, 0, 0.12), 0 calc(var(--ig-elevation-factor, 1) * 5px) calc(var(--ig-elevation-factor, 1) * 22px) calc(var(--ig-elevation-factor, 1) * 4px) rgba(0, 0, 0, 0.08); + --ig-elevation-13: 0 calc(var(--ig-elevation-factor, 1) * 7px) calc(var(--ig-elevation-factor, 1) * 8px) calc(var(--ig-elevation-factor, 1) * -4px) rgba(0, 0, 0, 0.26), 0 calc(var(--ig-elevation-factor, 1) * 13px) calc(var(--ig-elevation-factor, 1) * 19px) calc(var(--ig-elevation-factor, 1) * 2px) rgba(0, 0, 0, 0.12), 0 calc(var(--ig-elevation-factor, 1) * 5px) calc(var(--ig-elevation-factor, 1) * 24px) calc(var(--ig-elevation-factor, 1) * 4px) rgba(0, 0, 0, 0.08); + --ig-elevation-14: 0 calc(var(--ig-elevation-factor, 1) * 7px) calc(var(--ig-elevation-factor, 1) * 9px) calc(var(--ig-elevation-factor, 1) * -4px) rgba(0, 0, 0, 0.26), 0 calc(var(--ig-elevation-factor, 1) * 14px) calc(var(--ig-elevation-factor, 1) * 21px) calc(var(--ig-elevation-factor, 1) * 2px) rgba(0, 0, 0, 0.12), 0 calc(var(--ig-elevation-factor, 1) * 5px) calc(var(--ig-elevation-factor, 1) * 26px) calc(var(--ig-elevation-factor, 1) * 4px) rgba(0, 0, 0, 0.08); + --ig-elevation-15: 0 calc(var(--ig-elevation-factor, 1) * 8px) calc(var(--ig-elevation-factor, 1) * 9px) calc(var(--ig-elevation-factor, 1) * -5px) rgba(0, 0, 0, 0.26), 0 calc(var(--ig-elevation-factor, 1) * 15px) calc(var(--ig-elevation-factor, 1) * 22px) calc(var(--ig-elevation-factor, 1) * 2px) rgba(0, 0, 0, 0.12), 0 calc(var(--ig-elevation-factor, 1) * 6px) calc(var(--ig-elevation-factor, 1) * 28px) calc(var(--ig-elevation-factor, 1) * 5px) rgba(0, 0, 0, 0.08); + --ig-elevation-16: 0 calc(var(--ig-elevation-factor, 1) * 8px) calc(var(--ig-elevation-factor, 1) * 10px) calc(var(--ig-elevation-factor, 1) * -5px) rgba(0, 0, 0, 0.26), 0 calc(var(--ig-elevation-factor, 1) * 16px) calc(var(--ig-elevation-factor, 1) * 24px) calc(var(--ig-elevation-factor, 1) * 2px) rgba(0, 0, 0, 0.12), 0 calc(var(--ig-elevation-factor, 1) * 6px) calc(var(--ig-elevation-factor, 1) * 30px) calc(var(--ig-elevation-factor, 1) * 5px) rgba(0, 0, 0, 0.08); + --ig-elevation-17: 0 calc(var(--ig-elevation-factor, 1) * 8px) calc(var(--ig-elevation-factor, 1) * 11px) calc(var(--ig-elevation-factor, 1) * -5px) rgba(0, 0, 0, 0.26), 0 calc(var(--ig-elevation-factor, 1) * 17px) calc(var(--ig-elevation-factor, 1) * 26px) calc(var(--ig-elevation-factor, 1) * 2px) rgba(0, 0, 0, 0.12), 0 calc(var(--ig-elevation-factor, 1) * 6px) calc(var(--ig-elevation-factor, 1) * 32px) calc(var(--ig-elevation-factor, 1) * 5px) rgba(0, 0, 0, 0.08); + --ig-elevation-18: 0 calc(var(--ig-elevation-factor, 1) * 9px) calc(var(--ig-elevation-factor, 1) * 11px) calc(var(--ig-elevation-factor, 1) * -5px) rgba(0, 0, 0, 0.26), 0 calc(var(--ig-elevation-factor, 1) * 18px) calc(var(--ig-elevation-factor, 1) * 28px) calc(var(--ig-elevation-factor, 1) * 2px) rgba(0, 0, 0, 0.12), 0 calc(var(--ig-elevation-factor, 1) * 7px) calc(var(--ig-elevation-factor, 1) * 34px) calc(var(--ig-elevation-factor, 1) * 6px) rgba(0, 0, 0, 0.08); + --ig-elevation-19: 0 calc(var(--ig-elevation-factor, 1) * 9px) calc(var(--ig-elevation-factor, 1) * 12px) calc(var(--ig-elevation-factor, 1) * -6px) rgba(0, 0, 0, 0.26), 0 calc(var(--ig-elevation-factor, 1) * 19px) calc(var(--ig-elevation-factor, 1) * 29px) calc(var(--ig-elevation-factor, 1) * 2px) rgba(0, 0, 0, 0.12), 0 calc(var(--ig-elevation-factor, 1) * 7px) calc(var(--ig-elevation-factor, 1) * 36px) calc(var(--ig-elevation-factor, 1) * 6px) rgba(0, 0, 0, 0.08); + --ig-elevation-20: 0 calc(var(--ig-elevation-factor, 1) * 10px) calc(var(--ig-elevation-factor, 1) * 13px) calc(var(--ig-elevation-factor, 1) * -6px) rgba(0, 0, 0, 0.26), 0 calc(var(--ig-elevation-factor, 1) * 20px) calc(var(--ig-elevation-factor, 1) * 31px) calc(var(--ig-elevation-factor, 1) * 3px) rgba(0, 0, 0, 0.12), 0 calc(var(--ig-elevation-factor, 1) * 8px) calc(var(--ig-elevation-factor, 1) * 38px) calc(var(--ig-elevation-factor, 1) * 7px) rgba(0, 0, 0, 0.08); + --ig-elevation-21: 0 calc(var(--ig-elevation-factor, 1) * 10px) calc(var(--ig-elevation-factor, 1) * 13px) calc(var(--ig-elevation-factor, 1) * -6px) rgba(0, 0, 0, 0.26), 0 calc(var(--ig-elevation-factor, 1) * 21px) calc(var(--ig-elevation-factor, 1) * 33px) calc(var(--ig-elevation-factor, 1) * 3px) rgba(0, 0, 0, 0.12), 0 calc(var(--ig-elevation-factor, 1) * 8px) calc(var(--ig-elevation-factor, 1) * 40px) calc(var(--ig-elevation-factor, 1) * 7px) rgba(0, 0, 0, 0.08); + --ig-elevation-22: 0 calc(var(--ig-elevation-factor, 1) * 10px) calc(var(--ig-elevation-factor, 1) * 14px) calc(var(--ig-elevation-factor, 1) * -6px) rgba(0, 0, 0, 0.26), 0 calc(var(--ig-elevation-factor, 1) * 22px) calc(var(--ig-elevation-factor, 1) * 35px) calc(var(--ig-elevation-factor, 1) * 3px) rgba(0, 0, 0, 0.12), 0 calc(var(--ig-elevation-factor, 1) * 8px) calc(var(--ig-elevation-factor, 1) * 42px) calc(var(--ig-elevation-factor, 1) * 7px) rgba(0, 0, 0, 0.08); + --ig-elevation-23: 0 calc(var(--ig-elevation-factor, 1) * 11px) calc(var(--ig-elevation-factor, 1) * 14px) calc(var(--ig-elevation-factor, 1) * -7px) rgba(0, 0, 0, 0.26), 0 calc(var(--ig-elevation-factor, 1) * 23px) calc(var(--ig-elevation-factor, 1) * 36px) calc(var(--ig-elevation-factor, 1) * 3px) rgba(0, 0, 0, 0.12), 0 calc(var(--ig-elevation-factor, 1) * 9px) calc(var(--ig-elevation-factor, 1) * 44px) calc(var(--ig-elevation-factor, 1) * 8px) rgba(0, 0, 0, 0.08); + --ig-elevation-24: 0 calc(var(--ig-elevation-factor, 1) * 11px) calc(var(--ig-elevation-factor, 1) * 15px) calc(var(--ig-elevation-factor, 1) * -7px) rgba(0, 0, 0, 0.26), 0 calc(var(--ig-elevation-factor, 1) * 24px) calc(var(--ig-elevation-factor, 1) * 38px) calc(var(--ig-elevation-factor, 1) * 3px) rgba(0, 0, 0, 0.12), 0 calc(var(--ig-elevation-factor, 1) * 9px) calc(var(--ig-elevation-factor, 1) * 46px) calc(var(--ig-elevation-factor, 1) * 8px) rgba(0, 0, 0, 0.08); +} + +:root { + --chart-brushes: var(--ig-chart-brushes, rgb(157, 231, 114), rgb(139, 91, 177), rgb(109, 177, 255), rgb(154, 242, 228), rgb(238, 88, 121), rgb(115, 86, 86), rgb(247, 210, 98), rgb(168, 168, 183), rgb(224, 81, 169), rgb(248, 161, 95)); +} + +:root { + --ig-category-chart-brushes: var(--chart-brushes); + --ig-category-chart-marker-brushes: var(--chart-brushes); + --ig-category-chart-negative-brushes: hsl(347, 82%, 64%); + --ig-category-chart-outlines: var(--chart-brushes); + --ig-category-chart-marker-outlines: var(--chart-brushes); + --ig-category-chart-negative-outlines: hsl(347, 82%, 64%); + --ig-category-chart-title-text-color: var(--ig-gray-900); + --ig-category-chart-subtitle-text-color: var(--ig-gray-700); + --ig-category-chart-trend-line-brushes: var(--chart-brushes); + --ig-category-chart-x-axis-label-text-color: var(--ig-gray-700); + --ig-category-chart-x-axis-stroke: var(--ig-gray-500); + --ig-category-chart-x-axis-tick-stroke: var(--ig-gray-500); + --ig-category-chart-x-axis-title-text-color: var(--ig-gray-900); + --ig-category-chart-y-axis-label-text-color: var(--ig-gray-700); + --ig-category-chart-y-axis-major-stroke: var(--ig-gray-300); + --ig-category-chart-y-axis-title-text-color: var(--ig-gray-900); + --ig-category-chart-y-axis-tick-stroke: var(--ig-gray-500); +} + +:root { + --ig-data-chart-title-text-color: var(--ig-gray-900); + --ig-data-chart-subtitle-text-color: var(--ig-gray-600); + --ig-data-chart-brushes: var(--chart-brushes); + --ig-data-chart-marker-brushes: var(--chart-brushes); + --ig-data-chart-outlines: var(--chart-brushes); + --ig-data-chart-marker-outlines: var(--chart-brushes); + --ig-data-chart-plot-area-background: var(--ig-surface-500); + --ig-data-chart-axis-label-text-color: var(--ig-gray-700); + --ig-data-chart-axis-stroke: var(--ig-gray-500); + --ig-data-chart-axis-tick-stroke: var(--ig-gray-500); + --ig-data-chart-axis-title-text-color: var(--ig-gray-900); +} + +:root { + --ig-doughnut-chart-brushes: var(--chart-brushes); + --ig-doughnut-chart-outlines: var(--chart-brushes); +} + +:root { + --ig-financial-chart-brushes: var(--chart-brushes); + --ig-financial-chart-outlines: var(--chart-brushes); + --ig-financial-chart-marker-brushes: var(--chart-brushes); + --ig-financial-chart-marker-outlines: var(--chart-brushes); + --ig-financial-chart-indicator-brushes: var(--chart-brushes); + --ig-financial-chart-indicator-negative-brushes: var(--chart-brushes); + --ig-financial-chart-negative-brushes: var(--chart-brushes); + --ig-financial-chart-negative-outlines: var(--chart-brushes); + --ig-financial-chart-overlay-brushes: var(--chart-brushes); + --ig-financial-chart-overlay-outlines: var(--chart-brushes); + --ig-financial-chart-overlay-thickness: var(--chart-brushes); + --ig-financial-chart-trend-line-brushes: var(--chart-brushes); + --ig-financial-chart-volume-brushes: var(--chart-brushes); + --ig-financial-chart-volume-outlines: var(--chart-brushes); +} + +:root { + --ig-funnel-chart-brushes: var(--chart-brushes); + --ig-funnel-chart-outlines: var(--chart-brushes); +} + +:root { + --ig-linear-gauge-backing-brush: var(--ig-surface-500); + --ig-linear-gauge-backing-outline: var(--ig-surface-500); + --ig-linear-gauge-font-brush: var(--ig-surface-500-contrast); + --ig-linear-gauge-minor-tick-brush: var(--ig-surface-500-contrast); + --ig-linear-gauge-needle-brush: var(--ig-primary-500); + --ig-linear-gauge-needle-outline: var(--ig-surface-500); + --ig-linear-gauge-range-brushes: var(--chart-brushes); + --ig-linear-gauge-range-outlines: var(--chart-brushes); + --ig-linear-gauge-scale-brush: var(--ig-surface-500); + --ig-linear-gauge-tick-brush: var(--ig-surface-500-contrast); + --ig-linear-gauge-scale-outline: var(--ig-surface-500); +} + +:root { + --ig-radial-gauge-backing-brush: var(--ig-surface-500); + --ig-radial-gauge-backing-outline: var(--ig-surface-500); + --ig-radial-gauge-font-brush: var(--ig-surface-500-contrast); + --ig-radial-gauge-minor-tick-brush: var(--ig-surface-500-contrast); + --ig-radial-gauge-needle-brush: var(--ig-primary-500); + --ig-radial-gauge-needle-outline: var(--ig-surface-500); + --ig-radial-gauge-range-brushes: var(--chart-brushes); + --ig-radial-gauge-range-outlines: var(--chart-brushes); + --ig-radial-gauge-scale-brush: var(--ig-surface-500); + --ig-radial-gauge-tick-brush: var(--ig-surface-500-contrast); + --ig-radial-gauge-needle-pivot-brush: var(--ig-primary-500); + --ig-radial-gauge-needle-pivot-outline: var(--ig-surface-500); +} + +:root { + --ig-geo-map-plot-area-background: var(--ig-surface-500); +} + +:root { + --ig-bullet-graph-backing-brush: var(--ig-surface-500); + --ig-bullet-graph-backing-outline: var(--ig-surface-500); + --ig-bullet-graph-font-brush: var(--ig-surface-500-contrast); + --ig-bullet-graph-minor-tick-brush: var(--ig-surface-500-contrast); + --ig-bullet-graph-range-brushes: var(--chart-brushes); + --ig-bullet-graph-range-outlines: var(--chart-brushes); + --ig-bullet-graph-scale-background-brush: var(--ig-primary-500); + --ig-bullet-graph-scale-background-outline: var(--ig-surface-500); + --ig-bullet-graph-target-value-brush: var(--ig-gray-800); + --ig-bullet-graph-tick-brush: var(--ig-surface-500-contrast); + --ig-bullet-graph-value-brush: var(--ig-gray-800); +} + +:root { + --ig-pie-chart-brushes: var(--chart-brushes); + --ig-pie-chart-outlines: var(--chart-brushes); + --ig-pie-chart-label-extent: 30; + --ig-pie-chart-label-outer-color: var(--ig-gray-700); +} + +:root { + --ig-shape-chart-title-text-color: var(--ig-gray-900); + --ig-shape-chart-subtitle-text-color: var(--ig-gray-600); + --ig-shape-chart-brushes: var(--chart-brushes); + --ig-shape-chart-marker-brushes: var(--chart-brushes); + --ig-shape-chart-outlines: var(--chart-brushes); + --ig-shape-chart-marker-outlines: var(--chart-brushes); + --ig-shape-chart-trend-line-brushes: var(--chart-brushes); +} + +:root { + --ig-sparkline-brush: var(--ig-primary-500); +} + +igx-category-chart { + --title-text-style: var(--igx-category-chart-title-text-style, var(--ig-category-chart-title-text-style, 600 1.25rem var(--ig-font-family))); + --subtitle-text-style: var(--igx-category-chart-subtitle-text-style, var(--ig-category-chart-subtitle-text-style, 400 1rem var(--ig-font-family))); + --x-axis-label-text-style: var(--igx-category-chart-x-axis-label-text-style, var(--ig-category-chart-x-axis-label-text-style, 400 0.875rem var(--ig-font-family))); + --x-axis-title-text-style: var(--igx-category-chart-x-axis-title-text-style, var(--ig-category-chart-x-axis-title-text-style, 400 0.875rem var(--ig-font-family))); + --y-axis-label-text-style: var(--igx-category-chart-y-axis-label-text-style, var(--ig-category-chart-y-axis-label-text-style, 400 0.875rem var(--ig-font-family))); + --y-axis-title-text-style: var(--igx-category-chart-y-axis-title-text-style, var(--ig-category-chart-y-axis-title-text-style, 400 0.875rem var(--ig-font-family))); +} + +igx-data-chart { + --title-text-style: var(--igx-data-chart-title-text-style, var(--ig-data-chart-title-text-style, 600 1.25rem var(--ig-font-family))); + --subtitle-text-style: var(--igx-data-chart-subtitle-text-style, var(--ig-data-chart-subtitle-text-style, 400 1rem var(--ig-font-family))); +} + +igx-financial-chart { + --title-text-style: var(--igx-financial-chart-title-text-style, var(--ig-financial-chart-title-text-style, 600 1.25rem var(--ig-font-family))); + --subtitle-text-style: var(--igx-financial-chart-subtitle-text-style, var(--ig-financial-chart-subtitle-text-style, 400 1rem var(--ig-font-family))); + --x-axis-label-text-style: var(--igx-financial-chart-x-axis-label-text-style, var(--ig-financial-chart-x-axis-label-text-style, 400 0.875rem var(--ig-font-family))); + --x-axis-title-text-style: var(--igx-financial-chart-x-axis-title-text-style, var(--ig-financial-chart-x-axis-title-text-style, 400 0.875rem var(--ig-font-family))); + --y-axis-label-text-style: var(--igx-financial-chart-y-axis-label-text-style, var(--ig-financial-chart-y-axis-label-text-style, 400 0.875rem var(--ig-font-family))); + --y-axis-title-text-style: var(--igx-financial-chart-y-axis-title-text-style, var(--ig-financial-chart-y-axis-title-text-style, 400 0.875rem var(--ig-font-family))); +} + +igx-funnel-chart { + --outer-label-text-style: var(--igx-funnel-chart-outer-label-text-style, var(--ig-funnel-chart-outer-label-text-style, 300 6rem var(--ig-font-family))); + --text-style: var(--igx-funnel-chart-text-style, var(--ig-funnel-chart-text-style, 400 1rem var(--ig-font-family))); +} + +igx-linear-gauge { + --linear-gauge-font: var(--ig-font-family, inherit); +} + +igx-radial-gauge { + --radial-gauge-font: var(--ig-font-family, inherit); +} + +igx-bullet-graph { + --bullet-graph-font: var(--ig-font-family, inherit); +} + +igx-pie-chart { + --text-style: var(--igx-pie-chart-text-style, var(--ig-pie-chart-text-style, 400 0.875rem var(--ig-font-family))); +} + +igx-shape-chart { + --title-text-style: var(--igx-shape-chart-title-text-style, var(--ig-shape-chart-title-text-style, 600 1.25rem var(--ig-font-family))); + --subtitle-text-style: var(--igx-shape-chart-subtitle-text-style, var(--ig-shape-chart-subtitle-text-style, 400 1rem var(--ig-font-family))); + --x-axis-title-text-style: var(--igx-shape-chart-x-axis-title-text-style, var(--ig-shape-chart-x-axis-title-text-style, 400 3rem var(--ig-font-family))); + --x-axis-label-text-style: var(--igx-shape-chart-x-axis-label-text-style, var(--ig-shape-chart-x-axis-label-text-style, 400 2.125rem var(--ig-font-family))); + --y-axis-title-text-style: var(--igx-shape-chart-y-axis-title-text-style, var(--ig-shape-chart-y-axis-title-text-style, 400 3rem var(--ig-font-family))); + --y-axis-label-text-style: var(--igx-shape-chart-y-axis-label-text-style, var(--ig-shape-chart-y-axis-label-text-style, 400 2.125rem var(--ig-font-family))); +} + +.test, +.test igx-avatar { + --background: var(--igx-avatar-background, var(--ig-avatar-background, red)); + --color: var(--igx-avatar-color, var(--ig-avatar-color, hsla(from color(from var(--background) var(--y-contrast)) h 0 l/1))); + --icon-color: var(--igx-avatar-icon-color, var(--ig-avatar-icon-color, hsla(from color(from var(--background) var(--y-contrast)) h 0 l/1))); + --border-radius: var(--igx-avatar-border-radius, var(--ig-avatar-border-radius, 0.5rem)); + --size: var(--igx-avatar-size, var(--ig-avatar-size, max(var(--is-large, 1) * max(5.5rem, -1 * 5.5rem), var(--is-medium, 1) * max(4rem, -1 * 4rem), var(--is-small, 1) * max(2.5rem, -1 * 2.5rem)))); + --default-size: var(--igx-avatar-default-size, var(--ig-avatar-default-size, 1)); + --ig-theme: material; + --ig-theme-variant: dark; +} + +.handmade { + --ig-wcag-a: 0.31; + --ig-wcag-aa: 0.185; + --ig-wcag-aaa: 0.178; + --ig-contrast-level: var(--ig-wcag-aa); + --y: clamp(0, (y / var(--ig-contrast-level) - 1) * -infinity, 1); + --y-contrast: xyz-d65 var(--y) var(--y) var(--y); +} +.handmade { + --ig-primary-50: #e6eff8; + --ig-primary-50-contrast: black; + --ig-primary-100: #bfd7f2; + --ig-primary-100-contrast: black; + --ig-primary-200: #98bfec; + --ig-primary-200-contrast: black; + --ig-primary-300: #85b5e9; + --ig-primary-300-contrast: white; + --ig-primary-400: #73a6e4; + --ig-primary-400-contrast: white; + --ig-primary-500: #6797de; + --ig-primary-500-contrast: white; + --ig-primary-600: #3681dd; + --ig-primary-600-contrast: white; + --ig-primary-700: #357fda; + --ig-primary-700-contrast: white; + --ig-primary-800: #306dc8; + --ig-primary-800-contrast: white; + --ig-primary-900: #284ea8; + --ig-primary-900-contrast: white; + --ig-primary-A100: #98bfec; + --ig-primary-A100-contrast: white; + --ig-primary-A200: #73a6e4; + --ig-primary-A200-contrast: white; + --ig-primary-A400: #3681dd; + --ig-primary-A400-contrast: white; + --ig-primary-A700: #284ea8; + --ig-primary-A700-contrast: white; + --ig-primary-seed: #6797de; + --ig-primary-seed-contrast: white; + --ig-secondary-50: #fef7e2; + --ig-secondary-50-contrast: black; + --ig-secondary-100: #fdeab7; + --ig-secondary-100-contrast: black; + --ig-secondary-200: #fbdd89; + --ig-secondary-200-contrast: black; + --ig-secondary-300: #fad15c; + --ig-secondary-300-contrast: black; + --ig-secondary-400: #f9c63f; + --ig-secondary-400-contrast: black; + --ig-secondary-500: #f7bd32; + --ig-secondary-500-contrast: white; + --ig-secondary-600: #f6b02d; + --ig-secondary-600-contrast: white; + --ig-secondary-700: #f49e2a; + --ig-secondary-700-contrast: white; + --ig-secondary-800: #f38e28; + --ig-secondary-800-contrast: white; + --ig-secondary-900: #f38e28; + --ig-secondary-900-contrast: white; + --ig-secondary-A100: #fbdd89; + --ig-secondary-A100-contrast: black; + --ig-secondary-A200: #f9c63f; + --ig-secondary-A200-contrast: black; + --ig-secondary-A400: #f6b02d; + --ig-secondary-A400-contrast: white; + --ig-secondary-A700: #f38e28; + --ig-secondary-A700-contrast: white; + --ig-secondary-seed: #f7bd32; + --ig-secondary-seed-contrast: white; + --ig-tertiary-500: #f7bd32; + --ig-tertiary-500-contrast: white; + --ig-gray-50: #fff; + --ig-gray-50-contrast: black; + --ig-gray-100: #fafafa; + --ig-gray-100-contrast: black; + --ig-gray-200: #f5f5f5; + --ig-gray-200-contrast: black; + --ig-gray-300: #f0f0f0; + --ig-gray-300-contrast: black; + --ig-gray-400: #dedede; + --ig-gray-400-contrast: black; + --ig-gray-500: #b3b2b2; + --ig-gray-500-contrast: black; + --ig-gray-600: #979696; + --ig-gray-600-contrast: white; + --ig-gray-700: #7b7a7a; + --ig-gray-700-contrast: white; + --ig-gray-800: #404040; + --ig-gray-800-contrast: white; + --ig-gray-900: #1a1a1a; + --ig-gray-900-contrast: white; + --ig-gray-seed: #b3b2b2; + --ig-gray-seed-contrast: black; + --ig-info-50: #fef7e2; + --ig-info-50-contrast: black; + --ig-info-100: #fdeab7; + --ig-info-100-contrast: black; + --ig-info-200: #fbdd89; + --ig-info-200-contrast: black; + --ig-info-300: #fad15c; + --ig-info-300-contrast: black; + --ig-info-400: #f9c63f; + --ig-info-400-contrast: black; + --ig-info-500: #f7bd32; + --ig-info-500-contrast: white; + --ig-info-600: #f6b02d; + --ig-info-600-contrast: white; + --ig-info-700: #f49e2a; + --ig-info-700-contrast: white; + --ig-info-800: #f38e28; + --ig-info-800-contrast: white; + --ig-info-900: #f38e28; + --ig-info-900-contrast: white; + --ig-info-A100: #fbdd89; + --ig-info-A100-contrast: black; + --ig-info-A200: #f9c63f; + --ig-info-A200-contrast: black; + --ig-info-A400: #f6b02d; + --ig-info-A400-contrast: white; + --ig-info-A700: #f38e28; + --ig-info-A700-contrast: white; + --ig-info-seed: #f7bd32; + --ig-info-seed-contrast: white; + --ig-success-50: #fef7e2; + --ig-success-50-contrast: black; + --ig-success-100: #fdeab7; + --ig-success-100-contrast: black; + --ig-success-200: #fbdd89; + --ig-success-200-contrast: black; + --ig-success-300: #fad15c; + --ig-success-300-contrast: black; + --ig-success-400: #f9c63f; + --ig-success-400-contrast: black; + --ig-success-500: #f7bd32; + --ig-success-500-contrast: white; + --ig-success-600: #f6b02d; + --ig-success-600-contrast: white; + --ig-success-700: #f49e2a; + --ig-success-700-contrast: white; + --ig-success-800: #f38e28; + --ig-success-800-contrast: white; + --ig-success-900: #f38e28; + --ig-success-900-contrast: white; + --ig-success-A100: #fbdd89; + --ig-success-A100-contrast: black; + --ig-success-A200: #f9c63f; + --ig-success-A200-contrast: black; + --ig-success-A400: #f6b02d; + --ig-success-A400-contrast: white; + --ig-success-A700: #f38e28; + --ig-success-A700-contrast: white; + --ig-success-seed: #f7bd32; + --ig-success-seed-contrast: white; + --ig-warn-50: #fef7e2; + --ig-warn-50-contrast: black; + --ig-warn-100: #fdeab7; + --ig-warn-100-contrast: black; + --ig-warn-200: #fbdd89; + --ig-warn-200-contrast: black; + --ig-warn-300: #fad15c; + --ig-warn-300-contrast: black; + --ig-warn-400: #f9c63f; + --ig-warn-400-contrast: black; + --ig-warn-500: #f7bd32; + --ig-warn-500-contrast: white; + --ig-warn-600: #f6b02d; + --ig-warn-600-contrast: white; + --ig-warn-700: #f49e2a; + --ig-warn-700-contrast: white; + --ig-warn-800: #f38e28; + --ig-warn-800-contrast: white; + --ig-warn-900: #f38e28; + --ig-warn-900-contrast: white; + --ig-warn-A100: #fbdd89; + --ig-warn-A100-contrast: black; + --ig-warn-A200: #f9c63f; + --ig-warn-A200-contrast: black; + --ig-warn-A400: #f6b02d; + --ig-warn-A400-contrast: white; + --ig-warn-A700: #f38e28; + --ig-warn-A700-contrast: white; + --ig-warn-seed: #f7bd32; + --ig-warn-seed-contrast: white; + --ig-error-50: #fef7e2; + --ig-error-50-contrast: black; + --ig-error-100: #fdeab7; + --ig-error-100-contrast: black; + --ig-error-200: #fbdd89; + --ig-error-200-contrast: black; + --ig-error-300: #fad15c; + --ig-error-300-contrast: black; + --ig-error-400: #f9c63f; + --ig-error-400-contrast: black; + --ig-error-500: #f7bd32; + --ig-error-500-contrast: white; + --ig-error-600: #f6b02d; + --ig-error-600-contrast: white; + --ig-error-700: #f49e2a; + --ig-error-700-contrast: white; + --ig-error-800: #f38e28; + --ig-error-800-contrast: white; + --ig-error-900: #f38e28; + --ig-error-900-contrast: white; + --ig-error-A100: #fbdd89; + --ig-error-A100-contrast: black; + --ig-error-A200: #f9c63f; + --ig-error-A200-contrast: black; + --ig-error-A400: #f6b02d; + --ig-error-A400-contrast: white; + --ig-error-A700: #f38e28; + --ig-error-A700-contrast: white; + --ig-error-seed: #f7bd32; + --ig-error-seed-contrast: white; + --ig-surface-50: #fef7e2; + --ig-surface-50-contrast: black; + --ig-surface-100: #fdeab7; + --ig-surface-100-contrast: black; + --ig-surface-200: #fbdd89; + --ig-surface-200-contrast: black; + --ig-surface-300: #fad15c; + --ig-surface-300-contrast: black; + --ig-surface-400: #f9c63f; + --ig-surface-400-contrast: black; + --ig-surface-500: #f7bd32; + --ig-surface-500-contrast: white; + --ig-surface-600: #f6b02d; + --ig-surface-600-contrast: white; + --ig-surface-700: #f49e2a; + --ig-surface-700-contrast: white; + --ig-surface-800: #f38e28; + --ig-surface-800-contrast: white; + --ig-surface-900: #f38e28; + --ig-surface-900-contrast: white; + --ig-surface-A100: #fbdd89; + --ig-surface-A100-contrast: black; + --ig-surface-A200: #f9c63f; + --ig-surface-A200-contrast: black; + --ig-surface-A400: #f6b02d; + --ig-surface-A400-contrast: white; + --ig-surface-A700: #f38e28; + --ig-surface-A700-contrast: white; + --ig-surface-seed: #f7bd32; + --ig-surface-seed-contrast: white; +} diff --git a/_to_delete/theming-tmp/perf.css b/_to_delete/theming-tmp/perf.css new file mode 100644 index 00000000..6580cc73 --- /dev/null +++ b/_to_delete/theming-tmp/perf.css @@ -0,0 +1,242 @@ +:root { + --ig-wcag-a: 0.31; + --ig-wcag-aa: 0.185; + --ig-wcag-aaa: 0.178; + --ig-contrast-level: var(--ig-wcag-aa); + --y: clamp(0, (y / var(--ig-contrast-level) - 1) * -infinity, 1); + --y-contrast: xyz-d65 var(--y) var(--y) var(--y); +} +:root { + --ig-primary-50: oklch(from var(--ig-primary-seed) 0.9402 min(c * 0.1264, 0.0232) calc(h + 6.804)); + --ig-primary-50-contrast: hsla(from color(from var(--ig-primary-50) var(--y-contrast)) h 0 l/1); + --ig-primary-100: oklch(from var(--ig-primary-seed) 0.844 min(c * 0.3941, 0.0724) calc(h + 4.879)); + --ig-primary-100-contrast: hsla(from color(from var(--ig-primary-100) var(--y-contrast)) h 0 l/1); + --ig-primary-200: oklch(from var(--ig-primary-seed) 0.7551 min(c * 0.6602, 0.1213) calc(h + 3.103)); + --ig-primary-200-contrast: hsla(from color(from var(--ig-primary-200) var(--y-contrast)) h 0 l/1); + --ig-primary-300: oklch(from var(--ig-primary-seed) 0.6742 min(c * 0.8212, 0.1508) calc(h + 1.484)); + --ig-primary-300-contrast: hsla(from color(from var(--ig-primary-300) var(--y-contrast)) h 0 l/1); + --ig-primary-400: oklch(from var(--ig-primary-seed) 0.5973 min(c * 0.8367, 0.1537) h); + --ig-primary-400-contrast: hsla(from color(from var(--ig-primary-400) var(--y-contrast)) h 0 l/1); + --ig-primary-500: oklch(from var(--ig-primary-seed) 0.5244 min(c * 0.7664, 0.1408) h); + --ig-primary-500-contrast: hsla(from color(from var(--ig-primary-500) var(--y-contrast)) h 0 l/1); + --ig-primary-600: oklch(from var(--ig-primary-seed) 0.4535 min(c * 0.6602, 0.1213) h); + --ig-primary-600-contrast: hsla(from color(from var(--ig-primary-600) var(--y-contrast)) h 0 l/1); + --ig-primary-700: oklch(from var(--ig-primary-seed) 0.3818 min(c * 0.5301, 0.0974) h); + --ig-primary-700-contrast: hsla(from color(from var(--ig-primary-700) var(--y-contrast)) h 0 l/1); + --ig-primary-800: oklch(from var(--ig-primary-seed) 0.3034 min(c * 0.3808, 0.0699) h); + --ig-primary-800-contrast: hsla(from color(from var(--ig-primary-800) var(--y-contrast)) h 0 l/1); + --ig-primary-900: oklch(from var(--ig-primary-seed) 0.2004 min(c * 0.2097, 0.0385) h); + --ig-primary-900-contrast: hsla(from color(from var(--ig-primary-900) var(--y-contrast)) h 0 l/1); + --ig-primary-seed: #09f; + --ig-primary-seed-contrast: hsla(from color(from var(--ig-primary-seed) var(--y-contrast)) h 0 l/1); + --ig-primary-A100: oklch(from var(--ig-primary-seed) 0.889 min(c * 0.3037, 0.0558) calc(h + 2.817)); + --ig-primary-A100-contrast: hsla(from color(from var(--ig-primary-A100) var(--y-contrast)) h 0 l/1); + --ig-primary-A200: oklch(from var(--ig-primary-seed) 0.7075 min(c * 0.8606, 0.1581) calc(h + 2.149)); + --ig-primary-A200-contrast: hsla(from color(from var(--ig-primary-A200) var(--y-contrast)) h 0 l/1); + --ig-primary-A400: oklch(from var(--ig-primary-seed) 0.5847 min(c * 0.8681, 0.1595) h); + --ig-primary-A400-contrast: hsla(from color(from var(--ig-primary-A400) var(--y-contrast)) h 0 l/1); + --ig-primary-A700: oklch(from var(--ig-primary-seed) 0.4923 min(c * 0.7355, 0.1351) h); + --ig-primary-A700-contrast: hsla(from color(from var(--ig-primary-A700) var(--y-contrast)) h 0 l/1); + --ig-secondary-50: oklch(from var(--ig-secondary-seed) 0.9439 min(c * 0.1274, 0.029) h); + --ig-secondary-50-contrast: hsla(from color(from var(--ig-secondary-50) var(--y-contrast)) h 0 l/1); + --ig-secondary-100: oklch(from var(--ig-secondary-seed) 0.8579 min(c * 0.3639, 0.0828) calc(h - 0.806)); + --ig-secondary-100-contrast: hsla(from color(from var(--ig-secondary-100) var(--y-contrast)) h 0 l/1); + --ig-secondary-200: oklch(from var(--ig-secondary-seed) 0.7764 min(c * 0.6247, 0.1421) calc(h - 0.949)); + --ig-secondary-200-contrast: hsla(from color(from var(--ig-secondary-200) var(--y-contrast)) h 0 l/1); + --ig-secondary-300: oklch(from var(--ig-secondary-seed) 0.7011 min(c * 0.8788, 0.1999) h); + --ig-secondary-300-contrast: hsla(from color(from var(--ig-secondary-300) var(--y-contrast)) h 0 l/1); + --ig-secondary-400: oklch(from var(--ig-secondary-seed) 0.6267 min(c * 0.9712, 0.221) h); + --ig-secondary-400-contrast: hsla(from color(from var(--ig-secondary-400) var(--y-contrast)) h 0 l/1); + --ig-secondary-500: oklch(from var(--ig-secondary-seed) 0.5522 min(c * 0.9342, 0.2125) h); + --ig-secondary-500-contrast: hsla(from color(from var(--ig-secondary-500) var(--y-contrast)) h 0 l/1); + --ig-secondary-600: oklch(from var(--ig-secondary-seed) 0.4784 min(c * 0.8203, 0.1866) h); + --ig-secondary-600-contrast: hsla(from color(from var(--ig-secondary-600) var(--y-contrast)) h 0 l/1); + --ig-secondary-700: oklch(from var(--ig-secondary-seed) 0.402 min(c * 0.6615, 0.1505) h); + --ig-secondary-700-contrast: hsla(from color(from var(--ig-secondary-700) var(--y-contrast)) h 0 l/1); + --ig-secondary-800: oklch(from var(--ig-secondary-seed) 0.3181 min(c * 0.4739, 0.1078) h); + --ig-secondary-800-contrast: hsla(from color(from var(--ig-secondary-800) var(--y-contrast)) h 0 l/1); + --ig-secondary-900: oklch(from var(--ig-secondary-seed) 0.2085 min(c * 0.2592, 0.059) h); + --ig-secondary-900-contrast: hsla(from color(from var(--ig-secondary-900) var(--y-contrast)) h 0 l/1); + --ig-secondary-seed: #df1b74; + --ig-secondary-seed-contrast: hsla(from color(from var(--ig-secondary-seed) var(--y-contrast)) h 0 l/1); + --ig-secondary-A100: oklch(from var(--ig-secondary-seed) 0.9072 min(c * 0.231, 0.0526) calc(h + 356.496)); + --ig-secondary-A100-contrast: hsla(from color(from var(--ig-secondary-A100) var(--y-contrast)) h 0 l/1); + --ig-secondary-A200: oklch(from var(--ig-secondary-seed) 0.7302 min(c * 0.7981, 0.1816) calc(h - 1.535)); + --ig-secondary-A200-contrast: hsla(from color(from var(--ig-secondary-A200) var(--y-contrast)) h 0 l/1); + --ig-secondary-A400: oklch(from var(--ig-secondary-seed) 0.616 min(c * 1.053, 0.2396) h); + --ig-secondary-A400-contrast: hsla(from color(from var(--ig-secondary-A400) var(--y-contrast)) h 0 l/1); + --ig-secondary-A700: oklch(from var(--ig-secondary-seed) 0.5201 min(c * 0.9218, 0.2097) h); + --ig-secondary-A700-contrast: hsla(from color(from var(--ig-secondary-A700) var(--y-contrast)) h 0 l/1); + --ig-gray-50: oklch(from var(--ig-gray-seed) 0.9404 0 0); + --ig-gray-50-contrast: hsla(from color(from var(--ig-gray-50) var(--y-contrast)) h 0 l/1); + --ig-gray-100: oklch(from var(--ig-gray-seed) 0.8448 0 0); + --ig-gray-100-contrast: hsla(from color(from var(--ig-gray-100) var(--y-contrast)) h 0 l/1); + --ig-gray-200: oklch(from var(--ig-gray-seed) 0.7562 0 0); + --ig-gray-200-contrast: hsla(from color(from var(--ig-gray-200) var(--y-contrast)) h 0 l/1); + --ig-gray-300: oklch(from var(--ig-gray-seed) 0.6749 0 0); + --ig-gray-300-contrast: hsla(from color(from var(--ig-gray-300) var(--y-contrast)) h 0 l/1); + --ig-gray-400: oklch(from var(--ig-gray-seed) 0.598 0 0); + --ig-gray-400-contrast: hsla(from color(from var(--ig-gray-400) var(--y-contrast)) h 0 l/1); + --ig-gray-500: oklch(from var(--ig-gray-seed) 0.5248 0 0); + --ig-gray-500-contrast: hsla(from color(from var(--ig-gray-500) var(--y-contrast)) h 0 l/1); + --ig-gray-600: oklch(from var(--ig-gray-seed) 0.4539 0 0); + --ig-gray-600-contrast: hsla(from color(from var(--ig-gray-600) var(--y-contrast)) h 0 l/1); + --ig-gray-700: oklch(from var(--ig-gray-seed) 0.3822 0 0); + --ig-gray-700-contrast: hsla(from color(from var(--ig-gray-700) var(--y-contrast)) h 0 l/1); + --ig-gray-800: oklch(from var(--ig-gray-seed) 0.304 0 0); + --ig-gray-800-contrast: hsla(from color(from var(--ig-gray-800) var(--y-contrast)) h 0 l/1); + --ig-gray-900: oklch(from var(--ig-gray-seed) 0.2009 0 0); + --ig-gray-900-contrast: hsla(from color(from var(--ig-gray-900) var(--y-contrast)) h 0 l/1); + --ig-gray-seed: #333; + --ig-gray-seed-contrast: hsla(from color(from var(--ig-gray-seed) var(--y-contrast)) h 0 l/1); + --ig-surface-50: hsl(from var(--ig-surface-500) h calc(s * 1.23) calc(l * 1.78)); + --ig-surface-50-contrast: hsla(from color(from var(--ig-surface-50) var(--y-contrast)) h 0 l/1); + --ig-surface-100: hsl(from var(--ig-surface-500) h calc(s * 0.8) calc(l * 1.66)); + --ig-surface-100-contrast: hsla(from color(from var(--ig-surface-100) var(--y-contrast)) h 0 l/1); + --ig-surface-200: hsl(from var(--ig-surface-500) h calc(s * 0.64) calc(l * 1.43)); + --ig-surface-200-contrast: hsla(from color(from var(--ig-surface-200) var(--y-contrast)) h 0 l/1); + --ig-surface-300: hsl(from var(--ig-surface-500) h calc(s * 0.73) calc(l * 1.19)); + --ig-surface-300-contrast: hsla(from color(from var(--ig-surface-300) var(--y-contrast)) h 0 l/1); + --ig-surface-400: hsl(from var(--ig-surface-500) h calc(s * 0.875) calc(l * 1.08)); + --ig-surface-400-contrast: hsla(from color(from var(--ig-surface-400) var(--y-contrast)) h 0 l/1); + --ig-surface-500: #fff; + --ig-surface-500-contrast: hsla(from color(from var(--ig-surface-500) var(--y-contrast)) h 0 l/1); + --ig-surface-600: hsl(from var(--ig-surface-500) h calc(s * 1.26) calc(l * 0.89)); + --ig-surface-600-contrast: hsla(from color(from var(--ig-surface-600) var(--y-contrast)) h 0 l/1); + --ig-surface-700: hsl(from var(--ig-surface-500) h calc(s * 1.26) calc(l * 0.81)); + --ig-surface-700-contrast: hsla(from color(from var(--ig-surface-700) var(--y-contrast)) h 0 l/1); + --ig-surface-800: hsl(from var(--ig-surface-500) h calc(s * 1.26) calc(l * 0.73)); + --ig-surface-800-contrast: hsla(from color(from var(--ig-surface-800) var(--y-contrast)) h 0 l/1); + --ig-surface-900: hsl(from var(--ig-surface-500) h calc(s * 1.26) calc(l * 0.64)); + --ig-surface-900-contrast: hsla(from color(from var(--ig-surface-900) var(--y-contrast)) h 0 l/1); + --ig-surface-seed: #fff; + --ig-surface-seed-contrast: hsla(from color(from var(--ig-surface-seed) var(--y-contrast)) h 0 l/1); + --ig-surface-A100: hsl(from var(--ig-surface-500) h calc(s * 1.23) calc(l * 1.34)); + --ig-surface-A100-contrast: hsla(from color(from var(--ig-surface-A100) var(--y-contrast)) h 0 l/1); + --ig-surface-A200: hsl(from var(--ig-surface-500) h calc(s * 1.22) calc(l * 1.16)); + --ig-surface-A200-contrast: hsla(from color(from var(--ig-surface-A200) var(--y-contrast)) h 0 l/1); + --ig-surface-A400: hsl(from var(--ig-surface-500) h calc(s * 1.23) calc(l * 0.91)); + --ig-surface-A400-contrast: hsla(from color(from var(--ig-surface-A400) var(--y-contrast)) h 0 l/1); + --ig-surface-A700: hsl(from var(--ig-surface-500) h calc(s * 1.23) calc(l * 0.65)); + --ig-surface-A700-contrast: hsla(from color(from var(--ig-surface-A700) var(--y-contrast)) h 0 l/1); + --ig-info-50: oklch(from var(--ig-info-seed) 0.9403 min(c * 0.1374, 0.0229) calc(h + 6.806)); + --ig-info-50-contrast: hsla(from color(from var(--ig-info-50) var(--y-contrast)) h 0 l/1); + --ig-info-100: oklch(from var(--ig-info-seed) 0.8445 min(c * 0.4283, 0.0715) calc(h + 4.891)); + --ig-info-100-contrast: hsla(from color(from var(--ig-info-100) var(--y-contrast)) h 0 l/1); + --ig-info-200: oklch(from var(--ig-info-seed) 0.7562 min(c * 0.7275, 0.1215) calc(h + 3.125)); + --ig-info-200-contrast: hsla(from color(from var(--ig-info-200) var(--y-contrast)) h 0 l/1); + --ig-info-300: oklch(from var(--ig-info-seed) 0.6761 min(c * 0.9394, 0.1568) calc(h + 1.521)); + --ig-info-300-contrast: hsla(from color(from var(--ig-info-300) var(--y-contrast)) h 0 l/1); + --ig-info-400: oklch(from var(--ig-info-seed) 0.5996 min(c * 0.999, 0.1668) h); + --ig-info-400-contrast: hsla(from color(from var(--ig-info-400) var(--y-contrast)) h 0 l/1); + --ig-info-500: oklch(from var(--ig-info-seed) 0.5266 min(c * 0.937, 0.1564) h); + --ig-info-500-contrast: hsla(from color(from var(--ig-info-500) var(--y-contrast)) h 0 l/1); + --ig-info-600: oklch(from var(--ig-info-seed) 0.4555 min(c * 0.8148, 0.136) h); + --ig-info-600-contrast: hsla(from color(from var(--ig-info-600) var(--y-contrast)) h 0 l/1); + --ig-info-700: oklch(from var(--ig-info-seed) 0.3833 min(c * 0.6562, 0.1096) h); + --ig-info-700-contrast: hsla(from color(from var(--ig-info-700) var(--y-contrast)) h 0 l/1); + --ig-info-800: oklch(from var(--ig-info-seed) 0.3045 min(c * 0.4716, 0.0787) h); + --ig-info-800-contrast: hsla(from color(from var(--ig-info-800) var(--y-contrast)) h 0 l/1); + --ig-info-900: oklch(from var(--ig-info-seed) 0.2009 min(c * 0.2596, 0.0433) h); + --ig-info-900-contrast: hsla(from color(from var(--ig-info-900) var(--y-contrast)) h 0 l/1); + --ig-info-seed: #1377d5; + --ig-info-seed-contrast: hsla(from color(from var(--ig-info-seed) var(--y-contrast)) h 0 l/1); + --ig-info-A100: oklch(from var(--ig-info-seed) 0.8859 min(c * 0.3374, 0.0563) calc(h + 3.054)); + --ig-info-A100-contrast: hsla(from color(from var(--ig-info-A100) var(--y-contrast)) h 0 l/1); + --ig-info-A200: oklch(from var(--ig-info-seed) 0.7088 min(c * 0.9268, 0.1547) calc(h + 1.699)); + --ig-info-A200-contrast: hsla(from color(from var(--ig-info-A200) var(--y-contrast)) h 0 l/1); + --ig-info-A400: oklch(from var(--ig-info-seed) 0.5873 min(c * 1.0634, 0.1775) h); + --ig-info-A400-contrast: hsla(from color(from var(--ig-info-A400) var(--y-contrast)) h 0 l/1); + --ig-info-A700: oklch(from var(--ig-info-seed) 0.4945 min(c * 0.9117, 0.1522) h); + --ig-info-A700-contrast: hsla(from color(from var(--ig-info-A700) var(--y-contrast)) h 0 l/1); + --ig-success-50: oklch(from var(--ig-success-seed) 0.9325 min(c * 0.4533, 0.0713) h); + --ig-success-50-contrast: hsla(from color(from var(--ig-success-50) var(--y-contrast)) h 0 l/1); + --ig-success-100: oklch(from var(--ig-success-seed) 0.8312 min(c * 0.9418, 0.1481) h); + --ig-success-100-contrast: hsla(from color(from var(--ig-success-100) var(--y-contrast)) h 0 l/1); + --ig-success-200: oklch(from var(--ig-success-seed) 0.7415 min(c * 0.9822, 0.1545) h); + --ig-success-200-contrast: hsla(from color(from var(--ig-success-200) var(--y-contrast)) h 0 l/1); + --ig-success-300: oklch(from var(--ig-success-seed) 0.6595 min(c * 0.9259, 0.1456) h); + --ig-success-300-contrast: hsla(from color(from var(--ig-success-300) var(--y-contrast)) h 0 l/1); + --ig-success-400: oklch(from var(--ig-success-seed) 0.584 min(c * 0.8359, 0.1315) h); + --ig-success-400-contrast: hsla(from color(from var(--ig-success-400) var(--y-contrast)) h 0 l/1); + --ig-success-500: oklch(from var(--ig-success-seed) 0.5124 min(c * 0.7337, 0.1154) h); + --ig-success-500-contrast: hsla(from color(from var(--ig-success-500) var(--y-contrast)) h 0 l/1); + --ig-success-600: oklch(from var(--ig-success-seed) 0.4435 min(c * 0.6237, 0.0981) h); + --ig-success-600-contrast: hsla(from color(from var(--ig-success-600) var(--y-contrast)) h 0 l/1); + --ig-success-700: oklch(from var(--ig-success-seed) 0.3739 min(c * 0.4991, 0.0785) h); + --ig-success-700-contrast: hsla(from color(from var(--ig-success-700) var(--y-contrast)) h 0 l/1); + --ig-success-800: oklch(from var(--ig-success-seed) 0.2979 min(c * 0.3588, 0.0564) h); + --ig-success-800-contrast: hsla(from color(from var(--ig-success-800) var(--y-contrast)) h 0 l/1); + --ig-success-900: oklch(from var(--ig-success-seed) 0.1976 min(c * 0.1983, 0.0312) h); + --ig-success-900-contrast: hsla(from color(from var(--ig-success-900) var(--y-contrast)) h 0 l/1); + --ig-success-seed: #4eb862; + --ig-success-seed-contrast: hsla(from color(from var(--ig-success-seed) var(--y-contrast)) h 0 l/1); + --ig-success-A100: oklch(from var(--ig-success-seed) 0.8646 min(c * 1.5195, 0.239) h); + --ig-success-A100-contrast: hsla(from color(from var(--ig-success-A100) var(--y-contrast)) h 0 l/1); + --ig-success-A200: oklch(from var(--ig-success-seed) 0.6871 min(c * 1.282, 0.2016) h); + --ig-success-A200-contrast: hsla(from color(from var(--ig-success-A200) var(--y-contrast)) h 0 l/1); + --ig-success-A400: oklch(from var(--ig-success-seed) 0.5678 min(c * 1.0593, 0.1666) h); + --ig-success-A400-contrast: hsla(from color(from var(--ig-success-A400) var(--y-contrast)) h 0 l/1); + --ig-success-A700: oklch(from var(--ig-success-seed) 0.4777 min(c * 0.8913, 0.1402) h); + --ig-success-A700-contrast: hsla(from color(from var(--ig-success-A700) var(--y-contrast)) h 0 l/1); + --ig-warn-50: oklch(from var(--ig-warn-seed) 0.946 min(c * 0.1898, 0.0312) h); + --ig-warn-50-contrast: hsla(from color(from var(--ig-warn-50) var(--y-contrast)) h 0 l/1); + --ig-warn-100: oklch(from var(--ig-warn-seed) 0.8514 min(c * 0.5993, 0.0986) h); + --ig-warn-100-contrast: hsla(from color(from var(--ig-warn-100) var(--y-contrast)) h 0 l/1); + --ig-warn-200: oklch(from var(--ig-warn-seed) 0.7625 min(c * 0.8418, 0.1385) h); + --ig-warn-200-contrast: hsla(from color(from var(--ig-warn-200) var(--y-contrast)) h 0 l/1); + --ig-warn-300: oklch(from var(--ig-warn-seed) 0.6821 min(c * 0.8564, 0.1409) h); + --ig-warn-300-contrast: hsla(from color(from var(--ig-warn-300) var(--y-contrast)) h 0 l/1); + --ig-warn-400: oklch(from var(--ig-warn-seed) 0.6046 min(c * 0.7864, 0.1294) h); + --ig-warn-400-contrast: hsla(from color(from var(--ig-warn-400) var(--y-contrast)) h 0 l/1); + --ig-warn-500: oklch(from var(--ig-warn-seed) 0.5307 min(c * 0.6932, 0.114) h); + --ig-warn-500-contrast: hsla(from color(from var(--ig-warn-500) var(--y-contrast)) h 0 l/1); + --ig-warn-600: oklch(from var(--ig-warn-seed) 0.4588 min(c * 0.5893, 0.0969) h); + --ig-warn-600-contrast: hsla(from color(from var(--ig-warn-600) var(--y-contrast)) h 0 l/1); + --ig-warn-700: oklch(from var(--ig-warn-seed) 0.3861 min(c * 0.4709, 0.0775) h); + --ig-warn-700-contrast: hsla(from color(from var(--ig-warn-700) var(--y-contrast)) h 0 l/1); + --ig-warn-800: oklch(from var(--ig-warn-seed) 0.3066 min(c * 0.3375, 0.0555) h); + --ig-warn-800-contrast: hsla(from color(from var(--ig-warn-800) var(--y-contrast)) h 0 l/1); + --ig-warn-900: oklch(from var(--ig-warn-seed) 0.2023 min(c * 0.1855, 0.0305) h); + --ig-warn-900-contrast: hsla(from color(from var(--ig-warn-900) var(--y-contrast)) h 0 l/1); + --ig-warn-seed: #faa419; + --ig-warn-seed-contrast: hsla(from color(from var(--ig-warn-seed) var(--y-contrast)) h 0 l/1); + --ig-warn-A100: oklch(from var(--ig-warn-seed) 0.8928 min(c * 0.5171, 0.0851) calc(h + 1.537)); + --ig-warn-A100-contrast: hsla(from color(from var(--ig-warn-A100) var(--y-contrast)) h 0 l/1); + --ig-warn-A200: oklch(from var(--ig-warn-seed) 0.716 min(c * 0.9343, 0.1537) h); + --ig-warn-A200-contrast: hsla(from color(from var(--ig-warn-A200) var(--y-contrast)) h 0 l/1); + --ig-warn-A400: oklch(from var(--ig-warn-seed) 0.5917 min(c * 0.7753, 0.1275) h); + --ig-warn-A400-contrast: hsla(from color(from var(--ig-warn-A400) var(--y-contrast)) h 0 l/1); + --ig-warn-A700: oklch(from var(--ig-warn-seed) 0.4975 min(c * 0.6519, 0.1072) h); + --ig-warn-A700-contrast: hsla(from color(from var(--ig-warn-A700) var(--y-contrast)) h 0 l/1); + --ig-error-50: oklch(from var(--ig-error-seed) 0.9437 min(c * 0.1091, 0.0273) h); + --ig-error-50-contrast: hsla(from color(from var(--ig-error-50) var(--y-contrast)) h 0 l/1); + --ig-error-100: oklch(from var(--ig-error-seed) 0.8537 min(c * 0.318, 0.0795) calc(h - 0.072)); + --ig-error-100-contrast: hsla(from color(from var(--ig-error-100) var(--y-contrast)) h 0 l/1); + --ig-error-200: oklch(from var(--ig-error-seed) 0.7741 min(c * 0.5328, 0.1332) calc(h - 0.253)); + --ig-error-200-contrast: hsla(from color(from var(--ig-error-200) var(--y-contrast)) h 0 l/1); + --ig-error-300: oklch(from var(--ig-error-seed) 0.6973 min(c * 0.7678, 0.1919) h); + --ig-error-300-contrast: hsla(from color(from var(--ig-error-300) var(--y-contrast)) h 0 l/1); + --ig-error-400: oklch(from var(--ig-error-seed) 0.6245 min(c * 0.8568, 0.2142) h); + --ig-error-400-contrast: hsla(from color(from var(--ig-error-400) var(--y-contrast)) h 0 l/1); + --ig-error-500: oklch(from var(--ig-error-seed) 0.5505 min(c * 0.8337, 0.2084) h); + --ig-error-500-contrast: hsla(from color(from var(--ig-error-500) var(--y-contrast)) h 0 l/1); + --ig-error-600: oklch(from var(--ig-error-seed) 0.477 min(c * 0.7366, 0.1841) h); + --ig-error-600-contrast: hsla(from color(from var(--ig-error-600) var(--y-contrast)) h 0 l/1); + --ig-error-700: oklch(from var(--ig-error-seed) 0.4009 min(c * 0.5955, 0.1488) h); + --ig-error-700-contrast: hsla(from color(from var(--ig-error-700) var(--y-contrast)) h 0 l/1); + --ig-error-800: oklch(from var(--ig-error-seed) 0.3173 min(c * 0.427, 0.1067) h); + --ig-error-800-contrast: hsla(from color(from var(--ig-error-800) var(--y-contrast)) h 0 l/1); + --ig-error-900: oklch(from var(--ig-error-seed) 0.208 min(c * 0.2336, 0.0584) h); + --ig-error-900-contrast: hsla(from color(from var(--ig-error-900) var(--y-contrast)) h 0 l/1); + --ig-error-seed: #ff134a; + --ig-error-seed-contrast: hsla(from color(from var(--ig-error-seed) var(--y-contrast)) h 0 l/1); + --ig-error-A100: oklch(from var(--ig-error-seed) 0.9039 min(c * 0.1993, 0.0498) calc(h - 0.052)); + --ig-error-A100-contrast: hsla(from color(from var(--ig-error-A100) var(--y-contrast)) h 0 l/1); + --ig-error-A200: oklch(from var(--ig-error-seed) 0.7272 min(c * 0.6774, 0.1693) calc(h - 0.552)); + --ig-error-A200-contrast: hsla(from color(from var(--ig-error-A200) var(--y-contrast)) h 0 l/1); + --ig-error-A400: oklch(from var(--ig-error-seed) 0.6138 min(c * 0.9349, 0.2337) h); + --ig-error-A400-contrast: hsla(from color(from var(--ig-error-A400) var(--y-contrast)) h 0 l/1); + --ig-error-A700: oklch(from var(--ig-error-seed) 0.5186 min(c * 0.8298, 0.2074) h); + --ig-error-A700-contrast: hsla(from color(from var(--ig-error-A700) var(--y-contrast)) h 0 l/1); +} diff --git a/_to_delete/theming-tmp/perf.scss b/_to_delete/theming-tmp/perf.scss new file mode 100644 index 00000000..6bc23aa9 --- /dev/null +++ b/_to_delete/theming-tmp/perf.scss @@ -0,0 +1,3 @@ +@use '../sass/color' as *; +$p: palette($primary: #09f, $secondary: #df1b74, $surface: #fff, $gray: #333); +:root { @include palette($p); } diff --git a/_to_delete/theming-tmp/shades.html b/_to_delete/theming-tmp/shades.html new file mode 100644 index 00000000..018386dd --- /dev/null +++ b/_to_delete/theming-tmp/shades.html @@ -0,0 +1,746 @@ + + +Shade generators +
+

Shade generators, side by side

+

Compiled from the library. Each swatch is painted from the relative-color expression the +library emits; the 10px strip along its bottom edge is the baked hex. If the two ever disagree you will +see a seam. Numbers are WCAG contrast against white.

+ +
+ + + changing this re-tints the ramp at runtime — no rebuild +
+
+ + +
+

Framework primary

#0099ff + seed lands on 300
+
+
+

gamut-relative

+
+ 50 +
+ 100 +
+ 200 +
+ 300 +
+ 400 +
+ 500 +
+ 600 +
+ 700 +
+ 800 +
+ 900 +
+
+ A100 +
+ A200 +
+ A400 +
+ A700 +
+
+
+

legacy

+
+ 50 +
+ 100 +
+ 200 +
+ 300 +
+ 400 +
+ 500 +
+ 600 +
+ 700 +
+ 800 +
+ 900 +
+
+ A100 +
+ A200 +
+ A400 +
+ A700 +
+
+
+
+
+

Framework secondary

#df1b74 + seed lands on 400
+
+
+

gamut-relative

+
+ 50 +
+ 100 +
+ 200 +
+ 300 +
+ 400 +
+ 500 +
+ 600 +
+ 700 +
+ 800 +
+ 900 +
+
+ A100 +
+ A200 +
+ A400 +
+ A700 +
+
+
+

legacy

+
+ 50 +
+ 100 +
+ 200 +
+ 300 +
+ 400 +
+ 500 +
+ 600 +
+ 700 +
+ 800 +
+ 900 +
+
+ A100 +
+ A200 +
+ A400 +
+ A700 +
+
+
+
+
+

Warn

#faa419 + seed lands on 200
+
+
+

gamut-relative

+
+ 50 +
+ 100 +
+ 200 +
+ 300 +
+ 400 +
+ 500 +
+ 600 +
+ 700 +
+ 800 +
+ 900 +
+
+ A100 +
+ A200 +
+ A400 +
+ A700 +
+
+
+

legacy

+
+ 50 +
+ 100 +
+ 200 +
+ 300 +
+ 400 +
+ 500 +
+ 600 +
+ 700 +
+ 800 +
+ 900 +
+
+ A100 +
+ A200 +
+ A400 +
+ A700 +
+
+
+
+
+

Success

#4eb862 + seed lands on 200
+
+
+

gamut-relative

+
+ 50 +
+ 100 +
+ 200 +
+ 300 +
+ 400 +
+ 500 +
+ 600 +
+ 700 +
+ 800 +
+ 900 +
+
+ A100 +
+ A200 +
+ A400 +
+ A700 +
+
+
+

legacy

+
+ 50 +
+ 100 +
+ 200 +
+ 300 +
+ 400 +
+ 500 +
+ 600 +
+ 700 +
+ 800 +
+ 900 +
+
+ A100 +
+ A200 +
+ A400 +
+ A700 +
+
+
+
+
+

Near-white seed

#ffe9b0 + seed lands on 50
+
+
+

gamut-relative

+
+ 50 +
+ 100 +
+ 200 +
+ 300 +
+ 400 +
+ 500 +
+ 600 +
+ 700 +
+ 800 +
+ 900 +
+
+ A100 +
+ A200 +
+ A400 +
+ A700 +
+
+
+

legacy

+
+ 50 +
+ 100 +
+ 200 +
+ 300 +
+ 400 +
+ 500 +
+ 600 +
+ 700 +
+ 800 +
+ 900 +
+
+ A100 +
+ A200 +
+ A400 +
+ A700 +
+
+
+
+
+

Near-black seed

#141225 + seed lands on 900
+
+
+

gamut-relative

+
+ 50 +
+ 100 +
+ 200 +
+ 300 +
+ 400 +
+ 500 +
+ 600 +
+ 700 +
+ 800 +
+ 900 +
+
+ A100 +
+ A200 +
+ A400 +
+ A700 +
+
+
+

legacy

+
+ 50 +
+ 100 +
+ 200 +
+ 300 +
+ 400 +
+ 500 +
+ 600 +
+ 700 +
+ 800 +
+ 900 +
+
+ A100 +
+ A200 +
+ A400 +
+ A700 +
+
+
+
+
+

Neon

#00ff00 + seed lands on 100
+
+
+

gamut-relative

+
+ 50 +
+ 100 +
+ 200 +
+ 300 +
+ 400 +
+ 500 +
+ 600 +
+ 700 +
+ 800 +
+ 900 +
+
+ A100 +
+ A200 +
+ A400 +
+ A700 +
+
+
+

legacy

+
+ 50 +
+ 100 +
+ 200 +
+ 300 +
+ 400 +
+ 500 +
+ 600 +
+ 700 +
+ 800 +
+ 900 +
+
+ A100 +
+ A200 +
+ A400 +
+ A700 +
+
+
+
+
+

Washed out

#a99bb0 + seed lands on 300
+
+
+

gamut-relative

+
+ 50 +
+ 100 +
+ 200 +
+ 300 +
+ 400 +
+ 500 +
+ 600 +
+ 700 +
+ 800 +
+ 900 +
+
+ A100 +
+ A200 +
+ A400 +
+ A700 +
+
+
+

legacy

+
+ 50 +
+ 100 +
+ 200 +
+ 300 +
+ 400 +
+ 500 +
+ 600 +
+ 700 +
+ 800 +
+ 900 +
+
+ A100 +
+ A200 +
+ A400 +
+ A700 +
+
+
+
+
+

Pure gray

#8a8a8a + seed lands on 400
+
+
+

gamut-relative

+
+ 50 +
+ 100 +
+ 200 +
+ 300 +
+ 400 +
+ 500 +
+ 600 +
+ 700 +
+ 800 +
+ 900 +
+
+ A100 +
+ A200 +
+ A400 +
+ A700 +
+
+
+

legacy

+
+ 50 +
+ 100 +
+ 200 +
+ 300 +
+ 400 +
+ 500 +
+ 600 +
+ 700 +
+ 800 +
+ 900 +
+
+ A100 +
+ A200 +
+ A400 +
+ A700 +
+
+
+
+ +
Generated by .scripts/previewShades.mjs. The legacy ramps are what the library +shipped before; the palettes bundled with the library stay on that generator.
+
+ \ No newline at end of file diff --git a/_to_delete/theming-tmp/t1.css b/_to_delete/theming-tmp/t1.css new file mode 100644 index 00000000..d84b32c6 --- /dev/null +++ b/_to_delete/theming-tmp/t1.css @@ -0,0 +1,39 @@ +.h0 { + l: 0.6477037682; + c: 0.2625732422; +} + +.h60 { + l: 0.756451357; + c: 0.1773965836; +} + +.h120 { + l: 0.9395631224; + c: 0.2230670929; +} + +.h210 { + l: 0.8413263903; + c: 0.1455053329; +} + +.h250 { + l: 0.6613947535; + c: 0.1872121811; +} + +.h270 { + l: 0.4649192077; + c: 0.3046937943; +} + +.h315 { + l: 0.6199188155; + c: 0.3053684235; +} + +.h330 { + l: 0.6972909907; + c: 0.3178344727; +} diff --git a/_to_delete/theming-tmp/t1.scss b/_to_delete/theming-tmp/t1.scss new file mode 100644 index 00000000..03d9e2bc --- /dev/null +++ b/_to_delete/theming-tmp/t1.scss @@ -0,0 +1,6 @@ +@use 'sass:map'; +@use '../sass/color/gamut' as g; +@each $h in (0, 60, 120, 210, 250, 270, 315, 330) { + $c: g.cusp($h); + .h#{$h} { l: #{map.get($c,'l')}; c: #{map.get($c,'c')}; } +} diff --git a/_to_delete/theming-tmp/t2.css b/_to_delete/theming-tmp/t2.css new file mode 100644 index 00000000..7a669a35 --- /dev/null +++ b/_to_delete/theming-tmp/t2.css @@ -0,0 +1,239 @@ +.gamut-relative { + --ig-primary-50: oklch(from var(--ig-primary-seed) 0.9402 min(c * 0.1264, 0.0332) h); + --ig-primary-50-contrast: hsla(from color(from var(--ig-primary-50) var(--y-contrast)) h 0 l/1); + --ig-primary-100: oklch(from var(--ig-primary-seed) 0.844 min(c * 0.3941, 0.0862) h); + --ig-primary-100-contrast: hsla(from color(from var(--ig-primary-100) var(--y-contrast)) h 0 l/1); + --ig-primary-200: oklch(from var(--ig-primary-seed) 0.7551 min(c * 0.6602, 0.1303) h); + --ig-primary-200-contrast: hsla(from color(from var(--ig-primary-200) var(--y-contrast)) h 0 l/1); + --ig-primary-300: oklch(from var(--ig-primary-seed) 0.6742 min(c * 0.8212, 0.1538) h); + --ig-primary-300-contrast: hsla(from color(from var(--ig-primary-300) var(--y-contrast)) h 0 l/1); + --ig-primary-400: oklch(from var(--ig-primary-seed) 0.5973 min(c * 0.8367, 0.1539) h); + --ig-primary-400-contrast: hsla(from color(from var(--ig-primary-400) var(--y-contrast)) h 0 l/1); + --ig-primary-500: oklch(from var(--ig-primary-seed) 0.5244 min(c * 0.7664, 0.1409) h); + --ig-primary-500-contrast: hsla(from color(from var(--ig-primary-500) var(--y-contrast)) h 0 l/1); + --ig-primary-600: oklch(from var(--ig-primary-seed) 0.4535 min(c * 0.6602, 0.1236) h); + --ig-primary-600-contrast: hsla(from color(from var(--ig-primary-600) var(--y-contrast)) h 0 l/1); + --ig-primary-700: oklch(from var(--ig-primary-seed) 0.3818 min(c * 0.5301, 0.1046) h); + --ig-primary-700-contrast: hsla(from color(from var(--ig-primary-700) var(--y-contrast)) h 0 l/1); + --ig-primary-800: oklch(from var(--ig-primary-seed) 0.3034 min(c * 0.3808, 0.0833) h); + --ig-primary-800-contrast: hsla(from color(from var(--ig-primary-800) var(--y-contrast)) h 0 l/1); + --ig-primary-900: oklch(from var(--ig-primary-seed) 0.1995 min(c * 0.2097, 0.0548) h); + --ig-primary-900-contrast: hsla(from color(from var(--ig-primary-900) var(--y-contrast)) h 0 l/1); + --ig-primary-seed: #09f; + --ig-primary-seed-contrast: hsla(from color(from var(--ig-primary-seed) var(--y-contrast)) h 0 l/1); + --ig-primary-A100: oklch(from var(--ig-primary-seed) 0.8905 min(c * 0.3309, 0.0608) h); + --ig-primary-A100-contrast: hsla(from color(from var(--ig-primary-A100) var(--y-contrast)) h 0 l/1); + --ig-primary-A200: oklch(from var(--ig-primary-seed) 0.7075 min(c * 0.8606, 0.1581) h); + --ig-primary-A200-contrast: hsla(from color(from var(--ig-primary-A200) var(--y-contrast)) h 0 l/1); + --ig-primary-A400: oklch(from var(--ig-primary-seed) 0.5847 min(c * 0.8681, 0.1595) h); + --ig-primary-A400-contrast: hsla(from color(from var(--ig-primary-A400) var(--y-contrast)) h 0 l/1); + --ig-primary-A700: oklch(from var(--ig-primary-seed) 0.4923 min(c * 0.7355, 0.1351) h); + --ig-primary-A700-contrast: hsla(from color(from var(--ig-primary-A700) var(--y-contrast)) h 0 l/1); + --ig-secondary-50: oklch(from var(--ig-secondary-seed) 0.9439 min(c * 0.1274, 0.0414) h); + --ig-secondary-50-contrast: hsla(from color(from var(--ig-secondary-50) var(--y-contrast)) h 0 l/1); + --ig-secondary-100: oklch(from var(--ig-secondary-seed) 0.8609 min(c * 0.3781, 0.1024) h); + --ig-secondary-100-contrast: hsla(from color(from var(--ig-secondary-100) var(--y-contrast)) h 0 l/1); + --ig-secondary-200: oklch(from var(--ig-secondary-seed) 0.7822 min(c * 0.6467, 0.158) h); + --ig-secondary-200-contrast: hsla(from color(from var(--ig-secondary-200) var(--y-contrast)) h 0 l/1); + --ig-secondary-300: oklch(from var(--ig-secondary-seed) 0.7011 min(c * 0.8788, 0.2039) h); + --ig-secondary-300-contrast: hsla(from color(from var(--ig-secondary-300) var(--y-contrast)) h 0 l/1); + --ig-secondary-400: oklch(from var(--ig-secondary-seed) 0.6267 min(c * 0.9712, 0.2212) h); + --ig-secondary-400-contrast: hsla(from color(from var(--ig-secondary-400) var(--y-contrast)) h 0 l/1); + --ig-secondary-500: oklch(from var(--ig-secondary-seed) 0.5522 min(c * 0.9342, 0.2128) h); + --ig-secondary-500-contrast: hsla(from color(from var(--ig-secondary-500) var(--y-contrast)) h 0 l/1); + --ig-secondary-600: oklch(from var(--ig-secondary-seed) 0.4784 min(c * 0.8203, 0.1903) h); + --ig-secondary-600-contrast: hsla(from color(from var(--ig-secondary-600) var(--y-contrast)) h 0 l/1); + --ig-secondary-700: oklch(from var(--ig-secondary-seed) 0.402 min(c * 0.6615, 0.1617) h); + --ig-secondary-700-contrast: hsla(from color(from var(--ig-secondary-700) var(--y-contrast)) h 0 l/1); + --ig-secondary-800: oklch(from var(--ig-secondary-seed) 0.3181 min(c * 0.4739, 0.1284) h); + --ig-secondary-800-contrast: hsla(from color(from var(--ig-secondary-800) var(--y-contrast)) h 0 l/1); + --ig-secondary-900: oklch(from var(--ig-secondary-seed) 0.2075 min(c * 0.2592, 0.0838) h); + --ig-secondary-900-contrast: hsla(from color(from var(--ig-secondary-900) var(--y-contrast)) h 0 l/1); + --ig-secondary-seed: #df1b74; + --ig-secondary-seed-contrast: hsla(from color(from var(--ig-secondary-seed) var(--y-contrast)) h 0 l/1); + --ig-secondary-A100: oklch(from var(--ig-secondary-seed) 0.8961 min(c * 0.2738, 0.0766) h); + --ig-secondary-A100-contrast: hsla(from color(from var(--ig-secondary-A100) var(--y-contrast)) h 0 l/1); + --ig-secondary-A200: oklch(from var(--ig-secondary-seed) 0.7419 min(c * 0.8339, 0.1897) h); + --ig-secondary-A200-contrast: hsla(from color(from var(--ig-secondary-A200) var(--y-contrast)) h 0 l/1); + --ig-secondary-A400: oklch(from var(--ig-secondary-seed) 0.616 min(c * 1.053, 0.2396) h); + --ig-secondary-A400-contrast: hsla(from color(from var(--ig-secondary-A400) var(--y-contrast)) h 0 l/1); + --ig-secondary-A700: oklch(from var(--ig-secondary-seed) 0.5201 min(c * 0.9218, 0.2097) h); + --ig-secondary-A700-contrast: hsla(from color(from var(--ig-secondary-A700) var(--y-contrast)) h 0 l/1); + --ig-gray-50: oklch(from var(--ig-gray-seed) 0.9404 0 0); + --ig-gray-50-contrast: hsla(from color(from var(--ig-gray-50) var(--y-contrast)) h 0 l/1); + --ig-gray-100: oklch(from var(--ig-gray-seed) 0.8448 0 0); + --ig-gray-100-contrast: hsla(from color(from var(--ig-gray-100) var(--y-contrast)) h 0 l/1); + --ig-gray-200: oklch(from var(--ig-gray-seed) 0.7562 0 0); + --ig-gray-200-contrast: hsla(from color(from var(--ig-gray-200) var(--y-contrast)) h 0 l/1); + --ig-gray-300: oklch(from var(--ig-gray-seed) 0.6749 0 0); + --ig-gray-300-contrast: hsla(from color(from var(--ig-gray-300) var(--y-contrast)) h 0 l/1); + --ig-gray-400: oklch(from var(--ig-gray-seed) 0.598 0 0); + --ig-gray-400-contrast: hsla(from color(from var(--ig-gray-400) var(--y-contrast)) h 0 l/1); + --ig-gray-500: oklch(from var(--ig-gray-seed) 0.5248 0 0); + --ig-gray-500-contrast: hsla(from color(from var(--ig-gray-500) var(--y-contrast)) h 0 l/1); + --ig-gray-600: oklch(from var(--ig-gray-seed) 0.4539 0 0); + --ig-gray-600-contrast: hsla(from color(from var(--ig-gray-600) var(--y-contrast)) h 0 l/1); + --ig-gray-700: oklch(from var(--ig-gray-seed) 0.3822 0 0); + --ig-gray-700-contrast: hsla(from color(from var(--ig-gray-700) var(--y-contrast)) h 0 l/1); + --ig-gray-800: oklch(from var(--ig-gray-seed) 0.304 0 0); + --ig-gray-800-contrast: hsla(from color(from var(--ig-gray-800) var(--y-contrast)) h 0 l/1); + --ig-gray-900: oklch(from var(--ig-gray-seed) 0.1999 0 0); + --ig-gray-900-contrast: hsla(from color(from var(--ig-gray-900) var(--y-contrast)) h 0 l/1); + --ig-gray-seed: #333; + --ig-gray-seed-contrast: hsla(from color(from var(--ig-gray-seed) var(--y-contrast)) h 0 l/1); + --ig-surface-50: hsl(from var(--ig-surface-500) h calc(s * 1.23) calc(l * 1.78)); + --ig-surface-50-contrast: hsla(from color(from var(--ig-surface-50) var(--y-contrast)) h 0 l/1); + --ig-surface-100: hsl(from var(--ig-surface-500) h calc(s * 0.8) calc(l * 1.66)); + --ig-surface-100-contrast: hsla(from color(from var(--ig-surface-100) var(--y-contrast)) h 0 l/1); + --ig-surface-200: hsl(from var(--ig-surface-500) h calc(s * 0.64) calc(l * 1.43)); + --ig-surface-200-contrast: hsla(from color(from var(--ig-surface-200) var(--y-contrast)) h 0 l/1); + --ig-surface-300: hsl(from var(--ig-surface-500) h calc(s * 0.73) calc(l * 1.19)); + --ig-surface-300-contrast: hsla(from color(from var(--ig-surface-300) var(--y-contrast)) h 0 l/1); + --ig-surface-400: hsl(from var(--ig-surface-500) h calc(s * 0.875) calc(l * 1.08)); + --ig-surface-400-contrast: hsla(from color(from var(--ig-surface-400) var(--y-contrast)) h 0 l/1); + --ig-surface-500: #fff; + --ig-surface-500-contrast: hsla(from color(from var(--ig-surface-500) var(--y-contrast)) h 0 l/1); + --ig-surface-600: hsl(from var(--ig-surface-500) h calc(s * 1.26) calc(l * 0.89)); + --ig-surface-600-contrast: hsla(from color(from var(--ig-surface-600) var(--y-contrast)) h 0 l/1); + --ig-surface-700: hsl(from var(--ig-surface-500) h calc(s * 1.26) calc(l * 0.81)); + --ig-surface-700-contrast: hsla(from color(from var(--ig-surface-700) var(--y-contrast)) h 0 l/1); + --ig-surface-800: hsl(from var(--ig-surface-500) h calc(s * 1.26) calc(l * 0.73)); + --ig-surface-800-contrast: hsla(from color(from var(--ig-surface-800) var(--y-contrast)) h 0 l/1); + --ig-surface-900: hsl(from var(--ig-surface-500) h calc(s * 1.26) calc(l * 0.64)); + --ig-surface-900-contrast: hsla(from color(from var(--ig-surface-900) var(--y-contrast)) h 0 l/1); + --ig-surface-seed: #fff; + --ig-surface-seed-contrast: hsla(from color(from var(--ig-surface-seed) var(--y-contrast)) h 0 l/1); + --ig-surface-A100: hsl(from var(--ig-surface-500) h calc(s * 1.23) calc(l * 1.34)); + --ig-surface-A100-contrast: hsla(from color(from var(--ig-surface-A100) var(--y-contrast)) h 0 l/1); + --ig-surface-A200: hsl(from var(--ig-surface-500) h calc(s * 1.22) calc(l * 1.16)); + --ig-surface-A200-contrast: hsla(from color(from var(--ig-surface-A200) var(--y-contrast)) h 0 l/1); + --ig-surface-A400: hsl(from var(--ig-surface-500) h calc(s * 1.23) calc(l * 0.91)); + --ig-surface-A400-contrast: hsla(from color(from var(--ig-surface-A400) var(--y-contrast)) h 0 l/1); + --ig-surface-A700: hsl(from var(--ig-surface-500) h calc(s * 1.23) calc(l * 0.65)); + --ig-surface-A700-contrast: hsla(from color(from var(--ig-surface-A700) var(--y-contrast)) h 0 l/1); + --ig-info-50: oklch(from var(--ig-info-seed) 0.9403 min(c * 0.1374, 0.0328) h); + --ig-info-50-contrast: hsla(from color(from var(--ig-info-50) var(--y-contrast)) h 0 l/1); + --ig-info-100: oklch(from var(--ig-info-seed) 0.8445 min(c * 0.4283, 0.0851) h); + --ig-info-100-contrast: hsla(from color(from var(--ig-info-100) var(--y-contrast)) h 0 l/1); + --ig-info-200: oklch(from var(--ig-info-seed) 0.7562 min(c * 0.7275, 0.1305) h); + --ig-info-200-contrast: hsla(from color(from var(--ig-info-200) var(--y-contrast)) h 0 l/1); + --ig-info-300: oklch(from var(--ig-info-seed) 0.6761 min(c * 0.9394, 0.1599) h); + --ig-info-300-contrast: hsla(from color(from var(--ig-info-300) var(--y-contrast)) h 0 l/1); + --ig-info-400: oklch(from var(--ig-info-seed) 0.5996 min(c * 0.999, 0.167) h); + --ig-info-400-contrast: hsla(from color(from var(--ig-info-400) var(--y-contrast)) h 0 l/1); + --ig-info-500: oklch(from var(--ig-info-seed) 0.5266 min(c * 0.937, 0.1566) h); + --ig-info-500-contrast: hsla(from color(from var(--ig-info-500) var(--y-contrast)) h 0 l/1); + --ig-info-600: oklch(from var(--ig-info-seed) 0.4555 min(c * 0.8148, 0.1387) h); + --ig-info-600-contrast: hsla(from color(from var(--ig-info-600) var(--y-contrast)) h 0 l/1); + --ig-info-700: oklch(from var(--ig-info-seed) 0.3833 min(c * 0.6562, 0.1177) h); + --ig-info-700-contrast: hsla(from color(from var(--ig-info-700) var(--y-contrast)) h 0 l/1); + --ig-info-800: oklch(from var(--ig-info-seed) 0.3045 min(c * 0.4716, 0.0937) h); + --ig-info-800-contrast: hsla(from color(from var(--ig-info-800) var(--y-contrast)) h 0 l/1); + --ig-info-900: oklch(from var(--ig-info-seed) 0.2 min(c * 0.2596, 0.0616) h); + --ig-info-900-contrast: hsla(from color(from var(--ig-info-900) var(--y-contrast)) h 0 l/1); + --ig-info-seed: #1377d5; + --ig-info-seed-contrast: hsla(from color(from var(--ig-info-seed) var(--y-contrast)) h 0 l/1); + --ig-info-A100: oklch(from var(--ig-info-seed) 0.8875 min(c * 0.3701, 0.0618) h); + --ig-info-A100-contrast: hsla(from color(from var(--ig-info-A100) var(--y-contrast)) h 0 l/1); + --ig-info-A200: oklch(from var(--ig-info-seed) 0.7102 min(c * 0.9445, 0.1577) h); + --ig-info-A200-contrast: hsla(from color(from var(--ig-info-A200) var(--y-contrast)) h 0 l/1); + --ig-info-A400: oklch(from var(--ig-info-seed) 0.5873 min(c * 1.0634, 0.1775) h); + --ig-info-A400-contrast: hsla(from color(from var(--ig-info-A400) var(--y-contrast)) h 0 l/1); + --ig-info-A700: oklch(from var(--ig-info-seed) 0.4945 min(c * 0.9117, 0.1522) h); + --ig-info-A700-contrast: hsla(from color(from var(--ig-info-A700) var(--y-contrast)) h 0 l/1); + --ig-success-50: oklch(from var(--ig-success-seed) 0.9325 min(c * 0.4533, 0.1325) h); + --ig-success-50-contrast: hsla(from color(from var(--ig-success-50) var(--y-contrast)) h 0 l/1); + --ig-success-100: oklch(from var(--ig-success-seed) 0.8312 min(c * 0.9418, 0.2294) h); + --ig-success-100-contrast: hsla(from color(from var(--ig-success-100) var(--y-contrast)) h 0 l/1); + --ig-success-200: oklch(from var(--ig-success-seed) 0.7415 min(c * 0.9822, 0.2159) h); + --ig-success-200-contrast: hsla(from color(from var(--ig-success-200) var(--y-contrast)) h 0 l/1); + --ig-success-300: oklch(from var(--ig-success-seed) 0.6595 min(c * 0.9259, 0.1932) h); + --ig-success-300-contrast: hsla(from color(from var(--ig-success-300) var(--y-contrast)) h 0 l/1); + --ig-success-400: oklch(from var(--ig-success-seed) 0.584 min(c * 0.8359, 0.1713) h); + --ig-success-400-contrast: hsla(from color(from var(--ig-success-400) var(--y-contrast)) h 0 l/1); + --ig-success-500: oklch(from var(--ig-success-seed) 0.5124 min(c * 0.7337, 0.1503) h); + --ig-success-500-contrast: hsla(from color(from var(--ig-success-500) var(--y-contrast)) h 0 l/1); + --ig-success-600: oklch(from var(--ig-success-seed) 0.4435 min(c * 0.6237, 0.1301) h); + --ig-success-600-contrast: hsla(from color(from var(--ig-success-600) var(--y-contrast)) h 0 l/1); + --ig-success-700: oklch(from var(--ig-success-seed) 0.3739 min(c * 0.4991, 0.1097) h); + --ig-success-700-contrast: hsla(from color(from var(--ig-success-700) var(--y-contrast)) h 0 l/1); + --ig-success-800: oklch(from var(--ig-success-seed) 0.2979 min(c * 0.3588, 0.0874) h); + --ig-success-800-contrast: hsla(from color(from var(--ig-success-800) var(--y-contrast)) h 0 l/1); + --ig-success-900: oklch(from var(--ig-success-seed) 0.1966 min(c * 0.1983, 0.0577) h); + --ig-success-900-contrast: hsla(from color(from var(--ig-success-900) var(--y-contrast)) h 0 l/1); + --ig-success-seed: #4eb862; + --ig-success-seed-contrast: hsla(from color(from var(--ig-success-seed) var(--y-contrast)) h 0 l/1); + --ig-success-A100: oklch(from var(--ig-success-seed) 0.8646 min(c * 1.5195, 0.239) h); + --ig-success-A100-contrast: hsla(from color(from var(--ig-success-A100) var(--y-contrast)) h 0 l/1); + --ig-success-A200: oklch(from var(--ig-success-seed) 0.6871 min(c * 1.282, 0.2016) h); + --ig-success-A200-contrast: hsla(from color(from var(--ig-success-A200) var(--y-contrast)) h 0 l/1); + --ig-success-A400: oklch(from var(--ig-success-seed) 0.5678 min(c * 1.0593, 0.1666) h); + --ig-success-A400-contrast: hsla(from color(from var(--ig-success-A400) var(--y-contrast)) h 0 l/1); + --ig-success-A700: oklch(from var(--ig-success-seed) 0.4777 min(c * 0.8913, 0.1402) h); + --ig-success-A700-contrast: hsla(from color(from var(--ig-success-A700) var(--y-contrast)) h 0 l/1); + --ig-warn-50: oklch(from var(--ig-warn-seed) 0.946 min(c * 0.1898, 0.0446) h); + --ig-warn-50-contrast: hsla(from color(from var(--ig-warn-50) var(--y-contrast)) h 0 l/1); + --ig-warn-100: oklch(from var(--ig-warn-seed) 0.8514 min(c * 0.5993, 0.1174) h); + --ig-warn-100-contrast: hsla(from color(from var(--ig-warn-100) var(--y-contrast)) h 0 l/1); + --ig-warn-200: oklch(from var(--ig-warn-seed) 0.7625 min(c * 0.8418, 0.1487) h); + --ig-warn-200-contrast: hsla(from color(from var(--ig-warn-200) var(--y-contrast)) h 0 l/1); + --ig-warn-300: oklch(from var(--ig-warn-seed) 0.6821 min(c * 0.8564, 0.1436) h); + --ig-warn-300-contrast: hsla(from color(from var(--ig-warn-300) var(--y-contrast)) h 0 l/1); + --ig-warn-400: oklch(from var(--ig-warn-seed) 0.6046 min(c * 0.7864, 0.1295) h); + --ig-warn-400-contrast: hsla(from color(from var(--ig-warn-400) var(--y-contrast)) h 0 l/1); + --ig-warn-500: oklch(from var(--ig-warn-seed) 0.5307 min(c * 0.6932, 0.1142) h); + --ig-warn-500-contrast: hsla(from color(from var(--ig-warn-500) var(--y-contrast)) h 0 l/1); + --ig-warn-600: oklch(from var(--ig-warn-seed) 0.4588 min(c * 0.5893, 0.0988) h); + --ig-warn-600-contrast: hsla(from color(from var(--ig-warn-600) var(--y-contrast)) h 0 l/1); + --ig-warn-700: oklch(from var(--ig-warn-seed) 0.3861 min(c * 0.4709, 0.0832) h); + --ig-warn-700-contrast: hsla(from color(from var(--ig-warn-700) var(--y-contrast)) h 0 l/1); + --ig-warn-800: oklch(from var(--ig-warn-seed) 0.3066 min(c * 0.3375, 0.0661) h); + --ig-warn-800-contrast: hsla(from color(from var(--ig-warn-800) var(--y-contrast)) h 0 l/1); + --ig-warn-900: oklch(from var(--ig-warn-seed) 0.2013 min(c * 0.1855, 0.0434) h); + --ig-warn-900-contrast: hsla(from color(from var(--ig-warn-900) var(--y-contrast)) h 0 l/1); + --ig-warn-seed: #faa419; + --ig-warn-seed-contrast: hsla(from color(from var(--ig-warn-seed) var(--y-contrast)) h 0 l/1); + --ig-warn-A100: oklch(from var(--ig-warn-seed) 0.8951 min(c * 0.5269, 0.0867) h); + --ig-warn-A100-contrast: hsla(from color(from var(--ig-warn-A100) var(--y-contrast)) h 0 l/1); + --ig-warn-A200: oklch(from var(--ig-warn-seed) 0.716 min(c * 0.9343, 0.1537) h); + --ig-warn-A200-contrast: hsla(from color(from var(--ig-warn-A200) var(--y-contrast)) h 0 l/1); + --ig-warn-A400: oklch(from var(--ig-warn-seed) 0.5917 min(c * 0.7753, 0.1275) h); + --ig-warn-A400-contrast: hsla(from color(from var(--ig-warn-A400) var(--y-contrast)) h 0 l/1); + --ig-warn-A700: oklch(from var(--ig-warn-seed) 0.4975 min(c * 0.6519, 0.1072) h); + --ig-warn-A700-contrast: hsla(from color(from var(--ig-warn-A700) var(--y-contrast)) h 0 l/1); + --ig-error-50: oklch(from var(--ig-error-seed) 0.9437 min(c * 0.1091, 0.0389) h); + --ig-error-50-contrast: hsla(from color(from var(--ig-error-50) var(--y-contrast)) h 0 l/1); + --ig-error-100: oklch(from var(--ig-error-seed) 0.8569 min(c * 0.3324, 0.0989) h); + --ig-error-100-contrast: hsla(from color(from var(--ig-error-100) var(--y-contrast)) h 0 l/1); + --ig-error-200: oklch(from var(--ig-error-seed) 0.7808 min(c * 0.5577, 0.1498) h); + --ig-error-200-contrast: hsla(from color(from var(--ig-error-200) var(--y-contrast)) h 0 l/1); + --ig-error-300: oklch(from var(--ig-error-seed) 0.6973 min(c * 0.7678, 0.1957) h); + --ig-error-300-contrast: hsla(from color(from var(--ig-error-300) var(--y-contrast)) h 0 l/1); + --ig-error-400: oklch(from var(--ig-error-seed) 0.6245 min(c * 0.8568, 0.2144) h); + --ig-error-400-contrast: hsla(from color(from var(--ig-error-400) var(--y-contrast)) h 0 l/1); + --ig-error-500: oklch(from var(--ig-error-seed) 0.5505 min(c * 0.8337, 0.2087) h); + --ig-error-500-contrast: hsla(from color(from var(--ig-error-500) var(--y-contrast)) h 0 l/1); + --ig-error-600: oklch(from var(--ig-error-seed) 0.477 min(c * 0.7366, 0.1877) h); + --ig-error-600-contrast: hsla(from color(from var(--ig-error-600) var(--y-contrast)) h 0 l/1); + --ig-error-700: oklch(from var(--ig-error-seed) 0.4009 min(c * 0.5955, 0.1599) h); + --ig-error-700-contrast: hsla(from color(from var(--ig-error-700) var(--y-contrast)) h 0 l/1); + --ig-error-800: oklch(from var(--ig-error-seed) 0.3173 min(c * 0.427, 0.1271) h); + --ig-error-800-contrast: hsla(from color(from var(--ig-error-800) var(--y-contrast)) h 0 l/1); + --ig-error-900: oklch(from var(--ig-error-seed) 0.207 min(c * 0.2336, 0.083) h); + --ig-error-900-contrast: hsla(from color(from var(--ig-error-900) var(--y-contrast)) h 0 l/1); + --ig-error-seed: #ff134a; + --ig-error-seed-contrast: hsla(from color(from var(--ig-error-seed) var(--y-contrast)) h 0 l/1); + --ig-error-A100: oklch(from var(--ig-error-seed) 0.8969 min(c * 0.2421, 0.0714) h); + --ig-error-A100-contrast: hsla(from color(from var(--ig-error-A100) var(--y-contrast)) h 0 l/1); + --ig-error-A200: oklch(from var(--ig-error-seed) 0.7402 min(c * 0.7178, 0.1794) h); + --ig-error-A200-contrast: hsla(from color(from var(--ig-error-A200) var(--y-contrast)) h 0 l/1); + --ig-error-A400: oklch(from var(--ig-error-seed) 0.6138 min(c * 0.9349, 0.2337) h); + --ig-error-A400-contrast: hsla(from color(from var(--ig-error-A400) var(--y-contrast)) h 0 l/1); + --ig-error-A700: oklch(from var(--ig-error-seed) 0.5186 min(c * 0.8298, 0.2074) h); + --ig-error-A700-contrast: hsla(from color(from var(--ig-error-A700) var(--y-contrast)) h 0 l/1); +} + +lands-on { + primary: "300"; + secondary: "A400"; +} diff --git a/_to_delete/theming-tmp/t2.scss b/_to_delete/theming-tmp/t2.scss new file mode 100644 index 00000000..f9653a2d --- /dev/null +++ b/_to_delete/theming-tmp/t2.scss @@ -0,0 +1,4 @@ +@use '../sass/color' as *; +$p: palette($primary: #09f, $secondary: #df1b74, $surface: #fff, $gray: #333, $variant: 'test'); +.gamut-relative { @include palette($p, $contrast: false); } +lands-on { primary: seed-lands-on($p, 'primary'); secondary: seed-lands-on($p, 'secondary'); } diff --git a/_to_delete/theming-tmp/t3.scss b/_to_delete/theming-tmp/t3.scss new file mode 100644 index 00000000..35488a02 --- /dev/null +++ b/_to_delete/theming-tmp/t3.scss @@ -0,0 +1,5 @@ +@use '../sass/color' as *; +$p: palette($primary: #09f, $secondary: #df1b74, $surface: #fff, $gray: #333, $variant: 'test'); +raws { @each $v in ('50','100','200','300','400','500','600','700','800','900','A100','A700') { #{$v}: color($p, primary, $v); } } +grays { @each $v in ('50','100','500','900') { #{$v}: color($p, gray, $v); } } +surf { s500: color($p, surface, 500); } diff --git a/_to_delete/theming-tmp/t4.css b/_to_delete/theming-tmp/t4.css new file mode 100644 index 00000000..5bb0ce8d --- /dev/null +++ b/_to_delete/theming-tmp/t4.css @@ -0,0 +1,223 @@ +.a { + --ig-primary-seed: #09f; + --expr-50: oklch(from var(--ig-primary-seed) 0.9402 min(c * 0.1264, 0.0232) calc(h + 6.804)); + --raw-50: rgb(225, 236, 251); + --expr-100: oklch(from var(--ig-primary-seed) 0.844 min(c * 0.3941, 0.0724) calc(h + 4.879)); + --raw-100: rgb(171, 207, 251); + --expr-200: oklch(from var(--ig-primary-seed) 0.7551 min(c * 0.6602, 0.1213) calc(h + 3.103)); + --raw-200: rgb(116, 180, 250); + --expr-300: oklch(from var(--ig-primary-seed) 0.6742 min(c * 0.8212, 0.1508) calc(h + 1.484)); + --raw-300: rgb(67, 155, 239); + --expr-400: oklch(from var(--ig-primary-seed) 0.5973 min(c * 0.8367, 0.1537) h); + --raw-400: rgb(27, 131, 214); + --expr-500: oklch(from var(--ig-primary-seed) 0.5244 min(c * 0.7664, 0.1408) h); + --raw-500: rgb(9, 109, 183); + --expr-600: oklch(from var(--ig-primary-seed) 0.4535 min(c * 0.6602, 0.1213) h); + --raw-600: rgb(7, 89, 150); + --expr-700: oklch(from var(--ig-primary-seed) 0.3818 min(c * 0.5301, 0.0974) h); + --raw-700: rgb(11, 69, 116); + --expr-800: oklch(from var(--ig-primary-seed) 0.3034 min(c * 0.3808, 0.0699) h); + --raw-800: rgb(12, 48, 80); + --expr-900: oklch(from var(--ig-primary-seed) 0.2004 min(c * 0.2097, 0.0385) h); + --raw-900: rgb(7, 23, 39); + --expr-A100: oklch(from var(--ig-primary-seed) 0.889 min(c * 0.3037, 0.0558) calc(h + 2.817)); + --raw-A100: rgb(192, 222, 255); + --expr-A200: oklch(from var(--ig-primary-seed) 0.7075 min(c * 0.8606, 0.1581) calc(h + 2.149)); + --raw-A200: rgb(74, 165, 255); + --expr-A400: oklch(from var(--ig-primary-seed) 0.5847 min(c * 0.8681, 0.1595) h); + --raw-A400: rgb(4, 127, 213); + --expr-A700: oklch(from var(--ig-primary-seed) 0.4923 min(c * 0.7355, 0.1351) h); + --raw-A700: rgb(0, 100, 169); +} + +.b { + --ig-primary-seed: #df1b74; + --expr-50: oklch(from var(--ig-primary-seed) 0.9439 min(c * 0.1274, 0.029) h); + --raw-50: rgb(254, 229, 235); + --expr-100: oklch(from var(--ig-primary-seed) 0.8579 min(c * 0.3639, 0.0828) calc(h - 0.806)); + --raw-100: rgb(255, 186, 205); + --expr-200: oklch(from var(--ig-primary-seed) 0.7764 min(c * 0.6247, 0.1421) calc(h - 0.949)); + --raw-200: rgb(255, 141, 177); + --expr-300: oklch(from var(--ig-primary-seed) 0.7011 min(c * 0.8788, 0.1999) h); + --raw-300: rgb(253, 93, 150); + --expr-400: oklch(from var(--ig-primary-seed) 0.6267 min(c * 0.9712, 0.221) h); + --raw-400: rgb(233, 52, 127); + --expr-500: oklch(from var(--ig-primary-seed) 0.5522 min(c * 0.9342, 0.2125) h); + --raw-500: rgb(203, 23, 105); + --expr-600: oklch(from var(--ig-primary-seed) 0.4784 min(c * 0.8203, 0.1866) h); + --raw-600: rgb(169, 13, 86); + --expr-700: oklch(from var(--ig-primary-seed) 0.402 min(c * 0.6615, 0.1505) h); + --raw-700: rgb(131, 16, 66); + --expr-800: oklch(from var(--ig-primary-seed) 0.3181 min(c * 0.4739, 0.1078) h); + --raw-800: rgb(91, 17, 46); + --expr-900: oklch(from var(--ig-primary-seed) 0.2085 min(c * 0.2592, 0.059) h); + --raw-900: rgb(44, 10, 22); + --expr-A100: oklch(from var(--ig-primary-seed) 0.9072 min(c * 0.231, 0.0526) calc(h + 356.496)); + --raw-A100: rgb(255, 211, 224); + --expr-A200: oklch(from var(--ig-primary-seed) 0.7302 min(c * 0.7981, 0.1816) calc(h - 1.535)); + --raw-A200: rgb(255, 111, 163); + --expr-A400: oklch(from var(--ig-primary-seed) 0.616 min(c * 1.053, 0.2396) h); + --raw-A400: rgb(236, 25, 123); + --expr-A700: oklch(from var(--ig-primary-seed) 0.5201 min(c * 0.9218, 0.2097) h); + --raw-A700: rgb(191, 1, 96); +} + +.c { + --ig-primary-seed: #faa419; + --expr-50: oklch(from var(--ig-primary-seed) 0.946 min(c * 0.1898, 0.0312) h); + --raw-50: rgb(251, 234, 215); + --expr-100: oklch(from var(--ig-primary-seed) 0.8514 min(c * 0.5993, 0.0986) h); + --raw-100: rgb(247, 196, 134); + --expr-200: oklch(from var(--ig-primary-seed) 0.7625 min(c * 0.8418, 0.1385) h); + --raw-200: rgb(233, 161, 64); + --expr-300: oklch(from var(--ig-primary-seed) 0.6821 min(c * 0.8564, 0.1409) h); + --raw-300: rgb(207, 136, 24); + --expr-400: oklch(from var(--ig-primary-seed) 0.6046 min(c * 0.7864, 0.1294) h); + --raw-400: rgb(177, 114, 4); + --expr-500: oklch(from var(--ig-primary-seed) 0.5307 min(c * 0.6932, 0.114) h); + --raw-500: rgb(149, 95, 1); + --expr-600: oklch(from var(--ig-primary-seed) 0.4588 min(c * 0.5893, 0.0969) h); + --raw-600: rgb(121, 77, 4); + --expr-700: oklch(from var(--ig-primary-seed) 0.3861 min(c * 0.4709, 0.0775) h); + --raw-700: rgb(94, 60, 9); + --expr-800: oklch(from var(--ig-primary-seed) 0.3066 min(c * 0.3375, 0.0555) h); + --raw-800: rgb(65, 42, 11); + --expr-900: oklch(from var(--ig-primary-seed) 0.2023 min(c * 0.1855, 0.0305) h); + --raw-900: rgb(31, 20, 6); + --expr-A100: oklch(from var(--ig-primary-seed) 0.8928 min(c * 0.5171, 0.0851) calc(h + 1.537)); + --raw-A100: rgb(255, 211, 157); + --expr-A200: oklch(from var(--ig-primary-seed) 0.716 min(c * 0.9343, 0.1537) h); + --raw-A200: rgb(222, 144, 4); + --expr-A400: oklch(from var(--ig-primary-seed) 0.5917 min(c * 0.7753, 0.1275) h); + --raw-A400: rgb(172, 110, 0); + --expr-A700: oklch(from var(--ig-primary-seed) 0.4975 min(c * 0.6519, 0.1072) h); + --raw-A700: rgb(136, 86, 0); +} + +.d { + --ig-primary-seed: #ffe9b0; + --expr-50: oklch(from var(--ig-primary-seed) 0.9401 min(c * 0.6808, 0.0522) h); + --raw-50: rgb(249, 234, 196); + --expr-100: oklch(from var(--ig-primary-seed) 0.8453 min(c * 1.6622, 0.1273) h); + --raw-100: rgb(237, 200, 98); + --expr-200: oklch(from var(--ig-primary-seed) 0.7574 min(c * 1.8285, 0.1401) h); + --raw-200: rgb(211, 171, 49); + --expr-300: oklch(from var(--ig-primary-seed) 0.6762 min(c * 1.7413, 0.1334) h); + --raw-300: rgb(184, 146, 21); + --expr-400: oklch(from var(--ig-primary-seed) 0.5992 min(c * 1.5749, 0.1207) h); + --raw-400: rgb(157, 123, 7); + --expr-500: oklch(from var(--ig-primary-seed) 0.5259 min(c * 1.383, 0.1059) h); + --raw-500: rgb(131, 103, 5); + --expr-600: oklch(from var(--ig-primary-seed) 0.4548 min(c * 1.1747, 0.09) h); + --raw-600: rgb(106, 83, 7); + --expr-700: oklch(from var(--ig-primary-seed) 0.3829 min(c * 0.9388, 0.0719) h); + --raw-700: rgb(82, 65, 11); + --expr-800: oklch(from var(--ig-primary-seed) 0.3043 min(c * 0.6733, 0.0516) h); + --raw-800: rgb(57, 45, 12); + --expr-900: oklch(from var(--ig-primary-seed) 0.201 min(c * 0.3707, 0.0284) h); + --raw-900: rgb(27, 22, 7); + --expr-A100: oklch(from var(--ig-primary-seed) 0.887 min(c * 1.8368, 0.1407) h); + --raw-A100: rgb(255, 213, 97); + --expr-A200: oklch(from var(--ig-primary-seed) 0.7096 min(c * 1.8927, 0.145) h); + --raw-A200: rgb(197, 156, 0); + --expr-A400: oklch(from var(--ig-primary-seed) 0.5864 min(c * 1.5641, 0.1198) h); + --raw-A400: rgb(152, 120, 0); + --expr-A700: oklch(from var(--ig-primary-seed) 0.4936 min(c * 1.3166, 0.1009) h); + --raw-A700: rgb(120, 94, 0); +} + +.e { + --ig-primary-seed: #141225; + --expr-50: oklch(from var(--ig-primary-seed) 0.9452 min(c * 0.2038, 0.0077) calc(h + 13.042)); + --raw-50: rgb(237, 236, 241); + --expr-100: oklch(from var(--ig-primary-seed) 0.8463 min(c * 0.6855, 0.0258) calc(h + 9.779)); + --raw-100: rgb(206, 201, 220); + --expr-200: oklch(from var(--ig-primary-seed) 0.759 min(c * 1.1884, 0.0448) calc(h + 6.898)); + --raw-200: rgb(178, 172, 203); + --expr-300: oklch(from var(--ig-primary-seed) 0.6794 min(c * 1.6473, 0.0621) calc(h + 4.27)); + --raw-300: rgb(152, 146, 188); + --expr-400: oklch(from var(--ig-primary-seed) 0.6023 min(c * 2.0078, 0.0757) calc(h + 1.727)); + --raw-400: rgb(127, 122, 172); + --expr-500: oklch(from var(--ig-primary-seed) 0.5299 min(c * 2.1791, 0.0821) h); + --raw-500: rgb(105, 100, 153); + --expr-600: oklch(from var(--ig-primary-seed) 0.4595 min(c * 2.1031, 0.0793) h); + --raw-600: rgb(85, 80, 130); + --expr-700: oklch(from var(--ig-primary-seed) 0.3869 min(c * 1.7868, 0.0674) h); + --raw-700: rgb(66, 62, 102); + --expr-800: oklch(from var(--ig-primary-seed) 0.3074 min(c * 1.3116, 0.0494) h); + --raw-800: rgb(46, 44, 71); + --expr-900: oklch(from var(--ig-primary-seed) 0.2027 min(c * 0.7261, 0.0274) h); + --raw-900: rgb(22, 21, 35); + --expr-A100: oklch(from var(--ig-primary-seed) 0.8949 min(c * 1.5789, 0.0595) calc(h + 12.128)); + --raw-A100: rgb(225, 212, 255); + --expr-A200: oklch(from var(--ig-primary-seed) 0.7203 min(c * 4.2713, 0.161) calc(h + 6.223)); + --raw-A200: rgb(170, 142, 255); + --expr-A400: oklch(from var(--ig-primary-seed) 0.6077 min(c * 6.0798, 0.2292) calc(h + 2.297)); + --raw-A400: rgb(134, 92, 255); + --expr-A700: oklch(from var(--ig-primary-seed) 0.5244 min(c * 7.1002, 0.2676) h); + --raw-A700: rgb(109, 46, 247); +} + +.f { + --ig-primary-seed: #00ff00; + --expr-50: oklch(from var(--ig-primary-seed) 0.9305 min(c * 0.3595, 0.106) h); + --raw-50: rgb(191, 251, 185); + --expr-100: oklch(from var(--ig-primary-seed) 0.8227 min(c * 0.7525, 0.2219) h); + --raw-100: rgb(93, 231, 85); + --expr-200: oklch(from var(--ig-primary-seed) 0.7358 min(c * 0.784, 0.2312) h); + --raw-200: rgb(47, 203, 42); + --expr-300: oklch(from var(--ig-primary-seed) 0.6543 min(c * 0.7392, 0.2179) h); + --raw-300: rgb(17, 175, 14); + --expr-400: oklch(from var(--ig-primary-seed) 0.5793 min(c * 0.6674, 0.1968) h); + --raw-400: rgb(1, 149, 1); + --expr-500: oklch(from var(--ig-primary-seed) 0.5083 min(c * 0.5858, 0.1727) h); + --raw-500: rgb(1, 124, 0); + --expr-600: oklch(from var(--ig-primary-seed) 0.4397 min(c * 0.4977, 0.1467) h); + --raw-600: rgb(5, 101, 4); + --expr-700: oklch(from var(--ig-primary-seed) 0.371 min(c * 0.3987, 0.1175) h); + --raw-700: rgb(11, 78, 9); + --expr-800: oklch(from var(--ig-primary-seed) 0.2958 min(c * 0.2868, 0.0846) h); + --raw-800: rgb(13, 55, 11); + --expr-900: oklch(from var(--ig-primary-seed) 0.1964 min(c * 0.1586, 0.0468) h); + --raw-900: rgb(7, 26, 6); + --expr-A100: oklch(from var(--ig-primary-seed) 0.8632 min(c * 0.9255, 0.2729) h); + --raw-A100: rgb(58, 251, 52); + --expr-A200: oklch(from var(--ig-primary-seed) 0.686 min(c * 0.7917, 0.2334) h); + --raw-A200: rgb(0, 187, 0); + --expr-A400: oklch(from var(--ig-primary-seed) 0.5668 min(c * 0.6542, 0.1929) h); + --raw-A400: rgb(0, 144, 0); + --expr-A700: oklch(from var(--ig-primary-seed) 0.4769 min(c * 0.5504, 0.1623) h); + --raw-A700: rgb(0, 114, 0); +} + +.g { + --ig-primary-seed: #a99bb0; + --expr-50: oklch(from var(--ig-primary-seed) 0.9458 min(c * 0.2673, 0.0091) calc(h + 6.917)); + --raw-50: rgb(240, 235, 241); + --expr-100: oklch(from var(--ig-primary-seed) 0.8503 min(c * 0.8851, 0.0301) calc(h + 5.006)); + --raw-100: rgb(215, 200, 218); + --expr-200: oklch(from var(--ig-primary-seed) 0.7632 min(c * 1.5308, 0.052) calc(h + 3.263)); + --raw-200: rgb(192, 168, 200); + --expr-300: oklch(from var(--ig-primary-seed) 0.6828 min(c * 2.0471, 0.0695) calc(h + 1.655)); + --raw-300: rgb(170, 140, 182); + --expr-400: oklch(from var(--ig-primary-seed) 0.6055 min(c * 2.2731, 0.0772) calc(h + 0.11)); + --raw-400: rgb(147, 116, 162); + --expr-500: oklch(from var(--ig-primary-seed) 0.533 min(c * 2.1964, 0.0746) h); + --raw-500: rgb(125, 95, 139); + --expr-600: oklch(from var(--ig-primary-seed) 0.461 min(c * 1.935, 0.0657) h); + --raw-600: rgb(102, 77, 114); + --expr-700: oklch(from var(--ig-primary-seed) 0.3879 min(c * 1.5661, 0.0532) h); + --raw-700: rgb(79, 60, 88); + --expr-800: oklch(from var(--ig-primary-seed) 0.3081 min(c * 1.127, 0.0383) h); + --raw-800: rgb(55, 42, 61); + --expr-900: oklch(from var(--ig-primary-seed) 0.2031 min(c * 0.6201, 0.0211) h); + --raw-900: rgb(26, 20, 29); + --expr-A100: oklch(from var(--ig-primary-seed) 0.8992 min(c * 2.3677, 0.0804) calc(h + 5.985)); + --raw-A100: rgb(247, 205, 255); + --expr-A200: oklch(from var(--ig-primary-seed) 0.7351 min(c * 6.2159, 0.211) calc(h + 2.701)); + --raw-A200: rgb(221, 119, 255); + --expr-A400: oklch(from var(--ig-primary-seed) 0.6216 min(c * 8.2185, 0.279) calc(h + 0.431)); + --raw-A400: rgb(194, 45, 246); + --expr-A700: oklch(from var(--ig-primary-seed) 0.5279 min(c * 7.6261, 0.2589) h); + --raw-A700: rgb(159, 4, 206); +} diff --git a/_to_delete/theming-tmp/t4.scss b/_to_delete/theming-tmp/t4.scss new file mode 100644 index 00000000..7ba9713d --- /dev/null +++ b/_to_delete/theming-tmp/t4.scss @@ -0,0 +1,14 @@ +@use 'sass:map'; +@use '../sass/color' as *; +$seeds: ('a': #09f, 'b': #df1b74, 'c': #faa419, 'd': #ffe9b0, 'e': #141225, 'f': #00ff00, 'g': #a99bb0); +@each $k, $seed in $seeds { + $p: palette($primary: $seed, $secondary: $seed, $surface: #fff, $variant: 't'); + $shades: map.get($p, 'primary'); + .#{$k} { + --ig-primary-seed: #{$seed}; + @each $v in ('50','100','200','300','400','500','600','700','800','900','A100','A200','A400','A700') { + --expr-#{$v}: #{map.get($shades, $v)}; + --raw-#{$v}: #{map.get($shades, '#{$v}-raw')}; + } + } +} diff --git a/_to_delete/theming-tmp/tests.css b/_to_delete/theming-tmp/tests.css new file mode 100644 index 00000000..ae260d06 --- /dev/null +++ b/_to_delete/theming-tmp/tests.css @@ -0,0 +1,7928 @@ +@charset "UTF-8"; +/* # Module: Animations */ +/* -------------------- */ +/* Test: should include a keyframe animation only once at the root of the stylesheet */ +/* ASSERT: */ +/* OUTPUT */ +@keyframes test-keyframes { + 0% { + color: red; + } + 100% { + color: blue; + } +} +/* END_OUTPUT */ +/* EXPECTED */ +@keyframes test-keyframes { + 0% { + color: red; + } + 100% { + color: blue; + } +} +/* END_EXPECTED */ +/* END_ASSERT */ +/* */ +/* Test: should include a list of animations using the animation mixin */ +/* ASSERT: */ +/* OUTPUT */ +.test-output { + animation: "test-keyframes" 2s ease-out, "bounce-out" 1s ease-out; +} + +/* END_OUTPUT */ +/* EXPECTED */ +.test-output { + animation: "test-keyframes" 2s ease-out, "bounce-out" 1s ease-out; +} + +/* END_EXPECTED */ +/* END_ASSERT */ +/* */ +/* */ +/* # Module: Color */ +/* --------------- */ +/* # Module: Color :: base */ +/* ----------------------- */ +/* Test: should mix two colors to produce an opaque color */ +/* ✔ [assert-equal] should mix two colors to produce an opaque color */ +/* ✔ [assert-equal] should mix two colors to produce an opaque color */ +/* */ +/* Test: converts a color to a list of HSL values */ +/* ✔ [assert-equal] converts a color to a list of HSL values */ +/* */ +/* */ +/* # Module: Color :: charts */ +/* ------------------------- */ +/* Test: should resolve regular chart brushes */ +/* ✔ [assert-equal] should resolve regular chart brushes */ +/* */ +/* Test: should resolve color-blind chart brushes */ +/* ✔ [assert-equal] should resolve color-blind chart brushes */ +/* */ +/* */ +/* # Module: Color :: contrast */ +/* --------------------------- */ +/* Test: should return an adaptive contrast color from a hex value */ +/* ✔ [assert-equal] should return an adaptive contrast color from a hex value */ +/* */ +/* Test: should return an adaptive contrast color from an hsl value */ +/* ✔ [assert-equal] should return an adaptive contrast color from an hsl value */ +/* */ +/* Test: should return an adaptive contrast color from a CSS variable value */ +/* ✔ [assert-equal] should return an adaptive contrast color from a CSS variable value */ +/* */ +/* Test: should return the passed background value if no valid colors are provided */ +/* ✔ [assert-equal] should return the passed background value if no valid colors are provided */ +/* */ +/* Test: should return black for a white background */ +/* ✔ [assert-equal] should return black for a white background */ +/* */ +/* Test: should return white for a black background */ +/* ✔ [assert-equal] should return white for a black background */ +/* */ +/* Test: should return a contrasting color for a given background regardless of level case */ +/* ✔ [assert-equal] should return a contrasting color for a given background regardless of level case */ +/* ✔ [assert-equal] should return a contrasting color for a given background regardless of level case */ +/* ✔ [assert-equal] should return a contrasting color for a given background regardless of level case */ +/* */ +/* Test: returns the best contrast color from a list of candidates */ +/* ✔ [assert-equal] returns the best contrast color from a list of candidates */ +/* */ +/* Test: should return an AAA contrasting color for a given background */ +/* ✔ [assert-equal] should return an AAA contrasting color for a given background */ +/* */ +/* Test: should return an AA contrasting color for a given background */ +/* ✔ [assert-equal] should return an AA contrasting color for a given background */ +/* */ +/* */ +/* # Module: Color :: palette */ +/* -------------------------- */ +/* Test: should return a shade of type color w/ palette as only argument */ +/* ✔ [assert-equal] should return a shade of type color w/ palette as only argument */ +/* */ +/* Test: should return a shade of type color string w/ palette and color as only arguments */ +/* ✔ [assert-equal] should return a shade of type color string w/ palette and color as only arguments */ +/* */ +/* Test: should return a shade of type string w/ all arguments passed */ +/* ✔ [assert-equal] should return a shade of type string w/ all arguments passed */ +/* ✔ [assert-unequal] should return a shade of type string w/ all arguments passed */ +/* */ +/* Test: should return a shade as CSS variable w/o arguments */ +/* ✔ [assert-equal] should return a shade as CSS variable w/o arguments */ +/* ✔ [assert-equal] should return a shade as CSS variable w/o arguments */ +/* */ +/* Test: should return a shade as CSS variable w/ color as only argument */ +/* ✔ [assert-equal] should return a shade as CSS variable w/ color as only argument */ +/* ✔ [assert-equal] should return a shade as CSS variable w/ color as only argument */ +/* */ +/* Test: should return a shade of type string as CSS var w/ color and variant as only arguments */ +/* ✔ [assert-equal] should return a shade of type string as CSS var w/ color and variant as only arguments */ +/* ✔ [assert-equal] should return a shade of type string as CSS var w/ color and variant as only arguments */ +/* */ +/* Test: should return a contrast shade w/ palette as only argument */ +/* ✔ [assert-equal] should return a contrast shade w/ palette as only argument */ +/* */ +/* Test: should return a contrast shade of type string as CSS var w/ color and variant as only arguments */ +/* ✔ [assert-equal] should return a contrast shade of type string as CSS var w/ color and variant as only arguments */ +/* ✔ [assert-equal] should return a contrast shade of type string as CSS var w/ color and variant as only arguments */ +/* */ +/* Test: should retrieve colors from a palette regadless of type of key */ +/* ✔ [assert-true] should retrieve colors from a palette regadless of type of key */ +/* ✔ [assert-equal] should retrieve colors from a palette regadless of type of key */ +/* ✔ [assert-true] should retrieve colors from a palette regadless of type of key */ +/* ✔ [assert-equal] should retrieve colors from a palette regadless of type of key */ +/* ✔ [assert-true] should retrieve colors from a palette regadless of type of key */ +/* ✔ [assert-equal] should retrieve colors from a palette regadless of type of key */ +/* ✔ [assert-true] should retrieve colors from a palette regadless of type of key */ +/* ✔ [assert-equal] should retrieve colors from a palette regadless of type of key */ +/* */ +/* Test: should generate an HSL color shade from a given base color */ +/* ✔ [assert-equal] should generate an HSL color shade from a given base color */ +/* */ +/* Test: should generate an a contrasting HSL grayscale shade for a given surface color */ +/* ✔ [assert-equal] should generate an a contrasting HSL grayscale shade for a given surface color */ +/* ✔ [assert-equal] should generate an a contrasting HSL grayscale shade for a given surface color */ +/* */ +/* Test: should generate a valid palette */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] map */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] map */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] map */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] map */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] map */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] map */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] map */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] map */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] map */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] string */ +/* */ +/* Test: should generate correct CSS variables for color and grayscale shades in a palette */ +/* ASSERT: */ +/* OUTPUT */ +:root { + --ig-wcag-a: 0.31; + --ig-wcag-aa: 0.185; + --ig-wcag-aaa: 0.178; + --ig-contrast-level: var(--ig-wcag-aa); + --y: clamp(0, (y / var(--ig-contrast-level) - 1) * -infinity, 1); + --y-contrast: xyz-d65 var(--y) var(--y) var(--y); +} + +:root { + --ig-primary-50: oklch(from var(--ig-primary-seed) 0.9402 min(c * 0.1264, 0.0232) calc(h + 6.804)); + --ig-primary-50-contrast: hsla(from color(from var(--ig-primary-50) var(--y-contrast)) h 0 l/1); + --ig-primary-100: oklch(from var(--ig-primary-seed) 0.844 min(c * 0.3941, 0.0724) calc(h + 4.879)); + --ig-primary-100-contrast: hsla(from color(from var(--ig-primary-100) var(--y-contrast)) h 0 l/1); + --ig-primary-200: oklch(from var(--ig-primary-seed) 0.7551 min(c * 0.6602, 0.1213) calc(h + 3.103)); + --ig-primary-200-contrast: hsla(from color(from var(--ig-primary-200) var(--y-contrast)) h 0 l/1); + --ig-primary-300: oklch(from var(--ig-primary-seed) 0.6742 min(c * 0.8212, 0.1508) calc(h + 1.484)); + --ig-primary-300-contrast: hsla(from color(from var(--ig-primary-300) var(--y-contrast)) h 0 l/1); + --ig-primary-400: oklch(from var(--ig-primary-seed) 0.5973 min(c * 0.8367, 0.1537) h); + --ig-primary-400-contrast: hsla(from color(from var(--ig-primary-400) var(--y-contrast)) h 0 l/1); + --ig-primary-500: oklch(from var(--ig-primary-seed) 0.5244 min(c * 0.7664, 0.1408) h); + --ig-primary-500-contrast: hsla(from color(from var(--ig-primary-500) var(--y-contrast)) h 0 l/1); + --ig-primary-600: oklch(from var(--ig-primary-seed) 0.4535 min(c * 0.6602, 0.1213) h); + --ig-primary-600-contrast: hsla(from color(from var(--ig-primary-600) var(--y-contrast)) h 0 l/1); + --ig-primary-700: oklch(from var(--ig-primary-seed) 0.3818 min(c * 0.5301, 0.0974) h); + --ig-primary-700-contrast: hsla(from color(from var(--ig-primary-700) var(--y-contrast)) h 0 l/1); + --ig-primary-800: oklch(from var(--ig-primary-seed) 0.3034 min(c * 0.3808, 0.0699) h); + --ig-primary-800-contrast: hsla(from color(from var(--ig-primary-800) var(--y-contrast)) h 0 l/1); + --ig-primary-900: oklch(from var(--ig-primary-seed) 0.2004 min(c * 0.2097, 0.0385) h); + --ig-primary-900-contrast: hsla(from color(from var(--ig-primary-900) var(--y-contrast)) h 0 l/1); + --ig-primary-seed: #09f; + --ig-primary-seed-contrast: hsla(from color(from var(--ig-primary-seed) var(--y-contrast)) h 0 l/1); + --ig-primary-A100: oklch(from var(--ig-primary-seed) 0.889 min(c * 0.3037, 0.0558) calc(h + 2.817)); + --ig-primary-A100-contrast: hsla(from color(from var(--ig-primary-A100) var(--y-contrast)) h 0 l/1); + --ig-primary-A200: oklch(from var(--ig-primary-seed) 0.7075 min(c * 0.8606, 0.1581) calc(h + 2.149)); + --ig-primary-A200-contrast: hsla(from color(from var(--ig-primary-A200) var(--y-contrast)) h 0 l/1); + --ig-primary-A400: oklch(from var(--ig-primary-seed) 0.5847 min(c * 0.8681, 0.1595) h); + --ig-primary-A400-contrast: hsla(from color(from var(--ig-primary-A400) var(--y-contrast)) h 0 l/1); + --ig-primary-A700: oklch(from var(--ig-primary-seed) 0.4923 min(c * 0.7355, 0.1351) h); + --ig-primary-A700-contrast: hsla(from color(from var(--ig-primary-A700) var(--y-contrast)) h 0 l/1); + --ig-secondary-50: oklch(from var(--ig-secondary-seed) 0.9463 min(c * 0.1097, 0.0141) calc(h + 6.926)); + --ig-secondary-50-contrast: hsla(from color(from var(--ig-secondary-50) var(--y-contrast)) h 0 l/1); + --ig-secondary-100: oklch(from var(--ig-secondary-seed) 0.8515 min(c * 0.3639, 0.0467) calc(h + 5.03)); + --ig-secondary-100-contrast: hsla(from color(from var(--ig-secondary-100) var(--y-contrast)) h 0 l/1); + --ig-secondary-200: oklch(from var(--ig-secondary-seed) 0.7653 min(c * 0.6343, 0.0814) calc(h + 3.307)); + --ig-secondary-200-contrast: hsla(from color(from var(--ig-secondary-200) var(--y-contrast)) h 0 l/1); + --ig-secondary-300: oklch(from var(--ig-secondary-seed) 0.6845 min(c * 0.8792, 0.1128) calc(h + 1.691)); + --ig-secondary-300-contrast: hsla(from color(from var(--ig-secondary-300) var(--y-contrast)) h 0 l/1); + --ig-secondary-400: oklch(from var(--ig-secondary-seed) 0.6101 min(c * 1.0415, 0.1336) calc(h + 0.203)); + --ig-secondary-400-contrast: hsla(from color(from var(--ig-secondary-400) var(--y-contrast)) h 0 l/1); + --ig-secondary-500: oklch(from var(--ig-secondary-seed) 0.5386 min(c * 1.0863, 0.1394) h); + --ig-secondary-500-contrast: hsla(from color(from var(--ig-secondary-500) var(--y-contrast)) h 0 l/1); + --ig-secondary-600: oklch(from var(--ig-secondary-seed) 0.4674 min(c * 1.0083, 0.1294) h); + --ig-secondary-600-contrast: hsla(from color(from var(--ig-secondary-600) var(--y-contrast)) h 0 l/1); + --ig-secondary-700: oklch(from var(--ig-secondary-seed) 0.3933 min(c * 0.835, 0.1071) h); + --ig-secondary-700-contrast: hsla(from color(from var(--ig-secondary-700) var(--y-contrast)) h 0 l/1); + --ig-secondary-800: oklch(from var(--ig-secondary-seed) 0.3118 min(c * 0.605, 0.0776) h); + --ig-secondary-800-contrast: hsla(from color(from var(--ig-secondary-800) var(--y-contrast)) h 0 l/1); + --ig-secondary-900: oklch(from var(--ig-secondary-seed) 0.205 min(c * 0.3327, 0.0427) h); + --ig-secondary-900-contrast: hsla(from color(from var(--ig-secondary-900) var(--y-contrast)) h 0 l/1); + --ig-secondary-seed: #97c; + --ig-secondary-seed-contrast: hsla(from color(from var(--ig-secondary-seed) var(--y-contrast)) h 0 l/1); + --ig-secondary-A100: oklch(from var(--ig-secondary-seed) 0.8923 min(c * 0.5334, 0.0684) calc(h + 6.928)); + --ig-secondary-A100-contrast: hsla(from color(from var(--ig-secondary-A100) var(--y-contrast)) h 0 l/1); + --ig-secondary-A200: oklch(from var(--ig-secondary-seed) 0.727 min(c * 1.3792, 0.177) calc(h + 3.291)); + --ig-secondary-A200-contrast: hsla(from color(from var(--ig-secondary-A200) var(--y-contrast)) h 0 l/1); + --ig-secondary-A400: oklch(from var(--ig-secondary-seed) 0.6148 min(c * 1.9646, 0.2521) calc(h + 0.357)); + --ig-secondary-A400-contrast: hsla(from color(from var(--ig-secondary-A400) var(--y-contrast)) h 0 l/1); + --ig-secondary-A700: oklch(from var(--ig-secondary-seed) 0.5283 min(c * 2.0936, 0.2686) h); + --ig-secondary-A700-contrast: hsla(from color(from var(--ig-secondary-A700) var(--y-contrast)) h 0 l/1); + --ig-gray-50: oklch(from var(--ig-gray-seed) 0.9404 0 0); + --ig-gray-50-contrast: hsla(from color(from var(--ig-gray-50) var(--y-contrast)) h 0 l/1); + --ig-gray-100: oklch(from var(--ig-gray-seed) 0.8448 0 0); + --ig-gray-100-contrast: hsla(from color(from var(--ig-gray-100) var(--y-contrast)) h 0 l/1); + --ig-gray-200: oklch(from var(--ig-gray-seed) 0.7562 0 0); + --ig-gray-200-contrast: hsla(from color(from var(--ig-gray-200) var(--y-contrast)) h 0 l/1); + --ig-gray-300: oklch(from var(--ig-gray-seed) 0.6749 0 0); + --ig-gray-300-contrast: hsla(from color(from var(--ig-gray-300) var(--y-contrast)) h 0 l/1); + --ig-gray-400: oklch(from var(--ig-gray-seed) 0.598 0 0); + --ig-gray-400-contrast: hsla(from color(from var(--ig-gray-400) var(--y-contrast)) h 0 l/1); + --ig-gray-500: oklch(from var(--ig-gray-seed) 0.5248 0 0); + --ig-gray-500-contrast: hsla(from color(from var(--ig-gray-500) var(--y-contrast)) h 0 l/1); + --ig-gray-600: oklch(from var(--ig-gray-seed) 0.4539 0 0); + --ig-gray-600-contrast: hsla(from color(from var(--ig-gray-600) var(--y-contrast)) h 0 l/1); + --ig-gray-700: oklch(from var(--ig-gray-seed) 0.3822 0 0); + --ig-gray-700-contrast: hsla(from color(from var(--ig-gray-700) var(--y-contrast)) h 0 l/1); + --ig-gray-800: oklch(from var(--ig-gray-seed) 0.304 0 0); + --ig-gray-800-contrast: hsla(from color(from var(--ig-gray-800) var(--y-contrast)) h 0 l/1); + --ig-gray-900: oklch(from var(--ig-gray-seed) 0.2009 0 0); + --ig-gray-900-contrast: hsla(from color(from var(--ig-gray-900) var(--y-contrast)) h 0 l/1); + --ig-gray-seed: #000; + --ig-gray-seed-contrast: hsla(from color(from var(--ig-gray-seed) var(--y-contrast)) h 0 l/1); + --ig-surface-50: hsl(from var(--ig-surface-500) h calc(s * 1.23) calc(l * 1.78)); + --ig-surface-50-contrast: hsla(from color(from var(--ig-surface-50) var(--y-contrast)) h 0 l/1); + --ig-surface-100: hsl(from var(--ig-surface-500) h calc(s * 0.8) calc(l * 1.66)); + --ig-surface-100-contrast: hsla(from color(from var(--ig-surface-100) var(--y-contrast)) h 0 l/1); + --ig-surface-200: hsl(from var(--ig-surface-500) h calc(s * 0.64) calc(l * 1.43)); + --ig-surface-200-contrast: hsla(from color(from var(--ig-surface-200) var(--y-contrast)) h 0 l/1); + --ig-surface-300: hsl(from var(--ig-surface-500) h calc(s * 0.73) calc(l * 1.19)); + --ig-surface-300-contrast: hsla(from color(from var(--ig-surface-300) var(--y-contrast)) h 0 l/1); + --ig-surface-400: hsl(from var(--ig-surface-500) h calc(s * 0.875) calc(l * 1.08)); + --ig-surface-400-contrast: hsla(from color(from var(--ig-surface-400) var(--y-contrast)) h 0 l/1); + --ig-surface-500: #fff; + --ig-surface-500-contrast: hsla(from color(from var(--ig-surface-500) var(--y-contrast)) h 0 l/1); + --ig-surface-600: hsl(from var(--ig-surface-500) h calc(s * 1.26) calc(l * 0.89)); + --ig-surface-600-contrast: hsla(from color(from var(--ig-surface-600) var(--y-contrast)) h 0 l/1); + --ig-surface-700: hsl(from var(--ig-surface-500) h calc(s * 1.26) calc(l * 0.81)); + --ig-surface-700-contrast: hsla(from color(from var(--ig-surface-700) var(--y-contrast)) h 0 l/1); + --ig-surface-800: hsl(from var(--ig-surface-500) h calc(s * 1.26) calc(l * 0.73)); + --ig-surface-800-contrast: hsla(from color(from var(--ig-surface-800) var(--y-contrast)) h 0 l/1); + --ig-surface-900: hsl(from var(--ig-surface-500) h calc(s * 1.26) calc(l * 0.64)); + --ig-surface-900-contrast: hsla(from color(from var(--ig-surface-900) var(--y-contrast)) h 0 l/1); + --ig-surface-seed: #fff; + --ig-surface-seed-contrast: hsla(from color(from var(--ig-surface-seed) var(--y-contrast)) h 0 l/1); + --ig-surface-A100: hsl(from var(--ig-surface-500) h calc(s * 1.23) calc(l * 1.34)); + --ig-surface-A100-contrast: hsla(from color(from var(--ig-surface-A100) var(--y-contrast)) h 0 l/1); + --ig-surface-A200: hsl(from var(--ig-surface-500) h calc(s * 1.22) calc(l * 1.16)); + --ig-surface-A200-contrast: hsla(from color(from var(--ig-surface-A200) var(--y-contrast)) h 0 l/1); + --ig-surface-A400: hsl(from var(--ig-surface-500) h calc(s * 1.23) calc(l * 0.91)); + --ig-surface-A400-contrast: hsla(from color(from var(--ig-surface-A400) var(--y-contrast)) h 0 l/1); + --ig-surface-A700: hsl(from var(--ig-surface-500) h calc(s * 1.23) calc(l * 0.65)); + --ig-surface-A700-contrast: hsla(from color(from var(--ig-surface-A700) var(--y-contrast)) h 0 l/1); + --ig-info-50: oklch(from var(--ig-info-seed) 0.9453 min(c * 0.0689, 0.0216) calc(h + 13.046)); + --ig-info-50-contrast: hsla(from color(from var(--ig-info-50) var(--y-contrast)) h 0 l/1); + --ig-info-100: oklch(from var(--ig-info-seed) 0.8466 min(c * 0.232, 0.0727) calc(h + 9.788)); + --ig-info-100-contrast: hsla(from color(from var(--ig-info-100) var(--y-contrast)) h 0 l/1); + --ig-info-200: oklch(from var(--ig-info-seed) 0.7599 min(c * 0.3904, 0.1223) calc(h + 6.738)); + --ig-info-200-contrast: hsla(from color(from var(--ig-info-200) var(--y-contrast)) h 0 l/1); + --ig-info-300: oklch(from var(--ig-info-seed) 0.6808 min(c * 0.5346, 0.1674) calc(h + 4.112)); + --ig-info-300-contrast: hsla(from color(from var(--ig-info-300) var(--y-contrast)) h 0 l/1); + --ig-info-400: oklch(from var(--ig-info-seed) 0.6081 min(c * 0.675, 0.2114) calc(h + 1.897)); + --ig-info-400-contrast: hsla(from color(from var(--ig-info-400) var(--y-contrast)) h 0 l/1); + --ig-info-500: oklch(from var(--ig-info-seed) 0.5394 min(c * 0.7548, 0.2364) h); + --ig-info-500-contrast: hsla(from color(from var(--ig-info-500) var(--y-contrast)) h 0 l/1); + --ig-info-600: oklch(from var(--ig-info-seed) 0.4709 min(c * 0.7545, 0.2363) h); + --ig-info-600-contrast: hsla(from color(from var(--ig-info-600) var(--y-contrast)) h 0 l/1); + --ig-info-700: oklch(from var(--ig-info-seed) 0.3981 min(c * 0.6608, 0.207) h); + --ig-info-700-contrast: hsla(from color(from var(--ig-info-700) var(--y-contrast)) h 0 l/1); + --ig-info-800: oklch(from var(--ig-info-seed) 0.3148 min(c * 0.4898, 0.1534) h); + --ig-info-800-contrast: hsla(from color(from var(--ig-info-800) var(--y-contrast)) h 0 l/1); + --ig-info-900: oklch(from var(--ig-info-seed) 0.2057 min(c * 0.2698, 0.0845) h); + --ig-info-900-contrast: hsla(from color(from var(--ig-info-900) var(--y-contrast)) h 0 l/1); + --ig-info-seed: blue; + --ig-info-seed-contrast: hsla(from color(from var(--ig-info-seed) var(--y-contrast)) h 0 l/1); + --ig-info-A100: oklch(from var(--ig-info-seed) 0.8909 min(c * 0.1693, 0.053) calc(h + 10.08)); + --ig-info-A100-contrast: hsla(from color(from var(--ig-info-A100) var(--y-contrast)) h 0 l/1); + --ig-info-A200: oklch(from var(--ig-info-seed) 0.7136 min(c * 0.4738, 0.1484) calc(h + 4.928)); + --ig-info-A200-contrast: hsla(from color(from var(--ig-info-A200) var(--y-contrast)) h 0 l/1); + --ig-info-A400: oklch(from var(--ig-info-seed) 0.5968 min(c * 0.6976, 0.2185) calc(h + 1.491)); + --ig-info-A400-contrast: hsla(from color(from var(--ig-info-A400) var(--y-contrast)) h 0 l/1); + --ig-info-A700: oklch(from var(--ig-info-seed) 0.512 min(c * 0.836, 0.2619) h); + --ig-info-A700-contrast: hsla(from color(from var(--ig-info-A700) var(--y-contrast)) h 0 l/1); + --ig-success-50: oklch(from var(--ig-success-seed) 0.9305 min(c * 0.5993, 0.106) h); + --ig-success-50-contrast: hsla(from color(from var(--ig-success-50) var(--y-contrast)) h 0 l/1); + --ig-success-100: oklch(from var(--ig-success-seed) 0.8227 min(c * 1.2544, 0.2219) h); + --ig-success-100-contrast: hsla(from color(from var(--ig-success-100) var(--y-contrast)) h 0 l/1); + --ig-success-200: oklch(from var(--ig-success-seed) 0.7358 min(c * 1.307, 0.2312) h); + --ig-success-200-contrast: hsla(from color(from var(--ig-success-200) var(--y-contrast)) h 0 l/1); + --ig-success-300: oklch(from var(--ig-success-seed) 0.6543 min(c * 1.2323, 0.2179) h); + --ig-success-300-contrast: hsla(from color(from var(--ig-success-300) var(--y-contrast)) h 0 l/1); + --ig-success-400: oklch(from var(--ig-success-seed) 0.5793 min(c * 1.1126, 0.1968) h); + --ig-success-400-contrast: hsla(from color(from var(--ig-success-400) var(--y-contrast)) h 0 l/1); + --ig-success-500: oklch(from var(--ig-success-seed) 0.5083 min(c * 0.9766, 0.1727) h); + --ig-success-500-contrast: hsla(from color(from var(--ig-success-500) var(--y-contrast)) h 0 l/1); + --ig-success-600: oklch(from var(--ig-success-seed) 0.4397 min(c * 0.8297, 0.1467) h); + --ig-success-600-contrast: hsla(from color(from var(--ig-success-600) var(--y-contrast)) h 0 l/1); + --ig-success-700: oklch(from var(--ig-success-seed) 0.371 min(c * 0.6646, 0.1175) h); + --ig-success-700-contrast: hsla(from color(from var(--ig-success-700) var(--y-contrast)) h 0 l/1); + --ig-success-800: oklch(from var(--ig-success-seed) 0.2958 min(c * 0.4781, 0.0846) h); + --ig-success-800-contrast: hsla(from color(from var(--ig-success-800) var(--y-contrast)) h 0 l/1); + --ig-success-900: oklch(from var(--ig-success-seed) 0.1964 min(c * 0.2645, 0.0468) h); + --ig-success-900-contrast: hsla(from color(from var(--ig-success-900) var(--y-contrast)) h 0 l/1); + --ig-success-seed: green; + --ig-success-seed-contrast: hsla(from color(from var(--ig-success-seed) var(--y-contrast)) h 0 l/1); + --ig-success-A100: oklch(from var(--ig-success-seed) 0.8632 min(c * 1.5429, 0.2729) h); + --ig-success-A100-contrast: hsla(from color(from var(--ig-success-A100) var(--y-contrast)) h 0 l/1); + --ig-success-A200: oklch(from var(--ig-success-seed) 0.686 min(c * 1.3198, 0.2334) h); + --ig-success-A200-contrast: hsla(from color(from var(--ig-success-A200) var(--y-contrast)) h 0 l/1); + --ig-success-A400: oklch(from var(--ig-success-seed) 0.5668 min(c * 1.0906, 0.1929) h); + --ig-success-A400-contrast: hsla(from color(from var(--ig-success-A400) var(--y-contrast)) h 0 l/1); + --ig-success-A700: oklch(from var(--ig-success-seed) 0.4769 min(c * 0.9176, 0.1623) h); + --ig-success-A700-contrast: hsla(from color(from var(--ig-success-A700) var(--y-contrast)) h 0 l/1); + --ig-warn-50: oklch(from var(--ig-warn-seed) 0.946 min(c * 0.1822, 0.0312) h); + --ig-warn-50-contrast: hsla(from color(from var(--ig-warn-50) var(--y-contrast)) h 0 l/1); + --ig-warn-100: oklch(from var(--ig-warn-seed) 0.8514 min(c * 0.5754, 0.0984) h); + --ig-warn-100-contrast: hsla(from color(from var(--ig-warn-100) var(--y-contrast)) h 0 l/1); + --ig-warn-200: oklch(from var(--ig-warn-seed) 0.7625 min(c * 0.8096, 0.1385) h); + --ig-warn-200-contrast: hsla(from color(from var(--ig-warn-200) var(--y-contrast)) h 0 l/1); + --ig-warn-300: oklch(from var(--ig-warn-seed) 0.6821 min(c * 0.8243, 0.141) h); + --ig-warn-300-contrast: hsla(from color(from var(--ig-warn-300) var(--y-contrast)) h 0 l/1); + --ig-warn-400: oklch(from var(--ig-warn-seed) 0.6047 min(c * 0.757, 0.1295) h); + --ig-warn-400-contrast: hsla(from color(from var(--ig-warn-400) var(--y-contrast)) h 0 l/1); + --ig-warn-500: oklch(from var(--ig-warn-seed) 0.5307 min(c * 0.6674, 0.1141) h); + --ig-warn-500-contrast: hsla(from color(from var(--ig-warn-500) var(--y-contrast)) h 0 l/1); + --ig-warn-600: oklch(from var(--ig-warn-seed) 0.4588 min(c * 0.5673, 0.097) h); + --ig-warn-600-contrast: hsla(from color(from var(--ig-warn-600) var(--y-contrast)) h 0 l/1); + --ig-warn-700: oklch(from var(--ig-warn-seed) 0.3861 min(c * 0.4534, 0.0775) h); + --ig-warn-700-contrast: hsla(from color(from var(--ig-warn-700) var(--y-contrast)) h 0 l/1); + --ig-warn-800: oklch(from var(--ig-warn-seed) 0.3067 min(c * 0.3249, 0.0556) h); + --ig-warn-800-contrast: hsla(from color(from var(--ig-warn-800) var(--y-contrast)) h 0 l/1); + --ig-warn-900: oklch(from var(--ig-warn-seed) 0.2023 min(c * 0.1786, 0.0306) h); + --ig-warn-900-contrast: hsla(from color(from var(--ig-warn-900) var(--y-contrast)) h 0 l/1); + --ig-warn-seed: orange; + --ig-warn-seed-contrast: hsla(from color(from var(--ig-warn-seed) var(--y-contrast)) h 0 l/1); + --ig-warn-A100: oklch(from var(--ig-warn-seed) 0.8929 min(c * 0.496, 0.0848) calc(h + 1.551)); + --ig-warn-A100-contrast: hsla(from color(from var(--ig-warn-A100) var(--y-contrast)) h 0 l/1); + --ig-warn-A200: oklch(from var(--ig-warn-seed) 0.7161 min(c * 0.8994, 0.1538) h); + --ig-warn-A200-contrast: hsla(from color(from var(--ig-warn-A200) var(--y-contrast)) h 0 l/1); + --ig-warn-A400: oklch(from var(--ig-warn-seed) 0.5917 min(c * 0.7464, 0.1277) h); + --ig-warn-A400-contrast: hsla(from color(from var(--ig-warn-A400) var(--y-contrast)) h 0 l/1); + --ig-warn-A700: oklch(from var(--ig-warn-seed) 0.4975 min(c * 0.6276, 0.1073) h); + --ig-warn-A700-contrast: hsla(from color(from var(--ig-warn-A700) var(--y-contrast)) h 0 l/1); + --ig-error-50: oklch(from var(--ig-error-seed) 0.9437 min(c * 0.106, 0.0273) h); + --ig-error-50-contrast: hsla(from color(from var(--ig-error-50) var(--y-contrast)) h 0 l/1); + --ig-error-100: oklch(from var(--ig-error-seed) 0.8531 min(c * 0.3108, 0.0801) calc(h + 0.399)); + --ig-error-100-contrast: hsla(from color(from var(--ig-error-100) var(--y-contrast)) h 0 l/1); + --ig-error-200: oklch(from var(--ig-error-seed) 0.7729 min(c * 0.5202, 0.134) calc(h + 0.309)); + --ig-error-200-contrast: hsla(from color(from var(--ig-error-200) var(--y-contrast)) h 0 l/1); + --ig-error-300: oklch(from var(--ig-error-seed) 0.6976 min(c * 0.7485, 0.1929) h); + --ig-error-300-contrast: hsla(from color(from var(--ig-error-300) var(--y-contrast)) h 0 l/1); + --ig-error-400: oklch(from var(--ig-error-seed) 0.6235 min(c * 0.8417, 0.2169) h); + --ig-error-400-contrast: hsla(from color(from var(--ig-error-400) var(--y-contrast)) h 0 l/1); + --ig-error-500: oklch(from var(--ig-error-seed) 0.5497 min(c * 0.823, 0.2121) h); + --ig-error-500-contrast: hsla(from color(from var(--ig-error-500) var(--y-contrast)) h 0 l/1); + --ig-error-600: oklch(from var(--ig-error-seed) 0.4764 min(c * 0.7291, 0.1879) h); + --ig-error-600-contrast: hsla(from color(from var(--ig-error-600) var(--y-contrast)) h 0 l/1); + --ig-error-700: oklch(from var(--ig-error-seed) 0.4004 min(c * 0.59, 0.152) h); + --ig-error-700-contrast: hsla(from color(from var(--ig-error-700) var(--y-contrast)) h 0 l/1); + --ig-error-800: oklch(from var(--ig-error-seed) 0.3169 min(c * 0.4232, 0.1091) h); + --ig-error-800-contrast: hsla(from color(from var(--ig-error-800) var(--y-contrast)) h 0 l/1); + --ig-error-900: oklch(from var(--ig-error-seed) 0.2078 min(c * 0.2316, 0.0597) h); + --ig-error-900-contrast: hsla(from color(from var(--ig-error-900) var(--y-contrast)) h 0 l/1); + --ig-error-seed: red; + --ig-error-seed-contrast: hsla(from color(from var(--ig-error-seed) var(--y-contrast)) h 0 l/1); + --ig-error-A100: oklch(from var(--ig-error-seed) 0.902 min(c * 0.1992, 0.0513) calc(h + 2.141)); + --ig-error-A100-contrast: hsla(from color(from var(--ig-error-A100) var(--y-contrast)) h 0 l/1); + --ig-error-A200: oklch(from var(--ig-error-seed) 0.7258 min(c * 0.6599, 0.17) calc(h + 0.27)); + --ig-error-A200-contrast: hsla(from color(from var(--ig-error-A200) var(--y-contrast)) h 0 l/1); + --ig-error-A400: oklch(from var(--ig-error-seed) 0.6128 min(c * 0.9204, 0.2372) h); + --ig-error-A400-contrast: hsla(from color(from var(--ig-error-A400) var(--y-contrast)) h 0 l/1); + --ig-error-A700: oklch(from var(--ig-error-seed) 0.518 min(c * 0.8222, 0.2119) h); + --ig-error-A700-contrast: hsla(from color(from var(--ig-error-A700) var(--y-contrast)) h 0 l/1); +} + +/* END_OUTPUT */ +/* CONTAINED */ +:root { + --ig-primary-50: oklch(from var(--ig-primary-seed) 0.9402 min(c * 0.1264, 0.0232) calc(h + 6.804)); + --ig-primary-100: oklch(from var(--ig-primary-seed) 0.844 min(c * 0.3941, 0.0724) calc(h + 4.879)); + --ig-primary-200: oklch(from var(--ig-primary-seed) 0.7551 min(c * 0.6602, 0.1213) calc(h + 3.103)); + --ig-primary-300: oklch(from var(--ig-primary-seed) 0.6742 min(c * 0.8212, 0.1508) calc(h + 1.484)); + --ig-primary-400: oklch(from var(--ig-primary-seed) 0.5973 min(c * 0.8367, 0.1537) h); + --ig-primary-500: oklch(from var(--ig-primary-seed) 0.5244 min(c * 0.7664, 0.1408) h); + --ig-primary-600: oklch(from var(--ig-primary-seed) 0.4535 min(c * 0.6602, 0.1213) h); + --ig-primary-700: oklch(from var(--ig-primary-seed) 0.3818 min(c * 0.5301, 0.0974) h); + --ig-primary-800: oklch(from var(--ig-primary-seed) 0.3034 min(c * 0.3808, 0.0699) h); + --ig-primary-900: oklch(from var(--ig-primary-seed) 0.2004 min(c * 0.2097, 0.0385) h); + --ig-primary-seed: #09f; + --ig-primary-A100: oklch(from var(--ig-primary-seed) 0.889 min(c * 0.3037, 0.0558) calc(h + 2.817)); + --ig-primary-A200: oklch(from var(--ig-primary-seed) 0.7075 min(c * 0.8606, 0.1581) calc(h + 2.149)); + --ig-primary-A400: oklch(from var(--ig-primary-seed) 0.5847 min(c * 0.8681, 0.1595) h); + --ig-primary-A700: oklch(from var(--ig-primary-seed) 0.4923 min(c * 0.7355, 0.1351) h); + --ig-secondary-50: oklch(from var(--ig-secondary-seed) 0.9463 min(c * 0.1097, 0.0141) calc(h + 6.926)); + --ig-secondary-100: oklch(from var(--ig-secondary-seed) 0.8515 min(c * 0.3639, 0.0467) calc(h + 5.03)); + --ig-secondary-200: oklch(from var(--ig-secondary-seed) 0.7653 min(c * 0.6343, 0.0814) calc(h + 3.307)); + --ig-secondary-300: oklch(from var(--ig-secondary-seed) 0.6845 min(c * 0.8792, 0.1128) calc(h + 1.691)); + --ig-secondary-400: oklch(from var(--ig-secondary-seed) 0.6101 min(c * 1.0415, 0.1336) calc(h + 0.203)); + --ig-secondary-500: oklch(from var(--ig-secondary-seed) 0.5386 min(c * 1.0863, 0.1394) h); + --ig-secondary-600: oklch(from var(--ig-secondary-seed) 0.4674 min(c * 1.0083, 0.1294) h); + --ig-secondary-700: oklch(from var(--ig-secondary-seed) 0.3933 min(c * 0.835, 0.1071) h); + --ig-secondary-800: oklch(from var(--ig-secondary-seed) 0.3118 min(c * 0.605, 0.0776) h); + --ig-secondary-900: oklch(from var(--ig-secondary-seed) 0.205 min(c * 0.3327, 0.0427) h); + --ig-secondary-seed: #97c; + --ig-secondary-A100: oklch(from var(--ig-secondary-seed) 0.8923 min(c * 0.5334, 0.0684) calc(h + 6.928)); + --ig-secondary-A200: oklch(from var(--ig-secondary-seed) 0.727 min(c * 1.3792, 0.177) calc(h + 3.291)); + --ig-secondary-A400: oklch(from var(--ig-secondary-seed) 0.6148 min(c * 1.9646, 0.2521) calc(h + 0.357)); + --ig-secondary-A700: oklch(from var(--ig-secondary-seed) 0.5283 min(c * 2.0936, 0.2686) h); + --ig-gray-50: oklch(from var(--ig-gray-seed) 0.9404 0 0); + --ig-gray-100: oklch(from var(--ig-gray-seed) 0.8448 0 0); + --ig-gray-200: oklch(from var(--ig-gray-seed) 0.7562 0 0); + --ig-gray-300: oklch(from var(--ig-gray-seed) 0.6749 0 0); + --ig-gray-400: oklch(from var(--ig-gray-seed) 0.598 0 0); + --ig-gray-500: oklch(from var(--ig-gray-seed) 0.5248 0 0); + --ig-gray-600: oklch(from var(--ig-gray-seed) 0.4539 0 0); + --ig-gray-700: oklch(from var(--ig-gray-seed) 0.3822 0 0); + --ig-gray-800: oklch(from var(--ig-gray-seed) 0.304 0 0); + --ig-gray-900: oklch(from var(--ig-gray-seed) 0.2009 0 0); + --ig-gray-seed: #000; + --ig-surface-50: hsl(from var(--ig-surface-500) h calc(s * 1.23) calc(l * 1.78)); + --ig-surface-100: hsl(from var(--ig-surface-500) h calc(s * 0.8) calc(l * 1.66)); + --ig-surface-200: hsl(from var(--ig-surface-500) h calc(s * 0.64) calc(l * 1.43)); + --ig-surface-300: hsl(from var(--ig-surface-500) h calc(s * 0.73) calc(l * 1.19)); + --ig-surface-400: hsl(from var(--ig-surface-500) h calc(s * 0.875) calc(l * 1.08)); + --ig-surface-500: #fff; + --ig-surface-600: hsl(from var(--ig-surface-500) h calc(s * 1.26) calc(l * 0.89)); + --ig-surface-700: hsl(from var(--ig-surface-500) h calc(s * 1.26) calc(l * 0.81)); + --ig-surface-800: hsl(from var(--ig-surface-500) h calc(s * 1.26) calc(l * 0.73)); + --ig-surface-900: hsl(from var(--ig-surface-500) h calc(s * 1.26) calc(l * 0.64)); + --ig-surface-seed: #fff; + --ig-surface-A100: hsl(from var(--ig-surface-500) h calc(s * 1.23) calc(l * 1.34)); + --ig-surface-A200: hsl(from var(--ig-surface-500) h calc(s * 1.22) calc(l * 1.16)); + --ig-surface-A400: hsl(from var(--ig-surface-500) h calc(s * 1.23) calc(l * 0.91)); + --ig-surface-A700: hsl(from var(--ig-surface-500) h calc(s * 1.23) calc(l * 0.65)); + --ig-info-50: oklch(from var(--ig-info-seed) 0.9453 min(c * 0.0689, 0.0216) calc(h + 13.046)); + --ig-info-100: oklch(from var(--ig-info-seed) 0.8466 min(c * 0.232, 0.0727) calc(h + 9.788)); + --ig-info-200: oklch(from var(--ig-info-seed) 0.7599 min(c * 0.3904, 0.1223) calc(h + 6.738)); + --ig-info-300: oklch(from var(--ig-info-seed) 0.6808 min(c * 0.5346, 0.1674) calc(h + 4.112)); + --ig-info-400: oklch(from var(--ig-info-seed) 0.6081 min(c * 0.675, 0.2114) calc(h + 1.897)); + --ig-info-500: oklch(from var(--ig-info-seed) 0.5394 min(c * 0.7548, 0.2364) h); + --ig-info-600: oklch(from var(--ig-info-seed) 0.4709 min(c * 0.7545, 0.2363) h); + --ig-info-700: oklch(from var(--ig-info-seed) 0.3981 min(c * 0.6608, 0.207) h); + --ig-info-800: oklch(from var(--ig-info-seed) 0.3148 min(c * 0.4898, 0.1534) h); + --ig-info-900: oklch(from var(--ig-info-seed) 0.2057 min(c * 0.2698, 0.0845) h); + --ig-info-seed: blue; + --ig-info-A100: oklch(from var(--ig-info-seed) 0.8909 min(c * 0.1693, 0.053) calc(h + 10.08)); + --ig-info-A200: oklch(from var(--ig-info-seed) 0.7136 min(c * 0.4738, 0.1484) calc(h + 4.928)); + --ig-info-A400: oklch(from var(--ig-info-seed) 0.5968 min(c * 0.6976, 0.2185) calc(h + 1.491)); + --ig-info-A700: oklch(from var(--ig-info-seed) 0.512 min(c * 0.836, 0.2619) h); + --ig-success-50: oklch(from var(--ig-success-seed) 0.9305 min(c * 0.5993, 0.106) h); + --ig-success-100: oklch(from var(--ig-success-seed) 0.8227 min(c * 1.2544, 0.2219) h); + --ig-success-200: oklch(from var(--ig-success-seed) 0.7358 min(c * 1.307, 0.2312) h); + --ig-success-300: oklch(from var(--ig-success-seed) 0.6543 min(c * 1.2323, 0.2179) h); + --ig-success-400: oklch(from var(--ig-success-seed) 0.5793 min(c * 1.1126, 0.1968) h); + --ig-success-500: oklch(from var(--ig-success-seed) 0.5083 min(c * 0.9766, 0.1727) h); + --ig-success-600: oklch(from var(--ig-success-seed) 0.4397 min(c * 0.8297, 0.1467) h); + --ig-success-700: oklch(from var(--ig-success-seed) 0.371 min(c * 0.6646, 0.1175) h); + --ig-success-800: oklch(from var(--ig-success-seed) 0.2958 min(c * 0.4781, 0.0846) h); + --ig-success-900: oklch(from var(--ig-success-seed) 0.1964 min(c * 0.2645, 0.0468) h); + --ig-success-seed: green; + --ig-success-A100: oklch(from var(--ig-success-seed) 0.8632 min(c * 1.5429, 0.2729) h); + --ig-success-A200: oklch(from var(--ig-success-seed) 0.686 min(c * 1.3198, 0.2334) h); + --ig-success-A400: oklch(from var(--ig-success-seed) 0.5668 min(c * 1.0906, 0.1929) h); + --ig-success-A700: oklch(from var(--ig-success-seed) 0.4769 min(c * 0.9176, 0.1623) h); + --ig-warn-50: oklch(from var(--ig-warn-seed) 0.946 min(c * 0.1822, 0.0312) h); + --ig-warn-100: oklch(from var(--ig-warn-seed) 0.8514 min(c * 0.5754, 0.0984) h); + --ig-warn-200: oklch(from var(--ig-warn-seed) 0.7625 min(c * 0.8096, 0.1385) h); + --ig-warn-300: oklch(from var(--ig-warn-seed) 0.6821 min(c * 0.8243, 0.141) h); + --ig-warn-400: oklch(from var(--ig-warn-seed) 0.6047 min(c * 0.757, 0.1295) h); + --ig-warn-500: oklch(from var(--ig-warn-seed) 0.5307 min(c * 0.6674, 0.1141) h); + --ig-warn-600: oklch(from var(--ig-warn-seed) 0.4588 min(c * 0.5673, 0.097) h); + --ig-warn-700: oklch(from var(--ig-warn-seed) 0.3861 min(c * 0.4534, 0.0775) h); + --ig-warn-800: oklch(from var(--ig-warn-seed) 0.3067 min(c * 0.3249, 0.0556) h); + --ig-warn-900: oklch(from var(--ig-warn-seed) 0.2023 min(c * 0.1786, 0.0306) h); + --ig-warn-seed: orange; + --ig-warn-A100: oklch(from var(--ig-warn-seed) 0.8929 min(c * 0.496, 0.0848) calc(h + 1.551)); + --ig-warn-A200: oklch(from var(--ig-warn-seed) 0.7161 min(c * 0.8994, 0.1538) h); + --ig-warn-A400: oklch(from var(--ig-warn-seed) 0.5917 min(c * 0.7464, 0.1277) h); + --ig-warn-A700: oklch(from var(--ig-warn-seed) 0.4975 min(c * 0.6276, 0.1073) h); + --ig-error-50: oklch(from var(--ig-error-seed) 0.9437 min(c * 0.106, 0.0273) h); + --ig-error-100: oklch(from var(--ig-error-seed) 0.8531 min(c * 0.3108, 0.0801) calc(h + 0.399)); + --ig-error-200: oklch(from var(--ig-error-seed) 0.7729 min(c * 0.5202, 0.134) calc(h + 0.309)); + --ig-error-300: oklch(from var(--ig-error-seed) 0.6976 min(c * 0.7485, 0.1929) h); + --ig-error-400: oklch(from var(--ig-error-seed) 0.6235 min(c * 0.8417, 0.2169) h); + --ig-error-500: oklch(from var(--ig-error-seed) 0.5497 min(c * 0.823, 0.2121) h); + --ig-error-600: oklch(from var(--ig-error-seed) 0.4764 min(c * 0.7291, 0.1879) h); + --ig-error-700: oklch(from var(--ig-error-seed) 0.4004 min(c * 0.59, 0.152) h); + --ig-error-800: oklch(from var(--ig-error-seed) 0.3169 min(c * 0.4232, 0.1091) h); + --ig-error-900: oklch(from var(--ig-error-seed) 0.2078 min(c * 0.2316, 0.0597) h); + --ig-error-seed: red; + --ig-error-A100: oklch(from var(--ig-error-seed) 0.902 min(c * 0.1992, 0.0513) calc(h + 2.141)); + --ig-error-A200: oklch(from var(--ig-error-seed) 0.7258 min(c * 0.6599, 0.17) calc(h + 0.27)); + --ig-error-A400: oklch(from var(--ig-error-seed) 0.6128 min(c * 0.9204, 0.2372) h); + --ig-error-A700: oklch(from var(--ig-error-seed) 0.518 min(c * 0.8222, 0.2119) h); +} + +/* END_CONTAINED */ +/* END_ASSERT */ +/* */ +/* Test: verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] map */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] map */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] map */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] map */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] map */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] map */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] map */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] map */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* */ +/* Test: should generate CSS variables for handmande palettes */ +/* ASSERT: */ +/* OUTPUT */ +:root { + --ig-wcag-a: 0.31; + --ig-wcag-aa: 0.185; + --ig-wcag-aaa: 0.178; + --ig-contrast-level: var(--ig-wcag-aa); + --y: clamp(0, (y / var(--ig-contrast-level) - 1) * -infinity, 1); + --y-contrast: xyz-d65 var(--y) var(--y) var(--y); +} + +:root { + --ig-primary-50: #e6eff8; + --ig-primary-50-contrast: black; + --ig-primary-100: #bfd7f2; + --ig-primary-100-contrast: black; + --ig-primary-200: #98bfec; + --ig-primary-200-contrast: black; + --ig-primary-300: #85b5e9; + --ig-primary-300-contrast: white; + --ig-primary-400: #73a6e4; + --ig-primary-400-contrast: white; + --ig-primary-500: #6797de; + --ig-primary-500-contrast: white; + --ig-primary-600: #3681dd; + --ig-primary-600-contrast: white; + --ig-primary-700: #357fda; + --ig-primary-700-contrast: white; + --ig-primary-800: #306dc8; + --ig-primary-800-contrast: white; + --ig-primary-900: #284ea8; + --ig-primary-900-contrast: white; + --ig-primary-A100: #98bfec; + --ig-primary-A100-contrast: white; + --ig-primary-A200: #73a6e4; + --ig-primary-A200-contrast: white; + --ig-primary-A400: #3681dd; + --ig-primary-A400-contrast: white; + --ig-primary-A700: #284ea8; + --ig-primary-A700-contrast: white; + --ig-primary-seed: #6797de; + --ig-primary-seed-contrast: white; + --ig-secondary-50: #fef7e2; + --ig-secondary-50-contrast: black; + --ig-secondary-100: #fdeab7; + --ig-secondary-100-contrast: black; + --ig-secondary-200: #fbdd89; + --ig-secondary-200-contrast: black; + --ig-secondary-300: #fad15c; + --ig-secondary-300-contrast: black; + --ig-secondary-400: #f9c63f; + --ig-secondary-400-contrast: black; + --ig-secondary-500: #f7bd32; + --ig-secondary-500-contrast: white; + --ig-secondary-600: #f6b02d; + --ig-secondary-600-contrast: white; + --ig-secondary-700: #f49e2a; + --ig-secondary-700-contrast: white; + --ig-secondary-800: #f38e28; + --ig-secondary-800-contrast: white; + --ig-secondary-900: #f38e28; + --ig-secondary-900-contrast: white; + --ig-secondary-A100: #fbdd89; + --ig-secondary-A100-contrast: black; + --ig-secondary-A200: #f9c63f; + --ig-secondary-A200-contrast: black; + --ig-secondary-A400: #f6b02d; + --ig-secondary-A400-contrast: white; + --ig-secondary-A700: #f38e28; + --ig-secondary-A700-contrast: white; + --ig-secondary-seed: #f7bd32; + --ig-secondary-seed-contrast: white; + --ig-tertiary-500: #f7bd32; + --ig-tertiary-500-contrast: white; + --ig-gray-50: #fff; + --ig-gray-50-contrast: black; + --ig-gray-100: #fafafa; + --ig-gray-100-contrast: black; + --ig-gray-200: #f5f5f5; + --ig-gray-200-contrast: black; + --ig-gray-300: #f0f0f0; + --ig-gray-300-contrast: black; + --ig-gray-400: #dedede; + --ig-gray-400-contrast: black; + --ig-gray-500: #b3b2b2; + --ig-gray-500-contrast: black; + --ig-gray-600: #979696; + --ig-gray-600-contrast: white; + --ig-gray-700: #7b7a7a; + --ig-gray-700-contrast: white; + --ig-gray-800: #404040; + --ig-gray-800-contrast: white; + --ig-gray-900: #1a1a1a; + --ig-gray-900-contrast: white; + --ig-gray-seed: #b3b2b2; + --ig-gray-seed-contrast: black; + --ig-info-50: #fef7e2; + --ig-info-50-contrast: black; + --ig-info-100: #fdeab7; + --ig-info-100-contrast: black; + --ig-info-200: #fbdd89; + --ig-info-200-contrast: black; + --ig-info-300: #fad15c; + --ig-info-300-contrast: black; + --ig-info-400: #f9c63f; + --ig-info-400-contrast: black; + --ig-info-500: #f7bd32; + --ig-info-500-contrast: white; + --ig-info-600: #f6b02d; + --ig-info-600-contrast: white; + --ig-info-700: #f49e2a; + --ig-info-700-contrast: white; + --ig-info-800: #f38e28; + --ig-info-800-contrast: white; + --ig-info-900: #f38e28; + --ig-info-900-contrast: white; + --ig-info-A100: #fbdd89; + --ig-info-A100-contrast: black; + --ig-info-A200: #f9c63f; + --ig-info-A200-contrast: black; + --ig-info-A400: #f6b02d; + --ig-info-A400-contrast: white; + --ig-info-A700: #f38e28; + --ig-info-A700-contrast: white; + --ig-info-seed: #f7bd32; + --ig-info-seed-contrast: white; + --ig-success-50: #fef7e2; + --ig-success-50-contrast: black; + --ig-success-100: #fdeab7; + --ig-success-100-contrast: black; + --ig-success-200: #fbdd89; + --ig-success-200-contrast: black; + --ig-success-300: #fad15c; + --ig-success-300-contrast: black; + --ig-success-400: #f9c63f; + --ig-success-400-contrast: black; + --ig-success-500: #f7bd32; + --ig-success-500-contrast: white; + --ig-success-600: #f6b02d; + --ig-success-600-contrast: white; + --ig-success-700: #f49e2a; + --ig-success-700-contrast: white; + --ig-success-800: #f38e28; + --ig-success-800-contrast: white; + --ig-success-900: #f38e28; + --ig-success-900-contrast: white; + --ig-success-A100: #fbdd89; + --ig-success-A100-contrast: black; + --ig-success-A200: #f9c63f; + --ig-success-A200-contrast: black; + --ig-success-A400: #f6b02d; + --ig-success-A400-contrast: white; + --ig-success-A700: #f38e28; + --ig-success-A700-contrast: white; + --ig-success-seed: #f7bd32; + --ig-success-seed-contrast: white; + --ig-warn-50: #fef7e2; + --ig-warn-50-contrast: black; + --ig-warn-100: #fdeab7; + --ig-warn-100-contrast: black; + --ig-warn-200: #fbdd89; + --ig-warn-200-contrast: black; + --ig-warn-300: #fad15c; + --ig-warn-300-contrast: black; + --ig-warn-400: #f9c63f; + --ig-warn-400-contrast: black; + --ig-warn-500: #f7bd32; + --ig-warn-500-contrast: white; + --ig-warn-600: #f6b02d; + --ig-warn-600-contrast: white; + --ig-warn-700: #f49e2a; + --ig-warn-700-contrast: white; + --ig-warn-800: #f38e28; + --ig-warn-800-contrast: white; + --ig-warn-900: #f38e28; + --ig-warn-900-contrast: white; + --ig-warn-A100: #fbdd89; + --ig-warn-A100-contrast: black; + --ig-warn-A200: #f9c63f; + --ig-warn-A200-contrast: black; + --ig-warn-A400: #f6b02d; + --ig-warn-A400-contrast: white; + --ig-warn-A700: #f38e28; + --ig-warn-A700-contrast: white; + --ig-warn-seed: #f7bd32; + --ig-warn-seed-contrast: white; + --ig-error-50: #fef7e2; + --ig-error-50-contrast: black; + --ig-error-100: #fdeab7; + --ig-error-100-contrast: black; + --ig-error-200: #fbdd89; + --ig-error-200-contrast: black; + --ig-error-300: #fad15c; + --ig-error-300-contrast: black; + --ig-error-400: #f9c63f; + --ig-error-400-contrast: black; + --ig-error-500: #f7bd32; + --ig-error-500-contrast: white; + --ig-error-600: #f6b02d; + --ig-error-600-contrast: white; + --ig-error-700: #f49e2a; + --ig-error-700-contrast: white; + --ig-error-800: #f38e28; + --ig-error-800-contrast: white; + --ig-error-900: #f38e28; + --ig-error-900-contrast: white; + --ig-error-A100: #fbdd89; + --ig-error-A100-contrast: black; + --ig-error-A200: #f9c63f; + --ig-error-A200-contrast: black; + --ig-error-A400: #f6b02d; + --ig-error-A400-contrast: white; + --ig-error-A700: #f38e28; + --ig-error-A700-contrast: white; + --ig-error-seed: #f7bd32; + --ig-error-seed-contrast: white; + --ig-surface-50: #fef7e2; + --ig-surface-50-contrast: black; + --ig-surface-100: #fdeab7; + --ig-surface-100-contrast: black; + --ig-surface-200: #fbdd89; + --ig-surface-200-contrast: black; + --ig-surface-300: #fad15c; + --ig-surface-300-contrast: black; + --ig-surface-400: #f9c63f; + --ig-surface-400-contrast: black; + --ig-surface-500: #f7bd32; + --ig-surface-500-contrast: white; + --ig-surface-600: #f6b02d; + --ig-surface-600-contrast: white; + --ig-surface-700: #f49e2a; + --ig-surface-700-contrast: white; + --ig-surface-800: #f38e28; + --ig-surface-800-contrast: white; + --ig-surface-900: #f38e28; + --ig-surface-900-contrast: white; + --ig-surface-A100: #fbdd89; + --ig-surface-A100-contrast: black; + --ig-surface-A200: #f9c63f; + --ig-surface-A200-contrast: black; + --ig-surface-A400: #f6b02d; + --ig-surface-A400-contrast: white; + --ig-surface-A700: #f38e28; + --ig-surface-A700-contrast: white; + --ig-surface-seed: #f7bd32; + --ig-surface-seed-contrast: white; +} + +/* END_OUTPUT */ +/* CONTAINED */ +:root { + --ig-primary-50: #e6eff8; + --ig-primary-100: #bfd7f2; + --ig-primary-200: #98bfec; + --ig-primary-300: #85b5e9; + --ig-primary-400: #73a6e4; + --ig-primary-500: #6797de; + --ig-primary-600: #3681dd; + --ig-primary-700: #357fda; + --ig-primary-800: #306dc8; + --ig-primary-900: #284ea8; + --ig-primary-seed: #6797de; + --ig-primary-A100: #98bfec; + --ig-primary-A200: #73a6e4; + --ig-primary-A400: #3681dd; + --ig-primary-A700: #284ea8; + --ig-secondary-50: #fef7e2; + --ig-secondary-100: #fdeab7; + --ig-secondary-200: #fbdd89; + --ig-secondary-300: #fad15c; + --ig-secondary-400: #f9c63f; + --ig-secondary-500: #f7bd32; + --ig-secondary-600: #f6b02d; + --ig-secondary-700: #f49e2a; + --ig-secondary-800: #f38e28; + --ig-secondary-900: #f38e28; + --ig-secondary-seed: #f7bd32; + --ig-secondary-A100: #fbdd89; + --ig-secondary-A200: #f9c63f; + --ig-secondary-A400: #f6b02d; + --ig-secondary-A700: #f38e28; + --ig-gray-50: #fff; + --ig-gray-100: #fafafa; + --ig-gray-200: #f5f5f5; + --ig-gray-300: #f0f0f0; + --ig-gray-400: #dedede; + --ig-gray-500: #b3b2b2; + --ig-gray-600: #979696; + --ig-gray-700: #7b7a7a; + --ig-gray-800: #404040; + --ig-gray-900: #1a1a1a; + --ig-gray-seed: #b3b2b2; + --ig-surface-50: #fef7e2; + --ig-surface-100: #fdeab7; + --ig-surface-200: #fbdd89; + --ig-surface-300: #fad15c; + --ig-surface-400: #f9c63f; + --ig-surface-500: #f7bd32; + --ig-surface-600: #f6b02d; + --ig-surface-700: #f49e2a; + --ig-surface-800: #f38e28; + --ig-surface-900: #f38e28; + --ig-surface-seed: #f7bd32; + --ig-surface-A100: #fbdd89; + --ig-surface-A200: #f9c63f; + --ig-surface-A400: #f6b02d; + --ig-surface-A700: #f38e28; + --ig-info-50: #fef7e2; + --ig-info-100: #fdeab7; + --ig-info-200: #fbdd89; + --ig-info-300: #fad15c; + --ig-info-400: #f9c63f; + --ig-info-500: #f7bd32; + --ig-info-600: #f6b02d; + --ig-info-700: #f49e2a; + --ig-info-800: #f38e28; + --ig-info-900: #f38e28; + --ig-info-seed: #f7bd32; + --ig-info-A100: #fbdd89; + --ig-info-A200: #f9c63f; + --ig-info-A400: #f6b02d; + --ig-info-A700: #f38e28; + --ig-success-50: #fef7e2; + --ig-success-100: #fdeab7; + --ig-success-200: #fbdd89; + --ig-success-300: #fad15c; + --ig-success-400: #f9c63f; + --ig-success-500: #f7bd32; + --ig-success-600: #f6b02d; + --ig-success-700: #f49e2a; + --ig-success-800: #f38e28; + --ig-success-900: #f38e28; + --ig-success-seed: #f7bd32; + --ig-success-A100: #fbdd89; + --ig-success-A200: #f9c63f; + --ig-success-A400: #f6b02d; + --ig-success-A700: #f38e28; + --ig-warn-50: #fef7e2; + --ig-warn-100: #fdeab7; + --ig-warn-200: #fbdd89; + --ig-warn-300: #fad15c; + --ig-warn-400: #f9c63f; + --ig-warn-500: #f7bd32; + --ig-warn-600: #f6b02d; + --ig-warn-700: #f49e2a; + --ig-warn-800: #f38e28; + --ig-warn-900: #f38e28; + --ig-warn-seed: #f7bd32; + --ig-warn-A100: #fbdd89; + --ig-warn-A200: #f9c63f; + --ig-warn-A400: #f6b02d; + --ig-warn-A700: #f38e28; + --ig-error-50: #fef7e2; + --ig-error-100: #fdeab7; + --ig-error-200: #fbdd89; + --ig-error-300: #fad15c; + --ig-error-400: #f9c63f; + --ig-error-500: #f7bd32; + --ig-error-600: #f6b02d; + --ig-error-700: #f49e2a; + --ig-error-800: #f38e28; + --ig-error-900: #f38e28; + --ig-error-seed: #f7bd32; + --ig-error-A100: #fbdd89; + --ig-error-A200: #f9c63f; + --ig-error-A400: #f6b02d; + --ig-error-A700: #f38e28; +} + +/* END_CONTAINED */ +/* END_ASSERT */ +/* */ +/* Test: should properly get the value from handmade palettes */ +/* ✔ [assert-equal] should properly get the value from handmade palettes */ +/* ASSERT: */ +/* OUTPUT */ +.test-output { + color: rgb(250, 250, 250); +} + +/* END_OUTPUT */ +/* CONTAINED */ +.test-output { + color: rgb(250, 250, 250); +} + +/* END_CONTAINED */ +/* END_ASSERT */ +/* */ +/* # Module: Color :: palette :: gamut-relative generator */ +/* ------------------------------------------------------ */ +/* Test: keeps any two shades 500 apart at WCAG AA or better */ +/* ✔ [assert-true] keeps any two shades 500 apart at WCAG AA or better */ +/* ✔ [assert-true] keeps any two shades 500 apart at WCAG AA or better */ +/* ✔ [assert-true] keeps any two shades 500 apart at WCAG AA or better */ +/* ✔ [assert-true] keeps any two shades 500 apart at WCAG AA or better */ +/* ✔ [assert-true] keeps any two shades 500 apart at WCAG AA or better */ +/* ✔ [assert-true] keeps any two shades 500 apart at WCAG AA or better */ +/* ✔ [assert-true] keeps any two shades 500 apart at WCAG AA or better */ +/* ✔ [assert-true] keeps any two shades 500 apart at WCAG AA or better */ +/* ✔ [assert-true] keeps any two shades 500 apart at WCAG AA or better */ +/* ✔ [assert-true] keeps any two shades 500 apart at WCAG AA or better */ +/* ✔ [assert-true] keeps any two shades 500 apart at WCAG AA or better */ +/* ✔ [assert-true] keeps any two shades 500 apart at WCAG AA or better */ +/* ✔ [assert-true] keeps any two shades 500 apart at WCAG AA or better */ +/* ✔ [assert-true] keeps any two shades 500 apart at WCAG AA or better */ +/* ✔ [assert-true] keeps any two shades 500 apart at WCAG AA or better */ +/* ✔ [assert-true] keeps any two shades 500 apart at WCAG AA or better */ +/* ✔ [assert-true] keeps any two shades 500 apart at WCAG AA or better */ +/* ✔ [assert-true] keeps any two shades 500 apart at WCAG AA or better */ +/* ✔ [assert-true] keeps any two shades 500 apart at WCAG AA or better */ +/* ✔ [assert-true] keeps any two shades 500 apart at WCAG AA or better */ +/* ✔ [assert-true] keeps any two shades 500 apart at WCAG AA or better */ +/* ✔ [assert-true] keeps any two shades 500 apart at WCAG AA or better */ +/* ✔ [assert-true] keeps any two shades 500 apart at WCAG AA or better */ +/* ✔ [assert-true] keeps any two shades 500 apart at WCAG AA or better */ +/* ✔ [assert-true] keeps any two shades 500 apart at WCAG AA or better */ +/* ✔ [assert-true] keeps any two shades 500 apart at WCAG AA or better */ +/* ✔ [assert-true] keeps any two shades 500 apart at WCAG AA or better */ +/* ✔ [assert-true] keeps any two shades 500 apart at WCAG AA or better */ +/* ✔ [assert-true] keeps any two shades 500 apart at WCAG AA or better */ +/* ✔ [assert-true] keeps any two shades 500 apart at WCAG AA or better */ +/* ✔ [assert-true] keeps any two shades 500 apart at WCAG AA or better */ +/* ✔ [assert-true] keeps any two shades 500 apart at WCAG AA or better */ +/* ✔ [assert-true] keeps any two shades 500 apart at WCAG AA or better */ +/* ✔ [assert-true] keeps any two shades 500 apart at WCAG AA or better */ +/* ✔ [assert-true] keeps any two shades 500 apart at WCAG AA or better */ +/* ✔ [assert-true] keeps any two shades 500 apart at WCAG AA or better */ +/* ✔ [assert-true] keeps any two shades 500 apart at WCAG AA or better */ +/* ✔ [assert-true] keeps any two shades 500 apart at WCAG AA or better */ +/* ✔ [assert-true] keeps any two shades 500 apart at WCAG AA or better */ +/* ✔ [assert-true] keeps any two shades 500 apart at WCAG AA or better */ +/* */ +/* Test: keeps every shade visibly distinct, whatever the seed */ +/* ✔ [assert-true] keeps every shade visibly distinct, whatever the seed */ +/* ✔ [assert-true] keeps every shade visibly distinct, whatever the seed */ +/* ✔ [assert-true] keeps every shade visibly distinct, whatever the seed */ +/* ✔ [assert-true] keeps every shade visibly distinct, whatever the seed */ +/* ✔ [assert-true] keeps every shade visibly distinct, whatever the seed */ +/* ✔ [assert-true] keeps every shade visibly distinct, whatever the seed */ +/* ✔ [assert-true] keeps every shade visibly distinct, whatever the seed */ +/* ✔ [assert-true] keeps every shade visibly distinct, whatever the seed */ +/* ✔ [assert-true] keeps every shade visibly distinct, whatever the seed */ +/* ✔ [assert-true] keeps every shade visibly distinct, whatever the seed */ +/* ✔ [assert-true] keeps every shade visibly distinct, whatever the seed */ +/* ✔ [assert-true] keeps every shade visibly distinct, whatever the seed */ +/* ✔ [assert-true] keeps every shade visibly distinct, whatever the seed */ +/* ✔ [assert-true] keeps every shade visibly distinct, whatever the seed */ +/* ✔ [assert-true] keeps every shade visibly distinct, whatever the seed */ +/* ✔ [assert-true] keeps every shade visibly distinct, whatever the seed */ +/* ✔ [assert-true] keeps every shade visibly distinct, whatever the seed */ +/* ✔ [assert-true] keeps every shade visibly distinct, whatever the seed */ +/* ✔ [assert-true] keeps every shade visibly distinct, whatever the seed */ +/* ✔ [assert-true] keeps every shade visibly distinct, whatever the seed */ +/* ✔ [assert-true] keeps every shade visibly distinct, whatever the seed */ +/* ✔ [assert-true] keeps every shade visibly distinct, whatever the seed */ +/* ✔ [assert-true] keeps every shade visibly distinct, whatever the seed */ +/* ✔ [assert-true] keeps every shade visibly distinct, whatever the seed */ +/* ✔ [assert-true] keeps every shade visibly distinct, whatever the seed */ +/* ✔ [assert-true] keeps every shade visibly distinct, whatever the seed */ +/* ✔ [assert-true] keeps every shade visibly distinct, whatever the seed */ +/* ✔ [assert-true] keeps every shade visibly distinct, whatever the seed */ +/* ✔ [assert-true] keeps every shade visibly distinct, whatever the seed */ +/* ✔ [assert-true] keeps every shade visibly distinct, whatever the seed */ +/* ✔ [assert-true] keeps every shade visibly distinct, whatever the seed */ +/* ✔ [assert-true] keeps every shade visibly distinct, whatever the seed */ +/* ✔ [assert-true] keeps every shade visibly distinct, whatever the seed */ +/* ✔ [assert-true] keeps every shade visibly distinct, whatever the seed */ +/* ✔ [assert-true] keeps every shade visibly distinct, whatever the seed */ +/* ✔ [assert-true] keeps every shade visibly distinct, whatever the seed */ +/* ✔ [assert-true] keeps every shade visibly distinct, whatever the seed */ +/* ✔ [assert-true] keeps every shade visibly distinct, whatever the seed */ +/* ✔ [assert-true] keeps every shade visibly distinct, whatever the seed */ +/* ✔ [assert-true] keeps every shade visibly distinct, whatever the seed */ +/* ✔ [assert-true] keeps every shade visibly distinct, whatever the seed */ +/* ✔ [assert-true] keeps every shade visibly distinct, whatever the seed */ +/* ✔ [assert-true] keeps every shade visibly distinct, whatever the seed */ +/* ✔ [assert-true] keeps every shade visibly distinct, whatever the seed */ +/* ✔ [assert-true] keeps every shade visibly distinct, whatever the seed */ +/* ✔ [assert-true] keeps every shade visibly distinct, whatever the seed */ +/* ✔ [assert-true] keeps every shade visibly distinct, whatever the seed */ +/* ✔ [assert-true] keeps every shade visibly distinct, whatever the seed */ +/* ✔ [assert-true] keeps every shade visibly distinct, whatever the seed */ +/* ✔ [assert-true] keeps every shade visibly distinct, whatever the seed */ +/* */ +/* Test: generates a neutral ramp for a seed with no usable hue */ +/* ✔ [assert-equal] generates a neutral ramp for a seed with no usable hue */ +/* ✔ [assert-equal] generates a neutral ramp for a seed with no usable hue */ +/* ✔ [assert-equal] generates a neutral ramp for a seed with no usable hue */ +/* ✔ [assert-equal] generates a neutral ramp for a seed with no usable hue */ +/* ✔ [assert-equal] generates a neutral ramp for a seed with no usable hue */ +/* ✔ [assert-equal] generates a neutral ramp for a seed with no usable hue */ +/* ✔ [assert-equal] generates a neutral ramp for a seed with no usable hue */ +/* ✔ [assert-equal] generates a neutral ramp for a seed with no usable hue */ +/* ✔ [assert-equal] generates a neutral ramp for a seed with no usable hue */ +/* ✔ [assert-equal] generates a neutral ramp for a seed with no usable hue */ +/* */ +/* Test: leaves the surface family anchored on its seed */ +/* ✔ [assert-equal] leaves the surface family anchored on its seed */ +/* */ +/* Test: emits a relative color expression anchored on the seed variable */ +/* ✔ [assert-true] emits a relative color expression anchored on the seed variable */ +/* */ +/* Test: reports which shade the seed lands nearest */ +/* ✔ [assert-equal] reports which shade the seed lands nearest */ +/* ✔ [assert-equal] reports which shade the seed lands nearest */ +/* */ +/* Test: falls back to the original multipliers on request */ +/* ✔ [assert-equal] falls back to the original multipliers on request */ +/* ✔ [assert-equal] falls back to the original multipliers on request */ +/* */ +/* */ +/* Test: should convert a color to a list of HSL values */ +/* ✔ [assert-equal] should convert a color to a list of HSL values */ +/* */ +/* Test: should include all necessarry CSS custom properties for adaptive contrast to work */ +/* ASSERT: */ +/* OUTPUT */ +:root { + --ig-wcag-a: 0.31; + --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-d65 var(--y) var(--y) var(--y); +} + +/* END_OUTPUT */ +/* CONTAINED */ +:root { + --ig-wcag-a: 0.31; + --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-d65 var(--y) var(--y) var(--y); +} + +/* END_CONTAINED */ +/* END_ASSERT */ +/* */ +/* # Module: Color :: palette :: seed color variables */ +/* -------------------------------------------------- */ +/* Test: emits --ig-{name}-seed CSS variables; uses provided gray or derives from surface */ +/* ASSERT: */ +/* OUTPUT */ +:root { + --ig-wcag-a: 0.31; + --ig-wcag-aa: 0.185; + --ig-wcag-aaa: 0.178; + --ig-contrast-level: var(--ig-wcag-aa); + --y: clamp(0, (y / var(--ig-contrast-level) - 1) * -infinity, 1); + --y-contrast: xyz-d65 var(--y) var(--y) var(--y); +} + +:root { + --ig-primary-50: oklch(from var(--ig-primary-seed) 0.9402 min(c * 0.1264, 0.0232) calc(h + 6.804)); + --ig-primary-50-contrast: hsla(from color(from var(--ig-primary-50) var(--y-contrast)) h 0 l/1); + --ig-primary-100: oklch(from var(--ig-primary-seed) 0.844 min(c * 0.3941, 0.0724) calc(h + 4.879)); + --ig-primary-100-contrast: hsla(from color(from var(--ig-primary-100) var(--y-contrast)) h 0 l/1); + --ig-primary-200: oklch(from var(--ig-primary-seed) 0.7551 min(c * 0.6602, 0.1213) calc(h + 3.103)); + --ig-primary-200-contrast: hsla(from color(from var(--ig-primary-200) var(--y-contrast)) h 0 l/1); + --ig-primary-300: oklch(from var(--ig-primary-seed) 0.6742 min(c * 0.8212, 0.1508) calc(h + 1.484)); + --ig-primary-300-contrast: hsla(from color(from var(--ig-primary-300) var(--y-contrast)) h 0 l/1); + --ig-primary-400: oklch(from var(--ig-primary-seed) 0.5973 min(c * 0.8367, 0.1537) h); + --ig-primary-400-contrast: hsla(from color(from var(--ig-primary-400) var(--y-contrast)) h 0 l/1); + --ig-primary-500: oklch(from var(--ig-primary-seed) 0.5244 min(c * 0.7664, 0.1408) h); + --ig-primary-500-contrast: hsla(from color(from var(--ig-primary-500) var(--y-contrast)) h 0 l/1); + --ig-primary-600: oklch(from var(--ig-primary-seed) 0.4535 min(c * 0.6602, 0.1213) h); + --ig-primary-600-contrast: hsla(from color(from var(--ig-primary-600) var(--y-contrast)) h 0 l/1); + --ig-primary-700: oklch(from var(--ig-primary-seed) 0.3818 min(c * 0.5301, 0.0974) h); + --ig-primary-700-contrast: hsla(from color(from var(--ig-primary-700) var(--y-contrast)) h 0 l/1); + --ig-primary-800: oklch(from var(--ig-primary-seed) 0.3034 min(c * 0.3808, 0.0699) h); + --ig-primary-800-contrast: hsla(from color(from var(--ig-primary-800) var(--y-contrast)) h 0 l/1); + --ig-primary-900: oklch(from var(--ig-primary-seed) 0.2004 min(c * 0.2097, 0.0385) h); + --ig-primary-900-contrast: hsla(from color(from var(--ig-primary-900) var(--y-contrast)) h 0 l/1); + --ig-primary-seed: #09f; + --ig-primary-seed-contrast: hsla(from color(from var(--ig-primary-seed) var(--y-contrast)) h 0 l/1); + --ig-primary-A100: oklch(from var(--ig-primary-seed) 0.889 min(c * 0.3037, 0.0558) calc(h + 2.817)); + --ig-primary-A100-contrast: hsla(from color(from var(--ig-primary-A100) var(--y-contrast)) h 0 l/1); + --ig-primary-A200: oklch(from var(--ig-primary-seed) 0.7075 min(c * 0.8606, 0.1581) calc(h + 2.149)); + --ig-primary-A200-contrast: hsla(from color(from var(--ig-primary-A200) var(--y-contrast)) h 0 l/1); + --ig-primary-A400: oklch(from var(--ig-primary-seed) 0.5847 min(c * 0.8681, 0.1595) h); + --ig-primary-A400-contrast: hsla(from color(from var(--ig-primary-A400) var(--y-contrast)) h 0 l/1); + --ig-primary-A700: oklch(from var(--ig-primary-seed) 0.4923 min(c * 0.7355, 0.1351) h); + --ig-primary-A700-contrast: hsla(from color(from var(--ig-primary-A700) var(--y-contrast)) h 0 l/1); + --ig-secondary-50: oklch(from var(--ig-secondary-seed) 0.9463 min(c * 0.1097, 0.0141) calc(h + 6.926)); + --ig-secondary-50-contrast: hsla(from color(from var(--ig-secondary-50) var(--y-contrast)) h 0 l/1); + --ig-secondary-100: oklch(from var(--ig-secondary-seed) 0.8515 min(c * 0.3639, 0.0467) calc(h + 5.03)); + --ig-secondary-100-contrast: hsla(from color(from var(--ig-secondary-100) var(--y-contrast)) h 0 l/1); + --ig-secondary-200: oklch(from var(--ig-secondary-seed) 0.7653 min(c * 0.6343, 0.0814) calc(h + 3.307)); + --ig-secondary-200-contrast: hsla(from color(from var(--ig-secondary-200) var(--y-contrast)) h 0 l/1); + --ig-secondary-300: oklch(from var(--ig-secondary-seed) 0.6845 min(c * 0.8792, 0.1128) calc(h + 1.691)); + --ig-secondary-300-contrast: hsla(from color(from var(--ig-secondary-300) var(--y-contrast)) h 0 l/1); + --ig-secondary-400: oklch(from var(--ig-secondary-seed) 0.6101 min(c * 1.0415, 0.1336) calc(h + 0.203)); + --ig-secondary-400-contrast: hsla(from color(from var(--ig-secondary-400) var(--y-contrast)) h 0 l/1); + --ig-secondary-500: oklch(from var(--ig-secondary-seed) 0.5386 min(c * 1.0863, 0.1394) h); + --ig-secondary-500-contrast: hsla(from color(from var(--ig-secondary-500) var(--y-contrast)) h 0 l/1); + --ig-secondary-600: oklch(from var(--ig-secondary-seed) 0.4674 min(c * 1.0083, 0.1294) h); + --ig-secondary-600-contrast: hsla(from color(from var(--ig-secondary-600) var(--y-contrast)) h 0 l/1); + --ig-secondary-700: oklch(from var(--ig-secondary-seed) 0.3933 min(c * 0.835, 0.1071) h); + --ig-secondary-700-contrast: hsla(from color(from var(--ig-secondary-700) var(--y-contrast)) h 0 l/1); + --ig-secondary-800: oklch(from var(--ig-secondary-seed) 0.3118 min(c * 0.605, 0.0776) h); + --ig-secondary-800-contrast: hsla(from color(from var(--ig-secondary-800) var(--y-contrast)) h 0 l/1); + --ig-secondary-900: oklch(from var(--ig-secondary-seed) 0.205 min(c * 0.3327, 0.0427) h); + --ig-secondary-900-contrast: hsla(from color(from var(--ig-secondary-900) var(--y-contrast)) h 0 l/1); + --ig-secondary-seed: #97c; + --ig-secondary-seed-contrast: hsla(from color(from var(--ig-secondary-seed) var(--y-contrast)) h 0 l/1); + --ig-secondary-A100: oklch(from var(--ig-secondary-seed) 0.8923 min(c * 0.5334, 0.0684) calc(h + 6.928)); + --ig-secondary-A100-contrast: hsla(from color(from var(--ig-secondary-A100) var(--y-contrast)) h 0 l/1); + --ig-secondary-A200: oklch(from var(--ig-secondary-seed) 0.727 min(c * 1.3792, 0.177) calc(h + 3.291)); + --ig-secondary-A200-contrast: hsla(from color(from var(--ig-secondary-A200) var(--y-contrast)) h 0 l/1); + --ig-secondary-A400: oklch(from var(--ig-secondary-seed) 0.6148 min(c * 1.9646, 0.2521) calc(h + 0.357)); + --ig-secondary-A400-contrast: hsla(from color(from var(--ig-secondary-A400) var(--y-contrast)) h 0 l/1); + --ig-secondary-A700: oklch(from var(--ig-secondary-seed) 0.5283 min(c * 2.0936, 0.2686) h); + --ig-secondary-A700-contrast: hsla(from color(from var(--ig-secondary-A700) var(--y-contrast)) h 0 l/1); + --ig-gray-50: oklch(from var(--ig-gray-seed) 0.9404 0 0); + --ig-gray-50-contrast: hsla(from color(from var(--ig-gray-50) var(--y-contrast)) h 0 l/1); + --ig-gray-100: oklch(from var(--ig-gray-seed) 0.8448 0 0); + --ig-gray-100-contrast: hsla(from color(from var(--ig-gray-100) var(--y-contrast)) h 0 l/1); + --ig-gray-200: oklch(from var(--ig-gray-seed) 0.7562 0 0); + --ig-gray-200-contrast: hsla(from color(from var(--ig-gray-200) var(--y-contrast)) h 0 l/1); + --ig-gray-300: oklch(from var(--ig-gray-seed) 0.6749 0 0); + --ig-gray-300-contrast: hsla(from color(from var(--ig-gray-300) var(--y-contrast)) h 0 l/1); + --ig-gray-400: oklch(from var(--ig-gray-seed) 0.598 0 0); + --ig-gray-400-contrast: hsla(from color(from var(--ig-gray-400) var(--y-contrast)) h 0 l/1); + --ig-gray-500: oklch(from var(--ig-gray-seed) 0.5248 0 0); + --ig-gray-500-contrast: hsla(from color(from var(--ig-gray-500) var(--y-contrast)) h 0 l/1); + --ig-gray-600: oklch(from var(--ig-gray-seed) 0.4539 0 0); + --ig-gray-600-contrast: hsla(from color(from var(--ig-gray-600) var(--y-contrast)) h 0 l/1); + --ig-gray-700: oklch(from var(--ig-gray-seed) 0.3822 0 0); + --ig-gray-700-contrast: hsla(from color(from var(--ig-gray-700) var(--y-contrast)) h 0 l/1); + --ig-gray-800: oklch(from var(--ig-gray-seed) 0.304 0 0); + --ig-gray-800-contrast: hsla(from color(from var(--ig-gray-800) var(--y-contrast)) h 0 l/1); + --ig-gray-900: oklch(from var(--ig-gray-seed) 0.2009 0 0); + --ig-gray-900-contrast: hsla(from color(from var(--ig-gray-900) var(--y-contrast)) h 0 l/1); + --ig-gray-seed: #333; + --ig-gray-seed-contrast: hsla(from color(from var(--ig-gray-seed) var(--y-contrast)) h 0 l/1); + --ig-surface-50: hsl(from var(--ig-surface-500) h calc(s * 1.23) calc(l * 1.78)); + --ig-surface-50-contrast: hsla(from color(from var(--ig-surface-50) var(--y-contrast)) h 0 l/1); + --ig-surface-100: hsl(from var(--ig-surface-500) h calc(s * 0.8) calc(l * 1.66)); + --ig-surface-100-contrast: hsla(from color(from var(--ig-surface-100) var(--y-contrast)) h 0 l/1); + --ig-surface-200: hsl(from var(--ig-surface-500) h calc(s * 0.64) calc(l * 1.43)); + --ig-surface-200-contrast: hsla(from color(from var(--ig-surface-200) var(--y-contrast)) h 0 l/1); + --ig-surface-300: hsl(from var(--ig-surface-500) h calc(s * 0.73) calc(l * 1.19)); + --ig-surface-300-contrast: hsla(from color(from var(--ig-surface-300) var(--y-contrast)) h 0 l/1); + --ig-surface-400: hsl(from var(--ig-surface-500) h calc(s * 0.875) calc(l * 1.08)); + --ig-surface-400-contrast: hsla(from color(from var(--ig-surface-400) var(--y-contrast)) h 0 l/1); + --ig-surface-500: #fff; + --ig-surface-500-contrast: hsla(from color(from var(--ig-surface-500) var(--y-contrast)) h 0 l/1); + --ig-surface-600: hsl(from var(--ig-surface-500) h calc(s * 1.26) calc(l * 0.89)); + --ig-surface-600-contrast: hsla(from color(from var(--ig-surface-600) var(--y-contrast)) h 0 l/1); + --ig-surface-700: hsl(from var(--ig-surface-500) h calc(s * 1.26) calc(l * 0.81)); + --ig-surface-700-contrast: hsla(from color(from var(--ig-surface-700) var(--y-contrast)) h 0 l/1); + --ig-surface-800: hsl(from var(--ig-surface-500) h calc(s * 1.26) calc(l * 0.73)); + --ig-surface-800-contrast: hsla(from color(from var(--ig-surface-800) var(--y-contrast)) h 0 l/1); + --ig-surface-900: hsl(from var(--ig-surface-500) h calc(s * 1.26) calc(l * 0.64)); + --ig-surface-900-contrast: hsla(from color(from var(--ig-surface-900) var(--y-contrast)) h 0 l/1); + --ig-surface-seed: #fff; + --ig-surface-seed-contrast: hsla(from color(from var(--ig-surface-seed) var(--y-contrast)) h 0 l/1); + --ig-surface-A100: hsl(from var(--ig-surface-500) h calc(s * 1.23) calc(l * 1.34)); + --ig-surface-A100-contrast: hsla(from color(from var(--ig-surface-A100) var(--y-contrast)) h 0 l/1); + --ig-surface-A200: hsl(from var(--ig-surface-500) h calc(s * 1.22) calc(l * 1.16)); + --ig-surface-A200-contrast: hsla(from color(from var(--ig-surface-A200) var(--y-contrast)) h 0 l/1); + --ig-surface-A400: hsl(from var(--ig-surface-500) h calc(s * 1.23) calc(l * 0.91)); + --ig-surface-A400-contrast: hsla(from color(from var(--ig-surface-A400) var(--y-contrast)) h 0 l/1); + --ig-surface-A700: hsl(from var(--ig-surface-500) h calc(s * 1.23) calc(l * 0.65)); + --ig-surface-A700-contrast: hsla(from color(from var(--ig-surface-A700) var(--y-contrast)) h 0 l/1); + --ig-info-50: oklch(from var(--ig-info-seed) 0.9453 min(c * 0.0689, 0.0216) calc(h + 13.046)); + --ig-info-50-contrast: hsla(from color(from var(--ig-info-50) var(--y-contrast)) h 0 l/1); + --ig-info-100: oklch(from var(--ig-info-seed) 0.8466 min(c * 0.232, 0.0727) calc(h + 9.788)); + --ig-info-100-contrast: hsla(from color(from var(--ig-info-100) var(--y-contrast)) h 0 l/1); + --ig-info-200: oklch(from var(--ig-info-seed) 0.7599 min(c * 0.3904, 0.1223) calc(h + 6.738)); + --ig-info-200-contrast: hsla(from color(from var(--ig-info-200) var(--y-contrast)) h 0 l/1); + --ig-info-300: oklch(from var(--ig-info-seed) 0.6808 min(c * 0.5346, 0.1674) calc(h + 4.112)); + --ig-info-300-contrast: hsla(from color(from var(--ig-info-300) var(--y-contrast)) h 0 l/1); + --ig-info-400: oklch(from var(--ig-info-seed) 0.6081 min(c * 0.675, 0.2114) calc(h + 1.897)); + --ig-info-400-contrast: hsla(from color(from var(--ig-info-400) var(--y-contrast)) h 0 l/1); + --ig-info-500: oklch(from var(--ig-info-seed) 0.5394 min(c * 0.7548, 0.2364) h); + --ig-info-500-contrast: hsla(from color(from var(--ig-info-500) var(--y-contrast)) h 0 l/1); + --ig-info-600: oklch(from var(--ig-info-seed) 0.4709 min(c * 0.7545, 0.2363) h); + --ig-info-600-contrast: hsla(from color(from var(--ig-info-600) var(--y-contrast)) h 0 l/1); + --ig-info-700: oklch(from var(--ig-info-seed) 0.3981 min(c * 0.6608, 0.207) h); + --ig-info-700-contrast: hsla(from color(from var(--ig-info-700) var(--y-contrast)) h 0 l/1); + --ig-info-800: oklch(from var(--ig-info-seed) 0.3148 min(c * 0.4898, 0.1534) h); + --ig-info-800-contrast: hsla(from color(from var(--ig-info-800) var(--y-contrast)) h 0 l/1); + --ig-info-900: oklch(from var(--ig-info-seed) 0.2057 min(c * 0.2698, 0.0845) h); + --ig-info-900-contrast: hsla(from color(from var(--ig-info-900) var(--y-contrast)) h 0 l/1); + --ig-info-seed: blue; + --ig-info-seed-contrast: hsla(from color(from var(--ig-info-seed) var(--y-contrast)) h 0 l/1); + --ig-info-A100: oklch(from var(--ig-info-seed) 0.8909 min(c * 0.1693, 0.053) calc(h + 10.08)); + --ig-info-A100-contrast: hsla(from color(from var(--ig-info-A100) var(--y-contrast)) h 0 l/1); + --ig-info-A200: oklch(from var(--ig-info-seed) 0.7136 min(c * 0.4738, 0.1484) calc(h + 4.928)); + --ig-info-A200-contrast: hsla(from color(from var(--ig-info-A200) var(--y-contrast)) h 0 l/1); + --ig-info-A400: oklch(from var(--ig-info-seed) 0.5968 min(c * 0.6976, 0.2185) calc(h + 1.491)); + --ig-info-A400-contrast: hsla(from color(from var(--ig-info-A400) var(--y-contrast)) h 0 l/1); + --ig-info-A700: oklch(from var(--ig-info-seed) 0.512 min(c * 0.836, 0.2619) h); + --ig-info-A700-contrast: hsla(from color(from var(--ig-info-A700) var(--y-contrast)) h 0 l/1); + --ig-success-50: oklch(from var(--ig-success-seed) 0.9305 min(c * 0.5993, 0.106) h); + --ig-success-50-contrast: hsla(from color(from var(--ig-success-50) var(--y-contrast)) h 0 l/1); + --ig-success-100: oklch(from var(--ig-success-seed) 0.8227 min(c * 1.2544, 0.2219) h); + --ig-success-100-contrast: hsla(from color(from var(--ig-success-100) var(--y-contrast)) h 0 l/1); + --ig-success-200: oklch(from var(--ig-success-seed) 0.7358 min(c * 1.307, 0.2312) h); + --ig-success-200-contrast: hsla(from color(from var(--ig-success-200) var(--y-contrast)) h 0 l/1); + --ig-success-300: oklch(from var(--ig-success-seed) 0.6543 min(c * 1.2323, 0.2179) h); + --ig-success-300-contrast: hsla(from color(from var(--ig-success-300) var(--y-contrast)) h 0 l/1); + --ig-success-400: oklch(from var(--ig-success-seed) 0.5793 min(c * 1.1126, 0.1968) h); + --ig-success-400-contrast: hsla(from color(from var(--ig-success-400) var(--y-contrast)) h 0 l/1); + --ig-success-500: oklch(from var(--ig-success-seed) 0.5083 min(c * 0.9766, 0.1727) h); + --ig-success-500-contrast: hsla(from color(from var(--ig-success-500) var(--y-contrast)) h 0 l/1); + --ig-success-600: oklch(from var(--ig-success-seed) 0.4397 min(c * 0.8297, 0.1467) h); + --ig-success-600-contrast: hsla(from color(from var(--ig-success-600) var(--y-contrast)) h 0 l/1); + --ig-success-700: oklch(from var(--ig-success-seed) 0.371 min(c * 0.6646, 0.1175) h); + --ig-success-700-contrast: hsla(from color(from var(--ig-success-700) var(--y-contrast)) h 0 l/1); + --ig-success-800: oklch(from var(--ig-success-seed) 0.2958 min(c * 0.4781, 0.0846) h); + --ig-success-800-contrast: hsla(from color(from var(--ig-success-800) var(--y-contrast)) h 0 l/1); + --ig-success-900: oklch(from var(--ig-success-seed) 0.1964 min(c * 0.2645, 0.0468) h); + --ig-success-900-contrast: hsla(from color(from var(--ig-success-900) var(--y-contrast)) h 0 l/1); + --ig-success-seed: green; + --ig-success-seed-contrast: hsla(from color(from var(--ig-success-seed) var(--y-contrast)) h 0 l/1); + --ig-success-A100: oklch(from var(--ig-success-seed) 0.8632 min(c * 1.5429, 0.2729) h); + --ig-success-A100-contrast: hsla(from color(from var(--ig-success-A100) var(--y-contrast)) h 0 l/1); + --ig-success-A200: oklch(from var(--ig-success-seed) 0.686 min(c * 1.3198, 0.2334) h); + --ig-success-A200-contrast: hsla(from color(from var(--ig-success-A200) var(--y-contrast)) h 0 l/1); + --ig-success-A400: oklch(from var(--ig-success-seed) 0.5668 min(c * 1.0906, 0.1929) h); + --ig-success-A400-contrast: hsla(from color(from var(--ig-success-A400) var(--y-contrast)) h 0 l/1); + --ig-success-A700: oklch(from var(--ig-success-seed) 0.4769 min(c * 0.9176, 0.1623) h); + --ig-success-A700-contrast: hsla(from color(from var(--ig-success-A700) var(--y-contrast)) h 0 l/1); + --ig-warn-50: oklch(from var(--ig-warn-seed) 0.946 min(c * 0.1822, 0.0312) h); + --ig-warn-50-contrast: hsla(from color(from var(--ig-warn-50) var(--y-contrast)) h 0 l/1); + --ig-warn-100: oklch(from var(--ig-warn-seed) 0.8514 min(c * 0.5754, 0.0984) h); + --ig-warn-100-contrast: hsla(from color(from var(--ig-warn-100) var(--y-contrast)) h 0 l/1); + --ig-warn-200: oklch(from var(--ig-warn-seed) 0.7625 min(c * 0.8096, 0.1385) h); + --ig-warn-200-contrast: hsla(from color(from var(--ig-warn-200) var(--y-contrast)) h 0 l/1); + --ig-warn-300: oklch(from var(--ig-warn-seed) 0.6821 min(c * 0.8243, 0.141) h); + --ig-warn-300-contrast: hsla(from color(from var(--ig-warn-300) var(--y-contrast)) h 0 l/1); + --ig-warn-400: oklch(from var(--ig-warn-seed) 0.6047 min(c * 0.757, 0.1295) h); + --ig-warn-400-contrast: hsla(from color(from var(--ig-warn-400) var(--y-contrast)) h 0 l/1); + --ig-warn-500: oklch(from var(--ig-warn-seed) 0.5307 min(c * 0.6674, 0.1141) h); + --ig-warn-500-contrast: hsla(from color(from var(--ig-warn-500) var(--y-contrast)) h 0 l/1); + --ig-warn-600: oklch(from var(--ig-warn-seed) 0.4588 min(c * 0.5673, 0.097) h); + --ig-warn-600-contrast: hsla(from color(from var(--ig-warn-600) var(--y-contrast)) h 0 l/1); + --ig-warn-700: oklch(from var(--ig-warn-seed) 0.3861 min(c * 0.4534, 0.0775) h); + --ig-warn-700-contrast: hsla(from color(from var(--ig-warn-700) var(--y-contrast)) h 0 l/1); + --ig-warn-800: oklch(from var(--ig-warn-seed) 0.3067 min(c * 0.3249, 0.0556) h); + --ig-warn-800-contrast: hsla(from color(from var(--ig-warn-800) var(--y-contrast)) h 0 l/1); + --ig-warn-900: oklch(from var(--ig-warn-seed) 0.2023 min(c * 0.1786, 0.0306) h); + --ig-warn-900-contrast: hsla(from color(from var(--ig-warn-900) var(--y-contrast)) h 0 l/1); + --ig-warn-seed: orange; + --ig-warn-seed-contrast: hsla(from color(from var(--ig-warn-seed) var(--y-contrast)) h 0 l/1); + --ig-warn-A100: oklch(from var(--ig-warn-seed) 0.8929 min(c * 0.496, 0.0848) calc(h + 1.551)); + --ig-warn-A100-contrast: hsla(from color(from var(--ig-warn-A100) var(--y-contrast)) h 0 l/1); + --ig-warn-A200: oklch(from var(--ig-warn-seed) 0.7161 min(c * 0.8994, 0.1538) h); + --ig-warn-A200-contrast: hsla(from color(from var(--ig-warn-A200) var(--y-contrast)) h 0 l/1); + --ig-warn-A400: oklch(from var(--ig-warn-seed) 0.5917 min(c * 0.7464, 0.1277) h); + --ig-warn-A400-contrast: hsla(from color(from var(--ig-warn-A400) var(--y-contrast)) h 0 l/1); + --ig-warn-A700: oklch(from var(--ig-warn-seed) 0.4975 min(c * 0.6276, 0.1073) h); + --ig-warn-A700-contrast: hsla(from color(from var(--ig-warn-A700) var(--y-contrast)) h 0 l/1); + --ig-error-50: oklch(from var(--ig-error-seed) 0.9437 min(c * 0.106, 0.0273) h); + --ig-error-50-contrast: hsla(from color(from var(--ig-error-50) var(--y-contrast)) h 0 l/1); + --ig-error-100: oklch(from var(--ig-error-seed) 0.8531 min(c * 0.3108, 0.0801) calc(h + 0.399)); + --ig-error-100-contrast: hsla(from color(from var(--ig-error-100) var(--y-contrast)) h 0 l/1); + --ig-error-200: oklch(from var(--ig-error-seed) 0.7729 min(c * 0.5202, 0.134) calc(h + 0.309)); + --ig-error-200-contrast: hsla(from color(from var(--ig-error-200) var(--y-contrast)) h 0 l/1); + --ig-error-300: oklch(from var(--ig-error-seed) 0.6976 min(c * 0.7485, 0.1929) h); + --ig-error-300-contrast: hsla(from color(from var(--ig-error-300) var(--y-contrast)) h 0 l/1); + --ig-error-400: oklch(from var(--ig-error-seed) 0.6235 min(c * 0.8417, 0.2169) h); + --ig-error-400-contrast: hsla(from color(from var(--ig-error-400) var(--y-contrast)) h 0 l/1); + --ig-error-500: oklch(from var(--ig-error-seed) 0.5497 min(c * 0.823, 0.2121) h); + --ig-error-500-contrast: hsla(from color(from var(--ig-error-500) var(--y-contrast)) h 0 l/1); + --ig-error-600: oklch(from var(--ig-error-seed) 0.4764 min(c * 0.7291, 0.1879) h); + --ig-error-600-contrast: hsla(from color(from var(--ig-error-600) var(--y-contrast)) h 0 l/1); + --ig-error-700: oklch(from var(--ig-error-seed) 0.4004 min(c * 0.59, 0.152) h); + --ig-error-700-contrast: hsla(from color(from var(--ig-error-700) var(--y-contrast)) h 0 l/1); + --ig-error-800: oklch(from var(--ig-error-seed) 0.3169 min(c * 0.4232, 0.1091) h); + --ig-error-800-contrast: hsla(from color(from var(--ig-error-800) var(--y-contrast)) h 0 l/1); + --ig-error-900: oklch(from var(--ig-error-seed) 0.2078 min(c * 0.2316, 0.0597) h); + --ig-error-900-contrast: hsla(from color(from var(--ig-error-900) var(--y-contrast)) h 0 l/1); + --ig-error-seed: red; + --ig-error-seed-contrast: hsla(from color(from var(--ig-error-seed) var(--y-contrast)) h 0 l/1); + --ig-error-A100: oklch(from var(--ig-error-seed) 0.902 min(c * 0.1992, 0.0513) calc(h + 2.141)); + --ig-error-A100-contrast: hsla(from color(from var(--ig-error-A100) var(--y-contrast)) h 0 l/1); + --ig-error-A200: oklch(from var(--ig-error-seed) 0.7258 min(c * 0.6599, 0.17) calc(h + 0.27)); + --ig-error-A200-contrast: hsla(from color(from var(--ig-error-A200) var(--y-contrast)) h 0 l/1); + --ig-error-A400: oklch(from var(--ig-error-seed) 0.6128 min(c * 0.9204, 0.2372) h); + --ig-error-A400-contrast: hsla(from color(from var(--ig-error-A400) var(--y-contrast)) h 0 l/1); + --ig-error-A700: oklch(from var(--ig-error-seed) 0.518 min(c * 0.8222, 0.2119) h); + --ig-error-A700-contrast: hsla(from color(from var(--ig-error-A700) var(--y-contrast)) h 0 l/1); +} + +/* END_OUTPUT */ +/* CONTAINED */ +:root { + --ig-primary-seed: #09f; + --ig-gray-seed: #333; +} + +/* END_CONTAINED */ +/* END_ASSERT */ +/* ASSERT: */ +/* OUTPUT */ +:root { + --ig-wcag-a: 0.31; + --ig-wcag-aa: 0.185; + --ig-wcag-aaa: 0.178; + --ig-contrast-level: var(--ig-wcag-aa); + --y: clamp(0, (y / var(--ig-contrast-level) - 1) * -infinity, 1); + --y-contrast: xyz-d65 var(--y) var(--y) var(--y); +} + +:root { + --ig-primary-50: oklch(from var(--ig-primary-seed) 0.9402 min(c * 0.1264, 0.0232) calc(h + 6.804)); + --ig-primary-50-contrast: hsla(from color(from var(--ig-primary-50) var(--y-contrast)) h 0 l/1); + --ig-primary-100: oklch(from var(--ig-primary-seed) 0.844 min(c * 0.3941, 0.0724) calc(h + 4.879)); + --ig-primary-100-contrast: hsla(from color(from var(--ig-primary-100) var(--y-contrast)) h 0 l/1); + --ig-primary-200: oklch(from var(--ig-primary-seed) 0.7551 min(c * 0.6602, 0.1213) calc(h + 3.103)); + --ig-primary-200-contrast: hsla(from color(from var(--ig-primary-200) var(--y-contrast)) h 0 l/1); + --ig-primary-300: oklch(from var(--ig-primary-seed) 0.6742 min(c * 0.8212, 0.1508) calc(h + 1.484)); + --ig-primary-300-contrast: hsla(from color(from var(--ig-primary-300) var(--y-contrast)) h 0 l/1); + --ig-primary-400: oklch(from var(--ig-primary-seed) 0.5973 min(c * 0.8367, 0.1537) h); + --ig-primary-400-contrast: hsla(from color(from var(--ig-primary-400) var(--y-contrast)) h 0 l/1); + --ig-primary-500: oklch(from var(--ig-primary-seed) 0.5244 min(c * 0.7664, 0.1408) h); + --ig-primary-500-contrast: hsla(from color(from var(--ig-primary-500) var(--y-contrast)) h 0 l/1); + --ig-primary-600: oklch(from var(--ig-primary-seed) 0.4535 min(c * 0.6602, 0.1213) h); + --ig-primary-600-contrast: hsla(from color(from var(--ig-primary-600) var(--y-contrast)) h 0 l/1); + --ig-primary-700: oklch(from var(--ig-primary-seed) 0.3818 min(c * 0.5301, 0.0974) h); + --ig-primary-700-contrast: hsla(from color(from var(--ig-primary-700) var(--y-contrast)) h 0 l/1); + --ig-primary-800: oklch(from var(--ig-primary-seed) 0.3034 min(c * 0.3808, 0.0699) h); + --ig-primary-800-contrast: hsla(from color(from var(--ig-primary-800) var(--y-contrast)) h 0 l/1); + --ig-primary-900: oklch(from var(--ig-primary-seed) 0.2004 min(c * 0.2097, 0.0385) h); + --ig-primary-900-contrast: hsla(from color(from var(--ig-primary-900) var(--y-contrast)) h 0 l/1); + --ig-primary-seed: #09f; + --ig-primary-seed-contrast: hsla(from color(from var(--ig-primary-seed) var(--y-contrast)) h 0 l/1); + --ig-primary-A100: oklch(from var(--ig-primary-seed) 0.889 min(c * 0.3037, 0.0558) calc(h + 2.817)); + --ig-primary-A100-contrast: hsla(from color(from var(--ig-primary-A100) var(--y-contrast)) h 0 l/1); + --ig-primary-A200: oklch(from var(--ig-primary-seed) 0.7075 min(c * 0.8606, 0.1581) calc(h + 2.149)); + --ig-primary-A200-contrast: hsla(from color(from var(--ig-primary-A200) var(--y-contrast)) h 0 l/1); + --ig-primary-A400: oklch(from var(--ig-primary-seed) 0.5847 min(c * 0.8681, 0.1595) h); + --ig-primary-A400-contrast: hsla(from color(from var(--ig-primary-A400) var(--y-contrast)) h 0 l/1); + --ig-primary-A700: oklch(from var(--ig-primary-seed) 0.4923 min(c * 0.7355, 0.1351) h); + --ig-primary-A700-contrast: hsla(from color(from var(--ig-primary-A700) var(--y-contrast)) h 0 l/1); + --ig-secondary-50: oklch(from var(--ig-secondary-seed) 0.9463 min(c * 0.1097, 0.0141) calc(h + 6.926)); + --ig-secondary-50-contrast: hsla(from color(from var(--ig-secondary-50) var(--y-contrast)) h 0 l/1); + --ig-secondary-100: oklch(from var(--ig-secondary-seed) 0.8515 min(c * 0.3639, 0.0467) calc(h + 5.03)); + --ig-secondary-100-contrast: hsla(from color(from var(--ig-secondary-100) var(--y-contrast)) h 0 l/1); + --ig-secondary-200: oklch(from var(--ig-secondary-seed) 0.7653 min(c * 0.6343, 0.0814) calc(h + 3.307)); + --ig-secondary-200-contrast: hsla(from color(from var(--ig-secondary-200) var(--y-contrast)) h 0 l/1); + --ig-secondary-300: oklch(from var(--ig-secondary-seed) 0.6845 min(c * 0.8792, 0.1128) calc(h + 1.691)); + --ig-secondary-300-contrast: hsla(from color(from var(--ig-secondary-300) var(--y-contrast)) h 0 l/1); + --ig-secondary-400: oklch(from var(--ig-secondary-seed) 0.6101 min(c * 1.0415, 0.1336) calc(h + 0.203)); + --ig-secondary-400-contrast: hsla(from color(from var(--ig-secondary-400) var(--y-contrast)) h 0 l/1); + --ig-secondary-500: oklch(from var(--ig-secondary-seed) 0.5386 min(c * 1.0863, 0.1394) h); + --ig-secondary-500-contrast: hsla(from color(from var(--ig-secondary-500) var(--y-contrast)) h 0 l/1); + --ig-secondary-600: oklch(from var(--ig-secondary-seed) 0.4674 min(c * 1.0083, 0.1294) h); + --ig-secondary-600-contrast: hsla(from color(from var(--ig-secondary-600) var(--y-contrast)) h 0 l/1); + --ig-secondary-700: oklch(from var(--ig-secondary-seed) 0.3933 min(c * 0.835, 0.1071) h); + --ig-secondary-700-contrast: hsla(from color(from var(--ig-secondary-700) var(--y-contrast)) h 0 l/1); + --ig-secondary-800: oklch(from var(--ig-secondary-seed) 0.3118 min(c * 0.605, 0.0776) h); + --ig-secondary-800-contrast: hsla(from color(from var(--ig-secondary-800) var(--y-contrast)) h 0 l/1); + --ig-secondary-900: oklch(from var(--ig-secondary-seed) 0.205 min(c * 0.3327, 0.0427) h); + --ig-secondary-900-contrast: hsla(from color(from var(--ig-secondary-900) var(--y-contrast)) h 0 l/1); + --ig-secondary-seed: #97c; + --ig-secondary-seed-contrast: hsla(from color(from var(--ig-secondary-seed) var(--y-contrast)) h 0 l/1); + --ig-secondary-A100: oklch(from var(--ig-secondary-seed) 0.8923 min(c * 0.5334, 0.0684) calc(h + 6.928)); + --ig-secondary-A100-contrast: hsla(from color(from var(--ig-secondary-A100) var(--y-contrast)) h 0 l/1); + --ig-secondary-A200: oklch(from var(--ig-secondary-seed) 0.727 min(c * 1.3792, 0.177) calc(h + 3.291)); + --ig-secondary-A200-contrast: hsla(from color(from var(--ig-secondary-A200) var(--y-contrast)) h 0 l/1); + --ig-secondary-A400: oklch(from var(--ig-secondary-seed) 0.6148 min(c * 1.9646, 0.2521) calc(h + 0.357)); + --ig-secondary-A400-contrast: hsla(from color(from var(--ig-secondary-A400) var(--y-contrast)) h 0 l/1); + --ig-secondary-A700: oklch(from var(--ig-secondary-seed) 0.5283 min(c * 2.0936, 0.2686) h); + --ig-secondary-A700-contrast: hsla(from color(from var(--ig-secondary-A700) var(--y-contrast)) h 0 l/1); + --ig-gray-50: oklch(from var(--ig-gray-seed) 0.9404 0 0); + --ig-gray-50-contrast: hsla(from color(from var(--ig-gray-50) var(--y-contrast)) h 0 l/1); + --ig-gray-100: oklch(from var(--ig-gray-seed) 0.8448 0 0); + --ig-gray-100-contrast: hsla(from color(from var(--ig-gray-100) var(--y-contrast)) h 0 l/1); + --ig-gray-200: oklch(from var(--ig-gray-seed) 0.7562 0 0); + --ig-gray-200-contrast: hsla(from color(from var(--ig-gray-200) var(--y-contrast)) h 0 l/1); + --ig-gray-300: oklch(from var(--ig-gray-seed) 0.6749 0 0); + --ig-gray-300-contrast: hsla(from color(from var(--ig-gray-300) var(--y-contrast)) h 0 l/1); + --ig-gray-400: oklch(from var(--ig-gray-seed) 0.598 0 0); + --ig-gray-400-contrast: hsla(from color(from var(--ig-gray-400) var(--y-contrast)) h 0 l/1); + --ig-gray-500: oklch(from var(--ig-gray-seed) 0.5248 0 0); + --ig-gray-500-contrast: hsla(from color(from var(--ig-gray-500) var(--y-contrast)) h 0 l/1); + --ig-gray-600: oklch(from var(--ig-gray-seed) 0.4539 0 0); + --ig-gray-600-contrast: hsla(from color(from var(--ig-gray-600) var(--y-contrast)) h 0 l/1); + --ig-gray-700: oklch(from var(--ig-gray-seed) 0.3822 0 0); + --ig-gray-700-contrast: hsla(from color(from var(--ig-gray-700) var(--y-contrast)) h 0 l/1); + --ig-gray-800: oklch(from var(--ig-gray-seed) 0.304 0 0); + --ig-gray-800-contrast: hsla(from color(from var(--ig-gray-800) var(--y-contrast)) h 0 l/1); + --ig-gray-900: oklch(from var(--ig-gray-seed) 0.2009 0 0); + --ig-gray-900-contrast: hsla(from color(from var(--ig-gray-900) var(--y-contrast)) h 0 l/1); + --ig-gray-seed: #000; + --ig-gray-seed-contrast: hsla(from color(from var(--ig-gray-seed) var(--y-contrast)) h 0 l/1); + --ig-surface-50: hsl(from var(--ig-surface-500) h calc(s * 1.23) calc(l * 1.78)); + --ig-surface-50-contrast: hsla(from color(from var(--ig-surface-50) var(--y-contrast)) h 0 l/1); + --ig-surface-100: hsl(from var(--ig-surface-500) h calc(s * 0.8) calc(l * 1.66)); + --ig-surface-100-contrast: hsla(from color(from var(--ig-surface-100) var(--y-contrast)) h 0 l/1); + --ig-surface-200: hsl(from var(--ig-surface-500) h calc(s * 0.64) calc(l * 1.43)); + --ig-surface-200-contrast: hsla(from color(from var(--ig-surface-200) var(--y-contrast)) h 0 l/1); + --ig-surface-300: hsl(from var(--ig-surface-500) h calc(s * 0.73) calc(l * 1.19)); + --ig-surface-300-contrast: hsla(from color(from var(--ig-surface-300) var(--y-contrast)) h 0 l/1); + --ig-surface-400: hsl(from var(--ig-surface-500) h calc(s * 0.875) calc(l * 1.08)); + --ig-surface-400-contrast: hsla(from color(from var(--ig-surface-400) var(--y-contrast)) h 0 l/1); + --ig-surface-500: #fff; + --ig-surface-500-contrast: hsla(from color(from var(--ig-surface-500) var(--y-contrast)) h 0 l/1); + --ig-surface-600: hsl(from var(--ig-surface-500) h calc(s * 1.26) calc(l * 0.89)); + --ig-surface-600-contrast: hsla(from color(from var(--ig-surface-600) var(--y-contrast)) h 0 l/1); + --ig-surface-700: hsl(from var(--ig-surface-500) h calc(s * 1.26) calc(l * 0.81)); + --ig-surface-700-contrast: hsla(from color(from var(--ig-surface-700) var(--y-contrast)) h 0 l/1); + --ig-surface-800: hsl(from var(--ig-surface-500) h calc(s * 1.26) calc(l * 0.73)); + --ig-surface-800-contrast: hsla(from color(from var(--ig-surface-800) var(--y-contrast)) h 0 l/1); + --ig-surface-900: hsl(from var(--ig-surface-500) h calc(s * 1.26) calc(l * 0.64)); + --ig-surface-900-contrast: hsla(from color(from var(--ig-surface-900) var(--y-contrast)) h 0 l/1); + --ig-surface-seed: #fff; + --ig-surface-seed-contrast: hsla(from color(from var(--ig-surface-seed) var(--y-contrast)) h 0 l/1); + --ig-surface-A100: hsl(from var(--ig-surface-500) h calc(s * 1.23) calc(l * 1.34)); + --ig-surface-A100-contrast: hsla(from color(from var(--ig-surface-A100) var(--y-contrast)) h 0 l/1); + --ig-surface-A200: hsl(from var(--ig-surface-500) h calc(s * 1.22) calc(l * 1.16)); + --ig-surface-A200-contrast: hsla(from color(from var(--ig-surface-A200) var(--y-contrast)) h 0 l/1); + --ig-surface-A400: hsl(from var(--ig-surface-500) h calc(s * 1.23) calc(l * 0.91)); + --ig-surface-A400-contrast: hsla(from color(from var(--ig-surface-A400) var(--y-contrast)) h 0 l/1); + --ig-surface-A700: hsl(from var(--ig-surface-500) h calc(s * 1.23) calc(l * 0.65)); + --ig-surface-A700-contrast: hsla(from color(from var(--ig-surface-A700) var(--y-contrast)) h 0 l/1); + --ig-info-50: oklch(from var(--ig-info-seed) 0.9453 min(c * 0.0689, 0.0216) calc(h + 13.046)); + --ig-info-50-contrast: hsla(from color(from var(--ig-info-50) var(--y-contrast)) h 0 l/1); + --ig-info-100: oklch(from var(--ig-info-seed) 0.8466 min(c * 0.232, 0.0727) calc(h + 9.788)); + --ig-info-100-contrast: hsla(from color(from var(--ig-info-100) var(--y-contrast)) h 0 l/1); + --ig-info-200: oklch(from var(--ig-info-seed) 0.7599 min(c * 0.3904, 0.1223) calc(h + 6.738)); + --ig-info-200-contrast: hsla(from color(from var(--ig-info-200) var(--y-contrast)) h 0 l/1); + --ig-info-300: oklch(from var(--ig-info-seed) 0.6808 min(c * 0.5346, 0.1674) calc(h + 4.112)); + --ig-info-300-contrast: hsla(from color(from var(--ig-info-300) var(--y-contrast)) h 0 l/1); + --ig-info-400: oklch(from var(--ig-info-seed) 0.6081 min(c * 0.675, 0.2114) calc(h + 1.897)); + --ig-info-400-contrast: hsla(from color(from var(--ig-info-400) var(--y-contrast)) h 0 l/1); + --ig-info-500: oklch(from var(--ig-info-seed) 0.5394 min(c * 0.7548, 0.2364) h); + --ig-info-500-contrast: hsla(from color(from var(--ig-info-500) var(--y-contrast)) h 0 l/1); + --ig-info-600: oklch(from var(--ig-info-seed) 0.4709 min(c * 0.7545, 0.2363) h); + --ig-info-600-contrast: hsla(from color(from var(--ig-info-600) var(--y-contrast)) h 0 l/1); + --ig-info-700: oklch(from var(--ig-info-seed) 0.3981 min(c * 0.6608, 0.207) h); + --ig-info-700-contrast: hsla(from color(from var(--ig-info-700) var(--y-contrast)) h 0 l/1); + --ig-info-800: oklch(from var(--ig-info-seed) 0.3148 min(c * 0.4898, 0.1534) h); + --ig-info-800-contrast: hsla(from color(from var(--ig-info-800) var(--y-contrast)) h 0 l/1); + --ig-info-900: oklch(from var(--ig-info-seed) 0.2057 min(c * 0.2698, 0.0845) h); + --ig-info-900-contrast: hsla(from color(from var(--ig-info-900) var(--y-contrast)) h 0 l/1); + --ig-info-seed: blue; + --ig-info-seed-contrast: hsla(from color(from var(--ig-info-seed) var(--y-contrast)) h 0 l/1); + --ig-info-A100: oklch(from var(--ig-info-seed) 0.8909 min(c * 0.1693, 0.053) calc(h + 10.08)); + --ig-info-A100-contrast: hsla(from color(from var(--ig-info-A100) var(--y-contrast)) h 0 l/1); + --ig-info-A200: oklch(from var(--ig-info-seed) 0.7136 min(c * 0.4738, 0.1484) calc(h + 4.928)); + --ig-info-A200-contrast: hsla(from color(from var(--ig-info-A200) var(--y-contrast)) h 0 l/1); + --ig-info-A400: oklch(from var(--ig-info-seed) 0.5968 min(c * 0.6976, 0.2185) calc(h + 1.491)); + --ig-info-A400-contrast: hsla(from color(from var(--ig-info-A400) var(--y-contrast)) h 0 l/1); + --ig-info-A700: oklch(from var(--ig-info-seed) 0.512 min(c * 0.836, 0.2619) h); + --ig-info-A700-contrast: hsla(from color(from var(--ig-info-A700) var(--y-contrast)) h 0 l/1); + --ig-success-50: oklch(from var(--ig-success-seed) 0.9305 min(c * 0.5993, 0.106) h); + --ig-success-50-contrast: hsla(from color(from var(--ig-success-50) var(--y-contrast)) h 0 l/1); + --ig-success-100: oklch(from var(--ig-success-seed) 0.8227 min(c * 1.2544, 0.2219) h); + --ig-success-100-contrast: hsla(from color(from var(--ig-success-100) var(--y-contrast)) h 0 l/1); + --ig-success-200: oklch(from var(--ig-success-seed) 0.7358 min(c * 1.307, 0.2312) h); + --ig-success-200-contrast: hsla(from color(from var(--ig-success-200) var(--y-contrast)) h 0 l/1); + --ig-success-300: oklch(from var(--ig-success-seed) 0.6543 min(c * 1.2323, 0.2179) h); + --ig-success-300-contrast: hsla(from color(from var(--ig-success-300) var(--y-contrast)) h 0 l/1); + --ig-success-400: oklch(from var(--ig-success-seed) 0.5793 min(c * 1.1126, 0.1968) h); + --ig-success-400-contrast: hsla(from color(from var(--ig-success-400) var(--y-contrast)) h 0 l/1); + --ig-success-500: oklch(from var(--ig-success-seed) 0.5083 min(c * 0.9766, 0.1727) h); + --ig-success-500-contrast: hsla(from color(from var(--ig-success-500) var(--y-contrast)) h 0 l/1); + --ig-success-600: oklch(from var(--ig-success-seed) 0.4397 min(c * 0.8297, 0.1467) h); + --ig-success-600-contrast: hsla(from color(from var(--ig-success-600) var(--y-contrast)) h 0 l/1); + --ig-success-700: oklch(from var(--ig-success-seed) 0.371 min(c * 0.6646, 0.1175) h); + --ig-success-700-contrast: hsla(from color(from var(--ig-success-700) var(--y-contrast)) h 0 l/1); + --ig-success-800: oklch(from var(--ig-success-seed) 0.2958 min(c * 0.4781, 0.0846) h); + --ig-success-800-contrast: hsla(from color(from var(--ig-success-800) var(--y-contrast)) h 0 l/1); + --ig-success-900: oklch(from var(--ig-success-seed) 0.1964 min(c * 0.2645, 0.0468) h); + --ig-success-900-contrast: hsla(from color(from var(--ig-success-900) var(--y-contrast)) h 0 l/1); + --ig-success-seed: green; + --ig-success-seed-contrast: hsla(from color(from var(--ig-success-seed) var(--y-contrast)) h 0 l/1); + --ig-success-A100: oklch(from var(--ig-success-seed) 0.8632 min(c * 1.5429, 0.2729) h); + --ig-success-A100-contrast: hsla(from color(from var(--ig-success-A100) var(--y-contrast)) h 0 l/1); + --ig-success-A200: oklch(from var(--ig-success-seed) 0.686 min(c * 1.3198, 0.2334) h); + --ig-success-A200-contrast: hsla(from color(from var(--ig-success-A200) var(--y-contrast)) h 0 l/1); + --ig-success-A400: oklch(from var(--ig-success-seed) 0.5668 min(c * 1.0906, 0.1929) h); + --ig-success-A400-contrast: hsla(from color(from var(--ig-success-A400) var(--y-contrast)) h 0 l/1); + --ig-success-A700: oklch(from var(--ig-success-seed) 0.4769 min(c * 0.9176, 0.1623) h); + --ig-success-A700-contrast: hsla(from color(from var(--ig-success-A700) var(--y-contrast)) h 0 l/1); + --ig-warn-50: oklch(from var(--ig-warn-seed) 0.946 min(c * 0.1822, 0.0312) h); + --ig-warn-50-contrast: hsla(from color(from var(--ig-warn-50) var(--y-contrast)) h 0 l/1); + --ig-warn-100: oklch(from var(--ig-warn-seed) 0.8514 min(c * 0.5754, 0.0984) h); + --ig-warn-100-contrast: hsla(from color(from var(--ig-warn-100) var(--y-contrast)) h 0 l/1); + --ig-warn-200: oklch(from var(--ig-warn-seed) 0.7625 min(c * 0.8096, 0.1385) h); + --ig-warn-200-contrast: hsla(from color(from var(--ig-warn-200) var(--y-contrast)) h 0 l/1); + --ig-warn-300: oklch(from var(--ig-warn-seed) 0.6821 min(c * 0.8243, 0.141) h); + --ig-warn-300-contrast: hsla(from color(from var(--ig-warn-300) var(--y-contrast)) h 0 l/1); + --ig-warn-400: oklch(from var(--ig-warn-seed) 0.6047 min(c * 0.757, 0.1295) h); + --ig-warn-400-contrast: hsla(from color(from var(--ig-warn-400) var(--y-contrast)) h 0 l/1); + --ig-warn-500: oklch(from var(--ig-warn-seed) 0.5307 min(c * 0.6674, 0.1141) h); + --ig-warn-500-contrast: hsla(from color(from var(--ig-warn-500) var(--y-contrast)) h 0 l/1); + --ig-warn-600: oklch(from var(--ig-warn-seed) 0.4588 min(c * 0.5673, 0.097) h); + --ig-warn-600-contrast: hsla(from color(from var(--ig-warn-600) var(--y-contrast)) h 0 l/1); + --ig-warn-700: oklch(from var(--ig-warn-seed) 0.3861 min(c * 0.4534, 0.0775) h); + --ig-warn-700-contrast: hsla(from color(from var(--ig-warn-700) var(--y-contrast)) h 0 l/1); + --ig-warn-800: oklch(from var(--ig-warn-seed) 0.3067 min(c * 0.3249, 0.0556) h); + --ig-warn-800-contrast: hsla(from color(from var(--ig-warn-800) var(--y-contrast)) h 0 l/1); + --ig-warn-900: oklch(from var(--ig-warn-seed) 0.2023 min(c * 0.1786, 0.0306) h); + --ig-warn-900-contrast: hsla(from color(from var(--ig-warn-900) var(--y-contrast)) h 0 l/1); + --ig-warn-seed: orange; + --ig-warn-seed-contrast: hsla(from color(from var(--ig-warn-seed) var(--y-contrast)) h 0 l/1); + --ig-warn-A100: oklch(from var(--ig-warn-seed) 0.8929 min(c * 0.496, 0.0848) calc(h + 1.551)); + --ig-warn-A100-contrast: hsla(from color(from var(--ig-warn-A100) var(--y-contrast)) h 0 l/1); + --ig-warn-A200: oklch(from var(--ig-warn-seed) 0.7161 min(c * 0.8994, 0.1538) h); + --ig-warn-A200-contrast: hsla(from color(from var(--ig-warn-A200) var(--y-contrast)) h 0 l/1); + --ig-warn-A400: oklch(from var(--ig-warn-seed) 0.5917 min(c * 0.7464, 0.1277) h); + --ig-warn-A400-contrast: hsla(from color(from var(--ig-warn-A400) var(--y-contrast)) h 0 l/1); + --ig-warn-A700: oklch(from var(--ig-warn-seed) 0.4975 min(c * 0.6276, 0.1073) h); + --ig-warn-A700-contrast: hsla(from color(from var(--ig-warn-A700) var(--y-contrast)) h 0 l/1); + --ig-error-50: oklch(from var(--ig-error-seed) 0.9437 min(c * 0.106, 0.0273) h); + --ig-error-50-contrast: hsla(from color(from var(--ig-error-50) var(--y-contrast)) h 0 l/1); + --ig-error-100: oklch(from var(--ig-error-seed) 0.8531 min(c * 0.3108, 0.0801) calc(h + 0.399)); + --ig-error-100-contrast: hsla(from color(from var(--ig-error-100) var(--y-contrast)) h 0 l/1); + --ig-error-200: oklch(from var(--ig-error-seed) 0.7729 min(c * 0.5202, 0.134) calc(h + 0.309)); + --ig-error-200-contrast: hsla(from color(from var(--ig-error-200) var(--y-contrast)) h 0 l/1); + --ig-error-300: oklch(from var(--ig-error-seed) 0.6976 min(c * 0.7485, 0.1929) h); + --ig-error-300-contrast: hsla(from color(from var(--ig-error-300) var(--y-contrast)) h 0 l/1); + --ig-error-400: oklch(from var(--ig-error-seed) 0.6235 min(c * 0.8417, 0.2169) h); + --ig-error-400-contrast: hsla(from color(from var(--ig-error-400) var(--y-contrast)) h 0 l/1); + --ig-error-500: oklch(from var(--ig-error-seed) 0.5497 min(c * 0.823, 0.2121) h); + --ig-error-500-contrast: hsla(from color(from var(--ig-error-500) var(--y-contrast)) h 0 l/1); + --ig-error-600: oklch(from var(--ig-error-seed) 0.4764 min(c * 0.7291, 0.1879) h); + --ig-error-600-contrast: hsla(from color(from var(--ig-error-600) var(--y-contrast)) h 0 l/1); + --ig-error-700: oklch(from var(--ig-error-seed) 0.4004 min(c * 0.59, 0.152) h); + --ig-error-700-contrast: hsla(from color(from var(--ig-error-700) var(--y-contrast)) h 0 l/1); + --ig-error-800: oklch(from var(--ig-error-seed) 0.3169 min(c * 0.4232, 0.1091) h); + --ig-error-800-contrast: hsla(from color(from var(--ig-error-800) var(--y-contrast)) h 0 l/1); + --ig-error-900: oklch(from var(--ig-error-seed) 0.2078 min(c * 0.2316, 0.0597) h); + --ig-error-900-contrast: hsla(from color(from var(--ig-error-900) var(--y-contrast)) h 0 l/1); + --ig-error-seed: red; + --ig-error-seed-contrast: hsla(from color(from var(--ig-error-seed) var(--y-contrast)) h 0 l/1); + --ig-error-A100: oklch(from var(--ig-error-seed) 0.902 min(c * 0.1992, 0.0513) calc(h + 2.141)); + --ig-error-A100-contrast: hsla(from color(from var(--ig-error-A100) var(--y-contrast)) h 0 l/1); + --ig-error-A200: oklch(from var(--ig-error-seed) 0.7258 min(c * 0.6599, 0.17) calc(h + 0.27)); + --ig-error-A200-contrast: hsla(from color(from var(--ig-error-A200) var(--y-contrast)) h 0 l/1); + --ig-error-A400: oklch(from var(--ig-error-seed) 0.6128 min(c * 0.9204, 0.2372) h); + --ig-error-A400-contrast: hsla(from color(from var(--ig-error-A400) var(--y-contrast)) h 0 l/1); + --ig-error-A700: oklch(from var(--ig-error-seed) 0.518 min(c * 0.8222, 0.2119) h); + --ig-error-A700-contrast: hsla(from color(from var(--ig-error-A700) var(--y-contrast)) h 0 l/1); +} + +/* END_OUTPUT */ +/* CONTAINED */ +:root { + --ig-primary-seed: #09f; + --ig-gray-seed: #000; +} + +/* END_CONTAINED */ +/* END_ASSERT */ +/* */ +/* */ +/* */ +/* */ +/* # Module: Typography */ +/* -------------------- */ +/* # Module: Typography :: operations */ +/* ---------------------------------- */ +/* Test: should convert pixel numbers to rem */ +/* ✔ [assert-equal] should convert pixel numbers to rem */ +/* */ +/* Test: should convert unitless numbers to rem */ +/* ✔ [assert-equal] should convert unitless numbers to rem */ +/* */ +/* Test: should convert pixel numbers to em */ +/* ✔ [assert-equal] should convert pixel numbers to em */ +/* */ +/* Test: should convert unitless numbers to em */ +/* ✔ [assert-equal] should convert unitless numbers to em */ +/* */ +/* Test: should convert relative unit numbers to pixels */ +/* ✔ [assert-equal] should convert relative unit numbers to pixels */ +/* ✔ [assert-equal] should convert relative unit numbers to pixels */ +/* */ +/* Test: should convert unitless numbers to pixels */ +/* ✔ [assert-equal] should convert unitless numbers to pixels */ +/* */ +/* */ +/* # Module: Typography :: generation */ +/* ---------------------------------- */ +/* Test: should produce a map of default type style rules matching the ITypeStyle map */ +/* ✔ [assert-equal] should produce a map of default type style rules matching the ITypeStyle map */ +/* ✔ [assert-equal] should produce a map of default type style rules matching the ITypeStyle map */ +/* ✔ [assert-equal] should produce a map of default type style rules matching the ITypeStyle map */ +/* ✔ [assert-equal] should produce a map of default type style rules matching the ITypeStyle map */ +/* ✔ [assert-equal] should produce a map of default type style rules matching the ITypeStyle map */ +/* ✔ [assert-equal] should produce a map of default type style rules matching the ITypeStyle map */ +/* ✔ [assert-equal] should produce a map of default type style rules matching the ITypeStyle map */ +/* ✔ [assert-equal] should produce a map of default type style rules matching the ITypeStyle map */ +/* ✔ [assert-equal] should produce a map of default type style rules matching the ITypeStyle map */ +/* */ +/* Test: should only produce a map of allowed type style rules */ +/* ✔ [assert-equal] should only produce a map of allowed type style rules */ +/* ✔ [assert-equal] should only produce a map of allowed type style rules */ +/* ✔ [assert-equal] should only produce a map of allowed type style rules */ +/* ✔ [assert-equal] should only produce a map of allowed type style rules */ +/* ✔ [assert-equal] should only produce a map of allowed type style rules */ +/* ✔ [assert-equal] should only produce a map of allowed type style rules */ +/* ✔ [assert-equal] should only produce a map of allowed type style rules */ +/* ✔ [assert-equal] should only produce a map of allowed type style rules */ +/* ✔ [assert-equal] should only produce a map of allowed type style rules */ +/* ✔ [assert-false] should only produce a map of allowed type style rules */ +/* */ +/* Test: should produce a type scale map of type style values for each category */ +/* ✔ [assert-equal] should produce a type scale map of type style values for each category */ +/* ✔ [assert-equal] should produce a type scale map of type style values for each category */ +/* ✔ [assert-equal] should produce a type scale map of type style values for each category */ +/* ✔ [assert-equal] should produce a type scale map of type style values for each category */ +/* ✔ [assert-equal] should produce a type scale map of type style values for each category */ +/* ✔ [assert-equal] should produce a type scale map of type style values for each category */ +/* ✔ [assert-equal] should produce a type scale map of type style values for each category */ +/* ✔ [assert-equal] should produce a type scale map of type style values for each category */ +/* ✔ [assert-equal] should produce a type scale map of type style values for each category */ +/* ✔ [assert-equal] should produce a type scale map of type style values for each category */ +/* ✔ [assert-equal] should produce a type scale map of type style values for each category */ +/* ✔ [assert-equal] should produce a type scale map of type style values for each category */ +/* ✔ [assert-equal] should produce a type scale map of type style values for each category */ +/* ✔ [assert-equal] should produce a type scale map of type style values for each category */ +/* */ +/* Test: should retreive type styles from a scale */ +/* ✔ [assert-equal] should retreive type styles from a scale */ +/* ✔ [assert-equal] should retreive type styles from a scale */ +/* ✔ [assert-equal] should retreive type styles from a scale */ +/* ✔ [assert-equal] should retreive type styles from a scale */ +/* ✔ [assert-equal] should retreive type styles from a scale */ +/* ✔ [assert-equal] should retreive type styles from a scale */ +/* ✔ [assert-equal] should retreive type styles from a scale */ +/* ✔ [assert-equal] should retreive type styles from a scale */ +/* ✔ [assert-equal] should retreive type styles from a scale */ +/* */ +/* Test: generates CSS variables from a type style map without font-family if its value is "inherit" */ +/* ASSERT: */ +/* OUTPUT */ +.test-output { + --ig-h1-font-size: 96px; + --ig-h1-font-weight: normal; + --ig-h1-font-style: normal; + --ig-h1-line-height: normal; + --ig-h1-letter-spacing: normal; + --ig-h1-text-transform: none; + --ig-h1-margin-top: 0; + --ig-h1-margin-bottom: 0; +} + +/* END_OUTPUT */ +/* EXPECTED */ +.test-output { + --ig-h1-font-size: 96px; + --ig-h1-font-weight: normal; + --ig-h1-font-style: normal; + --ig-h1-line-height: normal; + --ig-h1-letter-spacing: normal; + --ig-h1-text-transform: none; + --ig-h1-margin-top: 0; + --ig-h1-margin-bottom: 0; +} + +/* END_EXPECTED */ +/* END_ASSERT */ +/* */ +/* Test: generates CSS variables for a type style map with font-family if its value is not "inherit" */ +/* ASSERT: */ +/* OUTPUT */ +.test-output { + --ig-h1-font-family: 'American Typewriter', serif; + --ig-h1-font-size: 96px; + --ig-h1-font-weight: normal; + --ig-h1-font-style: normal; + --ig-h1-line-height: normal; + --ig-h1-letter-spacing: normal; + --ig-h1-text-transform: none; + --ig-h1-margin-top: 0; + --ig-h1-margin-bottom: 0; +} + +/* END_OUTPUT */ +/* EXPECTED */ +.test-output { + --ig-h1-font-family: 'American Typewriter', serif; + --ig-h1-font-size: 96px; + --ig-h1-font-weight: normal; + --ig-h1-font-style: normal; + --ig-h1-line-height: normal; + --ig-h1-letter-spacing: normal; + --ig-h1-text-transform: none; + --ig-h1-margin-top: 0; + --ig-h1-margin-bottom: 0; +} + +/* END_EXPECTED */ +/* END_ASSERT */ +/* */ +/* Test: should include all styles from a custom type category */ +/* ASSERT: */ +/* OUTPUT */ +.test-output { + font-family: var(--ig-calendar-labels-font-family, var(--ig-font-family)); + font-size: var(--ig-calendar-labels-font-size); + font-weight: var(--ig-calendar-labels-font-weight); + font-style: var(--ig-calendar-labels-font-style); + line-height: var(--ig-calendar-labels-line-height); + letter-spacing: var(--ig-calendar-labels-letter-spacing); + text-transform: var(--ig-calendar-labels-text-transform); + margin-top: var(--ig-calendar-labels-margin-top); + margin-bottom: var(--ig-calendar-labels-margin-bottom); +} + +/* END_OUTPUT */ +/* EXPECTED */ +.test-output { + font-family: var(--ig-calendar-labels-font-family, var(--ig-font-family)); + font-size: var(--ig-calendar-labels-font-size); + font-weight: var(--ig-calendar-labels-font-weight); + font-style: var(--ig-calendar-labels-font-style); + line-height: var(--ig-calendar-labels-line-height); + letter-spacing: var(--ig-calendar-labels-letter-spacing); + text-transform: var(--ig-calendar-labels-text-transform); + margin-top: var(--ig-calendar-labels-margin-top); + margin-bottom: var(--ig-calendar-labels-margin-bottom); +} + +/* END_EXPECTED */ +/* END_ASSERT */ +/* */ +/* Test: should include type styles with CSS var refs as values for a specific category */ +/* ASSERT: */ +/* OUTPUT */ +.test-output .my-h1 { + font-family: var(--ig-h1-font-family, var(--ig-font-family)); + font-size: var(--ig-h1-font-size); + font-weight: var(--ig-h1-font-weight); + font-style: var(--ig-h1-font-style); + line-height: var(--ig-h1-line-height); + letter-spacing: var(--ig-h1-letter-spacing); + text-transform: var(--ig-h1-text-transform); + margin-top: var(--ig-h1-margin-top); + margin-bottom: var(--ig-h1-margin-bottom); +} + +/* END_OUTPUT */ +/* EXPECTED */ +.test-output .my-h1 { + font-family: var(--ig-h1-font-family, var(--ig-font-family)); + font-size: var(--ig-h1-font-size); + font-weight: var(--ig-h1-font-weight); + font-style: var(--ig-h1-font-style); + line-height: var(--ig-h1-line-height); + letter-spacing: var(--ig-h1-letter-spacing); + text-transform: var(--ig-h1-text-transform); + margin-top: var(--ig-h1-margin-top); + margin-bottom: var(--ig-h1-margin-bottom); +} + +/* END_EXPECTED */ +/* END_ASSERT */ +/* */ +/* Test: should include CSS classes with style rules for all categories in a type scale */ +/* ASSERT: */ +/* OUTPUT */ +.ig-typography .ig-typography__h1 { + font-family: var(--ig-h1-font-family, var(--ig-font-family)); + font-size: var(--ig-h1-font-size); + font-weight: var(--ig-h1-font-weight); + font-style: var(--ig-h1-font-style); + line-height: var(--ig-h1-line-height); + letter-spacing: var(--ig-h1-letter-spacing); + text-transform: var(--ig-h1-text-transform); + margin-top: var(--ig-h1-margin-top); + margin-bottom: var(--ig-h1-margin-bottom); +} +.ig-typography .ig-typography__h2 { + font-family: var(--ig-h2-font-family, var(--ig-font-family)); + font-size: var(--ig-h2-font-size); + font-weight: var(--ig-h2-font-weight); + font-style: var(--ig-h2-font-style); + line-height: var(--ig-h2-line-height); + letter-spacing: var(--ig-h2-letter-spacing); + text-transform: var(--ig-h2-text-transform); + margin-top: var(--ig-h2-margin-top); + margin-bottom: var(--ig-h2-margin-bottom); +} +.ig-typography .ig-typography__h3 { + font-family: var(--ig-h3-font-family, var(--ig-font-family)); + font-size: var(--ig-h3-font-size); + font-weight: var(--ig-h3-font-weight); + font-style: var(--ig-h3-font-style); + line-height: var(--ig-h3-line-height); + letter-spacing: var(--ig-h3-letter-spacing); + text-transform: var(--ig-h3-text-transform); + margin-top: var(--ig-h3-margin-top); + margin-bottom: var(--ig-h3-margin-bottom); +} +.ig-typography .ig-typography__h4 { + font-family: var(--ig-h4-font-family, var(--ig-font-family)); + font-size: var(--ig-h4-font-size); + font-weight: var(--ig-h4-font-weight); + font-style: var(--ig-h4-font-style); + line-height: var(--ig-h4-line-height); + letter-spacing: var(--ig-h4-letter-spacing); + text-transform: var(--ig-h4-text-transform); + margin-top: var(--ig-h4-margin-top); + margin-bottom: var(--ig-h4-margin-bottom); +} +.ig-typography .ig-typography__h5 { + font-family: var(--ig-h5-font-family, var(--ig-font-family)); + font-size: var(--ig-h5-font-size); + font-weight: var(--ig-h5-font-weight); + font-style: var(--ig-h5-font-style); + line-height: var(--ig-h5-line-height); + letter-spacing: var(--ig-h5-letter-spacing); + text-transform: var(--ig-h5-text-transform); + margin-top: var(--ig-h5-margin-top); + margin-bottom: var(--ig-h5-margin-bottom); +} +.ig-typography .ig-typography__h6 { + font-family: var(--ig-h6-font-family, var(--ig-font-family)); + font-size: var(--ig-h6-font-size); + font-weight: var(--ig-h6-font-weight); + font-style: var(--ig-h6-font-style); + line-height: var(--ig-h6-line-height); + letter-spacing: var(--ig-h6-letter-spacing); + text-transform: var(--ig-h6-text-transform); + margin-top: var(--ig-h6-margin-top); + margin-bottom: var(--ig-h6-margin-bottom); +} +.ig-typography .ig-typography__subtitle-1 { + font-family: var(--ig-subtitle-1-font-family, var(--ig-font-family)); + font-size: var(--ig-subtitle-1-font-size); + font-weight: var(--ig-subtitle-1-font-weight); + font-style: var(--ig-subtitle-1-font-style); + line-height: var(--ig-subtitle-1-line-height); + letter-spacing: var(--ig-subtitle-1-letter-spacing); + text-transform: var(--ig-subtitle-1-text-transform); + margin-top: var(--ig-subtitle-1-margin-top); + margin-bottom: var(--ig-subtitle-1-margin-bottom); +} +.ig-typography .ig-typography__subtitle-2 { + font-family: var(--ig-subtitle-2-font-family, var(--ig-font-family)); + font-size: var(--ig-subtitle-2-font-size); + font-weight: var(--ig-subtitle-2-font-weight); + font-style: var(--ig-subtitle-2-font-style); + line-height: var(--ig-subtitle-2-line-height); + letter-spacing: var(--ig-subtitle-2-letter-spacing); + text-transform: var(--ig-subtitle-2-text-transform); + margin-top: var(--ig-subtitle-2-margin-top); + margin-bottom: var(--ig-subtitle-2-margin-bottom); +} +.ig-typography .ig-typography__body-1 { + font-family: var(--ig-body-1-font-family, var(--ig-font-family)); + font-size: var(--ig-body-1-font-size); + font-weight: var(--ig-body-1-font-weight); + font-style: var(--ig-body-1-font-style); + line-height: var(--ig-body-1-line-height); + letter-spacing: var(--ig-body-1-letter-spacing); + text-transform: var(--ig-body-1-text-transform); + margin-top: var(--ig-body-1-margin-top); + margin-bottom: var(--ig-body-1-margin-bottom); +} +.ig-typography .ig-typography__body-2 { + font-family: var(--ig-body-2-font-family, var(--ig-font-family)); + font-size: var(--ig-body-2-font-size); + font-weight: var(--ig-body-2-font-weight); + font-style: var(--ig-body-2-font-style); + line-height: var(--ig-body-2-line-height); + letter-spacing: var(--ig-body-2-letter-spacing); + text-transform: var(--ig-body-2-text-transform); + margin-top: var(--ig-body-2-margin-top); + margin-bottom: var(--ig-body-2-margin-bottom); +} +.ig-typography .ig-typography__button { + font-family: var(--ig-button-font-family, var(--ig-font-family)); + font-size: var(--ig-button-font-size); + font-weight: var(--ig-button-font-weight); + font-style: var(--ig-button-font-style); + line-height: var(--ig-button-line-height); + letter-spacing: var(--ig-button-letter-spacing); + text-transform: var(--ig-button-text-transform); + margin-top: var(--ig-button-margin-top); + margin-bottom: var(--ig-button-margin-bottom); +} +.ig-typography .ig-typography__caption { + font-family: var(--ig-caption-font-family, var(--ig-font-family)); + font-size: var(--ig-caption-font-size); + font-weight: var(--ig-caption-font-weight); + font-style: var(--ig-caption-font-style); + line-height: var(--ig-caption-line-height); + letter-spacing: var(--ig-caption-letter-spacing); + text-transform: var(--ig-caption-text-transform); + margin-top: var(--ig-caption-margin-top); + margin-bottom: var(--ig-caption-margin-bottom); +} +.ig-typography .ig-typography__overline { + font-family: var(--ig-overline-font-family, var(--ig-font-family)); + font-size: var(--ig-overline-font-size); + font-weight: var(--ig-overline-font-weight); + font-style: var(--ig-overline-font-style); + line-height: var(--ig-overline-line-height); + letter-spacing: var(--ig-overline-letter-spacing); + text-transform: var(--ig-overline-text-transform); + margin-top: var(--ig-overline-margin-top); + margin-bottom: var(--ig-overline-margin-bottom); +} + +/* END_OUTPUT */ +/* EXPECTED */ +.ig-typography .ig-typography__h1 { + font-family: var(--ig-h1-font-family, var(--ig-font-family)); + font-size: var(--ig-h1-font-size); + font-weight: var(--ig-h1-font-weight); + font-style: var(--ig-h1-font-style); + line-height: var(--ig-h1-line-height); + letter-spacing: var(--ig-h1-letter-spacing); + text-transform: var(--ig-h1-text-transform); + margin-top: var(--ig-h1-margin-top); + margin-bottom: var(--ig-h1-margin-bottom); +} + +.ig-typography .ig-typography__h2 { + font-family: var(--ig-h2-font-family, var(--ig-font-family)); + font-size: var(--ig-h2-font-size); + font-weight: var(--ig-h2-font-weight); + font-style: var(--ig-h2-font-style); + line-height: var(--ig-h2-line-height); + letter-spacing: var(--ig-h2-letter-spacing); + text-transform: var(--ig-h2-text-transform); + margin-top: var(--ig-h2-margin-top); + margin-bottom: var(--ig-h2-margin-bottom); +} + +.ig-typography .ig-typography__h3 { + font-family: var(--ig-h3-font-family, var(--ig-font-family)); + font-size: var(--ig-h3-font-size); + font-weight: var(--ig-h3-font-weight); + font-style: var(--ig-h3-font-style); + line-height: var(--ig-h3-line-height); + letter-spacing: var(--ig-h3-letter-spacing); + text-transform: var(--ig-h3-text-transform); + margin-top: var(--ig-h3-margin-top); + margin-bottom: var(--ig-h3-margin-bottom); +} + +.ig-typography .ig-typography__h4 { + font-family: var(--ig-h4-font-family, var(--ig-font-family)); + font-size: var(--ig-h4-font-size); + font-weight: var(--ig-h4-font-weight); + font-style: var(--ig-h4-font-style); + line-height: var(--ig-h4-line-height); + letter-spacing: var(--ig-h4-letter-spacing); + text-transform: var(--ig-h4-text-transform); + margin-top: var(--ig-h4-margin-top); + margin-bottom: var(--ig-h4-margin-bottom); +} + +.ig-typography .ig-typography__h5 { + font-family: var(--ig-h5-font-family, var(--ig-font-family)); + font-size: var(--ig-h5-font-size); + font-weight: var(--ig-h5-font-weight); + font-style: var(--ig-h5-font-style); + line-height: var(--ig-h5-line-height); + letter-spacing: var(--ig-h5-letter-spacing); + text-transform: var(--ig-h5-text-transform); + margin-top: var(--ig-h5-margin-top); + margin-bottom: var(--ig-h5-margin-bottom); +} + +.ig-typography .ig-typography__h6 { + font-family: var(--ig-h6-font-family, var(--ig-font-family)); + font-size: var(--ig-h6-font-size); + font-weight: var(--ig-h6-font-weight); + font-style: var(--ig-h6-font-style); + line-height: var(--ig-h6-line-height); + letter-spacing: var(--ig-h6-letter-spacing); + text-transform: var(--ig-h6-text-transform); + margin-top: var(--ig-h6-margin-top); + margin-bottom: var(--ig-h6-margin-bottom); +} + +.ig-typography .ig-typography__subtitle-1 { + font-family: var(--ig-subtitle-1-font-family, var(--ig-font-family)); + font-size: var(--ig-subtitle-1-font-size); + font-weight: var(--ig-subtitle-1-font-weight); + font-style: var(--ig-subtitle-1-font-style); + line-height: var(--ig-subtitle-1-line-height); + letter-spacing: var(--ig-subtitle-1-letter-spacing); + text-transform: var(--ig-subtitle-1-text-transform); + margin-top: var(--ig-subtitle-1-margin-top); + margin-bottom: var(--ig-subtitle-1-margin-bottom); +} + +.ig-typography .ig-typography__subtitle-2 { + font-family: var(--ig-subtitle-2-font-family, var(--ig-font-family)); + font-size: var(--ig-subtitle-2-font-size); + font-weight: var(--ig-subtitle-2-font-weight); + font-style: var(--ig-subtitle-2-font-style); + line-height: var(--ig-subtitle-2-line-height); + letter-spacing: var(--ig-subtitle-2-letter-spacing); + text-transform: var(--ig-subtitle-2-text-transform); + margin-top: var(--ig-subtitle-2-margin-top); + margin-bottom: var(--ig-subtitle-2-margin-bottom); +} + +.ig-typography .ig-typography__body-1 { + font-family: var(--ig-body-1-font-family, var(--ig-font-family)); + font-size: var(--ig-body-1-font-size); + font-weight: var(--ig-body-1-font-weight); + font-style: var(--ig-body-1-font-style); + line-height: var(--ig-body-1-line-height); + letter-spacing: var(--ig-body-1-letter-spacing); + text-transform: var(--ig-body-1-text-transform); + margin-top: var(--ig-body-1-margin-top); + margin-bottom: var(--ig-body-1-margin-bottom); +} + +.ig-typography .ig-typography__body-2 { + font-family: var(--ig-body-2-font-family, var(--ig-font-family)); + font-size: var(--ig-body-2-font-size); + font-weight: var(--ig-body-2-font-weight); + font-style: var(--ig-body-2-font-style); + line-height: var(--ig-body-2-line-height); + letter-spacing: var(--ig-body-2-letter-spacing); + text-transform: var(--ig-body-2-text-transform); + margin-top: var(--ig-body-2-margin-top); + margin-bottom: var(--ig-body-2-margin-bottom); +} + +.ig-typography .ig-typography__button { + font-family: var(--ig-button-font-family, var(--ig-font-family)); + font-size: var(--ig-button-font-size); + font-weight: var(--ig-button-font-weight); + font-style: var(--ig-button-font-style); + line-height: var(--ig-button-line-height); + letter-spacing: var(--ig-button-letter-spacing); + text-transform: var(--ig-button-text-transform); + margin-top: var(--ig-button-margin-top); + margin-bottom: var(--ig-button-margin-bottom); +} + +.ig-typography .ig-typography__caption { + font-family: var(--ig-caption-font-family, var(--ig-font-family)); + font-size: var(--ig-caption-font-size); + font-weight: var(--ig-caption-font-weight); + font-style: var(--ig-caption-font-style); + line-height: var(--ig-caption-line-height); + letter-spacing: var(--ig-caption-letter-spacing); + text-transform: var(--ig-caption-text-transform); + margin-top: var(--ig-caption-margin-top); + margin-bottom: var(--ig-caption-margin-bottom); +} + +.ig-typography .ig-typography__overline { + font-family: var(--ig-overline-font-family, var(--ig-font-family)); + font-size: var(--ig-overline-font-size); + font-weight: var(--ig-overline-font-weight); + font-style: var(--ig-overline-font-style); + line-height: var(--ig-overline-line-height); + letter-spacing: var(--ig-overline-letter-spacing); + text-transform: var(--ig-overline-text-transform); + margin-top: var(--ig-overline-margin-top); + margin-bottom: var(--ig-overline-margin-bottom); +} + +/* END_EXPECTED */ +/* END_ASSERT */ +/* */ +/* Test: should include CSS headeing and paragraph style rules for mapped categories in a type scale, unwrapped by default */ +/* ASSERT: */ +/* OUTPUT */ +.test-output h1 { + font-family: var(--ig-h1-font-family, var(--ig-font-family)); + font-size: var(--ig-h1-font-size); + font-weight: var(--ig-h1-font-weight); + font-style: var(--ig-h1-font-style); + line-height: var(--ig-h1-line-height); + letter-spacing: var(--ig-h1-letter-spacing); + text-transform: var(--ig-h1-text-transform); + margin-top: var(--ig-h1-margin-top); + margin-bottom: var(--ig-h1-margin-bottom); +} +.test-output h2 { + font-family: var(--ig-h2-font-family, var(--ig-font-family)); + font-size: var(--ig-h2-font-size); + font-weight: var(--ig-h2-font-weight); + font-style: var(--ig-h2-font-style); + line-height: var(--ig-h2-line-height); + letter-spacing: var(--ig-h2-letter-spacing); + text-transform: var(--ig-h2-text-transform); + margin-top: var(--ig-h2-margin-top); + margin-bottom: var(--ig-h2-margin-bottom); +} +.test-output h3 { + font-family: var(--ig-h3-font-family, var(--ig-font-family)); + font-size: var(--ig-h3-font-size); + font-weight: var(--ig-h3-font-weight); + font-style: var(--ig-h3-font-style); + line-height: var(--ig-h3-line-height); + letter-spacing: var(--ig-h3-letter-spacing); + text-transform: var(--ig-h3-text-transform); + margin-top: var(--ig-h3-margin-top); + margin-bottom: var(--ig-h3-margin-bottom); +} +.test-output h4 { + font-family: var(--ig-h4-font-family, var(--ig-font-family)); + font-size: var(--ig-h4-font-size); + font-weight: var(--ig-h4-font-weight); + font-style: var(--ig-h4-font-style); + line-height: var(--ig-h4-line-height); + letter-spacing: var(--ig-h4-letter-spacing); + text-transform: var(--ig-h4-text-transform); + margin-top: var(--ig-h4-margin-top); + margin-bottom: var(--ig-h4-margin-bottom); +} +.test-output h5 { + font-family: var(--ig-h5-font-family, var(--ig-font-family)); + font-size: var(--ig-h5-font-size); + font-weight: var(--ig-h5-font-weight); + font-style: var(--ig-h5-font-style); + line-height: var(--ig-h5-line-height); + letter-spacing: var(--ig-h5-letter-spacing); + text-transform: var(--ig-h5-text-transform); + margin-top: var(--ig-h5-margin-top); + margin-bottom: var(--ig-h5-margin-bottom); +} +.test-output h6 { + font-family: var(--ig-h6-font-family, var(--ig-font-family)); + font-size: var(--ig-h6-font-size); + font-weight: var(--ig-h6-font-weight); + font-style: var(--ig-h6-font-style); + line-height: var(--ig-h6-line-height); + letter-spacing: var(--ig-h6-letter-spacing); + text-transform: var(--ig-h6-text-transform); + margin-top: var(--ig-h6-margin-top); + margin-bottom: var(--ig-h6-margin-bottom); +} +.test-output p { + font-family: var(--ig-body-1-font-family, var(--ig-font-family)); + font-size: var(--ig-body-1-font-size); + font-weight: var(--ig-body-1-font-weight); + font-style: var(--ig-body-1-font-style); + line-height: var(--ig-body-1-line-height); + letter-spacing: var(--ig-body-1-letter-spacing); + text-transform: var(--ig-body-1-text-transform); + margin-top: var(--ig-body-1-margin-top); + margin-bottom: var(--ig-body-1-margin-bottom); +} + +/* END_OUTPUT */ +/* EXPECTED */ +.test-output h1 { + font-family: var(--ig-h1-font-family, var(--ig-font-family)); + font-size: var(--ig-h1-font-size); + font-weight: var(--ig-h1-font-weight); + font-style: var(--ig-h1-font-style); + line-height: var(--ig-h1-line-height); + letter-spacing: var(--ig-h1-letter-spacing); + text-transform: var(--ig-h1-text-transform); + margin-top: var(--ig-h1-margin-top); + margin-bottom: var(--ig-h1-margin-bottom); +} +.test-output h2 { + font-family: var(--ig-h2-font-family, var(--ig-font-family)); + font-size: var(--ig-h2-font-size); + font-weight: var(--ig-h2-font-weight); + font-style: var(--ig-h2-font-style); + line-height: var(--ig-h2-line-height); + letter-spacing: var(--ig-h2-letter-spacing); + text-transform: var(--ig-h2-text-transform); + margin-top: var(--ig-h2-margin-top); + margin-bottom: var(--ig-h2-margin-bottom); +} +.test-output h3 { + font-family: var(--ig-h3-font-family, var(--ig-font-family)); + font-size: var(--ig-h3-font-size); + font-weight: var(--ig-h3-font-weight); + font-style: var(--ig-h3-font-style); + line-height: var(--ig-h3-line-height); + letter-spacing: var(--ig-h3-letter-spacing); + text-transform: var(--ig-h3-text-transform); + margin-top: var(--ig-h3-margin-top); + margin-bottom: var(--ig-h3-margin-bottom); +} +.test-output h4 { + font-family: var(--ig-h4-font-family, var(--ig-font-family)); + font-size: var(--ig-h4-font-size); + font-weight: var(--ig-h4-font-weight); + font-style: var(--ig-h4-font-style); + line-height: var(--ig-h4-line-height); + letter-spacing: var(--ig-h4-letter-spacing); + text-transform: var(--ig-h4-text-transform); + margin-top: var(--ig-h4-margin-top); + margin-bottom: var(--ig-h4-margin-bottom); +} +.test-output h5 { + font-family: var(--ig-h5-font-family, var(--ig-font-family)); + font-size: var(--ig-h5-font-size); + font-weight: var(--ig-h5-font-weight); + font-style: var(--ig-h5-font-style); + line-height: var(--ig-h5-line-height); + letter-spacing: var(--ig-h5-letter-spacing); + text-transform: var(--ig-h5-text-transform); + margin-top: var(--ig-h5-margin-top); + margin-bottom: var(--ig-h5-margin-bottom); +} +.test-output h6 { + font-family: var(--ig-h6-font-family, var(--ig-font-family)); + font-size: var(--ig-h6-font-size); + font-weight: var(--ig-h6-font-weight); + font-style: var(--ig-h6-font-style); + line-height: var(--ig-h6-line-height); + letter-spacing: var(--ig-h6-letter-spacing); + text-transform: var(--ig-h6-text-transform); + margin-top: var(--ig-h6-margin-top); + margin-bottom: var(--ig-h6-margin-bottom); +} +.test-output p { + font-family: var(--ig-body-1-font-family, var(--ig-font-family)); + font-size: var(--ig-body-1-font-size); + font-weight: var(--ig-body-1-font-weight); + font-style: var(--ig-body-1-font-style); + line-height: var(--ig-body-1-line-height); + letter-spacing: var(--ig-body-1-letter-spacing); + text-transform: var(--ig-body-1-text-transform); + margin-top: var(--ig-body-1-margin-top); + margin-bottom: var(--ig-body-1-margin-bottom); +} + +/* END_EXPECTED */ +/* END_ASSERT */ +/* */ +/* Test: should wrap CSS heading and paragraph style rules in :where():not() when $allow-exclusion is true */ +/* ASSERT: */ +/* OUTPUT */ +.test-output :where(h1):not(:where([data-no-typography], [data-no-typography] *)) { + font-family: var(--ig-h1-font-family, var(--ig-font-family)); + font-size: var(--ig-h1-font-size); + font-weight: var(--ig-h1-font-weight); + font-style: var(--ig-h1-font-style); + line-height: var(--ig-h1-line-height); + letter-spacing: var(--ig-h1-letter-spacing); + text-transform: var(--ig-h1-text-transform); + margin-top: var(--ig-h1-margin-top); + margin-bottom: var(--ig-h1-margin-bottom); +} +.test-output :where(h2):not(:where([data-no-typography], [data-no-typography] *)) { + font-family: var(--ig-h2-font-family, var(--ig-font-family)); + font-size: var(--ig-h2-font-size); + font-weight: var(--ig-h2-font-weight); + font-style: var(--ig-h2-font-style); + line-height: var(--ig-h2-line-height); + letter-spacing: var(--ig-h2-letter-spacing); + text-transform: var(--ig-h2-text-transform); + margin-top: var(--ig-h2-margin-top); + margin-bottom: var(--ig-h2-margin-bottom); +} +.test-output :where(h3):not(:where([data-no-typography], [data-no-typography] *)) { + font-family: var(--ig-h3-font-family, var(--ig-font-family)); + font-size: var(--ig-h3-font-size); + font-weight: var(--ig-h3-font-weight); + font-style: var(--ig-h3-font-style); + line-height: var(--ig-h3-line-height); + letter-spacing: var(--ig-h3-letter-spacing); + text-transform: var(--ig-h3-text-transform); + margin-top: var(--ig-h3-margin-top); + margin-bottom: var(--ig-h3-margin-bottom); +} +.test-output :where(h4):not(:where([data-no-typography], [data-no-typography] *)) { + font-family: var(--ig-h4-font-family, var(--ig-font-family)); + font-size: var(--ig-h4-font-size); + font-weight: var(--ig-h4-font-weight); + font-style: var(--ig-h4-font-style); + line-height: var(--ig-h4-line-height); + letter-spacing: var(--ig-h4-letter-spacing); + text-transform: var(--ig-h4-text-transform); + margin-top: var(--ig-h4-margin-top); + margin-bottom: var(--ig-h4-margin-bottom); +} +.test-output :where(h5):not(:where([data-no-typography], [data-no-typography] *)) { + font-family: var(--ig-h5-font-family, var(--ig-font-family)); + font-size: var(--ig-h5-font-size); + font-weight: var(--ig-h5-font-weight); + font-style: var(--ig-h5-font-style); + line-height: var(--ig-h5-line-height); + letter-spacing: var(--ig-h5-letter-spacing); + text-transform: var(--ig-h5-text-transform); + margin-top: var(--ig-h5-margin-top); + margin-bottom: var(--ig-h5-margin-bottom); +} +.test-output :where(h6):not(:where([data-no-typography], [data-no-typography] *)) { + font-family: var(--ig-h6-font-family, var(--ig-font-family)); + font-size: var(--ig-h6-font-size); + font-weight: var(--ig-h6-font-weight); + font-style: var(--ig-h6-font-style); + line-height: var(--ig-h6-line-height); + letter-spacing: var(--ig-h6-letter-spacing); + text-transform: var(--ig-h6-text-transform); + margin-top: var(--ig-h6-margin-top); + margin-bottom: var(--ig-h6-margin-bottom); +} +.test-output :where(p):not(:where([data-no-typography], [data-no-typography] *)) { + font-family: var(--ig-body-1-font-family, var(--ig-font-family)); + font-size: var(--ig-body-1-font-size); + font-weight: var(--ig-body-1-font-weight); + font-style: var(--ig-body-1-font-style); + line-height: var(--ig-body-1-line-height); + letter-spacing: var(--ig-body-1-letter-spacing); + text-transform: var(--ig-body-1-text-transform); + margin-top: var(--ig-body-1-margin-top); + margin-bottom: var(--ig-body-1-margin-bottom); +} + +/* END_OUTPUT */ +/* EXPECTED */ +.test-output :where(h1):not(:where([data-no-typography], [data-no-typography] *)) { + font-family: var(--ig-h1-font-family, var(--ig-font-family)); + font-size: var(--ig-h1-font-size); + font-weight: var(--ig-h1-font-weight); + font-style: var(--ig-h1-font-style); + line-height: var(--ig-h1-line-height); + letter-spacing: var(--ig-h1-letter-spacing); + text-transform: var(--ig-h1-text-transform); + margin-top: var(--ig-h1-margin-top); + margin-bottom: var(--ig-h1-margin-bottom); +} +.test-output :where(h2):not(:where([data-no-typography], [data-no-typography] *)) { + font-family: var(--ig-h2-font-family, var(--ig-font-family)); + font-size: var(--ig-h2-font-size); + font-weight: var(--ig-h2-font-weight); + font-style: var(--ig-h2-font-style); + line-height: var(--ig-h2-line-height); + letter-spacing: var(--ig-h2-letter-spacing); + text-transform: var(--ig-h2-text-transform); + margin-top: var(--ig-h2-margin-top); + margin-bottom: var(--ig-h2-margin-bottom); +} +.test-output :where(h3):not(:where([data-no-typography], [data-no-typography] *)) { + font-family: var(--ig-h3-font-family, var(--ig-font-family)); + font-size: var(--ig-h3-font-size); + font-weight: var(--ig-h3-font-weight); + font-style: var(--ig-h3-font-style); + line-height: var(--ig-h3-line-height); + letter-spacing: var(--ig-h3-letter-spacing); + text-transform: var(--ig-h3-text-transform); + margin-top: var(--ig-h3-margin-top); + margin-bottom: var(--ig-h3-margin-bottom); +} +.test-output :where(h4):not(:where([data-no-typography], [data-no-typography] *)) { + font-family: var(--ig-h4-font-family, var(--ig-font-family)); + font-size: var(--ig-h4-font-size); + font-weight: var(--ig-h4-font-weight); + font-style: var(--ig-h4-font-style); + line-height: var(--ig-h4-line-height); + letter-spacing: var(--ig-h4-letter-spacing); + text-transform: var(--ig-h4-text-transform); + margin-top: var(--ig-h4-margin-top); + margin-bottom: var(--ig-h4-margin-bottom); +} +.test-output :where(h5):not(:where([data-no-typography], [data-no-typography] *)) { + font-family: var(--ig-h5-font-family, var(--ig-font-family)); + font-size: var(--ig-h5-font-size); + font-weight: var(--ig-h5-font-weight); + font-style: var(--ig-h5-font-style); + line-height: var(--ig-h5-line-height); + letter-spacing: var(--ig-h5-letter-spacing); + text-transform: var(--ig-h5-text-transform); + margin-top: var(--ig-h5-margin-top); + margin-bottom: var(--ig-h5-margin-bottom); +} +.test-output :where(h6):not(:where([data-no-typography], [data-no-typography] *)) { + font-family: var(--ig-h6-font-family, var(--ig-font-family)); + font-size: var(--ig-h6-font-size); + font-weight: var(--ig-h6-font-weight); + font-style: var(--ig-h6-font-style); + line-height: var(--ig-h6-line-height); + letter-spacing: var(--ig-h6-letter-spacing); + text-transform: var(--ig-h6-text-transform); + margin-top: var(--ig-h6-margin-top); + margin-bottom: var(--ig-h6-margin-bottom); +} +.test-output :where(p):not(:where([data-no-typography], [data-no-typography] *)) { + font-family: var(--ig-body-1-font-family, var(--ig-font-family)); + font-size: var(--ig-body-1-font-size); + font-weight: var(--ig-body-1-font-weight); + font-style: var(--ig-body-1-font-style); + line-height: var(--ig-body-1-line-height); + letter-spacing: var(--ig-body-1-letter-spacing); + text-transform: var(--ig-body-1-text-transform); + margin-top: var(--ig-body-1-margin-top); + margin-bottom: var(--ig-body-1-margin-bottom); +} + +/* END_EXPECTED */ +/* END_ASSERT */ +/* */ +/* Test: should include typography variables in the :root scope */ +/* ASSERT: */ +/* OUTPUT */ +:root { + --ig-font-family: Roboto, sans-serif; + --ig-base-font-size: 16px; + --ig-h1-font-size: 96px; + --ig-h1-font-weight: normal; + --ig-h1-font-style: normal; + --ig-h1-line-height: normal; + --ig-h1-letter-spacing: normal; + --ig-h1-text-transform: none; + --ig-h1-margin-top: 0; + --ig-h1-margin-bottom: 0; + --ig-h2-font-size: 70px; + --ig-h2-font-weight: normal; + --ig-h2-font-style: normal; + --ig-h2-line-height: normal; + --ig-h2-letter-spacing: normal; + --ig-h2-text-transform: none; + --ig-h2-margin-top: 0; + --ig-h2-margin-bottom: 0; + --ig-h3-font-size: 40px; + --ig-h3-font-weight: normal; + --ig-h3-font-style: normal; + --ig-h3-line-height: normal; + --ig-h3-letter-spacing: normal; + --ig-h3-text-transform: none; + --ig-h3-margin-top: 0; + --ig-h3-margin-bottom: 0; + --ig-h4-font-size: 30px; + --ig-h4-font-weight: normal; + --ig-h4-font-style: normal; + --ig-h4-line-height: normal; + --ig-h4-letter-spacing: normal; + --ig-h4-text-transform: none; + --ig-h4-margin-top: 0; + --ig-h4-margin-bottom: 0; + --ig-h5-font-size: 20px; + --ig-h5-font-weight: normal; + --ig-h5-font-style: normal; + --ig-h5-line-height: normal; + --ig-h5-letter-spacing: normal; + --ig-h5-text-transform: none; + --ig-h5-margin-top: 0; + --ig-h5-margin-bottom: 0; + --ig-h6-font-size: 10px; + --ig-h6-font-weight: normal; + --ig-h6-font-style: normal; + --ig-h6-line-height: normal; + --ig-h6-letter-spacing: normal; + --ig-h6-text-transform: none; + --ig-h6-margin-top: 0; + --ig-h6-margin-bottom: 0; + --ig-subtitle-1-font-size: 96px; + --ig-subtitle-1-font-weight: normal; + --ig-subtitle-1-font-style: normal; + --ig-subtitle-1-line-height: normal; + --ig-subtitle-1-letter-spacing: normal; + --ig-subtitle-1-text-transform: none; + --ig-subtitle-1-margin-top: 0; + --ig-subtitle-1-margin-bottom: 0; + --ig-subtitle-2-font-size: 70px; + --ig-subtitle-2-font-weight: normal; + --ig-subtitle-2-font-style: normal; + --ig-subtitle-2-line-height: normal; + --ig-subtitle-2-letter-spacing: normal; + --ig-subtitle-2-text-transform: none; + --ig-subtitle-2-margin-top: 0; + --ig-subtitle-2-margin-bottom: 0; + --ig-body-1-font-size: 40px; + --ig-body-1-font-weight: normal; + --ig-body-1-font-style: normal; + --ig-body-1-line-height: normal; + --ig-body-1-letter-spacing: normal; + --ig-body-1-text-transform: none; + --ig-body-1-margin-top: 0; + --ig-body-1-margin-bottom: 0; + --ig-body-2-font-size: 30px; + --ig-body-2-font-weight: normal; + --ig-body-2-font-style: normal; + --ig-body-2-line-height: normal; + --ig-body-2-letter-spacing: normal; + --ig-body-2-text-transform: none; + --ig-body-2-margin-top: 0; + --ig-body-2-margin-bottom: 0; + --ig-button-font-size: 20px; + --ig-button-font-weight: normal; + --ig-button-font-style: normal; + --ig-button-line-height: normal; + --ig-button-letter-spacing: normal; + --ig-button-text-transform: none; + --ig-button-margin-top: 0; + --ig-button-margin-bottom: 0; + --ig-caption-font-size: 10px; + --ig-caption-font-weight: normal; + --ig-caption-font-style: normal; + --ig-caption-line-height: normal; + --ig-caption-letter-spacing: normal; + --ig-caption-text-transform: none; + --ig-caption-margin-top: 0; + --ig-caption-margin-bottom: 0; + --ig-overline-font-size: 10px; + --ig-overline-font-weight: normal; + --ig-overline-font-style: normal; + --ig-overline-line-height: normal; + --ig-overline-letter-spacing: normal; + --ig-overline-text-transform: none; + --ig-overline-margin-top: 0; + --ig-overline-margin-bottom: 0; +} + +.ig-typography h1 { + font-family: var(--ig-h1-font-family, var(--ig-font-family)); + font-size: var(--ig-h1-font-size); + font-weight: var(--ig-h1-font-weight); + font-style: var(--ig-h1-font-style); + line-height: var(--ig-h1-line-height); + letter-spacing: var(--ig-h1-letter-spacing); + text-transform: var(--ig-h1-text-transform); + margin-top: var(--ig-h1-margin-top); + margin-bottom: var(--ig-h1-margin-bottom); +} +.ig-typography h2 { + font-family: var(--ig-h2-font-family, var(--ig-font-family)); + font-size: var(--ig-h2-font-size); + font-weight: var(--ig-h2-font-weight); + font-style: var(--ig-h2-font-style); + line-height: var(--ig-h2-line-height); + letter-spacing: var(--ig-h2-letter-spacing); + text-transform: var(--ig-h2-text-transform); + margin-top: var(--ig-h2-margin-top); + margin-bottom: var(--ig-h2-margin-bottom); +} +.ig-typography h3 { + font-family: var(--ig-h3-font-family, var(--ig-font-family)); + font-size: var(--ig-h3-font-size); + font-weight: var(--ig-h3-font-weight); + font-style: var(--ig-h3-font-style); + line-height: var(--ig-h3-line-height); + letter-spacing: var(--ig-h3-letter-spacing); + text-transform: var(--ig-h3-text-transform); + margin-top: var(--ig-h3-margin-top); + margin-bottom: var(--ig-h3-margin-bottom); +} +.ig-typography h4 { + font-family: var(--ig-h4-font-family, var(--ig-font-family)); + font-size: var(--ig-h4-font-size); + font-weight: var(--ig-h4-font-weight); + font-style: var(--ig-h4-font-style); + line-height: var(--ig-h4-line-height); + letter-spacing: var(--ig-h4-letter-spacing); + text-transform: var(--ig-h4-text-transform); + margin-top: var(--ig-h4-margin-top); + margin-bottom: var(--ig-h4-margin-bottom); +} +.ig-typography h5 { + font-family: var(--ig-h5-font-family, var(--ig-font-family)); + font-size: var(--ig-h5-font-size); + font-weight: var(--ig-h5-font-weight); + font-style: var(--ig-h5-font-style); + line-height: var(--ig-h5-line-height); + letter-spacing: var(--ig-h5-letter-spacing); + text-transform: var(--ig-h5-text-transform); + margin-top: var(--ig-h5-margin-top); + margin-bottom: var(--ig-h5-margin-bottom); +} +.ig-typography h6 { + font-family: var(--ig-h6-font-family, var(--ig-font-family)); + font-size: var(--ig-h6-font-size); + font-weight: var(--ig-h6-font-weight); + font-style: var(--ig-h6-font-style); + line-height: var(--ig-h6-line-height); + letter-spacing: var(--ig-h6-letter-spacing); + text-transform: var(--ig-h6-text-transform); + margin-top: var(--ig-h6-margin-top); + margin-bottom: var(--ig-h6-margin-bottom); +} +.ig-typography p { + font-family: var(--ig-body-1-font-family, var(--ig-font-family)); + font-size: var(--ig-body-1-font-size); + font-weight: var(--ig-body-1-font-weight); + font-style: var(--ig-body-1-font-style); + line-height: var(--ig-body-1-line-height); + letter-spacing: var(--ig-body-1-letter-spacing); + text-transform: var(--ig-body-1-text-transform); + margin-top: var(--ig-body-1-margin-top); + margin-bottom: var(--ig-body-1-margin-bottom); +} +.ig-typography .ig-typography__h1 { + font-family: var(--ig-h1-font-family, var(--ig-font-family)); + font-size: var(--ig-h1-font-size); + font-weight: var(--ig-h1-font-weight); + font-style: var(--ig-h1-font-style); + line-height: var(--ig-h1-line-height); + letter-spacing: var(--ig-h1-letter-spacing); + text-transform: var(--ig-h1-text-transform); + margin-top: var(--ig-h1-margin-top); + margin-bottom: var(--ig-h1-margin-bottom); +} +.ig-typography .ig-typography__h2 { + font-family: var(--ig-h2-font-family, var(--ig-font-family)); + font-size: var(--ig-h2-font-size); + font-weight: var(--ig-h2-font-weight); + font-style: var(--ig-h2-font-style); + line-height: var(--ig-h2-line-height); + letter-spacing: var(--ig-h2-letter-spacing); + text-transform: var(--ig-h2-text-transform); + margin-top: var(--ig-h2-margin-top); + margin-bottom: var(--ig-h2-margin-bottom); +} +.ig-typography .ig-typography__h3 { + font-family: var(--ig-h3-font-family, var(--ig-font-family)); + font-size: var(--ig-h3-font-size); + font-weight: var(--ig-h3-font-weight); + font-style: var(--ig-h3-font-style); + line-height: var(--ig-h3-line-height); + letter-spacing: var(--ig-h3-letter-spacing); + text-transform: var(--ig-h3-text-transform); + margin-top: var(--ig-h3-margin-top); + margin-bottom: var(--ig-h3-margin-bottom); +} +.ig-typography .ig-typography__h4 { + font-family: var(--ig-h4-font-family, var(--ig-font-family)); + font-size: var(--ig-h4-font-size); + font-weight: var(--ig-h4-font-weight); + font-style: var(--ig-h4-font-style); + line-height: var(--ig-h4-line-height); + letter-spacing: var(--ig-h4-letter-spacing); + text-transform: var(--ig-h4-text-transform); + margin-top: var(--ig-h4-margin-top); + margin-bottom: var(--ig-h4-margin-bottom); +} +.ig-typography .ig-typography__h5 { + font-family: var(--ig-h5-font-family, var(--ig-font-family)); + font-size: var(--ig-h5-font-size); + font-weight: var(--ig-h5-font-weight); + font-style: var(--ig-h5-font-style); + line-height: var(--ig-h5-line-height); + letter-spacing: var(--ig-h5-letter-spacing); + text-transform: var(--ig-h5-text-transform); + margin-top: var(--ig-h5-margin-top); + margin-bottom: var(--ig-h5-margin-bottom); +} +.ig-typography .ig-typography__h6 { + font-family: var(--ig-h6-font-family, var(--ig-font-family)); + font-size: var(--ig-h6-font-size); + font-weight: var(--ig-h6-font-weight); + font-style: var(--ig-h6-font-style); + line-height: var(--ig-h6-line-height); + letter-spacing: var(--ig-h6-letter-spacing); + text-transform: var(--ig-h6-text-transform); + margin-top: var(--ig-h6-margin-top); + margin-bottom: var(--ig-h6-margin-bottom); +} +.ig-typography .ig-typography__subtitle-1 { + font-family: var(--ig-subtitle-1-font-family, var(--ig-font-family)); + font-size: var(--ig-subtitle-1-font-size); + font-weight: var(--ig-subtitle-1-font-weight); + font-style: var(--ig-subtitle-1-font-style); + line-height: var(--ig-subtitle-1-line-height); + letter-spacing: var(--ig-subtitle-1-letter-spacing); + text-transform: var(--ig-subtitle-1-text-transform); + margin-top: var(--ig-subtitle-1-margin-top); + margin-bottom: var(--ig-subtitle-1-margin-bottom); +} +.ig-typography .ig-typography__subtitle-2 { + font-family: var(--ig-subtitle-2-font-family, var(--ig-font-family)); + font-size: var(--ig-subtitle-2-font-size); + font-weight: var(--ig-subtitle-2-font-weight); + font-style: var(--ig-subtitle-2-font-style); + line-height: var(--ig-subtitle-2-line-height); + letter-spacing: var(--ig-subtitle-2-letter-spacing); + text-transform: var(--ig-subtitle-2-text-transform); + margin-top: var(--ig-subtitle-2-margin-top); + margin-bottom: var(--ig-subtitle-2-margin-bottom); +} +.ig-typography .ig-typography__body-1 { + font-family: var(--ig-body-1-font-family, var(--ig-font-family)); + font-size: var(--ig-body-1-font-size); + font-weight: var(--ig-body-1-font-weight); + font-style: var(--ig-body-1-font-style); + line-height: var(--ig-body-1-line-height); + letter-spacing: var(--ig-body-1-letter-spacing); + text-transform: var(--ig-body-1-text-transform); + margin-top: var(--ig-body-1-margin-top); + margin-bottom: var(--ig-body-1-margin-bottom); +} +.ig-typography .ig-typography__body-2 { + font-family: var(--ig-body-2-font-family, var(--ig-font-family)); + font-size: var(--ig-body-2-font-size); + font-weight: var(--ig-body-2-font-weight); + font-style: var(--ig-body-2-font-style); + line-height: var(--ig-body-2-line-height); + letter-spacing: var(--ig-body-2-letter-spacing); + text-transform: var(--ig-body-2-text-transform); + margin-top: var(--ig-body-2-margin-top); + margin-bottom: var(--ig-body-2-margin-bottom); +} +.ig-typography .ig-typography__button { + font-family: var(--ig-button-font-family, var(--ig-font-family)); + font-size: var(--ig-button-font-size); + font-weight: var(--ig-button-font-weight); + font-style: var(--ig-button-font-style); + line-height: var(--ig-button-line-height); + letter-spacing: var(--ig-button-letter-spacing); + text-transform: var(--ig-button-text-transform); + margin-top: var(--ig-button-margin-top); + margin-bottom: var(--ig-button-margin-bottom); +} +.ig-typography .ig-typography__caption { + font-family: var(--ig-caption-font-family, var(--ig-font-family)); + font-size: var(--ig-caption-font-size); + font-weight: var(--ig-caption-font-weight); + font-style: var(--ig-caption-font-style); + line-height: var(--ig-caption-line-height); + letter-spacing: var(--ig-caption-letter-spacing); + text-transform: var(--ig-caption-text-transform); + margin-top: var(--ig-caption-margin-top); + margin-bottom: var(--ig-caption-margin-bottom); +} +.ig-typography .ig-typography__overline { + font-family: var(--ig-overline-font-family, var(--ig-font-family)); + font-size: var(--ig-overline-font-size); + font-weight: var(--ig-overline-font-weight); + font-style: var(--ig-overline-font-style); + line-height: var(--ig-overline-line-height); + letter-spacing: var(--ig-overline-letter-spacing); + text-transform: var(--ig-overline-text-transform); + margin-top: var(--ig-overline-margin-top); + margin-bottom: var(--ig-overline-margin-bottom); +} + +/* END_OUTPUT */ +/* CONTAINED */ +:root { + --ig-font-family: Roboto, sans-serif; + --ig-h1-font-size: 96px; + --ig-h1-font-weight: normal; + --ig-h1-font-style: normal; + --ig-h1-line-height: normal; + --ig-h1-letter-spacing: normal; + --ig-h1-text-transform: none; + --ig-h1-margin-top: 0; + --ig-h1-margin-bottom: 0; + --ig-h2-font-size: 70px; + --ig-h2-font-weight: normal; + --ig-h2-font-style: normal; + --ig-h2-line-height: normal; + --ig-h2-letter-spacing: normal; + --ig-h2-text-transform: none; + --ig-h2-margin-top: 0; + --ig-h2-margin-bottom: 0; + --ig-h3-font-size: 40px; + --ig-h3-font-weight: normal; + --ig-h3-font-style: normal; + --ig-h3-line-height: normal; + --ig-h3-letter-spacing: normal; + --ig-h3-text-transform: none; + --ig-h3-margin-top: 0; + --ig-h3-margin-bottom: 0; + --ig-h4-font-size: 30px; + --ig-h4-font-weight: normal; + --ig-h4-font-style: normal; + --ig-h4-line-height: normal; + --ig-h4-letter-spacing: normal; + --ig-h4-text-transform: none; + --ig-h4-margin-top: 0; + --ig-h4-margin-bottom: 0; + --ig-h5-font-size: 20px; + --ig-h5-font-weight: normal; + --ig-h5-font-style: normal; + --ig-h5-line-height: normal; + --ig-h5-letter-spacing: normal; + --ig-h5-text-transform: none; + --ig-h5-margin-top: 0; + --ig-h5-margin-bottom: 0; + --ig-h6-font-size: 10px; + --ig-h6-font-weight: normal; + --ig-h6-font-style: normal; + --ig-h6-line-height: normal; + --ig-h6-letter-spacing: normal; + --ig-h6-text-transform: none; + --ig-h6-margin-top: 0; + --ig-h6-margin-bottom: 0; + --ig-subtitle-1-font-size: 96px; + --ig-subtitle-1-font-weight: normal; + --ig-subtitle-1-font-style: normal; + --ig-subtitle-1-line-height: normal; + --ig-subtitle-1-letter-spacing: normal; + --ig-subtitle-1-text-transform: none; + --ig-subtitle-1-margin-top: 0; + --ig-subtitle-1-margin-bottom: 0; + --ig-subtitle-2-font-size: 70px; + --ig-subtitle-2-font-weight: normal; + --ig-subtitle-2-font-style: normal; + --ig-subtitle-2-line-height: normal; + --ig-subtitle-2-letter-spacing: normal; + --ig-subtitle-2-text-transform: none; + --ig-subtitle-2-margin-top: 0; + --ig-subtitle-2-margin-bottom: 0; + --ig-body-1-font-size: 40px; + --ig-body-1-font-weight: normal; + --ig-body-1-font-style: normal; + --ig-body-1-line-height: normal; + --ig-body-1-letter-spacing: normal; + --ig-body-1-text-transform: none; + --ig-body-1-margin-top: 0; + --ig-body-1-margin-bottom: 0; + --ig-body-2-font-size: 30px; + --ig-body-2-font-weight: normal; + --ig-body-2-font-style: normal; + --ig-body-2-line-height: normal; + --ig-body-2-letter-spacing: normal; + --ig-body-2-text-transform: none; + --ig-body-2-margin-top: 0; + --ig-body-2-margin-bottom: 0; + --ig-button-font-size: 20px; + --ig-button-font-weight: normal; + --ig-button-font-style: normal; + --ig-button-line-height: normal; + --ig-button-letter-spacing: normal; + --ig-button-text-transform: none; + --ig-button-margin-top: 0; + --ig-button-margin-bottom: 0; + --ig-caption-font-size: 10px; + --ig-caption-font-weight: normal; + --ig-caption-font-style: normal; + --ig-caption-line-height: normal; + --ig-caption-letter-spacing: normal; + --ig-caption-text-transform: none; + --ig-caption-margin-top: 0; + --ig-caption-margin-bottom: 0; + --ig-overline-font-size: 10px; + --ig-overline-font-weight: normal; + --ig-overline-font-style: normal; + --ig-overline-line-height: normal; + --ig-overline-letter-spacing: normal; + --ig-overline-text-transform: none; + --ig-overline-margin-top: 0; + --ig-overline-margin-bottom: 0; +} + +/* END_CONTAINED */ +/* END_ASSERT */ +/* */ +/* Test: should include typography variables for a parent scope */ +/* ASSERT: */ +/* OUTPUT */ +.test-output { + --ig-font-family: Roboto, sans-serif; + --ig-base-font-size: 16px; + --ig-h1-font-size: 96px; + --ig-h1-font-weight: normal; + --ig-h1-font-style: normal; + --ig-h1-line-height: normal; + --ig-h1-letter-spacing: normal; + --ig-h1-text-transform: none; + --ig-h1-margin-top: 0; + --ig-h1-margin-bottom: 0; + --ig-h2-font-size: 70px; + --ig-h2-font-weight: normal; + --ig-h2-font-style: normal; + --ig-h2-line-height: normal; + --ig-h2-letter-spacing: normal; + --ig-h2-text-transform: none; + --ig-h2-margin-top: 0; + --ig-h2-margin-bottom: 0; + --ig-h3-font-size: 40px; + --ig-h3-font-weight: normal; + --ig-h3-font-style: normal; + --ig-h3-line-height: normal; + --ig-h3-letter-spacing: normal; + --ig-h3-text-transform: none; + --ig-h3-margin-top: 0; + --ig-h3-margin-bottom: 0; + --ig-h4-font-size: 30px; + --ig-h4-font-weight: normal; + --ig-h4-font-style: normal; + --ig-h4-line-height: normal; + --ig-h4-letter-spacing: normal; + --ig-h4-text-transform: none; + --ig-h4-margin-top: 0; + --ig-h4-margin-bottom: 0; + --ig-h5-font-size: 20px; + --ig-h5-font-weight: normal; + --ig-h5-font-style: normal; + --ig-h5-line-height: normal; + --ig-h5-letter-spacing: normal; + --ig-h5-text-transform: none; + --ig-h5-margin-top: 0; + --ig-h5-margin-bottom: 0; + --ig-h6-font-size: 10px; + --ig-h6-font-weight: normal; + --ig-h6-font-style: normal; + --ig-h6-line-height: normal; + --ig-h6-letter-spacing: normal; + --ig-h6-text-transform: none; + --ig-h6-margin-top: 0; + --ig-h6-margin-bottom: 0; + --ig-subtitle-1-font-size: 96px; + --ig-subtitle-1-font-weight: normal; + --ig-subtitle-1-font-style: normal; + --ig-subtitle-1-line-height: normal; + --ig-subtitle-1-letter-spacing: normal; + --ig-subtitle-1-text-transform: none; + --ig-subtitle-1-margin-top: 0; + --ig-subtitle-1-margin-bottom: 0; + --ig-subtitle-2-font-size: 70px; + --ig-subtitle-2-font-weight: normal; + --ig-subtitle-2-font-style: normal; + --ig-subtitle-2-line-height: normal; + --ig-subtitle-2-letter-spacing: normal; + --ig-subtitle-2-text-transform: none; + --ig-subtitle-2-margin-top: 0; + --ig-subtitle-2-margin-bottom: 0; + --ig-body-1-font-size: 40px; + --ig-body-1-font-weight: normal; + --ig-body-1-font-style: normal; + --ig-body-1-line-height: normal; + --ig-body-1-letter-spacing: normal; + --ig-body-1-text-transform: none; + --ig-body-1-margin-top: 0; + --ig-body-1-margin-bottom: 0; + --ig-body-2-font-size: 30px; + --ig-body-2-font-weight: normal; + --ig-body-2-font-style: normal; + --ig-body-2-line-height: normal; + --ig-body-2-letter-spacing: normal; + --ig-body-2-text-transform: none; + --ig-body-2-margin-top: 0; + --ig-body-2-margin-bottom: 0; + --ig-button-font-size: 20px; + --ig-button-font-weight: normal; + --ig-button-font-style: normal; + --ig-button-line-height: normal; + --ig-button-letter-spacing: normal; + --ig-button-text-transform: none; + --ig-button-margin-top: 0; + --ig-button-margin-bottom: 0; + --ig-caption-font-size: 10px; + --ig-caption-font-weight: normal; + --ig-caption-font-style: normal; + --ig-caption-line-height: normal; + --ig-caption-letter-spacing: normal; + --ig-caption-text-transform: none; + --ig-caption-margin-top: 0; + --ig-caption-margin-bottom: 0; + --ig-overline-font-size: 10px; + --ig-overline-font-weight: normal; + --ig-overline-font-style: normal; + --ig-overline-line-height: normal; + --ig-overline-letter-spacing: normal; + --ig-overline-text-transform: none; + --ig-overline-margin-top: 0; + --ig-overline-margin-bottom: 0; +} + +/* END_OUTPUT */ +/* EXPECTED */ +.test-output { + --ig-font-family: Roboto, sans-serif; + --ig-base-font-size: 16px; + --ig-h1-font-size: 96px; + --ig-h1-font-weight: normal; + --ig-h1-font-style: normal; + --ig-h1-line-height: normal; + --ig-h1-letter-spacing: normal; + --ig-h1-text-transform: none; + --ig-h1-margin-top: 0; + --ig-h1-margin-bottom: 0; + --ig-h2-font-size: 70px; + --ig-h2-font-weight: normal; + --ig-h2-font-style: normal; + --ig-h2-line-height: normal; + --ig-h2-letter-spacing: normal; + --ig-h2-text-transform: none; + --ig-h2-margin-top: 0; + --ig-h2-margin-bottom: 0; + --ig-h3-font-size: 40px; + --ig-h3-font-weight: normal; + --ig-h3-font-style: normal; + --ig-h3-line-height: normal; + --ig-h3-letter-spacing: normal; + --ig-h3-text-transform: none; + --ig-h3-margin-top: 0; + --ig-h3-margin-bottom: 0; + --ig-h4-font-size: 30px; + --ig-h4-font-weight: normal; + --ig-h4-font-style: normal; + --ig-h4-line-height: normal; + --ig-h4-letter-spacing: normal; + --ig-h4-text-transform: none; + --ig-h4-margin-top: 0; + --ig-h4-margin-bottom: 0; + --ig-h5-font-size: 20px; + --ig-h5-font-weight: normal; + --ig-h5-font-style: normal; + --ig-h5-line-height: normal; + --ig-h5-letter-spacing: normal; + --ig-h5-text-transform: none; + --ig-h5-margin-top: 0; + --ig-h5-margin-bottom: 0; + --ig-h6-font-size: 10px; + --ig-h6-font-weight: normal; + --ig-h6-font-style: normal; + --ig-h6-line-height: normal; + --ig-h6-letter-spacing: normal; + --ig-h6-text-transform: none; + --ig-h6-margin-top: 0; + --ig-h6-margin-bottom: 0; + --ig-subtitle-1-font-size: 96px; + --ig-subtitle-1-font-weight: normal; + --ig-subtitle-1-font-style: normal; + --ig-subtitle-1-line-height: normal; + --ig-subtitle-1-letter-spacing: normal; + --ig-subtitle-1-text-transform: none; + --ig-subtitle-1-margin-top: 0; + --ig-subtitle-1-margin-bottom: 0; + --ig-subtitle-2-font-size: 70px; + --ig-subtitle-2-font-weight: normal; + --ig-subtitle-2-font-style: normal; + --ig-subtitle-2-line-height: normal; + --ig-subtitle-2-letter-spacing: normal; + --ig-subtitle-2-text-transform: none; + --ig-subtitle-2-margin-top: 0; + --ig-subtitle-2-margin-bottom: 0; + --ig-body-1-font-size: 40px; + --ig-body-1-font-weight: normal; + --ig-body-1-font-style: normal; + --ig-body-1-line-height: normal; + --ig-body-1-letter-spacing: normal; + --ig-body-1-text-transform: none; + --ig-body-1-margin-top: 0; + --ig-body-1-margin-bottom: 0; + --ig-body-2-font-size: 30px; + --ig-body-2-font-weight: normal; + --ig-body-2-font-style: normal; + --ig-body-2-line-height: normal; + --ig-body-2-letter-spacing: normal; + --ig-body-2-text-transform: none; + --ig-body-2-margin-top: 0; + --ig-body-2-margin-bottom: 0; + --ig-button-font-size: 20px; + --ig-button-font-weight: normal; + --ig-button-font-style: normal; + --ig-button-line-height: normal; + --ig-button-letter-spacing: normal; + --ig-button-text-transform: none; + --ig-button-margin-top: 0; + --ig-button-margin-bottom: 0; + --ig-caption-font-size: 10px; + --ig-caption-font-weight: normal; + --ig-caption-font-style: normal; + --ig-caption-line-height: normal; + --ig-caption-letter-spacing: normal; + --ig-caption-text-transform: none; + --ig-caption-margin-top: 0; + --ig-caption-margin-bottom: 0; + --ig-overline-font-size: 10px; + --ig-overline-font-weight: normal; + --ig-overline-font-style: normal; + --ig-overline-line-height: normal; + --ig-overline-letter-spacing: normal; + --ig-overline-text-transform: none; + --ig-overline-margin-top: 0; + --ig-overline-margin-bottom: 0; +} + +/* END_EXPECTED */ +/* END_ASSERT */ +/* */ +/* */ +/* */ +/* # Module: Utilities */ +/* ------------------- */ +/* # Module: Utilities :: css */ +/* -------------------------- */ +/* Test: should expand shorthand properties */ +/* ✔ [assert-equal] should expand shorthand properties */ +/* */ +/* */ +/* # Module: Utilities :: meta */ +/* --------------------------- */ +/* Test: should resolve if the call context is the root of the stylesheet */ +/* ASSERT: */ +/* OUTPUT */ +.test-output { + content: true; +} + +/* END_OUTPUT */ +/* EXPECTED */ +.test-output { + content: true; +} + +/* END_EXPECTED */ +/* END_ASSERT */ +/* ASSERT: */ +/* OUTPUT */ +.test-output { + content: false; +} + +/* END_OUTPUT */ +/* EXPECTED */ +.test-output { + content: false; +} + +/* END_EXPECTED */ +/* END_ASSERT */ +/* */ +/* Test: should resolve if the call context is :host */ +/* ASSERT: */ +/* OUTPUT */ +:host { + content: true; +} + +/* END_OUTPUT */ +/* EXPECTED */ +:host { + content: true; +} + +/* END_EXPECTED */ +/* END_ASSERT */ +/* ASSERT: */ +/* OUTPUT */ +.test-output { + content: false; +} + +/* END_OUTPUT */ +/* EXPECTED */ +.test-output { + content: false; +} + +/* END_EXPECTED */ +/* END_ASSERT */ +/* */ +/* */ +/* # Module: Utilities :: map */ +/* -------------------------- */ +/* Test: should clean a map of null values */ +/* ✔ [assert-equal] should clean a map of null values */ +/* */ +/* Test: should merge two maps removing null values in the process */ +/* ✔ [assert-equal] should merge two maps removing null values in the process */ +/* */ +/* Test: should accumulate _meta keys when merging schema maps */ +/* ✔ [assert-equal] should accumulate _meta keys when merging schema maps */ +/* */ +/* Test: should fully replace nested property maps regardless of whether the override has _meta */ +/* ✔ [assert-equal] should fully replace nested property maps regardless of whether the override has _meta */ +/* ✔ [assert-equal] should fully replace nested property maps regardless of whether the override has _meta */ +/* */ +/* Test: should diff two maps resolving all unique values in the second map in the process */ +/* ✔ [assert-equal] should diff two maps resolving all unique values in the second map in the process */ +/* */ +/* Test: should prefix all keys in a map with a given string */ +/* ✔ [assert-equal] should prefix all keys in a map with a given string */ +/* */ +/* */ +/* # Module: Utilities :: math */ +/* --------------------------- */ +/* Test: returns a number to a fixed floating point */ +/* ✔ [assert-equal] returns a number to a fixed floating point */ +/* */ +/* Test: converts a number to string */ +/* ✔ [assert-equal] converts a number to string */ +/* */ +/* */ +/* # Module: Utilities :: string */ +/* ----------------------------- */ +/* Test: should split a string by a given separator into a list of values */ +/* ✔ [assert-equal] should split a string by a given separator into a list of values */ +/* */ +/* Test: should replace a search term in target string */ +/* ✔ [assert-equal] should replace a search term in target string */ +/* */ +/* Test: converts a string into a number */ +/* ✔ [assert-equal] converts a string into a number */ +/* ✔ [assert-equal] converts a string into a number */ +/* */ +/* */ +/* */ +/* # Module: Themes */ +/* ---------------- */ +/* # Module: Themes :: schemas */ +/* --------------------------- */ +/* Test: resolves util function values */ +/* ✔ [assert-equal] resolves util function values */ +/* ASSERT: */ +/* OUTPUT */ +igx-data-chart { + --title-padding-top: var(--igx-data-chart-title-padding-top, var(--ig-data-chart-title-padding-top, 4px)); + --title-padding-right: var(--igx-data-chart-title-padding-right, var(--ig-data-chart-title-padding-right, 8px)); + --title-padding-bottom: var(--igx-data-chart-title-padding-bottom, var(--ig-data-chart-title-padding-bottom, 4px)); + --title-padding-left: var(--igx-data-chart-title-padding-left, var(--ig-data-chart-title-padding-left, 8px)); + --ig-theme: material; + --ig-theme-variant: light; +} + +/* END_OUTPUT */ +/* EXPECTED */ +igx-data-chart { + --title-padding-top: var(--igx-data-chart-title-padding-top, var(--ig-data-chart-title-padding-top, 4px)); + --title-padding-right: var(--igx-data-chart-title-padding-right, var(--ig-data-chart-title-padding-right, 8px)); + --title-padding-bottom: var(--igx-data-chart-title-padding-bottom, var(--ig-data-chart-title-padding-bottom, 4px)); + --title-padding-left: var(--igx-data-chart-title-padding-left, var(--ig-data-chart-title-padding-left, 8px)); + --ig-theme: material; + --ig-theme-variant: light; +} + +/* END_EXPECTED */ +/* END_ASSERT */ +/* */ +/* Test: should resolve values from function instructions */ +/* ✔ [assert-equal] should resolve values from function instructions */ +/* ✔ [assert-equal] should resolve values from function instructions */ +/* */ +/* Test: should work with custom(handmade) palettes */ +/* ✔ [assert-equal] should work with custom(handmade) palettes */ +/* ✔ [assert-equal] should work with custom(handmade) palettes */ +/* */ +/* Test: should output theme maps from schema definitions */ +/* ✔ [assert-equal] should output theme maps from schema definitions */ +/* */ +/* Test: should include proper metadata in each component schema */ +/* ✔ [assert-true] Component schema for category-chart is missing metadata. */ +/* ✔ [assert-equal] Component schema for light material category-chart has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light material category-chart has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for category-chart is missing name metadata. */ +/* ✔ [assert-true] Component schema for data-chart is missing metadata. */ +/* ✔ [assert-equal] Component schema for light material data-chart has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light material data-chart has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for data-chart is missing name metadata. */ +/* ✔ [assert-true] Component schema for doughnut-chart is missing metadata. */ +/* ✔ [assert-equal] Component schema for light material doughnut-chart has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light material doughnut-chart has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for doughnut-chart is missing name metadata. */ +/* ✔ [assert-true] Component schema for financial-chart is missing metadata. */ +/* ✔ [assert-equal] Component schema for light material financial-chart has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light material financial-chart has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for financial-chart is missing name metadata. */ +/* ✔ [assert-true] Component schema for funnel-chart is missing metadata. */ +/* ✔ [assert-equal] Component schema for light material funnel-chart has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light material funnel-chart has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for funnel-chart is missing name metadata. */ +/* ✔ [assert-true] Component schema for linear-gauge is missing metadata. */ +/* ✔ [assert-equal] Component schema for light material linear-gauge has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light material linear-gauge has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for linear-gauge is missing name metadata. */ +/* ✔ [assert-true] Component schema for radial-gauge is missing metadata. */ +/* ✔ [assert-equal] Component schema for light material radial-gauge has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light material radial-gauge has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for radial-gauge is missing name metadata. */ +/* ✔ [assert-true] Component schema for geo-map is missing metadata. */ +/* ✔ [assert-equal] Component schema for light material geo-map has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light material geo-map has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for geo-map is missing name metadata. */ +/* ✔ [assert-true] Component schema for bullet-graph is missing metadata. */ +/* ✔ [assert-equal] Component schema for light material bullet-graph has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light material bullet-graph has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for bullet-graph is missing name metadata. */ +/* ✔ [assert-true] Component schema for pie-chart is missing metadata. */ +/* ✔ [assert-equal] Component schema for light material pie-chart has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light material pie-chart has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for pie-chart is missing name metadata. */ +/* ✔ [assert-true] Component schema for shape-chart is missing metadata. */ +/* ✔ [assert-equal] Component schema for light material shape-chart has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light material shape-chart has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for shape-chart is missing name metadata. */ +/* ✔ [assert-true] Component schema for sparkline is missing metadata. */ +/* ✔ [assert-equal] Component schema for light material sparkline has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light material sparkline has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for sparkline is missing name metadata. */ +/* ✔ [assert-true] Component schema for action-strip is missing metadata. */ +/* ✔ [assert-equal] Component schema for light material action-strip has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light material action-strip has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for action-strip is missing name metadata. */ +/* ✔ [assert-true] Component schema for avatar is missing metadata. */ +/* ✔ [assert-equal] Component schema for light material avatar has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light material avatar has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for avatar is missing name metadata. */ +/* ✔ [assert-true] Component schema for badge is missing metadata. */ +/* ✔ [assert-equal] Component schema for light material badge has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light material badge has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for badge is missing name metadata. */ +/* ✔ [assert-true] Component schema for banner is missing metadata. */ +/* ✔ [assert-equal] Component schema for light material banner has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light material banner has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for banner is missing name metadata. */ +/* ✔ [assert-true] Component schema for bottom-nav is missing metadata. */ +/* ✔ [assert-equal] Component schema for light material bottom-nav has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light material bottom-nav has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for bottom-nav is missing name metadata. */ +/* ✔ [assert-true] Component schema for flat button is missing metadata. */ +/* ✔ [assert-equal] Component schema for light material flat button has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light material flat button has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for flat button is missing name metadata. */ +/* ✔ [assert-true] Component schema for outlined button is missing metadata. */ +/* ✔ [assert-equal] Component schema for light material outlined button has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light material outlined button has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for outlined button is missing name metadata. */ +/* ✔ [assert-true] Component schema for contained button is missing metadata. */ +/* ✔ [assert-equal] Component schema for light material contained button has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light material contained button has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for contained button is missing name metadata. */ +/* ✔ [assert-true] Component schema for fab button is missing metadata. */ +/* ✔ [assert-equal] Component schema for light material fab button has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light material fab button has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for fab button is missing name metadata. */ +/* ✔ [assert-true] Component schema for button-group is missing metadata. */ +/* ✔ [assert-equal] Component schema for light material button-group has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light material button-group has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for button-group is missing name metadata. */ +/* ✔ [assert-true] Component schema for calendar is missing metadata. */ +/* ✔ [assert-equal] Component schema for light material calendar has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light material calendar has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for calendar is missing name metadata. */ +/* ✔ [assert-true] Component schema for card is missing metadata. */ +/* ✔ [assert-equal] Component schema for light material card has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light material card has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for card is missing name metadata. */ +/* ✔ [assert-true] Component schema for carousel is missing metadata. */ +/* ✔ [assert-equal] Component schema for light material carousel has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light material carousel has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for carousel is missing name metadata. */ +/* ✔ [assert-true] Component schema for chat is missing metadata. */ +/* ✔ [assert-equal] Component schema for light material chat has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light material chat has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for chat is missing name metadata. */ +/* ✔ [assert-true] Component schema for checkbox is missing metadata. */ +/* ✔ [assert-equal] Component schema for light material checkbox has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light material checkbox has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for checkbox is missing name metadata. */ +/* ✔ [assert-true] Component schema for chip is missing metadata. */ +/* ✔ [assert-equal] Component schema for light material chip has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light material chip has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for chip is missing name metadata. */ +/* ✔ [assert-true] Component schema for color-picker is missing metadata. */ +/* ✔ [assert-equal] Component schema for light material color-picker has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light material color-picker has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for color-picker is missing name metadata. */ +/* ✔ [assert-true] Component schema for column-actions is missing metadata. */ +/* ✔ [assert-equal] Component schema for light material column-actions has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light material column-actions has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for column-actions is missing name metadata. */ +/* ✔ [assert-true] Component schema for combo is missing metadata. */ +/* ✔ [assert-equal] Component schema for light material combo has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light material combo has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for combo is missing name metadata. */ +/* ✔ [assert-true] Component schema for date-picker is missing metadata. */ +/* ✔ [assert-equal] Component schema for light material date-picker has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light material date-picker has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for date-picker is missing name metadata. */ +/* ✔ [assert-true] Component schema for date-range is missing metadata. */ +/* ✔ [assert-equal] Component schema for light material date-range has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light material date-range has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for date-range is missing name metadata. */ +/* ✔ [assert-true] Component schema for dialog is missing metadata. */ +/* ✔ [assert-equal] Component schema for light material dialog has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light material dialog has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for dialog is missing name metadata. */ +/* ✔ [assert-true] Component schema for divider is missing metadata. */ +/* ✔ [assert-equal] Component schema for light material divider has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light material divider has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for divider is missing name metadata. */ +/* ✔ [assert-true] Component schema for dockmanager is missing metadata. */ +/* ✔ [assert-equal] Component schema for light material dockmanager has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light material dockmanager has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for dockmanager is missing name metadata. */ +/* ✔ [assert-true] Component schema for drop-down is missing metadata. */ +/* ✔ [assert-equal] Component schema for light material drop-down has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light material drop-down has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for drop-down is missing name metadata. */ +/* ✔ [assert-true] Component schema for expansion-panel is missing metadata. */ +/* ✔ [assert-equal] Component schema for light material expansion-panel has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light material expansion-panel has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for expansion-panel is missing name metadata. */ +/* ✔ [assert-true] Component schema for grid is missing metadata. */ +/* ✔ [assert-equal] Component schema for light material grid has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light material grid has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for grid is missing name metadata. */ +/* ✔ [assert-true] Component schema for grid-excel-filtering is missing metadata. */ +/* ✔ [assert-equal] Component schema for light material grid-excel-filtering has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light material grid-excel-filtering has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for grid-excel-filtering is missing name metadata. */ +/* ✔ [assert-true] Component schema for grid-filtering is missing metadata. */ +/* ✔ [assert-equal] Component schema for light material grid-filtering has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light material grid-filtering has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for grid-filtering is missing name metadata. */ +/* ✔ [assert-true] Component schema for grid-summary is missing metadata. */ +/* ✔ [assert-equal] Component schema for light material grid-summary has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light material grid-summary has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for grid-summary is missing name metadata. */ +/* ✔ [assert-true] Component schema for grid-toolbar is missing metadata. */ +/* ✔ [assert-equal] Component schema for light material grid-toolbar has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light material grid-toolbar has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for grid-toolbar is missing name metadata. */ +/* ✔ [assert-true] Component schema for highlight is missing metadata. */ +/* ✔ [assert-equal] Component schema for light material highlight has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light material highlight has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for highlight is missing name metadata. */ +/* ✔ [assert-true] Component schema for icon is missing metadata. */ +/* ✔ [assert-equal] Component schema for light material icon has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light material icon has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for icon is missing name metadata. */ +/* ✔ [assert-true] Component schema for flat icon-button is missing metadata. */ +/* ✔ [assert-equal] Component schema for light material flat icon-button has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light material flat icon-button has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for flat icon-button is missing name metadata. */ +/* ✔ [assert-true] Component schema for contained icon-button is missing metadata. */ +/* ✔ [assert-equal] Component schema for light material contained icon-button has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light material contained icon-button has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for contained icon-button is missing name metadata. */ +/* ✔ [assert-true] Component schema for outlined icon-button is missing metadata. */ +/* ✔ [assert-equal] Component schema for light material outlined icon-button has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light material outlined icon-button has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for outlined icon-button is missing name metadata. */ +/* ✔ [assert-true] Component schema for input-group is missing metadata. */ +/* ✔ [assert-equal] Component schema for light material input-group has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light material input-group has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for input-group is missing name metadata. */ +/* ✔ [assert-true] Component schema for label is missing metadata. */ +/* ✔ [assert-equal] Component schema for light material label has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light material label has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for label is missing name metadata. */ +/* ✔ [assert-true] Component schema for list is missing metadata. */ +/* ✔ [assert-equal] Component schema for light material list has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light material list has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for list is missing name metadata. */ +/* ✔ [assert-true] Component schema for navbar is missing metadata. */ +/* ✔ [assert-equal] Component schema for light material navbar has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light material navbar has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for navbar is missing name metadata. */ +/* ✔ [assert-true] Component schema for nav-drawer is missing metadata. */ +/* ✔ [assert-equal] Component schema for light material nav-drawer has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light material nav-drawer has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for nav-drawer is missing name metadata. */ +/* ✔ [assert-true] Component schema for overlay is missing metadata. */ +/* ✔ [assert-equal] Component schema for light material overlay has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light material overlay has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for overlay is missing name metadata. */ +/* ✔ [assert-true] Component schema for paginator is missing metadata. */ +/* ✔ [assert-equal] Component schema for light material paginator has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light material paginator has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for paginator is missing name metadata. */ +/* ✔ [assert-true] Component schema for pivot-data-selector is missing metadata. */ +/* ✔ [assert-equal] Component schema for light material pivot-data-selector has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light material pivot-data-selector has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for pivot-data-selector is missing name metadata. */ +/* ✔ [assert-true] Component schema for linear-bar is missing metadata. */ +/* ✔ [assert-equal] Component schema for light material linear-bar has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light material linear-bar has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for linear-bar is missing name metadata. */ +/* ✔ [assert-true] Component schema for circular-bar is missing metadata. */ +/* ✔ [assert-equal] Component schema for light material circular-bar has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light material circular-bar has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for circular-bar is missing name metadata. */ +/* ✔ [assert-true] Component schema for qr-code is missing metadata. */ +/* ✔ [assert-equal] Component schema for light material qr-code has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light material qr-code has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for qr-code is missing name metadata. */ +/* ✔ [assert-true] Component schema for query-builder is missing metadata. */ +/* ✔ [assert-equal] Component schema for light material query-builder has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light material query-builder has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for query-builder is missing name metadata. */ +/* ✔ [assert-true] Component schema for radio is missing metadata. */ +/* ✔ [assert-equal] Component schema for light material radio has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light material radio has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for radio is missing name metadata. */ +/* ✔ [assert-true] Component schema for rating is missing metadata. */ +/* ✔ [assert-equal] Component schema for light material rating has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light material rating has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for rating is missing name metadata. */ +/* ✔ [assert-true] Component schema for resize-indicator is missing metadata. */ +/* ✔ [assert-equal] Component schema for light material resize-indicator has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light material resize-indicator has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for resize-indicator is missing name metadata. */ +/* ✔ [assert-true] Component schema for ripple is missing metadata. */ +/* ✔ [assert-equal] Component schema for light material ripple has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light material ripple has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for ripple is missing name metadata. */ +/* ✔ [assert-true] Component schema for scrollbar is missing metadata. */ +/* ✔ [assert-equal] Component schema for light material scrollbar has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light material scrollbar has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for scrollbar is missing name metadata. */ +/* ✔ [assert-true] Component schema for select is missing metadata. */ +/* ✔ [assert-equal] Component schema for light material select has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light material select has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for select is missing name metadata. */ +/* ✔ [assert-true] Component schema for slider is missing metadata. */ +/* ✔ [assert-equal] Component schema for light material slider has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light material slider has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for slider is missing name metadata. */ +/* ✔ [assert-true] Component schema for snackbar is missing metadata. */ +/* ✔ [assert-equal] Component schema for light material snackbar has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light material snackbar has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for snackbar is missing name metadata. */ +/* ✔ [assert-true] Component schema for splitter is missing metadata. */ +/* ✔ [assert-equal] Component schema for light material splitter has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light material splitter has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for splitter is missing name metadata. */ +/* ✔ [assert-true] Component schema for stepper is missing metadata. */ +/* ✔ [assert-equal] Component schema for light material stepper has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light material stepper has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for stepper is missing name metadata. */ +/* ✔ [assert-true] Component schema for switch is missing metadata. */ +/* ✔ [assert-equal] Component schema for light material switch has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light material switch has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for switch is missing name metadata. */ +/* ✔ [assert-true] Component schema for tabs is missing metadata. */ +/* ✔ [assert-equal] Component schema for light material tabs has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light material tabs has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for tabs is missing name metadata. */ +/* ✔ [assert-true] Component schema for tile-manager is missing metadata. */ +/* ✔ [assert-equal] Component schema for light material tile-manager has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light material tile-manager has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for tile-manager is missing name metadata. */ +/* ✔ [assert-true] Component schema for time-picker is missing metadata. */ +/* ✔ [assert-equal] Component schema for light material time-picker has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light material time-picker has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for time-picker is missing name metadata. */ +/* ✔ [assert-true] Component schema for toast is missing metadata. */ +/* ✔ [assert-equal] Component schema for light material toast has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light material toast has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for toast is missing name metadata. */ +/* ✔ [assert-true] Component schema for tooltip is missing metadata. */ +/* ✔ [assert-equal] Component schema for light material tooltip has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light material tooltip has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for tooltip is missing name metadata. */ +/* ✔ [assert-true] Component schema for tree is missing metadata. */ +/* ✔ [assert-equal] Component schema for light material tree has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light material tree has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for tree is missing name metadata. */ +/* ✔ [assert-true] Component schema for validator is missing metadata. */ +/* ✔ [assert-equal] Component schema for light material validator has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light material validator has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for validator is missing name metadata. */ +/* ✔ [assert-true] Component schema for watermark is missing metadata. */ +/* ✔ [assert-equal] Component schema for light material watermark has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light material watermark has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for watermark is missing name metadata. */ +/* ✔ [assert-true] Component schema for file-input is missing metadata. */ +/* ✔ [assert-equal] Component schema for light material file-input has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light material file-input has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for file-input is missing name metadata. */ +/* ✔ [assert-true] Component schema for category-chart is missing metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap category-chart has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap category-chart has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for category-chart is missing name metadata. */ +/* ✔ [assert-true] Component schema for data-chart is missing metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap data-chart has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap data-chart has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for data-chart is missing name metadata. */ +/* ✔ [assert-true] Component schema for doughnut-chart is missing metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap doughnut-chart has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap doughnut-chart has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for doughnut-chart is missing name metadata. */ +/* ✔ [assert-true] Component schema for financial-chart is missing metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap financial-chart has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap financial-chart has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for financial-chart is missing name metadata. */ +/* ✔ [assert-true] Component schema for funnel-chart is missing metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap funnel-chart has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap funnel-chart has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for funnel-chart is missing name metadata. */ +/* ✔ [assert-true] Component schema for linear-gauge is missing metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap linear-gauge has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap linear-gauge has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for linear-gauge is missing name metadata. */ +/* ✔ [assert-true] Component schema for radial-gauge is missing metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap radial-gauge has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap radial-gauge has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for radial-gauge is missing name metadata. */ +/* ✔ [assert-true] Component schema for geo-map is missing metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap geo-map has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap geo-map has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for geo-map is missing name metadata. */ +/* ✔ [assert-true] Component schema for bullet-graph is missing metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap bullet-graph has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap bullet-graph has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for bullet-graph is missing name metadata. */ +/* ✔ [assert-true] Component schema for pie-chart is missing metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap pie-chart has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap pie-chart has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for pie-chart is missing name metadata. */ +/* ✔ [assert-true] Component schema for shape-chart is missing metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap shape-chart has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap shape-chart has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for shape-chart is missing name metadata. */ +/* ✔ [assert-true] Component schema for sparkline is missing metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap sparkline has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap sparkline has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for sparkline is missing name metadata. */ +/* ✔ [assert-true] Component schema for action-strip is missing metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap action-strip has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap action-strip has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for action-strip is missing name metadata. */ +/* ✔ [assert-true] Component schema for avatar is missing metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap avatar has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap avatar has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for avatar is missing name metadata. */ +/* ✔ [assert-true] Component schema for badge is missing metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap badge has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap badge has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for badge is missing name metadata. */ +/* ✔ [assert-true] Component schema for banner is missing metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap banner has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap banner has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for banner is missing name metadata. */ +/* ✔ [assert-true] Component schema for bottom-nav is missing metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap bottom-nav has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap bottom-nav has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for bottom-nav is missing name metadata. */ +/* ✔ [assert-true] Component schema for flat button is missing metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap flat button has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap flat button has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for flat button is missing name metadata. */ +/* ✔ [assert-true] Component schema for outlined button is missing metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap outlined button has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap outlined button has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for outlined button is missing name metadata. */ +/* ✔ [assert-true] Component schema for contained button is missing metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap contained button has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap contained button has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for contained button is missing name metadata. */ +/* ✔ [assert-true] Component schema for fab button is missing metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap fab button has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap fab button has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for fab button is missing name metadata. */ +/* ✔ [assert-true] Component schema for button-group is missing metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap button-group has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap button-group has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for button-group is missing name metadata. */ +/* ✔ [assert-true] Component schema for calendar is missing metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap calendar has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap calendar has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for calendar is missing name metadata. */ +/* ✔ [assert-true] Component schema for card is missing metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap card has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap card has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for card is missing name metadata. */ +/* ✔ [assert-true] Component schema for carousel is missing metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap carousel has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap carousel has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for carousel is missing name metadata. */ +/* ✔ [assert-true] Component schema for chat is missing metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap chat has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap chat has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for chat is missing name metadata. */ +/* ✔ [assert-true] Component schema for checkbox is missing metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap checkbox has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap checkbox has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for checkbox is missing name metadata. */ +/* ✔ [assert-true] Component schema for chip is missing metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap chip has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap chip has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for chip is missing name metadata. */ +/* ✔ [assert-true] Component schema for color-picker is missing metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap color-picker has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap color-picker has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for color-picker is missing name metadata. */ +/* ✔ [assert-true] Component schema for column-actions is missing metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap column-actions has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap column-actions has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for column-actions is missing name metadata. */ +/* ✔ [assert-true] Component schema for combo is missing metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap combo has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap combo has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for combo is missing name metadata. */ +/* ✔ [assert-true] Component schema for date-picker is missing metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap date-picker has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap date-picker has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for date-picker is missing name metadata. */ +/* ✔ [assert-true] Component schema for date-range is missing metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap date-range has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap date-range has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for date-range is missing name metadata. */ +/* ✔ [assert-true] Component schema for dialog is missing metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap dialog has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap dialog has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for dialog is missing name metadata. */ +/* ✔ [assert-true] Component schema for divider is missing metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap divider has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap divider has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for divider is missing name metadata. */ +/* ✔ [assert-true] Component schema for dockmanager is missing metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap dockmanager has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap dockmanager has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for dockmanager is missing name metadata. */ +/* ✔ [assert-true] Component schema for drop-down is missing metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap drop-down has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap drop-down has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for drop-down is missing name metadata. */ +/* ✔ [assert-true] Component schema for expansion-panel is missing metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap expansion-panel has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap expansion-panel has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for expansion-panel is missing name metadata. */ +/* ✔ [assert-true] Component schema for grid is missing metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap grid has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap grid has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for grid is missing name metadata. */ +/* ✔ [assert-true] Component schema for grid-excel-filtering is missing metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap grid-excel-filtering has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap grid-excel-filtering has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for grid-excel-filtering is missing name metadata. */ +/* ✔ [assert-true] Component schema for grid-filtering is missing metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap grid-filtering has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap grid-filtering has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for grid-filtering is missing name metadata. */ +/* ✔ [assert-true] Component schema for grid-summary is missing metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap grid-summary has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap grid-summary has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for grid-summary is missing name metadata. */ +/* ✔ [assert-true] Component schema for grid-toolbar is missing metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap grid-toolbar has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap grid-toolbar has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for grid-toolbar is missing name metadata. */ +/* ✔ [assert-true] Component schema for highlight is missing metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap highlight has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap highlight has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for highlight is missing name metadata. */ +/* ✔ [assert-true] Component schema for icon is missing metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap icon has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap icon has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for icon is missing name metadata. */ +/* ✔ [assert-true] Component schema for flat icon-button is missing metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap flat icon-button has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap flat icon-button has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for flat icon-button is missing name metadata. */ +/* ✔ [assert-true] Component schema for contained icon-button is missing metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap contained icon-button has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap contained icon-button has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for contained icon-button is missing name metadata. */ +/* ✔ [assert-true] Component schema for outlined icon-button is missing metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap outlined icon-button has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap outlined icon-button has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for outlined icon-button is missing name metadata. */ +/* ✔ [assert-true] Component schema for input-group is missing metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap input-group has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap input-group has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for input-group is missing name metadata. */ +/* ✔ [assert-true] Component schema for label is missing metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap label has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap label has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for label is missing name metadata. */ +/* ✔ [assert-true] Component schema for list is missing metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap list has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap list has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for list is missing name metadata. */ +/* ✔ [assert-true] Component schema for navbar is missing metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap navbar has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap navbar has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for navbar is missing name metadata. */ +/* ✔ [assert-true] Component schema for nav-drawer is missing metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap nav-drawer has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap nav-drawer has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for nav-drawer is missing name metadata. */ +/* ✔ [assert-true] Component schema for overlay is missing metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap overlay has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap overlay has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for overlay is missing name metadata. */ +/* ✔ [assert-true] Component schema for paginator is missing metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap paginator has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap paginator has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for paginator is missing name metadata. */ +/* ✔ [assert-true] Component schema for pivot-data-selector is missing metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap pivot-data-selector has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap pivot-data-selector has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for pivot-data-selector is missing name metadata. */ +/* ✔ [assert-true] Component schema for linear-bar is missing metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap linear-bar has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap linear-bar has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for linear-bar is missing name metadata. */ +/* ✔ [assert-true] Component schema for circular-bar is missing metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap circular-bar has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap circular-bar has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for circular-bar is missing name metadata. */ +/* ✔ [assert-true] Component schema for qr-code is missing metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap qr-code has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap qr-code has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for qr-code is missing name metadata. */ +/* ✔ [assert-true] Component schema for query-builder is missing metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap query-builder has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap query-builder has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for query-builder is missing name metadata. */ +/* ✔ [assert-true] Component schema for radio is missing metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap radio has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap radio has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for radio is missing name metadata. */ +/* ✔ [assert-true] Component schema for rating is missing metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap rating has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap rating has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for rating is missing name metadata. */ +/* ✔ [assert-true] Component schema for resize-indicator is missing metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap resize-indicator has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap resize-indicator has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for resize-indicator is missing name metadata. */ +/* ✔ [assert-true] Component schema for ripple is missing metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap ripple has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap ripple has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for ripple is missing name metadata. */ +/* ✔ [assert-true] Component schema for scrollbar is missing metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap scrollbar has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap scrollbar has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for scrollbar is missing name metadata. */ +/* ✔ [assert-true] Component schema for select is missing metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap select has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap select has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for select is missing name metadata. */ +/* ✔ [assert-true] Component schema for slider is missing metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap slider has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap slider has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for slider is missing name metadata. */ +/* ✔ [assert-true] Component schema for snackbar is missing metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap snackbar has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap snackbar has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for snackbar is missing name metadata. */ +/* ✔ [assert-true] Component schema for splitter is missing metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap splitter has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap splitter has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for splitter is missing name metadata. */ +/* ✔ [assert-true] Component schema for stepper is missing metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap stepper has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap stepper has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for stepper is missing name metadata. */ +/* ✔ [assert-true] Component schema for switch is missing metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap switch has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap switch has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for switch is missing name metadata. */ +/* ✔ [assert-true] Component schema for tabs is missing metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap tabs has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap tabs has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for tabs is missing name metadata. */ +/* ✔ [assert-true] Component schema for tile-manager is missing metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap tile-manager has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap tile-manager has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for tile-manager is missing name metadata. */ +/* ✔ [assert-true] Component schema for time-picker is missing metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap time-picker has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap time-picker has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for time-picker is missing name metadata. */ +/* ✔ [assert-true] Component schema for toast is missing metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap toast has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap toast has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for toast is missing name metadata. */ +/* ✔ [assert-true] Component schema for tooltip is missing metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap tooltip has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap tooltip has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for tooltip is missing name metadata. */ +/* ✔ [assert-true] Component schema for tree is missing metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap tree has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap tree has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for tree is missing name metadata. */ +/* ✔ [assert-true] Component schema for validator is missing metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap validator has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap validator has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for validator is missing name metadata. */ +/* ✔ [assert-true] Component schema for watermark is missing metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap watermark has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap watermark has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for watermark is missing name metadata. */ +/* ✔ [assert-true] Component schema for file-input is missing metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap file-input has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap file-input has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for file-input is missing name metadata. */ +/* ✔ [assert-true] Component schema for category-chart is missing metadata. */ +/* ✔ [assert-equal] Component schema for light fluent category-chart has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light fluent category-chart has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for category-chart is missing name metadata. */ +/* ✔ [assert-true] Component schema for data-chart is missing metadata. */ +/* ✔ [assert-equal] Component schema for light fluent data-chart has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light fluent data-chart has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for data-chart is missing name metadata. */ +/* ✔ [assert-true] Component schema for doughnut-chart is missing metadata. */ +/* ✔ [assert-equal] Component schema for light fluent doughnut-chart has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light fluent doughnut-chart has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for doughnut-chart is missing name metadata. */ +/* ✔ [assert-true] Component schema for financial-chart is missing metadata. */ +/* ✔ [assert-equal] Component schema for light fluent financial-chart has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light fluent financial-chart has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for financial-chart is missing name metadata. */ +/* ✔ [assert-true] Component schema for funnel-chart is missing metadata. */ +/* ✔ [assert-equal] Component schema for light fluent funnel-chart has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light fluent funnel-chart has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for funnel-chart is missing name metadata. */ +/* ✔ [assert-true] Component schema for linear-gauge is missing metadata. */ +/* ✔ [assert-equal] Component schema for light fluent linear-gauge has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light fluent linear-gauge has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for linear-gauge is missing name metadata. */ +/* ✔ [assert-true] Component schema for radial-gauge is missing metadata. */ +/* ✔ [assert-equal] Component schema for light fluent radial-gauge has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light fluent radial-gauge has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for radial-gauge is missing name metadata. */ +/* ✔ [assert-true] Component schema for geo-map is missing metadata. */ +/* ✔ [assert-equal] Component schema for light fluent geo-map has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light fluent geo-map has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for geo-map is missing name metadata. */ +/* ✔ [assert-true] Component schema for bullet-graph is missing metadata. */ +/* ✔ [assert-equal] Component schema for light fluent bullet-graph has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light fluent bullet-graph has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for bullet-graph is missing name metadata. */ +/* ✔ [assert-true] Component schema for pie-chart is missing metadata. */ +/* ✔ [assert-equal] Component schema for light fluent pie-chart has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light fluent pie-chart has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for pie-chart is missing name metadata. */ +/* ✔ [assert-true] Component schema for shape-chart is missing metadata. */ +/* ✔ [assert-equal] Component schema for light fluent shape-chart has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light fluent shape-chart has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for shape-chart is missing name metadata. */ +/* ✔ [assert-true] Component schema for sparkline is missing metadata. */ +/* ✔ [assert-equal] Component schema for light fluent sparkline has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light fluent sparkline has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for sparkline is missing name metadata. */ +/* ✔ [assert-true] Component schema for action-strip is missing metadata. */ +/* ✔ [assert-equal] Component schema for light fluent action-strip has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light fluent action-strip has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for action-strip is missing name metadata. */ +/* ✔ [assert-true] Component schema for avatar is missing metadata. */ +/* ✔ [assert-equal] Component schema for light fluent avatar has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light fluent avatar has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for avatar is missing name metadata. */ +/* ✔ [assert-true] Component schema for badge is missing metadata. */ +/* ✔ [assert-equal] Component schema for light fluent badge has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light fluent badge has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for badge is missing name metadata. */ +/* ✔ [assert-true] Component schema for banner is missing metadata. */ +/* ✔ [assert-equal] Component schema for light fluent banner has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light fluent banner has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for banner is missing name metadata. */ +/* ✔ [assert-true] Component schema for bottom-nav is missing metadata. */ +/* ✔ [assert-equal] Component schema for light fluent bottom-nav has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light fluent bottom-nav has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for bottom-nav is missing name metadata. */ +/* ✔ [assert-true] Component schema for flat button is missing metadata. */ +/* ✔ [assert-equal] Component schema for light fluent flat button has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light fluent flat button has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for flat button is missing name metadata. */ +/* ✔ [assert-true] Component schema for outlined button is missing metadata. */ +/* ✔ [assert-equal] Component schema for light fluent outlined button has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light fluent outlined button has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for outlined button is missing name metadata. */ +/* ✔ [assert-true] Component schema for contained button is missing metadata. */ +/* ✔ [assert-equal] Component schema for light fluent contained button has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light fluent contained button has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for contained button is missing name metadata. */ +/* ✔ [assert-true] Component schema for fab button is missing metadata. */ +/* ✔ [assert-equal] Component schema for light fluent fab button has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light fluent fab button has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for fab button is missing name metadata. */ +/* ✔ [assert-true] Component schema for button-group is missing metadata. */ +/* ✔ [assert-equal] Component schema for light fluent button-group has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light fluent button-group has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for button-group is missing name metadata. */ +/* ✔ [assert-true] Component schema for calendar is missing metadata. */ +/* ✔ [assert-equal] Component schema for light fluent calendar has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light fluent calendar has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for calendar is missing name metadata. */ +/* ✔ [assert-true] Component schema for card is missing metadata. */ +/* ✔ [assert-equal] Component schema for light fluent card has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light fluent card has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for card is missing name metadata. */ +/* ✔ [assert-true] Component schema for carousel is missing metadata. */ +/* ✔ [assert-equal] Component schema for light fluent carousel has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light fluent carousel has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for carousel is missing name metadata. */ +/* ✔ [assert-true] Component schema for chat is missing metadata. */ +/* ✔ [assert-equal] Component schema for light fluent chat has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light fluent chat has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for chat is missing name metadata. */ +/* ✔ [assert-true] Component schema for checkbox is missing metadata. */ +/* ✔ [assert-equal] Component schema for light fluent checkbox has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light fluent checkbox has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for checkbox is missing name metadata. */ +/* ✔ [assert-true] Component schema for chip is missing metadata. */ +/* ✔ [assert-equal] Component schema for light fluent chip has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light fluent chip has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for chip is missing name metadata. */ +/* ✔ [assert-true] Component schema for color-picker is missing metadata. */ +/* ✔ [assert-equal] Component schema for light fluent color-picker has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light fluent color-picker has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for color-picker is missing name metadata. */ +/* ✔ [assert-true] Component schema for column-actions is missing metadata. */ +/* ✔ [assert-equal] Component schema for light fluent column-actions has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light fluent column-actions has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for column-actions is missing name metadata. */ +/* ✔ [assert-true] Component schema for combo is missing metadata. */ +/* ✔ [assert-equal] Component schema for light fluent combo has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light fluent combo has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for combo is missing name metadata. */ +/* ✔ [assert-true] Component schema for date-picker is missing metadata. */ +/* ✔ [assert-equal] Component schema for light fluent date-picker has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light fluent date-picker has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for date-picker is missing name metadata. */ +/* ✔ [assert-true] Component schema for date-range is missing metadata. */ +/* ✔ [assert-equal] Component schema for light fluent date-range has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light fluent date-range has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for date-range is missing name metadata. */ +/* ✔ [assert-true] Component schema for dialog is missing metadata. */ +/* ✔ [assert-equal] Component schema for light fluent dialog has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light fluent dialog has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for dialog is missing name metadata. */ +/* ✔ [assert-true] Component schema for divider is missing metadata. */ +/* ✔ [assert-equal] Component schema for light fluent divider has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light fluent divider has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for divider is missing name metadata. */ +/* ✔ [assert-true] Component schema for dockmanager is missing metadata. */ +/* ✔ [assert-equal] Component schema for light fluent dockmanager has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light fluent dockmanager has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for dockmanager is missing name metadata. */ +/* ✔ [assert-true] Component schema for drop-down is missing metadata. */ +/* ✔ [assert-equal] Component schema for light fluent drop-down has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light fluent drop-down has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for drop-down is missing name metadata. */ +/* ✔ [assert-true] Component schema for expansion-panel is missing metadata. */ +/* ✔ [assert-equal] Component schema for light fluent expansion-panel has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light fluent expansion-panel has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for expansion-panel is missing name metadata. */ +/* ✔ [assert-true] Component schema for grid is missing metadata. */ +/* ✔ [assert-equal] Component schema for light fluent grid has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light fluent grid has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for grid is missing name metadata. */ +/* ✔ [assert-true] Component schema for grid-excel-filtering is missing metadata. */ +/* ✔ [assert-equal] Component schema for light fluent grid-excel-filtering has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light fluent grid-excel-filtering has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for grid-excel-filtering is missing name metadata. */ +/* ✔ [assert-true] Component schema for grid-filtering is missing metadata. */ +/* ✔ [assert-equal] Component schema for light fluent grid-filtering has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light fluent grid-filtering has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for grid-filtering is missing name metadata. */ +/* ✔ [assert-true] Component schema for grid-summary is missing metadata. */ +/* ✔ [assert-equal] Component schema for light fluent grid-summary has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light fluent grid-summary has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for grid-summary is missing name metadata. */ +/* ✔ [assert-true] Component schema for grid-toolbar is missing metadata. */ +/* ✔ [assert-equal] Component schema for light fluent grid-toolbar has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light fluent grid-toolbar has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for grid-toolbar is missing name metadata. */ +/* ✔ [assert-true] Component schema for highlight is missing metadata. */ +/* ✔ [assert-equal] Component schema for light fluent highlight has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light fluent highlight has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for highlight is missing name metadata. */ +/* ✔ [assert-true] Component schema for icon is missing metadata. */ +/* ✔ [assert-equal] Component schema for light fluent icon has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light fluent icon has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for icon is missing name metadata. */ +/* ✔ [assert-true] Component schema for flat icon-button is missing metadata. */ +/* ✔ [assert-equal] Component schema for light fluent flat icon-button has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light fluent flat icon-button has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for flat icon-button is missing name metadata. */ +/* ✔ [assert-true] Component schema for contained icon-button is missing metadata. */ +/* ✔ [assert-equal] Component schema for light fluent contained icon-button has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light fluent contained icon-button has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for contained icon-button is missing name metadata. */ +/* ✔ [assert-true] Component schema for outlined icon-button is missing metadata. */ +/* ✔ [assert-equal] Component schema for light fluent outlined icon-button has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light fluent outlined icon-button has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for outlined icon-button is missing name metadata. */ +/* ✔ [assert-true] Component schema for input-group is missing metadata. */ +/* ✔ [assert-equal] Component schema for light fluent input-group has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light fluent input-group has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for input-group is missing name metadata. */ +/* ✔ [assert-true] Component schema for label is missing metadata. */ +/* ✔ [assert-equal] Component schema for light fluent label has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light fluent label has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for label is missing name metadata. */ +/* ✔ [assert-true] Component schema for list is missing metadata. */ +/* ✔ [assert-equal] Component schema for light fluent list has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light fluent list has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for list is missing name metadata. */ +/* ✔ [assert-true] Component schema for navbar is missing metadata. */ +/* ✔ [assert-equal] Component schema for light fluent navbar has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light fluent navbar has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for navbar is missing name metadata. */ +/* ✔ [assert-true] Component schema for nav-drawer is missing metadata. */ +/* ✔ [assert-equal] Component schema for light fluent nav-drawer has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light fluent nav-drawer has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for nav-drawer is missing name metadata. */ +/* ✔ [assert-true] Component schema for overlay is missing metadata. */ +/* ✔ [assert-equal] Component schema for light fluent overlay has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light fluent overlay has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for overlay is missing name metadata. */ +/* ✔ [assert-true] Component schema for paginator is missing metadata. */ +/* ✔ [assert-equal] Component schema for light fluent paginator has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light fluent paginator has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for paginator is missing name metadata. */ +/* ✔ [assert-true] Component schema for pivot-data-selector is missing metadata. */ +/* ✔ [assert-equal] Component schema for light fluent pivot-data-selector has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light fluent pivot-data-selector has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for pivot-data-selector is missing name metadata. */ +/* ✔ [assert-true] Component schema for linear-bar is missing metadata. */ +/* ✔ [assert-equal] Component schema for light fluent linear-bar has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light fluent linear-bar has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for linear-bar is missing name metadata. */ +/* ✔ [assert-true] Component schema for circular-bar is missing metadata. */ +/* ✔ [assert-equal] Component schema for light fluent circular-bar has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light fluent circular-bar has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for circular-bar is missing name metadata. */ +/* ✔ [assert-true] Component schema for qr-code is missing metadata. */ +/* ✔ [assert-equal] Component schema for light fluent qr-code has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light fluent qr-code has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for qr-code is missing name metadata. */ +/* ✔ [assert-true] Component schema for query-builder is missing metadata. */ +/* ✔ [assert-equal] Component schema for light fluent query-builder has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light fluent query-builder has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for query-builder is missing name metadata. */ +/* ✔ [assert-true] Component schema for radio is missing metadata. */ +/* ✔ [assert-equal] Component schema for light fluent radio has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light fluent radio has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for radio is missing name metadata. */ +/* ✔ [assert-true] Component schema for rating is missing metadata. */ +/* ✔ [assert-equal] Component schema for light fluent rating has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light fluent rating has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for rating is missing name metadata. */ +/* ✔ [assert-true] Component schema for resize-indicator is missing metadata. */ +/* ✔ [assert-equal] Component schema for light fluent resize-indicator has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light fluent resize-indicator has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for resize-indicator is missing name metadata. */ +/* ✔ [assert-true] Component schema for ripple is missing metadata. */ +/* ✔ [assert-equal] Component schema for light fluent ripple has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light fluent ripple has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for ripple is missing name metadata. */ +/* ✔ [assert-true] Component schema for scrollbar is missing metadata. */ +/* ✔ [assert-equal] Component schema for light fluent scrollbar has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light fluent scrollbar has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for scrollbar is missing name metadata. */ +/* ✔ [assert-true] Component schema for select is missing metadata. */ +/* ✔ [assert-equal] Component schema for light fluent select has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light fluent select has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for select is missing name metadata. */ +/* ✔ [assert-true] Component schema for slider is missing metadata. */ +/* ✔ [assert-equal] Component schema for light fluent slider has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light fluent slider has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for slider is missing name metadata. */ +/* ✔ [assert-true] Component schema for snackbar is missing metadata. */ +/* ✔ [assert-equal] Component schema for light fluent snackbar has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light fluent snackbar has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for snackbar is missing name metadata. */ +/* ✔ [assert-true] Component schema for splitter is missing metadata. */ +/* ✔ [assert-equal] Component schema for light fluent splitter has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light fluent splitter has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for splitter is missing name metadata. */ +/* ✔ [assert-true] Component schema for stepper is missing metadata. */ +/* ✔ [assert-equal] Component schema for light fluent stepper has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light fluent stepper has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for stepper is missing name metadata. */ +/* ✔ [assert-true] Component schema for switch is missing metadata. */ +/* ✔ [assert-equal] Component schema for light fluent switch has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light fluent switch has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for switch is missing name metadata. */ +/* ✔ [assert-true] Component schema for tabs is missing metadata. */ +/* ✔ [assert-equal] Component schema for light fluent tabs has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light fluent tabs has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for tabs is missing name metadata. */ +/* ✔ [assert-true] Component schema for tile-manager is missing metadata. */ +/* ✔ [assert-equal] Component schema for light fluent tile-manager has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light fluent tile-manager has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for tile-manager is missing name metadata. */ +/* ✔ [assert-true] Component schema for time-picker is missing metadata. */ +/* ✔ [assert-equal] Component schema for light fluent time-picker has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light fluent time-picker has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for time-picker is missing name metadata. */ +/* ✔ [assert-true] Component schema for toast is missing metadata. */ +/* ✔ [assert-equal] Component schema for light fluent toast has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light fluent toast has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for toast is missing name metadata. */ +/* ✔ [assert-true] Component schema for tooltip is missing metadata. */ +/* ✔ [assert-equal] Component schema for light fluent tooltip has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light fluent tooltip has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for tooltip is missing name metadata. */ +/* ✔ [assert-true] Component schema for tree is missing metadata. */ +/* ✔ [assert-equal] Component schema for light fluent tree has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light fluent tree has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for tree is missing name metadata. */ +/* ✔ [assert-true] Component schema for validator is missing metadata. */ +/* ✔ [assert-equal] Component schema for light fluent validator has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light fluent validator has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for validator is missing name metadata. */ +/* ✔ [assert-true] Component schema for watermark is missing metadata. */ +/* ✔ [assert-equal] Component schema for light fluent watermark has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light fluent watermark has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for watermark is missing name metadata. */ +/* ✔ [assert-true] Component schema for file-input is missing metadata. */ +/* ✔ [assert-equal] Component schema for light fluent file-input has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light fluent file-input has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for file-input is missing name metadata. */ +/* ✔ [assert-true] Component schema for category-chart is missing metadata. */ +/* ✔ [assert-equal] Component schema for light indigo category-chart has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light indigo category-chart has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for category-chart is missing name metadata. */ +/* ✔ [assert-true] Component schema for data-chart is missing metadata. */ +/* ✔ [assert-equal] Component schema for light indigo data-chart has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light indigo data-chart has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for data-chart is missing name metadata. */ +/* ✔ [assert-true] Component schema for doughnut-chart is missing metadata. */ +/* ✔ [assert-equal] Component schema for light indigo doughnut-chart has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light indigo doughnut-chart has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for doughnut-chart is missing name metadata. */ +/* ✔ [assert-true] Component schema for financial-chart is missing metadata. */ +/* ✔ [assert-equal] Component schema for light indigo financial-chart has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light indigo financial-chart has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for financial-chart is missing name metadata. */ +/* ✔ [assert-true] Component schema for funnel-chart is missing metadata. */ +/* ✔ [assert-equal] Component schema for light indigo funnel-chart has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light indigo funnel-chart has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for funnel-chart is missing name metadata. */ +/* ✔ [assert-true] Component schema for linear-gauge is missing metadata. */ +/* ✔ [assert-equal] Component schema for light indigo linear-gauge has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light indigo linear-gauge has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for linear-gauge is missing name metadata. */ +/* ✔ [assert-true] Component schema for radial-gauge is missing metadata. */ +/* ✔ [assert-equal] Component schema for light indigo radial-gauge has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light indigo radial-gauge has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for radial-gauge is missing name metadata. */ +/* ✔ [assert-true] Component schema for geo-map is missing metadata. */ +/* ✔ [assert-equal] Component schema for light indigo geo-map has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light indigo geo-map has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for geo-map is missing name metadata. */ +/* ✔ [assert-true] Component schema for bullet-graph is missing metadata. */ +/* ✔ [assert-equal] Component schema for light indigo bullet-graph has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light indigo bullet-graph has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for bullet-graph is missing name metadata. */ +/* ✔ [assert-true] Component schema for pie-chart is missing metadata. */ +/* ✔ [assert-equal] Component schema for light indigo pie-chart has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light indigo pie-chart has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for pie-chart is missing name metadata. */ +/* ✔ [assert-true] Component schema for shape-chart is missing metadata. */ +/* ✔ [assert-equal] Component schema for light indigo shape-chart has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light indigo shape-chart has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for shape-chart is missing name metadata. */ +/* ✔ [assert-true] Component schema for sparkline is missing metadata. */ +/* ✔ [assert-equal] Component schema for light indigo sparkline has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light indigo sparkline has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for sparkline is missing name metadata. */ +/* ✔ [assert-true] Component schema for action-strip is missing metadata. */ +/* ✔ [assert-equal] Component schema for light indigo action-strip has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light indigo action-strip has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for action-strip is missing name metadata. */ +/* ✔ [assert-true] Component schema for avatar is missing metadata. */ +/* ✔ [assert-equal] Component schema for light indigo avatar has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light indigo avatar has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for avatar is missing name metadata. */ +/* ✔ [assert-true] Component schema for badge is missing metadata. */ +/* ✔ [assert-equal] Component schema for light indigo badge has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light indigo badge has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for badge is missing name metadata. */ +/* ✔ [assert-true] Component schema for banner is missing metadata. */ +/* ✔ [assert-equal] Component schema for light indigo banner has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light indigo banner has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for banner is missing name metadata. */ +/* ✔ [assert-true] Component schema for bottom-nav is missing metadata. */ +/* ✔ [assert-equal] Component schema for light indigo bottom-nav has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light indigo bottom-nav has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for bottom-nav is missing name metadata. */ +/* ✔ [assert-true] Component schema for flat button is missing metadata. */ +/* ✔ [assert-equal] Component schema for light indigo flat button has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light indigo flat button has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for flat button is missing name metadata. */ +/* ✔ [assert-true] Component schema for outlined button is missing metadata. */ +/* ✔ [assert-equal] Component schema for light indigo outlined button has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light indigo outlined button has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for outlined button is missing name metadata. */ +/* ✔ [assert-true] Component schema for contained button is missing metadata. */ +/* ✔ [assert-equal] Component schema for light indigo contained button has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light indigo contained button has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for contained button is missing name metadata. */ +/* ✔ [assert-true] Component schema for fab button is missing metadata. */ +/* ✔ [assert-equal] Component schema for light indigo fab button has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light indigo fab button has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for fab button is missing name metadata. */ +/* ✔ [assert-true] Component schema for button-group is missing metadata. */ +/* ✔ [assert-equal] Component schema for light indigo button-group has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light indigo button-group has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for button-group is missing name metadata. */ +/* ✔ [assert-true] Component schema for calendar is missing metadata. */ +/* ✔ [assert-equal] Component schema for light indigo calendar has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light indigo calendar has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for calendar is missing name metadata. */ +/* ✔ [assert-true] Component schema for card is missing metadata. */ +/* ✔ [assert-equal] Component schema for light indigo card has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light indigo card has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for card is missing name metadata. */ +/* ✔ [assert-true] Component schema for carousel is missing metadata. */ +/* ✔ [assert-equal] Component schema for light indigo carousel has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light indigo carousel has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for carousel is missing name metadata. */ +/* ✔ [assert-true] Component schema for chat is missing metadata. */ +/* ✔ [assert-equal] Component schema for light indigo chat has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light indigo chat has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for chat is missing name metadata. */ +/* ✔ [assert-true] Component schema for checkbox is missing metadata. */ +/* ✔ [assert-equal] Component schema for light indigo checkbox has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light indigo checkbox has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for checkbox is missing name metadata. */ +/* ✔ [assert-true] Component schema for chip is missing metadata. */ +/* ✔ [assert-equal] Component schema for light indigo chip has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light indigo chip has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for chip is missing name metadata. */ +/* ✔ [assert-true] Component schema for color-picker is missing metadata. */ +/* ✔ [assert-equal] Component schema for light indigo color-picker has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light indigo color-picker has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for color-picker is missing name metadata. */ +/* ✔ [assert-true] Component schema for column-actions is missing metadata. */ +/* ✔ [assert-equal] Component schema for light indigo column-actions has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light indigo column-actions has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for column-actions is missing name metadata. */ +/* ✔ [assert-true] Component schema for combo is missing metadata. */ +/* ✔ [assert-equal] Component schema for light indigo combo has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light indigo combo has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for combo is missing name metadata. */ +/* ✔ [assert-true] Component schema for date-picker is missing metadata. */ +/* ✔ [assert-equal] Component schema for light indigo date-picker has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light indigo date-picker has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for date-picker is missing name metadata. */ +/* ✔ [assert-true] Component schema for date-range is missing metadata. */ +/* ✔ [assert-equal] Component schema for light indigo date-range has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light indigo date-range has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for date-range is missing name metadata. */ +/* ✔ [assert-true] Component schema for dialog is missing metadata. */ +/* ✔ [assert-equal] Component schema for light indigo dialog has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light indigo dialog has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for dialog is missing name metadata. */ +/* ✔ [assert-true] Component schema for divider is missing metadata. */ +/* ✔ [assert-equal] Component schema for light indigo divider has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light indigo divider has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for divider is missing name metadata. */ +/* ✔ [assert-true] Component schema for dockmanager is missing metadata. */ +/* ✔ [assert-equal] Component schema for light indigo dockmanager has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light indigo dockmanager has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for dockmanager is missing name metadata. */ +/* ✔ [assert-true] Component schema for drop-down is missing metadata. */ +/* ✔ [assert-equal] Component schema for light indigo drop-down has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light indigo drop-down has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for drop-down is missing name metadata. */ +/* ✔ [assert-true] Component schema for expansion-panel is missing metadata. */ +/* ✔ [assert-equal] Component schema for light indigo expansion-panel has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light indigo expansion-panel has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for expansion-panel is missing name metadata. */ +/* ✔ [assert-true] Component schema for grid is missing metadata. */ +/* ✔ [assert-equal] Component schema for light indigo grid has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light indigo grid has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for grid is missing name metadata. */ +/* ✔ [assert-true] Component schema for grid-excel-filtering is missing metadata. */ +/* ✔ [assert-equal] Component schema for light indigo grid-excel-filtering has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light indigo grid-excel-filtering has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for grid-excel-filtering is missing name metadata. */ +/* ✔ [assert-true] Component schema for grid-filtering is missing metadata. */ +/* ✔ [assert-equal] Component schema for light indigo grid-filtering has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light indigo grid-filtering has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for grid-filtering is missing name metadata. */ +/* ✔ [assert-true] Component schema for grid-summary is missing metadata. */ +/* ✔ [assert-equal] Component schema for light indigo grid-summary has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light indigo grid-summary has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for grid-summary is missing name metadata. */ +/* ✔ [assert-true] Component schema for grid-toolbar is missing metadata. */ +/* ✔ [assert-equal] Component schema for light indigo grid-toolbar has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light indigo grid-toolbar has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for grid-toolbar is missing name metadata. */ +/* ✔ [assert-true] Component schema for highlight is missing metadata. */ +/* ✔ [assert-equal] Component schema for light indigo highlight has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light indigo highlight has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for highlight is missing name metadata. */ +/* ✔ [assert-true] Component schema for icon is missing metadata. */ +/* ✔ [assert-equal] Component schema for light indigo icon has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light indigo icon has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for icon is missing name metadata. */ +/* ✔ [assert-true] Component schema for flat icon-button is missing metadata. */ +/* ✔ [assert-equal] Component schema for light indigo flat icon-button has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light indigo flat icon-button has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for flat icon-button is missing name metadata. */ +/* ✔ [assert-true] Component schema for contained icon-button is missing metadata. */ +/* ✔ [assert-equal] Component schema for light indigo contained icon-button has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light indigo contained icon-button has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for contained icon-button is missing name metadata. */ +/* ✔ [assert-true] Component schema for outlined icon-button is missing metadata. */ +/* ✔ [assert-equal] Component schema for light indigo outlined icon-button has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light indigo outlined icon-button has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for outlined icon-button is missing name metadata. */ +/* ✔ [assert-true] Component schema for input-group is missing metadata. */ +/* ✔ [assert-equal] Component schema for light indigo input-group has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light indigo input-group has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for input-group is missing name metadata. */ +/* ✔ [assert-true] Component schema for label is missing metadata. */ +/* ✔ [assert-equal] Component schema for light indigo label has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light indigo label has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for label is missing name metadata. */ +/* ✔ [assert-true] Component schema for list is missing metadata. */ +/* ✔ [assert-equal] Component schema for light indigo list has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light indigo list has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for list is missing name metadata. */ +/* ✔ [assert-true] Component schema for navbar is missing metadata. */ +/* ✔ [assert-equal] Component schema for light indigo navbar has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light indigo navbar has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for navbar is missing name metadata. */ +/* ✔ [assert-true] Component schema for nav-drawer is missing metadata. */ +/* ✔ [assert-equal] Component schema for light indigo nav-drawer has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light indigo nav-drawer has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for nav-drawer is missing name metadata. */ +/* ✔ [assert-true] Component schema for overlay is missing metadata. */ +/* ✔ [assert-equal] Component schema for light indigo overlay has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light indigo overlay has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for overlay is missing name metadata. */ +/* ✔ [assert-true] Component schema for paginator is missing metadata. */ +/* ✔ [assert-equal] Component schema for light indigo paginator has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light indigo paginator has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for paginator is missing name metadata. */ +/* ✔ [assert-true] Component schema for pivot-data-selector is missing metadata. */ +/* ✔ [assert-equal] Component schema for light indigo pivot-data-selector has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light indigo pivot-data-selector has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for pivot-data-selector is missing name metadata. */ +/* ✔ [assert-true] Component schema for linear-bar is missing metadata. */ +/* ✔ [assert-equal] Component schema for light indigo linear-bar has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light indigo linear-bar has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for linear-bar is missing name metadata. */ +/* ✔ [assert-true] Component schema for circular-bar is missing metadata. */ +/* ✔ [assert-equal] Component schema for light indigo circular-bar has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light indigo circular-bar has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for circular-bar is missing name metadata. */ +/* ✔ [assert-true] Component schema for qr-code is missing metadata. */ +/* ✔ [assert-equal] Component schema for light indigo qr-code has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light indigo qr-code has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for qr-code is missing name metadata. */ +/* ✔ [assert-true] Component schema for query-builder is missing metadata. */ +/* ✔ [assert-equal] Component schema for light indigo query-builder has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light indigo query-builder has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for query-builder is missing name metadata. */ +/* ✔ [assert-true] Component schema for radio is missing metadata. */ +/* ✔ [assert-equal] Component schema for light indigo radio has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light indigo radio has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for radio is missing name metadata. */ +/* ✔ [assert-true] Component schema for rating is missing metadata. */ +/* ✔ [assert-equal] Component schema for light indigo rating has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light indigo rating has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for rating is missing name metadata. */ +/* ✔ [assert-true] Component schema for resize-indicator is missing metadata. */ +/* ✔ [assert-equal] Component schema for light indigo resize-indicator has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light indigo resize-indicator has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for resize-indicator is missing name metadata. */ +/* ✔ [assert-true] Component schema for ripple is missing metadata. */ +/* ✔ [assert-equal] Component schema for light indigo ripple has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light indigo ripple has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for ripple is missing name metadata. */ +/* ✔ [assert-true] Component schema for scrollbar is missing metadata. */ +/* ✔ [assert-equal] Component schema for light indigo scrollbar has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light indigo scrollbar has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for scrollbar is missing name metadata. */ +/* ✔ [assert-true] Component schema for select is missing metadata. */ +/* ✔ [assert-equal] Component schema for light indigo select has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light indigo select has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for select is missing name metadata. */ +/* ✔ [assert-true] Component schema for slider is missing metadata. */ +/* ✔ [assert-equal] Component schema for light indigo slider has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light indigo slider has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for slider is missing name metadata. */ +/* ✔ [assert-true] Component schema for snackbar is missing metadata. */ +/* ✔ [assert-equal] Component schema for light indigo snackbar has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light indigo snackbar has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for snackbar is missing name metadata. */ +/* ✔ [assert-true] Component schema for splitter is missing metadata. */ +/* ✔ [assert-equal] Component schema for light indigo splitter has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light indigo splitter has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for splitter is missing name metadata. */ +/* ✔ [assert-true] Component schema for stepper is missing metadata. */ +/* ✔ [assert-equal] Component schema for light indigo stepper has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light indigo stepper has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for stepper is missing name metadata. */ +/* ✔ [assert-true] Component schema for switch is missing metadata. */ +/* ✔ [assert-equal] Component schema for light indigo switch has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light indigo switch has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for switch is missing name metadata. */ +/* ✔ [assert-true] Component schema for tabs is missing metadata. */ +/* ✔ [assert-equal] Component schema for light indigo tabs has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light indigo tabs has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for tabs is missing name metadata. */ +/* ✔ [assert-true] Component schema for tile-manager is missing metadata. */ +/* ✔ [assert-equal] Component schema for light indigo tile-manager has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light indigo tile-manager has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for tile-manager is missing name metadata. */ +/* ✔ [assert-true] Component schema for time-picker is missing metadata. */ +/* ✔ [assert-equal] Component schema for light indigo time-picker has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light indigo time-picker has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for time-picker is missing name metadata. */ +/* ✔ [assert-true] Component schema for toast is missing metadata. */ +/* ✔ [assert-equal] Component schema for light indigo toast has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light indigo toast has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for toast is missing name metadata. */ +/* ✔ [assert-true] Component schema for tooltip is missing metadata. */ +/* ✔ [assert-equal] Component schema for light indigo tooltip has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light indigo tooltip has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for tooltip is missing name metadata. */ +/* ✔ [assert-true] Component schema for tree is missing metadata. */ +/* ✔ [assert-equal] Component schema for light indigo tree has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light indigo tree has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for tree is missing name metadata. */ +/* ✔ [assert-true] Component schema for validator is missing metadata. */ +/* ✔ [assert-equal] Component schema for light indigo validator has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light indigo validator has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for validator is missing name metadata. */ +/* ✔ [assert-true] Component schema for watermark is missing metadata. */ +/* ✔ [assert-equal] Component schema for light indigo watermark has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light indigo watermark has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for watermark is missing name metadata. */ +/* ✔ [assert-true] Component schema for file-input is missing metadata. */ +/* ✔ [assert-equal] Component schema for light indigo file-input has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light indigo file-input has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for file-input is missing name metadata. */ +/* ✔ [assert-true] Component schema for category-chart is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark material category-chart has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark material category-chart has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for category-chart is missing name metadata. */ +/* ✔ [assert-true] Component schema for data-chart is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark material data-chart has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark material data-chart has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for data-chart is missing name metadata. */ +/* ✔ [assert-true] Component schema for doughnut-chart is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark material doughnut-chart has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark material doughnut-chart has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for doughnut-chart is missing name metadata. */ +/* ✔ [assert-true] Component schema for financial-chart is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark material financial-chart has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark material financial-chart has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for financial-chart is missing name metadata. */ +/* ✔ [assert-true] Component schema for funnel-chart is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark material funnel-chart has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark material funnel-chart has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for funnel-chart is missing name metadata. */ +/* ✔ [assert-true] Component schema for linear-gauge is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark material linear-gauge has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark material linear-gauge has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for linear-gauge is missing name metadata. */ +/* ✔ [assert-true] Component schema for radial-gauge is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark material radial-gauge has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark material radial-gauge has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for radial-gauge is missing name metadata. */ +/* ✔ [assert-true] Component schema for geo-map is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark material geo-map has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark material geo-map has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for geo-map is missing name metadata. */ +/* ✔ [assert-true] Component schema for bullet-graph is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark material bullet-graph has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark material bullet-graph has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for bullet-graph is missing name metadata. */ +/* ✔ [assert-true] Component schema for pie-chart is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark material pie-chart has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark material pie-chart has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for pie-chart is missing name metadata. */ +/* ✔ [assert-true] Component schema for shape-chart is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark material shape-chart has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark material shape-chart has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for shape-chart is missing name metadata. */ +/* ✔ [assert-true] Component schema for sparkline is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark material sparkline has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark material sparkline has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for sparkline is missing name metadata. */ +/* ✔ [assert-true] Component schema for action-strip is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark material action-strip has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark material action-strip has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for action-strip is missing name metadata. */ +/* ✔ [assert-true] Component schema for avatar is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark material avatar has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark material avatar has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for avatar is missing name metadata. */ +/* ✔ [assert-true] Component schema for badge is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark material badge has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark material badge has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for badge is missing name metadata. */ +/* ✔ [assert-true] Component schema for banner is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark material banner has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark material banner has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for banner is missing name metadata. */ +/* ✔ [assert-true] Component schema for bottom-nav is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark material bottom-nav has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark material bottom-nav has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for bottom-nav is missing name metadata. */ +/* ✔ [assert-true] Component schema for flat button is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark material flat button has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark material flat button has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for flat button is missing name metadata. */ +/* ✔ [assert-true] Component schema for outlined button is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark material outlined button has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark material outlined button has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for outlined button is missing name metadata. */ +/* ✔ [assert-true] Component schema for contained button is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark material contained button has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark material contained button has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for contained button is missing name metadata. */ +/* ✔ [assert-true] Component schema for fab button is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark material fab button has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark material fab button has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for fab button is missing name metadata. */ +/* ✔ [assert-true] Component schema for button-group is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark material button-group has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark material button-group has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for button-group is missing name metadata. */ +/* ✔ [assert-true] Component schema for calendar is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark material calendar has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark material calendar has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for calendar is missing name metadata. */ +/* ✔ [assert-true] Component schema for card is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark material card has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark material card has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for card is missing name metadata. */ +/* ✔ [assert-true] Component schema for carousel is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark material carousel has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark material carousel has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for carousel is missing name metadata. */ +/* ✔ [assert-true] Component schema for chat is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark material chat has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark material chat has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for chat is missing name metadata. */ +/* ✔ [assert-true] Component schema for checkbox is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark material checkbox has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark material checkbox has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for checkbox is missing name metadata. */ +/* ✔ [assert-true] Component schema for chip is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark material chip has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark material chip has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for chip is missing name metadata. */ +/* ✔ [assert-true] Component schema for color-picker is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark material color-picker has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark material color-picker has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for color-picker is missing name metadata. */ +/* ✔ [assert-true] Component schema for column-actions is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark material column-actions has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark material column-actions has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for column-actions is missing name metadata. */ +/* ✔ [assert-true] Component schema for combo is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark material combo has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark material combo has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for combo is missing name metadata. */ +/* ✔ [assert-true] Component schema for date-picker is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark material date-picker has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark material date-picker has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for date-picker is missing name metadata. */ +/* ✔ [assert-true] Component schema for date-range is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark material date-range has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark material date-range has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for date-range is missing name metadata. */ +/* ✔ [assert-true] Component schema for dialog is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark material dialog has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark material dialog has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for dialog is missing name metadata. */ +/* ✔ [assert-true] Component schema for divider is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark material divider has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark material divider has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for divider is missing name metadata. */ +/* ✔ [assert-true] Component schema for dockmanager is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark material dockmanager has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark material dockmanager has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for dockmanager is missing name metadata. */ +/* ✔ [assert-true] Component schema for drop-down is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark material drop-down has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark material drop-down has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for drop-down is missing name metadata. */ +/* ✔ [assert-true] Component schema for expansion-panel is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark material expansion-panel has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark material expansion-panel has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for expansion-panel is missing name metadata. */ +/* ✔ [assert-true] Component schema for grid is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark material grid has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark material grid has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for grid is missing name metadata. */ +/* ✔ [assert-true] Component schema for grid-excel-filtering is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark material grid-excel-filtering has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark material grid-excel-filtering has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for grid-excel-filtering is missing name metadata. */ +/* ✔ [assert-true] Component schema for grid-filtering is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark material grid-filtering has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark material grid-filtering has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for grid-filtering is missing name metadata. */ +/* ✔ [assert-true] Component schema for grid-summary is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark material grid-summary has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark material grid-summary has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for grid-summary is missing name metadata. */ +/* ✔ [assert-true] Component schema for grid-toolbar is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark material grid-toolbar has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark material grid-toolbar has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for grid-toolbar is missing name metadata. */ +/* ✔ [assert-true] Component schema for highlight is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark material highlight has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark material highlight has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for highlight is missing name metadata. */ +/* ✔ [assert-true] Component schema for icon is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark material icon has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark material icon has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for icon is missing name metadata. */ +/* ✔ [assert-true] Component schema for flat icon-button is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark material flat icon-button has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark material flat icon-button has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for flat icon-button is missing name metadata. */ +/* ✔ [assert-true] Component schema for outlined icon-button is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark material outlined icon-button has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark material outlined icon-button has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for outlined icon-button is missing name metadata. */ +/* ✔ [assert-true] Component schema for contained icon-button is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark material contained icon-button has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark material contained icon-button has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for contained icon-button is missing name metadata. */ +/* ✔ [assert-true] Component schema for input-group is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark material input-group has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark material input-group has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for input-group is missing name metadata. */ +/* ✔ [assert-true] Component schema for label is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark material label has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark material label has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for label is missing name metadata. */ +/* ✔ [assert-true] Component schema for list is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark material list has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark material list has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for list is missing name metadata. */ +/* ✔ [assert-true] Component schema for navbar is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark material navbar has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark material navbar has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for navbar is missing name metadata. */ +/* ✔ [assert-true] Component schema for nav-drawer is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark material nav-drawer has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark material nav-drawer has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for nav-drawer is missing name metadata. */ +/* ✔ [assert-true] Component schema for overlay is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark material overlay has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark material overlay has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for overlay is missing name metadata. */ +/* ✔ [assert-true] Component schema for paginator is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark material paginator has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark material paginator has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for paginator is missing name metadata. */ +/* ✔ [assert-true] Component schema for pivot-data-selector is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark material pivot-data-selector has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark material pivot-data-selector has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for pivot-data-selector is missing name metadata. */ +/* ✔ [assert-true] Component schema for linear-bar is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark material linear-bar has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark material linear-bar has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for linear-bar is missing name metadata. */ +/* ✔ [assert-true] Component schema for circular-bar is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark material circular-bar has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark material circular-bar has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for circular-bar is missing name metadata. */ +/* ✔ [assert-true] Component schema for qr-code is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark material qr-code has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark material qr-code has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for qr-code is missing name metadata. */ +/* ✔ [assert-true] Component schema for query-builder is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark material query-builder has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark material query-builder has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for query-builder is missing name metadata. */ +/* ✔ [assert-true] Component schema for radio is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark material radio has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark material radio has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for radio is missing name metadata. */ +/* ✔ [assert-true] Component schema for rating is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark material rating has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark material rating has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for rating is missing name metadata. */ +/* ✔ [assert-true] Component schema for resize-indicator is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark material resize-indicator has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark material resize-indicator has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for resize-indicator is missing name metadata. */ +/* ✔ [assert-true] Component schema for ripple is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark material ripple has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark material ripple has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for ripple is missing name metadata. */ +/* ✔ [assert-true] Component schema for scrollbar is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark material scrollbar has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark material scrollbar has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for scrollbar is missing name metadata. */ +/* ✔ [assert-true] Component schema for select is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark material select has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark material select has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for select is missing name metadata. */ +/* ✔ [assert-true] Component schema for slider is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark material slider has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark material slider has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for slider is missing name metadata. */ +/* ✔ [assert-true] Component schema for snackbar is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark material snackbar has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark material snackbar has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for snackbar is missing name metadata. */ +/* ✔ [assert-true] Component schema for splitter is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark material splitter has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark material splitter has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for splitter is missing name metadata. */ +/* ✔ [assert-true] Component schema for stepper is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark material stepper has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark material stepper has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for stepper is missing name metadata. */ +/* ✔ [assert-true] Component schema for switch is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark material switch has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark material switch has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for switch is missing name metadata. */ +/* ✔ [assert-true] Component schema for tabs is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark material tabs has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark material tabs has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for tabs is missing name metadata. */ +/* ✔ [assert-true] Component schema for tile-manager is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark material tile-manager has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark material tile-manager has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for tile-manager is missing name metadata. */ +/* ✔ [assert-true] Component schema for time-picker is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark material time-picker has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark material time-picker has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for time-picker is missing name metadata. */ +/* ✔ [assert-true] Component schema for toast is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark material toast has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark material toast has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for toast is missing name metadata. */ +/* ✔ [assert-true] Component schema for tooltip is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark material tooltip has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark material tooltip has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for tooltip is missing name metadata. */ +/* ✔ [assert-true] Component schema for tree is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark material tree has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark material tree has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for tree is missing name metadata. */ +/* ✔ [assert-true] Component schema for validator is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark material validator has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark material validator has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for validator is missing name metadata. */ +/* ✔ [assert-true] Component schema for watermark is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark material watermark has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark material watermark has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for watermark is missing name metadata. */ +/* ✔ [assert-true] Component schema for file-input is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark material file-input has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark material file-input has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for file-input is missing name metadata. */ +/* ✔ [assert-true] Component schema for category-chart is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap category-chart has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap category-chart has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for category-chart is missing name metadata. */ +/* ✔ [assert-true] Component schema for data-chart is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap data-chart has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap data-chart has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for data-chart is missing name metadata. */ +/* ✔ [assert-true] Component schema for doughnut-chart is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap doughnut-chart has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap doughnut-chart has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for doughnut-chart is missing name metadata. */ +/* ✔ [assert-true] Component schema for financial-chart is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap financial-chart has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap financial-chart has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for financial-chart is missing name metadata. */ +/* ✔ [assert-true] Component schema for funnel-chart is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap funnel-chart has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap funnel-chart has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for funnel-chart is missing name metadata. */ +/* ✔ [assert-true] Component schema for linear-gauge is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap linear-gauge has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap linear-gauge has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for linear-gauge is missing name metadata. */ +/* ✔ [assert-true] Component schema for radial-gauge is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap radial-gauge has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap radial-gauge has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for radial-gauge is missing name metadata. */ +/* ✔ [assert-true] Component schema for geo-map is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap geo-map has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap geo-map has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for geo-map is missing name metadata. */ +/* ✔ [assert-true] Component schema for bullet-graph is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap bullet-graph has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap bullet-graph has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for bullet-graph is missing name metadata. */ +/* ✔ [assert-true] Component schema for pie-chart is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap pie-chart has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap pie-chart has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for pie-chart is missing name metadata. */ +/* ✔ [assert-true] Component schema for shape-chart is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap shape-chart has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap shape-chart has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for shape-chart is missing name metadata. */ +/* ✔ [assert-true] Component schema for sparkline is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap sparkline has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap sparkline has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for sparkline is missing name metadata. */ +/* ✔ [assert-true] Component schema for action-strip is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap action-strip has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap action-strip has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for action-strip is missing name metadata. */ +/* ✔ [assert-true] Component schema for avatar is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap avatar has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap avatar has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for avatar is missing name metadata. */ +/* ✔ [assert-true] Component schema for badge is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap badge has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap badge has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for badge is missing name metadata. */ +/* ✔ [assert-true] Component schema for banner is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap banner has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap banner has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for banner is missing name metadata. */ +/* ✔ [assert-true] Component schema for bottom-nav is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap bottom-nav has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap bottom-nav has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for bottom-nav is missing name metadata. */ +/* ✔ [assert-true] Component schema for flat button is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap flat button has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap flat button has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for flat button is missing name metadata. */ +/* ✔ [assert-true] Component schema for outlined button is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap outlined button has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap outlined button has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for outlined button is missing name metadata. */ +/* ✔ [assert-true] Component schema for contained button is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap contained button has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap contained button has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for contained button is missing name metadata. */ +/* ✔ [assert-true] Component schema for fab button is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap fab button has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap fab button has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for fab button is missing name metadata. */ +/* ✔ [assert-true] Component schema for button-group is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap button-group has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap button-group has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for button-group is missing name metadata. */ +/* ✔ [assert-true] Component schema for calendar is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap calendar has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap calendar has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for calendar is missing name metadata. */ +/* ✔ [assert-true] Component schema for card is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap card has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap card has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for card is missing name metadata. */ +/* ✔ [assert-true] Component schema for carousel is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap carousel has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap carousel has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for carousel is missing name metadata. */ +/* ✔ [assert-true] Component schema for chat is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap chat has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap chat has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for chat is missing name metadata. */ +/* ✔ [assert-true] Component schema for checkbox is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap checkbox has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap checkbox has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for checkbox is missing name metadata. */ +/* ✔ [assert-true] Component schema for chip is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap chip has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap chip has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for chip is missing name metadata. */ +/* ✔ [assert-true] Component schema for color-picker is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap color-picker has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap color-picker has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for color-picker is missing name metadata. */ +/* ✔ [assert-true] Component schema for column-actions is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap column-actions has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap column-actions has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for column-actions is missing name metadata. */ +/* ✔ [assert-true] Component schema for combo is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap combo has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap combo has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for combo is missing name metadata. */ +/* ✔ [assert-true] Component schema for date-picker is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap date-picker has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap date-picker has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for date-picker is missing name metadata. */ +/* ✔ [assert-true] Component schema for date-range is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap date-range has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap date-range has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for date-range is missing name metadata. */ +/* ✔ [assert-true] Component schema for dialog is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap dialog has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap dialog has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for dialog is missing name metadata. */ +/* ✔ [assert-true] Component schema for divider is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap divider has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap divider has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for divider is missing name metadata. */ +/* ✔ [assert-true] Component schema for dockmanager is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap dockmanager has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap dockmanager has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for dockmanager is missing name metadata. */ +/* ✔ [assert-true] Component schema for drop-down is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap drop-down has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap drop-down has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for drop-down is missing name metadata. */ +/* ✔ [assert-true] Component schema for expansion-panel is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap expansion-panel has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap expansion-panel has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for expansion-panel is missing name metadata. */ +/* ✔ [assert-true] Component schema for grid is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap grid has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap grid has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for grid is missing name metadata. */ +/* ✔ [assert-true] Component schema for grid-excel-filtering is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap grid-excel-filtering has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap grid-excel-filtering has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for grid-excel-filtering is missing name metadata. */ +/* ✔ [assert-true] Component schema for grid-filtering is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap grid-filtering has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap grid-filtering has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for grid-filtering is missing name metadata. */ +/* ✔ [assert-true] Component schema for grid-summary is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap grid-summary has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap grid-summary has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for grid-summary is missing name metadata. */ +/* ✔ [assert-true] Component schema for grid-toolbar is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap grid-toolbar has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap grid-toolbar has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for grid-toolbar is missing name metadata. */ +/* ✔ [assert-true] Component schema for highlight is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap highlight has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap highlight has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for highlight is missing name metadata. */ +/* ✔ [assert-true] Component schema for icon is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap icon has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap icon has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for icon is missing name metadata. */ +/* ✔ [assert-true] Component schema for flat icon-button is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap flat icon-button has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap flat icon-button has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for flat icon-button is missing name metadata. */ +/* ✔ [assert-true] Component schema for outlined icon-button is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap outlined icon-button has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap outlined icon-button has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for outlined icon-button is missing name metadata. */ +/* ✔ [assert-true] Component schema for contained icon-button is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap contained icon-button has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap contained icon-button has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for contained icon-button is missing name metadata. */ +/* ✔ [assert-true] Component schema for input-group is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap input-group has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap input-group has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for input-group is missing name metadata. */ +/* ✔ [assert-true] Component schema for label is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap label has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap label has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for label is missing name metadata. */ +/* ✔ [assert-true] Component schema for list is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap list has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap list has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for list is missing name metadata. */ +/* ✔ [assert-true] Component schema for navbar is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap navbar has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap navbar has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for navbar is missing name metadata. */ +/* ✔ [assert-true] Component schema for nav-drawer is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap nav-drawer has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap nav-drawer has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for nav-drawer is missing name metadata. */ +/* ✔ [assert-true] Component schema for overlay is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap overlay has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap overlay has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for overlay is missing name metadata. */ +/* ✔ [assert-true] Component schema for paginator is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap paginator has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap paginator has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for paginator is missing name metadata. */ +/* ✔ [assert-true] Component schema for pivot-data-selector is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap pivot-data-selector has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap pivot-data-selector has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for pivot-data-selector is missing name metadata. */ +/* ✔ [assert-true] Component schema for linear-bar is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap linear-bar has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap linear-bar has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for linear-bar is missing name metadata. */ +/* ✔ [assert-true] Component schema for circular-bar is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap circular-bar has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap circular-bar has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for circular-bar is missing name metadata. */ +/* ✔ [assert-true] Component schema for qr-code is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap qr-code has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap qr-code has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for qr-code is missing name metadata. */ +/* ✔ [assert-true] Component schema for query-builder is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap query-builder has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap query-builder has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for query-builder is missing name metadata. */ +/* ✔ [assert-true] Component schema for radio is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap radio has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap radio has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for radio is missing name metadata. */ +/* ✔ [assert-true] Component schema for rating is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap rating has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap rating has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for rating is missing name metadata. */ +/* ✔ [assert-true] Component schema for resize-indicator is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap resize-indicator has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap resize-indicator has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for resize-indicator is missing name metadata. */ +/* ✔ [assert-true] Component schema for ripple is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap ripple has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap ripple has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for ripple is missing name metadata. */ +/* ✔ [assert-true] Component schema for scrollbar is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap scrollbar has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap scrollbar has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for scrollbar is missing name metadata. */ +/* ✔ [assert-true] Component schema for select is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap select has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap select has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for select is missing name metadata. */ +/* ✔ [assert-true] Component schema for slider is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap slider has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap slider has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for slider is missing name metadata. */ +/* ✔ [assert-true] Component schema for snackbar is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap snackbar has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap snackbar has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for snackbar is missing name metadata. */ +/* ✔ [assert-true] Component schema for splitter is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap splitter has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap splitter has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for splitter is missing name metadata. */ +/* ✔ [assert-true] Component schema for stepper is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap stepper has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap stepper has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for stepper is missing name metadata. */ +/* ✔ [assert-true] Component schema for switch is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap switch has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap switch has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for switch is missing name metadata. */ +/* ✔ [assert-true] Component schema for tabs is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap tabs has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap tabs has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for tabs is missing name metadata. */ +/* ✔ [assert-true] Component schema for tile-manager is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap tile-manager has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap tile-manager has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for tile-manager is missing name metadata. */ +/* ✔ [assert-true] Component schema for time-picker is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap time-picker has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap time-picker has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for time-picker is missing name metadata. */ +/* ✔ [assert-true] Component schema for toast is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap toast has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap toast has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for toast is missing name metadata. */ +/* ✔ [assert-true] Component schema for tooltip is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap tooltip has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap tooltip has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for tooltip is missing name metadata. */ +/* ✔ [assert-true] Component schema for tree is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap tree has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap tree has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for tree is missing name metadata. */ +/* ✔ [assert-true] Component schema for validator is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap validator has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap validator has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for validator is missing name metadata. */ +/* ✔ [assert-true] Component schema for watermark is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap watermark has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap watermark has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for watermark is missing name metadata. */ +/* ✔ [assert-true] Component schema for file-input is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap file-input has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap file-input has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for file-input is missing name metadata. */ +/* ✔ [assert-true] Component schema for category-chart is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent category-chart has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent category-chart has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for category-chart is missing name metadata. */ +/* ✔ [assert-true] Component schema for data-chart is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent data-chart has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent data-chart has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for data-chart is missing name metadata. */ +/* ✔ [assert-true] Component schema for doughnut-chart is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent doughnut-chart has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent doughnut-chart has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for doughnut-chart is missing name metadata. */ +/* ✔ [assert-true] Component schema for financial-chart is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent financial-chart has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent financial-chart has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for financial-chart is missing name metadata. */ +/* ✔ [assert-true] Component schema for funnel-chart is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent funnel-chart has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent funnel-chart has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for funnel-chart is missing name metadata. */ +/* ✔ [assert-true] Component schema for linear-gauge is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent linear-gauge has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent linear-gauge has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for linear-gauge is missing name metadata. */ +/* ✔ [assert-true] Component schema for radial-gauge is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent radial-gauge has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent radial-gauge has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for radial-gauge is missing name metadata. */ +/* ✔ [assert-true] Component schema for geo-map is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent geo-map has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent geo-map has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for geo-map is missing name metadata. */ +/* ✔ [assert-true] Component schema for bullet-graph is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent bullet-graph has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent bullet-graph has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for bullet-graph is missing name metadata. */ +/* ✔ [assert-true] Component schema for pie-chart is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent pie-chart has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent pie-chart has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for pie-chart is missing name metadata. */ +/* ✔ [assert-true] Component schema for shape-chart is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent shape-chart has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent shape-chart has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for shape-chart is missing name metadata. */ +/* ✔ [assert-true] Component schema for sparkline is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent sparkline has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent sparkline has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for sparkline is missing name metadata. */ +/* ✔ [assert-true] Component schema for action-strip is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent action-strip has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent action-strip has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for action-strip is missing name metadata. */ +/* ✔ [assert-true] Component schema for avatar is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent avatar has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent avatar has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for avatar is missing name metadata. */ +/* ✔ [assert-true] Component schema for badge is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent badge has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent badge has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for badge is missing name metadata. */ +/* ✔ [assert-true] Component schema for banner is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent banner has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent banner has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for banner is missing name metadata. */ +/* ✔ [assert-true] Component schema for bottom-nav is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent bottom-nav has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent bottom-nav has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for bottom-nav is missing name metadata. */ +/* ✔ [assert-true] Component schema for flat button is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent flat button has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent flat button has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for flat button is missing name metadata. */ +/* ✔ [assert-true] Component schema for outlined button is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent outlined button has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent outlined button has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for outlined button is missing name metadata. */ +/* ✔ [assert-true] Component schema for contained button is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent contained button has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent contained button has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for contained button is missing name metadata. */ +/* ✔ [assert-true] Component schema for fab button is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent fab button has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent fab button has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for fab button is missing name metadata. */ +/* ✔ [assert-true] Component schema for button-group is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent button-group has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent button-group has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for button-group is missing name metadata. */ +/* ✔ [assert-true] Component schema for calendar is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent calendar has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent calendar has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for calendar is missing name metadata. */ +/* ✔ [assert-true] Component schema for card is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent card has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent card has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for card is missing name metadata. */ +/* ✔ [assert-true] Component schema for carousel is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent carousel has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent carousel has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for carousel is missing name metadata. */ +/* ✔ [assert-true] Component schema for chat is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent chat has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent chat has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for chat is missing name metadata. */ +/* ✔ [assert-true] Component schema for checkbox is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent checkbox has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent checkbox has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for checkbox is missing name metadata. */ +/* ✔ [assert-true] Component schema for chip is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent chip has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent chip has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for chip is missing name metadata. */ +/* ✔ [assert-true] Component schema for color-picker is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent color-picker has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent color-picker has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for color-picker is missing name metadata. */ +/* ✔ [assert-true] Component schema for column-actions is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent column-actions has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent column-actions has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for column-actions is missing name metadata. */ +/* ✔ [assert-true] Component schema for combo is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent combo has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent combo has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for combo is missing name metadata. */ +/* ✔ [assert-true] Component schema for date-picker is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent date-picker has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent date-picker has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for date-picker is missing name metadata. */ +/* ✔ [assert-true] Component schema for date-range is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent date-range has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent date-range has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for date-range is missing name metadata. */ +/* ✔ [assert-true] Component schema for dialog is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent dialog has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent dialog has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for dialog is missing name metadata. */ +/* ✔ [assert-true] Component schema for divider is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent divider has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent divider has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for divider is missing name metadata. */ +/* ✔ [assert-true] Component schema for dockmanager is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent dockmanager has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent dockmanager has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for dockmanager is missing name metadata. */ +/* ✔ [assert-true] Component schema for drop-down is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent drop-down has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent drop-down has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for drop-down is missing name metadata. */ +/* ✔ [assert-true] Component schema for expansion-panel is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent expansion-panel has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent expansion-panel has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for expansion-panel is missing name metadata. */ +/* ✔ [assert-true] Component schema for grid is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent grid has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent grid has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for grid is missing name metadata. */ +/* ✔ [assert-true] Component schema for grid-excel-filtering is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent grid-excel-filtering has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent grid-excel-filtering has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for grid-excel-filtering is missing name metadata. */ +/* ✔ [assert-true] Component schema for grid-filtering is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent grid-filtering has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent grid-filtering has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for grid-filtering is missing name metadata. */ +/* ✔ [assert-true] Component schema for grid-summary is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent grid-summary has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent grid-summary has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for grid-summary is missing name metadata. */ +/* ✔ [assert-true] Component schema for grid-toolbar is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent grid-toolbar has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent grid-toolbar has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for grid-toolbar is missing name metadata. */ +/* ✔ [assert-true] Component schema for highlight is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent highlight has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent highlight has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for highlight is missing name metadata. */ +/* ✔ [assert-true] Component schema for icon is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent icon has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent icon has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for icon is missing name metadata. */ +/* ✔ [assert-true] Component schema for flat icon-button is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent flat icon-button has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent flat icon-button has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for flat icon-button is missing name metadata. */ +/* ✔ [assert-true] Component schema for outlined icon-button is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent outlined icon-button has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent outlined icon-button has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for outlined icon-button is missing name metadata. */ +/* ✔ [assert-true] Component schema for contained icon-button is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent contained icon-button has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent contained icon-button has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for contained icon-button is missing name metadata. */ +/* ✔ [assert-true] Component schema for input-group is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent input-group has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent input-group has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for input-group is missing name metadata. */ +/* ✔ [assert-true] Component schema for label is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent label has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent label has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for label is missing name metadata. */ +/* ✔ [assert-true] Component schema for list is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent list has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent list has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for list is missing name metadata. */ +/* ✔ [assert-true] Component schema for navbar is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent navbar has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent navbar has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for navbar is missing name metadata. */ +/* ✔ [assert-true] Component schema for nav-drawer is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent nav-drawer has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent nav-drawer has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for nav-drawer is missing name metadata. */ +/* ✔ [assert-true] Component schema for overlay is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent overlay has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent overlay has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for overlay is missing name metadata. */ +/* ✔ [assert-true] Component schema for paginator is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent paginator has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent paginator has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for paginator is missing name metadata. */ +/* ✔ [assert-true] Component schema for pivot-data-selector is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent pivot-data-selector has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent pivot-data-selector has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for pivot-data-selector is missing name metadata. */ +/* ✔ [assert-true] Component schema for linear-bar is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent linear-bar has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent linear-bar has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for linear-bar is missing name metadata. */ +/* ✔ [assert-true] Component schema for circular-bar is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent circular-bar has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent circular-bar has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for circular-bar is missing name metadata. */ +/* ✔ [assert-true] Component schema for qr-code is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent qr-code has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent qr-code has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for qr-code is missing name metadata. */ +/* ✔ [assert-true] Component schema for query-builder is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent query-builder has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent query-builder has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for query-builder is missing name metadata. */ +/* ✔ [assert-true] Component schema for radio is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent radio has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent radio has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for radio is missing name metadata. */ +/* ✔ [assert-true] Component schema for rating is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent rating has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent rating has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for rating is missing name metadata. */ +/* ✔ [assert-true] Component schema for resize-indicator is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent resize-indicator has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent resize-indicator has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for resize-indicator is missing name metadata. */ +/* ✔ [assert-true] Component schema for ripple is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent ripple has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent ripple has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for ripple is missing name metadata. */ +/* ✔ [assert-true] Component schema for scrollbar is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent scrollbar has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent scrollbar has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for scrollbar is missing name metadata. */ +/* ✔ [assert-true] Component schema for select is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent select has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent select has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for select is missing name metadata. */ +/* ✔ [assert-true] Component schema for slider is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent slider has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent slider has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for slider is missing name metadata. */ +/* ✔ [assert-true] Component schema for snackbar is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent snackbar has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent snackbar has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for snackbar is missing name metadata. */ +/* ✔ [assert-true] Component schema for splitter is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent splitter has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent splitter has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for splitter is missing name metadata. */ +/* ✔ [assert-true] Component schema for stepper is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent stepper has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent stepper has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for stepper is missing name metadata. */ +/* ✔ [assert-true] Component schema for switch is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent switch has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent switch has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for switch is missing name metadata. */ +/* ✔ [assert-true] Component schema for tabs is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent tabs has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent tabs has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for tabs is missing name metadata. */ +/* ✔ [assert-true] Component schema for tile-manager is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent tile-manager has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent tile-manager has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for tile-manager is missing name metadata. */ +/* ✔ [assert-true] Component schema for time-picker is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent time-picker has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent time-picker has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for time-picker is missing name metadata. */ +/* ✔ [assert-true] Component schema for toast is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent toast has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent toast has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for toast is missing name metadata. */ +/* ✔ [assert-true] Component schema for tooltip is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent tooltip has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent tooltip has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for tooltip is missing name metadata. */ +/* ✔ [assert-true] Component schema for tree is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent tree has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent tree has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for tree is missing name metadata. */ +/* ✔ [assert-true] Component schema for validator is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent validator has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent validator has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for validator is missing name metadata. */ +/* ✔ [assert-true] Component schema for watermark is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent watermark has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent watermark has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for watermark is missing name metadata. */ +/* ✔ [assert-true] Component schema for file-input is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent file-input has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent file-input has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for file-input is missing name metadata. */ +/* ✔ [assert-true] Component schema for category-chart is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo category-chart has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo category-chart has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for category-chart is missing name metadata. */ +/* ✔ [assert-true] Component schema for data-chart is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo data-chart has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo data-chart has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for data-chart is missing name metadata. */ +/* ✔ [assert-true] Component schema for doughnut-chart is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo doughnut-chart has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo doughnut-chart has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for doughnut-chart is missing name metadata. */ +/* ✔ [assert-true] Component schema for financial-chart is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo financial-chart has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo financial-chart has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for financial-chart is missing name metadata. */ +/* ✔ [assert-true] Component schema for funnel-chart is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo funnel-chart has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo funnel-chart has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for funnel-chart is missing name metadata. */ +/* ✔ [assert-true] Component schema for linear-gauge is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo linear-gauge has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo linear-gauge has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for linear-gauge is missing name metadata. */ +/* ✔ [assert-true] Component schema for radial-gauge is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo radial-gauge has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo radial-gauge has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for radial-gauge is missing name metadata. */ +/* ✔ [assert-true] Component schema for geo-map is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo geo-map has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo geo-map has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for geo-map is missing name metadata. */ +/* ✔ [assert-true] Component schema for bullet-graph is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo bullet-graph has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo bullet-graph has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for bullet-graph is missing name metadata. */ +/* ✔ [assert-true] Component schema for pie-chart is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo pie-chart has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo pie-chart has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for pie-chart is missing name metadata. */ +/* ✔ [assert-true] Component schema for shape-chart is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo shape-chart has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo shape-chart has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for shape-chart is missing name metadata. */ +/* ✔ [assert-true] Component schema for sparkline is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo sparkline has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo sparkline has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for sparkline is missing name metadata. */ +/* ✔ [assert-true] Component schema for action-strip is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo action-strip has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo action-strip has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for action-strip is missing name metadata. */ +/* ✔ [assert-true] Component schema for avatar is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo avatar has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo avatar has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for avatar is missing name metadata. */ +/* ✔ [assert-true] Component schema for badge is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo badge has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo badge has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for badge is missing name metadata. */ +/* ✔ [assert-true] Component schema for banner is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo banner has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo banner has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for banner is missing name metadata. */ +/* ✔ [assert-true] Component schema for bottom-nav is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo bottom-nav has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo bottom-nav has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for bottom-nav is missing name metadata. */ +/* ✔ [assert-true] Component schema for flat button is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo flat button has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo flat button has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for flat button is missing name metadata. */ +/* ✔ [assert-true] Component schema for outlined button is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo outlined button has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo outlined button has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for outlined button is missing name metadata. */ +/* ✔ [assert-true] Component schema for contained button is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo contained button has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo contained button has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for contained button is missing name metadata. */ +/* ✔ [assert-true] Component schema for fab button is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo fab button has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo fab button has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for fab button is missing name metadata. */ +/* ✔ [assert-true] Component schema for button-group is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo button-group has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo button-group has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for button-group is missing name metadata. */ +/* ✔ [assert-true] Component schema for calendar is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo calendar has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo calendar has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for calendar is missing name metadata. */ +/* ✔ [assert-true] Component schema for card is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo card has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo card has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for card is missing name metadata. */ +/* ✔ [assert-true] Component schema for carousel is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo carousel has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo carousel has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for carousel is missing name metadata. */ +/* ✔ [assert-true] Component schema for chat is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo chat has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo chat has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for chat is missing name metadata. */ +/* ✔ [assert-true] Component schema for checkbox is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo checkbox has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo checkbox has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for checkbox is missing name metadata. */ +/* ✔ [assert-true] Component schema for chip is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo chip has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo chip has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for chip is missing name metadata. */ +/* ✔ [assert-true] Component schema for color-picker is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo color-picker has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo color-picker has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for color-picker is missing name metadata. */ +/* ✔ [assert-true] Component schema for column-actions is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo column-actions has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo column-actions has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for column-actions is missing name metadata. */ +/* ✔ [assert-true] Component schema for combo is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo combo has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo combo has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for combo is missing name metadata. */ +/* ✔ [assert-true] Component schema for date-picker is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo date-picker has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo date-picker has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for date-picker is missing name metadata. */ +/* ✔ [assert-true] Component schema for date-range is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo date-range has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo date-range has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for date-range is missing name metadata. */ +/* ✔ [assert-true] Component schema for dialog is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo dialog has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo dialog has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for dialog is missing name metadata. */ +/* ✔ [assert-true] Component schema for divider is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo divider has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo divider has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for divider is missing name metadata. */ +/* ✔ [assert-true] Component schema for dockmanager is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo dockmanager has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo dockmanager has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for dockmanager is missing name metadata. */ +/* ✔ [assert-true] Component schema for drop-down is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo drop-down has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo drop-down has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for drop-down is missing name metadata. */ +/* ✔ [assert-true] Component schema for expansion-panel is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo expansion-panel has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo expansion-panel has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for expansion-panel is missing name metadata. */ +/* ✔ [assert-true] Component schema for grid is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo grid has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo grid has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for grid is missing name metadata. */ +/* ✔ [assert-true] Component schema for grid-excel-filtering is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo grid-excel-filtering has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo grid-excel-filtering has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for grid-excel-filtering is missing name metadata. */ +/* ✔ [assert-true] Component schema for grid-filtering is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo grid-filtering has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo grid-filtering has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for grid-filtering is missing name metadata. */ +/* ✔ [assert-true] Component schema for grid-summary is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo grid-summary has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo grid-summary has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for grid-summary is missing name metadata. */ +/* ✔ [assert-true] Component schema for grid-toolbar is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo grid-toolbar has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo grid-toolbar has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for grid-toolbar is missing name metadata. */ +/* ✔ [assert-true] Component schema for highlight is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo highlight has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo highlight has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for highlight is missing name metadata. */ +/* ✔ [assert-true] Component schema for icon is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo icon has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo icon has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for icon is missing name metadata. */ +/* ✔ [assert-true] Component schema for flat icon-button is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo flat icon-button has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo flat icon-button has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for flat icon-button is missing name metadata. */ +/* ✔ [assert-true] Component schema for outlined icon-button is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo outlined icon-button has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo outlined icon-button has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for outlined icon-button is missing name metadata. */ +/* ✔ [assert-true] Component schema for contained icon-button is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo contained icon-button has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo contained icon-button has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for contained icon-button is missing name metadata. */ +/* ✔ [assert-true] Component schema for input-group is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo input-group has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo input-group has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for input-group is missing name metadata. */ +/* ✔ [assert-true] Component schema for label is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo label has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo label has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for label is missing name metadata. */ +/* ✔ [assert-true] Component schema for list is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo list has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo list has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for list is missing name metadata. */ +/* ✔ [assert-true] Component schema for navbar is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo navbar has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo navbar has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for navbar is missing name metadata. */ +/* ✔ [assert-true] Component schema for nav-drawer is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo nav-drawer has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo nav-drawer has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for nav-drawer is missing name metadata. */ +/* ✔ [assert-true] Component schema for overlay is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo overlay has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo overlay has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for overlay is missing name metadata. */ +/* ✔ [assert-true] Component schema for paginator is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo paginator has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo paginator has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for paginator is missing name metadata. */ +/* ✔ [assert-true] Component schema for pivot-data-selector is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo pivot-data-selector has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo pivot-data-selector has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for pivot-data-selector is missing name metadata. */ +/* ✔ [assert-true] Component schema for linear-bar is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo linear-bar has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo linear-bar has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for linear-bar is missing name metadata. */ +/* ✔ [assert-true] Component schema for circular-bar is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo circular-bar has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo circular-bar has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for circular-bar is missing name metadata. */ +/* ✔ [assert-true] Component schema for qr-code is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo qr-code has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo qr-code has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for qr-code is missing name metadata. */ +/* ✔ [assert-true] Component schema for query-builder is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo query-builder has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo query-builder has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for query-builder is missing name metadata. */ +/* ✔ [assert-true] Component schema for radio is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo radio has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo radio has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for radio is missing name metadata. */ +/* ✔ [assert-true] Component schema for rating is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo rating has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo rating has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for rating is missing name metadata. */ +/* ✔ [assert-true] Component schema for resize-indicator is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo resize-indicator has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo resize-indicator has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for resize-indicator is missing name metadata. */ +/* ✔ [assert-true] Component schema for ripple is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo ripple has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo ripple has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for ripple is missing name metadata. */ +/* ✔ [assert-true] Component schema for scrollbar is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo scrollbar has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo scrollbar has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for scrollbar is missing name metadata. */ +/* ✔ [assert-true] Component schema for select is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo select has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo select has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for select is missing name metadata. */ +/* ✔ [assert-true] Component schema for slider is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo slider has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo slider has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for slider is missing name metadata. */ +/* ✔ [assert-true] Component schema for snackbar is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo snackbar has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo snackbar has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for snackbar is missing name metadata. */ +/* ✔ [assert-true] Component schema for splitter is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo splitter has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo splitter has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for splitter is missing name metadata. */ +/* ✔ [assert-true] Component schema for stepper is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo stepper has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo stepper has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for stepper is missing name metadata. */ +/* ✔ [assert-true] Component schema for switch is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo switch has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo switch has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for switch is missing name metadata. */ +/* ✔ [assert-true] Component schema for tabs is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo tabs has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo tabs has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for tabs is missing name metadata. */ +/* ✔ [assert-true] Component schema for tile-manager is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo tile-manager has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo tile-manager has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for tile-manager is missing name metadata. */ +/* ✔ [assert-true] Component schema for time-picker is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo time-picker has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo time-picker has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for time-picker is missing name metadata. */ +/* ✔ [assert-true] Component schema for toast is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo toast has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo toast has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for toast is missing name metadata. */ +/* ✔ [assert-true] Component schema for tooltip is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo tooltip has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo tooltip has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for tooltip is missing name metadata. */ +/* ✔ [assert-true] Component schema for tree is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo tree has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo tree has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for tree is missing name metadata. */ +/* ✔ [assert-true] Component schema for validator is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo validator has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo validator has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for validator is missing name metadata. */ +/* ✔ [assert-true] Component schema for watermark is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo watermark has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo watermark has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for watermark is missing name metadata. */ +/* ✔ [assert-true] Component schema for file-input is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo file-input has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo file-input has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for file-input is missing name metadata. */ +/* */ +/* Test: should resolve the border-radius function from schema definitions */ +/* ✔ [assert-equal] should resolve the border-radius function from schema definitions */ +/* */ +/* Test: should retrieve a reference to the CSS variable for a given theme */ +/* ✔ [assert-equal] should retrieve a reference to the CSS variable for a given theme */ +/* */ +/* Test: should convert component theme props into CSS variables */ +/* ASSERT: */ +/* OUTPUT */ +.test-output { + --background: var(--igx-test-component-background, var(--ig-test-component-background, var(--ig-primary-400))); + --hover-background: var(--igx-test-component-hover-background, var(--ig-test-component-hover-background, hsl(from var(--ig-secondary-700) h s l/0.26))); + --foreground: var(--igx-test-component-foreground, var(--ig-test-component-foreground, var(--ig-primary-400-contrast))); + --hover-foreground: var(--igx-test-component-hover-foreground, var(--ig-test-component-hover-foreground, var(--ig-secondary-700-contrast))); + --border-style: var(--igx-test-component-border-style, var(--ig-test-component-border-style, solid)); + --border-radius: var(--igx-test-component-border-radius, var(--ig-test-component-border-radius, 0.125rem)); + --brushes: var(--igx-test-component-brushes, var(--ig-test-component-brushes, var(--chart-brushes))); + --resting-elevation: var(--igx-test-component-resting-elevation, var(--ig-test-component-resting-elevation, var(--ig-elevation-2))); + --ig-theme: material; + --ig-theme-variant: light; +} + +/* END_OUTPUT */ +/* EXPECTED */ +.test-output { + --background: var(--igx-test-component-background, var(--ig-test-component-background, var(--ig-primary-400))); + --hover-background: var(--igx-test-component-hover-background, var(--ig-test-component-hover-background, hsl(from var(--ig-secondary-700) h s l/0.26))); + --foreground: var(--igx-test-component-foreground, var(--ig-test-component-foreground, var(--ig-primary-400-contrast))); + --hover-foreground: var(--igx-test-component-hover-foreground, var(--ig-test-component-hover-foreground, var(--ig-secondary-700-contrast))); + --border-style: var(--igx-test-component-border-style, var(--ig-test-component-border-style, solid)); + --border-radius: var(--igx-test-component-border-radius, var(--ig-test-component-border-radius, 0.125rem)); + --brushes: var(--igx-test-component-brushes, var(--ig-test-component-brushes, var(--chart-brushes))); + --resting-elevation: var(--igx-test-component-resting-elevation, var(--ig-test-component-resting-elevation, var(--ig-elevation-2))); + --ig-theme: material; + --ig-theme-variant: light; +} + +/* END_EXPECTED */ +/* END_ASSERT */ +/* */ +/* Test: should prepend the prefix to CSS variable names when the theme map includes a prefix */ +/* ASSERT: */ +/* OUTPUT */ +.test-output { + --igc-background: var(--igx-test-component-background, var(--ig-test-component-background, var(--ig-primary-400))); + --igc-hover-background: var(--igx-test-component-hover-background, var(--ig-test-component-hover-background, hsl(from var(--ig-secondary-700) h s l/0.26))); + --igc-foreground: var(--igx-test-component-foreground, var(--ig-test-component-foreground, var(--ig-primary-400-contrast))); + --igc-hover-foreground: var(--igx-test-component-hover-foreground, var(--ig-test-component-hover-foreground, var(--ig-secondary-700-contrast))); + --igc-border-style: var(--igx-test-component-border-style, var(--ig-test-component-border-style, solid)); + --igc-border-radius: var(--igx-test-component-border-radius, var(--ig-test-component-border-radius, 0.125rem)); + --igc-brushes: var(--igx-test-component-brushes, var(--ig-test-component-brushes, var(--chart-brushes))); + --igc-resting-elevation: var(--igx-test-component-resting-elevation, var(--ig-test-component-resting-elevation, var(--ig-elevation-2))); + --ig-theme: material; + --ig-theme-variant: light; +} + +/* END_OUTPUT */ +/* EXPECTED */ +.test-output { + --igc-background: var(--igx-test-component-background, var(--ig-test-component-background, var(--ig-primary-400))); + --igc-hover-background: var(--igx-test-component-hover-background, var(--ig-test-component-hover-background, hsl(from var(--ig-secondary-700) h s l/0.26))); + --igc-foreground: var(--igx-test-component-foreground, var(--ig-test-component-foreground, var(--ig-primary-400-contrast))); + --igc-hover-foreground: var(--igx-test-component-hover-foreground, var(--ig-test-component-hover-foreground, var(--ig-secondary-700-contrast))); + --igc-border-style: var(--igx-test-component-border-style, var(--ig-test-component-border-style, solid)); + --igc-border-radius: var(--igx-test-component-border-radius, var(--ig-test-component-border-radius, 0.125rem)); + --igc-brushes: var(--igx-test-component-brushes, var(--ig-test-component-brushes, var(--chart-brushes))); + --igc-resting-elevation: var(--igx-test-component-resting-elevation, var(--ig-test-component-resting-elevation, var(--ig-elevation-2))); + --ig-theme: material; + --ig-theme-variant: light; +} + +/* END_EXPECTED */ +/* END_ASSERT */ +/* */ +/* Test: should not prepend a prefix when the theme map has no prefix property */ +/* ✔ [assert-false] Digested schema should not have a prefix key */ +/* ASSERT: */ +/* OUTPUT */ +.test-output { + --background: var(--igx-test-component-background, var(--ig-test-component-background, var(--ig-primary-400))); + --hover-background: var(--igx-test-component-hover-background, var(--ig-test-component-hover-background, hsl(from var(--ig-secondary-700) h s l/0.26))); + --foreground: var(--igx-test-component-foreground, var(--ig-test-component-foreground, var(--ig-primary-400-contrast))); + --hover-foreground: var(--igx-test-component-hover-foreground, var(--ig-test-component-hover-foreground, var(--ig-secondary-700-contrast))); + --border-style: var(--igx-test-component-border-style, var(--ig-test-component-border-style, solid)); + --border-radius: var(--igx-test-component-border-radius, var(--ig-test-component-border-radius, 0.125rem)); + --brushes: var(--igx-test-component-brushes, var(--ig-test-component-brushes, var(--chart-brushes))); + --resting-elevation: var(--igx-test-component-resting-elevation, var(--ig-test-component-resting-elevation, var(--ig-elevation-2))); + --ig-theme: material; + --ig-theme-variant: light; +} + +/* END_OUTPUT */ +/* EXPECTED */ +.test-output { + --background: var(--igx-test-component-background, var(--ig-test-component-background, var(--ig-primary-400))); + --hover-background: var(--igx-test-component-hover-background, var(--ig-test-component-hover-background, hsl(from var(--ig-secondary-700) h s l/0.26))); + --foreground: var(--igx-test-component-foreground, var(--ig-test-component-foreground, var(--ig-primary-400-contrast))); + --hover-foreground: var(--igx-test-component-hover-foreground, var(--ig-test-component-hover-foreground, var(--ig-secondary-700-contrast))); + --border-style: var(--igx-test-component-border-style, var(--ig-test-component-border-style, solid)); + --border-radius: var(--igx-test-component-border-radius, var(--ig-test-component-border-radius, 0.125rem)); + --brushes: var(--igx-test-component-brushes, var(--ig-test-component-brushes, var(--chart-brushes))); + --resting-elevation: var(--igx-test-component-resting-elevation, var(--ig-test-component-resting-elevation, var(--ig-elevation-2))); + --ig-theme: material; + --ig-theme-variant: light; +} + +/* END_EXPECTED */ +/* END_ASSERT */ +/* */ +/* Test: should scope prefixed CSS variables correctly via the tokens mixin */ +/* ASSERT: */ +/* OUTPUT */ +igc-dockmanager { + --igc-background: var(--igx-test-component-background, var(--ig-test-component-background, var(--ig-primary-400))); + --igc-hover-background: var(--igx-test-component-hover-background, var(--ig-test-component-hover-background, hsl(from var(--ig-secondary-700) h s l/0.26))); + --igc-foreground: var(--igx-test-component-foreground, var(--ig-test-component-foreground, var(--ig-primary-400-contrast))); + --igc-hover-foreground: var(--igx-test-component-hover-foreground, var(--ig-test-component-hover-foreground, var(--ig-secondary-700-contrast))); + --igc-border-style: var(--igx-test-component-border-style, var(--ig-test-component-border-style, solid)); + --igc-border-radius: var(--igx-test-component-border-radius, var(--ig-test-component-border-radius, 0.125rem)); + --igc-brushes: var(--igx-test-component-brushes, var(--ig-test-component-brushes, var(--chart-brushes))); + --igc-resting-elevation: var(--igx-test-component-resting-elevation, var(--ig-test-component-resting-elevation, var(--ig-elevation-2))); + --ig-theme: material; + --ig-theme-variant: light; +} + +/* END_OUTPUT */ +/* EXPECTED */ +igc-dockmanager { + --igc-background: var(--igx-test-component-background, var(--ig-test-component-background, var(--ig-primary-400))); + --igc-hover-background: var(--igx-test-component-hover-background, var(--ig-test-component-hover-background, hsl(from var(--ig-secondary-700) h s l/0.26))); + --igc-foreground: var(--igx-test-component-foreground, var(--ig-test-component-foreground, var(--ig-primary-400-contrast))); + --igc-hover-foreground: var(--igx-test-component-hover-foreground, var(--ig-test-component-hover-foreground, var(--ig-secondary-700-contrast))); + --igc-border-style: var(--igx-test-component-border-style, var(--ig-test-component-border-style, solid)); + --igc-border-radius: var(--igx-test-component-border-radius, var(--ig-test-component-border-radius, 0.125rem)); + --igc-brushes: var(--igx-test-component-brushes, var(--ig-test-component-brushes, var(--chart-brushes))); + --igc-resting-elevation: var(--igx-test-component-resting-elevation, var(--ig-test-component-resting-elevation, var(--ig-elevation-2))); + --ig-theme: material; + --ig-theme-variant: light; +} + +/* END_EXPECTED */ +/* END_ASSERT */ +/* */ +/* Test: should ignore $name property when provided to css-vars-from-theme mixin */ +/* ASSERT: */ +/* OUTPUT */ +.test-output { + --background: var(--igx-test-component-background, var(--ig-test-component-background, var(--ig-primary-400))); + --hover-background: var(--igx-test-component-hover-background, var(--ig-test-component-hover-background, hsl(from var(--ig-secondary-700) h s l/0.26))); + --foreground: var(--igx-test-component-foreground, var(--ig-test-component-foreground, var(--ig-primary-400-contrast))); + --hover-foreground: var(--igx-test-component-hover-foreground, var(--ig-test-component-hover-foreground, var(--ig-secondary-700-contrast))); + --border-style: var(--igx-test-component-border-style, var(--ig-test-component-border-style, solid)); + --border-radius: var(--igx-test-component-border-radius, var(--ig-test-component-border-radius, 0.125rem)); + --brushes: var(--igx-test-component-brushes, var(--ig-test-component-brushes, var(--chart-brushes))); + --resting-elevation: var(--igx-test-component-resting-elevation, var(--ig-test-component-resting-elevation, var(--ig-elevation-2))); + --ig-theme: material; + --ig-theme-variant: light; +} + +/* END_OUTPUT */ +/* EXPECTED */ +.test-output { + --background: var(--igx-test-component-background, var(--ig-test-component-background, var(--ig-primary-400))); + --hover-background: var(--igx-test-component-hover-background, var(--ig-test-component-hover-background, hsl(from var(--ig-secondary-700) h s l/0.26))); + --foreground: var(--igx-test-component-foreground, var(--ig-test-component-foreground, var(--ig-primary-400-contrast))); + --hover-foreground: var(--igx-test-component-hover-foreground, var(--ig-test-component-hover-foreground, var(--ig-secondary-700-contrast))); + --border-style: var(--igx-test-component-border-style, var(--ig-test-component-border-style, solid)); + --border-radius: var(--igx-test-component-border-radius, var(--ig-test-component-border-radius, 0.125rem)); + --brushes: var(--igx-test-component-brushes, var(--ig-test-component-brushes, var(--chart-brushes))); + --resting-elevation: var(--igx-test-component-resting-elevation, var(--ig-test-component-resting-elevation, var(--ig-elevation-2))); + --ig-theme: material; + --ig-theme-variant: light; +} + +/* END_EXPECTED */ +/* END_ASSERT */ +/* */ +/* Test: should ignore all keys in the ignore list */ +/* ASSERT: */ +/* OUTPUT */ +.test-output { + --background: var(--igx-test-component-background, var(--ig-test-component-background, var(--ig-primary-400))); + --hover-background: var(--igx-test-component-hover-background, var(--ig-test-component-hover-background, hsl(from var(--ig-secondary-700) h s l/0.26))); + --foreground: var(--igx-test-component-foreground, var(--ig-test-component-foreground, var(--ig-primary-400-contrast))); + --hover-foreground: var(--igx-test-component-hover-foreground, var(--ig-test-component-hover-foreground, var(--ig-secondary-700-contrast))); + --border-style: var(--igx-test-component-border-style, var(--ig-test-component-border-style, solid)); + --border-radius: var(--igx-test-component-border-radius, var(--ig-test-component-border-radius, 0.125rem)); + --brushes: var(--igx-test-component-brushes, var(--ig-test-component-brushes, var(--chart-brushes))); + --resting-elevation: var(--igx-test-component-resting-elevation, var(--ig-test-component-resting-elevation, var(--ig-elevation-2))); + --ig-theme: material; + --ig-theme-variant: light; +} + +/* END_OUTPUT */ +/* EXPECTED */ +.test-output { + --background: var(--igx-test-component-background, var(--ig-test-component-background, var(--ig-primary-400))); + --hover-background: var(--igx-test-component-hover-background, var(--ig-test-component-hover-background, hsl(from var(--ig-secondary-700) h s l/0.26))); + --foreground: var(--igx-test-component-foreground, var(--ig-test-component-foreground, var(--ig-primary-400-contrast))); + --hover-foreground: var(--igx-test-component-hover-foreground, var(--ig-test-component-hover-foreground, var(--ig-secondary-700-contrast))); + --border-style: var(--igx-test-component-border-style, var(--ig-test-component-border-style, solid)); + --border-radius: var(--igx-test-component-border-radius, var(--ig-test-component-border-radius, 0.125rem)); + --brushes: var(--igx-test-component-brushes, var(--ig-test-component-brushes, var(--chart-brushes))); + --resting-elevation: var(--igx-test-component-resting-elevation, var(--ig-test-component-resting-elevation, var(--ig-elevation-2))); + --ig-theme: material; + --ig-theme-variant: light; +} + +/* END_EXPECTED */ +/* END_ASSERT */ +/* */ +/* Test: should scope theme CSS variables correctly */ +/* ASSERT: */ +/* OUTPUT */ +igc-avatar { + --background: var(--igx-test-component-background, var(--ig-test-component-background, var(--ig-primary-400))); + --hover-background: var(--igx-test-component-hover-background, var(--ig-test-component-hover-background, hsl(from var(--ig-secondary-700) h s l/0.26))); + --foreground: var(--igx-test-component-foreground, var(--ig-test-component-foreground, var(--ig-primary-400-contrast))); + --hover-foreground: var(--igx-test-component-hover-foreground, var(--ig-test-component-hover-foreground, var(--ig-secondary-700-contrast))); + --border-style: var(--igx-test-component-border-style, var(--ig-test-component-border-style, solid)); + --border-radius: var(--igx-test-component-border-radius, var(--ig-test-component-border-radius, 0.125rem)); + --brushes: var(--igx-test-component-brushes, var(--ig-test-component-brushes, var(--chart-brushes))); + --resting-elevation: var(--igx-test-component-resting-elevation, var(--ig-test-component-resting-elevation, var(--ig-elevation-2))); + --ig-theme: material; + --ig-theme-variant: light; +} + +/* END_OUTPUT */ +/* EXPECTED */ +igc-avatar { + --background: var(--igx-test-component-background, var(--ig-test-component-background, var(--ig-primary-400))); + --hover-background: var(--igx-test-component-hover-background, var(--ig-test-component-hover-background, hsl(from var(--ig-secondary-700) h s l/0.26))); + --foreground: var(--igx-test-component-foreground, var(--ig-test-component-foreground, var(--ig-primary-400-contrast))); + --hover-foreground: var(--igx-test-component-hover-foreground, var(--ig-test-component-hover-foreground, var(--ig-secondary-700-contrast))); + --border-style: var(--igx-test-component-border-style, var(--ig-test-component-border-style, solid)); + --border-radius: var(--igx-test-component-border-radius, var(--ig-test-component-border-radius, 0.125rem)); + --brushes: var(--igx-test-component-brushes, var(--ig-test-component-brushes, var(--chart-brushes))); + --resting-elevation: var(--igx-test-component-resting-elevation, var(--ig-test-component-resting-elevation, var(--ig-elevation-2))); + --ig-theme: material; + --ig-theme-variant: light; +} + +/* END_EXPECTED */ +/* END_ASSERT */ +/* ASSERT: */ +/* OUTPUT */ +.my-theme, +.my-theme igc-avatar { + --background: var(--igx-test-component-background, var(--ig-test-component-background, var(--ig-primary-400))); + --hover-background: var(--igx-test-component-hover-background, var(--ig-test-component-hover-background, hsl(from var(--ig-secondary-700) h s l/0.26))); + --foreground: var(--igx-test-component-foreground, var(--ig-test-component-foreground, var(--ig-primary-400-contrast))); + --hover-foreground: var(--igx-test-component-hover-foreground, var(--ig-test-component-hover-foreground, var(--ig-secondary-700-contrast))); + --border-style: var(--igx-test-component-border-style, var(--ig-test-component-border-style, solid)); + --border-radius: var(--igx-test-component-border-radius, var(--ig-test-component-border-radius, 0.125rem)); + --brushes: var(--igx-test-component-brushes, var(--ig-test-component-brushes, var(--chart-brushes))); + --resting-elevation: var(--igx-test-component-resting-elevation, var(--ig-test-component-resting-elevation, var(--ig-elevation-2))); + --ig-theme: material; + --ig-theme-variant: light; +} + +/* END_OUTPUT */ +/* EXPECTED */ +.my-theme, +.my-theme igc-avatar { + --background: var(--igx-test-component-background, var(--ig-test-component-background, var(--ig-primary-400))); + --hover-background: var(--igx-test-component-hover-background, var(--ig-test-component-hover-background, hsl(from var(--ig-secondary-700) h s l/0.26))); + --foreground: var(--igx-test-component-foreground, var(--ig-test-component-foreground, var(--ig-primary-400-contrast))); + --hover-foreground: var(--igx-test-component-hover-foreground, var(--ig-test-component-hover-foreground, var(--ig-secondary-700-contrast))); + --border-style: var(--igx-test-component-border-style, var(--ig-test-component-border-style, solid)); + --border-radius: var(--igx-test-component-border-radius, var(--ig-test-component-border-radius, 0.125rem)); + --brushes: var(--igx-test-component-brushes, var(--ig-test-component-brushes, var(--chart-brushes))); + --resting-elevation: var(--igx-test-component-resting-elevation, var(--ig-test-component-resting-elevation, var(--ig-elevation-2))); + --ig-theme: material; + --ig-theme-variant: light; +} + +/* END_EXPECTED */ +/* END_ASSERT */ +/* */ +/* Test: should scope theme CSS variables to a specified scope */ +/* ASSERT: */ +/* OUTPUT */ +.custom-selector { + --background: var(--igx-test-component-background, var(--ig-test-component-background, var(--ig-primary-400))); + --hover-background: var(--igx-test-component-hover-background, var(--ig-test-component-hover-background, hsl(from var(--ig-secondary-700) h s l/0.26))); + --foreground: var(--igx-test-component-foreground, var(--ig-test-component-foreground, var(--ig-primary-400-contrast))); + --hover-foreground: var(--igx-test-component-hover-foreground, var(--ig-test-component-hover-foreground, var(--ig-secondary-700-contrast))); + --border-style: var(--igx-test-component-border-style, var(--ig-test-component-border-style, solid)); + --border-radius: var(--igx-test-component-border-radius, var(--ig-test-component-border-radius, 0.125rem)); + --brushes: var(--igx-test-component-brushes, var(--ig-test-component-brushes, var(--chart-brushes))); + --resting-elevation: var(--igx-test-component-resting-elevation, var(--ig-test-component-resting-elevation, var(--ig-elevation-2))); + --ig-theme: material; + --ig-theme-variant: light; +} + +/* END_OUTPUT */ +/* EXPECTED */ +.custom-selector { + --background: var(--igx-test-component-background, var(--ig-test-component-background, var(--ig-primary-400))); + --hover-background: var(--igx-test-component-hover-background, var(--ig-test-component-hover-background, hsl(from var(--ig-secondary-700) h s l/0.26))); + --foreground: var(--igx-test-component-foreground, var(--ig-test-component-foreground, var(--ig-primary-400-contrast))); + --hover-foreground: var(--igx-test-component-hover-foreground, var(--ig-test-component-hover-foreground, var(--ig-secondary-700-contrast))); + --border-style: var(--igx-test-component-border-style, var(--ig-test-component-border-style, solid)); + --border-radius: var(--igx-test-component-border-radius, var(--ig-test-component-border-radius, 0.125rem)); + --brushes: var(--igx-test-component-brushes, var(--ig-test-component-brushes, var(--chart-brushes))); + --resting-elevation: var(--igx-test-component-resting-elevation, var(--ig-test-component-resting-elevation, var(--ig-elevation-2))); + --ig-theme: material; + --ig-theme-variant: light; +} + +/* END_EXPECTED */ +/* END_ASSERT */ +/* ASSERT: */ +/* OUTPUT */ +.my-theme, +.my-theme .custom-selector { + --background: var(--igx-test-component-background, var(--ig-test-component-background, var(--ig-primary-400))); + --hover-background: var(--igx-test-component-hover-background, var(--ig-test-component-hover-background, hsl(from var(--ig-secondary-700) h s l/0.26))); + --foreground: var(--igx-test-component-foreground, var(--ig-test-component-foreground, var(--ig-primary-400-contrast))); + --hover-foreground: var(--igx-test-component-hover-foreground, var(--ig-test-component-hover-foreground, var(--ig-secondary-700-contrast))); + --border-style: var(--igx-test-component-border-style, var(--ig-test-component-border-style, solid)); + --border-radius: var(--igx-test-component-border-radius, var(--ig-test-component-border-radius, 0.125rem)); + --brushes: var(--igx-test-component-brushes, var(--ig-test-component-brushes, var(--chart-brushes))); + --resting-elevation: var(--igx-test-component-resting-elevation, var(--ig-test-component-resting-elevation, var(--ig-elevation-2))); + --ig-theme: material; + --ig-theme-variant: light; +} + +/* END_OUTPUT */ +/* EXPECTED */ +.my-theme, +.my-theme .custom-selector { + --background: var(--igx-test-component-background, var(--ig-test-component-background, var(--ig-primary-400))); + --hover-background: var(--igx-test-component-hover-background, var(--ig-test-component-hover-background, hsl(from var(--ig-secondary-700) h s l/0.26))); + --foreground: var(--igx-test-component-foreground, var(--ig-test-component-foreground, var(--ig-primary-400-contrast))); + --hover-foreground: var(--igx-test-component-hover-foreground, var(--ig-test-component-hover-foreground, var(--ig-secondary-700-contrast))); + --border-style: var(--igx-test-component-border-style, var(--ig-test-component-border-style, solid)); + --border-radius: var(--igx-test-component-border-radius, var(--ig-test-component-border-radius, 0.125rem)); + --brushes: var(--igx-test-component-brushes, var(--ig-test-component-brushes, var(--chart-brushes))); + --resting-elevation: var(--igx-test-component-resting-elevation, var(--ig-test-component-resting-elevation, var(--ig-elevation-2))); + --ig-theme: material; + --ig-theme-variant: light; +} + +/* END_EXPECTED */ +/* END_ASSERT */ +/* */ +/* Test: should set the border-radius to a value between min and max */ +/* ✔ [assert-equal] should set the border-radius to a value between min and max */ +/* */ +/* Test: should include border-radius styles to a given scope with a value between min and max */ +/* ASSERT: */ +/* OUTPUT */ +.test-output { + border-radius: clamp(0.125rem, calc(var(--ig-radius-factor, 1) * 0.25rem), 0.25rem); +} + +/* END_OUTPUT */ +/* EXPECTED */ +.test-output { + border-radius: clamp(0.125rem, calc(var(--ig-radius-factor, 1) * 0.25rem), 0.25rem); +} + +/* END_EXPECTED */ +/* END_ASSERT */ +/* */ +/* Test: include single-line truncate styles when the ellipsis mixin is included */ +/* ASSERT: */ +/* OUTPUT */ +.test-output { + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; +} + +/* END_OUTPUT */ +/* EXPECTED */ +.test-output { + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; +} + +/* END_EXPECTED */ +/* END_ASSERT */ +/* */ +/* Test: includes multi-line truncate styles when the line-clamp mixin is included */ +/* ASSERT: */ +/* OUTPUT */ +.test-output { + display: -webkit-inline-box; + -webkit-line-clamp: 3; + -webkit-box-orient: vertical; + overflow: hidden; +} + +/* END_OUTPUT */ +/* EXPECTED */ +.test-output { + display: -webkit-inline-box; + -webkit-line-clamp: 3; + -webkit-box-orient: vertical; + overflow: hidden; +} + +/* END_EXPECTED */ +/* END_ASSERT */ +/* */ +/* Test: includes styles that hide the default element when the hide-default mixin is included */ +/* ASSERT: */ +/* OUTPUT */ +.test-output { + position: absolute; + width: 1px; + height: 1px; + margin: -1px; + border: none; + clip: rect(0, 0, 0, 0); + outline: 0; + pointer-events: none; + overflow: hidden; + appearance: none; +} + +/* END_OUTPUT */ +/* EXPECTED */ +.test-output { + position: absolute; + width: 1px; + height: 1px; + margin: -1px; + border: none; + clip: rect(0, 0, 0, 0); + outline: 0; + pointer-events: none; + overflow: hidden; + appearance: none; +} + +/* END_EXPECTED */ +/* END_ASSERT */ +/* */ +/* # Module: Themes :: schemas :: Tokens */ +/* ------------------------------------- */ +/* Test: should generate global tokens with the ig prefix */ +/* ASSERT: */ +/* OUTPUT */ +.test-output { + --ig-test-component-background: var(--ig-primary-400); + --ig-test-component-hover-background: hsl(from var(--ig-secondary-700) h s l/0.26); + --ig-test-component-foreground: var(--ig-primary-400-contrast); + --ig-test-component-hover-foreground: var(--ig-secondary-700-contrast); + --ig-test-component-border-style: solid; + --ig-test-component-border-radius: 0.125rem; + --ig-test-component-brushes: var(--chart-brushes); + --ig-test-component-resting-elevation: var(--ig-elevation-2); +} + +/* END_OUTPUT */ +/* EXPECTED */ +.test-output { + --ig-test-component-background: var(--ig-primary-400); + --ig-test-component-hover-background: hsl(from var(--ig-secondary-700) h s l/0.26); + --ig-test-component-foreground: var(--ig-primary-400-contrast); + --ig-test-component-hover-foreground: var(--ig-secondary-700-contrast); + --ig-test-component-border-style: solid; + --ig-test-component-border-radius: 0.125rem; + --ig-test-component-brushes: var(--chart-brushes); + --ig-test-component-resting-elevation: var(--ig-elevation-2); +} + +/* END_EXPECTED */ +/* END_ASSERT */ +/* */ +/* Test: should rewrite local var references to global ig-prefixed tokens */ +/* ASSERT: */ +/* OUTPUT */ +.test-output { + --ig-test-rewrite-background: red; + --ig-test-rewrite-color: hsla(from color(from var(--ig-test-rewrite-background) var(--y-contrast)) h 0 l/1); + --ig-test-rewrite-border-style: solid; +} + +/* END_OUTPUT */ +/* EXPECTED */ +.test-output { + --ig-test-rewrite-background: red; + --ig-test-rewrite-color: hsla(from color(from var(--ig-test-rewrite-background) var(--y-contrast)) h 0 l/1); + --ig-test-rewrite-border-style: solid; +} + +/* END_EXPECTED */ +/* END_ASSERT */ +/* */ +/* Test: should rewrite multiple local var references in a single value */ +/* ASSERT: */ +/* OUTPUT */ +.test-output { + --ig-test-multi-background: red; + --ig-test-multi-foreground: blue; + --ig-test-multi-computed: calc(var(--ig-test-multi-background) + var(--ig-test-multi-foreground)); +} + +/* END_OUTPUT */ +/* EXPECTED */ +.test-output { + --ig-test-multi-background: red; + --ig-test-multi-foreground: blue; + --ig-test-multi-computed: calc(var(--ig-test-multi-background) + var(--ig-test-multi-foreground)); +} + +/* END_EXPECTED */ +/* END_ASSERT */ +/* */ +/* Test: should skip sizable expressions from schema defaults */ +/* ASSERT: */ +/* OUTPUT */ +.test-output { + --ig-test-sizable-background: red; +} + +/* END_OUTPUT */ +/* EXPECTED */ +.test-output { + --ig-test-sizable-background: red; +} + +/* END_EXPECTED */ +/* END_ASSERT */ +/* */ +/* Test: should emit concrete size values provided by the user */ +/* ASSERT: */ +/* OUTPUT */ +.test-output { + --ig-test-concrete-size-background: red; + --ig-test-concrete-size-size: 2rem; +} + +/* END_OUTPUT */ +/* EXPECTED */ +.test-output { + --ig-test-concrete-size-background: red; + --ig-test-concrete-size-size: 2rem; +} + +/* END_EXPECTED */ +/* END_ASSERT */ +/* */ +/* Test: should not emit ignored keys */ +/* ASSERT: */ +/* OUTPUT */ +.test-output { + --ig-test-component-background: var(--ig-primary-400); + --ig-test-component-hover-background: hsl(from var(--ig-secondary-700) h s l/0.26); + --ig-test-component-foreground: var(--ig-primary-400-contrast); + --ig-test-component-hover-foreground: var(--ig-secondary-700-contrast); + --ig-test-component-border-style: solid; + --ig-test-component-border-radius: 0.125rem; + --ig-test-component-brushes: var(--chart-brushes); + --ig-test-component-resting-elevation: var(--ig-elevation-2); + --ig-test-component-default-size: 2; +} + +/* END_OUTPUT */ +/* EXPECTED */ +.test-output { + --ig-test-component-background: var(--ig-primary-400); + --ig-test-component-hover-background: hsl(from var(--ig-secondary-700) h s l/0.26); + --ig-test-component-foreground: var(--ig-primary-400-contrast); + --ig-test-component-hover-foreground: var(--ig-secondary-700-contrast); + --ig-test-component-border-style: solid; + --ig-test-component-border-radius: 0.125rem; + --ig-test-component-brushes: var(--chart-brushes); + --ig-test-component-resting-elevation: var(--ig-elevation-2); + --ig-test-component-default-size: 2; +} + +/* END_EXPECTED */ +/* END_ASSERT */ +/* */ +/* Test: should always use the ig prefix regardless of configured variable-prefix */ +/* ASSERT: */ +/* OUTPUT */ +.test-output { + --ig-test-prefix-background: blue; +} + +/* END_OUTPUT */ +/* EXPECTED */ +.test-output { + --ig-test-prefix-background: blue; +} + +/* END_EXPECTED */ +/* END_ASSERT */ +/* */ +/* Test: should scope theme CSS variables when mode is scoped */ +/* ASSERT: */ +/* OUTPUT */ +igc-avatar { + --background: var(--igx-test-component-background, var(--ig-test-component-background, var(--ig-primary-400))); + --hover-background: var(--igx-test-component-hover-background, var(--ig-test-component-hover-background, hsl(from var(--ig-secondary-700) h s l/0.26))); + --foreground: var(--igx-test-component-foreground, var(--ig-test-component-foreground, var(--ig-primary-400-contrast))); + --hover-foreground: var(--igx-test-component-hover-foreground, var(--ig-test-component-hover-foreground, var(--ig-secondary-700-contrast))); + --border-style: var(--igx-test-component-border-style, var(--ig-test-component-border-style, solid)); + --border-radius: var(--igx-test-component-border-radius, var(--ig-test-component-border-radius, 0.125rem)); + --brushes: var(--igx-test-component-brushes, var(--ig-test-component-brushes, var(--chart-brushes))); + --resting-elevation: var(--igx-test-component-resting-elevation, var(--ig-test-component-resting-elevation, var(--ig-elevation-2))); + --ig-theme: material; + --ig-theme-variant: light; +} + +/* END_OUTPUT */ +/* EXPECTED */ +igc-avatar { + --background: var(--igx-test-component-background, var(--ig-test-component-background, var(--ig-primary-400))); + --hover-background: var(--igx-test-component-hover-background, var(--ig-test-component-hover-background, hsl(from var(--ig-secondary-700) h s l/0.26))); + --foreground: var(--igx-test-component-foreground, var(--ig-test-component-foreground, var(--ig-primary-400-contrast))); + --hover-foreground: var(--igx-test-component-hover-foreground, var(--ig-test-component-hover-foreground, var(--ig-secondary-700-contrast))); + --border-style: var(--igx-test-component-border-style, var(--ig-test-component-border-style, solid)); + --border-radius: var(--igx-test-component-border-radius, var(--ig-test-component-border-radius, 0.125rem)); + --brushes: var(--igx-test-component-brushes, var(--ig-test-component-brushes, var(--chart-brushes))); + --resting-elevation: var(--igx-test-component-resting-elevation, var(--ig-test-component-resting-elevation, var(--ig-elevation-2))); + --ig-theme: material; + --ig-theme-variant: light; +} + +/* END_EXPECTED */ +/* END_ASSERT */ +/* ASSERT: */ +/* OUTPUT */ +.my-theme, +.my-theme igc-avatar { + --background: var(--igx-test-component-background, var(--ig-test-component-background, var(--ig-primary-400))); + --hover-background: var(--igx-test-component-hover-background, var(--ig-test-component-hover-background, hsl(from var(--ig-secondary-700) h s l/0.26))); + --foreground: var(--igx-test-component-foreground, var(--ig-test-component-foreground, var(--ig-primary-400-contrast))); + --hover-foreground: var(--igx-test-component-hover-foreground, var(--ig-test-component-hover-foreground, var(--ig-secondary-700-contrast))); + --border-style: var(--igx-test-component-border-style, var(--ig-test-component-border-style, solid)); + --border-radius: var(--igx-test-component-border-radius, var(--ig-test-component-border-radius, 0.125rem)); + --brushes: var(--igx-test-component-brushes, var(--ig-test-component-brushes, var(--chart-brushes))); + --resting-elevation: var(--igx-test-component-resting-elevation, var(--ig-test-component-resting-elevation, var(--ig-elevation-2))); + --ig-theme: material; + --ig-theme-variant: light; +} + +/* END_OUTPUT */ +/* EXPECTED */ +.my-theme, +.my-theme igc-avatar { + --background: var(--igx-test-component-background, var(--ig-test-component-background, var(--ig-primary-400))); + --hover-background: var(--igx-test-component-hover-background, var(--ig-test-component-hover-background, hsl(from var(--ig-secondary-700) h s l/0.26))); + --foreground: var(--igx-test-component-foreground, var(--ig-test-component-foreground, var(--ig-primary-400-contrast))); + --hover-foreground: var(--igx-test-component-hover-foreground, var(--ig-test-component-hover-foreground, var(--ig-secondary-700-contrast))); + --border-style: var(--igx-test-component-border-style, var(--ig-test-component-border-style, solid)); + --border-radius: var(--igx-test-component-border-radius, var(--ig-test-component-border-radius, 0.125rem)); + --brushes: var(--igx-test-component-brushes, var(--ig-test-component-brushes, var(--chart-brushes))); + --resting-elevation: var(--igx-test-component-resting-elevation, var(--ig-test-component-resting-elevation, var(--ig-elevation-2))); + --ig-theme: material; + --ig-theme-variant: light; +} + +/* END_EXPECTED */ +/* END_ASSERT */ +/* */ +/* Test: should scope theme CSS variables to a custom scope when mode is scoped */ +/* ASSERT: */ +/* OUTPUT */ +.custom-scope { + --background: var(--igx-test-component-background, var(--ig-test-component-background, var(--ig-primary-400))); + --hover-background: var(--igx-test-component-hover-background, var(--ig-test-component-hover-background, hsl(from var(--ig-secondary-700) h s l/0.26))); + --foreground: var(--igx-test-component-foreground, var(--ig-test-component-foreground, var(--ig-primary-400-contrast))); + --hover-foreground: var(--igx-test-component-hover-foreground, var(--ig-test-component-hover-foreground, var(--ig-secondary-700-contrast))); + --border-style: var(--igx-test-component-border-style, var(--ig-test-component-border-style, solid)); + --border-radius: var(--igx-test-component-border-radius, var(--ig-test-component-border-radius, 0.125rem)); + --brushes: var(--igx-test-component-brushes, var(--ig-test-component-brushes, var(--chart-brushes))); + --resting-elevation: var(--igx-test-component-resting-elevation, var(--ig-test-component-resting-elevation, var(--ig-elevation-2))); + --ig-theme: material; + --ig-theme-variant: light; +} + +/* END_OUTPUT */ +/* EXPECTED */ +.custom-scope { + --background: var(--igx-test-component-background, var(--ig-test-component-background, var(--ig-primary-400))); + --hover-background: var(--igx-test-component-hover-background, var(--ig-test-component-hover-background, hsl(from var(--ig-secondary-700) h s l/0.26))); + --foreground: var(--igx-test-component-foreground, var(--ig-test-component-foreground, var(--ig-primary-400-contrast))); + --hover-foreground: var(--igx-test-component-hover-foreground, var(--ig-test-component-hover-foreground, var(--ig-secondary-700-contrast))); + --border-style: var(--igx-test-component-border-style, var(--ig-test-component-border-style, solid)); + --border-radius: var(--igx-test-component-border-radius, var(--ig-test-component-border-radius, 0.125rem)); + --brushes: var(--igx-test-component-brushes, var(--ig-test-component-brushes, var(--chart-brushes))); + --resting-elevation: var(--igx-test-component-resting-elevation, var(--ig-test-component-resting-elevation, var(--ig-elevation-2))); + --ig-theme: material; + --ig-theme-variant: light; +} + +/* END_EXPECTED */ +/* END_ASSERT */ +/* */ +/* Test: should produce identical output for css-vars and tokens in scoped mode */ +/* ASSERT: */ +/* OUTPUT */ +igc-test { + --background: var(--igx-test-component-background, var(--ig-test-component-background, var(--ig-primary-400))); + --hover-background: var(--igx-test-component-hover-background, var(--ig-test-component-hover-background, hsl(from var(--ig-secondary-700) h s l/0.26))); + --foreground: var(--igx-test-component-foreground, var(--ig-test-component-foreground, var(--ig-primary-400-contrast))); + --hover-foreground: var(--igx-test-component-hover-foreground, var(--ig-test-component-hover-foreground, var(--ig-secondary-700-contrast))); + --border-style: var(--igx-test-component-border-style, var(--ig-test-component-border-style, solid)); + --border-radius: var(--igx-test-component-border-radius, var(--ig-test-component-border-radius, 0.125rem)); + --brushes: var(--igx-test-component-brushes, var(--ig-test-component-brushes, var(--chart-brushes))); + --resting-elevation: var(--igx-test-component-resting-elevation, var(--ig-test-component-resting-elevation, var(--ig-elevation-2))); + --ig-theme: material; + --ig-theme-variant: light; +} + +/* END_OUTPUT */ +/* EXPECTED */ +igc-test { + --background: var(--igx-test-component-background, var(--ig-test-component-background, var(--ig-primary-400))); + --hover-background: var(--igx-test-component-hover-background, var(--ig-test-component-hover-background, hsl(from var(--ig-secondary-700) h s l/0.26))); + --foreground: var(--igx-test-component-foreground, var(--ig-test-component-foreground, var(--ig-primary-400-contrast))); + --hover-foreground: var(--igx-test-component-hover-foreground, var(--ig-test-component-hover-foreground, var(--ig-secondary-700-contrast))); + --border-style: var(--igx-test-component-border-style, var(--ig-test-component-border-style, solid)); + --border-radius: var(--igx-test-component-border-radius, var(--ig-test-component-border-radius, 0.125rem)); + --brushes: var(--igx-test-component-brushes, var(--ig-test-component-brushes, var(--chart-brushes))); + --resting-elevation: var(--igx-test-component-resting-elevation, var(--ig-test-component-resting-elevation, var(--ig-elevation-2))); + --ig-theme: material; + --ig-theme-variant: light; +} + +/* END_EXPECTED */ +/* END_ASSERT */ +/* */ +/* */ +/* # Module: Themes :: schemas :: Sizing */ +/* ------------------------------------- */ +/* Test: should produce size variables */ +/* ASSERT: */ +/* OUTPUT */ +.test-output { + width: max(var(--is-large, 1) * max(300px, -1 * 300px), var(--is-medium, 1) * max(200px, -1 * 200px), var(--is-small, 1) * max(100px, -1 * 100px)); +} + +/* END_OUTPUT */ +/* EXPECTED */ +.test-output { + width: max(var(--is-large, 1) * max(300px, -1 * 300px), var(--is-medium, 1) * max(200px, -1 * 200px), var(--is-small, 1) * max(100px, -1 * 100px)); +} + +/* END_EXPECTED */ +/* END_ASSERT */ +/* */ +/* */ +/* # Module: Themes :: schemas :: Spacing */ +/* -------------------------------------- */ +/* Test: should use customizable spacing when declaring padding/margin */ +/* ASSERT: */ +/* OUTPUT */ +.test-output { + padding: max(var(--is-large, 1) * max(14px, -1 * 14px) * var(--ig-spacing-large, var(--ig-spacing, var(--ig-spacing))), var(--is-medium, 1) * max(14px, -1 * 14px) * var(--ig-spacing-medium, var(--ig-spacing, var(--ig-spacing))), var(--is-small, 1) * max(14px, -1 * 14px) * var(--ig-spacing-small, var(--ig-spacing, var(--ig-spacing)))); +} + +/* END_OUTPUT */ +/* EXPECTED */ +.test-output { + padding: max(var(--is-large, 1) * max(14px, -1 * 14px) * var(--ig-spacing-large, var(--ig-spacing, var(--ig-spacing))), var(--is-medium, 1) * max(14px, -1 * 14px) * var(--ig-spacing-medium, var(--ig-spacing, var(--ig-spacing))), var(--is-small, 1) * max(14px, -1 * 14px) * var(--ig-spacing-small, var(--ig-spacing, var(--ig-spacing)))); +} + +/* END_EXPECTED */ +/* END_ASSERT */ +/* */ +/* Test: should use customizable inline spacing when declaring inline padding/margin */ +/* ASSERT: */ +/* OUTPUT */ +.test-output { + padding-inline: max(var(--is-large, 1) * max(14px, -1 * 14px) * var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))), var(--is-medium, 1) * max(14px, -1 * 14px) * var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))), var(--is-small, 1) * max(14px, -1 * 14px) * var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing)))); +} + +/* END_OUTPUT */ +/* EXPECTED */ +.test-output { + padding-inline: max(var(--is-large, 1) * max(14px, -1 * 14px) * var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))), var(--is-medium, 1) * max(14px, -1 * 14px) * var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))), var(--is-small, 1) * max(14px, -1 * 14px) * var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing)))); +} + +/* END_EXPECTED */ +/* END_ASSERT */ +/* */ +/* Test: should use customizable block spacing when declaring inline padding/margin */ +/* ASSERT: */ +/* OUTPUT */ +.test-output { + padding-block: max(var(--is-large, 1) * max(16px, -1 * 16px) * var(--ig-spacing-block-large, var(--ig-spacing-block, var(--ig-spacing))), var(--is-medium, 1) * max(8px, -1 * 8px) * var(--ig-spacing-block-medium, var(--ig-spacing-block, var(--ig-spacing))), var(--is-small, 1) * max(4px, -1 * 4px) * var(--ig-spacing-block-small, var(--ig-spacing-block, var(--ig-spacing)))); +} + +/* END_OUTPUT */ +/* EXPECTED */ +.test-output { + padding-block: max(var(--is-large, 1) * max(16px, -1 * 16px) * var(--ig-spacing-block-large, var(--ig-spacing-block, var(--ig-spacing))), var(--is-medium, 1) * max(8px, -1 * 8px) * var(--ig-spacing-block-medium, var(--ig-spacing-block, var(--ig-spacing))), var(--is-small, 1) * max(4px, -1 * 4px) * var(--ig-spacing-block-small, var(--ig-spacing-block, var(--ig-spacing)))); +} + +/* END_EXPECTED */ +/* END_ASSERT */ +/* */ +/* */ +/* */ +/* */ +/* # Module: Elevations */ +/* -------------------- */ +/* Test: should return an empty list for a list of non box-shadow values */ +/* ✔ [assert-equal] should return an empty list for a list of non box-shadow values */ +/* */ +/* Test: should produce a box shadow that reacts to CSS --ig-elevation-factor changes */ +/* ✔ [assert-equal] should produce a box shadow that reacts to CSS --ig-elevation-factor changes */ +/* */ +/* Test: should configure the material elevations module */ +/* ASSERT: */ +/* OUTPUT */ +.test-output { + --ig-elevation-0: none; + --ig-elevation-1: 0 calc(var(--ig-elevation-factor, 1) * 1px) calc(var(--ig-elevation-factor, 1) * 3px) 0 red, 0 calc(var(--ig-elevation-factor, 1) * 1px) calc(var(--ig-elevation-factor, 1) * 1px) 0 green, 0 calc(var(--ig-elevation-factor, 1) * 2px) calc(var(--ig-elevation-factor, 1) * 1px) calc(var(--ig-elevation-factor, 1) * -1px) blue; + --ig-elevation-2: 0 calc(var(--ig-elevation-factor, 1) * 1px) calc(var(--ig-elevation-factor, 1) * 5px) 0 red, 0 calc(var(--ig-elevation-factor, 1) * 2px) calc(var(--ig-elevation-factor, 1) * 2px) 0 green, 0 calc(var(--ig-elevation-factor, 1) * 3px) calc(var(--ig-elevation-factor, 1) * 1px) calc(var(--ig-elevation-factor, 1) * -2px) blue; + --ig-elevation-3: 0 calc(var(--ig-elevation-factor, 1) * 1px) calc(var(--ig-elevation-factor, 1) * 8px) 0 red, 0 calc(var(--ig-elevation-factor, 1) * 3px) calc(var(--ig-elevation-factor, 1) * 4px) 0 green, 0 calc(var(--ig-elevation-factor, 1) * 3px) calc(var(--ig-elevation-factor, 1) * 3px) calc(var(--ig-elevation-factor, 1) * -2px) blue; + --ig-elevation-4: 0 calc(var(--ig-elevation-factor, 1) * 2px) calc(var(--ig-elevation-factor, 1) * 4px) calc(var(--ig-elevation-factor, 1) * -1px) red, 0 calc(var(--ig-elevation-factor, 1) * 4px) calc(var(--ig-elevation-factor, 1) * 5px) 0 green, 0 calc(var(--ig-elevation-factor, 1) * 1px) calc(var(--ig-elevation-factor, 1) * 10px) 0 blue; + --ig-elevation-5: 0 calc(var(--ig-elevation-factor, 1) * 3px) calc(var(--ig-elevation-factor, 1) * 5px) calc(var(--ig-elevation-factor, 1) * -1px) red, 0 calc(var(--ig-elevation-factor, 1) * 5px) calc(var(--ig-elevation-factor, 1) * 8px) 0 green, 0 calc(var(--ig-elevation-factor, 1) * 1px) calc(var(--ig-elevation-factor, 1) * 14px) 0 blue; + --ig-elevation-6: 0 calc(var(--ig-elevation-factor, 1) * 3px) calc(var(--ig-elevation-factor, 1) * 5px) calc(var(--ig-elevation-factor, 1) * -1px) red, 0 calc(var(--ig-elevation-factor, 1) * 6px) calc(var(--ig-elevation-factor, 1) * 10px) 0 green, 0 calc(var(--ig-elevation-factor, 1) * 1px) calc(var(--ig-elevation-factor, 1) * 18px) 0 blue; + --ig-elevation-7: 0 calc(var(--ig-elevation-factor, 1) * 4px) calc(var(--ig-elevation-factor, 1) * 5px) calc(var(--ig-elevation-factor, 1) * -2px) red, 0 calc(var(--ig-elevation-factor, 1) * 7px) calc(var(--ig-elevation-factor, 1) * 10px) calc(var(--ig-elevation-factor, 1) * 1px) green, 0 calc(var(--ig-elevation-factor, 1) * 2px) calc(var(--ig-elevation-factor, 1) * 16px) calc(var(--ig-elevation-factor, 1) * 1px) blue; + --ig-elevation-8: 0 calc(var(--ig-elevation-factor, 1) * 5px) calc(var(--ig-elevation-factor, 1) * 5px) calc(var(--ig-elevation-factor, 1) * -3px) red, 0 calc(var(--ig-elevation-factor, 1) * 8px) calc(var(--ig-elevation-factor, 1) * 10px) calc(var(--ig-elevation-factor, 1) * 1px) green, 0 calc(var(--ig-elevation-factor, 1) * 3px) calc(var(--ig-elevation-factor, 1) * 14px) calc(var(--ig-elevation-factor, 1) * 2px) blue; + --ig-elevation-9: 0 calc(var(--ig-elevation-factor, 1) * 5px) calc(var(--ig-elevation-factor, 1) * 6px) calc(var(--ig-elevation-factor, 1) * -3px) red, 0 calc(var(--ig-elevation-factor, 1) * 9px) calc(var(--ig-elevation-factor, 1) * 12px) calc(var(--ig-elevation-factor, 1) * 1px) green, 0 calc(var(--ig-elevation-factor, 1) * 3px) calc(var(--ig-elevation-factor, 1) * 16px) calc(var(--ig-elevation-factor, 1) * 2px) blue; + --ig-elevation-10: 0 calc(var(--ig-elevation-factor, 1) * 6px) calc(var(--ig-elevation-factor, 1) * 6px) calc(var(--ig-elevation-factor, 1) * -3px) red, 0 calc(var(--ig-elevation-factor, 1) * 10px) calc(var(--ig-elevation-factor, 1) * 14px) calc(var(--ig-elevation-factor, 1) * 1px) green, 0 calc(var(--ig-elevation-factor, 1) * 4px) calc(var(--ig-elevation-factor, 1) * 18px) calc(var(--ig-elevation-factor, 1) * 3px) blue; + --ig-elevation-11: 0 calc(var(--ig-elevation-factor, 1) * 6px) calc(var(--ig-elevation-factor, 1) * 7px) calc(var(--ig-elevation-factor, 1) * -4px) red, 0 calc(var(--ig-elevation-factor, 1) * 11px) calc(var(--ig-elevation-factor, 1) * 15px) calc(var(--ig-elevation-factor, 1) * 1px) green, 0 calc(var(--ig-elevation-factor, 1) * 4px) calc(var(--ig-elevation-factor, 1) * 20px) calc(var(--ig-elevation-factor, 1) * 3px) blue; + --ig-elevation-12: 0 calc(var(--ig-elevation-factor, 1) * 7px) calc(var(--ig-elevation-factor, 1) * 8px) calc(var(--ig-elevation-factor, 1) * -4px) red, 0 calc(var(--ig-elevation-factor, 1) * 12px) calc(var(--ig-elevation-factor, 1) * 17px) calc(var(--ig-elevation-factor, 1) * 2px) green, 0 calc(var(--ig-elevation-factor, 1) * 5px) calc(var(--ig-elevation-factor, 1) * 22px) calc(var(--ig-elevation-factor, 1) * 4px) blue; + --ig-elevation-13: 0 calc(var(--ig-elevation-factor, 1) * 7px) calc(var(--ig-elevation-factor, 1) * 8px) calc(var(--ig-elevation-factor, 1) * -4px) red, 0 calc(var(--ig-elevation-factor, 1) * 13px) calc(var(--ig-elevation-factor, 1) * 19px) calc(var(--ig-elevation-factor, 1) * 2px) green, 0 calc(var(--ig-elevation-factor, 1) * 5px) calc(var(--ig-elevation-factor, 1) * 24px) calc(var(--ig-elevation-factor, 1) * 4px) blue; + --ig-elevation-14: 0 calc(var(--ig-elevation-factor, 1) * 7px) calc(var(--ig-elevation-factor, 1) * 9px) calc(var(--ig-elevation-factor, 1) * -4px) red, 0 calc(var(--ig-elevation-factor, 1) * 14px) calc(var(--ig-elevation-factor, 1) * 21px) calc(var(--ig-elevation-factor, 1) * 2px) green, 0 calc(var(--ig-elevation-factor, 1) * 5px) calc(var(--ig-elevation-factor, 1) * 26px) calc(var(--ig-elevation-factor, 1) * 4px) blue; + --ig-elevation-15: 0 calc(var(--ig-elevation-factor, 1) * 8px) calc(var(--ig-elevation-factor, 1) * 9px) calc(var(--ig-elevation-factor, 1) * -5px) red, 0 calc(var(--ig-elevation-factor, 1) * 15px) calc(var(--ig-elevation-factor, 1) * 22px) calc(var(--ig-elevation-factor, 1) * 2px) green, 0 calc(var(--ig-elevation-factor, 1) * 6px) calc(var(--ig-elevation-factor, 1) * 28px) calc(var(--ig-elevation-factor, 1) * 5px) blue; + --ig-elevation-16: 0 calc(var(--ig-elevation-factor, 1) * 8px) calc(var(--ig-elevation-factor, 1) * 10px) calc(var(--ig-elevation-factor, 1) * -5px) red, 0 calc(var(--ig-elevation-factor, 1) * 16px) calc(var(--ig-elevation-factor, 1) * 24px) calc(var(--ig-elevation-factor, 1) * 2px) green, 0 calc(var(--ig-elevation-factor, 1) * 6px) calc(var(--ig-elevation-factor, 1) * 30px) calc(var(--ig-elevation-factor, 1) * 5px) blue; + --ig-elevation-17: 0 calc(var(--ig-elevation-factor, 1) * 8px) calc(var(--ig-elevation-factor, 1) * 11px) calc(var(--ig-elevation-factor, 1) * -5px) red, 0 calc(var(--ig-elevation-factor, 1) * 17px) calc(var(--ig-elevation-factor, 1) * 26px) calc(var(--ig-elevation-factor, 1) * 2px) green, 0 calc(var(--ig-elevation-factor, 1) * 6px) calc(var(--ig-elevation-factor, 1) * 32px) calc(var(--ig-elevation-factor, 1) * 5px) blue; + --ig-elevation-18: 0 calc(var(--ig-elevation-factor, 1) * 9px) calc(var(--ig-elevation-factor, 1) * 11px) calc(var(--ig-elevation-factor, 1) * -5px) red, 0 calc(var(--ig-elevation-factor, 1) * 18px) calc(var(--ig-elevation-factor, 1) * 28px) calc(var(--ig-elevation-factor, 1) * 2px) green, 0 calc(var(--ig-elevation-factor, 1) * 7px) calc(var(--ig-elevation-factor, 1) * 34px) calc(var(--ig-elevation-factor, 1) * 6px) blue; + --ig-elevation-19: 0 calc(var(--ig-elevation-factor, 1) * 9px) calc(var(--ig-elevation-factor, 1) * 12px) calc(var(--ig-elevation-factor, 1) * -6px) red, 0 calc(var(--ig-elevation-factor, 1) * 19px) calc(var(--ig-elevation-factor, 1) * 29px) calc(var(--ig-elevation-factor, 1) * 2px) green, 0 calc(var(--ig-elevation-factor, 1) * 7px) calc(var(--ig-elevation-factor, 1) * 36px) calc(var(--ig-elevation-factor, 1) * 6px) blue; + --ig-elevation-20: 0 calc(var(--ig-elevation-factor, 1) * 10px) calc(var(--ig-elevation-factor, 1) * 13px) calc(var(--ig-elevation-factor, 1) * -6px) red, 0 calc(var(--ig-elevation-factor, 1) * 20px) calc(var(--ig-elevation-factor, 1) * 31px) calc(var(--ig-elevation-factor, 1) * 3px) green, 0 calc(var(--ig-elevation-factor, 1) * 8px) calc(var(--ig-elevation-factor, 1) * 38px) calc(var(--ig-elevation-factor, 1) * 7px) blue; + --ig-elevation-21: 0 calc(var(--ig-elevation-factor, 1) * 10px) calc(var(--ig-elevation-factor, 1) * 13px) calc(var(--ig-elevation-factor, 1) * -6px) red, 0 calc(var(--ig-elevation-factor, 1) * 21px) calc(var(--ig-elevation-factor, 1) * 33px) calc(var(--ig-elevation-factor, 1) * 3px) green, 0 calc(var(--ig-elevation-factor, 1) * 8px) calc(var(--ig-elevation-factor, 1) * 40px) calc(var(--ig-elevation-factor, 1) * 7px) blue; + --ig-elevation-22: 0 calc(var(--ig-elevation-factor, 1) * 10px) calc(var(--ig-elevation-factor, 1) * 14px) calc(var(--ig-elevation-factor, 1) * -6px) red, 0 calc(var(--ig-elevation-factor, 1) * 22px) calc(var(--ig-elevation-factor, 1) * 35px) calc(var(--ig-elevation-factor, 1) * 3px) green, 0 calc(var(--ig-elevation-factor, 1) * 8px) calc(var(--ig-elevation-factor, 1) * 42px) calc(var(--ig-elevation-factor, 1) * 7px) blue; + --ig-elevation-23: 0 calc(var(--ig-elevation-factor, 1) * 11px) calc(var(--ig-elevation-factor, 1) * 14px) calc(var(--ig-elevation-factor, 1) * -7px) red, 0 calc(var(--ig-elevation-factor, 1) * 23px) calc(var(--ig-elevation-factor, 1) * 36px) calc(var(--ig-elevation-factor, 1) * 3px) green, 0 calc(var(--ig-elevation-factor, 1) * 9px) calc(var(--ig-elevation-factor, 1) * 44px) calc(var(--ig-elevation-factor, 1) * 8px) blue; + --ig-elevation-24: 0 calc(var(--ig-elevation-factor, 1) * 11px) calc(var(--ig-elevation-factor, 1) * 15px) calc(var(--ig-elevation-factor, 1) * -7px) red, 0 calc(var(--ig-elevation-factor, 1) * 24px) calc(var(--ig-elevation-factor, 1) * 38px) calc(var(--ig-elevation-factor, 1) * 3px) green, 0 calc(var(--ig-elevation-factor, 1) * 9px) calc(var(--ig-elevation-factor, 1) * 46px) calc(var(--ig-elevation-factor, 1) * 8px) blue; +} + +/* END_OUTPUT */ +/* CONTAINED */ +.test-output { + --ig-elevation-1: 0 calc(var(--ig-elevation-factor, 1) * 1px) calc(var(--ig-elevation-factor, 1) * 3px) 0 red, 0 calc(var(--ig-elevation-factor, 1) * 1px) calc(var(--ig-elevation-factor, 1) * 1px) 0 green, 0 calc(var(--ig-elevation-factor, 1) * 2px) calc(var(--ig-elevation-factor, 1) * 1px) calc(var(--ig-elevation-factor, 1) * -1px) blue; +} + +/* END_CONTAINED */ +/* END_ASSERT */ +/* */ +/* Test: should produce CSS variables for a map of shadows */ +/* ASSERT: */ +/* OUTPUT */ +.test-output { + --ig-elevation-small: 0 calc(var(--ig-elevation-factor, 1) * 0.125rem) calc(var(--ig-elevation-factor, 1) * 0.25rem) rgba(0, 0, 0, 0.75); + --ig-elevation-medium: 0 calc(var(--ig-elevation-factor, 1) * 0.25rem) calc(var(--ig-elevation-factor, 1) * 0.5rem) rgba(0, 0, 0, 0.85); + --ig-elevation-large: 0 calc(var(--ig-elevation-factor, 1) * 0.75rem) calc(var(--ig-elevation-factor, 1) * 1rem) rgba(0, 0, 0, 0.95); +} + +/* END_OUTPUT */ +/* EXPECTED */ +.test-output { + --ig-elevation-small: 0 calc(var(--ig-elevation-factor, 1) * 0.125rem) calc(var(--ig-elevation-factor, 1) * 0.25rem) rgba(0, 0, 0, 0.75); + --ig-elevation-medium: 0 calc(var(--ig-elevation-factor, 1) * 0.25rem) calc(var(--ig-elevation-factor, 1) * 0.5rem) rgba(0, 0, 0, 0.85); + --ig-elevation-large: 0 calc(var(--ig-elevation-factor, 1) * 0.75rem) calc(var(--ig-elevation-factor, 1) * 1rem) rgba(0, 0, 0, 0.95); +} + +/* END_EXPECTED */ +/* END_ASSERT */ +/* */ +/* Test: should retrieve a CSS variable elevation by name */ +/* ASSERT: */ +/* OUTPUT */ +.test-output { + box-shadow: var(--ig-elevation-small); +} + +/* END_OUTPUT */ +/* EXPECTED */ +.test-output { + box-shadow: var(--ig-elevation-small); +} + +/* END_EXPECTED */ +/* END_ASSERT */ +/* */ +/* Test: should include box-shadow styles for an elevation level */ +/* ASSERT: */ +/* OUTPUT */ +.test-output { + box-shadow: var(--ig-elevation-small); +} + +/* END_OUTPUT */ +/* EXPECTED */ +.test-output { + box-shadow: var(--ig-elevation-small); +} + +/* END_EXPECTED */ +/* END_ASSERT */ +/* */ +/* */ +/* # Module: BEM */ +/* ------------- */ +/* Test: creates block__element classes */ +/* ASSERT: */ +/* OUTPUT */ +.block { + background: black; +} +.block__element { + color: orange; +} + +/* END_OUTPUT */ +/* EXPECTED */ +.block { + background: black; +} + +.block__element { + color: orange; +} + +/* END_EXPECTED */ +/* END_ASSERT */ +/* */ +/* Test: creates block--modifier classes using the modifier mixins */ +/* ASSERT: */ +/* OUTPUT */ +.block { + background: black; +} +.block--error { + background: red; +} + +.block--error.block--selected { + background: darkred; +} + +/* END_OUTPUT */ +/* EXPECTED */ +.block { + background: black; +} + +.block--error { + background: red; +} + +.block--error.block--selected { + background: darkred; +} + +/* END_EXPECTED */ +/* END_ASSERT */ +/* */ +/* Test: creates block__element--modifier classes using the element mixin */ +/* ASSERT: */ +/* OUTPUT */ +.block { + background: black; +} +.block__element--small { + font-size: 12px; +} + +.block__element--medium { + font-size: 14px; +} + +.block__element--large { + font-size: 16px; +} + +/* END_OUTPUT */ +/* EXPECTED */ +.block { + background: black; +} + +.block__element--small { + font-size: 12px; +} + +.block__element--medium { + font-size: 14px; +} + +.block__element--large { + font-size: 16px; +} + +/* END_EXPECTED */ +/* END_ASSERT */ +/* */ +/* Test: creates negating block__element--modifier classes */ +/* ASSERT: */ +/* OUTPUT */ +.block__element--small:not(.block__element--circle) { + background: blue; +} + +/* END_OUTPUT */ +/* EXPECTED */ +.block__element--small:not(.block__element--circle) { + background: blue; +} + +/* END_EXPECTED */ +/* END_ASSERT */ +/* */ +/* Test: creates multiple element modifier classes using the element mixin */ +/* ASSERT: */ +/* OUTPUT */ +.block { + background: black; +} +.block__element--small.block__element--pink { + color: pink; + font-size: 12px; +} + +/* END_OUTPUT */ +/* EXPECTED */ +.block { + background: black; +} + +.block__element--small.block__element--pink { + color: pink; + font-size: 12px; +} + +/* END_EXPECTED */ +/* END_ASSERT */ +/* */ +/* Test: creates multiple negating element modifier classes */ +/* ASSERT: */ +/* OUTPUT */ +.block__element--small.block__element--pink:not(.block__element--circle, .block__element--large) { + color: pink; + font-size: 12px; +} + +/* END_OUTPUT */ +/* EXPECTED */ +.block__element--small.block__element--pink:not(.block__element--circle, .block__element--large) { + color: pink; + font-size: 12px; +} + +/* END_EXPECTED */ +/* END_ASSERT */ +/* */ +/* Test: overwrites element styles in a modified block */ +/* ASSERT: */ +/* OUTPUT */ +.block { + background: black; +} +.block__element { + color: wheat; +} + +.block--error { + background: red; +} +.block--error .block__element { + color: white; +} + +/* END_OUTPUT */ +/* EXPECTED */ +.block { + background: black; +} + +.block__element { + color: wheat; +} + +.block--error { + background: red; +} + +.block--error .block__element { + color: white; +} + +/* END_EXPECTED */ +/* END_ASSERT */ +/* */ +/* Test: creates negating modifier classes using the mod and mods mixins */ +/* ASSERT: */ +/* OUTPUT */ +.block--checked:not(.block--disabled, .block--indeterminate) { + background: pink; +} + +.block--disabled:not(.block--checked) { + background: gray; +} +.block--disabled:not(.block--checked) .block__element { + color: darkgray; +} + +.block--disabled.block--checked:not(.block--indeterminate) { + background: darkgray; +} + +.block--disabled.block--checked:not(.block--indeterminate, .block--invalid) { + background: black; +} +.block--disabled.block--checked:not(.block--indeterminate, .block--invalid) .block__element { + color: red; +} + +.block--disabled.block--checked:not(.block--indeterminate, .block--invalid) .block__element--orange { + color: orange; +} + +.block--disabled.block--checked:not(.block--indeterminate, .block--invalid) .block__element--rebecca.block__element--purple { + color: rebeccapurple; +} + +/* END_OUTPUT */ +/* EXPECTED */ +.block--checked:not(.block--disabled, .block--indeterminate) { + background: pink; +} + +.block--disabled:not(.block--checked) { + background: gray; +} + +.block--disabled:not(.block--checked) .block__element { + color: darkgray; +} + +.block--disabled.block--checked:not(.block--indeterminate) { + background: darkgray; +} + +.block--disabled.block--checked:not(.block--indeterminate, .block--invalid) { + background: black; +} + +.block--disabled.block--checked:not(.block--indeterminate, .block--invalid) .block__element { + color: red; +} + +.block--disabled.block--checked:not(.block--indeterminate, .block--invalid) .block__element--orange { + color: orange; +} + +.block--disabled.block--checked:not(.block--indeterminate, .block--invalid) .block__element--rebecca.block__element--purple { + color: rebeccapurple; +} + +/* END_EXPECTED */ +/* END_ASSERT */ +/* */ +/* Test: creates element selector inside an attribute selector context */ +/* ASSERT: */ +/* OUTPUT */ +.block[aria-selected=false] .block__element { + display: none; +} + +/* END_OUTPUT */ +/* EXPECTED */ +.block[aria-selected=false] .block__element { + display: none; +} + +/* END_EXPECTED */ +/* END_ASSERT */ +/* */ +/* Test: creates element--modifier selector inside an attribute selector context */ +/* ASSERT: */ +/* OUTPUT */ +.block[aria-selected=false] .block__element--active { + display: block; +} + +/* END_OUTPUT */ +/* EXPECTED */ +.block[aria-selected=false] .block__element--active { + display: block; +} + +/* END_EXPECTED */ +/* END_ASSERT */ +/* */ +/* Test: creates multiple element modifier selectors inside an attribute selector context */ +/* ASSERT: */ +/* OUTPUT */ +.block[aria-selected=false] .block__element--small.block__element--pink { + font-size: 12px; +} + +/* END_OUTPUT */ +/* EXPECTED */ +.block[aria-selected=false] .block__element--small.block__element--pink { + font-size: 12px; +} + +/* END_EXPECTED */ +/* END_ASSERT */ +/* */ +/* Test: creates element selector inside a descendant attribute selector context */ +/* ASSERT: */ +/* OUTPUT */ +.block [aria-selected=true] .block__element { + display: block; +} + +.block [aria-selected=false] .block__element { + display: none; +} + +/* END_OUTPUT */ +/* EXPECTED */ +.block [aria-selected=true] .block__element { + display: block; +} + +.block [aria-selected=false] .block__element { + display: none; +} + +/* END_EXPECTED */ +/* END_ASSERT */ +/* */ +/* Test: should be able to use element classes in modifier body rules */ +/* ASSERT: */ +/* OUTPUT */ +.block__element--circle { + border-radius: 50%; +} + +.block--checked:has(.block__element--circle) { + background: pink; +} + +/* END_OUTPUT */ +/* EXPECTED */ +.block__element--circle { + border-radius: 50%; +} + +.block--checked:has(.block__element--circle) { + background: pink; +} + +/* END_EXPECTED */ +/* END_ASSERT */ +/* */ +/* */ diff --git a/_to_delete/theming-tmp2/perf.css b/_to_delete/theming-tmp2/perf.css new file mode 100644 index 00000000..4eff3884 --- /dev/null +++ b/_to_delete/theming-tmp2/perf.css @@ -0,0 +1,242 @@ +:root { + --ig-wcag-a: 0.31; + --ig-wcag-aa: 0.185; + --ig-wcag-aaa: 0.178; + --ig-contrast-level: var(--ig-wcag-aa); + --y: clamp(0, (y / var(--ig-contrast-level) - 1) * -infinity, 1); + --y-contrast: xyz-d65 var(--y) var(--y) var(--y); +} +:root { + --ig-primary-50: rgb(226, 237, 251); + --ig-primary-50-contrast: hsla(from color(from var(--ig-primary-50) var(--y-contrast)) h 0 l/1); + --ig-primary-100: rgb(172, 207, 251); + --ig-primary-100-contrast: hsla(from color(from var(--ig-primary-100) var(--y-contrast)) h 0 l/1); + --ig-primary-200: rgb(117, 180, 250); + --ig-primary-200-contrast: hsla(from color(from var(--ig-primary-200) var(--y-contrast)) h 0 l/1); + --ig-primary-300: rgb(67, 155, 239); + --ig-primary-300-contrast: hsla(from color(from var(--ig-primary-300) var(--y-contrast)) h 0 l/1); + --ig-primary-400: rgb(27, 131, 214); + --ig-primary-400-contrast: hsla(from color(from var(--ig-primary-400) var(--y-contrast)) h 0 l/1); + --ig-primary-500: rgb(9, 109, 183); + --ig-primary-500-contrast: hsla(from color(from var(--ig-primary-500) var(--y-contrast)) h 0 l/1); + --ig-primary-600: rgb(6, 89, 150); + --ig-primary-600-contrast: hsla(from color(from var(--ig-primary-600) var(--y-contrast)) h 0 l/1); + --ig-primary-700: rgb(11, 69, 116); + --ig-primary-700-contrast: hsla(from color(from var(--ig-primary-700) var(--y-contrast)) h 0 l/1); + --ig-primary-800: rgb(12, 48, 80); + --ig-primary-800-contrast: hsla(from color(from var(--ig-primary-800) var(--y-contrast)) h 0 l/1); + --ig-primary-900: rgb(6, 22, 37); + --ig-primary-900-contrast: hsla(from color(from var(--ig-primary-900) var(--y-contrast)) h 0 l/1); + --ig-primary-seed: #09f; + --ig-primary-seed-contrast: hsla(from color(from var(--ig-primary-seed) var(--y-contrast)) h 0 l/1); + --ig-primary-A100: rgb(191, 221, 255); + --ig-primary-A100-contrast: hsla(from color(from var(--ig-primary-A100) var(--y-contrast)) h 0 l/1); + --ig-primary-A200: rgb(73, 164, 255); + --ig-primary-A200-contrast: hsla(from color(from var(--ig-primary-A200) var(--y-contrast)) h 0 l/1); + --ig-primary-A400: rgb(4, 127, 213); + --ig-primary-A400-contrast: hsla(from color(from var(--ig-primary-A400) var(--y-contrast)) h 0 l/1); + --ig-primary-A700: rgb(0, 100, 169); + --ig-primary-A700-contrast: hsla(from color(from var(--ig-primary-A700) var(--y-contrast)) h 0 l/1); + --ig-secondary-50: rgb(254, 230, 235); + --ig-secondary-50-contrast: hsla(from color(from var(--ig-secondary-50) var(--y-contrast)) h 0 l/1); + --ig-secondary-100: rgb(255, 186, 205); + --ig-secondary-100-contrast: hsla(from color(from var(--ig-secondary-100) var(--y-contrast)) h 0 l/1); + --ig-secondary-200: rgb(255, 141, 177); + --ig-secondary-200-contrast: hsla(from color(from var(--ig-secondary-200) var(--y-contrast)) h 0 l/1); + --ig-secondary-300: rgb(253, 92, 150); + --ig-secondary-300-contrast: hsla(from color(from var(--ig-secondary-300) var(--y-contrast)) h 0 l/1); + --ig-secondary-400: rgb(233, 52, 126); + --ig-secondary-400-contrast: hsla(from color(from var(--ig-secondary-400) var(--y-contrast)) h 0 l/1); + --ig-secondary-500: rgb(203, 23, 105); + --ig-secondary-500-contrast: hsla(from color(from var(--ig-secondary-500) var(--y-contrast)) h 0 l/1); + --ig-secondary-600: rgb(168, 13, 85); + --ig-secondary-600-contrast: hsla(from color(from var(--ig-secondary-600) var(--y-contrast)) h 0 l/1); + --ig-secondary-700: rgb(131, 16, 66); + --ig-secondary-700-contrast: hsla(from color(from var(--ig-secondary-700) var(--y-contrast)) h 0 l/1); + --ig-secondary-800: rgb(91, 17, 46); + --ig-secondary-800-contrast: hsla(from color(from var(--ig-secondary-800) var(--y-contrast)) h 0 l/1); + --ig-secondary-900: rgb(43, 9, 21); + --ig-secondary-900-contrast: hsla(from color(from var(--ig-secondary-900) var(--y-contrast)) h 0 l/1); + --ig-secondary-seed: #df1b74; + --ig-secondary-seed-contrast: hsla(from color(from var(--ig-secondary-seed) var(--y-contrast)) h 0 l/1); + --ig-secondary-A100: rgb(255, 205, 220); + --ig-secondary-A100-contrast: hsla(from color(from var(--ig-secondary-A100) var(--y-contrast)) h 0 l/1); + --ig-secondary-A200: rgb(255, 112, 163); + --ig-secondary-A200-contrast: hsla(from color(from var(--ig-secondary-A200) var(--y-contrast)) h 0 l/1); + --ig-secondary-A400: rgb(236, 25, 123); + --ig-secondary-A400-contrast: hsla(from color(from var(--ig-secondary-A400) var(--y-contrast)) h 0 l/1); + --ig-secondary-A700: rgb(191, 1, 96); + --ig-secondary-A700-contrast: hsla(from color(from var(--ig-secondary-A700) var(--y-contrast)) h 0 l/1); + --ig-gray-50: rgb(248, 248, 248); + --ig-gray-50-contrast: hsla(from color(from var(--ig-gray-50) var(--y-contrast)) h 0 l/1); + --ig-gray-100: rgb(244, 244, 244); + --ig-gray-100-contrast: hsla(from color(from var(--ig-gray-100) var(--y-contrast)) h 0 l/1); + --ig-gray-200: rgb(233, 233, 233); + --ig-gray-200-contrast: hsla(from color(from var(--ig-gray-200) var(--y-contrast)) h 0 l/1); + --ig-gray-300: rgb(215, 215, 215); + --ig-gray-300-contrast: hsla(from color(from var(--ig-gray-300) var(--y-contrast)) h 0 l/1); + --ig-gray-400: rgb(190, 190, 190); + --ig-gray-400-contrast: hsla(from color(from var(--ig-gray-400) var(--y-contrast)) h 0 l/1); + --ig-gray-500: rgb(162, 162, 162); + --ig-gray-500-contrast: hsla(from color(from var(--ig-gray-500) var(--y-contrast)) h 0 l/1); + --ig-gray-600: rgb(130, 130, 130); + --ig-gray-600-contrast: hsla(from color(from var(--ig-gray-600) var(--y-contrast)) h 0 l/1); + --ig-gray-700: rgb(97, 97, 97); + --ig-gray-700-contrast: hsla(from color(from var(--ig-gray-700) var(--y-contrast)) h 0 l/1); + --ig-gray-800: rgb(64, 64, 64); + --ig-gray-800-contrast: hsla(from color(from var(--ig-gray-800) var(--y-contrast)) h 0 l/1); + --ig-gray-900: rgb(31, 31, 31); + --ig-gray-900-contrast: hsla(from color(from var(--ig-gray-900) var(--y-contrast)) h 0 l/1); + --ig-gray-seed: #333; + --ig-gray-seed-contrast: hsla(from color(from var(--ig-gray-seed) var(--y-contrast)) h 0 l/1); + --ig-surface-50: rgb(253, 253, 253); + --ig-surface-50-contrast: hsla(from color(from var(--ig-surface-50) var(--y-contrast)) h 0 l/1); + --ig-surface-100: rgb(253, 253, 253); + --ig-surface-100-contrast: hsla(from color(from var(--ig-surface-100) var(--y-contrast)) h 0 l/1); + --ig-surface-200: rgb(253, 253, 253); + --ig-surface-200-contrast: hsla(from color(from var(--ig-surface-200) var(--y-contrast)) h 0 l/1); + --ig-surface-300: rgb(252, 252, 253); + --ig-surface-300-contrast: hsla(from color(from var(--ig-surface-300) var(--y-contrast)) h 0 l/1); + --ig-surface-400: rgb(252, 252, 253); + --ig-surface-400-contrast: hsla(from color(from var(--ig-surface-400) var(--y-contrast)) h 0 l/1); + --ig-surface-500: rgb(252, 252, 253); + --ig-surface-500-contrast: hsla(from color(from var(--ig-surface-500) var(--y-contrast)) h 0 l/1); + --ig-surface-600: rgb(227, 227, 227); + --ig-surface-600-contrast: hsla(from color(from var(--ig-surface-600) var(--y-contrast)) h 0 l/1); + --ig-surface-700: rgb(204, 204, 204); + --ig-surface-700-contrast: hsla(from color(from var(--ig-surface-700) var(--y-contrast)) h 0 l/1); + --ig-surface-800: rgb(183, 183, 183); + --ig-surface-800-contrast: hsla(from color(from var(--ig-surface-800) var(--y-contrast)) h 0 l/1); + --ig-surface-900: rgb(163, 163, 163); + --ig-surface-900-contrast: hsla(from color(from var(--ig-surface-900) var(--y-contrast)) h 0 l/1); + --ig-surface-seed: #fcfcfd; + --ig-surface-seed-contrast: hsla(from color(from var(--ig-surface-seed) var(--y-contrast)) h 0 l/1); + --ig-surface-A100: rgb(216, 216, 216); + --ig-surface-A100-contrast: hsla(from color(from var(--ig-surface-A100) var(--y-contrast)) h 0 l/1); + --ig-surface-A200: rgb(158, 158, 158); + --ig-surface-A200-contrast: hsla(from color(from var(--ig-surface-A200) var(--y-contrast)) h 0 l/1); + --ig-surface-A400: rgb(122, 122, 122); + --ig-surface-A400-contrast: hsla(from color(from var(--ig-surface-A400) var(--y-contrast)) h 0 l/1); + --ig-surface-A700: rgb(95, 95, 95); + --ig-surface-A700-contrast: hsla(from color(from var(--ig-surface-A700) var(--y-contrast)) h 0 l/1); + --ig-info-50: rgb(227, 236, 251); + --ig-info-50-contrast: hsla(from color(from var(--ig-info-50) var(--y-contrast)) h 0 l/1); + --ig-info-100: rgb(176, 207, 251); + --ig-info-100-contrast: hsla(from color(from var(--ig-info-100) var(--y-contrast)) h 0 l/1); + --ig-info-200: rgb(124, 179, 252); + --ig-info-200-contrast: hsla(from color(from var(--ig-info-200) var(--y-contrast)) h 0 l/1); + --ig-info-300: rgb(75, 152, 245); + --ig-info-300-contrast: hsla(from color(from var(--ig-info-300) var(--y-contrast)) h 0 l/1); + --ig-info-400: rgb(34, 129, 223); + --ig-info-400-contrast: hsla(from color(from var(--ig-info-400) var(--y-contrast)) h 0 l/1); + --ig-info-500: rgb(13, 107, 193); + --ig-info-500-contrast: hsla(from color(from var(--ig-info-500) var(--y-contrast)) h 0 l/1); + --ig-info-600: rgb(7, 87, 159); + --ig-info-600-contrast: hsla(from color(from var(--ig-info-600) var(--y-contrast)) h 0 l/1); + --ig-info-700: rgb(10, 68, 123); + --ig-info-700-contrast: hsla(from color(from var(--ig-info-700) var(--y-contrast)) h 0 l/1); + --ig-info-800: rgb(12, 47, 85); + --ig-info-800-contrast: hsla(from color(from var(--ig-info-800) var(--y-contrast)) h 0 l/1); + --ig-info-900: rgb(6, 22, 40); + --ig-info-900-contrast: hsla(from color(from var(--ig-info-900) var(--y-contrast)) h 0 l/1); + --ig-info-seed: #1377d5; + --ig-info-seed-contrast: hsla(from color(from var(--ig-info-seed) var(--y-contrast)) h 0 l/1); + --ig-info-A100: rgb(194, 220, 255); + --ig-info-A100-contrast: hsla(from color(from var(--ig-info-A100) var(--y-contrast)) h 0 l/1); + --ig-info-A200: rgb(87, 163, 255); + --ig-info-A200-contrast: hsla(from color(from var(--ig-info-A200) var(--y-contrast)) h 0 l/1); + --ig-info-A400: rgb(10, 124, 225); + --ig-info-A400-contrast: hsla(from color(from var(--ig-info-A400) var(--y-contrast)) h 0 l/1); + --ig-info-A700: rgb(0, 97, 180); + --ig-info-A700-contrast: hsla(from color(from var(--ig-info-A700) var(--y-contrast)) h 0 l/1); + --ig-success-50: rgb(203, 247, 207); + --ig-success-50-contrast: hsla(from color(from var(--ig-success-50) var(--y-contrast)) h 0 l/1); + --ig-success-100: rgb(127, 225, 142); + --ig-success-100-contrast: hsla(from color(from var(--ig-success-100) var(--y-contrast)) h 0 l/1); + --ig-success-200: rgb(94, 197, 112); + --ig-success-200-contrast: hsla(from color(from var(--ig-success-200) var(--y-contrast)) h 0 l/1); + --ig-success-300: rgb(73, 169, 91); + --ig-success-300-contrast: hsla(from color(from var(--ig-success-300) var(--y-contrast)) h 0 l/1); + --ig-success-400: rgb(59, 144, 75); + --ig-success-400-contrast: hsla(from color(from var(--ig-success-400) var(--y-contrast)) h 0 l/1); + --ig-success-500: rgb(48, 120, 62); + --ig-success-500-contrast: hsla(from color(from var(--ig-success-500) var(--y-contrast)) h 0 l/1); + --ig-success-600: rgb(39, 98, 50); + --ig-success-600-contrast: hsla(from color(from var(--ig-success-600) var(--y-contrast)) h 0 l/1); + --ig-success-700: rgb(32, 76, 39); + --ig-success-700-contrast: hsla(from color(from var(--ig-success-700) var(--y-contrast)) h 0 l/1); + --ig-success-800: rgb(24, 53, 28); + --ig-success-800-contrast: hsla(from color(from var(--ig-success-800) var(--y-contrast)) h 0 l/1); + --ig-success-900: rgb(11, 24, 12); + --ig-success-900-contrast: hsla(from color(from var(--ig-success-900) var(--y-contrast)) h 0 l/1); + --ig-success-seed: #4eb862; + --ig-success-seed-contrast: hsla(from color(from var(--ig-success-seed) var(--y-contrast)) h 0 l/1); + --ig-success-A100: rgb(51, 250, 108); + --ig-success-A100-contrast: hsla(from color(from var(--ig-success-A100) var(--y-contrast)) h 0 l/1); + --ig-success-A200: rgb(0, 186, 71); + --ig-success-A200-contrast: hsla(from color(from var(--ig-success-A200) var(--y-contrast)) h 0 l/1); + --ig-success-A400: rgb(0, 143, 53); + --ig-success-A400-contrast: hsla(from color(from var(--ig-success-A400) var(--y-contrast)) h 0 l/1); + --ig-success-A700: rgb(0, 113, 40); + --ig-success-A700-contrast: hsla(from color(from var(--ig-success-A700) var(--y-contrast)) h 0 l/1); + --ig-warn-50: rgb(251, 233, 213); + --ig-warn-50-contrast: hsla(from color(from var(--ig-warn-50) var(--y-contrast)) h 0 l/1); + --ig-warn-100: rgb(247, 195, 133); + --ig-warn-100-contrast: hsla(from color(from var(--ig-warn-100) var(--y-contrast)) h 0 l/1); + --ig-warn-200: rgb(233, 162, 65); + --ig-warn-200-contrast: hsla(from color(from var(--ig-warn-200) var(--y-contrast)) h 0 l/1); + --ig-warn-300: rgb(206, 135, 24); + --ig-warn-300-contrast: hsla(from color(from var(--ig-warn-300) var(--y-contrast)) h 0 l/1); + --ig-warn-400: rgb(177, 114, 4); + --ig-warn-400-contrast: hsla(from color(from var(--ig-warn-400) var(--y-contrast)) h 0 l/1); + --ig-warn-500: rgb(149, 94, 1); + --ig-warn-500-contrast: hsla(from color(from var(--ig-warn-500) var(--y-contrast)) h 0 l/1); + --ig-warn-600: rgb(121, 77, 4); + --ig-warn-600-contrast: hsla(from color(from var(--ig-warn-600) var(--y-contrast)) h 0 l/1); + --ig-warn-700: rgb(94, 60, 9); + --ig-warn-700-contrast: hsla(from color(from var(--ig-warn-700) var(--y-contrast)) h 0 l/1); + --ig-warn-800: rgb(65, 42, 11); + --ig-warn-800-contrast: hsla(from color(from var(--ig-warn-800) var(--y-contrast)) h 0 l/1); + --ig-warn-900: rgb(30, 19, 6); + --ig-warn-900-contrast: hsla(from color(from var(--ig-warn-900) var(--y-contrast)) h 0 l/1); + --ig-warn-seed: #faa419; + --ig-warn-seed-contrast: hsla(from color(from var(--ig-warn-seed) var(--y-contrast)) h 0 l/1); + --ig-warn-A100: rgb(255, 211, 156); + --ig-warn-A100-contrast: hsla(from color(from var(--ig-warn-A100) var(--y-contrast)) h 0 l/1); + --ig-warn-A200: rgb(222, 144, 3); + --ig-warn-A200-contrast: hsla(from color(from var(--ig-warn-A200) var(--y-contrast)) h 0 l/1); + --ig-warn-A400: rgb(172, 110, 0); + --ig-warn-A400-contrast: hsla(from color(from var(--ig-warn-A400) var(--y-contrast)) h 0 l/1); + --ig-warn-A700: rgb(136, 86, 0); + --ig-warn-A700-contrast: hsla(from color(from var(--ig-warn-A700) var(--y-contrast)) h 0 l/1); + --ig-error-50: rgb(254, 230, 230); + --ig-error-50-contrast: hsla(from color(from var(--ig-error-50) var(--y-contrast)) h 0 l/1); + --ig-error-100: rgb(255, 187, 187); + --ig-error-100-contrast: hsla(from color(from var(--ig-error-100) var(--y-contrast)) h 0 l/1); + --ig-error-200: rgb(255, 144, 147); + --ig-error-200-contrast: hsla(from color(from var(--ig-error-200) var(--y-contrast)) h 0 l/1); + --ig-error-300: rgb(254, 97, 109); + --ig-error-300-contrast: hsla(from color(from var(--ig-error-300) var(--y-contrast)) h 0 l/1); + --ig-error-400: rgb(236, 56, 81); + --ig-error-400-contrast: hsla(from color(from var(--ig-error-400) var(--y-contrast)) h 0 l/1); + --ig-error-500: rgb(207, 27, 62); + --ig-error-500-contrast: hsla(from color(from var(--ig-error-500) var(--y-contrast)) h 0 l/1); + --ig-error-600: rgb(172, 15, 48); + --ig-error-600-contrast: hsla(from color(from var(--ig-error-600) var(--y-contrast)) h 0 l/1); + --ig-error-700: rgb(134, 17, 38); + --ig-error-700-contrast: hsla(from color(from var(--ig-error-700) var(--y-contrast)) h 0 l/1); + --ig-error-800: rgb(93, 17, 27); + --ig-error-800-contrast: hsla(from color(from var(--ig-error-800) var(--y-contrast)) h 0 l/1); + --ig-error-900: rgb(44, 9, 12); + --ig-error-900-contrast: hsla(from color(from var(--ig-error-900) var(--y-contrast)) h 0 l/1); + --ig-error-seed: #ff134a; + --ig-error-seed-contrast: hsla(from color(from var(--ig-error-seed) var(--y-contrast)) h 0 l/1); + --ig-error-A100: rgb(255, 206, 206); + --ig-error-A100-contrast: hsla(from color(from var(--ig-error-A100) var(--y-contrast)) h 0 l/1); + --ig-error-A200: rgb(255, 117, 125); + --ig-error-A200-contrast: hsla(from color(from var(--ig-error-A200) var(--y-contrast)) h 0 l/1); + --ig-error-A400: rgb(240, 31, 72); + --ig-error-A400-contrast: hsla(from color(from var(--ig-error-A400) var(--y-contrast)) h 0 l/1); + --ig-error-A700: rgb(195, 1, 53); + --ig-error-A700-contrast: hsla(from color(from var(--ig-error-A700) var(--y-contrast)) h 0 l/1); +} diff --git a/_to_delete/theming-tmp2/perf.scss b/_to_delete/theming-tmp2/perf.scss new file mode 100644 index 00000000..e461c9a0 --- /dev/null +++ b/_to_delete/theming-tmp2/perf.scss @@ -0,0 +1,3 @@ +@use '../sass/color' as *; +$p: palette($primary: #09f, $secondary: #df1b74, $surface: #fcfcfd, $gray: #333); +:root { @include palette($p); } diff --git a/_to_delete/theming-tmp2/s1.scss b/_to_delete/theming-tmp2/s1.scss new file mode 100644 index 00000000..67c38ada --- /dev/null +++ b/_to_delete/theming-tmp2/s1.scss @@ -0,0 +1,8 @@ +@use '../sass/color' as *; +$light: palette($primary: #09f, $secondary: #09f, $surface: #fff); +$off: palette($primary: #09f, $secondary: #09f, $surface: #f5f6f8); +$dark: palette($primary: #09f, $secondary: #09f, $surface: #1a1a24); +$V: ('50','100','200','300','400','500','600','700','800','900'); +surface-white { @each $v in $V { #{$v}: color($light, surface, $v); } } +surface-offwhite { @each $v in $V { #{$v}: color($off, surface, $v); } } +surface-dark { @each $v in $V { #{$v}: color($dark, surface, $v); } } diff --git a/_to_delete/theming-tmp2/s2.css b/_to_delete/theming-tmp2/s2.css new file mode 100644 index 00000000..9b39c384 --- /dev/null +++ b/_to_delete/theming-tmp2/s2.css @@ -0,0 +1,77 @@ +gray-light { + 50: #fbfbfb; + 100: #f7f7f7; + 200: #ececec; + 300: #d9d9d9; + 400: #c1c1c1; + 500: #a4a4a4; + 600: #848484; + 700: #636363; + 800: #424242; + 900: #212121; +} + +gray-dark { + 50: #1e1e1e; + 100: #212121; + 200: #292929; + 300: #353535; + 400: #454545; + 500: #5a5a5a; + 600: #757575; + 700: #989898; + 800: #c6c6c6; + 900: #f7f7f7; +} + +surface-white { + 50: white; + 100: white; + 200: white; + 300: white; + 400: white; + 500: white; + 600: #e5e5e5; + 700: #cecece; + 800: #b9b9b9; + 900: #a5a5a5; +} + +surface-off { + 50: #fdfdfd; + 100: #fdfdfd; + 200: #fbfbfb; + 300: #f9f9f9; + 400: #f8f8f8; + 500: #f5f6f8; + 600: #dddddd; + 700: #c7c7c7; + 800: #b2b2b2; + 900: #9f9f9f; +} + +surface-dark { + 50: #686868; + 100: #595959; + 200: #4b4b4b; + 300: #3c3c3c; + 400: #2d2d2d; + 500: #1a1a24; + 600: #161616; + 700: #101010; + 800: #080808; + 900: black; +} + +primary-light { + 50: #e2edfb; + 100: #accffb; + 200: #75b4fa; + 300: #439bef; + 400: #1b83d6; + 500: #096db7; + 600: #065996; + 700: #0b4574; + 800: #0c3050; + 900: #061625; +} diff --git a/_to_delete/theming-tmp2/s2.scss b/_to_delete/theming-tmp2/s2.scss new file mode 100644 index 00000000..f3cd6653 --- /dev/null +++ b/_to_delete/theming-tmp2/s2.scss @@ -0,0 +1,11 @@ +@use '../sass/color' as *; +$V: ('50','100','200','300','400','500','600','700','800','900'); +$light: palette($primary: #09f, $secondary: #09f, $surface: #fff, $gray: #333); +$off: palette($primary: #09f, $secondary: #09f, $surface: #f5f6f8, $gray: #333); +$dark: palette($primary: #09f, $secondary: #09f, $surface: #1a1a24, $gray: #dcdce4); +gray-light { @each $v in $V { #{$v}: color($light, gray, $v); } } +gray-dark { @each $v in $V { #{$v}: color($dark, gray, $v); } } +surface-white { @each $v in $V { #{$v}: color($light, surface, $v); } } +surface-off { @each $v in $V { #{$v}: color($off, surface, $v); } } +surface-dark { @each $v in $V { #{$v}: color($dark, surface, $v); } } +primary-light { @each $v in $V { #{$v}: color($light, primary, $v); } } diff --git a/_to_delete/theming-tmp2/s3.scss b/_to_delete/theming-tmp2/s3.scss new file mode 100644 index 00000000..e195eac0 --- /dev/null +++ b/_to_delete/theming-tmp2/s3.scss @@ -0,0 +1,3 @@ +@use '../sass/color' as *; +$p: palette($primary: #09f, $secondary: #df1b74, $surface: #fcfcfd, $gray: #333); +:root { @include palette($p, $contrast: false); } diff --git a/_to_delete/theming-tmp2/shades.html b/_to_delete/theming-tmp2/shades.html new file mode 100644 index 00000000..291aa151 --- /dev/null +++ b/_to_delete/theming-tmp2/shades.html @@ -0,0 +1,380 @@ + + +Shade generators +
+

Shade generators, side by side

+

Compiled from the library. Numbers are WCAG contrast against white for color ramps, +and against the surface for the neutral and surface families. Every value is a concrete color — +the generator resolves them at build time.

+
Build warnings
The "surface" seed #fff leaves no room for shades 50 100 200 300 400
The "surface" seed #ffffff leaves no room for shades 50 100 200 300 400
+ +

Color ramps

+ +
+

Framework primary

#0099ff + lands on 300
+
+ +
+

gamut-relative

+
50
100
200
300
400
500
600
700
800
900
+ +
+ +
+

legacy

+
50
100
200
300
400
500
600
700
800
900
+ +
+
+
+

accent track

A100
A200
A400
A700
+

legacy accents

A100
A200
A400
A700
+
+
+
+

Framework secondary

#df1b74 + lands on 400
+
+ +
+

gamut-relative

+
50
100
200
300
400
500
600
700
800
900
+ +
+ +
+

legacy

+
50
100
200
300
400
500
600
700
800
900
+ +
+
+
+

accent track

A100
A200
A400
A700
+

legacy accents

A100
A200
A400
A700
+
+
+
+

Warn

#faa419 + lands on 200
+
+ +
+

gamut-relative

+
50
100
200
300
400
500
600
700
800
900
+ +
+ +
+

legacy

+
50
100
200
300
400
500
600
700
800
900
+ +
+
+
+

accent track

A100
A200
A400
A700
+

legacy accents

A100
A200
A400
A700
+
+
+
+

Success

#4eb862 + lands on 200
+
+ +
+

gamut-relative

+
50
100
200
300
400
500
600
700
800
900
+ +
+ +
+

legacy

+
50
100
200
300
400
500
600
700
800
900
+ +
+
+
+

accent track

A100
A200
A400
A700
+

legacy accents

A100
A200
A400
A700
+
+
+
+

Near-white seed

#ffe9b0 + lands on 50
+
+ +
+

gamut-relative

+
50
100
200
300
400
500
600
700
800
900
+ +
+ +
+

legacy

+
50
100
200
300
400
500
600
700
800
900
+ +
+
+
+

accent track

A100
A200
A400
A700
+

legacy accents

A100
A200
A400
A700
+
+
+
+

Near-black seed

#141225 + lands on 900
+
+ +
+

gamut-relative

+
50
100
200
300
400
500
600
700
800
900
+ +
+ +
+

legacy

+
50
100
200
300
400
500
600
700
800
900
+ +
+
+
+

accent track

A100
A200
A400
A700
+

legacy accents

A100
A200
A400
A700
+
+
+
+

Neon

#00ff00 + lands on 100
+
+ +
+

gamut-relative

+
50
100
200
300
400
500
600
700
800
900
+ +
+ +
+

legacy

+
50
100
200
300
400
500
600
700
800
900
+ +
+
+
+

accent track

A100
A200
A400
A700
+

legacy accents

A100
A200
A400
A700
+
+
+
+

Washed out

#a99bb0 + lands on 300
+
+ +
+

gamut-relative

+
50
100
200
300
400
500
600
700
800
900
+ +
+ +
+

legacy

+
50
100
200
300
400
500
600
700
800
900
+ +
+
+
+

accent track

A100
A200
A400
A700
+

legacy accents

A100
A200
A400
A700
+
+
+
+

Pure gray

#8a8a8a + lands on 400
+
+ +
+

gamut-relative

+
50
100
200
300
400
500
600
700
800
900
+ +
+ +
+

legacy

+
50
100
200
300
400
500
600
700
800
900
+ +
+
+
+

accent track

A100
A200
A400
A700
+

legacy accents

A100
A200
A400
A700
+
+
+ +

Neutral and surface families

+ +
+

Pure white surface

#ffffff
+
+ +
+

gray · gamut-relative

+
50
100
200
300
400
500
600
700
800
900
+

anchored to the surface, so 50 always sits nearest the background

+
+ +
+

gray · legacy

+
50
100
200
300
400
500
600
700
800
900
+ +
+
+
+ +
+

surface · gamut-relative

+
50
100
200
300
400
500
600
700
800
900
+

500 is the background itself; the rest are layering steps either side of it

+
+ +
+

surface · legacy

+
50
100
200
300
400
500
600
700
800
900
+ +
+
+
+
+

Off-white surface

#f5f6f8
+
+ +
+

gray · gamut-relative

+
50
100
200
300
400
500
600
700
800
900
+

anchored to the surface, so 50 always sits nearest the background

+
+ +
+

gray · legacy

+
50
100
200
300
400
500
600
700
800
900
+ +
+
+
+ +
+

surface · gamut-relative

+
50
100
200
300
400
500
600
700
800
900
+

500 is the background itself; the rest are layering steps either side of it

+
+ +
+

surface · legacy

+
50
100
200
300
400
500
600
700
800
900
+ +
+
+
+
+

Dark surface

#1a1a24
+
+ +
+

gray · gamut-relative

+
50
100
200
300
400
500
600
700
800
900
+

anchored to the surface, so 50 always sits nearest the background

+
+ +
+

gray · legacy

+
50
100
200
300
400
500
600
700
800
900
+ +
+
+
+ +
+

surface · gamut-relative

+
50
100
200
300
400
500
600
700
800
900
+

500 is the background itself; the rest are layering steps either side of it

+
+ +
+

surface · legacy

+
50
100
200
300
400
500
600
700
800
900
+ +
+
+
+ +
Generated by .scripts/previewShades.mjs. The palettes bundled with the library +stay on the legacy generator, so shipped themes are unchanged.
+
+ \ No newline at end of file diff --git a/_to_delete/theming-tmp2/sweep.mjs b/_to_delete/theming-tmp2/sweep.mjs new file mode 100644 index 00000000..b14f1779 --- /dev/null +++ b/_to_delete/theming-tmp2/sweep.mjs @@ -0,0 +1,47 @@ +import * as sass from "sass"; +const ROOT = "."; +const SH = ["50","100","200","300","400","500","600","700","800","900"]; +const SEEDS = ["#0099ff","#df1b74","#faa419","#4eb862","#7c3aed","#e11d48","#0d9488","#a99bb0", + "#00ff00","#ffe9b0","#141225","#8a8a8a","#ff00ff","#00ffff","#123456","#fefefe","#010203","#c0ffee"]; +const SURFACES = ["#ffffff","#fcfcfd","#f5f6f8","#eeeeee","#1a1a24","#000000","#0d1117"]; +const warn = []; +const run = (body) => { + const css = sass.compileString(`@use 'sass:map';\n@use 'sass/color' as *;\n${body}`, + { loadPaths: [ROOT], logger: { warn: (m) => warn.push(m.split(" —")[0]) } }).css; + const o = {}; + for (const l of css.split("\n")) { const m = l.match(/^\s*([\w-]+):\s*(.+);\s*$/); if (m) o[m[1]] = m[2].trim(); } + return o; +}; +const hex = (s) => { const m = s.match(/^#?([0-9a-f]{6})$/i) || s.match(/rgb\((\d+),\s*(\d+),\s*(\d+)\)/i); + if (!m) return null; + return m.length === 2 ? [0,2,4].map(i=>parseInt(m[1].slice(i,i+2),16)) : [1,2,3].map(i=>+m[i]); }; +const lin = v => (v/=255) <= 0.03928 ? v/12.92 : Math.pow((v+0.055)/1.055,2.4); +const lum = ([r,g,b]) => 0.2126*lin(r)+0.7152*lin(g)+0.0722*lin(b); +const cr = (a,b) => { const x=lum(a)+0.05, y=lum(b)+0.05; return Math.max(x,y)/Math.min(x,y); }; + +let aaFail=0, aaTot=0, dupFams=0, famTot=0; +for (const seed of SEEDS) { + const d = run(`$p: palette($primary: ${seed}, $secondary: ${seed}, $surface: #fff, $gray: #333); + $s: map.get($p,'primary'); out { ${SH.map(v=>`s-${v}: #{map.get($s,'${v}-raw')};`).join("")} }`); + const c = SH.map(v => hex(d[`s-${v}`])); + famTot++; + if (new Set(c.map(String)).size !== c.length) { dupFams++; console.log("DUP", seed); } + for (let i=0;i<5;i++){ aaTot++; if (cr(c[i],c[i+5]) < 4.5) { aaFail++; console.log("AA fail", seed, SH[i], SH[i+5], cr(c[i],c[i+5]).toFixed(2)); } } +} +console.log(`\ncolor ramps: ${famTot} seeds | AA 5-rung failures ${aaFail}/${aaTot} | families with duplicate shades ${dupFams}`); + +console.log("\nsurface + gray across surfaces:"); +for (const bg of SURFACES) { + const d = run(`$p: palette($primary: #09f, $secondary: #09f, $surface: ${bg}, $gray: #333); + $g: map.get($p,'gray'); $s: map.get($p,'surface'); + out { ${SH.map(v=>`g-${v}: #{map.get($g,'${v}-raw')};`).join("")} + ${SH.map(v=>`s-${v}: #{map.get($s,'${v}-raw')};`).join("")} + s500: #{map.get($s,'500-raw')}; }`); + const g = SH.map(v=>hex(d[`g-${v}`])), s = SH.map(v=>hex(d[`s-${v}`])); + const bgc = hex(bg); + const uniqG = new Set(g.map(String)).size, uniqS = new Set(s.map(String)).size; + const anchored = String(s[5]) === String(bgc); + const nearest = cr(g[0], bgc) < cr(g[9], bgc); + console.log(` ${bg} gray distinct ${uniqG}/10, 50-nearest-bg ${nearest} | surface distinct ${uniqS}/10, 500==bg ${anchored} span ${cr(s[0],s[9]).toFixed(2)}:1`); +} +console.log("\nwarnings:", [...new Set(warn)].length ? [...new Set(warn)] : "none"); diff --git a/_to_delete/theming-tmp2/tests.css b/_to_delete/theming-tmp2/tests.css new file mode 100644 index 00000000..d57b04c4 --- /dev/null +++ b/_to_delete/theming-tmp2/tests.css @@ -0,0 +1,7969 @@ +@charset "UTF-8"; +/* # Module: Animations */ +/* -------------------- */ +/* Test: should include a keyframe animation only once at the root of the stylesheet */ +/* ASSERT: */ +/* OUTPUT */ +@keyframes test-keyframes { + 0% { + color: red; + } + 100% { + color: blue; + } +} +/* END_OUTPUT */ +/* EXPECTED */ +@keyframes test-keyframes { + 0% { + color: red; + } + 100% { + color: blue; + } +} +/* END_EXPECTED */ +/* END_ASSERT */ +/* */ +/* Test: should include a list of animations using the animation mixin */ +/* ASSERT: */ +/* OUTPUT */ +.test-output { + animation: "test-keyframes" 2s ease-out, "bounce-out" 1s ease-out; +} + +/* END_OUTPUT */ +/* EXPECTED */ +.test-output { + animation: "test-keyframes" 2s ease-out, "bounce-out" 1s ease-out; +} + +/* END_EXPECTED */ +/* END_ASSERT */ +/* */ +/* */ +/* # Module: Color */ +/* --------------- */ +/* # Module: Color :: base */ +/* ----------------------- */ +/* Test: should mix two colors to produce an opaque color */ +/* ✔ [assert-equal] should mix two colors to produce an opaque color */ +/* ✔ [assert-equal] should mix two colors to produce an opaque color */ +/* */ +/* Test: converts a color to a list of HSL values */ +/* ✔ [assert-equal] converts a color to a list of HSL values */ +/* */ +/* */ +/* # Module: Color :: charts */ +/* ------------------------- */ +/* Test: should resolve regular chart brushes */ +/* ✔ [assert-equal] should resolve regular chart brushes */ +/* */ +/* Test: should resolve color-blind chart brushes */ +/* ✔ [assert-equal] should resolve color-blind chart brushes */ +/* */ +/* */ +/* # Module: Color :: contrast */ +/* --------------------------- */ +/* Test: should return an adaptive contrast color from a hex value */ +/* ✔ [assert-equal] should return an adaptive contrast color from a hex value */ +/* */ +/* Test: should return an adaptive contrast color from an hsl value */ +/* ✔ [assert-equal] should return an adaptive contrast color from an hsl value */ +/* */ +/* Test: should return an adaptive contrast color from a CSS variable value */ +/* ✔ [assert-equal] should return an adaptive contrast color from a CSS variable value */ +/* */ +/* Test: should return the passed background value if no valid colors are provided */ +/* ✔ [assert-equal] should return the passed background value if no valid colors are provided */ +/* */ +/* Test: should return black for a white background */ +/* ✔ [assert-equal] should return black for a white background */ +/* */ +/* Test: should return white for a black background */ +/* ✔ [assert-equal] should return white for a black background */ +/* */ +/* Test: should return a contrasting color for a given background regardless of level case */ +/* ✔ [assert-equal] should return a contrasting color for a given background regardless of level case */ +/* ✔ [assert-equal] should return a contrasting color for a given background regardless of level case */ +/* ✔ [assert-equal] should return a contrasting color for a given background regardless of level case */ +/* */ +/* Test: returns the best contrast color from a list of candidates */ +/* ✔ [assert-equal] returns the best contrast color from a list of candidates */ +/* */ +/* Test: should return an AAA contrasting color for a given background */ +/* ✔ [assert-equal] should return an AAA contrasting color for a given background */ +/* */ +/* Test: should return an AA contrasting color for a given background */ +/* ✔ [assert-equal] should return an AA contrasting color for a given background */ +/* */ +/* */ +/* # Module: Color :: palette */ +/* -------------------------- */ +/* Test: should return a shade of type color w/ palette as only argument */ +/* ✔ [assert-equal] should return a shade of type color w/ palette as only argument */ +/* */ +/* Test: should return a shade of type color string w/ palette and color as only arguments */ +/* ✔ [assert-equal] should return a shade of type color string w/ palette and color as only arguments */ +/* */ +/* Test: should return a shade of type string w/ all arguments passed */ +/* ✔ [assert-equal] should return a shade of type string w/ all arguments passed */ +/* ✔ [assert-unequal] should return a shade of type string w/ all arguments passed */ +/* */ +/* Test: should return a shade as CSS variable w/o arguments */ +/* ✔ [assert-equal] should return a shade as CSS variable w/o arguments */ +/* ✔ [assert-equal] should return a shade as CSS variable w/o arguments */ +/* */ +/* Test: should return a shade as CSS variable w/ color as only argument */ +/* ✔ [assert-equal] should return a shade as CSS variable w/ color as only argument */ +/* ✔ [assert-equal] should return a shade as CSS variable w/ color as only argument */ +/* */ +/* Test: should return a shade of type string as CSS var w/ color and variant as only arguments */ +/* ✔ [assert-equal] should return a shade of type string as CSS var w/ color and variant as only arguments */ +/* ✔ [assert-equal] should return a shade of type string as CSS var w/ color and variant as only arguments */ +/* */ +/* Test: should return a contrast shade w/ palette as only argument */ +/* ✔ [assert-equal] should return a contrast shade w/ palette as only argument */ +/* */ +/* Test: should return a contrast shade of type string as CSS var w/ color and variant as only arguments */ +/* ✔ [assert-equal] should return a contrast shade of type string as CSS var w/ color and variant as only arguments */ +/* ✔ [assert-equal] should return a contrast shade of type string as CSS var w/ color and variant as only arguments */ +/* */ +/* Test: should retrieve colors from a palette regadless of type of key */ +/* ✔ [assert-true] should retrieve colors from a palette regadless of type of key */ +/* ✔ [assert-equal] should retrieve colors from a palette regadless of type of key */ +/* ✔ [assert-true] should retrieve colors from a palette regadless of type of key */ +/* ✔ [assert-equal] should retrieve colors from a palette regadless of type of key */ +/* ✔ [assert-true] should retrieve colors from a palette regadless of type of key */ +/* ✔ [assert-equal] should retrieve colors from a palette regadless of type of key */ +/* ✔ [assert-true] should retrieve colors from a palette regadless of type of key */ +/* ✔ [assert-equal] should retrieve colors from a palette regadless of type of key */ +/* */ +/* Test: should generate an HSL color shade from a given base color */ +/* ✔ [assert-equal] should generate an HSL color shade from a given base color */ +/* */ +/* Test: should generate an a contrasting HSL grayscale shade for a given surface color */ +/* ✔ [assert-equal] should generate an a contrasting HSL grayscale shade for a given surface color */ +/* ✔ [assert-equal] should generate an a contrasting HSL grayscale shade for a given surface color */ +/* */ +/* Test: should generate a valid palette */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] map */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] map */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] map */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] map */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] map */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] map */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] map */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] map */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] map */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] string */ +/* */ +/* Test: should generate correct CSS variables for color and grayscale shades in a palette */ +/* ASSERT: */ +/* OUTPUT */ +:root { + --ig-wcag-a: 0.31; + --ig-wcag-aa: 0.185; + --ig-wcag-aaa: 0.178; + --ig-contrast-level: var(--ig-wcag-aa); + --y: clamp(0, (y / var(--ig-contrast-level) - 1) * -infinity, 1); + --y-contrast: xyz-d65 var(--y) var(--y) var(--y); +} + +:root { + --ig-primary-50: rgb(226, 237, 251); + --ig-primary-50-contrast: hsla(from color(from var(--ig-primary-50) var(--y-contrast)) h 0 l/1); + --ig-primary-100: rgb(172, 207, 251); + --ig-primary-100-contrast: hsla(from color(from var(--ig-primary-100) var(--y-contrast)) h 0 l/1); + --ig-primary-200: rgb(117, 180, 250); + --ig-primary-200-contrast: hsla(from color(from var(--ig-primary-200) var(--y-contrast)) h 0 l/1); + --ig-primary-300: rgb(67, 155, 239); + --ig-primary-300-contrast: hsla(from color(from var(--ig-primary-300) var(--y-contrast)) h 0 l/1); + --ig-primary-400: rgb(27, 131, 214); + --ig-primary-400-contrast: hsla(from color(from var(--ig-primary-400) var(--y-contrast)) h 0 l/1); + --ig-primary-500: rgb(9, 109, 183); + --ig-primary-500-contrast: hsla(from color(from var(--ig-primary-500) var(--y-contrast)) h 0 l/1); + --ig-primary-600: rgb(6, 89, 150); + --ig-primary-600-contrast: hsla(from color(from var(--ig-primary-600) var(--y-contrast)) h 0 l/1); + --ig-primary-700: rgb(11, 69, 116); + --ig-primary-700-contrast: hsla(from color(from var(--ig-primary-700) var(--y-contrast)) h 0 l/1); + --ig-primary-800: rgb(12, 48, 80); + --ig-primary-800-contrast: hsla(from color(from var(--ig-primary-800) var(--y-contrast)) h 0 l/1); + --ig-primary-900: rgb(6, 22, 37); + --ig-primary-900-contrast: hsla(from color(from var(--ig-primary-900) var(--y-contrast)) h 0 l/1); + --ig-primary-seed: #09f; + --ig-primary-seed-contrast: hsla(from color(from var(--ig-primary-seed) var(--y-contrast)) h 0 l/1); + --ig-primary-A100: rgb(191, 221, 255); + --ig-primary-A100-contrast: hsla(from color(from var(--ig-primary-A100) var(--y-contrast)) h 0 l/1); + --ig-primary-A200: rgb(73, 164, 255); + --ig-primary-A200-contrast: hsla(from color(from var(--ig-primary-A200) var(--y-contrast)) h 0 l/1); + --ig-primary-A400: rgb(4, 127, 213); + --ig-primary-A400-contrast: hsla(from color(from var(--ig-primary-A400) var(--y-contrast)) h 0 l/1); + --ig-primary-A700: rgb(0, 100, 169); + --ig-primary-A700-contrast: hsla(from color(from var(--ig-primary-A700) var(--y-contrast)) h 0 l/1); + --ig-secondary-50: rgb(240, 235, 245); + --ig-secondary-50-contrast: hsla(from color(from var(--ig-secondary-50) var(--y-contrast)) h 0 l/1); + --ig-secondary-100: rgb(213, 198, 231); + --ig-secondary-100-contrast: hsla(from color(from var(--ig-secondary-100) var(--y-contrast)) h 0 l/1); + --ig-secondary-200: rgb(190, 166, 221); + --ig-secondary-200-contrast: hsla(from color(from var(--ig-secondary-200) var(--y-contrast)) h 0 l/1); + --ig-secondary-300: rgb(168, 136, 211); + --ig-secondary-300-contrast: hsla(from color(from var(--ig-secondary-300) var(--y-contrast)) h 0 l/1); + --ig-secondary-400: rgb(146, 110, 198); + --ig-secondary-400-contrast: hsla(from color(from var(--ig-secondary-400) var(--y-contrast)) h 0 l/1); + --ig-secondary-500: rgb(125, 87, 177); + --ig-secondary-500-contrast: hsla(from color(from var(--ig-secondary-500) var(--y-contrast)) h 0 l/1); + --ig-secondary-600: rgb(103, 69, 150); + --ig-secondary-600-contrast: hsla(from color(from var(--ig-secondary-600) var(--y-contrast)) h 0 l/1); + --ig-secondary-700: rgb(80, 53, 117); + --ig-secondary-700-contrast: hsla(from color(from var(--ig-secondary-700) var(--y-contrast)) h 0 l/1); + --ig-secondary-800: rgb(56, 38, 81); + --ig-secondary-800-contrast: hsla(from color(from var(--ig-secondary-800) var(--y-contrast)) h 0 l/1); + --ig-secondary-900: rgb(25, 17, 38); + --ig-secondary-900-contrast: hsla(from color(from var(--ig-secondary-900) var(--y-contrast)) h 0 l/1); + --ig-secondary-seed: #97c; + --ig-secondary-seed-contrast: hsla(from color(from var(--ig-secondary-seed) var(--y-contrast)) h 0 l/1); + --ig-secondary-A100: rgb(233, 209, 255); + --ig-secondary-A100-contrast: hsla(from color(from var(--ig-secondary-A100) var(--y-contrast)) h 0 l/1); + --ig-secondary-A200: rgb(192, 134, 255); + --ig-secondary-A200-contrast: hsla(from color(from var(--ig-secondary-A200) var(--y-contrast)) h 0 l/1); + --ig-secondary-A400: rgb(163, 75, 255); + --ig-secondary-A400-contrast: hsla(from color(from var(--ig-secondary-A400) var(--y-contrast)) h 0 l/1); + --ig-secondary-A700: rgb(139, 23, 233); + --ig-secondary-A700-contrast: hsla(from color(from var(--ig-secondary-A700) var(--y-contrast)) h 0 l/1); + --ig-gray-50: rgb(251, 251, 251); + --ig-gray-50-contrast: hsla(from color(from var(--ig-gray-50) var(--y-contrast)) h 0 l/1); + --ig-gray-100: rgb(247, 247, 247); + --ig-gray-100-contrast: hsla(from color(from var(--ig-gray-100) var(--y-contrast)) h 0 l/1); + --ig-gray-200: rgb(236, 236, 236); + --ig-gray-200-contrast: hsla(from color(from var(--ig-gray-200) var(--y-contrast)) h 0 l/1); + --ig-gray-300: rgb(217, 217, 217); + --ig-gray-300-contrast: hsla(from color(from var(--ig-gray-300) var(--y-contrast)) h 0 l/1); + --ig-gray-400: rgb(193, 193, 193); + --ig-gray-400-contrast: hsla(from color(from var(--ig-gray-400) var(--y-contrast)) h 0 l/1); + --ig-gray-500: rgb(164, 164, 164); + --ig-gray-500-contrast: hsla(from color(from var(--ig-gray-500) var(--y-contrast)) h 0 l/1); + --ig-gray-600: rgb(132, 132, 132); + --ig-gray-600-contrast: hsla(from color(from var(--ig-gray-600) var(--y-contrast)) h 0 l/1); + --ig-gray-700: rgb(99, 99, 99); + --ig-gray-700-contrast: hsla(from color(from var(--ig-gray-700) var(--y-contrast)) h 0 l/1); + --ig-gray-800: rgb(66, 66, 66); + --ig-gray-800-contrast: hsla(from color(from var(--ig-gray-800) var(--y-contrast)) h 0 l/1); + --ig-gray-900: rgb(33, 33, 33); + --ig-gray-900-contrast: hsla(from color(from var(--ig-gray-900) var(--y-contrast)) h 0 l/1); + --ig-gray-seed: #000; + --ig-gray-seed-contrast: hsla(from color(from var(--ig-gray-seed) var(--y-contrast)) h 0 l/1); + --ig-surface-50: rgb(255, 255, 255); + --ig-surface-50-contrast: hsla(from color(from var(--ig-surface-50) var(--y-contrast)) h 0 l/1); + --ig-surface-100: rgb(255, 255, 255); + --ig-surface-100-contrast: hsla(from color(from var(--ig-surface-100) var(--y-contrast)) h 0 l/1); + --ig-surface-200: rgb(255, 255, 255); + --ig-surface-200-contrast: hsla(from color(from var(--ig-surface-200) var(--y-contrast)) h 0 l/1); + --ig-surface-300: rgb(255, 255, 255); + --ig-surface-300-contrast: hsla(from color(from var(--ig-surface-300) var(--y-contrast)) h 0 l/1); + --ig-surface-400: rgb(255, 255, 255); + --ig-surface-400-contrast: hsla(from color(from var(--ig-surface-400) var(--y-contrast)) h 0 l/1); + --ig-surface-500: rgb(255, 255, 255); + --ig-surface-500-contrast: hsla(from color(from var(--ig-surface-500) var(--y-contrast)) h 0 l/1); + --ig-surface-600: rgb(229, 229, 229); + --ig-surface-600-contrast: hsla(from color(from var(--ig-surface-600) var(--y-contrast)) h 0 l/1); + --ig-surface-700: rgb(206, 206, 206); + --ig-surface-700-contrast: hsla(from color(from var(--ig-surface-700) var(--y-contrast)) h 0 l/1); + --ig-surface-800: rgb(185, 185, 185); + --ig-surface-800-contrast: hsla(from color(from var(--ig-surface-800) var(--y-contrast)) h 0 l/1); + --ig-surface-900: rgb(165, 165, 165); + --ig-surface-900-contrast: hsla(from color(from var(--ig-surface-900) var(--y-contrast)) h 0 l/1); + --ig-surface-seed: #fff; + --ig-surface-seed-contrast: hsla(from color(from var(--ig-surface-seed) var(--y-contrast)) h 0 l/1); + --ig-surface-A100: rgb(218, 218, 218); + --ig-surface-A100-contrast: hsla(from color(from var(--ig-surface-A100) var(--y-contrast)) h 0 l/1); + --ig-surface-A200: rgb(161, 161, 161); + --ig-surface-A200-contrast: hsla(from color(from var(--ig-surface-A200) var(--y-contrast)) h 0 l/1); + --ig-surface-A400: rgb(124, 124, 124); + --ig-surface-A400-contrast: hsla(from color(from var(--ig-surface-A400) var(--y-contrast)) h 0 l/1); + --ig-surface-A700: rgb(97, 97, 97); + --ig-surface-A700-contrast: hsla(from color(from var(--ig-surface-A700) var(--y-contrast)) h 0 l/1); + --ig-info-50: rgb(232, 235, 252); + --ig-info-50-contrast: hsla(from color(from var(--ig-info-50) var(--y-contrast)) h 0 l/1); + --ig-info-100: rgb(190, 203, 253); + --ig-info-100-contrast: hsla(from color(from var(--ig-info-100) var(--y-contrast)) h 0 l/1); + --ig-info-200: rgb(149, 173, 255); + --ig-info-200-contrast: hsla(from color(from var(--ig-info-200) var(--y-contrast)) h 0 l/1); + --ig-info-300: rgb(109, 145, 255); + --ig-info-300-contrast: hsla(from color(from var(--ig-info-300) var(--y-contrast)) h 0 l/1); + --ig-info-400: rgb(70, 117, 255); + --ig-info-400-contrast: hsla(from color(from var(--ig-info-400) var(--y-contrast)) h 0 l/1); + --ig-info-500: rgb(34, 91, 245); + --ig-info-500-contrast: hsla(from color(from var(--ig-info-500) var(--y-contrast)) h 0 l/1); + --ig-info-600: rgb(15, 67, 220); + --ig-info-600-contrast: hsla(from color(from var(--ig-info-600) var(--y-contrast)) h 0 l/1); + --ig-info-700: rgb(7, 50, 180); + --ig-info-700-contrast: hsla(from color(from var(--ig-info-700) var(--y-contrast)) h 0 l/1); + --ig-info-800: rgb(6, 36, 125); + --ig-info-800-contrast: hsla(from color(from var(--ig-info-800) var(--y-contrast)) h 0 l/1); + --ig-info-900: rgb(4, 18, 59); + --ig-info-900-contrast: hsla(from color(from var(--ig-info-900) var(--y-contrast)) h 0 l/1); + --ig-info-seed: blue; + --ig-info-seed-contrast: hsla(from color(from var(--ig-info-seed) var(--y-contrast)) h 0 l/1); + --ig-info-A100: rgb(207, 217, 255); + --ig-info-A100-contrast: hsla(from color(from var(--ig-info-A100) var(--y-contrast)) h 0 l/1); + --ig-info-A200: rgb(124, 156, 255); + --ig-info-A200-contrast: hsla(from color(from var(--ig-info-A200) var(--y-contrast)) h 0 l/1); + --ig-info-A400: rgb(63, 113, 255); + --ig-info-A400-contrast: hsla(from color(from var(--ig-info-A400) var(--y-contrast)) h 0 l/1); + --ig-info-A700: rgb(16, 75, 249); + --ig-info-A700-contrast: hsla(from color(from var(--ig-info-A700) var(--y-contrast)) h 0 l/1); + --ig-success-50: rgb(193, 251, 187); + --ig-success-50-contrast: hsla(from color(from var(--ig-success-50) var(--y-contrast)) h 0 l/1); + --ig-success-100: rgb(93, 231, 86); + --ig-success-100-contrast: hsla(from color(from var(--ig-success-100) var(--y-contrast)) h 0 l/1); + --ig-success-200: rgb(47, 203, 42); + --ig-success-200-contrast: hsla(from color(from var(--ig-success-200) var(--y-contrast)) h 0 l/1); + --ig-success-300: rgb(17, 175, 14); + --ig-success-300-contrast: hsla(from color(from var(--ig-success-300) var(--y-contrast)) h 0 l/1); + --ig-success-400: rgb(1, 148, 1); + --ig-success-400-contrast: hsla(from color(from var(--ig-success-400) var(--y-contrast)) h 0 l/1); + --ig-success-500: rgb(1, 124, 0); + --ig-success-500-contrast: hsla(from color(from var(--ig-success-500) var(--y-contrast)) h 0 l/1); + --ig-success-600: rgb(5, 101, 4); + --ig-success-600-contrast: hsla(from color(from var(--ig-success-600) var(--y-contrast)) h 0 l/1); + --ig-success-700: rgb(11, 78, 9); + --ig-success-700-contrast: hsla(from color(from var(--ig-success-700) var(--y-contrast)) h 0 l/1); + --ig-success-800: rgb(13, 55, 11); + --ig-success-800-contrast: hsla(from color(from var(--ig-success-800) var(--y-contrast)) h 0 l/1); + --ig-success-900: rgb(7, 25, 6); + --ig-success-900-contrast: hsla(from color(from var(--ig-success-900) var(--y-contrast)) h 0 l/1); + --ig-success-seed: green; + --ig-success-seed-contrast: hsla(from color(from var(--ig-success-seed) var(--y-contrast)) h 0 l/1); + --ig-success-A100: rgb(56, 251, 50); + --ig-success-A100-contrast: hsla(from color(from var(--ig-success-A100) var(--y-contrast)) h 0 l/1); + --ig-success-A200: rgb(0, 187, 0); + --ig-success-A200-contrast: hsla(from color(from var(--ig-success-A200) var(--y-contrast)) h 0 l/1); + --ig-success-A400: rgb(0, 144, 0); + --ig-success-A400-contrast: hsla(from color(from var(--ig-success-A400) var(--y-contrast)) h 0 l/1); + --ig-success-A700: rgb(0, 114, 0); + --ig-success-A700-contrast: hsla(from color(from var(--ig-success-A700) var(--y-contrast)) h 0 l/1); + --ig-warn-50: rgb(251, 233, 213); + --ig-warn-50-contrast: hsla(from color(from var(--ig-warn-50) var(--y-contrast)) h 0 l/1); + --ig-warn-100: rgb(247, 195, 133); + --ig-warn-100-contrast: hsla(from color(from var(--ig-warn-100) var(--y-contrast)) h 0 l/1); + --ig-warn-200: rgb(233, 161, 65); + --ig-warn-200-contrast: hsla(from color(from var(--ig-warn-200) var(--y-contrast)) h 0 l/1); + --ig-warn-300: rgb(207, 135, 24); + --ig-warn-300-contrast: hsla(from color(from var(--ig-warn-300) var(--y-contrast)) h 0 l/1); + --ig-warn-400: rgb(177, 114, 4); + --ig-warn-400-contrast: hsla(from color(from var(--ig-warn-400) var(--y-contrast)) h 0 l/1); + --ig-warn-500: rgb(149, 94, 1); + --ig-warn-500-contrast: hsla(from color(from var(--ig-warn-500) var(--y-contrast)) h 0 l/1); + --ig-warn-600: rgb(121, 77, 4); + --ig-warn-600-contrast: hsla(from color(from var(--ig-warn-600) var(--y-contrast)) h 0 l/1); + --ig-warn-700: rgb(94, 60, 9); + --ig-warn-700-contrast: hsla(from color(from var(--ig-warn-700) var(--y-contrast)) h 0 l/1); + --ig-warn-800: rgb(65, 42, 11); + --ig-warn-800-contrast: hsla(from color(from var(--ig-warn-800) var(--y-contrast)) h 0 l/1); + --ig-warn-900: rgb(30, 19, 6); + --ig-warn-900-contrast: hsla(from color(from var(--ig-warn-900) var(--y-contrast)) h 0 l/1); + --ig-warn-seed: orange; + --ig-warn-seed-contrast: hsla(from color(from var(--ig-warn-seed) var(--y-contrast)) h 0 l/1); + --ig-warn-A100: rgb(255, 211, 156); + --ig-warn-A100-contrast: hsla(from color(from var(--ig-warn-A100) var(--y-contrast)) h 0 l/1); + --ig-warn-A200: rgb(222, 143, 4); + --ig-warn-A200-contrast: hsla(from color(from var(--ig-warn-A200) var(--y-contrast)) h 0 l/1); + --ig-warn-A400: rgb(172, 110, 0); + --ig-warn-A400-contrast: hsla(from color(from var(--ig-warn-A400) var(--y-contrast)) h 0 l/1); + --ig-warn-A700: rgb(136, 86, 0); + --ig-warn-A700-contrast: hsla(from color(from var(--ig-warn-A700) var(--y-contrast)) h 0 l/1); + --ig-error-50: rgb(254, 231, 227); + --ig-error-50-contrast: hsla(from color(from var(--ig-error-50) var(--y-contrast)) h 0 l/1); + --ig-error-100: rgb(255, 188, 177); + --ig-error-100-contrast: hsla(from color(from var(--ig-error-100) var(--y-contrast)) h 0 l/1); + --ig-error-200: rgb(255, 146, 130); + --ig-error-200-contrast: hsla(from color(from var(--ig-error-200) var(--y-contrast)) h 0 l/1); + --ig-error-300: rgb(255, 99, 82); + --ig-error-300-contrast: hsla(from color(from var(--ig-error-300) var(--y-contrast)) h 0 l/1); + --ig-error-400: rgb(237, 58, 45); + --ig-error-400-contrast: hsla(from color(from var(--ig-error-400) var(--y-contrast)) h 0 l/1); + --ig-error-500: rgb(209, 28, 19); + --ig-error-500-contrast: hsla(from color(from var(--ig-error-500) var(--y-contrast)) h 0 l/1); + --ig-error-600: rgb(174, 16, 9); + --ig-error-600-contrast: hsla(from color(from var(--ig-error-600) var(--y-contrast)) h 0 l/1); + --ig-error-700: rgb(135, 17, 11); + --ig-error-700-contrast: hsla(from color(from var(--ig-error-700) var(--y-contrast)) h 0 l/1); + --ig-error-800: rgb(93, 18, 12); + --ig-error-800-contrast: hsla(from color(from var(--ig-error-800) var(--y-contrast)) h 0 l/1); + --ig-error-900: rgb(44, 9, 6); + --ig-error-900-contrast: hsla(from color(from var(--ig-error-900) var(--y-contrast)) h 0 l/1); + --ig-error-seed: red; + --ig-error-seed-contrast: hsla(from color(from var(--ig-error-seed) var(--y-contrast)) h 0 l/1); + --ig-error-A100: rgb(255, 207, 198); + --ig-error-A100-contrast: hsla(from color(from var(--ig-error-A100) var(--y-contrast)) h 0 l/1); + --ig-error-A200: rgb(255, 119, 101); + --ig-error-A200-contrast: hsla(from color(from var(--ig-error-A200) var(--y-contrast)) h 0 l/1); + --ig-error-A400: rgb(242, 34, 24); + --ig-error-A400-contrast: hsla(from color(from var(--ig-error-A400) var(--y-contrast)) h 0 l/1); + --ig-error-A700: rgb(197, 2, 1); + --ig-error-A700-contrast: hsla(from color(from var(--ig-error-A700) var(--y-contrast)) h 0 l/1); +} + +/* END_OUTPUT */ +/* CONTAINED */ +:root { + --ig-primary-50: rgb(226, 237, 251); + --ig-primary-100: rgb(172, 207, 251); + --ig-primary-200: rgb(117, 180, 250); + --ig-primary-300: rgb(67, 155, 239); + --ig-primary-400: rgb(27, 131, 214); + --ig-primary-500: rgb(9, 109, 183); + --ig-primary-600: rgb(6, 89, 150); + --ig-primary-700: rgb(11, 69, 116); + --ig-primary-800: rgb(12, 48, 80); + --ig-primary-900: rgb(6, 22, 37); + --ig-primary-seed: #09f; + --ig-primary-A100: rgb(191, 221, 255); + --ig-primary-A200: rgb(73, 164, 255); + --ig-primary-A400: rgb(4, 127, 213); + --ig-primary-A700: rgb(0, 100, 169); + --ig-secondary-50: rgb(240, 235, 245); + --ig-secondary-100: rgb(213, 198, 231); + --ig-secondary-200: rgb(190, 166, 221); + --ig-secondary-300: rgb(168, 136, 211); + --ig-secondary-400: rgb(146, 110, 198); + --ig-secondary-500: rgb(125, 87, 177); + --ig-secondary-600: rgb(103, 69, 150); + --ig-secondary-700: rgb(80, 53, 117); + --ig-secondary-800: rgb(56, 38, 81); + --ig-secondary-900: rgb(25, 17, 38); + --ig-secondary-seed: #97c; + --ig-secondary-A100: rgb(233, 209, 255); + --ig-secondary-A200: rgb(192, 134, 255); + --ig-secondary-A400: rgb(163, 75, 255); + --ig-secondary-A700: rgb(139, 23, 233); + --ig-gray-50: rgb(251, 251, 251); + --ig-gray-100: rgb(247, 247, 247); + --ig-gray-200: rgb(236, 236, 236); + --ig-gray-300: rgb(217, 217, 217); + --ig-gray-400: rgb(193, 193, 193); + --ig-gray-500: rgb(164, 164, 164); + --ig-gray-600: rgb(132, 132, 132); + --ig-gray-700: rgb(99, 99, 99); + --ig-gray-800: rgb(66, 66, 66); + --ig-gray-900: rgb(33, 33, 33); + --ig-gray-seed: #000; + --ig-surface-50: rgb(255, 255, 255); + --ig-surface-100: rgb(255, 255, 255); + --ig-surface-200: rgb(255, 255, 255); + --ig-surface-300: rgb(255, 255, 255); + --ig-surface-400: rgb(255, 255, 255); + --ig-surface-500: rgb(255, 255, 255); + --ig-surface-600: rgb(229, 229, 229); + --ig-surface-700: rgb(206, 206, 206); + --ig-surface-800: rgb(185, 185, 185); + --ig-surface-900: rgb(165, 165, 165); + --ig-surface-seed: #fff; + --ig-surface-A100: rgb(218, 218, 218); + --ig-surface-A200: rgb(161, 161, 161); + --ig-surface-A400: rgb(124, 124, 124); + --ig-surface-A700: rgb(97, 97, 97); + --ig-info-50: rgb(232, 235, 252); + --ig-info-100: rgb(190, 203, 253); + --ig-info-200: rgb(149, 173, 255); + --ig-info-300: rgb(109, 145, 255); + --ig-info-400: rgb(70, 117, 255); + --ig-info-500: rgb(34, 91, 245); + --ig-info-600: rgb(15, 67, 220); + --ig-info-700: rgb(7, 50, 180); + --ig-info-800: rgb(6, 36, 125); + --ig-info-900: rgb(4, 18, 59); + --ig-info-seed: blue; + --ig-info-A100: rgb(207, 217, 255); + --ig-info-A200: rgb(124, 156, 255); + --ig-info-A400: rgb(63, 113, 255); + --ig-info-A700: rgb(16, 75, 249); + --ig-success-50: rgb(193, 251, 187); + --ig-success-100: rgb(93, 231, 86); + --ig-success-200: rgb(47, 203, 42); + --ig-success-300: rgb(17, 175, 14); + --ig-success-400: rgb(1, 148, 1); + --ig-success-500: rgb(1, 124, 0); + --ig-success-600: rgb(5, 101, 4); + --ig-success-700: rgb(11, 78, 9); + --ig-success-800: rgb(13, 55, 11); + --ig-success-900: rgb(7, 25, 6); + --ig-success-seed: green; + --ig-success-A100: rgb(56, 251, 50); + --ig-success-A200: rgb(0, 187, 0); + --ig-success-A400: rgb(0, 144, 0); + --ig-success-A700: rgb(0, 114, 0); + --ig-warn-50: rgb(251, 233, 213); + --ig-warn-100: rgb(247, 195, 133); + --ig-warn-200: rgb(233, 161, 65); + --ig-warn-300: rgb(207, 135, 24); + --ig-warn-400: rgb(177, 114, 4); + --ig-warn-500: rgb(149, 94, 1); + --ig-warn-600: rgb(121, 77, 4); + --ig-warn-700: rgb(94, 60, 9); + --ig-warn-800: rgb(65, 42, 11); + --ig-warn-900: rgb(30, 19, 6); + --ig-warn-seed: orange; + --ig-warn-A100: rgb(255, 211, 156); + --ig-warn-A200: rgb(222, 143, 4); + --ig-warn-A400: rgb(172, 110, 0); + --ig-warn-A700: rgb(136, 86, 0); + --ig-error-50: rgb(254, 231, 227); + --ig-error-100: rgb(255, 188, 177); + --ig-error-200: rgb(255, 146, 130); + --ig-error-300: rgb(255, 99, 82); + --ig-error-400: rgb(237, 58, 45); + --ig-error-500: rgb(209, 28, 19); + --ig-error-600: rgb(174, 16, 9); + --ig-error-700: rgb(135, 17, 11); + --ig-error-800: rgb(93, 18, 12); + --ig-error-900: rgb(44, 9, 6); + --ig-error-seed: red; + --ig-error-A100: rgb(255, 207, 198); + --ig-error-A200: rgb(255, 119, 101); + --ig-error-A400: rgb(242, 34, 24); + --ig-error-A700: rgb(197, 2, 1); +} + +/* END_CONTAINED */ +/* END_ASSERT */ +/* */ +/* Test: verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] map */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] map */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] map */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] map */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] map */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] map */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] map */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] map */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* */ +/* Test: should generate CSS variables for handmande palettes */ +/* ASSERT: */ +/* OUTPUT */ +:root { + --ig-wcag-a: 0.31; + --ig-wcag-aa: 0.185; + --ig-wcag-aaa: 0.178; + --ig-contrast-level: var(--ig-wcag-aa); + --y: clamp(0, (y / var(--ig-contrast-level) - 1) * -infinity, 1); + --y-contrast: xyz-d65 var(--y) var(--y) var(--y); +} + +:root { + --ig-primary-50: #e6eff8; + --ig-primary-50-contrast: black; + --ig-primary-100: #bfd7f2; + --ig-primary-100-contrast: black; + --ig-primary-200: #98bfec; + --ig-primary-200-contrast: black; + --ig-primary-300: #85b5e9; + --ig-primary-300-contrast: white; + --ig-primary-400: #73a6e4; + --ig-primary-400-contrast: white; + --ig-primary-500: #6797de; + --ig-primary-500-contrast: white; + --ig-primary-600: #3681dd; + --ig-primary-600-contrast: white; + --ig-primary-700: #357fda; + --ig-primary-700-contrast: white; + --ig-primary-800: #306dc8; + --ig-primary-800-contrast: white; + --ig-primary-900: #284ea8; + --ig-primary-900-contrast: white; + --ig-primary-A100: #98bfec; + --ig-primary-A100-contrast: white; + --ig-primary-A200: #73a6e4; + --ig-primary-A200-contrast: white; + --ig-primary-A400: #3681dd; + --ig-primary-A400-contrast: white; + --ig-primary-A700: #284ea8; + --ig-primary-A700-contrast: white; + --ig-primary-seed: #6797de; + --ig-primary-seed-contrast: white; + --ig-secondary-50: #fef7e2; + --ig-secondary-50-contrast: black; + --ig-secondary-100: #fdeab7; + --ig-secondary-100-contrast: black; + --ig-secondary-200: #fbdd89; + --ig-secondary-200-contrast: black; + --ig-secondary-300: #fad15c; + --ig-secondary-300-contrast: black; + --ig-secondary-400: #f9c63f; + --ig-secondary-400-contrast: black; + --ig-secondary-500: #f7bd32; + --ig-secondary-500-contrast: white; + --ig-secondary-600: #f6b02d; + --ig-secondary-600-contrast: white; + --ig-secondary-700: #f49e2a; + --ig-secondary-700-contrast: white; + --ig-secondary-800: #f38e28; + --ig-secondary-800-contrast: white; + --ig-secondary-900: #f38e28; + --ig-secondary-900-contrast: white; + --ig-secondary-A100: #fbdd89; + --ig-secondary-A100-contrast: black; + --ig-secondary-A200: #f9c63f; + --ig-secondary-A200-contrast: black; + --ig-secondary-A400: #f6b02d; + --ig-secondary-A400-contrast: white; + --ig-secondary-A700: #f38e28; + --ig-secondary-A700-contrast: white; + --ig-secondary-seed: #f7bd32; + --ig-secondary-seed-contrast: white; + --ig-tertiary-500: #f7bd32; + --ig-tertiary-500-contrast: white; + --ig-gray-50: #fff; + --ig-gray-50-contrast: black; + --ig-gray-100: #fafafa; + --ig-gray-100-contrast: black; + --ig-gray-200: #f5f5f5; + --ig-gray-200-contrast: black; + --ig-gray-300: #f0f0f0; + --ig-gray-300-contrast: black; + --ig-gray-400: #dedede; + --ig-gray-400-contrast: black; + --ig-gray-500: #b3b2b2; + --ig-gray-500-contrast: black; + --ig-gray-600: #979696; + --ig-gray-600-contrast: white; + --ig-gray-700: #7b7a7a; + --ig-gray-700-contrast: white; + --ig-gray-800: #404040; + --ig-gray-800-contrast: white; + --ig-gray-900: #1a1a1a; + --ig-gray-900-contrast: white; + --ig-gray-seed: #b3b2b2; + --ig-gray-seed-contrast: black; + --ig-info-50: #fef7e2; + --ig-info-50-contrast: black; + --ig-info-100: #fdeab7; + --ig-info-100-contrast: black; + --ig-info-200: #fbdd89; + --ig-info-200-contrast: black; + --ig-info-300: #fad15c; + --ig-info-300-contrast: black; + --ig-info-400: #f9c63f; + --ig-info-400-contrast: black; + --ig-info-500: #f7bd32; + --ig-info-500-contrast: white; + --ig-info-600: #f6b02d; + --ig-info-600-contrast: white; + --ig-info-700: #f49e2a; + --ig-info-700-contrast: white; + --ig-info-800: #f38e28; + --ig-info-800-contrast: white; + --ig-info-900: #f38e28; + --ig-info-900-contrast: white; + --ig-info-A100: #fbdd89; + --ig-info-A100-contrast: black; + --ig-info-A200: #f9c63f; + --ig-info-A200-contrast: black; + --ig-info-A400: #f6b02d; + --ig-info-A400-contrast: white; + --ig-info-A700: #f38e28; + --ig-info-A700-contrast: white; + --ig-info-seed: #f7bd32; + --ig-info-seed-contrast: white; + --ig-success-50: #fef7e2; + --ig-success-50-contrast: black; + --ig-success-100: #fdeab7; + --ig-success-100-contrast: black; + --ig-success-200: #fbdd89; + --ig-success-200-contrast: black; + --ig-success-300: #fad15c; + --ig-success-300-contrast: black; + --ig-success-400: #f9c63f; + --ig-success-400-contrast: black; + --ig-success-500: #f7bd32; + --ig-success-500-contrast: white; + --ig-success-600: #f6b02d; + --ig-success-600-contrast: white; + --ig-success-700: #f49e2a; + --ig-success-700-contrast: white; + --ig-success-800: #f38e28; + --ig-success-800-contrast: white; + --ig-success-900: #f38e28; + --ig-success-900-contrast: white; + --ig-success-A100: #fbdd89; + --ig-success-A100-contrast: black; + --ig-success-A200: #f9c63f; + --ig-success-A200-contrast: black; + --ig-success-A400: #f6b02d; + --ig-success-A400-contrast: white; + --ig-success-A700: #f38e28; + --ig-success-A700-contrast: white; + --ig-success-seed: #f7bd32; + --ig-success-seed-contrast: white; + --ig-warn-50: #fef7e2; + --ig-warn-50-contrast: black; + --ig-warn-100: #fdeab7; + --ig-warn-100-contrast: black; + --ig-warn-200: #fbdd89; + --ig-warn-200-contrast: black; + --ig-warn-300: #fad15c; + --ig-warn-300-contrast: black; + --ig-warn-400: #f9c63f; + --ig-warn-400-contrast: black; + --ig-warn-500: #f7bd32; + --ig-warn-500-contrast: white; + --ig-warn-600: #f6b02d; + --ig-warn-600-contrast: white; + --ig-warn-700: #f49e2a; + --ig-warn-700-contrast: white; + --ig-warn-800: #f38e28; + --ig-warn-800-contrast: white; + --ig-warn-900: #f38e28; + --ig-warn-900-contrast: white; + --ig-warn-A100: #fbdd89; + --ig-warn-A100-contrast: black; + --ig-warn-A200: #f9c63f; + --ig-warn-A200-contrast: black; + --ig-warn-A400: #f6b02d; + --ig-warn-A400-contrast: white; + --ig-warn-A700: #f38e28; + --ig-warn-A700-contrast: white; + --ig-warn-seed: #f7bd32; + --ig-warn-seed-contrast: white; + --ig-error-50: #fef7e2; + --ig-error-50-contrast: black; + --ig-error-100: #fdeab7; + --ig-error-100-contrast: black; + --ig-error-200: #fbdd89; + --ig-error-200-contrast: black; + --ig-error-300: #fad15c; + --ig-error-300-contrast: black; + --ig-error-400: #f9c63f; + --ig-error-400-contrast: black; + --ig-error-500: #f7bd32; + --ig-error-500-contrast: white; + --ig-error-600: #f6b02d; + --ig-error-600-contrast: white; + --ig-error-700: #f49e2a; + --ig-error-700-contrast: white; + --ig-error-800: #f38e28; + --ig-error-800-contrast: white; + --ig-error-900: #f38e28; + --ig-error-900-contrast: white; + --ig-error-A100: #fbdd89; + --ig-error-A100-contrast: black; + --ig-error-A200: #f9c63f; + --ig-error-A200-contrast: black; + --ig-error-A400: #f6b02d; + --ig-error-A400-contrast: white; + --ig-error-A700: #f38e28; + --ig-error-A700-contrast: white; + --ig-error-seed: #f7bd32; + --ig-error-seed-contrast: white; + --ig-surface-50: #fef7e2; + --ig-surface-50-contrast: black; + --ig-surface-100: #fdeab7; + --ig-surface-100-contrast: black; + --ig-surface-200: #fbdd89; + --ig-surface-200-contrast: black; + --ig-surface-300: #fad15c; + --ig-surface-300-contrast: black; + --ig-surface-400: #f9c63f; + --ig-surface-400-contrast: black; + --ig-surface-500: #f7bd32; + --ig-surface-500-contrast: white; + --ig-surface-600: #f6b02d; + --ig-surface-600-contrast: white; + --ig-surface-700: #f49e2a; + --ig-surface-700-contrast: white; + --ig-surface-800: #f38e28; + --ig-surface-800-contrast: white; + --ig-surface-900: #f38e28; + --ig-surface-900-contrast: white; + --ig-surface-A100: #fbdd89; + --ig-surface-A100-contrast: black; + --ig-surface-A200: #f9c63f; + --ig-surface-A200-contrast: black; + --ig-surface-A400: #f6b02d; + --ig-surface-A400-contrast: white; + --ig-surface-A700: #f38e28; + --ig-surface-A700-contrast: white; + --ig-surface-seed: #f7bd32; + --ig-surface-seed-contrast: white; +} + +/* END_OUTPUT */ +/* CONTAINED */ +:root { + --ig-primary-50: #e6eff8; + --ig-primary-100: #bfd7f2; + --ig-primary-200: #98bfec; + --ig-primary-300: #85b5e9; + --ig-primary-400: #73a6e4; + --ig-primary-500: #6797de; + --ig-primary-600: #3681dd; + --ig-primary-700: #357fda; + --ig-primary-800: #306dc8; + --ig-primary-900: #284ea8; + --ig-primary-seed: #6797de; + --ig-primary-A100: #98bfec; + --ig-primary-A200: #73a6e4; + --ig-primary-A400: #3681dd; + --ig-primary-A700: #284ea8; + --ig-secondary-50: #fef7e2; + --ig-secondary-100: #fdeab7; + --ig-secondary-200: #fbdd89; + --ig-secondary-300: #fad15c; + --ig-secondary-400: #f9c63f; + --ig-secondary-500: #f7bd32; + --ig-secondary-600: #f6b02d; + --ig-secondary-700: #f49e2a; + --ig-secondary-800: #f38e28; + --ig-secondary-900: #f38e28; + --ig-secondary-seed: #f7bd32; + --ig-secondary-A100: #fbdd89; + --ig-secondary-A200: #f9c63f; + --ig-secondary-A400: #f6b02d; + --ig-secondary-A700: #f38e28; + --ig-gray-50: #fff; + --ig-gray-100: #fafafa; + --ig-gray-200: #f5f5f5; + --ig-gray-300: #f0f0f0; + --ig-gray-400: #dedede; + --ig-gray-500: #b3b2b2; + --ig-gray-600: #979696; + --ig-gray-700: #7b7a7a; + --ig-gray-800: #404040; + --ig-gray-900: #1a1a1a; + --ig-gray-seed: #b3b2b2; + --ig-surface-50: #fef7e2; + --ig-surface-100: #fdeab7; + --ig-surface-200: #fbdd89; + --ig-surface-300: #fad15c; + --ig-surface-400: #f9c63f; + --ig-surface-500: #f7bd32; + --ig-surface-600: #f6b02d; + --ig-surface-700: #f49e2a; + --ig-surface-800: #f38e28; + --ig-surface-900: #f38e28; + --ig-surface-seed: #f7bd32; + --ig-surface-A100: #fbdd89; + --ig-surface-A200: #f9c63f; + --ig-surface-A400: #f6b02d; + --ig-surface-A700: #f38e28; + --ig-info-50: #fef7e2; + --ig-info-100: #fdeab7; + --ig-info-200: #fbdd89; + --ig-info-300: #fad15c; + --ig-info-400: #f9c63f; + --ig-info-500: #f7bd32; + --ig-info-600: #f6b02d; + --ig-info-700: #f49e2a; + --ig-info-800: #f38e28; + --ig-info-900: #f38e28; + --ig-info-seed: #f7bd32; + --ig-info-A100: #fbdd89; + --ig-info-A200: #f9c63f; + --ig-info-A400: #f6b02d; + --ig-info-A700: #f38e28; + --ig-success-50: #fef7e2; + --ig-success-100: #fdeab7; + --ig-success-200: #fbdd89; + --ig-success-300: #fad15c; + --ig-success-400: #f9c63f; + --ig-success-500: #f7bd32; + --ig-success-600: #f6b02d; + --ig-success-700: #f49e2a; + --ig-success-800: #f38e28; + --ig-success-900: #f38e28; + --ig-success-seed: #f7bd32; + --ig-success-A100: #fbdd89; + --ig-success-A200: #f9c63f; + --ig-success-A400: #f6b02d; + --ig-success-A700: #f38e28; + --ig-warn-50: #fef7e2; + --ig-warn-100: #fdeab7; + --ig-warn-200: #fbdd89; + --ig-warn-300: #fad15c; + --ig-warn-400: #f9c63f; + --ig-warn-500: #f7bd32; + --ig-warn-600: #f6b02d; + --ig-warn-700: #f49e2a; + --ig-warn-800: #f38e28; + --ig-warn-900: #f38e28; + --ig-warn-seed: #f7bd32; + --ig-warn-A100: #fbdd89; + --ig-warn-A200: #f9c63f; + --ig-warn-A400: #f6b02d; + --ig-warn-A700: #f38e28; + --ig-error-50: #fef7e2; + --ig-error-100: #fdeab7; + --ig-error-200: #fbdd89; + --ig-error-300: #fad15c; + --ig-error-400: #f9c63f; + --ig-error-500: #f7bd32; + --ig-error-600: #f6b02d; + --ig-error-700: #f49e2a; + --ig-error-800: #f38e28; + --ig-error-900: #f38e28; + --ig-error-seed: #f7bd32; + --ig-error-A100: #fbdd89; + --ig-error-A200: #f9c63f; + --ig-error-A400: #f6b02d; + --ig-error-A700: #f38e28; +} + +/* END_CONTAINED */ +/* END_ASSERT */ +/* */ +/* Test: should properly get the value from handmade palettes */ +/* ✔ [assert-equal] should properly get the value from handmade palettes */ +/* ASSERT: */ +/* OUTPUT */ +.test-output { + color: rgb(250, 250, 250); +} + +/* END_OUTPUT */ +/* CONTAINED */ +.test-output { + color: rgb(250, 250, 250); +} + +/* END_CONTAINED */ +/* END_ASSERT */ +/* */ +/* # Module: Color :: palette :: gamut-relative generator */ +/* ------------------------------------------------------ */ +/* Test: keeps any two shades 500 apart at WCAG AA or better */ +/* ✔ [assert-true] keeps any two shades 500 apart at WCAG AA or better */ +/* ✔ [assert-true] keeps any two shades 500 apart at WCAG AA or better */ +/* ✔ [assert-true] keeps any two shades 500 apart at WCAG AA or better */ +/* ✔ [assert-true] keeps any two shades 500 apart at WCAG AA or better */ +/* ✔ [assert-true] keeps any two shades 500 apart at WCAG AA or better */ +/* ✔ [assert-true] keeps any two shades 500 apart at WCAG AA or better */ +/* ✔ [assert-true] keeps any two shades 500 apart at WCAG AA or better */ +/* ✔ [assert-true] keeps any two shades 500 apart at WCAG AA or better */ +/* ✔ [assert-true] keeps any two shades 500 apart at WCAG AA or better */ +/* ✔ [assert-true] keeps any two shades 500 apart at WCAG AA or better */ +/* ✔ [assert-true] keeps any two shades 500 apart at WCAG AA or better */ +/* ✔ [assert-true] keeps any two shades 500 apart at WCAG AA or better */ +/* ✔ [assert-true] keeps any two shades 500 apart at WCAG AA or better */ +/* ✔ [assert-true] keeps any two shades 500 apart at WCAG AA or better */ +/* ✔ [assert-true] keeps any two shades 500 apart at WCAG AA or better */ +/* ✔ [assert-true] keeps any two shades 500 apart at WCAG AA or better */ +/* ✔ [assert-true] keeps any two shades 500 apart at WCAG AA or better */ +/* ✔ [assert-true] keeps any two shades 500 apart at WCAG AA or better */ +/* ✔ [assert-true] keeps any two shades 500 apart at WCAG AA or better */ +/* ✔ [assert-true] keeps any two shades 500 apart at WCAG AA or better */ +/* ✔ [assert-true] keeps any two shades 500 apart at WCAG AA or better */ +/* ✔ [assert-true] keeps any two shades 500 apart at WCAG AA or better */ +/* ✔ [assert-true] keeps any two shades 500 apart at WCAG AA or better */ +/* ✔ [assert-true] keeps any two shades 500 apart at WCAG AA or better */ +/* ✔ [assert-true] keeps any two shades 500 apart at WCAG AA or better */ +/* ✔ [assert-true] keeps any two shades 500 apart at WCAG AA or better */ +/* ✔ [assert-true] keeps any two shades 500 apart at WCAG AA or better */ +/* ✔ [assert-true] keeps any two shades 500 apart at WCAG AA or better */ +/* ✔ [assert-true] keeps any two shades 500 apart at WCAG AA or better */ +/* ✔ [assert-true] keeps any two shades 500 apart at WCAG AA or better */ +/* ✔ [assert-true] keeps any two shades 500 apart at WCAG AA or better */ +/* ✔ [assert-true] keeps any two shades 500 apart at WCAG AA or better */ +/* ✔ [assert-true] keeps any two shades 500 apart at WCAG AA or better */ +/* ✔ [assert-true] keeps any two shades 500 apart at WCAG AA or better */ +/* ✔ [assert-true] keeps any two shades 500 apart at WCAG AA or better */ +/* ✔ [assert-true] keeps any two shades 500 apart at WCAG AA or better */ +/* ✔ [assert-true] keeps any two shades 500 apart at WCAG AA or better */ +/* ✔ [assert-true] keeps any two shades 500 apart at WCAG AA or better */ +/* ✔ [assert-true] keeps any two shades 500 apart at WCAG AA or better */ +/* ✔ [assert-true] keeps any two shades 500 apart at WCAG AA or better */ +/* */ +/* Test: keeps every shade visibly distinct, whatever the seed */ +/* ✔ [assert-true] keeps every shade visibly distinct, whatever the seed */ +/* ✔ [assert-true] keeps every shade visibly distinct, whatever the seed */ +/* ✔ [assert-true] keeps every shade visibly distinct, whatever the seed */ +/* ✔ [assert-true] keeps every shade visibly distinct, whatever the seed */ +/* ✔ [assert-true] keeps every shade visibly distinct, whatever the seed */ +/* ✔ [assert-true] keeps every shade visibly distinct, whatever the seed */ +/* ✔ [assert-true] keeps every shade visibly distinct, whatever the seed */ +/* ✔ [assert-true] keeps every shade visibly distinct, whatever the seed */ +/* ✔ [assert-true] keeps every shade visibly distinct, whatever the seed */ +/* ✔ [assert-true] keeps every shade visibly distinct, whatever the seed */ +/* ✔ [assert-true] keeps every shade visibly distinct, whatever the seed */ +/* ✔ [assert-true] keeps every shade visibly distinct, whatever the seed */ +/* ✔ [assert-true] keeps every shade visibly distinct, whatever the seed */ +/* ✔ [assert-true] keeps every shade visibly distinct, whatever the seed */ +/* ✔ [assert-true] keeps every shade visibly distinct, whatever the seed */ +/* ✔ [assert-true] keeps every shade visibly distinct, whatever the seed */ +/* ✔ [assert-true] keeps every shade visibly distinct, whatever the seed */ +/* ✔ [assert-true] keeps every shade visibly distinct, whatever the seed */ +/* ✔ [assert-true] keeps every shade visibly distinct, whatever the seed */ +/* ✔ [assert-true] keeps every shade visibly distinct, whatever the seed */ +/* ✔ [assert-true] keeps every shade visibly distinct, whatever the seed */ +/* ✔ [assert-true] keeps every shade visibly distinct, whatever the seed */ +/* ✔ [assert-true] keeps every shade visibly distinct, whatever the seed */ +/* ✔ [assert-true] keeps every shade visibly distinct, whatever the seed */ +/* ✔ [assert-true] keeps every shade visibly distinct, whatever the seed */ +/* ✔ [assert-true] keeps every shade visibly distinct, whatever the seed */ +/* ✔ [assert-true] keeps every shade visibly distinct, whatever the seed */ +/* ✔ [assert-true] keeps every shade visibly distinct, whatever the seed */ +/* ✔ [assert-true] keeps every shade visibly distinct, whatever the seed */ +/* ✔ [assert-true] keeps every shade visibly distinct, whatever the seed */ +/* ✔ [assert-true] keeps every shade visibly distinct, whatever the seed */ +/* ✔ [assert-true] keeps every shade visibly distinct, whatever the seed */ +/* ✔ [assert-true] keeps every shade visibly distinct, whatever the seed */ +/* ✔ [assert-true] keeps every shade visibly distinct, whatever the seed */ +/* ✔ [assert-true] keeps every shade visibly distinct, whatever the seed */ +/* ✔ [assert-true] keeps every shade visibly distinct, whatever the seed */ +/* ✔ [assert-true] keeps every shade visibly distinct, whatever the seed */ +/* ✔ [assert-true] keeps every shade visibly distinct, whatever the seed */ +/* ✔ [assert-true] keeps every shade visibly distinct, whatever the seed */ +/* ✔ [assert-true] keeps every shade visibly distinct, whatever the seed */ +/* ✔ [assert-true] keeps every shade visibly distinct, whatever the seed */ +/* ✔ [assert-true] keeps every shade visibly distinct, whatever the seed */ +/* ✔ [assert-true] keeps every shade visibly distinct, whatever the seed */ +/* ✔ [assert-true] keeps every shade visibly distinct, whatever the seed */ +/* ✔ [assert-true] keeps every shade visibly distinct, whatever the seed */ +/* ✔ [assert-true] keeps every shade visibly distinct, whatever the seed */ +/* ✔ [assert-true] keeps every shade visibly distinct, whatever the seed */ +/* ✔ [assert-true] keeps every shade visibly distinct, whatever the seed */ +/* ✔ [assert-true] keeps every shade visibly distinct, whatever the seed */ +/* ✔ [assert-true] keeps every shade visibly distinct, whatever the seed */ +/* */ +/* Test: generates a neutral ramp for a seed with no usable hue */ +/* ✔ [assert-equal] generates a neutral ramp for a seed with no usable hue */ +/* ✔ [assert-equal] generates a neutral ramp for a seed with no usable hue */ +/* ✔ [assert-equal] generates a neutral ramp for a seed with no usable hue */ +/* ✔ [assert-equal] generates a neutral ramp for a seed with no usable hue */ +/* ✔ [assert-equal] generates a neutral ramp for a seed with no usable hue */ +/* ✔ [assert-equal] generates a neutral ramp for a seed with no usable hue */ +/* ✔ [assert-equal] generates a neutral ramp for a seed with no usable hue */ +/* ✔ [assert-equal] generates a neutral ramp for a seed with no usable hue */ +/* ✔ [assert-equal] generates a neutral ramp for a seed with no usable hue */ +/* ✔ [assert-equal] generates a neutral ramp for a seed with no usable hue */ +/* */ +/* Test: leaves the surface family anchored on its seed */ +/* ✔ [assert-equal] leaves the surface family anchored on its seed */ +/* */ +/* Test: emits concrete colors, not runtime expressions */ +/* ✔ [assert-equal] emits concrete colors, not runtime expressions */ +/* ✔ [assert-equal] emits concrete colors, not runtime expressions */ +/* ✔ [assert-equal] emits concrete colors, not runtime expressions */ +/* ✔ [assert-equal] emits concrete colors, not runtime expressions */ +/* ✔ [assert-equal] emits concrete colors, not runtime expressions */ +/* ✔ [assert-equal] emits concrete colors, not runtime expressions */ +/* ✔ [assert-equal] emits concrete colors, not runtime expressions */ +/* ✔ [assert-equal] emits concrete colors, not runtime expressions */ +/* ✔ [assert-equal] emits concrete colors, not runtime expressions */ +/* ✔ [assert-equal] emits concrete colors, not runtime expressions */ +/* */ +/* Test: keeps the surface seed exactly on shade 500 */ +/* ✔ [assert-equal] keeps the surface seed exactly on shade 500 */ +/* ✔ [assert-equal] keeps the surface seed exactly on shade 500 */ +/* ✔ [assert-equal] keeps the surface seed exactly on shade 500 */ +/* ✔ [assert-equal] keeps the surface seed exactly on shade 500 */ +/* */ +/* Test: gives a surface with headroom distinct layering shades */ +/* ✔ [assert-true] gives a surface with headroom distinct layering shades */ +/* ✔ [assert-true] gives a surface with headroom distinct layering shades */ +/* ✔ [assert-true] gives a surface with headroom distinct layering shades */ +/* ✔ [assert-true] gives a surface with headroom distinct layering shades */ +/* */ +/* Test: follows the grayscale rhythm the component schemas expect */ +/* ✔ [assert-true] follows the grayscale rhythm the component schemas expect */ +/* ✔ [assert-true] follows the grayscale rhythm the component schemas expect */ +/* ✔ [assert-true] follows the grayscale rhythm the component schemas expect */ +/* ✔ [assert-true] follows the grayscale rhythm the component schemas expect */ +/* */ +/* Test: flips the grayscale for a dark surface but not the color ramps */ +/* ✔ [assert-true] flips the grayscale for a dark surface but not the color ramps */ +/* ✔ [assert-true] flips the grayscale for a dark surface but not the color ramps */ +/* ✔ [assert-equal] flips the grayscale for a dark surface but not the color ramps */ +/* ✔ [assert-equal] flips the grayscale for a dark surface but not the color ramps */ +/* ✔ [assert-equal] flips the grayscale for a dark surface but not the color ramps */ +/* ✔ [assert-equal] flips the grayscale for a dark surface but not the color ramps */ +/* ✔ [assert-equal] flips the grayscale for a dark surface but not the color ramps */ +/* ✔ [assert-equal] flips the grayscale for a dark surface but not the color ramps */ +/* ✔ [assert-equal] flips the grayscale for a dark surface but not the color ramps */ +/* ✔ [assert-equal] flips the grayscale for a dark surface but not the color ramps */ +/* ✔ [assert-equal] flips the grayscale for a dark surface but not the color ramps */ +/* ✔ [assert-equal] flips the grayscale for a dark surface but not the color ramps */ +/* */ +/* Test: reports which shade the seed lands nearest */ +/* ✔ [assert-equal] reports which shade the seed lands nearest */ +/* ✔ [assert-equal] reports which shade the seed lands nearest */ +/* */ +/* Test: falls back to the original multipliers on request */ +/* ✔ [assert-equal] falls back to the original multipliers on request */ +/* ✔ [assert-equal] falls back to the original multipliers on request */ +/* */ +/* */ +/* Test: should convert a color to a list of HSL values */ +/* ✔ [assert-equal] should convert a color to a list of HSL values */ +/* */ +/* Test: should include all necessarry CSS custom properties for adaptive contrast to work */ +/* ASSERT: */ +/* OUTPUT */ +:root { + --ig-wcag-a: 0.31; + --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-d65 var(--y) var(--y) var(--y); +} + +/* END_OUTPUT */ +/* CONTAINED */ +:root { + --ig-wcag-a: 0.31; + --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-d65 var(--y) var(--y) var(--y); +} + +/* END_CONTAINED */ +/* END_ASSERT */ +/* */ +/* # Module: Color :: palette :: seed color variables */ +/* -------------------------------------------------- */ +/* Test: emits --ig-{name}-seed CSS variables; uses provided gray or derives from surface */ +/* ASSERT: */ +/* OUTPUT */ +:root { + --ig-wcag-a: 0.31; + --ig-wcag-aa: 0.185; + --ig-wcag-aaa: 0.178; + --ig-contrast-level: var(--ig-wcag-aa); + --y: clamp(0, (y / var(--ig-contrast-level) - 1) * -infinity, 1); + --y-contrast: xyz-d65 var(--y) var(--y) var(--y); +} + +:root { + --ig-primary-50: rgb(226, 237, 251); + --ig-primary-50-contrast: hsla(from color(from var(--ig-primary-50) var(--y-contrast)) h 0 l/1); + --ig-primary-100: rgb(172, 207, 251); + --ig-primary-100-contrast: hsla(from color(from var(--ig-primary-100) var(--y-contrast)) h 0 l/1); + --ig-primary-200: rgb(117, 180, 250); + --ig-primary-200-contrast: hsla(from color(from var(--ig-primary-200) var(--y-contrast)) h 0 l/1); + --ig-primary-300: rgb(67, 155, 239); + --ig-primary-300-contrast: hsla(from color(from var(--ig-primary-300) var(--y-contrast)) h 0 l/1); + --ig-primary-400: rgb(27, 131, 214); + --ig-primary-400-contrast: hsla(from color(from var(--ig-primary-400) var(--y-contrast)) h 0 l/1); + --ig-primary-500: rgb(9, 109, 183); + --ig-primary-500-contrast: hsla(from color(from var(--ig-primary-500) var(--y-contrast)) h 0 l/1); + --ig-primary-600: rgb(6, 89, 150); + --ig-primary-600-contrast: hsla(from color(from var(--ig-primary-600) var(--y-contrast)) h 0 l/1); + --ig-primary-700: rgb(11, 69, 116); + --ig-primary-700-contrast: hsla(from color(from var(--ig-primary-700) var(--y-contrast)) h 0 l/1); + --ig-primary-800: rgb(12, 48, 80); + --ig-primary-800-contrast: hsla(from color(from var(--ig-primary-800) var(--y-contrast)) h 0 l/1); + --ig-primary-900: rgb(6, 22, 37); + --ig-primary-900-contrast: hsla(from color(from var(--ig-primary-900) var(--y-contrast)) h 0 l/1); + --ig-primary-seed: #09f; + --ig-primary-seed-contrast: hsla(from color(from var(--ig-primary-seed) var(--y-contrast)) h 0 l/1); + --ig-primary-A100: rgb(191, 221, 255); + --ig-primary-A100-contrast: hsla(from color(from var(--ig-primary-A100) var(--y-contrast)) h 0 l/1); + --ig-primary-A200: rgb(73, 164, 255); + --ig-primary-A200-contrast: hsla(from color(from var(--ig-primary-A200) var(--y-contrast)) h 0 l/1); + --ig-primary-A400: rgb(4, 127, 213); + --ig-primary-A400-contrast: hsla(from color(from var(--ig-primary-A400) var(--y-contrast)) h 0 l/1); + --ig-primary-A700: rgb(0, 100, 169); + --ig-primary-A700-contrast: hsla(from color(from var(--ig-primary-A700) var(--y-contrast)) h 0 l/1); + --ig-secondary-50: rgb(240, 235, 245); + --ig-secondary-50-contrast: hsla(from color(from var(--ig-secondary-50) var(--y-contrast)) h 0 l/1); + --ig-secondary-100: rgb(213, 198, 231); + --ig-secondary-100-contrast: hsla(from color(from var(--ig-secondary-100) var(--y-contrast)) h 0 l/1); + --ig-secondary-200: rgb(190, 166, 221); + --ig-secondary-200-contrast: hsla(from color(from var(--ig-secondary-200) var(--y-contrast)) h 0 l/1); + --ig-secondary-300: rgb(168, 136, 211); + --ig-secondary-300-contrast: hsla(from color(from var(--ig-secondary-300) var(--y-contrast)) h 0 l/1); + --ig-secondary-400: rgb(146, 110, 198); + --ig-secondary-400-contrast: hsla(from color(from var(--ig-secondary-400) var(--y-contrast)) h 0 l/1); + --ig-secondary-500: rgb(125, 87, 177); + --ig-secondary-500-contrast: hsla(from color(from var(--ig-secondary-500) var(--y-contrast)) h 0 l/1); + --ig-secondary-600: rgb(103, 69, 150); + --ig-secondary-600-contrast: hsla(from color(from var(--ig-secondary-600) var(--y-contrast)) h 0 l/1); + --ig-secondary-700: rgb(80, 53, 117); + --ig-secondary-700-contrast: hsla(from color(from var(--ig-secondary-700) var(--y-contrast)) h 0 l/1); + --ig-secondary-800: rgb(56, 38, 81); + --ig-secondary-800-contrast: hsla(from color(from var(--ig-secondary-800) var(--y-contrast)) h 0 l/1); + --ig-secondary-900: rgb(25, 17, 38); + --ig-secondary-900-contrast: hsla(from color(from var(--ig-secondary-900) var(--y-contrast)) h 0 l/1); + --ig-secondary-seed: #97c; + --ig-secondary-seed-contrast: hsla(from color(from var(--ig-secondary-seed) var(--y-contrast)) h 0 l/1); + --ig-secondary-A100: rgb(233, 209, 255); + --ig-secondary-A100-contrast: hsla(from color(from var(--ig-secondary-A100) var(--y-contrast)) h 0 l/1); + --ig-secondary-A200: rgb(192, 134, 255); + --ig-secondary-A200-contrast: hsla(from color(from var(--ig-secondary-A200) var(--y-contrast)) h 0 l/1); + --ig-secondary-A400: rgb(163, 75, 255); + --ig-secondary-A400-contrast: hsla(from color(from var(--ig-secondary-A400) var(--y-contrast)) h 0 l/1); + --ig-secondary-A700: rgb(139, 23, 233); + --ig-secondary-A700-contrast: hsla(from color(from var(--ig-secondary-A700) var(--y-contrast)) h 0 l/1); + --ig-gray-50: rgb(251, 251, 251); + --ig-gray-50-contrast: hsla(from color(from var(--ig-gray-50) var(--y-contrast)) h 0 l/1); + --ig-gray-100: rgb(247, 247, 247); + --ig-gray-100-contrast: hsla(from color(from var(--ig-gray-100) var(--y-contrast)) h 0 l/1); + --ig-gray-200: rgb(236, 236, 236); + --ig-gray-200-contrast: hsla(from color(from var(--ig-gray-200) var(--y-contrast)) h 0 l/1); + --ig-gray-300: rgb(217, 217, 217); + --ig-gray-300-contrast: hsla(from color(from var(--ig-gray-300) var(--y-contrast)) h 0 l/1); + --ig-gray-400: rgb(193, 193, 193); + --ig-gray-400-contrast: hsla(from color(from var(--ig-gray-400) var(--y-contrast)) h 0 l/1); + --ig-gray-500: rgb(164, 164, 164); + --ig-gray-500-contrast: hsla(from color(from var(--ig-gray-500) var(--y-contrast)) h 0 l/1); + --ig-gray-600: rgb(132, 132, 132); + --ig-gray-600-contrast: hsla(from color(from var(--ig-gray-600) var(--y-contrast)) h 0 l/1); + --ig-gray-700: rgb(99, 99, 99); + --ig-gray-700-contrast: hsla(from color(from var(--ig-gray-700) var(--y-contrast)) h 0 l/1); + --ig-gray-800: rgb(66, 66, 66); + --ig-gray-800-contrast: hsla(from color(from var(--ig-gray-800) var(--y-contrast)) h 0 l/1); + --ig-gray-900: rgb(33, 33, 33); + --ig-gray-900-contrast: hsla(from color(from var(--ig-gray-900) var(--y-contrast)) h 0 l/1); + --ig-gray-seed: #333; + --ig-gray-seed-contrast: hsla(from color(from var(--ig-gray-seed) var(--y-contrast)) h 0 l/1); + --ig-surface-50: rgb(255, 255, 255); + --ig-surface-50-contrast: hsla(from color(from var(--ig-surface-50) var(--y-contrast)) h 0 l/1); + --ig-surface-100: rgb(255, 255, 255); + --ig-surface-100-contrast: hsla(from color(from var(--ig-surface-100) var(--y-contrast)) h 0 l/1); + --ig-surface-200: rgb(255, 255, 255); + --ig-surface-200-contrast: hsla(from color(from var(--ig-surface-200) var(--y-contrast)) h 0 l/1); + --ig-surface-300: rgb(255, 255, 255); + --ig-surface-300-contrast: hsla(from color(from var(--ig-surface-300) var(--y-contrast)) h 0 l/1); + --ig-surface-400: rgb(255, 255, 255); + --ig-surface-400-contrast: hsla(from color(from var(--ig-surface-400) var(--y-contrast)) h 0 l/1); + --ig-surface-500: rgb(255, 255, 255); + --ig-surface-500-contrast: hsla(from color(from var(--ig-surface-500) var(--y-contrast)) h 0 l/1); + --ig-surface-600: rgb(229, 229, 229); + --ig-surface-600-contrast: hsla(from color(from var(--ig-surface-600) var(--y-contrast)) h 0 l/1); + --ig-surface-700: rgb(206, 206, 206); + --ig-surface-700-contrast: hsla(from color(from var(--ig-surface-700) var(--y-contrast)) h 0 l/1); + --ig-surface-800: rgb(185, 185, 185); + --ig-surface-800-contrast: hsla(from color(from var(--ig-surface-800) var(--y-contrast)) h 0 l/1); + --ig-surface-900: rgb(165, 165, 165); + --ig-surface-900-contrast: hsla(from color(from var(--ig-surface-900) var(--y-contrast)) h 0 l/1); + --ig-surface-seed: #fff; + --ig-surface-seed-contrast: hsla(from color(from var(--ig-surface-seed) var(--y-contrast)) h 0 l/1); + --ig-surface-A100: rgb(218, 218, 218); + --ig-surface-A100-contrast: hsla(from color(from var(--ig-surface-A100) var(--y-contrast)) h 0 l/1); + --ig-surface-A200: rgb(161, 161, 161); + --ig-surface-A200-contrast: hsla(from color(from var(--ig-surface-A200) var(--y-contrast)) h 0 l/1); + --ig-surface-A400: rgb(124, 124, 124); + --ig-surface-A400-contrast: hsla(from color(from var(--ig-surface-A400) var(--y-contrast)) h 0 l/1); + --ig-surface-A700: rgb(97, 97, 97); + --ig-surface-A700-contrast: hsla(from color(from var(--ig-surface-A700) var(--y-contrast)) h 0 l/1); + --ig-info-50: rgb(232, 235, 252); + --ig-info-50-contrast: hsla(from color(from var(--ig-info-50) var(--y-contrast)) h 0 l/1); + --ig-info-100: rgb(190, 203, 253); + --ig-info-100-contrast: hsla(from color(from var(--ig-info-100) var(--y-contrast)) h 0 l/1); + --ig-info-200: rgb(149, 173, 255); + --ig-info-200-contrast: hsla(from color(from var(--ig-info-200) var(--y-contrast)) h 0 l/1); + --ig-info-300: rgb(109, 145, 255); + --ig-info-300-contrast: hsla(from color(from var(--ig-info-300) var(--y-contrast)) h 0 l/1); + --ig-info-400: rgb(70, 117, 255); + --ig-info-400-contrast: hsla(from color(from var(--ig-info-400) var(--y-contrast)) h 0 l/1); + --ig-info-500: rgb(34, 91, 245); + --ig-info-500-contrast: hsla(from color(from var(--ig-info-500) var(--y-contrast)) h 0 l/1); + --ig-info-600: rgb(15, 67, 220); + --ig-info-600-contrast: hsla(from color(from var(--ig-info-600) var(--y-contrast)) h 0 l/1); + --ig-info-700: rgb(7, 50, 180); + --ig-info-700-contrast: hsla(from color(from var(--ig-info-700) var(--y-contrast)) h 0 l/1); + --ig-info-800: rgb(6, 36, 125); + --ig-info-800-contrast: hsla(from color(from var(--ig-info-800) var(--y-contrast)) h 0 l/1); + --ig-info-900: rgb(4, 18, 59); + --ig-info-900-contrast: hsla(from color(from var(--ig-info-900) var(--y-contrast)) h 0 l/1); + --ig-info-seed: blue; + --ig-info-seed-contrast: hsla(from color(from var(--ig-info-seed) var(--y-contrast)) h 0 l/1); + --ig-info-A100: rgb(207, 217, 255); + --ig-info-A100-contrast: hsla(from color(from var(--ig-info-A100) var(--y-contrast)) h 0 l/1); + --ig-info-A200: rgb(124, 156, 255); + --ig-info-A200-contrast: hsla(from color(from var(--ig-info-A200) var(--y-contrast)) h 0 l/1); + --ig-info-A400: rgb(63, 113, 255); + --ig-info-A400-contrast: hsla(from color(from var(--ig-info-A400) var(--y-contrast)) h 0 l/1); + --ig-info-A700: rgb(16, 75, 249); + --ig-info-A700-contrast: hsla(from color(from var(--ig-info-A700) var(--y-contrast)) h 0 l/1); + --ig-success-50: rgb(193, 251, 187); + --ig-success-50-contrast: hsla(from color(from var(--ig-success-50) var(--y-contrast)) h 0 l/1); + --ig-success-100: rgb(93, 231, 86); + --ig-success-100-contrast: hsla(from color(from var(--ig-success-100) var(--y-contrast)) h 0 l/1); + --ig-success-200: rgb(47, 203, 42); + --ig-success-200-contrast: hsla(from color(from var(--ig-success-200) var(--y-contrast)) h 0 l/1); + --ig-success-300: rgb(17, 175, 14); + --ig-success-300-contrast: hsla(from color(from var(--ig-success-300) var(--y-contrast)) h 0 l/1); + --ig-success-400: rgb(1, 148, 1); + --ig-success-400-contrast: hsla(from color(from var(--ig-success-400) var(--y-contrast)) h 0 l/1); + --ig-success-500: rgb(1, 124, 0); + --ig-success-500-contrast: hsla(from color(from var(--ig-success-500) var(--y-contrast)) h 0 l/1); + --ig-success-600: rgb(5, 101, 4); + --ig-success-600-contrast: hsla(from color(from var(--ig-success-600) var(--y-contrast)) h 0 l/1); + --ig-success-700: rgb(11, 78, 9); + --ig-success-700-contrast: hsla(from color(from var(--ig-success-700) var(--y-contrast)) h 0 l/1); + --ig-success-800: rgb(13, 55, 11); + --ig-success-800-contrast: hsla(from color(from var(--ig-success-800) var(--y-contrast)) h 0 l/1); + --ig-success-900: rgb(7, 25, 6); + --ig-success-900-contrast: hsla(from color(from var(--ig-success-900) var(--y-contrast)) h 0 l/1); + --ig-success-seed: green; + --ig-success-seed-contrast: hsla(from color(from var(--ig-success-seed) var(--y-contrast)) h 0 l/1); + --ig-success-A100: rgb(56, 251, 50); + --ig-success-A100-contrast: hsla(from color(from var(--ig-success-A100) var(--y-contrast)) h 0 l/1); + --ig-success-A200: rgb(0, 187, 0); + --ig-success-A200-contrast: hsla(from color(from var(--ig-success-A200) var(--y-contrast)) h 0 l/1); + --ig-success-A400: rgb(0, 144, 0); + --ig-success-A400-contrast: hsla(from color(from var(--ig-success-A400) var(--y-contrast)) h 0 l/1); + --ig-success-A700: rgb(0, 114, 0); + --ig-success-A700-contrast: hsla(from color(from var(--ig-success-A700) var(--y-contrast)) h 0 l/1); + --ig-warn-50: rgb(251, 233, 213); + --ig-warn-50-contrast: hsla(from color(from var(--ig-warn-50) var(--y-contrast)) h 0 l/1); + --ig-warn-100: rgb(247, 195, 133); + --ig-warn-100-contrast: hsla(from color(from var(--ig-warn-100) var(--y-contrast)) h 0 l/1); + --ig-warn-200: rgb(233, 161, 65); + --ig-warn-200-contrast: hsla(from color(from var(--ig-warn-200) var(--y-contrast)) h 0 l/1); + --ig-warn-300: rgb(207, 135, 24); + --ig-warn-300-contrast: hsla(from color(from var(--ig-warn-300) var(--y-contrast)) h 0 l/1); + --ig-warn-400: rgb(177, 114, 4); + --ig-warn-400-contrast: hsla(from color(from var(--ig-warn-400) var(--y-contrast)) h 0 l/1); + --ig-warn-500: rgb(149, 94, 1); + --ig-warn-500-contrast: hsla(from color(from var(--ig-warn-500) var(--y-contrast)) h 0 l/1); + --ig-warn-600: rgb(121, 77, 4); + --ig-warn-600-contrast: hsla(from color(from var(--ig-warn-600) var(--y-contrast)) h 0 l/1); + --ig-warn-700: rgb(94, 60, 9); + --ig-warn-700-contrast: hsla(from color(from var(--ig-warn-700) var(--y-contrast)) h 0 l/1); + --ig-warn-800: rgb(65, 42, 11); + --ig-warn-800-contrast: hsla(from color(from var(--ig-warn-800) var(--y-contrast)) h 0 l/1); + --ig-warn-900: rgb(30, 19, 6); + --ig-warn-900-contrast: hsla(from color(from var(--ig-warn-900) var(--y-contrast)) h 0 l/1); + --ig-warn-seed: orange; + --ig-warn-seed-contrast: hsla(from color(from var(--ig-warn-seed) var(--y-contrast)) h 0 l/1); + --ig-warn-A100: rgb(255, 211, 156); + --ig-warn-A100-contrast: hsla(from color(from var(--ig-warn-A100) var(--y-contrast)) h 0 l/1); + --ig-warn-A200: rgb(222, 143, 4); + --ig-warn-A200-contrast: hsla(from color(from var(--ig-warn-A200) var(--y-contrast)) h 0 l/1); + --ig-warn-A400: rgb(172, 110, 0); + --ig-warn-A400-contrast: hsla(from color(from var(--ig-warn-A400) var(--y-contrast)) h 0 l/1); + --ig-warn-A700: rgb(136, 86, 0); + --ig-warn-A700-contrast: hsla(from color(from var(--ig-warn-A700) var(--y-contrast)) h 0 l/1); + --ig-error-50: rgb(254, 231, 227); + --ig-error-50-contrast: hsla(from color(from var(--ig-error-50) var(--y-contrast)) h 0 l/1); + --ig-error-100: rgb(255, 188, 177); + --ig-error-100-contrast: hsla(from color(from var(--ig-error-100) var(--y-contrast)) h 0 l/1); + --ig-error-200: rgb(255, 146, 130); + --ig-error-200-contrast: hsla(from color(from var(--ig-error-200) var(--y-contrast)) h 0 l/1); + --ig-error-300: rgb(255, 99, 82); + --ig-error-300-contrast: hsla(from color(from var(--ig-error-300) var(--y-contrast)) h 0 l/1); + --ig-error-400: rgb(237, 58, 45); + --ig-error-400-contrast: hsla(from color(from var(--ig-error-400) var(--y-contrast)) h 0 l/1); + --ig-error-500: rgb(209, 28, 19); + --ig-error-500-contrast: hsla(from color(from var(--ig-error-500) var(--y-contrast)) h 0 l/1); + --ig-error-600: rgb(174, 16, 9); + --ig-error-600-contrast: hsla(from color(from var(--ig-error-600) var(--y-contrast)) h 0 l/1); + --ig-error-700: rgb(135, 17, 11); + --ig-error-700-contrast: hsla(from color(from var(--ig-error-700) var(--y-contrast)) h 0 l/1); + --ig-error-800: rgb(93, 18, 12); + --ig-error-800-contrast: hsla(from color(from var(--ig-error-800) var(--y-contrast)) h 0 l/1); + --ig-error-900: rgb(44, 9, 6); + --ig-error-900-contrast: hsla(from color(from var(--ig-error-900) var(--y-contrast)) h 0 l/1); + --ig-error-seed: red; + --ig-error-seed-contrast: hsla(from color(from var(--ig-error-seed) var(--y-contrast)) h 0 l/1); + --ig-error-A100: rgb(255, 207, 198); + --ig-error-A100-contrast: hsla(from color(from var(--ig-error-A100) var(--y-contrast)) h 0 l/1); + --ig-error-A200: rgb(255, 119, 101); + --ig-error-A200-contrast: hsla(from color(from var(--ig-error-A200) var(--y-contrast)) h 0 l/1); + --ig-error-A400: rgb(242, 34, 24); + --ig-error-A400-contrast: hsla(from color(from var(--ig-error-A400) var(--y-contrast)) h 0 l/1); + --ig-error-A700: rgb(197, 2, 1); + --ig-error-A700-contrast: hsla(from color(from var(--ig-error-A700) var(--y-contrast)) h 0 l/1); +} + +/* END_OUTPUT */ +/* CONTAINED */ +:root { + --ig-primary-seed: #09f; + --ig-gray-seed: #333; +} + +/* END_CONTAINED */ +/* END_ASSERT */ +/* ASSERT: */ +/* OUTPUT */ +:root { + --ig-wcag-a: 0.31; + --ig-wcag-aa: 0.185; + --ig-wcag-aaa: 0.178; + --ig-contrast-level: var(--ig-wcag-aa); + --y: clamp(0, (y / var(--ig-contrast-level) - 1) * -infinity, 1); + --y-contrast: xyz-d65 var(--y) var(--y) var(--y); +} + +:root { + --ig-primary-50: rgb(226, 237, 251); + --ig-primary-50-contrast: hsla(from color(from var(--ig-primary-50) var(--y-contrast)) h 0 l/1); + --ig-primary-100: rgb(172, 207, 251); + --ig-primary-100-contrast: hsla(from color(from var(--ig-primary-100) var(--y-contrast)) h 0 l/1); + --ig-primary-200: rgb(117, 180, 250); + --ig-primary-200-contrast: hsla(from color(from var(--ig-primary-200) var(--y-contrast)) h 0 l/1); + --ig-primary-300: rgb(67, 155, 239); + --ig-primary-300-contrast: hsla(from color(from var(--ig-primary-300) var(--y-contrast)) h 0 l/1); + --ig-primary-400: rgb(27, 131, 214); + --ig-primary-400-contrast: hsla(from color(from var(--ig-primary-400) var(--y-contrast)) h 0 l/1); + --ig-primary-500: rgb(9, 109, 183); + --ig-primary-500-contrast: hsla(from color(from var(--ig-primary-500) var(--y-contrast)) h 0 l/1); + --ig-primary-600: rgb(6, 89, 150); + --ig-primary-600-contrast: hsla(from color(from var(--ig-primary-600) var(--y-contrast)) h 0 l/1); + --ig-primary-700: rgb(11, 69, 116); + --ig-primary-700-contrast: hsla(from color(from var(--ig-primary-700) var(--y-contrast)) h 0 l/1); + --ig-primary-800: rgb(12, 48, 80); + --ig-primary-800-contrast: hsla(from color(from var(--ig-primary-800) var(--y-contrast)) h 0 l/1); + --ig-primary-900: rgb(6, 22, 37); + --ig-primary-900-contrast: hsla(from color(from var(--ig-primary-900) var(--y-contrast)) h 0 l/1); + --ig-primary-seed: #09f; + --ig-primary-seed-contrast: hsla(from color(from var(--ig-primary-seed) var(--y-contrast)) h 0 l/1); + --ig-primary-A100: rgb(191, 221, 255); + --ig-primary-A100-contrast: hsla(from color(from var(--ig-primary-A100) var(--y-contrast)) h 0 l/1); + --ig-primary-A200: rgb(73, 164, 255); + --ig-primary-A200-contrast: hsla(from color(from var(--ig-primary-A200) var(--y-contrast)) h 0 l/1); + --ig-primary-A400: rgb(4, 127, 213); + --ig-primary-A400-contrast: hsla(from color(from var(--ig-primary-A400) var(--y-contrast)) h 0 l/1); + --ig-primary-A700: rgb(0, 100, 169); + --ig-primary-A700-contrast: hsla(from color(from var(--ig-primary-A700) var(--y-contrast)) h 0 l/1); + --ig-secondary-50: rgb(240, 235, 245); + --ig-secondary-50-contrast: hsla(from color(from var(--ig-secondary-50) var(--y-contrast)) h 0 l/1); + --ig-secondary-100: rgb(213, 198, 231); + --ig-secondary-100-contrast: hsla(from color(from var(--ig-secondary-100) var(--y-contrast)) h 0 l/1); + --ig-secondary-200: rgb(190, 166, 221); + --ig-secondary-200-contrast: hsla(from color(from var(--ig-secondary-200) var(--y-contrast)) h 0 l/1); + --ig-secondary-300: rgb(168, 136, 211); + --ig-secondary-300-contrast: hsla(from color(from var(--ig-secondary-300) var(--y-contrast)) h 0 l/1); + --ig-secondary-400: rgb(146, 110, 198); + --ig-secondary-400-contrast: hsla(from color(from var(--ig-secondary-400) var(--y-contrast)) h 0 l/1); + --ig-secondary-500: rgb(125, 87, 177); + --ig-secondary-500-contrast: hsla(from color(from var(--ig-secondary-500) var(--y-contrast)) h 0 l/1); + --ig-secondary-600: rgb(103, 69, 150); + --ig-secondary-600-contrast: hsla(from color(from var(--ig-secondary-600) var(--y-contrast)) h 0 l/1); + --ig-secondary-700: rgb(80, 53, 117); + --ig-secondary-700-contrast: hsla(from color(from var(--ig-secondary-700) var(--y-contrast)) h 0 l/1); + --ig-secondary-800: rgb(56, 38, 81); + --ig-secondary-800-contrast: hsla(from color(from var(--ig-secondary-800) var(--y-contrast)) h 0 l/1); + --ig-secondary-900: rgb(25, 17, 38); + --ig-secondary-900-contrast: hsla(from color(from var(--ig-secondary-900) var(--y-contrast)) h 0 l/1); + --ig-secondary-seed: #97c; + --ig-secondary-seed-contrast: hsla(from color(from var(--ig-secondary-seed) var(--y-contrast)) h 0 l/1); + --ig-secondary-A100: rgb(233, 209, 255); + --ig-secondary-A100-contrast: hsla(from color(from var(--ig-secondary-A100) var(--y-contrast)) h 0 l/1); + --ig-secondary-A200: rgb(192, 134, 255); + --ig-secondary-A200-contrast: hsla(from color(from var(--ig-secondary-A200) var(--y-contrast)) h 0 l/1); + --ig-secondary-A400: rgb(163, 75, 255); + --ig-secondary-A400-contrast: hsla(from color(from var(--ig-secondary-A400) var(--y-contrast)) h 0 l/1); + --ig-secondary-A700: rgb(139, 23, 233); + --ig-secondary-A700-contrast: hsla(from color(from var(--ig-secondary-A700) var(--y-contrast)) h 0 l/1); + --ig-gray-50: rgb(251, 251, 251); + --ig-gray-50-contrast: hsla(from color(from var(--ig-gray-50) var(--y-contrast)) h 0 l/1); + --ig-gray-100: rgb(247, 247, 247); + --ig-gray-100-contrast: hsla(from color(from var(--ig-gray-100) var(--y-contrast)) h 0 l/1); + --ig-gray-200: rgb(236, 236, 236); + --ig-gray-200-contrast: hsla(from color(from var(--ig-gray-200) var(--y-contrast)) h 0 l/1); + --ig-gray-300: rgb(217, 217, 217); + --ig-gray-300-contrast: hsla(from color(from var(--ig-gray-300) var(--y-contrast)) h 0 l/1); + --ig-gray-400: rgb(193, 193, 193); + --ig-gray-400-contrast: hsla(from color(from var(--ig-gray-400) var(--y-contrast)) h 0 l/1); + --ig-gray-500: rgb(164, 164, 164); + --ig-gray-500-contrast: hsla(from color(from var(--ig-gray-500) var(--y-contrast)) h 0 l/1); + --ig-gray-600: rgb(132, 132, 132); + --ig-gray-600-contrast: hsla(from color(from var(--ig-gray-600) var(--y-contrast)) h 0 l/1); + --ig-gray-700: rgb(99, 99, 99); + --ig-gray-700-contrast: hsla(from color(from var(--ig-gray-700) var(--y-contrast)) h 0 l/1); + --ig-gray-800: rgb(66, 66, 66); + --ig-gray-800-contrast: hsla(from color(from var(--ig-gray-800) var(--y-contrast)) h 0 l/1); + --ig-gray-900: rgb(33, 33, 33); + --ig-gray-900-contrast: hsla(from color(from var(--ig-gray-900) var(--y-contrast)) h 0 l/1); + --ig-gray-seed: #000; + --ig-gray-seed-contrast: hsla(from color(from var(--ig-gray-seed) var(--y-contrast)) h 0 l/1); + --ig-surface-50: rgb(255, 255, 255); + --ig-surface-50-contrast: hsla(from color(from var(--ig-surface-50) var(--y-contrast)) h 0 l/1); + --ig-surface-100: rgb(255, 255, 255); + --ig-surface-100-contrast: hsla(from color(from var(--ig-surface-100) var(--y-contrast)) h 0 l/1); + --ig-surface-200: rgb(255, 255, 255); + --ig-surface-200-contrast: hsla(from color(from var(--ig-surface-200) var(--y-contrast)) h 0 l/1); + --ig-surface-300: rgb(255, 255, 255); + --ig-surface-300-contrast: hsla(from color(from var(--ig-surface-300) var(--y-contrast)) h 0 l/1); + --ig-surface-400: rgb(255, 255, 255); + --ig-surface-400-contrast: hsla(from color(from var(--ig-surface-400) var(--y-contrast)) h 0 l/1); + --ig-surface-500: rgb(255, 255, 255); + --ig-surface-500-contrast: hsla(from color(from var(--ig-surface-500) var(--y-contrast)) h 0 l/1); + --ig-surface-600: rgb(229, 229, 229); + --ig-surface-600-contrast: hsla(from color(from var(--ig-surface-600) var(--y-contrast)) h 0 l/1); + --ig-surface-700: rgb(206, 206, 206); + --ig-surface-700-contrast: hsla(from color(from var(--ig-surface-700) var(--y-contrast)) h 0 l/1); + --ig-surface-800: rgb(185, 185, 185); + --ig-surface-800-contrast: hsla(from color(from var(--ig-surface-800) var(--y-contrast)) h 0 l/1); + --ig-surface-900: rgb(165, 165, 165); + --ig-surface-900-contrast: hsla(from color(from var(--ig-surface-900) var(--y-contrast)) h 0 l/1); + --ig-surface-seed: #fff; + --ig-surface-seed-contrast: hsla(from color(from var(--ig-surface-seed) var(--y-contrast)) h 0 l/1); + --ig-surface-A100: rgb(218, 218, 218); + --ig-surface-A100-contrast: hsla(from color(from var(--ig-surface-A100) var(--y-contrast)) h 0 l/1); + --ig-surface-A200: rgb(161, 161, 161); + --ig-surface-A200-contrast: hsla(from color(from var(--ig-surface-A200) var(--y-contrast)) h 0 l/1); + --ig-surface-A400: rgb(124, 124, 124); + --ig-surface-A400-contrast: hsla(from color(from var(--ig-surface-A400) var(--y-contrast)) h 0 l/1); + --ig-surface-A700: rgb(97, 97, 97); + --ig-surface-A700-contrast: hsla(from color(from var(--ig-surface-A700) var(--y-contrast)) h 0 l/1); + --ig-info-50: rgb(232, 235, 252); + --ig-info-50-contrast: hsla(from color(from var(--ig-info-50) var(--y-contrast)) h 0 l/1); + --ig-info-100: rgb(190, 203, 253); + --ig-info-100-contrast: hsla(from color(from var(--ig-info-100) var(--y-contrast)) h 0 l/1); + --ig-info-200: rgb(149, 173, 255); + --ig-info-200-contrast: hsla(from color(from var(--ig-info-200) var(--y-contrast)) h 0 l/1); + --ig-info-300: rgb(109, 145, 255); + --ig-info-300-contrast: hsla(from color(from var(--ig-info-300) var(--y-contrast)) h 0 l/1); + --ig-info-400: rgb(70, 117, 255); + --ig-info-400-contrast: hsla(from color(from var(--ig-info-400) var(--y-contrast)) h 0 l/1); + --ig-info-500: rgb(34, 91, 245); + --ig-info-500-contrast: hsla(from color(from var(--ig-info-500) var(--y-contrast)) h 0 l/1); + --ig-info-600: rgb(15, 67, 220); + --ig-info-600-contrast: hsla(from color(from var(--ig-info-600) var(--y-contrast)) h 0 l/1); + --ig-info-700: rgb(7, 50, 180); + --ig-info-700-contrast: hsla(from color(from var(--ig-info-700) var(--y-contrast)) h 0 l/1); + --ig-info-800: rgb(6, 36, 125); + --ig-info-800-contrast: hsla(from color(from var(--ig-info-800) var(--y-contrast)) h 0 l/1); + --ig-info-900: rgb(4, 18, 59); + --ig-info-900-contrast: hsla(from color(from var(--ig-info-900) var(--y-contrast)) h 0 l/1); + --ig-info-seed: blue; + --ig-info-seed-contrast: hsla(from color(from var(--ig-info-seed) var(--y-contrast)) h 0 l/1); + --ig-info-A100: rgb(207, 217, 255); + --ig-info-A100-contrast: hsla(from color(from var(--ig-info-A100) var(--y-contrast)) h 0 l/1); + --ig-info-A200: rgb(124, 156, 255); + --ig-info-A200-contrast: hsla(from color(from var(--ig-info-A200) var(--y-contrast)) h 0 l/1); + --ig-info-A400: rgb(63, 113, 255); + --ig-info-A400-contrast: hsla(from color(from var(--ig-info-A400) var(--y-contrast)) h 0 l/1); + --ig-info-A700: rgb(16, 75, 249); + --ig-info-A700-contrast: hsla(from color(from var(--ig-info-A700) var(--y-contrast)) h 0 l/1); + --ig-success-50: rgb(193, 251, 187); + --ig-success-50-contrast: hsla(from color(from var(--ig-success-50) var(--y-contrast)) h 0 l/1); + --ig-success-100: rgb(93, 231, 86); + --ig-success-100-contrast: hsla(from color(from var(--ig-success-100) var(--y-contrast)) h 0 l/1); + --ig-success-200: rgb(47, 203, 42); + --ig-success-200-contrast: hsla(from color(from var(--ig-success-200) var(--y-contrast)) h 0 l/1); + --ig-success-300: rgb(17, 175, 14); + --ig-success-300-contrast: hsla(from color(from var(--ig-success-300) var(--y-contrast)) h 0 l/1); + --ig-success-400: rgb(1, 148, 1); + --ig-success-400-contrast: hsla(from color(from var(--ig-success-400) var(--y-contrast)) h 0 l/1); + --ig-success-500: rgb(1, 124, 0); + --ig-success-500-contrast: hsla(from color(from var(--ig-success-500) var(--y-contrast)) h 0 l/1); + --ig-success-600: rgb(5, 101, 4); + --ig-success-600-contrast: hsla(from color(from var(--ig-success-600) var(--y-contrast)) h 0 l/1); + --ig-success-700: rgb(11, 78, 9); + --ig-success-700-contrast: hsla(from color(from var(--ig-success-700) var(--y-contrast)) h 0 l/1); + --ig-success-800: rgb(13, 55, 11); + --ig-success-800-contrast: hsla(from color(from var(--ig-success-800) var(--y-contrast)) h 0 l/1); + --ig-success-900: rgb(7, 25, 6); + --ig-success-900-contrast: hsla(from color(from var(--ig-success-900) var(--y-contrast)) h 0 l/1); + --ig-success-seed: green; + --ig-success-seed-contrast: hsla(from color(from var(--ig-success-seed) var(--y-contrast)) h 0 l/1); + --ig-success-A100: rgb(56, 251, 50); + --ig-success-A100-contrast: hsla(from color(from var(--ig-success-A100) var(--y-contrast)) h 0 l/1); + --ig-success-A200: rgb(0, 187, 0); + --ig-success-A200-contrast: hsla(from color(from var(--ig-success-A200) var(--y-contrast)) h 0 l/1); + --ig-success-A400: rgb(0, 144, 0); + --ig-success-A400-contrast: hsla(from color(from var(--ig-success-A400) var(--y-contrast)) h 0 l/1); + --ig-success-A700: rgb(0, 114, 0); + --ig-success-A700-contrast: hsla(from color(from var(--ig-success-A700) var(--y-contrast)) h 0 l/1); + --ig-warn-50: rgb(251, 233, 213); + --ig-warn-50-contrast: hsla(from color(from var(--ig-warn-50) var(--y-contrast)) h 0 l/1); + --ig-warn-100: rgb(247, 195, 133); + --ig-warn-100-contrast: hsla(from color(from var(--ig-warn-100) var(--y-contrast)) h 0 l/1); + --ig-warn-200: rgb(233, 161, 65); + --ig-warn-200-contrast: hsla(from color(from var(--ig-warn-200) var(--y-contrast)) h 0 l/1); + --ig-warn-300: rgb(207, 135, 24); + --ig-warn-300-contrast: hsla(from color(from var(--ig-warn-300) var(--y-contrast)) h 0 l/1); + --ig-warn-400: rgb(177, 114, 4); + --ig-warn-400-contrast: hsla(from color(from var(--ig-warn-400) var(--y-contrast)) h 0 l/1); + --ig-warn-500: rgb(149, 94, 1); + --ig-warn-500-contrast: hsla(from color(from var(--ig-warn-500) var(--y-contrast)) h 0 l/1); + --ig-warn-600: rgb(121, 77, 4); + --ig-warn-600-contrast: hsla(from color(from var(--ig-warn-600) var(--y-contrast)) h 0 l/1); + --ig-warn-700: rgb(94, 60, 9); + --ig-warn-700-contrast: hsla(from color(from var(--ig-warn-700) var(--y-contrast)) h 0 l/1); + --ig-warn-800: rgb(65, 42, 11); + --ig-warn-800-contrast: hsla(from color(from var(--ig-warn-800) var(--y-contrast)) h 0 l/1); + --ig-warn-900: rgb(30, 19, 6); + --ig-warn-900-contrast: hsla(from color(from var(--ig-warn-900) var(--y-contrast)) h 0 l/1); + --ig-warn-seed: orange; + --ig-warn-seed-contrast: hsla(from color(from var(--ig-warn-seed) var(--y-contrast)) h 0 l/1); + --ig-warn-A100: rgb(255, 211, 156); + --ig-warn-A100-contrast: hsla(from color(from var(--ig-warn-A100) var(--y-contrast)) h 0 l/1); + --ig-warn-A200: rgb(222, 143, 4); + --ig-warn-A200-contrast: hsla(from color(from var(--ig-warn-A200) var(--y-contrast)) h 0 l/1); + --ig-warn-A400: rgb(172, 110, 0); + --ig-warn-A400-contrast: hsla(from color(from var(--ig-warn-A400) var(--y-contrast)) h 0 l/1); + --ig-warn-A700: rgb(136, 86, 0); + --ig-warn-A700-contrast: hsla(from color(from var(--ig-warn-A700) var(--y-contrast)) h 0 l/1); + --ig-error-50: rgb(254, 231, 227); + --ig-error-50-contrast: hsla(from color(from var(--ig-error-50) var(--y-contrast)) h 0 l/1); + --ig-error-100: rgb(255, 188, 177); + --ig-error-100-contrast: hsla(from color(from var(--ig-error-100) var(--y-contrast)) h 0 l/1); + --ig-error-200: rgb(255, 146, 130); + --ig-error-200-contrast: hsla(from color(from var(--ig-error-200) var(--y-contrast)) h 0 l/1); + --ig-error-300: rgb(255, 99, 82); + --ig-error-300-contrast: hsla(from color(from var(--ig-error-300) var(--y-contrast)) h 0 l/1); + --ig-error-400: rgb(237, 58, 45); + --ig-error-400-contrast: hsla(from color(from var(--ig-error-400) var(--y-contrast)) h 0 l/1); + --ig-error-500: rgb(209, 28, 19); + --ig-error-500-contrast: hsla(from color(from var(--ig-error-500) var(--y-contrast)) h 0 l/1); + --ig-error-600: rgb(174, 16, 9); + --ig-error-600-contrast: hsla(from color(from var(--ig-error-600) var(--y-contrast)) h 0 l/1); + --ig-error-700: rgb(135, 17, 11); + --ig-error-700-contrast: hsla(from color(from var(--ig-error-700) var(--y-contrast)) h 0 l/1); + --ig-error-800: rgb(93, 18, 12); + --ig-error-800-contrast: hsla(from color(from var(--ig-error-800) var(--y-contrast)) h 0 l/1); + --ig-error-900: rgb(44, 9, 6); + --ig-error-900-contrast: hsla(from color(from var(--ig-error-900) var(--y-contrast)) h 0 l/1); + --ig-error-seed: red; + --ig-error-seed-contrast: hsla(from color(from var(--ig-error-seed) var(--y-contrast)) h 0 l/1); + --ig-error-A100: rgb(255, 207, 198); + --ig-error-A100-contrast: hsla(from color(from var(--ig-error-A100) var(--y-contrast)) h 0 l/1); + --ig-error-A200: rgb(255, 119, 101); + --ig-error-A200-contrast: hsla(from color(from var(--ig-error-A200) var(--y-contrast)) h 0 l/1); + --ig-error-A400: rgb(242, 34, 24); + --ig-error-A400-contrast: hsla(from color(from var(--ig-error-A400) var(--y-contrast)) h 0 l/1); + --ig-error-A700: rgb(197, 2, 1); + --ig-error-A700-contrast: hsla(from color(from var(--ig-error-A700) var(--y-contrast)) h 0 l/1); +} + +/* END_OUTPUT */ +/* CONTAINED */ +:root { + --ig-primary-seed: #09f; + --ig-gray-seed: #000; +} + +/* END_CONTAINED */ +/* END_ASSERT */ +/* */ +/* */ +/* */ +/* */ +/* # Module: Typography */ +/* -------------------- */ +/* # Module: Typography :: operations */ +/* ---------------------------------- */ +/* Test: should convert pixel numbers to rem */ +/* ✔ [assert-equal] should convert pixel numbers to rem */ +/* */ +/* Test: should convert unitless numbers to rem */ +/* ✔ [assert-equal] should convert unitless numbers to rem */ +/* */ +/* Test: should convert pixel numbers to em */ +/* ✔ [assert-equal] should convert pixel numbers to em */ +/* */ +/* Test: should convert unitless numbers to em */ +/* ✔ [assert-equal] should convert unitless numbers to em */ +/* */ +/* Test: should convert relative unit numbers to pixels */ +/* ✔ [assert-equal] should convert relative unit numbers to pixels */ +/* ✔ [assert-equal] should convert relative unit numbers to pixels */ +/* */ +/* Test: should convert unitless numbers to pixels */ +/* ✔ [assert-equal] should convert unitless numbers to pixels */ +/* */ +/* */ +/* # Module: Typography :: generation */ +/* ---------------------------------- */ +/* Test: should produce a map of default type style rules matching the ITypeStyle map */ +/* ✔ [assert-equal] should produce a map of default type style rules matching the ITypeStyle map */ +/* ✔ [assert-equal] should produce a map of default type style rules matching the ITypeStyle map */ +/* ✔ [assert-equal] should produce a map of default type style rules matching the ITypeStyle map */ +/* ✔ [assert-equal] should produce a map of default type style rules matching the ITypeStyle map */ +/* ✔ [assert-equal] should produce a map of default type style rules matching the ITypeStyle map */ +/* ✔ [assert-equal] should produce a map of default type style rules matching the ITypeStyle map */ +/* ✔ [assert-equal] should produce a map of default type style rules matching the ITypeStyle map */ +/* ✔ [assert-equal] should produce a map of default type style rules matching the ITypeStyle map */ +/* ✔ [assert-equal] should produce a map of default type style rules matching the ITypeStyle map */ +/* */ +/* Test: should only produce a map of allowed type style rules */ +/* ✔ [assert-equal] should only produce a map of allowed type style rules */ +/* ✔ [assert-equal] should only produce a map of allowed type style rules */ +/* ✔ [assert-equal] should only produce a map of allowed type style rules */ +/* ✔ [assert-equal] should only produce a map of allowed type style rules */ +/* ✔ [assert-equal] should only produce a map of allowed type style rules */ +/* ✔ [assert-equal] should only produce a map of allowed type style rules */ +/* ✔ [assert-equal] should only produce a map of allowed type style rules */ +/* ✔ [assert-equal] should only produce a map of allowed type style rules */ +/* ✔ [assert-equal] should only produce a map of allowed type style rules */ +/* ✔ [assert-false] should only produce a map of allowed type style rules */ +/* */ +/* Test: should produce a type scale map of type style values for each category */ +/* ✔ [assert-equal] should produce a type scale map of type style values for each category */ +/* ✔ [assert-equal] should produce a type scale map of type style values for each category */ +/* ✔ [assert-equal] should produce a type scale map of type style values for each category */ +/* ✔ [assert-equal] should produce a type scale map of type style values for each category */ +/* ✔ [assert-equal] should produce a type scale map of type style values for each category */ +/* ✔ [assert-equal] should produce a type scale map of type style values for each category */ +/* ✔ [assert-equal] should produce a type scale map of type style values for each category */ +/* ✔ [assert-equal] should produce a type scale map of type style values for each category */ +/* ✔ [assert-equal] should produce a type scale map of type style values for each category */ +/* ✔ [assert-equal] should produce a type scale map of type style values for each category */ +/* ✔ [assert-equal] should produce a type scale map of type style values for each category */ +/* ✔ [assert-equal] should produce a type scale map of type style values for each category */ +/* ✔ [assert-equal] should produce a type scale map of type style values for each category */ +/* ✔ [assert-equal] should produce a type scale map of type style values for each category */ +/* */ +/* Test: should retreive type styles from a scale */ +/* ✔ [assert-equal] should retreive type styles from a scale */ +/* ✔ [assert-equal] should retreive type styles from a scale */ +/* ✔ [assert-equal] should retreive type styles from a scale */ +/* ✔ [assert-equal] should retreive type styles from a scale */ +/* ✔ [assert-equal] should retreive type styles from a scale */ +/* ✔ [assert-equal] should retreive type styles from a scale */ +/* ✔ [assert-equal] should retreive type styles from a scale */ +/* ✔ [assert-equal] should retreive type styles from a scale */ +/* ✔ [assert-equal] should retreive type styles from a scale */ +/* */ +/* Test: generates CSS variables from a type style map without font-family if its value is "inherit" */ +/* ASSERT: */ +/* OUTPUT */ +.test-output { + --ig-h1-font-size: 96px; + --ig-h1-font-weight: normal; + --ig-h1-font-style: normal; + --ig-h1-line-height: normal; + --ig-h1-letter-spacing: normal; + --ig-h1-text-transform: none; + --ig-h1-margin-top: 0; + --ig-h1-margin-bottom: 0; +} + +/* END_OUTPUT */ +/* EXPECTED */ +.test-output { + --ig-h1-font-size: 96px; + --ig-h1-font-weight: normal; + --ig-h1-font-style: normal; + --ig-h1-line-height: normal; + --ig-h1-letter-spacing: normal; + --ig-h1-text-transform: none; + --ig-h1-margin-top: 0; + --ig-h1-margin-bottom: 0; +} + +/* END_EXPECTED */ +/* END_ASSERT */ +/* */ +/* Test: generates CSS variables for a type style map with font-family if its value is not "inherit" */ +/* ASSERT: */ +/* OUTPUT */ +.test-output { + --ig-h1-font-family: 'American Typewriter', serif; + --ig-h1-font-size: 96px; + --ig-h1-font-weight: normal; + --ig-h1-font-style: normal; + --ig-h1-line-height: normal; + --ig-h1-letter-spacing: normal; + --ig-h1-text-transform: none; + --ig-h1-margin-top: 0; + --ig-h1-margin-bottom: 0; +} + +/* END_OUTPUT */ +/* EXPECTED */ +.test-output { + --ig-h1-font-family: 'American Typewriter', serif; + --ig-h1-font-size: 96px; + --ig-h1-font-weight: normal; + --ig-h1-font-style: normal; + --ig-h1-line-height: normal; + --ig-h1-letter-spacing: normal; + --ig-h1-text-transform: none; + --ig-h1-margin-top: 0; + --ig-h1-margin-bottom: 0; +} + +/* END_EXPECTED */ +/* END_ASSERT */ +/* */ +/* Test: should include all styles from a custom type category */ +/* ASSERT: */ +/* OUTPUT */ +.test-output { + font-family: var(--ig-calendar-labels-font-family, var(--ig-font-family)); + font-size: var(--ig-calendar-labels-font-size); + font-weight: var(--ig-calendar-labels-font-weight); + font-style: var(--ig-calendar-labels-font-style); + line-height: var(--ig-calendar-labels-line-height); + letter-spacing: var(--ig-calendar-labels-letter-spacing); + text-transform: var(--ig-calendar-labels-text-transform); + margin-top: var(--ig-calendar-labels-margin-top); + margin-bottom: var(--ig-calendar-labels-margin-bottom); +} + +/* END_OUTPUT */ +/* EXPECTED */ +.test-output { + font-family: var(--ig-calendar-labels-font-family, var(--ig-font-family)); + font-size: var(--ig-calendar-labels-font-size); + font-weight: var(--ig-calendar-labels-font-weight); + font-style: var(--ig-calendar-labels-font-style); + line-height: var(--ig-calendar-labels-line-height); + letter-spacing: var(--ig-calendar-labels-letter-spacing); + text-transform: var(--ig-calendar-labels-text-transform); + margin-top: var(--ig-calendar-labels-margin-top); + margin-bottom: var(--ig-calendar-labels-margin-bottom); +} + +/* END_EXPECTED */ +/* END_ASSERT */ +/* */ +/* Test: should include type styles with CSS var refs as values for a specific category */ +/* ASSERT: */ +/* OUTPUT */ +.test-output .my-h1 { + font-family: var(--ig-h1-font-family, var(--ig-font-family)); + font-size: var(--ig-h1-font-size); + font-weight: var(--ig-h1-font-weight); + font-style: var(--ig-h1-font-style); + line-height: var(--ig-h1-line-height); + letter-spacing: var(--ig-h1-letter-spacing); + text-transform: var(--ig-h1-text-transform); + margin-top: var(--ig-h1-margin-top); + margin-bottom: var(--ig-h1-margin-bottom); +} + +/* END_OUTPUT */ +/* EXPECTED */ +.test-output .my-h1 { + font-family: var(--ig-h1-font-family, var(--ig-font-family)); + font-size: var(--ig-h1-font-size); + font-weight: var(--ig-h1-font-weight); + font-style: var(--ig-h1-font-style); + line-height: var(--ig-h1-line-height); + letter-spacing: var(--ig-h1-letter-spacing); + text-transform: var(--ig-h1-text-transform); + margin-top: var(--ig-h1-margin-top); + margin-bottom: var(--ig-h1-margin-bottom); +} + +/* END_EXPECTED */ +/* END_ASSERT */ +/* */ +/* Test: should include CSS classes with style rules for all categories in a type scale */ +/* ASSERT: */ +/* OUTPUT */ +.ig-typography .ig-typography__h1 { + font-family: var(--ig-h1-font-family, var(--ig-font-family)); + font-size: var(--ig-h1-font-size); + font-weight: var(--ig-h1-font-weight); + font-style: var(--ig-h1-font-style); + line-height: var(--ig-h1-line-height); + letter-spacing: var(--ig-h1-letter-spacing); + text-transform: var(--ig-h1-text-transform); + margin-top: var(--ig-h1-margin-top); + margin-bottom: var(--ig-h1-margin-bottom); +} +.ig-typography .ig-typography__h2 { + font-family: var(--ig-h2-font-family, var(--ig-font-family)); + font-size: var(--ig-h2-font-size); + font-weight: var(--ig-h2-font-weight); + font-style: var(--ig-h2-font-style); + line-height: var(--ig-h2-line-height); + letter-spacing: var(--ig-h2-letter-spacing); + text-transform: var(--ig-h2-text-transform); + margin-top: var(--ig-h2-margin-top); + margin-bottom: var(--ig-h2-margin-bottom); +} +.ig-typography .ig-typography__h3 { + font-family: var(--ig-h3-font-family, var(--ig-font-family)); + font-size: var(--ig-h3-font-size); + font-weight: var(--ig-h3-font-weight); + font-style: var(--ig-h3-font-style); + line-height: var(--ig-h3-line-height); + letter-spacing: var(--ig-h3-letter-spacing); + text-transform: var(--ig-h3-text-transform); + margin-top: var(--ig-h3-margin-top); + margin-bottom: var(--ig-h3-margin-bottom); +} +.ig-typography .ig-typography__h4 { + font-family: var(--ig-h4-font-family, var(--ig-font-family)); + font-size: var(--ig-h4-font-size); + font-weight: var(--ig-h4-font-weight); + font-style: var(--ig-h4-font-style); + line-height: var(--ig-h4-line-height); + letter-spacing: var(--ig-h4-letter-spacing); + text-transform: var(--ig-h4-text-transform); + margin-top: var(--ig-h4-margin-top); + margin-bottom: var(--ig-h4-margin-bottom); +} +.ig-typography .ig-typography__h5 { + font-family: var(--ig-h5-font-family, var(--ig-font-family)); + font-size: var(--ig-h5-font-size); + font-weight: var(--ig-h5-font-weight); + font-style: var(--ig-h5-font-style); + line-height: var(--ig-h5-line-height); + letter-spacing: var(--ig-h5-letter-spacing); + text-transform: var(--ig-h5-text-transform); + margin-top: var(--ig-h5-margin-top); + margin-bottom: var(--ig-h5-margin-bottom); +} +.ig-typography .ig-typography__h6 { + font-family: var(--ig-h6-font-family, var(--ig-font-family)); + font-size: var(--ig-h6-font-size); + font-weight: var(--ig-h6-font-weight); + font-style: var(--ig-h6-font-style); + line-height: var(--ig-h6-line-height); + letter-spacing: var(--ig-h6-letter-spacing); + text-transform: var(--ig-h6-text-transform); + margin-top: var(--ig-h6-margin-top); + margin-bottom: var(--ig-h6-margin-bottom); +} +.ig-typography .ig-typography__subtitle-1 { + font-family: var(--ig-subtitle-1-font-family, var(--ig-font-family)); + font-size: var(--ig-subtitle-1-font-size); + font-weight: var(--ig-subtitle-1-font-weight); + font-style: var(--ig-subtitle-1-font-style); + line-height: var(--ig-subtitle-1-line-height); + letter-spacing: var(--ig-subtitle-1-letter-spacing); + text-transform: var(--ig-subtitle-1-text-transform); + margin-top: var(--ig-subtitle-1-margin-top); + margin-bottom: var(--ig-subtitle-1-margin-bottom); +} +.ig-typography .ig-typography__subtitle-2 { + font-family: var(--ig-subtitle-2-font-family, var(--ig-font-family)); + font-size: var(--ig-subtitle-2-font-size); + font-weight: var(--ig-subtitle-2-font-weight); + font-style: var(--ig-subtitle-2-font-style); + line-height: var(--ig-subtitle-2-line-height); + letter-spacing: var(--ig-subtitle-2-letter-spacing); + text-transform: var(--ig-subtitle-2-text-transform); + margin-top: var(--ig-subtitle-2-margin-top); + margin-bottom: var(--ig-subtitle-2-margin-bottom); +} +.ig-typography .ig-typography__body-1 { + font-family: var(--ig-body-1-font-family, var(--ig-font-family)); + font-size: var(--ig-body-1-font-size); + font-weight: var(--ig-body-1-font-weight); + font-style: var(--ig-body-1-font-style); + line-height: var(--ig-body-1-line-height); + letter-spacing: var(--ig-body-1-letter-spacing); + text-transform: var(--ig-body-1-text-transform); + margin-top: var(--ig-body-1-margin-top); + margin-bottom: var(--ig-body-1-margin-bottom); +} +.ig-typography .ig-typography__body-2 { + font-family: var(--ig-body-2-font-family, var(--ig-font-family)); + font-size: var(--ig-body-2-font-size); + font-weight: var(--ig-body-2-font-weight); + font-style: var(--ig-body-2-font-style); + line-height: var(--ig-body-2-line-height); + letter-spacing: var(--ig-body-2-letter-spacing); + text-transform: var(--ig-body-2-text-transform); + margin-top: var(--ig-body-2-margin-top); + margin-bottom: var(--ig-body-2-margin-bottom); +} +.ig-typography .ig-typography__button { + font-family: var(--ig-button-font-family, var(--ig-font-family)); + font-size: var(--ig-button-font-size); + font-weight: var(--ig-button-font-weight); + font-style: var(--ig-button-font-style); + line-height: var(--ig-button-line-height); + letter-spacing: var(--ig-button-letter-spacing); + text-transform: var(--ig-button-text-transform); + margin-top: var(--ig-button-margin-top); + margin-bottom: var(--ig-button-margin-bottom); +} +.ig-typography .ig-typography__caption { + font-family: var(--ig-caption-font-family, var(--ig-font-family)); + font-size: var(--ig-caption-font-size); + font-weight: var(--ig-caption-font-weight); + font-style: var(--ig-caption-font-style); + line-height: var(--ig-caption-line-height); + letter-spacing: var(--ig-caption-letter-spacing); + text-transform: var(--ig-caption-text-transform); + margin-top: var(--ig-caption-margin-top); + margin-bottom: var(--ig-caption-margin-bottom); +} +.ig-typography .ig-typography__overline { + font-family: var(--ig-overline-font-family, var(--ig-font-family)); + font-size: var(--ig-overline-font-size); + font-weight: var(--ig-overline-font-weight); + font-style: var(--ig-overline-font-style); + line-height: var(--ig-overline-line-height); + letter-spacing: var(--ig-overline-letter-spacing); + text-transform: var(--ig-overline-text-transform); + margin-top: var(--ig-overline-margin-top); + margin-bottom: var(--ig-overline-margin-bottom); +} + +/* END_OUTPUT */ +/* EXPECTED */ +.ig-typography .ig-typography__h1 { + font-family: var(--ig-h1-font-family, var(--ig-font-family)); + font-size: var(--ig-h1-font-size); + font-weight: var(--ig-h1-font-weight); + font-style: var(--ig-h1-font-style); + line-height: var(--ig-h1-line-height); + letter-spacing: var(--ig-h1-letter-spacing); + text-transform: var(--ig-h1-text-transform); + margin-top: var(--ig-h1-margin-top); + margin-bottom: var(--ig-h1-margin-bottom); +} + +.ig-typography .ig-typography__h2 { + font-family: var(--ig-h2-font-family, var(--ig-font-family)); + font-size: var(--ig-h2-font-size); + font-weight: var(--ig-h2-font-weight); + font-style: var(--ig-h2-font-style); + line-height: var(--ig-h2-line-height); + letter-spacing: var(--ig-h2-letter-spacing); + text-transform: var(--ig-h2-text-transform); + margin-top: var(--ig-h2-margin-top); + margin-bottom: var(--ig-h2-margin-bottom); +} + +.ig-typography .ig-typography__h3 { + font-family: var(--ig-h3-font-family, var(--ig-font-family)); + font-size: var(--ig-h3-font-size); + font-weight: var(--ig-h3-font-weight); + font-style: var(--ig-h3-font-style); + line-height: var(--ig-h3-line-height); + letter-spacing: var(--ig-h3-letter-spacing); + text-transform: var(--ig-h3-text-transform); + margin-top: var(--ig-h3-margin-top); + margin-bottom: var(--ig-h3-margin-bottom); +} + +.ig-typography .ig-typography__h4 { + font-family: var(--ig-h4-font-family, var(--ig-font-family)); + font-size: var(--ig-h4-font-size); + font-weight: var(--ig-h4-font-weight); + font-style: var(--ig-h4-font-style); + line-height: var(--ig-h4-line-height); + letter-spacing: var(--ig-h4-letter-spacing); + text-transform: var(--ig-h4-text-transform); + margin-top: var(--ig-h4-margin-top); + margin-bottom: var(--ig-h4-margin-bottom); +} + +.ig-typography .ig-typography__h5 { + font-family: var(--ig-h5-font-family, var(--ig-font-family)); + font-size: var(--ig-h5-font-size); + font-weight: var(--ig-h5-font-weight); + font-style: var(--ig-h5-font-style); + line-height: var(--ig-h5-line-height); + letter-spacing: var(--ig-h5-letter-spacing); + text-transform: var(--ig-h5-text-transform); + margin-top: var(--ig-h5-margin-top); + margin-bottom: var(--ig-h5-margin-bottom); +} + +.ig-typography .ig-typography__h6 { + font-family: var(--ig-h6-font-family, var(--ig-font-family)); + font-size: var(--ig-h6-font-size); + font-weight: var(--ig-h6-font-weight); + font-style: var(--ig-h6-font-style); + line-height: var(--ig-h6-line-height); + letter-spacing: var(--ig-h6-letter-spacing); + text-transform: var(--ig-h6-text-transform); + margin-top: var(--ig-h6-margin-top); + margin-bottom: var(--ig-h6-margin-bottom); +} + +.ig-typography .ig-typography__subtitle-1 { + font-family: var(--ig-subtitle-1-font-family, var(--ig-font-family)); + font-size: var(--ig-subtitle-1-font-size); + font-weight: var(--ig-subtitle-1-font-weight); + font-style: var(--ig-subtitle-1-font-style); + line-height: var(--ig-subtitle-1-line-height); + letter-spacing: var(--ig-subtitle-1-letter-spacing); + text-transform: var(--ig-subtitle-1-text-transform); + margin-top: var(--ig-subtitle-1-margin-top); + margin-bottom: var(--ig-subtitle-1-margin-bottom); +} + +.ig-typography .ig-typography__subtitle-2 { + font-family: var(--ig-subtitle-2-font-family, var(--ig-font-family)); + font-size: var(--ig-subtitle-2-font-size); + font-weight: var(--ig-subtitle-2-font-weight); + font-style: var(--ig-subtitle-2-font-style); + line-height: var(--ig-subtitle-2-line-height); + letter-spacing: var(--ig-subtitle-2-letter-spacing); + text-transform: var(--ig-subtitle-2-text-transform); + margin-top: var(--ig-subtitle-2-margin-top); + margin-bottom: var(--ig-subtitle-2-margin-bottom); +} + +.ig-typography .ig-typography__body-1 { + font-family: var(--ig-body-1-font-family, var(--ig-font-family)); + font-size: var(--ig-body-1-font-size); + font-weight: var(--ig-body-1-font-weight); + font-style: var(--ig-body-1-font-style); + line-height: var(--ig-body-1-line-height); + letter-spacing: var(--ig-body-1-letter-spacing); + text-transform: var(--ig-body-1-text-transform); + margin-top: var(--ig-body-1-margin-top); + margin-bottom: var(--ig-body-1-margin-bottom); +} + +.ig-typography .ig-typography__body-2 { + font-family: var(--ig-body-2-font-family, var(--ig-font-family)); + font-size: var(--ig-body-2-font-size); + font-weight: var(--ig-body-2-font-weight); + font-style: var(--ig-body-2-font-style); + line-height: var(--ig-body-2-line-height); + letter-spacing: var(--ig-body-2-letter-spacing); + text-transform: var(--ig-body-2-text-transform); + margin-top: var(--ig-body-2-margin-top); + margin-bottom: var(--ig-body-2-margin-bottom); +} + +.ig-typography .ig-typography__button { + font-family: var(--ig-button-font-family, var(--ig-font-family)); + font-size: var(--ig-button-font-size); + font-weight: var(--ig-button-font-weight); + font-style: var(--ig-button-font-style); + line-height: var(--ig-button-line-height); + letter-spacing: var(--ig-button-letter-spacing); + text-transform: var(--ig-button-text-transform); + margin-top: var(--ig-button-margin-top); + margin-bottom: var(--ig-button-margin-bottom); +} + +.ig-typography .ig-typography__caption { + font-family: var(--ig-caption-font-family, var(--ig-font-family)); + font-size: var(--ig-caption-font-size); + font-weight: var(--ig-caption-font-weight); + font-style: var(--ig-caption-font-style); + line-height: var(--ig-caption-line-height); + letter-spacing: var(--ig-caption-letter-spacing); + text-transform: var(--ig-caption-text-transform); + margin-top: var(--ig-caption-margin-top); + margin-bottom: var(--ig-caption-margin-bottom); +} + +.ig-typography .ig-typography__overline { + font-family: var(--ig-overline-font-family, var(--ig-font-family)); + font-size: var(--ig-overline-font-size); + font-weight: var(--ig-overline-font-weight); + font-style: var(--ig-overline-font-style); + line-height: var(--ig-overline-line-height); + letter-spacing: var(--ig-overline-letter-spacing); + text-transform: var(--ig-overline-text-transform); + margin-top: var(--ig-overline-margin-top); + margin-bottom: var(--ig-overline-margin-bottom); +} + +/* END_EXPECTED */ +/* END_ASSERT */ +/* */ +/* Test: should include CSS headeing and paragraph style rules for mapped categories in a type scale, unwrapped by default */ +/* ASSERT: */ +/* OUTPUT */ +.test-output h1 { + font-family: var(--ig-h1-font-family, var(--ig-font-family)); + font-size: var(--ig-h1-font-size); + font-weight: var(--ig-h1-font-weight); + font-style: var(--ig-h1-font-style); + line-height: var(--ig-h1-line-height); + letter-spacing: var(--ig-h1-letter-spacing); + text-transform: var(--ig-h1-text-transform); + margin-top: var(--ig-h1-margin-top); + margin-bottom: var(--ig-h1-margin-bottom); +} +.test-output h2 { + font-family: var(--ig-h2-font-family, var(--ig-font-family)); + font-size: var(--ig-h2-font-size); + font-weight: var(--ig-h2-font-weight); + font-style: var(--ig-h2-font-style); + line-height: var(--ig-h2-line-height); + letter-spacing: var(--ig-h2-letter-spacing); + text-transform: var(--ig-h2-text-transform); + margin-top: var(--ig-h2-margin-top); + margin-bottom: var(--ig-h2-margin-bottom); +} +.test-output h3 { + font-family: var(--ig-h3-font-family, var(--ig-font-family)); + font-size: var(--ig-h3-font-size); + font-weight: var(--ig-h3-font-weight); + font-style: var(--ig-h3-font-style); + line-height: var(--ig-h3-line-height); + letter-spacing: var(--ig-h3-letter-spacing); + text-transform: var(--ig-h3-text-transform); + margin-top: var(--ig-h3-margin-top); + margin-bottom: var(--ig-h3-margin-bottom); +} +.test-output h4 { + font-family: var(--ig-h4-font-family, var(--ig-font-family)); + font-size: var(--ig-h4-font-size); + font-weight: var(--ig-h4-font-weight); + font-style: var(--ig-h4-font-style); + line-height: var(--ig-h4-line-height); + letter-spacing: var(--ig-h4-letter-spacing); + text-transform: var(--ig-h4-text-transform); + margin-top: var(--ig-h4-margin-top); + margin-bottom: var(--ig-h4-margin-bottom); +} +.test-output h5 { + font-family: var(--ig-h5-font-family, var(--ig-font-family)); + font-size: var(--ig-h5-font-size); + font-weight: var(--ig-h5-font-weight); + font-style: var(--ig-h5-font-style); + line-height: var(--ig-h5-line-height); + letter-spacing: var(--ig-h5-letter-spacing); + text-transform: var(--ig-h5-text-transform); + margin-top: var(--ig-h5-margin-top); + margin-bottom: var(--ig-h5-margin-bottom); +} +.test-output h6 { + font-family: var(--ig-h6-font-family, var(--ig-font-family)); + font-size: var(--ig-h6-font-size); + font-weight: var(--ig-h6-font-weight); + font-style: var(--ig-h6-font-style); + line-height: var(--ig-h6-line-height); + letter-spacing: var(--ig-h6-letter-spacing); + text-transform: var(--ig-h6-text-transform); + margin-top: var(--ig-h6-margin-top); + margin-bottom: var(--ig-h6-margin-bottom); +} +.test-output p { + font-family: var(--ig-body-1-font-family, var(--ig-font-family)); + font-size: var(--ig-body-1-font-size); + font-weight: var(--ig-body-1-font-weight); + font-style: var(--ig-body-1-font-style); + line-height: var(--ig-body-1-line-height); + letter-spacing: var(--ig-body-1-letter-spacing); + text-transform: var(--ig-body-1-text-transform); + margin-top: var(--ig-body-1-margin-top); + margin-bottom: var(--ig-body-1-margin-bottom); +} + +/* END_OUTPUT */ +/* EXPECTED */ +.test-output h1 { + font-family: var(--ig-h1-font-family, var(--ig-font-family)); + font-size: var(--ig-h1-font-size); + font-weight: var(--ig-h1-font-weight); + font-style: var(--ig-h1-font-style); + line-height: var(--ig-h1-line-height); + letter-spacing: var(--ig-h1-letter-spacing); + text-transform: var(--ig-h1-text-transform); + margin-top: var(--ig-h1-margin-top); + margin-bottom: var(--ig-h1-margin-bottom); +} +.test-output h2 { + font-family: var(--ig-h2-font-family, var(--ig-font-family)); + font-size: var(--ig-h2-font-size); + font-weight: var(--ig-h2-font-weight); + font-style: var(--ig-h2-font-style); + line-height: var(--ig-h2-line-height); + letter-spacing: var(--ig-h2-letter-spacing); + text-transform: var(--ig-h2-text-transform); + margin-top: var(--ig-h2-margin-top); + margin-bottom: var(--ig-h2-margin-bottom); +} +.test-output h3 { + font-family: var(--ig-h3-font-family, var(--ig-font-family)); + font-size: var(--ig-h3-font-size); + font-weight: var(--ig-h3-font-weight); + font-style: var(--ig-h3-font-style); + line-height: var(--ig-h3-line-height); + letter-spacing: var(--ig-h3-letter-spacing); + text-transform: var(--ig-h3-text-transform); + margin-top: var(--ig-h3-margin-top); + margin-bottom: var(--ig-h3-margin-bottom); +} +.test-output h4 { + font-family: var(--ig-h4-font-family, var(--ig-font-family)); + font-size: var(--ig-h4-font-size); + font-weight: var(--ig-h4-font-weight); + font-style: var(--ig-h4-font-style); + line-height: var(--ig-h4-line-height); + letter-spacing: var(--ig-h4-letter-spacing); + text-transform: var(--ig-h4-text-transform); + margin-top: var(--ig-h4-margin-top); + margin-bottom: var(--ig-h4-margin-bottom); +} +.test-output h5 { + font-family: var(--ig-h5-font-family, var(--ig-font-family)); + font-size: var(--ig-h5-font-size); + font-weight: var(--ig-h5-font-weight); + font-style: var(--ig-h5-font-style); + line-height: var(--ig-h5-line-height); + letter-spacing: var(--ig-h5-letter-spacing); + text-transform: var(--ig-h5-text-transform); + margin-top: var(--ig-h5-margin-top); + margin-bottom: var(--ig-h5-margin-bottom); +} +.test-output h6 { + font-family: var(--ig-h6-font-family, var(--ig-font-family)); + font-size: var(--ig-h6-font-size); + font-weight: var(--ig-h6-font-weight); + font-style: var(--ig-h6-font-style); + line-height: var(--ig-h6-line-height); + letter-spacing: var(--ig-h6-letter-spacing); + text-transform: var(--ig-h6-text-transform); + margin-top: var(--ig-h6-margin-top); + margin-bottom: var(--ig-h6-margin-bottom); +} +.test-output p { + font-family: var(--ig-body-1-font-family, var(--ig-font-family)); + font-size: var(--ig-body-1-font-size); + font-weight: var(--ig-body-1-font-weight); + font-style: var(--ig-body-1-font-style); + line-height: var(--ig-body-1-line-height); + letter-spacing: var(--ig-body-1-letter-spacing); + text-transform: var(--ig-body-1-text-transform); + margin-top: var(--ig-body-1-margin-top); + margin-bottom: var(--ig-body-1-margin-bottom); +} + +/* END_EXPECTED */ +/* END_ASSERT */ +/* */ +/* Test: should wrap CSS heading and paragraph style rules in :where():not() when $allow-exclusion is true */ +/* ASSERT: */ +/* OUTPUT */ +.test-output :where(h1):not(:where([data-no-typography], [data-no-typography] *)) { + font-family: var(--ig-h1-font-family, var(--ig-font-family)); + font-size: var(--ig-h1-font-size); + font-weight: var(--ig-h1-font-weight); + font-style: var(--ig-h1-font-style); + line-height: var(--ig-h1-line-height); + letter-spacing: var(--ig-h1-letter-spacing); + text-transform: var(--ig-h1-text-transform); + margin-top: var(--ig-h1-margin-top); + margin-bottom: var(--ig-h1-margin-bottom); +} +.test-output :where(h2):not(:where([data-no-typography], [data-no-typography] *)) { + font-family: var(--ig-h2-font-family, var(--ig-font-family)); + font-size: var(--ig-h2-font-size); + font-weight: var(--ig-h2-font-weight); + font-style: var(--ig-h2-font-style); + line-height: var(--ig-h2-line-height); + letter-spacing: var(--ig-h2-letter-spacing); + text-transform: var(--ig-h2-text-transform); + margin-top: var(--ig-h2-margin-top); + margin-bottom: var(--ig-h2-margin-bottom); +} +.test-output :where(h3):not(:where([data-no-typography], [data-no-typography] *)) { + font-family: var(--ig-h3-font-family, var(--ig-font-family)); + font-size: var(--ig-h3-font-size); + font-weight: var(--ig-h3-font-weight); + font-style: var(--ig-h3-font-style); + line-height: var(--ig-h3-line-height); + letter-spacing: var(--ig-h3-letter-spacing); + text-transform: var(--ig-h3-text-transform); + margin-top: var(--ig-h3-margin-top); + margin-bottom: var(--ig-h3-margin-bottom); +} +.test-output :where(h4):not(:where([data-no-typography], [data-no-typography] *)) { + font-family: var(--ig-h4-font-family, var(--ig-font-family)); + font-size: var(--ig-h4-font-size); + font-weight: var(--ig-h4-font-weight); + font-style: var(--ig-h4-font-style); + line-height: var(--ig-h4-line-height); + letter-spacing: var(--ig-h4-letter-spacing); + text-transform: var(--ig-h4-text-transform); + margin-top: var(--ig-h4-margin-top); + margin-bottom: var(--ig-h4-margin-bottom); +} +.test-output :where(h5):not(:where([data-no-typography], [data-no-typography] *)) { + font-family: var(--ig-h5-font-family, var(--ig-font-family)); + font-size: var(--ig-h5-font-size); + font-weight: var(--ig-h5-font-weight); + font-style: var(--ig-h5-font-style); + line-height: var(--ig-h5-line-height); + letter-spacing: var(--ig-h5-letter-spacing); + text-transform: var(--ig-h5-text-transform); + margin-top: var(--ig-h5-margin-top); + margin-bottom: var(--ig-h5-margin-bottom); +} +.test-output :where(h6):not(:where([data-no-typography], [data-no-typography] *)) { + font-family: var(--ig-h6-font-family, var(--ig-font-family)); + font-size: var(--ig-h6-font-size); + font-weight: var(--ig-h6-font-weight); + font-style: var(--ig-h6-font-style); + line-height: var(--ig-h6-line-height); + letter-spacing: var(--ig-h6-letter-spacing); + text-transform: var(--ig-h6-text-transform); + margin-top: var(--ig-h6-margin-top); + margin-bottom: var(--ig-h6-margin-bottom); +} +.test-output :where(p):not(:where([data-no-typography], [data-no-typography] *)) { + font-family: var(--ig-body-1-font-family, var(--ig-font-family)); + font-size: var(--ig-body-1-font-size); + font-weight: var(--ig-body-1-font-weight); + font-style: var(--ig-body-1-font-style); + line-height: var(--ig-body-1-line-height); + letter-spacing: var(--ig-body-1-letter-spacing); + text-transform: var(--ig-body-1-text-transform); + margin-top: var(--ig-body-1-margin-top); + margin-bottom: var(--ig-body-1-margin-bottom); +} + +/* END_OUTPUT */ +/* EXPECTED */ +.test-output :where(h1):not(:where([data-no-typography], [data-no-typography] *)) { + font-family: var(--ig-h1-font-family, var(--ig-font-family)); + font-size: var(--ig-h1-font-size); + font-weight: var(--ig-h1-font-weight); + font-style: var(--ig-h1-font-style); + line-height: var(--ig-h1-line-height); + letter-spacing: var(--ig-h1-letter-spacing); + text-transform: var(--ig-h1-text-transform); + margin-top: var(--ig-h1-margin-top); + margin-bottom: var(--ig-h1-margin-bottom); +} +.test-output :where(h2):not(:where([data-no-typography], [data-no-typography] *)) { + font-family: var(--ig-h2-font-family, var(--ig-font-family)); + font-size: var(--ig-h2-font-size); + font-weight: var(--ig-h2-font-weight); + font-style: var(--ig-h2-font-style); + line-height: var(--ig-h2-line-height); + letter-spacing: var(--ig-h2-letter-spacing); + text-transform: var(--ig-h2-text-transform); + margin-top: var(--ig-h2-margin-top); + margin-bottom: var(--ig-h2-margin-bottom); +} +.test-output :where(h3):not(:where([data-no-typography], [data-no-typography] *)) { + font-family: var(--ig-h3-font-family, var(--ig-font-family)); + font-size: var(--ig-h3-font-size); + font-weight: var(--ig-h3-font-weight); + font-style: var(--ig-h3-font-style); + line-height: var(--ig-h3-line-height); + letter-spacing: var(--ig-h3-letter-spacing); + text-transform: var(--ig-h3-text-transform); + margin-top: var(--ig-h3-margin-top); + margin-bottom: var(--ig-h3-margin-bottom); +} +.test-output :where(h4):not(:where([data-no-typography], [data-no-typography] *)) { + font-family: var(--ig-h4-font-family, var(--ig-font-family)); + font-size: var(--ig-h4-font-size); + font-weight: var(--ig-h4-font-weight); + font-style: var(--ig-h4-font-style); + line-height: var(--ig-h4-line-height); + letter-spacing: var(--ig-h4-letter-spacing); + text-transform: var(--ig-h4-text-transform); + margin-top: var(--ig-h4-margin-top); + margin-bottom: var(--ig-h4-margin-bottom); +} +.test-output :where(h5):not(:where([data-no-typography], [data-no-typography] *)) { + font-family: var(--ig-h5-font-family, var(--ig-font-family)); + font-size: var(--ig-h5-font-size); + font-weight: var(--ig-h5-font-weight); + font-style: var(--ig-h5-font-style); + line-height: var(--ig-h5-line-height); + letter-spacing: var(--ig-h5-letter-spacing); + text-transform: var(--ig-h5-text-transform); + margin-top: var(--ig-h5-margin-top); + margin-bottom: var(--ig-h5-margin-bottom); +} +.test-output :where(h6):not(:where([data-no-typography], [data-no-typography] *)) { + font-family: var(--ig-h6-font-family, var(--ig-font-family)); + font-size: var(--ig-h6-font-size); + font-weight: var(--ig-h6-font-weight); + font-style: var(--ig-h6-font-style); + line-height: var(--ig-h6-line-height); + letter-spacing: var(--ig-h6-letter-spacing); + text-transform: var(--ig-h6-text-transform); + margin-top: var(--ig-h6-margin-top); + margin-bottom: var(--ig-h6-margin-bottom); +} +.test-output :where(p):not(:where([data-no-typography], [data-no-typography] *)) { + font-family: var(--ig-body-1-font-family, var(--ig-font-family)); + font-size: var(--ig-body-1-font-size); + font-weight: var(--ig-body-1-font-weight); + font-style: var(--ig-body-1-font-style); + line-height: var(--ig-body-1-line-height); + letter-spacing: var(--ig-body-1-letter-spacing); + text-transform: var(--ig-body-1-text-transform); + margin-top: var(--ig-body-1-margin-top); + margin-bottom: var(--ig-body-1-margin-bottom); +} + +/* END_EXPECTED */ +/* END_ASSERT */ +/* */ +/* Test: should include typography variables in the :root scope */ +/* ASSERT: */ +/* OUTPUT */ +:root { + --ig-font-family: Roboto, sans-serif; + --ig-base-font-size: 16px; + --ig-h1-font-size: 96px; + --ig-h1-font-weight: normal; + --ig-h1-font-style: normal; + --ig-h1-line-height: normal; + --ig-h1-letter-spacing: normal; + --ig-h1-text-transform: none; + --ig-h1-margin-top: 0; + --ig-h1-margin-bottom: 0; + --ig-h2-font-size: 70px; + --ig-h2-font-weight: normal; + --ig-h2-font-style: normal; + --ig-h2-line-height: normal; + --ig-h2-letter-spacing: normal; + --ig-h2-text-transform: none; + --ig-h2-margin-top: 0; + --ig-h2-margin-bottom: 0; + --ig-h3-font-size: 40px; + --ig-h3-font-weight: normal; + --ig-h3-font-style: normal; + --ig-h3-line-height: normal; + --ig-h3-letter-spacing: normal; + --ig-h3-text-transform: none; + --ig-h3-margin-top: 0; + --ig-h3-margin-bottom: 0; + --ig-h4-font-size: 30px; + --ig-h4-font-weight: normal; + --ig-h4-font-style: normal; + --ig-h4-line-height: normal; + --ig-h4-letter-spacing: normal; + --ig-h4-text-transform: none; + --ig-h4-margin-top: 0; + --ig-h4-margin-bottom: 0; + --ig-h5-font-size: 20px; + --ig-h5-font-weight: normal; + --ig-h5-font-style: normal; + --ig-h5-line-height: normal; + --ig-h5-letter-spacing: normal; + --ig-h5-text-transform: none; + --ig-h5-margin-top: 0; + --ig-h5-margin-bottom: 0; + --ig-h6-font-size: 10px; + --ig-h6-font-weight: normal; + --ig-h6-font-style: normal; + --ig-h6-line-height: normal; + --ig-h6-letter-spacing: normal; + --ig-h6-text-transform: none; + --ig-h6-margin-top: 0; + --ig-h6-margin-bottom: 0; + --ig-subtitle-1-font-size: 96px; + --ig-subtitle-1-font-weight: normal; + --ig-subtitle-1-font-style: normal; + --ig-subtitle-1-line-height: normal; + --ig-subtitle-1-letter-spacing: normal; + --ig-subtitle-1-text-transform: none; + --ig-subtitle-1-margin-top: 0; + --ig-subtitle-1-margin-bottom: 0; + --ig-subtitle-2-font-size: 70px; + --ig-subtitle-2-font-weight: normal; + --ig-subtitle-2-font-style: normal; + --ig-subtitle-2-line-height: normal; + --ig-subtitle-2-letter-spacing: normal; + --ig-subtitle-2-text-transform: none; + --ig-subtitle-2-margin-top: 0; + --ig-subtitle-2-margin-bottom: 0; + --ig-body-1-font-size: 40px; + --ig-body-1-font-weight: normal; + --ig-body-1-font-style: normal; + --ig-body-1-line-height: normal; + --ig-body-1-letter-spacing: normal; + --ig-body-1-text-transform: none; + --ig-body-1-margin-top: 0; + --ig-body-1-margin-bottom: 0; + --ig-body-2-font-size: 30px; + --ig-body-2-font-weight: normal; + --ig-body-2-font-style: normal; + --ig-body-2-line-height: normal; + --ig-body-2-letter-spacing: normal; + --ig-body-2-text-transform: none; + --ig-body-2-margin-top: 0; + --ig-body-2-margin-bottom: 0; + --ig-button-font-size: 20px; + --ig-button-font-weight: normal; + --ig-button-font-style: normal; + --ig-button-line-height: normal; + --ig-button-letter-spacing: normal; + --ig-button-text-transform: none; + --ig-button-margin-top: 0; + --ig-button-margin-bottom: 0; + --ig-caption-font-size: 10px; + --ig-caption-font-weight: normal; + --ig-caption-font-style: normal; + --ig-caption-line-height: normal; + --ig-caption-letter-spacing: normal; + --ig-caption-text-transform: none; + --ig-caption-margin-top: 0; + --ig-caption-margin-bottom: 0; + --ig-overline-font-size: 10px; + --ig-overline-font-weight: normal; + --ig-overline-font-style: normal; + --ig-overline-line-height: normal; + --ig-overline-letter-spacing: normal; + --ig-overline-text-transform: none; + --ig-overline-margin-top: 0; + --ig-overline-margin-bottom: 0; +} + +.ig-typography h1 { + font-family: var(--ig-h1-font-family, var(--ig-font-family)); + font-size: var(--ig-h1-font-size); + font-weight: var(--ig-h1-font-weight); + font-style: var(--ig-h1-font-style); + line-height: var(--ig-h1-line-height); + letter-spacing: var(--ig-h1-letter-spacing); + text-transform: var(--ig-h1-text-transform); + margin-top: var(--ig-h1-margin-top); + margin-bottom: var(--ig-h1-margin-bottom); +} +.ig-typography h2 { + font-family: var(--ig-h2-font-family, var(--ig-font-family)); + font-size: var(--ig-h2-font-size); + font-weight: var(--ig-h2-font-weight); + font-style: var(--ig-h2-font-style); + line-height: var(--ig-h2-line-height); + letter-spacing: var(--ig-h2-letter-spacing); + text-transform: var(--ig-h2-text-transform); + margin-top: var(--ig-h2-margin-top); + margin-bottom: var(--ig-h2-margin-bottom); +} +.ig-typography h3 { + font-family: var(--ig-h3-font-family, var(--ig-font-family)); + font-size: var(--ig-h3-font-size); + font-weight: var(--ig-h3-font-weight); + font-style: var(--ig-h3-font-style); + line-height: var(--ig-h3-line-height); + letter-spacing: var(--ig-h3-letter-spacing); + text-transform: var(--ig-h3-text-transform); + margin-top: var(--ig-h3-margin-top); + margin-bottom: var(--ig-h3-margin-bottom); +} +.ig-typography h4 { + font-family: var(--ig-h4-font-family, var(--ig-font-family)); + font-size: var(--ig-h4-font-size); + font-weight: var(--ig-h4-font-weight); + font-style: var(--ig-h4-font-style); + line-height: var(--ig-h4-line-height); + letter-spacing: var(--ig-h4-letter-spacing); + text-transform: var(--ig-h4-text-transform); + margin-top: var(--ig-h4-margin-top); + margin-bottom: var(--ig-h4-margin-bottom); +} +.ig-typography h5 { + font-family: var(--ig-h5-font-family, var(--ig-font-family)); + font-size: var(--ig-h5-font-size); + font-weight: var(--ig-h5-font-weight); + font-style: var(--ig-h5-font-style); + line-height: var(--ig-h5-line-height); + letter-spacing: var(--ig-h5-letter-spacing); + text-transform: var(--ig-h5-text-transform); + margin-top: var(--ig-h5-margin-top); + margin-bottom: var(--ig-h5-margin-bottom); +} +.ig-typography h6 { + font-family: var(--ig-h6-font-family, var(--ig-font-family)); + font-size: var(--ig-h6-font-size); + font-weight: var(--ig-h6-font-weight); + font-style: var(--ig-h6-font-style); + line-height: var(--ig-h6-line-height); + letter-spacing: var(--ig-h6-letter-spacing); + text-transform: var(--ig-h6-text-transform); + margin-top: var(--ig-h6-margin-top); + margin-bottom: var(--ig-h6-margin-bottom); +} +.ig-typography p { + font-family: var(--ig-body-1-font-family, var(--ig-font-family)); + font-size: var(--ig-body-1-font-size); + font-weight: var(--ig-body-1-font-weight); + font-style: var(--ig-body-1-font-style); + line-height: var(--ig-body-1-line-height); + letter-spacing: var(--ig-body-1-letter-spacing); + text-transform: var(--ig-body-1-text-transform); + margin-top: var(--ig-body-1-margin-top); + margin-bottom: var(--ig-body-1-margin-bottom); +} +.ig-typography .ig-typography__h1 { + font-family: var(--ig-h1-font-family, var(--ig-font-family)); + font-size: var(--ig-h1-font-size); + font-weight: var(--ig-h1-font-weight); + font-style: var(--ig-h1-font-style); + line-height: var(--ig-h1-line-height); + letter-spacing: var(--ig-h1-letter-spacing); + text-transform: var(--ig-h1-text-transform); + margin-top: var(--ig-h1-margin-top); + margin-bottom: var(--ig-h1-margin-bottom); +} +.ig-typography .ig-typography__h2 { + font-family: var(--ig-h2-font-family, var(--ig-font-family)); + font-size: var(--ig-h2-font-size); + font-weight: var(--ig-h2-font-weight); + font-style: var(--ig-h2-font-style); + line-height: var(--ig-h2-line-height); + letter-spacing: var(--ig-h2-letter-spacing); + text-transform: var(--ig-h2-text-transform); + margin-top: var(--ig-h2-margin-top); + margin-bottom: var(--ig-h2-margin-bottom); +} +.ig-typography .ig-typography__h3 { + font-family: var(--ig-h3-font-family, var(--ig-font-family)); + font-size: var(--ig-h3-font-size); + font-weight: var(--ig-h3-font-weight); + font-style: var(--ig-h3-font-style); + line-height: var(--ig-h3-line-height); + letter-spacing: var(--ig-h3-letter-spacing); + text-transform: var(--ig-h3-text-transform); + margin-top: var(--ig-h3-margin-top); + margin-bottom: var(--ig-h3-margin-bottom); +} +.ig-typography .ig-typography__h4 { + font-family: var(--ig-h4-font-family, var(--ig-font-family)); + font-size: var(--ig-h4-font-size); + font-weight: var(--ig-h4-font-weight); + font-style: var(--ig-h4-font-style); + line-height: var(--ig-h4-line-height); + letter-spacing: var(--ig-h4-letter-spacing); + text-transform: var(--ig-h4-text-transform); + margin-top: var(--ig-h4-margin-top); + margin-bottom: var(--ig-h4-margin-bottom); +} +.ig-typography .ig-typography__h5 { + font-family: var(--ig-h5-font-family, var(--ig-font-family)); + font-size: var(--ig-h5-font-size); + font-weight: var(--ig-h5-font-weight); + font-style: var(--ig-h5-font-style); + line-height: var(--ig-h5-line-height); + letter-spacing: var(--ig-h5-letter-spacing); + text-transform: var(--ig-h5-text-transform); + margin-top: var(--ig-h5-margin-top); + margin-bottom: var(--ig-h5-margin-bottom); +} +.ig-typography .ig-typography__h6 { + font-family: var(--ig-h6-font-family, var(--ig-font-family)); + font-size: var(--ig-h6-font-size); + font-weight: var(--ig-h6-font-weight); + font-style: var(--ig-h6-font-style); + line-height: var(--ig-h6-line-height); + letter-spacing: var(--ig-h6-letter-spacing); + text-transform: var(--ig-h6-text-transform); + margin-top: var(--ig-h6-margin-top); + margin-bottom: var(--ig-h6-margin-bottom); +} +.ig-typography .ig-typography__subtitle-1 { + font-family: var(--ig-subtitle-1-font-family, var(--ig-font-family)); + font-size: var(--ig-subtitle-1-font-size); + font-weight: var(--ig-subtitle-1-font-weight); + font-style: var(--ig-subtitle-1-font-style); + line-height: var(--ig-subtitle-1-line-height); + letter-spacing: var(--ig-subtitle-1-letter-spacing); + text-transform: var(--ig-subtitle-1-text-transform); + margin-top: var(--ig-subtitle-1-margin-top); + margin-bottom: var(--ig-subtitle-1-margin-bottom); +} +.ig-typography .ig-typography__subtitle-2 { + font-family: var(--ig-subtitle-2-font-family, var(--ig-font-family)); + font-size: var(--ig-subtitle-2-font-size); + font-weight: var(--ig-subtitle-2-font-weight); + font-style: var(--ig-subtitle-2-font-style); + line-height: var(--ig-subtitle-2-line-height); + letter-spacing: var(--ig-subtitle-2-letter-spacing); + text-transform: var(--ig-subtitle-2-text-transform); + margin-top: var(--ig-subtitle-2-margin-top); + margin-bottom: var(--ig-subtitle-2-margin-bottom); +} +.ig-typography .ig-typography__body-1 { + font-family: var(--ig-body-1-font-family, var(--ig-font-family)); + font-size: var(--ig-body-1-font-size); + font-weight: var(--ig-body-1-font-weight); + font-style: var(--ig-body-1-font-style); + line-height: var(--ig-body-1-line-height); + letter-spacing: var(--ig-body-1-letter-spacing); + text-transform: var(--ig-body-1-text-transform); + margin-top: var(--ig-body-1-margin-top); + margin-bottom: var(--ig-body-1-margin-bottom); +} +.ig-typography .ig-typography__body-2 { + font-family: var(--ig-body-2-font-family, var(--ig-font-family)); + font-size: var(--ig-body-2-font-size); + font-weight: var(--ig-body-2-font-weight); + font-style: var(--ig-body-2-font-style); + line-height: var(--ig-body-2-line-height); + letter-spacing: var(--ig-body-2-letter-spacing); + text-transform: var(--ig-body-2-text-transform); + margin-top: var(--ig-body-2-margin-top); + margin-bottom: var(--ig-body-2-margin-bottom); +} +.ig-typography .ig-typography__button { + font-family: var(--ig-button-font-family, var(--ig-font-family)); + font-size: var(--ig-button-font-size); + font-weight: var(--ig-button-font-weight); + font-style: var(--ig-button-font-style); + line-height: var(--ig-button-line-height); + letter-spacing: var(--ig-button-letter-spacing); + text-transform: var(--ig-button-text-transform); + margin-top: var(--ig-button-margin-top); + margin-bottom: var(--ig-button-margin-bottom); +} +.ig-typography .ig-typography__caption { + font-family: var(--ig-caption-font-family, var(--ig-font-family)); + font-size: var(--ig-caption-font-size); + font-weight: var(--ig-caption-font-weight); + font-style: var(--ig-caption-font-style); + line-height: var(--ig-caption-line-height); + letter-spacing: var(--ig-caption-letter-spacing); + text-transform: var(--ig-caption-text-transform); + margin-top: var(--ig-caption-margin-top); + margin-bottom: var(--ig-caption-margin-bottom); +} +.ig-typography .ig-typography__overline { + font-family: var(--ig-overline-font-family, var(--ig-font-family)); + font-size: var(--ig-overline-font-size); + font-weight: var(--ig-overline-font-weight); + font-style: var(--ig-overline-font-style); + line-height: var(--ig-overline-line-height); + letter-spacing: var(--ig-overline-letter-spacing); + text-transform: var(--ig-overline-text-transform); + margin-top: var(--ig-overline-margin-top); + margin-bottom: var(--ig-overline-margin-bottom); +} + +/* END_OUTPUT */ +/* CONTAINED */ +:root { + --ig-font-family: Roboto, sans-serif; + --ig-h1-font-size: 96px; + --ig-h1-font-weight: normal; + --ig-h1-font-style: normal; + --ig-h1-line-height: normal; + --ig-h1-letter-spacing: normal; + --ig-h1-text-transform: none; + --ig-h1-margin-top: 0; + --ig-h1-margin-bottom: 0; + --ig-h2-font-size: 70px; + --ig-h2-font-weight: normal; + --ig-h2-font-style: normal; + --ig-h2-line-height: normal; + --ig-h2-letter-spacing: normal; + --ig-h2-text-transform: none; + --ig-h2-margin-top: 0; + --ig-h2-margin-bottom: 0; + --ig-h3-font-size: 40px; + --ig-h3-font-weight: normal; + --ig-h3-font-style: normal; + --ig-h3-line-height: normal; + --ig-h3-letter-spacing: normal; + --ig-h3-text-transform: none; + --ig-h3-margin-top: 0; + --ig-h3-margin-bottom: 0; + --ig-h4-font-size: 30px; + --ig-h4-font-weight: normal; + --ig-h4-font-style: normal; + --ig-h4-line-height: normal; + --ig-h4-letter-spacing: normal; + --ig-h4-text-transform: none; + --ig-h4-margin-top: 0; + --ig-h4-margin-bottom: 0; + --ig-h5-font-size: 20px; + --ig-h5-font-weight: normal; + --ig-h5-font-style: normal; + --ig-h5-line-height: normal; + --ig-h5-letter-spacing: normal; + --ig-h5-text-transform: none; + --ig-h5-margin-top: 0; + --ig-h5-margin-bottom: 0; + --ig-h6-font-size: 10px; + --ig-h6-font-weight: normal; + --ig-h6-font-style: normal; + --ig-h6-line-height: normal; + --ig-h6-letter-spacing: normal; + --ig-h6-text-transform: none; + --ig-h6-margin-top: 0; + --ig-h6-margin-bottom: 0; + --ig-subtitle-1-font-size: 96px; + --ig-subtitle-1-font-weight: normal; + --ig-subtitle-1-font-style: normal; + --ig-subtitle-1-line-height: normal; + --ig-subtitle-1-letter-spacing: normal; + --ig-subtitle-1-text-transform: none; + --ig-subtitle-1-margin-top: 0; + --ig-subtitle-1-margin-bottom: 0; + --ig-subtitle-2-font-size: 70px; + --ig-subtitle-2-font-weight: normal; + --ig-subtitle-2-font-style: normal; + --ig-subtitle-2-line-height: normal; + --ig-subtitle-2-letter-spacing: normal; + --ig-subtitle-2-text-transform: none; + --ig-subtitle-2-margin-top: 0; + --ig-subtitle-2-margin-bottom: 0; + --ig-body-1-font-size: 40px; + --ig-body-1-font-weight: normal; + --ig-body-1-font-style: normal; + --ig-body-1-line-height: normal; + --ig-body-1-letter-spacing: normal; + --ig-body-1-text-transform: none; + --ig-body-1-margin-top: 0; + --ig-body-1-margin-bottom: 0; + --ig-body-2-font-size: 30px; + --ig-body-2-font-weight: normal; + --ig-body-2-font-style: normal; + --ig-body-2-line-height: normal; + --ig-body-2-letter-spacing: normal; + --ig-body-2-text-transform: none; + --ig-body-2-margin-top: 0; + --ig-body-2-margin-bottom: 0; + --ig-button-font-size: 20px; + --ig-button-font-weight: normal; + --ig-button-font-style: normal; + --ig-button-line-height: normal; + --ig-button-letter-spacing: normal; + --ig-button-text-transform: none; + --ig-button-margin-top: 0; + --ig-button-margin-bottom: 0; + --ig-caption-font-size: 10px; + --ig-caption-font-weight: normal; + --ig-caption-font-style: normal; + --ig-caption-line-height: normal; + --ig-caption-letter-spacing: normal; + --ig-caption-text-transform: none; + --ig-caption-margin-top: 0; + --ig-caption-margin-bottom: 0; + --ig-overline-font-size: 10px; + --ig-overline-font-weight: normal; + --ig-overline-font-style: normal; + --ig-overline-line-height: normal; + --ig-overline-letter-spacing: normal; + --ig-overline-text-transform: none; + --ig-overline-margin-top: 0; + --ig-overline-margin-bottom: 0; +} + +/* END_CONTAINED */ +/* END_ASSERT */ +/* */ +/* Test: should include typography variables for a parent scope */ +/* ASSERT: */ +/* OUTPUT */ +.test-output { + --ig-font-family: Roboto, sans-serif; + --ig-base-font-size: 16px; + --ig-h1-font-size: 96px; + --ig-h1-font-weight: normal; + --ig-h1-font-style: normal; + --ig-h1-line-height: normal; + --ig-h1-letter-spacing: normal; + --ig-h1-text-transform: none; + --ig-h1-margin-top: 0; + --ig-h1-margin-bottom: 0; + --ig-h2-font-size: 70px; + --ig-h2-font-weight: normal; + --ig-h2-font-style: normal; + --ig-h2-line-height: normal; + --ig-h2-letter-spacing: normal; + --ig-h2-text-transform: none; + --ig-h2-margin-top: 0; + --ig-h2-margin-bottom: 0; + --ig-h3-font-size: 40px; + --ig-h3-font-weight: normal; + --ig-h3-font-style: normal; + --ig-h3-line-height: normal; + --ig-h3-letter-spacing: normal; + --ig-h3-text-transform: none; + --ig-h3-margin-top: 0; + --ig-h3-margin-bottom: 0; + --ig-h4-font-size: 30px; + --ig-h4-font-weight: normal; + --ig-h4-font-style: normal; + --ig-h4-line-height: normal; + --ig-h4-letter-spacing: normal; + --ig-h4-text-transform: none; + --ig-h4-margin-top: 0; + --ig-h4-margin-bottom: 0; + --ig-h5-font-size: 20px; + --ig-h5-font-weight: normal; + --ig-h5-font-style: normal; + --ig-h5-line-height: normal; + --ig-h5-letter-spacing: normal; + --ig-h5-text-transform: none; + --ig-h5-margin-top: 0; + --ig-h5-margin-bottom: 0; + --ig-h6-font-size: 10px; + --ig-h6-font-weight: normal; + --ig-h6-font-style: normal; + --ig-h6-line-height: normal; + --ig-h6-letter-spacing: normal; + --ig-h6-text-transform: none; + --ig-h6-margin-top: 0; + --ig-h6-margin-bottom: 0; + --ig-subtitle-1-font-size: 96px; + --ig-subtitle-1-font-weight: normal; + --ig-subtitle-1-font-style: normal; + --ig-subtitle-1-line-height: normal; + --ig-subtitle-1-letter-spacing: normal; + --ig-subtitle-1-text-transform: none; + --ig-subtitle-1-margin-top: 0; + --ig-subtitle-1-margin-bottom: 0; + --ig-subtitle-2-font-size: 70px; + --ig-subtitle-2-font-weight: normal; + --ig-subtitle-2-font-style: normal; + --ig-subtitle-2-line-height: normal; + --ig-subtitle-2-letter-spacing: normal; + --ig-subtitle-2-text-transform: none; + --ig-subtitle-2-margin-top: 0; + --ig-subtitle-2-margin-bottom: 0; + --ig-body-1-font-size: 40px; + --ig-body-1-font-weight: normal; + --ig-body-1-font-style: normal; + --ig-body-1-line-height: normal; + --ig-body-1-letter-spacing: normal; + --ig-body-1-text-transform: none; + --ig-body-1-margin-top: 0; + --ig-body-1-margin-bottom: 0; + --ig-body-2-font-size: 30px; + --ig-body-2-font-weight: normal; + --ig-body-2-font-style: normal; + --ig-body-2-line-height: normal; + --ig-body-2-letter-spacing: normal; + --ig-body-2-text-transform: none; + --ig-body-2-margin-top: 0; + --ig-body-2-margin-bottom: 0; + --ig-button-font-size: 20px; + --ig-button-font-weight: normal; + --ig-button-font-style: normal; + --ig-button-line-height: normal; + --ig-button-letter-spacing: normal; + --ig-button-text-transform: none; + --ig-button-margin-top: 0; + --ig-button-margin-bottom: 0; + --ig-caption-font-size: 10px; + --ig-caption-font-weight: normal; + --ig-caption-font-style: normal; + --ig-caption-line-height: normal; + --ig-caption-letter-spacing: normal; + --ig-caption-text-transform: none; + --ig-caption-margin-top: 0; + --ig-caption-margin-bottom: 0; + --ig-overline-font-size: 10px; + --ig-overline-font-weight: normal; + --ig-overline-font-style: normal; + --ig-overline-line-height: normal; + --ig-overline-letter-spacing: normal; + --ig-overline-text-transform: none; + --ig-overline-margin-top: 0; + --ig-overline-margin-bottom: 0; +} + +/* END_OUTPUT */ +/* EXPECTED */ +.test-output { + --ig-font-family: Roboto, sans-serif; + --ig-base-font-size: 16px; + --ig-h1-font-size: 96px; + --ig-h1-font-weight: normal; + --ig-h1-font-style: normal; + --ig-h1-line-height: normal; + --ig-h1-letter-spacing: normal; + --ig-h1-text-transform: none; + --ig-h1-margin-top: 0; + --ig-h1-margin-bottom: 0; + --ig-h2-font-size: 70px; + --ig-h2-font-weight: normal; + --ig-h2-font-style: normal; + --ig-h2-line-height: normal; + --ig-h2-letter-spacing: normal; + --ig-h2-text-transform: none; + --ig-h2-margin-top: 0; + --ig-h2-margin-bottom: 0; + --ig-h3-font-size: 40px; + --ig-h3-font-weight: normal; + --ig-h3-font-style: normal; + --ig-h3-line-height: normal; + --ig-h3-letter-spacing: normal; + --ig-h3-text-transform: none; + --ig-h3-margin-top: 0; + --ig-h3-margin-bottom: 0; + --ig-h4-font-size: 30px; + --ig-h4-font-weight: normal; + --ig-h4-font-style: normal; + --ig-h4-line-height: normal; + --ig-h4-letter-spacing: normal; + --ig-h4-text-transform: none; + --ig-h4-margin-top: 0; + --ig-h4-margin-bottom: 0; + --ig-h5-font-size: 20px; + --ig-h5-font-weight: normal; + --ig-h5-font-style: normal; + --ig-h5-line-height: normal; + --ig-h5-letter-spacing: normal; + --ig-h5-text-transform: none; + --ig-h5-margin-top: 0; + --ig-h5-margin-bottom: 0; + --ig-h6-font-size: 10px; + --ig-h6-font-weight: normal; + --ig-h6-font-style: normal; + --ig-h6-line-height: normal; + --ig-h6-letter-spacing: normal; + --ig-h6-text-transform: none; + --ig-h6-margin-top: 0; + --ig-h6-margin-bottom: 0; + --ig-subtitle-1-font-size: 96px; + --ig-subtitle-1-font-weight: normal; + --ig-subtitle-1-font-style: normal; + --ig-subtitle-1-line-height: normal; + --ig-subtitle-1-letter-spacing: normal; + --ig-subtitle-1-text-transform: none; + --ig-subtitle-1-margin-top: 0; + --ig-subtitle-1-margin-bottom: 0; + --ig-subtitle-2-font-size: 70px; + --ig-subtitle-2-font-weight: normal; + --ig-subtitle-2-font-style: normal; + --ig-subtitle-2-line-height: normal; + --ig-subtitle-2-letter-spacing: normal; + --ig-subtitle-2-text-transform: none; + --ig-subtitle-2-margin-top: 0; + --ig-subtitle-2-margin-bottom: 0; + --ig-body-1-font-size: 40px; + --ig-body-1-font-weight: normal; + --ig-body-1-font-style: normal; + --ig-body-1-line-height: normal; + --ig-body-1-letter-spacing: normal; + --ig-body-1-text-transform: none; + --ig-body-1-margin-top: 0; + --ig-body-1-margin-bottom: 0; + --ig-body-2-font-size: 30px; + --ig-body-2-font-weight: normal; + --ig-body-2-font-style: normal; + --ig-body-2-line-height: normal; + --ig-body-2-letter-spacing: normal; + --ig-body-2-text-transform: none; + --ig-body-2-margin-top: 0; + --ig-body-2-margin-bottom: 0; + --ig-button-font-size: 20px; + --ig-button-font-weight: normal; + --ig-button-font-style: normal; + --ig-button-line-height: normal; + --ig-button-letter-spacing: normal; + --ig-button-text-transform: none; + --ig-button-margin-top: 0; + --ig-button-margin-bottom: 0; + --ig-caption-font-size: 10px; + --ig-caption-font-weight: normal; + --ig-caption-font-style: normal; + --ig-caption-line-height: normal; + --ig-caption-letter-spacing: normal; + --ig-caption-text-transform: none; + --ig-caption-margin-top: 0; + --ig-caption-margin-bottom: 0; + --ig-overline-font-size: 10px; + --ig-overline-font-weight: normal; + --ig-overline-font-style: normal; + --ig-overline-line-height: normal; + --ig-overline-letter-spacing: normal; + --ig-overline-text-transform: none; + --ig-overline-margin-top: 0; + --ig-overline-margin-bottom: 0; +} + +/* END_EXPECTED */ +/* END_ASSERT */ +/* */ +/* */ +/* */ +/* # Module: Utilities */ +/* ------------------- */ +/* # Module: Utilities :: css */ +/* -------------------------- */ +/* Test: should expand shorthand properties */ +/* ✔ [assert-equal] should expand shorthand properties */ +/* */ +/* */ +/* # Module: Utilities :: meta */ +/* --------------------------- */ +/* Test: should resolve if the call context is the root of the stylesheet */ +/* ASSERT: */ +/* OUTPUT */ +.test-output { + content: true; +} + +/* END_OUTPUT */ +/* EXPECTED */ +.test-output { + content: true; +} + +/* END_EXPECTED */ +/* END_ASSERT */ +/* ASSERT: */ +/* OUTPUT */ +.test-output { + content: false; +} + +/* END_OUTPUT */ +/* EXPECTED */ +.test-output { + content: false; +} + +/* END_EXPECTED */ +/* END_ASSERT */ +/* */ +/* Test: should resolve if the call context is :host */ +/* ASSERT: */ +/* OUTPUT */ +:host { + content: true; +} + +/* END_OUTPUT */ +/* EXPECTED */ +:host { + content: true; +} + +/* END_EXPECTED */ +/* END_ASSERT */ +/* ASSERT: */ +/* OUTPUT */ +.test-output { + content: false; +} + +/* END_OUTPUT */ +/* EXPECTED */ +.test-output { + content: false; +} + +/* END_EXPECTED */ +/* END_ASSERT */ +/* */ +/* */ +/* # Module: Utilities :: map */ +/* -------------------------- */ +/* Test: should clean a map of null values */ +/* ✔ [assert-equal] should clean a map of null values */ +/* */ +/* Test: should merge two maps removing null values in the process */ +/* ✔ [assert-equal] should merge two maps removing null values in the process */ +/* */ +/* Test: should accumulate _meta keys when merging schema maps */ +/* ✔ [assert-equal] should accumulate _meta keys when merging schema maps */ +/* */ +/* Test: should fully replace nested property maps regardless of whether the override has _meta */ +/* ✔ [assert-equal] should fully replace nested property maps regardless of whether the override has _meta */ +/* ✔ [assert-equal] should fully replace nested property maps regardless of whether the override has _meta */ +/* */ +/* Test: should diff two maps resolving all unique values in the second map in the process */ +/* ✔ [assert-equal] should diff two maps resolving all unique values in the second map in the process */ +/* */ +/* Test: should prefix all keys in a map with a given string */ +/* ✔ [assert-equal] should prefix all keys in a map with a given string */ +/* */ +/* */ +/* # Module: Utilities :: math */ +/* --------------------------- */ +/* Test: returns a number to a fixed floating point */ +/* ✔ [assert-equal] returns a number to a fixed floating point */ +/* */ +/* Test: converts a number to string */ +/* ✔ [assert-equal] converts a number to string */ +/* */ +/* */ +/* # Module: Utilities :: string */ +/* ----------------------------- */ +/* Test: should split a string by a given separator into a list of values */ +/* ✔ [assert-equal] should split a string by a given separator into a list of values */ +/* */ +/* Test: should replace a search term in target string */ +/* ✔ [assert-equal] should replace a search term in target string */ +/* */ +/* Test: converts a string into a number */ +/* ✔ [assert-equal] converts a string into a number */ +/* ✔ [assert-equal] converts a string into a number */ +/* */ +/* */ +/* */ +/* # Module: Themes */ +/* ---------------- */ +/* # Module: Themes :: schemas */ +/* --------------------------- */ +/* Test: resolves util function values */ +/* ✔ [assert-equal] resolves util function values */ +/* ASSERT: */ +/* OUTPUT */ +igx-data-chart { + --title-padding-top: var(--igx-data-chart-title-padding-top, var(--ig-data-chart-title-padding-top, 4px)); + --title-padding-right: var(--igx-data-chart-title-padding-right, var(--ig-data-chart-title-padding-right, 8px)); + --title-padding-bottom: var(--igx-data-chart-title-padding-bottom, var(--ig-data-chart-title-padding-bottom, 4px)); + --title-padding-left: var(--igx-data-chart-title-padding-left, var(--ig-data-chart-title-padding-left, 8px)); + --ig-theme: material; + --ig-theme-variant: light; +} + +/* END_OUTPUT */ +/* EXPECTED */ +igx-data-chart { + --title-padding-top: var(--igx-data-chart-title-padding-top, var(--ig-data-chart-title-padding-top, 4px)); + --title-padding-right: var(--igx-data-chart-title-padding-right, var(--ig-data-chart-title-padding-right, 8px)); + --title-padding-bottom: var(--igx-data-chart-title-padding-bottom, var(--ig-data-chart-title-padding-bottom, 4px)); + --title-padding-left: var(--igx-data-chart-title-padding-left, var(--ig-data-chart-title-padding-left, 8px)); + --ig-theme: material; + --ig-theme-variant: light; +} + +/* END_EXPECTED */ +/* END_ASSERT */ +/* */ +/* Test: should resolve values from function instructions */ +/* ✔ [assert-equal] should resolve values from function instructions */ +/* ✔ [assert-equal] should resolve values from function instructions */ +/* */ +/* Test: should work with custom(handmade) palettes */ +/* ✔ [assert-equal] should work with custom(handmade) palettes */ +/* ✔ [assert-equal] should work with custom(handmade) palettes */ +/* */ +/* Test: should output theme maps from schema definitions */ +/* ✔ [assert-equal] should output theme maps from schema definitions */ +/* */ +/* Test: should include proper metadata in each component schema */ +/* ✔ [assert-true] Component schema for category-chart is missing metadata. */ +/* ✔ [assert-equal] Component schema for light material category-chart has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light material category-chart has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for category-chart is missing name metadata. */ +/* ✔ [assert-true] Component schema for data-chart is missing metadata. */ +/* ✔ [assert-equal] Component schema for light material data-chart has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light material data-chart has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for data-chart is missing name metadata. */ +/* ✔ [assert-true] Component schema for doughnut-chart is missing metadata. */ +/* ✔ [assert-equal] Component schema for light material doughnut-chart has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light material doughnut-chart has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for doughnut-chart is missing name metadata. */ +/* ✔ [assert-true] Component schema for financial-chart is missing metadata. */ +/* ✔ [assert-equal] Component schema for light material financial-chart has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light material financial-chart has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for financial-chart is missing name metadata. */ +/* ✔ [assert-true] Component schema for funnel-chart is missing metadata. */ +/* ✔ [assert-equal] Component schema for light material funnel-chart has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light material funnel-chart has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for funnel-chart is missing name metadata. */ +/* ✔ [assert-true] Component schema for linear-gauge is missing metadata. */ +/* ✔ [assert-equal] Component schema for light material linear-gauge has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light material linear-gauge has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for linear-gauge is missing name metadata. */ +/* ✔ [assert-true] Component schema for radial-gauge is missing metadata. */ +/* ✔ [assert-equal] Component schema for light material radial-gauge has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light material radial-gauge has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for radial-gauge is missing name metadata. */ +/* ✔ [assert-true] Component schema for geo-map is missing metadata. */ +/* ✔ [assert-equal] Component schema for light material geo-map has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light material geo-map has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for geo-map is missing name metadata. */ +/* ✔ [assert-true] Component schema for bullet-graph is missing metadata. */ +/* ✔ [assert-equal] Component schema for light material bullet-graph has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light material bullet-graph has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for bullet-graph is missing name metadata. */ +/* ✔ [assert-true] Component schema for pie-chart is missing metadata. */ +/* ✔ [assert-equal] Component schema for light material pie-chart has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light material pie-chart has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for pie-chart is missing name metadata. */ +/* ✔ [assert-true] Component schema for shape-chart is missing metadata. */ +/* ✔ [assert-equal] Component schema for light material shape-chart has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light material shape-chart has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for shape-chart is missing name metadata. */ +/* ✔ [assert-true] Component schema for sparkline is missing metadata. */ +/* ✔ [assert-equal] Component schema for light material sparkline has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light material sparkline has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for sparkline is missing name metadata. */ +/* ✔ [assert-true] Component schema for action-strip is missing metadata. */ +/* ✔ [assert-equal] Component schema for light material action-strip has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light material action-strip has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for action-strip is missing name metadata. */ +/* ✔ [assert-true] Component schema for avatar is missing metadata. */ +/* ✔ [assert-equal] Component schema for light material avatar has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light material avatar has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for avatar is missing name metadata. */ +/* ✔ [assert-true] Component schema for badge is missing metadata. */ +/* ✔ [assert-equal] Component schema for light material badge has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light material badge has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for badge is missing name metadata. */ +/* ✔ [assert-true] Component schema for banner is missing metadata. */ +/* ✔ [assert-equal] Component schema for light material banner has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light material banner has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for banner is missing name metadata. */ +/* ✔ [assert-true] Component schema for bottom-nav is missing metadata. */ +/* ✔ [assert-equal] Component schema for light material bottom-nav has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light material bottom-nav has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for bottom-nav is missing name metadata. */ +/* ✔ [assert-true] Component schema for flat button is missing metadata. */ +/* ✔ [assert-equal] Component schema for light material flat button has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light material flat button has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for flat button is missing name metadata. */ +/* ✔ [assert-true] Component schema for outlined button is missing metadata. */ +/* ✔ [assert-equal] Component schema for light material outlined button has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light material outlined button has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for outlined button is missing name metadata. */ +/* ✔ [assert-true] Component schema for contained button is missing metadata. */ +/* ✔ [assert-equal] Component schema for light material contained button has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light material contained button has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for contained button is missing name metadata. */ +/* ✔ [assert-true] Component schema for fab button is missing metadata. */ +/* ✔ [assert-equal] Component schema for light material fab button has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light material fab button has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for fab button is missing name metadata. */ +/* ✔ [assert-true] Component schema for button-group is missing metadata. */ +/* ✔ [assert-equal] Component schema for light material button-group has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light material button-group has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for button-group is missing name metadata. */ +/* ✔ [assert-true] Component schema for calendar is missing metadata. */ +/* ✔ [assert-equal] Component schema for light material calendar has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light material calendar has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for calendar is missing name metadata. */ +/* ✔ [assert-true] Component schema for card is missing metadata. */ +/* ✔ [assert-equal] Component schema for light material card has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light material card has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for card is missing name metadata. */ +/* ✔ [assert-true] Component schema for carousel is missing metadata. */ +/* ✔ [assert-equal] Component schema for light material carousel has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light material carousel has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for carousel is missing name metadata. */ +/* ✔ [assert-true] Component schema for chat is missing metadata. */ +/* ✔ [assert-equal] Component schema for light material chat has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light material chat has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for chat is missing name metadata. */ +/* ✔ [assert-true] Component schema for checkbox is missing metadata. */ +/* ✔ [assert-equal] Component schema for light material checkbox has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light material checkbox has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for checkbox is missing name metadata. */ +/* ✔ [assert-true] Component schema for chip is missing metadata. */ +/* ✔ [assert-equal] Component schema for light material chip has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light material chip has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for chip is missing name metadata. */ +/* ✔ [assert-true] Component schema for color-picker is missing metadata. */ +/* ✔ [assert-equal] Component schema for light material color-picker has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light material color-picker has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for color-picker is missing name metadata. */ +/* ✔ [assert-true] Component schema for column-actions is missing metadata. */ +/* ✔ [assert-equal] Component schema for light material column-actions has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light material column-actions has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for column-actions is missing name metadata. */ +/* ✔ [assert-true] Component schema for combo is missing metadata. */ +/* ✔ [assert-equal] Component schema for light material combo has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light material combo has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for combo is missing name metadata. */ +/* ✔ [assert-true] Component schema for date-picker is missing metadata. */ +/* ✔ [assert-equal] Component schema for light material date-picker has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light material date-picker has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for date-picker is missing name metadata. */ +/* ✔ [assert-true] Component schema for date-range is missing metadata. */ +/* ✔ [assert-equal] Component schema for light material date-range has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light material date-range has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for date-range is missing name metadata. */ +/* ✔ [assert-true] Component schema for dialog is missing metadata. */ +/* ✔ [assert-equal] Component schema for light material dialog has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light material dialog has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for dialog is missing name metadata. */ +/* ✔ [assert-true] Component schema for divider is missing metadata. */ +/* ✔ [assert-equal] Component schema for light material divider has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light material divider has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for divider is missing name metadata. */ +/* ✔ [assert-true] Component schema for dockmanager is missing metadata. */ +/* ✔ [assert-equal] Component schema for light material dockmanager has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light material dockmanager has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for dockmanager is missing name metadata. */ +/* ✔ [assert-true] Component schema for drop-down is missing metadata. */ +/* ✔ [assert-equal] Component schema for light material drop-down has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light material drop-down has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for drop-down is missing name metadata. */ +/* ✔ [assert-true] Component schema for expansion-panel is missing metadata. */ +/* ✔ [assert-equal] Component schema for light material expansion-panel has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light material expansion-panel has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for expansion-panel is missing name metadata. */ +/* ✔ [assert-true] Component schema for grid is missing metadata. */ +/* ✔ [assert-equal] Component schema for light material grid has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light material grid has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for grid is missing name metadata. */ +/* ✔ [assert-true] Component schema for grid-excel-filtering is missing metadata. */ +/* ✔ [assert-equal] Component schema for light material grid-excel-filtering has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light material grid-excel-filtering has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for grid-excel-filtering is missing name metadata. */ +/* ✔ [assert-true] Component schema for grid-filtering is missing metadata. */ +/* ✔ [assert-equal] Component schema for light material grid-filtering has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light material grid-filtering has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for grid-filtering is missing name metadata. */ +/* ✔ [assert-true] Component schema for grid-summary is missing metadata. */ +/* ✔ [assert-equal] Component schema for light material grid-summary has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light material grid-summary has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for grid-summary is missing name metadata. */ +/* ✔ [assert-true] Component schema for grid-toolbar is missing metadata. */ +/* ✔ [assert-equal] Component schema for light material grid-toolbar has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light material grid-toolbar has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for grid-toolbar is missing name metadata. */ +/* ✔ [assert-true] Component schema for highlight is missing metadata. */ +/* ✔ [assert-equal] Component schema for light material highlight has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light material highlight has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for highlight is missing name metadata. */ +/* ✔ [assert-true] Component schema for icon is missing metadata. */ +/* ✔ [assert-equal] Component schema for light material icon has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light material icon has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for icon is missing name metadata. */ +/* ✔ [assert-true] Component schema for flat icon-button is missing metadata. */ +/* ✔ [assert-equal] Component schema for light material flat icon-button has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light material flat icon-button has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for flat icon-button is missing name metadata. */ +/* ✔ [assert-true] Component schema for contained icon-button is missing metadata. */ +/* ✔ [assert-equal] Component schema for light material contained icon-button has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light material contained icon-button has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for contained icon-button is missing name metadata. */ +/* ✔ [assert-true] Component schema for outlined icon-button is missing metadata. */ +/* ✔ [assert-equal] Component schema for light material outlined icon-button has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light material outlined icon-button has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for outlined icon-button is missing name metadata. */ +/* ✔ [assert-true] Component schema for input-group is missing metadata. */ +/* ✔ [assert-equal] Component schema for light material input-group has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light material input-group has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for input-group is missing name metadata. */ +/* ✔ [assert-true] Component schema for label is missing metadata. */ +/* ✔ [assert-equal] Component schema for light material label has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light material label has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for label is missing name metadata. */ +/* ✔ [assert-true] Component schema for list is missing metadata. */ +/* ✔ [assert-equal] Component schema for light material list has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light material list has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for list is missing name metadata. */ +/* ✔ [assert-true] Component schema for navbar is missing metadata. */ +/* ✔ [assert-equal] Component schema for light material navbar has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light material navbar has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for navbar is missing name metadata. */ +/* ✔ [assert-true] Component schema for nav-drawer is missing metadata. */ +/* ✔ [assert-equal] Component schema for light material nav-drawer has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light material nav-drawer has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for nav-drawer is missing name metadata. */ +/* ✔ [assert-true] Component schema for overlay is missing metadata. */ +/* ✔ [assert-equal] Component schema for light material overlay has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light material overlay has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for overlay is missing name metadata. */ +/* ✔ [assert-true] Component schema for paginator is missing metadata. */ +/* ✔ [assert-equal] Component schema for light material paginator has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light material paginator has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for paginator is missing name metadata. */ +/* ✔ [assert-true] Component schema for pivot-data-selector is missing metadata. */ +/* ✔ [assert-equal] Component schema for light material pivot-data-selector has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light material pivot-data-selector has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for pivot-data-selector is missing name metadata. */ +/* ✔ [assert-true] Component schema for linear-bar is missing metadata. */ +/* ✔ [assert-equal] Component schema for light material linear-bar has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light material linear-bar has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for linear-bar is missing name metadata. */ +/* ✔ [assert-true] Component schema for circular-bar is missing metadata. */ +/* ✔ [assert-equal] Component schema for light material circular-bar has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light material circular-bar has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for circular-bar is missing name metadata. */ +/* ✔ [assert-true] Component schema for qr-code is missing metadata. */ +/* ✔ [assert-equal] Component schema for light material qr-code has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light material qr-code has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for qr-code is missing name metadata. */ +/* ✔ [assert-true] Component schema for query-builder is missing metadata. */ +/* ✔ [assert-equal] Component schema for light material query-builder has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light material query-builder has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for query-builder is missing name metadata. */ +/* ✔ [assert-true] Component schema for radio is missing metadata. */ +/* ✔ [assert-equal] Component schema for light material radio has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light material radio has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for radio is missing name metadata. */ +/* ✔ [assert-true] Component schema for rating is missing metadata. */ +/* ✔ [assert-equal] Component schema for light material rating has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light material rating has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for rating is missing name metadata. */ +/* ✔ [assert-true] Component schema for resize-indicator is missing metadata. */ +/* ✔ [assert-equal] Component schema for light material resize-indicator has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light material resize-indicator has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for resize-indicator is missing name metadata. */ +/* ✔ [assert-true] Component schema for ripple is missing metadata. */ +/* ✔ [assert-equal] Component schema for light material ripple has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light material ripple has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for ripple is missing name metadata. */ +/* ✔ [assert-true] Component schema for scrollbar is missing metadata. */ +/* ✔ [assert-equal] Component schema for light material scrollbar has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light material scrollbar has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for scrollbar is missing name metadata. */ +/* ✔ [assert-true] Component schema for select is missing metadata. */ +/* ✔ [assert-equal] Component schema for light material select has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light material select has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for select is missing name metadata. */ +/* ✔ [assert-true] Component schema for slider is missing metadata. */ +/* ✔ [assert-equal] Component schema for light material slider has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light material slider has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for slider is missing name metadata. */ +/* ✔ [assert-true] Component schema for snackbar is missing metadata. */ +/* ✔ [assert-equal] Component schema for light material snackbar has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light material snackbar has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for snackbar is missing name metadata. */ +/* ✔ [assert-true] Component schema for splitter is missing metadata. */ +/* ✔ [assert-equal] Component schema for light material splitter has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light material splitter has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for splitter is missing name metadata. */ +/* ✔ [assert-true] Component schema for stepper is missing metadata. */ +/* ✔ [assert-equal] Component schema for light material stepper has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light material stepper has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for stepper is missing name metadata. */ +/* ✔ [assert-true] Component schema for switch is missing metadata. */ +/* ✔ [assert-equal] Component schema for light material switch has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light material switch has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for switch is missing name metadata. */ +/* ✔ [assert-true] Component schema for tabs is missing metadata. */ +/* ✔ [assert-equal] Component schema for light material tabs has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light material tabs has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for tabs is missing name metadata. */ +/* ✔ [assert-true] Component schema for tile-manager is missing metadata. */ +/* ✔ [assert-equal] Component schema for light material tile-manager has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light material tile-manager has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for tile-manager is missing name metadata. */ +/* ✔ [assert-true] Component schema for time-picker is missing metadata. */ +/* ✔ [assert-equal] Component schema for light material time-picker has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light material time-picker has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for time-picker is missing name metadata. */ +/* ✔ [assert-true] Component schema for toast is missing metadata. */ +/* ✔ [assert-equal] Component schema for light material toast has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light material toast has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for toast is missing name metadata. */ +/* ✔ [assert-true] Component schema for tooltip is missing metadata. */ +/* ✔ [assert-equal] Component schema for light material tooltip has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light material tooltip has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for tooltip is missing name metadata. */ +/* ✔ [assert-true] Component schema for tree is missing metadata. */ +/* ✔ [assert-equal] Component schema for light material tree has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light material tree has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for tree is missing name metadata. */ +/* ✔ [assert-true] Component schema for validator is missing metadata. */ +/* ✔ [assert-equal] Component schema for light material validator has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light material validator has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for validator is missing name metadata. */ +/* ✔ [assert-true] Component schema for watermark is missing metadata. */ +/* ✔ [assert-equal] Component schema for light material watermark has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light material watermark has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for watermark is missing name metadata. */ +/* ✔ [assert-true] Component schema for file-input is missing metadata. */ +/* ✔ [assert-equal] Component schema for light material file-input has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light material file-input has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for file-input is missing name metadata. */ +/* ✔ [assert-true] Component schema for category-chart is missing metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap category-chart has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap category-chart has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for category-chart is missing name metadata. */ +/* ✔ [assert-true] Component schema for data-chart is missing metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap data-chart has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap data-chart has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for data-chart is missing name metadata. */ +/* ✔ [assert-true] Component schema for doughnut-chart is missing metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap doughnut-chart has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap doughnut-chart has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for doughnut-chart is missing name metadata. */ +/* ✔ [assert-true] Component schema for financial-chart is missing metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap financial-chart has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap financial-chart has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for financial-chart is missing name metadata. */ +/* ✔ [assert-true] Component schema for funnel-chart is missing metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap funnel-chart has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap funnel-chart has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for funnel-chart is missing name metadata. */ +/* ✔ [assert-true] Component schema for linear-gauge is missing metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap linear-gauge has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap linear-gauge has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for linear-gauge is missing name metadata. */ +/* ✔ [assert-true] Component schema for radial-gauge is missing metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap radial-gauge has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap radial-gauge has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for radial-gauge is missing name metadata. */ +/* ✔ [assert-true] Component schema for geo-map is missing metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap geo-map has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap geo-map has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for geo-map is missing name metadata. */ +/* ✔ [assert-true] Component schema for bullet-graph is missing metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap bullet-graph has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap bullet-graph has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for bullet-graph is missing name metadata. */ +/* ✔ [assert-true] Component schema for pie-chart is missing metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap pie-chart has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap pie-chart has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for pie-chart is missing name metadata. */ +/* ✔ [assert-true] Component schema for shape-chart is missing metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap shape-chart has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap shape-chart has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for shape-chart is missing name metadata. */ +/* ✔ [assert-true] Component schema for sparkline is missing metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap sparkline has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap sparkline has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for sparkline is missing name metadata. */ +/* ✔ [assert-true] Component schema for action-strip is missing metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap action-strip has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap action-strip has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for action-strip is missing name metadata. */ +/* ✔ [assert-true] Component schema for avatar is missing metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap avatar has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap avatar has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for avatar is missing name metadata. */ +/* ✔ [assert-true] Component schema for badge is missing metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap badge has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap badge has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for badge is missing name metadata. */ +/* ✔ [assert-true] Component schema for banner is missing metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap banner has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap banner has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for banner is missing name metadata. */ +/* ✔ [assert-true] Component schema for bottom-nav is missing metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap bottom-nav has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap bottom-nav has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for bottom-nav is missing name metadata. */ +/* ✔ [assert-true] Component schema for flat button is missing metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap flat button has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap flat button has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for flat button is missing name metadata. */ +/* ✔ [assert-true] Component schema for outlined button is missing metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap outlined button has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap outlined button has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for outlined button is missing name metadata. */ +/* ✔ [assert-true] Component schema for contained button is missing metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap contained button has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap contained button has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for contained button is missing name metadata. */ +/* ✔ [assert-true] Component schema for fab button is missing metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap fab button has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap fab button has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for fab button is missing name metadata. */ +/* ✔ [assert-true] Component schema for button-group is missing metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap button-group has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap button-group has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for button-group is missing name metadata. */ +/* ✔ [assert-true] Component schema for calendar is missing metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap calendar has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap calendar has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for calendar is missing name metadata. */ +/* ✔ [assert-true] Component schema for card is missing metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap card has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap card has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for card is missing name metadata. */ +/* ✔ [assert-true] Component schema for carousel is missing metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap carousel has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap carousel has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for carousel is missing name metadata. */ +/* ✔ [assert-true] Component schema for chat is missing metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap chat has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap chat has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for chat is missing name metadata. */ +/* ✔ [assert-true] Component schema for checkbox is missing metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap checkbox has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap checkbox has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for checkbox is missing name metadata. */ +/* ✔ [assert-true] Component schema for chip is missing metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap chip has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap chip has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for chip is missing name metadata. */ +/* ✔ [assert-true] Component schema for color-picker is missing metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap color-picker has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap color-picker has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for color-picker is missing name metadata. */ +/* ✔ [assert-true] Component schema for column-actions is missing metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap column-actions has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap column-actions has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for column-actions is missing name metadata. */ +/* ✔ [assert-true] Component schema for combo is missing metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap combo has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap combo has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for combo is missing name metadata. */ +/* ✔ [assert-true] Component schema for date-picker is missing metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap date-picker has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap date-picker has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for date-picker is missing name metadata. */ +/* ✔ [assert-true] Component schema for date-range is missing metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap date-range has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap date-range has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for date-range is missing name metadata. */ +/* ✔ [assert-true] Component schema for dialog is missing metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap dialog has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap dialog has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for dialog is missing name metadata. */ +/* ✔ [assert-true] Component schema for divider is missing metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap divider has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap divider has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for divider is missing name metadata. */ +/* ✔ [assert-true] Component schema for dockmanager is missing metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap dockmanager has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap dockmanager has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for dockmanager is missing name metadata. */ +/* ✔ [assert-true] Component schema for drop-down is missing metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap drop-down has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap drop-down has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for drop-down is missing name metadata. */ +/* ✔ [assert-true] Component schema for expansion-panel is missing metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap expansion-panel has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap expansion-panel has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for expansion-panel is missing name metadata. */ +/* ✔ [assert-true] Component schema for grid is missing metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap grid has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap grid has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for grid is missing name metadata. */ +/* ✔ [assert-true] Component schema for grid-excel-filtering is missing metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap grid-excel-filtering has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap grid-excel-filtering has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for grid-excel-filtering is missing name metadata. */ +/* ✔ [assert-true] Component schema for grid-filtering is missing metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap grid-filtering has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap grid-filtering has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for grid-filtering is missing name metadata. */ +/* ✔ [assert-true] Component schema for grid-summary is missing metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap grid-summary has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap grid-summary has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for grid-summary is missing name metadata. */ +/* ✔ [assert-true] Component schema for grid-toolbar is missing metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap grid-toolbar has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap grid-toolbar has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for grid-toolbar is missing name metadata. */ +/* ✔ [assert-true] Component schema for highlight is missing metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap highlight has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap highlight has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for highlight is missing name metadata. */ +/* ✔ [assert-true] Component schema for icon is missing metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap icon has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap icon has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for icon is missing name metadata. */ +/* ✔ [assert-true] Component schema for flat icon-button is missing metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap flat icon-button has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap flat icon-button has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for flat icon-button is missing name metadata. */ +/* ✔ [assert-true] Component schema for contained icon-button is missing metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap contained icon-button has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap contained icon-button has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for contained icon-button is missing name metadata. */ +/* ✔ [assert-true] Component schema for outlined icon-button is missing metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap outlined icon-button has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap outlined icon-button has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for outlined icon-button is missing name metadata. */ +/* ✔ [assert-true] Component schema for input-group is missing metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap input-group has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap input-group has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for input-group is missing name metadata. */ +/* ✔ [assert-true] Component schema for label is missing metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap label has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap label has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for label is missing name metadata. */ +/* ✔ [assert-true] Component schema for list is missing metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap list has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap list has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for list is missing name metadata. */ +/* ✔ [assert-true] Component schema for navbar is missing metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap navbar has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap navbar has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for navbar is missing name metadata. */ +/* ✔ [assert-true] Component schema for nav-drawer is missing metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap nav-drawer has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap nav-drawer has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for nav-drawer is missing name metadata. */ +/* ✔ [assert-true] Component schema for overlay is missing metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap overlay has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap overlay has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for overlay is missing name metadata. */ +/* ✔ [assert-true] Component schema for paginator is missing metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap paginator has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap paginator has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for paginator is missing name metadata. */ +/* ✔ [assert-true] Component schema for pivot-data-selector is missing metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap pivot-data-selector has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap pivot-data-selector has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for pivot-data-selector is missing name metadata. */ +/* ✔ [assert-true] Component schema for linear-bar is missing metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap linear-bar has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap linear-bar has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for linear-bar is missing name metadata. */ +/* ✔ [assert-true] Component schema for circular-bar is missing metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap circular-bar has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap circular-bar has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for circular-bar is missing name metadata. */ +/* ✔ [assert-true] Component schema for qr-code is missing metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap qr-code has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap qr-code has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for qr-code is missing name metadata. */ +/* ✔ [assert-true] Component schema for query-builder is missing metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap query-builder has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap query-builder has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for query-builder is missing name metadata. */ +/* ✔ [assert-true] Component schema for radio is missing metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap radio has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap radio has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for radio is missing name metadata. */ +/* ✔ [assert-true] Component schema for rating is missing metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap rating has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap rating has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for rating is missing name metadata. */ +/* ✔ [assert-true] Component schema for resize-indicator is missing metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap resize-indicator has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap resize-indicator has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for resize-indicator is missing name metadata. */ +/* ✔ [assert-true] Component schema for ripple is missing metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap ripple has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap ripple has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for ripple is missing name metadata. */ +/* ✔ [assert-true] Component schema for scrollbar is missing metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap scrollbar has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap scrollbar has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for scrollbar is missing name metadata. */ +/* ✔ [assert-true] Component schema for select is missing metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap select has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap select has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for select is missing name metadata. */ +/* ✔ [assert-true] Component schema for slider is missing metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap slider has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap slider has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for slider is missing name metadata. */ +/* ✔ [assert-true] Component schema for snackbar is missing metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap snackbar has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap snackbar has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for snackbar is missing name metadata. */ +/* ✔ [assert-true] Component schema for splitter is missing metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap splitter has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap splitter has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for splitter is missing name metadata. */ +/* ✔ [assert-true] Component schema for stepper is missing metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap stepper has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap stepper has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for stepper is missing name metadata. */ +/* ✔ [assert-true] Component schema for switch is missing metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap switch has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap switch has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for switch is missing name metadata. */ +/* ✔ [assert-true] Component schema for tabs is missing metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap tabs has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap tabs has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for tabs is missing name metadata. */ +/* ✔ [assert-true] Component schema for tile-manager is missing metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap tile-manager has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap tile-manager has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for tile-manager is missing name metadata. */ +/* ✔ [assert-true] Component schema for time-picker is missing metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap time-picker has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap time-picker has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for time-picker is missing name metadata. */ +/* ✔ [assert-true] Component schema for toast is missing metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap toast has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap toast has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for toast is missing name metadata. */ +/* ✔ [assert-true] Component schema for tooltip is missing metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap tooltip has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap tooltip has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for tooltip is missing name metadata. */ +/* ✔ [assert-true] Component schema for tree is missing metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap tree has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap tree has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for tree is missing name metadata. */ +/* ✔ [assert-true] Component schema for validator is missing metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap validator has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap validator has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for validator is missing name metadata. */ +/* ✔ [assert-true] Component schema for watermark is missing metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap watermark has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap watermark has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for watermark is missing name metadata. */ +/* ✔ [assert-true] Component schema for file-input is missing metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap file-input has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap file-input has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for file-input is missing name metadata. */ +/* ✔ [assert-true] Component schema for category-chart is missing metadata. */ +/* ✔ [assert-equal] Component schema for light fluent category-chart has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light fluent category-chart has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for category-chart is missing name metadata. */ +/* ✔ [assert-true] Component schema for data-chart is missing metadata. */ +/* ✔ [assert-equal] Component schema for light fluent data-chart has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light fluent data-chart has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for data-chart is missing name metadata. */ +/* ✔ [assert-true] Component schema for doughnut-chart is missing metadata. */ +/* ✔ [assert-equal] Component schema for light fluent doughnut-chart has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light fluent doughnut-chart has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for doughnut-chart is missing name metadata. */ +/* ✔ [assert-true] Component schema for financial-chart is missing metadata. */ +/* ✔ [assert-equal] Component schema for light fluent financial-chart has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light fluent financial-chart has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for financial-chart is missing name metadata. */ +/* ✔ [assert-true] Component schema for funnel-chart is missing metadata. */ +/* ✔ [assert-equal] Component schema for light fluent funnel-chart has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light fluent funnel-chart has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for funnel-chart is missing name metadata. */ +/* ✔ [assert-true] Component schema for linear-gauge is missing metadata. */ +/* ✔ [assert-equal] Component schema for light fluent linear-gauge has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light fluent linear-gauge has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for linear-gauge is missing name metadata. */ +/* ✔ [assert-true] Component schema for radial-gauge is missing metadata. */ +/* ✔ [assert-equal] Component schema for light fluent radial-gauge has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light fluent radial-gauge has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for radial-gauge is missing name metadata. */ +/* ✔ [assert-true] Component schema for geo-map is missing metadata. */ +/* ✔ [assert-equal] Component schema for light fluent geo-map has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light fluent geo-map has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for geo-map is missing name metadata. */ +/* ✔ [assert-true] Component schema for bullet-graph is missing metadata. */ +/* ✔ [assert-equal] Component schema for light fluent bullet-graph has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light fluent bullet-graph has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for bullet-graph is missing name metadata. */ +/* ✔ [assert-true] Component schema for pie-chart is missing metadata. */ +/* ✔ [assert-equal] Component schema for light fluent pie-chart has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light fluent pie-chart has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for pie-chart is missing name metadata. */ +/* ✔ [assert-true] Component schema for shape-chart is missing metadata. */ +/* ✔ [assert-equal] Component schema for light fluent shape-chart has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light fluent shape-chart has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for shape-chart is missing name metadata. */ +/* ✔ [assert-true] Component schema for sparkline is missing metadata. */ +/* ✔ [assert-equal] Component schema for light fluent sparkline has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light fluent sparkline has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for sparkline is missing name metadata. */ +/* ✔ [assert-true] Component schema for action-strip is missing metadata. */ +/* ✔ [assert-equal] Component schema for light fluent action-strip has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light fluent action-strip has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for action-strip is missing name metadata. */ +/* ✔ [assert-true] Component schema for avatar is missing metadata. */ +/* ✔ [assert-equal] Component schema for light fluent avatar has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light fluent avatar has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for avatar is missing name metadata. */ +/* ✔ [assert-true] Component schema for badge is missing metadata. */ +/* ✔ [assert-equal] Component schema for light fluent badge has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light fluent badge has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for badge is missing name metadata. */ +/* ✔ [assert-true] Component schema for banner is missing metadata. */ +/* ✔ [assert-equal] Component schema for light fluent banner has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light fluent banner has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for banner is missing name metadata. */ +/* ✔ [assert-true] Component schema for bottom-nav is missing metadata. */ +/* ✔ [assert-equal] Component schema for light fluent bottom-nav has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light fluent bottom-nav has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for bottom-nav is missing name metadata. */ +/* ✔ [assert-true] Component schema for flat button is missing metadata. */ +/* ✔ [assert-equal] Component schema for light fluent flat button has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light fluent flat button has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for flat button is missing name metadata. */ +/* ✔ [assert-true] Component schema for outlined button is missing metadata. */ +/* ✔ [assert-equal] Component schema for light fluent outlined button has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light fluent outlined button has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for outlined button is missing name metadata. */ +/* ✔ [assert-true] Component schema for contained button is missing metadata. */ +/* ✔ [assert-equal] Component schema for light fluent contained button has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light fluent contained button has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for contained button is missing name metadata. */ +/* ✔ [assert-true] Component schema for fab button is missing metadata. */ +/* ✔ [assert-equal] Component schema for light fluent fab button has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light fluent fab button has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for fab button is missing name metadata. */ +/* ✔ [assert-true] Component schema for button-group is missing metadata. */ +/* ✔ [assert-equal] Component schema for light fluent button-group has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light fluent button-group has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for button-group is missing name metadata. */ +/* ✔ [assert-true] Component schema for calendar is missing metadata. */ +/* ✔ [assert-equal] Component schema for light fluent calendar has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light fluent calendar has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for calendar is missing name metadata. */ +/* ✔ [assert-true] Component schema for card is missing metadata. */ +/* ✔ [assert-equal] Component schema for light fluent card has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light fluent card has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for card is missing name metadata. */ +/* ✔ [assert-true] Component schema for carousel is missing metadata. */ +/* ✔ [assert-equal] Component schema for light fluent carousel has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light fluent carousel has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for carousel is missing name metadata. */ +/* ✔ [assert-true] Component schema for chat is missing metadata. */ +/* ✔ [assert-equal] Component schema for light fluent chat has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light fluent chat has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for chat is missing name metadata. */ +/* ✔ [assert-true] Component schema for checkbox is missing metadata. */ +/* ✔ [assert-equal] Component schema for light fluent checkbox has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light fluent checkbox has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for checkbox is missing name metadata. */ +/* ✔ [assert-true] Component schema for chip is missing metadata. */ +/* ✔ [assert-equal] Component schema for light fluent chip has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light fluent chip has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for chip is missing name metadata. */ +/* ✔ [assert-true] Component schema for color-picker is missing metadata. */ +/* ✔ [assert-equal] Component schema for light fluent color-picker has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light fluent color-picker has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for color-picker is missing name metadata. */ +/* ✔ [assert-true] Component schema for column-actions is missing metadata. */ +/* ✔ [assert-equal] Component schema for light fluent column-actions has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light fluent column-actions has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for column-actions is missing name metadata. */ +/* ✔ [assert-true] Component schema for combo is missing metadata. */ +/* ✔ [assert-equal] Component schema for light fluent combo has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light fluent combo has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for combo is missing name metadata. */ +/* ✔ [assert-true] Component schema for date-picker is missing metadata. */ +/* ✔ [assert-equal] Component schema for light fluent date-picker has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light fluent date-picker has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for date-picker is missing name metadata. */ +/* ✔ [assert-true] Component schema for date-range is missing metadata. */ +/* ✔ [assert-equal] Component schema for light fluent date-range has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light fluent date-range has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for date-range is missing name metadata. */ +/* ✔ [assert-true] Component schema for dialog is missing metadata. */ +/* ✔ [assert-equal] Component schema for light fluent dialog has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light fluent dialog has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for dialog is missing name metadata. */ +/* ✔ [assert-true] Component schema for divider is missing metadata. */ +/* ✔ [assert-equal] Component schema for light fluent divider has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light fluent divider has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for divider is missing name metadata. */ +/* ✔ [assert-true] Component schema for dockmanager is missing metadata. */ +/* ✔ [assert-equal] Component schema for light fluent dockmanager has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light fluent dockmanager has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for dockmanager is missing name metadata. */ +/* ✔ [assert-true] Component schema for drop-down is missing metadata. */ +/* ✔ [assert-equal] Component schema for light fluent drop-down has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light fluent drop-down has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for drop-down is missing name metadata. */ +/* ✔ [assert-true] Component schema for expansion-panel is missing metadata. */ +/* ✔ [assert-equal] Component schema for light fluent expansion-panel has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light fluent expansion-panel has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for expansion-panel is missing name metadata. */ +/* ✔ [assert-true] Component schema for grid is missing metadata. */ +/* ✔ [assert-equal] Component schema for light fluent grid has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light fluent grid has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for grid is missing name metadata. */ +/* ✔ [assert-true] Component schema for grid-excel-filtering is missing metadata. */ +/* ✔ [assert-equal] Component schema for light fluent grid-excel-filtering has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light fluent grid-excel-filtering has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for grid-excel-filtering is missing name metadata. */ +/* ✔ [assert-true] Component schema for grid-filtering is missing metadata. */ +/* ✔ [assert-equal] Component schema for light fluent grid-filtering has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light fluent grid-filtering has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for grid-filtering is missing name metadata. */ +/* ✔ [assert-true] Component schema for grid-summary is missing metadata. */ +/* ✔ [assert-equal] Component schema for light fluent grid-summary has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light fluent grid-summary has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for grid-summary is missing name metadata. */ +/* ✔ [assert-true] Component schema for grid-toolbar is missing metadata. */ +/* ✔ [assert-equal] Component schema for light fluent grid-toolbar has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light fluent grid-toolbar has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for grid-toolbar is missing name metadata. */ +/* ✔ [assert-true] Component schema for highlight is missing metadata. */ +/* ✔ [assert-equal] Component schema for light fluent highlight has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light fluent highlight has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for highlight is missing name metadata. */ +/* ✔ [assert-true] Component schema for icon is missing metadata. */ +/* ✔ [assert-equal] Component schema for light fluent icon has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light fluent icon has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for icon is missing name metadata. */ +/* ✔ [assert-true] Component schema for flat icon-button is missing metadata. */ +/* ✔ [assert-equal] Component schema for light fluent flat icon-button has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light fluent flat icon-button has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for flat icon-button is missing name metadata. */ +/* ✔ [assert-true] Component schema for contained icon-button is missing metadata. */ +/* ✔ [assert-equal] Component schema for light fluent contained icon-button has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light fluent contained icon-button has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for contained icon-button is missing name metadata. */ +/* ✔ [assert-true] Component schema for outlined icon-button is missing metadata. */ +/* ✔ [assert-equal] Component schema for light fluent outlined icon-button has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light fluent outlined icon-button has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for outlined icon-button is missing name metadata. */ +/* ✔ [assert-true] Component schema for input-group is missing metadata. */ +/* ✔ [assert-equal] Component schema for light fluent input-group has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light fluent input-group has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for input-group is missing name metadata. */ +/* ✔ [assert-true] Component schema for label is missing metadata. */ +/* ✔ [assert-equal] Component schema for light fluent label has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light fluent label has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for label is missing name metadata. */ +/* ✔ [assert-true] Component schema for list is missing metadata. */ +/* ✔ [assert-equal] Component schema for light fluent list has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light fluent list has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for list is missing name metadata. */ +/* ✔ [assert-true] Component schema for navbar is missing metadata. */ +/* ✔ [assert-equal] Component schema for light fluent navbar has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light fluent navbar has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for navbar is missing name metadata. */ +/* ✔ [assert-true] Component schema for nav-drawer is missing metadata. */ +/* ✔ [assert-equal] Component schema for light fluent nav-drawer has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light fluent nav-drawer has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for nav-drawer is missing name metadata. */ +/* ✔ [assert-true] Component schema for overlay is missing metadata. */ +/* ✔ [assert-equal] Component schema for light fluent overlay has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light fluent overlay has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for overlay is missing name metadata. */ +/* ✔ [assert-true] Component schema for paginator is missing metadata. */ +/* ✔ [assert-equal] Component schema for light fluent paginator has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light fluent paginator has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for paginator is missing name metadata. */ +/* ✔ [assert-true] Component schema for pivot-data-selector is missing metadata. */ +/* ✔ [assert-equal] Component schema for light fluent pivot-data-selector has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light fluent pivot-data-selector has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for pivot-data-selector is missing name metadata. */ +/* ✔ [assert-true] Component schema for linear-bar is missing metadata. */ +/* ✔ [assert-equal] Component schema for light fluent linear-bar has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light fluent linear-bar has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for linear-bar is missing name metadata. */ +/* ✔ [assert-true] Component schema for circular-bar is missing metadata. */ +/* ✔ [assert-equal] Component schema for light fluent circular-bar has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light fluent circular-bar has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for circular-bar is missing name metadata. */ +/* ✔ [assert-true] Component schema for qr-code is missing metadata. */ +/* ✔ [assert-equal] Component schema for light fluent qr-code has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light fluent qr-code has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for qr-code is missing name metadata. */ +/* ✔ [assert-true] Component schema for query-builder is missing metadata. */ +/* ✔ [assert-equal] Component schema for light fluent query-builder has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light fluent query-builder has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for query-builder is missing name metadata. */ +/* ✔ [assert-true] Component schema for radio is missing metadata. */ +/* ✔ [assert-equal] Component schema for light fluent radio has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light fluent radio has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for radio is missing name metadata. */ +/* ✔ [assert-true] Component schema for rating is missing metadata. */ +/* ✔ [assert-equal] Component schema for light fluent rating has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light fluent rating has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for rating is missing name metadata. */ +/* ✔ [assert-true] Component schema for resize-indicator is missing metadata. */ +/* ✔ [assert-equal] Component schema for light fluent resize-indicator has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light fluent resize-indicator has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for resize-indicator is missing name metadata. */ +/* ✔ [assert-true] Component schema for ripple is missing metadata. */ +/* ✔ [assert-equal] Component schema for light fluent ripple has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light fluent ripple has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for ripple is missing name metadata. */ +/* ✔ [assert-true] Component schema for scrollbar is missing metadata. */ +/* ✔ [assert-equal] Component schema for light fluent scrollbar has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light fluent scrollbar has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for scrollbar is missing name metadata. */ +/* ✔ [assert-true] Component schema for select is missing metadata. */ +/* ✔ [assert-equal] Component schema for light fluent select has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light fluent select has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for select is missing name metadata. */ +/* ✔ [assert-true] Component schema for slider is missing metadata. */ +/* ✔ [assert-equal] Component schema for light fluent slider has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light fluent slider has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for slider is missing name metadata. */ +/* ✔ [assert-true] Component schema for snackbar is missing metadata. */ +/* ✔ [assert-equal] Component schema for light fluent snackbar has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light fluent snackbar has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for snackbar is missing name metadata. */ +/* ✔ [assert-true] Component schema for splitter is missing metadata. */ +/* ✔ [assert-equal] Component schema for light fluent splitter has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light fluent splitter has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for splitter is missing name metadata. */ +/* ✔ [assert-true] Component schema for stepper is missing metadata. */ +/* ✔ [assert-equal] Component schema for light fluent stepper has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light fluent stepper has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for stepper is missing name metadata. */ +/* ✔ [assert-true] Component schema for switch is missing metadata. */ +/* ✔ [assert-equal] Component schema for light fluent switch has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light fluent switch has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for switch is missing name metadata. */ +/* ✔ [assert-true] Component schema for tabs is missing metadata. */ +/* ✔ [assert-equal] Component schema for light fluent tabs has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light fluent tabs has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for tabs is missing name metadata. */ +/* ✔ [assert-true] Component schema for tile-manager is missing metadata. */ +/* ✔ [assert-equal] Component schema for light fluent tile-manager has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light fluent tile-manager has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for tile-manager is missing name metadata. */ +/* ✔ [assert-true] Component schema for time-picker is missing metadata. */ +/* ✔ [assert-equal] Component schema for light fluent time-picker has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light fluent time-picker has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for time-picker is missing name metadata. */ +/* ✔ [assert-true] Component schema for toast is missing metadata. */ +/* ✔ [assert-equal] Component schema for light fluent toast has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light fluent toast has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for toast is missing name metadata. */ +/* ✔ [assert-true] Component schema for tooltip is missing metadata. */ +/* ✔ [assert-equal] Component schema for light fluent tooltip has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light fluent tooltip has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for tooltip is missing name metadata. */ +/* ✔ [assert-true] Component schema for tree is missing metadata. */ +/* ✔ [assert-equal] Component schema for light fluent tree has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light fluent tree has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for tree is missing name metadata. */ +/* ✔ [assert-true] Component schema for validator is missing metadata. */ +/* ✔ [assert-equal] Component schema for light fluent validator has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light fluent validator has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for validator is missing name metadata. */ +/* ✔ [assert-true] Component schema for watermark is missing metadata. */ +/* ✔ [assert-equal] Component schema for light fluent watermark has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light fluent watermark has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for watermark is missing name metadata. */ +/* ✔ [assert-true] Component schema for file-input is missing metadata. */ +/* ✔ [assert-equal] Component schema for light fluent file-input has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light fluent file-input has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for file-input is missing name metadata. */ +/* ✔ [assert-true] Component schema for category-chart is missing metadata. */ +/* ✔ [assert-equal] Component schema for light indigo category-chart has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light indigo category-chart has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for category-chart is missing name metadata. */ +/* ✔ [assert-true] Component schema for data-chart is missing metadata. */ +/* ✔ [assert-equal] Component schema for light indigo data-chart has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light indigo data-chart has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for data-chart is missing name metadata. */ +/* ✔ [assert-true] Component schema for doughnut-chart is missing metadata. */ +/* ✔ [assert-equal] Component schema for light indigo doughnut-chart has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light indigo doughnut-chart has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for doughnut-chart is missing name metadata. */ +/* ✔ [assert-true] Component schema for financial-chart is missing metadata. */ +/* ✔ [assert-equal] Component schema for light indigo financial-chart has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light indigo financial-chart has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for financial-chart is missing name metadata. */ +/* ✔ [assert-true] Component schema for funnel-chart is missing metadata. */ +/* ✔ [assert-equal] Component schema for light indigo funnel-chart has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light indigo funnel-chart has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for funnel-chart is missing name metadata. */ +/* ✔ [assert-true] Component schema for linear-gauge is missing metadata. */ +/* ✔ [assert-equal] Component schema for light indigo linear-gauge has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light indigo linear-gauge has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for linear-gauge is missing name metadata. */ +/* ✔ [assert-true] Component schema for radial-gauge is missing metadata. */ +/* ✔ [assert-equal] Component schema for light indigo radial-gauge has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light indigo radial-gauge has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for radial-gauge is missing name metadata. */ +/* ✔ [assert-true] Component schema for geo-map is missing metadata. */ +/* ✔ [assert-equal] Component schema for light indigo geo-map has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light indigo geo-map has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for geo-map is missing name metadata. */ +/* ✔ [assert-true] Component schema for bullet-graph is missing metadata. */ +/* ✔ [assert-equal] Component schema for light indigo bullet-graph has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light indigo bullet-graph has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for bullet-graph is missing name metadata. */ +/* ✔ [assert-true] Component schema for pie-chart is missing metadata. */ +/* ✔ [assert-equal] Component schema for light indigo pie-chart has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light indigo pie-chart has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for pie-chart is missing name metadata. */ +/* ✔ [assert-true] Component schema for shape-chart is missing metadata. */ +/* ✔ [assert-equal] Component schema for light indigo shape-chart has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light indigo shape-chart has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for shape-chart is missing name metadata. */ +/* ✔ [assert-true] Component schema for sparkline is missing metadata. */ +/* ✔ [assert-equal] Component schema for light indigo sparkline has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light indigo sparkline has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for sparkline is missing name metadata. */ +/* ✔ [assert-true] Component schema for action-strip is missing metadata. */ +/* ✔ [assert-equal] Component schema for light indigo action-strip has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light indigo action-strip has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for action-strip is missing name metadata. */ +/* ✔ [assert-true] Component schema for avatar is missing metadata. */ +/* ✔ [assert-equal] Component schema for light indigo avatar has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light indigo avatar has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for avatar is missing name metadata. */ +/* ✔ [assert-true] Component schema for badge is missing metadata. */ +/* ✔ [assert-equal] Component schema for light indigo badge has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light indigo badge has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for badge is missing name metadata. */ +/* ✔ [assert-true] Component schema for banner is missing metadata. */ +/* ✔ [assert-equal] Component schema for light indigo banner has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light indigo banner has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for banner is missing name metadata. */ +/* ✔ [assert-true] Component schema for bottom-nav is missing metadata. */ +/* ✔ [assert-equal] Component schema for light indigo bottom-nav has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light indigo bottom-nav has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for bottom-nav is missing name metadata. */ +/* ✔ [assert-true] Component schema for flat button is missing metadata. */ +/* ✔ [assert-equal] Component schema for light indigo flat button has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light indigo flat button has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for flat button is missing name metadata. */ +/* ✔ [assert-true] Component schema for outlined button is missing metadata. */ +/* ✔ [assert-equal] Component schema for light indigo outlined button has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light indigo outlined button has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for outlined button is missing name metadata. */ +/* ✔ [assert-true] Component schema for contained button is missing metadata. */ +/* ✔ [assert-equal] Component schema for light indigo contained button has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light indigo contained button has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for contained button is missing name metadata. */ +/* ✔ [assert-true] Component schema for fab button is missing metadata. */ +/* ✔ [assert-equal] Component schema for light indigo fab button has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light indigo fab button has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for fab button is missing name metadata. */ +/* ✔ [assert-true] Component schema for button-group is missing metadata. */ +/* ✔ [assert-equal] Component schema for light indigo button-group has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light indigo button-group has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for button-group is missing name metadata. */ +/* ✔ [assert-true] Component schema for calendar is missing metadata. */ +/* ✔ [assert-equal] Component schema for light indigo calendar has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light indigo calendar has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for calendar is missing name metadata. */ +/* ✔ [assert-true] Component schema for card is missing metadata. */ +/* ✔ [assert-equal] Component schema for light indigo card has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light indigo card has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for card is missing name metadata. */ +/* ✔ [assert-true] Component schema for carousel is missing metadata. */ +/* ✔ [assert-equal] Component schema for light indigo carousel has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light indigo carousel has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for carousel is missing name metadata. */ +/* ✔ [assert-true] Component schema for chat is missing metadata. */ +/* ✔ [assert-equal] Component schema for light indigo chat has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light indigo chat has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for chat is missing name metadata. */ +/* ✔ [assert-true] Component schema for checkbox is missing metadata. */ +/* ✔ [assert-equal] Component schema for light indigo checkbox has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light indigo checkbox has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for checkbox is missing name metadata. */ +/* ✔ [assert-true] Component schema for chip is missing metadata. */ +/* ✔ [assert-equal] Component schema for light indigo chip has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light indigo chip has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for chip is missing name metadata. */ +/* ✔ [assert-true] Component schema for color-picker is missing metadata. */ +/* ✔ [assert-equal] Component schema for light indigo color-picker has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light indigo color-picker has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for color-picker is missing name metadata. */ +/* ✔ [assert-true] Component schema for column-actions is missing metadata. */ +/* ✔ [assert-equal] Component schema for light indigo column-actions has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light indigo column-actions has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for column-actions is missing name metadata. */ +/* ✔ [assert-true] Component schema for combo is missing metadata. */ +/* ✔ [assert-equal] Component schema for light indigo combo has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light indigo combo has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for combo is missing name metadata. */ +/* ✔ [assert-true] Component schema for date-picker is missing metadata. */ +/* ✔ [assert-equal] Component schema for light indigo date-picker has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light indigo date-picker has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for date-picker is missing name metadata. */ +/* ✔ [assert-true] Component schema for date-range is missing metadata. */ +/* ✔ [assert-equal] Component schema for light indigo date-range has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light indigo date-range has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for date-range is missing name metadata. */ +/* ✔ [assert-true] Component schema for dialog is missing metadata. */ +/* ✔ [assert-equal] Component schema for light indigo dialog has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light indigo dialog has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for dialog is missing name metadata. */ +/* ✔ [assert-true] Component schema for divider is missing metadata. */ +/* ✔ [assert-equal] Component schema for light indigo divider has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light indigo divider has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for divider is missing name metadata. */ +/* ✔ [assert-true] Component schema for dockmanager is missing metadata. */ +/* ✔ [assert-equal] Component schema for light indigo dockmanager has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light indigo dockmanager has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for dockmanager is missing name metadata. */ +/* ✔ [assert-true] Component schema for drop-down is missing metadata. */ +/* ✔ [assert-equal] Component schema for light indigo drop-down has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light indigo drop-down has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for drop-down is missing name metadata. */ +/* ✔ [assert-true] Component schema for expansion-panel is missing metadata. */ +/* ✔ [assert-equal] Component schema for light indigo expansion-panel has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light indigo expansion-panel has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for expansion-panel is missing name metadata. */ +/* ✔ [assert-true] Component schema for grid is missing metadata. */ +/* ✔ [assert-equal] Component schema for light indigo grid has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light indigo grid has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for grid is missing name metadata. */ +/* ✔ [assert-true] Component schema for grid-excel-filtering is missing metadata. */ +/* ✔ [assert-equal] Component schema for light indigo grid-excel-filtering has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light indigo grid-excel-filtering has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for grid-excel-filtering is missing name metadata. */ +/* ✔ [assert-true] Component schema for grid-filtering is missing metadata. */ +/* ✔ [assert-equal] Component schema for light indigo grid-filtering has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light indigo grid-filtering has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for grid-filtering is missing name metadata. */ +/* ✔ [assert-true] Component schema for grid-summary is missing metadata. */ +/* ✔ [assert-equal] Component schema for light indigo grid-summary has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light indigo grid-summary has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for grid-summary is missing name metadata. */ +/* ✔ [assert-true] Component schema for grid-toolbar is missing metadata. */ +/* ✔ [assert-equal] Component schema for light indigo grid-toolbar has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light indigo grid-toolbar has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for grid-toolbar is missing name metadata. */ +/* ✔ [assert-true] Component schema for highlight is missing metadata. */ +/* ✔ [assert-equal] Component schema for light indigo highlight has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light indigo highlight has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for highlight is missing name metadata. */ +/* ✔ [assert-true] Component schema for icon is missing metadata. */ +/* ✔ [assert-equal] Component schema for light indigo icon has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light indigo icon has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for icon is missing name metadata. */ +/* ✔ [assert-true] Component schema for flat icon-button is missing metadata. */ +/* ✔ [assert-equal] Component schema for light indigo flat icon-button has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light indigo flat icon-button has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for flat icon-button is missing name metadata. */ +/* ✔ [assert-true] Component schema for contained icon-button is missing metadata. */ +/* ✔ [assert-equal] Component schema for light indigo contained icon-button has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light indigo contained icon-button has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for contained icon-button is missing name metadata. */ +/* ✔ [assert-true] Component schema for outlined icon-button is missing metadata. */ +/* ✔ [assert-equal] Component schema for light indigo outlined icon-button has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light indigo outlined icon-button has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for outlined icon-button is missing name metadata. */ +/* ✔ [assert-true] Component schema for input-group is missing metadata. */ +/* ✔ [assert-equal] Component schema for light indigo input-group has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light indigo input-group has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for input-group is missing name metadata. */ +/* ✔ [assert-true] Component schema for label is missing metadata. */ +/* ✔ [assert-equal] Component schema for light indigo label has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light indigo label has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for label is missing name metadata. */ +/* ✔ [assert-true] Component schema for list is missing metadata. */ +/* ✔ [assert-equal] Component schema for light indigo list has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light indigo list has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for list is missing name metadata. */ +/* ✔ [assert-true] Component schema for navbar is missing metadata. */ +/* ✔ [assert-equal] Component schema for light indigo navbar has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light indigo navbar has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for navbar is missing name metadata. */ +/* ✔ [assert-true] Component schema for nav-drawer is missing metadata. */ +/* ✔ [assert-equal] Component schema for light indigo nav-drawer has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light indigo nav-drawer has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for nav-drawer is missing name metadata. */ +/* ✔ [assert-true] Component schema for overlay is missing metadata. */ +/* ✔ [assert-equal] Component schema for light indigo overlay has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light indigo overlay has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for overlay is missing name metadata. */ +/* ✔ [assert-true] Component schema for paginator is missing metadata. */ +/* ✔ [assert-equal] Component schema for light indigo paginator has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light indigo paginator has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for paginator is missing name metadata. */ +/* ✔ [assert-true] Component schema for pivot-data-selector is missing metadata. */ +/* ✔ [assert-equal] Component schema for light indigo pivot-data-selector has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light indigo pivot-data-selector has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for pivot-data-selector is missing name metadata. */ +/* ✔ [assert-true] Component schema for linear-bar is missing metadata. */ +/* ✔ [assert-equal] Component schema for light indigo linear-bar has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light indigo linear-bar has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for linear-bar is missing name metadata. */ +/* ✔ [assert-true] Component schema for circular-bar is missing metadata. */ +/* ✔ [assert-equal] Component schema for light indigo circular-bar has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light indigo circular-bar has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for circular-bar is missing name metadata. */ +/* ✔ [assert-true] Component schema for qr-code is missing metadata. */ +/* ✔ [assert-equal] Component schema for light indigo qr-code has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light indigo qr-code has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for qr-code is missing name metadata. */ +/* ✔ [assert-true] Component schema for query-builder is missing metadata. */ +/* ✔ [assert-equal] Component schema for light indigo query-builder has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light indigo query-builder has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for query-builder is missing name metadata. */ +/* ✔ [assert-true] Component schema for radio is missing metadata. */ +/* ✔ [assert-equal] Component schema for light indigo radio has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light indigo radio has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for radio is missing name metadata. */ +/* ✔ [assert-true] Component schema for rating is missing metadata. */ +/* ✔ [assert-equal] Component schema for light indigo rating has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light indigo rating has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for rating is missing name metadata. */ +/* ✔ [assert-true] Component schema for resize-indicator is missing metadata. */ +/* ✔ [assert-equal] Component schema for light indigo resize-indicator has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light indigo resize-indicator has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for resize-indicator is missing name metadata. */ +/* ✔ [assert-true] Component schema for ripple is missing metadata. */ +/* ✔ [assert-equal] Component schema for light indigo ripple has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light indigo ripple has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for ripple is missing name metadata. */ +/* ✔ [assert-true] Component schema for scrollbar is missing metadata. */ +/* ✔ [assert-equal] Component schema for light indigo scrollbar has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light indigo scrollbar has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for scrollbar is missing name metadata. */ +/* ✔ [assert-true] Component schema for select is missing metadata. */ +/* ✔ [assert-equal] Component schema for light indigo select has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light indigo select has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for select is missing name metadata. */ +/* ✔ [assert-true] Component schema for slider is missing metadata. */ +/* ✔ [assert-equal] Component schema for light indigo slider has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light indigo slider has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for slider is missing name metadata. */ +/* ✔ [assert-true] Component schema for snackbar is missing metadata. */ +/* ✔ [assert-equal] Component schema for light indigo snackbar has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light indigo snackbar has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for snackbar is missing name metadata. */ +/* ✔ [assert-true] Component schema for splitter is missing metadata. */ +/* ✔ [assert-equal] Component schema for light indigo splitter has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light indigo splitter has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for splitter is missing name metadata. */ +/* ✔ [assert-true] Component schema for stepper is missing metadata. */ +/* ✔ [assert-equal] Component schema for light indigo stepper has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light indigo stepper has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for stepper is missing name metadata. */ +/* ✔ [assert-true] Component schema for switch is missing metadata. */ +/* ✔ [assert-equal] Component schema for light indigo switch has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light indigo switch has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for switch is missing name metadata. */ +/* ✔ [assert-true] Component schema for tabs is missing metadata. */ +/* ✔ [assert-equal] Component schema for light indigo tabs has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light indigo tabs has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for tabs is missing name metadata. */ +/* ✔ [assert-true] Component schema for tile-manager is missing metadata. */ +/* ✔ [assert-equal] Component schema for light indigo tile-manager has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light indigo tile-manager has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for tile-manager is missing name metadata. */ +/* ✔ [assert-true] Component schema for time-picker is missing metadata. */ +/* ✔ [assert-equal] Component schema for light indigo time-picker has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light indigo time-picker has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for time-picker is missing name metadata. */ +/* ✔ [assert-true] Component schema for toast is missing metadata. */ +/* ✔ [assert-equal] Component schema for light indigo toast has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light indigo toast has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for toast is missing name metadata. */ +/* ✔ [assert-true] Component schema for tooltip is missing metadata. */ +/* ✔ [assert-equal] Component schema for light indigo tooltip has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light indigo tooltip has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for tooltip is missing name metadata. */ +/* ✔ [assert-true] Component schema for tree is missing metadata. */ +/* ✔ [assert-equal] Component schema for light indigo tree has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light indigo tree has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for tree is missing name metadata. */ +/* ✔ [assert-true] Component schema for validator is missing metadata. */ +/* ✔ [assert-equal] Component schema for light indigo validator has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light indigo validator has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for validator is missing name metadata. */ +/* ✔ [assert-true] Component schema for watermark is missing metadata. */ +/* ✔ [assert-equal] Component schema for light indigo watermark has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light indigo watermark has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for watermark is missing name metadata. */ +/* ✔ [assert-true] Component schema for file-input is missing metadata. */ +/* ✔ [assert-equal] Component schema for light indigo file-input has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light indigo file-input has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for file-input is missing name metadata. */ +/* ✔ [assert-true] Component schema for category-chart is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark material category-chart has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark material category-chart has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for category-chart is missing name metadata. */ +/* ✔ [assert-true] Component schema for data-chart is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark material data-chart has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark material data-chart has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for data-chart is missing name metadata. */ +/* ✔ [assert-true] Component schema for doughnut-chart is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark material doughnut-chart has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark material doughnut-chart has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for doughnut-chart is missing name metadata. */ +/* ✔ [assert-true] Component schema for financial-chart is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark material financial-chart has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark material financial-chart has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for financial-chart is missing name metadata. */ +/* ✔ [assert-true] Component schema for funnel-chart is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark material funnel-chart has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark material funnel-chart has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for funnel-chart is missing name metadata. */ +/* ✔ [assert-true] Component schema for linear-gauge is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark material linear-gauge has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark material linear-gauge has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for linear-gauge is missing name metadata. */ +/* ✔ [assert-true] Component schema for radial-gauge is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark material radial-gauge has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark material radial-gauge has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for radial-gauge is missing name metadata. */ +/* ✔ [assert-true] Component schema for geo-map is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark material geo-map has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark material geo-map has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for geo-map is missing name metadata. */ +/* ✔ [assert-true] Component schema for bullet-graph is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark material bullet-graph has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark material bullet-graph has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for bullet-graph is missing name metadata. */ +/* ✔ [assert-true] Component schema for pie-chart is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark material pie-chart has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark material pie-chart has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for pie-chart is missing name metadata. */ +/* ✔ [assert-true] Component schema for shape-chart is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark material shape-chart has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark material shape-chart has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for shape-chart is missing name metadata. */ +/* ✔ [assert-true] Component schema for sparkline is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark material sparkline has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark material sparkline has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for sparkline is missing name metadata. */ +/* ✔ [assert-true] Component schema for action-strip is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark material action-strip has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark material action-strip has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for action-strip is missing name metadata. */ +/* ✔ [assert-true] Component schema for avatar is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark material avatar has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark material avatar has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for avatar is missing name metadata. */ +/* ✔ [assert-true] Component schema for badge is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark material badge has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark material badge has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for badge is missing name metadata. */ +/* ✔ [assert-true] Component schema for banner is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark material banner has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark material banner has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for banner is missing name metadata. */ +/* ✔ [assert-true] Component schema for bottom-nav is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark material bottom-nav has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark material bottom-nav has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for bottom-nav is missing name metadata. */ +/* ✔ [assert-true] Component schema for flat button is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark material flat button has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark material flat button has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for flat button is missing name metadata. */ +/* ✔ [assert-true] Component schema for outlined button is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark material outlined button has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark material outlined button has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for outlined button is missing name metadata. */ +/* ✔ [assert-true] Component schema for contained button is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark material contained button has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark material contained button has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for contained button is missing name metadata. */ +/* ✔ [assert-true] Component schema for fab button is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark material fab button has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark material fab button has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for fab button is missing name metadata. */ +/* ✔ [assert-true] Component schema for button-group is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark material button-group has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark material button-group has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for button-group is missing name metadata. */ +/* ✔ [assert-true] Component schema for calendar is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark material calendar has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark material calendar has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for calendar is missing name metadata. */ +/* ✔ [assert-true] Component schema for card is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark material card has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark material card has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for card is missing name metadata. */ +/* ✔ [assert-true] Component schema for carousel is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark material carousel has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark material carousel has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for carousel is missing name metadata. */ +/* ✔ [assert-true] Component schema for chat is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark material chat has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark material chat has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for chat is missing name metadata. */ +/* ✔ [assert-true] Component schema for checkbox is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark material checkbox has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark material checkbox has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for checkbox is missing name metadata. */ +/* ✔ [assert-true] Component schema for chip is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark material chip has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark material chip has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for chip is missing name metadata. */ +/* ✔ [assert-true] Component schema for color-picker is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark material color-picker has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark material color-picker has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for color-picker is missing name metadata. */ +/* ✔ [assert-true] Component schema for column-actions is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark material column-actions has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark material column-actions has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for column-actions is missing name metadata. */ +/* ✔ [assert-true] Component schema for combo is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark material combo has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark material combo has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for combo is missing name metadata. */ +/* ✔ [assert-true] Component schema for date-picker is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark material date-picker has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark material date-picker has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for date-picker is missing name metadata. */ +/* ✔ [assert-true] Component schema for date-range is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark material date-range has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark material date-range has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for date-range is missing name metadata. */ +/* ✔ [assert-true] Component schema for dialog is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark material dialog has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark material dialog has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for dialog is missing name metadata. */ +/* ✔ [assert-true] Component schema for divider is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark material divider has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark material divider has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for divider is missing name metadata. */ +/* ✔ [assert-true] Component schema for dockmanager is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark material dockmanager has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark material dockmanager has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for dockmanager is missing name metadata. */ +/* ✔ [assert-true] Component schema for drop-down is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark material drop-down has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark material drop-down has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for drop-down is missing name metadata. */ +/* ✔ [assert-true] Component schema for expansion-panel is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark material expansion-panel has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark material expansion-panel has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for expansion-panel is missing name metadata. */ +/* ✔ [assert-true] Component schema for grid is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark material grid has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark material grid has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for grid is missing name metadata. */ +/* ✔ [assert-true] Component schema for grid-excel-filtering is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark material grid-excel-filtering has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark material grid-excel-filtering has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for grid-excel-filtering is missing name metadata. */ +/* ✔ [assert-true] Component schema for grid-filtering is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark material grid-filtering has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark material grid-filtering has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for grid-filtering is missing name metadata. */ +/* ✔ [assert-true] Component schema for grid-summary is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark material grid-summary has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark material grid-summary has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for grid-summary is missing name metadata. */ +/* ✔ [assert-true] Component schema for grid-toolbar is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark material grid-toolbar has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark material grid-toolbar has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for grid-toolbar is missing name metadata. */ +/* ✔ [assert-true] Component schema for highlight is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark material highlight has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark material highlight has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for highlight is missing name metadata. */ +/* ✔ [assert-true] Component schema for icon is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark material icon has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark material icon has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for icon is missing name metadata. */ +/* ✔ [assert-true] Component schema for flat icon-button is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark material flat icon-button has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark material flat icon-button has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for flat icon-button is missing name metadata. */ +/* ✔ [assert-true] Component schema for outlined icon-button is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark material outlined icon-button has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark material outlined icon-button has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for outlined icon-button is missing name metadata. */ +/* ✔ [assert-true] Component schema for contained icon-button is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark material contained icon-button has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark material contained icon-button has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for contained icon-button is missing name metadata. */ +/* ✔ [assert-true] Component schema for input-group is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark material input-group has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark material input-group has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for input-group is missing name metadata. */ +/* ✔ [assert-true] Component schema for label is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark material label has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark material label has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for label is missing name metadata. */ +/* ✔ [assert-true] Component schema for list is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark material list has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark material list has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for list is missing name metadata. */ +/* ✔ [assert-true] Component schema for navbar is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark material navbar has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark material navbar has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for navbar is missing name metadata. */ +/* ✔ [assert-true] Component schema for nav-drawer is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark material nav-drawer has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark material nav-drawer has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for nav-drawer is missing name metadata. */ +/* ✔ [assert-true] Component schema for overlay is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark material overlay has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark material overlay has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for overlay is missing name metadata. */ +/* ✔ [assert-true] Component schema for paginator is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark material paginator has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark material paginator has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for paginator is missing name metadata. */ +/* ✔ [assert-true] Component schema for pivot-data-selector is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark material pivot-data-selector has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark material pivot-data-selector has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for pivot-data-selector is missing name metadata. */ +/* ✔ [assert-true] Component schema for linear-bar is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark material linear-bar has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark material linear-bar has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for linear-bar is missing name metadata. */ +/* ✔ [assert-true] Component schema for circular-bar is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark material circular-bar has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark material circular-bar has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for circular-bar is missing name metadata. */ +/* ✔ [assert-true] Component schema for qr-code is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark material qr-code has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark material qr-code has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for qr-code is missing name metadata. */ +/* ✔ [assert-true] Component schema for query-builder is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark material query-builder has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark material query-builder has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for query-builder is missing name metadata. */ +/* ✔ [assert-true] Component schema for radio is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark material radio has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark material radio has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for radio is missing name metadata. */ +/* ✔ [assert-true] Component schema for rating is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark material rating has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark material rating has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for rating is missing name metadata. */ +/* ✔ [assert-true] Component schema for resize-indicator is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark material resize-indicator has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark material resize-indicator has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for resize-indicator is missing name metadata. */ +/* ✔ [assert-true] Component schema for ripple is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark material ripple has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark material ripple has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for ripple is missing name metadata. */ +/* ✔ [assert-true] Component schema for scrollbar is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark material scrollbar has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark material scrollbar has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for scrollbar is missing name metadata. */ +/* ✔ [assert-true] Component schema for select is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark material select has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark material select has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for select is missing name metadata. */ +/* ✔ [assert-true] Component schema for slider is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark material slider has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark material slider has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for slider is missing name metadata. */ +/* ✔ [assert-true] Component schema for snackbar is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark material snackbar has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark material snackbar has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for snackbar is missing name metadata. */ +/* ✔ [assert-true] Component schema for splitter is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark material splitter has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark material splitter has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for splitter is missing name metadata. */ +/* ✔ [assert-true] Component schema for stepper is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark material stepper has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark material stepper has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for stepper is missing name metadata. */ +/* ✔ [assert-true] Component schema for switch is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark material switch has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark material switch has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for switch is missing name metadata. */ +/* ✔ [assert-true] Component schema for tabs is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark material tabs has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark material tabs has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for tabs is missing name metadata. */ +/* ✔ [assert-true] Component schema for tile-manager is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark material tile-manager has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark material tile-manager has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for tile-manager is missing name metadata. */ +/* ✔ [assert-true] Component schema for time-picker is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark material time-picker has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark material time-picker has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for time-picker is missing name metadata. */ +/* ✔ [assert-true] Component schema for toast is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark material toast has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark material toast has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for toast is missing name metadata. */ +/* ✔ [assert-true] Component schema for tooltip is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark material tooltip has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark material tooltip has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for tooltip is missing name metadata. */ +/* ✔ [assert-true] Component schema for tree is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark material tree has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark material tree has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for tree is missing name metadata. */ +/* ✔ [assert-true] Component schema for validator is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark material validator has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark material validator has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for validator is missing name metadata. */ +/* ✔ [assert-true] Component schema for watermark is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark material watermark has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark material watermark has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for watermark is missing name metadata. */ +/* ✔ [assert-true] Component schema for file-input is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark material file-input has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark material file-input has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for file-input is missing name metadata. */ +/* ✔ [assert-true] Component schema for category-chart is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap category-chart has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap category-chart has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for category-chart is missing name metadata. */ +/* ✔ [assert-true] Component schema for data-chart is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap data-chart has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap data-chart has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for data-chart is missing name metadata. */ +/* ✔ [assert-true] Component schema for doughnut-chart is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap doughnut-chart has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap doughnut-chart has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for doughnut-chart is missing name metadata. */ +/* ✔ [assert-true] Component schema for financial-chart is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap financial-chart has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap financial-chart has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for financial-chart is missing name metadata. */ +/* ✔ [assert-true] Component schema for funnel-chart is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap funnel-chart has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap funnel-chart has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for funnel-chart is missing name metadata. */ +/* ✔ [assert-true] Component schema for linear-gauge is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap linear-gauge has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap linear-gauge has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for linear-gauge is missing name metadata. */ +/* ✔ [assert-true] Component schema for radial-gauge is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap radial-gauge has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap radial-gauge has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for radial-gauge is missing name metadata. */ +/* ✔ [assert-true] Component schema for geo-map is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap geo-map has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap geo-map has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for geo-map is missing name metadata. */ +/* ✔ [assert-true] Component schema for bullet-graph is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap bullet-graph has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap bullet-graph has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for bullet-graph is missing name metadata. */ +/* ✔ [assert-true] Component schema for pie-chart is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap pie-chart has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap pie-chart has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for pie-chart is missing name metadata. */ +/* ✔ [assert-true] Component schema for shape-chart is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap shape-chart has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap shape-chart has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for shape-chart is missing name metadata. */ +/* ✔ [assert-true] Component schema for sparkline is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap sparkline has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap sparkline has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for sparkline is missing name metadata. */ +/* ✔ [assert-true] Component schema for action-strip is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap action-strip has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap action-strip has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for action-strip is missing name metadata. */ +/* ✔ [assert-true] Component schema for avatar is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap avatar has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap avatar has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for avatar is missing name metadata. */ +/* ✔ [assert-true] Component schema for badge is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap badge has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap badge has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for badge is missing name metadata. */ +/* ✔ [assert-true] Component schema for banner is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap banner has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap banner has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for banner is missing name metadata. */ +/* ✔ [assert-true] Component schema for bottom-nav is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap bottom-nav has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap bottom-nav has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for bottom-nav is missing name metadata. */ +/* ✔ [assert-true] Component schema for flat button is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap flat button has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap flat button has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for flat button is missing name metadata. */ +/* ✔ [assert-true] Component schema for outlined button is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap outlined button has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap outlined button has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for outlined button is missing name metadata. */ +/* ✔ [assert-true] Component schema for contained button is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap contained button has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap contained button has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for contained button is missing name metadata. */ +/* ✔ [assert-true] Component schema for fab button is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap fab button has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap fab button has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for fab button is missing name metadata. */ +/* ✔ [assert-true] Component schema for button-group is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap button-group has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap button-group has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for button-group is missing name metadata. */ +/* ✔ [assert-true] Component schema for calendar is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap calendar has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap calendar has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for calendar is missing name metadata. */ +/* ✔ [assert-true] Component schema for card is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap card has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap card has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for card is missing name metadata. */ +/* ✔ [assert-true] Component schema for carousel is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap carousel has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap carousel has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for carousel is missing name metadata. */ +/* ✔ [assert-true] Component schema for chat is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap chat has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap chat has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for chat is missing name metadata. */ +/* ✔ [assert-true] Component schema for checkbox is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap checkbox has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap checkbox has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for checkbox is missing name metadata. */ +/* ✔ [assert-true] Component schema for chip is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap chip has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap chip has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for chip is missing name metadata. */ +/* ✔ [assert-true] Component schema for color-picker is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap color-picker has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap color-picker has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for color-picker is missing name metadata. */ +/* ✔ [assert-true] Component schema for column-actions is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap column-actions has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap column-actions has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for column-actions is missing name metadata. */ +/* ✔ [assert-true] Component schema for combo is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap combo has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap combo has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for combo is missing name metadata. */ +/* ✔ [assert-true] Component schema for date-picker is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap date-picker has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap date-picker has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for date-picker is missing name metadata. */ +/* ✔ [assert-true] Component schema for date-range is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap date-range has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap date-range has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for date-range is missing name metadata. */ +/* ✔ [assert-true] Component schema for dialog is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap dialog has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap dialog has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for dialog is missing name metadata. */ +/* ✔ [assert-true] Component schema for divider is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap divider has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap divider has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for divider is missing name metadata. */ +/* ✔ [assert-true] Component schema for dockmanager is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap dockmanager has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap dockmanager has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for dockmanager is missing name metadata. */ +/* ✔ [assert-true] Component schema for drop-down is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap drop-down has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap drop-down has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for drop-down is missing name metadata. */ +/* ✔ [assert-true] Component schema for expansion-panel is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap expansion-panel has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap expansion-panel has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for expansion-panel is missing name metadata. */ +/* ✔ [assert-true] Component schema for grid is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap grid has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap grid has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for grid is missing name metadata. */ +/* ✔ [assert-true] Component schema for grid-excel-filtering is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap grid-excel-filtering has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap grid-excel-filtering has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for grid-excel-filtering is missing name metadata. */ +/* ✔ [assert-true] Component schema for grid-filtering is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap grid-filtering has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap grid-filtering has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for grid-filtering is missing name metadata. */ +/* ✔ [assert-true] Component schema for grid-summary is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap grid-summary has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap grid-summary has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for grid-summary is missing name metadata. */ +/* ✔ [assert-true] Component schema for grid-toolbar is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap grid-toolbar has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap grid-toolbar has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for grid-toolbar is missing name metadata. */ +/* ✔ [assert-true] Component schema for highlight is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap highlight has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap highlight has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for highlight is missing name metadata. */ +/* ✔ [assert-true] Component schema for icon is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap icon has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap icon has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for icon is missing name metadata. */ +/* ✔ [assert-true] Component schema for flat icon-button is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap flat icon-button has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap flat icon-button has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for flat icon-button is missing name metadata. */ +/* ✔ [assert-true] Component schema for outlined icon-button is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap outlined icon-button has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap outlined icon-button has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for outlined icon-button is missing name metadata. */ +/* ✔ [assert-true] Component schema for contained icon-button is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap contained icon-button has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap contained icon-button has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for contained icon-button is missing name metadata. */ +/* ✔ [assert-true] Component schema for input-group is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap input-group has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap input-group has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for input-group is missing name metadata. */ +/* ✔ [assert-true] Component schema for label is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap label has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap label has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for label is missing name metadata. */ +/* ✔ [assert-true] Component schema for list is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap list has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap list has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for list is missing name metadata. */ +/* ✔ [assert-true] Component schema for navbar is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap navbar has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap navbar has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for navbar is missing name metadata. */ +/* ✔ [assert-true] Component schema for nav-drawer is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap nav-drawer has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap nav-drawer has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for nav-drawer is missing name metadata. */ +/* ✔ [assert-true] Component schema for overlay is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap overlay has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap overlay has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for overlay is missing name metadata. */ +/* ✔ [assert-true] Component schema for paginator is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap paginator has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap paginator has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for paginator is missing name metadata. */ +/* ✔ [assert-true] Component schema for pivot-data-selector is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap pivot-data-selector has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap pivot-data-selector has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for pivot-data-selector is missing name metadata. */ +/* ✔ [assert-true] Component schema for linear-bar is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap linear-bar has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap linear-bar has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for linear-bar is missing name metadata. */ +/* ✔ [assert-true] Component schema for circular-bar is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap circular-bar has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap circular-bar has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for circular-bar is missing name metadata. */ +/* ✔ [assert-true] Component schema for qr-code is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap qr-code has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap qr-code has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for qr-code is missing name metadata. */ +/* ✔ [assert-true] Component schema for query-builder is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap query-builder has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap query-builder has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for query-builder is missing name metadata. */ +/* ✔ [assert-true] Component schema for radio is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap radio has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap radio has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for radio is missing name metadata. */ +/* ✔ [assert-true] Component schema for rating is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap rating has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap rating has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for rating is missing name metadata. */ +/* ✔ [assert-true] Component schema for resize-indicator is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap resize-indicator has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap resize-indicator has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for resize-indicator is missing name metadata. */ +/* ✔ [assert-true] Component schema for ripple is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap ripple has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap ripple has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for ripple is missing name metadata. */ +/* ✔ [assert-true] Component schema for scrollbar is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap scrollbar has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap scrollbar has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for scrollbar is missing name metadata. */ +/* ✔ [assert-true] Component schema for select is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap select has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap select has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for select is missing name metadata. */ +/* ✔ [assert-true] Component schema for slider is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap slider has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap slider has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for slider is missing name metadata. */ +/* ✔ [assert-true] Component schema for snackbar is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap snackbar has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap snackbar has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for snackbar is missing name metadata. */ +/* ✔ [assert-true] Component schema for splitter is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap splitter has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap splitter has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for splitter is missing name metadata. */ +/* ✔ [assert-true] Component schema for stepper is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap stepper has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap stepper has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for stepper is missing name metadata. */ +/* ✔ [assert-true] Component schema for switch is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap switch has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap switch has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for switch is missing name metadata. */ +/* ✔ [assert-true] Component schema for tabs is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap tabs has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap tabs has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for tabs is missing name metadata. */ +/* ✔ [assert-true] Component schema for tile-manager is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap tile-manager has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap tile-manager has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for tile-manager is missing name metadata. */ +/* ✔ [assert-true] Component schema for time-picker is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap time-picker has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap time-picker has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for time-picker is missing name metadata. */ +/* ✔ [assert-true] Component schema for toast is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap toast has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap toast has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for toast is missing name metadata. */ +/* ✔ [assert-true] Component schema for tooltip is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap tooltip has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap tooltip has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for tooltip is missing name metadata. */ +/* ✔ [assert-true] Component schema for tree is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap tree has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap tree has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for tree is missing name metadata. */ +/* ✔ [assert-true] Component schema for validator is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap validator has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap validator has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for validator is missing name metadata. */ +/* ✔ [assert-true] Component schema for watermark is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap watermark has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap watermark has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for watermark is missing name metadata. */ +/* ✔ [assert-true] Component schema for file-input is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap file-input has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap file-input has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for file-input is missing name metadata. */ +/* ✔ [assert-true] Component schema for category-chart is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent category-chart has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent category-chart has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for category-chart is missing name metadata. */ +/* ✔ [assert-true] Component schema for data-chart is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent data-chart has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent data-chart has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for data-chart is missing name metadata. */ +/* ✔ [assert-true] Component schema for doughnut-chart is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent doughnut-chart has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent doughnut-chart has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for doughnut-chart is missing name metadata. */ +/* ✔ [assert-true] Component schema for financial-chart is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent financial-chart has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent financial-chart has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for financial-chart is missing name metadata. */ +/* ✔ [assert-true] Component schema for funnel-chart is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent funnel-chart has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent funnel-chart has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for funnel-chart is missing name metadata. */ +/* ✔ [assert-true] Component schema for linear-gauge is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent linear-gauge has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent linear-gauge has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for linear-gauge is missing name metadata. */ +/* ✔ [assert-true] Component schema for radial-gauge is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent radial-gauge has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent radial-gauge has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for radial-gauge is missing name metadata. */ +/* ✔ [assert-true] Component schema for geo-map is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent geo-map has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent geo-map has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for geo-map is missing name metadata. */ +/* ✔ [assert-true] Component schema for bullet-graph is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent bullet-graph has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent bullet-graph has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for bullet-graph is missing name metadata. */ +/* ✔ [assert-true] Component schema for pie-chart is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent pie-chart has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent pie-chart has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for pie-chart is missing name metadata. */ +/* ✔ [assert-true] Component schema for shape-chart is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent shape-chart has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent shape-chart has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for shape-chart is missing name metadata. */ +/* ✔ [assert-true] Component schema for sparkline is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent sparkline has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent sparkline has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for sparkline is missing name metadata. */ +/* ✔ [assert-true] Component schema for action-strip is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent action-strip has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent action-strip has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for action-strip is missing name metadata. */ +/* ✔ [assert-true] Component schema for avatar is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent avatar has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent avatar has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for avatar is missing name metadata. */ +/* ✔ [assert-true] Component schema for badge is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent badge has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent badge has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for badge is missing name metadata. */ +/* ✔ [assert-true] Component schema for banner is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent banner has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent banner has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for banner is missing name metadata. */ +/* ✔ [assert-true] Component schema for bottom-nav is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent bottom-nav has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent bottom-nav has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for bottom-nav is missing name metadata. */ +/* ✔ [assert-true] Component schema for flat button is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent flat button has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent flat button has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for flat button is missing name metadata. */ +/* ✔ [assert-true] Component schema for outlined button is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent outlined button has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent outlined button has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for outlined button is missing name metadata. */ +/* ✔ [assert-true] Component schema for contained button is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent contained button has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent contained button has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for contained button is missing name metadata. */ +/* ✔ [assert-true] Component schema for fab button is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent fab button has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent fab button has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for fab button is missing name metadata. */ +/* ✔ [assert-true] Component schema for button-group is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent button-group has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent button-group has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for button-group is missing name metadata. */ +/* ✔ [assert-true] Component schema for calendar is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent calendar has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent calendar has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for calendar is missing name metadata. */ +/* ✔ [assert-true] Component schema for card is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent card has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent card has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for card is missing name metadata. */ +/* ✔ [assert-true] Component schema for carousel is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent carousel has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent carousel has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for carousel is missing name metadata. */ +/* ✔ [assert-true] Component schema for chat is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent chat has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent chat has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for chat is missing name metadata. */ +/* ✔ [assert-true] Component schema for checkbox is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent checkbox has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent checkbox has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for checkbox is missing name metadata. */ +/* ✔ [assert-true] Component schema for chip is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent chip has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent chip has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for chip is missing name metadata. */ +/* ✔ [assert-true] Component schema for color-picker is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent color-picker has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent color-picker has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for color-picker is missing name metadata. */ +/* ✔ [assert-true] Component schema for column-actions is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent column-actions has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent column-actions has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for column-actions is missing name metadata. */ +/* ✔ [assert-true] Component schema for combo is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent combo has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent combo has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for combo is missing name metadata. */ +/* ✔ [assert-true] Component schema for date-picker is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent date-picker has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent date-picker has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for date-picker is missing name metadata. */ +/* ✔ [assert-true] Component schema for date-range is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent date-range has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent date-range has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for date-range is missing name metadata. */ +/* ✔ [assert-true] Component schema for dialog is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent dialog has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent dialog has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for dialog is missing name metadata. */ +/* ✔ [assert-true] Component schema for divider is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent divider has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent divider has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for divider is missing name metadata. */ +/* ✔ [assert-true] Component schema for dockmanager is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent dockmanager has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent dockmanager has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for dockmanager is missing name metadata. */ +/* ✔ [assert-true] Component schema for drop-down is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent drop-down has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent drop-down has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for drop-down is missing name metadata. */ +/* ✔ [assert-true] Component schema for expansion-panel is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent expansion-panel has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent expansion-panel has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for expansion-panel is missing name metadata. */ +/* ✔ [assert-true] Component schema for grid is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent grid has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent grid has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for grid is missing name metadata. */ +/* ✔ [assert-true] Component schema for grid-excel-filtering is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent grid-excel-filtering has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent grid-excel-filtering has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for grid-excel-filtering is missing name metadata. */ +/* ✔ [assert-true] Component schema for grid-filtering is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent grid-filtering has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent grid-filtering has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for grid-filtering is missing name metadata. */ +/* ✔ [assert-true] Component schema for grid-summary is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent grid-summary has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent grid-summary has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for grid-summary is missing name metadata. */ +/* ✔ [assert-true] Component schema for grid-toolbar is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent grid-toolbar has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent grid-toolbar has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for grid-toolbar is missing name metadata. */ +/* ✔ [assert-true] Component schema for highlight is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent highlight has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent highlight has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for highlight is missing name metadata. */ +/* ✔ [assert-true] Component schema for icon is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent icon has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent icon has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for icon is missing name metadata. */ +/* ✔ [assert-true] Component schema for flat icon-button is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent flat icon-button has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent flat icon-button has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for flat icon-button is missing name metadata. */ +/* ✔ [assert-true] Component schema for outlined icon-button is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent outlined icon-button has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent outlined icon-button has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for outlined icon-button is missing name metadata. */ +/* ✔ [assert-true] Component schema for contained icon-button is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent contained icon-button has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent contained icon-button has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for contained icon-button is missing name metadata. */ +/* ✔ [assert-true] Component schema for input-group is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent input-group has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent input-group has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for input-group is missing name metadata. */ +/* ✔ [assert-true] Component schema for label is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent label has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent label has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for label is missing name metadata. */ +/* ✔ [assert-true] Component schema for list is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent list has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent list has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for list is missing name metadata. */ +/* ✔ [assert-true] Component schema for navbar is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent navbar has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent navbar has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for navbar is missing name metadata. */ +/* ✔ [assert-true] Component schema for nav-drawer is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent nav-drawer has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent nav-drawer has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for nav-drawer is missing name metadata. */ +/* ✔ [assert-true] Component schema for overlay is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent overlay has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent overlay has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for overlay is missing name metadata. */ +/* ✔ [assert-true] Component schema for paginator is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent paginator has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent paginator has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for paginator is missing name metadata. */ +/* ✔ [assert-true] Component schema for pivot-data-selector is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent pivot-data-selector has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent pivot-data-selector has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for pivot-data-selector is missing name metadata. */ +/* ✔ [assert-true] Component schema for linear-bar is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent linear-bar has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent linear-bar has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for linear-bar is missing name metadata. */ +/* ✔ [assert-true] Component schema for circular-bar is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent circular-bar has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent circular-bar has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for circular-bar is missing name metadata. */ +/* ✔ [assert-true] Component schema for qr-code is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent qr-code has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent qr-code has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for qr-code is missing name metadata. */ +/* ✔ [assert-true] Component schema for query-builder is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent query-builder has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent query-builder has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for query-builder is missing name metadata. */ +/* ✔ [assert-true] Component schema for radio is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent radio has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent radio has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for radio is missing name metadata. */ +/* ✔ [assert-true] Component schema for rating is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent rating has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent rating has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for rating is missing name metadata. */ +/* ✔ [assert-true] Component schema for resize-indicator is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent resize-indicator has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent resize-indicator has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for resize-indicator is missing name metadata. */ +/* ✔ [assert-true] Component schema for ripple is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent ripple has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent ripple has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for ripple is missing name metadata. */ +/* ✔ [assert-true] Component schema for scrollbar is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent scrollbar has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent scrollbar has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for scrollbar is missing name metadata. */ +/* ✔ [assert-true] Component schema for select is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent select has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent select has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for select is missing name metadata. */ +/* ✔ [assert-true] Component schema for slider is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent slider has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent slider has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for slider is missing name metadata. */ +/* ✔ [assert-true] Component schema for snackbar is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent snackbar has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent snackbar has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for snackbar is missing name metadata. */ +/* ✔ [assert-true] Component schema for splitter is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent splitter has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent splitter has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for splitter is missing name metadata. */ +/* ✔ [assert-true] Component schema for stepper is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent stepper has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent stepper has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for stepper is missing name metadata. */ +/* ✔ [assert-true] Component schema for switch is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent switch has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent switch has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for switch is missing name metadata. */ +/* ✔ [assert-true] Component schema for tabs is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent tabs has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent tabs has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for tabs is missing name metadata. */ +/* ✔ [assert-true] Component schema for tile-manager is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent tile-manager has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent tile-manager has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for tile-manager is missing name metadata. */ +/* ✔ [assert-true] Component schema for time-picker is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent time-picker has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent time-picker has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for time-picker is missing name metadata. */ +/* ✔ [assert-true] Component schema for toast is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent toast has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent toast has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for toast is missing name metadata. */ +/* ✔ [assert-true] Component schema for tooltip is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent tooltip has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent tooltip has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for tooltip is missing name metadata. */ +/* ✔ [assert-true] Component schema for tree is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent tree has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent tree has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for tree is missing name metadata. */ +/* ✔ [assert-true] Component schema for validator is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent validator has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent validator has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for validator is missing name metadata. */ +/* ✔ [assert-true] Component schema for watermark is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent watermark has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent watermark has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for watermark is missing name metadata. */ +/* ✔ [assert-true] Component schema for file-input is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent file-input has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent file-input has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for file-input is missing name metadata. */ +/* ✔ [assert-true] Component schema for category-chart is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo category-chart has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo category-chart has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for category-chart is missing name metadata. */ +/* ✔ [assert-true] Component schema for data-chart is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo data-chart has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo data-chart has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for data-chart is missing name metadata. */ +/* ✔ [assert-true] Component schema for doughnut-chart is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo doughnut-chart has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo doughnut-chart has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for doughnut-chart is missing name metadata. */ +/* ✔ [assert-true] Component schema for financial-chart is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo financial-chart has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo financial-chart has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for financial-chart is missing name metadata. */ +/* ✔ [assert-true] Component schema for funnel-chart is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo funnel-chart has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo funnel-chart has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for funnel-chart is missing name metadata. */ +/* ✔ [assert-true] Component schema for linear-gauge is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo linear-gauge has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo linear-gauge has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for linear-gauge is missing name metadata. */ +/* ✔ [assert-true] Component schema for radial-gauge is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo radial-gauge has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo radial-gauge has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for radial-gauge is missing name metadata. */ +/* ✔ [assert-true] Component schema for geo-map is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo geo-map has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo geo-map has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for geo-map is missing name metadata. */ +/* ✔ [assert-true] Component schema for bullet-graph is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo bullet-graph has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo bullet-graph has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for bullet-graph is missing name metadata. */ +/* ✔ [assert-true] Component schema for pie-chart is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo pie-chart has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo pie-chart has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for pie-chart is missing name metadata. */ +/* ✔ [assert-true] Component schema for shape-chart is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo shape-chart has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo shape-chart has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for shape-chart is missing name metadata. */ +/* ✔ [assert-true] Component schema for sparkline is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo sparkline has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo sparkline has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for sparkline is missing name metadata. */ +/* ✔ [assert-true] Component schema for action-strip is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo action-strip has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo action-strip has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for action-strip is missing name metadata. */ +/* ✔ [assert-true] Component schema for avatar is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo avatar has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo avatar has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for avatar is missing name metadata. */ +/* ✔ [assert-true] Component schema for badge is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo badge has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo badge has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for badge is missing name metadata. */ +/* ✔ [assert-true] Component schema for banner is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo banner has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo banner has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for banner is missing name metadata. */ +/* ✔ [assert-true] Component schema for bottom-nav is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo bottom-nav has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo bottom-nav has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for bottom-nav is missing name metadata. */ +/* ✔ [assert-true] Component schema for flat button is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo flat button has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo flat button has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for flat button is missing name metadata. */ +/* ✔ [assert-true] Component schema for outlined button is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo outlined button has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo outlined button has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for outlined button is missing name metadata. */ +/* ✔ [assert-true] Component schema for contained button is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo contained button has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo contained button has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for contained button is missing name metadata. */ +/* ✔ [assert-true] Component schema for fab button is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo fab button has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo fab button has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for fab button is missing name metadata. */ +/* ✔ [assert-true] Component schema for button-group is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo button-group has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo button-group has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for button-group is missing name metadata. */ +/* ✔ [assert-true] Component schema for calendar is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo calendar has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo calendar has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for calendar is missing name metadata. */ +/* ✔ [assert-true] Component schema for card is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo card has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo card has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for card is missing name metadata. */ +/* ✔ [assert-true] Component schema for carousel is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo carousel has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo carousel has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for carousel is missing name metadata. */ +/* ✔ [assert-true] Component schema for chat is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo chat has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo chat has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for chat is missing name metadata. */ +/* ✔ [assert-true] Component schema for checkbox is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo checkbox has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo checkbox has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for checkbox is missing name metadata. */ +/* ✔ [assert-true] Component schema for chip is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo chip has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo chip has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for chip is missing name metadata. */ +/* ✔ [assert-true] Component schema for color-picker is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo color-picker has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo color-picker has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for color-picker is missing name metadata. */ +/* ✔ [assert-true] Component schema for column-actions is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo column-actions has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo column-actions has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for column-actions is missing name metadata. */ +/* ✔ [assert-true] Component schema for combo is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo combo has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo combo has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for combo is missing name metadata. */ +/* ✔ [assert-true] Component schema for date-picker is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo date-picker has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo date-picker has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for date-picker is missing name metadata. */ +/* ✔ [assert-true] Component schema for date-range is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo date-range has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo date-range has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for date-range is missing name metadata. */ +/* ✔ [assert-true] Component schema for dialog is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo dialog has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo dialog has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for dialog is missing name metadata. */ +/* ✔ [assert-true] Component schema for divider is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo divider has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo divider has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for divider is missing name metadata. */ +/* ✔ [assert-true] Component schema for dockmanager is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo dockmanager has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo dockmanager has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for dockmanager is missing name metadata. */ +/* ✔ [assert-true] Component schema for drop-down is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo drop-down has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo drop-down has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for drop-down is missing name metadata. */ +/* ✔ [assert-true] Component schema for expansion-panel is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo expansion-panel has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo expansion-panel has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for expansion-panel is missing name metadata. */ +/* ✔ [assert-true] Component schema for grid is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo grid has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo grid has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for grid is missing name metadata. */ +/* ✔ [assert-true] Component schema for grid-excel-filtering is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo grid-excel-filtering has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo grid-excel-filtering has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for grid-excel-filtering is missing name metadata. */ +/* ✔ [assert-true] Component schema for grid-filtering is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo grid-filtering has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo grid-filtering has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for grid-filtering is missing name metadata. */ +/* ✔ [assert-true] Component schema for grid-summary is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo grid-summary has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo grid-summary has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for grid-summary is missing name metadata. */ +/* ✔ [assert-true] Component schema for grid-toolbar is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo grid-toolbar has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo grid-toolbar has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for grid-toolbar is missing name metadata. */ +/* ✔ [assert-true] Component schema for highlight is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo highlight has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo highlight has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for highlight is missing name metadata. */ +/* ✔ [assert-true] Component schema for icon is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo icon has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo icon has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for icon is missing name metadata. */ +/* ✔ [assert-true] Component schema for flat icon-button is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo flat icon-button has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo flat icon-button has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for flat icon-button is missing name metadata. */ +/* ✔ [assert-true] Component schema for outlined icon-button is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo outlined icon-button has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo outlined icon-button has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for outlined icon-button is missing name metadata. */ +/* ✔ [assert-true] Component schema for contained icon-button is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo contained icon-button has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo contained icon-button has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for contained icon-button is missing name metadata. */ +/* ✔ [assert-true] Component schema for input-group is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo input-group has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo input-group has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for input-group is missing name metadata. */ +/* ✔ [assert-true] Component schema for label is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo label has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo label has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for label is missing name metadata. */ +/* ✔ [assert-true] Component schema for list is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo list has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo list has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for list is missing name metadata. */ +/* ✔ [assert-true] Component schema for navbar is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo navbar has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo navbar has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for navbar is missing name metadata. */ +/* ✔ [assert-true] Component schema for nav-drawer is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo nav-drawer has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo nav-drawer has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for nav-drawer is missing name metadata. */ +/* ✔ [assert-true] Component schema for overlay is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo overlay has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo overlay has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for overlay is missing name metadata. */ +/* ✔ [assert-true] Component schema for paginator is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo paginator has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo paginator has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for paginator is missing name metadata. */ +/* ✔ [assert-true] Component schema for pivot-data-selector is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo pivot-data-selector has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo pivot-data-selector has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for pivot-data-selector is missing name metadata. */ +/* ✔ [assert-true] Component schema for linear-bar is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo linear-bar has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo linear-bar has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for linear-bar is missing name metadata. */ +/* ✔ [assert-true] Component schema for circular-bar is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo circular-bar has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo circular-bar has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for circular-bar is missing name metadata. */ +/* ✔ [assert-true] Component schema for qr-code is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo qr-code has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo qr-code has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for qr-code is missing name metadata. */ +/* ✔ [assert-true] Component schema for query-builder is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo query-builder has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo query-builder has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for query-builder is missing name metadata. */ +/* ✔ [assert-true] Component schema for radio is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo radio has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo radio has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for radio is missing name metadata. */ +/* ✔ [assert-true] Component schema for rating is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo rating has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo rating has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for rating is missing name metadata. */ +/* ✔ [assert-true] Component schema for resize-indicator is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo resize-indicator has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo resize-indicator has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for resize-indicator is missing name metadata. */ +/* ✔ [assert-true] Component schema for ripple is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo ripple has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo ripple has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for ripple is missing name metadata. */ +/* ✔ [assert-true] Component schema for scrollbar is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo scrollbar has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo scrollbar has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for scrollbar is missing name metadata. */ +/* ✔ [assert-true] Component schema for select is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo select has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo select has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for select is missing name metadata. */ +/* ✔ [assert-true] Component schema for slider is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo slider has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo slider has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for slider is missing name metadata. */ +/* ✔ [assert-true] Component schema for snackbar is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo snackbar has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo snackbar has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for snackbar is missing name metadata. */ +/* ✔ [assert-true] Component schema for splitter is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo splitter has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo splitter has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for splitter is missing name metadata. */ +/* ✔ [assert-true] Component schema for stepper is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo stepper has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo stepper has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for stepper is missing name metadata. */ +/* ✔ [assert-true] Component schema for switch is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo switch has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo switch has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for switch is missing name metadata. */ +/* ✔ [assert-true] Component schema for tabs is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo tabs has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo tabs has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for tabs is missing name metadata. */ +/* ✔ [assert-true] Component schema for tile-manager is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo tile-manager has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo tile-manager has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for tile-manager is missing name metadata. */ +/* ✔ [assert-true] Component schema for time-picker is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo time-picker has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo time-picker has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for time-picker is missing name metadata. */ +/* ✔ [assert-true] Component schema for toast is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo toast has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo toast has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for toast is missing name metadata. */ +/* ✔ [assert-true] Component schema for tooltip is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo tooltip has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo tooltip has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for tooltip is missing name metadata. */ +/* ✔ [assert-true] Component schema for tree is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo tree has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo tree has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for tree is missing name metadata. */ +/* ✔ [assert-true] Component schema for validator is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo validator has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo validator has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for validator is missing name metadata. */ +/* ✔ [assert-true] Component schema for watermark is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo watermark has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo watermark has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for watermark is missing name metadata. */ +/* ✔ [assert-true] Component schema for file-input is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo file-input has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo file-input has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for file-input is missing name metadata. */ +/* */ +/* Test: should resolve the border-radius function from schema definitions */ +/* ✔ [assert-equal] should resolve the border-radius function from schema definitions */ +/* */ +/* Test: should retrieve a reference to the CSS variable for a given theme */ +/* ✔ [assert-equal] should retrieve a reference to the CSS variable for a given theme */ +/* */ +/* Test: should convert component theme props into CSS variables */ +/* ASSERT: */ +/* OUTPUT */ +.test-output { + --background: var(--igx-test-component-background, var(--ig-test-component-background, var(--ig-primary-400))); + --hover-background: var(--igx-test-component-hover-background, var(--ig-test-component-hover-background, hsl(from var(--ig-secondary-700) h s l/0.26))); + --foreground: var(--igx-test-component-foreground, var(--ig-test-component-foreground, var(--ig-primary-400-contrast))); + --hover-foreground: var(--igx-test-component-hover-foreground, var(--ig-test-component-hover-foreground, var(--ig-secondary-700-contrast))); + --border-style: var(--igx-test-component-border-style, var(--ig-test-component-border-style, solid)); + --border-radius: var(--igx-test-component-border-radius, var(--ig-test-component-border-radius, 0.125rem)); + --brushes: var(--igx-test-component-brushes, var(--ig-test-component-brushes, var(--chart-brushes))); + --resting-elevation: var(--igx-test-component-resting-elevation, var(--ig-test-component-resting-elevation, var(--ig-elevation-2))); + --ig-theme: material; + --ig-theme-variant: light; +} + +/* END_OUTPUT */ +/* EXPECTED */ +.test-output { + --background: var(--igx-test-component-background, var(--ig-test-component-background, var(--ig-primary-400))); + --hover-background: var(--igx-test-component-hover-background, var(--ig-test-component-hover-background, hsl(from var(--ig-secondary-700) h s l/0.26))); + --foreground: var(--igx-test-component-foreground, var(--ig-test-component-foreground, var(--ig-primary-400-contrast))); + --hover-foreground: var(--igx-test-component-hover-foreground, var(--ig-test-component-hover-foreground, var(--ig-secondary-700-contrast))); + --border-style: var(--igx-test-component-border-style, var(--ig-test-component-border-style, solid)); + --border-radius: var(--igx-test-component-border-radius, var(--ig-test-component-border-radius, 0.125rem)); + --brushes: var(--igx-test-component-brushes, var(--ig-test-component-brushes, var(--chart-brushes))); + --resting-elevation: var(--igx-test-component-resting-elevation, var(--ig-test-component-resting-elevation, var(--ig-elevation-2))); + --ig-theme: material; + --ig-theme-variant: light; +} + +/* END_EXPECTED */ +/* END_ASSERT */ +/* */ +/* Test: should prepend the prefix to CSS variable names when the theme map includes a prefix */ +/* ASSERT: */ +/* OUTPUT */ +.test-output { + --igc-background: var(--igx-test-component-background, var(--ig-test-component-background, var(--ig-primary-400))); + --igc-hover-background: var(--igx-test-component-hover-background, var(--ig-test-component-hover-background, hsl(from var(--ig-secondary-700) h s l/0.26))); + --igc-foreground: var(--igx-test-component-foreground, var(--ig-test-component-foreground, var(--ig-primary-400-contrast))); + --igc-hover-foreground: var(--igx-test-component-hover-foreground, var(--ig-test-component-hover-foreground, var(--ig-secondary-700-contrast))); + --igc-border-style: var(--igx-test-component-border-style, var(--ig-test-component-border-style, solid)); + --igc-border-radius: var(--igx-test-component-border-radius, var(--ig-test-component-border-radius, 0.125rem)); + --igc-brushes: var(--igx-test-component-brushes, var(--ig-test-component-brushes, var(--chart-brushes))); + --igc-resting-elevation: var(--igx-test-component-resting-elevation, var(--ig-test-component-resting-elevation, var(--ig-elevation-2))); + --ig-theme: material; + --ig-theme-variant: light; +} + +/* END_OUTPUT */ +/* EXPECTED */ +.test-output { + --igc-background: var(--igx-test-component-background, var(--ig-test-component-background, var(--ig-primary-400))); + --igc-hover-background: var(--igx-test-component-hover-background, var(--ig-test-component-hover-background, hsl(from var(--ig-secondary-700) h s l/0.26))); + --igc-foreground: var(--igx-test-component-foreground, var(--ig-test-component-foreground, var(--ig-primary-400-contrast))); + --igc-hover-foreground: var(--igx-test-component-hover-foreground, var(--ig-test-component-hover-foreground, var(--ig-secondary-700-contrast))); + --igc-border-style: var(--igx-test-component-border-style, var(--ig-test-component-border-style, solid)); + --igc-border-radius: var(--igx-test-component-border-radius, var(--ig-test-component-border-radius, 0.125rem)); + --igc-brushes: var(--igx-test-component-brushes, var(--ig-test-component-brushes, var(--chart-brushes))); + --igc-resting-elevation: var(--igx-test-component-resting-elevation, var(--ig-test-component-resting-elevation, var(--ig-elevation-2))); + --ig-theme: material; + --ig-theme-variant: light; +} + +/* END_EXPECTED */ +/* END_ASSERT */ +/* */ +/* Test: should not prepend a prefix when the theme map has no prefix property */ +/* ✔ [assert-false] Digested schema should not have a prefix key */ +/* ASSERT: */ +/* OUTPUT */ +.test-output { + --background: var(--igx-test-component-background, var(--ig-test-component-background, var(--ig-primary-400))); + --hover-background: var(--igx-test-component-hover-background, var(--ig-test-component-hover-background, hsl(from var(--ig-secondary-700) h s l/0.26))); + --foreground: var(--igx-test-component-foreground, var(--ig-test-component-foreground, var(--ig-primary-400-contrast))); + --hover-foreground: var(--igx-test-component-hover-foreground, var(--ig-test-component-hover-foreground, var(--ig-secondary-700-contrast))); + --border-style: var(--igx-test-component-border-style, var(--ig-test-component-border-style, solid)); + --border-radius: var(--igx-test-component-border-radius, var(--ig-test-component-border-radius, 0.125rem)); + --brushes: var(--igx-test-component-brushes, var(--ig-test-component-brushes, var(--chart-brushes))); + --resting-elevation: var(--igx-test-component-resting-elevation, var(--ig-test-component-resting-elevation, var(--ig-elevation-2))); + --ig-theme: material; + --ig-theme-variant: light; +} + +/* END_OUTPUT */ +/* EXPECTED */ +.test-output { + --background: var(--igx-test-component-background, var(--ig-test-component-background, var(--ig-primary-400))); + --hover-background: var(--igx-test-component-hover-background, var(--ig-test-component-hover-background, hsl(from var(--ig-secondary-700) h s l/0.26))); + --foreground: var(--igx-test-component-foreground, var(--ig-test-component-foreground, var(--ig-primary-400-contrast))); + --hover-foreground: var(--igx-test-component-hover-foreground, var(--ig-test-component-hover-foreground, var(--ig-secondary-700-contrast))); + --border-style: var(--igx-test-component-border-style, var(--ig-test-component-border-style, solid)); + --border-radius: var(--igx-test-component-border-radius, var(--ig-test-component-border-radius, 0.125rem)); + --brushes: var(--igx-test-component-brushes, var(--ig-test-component-brushes, var(--chart-brushes))); + --resting-elevation: var(--igx-test-component-resting-elevation, var(--ig-test-component-resting-elevation, var(--ig-elevation-2))); + --ig-theme: material; + --ig-theme-variant: light; +} + +/* END_EXPECTED */ +/* END_ASSERT */ +/* */ +/* Test: should scope prefixed CSS variables correctly via the tokens mixin */ +/* ASSERT: */ +/* OUTPUT */ +igc-dockmanager { + --igc-background: var(--igx-test-component-background, var(--ig-test-component-background, var(--ig-primary-400))); + --igc-hover-background: var(--igx-test-component-hover-background, var(--ig-test-component-hover-background, hsl(from var(--ig-secondary-700) h s l/0.26))); + --igc-foreground: var(--igx-test-component-foreground, var(--ig-test-component-foreground, var(--ig-primary-400-contrast))); + --igc-hover-foreground: var(--igx-test-component-hover-foreground, var(--ig-test-component-hover-foreground, var(--ig-secondary-700-contrast))); + --igc-border-style: var(--igx-test-component-border-style, var(--ig-test-component-border-style, solid)); + --igc-border-radius: var(--igx-test-component-border-radius, var(--ig-test-component-border-radius, 0.125rem)); + --igc-brushes: var(--igx-test-component-brushes, var(--ig-test-component-brushes, var(--chart-brushes))); + --igc-resting-elevation: var(--igx-test-component-resting-elevation, var(--ig-test-component-resting-elevation, var(--ig-elevation-2))); + --ig-theme: material; + --ig-theme-variant: light; +} + +/* END_OUTPUT */ +/* EXPECTED */ +igc-dockmanager { + --igc-background: var(--igx-test-component-background, var(--ig-test-component-background, var(--ig-primary-400))); + --igc-hover-background: var(--igx-test-component-hover-background, var(--ig-test-component-hover-background, hsl(from var(--ig-secondary-700) h s l/0.26))); + --igc-foreground: var(--igx-test-component-foreground, var(--ig-test-component-foreground, var(--ig-primary-400-contrast))); + --igc-hover-foreground: var(--igx-test-component-hover-foreground, var(--ig-test-component-hover-foreground, var(--ig-secondary-700-contrast))); + --igc-border-style: var(--igx-test-component-border-style, var(--ig-test-component-border-style, solid)); + --igc-border-radius: var(--igx-test-component-border-radius, var(--ig-test-component-border-radius, 0.125rem)); + --igc-brushes: var(--igx-test-component-brushes, var(--ig-test-component-brushes, var(--chart-brushes))); + --igc-resting-elevation: var(--igx-test-component-resting-elevation, var(--ig-test-component-resting-elevation, var(--ig-elevation-2))); + --ig-theme: material; + --ig-theme-variant: light; +} + +/* END_EXPECTED */ +/* END_ASSERT */ +/* */ +/* Test: should ignore $name property when provided to css-vars-from-theme mixin */ +/* ASSERT: */ +/* OUTPUT */ +.test-output { + --background: var(--igx-test-component-background, var(--ig-test-component-background, var(--ig-primary-400))); + --hover-background: var(--igx-test-component-hover-background, var(--ig-test-component-hover-background, hsl(from var(--ig-secondary-700) h s l/0.26))); + --foreground: var(--igx-test-component-foreground, var(--ig-test-component-foreground, var(--ig-primary-400-contrast))); + --hover-foreground: var(--igx-test-component-hover-foreground, var(--ig-test-component-hover-foreground, var(--ig-secondary-700-contrast))); + --border-style: var(--igx-test-component-border-style, var(--ig-test-component-border-style, solid)); + --border-radius: var(--igx-test-component-border-radius, var(--ig-test-component-border-radius, 0.125rem)); + --brushes: var(--igx-test-component-brushes, var(--ig-test-component-brushes, var(--chart-brushes))); + --resting-elevation: var(--igx-test-component-resting-elevation, var(--ig-test-component-resting-elevation, var(--ig-elevation-2))); + --ig-theme: material; + --ig-theme-variant: light; +} + +/* END_OUTPUT */ +/* EXPECTED */ +.test-output { + --background: var(--igx-test-component-background, var(--ig-test-component-background, var(--ig-primary-400))); + --hover-background: var(--igx-test-component-hover-background, var(--ig-test-component-hover-background, hsl(from var(--ig-secondary-700) h s l/0.26))); + --foreground: var(--igx-test-component-foreground, var(--ig-test-component-foreground, var(--ig-primary-400-contrast))); + --hover-foreground: var(--igx-test-component-hover-foreground, var(--ig-test-component-hover-foreground, var(--ig-secondary-700-contrast))); + --border-style: var(--igx-test-component-border-style, var(--ig-test-component-border-style, solid)); + --border-radius: var(--igx-test-component-border-radius, var(--ig-test-component-border-radius, 0.125rem)); + --brushes: var(--igx-test-component-brushes, var(--ig-test-component-brushes, var(--chart-brushes))); + --resting-elevation: var(--igx-test-component-resting-elevation, var(--ig-test-component-resting-elevation, var(--ig-elevation-2))); + --ig-theme: material; + --ig-theme-variant: light; +} + +/* END_EXPECTED */ +/* END_ASSERT */ +/* */ +/* Test: should ignore all keys in the ignore list */ +/* ASSERT: */ +/* OUTPUT */ +.test-output { + --background: var(--igx-test-component-background, var(--ig-test-component-background, var(--ig-primary-400))); + --hover-background: var(--igx-test-component-hover-background, var(--ig-test-component-hover-background, hsl(from var(--ig-secondary-700) h s l/0.26))); + --foreground: var(--igx-test-component-foreground, var(--ig-test-component-foreground, var(--ig-primary-400-contrast))); + --hover-foreground: var(--igx-test-component-hover-foreground, var(--ig-test-component-hover-foreground, var(--ig-secondary-700-contrast))); + --border-style: var(--igx-test-component-border-style, var(--ig-test-component-border-style, solid)); + --border-radius: var(--igx-test-component-border-radius, var(--ig-test-component-border-radius, 0.125rem)); + --brushes: var(--igx-test-component-brushes, var(--ig-test-component-brushes, var(--chart-brushes))); + --resting-elevation: var(--igx-test-component-resting-elevation, var(--ig-test-component-resting-elevation, var(--ig-elevation-2))); + --ig-theme: material; + --ig-theme-variant: light; +} + +/* END_OUTPUT */ +/* EXPECTED */ +.test-output { + --background: var(--igx-test-component-background, var(--ig-test-component-background, var(--ig-primary-400))); + --hover-background: var(--igx-test-component-hover-background, var(--ig-test-component-hover-background, hsl(from var(--ig-secondary-700) h s l/0.26))); + --foreground: var(--igx-test-component-foreground, var(--ig-test-component-foreground, var(--ig-primary-400-contrast))); + --hover-foreground: var(--igx-test-component-hover-foreground, var(--ig-test-component-hover-foreground, var(--ig-secondary-700-contrast))); + --border-style: var(--igx-test-component-border-style, var(--ig-test-component-border-style, solid)); + --border-radius: var(--igx-test-component-border-radius, var(--ig-test-component-border-radius, 0.125rem)); + --brushes: var(--igx-test-component-brushes, var(--ig-test-component-brushes, var(--chart-brushes))); + --resting-elevation: var(--igx-test-component-resting-elevation, var(--ig-test-component-resting-elevation, var(--ig-elevation-2))); + --ig-theme: material; + --ig-theme-variant: light; +} + +/* END_EXPECTED */ +/* END_ASSERT */ +/* */ +/* Test: should scope theme CSS variables correctly */ +/* ASSERT: */ +/* OUTPUT */ +igc-avatar { + --background: var(--igx-test-component-background, var(--ig-test-component-background, var(--ig-primary-400))); + --hover-background: var(--igx-test-component-hover-background, var(--ig-test-component-hover-background, hsl(from var(--ig-secondary-700) h s l/0.26))); + --foreground: var(--igx-test-component-foreground, var(--ig-test-component-foreground, var(--ig-primary-400-contrast))); + --hover-foreground: var(--igx-test-component-hover-foreground, var(--ig-test-component-hover-foreground, var(--ig-secondary-700-contrast))); + --border-style: var(--igx-test-component-border-style, var(--ig-test-component-border-style, solid)); + --border-radius: var(--igx-test-component-border-radius, var(--ig-test-component-border-radius, 0.125rem)); + --brushes: var(--igx-test-component-brushes, var(--ig-test-component-brushes, var(--chart-brushes))); + --resting-elevation: var(--igx-test-component-resting-elevation, var(--ig-test-component-resting-elevation, var(--ig-elevation-2))); + --ig-theme: material; + --ig-theme-variant: light; +} + +/* END_OUTPUT */ +/* EXPECTED */ +igc-avatar { + --background: var(--igx-test-component-background, var(--ig-test-component-background, var(--ig-primary-400))); + --hover-background: var(--igx-test-component-hover-background, var(--ig-test-component-hover-background, hsl(from var(--ig-secondary-700) h s l/0.26))); + --foreground: var(--igx-test-component-foreground, var(--ig-test-component-foreground, var(--ig-primary-400-contrast))); + --hover-foreground: var(--igx-test-component-hover-foreground, var(--ig-test-component-hover-foreground, var(--ig-secondary-700-contrast))); + --border-style: var(--igx-test-component-border-style, var(--ig-test-component-border-style, solid)); + --border-radius: var(--igx-test-component-border-radius, var(--ig-test-component-border-radius, 0.125rem)); + --brushes: var(--igx-test-component-brushes, var(--ig-test-component-brushes, var(--chart-brushes))); + --resting-elevation: var(--igx-test-component-resting-elevation, var(--ig-test-component-resting-elevation, var(--ig-elevation-2))); + --ig-theme: material; + --ig-theme-variant: light; +} + +/* END_EXPECTED */ +/* END_ASSERT */ +/* ASSERT: */ +/* OUTPUT */ +.my-theme, +.my-theme igc-avatar { + --background: var(--igx-test-component-background, var(--ig-test-component-background, var(--ig-primary-400))); + --hover-background: var(--igx-test-component-hover-background, var(--ig-test-component-hover-background, hsl(from var(--ig-secondary-700) h s l/0.26))); + --foreground: var(--igx-test-component-foreground, var(--ig-test-component-foreground, var(--ig-primary-400-contrast))); + --hover-foreground: var(--igx-test-component-hover-foreground, var(--ig-test-component-hover-foreground, var(--ig-secondary-700-contrast))); + --border-style: var(--igx-test-component-border-style, var(--ig-test-component-border-style, solid)); + --border-radius: var(--igx-test-component-border-radius, var(--ig-test-component-border-radius, 0.125rem)); + --brushes: var(--igx-test-component-brushes, var(--ig-test-component-brushes, var(--chart-brushes))); + --resting-elevation: var(--igx-test-component-resting-elevation, var(--ig-test-component-resting-elevation, var(--ig-elevation-2))); + --ig-theme: material; + --ig-theme-variant: light; +} + +/* END_OUTPUT */ +/* EXPECTED */ +.my-theme, +.my-theme igc-avatar { + --background: var(--igx-test-component-background, var(--ig-test-component-background, var(--ig-primary-400))); + --hover-background: var(--igx-test-component-hover-background, var(--ig-test-component-hover-background, hsl(from var(--ig-secondary-700) h s l/0.26))); + --foreground: var(--igx-test-component-foreground, var(--ig-test-component-foreground, var(--ig-primary-400-contrast))); + --hover-foreground: var(--igx-test-component-hover-foreground, var(--ig-test-component-hover-foreground, var(--ig-secondary-700-contrast))); + --border-style: var(--igx-test-component-border-style, var(--ig-test-component-border-style, solid)); + --border-radius: var(--igx-test-component-border-radius, var(--ig-test-component-border-radius, 0.125rem)); + --brushes: var(--igx-test-component-brushes, var(--ig-test-component-brushes, var(--chart-brushes))); + --resting-elevation: var(--igx-test-component-resting-elevation, var(--ig-test-component-resting-elevation, var(--ig-elevation-2))); + --ig-theme: material; + --ig-theme-variant: light; +} + +/* END_EXPECTED */ +/* END_ASSERT */ +/* */ +/* Test: should scope theme CSS variables to a specified scope */ +/* ASSERT: */ +/* OUTPUT */ +.custom-selector { + --background: var(--igx-test-component-background, var(--ig-test-component-background, var(--ig-primary-400))); + --hover-background: var(--igx-test-component-hover-background, var(--ig-test-component-hover-background, hsl(from var(--ig-secondary-700) h s l/0.26))); + --foreground: var(--igx-test-component-foreground, var(--ig-test-component-foreground, var(--ig-primary-400-contrast))); + --hover-foreground: var(--igx-test-component-hover-foreground, var(--ig-test-component-hover-foreground, var(--ig-secondary-700-contrast))); + --border-style: var(--igx-test-component-border-style, var(--ig-test-component-border-style, solid)); + --border-radius: var(--igx-test-component-border-radius, var(--ig-test-component-border-radius, 0.125rem)); + --brushes: var(--igx-test-component-brushes, var(--ig-test-component-brushes, var(--chart-brushes))); + --resting-elevation: var(--igx-test-component-resting-elevation, var(--ig-test-component-resting-elevation, var(--ig-elevation-2))); + --ig-theme: material; + --ig-theme-variant: light; +} + +/* END_OUTPUT */ +/* EXPECTED */ +.custom-selector { + --background: var(--igx-test-component-background, var(--ig-test-component-background, var(--ig-primary-400))); + --hover-background: var(--igx-test-component-hover-background, var(--ig-test-component-hover-background, hsl(from var(--ig-secondary-700) h s l/0.26))); + --foreground: var(--igx-test-component-foreground, var(--ig-test-component-foreground, var(--ig-primary-400-contrast))); + --hover-foreground: var(--igx-test-component-hover-foreground, var(--ig-test-component-hover-foreground, var(--ig-secondary-700-contrast))); + --border-style: var(--igx-test-component-border-style, var(--ig-test-component-border-style, solid)); + --border-radius: var(--igx-test-component-border-radius, var(--ig-test-component-border-radius, 0.125rem)); + --brushes: var(--igx-test-component-brushes, var(--ig-test-component-brushes, var(--chart-brushes))); + --resting-elevation: var(--igx-test-component-resting-elevation, var(--ig-test-component-resting-elevation, var(--ig-elevation-2))); + --ig-theme: material; + --ig-theme-variant: light; +} + +/* END_EXPECTED */ +/* END_ASSERT */ +/* ASSERT: */ +/* OUTPUT */ +.my-theme, +.my-theme .custom-selector { + --background: var(--igx-test-component-background, var(--ig-test-component-background, var(--ig-primary-400))); + --hover-background: var(--igx-test-component-hover-background, var(--ig-test-component-hover-background, hsl(from var(--ig-secondary-700) h s l/0.26))); + --foreground: var(--igx-test-component-foreground, var(--ig-test-component-foreground, var(--ig-primary-400-contrast))); + --hover-foreground: var(--igx-test-component-hover-foreground, var(--ig-test-component-hover-foreground, var(--ig-secondary-700-contrast))); + --border-style: var(--igx-test-component-border-style, var(--ig-test-component-border-style, solid)); + --border-radius: var(--igx-test-component-border-radius, var(--ig-test-component-border-radius, 0.125rem)); + --brushes: var(--igx-test-component-brushes, var(--ig-test-component-brushes, var(--chart-brushes))); + --resting-elevation: var(--igx-test-component-resting-elevation, var(--ig-test-component-resting-elevation, var(--ig-elevation-2))); + --ig-theme: material; + --ig-theme-variant: light; +} + +/* END_OUTPUT */ +/* EXPECTED */ +.my-theme, +.my-theme .custom-selector { + --background: var(--igx-test-component-background, var(--ig-test-component-background, var(--ig-primary-400))); + --hover-background: var(--igx-test-component-hover-background, var(--ig-test-component-hover-background, hsl(from var(--ig-secondary-700) h s l/0.26))); + --foreground: var(--igx-test-component-foreground, var(--ig-test-component-foreground, var(--ig-primary-400-contrast))); + --hover-foreground: var(--igx-test-component-hover-foreground, var(--ig-test-component-hover-foreground, var(--ig-secondary-700-contrast))); + --border-style: var(--igx-test-component-border-style, var(--ig-test-component-border-style, solid)); + --border-radius: var(--igx-test-component-border-radius, var(--ig-test-component-border-radius, 0.125rem)); + --brushes: var(--igx-test-component-brushes, var(--ig-test-component-brushes, var(--chart-brushes))); + --resting-elevation: var(--igx-test-component-resting-elevation, var(--ig-test-component-resting-elevation, var(--ig-elevation-2))); + --ig-theme: material; + --ig-theme-variant: light; +} + +/* END_EXPECTED */ +/* END_ASSERT */ +/* */ +/* Test: should set the border-radius to a value between min and max */ +/* ✔ [assert-equal] should set the border-radius to a value between min and max */ +/* */ +/* Test: should include border-radius styles to a given scope with a value between min and max */ +/* ASSERT: */ +/* OUTPUT */ +.test-output { + border-radius: clamp(0.125rem, calc(var(--ig-radius-factor, 1) * 0.25rem), 0.25rem); +} + +/* END_OUTPUT */ +/* EXPECTED */ +.test-output { + border-radius: clamp(0.125rem, calc(var(--ig-radius-factor, 1) * 0.25rem), 0.25rem); +} + +/* END_EXPECTED */ +/* END_ASSERT */ +/* */ +/* Test: include single-line truncate styles when the ellipsis mixin is included */ +/* ASSERT: */ +/* OUTPUT */ +.test-output { + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; +} + +/* END_OUTPUT */ +/* EXPECTED */ +.test-output { + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; +} + +/* END_EXPECTED */ +/* END_ASSERT */ +/* */ +/* Test: includes multi-line truncate styles when the line-clamp mixin is included */ +/* ASSERT: */ +/* OUTPUT */ +.test-output { + display: -webkit-inline-box; + -webkit-line-clamp: 3; + -webkit-box-orient: vertical; + overflow: hidden; +} + +/* END_OUTPUT */ +/* EXPECTED */ +.test-output { + display: -webkit-inline-box; + -webkit-line-clamp: 3; + -webkit-box-orient: vertical; + overflow: hidden; +} + +/* END_EXPECTED */ +/* END_ASSERT */ +/* */ +/* Test: includes styles that hide the default element when the hide-default mixin is included */ +/* ASSERT: */ +/* OUTPUT */ +.test-output { + position: absolute; + width: 1px; + height: 1px; + margin: -1px; + border: none; + clip: rect(0, 0, 0, 0); + outline: 0; + pointer-events: none; + overflow: hidden; + appearance: none; +} + +/* END_OUTPUT */ +/* EXPECTED */ +.test-output { + position: absolute; + width: 1px; + height: 1px; + margin: -1px; + border: none; + clip: rect(0, 0, 0, 0); + outline: 0; + pointer-events: none; + overflow: hidden; + appearance: none; +} + +/* END_EXPECTED */ +/* END_ASSERT */ +/* */ +/* # Module: Themes :: schemas :: Tokens */ +/* ------------------------------------- */ +/* Test: should generate global tokens with the ig prefix */ +/* ASSERT: */ +/* OUTPUT */ +.test-output { + --ig-test-component-background: var(--ig-primary-400); + --ig-test-component-hover-background: hsl(from var(--ig-secondary-700) h s l/0.26); + --ig-test-component-foreground: var(--ig-primary-400-contrast); + --ig-test-component-hover-foreground: var(--ig-secondary-700-contrast); + --ig-test-component-border-style: solid; + --ig-test-component-border-radius: 0.125rem; + --ig-test-component-brushes: var(--chart-brushes); + --ig-test-component-resting-elevation: var(--ig-elevation-2); +} + +/* END_OUTPUT */ +/* EXPECTED */ +.test-output { + --ig-test-component-background: var(--ig-primary-400); + --ig-test-component-hover-background: hsl(from var(--ig-secondary-700) h s l/0.26); + --ig-test-component-foreground: var(--ig-primary-400-contrast); + --ig-test-component-hover-foreground: var(--ig-secondary-700-contrast); + --ig-test-component-border-style: solid; + --ig-test-component-border-radius: 0.125rem; + --ig-test-component-brushes: var(--chart-brushes); + --ig-test-component-resting-elevation: var(--ig-elevation-2); +} + +/* END_EXPECTED */ +/* END_ASSERT */ +/* */ +/* Test: should rewrite local var references to global ig-prefixed tokens */ +/* ASSERT: */ +/* OUTPUT */ +.test-output { + --ig-test-rewrite-background: red; + --ig-test-rewrite-color: hsla(from color(from var(--ig-test-rewrite-background) var(--y-contrast)) h 0 l/1); + --ig-test-rewrite-border-style: solid; +} + +/* END_OUTPUT */ +/* EXPECTED */ +.test-output { + --ig-test-rewrite-background: red; + --ig-test-rewrite-color: hsla(from color(from var(--ig-test-rewrite-background) var(--y-contrast)) h 0 l/1); + --ig-test-rewrite-border-style: solid; +} + +/* END_EXPECTED */ +/* END_ASSERT */ +/* */ +/* Test: should rewrite multiple local var references in a single value */ +/* ASSERT: */ +/* OUTPUT */ +.test-output { + --ig-test-multi-background: red; + --ig-test-multi-foreground: blue; + --ig-test-multi-computed: calc(var(--ig-test-multi-background) + var(--ig-test-multi-foreground)); +} + +/* END_OUTPUT */ +/* EXPECTED */ +.test-output { + --ig-test-multi-background: red; + --ig-test-multi-foreground: blue; + --ig-test-multi-computed: calc(var(--ig-test-multi-background) + var(--ig-test-multi-foreground)); +} + +/* END_EXPECTED */ +/* END_ASSERT */ +/* */ +/* Test: should skip sizable expressions from schema defaults */ +/* ASSERT: */ +/* OUTPUT */ +.test-output { + --ig-test-sizable-background: red; +} + +/* END_OUTPUT */ +/* EXPECTED */ +.test-output { + --ig-test-sizable-background: red; +} + +/* END_EXPECTED */ +/* END_ASSERT */ +/* */ +/* Test: should emit concrete size values provided by the user */ +/* ASSERT: */ +/* OUTPUT */ +.test-output { + --ig-test-concrete-size-background: red; + --ig-test-concrete-size-size: 2rem; +} + +/* END_OUTPUT */ +/* EXPECTED */ +.test-output { + --ig-test-concrete-size-background: red; + --ig-test-concrete-size-size: 2rem; +} + +/* END_EXPECTED */ +/* END_ASSERT */ +/* */ +/* Test: should not emit ignored keys */ +/* ASSERT: */ +/* OUTPUT */ +.test-output { + --ig-test-component-background: var(--ig-primary-400); + --ig-test-component-hover-background: hsl(from var(--ig-secondary-700) h s l/0.26); + --ig-test-component-foreground: var(--ig-primary-400-contrast); + --ig-test-component-hover-foreground: var(--ig-secondary-700-contrast); + --ig-test-component-border-style: solid; + --ig-test-component-border-radius: 0.125rem; + --ig-test-component-brushes: var(--chart-brushes); + --ig-test-component-resting-elevation: var(--ig-elevation-2); + --ig-test-component-default-size: 2; +} + +/* END_OUTPUT */ +/* EXPECTED */ +.test-output { + --ig-test-component-background: var(--ig-primary-400); + --ig-test-component-hover-background: hsl(from var(--ig-secondary-700) h s l/0.26); + --ig-test-component-foreground: var(--ig-primary-400-contrast); + --ig-test-component-hover-foreground: var(--ig-secondary-700-contrast); + --ig-test-component-border-style: solid; + --ig-test-component-border-radius: 0.125rem; + --ig-test-component-brushes: var(--chart-brushes); + --ig-test-component-resting-elevation: var(--ig-elevation-2); + --ig-test-component-default-size: 2; +} + +/* END_EXPECTED */ +/* END_ASSERT */ +/* */ +/* Test: should always use the ig prefix regardless of configured variable-prefix */ +/* ASSERT: */ +/* OUTPUT */ +.test-output { + --ig-test-prefix-background: blue; +} + +/* END_OUTPUT */ +/* EXPECTED */ +.test-output { + --ig-test-prefix-background: blue; +} + +/* END_EXPECTED */ +/* END_ASSERT */ +/* */ +/* Test: should scope theme CSS variables when mode is scoped */ +/* ASSERT: */ +/* OUTPUT */ +igc-avatar { + --background: var(--igx-test-component-background, var(--ig-test-component-background, var(--ig-primary-400))); + --hover-background: var(--igx-test-component-hover-background, var(--ig-test-component-hover-background, hsl(from var(--ig-secondary-700) h s l/0.26))); + --foreground: var(--igx-test-component-foreground, var(--ig-test-component-foreground, var(--ig-primary-400-contrast))); + --hover-foreground: var(--igx-test-component-hover-foreground, var(--ig-test-component-hover-foreground, var(--ig-secondary-700-contrast))); + --border-style: var(--igx-test-component-border-style, var(--ig-test-component-border-style, solid)); + --border-radius: var(--igx-test-component-border-radius, var(--ig-test-component-border-radius, 0.125rem)); + --brushes: var(--igx-test-component-brushes, var(--ig-test-component-brushes, var(--chart-brushes))); + --resting-elevation: var(--igx-test-component-resting-elevation, var(--ig-test-component-resting-elevation, var(--ig-elevation-2))); + --ig-theme: material; + --ig-theme-variant: light; +} + +/* END_OUTPUT */ +/* EXPECTED */ +igc-avatar { + --background: var(--igx-test-component-background, var(--ig-test-component-background, var(--ig-primary-400))); + --hover-background: var(--igx-test-component-hover-background, var(--ig-test-component-hover-background, hsl(from var(--ig-secondary-700) h s l/0.26))); + --foreground: var(--igx-test-component-foreground, var(--ig-test-component-foreground, var(--ig-primary-400-contrast))); + --hover-foreground: var(--igx-test-component-hover-foreground, var(--ig-test-component-hover-foreground, var(--ig-secondary-700-contrast))); + --border-style: var(--igx-test-component-border-style, var(--ig-test-component-border-style, solid)); + --border-radius: var(--igx-test-component-border-radius, var(--ig-test-component-border-radius, 0.125rem)); + --brushes: var(--igx-test-component-brushes, var(--ig-test-component-brushes, var(--chart-brushes))); + --resting-elevation: var(--igx-test-component-resting-elevation, var(--ig-test-component-resting-elevation, var(--ig-elevation-2))); + --ig-theme: material; + --ig-theme-variant: light; +} + +/* END_EXPECTED */ +/* END_ASSERT */ +/* ASSERT: */ +/* OUTPUT */ +.my-theme, +.my-theme igc-avatar { + --background: var(--igx-test-component-background, var(--ig-test-component-background, var(--ig-primary-400))); + --hover-background: var(--igx-test-component-hover-background, var(--ig-test-component-hover-background, hsl(from var(--ig-secondary-700) h s l/0.26))); + --foreground: var(--igx-test-component-foreground, var(--ig-test-component-foreground, var(--ig-primary-400-contrast))); + --hover-foreground: var(--igx-test-component-hover-foreground, var(--ig-test-component-hover-foreground, var(--ig-secondary-700-contrast))); + --border-style: var(--igx-test-component-border-style, var(--ig-test-component-border-style, solid)); + --border-radius: var(--igx-test-component-border-radius, var(--ig-test-component-border-radius, 0.125rem)); + --brushes: var(--igx-test-component-brushes, var(--ig-test-component-brushes, var(--chart-brushes))); + --resting-elevation: var(--igx-test-component-resting-elevation, var(--ig-test-component-resting-elevation, var(--ig-elevation-2))); + --ig-theme: material; + --ig-theme-variant: light; +} + +/* END_OUTPUT */ +/* EXPECTED */ +.my-theme, +.my-theme igc-avatar { + --background: var(--igx-test-component-background, var(--ig-test-component-background, var(--ig-primary-400))); + --hover-background: var(--igx-test-component-hover-background, var(--ig-test-component-hover-background, hsl(from var(--ig-secondary-700) h s l/0.26))); + --foreground: var(--igx-test-component-foreground, var(--ig-test-component-foreground, var(--ig-primary-400-contrast))); + --hover-foreground: var(--igx-test-component-hover-foreground, var(--ig-test-component-hover-foreground, var(--ig-secondary-700-contrast))); + --border-style: var(--igx-test-component-border-style, var(--ig-test-component-border-style, solid)); + --border-radius: var(--igx-test-component-border-radius, var(--ig-test-component-border-radius, 0.125rem)); + --brushes: var(--igx-test-component-brushes, var(--ig-test-component-brushes, var(--chart-brushes))); + --resting-elevation: var(--igx-test-component-resting-elevation, var(--ig-test-component-resting-elevation, var(--ig-elevation-2))); + --ig-theme: material; + --ig-theme-variant: light; +} + +/* END_EXPECTED */ +/* END_ASSERT */ +/* */ +/* Test: should scope theme CSS variables to a custom scope when mode is scoped */ +/* ASSERT: */ +/* OUTPUT */ +.custom-scope { + --background: var(--igx-test-component-background, var(--ig-test-component-background, var(--ig-primary-400))); + --hover-background: var(--igx-test-component-hover-background, var(--ig-test-component-hover-background, hsl(from var(--ig-secondary-700) h s l/0.26))); + --foreground: var(--igx-test-component-foreground, var(--ig-test-component-foreground, var(--ig-primary-400-contrast))); + --hover-foreground: var(--igx-test-component-hover-foreground, var(--ig-test-component-hover-foreground, var(--ig-secondary-700-contrast))); + --border-style: var(--igx-test-component-border-style, var(--ig-test-component-border-style, solid)); + --border-radius: var(--igx-test-component-border-radius, var(--ig-test-component-border-radius, 0.125rem)); + --brushes: var(--igx-test-component-brushes, var(--ig-test-component-brushes, var(--chart-brushes))); + --resting-elevation: var(--igx-test-component-resting-elevation, var(--ig-test-component-resting-elevation, var(--ig-elevation-2))); + --ig-theme: material; + --ig-theme-variant: light; +} + +/* END_OUTPUT */ +/* EXPECTED */ +.custom-scope { + --background: var(--igx-test-component-background, var(--ig-test-component-background, var(--ig-primary-400))); + --hover-background: var(--igx-test-component-hover-background, var(--ig-test-component-hover-background, hsl(from var(--ig-secondary-700) h s l/0.26))); + --foreground: var(--igx-test-component-foreground, var(--ig-test-component-foreground, var(--ig-primary-400-contrast))); + --hover-foreground: var(--igx-test-component-hover-foreground, var(--ig-test-component-hover-foreground, var(--ig-secondary-700-contrast))); + --border-style: var(--igx-test-component-border-style, var(--ig-test-component-border-style, solid)); + --border-radius: var(--igx-test-component-border-radius, var(--ig-test-component-border-radius, 0.125rem)); + --brushes: var(--igx-test-component-brushes, var(--ig-test-component-brushes, var(--chart-brushes))); + --resting-elevation: var(--igx-test-component-resting-elevation, var(--ig-test-component-resting-elevation, var(--ig-elevation-2))); + --ig-theme: material; + --ig-theme-variant: light; +} + +/* END_EXPECTED */ +/* END_ASSERT */ +/* */ +/* Test: should produce identical output for css-vars and tokens in scoped mode */ +/* ASSERT: */ +/* OUTPUT */ +igc-test { + --background: var(--igx-test-component-background, var(--ig-test-component-background, var(--ig-primary-400))); + --hover-background: var(--igx-test-component-hover-background, var(--ig-test-component-hover-background, hsl(from var(--ig-secondary-700) h s l/0.26))); + --foreground: var(--igx-test-component-foreground, var(--ig-test-component-foreground, var(--ig-primary-400-contrast))); + --hover-foreground: var(--igx-test-component-hover-foreground, var(--ig-test-component-hover-foreground, var(--ig-secondary-700-contrast))); + --border-style: var(--igx-test-component-border-style, var(--ig-test-component-border-style, solid)); + --border-radius: var(--igx-test-component-border-radius, var(--ig-test-component-border-radius, 0.125rem)); + --brushes: var(--igx-test-component-brushes, var(--ig-test-component-brushes, var(--chart-brushes))); + --resting-elevation: var(--igx-test-component-resting-elevation, var(--ig-test-component-resting-elevation, var(--ig-elevation-2))); + --ig-theme: material; + --ig-theme-variant: light; +} + +/* END_OUTPUT */ +/* EXPECTED */ +igc-test { + --background: var(--igx-test-component-background, var(--ig-test-component-background, var(--ig-primary-400))); + --hover-background: var(--igx-test-component-hover-background, var(--ig-test-component-hover-background, hsl(from var(--ig-secondary-700) h s l/0.26))); + --foreground: var(--igx-test-component-foreground, var(--ig-test-component-foreground, var(--ig-primary-400-contrast))); + --hover-foreground: var(--igx-test-component-hover-foreground, var(--ig-test-component-hover-foreground, var(--ig-secondary-700-contrast))); + --border-style: var(--igx-test-component-border-style, var(--ig-test-component-border-style, solid)); + --border-radius: var(--igx-test-component-border-radius, var(--ig-test-component-border-radius, 0.125rem)); + --brushes: var(--igx-test-component-brushes, var(--ig-test-component-brushes, var(--chart-brushes))); + --resting-elevation: var(--igx-test-component-resting-elevation, var(--ig-test-component-resting-elevation, var(--ig-elevation-2))); + --ig-theme: material; + --ig-theme-variant: light; +} + +/* END_EXPECTED */ +/* END_ASSERT */ +/* */ +/* */ +/* # Module: Themes :: schemas :: Sizing */ +/* ------------------------------------- */ +/* Test: should produce size variables */ +/* ASSERT: */ +/* OUTPUT */ +.test-output { + width: max(var(--is-large, 1) * max(300px, -1 * 300px), var(--is-medium, 1) * max(200px, -1 * 200px), var(--is-small, 1) * max(100px, -1 * 100px)); +} + +/* END_OUTPUT */ +/* EXPECTED */ +.test-output { + width: max(var(--is-large, 1) * max(300px, -1 * 300px), var(--is-medium, 1) * max(200px, -1 * 200px), var(--is-small, 1) * max(100px, -1 * 100px)); +} + +/* END_EXPECTED */ +/* END_ASSERT */ +/* */ +/* */ +/* # Module: Themes :: schemas :: Spacing */ +/* -------------------------------------- */ +/* Test: should use customizable spacing when declaring padding/margin */ +/* ASSERT: */ +/* OUTPUT */ +.test-output { + padding: max(var(--is-large, 1) * max(14px, -1 * 14px) * var(--ig-spacing-large, var(--ig-spacing, var(--ig-spacing))), var(--is-medium, 1) * max(14px, -1 * 14px) * var(--ig-spacing-medium, var(--ig-spacing, var(--ig-spacing))), var(--is-small, 1) * max(14px, -1 * 14px) * var(--ig-spacing-small, var(--ig-spacing, var(--ig-spacing)))); +} + +/* END_OUTPUT */ +/* EXPECTED */ +.test-output { + padding: max(var(--is-large, 1) * max(14px, -1 * 14px) * var(--ig-spacing-large, var(--ig-spacing, var(--ig-spacing))), var(--is-medium, 1) * max(14px, -1 * 14px) * var(--ig-spacing-medium, var(--ig-spacing, var(--ig-spacing))), var(--is-small, 1) * max(14px, -1 * 14px) * var(--ig-spacing-small, var(--ig-spacing, var(--ig-spacing)))); +} + +/* END_EXPECTED */ +/* END_ASSERT */ +/* */ +/* Test: should use customizable inline spacing when declaring inline padding/margin */ +/* ASSERT: */ +/* OUTPUT */ +.test-output { + padding-inline: max(var(--is-large, 1) * max(14px, -1 * 14px) * var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))), var(--is-medium, 1) * max(14px, -1 * 14px) * var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))), var(--is-small, 1) * max(14px, -1 * 14px) * var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing)))); +} + +/* END_OUTPUT */ +/* EXPECTED */ +.test-output { + padding-inline: max(var(--is-large, 1) * max(14px, -1 * 14px) * var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))), var(--is-medium, 1) * max(14px, -1 * 14px) * var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))), var(--is-small, 1) * max(14px, -1 * 14px) * var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing)))); +} + +/* END_EXPECTED */ +/* END_ASSERT */ +/* */ +/* Test: should use customizable block spacing when declaring inline padding/margin */ +/* ASSERT: */ +/* OUTPUT */ +.test-output { + padding-block: max(var(--is-large, 1) * max(16px, -1 * 16px) * var(--ig-spacing-block-large, var(--ig-spacing-block, var(--ig-spacing))), var(--is-medium, 1) * max(8px, -1 * 8px) * var(--ig-spacing-block-medium, var(--ig-spacing-block, var(--ig-spacing))), var(--is-small, 1) * max(4px, -1 * 4px) * var(--ig-spacing-block-small, var(--ig-spacing-block, var(--ig-spacing)))); +} + +/* END_OUTPUT */ +/* EXPECTED */ +.test-output { + padding-block: max(var(--is-large, 1) * max(16px, -1 * 16px) * var(--ig-spacing-block-large, var(--ig-spacing-block, var(--ig-spacing))), var(--is-medium, 1) * max(8px, -1 * 8px) * var(--ig-spacing-block-medium, var(--ig-spacing-block, var(--ig-spacing))), var(--is-small, 1) * max(4px, -1 * 4px) * var(--ig-spacing-block-small, var(--ig-spacing-block, var(--ig-spacing)))); +} + +/* END_EXPECTED */ +/* END_ASSERT */ +/* */ +/* */ +/* */ +/* */ +/* # Module: Elevations */ +/* -------------------- */ +/* Test: should return an empty list for a list of non box-shadow values */ +/* ✔ [assert-equal] should return an empty list for a list of non box-shadow values */ +/* */ +/* Test: should produce a box shadow that reacts to CSS --ig-elevation-factor changes */ +/* ✔ [assert-equal] should produce a box shadow that reacts to CSS --ig-elevation-factor changes */ +/* */ +/* Test: should configure the material elevations module */ +/* ASSERT: */ +/* OUTPUT */ +.test-output { + --ig-elevation-0: none; + --ig-elevation-1: 0 calc(var(--ig-elevation-factor, 1) * 1px) calc(var(--ig-elevation-factor, 1) * 3px) 0 red, 0 calc(var(--ig-elevation-factor, 1) * 1px) calc(var(--ig-elevation-factor, 1) * 1px) 0 green, 0 calc(var(--ig-elevation-factor, 1) * 2px) calc(var(--ig-elevation-factor, 1) * 1px) calc(var(--ig-elevation-factor, 1) * -1px) blue; + --ig-elevation-2: 0 calc(var(--ig-elevation-factor, 1) * 1px) calc(var(--ig-elevation-factor, 1) * 5px) 0 red, 0 calc(var(--ig-elevation-factor, 1) * 2px) calc(var(--ig-elevation-factor, 1) * 2px) 0 green, 0 calc(var(--ig-elevation-factor, 1) * 3px) calc(var(--ig-elevation-factor, 1) * 1px) calc(var(--ig-elevation-factor, 1) * -2px) blue; + --ig-elevation-3: 0 calc(var(--ig-elevation-factor, 1) * 1px) calc(var(--ig-elevation-factor, 1) * 8px) 0 red, 0 calc(var(--ig-elevation-factor, 1) * 3px) calc(var(--ig-elevation-factor, 1) * 4px) 0 green, 0 calc(var(--ig-elevation-factor, 1) * 3px) calc(var(--ig-elevation-factor, 1) * 3px) calc(var(--ig-elevation-factor, 1) * -2px) blue; + --ig-elevation-4: 0 calc(var(--ig-elevation-factor, 1) * 2px) calc(var(--ig-elevation-factor, 1) * 4px) calc(var(--ig-elevation-factor, 1) * -1px) red, 0 calc(var(--ig-elevation-factor, 1) * 4px) calc(var(--ig-elevation-factor, 1) * 5px) 0 green, 0 calc(var(--ig-elevation-factor, 1) * 1px) calc(var(--ig-elevation-factor, 1) * 10px) 0 blue; + --ig-elevation-5: 0 calc(var(--ig-elevation-factor, 1) * 3px) calc(var(--ig-elevation-factor, 1) * 5px) calc(var(--ig-elevation-factor, 1) * -1px) red, 0 calc(var(--ig-elevation-factor, 1) * 5px) calc(var(--ig-elevation-factor, 1) * 8px) 0 green, 0 calc(var(--ig-elevation-factor, 1) * 1px) calc(var(--ig-elevation-factor, 1) * 14px) 0 blue; + --ig-elevation-6: 0 calc(var(--ig-elevation-factor, 1) * 3px) calc(var(--ig-elevation-factor, 1) * 5px) calc(var(--ig-elevation-factor, 1) * -1px) red, 0 calc(var(--ig-elevation-factor, 1) * 6px) calc(var(--ig-elevation-factor, 1) * 10px) 0 green, 0 calc(var(--ig-elevation-factor, 1) * 1px) calc(var(--ig-elevation-factor, 1) * 18px) 0 blue; + --ig-elevation-7: 0 calc(var(--ig-elevation-factor, 1) * 4px) calc(var(--ig-elevation-factor, 1) * 5px) calc(var(--ig-elevation-factor, 1) * -2px) red, 0 calc(var(--ig-elevation-factor, 1) * 7px) calc(var(--ig-elevation-factor, 1) * 10px) calc(var(--ig-elevation-factor, 1) * 1px) green, 0 calc(var(--ig-elevation-factor, 1) * 2px) calc(var(--ig-elevation-factor, 1) * 16px) calc(var(--ig-elevation-factor, 1) * 1px) blue; + --ig-elevation-8: 0 calc(var(--ig-elevation-factor, 1) * 5px) calc(var(--ig-elevation-factor, 1) * 5px) calc(var(--ig-elevation-factor, 1) * -3px) red, 0 calc(var(--ig-elevation-factor, 1) * 8px) calc(var(--ig-elevation-factor, 1) * 10px) calc(var(--ig-elevation-factor, 1) * 1px) green, 0 calc(var(--ig-elevation-factor, 1) * 3px) calc(var(--ig-elevation-factor, 1) * 14px) calc(var(--ig-elevation-factor, 1) * 2px) blue; + --ig-elevation-9: 0 calc(var(--ig-elevation-factor, 1) * 5px) calc(var(--ig-elevation-factor, 1) * 6px) calc(var(--ig-elevation-factor, 1) * -3px) red, 0 calc(var(--ig-elevation-factor, 1) * 9px) calc(var(--ig-elevation-factor, 1) * 12px) calc(var(--ig-elevation-factor, 1) * 1px) green, 0 calc(var(--ig-elevation-factor, 1) * 3px) calc(var(--ig-elevation-factor, 1) * 16px) calc(var(--ig-elevation-factor, 1) * 2px) blue; + --ig-elevation-10: 0 calc(var(--ig-elevation-factor, 1) * 6px) calc(var(--ig-elevation-factor, 1) * 6px) calc(var(--ig-elevation-factor, 1) * -3px) red, 0 calc(var(--ig-elevation-factor, 1) * 10px) calc(var(--ig-elevation-factor, 1) * 14px) calc(var(--ig-elevation-factor, 1) * 1px) green, 0 calc(var(--ig-elevation-factor, 1) * 4px) calc(var(--ig-elevation-factor, 1) * 18px) calc(var(--ig-elevation-factor, 1) * 3px) blue; + --ig-elevation-11: 0 calc(var(--ig-elevation-factor, 1) * 6px) calc(var(--ig-elevation-factor, 1) * 7px) calc(var(--ig-elevation-factor, 1) * -4px) red, 0 calc(var(--ig-elevation-factor, 1) * 11px) calc(var(--ig-elevation-factor, 1) * 15px) calc(var(--ig-elevation-factor, 1) * 1px) green, 0 calc(var(--ig-elevation-factor, 1) * 4px) calc(var(--ig-elevation-factor, 1) * 20px) calc(var(--ig-elevation-factor, 1) * 3px) blue; + --ig-elevation-12: 0 calc(var(--ig-elevation-factor, 1) * 7px) calc(var(--ig-elevation-factor, 1) * 8px) calc(var(--ig-elevation-factor, 1) * -4px) red, 0 calc(var(--ig-elevation-factor, 1) * 12px) calc(var(--ig-elevation-factor, 1) * 17px) calc(var(--ig-elevation-factor, 1) * 2px) green, 0 calc(var(--ig-elevation-factor, 1) * 5px) calc(var(--ig-elevation-factor, 1) * 22px) calc(var(--ig-elevation-factor, 1) * 4px) blue; + --ig-elevation-13: 0 calc(var(--ig-elevation-factor, 1) * 7px) calc(var(--ig-elevation-factor, 1) * 8px) calc(var(--ig-elevation-factor, 1) * -4px) red, 0 calc(var(--ig-elevation-factor, 1) * 13px) calc(var(--ig-elevation-factor, 1) * 19px) calc(var(--ig-elevation-factor, 1) * 2px) green, 0 calc(var(--ig-elevation-factor, 1) * 5px) calc(var(--ig-elevation-factor, 1) * 24px) calc(var(--ig-elevation-factor, 1) * 4px) blue; + --ig-elevation-14: 0 calc(var(--ig-elevation-factor, 1) * 7px) calc(var(--ig-elevation-factor, 1) * 9px) calc(var(--ig-elevation-factor, 1) * -4px) red, 0 calc(var(--ig-elevation-factor, 1) * 14px) calc(var(--ig-elevation-factor, 1) * 21px) calc(var(--ig-elevation-factor, 1) * 2px) green, 0 calc(var(--ig-elevation-factor, 1) * 5px) calc(var(--ig-elevation-factor, 1) * 26px) calc(var(--ig-elevation-factor, 1) * 4px) blue; + --ig-elevation-15: 0 calc(var(--ig-elevation-factor, 1) * 8px) calc(var(--ig-elevation-factor, 1) * 9px) calc(var(--ig-elevation-factor, 1) * -5px) red, 0 calc(var(--ig-elevation-factor, 1) * 15px) calc(var(--ig-elevation-factor, 1) * 22px) calc(var(--ig-elevation-factor, 1) * 2px) green, 0 calc(var(--ig-elevation-factor, 1) * 6px) calc(var(--ig-elevation-factor, 1) * 28px) calc(var(--ig-elevation-factor, 1) * 5px) blue; + --ig-elevation-16: 0 calc(var(--ig-elevation-factor, 1) * 8px) calc(var(--ig-elevation-factor, 1) * 10px) calc(var(--ig-elevation-factor, 1) * -5px) red, 0 calc(var(--ig-elevation-factor, 1) * 16px) calc(var(--ig-elevation-factor, 1) * 24px) calc(var(--ig-elevation-factor, 1) * 2px) green, 0 calc(var(--ig-elevation-factor, 1) * 6px) calc(var(--ig-elevation-factor, 1) * 30px) calc(var(--ig-elevation-factor, 1) * 5px) blue; + --ig-elevation-17: 0 calc(var(--ig-elevation-factor, 1) * 8px) calc(var(--ig-elevation-factor, 1) * 11px) calc(var(--ig-elevation-factor, 1) * -5px) red, 0 calc(var(--ig-elevation-factor, 1) * 17px) calc(var(--ig-elevation-factor, 1) * 26px) calc(var(--ig-elevation-factor, 1) * 2px) green, 0 calc(var(--ig-elevation-factor, 1) * 6px) calc(var(--ig-elevation-factor, 1) * 32px) calc(var(--ig-elevation-factor, 1) * 5px) blue; + --ig-elevation-18: 0 calc(var(--ig-elevation-factor, 1) * 9px) calc(var(--ig-elevation-factor, 1) * 11px) calc(var(--ig-elevation-factor, 1) * -5px) red, 0 calc(var(--ig-elevation-factor, 1) * 18px) calc(var(--ig-elevation-factor, 1) * 28px) calc(var(--ig-elevation-factor, 1) * 2px) green, 0 calc(var(--ig-elevation-factor, 1) * 7px) calc(var(--ig-elevation-factor, 1) * 34px) calc(var(--ig-elevation-factor, 1) * 6px) blue; + --ig-elevation-19: 0 calc(var(--ig-elevation-factor, 1) * 9px) calc(var(--ig-elevation-factor, 1) * 12px) calc(var(--ig-elevation-factor, 1) * -6px) red, 0 calc(var(--ig-elevation-factor, 1) * 19px) calc(var(--ig-elevation-factor, 1) * 29px) calc(var(--ig-elevation-factor, 1) * 2px) green, 0 calc(var(--ig-elevation-factor, 1) * 7px) calc(var(--ig-elevation-factor, 1) * 36px) calc(var(--ig-elevation-factor, 1) * 6px) blue; + --ig-elevation-20: 0 calc(var(--ig-elevation-factor, 1) * 10px) calc(var(--ig-elevation-factor, 1) * 13px) calc(var(--ig-elevation-factor, 1) * -6px) red, 0 calc(var(--ig-elevation-factor, 1) * 20px) calc(var(--ig-elevation-factor, 1) * 31px) calc(var(--ig-elevation-factor, 1) * 3px) green, 0 calc(var(--ig-elevation-factor, 1) * 8px) calc(var(--ig-elevation-factor, 1) * 38px) calc(var(--ig-elevation-factor, 1) * 7px) blue; + --ig-elevation-21: 0 calc(var(--ig-elevation-factor, 1) * 10px) calc(var(--ig-elevation-factor, 1) * 13px) calc(var(--ig-elevation-factor, 1) * -6px) red, 0 calc(var(--ig-elevation-factor, 1) * 21px) calc(var(--ig-elevation-factor, 1) * 33px) calc(var(--ig-elevation-factor, 1) * 3px) green, 0 calc(var(--ig-elevation-factor, 1) * 8px) calc(var(--ig-elevation-factor, 1) * 40px) calc(var(--ig-elevation-factor, 1) * 7px) blue; + --ig-elevation-22: 0 calc(var(--ig-elevation-factor, 1) * 10px) calc(var(--ig-elevation-factor, 1) * 14px) calc(var(--ig-elevation-factor, 1) * -6px) red, 0 calc(var(--ig-elevation-factor, 1) * 22px) calc(var(--ig-elevation-factor, 1) * 35px) calc(var(--ig-elevation-factor, 1) * 3px) green, 0 calc(var(--ig-elevation-factor, 1) * 8px) calc(var(--ig-elevation-factor, 1) * 42px) calc(var(--ig-elevation-factor, 1) * 7px) blue; + --ig-elevation-23: 0 calc(var(--ig-elevation-factor, 1) * 11px) calc(var(--ig-elevation-factor, 1) * 14px) calc(var(--ig-elevation-factor, 1) * -7px) red, 0 calc(var(--ig-elevation-factor, 1) * 23px) calc(var(--ig-elevation-factor, 1) * 36px) calc(var(--ig-elevation-factor, 1) * 3px) green, 0 calc(var(--ig-elevation-factor, 1) * 9px) calc(var(--ig-elevation-factor, 1) * 44px) calc(var(--ig-elevation-factor, 1) * 8px) blue; + --ig-elevation-24: 0 calc(var(--ig-elevation-factor, 1) * 11px) calc(var(--ig-elevation-factor, 1) * 15px) calc(var(--ig-elevation-factor, 1) * -7px) red, 0 calc(var(--ig-elevation-factor, 1) * 24px) calc(var(--ig-elevation-factor, 1) * 38px) calc(var(--ig-elevation-factor, 1) * 3px) green, 0 calc(var(--ig-elevation-factor, 1) * 9px) calc(var(--ig-elevation-factor, 1) * 46px) calc(var(--ig-elevation-factor, 1) * 8px) blue; +} + +/* END_OUTPUT */ +/* CONTAINED */ +.test-output { + --ig-elevation-1: 0 calc(var(--ig-elevation-factor, 1) * 1px) calc(var(--ig-elevation-factor, 1) * 3px) 0 red, 0 calc(var(--ig-elevation-factor, 1) * 1px) calc(var(--ig-elevation-factor, 1) * 1px) 0 green, 0 calc(var(--ig-elevation-factor, 1) * 2px) calc(var(--ig-elevation-factor, 1) * 1px) calc(var(--ig-elevation-factor, 1) * -1px) blue; +} + +/* END_CONTAINED */ +/* END_ASSERT */ +/* */ +/* Test: should produce CSS variables for a map of shadows */ +/* ASSERT: */ +/* OUTPUT */ +.test-output { + --ig-elevation-small: 0 calc(var(--ig-elevation-factor, 1) * 0.125rem) calc(var(--ig-elevation-factor, 1) * 0.25rem) rgba(0, 0, 0, 0.75); + --ig-elevation-medium: 0 calc(var(--ig-elevation-factor, 1) * 0.25rem) calc(var(--ig-elevation-factor, 1) * 0.5rem) rgba(0, 0, 0, 0.85); + --ig-elevation-large: 0 calc(var(--ig-elevation-factor, 1) * 0.75rem) calc(var(--ig-elevation-factor, 1) * 1rem) rgba(0, 0, 0, 0.95); +} + +/* END_OUTPUT */ +/* EXPECTED */ +.test-output { + --ig-elevation-small: 0 calc(var(--ig-elevation-factor, 1) * 0.125rem) calc(var(--ig-elevation-factor, 1) * 0.25rem) rgba(0, 0, 0, 0.75); + --ig-elevation-medium: 0 calc(var(--ig-elevation-factor, 1) * 0.25rem) calc(var(--ig-elevation-factor, 1) * 0.5rem) rgba(0, 0, 0, 0.85); + --ig-elevation-large: 0 calc(var(--ig-elevation-factor, 1) * 0.75rem) calc(var(--ig-elevation-factor, 1) * 1rem) rgba(0, 0, 0, 0.95); +} + +/* END_EXPECTED */ +/* END_ASSERT */ +/* */ +/* Test: should retrieve a CSS variable elevation by name */ +/* ASSERT: */ +/* OUTPUT */ +.test-output { + box-shadow: var(--ig-elevation-small); +} + +/* END_OUTPUT */ +/* EXPECTED */ +.test-output { + box-shadow: var(--ig-elevation-small); +} + +/* END_EXPECTED */ +/* END_ASSERT */ +/* */ +/* Test: should include box-shadow styles for an elevation level */ +/* ASSERT: */ +/* OUTPUT */ +.test-output { + box-shadow: var(--ig-elevation-small); +} + +/* END_OUTPUT */ +/* EXPECTED */ +.test-output { + box-shadow: var(--ig-elevation-small); +} + +/* END_EXPECTED */ +/* END_ASSERT */ +/* */ +/* */ +/* # Module: BEM */ +/* ------------- */ +/* Test: creates block__element classes */ +/* ASSERT: */ +/* OUTPUT */ +.block { + background: black; +} +.block__element { + color: orange; +} + +/* END_OUTPUT */ +/* EXPECTED */ +.block { + background: black; +} + +.block__element { + color: orange; +} + +/* END_EXPECTED */ +/* END_ASSERT */ +/* */ +/* Test: creates block--modifier classes using the modifier mixins */ +/* ASSERT: */ +/* OUTPUT */ +.block { + background: black; +} +.block--error { + background: red; +} + +.block--error.block--selected { + background: darkred; +} + +/* END_OUTPUT */ +/* EXPECTED */ +.block { + background: black; +} + +.block--error { + background: red; +} + +.block--error.block--selected { + background: darkred; +} + +/* END_EXPECTED */ +/* END_ASSERT */ +/* */ +/* Test: creates block__element--modifier classes using the element mixin */ +/* ASSERT: */ +/* OUTPUT */ +.block { + background: black; +} +.block__element--small { + font-size: 12px; +} + +.block__element--medium { + font-size: 14px; +} + +.block__element--large { + font-size: 16px; +} + +/* END_OUTPUT */ +/* EXPECTED */ +.block { + background: black; +} + +.block__element--small { + font-size: 12px; +} + +.block__element--medium { + font-size: 14px; +} + +.block__element--large { + font-size: 16px; +} + +/* END_EXPECTED */ +/* END_ASSERT */ +/* */ +/* Test: creates negating block__element--modifier classes */ +/* ASSERT: */ +/* OUTPUT */ +.block__element--small:not(.block__element--circle) { + background: blue; +} + +/* END_OUTPUT */ +/* EXPECTED */ +.block__element--small:not(.block__element--circle) { + background: blue; +} + +/* END_EXPECTED */ +/* END_ASSERT */ +/* */ +/* Test: creates multiple element modifier classes using the element mixin */ +/* ASSERT: */ +/* OUTPUT */ +.block { + background: black; +} +.block__element--small.block__element--pink { + color: pink; + font-size: 12px; +} + +/* END_OUTPUT */ +/* EXPECTED */ +.block { + background: black; +} + +.block__element--small.block__element--pink { + color: pink; + font-size: 12px; +} + +/* END_EXPECTED */ +/* END_ASSERT */ +/* */ +/* Test: creates multiple negating element modifier classes */ +/* ASSERT: */ +/* OUTPUT */ +.block__element--small.block__element--pink:not(.block__element--circle, .block__element--large) { + color: pink; + font-size: 12px; +} + +/* END_OUTPUT */ +/* EXPECTED */ +.block__element--small.block__element--pink:not(.block__element--circle, .block__element--large) { + color: pink; + font-size: 12px; +} + +/* END_EXPECTED */ +/* END_ASSERT */ +/* */ +/* Test: overwrites element styles in a modified block */ +/* ASSERT: */ +/* OUTPUT */ +.block { + background: black; +} +.block__element { + color: wheat; +} + +.block--error { + background: red; +} +.block--error .block__element { + color: white; +} + +/* END_OUTPUT */ +/* EXPECTED */ +.block { + background: black; +} + +.block__element { + color: wheat; +} + +.block--error { + background: red; +} + +.block--error .block__element { + color: white; +} + +/* END_EXPECTED */ +/* END_ASSERT */ +/* */ +/* Test: creates negating modifier classes using the mod and mods mixins */ +/* ASSERT: */ +/* OUTPUT */ +.block--checked:not(.block--disabled, .block--indeterminate) { + background: pink; +} + +.block--disabled:not(.block--checked) { + background: gray; +} +.block--disabled:not(.block--checked) .block__element { + color: darkgray; +} + +.block--disabled.block--checked:not(.block--indeterminate) { + background: darkgray; +} + +.block--disabled.block--checked:not(.block--indeterminate, .block--invalid) { + background: black; +} +.block--disabled.block--checked:not(.block--indeterminate, .block--invalid) .block__element { + color: red; +} + +.block--disabled.block--checked:not(.block--indeterminate, .block--invalid) .block__element--orange { + color: orange; +} + +.block--disabled.block--checked:not(.block--indeterminate, .block--invalid) .block__element--rebecca.block__element--purple { + color: rebeccapurple; +} + +/* END_OUTPUT */ +/* EXPECTED */ +.block--checked:not(.block--disabled, .block--indeterminate) { + background: pink; +} + +.block--disabled:not(.block--checked) { + background: gray; +} + +.block--disabled:not(.block--checked) .block__element { + color: darkgray; +} + +.block--disabled.block--checked:not(.block--indeterminate) { + background: darkgray; +} + +.block--disabled.block--checked:not(.block--indeterminate, .block--invalid) { + background: black; +} + +.block--disabled.block--checked:not(.block--indeterminate, .block--invalid) .block__element { + color: red; +} + +.block--disabled.block--checked:not(.block--indeterminate, .block--invalid) .block__element--orange { + color: orange; +} + +.block--disabled.block--checked:not(.block--indeterminate, .block--invalid) .block__element--rebecca.block__element--purple { + color: rebeccapurple; +} + +/* END_EXPECTED */ +/* END_ASSERT */ +/* */ +/* Test: creates element selector inside an attribute selector context */ +/* ASSERT: */ +/* OUTPUT */ +.block[aria-selected=false] .block__element { + display: none; +} + +/* END_OUTPUT */ +/* EXPECTED */ +.block[aria-selected=false] .block__element { + display: none; +} + +/* END_EXPECTED */ +/* END_ASSERT */ +/* */ +/* Test: creates element--modifier selector inside an attribute selector context */ +/* ASSERT: */ +/* OUTPUT */ +.block[aria-selected=false] .block__element--active { + display: block; +} + +/* END_OUTPUT */ +/* EXPECTED */ +.block[aria-selected=false] .block__element--active { + display: block; +} + +/* END_EXPECTED */ +/* END_ASSERT */ +/* */ +/* Test: creates multiple element modifier selectors inside an attribute selector context */ +/* ASSERT: */ +/* OUTPUT */ +.block[aria-selected=false] .block__element--small.block__element--pink { + font-size: 12px; +} + +/* END_OUTPUT */ +/* EXPECTED */ +.block[aria-selected=false] .block__element--small.block__element--pink { + font-size: 12px; +} + +/* END_EXPECTED */ +/* END_ASSERT */ +/* */ +/* Test: creates element selector inside a descendant attribute selector context */ +/* ASSERT: */ +/* OUTPUT */ +.block [aria-selected=true] .block__element { + display: block; +} + +.block [aria-selected=false] .block__element { + display: none; +} + +/* END_OUTPUT */ +/* EXPECTED */ +.block [aria-selected=true] .block__element { + display: block; +} + +.block [aria-selected=false] .block__element { + display: none; +} + +/* END_EXPECTED */ +/* END_ASSERT */ +/* */ +/* Test: should be able to use element classes in modifier body rules */ +/* ASSERT: */ +/* OUTPUT */ +.block__element--circle { + border-radius: 50%; +} + +.block--checked:has(.block__element--circle) { + background: pink; +} + +/* END_OUTPUT */ +/* EXPECTED */ +.block__element--circle { + border-radius: 50%; +} + +.block--checked:has(.block__element--circle) { + background: pink; +} + +/* END_EXPECTED */ +/* END_ASSERT */ +/* */ +/* */ diff --git a/_to_delete/tmp3/perf.css b/_to_delete/tmp3/perf.css new file mode 100644 index 00000000..ce558aab --- /dev/null +++ b/_to_delete/tmp3/perf.css @@ -0,0 +1,242 @@ +:root { + --ig-wcag-a: 0.31; + --ig-wcag-aa: 0.185; + --ig-wcag-aaa: 0.178; + --ig-contrast-level: var(--ig-wcag-aa); + --y: clamp(0, (y / var(--ig-contrast-level) - 1) * -infinity, 1); + --y-contrast: xyz-d65 var(--y) var(--y) var(--y); +} +:root { + --ig-primary-50: rgb(226, 237, 251); + --ig-primary-50-contrast: hsla(from color(from var(--ig-primary-50) var(--y-contrast)) h 0 l/1); + --ig-primary-100: rgb(172, 207, 251); + --ig-primary-100-contrast: hsla(from color(from var(--ig-primary-100) var(--y-contrast)) h 0 l/1); + --ig-primary-200: rgb(117, 180, 250); + --ig-primary-200-contrast: hsla(from color(from var(--ig-primary-200) var(--y-contrast)) h 0 l/1); + --ig-primary-300: rgb(67, 155, 239); + --ig-primary-300-contrast: hsla(from color(from var(--ig-primary-300) var(--y-contrast)) h 0 l/1); + --ig-primary-400: rgb(27, 131, 214); + --ig-primary-400-contrast: hsla(from color(from var(--ig-primary-400) var(--y-contrast)) h 0 l/1); + --ig-primary-500: rgb(9, 109, 183); + --ig-primary-500-contrast: hsla(from color(from var(--ig-primary-500) var(--y-contrast)) h 0 l/1); + --ig-primary-600: rgb(6, 89, 150); + --ig-primary-600-contrast: hsla(from color(from var(--ig-primary-600) var(--y-contrast)) h 0 l/1); + --ig-primary-700: rgb(11, 69, 116); + --ig-primary-700-contrast: hsla(from color(from var(--ig-primary-700) var(--y-contrast)) h 0 l/1); + --ig-primary-800: rgb(12, 48, 80); + --ig-primary-800-contrast: hsla(from color(from var(--ig-primary-800) var(--y-contrast)) h 0 l/1); + --ig-primary-900: rgb(6, 22, 37); + --ig-primary-900-contrast: hsla(from color(from var(--ig-primary-900) var(--y-contrast)) h 0 l/1); + --ig-primary-seed: #09f; + --ig-primary-seed-contrast: hsla(from color(from var(--ig-primary-seed) var(--y-contrast)) h 0 l/1); + --ig-primary-A100: rgb(191, 221, 255); + --ig-primary-A100-contrast: hsla(from color(from var(--ig-primary-A100) var(--y-contrast)) h 0 l/1); + --ig-primary-A200: rgb(73, 164, 255); + --ig-primary-A200-contrast: hsla(from color(from var(--ig-primary-A200) var(--y-contrast)) h 0 l/1); + --ig-primary-A400: rgb(4, 127, 213); + --ig-primary-A400-contrast: hsla(from color(from var(--ig-primary-A400) var(--y-contrast)) h 0 l/1); + --ig-primary-A700: rgb(0, 100, 169); + --ig-primary-A700-contrast: hsla(from color(from var(--ig-primary-A700) var(--y-contrast)) h 0 l/1); + --ig-secondary-50: rgb(254, 230, 235); + --ig-secondary-50-contrast: hsla(from color(from var(--ig-secondary-50) var(--y-contrast)) h 0 l/1); + --ig-secondary-100: rgb(255, 186, 205); + --ig-secondary-100-contrast: hsla(from color(from var(--ig-secondary-100) var(--y-contrast)) h 0 l/1); + --ig-secondary-200: rgb(255, 141, 177); + --ig-secondary-200-contrast: hsla(from color(from var(--ig-secondary-200) var(--y-contrast)) h 0 l/1); + --ig-secondary-300: rgb(253, 92, 150); + --ig-secondary-300-contrast: hsla(from color(from var(--ig-secondary-300) var(--y-contrast)) h 0 l/1); + --ig-secondary-400: rgb(233, 52, 126); + --ig-secondary-400-contrast: hsla(from color(from var(--ig-secondary-400) var(--y-contrast)) h 0 l/1); + --ig-secondary-500: rgb(203, 23, 105); + --ig-secondary-500-contrast: hsla(from color(from var(--ig-secondary-500) var(--y-contrast)) h 0 l/1); + --ig-secondary-600: rgb(168, 13, 85); + --ig-secondary-600-contrast: hsla(from color(from var(--ig-secondary-600) var(--y-contrast)) h 0 l/1); + --ig-secondary-700: rgb(131, 16, 66); + --ig-secondary-700-contrast: hsla(from color(from var(--ig-secondary-700) var(--y-contrast)) h 0 l/1); + --ig-secondary-800: rgb(91, 17, 46); + --ig-secondary-800-contrast: hsla(from color(from var(--ig-secondary-800) var(--y-contrast)) h 0 l/1); + --ig-secondary-900: rgb(43, 9, 21); + --ig-secondary-900-contrast: hsla(from color(from var(--ig-secondary-900) var(--y-contrast)) h 0 l/1); + --ig-secondary-seed: #df1b74; + --ig-secondary-seed-contrast: hsla(from color(from var(--ig-secondary-seed) var(--y-contrast)) h 0 l/1); + --ig-secondary-A100: rgb(255, 205, 220); + --ig-secondary-A100-contrast: hsla(from color(from var(--ig-secondary-A100) var(--y-contrast)) h 0 l/1); + --ig-secondary-A200: rgb(255, 112, 163); + --ig-secondary-A200-contrast: hsla(from color(from var(--ig-secondary-A200) var(--y-contrast)) h 0 l/1); + --ig-secondary-A400: rgb(236, 25, 123); + --ig-secondary-A400-contrast: hsla(from color(from var(--ig-secondary-A400) var(--y-contrast)) h 0 l/1); + --ig-secondary-A700: rgb(191, 1, 96); + --ig-secondary-A700-contrast: hsla(from color(from var(--ig-secondary-A700) var(--y-contrast)) h 0 l/1); + --ig-gray-50: rgb(251, 251, 251); + --ig-gray-50-contrast: hsla(from color(from var(--ig-gray-50) var(--y-contrast)) h 0 l/1); + --ig-gray-100: rgb(247, 247, 247); + --ig-gray-100-contrast: hsla(from color(from var(--ig-gray-100) var(--y-contrast)) h 0 l/1); + --ig-gray-200: rgb(236, 236, 236); + --ig-gray-200-contrast: hsla(from color(from var(--ig-gray-200) var(--y-contrast)) h 0 l/1); + --ig-gray-300: rgb(217, 217, 217); + --ig-gray-300-contrast: hsla(from color(from var(--ig-gray-300) var(--y-contrast)) h 0 l/1); + --ig-gray-400: rgb(193, 193, 193); + --ig-gray-400-contrast: hsla(from color(from var(--ig-gray-400) var(--y-contrast)) h 0 l/1); + --ig-gray-500: rgb(164, 164, 164); + --ig-gray-500-contrast: hsla(from color(from var(--ig-gray-500) var(--y-contrast)) h 0 l/1); + --ig-gray-600: rgb(132, 132, 132); + --ig-gray-600-contrast: hsla(from color(from var(--ig-gray-600) var(--y-contrast)) h 0 l/1); + --ig-gray-700: rgb(99, 99, 99); + --ig-gray-700-contrast: hsla(from color(from var(--ig-gray-700) var(--y-contrast)) h 0 l/1); + --ig-gray-800: rgb(66, 66, 66); + --ig-gray-800-contrast: hsla(from color(from var(--ig-gray-800) var(--y-contrast)) h 0 l/1); + --ig-gray-900: rgb(33, 33, 33); + --ig-gray-900-contrast: hsla(from color(from var(--ig-gray-900) var(--y-contrast)) h 0 l/1); + --ig-gray-seed: #333; + --ig-gray-seed-contrast: hsla(from color(from var(--ig-gray-seed) var(--y-contrast)) h 0 l/1); + --ig-surface-50: rgb(253, 253, 253); + --ig-surface-50-contrast: hsla(from color(from var(--ig-surface-50) var(--y-contrast)) h 0 l/1); + --ig-surface-100: rgb(240, 240, 240); + --ig-surface-100-contrast: hsla(from color(from var(--ig-surface-100) var(--y-contrast)) h 0 l/1); + --ig-surface-200: rgb(228, 228, 228); + --ig-surface-200-contrast: hsla(from color(from var(--ig-surface-200) var(--y-contrast)) h 0 l/1); + --ig-surface-300: rgb(216, 216, 216); + --ig-surface-300-contrast: hsla(from color(from var(--ig-surface-300) var(--y-contrast)) h 0 l/1); + --ig-surface-400: rgb(204, 204, 204); + --ig-surface-400-contrast: hsla(from color(from var(--ig-surface-400) var(--y-contrast)) h 0 l/1); + --ig-surface-500: rgb(255, 255, 255); + --ig-surface-500-contrast: hsla(from color(from var(--ig-surface-500) var(--y-contrast)) h 0 l/1); + --ig-surface-600: rgb(194, 194, 194); + --ig-surface-600-contrast: hsla(from color(from var(--ig-surface-600) var(--y-contrast)) h 0 l/1); + --ig-surface-700: rgb(183, 183, 183); + --ig-surface-700-contrast: hsla(from color(from var(--ig-surface-700) var(--y-contrast)) h 0 l/1); + --ig-surface-800: rgb(174, 174, 174); + --ig-surface-800-contrast: hsla(from color(from var(--ig-surface-800) var(--y-contrast)) h 0 l/1); + --ig-surface-900: rgb(164, 164, 164); + --ig-surface-900-contrast: hsla(from color(from var(--ig-surface-900) var(--y-contrast)) h 0 l/1); + --ig-surface-seed: #fff; + --ig-surface-seed-contrast: hsla(from color(from var(--ig-surface-seed) var(--y-contrast)) h 0 l/1); + --ig-surface-A100: rgb(218, 218, 218); + --ig-surface-A100-contrast: hsla(from color(from var(--ig-surface-A100) var(--y-contrast)) h 0 l/1); + --ig-surface-A200: rgb(161, 161, 161); + --ig-surface-A200-contrast: hsla(from color(from var(--ig-surface-A200) var(--y-contrast)) h 0 l/1); + --ig-surface-A400: rgb(124, 124, 124); + --ig-surface-A400-contrast: hsla(from color(from var(--ig-surface-A400) var(--y-contrast)) h 0 l/1); + --ig-surface-A700: rgb(97, 97, 97); + --ig-surface-A700-contrast: hsla(from color(from var(--ig-surface-A700) var(--y-contrast)) h 0 l/1); + --ig-info-50: rgb(227, 236, 251); + --ig-info-50-contrast: hsla(from color(from var(--ig-info-50) var(--y-contrast)) h 0 l/1); + --ig-info-100: rgb(176, 207, 251); + --ig-info-100-contrast: hsla(from color(from var(--ig-info-100) var(--y-contrast)) h 0 l/1); + --ig-info-200: rgb(124, 179, 252); + --ig-info-200-contrast: hsla(from color(from var(--ig-info-200) var(--y-contrast)) h 0 l/1); + --ig-info-300: rgb(75, 152, 245); + --ig-info-300-contrast: hsla(from color(from var(--ig-info-300) var(--y-contrast)) h 0 l/1); + --ig-info-400: rgb(34, 129, 223); + --ig-info-400-contrast: hsla(from color(from var(--ig-info-400) var(--y-contrast)) h 0 l/1); + --ig-info-500: rgb(13, 107, 193); + --ig-info-500-contrast: hsla(from color(from var(--ig-info-500) var(--y-contrast)) h 0 l/1); + --ig-info-600: rgb(7, 87, 159); + --ig-info-600-contrast: hsla(from color(from var(--ig-info-600) var(--y-contrast)) h 0 l/1); + --ig-info-700: rgb(10, 68, 123); + --ig-info-700-contrast: hsla(from color(from var(--ig-info-700) var(--y-contrast)) h 0 l/1); + --ig-info-800: rgb(12, 47, 85); + --ig-info-800-contrast: hsla(from color(from var(--ig-info-800) var(--y-contrast)) h 0 l/1); + --ig-info-900: rgb(6, 22, 40); + --ig-info-900-contrast: hsla(from color(from var(--ig-info-900) var(--y-contrast)) h 0 l/1); + --ig-info-seed: #1377d5; + --ig-info-seed-contrast: hsla(from color(from var(--ig-info-seed) var(--y-contrast)) h 0 l/1); + --ig-info-A100: rgb(194, 220, 255); + --ig-info-A100-contrast: hsla(from color(from var(--ig-info-A100) var(--y-contrast)) h 0 l/1); + --ig-info-A200: rgb(87, 163, 255); + --ig-info-A200-contrast: hsla(from color(from var(--ig-info-A200) var(--y-contrast)) h 0 l/1); + --ig-info-A400: rgb(10, 124, 225); + --ig-info-A400-contrast: hsla(from color(from var(--ig-info-A400) var(--y-contrast)) h 0 l/1); + --ig-info-A700: rgb(0, 97, 180); + --ig-info-A700-contrast: hsla(from color(from var(--ig-info-A700) var(--y-contrast)) h 0 l/1); + --ig-success-50: rgb(203, 247, 207); + --ig-success-50-contrast: hsla(from color(from var(--ig-success-50) var(--y-contrast)) h 0 l/1); + --ig-success-100: rgb(127, 225, 142); + --ig-success-100-contrast: hsla(from color(from var(--ig-success-100) var(--y-contrast)) h 0 l/1); + --ig-success-200: rgb(94, 197, 112); + --ig-success-200-contrast: hsla(from color(from var(--ig-success-200) var(--y-contrast)) h 0 l/1); + --ig-success-300: rgb(73, 169, 91); + --ig-success-300-contrast: hsla(from color(from var(--ig-success-300) var(--y-contrast)) h 0 l/1); + --ig-success-400: rgb(59, 144, 75); + --ig-success-400-contrast: hsla(from color(from var(--ig-success-400) var(--y-contrast)) h 0 l/1); + --ig-success-500: rgb(48, 120, 62); + --ig-success-500-contrast: hsla(from color(from var(--ig-success-500) var(--y-contrast)) h 0 l/1); + --ig-success-600: rgb(39, 98, 50); + --ig-success-600-contrast: hsla(from color(from var(--ig-success-600) var(--y-contrast)) h 0 l/1); + --ig-success-700: rgb(32, 76, 39); + --ig-success-700-contrast: hsla(from color(from var(--ig-success-700) var(--y-contrast)) h 0 l/1); + --ig-success-800: rgb(24, 53, 28); + --ig-success-800-contrast: hsla(from color(from var(--ig-success-800) var(--y-contrast)) h 0 l/1); + --ig-success-900: rgb(11, 24, 12); + --ig-success-900-contrast: hsla(from color(from var(--ig-success-900) var(--y-contrast)) h 0 l/1); + --ig-success-seed: #4eb862; + --ig-success-seed-contrast: hsla(from color(from var(--ig-success-seed) var(--y-contrast)) h 0 l/1); + --ig-success-A100: rgb(51, 250, 108); + --ig-success-A100-contrast: hsla(from color(from var(--ig-success-A100) var(--y-contrast)) h 0 l/1); + --ig-success-A200: rgb(0, 186, 71); + --ig-success-A200-contrast: hsla(from color(from var(--ig-success-A200) var(--y-contrast)) h 0 l/1); + --ig-success-A400: rgb(0, 143, 53); + --ig-success-A400-contrast: hsla(from color(from var(--ig-success-A400) var(--y-contrast)) h 0 l/1); + --ig-success-A700: rgb(0, 113, 40); + --ig-success-A700-contrast: hsla(from color(from var(--ig-success-A700) var(--y-contrast)) h 0 l/1); + --ig-warn-50: rgb(251, 233, 213); + --ig-warn-50-contrast: hsla(from color(from var(--ig-warn-50) var(--y-contrast)) h 0 l/1); + --ig-warn-100: rgb(247, 195, 133); + --ig-warn-100-contrast: hsla(from color(from var(--ig-warn-100) var(--y-contrast)) h 0 l/1); + --ig-warn-200: rgb(233, 162, 65); + --ig-warn-200-contrast: hsla(from color(from var(--ig-warn-200) var(--y-contrast)) h 0 l/1); + --ig-warn-300: rgb(206, 135, 24); + --ig-warn-300-contrast: hsla(from color(from var(--ig-warn-300) var(--y-contrast)) h 0 l/1); + --ig-warn-400: rgb(177, 114, 4); + --ig-warn-400-contrast: hsla(from color(from var(--ig-warn-400) var(--y-contrast)) h 0 l/1); + --ig-warn-500: rgb(149, 94, 1); + --ig-warn-500-contrast: hsla(from color(from var(--ig-warn-500) var(--y-contrast)) h 0 l/1); + --ig-warn-600: rgb(121, 77, 4); + --ig-warn-600-contrast: hsla(from color(from var(--ig-warn-600) var(--y-contrast)) h 0 l/1); + --ig-warn-700: rgb(94, 60, 9); + --ig-warn-700-contrast: hsla(from color(from var(--ig-warn-700) var(--y-contrast)) h 0 l/1); + --ig-warn-800: rgb(65, 42, 11); + --ig-warn-800-contrast: hsla(from color(from var(--ig-warn-800) var(--y-contrast)) h 0 l/1); + --ig-warn-900: rgb(30, 19, 6); + --ig-warn-900-contrast: hsla(from color(from var(--ig-warn-900) var(--y-contrast)) h 0 l/1); + --ig-warn-seed: #faa419; + --ig-warn-seed-contrast: hsla(from color(from var(--ig-warn-seed) var(--y-contrast)) h 0 l/1); + --ig-warn-A100: rgb(255, 211, 156); + --ig-warn-A100-contrast: hsla(from color(from var(--ig-warn-A100) var(--y-contrast)) h 0 l/1); + --ig-warn-A200: rgb(222, 144, 3); + --ig-warn-A200-contrast: hsla(from color(from var(--ig-warn-A200) var(--y-contrast)) h 0 l/1); + --ig-warn-A400: rgb(172, 110, 0); + --ig-warn-A400-contrast: hsla(from color(from var(--ig-warn-A400) var(--y-contrast)) h 0 l/1); + --ig-warn-A700: rgb(136, 86, 0); + --ig-warn-A700-contrast: hsla(from color(from var(--ig-warn-A700) var(--y-contrast)) h 0 l/1); + --ig-error-50: rgb(254, 230, 230); + --ig-error-50-contrast: hsla(from color(from var(--ig-error-50) var(--y-contrast)) h 0 l/1); + --ig-error-100: rgb(255, 187, 187); + --ig-error-100-contrast: hsla(from color(from var(--ig-error-100) var(--y-contrast)) h 0 l/1); + --ig-error-200: rgb(255, 144, 147); + --ig-error-200-contrast: hsla(from color(from var(--ig-error-200) var(--y-contrast)) h 0 l/1); + --ig-error-300: rgb(254, 97, 109); + --ig-error-300-contrast: hsla(from color(from var(--ig-error-300) var(--y-contrast)) h 0 l/1); + --ig-error-400: rgb(236, 56, 81); + --ig-error-400-contrast: hsla(from color(from var(--ig-error-400) var(--y-contrast)) h 0 l/1); + --ig-error-500: rgb(207, 27, 62); + --ig-error-500-contrast: hsla(from color(from var(--ig-error-500) var(--y-contrast)) h 0 l/1); + --ig-error-600: rgb(172, 15, 48); + --ig-error-600-contrast: hsla(from color(from var(--ig-error-600) var(--y-contrast)) h 0 l/1); + --ig-error-700: rgb(134, 17, 38); + --ig-error-700-contrast: hsla(from color(from var(--ig-error-700) var(--y-contrast)) h 0 l/1); + --ig-error-800: rgb(93, 17, 27); + --ig-error-800-contrast: hsla(from color(from var(--ig-error-800) var(--y-contrast)) h 0 l/1); + --ig-error-900: rgb(44, 9, 12); + --ig-error-900-contrast: hsla(from color(from var(--ig-error-900) var(--y-contrast)) h 0 l/1); + --ig-error-seed: #ff134a; + --ig-error-seed-contrast: hsla(from color(from var(--ig-error-seed) var(--y-contrast)) h 0 l/1); + --ig-error-A100: rgb(255, 206, 206); + --ig-error-A100-contrast: hsla(from color(from var(--ig-error-A100) var(--y-contrast)) h 0 l/1); + --ig-error-A200: rgb(255, 117, 125); + --ig-error-A200-contrast: hsla(from color(from var(--ig-error-A200) var(--y-contrast)) h 0 l/1); + --ig-error-A400: rgb(240, 31, 72); + --ig-error-A400-contrast: hsla(from color(from var(--ig-error-A400) var(--y-contrast)) h 0 l/1); + --ig-error-A700: rgb(195, 1, 53); + --ig-error-A700-contrast: hsla(from color(from var(--ig-error-A700) var(--y-contrast)) h 0 l/1); +} diff --git a/_to_delete/tmp3/perf.scss b/_to_delete/tmp3/perf.scss new file mode 100644 index 00000000..6bc23aa9 --- /dev/null +++ b/_to_delete/tmp3/perf.scss @@ -0,0 +1,3 @@ +@use '../sass/color' as *; +$p: palette($primary: #09f, $secondary: #df1b74, $surface: #fff, $gray: #333); +:root { @include palette($p); } diff --git a/_to_delete/tmp3/s4.scss b/_to_delete/tmp3/s4.scss new file mode 100644 index 00000000..44a3dbb3 --- /dev/null +++ b/_to_delete/tmp3/s4.scss @@ -0,0 +1,9 @@ +@use '../sass/color' as *; +$V: ('50','100','200','300','400','500','600','700','800','900'); +$white: palette($primary: #09f, $secondary: #09f, $surface: #fff, $gray: #333); +$black: palette($primary: #09f, $secondary: #09f, $surface: #000, $gray: #ccc); +$off: palette($primary: #09f, $secondary: #09f, $surface: #f8f8fa, $gray: #333); +surface-white { @each $v in $V { #{$v}: color($white, surface, $v); } } +surface-black { @each $v in $V { #{$v}: color($black, surface, $v); } } +surface-off { @each $v in $V { #{$v}: color($off, surface, $v); } } +gray-white { @each $v in $V { #{$v}: color($white, gray, $v); } } diff --git a/_to_delete/tmp3/s5.scss b/_to_delete/tmp3/s5.scss new file mode 100644 index 00000000..18c86eaf --- /dev/null +++ b/_to_delete/tmp3/s5.scss @@ -0,0 +1,18 @@ +@use '../sass/color' as *; +$V: ('50','100','200','300','400','500','600','700','800','900'); +// 1. preset name per family +$a: palette($primary: #09f, $secondary: #09f, $surface: #fff, $gray: #333, $ladders: ('gray': 'carbon')); +// 2. one preset for every family +$b: palette($primary: #09f, $secondary: #09f, $surface: #fff, $gray: #333, $ladders: 'tailwind'); +// 3. a bare curve +$c: palette($primary: #09f, $secondary: #09f, $surface: #fff, $gray: #333, $ladders: ('gray': (0.53, 0, 0.825, 0.785))); +// 4. an explicit spec +$d: palette($primary: #09f, $secondary: #09f, $surface: #fff, $gray: #333, $ladders: ('gray': (range: (1.1, 12), curve: null))); +// 5. shades() directly +$e: shades('brand', #09f, $IColorShades, $ladder: 'carbon'); +gray-carbon { @each $v in $V { #{$v}: color($a, gray, $v); } } +gray-tailwind { @each $v in $V { #{$v}: color($b, gray, $v); } } +primary-tailwind { @each $v in $V { #{$v}: color($b, primary, $v); } } +gray-curve { @each $v in $V { #{$v}: color($c, gray, $v); } } +gray-spec { @each $v in $V { #{$v}: color($d, gray, $v); } } +brand-direct { @each $v in $V { #{$v}: map-get($e, '#{$v}-raw'); } } diff --git a/_to_delete/tmp3/shades.html b/_to_delete/tmp3/shades.html new file mode 100644 index 00000000..f9f12fb7 --- /dev/null +++ b/_to_delete/tmp3/shades.html @@ -0,0 +1,436 @@ + + +Shade generators +
+

Shade generators, side by side

+

Compiled from the library. Numbers are WCAG contrast against white for color ramps, +and against the surface for the neutral and surface families. Every value is a concrete color — +the generator resolves them at build time.

+ + +

Color ramps

+ +
+

Framework primary

#0099ff + lands on 300
+
+ +
+

gamut-relative

+
50
100
200
300
400
500
600
700
800
900
+ +
+ +
+

legacy

+
50
100
200
300
400
500
600
700
800
900
+ +
+
+
+

accent track

A100
A200
A400
A700
+

legacy accents

A100
A200
A400
A700
+
+
+
+

Framework secondary

#df1b74 + lands on 400
+
+ +
+

gamut-relative

+
50
100
200
300
400
500
600
700
800
900
+ +
+ +
+

legacy

+
50
100
200
300
400
500
600
700
800
900
+ +
+
+
+

accent track

A100
A200
A400
A700
+

legacy accents

A100
A200
A400
A700
+
+
+
+

Warn

#faa419 + lands on 200
+
+ +
+

gamut-relative

+
50
100
200
300
400
500
600
700
800
900
+ +
+ +
+

legacy

+
50
100
200
300
400
500
600
700
800
900
+ +
+
+
+

accent track

A100
A200
A400
A700
+

legacy accents

A100
A200
A400
A700
+
+
+
+

Success

#4eb862 + lands on 200
+
+ +
+

gamut-relative

+
50
100
200
300
400
500
600
700
800
900
+ +
+ +
+

legacy

+
50
100
200
300
400
500
600
700
800
900
+ +
+
+
+

accent track

A100
A200
A400
A700
+

legacy accents

A100
A200
A400
A700
+
+
+
+

Near-white seed

#ffe9b0 + lands on 50
+
+ +
+

gamut-relative

+
50
100
200
300
400
500
600
700
800
900
+ +
+ +
+

legacy

+
50
100
200
300
400
500
600
700
800
900
+ +
+
+
+

accent track

A100
A200
A400
A700
+

legacy accents

A100
A200
A400
A700
+
+
+
+

Near-black seed

#141225 + lands on 900
+
+ +
+

gamut-relative

+
50
100
200
300
400
500
600
700
800
900
+ +
+ +
+

legacy

+
50
100
200
300
400
500
600
700
800
900
+ +
+
+
+

accent track

A100
A200
A400
A700
+

legacy accents

A100
A200
A400
A700
+
+
+
+

Neon

#00ff00 + lands on 100
+
+ +
+

gamut-relative

+
50
100
200
300
400
500
600
700
800
900
+ +
+ +
+

legacy

+
50
100
200
300
400
500
600
700
800
900
+ +
+
+
+

accent track

A100
A200
A400
A700
+

legacy accents

A100
A200
A400
A700
+
+
+
+

Washed out

#a99bb0 + lands on 300
+
+ +
+

gamut-relative

+
50
100
200
300
400
500
600
700
800
900
+ +
+ +
+

legacy

+
50
100
200
300
400
500
600
700
800
900
+ +
+
+
+

accent track

A100
A200
A400
A700
+

legacy accents

A100
A200
A400
A700
+
+
+
+

Pure gray

#8a8a8a + lands on 400
+
+ +
+

gamut-relative

+
50
100
200
300
400
500
600
700
800
900
+ +
+ +
+

legacy

+
50
100
200
300
400
500
600
700
800
900
+ +
+
+
+

accent track

A100
A200
A400
A700
+

legacy accents

A100
A200
A400
A700
+
+
+ +

Ladder flavors

+

The same generator, a different rhythm. Each curve was fitted to the scale it is named +after; material reproduces this library's original grayscale, which is why it is the default +for gray. Pass one with $ladders: ('gray': 'carbon'), or hand in your own +cubic-bezier control points.

+
+ +
+

even

+
50
100
200
300
400
500
600
700
800
900
+
+
+

material

+
50
100
200
300
400
500
600
700
800
900
+
+
+

tailwind

+
50
100
200
300
400
500
600
700
800
900
+
+
+

carbon

+
50
100
200
300
400
500
600
700
800
900
+
+
+ +

Neutral and surface families

+ +
+

Pure white surface

#ffffff
+
+ +
+

gray · gamut-relative

+
50
100
200
300
400
500
600
700
800
900
+

anchored to the surface, so 50 always sits nearest the background

+
+ +
+

gray · legacy

+
50
100
200
300
400
500
600
700
800
900
+ +
+
+
+ +
+

surface · gamut-relative

+
50
100
200
300
400
500
600
700
800
900
+

500 is the background; every other shade is a layer on it, 50 the faintest through 900 the strongest

+
+ +
+

surface · legacy

+
50
100
200
300
400
500
600
700
800
900
+ +
+
+
+
+

Off-white surface

#f8f8fa
+
+ +
+

gray · gamut-relative

+
50
100
200
300
400
500
600
700
800
900
+

anchored to the surface, so 50 always sits nearest the background

+
+ +
+

gray · legacy

+
50
100
200
300
400
500
600
700
800
900
+ +
+
+
+ +
+

surface · gamut-relative

+
50
100
200
300
400
500
600
700
800
900
+

500 is the background; every other shade is a layer on it, 50 the faintest through 900 the strongest

+
+ +
+

surface · legacy

+
50
100
200
300
400
500
600
700
800
900
+ +
+
+
+
+

Dark surface

#1a1a24
+
+ +
+

gray · gamut-relative

+
50
100
200
300
400
500
600
700
800
900
+

anchored to the surface, so 50 always sits nearest the background

+
+ +
+

gray · legacy

+
50
100
200
300
400
500
600
700
800
900
+ +
+
+
+ +
+

surface · gamut-relative

+
50
100
200
300
400
500
600
700
800
900
+

500 is the background; every other shade is a layer on it, 50 the faintest through 900 the strongest

+
+ +
+

surface · legacy

+
50
100
200
300
400
500
600
700
800
900
+ +
+
+
+
+

Pure black surface

#000000
+
+ +
+

gray · gamut-relative

+
50
100
200
300
400
500
600
700
800
900
+

anchored to the surface, so 50 always sits nearest the background

+
+ +
+

gray · legacy

+
50
100
200
300
400
500
600
700
800
900
+ +
+
+
+ +
+

surface · gamut-relative

+
50
100
200
300
400
500
600
700
800
900
+

500 is the background; every other shade is a layer on it, 50 the faintest through 900 the strongest

+
+ +
+

surface · legacy

+
50
100
200
300
400
500
600
700
800
900
+ +
+
+
+ +
Generated by .scripts/previewShades.mjs. The palettes bundled with the library +stay on the legacy generator, so shipped themes are unchanged.
+
+ \ No newline at end of file diff --git a/_to_delete/tmp3/sweep.mjs b/_to_delete/tmp3/sweep.mjs new file mode 100644 index 00000000..7b65497c --- /dev/null +++ b/_to_delete/tmp3/sweep.mjs @@ -0,0 +1,53 @@ +import * as sass from "sass"; +const ROOT="."; +const SH=["50","100","200","300","400","500","600","700","800","900"]; +const LAYERS=["50","100","200","300","400","600","700","800","900"]; +const SEEDS=["#0099ff","#df1b74","#faa419","#4eb862","#7c3aed","#e11d48","#0d9488","#a99bb0", + "#00ff00","#ffe9b0","#141225","#8a8a8a","#ff00ff","#00ffff","#123456","#fefefe","#010203","#c0ffee"]; +const SURFACES=["#ffffff","#fcfcfd","#f8f8fa","#eeeeee","#1a1a24","#000000","#0d1117","#808080"]; +const warn=[]; +const run=(b)=>{const css=sass.compileString(`@use 'sass:map';\n@use 'sass/color' as *;\n${b}`, + {loadPaths:[ROOT],logger:{warn:(m)=>warn.push(m.split("\n")[0])}}).css; + const o={};for(const l of css.split("\n")){const m=l.match(/^\s*([\w-]+):\s*(.+);\s*$/);if(m)o[m[1]]=m[2].trim();}return o;}; +const hx=(s)=>{const m=s.match(/^#?([0-9a-f]{3,6})$/i)||s.match(/rgb\((\d+),\s*(\d+),\s*(\d+)\)/i); + if(!m)return null; + if(m.length===2){let h=m[1];if(h.length===3)h=[...h].map(c=>c+c).join("");return [0,2,4].map(i=>parseInt(h.slice(i,i+2),16));} + return [1,2,3].map(i=>+m[i]);}; +const NAMED={white:[255,255,255],black:[0,0,0],lightgray:[211,211,211]}; +const col=(s)=>NAMED[s]||hx(s); +const lin=v=>(v/=255)<=0.03928?v/12.92:Math.pow((v+0.055)/1.055,2.4); +const lum=([r,g,b])=>0.2126*lin(r)+0.7152*lin(g)+0.0722*lin(b); +const cr=(a,b)=>{const x=lum(a)+0.05,y=lum(b)+0.05;return Math.max(x,y)/Math.min(x,y);}; + +let aaF=0,aaT=0,dup=0; +for(const seed of SEEDS){ + const d=run(`$p: palette($primary: ${seed}, $secondary: ${seed}, $surface: #fff, $gray: #333); + $s: map.get($p,'primary'); out { ${SH.map(v=>`s-${v}: #{map.get($s,'${v}-raw')};`).join("")} }`); + const c=SH.map(v=>col(d[`s-${v}`])); + if(new Set(c.map(String)).size!==c.length){dup++;console.log("DUP",seed);} + for(let i=0;i<5;i++){aaT++;if(cr(c[i],c[i+5])<4.5){aaF++;console.log("AA fail",seed,SH[i],SH[i+5],cr(c[i],c[i+5]).toFixed(2));}} +} +console.log(`color ramps: ${SEEDS.length} seeds | AA 5-rung failures ${aaF}/${aaT} | duplicate-shade families ${dup}\n`); + +console.log("surface + gray across backgrounds:"); +for(const bg of SURFACES){ + const d=run(`$p: palette($primary: #09f, $secondary: #09f, $surface: ${bg}, $gray: #333); + $g: map.get($p,'gray'); $s: map.get($p,'surface'); + out { ${SH.map(v=>`g-${v}: #{map.get($g,'${v}-raw')};`).join("")} + ${SH.map(v=>`s-${v}: #{map.get($s,'${v}-raw')};`).join("")} }`); + const g=SH.map(v=>col(d[`g-${v}`])), s=SH.map(v=>col(d[`s-${v}`])), b=col(bg); + const layers=LAYERS.map(v=>col(d[`s-${v}`])); + let mono=true,prev=1; + for(const l of layers){const a=cr(l,b);if(a<=prev){mono=false}prev=a;} + console.log(` ${bg} gray ${new Set(g.map(String)).size}/10 distinct, 50-nearest ${cr(g[0],b)`g-${v}: #{map.get($g,'${v}-raw')};`).join("")} }`); + const g=SH.map(v=>col(d[`g-${v}`])); + let f=0; for(let i=0;i<5;i++) if(cr(g[i],g[i+5])<4.5) f++; + console.log(` ${p.padEnd(9)} ${SH.map(v=>d[`g-${v}`]).join(" ")} AA ${5-f}/5`); +} +console.log("\nwarnings:",[...new Set(warn)].length?[...new Set(warn)]:"none"); diff --git a/_to_delete/tmp3/tests.css b/_to_delete/tmp3/tests.css new file mode 100644 index 00000000..dc94aac4 --- /dev/null +++ b/_to_delete/tmp3/tests.css @@ -0,0 +1,8052 @@ +@charset "UTF-8"; +/* # Module: Animations */ +/* -------------------- */ +/* Test: should include a keyframe animation only once at the root of the stylesheet */ +/* ASSERT: */ +/* OUTPUT */ +@keyframes test-keyframes { + 0% { + color: red; + } + 100% { + color: blue; + } +} +/* END_OUTPUT */ +/* EXPECTED */ +@keyframes test-keyframes { + 0% { + color: red; + } + 100% { + color: blue; + } +} +/* END_EXPECTED */ +/* END_ASSERT */ +/* */ +/* Test: should include a list of animations using the animation mixin */ +/* ASSERT: */ +/* OUTPUT */ +.test-output { + animation: "test-keyframes" 2s ease-out, "bounce-out" 1s ease-out; +} + +/* END_OUTPUT */ +/* EXPECTED */ +.test-output { + animation: "test-keyframes" 2s ease-out, "bounce-out" 1s ease-out; +} + +/* END_EXPECTED */ +/* END_ASSERT */ +/* */ +/* */ +/* # Module: Color */ +/* --------------- */ +/* # Module: Color :: base */ +/* ----------------------- */ +/* Test: should mix two colors to produce an opaque color */ +/* ✔ [assert-equal] should mix two colors to produce an opaque color */ +/* ✔ [assert-equal] should mix two colors to produce an opaque color */ +/* */ +/* Test: converts a color to a list of HSL values */ +/* ✔ [assert-equal] converts a color to a list of HSL values */ +/* */ +/* */ +/* # Module: Color :: charts */ +/* ------------------------- */ +/* Test: should resolve regular chart brushes */ +/* ✔ [assert-equal] should resolve regular chart brushes */ +/* */ +/* Test: should resolve color-blind chart brushes */ +/* ✔ [assert-equal] should resolve color-blind chart brushes */ +/* */ +/* */ +/* # Module: Color :: contrast */ +/* --------------------------- */ +/* Test: should return an adaptive contrast color from a hex value */ +/* ✔ [assert-equal] should return an adaptive contrast color from a hex value */ +/* */ +/* Test: should return an adaptive contrast color from an hsl value */ +/* ✔ [assert-equal] should return an adaptive contrast color from an hsl value */ +/* */ +/* Test: should return an adaptive contrast color from a CSS variable value */ +/* ✔ [assert-equal] should return an adaptive contrast color from a CSS variable value */ +/* */ +/* Test: should return the passed background value if no valid colors are provided */ +/* ✔ [assert-equal] should return the passed background value if no valid colors are provided */ +/* */ +/* Test: should return black for a white background */ +/* ✔ [assert-equal] should return black for a white background */ +/* */ +/* Test: should return white for a black background */ +/* ✔ [assert-equal] should return white for a black background */ +/* */ +/* Test: should return a contrasting color for a given background regardless of level case */ +/* ✔ [assert-equal] should return a contrasting color for a given background regardless of level case */ +/* ✔ [assert-equal] should return a contrasting color for a given background regardless of level case */ +/* ✔ [assert-equal] should return a contrasting color for a given background regardless of level case */ +/* */ +/* Test: returns the best contrast color from a list of candidates */ +/* ✔ [assert-equal] returns the best contrast color from a list of candidates */ +/* */ +/* Test: should return an AAA contrasting color for a given background */ +/* ✔ [assert-equal] should return an AAA contrasting color for a given background */ +/* */ +/* Test: should return an AA contrasting color for a given background */ +/* ✔ [assert-equal] should return an AA contrasting color for a given background */ +/* */ +/* */ +/* # Module: Color :: palette */ +/* -------------------------- */ +/* Test: should return a shade of type color w/ palette as only argument */ +/* ✔ [assert-equal] should return a shade of type color w/ palette as only argument */ +/* */ +/* Test: should return a shade of type color string w/ palette and color as only arguments */ +/* ✔ [assert-equal] should return a shade of type color string w/ palette and color as only arguments */ +/* */ +/* Test: should return a shade of type string w/ all arguments passed */ +/* ✔ [assert-equal] should return a shade of type string w/ all arguments passed */ +/* ✔ [assert-unequal] should return a shade of type string w/ all arguments passed */ +/* */ +/* Test: should return a shade as CSS variable w/o arguments */ +/* ✔ [assert-equal] should return a shade as CSS variable w/o arguments */ +/* ✔ [assert-equal] should return a shade as CSS variable w/o arguments */ +/* */ +/* Test: should return a shade as CSS variable w/ color as only argument */ +/* ✔ [assert-equal] should return a shade as CSS variable w/ color as only argument */ +/* ✔ [assert-equal] should return a shade as CSS variable w/ color as only argument */ +/* */ +/* Test: should return a shade of type string as CSS var w/ color and variant as only arguments */ +/* ✔ [assert-equal] should return a shade of type string as CSS var w/ color and variant as only arguments */ +/* ✔ [assert-equal] should return a shade of type string as CSS var w/ color and variant as only arguments */ +/* */ +/* Test: should return a contrast shade w/ palette as only argument */ +/* ✔ [assert-equal] should return a contrast shade w/ palette as only argument */ +/* */ +/* Test: should return a contrast shade of type string as CSS var w/ color and variant as only arguments */ +/* ✔ [assert-equal] should return a contrast shade of type string as CSS var w/ color and variant as only arguments */ +/* ✔ [assert-equal] should return a contrast shade of type string as CSS var w/ color and variant as only arguments */ +/* */ +/* Test: should retrieve colors from a palette regadless of type of key */ +/* ✔ [assert-true] should retrieve colors from a palette regadless of type of key */ +/* ✔ [assert-equal] should retrieve colors from a palette regadless of type of key */ +/* ✔ [assert-true] should retrieve colors from a palette regadless of type of key */ +/* ✔ [assert-equal] should retrieve colors from a palette regadless of type of key */ +/* ✔ [assert-true] should retrieve colors from a palette regadless of type of key */ +/* ✔ [assert-equal] should retrieve colors from a palette regadless of type of key */ +/* ✔ [assert-true] should retrieve colors from a palette regadless of type of key */ +/* ✔ [assert-equal] should retrieve colors from a palette regadless of type of key */ +/* */ +/* Test: should generate an HSL color shade from a given base color */ +/* ✔ [assert-equal] should generate an HSL color shade from a given base color */ +/* */ +/* Test: should generate an a contrasting HSL grayscale shade for a given surface color */ +/* ✔ [assert-equal] should generate an a contrasting HSL grayscale shade for a given surface color */ +/* ✔ [assert-equal] should generate an a contrasting HSL grayscale shade for a given surface color */ +/* */ +/* Test: should generate a valid palette */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] map */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] map */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] map */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] map */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] map */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] map */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] map */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] map */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] map */ +/* ✔ [assert-true] should generate a valid palette */ +/* ✔ [assert-true] color */ +/* ✔ [assert-true] string */ +/* */ +/* Test: should generate correct CSS variables for color and grayscale shades in a palette */ +/* ASSERT: */ +/* OUTPUT */ +:root { + --ig-wcag-a: 0.31; + --ig-wcag-aa: 0.185; + --ig-wcag-aaa: 0.178; + --ig-contrast-level: var(--ig-wcag-aa); + --y: clamp(0, (y / var(--ig-contrast-level) - 1) * -infinity, 1); + --y-contrast: xyz-d65 var(--y) var(--y) var(--y); +} + +:root { + --ig-primary-50: rgb(226, 237, 251); + --ig-primary-50-contrast: hsla(from color(from var(--ig-primary-50) var(--y-contrast)) h 0 l/1); + --ig-primary-100: rgb(172, 207, 251); + --ig-primary-100-contrast: hsla(from color(from var(--ig-primary-100) var(--y-contrast)) h 0 l/1); + --ig-primary-200: rgb(117, 180, 250); + --ig-primary-200-contrast: hsla(from color(from var(--ig-primary-200) var(--y-contrast)) h 0 l/1); + --ig-primary-300: rgb(67, 155, 239); + --ig-primary-300-contrast: hsla(from color(from var(--ig-primary-300) var(--y-contrast)) h 0 l/1); + --ig-primary-400: rgb(27, 131, 214); + --ig-primary-400-contrast: hsla(from color(from var(--ig-primary-400) var(--y-contrast)) h 0 l/1); + --ig-primary-500: rgb(9, 109, 183); + --ig-primary-500-contrast: hsla(from color(from var(--ig-primary-500) var(--y-contrast)) h 0 l/1); + --ig-primary-600: rgb(6, 89, 150); + --ig-primary-600-contrast: hsla(from color(from var(--ig-primary-600) var(--y-contrast)) h 0 l/1); + --ig-primary-700: rgb(11, 69, 116); + --ig-primary-700-contrast: hsla(from color(from var(--ig-primary-700) var(--y-contrast)) h 0 l/1); + --ig-primary-800: rgb(12, 48, 80); + --ig-primary-800-contrast: hsla(from color(from var(--ig-primary-800) var(--y-contrast)) h 0 l/1); + --ig-primary-900: rgb(6, 22, 37); + --ig-primary-900-contrast: hsla(from color(from var(--ig-primary-900) var(--y-contrast)) h 0 l/1); + --ig-primary-seed: #09f; + --ig-primary-seed-contrast: hsla(from color(from var(--ig-primary-seed) var(--y-contrast)) h 0 l/1); + --ig-primary-A100: rgb(191, 221, 255); + --ig-primary-A100-contrast: hsla(from color(from var(--ig-primary-A100) var(--y-contrast)) h 0 l/1); + --ig-primary-A200: rgb(73, 164, 255); + --ig-primary-A200-contrast: hsla(from color(from var(--ig-primary-A200) var(--y-contrast)) h 0 l/1); + --ig-primary-A400: rgb(4, 127, 213); + --ig-primary-A400-contrast: hsla(from color(from var(--ig-primary-A400) var(--y-contrast)) h 0 l/1); + --ig-primary-A700: rgb(0, 100, 169); + --ig-primary-A700-contrast: hsla(from color(from var(--ig-primary-A700) var(--y-contrast)) h 0 l/1); + --ig-secondary-50: rgb(240, 235, 245); + --ig-secondary-50-contrast: hsla(from color(from var(--ig-secondary-50) var(--y-contrast)) h 0 l/1); + --ig-secondary-100: rgb(213, 198, 231); + --ig-secondary-100-contrast: hsla(from color(from var(--ig-secondary-100) var(--y-contrast)) h 0 l/1); + --ig-secondary-200: rgb(190, 166, 221); + --ig-secondary-200-contrast: hsla(from color(from var(--ig-secondary-200) var(--y-contrast)) h 0 l/1); + --ig-secondary-300: rgb(168, 136, 211); + --ig-secondary-300-contrast: hsla(from color(from var(--ig-secondary-300) var(--y-contrast)) h 0 l/1); + --ig-secondary-400: rgb(146, 110, 198); + --ig-secondary-400-contrast: hsla(from color(from var(--ig-secondary-400) var(--y-contrast)) h 0 l/1); + --ig-secondary-500: rgb(125, 87, 177); + --ig-secondary-500-contrast: hsla(from color(from var(--ig-secondary-500) var(--y-contrast)) h 0 l/1); + --ig-secondary-600: rgb(103, 69, 150); + --ig-secondary-600-contrast: hsla(from color(from var(--ig-secondary-600) var(--y-contrast)) h 0 l/1); + --ig-secondary-700: rgb(80, 53, 117); + --ig-secondary-700-contrast: hsla(from color(from var(--ig-secondary-700) var(--y-contrast)) h 0 l/1); + --ig-secondary-800: rgb(56, 38, 81); + --ig-secondary-800-contrast: hsla(from color(from var(--ig-secondary-800) var(--y-contrast)) h 0 l/1); + --ig-secondary-900: rgb(25, 17, 38); + --ig-secondary-900-contrast: hsla(from color(from var(--ig-secondary-900) var(--y-contrast)) h 0 l/1); + --ig-secondary-seed: #97c; + --ig-secondary-seed-contrast: hsla(from color(from var(--ig-secondary-seed) var(--y-contrast)) h 0 l/1); + --ig-secondary-A100: rgb(233, 209, 255); + --ig-secondary-A100-contrast: hsla(from color(from var(--ig-secondary-A100) var(--y-contrast)) h 0 l/1); + --ig-secondary-A200: rgb(192, 134, 255); + --ig-secondary-A200-contrast: hsla(from color(from var(--ig-secondary-A200) var(--y-contrast)) h 0 l/1); + --ig-secondary-A400: rgb(163, 75, 255); + --ig-secondary-A400-contrast: hsla(from color(from var(--ig-secondary-A400) var(--y-contrast)) h 0 l/1); + --ig-secondary-A700: rgb(139, 23, 233); + --ig-secondary-A700-contrast: hsla(from color(from var(--ig-secondary-A700) var(--y-contrast)) h 0 l/1); + --ig-gray-50: rgb(251, 251, 251); + --ig-gray-50-contrast: hsla(from color(from var(--ig-gray-50) var(--y-contrast)) h 0 l/1); + --ig-gray-100: rgb(247, 247, 247); + --ig-gray-100-contrast: hsla(from color(from var(--ig-gray-100) var(--y-contrast)) h 0 l/1); + --ig-gray-200: rgb(236, 236, 236); + --ig-gray-200-contrast: hsla(from color(from var(--ig-gray-200) var(--y-contrast)) h 0 l/1); + --ig-gray-300: rgb(217, 217, 217); + --ig-gray-300-contrast: hsla(from color(from var(--ig-gray-300) var(--y-contrast)) h 0 l/1); + --ig-gray-400: rgb(193, 193, 193); + --ig-gray-400-contrast: hsla(from color(from var(--ig-gray-400) var(--y-contrast)) h 0 l/1); + --ig-gray-500: rgb(164, 164, 164); + --ig-gray-500-contrast: hsla(from color(from var(--ig-gray-500) var(--y-contrast)) h 0 l/1); + --ig-gray-600: rgb(132, 132, 132); + --ig-gray-600-contrast: hsla(from color(from var(--ig-gray-600) var(--y-contrast)) h 0 l/1); + --ig-gray-700: rgb(99, 99, 99); + --ig-gray-700-contrast: hsla(from color(from var(--ig-gray-700) var(--y-contrast)) h 0 l/1); + --ig-gray-800: rgb(66, 66, 66); + --ig-gray-800-contrast: hsla(from color(from var(--ig-gray-800) var(--y-contrast)) h 0 l/1); + --ig-gray-900: rgb(33, 33, 33); + --ig-gray-900-contrast: hsla(from color(from var(--ig-gray-900) var(--y-contrast)) h 0 l/1); + --ig-gray-seed: #000; + --ig-gray-seed-contrast: hsla(from color(from var(--ig-gray-seed) var(--y-contrast)) h 0 l/1); + --ig-surface-50: rgb(253, 253, 253); + --ig-surface-50-contrast: hsla(from color(from var(--ig-surface-50) var(--y-contrast)) h 0 l/1); + --ig-surface-100: rgb(240, 240, 240); + --ig-surface-100-contrast: hsla(from color(from var(--ig-surface-100) var(--y-contrast)) h 0 l/1); + --ig-surface-200: rgb(228, 228, 228); + --ig-surface-200-contrast: hsla(from color(from var(--ig-surface-200) var(--y-contrast)) h 0 l/1); + --ig-surface-300: rgb(216, 216, 216); + --ig-surface-300-contrast: hsla(from color(from var(--ig-surface-300) var(--y-contrast)) h 0 l/1); + --ig-surface-400: rgb(204, 204, 204); + --ig-surface-400-contrast: hsla(from color(from var(--ig-surface-400) var(--y-contrast)) h 0 l/1); + --ig-surface-500: rgb(255, 255, 255); + --ig-surface-500-contrast: hsla(from color(from var(--ig-surface-500) var(--y-contrast)) h 0 l/1); + --ig-surface-600: rgb(194, 194, 194); + --ig-surface-600-contrast: hsla(from color(from var(--ig-surface-600) var(--y-contrast)) h 0 l/1); + --ig-surface-700: rgb(183, 183, 183); + --ig-surface-700-contrast: hsla(from color(from var(--ig-surface-700) var(--y-contrast)) h 0 l/1); + --ig-surface-800: rgb(174, 174, 174); + --ig-surface-800-contrast: hsla(from color(from var(--ig-surface-800) var(--y-contrast)) h 0 l/1); + --ig-surface-900: rgb(164, 164, 164); + --ig-surface-900-contrast: hsla(from color(from var(--ig-surface-900) var(--y-contrast)) h 0 l/1); + --ig-surface-seed: #fff; + --ig-surface-seed-contrast: hsla(from color(from var(--ig-surface-seed) var(--y-contrast)) h 0 l/1); + --ig-surface-A100: rgb(218, 218, 218); + --ig-surface-A100-contrast: hsla(from color(from var(--ig-surface-A100) var(--y-contrast)) h 0 l/1); + --ig-surface-A200: rgb(161, 161, 161); + --ig-surface-A200-contrast: hsla(from color(from var(--ig-surface-A200) var(--y-contrast)) h 0 l/1); + --ig-surface-A400: rgb(124, 124, 124); + --ig-surface-A400-contrast: hsla(from color(from var(--ig-surface-A400) var(--y-contrast)) h 0 l/1); + --ig-surface-A700: rgb(97, 97, 97); + --ig-surface-A700-contrast: hsla(from color(from var(--ig-surface-A700) var(--y-contrast)) h 0 l/1); + --ig-info-50: rgb(232, 235, 252); + --ig-info-50-contrast: hsla(from color(from var(--ig-info-50) var(--y-contrast)) h 0 l/1); + --ig-info-100: rgb(190, 203, 253); + --ig-info-100-contrast: hsla(from color(from var(--ig-info-100) var(--y-contrast)) h 0 l/1); + --ig-info-200: rgb(149, 173, 255); + --ig-info-200-contrast: hsla(from color(from var(--ig-info-200) var(--y-contrast)) h 0 l/1); + --ig-info-300: rgb(109, 145, 255); + --ig-info-300-contrast: hsla(from color(from var(--ig-info-300) var(--y-contrast)) h 0 l/1); + --ig-info-400: rgb(70, 117, 255); + --ig-info-400-contrast: hsla(from color(from var(--ig-info-400) var(--y-contrast)) h 0 l/1); + --ig-info-500: rgb(34, 91, 245); + --ig-info-500-contrast: hsla(from color(from var(--ig-info-500) var(--y-contrast)) h 0 l/1); + --ig-info-600: rgb(15, 67, 220); + --ig-info-600-contrast: hsla(from color(from var(--ig-info-600) var(--y-contrast)) h 0 l/1); + --ig-info-700: rgb(7, 50, 180); + --ig-info-700-contrast: hsla(from color(from var(--ig-info-700) var(--y-contrast)) h 0 l/1); + --ig-info-800: rgb(6, 36, 125); + --ig-info-800-contrast: hsla(from color(from var(--ig-info-800) var(--y-contrast)) h 0 l/1); + --ig-info-900: rgb(4, 18, 59); + --ig-info-900-contrast: hsla(from color(from var(--ig-info-900) var(--y-contrast)) h 0 l/1); + --ig-info-seed: blue; + --ig-info-seed-contrast: hsla(from color(from var(--ig-info-seed) var(--y-contrast)) h 0 l/1); + --ig-info-A100: rgb(207, 217, 255); + --ig-info-A100-contrast: hsla(from color(from var(--ig-info-A100) var(--y-contrast)) h 0 l/1); + --ig-info-A200: rgb(124, 156, 255); + --ig-info-A200-contrast: hsla(from color(from var(--ig-info-A200) var(--y-contrast)) h 0 l/1); + --ig-info-A400: rgb(63, 113, 255); + --ig-info-A400-contrast: hsla(from color(from var(--ig-info-A400) var(--y-contrast)) h 0 l/1); + --ig-info-A700: rgb(16, 75, 249); + --ig-info-A700-contrast: hsla(from color(from var(--ig-info-A700) var(--y-contrast)) h 0 l/1); + --ig-success-50: rgb(193, 251, 187); + --ig-success-50-contrast: hsla(from color(from var(--ig-success-50) var(--y-contrast)) h 0 l/1); + --ig-success-100: rgb(93, 231, 86); + --ig-success-100-contrast: hsla(from color(from var(--ig-success-100) var(--y-contrast)) h 0 l/1); + --ig-success-200: rgb(47, 203, 42); + --ig-success-200-contrast: hsla(from color(from var(--ig-success-200) var(--y-contrast)) h 0 l/1); + --ig-success-300: rgb(17, 175, 14); + --ig-success-300-contrast: hsla(from color(from var(--ig-success-300) var(--y-contrast)) h 0 l/1); + --ig-success-400: rgb(1, 148, 1); + --ig-success-400-contrast: hsla(from color(from var(--ig-success-400) var(--y-contrast)) h 0 l/1); + --ig-success-500: rgb(1, 124, 0); + --ig-success-500-contrast: hsla(from color(from var(--ig-success-500) var(--y-contrast)) h 0 l/1); + --ig-success-600: rgb(5, 101, 4); + --ig-success-600-contrast: hsla(from color(from var(--ig-success-600) var(--y-contrast)) h 0 l/1); + --ig-success-700: rgb(11, 78, 9); + --ig-success-700-contrast: hsla(from color(from var(--ig-success-700) var(--y-contrast)) h 0 l/1); + --ig-success-800: rgb(13, 55, 11); + --ig-success-800-contrast: hsla(from color(from var(--ig-success-800) var(--y-contrast)) h 0 l/1); + --ig-success-900: rgb(7, 25, 6); + --ig-success-900-contrast: hsla(from color(from var(--ig-success-900) var(--y-contrast)) h 0 l/1); + --ig-success-seed: green; + --ig-success-seed-contrast: hsla(from color(from var(--ig-success-seed) var(--y-contrast)) h 0 l/1); + --ig-success-A100: rgb(56, 251, 50); + --ig-success-A100-contrast: hsla(from color(from var(--ig-success-A100) var(--y-contrast)) h 0 l/1); + --ig-success-A200: rgb(0, 187, 0); + --ig-success-A200-contrast: hsla(from color(from var(--ig-success-A200) var(--y-contrast)) h 0 l/1); + --ig-success-A400: rgb(0, 144, 0); + --ig-success-A400-contrast: hsla(from color(from var(--ig-success-A400) var(--y-contrast)) h 0 l/1); + --ig-success-A700: rgb(0, 114, 0); + --ig-success-A700-contrast: hsla(from color(from var(--ig-success-A700) var(--y-contrast)) h 0 l/1); + --ig-warn-50: rgb(251, 233, 213); + --ig-warn-50-contrast: hsla(from color(from var(--ig-warn-50) var(--y-contrast)) h 0 l/1); + --ig-warn-100: rgb(247, 195, 133); + --ig-warn-100-contrast: hsla(from color(from var(--ig-warn-100) var(--y-contrast)) h 0 l/1); + --ig-warn-200: rgb(233, 161, 65); + --ig-warn-200-contrast: hsla(from color(from var(--ig-warn-200) var(--y-contrast)) h 0 l/1); + --ig-warn-300: rgb(207, 135, 24); + --ig-warn-300-contrast: hsla(from color(from var(--ig-warn-300) var(--y-contrast)) h 0 l/1); + --ig-warn-400: rgb(177, 114, 4); + --ig-warn-400-contrast: hsla(from color(from var(--ig-warn-400) var(--y-contrast)) h 0 l/1); + --ig-warn-500: rgb(149, 94, 1); + --ig-warn-500-contrast: hsla(from color(from var(--ig-warn-500) var(--y-contrast)) h 0 l/1); + --ig-warn-600: rgb(121, 77, 4); + --ig-warn-600-contrast: hsla(from color(from var(--ig-warn-600) var(--y-contrast)) h 0 l/1); + --ig-warn-700: rgb(94, 60, 9); + --ig-warn-700-contrast: hsla(from color(from var(--ig-warn-700) var(--y-contrast)) h 0 l/1); + --ig-warn-800: rgb(65, 42, 11); + --ig-warn-800-contrast: hsla(from color(from var(--ig-warn-800) var(--y-contrast)) h 0 l/1); + --ig-warn-900: rgb(30, 19, 6); + --ig-warn-900-contrast: hsla(from color(from var(--ig-warn-900) var(--y-contrast)) h 0 l/1); + --ig-warn-seed: orange; + --ig-warn-seed-contrast: hsla(from color(from var(--ig-warn-seed) var(--y-contrast)) h 0 l/1); + --ig-warn-A100: rgb(255, 211, 156); + --ig-warn-A100-contrast: hsla(from color(from var(--ig-warn-A100) var(--y-contrast)) h 0 l/1); + --ig-warn-A200: rgb(222, 143, 4); + --ig-warn-A200-contrast: hsla(from color(from var(--ig-warn-A200) var(--y-contrast)) h 0 l/1); + --ig-warn-A400: rgb(172, 110, 0); + --ig-warn-A400-contrast: hsla(from color(from var(--ig-warn-A400) var(--y-contrast)) h 0 l/1); + --ig-warn-A700: rgb(136, 86, 0); + --ig-warn-A700-contrast: hsla(from color(from var(--ig-warn-A700) var(--y-contrast)) h 0 l/1); + --ig-error-50: rgb(254, 231, 227); + --ig-error-50-contrast: hsla(from color(from var(--ig-error-50) var(--y-contrast)) h 0 l/1); + --ig-error-100: rgb(255, 188, 177); + --ig-error-100-contrast: hsla(from color(from var(--ig-error-100) var(--y-contrast)) h 0 l/1); + --ig-error-200: rgb(255, 146, 130); + --ig-error-200-contrast: hsla(from color(from var(--ig-error-200) var(--y-contrast)) h 0 l/1); + --ig-error-300: rgb(255, 99, 82); + --ig-error-300-contrast: hsla(from color(from var(--ig-error-300) var(--y-contrast)) h 0 l/1); + --ig-error-400: rgb(237, 58, 45); + --ig-error-400-contrast: hsla(from color(from var(--ig-error-400) var(--y-contrast)) h 0 l/1); + --ig-error-500: rgb(209, 28, 19); + --ig-error-500-contrast: hsla(from color(from var(--ig-error-500) var(--y-contrast)) h 0 l/1); + --ig-error-600: rgb(174, 16, 9); + --ig-error-600-contrast: hsla(from color(from var(--ig-error-600) var(--y-contrast)) h 0 l/1); + --ig-error-700: rgb(135, 17, 11); + --ig-error-700-contrast: hsla(from color(from var(--ig-error-700) var(--y-contrast)) h 0 l/1); + --ig-error-800: rgb(93, 18, 12); + --ig-error-800-contrast: hsla(from color(from var(--ig-error-800) var(--y-contrast)) h 0 l/1); + --ig-error-900: rgb(44, 9, 6); + --ig-error-900-contrast: hsla(from color(from var(--ig-error-900) var(--y-contrast)) h 0 l/1); + --ig-error-seed: red; + --ig-error-seed-contrast: hsla(from color(from var(--ig-error-seed) var(--y-contrast)) h 0 l/1); + --ig-error-A100: rgb(255, 207, 198); + --ig-error-A100-contrast: hsla(from color(from var(--ig-error-A100) var(--y-contrast)) h 0 l/1); + --ig-error-A200: rgb(255, 119, 101); + --ig-error-A200-contrast: hsla(from color(from var(--ig-error-A200) var(--y-contrast)) h 0 l/1); + --ig-error-A400: rgb(242, 34, 24); + --ig-error-A400-contrast: hsla(from color(from var(--ig-error-A400) var(--y-contrast)) h 0 l/1); + --ig-error-A700: rgb(197, 2, 1); + --ig-error-A700-contrast: hsla(from color(from var(--ig-error-A700) var(--y-contrast)) h 0 l/1); +} + +/* END_OUTPUT */ +/* CONTAINED */ +:root { + --ig-primary-50: rgb(226, 237, 251); + --ig-primary-100: rgb(172, 207, 251); + --ig-primary-200: rgb(117, 180, 250); + --ig-primary-300: rgb(67, 155, 239); + --ig-primary-400: rgb(27, 131, 214); + --ig-primary-500: rgb(9, 109, 183); + --ig-primary-600: rgb(6, 89, 150); + --ig-primary-700: rgb(11, 69, 116); + --ig-primary-800: rgb(12, 48, 80); + --ig-primary-900: rgb(6, 22, 37); + --ig-primary-seed: #09f; + --ig-primary-A100: rgb(191, 221, 255); + --ig-primary-A200: rgb(73, 164, 255); + --ig-primary-A400: rgb(4, 127, 213); + --ig-primary-A700: rgb(0, 100, 169); + --ig-secondary-50: rgb(240, 235, 245); + --ig-secondary-100: rgb(213, 198, 231); + --ig-secondary-200: rgb(190, 166, 221); + --ig-secondary-300: rgb(168, 136, 211); + --ig-secondary-400: rgb(146, 110, 198); + --ig-secondary-500: rgb(125, 87, 177); + --ig-secondary-600: rgb(103, 69, 150); + --ig-secondary-700: rgb(80, 53, 117); + --ig-secondary-800: rgb(56, 38, 81); + --ig-secondary-900: rgb(25, 17, 38); + --ig-secondary-seed: #97c; + --ig-secondary-A100: rgb(233, 209, 255); + --ig-secondary-A200: rgb(192, 134, 255); + --ig-secondary-A400: rgb(163, 75, 255); + --ig-secondary-A700: rgb(139, 23, 233); + --ig-gray-50: rgb(251, 251, 251); + --ig-gray-100: rgb(247, 247, 247); + --ig-gray-200: rgb(236, 236, 236); + --ig-gray-300: rgb(217, 217, 217); + --ig-gray-400: rgb(193, 193, 193); + --ig-gray-500: rgb(164, 164, 164); + --ig-gray-600: rgb(132, 132, 132); + --ig-gray-700: rgb(99, 99, 99); + --ig-gray-800: rgb(66, 66, 66); + --ig-gray-900: rgb(33, 33, 33); + --ig-gray-seed: #000; + --ig-surface-50: rgb(253, 253, 253); + --ig-surface-100: rgb(240, 240, 240); + --ig-surface-200: rgb(228, 228, 228); + --ig-surface-300: rgb(216, 216, 216); + --ig-surface-400: rgb(204, 204, 204); + --ig-surface-500: rgb(255, 255, 255); + --ig-surface-600: rgb(194, 194, 194); + --ig-surface-700: rgb(183, 183, 183); + --ig-surface-800: rgb(174, 174, 174); + --ig-surface-900: rgb(164, 164, 164); + --ig-surface-seed: #fff; + --ig-surface-A100: rgb(218, 218, 218); + --ig-surface-A200: rgb(161, 161, 161); + --ig-surface-A400: rgb(124, 124, 124); + --ig-surface-A700: rgb(97, 97, 97); + --ig-info-50: rgb(232, 235, 252); + --ig-info-100: rgb(190, 203, 253); + --ig-info-200: rgb(149, 173, 255); + --ig-info-300: rgb(109, 145, 255); + --ig-info-400: rgb(70, 117, 255); + --ig-info-500: rgb(34, 91, 245); + --ig-info-600: rgb(15, 67, 220); + --ig-info-700: rgb(7, 50, 180); + --ig-info-800: rgb(6, 36, 125); + --ig-info-900: rgb(4, 18, 59); + --ig-info-seed: blue; + --ig-info-A100: rgb(207, 217, 255); + --ig-info-A200: rgb(124, 156, 255); + --ig-info-A400: rgb(63, 113, 255); + --ig-info-A700: rgb(16, 75, 249); + --ig-success-50: rgb(193, 251, 187); + --ig-success-100: rgb(93, 231, 86); + --ig-success-200: rgb(47, 203, 42); + --ig-success-300: rgb(17, 175, 14); + --ig-success-400: rgb(1, 148, 1); + --ig-success-500: rgb(1, 124, 0); + --ig-success-600: rgb(5, 101, 4); + --ig-success-700: rgb(11, 78, 9); + --ig-success-800: rgb(13, 55, 11); + --ig-success-900: rgb(7, 25, 6); + --ig-success-seed: green; + --ig-success-A100: rgb(56, 251, 50); + --ig-success-A200: rgb(0, 187, 0); + --ig-success-A400: rgb(0, 144, 0); + --ig-success-A700: rgb(0, 114, 0); + --ig-warn-50: rgb(251, 233, 213); + --ig-warn-100: rgb(247, 195, 133); + --ig-warn-200: rgb(233, 161, 65); + --ig-warn-300: rgb(207, 135, 24); + --ig-warn-400: rgb(177, 114, 4); + --ig-warn-500: rgb(149, 94, 1); + --ig-warn-600: rgb(121, 77, 4); + --ig-warn-700: rgb(94, 60, 9); + --ig-warn-800: rgb(65, 42, 11); + --ig-warn-900: rgb(30, 19, 6); + --ig-warn-seed: orange; + --ig-warn-A100: rgb(255, 211, 156); + --ig-warn-A200: rgb(222, 143, 4); + --ig-warn-A400: rgb(172, 110, 0); + --ig-warn-A700: rgb(136, 86, 0); + --ig-error-50: rgb(254, 231, 227); + --ig-error-100: rgb(255, 188, 177); + --ig-error-200: rgb(255, 146, 130); + --ig-error-300: rgb(255, 99, 82); + --ig-error-400: rgb(237, 58, 45); + --ig-error-500: rgb(209, 28, 19); + --ig-error-600: rgb(174, 16, 9); + --ig-error-700: rgb(135, 17, 11); + --ig-error-800: rgb(93, 18, 12); + --ig-error-900: rgb(44, 9, 6); + --ig-error-seed: red; + --ig-error-A100: rgb(255, 207, 198); + --ig-error-A200: rgb(255, 119, 101); + --ig-error-A400: rgb(242, 34, 24); + --ig-error-A700: rgb(197, 2, 1); +} + +/* END_CONTAINED */ +/* END_ASSERT */ +/* */ +/* Test: verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] map */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] map */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] map */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] map */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] map */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] map */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] map */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] map */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] verify the integrity of sample handmade palette */ +/* ✔ [assert-true] list */ +/* */ +/* Test: should generate CSS variables for handmande palettes */ +/* ASSERT: */ +/* OUTPUT */ +:root { + --ig-wcag-a: 0.31; + --ig-wcag-aa: 0.185; + --ig-wcag-aaa: 0.178; + --ig-contrast-level: var(--ig-wcag-aa); + --y: clamp(0, (y / var(--ig-contrast-level) - 1) * -infinity, 1); + --y-contrast: xyz-d65 var(--y) var(--y) var(--y); +} + +:root { + --ig-primary-50: #e6eff8; + --ig-primary-50-contrast: black; + --ig-primary-100: #bfd7f2; + --ig-primary-100-contrast: black; + --ig-primary-200: #98bfec; + --ig-primary-200-contrast: black; + --ig-primary-300: #85b5e9; + --ig-primary-300-contrast: white; + --ig-primary-400: #73a6e4; + --ig-primary-400-contrast: white; + --ig-primary-500: #6797de; + --ig-primary-500-contrast: white; + --ig-primary-600: #3681dd; + --ig-primary-600-contrast: white; + --ig-primary-700: #357fda; + --ig-primary-700-contrast: white; + --ig-primary-800: #306dc8; + --ig-primary-800-contrast: white; + --ig-primary-900: #284ea8; + --ig-primary-900-contrast: white; + --ig-primary-A100: #98bfec; + --ig-primary-A100-contrast: white; + --ig-primary-A200: #73a6e4; + --ig-primary-A200-contrast: white; + --ig-primary-A400: #3681dd; + --ig-primary-A400-contrast: white; + --ig-primary-A700: #284ea8; + --ig-primary-A700-contrast: white; + --ig-primary-seed: #6797de; + --ig-primary-seed-contrast: white; + --ig-secondary-50: #fef7e2; + --ig-secondary-50-contrast: black; + --ig-secondary-100: #fdeab7; + --ig-secondary-100-contrast: black; + --ig-secondary-200: #fbdd89; + --ig-secondary-200-contrast: black; + --ig-secondary-300: #fad15c; + --ig-secondary-300-contrast: black; + --ig-secondary-400: #f9c63f; + --ig-secondary-400-contrast: black; + --ig-secondary-500: #f7bd32; + --ig-secondary-500-contrast: white; + --ig-secondary-600: #f6b02d; + --ig-secondary-600-contrast: white; + --ig-secondary-700: #f49e2a; + --ig-secondary-700-contrast: white; + --ig-secondary-800: #f38e28; + --ig-secondary-800-contrast: white; + --ig-secondary-900: #f38e28; + --ig-secondary-900-contrast: white; + --ig-secondary-A100: #fbdd89; + --ig-secondary-A100-contrast: black; + --ig-secondary-A200: #f9c63f; + --ig-secondary-A200-contrast: black; + --ig-secondary-A400: #f6b02d; + --ig-secondary-A400-contrast: white; + --ig-secondary-A700: #f38e28; + --ig-secondary-A700-contrast: white; + --ig-secondary-seed: #f7bd32; + --ig-secondary-seed-contrast: white; + --ig-tertiary-500: #f7bd32; + --ig-tertiary-500-contrast: white; + --ig-gray-50: #fff; + --ig-gray-50-contrast: black; + --ig-gray-100: #fafafa; + --ig-gray-100-contrast: black; + --ig-gray-200: #f5f5f5; + --ig-gray-200-contrast: black; + --ig-gray-300: #f0f0f0; + --ig-gray-300-contrast: black; + --ig-gray-400: #dedede; + --ig-gray-400-contrast: black; + --ig-gray-500: #b3b2b2; + --ig-gray-500-contrast: black; + --ig-gray-600: #979696; + --ig-gray-600-contrast: white; + --ig-gray-700: #7b7a7a; + --ig-gray-700-contrast: white; + --ig-gray-800: #404040; + --ig-gray-800-contrast: white; + --ig-gray-900: #1a1a1a; + --ig-gray-900-contrast: white; + --ig-gray-seed: #b3b2b2; + --ig-gray-seed-contrast: black; + --ig-info-50: #fef7e2; + --ig-info-50-contrast: black; + --ig-info-100: #fdeab7; + --ig-info-100-contrast: black; + --ig-info-200: #fbdd89; + --ig-info-200-contrast: black; + --ig-info-300: #fad15c; + --ig-info-300-contrast: black; + --ig-info-400: #f9c63f; + --ig-info-400-contrast: black; + --ig-info-500: #f7bd32; + --ig-info-500-contrast: white; + --ig-info-600: #f6b02d; + --ig-info-600-contrast: white; + --ig-info-700: #f49e2a; + --ig-info-700-contrast: white; + --ig-info-800: #f38e28; + --ig-info-800-contrast: white; + --ig-info-900: #f38e28; + --ig-info-900-contrast: white; + --ig-info-A100: #fbdd89; + --ig-info-A100-contrast: black; + --ig-info-A200: #f9c63f; + --ig-info-A200-contrast: black; + --ig-info-A400: #f6b02d; + --ig-info-A400-contrast: white; + --ig-info-A700: #f38e28; + --ig-info-A700-contrast: white; + --ig-info-seed: #f7bd32; + --ig-info-seed-contrast: white; + --ig-success-50: #fef7e2; + --ig-success-50-contrast: black; + --ig-success-100: #fdeab7; + --ig-success-100-contrast: black; + --ig-success-200: #fbdd89; + --ig-success-200-contrast: black; + --ig-success-300: #fad15c; + --ig-success-300-contrast: black; + --ig-success-400: #f9c63f; + --ig-success-400-contrast: black; + --ig-success-500: #f7bd32; + --ig-success-500-contrast: white; + --ig-success-600: #f6b02d; + --ig-success-600-contrast: white; + --ig-success-700: #f49e2a; + --ig-success-700-contrast: white; + --ig-success-800: #f38e28; + --ig-success-800-contrast: white; + --ig-success-900: #f38e28; + --ig-success-900-contrast: white; + --ig-success-A100: #fbdd89; + --ig-success-A100-contrast: black; + --ig-success-A200: #f9c63f; + --ig-success-A200-contrast: black; + --ig-success-A400: #f6b02d; + --ig-success-A400-contrast: white; + --ig-success-A700: #f38e28; + --ig-success-A700-contrast: white; + --ig-success-seed: #f7bd32; + --ig-success-seed-contrast: white; + --ig-warn-50: #fef7e2; + --ig-warn-50-contrast: black; + --ig-warn-100: #fdeab7; + --ig-warn-100-contrast: black; + --ig-warn-200: #fbdd89; + --ig-warn-200-contrast: black; + --ig-warn-300: #fad15c; + --ig-warn-300-contrast: black; + --ig-warn-400: #f9c63f; + --ig-warn-400-contrast: black; + --ig-warn-500: #f7bd32; + --ig-warn-500-contrast: white; + --ig-warn-600: #f6b02d; + --ig-warn-600-contrast: white; + --ig-warn-700: #f49e2a; + --ig-warn-700-contrast: white; + --ig-warn-800: #f38e28; + --ig-warn-800-contrast: white; + --ig-warn-900: #f38e28; + --ig-warn-900-contrast: white; + --ig-warn-A100: #fbdd89; + --ig-warn-A100-contrast: black; + --ig-warn-A200: #f9c63f; + --ig-warn-A200-contrast: black; + --ig-warn-A400: #f6b02d; + --ig-warn-A400-contrast: white; + --ig-warn-A700: #f38e28; + --ig-warn-A700-contrast: white; + --ig-warn-seed: #f7bd32; + --ig-warn-seed-contrast: white; + --ig-error-50: #fef7e2; + --ig-error-50-contrast: black; + --ig-error-100: #fdeab7; + --ig-error-100-contrast: black; + --ig-error-200: #fbdd89; + --ig-error-200-contrast: black; + --ig-error-300: #fad15c; + --ig-error-300-contrast: black; + --ig-error-400: #f9c63f; + --ig-error-400-contrast: black; + --ig-error-500: #f7bd32; + --ig-error-500-contrast: white; + --ig-error-600: #f6b02d; + --ig-error-600-contrast: white; + --ig-error-700: #f49e2a; + --ig-error-700-contrast: white; + --ig-error-800: #f38e28; + --ig-error-800-contrast: white; + --ig-error-900: #f38e28; + --ig-error-900-contrast: white; + --ig-error-A100: #fbdd89; + --ig-error-A100-contrast: black; + --ig-error-A200: #f9c63f; + --ig-error-A200-contrast: black; + --ig-error-A400: #f6b02d; + --ig-error-A400-contrast: white; + --ig-error-A700: #f38e28; + --ig-error-A700-contrast: white; + --ig-error-seed: #f7bd32; + --ig-error-seed-contrast: white; + --ig-surface-50: #fef7e2; + --ig-surface-50-contrast: black; + --ig-surface-100: #fdeab7; + --ig-surface-100-contrast: black; + --ig-surface-200: #fbdd89; + --ig-surface-200-contrast: black; + --ig-surface-300: #fad15c; + --ig-surface-300-contrast: black; + --ig-surface-400: #f9c63f; + --ig-surface-400-contrast: black; + --ig-surface-500: #f7bd32; + --ig-surface-500-contrast: white; + --ig-surface-600: #f6b02d; + --ig-surface-600-contrast: white; + --ig-surface-700: #f49e2a; + --ig-surface-700-contrast: white; + --ig-surface-800: #f38e28; + --ig-surface-800-contrast: white; + --ig-surface-900: #f38e28; + --ig-surface-900-contrast: white; + --ig-surface-A100: #fbdd89; + --ig-surface-A100-contrast: black; + --ig-surface-A200: #f9c63f; + --ig-surface-A200-contrast: black; + --ig-surface-A400: #f6b02d; + --ig-surface-A400-contrast: white; + --ig-surface-A700: #f38e28; + --ig-surface-A700-contrast: white; + --ig-surface-seed: #f7bd32; + --ig-surface-seed-contrast: white; +} + +/* END_OUTPUT */ +/* CONTAINED */ +:root { + --ig-primary-50: #e6eff8; + --ig-primary-100: #bfd7f2; + --ig-primary-200: #98bfec; + --ig-primary-300: #85b5e9; + --ig-primary-400: #73a6e4; + --ig-primary-500: #6797de; + --ig-primary-600: #3681dd; + --ig-primary-700: #357fda; + --ig-primary-800: #306dc8; + --ig-primary-900: #284ea8; + --ig-primary-seed: #6797de; + --ig-primary-A100: #98bfec; + --ig-primary-A200: #73a6e4; + --ig-primary-A400: #3681dd; + --ig-primary-A700: #284ea8; + --ig-secondary-50: #fef7e2; + --ig-secondary-100: #fdeab7; + --ig-secondary-200: #fbdd89; + --ig-secondary-300: #fad15c; + --ig-secondary-400: #f9c63f; + --ig-secondary-500: #f7bd32; + --ig-secondary-600: #f6b02d; + --ig-secondary-700: #f49e2a; + --ig-secondary-800: #f38e28; + --ig-secondary-900: #f38e28; + --ig-secondary-seed: #f7bd32; + --ig-secondary-A100: #fbdd89; + --ig-secondary-A200: #f9c63f; + --ig-secondary-A400: #f6b02d; + --ig-secondary-A700: #f38e28; + --ig-gray-50: #fff; + --ig-gray-100: #fafafa; + --ig-gray-200: #f5f5f5; + --ig-gray-300: #f0f0f0; + --ig-gray-400: #dedede; + --ig-gray-500: #b3b2b2; + --ig-gray-600: #979696; + --ig-gray-700: #7b7a7a; + --ig-gray-800: #404040; + --ig-gray-900: #1a1a1a; + --ig-gray-seed: #b3b2b2; + --ig-surface-50: #fef7e2; + --ig-surface-100: #fdeab7; + --ig-surface-200: #fbdd89; + --ig-surface-300: #fad15c; + --ig-surface-400: #f9c63f; + --ig-surface-500: #f7bd32; + --ig-surface-600: #f6b02d; + --ig-surface-700: #f49e2a; + --ig-surface-800: #f38e28; + --ig-surface-900: #f38e28; + --ig-surface-seed: #f7bd32; + --ig-surface-A100: #fbdd89; + --ig-surface-A200: #f9c63f; + --ig-surface-A400: #f6b02d; + --ig-surface-A700: #f38e28; + --ig-info-50: #fef7e2; + --ig-info-100: #fdeab7; + --ig-info-200: #fbdd89; + --ig-info-300: #fad15c; + --ig-info-400: #f9c63f; + --ig-info-500: #f7bd32; + --ig-info-600: #f6b02d; + --ig-info-700: #f49e2a; + --ig-info-800: #f38e28; + --ig-info-900: #f38e28; + --ig-info-seed: #f7bd32; + --ig-info-A100: #fbdd89; + --ig-info-A200: #f9c63f; + --ig-info-A400: #f6b02d; + --ig-info-A700: #f38e28; + --ig-success-50: #fef7e2; + --ig-success-100: #fdeab7; + --ig-success-200: #fbdd89; + --ig-success-300: #fad15c; + --ig-success-400: #f9c63f; + --ig-success-500: #f7bd32; + --ig-success-600: #f6b02d; + --ig-success-700: #f49e2a; + --ig-success-800: #f38e28; + --ig-success-900: #f38e28; + --ig-success-seed: #f7bd32; + --ig-success-A100: #fbdd89; + --ig-success-A200: #f9c63f; + --ig-success-A400: #f6b02d; + --ig-success-A700: #f38e28; + --ig-warn-50: #fef7e2; + --ig-warn-100: #fdeab7; + --ig-warn-200: #fbdd89; + --ig-warn-300: #fad15c; + --ig-warn-400: #f9c63f; + --ig-warn-500: #f7bd32; + --ig-warn-600: #f6b02d; + --ig-warn-700: #f49e2a; + --ig-warn-800: #f38e28; + --ig-warn-900: #f38e28; + --ig-warn-seed: #f7bd32; + --ig-warn-A100: #fbdd89; + --ig-warn-A200: #f9c63f; + --ig-warn-A400: #f6b02d; + --ig-warn-A700: #f38e28; + --ig-error-50: #fef7e2; + --ig-error-100: #fdeab7; + --ig-error-200: #fbdd89; + --ig-error-300: #fad15c; + --ig-error-400: #f9c63f; + --ig-error-500: #f7bd32; + --ig-error-600: #f6b02d; + --ig-error-700: #f49e2a; + --ig-error-800: #f38e28; + --ig-error-900: #f38e28; + --ig-error-seed: #f7bd32; + --ig-error-A100: #fbdd89; + --ig-error-A200: #f9c63f; + --ig-error-A400: #f6b02d; + --ig-error-A700: #f38e28; +} + +/* END_CONTAINED */ +/* END_ASSERT */ +/* */ +/* Test: should properly get the value from handmade palettes */ +/* ✔ [assert-equal] should properly get the value from handmade palettes */ +/* ASSERT: */ +/* OUTPUT */ +.test-output { + color: rgb(250, 250, 250); +} + +/* END_OUTPUT */ +/* CONTAINED */ +.test-output { + color: rgb(250, 250, 250); +} + +/* END_CONTAINED */ +/* END_ASSERT */ +/* */ +/* # Module: Color :: palette :: gamut-relative generator */ +/* ------------------------------------------------------ */ +/* Test: keeps any two shades 500 apart at WCAG AA or better */ +/* ✔ [assert-true] keeps any two shades 500 apart at WCAG AA or better */ +/* ✔ [assert-true] keeps any two shades 500 apart at WCAG AA or better */ +/* ✔ [assert-true] keeps any two shades 500 apart at WCAG AA or better */ +/* ✔ [assert-true] keeps any two shades 500 apart at WCAG AA or better */ +/* ✔ [assert-true] keeps any two shades 500 apart at WCAG AA or better */ +/* ✔ [assert-true] keeps any two shades 500 apart at WCAG AA or better */ +/* ✔ [assert-true] keeps any two shades 500 apart at WCAG AA or better */ +/* ✔ [assert-true] keeps any two shades 500 apart at WCAG AA or better */ +/* ✔ [assert-true] keeps any two shades 500 apart at WCAG AA or better */ +/* ✔ [assert-true] keeps any two shades 500 apart at WCAG AA or better */ +/* ✔ [assert-true] keeps any two shades 500 apart at WCAG AA or better */ +/* ✔ [assert-true] keeps any two shades 500 apart at WCAG AA or better */ +/* ✔ [assert-true] keeps any two shades 500 apart at WCAG AA or better */ +/* ✔ [assert-true] keeps any two shades 500 apart at WCAG AA or better */ +/* ✔ [assert-true] keeps any two shades 500 apart at WCAG AA or better */ +/* ✔ [assert-true] keeps any two shades 500 apart at WCAG AA or better */ +/* ✔ [assert-true] keeps any two shades 500 apart at WCAG AA or better */ +/* ✔ [assert-true] keeps any two shades 500 apart at WCAG AA or better */ +/* ✔ [assert-true] keeps any two shades 500 apart at WCAG AA or better */ +/* ✔ [assert-true] keeps any two shades 500 apart at WCAG AA or better */ +/* ✔ [assert-true] keeps any two shades 500 apart at WCAG AA or better */ +/* ✔ [assert-true] keeps any two shades 500 apart at WCAG AA or better */ +/* ✔ [assert-true] keeps any two shades 500 apart at WCAG AA or better */ +/* ✔ [assert-true] keeps any two shades 500 apart at WCAG AA or better */ +/* ✔ [assert-true] keeps any two shades 500 apart at WCAG AA or better */ +/* ✔ [assert-true] keeps any two shades 500 apart at WCAG AA or better */ +/* ✔ [assert-true] keeps any two shades 500 apart at WCAG AA or better */ +/* ✔ [assert-true] keeps any two shades 500 apart at WCAG AA or better */ +/* ✔ [assert-true] keeps any two shades 500 apart at WCAG AA or better */ +/* ✔ [assert-true] keeps any two shades 500 apart at WCAG AA or better */ +/* ✔ [assert-true] keeps any two shades 500 apart at WCAG AA or better */ +/* ✔ [assert-true] keeps any two shades 500 apart at WCAG AA or better */ +/* ✔ [assert-true] keeps any two shades 500 apart at WCAG AA or better */ +/* ✔ [assert-true] keeps any two shades 500 apart at WCAG AA or better */ +/* ✔ [assert-true] keeps any two shades 500 apart at WCAG AA or better */ +/* ✔ [assert-true] keeps any two shades 500 apart at WCAG AA or better */ +/* ✔ [assert-true] keeps any two shades 500 apart at WCAG AA or better */ +/* ✔ [assert-true] keeps any two shades 500 apart at WCAG AA or better */ +/* ✔ [assert-true] keeps any two shades 500 apart at WCAG AA or better */ +/* ✔ [assert-true] keeps any two shades 500 apart at WCAG AA or better */ +/* */ +/* Test: keeps every shade visibly distinct, whatever the seed */ +/* ✔ [assert-true] keeps every shade visibly distinct, whatever the seed */ +/* ✔ [assert-true] keeps every shade visibly distinct, whatever the seed */ +/* ✔ [assert-true] keeps every shade visibly distinct, whatever the seed */ +/* ✔ [assert-true] keeps every shade visibly distinct, whatever the seed */ +/* ✔ [assert-true] keeps every shade visibly distinct, whatever the seed */ +/* ✔ [assert-true] keeps every shade visibly distinct, whatever the seed */ +/* ✔ [assert-true] keeps every shade visibly distinct, whatever the seed */ +/* ✔ [assert-true] keeps every shade visibly distinct, whatever the seed */ +/* ✔ [assert-true] keeps every shade visibly distinct, whatever the seed */ +/* ✔ [assert-true] keeps every shade visibly distinct, whatever the seed */ +/* ✔ [assert-true] keeps every shade visibly distinct, whatever the seed */ +/* ✔ [assert-true] keeps every shade visibly distinct, whatever the seed */ +/* ✔ [assert-true] keeps every shade visibly distinct, whatever the seed */ +/* ✔ [assert-true] keeps every shade visibly distinct, whatever the seed */ +/* ✔ [assert-true] keeps every shade visibly distinct, whatever the seed */ +/* ✔ [assert-true] keeps every shade visibly distinct, whatever the seed */ +/* ✔ [assert-true] keeps every shade visibly distinct, whatever the seed */ +/* ✔ [assert-true] keeps every shade visibly distinct, whatever the seed */ +/* ✔ [assert-true] keeps every shade visibly distinct, whatever the seed */ +/* ✔ [assert-true] keeps every shade visibly distinct, whatever the seed */ +/* ✔ [assert-true] keeps every shade visibly distinct, whatever the seed */ +/* ✔ [assert-true] keeps every shade visibly distinct, whatever the seed */ +/* ✔ [assert-true] keeps every shade visibly distinct, whatever the seed */ +/* ✔ [assert-true] keeps every shade visibly distinct, whatever the seed */ +/* ✔ [assert-true] keeps every shade visibly distinct, whatever the seed */ +/* ✔ [assert-true] keeps every shade visibly distinct, whatever the seed */ +/* ✔ [assert-true] keeps every shade visibly distinct, whatever the seed */ +/* ✔ [assert-true] keeps every shade visibly distinct, whatever the seed */ +/* ✔ [assert-true] keeps every shade visibly distinct, whatever the seed */ +/* ✔ [assert-true] keeps every shade visibly distinct, whatever the seed */ +/* ✔ [assert-true] keeps every shade visibly distinct, whatever the seed */ +/* ✔ [assert-true] keeps every shade visibly distinct, whatever the seed */ +/* ✔ [assert-true] keeps every shade visibly distinct, whatever the seed */ +/* ✔ [assert-true] keeps every shade visibly distinct, whatever the seed */ +/* ✔ [assert-true] keeps every shade visibly distinct, whatever the seed */ +/* ✔ [assert-true] keeps every shade visibly distinct, whatever the seed */ +/* ✔ [assert-true] keeps every shade visibly distinct, whatever the seed */ +/* ✔ [assert-true] keeps every shade visibly distinct, whatever the seed */ +/* ✔ [assert-true] keeps every shade visibly distinct, whatever the seed */ +/* ✔ [assert-true] keeps every shade visibly distinct, whatever the seed */ +/* ✔ [assert-true] keeps every shade visibly distinct, whatever the seed */ +/* ✔ [assert-true] keeps every shade visibly distinct, whatever the seed */ +/* ✔ [assert-true] keeps every shade visibly distinct, whatever the seed */ +/* ✔ [assert-true] keeps every shade visibly distinct, whatever the seed */ +/* ✔ [assert-true] keeps every shade visibly distinct, whatever the seed */ +/* ✔ [assert-true] keeps every shade visibly distinct, whatever the seed */ +/* ✔ [assert-true] keeps every shade visibly distinct, whatever the seed */ +/* ✔ [assert-true] keeps every shade visibly distinct, whatever the seed */ +/* ✔ [assert-true] keeps every shade visibly distinct, whatever the seed */ +/* ✔ [assert-true] keeps every shade visibly distinct, whatever the seed */ +/* */ +/* Test: generates a neutral ramp for a seed with no usable hue */ +/* ✔ [assert-equal] generates a neutral ramp for a seed with no usable hue */ +/* ✔ [assert-equal] generates a neutral ramp for a seed with no usable hue */ +/* ✔ [assert-equal] generates a neutral ramp for a seed with no usable hue */ +/* ✔ [assert-equal] generates a neutral ramp for a seed with no usable hue */ +/* ✔ [assert-equal] generates a neutral ramp for a seed with no usable hue */ +/* ✔ [assert-equal] generates a neutral ramp for a seed with no usable hue */ +/* ✔ [assert-equal] generates a neutral ramp for a seed with no usable hue */ +/* ✔ [assert-equal] generates a neutral ramp for a seed with no usable hue */ +/* ✔ [assert-equal] generates a neutral ramp for a seed with no usable hue */ +/* ✔ [assert-equal] generates a neutral ramp for a seed with no usable hue */ +/* */ +/* Test: leaves the surface family anchored on its seed */ +/* ✔ [assert-equal] leaves the surface family anchored on its seed */ +/* */ +/* Test: emits concrete colors, not runtime expressions */ +/* ✔ [assert-equal] emits concrete colors, not runtime expressions */ +/* ✔ [assert-equal] emits concrete colors, not runtime expressions */ +/* ✔ [assert-equal] emits concrete colors, not runtime expressions */ +/* ✔ [assert-equal] emits concrete colors, not runtime expressions */ +/* ✔ [assert-equal] emits concrete colors, not runtime expressions */ +/* ✔ [assert-equal] emits concrete colors, not runtime expressions */ +/* ✔ [assert-equal] emits concrete colors, not runtime expressions */ +/* ✔ [assert-equal] emits concrete colors, not runtime expressions */ +/* ✔ [assert-equal] emits concrete colors, not runtime expressions */ +/* ✔ [assert-equal] emits concrete colors, not runtime expressions */ +/* */ +/* Test: keeps the surface seed exactly on shade 500 */ +/* ✔ [assert-equal] keeps the surface seed exactly on shade 500 */ +/* ✔ [assert-equal] keeps the surface seed exactly on shade 500 */ +/* ✔ [assert-equal] keeps the surface seed exactly on shade 500 */ +/* ✔ [assert-equal] keeps the surface seed exactly on shade 500 */ +/* */ +/* Test: gives every surface a full set of distinct layers */ +/* ✔ [assert-true] gives every surface a full set of distinct layers */ +/* ✔ [assert-true] gives every surface a full set of distinct layers */ +/* ✔ [assert-true] gives every surface a full set of distinct layers */ +/* ✔ [assert-true] gives every surface a full set of distinct layers */ +/* ✔ [assert-true] gives every surface a full set of distinct layers */ +/* ✔ [assert-true] gives every surface a full set of distinct layers */ +/* ✔ [assert-true] gives every surface a full set of distinct layers */ +/* ✔ [assert-true] gives every surface a full set of distinct layers */ +/* ✔ [assert-true] gives every surface a full set of distinct layers */ +/* ✔ [assert-true] gives every surface a full set of distinct layers */ +/* ✔ [assert-true] gives every surface a full set of distinct layers */ +/* ✔ [assert-true] gives every surface a full set of distinct layers */ +/* ✔ [assert-true] gives every surface a full set of distinct layers */ +/* ✔ [assert-true] gives every surface a full set of distinct layers */ +/* ✔ [assert-true] gives every surface a full set of distinct layers */ +/* ✔ [assert-true] gives every surface a full set of distinct layers */ +/* ✔ [assert-true] gives every surface a full set of distinct layers */ +/* ✔ [assert-true] gives every surface a full set of distinct layers */ +/* ✔ [assert-true] gives every surface a full set of distinct layers */ +/* ✔ [assert-true] gives every surface a full set of distinct layers */ +/* ✔ [assert-true] gives every surface a full set of distinct layers */ +/* ✔ [assert-true] gives every surface a full set of distinct layers */ +/* ✔ [assert-true] gives every surface a full set of distinct layers */ +/* ✔ [assert-true] gives every surface a full set of distinct layers */ +/* ✔ [assert-true] gives every surface a full set of distinct layers */ +/* ✔ [assert-true] gives every surface a full set of distinct layers */ +/* ✔ [assert-true] gives every surface a full set of distinct layers */ +/* ✔ [assert-true] gives every surface a full set of distinct layers */ +/* ✔ [assert-true] gives every surface a full set of distinct layers */ +/* ✔ [assert-true] gives every surface a full set of distinct layers */ +/* ✔ [assert-true] gives every surface a full set of distinct layers */ +/* ✔ [assert-true] gives every surface a full set of distinct layers */ +/* ✔ [assert-true] gives every surface a full set of distinct layers */ +/* ✔ [assert-true] gives every surface a full set of distinct layers */ +/* ✔ [assert-true] gives every surface a full set of distinct layers */ +/* ✔ [assert-true] gives every surface a full set of distinct layers */ +/* ✔ [assert-true] gives every surface a full set of distinct layers */ +/* ✔ [assert-true] gives every surface a full set of distinct layers */ +/* ✔ [assert-true] gives every surface a full set of distinct layers */ +/* ✔ [assert-true] gives every surface a full set of distinct layers */ +/* ✔ [assert-true] gives every surface a full set of distinct layers */ +/* ✔ [assert-true] gives every surface a full set of distinct layers */ +/* ✔ [assert-true] gives every surface a full set of distinct layers */ +/* ✔ [assert-true] gives every surface a full set of distinct layers */ +/* ✔ [assert-true] gives every surface a full set of distinct layers */ +/* ✔ [assert-true] gives every surface a full set of distinct layers */ +/* ✔ [assert-true] gives every surface a full set of distinct layers */ +/* ✔ [assert-true] gives every surface a full set of distinct layers */ +/* ✔ [assert-true] gives every surface a full set of distinct layers */ +/* ✔ [assert-true] gives every surface a full set of distinct layers */ +/* ✔ [assert-true] gives every surface a full set of distinct layers */ +/* ✔ [assert-true] gives every surface a full set of distinct layers */ +/* ✔ [assert-true] gives every surface a full set of distinct layers */ +/* ✔ [assert-true] gives every surface a full set of distinct layers */ +/* ✔ [assert-true] gives every surface a full set of distinct layers */ +/* ✔ [assert-true] gives every surface a full set of distinct layers */ +/* ✔ [assert-true] gives every surface a full set of distinct layers */ +/* ✔ [assert-true] gives every surface a full set of distinct layers */ +/* ✔ [assert-true] gives every surface a full set of distinct layers */ +/* ✔ [assert-true] gives every surface a full set of distinct layers */ +/* ✔ [assert-true] gives every surface a full set of distinct layers */ +/* ✔ [assert-true] gives every surface a full set of distinct layers */ +/* ✔ [assert-true] gives every surface a full set of distinct layers */ +/* ✔ [assert-true] gives every surface a full set of distinct layers */ +/* ✔ [assert-true] gives every surface a full set of distinct layers */ +/* ✔ [assert-true] gives every surface a full set of distinct layers */ +/* ✔ [assert-true] gives every surface a full set of distinct layers */ +/* ✔ [assert-true] gives every surface a full set of distinct layers */ +/* ✔ [assert-true] gives every surface a full set of distinct layers */ +/* ✔ [assert-true] gives every surface a full set of distinct layers */ +/* ✔ [assert-true] gives every surface a full set of distinct layers */ +/* ✔ [assert-true] gives every surface a full set of distinct layers */ +/* */ +/* Test: accepts a ladder as a preset name, a curve, or a full spec */ +/* ✔ [assert-true] accepts a ladder as a preset name, a curve, or a full spec */ +/* ✔ [assert-true] accepts a ladder as a preset name, a curve, or a full spec */ +/* ✔ [assert-unequal] accepts a ladder as a preset name, a curve, or a full spec */ +/* ✔ [assert-unequal] accepts a ladder as a preset name, a curve, or a full spec */ +/* ✔ [assert-unequal] accepts a ladder as a preset name, a curve, or a full spec */ +/* ✔ [assert-equal] accepts a ladder as a preset name, a curve, or a full spec */ +/* */ +/* Test: ships the documented ladder presets */ +/* ✔ [assert-true] ships the documented ladder presets */ +/* ✔ [assert-true] ships the documented ladder presets */ +/* ✔ [assert-true] ships the documented ladder presets */ +/* ✔ [assert-true] ships the documented ladder presets */ +/* ✔ [assert-true] ships the documented ladder presets */ +/* */ +/* Test: follows the grayscale rhythm the component schemas expect */ +/* ✔ [assert-true] follows the grayscale rhythm the component schemas expect */ +/* ✔ [assert-true] follows the grayscale rhythm the component schemas expect */ +/* ✔ [assert-true] follows the grayscale rhythm the component schemas expect */ +/* ✔ [assert-true] follows the grayscale rhythm the component schemas expect */ +/* */ +/* Test: flips the grayscale for a dark surface but not the color ramps */ +/* ✔ [assert-true] flips the grayscale for a dark surface but not the color ramps */ +/* ✔ [assert-true] flips the grayscale for a dark surface but not the color ramps */ +/* ✔ [assert-equal] flips the grayscale for a dark surface but not the color ramps */ +/* ✔ [assert-equal] flips the grayscale for a dark surface but not the color ramps */ +/* ✔ [assert-equal] flips the grayscale for a dark surface but not the color ramps */ +/* ✔ [assert-equal] flips the grayscale for a dark surface but not the color ramps */ +/* ✔ [assert-equal] flips the grayscale for a dark surface but not the color ramps */ +/* ✔ [assert-equal] flips the grayscale for a dark surface but not the color ramps */ +/* ✔ [assert-equal] flips the grayscale for a dark surface but not the color ramps */ +/* ✔ [assert-equal] flips the grayscale for a dark surface but not the color ramps */ +/* ✔ [assert-equal] flips the grayscale for a dark surface but not the color ramps */ +/* ✔ [assert-equal] flips the grayscale for a dark surface but not the color ramps */ +/* */ +/* Test: reports which shade the seed lands nearest */ +/* ✔ [assert-equal] reports which shade the seed lands nearest */ +/* ✔ [assert-equal] reports which shade the seed lands nearest */ +/* */ +/* Test: falls back to the original multipliers on request */ +/* ✔ [assert-equal] falls back to the original multipliers on request */ +/* ✔ [assert-equal] falls back to the original multipliers on request */ +/* */ +/* */ +/* Test: should convert a color to a list of HSL values */ +/* ✔ [assert-equal] should convert a color to a list of HSL values */ +/* */ +/* Test: should include all necessarry CSS custom properties for adaptive contrast to work */ +/* ASSERT: */ +/* OUTPUT */ +:root { + --ig-wcag-a: 0.31; + --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-d65 var(--y) var(--y) var(--y); +} + +/* END_OUTPUT */ +/* CONTAINED */ +:root { + --ig-wcag-a: 0.31; + --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-d65 var(--y) var(--y) var(--y); +} + +/* END_CONTAINED */ +/* END_ASSERT */ +/* */ +/* # Module: Color :: palette :: seed color variables */ +/* -------------------------------------------------- */ +/* Test: emits --ig-{name}-seed CSS variables; uses provided gray or derives from surface */ +/* ASSERT: */ +/* OUTPUT */ +:root { + --ig-wcag-a: 0.31; + --ig-wcag-aa: 0.185; + --ig-wcag-aaa: 0.178; + --ig-contrast-level: var(--ig-wcag-aa); + --y: clamp(0, (y / var(--ig-contrast-level) - 1) * -infinity, 1); + --y-contrast: xyz-d65 var(--y) var(--y) var(--y); +} + +:root { + --ig-primary-50: rgb(226, 237, 251); + --ig-primary-50-contrast: hsla(from color(from var(--ig-primary-50) var(--y-contrast)) h 0 l/1); + --ig-primary-100: rgb(172, 207, 251); + --ig-primary-100-contrast: hsla(from color(from var(--ig-primary-100) var(--y-contrast)) h 0 l/1); + --ig-primary-200: rgb(117, 180, 250); + --ig-primary-200-contrast: hsla(from color(from var(--ig-primary-200) var(--y-contrast)) h 0 l/1); + --ig-primary-300: rgb(67, 155, 239); + --ig-primary-300-contrast: hsla(from color(from var(--ig-primary-300) var(--y-contrast)) h 0 l/1); + --ig-primary-400: rgb(27, 131, 214); + --ig-primary-400-contrast: hsla(from color(from var(--ig-primary-400) var(--y-contrast)) h 0 l/1); + --ig-primary-500: rgb(9, 109, 183); + --ig-primary-500-contrast: hsla(from color(from var(--ig-primary-500) var(--y-contrast)) h 0 l/1); + --ig-primary-600: rgb(6, 89, 150); + --ig-primary-600-contrast: hsla(from color(from var(--ig-primary-600) var(--y-contrast)) h 0 l/1); + --ig-primary-700: rgb(11, 69, 116); + --ig-primary-700-contrast: hsla(from color(from var(--ig-primary-700) var(--y-contrast)) h 0 l/1); + --ig-primary-800: rgb(12, 48, 80); + --ig-primary-800-contrast: hsla(from color(from var(--ig-primary-800) var(--y-contrast)) h 0 l/1); + --ig-primary-900: rgb(6, 22, 37); + --ig-primary-900-contrast: hsla(from color(from var(--ig-primary-900) var(--y-contrast)) h 0 l/1); + --ig-primary-seed: #09f; + --ig-primary-seed-contrast: hsla(from color(from var(--ig-primary-seed) var(--y-contrast)) h 0 l/1); + --ig-primary-A100: rgb(191, 221, 255); + --ig-primary-A100-contrast: hsla(from color(from var(--ig-primary-A100) var(--y-contrast)) h 0 l/1); + --ig-primary-A200: rgb(73, 164, 255); + --ig-primary-A200-contrast: hsla(from color(from var(--ig-primary-A200) var(--y-contrast)) h 0 l/1); + --ig-primary-A400: rgb(4, 127, 213); + --ig-primary-A400-contrast: hsla(from color(from var(--ig-primary-A400) var(--y-contrast)) h 0 l/1); + --ig-primary-A700: rgb(0, 100, 169); + --ig-primary-A700-contrast: hsla(from color(from var(--ig-primary-A700) var(--y-contrast)) h 0 l/1); + --ig-secondary-50: rgb(240, 235, 245); + --ig-secondary-50-contrast: hsla(from color(from var(--ig-secondary-50) var(--y-contrast)) h 0 l/1); + --ig-secondary-100: rgb(213, 198, 231); + --ig-secondary-100-contrast: hsla(from color(from var(--ig-secondary-100) var(--y-contrast)) h 0 l/1); + --ig-secondary-200: rgb(190, 166, 221); + --ig-secondary-200-contrast: hsla(from color(from var(--ig-secondary-200) var(--y-contrast)) h 0 l/1); + --ig-secondary-300: rgb(168, 136, 211); + --ig-secondary-300-contrast: hsla(from color(from var(--ig-secondary-300) var(--y-contrast)) h 0 l/1); + --ig-secondary-400: rgb(146, 110, 198); + --ig-secondary-400-contrast: hsla(from color(from var(--ig-secondary-400) var(--y-contrast)) h 0 l/1); + --ig-secondary-500: rgb(125, 87, 177); + --ig-secondary-500-contrast: hsla(from color(from var(--ig-secondary-500) var(--y-contrast)) h 0 l/1); + --ig-secondary-600: rgb(103, 69, 150); + --ig-secondary-600-contrast: hsla(from color(from var(--ig-secondary-600) var(--y-contrast)) h 0 l/1); + --ig-secondary-700: rgb(80, 53, 117); + --ig-secondary-700-contrast: hsla(from color(from var(--ig-secondary-700) var(--y-contrast)) h 0 l/1); + --ig-secondary-800: rgb(56, 38, 81); + --ig-secondary-800-contrast: hsla(from color(from var(--ig-secondary-800) var(--y-contrast)) h 0 l/1); + --ig-secondary-900: rgb(25, 17, 38); + --ig-secondary-900-contrast: hsla(from color(from var(--ig-secondary-900) var(--y-contrast)) h 0 l/1); + --ig-secondary-seed: #97c; + --ig-secondary-seed-contrast: hsla(from color(from var(--ig-secondary-seed) var(--y-contrast)) h 0 l/1); + --ig-secondary-A100: rgb(233, 209, 255); + --ig-secondary-A100-contrast: hsla(from color(from var(--ig-secondary-A100) var(--y-contrast)) h 0 l/1); + --ig-secondary-A200: rgb(192, 134, 255); + --ig-secondary-A200-contrast: hsla(from color(from var(--ig-secondary-A200) var(--y-contrast)) h 0 l/1); + --ig-secondary-A400: rgb(163, 75, 255); + --ig-secondary-A400-contrast: hsla(from color(from var(--ig-secondary-A400) var(--y-contrast)) h 0 l/1); + --ig-secondary-A700: rgb(139, 23, 233); + --ig-secondary-A700-contrast: hsla(from color(from var(--ig-secondary-A700) var(--y-contrast)) h 0 l/1); + --ig-gray-50: rgb(251, 251, 251); + --ig-gray-50-contrast: hsla(from color(from var(--ig-gray-50) var(--y-contrast)) h 0 l/1); + --ig-gray-100: rgb(247, 247, 247); + --ig-gray-100-contrast: hsla(from color(from var(--ig-gray-100) var(--y-contrast)) h 0 l/1); + --ig-gray-200: rgb(236, 236, 236); + --ig-gray-200-contrast: hsla(from color(from var(--ig-gray-200) var(--y-contrast)) h 0 l/1); + --ig-gray-300: rgb(217, 217, 217); + --ig-gray-300-contrast: hsla(from color(from var(--ig-gray-300) var(--y-contrast)) h 0 l/1); + --ig-gray-400: rgb(193, 193, 193); + --ig-gray-400-contrast: hsla(from color(from var(--ig-gray-400) var(--y-contrast)) h 0 l/1); + --ig-gray-500: rgb(164, 164, 164); + --ig-gray-500-contrast: hsla(from color(from var(--ig-gray-500) var(--y-contrast)) h 0 l/1); + --ig-gray-600: rgb(132, 132, 132); + --ig-gray-600-contrast: hsla(from color(from var(--ig-gray-600) var(--y-contrast)) h 0 l/1); + --ig-gray-700: rgb(99, 99, 99); + --ig-gray-700-contrast: hsla(from color(from var(--ig-gray-700) var(--y-contrast)) h 0 l/1); + --ig-gray-800: rgb(66, 66, 66); + --ig-gray-800-contrast: hsla(from color(from var(--ig-gray-800) var(--y-contrast)) h 0 l/1); + --ig-gray-900: rgb(33, 33, 33); + --ig-gray-900-contrast: hsla(from color(from var(--ig-gray-900) var(--y-contrast)) h 0 l/1); + --ig-gray-seed: #333; + --ig-gray-seed-contrast: hsla(from color(from var(--ig-gray-seed) var(--y-contrast)) h 0 l/1); + --ig-surface-50: rgb(253, 253, 253); + --ig-surface-50-contrast: hsla(from color(from var(--ig-surface-50) var(--y-contrast)) h 0 l/1); + --ig-surface-100: rgb(240, 240, 240); + --ig-surface-100-contrast: hsla(from color(from var(--ig-surface-100) var(--y-contrast)) h 0 l/1); + --ig-surface-200: rgb(228, 228, 228); + --ig-surface-200-contrast: hsla(from color(from var(--ig-surface-200) var(--y-contrast)) h 0 l/1); + --ig-surface-300: rgb(216, 216, 216); + --ig-surface-300-contrast: hsla(from color(from var(--ig-surface-300) var(--y-contrast)) h 0 l/1); + --ig-surface-400: rgb(204, 204, 204); + --ig-surface-400-contrast: hsla(from color(from var(--ig-surface-400) var(--y-contrast)) h 0 l/1); + --ig-surface-500: rgb(255, 255, 255); + --ig-surface-500-contrast: hsla(from color(from var(--ig-surface-500) var(--y-contrast)) h 0 l/1); + --ig-surface-600: rgb(194, 194, 194); + --ig-surface-600-contrast: hsla(from color(from var(--ig-surface-600) var(--y-contrast)) h 0 l/1); + --ig-surface-700: rgb(183, 183, 183); + --ig-surface-700-contrast: hsla(from color(from var(--ig-surface-700) var(--y-contrast)) h 0 l/1); + --ig-surface-800: rgb(174, 174, 174); + --ig-surface-800-contrast: hsla(from color(from var(--ig-surface-800) var(--y-contrast)) h 0 l/1); + --ig-surface-900: rgb(164, 164, 164); + --ig-surface-900-contrast: hsla(from color(from var(--ig-surface-900) var(--y-contrast)) h 0 l/1); + --ig-surface-seed: #fff; + --ig-surface-seed-contrast: hsla(from color(from var(--ig-surface-seed) var(--y-contrast)) h 0 l/1); + --ig-surface-A100: rgb(218, 218, 218); + --ig-surface-A100-contrast: hsla(from color(from var(--ig-surface-A100) var(--y-contrast)) h 0 l/1); + --ig-surface-A200: rgb(161, 161, 161); + --ig-surface-A200-contrast: hsla(from color(from var(--ig-surface-A200) var(--y-contrast)) h 0 l/1); + --ig-surface-A400: rgb(124, 124, 124); + --ig-surface-A400-contrast: hsla(from color(from var(--ig-surface-A400) var(--y-contrast)) h 0 l/1); + --ig-surface-A700: rgb(97, 97, 97); + --ig-surface-A700-contrast: hsla(from color(from var(--ig-surface-A700) var(--y-contrast)) h 0 l/1); + --ig-info-50: rgb(232, 235, 252); + --ig-info-50-contrast: hsla(from color(from var(--ig-info-50) var(--y-contrast)) h 0 l/1); + --ig-info-100: rgb(190, 203, 253); + --ig-info-100-contrast: hsla(from color(from var(--ig-info-100) var(--y-contrast)) h 0 l/1); + --ig-info-200: rgb(149, 173, 255); + --ig-info-200-contrast: hsla(from color(from var(--ig-info-200) var(--y-contrast)) h 0 l/1); + --ig-info-300: rgb(109, 145, 255); + --ig-info-300-contrast: hsla(from color(from var(--ig-info-300) var(--y-contrast)) h 0 l/1); + --ig-info-400: rgb(70, 117, 255); + --ig-info-400-contrast: hsla(from color(from var(--ig-info-400) var(--y-contrast)) h 0 l/1); + --ig-info-500: rgb(34, 91, 245); + --ig-info-500-contrast: hsla(from color(from var(--ig-info-500) var(--y-contrast)) h 0 l/1); + --ig-info-600: rgb(15, 67, 220); + --ig-info-600-contrast: hsla(from color(from var(--ig-info-600) var(--y-contrast)) h 0 l/1); + --ig-info-700: rgb(7, 50, 180); + --ig-info-700-contrast: hsla(from color(from var(--ig-info-700) var(--y-contrast)) h 0 l/1); + --ig-info-800: rgb(6, 36, 125); + --ig-info-800-contrast: hsla(from color(from var(--ig-info-800) var(--y-contrast)) h 0 l/1); + --ig-info-900: rgb(4, 18, 59); + --ig-info-900-contrast: hsla(from color(from var(--ig-info-900) var(--y-contrast)) h 0 l/1); + --ig-info-seed: blue; + --ig-info-seed-contrast: hsla(from color(from var(--ig-info-seed) var(--y-contrast)) h 0 l/1); + --ig-info-A100: rgb(207, 217, 255); + --ig-info-A100-contrast: hsla(from color(from var(--ig-info-A100) var(--y-contrast)) h 0 l/1); + --ig-info-A200: rgb(124, 156, 255); + --ig-info-A200-contrast: hsla(from color(from var(--ig-info-A200) var(--y-contrast)) h 0 l/1); + --ig-info-A400: rgb(63, 113, 255); + --ig-info-A400-contrast: hsla(from color(from var(--ig-info-A400) var(--y-contrast)) h 0 l/1); + --ig-info-A700: rgb(16, 75, 249); + --ig-info-A700-contrast: hsla(from color(from var(--ig-info-A700) var(--y-contrast)) h 0 l/1); + --ig-success-50: rgb(193, 251, 187); + --ig-success-50-contrast: hsla(from color(from var(--ig-success-50) var(--y-contrast)) h 0 l/1); + --ig-success-100: rgb(93, 231, 86); + --ig-success-100-contrast: hsla(from color(from var(--ig-success-100) var(--y-contrast)) h 0 l/1); + --ig-success-200: rgb(47, 203, 42); + --ig-success-200-contrast: hsla(from color(from var(--ig-success-200) var(--y-contrast)) h 0 l/1); + --ig-success-300: rgb(17, 175, 14); + --ig-success-300-contrast: hsla(from color(from var(--ig-success-300) var(--y-contrast)) h 0 l/1); + --ig-success-400: rgb(1, 148, 1); + --ig-success-400-contrast: hsla(from color(from var(--ig-success-400) var(--y-contrast)) h 0 l/1); + --ig-success-500: rgb(1, 124, 0); + --ig-success-500-contrast: hsla(from color(from var(--ig-success-500) var(--y-contrast)) h 0 l/1); + --ig-success-600: rgb(5, 101, 4); + --ig-success-600-contrast: hsla(from color(from var(--ig-success-600) var(--y-contrast)) h 0 l/1); + --ig-success-700: rgb(11, 78, 9); + --ig-success-700-contrast: hsla(from color(from var(--ig-success-700) var(--y-contrast)) h 0 l/1); + --ig-success-800: rgb(13, 55, 11); + --ig-success-800-contrast: hsla(from color(from var(--ig-success-800) var(--y-contrast)) h 0 l/1); + --ig-success-900: rgb(7, 25, 6); + --ig-success-900-contrast: hsla(from color(from var(--ig-success-900) var(--y-contrast)) h 0 l/1); + --ig-success-seed: green; + --ig-success-seed-contrast: hsla(from color(from var(--ig-success-seed) var(--y-contrast)) h 0 l/1); + --ig-success-A100: rgb(56, 251, 50); + --ig-success-A100-contrast: hsla(from color(from var(--ig-success-A100) var(--y-contrast)) h 0 l/1); + --ig-success-A200: rgb(0, 187, 0); + --ig-success-A200-contrast: hsla(from color(from var(--ig-success-A200) var(--y-contrast)) h 0 l/1); + --ig-success-A400: rgb(0, 144, 0); + --ig-success-A400-contrast: hsla(from color(from var(--ig-success-A400) var(--y-contrast)) h 0 l/1); + --ig-success-A700: rgb(0, 114, 0); + --ig-success-A700-contrast: hsla(from color(from var(--ig-success-A700) var(--y-contrast)) h 0 l/1); + --ig-warn-50: rgb(251, 233, 213); + --ig-warn-50-contrast: hsla(from color(from var(--ig-warn-50) var(--y-contrast)) h 0 l/1); + --ig-warn-100: rgb(247, 195, 133); + --ig-warn-100-contrast: hsla(from color(from var(--ig-warn-100) var(--y-contrast)) h 0 l/1); + --ig-warn-200: rgb(233, 161, 65); + --ig-warn-200-contrast: hsla(from color(from var(--ig-warn-200) var(--y-contrast)) h 0 l/1); + --ig-warn-300: rgb(207, 135, 24); + --ig-warn-300-contrast: hsla(from color(from var(--ig-warn-300) var(--y-contrast)) h 0 l/1); + --ig-warn-400: rgb(177, 114, 4); + --ig-warn-400-contrast: hsla(from color(from var(--ig-warn-400) var(--y-contrast)) h 0 l/1); + --ig-warn-500: rgb(149, 94, 1); + --ig-warn-500-contrast: hsla(from color(from var(--ig-warn-500) var(--y-contrast)) h 0 l/1); + --ig-warn-600: rgb(121, 77, 4); + --ig-warn-600-contrast: hsla(from color(from var(--ig-warn-600) var(--y-contrast)) h 0 l/1); + --ig-warn-700: rgb(94, 60, 9); + --ig-warn-700-contrast: hsla(from color(from var(--ig-warn-700) var(--y-contrast)) h 0 l/1); + --ig-warn-800: rgb(65, 42, 11); + --ig-warn-800-contrast: hsla(from color(from var(--ig-warn-800) var(--y-contrast)) h 0 l/1); + --ig-warn-900: rgb(30, 19, 6); + --ig-warn-900-contrast: hsla(from color(from var(--ig-warn-900) var(--y-contrast)) h 0 l/1); + --ig-warn-seed: orange; + --ig-warn-seed-contrast: hsla(from color(from var(--ig-warn-seed) var(--y-contrast)) h 0 l/1); + --ig-warn-A100: rgb(255, 211, 156); + --ig-warn-A100-contrast: hsla(from color(from var(--ig-warn-A100) var(--y-contrast)) h 0 l/1); + --ig-warn-A200: rgb(222, 143, 4); + --ig-warn-A200-contrast: hsla(from color(from var(--ig-warn-A200) var(--y-contrast)) h 0 l/1); + --ig-warn-A400: rgb(172, 110, 0); + --ig-warn-A400-contrast: hsla(from color(from var(--ig-warn-A400) var(--y-contrast)) h 0 l/1); + --ig-warn-A700: rgb(136, 86, 0); + --ig-warn-A700-contrast: hsla(from color(from var(--ig-warn-A700) var(--y-contrast)) h 0 l/1); + --ig-error-50: rgb(254, 231, 227); + --ig-error-50-contrast: hsla(from color(from var(--ig-error-50) var(--y-contrast)) h 0 l/1); + --ig-error-100: rgb(255, 188, 177); + --ig-error-100-contrast: hsla(from color(from var(--ig-error-100) var(--y-contrast)) h 0 l/1); + --ig-error-200: rgb(255, 146, 130); + --ig-error-200-contrast: hsla(from color(from var(--ig-error-200) var(--y-contrast)) h 0 l/1); + --ig-error-300: rgb(255, 99, 82); + --ig-error-300-contrast: hsla(from color(from var(--ig-error-300) var(--y-contrast)) h 0 l/1); + --ig-error-400: rgb(237, 58, 45); + --ig-error-400-contrast: hsla(from color(from var(--ig-error-400) var(--y-contrast)) h 0 l/1); + --ig-error-500: rgb(209, 28, 19); + --ig-error-500-contrast: hsla(from color(from var(--ig-error-500) var(--y-contrast)) h 0 l/1); + --ig-error-600: rgb(174, 16, 9); + --ig-error-600-contrast: hsla(from color(from var(--ig-error-600) var(--y-contrast)) h 0 l/1); + --ig-error-700: rgb(135, 17, 11); + --ig-error-700-contrast: hsla(from color(from var(--ig-error-700) var(--y-contrast)) h 0 l/1); + --ig-error-800: rgb(93, 18, 12); + --ig-error-800-contrast: hsla(from color(from var(--ig-error-800) var(--y-contrast)) h 0 l/1); + --ig-error-900: rgb(44, 9, 6); + --ig-error-900-contrast: hsla(from color(from var(--ig-error-900) var(--y-contrast)) h 0 l/1); + --ig-error-seed: red; + --ig-error-seed-contrast: hsla(from color(from var(--ig-error-seed) var(--y-contrast)) h 0 l/1); + --ig-error-A100: rgb(255, 207, 198); + --ig-error-A100-contrast: hsla(from color(from var(--ig-error-A100) var(--y-contrast)) h 0 l/1); + --ig-error-A200: rgb(255, 119, 101); + --ig-error-A200-contrast: hsla(from color(from var(--ig-error-A200) var(--y-contrast)) h 0 l/1); + --ig-error-A400: rgb(242, 34, 24); + --ig-error-A400-contrast: hsla(from color(from var(--ig-error-A400) var(--y-contrast)) h 0 l/1); + --ig-error-A700: rgb(197, 2, 1); + --ig-error-A700-contrast: hsla(from color(from var(--ig-error-A700) var(--y-contrast)) h 0 l/1); +} + +/* END_OUTPUT */ +/* CONTAINED */ +:root { + --ig-primary-seed: #09f; + --ig-gray-seed: #333; +} + +/* END_CONTAINED */ +/* END_ASSERT */ +/* ASSERT: */ +/* OUTPUT */ +:root { + --ig-wcag-a: 0.31; + --ig-wcag-aa: 0.185; + --ig-wcag-aaa: 0.178; + --ig-contrast-level: var(--ig-wcag-aa); + --y: clamp(0, (y / var(--ig-contrast-level) - 1) * -infinity, 1); + --y-contrast: xyz-d65 var(--y) var(--y) var(--y); +} + +:root { + --ig-primary-50: rgb(226, 237, 251); + --ig-primary-50-contrast: hsla(from color(from var(--ig-primary-50) var(--y-contrast)) h 0 l/1); + --ig-primary-100: rgb(172, 207, 251); + --ig-primary-100-contrast: hsla(from color(from var(--ig-primary-100) var(--y-contrast)) h 0 l/1); + --ig-primary-200: rgb(117, 180, 250); + --ig-primary-200-contrast: hsla(from color(from var(--ig-primary-200) var(--y-contrast)) h 0 l/1); + --ig-primary-300: rgb(67, 155, 239); + --ig-primary-300-contrast: hsla(from color(from var(--ig-primary-300) var(--y-contrast)) h 0 l/1); + --ig-primary-400: rgb(27, 131, 214); + --ig-primary-400-contrast: hsla(from color(from var(--ig-primary-400) var(--y-contrast)) h 0 l/1); + --ig-primary-500: rgb(9, 109, 183); + --ig-primary-500-contrast: hsla(from color(from var(--ig-primary-500) var(--y-contrast)) h 0 l/1); + --ig-primary-600: rgb(6, 89, 150); + --ig-primary-600-contrast: hsla(from color(from var(--ig-primary-600) var(--y-contrast)) h 0 l/1); + --ig-primary-700: rgb(11, 69, 116); + --ig-primary-700-contrast: hsla(from color(from var(--ig-primary-700) var(--y-contrast)) h 0 l/1); + --ig-primary-800: rgb(12, 48, 80); + --ig-primary-800-contrast: hsla(from color(from var(--ig-primary-800) var(--y-contrast)) h 0 l/1); + --ig-primary-900: rgb(6, 22, 37); + --ig-primary-900-contrast: hsla(from color(from var(--ig-primary-900) var(--y-contrast)) h 0 l/1); + --ig-primary-seed: #09f; + --ig-primary-seed-contrast: hsla(from color(from var(--ig-primary-seed) var(--y-contrast)) h 0 l/1); + --ig-primary-A100: rgb(191, 221, 255); + --ig-primary-A100-contrast: hsla(from color(from var(--ig-primary-A100) var(--y-contrast)) h 0 l/1); + --ig-primary-A200: rgb(73, 164, 255); + --ig-primary-A200-contrast: hsla(from color(from var(--ig-primary-A200) var(--y-contrast)) h 0 l/1); + --ig-primary-A400: rgb(4, 127, 213); + --ig-primary-A400-contrast: hsla(from color(from var(--ig-primary-A400) var(--y-contrast)) h 0 l/1); + --ig-primary-A700: rgb(0, 100, 169); + --ig-primary-A700-contrast: hsla(from color(from var(--ig-primary-A700) var(--y-contrast)) h 0 l/1); + --ig-secondary-50: rgb(240, 235, 245); + --ig-secondary-50-contrast: hsla(from color(from var(--ig-secondary-50) var(--y-contrast)) h 0 l/1); + --ig-secondary-100: rgb(213, 198, 231); + --ig-secondary-100-contrast: hsla(from color(from var(--ig-secondary-100) var(--y-contrast)) h 0 l/1); + --ig-secondary-200: rgb(190, 166, 221); + --ig-secondary-200-contrast: hsla(from color(from var(--ig-secondary-200) var(--y-contrast)) h 0 l/1); + --ig-secondary-300: rgb(168, 136, 211); + --ig-secondary-300-contrast: hsla(from color(from var(--ig-secondary-300) var(--y-contrast)) h 0 l/1); + --ig-secondary-400: rgb(146, 110, 198); + --ig-secondary-400-contrast: hsla(from color(from var(--ig-secondary-400) var(--y-contrast)) h 0 l/1); + --ig-secondary-500: rgb(125, 87, 177); + --ig-secondary-500-contrast: hsla(from color(from var(--ig-secondary-500) var(--y-contrast)) h 0 l/1); + --ig-secondary-600: rgb(103, 69, 150); + --ig-secondary-600-contrast: hsla(from color(from var(--ig-secondary-600) var(--y-contrast)) h 0 l/1); + --ig-secondary-700: rgb(80, 53, 117); + --ig-secondary-700-contrast: hsla(from color(from var(--ig-secondary-700) var(--y-contrast)) h 0 l/1); + --ig-secondary-800: rgb(56, 38, 81); + --ig-secondary-800-contrast: hsla(from color(from var(--ig-secondary-800) var(--y-contrast)) h 0 l/1); + --ig-secondary-900: rgb(25, 17, 38); + --ig-secondary-900-contrast: hsla(from color(from var(--ig-secondary-900) var(--y-contrast)) h 0 l/1); + --ig-secondary-seed: #97c; + --ig-secondary-seed-contrast: hsla(from color(from var(--ig-secondary-seed) var(--y-contrast)) h 0 l/1); + --ig-secondary-A100: rgb(233, 209, 255); + --ig-secondary-A100-contrast: hsla(from color(from var(--ig-secondary-A100) var(--y-contrast)) h 0 l/1); + --ig-secondary-A200: rgb(192, 134, 255); + --ig-secondary-A200-contrast: hsla(from color(from var(--ig-secondary-A200) var(--y-contrast)) h 0 l/1); + --ig-secondary-A400: rgb(163, 75, 255); + --ig-secondary-A400-contrast: hsla(from color(from var(--ig-secondary-A400) var(--y-contrast)) h 0 l/1); + --ig-secondary-A700: rgb(139, 23, 233); + --ig-secondary-A700-contrast: hsla(from color(from var(--ig-secondary-A700) var(--y-contrast)) h 0 l/1); + --ig-gray-50: rgb(251, 251, 251); + --ig-gray-50-contrast: hsla(from color(from var(--ig-gray-50) var(--y-contrast)) h 0 l/1); + --ig-gray-100: rgb(247, 247, 247); + --ig-gray-100-contrast: hsla(from color(from var(--ig-gray-100) var(--y-contrast)) h 0 l/1); + --ig-gray-200: rgb(236, 236, 236); + --ig-gray-200-contrast: hsla(from color(from var(--ig-gray-200) var(--y-contrast)) h 0 l/1); + --ig-gray-300: rgb(217, 217, 217); + --ig-gray-300-contrast: hsla(from color(from var(--ig-gray-300) var(--y-contrast)) h 0 l/1); + --ig-gray-400: rgb(193, 193, 193); + --ig-gray-400-contrast: hsla(from color(from var(--ig-gray-400) var(--y-contrast)) h 0 l/1); + --ig-gray-500: rgb(164, 164, 164); + --ig-gray-500-contrast: hsla(from color(from var(--ig-gray-500) var(--y-contrast)) h 0 l/1); + --ig-gray-600: rgb(132, 132, 132); + --ig-gray-600-contrast: hsla(from color(from var(--ig-gray-600) var(--y-contrast)) h 0 l/1); + --ig-gray-700: rgb(99, 99, 99); + --ig-gray-700-contrast: hsla(from color(from var(--ig-gray-700) var(--y-contrast)) h 0 l/1); + --ig-gray-800: rgb(66, 66, 66); + --ig-gray-800-contrast: hsla(from color(from var(--ig-gray-800) var(--y-contrast)) h 0 l/1); + --ig-gray-900: rgb(33, 33, 33); + --ig-gray-900-contrast: hsla(from color(from var(--ig-gray-900) var(--y-contrast)) h 0 l/1); + --ig-gray-seed: #000; + --ig-gray-seed-contrast: hsla(from color(from var(--ig-gray-seed) var(--y-contrast)) h 0 l/1); + --ig-surface-50: rgb(253, 253, 253); + --ig-surface-50-contrast: hsla(from color(from var(--ig-surface-50) var(--y-contrast)) h 0 l/1); + --ig-surface-100: rgb(240, 240, 240); + --ig-surface-100-contrast: hsla(from color(from var(--ig-surface-100) var(--y-contrast)) h 0 l/1); + --ig-surface-200: rgb(228, 228, 228); + --ig-surface-200-contrast: hsla(from color(from var(--ig-surface-200) var(--y-contrast)) h 0 l/1); + --ig-surface-300: rgb(216, 216, 216); + --ig-surface-300-contrast: hsla(from color(from var(--ig-surface-300) var(--y-contrast)) h 0 l/1); + --ig-surface-400: rgb(204, 204, 204); + --ig-surface-400-contrast: hsla(from color(from var(--ig-surface-400) var(--y-contrast)) h 0 l/1); + --ig-surface-500: rgb(255, 255, 255); + --ig-surface-500-contrast: hsla(from color(from var(--ig-surface-500) var(--y-contrast)) h 0 l/1); + --ig-surface-600: rgb(194, 194, 194); + --ig-surface-600-contrast: hsla(from color(from var(--ig-surface-600) var(--y-contrast)) h 0 l/1); + --ig-surface-700: rgb(183, 183, 183); + --ig-surface-700-contrast: hsla(from color(from var(--ig-surface-700) var(--y-contrast)) h 0 l/1); + --ig-surface-800: rgb(174, 174, 174); + --ig-surface-800-contrast: hsla(from color(from var(--ig-surface-800) var(--y-contrast)) h 0 l/1); + --ig-surface-900: rgb(164, 164, 164); + --ig-surface-900-contrast: hsla(from color(from var(--ig-surface-900) var(--y-contrast)) h 0 l/1); + --ig-surface-seed: #fff; + --ig-surface-seed-contrast: hsla(from color(from var(--ig-surface-seed) var(--y-contrast)) h 0 l/1); + --ig-surface-A100: rgb(218, 218, 218); + --ig-surface-A100-contrast: hsla(from color(from var(--ig-surface-A100) var(--y-contrast)) h 0 l/1); + --ig-surface-A200: rgb(161, 161, 161); + --ig-surface-A200-contrast: hsla(from color(from var(--ig-surface-A200) var(--y-contrast)) h 0 l/1); + --ig-surface-A400: rgb(124, 124, 124); + --ig-surface-A400-contrast: hsla(from color(from var(--ig-surface-A400) var(--y-contrast)) h 0 l/1); + --ig-surface-A700: rgb(97, 97, 97); + --ig-surface-A700-contrast: hsla(from color(from var(--ig-surface-A700) var(--y-contrast)) h 0 l/1); + --ig-info-50: rgb(232, 235, 252); + --ig-info-50-contrast: hsla(from color(from var(--ig-info-50) var(--y-contrast)) h 0 l/1); + --ig-info-100: rgb(190, 203, 253); + --ig-info-100-contrast: hsla(from color(from var(--ig-info-100) var(--y-contrast)) h 0 l/1); + --ig-info-200: rgb(149, 173, 255); + --ig-info-200-contrast: hsla(from color(from var(--ig-info-200) var(--y-contrast)) h 0 l/1); + --ig-info-300: rgb(109, 145, 255); + --ig-info-300-contrast: hsla(from color(from var(--ig-info-300) var(--y-contrast)) h 0 l/1); + --ig-info-400: rgb(70, 117, 255); + --ig-info-400-contrast: hsla(from color(from var(--ig-info-400) var(--y-contrast)) h 0 l/1); + --ig-info-500: rgb(34, 91, 245); + --ig-info-500-contrast: hsla(from color(from var(--ig-info-500) var(--y-contrast)) h 0 l/1); + --ig-info-600: rgb(15, 67, 220); + --ig-info-600-contrast: hsla(from color(from var(--ig-info-600) var(--y-contrast)) h 0 l/1); + --ig-info-700: rgb(7, 50, 180); + --ig-info-700-contrast: hsla(from color(from var(--ig-info-700) var(--y-contrast)) h 0 l/1); + --ig-info-800: rgb(6, 36, 125); + --ig-info-800-contrast: hsla(from color(from var(--ig-info-800) var(--y-contrast)) h 0 l/1); + --ig-info-900: rgb(4, 18, 59); + --ig-info-900-contrast: hsla(from color(from var(--ig-info-900) var(--y-contrast)) h 0 l/1); + --ig-info-seed: blue; + --ig-info-seed-contrast: hsla(from color(from var(--ig-info-seed) var(--y-contrast)) h 0 l/1); + --ig-info-A100: rgb(207, 217, 255); + --ig-info-A100-contrast: hsla(from color(from var(--ig-info-A100) var(--y-contrast)) h 0 l/1); + --ig-info-A200: rgb(124, 156, 255); + --ig-info-A200-contrast: hsla(from color(from var(--ig-info-A200) var(--y-contrast)) h 0 l/1); + --ig-info-A400: rgb(63, 113, 255); + --ig-info-A400-contrast: hsla(from color(from var(--ig-info-A400) var(--y-contrast)) h 0 l/1); + --ig-info-A700: rgb(16, 75, 249); + --ig-info-A700-contrast: hsla(from color(from var(--ig-info-A700) var(--y-contrast)) h 0 l/1); + --ig-success-50: rgb(193, 251, 187); + --ig-success-50-contrast: hsla(from color(from var(--ig-success-50) var(--y-contrast)) h 0 l/1); + --ig-success-100: rgb(93, 231, 86); + --ig-success-100-contrast: hsla(from color(from var(--ig-success-100) var(--y-contrast)) h 0 l/1); + --ig-success-200: rgb(47, 203, 42); + --ig-success-200-contrast: hsla(from color(from var(--ig-success-200) var(--y-contrast)) h 0 l/1); + --ig-success-300: rgb(17, 175, 14); + --ig-success-300-contrast: hsla(from color(from var(--ig-success-300) var(--y-contrast)) h 0 l/1); + --ig-success-400: rgb(1, 148, 1); + --ig-success-400-contrast: hsla(from color(from var(--ig-success-400) var(--y-contrast)) h 0 l/1); + --ig-success-500: rgb(1, 124, 0); + --ig-success-500-contrast: hsla(from color(from var(--ig-success-500) var(--y-contrast)) h 0 l/1); + --ig-success-600: rgb(5, 101, 4); + --ig-success-600-contrast: hsla(from color(from var(--ig-success-600) var(--y-contrast)) h 0 l/1); + --ig-success-700: rgb(11, 78, 9); + --ig-success-700-contrast: hsla(from color(from var(--ig-success-700) var(--y-contrast)) h 0 l/1); + --ig-success-800: rgb(13, 55, 11); + --ig-success-800-contrast: hsla(from color(from var(--ig-success-800) var(--y-contrast)) h 0 l/1); + --ig-success-900: rgb(7, 25, 6); + --ig-success-900-contrast: hsla(from color(from var(--ig-success-900) var(--y-contrast)) h 0 l/1); + --ig-success-seed: green; + --ig-success-seed-contrast: hsla(from color(from var(--ig-success-seed) var(--y-contrast)) h 0 l/1); + --ig-success-A100: rgb(56, 251, 50); + --ig-success-A100-contrast: hsla(from color(from var(--ig-success-A100) var(--y-contrast)) h 0 l/1); + --ig-success-A200: rgb(0, 187, 0); + --ig-success-A200-contrast: hsla(from color(from var(--ig-success-A200) var(--y-contrast)) h 0 l/1); + --ig-success-A400: rgb(0, 144, 0); + --ig-success-A400-contrast: hsla(from color(from var(--ig-success-A400) var(--y-contrast)) h 0 l/1); + --ig-success-A700: rgb(0, 114, 0); + --ig-success-A700-contrast: hsla(from color(from var(--ig-success-A700) var(--y-contrast)) h 0 l/1); + --ig-warn-50: rgb(251, 233, 213); + --ig-warn-50-contrast: hsla(from color(from var(--ig-warn-50) var(--y-contrast)) h 0 l/1); + --ig-warn-100: rgb(247, 195, 133); + --ig-warn-100-contrast: hsla(from color(from var(--ig-warn-100) var(--y-contrast)) h 0 l/1); + --ig-warn-200: rgb(233, 161, 65); + --ig-warn-200-contrast: hsla(from color(from var(--ig-warn-200) var(--y-contrast)) h 0 l/1); + --ig-warn-300: rgb(207, 135, 24); + --ig-warn-300-contrast: hsla(from color(from var(--ig-warn-300) var(--y-contrast)) h 0 l/1); + --ig-warn-400: rgb(177, 114, 4); + --ig-warn-400-contrast: hsla(from color(from var(--ig-warn-400) var(--y-contrast)) h 0 l/1); + --ig-warn-500: rgb(149, 94, 1); + --ig-warn-500-contrast: hsla(from color(from var(--ig-warn-500) var(--y-contrast)) h 0 l/1); + --ig-warn-600: rgb(121, 77, 4); + --ig-warn-600-contrast: hsla(from color(from var(--ig-warn-600) var(--y-contrast)) h 0 l/1); + --ig-warn-700: rgb(94, 60, 9); + --ig-warn-700-contrast: hsla(from color(from var(--ig-warn-700) var(--y-contrast)) h 0 l/1); + --ig-warn-800: rgb(65, 42, 11); + --ig-warn-800-contrast: hsla(from color(from var(--ig-warn-800) var(--y-contrast)) h 0 l/1); + --ig-warn-900: rgb(30, 19, 6); + --ig-warn-900-contrast: hsla(from color(from var(--ig-warn-900) var(--y-contrast)) h 0 l/1); + --ig-warn-seed: orange; + --ig-warn-seed-contrast: hsla(from color(from var(--ig-warn-seed) var(--y-contrast)) h 0 l/1); + --ig-warn-A100: rgb(255, 211, 156); + --ig-warn-A100-contrast: hsla(from color(from var(--ig-warn-A100) var(--y-contrast)) h 0 l/1); + --ig-warn-A200: rgb(222, 143, 4); + --ig-warn-A200-contrast: hsla(from color(from var(--ig-warn-A200) var(--y-contrast)) h 0 l/1); + --ig-warn-A400: rgb(172, 110, 0); + --ig-warn-A400-contrast: hsla(from color(from var(--ig-warn-A400) var(--y-contrast)) h 0 l/1); + --ig-warn-A700: rgb(136, 86, 0); + --ig-warn-A700-contrast: hsla(from color(from var(--ig-warn-A700) var(--y-contrast)) h 0 l/1); + --ig-error-50: rgb(254, 231, 227); + --ig-error-50-contrast: hsla(from color(from var(--ig-error-50) var(--y-contrast)) h 0 l/1); + --ig-error-100: rgb(255, 188, 177); + --ig-error-100-contrast: hsla(from color(from var(--ig-error-100) var(--y-contrast)) h 0 l/1); + --ig-error-200: rgb(255, 146, 130); + --ig-error-200-contrast: hsla(from color(from var(--ig-error-200) var(--y-contrast)) h 0 l/1); + --ig-error-300: rgb(255, 99, 82); + --ig-error-300-contrast: hsla(from color(from var(--ig-error-300) var(--y-contrast)) h 0 l/1); + --ig-error-400: rgb(237, 58, 45); + --ig-error-400-contrast: hsla(from color(from var(--ig-error-400) var(--y-contrast)) h 0 l/1); + --ig-error-500: rgb(209, 28, 19); + --ig-error-500-contrast: hsla(from color(from var(--ig-error-500) var(--y-contrast)) h 0 l/1); + --ig-error-600: rgb(174, 16, 9); + --ig-error-600-contrast: hsla(from color(from var(--ig-error-600) var(--y-contrast)) h 0 l/1); + --ig-error-700: rgb(135, 17, 11); + --ig-error-700-contrast: hsla(from color(from var(--ig-error-700) var(--y-contrast)) h 0 l/1); + --ig-error-800: rgb(93, 18, 12); + --ig-error-800-contrast: hsla(from color(from var(--ig-error-800) var(--y-contrast)) h 0 l/1); + --ig-error-900: rgb(44, 9, 6); + --ig-error-900-contrast: hsla(from color(from var(--ig-error-900) var(--y-contrast)) h 0 l/1); + --ig-error-seed: red; + --ig-error-seed-contrast: hsla(from color(from var(--ig-error-seed) var(--y-contrast)) h 0 l/1); + --ig-error-A100: rgb(255, 207, 198); + --ig-error-A100-contrast: hsla(from color(from var(--ig-error-A100) var(--y-contrast)) h 0 l/1); + --ig-error-A200: rgb(255, 119, 101); + --ig-error-A200-contrast: hsla(from color(from var(--ig-error-A200) var(--y-contrast)) h 0 l/1); + --ig-error-A400: rgb(242, 34, 24); + --ig-error-A400-contrast: hsla(from color(from var(--ig-error-A400) var(--y-contrast)) h 0 l/1); + --ig-error-A700: rgb(197, 2, 1); + --ig-error-A700-contrast: hsla(from color(from var(--ig-error-A700) var(--y-contrast)) h 0 l/1); +} + +/* END_OUTPUT */ +/* CONTAINED */ +:root { + --ig-primary-seed: #09f; + --ig-gray-seed: #000; +} + +/* END_CONTAINED */ +/* END_ASSERT */ +/* */ +/* */ +/* */ +/* */ +/* # Module: Typography */ +/* -------------------- */ +/* # Module: Typography :: operations */ +/* ---------------------------------- */ +/* Test: should convert pixel numbers to rem */ +/* ✔ [assert-equal] should convert pixel numbers to rem */ +/* */ +/* Test: should convert unitless numbers to rem */ +/* ✔ [assert-equal] should convert unitless numbers to rem */ +/* */ +/* Test: should convert pixel numbers to em */ +/* ✔ [assert-equal] should convert pixel numbers to em */ +/* */ +/* Test: should convert unitless numbers to em */ +/* ✔ [assert-equal] should convert unitless numbers to em */ +/* */ +/* Test: should convert relative unit numbers to pixels */ +/* ✔ [assert-equal] should convert relative unit numbers to pixels */ +/* ✔ [assert-equal] should convert relative unit numbers to pixels */ +/* */ +/* Test: should convert unitless numbers to pixels */ +/* ✔ [assert-equal] should convert unitless numbers to pixels */ +/* */ +/* */ +/* # Module: Typography :: generation */ +/* ---------------------------------- */ +/* Test: should produce a map of default type style rules matching the ITypeStyle map */ +/* ✔ [assert-equal] should produce a map of default type style rules matching the ITypeStyle map */ +/* ✔ [assert-equal] should produce a map of default type style rules matching the ITypeStyle map */ +/* ✔ [assert-equal] should produce a map of default type style rules matching the ITypeStyle map */ +/* ✔ [assert-equal] should produce a map of default type style rules matching the ITypeStyle map */ +/* ✔ [assert-equal] should produce a map of default type style rules matching the ITypeStyle map */ +/* ✔ [assert-equal] should produce a map of default type style rules matching the ITypeStyle map */ +/* ✔ [assert-equal] should produce a map of default type style rules matching the ITypeStyle map */ +/* ✔ [assert-equal] should produce a map of default type style rules matching the ITypeStyle map */ +/* ✔ [assert-equal] should produce a map of default type style rules matching the ITypeStyle map */ +/* */ +/* Test: should only produce a map of allowed type style rules */ +/* ✔ [assert-equal] should only produce a map of allowed type style rules */ +/* ✔ [assert-equal] should only produce a map of allowed type style rules */ +/* ✔ [assert-equal] should only produce a map of allowed type style rules */ +/* ✔ [assert-equal] should only produce a map of allowed type style rules */ +/* ✔ [assert-equal] should only produce a map of allowed type style rules */ +/* ✔ [assert-equal] should only produce a map of allowed type style rules */ +/* ✔ [assert-equal] should only produce a map of allowed type style rules */ +/* ✔ [assert-equal] should only produce a map of allowed type style rules */ +/* ✔ [assert-equal] should only produce a map of allowed type style rules */ +/* ✔ [assert-false] should only produce a map of allowed type style rules */ +/* */ +/* Test: should produce a type scale map of type style values for each category */ +/* ✔ [assert-equal] should produce a type scale map of type style values for each category */ +/* ✔ [assert-equal] should produce a type scale map of type style values for each category */ +/* ✔ [assert-equal] should produce a type scale map of type style values for each category */ +/* ✔ [assert-equal] should produce a type scale map of type style values for each category */ +/* ✔ [assert-equal] should produce a type scale map of type style values for each category */ +/* ✔ [assert-equal] should produce a type scale map of type style values for each category */ +/* ✔ [assert-equal] should produce a type scale map of type style values for each category */ +/* ✔ [assert-equal] should produce a type scale map of type style values for each category */ +/* ✔ [assert-equal] should produce a type scale map of type style values for each category */ +/* ✔ [assert-equal] should produce a type scale map of type style values for each category */ +/* ✔ [assert-equal] should produce a type scale map of type style values for each category */ +/* ✔ [assert-equal] should produce a type scale map of type style values for each category */ +/* ✔ [assert-equal] should produce a type scale map of type style values for each category */ +/* ✔ [assert-equal] should produce a type scale map of type style values for each category */ +/* */ +/* Test: should retreive type styles from a scale */ +/* ✔ [assert-equal] should retreive type styles from a scale */ +/* ✔ [assert-equal] should retreive type styles from a scale */ +/* ✔ [assert-equal] should retreive type styles from a scale */ +/* ✔ [assert-equal] should retreive type styles from a scale */ +/* ✔ [assert-equal] should retreive type styles from a scale */ +/* ✔ [assert-equal] should retreive type styles from a scale */ +/* ✔ [assert-equal] should retreive type styles from a scale */ +/* ✔ [assert-equal] should retreive type styles from a scale */ +/* ✔ [assert-equal] should retreive type styles from a scale */ +/* */ +/* Test: generates CSS variables from a type style map without font-family if its value is "inherit" */ +/* ASSERT: */ +/* OUTPUT */ +.test-output { + --ig-h1-font-size: 96px; + --ig-h1-font-weight: normal; + --ig-h1-font-style: normal; + --ig-h1-line-height: normal; + --ig-h1-letter-spacing: normal; + --ig-h1-text-transform: none; + --ig-h1-margin-top: 0; + --ig-h1-margin-bottom: 0; +} + +/* END_OUTPUT */ +/* EXPECTED */ +.test-output { + --ig-h1-font-size: 96px; + --ig-h1-font-weight: normal; + --ig-h1-font-style: normal; + --ig-h1-line-height: normal; + --ig-h1-letter-spacing: normal; + --ig-h1-text-transform: none; + --ig-h1-margin-top: 0; + --ig-h1-margin-bottom: 0; +} + +/* END_EXPECTED */ +/* END_ASSERT */ +/* */ +/* Test: generates CSS variables for a type style map with font-family if its value is not "inherit" */ +/* ASSERT: */ +/* OUTPUT */ +.test-output { + --ig-h1-font-family: 'American Typewriter', serif; + --ig-h1-font-size: 96px; + --ig-h1-font-weight: normal; + --ig-h1-font-style: normal; + --ig-h1-line-height: normal; + --ig-h1-letter-spacing: normal; + --ig-h1-text-transform: none; + --ig-h1-margin-top: 0; + --ig-h1-margin-bottom: 0; +} + +/* END_OUTPUT */ +/* EXPECTED */ +.test-output { + --ig-h1-font-family: 'American Typewriter', serif; + --ig-h1-font-size: 96px; + --ig-h1-font-weight: normal; + --ig-h1-font-style: normal; + --ig-h1-line-height: normal; + --ig-h1-letter-spacing: normal; + --ig-h1-text-transform: none; + --ig-h1-margin-top: 0; + --ig-h1-margin-bottom: 0; +} + +/* END_EXPECTED */ +/* END_ASSERT */ +/* */ +/* Test: should include all styles from a custom type category */ +/* ASSERT: */ +/* OUTPUT */ +.test-output { + font-family: var(--ig-calendar-labels-font-family, var(--ig-font-family)); + font-size: var(--ig-calendar-labels-font-size); + font-weight: var(--ig-calendar-labels-font-weight); + font-style: var(--ig-calendar-labels-font-style); + line-height: var(--ig-calendar-labels-line-height); + letter-spacing: var(--ig-calendar-labels-letter-spacing); + text-transform: var(--ig-calendar-labels-text-transform); + margin-top: var(--ig-calendar-labels-margin-top); + margin-bottom: var(--ig-calendar-labels-margin-bottom); +} + +/* END_OUTPUT */ +/* EXPECTED */ +.test-output { + font-family: var(--ig-calendar-labels-font-family, var(--ig-font-family)); + font-size: var(--ig-calendar-labels-font-size); + font-weight: var(--ig-calendar-labels-font-weight); + font-style: var(--ig-calendar-labels-font-style); + line-height: var(--ig-calendar-labels-line-height); + letter-spacing: var(--ig-calendar-labels-letter-spacing); + text-transform: var(--ig-calendar-labels-text-transform); + margin-top: var(--ig-calendar-labels-margin-top); + margin-bottom: var(--ig-calendar-labels-margin-bottom); +} + +/* END_EXPECTED */ +/* END_ASSERT */ +/* */ +/* Test: should include type styles with CSS var refs as values for a specific category */ +/* ASSERT: */ +/* OUTPUT */ +.test-output .my-h1 { + font-family: var(--ig-h1-font-family, var(--ig-font-family)); + font-size: var(--ig-h1-font-size); + font-weight: var(--ig-h1-font-weight); + font-style: var(--ig-h1-font-style); + line-height: var(--ig-h1-line-height); + letter-spacing: var(--ig-h1-letter-spacing); + text-transform: var(--ig-h1-text-transform); + margin-top: var(--ig-h1-margin-top); + margin-bottom: var(--ig-h1-margin-bottom); +} + +/* END_OUTPUT */ +/* EXPECTED */ +.test-output .my-h1 { + font-family: var(--ig-h1-font-family, var(--ig-font-family)); + font-size: var(--ig-h1-font-size); + font-weight: var(--ig-h1-font-weight); + font-style: var(--ig-h1-font-style); + line-height: var(--ig-h1-line-height); + letter-spacing: var(--ig-h1-letter-spacing); + text-transform: var(--ig-h1-text-transform); + margin-top: var(--ig-h1-margin-top); + margin-bottom: var(--ig-h1-margin-bottom); +} + +/* END_EXPECTED */ +/* END_ASSERT */ +/* */ +/* Test: should include CSS classes with style rules for all categories in a type scale */ +/* ASSERT: */ +/* OUTPUT */ +.ig-typography .ig-typography__h1 { + font-family: var(--ig-h1-font-family, var(--ig-font-family)); + font-size: var(--ig-h1-font-size); + font-weight: var(--ig-h1-font-weight); + font-style: var(--ig-h1-font-style); + line-height: var(--ig-h1-line-height); + letter-spacing: var(--ig-h1-letter-spacing); + text-transform: var(--ig-h1-text-transform); + margin-top: var(--ig-h1-margin-top); + margin-bottom: var(--ig-h1-margin-bottom); +} +.ig-typography .ig-typography__h2 { + font-family: var(--ig-h2-font-family, var(--ig-font-family)); + font-size: var(--ig-h2-font-size); + font-weight: var(--ig-h2-font-weight); + font-style: var(--ig-h2-font-style); + line-height: var(--ig-h2-line-height); + letter-spacing: var(--ig-h2-letter-spacing); + text-transform: var(--ig-h2-text-transform); + margin-top: var(--ig-h2-margin-top); + margin-bottom: var(--ig-h2-margin-bottom); +} +.ig-typography .ig-typography__h3 { + font-family: var(--ig-h3-font-family, var(--ig-font-family)); + font-size: var(--ig-h3-font-size); + font-weight: var(--ig-h3-font-weight); + font-style: var(--ig-h3-font-style); + line-height: var(--ig-h3-line-height); + letter-spacing: var(--ig-h3-letter-spacing); + text-transform: var(--ig-h3-text-transform); + margin-top: var(--ig-h3-margin-top); + margin-bottom: var(--ig-h3-margin-bottom); +} +.ig-typography .ig-typography__h4 { + font-family: var(--ig-h4-font-family, var(--ig-font-family)); + font-size: var(--ig-h4-font-size); + font-weight: var(--ig-h4-font-weight); + font-style: var(--ig-h4-font-style); + line-height: var(--ig-h4-line-height); + letter-spacing: var(--ig-h4-letter-spacing); + text-transform: var(--ig-h4-text-transform); + margin-top: var(--ig-h4-margin-top); + margin-bottom: var(--ig-h4-margin-bottom); +} +.ig-typography .ig-typography__h5 { + font-family: var(--ig-h5-font-family, var(--ig-font-family)); + font-size: var(--ig-h5-font-size); + font-weight: var(--ig-h5-font-weight); + font-style: var(--ig-h5-font-style); + line-height: var(--ig-h5-line-height); + letter-spacing: var(--ig-h5-letter-spacing); + text-transform: var(--ig-h5-text-transform); + margin-top: var(--ig-h5-margin-top); + margin-bottom: var(--ig-h5-margin-bottom); +} +.ig-typography .ig-typography__h6 { + font-family: var(--ig-h6-font-family, var(--ig-font-family)); + font-size: var(--ig-h6-font-size); + font-weight: var(--ig-h6-font-weight); + font-style: var(--ig-h6-font-style); + line-height: var(--ig-h6-line-height); + letter-spacing: var(--ig-h6-letter-spacing); + text-transform: var(--ig-h6-text-transform); + margin-top: var(--ig-h6-margin-top); + margin-bottom: var(--ig-h6-margin-bottom); +} +.ig-typography .ig-typography__subtitle-1 { + font-family: var(--ig-subtitle-1-font-family, var(--ig-font-family)); + font-size: var(--ig-subtitle-1-font-size); + font-weight: var(--ig-subtitle-1-font-weight); + font-style: var(--ig-subtitle-1-font-style); + line-height: var(--ig-subtitle-1-line-height); + letter-spacing: var(--ig-subtitle-1-letter-spacing); + text-transform: var(--ig-subtitle-1-text-transform); + margin-top: var(--ig-subtitle-1-margin-top); + margin-bottom: var(--ig-subtitle-1-margin-bottom); +} +.ig-typography .ig-typography__subtitle-2 { + font-family: var(--ig-subtitle-2-font-family, var(--ig-font-family)); + font-size: var(--ig-subtitle-2-font-size); + font-weight: var(--ig-subtitle-2-font-weight); + font-style: var(--ig-subtitle-2-font-style); + line-height: var(--ig-subtitle-2-line-height); + letter-spacing: var(--ig-subtitle-2-letter-spacing); + text-transform: var(--ig-subtitle-2-text-transform); + margin-top: var(--ig-subtitle-2-margin-top); + margin-bottom: var(--ig-subtitle-2-margin-bottom); +} +.ig-typography .ig-typography__body-1 { + font-family: var(--ig-body-1-font-family, var(--ig-font-family)); + font-size: var(--ig-body-1-font-size); + font-weight: var(--ig-body-1-font-weight); + font-style: var(--ig-body-1-font-style); + line-height: var(--ig-body-1-line-height); + letter-spacing: var(--ig-body-1-letter-spacing); + text-transform: var(--ig-body-1-text-transform); + margin-top: var(--ig-body-1-margin-top); + margin-bottom: var(--ig-body-1-margin-bottom); +} +.ig-typography .ig-typography__body-2 { + font-family: var(--ig-body-2-font-family, var(--ig-font-family)); + font-size: var(--ig-body-2-font-size); + font-weight: var(--ig-body-2-font-weight); + font-style: var(--ig-body-2-font-style); + line-height: var(--ig-body-2-line-height); + letter-spacing: var(--ig-body-2-letter-spacing); + text-transform: var(--ig-body-2-text-transform); + margin-top: var(--ig-body-2-margin-top); + margin-bottom: var(--ig-body-2-margin-bottom); +} +.ig-typography .ig-typography__button { + font-family: var(--ig-button-font-family, var(--ig-font-family)); + font-size: var(--ig-button-font-size); + font-weight: var(--ig-button-font-weight); + font-style: var(--ig-button-font-style); + line-height: var(--ig-button-line-height); + letter-spacing: var(--ig-button-letter-spacing); + text-transform: var(--ig-button-text-transform); + margin-top: var(--ig-button-margin-top); + margin-bottom: var(--ig-button-margin-bottom); +} +.ig-typography .ig-typography__caption { + font-family: var(--ig-caption-font-family, var(--ig-font-family)); + font-size: var(--ig-caption-font-size); + font-weight: var(--ig-caption-font-weight); + font-style: var(--ig-caption-font-style); + line-height: var(--ig-caption-line-height); + letter-spacing: var(--ig-caption-letter-spacing); + text-transform: var(--ig-caption-text-transform); + margin-top: var(--ig-caption-margin-top); + margin-bottom: var(--ig-caption-margin-bottom); +} +.ig-typography .ig-typography__overline { + font-family: var(--ig-overline-font-family, var(--ig-font-family)); + font-size: var(--ig-overline-font-size); + font-weight: var(--ig-overline-font-weight); + font-style: var(--ig-overline-font-style); + line-height: var(--ig-overline-line-height); + letter-spacing: var(--ig-overline-letter-spacing); + text-transform: var(--ig-overline-text-transform); + margin-top: var(--ig-overline-margin-top); + margin-bottom: var(--ig-overline-margin-bottom); +} + +/* END_OUTPUT */ +/* EXPECTED */ +.ig-typography .ig-typography__h1 { + font-family: var(--ig-h1-font-family, var(--ig-font-family)); + font-size: var(--ig-h1-font-size); + font-weight: var(--ig-h1-font-weight); + font-style: var(--ig-h1-font-style); + line-height: var(--ig-h1-line-height); + letter-spacing: var(--ig-h1-letter-spacing); + text-transform: var(--ig-h1-text-transform); + margin-top: var(--ig-h1-margin-top); + margin-bottom: var(--ig-h1-margin-bottom); +} + +.ig-typography .ig-typography__h2 { + font-family: var(--ig-h2-font-family, var(--ig-font-family)); + font-size: var(--ig-h2-font-size); + font-weight: var(--ig-h2-font-weight); + font-style: var(--ig-h2-font-style); + line-height: var(--ig-h2-line-height); + letter-spacing: var(--ig-h2-letter-spacing); + text-transform: var(--ig-h2-text-transform); + margin-top: var(--ig-h2-margin-top); + margin-bottom: var(--ig-h2-margin-bottom); +} + +.ig-typography .ig-typography__h3 { + font-family: var(--ig-h3-font-family, var(--ig-font-family)); + font-size: var(--ig-h3-font-size); + font-weight: var(--ig-h3-font-weight); + font-style: var(--ig-h3-font-style); + line-height: var(--ig-h3-line-height); + letter-spacing: var(--ig-h3-letter-spacing); + text-transform: var(--ig-h3-text-transform); + margin-top: var(--ig-h3-margin-top); + margin-bottom: var(--ig-h3-margin-bottom); +} + +.ig-typography .ig-typography__h4 { + font-family: var(--ig-h4-font-family, var(--ig-font-family)); + font-size: var(--ig-h4-font-size); + font-weight: var(--ig-h4-font-weight); + font-style: var(--ig-h4-font-style); + line-height: var(--ig-h4-line-height); + letter-spacing: var(--ig-h4-letter-spacing); + text-transform: var(--ig-h4-text-transform); + margin-top: var(--ig-h4-margin-top); + margin-bottom: var(--ig-h4-margin-bottom); +} + +.ig-typography .ig-typography__h5 { + font-family: var(--ig-h5-font-family, var(--ig-font-family)); + font-size: var(--ig-h5-font-size); + font-weight: var(--ig-h5-font-weight); + font-style: var(--ig-h5-font-style); + line-height: var(--ig-h5-line-height); + letter-spacing: var(--ig-h5-letter-spacing); + text-transform: var(--ig-h5-text-transform); + margin-top: var(--ig-h5-margin-top); + margin-bottom: var(--ig-h5-margin-bottom); +} + +.ig-typography .ig-typography__h6 { + font-family: var(--ig-h6-font-family, var(--ig-font-family)); + font-size: var(--ig-h6-font-size); + font-weight: var(--ig-h6-font-weight); + font-style: var(--ig-h6-font-style); + line-height: var(--ig-h6-line-height); + letter-spacing: var(--ig-h6-letter-spacing); + text-transform: var(--ig-h6-text-transform); + margin-top: var(--ig-h6-margin-top); + margin-bottom: var(--ig-h6-margin-bottom); +} + +.ig-typography .ig-typography__subtitle-1 { + font-family: var(--ig-subtitle-1-font-family, var(--ig-font-family)); + font-size: var(--ig-subtitle-1-font-size); + font-weight: var(--ig-subtitle-1-font-weight); + font-style: var(--ig-subtitle-1-font-style); + line-height: var(--ig-subtitle-1-line-height); + letter-spacing: var(--ig-subtitle-1-letter-spacing); + text-transform: var(--ig-subtitle-1-text-transform); + margin-top: var(--ig-subtitle-1-margin-top); + margin-bottom: var(--ig-subtitle-1-margin-bottom); +} + +.ig-typography .ig-typography__subtitle-2 { + font-family: var(--ig-subtitle-2-font-family, var(--ig-font-family)); + font-size: var(--ig-subtitle-2-font-size); + font-weight: var(--ig-subtitle-2-font-weight); + font-style: var(--ig-subtitle-2-font-style); + line-height: var(--ig-subtitle-2-line-height); + letter-spacing: var(--ig-subtitle-2-letter-spacing); + text-transform: var(--ig-subtitle-2-text-transform); + margin-top: var(--ig-subtitle-2-margin-top); + margin-bottom: var(--ig-subtitle-2-margin-bottom); +} + +.ig-typography .ig-typography__body-1 { + font-family: var(--ig-body-1-font-family, var(--ig-font-family)); + font-size: var(--ig-body-1-font-size); + font-weight: var(--ig-body-1-font-weight); + font-style: var(--ig-body-1-font-style); + line-height: var(--ig-body-1-line-height); + letter-spacing: var(--ig-body-1-letter-spacing); + text-transform: var(--ig-body-1-text-transform); + margin-top: var(--ig-body-1-margin-top); + margin-bottom: var(--ig-body-1-margin-bottom); +} + +.ig-typography .ig-typography__body-2 { + font-family: var(--ig-body-2-font-family, var(--ig-font-family)); + font-size: var(--ig-body-2-font-size); + font-weight: var(--ig-body-2-font-weight); + font-style: var(--ig-body-2-font-style); + line-height: var(--ig-body-2-line-height); + letter-spacing: var(--ig-body-2-letter-spacing); + text-transform: var(--ig-body-2-text-transform); + margin-top: var(--ig-body-2-margin-top); + margin-bottom: var(--ig-body-2-margin-bottom); +} + +.ig-typography .ig-typography__button { + font-family: var(--ig-button-font-family, var(--ig-font-family)); + font-size: var(--ig-button-font-size); + font-weight: var(--ig-button-font-weight); + font-style: var(--ig-button-font-style); + line-height: var(--ig-button-line-height); + letter-spacing: var(--ig-button-letter-spacing); + text-transform: var(--ig-button-text-transform); + margin-top: var(--ig-button-margin-top); + margin-bottom: var(--ig-button-margin-bottom); +} + +.ig-typography .ig-typography__caption { + font-family: var(--ig-caption-font-family, var(--ig-font-family)); + font-size: var(--ig-caption-font-size); + font-weight: var(--ig-caption-font-weight); + font-style: var(--ig-caption-font-style); + line-height: var(--ig-caption-line-height); + letter-spacing: var(--ig-caption-letter-spacing); + text-transform: var(--ig-caption-text-transform); + margin-top: var(--ig-caption-margin-top); + margin-bottom: var(--ig-caption-margin-bottom); +} + +.ig-typography .ig-typography__overline { + font-family: var(--ig-overline-font-family, var(--ig-font-family)); + font-size: var(--ig-overline-font-size); + font-weight: var(--ig-overline-font-weight); + font-style: var(--ig-overline-font-style); + line-height: var(--ig-overline-line-height); + letter-spacing: var(--ig-overline-letter-spacing); + text-transform: var(--ig-overline-text-transform); + margin-top: var(--ig-overline-margin-top); + margin-bottom: var(--ig-overline-margin-bottom); +} + +/* END_EXPECTED */ +/* END_ASSERT */ +/* */ +/* Test: should include CSS headeing and paragraph style rules for mapped categories in a type scale, unwrapped by default */ +/* ASSERT: */ +/* OUTPUT */ +.test-output h1 { + font-family: var(--ig-h1-font-family, var(--ig-font-family)); + font-size: var(--ig-h1-font-size); + font-weight: var(--ig-h1-font-weight); + font-style: var(--ig-h1-font-style); + line-height: var(--ig-h1-line-height); + letter-spacing: var(--ig-h1-letter-spacing); + text-transform: var(--ig-h1-text-transform); + margin-top: var(--ig-h1-margin-top); + margin-bottom: var(--ig-h1-margin-bottom); +} +.test-output h2 { + font-family: var(--ig-h2-font-family, var(--ig-font-family)); + font-size: var(--ig-h2-font-size); + font-weight: var(--ig-h2-font-weight); + font-style: var(--ig-h2-font-style); + line-height: var(--ig-h2-line-height); + letter-spacing: var(--ig-h2-letter-spacing); + text-transform: var(--ig-h2-text-transform); + margin-top: var(--ig-h2-margin-top); + margin-bottom: var(--ig-h2-margin-bottom); +} +.test-output h3 { + font-family: var(--ig-h3-font-family, var(--ig-font-family)); + font-size: var(--ig-h3-font-size); + font-weight: var(--ig-h3-font-weight); + font-style: var(--ig-h3-font-style); + line-height: var(--ig-h3-line-height); + letter-spacing: var(--ig-h3-letter-spacing); + text-transform: var(--ig-h3-text-transform); + margin-top: var(--ig-h3-margin-top); + margin-bottom: var(--ig-h3-margin-bottom); +} +.test-output h4 { + font-family: var(--ig-h4-font-family, var(--ig-font-family)); + font-size: var(--ig-h4-font-size); + font-weight: var(--ig-h4-font-weight); + font-style: var(--ig-h4-font-style); + line-height: var(--ig-h4-line-height); + letter-spacing: var(--ig-h4-letter-spacing); + text-transform: var(--ig-h4-text-transform); + margin-top: var(--ig-h4-margin-top); + margin-bottom: var(--ig-h4-margin-bottom); +} +.test-output h5 { + font-family: var(--ig-h5-font-family, var(--ig-font-family)); + font-size: var(--ig-h5-font-size); + font-weight: var(--ig-h5-font-weight); + font-style: var(--ig-h5-font-style); + line-height: var(--ig-h5-line-height); + letter-spacing: var(--ig-h5-letter-spacing); + text-transform: var(--ig-h5-text-transform); + margin-top: var(--ig-h5-margin-top); + margin-bottom: var(--ig-h5-margin-bottom); +} +.test-output h6 { + font-family: var(--ig-h6-font-family, var(--ig-font-family)); + font-size: var(--ig-h6-font-size); + font-weight: var(--ig-h6-font-weight); + font-style: var(--ig-h6-font-style); + line-height: var(--ig-h6-line-height); + letter-spacing: var(--ig-h6-letter-spacing); + text-transform: var(--ig-h6-text-transform); + margin-top: var(--ig-h6-margin-top); + margin-bottom: var(--ig-h6-margin-bottom); +} +.test-output p { + font-family: var(--ig-body-1-font-family, var(--ig-font-family)); + font-size: var(--ig-body-1-font-size); + font-weight: var(--ig-body-1-font-weight); + font-style: var(--ig-body-1-font-style); + line-height: var(--ig-body-1-line-height); + letter-spacing: var(--ig-body-1-letter-spacing); + text-transform: var(--ig-body-1-text-transform); + margin-top: var(--ig-body-1-margin-top); + margin-bottom: var(--ig-body-1-margin-bottom); +} + +/* END_OUTPUT */ +/* EXPECTED */ +.test-output h1 { + font-family: var(--ig-h1-font-family, var(--ig-font-family)); + font-size: var(--ig-h1-font-size); + font-weight: var(--ig-h1-font-weight); + font-style: var(--ig-h1-font-style); + line-height: var(--ig-h1-line-height); + letter-spacing: var(--ig-h1-letter-spacing); + text-transform: var(--ig-h1-text-transform); + margin-top: var(--ig-h1-margin-top); + margin-bottom: var(--ig-h1-margin-bottom); +} +.test-output h2 { + font-family: var(--ig-h2-font-family, var(--ig-font-family)); + font-size: var(--ig-h2-font-size); + font-weight: var(--ig-h2-font-weight); + font-style: var(--ig-h2-font-style); + line-height: var(--ig-h2-line-height); + letter-spacing: var(--ig-h2-letter-spacing); + text-transform: var(--ig-h2-text-transform); + margin-top: var(--ig-h2-margin-top); + margin-bottom: var(--ig-h2-margin-bottom); +} +.test-output h3 { + font-family: var(--ig-h3-font-family, var(--ig-font-family)); + font-size: var(--ig-h3-font-size); + font-weight: var(--ig-h3-font-weight); + font-style: var(--ig-h3-font-style); + line-height: var(--ig-h3-line-height); + letter-spacing: var(--ig-h3-letter-spacing); + text-transform: var(--ig-h3-text-transform); + margin-top: var(--ig-h3-margin-top); + margin-bottom: var(--ig-h3-margin-bottom); +} +.test-output h4 { + font-family: var(--ig-h4-font-family, var(--ig-font-family)); + font-size: var(--ig-h4-font-size); + font-weight: var(--ig-h4-font-weight); + font-style: var(--ig-h4-font-style); + line-height: var(--ig-h4-line-height); + letter-spacing: var(--ig-h4-letter-spacing); + text-transform: var(--ig-h4-text-transform); + margin-top: var(--ig-h4-margin-top); + margin-bottom: var(--ig-h4-margin-bottom); +} +.test-output h5 { + font-family: var(--ig-h5-font-family, var(--ig-font-family)); + font-size: var(--ig-h5-font-size); + font-weight: var(--ig-h5-font-weight); + font-style: var(--ig-h5-font-style); + line-height: var(--ig-h5-line-height); + letter-spacing: var(--ig-h5-letter-spacing); + text-transform: var(--ig-h5-text-transform); + margin-top: var(--ig-h5-margin-top); + margin-bottom: var(--ig-h5-margin-bottom); +} +.test-output h6 { + font-family: var(--ig-h6-font-family, var(--ig-font-family)); + font-size: var(--ig-h6-font-size); + font-weight: var(--ig-h6-font-weight); + font-style: var(--ig-h6-font-style); + line-height: var(--ig-h6-line-height); + letter-spacing: var(--ig-h6-letter-spacing); + text-transform: var(--ig-h6-text-transform); + margin-top: var(--ig-h6-margin-top); + margin-bottom: var(--ig-h6-margin-bottom); +} +.test-output p { + font-family: var(--ig-body-1-font-family, var(--ig-font-family)); + font-size: var(--ig-body-1-font-size); + font-weight: var(--ig-body-1-font-weight); + font-style: var(--ig-body-1-font-style); + line-height: var(--ig-body-1-line-height); + letter-spacing: var(--ig-body-1-letter-spacing); + text-transform: var(--ig-body-1-text-transform); + margin-top: var(--ig-body-1-margin-top); + margin-bottom: var(--ig-body-1-margin-bottom); +} + +/* END_EXPECTED */ +/* END_ASSERT */ +/* */ +/* Test: should wrap CSS heading and paragraph style rules in :where():not() when $allow-exclusion is true */ +/* ASSERT: */ +/* OUTPUT */ +.test-output :where(h1):not(:where([data-no-typography], [data-no-typography] *)) { + font-family: var(--ig-h1-font-family, var(--ig-font-family)); + font-size: var(--ig-h1-font-size); + font-weight: var(--ig-h1-font-weight); + font-style: var(--ig-h1-font-style); + line-height: var(--ig-h1-line-height); + letter-spacing: var(--ig-h1-letter-spacing); + text-transform: var(--ig-h1-text-transform); + margin-top: var(--ig-h1-margin-top); + margin-bottom: var(--ig-h1-margin-bottom); +} +.test-output :where(h2):not(:where([data-no-typography], [data-no-typography] *)) { + font-family: var(--ig-h2-font-family, var(--ig-font-family)); + font-size: var(--ig-h2-font-size); + font-weight: var(--ig-h2-font-weight); + font-style: var(--ig-h2-font-style); + line-height: var(--ig-h2-line-height); + letter-spacing: var(--ig-h2-letter-spacing); + text-transform: var(--ig-h2-text-transform); + margin-top: var(--ig-h2-margin-top); + margin-bottom: var(--ig-h2-margin-bottom); +} +.test-output :where(h3):not(:where([data-no-typography], [data-no-typography] *)) { + font-family: var(--ig-h3-font-family, var(--ig-font-family)); + font-size: var(--ig-h3-font-size); + font-weight: var(--ig-h3-font-weight); + font-style: var(--ig-h3-font-style); + line-height: var(--ig-h3-line-height); + letter-spacing: var(--ig-h3-letter-spacing); + text-transform: var(--ig-h3-text-transform); + margin-top: var(--ig-h3-margin-top); + margin-bottom: var(--ig-h3-margin-bottom); +} +.test-output :where(h4):not(:where([data-no-typography], [data-no-typography] *)) { + font-family: var(--ig-h4-font-family, var(--ig-font-family)); + font-size: var(--ig-h4-font-size); + font-weight: var(--ig-h4-font-weight); + font-style: var(--ig-h4-font-style); + line-height: var(--ig-h4-line-height); + letter-spacing: var(--ig-h4-letter-spacing); + text-transform: var(--ig-h4-text-transform); + margin-top: var(--ig-h4-margin-top); + margin-bottom: var(--ig-h4-margin-bottom); +} +.test-output :where(h5):not(:where([data-no-typography], [data-no-typography] *)) { + font-family: var(--ig-h5-font-family, var(--ig-font-family)); + font-size: var(--ig-h5-font-size); + font-weight: var(--ig-h5-font-weight); + font-style: var(--ig-h5-font-style); + line-height: var(--ig-h5-line-height); + letter-spacing: var(--ig-h5-letter-spacing); + text-transform: var(--ig-h5-text-transform); + margin-top: var(--ig-h5-margin-top); + margin-bottom: var(--ig-h5-margin-bottom); +} +.test-output :where(h6):not(:where([data-no-typography], [data-no-typography] *)) { + font-family: var(--ig-h6-font-family, var(--ig-font-family)); + font-size: var(--ig-h6-font-size); + font-weight: var(--ig-h6-font-weight); + font-style: var(--ig-h6-font-style); + line-height: var(--ig-h6-line-height); + letter-spacing: var(--ig-h6-letter-spacing); + text-transform: var(--ig-h6-text-transform); + margin-top: var(--ig-h6-margin-top); + margin-bottom: var(--ig-h6-margin-bottom); +} +.test-output :where(p):not(:where([data-no-typography], [data-no-typography] *)) { + font-family: var(--ig-body-1-font-family, var(--ig-font-family)); + font-size: var(--ig-body-1-font-size); + font-weight: var(--ig-body-1-font-weight); + font-style: var(--ig-body-1-font-style); + line-height: var(--ig-body-1-line-height); + letter-spacing: var(--ig-body-1-letter-spacing); + text-transform: var(--ig-body-1-text-transform); + margin-top: var(--ig-body-1-margin-top); + margin-bottom: var(--ig-body-1-margin-bottom); +} + +/* END_OUTPUT */ +/* EXPECTED */ +.test-output :where(h1):not(:where([data-no-typography], [data-no-typography] *)) { + font-family: var(--ig-h1-font-family, var(--ig-font-family)); + font-size: var(--ig-h1-font-size); + font-weight: var(--ig-h1-font-weight); + font-style: var(--ig-h1-font-style); + line-height: var(--ig-h1-line-height); + letter-spacing: var(--ig-h1-letter-spacing); + text-transform: var(--ig-h1-text-transform); + margin-top: var(--ig-h1-margin-top); + margin-bottom: var(--ig-h1-margin-bottom); +} +.test-output :where(h2):not(:where([data-no-typography], [data-no-typography] *)) { + font-family: var(--ig-h2-font-family, var(--ig-font-family)); + font-size: var(--ig-h2-font-size); + font-weight: var(--ig-h2-font-weight); + font-style: var(--ig-h2-font-style); + line-height: var(--ig-h2-line-height); + letter-spacing: var(--ig-h2-letter-spacing); + text-transform: var(--ig-h2-text-transform); + margin-top: var(--ig-h2-margin-top); + margin-bottom: var(--ig-h2-margin-bottom); +} +.test-output :where(h3):not(:where([data-no-typography], [data-no-typography] *)) { + font-family: var(--ig-h3-font-family, var(--ig-font-family)); + font-size: var(--ig-h3-font-size); + font-weight: var(--ig-h3-font-weight); + font-style: var(--ig-h3-font-style); + line-height: var(--ig-h3-line-height); + letter-spacing: var(--ig-h3-letter-spacing); + text-transform: var(--ig-h3-text-transform); + margin-top: var(--ig-h3-margin-top); + margin-bottom: var(--ig-h3-margin-bottom); +} +.test-output :where(h4):not(:where([data-no-typography], [data-no-typography] *)) { + font-family: var(--ig-h4-font-family, var(--ig-font-family)); + font-size: var(--ig-h4-font-size); + font-weight: var(--ig-h4-font-weight); + font-style: var(--ig-h4-font-style); + line-height: var(--ig-h4-line-height); + letter-spacing: var(--ig-h4-letter-spacing); + text-transform: var(--ig-h4-text-transform); + margin-top: var(--ig-h4-margin-top); + margin-bottom: var(--ig-h4-margin-bottom); +} +.test-output :where(h5):not(:where([data-no-typography], [data-no-typography] *)) { + font-family: var(--ig-h5-font-family, var(--ig-font-family)); + font-size: var(--ig-h5-font-size); + font-weight: var(--ig-h5-font-weight); + font-style: var(--ig-h5-font-style); + line-height: var(--ig-h5-line-height); + letter-spacing: var(--ig-h5-letter-spacing); + text-transform: var(--ig-h5-text-transform); + margin-top: var(--ig-h5-margin-top); + margin-bottom: var(--ig-h5-margin-bottom); +} +.test-output :where(h6):not(:where([data-no-typography], [data-no-typography] *)) { + font-family: var(--ig-h6-font-family, var(--ig-font-family)); + font-size: var(--ig-h6-font-size); + font-weight: var(--ig-h6-font-weight); + font-style: var(--ig-h6-font-style); + line-height: var(--ig-h6-line-height); + letter-spacing: var(--ig-h6-letter-spacing); + text-transform: var(--ig-h6-text-transform); + margin-top: var(--ig-h6-margin-top); + margin-bottom: var(--ig-h6-margin-bottom); +} +.test-output :where(p):not(:where([data-no-typography], [data-no-typography] *)) { + font-family: var(--ig-body-1-font-family, var(--ig-font-family)); + font-size: var(--ig-body-1-font-size); + font-weight: var(--ig-body-1-font-weight); + font-style: var(--ig-body-1-font-style); + line-height: var(--ig-body-1-line-height); + letter-spacing: var(--ig-body-1-letter-spacing); + text-transform: var(--ig-body-1-text-transform); + margin-top: var(--ig-body-1-margin-top); + margin-bottom: var(--ig-body-1-margin-bottom); +} + +/* END_EXPECTED */ +/* END_ASSERT */ +/* */ +/* Test: should include typography variables in the :root scope */ +/* ASSERT: */ +/* OUTPUT */ +:root { + --ig-font-family: Roboto, sans-serif; + --ig-base-font-size: 16px; + --ig-h1-font-size: 96px; + --ig-h1-font-weight: normal; + --ig-h1-font-style: normal; + --ig-h1-line-height: normal; + --ig-h1-letter-spacing: normal; + --ig-h1-text-transform: none; + --ig-h1-margin-top: 0; + --ig-h1-margin-bottom: 0; + --ig-h2-font-size: 70px; + --ig-h2-font-weight: normal; + --ig-h2-font-style: normal; + --ig-h2-line-height: normal; + --ig-h2-letter-spacing: normal; + --ig-h2-text-transform: none; + --ig-h2-margin-top: 0; + --ig-h2-margin-bottom: 0; + --ig-h3-font-size: 40px; + --ig-h3-font-weight: normal; + --ig-h3-font-style: normal; + --ig-h3-line-height: normal; + --ig-h3-letter-spacing: normal; + --ig-h3-text-transform: none; + --ig-h3-margin-top: 0; + --ig-h3-margin-bottom: 0; + --ig-h4-font-size: 30px; + --ig-h4-font-weight: normal; + --ig-h4-font-style: normal; + --ig-h4-line-height: normal; + --ig-h4-letter-spacing: normal; + --ig-h4-text-transform: none; + --ig-h4-margin-top: 0; + --ig-h4-margin-bottom: 0; + --ig-h5-font-size: 20px; + --ig-h5-font-weight: normal; + --ig-h5-font-style: normal; + --ig-h5-line-height: normal; + --ig-h5-letter-spacing: normal; + --ig-h5-text-transform: none; + --ig-h5-margin-top: 0; + --ig-h5-margin-bottom: 0; + --ig-h6-font-size: 10px; + --ig-h6-font-weight: normal; + --ig-h6-font-style: normal; + --ig-h6-line-height: normal; + --ig-h6-letter-spacing: normal; + --ig-h6-text-transform: none; + --ig-h6-margin-top: 0; + --ig-h6-margin-bottom: 0; + --ig-subtitle-1-font-size: 96px; + --ig-subtitle-1-font-weight: normal; + --ig-subtitle-1-font-style: normal; + --ig-subtitle-1-line-height: normal; + --ig-subtitle-1-letter-spacing: normal; + --ig-subtitle-1-text-transform: none; + --ig-subtitle-1-margin-top: 0; + --ig-subtitle-1-margin-bottom: 0; + --ig-subtitle-2-font-size: 70px; + --ig-subtitle-2-font-weight: normal; + --ig-subtitle-2-font-style: normal; + --ig-subtitle-2-line-height: normal; + --ig-subtitle-2-letter-spacing: normal; + --ig-subtitle-2-text-transform: none; + --ig-subtitle-2-margin-top: 0; + --ig-subtitle-2-margin-bottom: 0; + --ig-body-1-font-size: 40px; + --ig-body-1-font-weight: normal; + --ig-body-1-font-style: normal; + --ig-body-1-line-height: normal; + --ig-body-1-letter-spacing: normal; + --ig-body-1-text-transform: none; + --ig-body-1-margin-top: 0; + --ig-body-1-margin-bottom: 0; + --ig-body-2-font-size: 30px; + --ig-body-2-font-weight: normal; + --ig-body-2-font-style: normal; + --ig-body-2-line-height: normal; + --ig-body-2-letter-spacing: normal; + --ig-body-2-text-transform: none; + --ig-body-2-margin-top: 0; + --ig-body-2-margin-bottom: 0; + --ig-button-font-size: 20px; + --ig-button-font-weight: normal; + --ig-button-font-style: normal; + --ig-button-line-height: normal; + --ig-button-letter-spacing: normal; + --ig-button-text-transform: none; + --ig-button-margin-top: 0; + --ig-button-margin-bottom: 0; + --ig-caption-font-size: 10px; + --ig-caption-font-weight: normal; + --ig-caption-font-style: normal; + --ig-caption-line-height: normal; + --ig-caption-letter-spacing: normal; + --ig-caption-text-transform: none; + --ig-caption-margin-top: 0; + --ig-caption-margin-bottom: 0; + --ig-overline-font-size: 10px; + --ig-overline-font-weight: normal; + --ig-overline-font-style: normal; + --ig-overline-line-height: normal; + --ig-overline-letter-spacing: normal; + --ig-overline-text-transform: none; + --ig-overline-margin-top: 0; + --ig-overline-margin-bottom: 0; +} + +.ig-typography h1 { + font-family: var(--ig-h1-font-family, var(--ig-font-family)); + font-size: var(--ig-h1-font-size); + font-weight: var(--ig-h1-font-weight); + font-style: var(--ig-h1-font-style); + line-height: var(--ig-h1-line-height); + letter-spacing: var(--ig-h1-letter-spacing); + text-transform: var(--ig-h1-text-transform); + margin-top: var(--ig-h1-margin-top); + margin-bottom: var(--ig-h1-margin-bottom); +} +.ig-typography h2 { + font-family: var(--ig-h2-font-family, var(--ig-font-family)); + font-size: var(--ig-h2-font-size); + font-weight: var(--ig-h2-font-weight); + font-style: var(--ig-h2-font-style); + line-height: var(--ig-h2-line-height); + letter-spacing: var(--ig-h2-letter-spacing); + text-transform: var(--ig-h2-text-transform); + margin-top: var(--ig-h2-margin-top); + margin-bottom: var(--ig-h2-margin-bottom); +} +.ig-typography h3 { + font-family: var(--ig-h3-font-family, var(--ig-font-family)); + font-size: var(--ig-h3-font-size); + font-weight: var(--ig-h3-font-weight); + font-style: var(--ig-h3-font-style); + line-height: var(--ig-h3-line-height); + letter-spacing: var(--ig-h3-letter-spacing); + text-transform: var(--ig-h3-text-transform); + margin-top: var(--ig-h3-margin-top); + margin-bottom: var(--ig-h3-margin-bottom); +} +.ig-typography h4 { + font-family: var(--ig-h4-font-family, var(--ig-font-family)); + font-size: var(--ig-h4-font-size); + font-weight: var(--ig-h4-font-weight); + font-style: var(--ig-h4-font-style); + line-height: var(--ig-h4-line-height); + letter-spacing: var(--ig-h4-letter-spacing); + text-transform: var(--ig-h4-text-transform); + margin-top: var(--ig-h4-margin-top); + margin-bottom: var(--ig-h4-margin-bottom); +} +.ig-typography h5 { + font-family: var(--ig-h5-font-family, var(--ig-font-family)); + font-size: var(--ig-h5-font-size); + font-weight: var(--ig-h5-font-weight); + font-style: var(--ig-h5-font-style); + line-height: var(--ig-h5-line-height); + letter-spacing: var(--ig-h5-letter-spacing); + text-transform: var(--ig-h5-text-transform); + margin-top: var(--ig-h5-margin-top); + margin-bottom: var(--ig-h5-margin-bottom); +} +.ig-typography h6 { + font-family: var(--ig-h6-font-family, var(--ig-font-family)); + font-size: var(--ig-h6-font-size); + font-weight: var(--ig-h6-font-weight); + font-style: var(--ig-h6-font-style); + line-height: var(--ig-h6-line-height); + letter-spacing: var(--ig-h6-letter-spacing); + text-transform: var(--ig-h6-text-transform); + margin-top: var(--ig-h6-margin-top); + margin-bottom: var(--ig-h6-margin-bottom); +} +.ig-typography p { + font-family: var(--ig-body-1-font-family, var(--ig-font-family)); + font-size: var(--ig-body-1-font-size); + font-weight: var(--ig-body-1-font-weight); + font-style: var(--ig-body-1-font-style); + line-height: var(--ig-body-1-line-height); + letter-spacing: var(--ig-body-1-letter-spacing); + text-transform: var(--ig-body-1-text-transform); + margin-top: var(--ig-body-1-margin-top); + margin-bottom: var(--ig-body-1-margin-bottom); +} +.ig-typography .ig-typography__h1 { + font-family: var(--ig-h1-font-family, var(--ig-font-family)); + font-size: var(--ig-h1-font-size); + font-weight: var(--ig-h1-font-weight); + font-style: var(--ig-h1-font-style); + line-height: var(--ig-h1-line-height); + letter-spacing: var(--ig-h1-letter-spacing); + text-transform: var(--ig-h1-text-transform); + margin-top: var(--ig-h1-margin-top); + margin-bottom: var(--ig-h1-margin-bottom); +} +.ig-typography .ig-typography__h2 { + font-family: var(--ig-h2-font-family, var(--ig-font-family)); + font-size: var(--ig-h2-font-size); + font-weight: var(--ig-h2-font-weight); + font-style: var(--ig-h2-font-style); + line-height: var(--ig-h2-line-height); + letter-spacing: var(--ig-h2-letter-spacing); + text-transform: var(--ig-h2-text-transform); + margin-top: var(--ig-h2-margin-top); + margin-bottom: var(--ig-h2-margin-bottom); +} +.ig-typography .ig-typography__h3 { + font-family: var(--ig-h3-font-family, var(--ig-font-family)); + font-size: var(--ig-h3-font-size); + font-weight: var(--ig-h3-font-weight); + font-style: var(--ig-h3-font-style); + line-height: var(--ig-h3-line-height); + letter-spacing: var(--ig-h3-letter-spacing); + text-transform: var(--ig-h3-text-transform); + margin-top: var(--ig-h3-margin-top); + margin-bottom: var(--ig-h3-margin-bottom); +} +.ig-typography .ig-typography__h4 { + font-family: var(--ig-h4-font-family, var(--ig-font-family)); + font-size: var(--ig-h4-font-size); + font-weight: var(--ig-h4-font-weight); + font-style: var(--ig-h4-font-style); + line-height: var(--ig-h4-line-height); + letter-spacing: var(--ig-h4-letter-spacing); + text-transform: var(--ig-h4-text-transform); + margin-top: var(--ig-h4-margin-top); + margin-bottom: var(--ig-h4-margin-bottom); +} +.ig-typography .ig-typography__h5 { + font-family: var(--ig-h5-font-family, var(--ig-font-family)); + font-size: var(--ig-h5-font-size); + font-weight: var(--ig-h5-font-weight); + font-style: var(--ig-h5-font-style); + line-height: var(--ig-h5-line-height); + letter-spacing: var(--ig-h5-letter-spacing); + text-transform: var(--ig-h5-text-transform); + margin-top: var(--ig-h5-margin-top); + margin-bottom: var(--ig-h5-margin-bottom); +} +.ig-typography .ig-typography__h6 { + font-family: var(--ig-h6-font-family, var(--ig-font-family)); + font-size: var(--ig-h6-font-size); + font-weight: var(--ig-h6-font-weight); + font-style: var(--ig-h6-font-style); + line-height: var(--ig-h6-line-height); + letter-spacing: var(--ig-h6-letter-spacing); + text-transform: var(--ig-h6-text-transform); + margin-top: var(--ig-h6-margin-top); + margin-bottom: var(--ig-h6-margin-bottom); +} +.ig-typography .ig-typography__subtitle-1 { + font-family: var(--ig-subtitle-1-font-family, var(--ig-font-family)); + font-size: var(--ig-subtitle-1-font-size); + font-weight: var(--ig-subtitle-1-font-weight); + font-style: var(--ig-subtitle-1-font-style); + line-height: var(--ig-subtitle-1-line-height); + letter-spacing: var(--ig-subtitle-1-letter-spacing); + text-transform: var(--ig-subtitle-1-text-transform); + margin-top: var(--ig-subtitle-1-margin-top); + margin-bottom: var(--ig-subtitle-1-margin-bottom); +} +.ig-typography .ig-typography__subtitle-2 { + font-family: var(--ig-subtitle-2-font-family, var(--ig-font-family)); + font-size: var(--ig-subtitle-2-font-size); + font-weight: var(--ig-subtitle-2-font-weight); + font-style: var(--ig-subtitle-2-font-style); + line-height: var(--ig-subtitle-2-line-height); + letter-spacing: var(--ig-subtitle-2-letter-spacing); + text-transform: var(--ig-subtitle-2-text-transform); + margin-top: var(--ig-subtitle-2-margin-top); + margin-bottom: var(--ig-subtitle-2-margin-bottom); +} +.ig-typography .ig-typography__body-1 { + font-family: var(--ig-body-1-font-family, var(--ig-font-family)); + font-size: var(--ig-body-1-font-size); + font-weight: var(--ig-body-1-font-weight); + font-style: var(--ig-body-1-font-style); + line-height: var(--ig-body-1-line-height); + letter-spacing: var(--ig-body-1-letter-spacing); + text-transform: var(--ig-body-1-text-transform); + margin-top: var(--ig-body-1-margin-top); + margin-bottom: var(--ig-body-1-margin-bottom); +} +.ig-typography .ig-typography__body-2 { + font-family: var(--ig-body-2-font-family, var(--ig-font-family)); + font-size: var(--ig-body-2-font-size); + font-weight: var(--ig-body-2-font-weight); + font-style: var(--ig-body-2-font-style); + line-height: var(--ig-body-2-line-height); + letter-spacing: var(--ig-body-2-letter-spacing); + text-transform: var(--ig-body-2-text-transform); + margin-top: var(--ig-body-2-margin-top); + margin-bottom: var(--ig-body-2-margin-bottom); +} +.ig-typography .ig-typography__button { + font-family: var(--ig-button-font-family, var(--ig-font-family)); + font-size: var(--ig-button-font-size); + font-weight: var(--ig-button-font-weight); + font-style: var(--ig-button-font-style); + line-height: var(--ig-button-line-height); + letter-spacing: var(--ig-button-letter-spacing); + text-transform: var(--ig-button-text-transform); + margin-top: var(--ig-button-margin-top); + margin-bottom: var(--ig-button-margin-bottom); +} +.ig-typography .ig-typography__caption { + font-family: var(--ig-caption-font-family, var(--ig-font-family)); + font-size: var(--ig-caption-font-size); + font-weight: var(--ig-caption-font-weight); + font-style: var(--ig-caption-font-style); + line-height: var(--ig-caption-line-height); + letter-spacing: var(--ig-caption-letter-spacing); + text-transform: var(--ig-caption-text-transform); + margin-top: var(--ig-caption-margin-top); + margin-bottom: var(--ig-caption-margin-bottom); +} +.ig-typography .ig-typography__overline { + font-family: var(--ig-overline-font-family, var(--ig-font-family)); + font-size: var(--ig-overline-font-size); + font-weight: var(--ig-overline-font-weight); + font-style: var(--ig-overline-font-style); + line-height: var(--ig-overline-line-height); + letter-spacing: var(--ig-overline-letter-spacing); + text-transform: var(--ig-overline-text-transform); + margin-top: var(--ig-overline-margin-top); + margin-bottom: var(--ig-overline-margin-bottom); +} + +/* END_OUTPUT */ +/* CONTAINED */ +:root { + --ig-font-family: Roboto, sans-serif; + --ig-h1-font-size: 96px; + --ig-h1-font-weight: normal; + --ig-h1-font-style: normal; + --ig-h1-line-height: normal; + --ig-h1-letter-spacing: normal; + --ig-h1-text-transform: none; + --ig-h1-margin-top: 0; + --ig-h1-margin-bottom: 0; + --ig-h2-font-size: 70px; + --ig-h2-font-weight: normal; + --ig-h2-font-style: normal; + --ig-h2-line-height: normal; + --ig-h2-letter-spacing: normal; + --ig-h2-text-transform: none; + --ig-h2-margin-top: 0; + --ig-h2-margin-bottom: 0; + --ig-h3-font-size: 40px; + --ig-h3-font-weight: normal; + --ig-h3-font-style: normal; + --ig-h3-line-height: normal; + --ig-h3-letter-spacing: normal; + --ig-h3-text-transform: none; + --ig-h3-margin-top: 0; + --ig-h3-margin-bottom: 0; + --ig-h4-font-size: 30px; + --ig-h4-font-weight: normal; + --ig-h4-font-style: normal; + --ig-h4-line-height: normal; + --ig-h4-letter-spacing: normal; + --ig-h4-text-transform: none; + --ig-h4-margin-top: 0; + --ig-h4-margin-bottom: 0; + --ig-h5-font-size: 20px; + --ig-h5-font-weight: normal; + --ig-h5-font-style: normal; + --ig-h5-line-height: normal; + --ig-h5-letter-spacing: normal; + --ig-h5-text-transform: none; + --ig-h5-margin-top: 0; + --ig-h5-margin-bottom: 0; + --ig-h6-font-size: 10px; + --ig-h6-font-weight: normal; + --ig-h6-font-style: normal; + --ig-h6-line-height: normal; + --ig-h6-letter-spacing: normal; + --ig-h6-text-transform: none; + --ig-h6-margin-top: 0; + --ig-h6-margin-bottom: 0; + --ig-subtitle-1-font-size: 96px; + --ig-subtitle-1-font-weight: normal; + --ig-subtitle-1-font-style: normal; + --ig-subtitle-1-line-height: normal; + --ig-subtitle-1-letter-spacing: normal; + --ig-subtitle-1-text-transform: none; + --ig-subtitle-1-margin-top: 0; + --ig-subtitle-1-margin-bottom: 0; + --ig-subtitle-2-font-size: 70px; + --ig-subtitle-2-font-weight: normal; + --ig-subtitle-2-font-style: normal; + --ig-subtitle-2-line-height: normal; + --ig-subtitle-2-letter-spacing: normal; + --ig-subtitle-2-text-transform: none; + --ig-subtitle-2-margin-top: 0; + --ig-subtitle-2-margin-bottom: 0; + --ig-body-1-font-size: 40px; + --ig-body-1-font-weight: normal; + --ig-body-1-font-style: normal; + --ig-body-1-line-height: normal; + --ig-body-1-letter-spacing: normal; + --ig-body-1-text-transform: none; + --ig-body-1-margin-top: 0; + --ig-body-1-margin-bottom: 0; + --ig-body-2-font-size: 30px; + --ig-body-2-font-weight: normal; + --ig-body-2-font-style: normal; + --ig-body-2-line-height: normal; + --ig-body-2-letter-spacing: normal; + --ig-body-2-text-transform: none; + --ig-body-2-margin-top: 0; + --ig-body-2-margin-bottom: 0; + --ig-button-font-size: 20px; + --ig-button-font-weight: normal; + --ig-button-font-style: normal; + --ig-button-line-height: normal; + --ig-button-letter-spacing: normal; + --ig-button-text-transform: none; + --ig-button-margin-top: 0; + --ig-button-margin-bottom: 0; + --ig-caption-font-size: 10px; + --ig-caption-font-weight: normal; + --ig-caption-font-style: normal; + --ig-caption-line-height: normal; + --ig-caption-letter-spacing: normal; + --ig-caption-text-transform: none; + --ig-caption-margin-top: 0; + --ig-caption-margin-bottom: 0; + --ig-overline-font-size: 10px; + --ig-overline-font-weight: normal; + --ig-overline-font-style: normal; + --ig-overline-line-height: normal; + --ig-overline-letter-spacing: normal; + --ig-overline-text-transform: none; + --ig-overline-margin-top: 0; + --ig-overline-margin-bottom: 0; +} + +/* END_CONTAINED */ +/* END_ASSERT */ +/* */ +/* Test: should include typography variables for a parent scope */ +/* ASSERT: */ +/* OUTPUT */ +.test-output { + --ig-font-family: Roboto, sans-serif; + --ig-base-font-size: 16px; + --ig-h1-font-size: 96px; + --ig-h1-font-weight: normal; + --ig-h1-font-style: normal; + --ig-h1-line-height: normal; + --ig-h1-letter-spacing: normal; + --ig-h1-text-transform: none; + --ig-h1-margin-top: 0; + --ig-h1-margin-bottom: 0; + --ig-h2-font-size: 70px; + --ig-h2-font-weight: normal; + --ig-h2-font-style: normal; + --ig-h2-line-height: normal; + --ig-h2-letter-spacing: normal; + --ig-h2-text-transform: none; + --ig-h2-margin-top: 0; + --ig-h2-margin-bottom: 0; + --ig-h3-font-size: 40px; + --ig-h3-font-weight: normal; + --ig-h3-font-style: normal; + --ig-h3-line-height: normal; + --ig-h3-letter-spacing: normal; + --ig-h3-text-transform: none; + --ig-h3-margin-top: 0; + --ig-h3-margin-bottom: 0; + --ig-h4-font-size: 30px; + --ig-h4-font-weight: normal; + --ig-h4-font-style: normal; + --ig-h4-line-height: normal; + --ig-h4-letter-spacing: normal; + --ig-h4-text-transform: none; + --ig-h4-margin-top: 0; + --ig-h4-margin-bottom: 0; + --ig-h5-font-size: 20px; + --ig-h5-font-weight: normal; + --ig-h5-font-style: normal; + --ig-h5-line-height: normal; + --ig-h5-letter-spacing: normal; + --ig-h5-text-transform: none; + --ig-h5-margin-top: 0; + --ig-h5-margin-bottom: 0; + --ig-h6-font-size: 10px; + --ig-h6-font-weight: normal; + --ig-h6-font-style: normal; + --ig-h6-line-height: normal; + --ig-h6-letter-spacing: normal; + --ig-h6-text-transform: none; + --ig-h6-margin-top: 0; + --ig-h6-margin-bottom: 0; + --ig-subtitle-1-font-size: 96px; + --ig-subtitle-1-font-weight: normal; + --ig-subtitle-1-font-style: normal; + --ig-subtitle-1-line-height: normal; + --ig-subtitle-1-letter-spacing: normal; + --ig-subtitle-1-text-transform: none; + --ig-subtitle-1-margin-top: 0; + --ig-subtitle-1-margin-bottom: 0; + --ig-subtitle-2-font-size: 70px; + --ig-subtitle-2-font-weight: normal; + --ig-subtitle-2-font-style: normal; + --ig-subtitle-2-line-height: normal; + --ig-subtitle-2-letter-spacing: normal; + --ig-subtitle-2-text-transform: none; + --ig-subtitle-2-margin-top: 0; + --ig-subtitle-2-margin-bottom: 0; + --ig-body-1-font-size: 40px; + --ig-body-1-font-weight: normal; + --ig-body-1-font-style: normal; + --ig-body-1-line-height: normal; + --ig-body-1-letter-spacing: normal; + --ig-body-1-text-transform: none; + --ig-body-1-margin-top: 0; + --ig-body-1-margin-bottom: 0; + --ig-body-2-font-size: 30px; + --ig-body-2-font-weight: normal; + --ig-body-2-font-style: normal; + --ig-body-2-line-height: normal; + --ig-body-2-letter-spacing: normal; + --ig-body-2-text-transform: none; + --ig-body-2-margin-top: 0; + --ig-body-2-margin-bottom: 0; + --ig-button-font-size: 20px; + --ig-button-font-weight: normal; + --ig-button-font-style: normal; + --ig-button-line-height: normal; + --ig-button-letter-spacing: normal; + --ig-button-text-transform: none; + --ig-button-margin-top: 0; + --ig-button-margin-bottom: 0; + --ig-caption-font-size: 10px; + --ig-caption-font-weight: normal; + --ig-caption-font-style: normal; + --ig-caption-line-height: normal; + --ig-caption-letter-spacing: normal; + --ig-caption-text-transform: none; + --ig-caption-margin-top: 0; + --ig-caption-margin-bottom: 0; + --ig-overline-font-size: 10px; + --ig-overline-font-weight: normal; + --ig-overline-font-style: normal; + --ig-overline-line-height: normal; + --ig-overline-letter-spacing: normal; + --ig-overline-text-transform: none; + --ig-overline-margin-top: 0; + --ig-overline-margin-bottom: 0; +} + +/* END_OUTPUT */ +/* EXPECTED */ +.test-output { + --ig-font-family: Roboto, sans-serif; + --ig-base-font-size: 16px; + --ig-h1-font-size: 96px; + --ig-h1-font-weight: normal; + --ig-h1-font-style: normal; + --ig-h1-line-height: normal; + --ig-h1-letter-spacing: normal; + --ig-h1-text-transform: none; + --ig-h1-margin-top: 0; + --ig-h1-margin-bottom: 0; + --ig-h2-font-size: 70px; + --ig-h2-font-weight: normal; + --ig-h2-font-style: normal; + --ig-h2-line-height: normal; + --ig-h2-letter-spacing: normal; + --ig-h2-text-transform: none; + --ig-h2-margin-top: 0; + --ig-h2-margin-bottom: 0; + --ig-h3-font-size: 40px; + --ig-h3-font-weight: normal; + --ig-h3-font-style: normal; + --ig-h3-line-height: normal; + --ig-h3-letter-spacing: normal; + --ig-h3-text-transform: none; + --ig-h3-margin-top: 0; + --ig-h3-margin-bottom: 0; + --ig-h4-font-size: 30px; + --ig-h4-font-weight: normal; + --ig-h4-font-style: normal; + --ig-h4-line-height: normal; + --ig-h4-letter-spacing: normal; + --ig-h4-text-transform: none; + --ig-h4-margin-top: 0; + --ig-h4-margin-bottom: 0; + --ig-h5-font-size: 20px; + --ig-h5-font-weight: normal; + --ig-h5-font-style: normal; + --ig-h5-line-height: normal; + --ig-h5-letter-spacing: normal; + --ig-h5-text-transform: none; + --ig-h5-margin-top: 0; + --ig-h5-margin-bottom: 0; + --ig-h6-font-size: 10px; + --ig-h6-font-weight: normal; + --ig-h6-font-style: normal; + --ig-h6-line-height: normal; + --ig-h6-letter-spacing: normal; + --ig-h6-text-transform: none; + --ig-h6-margin-top: 0; + --ig-h6-margin-bottom: 0; + --ig-subtitle-1-font-size: 96px; + --ig-subtitle-1-font-weight: normal; + --ig-subtitle-1-font-style: normal; + --ig-subtitle-1-line-height: normal; + --ig-subtitle-1-letter-spacing: normal; + --ig-subtitle-1-text-transform: none; + --ig-subtitle-1-margin-top: 0; + --ig-subtitle-1-margin-bottom: 0; + --ig-subtitle-2-font-size: 70px; + --ig-subtitle-2-font-weight: normal; + --ig-subtitle-2-font-style: normal; + --ig-subtitle-2-line-height: normal; + --ig-subtitle-2-letter-spacing: normal; + --ig-subtitle-2-text-transform: none; + --ig-subtitle-2-margin-top: 0; + --ig-subtitle-2-margin-bottom: 0; + --ig-body-1-font-size: 40px; + --ig-body-1-font-weight: normal; + --ig-body-1-font-style: normal; + --ig-body-1-line-height: normal; + --ig-body-1-letter-spacing: normal; + --ig-body-1-text-transform: none; + --ig-body-1-margin-top: 0; + --ig-body-1-margin-bottom: 0; + --ig-body-2-font-size: 30px; + --ig-body-2-font-weight: normal; + --ig-body-2-font-style: normal; + --ig-body-2-line-height: normal; + --ig-body-2-letter-spacing: normal; + --ig-body-2-text-transform: none; + --ig-body-2-margin-top: 0; + --ig-body-2-margin-bottom: 0; + --ig-button-font-size: 20px; + --ig-button-font-weight: normal; + --ig-button-font-style: normal; + --ig-button-line-height: normal; + --ig-button-letter-spacing: normal; + --ig-button-text-transform: none; + --ig-button-margin-top: 0; + --ig-button-margin-bottom: 0; + --ig-caption-font-size: 10px; + --ig-caption-font-weight: normal; + --ig-caption-font-style: normal; + --ig-caption-line-height: normal; + --ig-caption-letter-spacing: normal; + --ig-caption-text-transform: none; + --ig-caption-margin-top: 0; + --ig-caption-margin-bottom: 0; + --ig-overline-font-size: 10px; + --ig-overline-font-weight: normal; + --ig-overline-font-style: normal; + --ig-overline-line-height: normal; + --ig-overline-letter-spacing: normal; + --ig-overline-text-transform: none; + --ig-overline-margin-top: 0; + --ig-overline-margin-bottom: 0; +} + +/* END_EXPECTED */ +/* END_ASSERT */ +/* */ +/* */ +/* */ +/* # Module: Utilities */ +/* ------------------- */ +/* # Module: Utilities :: css */ +/* -------------------------- */ +/* Test: should expand shorthand properties */ +/* ✔ [assert-equal] should expand shorthand properties */ +/* */ +/* */ +/* # Module: Utilities :: meta */ +/* --------------------------- */ +/* Test: should resolve if the call context is the root of the stylesheet */ +/* ASSERT: */ +/* OUTPUT */ +.test-output { + content: true; +} + +/* END_OUTPUT */ +/* EXPECTED */ +.test-output { + content: true; +} + +/* END_EXPECTED */ +/* END_ASSERT */ +/* ASSERT: */ +/* OUTPUT */ +.test-output { + content: false; +} + +/* END_OUTPUT */ +/* EXPECTED */ +.test-output { + content: false; +} + +/* END_EXPECTED */ +/* END_ASSERT */ +/* */ +/* Test: should resolve if the call context is :host */ +/* ASSERT: */ +/* OUTPUT */ +:host { + content: true; +} + +/* END_OUTPUT */ +/* EXPECTED */ +:host { + content: true; +} + +/* END_EXPECTED */ +/* END_ASSERT */ +/* ASSERT: */ +/* OUTPUT */ +.test-output { + content: false; +} + +/* END_OUTPUT */ +/* EXPECTED */ +.test-output { + content: false; +} + +/* END_EXPECTED */ +/* END_ASSERT */ +/* */ +/* */ +/* # Module: Utilities :: map */ +/* -------------------------- */ +/* Test: should clean a map of null values */ +/* ✔ [assert-equal] should clean a map of null values */ +/* */ +/* Test: should merge two maps removing null values in the process */ +/* ✔ [assert-equal] should merge two maps removing null values in the process */ +/* */ +/* Test: should accumulate _meta keys when merging schema maps */ +/* ✔ [assert-equal] should accumulate _meta keys when merging schema maps */ +/* */ +/* Test: should fully replace nested property maps regardless of whether the override has _meta */ +/* ✔ [assert-equal] should fully replace nested property maps regardless of whether the override has _meta */ +/* ✔ [assert-equal] should fully replace nested property maps regardless of whether the override has _meta */ +/* */ +/* Test: should diff two maps resolving all unique values in the second map in the process */ +/* ✔ [assert-equal] should diff two maps resolving all unique values in the second map in the process */ +/* */ +/* Test: should prefix all keys in a map with a given string */ +/* ✔ [assert-equal] should prefix all keys in a map with a given string */ +/* */ +/* */ +/* # Module: Utilities :: math */ +/* --------------------------- */ +/* Test: returns a number to a fixed floating point */ +/* ✔ [assert-equal] returns a number to a fixed floating point */ +/* */ +/* Test: converts a number to string */ +/* ✔ [assert-equal] converts a number to string */ +/* */ +/* */ +/* # Module: Utilities :: string */ +/* ----------------------------- */ +/* Test: should split a string by a given separator into a list of values */ +/* ✔ [assert-equal] should split a string by a given separator into a list of values */ +/* */ +/* Test: should replace a search term in target string */ +/* ✔ [assert-equal] should replace a search term in target string */ +/* */ +/* Test: converts a string into a number */ +/* ✔ [assert-equal] converts a string into a number */ +/* ✔ [assert-equal] converts a string into a number */ +/* */ +/* */ +/* */ +/* # Module: Themes */ +/* ---------------- */ +/* # Module: Themes :: schemas */ +/* --------------------------- */ +/* Test: resolves util function values */ +/* ✔ [assert-equal] resolves util function values */ +/* ASSERT: */ +/* OUTPUT */ +igx-data-chart { + --title-padding-top: var(--igx-data-chart-title-padding-top, var(--ig-data-chart-title-padding-top, 4px)); + --title-padding-right: var(--igx-data-chart-title-padding-right, var(--ig-data-chart-title-padding-right, 8px)); + --title-padding-bottom: var(--igx-data-chart-title-padding-bottom, var(--ig-data-chart-title-padding-bottom, 4px)); + --title-padding-left: var(--igx-data-chart-title-padding-left, var(--ig-data-chart-title-padding-left, 8px)); + --ig-theme: material; + --ig-theme-variant: light; +} + +/* END_OUTPUT */ +/* EXPECTED */ +igx-data-chart { + --title-padding-top: var(--igx-data-chart-title-padding-top, var(--ig-data-chart-title-padding-top, 4px)); + --title-padding-right: var(--igx-data-chart-title-padding-right, var(--ig-data-chart-title-padding-right, 8px)); + --title-padding-bottom: var(--igx-data-chart-title-padding-bottom, var(--ig-data-chart-title-padding-bottom, 4px)); + --title-padding-left: var(--igx-data-chart-title-padding-left, var(--ig-data-chart-title-padding-left, 8px)); + --ig-theme: material; + --ig-theme-variant: light; +} + +/* END_EXPECTED */ +/* END_ASSERT */ +/* */ +/* Test: should resolve values from function instructions */ +/* ✔ [assert-equal] should resolve values from function instructions */ +/* ✔ [assert-equal] should resolve values from function instructions */ +/* */ +/* Test: should work with custom(handmade) palettes */ +/* ✔ [assert-equal] should work with custom(handmade) palettes */ +/* ✔ [assert-equal] should work with custom(handmade) palettes */ +/* */ +/* Test: should output theme maps from schema definitions */ +/* ✔ [assert-equal] should output theme maps from schema definitions */ +/* */ +/* Test: should include proper metadata in each component schema */ +/* ✔ [assert-true] Component schema for category-chart is missing metadata. */ +/* ✔ [assert-equal] Component schema for light material category-chart has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light material category-chart has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for category-chart is missing name metadata. */ +/* ✔ [assert-true] Component schema for data-chart is missing metadata. */ +/* ✔ [assert-equal] Component schema for light material data-chart has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light material data-chart has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for data-chart is missing name metadata. */ +/* ✔ [assert-true] Component schema for doughnut-chart is missing metadata. */ +/* ✔ [assert-equal] Component schema for light material doughnut-chart has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light material doughnut-chart has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for doughnut-chart is missing name metadata. */ +/* ✔ [assert-true] Component schema for financial-chart is missing metadata. */ +/* ✔ [assert-equal] Component schema for light material financial-chart has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light material financial-chart has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for financial-chart is missing name metadata. */ +/* ✔ [assert-true] Component schema for funnel-chart is missing metadata. */ +/* ✔ [assert-equal] Component schema for light material funnel-chart has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light material funnel-chart has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for funnel-chart is missing name metadata. */ +/* ✔ [assert-true] Component schema for linear-gauge is missing metadata. */ +/* ✔ [assert-equal] Component schema for light material linear-gauge has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light material linear-gauge has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for linear-gauge is missing name metadata. */ +/* ✔ [assert-true] Component schema for radial-gauge is missing metadata. */ +/* ✔ [assert-equal] Component schema for light material radial-gauge has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light material radial-gauge has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for radial-gauge is missing name metadata. */ +/* ✔ [assert-true] Component schema for geo-map is missing metadata. */ +/* ✔ [assert-equal] Component schema for light material geo-map has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light material geo-map has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for geo-map is missing name metadata. */ +/* ✔ [assert-true] Component schema for bullet-graph is missing metadata. */ +/* ✔ [assert-equal] Component schema for light material bullet-graph has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light material bullet-graph has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for bullet-graph is missing name metadata. */ +/* ✔ [assert-true] Component schema for pie-chart is missing metadata. */ +/* ✔ [assert-equal] Component schema for light material pie-chart has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light material pie-chart has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for pie-chart is missing name metadata. */ +/* ✔ [assert-true] Component schema for shape-chart is missing metadata. */ +/* ✔ [assert-equal] Component schema for light material shape-chart has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light material shape-chart has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for shape-chart is missing name metadata. */ +/* ✔ [assert-true] Component schema for sparkline is missing metadata. */ +/* ✔ [assert-equal] Component schema for light material sparkline has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light material sparkline has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for sparkline is missing name metadata. */ +/* ✔ [assert-true] Component schema for action-strip is missing metadata. */ +/* ✔ [assert-equal] Component schema for light material action-strip has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light material action-strip has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for action-strip is missing name metadata. */ +/* ✔ [assert-true] Component schema for avatar is missing metadata. */ +/* ✔ [assert-equal] Component schema for light material avatar has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light material avatar has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for avatar is missing name metadata. */ +/* ✔ [assert-true] Component schema for badge is missing metadata. */ +/* ✔ [assert-equal] Component schema for light material badge has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light material badge has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for badge is missing name metadata. */ +/* ✔ [assert-true] Component schema for banner is missing metadata. */ +/* ✔ [assert-equal] Component schema for light material banner has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light material banner has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for banner is missing name metadata. */ +/* ✔ [assert-true] Component schema for bottom-nav is missing metadata. */ +/* ✔ [assert-equal] Component schema for light material bottom-nav has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light material bottom-nav has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for bottom-nav is missing name metadata. */ +/* ✔ [assert-true] Component schema for flat button is missing metadata. */ +/* ✔ [assert-equal] Component schema for light material flat button has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light material flat button has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for flat button is missing name metadata. */ +/* ✔ [assert-true] Component schema for outlined button is missing metadata. */ +/* ✔ [assert-equal] Component schema for light material outlined button has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light material outlined button has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for outlined button is missing name metadata. */ +/* ✔ [assert-true] Component schema for contained button is missing metadata. */ +/* ✔ [assert-equal] Component schema for light material contained button has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light material contained button has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for contained button is missing name metadata. */ +/* ✔ [assert-true] Component schema for fab button is missing metadata. */ +/* ✔ [assert-equal] Component schema for light material fab button has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light material fab button has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for fab button is missing name metadata. */ +/* ✔ [assert-true] Component schema for button-group is missing metadata. */ +/* ✔ [assert-equal] Component schema for light material button-group has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light material button-group has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for button-group is missing name metadata. */ +/* ✔ [assert-true] Component schema for calendar is missing metadata. */ +/* ✔ [assert-equal] Component schema for light material calendar has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light material calendar has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for calendar is missing name metadata. */ +/* ✔ [assert-true] Component schema for card is missing metadata. */ +/* ✔ [assert-equal] Component schema for light material card has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light material card has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for card is missing name metadata. */ +/* ✔ [assert-true] Component schema for carousel is missing metadata. */ +/* ✔ [assert-equal] Component schema for light material carousel has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light material carousel has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for carousel is missing name metadata. */ +/* ✔ [assert-true] Component schema for chat is missing metadata. */ +/* ✔ [assert-equal] Component schema for light material chat has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light material chat has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for chat is missing name metadata. */ +/* ✔ [assert-true] Component schema for checkbox is missing metadata. */ +/* ✔ [assert-equal] Component schema for light material checkbox has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light material checkbox has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for checkbox is missing name metadata. */ +/* ✔ [assert-true] Component schema for chip is missing metadata. */ +/* ✔ [assert-equal] Component schema for light material chip has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light material chip has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for chip is missing name metadata. */ +/* ✔ [assert-true] Component schema for color-picker is missing metadata. */ +/* ✔ [assert-equal] Component schema for light material color-picker has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light material color-picker has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for color-picker is missing name metadata. */ +/* ✔ [assert-true] Component schema for column-actions is missing metadata. */ +/* ✔ [assert-equal] Component schema for light material column-actions has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light material column-actions has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for column-actions is missing name metadata. */ +/* ✔ [assert-true] Component schema for combo is missing metadata. */ +/* ✔ [assert-equal] Component schema for light material combo has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light material combo has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for combo is missing name metadata. */ +/* ✔ [assert-true] Component schema for date-picker is missing metadata. */ +/* ✔ [assert-equal] Component schema for light material date-picker has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light material date-picker has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for date-picker is missing name metadata. */ +/* ✔ [assert-true] Component schema for date-range is missing metadata. */ +/* ✔ [assert-equal] Component schema for light material date-range has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light material date-range has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for date-range is missing name metadata. */ +/* ✔ [assert-true] Component schema for dialog is missing metadata. */ +/* ✔ [assert-equal] Component schema for light material dialog has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light material dialog has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for dialog is missing name metadata. */ +/* ✔ [assert-true] Component schema for divider is missing metadata. */ +/* ✔ [assert-equal] Component schema for light material divider has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light material divider has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for divider is missing name metadata. */ +/* ✔ [assert-true] Component schema for dockmanager is missing metadata. */ +/* ✔ [assert-equal] Component schema for light material dockmanager has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light material dockmanager has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for dockmanager is missing name metadata. */ +/* ✔ [assert-true] Component schema for drop-down is missing metadata. */ +/* ✔ [assert-equal] Component schema for light material drop-down has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light material drop-down has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for drop-down is missing name metadata. */ +/* ✔ [assert-true] Component schema for expansion-panel is missing metadata. */ +/* ✔ [assert-equal] Component schema for light material expansion-panel has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light material expansion-panel has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for expansion-panel is missing name metadata. */ +/* ✔ [assert-true] Component schema for grid is missing metadata. */ +/* ✔ [assert-equal] Component schema for light material grid has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light material grid has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for grid is missing name metadata. */ +/* ✔ [assert-true] Component schema for grid-excel-filtering is missing metadata. */ +/* ✔ [assert-equal] Component schema for light material grid-excel-filtering has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light material grid-excel-filtering has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for grid-excel-filtering is missing name metadata. */ +/* ✔ [assert-true] Component schema for grid-filtering is missing metadata. */ +/* ✔ [assert-equal] Component schema for light material grid-filtering has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light material grid-filtering has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for grid-filtering is missing name metadata. */ +/* ✔ [assert-true] Component schema for grid-summary is missing metadata. */ +/* ✔ [assert-equal] Component schema for light material grid-summary has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light material grid-summary has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for grid-summary is missing name metadata. */ +/* ✔ [assert-true] Component schema for grid-toolbar is missing metadata. */ +/* ✔ [assert-equal] Component schema for light material grid-toolbar has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light material grid-toolbar has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for grid-toolbar is missing name metadata. */ +/* ✔ [assert-true] Component schema for highlight is missing metadata. */ +/* ✔ [assert-equal] Component schema for light material highlight has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light material highlight has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for highlight is missing name metadata. */ +/* ✔ [assert-true] Component schema for icon is missing metadata. */ +/* ✔ [assert-equal] Component schema for light material icon has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light material icon has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for icon is missing name metadata. */ +/* ✔ [assert-true] Component schema for flat icon-button is missing metadata. */ +/* ✔ [assert-equal] Component schema for light material flat icon-button has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light material flat icon-button has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for flat icon-button is missing name metadata. */ +/* ✔ [assert-true] Component schema for contained icon-button is missing metadata. */ +/* ✔ [assert-equal] Component schema for light material contained icon-button has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light material contained icon-button has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for contained icon-button is missing name metadata. */ +/* ✔ [assert-true] Component schema for outlined icon-button is missing metadata. */ +/* ✔ [assert-equal] Component schema for light material outlined icon-button has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light material outlined icon-button has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for outlined icon-button is missing name metadata. */ +/* ✔ [assert-true] Component schema for input-group is missing metadata. */ +/* ✔ [assert-equal] Component schema for light material input-group has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light material input-group has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for input-group is missing name metadata. */ +/* ✔ [assert-true] Component schema for label is missing metadata. */ +/* ✔ [assert-equal] Component schema for light material label has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light material label has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for label is missing name metadata. */ +/* ✔ [assert-true] Component schema for list is missing metadata. */ +/* ✔ [assert-equal] Component schema for light material list has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light material list has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for list is missing name metadata. */ +/* ✔ [assert-true] Component schema for navbar is missing metadata. */ +/* ✔ [assert-equal] Component schema for light material navbar has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light material navbar has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for navbar is missing name metadata. */ +/* ✔ [assert-true] Component schema for nav-drawer is missing metadata. */ +/* ✔ [assert-equal] Component schema for light material nav-drawer has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light material nav-drawer has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for nav-drawer is missing name metadata. */ +/* ✔ [assert-true] Component schema for overlay is missing metadata. */ +/* ✔ [assert-equal] Component schema for light material overlay has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light material overlay has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for overlay is missing name metadata. */ +/* ✔ [assert-true] Component schema for paginator is missing metadata. */ +/* ✔ [assert-equal] Component schema for light material paginator has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light material paginator has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for paginator is missing name metadata. */ +/* ✔ [assert-true] Component schema for pivot-data-selector is missing metadata. */ +/* ✔ [assert-equal] Component schema for light material pivot-data-selector has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light material pivot-data-selector has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for pivot-data-selector is missing name metadata. */ +/* ✔ [assert-true] Component schema for linear-bar is missing metadata. */ +/* ✔ [assert-equal] Component schema for light material linear-bar has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light material linear-bar has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for linear-bar is missing name metadata. */ +/* ✔ [assert-true] Component schema for circular-bar is missing metadata. */ +/* ✔ [assert-equal] Component schema for light material circular-bar has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light material circular-bar has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for circular-bar is missing name metadata. */ +/* ✔ [assert-true] Component schema for qr-code is missing metadata. */ +/* ✔ [assert-equal] Component schema for light material qr-code has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light material qr-code has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for qr-code is missing name metadata. */ +/* ✔ [assert-true] Component schema for query-builder is missing metadata. */ +/* ✔ [assert-equal] Component schema for light material query-builder has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light material query-builder has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for query-builder is missing name metadata. */ +/* ✔ [assert-true] Component schema for radio is missing metadata. */ +/* ✔ [assert-equal] Component schema for light material radio has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light material radio has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for radio is missing name metadata. */ +/* ✔ [assert-true] Component schema for rating is missing metadata. */ +/* ✔ [assert-equal] Component schema for light material rating has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light material rating has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for rating is missing name metadata. */ +/* ✔ [assert-true] Component schema for resize-indicator is missing metadata. */ +/* ✔ [assert-equal] Component schema for light material resize-indicator has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light material resize-indicator has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for resize-indicator is missing name metadata. */ +/* ✔ [assert-true] Component schema for ripple is missing metadata. */ +/* ✔ [assert-equal] Component schema for light material ripple has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light material ripple has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for ripple is missing name metadata. */ +/* ✔ [assert-true] Component schema for scrollbar is missing metadata. */ +/* ✔ [assert-equal] Component schema for light material scrollbar has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light material scrollbar has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for scrollbar is missing name metadata. */ +/* ✔ [assert-true] Component schema for select is missing metadata. */ +/* ✔ [assert-equal] Component schema for light material select has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light material select has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for select is missing name metadata. */ +/* ✔ [assert-true] Component schema for slider is missing metadata. */ +/* ✔ [assert-equal] Component schema for light material slider has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light material slider has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for slider is missing name metadata. */ +/* ✔ [assert-true] Component schema for snackbar is missing metadata. */ +/* ✔ [assert-equal] Component schema for light material snackbar has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light material snackbar has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for snackbar is missing name metadata. */ +/* ✔ [assert-true] Component schema for splitter is missing metadata. */ +/* ✔ [assert-equal] Component schema for light material splitter has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light material splitter has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for splitter is missing name metadata. */ +/* ✔ [assert-true] Component schema for stepper is missing metadata. */ +/* ✔ [assert-equal] Component schema for light material stepper has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light material stepper has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for stepper is missing name metadata. */ +/* ✔ [assert-true] Component schema for switch is missing metadata. */ +/* ✔ [assert-equal] Component schema for light material switch has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light material switch has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for switch is missing name metadata. */ +/* ✔ [assert-true] Component schema for tabs is missing metadata. */ +/* ✔ [assert-equal] Component schema for light material tabs has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light material tabs has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for tabs is missing name metadata. */ +/* ✔ [assert-true] Component schema for tile-manager is missing metadata. */ +/* ✔ [assert-equal] Component schema for light material tile-manager has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light material tile-manager has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for tile-manager is missing name metadata. */ +/* ✔ [assert-true] Component schema for time-picker is missing metadata. */ +/* ✔ [assert-equal] Component schema for light material time-picker has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light material time-picker has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for time-picker is missing name metadata. */ +/* ✔ [assert-true] Component schema for toast is missing metadata. */ +/* ✔ [assert-equal] Component schema for light material toast has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light material toast has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for toast is missing name metadata. */ +/* ✔ [assert-true] Component schema for tooltip is missing metadata. */ +/* ✔ [assert-equal] Component schema for light material tooltip has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light material tooltip has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for tooltip is missing name metadata. */ +/* ✔ [assert-true] Component schema for tree is missing metadata. */ +/* ✔ [assert-equal] Component schema for light material tree has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light material tree has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for tree is missing name metadata. */ +/* ✔ [assert-true] Component schema for validator is missing metadata. */ +/* ✔ [assert-equal] Component schema for light material validator has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light material validator has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for validator is missing name metadata. */ +/* ✔ [assert-true] Component schema for watermark is missing metadata. */ +/* ✔ [assert-equal] Component schema for light material watermark has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light material watermark has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for watermark is missing name metadata. */ +/* ✔ [assert-true] Component schema for file-input is missing metadata. */ +/* ✔ [assert-equal] Component schema for light material file-input has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light material file-input has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for file-input is missing name metadata. */ +/* ✔ [assert-true] Component schema for category-chart is missing metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap category-chart has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap category-chart has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for category-chart is missing name metadata. */ +/* ✔ [assert-true] Component schema for data-chart is missing metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap data-chart has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap data-chart has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for data-chart is missing name metadata. */ +/* ✔ [assert-true] Component schema for doughnut-chart is missing metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap doughnut-chart has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap doughnut-chart has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for doughnut-chart is missing name metadata. */ +/* ✔ [assert-true] Component schema for financial-chart is missing metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap financial-chart has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap financial-chart has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for financial-chart is missing name metadata. */ +/* ✔ [assert-true] Component schema for funnel-chart is missing metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap funnel-chart has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap funnel-chart has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for funnel-chart is missing name metadata. */ +/* ✔ [assert-true] Component schema for linear-gauge is missing metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap linear-gauge has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap linear-gauge has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for linear-gauge is missing name metadata. */ +/* ✔ [assert-true] Component schema for radial-gauge is missing metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap radial-gauge has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap radial-gauge has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for radial-gauge is missing name metadata. */ +/* ✔ [assert-true] Component schema for geo-map is missing metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap geo-map has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap geo-map has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for geo-map is missing name metadata. */ +/* ✔ [assert-true] Component schema for bullet-graph is missing metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap bullet-graph has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap bullet-graph has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for bullet-graph is missing name metadata. */ +/* ✔ [assert-true] Component schema for pie-chart is missing metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap pie-chart has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap pie-chart has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for pie-chart is missing name metadata. */ +/* ✔ [assert-true] Component schema for shape-chart is missing metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap shape-chart has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap shape-chart has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for shape-chart is missing name metadata. */ +/* ✔ [assert-true] Component schema for sparkline is missing metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap sparkline has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap sparkline has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for sparkline is missing name metadata. */ +/* ✔ [assert-true] Component schema for action-strip is missing metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap action-strip has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap action-strip has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for action-strip is missing name metadata. */ +/* ✔ [assert-true] Component schema for avatar is missing metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap avatar has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap avatar has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for avatar is missing name metadata. */ +/* ✔ [assert-true] Component schema for badge is missing metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap badge has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap badge has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for badge is missing name metadata. */ +/* ✔ [assert-true] Component schema for banner is missing metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap banner has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap banner has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for banner is missing name metadata. */ +/* ✔ [assert-true] Component schema for bottom-nav is missing metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap bottom-nav has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap bottom-nav has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for bottom-nav is missing name metadata. */ +/* ✔ [assert-true] Component schema for flat button is missing metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap flat button has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap flat button has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for flat button is missing name metadata. */ +/* ✔ [assert-true] Component schema for outlined button is missing metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap outlined button has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap outlined button has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for outlined button is missing name metadata. */ +/* ✔ [assert-true] Component schema for contained button is missing metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap contained button has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap contained button has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for contained button is missing name metadata. */ +/* ✔ [assert-true] Component schema for fab button is missing metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap fab button has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap fab button has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for fab button is missing name metadata. */ +/* ✔ [assert-true] Component schema for button-group is missing metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap button-group has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap button-group has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for button-group is missing name metadata. */ +/* ✔ [assert-true] Component schema for calendar is missing metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap calendar has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap calendar has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for calendar is missing name metadata. */ +/* ✔ [assert-true] Component schema for card is missing metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap card has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap card has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for card is missing name metadata. */ +/* ✔ [assert-true] Component schema for carousel is missing metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap carousel has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap carousel has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for carousel is missing name metadata. */ +/* ✔ [assert-true] Component schema for chat is missing metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap chat has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap chat has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for chat is missing name metadata. */ +/* ✔ [assert-true] Component schema for checkbox is missing metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap checkbox has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap checkbox has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for checkbox is missing name metadata. */ +/* ✔ [assert-true] Component schema for chip is missing metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap chip has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap chip has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for chip is missing name metadata. */ +/* ✔ [assert-true] Component schema for color-picker is missing metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap color-picker has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap color-picker has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for color-picker is missing name metadata. */ +/* ✔ [assert-true] Component schema for column-actions is missing metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap column-actions has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap column-actions has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for column-actions is missing name metadata. */ +/* ✔ [assert-true] Component schema for combo is missing metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap combo has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap combo has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for combo is missing name metadata. */ +/* ✔ [assert-true] Component schema for date-picker is missing metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap date-picker has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap date-picker has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for date-picker is missing name metadata. */ +/* ✔ [assert-true] Component schema for date-range is missing metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap date-range has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap date-range has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for date-range is missing name metadata. */ +/* ✔ [assert-true] Component schema for dialog is missing metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap dialog has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap dialog has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for dialog is missing name metadata. */ +/* ✔ [assert-true] Component schema for divider is missing metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap divider has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap divider has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for divider is missing name metadata. */ +/* ✔ [assert-true] Component schema for dockmanager is missing metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap dockmanager has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap dockmanager has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for dockmanager is missing name metadata. */ +/* ✔ [assert-true] Component schema for drop-down is missing metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap drop-down has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap drop-down has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for drop-down is missing name metadata. */ +/* ✔ [assert-true] Component schema for expansion-panel is missing metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap expansion-panel has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap expansion-panel has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for expansion-panel is missing name metadata. */ +/* ✔ [assert-true] Component schema for grid is missing metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap grid has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap grid has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for grid is missing name metadata. */ +/* ✔ [assert-true] Component schema for grid-excel-filtering is missing metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap grid-excel-filtering has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap grid-excel-filtering has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for grid-excel-filtering is missing name metadata. */ +/* ✔ [assert-true] Component schema for grid-filtering is missing metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap grid-filtering has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap grid-filtering has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for grid-filtering is missing name metadata. */ +/* ✔ [assert-true] Component schema for grid-summary is missing metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap grid-summary has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap grid-summary has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for grid-summary is missing name metadata. */ +/* ✔ [assert-true] Component schema for grid-toolbar is missing metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap grid-toolbar has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap grid-toolbar has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for grid-toolbar is missing name metadata. */ +/* ✔ [assert-true] Component schema for highlight is missing metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap highlight has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap highlight has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for highlight is missing name metadata. */ +/* ✔ [assert-true] Component schema for icon is missing metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap icon has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap icon has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for icon is missing name metadata. */ +/* ✔ [assert-true] Component schema for flat icon-button is missing metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap flat icon-button has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap flat icon-button has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for flat icon-button is missing name metadata. */ +/* ✔ [assert-true] Component schema for contained icon-button is missing metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap contained icon-button has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap contained icon-button has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for contained icon-button is missing name metadata. */ +/* ✔ [assert-true] Component schema for outlined icon-button is missing metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap outlined icon-button has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap outlined icon-button has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for outlined icon-button is missing name metadata. */ +/* ✔ [assert-true] Component schema for input-group is missing metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap input-group has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap input-group has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for input-group is missing name metadata. */ +/* ✔ [assert-true] Component schema for label is missing metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap label has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap label has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for label is missing name metadata. */ +/* ✔ [assert-true] Component schema for list is missing metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap list has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap list has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for list is missing name metadata. */ +/* ✔ [assert-true] Component schema for navbar is missing metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap navbar has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap navbar has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for navbar is missing name metadata. */ +/* ✔ [assert-true] Component schema for nav-drawer is missing metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap nav-drawer has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap nav-drawer has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for nav-drawer is missing name metadata. */ +/* ✔ [assert-true] Component schema for overlay is missing metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap overlay has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap overlay has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for overlay is missing name metadata. */ +/* ✔ [assert-true] Component schema for paginator is missing metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap paginator has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap paginator has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for paginator is missing name metadata. */ +/* ✔ [assert-true] Component schema for pivot-data-selector is missing metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap pivot-data-selector has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap pivot-data-selector has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for pivot-data-selector is missing name metadata. */ +/* ✔ [assert-true] Component schema for linear-bar is missing metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap linear-bar has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap linear-bar has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for linear-bar is missing name metadata. */ +/* ✔ [assert-true] Component schema for circular-bar is missing metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap circular-bar has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap circular-bar has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for circular-bar is missing name metadata. */ +/* ✔ [assert-true] Component schema for qr-code is missing metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap qr-code has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap qr-code has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for qr-code is missing name metadata. */ +/* ✔ [assert-true] Component schema for query-builder is missing metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap query-builder has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap query-builder has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for query-builder is missing name metadata. */ +/* ✔ [assert-true] Component schema for radio is missing metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap radio has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap radio has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for radio is missing name metadata. */ +/* ✔ [assert-true] Component schema for rating is missing metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap rating has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap rating has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for rating is missing name metadata. */ +/* ✔ [assert-true] Component schema for resize-indicator is missing metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap resize-indicator has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap resize-indicator has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for resize-indicator is missing name metadata. */ +/* ✔ [assert-true] Component schema for ripple is missing metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap ripple has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap ripple has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for ripple is missing name metadata. */ +/* ✔ [assert-true] Component schema for scrollbar is missing metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap scrollbar has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap scrollbar has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for scrollbar is missing name metadata. */ +/* ✔ [assert-true] Component schema for select is missing metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap select has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap select has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for select is missing name metadata. */ +/* ✔ [assert-true] Component schema for slider is missing metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap slider has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap slider has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for slider is missing name metadata. */ +/* ✔ [assert-true] Component schema for snackbar is missing metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap snackbar has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap snackbar has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for snackbar is missing name metadata. */ +/* ✔ [assert-true] Component schema for splitter is missing metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap splitter has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap splitter has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for splitter is missing name metadata. */ +/* ✔ [assert-true] Component schema for stepper is missing metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap stepper has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap stepper has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for stepper is missing name metadata. */ +/* ✔ [assert-true] Component schema for switch is missing metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap switch has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap switch has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for switch is missing name metadata. */ +/* ✔ [assert-true] Component schema for tabs is missing metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap tabs has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap tabs has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for tabs is missing name metadata. */ +/* ✔ [assert-true] Component schema for tile-manager is missing metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap tile-manager has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap tile-manager has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for tile-manager is missing name metadata. */ +/* ✔ [assert-true] Component schema for time-picker is missing metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap time-picker has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap time-picker has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for time-picker is missing name metadata. */ +/* ✔ [assert-true] Component schema for toast is missing metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap toast has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap toast has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for toast is missing name metadata. */ +/* ✔ [assert-true] Component schema for tooltip is missing metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap tooltip has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap tooltip has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for tooltip is missing name metadata. */ +/* ✔ [assert-true] Component schema for tree is missing metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap tree has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap tree has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for tree is missing name metadata. */ +/* ✔ [assert-true] Component schema for validator is missing metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap validator has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap validator has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for validator is missing name metadata. */ +/* ✔ [assert-true] Component schema for watermark is missing metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap watermark has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap watermark has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for watermark is missing name metadata. */ +/* ✔ [assert-true] Component schema for file-input is missing metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap file-input has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light bootstrap file-input has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for file-input is missing name metadata. */ +/* ✔ [assert-true] Component schema for category-chart is missing metadata. */ +/* ✔ [assert-equal] Component schema for light fluent category-chart has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light fluent category-chart has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for category-chart is missing name metadata. */ +/* ✔ [assert-true] Component schema for data-chart is missing metadata. */ +/* ✔ [assert-equal] Component schema for light fluent data-chart has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light fluent data-chart has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for data-chart is missing name metadata. */ +/* ✔ [assert-true] Component schema for doughnut-chart is missing metadata. */ +/* ✔ [assert-equal] Component schema for light fluent doughnut-chart has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light fluent doughnut-chart has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for doughnut-chart is missing name metadata. */ +/* ✔ [assert-true] Component schema for financial-chart is missing metadata. */ +/* ✔ [assert-equal] Component schema for light fluent financial-chart has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light fluent financial-chart has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for financial-chart is missing name metadata. */ +/* ✔ [assert-true] Component schema for funnel-chart is missing metadata. */ +/* ✔ [assert-equal] Component schema for light fluent funnel-chart has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light fluent funnel-chart has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for funnel-chart is missing name metadata. */ +/* ✔ [assert-true] Component schema for linear-gauge is missing metadata. */ +/* ✔ [assert-equal] Component schema for light fluent linear-gauge has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light fluent linear-gauge has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for linear-gauge is missing name metadata. */ +/* ✔ [assert-true] Component schema for radial-gauge is missing metadata. */ +/* ✔ [assert-equal] Component schema for light fluent radial-gauge has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light fluent radial-gauge has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for radial-gauge is missing name metadata. */ +/* ✔ [assert-true] Component schema for geo-map is missing metadata. */ +/* ✔ [assert-equal] Component schema for light fluent geo-map has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light fluent geo-map has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for geo-map is missing name metadata. */ +/* ✔ [assert-true] Component schema for bullet-graph is missing metadata. */ +/* ✔ [assert-equal] Component schema for light fluent bullet-graph has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light fluent bullet-graph has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for bullet-graph is missing name metadata. */ +/* ✔ [assert-true] Component schema for pie-chart is missing metadata. */ +/* ✔ [assert-equal] Component schema for light fluent pie-chart has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light fluent pie-chart has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for pie-chart is missing name metadata. */ +/* ✔ [assert-true] Component schema for shape-chart is missing metadata. */ +/* ✔ [assert-equal] Component schema for light fluent shape-chart has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light fluent shape-chart has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for shape-chart is missing name metadata. */ +/* ✔ [assert-true] Component schema for sparkline is missing metadata. */ +/* ✔ [assert-equal] Component schema for light fluent sparkline has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light fluent sparkline has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for sparkline is missing name metadata. */ +/* ✔ [assert-true] Component schema for action-strip is missing metadata. */ +/* ✔ [assert-equal] Component schema for light fluent action-strip has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light fluent action-strip has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for action-strip is missing name metadata. */ +/* ✔ [assert-true] Component schema for avatar is missing metadata. */ +/* ✔ [assert-equal] Component schema for light fluent avatar has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light fluent avatar has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for avatar is missing name metadata. */ +/* ✔ [assert-true] Component schema for badge is missing metadata. */ +/* ✔ [assert-equal] Component schema for light fluent badge has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light fluent badge has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for badge is missing name metadata. */ +/* ✔ [assert-true] Component schema for banner is missing metadata. */ +/* ✔ [assert-equal] Component schema for light fluent banner has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light fluent banner has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for banner is missing name metadata. */ +/* ✔ [assert-true] Component schema for bottom-nav is missing metadata. */ +/* ✔ [assert-equal] Component schema for light fluent bottom-nav has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light fluent bottom-nav has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for bottom-nav is missing name metadata. */ +/* ✔ [assert-true] Component schema for flat button is missing metadata. */ +/* ✔ [assert-equal] Component schema for light fluent flat button has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light fluent flat button has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for flat button is missing name metadata. */ +/* ✔ [assert-true] Component schema for outlined button is missing metadata. */ +/* ✔ [assert-equal] Component schema for light fluent outlined button has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light fluent outlined button has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for outlined button is missing name metadata. */ +/* ✔ [assert-true] Component schema for contained button is missing metadata. */ +/* ✔ [assert-equal] Component schema for light fluent contained button has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light fluent contained button has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for contained button is missing name metadata. */ +/* ✔ [assert-true] Component schema for fab button is missing metadata. */ +/* ✔ [assert-equal] Component schema for light fluent fab button has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light fluent fab button has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for fab button is missing name metadata. */ +/* ✔ [assert-true] Component schema for button-group is missing metadata. */ +/* ✔ [assert-equal] Component schema for light fluent button-group has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light fluent button-group has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for button-group is missing name metadata. */ +/* ✔ [assert-true] Component schema for calendar is missing metadata. */ +/* ✔ [assert-equal] Component schema for light fluent calendar has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light fluent calendar has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for calendar is missing name metadata. */ +/* ✔ [assert-true] Component schema for card is missing metadata. */ +/* ✔ [assert-equal] Component schema for light fluent card has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light fluent card has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for card is missing name metadata. */ +/* ✔ [assert-true] Component schema for carousel is missing metadata. */ +/* ✔ [assert-equal] Component schema for light fluent carousel has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light fluent carousel has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for carousel is missing name metadata. */ +/* ✔ [assert-true] Component schema for chat is missing metadata. */ +/* ✔ [assert-equal] Component schema for light fluent chat has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light fluent chat has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for chat is missing name metadata. */ +/* ✔ [assert-true] Component schema for checkbox is missing metadata. */ +/* ✔ [assert-equal] Component schema for light fluent checkbox has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light fluent checkbox has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for checkbox is missing name metadata. */ +/* ✔ [assert-true] Component schema for chip is missing metadata. */ +/* ✔ [assert-equal] Component schema for light fluent chip has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light fluent chip has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for chip is missing name metadata. */ +/* ✔ [assert-true] Component schema for color-picker is missing metadata. */ +/* ✔ [assert-equal] Component schema for light fluent color-picker has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light fluent color-picker has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for color-picker is missing name metadata. */ +/* ✔ [assert-true] Component schema for column-actions is missing metadata. */ +/* ✔ [assert-equal] Component schema for light fluent column-actions has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light fluent column-actions has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for column-actions is missing name metadata. */ +/* ✔ [assert-true] Component schema for combo is missing metadata. */ +/* ✔ [assert-equal] Component schema for light fluent combo has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light fluent combo has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for combo is missing name metadata. */ +/* ✔ [assert-true] Component schema for date-picker is missing metadata. */ +/* ✔ [assert-equal] Component schema for light fluent date-picker has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light fluent date-picker has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for date-picker is missing name metadata. */ +/* ✔ [assert-true] Component schema for date-range is missing metadata. */ +/* ✔ [assert-equal] Component schema for light fluent date-range has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light fluent date-range has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for date-range is missing name metadata. */ +/* ✔ [assert-true] Component schema for dialog is missing metadata. */ +/* ✔ [assert-equal] Component schema for light fluent dialog has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light fluent dialog has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for dialog is missing name metadata. */ +/* ✔ [assert-true] Component schema for divider is missing metadata. */ +/* ✔ [assert-equal] Component schema for light fluent divider has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light fluent divider has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for divider is missing name metadata. */ +/* ✔ [assert-true] Component schema for dockmanager is missing metadata. */ +/* ✔ [assert-equal] Component schema for light fluent dockmanager has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light fluent dockmanager has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for dockmanager is missing name metadata. */ +/* ✔ [assert-true] Component schema for drop-down is missing metadata. */ +/* ✔ [assert-equal] Component schema for light fluent drop-down has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light fluent drop-down has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for drop-down is missing name metadata. */ +/* ✔ [assert-true] Component schema for expansion-panel is missing metadata. */ +/* ✔ [assert-equal] Component schema for light fluent expansion-panel has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light fluent expansion-panel has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for expansion-panel is missing name metadata. */ +/* ✔ [assert-true] Component schema for grid is missing metadata. */ +/* ✔ [assert-equal] Component schema for light fluent grid has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light fluent grid has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for grid is missing name metadata. */ +/* ✔ [assert-true] Component schema for grid-excel-filtering is missing metadata. */ +/* ✔ [assert-equal] Component schema for light fluent grid-excel-filtering has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light fluent grid-excel-filtering has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for grid-excel-filtering is missing name metadata. */ +/* ✔ [assert-true] Component schema for grid-filtering is missing metadata. */ +/* ✔ [assert-equal] Component schema for light fluent grid-filtering has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light fluent grid-filtering has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for grid-filtering is missing name metadata. */ +/* ✔ [assert-true] Component schema for grid-summary is missing metadata. */ +/* ✔ [assert-equal] Component schema for light fluent grid-summary has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light fluent grid-summary has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for grid-summary is missing name metadata. */ +/* ✔ [assert-true] Component schema for grid-toolbar is missing metadata. */ +/* ✔ [assert-equal] Component schema for light fluent grid-toolbar has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light fluent grid-toolbar has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for grid-toolbar is missing name metadata. */ +/* ✔ [assert-true] Component schema for highlight is missing metadata. */ +/* ✔ [assert-equal] Component schema for light fluent highlight has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light fluent highlight has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for highlight is missing name metadata. */ +/* ✔ [assert-true] Component schema for icon is missing metadata. */ +/* ✔ [assert-equal] Component schema for light fluent icon has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light fluent icon has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for icon is missing name metadata. */ +/* ✔ [assert-true] Component schema for flat icon-button is missing metadata. */ +/* ✔ [assert-equal] Component schema for light fluent flat icon-button has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light fluent flat icon-button has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for flat icon-button is missing name metadata. */ +/* ✔ [assert-true] Component schema for contained icon-button is missing metadata. */ +/* ✔ [assert-equal] Component schema for light fluent contained icon-button has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light fluent contained icon-button has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for contained icon-button is missing name metadata. */ +/* ✔ [assert-true] Component schema for outlined icon-button is missing metadata. */ +/* ✔ [assert-equal] Component schema for light fluent outlined icon-button has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light fluent outlined icon-button has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for outlined icon-button is missing name metadata. */ +/* ✔ [assert-true] Component schema for input-group is missing metadata. */ +/* ✔ [assert-equal] Component schema for light fluent input-group has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light fluent input-group has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for input-group is missing name metadata. */ +/* ✔ [assert-true] Component schema for label is missing metadata. */ +/* ✔ [assert-equal] Component schema for light fluent label has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light fluent label has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for label is missing name metadata. */ +/* ✔ [assert-true] Component schema for list is missing metadata. */ +/* ✔ [assert-equal] Component schema for light fluent list has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light fluent list has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for list is missing name metadata. */ +/* ✔ [assert-true] Component schema for navbar is missing metadata. */ +/* ✔ [assert-equal] Component schema for light fluent navbar has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light fluent navbar has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for navbar is missing name metadata. */ +/* ✔ [assert-true] Component schema for nav-drawer is missing metadata. */ +/* ✔ [assert-equal] Component schema for light fluent nav-drawer has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light fluent nav-drawer has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for nav-drawer is missing name metadata. */ +/* ✔ [assert-true] Component schema for overlay is missing metadata. */ +/* ✔ [assert-equal] Component schema for light fluent overlay has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light fluent overlay has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for overlay is missing name metadata. */ +/* ✔ [assert-true] Component schema for paginator is missing metadata. */ +/* ✔ [assert-equal] Component schema for light fluent paginator has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light fluent paginator has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for paginator is missing name metadata. */ +/* ✔ [assert-true] Component schema for pivot-data-selector is missing metadata. */ +/* ✔ [assert-equal] Component schema for light fluent pivot-data-selector has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light fluent pivot-data-selector has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for pivot-data-selector is missing name metadata. */ +/* ✔ [assert-true] Component schema for linear-bar is missing metadata. */ +/* ✔ [assert-equal] Component schema for light fluent linear-bar has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light fluent linear-bar has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for linear-bar is missing name metadata. */ +/* ✔ [assert-true] Component schema for circular-bar is missing metadata. */ +/* ✔ [assert-equal] Component schema for light fluent circular-bar has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light fluent circular-bar has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for circular-bar is missing name metadata. */ +/* ✔ [assert-true] Component schema for qr-code is missing metadata. */ +/* ✔ [assert-equal] Component schema for light fluent qr-code has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light fluent qr-code has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for qr-code is missing name metadata. */ +/* ✔ [assert-true] Component schema for query-builder is missing metadata. */ +/* ✔ [assert-equal] Component schema for light fluent query-builder has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light fluent query-builder has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for query-builder is missing name metadata. */ +/* ✔ [assert-true] Component schema for radio is missing metadata. */ +/* ✔ [assert-equal] Component schema for light fluent radio has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light fluent radio has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for radio is missing name metadata. */ +/* ✔ [assert-true] Component schema for rating is missing metadata. */ +/* ✔ [assert-equal] Component schema for light fluent rating has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light fluent rating has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for rating is missing name metadata. */ +/* ✔ [assert-true] Component schema for resize-indicator is missing metadata. */ +/* ✔ [assert-equal] Component schema for light fluent resize-indicator has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light fluent resize-indicator has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for resize-indicator is missing name metadata. */ +/* ✔ [assert-true] Component schema for ripple is missing metadata. */ +/* ✔ [assert-equal] Component schema for light fluent ripple has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light fluent ripple has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for ripple is missing name metadata. */ +/* ✔ [assert-true] Component schema for scrollbar is missing metadata. */ +/* ✔ [assert-equal] Component schema for light fluent scrollbar has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light fluent scrollbar has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for scrollbar is missing name metadata. */ +/* ✔ [assert-true] Component schema for select is missing metadata. */ +/* ✔ [assert-equal] Component schema for light fluent select has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light fluent select has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for select is missing name metadata. */ +/* ✔ [assert-true] Component schema for slider is missing metadata. */ +/* ✔ [assert-equal] Component schema for light fluent slider has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light fluent slider has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for slider is missing name metadata. */ +/* ✔ [assert-true] Component schema for snackbar is missing metadata. */ +/* ✔ [assert-equal] Component schema for light fluent snackbar has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light fluent snackbar has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for snackbar is missing name metadata. */ +/* ✔ [assert-true] Component schema for splitter is missing metadata. */ +/* ✔ [assert-equal] Component schema for light fluent splitter has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light fluent splitter has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for splitter is missing name metadata. */ +/* ✔ [assert-true] Component schema for stepper is missing metadata. */ +/* ✔ [assert-equal] Component schema for light fluent stepper has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light fluent stepper has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for stepper is missing name metadata. */ +/* ✔ [assert-true] Component schema for switch is missing metadata. */ +/* ✔ [assert-equal] Component schema for light fluent switch has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light fluent switch has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for switch is missing name metadata. */ +/* ✔ [assert-true] Component schema for tabs is missing metadata. */ +/* ✔ [assert-equal] Component schema for light fluent tabs has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light fluent tabs has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for tabs is missing name metadata. */ +/* ✔ [assert-true] Component schema for tile-manager is missing metadata. */ +/* ✔ [assert-equal] Component schema for light fluent tile-manager has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light fluent tile-manager has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for tile-manager is missing name metadata. */ +/* ✔ [assert-true] Component schema for time-picker is missing metadata. */ +/* ✔ [assert-equal] Component schema for light fluent time-picker has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light fluent time-picker has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for time-picker is missing name metadata. */ +/* ✔ [assert-true] Component schema for toast is missing metadata. */ +/* ✔ [assert-equal] Component schema for light fluent toast has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light fluent toast has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for toast is missing name metadata. */ +/* ✔ [assert-true] Component schema for tooltip is missing metadata. */ +/* ✔ [assert-equal] Component schema for light fluent tooltip has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light fluent tooltip has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for tooltip is missing name metadata. */ +/* ✔ [assert-true] Component schema for tree is missing metadata. */ +/* ✔ [assert-equal] Component schema for light fluent tree has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light fluent tree has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for tree is missing name metadata. */ +/* ✔ [assert-true] Component schema for validator is missing metadata. */ +/* ✔ [assert-equal] Component schema for light fluent validator has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light fluent validator has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for validator is missing name metadata. */ +/* ✔ [assert-true] Component schema for watermark is missing metadata. */ +/* ✔ [assert-equal] Component schema for light fluent watermark has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light fluent watermark has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for watermark is missing name metadata. */ +/* ✔ [assert-true] Component schema for file-input is missing metadata. */ +/* ✔ [assert-equal] Component schema for light fluent file-input has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light fluent file-input has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for file-input is missing name metadata. */ +/* ✔ [assert-true] Component schema for category-chart is missing metadata. */ +/* ✔ [assert-equal] Component schema for light indigo category-chart has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light indigo category-chart has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for category-chart is missing name metadata. */ +/* ✔ [assert-true] Component schema for data-chart is missing metadata. */ +/* ✔ [assert-equal] Component schema for light indigo data-chart has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light indigo data-chart has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for data-chart is missing name metadata. */ +/* ✔ [assert-true] Component schema for doughnut-chart is missing metadata. */ +/* ✔ [assert-equal] Component schema for light indigo doughnut-chart has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light indigo doughnut-chart has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for doughnut-chart is missing name metadata. */ +/* ✔ [assert-true] Component schema for financial-chart is missing metadata. */ +/* ✔ [assert-equal] Component schema for light indigo financial-chart has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light indigo financial-chart has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for financial-chart is missing name metadata. */ +/* ✔ [assert-true] Component schema for funnel-chart is missing metadata. */ +/* ✔ [assert-equal] Component schema for light indigo funnel-chart has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light indigo funnel-chart has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for funnel-chart is missing name metadata. */ +/* ✔ [assert-true] Component schema for linear-gauge is missing metadata. */ +/* ✔ [assert-equal] Component schema for light indigo linear-gauge has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light indigo linear-gauge has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for linear-gauge is missing name metadata. */ +/* ✔ [assert-true] Component schema for radial-gauge is missing metadata. */ +/* ✔ [assert-equal] Component schema for light indigo radial-gauge has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light indigo radial-gauge has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for radial-gauge is missing name metadata. */ +/* ✔ [assert-true] Component schema for geo-map is missing metadata. */ +/* ✔ [assert-equal] Component schema for light indigo geo-map has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light indigo geo-map has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for geo-map is missing name metadata. */ +/* ✔ [assert-true] Component schema for bullet-graph is missing metadata. */ +/* ✔ [assert-equal] Component schema for light indigo bullet-graph has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light indigo bullet-graph has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for bullet-graph is missing name metadata. */ +/* ✔ [assert-true] Component schema for pie-chart is missing metadata. */ +/* ✔ [assert-equal] Component schema for light indigo pie-chart has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light indigo pie-chart has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for pie-chart is missing name metadata. */ +/* ✔ [assert-true] Component schema for shape-chart is missing metadata. */ +/* ✔ [assert-equal] Component schema for light indigo shape-chart has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light indigo shape-chart has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for shape-chart is missing name metadata. */ +/* ✔ [assert-true] Component schema for sparkline is missing metadata. */ +/* ✔ [assert-equal] Component schema for light indigo sparkline has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light indigo sparkline has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for sparkline is missing name metadata. */ +/* ✔ [assert-true] Component schema for action-strip is missing metadata. */ +/* ✔ [assert-equal] Component schema for light indigo action-strip has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light indigo action-strip has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for action-strip is missing name metadata. */ +/* ✔ [assert-true] Component schema for avatar is missing metadata. */ +/* ✔ [assert-equal] Component schema for light indigo avatar has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light indigo avatar has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for avatar is missing name metadata. */ +/* ✔ [assert-true] Component schema for badge is missing metadata. */ +/* ✔ [assert-equal] Component schema for light indigo badge has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light indigo badge has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for badge is missing name metadata. */ +/* ✔ [assert-true] Component schema for banner is missing metadata. */ +/* ✔ [assert-equal] Component schema for light indigo banner has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light indigo banner has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for banner is missing name metadata. */ +/* ✔ [assert-true] Component schema for bottom-nav is missing metadata. */ +/* ✔ [assert-equal] Component schema for light indigo bottom-nav has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light indigo bottom-nav has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for bottom-nav is missing name metadata. */ +/* ✔ [assert-true] Component schema for flat button is missing metadata. */ +/* ✔ [assert-equal] Component schema for light indigo flat button has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light indigo flat button has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for flat button is missing name metadata. */ +/* ✔ [assert-true] Component schema for outlined button is missing metadata. */ +/* ✔ [assert-equal] Component schema for light indigo outlined button has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light indigo outlined button has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for outlined button is missing name metadata. */ +/* ✔ [assert-true] Component schema for contained button is missing metadata. */ +/* ✔ [assert-equal] Component schema for light indigo contained button has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light indigo contained button has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for contained button is missing name metadata. */ +/* ✔ [assert-true] Component schema for fab button is missing metadata. */ +/* ✔ [assert-equal] Component schema for light indigo fab button has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light indigo fab button has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for fab button is missing name metadata. */ +/* ✔ [assert-true] Component schema for button-group is missing metadata. */ +/* ✔ [assert-equal] Component schema for light indigo button-group has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light indigo button-group has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for button-group is missing name metadata. */ +/* ✔ [assert-true] Component schema for calendar is missing metadata. */ +/* ✔ [assert-equal] Component schema for light indigo calendar has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light indigo calendar has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for calendar is missing name metadata. */ +/* ✔ [assert-true] Component schema for card is missing metadata. */ +/* ✔ [assert-equal] Component schema for light indigo card has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light indigo card has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for card is missing name metadata. */ +/* ✔ [assert-true] Component schema for carousel is missing metadata. */ +/* ✔ [assert-equal] Component schema for light indigo carousel has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light indigo carousel has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for carousel is missing name metadata. */ +/* ✔ [assert-true] Component schema for chat is missing metadata. */ +/* ✔ [assert-equal] Component schema for light indigo chat has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light indigo chat has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for chat is missing name metadata. */ +/* ✔ [assert-true] Component schema for checkbox is missing metadata. */ +/* ✔ [assert-equal] Component schema for light indigo checkbox has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light indigo checkbox has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for checkbox is missing name metadata. */ +/* ✔ [assert-true] Component schema for chip is missing metadata. */ +/* ✔ [assert-equal] Component schema for light indigo chip has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light indigo chip has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for chip is missing name metadata. */ +/* ✔ [assert-true] Component schema for color-picker is missing metadata. */ +/* ✔ [assert-equal] Component schema for light indigo color-picker has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light indigo color-picker has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for color-picker is missing name metadata. */ +/* ✔ [assert-true] Component schema for column-actions is missing metadata. */ +/* ✔ [assert-equal] Component schema for light indigo column-actions has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light indigo column-actions has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for column-actions is missing name metadata. */ +/* ✔ [assert-true] Component schema for combo is missing metadata. */ +/* ✔ [assert-equal] Component schema for light indigo combo has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light indigo combo has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for combo is missing name metadata. */ +/* ✔ [assert-true] Component schema for date-picker is missing metadata. */ +/* ✔ [assert-equal] Component schema for light indigo date-picker has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light indigo date-picker has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for date-picker is missing name metadata. */ +/* ✔ [assert-true] Component schema for date-range is missing metadata. */ +/* ✔ [assert-equal] Component schema for light indigo date-range has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light indigo date-range has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for date-range is missing name metadata. */ +/* ✔ [assert-true] Component schema for dialog is missing metadata. */ +/* ✔ [assert-equal] Component schema for light indigo dialog has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light indigo dialog has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for dialog is missing name metadata. */ +/* ✔ [assert-true] Component schema for divider is missing metadata. */ +/* ✔ [assert-equal] Component schema for light indigo divider has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light indigo divider has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for divider is missing name metadata. */ +/* ✔ [assert-true] Component schema for dockmanager is missing metadata. */ +/* ✔ [assert-equal] Component schema for light indigo dockmanager has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light indigo dockmanager has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for dockmanager is missing name metadata. */ +/* ✔ [assert-true] Component schema for drop-down is missing metadata. */ +/* ✔ [assert-equal] Component schema for light indigo drop-down has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light indigo drop-down has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for drop-down is missing name metadata. */ +/* ✔ [assert-true] Component schema for expansion-panel is missing metadata. */ +/* ✔ [assert-equal] Component schema for light indigo expansion-panel has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light indigo expansion-panel has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for expansion-panel is missing name metadata. */ +/* ✔ [assert-true] Component schema for grid is missing metadata. */ +/* ✔ [assert-equal] Component schema for light indigo grid has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light indigo grid has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for grid is missing name metadata. */ +/* ✔ [assert-true] Component schema for grid-excel-filtering is missing metadata. */ +/* ✔ [assert-equal] Component schema for light indigo grid-excel-filtering has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light indigo grid-excel-filtering has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for grid-excel-filtering is missing name metadata. */ +/* ✔ [assert-true] Component schema for grid-filtering is missing metadata. */ +/* ✔ [assert-equal] Component schema for light indigo grid-filtering has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light indigo grid-filtering has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for grid-filtering is missing name metadata. */ +/* ✔ [assert-true] Component schema for grid-summary is missing metadata. */ +/* ✔ [assert-equal] Component schema for light indigo grid-summary has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light indigo grid-summary has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for grid-summary is missing name metadata. */ +/* ✔ [assert-true] Component schema for grid-toolbar is missing metadata. */ +/* ✔ [assert-equal] Component schema for light indigo grid-toolbar has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light indigo grid-toolbar has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for grid-toolbar is missing name metadata. */ +/* ✔ [assert-true] Component schema for highlight is missing metadata. */ +/* ✔ [assert-equal] Component schema for light indigo highlight has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light indigo highlight has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for highlight is missing name metadata. */ +/* ✔ [assert-true] Component schema for icon is missing metadata. */ +/* ✔ [assert-equal] Component schema for light indigo icon has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light indigo icon has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for icon is missing name metadata. */ +/* ✔ [assert-true] Component schema for flat icon-button is missing metadata. */ +/* ✔ [assert-equal] Component schema for light indigo flat icon-button has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light indigo flat icon-button has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for flat icon-button is missing name metadata. */ +/* ✔ [assert-true] Component schema for contained icon-button is missing metadata. */ +/* ✔ [assert-equal] Component schema for light indigo contained icon-button has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light indigo contained icon-button has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for contained icon-button is missing name metadata. */ +/* ✔ [assert-true] Component schema for outlined icon-button is missing metadata. */ +/* ✔ [assert-equal] Component schema for light indigo outlined icon-button has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light indigo outlined icon-button has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for outlined icon-button is missing name metadata. */ +/* ✔ [assert-true] Component schema for input-group is missing metadata. */ +/* ✔ [assert-equal] Component schema for light indigo input-group has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light indigo input-group has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for input-group is missing name metadata. */ +/* ✔ [assert-true] Component schema for label is missing metadata. */ +/* ✔ [assert-equal] Component schema for light indigo label has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light indigo label has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for label is missing name metadata. */ +/* ✔ [assert-true] Component schema for list is missing metadata. */ +/* ✔ [assert-equal] Component schema for light indigo list has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light indigo list has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for list is missing name metadata. */ +/* ✔ [assert-true] Component schema for navbar is missing metadata. */ +/* ✔ [assert-equal] Component schema for light indigo navbar has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light indigo navbar has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for navbar is missing name metadata. */ +/* ✔ [assert-true] Component schema for nav-drawer is missing metadata. */ +/* ✔ [assert-equal] Component schema for light indigo nav-drawer has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light indigo nav-drawer has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for nav-drawer is missing name metadata. */ +/* ✔ [assert-true] Component schema for overlay is missing metadata. */ +/* ✔ [assert-equal] Component schema for light indigo overlay has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light indigo overlay has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for overlay is missing name metadata. */ +/* ✔ [assert-true] Component schema for paginator is missing metadata. */ +/* ✔ [assert-equal] Component schema for light indigo paginator has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light indigo paginator has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for paginator is missing name metadata. */ +/* ✔ [assert-true] Component schema for pivot-data-selector is missing metadata. */ +/* ✔ [assert-equal] Component schema for light indigo pivot-data-selector has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light indigo pivot-data-selector has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for pivot-data-selector is missing name metadata. */ +/* ✔ [assert-true] Component schema for linear-bar is missing metadata. */ +/* ✔ [assert-equal] Component schema for light indigo linear-bar has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light indigo linear-bar has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for linear-bar is missing name metadata. */ +/* ✔ [assert-true] Component schema for circular-bar is missing metadata. */ +/* ✔ [assert-equal] Component schema for light indigo circular-bar has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light indigo circular-bar has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for circular-bar is missing name metadata. */ +/* ✔ [assert-true] Component schema for qr-code is missing metadata. */ +/* ✔ [assert-equal] Component schema for light indigo qr-code has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light indigo qr-code has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for qr-code is missing name metadata. */ +/* ✔ [assert-true] Component schema for query-builder is missing metadata. */ +/* ✔ [assert-equal] Component schema for light indigo query-builder has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light indigo query-builder has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for query-builder is missing name metadata. */ +/* ✔ [assert-true] Component schema for radio is missing metadata. */ +/* ✔ [assert-equal] Component schema for light indigo radio has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light indigo radio has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for radio is missing name metadata. */ +/* ✔ [assert-true] Component schema for rating is missing metadata. */ +/* ✔ [assert-equal] Component schema for light indigo rating has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light indigo rating has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for rating is missing name metadata. */ +/* ✔ [assert-true] Component schema for resize-indicator is missing metadata. */ +/* ✔ [assert-equal] Component schema for light indigo resize-indicator has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light indigo resize-indicator has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for resize-indicator is missing name metadata. */ +/* ✔ [assert-true] Component schema for ripple is missing metadata. */ +/* ✔ [assert-equal] Component schema for light indigo ripple has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light indigo ripple has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for ripple is missing name metadata. */ +/* ✔ [assert-true] Component schema for scrollbar is missing metadata. */ +/* ✔ [assert-equal] Component schema for light indigo scrollbar has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light indigo scrollbar has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for scrollbar is missing name metadata. */ +/* ✔ [assert-true] Component schema for select is missing metadata. */ +/* ✔ [assert-equal] Component schema for light indigo select has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light indigo select has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for select is missing name metadata. */ +/* ✔ [assert-true] Component schema for slider is missing metadata. */ +/* ✔ [assert-equal] Component schema for light indigo slider has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light indigo slider has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for slider is missing name metadata. */ +/* ✔ [assert-true] Component schema for snackbar is missing metadata. */ +/* ✔ [assert-equal] Component schema for light indigo snackbar has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light indigo snackbar has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for snackbar is missing name metadata. */ +/* ✔ [assert-true] Component schema for splitter is missing metadata. */ +/* ✔ [assert-equal] Component schema for light indigo splitter has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light indigo splitter has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for splitter is missing name metadata. */ +/* ✔ [assert-true] Component schema for stepper is missing metadata. */ +/* ✔ [assert-equal] Component schema for light indigo stepper has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light indigo stepper has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for stepper is missing name metadata. */ +/* ✔ [assert-true] Component schema for switch is missing metadata. */ +/* ✔ [assert-equal] Component schema for light indigo switch has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light indigo switch has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for switch is missing name metadata. */ +/* ✔ [assert-true] Component schema for tabs is missing metadata. */ +/* ✔ [assert-equal] Component schema for light indigo tabs has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light indigo tabs has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for tabs is missing name metadata. */ +/* ✔ [assert-true] Component schema for tile-manager is missing metadata. */ +/* ✔ [assert-equal] Component schema for light indigo tile-manager has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light indigo tile-manager has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for tile-manager is missing name metadata. */ +/* ✔ [assert-true] Component schema for time-picker is missing metadata. */ +/* ✔ [assert-equal] Component schema for light indigo time-picker has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light indigo time-picker has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for time-picker is missing name metadata. */ +/* ✔ [assert-true] Component schema for toast is missing metadata. */ +/* ✔ [assert-equal] Component schema for light indigo toast has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light indigo toast has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for toast is missing name metadata. */ +/* ✔ [assert-true] Component schema for tooltip is missing metadata. */ +/* ✔ [assert-equal] Component schema for light indigo tooltip has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light indigo tooltip has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for tooltip is missing name metadata. */ +/* ✔ [assert-true] Component schema for tree is missing metadata. */ +/* ✔ [assert-equal] Component schema for light indigo tree has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light indigo tree has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for tree is missing name metadata. */ +/* ✔ [assert-true] Component schema for validator is missing metadata. */ +/* ✔ [assert-equal] Component schema for light indigo validator has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light indigo validator has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for validator is missing name metadata. */ +/* ✔ [assert-true] Component schema for watermark is missing metadata. */ +/* ✔ [assert-equal] Component schema for light indigo watermark has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light indigo watermark has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for watermark is missing name metadata. */ +/* ✔ [assert-true] Component schema for file-input is missing metadata. */ +/* ✔ [assert-equal] Component schema for light indigo file-input has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for light indigo file-input has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for file-input is missing name metadata. */ +/* ✔ [assert-true] Component schema for category-chart is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark material category-chart has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark material category-chart has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for category-chart is missing name metadata. */ +/* ✔ [assert-true] Component schema for data-chart is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark material data-chart has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark material data-chart has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for data-chart is missing name metadata. */ +/* ✔ [assert-true] Component schema for doughnut-chart is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark material doughnut-chart has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark material doughnut-chart has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for doughnut-chart is missing name metadata. */ +/* ✔ [assert-true] Component schema for financial-chart is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark material financial-chart has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark material financial-chart has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for financial-chart is missing name metadata. */ +/* ✔ [assert-true] Component schema for funnel-chart is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark material funnel-chart has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark material funnel-chart has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for funnel-chart is missing name metadata. */ +/* ✔ [assert-true] Component schema for linear-gauge is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark material linear-gauge has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark material linear-gauge has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for linear-gauge is missing name metadata. */ +/* ✔ [assert-true] Component schema for radial-gauge is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark material radial-gauge has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark material radial-gauge has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for radial-gauge is missing name metadata. */ +/* ✔ [assert-true] Component schema for geo-map is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark material geo-map has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark material geo-map has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for geo-map is missing name metadata. */ +/* ✔ [assert-true] Component schema for bullet-graph is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark material bullet-graph has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark material bullet-graph has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for bullet-graph is missing name metadata. */ +/* ✔ [assert-true] Component schema for pie-chart is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark material pie-chart has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark material pie-chart has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for pie-chart is missing name metadata. */ +/* ✔ [assert-true] Component schema for shape-chart is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark material shape-chart has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark material shape-chart has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for shape-chart is missing name metadata. */ +/* ✔ [assert-true] Component schema for sparkline is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark material sparkline has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark material sparkline has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for sparkline is missing name metadata. */ +/* ✔ [assert-true] Component schema for action-strip is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark material action-strip has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark material action-strip has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for action-strip is missing name metadata. */ +/* ✔ [assert-true] Component schema for avatar is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark material avatar has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark material avatar has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for avatar is missing name metadata. */ +/* ✔ [assert-true] Component schema for badge is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark material badge has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark material badge has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for badge is missing name metadata. */ +/* ✔ [assert-true] Component schema for banner is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark material banner has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark material banner has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for banner is missing name metadata. */ +/* ✔ [assert-true] Component schema for bottom-nav is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark material bottom-nav has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark material bottom-nav has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for bottom-nav is missing name metadata. */ +/* ✔ [assert-true] Component schema for flat button is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark material flat button has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark material flat button has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for flat button is missing name metadata. */ +/* ✔ [assert-true] Component schema for outlined button is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark material outlined button has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark material outlined button has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for outlined button is missing name metadata. */ +/* ✔ [assert-true] Component schema for contained button is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark material contained button has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark material contained button has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for contained button is missing name metadata. */ +/* ✔ [assert-true] Component schema for fab button is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark material fab button has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark material fab button has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for fab button is missing name metadata. */ +/* ✔ [assert-true] Component schema for button-group is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark material button-group has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark material button-group has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for button-group is missing name metadata. */ +/* ✔ [assert-true] Component schema for calendar is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark material calendar has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark material calendar has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for calendar is missing name metadata. */ +/* ✔ [assert-true] Component schema for card is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark material card has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark material card has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for card is missing name metadata. */ +/* ✔ [assert-true] Component schema for carousel is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark material carousel has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark material carousel has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for carousel is missing name metadata. */ +/* ✔ [assert-true] Component schema for chat is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark material chat has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark material chat has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for chat is missing name metadata. */ +/* ✔ [assert-true] Component schema for checkbox is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark material checkbox has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark material checkbox has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for checkbox is missing name metadata. */ +/* ✔ [assert-true] Component schema for chip is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark material chip has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark material chip has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for chip is missing name metadata. */ +/* ✔ [assert-true] Component schema for color-picker is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark material color-picker has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark material color-picker has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for color-picker is missing name metadata. */ +/* ✔ [assert-true] Component schema for column-actions is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark material column-actions has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark material column-actions has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for column-actions is missing name metadata. */ +/* ✔ [assert-true] Component schema for combo is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark material combo has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark material combo has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for combo is missing name metadata. */ +/* ✔ [assert-true] Component schema for date-picker is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark material date-picker has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark material date-picker has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for date-picker is missing name metadata. */ +/* ✔ [assert-true] Component schema for date-range is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark material date-range has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark material date-range has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for date-range is missing name metadata. */ +/* ✔ [assert-true] Component schema for dialog is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark material dialog has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark material dialog has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for dialog is missing name metadata. */ +/* ✔ [assert-true] Component schema for divider is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark material divider has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark material divider has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for divider is missing name metadata. */ +/* ✔ [assert-true] Component schema for dockmanager is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark material dockmanager has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark material dockmanager has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for dockmanager is missing name metadata. */ +/* ✔ [assert-true] Component schema for drop-down is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark material drop-down has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark material drop-down has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for drop-down is missing name metadata. */ +/* ✔ [assert-true] Component schema for expansion-panel is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark material expansion-panel has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark material expansion-panel has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for expansion-panel is missing name metadata. */ +/* ✔ [assert-true] Component schema for grid is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark material grid has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark material grid has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for grid is missing name metadata. */ +/* ✔ [assert-true] Component schema for grid-excel-filtering is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark material grid-excel-filtering has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark material grid-excel-filtering has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for grid-excel-filtering is missing name metadata. */ +/* ✔ [assert-true] Component schema for grid-filtering is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark material grid-filtering has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark material grid-filtering has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for grid-filtering is missing name metadata. */ +/* ✔ [assert-true] Component schema for grid-summary is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark material grid-summary has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark material grid-summary has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for grid-summary is missing name metadata. */ +/* ✔ [assert-true] Component schema for grid-toolbar is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark material grid-toolbar has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark material grid-toolbar has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for grid-toolbar is missing name metadata. */ +/* ✔ [assert-true] Component schema for highlight is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark material highlight has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark material highlight has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for highlight is missing name metadata. */ +/* ✔ [assert-true] Component schema for icon is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark material icon has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark material icon has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for icon is missing name metadata. */ +/* ✔ [assert-true] Component schema for flat icon-button is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark material flat icon-button has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark material flat icon-button has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for flat icon-button is missing name metadata. */ +/* ✔ [assert-true] Component schema for outlined icon-button is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark material outlined icon-button has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark material outlined icon-button has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for outlined icon-button is missing name metadata. */ +/* ✔ [assert-true] Component schema for contained icon-button is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark material contained icon-button has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark material contained icon-button has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for contained icon-button is missing name metadata. */ +/* ✔ [assert-true] Component schema for input-group is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark material input-group has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark material input-group has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for input-group is missing name metadata. */ +/* ✔ [assert-true] Component schema for label is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark material label has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark material label has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for label is missing name metadata. */ +/* ✔ [assert-true] Component schema for list is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark material list has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark material list has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for list is missing name metadata. */ +/* ✔ [assert-true] Component schema for navbar is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark material navbar has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark material navbar has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for navbar is missing name metadata. */ +/* ✔ [assert-true] Component schema for nav-drawer is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark material nav-drawer has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark material nav-drawer has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for nav-drawer is missing name metadata. */ +/* ✔ [assert-true] Component schema for overlay is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark material overlay has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark material overlay has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for overlay is missing name metadata. */ +/* ✔ [assert-true] Component schema for paginator is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark material paginator has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark material paginator has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for paginator is missing name metadata. */ +/* ✔ [assert-true] Component schema for pivot-data-selector is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark material pivot-data-selector has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark material pivot-data-selector has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for pivot-data-selector is missing name metadata. */ +/* ✔ [assert-true] Component schema for linear-bar is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark material linear-bar has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark material linear-bar has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for linear-bar is missing name metadata. */ +/* ✔ [assert-true] Component schema for circular-bar is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark material circular-bar has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark material circular-bar has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for circular-bar is missing name metadata. */ +/* ✔ [assert-true] Component schema for qr-code is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark material qr-code has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark material qr-code has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for qr-code is missing name metadata. */ +/* ✔ [assert-true] Component schema for query-builder is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark material query-builder has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark material query-builder has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for query-builder is missing name metadata. */ +/* ✔ [assert-true] Component schema for radio is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark material radio has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark material radio has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for radio is missing name metadata. */ +/* ✔ [assert-true] Component schema for rating is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark material rating has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark material rating has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for rating is missing name metadata. */ +/* ✔ [assert-true] Component schema for resize-indicator is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark material resize-indicator has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark material resize-indicator has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for resize-indicator is missing name metadata. */ +/* ✔ [assert-true] Component schema for ripple is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark material ripple has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark material ripple has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for ripple is missing name metadata. */ +/* ✔ [assert-true] Component schema for scrollbar is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark material scrollbar has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark material scrollbar has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for scrollbar is missing name metadata. */ +/* ✔ [assert-true] Component schema for select is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark material select has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark material select has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for select is missing name metadata. */ +/* ✔ [assert-true] Component schema for slider is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark material slider has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark material slider has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for slider is missing name metadata. */ +/* ✔ [assert-true] Component schema for snackbar is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark material snackbar has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark material snackbar has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for snackbar is missing name metadata. */ +/* ✔ [assert-true] Component schema for splitter is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark material splitter has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark material splitter has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for splitter is missing name metadata. */ +/* ✔ [assert-true] Component schema for stepper is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark material stepper has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark material stepper has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for stepper is missing name metadata. */ +/* ✔ [assert-true] Component schema for switch is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark material switch has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark material switch has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for switch is missing name metadata. */ +/* ✔ [assert-true] Component schema for tabs is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark material tabs has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark material tabs has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for tabs is missing name metadata. */ +/* ✔ [assert-true] Component schema for tile-manager is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark material tile-manager has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark material tile-manager has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for tile-manager is missing name metadata. */ +/* ✔ [assert-true] Component schema for time-picker is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark material time-picker has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark material time-picker has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for time-picker is missing name metadata. */ +/* ✔ [assert-true] Component schema for toast is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark material toast has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark material toast has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for toast is missing name metadata. */ +/* ✔ [assert-true] Component schema for tooltip is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark material tooltip has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark material tooltip has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for tooltip is missing name metadata. */ +/* ✔ [assert-true] Component schema for tree is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark material tree has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark material tree has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for tree is missing name metadata. */ +/* ✔ [assert-true] Component schema for validator is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark material validator has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark material validator has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for validator is missing name metadata. */ +/* ✔ [assert-true] Component schema for watermark is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark material watermark has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark material watermark has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for watermark is missing name metadata. */ +/* ✔ [assert-true] Component schema for file-input is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark material file-input has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark material file-input has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for file-input is missing name metadata. */ +/* ✔ [assert-true] Component schema for category-chart is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap category-chart has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap category-chart has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for category-chart is missing name metadata. */ +/* ✔ [assert-true] Component schema for data-chart is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap data-chart has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap data-chart has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for data-chart is missing name metadata. */ +/* ✔ [assert-true] Component schema for doughnut-chart is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap doughnut-chart has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap doughnut-chart has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for doughnut-chart is missing name metadata. */ +/* ✔ [assert-true] Component schema for financial-chart is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap financial-chart has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap financial-chart has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for financial-chart is missing name metadata. */ +/* ✔ [assert-true] Component schema for funnel-chart is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap funnel-chart has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap funnel-chart has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for funnel-chart is missing name metadata. */ +/* ✔ [assert-true] Component schema for linear-gauge is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap linear-gauge has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap linear-gauge has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for linear-gauge is missing name metadata. */ +/* ✔ [assert-true] Component schema for radial-gauge is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap radial-gauge has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap radial-gauge has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for radial-gauge is missing name metadata. */ +/* ✔ [assert-true] Component schema for geo-map is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap geo-map has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap geo-map has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for geo-map is missing name metadata. */ +/* ✔ [assert-true] Component schema for bullet-graph is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap bullet-graph has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap bullet-graph has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for bullet-graph is missing name metadata. */ +/* ✔ [assert-true] Component schema for pie-chart is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap pie-chart has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap pie-chart has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for pie-chart is missing name metadata. */ +/* ✔ [assert-true] Component schema for shape-chart is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap shape-chart has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap shape-chart has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for shape-chart is missing name metadata. */ +/* ✔ [assert-true] Component schema for sparkline is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap sparkline has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap sparkline has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for sparkline is missing name metadata. */ +/* ✔ [assert-true] Component schema for action-strip is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap action-strip has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap action-strip has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for action-strip is missing name metadata. */ +/* ✔ [assert-true] Component schema for avatar is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap avatar has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap avatar has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for avatar is missing name metadata. */ +/* ✔ [assert-true] Component schema for badge is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap badge has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap badge has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for badge is missing name metadata. */ +/* ✔ [assert-true] Component schema for banner is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap banner has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap banner has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for banner is missing name metadata. */ +/* ✔ [assert-true] Component schema for bottom-nav is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap bottom-nav has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap bottom-nav has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for bottom-nav is missing name metadata. */ +/* ✔ [assert-true] Component schema for flat button is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap flat button has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap flat button has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for flat button is missing name metadata. */ +/* ✔ [assert-true] Component schema for outlined button is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap outlined button has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap outlined button has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for outlined button is missing name metadata. */ +/* ✔ [assert-true] Component schema for contained button is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap contained button has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap contained button has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for contained button is missing name metadata. */ +/* ✔ [assert-true] Component schema for fab button is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap fab button has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap fab button has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for fab button is missing name metadata. */ +/* ✔ [assert-true] Component schema for button-group is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap button-group has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap button-group has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for button-group is missing name metadata. */ +/* ✔ [assert-true] Component schema for calendar is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap calendar has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap calendar has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for calendar is missing name metadata. */ +/* ✔ [assert-true] Component schema for card is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap card has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap card has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for card is missing name metadata. */ +/* ✔ [assert-true] Component schema for carousel is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap carousel has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap carousel has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for carousel is missing name metadata. */ +/* ✔ [assert-true] Component schema for chat is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap chat has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap chat has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for chat is missing name metadata. */ +/* ✔ [assert-true] Component schema for checkbox is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap checkbox has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap checkbox has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for checkbox is missing name metadata. */ +/* ✔ [assert-true] Component schema for chip is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap chip has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap chip has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for chip is missing name metadata. */ +/* ✔ [assert-true] Component schema for color-picker is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap color-picker has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap color-picker has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for color-picker is missing name metadata. */ +/* ✔ [assert-true] Component schema for column-actions is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap column-actions has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap column-actions has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for column-actions is missing name metadata. */ +/* ✔ [assert-true] Component schema for combo is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap combo has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap combo has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for combo is missing name metadata. */ +/* ✔ [assert-true] Component schema for date-picker is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap date-picker has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap date-picker has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for date-picker is missing name metadata. */ +/* ✔ [assert-true] Component schema for date-range is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap date-range has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap date-range has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for date-range is missing name metadata. */ +/* ✔ [assert-true] Component schema for dialog is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap dialog has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap dialog has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for dialog is missing name metadata. */ +/* ✔ [assert-true] Component schema for divider is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap divider has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap divider has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for divider is missing name metadata. */ +/* ✔ [assert-true] Component schema for dockmanager is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap dockmanager has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap dockmanager has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for dockmanager is missing name metadata. */ +/* ✔ [assert-true] Component schema for drop-down is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap drop-down has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap drop-down has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for drop-down is missing name metadata. */ +/* ✔ [assert-true] Component schema for expansion-panel is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap expansion-panel has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap expansion-panel has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for expansion-panel is missing name metadata. */ +/* ✔ [assert-true] Component schema for grid is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap grid has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap grid has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for grid is missing name metadata. */ +/* ✔ [assert-true] Component schema for grid-excel-filtering is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap grid-excel-filtering has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap grid-excel-filtering has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for grid-excel-filtering is missing name metadata. */ +/* ✔ [assert-true] Component schema for grid-filtering is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap grid-filtering has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap grid-filtering has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for grid-filtering is missing name metadata. */ +/* ✔ [assert-true] Component schema for grid-summary is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap grid-summary has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap grid-summary has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for grid-summary is missing name metadata. */ +/* ✔ [assert-true] Component schema for grid-toolbar is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap grid-toolbar has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap grid-toolbar has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for grid-toolbar is missing name metadata. */ +/* ✔ [assert-true] Component schema for highlight is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap highlight has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap highlight has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for highlight is missing name metadata. */ +/* ✔ [assert-true] Component schema for icon is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap icon has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap icon has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for icon is missing name metadata. */ +/* ✔ [assert-true] Component schema for flat icon-button is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap flat icon-button has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap flat icon-button has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for flat icon-button is missing name metadata. */ +/* ✔ [assert-true] Component schema for outlined icon-button is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap outlined icon-button has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap outlined icon-button has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for outlined icon-button is missing name metadata. */ +/* ✔ [assert-true] Component schema for contained icon-button is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap contained icon-button has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap contained icon-button has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for contained icon-button is missing name metadata. */ +/* ✔ [assert-true] Component schema for input-group is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap input-group has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap input-group has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for input-group is missing name metadata. */ +/* ✔ [assert-true] Component schema for label is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap label has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap label has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for label is missing name metadata. */ +/* ✔ [assert-true] Component schema for list is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap list has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap list has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for list is missing name metadata. */ +/* ✔ [assert-true] Component schema for navbar is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap navbar has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap navbar has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for navbar is missing name metadata. */ +/* ✔ [assert-true] Component schema for nav-drawer is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap nav-drawer has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap nav-drawer has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for nav-drawer is missing name metadata. */ +/* ✔ [assert-true] Component schema for overlay is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap overlay has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap overlay has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for overlay is missing name metadata. */ +/* ✔ [assert-true] Component schema for paginator is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap paginator has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap paginator has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for paginator is missing name metadata. */ +/* ✔ [assert-true] Component schema for pivot-data-selector is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap pivot-data-selector has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap pivot-data-selector has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for pivot-data-selector is missing name metadata. */ +/* ✔ [assert-true] Component schema for linear-bar is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap linear-bar has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap linear-bar has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for linear-bar is missing name metadata. */ +/* ✔ [assert-true] Component schema for circular-bar is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap circular-bar has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap circular-bar has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for circular-bar is missing name metadata. */ +/* ✔ [assert-true] Component schema for qr-code is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap qr-code has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap qr-code has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for qr-code is missing name metadata. */ +/* ✔ [assert-true] Component schema for query-builder is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap query-builder has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap query-builder has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for query-builder is missing name metadata. */ +/* ✔ [assert-true] Component schema for radio is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap radio has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap radio has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for radio is missing name metadata. */ +/* ✔ [assert-true] Component schema for rating is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap rating has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap rating has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for rating is missing name metadata. */ +/* ✔ [assert-true] Component schema for resize-indicator is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap resize-indicator has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap resize-indicator has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for resize-indicator is missing name metadata. */ +/* ✔ [assert-true] Component schema for ripple is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap ripple has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap ripple has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for ripple is missing name metadata. */ +/* ✔ [assert-true] Component schema for scrollbar is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap scrollbar has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap scrollbar has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for scrollbar is missing name metadata. */ +/* ✔ [assert-true] Component schema for select is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap select has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap select has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for select is missing name metadata. */ +/* ✔ [assert-true] Component schema for slider is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap slider has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap slider has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for slider is missing name metadata. */ +/* ✔ [assert-true] Component schema for snackbar is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap snackbar has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap snackbar has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for snackbar is missing name metadata. */ +/* ✔ [assert-true] Component schema for splitter is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap splitter has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap splitter has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for splitter is missing name metadata. */ +/* ✔ [assert-true] Component schema for stepper is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap stepper has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap stepper has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for stepper is missing name metadata. */ +/* ✔ [assert-true] Component schema for switch is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap switch has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap switch has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for switch is missing name metadata. */ +/* ✔ [assert-true] Component schema for tabs is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap tabs has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap tabs has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for tabs is missing name metadata. */ +/* ✔ [assert-true] Component schema for tile-manager is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap tile-manager has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap tile-manager has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for tile-manager is missing name metadata. */ +/* ✔ [assert-true] Component schema for time-picker is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap time-picker has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap time-picker has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for time-picker is missing name metadata. */ +/* ✔ [assert-true] Component schema for toast is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap toast has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap toast has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for toast is missing name metadata. */ +/* ✔ [assert-true] Component schema for tooltip is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap tooltip has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap tooltip has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for tooltip is missing name metadata. */ +/* ✔ [assert-true] Component schema for tree is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap tree has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap tree has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for tree is missing name metadata. */ +/* ✔ [assert-true] Component schema for validator is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap validator has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap validator has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for validator is missing name metadata. */ +/* ✔ [assert-true] Component schema for watermark is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap watermark has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap watermark has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for watermark is missing name metadata. */ +/* ✔ [assert-true] Component schema for file-input is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap file-input has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark bootstrap file-input has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for file-input is missing name metadata. */ +/* ✔ [assert-true] Component schema for category-chart is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent category-chart has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent category-chart has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for category-chart is missing name metadata. */ +/* ✔ [assert-true] Component schema for data-chart is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent data-chart has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent data-chart has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for data-chart is missing name metadata. */ +/* ✔ [assert-true] Component schema for doughnut-chart is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent doughnut-chart has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent doughnut-chart has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for doughnut-chart is missing name metadata. */ +/* ✔ [assert-true] Component schema for financial-chart is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent financial-chart has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent financial-chart has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for financial-chart is missing name metadata. */ +/* ✔ [assert-true] Component schema for funnel-chart is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent funnel-chart has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent funnel-chart has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for funnel-chart is missing name metadata. */ +/* ✔ [assert-true] Component schema for linear-gauge is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent linear-gauge has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent linear-gauge has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for linear-gauge is missing name metadata. */ +/* ✔ [assert-true] Component schema for radial-gauge is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent radial-gauge has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent radial-gauge has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for radial-gauge is missing name metadata. */ +/* ✔ [assert-true] Component schema for geo-map is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent geo-map has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent geo-map has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for geo-map is missing name metadata. */ +/* ✔ [assert-true] Component schema for bullet-graph is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent bullet-graph has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent bullet-graph has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for bullet-graph is missing name metadata. */ +/* ✔ [assert-true] Component schema for pie-chart is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent pie-chart has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent pie-chart has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for pie-chart is missing name metadata. */ +/* ✔ [assert-true] Component schema for shape-chart is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent shape-chart has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent shape-chart has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for shape-chart is missing name metadata. */ +/* ✔ [assert-true] Component schema for sparkline is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent sparkline has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent sparkline has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for sparkline is missing name metadata. */ +/* ✔ [assert-true] Component schema for action-strip is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent action-strip has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent action-strip has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for action-strip is missing name metadata. */ +/* ✔ [assert-true] Component schema for avatar is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent avatar has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent avatar has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for avatar is missing name metadata. */ +/* ✔ [assert-true] Component schema for badge is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent badge has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent badge has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for badge is missing name metadata. */ +/* ✔ [assert-true] Component schema for banner is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent banner has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent banner has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for banner is missing name metadata. */ +/* ✔ [assert-true] Component schema for bottom-nav is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent bottom-nav has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent bottom-nav has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for bottom-nav is missing name metadata. */ +/* ✔ [assert-true] Component schema for flat button is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent flat button has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent flat button has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for flat button is missing name metadata. */ +/* ✔ [assert-true] Component schema for outlined button is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent outlined button has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent outlined button has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for outlined button is missing name metadata. */ +/* ✔ [assert-true] Component schema for contained button is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent contained button has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent contained button has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for contained button is missing name metadata. */ +/* ✔ [assert-true] Component schema for fab button is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent fab button has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent fab button has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for fab button is missing name metadata. */ +/* ✔ [assert-true] Component schema for button-group is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent button-group has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent button-group has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for button-group is missing name metadata. */ +/* ✔ [assert-true] Component schema for calendar is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent calendar has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent calendar has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for calendar is missing name metadata. */ +/* ✔ [assert-true] Component schema for card is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent card has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent card has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for card is missing name metadata. */ +/* ✔ [assert-true] Component schema for carousel is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent carousel has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent carousel has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for carousel is missing name metadata. */ +/* ✔ [assert-true] Component schema for chat is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent chat has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent chat has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for chat is missing name metadata. */ +/* ✔ [assert-true] Component schema for checkbox is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent checkbox has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent checkbox has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for checkbox is missing name metadata. */ +/* ✔ [assert-true] Component schema for chip is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent chip has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent chip has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for chip is missing name metadata. */ +/* ✔ [assert-true] Component schema for color-picker is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent color-picker has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent color-picker has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for color-picker is missing name metadata. */ +/* ✔ [assert-true] Component schema for column-actions is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent column-actions has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent column-actions has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for column-actions is missing name metadata. */ +/* ✔ [assert-true] Component schema for combo is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent combo has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent combo has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for combo is missing name metadata. */ +/* ✔ [assert-true] Component schema for date-picker is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent date-picker has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent date-picker has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for date-picker is missing name metadata. */ +/* ✔ [assert-true] Component schema for date-range is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent date-range has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent date-range has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for date-range is missing name metadata. */ +/* ✔ [assert-true] Component schema for dialog is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent dialog has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent dialog has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for dialog is missing name metadata. */ +/* ✔ [assert-true] Component schema for divider is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent divider has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent divider has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for divider is missing name metadata. */ +/* ✔ [assert-true] Component schema for dockmanager is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent dockmanager has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent dockmanager has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for dockmanager is missing name metadata. */ +/* ✔ [assert-true] Component schema for drop-down is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent drop-down has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent drop-down has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for drop-down is missing name metadata. */ +/* ✔ [assert-true] Component schema for expansion-panel is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent expansion-panel has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent expansion-panel has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for expansion-panel is missing name metadata. */ +/* ✔ [assert-true] Component schema for grid is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent grid has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent grid has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for grid is missing name metadata. */ +/* ✔ [assert-true] Component schema for grid-excel-filtering is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent grid-excel-filtering has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent grid-excel-filtering has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for grid-excel-filtering is missing name metadata. */ +/* ✔ [assert-true] Component schema for grid-filtering is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent grid-filtering has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent grid-filtering has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for grid-filtering is missing name metadata. */ +/* ✔ [assert-true] Component schema for grid-summary is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent grid-summary has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent grid-summary has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for grid-summary is missing name metadata. */ +/* ✔ [assert-true] Component schema for grid-toolbar is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent grid-toolbar has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent grid-toolbar has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for grid-toolbar is missing name metadata. */ +/* ✔ [assert-true] Component schema for highlight is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent highlight has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent highlight has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for highlight is missing name metadata. */ +/* ✔ [assert-true] Component schema for icon is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent icon has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent icon has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for icon is missing name metadata. */ +/* ✔ [assert-true] Component schema for flat icon-button is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent flat icon-button has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent flat icon-button has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for flat icon-button is missing name metadata. */ +/* ✔ [assert-true] Component schema for outlined icon-button is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent outlined icon-button has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent outlined icon-button has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for outlined icon-button is missing name metadata. */ +/* ✔ [assert-true] Component schema for contained icon-button is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent contained icon-button has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent contained icon-button has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for contained icon-button is missing name metadata. */ +/* ✔ [assert-true] Component schema for input-group is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent input-group has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent input-group has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for input-group is missing name metadata. */ +/* ✔ [assert-true] Component schema for label is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent label has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent label has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for label is missing name metadata. */ +/* ✔ [assert-true] Component schema for list is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent list has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent list has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for list is missing name metadata. */ +/* ✔ [assert-true] Component schema for navbar is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent navbar has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent navbar has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for navbar is missing name metadata. */ +/* ✔ [assert-true] Component schema for nav-drawer is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent nav-drawer has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent nav-drawer has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for nav-drawer is missing name metadata. */ +/* ✔ [assert-true] Component schema for overlay is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent overlay has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent overlay has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for overlay is missing name metadata. */ +/* ✔ [assert-true] Component schema for paginator is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent paginator has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent paginator has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for paginator is missing name metadata. */ +/* ✔ [assert-true] Component schema for pivot-data-selector is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent pivot-data-selector has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent pivot-data-selector has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for pivot-data-selector is missing name metadata. */ +/* ✔ [assert-true] Component schema for linear-bar is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent linear-bar has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent linear-bar has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for linear-bar is missing name metadata. */ +/* ✔ [assert-true] Component schema for circular-bar is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent circular-bar has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent circular-bar has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for circular-bar is missing name metadata. */ +/* ✔ [assert-true] Component schema for qr-code is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent qr-code has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent qr-code has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for qr-code is missing name metadata. */ +/* ✔ [assert-true] Component schema for query-builder is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent query-builder has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent query-builder has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for query-builder is missing name metadata. */ +/* ✔ [assert-true] Component schema for radio is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent radio has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent radio has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for radio is missing name metadata. */ +/* ✔ [assert-true] Component schema for rating is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent rating has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent rating has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for rating is missing name metadata. */ +/* ✔ [assert-true] Component schema for resize-indicator is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent resize-indicator has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent resize-indicator has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for resize-indicator is missing name metadata. */ +/* ✔ [assert-true] Component schema for ripple is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent ripple has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent ripple has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for ripple is missing name metadata. */ +/* ✔ [assert-true] Component schema for scrollbar is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent scrollbar has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent scrollbar has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for scrollbar is missing name metadata. */ +/* ✔ [assert-true] Component schema for select is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent select has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent select has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for select is missing name metadata. */ +/* ✔ [assert-true] Component schema for slider is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent slider has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent slider has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for slider is missing name metadata. */ +/* ✔ [assert-true] Component schema for snackbar is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent snackbar has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent snackbar has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for snackbar is missing name metadata. */ +/* ✔ [assert-true] Component schema for splitter is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent splitter has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent splitter has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for splitter is missing name metadata. */ +/* ✔ [assert-true] Component schema for stepper is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent stepper has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent stepper has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for stepper is missing name metadata. */ +/* ✔ [assert-true] Component schema for switch is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent switch has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent switch has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for switch is missing name metadata. */ +/* ✔ [assert-true] Component schema for tabs is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent tabs has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent tabs has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for tabs is missing name metadata. */ +/* ✔ [assert-true] Component schema for tile-manager is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent tile-manager has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent tile-manager has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for tile-manager is missing name metadata. */ +/* ✔ [assert-true] Component schema for time-picker is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent time-picker has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent time-picker has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for time-picker is missing name metadata. */ +/* ✔ [assert-true] Component schema for toast is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent toast has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent toast has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for toast is missing name metadata. */ +/* ✔ [assert-true] Component schema for tooltip is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent tooltip has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent tooltip has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for tooltip is missing name metadata. */ +/* ✔ [assert-true] Component schema for tree is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent tree has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent tree has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for tree is missing name metadata. */ +/* ✔ [assert-true] Component schema for validator is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent validator has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent validator has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for validator is missing name metadata. */ +/* ✔ [assert-true] Component schema for watermark is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent watermark has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent watermark has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for watermark is missing name metadata. */ +/* ✔ [assert-true] Component schema for file-input is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent file-input has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark fluent file-input has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for file-input is missing name metadata. */ +/* ✔ [assert-true] Component schema for category-chart is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo category-chart has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo category-chart has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for category-chart is missing name metadata. */ +/* ✔ [assert-true] Component schema for data-chart is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo data-chart has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo data-chart has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for data-chart is missing name metadata. */ +/* ✔ [assert-true] Component schema for doughnut-chart is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo doughnut-chart has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo doughnut-chart has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for doughnut-chart is missing name metadata. */ +/* ✔ [assert-true] Component schema for financial-chart is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo financial-chart has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo financial-chart has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for financial-chart is missing name metadata. */ +/* ✔ [assert-true] Component schema for funnel-chart is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo funnel-chart has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo funnel-chart has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for funnel-chart is missing name metadata. */ +/* ✔ [assert-true] Component schema for linear-gauge is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo linear-gauge has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo linear-gauge has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for linear-gauge is missing name metadata. */ +/* ✔ [assert-true] Component schema for radial-gauge is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo radial-gauge has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo radial-gauge has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for radial-gauge is missing name metadata. */ +/* ✔ [assert-true] Component schema for geo-map is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo geo-map has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo geo-map has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for geo-map is missing name metadata. */ +/* ✔ [assert-true] Component schema for bullet-graph is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo bullet-graph has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo bullet-graph has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for bullet-graph is missing name metadata. */ +/* ✔ [assert-true] Component schema for pie-chart is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo pie-chart has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo pie-chart has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for pie-chart is missing name metadata. */ +/* ✔ [assert-true] Component schema for shape-chart is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo shape-chart has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo shape-chart has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for shape-chart is missing name metadata. */ +/* ✔ [assert-true] Component schema for sparkline is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo sparkline has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo sparkline has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for sparkline is missing name metadata. */ +/* ✔ [assert-true] Component schema for action-strip is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo action-strip has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo action-strip has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for action-strip is missing name metadata. */ +/* ✔ [assert-true] Component schema for avatar is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo avatar has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo avatar has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for avatar is missing name metadata. */ +/* ✔ [assert-true] Component schema for badge is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo badge has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo badge has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for badge is missing name metadata. */ +/* ✔ [assert-true] Component schema for banner is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo banner has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo banner has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for banner is missing name metadata. */ +/* ✔ [assert-true] Component schema for bottom-nav is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo bottom-nav has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo bottom-nav has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for bottom-nav is missing name metadata. */ +/* ✔ [assert-true] Component schema for flat button is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo flat button has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo flat button has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for flat button is missing name metadata. */ +/* ✔ [assert-true] Component schema for outlined button is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo outlined button has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo outlined button has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for outlined button is missing name metadata. */ +/* ✔ [assert-true] Component schema for contained button is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo contained button has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo contained button has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for contained button is missing name metadata. */ +/* ✔ [assert-true] Component schema for fab button is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo fab button has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo fab button has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for fab button is missing name metadata. */ +/* ✔ [assert-true] Component schema for button-group is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo button-group has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo button-group has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for button-group is missing name metadata. */ +/* ✔ [assert-true] Component schema for calendar is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo calendar has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo calendar has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for calendar is missing name metadata. */ +/* ✔ [assert-true] Component schema for card is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo card has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo card has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for card is missing name metadata. */ +/* ✔ [assert-true] Component schema for carousel is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo carousel has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo carousel has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for carousel is missing name metadata. */ +/* ✔ [assert-true] Component schema for chat is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo chat has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo chat has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for chat is missing name metadata. */ +/* ✔ [assert-true] Component schema for checkbox is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo checkbox has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo checkbox has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for checkbox is missing name metadata. */ +/* ✔ [assert-true] Component schema for chip is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo chip has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo chip has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for chip is missing name metadata. */ +/* ✔ [assert-true] Component schema for color-picker is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo color-picker has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo color-picker has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for color-picker is missing name metadata. */ +/* ✔ [assert-true] Component schema for column-actions is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo column-actions has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo column-actions has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for column-actions is missing name metadata. */ +/* ✔ [assert-true] Component schema for combo is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo combo has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo combo has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for combo is missing name metadata. */ +/* ✔ [assert-true] Component schema for date-picker is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo date-picker has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo date-picker has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for date-picker is missing name metadata. */ +/* ✔ [assert-true] Component schema for date-range is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo date-range has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo date-range has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for date-range is missing name metadata. */ +/* ✔ [assert-true] Component schema for dialog is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo dialog has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo dialog has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for dialog is missing name metadata. */ +/* ✔ [assert-true] Component schema for divider is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo divider has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo divider has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for divider is missing name metadata. */ +/* ✔ [assert-true] Component schema for dockmanager is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo dockmanager has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo dockmanager has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for dockmanager is missing name metadata. */ +/* ✔ [assert-true] Component schema for drop-down is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo drop-down has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo drop-down has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for drop-down is missing name metadata. */ +/* ✔ [assert-true] Component schema for expansion-panel is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo expansion-panel has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo expansion-panel has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for expansion-panel is missing name metadata. */ +/* ✔ [assert-true] Component schema for grid is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo grid has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo grid has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for grid is missing name metadata. */ +/* ✔ [assert-true] Component schema for grid-excel-filtering is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo grid-excel-filtering has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo grid-excel-filtering has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for grid-excel-filtering is missing name metadata. */ +/* ✔ [assert-true] Component schema for grid-filtering is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo grid-filtering has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo grid-filtering has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for grid-filtering is missing name metadata. */ +/* ✔ [assert-true] Component schema for grid-summary is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo grid-summary has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo grid-summary has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for grid-summary is missing name metadata. */ +/* ✔ [assert-true] Component schema for grid-toolbar is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo grid-toolbar has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo grid-toolbar has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for grid-toolbar is missing name metadata. */ +/* ✔ [assert-true] Component schema for highlight is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo highlight has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo highlight has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for highlight is missing name metadata. */ +/* ✔ [assert-true] Component schema for icon is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo icon has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo icon has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for icon is missing name metadata. */ +/* ✔ [assert-true] Component schema for flat icon-button is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo flat icon-button has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo flat icon-button has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for flat icon-button is missing name metadata. */ +/* ✔ [assert-true] Component schema for outlined icon-button is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo outlined icon-button has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo outlined icon-button has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for outlined icon-button is missing name metadata. */ +/* ✔ [assert-true] Component schema for contained icon-button is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo contained icon-button has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo contained icon-button has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for contained icon-button is missing name metadata. */ +/* ✔ [assert-true] Component schema for input-group is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo input-group has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo input-group has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for input-group is missing name metadata. */ +/* ✔ [assert-true] Component schema for label is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo label has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo label has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for label is missing name metadata. */ +/* ✔ [assert-true] Component schema for list is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo list has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo list has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for list is missing name metadata. */ +/* ✔ [assert-true] Component schema for navbar is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo navbar has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo navbar has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for navbar is missing name metadata. */ +/* ✔ [assert-true] Component schema for nav-drawer is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo nav-drawer has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo nav-drawer has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for nav-drawer is missing name metadata. */ +/* ✔ [assert-true] Component schema for overlay is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo overlay has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo overlay has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for overlay is missing name metadata. */ +/* ✔ [assert-true] Component schema for paginator is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo paginator has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo paginator has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for paginator is missing name metadata. */ +/* ✔ [assert-true] Component schema for pivot-data-selector is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo pivot-data-selector has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo pivot-data-selector has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for pivot-data-selector is missing name metadata. */ +/* ✔ [assert-true] Component schema for linear-bar is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo linear-bar has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo linear-bar has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for linear-bar is missing name metadata. */ +/* ✔ [assert-true] Component schema for circular-bar is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo circular-bar has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo circular-bar has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for circular-bar is missing name metadata. */ +/* ✔ [assert-true] Component schema for qr-code is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo qr-code has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo qr-code has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for qr-code is missing name metadata. */ +/* ✔ [assert-true] Component schema for query-builder is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo query-builder has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo query-builder has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for query-builder is missing name metadata. */ +/* ✔ [assert-true] Component schema for radio is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo radio has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo radio has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for radio is missing name metadata. */ +/* ✔ [assert-true] Component schema for rating is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo rating has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo rating has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for rating is missing name metadata. */ +/* ✔ [assert-true] Component schema for resize-indicator is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo resize-indicator has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo resize-indicator has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for resize-indicator is missing name metadata. */ +/* ✔ [assert-true] Component schema for ripple is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo ripple has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo ripple has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for ripple is missing name metadata. */ +/* ✔ [assert-true] Component schema for scrollbar is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo scrollbar has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo scrollbar has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for scrollbar is missing name metadata. */ +/* ✔ [assert-true] Component schema for select is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo select has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo select has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for select is missing name metadata. */ +/* ✔ [assert-true] Component schema for slider is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo slider has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo slider has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for slider is missing name metadata. */ +/* ✔ [assert-true] Component schema for snackbar is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo snackbar has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo snackbar has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for snackbar is missing name metadata. */ +/* ✔ [assert-true] Component schema for splitter is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo splitter has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo splitter has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for splitter is missing name metadata. */ +/* ✔ [assert-true] Component schema for stepper is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo stepper has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo stepper has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for stepper is missing name metadata. */ +/* ✔ [assert-true] Component schema for switch is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo switch has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo switch has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for switch is missing name metadata. */ +/* ✔ [assert-true] Component schema for tabs is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo tabs has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo tabs has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for tabs is missing name metadata. */ +/* ✔ [assert-true] Component schema for tile-manager is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo tile-manager has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo tile-manager has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for tile-manager is missing name metadata. */ +/* ✔ [assert-true] Component schema for time-picker is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo time-picker has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo time-picker has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for time-picker is missing name metadata. */ +/* ✔ [assert-true] Component schema for toast is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo toast has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo toast has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for toast is missing name metadata. */ +/* ✔ [assert-true] Component schema for tooltip is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo tooltip has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo tooltip has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for tooltip is missing name metadata. */ +/* ✔ [assert-true] Component schema for tree is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo tree has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo tree has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for tree is missing name metadata. */ +/* ✔ [assert-true] Component schema for validator is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo validator has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo validator has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for validator is missing name metadata. */ +/* ✔ [assert-true] Component schema for watermark is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo watermark has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo watermark has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for watermark is missing name metadata. */ +/* ✔ [assert-true] Component schema for file-input is missing metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo file-input has missing/malformed theme metadata. */ +/* ✔ [assert-equal] Component schema for dark indigo file-input has missing/malformed variant metadata. */ +/* ✔ [assert-true] Component schema for file-input is missing name metadata. */ +/* */ +/* Test: should resolve the border-radius function from schema definitions */ +/* ✔ [assert-equal] should resolve the border-radius function from schema definitions */ +/* */ +/* Test: should retrieve a reference to the CSS variable for a given theme */ +/* ✔ [assert-equal] should retrieve a reference to the CSS variable for a given theme */ +/* */ +/* Test: should convert component theme props into CSS variables */ +/* ASSERT: */ +/* OUTPUT */ +.test-output { + --background: var(--igx-test-component-background, var(--ig-test-component-background, var(--ig-primary-400))); + --hover-background: var(--igx-test-component-hover-background, var(--ig-test-component-hover-background, hsl(from var(--ig-secondary-700) h s l/0.26))); + --foreground: var(--igx-test-component-foreground, var(--ig-test-component-foreground, var(--ig-primary-400-contrast))); + --hover-foreground: var(--igx-test-component-hover-foreground, var(--ig-test-component-hover-foreground, var(--ig-secondary-700-contrast))); + --border-style: var(--igx-test-component-border-style, var(--ig-test-component-border-style, solid)); + --border-radius: var(--igx-test-component-border-radius, var(--ig-test-component-border-radius, 0.125rem)); + --brushes: var(--igx-test-component-brushes, var(--ig-test-component-brushes, var(--chart-brushes))); + --resting-elevation: var(--igx-test-component-resting-elevation, var(--ig-test-component-resting-elevation, var(--ig-elevation-2))); + --ig-theme: material; + --ig-theme-variant: light; +} + +/* END_OUTPUT */ +/* EXPECTED */ +.test-output { + --background: var(--igx-test-component-background, var(--ig-test-component-background, var(--ig-primary-400))); + --hover-background: var(--igx-test-component-hover-background, var(--ig-test-component-hover-background, hsl(from var(--ig-secondary-700) h s l/0.26))); + --foreground: var(--igx-test-component-foreground, var(--ig-test-component-foreground, var(--ig-primary-400-contrast))); + --hover-foreground: var(--igx-test-component-hover-foreground, var(--ig-test-component-hover-foreground, var(--ig-secondary-700-contrast))); + --border-style: var(--igx-test-component-border-style, var(--ig-test-component-border-style, solid)); + --border-radius: var(--igx-test-component-border-radius, var(--ig-test-component-border-radius, 0.125rem)); + --brushes: var(--igx-test-component-brushes, var(--ig-test-component-brushes, var(--chart-brushes))); + --resting-elevation: var(--igx-test-component-resting-elevation, var(--ig-test-component-resting-elevation, var(--ig-elevation-2))); + --ig-theme: material; + --ig-theme-variant: light; +} + +/* END_EXPECTED */ +/* END_ASSERT */ +/* */ +/* Test: should prepend the prefix to CSS variable names when the theme map includes a prefix */ +/* ASSERT: */ +/* OUTPUT */ +.test-output { + --igc-background: var(--igx-test-component-background, var(--ig-test-component-background, var(--ig-primary-400))); + --igc-hover-background: var(--igx-test-component-hover-background, var(--ig-test-component-hover-background, hsl(from var(--ig-secondary-700) h s l/0.26))); + --igc-foreground: var(--igx-test-component-foreground, var(--ig-test-component-foreground, var(--ig-primary-400-contrast))); + --igc-hover-foreground: var(--igx-test-component-hover-foreground, var(--ig-test-component-hover-foreground, var(--ig-secondary-700-contrast))); + --igc-border-style: var(--igx-test-component-border-style, var(--ig-test-component-border-style, solid)); + --igc-border-radius: var(--igx-test-component-border-radius, var(--ig-test-component-border-radius, 0.125rem)); + --igc-brushes: var(--igx-test-component-brushes, var(--ig-test-component-brushes, var(--chart-brushes))); + --igc-resting-elevation: var(--igx-test-component-resting-elevation, var(--ig-test-component-resting-elevation, var(--ig-elevation-2))); + --ig-theme: material; + --ig-theme-variant: light; +} + +/* END_OUTPUT */ +/* EXPECTED */ +.test-output { + --igc-background: var(--igx-test-component-background, var(--ig-test-component-background, var(--ig-primary-400))); + --igc-hover-background: var(--igx-test-component-hover-background, var(--ig-test-component-hover-background, hsl(from var(--ig-secondary-700) h s l/0.26))); + --igc-foreground: var(--igx-test-component-foreground, var(--ig-test-component-foreground, var(--ig-primary-400-contrast))); + --igc-hover-foreground: var(--igx-test-component-hover-foreground, var(--ig-test-component-hover-foreground, var(--ig-secondary-700-contrast))); + --igc-border-style: var(--igx-test-component-border-style, var(--ig-test-component-border-style, solid)); + --igc-border-radius: var(--igx-test-component-border-radius, var(--ig-test-component-border-radius, 0.125rem)); + --igc-brushes: var(--igx-test-component-brushes, var(--ig-test-component-brushes, var(--chart-brushes))); + --igc-resting-elevation: var(--igx-test-component-resting-elevation, var(--ig-test-component-resting-elevation, var(--ig-elevation-2))); + --ig-theme: material; + --ig-theme-variant: light; +} + +/* END_EXPECTED */ +/* END_ASSERT */ +/* */ +/* Test: should not prepend a prefix when the theme map has no prefix property */ +/* ✔ [assert-false] Digested schema should not have a prefix key */ +/* ASSERT: */ +/* OUTPUT */ +.test-output { + --background: var(--igx-test-component-background, var(--ig-test-component-background, var(--ig-primary-400))); + --hover-background: var(--igx-test-component-hover-background, var(--ig-test-component-hover-background, hsl(from var(--ig-secondary-700) h s l/0.26))); + --foreground: var(--igx-test-component-foreground, var(--ig-test-component-foreground, var(--ig-primary-400-contrast))); + --hover-foreground: var(--igx-test-component-hover-foreground, var(--ig-test-component-hover-foreground, var(--ig-secondary-700-contrast))); + --border-style: var(--igx-test-component-border-style, var(--ig-test-component-border-style, solid)); + --border-radius: var(--igx-test-component-border-radius, var(--ig-test-component-border-radius, 0.125rem)); + --brushes: var(--igx-test-component-brushes, var(--ig-test-component-brushes, var(--chart-brushes))); + --resting-elevation: var(--igx-test-component-resting-elevation, var(--ig-test-component-resting-elevation, var(--ig-elevation-2))); + --ig-theme: material; + --ig-theme-variant: light; +} + +/* END_OUTPUT */ +/* EXPECTED */ +.test-output { + --background: var(--igx-test-component-background, var(--ig-test-component-background, var(--ig-primary-400))); + --hover-background: var(--igx-test-component-hover-background, var(--ig-test-component-hover-background, hsl(from var(--ig-secondary-700) h s l/0.26))); + --foreground: var(--igx-test-component-foreground, var(--ig-test-component-foreground, var(--ig-primary-400-contrast))); + --hover-foreground: var(--igx-test-component-hover-foreground, var(--ig-test-component-hover-foreground, var(--ig-secondary-700-contrast))); + --border-style: var(--igx-test-component-border-style, var(--ig-test-component-border-style, solid)); + --border-radius: var(--igx-test-component-border-radius, var(--ig-test-component-border-radius, 0.125rem)); + --brushes: var(--igx-test-component-brushes, var(--ig-test-component-brushes, var(--chart-brushes))); + --resting-elevation: var(--igx-test-component-resting-elevation, var(--ig-test-component-resting-elevation, var(--ig-elevation-2))); + --ig-theme: material; + --ig-theme-variant: light; +} + +/* END_EXPECTED */ +/* END_ASSERT */ +/* */ +/* Test: should scope prefixed CSS variables correctly via the tokens mixin */ +/* ASSERT: */ +/* OUTPUT */ +igc-dockmanager { + --igc-background: var(--igx-test-component-background, var(--ig-test-component-background, var(--ig-primary-400))); + --igc-hover-background: var(--igx-test-component-hover-background, var(--ig-test-component-hover-background, hsl(from var(--ig-secondary-700) h s l/0.26))); + --igc-foreground: var(--igx-test-component-foreground, var(--ig-test-component-foreground, var(--ig-primary-400-contrast))); + --igc-hover-foreground: var(--igx-test-component-hover-foreground, var(--ig-test-component-hover-foreground, var(--ig-secondary-700-contrast))); + --igc-border-style: var(--igx-test-component-border-style, var(--ig-test-component-border-style, solid)); + --igc-border-radius: var(--igx-test-component-border-radius, var(--ig-test-component-border-radius, 0.125rem)); + --igc-brushes: var(--igx-test-component-brushes, var(--ig-test-component-brushes, var(--chart-brushes))); + --igc-resting-elevation: var(--igx-test-component-resting-elevation, var(--ig-test-component-resting-elevation, var(--ig-elevation-2))); + --ig-theme: material; + --ig-theme-variant: light; +} + +/* END_OUTPUT */ +/* EXPECTED */ +igc-dockmanager { + --igc-background: var(--igx-test-component-background, var(--ig-test-component-background, var(--ig-primary-400))); + --igc-hover-background: var(--igx-test-component-hover-background, var(--ig-test-component-hover-background, hsl(from var(--ig-secondary-700) h s l/0.26))); + --igc-foreground: var(--igx-test-component-foreground, var(--ig-test-component-foreground, var(--ig-primary-400-contrast))); + --igc-hover-foreground: var(--igx-test-component-hover-foreground, var(--ig-test-component-hover-foreground, var(--ig-secondary-700-contrast))); + --igc-border-style: var(--igx-test-component-border-style, var(--ig-test-component-border-style, solid)); + --igc-border-radius: var(--igx-test-component-border-radius, var(--ig-test-component-border-radius, 0.125rem)); + --igc-brushes: var(--igx-test-component-brushes, var(--ig-test-component-brushes, var(--chart-brushes))); + --igc-resting-elevation: var(--igx-test-component-resting-elevation, var(--ig-test-component-resting-elevation, var(--ig-elevation-2))); + --ig-theme: material; + --ig-theme-variant: light; +} + +/* END_EXPECTED */ +/* END_ASSERT */ +/* */ +/* Test: should ignore $name property when provided to css-vars-from-theme mixin */ +/* ASSERT: */ +/* OUTPUT */ +.test-output { + --background: var(--igx-test-component-background, var(--ig-test-component-background, var(--ig-primary-400))); + --hover-background: var(--igx-test-component-hover-background, var(--ig-test-component-hover-background, hsl(from var(--ig-secondary-700) h s l/0.26))); + --foreground: var(--igx-test-component-foreground, var(--ig-test-component-foreground, var(--ig-primary-400-contrast))); + --hover-foreground: var(--igx-test-component-hover-foreground, var(--ig-test-component-hover-foreground, var(--ig-secondary-700-contrast))); + --border-style: var(--igx-test-component-border-style, var(--ig-test-component-border-style, solid)); + --border-radius: var(--igx-test-component-border-radius, var(--ig-test-component-border-radius, 0.125rem)); + --brushes: var(--igx-test-component-brushes, var(--ig-test-component-brushes, var(--chart-brushes))); + --resting-elevation: var(--igx-test-component-resting-elevation, var(--ig-test-component-resting-elevation, var(--ig-elevation-2))); + --ig-theme: material; + --ig-theme-variant: light; +} + +/* END_OUTPUT */ +/* EXPECTED */ +.test-output { + --background: var(--igx-test-component-background, var(--ig-test-component-background, var(--ig-primary-400))); + --hover-background: var(--igx-test-component-hover-background, var(--ig-test-component-hover-background, hsl(from var(--ig-secondary-700) h s l/0.26))); + --foreground: var(--igx-test-component-foreground, var(--ig-test-component-foreground, var(--ig-primary-400-contrast))); + --hover-foreground: var(--igx-test-component-hover-foreground, var(--ig-test-component-hover-foreground, var(--ig-secondary-700-contrast))); + --border-style: var(--igx-test-component-border-style, var(--ig-test-component-border-style, solid)); + --border-radius: var(--igx-test-component-border-radius, var(--ig-test-component-border-radius, 0.125rem)); + --brushes: var(--igx-test-component-brushes, var(--ig-test-component-brushes, var(--chart-brushes))); + --resting-elevation: var(--igx-test-component-resting-elevation, var(--ig-test-component-resting-elevation, var(--ig-elevation-2))); + --ig-theme: material; + --ig-theme-variant: light; +} + +/* END_EXPECTED */ +/* END_ASSERT */ +/* */ +/* Test: should ignore all keys in the ignore list */ +/* ASSERT: */ +/* OUTPUT */ +.test-output { + --background: var(--igx-test-component-background, var(--ig-test-component-background, var(--ig-primary-400))); + --hover-background: var(--igx-test-component-hover-background, var(--ig-test-component-hover-background, hsl(from var(--ig-secondary-700) h s l/0.26))); + --foreground: var(--igx-test-component-foreground, var(--ig-test-component-foreground, var(--ig-primary-400-contrast))); + --hover-foreground: var(--igx-test-component-hover-foreground, var(--ig-test-component-hover-foreground, var(--ig-secondary-700-contrast))); + --border-style: var(--igx-test-component-border-style, var(--ig-test-component-border-style, solid)); + --border-radius: var(--igx-test-component-border-radius, var(--ig-test-component-border-radius, 0.125rem)); + --brushes: var(--igx-test-component-brushes, var(--ig-test-component-brushes, var(--chart-brushes))); + --resting-elevation: var(--igx-test-component-resting-elevation, var(--ig-test-component-resting-elevation, var(--ig-elevation-2))); + --ig-theme: material; + --ig-theme-variant: light; +} + +/* END_OUTPUT */ +/* EXPECTED */ +.test-output { + --background: var(--igx-test-component-background, var(--ig-test-component-background, var(--ig-primary-400))); + --hover-background: var(--igx-test-component-hover-background, var(--ig-test-component-hover-background, hsl(from var(--ig-secondary-700) h s l/0.26))); + --foreground: var(--igx-test-component-foreground, var(--ig-test-component-foreground, var(--ig-primary-400-contrast))); + --hover-foreground: var(--igx-test-component-hover-foreground, var(--ig-test-component-hover-foreground, var(--ig-secondary-700-contrast))); + --border-style: var(--igx-test-component-border-style, var(--ig-test-component-border-style, solid)); + --border-radius: var(--igx-test-component-border-radius, var(--ig-test-component-border-radius, 0.125rem)); + --brushes: var(--igx-test-component-brushes, var(--ig-test-component-brushes, var(--chart-brushes))); + --resting-elevation: var(--igx-test-component-resting-elevation, var(--ig-test-component-resting-elevation, var(--ig-elevation-2))); + --ig-theme: material; + --ig-theme-variant: light; +} + +/* END_EXPECTED */ +/* END_ASSERT */ +/* */ +/* Test: should scope theme CSS variables correctly */ +/* ASSERT: */ +/* OUTPUT */ +igc-avatar { + --background: var(--igx-test-component-background, var(--ig-test-component-background, var(--ig-primary-400))); + --hover-background: var(--igx-test-component-hover-background, var(--ig-test-component-hover-background, hsl(from var(--ig-secondary-700) h s l/0.26))); + --foreground: var(--igx-test-component-foreground, var(--ig-test-component-foreground, var(--ig-primary-400-contrast))); + --hover-foreground: var(--igx-test-component-hover-foreground, var(--ig-test-component-hover-foreground, var(--ig-secondary-700-contrast))); + --border-style: var(--igx-test-component-border-style, var(--ig-test-component-border-style, solid)); + --border-radius: var(--igx-test-component-border-radius, var(--ig-test-component-border-radius, 0.125rem)); + --brushes: var(--igx-test-component-brushes, var(--ig-test-component-brushes, var(--chart-brushes))); + --resting-elevation: var(--igx-test-component-resting-elevation, var(--ig-test-component-resting-elevation, var(--ig-elevation-2))); + --ig-theme: material; + --ig-theme-variant: light; +} + +/* END_OUTPUT */ +/* EXPECTED */ +igc-avatar { + --background: var(--igx-test-component-background, var(--ig-test-component-background, var(--ig-primary-400))); + --hover-background: var(--igx-test-component-hover-background, var(--ig-test-component-hover-background, hsl(from var(--ig-secondary-700) h s l/0.26))); + --foreground: var(--igx-test-component-foreground, var(--ig-test-component-foreground, var(--ig-primary-400-contrast))); + --hover-foreground: var(--igx-test-component-hover-foreground, var(--ig-test-component-hover-foreground, var(--ig-secondary-700-contrast))); + --border-style: var(--igx-test-component-border-style, var(--ig-test-component-border-style, solid)); + --border-radius: var(--igx-test-component-border-radius, var(--ig-test-component-border-radius, 0.125rem)); + --brushes: var(--igx-test-component-brushes, var(--ig-test-component-brushes, var(--chart-brushes))); + --resting-elevation: var(--igx-test-component-resting-elevation, var(--ig-test-component-resting-elevation, var(--ig-elevation-2))); + --ig-theme: material; + --ig-theme-variant: light; +} + +/* END_EXPECTED */ +/* END_ASSERT */ +/* ASSERT: */ +/* OUTPUT */ +.my-theme, +.my-theme igc-avatar { + --background: var(--igx-test-component-background, var(--ig-test-component-background, var(--ig-primary-400))); + --hover-background: var(--igx-test-component-hover-background, var(--ig-test-component-hover-background, hsl(from var(--ig-secondary-700) h s l/0.26))); + --foreground: var(--igx-test-component-foreground, var(--ig-test-component-foreground, var(--ig-primary-400-contrast))); + --hover-foreground: var(--igx-test-component-hover-foreground, var(--ig-test-component-hover-foreground, var(--ig-secondary-700-contrast))); + --border-style: var(--igx-test-component-border-style, var(--ig-test-component-border-style, solid)); + --border-radius: var(--igx-test-component-border-radius, var(--ig-test-component-border-radius, 0.125rem)); + --brushes: var(--igx-test-component-brushes, var(--ig-test-component-brushes, var(--chart-brushes))); + --resting-elevation: var(--igx-test-component-resting-elevation, var(--ig-test-component-resting-elevation, var(--ig-elevation-2))); + --ig-theme: material; + --ig-theme-variant: light; +} + +/* END_OUTPUT */ +/* EXPECTED */ +.my-theme, +.my-theme igc-avatar { + --background: var(--igx-test-component-background, var(--ig-test-component-background, var(--ig-primary-400))); + --hover-background: var(--igx-test-component-hover-background, var(--ig-test-component-hover-background, hsl(from var(--ig-secondary-700) h s l/0.26))); + --foreground: var(--igx-test-component-foreground, var(--ig-test-component-foreground, var(--ig-primary-400-contrast))); + --hover-foreground: var(--igx-test-component-hover-foreground, var(--ig-test-component-hover-foreground, var(--ig-secondary-700-contrast))); + --border-style: var(--igx-test-component-border-style, var(--ig-test-component-border-style, solid)); + --border-radius: var(--igx-test-component-border-radius, var(--ig-test-component-border-radius, 0.125rem)); + --brushes: var(--igx-test-component-brushes, var(--ig-test-component-brushes, var(--chart-brushes))); + --resting-elevation: var(--igx-test-component-resting-elevation, var(--ig-test-component-resting-elevation, var(--ig-elevation-2))); + --ig-theme: material; + --ig-theme-variant: light; +} + +/* END_EXPECTED */ +/* END_ASSERT */ +/* */ +/* Test: should scope theme CSS variables to a specified scope */ +/* ASSERT: */ +/* OUTPUT */ +.custom-selector { + --background: var(--igx-test-component-background, var(--ig-test-component-background, var(--ig-primary-400))); + --hover-background: var(--igx-test-component-hover-background, var(--ig-test-component-hover-background, hsl(from var(--ig-secondary-700) h s l/0.26))); + --foreground: var(--igx-test-component-foreground, var(--ig-test-component-foreground, var(--ig-primary-400-contrast))); + --hover-foreground: var(--igx-test-component-hover-foreground, var(--ig-test-component-hover-foreground, var(--ig-secondary-700-contrast))); + --border-style: var(--igx-test-component-border-style, var(--ig-test-component-border-style, solid)); + --border-radius: var(--igx-test-component-border-radius, var(--ig-test-component-border-radius, 0.125rem)); + --brushes: var(--igx-test-component-brushes, var(--ig-test-component-brushes, var(--chart-brushes))); + --resting-elevation: var(--igx-test-component-resting-elevation, var(--ig-test-component-resting-elevation, var(--ig-elevation-2))); + --ig-theme: material; + --ig-theme-variant: light; +} + +/* END_OUTPUT */ +/* EXPECTED */ +.custom-selector { + --background: var(--igx-test-component-background, var(--ig-test-component-background, var(--ig-primary-400))); + --hover-background: var(--igx-test-component-hover-background, var(--ig-test-component-hover-background, hsl(from var(--ig-secondary-700) h s l/0.26))); + --foreground: var(--igx-test-component-foreground, var(--ig-test-component-foreground, var(--ig-primary-400-contrast))); + --hover-foreground: var(--igx-test-component-hover-foreground, var(--ig-test-component-hover-foreground, var(--ig-secondary-700-contrast))); + --border-style: var(--igx-test-component-border-style, var(--ig-test-component-border-style, solid)); + --border-radius: var(--igx-test-component-border-radius, var(--ig-test-component-border-radius, 0.125rem)); + --brushes: var(--igx-test-component-brushes, var(--ig-test-component-brushes, var(--chart-brushes))); + --resting-elevation: var(--igx-test-component-resting-elevation, var(--ig-test-component-resting-elevation, var(--ig-elevation-2))); + --ig-theme: material; + --ig-theme-variant: light; +} + +/* END_EXPECTED */ +/* END_ASSERT */ +/* ASSERT: */ +/* OUTPUT */ +.my-theme, +.my-theme .custom-selector { + --background: var(--igx-test-component-background, var(--ig-test-component-background, var(--ig-primary-400))); + --hover-background: var(--igx-test-component-hover-background, var(--ig-test-component-hover-background, hsl(from var(--ig-secondary-700) h s l/0.26))); + --foreground: var(--igx-test-component-foreground, var(--ig-test-component-foreground, var(--ig-primary-400-contrast))); + --hover-foreground: var(--igx-test-component-hover-foreground, var(--ig-test-component-hover-foreground, var(--ig-secondary-700-contrast))); + --border-style: var(--igx-test-component-border-style, var(--ig-test-component-border-style, solid)); + --border-radius: var(--igx-test-component-border-radius, var(--ig-test-component-border-radius, 0.125rem)); + --brushes: var(--igx-test-component-brushes, var(--ig-test-component-brushes, var(--chart-brushes))); + --resting-elevation: var(--igx-test-component-resting-elevation, var(--ig-test-component-resting-elevation, var(--ig-elevation-2))); + --ig-theme: material; + --ig-theme-variant: light; +} + +/* END_OUTPUT */ +/* EXPECTED */ +.my-theme, +.my-theme .custom-selector { + --background: var(--igx-test-component-background, var(--ig-test-component-background, var(--ig-primary-400))); + --hover-background: var(--igx-test-component-hover-background, var(--ig-test-component-hover-background, hsl(from var(--ig-secondary-700) h s l/0.26))); + --foreground: var(--igx-test-component-foreground, var(--ig-test-component-foreground, var(--ig-primary-400-contrast))); + --hover-foreground: var(--igx-test-component-hover-foreground, var(--ig-test-component-hover-foreground, var(--ig-secondary-700-contrast))); + --border-style: var(--igx-test-component-border-style, var(--ig-test-component-border-style, solid)); + --border-radius: var(--igx-test-component-border-radius, var(--ig-test-component-border-radius, 0.125rem)); + --brushes: var(--igx-test-component-brushes, var(--ig-test-component-brushes, var(--chart-brushes))); + --resting-elevation: var(--igx-test-component-resting-elevation, var(--ig-test-component-resting-elevation, var(--ig-elevation-2))); + --ig-theme: material; + --ig-theme-variant: light; +} + +/* END_EXPECTED */ +/* END_ASSERT */ +/* */ +/* Test: should set the border-radius to a value between min and max */ +/* ✔ [assert-equal] should set the border-radius to a value between min and max */ +/* */ +/* Test: should include border-radius styles to a given scope with a value between min and max */ +/* ASSERT: */ +/* OUTPUT */ +.test-output { + border-radius: clamp(0.125rem, calc(var(--ig-radius-factor, 1) * 0.25rem), 0.25rem); +} + +/* END_OUTPUT */ +/* EXPECTED */ +.test-output { + border-radius: clamp(0.125rem, calc(var(--ig-radius-factor, 1) * 0.25rem), 0.25rem); +} + +/* END_EXPECTED */ +/* END_ASSERT */ +/* */ +/* Test: include single-line truncate styles when the ellipsis mixin is included */ +/* ASSERT: */ +/* OUTPUT */ +.test-output { + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; +} + +/* END_OUTPUT */ +/* EXPECTED */ +.test-output { + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; +} + +/* END_EXPECTED */ +/* END_ASSERT */ +/* */ +/* Test: includes multi-line truncate styles when the line-clamp mixin is included */ +/* ASSERT: */ +/* OUTPUT */ +.test-output { + display: -webkit-inline-box; + -webkit-line-clamp: 3; + -webkit-box-orient: vertical; + overflow: hidden; +} + +/* END_OUTPUT */ +/* EXPECTED */ +.test-output { + display: -webkit-inline-box; + -webkit-line-clamp: 3; + -webkit-box-orient: vertical; + overflow: hidden; +} + +/* END_EXPECTED */ +/* END_ASSERT */ +/* */ +/* Test: includes styles that hide the default element when the hide-default mixin is included */ +/* ASSERT: */ +/* OUTPUT */ +.test-output { + position: absolute; + width: 1px; + height: 1px; + margin: -1px; + border: none; + clip: rect(0, 0, 0, 0); + outline: 0; + pointer-events: none; + overflow: hidden; + appearance: none; +} + +/* END_OUTPUT */ +/* EXPECTED */ +.test-output { + position: absolute; + width: 1px; + height: 1px; + margin: -1px; + border: none; + clip: rect(0, 0, 0, 0); + outline: 0; + pointer-events: none; + overflow: hidden; + appearance: none; +} + +/* END_EXPECTED */ +/* END_ASSERT */ +/* */ +/* # Module: Themes :: schemas :: Tokens */ +/* ------------------------------------- */ +/* Test: should generate global tokens with the ig prefix */ +/* ASSERT: */ +/* OUTPUT */ +.test-output { + --ig-test-component-background: var(--ig-primary-400); + --ig-test-component-hover-background: hsl(from var(--ig-secondary-700) h s l/0.26); + --ig-test-component-foreground: var(--ig-primary-400-contrast); + --ig-test-component-hover-foreground: var(--ig-secondary-700-contrast); + --ig-test-component-border-style: solid; + --ig-test-component-border-radius: 0.125rem; + --ig-test-component-brushes: var(--chart-brushes); + --ig-test-component-resting-elevation: var(--ig-elevation-2); +} + +/* END_OUTPUT */ +/* EXPECTED */ +.test-output { + --ig-test-component-background: var(--ig-primary-400); + --ig-test-component-hover-background: hsl(from var(--ig-secondary-700) h s l/0.26); + --ig-test-component-foreground: var(--ig-primary-400-contrast); + --ig-test-component-hover-foreground: var(--ig-secondary-700-contrast); + --ig-test-component-border-style: solid; + --ig-test-component-border-radius: 0.125rem; + --ig-test-component-brushes: var(--chart-brushes); + --ig-test-component-resting-elevation: var(--ig-elevation-2); +} + +/* END_EXPECTED */ +/* END_ASSERT */ +/* */ +/* Test: should rewrite local var references to global ig-prefixed tokens */ +/* ASSERT: */ +/* OUTPUT */ +.test-output { + --ig-test-rewrite-background: red; + --ig-test-rewrite-color: hsla(from color(from var(--ig-test-rewrite-background) var(--y-contrast)) h 0 l/1); + --ig-test-rewrite-border-style: solid; +} + +/* END_OUTPUT */ +/* EXPECTED */ +.test-output { + --ig-test-rewrite-background: red; + --ig-test-rewrite-color: hsla(from color(from var(--ig-test-rewrite-background) var(--y-contrast)) h 0 l/1); + --ig-test-rewrite-border-style: solid; +} + +/* END_EXPECTED */ +/* END_ASSERT */ +/* */ +/* Test: should rewrite multiple local var references in a single value */ +/* ASSERT: */ +/* OUTPUT */ +.test-output { + --ig-test-multi-background: red; + --ig-test-multi-foreground: blue; + --ig-test-multi-computed: calc(var(--ig-test-multi-background) + var(--ig-test-multi-foreground)); +} + +/* END_OUTPUT */ +/* EXPECTED */ +.test-output { + --ig-test-multi-background: red; + --ig-test-multi-foreground: blue; + --ig-test-multi-computed: calc(var(--ig-test-multi-background) + var(--ig-test-multi-foreground)); +} + +/* END_EXPECTED */ +/* END_ASSERT */ +/* */ +/* Test: should skip sizable expressions from schema defaults */ +/* ASSERT: */ +/* OUTPUT */ +.test-output { + --ig-test-sizable-background: red; +} + +/* END_OUTPUT */ +/* EXPECTED */ +.test-output { + --ig-test-sizable-background: red; +} + +/* END_EXPECTED */ +/* END_ASSERT */ +/* */ +/* Test: should emit concrete size values provided by the user */ +/* ASSERT: */ +/* OUTPUT */ +.test-output { + --ig-test-concrete-size-background: red; + --ig-test-concrete-size-size: 2rem; +} + +/* END_OUTPUT */ +/* EXPECTED */ +.test-output { + --ig-test-concrete-size-background: red; + --ig-test-concrete-size-size: 2rem; +} + +/* END_EXPECTED */ +/* END_ASSERT */ +/* */ +/* Test: should not emit ignored keys */ +/* ASSERT: */ +/* OUTPUT */ +.test-output { + --ig-test-component-background: var(--ig-primary-400); + --ig-test-component-hover-background: hsl(from var(--ig-secondary-700) h s l/0.26); + --ig-test-component-foreground: var(--ig-primary-400-contrast); + --ig-test-component-hover-foreground: var(--ig-secondary-700-contrast); + --ig-test-component-border-style: solid; + --ig-test-component-border-radius: 0.125rem; + --ig-test-component-brushes: var(--chart-brushes); + --ig-test-component-resting-elevation: var(--ig-elevation-2); + --ig-test-component-default-size: 2; +} + +/* END_OUTPUT */ +/* EXPECTED */ +.test-output { + --ig-test-component-background: var(--ig-primary-400); + --ig-test-component-hover-background: hsl(from var(--ig-secondary-700) h s l/0.26); + --ig-test-component-foreground: var(--ig-primary-400-contrast); + --ig-test-component-hover-foreground: var(--ig-secondary-700-contrast); + --ig-test-component-border-style: solid; + --ig-test-component-border-radius: 0.125rem; + --ig-test-component-brushes: var(--chart-brushes); + --ig-test-component-resting-elevation: var(--ig-elevation-2); + --ig-test-component-default-size: 2; +} + +/* END_EXPECTED */ +/* END_ASSERT */ +/* */ +/* Test: should always use the ig prefix regardless of configured variable-prefix */ +/* ASSERT: */ +/* OUTPUT */ +.test-output { + --ig-test-prefix-background: blue; +} + +/* END_OUTPUT */ +/* EXPECTED */ +.test-output { + --ig-test-prefix-background: blue; +} + +/* END_EXPECTED */ +/* END_ASSERT */ +/* */ +/* Test: should scope theme CSS variables when mode is scoped */ +/* ASSERT: */ +/* OUTPUT */ +igc-avatar { + --background: var(--igx-test-component-background, var(--ig-test-component-background, var(--ig-primary-400))); + --hover-background: var(--igx-test-component-hover-background, var(--ig-test-component-hover-background, hsl(from var(--ig-secondary-700) h s l/0.26))); + --foreground: var(--igx-test-component-foreground, var(--ig-test-component-foreground, var(--ig-primary-400-contrast))); + --hover-foreground: var(--igx-test-component-hover-foreground, var(--ig-test-component-hover-foreground, var(--ig-secondary-700-contrast))); + --border-style: var(--igx-test-component-border-style, var(--ig-test-component-border-style, solid)); + --border-radius: var(--igx-test-component-border-radius, var(--ig-test-component-border-radius, 0.125rem)); + --brushes: var(--igx-test-component-brushes, var(--ig-test-component-brushes, var(--chart-brushes))); + --resting-elevation: var(--igx-test-component-resting-elevation, var(--ig-test-component-resting-elevation, var(--ig-elevation-2))); + --ig-theme: material; + --ig-theme-variant: light; +} + +/* END_OUTPUT */ +/* EXPECTED */ +igc-avatar { + --background: var(--igx-test-component-background, var(--ig-test-component-background, var(--ig-primary-400))); + --hover-background: var(--igx-test-component-hover-background, var(--ig-test-component-hover-background, hsl(from var(--ig-secondary-700) h s l/0.26))); + --foreground: var(--igx-test-component-foreground, var(--ig-test-component-foreground, var(--ig-primary-400-contrast))); + --hover-foreground: var(--igx-test-component-hover-foreground, var(--ig-test-component-hover-foreground, var(--ig-secondary-700-contrast))); + --border-style: var(--igx-test-component-border-style, var(--ig-test-component-border-style, solid)); + --border-radius: var(--igx-test-component-border-radius, var(--ig-test-component-border-radius, 0.125rem)); + --brushes: var(--igx-test-component-brushes, var(--ig-test-component-brushes, var(--chart-brushes))); + --resting-elevation: var(--igx-test-component-resting-elevation, var(--ig-test-component-resting-elevation, var(--ig-elevation-2))); + --ig-theme: material; + --ig-theme-variant: light; +} + +/* END_EXPECTED */ +/* END_ASSERT */ +/* ASSERT: */ +/* OUTPUT */ +.my-theme, +.my-theme igc-avatar { + --background: var(--igx-test-component-background, var(--ig-test-component-background, var(--ig-primary-400))); + --hover-background: var(--igx-test-component-hover-background, var(--ig-test-component-hover-background, hsl(from var(--ig-secondary-700) h s l/0.26))); + --foreground: var(--igx-test-component-foreground, var(--ig-test-component-foreground, var(--ig-primary-400-contrast))); + --hover-foreground: var(--igx-test-component-hover-foreground, var(--ig-test-component-hover-foreground, var(--ig-secondary-700-contrast))); + --border-style: var(--igx-test-component-border-style, var(--ig-test-component-border-style, solid)); + --border-radius: var(--igx-test-component-border-radius, var(--ig-test-component-border-radius, 0.125rem)); + --brushes: var(--igx-test-component-brushes, var(--ig-test-component-brushes, var(--chart-brushes))); + --resting-elevation: var(--igx-test-component-resting-elevation, var(--ig-test-component-resting-elevation, var(--ig-elevation-2))); + --ig-theme: material; + --ig-theme-variant: light; +} + +/* END_OUTPUT */ +/* EXPECTED */ +.my-theme, +.my-theme igc-avatar { + --background: var(--igx-test-component-background, var(--ig-test-component-background, var(--ig-primary-400))); + --hover-background: var(--igx-test-component-hover-background, var(--ig-test-component-hover-background, hsl(from var(--ig-secondary-700) h s l/0.26))); + --foreground: var(--igx-test-component-foreground, var(--ig-test-component-foreground, var(--ig-primary-400-contrast))); + --hover-foreground: var(--igx-test-component-hover-foreground, var(--ig-test-component-hover-foreground, var(--ig-secondary-700-contrast))); + --border-style: var(--igx-test-component-border-style, var(--ig-test-component-border-style, solid)); + --border-radius: var(--igx-test-component-border-radius, var(--ig-test-component-border-radius, 0.125rem)); + --brushes: var(--igx-test-component-brushes, var(--ig-test-component-brushes, var(--chart-brushes))); + --resting-elevation: var(--igx-test-component-resting-elevation, var(--ig-test-component-resting-elevation, var(--ig-elevation-2))); + --ig-theme: material; + --ig-theme-variant: light; +} + +/* END_EXPECTED */ +/* END_ASSERT */ +/* */ +/* Test: should scope theme CSS variables to a custom scope when mode is scoped */ +/* ASSERT: */ +/* OUTPUT */ +.custom-scope { + --background: var(--igx-test-component-background, var(--ig-test-component-background, var(--ig-primary-400))); + --hover-background: var(--igx-test-component-hover-background, var(--ig-test-component-hover-background, hsl(from var(--ig-secondary-700) h s l/0.26))); + --foreground: var(--igx-test-component-foreground, var(--ig-test-component-foreground, var(--ig-primary-400-contrast))); + --hover-foreground: var(--igx-test-component-hover-foreground, var(--ig-test-component-hover-foreground, var(--ig-secondary-700-contrast))); + --border-style: var(--igx-test-component-border-style, var(--ig-test-component-border-style, solid)); + --border-radius: var(--igx-test-component-border-radius, var(--ig-test-component-border-radius, 0.125rem)); + --brushes: var(--igx-test-component-brushes, var(--ig-test-component-brushes, var(--chart-brushes))); + --resting-elevation: var(--igx-test-component-resting-elevation, var(--ig-test-component-resting-elevation, var(--ig-elevation-2))); + --ig-theme: material; + --ig-theme-variant: light; +} + +/* END_OUTPUT */ +/* EXPECTED */ +.custom-scope { + --background: var(--igx-test-component-background, var(--ig-test-component-background, var(--ig-primary-400))); + --hover-background: var(--igx-test-component-hover-background, var(--ig-test-component-hover-background, hsl(from var(--ig-secondary-700) h s l/0.26))); + --foreground: var(--igx-test-component-foreground, var(--ig-test-component-foreground, var(--ig-primary-400-contrast))); + --hover-foreground: var(--igx-test-component-hover-foreground, var(--ig-test-component-hover-foreground, var(--ig-secondary-700-contrast))); + --border-style: var(--igx-test-component-border-style, var(--ig-test-component-border-style, solid)); + --border-radius: var(--igx-test-component-border-radius, var(--ig-test-component-border-radius, 0.125rem)); + --brushes: var(--igx-test-component-brushes, var(--ig-test-component-brushes, var(--chart-brushes))); + --resting-elevation: var(--igx-test-component-resting-elevation, var(--ig-test-component-resting-elevation, var(--ig-elevation-2))); + --ig-theme: material; + --ig-theme-variant: light; +} + +/* END_EXPECTED */ +/* END_ASSERT */ +/* */ +/* Test: should produce identical output for css-vars and tokens in scoped mode */ +/* ASSERT: */ +/* OUTPUT */ +igc-test { + --background: var(--igx-test-component-background, var(--ig-test-component-background, var(--ig-primary-400))); + --hover-background: var(--igx-test-component-hover-background, var(--ig-test-component-hover-background, hsl(from var(--ig-secondary-700) h s l/0.26))); + --foreground: var(--igx-test-component-foreground, var(--ig-test-component-foreground, var(--ig-primary-400-contrast))); + --hover-foreground: var(--igx-test-component-hover-foreground, var(--ig-test-component-hover-foreground, var(--ig-secondary-700-contrast))); + --border-style: var(--igx-test-component-border-style, var(--ig-test-component-border-style, solid)); + --border-radius: var(--igx-test-component-border-radius, var(--ig-test-component-border-radius, 0.125rem)); + --brushes: var(--igx-test-component-brushes, var(--ig-test-component-brushes, var(--chart-brushes))); + --resting-elevation: var(--igx-test-component-resting-elevation, var(--ig-test-component-resting-elevation, var(--ig-elevation-2))); + --ig-theme: material; + --ig-theme-variant: light; +} + +/* END_OUTPUT */ +/* EXPECTED */ +igc-test { + --background: var(--igx-test-component-background, var(--ig-test-component-background, var(--ig-primary-400))); + --hover-background: var(--igx-test-component-hover-background, var(--ig-test-component-hover-background, hsl(from var(--ig-secondary-700) h s l/0.26))); + --foreground: var(--igx-test-component-foreground, var(--ig-test-component-foreground, var(--ig-primary-400-contrast))); + --hover-foreground: var(--igx-test-component-hover-foreground, var(--ig-test-component-hover-foreground, var(--ig-secondary-700-contrast))); + --border-style: var(--igx-test-component-border-style, var(--ig-test-component-border-style, solid)); + --border-radius: var(--igx-test-component-border-radius, var(--ig-test-component-border-radius, 0.125rem)); + --brushes: var(--igx-test-component-brushes, var(--ig-test-component-brushes, var(--chart-brushes))); + --resting-elevation: var(--igx-test-component-resting-elevation, var(--ig-test-component-resting-elevation, var(--ig-elevation-2))); + --ig-theme: material; + --ig-theme-variant: light; +} + +/* END_EXPECTED */ +/* END_ASSERT */ +/* */ +/* */ +/* # Module: Themes :: schemas :: Sizing */ +/* ------------------------------------- */ +/* Test: should produce size variables */ +/* ASSERT: */ +/* OUTPUT */ +.test-output { + width: max(var(--is-large, 1) * max(300px, -1 * 300px), var(--is-medium, 1) * max(200px, -1 * 200px), var(--is-small, 1) * max(100px, -1 * 100px)); +} + +/* END_OUTPUT */ +/* EXPECTED */ +.test-output { + width: max(var(--is-large, 1) * max(300px, -1 * 300px), var(--is-medium, 1) * max(200px, -1 * 200px), var(--is-small, 1) * max(100px, -1 * 100px)); +} + +/* END_EXPECTED */ +/* END_ASSERT */ +/* */ +/* */ +/* # Module: Themes :: schemas :: Spacing */ +/* -------------------------------------- */ +/* Test: should use customizable spacing when declaring padding/margin */ +/* ASSERT: */ +/* OUTPUT */ +.test-output { + padding: max(var(--is-large, 1) * max(14px, -1 * 14px) * var(--ig-spacing-large, var(--ig-spacing, var(--ig-spacing))), var(--is-medium, 1) * max(14px, -1 * 14px) * var(--ig-spacing-medium, var(--ig-spacing, var(--ig-spacing))), var(--is-small, 1) * max(14px, -1 * 14px) * var(--ig-spacing-small, var(--ig-spacing, var(--ig-spacing)))); +} + +/* END_OUTPUT */ +/* EXPECTED */ +.test-output { + padding: max(var(--is-large, 1) * max(14px, -1 * 14px) * var(--ig-spacing-large, var(--ig-spacing, var(--ig-spacing))), var(--is-medium, 1) * max(14px, -1 * 14px) * var(--ig-spacing-medium, var(--ig-spacing, var(--ig-spacing))), var(--is-small, 1) * max(14px, -1 * 14px) * var(--ig-spacing-small, var(--ig-spacing, var(--ig-spacing)))); +} + +/* END_EXPECTED */ +/* END_ASSERT */ +/* */ +/* Test: should use customizable inline spacing when declaring inline padding/margin */ +/* ASSERT: */ +/* OUTPUT */ +.test-output { + padding-inline: max(var(--is-large, 1) * max(14px, -1 * 14px) * var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))), var(--is-medium, 1) * max(14px, -1 * 14px) * var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))), var(--is-small, 1) * max(14px, -1 * 14px) * var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing)))); +} + +/* END_OUTPUT */ +/* EXPECTED */ +.test-output { + padding-inline: max(var(--is-large, 1) * max(14px, -1 * 14px) * var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))), var(--is-medium, 1) * max(14px, -1 * 14px) * var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))), var(--is-small, 1) * max(14px, -1 * 14px) * var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing)))); +} + +/* END_EXPECTED */ +/* END_ASSERT */ +/* */ +/* Test: should use customizable block spacing when declaring inline padding/margin */ +/* ASSERT: */ +/* OUTPUT */ +.test-output { + padding-block: max(var(--is-large, 1) * max(16px, -1 * 16px) * var(--ig-spacing-block-large, var(--ig-spacing-block, var(--ig-spacing))), var(--is-medium, 1) * max(8px, -1 * 8px) * var(--ig-spacing-block-medium, var(--ig-spacing-block, var(--ig-spacing))), var(--is-small, 1) * max(4px, -1 * 4px) * var(--ig-spacing-block-small, var(--ig-spacing-block, var(--ig-spacing)))); +} + +/* END_OUTPUT */ +/* EXPECTED */ +.test-output { + padding-block: max(var(--is-large, 1) * max(16px, -1 * 16px) * var(--ig-spacing-block-large, var(--ig-spacing-block, var(--ig-spacing))), var(--is-medium, 1) * max(8px, -1 * 8px) * var(--ig-spacing-block-medium, var(--ig-spacing-block, var(--ig-spacing))), var(--is-small, 1) * max(4px, -1 * 4px) * var(--ig-spacing-block-small, var(--ig-spacing-block, var(--ig-spacing)))); +} + +/* END_EXPECTED */ +/* END_ASSERT */ +/* */ +/* */ +/* */ +/* */ +/* # Module: Elevations */ +/* -------------------- */ +/* Test: should return an empty list for a list of non box-shadow values */ +/* ✔ [assert-equal] should return an empty list for a list of non box-shadow values */ +/* */ +/* Test: should produce a box shadow that reacts to CSS --ig-elevation-factor changes */ +/* ✔ [assert-equal] should produce a box shadow that reacts to CSS --ig-elevation-factor changes */ +/* */ +/* Test: should configure the material elevations module */ +/* ASSERT: */ +/* OUTPUT */ +.test-output { + --ig-elevation-0: none; + --ig-elevation-1: 0 calc(var(--ig-elevation-factor, 1) * 1px) calc(var(--ig-elevation-factor, 1) * 3px) 0 red, 0 calc(var(--ig-elevation-factor, 1) * 1px) calc(var(--ig-elevation-factor, 1) * 1px) 0 green, 0 calc(var(--ig-elevation-factor, 1) * 2px) calc(var(--ig-elevation-factor, 1) * 1px) calc(var(--ig-elevation-factor, 1) * -1px) blue; + --ig-elevation-2: 0 calc(var(--ig-elevation-factor, 1) * 1px) calc(var(--ig-elevation-factor, 1) * 5px) 0 red, 0 calc(var(--ig-elevation-factor, 1) * 2px) calc(var(--ig-elevation-factor, 1) * 2px) 0 green, 0 calc(var(--ig-elevation-factor, 1) * 3px) calc(var(--ig-elevation-factor, 1) * 1px) calc(var(--ig-elevation-factor, 1) * -2px) blue; + --ig-elevation-3: 0 calc(var(--ig-elevation-factor, 1) * 1px) calc(var(--ig-elevation-factor, 1) * 8px) 0 red, 0 calc(var(--ig-elevation-factor, 1) * 3px) calc(var(--ig-elevation-factor, 1) * 4px) 0 green, 0 calc(var(--ig-elevation-factor, 1) * 3px) calc(var(--ig-elevation-factor, 1) * 3px) calc(var(--ig-elevation-factor, 1) * -2px) blue; + --ig-elevation-4: 0 calc(var(--ig-elevation-factor, 1) * 2px) calc(var(--ig-elevation-factor, 1) * 4px) calc(var(--ig-elevation-factor, 1) * -1px) red, 0 calc(var(--ig-elevation-factor, 1) * 4px) calc(var(--ig-elevation-factor, 1) * 5px) 0 green, 0 calc(var(--ig-elevation-factor, 1) * 1px) calc(var(--ig-elevation-factor, 1) * 10px) 0 blue; + --ig-elevation-5: 0 calc(var(--ig-elevation-factor, 1) * 3px) calc(var(--ig-elevation-factor, 1) * 5px) calc(var(--ig-elevation-factor, 1) * -1px) red, 0 calc(var(--ig-elevation-factor, 1) * 5px) calc(var(--ig-elevation-factor, 1) * 8px) 0 green, 0 calc(var(--ig-elevation-factor, 1) * 1px) calc(var(--ig-elevation-factor, 1) * 14px) 0 blue; + --ig-elevation-6: 0 calc(var(--ig-elevation-factor, 1) * 3px) calc(var(--ig-elevation-factor, 1) * 5px) calc(var(--ig-elevation-factor, 1) * -1px) red, 0 calc(var(--ig-elevation-factor, 1) * 6px) calc(var(--ig-elevation-factor, 1) * 10px) 0 green, 0 calc(var(--ig-elevation-factor, 1) * 1px) calc(var(--ig-elevation-factor, 1) * 18px) 0 blue; + --ig-elevation-7: 0 calc(var(--ig-elevation-factor, 1) * 4px) calc(var(--ig-elevation-factor, 1) * 5px) calc(var(--ig-elevation-factor, 1) * -2px) red, 0 calc(var(--ig-elevation-factor, 1) * 7px) calc(var(--ig-elevation-factor, 1) * 10px) calc(var(--ig-elevation-factor, 1) * 1px) green, 0 calc(var(--ig-elevation-factor, 1) * 2px) calc(var(--ig-elevation-factor, 1) * 16px) calc(var(--ig-elevation-factor, 1) * 1px) blue; + --ig-elevation-8: 0 calc(var(--ig-elevation-factor, 1) * 5px) calc(var(--ig-elevation-factor, 1) * 5px) calc(var(--ig-elevation-factor, 1) * -3px) red, 0 calc(var(--ig-elevation-factor, 1) * 8px) calc(var(--ig-elevation-factor, 1) * 10px) calc(var(--ig-elevation-factor, 1) * 1px) green, 0 calc(var(--ig-elevation-factor, 1) * 3px) calc(var(--ig-elevation-factor, 1) * 14px) calc(var(--ig-elevation-factor, 1) * 2px) blue; + --ig-elevation-9: 0 calc(var(--ig-elevation-factor, 1) * 5px) calc(var(--ig-elevation-factor, 1) * 6px) calc(var(--ig-elevation-factor, 1) * -3px) red, 0 calc(var(--ig-elevation-factor, 1) * 9px) calc(var(--ig-elevation-factor, 1) * 12px) calc(var(--ig-elevation-factor, 1) * 1px) green, 0 calc(var(--ig-elevation-factor, 1) * 3px) calc(var(--ig-elevation-factor, 1) * 16px) calc(var(--ig-elevation-factor, 1) * 2px) blue; + --ig-elevation-10: 0 calc(var(--ig-elevation-factor, 1) * 6px) calc(var(--ig-elevation-factor, 1) * 6px) calc(var(--ig-elevation-factor, 1) * -3px) red, 0 calc(var(--ig-elevation-factor, 1) * 10px) calc(var(--ig-elevation-factor, 1) * 14px) calc(var(--ig-elevation-factor, 1) * 1px) green, 0 calc(var(--ig-elevation-factor, 1) * 4px) calc(var(--ig-elevation-factor, 1) * 18px) calc(var(--ig-elevation-factor, 1) * 3px) blue; + --ig-elevation-11: 0 calc(var(--ig-elevation-factor, 1) * 6px) calc(var(--ig-elevation-factor, 1) * 7px) calc(var(--ig-elevation-factor, 1) * -4px) red, 0 calc(var(--ig-elevation-factor, 1) * 11px) calc(var(--ig-elevation-factor, 1) * 15px) calc(var(--ig-elevation-factor, 1) * 1px) green, 0 calc(var(--ig-elevation-factor, 1) * 4px) calc(var(--ig-elevation-factor, 1) * 20px) calc(var(--ig-elevation-factor, 1) * 3px) blue; + --ig-elevation-12: 0 calc(var(--ig-elevation-factor, 1) * 7px) calc(var(--ig-elevation-factor, 1) * 8px) calc(var(--ig-elevation-factor, 1) * -4px) red, 0 calc(var(--ig-elevation-factor, 1) * 12px) calc(var(--ig-elevation-factor, 1) * 17px) calc(var(--ig-elevation-factor, 1) * 2px) green, 0 calc(var(--ig-elevation-factor, 1) * 5px) calc(var(--ig-elevation-factor, 1) * 22px) calc(var(--ig-elevation-factor, 1) * 4px) blue; + --ig-elevation-13: 0 calc(var(--ig-elevation-factor, 1) * 7px) calc(var(--ig-elevation-factor, 1) * 8px) calc(var(--ig-elevation-factor, 1) * -4px) red, 0 calc(var(--ig-elevation-factor, 1) * 13px) calc(var(--ig-elevation-factor, 1) * 19px) calc(var(--ig-elevation-factor, 1) * 2px) green, 0 calc(var(--ig-elevation-factor, 1) * 5px) calc(var(--ig-elevation-factor, 1) * 24px) calc(var(--ig-elevation-factor, 1) * 4px) blue; + --ig-elevation-14: 0 calc(var(--ig-elevation-factor, 1) * 7px) calc(var(--ig-elevation-factor, 1) * 9px) calc(var(--ig-elevation-factor, 1) * -4px) red, 0 calc(var(--ig-elevation-factor, 1) * 14px) calc(var(--ig-elevation-factor, 1) * 21px) calc(var(--ig-elevation-factor, 1) * 2px) green, 0 calc(var(--ig-elevation-factor, 1) * 5px) calc(var(--ig-elevation-factor, 1) * 26px) calc(var(--ig-elevation-factor, 1) * 4px) blue; + --ig-elevation-15: 0 calc(var(--ig-elevation-factor, 1) * 8px) calc(var(--ig-elevation-factor, 1) * 9px) calc(var(--ig-elevation-factor, 1) * -5px) red, 0 calc(var(--ig-elevation-factor, 1) * 15px) calc(var(--ig-elevation-factor, 1) * 22px) calc(var(--ig-elevation-factor, 1) * 2px) green, 0 calc(var(--ig-elevation-factor, 1) * 6px) calc(var(--ig-elevation-factor, 1) * 28px) calc(var(--ig-elevation-factor, 1) * 5px) blue; + --ig-elevation-16: 0 calc(var(--ig-elevation-factor, 1) * 8px) calc(var(--ig-elevation-factor, 1) * 10px) calc(var(--ig-elevation-factor, 1) * -5px) red, 0 calc(var(--ig-elevation-factor, 1) * 16px) calc(var(--ig-elevation-factor, 1) * 24px) calc(var(--ig-elevation-factor, 1) * 2px) green, 0 calc(var(--ig-elevation-factor, 1) * 6px) calc(var(--ig-elevation-factor, 1) * 30px) calc(var(--ig-elevation-factor, 1) * 5px) blue; + --ig-elevation-17: 0 calc(var(--ig-elevation-factor, 1) * 8px) calc(var(--ig-elevation-factor, 1) * 11px) calc(var(--ig-elevation-factor, 1) * -5px) red, 0 calc(var(--ig-elevation-factor, 1) * 17px) calc(var(--ig-elevation-factor, 1) * 26px) calc(var(--ig-elevation-factor, 1) * 2px) green, 0 calc(var(--ig-elevation-factor, 1) * 6px) calc(var(--ig-elevation-factor, 1) * 32px) calc(var(--ig-elevation-factor, 1) * 5px) blue; + --ig-elevation-18: 0 calc(var(--ig-elevation-factor, 1) * 9px) calc(var(--ig-elevation-factor, 1) * 11px) calc(var(--ig-elevation-factor, 1) * -5px) red, 0 calc(var(--ig-elevation-factor, 1) * 18px) calc(var(--ig-elevation-factor, 1) * 28px) calc(var(--ig-elevation-factor, 1) * 2px) green, 0 calc(var(--ig-elevation-factor, 1) * 7px) calc(var(--ig-elevation-factor, 1) * 34px) calc(var(--ig-elevation-factor, 1) * 6px) blue; + --ig-elevation-19: 0 calc(var(--ig-elevation-factor, 1) * 9px) calc(var(--ig-elevation-factor, 1) * 12px) calc(var(--ig-elevation-factor, 1) * -6px) red, 0 calc(var(--ig-elevation-factor, 1) * 19px) calc(var(--ig-elevation-factor, 1) * 29px) calc(var(--ig-elevation-factor, 1) * 2px) green, 0 calc(var(--ig-elevation-factor, 1) * 7px) calc(var(--ig-elevation-factor, 1) * 36px) calc(var(--ig-elevation-factor, 1) * 6px) blue; + --ig-elevation-20: 0 calc(var(--ig-elevation-factor, 1) * 10px) calc(var(--ig-elevation-factor, 1) * 13px) calc(var(--ig-elevation-factor, 1) * -6px) red, 0 calc(var(--ig-elevation-factor, 1) * 20px) calc(var(--ig-elevation-factor, 1) * 31px) calc(var(--ig-elevation-factor, 1) * 3px) green, 0 calc(var(--ig-elevation-factor, 1) * 8px) calc(var(--ig-elevation-factor, 1) * 38px) calc(var(--ig-elevation-factor, 1) * 7px) blue; + --ig-elevation-21: 0 calc(var(--ig-elevation-factor, 1) * 10px) calc(var(--ig-elevation-factor, 1) * 13px) calc(var(--ig-elevation-factor, 1) * -6px) red, 0 calc(var(--ig-elevation-factor, 1) * 21px) calc(var(--ig-elevation-factor, 1) * 33px) calc(var(--ig-elevation-factor, 1) * 3px) green, 0 calc(var(--ig-elevation-factor, 1) * 8px) calc(var(--ig-elevation-factor, 1) * 40px) calc(var(--ig-elevation-factor, 1) * 7px) blue; + --ig-elevation-22: 0 calc(var(--ig-elevation-factor, 1) * 10px) calc(var(--ig-elevation-factor, 1) * 14px) calc(var(--ig-elevation-factor, 1) * -6px) red, 0 calc(var(--ig-elevation-factor, 1) * 22px) calc(var(--ig-elevation-factor, 1) * 35px) calc(var(--ig-elevation-factor, 1) * 3px) green, 0 calc(var(--ig-elevation-factor, 1) * 8px) calc(var(--ig-elevation-factor, 1) * 42px) calc(var(--ig-elevation-factor, 1) * 7px) blue; + --ig-elevation-23: 0 calc(var(--ig-elevation-factor, 1) * 11px) calc(var(--ig-elevation-factor, 1) * 14px) calc(var(--ig-elevation-factor, 1) * -7px) red, 0 calc(var(--ig-elevation-factor, 1) * 23px) calc(var(--ig-elevation-factor, 1) * 36px) calc(var(--ig-elevation-factor, 1) * 3px) green, 0 calc(var(--ig-elevation-factor, 1) * 9px) calc(var(--ig-elevation-factor, 1) * 44px) calc(var(--ig-elevation-factor, 1) * 8px) blue; + --ig-elevation-24: 0 calc(var(--ig-elevation-factor, 1) * 11px) calc(var(--ig-elevation-factor, 1) * 15px) calc(var(--ig-elevation-factor, 1) * -7px) red, 0 calc(var(--ig-elevation-factor, 1) * 24px) calc(var(--ig-elevation-factor, 1) * 38px) calc(var(--ig-elevation-factor, 1) * 3px) green, 0 calc(var(--ig-elevation-factor, 1) * 9px) calc(var(--ig-elevation-factor, 1) * 46px) calc(var(--ig-elevation-factor, 1) * 8px) blue; +} + +/* END_OUTPUT */ +/* CONTAINED */ +.test-output { + --ig-elevation-1: 0 calc(var(--ig-elevation-factor, 1) * 1px) calc(var(--ig-elevation-factor, 1) * 3px) 0 red, 0 calc(var(--ig-elevation-factor, 1) * 1px) calc(var(--ig-elevation-factor, 1) * 1px) 0 green, 0 calc(var(--ig-elevation-factor, 1) * 2px) calc(var(--ig-elevation-factor, 1) * 1px) calc(var(--ig-elevation-factor, 1) * -1px) blue; +} + +/* END_CONTAINED */ +/* END_ASSERT */ +/* */ +/* Test: should produce CSS variables for a map of shadows */ +/* ASSERT: */ +/* OUTPUT */ +.test-output { + --ig-elevation-small: 0 calc(var(--ig-elevation-factor, 1) * 0.125rem) calc(var(--ig-elevation-factor, 1) * 0.25rem) rgba(0, 0, 0, 0.75); + --ig-elevation-medium: 0 calc(var(--ig-elevation-factor, 1) * 0.25rem) calc(var(--ig-elevation-factor, 1) * 0.5rem) rgba(0, 0, 0, 0.85); + --ig-elevation-large: 0 calc(var(--ig-elevation-factor, 1) * 0.75rem) calc(var(--ig-elevation-factor, 1) * 1rem) rgba(0, 0, 0, 0.95); +} + +/* END_OUTPUT */ +/* EXPECTED */ +.test-output { + --ig-elevation-small: 0 calc(var(--ig-elevation-factor, 1) * 0.125rem) calc(var(--ig-elevation-factor, 1) * 0.25rem) rgba(0, 0, 0, 0.75); + --ig-elevation-medium: 0 calc(var(--ig-elevation-factor, 1) * 0.25rem) calc(var(--ig-elevation-factor, 1) * 0.5rem) rgba(0, 0, 0, 0.85); + --ig-elevation-large: 0 calc(var(--ig-elevation-factor, 1) * 0.75rem) calc(var(--ig-elevation-factor, 1) * 1rem) rgba(0, 0, 0, 0.95); +} + +/* END_EXPECTED */ +/* END_ASSERT */ +/* */ +/* Test: should retrieve a CSS variable elevation by name */ +/* ASSERT: */ +/* OUTPUT */ +.test-output { + box-shadow: var(--ig-elevation-small); +} + +/* END_OUTPUT */ +/* EXPECTED */ +.test-output { + box-shadow: var(--ig-elevation-small); +} + +/* END_EXPECTED */ +/* END_ASSERT */ +/* */ +/* Test: should include box-shadow styles for an elevation level */ +/* ASSERT: */ +/* OUTPUT */ +.test-output { + box-shadow: var(--ig-elevation-small); +} + +/* END_OUTPUT */ +/* EXPECTED */ +.test-output { + box-shadow: var(--ig-elevation-small); +} + +/* END_EXPECTED */ +/* END_ASSERT */ +/* */ +/* */ +/* # Module: BEM */ +/* ------------- */ +/* Test: creates block__element classes */ +/* ASSERT: */ +/* OUTPUT */ +.block { + background: black; +} +.block__element { + color: orange; +} + +/* END_OUTPUT */ +/* EXPECTED */ +.block { + background: black; +} + +.block__element { + color: orange; +} + +/* END_EXPECTED */ +/* END_ASSERT */ +/* */ +/* Test: creates block--modifier classes using the modifier mixins */ +/* ASSERT: */ +/* OUTPUT */ +.block { + background: black; +} +.block--error { + background: red; +} + +.block--error.block--selected { + background: darkred; +} + +/* END_OUTPUT */ +/* EXPECTED */ +.block { + background: black; +} + +.block--error { + background: red; +} + +.block--error.block--selected { + background: darkred; +} + +/* END_EXPECTED */ +/* END_ASSERT */ +/* */ +/* Test: creates block__element--modifier classes using the element mixin */ +/* ASSERT: */ +/* OUTPUT */ +.block { + background: black; +} +.block__element--small { + font-size: 12px; +} + +.block__element--medium { + font-size: 14px; +} + +.block__element--large { + font-size: 16px; +} + +/* END_OUTPUT */ +/* EXPECTED */ +.block { + background: black; +} + +.block__element--small { + font-size: 12px; +} + +.block__element--medium { + font-size: 14px; +} + +.block__element--large { + font-size: 16px; +} + +/* END_EXPECTED */ +/* END_ASSERT */ +/* */ +/* Test: creates negating block__element--modifier classes */ +/* ASSERT: */ +/* OUTPUT */ +.block__element--small:not(.block__element--circle) { + background: blue; +} + +/* END_OUTPUT */ +/* EXPECTED */ +.block__element--small:not(.block__element--circle) { + background: blue; +} + +/* END_EXPECTED */ +/* END_ASSERT */ +/* */ +/* Test: creates multiple element modifier classes using the element mixin */ +/* ASSERT: */ +/* OUTPUT */ +.block { + background: black; +} +.block__element--small.block__element--pink { + color: pink; + font-size: 12px; +} + +/* END_OUTPUT */ +/* EXPECTED */ +.block { + background: black; +} + +.block__element--small.block__element--pink { + color: pink; + font-size: 12px; +} + +/* END_EXPECTED */ +/* END_ASSERT */ +/* */ +/* Test: creates multiple negating element modifier classes */ +/* ASSERT: */ +/* OUTPUT */ +.block__element--small.block__element--pink:not(.block__element--circle, .block__element--large) { + color: pink; + font-size: 12px; +} + +/* END_OUTPUT */ +/* EXPECTED */ +.block__element--small.block__element--pink:not(.block__element--circle, .block__element--large) { + color: pink; + font-size: 12px; +} + +/* END_EXPECTED */ +/* END_ASSERT */ +/* */ +/* Test: overwrites element styles in a modified block */ +/* ASSERT: */ +/* OUTPUT */ +.block { + background: black; +} +.block__element { + color: wheat; +} + +.block--error { + background: red; +} +.block--error .block__element { + color: white; +} + +/* END_OUTPUT */ +/* EXPECTED */ +.block { + background: black; +} + +.block__element { + color: wheat; +} + +.block--error { + background: red; +} + +.block--error .block__element { + color: white; +} + +/* END_EXPECTED */ +/* END_ASSERT */ +/* */ +/* Test: creates negating modifier classes using the mod and mods mixins */ +/* ASSERT: */ +/* OUTPUT */ +.block--checked:not(.block--disabled, .block--indeterminate) { + background: pink; +} + +.block--disabled:not(.block--checked) { + background: gray; +} +.block--disabled:not(.block--checked) .block__element { + color: darkgray; +} + +.block--disabled.block--checked:not(.block--indeterminate) { + background: darkgray; +} + +.block--disabled.block--checked:not(.block--indeterminate, .block--invalid) { + background: black; +} +.block--disabled.block--checked:not(.block--indeterminate, .block--invalid) .block__element { + color: red; +} + +.block--disabled.block--checked:not(.block--indeterminate, .block--invalid) .block__element--orange { + color: orange; +} + +.block--disabled.block--checked:not(.block--indeterminate, .block--invalid) .block__element--rebecca.block__element--purple { + color: rebeccapurple; +} + +/* END_OUTPUT */ +/* EXPECTED */ +.block--checked:not(.block--disabled, .block--indeterminate) { + background: pink; +} + +.block--disabled:not(.block--checked) { + background: gray; +} + +.block--disabled:not(.block--checked) .block__element { + color: darkgray; +} + +.block--disabled.block--checked:not(.block--indeterminate) { + background: darkgray; +} + +.block--disabled.block--checked:not(.block--indeterminate, .block--invalid) { + background: black; +} + +.block--disabled.block--checked:not(.block--indeterminate, .block--invalid) .block__element { + color: red; +} + +.block--disabled.block--checked:not(.block--indeterminate, .block--invalid) .block__element--orange { + color: orange; +} + +.block--disabled.block--checked:not(.block--indeterminate, .block--invalid) .block__element--rebecca.block__element--purple { + color: rebeccapurple; +} + +/* END_EXPECTED */ +/* END_ASSERT */ +/* */ +/* Test: creates element selector inside an attribute selector context */ +/* ASSERT: */ +/* OUTPUT */ +.block[aria-selected=false] .block__element { + display: none; +} + +/* END_OUTPUT */ +/* EXPECTED */ +.block[aria-selected=false] .block__element { + display: none; +} + +/* END_EXPECTED */ +/* END_ASSERT */ +/* */ +/* Test: creates element--modifier selector inside an attribute selector context */ +/* ASSERT: */ +/* OUTPUT */ +.block[aria-selected=false] .block__element--active { + display: block; +} + +/* END_OUTPUT */ +/* EXPECTED */ +.block[aria-selected=false] .block__element--active { + display: block; +} + +/* END_EXPECTED */ +/* END_ASSERT */ +/* */ +/* Test: creates multiple element modifier selectors inside an attribute selector context */ +/* ASSERT: */ +/* OUTPUT */ +.block[aria-selected=false] .block__element--small.block__element--pink { + font-size: 12px; +} + +/* END_OUTPUT */ +/* EXPECTED */ +.block[aria-selected=false] .block__element--small.block__element--pink { + font-size: 12px; +} + +/* END_EXPECTED */ +/* END_ASSERT */ +/* */ +/* Test: creates element selector inside a descendant attribute selector context */ +/* ASSERT: */ +/* OUTPUT */ +.block [aria-selected=true] .block__element { + display: block; +} + +.block [aria-selected=false] .block__element { + display: none; +} + +/* END_OUTPUT */ +/* EXPECTED */ +.block [aria-selected=true] .block__element { + display: block; +} + +.block [aria-selected=false] .block__element { + display: none; +} + +/* END_EXPECTED */ +/* END_ASSERT */ +/* */ +/* Test: should be able to use element classes in modifier body rules */ +/* ASSERT: */ +/* OUTPUT */ +.block__element--circle { + border-radius: 50%; +} + +.block--checked:has(.block__element--circle) { + background: pink; +} + +/* END_OUTPUT */ +/* EXPECTED */ +.block__element--circle { + border-radius: 50%; +} + +.block--checked:has(.block__element--circle) { + background: pink; +} + +/* END_EXPECTED */ +/* END_ASSERT */ +/* */ +/* */ diff --git a/packages/theming/.scripts/previewShades.mjs b/packages/theming/.scripts/previewShades.mjs new file mode 100644 index 00000000..a9c31097 --- /dev/null +++ b/packages/theming/.scripts/previewShades.mjs @@ -0,0 +1,274 @@ +/** + * Renders a side-by-side comparison of the two shade generators as a standalone HTML + * page. Every value in it comes from compiling the library, not from a fixture. + * + * node .scripts/previewShades.mjs [--out=dist/shades.html] [--seeds=#09f,#f0f] + */ +import { mkdirSync } from "node:fs"; +import { writeFile } from "node:fs/promises"; +import path from "node:path"; +import { fileURLToPath } from "node:url"; +import * as sass from "sass"; +import getArgs from "./getArgs.mjs"; + +const __dirname = path.dirname(fileURLToPath(import.meta.url)); +const ROOT = path.resolve(__dirname, ".."); + +const DEFAULT_SEEDS = [ + ["Framework primary", "#0099ff"], + ["Framework secondary", "#df1b74"], + ["Warn", "#faa419"], + ["Success", "#4eb862"], + ["Near-white seed", "#ffe9b0"], + ["Near-black seed", "#141225"], + ["Neon", "#00ff00"], + ["Washed out", "#a99bb0"], + ["Pure gray", "#8a8a8a"], +]; + +const SURFACES = [ + ["Pure white", "#ffffff"], + ["Off-white", "#f8f8fa"], + ["Dark", "#1a1a24"], + ["Pure black", "#000000"], +]; + +const LADDERS = ["even", "material", "tailwind", "carbon"]; + +const SHADES = [ + "50", + "100", + "200", + "300", + "400", + "500", + "600", + "700", + "800", + "900", +]; +const ACCENTS = ["A100", "A200", "A400", "A700"]; +const ALL = [...SHADES, ...ACCENTS]; + +const { out = "dist/shades.html", seeds } = getArgs(); +const list = seeds + ? seeds.split(",").map((s) => [s.trim(), s.trim()]) + : DEFAULT_SEEDS; + +const warnings = []; + +function compile(body) { + const css = sass.compileString( + `@use 'sass:map';\n@use 'sass/color' as *;\n${body}`, + { + loadPaths: [ROOT], + logger: { warn: (msg) => warnings.push(msg.split(" —")[0]) }, + }, + ).css; + const data = {}; + for (const line of css.split("\n")) { + const m = line.match(/^\s*([A-Za-z0-9-]+):\s*(.+);\s*$/); + if (m) data[m[1]] = m[2].trim(); + } + return data; +} + +const family = (seed, name, generator, surface = "#fff", keys = ALL) => { + const gen = generator ? `, $generator: '${generator}'` : ""; + return compile(` + $p: palette($primary: ${seed}, $secondary: ${seed}, $surface: ${surface}, $gray: #333${gen}); + $s: map.get($p, '${name}'); + out { + lands-on: ${generator ? "'n/a'" : `seed-lands-on($p, '${name}')`}; + ${keys.map((v) => `s-${v}: #{map.get($s, '${v}-raw')};`).join("\n")} + }`); +}; + +const rows = list.map(([label, seed]) => ({ + label, + seed, + fitted: family(seed, "primary", null), + legacy: family(seed, "primary", "legacy"), +})); + +const flavors = LADDERS.map((name) => ({ + name, + gray: compile(` + $p: palette($primary: #09f, $secondary: #09f, $surface: #fff, $gray: #333, $ladders: ('gray': '${name}')); + $s: map.get($p, 'gray'); + out { ${SHADES.map((v) => `s-${v}: #{map.get($s, '${v}-raw')};`).join("\n")} }`), +})); + +const neutrals = SURFACES.map(([label, bg]) => ({ + label, + bg, + gray: family("#09f", "gray", null, bg, SHADES), + grayLegacy: family("#09f", "gray", "legacy", bg, SHADES), + surface: family("#09f", "surface", null, bg, SHADES), + surfaceLegacy: family("#09f", "surface", "legacy", bg, SHADES), +})); + +const sw = (hex, key) => + `
${key}
`; +const ramp = (data, keys, id) => + `
${keys.map((k) => sw(data[`s-${k}`], k)).join("")}
`; + +const pair = (title, a, keys, id, note = "") => ` +
+

${title}

+ ${ramp(a, keys, id)} + ${note ? `

${note}

` : ""} +
`; + +const seedSection = (r) => ` +
+

${r.label}

${r.seed} + lands on ${(r.fitted["lands-on"] || "").replace(/["']/g, "")}
+
+ ${pair("gamut-relative", r.fitted, SHADES, `f${r.seed}`)} + ${pair("legacy", r.legacy, SHADES, `l${r.seed}`)} +
+
+

accent track

${ramp(r.fitted, ACCENTS)}
+

legacy accents

${ramp(r.legacy, ACCENTS)}
+
+
`; + +const neutralSection = (n) => ` +
+

${n.label} surface

${n.bg}
+
+ ${pair( + "gray · gamut-relative", + n.gray, + SHADES, + `g${n.bg}`, + "anchored to the surface, so 50 always sits nearest the background", + )} + ${pair("gray · legacy", n.grayLegacy, SHADES, `gl${n.bg}`)} +
+
+ ${pair( + "surface · gamut-relative", + n.surface, + SHADES, + `s${n.bg}`, + "500 is the background; every other shade is a layer on it, 50 the faintest through 900 the strongest", + )} + ${pair("surface · legacy", n.surfaceLegacy, SHADES, `sl${n.bg}`)} +
+
`; + +const html = ` + +Shade generators +
+

Shade generators, side by side

+

Compiled from the library. Numbers are WCAG contrast against white for color ramps, +and against the surface for the neutral and surface families. Every value is a concrete color — +the generator resolves them at build time.

+${warnings.length ? `
Build warnings
${[...new Set(warnings)].join("
")}
` : ""} + +

Color ramps

+${rows.map(seedSection).join("")} + +

Ladder flavors

+

The same generator, a different rhythm. Each curve was fitted to the scale it is named +after; material reproduces this library's original grayscale, which is why it is the default +for gray. Pass one with $ladders: ('gray': 'carbon'), or hand in your own +cubic-bezier control points.

+
+ ${flavors + .map( + (f) => ` +
+

${f.name}

+ ${ramp(f.gray, SHADES, `ladder-${f.name}`)} +
`, + ) + .join("")} +
+ +

Neutral and surface families

+${neutrals.map(neutralSection).join("")} + +
Generated by .scripts/previewShades.mjs. The palettes bundled with the library +stay on the legacy generator, so shipped themes are unchanged.
+
+`; + +const dest = path.resolve(ROOT, out); +mkdirSync(path.dirname(dest), { recursive: true }); +await writeFile(dest, html, "utf8"); +console.log( + `wrote ${path.relative(ROOT, dest)} (${rows.length} seeds, ${neutrals.length} surfaces)`, +); diff --git a/packages/theming/package.json b/packages/theming/package.json index ee998f8f..cdd437a4 100644 --- a/packages/theming/package.json +++ b/packages/theming/package.json @@ -33,7 +33,8 @@ "prepack": "shx cp ../../README.md README.md && shx cp ../../LICENSE LICENSE", "postpack": "shx rm -f README.md LICENSE", "prepare": "node .scripts/setup-grammars.mjs", - "test": "vitest run" + "test": "vitest run", + "preview:shades": "node .scripts/previewShades.mjs --out=dist/shades.html" }, "lint-staged": { "*.{js,ts,cjs,mjs,jsx,tsx}": [ diff --git a/packages/theming/sass/color/_config.scss b/packages/theming/sass/color/_config.scss new file mode 100644 index 00000000..e74d143f --- /dev/null +++ b/packages/theming/sass/color/_config.scss @@ -0,0 +1,189 @@ +//// +/// @package theming +/// @group Palettes +//// + +/// The shade generator used by `palette()` and `shades()` when none is passed explicitly. +/// +/// - `'gamut-relative'` — lightness is solved from a contrast target, chroma is a fraction +/// of what the sRGB gamut allows at that lightness and hue. Works for any seed color. +/// - `'legacy'` — the original fixed saturation/lightness multiplier tables. Kept for +/// backward compatibility; the palettes shipped with this library use it. +/// +/// @type String +/// @access public +/// @example scss - Opt the whole build back to the original algorithm +/// @use 'igniteui-theming' with ($shade-generator: 'legacy'); +$shade-generator: 'gamut-relative' !default; + +/// Families generated as a background rather than as a ramp. +/// +/// Their seed stays exactly on shade 500 — component schemas read +/// `color($palette, 'surface', 500)` expecting the background itself — and the remaining +/// shades are layering steps either side of it. +/// @type List +/// @access public +$surface-families: ('surface') !default; + +/// Families generated as a near-neutral, anchored to the surface rather than to white, +/// and flipped when the surface is dark. +/// @type List +/// @access public +$neutral-families: ('gray') !default; + +// --- the contrast ladder ---------------------------------------------------- + +/// Spacing between adjacent rungs of the default contrast ladder, as a natural-log step. +/// `ln(4.5) / 5` is what makes any two shades 500 apart clear WCAG AA; the extra +/// thousandth is a rounding buffer. +/// @type Number +/// @access public +$contrast-step: 0.304 !default; + +/// Shifts the default ladder. 0.55 puts shade 50 at a 1.18:1 tint and shade 900 at 18.3:1. +/// @type Number +/// @access public +$contrast-offset: 0.55 !default; + +/// Ready-made ladder flavors. +/// +/// A ladder is `(range: (lowest, highest), curve: (x1, y1, x2, y2))` — the contrast the +/// scale spans, and how the rungs are distributed across it. The curve is a cubic Bézier +/// read exactly like a CSS `cubic-bezier()` timing function: `even` is the straight line, +/// and the others bunch the light steps together the way real design systems do. +/// +/// Each was fitted to the published scale it is named after; the numbers in brackets are +/// how closely it reproduces that scale, and how many of the five "500 apart" pairs still +/// clear WCAG AA. +/// +/// - `even` — straight. All five pairs clear AA. The right default for color ramps. +/// - `material` — this library's original grayscale [ΔE 0.025, 3/5 AA]. Use it to keep +/// existing component schemas looking exactly as they do today. +/// - `tailwind` — Tailwind v4's neutral rhythm [ΔE 0.013, 5/5 AA]. +/// - `carbon` — IBM Carbon's gray 10–100 [ΔE 0.007, 5/5 AA]. +/// - `layers` — the shallow ladder used by surface families. +/// +/// @type Map +/// @access public +/// @example scss - Pick a flavor per family +/// $palette: palette($primary: #09f, $secondary: #f0f, $surface: #fff, $ladders: ('gray': 'carbon')); +/// @example scss - Or pass a curve directly +/// $shades: shades('brand', #09f, $IColorShades, $ladder: (0.53, 0, 0.825, 0.785)); +$ladders: ( + 'even': ( + range: null, + curve: null, + ), + 'material': ( + range: ( + 1.04, + 16.1, + ), + curve: ( + 0.53, + 0, + 0.825, + 0.785, + ), + ), + 'tailwind': ( + range: ( + 1.04, + 17.76, + ), + curve: ( + 0.615, + 0.07, + 0.225, + 0.43, + ), + ), + 'carbon': ( + range: ( + 1.1, + 18.1, + ), + curve: ( + 0.525, + 0.295, + 0.655, + 0.87, + ), + ), + 'layers': ( + range: ( + 1.02, + 2.5, + ), + curve: null, + ), +) !default; + +/// Which ladder each family uses when the caller does not say. Families not listed use +/// `even`; surface families use `layers`. +/// @type Map +/// @access public +/// @example scss - Evenly spaced grays instead of the legacy rhythm +/// @use 'igniteui-theming' with ($family-ladders: ()); +$family-ladders: ( + 'gray': 'material', +) !default; + +/// How far the strongest surface shade sits from the background, as a contrast ratio. +/// Surface shades are layering steps, so they stay shallow: 2.5 matches the darkest +/// surface shade the original generator produced. Capped by the room actually available. +/// @type Number +/// @access public +$surface-reach: 2.5 !default; + +/// Contrast targets for the accent (A) shades. Same ladder, but these ride the gamut hull. +/// @type Map +/// @access public +$accent-targets: ( + 'A100': 1.4, + 'A200': 2.6, + 'A400': 4.2, + 'A700': 6.2, +) !default; + +// --- chroma ----------------------------------------------------------------- + +/// Below this chroma a seed carries no usable hue — its hue is a rounding artifact — +/// so the family is generated as a true neutral. +/// @type Number +/// @access public +$neutral-threshold: 0.02 !default; + +/// Lower bound on the seed's saturation level, so a very muted brand color still +/// produces a ramp with enough color in it to build a UI from. +/// @type Number +/// @access public +$saturation-floor: 0.3 !default; + +/// Upper bound on the saturation level of neutral and surface families, so a tinted +/// gray stays a gray. +/// @type Number +/// @access public +$neutral-tint-cap: 0.12 !default; + +/// How much chroma is pulled back at the two ends of the ramp, so 50 reads as a tint +/// and 900 as a near-neutral. +/// @type Number +/// @access public +$envelope-depth: 0.3 !default; + +/// Shape of that taper. Higher keeps more of the ramp at full strength. +/// @type Number +/// @access public +$envelope-power: 2.5 !default; + +/// Chroma ceiling softness for the numbered track. 4 sits comfortably inside the +/// sRGB boundary, leaving headroom so shades survive gamut mapping unchanged. +/// @type Number +/// @access public +$ceiling-softness: 4 !default; + +/// Chroma ceiling softness for the accent track. 8 tracks the real boundary closely. +/// @type Number +/// @access public +$accent-ceiling-softness: 8 !default; diff --git a/packages/theming/sass/color/_contrast.scss b/packages/theming/sass/color/_contrast.scss new file mode 100644 index 00000000..d6b42fa6 --- /dev/null +++ b/packages/theming/sass/color/_contrast.scss @@ -0,0 +1,65 @@ +@use 'sass:math'; +@use 'sass:meta'; +@use 'sass:color'; +@use '../utils/math' as *; + +//// +/// WCAG relative luminance and contrast ratio. +/// Extracted from `functions` so the shade generators can use them without a cycle; +/// both are still exported from the `color` module exactly as before. +/// @package theming +//// + +/// Calculates the linear channel value for a given sRGB color. +/// @access private +/// @group Color +/// @param {Number} $value - The sRGB color +/// @returns {Number} The calculated linear channel value +@function _lcv($value) { + // stylelint-disable number-max-precision + @return if($value < 0.03928, math.div($value, 12.92), math.pow(math.div($value + 0.055, 1.055), 2.4)); +} + +/// Calculates the luminance for a given color. +/// @access public +/// @group Color +/// @param {Color} $color - The color to calculate luminance for. +/// +/// @example scss +/// $white: luminance(#fff); // 1 +/// $blue: luminance(#09f); // 0.3 +/// $black: luminance(#000); // 0 +/// +/// @returns {Number | String} The calculated luminance of a given color +/// @link https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests. WCAG 2.0 Contrast Ratio +@function luminance($color) { + @if meta.type-of($color) == 'color' { + $r: math.div(color.channel($color, 'red', $space: rgb), 255); + $g: math.div(color.channel($color, 'green', $space: rgb), 255); + $b: math.div(color.channel($color, 'blue', $space: rgb), 255); + + @return 0.2126 * _lcv($r) + 0.7152 * _lcv($g) + 0.0722 * _lcv($b); + } + + @return $color; +} + +/// Calculates the contrast ratio between two colors. +/// @access public +/// @group Color +/// @param {Color} $background - The background color. +/// @param {Color} $foreground - The foreground color. +/// +/// @example scss +/// $conrast: contrast(#09f, #000); // 7 +/// +/// @returns {Number} The contrast ratio between the background and foreground colors. +/// @require {function} luminance +/// @require {function} to-fixed +/// @link https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests WCAG 2.0 Contrast Ratio +@function contrast($background, $foreground) { + $backLum: luminance($background) + 0.05; + $foreLum: luminance($foreground) + 0.05; + + @return to-fixed(math.div(math.max($backLum, $foreLum), math.min($backLum, $foreLum))); +} diff --git a/packages/theming/sass/color/_functions.scss b/packages/theming/sass/color/_functions.scss index 2629106d..f08c98a5 100644 --- a/packages/theming/sass/color/_functions.scss +++ b/packages/theming/sass/color/_functions.scss @@ -5,9 +5,13 @@ @use 'sass:color'; @use 'sass:string'; @use 'charts'; +@use 'config'; +@use 'generator'; @use 'multipliers'; @use 'types'; +@use 'contrast' as *; @use '../utils/math' as *; +@forward 'contrast'; //// /// @package theming @@ -63,18 +67,55 @@ $_enhanced-accessibility: false; $success: #4eb862, $warn: #faa419, $error: #ff134a, - $variant: null + $variant: null, + $generator: null, + $ladders: null ) { $color-shades: types.$IColorShades; $gray-shades: types.$IGrayShades; - $primary-palette: shades('primary', $primary, $color-shades); - $secondary-palette: shades('secondary', $secondary, $color-shades); - $surface-palette: shades('surface', $surface, $color-shades); - $grayscale-palette: shades('gray', $gray, $gray-shades, $surface); - $info-palette: if($info, shades('info', $info, $color-shades), ()); - $success-palette: if($success, shades('success', $success, $color-shades), ()); - $warn-palette: if($warn, shades('warn', $warn, $color-shades), ()); - $error-palette: if($error, shades('error', $error, $color-shades), ()); + $g: $generator; + $primary-palette: shades( + 'primary', + $primary, + $color-shades, + $generator: $g, + $ladder: _ladder-for('primary', $ladders) + ); + $secondary-palette: shades( + 'secondary', + $secondary, + $color-shades, + $generator: $g, + $ladder: _ladder-for('secondary', $ladders) + ); + $surface-palette: shades( + 'surface', + $surface, + $color-shades, + $generator: $g, + $ladder: _ladder-for('surface', $ladders) + ); + $grayscale-palette: shades('gray', $gray, $gray-shades, $surface, $g, _ladder-for('gray', $ladders)); + $info-palette: if( + $info, + shades('info', $info, $color-shades, $generator: $g, $ladder: _ladder-for('info', $ladders)), + () + ); + $success-palette: if( + $success, + shades('success', $success, $color-shades, $generator: $g, $ladder: _ladder-for('success', $ladders)), + () + ); + $warn-palette: if( + $warn, + shades('warn', $warn, $color-shades, $generator: $g, $ladder: _ladder-for('warn', $ladders)), + () + ); + $error-palette: if( + $error, + shades('error', $error, $color-shades, $generator: $g, $ladder: _ladder-for('error', $ladders)), + () + ); @return ( 'primary': $primary-palette, @@ -91,6 +132,21 @@ $_enhanced-accessibility: false; ); } +/// Picks one family's ladder out of the `$ladders` argument, which may be a single spec +/// for every family or a map keyed by family name. +/// @access private +@function _ladder-for($name, $ladders) { + @if not $ladders { + @return null; + } + + @if meta.type-of($ladders) == 'map' and not map.has-key($ladders, range) and not map.has-key($ladders, curve) { + @return map.get($ladders, $name); + } + + @return $ladders; +} + /// Generates color shades for a given color. /// @access public /// @group Palettes @@ -111,19 +167,33 @@ $_enhanced-accessibility: false; /// ) /// ); /// @see $IColorShades -@function shades($name, $color, $shades, $surface: null) { +@function shades($name, $color, $shades, $surface: null, $generator: null, $ladder: null) { + $gen: if($generator, $generator, config.$shade-generator); $result: (); - @each $variant in $shades { - $shade: shade($name, $color, $variant, $surface); - $result: map.merge( - $result, - ( - $variant: map.get($shade, 'hsl'), - '#{$variant}-contrast': adaptive-contrast(#{var(--ig-#{$name}-#{$variant})}), - '#{$variant}-raw': map.get($shade, 'raw'), - ) - ); + @if $gen == 'legacy' { + @each $variant in $shades { + $shade: shade($name, $color, $variant, $surface); + $result: map.merge( + $result, + ( + $variant: map.get($shade, 'hsl'), + '#{$variant}-contrast': adaptive-contrast(#{var(--ig-#{$name}-#{$variant})}), + '#{$variant}-raw': map.get($shade, 'raw'), + ) + ); + } + } @else { + @each $variant, $shade in generator.family($name, $color, $shades, $surface, $ladder) { + $result: map.merge( + $result, + ( + $variant: map.get($shade, 'css'), + '#{$variant}-contrast': adaptive-contrast(#{var(--ig-#{$name}-#{$variant})}), + '#{$variant}-raw': map.get($shade, 'raw'), + ) + ); + } } @return $result; @@ -403,60 +473,6 @@ $_enhanced-accessibility: false; ); } -/// Calculates the contrast ratio between two colors. -/// @access public -/// @group Color -/// @param {Color} $background - The background color. -/// @param {Color} $foreground - The foreground color. -/// -/// @example scss -/// $conrast: contrast(#09f, #000); // 7 -/// -/// @returns {Number} The contrast ratio between the background and foreground colors. -/// @require {function} luminance -/// @require {function} to-fixed -/// @link https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests WCAG 2.0 Contrast Ratio -@function contrast($background, $foreground) { - $backLum: luminance($background) + 0.05; - $foreLum: luminance($foreground) + 0.05; - - @return to-fixed(math.div(math.max($backLum, $foreLum), math.min($backLum, $foreLum))); -} - -/// Calculates the luminance for a given color. -/// @access public -/// @group Color -/// @param {Color} $color - The color to calculate luminance for. -/// -/// @example scss -/// $white: luminance(#fff); // 1 -/// $blue: luminance(#09f); // 0.3 -/// $black: luminance(#000); // 0 -/// -/// @returns {Number | String} The calculated luminance of a given color -/// @link https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests. WCAG 2.0 Contrast Ratio -@function luminance($color) { - @if meta.type-of($color) == 'color' { - $r: math.div(color.channel($color, 'red', $space: rgb), 255); - $g: math.div(color.channel($color, 'green', $space: rgb), 255); - $b: math.div(color.channel($color, 'blue', $space: rgb), 255); - - @return 0.2126 * _lcv($r) + 0.7152 * _lcv($g) + 0.0722 * _lcv($b); - } - - @return $color; -} - -/// Calculates the linear channel value for a given sRGB color. -/// @access private -/// @group Color -/// @param {Number} $value - The sRGB color -/// @returns {Number} The calculated linear channel value -@function _lcv($value) { - // stylelint-disable number-max-precision - @return if($value < 0.03928, math.div($value, 12.92), math.pow(math.div($value + 0.055, 1.055), 2.4)); -} - /// Returns a list of colors to be used as chart brushes. The return value depends on the value of enhanced-accessibility. /// @access public /// @group Palettes diff --git a/packages/theming/sass/color/_gamut.scss b/packages/theming/sass/color/_gamut.scss new file mode 100644 index 00000000..29102a5d --- /dev/null +++ b/packages/theming/sass/color/_gamut.scss @@ -0,0 +1,162 @@ +@use 'sass:color'; +@use 'sass:map'; +@use 'sass:math'; +@use 'sass:list'; + +//// +/// sRGB gamut geometry in OKLCH. +/// +/// Every hue has a hard limit on how colorful it can get, and that limit changes with +/// lightness. Plotted, it makes a tent: chroma rises from 0 at black, peaks at the +/// hue's "cusp", and falls back to 0 at white. These functions find that tent and +/// report its height at any lightness. +/// +/// @package theming +/// @group Palettes +/// @access private +//// + +/// Reads a color's OKLCH channels as plain numbers. +/// +/// `color.channel()` returns units — lightness as `70.8%`, hue as `314.6deg`. Feeding +/// those straight into arithmetic silently yields a hundred-times-too-large lightness +/// and range comparisons that never match, and it compiles without error. +/// @access private +/// @param {Color} $c - The color to read. +/// @returns {Map} A map with unitless `l`, `c` and `h` keys. +@function read($c) { + $ok: color.to-space($c, oklch); + $h: color.channel($ok, 'hue', $space: oklch); + + @return ( + l: math.div(color.channel($ok, 'lightness', $space: oklch), 100%), + c: color.channel($ok, 'chroma', $space: oklch), + h: if($h == 0, 0, math.div($h, 1deg)) + ); +} + +/// Builds an OKLCH color from unitless components. +/// @access private +@function make($l, $c, $h) { + @return color.change(oklch(0.5 0 0), $lightness: $l, $chroma: $c, $hue: $h); +} + +/// Whether the screen can show this color. +/// @access private +@function in-srgb($l, $c, $h) { + @return color.is-in-gamut(make($l, $c, $h), srgb); +} + +/// The tent's height at one lightness: the most chroma sRGB can hold there. +/// +/// Found by bisection — guess the middle of the remaining range, keep the half that +/// still contains the answer, repeat. 18 rounds narrows 0.45 to about 0.0000017. +/// @access private +/// @param {Number} $l - Lightness, 0 to 1. +/// @param {Number} $h - Hue, in degrees. +/// @returns {Number} The maximum in-gamut chroma. +@function max-chroma($l, $h) { + $lo: 0; + $hi: 0.45; + $i: 0; + + @while $i < 18 { + $mid: math.div($lo + $hi, 2); + + @if in-srgb($l, $mid, $h) { + $lo: $mid; + } @else { + $hi: $mid; + } + + $i: $i + 1; + } + + @return $lo; +} + +/// The peak of the tent for a hue. +/// +/// `max-chroma` rises then falls as lightness climbs, so a ternary search finds the +/// peak in far fewer probes than a scan: repeatedly discard whichever third of the +/// range cannot contain it. +/// @access private +/// @param {Number} $h - Hue, in degrees. +/// @returns {Map} `l` and `c` of the peak. +@function cusp($h) { + $lo: 0.02; + $hi: 0.995; + $i: 0; + + @while $i < 26 { + $a: $lo + math.div($hi - $lo, 3); + $b: $hi - math.div($hi - $lo, 3); + + @if max-chroma($a, $h) < max-chroma($b, $h) { + $lo: $a; + } @else { + $hi: $b; + } + + $i: $i + 1; + } + + $l: math.div($lo + $hi, 2); + + @return (l: $l, c: max-chroma($l, $h)); +} + +/// The peak expressed as the two slopes of a tent. +/// +/// Storing it this way turns "how much chroma is available at lightness L" into a +/// single multiply on each side. Compute this once per color family — every shade in +/// a family shares a hue, so they share a tent. +/// @access private +/// @param {Number} $h - Hue, in degrees. +/// @returns {List} `(rising-slope, falling-slope)`. +@function tent($h) { + $k: cusp($h); + $lc: map.get($k, 'l'); + $cc: map.get($k, 'c'); + + @return (math.div($cc, $lc), math.div($cc, 1 - $lc)); +} + +/// A `min()` that curves instead of forming a sharp point. +/// +/// The tent's height is whichever slope is lower, but a hard `min()` leaves a corner, +/// and a corner shows up in the ramp as one shade noticeably more colorful than its +/// neighbours. `$p` controls how tight the corner is: higher hugs the real boundary. +/// @access private +@function soft-min($a, $b, $p) { + @if $a <= 0 or $b <= 0 { + @return 0; + } + + @return math.pow(math.div(1, math.div(1, math.pow($a, $p)) + math.div(1, math.pow($b, $p))), math.div(1, $p)); +} + +/// Converts a color to sRGB with integer channels. +/// +/// Matches what the browser will actually paint, and keeps generated token files free +/// of ten-decimal channel values. +/// @access private +@function to-srgb($c) { + $rgb: color.to-space($c, rgb); + + @return rgb( + math.round(color.channel($rgb, 'red', $space: rgb)), + math.round(color.channel($rgb, 'green', $space: rgb)), + math.round(color.channel($rgb, 'blue', $space: rgb)) + ); +} + +/// How much chroma the ramp is allowed to use at a given lightness. +/// @access private +/// @param {Number} $l - Lightness, 0 to 1. +/// @param {List} $tent - The family's tent, from `tent()`. +/// @param {Number} $p - Ceiling softness. +/// @returns {Number} The chroma ceiling. +@function ceiling($l, $tent, $p) { + @return soft-min($l * list.nth($tent, 1), (1 - $l) * list.nth($tent, 2), $p); +} diff --git a/packages/theming/sass/color/_generator.scss b/packages/theming/sass/color/_generator.scss new file mode 100644 index 00000000..ddb4a53f --- /dev/null +++ b/packages/theming/sass/color/_generator.scss @@ -0,0 +1,394 @@ +@use 'sass:color'; +@use 'sass:map'; +@use 'sass:math'; +@use 'sass:list'; +@use 'sass:string'; +@use 'sass:meta'; +@use 'config'; +@use 'gamut'; +@use 'contrast' as *; + +//// +/// The gamut-relative shade generator. +/// +/// Lightness comes from a contrast target, not from the seed. Chroma is a fraction of +/// what the sRGB gamut allows at that lightness and hue, not a multiple of the seed's. +/// The seed contributes its hue and its saturation *level* — how much of the available +/// color it chooses to use — so any seed, however light, dark, muted or neon, produces +/// a ramp with the same structure. +/// +/// Three kinds of family: +/// +/// - **chromatic** — primary, secondary, info, success, warn, error. Anchored to white. +/// Identical in light and dark themes; schemas pick which shade to use. +/// - **neutral** — gray. Anchored to the surface, so shade 50 always sits nearest the +/// background and 900 furthest from it, in both themes. +/// - **surface** — the background itself. Shade 500 *is* the seed; the rest are layering +/// steps either side of it. +/// +/// @package theming +/// @group Palettes +/// @access private +//// + +// --- the ladder ------------------------------------------------------------- + +/// A cubic Bézier evaluated on one axis, with the first and last control points +/// pinned at 0 and 1 — the same construction as a CSS `cubic-bezier()`. +/// @access private +@function _bezier($t, $p1, $p2) { + @return 3 * math.pow(1 - $t, 2) * $t * $p1 + 3 * (1 - $t) * $t * $t * $p2 + math.pow($t, 3); +} + +/// Inverts the x axis of that curve, so the caller can ask "at progress `$x`, how far +/// along is y?" — exactly what an animation timing function does. +/// @access private +@function _ease($x, $curve) { + @if not $curve { + @return $x; + } + + $lo: 0; + $hi: 1; + $i: 0; + + @while $i < 24 { + $mid: math.div($lo + $hi, 2); + + @if _bezier($mid, list.nth($curve, 1), list.nth($curve, 3)) < $x { + $lo: $mid; + } @else { + $hi: $mid; + } + + $i: $i + 1; + } + + @return _bezier(math.div($lo + $hi, 2), list.nth($curve, 2), list.nth($curve, 4)); +} + +/// Resolves a ladder argument into `(range, curve)`. +/// +/// Accepts a preset name from `$ladders`, a `(range:, curve:)` map, a bare +/// `(x1, y1, x2, y2)` curve, or null for the family's default. +/// @access private +@function _ladder($name, $given) { + $spec: $given; + + @if not $spec { + $spec: map.get(config.$family-ladders, $name); + + @if not $spec { + $spec: if(list.index(config.$surface-families, $name), 'layers', 'even'); + } + } + + @if meta.type-of($spec) == 'string' { + $found: map.get(config.$ladders, $spec); + + @if not $found { + @error 'Unknown ladder "#{$spec}". Available: #{map.keys(config.$ladders)}.'; + } + + @return $found; + } + + @if meta.type-of($spec) == 'list' and list.length($spec) == 4 { + @return (range: null, curve: $spec); + } + + @return (range: map.get($spec, range), curve: map.get($spec, curve)); +} + +/// The contrast target for rung `$i` of a ladder. +/// +/// The endpoints and the distribution between them are both configurable, so a scale can +/// be given a different *flavor* — the same math, a different rhythm — without touching +/// the generator. An even distribution is what makes the contrast between any two shades +/// depend only on how many rungs apart they are. +/// @access private +@function _target($ladder, $i, $n, $reach: null) { + $range: map.get($ladder, range); + $lo: if($range, list.nth($range, 1), math.pow(math.$e, config.$contrast-step * config.$contrast-offset)); + $hi: if($range, list.nth($range, 2), math.pow(math.$e, config.$contrast-step * ($n - 1 + config.$contrast-offset))); + + @if $reach { + $hi: math.min($hi, $reach); + } + + $t: _ease(math.div($i, $n - 1), map.get($ladder, curve)); + + @return math.pow(math.$e, math.log($lo) + (math.log($hi) - math.log($lo)) * $t); +} + +// --- chroma ----------------------------------------------------------------- + +/// Pulls chroma back at the two ends of the ramp, so 50 reads as a tint and 900 as a +/// near-neutral instead of both sitting on the gamut boundary. +/// @access private +@function _envelope($t) { + @return 1 - config.$envelope-depth * math.pow(math.abs(2 * $t - 1), config.$envelope-power); +} + +/// OKLCH holds hue well almost everywhere. The exception is the blue-violet wedge, +/// where keeping the number constant makes light blues drift visibly toward cyan. +/// These are linear fits measured against CAM16, which gets the wedge right. +/// @access private +@function _hue-at($h, $l) { + @if $h >= 255 and $h <= 295 and $l > 0.55 { + @return $h + 33 * ($l - 0.55); + } + + @if (($h >= 235 and $h < 255) or ($h > 300 and $h <= 355)) and $l > 0.6 { + @return $h + 20 * ($l - 0.6); + } + + @return $h; +} + +// --- solving ---------------------------------------------------------------- + +/// Solves one shade: nudges lightness until the finished color's measured contrast +/// lands on its target. +/// +/// You cannot compute the lightness directly, because adding chroma adds light — a +/// colorful color is brighter than the gray of the same OKLCH lightness, so the +/// contrast solved for on a gray is wrong the moment color goes in. So: guess, measure, +/// correct. The 0.55 damping is deliberately below 1; it converges a little slower but +/// never oscillates. +/// +/// @access private +/// @param {Number} $h - The family's hue. +/// @param {List} $tent - The family's tent. +/// @param {Number} $s - The saturation level to apply, 0 to 1. +/// @param {Number} $t - Position along the ramp, 0 to 1, for the envelope. +/// @param {Number} $target - Target contrast ratio. +/// @param {Number} $anchor-y - Luminance of whatever the contrast is measured against. +/// @param {Boolean} $lighter - True when the shade must be lighter than the anchor. +/// @param {Number} $p - Chroma ceiling softness. +/// @returns {Map} The solved `color` and the contrast it actually `reached`. +@function _solve($h, $tent, $s, $t, $target, $anchor-y, $lighter, $p) { + // Contrast is monotonic in lightness, so bisect rather than nudge. A multiplicative + // step overshoots badly when the anchor is itself near an extreme — which is exactly + // the case for a surface family, where the anchor is the background. + $lo: 0.02; + $hi: 0.995; + $out: null; + $got: 1; + $i: 0; + + @while $i < 20 { + $l: math.div($lo + $hi, 2); + $c: $s * _envelope($t) * gamut.ceiling($l, $tent, $p); + $out: color.to-gamut(gamut.make($l, $c, _hue-at($h, $l)), srgb, local-minde); + $y: luminance($out); + $got: if($lighter, math.div($y + 0.05, $anchor-y + 0.05), math.div($anchor-y + 0.05, $y + 0.05)); + + @if math.abs($got - $target) < 0.005 { + @return (color: $out, reached: $got); + } + + $needs-more-light: if($lighter, $got < $target, $got > $target); + + @if $needs-more-light { + $lo: $l; + } @else { + $hi: $l; + } + + $i: $i + 1; + } + + @return (color: $out, reached: $got); +} + +/// The seed's saturation level: how much of the color available to it at its own +/// lightness it actually uses. This single number replaces the whole `s:` column of the +/// old multiplier table. +/// @access private +@function _level($read, $tent, $chromatic, $muted) { + @if not $chromatic { + @return 0; + } + + $s: math.div(map.get($read, 'c'), gamut.ceiling(map.get($read, 'l'), $tent, config.$ceiling-softness)); + + @return if($muted, math.min($s, config.$neutral-tint-cap), math.clamp(config.$saturation-floor, $s, 1)); +} + +// --- the public entry point ------------------------------------------------- + +/// Generates every shade of one color family in a single pass. +/// +/// The gamut cusp is found once here and reused for all shades — every shade in a +/// family shares a hue, so they share a tent. Recomputing it per shade is correct but +/// more than ten times slower. +/// +/// @access private +/// @param {String} $name - The family name. +/// @param {Color} $seed - The seed color. +/// @param {List} $variants - The shade variants to generate. +/// @param {Color} $surface [null] - The surface color, for neutral families. +/// @param {String | Map | List} $ladder [null] - A ladder name, spec, or bare curve. +/// @returns {Map} Each variant mapped to `(raw:, css:)`. +@function family($name, $seed, $variants, $surface: null, $ladder: null) { + $key: '#{$name}'; + $is-surface: list.index(config.$surface-families, $key) != null; + $is-neutral: list.index(config.$neutral-families, $key) != null; + $muted: $is-surface or $is-neutral; + $lad: _ladder($key, $ladder); + + @if $is-neutral and not $seed { + $seed: if(luminance($surface) > 0.5, #000, #fff); + } + + // Chromatic families are measured against white and are identical in every theme. + // Neutral families are measured against the surface, so they flip with it. Surface + // families are measured against themselves. + $anchor-y: 1; + + @if $is-neutral { + $anchor-y: luminance($surface); + } @else if $is-surface { + $anchor-y: luminance($seed); + } + + $flip: $is-neutral and $anchor-y <= 0.5; + + // A surface family only ever moves one way: into whichever side of the range has + // room. A white page has nothing lighter than itself and a black one nothing darker, + // so pretending the scale runs both ways is what produced five identical whites. + $up: false; + $reach: null; + + @if $is-surface { + $lighter: math.div(1.05, $anchor-y + 0.05); + $darker: math.div($anchor-y + 0.05, 0.05); + $up: $lighter > $darker; + $reach: math.max($lighter, $darker) * 0.98; + } + + $read: gamut.read($seed); + $sh: map.get($read, 'h'); + $chromatic: map.get($read, 'c') >= config.$neutral-threshold; + $tent: if($chromatic, gamut.tent($sh), (0.0001, 0.0001)); + $s: _level($read, $tent, $chromatic, $muted); + $result: (); + $i: 0; + $n: 0; + + @each $variant in $variants { + @if not(map.has-key(config.$accent-targets, '#{$variant}')) and '#{$variant}' != 'seed' { + $n: $n + 1; + } + } + + // Surface keeps shade 500 for the background itself, so the remaining keys share one + // rung fewer between them. + $rungs: if($is-surface, $n - 1, $n); + + @each $variant in $variants { + $v: '#{$variant}'; + + @if $v == 'seed' { + $result: map.set( + $result, + $v, + ( + raw: $seed, + css: $seed, + ) + ); + } @else if map.has-key(config.$accent-targets, $v) { + // The accent track: the same anchor, but riding the gamut hull rather than + // following the seed's restraint. + $solved: _solve( + $sh, + $tent, + if($chromatic, 1, 0), + 0.5, + map.get(config.$accent-targets, $v), + $anchor-y, + $flip, + config.$accent-ceiling-softness + ); + $result: map.set($result, $v, _entry(map.get($solved, 'color'))); + } @else if $is-surface and $v == '500' { + $result: map.set($result, $v, _entry($seed)); + } @else { + $target: if($is-surface, _target($lad, $i, $rungs, $reach), _target($lad, $i, $rungs)); + $solved: _solve( + $sh, + $tent, + $s, + math.div($i, $rungs - 1), + $target, + $anchor-y, + if($is-surface, $up, $flip), + config.$ceiling-softness + ); + $result: map.set($result, $v, _entry(map.get($solved, 'color'))); + $i: $i + 1; + } + } + + @return $result; +} + +/// Both halves of a shade. They hold the same value — the generator resolves colors at +/// build time — but the pair is what `shades()` expects, and keeping `-raw` populated +/// keeps every existing consumer working. +/// @access private +@function _entry($color) { + $srgb: gamut.to-srgb($color); + + @return (raw: $srgb, css: $srgb); +} + +/// Reports which shade a seed color lands nearest. +/// +/// Under this generator the seed informs the ramp without necessarily appearing in it. +/// Nothing depends on the answer — `--ig-{name}-seed` always holds the original — but +/// it is worth surfacing, because someone who hands you `#00ff00` will want to know it +/// landed at shade 100 rather than in the middle. +/// +/// @access public +/// @group Palettes +/// @param {Map} $palette - A generated palette. +/// @param {String} $name ['primary'] - The color family to inspect. +/// @returns {String} The variant whose lightness is closest to the seed's. +/// @example scss +/// $where: seed-lands-on($my-palette, 'primary'); // '300' +@function seed-lands-on($palette, $name: 'primary') { + $family: map.get($palette, $name); + $seed: if($family, map.get($family, 'seed'), null); + + @if not $seed { + @return null; + } + + $target: map.get(gamut.read($seed), 'l'); + $best: null; + $best-d: 99; + + @each $variant, $value in $family { + $skip: string.index($variant, 'raw') != + null or + string.index($variant, 'contrast') != + null or + $variant == + 'seed' or + map.has-key(config.$accent-targets, $variant); + + @if not $skip { + $d: math.abs(map.get(gamut.read(map.get($family, '#{$variant}-raw')), 'l') - $target); + + @if $d < $best-d { + $best-d: $d; + $best: $variant; + } + } + } + + @return $best; +} diff --git a/packages/theming/sass/color/_index.scss b/packages/theming/sass/color/_index.scss index 2dc0f8f8..f1eea95d 100644 --- a/packages/theming/sass/color/_index.scss +++ b/packages/theming/sass/color/_index.scss @@ -1,4 +1,6 @@ +@forward 'config'; @forward 'functions'; +@forward 'generator' show seed-lands-on; @forward 'mixins'; @forward 'types'; @forward 'multipliers'; diff --git a/packages/theming/sass/color/presets/dark/_bootstrap.scss b/packages/theming/sass/color/presets/dark/_bootstrap.scss index 9818c8fb..23bb24b4 100644 --- a/packages/theming/sass/color/presets/dark/_bootstrap.scss +++ b/packages/theming/sass/color/presets/dark/_bootstrap.scss @@ -27,4 +27,5 @@ $palette: palette( $warn: #ffc107, $error: #dc3545, $variant: 'bootstrap', + $generator: 'legacy', ); diff --git a/packages/theming/sass/color/presets/dark/_extra.scss b/packages/theming/sass/color/presets/dark/_extra.scss index 9438f508..6b41018a 100644 --- a/packages/theming/sass/color/presets/dark/_extra.scss +++ b/packages/theming/sass/color/presets/dark/_extra.scss @@ -25,6 +25,7 @@ $green-palette: palette( $success: #4eb862, $warn: #fbb13c, $error: #ff134a, + $generator: 'legacy', ); /// Generates the dark purple palette. @@ -46,4 +47,5 @@ $purple-palette: palette( $success: #4eb862, $warn: #fbb13c, $error: #ff134a, + $generator: 'legacy', ); diff --git a/packages/theming/sass/color/presets/dark/_fluent.scss b/packages/theming/sass/color/presets/dark/_fluent.scss index 38eb57e1..48539302 100644 --- a/packages/theming/sass/color/presets/dark/_fluent.scss +++ b/packages/theming/sass/color/presets/dark/_fluent.scss @@ -26,6 +26,7 @@ $palette: palette( $warn: #797673, $error: #a80000, $variant: 'fluent', + $generator: 'legacy', ); /// Generates the dark fluent word palette. @@ -48,6 +49,7 @@ $word-palette: palette( $warn: #797673, $error: #a80000, $variant: 'fluent', + $generator: 'legacy', ); /// Generates the dark fluent excel palette. @@ -70,4 +72,5 @@ $excel-palette: palette( $warn: #797673, $error: #a80000, $variant: 'fluent', + $generator: 'legacy', ); diff --git a/packages/theming/sass/color/presets/dark/_material.scss b/packages/theming/sass/color/presets/dark/_material.scss index c561e327..abc008c9 100644 --- a/packages/theming/sass/color/presets/dark/_material.scss +++ b/packages/theming/sass/color/presets/dark/_material.scss @@ -26,4 +26,5 @@ $palette: palette( $warn: #faa419, $error: #ff134a, $variant: 'material', + $generator: 'legacy', ); diff --git a/packages/theming/sass/color/presets/light/_bootstrap.scss b/packages/theming/sass/color/presets/light/_bootstrap.scss index 59f6c94d..1a145959 100644 --- a/packages/theming/sass/color/presets/light/_bootstrap.scss +++ b/packages/theming/sass/color/presets/light/_bootstrap.scss @@ -27,4 +27,5 @@ $palette: palette( $warn: #ffc107, $error: #dc3545, $variant: 'bootstrap', + $generator: 'legacy', ); diff --git a/packages/theming/sass/color/presets/light/_extra.scss b/packages/theming/sass/color/presets/light/_extra.scss index 12051a5a..292a4ff6 100644 --- a/packages/theming/sass/color/presets/light/_extra.scss +++ b/packages/theming/sass/color/presets/light/_extra.scss @@ -25,6 +25,7 @@ $green-palette: palette( $success: #4eb862, $warn: #fbb13c, $error: #ff134a, + $generator: 'legacy', ); /// Generates the light purple palette. @@ -46,4 +47,5 @@ $purple-palette: palette( $success: #4eb862, $warn: #fbb13c, $error: #ff134a, + $generator: 'legacy', ); diff --git a/packages/theming/sass/color/presets/light/_fluent.scss b/packages/theming/sass/color/presets/light/_fluent.scss index bf3305b5..36423736 100644 --- a/packages/theming/sass/color/presets/light/_fluent.scss +++ b/packages/theming/sass/color/presets/light/_fluent.scss @@ -26,6 +26,7 @@ $palette: palette( $warn: #797673, $error: #a80000, $variant: 'fluent', + $generator: 'legacy', ); /// Generates the light fluent word palette. @@ -48,6 +49,7 @@ $word-palette: palette( $warn: #797673, $error: #a80000, $variant: 'fluent', + $generator: 'legacy', ); /// Generates the dark green palette. @@ -70,4 +72,5 @@ $excel-palette: palette( $warn: #797673, $error: #a80000, $variant: 'fluent', + $generator: 'legacy', ); diff --git a/packages/theming/sass/color/presets/light/_material.scss b/packages/theming/sass/color/presets/light/_material.scss index 468fdfc7..4144e21d 100644 --- a/packages/theming/sass/color/presets/light/_material.scss +++ b/packages/theming/sass/color/presets/light/_material.scss @@ -26,4 +26,5 @@ $palette: palette( $warn: #faa419, $error: #ff134a, $variant: 'material', + $generator: 'legacy', ); diff --git a/packages/theming/tests/_color.spec.scss b/packages/theming/tests/_color.spec.scss index 7d3d0b5d..9efb8503 100644 --- a/packages/theming/tests/_color.spec.scss +++ b/packages/theming/tests/_color.spec.scss @@ -5,6 +5,7 @@ @use 'sass:math'; @use 'sass:meta'; @use 'sass:color'; +@use 'sass:string'; @use 'sass-true' as *; @use 'color' as *; @use 'styles/mocks'; @@ -39,6 +40,18 @@ $_palette: palette( $error: $_error, $variant: 'material', ); +// The original multiplier-based generator, still reachable as an escape hatch. +$_legacy-palette: palette( + $primary: $_primary, + $secondary: $_secondary, + $surface: $_surface, + $success: $_success, + $info: $_info, + $warn: $_warn, + $error: $_error, + $variant: 'material', + $generator: 'legacy', +); @include describe('Color') { @include describe('base') { @@ -145,14 +158,14 @@ $_palette: palette( } @include it('should return a shade of type color string w/ palette and color as only arguments') { - $value: color($_palette, secondary); + $value: color($_legacy-palette, secondary); @include assert-equal($value, $_secondary); } @include it('should return a shade of type string w/ all arguments passed') { - $value-500: color($_palette, secondary, 500); - $value-800: color($_palette, secondary, 800); + $value-500: color($_legacy-palette, secondary, 500); + $value-800: color($_legacy-palette, secondary, 800); @include assert-equal($value-500, $_secondary); @include assert-unequal($value-500, $value-800); @@ -203,10 +216,10 @@ $_palette: palette( } @include it('should retrieve colors from a palette regadless of type of key') { - @include assert-true(color($_palette, primary, 500)); - @include assert-equal(color($_palette, primary, 500), $_primary); - @include assert-true(color($_palette, 'primary', '500')); - @include assert-equal(color($_palette, 'primary', '500'), $_primary); + @include assert-true(color($_legacy-palette, primary, 500)); + @include assert-equal(color($_legacy-palette, primary, 500), $_primary); + @include assert-true(color($_legacy-palette, 'primary', '500')); + @include assert-equal(color($_legacy-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-true(contrast-color($_palette, 'primary', '500')); @@ -358,6 +371,260 @@ $_palette: palette( } } + @include describe('gamut-relative generator') { + $_numbered: ('50', '100', '200', '300', '400', '500', '600', '700', '800', '900'); + + @include it('keeps any two shades 500 apart at WCAG AA or better') { + @each $seed in (#09f, #df1b74, #faa419, #4eb862, #ffe9b0, #141225, #0f0, #a99bb0) { + $p: palette( + $primary: $seed, + $secondary: $seed, + $surface: #fff, + ); + + @for $i from 1 through 5 { + $lo: color($p, primary, list.nth($_numbered, $i)); + $hi: color($p, primary, list.nth($_numbered, $i + 5)); + + @include assert-true(contrast($lo, $hi) >= 4.5); + } + } + } + + @include it('keeps every shade visibly distinct, whatever the seed') { + // The original generator collapses here: a near-white seed made shades + // 50 through 300 all resolve to #fff. + @each $seed in (#ffe9b0, #141225, #0f0, #a99bb0, #8a8a8a) { + $p: palette( + $primary: $seed, + $secondary: $seed, + $surface: #fff, + ); + $seen: (); + + @each $v in $_numbered { + $c: color($p, primary, $v); + + @include assert-true(list.index($seen, $c) == null); + + $seen: list.append($seen, $c); + } + } + } + + @include it('generates a neutral ramp for a seed with no usable hue') { + $p: palette( + $primary: #8a8a8a, + $secondary: #09f, + $surface: #fff, + ); + + @each $v in $_numbered { + $c: color($p, primary, $v); + + @include assert-equal(color.channel($c, 'saturation', $space: hsl), 0%); + } + } + + @include it('leaves the surface family anchored on its seed') { + $p: palette( + $primary: #09f, + $secondary: #09f, + $surface: #fff, + ); + + @include assert-equal(color($p, surface, 500), #fff); + } + + @include it('emits concrete colors, not runtime expressions') { + $p: palette( + $primary: #09f, + $secondary: #09f, + $surface: #fff, + ); + + @each $v in $_numbered { + @include assert-equal(meta.type-of(map.get($p, 'primary', $v)), 'color'); + } + } + + @include it('keeps the surface seed exactly on shade 500') { + @each $bg in (#fff, #fcfcfd, #1a1a24, #000) { + $p: palette( + $primary: #09f, + $secondary: #09f, + $surface: $bg, + ); + + @include assert-equal(color($p, surface, 500), $bg); + } + } + + @include it('gives every surface a full set of distinct layers') { + // 500 is the background; the rest are layers on it, 50 the faintest + // through 900 the strongest. A white or black page has room on exactly + // one side, which is the side the whole scale uses. + @each $bg in (#fff, #000, #f8f8fa, #1a1a24) { + $p: palette( + $primary: #09f, + $secondary: #09f, + $surface: $bg, + ); + $seen: (); + $previous: 1; + + @each $v in ('50', '100', '200', '300', '400', '600', '700', '800', '900') { + $c: color($p, surface, $v); + $away: contrast($c, $bg); + + @include assert-true(list.index($seen, $c) == null); + @include assert-true($away > $previous); + + $seen: list.append($seen, $c); + $previous: $away; + } + } + } + + @include it('accepts a ladder as a preset name, a curve, or a full spec') { + $carbon: palette( + $primary: #09f, + $secondary: #09f, + $surface: #fff, + $ladders: ( + 'gray': 'carbon', + ), + ); + $curve: palette( + $primary: #09f, + $secondary: #09f, + $surface: #fff, + $ladders: ( + 'gray': ( + 0.53, + 0, + 0.825, + 0.785, + ), + ), + ); + $spec: palette( + $primary: #09f, + $secondary: #09f, + $surface: #fff, + $ladders: ( + 'gray': ( + range: ( + 1.1, + 12, + ), + curve: null, + ), + ), + ); + $everything: palette( + $primary: #09f, + $secondary: #09f, + $surface: #fff, + $ladders: 'tailwind', + ); + $direct: shades('brand', #09f, $IColorShades, $ladder: 'carbon'); + + // carbon reproduces IBM's published grayscale + @include assert-true(contrast(color($carbon, gray, 50), #f4f4f4) < 1.02); + @include assert-true(contrast(color($carbon, gray, 900), #161616) < 1.02); + + // each form produces a different, valid scale + @include assert-unequal(color($carbon, gray, 300), color($curve, gray, 300)); + @include assert-unequal(color($carbon, gray, 300), color($spec, gray, 300)); + + // a bare name applies to every family, not only the neutrals + @include assert-unequal(color($everything, primary, 300), color($carbon, primary, 300)); + @include assert-equal(meta.type-of(map.get($direct, '300-raw')), 'color'); + } + + @include it('ships the documented ladder presets') { + @each $name in ('even', 'material', 'tailwind', 'carbon', 'layers') { + @include assert-true(map.has-key($ladders, $name)); + } + } + + @include it('follows the grayscale rhythm the component schemas expect') { + $p: palette( + $primary: #09f, + $secondary: #09f, + $surface: #fff, + ); + // The eased ladder reproduces the original grayscale to within ~1 JND, + // so existing schemas keep their intended weight. + $expected: ( + '100': #f5f5f5, + '400': #bdbdbd, + '700': #616161, + '900': #212121, + ); + + @each $v, $want in $expected { + @include assert-true(contrast(color($p, gray, $v), $want) < 1.06); + } + } + + @include it('flips the grayscale for a dark surface but not the color ramps') { + $light: palette( + $primary: #09f, + $secondary: #09f, + $surface: #fff, + $gray: #333, + ); + $dark: palette( + $primary: #09f, + $secondary: #09f, + $surface: #1a1a24, + $gray: #333, + ); + + // gray-50 always sits nearest the background + @include assert-true(contrast(color($light, gray, 50), #fff) < 1.2); + @include assert-true(contrast(color($dark, gray, 50), #1a1a24) < 1.2); + + // the color ramp does not move between themes + @each $v in $_numbered { + @include assert-equal(color($light, primary, $v), color($dark, primary, $v)); + } + } + + @include it('reports which shade the seed lands nearest') { + $light: palette( + $primary: #ffe9b0, + $secondary: #09f, + $surface: #fff, + ); + $dark: palette( + $primary: #141225, + $secondary: #09f, + $surface: #fff, + ); + + @include assert-equal(seed-lands-on($light, 'primary'), '50'); + @include assert-equal(seed-lands-on($dark, 'primary'), '900'); + } + + @include it('falls back to the original multipliers on request') { + $p: palette( + $primary: #09f, + $secondary: #97c, + $surface: #fff, + $generator: 'legacy', + ); + + @include assert-equal(color($p, primary, 500), #09f); + @include assert-equal( + map.get($p, 'primary', '600'), + #{hsl(from var(--ig-primary-500) h calc(s * 1.26) calc(l * 0.89))} + ); + } + } + @include it('should convert a color to a list of HSL values') { @include assert-equal(to-hsl(black), (0deg, 0%, 0%)); } diff --git a/research/dynamic-shades/ramp-prototype.py b/research/dynamic-shades/ramp-prototype.py new file mode 100644 index 00000000..1abf300c --- /dev/null +++ b/research/dynamic-shades/ramp-prototype.py @@ -0,0 +1,188 @@ +import math, json +from coloraide import Color + +# ---------- helpers ---------- +def oklch(c): + o = Color(c).convert('oklch') + L = o['lightness']; C = o['chroma']; h = o['hue'] + if h != h: h = 0.0 + return L, C, h + +def lum(c): + return Color(c).luminance() + +def wcag(a,b): + la, lb = lum(a), lum(b) + hi, lo = max(la,lb), min(la,lb) + return (hi+0.05)/(lo+0.05) + +def deltaEOKr2(c1,c2): + K1,K2 = 0.206,0.03; K3=(1+K1)/(1+K2) + def toe(x): return 0.5*(K3*x-K1+math.sqrt((K3*x-K1)**2+4*K2*K3*x)) + a1=Color(c1).convert('oklab'); a2=Color(c2).convert('oklab') + dL=toe(a1['lightness'])-toe(a2['lightness']) + da=2*(a1['a']-a2['a']); db=2*(a1['b']-a2['b']) + return math.sqrt(dL*dL+da*da+db*db) + +# ---------- sRGB cusp per hue (cached scan) ---------- +_cusp={} +def cusp(h): + key=round(h,1) + if key in _cusp: return _cusp[key] + best=(0,0) + L=0.02 + while L<=0.999: + # binary search max in-gamut chroma at (L,h) + lo,hi=0.0,0.45 + for _ in range(28): + mid=(lo+hi)/2 + if Color('oklch',[L,mid,h]).in_gamut('srgb', tolerance=0.0001): lo=mid + else: hi=mid + if lo>best[1]: best=(L,lo) + L+=0.005 + _cusp[key]=best + return best + +def ST(h): + Lc,Cc=cusp(h) + return Cc/Lc, Cc/(1-Lc), Lc, Cc + +def softmin(a,b,p): + if a<=0 or b<=0: return 0.0 + return (1/(1/a**p + 1/b**p))**(1/p) + +def cmax_curve(L,h,p=4,k=1.0): + S,T,_,_=ST(h) + return k*softmin(L*S,(1-L)*T,p) + +# ---------- lightness from target contrast vs surface ---------- +def L_for_contrast_vs_white(cr): + # Y such that 1.05/(Y+0.05) = cr + Y = 1.05/cr - 0.05 + return max(Y, 0.0) + +def oklabL_from_Y(Y): + # gray with that luminance + c = Color('xyz-d65', [Y*0.9505, Y, Y*1.089]) + return c.convert('oklch')['lightness'] + +# ---------- ramp ---------- +SHADES = ['50','100','200','300','400','500','600','700','800','900'] +K_CR = 0.304 # ln(4.5)/5 + buffer -> 5 index steps guarantee AA +OFFSET = 0.55 + +def contrast_ladder(): + return [math.exp(K_CR*(i+OFFSET)) for i in range(10)] + +# accent shades: vivid track, anchored at these contrast indices +ACCENTS = {'A100':1.4,'A200':2.6,'A400':4.2,'A700':6.2} + +def torsion_for(h, mode='stable'): + if mode=='none': return 0.0 + if mode=='gamut': + if 30<=h<=115: return 55.0 # warm: hue rises with L + if 195<=h<=285: return -22.0 # cool: hue falls with L + return 0.0 + return 0.0 + +def blue_correction(h,L): + if 255<=h<=295 and L>0.55: return 33.0*(L-0.55) + if (235<=h<255 or 3000.60: return 20.0*(L-0.60) + return 0.0 + +def envelope(t,a=0.30,q=2.5): + return 1 - a*abs(2*t-1)**q + +NEUTRAL_C = 0.02 # below this the seed carries no usable hue signal + +def solve_L(cr, h, s0, t, p, surface_Y=1.0, iters=4): + """Solve OKLab L so that the FINAL chromatic color hits the target contrast.""" + Y = (surface_Y+0.05)/cr - 0.05 + L = oklabL_from_Y(max(Y,0.0)) + for _ in range(iters): + hh = h + C = s0*envelope(t)*cmax_curve(L,hh,p) + c = Color('oklch',[L,C,hh]).fit('srgb', method='oklch-chroma') + got = (surface_Y+0.05)/(c.luminance()+0.05) + if abs(got-cr) < 0.005: break + L *= 1 + 0.55*(got-cr)/cr # chromatic colors are brighter -> raise contrast by lowering L + L = min(max(L,0.02),0.995) + return L + +def build(seed, surface='#fff', tors='stable', s_floor=0.30, p=4): + Ls,Cs,hs = oklch(seed) + neutral = Cs < NEUTRAL_C + Cm_seed = cmax_curve(Ls,hs,p) + s0 = min(1.0, Cs/Cm_seed) if Cm_seed>0 else 0 + s0 = 0.0 if neutral else max(s0, s_floor) + tau = torsion_for(hs,tors) + out={} + ladder = contrast_ladder() + n=len(ladder) + for i,(name,cr) in enumerate(zip(SHADES,ladder)): + t=i/(n-1) + L=solve_L(cr,hs,s0,t,p) + h = hs + tau*(L-Ls) + blue_correction(hs,L) + C = s0*envelope(t)*cmax_curve(L,h,p) + c = Color('oklch',[L,C,h]).fit('srgb', method='oklch-chroma') + out[name]=c.convert('srgb').to_string(hex=True) + for name,cr in ACCENTS.items(): + L=solve_L(cr,hs,(0.0 if neutral else 1.0),0.5,8) + h = hs + tau*(L-Ls) + blue_correction(hs,L) + C = (0.0 if neutral else 1.0)*cmax_curve(L,h,p=8) # vivid track: ride the hull + c = Color('oklch',[L,C,h]).fit('srgb', method='oklch-chroma') + out[name]=c.convert('srgb').to_string(hex=True) + # seed placement + Lstar=[oklch(out[s])[0] for s in SHADES] + i_star=min(range(n), key=lambda i: abs(Lstar[i]-Ls)) + return out, dict(seed_L=round(Ls,4), seed_C=round(Cs,4), seed_h=round(hs,2), + s0=round(s0,3), snaps_to=SHADES[i_star], tau=tau) + +# ---------- current HSL-multiplier approach, replicated ---------- +MS={'50':(1.23,1.78),'100':(0.8,1.66),'200':(0.64,1.43),'300':(0.73,1.19),'400':(0.875,1.08), + '500':(1,1),'600':(1.26,0.89),'700':(1.26,0.81),'800':(1.26,0.73),'900':(1.26,0.64), + 'A100':(1.23,1.34),'A200':(1.22,1.16),'A400':(1.23,0.91),'A700':(1.23,0.65)} +def build_current(seed): + c=Color(seed).convert('hsl') + H,S,L=c['hue'],c['saturation'],c['lightness'] + if H!=H: H=0 + out={} + for k,(sx,lx) in MS.items(): + out[k]=Color('hsl',[H,min(S*sx,1.0),min(L*lx,1.0)]).convert('srgb').to_string(hex=True) + return out + +def report(name, seed, tors='stable'): + new,meta=build(seed,tors=tors) + cur=build_current(seed) + print(f"\n{'='*78}\n{name} seed={seed} L={meta['seed_L']:.3f} C={meta['seed_C']:.3f} h={meta['seed_h']:.0f} s0={meta['s0']} snaps→{meta['snaps_to']}") + print(f"{'step':6} {'NEW hex':9} {'L':>5} {'C':>6} {'h':>6} {'CRw':>5} {'ΔE':>6} | {'CUR hex':9} {'CRw':>5} {'ΔE':>6}") + prevN=prevC=None + for s in SHADES: + Ln,Cn,hn=oklch(new[s]); crn=wcag(new[s],'#fff') + crc=wcag(cur[s],'#fff') + dn=deltaEOKr2(prevN,new[s]) if prevN else 0 + dc=deltaEOKr2(prevC,cur[s]) if prevC else 0 + print(f"{s:6} {new[s]:9} {Ln:5.3f} {Cn:6.4f} {hn:6.1f} {crn:5.2f} {dn:6.4f} | {cur[s]:9} {crc:5.2f} {dc:6.4f}") + prevN,prevC=new[s],cur[s] + def spread(hl): + hl=[h for h in hl] + best=360 + for ref in hl: + d=[((h-ref+180)%360)-180 for h in hl] + best=min(best,max(d)-min(d)) + return best + hs_n=[oklch(new[s])[2] for s in SHADES]; hs_c=[oklch(cur[s])[2] for s in SHADES] + print(f" hue spread NEW {spread(hs_n):5.1f}° CUR {spread(hs_c):5.1f}°") + dn=[deltaEOKr2(new[SHADES[i]],new[SHADES[i+1]]) for i in range(9)] + dc=[deltaEOKr2(cur[SHADES[i]],cur[SHADES[i+1]]) for i in range(9)] + print(f" min ΔEOKr2 NEW {min(dn):.4f} CUR {min(dc):.4f} (target ≥0.015)") + # AA guarantee check for 5-index gaps + bad=[(SHADES[i],SHADES[i+5],round(wcag(new[SHADES[i]],new[SHADES[i+5]]),2)) for i in range(5) if wcag(new[SHADES[i]],new[SHADES[i+5]])<4.5] + badc=[(SHADES[i],SHADES[i+5],round(wcag(cur[SHADES[i]],cur[SHADES[i+5]]),2)) for i in range(5) if wcag(cur[SHADES[i]],cur[SHADES[i+5]])<4.5] + print(f" 5-step AA failures NEW {bad or 'none'} CUR {badc or 'none'}") + print(f" accents " + " ".join(f"{k}={new[k]}" for k in ACCENTS)) + +for nm,sd in [("ignite primary","#0099ff"),("ignite secondary","#df1b74"),("warn","#faa419"), + ("success","#4eb862"),("near-white seed","#ffe9b0"),("near-black seed","#141225"), + ("neon green","#00ff00"),("washed-out mauve","#a99bb0"),("near-gray","#8a8a8a")]: + report(nm,sd) diff --git a/research/dynamic-shades/ramp-prototype.scss b/research/dynamic-shades/ramp-prototype.scss new file mode 100644 index 00000000..1138c165 --- /dev/null +++ b/research/dynamic-shades/ramp-prototype.scss @@ -0,0 +1,251 @@ +// --------------------------------------------------------------------------- +// Dynamic color shades — prototype +// Verified against Dart Sass 1.92.1 (the version pinned in this repo). +// +// Two kinds of family: +// chromatic-ramp() primary, secondary, info, success, warn, error +// anchored to WHITE. Identical in light and dark themes. +// neutral-ramp() gray (and surface) +// anchored to the SURFACE, so it flips with the theme. +// --------------------------------------------------------------------------- +@use 'sass:color'; +@use 'sass:math'; +@use 'sass:map'; +@use 'sass:list'; + +// --- tunables --------------------------------------------------------------- +$K: 0.304; // ln(4.5)/5 + buffer → any two shades 500 apart clear AA +$OFFSET: 0.55; // shifts the whole ladder; 0.55 puts 50 at CR 1.18 +$NEUTRAL-C: 0.02; // below this chroma the seed carries no usable hue +$S-FLOOR: 0.30; // a muted seed still gets a usable amount of color +$ENV-DEPTH: 0.30; // how much the ends of the ramp are tapered +$ENV-POWER: 2.5; +$P-SOFT: 4; // chroma ceiling for the numbered track (inside the gamut) +$P-HULL: 8; // chroma ceiling for the A track (on the gamut hull) + +$SHADES: '50' '100' '200' '300' '400' '500' '600' '700' '800' '900'; +$ACCENTS: ( + 'A100': 1.4, + 'A200': 2.6, + 'A400': 4.2, + 'A700': 6.2, +); + +// --- 1. how much chroma can sRGB hold at this lightness and hue? ------------- +@function _in-gamut($l, $c, $h) { + @return color.is-in-gamut(color.change(oklch(0.5 0 0), $lightness: $l, $chroma: $c, $hue: $h), srgb); +} + +@function _max-chroma($l, $h) { + $lo: 0; + $hi: 0.45; + $i: 0; + + @while $i < 18 { + $mid: math.div($lo + $hi, 2); + + @if _in-gamut($l, $mid, $h) { + $lo: $mid; + } @else { + $hi: $mid; + } + + $i: $i + 1; + } + + @return $lo; +} + +// --- 2. the peak of that curve: the hue's "cusp" ----------------------------- +@function cusp($h) { + $bl: 0; + $bc: 0; + $l: 0.04; + + @while $l < 1 { + $c: _max-chroma($l, $h); + + @if $c > $bc { + $bc: $c; + $bl: $l; + } + + $l: $l + 0.02; + } + + // refine around the coarse winner + $l: math.max(0.02, $bl - 0.02); + $end: math.min(0.99, $bl + 0.02); + + @while $l <= $end { + $c: _max-chroma($l, $h); + + @if $c > $bc { + $bc: $c; + $bl: $l; + } + + $l: $l + 0.004; + } + + @return (l: $bl, c: $bc); +} + +// The cusp expressed as the two slopes of a tent. Compute once per family. +@function tent($h) { + $k: cusp($h); + $lc: map.get($k, l); + $cc: map.get($k, c); + + @return (math.div($cc, $lc), math.div($cc, 1 - $lc)); +} + +// --- 3. the tent, with its corner rounded off -------------------------------- +@function _softmin($a, $b, $p) { + @if $a <= 0 or $b <= 0 { + @return 0; + } + + @return math.pow(math.div(1, math.div(1, math.pow($a, $p)) + math.div(1, math.pow($b, $p))), math.div(1, $p)); +} + +@function chroma-ceiling($l, $tent, $p: $P-SOFT) { + @return _softmin($l * list.nth($tent, 1), (1 - $l) * list.nth($tent, 2), $p); +} + +// --- 3b. reading a seed -------------------------------------------------- +// color.channel() hands back UNITS: lightness as `70.8%`, hue as `314.6deg`. +// Everything below expects plain numbers, so normalize on the way in. +@function _seed($c) { + $ok: color.to-space($c, oklch); + + @return ( + l: math.div(color.channel($ok, 'lightness', $space: oklch), 100%), + c: color.channel($ok, 'chroma', $space: oklch), + h: math.div(color.channel($ok, 'hue', $space: oklch), 1deg) + ); +} + +// --- 4. WCAG luminance ------------------------------------------------------ +// NOTE: the library already ships `luminance()` and `_lcv()` — use those. +@function _lcv($v) { + @return if($v < 0.03928, math.div($v, 12.92), math.pow(math.div($v + 0.055, 1.055), 2.4)); +} + +@function luminance($c) { + $r: _lcv(math.div(color.channel($c, 'red', $space: rgb), 255)); + $g: _lcv(math.div(color.channel($c, 'green', $space: rgb), 255)); + $b: _lcv(math.div(color.channel($c, 'blue', $space: rgb), 255)); + + @return 0.2126 * $r + 0.7152 * $g + 0.0722 * $b; +} + +// --- 5. the taper across the ramp ------------------------------------------- +@function envelope($t) { + @return 1 - $ENV-DEPTH * math.pow(math.abs(2 * $t - 1), $ENV-POWER); +} + +// --- 6. hue: hold it, except in the blue-violet corner ---------------------- +@function _hue-at($h, $l) { + @if $h >= 255 and $h <= 295 and $l > 0.55 { + @return $h + 33 * ($l - 0.55); + } + + @if (($h >= 235 and $h < 255) or ($h > 300 and $h <= 355)) and $l > 0.6 { + @return $h + 20 * ($l - 0.6); + } + + @return $h; +} + +// --- 7. solve one shade ------------------------------------------------------ +// $anchor-y luminance of the color the contrast is measured against +// $lighter true when the shade must be LIGHTER than the anchor (dark themes) +@function solve-shade($h, $tent, $s0, $t, $target-cr, $anchor-y: 1, $lighter: false, $p: $P-SOFT) { + $l: if($lighter, 0.5, 0.5); + $i: 0; + $col: null; + + @while $i < 12 { + $hh: _hue-at($h, $l); + $c: $s0 * envelope($t) * chroma-ceiling($l, $tent, $p); + $col: color.to-gamut(color.change(oklch(0.5 0 0), $lightness: $l, $chroma: $c, $hue: $hh), srgb, local-minde); + $y: luminance($col); + $got: if($lighter, math.div($y + 0.05, $anchor-y + 0.05), math.div($anchor-y + 0.05, $y + 0.05)); + + @if math.abs($got - $target-cr) < 0.01 { + @return $col; + } + + $err: math.div($got - $target-cr, $target-cr); + $l: math.clamp(0.02, $l * (1 + if($lighter, -0.55, 0.55) * $err), 0.995); + $i: $i + 1; + } + + @return $col; +} + +@function _cr($i) { + @return math.pow(math.$e, $K * ($i + $OFFSET)); +} + +// --- 8. chromatic families: primary, secondary, info, success, warn, error --- +// Anchored to white. The SAME values in every theme — schemas pick which shade +// to use per theme; the scale itself does not move. +@function chromatic-ramp($seed) { + $s: _seed($seed); + $hs: map.get($s, h); + $ls: map.get($s, l); + $cs: map.get($s, c); + $tent: tent($hs); + $s0: if($cs < $NEUTRAL-C, 0, math.clamp($S-FLOOR, math.div($cs, chroma-ceiling($ls, $tent)), 1)); + $vivid: if($cs < $NEUTRAL-C, 0, 1); + $out: (); + $i: 0; + + // numbered track — the seed's own saturation level + @each $name in $SHADES { + $out: map.set($out, $name, solve-shade($hs, $tent, $s0, math.div($i, 9), _cr($i))); + $i: $i + 1; + } + + // A track — same ladder shape, but riding the gamut hull + @each $name, $cr in $ACCENTS { + $out: map.set($out, $name, solve-shade($hs, $tent, $vivid, 0.5, $cr, $p: $P-HULL)); + } + + @return map.set($out, 'seed', $seed); +} + +// --- 9. neutral family: gray (and surface) ---------------------------------- +// Anchored to the SURFACE, so 50 is always the shade nearest the background and +// 900 the shade furthest from it — in both light and dark themes. +@function neutral-ramp($seed, $surface) { + $sy: luminance($surface); + $lighter: $sy <= 0.5; // dark surface → the ramp climbs toward white + $h: 0; + $tent: (0.0001, 0.0001); + $s0: 0; + + @if $seed { + $s: _seed($seed); + $cs: map.get($s, c); + + @if $cs >= $NEUTRAL-C { + $h: map.get($s, h); + $tent: tent($h); + // grays take a whisper of the seed's hue, never its full saturation + $s0: math.min(0.12, math.div($cs, chroma-ceiling(map.get($s, l), $tent))); + } + } + + $out: (); + $i: 0; + + @each $name in $SHADES { + $out: map.set($out, $name, solve-shade($h, $tent, $s0, math.div($i, 9), _cr($i), $sy, $lighter)); + $i: $i + 1; + } + + @return map.set($out, 'seed', if($seed, $seed, if($lighter, #fff, #000))); +} From 7a093405bdc317bcc6dfa45c05ed8603c3f7210b Mon Sep 17 00:00:00 2001 From: Simeon Simeonoff Date: Fri, 4 Sep 2026 16:42:27 +0300 Subject: [PATCH 2/3] feat(palettes): unify surface roles and expose shade scales to the MCP Both generators emit the same surface layers (base, sunken, raised, overlay, container), so schemas address surface by role rather than by shade number. $ISurfaceRoles derives from $surface-roles. Adds `scales` and `generator` to create_palette and create_theme, plus a fit_color_scale tool that derives a (range, curve) spec from an existing color ladder. Scale definitions are generated from config.$scales. BREAKING CHANGE: surface is addressed by role, not shade number. Use ('surface', 'base') in place of ('surface', 500). --- .gitignore | 7 + _to_delete/_zz_final.scss | 26 - _to_delete/_zz_perf.scss | 18 - _to_delete/_zz_r.scss | 2 - _to_delete/_zz_t1.scss | 35 - _to_delete/_zz_t2.scss | 23 - _to_delete/_zz_t3.scss | 18 - _to_delete/_zz_t4.scss | 37 - _to_delete/_zz_t5.scss | 32 - _to_delete/_zz_t6.scss | 20 - _to_delete/_zz_t7.scss | 14 - _to_delete/_zz_t8.scss | 11 - _to_delete/_zz_t9.scss | 9 - _to_delete/_zz_z.scss | 10 - _to_delete/git-index.lock | 0 _to_delete/git-index.lock2 | 0 _to_delete/l5 | 0 _to_delete/theming-tmp/dark.scss | 5 - _to_delete/theming-tmp/e2e.css | 1044 --- _to_delete/theming-tmp/perf.css | 242 - _to_delete/theming-tmp/perf.scss | 3 - _to_delete/theming-tmp/shades.html | 746 -- _to_delete/theming-tmp/t1.css | 39 - _to_delete/theming-tmp/t1.scss | 6 - _to_delete/theming-tmp/t2.css | 239 - _to_delete/theming-tmp/t2.scss | 4 - _to_delete/theming-tmp/t3.scss | 5 - _to_delete/theming-tmp/t4.css | 223 - _to_delete/theming-tmp/t4.scss | 14 - _to_delete/theming-tmp/tests.css | 7928 ---------------- _to_delete/theming-tmp2/perf.css | 242 - _to_delete/theming-tmp2/perf.scss | 3 - _to_delete/theming-tmp2/s1.scss | 8 - _to_delete/theming-tmp2/s2.css | 77 - _to_delete/theming-tmp2/s2.scss | 11 - _to_delete/theming-tmp2/s3.scss | 3 - _to_delete/theming-tmp2/shades.html | 380 - _to_delete/theming-tmp2/sweep.mjs | 47 - _to_delete/theming-tmp2/tests.css | 7969 ---------------- _to_delete/tmp3/perf.css | 242 - _to_delete/tmp3/perf.scss | 3 - _to_delete/tmp3/s4.scss | 9 - _to_delete/tmp3/s5.scss | 18 - _to_delete/tmp3/shades.html | 436 - _to_delete/tmp3/sweep.mjs | 53 - _to_delete/tmp3/tests.css | 8052 ----------------- biome.json | 15 +- package-lock.json | 17 +- package.json | 7 +- .../mcp/src/__tests__/generators/css.test.ts | 11 +- .../src/__tests__/generators/scales.test.ts | 75 + .../__tests__/tools/handlers/handlers.test.ts | 22 +- .../mcp/src/__tests__/utils/color.test.ts | 49 - .../mcp/src/__tests__/utils/scale-fit.test.ts | 84 + packages/mcp/src/generators/css.ts | 12 +- packages/mcp/src/generators/sass.ts | 55 + packages/mcp/src/index.ts | 23 + packages/mcp/src/knowledge/scales.ts | 126 + packages/mcp/src/resources/presets.ts | 23 + packages/mcp/src/tools/descriptions.ts | 246 +- .../mcp/src/tools/handlers/custom-palette.ts | 13 +- packages/mcp/src/tools/handlers/fit-scale.ts | 110 + packages/mcp/src/tools/handlers/index.ts | 1 + packages/mcp/src/tools/handlers/theme.ts | 34 +- packages/mcp/src/tools/index.ts | 3 + packages/mcp/src/tools/schemas.ts | 71 +- packages/mcp/src/utils/color.ts | 108 - packages/mcp/src/utils/sass.ts | 10 +- packages/mcp/src/utils/scale-fit.ts | 148 + packages/mcp/src/utils/types.ts | 63 +- packages/mcp/src/validators/custom-palette.ts | 43 +- packages/mcp/src/validators/index.ts | 4 - packages/mcp/src/validators/palette.ts | 175 - packages/preview/index.html | 66 + packages/preview/package.json | 18 + packages/preview/src/color.spec.ts | 62 + packages/preview/src/color.ts | 79 + packages/preview/src/html.ts | 35 + packages/preview/src/model.ts | 319 + packages/preview/src/palettes.ts | 140 + packages/preview/src/plugin.ts | 64 + packages/preview/src/render.ts | 114 + packages/preview/src/styles.scss | 373 + packages/preview/stylelint.config.mjs | 3 + packages/preview/tsconfig.json | 9 + packages/preview/vite.config.ts | 10 + packages/preview/vitest.config.ts | 10 + packages/theming/.scripts/previewShades.mjs | 274 - packages/theming/package.json | 3 +- packages/theming/sass/color/_config.scss | 200 +- packages/theming/sass/color/_functions.scss | 143 +- packages/theming/sass/color/_gamut.scss | 98 +- packages/theming/sass/color/_generator.scss | 498 +- packages/theming/sass/color/_types.scss | 39 +- .../sass/color/presets/dark/_indigo.scss | 2 +- .../sass/color/presets/light/_indigo.scss | 2 +- packages/theming/sass/json/generators.scss | 26 + packages/theming/sass/tailwind/_mixins.scss | 6 +- .../schemas/charts/light/_data-chart.scss | 4 +- .../themes/schemas/charts/light/_gauge.scss | 6 +- .../themes/schemas/charts/light/_graph.scss | 6 +- .../themes/schemas/components/dark/_grid.scss | 8 +- .../schemas/components/light/_chat.scss | 12 +- .../light/_grid-excel-filtering.scss | 4 +- .../components/light/_grid-toolbar.scss | 4 +- .../schemas/components/light/_grid.scss | 16 +- .../schemas/components/light/_navbar.scss | 2 +- .../schemas/components/light/_pagination.scss | 4 +- .../components/light/_query-builder.scss | 8 +- .../schemas/components/light/_slider.scss | 12 +- .../components/light/_tile-manager.scss | 16 +- packages/theming/schemas/index.mjs | 23 + packages/theming/tests/_color.spec.scss | 180 +- packages/theming/tests/styles/_mocks.scss | 40 +- research/dynamic-shades/ramp-prototype.py | 188 - research/dynamic-shades/ramp-prototype.scss | 251 - vitest.config.ts | 1 + 117 files changed, 3095 insertions(+), 30144 deletions(-) delete mode 100644 _to_delete/_zz_final.scss delete mode 100644 _to_delete/_zz_perf.scss delete mode 100644 _to_delete/_zz_r.scss delete mode 100644 _to_delete/_zz_t1.scss delete mode 100644 _to_delete/_zz_t2.scss delete mode 100644 _to_delete/_zz_t3.scss delete mode 100644 _to_delete/_zz_t4.scss delete mode 100644 _to_delete/_zz_t5.scss delete mode 100644 _to_delete/_zz_t6.scss delete mode 100644 _to_delete/_zz_t7.scss delete mode 100644 _to_delete/_zz_t8.scss delete mode 100644 _to_delete/_zz_t9.scss delete mode 100644 _to_delete/_zz_z.scss delete mode 100644 _to_delete/git-index.lock delete mode 100644 _to_delete/git-index.lock2 delete mode 100644 _to_delete/l5 delete mode 100644 _to_delete/theming-tmp/dark.scss delete mode 100644 _to_delete/theming-tmp/e2e.css delete mode 100644 _to_delete/theming-tmp/perf.css delete mode 100644 _to_delete/theming-tmp/perf.scss delete mode 100644 _to_delete/theming-tmp/shades.html delete mode 100644 _to_delete/theming-tmp/t1.css delete mode 100644 _to_delete/theming-tmp/t1.scss delete mode 100644 _to_delete/theming-tmp/t2.css delete mode 100644 _to_delete/theming-tmp/t2.scss delete mode 100644 _to_delete/theming-tmp/t3.scss delete mode 100644 _to_delete/theming-tmp/t4.css delete mode 100644 _to_delete/theming-tmp/t4.scss delete mode 100644 _to_delete/theming-tmp/tests.css delete mode 100644 _to_delete/theming-tmp2/perf.css delete mode 100644 _to_delete/theming-tmp2/perf.scss delete mode 100644 _to_delete/theming-tmp2/s1.scss delete mode 100644 _to_delete/theming-tmp2/s2.css delete mode 100644 _to_delete/theming-tmp2/s2.scss delete mode 100644 _to_delete/theming-tmp2/s3.scss delete mode 100644 _to_delete/theming-tmp2/shades.html delete mode 100644 _to_delete/theming-tmp2/sweep.mjs delete mode 100644 _to_delete/theming-tmp2/tests.css delete mode 100644 _to_delete/tmp3/perf.css delete mode 100644 _to_delete/tmp3/perf.scss delete mode 100644 _to_delete/tmp3/s4.scss delete mode 100644 _to_delete/tmp3/s5.scss delete mode 100644 _to_delete/tmp3/shades.html delete mode 100644 _to_delete/tmp3/sweep.mjs delete mode 100644 _to_delete/tmp3/tests.css create mode 100644 packages/mcp/src/__tests__/generators/scales.test.ts create mode 100644 packages/mcp/src/__tests__/utils/scale-fit.test.ts create mode 100644 packages/mcp/src/knowledge/scales.ts create mode 100644 packages/mcp/src/tools/handlers/fit-scale.ts create mode 100644 packages/mcp/src/utils/scale-fit.ts create mode 100644 packages/preview/index.html create mode 100644 packages/preview/package.json create mode 100644 packages/preview/src/color.spec.ts create mode 100644 packages/preview/src/color.ts create mode 100644 packages/preview/src/html.ts create mode 100644 packages/preview/src/model.ts create mode 100644 packages/preview/src/palettes.ts create mode 100644 packages/preview/src/plugin.ts create mode 100644 packages/preview/src/render.ts create mode 100644 packages/preview/src/styles.scss create mode 100644 packages/preview/stylelint.config.mjs create mode 100644 packages/preview/tsconfig.json create mode 100644 packages/preview/vite.config.ts create mode 100644 packages/preview/vitest.config.ts delete mode 100644 packages/theming/.scripts/previewShades.mjs delete mode 100644 research/dynamic-shades/ramp-prototype.py delete mode 100644 research/dynamic-shades/ramp-prototype.scss diff --git a/.gitignore b/.gitignore index 4cad133b..fc09e3fd 100644 --- a/.gitignore +++ b/.gitignore @@ -130,3 +130,10 @@ packages/theming/tests/e2e/*.css.map # Agents and related files .opencode .pi + +# Copied in by `npm run prepack` and removed again by `postpack` +packages/theming/README.md +packages/theming/LICENSE + +# Scratch space +_to_delete/ diff --git a/_to_delete/_zz_final.scss b/_to_delete/_zz_final.scss deleted file mode 100644 index 2b3cd3bb..00000000 --- a/_to_delete/_zz_final.scss +++ /dev/null @@ -1,26 +0,0 @@ -@use "sass:color"; @use "sass:math"; -// APCA (simplified SAPC-98 / W3 0.98G-4g) feasibility -@function apca-y($col) { - $r: math.pow(math.div(color.channel($col,"red",$space:rgb),255), 2.4); - $g: math.pow(math.div(color.channel($col,"green",$space:rgb),255), 2.4); - $b: math.pow(math.div(color.channel($col,"blue",$space:rgb),255), 2.4); - @return 0.2126729*$r + 0.7151522*$g + 0.0721750*$b; } -@function apca($txt, $bg) { - $yt: apca-y($txt); $yb: apca-y($bg); - @if $yt < 0.022 { $yt: $yt + math.pow(0.022 - $yt, 1.414); } - @if $yb < 0.022 { $yb: $yb + math.pow(0.022 - $yb, 1.414); } - @if $yb > $yt { - @return (math.pow($yb, 0.56) - math.pow($yt, 0.57)) * 1.14 * 100; } - @return (math.pow($yb, 0.65) - math.pow($yt, 0.62)) * 1.14 * 100; } -// the "returned in original space" gotcha + the safe pattern -$base: #3f51b5; -$bad: color.change($base, $lightness: 0.85, $space: oklch); -$good: color.to-gamut(color.to-space(color.change(color.to-space($base, oklch), $lightness: 85%), oklch), srgb, local-minde); -r { - --apca-black-on-white: #{apca(#000, #fff)}; - --apca-blue-on-white: #{apca(#3f51b5, #fff)}; - --bad: #{$bad}; - --bad-in-gamut: #{color.is-in-gamut($bad, srgb)}; - --good: #{$good}; - --good-hex: #{color.to-space($good, rgb)}; -} diff --git a/_to_delete/_zz_perf.scss b/_to_delete/_zz_perf.scss deleted file mode 100644 index 11511d9d..00000000 --- a/_to_delete/_zz_perf.scss +++ /dev/null @@ -1,18 +0,0 @@ -@use "sass:color"; @use "sass:math"; @use "sass:map"; -// realistic: 12 palette colors x 14 shades, each with a binary-search gamut map (20 iters) -@function bs-gamut($L, $C, $H, $iters) { - $lo: 0; $hi: $C; $i: 0; - @while $i < $iters { - $mid: math.div($lo + $hi, 2); - @if color.is-in-gamut(oklch($L * 100% $mid $H), srgb) { $lo: $mid; } @else { $hi: $mid; } - $i: $i + 1; - } - @return oklch($L * 100% $lo $H); -} -$hues: 20 50 80 110 140 170 200 230 260 290 320 350; -$Ls: 0.98 0.95 0.9 0.82 0.74 0.66 0.58 0.5 0.42 0.34 0.26 0.18 0.12 0.08; -:root { - @each $h in $hues { @each $l in $Ls { - --c-#{$h}-#{$l}: #{bs-gamut($l, 0.4, $h, 20)}; - } } -} diff --git a/_to_delete/_zz_r.scss b/_to_delete/_zz_r.scss deleted file mode 100644 index 0284585b..00000000 --- a/_to_delete/_zz_r.scss +++ /dev/null @@ -1,2 +0,0 @@ -@function recurse($n) { @if $n <= 0 { @return 0; } @return 1 + recurse($n - 1); } -f { --r: #{recurse(180)}; } diff --git a/_to_delete/_zz_t1.scss b/_to_delete/_zz_t1.scss deleted file mode 100644 index 33597911..00000000 --- a/_to_delete/_zz_t1.scss +++ /dev/null @@ -1,35 +0,0 @@ -@use "sass:color"; -@use "sass:math"; -@use "sass:meta"; -@use "sass:list"; - -$c: #3f51b5; -a { - --space: #{color.space($c)}; - --to-oklch: #{color.to-space($c, oklch)}; - --l: #{color.channel($c, "lightness", $space: oklch)}; - --c: #{color.channel($c, "chroma", $space: oklch)}; - --h: #{color.channel($c, "hue", $space: oklch)}; - --lab-a: #{color.channel($c, "a", $space: oklab)}; - --xyz: #{color.to-space($c, xyz)}; - --xyzd65: #{color.to-space($c, xyz-d65)}; - --xyzd50: #{color.to-space($c, xyz-d50)}; - --p3: #{color.to-space($c, display-p3)}; - --a98: #{color.to-space($c, a98-rgb)}; - --rec: #{color.to-space($c, rec2020)}; - --prophoto: #{color.to-space($c, prophoto-rgb)}; - --srgb-lin: #{color.to-space($c, srgb-linear)}; - --hwb: #{color.to-space($c, hwb)}; - --lch: #{color.to-space($c, lch)}; - --legacy: #{color.is-legacy($c)}; - --legacy2: #{color.is-legacy(color.to-space($c, oklch))}; - --raw-oklch: #{oklch(70% 0.2 250)}; - --ingamut: #{color.is-in-gamut(oklch(70% 0.4 250), srgb)}; - --gamut-minde: #{color.to-gamut(oklch(70% 0.4 250), srgb, local-minde)}; - --gamut-clip: #{color.to-gamut(oklch(70% 0.4 250), srgb, clip)}; - --mix-oklch: #{color.mix(red, blue, 50%, oklch)}; - --mix-legacy: #{color.mix(red, blue, 50%)}; - --scale: #{color.scale($c, $lightness: 20%, $space: oklch)}; - --adjust: #{color.adjust($c, $chroma: 0.05, $space: oklch)}; - --change: #{color.change($c, $lightness: 0.8, $space: oklch)}; -} diff --git a/_to_delete/_zz_t2.scss b/_to_delete/_zz_t2.scss deleted file mode 100644 index 6d73509f..00000000 --- a/_to_delete/_zz_t2.scss +++ /dev/null @@ -1,23 +0,0 @@ -@use "sass:math"; -@use "sass:meta"; -b { - --pi: #{math.$pi}; --e: #{math.$e}; - --pow: #{math.pow(2, 10)}; - --pow-frac: #{math.pow(1.2, math.div(1, 2.4))}; - --sqrt: #{math.sqrt(2)}; - --log10: #{math.log(100, 10)}; - --ln: #{math.log(math.$e)}; - --exp-via-pow: #{math.pow(math.$e, 2)}; - --sin-deg: #{math.sin(30deg)}; - --sin-rad: #{math.sin(0.5235987756)}; - --acos: #{math.acos(0.5)}; - --atan2: #{math.atan2(1, -1)}; - --hypot: #{math.hypot(3, 4)}; - --clamp: #{math.clamp(0, 1.5, 1)}; - --div-pct: #{math.div(50%, 100%)}; - --div3: #{math.div(1, 3)}; - --round: #{math.round(2.5)}; - --eps: #{math.$epsilon}; - --maxsafe: #{math.$max-safe-integer}; -} -@debug meta.module-functions("math"); diff --git a/_to_delete/_zz_t3.scss b/_to_delete/_zz_t3.scss deleted file mode 100644 index 20e03978..00000000 --- a/_to_delete/_zz_t3.scss +++ /dev/null @@ -1,18 +0,0 @@ -@use "sass:color"; -@use "sass:math"; -c { --d: #{color.to-gamut(oklch(70% 0.4 250), srgb, local-minde)}; - --d2: #{color.to-gamut(oklch(70% 0.4 250), $method: clip)}; - --g: #{color.is-in-gamut(oklch(70% 0.4 250))}; - --g2: #{color.is-in-gamut(oklch(70% 0.4 250), display-p3)}; -} -@function bisect($lo, $hi, $n) { - $i: 0; - @while $i < $n { - $mid: math.div($lo + $hi, 2); - @if $mid * $mid > 2 { $hi: $mid; } @else { $lo: $mid; } - $i: $i + 1; - } - @return $lo; -} -@function recurse($n) { @if $n <= 0 { @return 0; } @return 1 + recurse($n - 1); } -f { --sqrt2: #{bisect(1, 2, 200)}; --rec: #{recurse(5000)}; } diff --git a/_to_delete/_zz_t4.scss b/_to_delete/_zz_t4.scss deleted file mode 100644 index 0c1e08bb..00000000 --- a/_to_delete/_zz_t4.scss +++ /dev/null @@ -1,37 +0,0 @@ -@use "sass:color"; @use "sass:math"; -@function bisect($lo, $hi, $n) { - $i: 0; - @while $i < $n { $mid: math.div($lo + $hi, 2); - @if $mid * $mid > 2 { $hi: $mid; } @else { $lo: $mid; } - $i: $i + 1; } - @return $lo; -} -// hand-rolled sRGB -> OKLab -@function lin($c) { @if $c <= 0.04045 { @return math.div($c, 12.92); } - @return math.pow(math.div($c + 0.055, 1.055), 2.4); } -@function srgb-to-oklab($col) { - $r: lin(math.div(color.channel($col,"red",$space:rgb), 255)); - $g: lin(math.div(color.channel($col,"green",$space:rgb), 255)); - $b: lin(math.div(color.channel($col,"blue",$space:rgb), 255)); - $l: math.pow(0.4122214708*$r + 0.5363325363*$g + 0.0514459929*$b, math.div(1,3)); - $m: math.pow(0.2119034982*$r + 0.6806995451*$g + 0.1073969566*$b, math.div(1,3)); - $s: math.pow(0.0883024619*$r + 0.2817188376*$g + 0.6299787005*$b, math.div(1,3)); - @return (L: 0.2104542553*$l + 0.7936177850*$m - 0.0040720468*$s, - a: 1.9779984951*$l - 2.4285922050*$m + 0.4505937099*$s, - b: 0.0259040371*$l + 0.7827717662*$m - 0.8086757660*$s); -} -// WCAG relative luminance + contrast -@function lum($col) { - $r: lin(math.div(color.channel($col,"red",$space:rgb),255)); - $g: lin(math.div(color.channel($col,"green",$space:rgb),255)); - $b: lin(math.div(color.channel($col,"blue",$space:rgb),255)); - @return 0.2126*$r + 0.7152*$g + 0.0722*$b; -} -@function wcag($a, $b) { $la: lum($a); $lb: lum($b); - @if $la < $lb { $t: $la; $la: $lb; $lb: $t; } - @return math.div($la + 0.05, $lb + 0.05); } -g { --sqrt2: #{bisect(1,2,200)}; - --manual-oklab: #{srgb-to-oklab(#3f51b5)}; - --builtin-oklab: #{color.to-space(#3f51b5, oklab)}; - --wcag: #{wcag(#3f51b5, #fff)}; - --wcag2: #{wcag(#000, #fff)}; } diff --git a/_to_delete/_zz_t5.scss b/_to_delete/_zz_t5.scss deleted file mode 100644 index 320e4fc2..00000000 --- a/_to_delete/_zz_t5.scss +++ /dev/null @@ -1,32 +0,0 @@ -@use "sass:color"; @use "sass:math"; @use "sass:map"; -@function lin($c) { @if $c <= 0.04045 { @return math.div($c, 12.92); } - @return math.pow(math.div($c + 0.055, 1.055), 2.4); } -@function srgb-to-oklab($col) { - $r: lin(math.div(color.channel($col,"red",$space:rgb), 255)); - $g: lin(math.div(color.channel($col,"green",$space:rgb), 255)); - $b: lin(math.div(color.channel($col,"blue",$space:rgb), 255)); - $l: math.pow(0.4122214708*$r + 0.5363325363*$g + 0.0514459929*$b, math.div(1,3)); - $m: math.pow(0.2119034982*$r + 0.6806995451*$g + 0.1073969566*$b, math.div(1,3)); - $s: math.pow(0.0883024619*$r + 0.2817188376*$g + 0.6299787005*$b, math.div(1,3)); - @return (L: 0.2104542553*$l + 0.7936177850*$m - 0.0040720468*$s, - a: 1.9779984951*$l - 2.4285922050*$m + 0.4505937099*$s, - b: 0.0259040371*$l + 0.7827717662*$m - 0.8086757660*$s); -} -@function lum($col) { - $r: lin(math.div(color.channel($col,"red",$space:rgb),255)); - $g: lin(math.div(color.channel($col,"green",$space:rgb),255)); - $b: lin(math.div(color.channel($col,"blue",$space:rgb),255)); - @return 0.2126*$r + 0.7152*$g + 0.0722*$b; } -@function wcag($a,$b) { $la: lum($a); $lb: lum($b); - @if $la < $lb { $t: $la; $la: $lb; $lb: $t; } - @return math.div($la + 0.05, $lb + 0.05); } -$m: srgb-to-oklab(#3f51b5); -g { --mL: #{map.get($m,L)}; --ma: #{map.get($m,a)}; --mb: #{map.get($m,b)}; - --builtin: #{color.to-space(#3f51b5, oklab)}; - --wcag-blue-white: #{wcag(#3f51b5, #fff)}; - --wcag-bw: #{wcag(#000,#fff)}; - // precision: is it stored full-double or truncated? - --p1: #{0.12345678901234567890}; - --p2: #{0.1234567890123 * 1000000000000}; - --eps-test: #{1 + 0.00000000001 - 1}; -} diff --git a/_to_delete/_zz_t6.scss b/_to_delete/_zz_t6.scss deleted file mode 100644 index 07fe149a..00000000 --- a/_to_delete/_zz_t6.scss +++ /dev/null @@ -1,20 +0,0 @@ -@use "sass:color"; -$ok: oklch(70% 0.15 250); -// 1. plain declaration -.a { color: $ok; background: oklch(60% 0.2 30); } -// 2. custom property (needs interpolation) -.b { --brand: #{$ok}; --brand2: #{color.to-space(#3f51b5, oklch)}; } -// 3. does a legacy op force rgb? -.c { color: color.adjust($ok, $lightness: 5%); } -.d { color: color.to-space($ok, srgb); } -.e { color: color.to-gamut($ok, srgb, local-minde); } -.f { color: color.to-space(color.to-gamut($ok, srgb, local-minde), srgb); } -.g { color: color.to-space($ok, rgb); } -// 4. hue unit -.h { color: oklch(70% 0.15 250deg); } -// 5. alpha -.i { color: oklch(70% 0.15 250 / 0.5); } -// 6. relative color syntax passthrough? -.j { color: oklch(from #3f51b5 l c h); } -// 7. none / missing channels -.k { color: oklch(70% 0.15 none); } diff --git a/_to_delete/_zz_t7.scss b/_to_delete/_zz_t7.scss deleted file mode 100644 index e476fd30..00000000 --- a/_to_delete/_zz_t7.scss +++ /dev/null @@ -1,14 +0,0 @@ -@use "sass:color"; @use "sass:meta"; @use "sass:math"; -$m: oklch(70% 0.15 none); -a { --type: #{meta.type-of($m)}; - --missing: #{color.is-missing($m, "hue")}; - --powerless: #{color.is-powerless(oklch(70% 0 250), "hue")}; - --same2: #{color.same(#f00, rgb(255 0 0))}; - --ch-alpha: #{color.channel(#f00, "alpha")}; - // channel with $space on non-matching color - --cross: #{color.channel(oklch(70% 0.15 250), "red", $space: rgb)}; - --cross2: #{color.channel(oklch(70% 0.15 250), "lightness", $space: hsl)}; - // out of range channel clamping? - --oor: #{oklch(150% 0.15 250)}; - --neg: #{oklch(70% -0.5 250)}; -} diff --git a/_to_delete/_zz_t8.scss b/_to_delete/_zz_t8.scss deleted file mode 100644 index e251fba7..00000000 --- a/_to_delete/_zz_t8.scss +++ /dev/null @@ -1,11 +0,0 @@ -@use "sass:color"; @use "sass:meta"; @use "sass:string"; -a { - // is color-mix() evaluated? - --cm: #{color-mix(in oklch, red, blue)}; - --cmtype: #{meta.type-of(color-mix(in oklch, red, blue))}; - // can sass read a var()? - --v: #{meta.type-of(var(--x))}; - // light-dark passthrough - --ld: light-dark(#fff, #000); -} -@debug meta.module-functions("color"); diff --git a/_to_delete/_zz_t9.scss b/_to_delete/_zz_t9.scss deleted file mode 100644 index 07c625fb..00000000 --- a/_to_delete/_zz_t9.scss +++ /dev/null @@ -1,9 +0,0 @@ -@use "sass:color"; -a { - --g1: #{oklch(70% 0.15 250)}; - --g3: #{color(display-p3 1 0 0)}; - --g4: #{lab(50% 40 -30)}; - --g5: #{lch(50% 40 250)}; - --g6: #{oklab(0.7 0.1 -0.1)}; - --g7: #{hwb(120 20% 30%)}; -} diff --git a/_to_delete/_zz_z.scss b/_to_delete/_zz_z.scss deleted file mode 100644 index 82d4cae4..00000000 --- a/_to_delete/_zz_z.scss +++ /dev/null @@ -1,10 +0,0 @@ -@use "sass:color"; -$k: color.to-space(#3f51b5, oklch); -z { - --a: #{color.change($k, $lightness: 0.85)}; - --b: #{color.change($k, $lightness: 85%)}; - --c: #{color.change($k, $lightness: 0.85, $space: oklch)}; - --d: #{color.channel($k, "lightness")}; - --mix1: #{color.mix($k, color.to-space(#fff, oklch), 50%, oklch)}; - --mix2: #{color.mix(#3f51b5, #fff, 50%, oklch)}; -} diff --git a/_to_delete/git-index.lock b/_to_delete/git-index.lock deleted file mode 100644 index e69de29b..00000000 diff --git a/_to_delete/git-index.lock2 b/_to_delete/git-index.lock2 deleted file mode 100644 index e69de29b..00000000 diff --git a/_to_delete/l5 b/_to_delete/l5 deleted file mode 100644 index e69de29b..00000000 diff --git a/_to_delete/theming-tmp/dark.scss b/_to_delete/theming-tmp/dark.scss deleted file mode 100644 index 5e20e5f9..00000000 --- a/_to_delete/theming-tmp/dark.scss +++ /dev/null @@ -1,5 +0,0 @@ -@use '../sass/color' as *; -$d: palette($primary: #09f, $secondary: #df1b74, $surface: #1a1a24, $gray: #dcdce4); -dark-gray { @each $v in ('50','100','300','500','700','900') { #{$v}: color($d, gray, $v); } } -dark-primary { @each $v in ('100','500','900') { #{$v}: color($d, primary, $v); } } -surface { s: color($d, surface, 500); } diff --git a/_to_delete/theming-tmp/e2e.css b/_to_delete/theming-tmp/e2e.css deleted file mode 100644 index 5a1792a8..00000000 --- a/_to_delete/theming-tmp/e2e.css +++ /dev/null @@ -1,1044 +0,0 @@ -:root { - --ig-wcag-a: 0.31; - --ig-wcag-aa: 0.185; - --ig-wcag-aaa: 0.178; - --ig-contrast-level: var(--ig-wcag-aa); - --y: clamp(0, (y / var(--ig-contrast-level) - 1) * -infinity, 1); - --y-contrast: xyz-d65 var(--y) var(--y) var(--y); -} - -:root { - --ig-primary-50: hsl(from var(--ig-primary-500) h calc(s * 1.23) calc(l * 1.78)); - --ig-primary-50-contrast: hsla(from color(from var(--ig-primary-50) var(--y-contrast)) h 0 l/1); - --ig-primary-100: hsl(from var(--ig-primary-500) h calc(s * 0.8) calc(l * 1.66)); - --ig-primary-100-contrast: hsla(from color(from var(--ig-primary-100) var(--y-contrast)) h 0 l/1); - --ig-primary-200: hsl(from var(--ig-primary-500) h calc(s * 0.64) calc(l * 1.43)); - --ig-primary-200-contrast: hsla(from color(from var(--ig-primary-200) var(--y-contrast)) h 0 l/1); - --ig-primary-300: hsl(from var(--ig-primary-500) h calc(s * 0.73) calc(l * 1.19)); - --ig-primary-300-contrast: hsla(from color(from var(--ig-primary-300) var(--y-contrast)) h 0 l/1); - --ig-primary-400: hsl(from var(--ig-primary-500) h calc(s * 0.875) calc(l * 1.08)); - --ig-primary-400-contrast: hsla(from color(from var(--ig-primary-400) var(--y-contrast)) h 0 l/1); - --ig-primary-500: #09f; - --ig-primary-500-contrast: hsla(from color(from var(--ig-primary-500) var(--y-contrast)) h 0 l/1); - --ig-primary-600: hsl(from var(--ig-primary-500) h calc(s * 1.26) calc(l * 0.89)); - --ig-primary-600-contrast: hsla(from color(from var(--ig-primary-600) var(--y-contrast)) h 0 l/1); - --ig-primary-700: hsl(from var(--ig-primary-500) h calc(s * 1.26) calc(l * 0.81)); - --ig-primary-700-contrast: hsla(from color(from var(--ig-primary-700) var(--y-contrast)) h 0 l/1); - --ig-primary-800: hsl(from var(--ig-primary-500) h calc(s * 1.26) calc(l * 0.73)); - --ig-primary-800-contrast: hsla(from color(from var(--ig-primary-800) var(--y-contrast)) h 0 l/1); - --ig-primary-900: hsl(from var(--ig-primary-500) h calc(s * 1.26) calc(l * 0.64)); - --ig-primary-900-contrast: hsla(from color(from var(--ig-primary-900) var(--y-contrast)) h 0 l/1); - --ig-primary-seed: #09f; - --ig-primary-seed-contrast: hsla(from color(from var(--ig-primary-seed) var(--y-contrast)) h 0 l/1); - --ig-primary-A100: hsl(from var(--ig-primary-500) h calc(s * 1.23) calc(l * 1.34)); - --ig-primary-A100-contrast: hsla(from color(from var(--ig-primary-A100) var(--y-contrast)) h 0 l/1); - --ig-primary-A200: hsl(from var(--ig-primary-500) h calc(s * 1.22) calc(l * 1.16)); - --ig-primary-A200-contrast: hsla(from color(from var(--ig-primary-A200) var(--y-contrast)) h 0 l/1); - --ig-primary-A400: hsl(from var(--ig-primary-500) h calc(s * 1.23) calc(l * 0.91)); - --ig-primary-A400-contrast: hsla(from color(from var(--ig-primary-A400) var(--y-contrast)) h 0 l/1); - --ig-primary-A700: hsl(from var(--ig-primary-500) h calc(s * 1.23) calc(l * 0.65)); - --ig-primary-A700-contrast: hsla(from color(from var(--ig-primary-A700) var(--y-contrast)) h 0 l/1); - --ig-secondary-50: hsl(from var(--ig-secondary-500) h calc(s * 1.23) calc(l * 1.78)); - --ig-secondary-50-contrast: hsla(from color(from var(--ig-secondary-50) var(--y-contrast)) h 0 l/1); - --ig-secondary-100: hsl(from var(--ig-secondary-500) h calc(s * 0.8) calc(l * 1.66)); - --ig-secondary-100-contrast: hsla(from color(from var(--ig-secondary-100) var(--y-contrast)) h 0 l/1); - --ig-secondary-200: hsl(from var(--ig-secondary-500) h calc(s * 0.64) calc(l * 1.43)); - --ig-secondary-200-contrast: hsla(from color(from var(--ig-secondary-200) var(--y-contrast)) h 0 l/1); - --ig-secondary-300: hsl(from var(--ig-secondary-500) h calc(s * 0.73) calc(l * 1.19)); - --ig-secondary-300-contrast: hsla(from color(from var(--ig-secondary-300) var(--y-contrast)) h 0 l/1); - --ig-secondary-400: hsl(from var(--ig-secondary-500) h calc(s * 0.875) calc(l * 1.08)); - --ig-secondary-400-contrast: hsla(from color(from var(--ig-secondary-400) var(--y-contrast)) h 0 l/1); - --ig-secondary-500: #df1b74; - --ig-secondary-500-contrast: hsla(from color(from var(--ig-secondary-500) var(--y-contrast)) h 0 l/1); - --ig-secondary-600: hsl(from var(--ig-secondary-500) h calc(s * 1.26) calc(l * 0.89)); - --ig-secondary-600-contrast: hsla(from color(from var(--ig-secondary-600) var(--y-contrast)) h 0 l/1); - --ig-secondary-700: hsl(from var(--ig-secondary-500) h calc(s * 1.26) calc(l * 0.81)); - --ig-secondary-700-contrast: hsla(from color(from var(--ig-secondary-700) var(--y-contrast)) h 0 l/1); - --ig-secondary-800: hsl(from var(--ig-secondary-500) h calc(s * 1.26) calc(l * 0.73)); - --ig-secondary-800-contrast: hsla(from color(from var(--ig-secondary-800) var(--y-contrast)) h 0 l/1); - --ig-secondary-900: hsl(from var(--ig-secondary-500) h calc(s * 1.26) calc(l * 0.64)); - --ig-secondary-900-contrast: hsla(from color(from var(--ig-secondary-900) var(--y-contrast)) h 0 l/1); - --ig-secondary-seed: #df1b74; - --ig-secondary-seed-contrast: hsla(from color(from var(--ig-secondary-seed) var(--y-contrast)) h 0 l/1); - --ig-secondary-A100: hsl(from var(--ig-secondary-500) h calc(s * 1.23) calc(l * 1.34)); - --ig-secondary-A100-contrast: hsla(from color(from var(--ig-secondary-A100) var(--y-contrast)) h 0 l/1); - --ig-secondary-A200: hsl(from var(--ig-secondary-500) h calc(s * 1.22) calc(l * 1.16)); - --ig-secondary-A200-contrast: hsla(from color(from var(--ig-secondary-A200) var(--y-contrast)) h 0 l/1); - --ig-secondary-A400: hsl(from var(--ig-secondary-500) h calc(s * 1.23) calc(l * 0.91)); - --ig-secondary-A400-contrast: hsla(from color(from var(--ig-secondary-A400) var(--y-contrast)) h 0 l/1); - --ig-secondary-A700: hsl(from var(--ig-secondary-500) h calc(s * 1.23) calc(l * 0.65)); - --ig-secondary-A700-contrast: hsla(from color(from var(--ig-secondary-A700) var(--y-contrast)) h 0 l/1); - --ig-gray-50: hsl(from var(--ig-gray-500) h s 98%); - --ig-gray-50-contrast: hsla(from color(from var(--ig-gray-50) var(--y-contrast)) h 0 l/1); - --ig-gray-100: hsl(from var(--ig-gray-500) h s 96%); - --ig-gray-100-contrast: hsla(from color(from var(--ig-gray-100) var(--y-contrast)) h 0 l/1); - --ig-gray-200: hsl(from var(--ig-gray-500) h s 93%); - --ig-gray-200-contrast: hsla(from color(from var(--ig-gray-200) var(--y-contrast)) h 0 l/1); - --ig-gray-300: hsl(from var(--ig-gray-500) h s 88%); - --ig-gray-300-contrast: hsla(from color(from var(--ig-gray-300) var(--y-contrast)) h 0 l/1); - --ig-gray-400: hsl(from var(--ig-gray-500) h s 74%); - --ig-gray-400-contrast: hsla(from color(from var(--ig-gray-400) var(--y-contrast)) h 0 l/1); - --ig-gray-500: hsl(0, 0%, 62%); - --ig-gray-500-contrast: hsla(from color(from var(--ig-gray-500) var(--y-contrast)) h 0 l/1); - --ig-gray-600: hsl(from var(--ig-gray-500) h s 54%); - --ig-gray-600-contrast: hsla(from color(from var(--ig-gray-600) var(--y-contrast)) h 0 l/1); - --ig-gray-700: hsl(from var(--ig-gray-500) h s 38%); - --ig-gray-700-contrast: hsla(from color(from var(--ig-gray-700) var(--y-contrast)) h 0 l/1); - --ig-gray-800: hsl(from var(--ig-gray-500) h s 26%); - --ig-gray-800-contrast: hsla(from color(from var(--ig-gray-800) var(--y-contrast)) h 0 l/1); - --ig-gray-900: hsl(from var(--ig-gray-500) h s 13%); - --ig-gray-900-contrast: hsla(from color(from var(--ig-gray-900) var(--y-contrast)) h 0 l/1); - --ig-gray-seed: #000; - --ig-gray-seed-contrast: hsla(from color(from var(--ig-gray-seed) var(--y-contrast)) h 0 l/1); - --ig-surface-50: hsl(from var(--ig-surface-500) h calc(s * 1.23) calc(l * 1.78)); - --ig-surface-50-contrast: hsla(from color(from var(--ig-surface-50) var(--y-contrast)) h 0 l/1); - --ig-surface-100: hsl(from var(--ig-surface-500) h calc(s * 0.8) calc(l * 1.66)); - --ig-surface-100-contrast: hsla(from color(from var(--ig-surface-100) var(--y-contrast)) h 0 l/1); - --ig-surface-200: hsl(from var(--ig-surface-500) h calc(s * 0.64) calc(l * 1.43)); - --ig-surface-200-contrast: hsla(from color(from var(--ig-surface-200) var(--y-contrast)) h 0 l/1); - --ig-surface-300: hsl(from var(--ig-surface-500) h calc(s * 0.73) calc(l * 1.19)); - --ig-surface-300-contrast: hsla(from color(from var(--ig-surface-300) var(--y-contrast)) h 0 l/1); - --ig-surface-400: hsl(from var(--ig-surface-500) h calc(s * 0.875) calc(l * 1.08)); - --ig-surface-400-contrast: hsla(from color(from var(--ig-surface-400) var(--y-contrast)) h 0 l/1); - --ig-surface-500: white; - --ig-surface-500-contrast: hsla(from color(from var(--ig-surface-500) var(--y-contrast)) h 0 l/1); - --ig-surface-600: hsl(from var(--ig-surface-500) h calc(s * 1.26) calc(l * 0.89)); - --ig-surface-600-contrast: hsla(from color(from var(--ig-surface-600) var(--y-contrast)) h 0 l/1); - --ig-surface-700: hsl(from var(--ig-surface-500) h calc(s * 1.26) calc(l * 0.81)); - --ig-surface-700-contrast: hsla(from color(from var(--ig-surface-700) var(--y-contrast)) h 0 l/1); - --ig-surface-800: hsl(from var(--ig-surface-500) h calc(s * 1.26) calc(l * 0.73)); - --ig-surface-800-contrast: hsla(from color(from var(--ig-surface-800) var(--y-contrast)) h 0 l/1); - --ig-surface-900: hsl(from var(--ig-surface-500) h calc(s * 1.26) calc(l * 0.64)); - --ig-surface-900-contrast: hsla(from color(from var(--ig-surface-900) var(--y-contrast)) h 0 l/1); - --ig-surface-seed: white; - --ig-surface-seed-contrast: hsla(from color(from var(--ig-surface-seed) var(--y-contrast)) h 0 l/1); - --ig-surface-A100: hsl(from var(--ig-surface-500) h calc(s * 1.23) calc(l * 1.34)); - --ig-surface-A100-contrast: hsla(from color(from var(--ig-surface-A100) var(--y-contrast)) h 0 l/1); - --ig-surface-A200: hsl(from var(--ig-surface-500) h calc(s * 1.22) calc(l * 1.16)); - --ig-surface-A200-contrast: hsla(from color(from var(--ig-surface-A200) var(--y-contrast)) h 0 l/1); - --ig-surface-A400: hsl(from var(--ig-surface-500) h calc(s * 1.23) calc(l * 0.91)); - --ig-surface-A400-contrast: hsla(from color(from var(--ig-surface-A400) var(--y-contrast)) h 0 l/1); - --ig-surface-A700: hsl(from var(--ig-surface-500) h calc(s * 1.23) calc(l * 0.65)); - --ig-surface-A700-contrast: hsla(from color(from var(--ig-surface-A700) var(--y-contrast)) h 0 l/1); - --ig-info-50: hsl(from var(--ig-info-500) h calc(s * 1.23) calc(l * 1.78)); - --ig-info-50-contrast: hsla(from color(from var(--ig-info-50) var(--y-contrast)) h 0 l/1); - --ig-info-100: hsl(from var(--ig-info-500) h calc(s * 0.8) calc(l * 1.66)); - --ig-info-100-contrast: hsla(from color(from var(--ig-info-100) var(--y-contrast)) h 0 l/1); - --ig-info-200: hsl(from var(--ig-info-500) h calc(s * 0.64) calc(l * 1.43)); - --ig-info-200-contrast: hsla(from color(from var(--ig-info-200) var(--y-contrast)) h 0 l/1); - --ig-info-300: hsl(from var(--ig-info-500) h calc(s * 0.73) calc(l * 1.19)); - --ig-info-300-contrast: hsla(from color(from var(--ig-info-300) var(--y-contrast)) h 0 l/1); - --ig-info-400: hsl(from var(--ig-info-500) h calc(s * 0.875) calc(l * 1.08)); - --ig-info-400-contrast: hsla(from color(from var(--ig-info-400) var(--y-contrast)) h 0 l/1); - --ig-info-500: #1377d5; - --ig-info-500-contrast: hsla(from color(from var(--ig-info-500) var(--y-contrast)) h 0 l/1); - --ig-info-600: hsl(from var(--ig-info-500) h calc(s * 1.26) calc(l * 0.89)); - --ig-info-600-contrast: hsla(from color(from var(--ig-info-600) var(--y-contrast)) h 0 l/1); - --ig-info-700: hsl(from var(--ig-info-500) h calc(s * 1.26) calc(l * 0.81)); - --ig-info-700-contrast: hsla(from color(from var(--ig-info-700) var(--y-contrast)) h 0 l/1); - --ig-info-800: hsl(from var(--ig-info-500) h calc(s * 1.26) calc(l * 0.73)); - --ig-info-800-contrast: hsla(from color(from var(--ig-info-800) var(--y-contrast)) h 0 l/1); - --ig-info-900: hsl(from var(--ig-info-500) h calc(s * 1.26) calc(l * 0.64)); - --ig-info-900-contrast: hsla(from color(from var(--ig-info-900) var(--y-contrast)) h 0 l/1); - --ig-info-seed: #1377d5; - --ig-info-seed-contrast: hsla(from color(from var(--ig-info-seed) var(--y-contrast)) h 0 l/1); - --ig-info-A100: hsl(from var(--ig-info-500) h calc(s * 1.23) calc(l * 1.34)); - --ig-info-A100-contrast: hsla(from color(from var(--ig-info-A100) var(--y-contrast)) h 0 l/1); - --ig-info-A200: hsl(from var(--ig-info-500) h calc(s * 1.22) calc(l * 1.16)); - --ig-info-A200-contrast: hsla(from color(from var(--ig-info-A200) var(--y-contrast)) h 0 l/1); - --ig-info-A400: hsl(from var(--ig-info-500) h calc(s * 1.23) calc(l * 0.91)); - --ig-info-A400-contrast: hsla(from color(from var(--ig-info-A400) var(--y-contrast)) h 0 l/1); - --ig-info-A700: hsl(from var(--ig-info-500) h calc(s * 1.23) calc(l * 0.65)); - --ig-info-A700-contrast: hsla(from color(from var(--ig-info-A700) var(--y-contrast)) h 0 l/1); - --ig-success-50: hsl(from var(--ig-success-500) h calc(s * 1.23) calc(l * 1.78)); - --ig-success-50-contrast: hsla(from color(from var(--ig-success-50) var(--y-contrast)) h 0 l/1); - --ig-success-100: hsl(from var(--ig-success-500) h calc(s * 0.8) calc(l * 1.66)); - --ig-success-100-contrast: hsla(from color(from var(--ig-success-100) var(--y-contrast)) h 0 l/1); - --ig-success-200: hsl(from var(--ig-success-500) h calc(s * 0.64) calc(l * 1.43)); - --ig-success-200-contrast: hsla(from color(from var(--ig-success-200) var(--y-contrast)) h 0 l/1); - --ig-success-300: hsl(from var(--ig-success-500) h calc(s * 0.73) calc(l * 1.19)); - --ig-success-300-contrast: hsla(from color(from var(--ig-success-300) var(--y-contrast)) h 0 l/1); - --ig-success-400: hsl(from var(--ig-success-500) h calc(s * 0.875) calc(l * 1.08)); - --ig-success-400-contrast: hsla(from color(from var(--ig-success-400) var(--y-contrast)) h 0 l/1); - --ig-success-500: #4eb862; - --ig-success-500-contrast: hsla(from color(from var(--ig-success-500) var(--y-contrast)) h 0 l/1); - --ig-success-600: hsl(from var(--ig-success-500) h calc(s * 1.26) calc(l * 0.89)); - --ig-success-600-contrast: hsla(from color(from var(--ig-success-600) var(--y-contrast)) h 0 l/1); - --ig-success-700: hsl(from var(--ig-success-500) h calc(s * 1.26) calc(l * 0.81)); - --ig-success-700-contrast: hsla(from color(from var(--ig-success-700) var(--y-contrast)) h 0 l/1); - --ig-success-800: hsl(from var(--ig-success-500) h calc(s * 1.26) calc(l * 0.73)); - --ig-success-800-contrast: hsla(from color(from var(--ig-success-800) var(--y-contrast)) h 0 l/1); - --ig-success-900: hsl(from var(--ig-success-500) h calc(s * 1.26) calc(l * 0.64)); - --ig-success-900-contrast: hsla(from color(from var(--ig-success-900) var(--y-contrast)) h 0 l/1); - --ig-success-seed: #4eb862; - --ig-success-seed-contrast: hsla(from color(from var(--ig-success-seed) var(--y-contrast)) h 0 l/1); - --ig-success-A100: hsl(from var(--ig-success-500) h calc(s * 1.23) calc(l * 1.34)); - --ig-success-A100-contrast: hsla(from color(from var(--ig-success-A100) var(--y-contrast)) h 0 l/1); - --ig-success-A200: hsl(from var(--ig-success-500) h calc(s * 1.22) calc(l * 1.16)); - --ig-success-A200-contrast: hsla(from color(from var(--ig-success-A200) var(--y-contrast)) h 0 l/1); - --ig-success-A400: hsl(from var(--ig-success-500) h calc(s * 1.23) calc(l * 0.91)); - --ig-success-A400-contrast: hsla(from color(from var(--ig-success-A400) var(--y-contrast)) h 0 l/1); - --ig-success-A700: hsl(from var(--ig-success-500) h calc(s * 1.23) calc(l * 0.65)); - --ig-success-A700-contrast: hsla(from color(from var(--ig-success-A700) var(--y-contrast)) h 0 l/1); - --ig-warn-50: hsl(from var(--ig-warn-500) h calc(s * 1.23) calc(l * 1.78)); - --ig-warn-50-contrast: hsla(from color(from var(--ig-warn-50) var(--y-contrast)) h 0 l/1); - --ig-warn-100: hsl(from var(--ig-warn-500) h calc(s * 0.8) calc(l * 1.66)); - --ig-warn-100-contrast: hsla(from color(from var(--ig-warn-100) var(--y-contrast)) h 0 l/1); - --ig-warn-200: hsl(from var(--ig-warn-500) h calc(s * 0.64) calc(l * 1.43)); - --ig-warn-200-contrast: hsla(from color(from var(--ig-warn-200) var(--y-contrast)) h 0 l/1); - --ig-warn-300: hsl(from var(--ig-warn-500) h calc(s * 0.73) calc(l * 1.19)); - --ig-warn-300-contrast: hsla(from color(from var(--ig-warn-300) var(--y-contrast)) h 0 l/1); - --ig-warn-400: hsl(from var(--ig-warn-500) h calc(s * 0.875) calc(l * 1.08)); - --ig-warn-400-contrast: hsla(from color(from var(--ig-warn-400) var(--y-contrast)) h 0 l/1); - --ig-warn-500: #faa419; - --ig-warn-500-contrast: hsla(from color(from var(--ig-warn-500) var(--y-contrast)) h 0 l/1); - --ig-warn-600: hsl(from var(--ig-warn-500) h calc(s * 1.26) calc(l * 0.89)); - --ig-warn-600-contrast: hsla(from color(from var(--ig-warn-600) var(--y-contrast)) h 0 l/1); - --ig-warn-700: hsl(from var(--ig-warn-500) h calc(s * 1.26) calc(l * 0.81)); - --ig-warn-700-contrast: hsla(from color(from var(--ig-warn-700) var(--y-contrast)) h 0 l/1); - --ig-warn-800: hsl(from var(--ig-warn-500) h calc(s * 1.26) calc(l * 0.73)); - --ig-warn-800-contrast: hsla(from color(from var(--ig-warn-800) var(--y-contrast)) h 0 l/1); - --ig-warn-900: hsl(from var(--ig-warn-500) h calc(s * 1.26) calc(l * 0.64)); - --ig-warn-900-contrast: hsla(from color(from var(--ig-warn-900) var(--y-contrast)) h 0 l/1); - --ig-warn-seed: #faa419; - --ig-warn-seed-contrast: hsla(from color(from var(--ig-warn-seed) var(--y-contrast)) h 0 l/1); - --ig-warn-A100: hsl(from var(--ig-warn-500) h calc(s * 1.23) calc(l * 1.34)); - --ig-warn-A100-contrast: hsla(from color(from var(--ig-warn-A100) var(--y-contrast)) h 0 l/1); - --ig-warn-A200: hsl(from var(--ig-warn-500) h calc(s * 1.22) calc(l * 1.16)); - --ig-warn-A200-contrast: hsla(from color(from var(--ig-warn-A200) var(--y-contrast)) h 0 l/1); - --ig-warn-A400: hsl(from var(--ig-warn-500) h calc(s * 1.23) calc(l * 0.91)); - --ig-warn-A400-contrast: hsla(from color(from var(--ig-warn-A400) var(--y-contrast)) h 0 l/1); - --ig-warn-A700: hsl(from var(--ig-warn-500) h calc(s * 1.23) calc(l * 0.65)); - --ig-warn-A700-contrast: hsla(from color(from var(--ig-warn-A700) var(--y-contrast)) h 0 l/1); - --ig-error-50: hsl(from var(--ig-error-500) h calc(s * 1.23) calc(l * 1.78)); - --ig-error-50-contrast: hsla(from color(from var(--ig-error-50) var(--y-contrast)) h 0 l/1); - --ig-error-100: hsl(from var(--ig-error-500) h calc(s * 0.8) calc(l * 1.66)); - --ig-error-100-contrast: hsla(from color(from var(--ig-error-100) var(--y-contrast)) h 0 l/1); - --ig-error-200: hsl(from var(--ig-error-500) h calc(s * 0.64) calc(l * 1.43)); - --ig-error-200-contrast: hsla(from color(from var(--ig-error-200) var(--y-contrast)) h 0 l/1); - --ig-error-300: hsl(from var(--ig-error-500) h calc(s * 0.73) calc(l * 1.19)); - --ig-error-300-contrast: hsla(from color(from var(--ig-error-300) var(--y-contrast)) h 0 l/1); - --ig-error-400: hsl(from var(--ig-error-500) h calc(s * 0.875) calc(l * 1.08)); - --ig-error-400-contrast: hsla(from color(from var(--ig-error-400) var(--y-contrast)) h 0 l/1); - --ig-error-500: #ff134a; - --ig-error-500-contrast: hsla(from color(from var(--ig-error-500) var(--y-contrast)) h 0 l/1); - --ig-error-600: hsl(from var(--ig-error-500) h calc(s * 1.26) calc(l * 0.89)); - --ig-error-600-contrast: hsla(from color(from var(--ig-error-600) var(--y-contrast)) h 0 l/1); - --ig-error-700: hsl(from var(--ig-error-500) h calc(s * 1.26) calc(l * 0.81)); - --ig-error-700-contrast: hsla(from color(from var(--ig-error-700) var(--y-contrast)) h 0 l/1); - --ig-error-800: hsl(from var(--ig-error-500) h calc(s * 1.26) calc(l * 0.73)); - --ig-error-800-contrast: hsla(from color(from var(--ig-error-800) var(--y-contrast)) h 0 l/1); - --ig-error-900: hsl(from var(--ig-error-500) h calc(s * 1.26) calc(l * 0.64)); - --ig-error-900-contrast: hsla(from color(from var(--ig-error-900) var(--y-contrast)) h 0 l/1); - --ig-error-seed: #ff134a; - --ig-error-seed-contrast: hsla(from color(from var(--ig-error-seed) var(--y-contrast)) h 0 l/1); - --ig-error-A100: hsl(from var(--ig-error-500) h calc(s * 1.23) calc(l * 1.34)); - --ig-error-A100-contrast: hsla(from color(from var(--ig-error-A100) var(--y-contrast)) h 0 l/1); - --ig-error-A200: hsl(from var(--ig-error-500) h calc(s * 1.22) calc(l * 1.16)); - --ig-error-A200-contrast: hsla(from color(from var(--ig-error-A200) var(--y-contrast)) h 0 l/1); - --ig-error-A400: hsl(from var(--ig-error-500) h calc(s * 1.23) calc(l * 0.91)); - --ig-error-A400-contrast: hsla(from color(from var(--ig-error-A400) var(--y-contrast)) h 0 l/1); - --ig-error-A700: hsl(from var(--ig-error-500) h calc(s * 1.23) calc(l * 0.65)); - --ig-error-A700-contrast: hsla(from color(from var(--ig-error-A700) var(--y-contrast)) h 0 l/1); -} - -:root { - --ig-font-family: Titillium Web, sans-serif; - --ig-base-font-size: 16px; - --ig-h1-font-size: 6rem; - --ig-h1-font-weight: 300; - --ig-h1-font-style: normal; - --ig-h1-line-height: 7rem; - --ig-h1-letter-spacing: -0.09375rem; - --ig-h1-text-transform: none; - --ig-h1-margin-top: 1.75rem; - --ig-h1-margin-bottom: 3.5rem; - --ig-h2-font-size: 3.75rem; - --ig-h2-font-weight: 300; - --ig-h2-font-style: normal; - --ig-h2-line-height: 4.4375rem; - --ig-h2-letter-spacing: -0.03125rem; - --ig-h2-text-transform: none; - --ig-h2-margin-top: 1.75rem; - --ig-h2-margin-bottom: 1.75rem; - --ig-h3-font-size: 3rem; - --ig-h3-font-weight: 400; - --ig-h3-font-style: normal; - --ig-h3-line-height: 3.5625rem; - --ig-h3-letter-spacing: 0; - --ig-h3-text-transform: none; - --ig-h3-margin-top: 1.75rem; - --ig-h3-margin-bottom: 0; - --ig-h4-font-size: 2.125rem; - --ig-h4-font-weight: 400; - --ig-h4-font-style: normal; - --ig-h4-line-height: 2.5rem; - --ig-h4-letter-spacing: 0.015625rem; - --ig-h4-text-transform: none; - --ig-h4-margin-top: 1.75rem; - --ig-h4-margin-bottom: 0; - --ig-h5-font-size: 1.5rem; - --ig-h5-font-weight: 400; - --ig-h5-font-style: normal; - --ig-h5-line-height: 1.75rem; - --ig-h5-letter-spacing: 0; - --ig-h5-text-transform: none; - --ig-h5-margin-top: 1.75rem; - --ig-h5-margin-bottom: 0; - --ig-h6-font-size: 1.25rem; - --ig-h6-font-weight: 600; - --ig-h6-font-style: normal; - --ig-h6-line-height: 1.5rem; - --ig-h6-letter-spacing: 0.009375rem; - --ig-h6-text-transform: none; - --ig-h6-margin-top: 0; - --ig-h6-margin-bottom: 0; - --ig-subtitle-1-font-size: 1rem; - --ig-subtitle-1-font-weight: 400; - --ig-subtitle-1-font-style: normal; - --ig-subtitle-1-line-height: 1.5rem; - --ig-subtitle-1-letter-spacing: 0.009375rem; - --ig-subtitle-1-text-transform: none; - --ig-subtitle-1-margin-top: 0; - --ig-subtitle-1-margin-bottom: 0; - --ig-subtitle-2-font-size: 0.875rem; - --ig-subtitle-2-font-weight: 600; - --ig-subtitle-2-font-style: normal; - --ig-subtitle-2-line-height: 1.5rem; - --ig-subtitle-2-letter-spacing: 0.00625rem; - --ig-subtitle-2-text-transform: none; - --ig-subtitle-2-margin-top: 0; - --ig-subtitle-2-margin-bottom: 0; - --ig-body-1-font-size: 1rem; - --ig-body-1-font-weight: 400; - --ig-body-1-font-style: normal; - --ig-body-1-line-height: 1.75rem; - --ig-body-1-letter-spacing: 0.03125rem; - --ig-body-1-text-transform: none; - --ig-body-1-margin-top: 1.75rem; - --ig-body-1-margin-bottom: 1rem; - --ig-body-2-font-size: 0.875rem; - --ig-body-2-font-weight: 400; - --ig-body-2-font-style: normal; - --ig-body-2-line-height: 1.25rem; - --ig-body-2-letter-spacing: 0.015625rem; - --ig-body-2-text-transform: none; - --ig-body-2-margin-top: 0; - --ig-body-2-margin-bottom: 0; - --ig-button-font-size: 0.875rem; - --ig-button-font-weight: 600; - --ig-button-font-style: normal; - --ig-button-line-height: 1rem; - --ig-button-letter-spacing: 0.046875rem; - --ig-button-text-transform: uppercase; - --ig-button-margin-top: 0; - --ig-button-margin-bottom: 0; - --ig-caption-font-size: 0.75rem; - --ig-caption-font-weight: 400; - --ig-caption-font-style: normal; - --ig-caption-line-height: 1rem; - --ig-caption-letter-spacing: 0.025rem; - --ig-caption-text-transform: none; - --ig-caption-margin-top: 0; - --ig-caption-margin-bottom: 0; - --ig-overline-font-size: 0.625rem; - --ig-overline-font-weight: 400; - --ig-overline-font-style: normal; - --ig-overline-line-height: 1rem; - --ig-overline-letter-spacing: 0.09375rem; - --ig-overline-text-transform: uppercase; - --ig-overline-margin-top: 0; - --ig-overline-margin-bottom: 0; -} - -.ig-typography h1 { - font-family: var(--ig-h1-font-family, var(--ig-font-family)); - font-size: var(--ig-h1-font-size); - font-weight: var(--ig-h1-font-weight); - font-style: var(--ig-h1-font-style); - line-height: var(--ig-h1-line-height); - letter-spacing: var(--ig-h1-letter-spacing); - text-transform: var(--ig-h1-text-transform); - margin-top: var(--ig-h1-margin-top); - margin-bottom: var(--ig-h1-margin-bottom); -} -.ig-typography h2 { - font-family: var(--ig-h2-font-family, var(--ig-font-family)); - font-size: var(--ig-h2-font-size); - font-weight: var(--ig-h2-font-weight); - font-style: var(--ig-h2-font-style); - line-height: var(--ig-h2-line-height); - letter-spacing: var(--ig-h2-letter-spacing); - text-transform: var(--ig-h2-text-transform); - margin-top: var(--ig-h2-margin-top); - margin-bottom: var(--ig-h2-margin-bottom); -} -.ig-typography h3 { - font-family: var(--ig-h3-font-family, var(--ig-font-family)); - font-size: var(--ig-h3-font-size); - font-weight: var(--ig-h3-font-weight); - font-style: var(--ig-h3-font-style); - line-height: var(--ig-h3-line-height); - letter-spacing: var(--ig-h3-letter-spacing); - text-transform: var(--ig-h3-text-transform); - margin-top: var(--ig-h3-margin-top); - margin-bottom: var(--ig-h3-margin-bottom); -} -.ig-typography h4 { - font-family: var(--ig-h4-font-family, var(--ig-font-family)); - font-size: var(--ig-h4-font-size); - font-weight: var(--ig-h4-font-weight); - font-style: var(--ig-h4-font-style); - line-height: var(--ig-h4-line-height); - letter-spacing: var(--ig-h4-letter-spacing); - text-transform: var(--ig-h4-text-transform); - margin-top: var(--ig-h4-margin-top); - margin-bottom: var(--ig-h4-margin-bottom); -} -.ig-typography h5 { - font-family: var(--ig-h5-font-family, var(--ig-font-family)); - font-size: var(--ig-h5-font-size); - font-weight: var(--ig-h5-font-weight); - font-style: var(--ig-h5-font-style); - line-height: var(--ig-h5-line-height); - letter-spacing: var(--ig-h5-letter-spacing); - text-transform: var(--ig-h5-text-transform); - margin-top: var(--ig-h5-margin-top); - margin-bottom: var(--ig-h5-margin-bottom); -} -.ig-typography h6 { - font-family: var(--ig-h6-font-family, var(--ig-font-family)); - font-size: var(--ig-h6-font-size); - font-weight: var(--ig-h6-font-weight); - font-style: var(--ig-h6-font-style); - line-height: var(--ig-h6-line-height); - letter-spacing: var(--ig-h6-letter-spacing); - text-transform: var(--ig-h6-text-transform); - margin-top: var(--ig-h6-margin-top); - margin-bottom: var(--ig-h6-margin-bottom); -} -.ig-typography p { - font-family: var(--ig-body-1-font-family, var(--ig-font-family)); - font-size: var(--ig-body-1-font-size); - font-weight: var(--ig-body-1-font-weight); - font-style: var(--ig-body-1-font-style); - line-height: var(--ig-body-1-line-height); - letter-spacing: var(--ig-body-1-letter-spacing); - text-transform: var(--ig-body-1-text-transform); - margin-top: var(--ig-body-1-margin-top); - margin-bottom: var(--ig-body-1-margin-bottom); -} -.ig-typography .ig-typography__h1 { - font-family: var(--ig-h1-font-family, var(--ig-font-family)); - font-size: var(--ig-h1-font-size); - font-weight: var(--ig-h1-font-weight); - font-style: var(--ig-h1-font-style); - line-height: var(--ig-h1-line-height); - letter-spacing: var(--ig-h1-letter-spacing); - text-transform: var(--ig-h1-text-transform); - margin-top: var(--ig-h1-margin-top); - margin-bottom: var(--ig-h1-margin-bottom); -} -.ig-typography .ig-typography__h2 { - font-family: var(--ig-h2-font-family, var(--ig-font-family)); - font-size: var(--ig-h2-font-size); - font-weight: var(--ig-h2-font-weight); - font-style: var(--ig-h2-font-style); - line-height: var(--ig-h2-line-height); - letter-spacing: var(--ig-h2-letter-spacing); - text-transform: var(--ig-h2-text-transform); - margin-top: var(--ig-h2-margin-top); - margin-bottom: var(--ig-h2-margin-bottom); -} -.ig-typography .ig-typography__h3 { - font-family: var(--ig-h3-font-family, var(--ig-font-family)); - font-size: var(--ig-h3-font-size); - font-weight: var(--ig-h3-font-weight); - font-style: var(--ig-h3-font-style); - line-height: var(--ig-h3-line-height); - letter-spacing: var(--ig-h3-letter-spacing); - text-transform: var(--ig-h3-text-transform); - margin-top: var(--ig-h3-margin-top); - margin-bottom: var(--ig-h3-margin-bottom); -} -.ig-typography .ig-typography__h4 { - font-family: var(--ig-h4-font-family, var(--ig-font-family)); - font-size: var(--ig-h4-font-size); - font-weight: var(--ig-h4-font-weight); - font-style: var(--ig-h4-font-style); - line-height: var(--ig-h4-line-height); - letter-spacing: var(--ig-h4-letter-spacing); - text-transform: var(--ig-h4-text-transform); - margin-top: var(--ig-h4-margin-top); - margin-bottom: var(--ig-h4-margin-bottom); -} -.ig-typography .ig-typography__h5 { - font-family: var(--ig-h5-font-family, var(--ig-font-family)); - font-size: var(--ig-h5-font-size); - font-weight: var(--ig-h5-font-weight); - font-style: var(--ig-h5-font-style); - line-height: var(--ig-h5-line-height); - letter-spacing: var(--ig-h5-letter-spacing); - text-transform: var(--ig-h5-text-transform); - margin-top: var(--ig-h5-margin-top); - margin-bottom: var(--ig-h5-margin-bottom); -} -.ig-typography .ig-typography__h6 { - font-family: var(--ig-h6-font-family, var(--ig-font-family)); - font-size: var(--ig-h6-font-size); - font-weight: var(--ig-h6-font-weight); - font-style: var(--ig-h6-font-style); - line-height: var(--ig-h6-line-height); - letter-spacing: var(--ig-h6-letter-spacing); - text-transform: var(--ig-h6-text-transform); - margin-top: var(--ig-h6-margin-top); - margin-bottom: var(--ig-h6-margin-bottom); -} -.ig-typography .ig-typography__subtitle-1 { - font-family: var(--ig-subtitle-1-font-family, var(--ig-font-family)); - font-size: var(--ig-subtitle-1-font-size); - font-weight: var(--ig-subtitle-1-font-weight); - font-style: var(--ig-subtitle-1-font-style); - line-height: var(--ig-subtitle-1-line-height); - letter-spacing: var(--ig-subtitle-1-letter-spacing); - text-transform: var(--ig-subtitle-1-text-transform); - margin-top: var(--ig-subtitle-1-margin-top); - margin-bottom: var(--ig-subtitle-1-margin-bottom); -} -.ig-typography .ig-typography__subtitle-2 { - font-family: var(--ig-subtitle-2-font-family, var(--ig-font-family)); - font-size: var(--ig-subtitle-2-font-size); - font-weight: var(--ig-subtitle-2-font-weight); - font-style: var(--ig-subtitle-2-font-style); - line-height: var(--ig-subtitle-2-line-height); - letter-spacing: var(--ig-subtitle-2-letter-spacing); - text-transform: var(--ig-subtitle-2-text-transform); - margin-top: var(--ig-subtitle-2-margin-top); - margin-bottom: var(--ig-subtitle-2-margin-bottom); -} -.ig-typography .ig-typography__body-1 { - font-family: var(--ig-body-1-font-family, var(--ig-font-family)); - font-size: var(--ig-body-1-font-size); - font-weight: var(--ig-body-1-font-weight); - font-style: var(--ig-body-1-font-style); - line-height: var(--ig-body-1-line-height); - letter-spacing: var(--ig-body-1-letter-spacing); - text-transform: var(--ig-body-1-text-transform); - margin-top: var(--ig-body-1-margin-top); - margin-bottom: var(--ig-body-1-margin-bottom); -} -.ig-typography .ig-typography__body-2 { - font-family: var(--ig-body-2-font-family, var(--ig-font-family)); - font-size: var(--ig-body-2-font-size); - font-weight: var(--ig-body-2-font-weight); - font-style: var(--ig-body-2-font-style); - line-height: var(--ig-body-2-line-height); - letter-spacing: var(--ig-body-2-letter-spacing); - text-transform: var(--ig-body-2-text-transform); - margin-top: var(--ig-body-2-margin-top); - margin-bottom: var(--ig-body-2-margin-bottom); -} -.ig-typography .ig-typography__button { - font-family: var(--ig-button-font-family, var(--ig-font-family)); - font-size: var(--ig-button-font-size); - font-weight: var(--ig-button-font-weight); - font-style: var(--ig-button-font-style); - line-height: var(--ig-button-line-height); - letter-spacing: var(--ig-button-letter-spacing); - text-transform: var(--ig-button-text-transform); - margin-top: var(--ig-button-margin-top); - margin-bottom: var(--ig-button-margin-bottom); -} -.ig-typography .ig-typography__caption { - font-family: var(--ig-caption-font-family, var(--ig-font-family)); - font-size: var(--ig-caption-font-size); - font-weight: var(--ig-caption-font-weight); - font-style: var(--ig-caption-font-style); - line-height: var(--ig-caption-line-height); - letter-spacing: var(--ig-caption-letter-spacing); - text-transform: var(--ig-caption-text-transform); - margin-top: var(--ig-caption-margin-top); - margin-bottom: var(--ig-caption-margin-bottom); -} -.ig-typography .ig-typography__overline { - font-family: var(--ig-overline-font-family, var(--ig-font-family)); - font-size: var(--ig-overline-font-size); - font-weight: var(--ig-overline-font-weight); - font-style: var(--ig-overline-font-style); - line-height: var(--ig-overline-line-height); - letter-spacing: var(--ig-overline-letter-spacing); - text-transform: var(--ig-overline-text-transform); - margin-top: var(--ig-overline-margin-top); - margin-bottom: var(--ig-overline-margin-bottom); -} - -:root { - --ig-elevation-0: none; - --ig-elevation-1: 0 calc(var(--ig-elevation-factor, 1) * 1px) calc(var(--ig-elevation-factor, 1) * 3px) 0 rgba(0, 0, 0, 0.26), 0 calc(var(--ig-elevation-factor, 1) * 1px) calc(var(--ig-elevation-factor, 1) * 1px) 0 rgba(0, 0, 0, 0.12), 0 calc(var(--ig-elevation-factor, 1) * 2px) calc(var(--ig-elevation-factor, 1) * 1px) calc(var(--ig-elevation-factor, 1) * -1px) rgba(0, 0, 0, 0.08); - --ig-elevation-2: 0 calc(var(--ig-elevation-factor, 1) * 1px) calc(var(--ig-elevation-factor, 1) * 5px) 0 rgba(0, 0, 0, 0.26), 0 calc(var(--ig-elevation-factor, 1) * 2px) calc(var(--ig-elevation-factor, 1) * 2px) 0 rgba(0, 0, 0, 0.12), 0 calc(var(--ig-elevation-factor, 1) * 3px) calc(var(--ig-elevation-factor, 1) * 1px) calc(var(--ig-elevation-factor, 1) * -2px) rgba(0, 0, 0, 0.08); - --ig-elevation-3: 0 calc(var(--ig-elevation-factor, 1) * 1px) calc(var(--ig-elevation-factor, 1) * 8px) 0 rgba(0, 0, 0, 0.26), 0 calc(var(--ig-elevation-factor, 1) * 3px) calc(var(--ig-elevation-factor, 1) * 4px) 0 rgba(0, 0, 0, 0.12), 0 calc(var(--ig-elevation-factor, 1) * 3px) calc(var(--ig-elevation-factor, 1) * 3px) calc(var(--ig-elevation-factor, 1) * -2px) rgba(0, 0, 0, 0.08); - --ig-elevation-4: 0 calc(var(--ig-elevation-factor, 1) * 2px) calc(var(--ig-elevation-factor, 1) * 4px) calc(var(--ig-elevation-factor, 1) * -1px) rgba(0, 0, 0, 0.26), 0 calc(var(--ig-elevation-factor, 1) * 4px) calc(var(--ig-elevation-factor, 1) * 5px) 0 rgba(0, 0, 0, 0.12), 0 calc(var(--ig-elevation-factor, 1) * 1px) calc(var(--ig-elevation-factor, 1) * 10px) 0 rgba(0, 0, 0, 0.08); - --ig-elevation-5: 0 calc(var(--ig-elevation-factor, 1) * 3px) calc(var(--ig-elevation-factor, 1) * 5px) calc(var(--ig-elevation-factor, 1) * -1px) rgba(0, 0, 0, 0.26), 0 calc(var(--ig-elevation-factor, 1) * 5px) calc(var(--ig-elevation-factor, 1) * 8px) 0 rgba(0, 0, 0, 0.12), 0 calc(var(--ig-elevation-factor, 1) * 1px) calc(var(--ig-elevation-factor, 1) * 14px) 0 rgba(0, 0, 0, 0.08); - --ig-elevation-6: 0 calc(var(--ig-elevation-factor, 1) * 3px) calc(var(--ig-elevation-factor, 1) * 5px) calc(var(--ig-elevation-factor, 1) * -1px) rgba(0, 0, 0, 0.26), 0 calc(var(--ig-elevation-factor, 1) * 6px) calc(var(--ig-elevation-factor, 1) * 10px) 0 rgba(0, 0, 0, 0.12), 0 calc(var(--ig-elevation-factor, 1) * 1px) calc(var(--ig-elevation-factor, 1) * 18px) 0 rgba(0, 0, 0, 0.08); - --ig-elevation-7: 0 calc(var(--ig-elevation-factor, 1) * 4px) calc(var(--ig-elevation-factor, 1) * 5px) calc(var(--ig-elevation-factor, 1) * -2px) rgba(0, 0, 0, 0.26), 0 calc(var(--ig-elevation-factor, 1) * 7px) calc(var(--ig-elevation-factor, 1) * 10px) calc(var(--ig-elevation-factor, 1) * 1px) rgba(0, 0, 0, 0.12), 0 calc(var(--ig-elevation-factor, 1) * 2px) calc(var(--ig-elevation-factor, 1) * 16px) calc(var(--ig-elevation-factor, 1) * 1px) rgba(0, 0, 0, 0.08); - --ig-elevation-8: 0 calc(var(--ig-elevation-factor, 1) * 5px) calc(var(--ig-elevation-factor, 1) * 5px) calc(var(--ig-elevation-factor, 1) * -3px) rgba(0, 0, 0, 0.26), 0 calc(var(--ig-elevation-factor, 1) * 8px) calc(var(--ig-elevation-factor, 1) * 10px) calc(var(--ig-elevation-factor, 1) * 1px) rgba(0, 0, 0, 0.12), 0 calc(var(--ig-elevation-factor, 1) * 3px) calc(var(--ig-elevation-factor, 1) * 14px) calc(var(--ig-elevation-factor, 1) * 2px) rgba(0, 0, 0, 0.08); - --ig-elevation-9: 0 calc(var(--ig-elevation-factor, 1) * 5px) calc(var(--ig-elevation-factor, 1) * 6px) calc(var(--ig-elevation-factor, 1) * -3px) rgba(0, 0, 0, 0.26), 0 calc(var(--ig-elevation-factor, 1) * 9px) calc(var(--ig-elevation-factor, 1) * 12px) calc(var(--ig-elevation-factor, 1) * 1px) rgba(0, 0, 0, 0.12), 0 calc(var(--ig-elevation-factor, 1) * 3px) calc(var(--ig-elevation-factor, 1) * 16px) calc(var(--ig-elevation-factor, 1) * 2px) rgba(0, 0, 0, 0.08); - --ig-elevation-10: 0 calc(var(--ig-elevation-factor, 1) * 6px) calc(var(--ig-elevation-factor, 1) * 6px) calc(var(--ig-elevation-factor, 1) * -3px) rgba(0, 0, 0, 0.26), 0 calc(var(--ig-elevation-factor, 1) * 10px) calc(var(--ig-elevation-factor, 1) * 14px) calc(var(--ig-elevation-factor, 1) * 1px) rgba(0, 0, 0, 0.12), 0 calc(var(--ig-elevation-factor, 1) * 4px) calc(var(--ig-elevation-factor, 1) * 18px) calc(var(--ig-elevation-factor, 1) * 3px) rgba(0, 0, 0, 0.08); - --ig-elevation-11: 0 calc(var(--ig-elevation-factor, 1) * 6px) calc(var(--ig-elevation-factor, 1) * 7px) calc(var(--ig-elevation-factor, 1) * -4px) rgba(0, 0, 0, 0.26), 0 calc(var(--ig-elevation-factor, 1) * 11px) calc(var(--ig-elevation-factor, 1) * 15px) calc(var(--ig-elevation-factor, 1) * 1px) rgba(0, 0, 0, 0.12), 0 calc(var(--ig-elevation-factor, 1) * 4px) calc(var(--ig-elevation-factor, 1) * 20px) calc(var(--ig-elevation-factor, 1) * 3px) rgba(0, 0, 0, 0.08); - --ig-elevation-12: 0 calc(var(--ig-elevation-factor, 1) * 7px) calc(var(--ig-elevation-factor, 1) * 8px) calc(var(--ig-elevation-factor, 1) * -4px) rgba(0, 0, 0, 0.26), 0 calc(var(--ig-elevation-factor, 1) * 12px) calc(var(--ig-elevation-factor, 1) * 17px) calc(var(--ig-elevation-factor, 1) * 2px) rgba(0, 0, 0, 0.12), 0 calc(var(--ig-elevation-factor, 1) * 5px) calc(var(--ig-elevation-factor, 1) * 22px) calc(var(--ig-elevation-factor, 1) * 4px) rgba(0, 0, 0, 0.08); - --ig-elevation-13: 0 calc(var(--ig-elevation-factor, 1) * 7px) calc(var(--ig-elevation-factor, 1) * 8px) calc(var(--ig-elevation-factor, 1) * -4px) rgba(0, 0, 0, 0.26), 0 calc(var(--ig-elevation-factor, 1) * 13px) calc(var(--ig-elevation-factor, 1) * 19px) calc(var(--ig-elevation-factor, 1) * 2px) rgba(0, 0, 0, 0.12), 0 calc(var(--ig-elevation-factor, 1) * 5px) calc(var(--ig-elevation-factor, 1) * 24px) calc(var(--ig-elevation-factor, 1) * 4px) rgba(0, 0, 0, 0.08); - --ig-elevation-14: 0 calc(var(--ig-elevation-factor, 1) * 7px) calc(var(--ig-elevation-factor, 1) * 9px) calc(var(--ig-elevation-factor, 1) * -4px) rgba(0, 0, 0, 0.26), 0 calc(var(--ig-elevation-factor, 1) * 14px) calc(var(--ig-elevation-factor, 1) * 21px) calc(var(--ig-elevation-factor, 1) * 2px) rgba(0, 0, 0, 0.12), 0 calc(var(--ig-elevation-factor, 1) * 5px) calc(var(--ig-elevation-factor, 1) * 26px) calc(var(--ig-elevation-factor, 1) * 4px) rgba(0, 0, 0, 0.08); - --ig-elevation-15: 0 calc(var(--ig-elevation-factor, 1) * 8px) calc(var(--ig-elevation-factor, 1) * 9px) calc(var(--ig-elevation-factor, 1) * -5px) rgba(0, 0, 0, 0.26), 0 calc(var(--ig-elevation-factor, 1) * 15px) calc(var(--ig-elevation-factor, 1) * 22px) calc(var(--ig-elevation-factor, 1) * 2px) rgba(0, 0, 0, 0.12), 0 calc(var(--ig-elevation-factor, 1) * 6px) calc(var(--ig-elevation-factor, 1) * 28px) calc(var(--ig-elevation-factor, 1) * 5px) rgba(0, 0, 0, 0.08); - --ig-elevation-16: 0 calc(var(--ig-elevation-factor, 1) * 8px) calc(var(--ig-elevation-factor, 1) * 10px) calc(var(--ig-elevation-factor, 1) * -5px) rgba(0, 0, 0, 0.26), 0 calc(var(--ig-elevation-factor, 1) * 16px) calc(var(--ig-elevation-factor, 1) * 24px) calc(var(--ig-elevation-factor, 1) * 2px) rgba(0, 0, 0, 0.12), 0 calc(var(--ig-elevation-factor, 1) * 6px) calc(var(--ig-elevation-factor, 1) * 30px) calc(var(--ig-elevation-factor, 1) * 5px) rgba(0, 0, 0, 0.08); - --ig-elevation-17: 0 calc(var(--ig-elevation-factor, 1) * 8px) calc(var(--ig-elevation-factor, 1) * 11px) calc(var(--ig-elevation-factor, 1) * -5px) rgba(0, 0, 0, 0.26), 0 calc(var(--ig-elevation-factor, 1) * 17px) calc(var(--ig-elevation-factor, 1) * 26px) calc(var(--ig-elevation-factor, 1) * 2px) rgba(0, 0, 0, 0.12), 0 calc(var(--ig-elevation-factor, 1) * 6px) calc(var(--ig-elevation-factor, 1) * 32px) calc(var(--ig-elevation-factor, 1) * 5px) rgba(0, 0, 0, 0.08); - --ig-elevation-18: 0 calc(var(--ig-elevation-factor, 1) * 9px) calc(var(--ig-elevation-factor, 1) * 11px) calc(var(--ig-elevation-factor, 1) * -5px) rgba(0, 0, 0, 0.26), 0 calc(var(--ig-elevation-factor, 1) * 18px) calc(var(--ig-elevation-factor, 1) * 28px) calc(var(--ig-elevation-factor, 1) * 2px) rgba(0, 0, 0, 0.12), 0 calc(var(--ig-elevation-factor, 1) * 7px) calc(var(--ig-elevation-factor, 1) * 34px) calc(var(--ig-elevation-factor, 1) * 6px) rgba(0, 0, 0, 0.08); - --ig-elevation-19: 0 calc(var(--ig-elevation-factor, 1) * 9px) calc(var(--ig-elevation-factor, 1) * 12px) calc(var(--ig-elevation-factor, 1) * -6px) rgba(0, 0, 0, 0.26), 0 calc(var(--ig-elevation-factor, 1) * 19px) calc(var(--ig-elevation-factor, 1) * 29px) calc(var(--ig-elevation-factor, 1) * 2px) rgba(0, 0, 0, 0.12), 0 calc(var(--ig-elevation-factor, 1) * 7px) calc(var(--ig-elevation-factor, 1) * 36px) calc(var(--ig-elevation-factor, 1) * 6px) rgba(0, 0, 0, 0.08); - --ig-elevation-20: 0 calc(var(--ig-elevation-factor, 1) * 10px) calc(var(--ig-elevation-factor, 1) * 13px) calc(var(--ig-elevation-factor, 1) * -6px) rgba(0, 0, 0, 0.26), 0 calc(var(--ig-elevation-factor, 1) * 20px) calc(var(--ig-elevation-factor, 1) * 31px) calc(var(--ig-elevation-factor, 1) * 3px) rgba(0, 0, 0, 0.12), 0 calc(var(--ig-elevation-factor, 1) * 8px) calc(var(--ig-elevation-factor, 1) * 38px) calc(var(--ig-elevation-factor, 1) * 7px) rgba(0, 0, 0, 0.08); - --ig-elevation-21: 0 calc(var(--ig-elevation-factor, 1) * 10px) calc(var(--ig-elevation-factor, 1) * 13px) calc(var(--ig-elevation-factor, 1) * -6px) rgba(0, 0, 0, 0.26), 0 calc(var(--ig-elevation-factor, 1) * 21px) calc(var(--ig-elevation-factor, 1) * 33px) calc(var(--ig-elevation-factor, 1) * 3px) rgba(0, 0, 0, 0.12), 0 calc(var(--ig-elevation-factor, 1) * 8px) calc(var(--ig-elevation-factor, 1) * 40px) calc(var(--ig-elevation-factor, 1) * 7px) rgba(0, 0, 0, 0.08); - --ig-elevation-22: 0 calc(var(--ig-elevation-factor, 1) * 10px) calc(var(--ig-elevation-factor, 1) * 14px) calc(var(--ig-elevation-factor, 1) * -6px) rgba(0, 0, 0, 0.26), 0 calc(var(--ig-elevation-factor, 1) * 22px) calc(var(--ig-elevation-factor, 1) * 35px) calc(var(--ig-elevation-factor, 1) * 3px) rgba(0, 0, 0, 0.12), 0 calc(var(--ig-elevation-factor, 1) * 8px) calc(var(--ig-elevation-factor, 1) * 42px) calc(var(--ig-elevation-factor, 1) * 7px) rgba(0, 0, 0, 0.08); - --ig-elevation-23: 0 calc(var(--ig-elevation-factor, 1) * 11px) calc(var(--ig-elevation-factor, 1) * 14px) calc(var(--ig-elevation-factor, 1) * -7px) rgba(0, 0, 0, 0.26), 0 calc(var(--ig-elevation-factor, 1) * 23px) calc(var(--ig-elevation-factor, 1) * 36px) calc(var(--ig-elevation-factor, 1) * 3px) rgba(0, 0, 0, 0.12), 0 calc(var(--ig-elevation-factor, 1) * 9px) calc(var(--ig-elevation-factor, 1) * 44px) calc(var(--ig-elevation-factor, 1) * 8px) rgba(0, 0, 0, 0.08); - --ig-elevation-24: 0 calc(var(--ig-elevation-factor, 1) * 11px) calc(var(--ig-elevation-factor, 1) * 15px) calc(var(--ig-elevation-factor, 1) * -7px) rgba(0, 0, 0, 0.26), 0 calc(var(--ig-elevation-factor, 1) * 24px) calc(var(--ig-elevation-factor, 1) * 38px) calc(var(--ig-elevation-factor, 1) * 3px) rgba(0, 0, 0, 0.12), 0 calc(var(--ig-elevation-factor, 1) * 9px) calc(var(--ig-elevation-factor, 1) * 46px) calc(var(--ig-elevation-factor, 1) * 8px) rgba(0, 0, 0, 0.08); -} - -:root { - --chart-brushes: var(--ig-chart-brushes, rgb(157, 231, 114), rgb(139, 91, 177), rgb(109, 177, 255), rgb(154, 242, 228), rgb(238, 88, 121), rgb(115, 86, 86), rgb(247, 210, 98), rgb(168, 168, 183), rgb(224, 81, 169), rgb(248, 161, 95)); -} - -:root { - --ig-category-chart-brushes: var(--chart-brushes); - --ig-category-chart-marker-brushes: var(--chart-brushes); - --ig-category-chart-negative-brushes: hsl(347, 82%, 64%); - --ig-category-chart-outlines: var(--chart-brushes); - --ig-category-chart-marker-outlines: var(--chart-brushes); - --ig-category-chart-negative-outlines: hsl(347, 82%, 64%); - --ig-category-chart-title-text-color: var(--ig-gray-900); - --ig-category-chart-subtitle-text-color: var(--ig-gray-700); - --ig-category-chart-trend-line-brushes: var(--chart-brushes); - --ig-category-chart-x-axis-label-text-color: var(--ig-gray-700); - --ig-category-chart-x-axis-stroke: var(--ig-gray-500); - --ig-category-chart-x-axis-tick-stroke: var(--ig-gray-500); - --ig-category-chart-x-axis-title-text-color: var(--ig-gray-900); - --ig-category-chart-y-axis-label-text-color: var(--ig-gray-700); - --ig-category-chart-y-axis-major-stroke: var(--ig-gray-300); - --ig-category-chart-y-axis-title-text-color: var(--ig-gray-900); - --ig-category-chart-y-axis-tick-stroke: var(--ig-gray-500); -} - -:root { - --ig-data-chart-title-text-color: var(--ig-gray-900); - --ig-data-chart-subtitle-text-color: var(--ig-gray-600); - --ig-data-chart-brushes: var(--chart-brushes); - --ig-data-chart-marker-brushes: var(--chart-brushes); - --ig-data-chart-outlines: var(--chart-brushes); - --ig-data-chart-marker-outlines: var(--chart-brushes); - --ig-data-chart-plot-area-background: var(--ig-surface-500); - --ig-data-chart-axis-label-text-color: var(--ig-gray-700); - --ig-data-chart-axis-stroke: var(--ig-gray-500); - --ig-data-chart-axis-tick-stroke: var(--ig-gray-500); - --ig-data-chart-axis-title-text-color: var(--ig-gray-900); -} - -:root { - --ig-doughnut-chart-brushes: var(--chart-brushes); - --ig-doughnut-chart-outlines: var(--chart-brushes); -} - -:root { - --ig-financial-chart-brushes: var(--chart-brushes); - --ig-financial-chart-outlines: var(--chart-brushes); - --ig-financial-chart-marker-brushes: var(--chart-brushes); - --ig-financial-chart-marker-outlines: var(--chart-brushes); - --ig-financial-chart-indicator-brushes: var(--chart-brushes); - --ig-financial-chart-indicator-negative-brushes: var(--chart-brushes); - --ig-financial-chart-negative-brushes: var(--chart-brushes); - --ig-financial-chart-negative-outlines: var(--chart-brushes); - --ig-financial-chart-overlay-brushes: var(--chart-brushes); - --ig-financial-chart-overlay-outlines: var(--chart-brushes); - --ig-financial-chart-overlay-thickness: var(--chart-brushes); - --ig-financial-chart-trend-line-brushes: var(--chart-brushes); - --ig-financial-chart-volume-brushes: var(--chart-brushes); - --ig-financial-chart-volume-outlines: var(--chart-brushes); -} - -:root { - --ig-funnel-chart-brushes: var(--chart-brushes); - --ig-funnel-chart-outlines: var(--chart-brushes); -} - -:root { - --ig-linear-gauge-backing-brush: var(--ig-surface-500); - --ig-linear-gauge-backing-outline: var(--ig-surface-500); - --ig-linear-gauge-font-brush: var(--ig-surface-500-contrast); - --ig-linear-gauge-minor-tick-brush: var(--ig-surface-500-contrast); - --ig-linear-gauge-needle-brush: var(--ig-primary-500); - --ig-linear-gauge-needle-outline: var(--ig-surface-500); - --ig-linear-gauge-range-brushes: var(--chart-brushes); - --ig-linear-gauge-range-outlines: var(--chart-brushes); - --ig-linear-gauge-scale-brush: var(--ig-surface-500); - --ig-linear-gauge-tick-brush: var(--ig-surface-500-contrast); - --ig-linear-gauge-scale-outline: var(--ig-surface-500); -} - -:root { - --ig-radial-gauge-backing-brush: var(--ig-surface-500); - --ig-radial-gauge-backing-outline: var(--ig-surface-500); - --ig-radial-gauge-font-brush: var(--ig-surface-500-contrast); - --ig-radial-gauge-minor-tick-brush: var(--ig-surface-500-contrast); - --ig-radial-gauge-needle-brush: var(--ig-primary-500); - --ig-radial-gauge-needle-outline: var(--ig-surface-500); - --ig-radial-gauge-range-brushes: var(--chart-brushes); - --ig-radial-gauge-range-outlines: var(--chart-brushes); - --ig-radial-gauge-scale-brush: var(--ig-surface-500); - --ig-radial-gauge-tick-brush: var(--ig-surface-500-contrast); - --ig-radial-gauge-needle-pivot-brush: var(--ig-primary-500); - --ig-radial-gauge-needle-pivot-outline: var(--ig-surface-500); -} - -:root { - --ig-geo-map-plot-area-background: var(--ig-surface-500); -} - -:root { - --ig-bullet-graph-backing-brush: var(--ig-surface-500); - --ig-bullet-graph-backing-outline: var(--ig-surface-500); - --ig-bullet-graph-font-brush: var(--ig-surface-500-contrast); - --ig-bullet-graph-minor-tick-brush: var(--ig-surface-500-contrast); - --ig-bullet-graph-range-brushes: var(--chart-brushes); - --ig-bullet-graph-range-outlines: var(--chart-brushes); - --ig-bullet-graph-scale-background-brush: var(--ig-primary-500); - --ig-bullet-graph-scale-background-outline: var(--ig-surface-500); - --ig-bullet-graph-target-value-brush: var(--ig-gray-800); - --ig-bullet-graph-tick-brush: var(--ig-surface-500-contrast); - --ig-bullet-graph-value-brush: var(--ig-gray-800); -} - -:root { - --ig-pie-chart-brushes: var(--chart-brushes); - --ig-pie-chart-outlines: var(--chart-brushes); - --ig-pie-chart-label-extent: 30; - --ig-pie-chart-label-outer-color: var(--ig-gray-700); -} - -:root { - --ig-shape-chart-title-text-color: var(--ig-gray-900); - --ig-shape-chart-subtitle-text-color: var(--ig-gray-600); - --ig-shape-chart-brushes: var(--chart-brushes); - --ig-shape-chart-marker-brushes: var(--chart-brushes); - --ig-shape-chart-outlines: var(--chart-brushes); - --ig-shape-chart-marker-outlines: var(--chart-brushes); - --ig-shape-chart-trend-line-brushes: var(--chart-brushes); -} - -:root { - --ig-sparkline-brush: var(--ig-primary-500); -} - -igx-category-chart { - --title-text-style: var(--igx-category-chart-title-text-style, var(--ig-category-chart-title-text-style, 600 1.25rem var(--ig-font-family))); - --subtitle-text-style: var(--igx-category-chart-subtitle-text-style, var(--ig-category-chart-subtitle-text-style, 400 1rem var(--ig-font-family))); - --x-axis-label-text-style: var(--igx-category-chart-x-axis-label-text-style, var(--ig-category-chart-x-axis-label-text-style, 400 0.875rem var(--ig-font-family))); - --x-axis-title-text-style: var(--igx-category-chart-x-axis-title-text-style, var(--ig-category-chart-x-axis-title-text-style, 400 0.875rem var(--ig-font-family))); - --y-axis-label-text-style: var(--igx-category-chart-y-axis-label-text-style, var(--ig-category-chart-y-axis-label-text-style, 400 0.875rem var(--ig-font-family))); - --y-axis-title-text-style: var(--igx-category-chart-y-axis-title-text-style, var(--ig-category-chart-y-axis-title-text-style, 400 0.875rem var(--ig-font-family))); -} - -igx-data-chart { - --title-text-style: var(--igx-data-chart-title-text-style, var(--ig-data-chart-title-text-style, 600 1.25rem var(--ig-font-family))); - --subtitle-text-style: var(--igx-data-chart-subtitle-text-style, var(--ig-data-chart-subtitle-text-style, 400 1rem var(--ig-font-family))); -} - -igx-financial-chart { - --title-text-style: var(--igx-financial-chart-title-text-style, var(--ig-financial-chart-title-text-style, 600 1.25rem var(--ig-font-family))); - --subtitle-text-style: var(--igx-financial-chart-subtitle-text-style, var(--ig-financial-chart-subtitle-text-style, 400 1rem var(--ig-font-family))); - --x-axis-label-text-style: var(--igx-financial-chart-x-axis-label-text-style, var(--ig-financial-chart-x-axis-label-text-style, 400 0.875rem var(--ig-font-family))); - --x-axis-title-text-style: var(--igx-financial-chart-x-axis-title-text-style, var(--ig-financial-chart-x-axis-title-text-style, 400 0.875rem var(--ig-font-family))); - --y-axis-label-text-style: var(--igx-financial-chart-y-axis-label-text-style, var(--ig-financial-chart-y-axis-label-text-style, 400 0.875rem var(--ig-font-family))); - --y-axis-title-text-style: var(--igx-financial-chart-y-axis-title-text-style, var(--ig-financial-chart-y-axis-title-text-style, 400 0.875rem var(--ig-font-family))); -} - -igx-funnel-chart { - --outer-label-text-style: var(--igx-funnel-chart-outer-label-text-style, var(--ig-funnel-chart-outer-label-text-style, 300 6rem var(--ig-font-family))); - --text-style: var(--igx-funnel-chart-text-style, var(--ig-funnel-chart-text-style, 400 1rem var(--ig-font-family))); -} - -igx-linear-gauge { - --linear-gauge-font: var(--ig-font-family, inherit); -} - -igx-radial-gauge { - --radial-gauge-font: var(--ig-font-family, inherit); -} - -igx-bullet-graph { - --bullet-graph-font: var(--ig-font-family, inherit); -} - -igx-pie-chart { - --text-style: var(--igx-pie-chart-text-style, var(--ig-pie-chart-text-style, 400 0.875rem var(--ig-font-family))); -} - -igx-shape-chart { - --title-text-style: var(--igx-shape-chart-title-text-style, var(--ig-shape-chart-title-text-style, 600 1.25rem var(--ig-font-family))); - --subtitle-text-style: var(--igx-shape-chart-subtitle-text-style, var(--ig-shape-chart-subtitle-text-style, 400 1rem var(--ig-font-family))); - --x-axis-title-text-style: var(--igx-shape-chart-x-axis-title-text-style, var(--ig-shape-chart-x-axis-title-text-style, 400 3rem var(--ig-font-family))); - --x-axis-label-text-style: var(--igx-shape-chart-x-axis-label-text-style, var(--ig-shape-chart-x-axis-label-text-style, 400 2.125rem var(--ig-font-family))); - --y-axis-title-text-style: var(--igx-shape-chart-y-axis-title-text-style, var(--ig-shape-chart-y-axis-title-text-style, 400 3rem var(--ig-font-family))); - --y-axis-label-text-style: var(--igx-shape-chart-y-axis-label-text-style, var(--ig-shape-chart-y-axis-label-text-style, 400 2.125rem var(--ig-font-family))); -} - -.test, -.test igx-avatar { - --background: var(--igx-avatar-background, var(--ig-avatar-background, red)); - --color: var(--igx-avatar-color, var(--ig-avatar-color, hsla(from color(from var(--background) var(--y-contrast)) h 0 l/1))); - --icon-color: var(--igx-avatar-icon-color, var(--ig-avatar-icon-color, hsla(from color(from var(--background) var(--y-contrast)) h 0 l/1))); - --border-radius: var(--igx-avatar-border-radius, var(--ig-avatar-border-radius, 0.5rem)); - --size: var(--igx-avatar-size, var(--ig-avatar-size, max(var(--is-large, 1) * max(5.5rem, -1 * 5.5rem), var(--is-medium, 1) * max(4rem, -1 * 4rem), var(--is-small, 1) * max(2.5rem, -1 * 2.5rem)))); - --default-size: var(--igx-avatar-default-size, var(--ig-avatar-default-size, 1)); - --ig-theme: material; - --ig-theme-variant: dark; -} - -.handmade { - --ig-wcag-a: 0.31; - --ig-wcag-aa: 0.185; - --ig-wcag-aaa: 0.178; - --ig-contrast-level: var(--ig-wcag-aa); - --y: clamp(0, (y / var(--ig-contrast-level) - 1) * -infinity, 1); - --y-contrast: xyz-d65 var(--y) var(--y) var(--y); -} -.handmade { - --ig-primary-50: #e6eff8; - --ig-primary-50-contrast: black; - --ig-primary-100: #bfd7f2; - --ig-primary-100-contrast: black; - --ig-primary-200: #98bfec; - --ig-primary-200-contrast: black; - --ig-primary-300: #85b5e9; - --ig-primary-300-contrast: white; - --ig-primary-400: #73a6e4; - --ig-primary-400-contrast: white; - --ig-primary-500: #6797de; - --ig-primary-500-contrast: white; - --ig-primary-600: #3681dd; - --ig-primary-600-contrast: white; - --ig-primary-700: #357fda; - --ig-primary-700-contrast: white; - --ig-primary-800: #306dc8; - --ig-primary-800-contrast: white; - --ig-primary-900: #284ea8; - --ig-primary-900-contrast: white; - --ig-primary-A100: #98bfec; - --ig-primary-A100-contrast: white; - --ig-primary-A200: #73a6e4; - --ig-primary-A200-contrast: white; - --ig-primary-A400: #3681dd; - --ig-primary-A400-contrast: white; - --ig-primary-A700: #284ea8; - --ig-primary-A700-contrast: white; - --ig-primary-seed: #6797de; - --ig-primary-seed-contrast: white; - --ig-secondary-50: #fef7e2; - --ig-secondary-50-contrast: black; - --ig-secondary-100: #fdeab7; - --ig-secondary-100-contrast: black; - --ig-secondary-200: #fbdd89; - --ig-secondary-200-contrast: black; - --ig-secondary-300: #fad15c; - --ig-secondary-300-contrast: black; - --ig-secondary-400: #f9c63f; - --ig-secondary-400-contrast: black; - --ig-secondary-500: #f7bd32; - --ig-secondary-500-contrast: white; - --ig-secondary-600: #f6b02d; - --ig-secondary-600-contrast: white; - --ig-secondary-700: #f49e2a; - --ig-secondary-700-contrast: white; - --ig-secondary-800: #f38e28; - --ig-secondary-800-contrast: white; - --ig-secondary-900: #f38e28; - --ig-secondary-900-contrast: white; - --ig-secondary-A100: #fbdd89; - --ig-secondary-A100-contrast: black; - --ig-secondary-A200: #f9c63f; - --ig-secondary-A200-contrast: black; - --ig-secondary-A400: #f6b02d; - --ig-secondary-A400-contrast: white; - --ig-secondary-A700: #f38e28; - --ig-secondary-A700-contrast: white; - --ig-secondary-seed: #f7bd32; - --ig-secondary-seed-contrast: white; - --ig-tertiary-500: #f7bd32; - --ig-tertiary-500-contrast: white; - --ig-gray-50: #fff; - --ig-gray-50-contrast: black; - --ig-gray-100: #fafafa; - --ig-gray-100-contrast: black; - --ig-gray-200: #f5f5f5; - --ig-gray-200-contrast: black; - --ig-gray-300: #f0f0f0; - --ig-gray-300-contrast: black; - --ig-gray-400: #dedede; - --ig-gray-400-contrast: black; - --ig-gray-500: #b3b2b2; - --ig-gray-500-contrast: black; - --ig-gray-600: #979696; - --ig-gray-600-contrast: white; - --ig-gray-700: #7b7a7a; - --ig-gray-700-contrast: white; - --ig-gray-800: #404040; - --ig-gray-800-contrast: white; - --ig-gray-900: #1a1a1a; - --ig-gray-900-contrast: white; - --ig-gray-seed: #b3b2b2; - --ig-gray-seed-contrast: black; - --ig-info-50: #fef7e2; - --ig-info-50-contrast: black; - --ig-info-100: #fdeab7; - --ig-info-100-contrast: black; - --ig-info-200: #fbdd89; - --ig-info-200-contrast: black; - --ig-info-300: #fad15c; - --ig-info-300-contrast: black; - --ig-info-400: #f9c63f; - --ig-info-400-contrast: black; - --ig-info-500: #f7bd32; - --ig-info-500-contrast: white; - --ig-info-600: #f6b02d; - --ig-info-600-contrast: white; - --ig-info-700: #f49e2a; - --ig-info-700-contrast: white; - --ig-info-800: #f38e28; - --ig-info-800-contrast: white; - --ig-info-900: #f38e28; - --ig-info-900-contrast: white; - --ig-info-A100: #fbdd89; - --ig-info-A100-contrast: black; - --ig-info-A200: #f9c63f; - --ig-info-A200-contrast: black; - --ig-info-A400: #f6b02d; - --ig-info-A400-contrast: white; - --ig-info-A700: #f38e28; - --ig-info-A700-contrast: white; - --ig-info-seed: #f7bd32; - --ig-info-seed-contrast: white; - --ig-success-50: #fef7e2; - --ig-success-50-contrast: black; - --ig-success-100: #fdeab7; - --ig-success-100-contrast: black; - --ig-success-200: #fbdd89; - --ig-success-200-contrast: black; - --ig-success-300: #fad15c; - --ig-success-300-contrast: black; - --ig-success-400: #f9c63f; - --ig-success-400-contrast: black; - --ig-success-500: #f7bd32; - --ig-success-500-contrast: white; - --ig-success-600: #f6b02d; - --ig-success-600-contrast: white; - --ig-success-700: #f49e2a; - --ig-success-700-contrast: white; - --ig-success-800: #f38e28; - --ig-success-800-contrast: white; - --ig-success-900: #f38e28; - --ig-success-900-contrast: white; - --ig-success-A100: #fbdd89; - --ig-success-A100-contrast: black; - --ig-success-A200: #f9c63f; - --ig-success-A200-contrast: black; - --ig-success-A400: #f6b02d; - --ig-success-A400-contrast: white; - --ig-success-A700: #f38e28; - --ig-success-A700-contrast: white; - --ig-success-seed: #f7bd32; - --ig-success-seed-contrast: white; - --ig-warn-50: #fef7e2; - --ig-warn-50-contrast: black; - --ig-warn-100: #fdeab7; - --ig-warn-100-contrast: black; - --ig-warn-200: #fbdd89; - --ig-warn-200-contrast: black; - --ig-warn-300: #fad15c; - --ig-warn-300-contrast: black; - --ig-warn-400: #f9c63f; - --ig-warn-400-contrast: black; - --ig-warn-500: #f7bd32; - --ig-warn-500-contrast: white; - --ig-warn-600: #f6b02d; - --ig-warn-600-contrast: white; - --ig-warn-700: #f49e2a; - --ig-warn-700-contrast: white; - --ig-warn-800: #f38e28; - --ig-warn-800-contrast: white; - --ig-warn-900: #f38e28; - --ig-warn-900-contrast: white; - --ig-warn-A100: #fbdd89; - --ig-warn-A100-contrast: black; - --ig-warn-A200: #f9c63f; - --ig-warn-A200-contrast: black; - --ig-warn-A400: #f6b02d; - --ig-warn-A400-contrast: white; - --ig-warn-A700: #f38e28; - --ig-warn-A700-contrast: white; - --ig-warn-seed: #f7bd32; - --ig-warn-seed-contrast: white; - --ig-error-50: #fef7e2; - --ig-error-50-contrast: black; - --ig-error-100: #fdeab7; - --ig-error-100-contrast: black; - --ig-error-200: #fbdd89; - --ig-error-200-contrast: black; - --ig-error-300: #fad15c; - --ig-error-300-contrast: black; - --ig-error-400: #f9c63f; - --ig-error-400-contrast: black; - --ig-error-500: #f7bd32; - --ig-error-500-contrast: white; - --ig-error-600: #f6b02d; - --ig-error-600-contrast: white; - --ig-error-700: #f49e2a; - --ig-error-700-contrast: white; - --ig-error-800: #f38e28; - --ig-error-800-contrast: white; - --ig-error-900: #f38e28; - --ig-error-900-contrast: white; - --ig-error-A100: #fbdd89; - --ig-error-A100-contrast: black; - --ig-error-A200: #f9c63f; - --ig-error-A200-contrast: black; - --ig-error-A400: #f6b02d; - --ig-error-A400-contrast: white; - --ig-error-A700: #f38e28; - --ig-error-A700-contrast: white; - --ig-error-seed: #f7bd32; - --ig-error-seed-contrast: white; - --ig-surface-50: #fef7e2; - --ig-surface-50-contrast: black; - --ig-surface-100: #fdeab7; - --ig-surface-100-contrast: black; - --ig-surface-200: #fbdd89; - --ig-surface-200-contrast: black; - --ig-surface-300: #fad15c; - --ig-surface-300-contrast: black; - --ig-surface-400: #f9c63f; - --ig-surface-400-contrast: black; - --ig-surface-500: #f7bd32; - --ig-surface-500-contrast: white; - --ig-surface-600: #f6b02d; - --ig-surface-600-contrast: white; - --ig-surface-700: #f49e2a; - --ig-surface-700-contrast: white; - --ig-surface-800: #f38e28; - --ig-surface-800-contrast: white; - --ig-surface-900: #f38e28; - --ig-surface-900-contrast: white; - --ig-surface-A100: #fbdd89; - --ig-surface-A100-contrast: black; - --ig-surface-A200: #f9c63f; - --ig-surface-A200-contrast: black; - --ig-surface-A400: #f6b02d; - --ig-surface-A400-contrast: white; - --ig-surface-A700: #f38e28; - --ig-surface-A700-contrast: white; - --ig-surface-seed: #f7bd32; - --ig-surface-seed-contrast: white; -} diff --git a/_to_delete/theming-tmp/perf.css b/_to_delete/theming-tmp/perf.css deleted file mode 100644 index 6580cc73..00000000 --- a/_to_delete/theming-tmp/perf.css +++ /dev/null @@ -1,242 +0,0 @@ -:root { - --ig-wcag-a: 0.31; - --ig-wcag-aa: 0.185; - --ig-wcag-aaa: 0.178; - --ig-contrast-level: var(--ig-wcag-aa); - --y: clamp(0, (y / var(--ig-contrast-level) - 1) * -infinity, 1); - --y-contrast: xyz-d65 var(--y) var(--y) var(--y); -} -:root { - --ig-primary-50: oklch(from var(--ig-primary-seed) 0.9402 min(c * 0.1264, 0.0232) calc(h + 6.804)); - --ig-primary-50-contrast: hsla(from color(from var(--ig-primary-50) var(--y-contrast)) h 0 l/1); - --ig-primary-100: oklch(from var(--ig-primary-seed) 0.844 min(c * 0.3941, 0.0724) calc(h + 4.879)); - --ig-primary-100-contrast: hsla(from color(from var(--ig-primary-100) var(--y-contrast)) h 0 l/1); - --ig-primary-200: oklch(from var(--ig-primary-seed) 0.7551 min(c * 0.6602, 0.1213) calc(h + 3.103)); - --ig-primary-200-contrast: hsla(from color(from var(--ig-primary-200) var(--y-contrast)) h 0 l/1); - --ig-primary-300: oklch(from var(--ig-primary-seed) 0.6742 min(c * 0.8212, 0.1508) calc(h + 1.484)); - --ig-primary-300-contrast: hsla(from color(from var(--ig-primary-300) var(--y-contrast)) h 0 l/1); - --ig-primary-400: oklch(from var(--ig-primary-seed) 0.5973 min(c * 0.8367, 0.1537) h); - --ig-primary-400-contrast: hsla(from color(from var(--ig-primary-400) var(--y-contrast)) h 0 l/1); - --ig-primary-500: oklch(from var(--ig-primary-seed) 0.5244 min(c * 0.7664, 0.1408) h); - --ig-primary-500-contrast: hsla(from color(from var(--ig-primary-500) var(--y-contrast)) h 0 l/1); - --ig-primary-600: oklch(from var(--ig-primary-seed) 0.4535 min(c * 0.6602, 0.1213) h); - --ig-primary-600-contrast: hsla(from color(from var(--ig-primary-600) var(--y-contrast)) h 0 l/1); - --ig-primary-700: oklch(from var(--ig-primary-seed) 0.3818 min(c * 0.5301, 0.0974) h); - --ig-primary-700-contrast: hsla(from color(from var(--ig-primary-700) var(--y-contrast)) h 0 l/1); - --ig-primary-800: oklch(from var(--ig-primary-seed) 0.3034 min(c * 0.3808, 0.0699) h); - --ig-primary-800-contrast: hsla(from color(from var(--ig-primary-800) var(--y-contrast)) h 0 l/1); - --ig-primary-900: oklch(from var(--ig-primary-seed) 0.2004 min(c * 0.2097, 0.0385) h); - --ig-primary-900-contrast: hsla(from color(from var(--ig-primary-900) var(--y-contrast)) h 0 l/1); - --ig-primary-seed: #09f; - --ig-primary-seed-contrast: hsla(from color(from var(--ig-primary-seed) var(--y-contrast)) h 0 l/1); - --ig-primary-A100: oklch(from var(--ig-primary-seed) 0.889 min(c * 0.3037, 0.0558) calc(h + 2.817)); - --ig-primary-A100-contrast: hsla(from color(from var(--ig-primary-A100) var(--y-contrast)) h 0 l/1); - --ig-primary-A200: oklch(from var(--ig-primary-seed) 0.7075 min(c * 0.8606, 0.1581) calc(h + 2.149)); - --ig-primary-A200-contrast: hsla(from color(from var(--ig-primary-A200) var(--y-contrast)) h 0 l/1); - --ig-primary-A400: oklch(from var(--ig-primary-seed) 0.5847 min(c * 0.8681, 0.1595) h); - --ig-primary-A400-contrast: hsla(from color(from var(--ig-primary-A400) var(--y-contrast)) h 0 l/1); - --ig-primary-A700: oklch(from var(--ig-primary-seed) 0.4923 min(c * 0.7355, 0.1351) h); - --ig-primary-A700-contrast: hsla(from color(from var(--ig-primary-A700) var(--y-contrast)) h 0 l/1); - --ig-secondary-50: oklch(from var(--ig-secondary-seed) 0.9439 min(c * 0.1274, 0.029) h); - --ig-secondary-50-contrast: hsla(from color(from var(--ig-secondary-50) var(--y-contrast)) h 0 l/1); - --ig-secondary-100: oklch(from var(--ig-secondary-seed) 0.8579 min(c * 0.3639, 0.0828) calc(h - 0.806)); - --ig-secondary-100-contrast: hsla(from color(from var(--ig-secondary-100) var(--y-contrast)) h 0 l/1); - --ig-secondary-200: oklch(from var(--ig-secondary-seed) 0.7764 min(c * 0.6247, 0.1421) calc(h - 0.949)); - --ig-secondary-200-contrast: hsla(from color(from var(--ig-secondary-200) var(--y-contrast)) h 0 l/1); - --ig-secondary-300: oklch(from var(--ig-secondary-seed) 0.7011 min(c * 0.8788, 0.1999) h); - --ig-secondary-300-contrast: hsla(from color(from var(--ig-secondary-300) var(--y-contrast)) h 0 l/1); - --ig-secondary-400: oklch(from var(--ig-secondary-seed) 0.6267 min(c * 0.9712, 0.221) h); - --ig-secondary-400-contrast: hsla(from color(from var(--ig-secondary-400) var(--y-contrast)) h 0 l/1); - --ig-secondary-500: oklch(from var(--ig-secondary-seed) 0.5522 min(c * 0.9342, 0.2125) h); - --ig-secondary-500-contrast: hsla(from color(from var(--ig-secondary-500) var(--y-contrast)) h 0 l/1); - --ig-secondary-600: oklch(from var(--ig-secondary-seed) 0.4784 min(c * 0.8203, 0.1866) h); - --ig-secondary-600-contrast: hsla(from color(from var(--ig-secondary-600) var(--y-contrast)) h 0 l/1); - --ig-secondary-700: oklch(from var(--ig-secondary-seed) 0.402 min(c * 0.6615, 0.1505) h); - --ig-secondary-700-contrast: hsla(from color(from var(--ig-secondary-700) var(--y-contrast)) h 0 l/1); - --ig-secondary-800: oklch(from var(--ig-secondary-seed) 0.3181 min(c * 0.4739, 0.1078) h); - --ig-secondary-800-contrast: hsla(from color(from var(--ig-secondary-800) var(--y-contrast)) h 0 l/1); - --ig-secondary-900: oklch(from var(--ig-secondary-seed) 0.2085 min(c * 0.2592, 0.059) h); - --ig-secondary-900-contrast: hsla(from color(from var(--ig-secondary-900) var(--y-contrast)) h 0 l/1); - --ig-secondary-seed: #df1b74; - --ig-secondary-seed-contrast: hsla(from color(from var(--ig-secondary-seed) var(--y-contrast)) h 0 l/1); - --ig-secondary-A100: oklch(from var(--ig-secondary-seed) 0.9072 min(c * 0.231, 0.0526) calc(h + 356.496)); - --ig-secondary-A100-contrast: hsla(from color(from var(--ig-secondary-A100) var(--y-contrast)) h 0 l/1); - --ig-secondary-A200: oklch(from var(--ig-secondary-seed) 0.7302 min(c * 0.7981, 0.1816) calc(h - 1.535)); - --ig-secondary-A200-contrast: hsla(from color(from var(--ig-secondary-A200) var(--y-contrast)) h 0 l/1); - --ig-secondary-A400: oklch(from var(--ig-secondary-seed) 0.616 min(c * 1.053, 0.2396) h); - --ig-secondary-A400-contrast: hsla(from color(from var(--ig-secondary-A400) var(--y-contrast)) h 0 l/1); - --ig-secondary-A700: oklch(from var(--ig-secondary-seed) 0.5201 min(c * 0.9218, 0.2097) h); - --ig-secondary-A700-contrast: hsla(from color(from var(--ig-secondary-A700) var(--y-contrast)) h 0 l/1); - --ig-gray-50: oklch(from var(--ig-gray-seed) 0.9404 0 0); - --ig-gray-50-contrast: hsla(from color(from var(--ig-gray-50) var(--y-contrast)) h 0 l/1); - --ig-gray-100: oklch(from var(--ig-gray-seed) 0.8448 0 0); - --ig-gray-100-contrast: hsla(from color(from var(--ig-gray-100) var(--y-contrast)) h 0 l/1); - --ig-gray-200: oklch(from var(--ig-gray-seed) 0.7562 0 0); - --ig-gray-200-contrast: hsla(from color(from var(--ig-gray-200) var(--y-contrast)) h 0 l/1); - --ig-gray-300: oklch(from var(--ig-gray-seed) 0.6749 0 0); - --ig-gray-300-contrast: hsla(from color(from var(--ig-gray-300) var(--y-contrast)) h 0 l/1); - --ig-gray-400: oklch(from var(--ig-gray-seed) 0.598 0 0); - --ig-gray-400-contrast: hsla(from color(from var(--ig-gray-400) var(--y-contrast)) h 0 l/1); - --ig-gray-500: oklch(from var(--ig-gray-seed) 0.5248 0 0); - --ig-gray-500-contrast: hsla(from color(from var(--ig-gray-500) var(--y-contrast)) h 0 l/1); - --ig-gray-600: oklch(from var(--ig-gray-seed) 0.4539 0 0); - --ig-gray-600-contrast: hsla(from color(from var(--ig-gray-600) var(--y-contrast)) h 0 l/1); - --ig-gray-700: oklch(from var(--ig-gray-seed) 0.3822 0 0); - --ig-gray-700-contrast: hsla(from color(from var(--ig-gray-700) var(--y-contrast)) h 0 l/1); - --ig-gray-800: oklch(from var(--ig-gray-seed) 0.304 0 0); - --ig-gray-800-contrast: hsla(from color(from var(--ig-gray-800) var(--y-contrast)) h 0 l/1); - --ig-gray-900: oklch(from var(--ig-gray-seed) 0.2009 0 0); - --ig-gray-900-contrast: hsla(from color(from var(--ig-gray-900) var(--y-contrast)) h 0 l/1); - --ig-gray-seed: #333; - --ig-gray-seed-contrast: hsla(from color(from var(--ig-gray-seed) var(--y-contrast)) h 0 l/1); - --ig-surface-50: hsl(from var(--ig-surface-500) h calc(s * 1.23) calc(l * 1.78)); - --ig-surface-50-contrast: hsla(from color(from var(--ig-surface-50) var(--y-contrast)) h 0 l/1); - --ig-surface-100: hsl(from var(--ig-surface-500) h calc(s * 0.8) calc(l * 1.66)); - --ig-surface-100-contrast: hsla(from color(from var(--ig-surface-100) var(--y-contrast)) h 0 l/1); - --ig-surface-200: hsl(from var(--ig-surface-500) h calc(s * 0.64) calc(l * 1.43)); - --ig-surface-200-contrast: hsla(from color(from var(--ig-surface-200) var(--y-contrast)) h 0 l/1); - --ig-surface-300: hsl(from var(--ig-surface-500) h calc(s * 0.73) calc(l * 1.19)); - --ig-surface-300-contrast: hsla(from color(from var(--ig-surface-300) var(--y-contrast)) h 0 l/1); - --ig-surface-400: hsl(from var(--ig-surface-500) h calc(s * 0.875) calc(l * 1.08)); - --ig-surface-400-contrast: hsla(from color(from var(--ig-surface-400) var(--y-contrast)) h 0 l/1); - --ig-surface-500: #fff; - --ig-surface-500-contrast: hsla(from color(from var(--ig-surface-500) var(--y-contrast)) h 0 l/1); - --ig-surface-600: hsl(from var(--ig-surface-500) h calc(s * 1.26) calc(l * 0.89)); - --ig-surface-600-contrast: hsla(from color(from var(--ig-surface-600) var(--y-contrast)) h 0 l/1); - --ig-surface-700: hsl(from var(--ig-surface-500) h calc(s * 1.26) calc(l * 0.81)); - --ig-surface-700-contrast: hsla(from color(from var(--ig-surface-700) var(--y-contrast)) h 0 l/1); - --ig-surface-800: hsl(from var(--ig-surface-500) h calc(s * 1.26) calc(l * 0.73)); - --ig-surface-800-contrast: hsla(from color(from var(--ig-surface-800) var(--y-contrast)) h 0 l/1); - --ig-surface-900: hsl(from var(--ig-surface-500) h calc(s * 1.26) calc(l * 0.64)); - --ig-surface-900-contrast: hsla(from color(from var(--ig-surface-900) var(--y-contrast)) h 0 l/1); - --ig-surface-seed: #fff; - --ig-surface-seed-contrast: hsla(from color(from var(--ig-surface-seed) var(--y-contrast)) h 0 l/1); - --ig-surface-A100: hsl(from var(--ig-surface-500) h calc(s * 1.23) calc(l * 1.34)); - --ig-surface-A100-contrast: hsla(from color(from var(--ig-surface-A100) var(--y-contrast)) h 0 l/1); - --ig-surface-A200: hsl(from var(--ig-surface-500) h calc(s * 1.22) calc(l * 1.16)); - --ig-surface-A200-contrast: hsla(from color(from var(--ig-surface-A200) var(--y-contrast)) h 0 l/1); - --ig-surface-A400: hsl(from var(--ig-surface-500) h calc(s * 1.23) calc(l * 0.91)); - --ig-surface-A400-contrast: hsla(from color(from var(--ig-surface-A400) var(--y-contrast)) h 0 l/1); - --ig-surface-A700: hsl(from var(--ig-surface-500) h calc(s * 1.23) calc(l * 0.65)); - --ig-surface-A700-contrast: hsla(from color(from var(--ig-surface-A700) var(--y-contrast)) h 0 l/1); - --ig-info-50: oklch(from var(--ig-info-seed) 0.9403 min(c * 0.1374, 0.0229) calc(h + 6.806)); - --ig-info-50-contrast: hsla(from color(from var(--ig-info-50) var(--y-contrast)) h 0 l/1); - --ig-info-100: oklch(from var(--ig-info-seed) 0.8445 min(c * 0.4283, 0.0715) calc(h + 4.891)); - --ig-info-100-contrast: hsla(from color(from var(--ig-info-100) var(--y-contrast)) h 0 l/1); - --ig-info-200: oklch(from var(--ig-info-seed) 0.7562 min(c * 0.7275, 0.1215) calc(h + 3.125)); - --ig-info-200-contrast: hsla(from color(from var(--ig-info-200) var(--y-contrast)) h 0 l/1); - --ig-info-300: oklch(from var(--ig-info-seed) 0.6761 min(c * 0.9394, 0.1568) calc(h + 1.521)); - --ig-info-300-contrast: hsla(from color(from var(--ig-info-300) var(--y-contrast)) h 0 l/1); - --ig-info-400: oklch(from var(--ig-info-seed) 0.5996 min(c * 0.999, 0.1668) h); - --ig-info-400-contrast: hsla(from color(from var(--ig-info-400) var(--y-contrast)) h 0 l/1); - --ig-info-500: oklch(from var(--ig-info-seed) 0.5266 min(c * 0.937, 0.1564) h); - --ig-info-500-contrast: hsla(from color(from var(--ig-info-500) var(--y-contrast)) h 0 l/1); - --ig-info-600: oklch(from var(--ig-info-seed) 0.4555 min(c * 0.8148, 0.136) h); - --ig-info-600-contrast: hsla(from color(from var(--ig-info-600) var(--y-contrast)) h 0 l/1); - --ig-info-700: oklch(from var(--ig-info-seed) 0.3833 min(c * 0.6562, 0.1096) h); - --ig-info-700-contrast: hsla(from color(from var(--ig-info-700) var(--y-contrast)) h 0 l/1); - --ig-info-800: oklch(from var(--ig-info-seed) 0.3045 min(c * 0.4716, 0.0787) h); - --ig-info-800-contrast: hsla(from color(from var(--ig-info-800) var(--y-contrast)) h 0 l/1); - --ig-info-900: oklch(from var(--ig-info-seed) 0.2009 min(c * 0.2596, 0.0433) h); - --ig-info-900-contrast: hsla(from color(from var(--ig-info-900) var(--y-contrast)) h 0 l/1); - --ig-info-seed: #1377d5; - --ig-info-seed-contrast: hsla(from color(from var(--ig-info-seed) var(--y-contrast)) h 0 l/1); - --ig-info-A100: oklch(from var(--ig-info-seed) 0.8859 min(c * 0.3374, 0.0563) calc(h + 3.054)); - --ig-info-A100-contrast: hsla(from color(from var(--ig-info-A100) var(--y-contrast)) h 0 l/1); - --ig-info-A200: oklch(from var(--ig-info-seed) 0.7088 min(c * 0.9268, 0.1547) calc(h + 1.699)); - --ig-info-A200-contrast: hsla(from color(from var(--ig-info-A200) var(--y-contrast)) h 0 l/1); - --ig-info-A400: oklch(from var(--ig-info-seed) 0.5873 min(c * 1.0634, 0.1775) h); - --ig-info-A400-contrast: hsla(from color(from var(--ig-info-A400) var(--y-contrast)) h 0 l/1); - --ig-info-A700: oklch(from var(--ig-info-seed) 0.4945 min(c * 0.9117, 0.1522) h); - --ig-info-A700-contrast: hsla(from color(from var(--ig-info-A700) var(--y-contrast)) h 0 l/1); - --ig-success-50: oklch(from var(--ig-success-seed) 0.9325 min(c * 0.4533, 0.0713) h); - --ig-success-50-contrast: hsla(from color(from var(--ig-success-50) var(--y-contrast)) h 0 l/1); - --ig-success-100: oklch(from var(--ig-success-seed) 0.8312 min(c * 0.9418, 0.1481) h); - --ig-success-100-contrast: hsla(from color(from var(--ig-success-100) var(--y-contrast)) h 0 l/1); - --ig-success-200: oklch(from var(--ig-success-seed) 0.7415 min(c * 0.9822, 0.1545) h); - --ig-success-200-contrast: hsla(from color(from var(--ig-success-200) var(--y-contrast)) h 0 l/1); - --ig-success-300: oklch(from var(--ig-success-seed) 0.6595 min(c * 0.9259, 0.1456) h); - --ig-success-300-contrast: hsla(from color(from var(--ig-success-300) var(--y-contrast)) h 0 l/1); - --ig-success-400: oklch(from var(--ig-success-seed) 0.584 min(c * 0.8359, 0.1315) h); - --ig-success-400-contrast: hsla(from color(from var(--ig-success-400) var(--y-contrast)) h 0 l/1); - --ig-success-500: oklch(from var(--ig-success-seed) 0.5124 min(c * 0.7337, 0.1154) h); - --ig-success-500-contrast: hsla(from color(from var(--ig-success-500) var(--y-contrast)) h 0 l/1); - --ig-success-600: oklch(from var(--ig-success-seed) 0.4435 min(c * 0.6237, 0.0981) h); - --ig-success-600-contrast: hsla(from color(from var(--ig-success-600) var(--y-contrast)) h 0 l/1); - --ig-success-700: oklch(from var(--ig-success-seed) 0.3739 min(c * 0.4991, 0.0785) h); - --ig-success-700-contrast: hsla(from color(from var(--ig-success-700) var(--y-contrast)) h 0 l/1); - --ig-success-800: oklch(from var(--ig-success-seed) 0.2979 min(c * 0.3588, 0.0564) h); - --ig-success-800-contrast: hsla(from color(from var(--ig-success-800) var(--y-contrast)) h 0 l/1); - --ig-success-900: oklch(from var(--ig-success-seed) 0.1976 min(c * 0.1983, 0.0312) h); - --ig-success-900-contrast: hsla(from color(from var(--ig-success-900) var(--y-contrast)) h 0 l/1); - --ig-success-seed: #4eb862; - --ig-success-seed-contrast: hsla(from color(from var(--ig-success-seed) var(--y-contrast)) h 0 l/1); - --ig-success-A100: oklch(from var(--ig-success-seed) 0.8646 min(c * 1.5195, 0.239) h); - --ig-success-A100-contrast: hsla(from color(from var(--ig-success-A100) var(--y-contrast)) h 0 l/1); - --ig-success-A200: oklch(from var(--ig-success-seed) 0.6871 min(c * 1.282, 0.2016) h); - --ig-success-A200-contrast: hsla(from color(from var(--ig-success-A200) var(--y-contrast)) h 0 l/1); - --ig-success-A400: oklch(from var(--ig-success-seed) 0.5678 min(c * 1.0593, 0.1666) h); - --ig-success-A400-contrast: hsla(from color(from var(--ig-success-A400) var(--y-contrast)) h 0 l/1); - --ig-success-A700: oklch(from var(--ig-success-seed) 0.4777 min(c * 0.8913, 0.1402) h); - --ig-success-A700-contrast: hsla(from color(from var(--ig-success-A700) var(--y-contrast)) h 0 l/1); - --ig-warn-50: oklch(from var(--ig-warn-seed) 0.946 min(c * 0.1898, 0.0312) h); - --ig-warn-50-contrast: hsla(from color(from var(--ig-warn-50) var(--y-contrast)) h 0 l/1); - --ig-warn-100: oklch(from var(--ig-warn-seed) 0.8514 min(c * 0.5993, 0.0986) h); - --ig-warn-100-contrast: hsla(from color(from var(--ig-warn-100) var(--y-contrast)) h 0 l/1); - --ig-warn-200: oklch(from var(--ig-warn-seed) 0.7625 min(c * 0.8418, 0.1385) h); - --ig-warn-200-contrast: hsla(from color(from var(--ig-warn-200) var(--y-contrast)) h 0 l/1); - --ig-warn-300: oklch(from var(--ig-warn-seed) 0.6821 min(c * 0.8564, 0.1409) h); - --ig-warn-300-contrast: hsla(from color(from var(--ig-warn-300) var(--y-contrast)) h 0 l/1); - --ig-warn-400: oklch(from var(--ig-warn-seed) 0.6046 min(c * 0.7864, 0.1294) h); - --ig-warn-400-contrast: hsla(from color(from var(--ig-warn-400) var(--y-contrast)) h 0 l/1); - --ig-warn-500: oklch(from var(--ig-warn-seed) 0.5307 min(c * 0.6932, 0.114) h); - --ig-warn-500-contrast: hsla(from color(from var(--ig-warn-500) var(--y-contrast)) h 0 l/1); - --ig-warn-600: oklch(from var(--ig-warn-seed) 0.4588 min(c * 0.5893, 0.0969) h); - --ig-warn-600-contrast: hsla(from color(from var(--ig-warn-600) var(--y-contrast)) h 0 l/1); - --ig-warn-700: oklch(from var(--ig-warn-seed) 0.3861 min(c * 0.4709, 0.0775) h); - --ig-warn-700-contrast: hsla(from color(from var(--ig-warn-700) var(--y-contrast)) h 0 l/1); - --ig-warn-800: oklch(from var(--ig-warn-seed) 0.3066 min(c * 0.3375, 0.0555) h); - --ig-warn-800-contrast: hsla(from color(from var(--ig-warn-800) var(--y-contrast)) h 0 l/1); - --ig-warn-900: oklch(from var(--ig-warn-seed) 0.2023 min(c * 0.1855, 0.0305) h); - --ig-warn-900-contrast: hsla(from color(from var(--ig-warn-900) var(--y-contrast)) h 0 l/1); - --ig-warn-seed: #faa419; - --ig-warn-seed-contrast: hsla(from color(from var(--ig-warn-seed) var(--y-contrast)) h 0 l/1); - --ig-warn-A100: oklch(from var(--ig-warn-seed) 0.8928 min(c * 0.5171, 0.0851) calc(h + 1.537)); - --ig-warn-A100-contrast: hsla(from color(from var(--ig-warn-A100) var(--y-contrast)) h 0 l/1); - --ig-warn-A200: oklch(from var(--ig-warn-seed) 0.716 min(c * 0.9343, 0.1537) h); - --ig-warn-A200-contrast: hsla(from color(from var(--ig-warn-A200) var(--y-contrast)) h 0 l/1); - --ig-warn-A400: oklch(from var(--ig-warn-seed) 0.5917 min(c * 0.7753, 0.1275) h); - --ig-warn-A400-contrast: hsla(from color(from var(--ig-warn-A400) var(--y-contrast)) h 0 l/1); - --ig-warn-A700: oklch(from var(--ig-warn-seed) 0.4975 min(c * 0.6519, 0.1072) h); - --ig-warn-A700-contrast: hsla(from color(from var(--ig-warn-A700) var(--y-contrast)) h 0 l/1); - --ig-error-50: oklch(from var(--ig-error-seed) 0.9437 min(c * 0.1091, 0.0273) h); - --ig-error-50-contrast: hsla(from color(from var(--ig-error-50) var(--y-contrast)) h 0 l/1); - --ig-error-100: oklch(from var(--ig-error-seed) 0.8537 min(c * 0.318, 0.0795) calc(h - 0.072)); - --ig-error-100-contrast: hsla(from color(from var(--ig-error-100) var(--y-contrast)) h 0 l/1); - --ig-error-200: oklch(from var(--ig-error-seed) 0.7741 min(c * 0.5328, 0.1332) calc(h - 0.253)); - --ig-error-200-contrast: hsla(from color(from var(--ig-error-200) var(--y-contrast)) h 0 l/1); - --ig-error-300: oklch(from var(--ig-error-seed) 0.6973 min(c * 0.7678, 0.1919) h); - --ig-error-300-contrast: hsla(from color(from var(--ig-error-300) var(--y-contrast)) h 0 l/1); - --ig-error-400: oklch(from var(--ig-error-seed) 0.6245 min(c * 0.8568, 0.2142) h); - --ig-error-400-contrast: hsla(from color(from var(--ig-error-400) var(--y-contrast)) h 0 l/1); - --ig-error-500: oklch(from var(--ig-error-seed) 0.5505 min(c * 0.8337, 0.2084) h); - --ig-error-500-contrast: hsla(from color(from var(--ig-error-500) var(--y-contrast)) h 0 l/1); - --ig-error-600: oklch(from var(--ig-error-seed) 0.477 min(c * 0.7366, 0.1841) h); - --ig-error-600-contrast: hsla(from color(from var(--ig-error-600) var(--y-contrast)) h 0 l/1); - --ig-error-700: oklch(from var(--ig-error-seed) 0.4009 min(c * 0.5955, 0.1488) h); - --ig-error-700-contrast: hsla(from color(from var(--ig-error-700) var(--y-contrast)) h 0 l/1); - --ig-error-800: oklch(from var(--ig-error-seed) 0.3173 min(c * 0.427, 0.1067) h); - --ig-error-800-contrast: hsla(from color(from var(--ig-error-800) var(--y-contrast)) h 0 l/1); - --ig-error-900: oklch(from var(--ig-error-seed) 0.208 min(c * 0.2336, 0.0584) h); - --ig-error-900-contrast: hsla(from color(from var(--ig-error-900) var(--y-contrast)) h 0 l/1); - --ig-error-seed: #ff134a; - --ig-error-seed-contrast: hsla(from color(from var(--ig-error-seed) var(--y-contrast)) h 0 l/1); - --ig-error-A100: oklch(from var(--ig-error-seed) 0.9039 min(c * 0.1993, 0.0498) calc(h - 0.052)); - --ig-error-A100-contrast: hsla(from color(from var(--ig-error-A100) var(--y-contrast)) h 0 l/1); - --ig-error-A200: oklch(from var(--ig-error-seed) 0.7272 min(c * 0.6774, 0.1693) calc(h - 0.552)); - --ig-error-A200-contrast: hsla(from color(from var(--ig-error-A200) var(--y-contrast)) h 0 l/1); - --ig-error-A400: oklch(from var(--ig-error-seed) 0.6138 min(c * 0.9349, 0.2337) h); - --ig-error-A400-contrast: hsla(from color(from var(--ig-error-A400) var(--y-contrast)) h 0 l/1); - --ig-error-A700: oklch(from var(--ig-error-seed) 0.5186 min(c * 0.8298, 0.2074) h); - --ig-error-A700-contrast: hsla(from color(from var(--ig-error-A700) var(--y-contrast)) h 0 l/1); -} diff --git a/_to_delete/theming-tmp/perf.scss b/_to_delete/theming-tmp/perf.scss deleted file mode 100644 index 6bc23aa9..00000000 --- a/_to_delete/theming-tmp/perf.scss +++ /dev/null @@ -1,3 +0,0 @@ -@use '../sass/color' as *; -$p: palette($primary: #09f, $secondary: #df1b74, $surface: #fff, $gray: #333); -:root { @include palette($p); } diff --git a/_to_delete/theming-tmp/shades.html b/_to_delete/theming-tmp/shades.html deleted file mode 100644 index 018386dd..00000000 --- a/_to_delete/theming-tmp/shades.html +++ /dev/null @@ -1,746 +0,0 @@ - - -Shade generators -
-

Shade generators, side by side

-

Compiled from the library. Each swatch is painted from the relative-color expression the -library emits; the 10px strip along its bottom edge is the baked hex. If the two ever disagree you will -see a seam. Numbers are WCAG contrast against white.

- -
- - - changing this re-tints the ramp at runtime — no rebuild -
-
- - -
-

Framework primary

#0099ff - seed lands on 300
-
-
-

gamut-relative

-
- 50 -
- 100 -
- 200 -
- 300 -
- 400 -
- 500 -
- 600 -
- 700 -
- 800 -
- 900 -
-
- A100 -
- A200 -
- A400 -
- A700 -
-
-
-

legacy

-
- 50 -
- 100 -
- 200 -
- 300 -
- 400 -
- 500 -
- 600 -
- 700 -
- 800 -
- 900 -
-
- A100 -
- A200 -
- A400 -
- A700 -
-
-
-
-
-

Framework secondary

#df1b74 - seed lands on 400
-
-
-

gamut-relative

-
- 50 -
- 100 -
- 200 -
- 300 -
- 400 -
- 500 -
- 600 -
- 700 -
- 800 -
- 900 -
-
- A100 -
- A200 -
- A400 -
- A700 -
-
-
-

legacy

-
- 50 -
- 100 -
- 200 -
- 300 -
- 400 -
- 500 -
- 600 -
- 700 -
- 800 -
- 900 -
-
- A100 -
- A200 -
- A400 -
- A700 -
-
-
-
-
-

Warn

#faa419 - seed lands on 200
-
-
-

gamut-relative

-
- 50 -
- 100 -
- 200 -
- 300 -
- 400 -
- 500 -
- 600 -
- 700 -
- 800 -
- 900 -
-
- A100 -
- A200 -
- A400 -
- A700 -
-
-
-

legacy

-
- 50 -
- 100 -
- 200 -
- 300 -
- 400 -
- 500 -
- 600 -
- 700 -
- 800 -
- 900 -
-
- A100 -
- A200 -
- A400 -
- A700 -
-
-
-
-
-

Success

#4eb862 - seed lands on 200
-
-
-

gamut-relative

-
- 50 -
- 100 -
- 200 -
- 300 -
- 400 -
- 500 -
- 600 -
- 700 -
- 800 -
- 900 -
-
- A100 -
- A200 -
- A400 -
- A700 -
-
-
-

legacy

-
- 50 -
- 100 -
- 200 -
- 300 -
- 400 -
- 500 -
- 600 -
- 700 -
- 800 -
- 900 -
-
- A100 -
- A200 -
- A400 -
- A700 -
-
-
-
-
-

Near-white seed

#ffe9b0 - seed lands on 50
-
-
-

gamut-relative

-
- 50 -
- 100 -
- 200 -
- 300 -
- 400 -
- 500 -
- 600 -
- 700 -
- 800 -
- 900 -
-
- A100 -
- A200 -
- A400 -
- A700 -
-
-
-

legacy

-
- 50 -
- 100 -
- 200 -
- 300 -
- 400 -
- 500 -
- 600 -
- 700 -
- 800 -
- 900 -
-
- A100 -
- A200 -
- A400 -
- A700 -
-
-
-
-
-

Near-black seed

#141225 - seed lands on 900
-
-
-

gamut-relative

-
- 50 -
- 100 -
- 200 -
- 300 -
- 400 -
- 500 -
- 600 -
- 700 -
- 800 -
- 900 -
-
- A100 -
- A200 -
- A400 -
- A700 -
-
-
-

legacy

-
- 50 -
- 100 -
- 200 -
- 300 -
- 400 -
- 500 -
- 600 -
- 700 -
- 800 -
- 900 -
-
- A100 -
- A200 -
- A400 -
- A700 -
-
-
-
-
-

Neon

#00ff00 - seed lands on 100
-
-
-

gamut-relative

-
- 50 -
- 100 -
- 200 -
- 300 -
- 400 -
- 500 -
- 600 -
- 700 -
- 800 -
- 900 -
-
- A100 -
- A200 -
- A400 -
- A700 -
-
-
-

legacy

-
- 50 -
- 100 -
- 200 -
- 300 -
- 400 -
- 500 -
- 600 -
- 700 -
- 800 -
- 900 -
-
- A100 -
- A200 -
- A400 -
- A700 -
-
-
-
-
-

Washed out

#a99bb0 - seed lands on 300
-
-
-

gamut-relative

-
- 50 -
- 100 -
- 200 -
- 300 -
- 400 -
- 500 -
- 600 -
- 700 -
- 800 -
- 900 -
-
- A100 -
- A200 -
- A400 -
- A700 -
-
-
-

legacy

-
- 50 -
- 100 -
- 200 -
- 300 -
- 400 -
- 500 -
- 600 -
- 700 -
- 800 -
- 900 -
-
- A100 -
- A200 -
- A400 -
- A700 -
-
-
-
-
-

Pure gray

#8a8a8a - seed lands on 400
-
-
-

gamut-relative

-
- 50 -
- 100 -
- 200 -
- 300 -
- 400 -
- 500 -
- 600 -
- 700 -
- 800 -
- 900 -
-
- A100 -
- A200 -
- A400 -
- A700 -
-
-
-

legacy

-
- 50 -
- 100 -
- 200 -
- 300 -
- 400 -
- 500 -
- 600 -
- 700 -
- 800 -
- 900 -
-
- A100 -
- A200 -
- A400 -
- A700 -
-
-
-
- -
Generated by .scripts/previewShades.mjs. The legacy ramps are what the library -shipped before; the palettes bundled with the library stay on that generator.
-
- \ No newline at end of file diff --git a/_to_delete/theming-tmp/t1.css b/_to_delete/theming-tmp/t1.css deleted file mode 100644 index d84b32c6..00000000 --- a/_to_delete/theming-tmp/t1.css +++ /dev/null @@ -1,39 +0,0 @@ -.h0 { - l: 0.6477037682; - c: 0.2625732422; -} - -.h60 { - l: 0.756451357; - c: 0.1773965836; -} - -.h120 { - l: 0.9395631224; - c: 0.2230670929; -} - -.h210 { - l: 0.8413263903; - c: 0.1455053329; -} - -.h250 { - l: 0.6613947535; - c: 0.1872121811; -} - -.h270 { - l: 0.4649192077; - c: 0.3046937943; -} - -.h315 { - l: 0.6199188155; - c: 0.3053684235; -} - -.h330 { - l: 0.6972909907; - c: 0.3178344727; -} diff --git a/_to_delete/theming-tmp/t1.scss b/_to_delete/theming-tmp/t1.scss deleted file mode 100644 index 03d9e2bc..00000000 --- a/_to_delete/theming-tmp/t1.scss +++ /dev/null @@ -1,6 +0,0 @@ -@use 'sass:map'; -@use '../sass/color/gamut' as g; -@each $h in (0, 60, 120, 210, 250, 270, 315, 330) { - $c: g.cusp($h); - .h#{$h} { l: #{map.get($c,'l')}; c: #{map.get($c,'c')}; } -} diff --git a/_to_delete/theming-tmp/t2.css b/_to_delete/theming-tmp/t2.css deleted file mode 100644 index 7a669a35..00000000 --- a/_to_delete/theming-tmp/t2.css +++ /dev/null @@ -1,239 +0,0 @@ -.gamut-relative { - --ig-primary-50: oklch(from var(--ig-primary-seed) 0.9402 min(c * 0.1264, 0.0332) h); - --ig-primary-50-contrast: hsla(from color(from var(--ig-primary-50) var(--y-contrast)) h 0 l/1); - --ig-primary-100: oklch(from var(--ig-primary-seed) 0.844 min(c * 0.3941, 0.0862) h); - --ig-primary-100-contrast: hsla(from color(from var(--ig-primary-100) var(--y-contrast)) h 0 l/1); - --ig-primary-200: oklch(from var(--ig-primary-seed) 0.7551 min(c * 0.6602, 0.1303) h); - --ig-primary-200-contrast: hsla(from color(from var(--ig-primary-200) var(--y-contrast)) h 0 l/1); - --ig-primary-300: oklch(from var(--ig-primary-seed) 0.6742 min(c * 0.8212, 0.1538) h); - --ig-primary-300-contrast: hsla(from color(from var(--ig-primary-300) var(--y-contrast)) h 0 l/1); - --ig-primary-400: oklch(from var(--ig-primary-seed) 0.5973 min(c * 0.8367, 0.1539) h); - --ig-primary-400-contrast: hsla(from color(from var(--ig-primary-400) var(--y-contrast)) h 0 l/1); - --ig-primary-500: oklch(from var(--ig-primary-seed) 0.5244 min(c * 0.7664, 0.1409) h); - --ig-primary-500-contrast: hsla(from color(from var(--ig-primary-500) var(--y-contrast)) h 0 l/1); - --ig-primary-600: oklch(from var(--ig-primary-seed) 0.4535 min(c * 0.6602, 0.1236) h); - --ig-primary-600-contrast: hsla(from color(from var(--ig-primary-600) var(--y-contrast)) h 0 l/1); - --ig-primary-700: oklch(from var(--ig-primary-seed) 0.3818 min(c * 0.5301, 0.1046) h); - --ig-primary-700-contrast: hsla(from color(from var(--ig-primary-700) var(--y-contrast)) h 0 l/1); - --ig-primary-800: oklch(from var(--ig-primary-seed) 0.3034 min(c * 0.3808, 0.0833) h); - --ig-primary-800-contrast: hsla(from color(from var(--ig-primary-800) var(--y-contrast)) h 0 l/1); - --ig-primary-900: oklch(from var(--ig-primary-seed) 0.1995 min(c * 0.2097, 0.0548) h); - --ig-primary-900-contrast: hsla(from color(from var(--ig-primary-900) var(--y-contrast)) h 0 l/1); - --ig-primary-seed: #09f; - --ig-primary-seed-contrast: hsla(from color(from var(--ig-primary-seed) var(--y-contrast)) h 0 l/1); - --ig-primary-A100: oklch(from var(--ig-primary-seed) 0.8905 min(c * 0.3309, 0.0608) h); - --ig-primary-A100-contrast: hsla(from color(from var(--ig-primary-A100) var(--y-contrast)) h 0 l/1); - --ig-primary-A200: oklch(from var(--ig-primary-seed) 0.7075 min(c * 0.8606, 0.1581) h); - --ig-primary-A200-contrast: hsla(from color(from var(--ig-primary-A200) var(--y-contrast)) h 0 l/1); - --ig-primary-A400: oklch(from var(--ig-primary-seed) 0.5847 min(c * 0.8681, 0.1595) h); - --ig-primary-A400-contrast: hsla(from color(from var(--ig-primary-A400) var(--y-contrast)) h 0 l/1); - --ig-primary-A700: oklch(from var(--ig-primary-seed) 0.4923 min(c * 0.7355, 0.1351) h); - --ig-primary-A700-contrast: hsla(from color(from var(--ig-primary-A700) var(--y-contrast)) h 0 l/1); - --ig-secondary-50: oklch(from var(--ig-secondary-seed) 0.9439 min(c * 0.1274, 0.0414) h); - --ig-secondary-50-contrast: hsla(from color(from var(--ig-secondary-50) var(--y-contrast)) h 0 l/1); - --ig-secondary-100: oklch(from var(--ig-secondary-seed) 0.8609 min(c * 0.3781, 0.1024) h); - --ig-secondary-100-contrast: hsla(from color(from var(--ig-secondary-100) var(--y-contrast)) h 0 l/1); - --ig-secondary-200: oklch(from var(--ig-secondary-seed) 0.7822 min(c * 0.6467, 0.158) h); - --ig-secondary-200-contrast: hsla(from color(from var(--ig-secondary-200) var(--y-contrast)) h 0 l/1); - --ig-secondary-300: oklch(from var(--ig-secondary-seed) 0.7011 min(c * 0.8788, 0.2039) h); - --ig-secondary-300-contrast: hsla(from color(from var(--ig-secondary-300) var(--y-contrast)) h 0 l/1); - --ig-secondary-400: oklch(from var(--ig-secondary-seed) 0.6267 min(c * 0.9712, 0.2212) h); - --ig-secondary-400-contrast: hsla(from color(from var(--ig-secondary-400) var(--y-contrast)) h 0 l/1); - --ig-secondary-500: oklch(from var(--ig-secondary-seed) 0.5522 min(c * 0.9342, 0.2128) h); - --ig-secondary-500-contrast: hsla(from color(from var(--ig-secondary-500) var(--y-contrast)) h 0 l/1); - --ig-secondary-600: oklch(from var(--ig-secondary-seed) 0.4784 min(c * 0.8203, 0.1903) h); - --ig-secondary-600-contrast: hsla(from color(from var(--ig-secondary-600) var(--y-contrast)) h 0 l/1); - --ig-secondary-700: oklch(from var(--ig-secondary-seed) 0.402 min(c * 0.6615, 0.1617) h); - --ig-secondary-700-contrast: hsla(from color(from var(--ig-secondary-700) var(--y-contrast)) h 0 l/1); - --ig-secondary-800: oklch(from var(--ig-secondary-seed) 0.3181 min(c * 0.4739, 0.1284) h); - --ig-secondary-800-contrast: hsla(from color(from var(--ig-secondary-800) var(--y-contrast)) h 0 l/1); - --ig-secondary-900: oklch(from var(--ig-secondary-seed) 0.2075 min(c * 0.2592, 0.0838) h); - --ig-secondary-900-contrast: hsla(from color(from var(--ig-secondary-900) var(--y-contrast)) h 0 l/1); - --ig-secondary-seed: #df1b74; - --ig-secondary-seed-contrast: hsla(from color(from var(--ig-secondary-seed) var(--y-contrast)) h 0 l/1); - --ig-secondary-A100: oklch(from var(--ig-secondary-seed) 0.8961 min(c * 0.2738, 0.0766) h); - --ig-secondary-A100-contrast: hsla(from color(from var(--ig-secondary-A100) var(--y-contrast)) h 0 l/1); - --ig-secondary-A200: oklch(from var(--ig-secondary-seed) 0.7419 min(c * 0.8339, 0.1897) h); - --ig-secondary-A200-contrast: hsla(from color(from var(--ig-secondary-A200) var(--y-contrast)) h 0 l/1); - --ig-secondary-A400: oklch(from var(--ig-secondary-seed) 0.616 min(c * 1.053, 0.2396) h); - --ig-secondary-A400-contrast: hsla(from color(from var(--ig-secondary-A400) var(--y-contrast)) h 0 l/1); - --ig-secondary-A700: oklch(from var(--ig-secondary-seed) 0.5201 min(c * 0.9218, 0.2097) h); - --ig-secondary-A700-contrast: hsla(from color(from var(--ig-secondary-A700) var(--y-contrast)) h 0 l/1); - --ig-gray-50: oklch(from var(--ig-gray-seed) 0.9404 0 0); - --ig-gray-50-contrast: hsla(from color(from var(--ig-gray-50) var(--y-contrast)) h 0 l/1); - --ig-gray-100: oklch(from var(--ig-gray-seed) 0.8448 0 0); - --ig-gray-100-contrast: hsla(from color(from var(--ig-gray-100) var(--y-contrast)) h 0 l/1); - --ig-gray-200: oklch(from var(--ig-gray-seed) 0.7562 0 0); - --ig-gray-200-contrast: hsla(from color(from var(--ig-gray-200) var(--y-contrast)) h 0 l/1); - --ig-gray-300: oklch(from var(--ig-gray-seed) 0.6749 0 0); - --ig-gray-300-contrast: hsla(from color(from var(--ig-gray-300) var(--y-contrast)) h 0 l/1); - --ig-gray-400: oklch(from var(--ig-gray-seed) 0.598 0 0); - --ig-gray-400-contrast: hsla(from color(from var(--ig-gray-400) var(--y-contrast)) h 0 l/1); - --ig-gray-500: oklch(from var(--ig-gray-seed) 0.5248 0 0); - --ig-gray-500-contrast: hsla(from color(from var(--ig-gray-500) var(--y-contrast)) h 0 l/1); - --ig-gray-600: oklch(from var(--ig-gray-seed) 0.4539 0 0); - --ig-gray-600-contrast: hsla(from color(from var(--ig-gray-600) var(--y-contrast)) h 0 l/1); - --ig-gray-700: oklch(from var(--ig-gray-seed) 0.3822 0 0); - --ig-gray-700-contrast: hsla(from color(from var(--ig-gray-700) var(--y-contrast)) h 0 l/1); - --ig-gray-800: oklch(from var(--ig-gray-seed) 0.304 0 0); - --ig-gray-800-contrast: hsla(from color(from var(--ig-gray-800) var(--y-contrast)) h 0 l/1); - --ig-gray-900: oklch(from var(--ig-gray-seed) 0.1999 0 0); - --ig-gray-900-contrast: hsla(from color(from var(--ig-gray-900) var(--y-contrast)) h 0 l/1); - --ig-gray-seed: #333; - --ig-gray-seed-contrast: hsla(from color(from var(--ig-gray-seed) var(--y-contrast)) h 0 l/1); - --ig-surface-50: hsl(from var(--ig-surface-500) h calc(s * 1.23) calc(l * 1.78)); - --ig-surface-50-contrast: hsla(from color(from var(--ig-surface-50) var(--y-contrast)) h 0 l/1); - --ig-surface-100: hsl(from var(--ig-surface-500) h calc(s * 0.8) calc(l * 1.66)); - --ig-surface-100-contrast: hsla(from color(from var(--ig-surface-100) var(--y-contrast)) h 0 l/1); - --ig-surface-200: hsl(from var(--ig-surface-500) h calc(s * 0.64) calc(l * 1.43)); - --ig-surface-200-contrast: hsla(from color(from var(--ig-surface-200) var(--y-contrast)) h 0 l/1); - --ig-surface-300: hsl(from var(--ig-surface-500) h calc(s * 0.73) calc(l * 1.19)); - --ig-surface-300-contrast: hsla(from color(from var(--ig-surface-300) var(--y-contrast)) h 0 l/1); - --ig-surface-400: hsl(from var(--ig-surface-500) h calc(s * 0.875) calc(l * 1.08)); - --ig-surface-400-contrast: hsla(from color(from var(--ig-surface-400) var(--y-contrast)) h 0 l/1); - --ig-surface-500: #fff; - --ig-surface-500-contrast: hsla(from color(from var(--ig-surface-500) var(--y-contrast)) h 0 l/1); - --ig-surface-600: hsl(from var(--ig-surface-500) h calc(s * 1.26) calc(l * 0.89)); - --ig-surface-600-contrast: hsla(from color(from var(--ig-surface-600) var(--y-contrast)) h 0 l/1); - --ig-surface-700: hsl(from var(--ig-surface-500) h calc(s * 1.26) calc(l * 0.81)); - --ig-surface-700-contrast: hsla(from color(from var(--ig-surface-700) var(--y-contrast)) h 0 l/1); - --ig-surface-800: hsl(from var(--ig-surface-500) h calc(s * 1.26) calc(l * 0.73)); - --ig-surface-800-contrast: hsla(from color(from var(--ig-surface-800) var(--y-contrast)) h 0 l/1); - --ig-surface-900: hsl(from var(--ig-surface-500) h calc(s * 1.26) calc(l * 0.64)); - --ig-surface-900-contrast: hsla(from color(from var(--ig-surface-900) var(--y-contrast)) h 0 l/1); - --ig-surface-seed: #fff; - --ig-surface-seed-contrast: hsla(from color(from var(--ig-surface-seed) var(--y-contrast)) h 0 l/1); - --ig-surface-A100: hsl(from var(--ig-surface-500) h calc(s * 1.23) calc(l * 1.34)); - --ig-surface-A100-contrast: hsla(from color(from var(--ig-surface-A100) var(--y-contrast)) h 0 l/1); - --ig-surface-A200: hsl(from var(--ig-surface-500) h calc(s * 1.22) calc(l * 1.16)); - --ig-surface-A200-contrast: hsla(from color(from var(--ig-surface-A200) var(--y-contrast)) h 0 l/1); - --ig-surface-A400: hsl(from var(--ig-surface-500) h calc(s * 1.23) calc(l * 0.91)); - --ig-surface-A400-contrast: hsla(from color(from var(--ig-surface-A400) var(--y-contrast)) h 0 l/1); - --ig-surface-A700: hsl(from var(--ig-surface-500) h calc(s * 1.23) calc(l * 0.65)); - --ig-surface-A700-contrast: hsla(from color(from var(--ig-surface-A700) var(--y-contrast)) h 0 l/1); - --ig-info-50: oklch(from var(--ig-info-seed) 0.9403 min(c * 0.1374, 0.0328) h); - --ig-info-50-contrast: hsla(from color(from var(--ig-info-50) var(--y-contrast)) h 0 l/1); - --ig-info-100: oklch(from var(--ig-info-seed) 0.8445 min(c * 0.4283, 0.0851) h); - --ig-info-100-contrast: hsla(from color(from var(--ig-info-100) var(--y-contrast)) h 0 l/1); - --ig-info-200: oklch(from var(--ig-info-seed) 0.7562 min(c * 0.7275, 0.1305) h); - --ig-info-200-contrast: hsla(from color(from var(--ig-info-200) var(--y-contrast)) h 0 l/1); - --ig-info-300: oklch(from var(--ig-info-seed) 0.6761 min(c * 0.9394, 0.1599) h); - --ig-info-300-contrast: hsla(from color(from var(--ig-info-300) var(--y-contrast)) h 0 l/1); - --ig-info-400: oklch(from var(--ig-info-seed) 0.5996 min(c * 0.999, 0.167) h); - --ig-info-400-contrast: hsla(from color(from var(--ig-info-400) var(--y-contrast)) h 0 l/1); - --ig-info-500: oklch(from var(--ig-info-seed) 0.5266 min(c * 0.937, 0.1566) h); - --ig-info-500-contrast: hsla(from color(from var(--ig-info-500) var(--y-contrast)) h 0 l/1); - --ig-info-600: oklch(from var(--ig-info-seed) 0.4555 min(c * 0.8148, 0.1387) h); - --ig-info-600-contrast: hsla(from color(from var(--ig-info-600) var(--y-contrast)) h 0 l/1); - --ig-info-700: oklch(from var(--ig-info-seed) 0.3833 min(c * 0.6562, 0.1177) h); - --ig-info-700-contrast: hsla(from color(from var(--ig-info-700) var(--y-contrast)) h 0 l/1); - --ig-info-800: oklch(from var(--ig-info-seed) 0.3045 min(c * 0.4716, 0.0937) h); - --ig-info-800-contrast: hsla(from color(from var(--ig-info-800) var(--y-contrast)) h 0 l/1); - --ig-info-900: oklch(from var(--ig-info-seed) 0.2 min(c * 0.2596, 0.0616) h); - --ig-info-900-contrast: hsla(from color(from var(--ig-info-900) var(--y-contrast)) h 0 l/1); - --ig-info-seed: #1377d5; - --ig-info-seed-contrast: hsla(from color(from var(--ig-info-seed) var(--y-contrast)) h 0 l/1); - --ig-info-A100: oklch(from var(--ig-info-seed) 0.8875 min(c * 0.3701, 0.0618) h); - --ig-info-A100-contrast: hsla(from color(from var(--ig-info-A100) var(--y-contrast)) h 0 l/1); - --ig-info-A200: oklch(from var(--ig-info-seed) 0.7102 min(c * 0.9445, 0.1577) h); - --ig-info-A200-contrast: hsla(from color(from var(--ig-info-A200) var(--y-contrast)) h 0 l/1); - --ig-info-A400: oklch(from var(--ig-info-seed) 0.5873 min(c * 1.0634, 0.1775) h); - --ig-info-A400-contrast: hsla(from color(from var(--ig-info-A400) var(--y-contrast)) h 0 l/1); - --ig-info-A700: oklch(from var(--ig-info-seed) 0.4945 min(c * 0.9117, 0.1522) h); - --ig-info-A700-contrast: hsla(from color(from var(--ig-info-A700) var(--y-contrast)) h 0 l/1); - --ig-success-50: oklch(from var(--ig-success-seed) 0.9325 min(c * 0.4533, 0.1325) h); - --ig-success-50-contrast: hsla(from color(from var(--ig-success-50) var(--y-contrast)) h 0 l/1); - --ig-success-100: oklch(from var(--ig-success-seed) 0.8312 min(c * 0.9418, 0.2294) h); - --ig-success-100-contrast: hsla(from color(from var(--ig-success-100) var(--y-contrast)) h 0 l/1); - --ig-success-200: oklch(from var(--ig-success-seed) 0.7415 min(c * 0.9822, 0.2159) h); - --ig-success-200-contrast: hsla(from color(from var(--ig-success-200) var(--y-contrast)) h 0 l/1); - --ig-success-300: oklch(from var(--ig-success-seed) 0.6595 min(c * 0.9259, 0.1932) h); - --ig-success-300-contrast: hsla(from color(from var(--ig-success-300) var(--y-contrast)) h 0 l/1); - --ig-success-400: oklch(from var(--ig-success-seed) 0.584 min(c * 0.8359, 0.1713) h); - --ig-success-400-contrast: hsla(from color(from var(--ig-success-400) var(--y-contrast)) h 0 l/1); - --ig-success-500: oklch(from var(--ig-success-seed) 0.5124 min(c * 0.7337, 0.1503) h); - --ig-success-500-contrast: hsla(from color(from var(--ig-success-500) var(--y-contrast)) h 0 l/1); - --ig-success-600: oklch(from var(--ig-success-seed) 0.4435 min(c * 0.6237, 0.1301) h); - --ig-success-600-contrast: hsla(from color(from var(--ig-success-600) var(--y-contrast)) h 0 l/1); - --ig-success-700: oklch(from var(--ig-success-seed) 0.3739 min(c * 0.4991, 0.1097) h); - --ig-success-700-contrast: hsla(from color(from var(--ig-success-700) var(--y-contrast)) h 0 l/1); - --ig-success-800: oklch(from var(--ig-success-seed) 0.2979 min(c * 0.3588, 0.0874) h); - --ig-success-800-contrast: hsla(from color(from var(--ig-success-800) var(--y-contrast)) h 0 l/1); - --ig-success-900: oklch(from var(--ig-success-seed) 0.1966 min(c * 0.1983, 0.0577) h); - --ig-success-900-contrast: hsla(from color(from var(--ig-success-900) var(--y-contrast)) h 0 l/1); - --ig-success-seed: #4eb862; - --ig-success-seed-contrast: hsla(from color(from var(--ig-success-seed) var(--y-contrast)) h 0 l/1); - --ig-success-A100: oklch(from var(--ig-success-seed) 0.8646 min(c * 1.5195, 0.239) h); - --ig-success-A100-contrast: hsla(from color(from var(--ig-success-A100) var(--y-contrast)) h 0 l/1); - --ig-success-A200: oklch(from var(--ig-success-seed) 0.6871 min(c * 1.282, 0.2016) h); - --ig-success-A200-contrast: hsla(from color(from var(--ig-success-A200) var(--y-contrast)) h 0 l/1); - --ig-success-A400: oklch(from var(--ig-success-seed) 0.5678 min(c * 1.0593, 0.1666) h); - --ig-success-A400-contrast: hsla(from color(from var(--ig-success-A400) var(--y-contrast)) h 0 l/1); - --ig-success-A700: oklch(from var(--ig-success-seed) 0.4777 min(c * 0.8913, 0.1402) h); - --ig-success-A700-contrast: hsla(from color(from var(--ig-success-A700) var(--y-contrast)) h 0 l/1); - --ig-warn-50: oklch(from var(--ig-warn-seed) 0.946 min(c * 0.1898, 0.0446) h); - --ig-warn-50-contrast: hsla(from color(from var(--ig-warn-50) var(--y-contrast)) h 0 l/1); - --ig-warn-100: oklch(from var(--ig-warn-seed) 0.8514 min(c * 0.5993, 0.1174) h); - --ig-warn-100-contrast: hsla(from color(from var(--ig-warn-100) var(--y-contrast)) h 0 l/1); - --ig-warn-200: oklch(from var(--ig-warn-seed) 0.7625 min(c * 0.8418, 0.1487) h); - --ig-warn-200-contrast: hsla(from color(from var(--ig-warn-200) var(--y-contrast)) h 0 l/1); - --ig-warn-300: oklch(from var(--ig-warn-seed) 0.6821 min(c * 0.8564, 0.1436) h); - --ig-warn-300-contrast: hsla(from color(from var(--ig-warn-300) var(--y-contrast)) h 0 l/1); - --ig-warn-400: oklch(from var(--ig-warn-seed) 0.6046 min(c * 0.7864, 0.1295) h); - --ig-warn-400-contrast: hsla(from color(from var(--ig-warn-400) var(--y-contrast)) h 0 l/1); - --ig-warn-500: oklch(from var(--ig-warn-seed) 0.5307 min(c * 0.6932, 0.1142) h); - --ig-warn-500-contrast: hsla(from color(from var(--ig-warn-500) var(--y-contrast)) h 0 l/1); - --ig-warn-600: oklch(from var(--ig-warn-seed) 0.4588 min(c * 0.5893, 0.0988) h); - --ig-warn-600-contrast: hsla(from color(from var(--ig-warn-600) var(--y-contrast)) h 0 l/1); - --ig-warn-700: oklch(from var(--ig-warn-seed) 0.3861 min(c * 0.4709, 0.0832) h); - --ig-warn-700-contrast: hsla(from color(from var(--ig-warn-700) var(--y-contrast)) h 0 l/1); - --ig-warn-800: oklch(from var(--ig-warn-seed) 0.3066 min(c * 0.3375, 0.0661) h); - --ig-warn-800-contrast: hsla(from color(from var(--ig-warn-800) var(--y-contrast)) h 0 l/1); - --ig-warn-900: oklch(from var(--ig-warn-seed) 0.2013 min(c * 0.1855, 0.0434) h); - --ig-warn-900-contrast: hsla(from color(from var(--ig-warn-900) var(--y-contrast)) h 0 l/1); - --ig-warn-seed: #faa419; - --ig-warn-seed-contrast: hsla(from color(from var(--ig-warn-seed) var(--y-contrast)) h 0 l/1); - --ig-warn-A100: oklch(from var(--ig-warn-seed) 0.8951 min(c * 0.5269, 0.0867) h); - --ig-warn-A100-contrast: hsla(from color(from var(--ig-warn-A100) var(--y-contrast)) h 0 l/1); - --ig-warn-A200: oklch(from var(--ig-warn-seed) 0.716 min(c * 0.9343, 0.1537) h); - --ig-warn-A200-contrast: hsla(from color(from var(--ig-warn-A200) var(--y-contrast)) h 0 l/1); - --ig-warn-A400: oklch(from var(--ig-warn-seed) 0.5917 min(c * 0.7753, 0.1275) h); - --ig-warn-A400-contrast: hsla(from color(from var(--ig-warn-A400) var(--y-contrast)) h 0 l/1); - --ig-warn-A700: oklch(from var(--ig-warn-seed) 0.4975 min(c * 0.6519, 0.1072) h); - --ig-warn-A700-contrast: hsla(from color(from var(--ig-warn-A700) var(--y-contrast)) h 0 l/1); - --ig-error-50: oklch(from var(--ig-error-seed) 0.9437 min(c * 0.1091, 0.0389) h); - --ig-error-50-contrast: hsla(from color(from var(--ig-error-50) var(--y-contrast)) h 0 l/1); - --ig-error-100: oklch(from var(--ig-error-seed) 0.8569 min(c * 0.3324, 0.0989) h); - --ig-error-100-contrast: hsla(from color(from var(--ig-error-100) var(--y-contrast)) h 0 l/1); - --ig-error-200: oklch(from var(--ig-error-seed) 0.7808 min(c * 0.5577, 0.1498) h); - --ig-error-200-contrast: hsla(from color(from var(--ig-error-200) var(--y-contrast)) h 0 l/1); - --ig-error-300: oklch(from var(--ig-error-seed) 0.6973 min(c * 0.7678, 0.1957) h); - --ig-error-300-contrast: hsla(from color(from var(--ig-error-300) var(--y-contrast)) h 0 l/1); - --ig-error-400: oklch(from var(--ig-error-seed) 0.6245 min(c * 0.8568, 0.2144) h); - --ig-error-400-contrast: hsla(from color(from var(--ig-error-400) var(--y-contrast)) h 0 l/1); - --ig-error-500: oklch(from var(--ig-error-seed) 0.5505 min(c * 0.8337, 0.2087) h); - --ig-error-500-contrast: hsla(from color(from var(--ig-error-500) var(--y-contrast)) h 0 l/1); - --ig-error-600: oklch(from var(--ig-error-seed) 0.477 min(c * 0.7366, 0.1877) h); - --ig-error-600-contrast: hsla(from color(from var(--ig-error-600) var(--y-contrast)) h 0 l/1); - --ig-error-700: oklch(from var(--ig-error-seed) 0.4009 min(c * 0.5955, 0.1599) h); - --ig-error-700-contrast: hsla(from color(from var(--ig-error-700) var(--y-contrast)) h 0 l/1); - --ig-error-800: oklch(from var(--ig-error-seed) 0.3173 min(c * 0.427, 0.1271) h); - --ig-error-800-contrast: hsla(from color(from var(--ig-error-800) var(--y-contrast)) h 0 l/1); - --ig-error-900: oklch(from var(--ig-error-seed) 0.207 min(c * 0.2336, 0.083) h); - --ig-error-900-contrast: hsla(from color(from var(--ig-error-900) var(--y-contrast)) h 0 l/1); - --ig-error-seed: #ff134a; - --ig-error-seed-contrast: hsla(from color(from var(--ig-error-seed) var(--y-contrast)) h 0 l/1); - --ig-error-A100: oklch(from var(--ig-error-seed) 0.8969 min(c * 0.2421, 0.0714) h); - --ig-error-A100-contrast: hsla(from color(from var(--ig-error-A100) var(--y-contrast)) h 0 l/1); - --ig-error-A200: oklch(from var(--ig-error-seed) 0.7402 min(c * 0.7178, 0.1794) h); - --ig-error-A200-contrast: hsla(from color(from var(--ig-error-A200) var(--y-contrast)) h 0 l/1); - --ig-error-A400: oklch(from var(--ig-error-seed) 0.6138 min(c * 0.9349, 0.2337) h); - --ig-error-A400-contrast: hsla(from color(from var(--ig-error-A400) var(--y-contrast)) h 0 l/1); - --ig-error-A700: oklch(from var(--ig-error-seed) 0.5186 min(c * 0.8298, 0.2074) h); - --ig-error-A700-contrast: hsla(from color(from var(--ig-error-A700) var(--y-contrast)) h 0 l/1); -} - -lands-on { - primary: "300"; - secondary: "A400"; -} diff --git a/_to_delete/theming-tmp/t2.scss b/_to_delete/theming-tmp/t2.scss deleted file mode 100644 index f9653a2d..00000000 --- a/_to_delete/theming-tmp/t2.scss +++ /dev/null @@ -1,4 +0,0 @@ -@use '../sass/color' as *; -$p: palette($primary: #09f, $secondary: #df1b74, $surface: #fff, $gray: #333, $variant: 'test'); -.gamut-relative { @include palette($p, $contrast: false); } -lands-on { primary: seed-lands-on($p, 'primary'); secondary: seed-lands-on($p, 'secondary'); } diff --git a/_to_delete/theming-tmp/t3.scss b/_to_delete/theming-tmp/t3.scss deleted file mode 100644 index 35488a02..00000000 --- a/_to_delete/theming-tmp/t3.scss +++ /dev/null @@ -1,5 +0,0 @@ -@use '../sass/color' as *; -$p: palette($primary: #09f, $secondary: #df1b74, $surface: #fff, $gray: #333, $variant: 'test'); -raws { @each $v in ('50','100','200','300','400','500','600','700','800','900','A100','A700') { #{$v}: color($p, primary, $v); } } -grays { @each $v in ('50','100','500','900') { #{$v}: color($p, gray, $v); } } -surf { s500: color($p, surface, 500); } diff --git a/_to_delete/theming-tmp/t4.css b/_to_delete/theming-tmp/t4.css deleted file mode 100644 index 5bb0ce8d..00000000 --- a/_to_delete/theming-tmp/t4.css +++ /dev/null @@ -1,223 +0,0 @@ -.a { - --ig-primary-seed: #09f; - --expr-50: oklch(from var(--ig-primary-seed) 0.9402 min(c * 0.1264, 0.0232) calc(h + 6.804)); - --raw-50: rgb(225, 236, 251); - --expr-100: oklch(from var(--ig-primary-seed) 0.844 min(c * 0.3941, 0.0724) calc(h + 4.879)); - --raw-100: rgb(171, 207, 251); - --expr-200: oklch(from var(--ig-primary-seed) 0.7551 min(c * 0.6602, 0.1213) calc(h + 3.103)); - --raw-200: rgb(116, 180, 250); - --expr-300: oklch(from var(--ig-primary-seed) 0.6742 min(c * 0.8212, 0.1508) calc(h + 1.484)); - --raw-300: rgb(67, 155, 239); - --expr-400: oklch(from var(--ig-primary-seed) 0.5973 min(c * 0.8367, 0.1537) h); - --raw-400: rgb(27, 131, 214); - --expr-500: oklch(from var(--ig-primary-seed) 0.5244 min(c * 0.7664, 0.1408) h); - --raw-500: rgb(9, 109, 183); - --expr-600: oklch(from var(--ig-primary-seed) 0.4535 min(c * 0.6602, 0.1213) h); - --raw-600: rgb(7, 89, 150); - --expr-700: oklch(from var(--ig-primary-seed) 0.3818 min(c * 0.5301, 0.0974) h); - --raw-700: rgb(11, 69, 116); - --expr-800: oklch(from var(--ig-primary-seed) 0.3034 min(c * 0.3808, 0.0699) h); - --raw-800: rgb(12, 48, 80); - --expr-900: oklch(from var(--ig-primary-seed) 0.2004 min(c * 0.2097, 0.0385) h); - --raw-900: rgb(7, 23, 39); - --expr-A100: oklch(from var(--ig-primary-seed) 0.889 min(c * 0.3037, 0.0558) calc(h + 2.817)); - --raw-A100: rgb(192, 222, 255); - --expr-A200: oklch(from var(--ig-primary-seed) 0.7075 min(c * 0.8606, 0.1581) calc(h + 2.149)); - --raw-A200: rgb(74, 165, 255); - --expr-A400: oklch(from var(--ig-primary-seed) 0.5847 min(c * 0.8681, 0.1595) h); - --raw-A400: rgb(4, 127, 213); - --expr-A700: oklch(from var(--ig-primary-seed) 0.4923 min(c * 0.7355, 0.1351) h); - --raw-A700: rgb(0, 100, 169); -} - -.b { - --ig-primary-seed: #df1b74; - --expr-50: oklch(from var(--ig-primary-seed) 0.9439 min(c * 0.1274, 0.029) h); - --raw-50: rgb(254, 229, 235); - --expr-100: oklch(from var(--ig-primary-seed) 0.8579 min(c * 0.3639, 0.0828) calc(h - 0.806)); - --raw-100: rgb(255, 186, 205); - --expr-200: oklch(from var(--ig-primary-seed) 0.7764 min(c * 0.6247, 0.1421) calc(h - 0.949)); - --raw-200: rgb(255, 141, 177); - --expr-300: oklch(from var(--ig-primary-seed) 0.7011 min(c * 0.8788, 0.1999) h); - --raw-300: rgb(253, 93, 150); - --expr-400: oklch(from var(--ig-primary-seed) 0.6267 min(c * 0.9712, 0.221) h); - --raw-400: rgb(233, 52, 127); - --expr-500: oklch(from var(--ig-primary-seed) 0.5522 min(c * 0.9342, 0.2125) h); - --raw-500: rgb(203, 23, 105); - --expr-600: oklch(from var(--ig-primary-seed) 0.4784 min(c * 0.8203, 0.1866) h); - --raw-600: rgb(169, 13, 86); - --expr-700: oklch(from var(--ig-primary-seed) 0.402 min(c * 0.6615, 0.1505) h); - --raw-700: rgb(131, 16, 66); - --expr-800: oklch(from var(--ig-primary-seed) 0.3181 min(c * 0.4739, 0.1078) h); - --raw-800: rgb(91, 17, 46); - --expr-900: oklch(from var(--ig-primary-seed) 0.2085 min(c * 0.2592, 0.059) h); - --raw-900: rgb(44, 10, 22); - --expr-A100: oklch(from var(--ig-primary-seed) 0.9072 min(c * 0.231, 0.0526) calc(h + 356.496)); - --raw-A100: rgb(255, 211, 224); - --expr-A200: oklch(from var(--ig-primary-seed) 0.7302 min(c * 0.7981, 0.1816) calc(h - 1.535)); - --raw-A200: rgb(255, 111, 163); - --expr-A400: oklch(from var(--ig-primary-seed) 0.616 min(c * 1.053, 0.2396) h); - --raw-A400: rgb(236, 25, 123); - --expr-A700: oklch(from var(--ig-primary-seed) 0.5201 min(c * 0.9218, 0.2097) h); - --raw-A700: rgb(191, 1, 96); -} - -.c { - --ig-primary-seed: #faa419; - --expr-50: oklch(from var(--ig-primary-seed) 0.946 min(c * 0.1898, 0.0312) h); - --raw-50: rgb(251, 234, 215); - --expr-100: oklch(from var(--ig-primary-seed) 0.8514 min(c * 0.5993, 0.0986) h); - --raw-100: rgb(247, 196, 134); - --expr-200: oklch(from var(--ig-primary-seed) 0.7625 min(c * 0.8418, 0.1385) h); - --raw-200: rgb(233, 161, 64); - --expr-300: oklch(from var(--ig-primary-seed) 0.6821 min(c * 0.8564, 0.1409) h); - --raw-300: rgb(207, 136, 24); - --expr-400: oklch(from var(--ig-primary-seed) 0.6046 min(c * 0.7864, 0.1294) h); - --raw-400: rgb(177, 114, 4); - --expr-500: oklch(from var(--ig-primary-seed) 0.5307 min(c * 0.6932, 0.114) h); - --raw-500: rgb(149, 95, 1); - --expr-600: oklch(from var(--ig-primary-seed) 0.4588 min(c * 0.5893, 0.0969) h); - --raw-600: rgb(121, 77, 4); - --expr-700: oklch(from var(--ig-primary-seed) 0.3861 min(c * 0.4709, 0.0775) h); - --raw-700: rgb(94, 60, 9); - --expr-800: oklch(from var(--ig-primary-seed) 0.3066 min(c * 0.3375, 0.0555) h); - --raw-800: rgb(65, 42, 11); - --expr-900: oklch(from var(--ig-primary-seed) 0.2023 min(c * 0.1855, 0.0305) h); - --raw-900: rgb(31, 20, 6); - --expr-A100: oklch(from var(--ig-primary-seed) 0.8928 min(c * 0.5171, 0.0851) calc(h + 1.537)); - --raw-A100: rgb(255, 211, 157); - --expr-A200: oklch(from var(--ig-primary-seed) 0.716 min(c * 0.9343, 0.1537) h); - --raw-A200: rgb(222, 144, 4); - --expr-A400: oklch(from var(--ig-primary-seed) 0.5917 min(c * 0.7753, 0.1275) h); - --raw-A400: rgb(172, 110, 0); - --expr-A700: oklch(from var(--ig-primary-seed) 0.4975 min(c * 0.6519, 0.1072) h); - --raw-A700: rgb(136, 86, 0); -} - -.d { - --ig-primary-seed: #ffe9b0; - --expr-50: oklch(from var(--ig-primary-seed) 0.9401 min(c * 0.6808, 0.0522) h); - --raw-50: rgb(249, 234, 196); - --expr-100: oklch(from var(--ig-primary-seed) 0.8453 min(c * 1.6622, 0.1273) h); - --raw-100: rgb(237, 200, 98); - --expr-200: oklch(from var(--ig-primary-seed) 0.7574 min(c * 1.8285, 0.1401) h); - --raw-200: rgb(211, 171, 49); - --expr-300: oklch(from var(--ig-primary-seed) 0.6762 min(c * 1.7413, 0.1334) h); - --raw-300: rgb(184, 146, 21); - --expr-400: oklch(from var(--ig-primary-seed) 0.5992 min(c * 1.5749, 0.1207) h); - --raw-400: rgb(157, 123, 7); - --expr-500: oklch(from var(--ig-primary-seed) 0.5259 min(c * 1.383, 0.1059) h); - --raw-500: rgb(131, 103, 5); - --expr-600: oklch(from var(--ig-primary-seed) 0.4548 min(c * 1.1747, 0.09) h); - --raw-600: rgb(106, 83, 7); - --expr-700: oklch(from var(--ig-primary-seed) 0.3829 min(c * 0.9388, 0.0719) h); - --raw-700: rgb(82, 65, 11); - --expr-800: oklch(from var(--ig-primary-seed) 0.3043 min(c * 0.6733, 0.0516) h); - --raw-800: rgb(57, 45, 12); - --expr-900: oklch(from var(--ig-primary-seed) 0.201 min(c * 0.3707, 0.0284) h); - --raw-900: rgb(27, 22, 7); - --expr-A100: oklch(from var(--ig-primary-seed) 0.887 min(c * 1.8368, 0.1407) h); - --raw-A100: rgb(255, 213, 97); - --expr-A200: oklch(from var(--ig-primary-seed) 0.7096 min(c * 1.8927, 0.145) h); - --raw-A200: rgb(197, 156, 0); - --expr-A400: oklch(from var(--ig-primary-seed) 0.5864 min(c * 1.5641, 0.1198) h); - --raw-A400: rgb(152, 120, 0); - --expr-A700: oklch(from var(--ig-primary-seed) 0.4936 min(c * 1.3166, 0.1009) h); - --raw-A700: rgb(120, 94, 0); -} - -.e { - --ig-primary-seed: #141225; - --expr-50: oklch(from var(--ig-primary-seed) 0.9452 min(c * 0.2038, 0.0077) calc(h + 13.042)); - --raw-50: rgb(237, 236, 241); - --expr-100: oklch(from var(--ig-primary-seed) 0.8463 min(c * 0.6855, 0.0258) calc(h + 9.779)); - --raw-100: rgb(206, 201, 220); - --expr-200: oklch(from var(--ig-primary-seed) 0.759 min(c * 1.1884, 0.0448) calc(h + 6.898)); - --raw-200: rgb(178, 172, 203); - --expr-300: oklch(from var(--ig-primary-seed) 0.6794 min(c * 1.6473, 0.0621) calc(h + 4.27)); - --raw-300: rgb(152, 146, 188); - --expr-400: oklch(from var(--ig-primary-seed) 0.6023 min(c * 2.0078, 0.0757) calc(h + 1.727)); - --raw-400: rgb(127, 122, 172); - --expr-500: oklch(from var(--ig-primary-seed) 0.5299 min(c * 2.1791, 0.0821) h); - --raw-500: rgb(105, 100, 153); - --expr-600: oklch(from var(--ig-primary-seed) 0.4595 min(c * 2.1031, 0.0793) h); - --raw-600: rgb(85, 80, 130); - --expr-700: oklch(from var(--ig-primary-seed) 0.3869 min(c * 1.7868, 0.0674) h); - --raw-700: rgb(66, 62, 102); - --expr-800: oklch(from var(--ig-primary-seed) 0.3074 min(c * 1.3116, 0.0494) h); - --raw-800: rgb(46, 44, 71); - --expr-900: oklch(from var(--ig-primary-seed) 0.2027 min(c * 0.7261, 0.0274) h); - --raw-900: rgb(22, 21, 35); - --expr-A100: oklch(from var(--ig-primary-seed) 0.8949 min(c * 1.5789, 0.0595) calc(h + 12.128)); - --raw-A100: rgb(225, 212, 255); - --expr-A200: oklch(from var(--ig-primary-seed) 0.7203 min(c * 4.2713, 0.161) calc(h + 6.223)); - --raw-A200: rgb(170, 142, 255); - --expr-A400: oklch(from var(--ig-primary-seed) 0.6077 min(c * 6.0798, 0.2292) calc(h + 2.297)); - --raw-A400: rgb(134, 92, 255); - --expr-A700: oklch(from var(--ig-primary-seed) 0.5244 min(c * 7.1002, 0.2676) h); - --raw-A700: rgb(109, 46, 247); -} - -.f { - --ig-primary-seed: #00ff00; - --expr-50: oklch(from var(--ig-primary-seed) 0.9305 min(c * 0.3595, 0.106) h); - --raw-50: rgb(191, 251, 185); - --expr-100: oklch(from var(--ig-primary-seed) 0.8227 min(c * 0.7525, 0.2219) h); - --raw-100: rgb(93, 231, 85); - --expr-200: oklch(from var(--ig-primary-seed) 0.7358 min(c * 0.784, 0.2312) h); - --raw-200: rgb(47, 203, 42); - --expr-300: oklch(from var(--ig-primary-seed) 0.6543 min(c * 0.7392, 0.2179) h); - --raw-300: rgb(17, 175, 14); - --expr-400: oklch(from var(--ig-primary-seed) 0.5793 min(c * 0.6674, 0.1968) h); - --raw-400: rgb(1, 149, 1); - --expr-500: oklch(from var(--ig-primary-seed) 0.5083 min(c * 0.5858, 0.1727) h); - --raw-500: rgb(1, 124, 0); - --expr-600: oklch(from var(--ig-primary-seed) 0.4397 min(c * 0.4977, 0.1467) h); - --raw-600: rgb(5, 101, 4); - --expr-700: oklch(from var(--ig-primary-seed) 0.371 min(c * 0.3987, 0.1175) h); - --raw-700: rgb(11, 78, 9); - --expr-800: oklch(from var(--ig-primary-seed) 0.2958 min(c * 0.2868, 0.0846) h); - --raw-800: rgb(13, 55, 11); - --expr-900: oklch(from var(--ig-primary-seed) 0.1964 min(c * 0.1586, 0.0468) h); - --raw-900: rgb(7, 26, 6); - --expr-A100: oklch(from var(--ig-primary-seed) 0.8632 min(c * 0.9255, 0.2729) h); - --raw-A100: rgb(58, 251, 52); - --expr-A200: oklch(from var(--ig-primary-seed) 0.686 min(c * 0.7917, 0.2334) h); - --raw-A200: rgb(0, 187, 0); - --expr-A400: oklch(from var(--ig-primary-seed) 0.5668 min(c * 0.6542, 0.1929) h); - --raw-A400: rgb(0, 144, 0); - --expr-A700: oklch(from var(--ig-primary-seed) 0.4769 min(c * 0.5504, 0.1623) h); - --raw-A700: rgb(0, 114, 0); -} - -.g { - --ig-primary-seed: #a99bb0; - --expr-50: oklch(from var(--ig-primary-seed) 0.9458 min(c * 0.2673, 0.0091) calc(h + 6.917)); - --raw-50: rgb(240, 235, 241); - --expr-100: oklch(from var(--ig-primary-seed) 0.8503 min(c * 0.8851, 0.0301) calc(h + 5.006)); - --raw-100: rgb(215, 200, 218); - --expr-200: oklch(from var(--ig-primary-seed) 0.7632 min(c * 1.5308, 0.052) calc(h + 3.263)); - --raw-200: rgb(192, 168, 200); - --expr-300: oklch(from var(--ig-primary-seed) 0.6828 min(c * 2.0471, 0.0695) calc(h + 1.655)); - --raw-300: rgb(170, 140, 182); - --expr-400: oklch(from var(--ig-primary-seed) 0.6055 min(c * 2.2731, 0.0772) calc(h + 0.11)); - --raw-400: rgb(147, 116, 162); - --expr-500: oklch(from var(--ig-primary-seed) 0.533 min(c * 2.1964, 0.0746) h); - --raw-500: rgb(125, 95, 139); - --expr-600: oklch(from var(--ig-primary-seed) 0.461 min(c * 1.935, 0.0657) h); - --raw-600: rgb(102, 77, 114); - --expr-700: oklch(from var(--ig-primary-seed) 0.3879 min(c * 1.5661, 0.0532) h); - --raw-700: rgb(79, 60, 88); - --expr-800: oklch(from var(--ig-primary-seed) 0.3081 min(c * 1.127, 0.0383) h); - --raw-800: rgb(55, 42, 61); - --expr-900: oklch(from var(--ig-primary-seed) 0.2031 min(c * 0.6201, 0.0211) h); - --raw-900: rgb(26, 20, 29); - --expr-A100: oklch(from var(--ig-primary-seed) 0.8992 min(c * 2.3677, 0.0804) calc(h + 5.985)); - --raw-A100: rgb(247, 205, 255); - --expr-A200: oklch(from var(--ig-primary-seed) 0.7351 min(c * 6.2159, 0.211) calc(h + 2.701)); - --raw-A200: rgb(221, 119, 255); - --expr-A400: oklch(from var(--ig-primary-seed) 0.6216 min(c * 8.2185, 0.279) calc(h + 0.431)); - --raw-A400: rgb(194, 45, 246); - --expr-A700: oklch(from var(--ig-primary-seed) 0.5279 min(c * 7.6261, 0.2589) h); - --raw-A700: rgb(159, 4, 206); -} diff --git a/_to_delete/theming-tmp/t4.scss b/_to_delete/theming-tmp/t4.scss deleted file mode 100644 index 7ba9713d..00000000 --- a/_to_delete/theming-tmp/t4.scss +++ /dev/null @@ -1,14 +0,0 @@ -@use 'sass:map'; -@use '../sass/color' as *; -$seeds: ('a': #09f, 'b': #df1b74, 'c': #faa419, 'd': #ffe9b0, 'e': #141225, 'f': #00ff00, 'g': #a99bb0); -@each $k, $seed in $seeds { - $p: palette($primary: $seed, $secondary: $seed, $surface: #fff, $variant: 't'); - $shades: map.get($p, 'primary'); - .#{$k} { - --ig-primary-seed: #{$seed}; - @each $v in ('50','100','200','300','400','500','600','700','800','900','A100','A200','A400','A700') { - --expr-#{$v}: #{map.get($shades, $v)}; - --raw-#{$v}: #{map.get($shades, '#{$v}-raw')}; - } - } -} diff --git a/_to_delete/theming-tmp/tests.css b/_to_delete/theming-tmp/tests.css deleted file mode 100644 index ae260d06..00000000 --- a/_to_delete/theming-tmp/tests.css +++ /dev/null @@ -1,7928 +0,0 @@ -@charset "UTF-8"; -/* # Module: Animations */ -/* -------------------- */ -/* Test: should include a keyframe animation only once at the root of the stylesheet */ -/* ASSERT: */ -/* OUTPUT */ -@keyframes test-keyframes { - 0% { - color: red; - } - 100% { - color: blue; - } -} -/* END_OUTPUT */ -/* EXPECTED */ -@keyframes test-keyframes { - 0% { - color: red; - } - 100% { - color: blue; - } -} -/* END_EXPECTED */ -/* END_ASSERT */ -/* */ -/* Test: should include a list of animations using the animation mixin */ -/* ASSERT: */ -/* OUTPUT */ -.test-output { - animation: "test-keyframes" 2s ease-out, "bounce-out" 1s ease-out; -} - -/* END_OUTPUT */ -/* EXPECTED */ -.test-output { - animation: "test-keyframes" 2s ease-out, "bounce-out" 1s ease-out; -} - -/* END_EXPECTED */ -/* END_ASSERT */ -/* */ -/* */ -/* # Module: Color */ -/* --------------- */ -/* # Module: Color :: base */ -/* ----------------------- */ -/* Test: should mix two colors to produce an opaque color */ -/* ✔ [assert-equal] should mix two colors to produce an opaque color */ -/* ✔ [assert-equal] should mix two colors to produce an opaque color */ -/* */ -/* Test: converts a color to a list of HSL values */ -/* ✔ [assert-equal] converts a color to a list of HSL values */ -/* */ -/* */ -/* # Module: Color :: charts */ -/* ------------------------- */ -/* Test: should resolve regular chart brushes */ -/* ✔ [assert-equal] should resolve regular chart brushes */ -/* */ -/* Test: should resolve color-blind chart brushes */ -/* ✔ [assert-equal] should resolve color-blind chart brushes */ -/* */ -/* */ -/* # Module: Color :: contrast */ -/* --------------------------- */ -/* Test: should return an adaptive contrast color from a hex value */ -/* ✔ [assert-equal] should return an adaptive contrast color from a hex value */ -/* */ -/* Test: should return an adaptive contrast color from an hsl value */ -/* ✔ [assert-equal] should return an adaptive contrast color from an hsl value */ -/* */ -/* Test: should return an adaptive contrast color from a CSS variable value */ -/* ✔ [assert-equal] should return an adaptive contrast color from a CSS variable value */ -/* */ -/* Test: should return the passed background value if no valid colors are provided */ -/* ✔ [assert-equal] should return the passed background value if no valid colors are provided */ -/* */ -/* Test: should return black for a white background */ -/* ✔ [assert-equal] should return black for a white background */ -/* */ -/* Test: should return white for a black background */ -/* ✔ [assert-equal] should return white for a black background */ -/* */ -/* Test: should return a contrasting color for a given background regardless of level case */ -/* ✔ [assert-equal] should return a contrasting color for a given background regardless of level case */ -/* ✔ [assert-equal] should return a contrasting color for a given background regardless of level case */ -/* ✔ [assert-equal] should return a contrasting color for a given background regardless of level case */ -/* */ -/* Test: returns the best contrast color from a list of candidates */ -/* ✔ [assert-equal] returns the best contrast color from a list of candidates */ -/* */ -/* Test: should return an AAA contrasting color for a given background */ -/* ✔ [assert-equal] should return an AAA contrasting color for a given background */ -/* */ -/* Test: should return an AA contrasting color for a given background */ -/* ✔ [assert-equal] should return an AA contrasting color for a given background */ -/* */ -/* */ -/* # Module: Color :: palette */ -/* -------------------------- */ -/* Test: should return a shade of type color w/ palette as only argument */ -/* ✔ [assert-equal] should return a shade of type color w/ palette as only argument */ -/* */ -/* Test: should return a shade of type color string w/ palette and color as only arguments */ -/* ✔ [assert-equal] should return a shade of type color string w/ palette and color as only arguments */ -/* */ -/* Test: should return a shade of type string w/ all arguments passed */ -/* ✔ [assert-equal] should return a shade of type string w/ all arguments passed */ -/* ✔ [assert-unequal] should return a shade of type string w/ all arguments passed */ -/* */ -/* Test: should return a shade as CSS variable w/o arguments */ -/* ✔ [assert-equal] should return a shade as CSS variable w/o arguments */ -/* ✔ [assert-equal] should return a shade as CSS variable w/o arguments */ -/* */ -/* Test: should return a shade as CSS variable w/ color as only argument */ -/* ✔ [assert-equal] should return a shade as CSS variable w/ color as only argument */ -/* ✔ [assert-equal] should return a shade as CSS variable w/ color as only argument */ -/* */ -/* Test: should return a shade of type string as CSS var w/ color and variant as only arguments */ -/* ✔ [assert-equal] should return a shade of type string as CSS var w/ color and variant as only arguments */ -/* ✔ [assert-equal] should return a shade of type string as CSS var w/ color and variant as only arguments */ -/* */ -/* Test: should return a contrast shade w/ palette as only argument */ -/* ✔ [assert-equal] should return a contrast shade w/ palette as only argument */ -/* */ -/* Test: should return a contrast shade of type string as CSS var w/ color and variant as only arguments */ -/* ✔ [assert-equal] should return a contrast shade of type string as CSS var w/ color and variant as only arguments */ -/* ✔ [assert-equal] should return a contrast shade of type string as CSS var w/ color and variant as only arguments */ -/* */ -/* Test: should retrieve colors from a palette regadless of type of key */ -/* ✔ [assert-true] should retrieve colors from a palette regadless of type of key */ -/* ✔ [assert-equal] should retrieve colors from a palette regadless of type of key */ -/* ✔ [assert-true] should retrieve colors from a palette regadless of type of key */ -/* ✔ [assert-equal] should retrieve colors from a palette regadless of type of key */ -/* ✔ [assert-true] should retrieve colors from a palette regadless of type of key */ -/* ✔ [assert-equal] should retrieve colors from a palette regadless of type of key */ -/* ✔ [assert-true] should retrieve colors from a palette regadless of type of key */ -/* ✔ [assert-equal] should retrieve colors from a palette regadless of type of key */ -/* */ -/* Test: should generate an HSL color shade from a given base color */ -/* ✔ [assert-equal] should generate an HSL color shade from a given base color */ -/* */ -/* Test: should generate an a contrasting HSL grayscale shade for a given surface color */ -/* ✔ [assert-equal] should generate an a contrasting HSL grayscale shade for a given surface color */ -/* ✔ [assert-equal] should generate an a contrasting HSL grayscale shade for a given surface color */ -/* */ -/* Test: should generate a valid palette */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] map */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] map */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] map */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] map */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] map */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] map */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] map */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] map */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] map */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] string */ -/* */ -/* Test: should generate correct CSS variables for color and grayscale shades in a palette */ -/* ASSERT: */ -/* OUTPUT */ -:root { - --ig-wcag-a: 0.31; - --ig-wcag-aa: 0.185; - --ig-wcag-aaa: 0.178; - --ig-contrast-level: var(--ig-wcag-aa); - --y: clamp(0, (y / var(--ig-contrast-level) - 1) * -infinity, 1); - --y-contrast: xyz-d65 var(--y) var(--y) var(--y); -} - -:root { - --ig-primary-50: oklch(from var(--ig-primary-seed) 0.9402 min(c * 0.1264, 0.0232) calc(h + 6.804)); - --ig-primary-50-contrast: hsla(from color(from var(--ig-primary-50) var(--y-contrast)) h 0 l/1); - --ig-primary-100: oklch(from var(--ig-primary-seed) 0.844 min(c * 0.3941, 0.0724) calc(h + 4.879)); - --ig-primary-100-contrast: hsla(from color(from var(--ig-primary-100) var(--y-contrast)) h 0 l/1); - --ig-primary-200: oklch(from var(--ig-primary-seed) 0.7551 min(c * 0.6602, 0.1213) calc(h + 3.103)); - --ig-primary-200-contrast: hsla(from color(from var(--ig-primary-200) var(--y-contrast)) h 0 l/1); - --ig-primary-300: oklch(from var(--ig-primary-seed) 0.6742 min(c * 0.8212, 0.1508) calc(h + 1.484)); - --ig-primary-300-contrast: hsla(from color(from var(--ig-primary-300) var(--y-contrast)) h 0 l/1); - --ig-primary-400: oklch(from var(--ig-primary-seed) 0.5973 min(c * 0.8367, 0.1537) h); - --ig-primary-400-contrast: hsla(from color(from var(--ig-primary-400) var(--y-contrast)) h 0 l/1); - --ig-primary-500: oklch(from var(--ig-primary-seed) 0.5244 min(c * 0.7664, 0.1408) h); - --ig-primary-500-contrast: hsla(from color(from var(--ig-primary-500) var(--y-contrast)) h 0 l/1); - --ig-primary-600: oklch(from var(--ig-primary-seed) 0.4535 min(c * 0.6602, 0.1213) h); - --ig-primary-600-contrast: hsla(from color(from var(--ig-primary-600) var(--y-contrast)) h 0 l/1); - --ig-primary-700: oklch(from var(--ig-primary-seed) 0.3818 min(c * 0.5301, 0.0974) h); - --ig-primary-700-contrast: hsla(from color(from var(--ig-primary-700) var(--y-contrast)) h 0 l/1); - --ig-primary-800: oklch(from var(--ig-primary-seed) 0.3034 min(c * 0.3808, 0.0699) h); - --ig-primary-800-contrast: hsla(from color(from var(--ig-primary-800) var(--y-contrast)) h 0 l/1); - --ig-primary-900: oklch(from var(--ig-primary-seed) 0.2004 min(c * 0.2097, 0.0385) h); - --ig-primary-900-contrast: hsla(from color(from var(--ig-primary-900) var(--y-contrast)) h 0 l/1); - --ig-primary-seed: #09f; - --ig-primary-seed-contrast: hsla(from color(from var(--ig-primary-seed) var(--y-contrast)) h 0 l/1); - --ig-primary-A100: oklch(from var(--ig-primary-seed) 0.889 min(c * 0.3037, 0.0558) calc(h + 2.817)); - --ig-primary-A100-contrast: hsla(from color(from var(--ig-primary-A100) var(--y-contrast)) h 0 l/1); - --ig-primary-A200: oklch(from var(--ig-primary-seed) 0.7075 min(c * 0.8606, 0.1581) calc(h + 2.149)); - --ig-primary-A200-contrast: hsla(from color(from var(--ig-primary-A200) var(--y-contrast)) h 0 l/1); - --ig-primary-A400: oklch(from var(--ig-primary-seed) 0.5847 min(c * 0.8681, 0.1595) h); - --ig-primary-A400-contrast: hsla(from color(from var(--ig-primary-A400) var(--y-contrast)) h 0 l/1); - --ig-primary-A700: oklch(from var(--ig-primary-seed) 0.4923 min(c * 0.7355, 0.1351) h); - --ig-primary-A700-contrast: hsla(from color(from var(--ig-primary-A700) var(--y-contrast)) h 0 l/1); - --ig-secondary-50: oklch(from var(--ig-secondary-seed) 0.9463 min(c * 0.1097, 0.0141) calc(h + 6.926)); - --ig-secondary-50-contrast: hsla(from color(from var(--ig-secondary-50) var(--y-contrast)) h 0 l/1); - --ig-secondary-100: oklch(from var(--ig-secondary-seed) 0.8515 min(c * 0.3639, 0.0467) calc(h + 5.03)); - --ig-secondary-100-contrast: hsla(from color(from var(--ig-secondary-100) var(--y-contrast)) h 0 l/1); - --ig-secondary-200: oklch(from var(--ig-secondary-seed) 0.7653 min(c * 0.6343, 0.0814) calc(h + 3.307)); - --ig-secondary-200-contrast: hsla(from color(from var(--ig-secondary-200) var(--y-contrast)) h 0 l/1); - --ig-secondary-300: oklch(from var(--ig-secondary-seed) 0.6845 min(c * 0.8792, 0.1128) calc(h + 1.691)); - --ig-secondary-300-contrast: hsla(from color(from var(--ig-secondary-300) var(--y-contrast)) h 0 l/1); - --ig-secondary-400: oklch(from var(--ig-secondary-seed) 0.6101 min(c * 1.0415, 0.1336) calc(h + 0.203)); - --ig-secondary-400-contrast: hsla(from color(from var(--ig-secondary-400) var(--y-contrast)) h 0 l/1); - --ig-secondary-500: oklch(from var(--ig-secondary-seed) 0.5386 min(c * 1.0863, 0.1394) h); - --ig-secondary-500-contrast: hsla(from color(from var(--ig-secondary-500) var(--y-contrast)) h 0 l/1); - --ig-secondary-600: oklch(from var(--ig-secondary-seed) 0.4674 min(c * 1.0083, 0.1294) h); - --ig-secondary-600-contrast: hsla(from color(from var(--ig-secondary-600) var(--y-contrast)) h 0 l/1); - --ig-secondary-700: oklch(from var(--ig-secondary-seed) 0.3933 min(c * 0.835, 0.1071) h); - --ig-secondary-700-contrast: hsla(from color(from var(--ig-secondary-700) var(--y-contrast)) h 0 l/1); - --ig-secondary-800: oklch(from var(--ig-secondary-seed) 0.3118 min(c * 0.605, 0.0776) h); - --ig-secondary-800-contrast: hsla(from color(from var(--ig-secondary-800) var(--y-contrast)) h 0 l/1); - --ig-secondary-900: oklch(from var(--ig-secondary-seed) 0.205 min(c * 0.3327, 0.0427) h); - --ig-secondary-900-contrast: hsla(from color(from var(--ig-secondary-900) var(--y-contrast)) h 0 l/1); - --ig-secondary-seed: #97c; - --ig-secondary-seed-contrast: hsla(from color(from var(--ig-secondary-seed) var(--y-contrast)) h 0 l/1); - --ig-secondary-A100: oklch(from var(--ig-secondary-seed) 0.8923 min(c * 0.5334, 0.0684) calc(h + 6.928)); - --ig-secondary-A100-contrast: hsla(from color(from var(--ig-secondary-A100) var(--y-contrast)) h 0 l/1); - --ig-secondary-A200: oklch(from var(--ig-secondary-seed) 0.727 min(c * 1.3792, 0.177) calc(h + 3.291)); - --ig-secondary-A200-contrast: hsla(from color(from var(--ig-secondary-A200) var(--y-contrast)) h 0 l/1); - --ig-secondary-A400: oklch(from var(--ig-secondary-seed) 0.6148 min(c * 1.9646, 0.2521) calc(h + 0.357)); - --ig-secondary-A400-contrast: hsla(from color(from var(--ig-secondary-A400) var(--y-contrast)) h 0 l/1); - --ig-secondary-A700: oklch(from var(--ig-secondary-seed) 0.5283 min(c * 2.0936, 0.2686) h); - --ig-secondary-A700-contrast: hsla(from color(from var(--ig-secondary-A700) var(--y-contrast)) h 0 l/1); - --ig-gray-50: oklch(from var(--ig-gray-seed) 0.9404 0 0); - --ig-gray-50-contrast: hsla(from color(from var(--ig-gray-50) var(--y-contrast)) h 0 l/1); - --ig-gray-100: oklch(from var(--ig-gray-seed) 0.8448 0 0); - --ig-gray-100-contrast: hsla(from color(from var(--ig-gray-100) var(--y-contrast)) h 0 l/1); - --ig-gray-200: oklch(from var(--ig-gray-seed) 0.7562 0 0); - --ig-gray-200-contrast: hsla(from color(from var(--ig-gray-200) var(--y-contrast)) h 0 l/1); - --ig-gray-300: oklch(from var(--ig-gray-seed) 0.6749 0 0); - --ig-gray-300-contrast: hsla(from color(from var(--ig-gray-300) var(--y-contrast)) h 0 l/1); - --ig-gray-400: oklch(from var(--ig-gray-seed) 0.598 0 0); - --ig-gray-400-contrast: hsla(from color(from var(--ig-gray-400) var(--y-contrast)) h 0 l/1); - --ig-gray-500: oklch(from var(--ig-gray-seed) 0.5248 0 0); - --ig-gray-500-contrast: hsla(from color(from var(--ig-gray-500) var(--y-contrast)) h 0 l/1); - --ig-gray-600: oklch(from var(--ig-gray-seed) 0.4539 0 0); - --ig-gray-600-contrast: hsla(from color(from var(--ig-gray-600) var(--y-contrast)) h 0 l/1); - --ig-gray-700: oklch(from var(--ig-gray-seed) 0.3822 0 0); - --ig-gray-700-contrast: hsla(from color(from var(--ig-gray-700) var(--y-contrast)) h 0 l/1); - --ig-gray-800: oklch(from var(--ig-gray-seed) 0.304 0 0); - --ig-gray-800-contrast: hsla(from color(from var(--ig-gray-800) var(--y-contrast)) h 0 l/1); - --ig-gray-900: oklch(from var(--ig-gray-seed) 0.2009 0 0); - --ig-gray-900-contrast: hsla(from color(from var(--ig-gray-900) var(--y-contrast)) h 0 l/1); - --ig-gray-seed: #000; - --ig-gray-seed-contrast: hsla(from color(from var(--ig-gray-seed) var(--y-contrast)) h 0 l/1); - --ig-surface-50: hsl(from var(--ig-surface-500) h calc(s * 1.23) calc(l * 1.78)); - --ig-surface-50-contrast: hsla(from color(from var(--ig-surface-50) var(--y-contrast)) h 0 l/1); - --ig-surface-100: hsl(from var(--ig-surface-500) h calc(s * 0.8) calc(l * 1.66)); - --ig-surface-100-contrast: hsla(from color(from var(--ig-surface-100) var(--y-contrast)) h 0 l/1); - --ig-surface-200: hsl(from var(--ig-surface-500) h calc(s * 0.64) calc(l * 1.43)); - --ig-surface-200-contrast: hsla(from color(from var(--ig-surface-200) var(--y-contrast)) h 0 l/1); - --ig-surface-300: hsl(from var(--ig-surface-500) h calc(s * 0.73) calc(l * 1.19)); - --ig-surface-300-contrast: hsla(from color(from var(--ig-surface-300) var(--y-contrast)) h 0 l/1); - --ig-surface-400: hsl(from var(--ig-surface-500) h calc(s * 0.875) calc(l * 1.08)); - --ig-surface-400-contrast: hsla(from color(from var(--ig-surface-400) var(--y-contrast)) h 0 l/1); - --ig-surface-500: #fff; - --ig-surface-500-contrast: hsla(from color(from var(--ig-surface-500) var(--y-contrast)) h 0 l/1); - --ig-surface-600: hsl(from var(--ig-surface-500) h calc(s * 1.26) calc(l * 0.89)); - --ig-surface-600-contrast: hsla(from color(from var(--ig-surface-600) var(--y-contrast)) h 0 l/1); - --ig-surface-700: hsl(from var(--ig-surface-500) h calc(s * 1.26) calc(l * 0.81)); - --ig-surface-700-contrast: hsla(from color(from var(--ig-surface-700) var(--y-contrast)) h 0 l/1); - --ig-surface-800: hsl(from var(--ig-surface-500) h calc(s * 1.26) calc(l * 0.73)); - --ig-surface-800-contrast: hsla(from color(from var(--ig-surface-800) var(--y-contrast)) h 0 l/1); - --ig-surface-900: hsl(from var(--ig-surface-500) h calc(s * 1.26) calc(l * 0.64)); - --ig-surface-900-contrast: hsla(from color(from var(--ig-surface-900) var(--y-contrast)) h 0 l/1); - --ig-surface-seed: #fff; - --ig-surface-seed-contrast: hsla(from color(from var(--ig-surface-seed) var(--y-contrast)) h 0 l/1); - --ig-surface-A100: hsl(from var(--ig-surface-500) h calc(s * 1.23) calc(l * 1.34)); - --ig-surface-A100-contrast: hsla(from color(from var(--ig-surface-A100) var(--y-contrast)) h 0 l/1); - --ig-surface-A200: hsl(from var(--ig-surface-500) h calc(s * 1.22) calc(l * 1.16)); - --ig-surface-A200-contrast: hsla(from color(from var(--ig-surface-A200) var(--y-contrast)) h 0 l/1); - --ig-surface-A400: hsl(from var(--ig-surface-500) h calc(s * 1.23) calc(l * 0.91)); - --ig-surface-A400-contrast: hsla(from color(from var(--ig-surface-A400) var(--y-contrast)) h 0 l/1); - --ig-surface-A700: hsl(from var(--ig-surface-500) h calc(s * 1.23) calc(l * 0.65)); - --ig-surface-A700-contrast: hsla(from color(from var(--ig-surface-A700) var(--y-contrast)) h 0 l/1); - --ig-info-50: oklch(from var(--ig-info-seed) 0.9453 min(c * 0.0689, 0.0216) calc(h + 13.046)); - --ig-info-50-contrast: hsla(from color(from var(--ig-info-50) var(--y-contrast)) h 0 l/1); - --ig-info-100: oklch(from var(--ig-info-seed) 0.8466 min(c * 0.232, 0.0727) calc(h + 9.788)); - --ig-info-100-contrast: hsla(from color(from var(--ig-info-100) var(--y-contrast)) h 0 l/1); - --ig-info-200: oklch(from var(--ig-info-seed) 0.7599 min(c * 0.3904, 0.1223) calc(h + 6.738)); - --ig-info-200-contrast: hsla(from color(from var(--ig-info-200) var(--y-contrast)) h 0 l/1); - --ig-info-300: oklch(from var(--ig-info-seed) 0.6808 min(c * 0.5346, 0.1674) calc(h + 4.112)); - --ig-info-300-contrast: hsla(from color(from var(--ig-info-300) var(--y-contrast)) h 0 l/1); - --ig-info-400: oklch(from var(--ig-info-seed) 0.6081 min(c * 0.675, 0.2114) calc(h + 1.897)); - --ig-info-400-contrast: hsla(from color(from var(--ig-info-400) var(--y-contrast)) h 0 l/1); - --ig-info-500: oklch(from var(--ig-info-seed) 0.5394 min(c * 0.7548, 0.2364) h); - --ig-info-500-contrast: hsla(from color(from var(--ig-info-500) var(--y-contrast)) h 0 l/1); - --ig-info-600: oklch(from var(--ig-info-seed) 0.4709 min(c * 0.7545, 0.2363) h); - --ig-info-600-contrast: hsla(from color(from var(--ig-info-600) var(--y-contrast)) h 0 l/1); - --ig-info-700: oklch(from var(--ig-info-seed) 0.3981 min(c * 0.6608, 0.207) h); - --ig-info-700-contrast: hsla(from color(from var(--ig-info-700) var(--y-contrast)) h 0 l/1); - --ig-info-800: oklch(from var(--ig-info-seed) 0.3148 min(c * 0.4898, 0.1534) h); - --ig-info-800-contrast: hsla(from color(from var(--ig-info-800) var(--y-contrast)) h 0 l/1); - --ig-info-900: oklch(from var(--ig-info-seed) 0.2057 min(c * 0.2698, 0.0845) h); - --ig-info-900-contrast: hsla(from color(from var(--ig-info-900) var(--y-contrast)) h 0 l/1); - --ig-info-seed: blue; - --ig-info-seed-contrast: hsla(from color(from var(--ig-info-seed) var(--y-contrast)) h 0 l/1); - --ig-info-A100: oklch(from var(--ig-info-seed) 0.8909 min(c * 0.1693, 0.053) calc(h + 10.08)); - --ig-info-A100-contrast: hsla(from color(from var(--ig-info-A100) var(--y-contrast)) h 0 l/1); - --ig-info-A200: oklch(from var(--ig-info-seed) 0.7136 min(c * 0.4738, 0.1484) calc(h + 4.928)); - --ig-info-A200-contrast: hsla(from color(from var(--ig-info-A200) var(--y-contrast)) h 0 l/1); - --ig-info-A400: oklch(from var(--ig-info-seed) 0.5968 min(c * 0.6976, 0.2185) calc(h + 1.491)); - --ig-info-A400-contrast: hsla(from color(from var(--ig-info-A400) var(--y-contrast)) h 0 l/1); - --ig-info-A700: oklch(from var(--ig-info-seed) 0.512 min(c * 0.836, 0.2619) h); - --ig-info-A700-contrast: hsla(from color(from var(--ig-info-A700) var(--y-contrast)) h 0 l/1); - --ig-success-50: oklch(from var(--ig-success-seed) 0.9305 min(c * 0.5993, 0.106) h); - --ig-success-50-contrast: hsla(from color(from var(--ig-success-50) var(--y-contrast)) h 0 l/1); - --ig-success-100: oklch(from var(--ig-success-seed) 0.8227 min(c * 1.2544, 0.2219) h); - --ig-success-100-contrast: hsla(from color(from var(--ig-success-100) var(--y-contrast)) h 0 l/1); - --ig-success-200: oklch(from var(--ig-success-seed) 0.7358 min(c * 1.307, 0.2312) h); - --ig-success-200-contrast: hsla(from color(from var(--ig-success-200) var(--y-contrast)) h 0 l/1); - --ig-success-300: oklch(from var(--ig-success-seed) 0.6543 min(c * 1.2323, 0.2179) h); - --ig-success-300-contrast: hsla(from color(from var(--ig-success-300) var(--y-contrast)) h 0 l/1); - --ig-success-400: oklch(from var(--ig-success-seed) 0.5793 min(c * 1.1126, 0.1968) h); - --ig-success-400-contrast: hsla(from color(from var(--ig-success-400) var(--y-contrast)) h 0 l/1); - --ig-success-500: oklch(from var(--ig-success-seed) 0.5083 min(c * 0.9766, 0.1727) h); - --ig-success-500-contrast: hsla(from color(from var(--ig-success-500) var(--y-contrast)) h 0 l/1); - --ig-success-600: oklch(from var(--ig-success-seed) 0.4397 min(c * 0.8297, 0.1467) h); - --ig-success-600-contrast: hsla(from color(from var(--ig-success-600) var(--y-contrast)) h 0 l/1); - --ig-success-700: oklch(from var(--ig-success-seed) 0.371 min(c * 0.6646, 0.1175) h); - --ig-success-700-contrast: hsla(from color(from var(--ig-success-700) var(--y-contrast)) h 0 l/1); - --ig-success-800: oklch(from var(--ig-success-seed) 0.2958 min(c * 0.4781, 0.0846) h); - --ig-success-800-contrast: hsla(from color(from var(--ig-success-800) var(--y-contrast)) h 0 l/1); - --ig-success-900: oklch(from var(--ig-success-seed) 0.1964 min(c * 0.2645, 0.0468) h); - --ig-success-900-contrast: hsla(from color(from var(--ig-success-900) var(--y-contrast)) h 0 l/1); - --ig-success-seed: green; - --ig-success-seed-contrast: hsla(from color(from var(--ig-success-seed) var(--y-contrast)) h 0 l/1); - --ig-success-A100: oklch(from var(--ig-success-seed) 0.8632 min(c * 1.5429, 0.2729) h); - --ig-success-A100-contrast: hsla(from color(from var(--ig-success-A100) var(--y-contrast)) h 0 l/1); - --ig-success-A200: oklch(from var(--ig-success-seed) 0.686 min(c * 1.3198, 0.2334) h); - --ig-success-A200-contrast: hsla(from color(from var(--ig-success-A200) var(--y-contrast)) h 0 l/1); - --ig-success-A400: oklch(from var(--ig-success-seed) 0.5668 min(c * 1.0906, 0.1929) h); - --ig-success-A400-contrast: hsla(from color(from var(--ig-success-A400) var(--y-contrast)) h 0 l/1); - --ig-success-A700: oklch(from var(--ig-success-seed) 0.4769 min(c * 0.9176, 0.1623) h); - --ig-success-A700-contrast: hsla(from color(from var(--ig-success-A700) var(--y-contrast)) h 0 l/1); - --ig-warn-50: oklch(from var(--ig-warn-seed) 0.946 min(c * 0.1822, 0.0312) h); - --ig-warn-50-contrast: hsla(from color(from var(--ig-warn-50) var(--y-contrast)) h 0 l/1); - --ig-warn-100: oklch(from var(--ig-warn-seed) 0.8514 min(c * 0.5754, 0.0984) h); - --ig-warn-100-contrast: hsla(from color(from var(--ig-warn-100) var(--y-contrast)) h 0 l/1); - --ig-warn-200: oklch(from var(--ig-warn-seed) 0.7625 min(c * 0.8096, 0.1385) h); - --ig-warn-200-contrast: hsla(from color(from var(--ig-warn-200) var(--y-contrast)) h 0 l/1); - --ig-warn-300: oklch(from var(--ig-warn-seed) 0.6821 min(c * 0.8243, 0.141) h); - --ig-warn-300-contrast: hsla(from color(from var(--ig-warn-300) var(--y-contrast)) h 0 l/1); - --ig-warn-400: oklch(from var(--ig-warn-seed) 0.6047 min(c * 0.757, 0.1295) h); - --ig-warn-400-contrast: hsla(from color(from var(--ig-warn-400) var(--y-contrast)) h 0 l/1); - --ig-warn-500: oklch(from var(--ig-warn-seed) 0.5307 min(c * 0.6674, 0.1141) h); - --ig-warn-500-contrast: hsla(from color(from var(--ig-warn-500) var(--y-contrast)) h 0 l/1); - --ig-warn-600: oklch(from var(--ig-warn-seed) 0.4588 min(c * 0.5673, 0.097) h); - --ig-warn-600-contrast: hsla(from color(from var(--ig-warn-600) var(--y-contrast)) h 0 l/1); - --ig-warn-700: oklch(from var(--ig-warn-seed) 0.3861 min(c * 0.4534, 0.0775) h); - --ig-warn-700-contrast: hsla(from color(from var(--ig-warn-700) var(--y-contrast)) h 0 l/1); - --ig-warn-800: oklch(from var(--ig-warn-seed) 0.3067 min(c * 0.3249, 0.0556) h); - --ig-warn-800-contrast: hsla(from color(from var(--ig-warn-800) var(--y-contrast)) h 0 l/1); - --ig-warn-900: oklch(from var(--ig-warn-seed) 0.2023 min(c * 0.1786, 0.0306) h); - --ig-warn-900-contrast: hsla(from color(from var(--ig-warn-900) var(--y-contrast)) h 0 l/1); - --ig-warn-seed: orange; - --ig-warn-seed-contrast: hsla(from color(from var(--ig-warn-seed) var(--y-contrast)) h 0 l/1); - --ig-warn-A100: oklch(from var(--ig-warn-seed) 0.8929 min(c * 0.496, 0.0848) calc(h + 1.551)); - --ig-warn-A100-contrast: hsla(from color(from var(--ig-warn-A100) var(--y-contrast)) h 0 l/1); - --ig-warn-A200: oklch(from var(--ig-warn-seed) 0.7161 min(c * 0.8994, 0.1538) h); - --ig-warn-A200-contrast: hsla(from color(from var(--ig-warn-A200) var(--y-contrast)) h 0 l/1); - --ig-warn-A400: oklch(from var(--ig-warn-seed) 0.5917 min(c * 0.7464, 0.1277) h); - --ig-warn-A400-contrast: hsla(from color(from var(--ig-warn-A400) var(--y-contrast)) h 0 l/1); - --ig-warn-A700: oklch(from var(--ig-warn-seed) 0.4975 min(c * 0.6276, 0.1073) h); - --ig-warn-A700-contrast: hsla(from color(from var(--ig-warn-A700) var(--y-contrast)) h 0 l/1); - --ig-error-50: oklch(from var(--ig-error-seed) 0.9437 min(c * 0.106, 0.0273) h); - --ig-error-50-contrast: hsla(from color(from var(--ig-error-50) var(--y-contrast)) h 0 l/1); - --ig-error-100: oklch(from var(--ig-error-seed) 0.8531 min(c * 0.3108, 0.0801) calc(h + 0.399)); - --ig-error-100-contrast: hsla(from color(from var(--ig-error-100) var(--y-contrast)) h 0 l/1); - --ig-error-200: oklch(from var(--ig-error-seed) 0.7729 min(c * 0.5202, 0.134) calc(h + 0.309)); - --ig-error-200-contrast: hsla(from color(from var(--ig-error-200) var(--y-contrast)) h 0 l/1); - --ig-error-300: oklch(from var(--ig-error-seed) 0.6976 min(c * 0.7485, 0.1929) h); - --ig-error-300-contrast: hsla(from color(from var(--ig-error-300) var(--y-contrast)) h 0 l/1); - --ig-error-400: oklch(from var(--ig-error-seed) 0.6235 min(c * 0.8417, 0.2169) h); - --ig-error-400-contrast: hsla(from color(from var(--ig-error-400) var(--y-contrast)) h 0 l/1); - --ig-error-500: oklch(from var(--ig-error-seed) 0.5497 min(c * 0.823, 0.2121) h); - --ig-error-500-contrast: hsla(from color(from var(--ig-error-500) var(--y-contrast)) h 0 l/1); - --ig-error-600: oklch(from var(--ig-error-seed) 0.4764 min(c * 0.7291, 0.1879) h); - --ig-error-600-contrast: hsla(from color(from var(--ig-error-600) var(--y-contrast)) h 0 l/1); - --ig-error-700: oklch(from var(--ig-error-seed) 0.4004 min(c * 0.59, 0.152) h); - --ig-error-700-contrast: hsla(from color(from var(--ig-error-700) var(--y-contrast)) h 0 l/1); - --ig-error-800: oklch(from var(--ig-error-seed) 0.3169 min(c * 0.4232, 0.1091) h); - --ig-error-800-contrast: hsla(from color(from var(--ig-error-800) var(--y-contrast)) h 0 l/1); - --ig-error-900: oklch(from var(--ig-error-seed) 0.2078 min(c * 0.2316, 0.0597) h); - --ig-error-900-contrast: hsla(from color(from var(--ig-error-900) var(--y-contrast)) h 0 l/1); - --ig-error-seed: red; - --ig-error-seed-contrast: hsla(from color(from var(--ig-error-seed) var(--y-contrast)) h 0 l/1); - --ig-error-A100: oklch(from var(--ig-error-seed) 0.902 min(c * 0.1992, 0.0513) calc(h + 2.141)); - --ig-error-A100-contrast: hsla(from color(from var(--ig-error-A100) var(--y-contrast)) h 0 l/1); - --ig-error-A200: oklch(from var(--ig-error-seed) 0.7258 min(c * 0.6599, 0.17) calc(h + 0.27)); - --ig-error-A200-contrast: hsla(from color(from var(--ig-error-A200) var(--y-contrast)) h 0 l/1); - --ig-error-A400: oklch(from var(--ig-error-seed) 0.6128 min(c * 0.9204, 0.2372) h); - --ig-error-A400-contrast: hsla(from color(from var(--ig-error-A400) var(--y-contrast)) h 0 l/1); - --ig-error-A700: oklch(from var(--ig-error-seed) 0.518 min(c * 0.8222, 0.2119) h); - --ig-error-A700-contrast: hsla(from color(from var(--ig-error-A700) var(--y-contrast)) h 0 l/1); -} - -/* END_OUTPUT */ -/* CONTAINED */ -:root { - --ig-primary-50: oklch(from var(--ig-primary-seed) 0.9402 min(c * 0.1264, 0.0232) calc(h + 6.804)); - --ig-primary-100: oklch(from var(--ig-primary-seed) 0.844 min(c * 0.3941, 0.0724) calc(h + 4.879)); - --ig-primary-200: oklch(from var(--ig-primary-seed) 0.7551 min(c * 0.6602, 0.1213) calc(h + 3.103)); - --ig-primary-300: oklch(from var(--ig-primary-seed) 0.6742 min(c * 0.8212, 0.1508) calc(h + 1.484)); - --ig-primary-400: oklch(from var(--ig-primary-seed) 0.5973 min(c * 0.8367, 0.1537) h); - --ig-primary-500: oklch(from var(--ig-primary-seed) 0.5244 min(c * 0.7664, 0.1408) h); - --ig-primary-600: oklch(from var(--ig-primary-seed) 0.4535 min(c * 0.6602, 0.1213) h); - --ig-primary-700: oklch(from var(--ig-primary-seed) 0.3818 min(c * 0.5301, 0.0974) h); - --ig-primary-800: oklch(from var(--ig-primary-seed) 0.3034 min(c * 0.3808, 0.0699) h); - --ig-primary-900: oklch(from var(--ig-primary-seed) 0.2004 min(c * 0.2097, 0.0385) h); - --ig-primary-seed: #09f; - --ig-primary-A100: oklch(from var(--ig-primary-seed) 0.889 min(c * 0.3037, 0.0558) calc(h + 2.817)); - --ig-primary-A200: oklch(from var(--ig-primary-seed) 0.7075 min(c * 0.8606, 0.1581) calc(h + 2.149)); - --ig-primary-A400: oklch(from var(--ig-primary-seed) 0.5847 min(c * 0.8681, 0.1595) h); - --ig-primary-A700: oklch(from var(--ig-primary-seed) 0.4923 min(c * 0.7355, 0.1351) h); - --ig-secondary-50: oklch(from var(--ig-secondary-seed) 0.9463 min(c * 0.1097, 0.0141) calc(h + 6.926)); - --ig-secondary-100: oklch(from var(--ig-secondary-seed) 0.8515 min(c * 0.3639, 0.0467) calc(h + 5.03)); - --ig-secondary-200: oklch(from var(--ig-secondary-seed) 0.7653 min(c * 0.6343, 0.0814) calc(h + 3.307)); - --ig-secondary-300: oklch(from var(--ig-secondary-seed) 0.6845 min(c * 0.8792, 0.1128) calc(h + 1.691)); - --ig-secondary-400: oklch(from var(--ig-secondary-seed) 0.6101 min(c * 1.0415, 0.1336) calc(h + 0.203)); - --ig-secondary-500: oklch(from var(--ig-secondary-seed) 0.5386 min(c * 1.0863, 0.1394) h); - --ig-secondary-600: oklch(from var(--ig-secondary-seed) 0.4674 min(c * 1.0083, 0.1294) h); - --ig-secondary-700: oklch(from var(--ig-secondary-seed) 0.3933 min(c * 0.835, 0.1071) h); - --ig-secondary-800: oklch(from var(--ig-secondary-seed) 0.3118 min(c * 0.605, 0.0776) h); - --ig-secondary-900: oklch(from var(--ig-secondary-seed) 0.205 min(c * 0.3327, 0.0427) h); - --ig-secondary-seed: #97c; - --ig-secondary-A100: oklch(from var(--ig-secondary-seed) 0.8923 min(c * 0.5334, 0.0684) calc(h + 6.928)); - --ig-secondary-A200: oklch(from var(--ig-secondary-seed) 0.727 min(c * 1.3792, 0.177) calc(h + 3.291)); - --ig-secondary-A400: oklch(from var(--ig-secondary-seed) 0.6148 min(c * 1.9646, 0.2521) calc(h + 0.357)); - --ig-secondary-A700: oklch(from var(--ig-secondary-seed) 0.5283 min(c * 2.0936, 0.2686) h); - --ig-gray-50: oklch(from var(--ig-gray-seed) 0.9404 0 0); - --ig-gray-100: oklch(from var(--ig-gray-seed) 0.8448 0 0); - --ig-gray-200: oklch(from var(--ig-gray-seed) 0.7562 0 0); - --ig-gray-300: oklch(from var(--ig-gray-seed) 0.6749 0 0); - --ig-gray-400: oklch(from var(--ig-gray-seed) 0.598 0 0); - --ig-gray-500: oklch(from var(--ig-gray-seed) 0.5248 0 0); - --ig-gray-600: oklch(from var(--ig-gray-seed) 0.4539 0 0); - --ig-gray-700: oklch(from var(--ig-gray-seed) 0.3822 0 0); - --ig-gray-800: oklch(from var(--ig-gray-seed) 0.304 0 0); - --ig-gray-900: oklch(from var(--ig-gray-seed) 0.2009 0 0); - --ig-gray-seed: #000; - --ig-surface-50: hsl(from var(--ig-surface-500) h calc(s * 1.23) calc(l * 1.78)); - --ig-surface-100: hsl(from var(--ig-surface-500) h calc(s * 0.8) calc(l * 1.66)); - --ig-surface-200: hsl(from var(--ig-surface-500) h calc(s * 0.64) calc(l * 1.43)); - --ig-surface-300: hsl(from var(--ig-surface-500) h calc(s * 0.73) calc(l * 1.19)); - --ig-surface-400: hsl(from var(--ig-surface-500) h calc(s * 0.875) calc(l * 1.08)); - --ig-surface-500: #fff; - --ig-surface-600: hsl(from var(--ig-surface-500) h calc(s * 1.26) calc(l * 0.89)); - --ig-surface-700: hsl(from var(--ig-surface-500) h calc(s * 1.26) calc(l * 0.81)); - --ig-surface-800: hsl(from var(--ig-surface-500) h calc(s * 1.26) calc(l * 0.73)); - --ig-surface-900: hsl(from var(--ig-surface-500) h calc(s * 1.26) calc(l * 0.64)); - --ig-surface-seed: #fff; - --ig-surface-A100: hsl(from var(--ig-surface-500) h calc(s * 1.23) calc(l * 1.34)); - --ig-surface-A200: hsl(from var(--ig-surface-500) h calc(s * 1.22) calc(l * 1.16)); - --ig-surface-A400: hsl(from var(--ig-surface-500) h calc(s * 1.23) calc(l * 0.91)); - --ig-surface-A700: hsl(from var(--ig-surface-500) h calc(s * 1.23) calc(l * 0.65)); - --ig-info-50: oklch(from var(--ig-info-seed) 0.9453 min(c * 0.0689, 0.0216) calc(h + 13.046)); - --ig-info-100: oklch(from var(--ig-info-seed) 0.8466 min(c * 0.232, 0.0727) calc(h + 9.788)); - --ig-info-200: oklch(from var(--ig-info-seed) 0.7599 min(c * 0.3904, 0.1223) calc(h + 6.738)); - --ig-info-300: oklch(from var(--ig-info-seed) 0.6808 min(c * 0.5346, 0.1674) calc(h + 4.112)); - --ig-info-400: oklch(from var(--ig-info-seed) 0.6081 min(c * 0.675, 0.2114) calc(h + 1.897)); - --ig-info-500: oklch(from var(--ig-info-seed) 0.5394 min(c * 0.7548, 0.2364) h); - --ig-info-600: oklch(from var(--ig-info-seed) 0.4709 min(c * 0.7545, 0.2363) h); - --ig-info-700: oklch(from var(--ig-info-seed) 0.3981 min(c * 0.6608, 0.207) h); - --ig-info-800: oklch(from var(--ig-info-seed) 0.3148 min(c * 0.4898, 0.1534) h); - --ig-info-900: oklch(from var(--ig-info-seed) 0.2057 min(c * 0.2698, 0.0845) h); - --ig-info-seed: blue; - --ig-info-A100: oklch(from var(--ig-info-seed) 0.8909 min(c * 0.1693, 0.053) calc(h + 10.08)); - --ig-info-A200: oklch(from var(--ig-info-seed) 0.7136 min(c * 0.4738, 0.1484) calc(h + 4.928)); - --ig-info-A400: oklch(from var(--ig-info-seed) 0.5968 min(c * 0.6976, 0.2185) calc(h + 1.491)); - --ig-info-A700: oklch(from var(--ig-info-seed) 0.512 min(c * 0.836, 0.2619) h); - --ig-success-50: oklch(from var(--ig-success-seed) 0.9305 min(c * 0.5993, 0.106) h); - --ig-success-100: oklch(from var(--ig-success-seed) 0.8227 min(c * 1.2544, 0.2219) h); - --ig-success-200: oklch(from var(--ig-success-seed) 0.7358 min(c * 1.307, 0.2312) h); - --ig-success-300: oklch(from var(--ig-success-seed) 0.6543 min(c * 1.2323, 0.2179) h); - --ig-success-400: oklch(from var(--ig-success-seed) 0.5793 min(c * 1.1126, 0.1968) h); - --ig-success-500: oklch(from var(--ig-success-seed) 0.5083 min(c * 0.9766, 0.1727) h); - --ig-success-600: oklch(from var(--ig-success-seed) 0.4397 min(c * 0.8297, 0.1467) h); - --ig-success-700: oklch(from var(--ig-success-seed) 0.371 min(c * 0.6646, 0.1175) h); - --ig-success-800: oklch(from var(--ig-success-seed) 0.2958 min(c * 0.4781, 0.0846) h); - --ig-success-900: oklch(from var(--ig-success-seed) 0.1964 min(c * 0.2645, 0.0468) h); - --ig-success-seed: green; - --ig-success-A100: oklch(from var(--ig-success-seed) 0.8632 min(c * 1.5429, 0.2729) h); - --ig-success-A200: oklch(from var(--ig-success-seed) 0.686 min(c * 1.3198, 0.2334) h); - --ig-success-A400: oklch(from var(--ig-success-seed) 0.5668 min(c * 1.0906, 0.1929) h); - --ig-success-A700: oklch(from var(--ig-success-seed) 0.4769 min(c * 0.9176, 0.1623) h); - --ig-warn-50: oklch(from var(--ig-warn-seed) 0.946 min(c * 0.1822, 0.0312) h); - --ig-warn-100: oklch(from var(--ig-warn-seed) 0.8514 min(c * 0.5754, 0.0984) h); - --ig-warn-200: oklch(from var(--ig-warn-seed) 0.7625 min(c * 0.8096, 0.1385) h); - --ig-warn-300: oklch(from var(--ig-warn-seed) 0.6821 min(c * 0.8243, 0.141) h); - --ig-warn-400: oklch(from var(--ig-warn-seed) 0.6047 min(c * 0.757, 0.1295) h); - --ig-warn-500: oklch(from var(--ig-warn-seed) 0.5307 min(c * 0.6674, 0.1141) h); - --ig-warn-600: oklch(from var(--ig-warn-seed) 0.4588 min(c * 0.5673, 0.097) h); - --ig-warn-700: oklch(from var(--ig-warn-seed) 0.3861 min(c * 0.4534, 0.0775) h); - --ig-warn-800: oklch(from var(--ig-warn-seed) 0.3067 min(c * 0.3249, 0.0556) h); - --ig-warn-900: oklch(from var(--ig-warn-seed) 0.2023 min(c * 0.1786, 0.0306) h); - --ig-warn-seed: orange; - --ig-warn-A100: oklch(from var(--ig-warn-seed) 0.8929 min(c * 0.496, 0.0848) calc(h + 1.551)); - --ig-warn-A200: oklch(from var(--ig-warn-seed) 0.7161 min(c * 0.8994, 0.1538) h); - --ig-warn-A400: oklch(from var(--ig-warn-seed) 0.5917 min(c * 0.7464, 0.1277) h); - --ig-warn-A700: oklch(from var(--ig-warn-seed) 0.4975 min(c * 0.6276, 0.1073) h); - --ig-error-50: oklch(from var(--ig-error-seed) 0.9437 min(c * 0.106, 0.0273) h); - --ig-error-100: oklch(from var(--ig-error-seed) 0.8531 min(c * 0.3108, 0.0801) calc(h + 0.399)); - --ig-error-200: oklch(from var(--ig-error-seed) 0.7729 min(c * 0.5202, 0.134) calc(h + 0.309)); - --ig-error-300: oklch(from var(--ig-error-seed) 0.6976 min(c * 0.7485, 0.1929) h); - --ig-error-400: oklch(from var(--ig-error-seed) 0.6235 min(c * 0.8417, 0.2169) h); - --ig-error-500: oklch(from var(--ig-error-seed) 0.5497 min(c * 0.823, 0.2121) h); - --ig-error-600: oklch(from var(--ig-error-seed) 0.4764 min(c * 0.7291, 0.1879) h); - --ig-error-700: oklch(from var(--ig-error-seed) 0.4004 min(c * 0.59, 0.152) h); - --ig-error-800: oklch(from var(--ig-error-seed) 0.3169 min(c * 0.4232, 0.1091) h); - --ig-error-900: oklch(from var(--ig-error-seed) 0.2078 min(c * 0.2316, 0.0597) h); - --ig-error-seed: red; - --ig-error-A100: oklch(from var(--ig-error-seed) 0.902 min(c * 0.1992, 0.0513) calc(h + 2.141)); - --ig-error-A200: oklch(from var(--ig-error-seed) 0.7258 min(c * 0.6599, 0.17) calc(h + 0.27)); - --ig-error-A400: oklch(from var(--ig-error-seed) 0.6128 min(c * 0.9204, 0.2372) h); - --ig-error-A700: oklch(from var(--ig-error-seed) 0.518 min(c * 0.8222, 0.2119) h); -} - -/* END_CONTAINED */ -/* END_ASSERT */ -/* */ -/* Test: verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] map */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] map */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] map */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] map */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] map */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] map */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] map */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] map */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* */ -/* Test: should generate CSS variables for handmande palettes */ -/* ASSERT: */ -/* OUTPUT */ -:root { - --ig-wcag-a: 0.31; - --ig-wcag-aa: 0.185; - --ig-wcag-aaa: 0.178; - --ig-contrast-level: var(--ig-wcag-aa); - --y: clamp(0, (y / var(--ig-contrast-level) - 1) * -infinity, 1); - --y-contrast: xyz-d65 var(--y) var(--y) var(--y); -} - -:root { - --ig-primary-50: #e6eff8; - --ig-primary-50-contrast: black; - --ig-primary-100: #bfd7f2; - --ig-primary-100-contrast: black; - --ig-primary-200: #98bfec; - --ig-primary-200-contrast: black; - --ig-primary-300: #85b5e9; - --ig-primary-300-contrast: white; - --ig-primary-400: #73a6e4; - --ig-primary-400-contrast: white; - --ig-primary-500: #6797de; - --ig-primary-500-contrast: white; - --ig-primary-600: #3681dd; - --ig-primary-600-contrast: white; - --ig-primary-700: #357fda; - --ig-primary-700-contrast: white; - --ig-primary-800: #306dc8; - --ig-primary-800-contrast: white; - --ig-primary-900: #284ea8; - --ig-primary-900-contrast: white; - --ig-primary-A100: #98bfec; - --ig-primary-A100-contrast: white; - --ig-primary-A200: #73a6e4; - --ig-primary-A200-contrast: white; - --ig-primary-A400: #3681dd; - --ig-primary-A400-contrast: white; - --ig-primary-A700: #284ea8; - --ig-primary-A700-contrast: white; - --ig-primary-seed: #6797de; - --ig-primary-seed-contrast: white; - --ig-secondary-50: #fef7e2; - --ig-secondary-50-contrast: black; - --ig-secondary-100: #fdeab7; - --ig-secondary-100-contrast: black; - --ig-secondary-200: #fbdd89; - --ig-secondary-200-contrast: black; - --ig-secondary-300: #fad15c; - --ig-secondary-300-contrast: black; - --ig-secondary-400: #f9c63f; - --ig-secondary-400-contrast: black; - --ig-secondary-500: #f7bd32; - --ig-secondary-500-contrast: white; - --ig-secondary-600: #f6b02d; - --ig-secondary-600-contrast: white; - --ig-secondary-700: #f49e2a; - --ig-secondary-700-contrast: white; - --ig-secondary-800: #f38e28; - --ig-secondary-800-contrast: white; - --ig-secondary-900: #f38e28; - --ig-secondary-900-contrast: white; - --ig-secondary-A100: #fbdd89; - --ig-secondary-A100-contrast: black; - --ig-secondary-A200: #f9c63f; - --ig-secondary-A200-contrast: black; - --ig-secondary-A400: #f6b02d; - --ig-secondary-A400-contrast: white; - --ig-secondary-A700: #f38e28; - --ig-secondary-A700-contrast: white; - --ig-secondary-seed: #f7bd32; - --ig-secondary-seed-contrast: white; - --ig-tertiary-500: #f7bd32; - --ig-tertiary-500-contrast: white; - --ig-gray-50: #fff; - --ig-gray-50-contrast: black; - --ig-gray-100: #fafafa; - --ig-gray-100-contrast: black; - --ig-gray-200: #f5f5f5; - --ig-gray-200-contrast: black; - --ig-gray-300: #f0f0f0; - --ig-gray-300-contrast: black; - --ig-gray-400: #dedede; - --ig-gray-400-contrast: black; - --ig-gray-500: #b3b2b2; - --ig-gray-500-contrast: black; - --ig-gray-600: #979696; - --ig-gray-600-contrast: white; - --ig-gray-700: #7b7a7a; - --ig-gray-700-contrast: white; - --ig-gray-800: #404040; - --ig-gray-800-contrast: white; - --ig-gray-900: #1a1a1a; - --ig-gray-900-contrast: white; - --ig-gray-seed: #b3b2b2; - --ig-gray-seed-contrast: black; - --ig-info-50: #fef7e2; - --ig-info-50-contrast: black; - --ig-info-100: #fdeab7; - --ig-info-100-contrast: black; - --ig-info-200: #fbdd89; - --ig-info-200-contrast: black; - --ig-info-300: #fad15c; - --ig-info-300-contrast: black; - --ig-info-400: #f9c63f; - --ig-info-400-contrast: black; - --ig-info-500: #f7bd32; - --ig-info-500-contrast: white; - --ig-info-600: #f6b02d; - --ig-info-600-contrast: white; - --ig-info-700: #f49e2a; - --ig-info-700-contrast: white; - --ig-info-800: #f38e28; - --ig-info-800-contrast: white; - --ig-info-900: #f38e28; - --ig-info-900-contrast: white; - --ig-info-A100: #fbdd89; - --ig-info-A100-contrast: black; - --ig-info-A200: #f9c63f; - --ig-info-A200-contrast: black; - --ig-info-A400: #f6b02d; - --ig-info-A400-contrast: white; - --ig-info-A700: #f38e28; - --ig-info-A700-contrast: white; - --ig-info-seed: #f7bd32; - --ig-info-seed-contrast: white; - --ig-success-50: #fef7e2; - --ig-success-50-contrast: black; - --ig-success-100: #fdeab7; - --ig-success-100-contrast: black; - --ig-success-200: #fbdd89; - --ig-success-200-contrast: black; - --ig-success-300: #fad15c; - --ig-success-300-contrast: black; - --ig-success-400: #f9c63f; - --ig-success-400-contrast: black; - --ig-success-500: #f7bd32; - --ig-success-500-contrast: white; - --ig-success-600: #f6b02d; - --ig-success-600-contrast: white; - --ig-success-700: #f49e2a; - --ig-success-700-contrast: white; - --ig-success-800: #f38e28; - --ig-success-800-contrast: white; - --ig-success-900: #f38e28; - --ig-success-900-contrast: white; - --ig-success-A100: #fbdd89; - --ig-success-A100-contrast: black; - --ig-success-A200: #f9c63f; - --ig-success-A200-contrast: black; - --ig-success-A400: #f6b02d; - --ig-success-A400-contrast: white; - --ig-success-A700: #f38e28; - --ig-success-A700-contrast: white; - --ig-success-seed: #f7bd32; - --ig-success-seed-contrast: white; - --ig-warn-50: #fef7e2; - --ig-warn-50-contrast: black; - --ig-warn-100: #fdeab7; - --ig-warn-100-contrast: black; - --ig-warn-200: #fbdd89; - --ig-warn-200-contrast: black; - --ig-warn-300: #fad15c; - --ig-warn-300-contrast: black; - --ig-warn-400: #f9c63f; - --ig-warn-400-contrast: black; - --ig-warn-500: #f7bd32; - --ig-warn-500-contrast: white; - --ig-warn-600: #f6b02d; - --ig-warn-600-contrast: white; - --ig-warn-700: #f49e2a; - --ig-warn-700-contrast: white; - --ig-warn-800: #f38e28; - --ig-warn-800-contrast: white; - --ig-warn-900: #f38e28; - --ig-warn-900-contrast: white; - --ig-warn-A100: #fbdd89; - --ig-warn-A100-contrast: black; - --ig-warn-A200: #f9c63f; - --ig-warn-A200-contrast: black; - --ig-warn-A400: #f6b02d; - --ig-warn-A400-contrast: white; - --ig-warn-A700: #f38e28; - --ig-warn-A700-contrast: white; - --ig-warn-seed: #f7bd32; - --ig-warn-seed-contrast: white; - --ig-error-50: #fef7e2; - --ig-error-50-contrast: black; - --ig-error-100: #fdeab7; - --ig-error-100-contrast: black; - --ig-error-200: #fbdd89; - --ig-error-200-contrast: black; - --ig-error-300: #fad15c; - --ig-error-300-contrast: black; - --ig-error-400: #f9c63f; - --ig-error-400-contrast: black; - --ig-error-500: #f7bd32; - --ig-error-500-contrast: white; - --ig-error-600: #f6b02d; - --ig-error-600-contrast: white; - --ig-error-700: #f49e2a; - --ig-error-700-contrast: white; - --ig-error-800: #f38e28; - --ig-error-800-contrast: white; - --ig-error-900: #f38e28; - --ig-error-900-contrast: white; - --ig-error-A100: #fbdd89; - --ig-error-A100-contrast: black; - --ig-error-A200: #f9c63f; - --ig-error-A200-contrast: black; - --ig-error-A400: #f6b02d; - --ig-error-A400-contrast: white; - --ig-error-A700: #f38e28; - --ig-error-A700-contrast: white; - --ig-error-seed: #f7bd32; - --ig-error-seed-contrast: white; - --ig-surface-50: #fef7e2; - --ig-surface-50-contrast: black; - --ig-surface-100: #fdeab7; - --ig-surface-100-contrast: black; - --ig-surface-200: #fbdd89; - --ig-surface-200-contrast: black; - --ig-surface-300: #fad15c; - --ig-surface-300-contrast: black; - --ig-surface-400: #f9c63f; - --ig-surface-400-contrast: black; - --ig-surface-500: #f7bd32; - --ig-surface-500-contrast: white; - --ig-surface-600: #f6b02d; - --ig-surface-600-contrast: white; - --ig-surface-700: #f49e2a; - --ig-surface-700-contrast: white; - --ig-surface-800: #f38e28; - --ig-surface-800-contrast: white; - --ig-surface-900: #f38e28; - --ig-surface-900-contrast: white; - --ig-surface-A100: #fbdd89; - --ig-surface-A100-contrast: black; - --ig-surface-A200: #f9c63f; - --ig-surface-A200-contrast: black; - --ig-surface-A400: #f6b02d; - --ig-surface-A400-contrast: white; - --ig-surface-A700: #f38e28; - --ig-surface-A700-contrast: white; - --ig-surface-seed: #f7bd32; - --ig-surface-seed-contrast: white; -} - -/* END_OUTPUT */ -/* CONTAINED */ -:root { - --ig-primary-50: #e6eff8; - --ig-primary-100: #bfd7f2; - --ig-primary-200: #98bfec; - --ig-primary-300: #85b5e9; - --ig-primary-400: #73a6e4; - --ig-primary-500: #6797de; - --ig-primary-600: #3681dd; - --ig-primary-700: #357fda; - --ig-primary-800: #306dc8; - --ig-primary-900: #284ea8; - --ig-primary-seed: #6797de; - --ig-primary-A100: #98bfec; - --ig-primary-A200: #73a6e4; - --ig-primary-A400: #3681dd; - --ig-primary-A700: #284ea8; - --ig-secondary-50: #fef7e2; - --ig-secondary-100: #fdeab7; - --ig-secondary-200: #fbdd89; - --ig-secondary-300: #fad15c; - --ig-secondary-400: #f9c63f; - --ig-secondary-500: #f7bd32; - --ig-secondary-600: #f6b02d; - --ig-secondary-700: #f49e2a; - --ig-secondary-800: #f38e28; - --ig-secondary-900: #f38e28; - --ig-secondary-seed: #f7bd32; - --ig-secondary-A100: #fbdd89; - --ig-secondary-A200: #f9c63f; - --ig-secondary-A400: #f6b02d; - --ig-secondary-A700: #f38e28; - --ig-gray-50: #fff; - --ig-gray-100: #fafafa; - --ig-gray-200: #f5f5f5; - --ig-gray-300: #f0f0f0; - --ig-gray-400: #dedede; - --ig-gray-500: #b3b2b2; - --ig-gray-600: #979696; - --ig-gray-700: #7b7a7a; - --ig-gray-800: #404040; - --ig-gray-900: #1a1a1a; - --ig-gray-seed: #b3b2b2; - --ig-surface-50: #fef7e2; - --ig-surface-100: #fdeab7; - --ig-surface-200: #fbdd89; - --ig-surface-300: #fad15c; - --ig-surface-400: #f9c63f; - --ig-surface-500: #f7bd32; - --ig-surface-600: #f6b02d; - --ig-surface-700: #f49e2a; - --ig-surface-800: #f38e28; - --ig-surface-900: #f38e28; - --ig-surface-seed: #f7bd32; - --ig-surface-A100: #fbdd89; - --ig-surface-A200: #f9c63f; - --ig-surface-A400: #f6b02d; - --ig-surface-A700: #f38e28; - --ig-info-50: #fef7e2; - --ig-info-100: #fdeab7; - --ig-info-200: #fbdd89; - --ig-info-300: #fad15c; - --ig-info-400: #f9c63f; - --ig-info-500: #f7bd32; - --ig-info-600: #f6b02d; - --ig-info-700: #f49e2a; - --ig-info-800: #f38e28; - --ig-info-900: #f38e28; - --ig-info-seed: #f7bd32; - --ig-info-A100: #fbdd89; - --ig-info-A200: #f9c63f; - --ig-info-A400: #f6b02d; - --ig-info-A700: #f38e28; - --ig-success-50: #fef7e2; - --ig-success-100: #fdeab7; - --ig-success-200: #fbdd89; - --ig-success-300: #fad15c; - --ig-success-400: #f9c63f; - --ig-success-500: #f7bd32; - --ig-success-600: #f6b02d; - --ig-success-700: #f49e2a; - --ig-success-800: #f38e28; - --ig-success-900: #f38e28; - --ig-success-seed: #f7bd32; - --ig-success-A100: #fbdd89; - --ig-success-A200: #f9c63f; - --ig-success-A400: #f6b02d; - --ig-success-A700: #f38e28; - --ig-warn-50: #fef7e2; - --ig-warn-100: #fdeab7; - --ig-warn-200: #fbdd89; - --ig-warn-300: #fad15c; - --ig-warn-400: #f9c63f; - --ig-warn-500: #f7bd32; - --ig-warn-600: #f6b02d; - --ig-warn-700: #f49e2a; - --ig-warn-800: #f38e28; - --ig-warn-900: #f38e28; - --ig-warn-seed: #f7bd32; - --ig-warn-A100: #fbdd89; - --ig-warn-A200: #f9c63f; - --ig-warn-A400: #f6b02d; - --ig-warn-A700: #f38e28; - --ig-error-50: #fef7e2; - --ig-error-100: #fdeab7; - --ig-error-200: #fbdd89; - --ig-error-300: #fad15c; - --ig-error-400: #f9c63f; - --ig-error-500: #f7bd32; - --ig-error-600: #f6b02d; - --ig-error-700: #f49e2a; - --ig-error-800: #f38e28; - --ig-error-900: #f38e28; - --ig-error-seed: #f7bd32; - --ig-error-A100: #fbdd89; - --ig-error-A200: #f9c63f; - --ig-error-A400: #f6b02d; - --ig-error-A700: #f38e28; -} - -/* END_CONTAINED */ -/* END_ASSERT */ -/* */ -/* Test: should properly get the value from handmade palettes */ -/* ✔ [assert-equal] should properly get the value from handmade palettes */ -/* ASSERT: */ -/* OUTPUT */ -.test-output { - color: rgb(250, 250, 250); -} - -/* END_OUTPUT */ -/* CONTAINED */ -.test-output { - color: rgb(250, 250, 250); -} - -/* END_CONTAINED */ -/* END_ASSERT */ -/* */ -/* # Module: Color :: palette :: gamut-relative generator */ -/* ------------------------------------------------------ */ -/* Test: keeps any two shades 500 apart at WCAG AA or better */ -/* ✔ [assert-true] keeps any two shades 500 apart at WCAG AA or better */ -/* ✔ [assert-true] keeps any two shades 500 apart at WCAG AA or better */ -/* ✔ [assert-true] keeps any two shades 500 apart at WCAG AA or better */ -/* ✔ [assert-true] keeps any two shades 500 apart at WCAG AA or better */ -/* ✔ [assert-true] keeps any two shades 500 apart at WCAG AA or better */ -/* ✔ [assert-true] keeps any two shades 500 apart at WCAG AA or better */ -/* ✔ [assert-true] keeps any two shades 500 apart at WCAG AA or better */ -/* ✔ [assert-true] keeps any two shades 500 apart at WCAG AA or better */ -/* ✔ [assert-true] keeps any two shades 500 apart at WCAG AA or better */ -/* ✔ [assert-true] keeps any two shades 500 apart at WCAG AA or better */ -/* ✔ [assert-true] keeps any two shades 500 apart at WCAG AA or better */ -/* ✔ [assert-true] keeps any two shades 500 apart at WCAG AA or better */ -/* ✔ [assert-true] keeps any two shades 500 apart at WCAG AA or better */ -/* ✔ [assert-true] keeps any two shades 500 apart at WCAG AA or better */ -/* ✔ [assert-true] keeps any two shades 500 apart at WCAG AA or better */ -/* ✔ [assert-true] keeps any two shades 500 apart at WCAG AA or better */ -/* ✔ [assert-true] keeps any two shades 500 apart at WCAG AA or better */ -/* ✔ [assert-true] keeps any two shades 500 apart at WCAG AA or better */ -/* ✔ [assert-true] keeps any two shades 500 apart at WCAG AA or better */ -/* ✔ [assert-true] keeps any two shades 500 apart at WCAG AA or better */ -/* ✔ [assert-true] keeps any two shades 500 apart at WCAG AA or better */ -/* ✔ [assert-true] keeps any two shades 500 apart at WCAG AA or better */ -/* ✔ [assert-true] keeps any two shades 500 apart at WCAG AA or better */ -/* ✔ [assert-true] keeps any two shades 500 apart at WCAG AA or better */ -/* ✔ [assert-true] keeps any two shades 500 apart at WCAG AA or better */ -/* ✔ [assert-true] keeps any two shades 500 apart at WCAG AA or better */ -/* ✔ [assert-true] keeps any two shades 500 apart at WCAG AA or better */ -/* ✔ [assert-true] keeps any two shades 500 apart at WCAG AA or better */ -/* ✔ [assert-true] keeps any two shades 500 apart at WCAG AA or better */ -/* ✔ [assert-true] keeps any two shades 500 apart at WCAG AA or better */ -/* ✔ [assert-true] keeps any two shades 500 apart at WCAG AA or better */ -/* ✔ [assert-true] keeps any two shades 500 apart at WCAG AA or better */ -/* ✔ [assert-true] keeps any two shades 500 apart at WCAG AA or better */ -/* ✔ [assert-true] keeps any two shades 500 apart at WCAG AA or better */ -/* ✔ [assert-true] keeps any two shades 500 apart at WCAG AA or better */ -/* ✔ [assert-true] keeps any two shades 500 apart at WCAG AA or better */ -/* ✔ [assert-true] keeps any two shades 500 apart at WCAG AA or better */ -/* ✔ [assert-true] keeps any two shades 500 apart at WCAG AA or better */ -/* ✔ [assert-true] keeps any two shades 500 apart at WCAG AA or better */ -/* ✔ [assert-true] keeps any two shades 500 apart at WCAG AA or better */ -/* */ -/* Test: keeps every shade visibly distinct, whatever the seed */ -/* ✔ [assert-true] keeps every shade visibly distinct, whatever the seed */ -/* ✔ [assert-true] keeps every shade visibly distinct, whatever the seed */ -/* ✔ [assert-true] keeps every shade visibly distinct, whatever the seed */ -/* ✔ [assert-true] keeps every shade visibly distinct, whatever the seed */ -/* ✔ [assert-true] keeps every shade visibly distinct, whatever the seed */ -/* ✔ [assert-true] keeps every shade visibly distinct, whatever the seed */ -/* ✔ [assert-true] keeps every shade visibly distinct, whatever the seed */ -/* ✔ [assert-true] keeps every shade visibly distinct, whatever the seed */ -/* ✔ [assert-true] keeps every shade visibly distinct, whatever the seed */ -/* ✔ [assert-true] keeps every shade visibly distinct, whatever the seed */ -/* ✔ [assert-true] keeps every shade visibly distinct, whatever the seed */ -/* ✔ [assert-true] keeps every shade visibly distinct, whatever the seed */ -/* ✔ [assert-true] keeps every shade visibly distinct, whatever the seed */ -/* ✔ [assert-true] keeps every shade visibly distinct, whatever the seed */ -/* ✔ [assert-true] keeps every shade visibly distinct, whatever the seed */ -/* ✔ [assert-true] keeps every shade visibly distinct, whatever the seed */ -/* ✔ [assert-true] keeps every shade visibly distinct, whatever the seed */ -/* ✔ [assert-true] keeps every shade visibly distinct, whatever the seed */ -/* ✔ [assert-true] keeps every shade visibly distinct, whatever the seed */ -/* ✔ [assert-true] keeps every shade visibly distinct, whatever the seed */ -/* ✔ [assert-true] keeps every shade visibly distinct, whatever the seed */ -/* ✔ [assert-true] keeps every shade visibly distinct, whatever the seed */ -/* ✔ [assert-true] keeps every shade visibly distinct, whatever the seed */ -/* ✔ [assert-true] keeps every shade visibly distinct, whatever the seed */ -/* ✔ [assert-true] keeps every shade visibly distinct, whatever the seed */ -/* ✔ [assert-true] keeps every shade visibly distinct, whatever the seed */ -/* ✔ [assert-true] keeps every shade visibly distinct, whatever the seed */ -/* ✔ [assert-true] keeps every shade visibly distinct, whatever the seed */ -/* ✔ [assert-true] keeps every shade visibly distinct, whatever the seed */ -/* ✔ [assert-true] keeps every shade visibly distinct, whatever the seed */ -/* ✔ [assert-true] keeps every shade visibly distinct, whatever the seed */ -/* ✔ [assert-true] keeps every shade visibly distinct, whatever the seed */ -/* ✔ [assert-true] keeps every shade visibly distinct, whatever the seed */ -/* ✔ [assert-true] keeps every shade visibly distinct, whatever the seed */ -/* ✔ [assert-true] keeps every shade visibly distinct, whatever the seed */ -/* ✔ [assert-true] keeps every shade visibly distinct, whatever the seed */ -/* ✔ [assert-true] keeps every shade visibly distinct, whatever the seed */ -/* ✔ [assert-true] keeps every shade visibly distinct, whatever the seed */ -/* ✔ [assert-true] keeps every shade visibly distinct, whatever the seed */ -/* ✔ [assert-true] keeps every shade visibly distinct, whatever the seed */ -/* ✔ [assert-true] keeps every shade visibly distinct, whatever the seed */ -/* ✔ [assert-true] keeps every shade visibly distinct, whatever the seed */ -/* ✔ [assert-true] keeps every shade visibly distinct, whatever the seed */ -/* ✔ [assert-true] keeps every shade visibly distinct, whatever the seed */ -/* ✔ [assert-true] keeps every shade visibly distinct, whatever the seed */ -/* ✔ [assert-true] keeps every shade visibly distinct, whatever the seed */ -/* ✔ [assert-true] keeps every shade visibly distinct, whatever the seed */ -/* ✔ [assert-true] keeps every shade visibly distinct, whatever the seed */ -/* ✔ [assert-true] keeps every shade visibly distinct, whatever the seed */ -/* ✔ [assert-true] keeps every shade visibly distinct, whatever the seed */ -/* */ -/* Test: generates a neutral ramp for a seed with no usable hue */ -/* ✔ [assert-equal] generates a neutral ramp for a seed with no usable hue */ -/* ✔ [assert-equal] generates a neutral ramp for a seed with no usable hue */ -/* ✔ [assert-equal] generates a neutral ramp for a seed with no usable hue */ -/* ✔ [assert-equal] generates a neutral ramp for a seed with no usable hue */ -/* ✔ [assert-equal] generates a neutral ramp for a seed with no usable hue */ -/* ✔ [assert-equal] generates a neutral ramp for a seed with no usable hue */ -/* ✔ [assert-equal] generates a neutral ramp for a seed with no usable hue */ -/* ✔ [assert-equal] generates a neutral ramp for a seed with no usable hue */ -/* ✔ [assert-equal] generates a neutral ramp for a seed with no usable hue */ -/* ✔ [assert-equal] generates a neutral ramp for a seed with no usable hue */ -/* */ -/* Test: leaves the surface family anchored on its seed */ -/* ✔ [assert-equal] leaves the surface family anchored on its seed */ -/* */ -/* Test: emits a relative color expression anchored on the seed variable */ -/* ✔ [assert-true] emits a relative color expression anchored on the seed variable */ -/* */ -/* Test: reports which shade the seed lands nearest */ -/* ✔ [assert-equal] reports which shade the seed lands nearest */ -/* ✔ [assert-equal] reports which shade the seed lands nearest */ -/* */ -/* Test: falls back to the original multipliers on request */ -/* ✔ [assert-equal] falls back to the original multipliers on request */ -/* ✔ [assert-equal] falls back to the original multipliers on request */ -/* */ -/* */ -/* Test: should convert a color to a list of HSL values */ -/* ✔ [assert-equal] should convert a color to a list of HSL values */ -/* */ -/* Test: should include all necessarry CSS custom properties for adaptive contrast to work */ -/* ASSERT: */ -/* OUTPUT */ -:root { - --ig-wcag-a: 0.31; - --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-d65 var(--y) var(--y) var(--y); -} - -/* END_OUTPUT */ -/* CONTAINED */ -:root { - --ig-wcag-a: 0.31; - --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-d65 var(--y) var(--y) var(--y); -} - -/* END_CONTAINED */ -/* END_ASSERT */ -/* */ -/* # Module: Color :: palette :: seed color variables */ -/* -------------------------------------------------- */ -/* Test: emits --ig-{name}-seed CSS variables; uses provided gray or derives from surface */ -/* ASSERT: */ -/* OUTPUT */ -:root { - --ig-wcag-a: 0.31; - --ig-wcag-aa: 0.185; - --ig-wcag-aaa: 0.178; - --ig-contrast-level: var(--ig-wcag-aa); - --y: clamp(0, (y / var(--ig-contrast-level) - 1) * -infinity, 1); - --y-contrast: xyz-d65 var(--y) var(--y) var(--y); -} - -:root { - --ig-primary-50: oklch(from var(--ig-primary-seed) 0.9402 min(c * 0.1264, 0.0232) calc(h + 6.804)); - --ig-primary-50-contrast: hsla(from color(from var(--ig-primary-50) var(--y-contrast)) h 0 l/1); - --ig-primary-100: oklch(from var(--ig-primary-seed) 0.844 min(c * 0.3941, 0.0724) calc(h + 4.879)); - --ig-primary-100-contrast: hsla(from color(from var(--ig-primary-100) var(--y-contrast)) h 0 l/1); - --ig-primary-200: oklch(from var(--ig-primary-seed) 0.7551 min(c * 0.6602, 0.1213) calc(h + 3.103)); - --ig-primary-200-contrast: hsla(from color(from var(--ig-primary-200) var(--y-contrast)) h 0 l/1); - --ig-primary-300: oklch(from var(--ig-primary-seed) 0.6742 min(c * 0.8212, 0.1508) calc(h + 1.484)); - --ig-primary-300-contrast: hsla(from color(from var(--ig-primary-300) var(--y-contrast)) h 0 l/1); - --ig-primary-400: oklch(from var(--ig-primary-seed) 0.5973 min(c * 0.8367, 0.1537) h); - --ig-primary-400-contrast: hsla(from color(from var(--ig-primary-400) var(--y-contrast)) h 0 l/1); - --ig-primary-500: oklch(from var(--ig-primary-seed) 0.5244 min(c * 0.7664, 0.1408) h); - --ig-primary-500-contrast: hsla(from color(from var(--ig-primary-500) var(--y-contrast)) h 0 l/1); - --ig-primary-600: oklch(from var(--ig-primary-seed) 0.4535 min(c * 0.6602, 0.1213) h); - --ig-primary-600-contrast: hsla(from color(from var(--ig-primary-600) var(--y-contrast)) h 0 l/1); - --ig-primary-700: oklch(from var(--ig-primary-seed) 0.3818 min(c * 0.5301, 0.0974) h); - --ig-primary-700-contrast: hsla(from color(from var(--ig-primary-700) var(--y-contrast)) h 0 l/1); - --ig-primary-800: oklch(from var(--ig-primary-seed) 0.3034 min(c * 0.3808, 0.0699) h); - --ig-primary-800-contrast: hsla(from color(from var(--ig-primary-800) var(--y-contrast)) h 0 l/1); - --ig-primary-900: oklch(from var(--ig-primary-seed) 0.2004 min(c * 0.2097, 0.0385) h); - --ig-primary-900-contrast: hsla(from color(from var(--ig-primary-900) var(--y-contrast)) h 0 l/1); - --ig-primary-seed: #09f; - --ig-primary-seed-contrast: hsla(from color(from var(--ig-primary-seed) var(--y-contrast)) h 0 l/1); - --ig-primary-A100: oklch(from var(--ig-primary-seed) 0.889 min(c * 0.3037, 0.0558) calc(h + 2.817)); - --ig-primary-A100-contrast: hsla(from color(from var(--ig-primary-A100) var(--y-contrast)) h 0 l/1); - --ig-primary-A200: oklch(from var(--ig-primary-seed) 0.7075 min(c * 0.8606, 0.1581) calc(h + 2.149)); - --ig-primary-A200-contrast: hsla(from color(from var(--ig-primary-A200) var(--y-contrast)) h 0 l/1); - --ig-primary-A400: oklch(from var(--ig-primary-seed) 0.5847 min(c * 0.8681, 0.1595) h); - --ig-primary-A400-contrast: hsla(from color(from var(--ig-primary-A400) var(--y-contrast)) h 0 l/1); - --ig-primary-A700: oklch(from var(--ig-primary-seed) 0.4923 min(c * 0.7355, 0.1351) h); - --ig-primary-A700-contrast: hsla(from color(from var(--ig-primary-A700) var(--y-contrast)) h 0 l/1); - --ig-secondary-50: oklch(from var(--ig-secondary-seed) 0.9463 min(c * 0.1097, 0.0141) calc(h + 6.926)); - --ig-secondary-50-contrast: hsla(from color(from var(--ig-secondary-50) var(--y-contrast)) h 0 l/1); - --ig-secondary-100: oklch(from var(--ig-secondary-seed) 0.8515 min(c * 0.3639, 0.0467) calc(h + 5.03)); - --ig-secondary-100-contrast: hsla(from color(from var(--ig-secondary-100) var(--y-contrast)) h 0 l/1); - --ig-secondary-200: oklch(from var(--ig-secondary-seed) 0.7653 min(c * 0.6343, 0.0814) calc(h + 3.307)); - --ig-secondary-200-contrast: hsla(from color(from var(--ig-secondary-200) var(--y-contrast)) h 0 l/1); - --ig-secondary-300: oklch(from var(--ig-secondary-seed) 0.6845 min(c * 0.8792, 0.1128) calc(h + 1.691)); - --ig-secondary-300-contrast: hsla(from color(from var(--ig-secondary-300) var(--y-contrast)) h 0 l/1); - --ig-secondary-400: oklch(from var(--ig-secondary-seed) 0.6101 min(c * 1.0415, 0.1336) calc(h + 0.203)); - --ig-secondary-400-contrast: hsla(from color(from var(--ig-secondary-400) var(--y-contrast)) h 0 l/1); - --ig-secondary-500: oklch(from var(--ig-secondary-seed) 0.5386 min(c * 1.0863, 0.1394) h); - --ig-secondary-500-contrast: hsla(from color(from var(--ig-secondary-500) var(--y-contrast)) h 0 l/1); - --ig-secondary-600: oklch(from var(--ig-secondary-seed) 0.4674 min(c * 1.0083, 0.1294) h); - --ig-secondary-600-contrast: hsla(from color(from var(--ig-secondary-600) var(--y-contrast)) h 0 l/1); - --ig-secondary-700: oklch(from var(--ig-secondary-seed) 0.3933 min(c * 0.835, 0.1071) h); - --ig-secondary-700-contrast: hsla(from color(from var(--ig-secondary-700) var(--y-contrast)) h 0 l/1); - --ig-secondary-800: oklch(from var(--ig-secondary-seed) 0.3118 min(c * 0.605, 0.0776) h); - --ig-secondary-800-contrast: hsla(from color(from var(--ig-secondary-800) var(--y-contrast)) h 0 l/1); - --ig-secondary-900: oklch(from var(--ig-secondary-seed) 0.205 min(c * 0.3327, 0.0427) h); - --ig-secondary-900-contrast: hsla(from color(from var(--ig-secondary-900) var(--y-contrast)) h 0 l/1); - --ig-secondary-seed: #97c; - --ig-secondary-seed-contrast: hsla(from color(from var(--ig-secondary-seed) var(--y-contrast)) h 0 l/1); - --ig-secondary-A100: oklch(from var(--ig-secondary-seed) 0.8923 min(c * 0.5334, 0.0684) calc(h + 6.928)); - --ig-secondary-A100-contrast: hsla(from color(from var(--ig-secondary-A100) var(--y-contrast)) h 0 l/1); - --ig-secondary-A200: oklch(from var(--ig-secondary-seed) 0.727 min(c * 1.3792, 0.177) calc(h + 3.291)); - --ig-secondary-A200-contrast: hsla(from color(from var(--ig-secondary-A200) var(--y-contrast)) h 0 l/1); - --ig-secondary-A400: oklch(from var(--ig-secondary-seed) 0.6148 min(c * 1.9646, 0.2521) calc(h + 0.357)); - --ig-secondary-A400-contrast: hsla(from color(from var(--ig-secondary-A400) var(--y-contrast)) h 0 l/1); - --ig-secondary-A700: oklch(from var(--ig-secondary-seed) 0.5283 min(c * 2.0936, 0.2686) h); - --ig-secondary-A700-contrast: hsla(from color(from var(--ig-secondary-A700) var(--y-contrast)) h 0 l/1); - --ig-gray-50: oklch(from var(--ig-gray-seed) 0.9404 0 0); - --ig-gray-50-contrast: hsla(from color(from var(--ig-gray-50) var(--y-contrast)) h 0 l/1); - --ig-gray-100: oklch(from var(--ig-gray-seed) 0.8448 0 0); - --ig-gray-100-contrast: hsla(from color(from var(--ig-gray-100) var(--y-contrast)) h 0 l/1); - --ig-gray-200: oklch(from var(--ig-gray-seed) 0.7562 0 0); - --ig-gray-200-contrast: hsla(from color(from var(--ig-gray-200) var(--y-contrast)) h 0 l/1); - --ig-gray-300: oklch(from var(--ig-gray-seed) 0.6749 0 0); - --ig-gray-300-contrast: hsla(from color(from var(--ig-gray-300) var(--y-contrast)) h 0 l/1); - --ig-gray-400: oklch(from var(--ig-gray-seed) 0.598 0 0); - --ig-gray-400-contrast: hsla(from color(from var(--ig-gray-400) var(--y-contrast)) h 0 l/1); - --ig-gray-500: oklch(from var(--ig-gray-seed) 0.5248 0 0); - --ig-gray-500-contrast: hsla(from color(from var(--ig-gray-500) var(--y-contrast)) h 0 l/1); - --ig-gray-600: oklch(from var(--ig-gray-seed) 0.4539 0 0); - --ig-gray-600-contrast: hsla(from color(from var(--ig-gray-600) var(--y-contrast)) h 0 l/1); - --ig-gray-700: oklch(from var(--ig-gray-seed) 0.3822 0 0); - --ig-gray-700-contrast: hsla(from color(from var(--ig-gray-700) var(--y-contrast)) h 0 l/1); - --ig-gray-800: oklch(from var(--ig-gray-seed) 0.304 0 0); - --ig-gray-800-contrast: hsla(from color(from var(--ig-gray-800) var(--y-contrast)) h 0 l/1); - --ig-gray-900: oklch(from var(--ig-gray-seed) 0.2009 0 0); - --ig-gray-900-contrast: hsla(from color(from var(--ig-gray-900) var(--y-contrast)) h 0 l/1); - --ig-gray-seed: #333; - --ig-gray-seed-contrast: hsla(from color(from var(--ig-gray-seed) var(--y-contrast)) h 0 l/1); - --ig-surface-50: hsl(from var(--ig-surface-500) h calc(s * 1.23) calc(l * 1.78)); - --ig-surface-50-contrast: hsla(from color(from var(--ig-surface-50) var(--y-contrast)) h 0 l/1); - --ig-surface-100: hsl(from var(--ig-surface-500) h calc(s * 0.8) calc(l * 1.66)); - --ig-surface-100-contrast: hsla(from color(from var(--ig-surface-100) var(--y-contrast)) h 0 l/1); - --ig-surface-200: hsl(from var(--ig-surface-500) h calc(s * 0.64) calc(l * 1.43)); - --ig-surface-200-contrast: hsla(from color(from var(--ig-surface-200) var(--y-contrast)) h 0 l/1); - --ig-surface-300: hsl(from var(--ig-surface-500) h calc(s * 0.73) calc(l * 1.19)); - --ig-surface-300-contrast: hsla(from color(from var(--ig-surface-300) var(--y-contrast)) h 0 l/1); - --ig-surface-400: hsl(from var(--ig-surface-500) h calc(s * 0.875) calc(l * 1.08)); - --ig-surface-400-contrast: hsla(from color(from var(--ig-surface-400) var(--y-contrast)) h 0 l/1); - --ig-surface-500: #fff; - --ig-surface-500-contrast: hsla(from color(from var(--ig-surface-500) var(--y-contrast)) h 0 l/1); - --ig-surface-600: hsl(from var(--ig-surface-500) h calc(s * 1.26) calc(l * 0.89)); - --ig-surface-600-contrast: hsla(from color(from var(--ig-surface-600) var(--y-contrast)) h 0 l/1); - --ig-surface-700: hsl(from var(--ig-surface-500) h calc(s * 1.26) calc(l * 0.81)); - --ig-surface-700-contrast: hsla(from color(from var(--ig-surface-700) var(--y-contrast)) h 0 l/1); - --ig-surface-800: hsl(from var(--ig-surface-500) h calc(s * 1.26) calc(l * 0.73)); - --ig-surface-800-contrast: hsla(from color(from var(--ig-surface-800) var(--y-contrast)) h 0 l/1); - --ig-surface-900: hsl(from var(--ig-surface-500) h calc(s * 1.26) calc(l * 0.64)); - --ig-surface-900-contrast: hsla(from color(from var(--ig-surface-900) var(--y-contrast)) h 0 l/1); - --ig-surface-seed: #fff; - --ig-surface-seed-contrast: hsla(from color(from var(--ig-surface-seed) var(--y-contrast)) h 0 l/1); - --ig-surface-A100: hsl(from var(--ig-surface-500) h calc(s * 1.23) calc(l * 1.34)); - --ig-surface-A100-contrast: hsla(from color(from var(--ig-surface-A100) var(--y-contrast)) h 0 l/1); - --ig-surface-A200: hsl(from var(--ig-surface-500) h calc(s * 1.22) calc(l * 1.16)); - --ig-surface-A200-contrast: hsla(from color(from var(--ig-surface-A200) var(--y-contrast)) h 0 l/1); - --ig-surface-A400: hsl(from var(--ig-surface-500) h calc(s * 1.23) calc(l * 0.91)); - --ig-surface-A400-contrast: hsla(from color(from var(--ig-surface-A400) var(--y-contrast)) h 0 l/1); - --ig-surface-A700: hsl(from var(--ig-surface-500) h calc(s * 1.23) calc(l * 0.65)); - --ig-surface-A700-contrast: hsla(from color(from var(--ig-surface-A700) var(--y-contrast)) h 0 l/1); - --ig-info-50: oklch(from var(--ig-info-seed) 0.9453 min(c * 0.0689, 0.0216) calc(h + 13.046)); - --ig-info-50-contrast: hsla(from color(from var(--ig-info-50) var(--y-contrast)) h 0 l/1); - --ig-info-100: oklch(from var(--ig-info-seed) 0.8466 min(c * 0.232, 0.0727) calc(h + 9.788)); - --ig-info-100-contrast: hsla(from color(from var(--ig-info-100) var(--y-contrast)) h 0 l/1); - --ig-info-200: oklch(from var(--ig-info-seed) 0.7599 min(c * 0.3904, 0.1223) calc(h + 6.738)); - --ig-info-200-contrast: hsla(from color(from var(--ig-info-200) var(--y-contrast)) h 0 l/1); - --ig-info-300: oklch(from var(--ig-info-seed) 0.6808 min(c * 0.5346, 0.1674) calc(h + 4.112)); - --ig-info-300-contrast: hsla(from color(from var(--ig-info-300) var(--y-contrast)) h 0 l/1); - --ig-info-400: oklch(from var(--ig-info-seed) 0.6081 min(c * 0.675, 0.2114) calc(h + 1.897)); - --ig-info-400-contrast: hsla(from color(from var(--ig-info-400) var(--y-contrast)) h 0 l/1); - --ig-info-500: oklch(from var(--ig-info-seed) 0.5394 min(c * 0.7548, 0.2364) h); - --ig-info-500-contrast: hsla(from color(from var(--ig-info-500) var(--y-contrast)) h 0 l/1); - --ig-info-600: oklch(from var(--ig-info-seed) 0.4709 min(c * 0.7545, 0.2363) h); - --ig-info-600-contrast: hsla(from color(from var(--ig-info-600) var(--y-contrast)) h 0 l/1); - --ig-info-700: oklch(from var(--ig-info-seed) 0.3981 min(c * 0.6608, 0.207) h); - --ig-info-700-contrast: hsla(from color(from var(--ig-info-700) var(--y-contrast)) h 0 l/1); - --ig-info-800: oklch(from var(--ig-info-seed) 0.3148 min(c * 0.4898, 0.1534) h); - --ig-info-800-contrast: hsla(from color(from var(--ig-info-800) var(--y-contrast)) h 0 l/1); - --ig-info-900: oklch(from var(--ig-info-seed) 0.2057 min(c * 0.2698, 0.0845) h); - --ig-info-900-contrast: hsla(from color(from var(--ig-info-900) var(--y-contrast)) h 0 l/1); - --ig-info-seed: blue; - --ig-info-seed-contrast: hsla(from color(from var(--ig-info-seed) var(--y-contrast)) h 0 l/1); - --ig-info-A100: oklch(from var(--ig-info-seed) 0.8909 min(c * 0.1693, 0.053) calc(h + 10.08)); - --ig-info-A100-contrast: hsla(from color(from var(--ig-info-A100) var(--y-contrast)) h 0 l/1); - --ig-info-A200: oklch(from var(--ig-info-seed) 0.7136 min(c * 0.4738, 0.1484) calc(h + 4.928)); - --ig-info-A200-contrast: hsla(from color(from var(--ig-info-A200) var(--y-contrast)) h 0 l/1); - --ig-info-A400: oklch(from var(--ig-info-seed) 0.5968 min(c * 0.6976, 0.2185) calc(h + 1.491)); - --ig-info-A400-contrast: hsla(from color(from var(--ig-info-A400) var(--y-contrast)) h 0 l/1); - --ig-info-A700: oklch(from var(--ig-info-seed) 0.512 min(c * 0.836, 0.2619) h); - --ig-info-A700-contrast: hsla(from color(from var(--ig-info-A700) var(--y-contrast)) h 0 l/1); - --ig-success-50: oklch(from var(--ig-success-seed) 0.9305 min(c * 0.5993, 0.106) h); - --ig-success-50-contrast: hsla(from color(from var(--ig-success-50) var(--y-contrast)) h 0 l/1); - --ig-success-100: oklch(from var(--ig-success-seed) 0.8227 min(c * 1.2544, 0.2219) h); - --ig-success-100-contrast: hsla(from color(from var(--ig-success-100) var(--y-contrast)) h 0 l/1); - --ig-success-200: oklch(from var(--ig-success-seed) 0.7358 min(c * 1.307, 0.2312) h); - --ig-success-200-contrast: hsla(from color(from var(--ig-success-200) var(--y-contrast)) h 0 l/1); - --ig-success-300: oklch(from var(--ig-success-seed) 0.6543 min(c * 1.2323, 0.2179) h); - --ig-success-300-contrast: hsla(from color(from var(--ig-success-300) var(--y-contrast)) h 0 l/1); - --ig-success-400: oklch(from var(--ig-success-seed) 0.5793 min(c * 1.1126, 0.1968) h); - --ig-success-400-contrast: hsla(from color(from var(--ig-success-400) var(--y-contrast)) h 0 l/1); - --ig-success-500: oklch(from var(--ig-success-seed) 0.5083 min(c * 0.9766, 0.1727) h); - --ig-success-500-contrast: hsla(from color(from var(--ig-success-500) var(--y-contrast)) h 0 l/1); - --ig-success-600: oklch(from var(--ig-success-seed) 0.4397 min(c * 0.8297, 0.1467) h); - --ig-success-600-contrast: hsla(from color(from var(--ig-success-600) var(--y-contrast)) h 0 l/1); - --ig-success-700: oklch(from var(--ig-success-seed) 0.371 min(c * 0.6646, 0.1175) h); - --ig-success-700-contrast: hsla(from color(from var(--ig-success-700) var(--y-contrast)) h 0 l/1); - --ig-success-800: oklch(from var(--ig-success-seed) 0.2958 min(c * 0.4781, 0.0846) h); - --ig-success-800-contrast: hsla(from color(from var(--ig-success-800) var(--y-contrast)) h 0 l/1); - --ig-success-900: oklch(from var(--ig-success-seed) 0.1964 min(c * 0.2645, 0.0468) h); - --ig-success-900-contrast: hsla(from color(from var(--ig-success-900) var(--y-contrast)) h 0 l/1); - --ig-success-seed: green; - --ig-success-seed-contrast: hsla(from color(from var(--ig-success-seed) var(--y-contrast)) h 0 l/1); - --ig-success-A100: oklch(from var(--ig-success-seed) 0.8632 min(c * 1.5429, 0.2729) h); - --ig-success-A100-contrast: hsla(from color(from var(--ig-success-A100) var(--y-contrast)) h 0 l/1); - --ig-success-A200: oklch(from var(--ig-success-seed) 0.686 min(c * 1.3198, 0.2334) h); - --ig-success-A200-contrast: hsla(from color(from var(--ig-success-A200) var(--y-contrast)) h 0 l/1); - --ig-success-A400: oklch(from var(--ig-success-seed) 0.5668 min(c * 1.0906, 0.1929) h); - --ig-success-A400-contrast: hsla(from color(from var(--ig-success-A400) var(--y-contrast)) h 0 l/1); - --ig-success-A700: oklch(from var(--ig-success-seed) 0.4769 min(c * 0.9176, 0.1623) h); - --ig-success-A700-contrast: hsla(from color(from var(--ig-success-A700) var(--y-contrast)) h 0 l/1); - --ig-warn-50: oklch(from var(--ig-warn-seed) 0.946 min(c * 0.1822, 0.0312) h); - --ig-warn-50-contrast: hsla(from color(from var(--ig-warn-50) var(--y-contrast)) h 0 l/1); - --ig-warn-100: oklch(from var(--ig-warn-seed) 0.8514 min(c * 0.5754, 0.0984) h); - --ig-warn-100-contrast: hsla(from color(from var(--ig-warn-100) var(--y-contrast)) h 0 l/1); - --ig-warn-200: oklch(from var(--ig-warn-seed) 0.7625 min(c * 0.8096, 0.1385) h); - --ig-warn-200-contrast: hsla(from color(from var(--ig-warn-200) var(--y-contrast)) h 0 l/1); - --ig-warn-300: oklch(from var(--ig-warn-seed) 0.6821 min(c * 0.8243, 0.141) h); - --ig-warn-300-contrast: hsla(from color(from var(--ig-warn-300) var(--y-contrast)) h 0 l/1); - --ig-warn-400: oklch(from var(--ig-warn-seed) 0.6047 min(c * 0.757, 0.1295) h); - --ig-warn-400-contrast: hsla(from color(from var(--ig-warn-400) var(--y-contrast)) h 0 l/1); - --ig-warn-500: oklch(from var(--ig-warn-seed) 0.5307 min(c * 0.6674, 0.1141) h); - --ig-warn-500-contrast: hsla(from color(from var(--ig-warn-500) var(--y-contrast)) h 0 l/1); - --ig-warn-600: oklch(from var(--ig-warn-seed) 0.4588 min(c * 0.5673, 0.097) h); - --ig-warn-600-contrast: hsla(from color(from var(--ig-warn-600) var(--y-contrast)) h 0 l/1); - --ig-warn-700: oklch(from var(--ig-warn-seed) 0.3861 min(c * 0.4534, 0.0775) h); - --ig-warn-700-contrast: hsla(from color(from var(--ig-warn-700) var(--y-contrast)) h 0 l/1); - --ig-warn-800: oklch(from var(--ig-warn-seed) 0.3067 min(c * 0.3249, 0.0556) h); - --ig-warn-800-contrast: hsla(from color(from var(--ig-warn-800) var(--y-contrast)) h 0 l/1); - --ig-warn-900: oklch(from var(--ig-warn-seed) 0.2023 min(c * 0.1786, 0.0306) h); - --ig-warn-900-contrast: hsla(from color(from var(--ig-warn-900) var(--y-contrast)) h 0 l/1); - --ig-warn-seed: orange; - --ig-warn-seed-contrast: hsla(from color(from var(--ig-warn-seed) var(--y-contrast)) h 0 l/1); - --ig-warn-A100: oklch(from var(--ig-warn-seed) 0.8929 min(c * 0.496, 0.0848) calc(h + 1.551)); - --ig-warn-A100-contrast: hsla(from color(from var(--ig-warn-A100) var(--y-contrast)) h 0 l/1); - --ig-warn-A200: oklch(from var(--ig-warn-seed) 0.7161 min(c * 0.8994, 0.1538) h); - --ig-warn-A200-contrast: hsla(from color(from var(--ig-warn-A200) var(--y-contrast)) h 0 l/1); - --ig-warn-A400: oklch(from var(--ig-warn-seed) 0.5917 min(c * 0.7464, 0.1277) h); - --ig-warn-A400-contrast: hsla(from color(from var(--ig-warn-A400) var(--y-contrast)) h 0 l/1); - --ig-warn-A700: oklch(from var(--ig-warn-seed) 0.4975 min(c * 0.6276, 0.1073) h); - --ig-warn-A700-contrast: hsla(from color(from var(--ig-warn-A700) var(--y-contrast)) h 0 l/1); - --ig-error-50: oklch(from var(--ig-error-seed) 0.9437 min(c * 0.106, 0.0273) h); - --ig-error-50-contrast: hsla(from color(from var(--ig-error-50) var(--y-contrast)) h 0 l/1); - --ig-error-100: oklch(from var(--ig-error-seed) 0.8531 min(c * 0.3108, 0.0801) calc(h + 0.399)); - --ig-error-100-contrast: hsla(from color(from var(--ig-error-100) var(--y-contrast)) h 0 l/1); - --ig-error-200: oklch(from var(--ig-error-seed) 0.7729 min(c * 0.5202, 0.134) calc(h + 0.309)); - --ig-error-200-contrast: hsla(from color(from var(--ig-error-200) var(--y-contrast)) h 0 l/1); - --ig-error-300: oklch(from var(--ig-error-seed) 0.6976 min(c * 0.7485, 0.1929) h); - --ig-error-300-contrast: hsla(from color(from var(--ig-error-300) var(--y-contrast)) h 0 l/1); - --ig-error-400: oklch(from var(--ig-error-seed) 0.6235 min(c * 0.8417, 0.2169) h); - --ig-error-400-contrast: hsla(from color(from var(--ig-error-400) var(--y-contrast)) h 0 l/1); - --ig-error-500: oklch(from var(--ig-error-seed) 0.5497 min(c * 0.823, 0.2121) h); - --ig-error-500-contrast: hsla(from color(from var(--ig-error-500) var(--y-contrast)) h 0 l/1); - --ig-error-600: oklch(from var(--ig-error-seed) 0.4764 min(c * 0.7291, 0.1879) h); - --ig-error-600-contrast: hsla(from color(from var(--ig-error-600) var(--y-contrast)) h 0 l/1); - --ig-error-700: oklch(from var(--ig-error-seed) 0.4004 min(c * 0.59, 0.152) h); - --ig-error-700-contrast: hsla(from color(from var(--ig-error-700) var(--y-contrast)) h 0 l/1); - --ig-error-800: oklch(from var(--ig-error-seed) 0.3169 min(c * 0.4232, 0.1091) h); - --ig-error-800-contrast: hsla(from color(from var(--ig-error-800) var(--y-contrast)) h 0 l/1); - --ig-error-900: oklch(from var(--ig-error-seed) 0.2078 min(c * 0.2316, 0.0597) h); - --ig-error-900-contrast: hsla(from color(from var(--ig-error-900) var(--y-contrast)) h 0 l/1); - --ig-error-seed: red; - --ig-error-seed-contrast: hsla(from color(from var(--ig-error-seed) var(--y-contrast)) h 0 l/1); - --ig-error-A100: oklch(from var(--ig-error-seed) 0.902 min(c * 0.1992, 0.0513) calc(h + 2.141)); - --ig-error-A100-contrast: hsla(from color(from var(--ig-error-A100) var(--y-contrast)) h 0 l/1); - --ig-error-A200: oklch(from var(--ig-error-seed) 0.7258 min(c * 0.6599, 0.17) calc(h + 0.27)); - --ig-error-A200-contrast: hsla(from color(from var(--ig-error-A200) var(--y-contrast)) h 0 l/1); - --ig-error-A400: oklch(from var(--ig-error-seed) 0.6128 min(c * 0.9204, 0.2372) h); - --ig-error-A400-contrast: hsla(from color(from var(--ig-error-A400) var(--y-contrast)) h 0 l/1); - --ig-error-A700: oklch(from var(--ig-error-seed) 0.518 min(c * 0.8222, 0.2119) h); - --ig-error-A700-contrast: hsla(from color(from var(--ig-error-A700) var(--y-contrast)) h 0 l/1); -} - -/* END_OUTPUT */ -/* CONTAINED */ -:root { - --ig-primary-seed: #09f; - --ig-gray-seed: #333; -} - -/* END_CONTAINED */ -/* END_ASSERT */ -/* ASSERT: */ -/* OUTPUT */ -:root { - --ig-wcag-a: 0.31; - --ig-wcag-aa: 0.185; - --ig-wcag-aaa: 0.178; - --ig-contrast-level: var(--ig-wcag-aa); - --y: clamp(0, (y / var(--ig-contrast-level) - 1) * -infinity, 1); - --y-contrast: xyz-d65 var(--y) var(--y) var(--y); -} - -:root { - --ig-primary-50: oklch(from var(--ig-primary-seed) 0.9402 min(c * 0.1264, 0.0232) calc(h + 6.804)); - --ig-primary-50-contrast: hsla(from color(from var(--ig-primary-50) var(--y-contrast)) h 0 l/1); - --ig-primary-100: oklch(from var(--ig-primary-seed) 0.844 min(c * 0.3941, 0.0724) calc(h + 4.879)); - --ig-primary-100-contrast: hsla(from color(from var(--ig-primary-100) var(--y-contrast)) h 0 l/1); - --ig-primary-200: oklch(from var(--ig-primary-seed) 0.7551 min(c * 0.6602, 0.1213) calc(h + 3.103)); - --ig-primary-200-contrast: hsla(from color(from var(--ig-primary-200) var(--y-contrast)) h 0 l/1); - --ig-primary-300: oklch(from var(--ig-primary-seed) 0.6742 min(c * 0.8212, 0.1508) calc(h + 1.484)); - --ig-primary-300-contrast: hsla(from color(from var(--ig-primary-300) var(--y-contrast)) h 0 l/1); - --ig-primary-400: oklch(from var(--ig-primary-seed) 0.5973 min(c * 0.8367, 0.1537) h); - --ig-primary-400-contrast: hsla(from color(from var(--ig-primary-400) var(--y-contrast)) h 0 l/1); - --ig-primary-500: oklch(from var(--ig-primary-seed) 0.5244 min(c * 0.7664, 0.1408) h); - --ig-primary-500-contrast: hsla(from color(from var(--ig-primary-500) var(--y-contrast)) h 0 l/1); - --ig-primary-600: oklch(from var(--ig-primary-seed) 0.4535 min(c * 0.6602, 0.1213) h); - --ig-primary-600-contrast: hsla(from color(from var(--ig-primary-600) var(--y-contrast)) h 0 l/1); - --ig-primary-700: oklch(from var(--ig-primary-seed) 0.3818 min(c * 0.5301, 0.0974) h); - --ig-primary-700-contrast: hsla(from color(from var(--ig-primary-700) var(--y-contrast)) h 0 l/1); - --ig-primary-800: oklch(from var(--ig-primary-seed) 0.3034 min(c * 0.3808, 0.0699) h); - --ig-primary-800-contrast: hsla(from color(from var(--ig-primary-800) var(--y-contrast)) h 0 l/1); - --ig-primary-900: oklch(from var(--ig-primary-seed) 0.2004 min(c * 0.2097, 0.0385) h); - --ig-primary-900-contrast: hsla(from color(from var(--ig-primary-900) var(--y-contrast)) h 0 l/1); - --ig-primary-seed: #09f; - --ig-primary-seed-contrast: hsla(from color(from var(--ig-primary-seed) var(--y-contrast)) h 0 l/1); - --ig-primary-A100: oklch(from var(--ig-primary-seed) 0.889 min(c * 0.3037, 0.0558) calc(h + 2.817)); - --ig-primary-A100-contrast: hsla(from color(from var(--ig-primary-A100) var(--y-contrast)) h 0 l/1); - --ig-primary-A200: oklch(from var(--ig-primary-seed) 0.7075 min(c * 0.8606, 0.1581) calc(h + 2.149)); - --ig-primary-A200-contrast: hsla(from color(from var(--ig-primary-A200) var(--y-contrast)) h 0 l/1); - --ig-primary-A400: oklch(from var(--ig-primary-seed) 0.5847 min(c * 0.8681, 0.1595) h); - --ig-primary-A400-contrast: hsla(from color(from var(--ig-primary-A400) var(--y-contrast)) h 0 l/1); - --ig-primary-A700: oklch(from var(--ig-primary-seed) 0.4923 min(c * 0.7355, 0.1351) h); - --ig-primary-A700-contrast: hsla(from color(from var(--ig-primary-A700) var(--y-contrast)) h 0 l/1); - --ig-secondary-50: oklch(from var(--ig-secondary-seed) 0.9463 min(c * 0.1097, 0.0141) calc(h + 6.926)); - --ig-secondary-50-contrast: hsla(from color(from var(--ig-secondary-50) var(--y-contrast)) h 0 l/1); - --ig-secondary-100: oklch(from var(--ig-secondary-seed) 0.8515 min(c * 0.3639, 0.0467) calc(h + 5.03)); - --ig-secondary-100-contrast: hsla(from color(from var(--ig-secondary-100) var(--y-contrast)) h 0 l/1); - --ig-secondary-200: oklch(from var(--ig-secondary-seed) 0.7653 min(c * 0.6343, 0.0814) calc(h + 3.307)); - --ig-secondary-200-contrast: hsla(from color(from var(--ig-secondary-200) var(--y-contrast)) h 0 l/1); - --ig-secondary-300: oklch(from var(--ig-secondary-seed) 0.6845 min(c * 0.8792, 0.1128) calc(h + 1.691)); - --ig-secondary-300-contrast: hsla(from color(from var(--ig-secondary-300) var(--y-contrast)) h 0 l/1); - --ig-secondary-400: oklch(from var(--ig-secondary-seed) 0.6101 min(c * 1.0415, 0.1336) calc(h + 0.203)); - --ig-secondary-400-contrast: hsla(from color(from var(--ig-secondary-400) var(--y-contrast)) h 0 l/1); - --ig-secondary-500: oklch(from var(--ig-secondary-seed) 0.5386 min(c * 1.0863, 0.1394) h); - --ig-secondary-500-contrast: hsla(from color(from var(--ig-secondary-500) var(--y-contrast)) h 0 l/1); - --ig-secondary-600: oklch(from var(--ig-secondary-seed) 0.4674 min(c * 1.0083, 0.1294) h); - --ig-secondary-600-contrast: hsla(from color(from var(--ig-secondary-600) var(--y-contrast)) h 0 l/1); - --ig-secondary-700: oklch(from var(--ig-secondary-seed) 0.3933 min(c * 0.835, 0.1071) h); - --ig-secondary-700-contrast: hsla(from color(from var(--ig-secondary-700) var(--y-contrast)) h 0 l/1); - --ig-secondary-800: oklch(from var(--ig-secondary-seed) 0.3118 min(c * 0.605, 0.0776) h); - --ig-secondary-800-contrast: hsla(from color(from var(--ig-secondary-800) var(--y-contrast)) h 0 l/1); - --ig-secondary-900: oklch(from var(--ig-secondary-seed) 0.205 min(c * 0.3327, 0.0427) h); - --ig-secondary-900-contrast: hsla(from color(from var(--ig-secondary-900) var(--y-contrast)) h 0 l/1); - --ig-secondary-seed: #97c; - --ig-secondary-seed-contrast: hsla(from color(from var(--ig-secondary-seed) var(--y-contrast)) h 0 l/1); - --ig-secondary-A100: oklch(from var(--ig-secondary-seed) 0.8923 min(c * 0.5334, 0.0684) calc(h + 6.928)); - --ig-secondary-A100-contrast: hsla(from color(from var(--ig-secondary-A100) var(--y-contrast)) h 0 l/1); - --ig-secondary-A200: oklch(from var(--ig-secondary-seed) 0.727 min(c * 1.3792, 0.177) calc(h + 3.291)); - --ig-secondary-A200-contrast: hsla(from color(from var(--ig-secondary-A200) var(--y-contrast)) h 0 l/1); - --ig-secondary-A400: oklch(from var(--ig-secondary-seed) 0.6148 min(c * 1.9646, 0.2521) calc(h + 0.357)); - --ig-secondary-A400-contrast: hsla(from color(from var(--ig-secondary-A400) var(--y-contrast)) h 0 l/1); - --ig-secondary-A700: oklch(from var(--ig-secondary-seed) 0.5283 min(c * 2.0936, 0.2686) h); - --ig-secondary-A700-contrast: hsla(from color(from var(--ig-secondary-A700) var(--y-contrast)) h 0 l/1); - --ig-gray-50: oklch(from var(--ig-gray-seed) 0.9404 0 0); - --ig-gray-50-contrast: hsla(from color(from var(--ig-gray-50) var(--y-contrast)) h 0 l/1); - --ig-gray-100: oklch(from var(--ig-gray-seed) 0.8448 0 0); - --ig-gray-100-contrast: hsla(from color(from var(--ig-gray-100) var(--y-contrast)) h 0 l/1); - --ig-gray-200: oklch(from var(--ig-gray-seed) 0.7562 0 0); - --ig-gray-200-contrast: hsla(from color(from var(--ig-gray-200) var(--y-contrast)) h 0 l/1); - --ig-gray-300: oklch(from var(--ig-gray-seed) 0.6749 0 0); - --ig-gray-300-contrast: hsla(from color(from var(--ig-gray-300) var(--y-contrast)) h 0 l/1); - --ig-gray-400: oklch(from var(--ig-gray-seed) 0.598 0 0); - --ig-gray-400-contrast: hsla(from color(from var(--ig-gray-400) var(--y-contrast)) h 0 l/1); - --ig-gray-500: oklch(from var(--ig-gray-seed) 0.5248 0 0); - --ig-gray-500-contrast: hsla(from color(from var(--ig-gray-500) var(--y-contrast)) h 0 l/1); - --ig-gray-600: oklch(from var(--ig-gray-seed) 0.4539 0 0); - --ig-gray-600-contrast: hsla(from color(from var(--ig-gray-600) var(--y-contrast)) h 0 l/1); - --ig-gray-700: oklch(from var(--ig-gray-seed) 0.3822 0 0); - --ig-gray-700-contrast: hsla(from color(from var(--ig-gray-700) var(--y-contrast)) h 0 l/1); - --ig-gray-800: oklch(from var(--ig-gray-seed) 0.304 0 0); - --ig-gray-800-contrast: hsla(from color(from var(--ig-gray-800) var(--y-contrast)) h 0 l/1); - --ig-gray-900: oklch(from var(--ig-gray-seed) 0.2009 0 0); - --ig-gray-900-contrast: hsla(from color(from var(--ig-gray-900) var(--y-contrast)) h 0 l/1); - --ig-gray-seed: #000; - --ig-gray-seed-contrast: hsla(from color(from var(--ig-gray-seed) var(--y-contrast)) h 0 l/1); - --ig-surface-50: hsl(from var(--ig-surface-500) h calc(s * 1.23) calc(l * 1.78)); - --ig-surface-50-contrast: hsla(from color(from var(--ig-surface-50) var(--y-contrast)) h 0 l/1); - --ig-surface-100: hsl(from var(--ig-surface-500) h calc(s * 0.8) calc(l * 1.66)); - --ig-surface-100-contrast: hsla(from color(from var(--ig-surface-100) var(--y-contrast)) h 0 l/1); - --ig-surface-200: hsl(from var(--ig-surface-500) h calc(s * 0.64) calc(l * 1.43)); - --ig-surface-200-contrast: hsla(from color(from var(--ig-surface-200) var(--y-contrast)) h 0 l/1); - --ig-surface-300: hsl(from var(--ig-surface-500) h calc(s * 0.73) calc(l * 1.19)); - --ig-surface-300-contrast: hsla(from color(from var(--ig-surface-300) var(--y-contrast)) h 0 l/1); - --ig-surface-400: hsl(from var(--ig-surface-500) h calc(s * 0.875) calc(l * 1.08)); - --ig-surface-400-contrast: hsla(from color(from var(--ig-surface-400) var(--y-contrast)) h 0 l/1); - --ig-surface-500: #fff; - --ig-surface-500-contrast: hsla(from color(from var(--ig-surface-500) var(--y-contrast)) h 0 l/1); - --ig-surface-600: hsl(from var(--ig-surface-500) h calc(s * 1.26) calc(l * 0.89)); - --ig-surface-600-contrast: hsla(from color(from var(--ig-surface-600) var(--y-contrast)) h 0 l/1); - --ig-surface-700: hsl(from var(--ig-surface-500) h calc(s * 1.26) calc(l * 0.81)); - --ig-surface-700-contrast: hsla(from color(from var(--ig-surface-700) var(--y-contrast)) h 0 l/1); - --ig-surface-800: hsl(from var(--ig-surface-500) h calc(s * 1.26) calc(l * 0.73)); - --ig-surface-800-contrast: hsla(from color(from var(--ig-surface-800) var(--y-contrast)) h 0 l/1); - --ig-surface-900: hsl(from var(--ig-surface-500) h calc(s * 1.26) calc(l * 0.64)); - --ig-surface-900-contrast: hsla(from color(from var(--ig-surface-900) var(--y-contrast)) h 0 l/1); - --ig-surface-seed: #fff; - --ig-surface-seed-contrast: hsla(from color(from var(--ig-surface-seed) var(--y-contrast)) h 0 l/1); - --ig-surface-A100: hsl(from var(--ig-surface-500) h calc(s * 1.23) calc(l * 1.34)); - --ig-surface-A100-contrast: hsla(from color(from var(--ig-surface-A100) var(--y-contrast)) h 0 l/1); - --ig-surface-A200: hsl(from var(--ig-surface-500) h calc(s * 1.22) calc(l * 1.16)); - --ig-surface-A200-contrast: hsla(from color(from var(--ig-surface-A200) var(--y-contrast)) h 0 l/1); - --ig-surface-A400: hsl(from var(--ig-surface-500) h calc(s * 1.23) calc(l * 0.91)); - --ig-surface-A400-contrast: hsla(from color(from var(--ig-surface-A400) var(--y-contrast)) h 0 l/1); - --ig-surface-A700: hsl(from var(--ig-surface-500) h calc(s * 1.23) calc(l * 0.65)); - --ig-surface-A700-contrast: hsla(from color(from var(--ig-surface-A700) var(--y-contrast)) h 0 l/1); - --ig-info-50: oklch(from var(--ig-info-seed) 0.9453 min(c * 0.0689, 0.0216) calc(h + 13.046)); - --ig-info-50-contrast: hsla(from color(from var(--ig-info-50) var(--y-contrast)) h 0 l/1); - --ig-info-100: oklch(from var(--ig-info-seed) 0.8466 min(c * 0.232, 0.0727) calc(h + 9.788)); - --ig-info-100-contrast: hsla(from color(from var(--ig-info-100) var(--y-contrast)) h 0 l/1); - --ig-info-200: oklch(from var(--ig-info-seed) 0.7599 min(c * 0.3904, 0.1223) calc(h + 6.738)); - --ig-info-200-contrast: hsla(from color(from var(--ig-info-200) var(--y-contrast)) h 0 l/1); - --ig-info-300: oklch(from var(--ig-info-seed) 0.6808 min(c * 0.5346, 0.1674) calc(h + 4.112)); - --ig-info-300-contrast: hsla(from color(from var(--ig-info-300) var(--y-contrast)) h 0 l/1); - --ig-info-400: oklch(from var(--ig-info-seed) 0.6081 min(c * 0.675, 0.2114) calc(h + 1.897)); - --ig-info-400-contrast: hsla(from color(from var(--ig-info-400) var(--y-contrast)) h 0 l/1); - --ig-info-500: oklch(from var(--ig-info-seed) 0.5394 min(c * 0.7548, 0.2364) h); - --ig-info-500-contrast: hsla(from color(from var(--ig-info-500) var(--y-contrast)) h 0 l/1); - --ig-info-600: oklch(from var(--ig-info-seed) 0.4709 min(c * 0.7545, 0.2363) h); - --ig-info-600-contrast: hsla(from color(from var(--ig-info-600) var(--y-contrast)) h 0 l/1); - --ig-info-700: oklch(from var(--ig-info-seed) 0.3981 min(c * 0.6608, 0.207) h); - --ig-info-700-contrast: hsla(from color(from var(--ig-info-700) var(--y-contrast)) h 0 l/1); - --ig-info-800: oklch(from var(--ig-info-seed) 0.3148 min(c * 0.4898, 0.1534) h); - --ig-info-800-contrast: hsla(from color(from var(--ig-info-800) var(--y-contrast)) h 0 l/1); - --ig-info-900: oklch(from var(--ig-info-seed) 0.2057 min(c * 0.2698, 0.0845) h); - --ig-info-900-contrast: hsla(from color(from var(--ig-info-900) var(--y-contrast)) h 0 l/1); - --ig-info-seed: blue; - --ig-info-seed-contrast: hsla(from color(from var(--ig-info-seed) var(--y-contrast)) h 0 l/1); - --ig-info-A100: oklch(from var(--ig-info-seed) 0.8909 min(c * 0.1693, 0.053) calc(h + 10.08)); - --ig-info-A100-contrast: hsla(from color(from var(--ig-info-A100) var(--y-contrast)) h 0 l/1); - --ig-info-A200: oklch(from var(--ig-info-seed) 0.7136 min(c * 0.4738, 0.1484) calc(h + 4.928)); - --ig-info-A200-contrast: hsla(from color(from var(--ig-info-A200) var(--y-contrast)) h 0 l/1); - --ig-info-A400: oklch(from var(--ig-info-seed) 0.5968 min(c * 0.6976, 0.2185) calc(h + 1.491)); - --ig-info-A400-contrast: hsla(from color(from var(--ig-info-A400) var(--y-contrast)) h 0 l/1); - --ig-info-A700: oklch(from var(--ig-info-seed) 0.512 min(c * 0.836, 0.2619) h); - --ig-info-A700-contrast: hsla(from color(from var(--ig-info-A700) var(--y-contrast)) h 0 l/1); - --ig-success-50: oklch(from var(--ig-success-seed) 0.9305 min(c * 0.5993, 0.106) h); - --ig-success-50-contrast: hsla(from color(from var(--ig-success-50) var(--y-contrast)) h 0 l/1); - --ig-success-100: oklch(from var(--ig-success-seed) 0.8227 min(c * 1.2544, 0.2219) h); - --ig-success-100-contrast: hsla(from color(from var(--ig-success-100) var(--y-contrast)) h 0 l/1); - --ig-success-200: oklch(from var(--ig-success-seed) 0.7358 min(c * 1.307, 0.2312) h); - --ig-success-200-contrast: hsla(from color(from var(--ig-success-200) var(--y-contrast)) h 0 l/1); - --ig-success-300: oklch(from var(--ig-success-seed) 0.6543 min(c * 1.2323, 0.2179) h); - --ig-success-300-contrast: hsla(from color(from var(--ig-success-300) var(--y-contrast)) h 0 l/1); - --ig-success-400: oklch(from var(--ig-success-seed) 0.5793 min(c * 1.1126, 0.1968) h); - --ig-success-400-contrast: hsla(from color(from var(--ig-success-400) var(--y-contrast)) h 0 l/1); - --ig-success-500: oklch(from var(--ig-success-seed) 0.5083 min(c * 0.9766, 0.1727) h); - --ig-success-500-contrast: hsla(from color(from var(--ig-success-500) var(--y-contrast)) h 0 l/1); - --ig-success-600: oklch(from var(--ig-success-seed) 0.4397 min(c * 0.8297, 0.1467) h); - --ig-success-600-contrast: hsla(from color(from var(--ig-success-600) var(--y-contrast)) h 0 l/1); - --ig-success-700: oklch(from var(--ig-success-seed) 0.371 min(c * 0.6646, 0.1175) h); - --ig-success-700-contrast: hsla(from color(from var(--ig-success-700) var(--y-contrast)) h 0 l/1); - --ig-success-800: oklch(from var(--ig-success-seed) 0.2958 min(c * 0.4781, 0.0846) h); - --ig-success-800-contrast: hsla(from color(from var(--ig-success-800) var(--y-contrast)) h 0 l/1); - --ig-success-900: oklch(from var(--ig-success-seed) 0.1964 min(c * 0.2645, 0.0468) h); - --ig-success-900-contrast: hsla(from color(from var(--ig-success-900) var(--y-contrast)) h 0 l/1); - --ig-success-seed: green; - --ig-success-seed-contrast: hsla(from color(from var(--ig-success-seed) var(--y-contrast)) h 0 l/1); - --ig-success-A100: oklch(from var(--ig-success-seed) 0.8632 min(c * 1.5429, 0.2729) h); - --ig-success-A100-contrast: hsla(from color(from var(--ig-success-A100) var(--y-contrast)) h 0 l/1); - --ig-success-A200: oklch(from var(--ig-success-seed) 0.686 min(c * 1.3198, 0.2334) h); - --ig-success-A200-contrast: hsla(from color(from var(--ig-success-A200) var(--y-contrast)) h 0 l/1); - --ig-success-A400: oklch(from var(--ig-success-seed) 0.5668 min(c * 1.0906, 0.1929) h); - --ig-success-A400-contrast: hsla(from color(from var(--ig-success-A400) var(--y-contrast)) h 0 l/1); - --ig-success-A700: oklch(from var(--ig-success-seed) 0.4769 min(c * 0.9176, 0.1623) h); - --ig-success-A700-contrast: hsla(from color(from var(--ig-success-A700) var(--y-contrast)) h 0 l/1); - --ig-warn-50: oklch(from var(--ig-warn-seed) 0.946 min(c * 0.1822, 0.0312) h); - --ig-warn-50-contrast: hsla(from color(from var(--ig-warn-50) var(--y-contrast)) h 0 l/1); - --ig-warn-100: oklch(from var(--ig-warn-seed) 0.8514 min(c * 0.5754, 0.0984) h); - --ig-warn-100-contrast: hsla(from color(from var(--ig-warn-100) var(--y-contrast)) h 0 l/1); - --ig-warn-200: oklch(from var(--ig-warn-seed) 0.7625 min(c * 0.8096, 0.1385) h); - --ig-warn-200-contrast: hsla(from color(from var(--ig-warn-200) var(--y-contrast)) h 0 l/1); - --ig-warn-300: oklch(from var(--ig-warn-seed) 0.6821 min(c * 0.8243, 0.141) h); - --ig-warn-300-contrast: hsla(from color(from var(--ig-warn-300) var(--y-contrast)) h 0 l/1); - --ig-warn-400: oklch(from var(--ig-warn-seed) 0.6047 min(c * 0.757, 0.1295) h); - --ig-warn-400-contrast: hsla(from color(from var(--ig-warn-400) var(--y-contrast)) h 0 l/1); - --ig-warn-500: oklch(from var(--ig-warn-seed) 0.5307 min(c * 0.6674, 0.1141) h); - --ig-warn-500-contrast: hsla(from color(from var(--ig-warn-500) var(--y-contrast)) h 0 l/1); - --ig-warn-600: oklch(from var(--ig-warn-seed) 0.4588 min(c * 0.5673, 0.097) h); - --ig-warn-600-contrast: hsla(from color(from var(--ig-warn-600) var(--y-contrast)) h 0 l/1); - --ig-warn-700: oklch(from var(--ig-warn-seed) 0.3861 min(c * 0.4534, 0.0775) h); - --ig-warn-700-contrast: hsla(from color(from var(--ig-warn-700) var(--y-contrast)) h 0 l/1); - --ig-warn-800: oklch(from var(--ig-warn-seed) 0.3067 min(c * 0.3249, 0.0556) h); - --ig-warn-800-contrast: hsla(from color(from var(--ig-warn-800) var(--y-contrast)) h 0 l/1); - --ig-warn-900: oklch(from var(--ig-warn-seed) 0.2023 min(c * 0.1786, 0.0306) h); - --ig-warn-900-contrast: hsla(from color(from var(--ig-warn-900) var(--y-contrast)) h 0 l/1); - --ig-warn-seed: orange; - --ig-warn-seed-contrast: hsla(from color(from var(--ig-warn-seed) var(--y-contrast)) h 0 l/1); - --ig-warn-A100: oklch(from var(--ig-warn-seed) 0.8929 min(c * 0.496, 0.0848) calc(h + 1.551)); - --ig-warn-A100-contrast: hsla(from color(from var(--ig-warn-A100) var(--y-contrast)) h 0 l/1); - --ig-warn-A200: oklch(from var(--ig-warn-seed) 0.7161 min(c * 0.8994, 0.1538) h); - --ig-warn-A200-contrast: hsla(from color(from var(--ig-warn-A200) var(--y-contrast)) h 0 l/1); - --ig-warn-A400: oklch(from var(--ig-warn-seed) 0.5917 min(c * 0.7464, 0.1277) h); - --ig-warn-A400-contrast: hsla(from color(from var(--ig-warn-A400) var(--y-contrast)) h 0 l/1); - --ig-warn-A700: oklch(from var(--ig-warn-seed) 0.4975 min(c * 0.6276, 0.1073) h); - --ig-warn-A700-contrast: hsla(from color(from var(--ig-warn-A700) var(--y-contrast)) h 0 l/1); - --ig-error-50: oklch(from var(--ig-error-seed) 0.9437 min(c * 0.106, 0.0273) h); - --ig-error-50-contrast: hsla(from color(from var(--ig-error-50) var(--y-contrast)) h 0 l/1); - --ig-error-100: oklch(from var(--ig-error-seed) 0.8531 min(c * 0.3108, 0.0801) calc(h + 0.399)); - --ig-error-100-contrast: hsla(from color(from var(--ig-error-100) var(--y-contrast)) h 0 l/1); - --ig-error-200: oklch(from var(--ig-error-seed) 0.7729 min(c * 0.5202, 0.134) calc(h + 0.309)); - --ig-error-200-contrast: hsla(from color(from var(--ig-error-200) var(--y-contrast)) h 0 l/1); - --ig-error-300: oklch(from var(--ig-error-seed) 0.6976 min(c * 0.7485, 0.1929) h); - --ig-error-300-contrast: hsla(from color(from var(--ig-error-300) var(--y-contrast)) h 0 l/1); - --ig-error-400: oklch(from var(--ig-error-seed) 0.6235 min(c * 0.8417, 0.2169) h); - --ig-error-400-contrast: hsla(from color(from var(--ig-error-400) var(--y-contrast)) h 0 l/1); - --ig-error-500: oklch(from var(--ig-error-seed) 0.5497 min(c * 0.823, 0.2121) h); - --ig-error-500-contrast: hsla(from color(from var(--ig-error-500) var(--y-contrast)) h 0 l/1); - --ig-error-600: oklch(from var(--ig-error-seed) 0.4764 min(c * 0.7291, 0.1879) h); - --ig-error-600-contrast: hsla(from color(from var(--ig-error-600) var(--y-contrast)) h 0 l/1); - --ig-error-700: oklch(from var(--ig-error-seed) 0.4004 min(c * 0.59, 0.152) h); - --ig-error-700-contrast: hsla(from color(from var(--ig-error-700) var(--y-contrast)) h 0 l/1); - --ig-error-800: oklch(from var(--ig-error-seed) 0.3169 min(c * 0.4232, 0.1091) h); - --ig-error-800-contrast: hsla(from color(from var(--ig-error-800) var(--y-contrast)) h 0 l/1); - --ig-error-900: oklch(from var(--ig-error-seed) 0.2078 min(c * 0.2316, 0.0597) h); - --ig-error-900-contrast: hsla(from color(from var(--ig-error-900) var(--y-contrast)) h 0 l/1); - --ig-error-seed: red; - --ig-error-seed-contrast: hsla(from color(from var(--ig-error-seed) var(--y-contrast)) h 0 l/1); - --ig-error-A100: oklch(from var(--ig-error-seed) 0.902 min(c * 0.1992, 0.0513) calc(h + 2.141)); - --ig-error-A100-contrast: hsla(from color(from var(--ig-error-A100) var(--y-contrast)) h 0 l/1); - --ig-error-A200: oklch(from var(--ig-error-seed) 0.7258 min(c * 0.6599, 0.17) calc(h + 0.27)); - --ig-error-A200-contrast: hsla(from color(from var(--ig-error-A200) var(--y-contrast)) h 0 l/1); - --ig-error-A400: oklch(from var(--ig-error-seed) 0.6128 min(c * 0.9204, 0.2372) h); - --ig-error-A400-contrast: hsla(from color(from var(--ig-error-A400) var(--y-contrast)) h 0 l/1); - --ig-error-A700: oklch(from var(--ig-error-seed) 0.518 min(c * 0.8222, 0.2119) h); - --ig-error-A700-contrast: hsla(from color(from var(--ig-error-A700) var(--y-contrast)) h 0 l/1); -} - -/* END_OUTPUT */ -/* CONTAINED */ -:root { - --ig-primary-seed: #09f; - --ig-gray-seed: #000; -} - -/* END_CONTAINED */ -/* END_ASSERT */ -/* */ -/* */ -/* */ -/* */ -/* # Module: Typography */ -/* -------------------- */ -/* # Module: Typography :: operations */ -/* ---------------------------------- */ -/* Test: should convert pixel numbers to rem */ -/* ✔ [assert-equal] should convert pixel numbers to rem */ -/* */ -/* Test: should convert unitless numbers to rem */ -/* ✔ [assert-equal] should convert unitless numbers to rem */ -/* */ -/* Test: should convert pixel numbers to em */ -/* ✔ [assert-equal] should convert pixel numbers to em */ -/* */ -/* Test: should convert unitless numbers to em */ -/* ✔ [assert-equal] should convert unitless numbers to em */ -/* */ -/* Test: should convert relative unit numbers to pixels */ -/* ✔ [assert-equal] should convert relative unit numbers to pixels */ -/* ✔ [assert-equal] should convert relative unit numbers to pixels */ -/* */ -/* Test: should convert unitless numbers to pixels */ -/* ✔ [assert-equal] should convert unitless numbers to pixels */ -/* */ -/* */ -/* # Module: Typography :: generation */ -/* ---------------------------------- */ -/* Test: should produce a map of default type style rules matching the ITypeStyle map */ -/* ✔ [assert-equal] should produce a map of default type style rules matching the ITypeStyle map */ -/* ✔ [assert-equal] should produce a map of default type style rules matching the ITypeStyle map */ -/* ✔ [assert-equal] should produce a map of default type style rules matching the ITypeStyle map */ -/* ✔ [assert-equal] should produce a map of default type style rules matching the ITypeStyle map */ -/* ✔ [assert-equal] should produce a map of default type style rules matching the ITypeStyle map */ -/* ✔ [assert-equal] should produce a map of default type style rules matching the ITypeStyle map */ -/* ✔ [assert-equal] should produce a map of default type style rules matching the ITypeStyle map */ -/* ✔ [assert-equal] should produce a map of default type style rules matching the ITypeStyle map */ -/* ✔ [assert-equal] should produce a map of default type style rules matching the ITypeStyle map */ -/* */ -/* Test: should only produce a map of allowed type style rules */ -/* ✔ [assert-equal] should only produce a map of allowed type style rules */ -/* ✔ [assert-equal] should only produce a map of allowed type style rules */ -/* ✔ [assert-equal] should only produce a map of allowed type style rules */ -/* ✔ [assert-equal] should only produce a map of allowed type style rules */ -/* ✔ [assert-equal] should only produce a map of allowed type style rules */ -/* ✔ [assert-equal] should only produce a map of allowed type style rules */ -/* ✔ [assert-equal] should only produce a map of allowed type style rules */ -/* ✔ [assert-equal] should only produce a map of allowed type style rules */ -/* ✔ [assert-equal] should only produce a map of allowed type style rules */ -/* ✔ [assert-false] should only produce a map of allowed type style rules */ -/* */ -/* Test: should produce a type scale map of type style values for each category */ -/* ✔ [assert-equal] should produce a type scale map of type style values for each category */ -/* ✔ [assert-equal] should produce a type scale map of type style values for each category */ -/* ✔ [assert-equal] should produce a type scale map of type style values for each category */ -/* ✔ [assert-equal] should produce a type scale map of type style values for each category */ -/* ✔ [assert-equal] should produce a type scale map of type style values for each category */ -/* ✔ [assert-equal] should produce a type scale map of type style values for each category */ -/* ✔ [assert-equal] should produce a type scale map of type style values for each category */ -/* ✔ [assert-equal] should produce a type scale map of type style values for each category */ -/* ✔ [assert-equal] should produce a type scale map of type style values for each category */ -/* ✔ [assert-equal] should produce a type scale map of type style values for each category */ -/* ✔ [assert-equal] should produce a type scale map of type style values for each category */ -/* ✔ [assert-equal] should produce a type scale map of type style values for each category */ -/* ✔ [assert-equal] should produce a type scale map of type style values for each category */ -/* ✔ [assert-equal] should produce a type scale map of type style values for each category */ -/* */ -/* Test: should retreive type styles from a scale */ -/* ✔ [assert-equal] should retreive type styles from a scale */ -/* ✔ [assert-equal] should retreive type styles from a scale */ -/* ✔ [assert-equal] should retreive type styles from a scale */ -/* ✔ [assert-equal] should retreive type styles from a scale */ -/* ✔ [assert-equal] should retreive type styles from a scale */ -/* ✔ [assert-equal] should retreive type styles from a scale */ -/* ✔ [assert-equal] should retreive type styles from a scale */ -/* ✔ [assert-equal] should retreive type styles from a scale */ -/* ✔ [assert-equal] should retreive type styles from a scale */ -/* */ -/* Test: generates CSS variables from a type style map without font-family if its value is "inherit" */ -/* ASSERT: */ -/* OUTPUT */ -.test-output { - --ig-h1-font-size: 96px; - --ig-h1-font-weight: normal; - --ig-h1-font-style: normal; - --ig-h1-line-height: normal; - --ig-h1-letter-spacing: normal; - --ig-h1-text-transform: none; - --ig-h1-margin-top: 0; - --ig-h1-margin-bottom: 0; -} - -/* END_OUTPUT */ -/* EXPECTED */ -.test-output { - --ig-h1-font-size: 96px; - --ig-h1-font-weight: normal; - --ig-h1-font-style: normal; - --ig-h1-line-height: normal; - --ig-h1-letter-spacing: normal; - --ig-h1-text-transform: none; - --ig-h1-margin-top: 0; - --ig-h1-margin-bottom: 0; -} - -/* END_EXPECTED */ -/* END_ASSERT */ -/* */ -/* Test: generates CSS variables for a type style map with font-family if its value is not "inherit" */ -/* ASSERT: */ -/* OUTPUT */ -.test-output { - --ig-h1-font-family: 'American Typewriter', serif; - --ig-h1-font-size: 96px; - --ig-h1-font-weight: normal; - --ig-h1-font-style: normal; - --ig-h1-line-height: normal; - --ig-h1-letter-spacing: normal; - --ig-h1-text-transform: none; - --ig-h1-margin-top: 0; - --ig-h1-margin-bottom: 0; -} - -/* END_OUTPUT */ -/* EXPECTED */ -.test-output { - --ig-h1-font-family: 'American Typewriter', serif; - --ig-h1-font-size: 96px; - --ig-h1-font-weight: normal; - --ig-h1-font-style: normal; - --ig-h1-line-height: normal; - --ig-h1-letter-spacing: normal; - --ig-h1-text-transform: none; - --ig-h1-margin-top: 0; - --ig-h1-margin-bottom: 0; -} - -/* END_EXPECTED */ -/* END_ASSERT */ -/* */ -/* Test: should include all styles from a custom type category */ -/* ASSERT: */ -/* OUTPUT */ -.test-output { - font-family: var(--ig-calendar-labels-font-family, var(--ig-font-family)); - font-size: var(--ig-calendar-labels-font-size); - font-weight: var(--ig-calendar-labels-font-weight); - font-style: var(--ig-calendar-labels-font-style); - line-height: var(--ig-calendar-labels-line-height); - letter-spacing: var(--ig-calendar-labels-letter-spacing); - text-transform: var(--ig-calendar-labels-text-transform); - margin-top: var(--ig-calendar-labels-margin-top); - margin-bottom: var(--ig-calendar-labels-margin-bottom); -} - -/* END_OUTPUT */ -/* EXPECTED */ -.test-output { - font-family: var(--ig-calendar-labels-font-family, var(--ig-font-family)); - font-size: var(--ig-calendar-labels-font-size); - font-weight: var(--ig-calendar-labels-font-weight); - font-style: var(--ig-calendar-labels-font-style); - line-height: var(--ig-calendar-labels-line-height); - letter-spacing: var(--ig-calendar-labels-letter-spacing); - text-transform: var(--ig-calendar-labels-text-transform); - margin-top: var(--ig-calendar-labels-margin-top); - margin-bottom: var(--ig-calendar-labels-margin-bottom); -} - -/* END_EXPECTED */ -/* END_ASSERT */ -/* */ -/* Test: should include type styles with CSS var refs as values for a specific category */ -/* ASSERT: */ -/* OUTPUT */ -.test-output .my-h1 { - font-family: var(--ig-h1-font-family, var(--ig-font-family)); - font-size: var(--ig-h1-font-size); - font-weight: var(--ig-h1-font-weight); - font-style: var(--ig-h1-font-style); - line-height: var(--ig-h1-line-height); - letter-spacing: var(--ig-h1-letter-spacing); - text-transform: var(--ig-h1-text-transform); - margin-top: var(--ig-h1-margin-top); - margin-bottom: var(--ig-h1-margin-bottom); -} - -/* END_OUTPUT */ -/* EXPECTED */ -.test-output .my-h1 { - font-family: var(--ig-h1-font-family, var(--ig-font-family)); - font-size: var(--ig-h1-font-size); - font-weight: var(--ig-h1-font-weight); - font-style: var(--ig-h1-font-style); - line-height: var(--ig-h1-line-height); - letter-spacing: var(--ig-h1-letter-spacing); - text-transform: var(--ig-h1-text-transform); - margin-top: var(--ig-h1-margin-top); - margin-bottom: var(--ig-h1-margin-bottom); -} - -/* END_EXPECTED */ -/* END_ASSERT */ -/* */ -/* Test: should include CSS classes with style rules for all categories in a type scale */ -/* ASSERT: */ -/* OUTPUT */ -.ig-typography .ig-typography__h1 { - font-family: var(--ig-h1-font-family, var(--ig-font-family)); - font-size: var(--ig-h1-font-size); - font-weight: var(--ig-h1-font-weight); - font-style: var(--ig-h1-font-style); - line-height: var(--ig-h1-line-height); - letter-spacing: var(--ig-h1-letter-spacing); - text-transform: var(--ig-h1-text-transform); - margin-top: var(--ig-h1-margin-top); - margin-bottom: var(--ig-h1-margin-bottom); -} -.ig-typography .ig-typography__h2 { - font-family: var(--ig-h2-font-family, var(--ig-font-family)); - font-size: var(--ig-h2-font-size); - font-weight: var(--ig-h2-font-weight); - font-style: var(--ig-h2-font-style); - line-height: var(--ig-h2-line-height); - letter-spacing: var(--ig-h2-letter-spacing); - text-transform: var(--ig-h2-text-transform); - margin-top: var(--ig-h2-margin-top); - margin-bottom: var(--ig-h2-margin-bottom); -} -.ig-typography .ig-typography__h3 { - font-family: var(--ig-h3-font-family, var(--ig-font-family)); - font-size: var(--ig-h3-font-size); - font-weight: var(--ig-h3-font-weight); - font-style: var(--ig-h3-font-style); - line-height: var(--ig-h3-line-height); - letter-spacing: var(--ig-h3-letter-spacing); - text-transform: var(--ig-h3-text-transform); - margin-top: var(--ig-h3-margin-top); - margin-bottom: var(--ig-h3-margin-bottom); -} -.ig-typography .ig-typography__h4 { - font-family: var(--ig-h4-font-family, var(--ig-font-family)); - font-size: var(--ig-h4-font-size); - font-weight: var(--ig-h4-font-weight); - font-style: var(--ig-h4-font-style); - line-height: var(--ig-h4-line-height); - letter-spacing: var(--ig-h4-letter-spacing); - text-transform: var(--ig-h4-text-transform); - margin-top: var(--ig-h4-margin-top); - margin-bottom: var(--ig-h4-margin-bottom); -} -.ig-typography .ig-typography__h5 { - font-family: var(--ig-h5-font-family, var(--ig-font-family)); - font-size: var(--ig-h5-font-size); - font-weight: var(--ig-h5-font-weight); - font-style: var(--ig-h5-font-style); - line-height: var(--ig-h5-line-height); - letter-spacing: var(--ig-h5-letter-spacing); - text-transform: var(--ig-h5-text-transform); - margin-top: var(--ig-h5-margin-top); - margin-bottom: var(--ig-h5-margin-bottom); -} -.ig-typography .ig-typography__h6 { - font-family: var(--ig-h6-font-family, var(--ig-font-family)); - font-size: var(--ig-h6-font-size); - font-weight: var(--ig-h6-font-weight); - font-style: var(--ig-h6-font-style); - line-height: var(--ig-h6-line-height); - letter-spacing: var(--ig-h6-letter-spacing); - text-transform: var(--ig-h6-text-transform); - margin-top: var(--ig-h6-margin-top); - margin-bottom: var(--ig-h6-margin-bottom); -} -.ig-typography .ig-typography__subtitle-1 { - font-family: var(--ig-subtitle-1-font-family, var(--ig-font-family)); - font-size: var(--ig-subtitle-1-font-size); - font-weight: var(--ig-subtitle-1-font-weight); - font-style: var(--ig-subtitle-1-font-style); - line-height: var(--ig-subtitle-1-line-height); - letter-spacing: var(--ig-subtitle-1-letter-spacing); - text-transform: var(--ig-subtitle-1-text-transform); - margin-top: var(--ig-subtitle-1-margin-top); - margin-bottom: var(--ig-subtitle-1-margin-bottom); -} -.ig-typography .ig-typography__subtitle-2 { - font-family: var(--ig-subtitle-2-font-family, var(--ig-font-family)); - font-size: var(--ig-subtitle-2-font-size); - font-weight: var(--ig-subtitle-2-font-weight); - font-style: var(--ig-subtitle-2-font-style); - line-height: var(--ig-subtitle-2-line-height); - letter-spacing: var(--ig-subtitle-2-letter-spacing); - text-transform: var(--ig-subtitle-2-text-transform); - margin-top: var(--ig-subtitle-2-margin-top); - margin-bottom: var(--ig-subtitle-2-margin-bottom); -} -.ig-typography .ig-typography__body-1 { - font-family: var(--ig-body-1-font-family, var(--ig-font-family)); - font-size: var(--ig-body-1-font-size); - font-weight: var(--ig-body-1-font-weight); - font-style: var(--ig-body-1-font-style); - line-height: var(--ig-body-1-line-height); - letter-spacing: var(--ig-body-1-letter-spacing); - text-transform: var(--ig-body-1-text-transform); - margin-top: var(--ig-body-1-margin-top); - margin-bottom: var(--ig-body-1-margin-bottom); -} -.ig-typography .ig-typography__body-2 { - font-family: var(--ig-body-2-font-family, var(--ig-font-family)); - font-size: var(--ig-body-2-font-size); - font-weight: var(--ig-body-2-font-weight); - font-style: var(--ig-body-2-font-style); - line-height: var(--ig-body-2-line-height); - letter-spacing: var(--ig-body-2-letter-spacing); - text-transform: var(--ig-body-2-text-transform); - margin-top: var(--ig-body-2-margin-top); - margin-bottom: var(--ig-body-2-margin-bottom); -} -.ig-typography .ig-typography__button { - font-family: var(--ig-button-font-family, var(--ig-font-family)); - font-size: var(--ig-button-font-size); - font-weight: var(--ig-button-font-weight); - font-style: var(--ig-button-font-style); - line-height: var(--ig-button-line-height); - letter-spacing: var(--ig-button-letter-spacing); - text-transform: var(--ig-button-text-transform); - margin-top: var(--ig-button-margin-top); - margin-bottom: var(--ig-button-margin-bottom); -} -.ig-typography .ig-typography__caption { - font-family: var(--ig-caption-font-family, var(--ig-font-family)); - font-size: var(--ig-caption-font-size); - font-weight: var(--ig-caption-font-weight); - font-style: var(--ig-caption-font-style); - line-height: var(--ig-caption-line-height); - letter-spacing: var(--ig-caption-letter-spacing); - text-transform: var(--ig-caption-text-transform); - margin-top: var(--ig-caption-margin-top); - margin-bottom: var(--ig-caption-margin-bottom); -} -.ig-typography .ig-typography__overline { - font-family: var(--ig-overline-font-family, var(--ig-font-family)); - font-size: var(--ig-overline-font-size); - font-weight: var(--ig-overline-font-weight); - font-style: var(--ig-overline-font-style); - line-height: var(--ig-overline-line-height); - letter-spacing: var(--ig-overline-letter-spacing); - text-transform: var(--ig-overline-text-transform); - margin-top: var(--ig-overline-margin-top); - margin-bottom: var(--ig-overline-margin-bottom); -} - -/* END_OUTPUT */ -/* EXPECTED */ -.ig-typography .ig-typography__h1 { - font-family: var(--ig-h1-font-family, var(--ig-font-family)); - font-size: var(--ig-h1-font-size); - font-weight: var(--ig-h1-font-weight); - font-style: var(--ig-h1-font-style); - line-height: var(--ig-h1-line-height); - letter-spacing: var(--ig-h1-letter-spacing); - text-transform: var(--ig-h1-text-transform); - margin-top: var(--ig-h1-margin-top); - margin-bottom: var(--ig-h1-margin-bottom); -} - -.ig-typography .ig-typography__h2 { - font-family: var(--ig-h2-font-family, var(--ig-font-family)); - font-size: var(--ig-h2-font-size); - font-weight: var(--ig-h2-font-weight); - font-style: var(--ig-h2-font-style); - line-height: var(--ig-h2-line-height); - letter-spacing: var(--ig-h2-letter-spacing); - text-transform: var(--ig-h2-text-transform); - margin-top: var(--ig-h2-margin-top); - margin-bottom: var(--ig-h2-margin-bottom); -} - -.ig-typography .ig-typography__h3 { - font-family: var(--ig-h3-font-family, var(--ig-font-family)); - font-size: var(--ig-h3-font-size); - font-weight: var(--ig-h3-font-weight); - font-style: var(--ig-h3-font-style); - line-height: var(--ig-h3-line-height); - letter-spacing: var(--ig-h3-letter-spacing); - text-transform: var(--ig-h3-text-transform); - margin-top: var(--ig-h3-margin-top); - margin-bottom: var(--ig-h3-margin-bottom); -} - -.ig-typography .ig-typography__h4 { - font-family: var(--ig-h4-font-family, var(--ig-font-family)); - font-size: var(--ig-h4-font-size); - font-weight: var(--ig-h4-font-weight); - font-style: var(--ig-h4-font-style); - line-height: var(--ig-h4-line-height); - letter-spacing: var(--ig-h4-letter-spacing); - text-transform: var(--ig-h4-text-transform); - margin-top: var(--ig-h4-margin-top); - margin-bottom: var(--ig-h4-margin-bottom); -} - -.ig-typography .ig-typography__h5 { - font-family: var(--ig-h5-font-family, var(--ig-font-family)); - font-size: var(--ig-h5-font-size); - font-weight: var(--ig-h5-font-weight); - font-style: var(--ig-h5-font-style); - line-height: var(--ig-h5-line-height); - letter-spacing: var(--ig-h5-letter-spacing); - text-transform: var(--ig-h5-text-transform); - margin-top: var(--ig-h5-margin-top); - margin-bottom: var(--ig-h5-margin-bottom); -} - -.ig-typography .ig-typography__h6 { - font-family: var(--ig-h6-font-family, var(--ig-font-family)); - font-size: var(--ig-h6-font-size); - font-weight: var(--ig-h6-font-weight); - font-style: var(--ig-h6-font-style); - line-height: var(--ig-h6-line-height); - letter-spacing: var(--ig-h6-letter-spacing); - text-transform: var(--ig-h6-text-transform); - margin-top: var(--ig-h6-margin-top); - margin-bottom: var(--ig-h6-margin-bottom); -} - -.ig-typography .ig-typography__subtitle-1 { - font-family: var(--ig-subtitle-1-font-family, var(--ig-font-family)); - font-size: var(--ig-subtitle-1-font-size); - font-weight: var(--ig-subtitle-1-font-weight); - font-style: var(--ig-subtitle-1-font-style); - line-height: var(--ig-subtitle-1-line-height); - letter-spacing: var(--ig-subtitle-1-letter-spacing); - text-transform: var(--ig-subtitle-1-text-transform); - margin-top: var(--ig-subtitle-1-margin-top); - margin-bottom: var(--ig-subtitle-1-margin-bottom); -} - -.ig-typography .ig-typography__subtitle-2 { - font-family: var(--ig-subtitle-2-font-family, var(--ig-font-family)); - font-size: var(--ig-subtitle-2-font-size); - font-weight: var(--ig-subtitle-2-font-weight); - font-style: var(--ig-subtitle-2-font-style); - line-height: var(--ig-subtitle-2-line-height); - letter-spacing: var(--ig-subtitle-2-letter-spacing); - text-transform: var(--ig-subtitle-2-text-transform); - margin-top: var(--ig-subtitle-2-margin-top); - margin-bottom: var(--ig-subtitle-2-margin-bottom); -} - -.ig-typography .ig-typography__body-1 { - font-family: var(--ig-body-1-font-family, var(--ig-font-family)); - font-size: var(--ig-body-1-font-size); - font-weight: var(--ig-body-1-font-weight); - font-style: var(--ig-body-1-font-style); - line-height: var(--ig-body-1-line-height); - letter-spacing: var(--ig-body-1-letter-spacing); - text-transform: var(--ig-body-1-text-transform); - margin-top: var(--ig-body-1-margin-top); - margin-bottom: var(--ig-body-1-margin-bottom); -} - -.ig-typography .ig-typography__body-2 { - font-family: var(--ig-body-2-font-family, var(--ig-font-family)); - font-size: var(--ig-body-2-font-size); - font-weight: var(--ig-body-2-font-weight); - font-style: var(--ig-body-2-font-style); - line-height: var(--ig-body-2-line-height); - letter-spacing: var(--ig-body-2-letter-spacing); - text-transform: var(--ig-body-2-text-transform); - margin-top: var(--ig-body-2-margin-top); - margin-bottom: var(--ig-body-2-margin-bottom); -} - -.ig-typography .ig-typography__button { - font-family: var(--ig-button-font-family, var(--ig-font-family)); - font-size: var(--ig-button-font-size); - font-weight: var(--ig-button-font-weight); - font-style: var(--ig-button-font-style); - line-height: var(--ig-button-line-height); - letter-spacing: var(--ig-button-letter-spacing); - text-transform: var(--ig-button-text-transform); - margin-top: var(--ig-button-margin-top); - margin-bottom: var(--ig-button-margin-bottom); -} - -.ig-typography .ig-typography__caption { - font-family: var(--ig-caption-font-family, var(--ig-font-family)); - font-size: var(--ig-caption-font-size); - font-weight: var(--ig-caption-font-weight); - font-style: var(--ig-caption-font-style); - line-height: var(--ig-caption-line-height); - letter-spacing: var(--ig-caption-letter-spacing); - text-transform: var(--ig-caption-text-transform); - margin-top: var(--ig-caption-margin-top); - margin-bottom: var(--ig-caption-margin-bottom); -} - -.ig-typography .ig-typography__overline { - font-family: var(--ig-overline-font-family, var(--ig-font-family)); - font-size: var(--ig-overline-font-size); - font-weight: var(--ig-overline-font-weight); - font-style: var(--ig-overline-font-style); - line-height: var(--ig-overline-line-height); - letter-spacing: var(--ig-overline-letter-spacing); - text-transform: var(--ig-overline-text-transform); - margin-top: var(--ig-overline-margin-top); - margin-bottom: var(--ig-overline-margin-bottom); -} - -/* END_EXPECTED */ -/* END_ASSERT */ -/* */ -/* Test: should include CSS headeing and paragraph style rules for mapped categories in a type scale, unwrapped by default */ -/* ASSERT: */ -/* OUTPUT */ -.test-output h1 { - font-family: var(--ig-h1-font-family, var(--ig-font-family)); - font-size: var(--ig-h1-font-size); - font-weight: var(--ig-h1-font-weight); - font-style: var(--ig-h1-font-style); - line-height: var(--ig-h1-line-height); - letter-spacing: var(--ig-h1-letter-spacing); - text-transform: var(--ig-h1-text-transform); - margin-top: var(--ig-h1-margin-top); - margin-bottom: var(--ig-h1-margin-bottom); -} -.test-output h2 { - font-family: var(--ig-h2-font-family, var(--ig-font-family)); - font-size: var(--ig-h2-font-size); - font-weight: var(--ig-h2-font-weight); - font-style: var(--ig-h2-font-style); - line-height: var(--ig-h2-line-height); - letter-spacing: var(--ig-h2-letter-spacing); - text-transform: var(--ig-h2-text-transform); - margin-top: var(--ig-h2-margin-top); - margin-bottom: var(--ig-h2-margin-bottom); -} -.test-output h3 { - font-family: var(--ig-h3-font-family, var(--ig-font-family)); - font-size: var(--ig-h3-font-size); - font-weight: var(--ig-h3-font-weight); - font-style: var(--ig-h3-font-style); - line-height: var(--ig-h3-line-height); - letter-spacing: var(--ig-h3-letter-spacing); - text-transform: var(--ig-h3-text-transform); - margin-top: var(--ig-h3-margin-top); - margin-bottom: var(--ig-h3-margin-bottom); -} -.test-output h4 { - font-family: var(--ig-h4-font-family, var(--ig-font-family)); - font-size: var(--ig-h4-font-size); - font-weight: var(--ig-h4-font-weight); - font-style: var(--ig-h4-font-style); - line-height: var(--ig-h4-line-height); - letter-spacing: var(--ig-h4-letter-spacing); - text-transform: var(--ig-h4-text-transform); - margin-top: var(--ig-h4-margin-top); - margin-bottom: var(--ig-h4-margin-bottom); -} -.test-output h5 { - font-family: var(--ig-h5-font-family, var(--ig-font-family)); - font-size: var(--ig-h5-font-size); - font-weight: var(--ig-h5-font-weight); - font-style: var(--ig-h5-font-style); - line-height: var(--ig-h5-line-height); - letter-spacing: var(--ig-h5-letter-spacing); - text-transform: var(--ig-h5-text-transform); - margin-top: var(--ig-h5-margin-top); - margin-bottom: var(--ig-h5-margin-bottom); -} -.test-output h6 { - font-family: var(--ig-h6-font-family, var(--ig-font-family)); - font-size: var(--ig-h6-font-size); - font-weight: var(--ig-h6-font-weight); - font-style: var(--ig-h6-font-style); - line-height: var(--ig-h6-line-height); - letter-spacing: var(--ig-h6-letter-spacing); - text-transform: var(--ig-h6-text-transform); - margin-top: var(--ig-h6-margin-top); - margin-bottom: var(--ig-h6-margin-bottom); -} -.test-output p { - font-family: var(--ig-body-1-font-family, var(--ig-font-family)); - font-size: var(--ig-body-1-font-size); - font-weight: var(--ig-body-1-font-weight); - font-style: var(--ig-body-1-font-style); - line-height: var(--ig-body-1-line-height); - letter-spacing: var(--ig-body-1-letter-spacing); - text-transform: var(--ig-body-1-text-transform); - margin-top: var(--ig-body-1-margin-top); - margin-bottom: var(--ig-body-1-margin-bottom); -} - -/* END_OUTPUT */ -/* EXPECTED */ -.test-output h1 { - font-family: var(--ig-h1-font-family, var(--ig-font-family)); - font-size: var(--ig-h1-font-size); - font-weight: var(--ig-h1-font-weight); - font-style: var(--ig-h1-font-style); - line-height: var(--ig-h1-line-height); - letter-spacing: var(--ig-h1-letter-spacing); - text-transform: var(--ig-h1-text-transform); - margin-top: var(--ig-h1-margin-top); - margin-bottom: var(--ig-h1-margin-bottom); -} -.test-output h2 { - font-family: var(--ig-h2-font-family, var(--ig-font-family)); - font-size: var(--ig-h2-font-size); - font-weight: var(--ig-h2-font-weight); - font-style: var(--ig-h2-font-style); - line-height: var(--ig-h2-line-height); - letter-spacing: var(--ig-h2-letter-spacing); - text-transform: var(--ig-h2-text-transform); - margin-top: var(--ig-h2-margin-top); - margin-bottom: var(--ig-h2-margin-bottom); -} -.test-output h3 { - font-family: var(--ig-h3-font-family, var(--ig-font-family)); - font-size: var(--ig-h3-font-size); - font-weight: var(--ig-h3-font-weight); - font-style: var(--ig-h3-font-style); - line-height: var(--ig-h3-line-height); - letter-spacing: var(--ig-h3-letter-spacing); - text-transform: var(--ig-h3-text-transform); - margin-top: var(--ig-h3-margin-top); - margin-bottom: var(--ig-h3-margin-bottom); -} -.test-output h4 { - font-family: var(--ig-h4-font-family, var(--ig-font-family)); - font-size: var(--ig-h4-font-size); - font-weight: var(--ig-h4-font-weight); - font-style: var(--ig-h4-font-style); - line-height: var(--ig-h4-line-height); - letter-spacing: var(--ig-h4-letter-spacing); - text-transform: var(--ig-h4-text-transform); - margin-top: var(--ig-h4-margin-top); - margin-bottom: var(--ig-h4-margin-bottom); -} -.test-output h5 { - font-family: var(--ig-h5-font-family, var(--ig-font-family)); - font-size: var(--ig-h5-font-size); - font-weight: var(--ig-h5-font-weight); - font-style: var(--ig-h5-font-style); - line-height: var(--ig-h5-line-height); - letter-spacing: var(--ig-h5-letter-spacing); - text-transform: var(--ig-h5-text-transform); - margin-top: var(--ig-h5-margin-top); - margin-bottom: var(--ig-h5-margin-bottom); -} -.test-output h6 { - font-family: var(--ig-h6-font-family, var(--ig-font-family)); - font-size: var(--ig-h6-font-size); - font-weight: var(--ig-h6-font-weight); - font-style: var(--ig-h6-font-style); - line-height: var(--ig-h6-line-height); - letter-spacing: var(--ig-h6-letter-spacing); - text-transform: var(--ig-h6-text-transform); - margin-top: var(--ig-h6-margin-top); - margin-bottom: var(--ig-h6-margin-bottom); -} -.test-output p { - font-family: var(--ig-body-1-font-family, var(--ig-font-family)); - font-size: var(--ig-body-1-font-size); - font-weight: var(--ig-body-1-font-weight); - font-style: var(--ig-body-1-font-style); - line-height: var(--ig-body-1-line-height); - letter-spacing: var(--ig-body-1-letter-spacing); - text-transform: var(--ig-body-1-text-transform); - margin-top: var(--ig-body-1-margin-top); - margin-bottom: var(--ig-body-1-margin-bottom); -} - -/* END_EXPECTED */ -/* END_ASSERT */ -/* */ -/* Test: should wrap CSS heading and paragraph style rules in :where():not() when $allow-exclusion is true */ -/* ASSERT: */ -/* OUTPUT */ -.test-output :where(h1):not(:where([data-no-typography], [data-no-typography] *)) { - font-family: var(--ig-h1-font-family, var(--ig-font-family)); - font-size: var(--ig-h1-font-size); - font-weight: var(--ig-h1-font-weight); - font-style: var(--ig-h1-font-style); - line-height: var(--ig-h1-line-height); - letter-spacing: var(--ig-h1-letter-spacing); - text-transform: var(--ig-h1-text-transform); - margin-top: var(--ig-h1-margin-top); - margin-bottom: var(--ig-h1-margin-bottom); -} -.test-output :where(h2):not(:where([data-no-typography], [data-no-typography] *)) { - font-family: var(--ig-h2-font-family, var(--ig-font-family)); - font-size: var(--ig-h2-font-size); - font-weight: var(--ig-h2-font-weight); - font-style: var(--ig-h2-font-style); - line-height: var(--ig-h2-line-height); - letter-spacing: var(--ig-h2-letter-spacing); - text-transform: var(--ig-h2-text-transform); - margin-top: var(--ig-h2-margin-top); - margin-bottom: var(--ig-h2-margin-bottom); -} -.test-output :where(h3):not(:where([data-no-typography], [data-no-typography] *)) { - font-family: var(--ig-h3-font-family, var(--ig-font-family)); - font-size: var(--ig-h3-font-size); - font-weight: var(--ig-h3-font-weight); - font-style: var(--ig-h3-font-style); - line-height: var(--ig-h3-line-height); - letter-spacing: var(--ig-h3-letter-spacing); - text-transform: var(--ig-h3-text-transform); - margin-top: var(--ig-h3-margin-top); - margin-bottom: var(--ig-h3-margin-bottom); -} -.test-output :where(h4):not(:where([data-no-typography], [data-no-typography] *)) { - font-family: var(--ig-h4-font-family, var(--ig-font-family)); - font-size: var(--ig-h4-font-size); - font-weight: var(--ig-h4-font-weight); - font-style: var(--ig-h4-font-style); - line-height: var(--ig-h4-line-height); - letter-spacing: var(--ig-h4-letter-spacing); - text-transform: var(--ig-h4-text-transform); - margin-top: var(--ig-h4-margin-top); - margin-bottom: var(--ig-h4-margin-bottom); -} -.test-output :where(h5):not(:where([data-no-typography], [data-no-typography] *)) { - font-family: var(--ig-h5-font-family, var(--ig-font-family)); - font-size: var(--ig-h5-font-size); - font-weight: var(--ig-h5-font-weight); - font-style: var(--ig-h5-font-style); - line-height: var(--ig-h5-line-height); - letter-spacing: var(--ig-h5-letter-spacing); - text-transform: var(--ig-h5-text-transform); - margin-top: var(--ig-h5-margin-top); - margin-bottom: var(--ig-h5-margin-bottom); -} -.test-output :where(h6):not(:where([data-no-typography], [data-no-typography] *)) { - font-family: var(--ig-h6-font-family, var(--ig-font-family)); - font-size: var(--ig-h6-font-size); - font-weight: var(--ig-h6-font-weight); - font-style: var(--ig-h6-font-style); - line-height: var(--ig-h6-line-height); - letter-spacing: var(--ig-h6-letter-spacing); - text-transform: var(--ig-h6-text-transform); - margin-top: var(--ig-h6-margin-top); - margin-bottom: var(--ig-h6-margin-bottom); -} -.test-output :where(p):not(:where([data-no-typography], [data-no-typography] *)) { - font-family: var(--ig-body-1-font-family, var(--ig-font-family)); - font-size: var(--ig-body-1-font-size); - font-weight: var(--ig-body-1-font-weight); - font-style: var(--ig-body-1-font-style); - line-height: var(--ig-body-1-line-height); - letter-spacing: var(--ig-body-1-letter-spacing); - text-transform: var(--ig-body-1-text-transform); - margin-top: var(--ig-body-1-margin-top); - margin-bottom: var(--ig-body-1-margin-bottom); -} - -/* END_OUTPUT */ -/* EXPECTED */ -.test-output :where(h1):not(:where([data-no-typography], [data-no-typography] *)) { - font-family: var(--ig-h1-font-family, var(--ig-font-family)); - font-size: var(--ig-h1-font-size); - font-weight: var(--ig-h1-font-weight); - font-style: var(--ig-h1-font-style); - line-height: var(--ig-h1-line-height); - letter-spacing: var(--ig-h1-letter-spacing); - text-transform: var(--ig-h1-text-transform); - margin-top: var(--ig-h1-margin-top); - margin-bottom: var(--ig-h1-margin-bottom); -} -.test-output :where(h2):not(:where([data-no-typography], [data-no-typography] *)) { - font-family: var(--ig-h2-font-family, var(--ig-font-family)); - font-size: var(--ig-h2-font-size); - font-weight: var(--ig-h2-font-weight); - font-style: var(--ig-h2-font-style); - line-height: var(--ig-h2-line-height); - letter-spacing: var(--ig-h2-letter-spacing); - text-transform: var(--ig-h2-text-transform); - margin-top: var(--ig-h2-margin-top); - margin-bottom: var(--ig-h2-margin-bottom); -} -.test-output :where(h3):not(:where([data-no-typography], [data-no-typography] *)) { - font-family: var(--ig-h3-font-family, var(--ig-font-family)); - font-size: var(--ig-h3-font-size); - font-weight: var(--ig-h3-font-weight); - font-style: var(--ig-h3-font-style); - line-height: var(--ig-h3-line-height); - letter-spacing: var(--ig-h3-letter-spacing); - text-transform: var(--ig-h3-text-transform); - margin-top: var(--ig-h3-margin-top); - margin-bottom: var(--ig-h3-margin-bottom); -} -.test-output :where(h4):not(:where([data-no-typography], [data-no-typography] *)) { - font-family: var(--ig-h4-font-family, var(--ig-font-family)); - font-size: var(--ig-h4-font-size); - font-weight: var(--ig-h4-font-weight); - font-style: var(--ig-h4-font-style); - line-height: var(--ig-h4-line-height); - letter-spacing: var(--ig-h4-letter-spacing); - text-transform: var(--ig-h4-text-transform); - margin-top: var(--ig-h4-margin-top); - margin-bottom: var(--ig-h4-margin-bottom); -} -.test-output :where(h5):not(:where([data-no-typography], [data-no-typography] *)) { - font-family: var(--ig-h5-font-family, var(--ig-font-family)); - font-size: var(--ig-h5-font-size); - font-weight: var(--ig-h5-font-weight); - font-style: var(--ig-h5-font-style); - line-height: var(--ig-h5-line-height); - letter-spacing: var(--ig-h5-letter-spacing); - text-transform: var(--ig-h5-text-transform); - margin-top: var(--ig-h5-margin-top); - margin-bottom: var(--ig-h5-margin-bottom); -} -.test-output :where(h6):not(:where([data-no-typography], [data-no-typography] *)) { - font-family: var(--ig-h6-font-family, var(--ig-font-family)); - font-size: var(--ig-h6-font-size); - font-weight: var(--ig-h6-font-weight); - font-style: var(--ig-h6-font-style); - line-height: var(--ig-h6-line-height); - letter-spacing: var(--ig-h6-letter-spacing); - text-transform: var(--ig-h6-text-transform); - margin-top: var(--ig-h6-margin-top); - margin-bottom: var(--ig-h6-margin-bottom); -} -.test-output :where(p):not(:where([data-no-typography], [data-no-typography] *)) { - font-family: var(--ig-body-1-font-family, var(--ig-font-family)); - font-size: var(--ig-body-1-font-size); - font-weight: var(--ig-body-1-font-weight); - font-style: var(--ig-body-1-font-style); - line-height: var(--ig-body-1-line-height); - letter-spacing: var(--ig-body-1-letter-spacing); - text-transform: var(--ig-body-1-text-transform); - margin-top: var(--ig-body-1-margin-top); - margin-bottom: var(--ig-body-1-margin-bottom); -} - -/* END_EXPECTED */ -/* END_ASSERT */ -/* */ -/* Test: should include typography variables in the :root scope */ -/* ASSERT: */ -/* OUTPUT */ -:root { - --ig-font-family: Roboto, sans-serif; - --ig-base-font-size: 16px; - --ig-h1-font-size: 96px; - --ig-h1-font-weight: normal; - --ig-h1-font-style: normal; - --ig-h1-line-height: normal; - --ig-h1-letter-spacing: normal; - --ig-h1-text-transform: none; - --ig-h1-margin-top: 0; - --ig-h1-margin-bottom: 0; - --ig-h2-font-size: 70px; - --ig-h2-font-weight: normal; - --ig-h2-font-style: normal; - --ig-h2-line-height: normal; - --ig-h2-letter-spacing: normal; - --ig-h2-text-transform: none; - --ig-h2-margin-top: 0; - --ig-h2-margin-bottom: 0; - --ig-h3-font-size: 40px; - --ig-h3-font-weight: normal; - --ig-h3-font-style: normal; - --ig-h3-line-height: normal; - --ig-h3-letter-spacing: normal; - --ig-h3-text-transform: none; - --ig-h3-margin-top: 0; - --ig-h3-margin-bottom: 0; - --ig-h4-font-size: 30px; - --ig-h4-font-weight: normal; - --ig-h4-font-style: normal; - --ig-h4-line-height: normal; - --ig-h4-letter-spacing: normal; - --ig-h4-text-transform: none; - --ig-h4-margin-top: 0; - --ig-h4-margin-bottom: 0; - --ig-h5-font-size: 20px; - --ig-h5-font-weight: normal; - --ig-h5-font-style: normal; - --ig-h5-line-height: normal; - --ig-h5-letter-spacing: normal; - --ig-h5-text-transform: none; - --ig-h5-margin-top: 0; - --ig-h5-margin-bottom: 0; - --ig-h6-font-size: 10px; - --ig-h6-font-weight: normal; - --ig-h6-font-style: normal; - --ig-h6-line-height: normal; - --ig-h6-letter-spacing: normal; - --ig-h6-text-transform: none; - --ig-h6-margin-top: 0; - --ig-h6-margin-bottom: 0; - --ig-subtitle-1-font-size: 96px; - --ig-subtitle-1-font-weight: normal; - --ig-subtitle-1-font-style: normal; - --ig-subtitle-1-line-height: normal; - --ig-subtitle-1-letter-spacing: normal; - --ig-subtitle-1-text-transform: none; - --ig-subtitle-1-margin-top: 0; - --ig-subtitle-1-margin-bottom: 0; - --ig-subtitle-2-font-size: 70px; - --ig-subtitle-2-font-weight: normal; - --ig-subtitle-2-font-style: normal; - --ig-subtitle-2-line-height: normal; - --ig-subtitle-2-letter-spacing: normal; - --ig-subtitle-2-text-transform: none; - --ig-subtitle-2-margin-top: 0; - --ig-subtitle-2-margin-bottom: 0; - --ig-body-1-font-size: 40px; - --ig-body-1-font-weight: normal; - --ig-body-1-font-style: normal; - --ig-body-1-line-height: normal; - --ig-body-1-letter-spacing: normal; - --ig-body-1-text-transform: none; - --ig-body-1-margin-top: 0; - --ig-body-1-margin-bottom: 0; - --ig-body-2-font-size: 30px; - --ig-body-2-font-weight: normal; - --ig-body-2-font-style: normal; - --ig-body-2-line-height: normal; - --ig-body-2-letter-spacing: normal; - --ig-body-2-text-transform: none; - --ig-body-2-margin-top: 0; - --ig-body-2-margin-bottom: 0; - --ig-button-font-size: 20px; - --ig-button-font-weight: normal; - --ig-button-font-style: normal; - --ig-button-line-height: normal; - --ig-button-letter-spacing: normal; - --ig-button-text-transform: none; - --ig-button-margin-top: 0; - --ig-button-margin-bottom: 0; - --ig-caption-font-size: 10px; - --ig-caption-font-weight: normal; - --ig-caption-font-style: normal; - --ig-caption-line-height: normal; - --ig-caption-letter-spacing: normal; - --ig-caption-text-transform: none; - --ig-caption-margin-top: 0; - --ig-caption-margin-bottom: 0; - --ig-overline-font-size: 10px; - --ig-overline-font-weight: normal; - --ig-overline-font-style: normal; - --ig-overline-line-height: normal; - --ig-overline-letter-spacing: normal; - --ig-overline-text-transform: none; - --ig-overline-margin-top: 0; - --ig-overline-margin-bottom: 0; -} - -.ig-typography h1 { - font-family: var(--ig-h1-font-family, var(--ig-font-family)); - font-size: var(--ig-h1-font-size); - font-weight: var(--ig-h1-font-weight); - font-style: var(--ig-h1-font-style); - line-height: var(--ig-h1-line-height); - letter-spacing: var(--ig-h1-letter-spacing); - text-transform: var(--ig-h1-text-transform); - margin-top: var(--ig-h1-margin-top); - margin-bottom: var(--ig-h1-margin-bottom); -} -.ig-typography h2 { - font-family: var(--ig-h2-font-family, var(--ig-font-family)); - font-size: var(--ig-h2-font-size); - font-weight: var(--ig-h2-font-weight); - font-style: var(--ig-h2-font-style); - line-height: var(--ig-h2-line-height); - letter-spacing: var(--ig-h2-letter-spacing); - text-transform: var(--ig-h2-text-transform); - margin-top: var(--ig-h2-margin-top); - margin-bottom: var(--ig-h2-margin-bottom); -} -.ig-typography h3 { - font-family: var(--ig-h3-font-family, var(--ig-font-family)); - font-size: var(--ig-h3-font-size); - font-weight: var(--ig-h3-font-weight); - font-style: var(--ig-h3-font-style); - line-height: var(--ig-h3-line-height); - letter-spacing: var(--ig-h3-letter-spacing); - text-transform: var(--ig-h3-text-transform); - margin-top: var(--ig-h3-margin-top); - margin-bottom: var(--ig-h3-margin-bottom); -} -.ig-typography h4 { - font-family: var(--ig-h4-font-family, var(--ig-font-family)); - font-size: var(--ig-h4-font-size); - font-weight: var(--ig-h4-font-weight); - font-style: var(--ig-h4-font-style); - line-height: var(--ig-h4-line-height); - letter-spacing: var(--ig-h4-letter-spacing); - text-transform: var(--ig-h4-text-transform); - margin-top: var(--ig-h4-margin-top); - margin-bottom: var(--ig-h4-margin-bottom); -} -.ig-typography h5 { - font-family: var(--ig-h5-font-family, var(--ig-font-family)); - font-size: var(--ig-h5-font-size); - font-weight: var(--ig-h5-font-weight); - font-style: var(--ig-h5-font-style); - line-height: var(--ig-h5-line-height); - letter-spacing: var(--ig-h5-letter-spacing); - text-transform: var(--ig-h5-text-transform); - margin-top: var(--ig-h5-margin-top); - margin-bottom: var(--ig-h5-margin-bottom); -} -.ig-typography h6 { - font-family: var(--ig-h6-font-family, var(--ig-font-family)); - font-size: var(--ig-h6-font-size); - font-weight: var(--ig-h6-font-weight); - font-style: var(--ig-h6-font-style); - line-height: var(--ig-h6-line-height); - letter-spacing: var(--ig-h6-letter-spacing); - text-transform: var(--ig-h6-text-transform); - margin-top: var(--ig-h6-margin-top); - margin-bottom: var(--ig-h6-margin-bottom); -} -.ig-typography p { - font-family: var(--ig-body-1-font-family, var(--ig-font-family)); - font-size: var(--ig-body-1-font-size); - font-weight: var(--ig-body-1-font-weight); - font-style: var(--ig-body-1-font-style); - line-height: var(--ig-body-1-line-height); - letter-spacing: var(--ig-body-1-letter-spacing); - text-transform: var(--ig-body-1-text-transform); - margin-top: var(--ig-body-1-margin-top); - margin-bottom: var(--ig-body-1-margin-bottom); -} -.ig-typography .ig-typography__h1 { - font-family: var(--ig-h1-font-family, var(--ig-font-family)); - font-size: var(--ig-h1-font-size); - font-weight: var(--ig-h1-font-weight); - font-style: var(--ig-h1-font-style); - line-height: var(--ig-h1-line-height); - letter-spacing: var(--ig-h1-letter-spacing); - text-transform: var(--ig-h1-text-transform); - margin-top: var(--ig-h1-margin-top); - margin-bottom: var(--ig-h1-margin-bottom); -} -.ig-typography .ig-typography__h2 { - font-family: var(--ig-h2-font-family, var(--ig-font-family)); - font-size: var(--ig-h2-font-size); - font-weight: var(--ig-h2-font-weight); - font-style: var(--ig-h2-font-style); - line-height: var(--ig-h2-line-height); - letter-spacing: var(--ig-h2-letter-spacing); - text-transform: var(--ig-h2-text-transform); - margin-top: var(--ig-h2-margin-top); - margin-bottom: var(--ig-h2-margin-bottom); -} -.ig-typography .ig-typography__h3 { - font-family: var(--ig-h3-font-family, var(--ig-font-family)); - font-size: var(--ig-h3-font-size); - font-weight: var(--ig-h3-font-weight); - font-style: var(--ig-h3-font-style); - line-height: var(--ig-h3-line-height); - letter-spacing: var(--ig-h3-letter-spacing); - text-transform: var(--ig-h3-text-transform); - margin-top: var(--ig-h3-margin-top); - margin-bottom: var(--ig-h3-margin-bottom); -} -.ig-typography .ig-typography__h4 { - font-family: var(--ig-h4-font-family, var(--ig-font-family)); - font-size: var(--ig-h4-font-size); - font-weight: var(--ig-h4-font-weight); - font-style: var(--ig-h4-font-style); - line-height: var(--ig-h4-line-height); - letter-spacing: var(--ig-h4-letter-spacing); - text-transform: var(--ig-h4-text-transform); - margin-top: var(--ig-h4-margin-top); - margin-bottom: var(--ig-h4-margin-bottom); -} -.ig-typography .ig-typography__h5 { - font-family: var(--ig-h5-font-family, var(--ig-font-family)); - font-size: var(--ig-h5-font-size); - font-weight: var(--ig-h5-font-weight); - font-style: var(--ig-h5-font-style); - line-height: var(--ig-h5-line-height); - letter-spacing: var(--ig-h5-letter-spacing); - text-transform: var(--ig-h5-text-transform); - margin-top: var(--ig-h5-margin-top); - margin-bottom: var(--ig-h5-margin-bottom); -} -.ig-typography .ig-typography__h6 { - font-family: var(--ig-h6-font-family, var(--ig-font-family)); - font-size: var(--ig-h6-font-size); - font-weight: var(--ig-h6-font-weight); - font-style: var(--ig-h6-font-style); - line-height: var(--ig-h6-line-height); - letter-spacing: var(--ig-h6-letter-spacing); - text-transform: var(--ig-h6-text-transform); - margin-top: var(--ig-h6-margin-top); - margin-bottom: var(--ig-h6-margin-bottom); -} -.ig-typography .ig-typography__subtitle-1 { - font-family: var(--ig-subtitle-1-font-family, var(--ig-font-family)); - font-size: var(--ig-subtitle-1-font-size); - font-weight: var(--ig-subtitle-1-font-weight); - font-style: var(--ig-subtitle-1-font-style); - line-height: var(--ig-subtitle-1-line-height); - letter-spacing: var(--ig-subtitle-1-letter-spacing); - text-transform: var(--ig-subtitle-1-text-transform); - margin-top: var(--ig-subtitle-1-margin-top); - margin-bottom: var(--ig-subtitle-1-margin-bottom); -} -.ig-typography .ig-typography__subtitle-2 { - font-family: var(--ig-subtitle-2-font-family, var(--ig-font-family)); - font-size: var(--ig-subtitle-2-font-size); - font-weight: var(--ig-subtitle-2-font-weight); - font-style: var(--ig-subtitle-2-font-style); - line-height: var(--ig-subtitle-2-line-height); - letter-spacing: var(--ig-subtitle-2-letter-spacing); - text-transform: var(--ig-subtitle-2-text-transform); - margin-top: var(--ig-subtitle-2-margin-top); - margin-bottom: var(--ig-subtitle-2-margin-bottom); -} -.ig-typography .ig-typography__body-1 { - font-family: var(--ig-body-1-font-family, var(--ig-font-family)); - font-size: var(--ig-body-1-font-size); - font-weight: var(--ig-body-1-font-weight); - font-style: var(--ig-body-1-font-style); - line-height: var(--ig-body-1-line-height); - letter-spacing: var(--ig-body-1-letter-spacing); - text-transform: var(--ig-body-1-text-transform); - margin-top: var(--ig-body-1-margin-top); - margin-bottom: var(--ig-body-1-margin-bottom); -} -.ig-typography .ig-typography__body-2 { - font-family: var(--ig-body-2-font-family, var(--ig-font-family)); - font-size: var(--ig-body-2-font-size); - font-weight: var(--ig-body-2-font-weight); - font-style: var(--ig-body-2-font-style); - line-height: var(--ig-body-2-line-height); - letter-spacing: var(--ig-body-2-letter-spacing); - text-transform: var(--ig-body-2-text-transform); - margin-top: var(--ig-body-2-margin-top); - margin-bottom: var(--ig-body-2-margin-bottom); -} -.ig-typography .ig-typography__button { - font-family: var(--ig-button-font-family, var(--ig-font-family)); - font-size: var(--ig-button-font-size); - font-weight: var(--ig-button-font-weight); - font-style: var(--ig-button-font-style); - line-height: var(--ig-button-line-height); - letter-spacing: var(--ig-button-letter-spacing); - text-transform: var(--ig-button-text-transform); - margin-top: var(--ig-button-margin-top); - margin-bottom: var(--ig-button-margin-bottom); -} -.ig-typography .ig-typography__caption { - font-family: var(--ig-caption-font-family, var(--ig-font-family)); - font-size: var(--ig-caption-font-size); - font-weight: var(--ig-caption-font-weight); - font-style: var(--ig-caption-font-style); - line-height: var(--ig-caption-line-height); - letter-spacing: var(--ig-caption-letter-spacing); - text-transform: var(--ig-caption-text-transform); - margin-top: var(--ig-caption-margin-top); - margin-bottom: var(--ig-caption-margin-bottom); -} -.ig-typography .ig-typography__overline { - font-family: var(--ig-overline-font-family, var(--ig-font-family)); - font-size: var(--ig-overline-font-size); - font-weight: var(--ig-overline-font-weight); - font-style: var(--ig-overline-font-style); - line-height: var(--ig-overline-line-height); - letter-spacing: var(--ig-overline-letter-spacing); - text-transform: var(--ig-overline-text-transform); - margin-top: var(--ig-overline-margin-top); - margin-bottom: var(--ig-overline-margin-bottom); -} - -/* END_OUTPUT */ -/* CONTAINED */ -:root { - --ig-font-family: Roboto, sans-serif; - --ig-h1-font-size: 96px; - --ig-h1-font-weight: normal; - --ig-h1-font-style: normal; - --ig-h1-line-height: normal; - --ig-h1-letter-spacing: normal; - --ig-h1-text-transform: none; - --ig-h1-margin-top: 0; - --ig-h1-margin-bottom: 0; - --ig-h2-font-size: 70px; - --ig-h2-font-weight: normal; - --ig-h2-font-style: normal; - --ig-h2-line-height: normal; - --ig-h2-letter-spacing: normal; - --ig-h2-text-transform: none; - --ig-h2-margin-top: 0; - --ig-h2-margin-bottom: 0; - --ig-h3-font-size: 40px; - --ig-h3-font-weight: normal; - --ig-h3-font-style: normal; - --ig-h3-line-height: normal; - --ig-h3-letter-spacing: normal; - --ig-h3-text-transform: none; - --ig-h3-margin-top: 0; - --ig-h3-margin-bottom: 0; - --ig-h4-font-size: 30px; - --ig-h4-font-weight: normal; - --ig-h4-font-style: normal; - --ig-h4-line-height: normal; - --ig-h4-letter-spacing: normal; - --ig-h4-text-transform: none; - --ig-h4-margin-top: 0; - --ig-h4-margin-bottom: 0; - --ig-h5-font-size: 20px; - --ig-h5-font-weight: normal; - --ig-h5-font-style: normal; - --ig-h5-line-height: normal; - --ig-h5-letter-spacing: normal; - --ig-h5-text-transform: none; - --ig-h5-margin-top: 0; - --ig-h5-margin-bottom: 0; - --ig-h6-font-size: 10px; - --ig-h6-font-weight: normal; - --ig-h6-font-style: normal; - --ig-h6-line-height: normal; - --ig-h6-letter-spacing: normal; - --ig-h6-text-transform: none; - --ig-h6-margin-top: 0; - --ig-h6-margin-bottom: 0; - --ig-subtitle-1-font-size: 96px; - --ig-subtitle-1-font-weight: normal; - --ig-subtitle-1-font-style: normal; - --ig-subtitle-1-line-height: normal; - --ig-subtitle-1-letter-spacing: normal; - --ig-subtitle-1-text-transform: none; - --ig-subtitle-1-margin-top: 0; - --ig-subtitle-1-margin-bottom: 0; - --ig-subtitle-2-font-size: 70px; - --ig-subtitle-2-font-weight: normal; - --ig-subtitle-2-font-style: normal; - --ig-subtitle-2-line-height: normal; - --ig-subtitle-2-letter-spacing: normal; - --ig-subtitle-2-text-transform: none; - --ig-subtitle-2-margin-top: 0; - --ig-subtitle-2-margin-bottom: 0; - --ig-body-1-font-size: 40px; - --ig-body-1-font-weight: normal; - --ig-body-1-font-style: normal; - --ig-body-1-line-height: normal; - --ig-body-1-letter-spacing: normal; - --ig-body-1-text-transform: none; - --ig-body-1-margin-top: 0; - --ig-body-1-margin-bottom: 0; - --ig-body-2-font-size: 30px; - --ig-body-2-font-weight: normal; - --ig-body-2-font-style: normal; - --ig-body-2-line-height: normal; - --ig-body-2-letter-spacing: normal; - --ig-body-2-text-transform: none; - --ig-body-2-margin-top: 0; - --ig-body-2-margin-bottom: 0; - --ig-button-font-size: 20px; - --ig-button-font-weight: normal; - --ig-button-font-style: normal; - --ig-button-line-height: normal; - --ig-button-letter-spacing: normal; - --ig-button-text-transform: none; - --ig-button-margin-top: 0; - --ig-button-margin-bottom: 0; - --ig-caption-font-size: 10px; - --ig-caption-font-weight: normal; - --ig-caption-font-style: normal; - --ig-caption-line-height: normal; - --ig-caption-letter-spacing: normal; - --ig-caption-text-transform: none; - --ig-caption-margin-top: 0; - --ig-caption-margin-bottom: 0; - --ig-overline-font-size: 10px; - --ig-overline-font-weight: normal; - --ig-overline-font-style: normal; - --ig-overline-line-height: normal; - --ig-overline-letter-spacing: normal; - --ig-overline-text-transform: none; - --ig-overline-margin-top: 0; - --ig-overline-margin-bottom: 0; -} - -/* END_CONTAINED */ -/* END_ASSERT */ -/* */ -/* Test: should include typography variables for a parent scope */ -/* ASSERT: */ -/* OUTPUT */ -.test-output { - --ig-font-family: Roboto, sans-serif; - --ig-base-font-size: 16px; - --ig-h1-font-size: 96px; - --ig-h1-font-weight: normal; - --ig-h1-font-style: normal; - --ig-h1-line-height: normal; - --ig-h1-letter-spacing: normal; - --ig-h1-text-transform: none; - --ig-h1-margin-top: 0; - --ig-h1-margin-bottom: 0; - --ig-h2-font-size: 70px; - --ig-h2-font-weight: normal; - --ig-h2-font-style: normal; - --ig-h2-line-height: normal; - --ig-h2-letter-spacing: normal; - --ig-h2-text-transform: none; - --ig-h2-margin-top: 0; - --ig-h2-margin-bottom: 0; - --ig-h3-font-size: 40px; - --ig-h3-font-weight: normal; - --ig-h3-font-style: normal; - --ig-h3-line-height: normal; - --ig-h3-letter-spacing: normal; - --ig-h3-text-transform: none; - --ig-h3-margin-top: 0; - --ig-h3-margin-bottom: 0; - --ig-h4-font-size: 30px; - --ig-h4-font-weight: normal; - --ig-h4-font-style: normal; - --ig-h4-line-height: normal; - --ig-h4-letter-spacing: normal; - --ig-h4-text-transform: none; - --ig-h4-margin-top: 0; - --ig-h4-margin-bottom: 0; - --ig-h5-font-size: 20px; - --ig-h5-font-weight: normal; - --ig-h5-font-style: normal; - --ig-h5-line-height: normal; - --ig-h5-letter-spacing: normal; - --ig-h5-text-transform: none; - --ig-h5-margin-top: 0; - --ig-h5-margin-bottom: 0; - --ig-h6-font-size: 10px; - --ig-h6-font-weight: normal; - --ig-h6-font-style: normal; - --ig-h6-line-height: normal; - --ig-h6-letter-spacing: normal; - --ig-h6-text-transform: none; - --ig-h6-margin-top: 0; - --ig-h6-margin-bottom: 0; - --ig-subtitle-1-font-size: 96px; - --ig-subtitle-1-font-weight: normal; - --ig-subtitle-1-font-style: normal; - --ig-subtitle-1-line-height: normal; - --ig-subtitle-1-letter-spacing: normal; - --ig-subtitle-1-text-transform: none; - --ig-subtitle-1-margin-top: 0; - --ig-subtitle-1-margin-bottom: 0; - --ig-subtitle-2-font-size: 70px; - --ig-subtitle-2-font-weight: normal; - --ig-subtitle-2-font-style: normal; - --ig-subtitle-2-line-height: normal; - --ig-subtitle-2-letter-spacing: normal; - --ig-subtitle-2-text-transform: none; - --ig-subtitle-2-margin-top: 0; - --ig-subtitle-2-margin-bottom: 0; - --ig-body-1-font-size: 40px; - --ig-body-1-font-weight: normal; - --ig-body-1-font-style: normal; - --ig-body-1-line-height: normal; - --ig-body-1-letter-spacing: normal; - --ig-body-1-text-transform: none; - --ig-body-1-margin-top: 0; - --ig-body-1-margin-bottom: 0; - --ig-body-2-font-size: 30px; - --ig-body-2-font-weight: normal; - --ig-body-2-font-style: normal; - --ig-body-2-line-height: normal; - --ig-body-2-letter-spacing: normal; - --ig-body-2-text-transform: none; - --ig-body-2-margin-top: 0; - --ig-body-2-margin-bottom: 0; - --ig-button-font-size: 20px; - --ig-button-font-weight: normal; - --ig-button-font-style: normal; - --ig-button-line-height: normal; - --ig-button-letter-spacing: normal; - --ig-button-text-transform: none; - --ig-button-margin-top: 0; - --ig-button-margin-bottom: 0; - --ig-caption-font-size: 10px; - --ig-caption-font-weight: normal; - --ig-caption-font-style: normal; - --ig-caption-line-height: normal; - --ig-caption-letter-spacing: normal; - --ig-caption-text-transform: none; - --ig-caption-margin-top: 0; - --ig-caption-margin-bottom: 0; - --ig-overline-font-size: 10px; - --ig-overline-font-weight: normal; - --ig-overline-font-style: normal; - --ig-overline-line-height: normal; - --ig-overline-letter-spacing: normal; - --ig-overline-text-transform: none; - --ig-overline-margin-top: 0; - --ig-overline-margin-bottom: 0; -} - -/* END_OUTPUT */ -/* EXPECTED */ -.test-output { - --ig-font-family: Roboto, sans-serif; - --ig-base-font-size: 16px; - --ig-h1-font-size: 96px; - --ig-h1-font-weight: normal; - --ig-h1-font-style: normal; - --ig-h1-line-height: normal; - --ig-h1-letter-spacing: normal; - --ig-h1-text-transform: none; - --ig-h1-margin-top: 0; - --ig-h1-margin-bottom: 0; - --ig-h2-font-size: 70px; - --ig-h2-font-weight: normal; - --ig-h2-font-style: normal; - --ig-h2-line-height: normal; - --ig-h2-letter-spacing: normal; - --ig-h2-text-transform: none; - --ig-h2-margin-top: 0; - --ig-h2-margin-bottom: 0; - --ig-h3-font-size: 40px; - --ig-h3-font-weight: normal; - --ig-h3-font-style: normal; - --ig-h3-line-height: normal; - --ig-h3-letter-spacing: normal; - --ig-h3-text-transform: none; - --ig-h3-margin-top: 0; - --ig-h3-margin-bottom: 0; - --ig-h4-font-size: 30px; - --ig-h4-font-weight: normal; - --ig-h4-font-style: normal; - --ig-h4-line-height: normal; - --ig-h4-letter-spacing: normal; - --ig-h4-text-transform: none; - --ig-h4-margin-top: 0; - --ig-h4-margin-bottom: 0; - --ig-h5-font-size: 20px; - --ig-h5-font-weight: normal; - --ig-h5-font-style: normal; - --ig-h5-line-height: normal; - --ig-h5-letter-spacing: normal; - --ig-h5-text-transform: none; - --ig-h5-margin-top: 0; - --ig-h5-margin-bottom: 0; - --ig-h6-font-size: 10px; - --ig-h6-font-weight: normal; - --ig-h6-font-style: normal; - --ig-h6-line-height: normal; - --ig-h6-letter-spacing: normal; - --ig-h6-text-transform: none; - --ig-h6-margin-top: 0; - --ig-h6-margin-bottom: 0; - --ig-subtitle-1-font-size: 96px; - --ig-subtitle-1-font-weight: normal; - --ig-subtitle-1-font-style: normal; - --ig-subtitle-1-line-height: normal; - --ig-subtitle-1-letter-spacing: normal; - --ig-subtitle-1-text-transform: none; - --ig-subtitle-1-margin-top: 0; - --ig-subtitle-1-margin-bottom: 0; - --ig-subtitle-2-font-size: 70px; - --ig-subtitle-2-font-weight: normal; - --ig-subtitle-2-font-style: normal; - --ig-subtitle-2-line-height: normal; - --ig-subtitle-2-letter-spacing: normal; - --ig-subtitle-2-text-transform: none; - --ig-subtitle-2-margin-top: 0; - --ig-subtitle-2-margin-bottom: 0; - --ig-body-1-font-size: 40px; - --ig-body-1-font-weight: normal; - --ig-body-1-font-style: normal; - --ig-body-1-line-height: normal; - --ig-body-1-letter-spacing: normal; - --ig-body-1-text-transform: none; - --ig-body-1-margin-top: 0; - --ig-body-1-margin-bottom: 0; - --ig-body-2-font-size: 30px; - --ig-body-2-font-weight: normal; - --ig-body-2-font-style: normal; - --ig-body-2-line-height: normal; - --ig-body-2-letter-spacing: normal; - --ig-body-2-text-transform: none; - --ig-body-2-margin-top: 0; - --ig-body-2-margin-bottom: 0; - --ig-button-font-size: 20px; - --ig-button-font-weight: normal; - --ig-button-font-style: normal; - --ig-button-line-height: normal; - --ig-button-letter-spacing: normal; - --ig-button-text-transform: none; - --ig-button-margin-top: 0; - --ig-button-margin-bottom: 0; - --ig-caption-font-size: 10px; - --ig-caption-font-weight: normal; - --ig-caption-font-style: normal; - --ig-caption-line-height: normal; - --ig-caption-letter-spacing: normal; - --ig-caption-text-transform: none; - --ig-caption-margin-top: 0; - --ig-caption-margin-bottom: 0; - --ig-overline-font-size: 10px; - --ig-overline-font-weight: normal; - --ig-overline-font-style: normal; - --ig-overline-line-height: normal; - --ig-overline-letter-spacing: normal; - --ig-overline-text-transform: none; - --ig-overline-margin-top: 0; - --ig-overline-margin-bottom: 0; -} - -/* END_EXPECTED */ -/* END_ASSERT */ -/* */ -/* */ -/* */ -/* # Module: Utilities */ -/* ------------------- */ -/* # Module: Utilities :: css */ -/* -------------------------- */ -/* Test: should expand shorthand properties */ -/* ✔ [assert-equal] should expand shorthand properties */ -/* */ -/* */ -/* # Module: Utilities :: meta */ -/* --------------------------- */ -/* Test: should resolve if the call context is the root of the stylesheet */ -/* ASSERT: */ -/* OUTPUT */ -.test-output { - content: true; -} - -/* END_OUTPUT */ -/* EXPECTED */ -.test-output { - content: true; -} - -/* END_EXPECTED */ -/* END_ASSERT */ -/* ASSERT: */ -/* OUTPUT */ -.test-output { - content: false; -} - -/* END_OUTPUT */ -/* EXPECTED */ -.test-output { - content: false; -} - -/* END_EXPECTED */ -/* END_ASSERT */ -/* */ -/* Test: should resolve if the call context is :host */ -/* ASSERT: */ -/* OUTPUT */ -:host { - content: true; -} - -/* END_OUTPUT */ -/* EXPECTED */ -:host { - content: true; -} - -/* END_EXPECTED */ -/* END_ASSERT */ -/* ASSERT: */ -/* OUTPUT */ -.test-output { - content: false; -} - -/* END_OUTPUT */ -/* EXPECTED */ -.test-output { - content: false; -} - -/* END_EXPECTED */ -/* END_ASSERT */ -/* */ -/* */ -/* # Module: Utilities :: map */ -/* -------------------------- */ -/* Test: should clean a map of null values */ -/* ✔ [assert-equal] should clean a map of null values */ -/* */ -/* Test: should merge two maps removing null values in the process */ -/* ✔ [assert-equal] should merge two maps removing null values in the process */ -/* */ -/* Test: should accumulate _meta keys when merging schema maps */ -/* ✔ [assert-equal] should accumulate _meta keys when merging schema maps */ -/* */ -/* Test: should fully replace nested property maps regardless of whether the override has _meta */ -/* ✔ [assert-equal] should fully replace nested property maps regardless of whether the override has _meta */ -/* ✔ [assert-equal] should fully replace nested property maps regardless of whether the override has _meta */ -/* */ -/* Test: should diff two maps resolving all unique values in the second map in the process */ -/* ✔ [assert-equal] should diff two maps resolving all unique values in the second map in the process */ -/* */ -/* Test: should prefix all keys in a map with a given string */ -/* ✔ [assert-equal] should prefix all keys in a map with a given string */ -/* */ -/* */ -/* # Module: Utilities :: math */ -/* --------------------------- */ -/* Test: returns a number to a fixed floating point */ -/* ✔ [assert-equal] returns a number to a fixed floating point */ -/* */ -/* Test: converts a number to string */ -/* ✔ [assert-equal] converts a number to string */ -/* */ -/* */ -/* # Module: Utilities :: string */ -/* ----------------------------- */ -/* Test: should split a string by a given separator into a list of values */ -/* ✔ [assert-equal] should split a string by a given separator into a list of values */ -/* */ -/* Test: should replace a search term in target string */ -/* ✔ [assert-equal] should replace a search term in target string */ -/* */ -/* Test: converts a string into a number */ -/* ✔ [assert-equal] converts a string into a number */ -/* ✔ [assert-equal] converts a string into a number */ -/* */ -/* */ -/* */ -/* # Module: Themes */ -/* ---------------- */ -/* # Module: Themes :: schemas */ -/* --------------------------- */ -/* Test: resolves util function values */ -/* ✔ [assert-equal] resolves util function values */ -/* ASSERT: */ -/* OUTPUT */ -igx-data-chart { - --title-padding-top: var(--igx-data-chart-title-padding-top, var(--ig-data-chart-title-padding-top, 4px)); - --title-padding-right: var(--igx-data-chart-title-padding-right, var(--ig-data-chart-title-padding-right, 8px)); - --title-padding-bottom: var(--igx-data-chart-title-padding-bottom, var(--ig-data-chart-title-padding-bottom, 4px)); - --title-padding-left: var(--igx-data-chart-title-padding-left, var(--ig-data-chart-title-padding-left, 8px)); - --ig-theme: material; - --ig-theme-variant: light; -} - -/* END_OUTPUT */ -/* EXPECTED */ -igx-data-chart { - --title-padding-top: var(--igx-data-chart-title-padding-top, var(--ig-data-chart-title-padding-top, 4px)); - --title-padding-right: var(--igx-data-chart-title-padding-right, var(--ig-data-chart-title-padding-right, 8px)); - --title-padding-bottom: var(--igx-data-chart-title-padding-bottom, var(--ig-data-chart-title-padding-bottom, 4px)); - --title-padding-left: var(--igx-data-chart-title-padding-left, var(--ig-data-chart-title-padding-left, 8px)); - --ig-theme: material; - --ig-theme-variant: light; -} - -/* END_EXPECTED */ -/* END_ASSERT */ -/* */ -/* Test: should resolve values from function instructions */ -/* ✔ [assert-equal] should resolve values from function instructions */ -/* ✔ [assert-equal] should resolve values from function instructions */ -/* */ -/* Test: should work with custom(handmade) palettes */ -/* ✔ [assert-equal] should work with custom(handmade) palettes */ -/* ✔ [assert-equal] should work with custom(handmade) palettes */ -/* */ -/* Test: should output theme maps from schema definitions */ -/* ✔ [assert-equal] should output theme maps from schema definitions */ -/* */ -/* Test: should include proper metadata in each component schema */ -/* ✔ [assert-true] Component schema for category-chart is missing metadata. */ -/* ✔ [assert-equal] Component schema for light material category-chart has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light material category-chart has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for category-chart is missing name metadata. */ -/* ✔ [assert-true] Component schema for data-chart is missing metadata. */ -/* ✔ [assert-equal] Component schema for light material data-chart has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light material data-chart has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for data-chart is missing name metadata. */ -/* ✔ [assert-true] Component schema for doughnut-chart is missing metadata. */ -/* ✔ [assert-equal] Component schema for light material doughnut-chart has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light material doughnut-chart has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for doughnut-chart is missing name metadata. */ -/* ✔ [assert-true] Component schema for financial-chart is missing metadata. */ -/* ✔ [assert-equal] Component schema for light material financial-chart has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light material financial-chart has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for financial-chart is missing name metadata. */ -/* ✔ [assert-true] Component schema for funnel-chart is missing metadata. */ -/* ✔ [assert-equal] Component schema for light material funnel-chart has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light material funnel-chart has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for funnel-chart is missing name metadata. */ -/* ✔ [assert-true] Component schema for linear-gauge is missing metadata. */ -/* ✔ [assert-equal] Component schema for light material linear-gauge has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light material linear-gauge has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for linear-gauge is missing name metadata. */ -/* ✔ [assert-true] Component schema for radial-gauge is missing metadata. */ -/* ✔ [assert-equal] Component schema for light material radial-gauge has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light material radial-gauge has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for radial-gauge is missing name metadata. */ -/* ✔ [assert-true] Component schema for geo-map is missing metadata. */ -/* ✔ [assert-equal] Component schema for light material geo-map has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light material geo-map has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for geo-map is missing name metadata. */ -/* ✔ [assert-true] Component schema for bullet-graph is missing metadata. */ -/* ✔ [assert-equal] Component schema for light material bullet-graph has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light material bullet-graph has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for bullet-graph is missing name metadata. */ -/* ✔ [assert-true] Component schema for pie-chart is missing metadata. */ -/* ✔ [assert-equal] Component schema for light material pie-chart has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light material pie-chart has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for pie-chart is missing name metadata. */ -/* ✔ [assert-true] Component schema for shape-chart is missing metadata. */ -/* ✔ [assert-equal] Component schema for light material shape-chart has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light material shape-chart has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for shape-chart is missing name metadata. */ -/* ✔ [assert-true] Component schema for sparkline is missing metadata. */ -/* ✔ [assert-equal] Component schema for light material sparkline has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light material sparkline has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for sparkline is missing name metadata. */ -/* ✔ [assert-true] Component schema for action-strip is missing metadata. */ -/* ✔ [assert-equal] Component schema for light material action-strip has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light material action-strip has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for action-strip is missing name metadata. */ -/* ✔ [assert-true] Component schema for avatar is missing metadata. */ -/* ✔ [assert-equal] Component schema for light material avatar has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light material avatar has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for avatar is missing name metadata. */ -/* ✔ [assert-true] Component schema for badge is missing metadata. */ -/* ✔ [assert-equal] Component schema for light material badge has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light material badge has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for badge is missing name metadata. */ -/* ✔ [assert-true] Component schema for banner is missing metadata. */ -/* ✔ [assert-equal] Component schema for light material banner has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light material banner has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for banner is missing name metadata. */ -/* ✔ [assert-true] Component schema for bottom-nav is missing metadata. */ -/* ✔ [assert-equal] Component schema for light material bottom-nav has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light material bottom-nav has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for bottom-nav is missing name metadata. */ -/* ✔ [assert-true] Component schema for flat button is missing metadata. */ -/* ✔ [assert-equal] Component schema for light material flat button has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light material flat button has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for flat button is missing name metadata. */ -/* ✔ [assert-true] Component schema for outlined button is missing metadata. */ -/* ✔ [assert-equal] Component schema for light material outlined button has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light material outlined button has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for outlined button is missing name metadata. */ -/* ✔ [assert-true] Component schema for contained button is missing metadata. */ -/* ✔ [assert-equal] Component schema for light material contained button has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light material contained button has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for contained button is missing name metadata. */ -/* ✔ [assert-true] Component schema for fab button is missing metadata. */ -/* ✔ [assert-equal] Component schema for light material fab button has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light material fab button has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for fab button is missing name metadata. */ -/* ✔ [assert-true] Component schema for button-group is missing metadata. */ -/* ✔ [assert-equal] Component schema for light material button-group has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light material button-group has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for button-group is missing name metadata. */ -/* ✔ [assert-true] Component schema for calendar is missing metadata. */ -/* ✔ [assert-equal] Component schema for light material calendar has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light material calendar has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for calendar is missing name metadata. */ -/* ✔ [assert-true] Component schema for card is missing metadata. */ -/* ✔ [assert-equal] Component schema for light material card has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light material card has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for card is missing name metadata. */ -/* ✔ [assert-true] Component schema for carousel is missing metadata. */ -/* ✔ [assert-equal] Component schema for light material carousel has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light material carousel has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for carousel is missing name metadata. */ -/* ✔ [assert-true] Component schema for chat is missing metadata. */ -/* ✔ [assert-equal] Component schema for light material chat has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light material chat has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for chat is missing name metadata. */ -/* ✔ [assert-true] Component schema for checkbox is missing metadata. */ -/* ✔ [assert-equal] Component schema for light material checkbox has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light material checkbox has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for checkbox is missing name metadata. */ -/* ✔ [assert-true] Component schema for chip is missing metadata. */ -/* ✔ [assert-equal] Component schema for light material chip has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light material chip has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for chip is missing name metadata. */ -/* ✔ [assert-true] Component schema for color-picker is missing metadata. */ -/* ✔ [assert-equal] Component schema for light material color-picker has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light material color-picker has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for color-picker is missing name metadata. */ -/* ✔ [assert-true] Component schema for column-actions is missing metadata. */ -/* ✔ [assert-equal] Component schema for light material column-actions has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light material column-actions has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for column-actions is missing name metadata. */ -/* ✔ [assert-true] Component schema for combo is missing metadata. */ -/* ✔ [assert-equal] Component schema for light material combo has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light material combo has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for combo is missing name metadata. */ -/* ✔ [assert-true] Component schema for date-picker is missing metadata. */ -/* ✔ [assert-equal] Component schema for light material date-picker has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light material date-picker has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for date-picker is missing name metadata. */ -/* ✔ [assert-true] Component schema for date-range is missing metadata. */ -/* ✔ [assert-equal] Component schema for light material date-range has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light material date-range has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for date-range is missing name metadata. */ -/* ✔ [assert-true] Component schema for dialog is missing metadata. */ -/* ✔ [assert-equal] Component schema for light material dialog has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light material dialog has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for dialog is missing name metadata. */ -/* ✔ [assert-true] Component schema for divider is missing metadata. */ -/* ✔ [assert-equal] Component schema for light material divider has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light material divider has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for divider is missing name metadata. */ -/* ✔ [assert-true] Component schema for dockmanager is missing metadata. */ -/* ✔ [assert-equal] Component schema for light material dockmanager has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light material dockmanager has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for dockmanager is missing name metadata. */ -/* ✔ [assert-true] Component schema for drop-down is missing metadata. */ -/* ✔ [assert-equal] Component schema for light material drop-down has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light material drop-down has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for drop-down is missing name metadata. */ -/* ✔ [assert-true] Component schema for expansion-panel is missing metadata. */ -/* ✔ [assert-equal] Component schema for light material expansion-panel has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light material expansion-panel has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for expansion-panel is missing name metadata. */ -/* ✔ [assert-true] Component schema for grid is missing metadata. */ -/* ✔ [assert-equal] Component schema for light material grid has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light material grid has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for grid is missing name metadata. */ -/* ✔ [assert-true] Component schema for grid-excel-filtering is missing metadata. */ -/* ✔ [assert-equal] Component schema for light material grid-excel-filtering has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light material grid-excel-filtering has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for grid-excel-filtering is missing name metadata. */ -/* ✔ [assert-true] Component schema for grid-filtering is missing metadata. */ -/* ✔ [assert-equal] Component schema for light material grid-filtering has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light material grid-filtering has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for grid-filtering is missing name metadata. */ -/* ✔ [assert-true] Component schema for grid-summary is missing metadata. */ -/* ✔ [assert-equal] Component schema for light material grid-summary has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light material grid-summary has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for grid-summary is missing name metadata. */ -/* ✔ [assert-true] Component schema for grid-toolbar is missing metadata. */ -/* ✔ [assert-equal] Component schema for light material grid-toolbar has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light material grid-toolbar has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for grid-toolbar is missing name metadata. */ -/* ✔ [assert-true] Component schema for highlight is missing metadata. */ -/* ✔ [assert-equal] Component schema for light material highlight has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light material highlight has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for highlight is missing name metadata. */ -/* ✔ [assert-true] Component schema for icon is missing metadata. */ -/* ✔ [assert-equal] Component schema for light material icon has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light material icon has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for icon is missing name metadata. */ -/* ✔ [assert-true] Component schema for flat icon-button is missing metadata. */ -/* ✔ [assert-equal] Component schema for light material flat icon-button has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light material flat icon-button has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for flat icon-button is missing name metadata. */ -/* ✔ [assert-true] Component schema for contained icon-button is missing metadata. */ -/* ✔ [assert-equal] Component schema for light material contained icon-button has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light material contained icon-button has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for contained icon-button is missing name metadata. */ -/* ✔ [assert-true] Component schema for outlined icon-button is missing metadata. */ -/* ✔ [assert-equal] Component schema for light material outlined icon-button has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light material outlined icon-button has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for outlined icon-button is missing name metadata. */ -/* ✔ [assert-true] Component schema for input-group is missing metadata. */ -/* ✔ [assert-equal] Component schema for light material input-group has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light material input-group has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for input-group is missing name metadata. */ -/* ✔ [assert-true] Component schema for label is missing metadata. */ -/* ✔ [assert-equal] Component schema for light material label has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light material label has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for label is missing name metadata. */ -/* ✔ [assert-true] Component schema for list is missing metadata. */ -/* ✔ [assert-equal] Component schema for light material list has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light material list has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for list is missing name metadata. */ -/* ✔ [assert-true] Component schema for navbar is missing metadata. */ -/* ✔ [assert-equal] Component schema for light material navbar has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light material navbar has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for navbar is missing name metadata. */ -/* ✔ [assert-true] Component schema for nav-drawer is missing metadata. */ -/* ✔ [assert-equal] Component schema for light material nav-drawer has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light material nav-drawer has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for nav-drawer is missing name metadata. */ -/* ✔ [assert-true] Component schema for overlay is missing metadata. */ -/* ✔ [assert-equal] Component schema for light material overlay has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light material overlay has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for overlay is missing name metadata. */ -/* ✔ [assert-true] Component schema for paginator is missing metadata. */ -/* ✔ [assert-equal] Component schema for light material paginator has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light material paginator has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for paginator is missing name metadata. */ -/* ✔ [assert-true] Component schema for pivot-data-selector is missing metadata. */ -/* ✔ [assert-equal] Component schema for light material pivot-data-selector has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light material pivot-data-selector has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for pivot-data-selector is missing name metadata. */ -/* ✔ [assert-true] Component schema for linear-bar is missing metadata. */ -/* ✔ [assert-equal] Component schema for light material linear-bar has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light material linear-bar has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for linear-bar is missing name metadata. */ -/* ✔ [assert-true] Component schema for circular-bar is missing metadata. */ -/* ✔ [assert-equal] Component schema for light material circular-bar has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light material circular-bar has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for circular-bar is missing name metadata. */ -/* ✔ [assert-true] Component schema for qr-code is missing metadata. */ -/* ✔ [assert-equal] Component schema for light material qr-code has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light material qr-code has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for qr-code is missing name metadata. */ -/* ✔ [assert-true] Component schema for query-builder is missing metadata. */ -/* ✔ [assert-equal] Component schema for light material query-builder has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light material query-builder has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for query-builder is missing name metadata. */ -/* ✔ [assert-true] Component schema for radio is missing metadata. */ -/* ✔ [assert-equal] Component schema for light material radio has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light material radio has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for radio is missing name metadata. */ -/* ✔ [assert-true] Component schema for rating is missing metadata. */ -/* ✔ [assert-equal] Component schema for light material rating has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light material rating has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for rating is missing name metadata. */ -/* ✔ [assert-true] Component schema for resize-indicator is missing metadata. */ -/* ✔ [assert-equal] Component schema for light material resize-indicator has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light material resize-indicator has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for resize-indicator is missing name metadata. */ -/* ✔ [assert-true] Component schema for ripple is missing metadata. */ -/* ✔ [assert-equal] Component schema for light material ripple has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light material ripple has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for ripple is missing name metadata. */ -/* ✔ [assert-true] Component schema for scrollbar is missing metadata. */ -/* ✔ [assert-equal] Component schema for light material scrollbar has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light material scrollbar has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for scrollbar is missing name metadata. */ -/* ✔ [assert-true] Component schema for select is missing metadata. */ -/* ✔ [assert-equal] Component schema for light material select has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light material select has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for select is missing name metadata. */ -/* ✔ [assert-true] Component schema for slider is missing metadata. */ -/* ✔ [assert-equal] Component schema for light material slider has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light material slider has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for slider is missing name metadata. */ -/* ✔ [assert-true] Component schema for snackbar is missing metadata. */ -/* ✔ [assert-equal] Component schema for light material snackbar has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light material snackbar has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for snackbar is missing name metadata. */ -/* ✔ [assert-true] Component schema for splitter is missing metadata. */ -/* ✔ [assert-equal] Component schema for light material splitter has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light material splitter has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for splitter is missing name metadata. */ -/* ✔ [assert-true] Component schema for stepper is missing metadata. */ -/* ✔ [assert-equal] Component schema for light material stepper has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light material stepper has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for stepper is missing name metadata. */ -/* ✔ [assert-true] Component schema for switch is missing metadata. */ -/* ✔ [assert-equal] Component schema for light material switch has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light material switch has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for switch is missing name metadata. */ -/* ✔ [assert-true] Component schema for tabs is missing metadata. */ -/* ✔ [assert-equal] Component schema for light material tabs has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light material tabs has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for tabs is missing name metadata. */ -/* ✔ [assert-true] Component schema for tile-manager is missing metadata. */ -/* ✔ [assert-equal] Component schema for light material tile-manager has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light material tile-manager has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for tile-manager is missing name metadata. */ -/* ✔ [assert-true] Component schema for time-picker is missing metadata. */ -/* ✔ [assert-equal] Component schema for light material time-picker has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light material time-picker has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for time-picker is missing name metadata. */ -/* ✔ [assert-true] Component schema for toast is missing metadata. */ -/* ✔ [assert-equal] Component schema for light material toast has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light material toast has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for toast is missing name metadata. */ -/* ✔ [assert-true] Component schema for tooltip is missing metadata. */ -/* ✔ [assert-equal] Component schema for light material tooltip has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light material tooltip has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for tooltip is missing name metadata. */ -/* ✔ [assert-true] Component schema for tree is missing metadata. */ -/* ✔ [assert-equal] Component schema for light material tree has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light material tree has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for tree is missing name metadata. */ -/* ✔ [assert-true] Component schema for validator is missing metadata. */ -/* ✔ [assert-equal] Component schema for light material validator has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light material validator has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for validator is missing name metadata. */ -/* ✔ [assert-true] Component schema for watermark is missing metadata. */ -/* ✔ [assert-equal] Component schema for light material watermark has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light material watermark has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for watermark is missing name metadata. */ -/* ✔ [assert-true] Component schema for file-input is missing metadata. */ -/* ✔ [assert-equal] Component schema for light material file-input has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light material file-input has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for file-input is missing name metadata. */ -/* ✔ [assert-true] Component schema for category-chart is missing metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap category-chart has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap category-chart has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for category-chart is missing name metadata. */ -/* ✔ [assert-true] Component schema for data-chart is missing metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap data-chart has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap data-chart has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for data-chart is missing name metadata. */ -/* ✔ [assert-true] Component schema for doughnut-chart is missing metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap doughnut-chart has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap doughnut-chart has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for doughnut-chart is missing name metadata. */ -/* ✔ [assert-true] Component schema for financial-chart is missing metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap financial-chart has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap financial-chart has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for financial-chart is missing name metadata. */ -/* ✔ [assert-true] Component schema for funnel-chart is missing metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap funnel-chart has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap funnel-chart has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for funnel-chart is missing name metadata. */ -/* ✔ [assert-true] Component schema for linear-gauge is missing metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap linear-gauge has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap linear-gauge has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for linear-gauge is missing name metadata. */ -/* ✔ [assert-true] Component schema for radial-gauge is missing metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap radial-gauge has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap radial-gauge has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for radial-gauge is missing name metadata. */ -/* ✔ [assert-true] Component schema for geo-map is missing metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap geo-map has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap geo-map has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for geo-map is missing name metadata. */ -/* ✔ [assert-true] Component schema for bullet-graph is missing metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap bullet-graph has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap bullet-graph has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for bullet-graph is missing name metadata. */ -/* ✔ [assert-true] Component schema for pie-chart is missing metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap pie-chart has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap pie-chart has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for pie-chart is missing name metadata. */ -/* ✔ [assert-true] Component schema for shape-chart is missing metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap shape-chart has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap shape-chart has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for shape-chart is missing name metadata. */ -/* ✔ [assert-true] Component schema for sparkline is missing metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap sparkline has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap sparkline has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for sparkline is missing name metadata. */ -/* ✔ [assert-true] Component schema for action-strip is missing metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap action-strip has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap action-strip has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for action-strip is missing name metadata. */ -/* ✔ [assert-true] Component schema for avatar is missing metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap avatar has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap avatar has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for avatar is missing name metadata. */ -/* ✔ [assert-true] Component schema for badge is missing metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap badge has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap badge has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for badge is missing name metadata. */ -/* ✔ [assert-true] Component schema for banner is missing metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap banner has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap banner has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for banner is missing name metadata. */ -/* ✔ [assert-true] Component schema for bottom-nav is missing metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap bottom-nav has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap bottom-nav has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for bottom-nav is missing name metadata. */ -/* ✔ [assert-true] Component schema for flat button is missing metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap flat button has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap flat button has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for flat button is missing name metadata. */ -/* ✔ [assert-true] Component schema for outlined button is missing metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap outlined button has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap outlined button has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for outlined button is missing name metadata. */ -/* ✔ [assert-true] Component schema for contained button is missing metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap contained button has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap contained button has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for contained button is missing name metadata. */ -/* ✔ [assert-true] Component schema for fab button is missing metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap fab button has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap fab button has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for fab button is missing name metadata. */ -/* ✔ [assert-true] Component schema for button-group is missing metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap button-group has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap button-group has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for button-group is missing name metadata. */ -/* ✔ [assert-true] Component schema for calendar is missing metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap calendar has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap calendar has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for calendar is missing name metadata. */ -/* ✔ [assert-true] Component schema for card is missing metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap card has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap card has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for card is missing name metadata. */ -/* ✔ [assert-true] Component schema for carousel is missing metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap carousel has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap carousel has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for carousel is missing name metadata. */ -/* ✔ [assert-true] Component schema for chat is missing metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap chat has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap chat has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for chat is missing name metadata. */ -/* ✔ [assert-true] Component schema for checkbox is missing metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap checkbox has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap checkbox has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for checkbox is missing name metadata. */ -/* ✔ [assert-true] Component schema for chip is missing metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap chip has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap chip has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for chip is missing name metadata. */ -/* ✔ [assert-true] Component schema for color-picker is missing metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap color-picker has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap color-picker has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for color-picker is missing name metadata. */ -/* ✔ [assert-true] Component schema for column-actions is missing metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap column-actions has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap column-actions has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for column-actions is missing name metadata. */ -/* ✔ [assert-true] Component schema for combo is missing metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap combo has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap combo has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for combo is missing name metadata. */ -/* ✔ [assert-true] Component schema for date-picker is missing metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap date-picker has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap date-picker has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for date-picker is missing name metadata. */ -/* ✔ [assert-true] Component schema for date-range is missing metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap date-range has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap date-range has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for date-range is missing name metadata. */ -/* ✔ [assert-true] Component schema for dialog is missing metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap dialog has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap dialog has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for dialog is missing name metadata. */ -/* ✔ [assert-true] Component schema for divider is missing metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap divider has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap divider has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for divider is missing name metadata. */ -/* ✔ [assert-true] Component schema for dockmanager is missing metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap dockmanager has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap dockmanager has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for dockmanager is missing name metadata. */ -/* ✔ [assert-true] Component schema for drop-down is missing metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap drop-down has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap drop-down has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for drop-down is missing name metadata. */ -/* ✔ [assert-true] Component schema for expansion-panel is missing metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap expansion-panel has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap expansion-panel has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for expansion-panel is missing name metadata. */ -/* ✔ [assert-true] Component schema for grid is missing metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap grid has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap grid has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for grid is missing name metadata. */ -/* ✔ [assert-true] Component schema for grid-excel-filtering is missing metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap grid-excel-filtering has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap grid-excel-filtering has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for grid-excel-filtering is missing name metadata. */ -/* ✔ [assert-true] Component schema for grid-filtering is missing metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap grid-filtering has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap grid-filtering has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for grid-filtering is missing name metadata. */ -/* ✔ [assert-true] Component schema for grid-summary is missing metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap grid-summary has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap grid-summary has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for grid-summary is missing name metadata. */ -/* ✔ [assert-true] Component schema for grid-toolbar is missing metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap grid-toolbar has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap grid-toolbar has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for grid-toolbar is missing name metadata. */ -/* ✔ [assert-true] Component schema for highlight is missing metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap highlight has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap highlight has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for highlight is missing name metadata. */ -/* ✔ [assert-true] Component schema for icon is missing metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap icon has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap icon has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for icon is missing name metadata. */ -/* ✔ [assert-true] Component schema for flat icon-button is missing metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap flat icon-button has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap flat icon-button has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for flat icon-button is missing name metadata. */ -/* ✔ [assert-true] Component schema for contained icon-button is missing metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap contained icon-button has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap contained icon-button has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for contained icon-button is missing name metadata. */ -/* ✔ [assert-true] Component schema for outlined icon-button is missing metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap outlined icon-button has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap outlined icon-button has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for outlined icon-button is missing name metadata. */ -/* ✔ [assert-true] Component schema for input-group is missing metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap input-group has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap input-group has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for input-group is missing name metadata. */ -/* ✔ [assert-true] Component schema for label is missing metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap label has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap label has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for label is missing name metadata. */ -/* ✔ [assert-true] Component schema for list is missing metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap list has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap list has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for list is missing name metadata. */ -/* ✔ [assert-true] Component schema for navbar is missing metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap navbar has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap navbar has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for navbar is missing name metadata. */ -/* ✔ [assert-true] Component schema for nav-drawer is missing metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap nav-drawer has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap nav-drawer has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for nav-drawer is missing name metadata. */ -/* ✔ [assert-true] Component schema for overlay is missing metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap overlay has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap overlay has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for overlay is missing name metadata. */ -/* ✔ [assert-true] Component schema for paginator is missing metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap paginator has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap paginator has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for paginator is missing name metadata. */ -/* ✔ [assert-true] Component schema for pivot-data-selector is missing metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap pivot-data-selector has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap pivot-data-selector has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for pivot-data-selector is missing name metadata. */ -/* ✔ [assert-true] Component schema for linear-bar is missing metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap linear-bar has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap linear-bar has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for linear-bar is missing name metadata. */ -/* ✔ [assert-true] Component schema for circular-bar is missing metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap circular-bar has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap circular-bar has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for circular-bar is missing name metadata. */ -/* ✔ [assert-true] Component schema for qr-code is missing metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap qr-code has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap qr-code has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for qr-code is missing name metadata. */ -/* ✔ [assert-true] Component schema for query-builder is missing metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap query-builder has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap query-builder has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for query-builder is missing name metadata. */ -/* ✔ [assert-true] Component schema for radio is missing metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap radio has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap radio has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for radio is missing name metadata. */ -/* ✔ [assert-true] Component schema for rating is missing metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap rating has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap rating has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for rating is missing name metadata. */ -/* ✔ [assert-true] Component schema for resize-indicator is missing metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap resize-indicator has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap resize-indicator has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for resize-indicator is missing name metadata. */ -/* ✔ [assert-true] Component schema for ripple is missing metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap ripple has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap ripple has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for ripple is missing name metadata. */ -/* ✔ [assert-true] Component schema for scrollbar is missing metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap scrollbar has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap scrollbar has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for scrollbar is missing name metadata. */ -/* ✔ [assert-true] Component schema for select is missing metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap select has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap select has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for select is missing name metadata. */ -/* ✔ [assert-true] Component schema for slider is missing metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap slider has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap slider has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for slider is missing name metadata. */ -/* ✔ [assert-true] Component schema for snackbar is missing metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap snackbar has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap snackbar has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for snackbar is missing name metadata. */ -/* ✔ [assert-true] Component schema for splitter is missing metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap splitter has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap splitter has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for splitter is missing name metadata. */ -/* ✔ [assert-true] Component schema for stepper is missing metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap stepper has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap stepper has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for stepper is missing name metadata. */ -/* ✔ [assert-true] Component schema for switch is missing metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap switch has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap switch has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for switch is missing name metadata. */ -/* ✔ [assert-true] Component schema for tabs is missing metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap tabs has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap tabs has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for tabs is missing name metadata. */ -/* ✔ [assert-true] Component schema for tile-manager is missing metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap tile-manager has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap tile-manager has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for tile-manager is missing name metadata. */ -/* ✔ [assert-true] Component schema for time-picker is missing metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap time-picker has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap time-picker has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for time-picker is missing name metadata. */ -/* ✔ [assert-true] Component schema for toast is missing metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap toast has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap toast has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for toast is missing name metadata. */ -/* ✔ [assert-true] Component schema for tooltip is missing metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap tooltip has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap tooltip has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for tooltip is missing name metadata. */ -/* ✔ [assert-true] Component schema for tree is missing metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap tree has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap tree has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for tree is missing name metadata. */ -/* ✔ [assert-true] Component schema for validator is missing metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap validator has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap validator has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for validator is missing name metadata. */ -/* ✔ [assert-true] Component schema for watermark is missing metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap watermark has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap watermark has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for watermark is missing name metadata. */ -/* ✔ [assert-true] Component schema for file-input is missing metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap file-input has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap file-input has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for file-input is missing name metadata. */ -/* ✔ [assert-true] Component schema for category-chart is missing metadata. */ -/* ✔ [assert-equal] Component schema for light fluent category-chart has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light fluent category-chart has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for category-chart is missing name metadata. */ -/* ✔ [assert-true] Component schema for data-chart is missing metadata. */ -/* ✔ [assert-equal] Component schema for light fluent data-chart has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light fluent data-chart has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for data-chart is missing name metadata. */ -/* ✔ [assert-true] Component schema for doughnut-chart is missing metadata. */ -/* ✔ [assert-equal] Component schema for light fluent doughnut-chart has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light fluent doughnut-chart has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for doughnut-chart is missing name metadata. */ -/* ✔ [assert-true] Component schema for financial-chart is missing metadata. */ -/* ✔ [assert-equal] Component schema for light fluent financial-chart has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light fluent financial-chart has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for financial-chart is missing name metadata. */ -/* ✔ [assert-true] Component schema for funnel-chart is missing metadata. */ -/* ✔ [assert-equal] Component schema for light fluent funnel-chart has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light fluent funnel-chart has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for funnel-chart is missing name metadata. */ -/* ✔ [assert-true] Component schema for linear-gauge is missing metadata. */ -/* ✔ [assert-equal] Component schema for light fluent linear-gauge has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light fluent linear-gauge has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for linear-gauge is missing name metadata. */ -/* ✔ [assert-true] Component schema for radial-gauge is missing metadata. */ -/* ✔ [assert-equal] Component schema for light fluent radial-gauge has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light fluent radial-gauge has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for radial-gauge is missing name metadata. */ -/* ✔ [assert-true] Component schema for geo-map is missing metadata. */ -/* ✔ [assert-equal] Component schema for light fluent geo-map has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light fluent geo-map has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for geo-map is missing name metadata. */ -/* ✔ [assert-true] Component schema for bullet-graph is missing metadata. */ -/* ✔ [assert-equal] Component schema for light fluent bullet-graph has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light fluent bullet-graph has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for bullet-graph is missing name metadata. */ -/* ✔ [assert-true] Component schema for pie-chart is missing metadata. */ -/* ✔ [assert-equal] Component schema for light fluent pie-chart has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light fluent pie-chart has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for pie-chart is missing name metadata. */ -/* ✔ [assert-true] Component schema for shape-chart is missing metadata. */ -/* ✔ [assert-equal] Component schema for light fluent shape-chart has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light fluent shape-chart has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for shape-chart is missing name metadata. */ -/* ✔ [assert-true] Component schema for sparkline is missing metadata. */ -/* ✔ [assert-equal] Component schema for light fluent sparkline has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light fluent sparkline has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for sparkline is missing name metadata. */ -/* ✔ [assert-true] Component schema for action-strip is missing metadata. */ -/* ✔ [assert-equal] Component schema for light fluent action-strip has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light fluent action-strip has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for action-strip is missing name metadata. */ -/* ✔ [assert-true] Component schema for avatar is missing metadata. */ -/* ✔ [assert-equal] Component schema for light fluent avatar has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light fluent avatar has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for avatar is missing name metadata. */ -/* ✔ [assert-true] Component schema for badge is missing metadata. */ -/* ✔ [assert-equal] Component schema for light fluent badge has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light fluent badge has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for badge is missing name metadata. */ -/* ✔ [assert-true] Component schema for banner is missing metadata. */ -/* ✔ [assert-equal] Component schema for light fluent banner has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light fluent banner has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for banner is missing name metadata. */ -/* ✔ [assert-true] Component schema for bottom-nav is missing metadata. */ -/* ✔ [assert-equal] Component schema for light fluent bottom-nav has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light fluent bottom-nav has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for bottom-nav is missing name metadata. */ -/* ✔ [assert-true] Component schema for flat button is missing metadata. */ -/* ✔ [assert-equal] Component schema for light fluent flat button has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light fluent flat button has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for flat button is missing name metadata. */ -/* ✔ [assert-true] Component schema for outlined button is missing metadata. */ -/* ✔ [assert-equal] Component schema for light fluent outlined button has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light fluent outlined button has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for outlined button is missing name metadata. */ -/* ✔ [assert-true] Component schema for contained button is missing metadata. */ -/* ✔ [assert-equal] Component schema for light fluent contained button has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light fluent contained button has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for contained button is missing name metadata. */ -/* ✔ [assert-true] Component schema for fab button is missing metadata. */ -/* ✔ [assert-equal] Component schema for light fluent fab button has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light fluent fab button has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for fab button is missing name metadata. */ -/* ✔ [assert-true] Component schema for button-group is missing metadata. */ -/* ✔ [assert-equal] Component schema for light fluent button-group has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light fluent button-group has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for button-group is missing name metadata. */ -/* ✔ [assert-true] Component schema for calendar is missing metadata. */ -/* ✔ [assert-equal] Component schema for light fluent calendar has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light fluent calendar has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for calendar is missing name metadata. */ -/* ✔ [assert-true] Component schema for card is missing metadata. */ -/* ✔ [assert-equal] Component schema for light fluent card has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light fluent card has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for card is missing name metadata. */ -/* ✔ [assert-true] Component schema for carousel is missing metadata. */ -/* ✔ [assert-equal] Component schema for light fluent carousel has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light fluent carousel has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for carousel is missing name metadata. */ -/* ✔ [assert-true] Component schema for chat is missing metadata. */ -/* ✔ [assert-equal] Component schema for light fluent chat has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light fluent chat has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for chat is missing name metadata. */ -/* ✔ [assert-true] Component schema for checkbox is missing metadata. */ -/* ✔ [assert-equal] Component schema for light fluent checkbox has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light fluent checkbox has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for checkbox is missing name metadata. */ -/* ✔ [assert-true] Component schema for chip is missing metadata. */ -/* ✔ [assert-equal] Component schema for light fluent chip has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light fluent chip has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for chip is missing name metadata. */ -/* ✔ [assert-true] Component schema for color-picker is missing metadata. */ -/* ✔ [assert-equal] Component schema for light fluent color-picker has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light fluent color-picker has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for color-picker is missing name metadata. */ -/* ✔ [assert-true] Component schema for column-actions is missing metadata. */ -/* ✔ [assert-equal] Component schema for light fluent column-actions has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light fluent column-actions has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for column-actions is missing name metadata. */ -/* ✔ [assert-true] Component schema for combo is missing metadata. */ -/* ✔ [assert-equal] Component schema for light fluent combo has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light fluent combo has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for combo is missing name metadata. */ -/* ✔ [assert-true] Component schema for date-picker is missing metadata. */ -/* ✔ [assert-equal] Component schema for light fluent date-picker has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light fluent date-picker has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for date-picker is missing name metadata. */ -/* ✔ [assert-true] Component schema for date-range is missing metadata. */ -/* ✔ [assert-equal] Component schema for light fluent date-range has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light fluent date-range has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for date-range is missing name metadata. */ -/* ✔ [assert-true] Component schema for dialog is missing metadata. */ -/* ✔ [assert-equal] Component schema for light fluent dialog has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light fluent dialog has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for dialog is missing name metadata. */ -/* ✔ [assert-true] Component schema for divider is missing metadata. */ -/* ✔ [assert-equal] Component schema for light fluent divider has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light fluent divider has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for divider is missing name metadata. */ -/* ✔ [assert-true] Component schema for dockmanager is missing metadata. */ -/* ✔ [assert-equal] Component schema for light fluent dockmanager has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light fluent dockmanager has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for dockmanager is missing name metadata. */ -/* ✔ [assert-true] Component schema for drop-down is missing metadata. */ -/* ✔ [assert-equal] Component schema for light fluent drop-down has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light fluent drop-down has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for drop-down is missing name metadata. */ -/* ✔ [assert-true] Component schema for expansion-panel is missing metadata. */ -/* ✔ [assert-equal] Component schema for light fluent expansion-panel has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light fluent expansion-panel has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for expansion-panel is missing name metadata. */ -/* ✔ [assert-true] Component schema for grid is missing metadata. */ -/* ✔ [assert-equal] Component schema for light fluent grid has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light fluent grid has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for grid is missing name metadata. */ -/* ✔ [assert-true] Component schema for grid-excel-filtering is missing metadata. */ -/* ✔ [assert-equal] Component schema for light fluent grid-excel-filtering has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light fluent grid-excel-filtering has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for grid-excel-filtering is missing name metadata. */ -/* ✔ [assert-true] Component schema for grid-filtering is missing metadata. */ -/* ✔ [assert-equal] Component schema for light fluent grid-filtering has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light fluent grid-filtering has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for grid-filtering is missing name metadata. */ -/* ✔ [assert-true] Component schema for grid-summary is missing metadata. */ -/* ✔ [assert-equal] Component schema for light fluent grid-summary has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light fluent grid-summary has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for grid-summary is missing name metadata. */ -/* ✔ [assert-true] Component schema for grid-toolbar is missing metadata. */ -/* ✔ [assert-equal] Component schema for light fluent grid-toolbar has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light fluent grid-toolbar has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for grid-toolbar is missing name metadata. */ -/* ✔ [assert-true] Component schema for highlight is missing metadata. */ -/* ✔ [assert-equal] Component schema for light fluent highlight has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light fluent highlight has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for highlight is missing name metadata. */ -/* ✔ [assert-true] Component schema for icon is missing metadata. */ -/* ✔ [assert-equal] Component schema for light fluent icon has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light fluent icon has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for icon is missing name metadata. */ -/* ✔ [assert-true] Component schema for flat icon-button is missing metadata. */ -/* ✔ [assert-equal] Component schema for light fluent flat icon-button has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light fluent flat icon-button has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for flat icon-button is missing name metadata. */ -/* ✔ [assert-true] Component schema for contained icon-button is missing metadata. */ -/* ✔ [assert-equal] Component schema for light fluent contained icon-button has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light fluent contained icon-button has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for contained icon-button is missing name metadata. */ -/* ✔ [assert-true] Component schema for outlined icon-button is missing metadata. */ -/* ✔ [assert-equal] Component schema for light fluent outlined icon-button has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light fluent outlined icon-button has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for outlined icon-button is missing name metadata. */ -/* ✔ [assert-true] Component schema for input-group is missing metadata. */ -/* ✔ [assert-equal] Component schema for light fluent input-group has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light fluent input-group has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for input-group is missing name metadata. */ -/* ✔ [assert-true] Component schema for label is missing metadata. */ -/* ✔ [assert-equal] Component schema for light fluent label has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light fluent label has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for label is missing name metadata. */ -/* ✔ [assert-true] Component schema for list is missing metadata. */ -/* ✔ [assert-equal] Component schema for light fluent list has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light fluent list has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for list is missing name metadata. */ -/* ✔ [assert-true] Component schema for navbar is missing metadata. */ -/* ✔ [assert-equal] Component schema for light fluent navbar has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light fluent navbar has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for navbar is missing name metadata. */ -/* ✔ [assert-true] Component schema for nav-drawer is missing metadata. */ -/* ✔ [assert-equal] Component schema for light fluent nav-drawer has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light fluent nav-drawer has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for nav-drawer is missing name metadata. */ -/* ✔ [assert-true] Component schema for overlay is missing metadata. */ -/* ✔ [assert-equal] Component schema for light fluent overlay has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light fluent overlay has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for overlay is missing name metadata. */ -/* ✔ [assert-true] Component schema for paginator is missing metadata. */ -/* ✔ [assert-equal] Component schema for light fluent paginator has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light fluent paginator has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for paginator is missing name metadata. */ -/* ✔ [assert-true] Component schema for pivot-data-selector is missing metadata. */ -/* ✔ [assert-equal] Component schema for light fluent pivot-data-selector has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light fluent pivot-data-selector has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for pivot-data-selector is missing name metadata. */ -/* ✔ [assert-true] Component schema for linear-bar is missing metadata. */ -/* ✔ [assert-equal] Component schema for light fluent linear-bar has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light fluent linear-bar has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for linear-bar is missing name metadata. */ -/* ✔ [assert-true] Component schema for circular-bar is missing metadata. */ -/* ✔ [assert-equal] Component schema for light fluent circular-bar has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light fluent circular-bar has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for circular-bar is missing name metadata. */ -/* ✔ [assert-true] Component schema for qr-code is missing metadata. */ -/* ✔ [assert-equal] Component schema for light fluent qr-code has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light fluent qr-code has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for qr-code is missing name metadata. */ -/* ✔ [assert-true] Component schema for query-builder is missing metadata. */ -/* ✔ [assert-equal] Component schema for light fluent query-builder has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light fluent query-builder has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for query-builder is missing name metadata. */ -/* ✔ [assert-true] Component schema for radio is missing metadata. */ -/* ✔ [assert-equal] Component schema for light fluent radio has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light fluent radio has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for radio is missing name metadata. */ -/* ✔ [assert-true] Component schema for rating is missing metadata. */ -/* ✔ [assert-equal] Component schema for light fluent rating has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light fluent rating has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for rating is missing name metadata. */ -/* ✔ [assert-true] Component schema for resize-indicator is missing metadata. */ -/* ✔ [assert-equal] Component schema for light fluent resize-indicator has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light fluent resize-indicator has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for resize-indicator is missing name metadata. */ -/* ✔ [assert-true] Component schema for ripple is missing metadata. */ -/* ✔ [assert-equal] Component schema for light fluent ripple has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light fluent ripple has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for ripple is missing name metadata. */ -/* ✔ [assert-true] Component schema for scrollbar is missing metadata. */ -/* ✔ [assert-equal] Component schema for light fluent scrollbar has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light fluent scrollbar has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for scrollbar is missing name metadata. */ -/* ✔ [assert-true] Component schema for select is missing metadata. */ -/* ✔ [assert-equal] Component schema for light fluent select has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light fluent select has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for select is missing name metadata. */ -/* ✔ [assert-true] Component schema for slider is missing metadata. */ -/* ✔ [assert-equal] Component schema for light fluent slider has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light fluent slider has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for slider is missing name metadata. */ -/* ✔ [assert-true] Component schema for snackbar is missing metadata. */ -/* ✔ [assert-equal] Component schema for light fluent snackbar has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light fluent snackbar has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for snackbar is missing name metadata. */ -/* ✔ [assert-true] Component schema for splitter is missing metadata. */ -/* ✔ [assert-equal] Component schema for light fluent splitter has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light fluent splitter has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for splitter is missing name metadata. */ -/* ✔ [assert-true] Component schema for stepper is missing metadata. */ -/* ✔ [assert-equal] Component schema for light fluent stepper has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light fluent stepper has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for stepper is missing name metadata. */ -/* ✔ [assert-true] Component schema for switch is missing metadata. */ -/* ✔ [assert-equal] Component schema for light fluent switch has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light fluent switch has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for switch is missing name metadata. */ -/* ✔ [assert-true] Component schema for tabs is missing metadata. */ -/* ✔ [assert-equal] Component schema for light fluent tabs has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light fluent tabs has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for tabs is missing name metadata. */ -/* ✔ [assert-true] Component schema for tile-manager is missing metadata. */ -/* ✔ [assert-equal] Component schema for light fluent tile-manager has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light fluent tile-manager has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for tile-manager is missing name metadata. */ -/* ✔ [assert-true] Component schema for time-picker is missing metadata. */ -/* ✔ [assert-equal] Component schema for light fluent time-picker has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light fluent time-picker has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for time-picker is missing name metadata. */ -/* ✔ [assert-true] Component schema for toast is missing metadata. */ -/* ✔ [assert-equal] Component schema for light fluent toast has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light fluent toast has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for toast is missing name metadata. */ -/* ✔ [assert-true] Component schema for tooltip is missing metadata. */ -/* ✔ [assert-equal] Component schema for light fluent tooltip has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light fluent tooltip has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for tooltip is missing name metadata. */ -/* ✔ [assert-true] Component schema for tree is missing metadata. */ -/* ✔ [assert-equal] Component schema for light fluent tree has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light fluent tree has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for tree is missing name metadata. */ -/* ✔ [assert-true] Component schema for validator is missing metadata. */ -/* ✔ [assert-equal] Component schema for light fluent validator has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light fluent validator has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for validator is missing name metadata. */ -/* ✔ [assert-true] Component schema for watermark is missing metadata. */ -/* ✔ [assert-equal] Component schema for light fluent watermark has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light fluent watermark has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for watermark is missing name metadata. */ -/* ✔ [assert-true] Component schema for file-input is missing metadata. */ -/* ✔ [assert-equal] Component schema for light fluent file-input has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light fluent file-input has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for file-input is missing name metadata. */ -/* ✔ [assert-true] Component schema for category-chart is missing metadata. */ -/* ✔ [assert-equal] Component schema for light indigo category-chart has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light indigo category-chart has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for category-chart is missing name metadata. */ -/* ✔ [assert-true] Component schema for data-chart is missing metadata. */ -/* ✔ [assert-equal] Component schema for light indigo data-chart has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light indigo data-chart has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for data-chart is missing name metadata. */ -/* ✔ [assert-true] Component schema for doughnut-chart is missing metadata. */ -/* ✔ [assert-equal] Component schema for light indigo doughnut-chart has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light indigo doughnut-chart has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for doughnut-chart is missing name metadata. */ -/* ✔ [assert-true] Component schema for financial-chart is missing metadata. */ -/* ✔ [assert-equal] Component schema for light indigo financial-chart has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light indigo financial-chart has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for financial-chart is missing name metadata. */ -/* ✔ [assert-true] Component schema for funnel-chart is missing metadata. */ -/* ✔ [assert-equal] Component schema for light indigo funnel-chart has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light indigo funnel-chart has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for funnel-chart is missing name metadata. */ -/* ✔ [assert-true] Component schema for linear-gauge is missing metadata. */ -/* ✔ [assert-equal] Component schema for light indigo linear-gauge has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light indigo linear-gauge has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for linear-gauge is missing name metadata. */ -/* ✔ [assert-true] Component schema for radial-gauge is missing metadata. */ -/* ✔ [assert-equal] Component schema for light indigo radial-gauge has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light indigo radial-gauge has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for radial-gauge is missing name metadata. */ -/* ✔ [assert-true] Component schema for geo-map is missing metadata. */ -/* ✔ [assert-equal] Component schema for light indigo geo-map has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light indigo geo-map has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for geo-map is missing name metadata. */ -/* ✔ [assert-true] Component schema for bullet-graph is missing metadata. */ -/* ✔ [assert-equal] Component schema for light indigo bullet-graph has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light indigo bullet-graph has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for bullet-graph is missing name metadata. */ -/* ✔ [assert-true] Component schema for pie-chart is missing metadata. */ -/* ✔ [assert-equal] Component schema for light indigo pie-chart has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light indigo pie-chart has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for pie-chart is missing name metadata. */ -/* ✔ [assert-true] Component schema for shape-chart is missing metadata. */ -/* ✔ [assert-equal] Component schema for light indigo shape-chart has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light indigo shape-chart has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for shape-chart is missing name metadata. */ -/* ✔ [assert-true] Component schema for sparkline is missing metadata. */ -/* ✔ [assert-equal] Component schema for light indigo sparkline has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light indigo sparkline has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for sparkline is missing name metadata. */ -/* ✔ [assert-true] Component schema for action-strip is missing metadata. */ -/* ✔ [assert-equal] Component schema for light indigo action-strip has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light indigo action-strip has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for action-strip is missing name metadata. */ -/* ✔ [assert-true] Component schema for avatar is missing metadata. */ -/* ✔ [assert-equal] Component schema for light indigo avatar has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light indigo avatar has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for avatar is missing name metadata. */ -/* ✔ [assert-true] Component schema for badge is missing metadata. */ -/* ✔ [assert-equal] Component schema for light indigo badge has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light indigo badge has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for badge is missing name metadata. */ -/* ✔ [assert-true] Component schema for banner is missing metadata. */ -/* ✔ [assert-equal] Component schema for light indigo banner has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light indigo banner has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for banner is missing name metadata. */ -/* ✔ [assert-true] Component schema for bottom-nav is missing metadata. */ -/* ✔ [assert-equal] Component schema for light indigo bottom-nav has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light indigo bottom-nav has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for bottom-nav is missing name metadata. */ -/* ✔ [assert-true] Component schema for flat button is missing metadata. */ -/* ✔ [assert-equal] Component schema for light indigo flat button has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light indigo flat button has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for flat button is missing name metadata. */ -/* ✔ [assert-true] Component schema for outlined button is missing metadata. */ -/* ✔ [assert-equal] Component schema for light indigo outlined button has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light indigo outlined button has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for outlined button is missing name metadata. */ -/* ✔ [assert-true] Component schema for contained button is missing metadata. */ -/* ✔ [assert-equal] Component schema for light indigo contained button has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light indigo contained button has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for contained button is missing name metadata. */ -/* ✔ [assert-true] Component schema for fab button is missing metadata. */ -/* ✔ [assert-equal] Component schema for light indigo fab button has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light indigo fab button has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for fab button is missing name metadata. */ -/* ✔ [assert-true] Component schema for button-group is missing metadata. */ -/* ✔ [assert-equal] Component schema for light indigo button-group has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light indigo button-group has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for button-group is missing name metadata. */ -/* ✔ [assert-true] Component schema for calendar is missing metadata. */ -/* ✔ [assert-equal] Component schema for light indigo calendar has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light indigo calendar has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for calendar is missing name metadata. */ -/* ✔ [assert-true] Component schema for card is missing metadata. */ -/* ✔ [assert-equal] Component schema for light indigo card has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light indigo card has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for card is missing name metadata. */ -/* ✔ [assert-true] Component schema for carousel is missing metadata. */ -/* ✔ [assert-equal] Component schema for light indigo carousel has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light indigo carousel has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for carousel is missing name metadata. */ -/* ✔ [assert-true] Component schema for chat is missing metadata. */ -/* ✔ [assert-equal] Component schema for light indigo chat has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light indigo chat has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for chat is missing name metadata. */ -/* ✔ [assert-true] Component schema for checkbox is missing metadata. */ -/* ✔ [assert-equal] Component schema for light indigo checkbox has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light indigo checkbox has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for checkbox is missing name metadata. */ -/* ✔ [assert-true] Component schema for chip is missing metadata. */ -/* ✔ [assert-equal] Component schema for light indigo chip has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light indigo chip has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for chip is missing name metadata. */ -/* ✔ [assert-true] Component schema for color-picker is missing metadata. */ -/* ✔ [assert-equal] Component schema for light indigo color-picker has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light indigo color-picker has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for color-picker is missing name metadata. */ -/* ✔ [assert-true] Component schema for column-actions is missing metadata. */ -/* ✔ [assert-equal] Component schema for light indigo column-actions has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light indigo column-actions has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for column-actions is missing name metadata. */ -/* ✔ [assert-true] Component schema for combo is missing metadata. */ -/* ✔ [assert-equal] Component schema for light indigo combo has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light indigo combo has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for combo is missing name metadata. */ -/* ✔ [assert-true] Component schema for date-picker is missing metadata. */ -/* ✔ [assert-equal] Component schema for light indigo date-picker has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light indigo date-picker has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for date-picker is missing name metadata. */ -/* ✔ [assert-true] Component schema for date-range is missing metadata. */ -/* ✔ [assert-equal] Component schema for light indigo date-range has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light indigo date-range has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for date-range is missing name metadata. */ -/* ✔ [assert-true] Component schema for dialog is missing metadata. */ -/* ✔ [assert-equal] Component schema for light indigo dialog has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light indigo dialog has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for dialog is missing name metadata. */ -/* ✔ [assert-true] Component schema for divider is missing metadata. */ -/* ✔ [assert-equal] Component schema for light indigo divider has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light indigo divider has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for divider is missing name metadata. */ -/* ✔ [assert-true] Component schema for dockmanager is missing metadata. */ -/* ✔ [assert-equal] Component schema for light indigo dockmanager has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light indigo dockmanager has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for dockmanager is missing name metadata. */ -/* ✔ [assert-true] Component schema for drop-down is missing metadata. */ -/* ✔ [assert-equal] Component schema for light indigo drop-down has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light indigo drop-down has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for drop-down is missing name metadata. */ -/* ✔ [assert-true] Component schema for expansion-panel is missing metadata. */ -/* ✔ [assert-equal] Component schema for light indigo expansion-panel has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light indigo expansion-panel has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for expansion-panel is missing name metadata. */ -/* ✔ [assert-true] Component schema for grid is missing metadata. */ -/* ✔ [assert-equal] Component schema for light indigo grid has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light indigo grid has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for grid is missing name metadata. */ -/* ✔ [assert-true] Component schema for grid-excel-filtering is missing metadata. */ -/* ✔ [assert-equal] Component schema for light indigo grid-excel-filtering has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light indigo grid-excel-filtering has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for grid-excel-filtering is missing name metadata. */ -/* ✔ [assert-true] Component schema for grid-filtering is missing metadata. */ -/* ✔ [assert-equal] Component schema for light indigo grid-filtering has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light indigo grid-filtering has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for grid-filtering is missing name metadata. */ -/* ✔ [assert-true] Component schema for grid-summary is missing metadata. */ -/* ✔ [assert-equal] Component schema for light indigo grid-summary has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light indigo grid-summary has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for grid-summary is missing name metadata. */ -/* ✔ [assert-true] Component schema for grid-toolbar is missing metadata. */ -/* ✔ [assert-equal] Component schema for light indigo grid-toolbar has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light indigo grid-toolbar has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for grid-toolbar is missing name metadata. */ -/* ✔ [assert-true] Component schema for highlight is missing metadata. */ -/* ✔ [assert-equal] Component schema for light indigo highlight has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light indigo highlight has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for highlight is missing name metadata. */ -/* ✔ [assert-true] Component schema for icon is missing metadata. */ -/* ✔ [assert-equal] Component schema for light indigo icon has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light indigo icon has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for icon is missing name metadata. */ -/* ✔ [assert-true] Component schema for flat icon-button is missing metadata. */ -/* ✔ [assert-equal] Component schema for light indigo flat icon-button has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light indigo flat icon-button has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for flat icon-button is missing name metadata. */ -/* ✔ [assert-true] Component schema for contained icon-button is missing metadata. */ -/* ✔ [assert-equal] Component schema for light indigo contained icon-button has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light indigo contained icon-button has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for contained icon-button is missing name metadata. */ -/* ✔ [assert-true] Component schema for outlined icon-button is missing metadata. */ -/* ✔ [assert-equal] Component schema for light indigo outlined icon-button has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light indigo outlined icon-button has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for outlined icon-button is missing name metadata. */ -/* ✔ [assert-true] Component schema for input-group is missing metadata. */ -/* ✔ [assert-equal] Component schema for light indigo input-group has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light indigo input-group has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for input-group is missing name metadata. */ -/* ✔ [assert-true] Component schema for label is missing metadata. */ -/* ✔ [assert-equal] Component schema for light indigo label has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light indigo label has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for label is missing name metadata. */ -/* ✔ [assert-true] Component schema for list is missing metadata. */ -/* ✔ [assert-equal] Component schema for light indigo list has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light indigo list has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for list is missing name metadata. */ -/* ✔ [assert-true] Component schema for navbar is missing metadata. */ -/* ✔ [assert-equal] Component schema for light indigo navbar has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light indigo navbar has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for navbar is missing name metadata. */ -/* ✔ [assert-true] Component schema for nav-drawer is missing metadata. */ -/* ✔ [assert-equal] Component schema for light indigo nav-drawer has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light indigo nav-drawer has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for nav-drawer is missing name metadata. */ -/* ✔ [assert-true] Component schema for overlay is missing metadata. */ -/* ✔ [assert-equal] Component schema for light indigo overlay has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light indigo overlay has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for overlay is missing name metadata. */ -/* ✔ [assert-true] Component schema for paginator is missing metadata. */ -/* ✔ [assert-equal] Component schema for light indigo paginator has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light indigo paginator has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for paginator is missing name metadata. */ -/* ✔ [assert-true] Component schema for pivot-data-selector is missing metadata. */ -/* ✔ [assert-equal] Component schema for light indigo pivot-data-selector has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light indigo pivot-data-selector has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for pivot-data-selector is missing name metadata. */ -/* ✔ [assert-true] Component schema for linear-bar is missing metadata. */ -/* ✔ [assert-equal] Component schema for light indigo linear-bar has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light indigo linear-bar has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for linear-bar is missing name metadata. */ -/* ✔ [assert-true] Component schema for circular-bar is missing metadata. */ -/* ✔ [assert-equal] Component schema for light indigo circular-bar has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light indigo circular-bar has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for circular-bar is missing name metadata. */ -/* ✔ [assert-true] Component schema for qr-code is missing metadata. */ -/* ✔ [assert-equal] Component schema for light indigo qr-code has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light indigo qr-code has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for qr-code is missing name metadata. */ -/* ✔ [assert-true] Component schema for query-builder is missing metadata. */ -/* ✔ [assert-equal] Component schema for light indigo query-builder has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light indigo query-builder has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for query-builder is missing name metadata. */ -/* ✔ [assert-true] Component schema for radio is missing metadata. */ -/* ✔ [assert-equal] Component schema for light indigo radio has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light indigo radio has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for radio is missing name metadata. */ -/* ✔ [assert-true] Component schema for rating is missing metadata. */ -/* ✔ [assert-equal] Component schema for light indigo rating has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light indigo rating has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for rating is missing name metadata. */ -/* ✔ [assert-true] Component schema for resize-indicator is missing metadata. */ -/* ✔ [assert-equal] Component schema for light indigo resize-indicator has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light indigo resize-indicator has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for resize-indicator is missing name metadata. */ -/* ✔ [assert-true] Component schema for ripple is missing metadata. */ -/* ✔ [assert-equal] Component schema for light indigo ripple has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light indigo ripple has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for ripple is missing name metadata. */ -/* ✔ [assert-true] Component schema for scrollbar is missing metadata. */ -/* ✔ [assert-equal] Component schema for light indigo scrollbar has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light indigo scrollbar has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for scrollbar is missing name metadata. */ -/* ✔ [assert-true] Component schema for select is missing metadata. */ -/* ✔ [assert-equal] Component schema for light indigo select has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light indigo select has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for select is missing name metadata. */ -/* ✔ [assert-true] Component schema for slider is missing metadata. */ -/* ✔ [assert-equal] Component schema for light indigo slider has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light indigo slider has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for slider is missing name metadata. */ -/* ✔ [assert-true] Component schema for snackbar is missing metadata. */ -/* ✔ [assert-equal] Component schema for light indigo snackbar has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light indigo snackbar has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for snackbar is missing name metadata. */ -/* ✔ [assert-true] Component schema for splitter is missing metadata. */ -/* ✔ [assert-equal] Component schema for light indigo splitter has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light indigo splitter has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for splitter is missing name metadata. */ -/* ✔ [assert-true] Component schema for stepper is missing metadata. */ -/* ✔ [assert-equal] Component schema for light indigo stepper has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light indigo stepper has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for stepper is missing name metadata. */ -/* ✔ [assert-true] Component schema for switch is missing metadata. */ -/* ✔ [assert-equal] Component schema for light indigo switch has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light indigo switch has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for switch is missing name metadata. */ -/* ✔ [assert-true] Component schema for tabs is missing metadata. */ -/* ✔ [assert-equal] Component schema for light indigo tabs has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light indigo tabs has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for tabs is missing name metadata. */ -/* ✔ [assert-true] Component schema for tile-manager is missing metadata. */ -/* ✔ [assert-equal] Component schema for light indigo tile-manager has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light indigo tile-manager has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for tile-manager is missing name metadata. */ -/* ✔ [assert-true] Component schema for time-picker is missing metadata. */ -/* ✔ [assert-equal] Component schema for light indigo time-picker has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light indigo time-picker has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for time-picker is missing name metadata. */ -/* ✔ [assert-true] Component schema for toast is missing metadata. */ -/* ✔ [assert-equal] Component schema for light indigo toast has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light indigo toast has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for toast is missing name metadata. */ -/* ✔ [assert-true] Component schema for tooltip is missing metadata. */ -/* ✔ [assert-equal] Component schema for light indigo tooltip has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light indigo tooltip has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for tooltip is missing name metadata. */ -/* ✔ [assert-true] Component schema for tree is missing metadata. */ -/* ✔ [assert-equal] Component schema for light indigo tree has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light indigo tree has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for tree is missing name metadata. */ -/* ✔ [assert-true] Component schema for validator is missing metadata. */ -/* ✔ [assert-equal] Component schema for light indigo validator has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light indigo validator has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for validator is missing name metadata. */ -/* ✔ [assert-true] Component schema for watermark is missing metadata. */ -/* ✔ [assert-equal] Component schema for light indigo watermark has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light indigo watermark has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for watermark is missing name metadata. */ -/* ✔ [assert-true] Component schema for file-input is missing metadata. */ -/* ✔ [assert-equal] Component schema for light indigo file-input has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light indigo file-input has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for file-input is missing name metadata. */ -/* ✔ [assert-true] Component schema for category-chart is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark material category-chart has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark material category-chart has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for category-chart is missing name metadata. */ -/* ✔ [assert-true] Component schema for data-chart is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark material data-chart has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark material data-chart has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for data-chart is missing name metadata. */ -/* ✔ [assert-true] Component schema for doughnut-chart is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark material doughnut-chart has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark material doughnut-chart has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for doughnut-chart is missing name metadata. */ -/* ✔ [assert-true] Component schema for financial-chart is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark material financial-chart has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark material financial-chart has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for financial-chart is missing name metadata. */ -/* ✔ [assert-true] Component schema for funnel-chart is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark material funnel-chart has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark material funnel-chart has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for funnel-chart is missing name metadata. */ -/* ✔ [assert-true] Component schema for linear-gauge is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark material linear-gauge has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark material linear-gauge has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for linear-gauge is missing name metadata. */ -/* ✔ [assert-true] Component schema for radial-gauge is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark material radial-gauge has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark material radial-gauge has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for radial-gauge is missing name metadata. */ -/* ✔ [assert-true] Component schema for geo-map is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark material geo-map has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark material geo-map has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for geo-map is missing name metadata. */ -/* ✔ [assert-true] Component schema for bullet-graph is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark material bullet-graph has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark material bullet-graph has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for bullet-graph is missing name metadata. */ -/* ✔ [assert-true] Component schema for pie-chart is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark material pie-chart has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark material pie-chart has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for pie-chart is missing name metadata. */ -/* ✔ [assert-true] Component schema for shape-chart is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark material shape-chart has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark material shape-chart has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for shape-chart is missing name metadata. */ -/* ✔ [assert-true] Component schema for sparkline is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark material sparkline has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark material sparkline has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for sparkline is missing name metadata. */ -/* ✔ [assert-true] Component schema for action-strip is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark material action-strip has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark material action-strip has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for action-strip is missing name metadata. */ -/* ✔ [assert-true] Component schema for avatar is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark material avatar has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark material avatar has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for avatar is missing name metadata. */ -/* ✔ [assert-true] Component schema for badge is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark material badge has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark material badge has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for badge is missing name metadata. */ -/* ✔ [assert-true] Component schema for banner is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark material banner has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark material banner has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for banner is missing name metadata. */ -/* ✔ [assert-true] Component schema for bottom-nav is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark material bottom-nav has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark material bottom-nav has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for bottom-nav is missing name metadata. */ -/* ✔ [assert-true] Component schema for flat button is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark material flat button has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark material flat button has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for flat button is missing name metadata. */ -/* ✔ [assert-true] Component schema for outlined button is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark material outlined button has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark material outlined button has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for outlined button is missing name metadata. */ -/* ✔ [assert-true] Component schema for contained button is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark material contained button has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark material contained button has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for contained button is missing name metadata. */ -/* ✔ [assert-true] Component schema for fab button is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark material fab button has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark material fab button has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for fab button is missing name metadata. */ -/* ✔ [assert-true] Component schema for button-group is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark material button-group has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark material button-group has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for button-group is missing name metadata. */ -/* ✔ [assert-true] Component schema for calendar is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark material calendar has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark material calendar has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for calendar is missing name metadata. */ -/* ✔ [assert-true] Component schema for card is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark material card has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark material card has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for card is missing name metadata. */ -/* ✔ [assert-true] Component schema for carousel is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark material carousel has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark material carousel has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for carousel is missing name metadata. */ -/* ✔ [assert-true] Component schema for chat is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark material chat has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark material chat has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for chat is missing name metadata. */ -/* ✔ [assert-true] Component schema for checkbox is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark material checkbox has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark material checkbox has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for checkbox is missing name metadata. */ -/* ✔ [assert-true] Component schema for chip is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark material chip has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark material chip has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for chip is missing name metadata. */ -/* ✔ [assert-true] Component schema for color-picker is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark material color-picker has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark material color-picker has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for color-picker is missing name metadata. */ -/* ✔ [assert-true] Component schema for column-actions is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark material column-actions has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark material column-actions has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for column-actions is missing name metadata. */ -/* ✔ [assert-true] Component schema for combo is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark material combo has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark material combo has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for combo is missing name metadata. */ -/* ✔ [assert-true] Component schema for date-picker is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark material date-picker has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark material date-picker has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for date-picker is missing name metadata. */ -/* ✔ [assert-true] Component schema for date-range is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark material date-range has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark material date-range has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for date-range is missing name metadata. */ -/* ✔ [assert-true] Component schema for dialog is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark material dialog has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark material dialog has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for dialog is missing name metadata. */ -/* ✔ [assert-true] Component schema for divider is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark material divider has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark material divider has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for divider is missing name metadata. */ -/* ✔ [assert-true] Component schema for dockmanager is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark material dockmanager has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark material dockmanager has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for dockmanager is missing name metadata. */ -/* ✔ [assert-true] Component schema for drop-down is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark material drop-down has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark material drop-down has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for drop-down is missing name metadata. */ -/* ✔ [assert-true] Component schema for expansion-panel is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark material expansion-panel has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark material expansion-panel has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for expansion-panel is missing name metadata. */ -/* ✔ [assert-true] Component schema for grid is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark material grid has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark material grid has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for grid is missing name metadata. */ -/* ✔ [assert-true] Component schema for grid-excel-filtering is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark material grid-excel-filtering has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark material grid-excel-filtering has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for grid-excel-filtering is missing name metadata. */ -/* ✔ [assert-true] Component schema for grid-filtering is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark material grid-filtering has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark material grid-filtering has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for grid-filtering is missing name metadata. */ -/* ✔ [assert-true] Component schema for grid-summary is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark material grid-summary has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark material grid-summary has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for grid-summary is missing name metadata. */ -/* ✔ [assert-true] Component schema for grid-toolbar is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark material grid-toolbar has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark material grid-toolbar has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for grid-toolbar is missing name metadata. */ -/* ✔ [assert-true] Component schema for highlight is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark material highlight has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark material highlight has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for highlight is missing name metadata. */ -/* ✔ [assert-true] Component schema for icon is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark material icon has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark material icon has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for icon is missing name metadata. */ -/* ✔ [assert-true] Component schema for flat icon-button is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark material flat icon-button has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark material flat icon-button has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for flat icon-button is missing name metadata. */ -/* ✔ [assert-true] Component schema for outlined icon-button is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark material outlined icon-button has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark material outlined icon-button has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for outlined icon-button is missing name metadata. */ -/* ✔ [assert-true] Component schema for contained icon-button is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark material contained icon-button has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark material contained icon-button has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for contained icon-button is missing name metadata. */ -/* ✔ [assert-true] Component schema for input-group is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark material input-group has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark material input-group has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for input-group is missing name metadata. */ -/* ✔ [assert-true] Component schema for label is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark material label has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark material label has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for label is missing name metadata. */ -/* ✔ [assert-true] Component schema for list is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark material list has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark material list has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for list is missing name metadata. */ -/* ✔ [assert-true] Component schema for navbar is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark material navbar has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark material navbar has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for navbar is missing name metadata. */ -/* ✔ [assert-true] Component schema for nav-drawer is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark material nav-drawer has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark material nav-drawer has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for nav-drawer is missing name metadata. */ -/* ✔ [assert-true] Component schema for overlay is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark material overlay has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark material overlay has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for overlay is missing name metadata. */ -/* ✔ [assert-true] Component schema for paginator is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark material paginator has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark material paginator has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for paginator is missing name metadata. */ -/* ✔ [assert-true] Component schema for pivot-data-selector is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark material pivot-data-selector has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark material pivot-data-selector has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for pivot-data-selector is missing name metadata. */ -/* ✔ [assert-true] Component schema for linear-bar is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark material linear-bar has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark material linear-bar has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for linear-bar is missing name metadata. */ -/* ✔ [assert-true] Component schema for circular-bar is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark material circular-bar has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark material circular-bar has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for circular-bar is missing name metadata. */ -/* ✔ [assert-true] Component schema for qr-code is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark material qr-code has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark material qr-code has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for qr-code is missing name metadata. */ -/* ✔ [assert-true] Component schema for query-builder is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark material query-builder has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark material query-builder has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for query-builder is missing name metadata. */ -/* ✔ [assert-true] Component schema for radio is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark material radio has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark material radio has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for radio is missing name metadata. */ -/* ✔ [assert-true] Component schema for rating is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark material rating has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark material rating has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for rating is missing name metadata. */ -/* ✔ [assert-true] Component schema for resize-indicator is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark material resize-indicator has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark material resize-indicator has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for resize-indicator is missing name metadata. */ -/* ✔ [assert-true] Component schema for ripple is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark material ripple has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark material ripple has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for ripple is missing name metadata. */ -/* ✔ [assert-true] Component schema for scrollbar is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark material scrollbar has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark material scrollbar has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for scrollbar is missing name metadata. */ -/* ✔ [assert-true] Component schema for select is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark material select has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark material select has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for select is missing name metadata. */ -/* ✔ [assert-true] Component schema for slider is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark material slider has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark material slider has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for slider is missing name metadata. */ -/* ✔ [assert-true] Component schema for snackbar is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark material snackbar has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark material snackbar has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for snackbar is missing name metadata. */ -/* ✔ [assert-true] Component schema for splitter is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark material splitter has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark material splitter has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for splitter is missing name metadata. */ -/* ✔ [assert-true] Component schema for stepper is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark material stepper has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark material stepper has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for stepper is missing name metadata. */ -/* ✔ [assert-true] Component schema for switch is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark material switch has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark material switch has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for switch is missing name metadata. */ -/* ✔ [assert-true] Component schema for tabs is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark material tabs has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark material tabs has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for tabs is missing name metadata. */ -/* ✔ [assert-true] Component schema for tile-manager is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark material tile-manager has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark material tile-manager has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for tile-manager is missing name metadata. */ -/* ✔ [assert-true] Component schema for time-picker is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark material time-picker has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark material time-picker has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for time-picker is missing name metadata. */ -/* ✔ [assert-true] Component schema for toast is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark material toast has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark material toast has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for toast is missing name metadata. */ -/* ✔ [assert-true] Component schema for tooltip is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark material tooltip has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark material tooltip has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for tooltip is missing name metadata. */ -/* ✔ [assert-true] Component schema for tree is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark material tree has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark material tree has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for tree is missing name metadata. */ -/* ✔ [assert-true] Component schema for validator is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark material validator has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark material validator has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for validator is missing name metadata. */ -/* ✔ [assert-true] Component schema for watermark is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark material watermark has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark material watermark has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for watermark is missing name metadata. */ -/* ✔ [assert-true] Component schema for file-input is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark material file-input has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark material file-input has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for file-input is missing name metadata. */ -/* ✔ [assert-true] Component schema for category-chart is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap category-chart has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap category-chart has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for category-chart is missing name metadata. */ -/* ✔ [assert-true] Component schema for data-chart is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap data-chart has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap data-chart has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for data-chart is missing name metadata. */ -/* ✔ [assert-true] Component schema for doughnut-chart is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap doughnut-chart has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap doughnut-chart has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for doughnut-chart is missing name metadata. */ -/* ✔ [assert-true] Component schema for financial-chart is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap financial-chart has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap financial-chart has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for financial-chart is missing name metadata. */ -/* ✔ [assert-true] Component schema for funnel-chart is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap funnel-chart has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap funnel-chart has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for funnel-chart is missing name metadata. */ -/* ✔ [assert-true] Component schema for linear-gauge is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap linear-gauge has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap linear-gauge has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for linear-gauge is missing name metadata. */ -/* ✔ [assert-true] Component schema for radial-gauge is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap radial-gauge has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap radial-gauge has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for radial-gauge is missing name metadata. */ -/* ✔ [assert-true] Component schema for geo-map is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap geo-map has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap geo-map has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for geo-map is missing name metadata. */ -/* ✔ [assert-true] Component schema for bullet-graph is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap bullet-graph has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap bullet-graph has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for bullet-graph is missing name metadata. */ -/* ✔ [assert-true] Component schema for pie-chart is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap pie-chart has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap pie-chart has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for pie-chart is missing name metadata. */ -/* ✔ [assert-true] Component schema for shape-chart is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap shape-chart has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap shape-chart has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for shape-chart is missing name metadata. */ -/* ✔ [assert-true] Component schema for sparkline is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap sparkline has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap sparkline has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for sparkline is missing name metadata. */ -/* ✔ [assert-true] Component schema for action-strip is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap action-strip has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap action-strip has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for action-strip is missing name metadata. */ -/* ✔ [assert-true] Component schema for avatar is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap avatar has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap avatar has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for avatar is missing name metadata. */ -/* ✔ [assert-true] Component schema for badge is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap badge has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap badge has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for badge is missing name metadata. */ -/* ✔ [assert-true] Component schema for banner is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap banner has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap banner has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for banner is missing name metadata. */ -/* ✔ [assert-true] Component schema for bottom-nav is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap bottom-nav has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap bottom-nav has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for bottom-nav is missing name metadata. */ -/* ✔ [assert-true] Component schema for flat button is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap flat button has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap flat button has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for flat button is missing name metadata. */ -/* ✔ [assert-true] Component schema for outlined button is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap outlined button has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap outlined button has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for outlined button is missing name metadata. */ -/* ✔ [assert-true] Component schema for contained button is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap contained button has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap contained button has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for contained button is missing name metadata. */ -/* ✔ [assert-true] Component schema for fab button is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap fab button has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap fab button has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for fab button is missing name metadata. */ -/* ✔ [assert-true] Component schema for button-group is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap button-group has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap button-group has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for button-group is missing name metadata. */ -/* ✔ [assert-true] Component schema for calendar is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap calendar has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap calendar has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for calendar is missing name metadata. */ -/* ✔ [assert-true] Component schema for card is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap card has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap card has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for card is missing name metadata. */ -/* ✔ [assert-true] Component schema for carousel is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap carousel has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap carousel has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for carousel is missing name metadata. */ -/* ✔ [assert-true] Component schema for chat is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap chat has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap chat has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for chat is missing name metadata. */ -/* ✔ [assert-true] Component schema for checkbox is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap checkbox has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap checkbox has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for checkbox is missing name metadata. */ -/* ✔ [assert-true] Component schema for chip is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap chip has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap chip has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for chip is missing name metadata. */ -/* ✔ [assert-true] Component schema for color-picker is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap color-picker has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap color-picker has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for color-picker is missing name metadata. */ -/* ✔ [assert-true] Component schema for column-actions is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap column-actions has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap column-actions has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for column-actions is missing name metadata. */ -/* ✔ [assert-true] Component schema for combo is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap combo has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap combo has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for combo is missing name metadata. */ -/* ✔ [assert-true] Component schema for date-picker is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap date-picker has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap date-picker has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for date-picker is missing name metadata. */ -/* ✔ [assert-true] Component schema for date-range is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap date-range has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap date-range has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for date-range is missing name metadata. */ -/* ✔ [assert-true] Component schema for dialog is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap dialog has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap dialog has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for dialog is missing name metadata. */ -/* ✔ [assert-true] Component schema for divider is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap divider has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap divider has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for divider is missing name metadata. */ -/* ✔ [assert-true] Component schema for dockmanager is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap dockmanager has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap dockmanager has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for dockmanager is missing name metadata. */ -/* ✔ [assert-true] Component schema for drop-down is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap drop-down has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap drop-down has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for drop-down is missing name metadata. */ -/* ✔ [assert-true] Component schema for expansion-panel is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap expansion-panel has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap expansion-panel has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for expansion-panel is missing name metadata. */ -/* ✔ [assert-true] Component schema for grid is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap grid has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap grid has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for grid is missing name metadata. */ -/* ✔ [assert-true] Component schema for grid-excel-filtering is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap grid-excel-filtering has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap grid-excel-filtering has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for grid-excel-filtering is missing name metadata. */ -/* ✔ [assert-true] Component schema for grid-filtering is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap grid-filtering has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap grid-filtering has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for grid-filtering is missing name metadata. */ -/* ✔ [assert-true] Component schema for grid-summary is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap grid-summary has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap grid-summary has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for grid-summary is missing name metadata. */ -/* ✔ [assert-true] Component schema for grid-toolbar is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap grid-toolbar has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap grid-toolbar has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for grid-toolbar is missing name metadata. */ -/* ✔ [assert-true] Component schema for highlight is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap highlight has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap highlight has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for highlight is missing name metadata. */ -/* ✔ [assert-true] Component schema for icon is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap icon has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap icon has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for icon is missing name metadata. */ -/* ✔ [assert-true] Component schema for flat icon-button is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap flat icon-button has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap flat icon-button has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for flat icon-button is missing name metadata. */ -/* ✔ [assert-true] Component schema for outlined icon-button is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap outlined icon-button has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap outlined icon-button has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for outlined icon-button is missing name metadata. */ -/* ✔ [assert-true] Component schema for contained icon-button is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap contained icon-button has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap contained icon-button has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for contained icon-button is missing name metadata. */ -/* ✔ [assert-true] Component schema for input-group is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap input-group has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap input-group has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for input-group is missing name metadata. */ -/* ✔ [assert-true] Component schema for label is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap label has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap label has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for label is missing name metadata. */ -/* ✔ [assert-true] Component schema for list is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap list has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap list has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for list is missing name metadata. */ -/* ✔ [assert-true] Component schema for navbar is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap navbar has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap navbar has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for navbar is missing name metadata. */ -/* ✔ [assert-true] Component schema for nav-drawer is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap nav-drawer has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap nav-drawer has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for nav-drawer is missing name metadata. */ -/* ✔ [assert-true] Component schema for overlay is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap overlay has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap overlay has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for overlay is missing name metadata. */ -/* ✔ [assert-true] Component schema for paginator is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap paginator has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap paginator has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for paginator is missing name metadata. */ -/* ✔ [assert-true] Component schema for pivot-data-selector is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap pivot-data-selector has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap pivot-data-selector has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for pivot-data-selector is missing name metadata. */ -/* ✔ [assert-true] Component schema for linear-bar is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap linear-bar has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap linear-bar has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for linear-bar is missing name metadata. */ -/* ✔ [assert-true] Component schema for circular-bar is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap circular-bar has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap circular-bar has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for circular-bar is missing name metadata. */ -/* ✔ [assert-true] Component schema for qr-code is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap qr-code has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap qr-code has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for qr-code is missing name metadata. */ -/* ✔ [assert-true] Component schema for query-builder is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap query-builder has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap query-builder has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for query-builder is missing name metadata. */ -/* ✔ [assert-true] Component schema for radio is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap radio has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap radio has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for radio is missing name metadata. */ -/* ✔ [assert-true] Component schema for rating is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap rating has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap rating has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for rating is missing name metadata. */ -/* ✔ [assert-true] Component schema for resize-indicator is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap resize-indicator has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap resize-indicator has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for resize-indicator is missing name metadata. */ -/* ✔ [assert-true] Component schema for ripple is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap ripple has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap ripple has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for ripple is missing name metadata. */ -/* ✔ [assert-true] Component schema for scrollbar is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap scrollbar has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap scrollbar has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for scrollbar is missing name metadata. */ -/* ✔ [assert-true] Component schema for select is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap select has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap select has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for select is missing name metadata. */ -/* ✔ [assert-true] Component schema for slider is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap slider has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap slider has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for slider is missing name metadata. */ -/* ✔ [assert-true] Component schema for snackbar is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap snackbar has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap snackbar has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for snackbar is missing name metadata. */ -/* ✔ [assert-true] Component schema for splitter is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap splitter has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap splitter has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for splitter is missing name metadata. */ -/* ✔ [assert-true] Component schema for stepper is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap stepper has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap stepper has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for stepper is missing name metadata. */ -/* ✔ [assert-true] Component schema for switch is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap switch has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap switch has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for switch is missing name metadata. */ -/* ✔ [assert-true] Component schema for tabs is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap tabs has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap tabs has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for tabs is missing name metadata. */ -/* ✔ [assert-true] Component schema for tile-manager is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap tile-manager has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap tile-manager has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for tile-manager is missing name metadata. */ -/* ✔ [assert-true] Component schema for time-picker is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap time-picker has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap time-picker has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for time-picker is missing name metadata. */ -/* ✔ [assert-true] Component schema for toast is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap toast has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap toast has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for toast is missing name metadata. */ -/* ✔ [assert-true] Component schema for tooltip is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap tooltip has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap tooltip has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for tooltip is missing name metadata. */ -/* ✔ [assert-true] Component schema for tree is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap tree has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap tree has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for tree is missing name metadata. */ -/* ✔ [assert-true] Component schema for validator is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap validator has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap validator has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for validator is missing name metadata. */ -/* ✔ [assert-true] Component schema for watermark is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap watermark has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap watermark has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for watermark is missing name metadata. */ -/* ✔ [assert-true] Component schema for file-input is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap file-input has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap file-input has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for file-input is missing name metadata. */ -/* ✔ [assert-true] Component schema for category-chart is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent category-chart has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent category-chart has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for category-chart is missing name metadata. */ -/* ✔ [assert-true] Component schema for data-chart is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent data-chart has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent data-chart has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for data-chart is missing name metadata. */ -/* ✔ [assert-true] Component schema for doughnut-chart is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent doughnut-chart has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent doughnut-chart has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for doughnut-chart is missing name metadata. */ -/* ✔ [assert-true] Component schema for financial-chart is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent financial-chart has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent financial-chart has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for financial-chart is missing name metadata. */ -/* ✔ [assert-true] Component schema for funnel-chart is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent funnel-chart has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent funnel-chart has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for funnel-chart is missing name metadata. */ -/* ✔ [assert-true] Component schema for linear-gauge is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent linear-gauge has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent linear-gauge has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for linear-gauge is missing name metadata. */ -/* ✔ [assert-true] Component schema for radial-gauge is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent radial-gauge has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent radial-gauge has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for radial-gauge is missing name metadata. */ -/* ✔ [assert-true] Component schema for geo-map is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent geo-map has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent geo-map has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for geo-map is missing name metadata. */ -/* ✔ [assert-true] Component schema for bullet-graph is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent bullet-graph has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent bullet-graph has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for bullet-graph is missing name metadata. */ -/* ✔ [assert-true] Component schema for pie-chart is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent pie-chart has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent pie-chart has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for pie-chart is missing name metadata. */ -/* ✔ [assert-true] Component schema for shape-chart is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent shape-chart has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent shape-chart has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for shape-chart is missing name metadata. */ -/* ✔ [assert-true] Component schema for sparkline is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent sparkline has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent sparkline has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for sparkline is missing name metadata. */ -/* ✔ [assert-true] Component schema for action-strip is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent action-strip has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent action-strip has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for action-strip is missing name metadata. */ -/* ✔ [assert-true] Component schema for avatar is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent avatar has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent avatar has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for avatar is missing name metadata. */ -/* ✔ [assert-true] Component schema for badge is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent badge has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent badge has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for badge is missing name metadata. */ -/* ✔ [assert-true] Component schema for banner is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent banner has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent banner has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for banner is missing name metadata. */ -/* ✔ [assert-true] Component schema for bottom-nav is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent bottom-nav has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent bottom-nav has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for bottom-nav is missing name metadata. */ -/* ✔ [assert-true] Component schema for flat button is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent flat button has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent flat button has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for flat button is missing name metadata. */ -/* ✔ [assert-true] Component schema for outlined button is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent outlined button has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent outlined button has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for outlined button is missing name metadata. */ -/* ✔ [assert-true] Component schema for contained button is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent contained button has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent contained button has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for contained button is missing name metadata. */ -/* ✔ [assert-true] Component schema for fab button is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent fab button has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent fab button has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for fab button is missing name metadata. */ -/* ✔ [assert-true] Component schema for button-group is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent button-group has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent button-group has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for button-group is missing name metadata. */ -/* ✔ [assert-true] Component schema for calendar is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent calendar has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent calendar has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for calendar is missing name metadata. */ -/* ✔ [assert-true] Component schema for card is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent card has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent card has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for card is missing name metadata. */ -/* ✔ [assert-true] Component schema for carousel is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent carousel has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent carousel has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for carousel is missing name metadata. */ -/* ✔ [assert-true] Component schema for chat is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent chat has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent chat has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for chat is missing name metadata. */ -/* ✔ [assert-true] Component schema for checkbox is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent checkbox has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent checkbox has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for checkbox is missing name metadata. */ -/* ✔ [assert-true] Component schema for chip is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent chip has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent chip has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for chip is missing name metadata. */ -/* ✔ [assert-true] Component schema for color-picker is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent color-picker has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent color-picker has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for color-picker is missing name metadata. */ -/* ✔ [assert-true] Component schema for column-actions is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent column-actions has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent column-actions has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for column-actions is missing name metadata. */ -/* ✔ [assert-true] Component schema for combo is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent combo has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent combo has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for combo is missing name metadata. */ -/* ✔ [assert-true] Component schema for date-picker is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent date-picker has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent date-picker has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for date-picker is missing name metadata. */ -/* ✔ [assert-true] Component schema for date-range is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent date-range has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent date-range has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for date-range is missing name metadata. */ -/* ✔ [assert-true] Component schema for dialog is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent dialog has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent dialog has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for dialog is missing name metadata. */ -/* ✔ [assert-true] Component schema for divider is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent divider has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent divider has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for divider is missing name metadata. */ -/* ✔ [assert-true] Component schema for dockmanager is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent dockmanager has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent dockmanager has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for dockmanager is missing name metadata. */ -/* ✔ [assert-true] Component schema for drop-down is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent drop-down has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent drop-down has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for drop-down is missing name metadata. */ -/* ✔ [assert-true] Component schema for expansion-panel is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent expansion-panel has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent expansion-panel has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for expansion-panel is missing name metadata. */ -/* ✔ [assert-true] Component schema for grid is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent grid has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent grid has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for grid is missing name metadata. */ -/* ✔ [assert-true] Component schema for grid-excel-filtering is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent grid-excel-filtering has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent grid-excel-filtering has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for grid-excel-filtering is missing name metadata. */ -/* ✔ [assert-true] Component schema for grid-filtering is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent grid-filtering has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent grid-filtering has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for grid-filtering is missing name metadata. */ -/* ✔ [assert-true] Component schema for grid-summary is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent grid-summary has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent grid-summary has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for grid-summary is missing name metadata. */ -/* ✔ [assert-true] Component schema for grid-toolbar is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent grid-toolbar has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent grid-toolbar has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for grid-toolbar is missing name metadata. */ -/* ✔ [assert-true] Component schema for highlight is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent highlight has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent highlight has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for highlight is missing name metadata. */ -/* ✔ [assert-true] Component schema for icon is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent icon has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent icon has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for icon is missing name metadata. */ -/* ✔ [assert-true] Component schema for flat icon-button is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent flat icon-button has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent flat icon-button has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for flat icon-button is missing name metadata. */ -/* ✔ [assert-true] Component schema for outlined icon-button is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent outlined icon-button has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent outlined icon-button has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for outlined icon-button is missing name metadata. */ -/* ✔ [assert-true] Component schema for contained icon-button is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent contained icon-button has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent contained icon-button has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for contained icon-button is missing name metadata. */ -/* ✔ [assert-true] Component schema for input-group is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent input-group has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent input-group has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for input-group is missing name metadata. */ -/* ✔ [assert-true] Component schema for label is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent label has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent label has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for label is missing name metadata. */ -/* ✔ [assert-true] Component schema for list is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent list has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent list has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for list is missing name metadata. */ -/* ✔ [assert-true] Component schema for navbar is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent navbar has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent navbar has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for navbar is missing name metadata. */ -/* ✔ [assert-true] Component schema for nav-drawer is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent nav-drawer has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent nav-drawer has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for nav-drawer is missing name metadata. */ -/* ✔ [assert-true] Component schema for overlay is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent overlay has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent overlay has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for overlay is missing name metadata. */ -/* ✔ [assert-true] Component schema for paginator is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent paginator has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent paginator has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for paginator is missing name metadata. */ -/* ✔ [assert-true] Component schema for pivot-data-selector is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent pivot-data-selector has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent pivot-data-selector has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for pivot-data-selector is missing name metadata. */ -/* ✔ [assert-true] Component schema for linear-bar is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent linear-bar has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent linear-bar has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for linear-bar is missing name metadata. */ -/* ✔ [assert-true] Component schema for circular-bar is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent circular-bar has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent circular-bar has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for circular-bar is missing name metadata. */ -/* ✔ [assert-true] Component schema for qr-code is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent qr-code has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent qr-code has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for qr-code is missing name metadata. */ -/* ✔ [assert-true] Component schema for query-builder is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent query-builder has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent query-builder has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for query-builder is missing name metadata. */ -/* ✔ [assert-true] Component schema for radio is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent radio has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent radio has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for radio is missing name metadata. */ -/* ✔ [assert-true] Component schema for rating is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent rating has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent rating has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for rating is missing name metadata. */ -/* ✔ [assert-true] Component schema for resize-indicator is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent resize-indicator has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent resize-indicator has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for resize-indicator is missing name metadata. */ -/* ✔ [assert-true] Component schema for ripple is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent ripple has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent ripple has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for ripple is missing name metadata. */ -/* ✔ [assert-true] Component schema for scrollbar is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent scrollbar has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent scrollbar has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for scrollbar is missing name metadata. */ -/* ✔ [assert-true] Component schema for select is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent select has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent select has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for select is missing name metadata. */ -/* ✔ [assert-true] Component schema for slider is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent slider has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent slider has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for slider is missing name metadata. */ -/* ✔ [assert-true] Component schema for snackbar is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent snackbar has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent snackbar has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for snackbar is missing name metadata. */ -/* ✔ [assert-true] Component schema for splitter is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent splitter has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent splitter has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for splitter is missing name metadata. */ -/* ✔ [assert-true] Component schema for stepper is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent stepper has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent stepper has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for stepper is missing name metadata. */ -/* ✔ [assert-true] Component schema for switch is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent switch has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent switch has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for switch is missing name metadata. */ -/* ✔ [assert-true] Component schema for tabs is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent tabs has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent tabs has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for tabs is missing name metadata. */ -/* ✔ [assert-true] Component schema for tile-manager is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent tile-manager has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent tile-manager has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for tile-manager is missing name metadata. */ -/* ✔ [assert-true] Component schema for time-picker is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent time-picker has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent time-picker has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for time-picker is missing name metadata. */ -/* ✔ [assert-true] Component schema for toast is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent toast has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent toast has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for toast is missing name metadata. */ -/* ✔ [assert-true] Component schema for tooltip is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent tooltip has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent tooltip has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for tooltip is missing name metadata. */ -/* ✔ [assert-true] Component schema for tree is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent tree has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent tree has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for tree is missing name metadata. */ -/* ✔ [assert-true] Component schema for validator is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent validator has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent validator has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for validator is missing name metadata. */ -/* ✔ [assert-true] Component schema for watermark is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent watermark has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent watermark has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for watermark is missing name metadata. */ -/* ✔ [assert-true] Component schema for file-input is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent file-input has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent file-input has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for file-input is missing name metadata. */ -/* ✔ [assert-true] Component schema for category-chart is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo category-chart has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo category-chart has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for category-chart is missing name metadata. */ -/* ✔ [assert-true] Component schema for data-chart is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo data-chart has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo data-chart has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for data-chart is missing name metadata. */ -/* ✔ [assert-true] Component schema for doughnut-chart is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo doughnut-chart has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo doughnut-chart has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for doughnut-chart is missing name metadata. */ -/* ✔ [assert-true] Component schema for financial-chart is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo financial-chart has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo financial-chart has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for financial-chart is missing name metadata. */ -/* ✔ [assert-true] Component schema for funnel-chart is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo funnel-chart has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo funnel-chart has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for funnel-chart is missing name metadata. */ -/* ✔ [assert-true] Component schema for linear-gauge is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo linear-gauge has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo linear-gauge has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for linear-gauge is missing name metadata. */ -/* ✔ [assert-true] Component schema for radial-gauge is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo radial-gauge has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo radial-gauge has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for radial-gauge is missing name metadata. */ -/* ✔ [assert-true] Component schema for geo-map is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo geo-map has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo geo-map has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for geo-map is missing name metadata. */ -/* ✔ [assert-true] Component schema for bullet-graph is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo bullet-graph has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo bullet-graph has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for bullet-graph is missing name metadata. */ -/* ✔ [assert-true] Component schema for pie-chart is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo pie-chart has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo pie-chart has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for pie-chart is missing name metadata. */ -/* ✔ [assert-true] Component schema for shape-chart is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo shape-chart has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo shape-chart has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for shape-chart is missing name metadata. */ -/* ✔ [assert-true] Component schema for sparkline is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo sparkline has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo sparkline has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for sparkline is missing name metadata. */ -/* ✔ [assert-true] Component schema for action-strip is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo action-strip has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo action-strip has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for action-strip is missing name metadata. */ -/* ✔ [assert-true] Component schema for avatar is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo avatar has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo avatar has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for avatar is missing name metadata. */ -/* ✔ [assert-true] Component schema for badge is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo badge has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo badge has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for badge is missing name metadata. */ -/* ✔ [assert-true] Component schema for banner is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo banner has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo banner has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for banner is missing name metadata. */ -/* ✔ [assert-true] Component schema for bottom-nav is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo bottom-nav has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo bottom-nav has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for bottom-nav is missing name metadata. */ -/* ✔ [assert-true] Component schema for flat button is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo flat button has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo flat button has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for flat button is missing name metadata. */ -/* ✔ [assert-true] Component schema for outlined button is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo outlined button has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo outlined button has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for outlined button is missing name metadata. */ -/* ✔ [assert-true] Component schema for contained button is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo contained button has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo contained button has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for contained button is missing name metadata. */ -/* ✔ [assert-true] Component schema for fab button is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo fab button has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo fab button has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for fab button is missing name metadata. */ -/* ✔ [assert-true] Component schema for button-group is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo button-group has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo button-group has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for button-group is missing name metadata. */ -/* ✔ [assert-true] Component schema for calendar is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo calendar has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo calendar has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for calendar is missing name metadata. */ -/* ✔ [assert-true] Component schema for card is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo card has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo card has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for card is missing name metadata. */ -/* ✔ [assert-true] Component schema for carousel is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo carousel has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo carousel has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for carousel is missing name metadata. */ -/* ✔ [assert-true] Component schema for chat is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo chat has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo chat has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for chat is missing name metadata. */ -/* ✔ [assert-true] Component schema for checkbox is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo checkbox has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo checkbox has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for checkbox is missing name metadata. */ -/* ✔ [assert-true] Component schema for chip is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo chip has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo chip has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for chip is missing name metadata. */ -/* ✔ [assert-true] Component schema for color-picker is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo color-picker has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo color-picker has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for color-picker is missing name metadata. */ -/* ✔ [assert-true] Component schema for column-actions is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo column-actions has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo column-actions has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for column-actions is missing name metadata. */ -/* ✔ [assert-true] Component schema for combo is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo combo has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo combo has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for combo is missing name metadata. */ -/* ✔ [assert-true] Component schema for date-picker is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo date-picker has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo date-picker has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for date-picker is missing name metadata. */ -/* ✔ [assert-true] Component schema for date-range is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo date-range has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo date-range has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for date-range is missing name metadata. */ -/* ✔ [assert-true] Component schema for dialog is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo dialog has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo dialog has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for dialog is missing name metadata. */ -/* ✔ [assert-true] Component schema for divider is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo divider has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo divider has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for divider is missing name metadata. */ -/* ✔ [assert-true] Component schema for dockmanager is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo dockmanager has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo dockmanager has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for dockmanager is missing name metadata. */ -/* ✔ [assert-true] Component schema for drop-down is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo drop-down has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo drop-down has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for drop-down is missing name metadata. */ -/* ✔ [assert-true] Component schema for expansion-panel is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo expansion-panel has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo expansion-panel has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for expansion-panel is missing name metadata. */ -/* ✔ [assert-true] Component schema for grid is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo grid has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo grid has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for grid is missing name metadata. */ -/* ✔ [assert-true] Component schema for grid-excel-filtering is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo grid-excel-filtering has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo grid-excel-filtering has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for grid-excel-filtering is missing name metadata. */ -/* ✔ [assert-true] Component schema for grid-filtering is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo grid-filtering has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo grid-filtering has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for grid-filtering is missing name metadata. */ -/* ✔ [assert-true] Component schema for grid-summary is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo grid-summary has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo grid-summary has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for grid-summary is missing name metadata. */ -/* ✔ [assert-true] Component schema for grid-toolbar is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo grid-toolbar has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo grid-toolbar has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for grid-toolbar is missing name metadata. */ -/* ✔ [assert-true] Component schema for highlight is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo highlight has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo highlight has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for highlight is missing name metadata. */ -/* ✔ [assert-true] Component schema for icon is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo icon has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo icon has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for icon is missing name metadata. */ -/* ✔ [assert-true] Component schema for flat icon-button is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo flat icon-button has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo flat icon-button has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for flat icon-button is missing name metadata. */ -/* ✔ [assert-true] Component schema for outlined icon-button is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo outlined icon-button has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo outlined icon-button has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for outlined icon-button is missing name metadata. */ -/* ✔ [assert-true] Component schema for contained icon-button is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo contained icon-button has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo contained icon-button has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for contained icon-button is missing name metadata. */ -/* ✔ [assert-true] Component schema for input-group is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo input-group has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo input-group has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for input-group is missing name metadata. */ -/* ✔ [assert-true] Component schema for label is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo label has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo label has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for label is missing name metadata. */ -/* ✔ [assert-true] Component schema for list is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo list has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo list has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for list is missing name metadata. */ -/* ✔ [assert-true] Component schema for navbar is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo navbar has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo navbar has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for navbar is missing name metadata. */ -/* ✔ [assert-true] Component schema for nav-drawer is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo nav-drawer has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo nav-drawer has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for nav-drawer is missing name metadata. */ -/* ✔ [assert-true] Component schema for overlay is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo overlay has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo overlay has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for overlay is missing name metadata. */ -/* ✔ [assert-true] Component schema for paginator is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo paginator has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo paginator has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for paginator is missing name metadata. */ -/* ✔ [assert-true] Component schema for pivot-data-selector is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo pivot-data-selector has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo pivot-data-selector has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for pivot-data-selector is missing name metadata. */ -/* ✔ [assert-true] Component schema for linear-bar is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo linear-bar has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo linear-bar has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for linear-bar is missing name metadata. */ -/* ✔ [assert-true] Component schema for circular-bar is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo circular-bar has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo circular-bar has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for circular-bar is missing name metadata. */ -/* ✔ [assert-true] Component schema for qr-code is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo qr-code has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo qr-code has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for qr-code is missing name metadata. */ -/* ✔ [assert-true] Component schema for query-builder is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo query-builder has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo query-builder has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for query-builder is missing name metadata. */ -/* ✔ [assert-true] Component schema for radio is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo radio has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo radio has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for radio is missing name metadata. */ -/* ✔ [assert-true] Component schema for rating is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo rating has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo rating has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for rating is missing name metadata. */ -/* ✔ [assert-true] Component schema for resize-indicator is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo resize-indicator has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo resize-indicator has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for resize-indicator is missing name metadata. */ -/* ✔ [assert-true] Component schema for ripple is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo ripple has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo ripple has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for ripple is missing name metadata. */ -/* ✔ [assert-true] Component schema for scrollbar is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo scrollbar has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo scrollbar has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for scrollbar is missing name metadata. */ -/* ✔ [assert-true] Component schema for select is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo select has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo select has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for select is missing name metadata. */ -/* ✔ [assert-true] Component schema for slider is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo slider has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo slider has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for slider is missing name metadata. */ -/* ✔ [assert-true] Component schema for snackbar is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo snackbar has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo snackbar has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for snackbar is missing name metadata. */ -/* ✔ [assert-true] Component schema for splitter is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo splitter has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo splitter has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for splitter is missing name metadata. */ -/* ✔ [assert-true] Component schema for stepper is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo stepper has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo stepper has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for stepper is missing name metadata. */ -/* ✔ [assert-true] Component schema for switch is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo switch has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo switch has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for switch is missing name metadata. */ -/* ✔ [assert-true] Component schema for tabs is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo tabs has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo tabs has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for tabs is missing name metadata. */ -/* ✔ [assert-true] Component schema for tile-manager is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo tile-manager has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo tile-manager has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for tile-manager is missing name metadata. */ -/* ✔ [assert-true] Component schema for time-picker is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo time-picker has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo time-picker has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for time-picker is missing name metadata. */ -/* ✔ [assert-true] Component schema for toast is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo toast has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo toast has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for toast is missing name metadata. */ -/* ✔ [assert-true] Component schema for tooltip is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo tooltip has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo tooltip has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for tooltip is missing name metadata. */ -/* ✔ [assert-true] Component schema for tree is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo tree has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo tree has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for tree is missing name metadata. */ -/* ✔ [assert-true] Component schema for validator is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo validator has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo validator has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for validator is missing name metadata. */ -/* ✔ [assert-true] Component schema for watermark is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo watermark has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo watermark has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for watermark is missing name metadata. */ -/* ✔ [assert-true] Component schema for file-input is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo file-input has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo file-input has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for file-input is missing name metadata. */ -/* */ -/* Test: should resolve the border-radius function from schema definitions */ -/* ✔ [assert-equal] should resolve the border-radius function from schema definitions */ -/* */ -/* Test: should retrieve a reference to the CSS variable for a given theme */ -/* ✔ [assert-equal] should retrieve a reference to the CSS variable for a given theme */ -/* */ -/* Test: should convert component theme props into CSS variables */ -/* ASSERT: */ -/* OUTPUT */ -.test-output { - --background: var(--igx-test-component-background, var(--ig-test-component-background, var(--ig-primary-400))); - --hover-background: var(--igx-test-component-hover-background, var(--ig-test-component-hover-background, hsl(from var(--ig-secondary-700) h s l/0.26))); - --foreground: var(--igx-test-component-foreground, var(--ig-test-component-foreground, var(--ig-primary-400-contrast))); - --hover-foreground: var(--igx-test-component-hover-foreground, var(--ig-test-component-hover-foreground, var(--ig-secondary-700-contrast))); - --border-style: var(--igx-test-component-border-style, var(--ig-test-component-border-style, solid)); - --border-radius: var(--igx-test-component-border-radius, var(--ig-test-component-border-radius, 0.125rem)); - --brushes: var(--igx-test-component-brushes, var(--ig-test-component-brushes, var(--chart-brushes))); - --resting-elevation: var(--igx-test-component-resting-elevation, var(--ig-test-component-resting-elevation, var(--ig-elevation-2))); - --ig-theme: material; - --ig-theme-variant: light; -} - -/* END_OUTPUT */ -/* EXPECTED */ -.test-output { - --background: var(--igx-test-component-background, var(--ig-test-component-background, var(--ig-primary-400))); - --hover-background: var(--igx-test-component-hover-background, var(--ig-test-component-hover-background, hsl(from var(--ig-secondary-700) h s l/0.26))); - --foreground: var(--igx-test-component-foreground, var(--ig-test-component-foreground, var(--ig-primary-400-contrast))); - --hover-foreground: var(--igx-test-component-hover-foreground, var(--ig-test-component-hover-foreground, var(--ig-secondary-700-contrast))); - --border-style: var(--igx-test-component-border-style, var(--ig-test-component-border-style, solid)); - --border-radius: var(--igx-test-component-border-radius, var(--ig-test-component-border-radius, 0.125rem)); - --brushes: var(--igx-test-component-brushes, var(--ig-test-component-brushes, var(--chart-brushes))); - --resting-elevation: var(--igx-test-component-resting-elevation, var(--ig-test-component-resting-elevation, var(--ig-elevation-2))); - --ig-theme: material; - --ig-theme-variant: light; -} - -/* END_EXPECTED */ -/* END_ASSERT */ -/* */ -/* Test: should prepend the prefix to CSS variable names when the theme map includes a prefix */ -/* ASSERT: */ -/* OUTPUT */ -.test-output { - --igc-background: var(--igx-test-component-background, var(--ig-test-component-background, var(--ig-primary-400))); - --igc-hover-background: var(--igx-test-component-hover-background, var(--ig-test-component-hover-background, hsl(from var(--ig-secondary-700) h s l/0.26))); - --igc-foreground: var(--igx-test-component-foreground, var(--ig-test-component-foreground, var(--ig-primary-400-contrast))); - --igc-hover-foreground: var(--igx-test-component-hover-foreground, var(--ig-test-component-hover-foreground, var(--ig-secondary-700-contrast))); - --igc-border-style: var(--igx-test-component-border-style, var(--ig-test-component-border-style, solid)); - --igc-border-radius: var(--igx-test-component-border-radius, var(--ig-test-component-border-radius, 0.125rem)); - --igc-brushes: var(--igx-test-component-brushes, var(--ig-test-component-brushes, var(--chart-brushes))); - --igc-resting-elevation: var(--igx-test-component-resting-elevation, var(--ig-test-component-resting-elevation, var(--ig-elevation-2))); - --ig-theme: material; - --ig-theme-variant: light; -} - -/* END_OUTPUT */ -/* EXPECTED */ -.test-output { - --igc-background: var(--igx-test-component-background, var(--ig-test-component-background, var(--ig-primary-400))); - --igc-hover-background: var(--igx-test-component-hover-background, var(--ig-test-component-hover-background, hsl(from var(--ig-secondary-700) h s l/0.26))); - --igc-foreground: var(--igx-test-component-foreground, var(--ig-test-component-foreground, var(--ig-primary-400-contrast))); - --igc-hover-foreground: var(--igx-test-component-hover-foreground, var(--ig-test-component-hover-foreground, var(--ig-secondary-700-contrast))); - --igc-border-style: var(--igx-test-component-border-style, var(--ig-test-component-border-style, solid)); - --igc-border-radius: var(--igx-test-component-border-radius, var(--ig-test-component-border-radius, 0.125rem)); - --igc-brushes: var(--igx-test-component-brushes, var(--ig-test-component-brushes, var(--chart-brushes))); - --igc-resting-elevation: var(--igx-test-component-resting-elevation, var(--ig-test-component-resting-elevation, var(--ig-elevation-2))); - --ig-theme: material; - --ig-theme-variant: light; -} - -/* END_EXPECTED */ -/* END_ASSERT */ -/* */ -/* Test: should not prepend a prefix when the theme map has no prefix property */ -/* ✔ [assert-false] Digested schema should not have a prefix key */ -/* ASSERT: */ -/* OUTPUT */ -.test-output { - --background: var(--igx-test-component-background, var(--ig-test-component-background, var(--ig-primary-400))); - --hover-background: var(--igx-test-component-hover-background, var(--ig-test-component-hover-background, hsl(from var(--ig-secondary-700) h s l/0.26))); - --foreground: var(--igx-test-component-foreground, var(--ig-test-component-foreground, var(--ig-primary-400-contrast))); - --hover-foreground: var(--igx-test-component-hover-foreground, var(--ig-test-component-hover-foreground, var(--ig-secondary-700-contrast))); - --border-style: var(--igx-test-component-border-style, var(--ig-test-component-border-style, solid)); - --border-radius: var(--igx-test-component-border-radius, var(--ig-test-component-border-radius, 0.125rem)); - --brushes: var(--igx-test-component-brushes, var(--ig-test-component-brushes, var(--chart-brushes))); - --resting-elevation: var(--igx-test-component-resting-elevation, var(--ig-test-component-resting-elevation, var(--ig-elevation-2))); - --ig-theme: material; - --ig-theme-variant: light; -} - -/* END_OUTPUT */ -/* EXPECTED */ -.test-output { - --background: var(--igx-test-component-background, var(--ig-test-component-background, var(--ig-primary-400))); - --hover-background: var(--igx-test-component-hover-background, var(--ig-test-component-hover-background, hsl(from var(--ig-secondary-700) h s l/0.26))); - --foreground: var(--igx-test-component-foreground, var(--ig-test-component-foreground, var(--ig-primary-400-contrast))); - --hover-foreground: var(--igx-test-component-hover-foreground, var(--ig-test-component-hover-foreground, var(--ig-secondary-700-contrast))); - --border-style: var(--igx-test-component-border-style, var(--ig-test-component-border-style, solid)); - --border-radius: var(--igx-test-component-border-radius, var(--ig-test-component-border-radius, 0.125rem)); - --brushes: var(--igx-test-component-brushes, var(--ig-test-component-brushes, var(--chart-brushes))); - --resting-elevation: var(--igx-test-component-resting-elevation, var(--ig-test-component-resting-elevation, var(--ig-elevation-2))); - --ig-theme: material; - --ig-theme-variant: light; -} - -/* END_EXPECTED */ -/* END_ASSERT */ -/* */ -/* Test: should scope prefixed CSS variables correctly via the tokens mixin */ -/* ASSERT: */ -/* OUTPUT */ -igc-dockmanager { - --igc-background: var(--igx-test-component-background, var(--ig-test-component-background, var(--ig-primary-400))); - --igc-hover-background: var(--igx-test-component-hover-background, var(--ig-test-component-hover-background, hsl(from var(--ig-secondary-700) h s l/0.26))); - --igc-foreground: var(--igx-test-component-foreground, var(--ig-test-component-foreground, var(--ig-primary-400-contrast))); - --igc-hover-foreground: var(--igx-test-component-hover-foreground, var(--ig-test-component-hover-foreground, var(--ig-secondary-700-contrast))); - --igc-border-style: var(--igx-test-component-border-style, var(--ig-test-component-border-style, solid)); - --igc-border-radius: var(--igx-test-component-border-radius, var(--ig-test-component-border-radius, 0.125rem)); - --igc-brushes: var(--igx-test-component-brushes, var(--ig-test-component-brushes, var(--chart-brushes))); - --igc-resting-elevation: var(--igx-test-component-resting-elevation, var(--ig-test-component-resting-elevation, var(--ig-elevation-2))); - --ig-theme: material; - --ig-theme-variant: light; -} - -/* END_OUTPUT */ -/* EXPECTED */ -igc-dockmanager { - --igc-background: var(--igx-test-component-background, var(--ig-test-component-background, var(--ig-primary-400))); - --igc-hover-background: var(--igx-test-component-hover-background, var(--ig-test-component-hover-background, hsl(from var(--ig-secondary-700) h s l/0.26))); - --igc-foreground: var(--igx-test-component-foreground, var(--ig-test-component-foreground, var(--ig-primary-400-contrast))); - --igc-hover-foreground: var(--igx-test-component-hover-foreground, var(--ig-test-component-hover-foreground, var(--ig-secondary-700-contrast))); - --igc-border-style: var(--igx-test-component-border-style, var(--ig-test-component-border-style, solid)); - --igc-border-radius: var(--igx-test-component-border-radius, var(--ig-test-component-border-radius, 0.125rem)); - --igc-brushes: var(--igx-test-component-brushes, var(--ig-test-component-brushes, var(--chart-brushes))); - --igc-resting-elevation: var(--igx-test-component-resting-elevation, var(--ig-test-component-resting-elevation, var(--ig-elevation-2))); - --ig-theme: material; - --ig-theme-variant: light; -} - -/* END_EXPECTED */ -/* END_ASSERT */ -/* */ -/* Test: should ignore $name property when provided to css-vars-from-theme mixin */ -/* ASSERT: */ -/* OUTPUT */ -.test-output { - --background: var(--igx-test-component-background, var(--ig-test-component-background, var(--ig-primary-400))); - --hover-background: var(--igx-test-component-hover-background, var(--ig-test-component-hover-background, hsl(from var(--ig-secondary-700) h s l/0.26))); - --foreground: var(--igx-test-component-foreground, var(--ig-test-component-foreground, var(--ig-primary-400-contrast))); - --hover-foreground: var(--igx-test-component-hover-foreground, var(--ig-test-component-hover-foreground, var(--ig-secondary-700-contrast))); - --border-style: var(--igx-test-component-border-style, var(--ig-test-component-border-style, solid)); - --border-radius: var(--igx-test-component-border-radius, var(--ig-test-component-border-radius, 0.125rem)); - --brushes: var(--igx-test-component-brushes, var(--ig-test-component-brushes, var(--chart-brushes))); - --resting-elevation: var(--igx-test-component-resting-elevation, var(--ig-test-component-resting-elevation, var(--ig-elevation-2))); - --ig-theme: material; - --ig-theme-variant: light; -} - -/* END_OUTPUT */ -/* EXPECTED */ -.test-output { - --background: var(--igx-test-component-background, var(--ig-test-component-background, var(--ig-primary-400))); - --hover-background: var(--igx-test-component-hover-background, var(--ig-test-component-hover-background, hsl(from var(--ig-secondary-700) h s l/0.26))); - --foreground: var(--igx-test-component-foreground, var(--ig-test-component-foreground, var(--ig-primary-400-contrast))); - --hover-foreground: var(--igx-test-component-hover-foreground, var(--ig-test-component-hover-foreground, var(--ig-secondary-700-contrast))); - --border-style: var(--igx-test-component-border-style, var(--ig-test-component-border-style, solid)); - --border-radius: var(--igx-test-component-border-radius, var(--ig-test-component-border-radius, 0.125rem)); - --brushes: var(--igx-test-component-brushes, var(--ig-test-component-brushes, var(--chart-brushes))); - --resting-elevation: var(--igx-test-component-resting-elevation, var(--ig-test-component-resting-elevation, var(--ig-elevation-2))); - --ig-theme: material; - --ig-theme-variant: light; -} - -/* END_EXPECTED */ -/* END_ASSERT */ -/* */ -/* Test: should ignore all keys in the ignore list */ -/* ASSERT: */ -/* OUTPUT */ -.test-output { - --background: var(--igx-test-component-background, var(--ig-test-component-background, var(--ig-primary-400))); - --hover-background: var(--igx-test-component-hover-background, var(--ig-test-component-hover-background, hsl(from var(--ig-secondary-700) h s l/0.26))); - --foreground: var(--igx-test-component-foreground, var(--ig-test-component-foreground, var(--ig-primary-400-contrast))); - --hover-foreground: var(--igx-test-component-hover-foreground, var(--ig-test-component-hover-foreground, var(--ig-secondary-700-contrast))); - --border-style: var(--igx-test-component-border-style, var(--ig-test-component-border-style, solid)); - --border-radius: var(--igx-test-component-border-radius, var(--ig-test-component-border-radius, 0.125rem)); - --brushes: var(--igx-test-component-brushes, var(--ig-test-component-brushes, var(--chart-brushes))); - --resting-elevation: var(--igx-test-component-resting-elevation, var(--ig-test-component-resting-elevation, var(--ig-elevation-2))); - --ig-theme: material; - --ig-theme-variant: light; -} - -/* END_OUTPUT */ -/* EXPECTED */ -.test-output { - --background: var(--igx-test-component-background, var(--ig-test-component-background, var(--ig-primary-400))); - --hover-background: var(--igx-test-component-hover-background, var(--ig-test-component-hover-background, hsl(from var(--ig-secondary-700) h s l/0.26))); - --foreground: var(--igx-test-component-foreground, var(--ig-test-component-foreground, var(--ig-primary-400-contrast))); - --hover-foreground: var(--igx-test-component-hover-foreground, var(--ig-test-component-hover-foreground, var(--ig-secondary-700-contrast))); - --border-style: var(--igx-test-component-border-style, var(--ig-test-component-border-style, solid)); - --border-radius: var(--igx-test-component-border-radius, var(--ig-test-component-border-radius, 0.125rem)); - --brushes: var(--igx-test-component-brushes, var(--ig-test-component-brushes, var(--chart-brushes))); - --resting-elevation: var(--igx-test-component-resting-elevation, var(--ig-test-component-resting-elevation, var(--ig-elevation-2))); - --ig-theme: material; - --ig-theme-variant: light; -} - -/* END_EXPECTED */ -/* END_ASSERT */ -/* */ -/* Test: should scope theme CSS variables correctly */ -/* ASSERT: */ -/* OUTPUT */ -igc-avatar { - --background: var(--igx-test-component-background, var(--ig-test-component-background, var(--ig-primary-400))); - --hover-background: var(--igx-test-component-hover-background, var(--ig-test-component-hover-background, hsl(from var(--ig-secondary-700) h s l/0.26))); - --foreground: var(--igx-test-component-foreground, var(--ig-test-component-foreground, var(--ig-primary-400-contrast))); - --hover-foreground: var(--igx-test-component-hover-foreground, var(--ig-test-component-hover-foreground, var(--ig-secondary-700-contrast))); - --border-style: var(--igx-test-component-border-style, var(--ig-test-component-border-style, solid)); - --border-radius: var(--igx-test-component-border-radius, var(--ig-test-component-border-radius, 0.125rem)); - --brushes: var(--igx-test-component-brushes, var(--ig-test-component-brushes, var(--chart-brushes))); - --resting-elevation: var(--igx-test-component-resting-elevation, var(--ig-test-component-resting-elevation, var(--ig-elevation-2))); - --ig-theme: material; - --ig-theme-variant: light; -} - -/* END_OUTPUT */ -/* EXPECTED */ -igc-avatar { - --background: var(--igx-test-component-background, var(--ig-test-component-background, var(--ig-primary-400))); - --hover-background: var(--igx-test-component-hover-background, var(--ig-test-component-hover-background, hsl(from var(--ig-secondary-700) h s l/0.26))); - --foreground: var(--igx-test-component-foreground, var(--ig-test-component-foreground, var(--ig-primary-400-contrast))); - --hover-foreground: var(--igx-test-component-hover-foreground, var(--ig-test-component-hover-foreground, var(--ig-secondary-700-contrast))); - --border-style: var(--igx-test-component-border-style, var(--ig-test-component-border-style, solid)); - --border-radius: var(--igx-test-component-border-radius, var(--ig-test-component-border-radius, 0.125rem)); - --brushes: var(--igx-test-component-brushes, var(--ig-test-component-brushes, var(--chart-brushes))); - --resting-elevation: var(--igx-test-component-resting-elevation, var(--ig-test-component-resting-elevation, var(--ig-elevation-2))); - --ig-theme: material; - --ig-theme-variant: light; -} - -/* END_EXPECTED */ -/* END_ASSERT */ -/* ASSERT: */ -/* OUTPUT */ -.my-theme, -.my-theme igc-avatar { - --background: var(--igx-test-component-background, var(--ig-test-component-background, var(--ig-primary-400))); - --hover-background: var(--igx-test-component-hover-background, var(--ig-test-component-hover-background, hsl(from var(--ig-secondary-700) h s l/0.26))); - --foreground: var(--igx-test-component-foreground, var(--ig-test-component-foreground, var(--ig-primary-400-contrast))); - --hover-foreground: var(--igx-test-component-hover-foreground, var(--ig-test-component-hover-foreground, var(--ig-secondary-700-contrast))); - --border-style: var(--igx-test-component-border-style, var(--ig-test-component-border-style, solid)); - --border-radius: var(--igx-test-component-border-radius, var(--ig-test-component-border-radius, 0.125rem)); - --brushes: var(--igx-test-component-brushes, var(--ig-test-component-brushes, var(--chart-brushes))); - --resting-elevation: var(--igx-test-component-resting-elevation, var(--ig-test-component-resting-elevation, var(--ig-elevation-2))); - --ig-theme: material; - --ig-theme-variant: light; -} - -/* END_OUTPUT */ -/* EXPECTED */ -.my-theme, -.my-theme igc-avatar { - --background: var(--igx-test-component-background, var(--ig-test-component-background, var(--ig-primary-400))); - --hover-background: var(--igx-test-component-hover-background, var(--ig-test-component-hover-background, hsl(from var(--ig-secondary-700) h s l/0.26))); - --foreground: var(--igx-test-component-foreground, var(--ig-test-component-foreground, var(--ig-primary-400-contrast))); - --hover-foreground: var(--igx-test-component-hover-foreground, var(--ig-test-component-hover-foreground, var(--ig-secondary-700-contrast))); - --border-style: var(--igx-test-component-border-style, var(--ig-test-component-border-style, solid)); - --border-radius: var(--igx-test-component-border-radius, var(--ig-test-component-border-radius, 0.125rem)); - --brushes: var(--igx-test-component-brushes, var(--ig-test-component-brushes, var(--chart-brushes))); - --resting-elevation: var(--igx-test-component-resting-elevation, var(--ig-test-component-resting-elevation, var(--ig-elevation-2))); - --ig-theme: material; - --ig-theme-variant: light; -} - -/* END_EXPECTED */ -/* END_ASSERT */ -/* */ -/* Test: should scope theme CSS variables to a specified scope */ -/* ASSERT: */ -/* OUTPUT */ -.custom-selector { - --background: var(--igx-test-component-background, var(--ig-test-component-background, var(--ig-primary-400))); - --hover-background: var(--igx-test-component-hover-background, var(--ig-test-component-hover-background, hsl(from var(--ig-secondary-700) h s l/0.26))); - --foreground: var(--igx-test-component-foreground, var(--ig-test-component-foreground, var(--ig-primary-400-contrast))); - --hover-foreground: var(--igx-test-component-hover-foreground, var(--ig-test-component-hover-foreground, var(--ig-secondary-700-contrast))); - --border-style: var(--igx-test-component-border-style, var(--ig-test-component-border-style, solid)); - --border-radius: var(--igx-test-component-border-radius, var(--ig-test-component-border-radius, 0.125rem)); - --brushes: var(--igx-test-component-brushes, var(--ig-test-component-brushes, var(--chart-brushes))); - --resting-elevation: var(--igx-test-component-resting-elevation, var(--ig-test-component-resting-elevation, var(--ig-elevation-2))); - --ig-theme: material; - --ig-theme-variant: light; -} - -/* END_OUTPUT */ -/* EXPECTED */ -.custom-selector { - --background: var(--igx-test-component-background, var(--ig-test-component-background, var(--ig-primary-400))); - --hover-background: var(--igx-test-component-hover-background, var(--ig-test-component-hover-background, hsl(from var(--ig-secondary-700) h s l/0.26))); - --foreground: var(--igx-test-component-foreground, var(--ig-test-component-foreground, var(--ig-primary-400-contrast))); - --hover-foreground: var(--igx-test-component-hover-foreground, var(--ig-test-component-hover-foreground, var(--ig-secondary-700-contrast))); - --border-style: var(--igx-test-component-border-style, var(--ig-test-component-border-style, solid)); - --border-radius: var(--igx-test-component-border-radius, var(--ig-test-component-border-radius, 0.125rem)); - --brushes: var(--igx-test-component-brushes, var(--ig-test-component-brushes, var(--chart-brushes))); - --resting-elevation: var(--igx-test-component-resting-elevation, var(--ig-test-component-resting-elevation, var(--ig-elevation-2))); - --ig-theme: material; - --ig-theme-variant: light; -} - -/* END_EXPECTED */ -/* END_ASSERT */ -/* ASSERT: */ -/* OUTPUT */ -.my-theme, -.my-theme .custom-selector { - --background: var(--igx-test-component-background, var(--ig-test-component-background, var(--ig-primary-400))); - --hover-background: var(--igx-test-component-hover-background, var(--ig-test-component-hover-background, hsl(from var(--ig-secondary-700) h s l/0.26))); - --foreground: var(--igx-test-component-foreground, var(--ig-test-component-foreground, var(--ig-primary-400-contrast))); - --hover-foreground: var(--igx-test-component-hover-foreground, var(--ig-test-component-hover-foreground, var(--ig-secondary-700-contrast))); - --border-style: var(--igx-test-component-border-style, var(--ig-test-component-border-style, solid)); - --border-radius: var(--igx-test-component-border-radius, var(--ig-test-component-border-radius, 0.125rem)); - --brushes: var(--igx-test-component-brushes, var(--ig-test-component-brushes, var(--chart-brushes))); - --resting-elevation: var(--igx-test-component-resting-elevation, var(--ig-test-component-resting-elevation, var(--ig-elevation-2))); - --ig-theme: material; - --ig-theme-variant: light; -} - -/* END_OUTPUT */ -/* EXPECTED */ -.my-theme, -.my-theme .custom-selector { - --background: var(--igx-test-component-background, var(--ig-test-component-background, var(--ig-primary-400))); - --hover-background: var(--igx-test-component-hover-background, var(--ig-test-component-hover-background, hsl(from var(--ig-secondary-700) h s l/0.26))); - --foreground: var(--igx-test-component-foreground, var(--ig-test-component-foreground, var(--ig-primary-400-contrast))); - --hover-foreground: var(--igx-test-component-hover-foreground, var(--ig-test-component-hover-foreground, var(--ig-secondary-700-contrast))); - --border-style: var(--igx-test-component-border-style, var(--ig-test-component-border-style, solid)); - --border-radius: var(--igx-test-component-border-radius, var(--ig-test-component-border-radius, 0.125rem)); - --brushes: var(--igx-test-component-brushes, var(--ig-test-component-brushes, var(--chart-brushes))); - --resting-elevation: var(--igx-test-component-resting-elevation, var(--ig-test-component-resting-elevation, var(--ig-elevation-2))); - --ig-theme: material; - --ig-theme-variant: light; -} - -/* END_EXPECTED */ -/* END_ASSERT */ -/* */ -/* Test: should set the border-radius to a value between min and max */ -/* ✔ [assert-equal] should set the border-radius to a value between min and max */ -/* */ -/* Test: should include border-radius styles to a given scope with a value between min and max */ -/* ASSERT: */ -/* OUTPUT */ -.test-output { - border-radius: clamp(0.125rem, calc(var(--ig-radius-factor, 1) * 0.25rem), 0.25rem); -} - -/* END_OUTPUT */ -/* EXPECTED */ -.test-output { - border-radius: clamp(0.125rem, calc(var(--ig-radius-factor, 1) * 0.25rem), 0.25rem); -} - -/* END_EXPECTED */ -/* END_ASSERT */ -/* */ -/* Test: include single-line truncate styles when the ellipsis mixin is included */ -/* ASSERT: */ -/* OUTPUT */ -.test-output { - white-space: nowrap; - text-overflow: ellipsis; - overflow: hidden; -} - -/* END_OUTPUT */ -/* EXPECTED */ -.test-output { - white-space: nowrap; - text-overflow: ellipsis; - overflow: hidden; -} - -/* END_EXPECTED */ -/* END_ASSERT */ -/* */ -/* Test: includes multi-line truncate styles when the line-clamp mixin is included */ -/* ASSERT: */ -/* OUTPUT */ -.test-output { - display: -webkit-inline-box; - -webkit-line-clamp: 3; - -webkit-box-orient: vertical; - overflow: hidden; -} - -/* END_OUTPUT */ -/* EXPECTED */ -.test-output { - display: -webkit-inline-box; - -webkit-line-clamp: 3; - -webkit-box-orient: vertical; - overflow: hidden; -} - -/* END_EXPECTED */ -/* END_ASSERT */ -/* */ -/* Test: includes styles that hide the default element when the hide-default mixin is included */ -/* ASSERT: */ -/* OUTPUT */ -.test-output { - position: absolute; - width: 1px; - height: 1px; - margin: -1px; - border: none; - clip: rect(0, 0, 0, 0); - outline: 0; - pointer-events: none; - overflow: hidden; - appearance: none; -} - -/* END_OUTPUT */ -/* EXPECTED */ -.test-output { - position: absolute; - width: 1px; - height: 1px; - margin: -1px; - border: none; - clip: rect(0, 0, 0, 0); - outline: 0; - pointer-events: none; - overflow: hidden; - appearance: none; -} - -/* END_EXPECTED */ -/* END_ASSERT */ -/* */ -/* # Module: Themes :: schemas :: Tokens */ -/* ------------------------------------- */ -/* Test: should generate global tokens with the ig prefix */ -/* ASSERT: */ -/* OUTPUT */ -.test-output { - --ig-test-component-background: var(--ig-primary-400); - --ig-test-component-hover-background: hsl(from var(--ig-secondary-700) h s l/0.26); - --ig-test-component-foreground: var(--ig-primary-400-contrast); - --ig-test-component-hover-foreground: var(--ig-secondary-700-contrast); - --ig-test-component-border-style: solid; - --ig-test-component-border-radius: 0.125rem; - --ig-test-component-brushes: var(--chart-brushes); - --ig-test-component-resting-elevation: var(--ig-elevation-2); -} - -/* END_OUTPUT */ -/* EXPECTED */ -.test-output { - --ig-test-component-background: var(--ig-primary-400); - --ig-test-component-hover-background: hsl(from var(--ig-secondary-700) h s l/0.26); - --ig-test-component-foreground: var(--ig-primary-400-contrast); - --ig-test-component-hover-foreground: var(--ig-secondary-700-contrast); - --ig-test-component-border-style: solid; - --ig-test-component-border-radius: 0.125rem; - --ig-test-component-brushes: var(--chart-brushes); - --ig-test-component-resting-elevation: var(--ig-elevation-2); -} - -/* END_EXPECTED */ -/* END_ASSERT */ -/* */ -/* Test: should rewrite local var references to global ig-prefixed tokens */ -/* ASSERT: */ -/* OUTPUT */ -.test-output { - --ig-test-rewrite-background: red; - --ig-test-rewrite-color: hsla(from color(from var(--ig-test-rewrite-background) var(--y-contrast)) h 0 l/1); - --ig-test-rewrite-border-style: solid; -} - -/* END_OUTPUT */ -/* EXPECTED */ -.test-output { - --ig-test-rewrite-background: red; - --ig-test-rewrite-color: hsla(from color(from var(--ig-test-rewrite-background) var(--y-contrast)) h 0 l/1); - --ig-test-rewrite-border-style: solid; -} - -/* END_EXPECTED */ -/* END_ASSERT */ -/* */ -/* Test: should rewrite multiple local var references in a single value */ -/* ASSERT: */ -/* OUTPUT */ -.test-output { - --ig-test-multi-background: red; - --ig-test-multi-foreground: blue; - --ig-test-multi-computed: calc(var(--ig-test-multi-background) + var(--ig-test-multi-foreground)); -} - -/* END_OUTPUT */ -/* EXPECTED */ -.test-output { - --ig-test-multi-background: red; - --ig-test-multi-foreground: blue; - --ig-test-multi-computed: calc(var(--ig-test-multi-background) + var(--ig-test-multi-foreground)); -} - -/* END_EXPECTED */ -/* END_ASSERT */ -/* */ -/* Test: should skip sizable expressions from schema defaults */ -/* ASSERT: */ -/* OUTPUT */ -.test-output { - --ig-test-sizable-background: red; -} - -/* END_OUTPUT */ -/* EXPECTED */ -.test-output { - --ig-test-sizable-background: red; -} - -/* END_EXPECTED */ -/* END_ASSERT */ -/* */ -/* Test: should emit concrete size values provided by the user */ -/* ASSERT: */ -/* OUTPUT */ -.test-output { - --ig-test-concrete-size-background: red; - --ig-test-concrete-size-size: 2rem; -} - -/* END_OUTPUT */ -/* EXPECTED */ -.test-output { - --ig-test-concrete-size-background: red; - --ig-test-concrete-size-size: 2rem; -} - -/* END_EXPECTED */ -/* END_ASSERT */ -/* */ -/* Test: should not emit ignored keys */ -/* ASSERT: */ -/* OUTPUT */ -.test-output { - --ig-test-component-background: var(--ig-primary-400); - --ig-test-component-hover-background: hsl(from var(--ig-secondary-700) h s l/0.26); - --ig-test-component-foreground: var(--ig-primary-400-contrast); - --ig-test-component-hover-foreground: var(--ig-secondary-700-contrast); - --ig-test-component-border-style: solid; - --ig-test-component-border-radius: 0.125rem; - --ig-test-component-brushes: var(--chart-brushes); - --ig-test-component-resting-elevation: var(--ig-elevation-2); - --ig-test-component-default-size: 2; -} - -/* END_OUTPUT */ -/* EXPECTED */ -.test-output { - --ig-test-component-background: var(--ig-primary-400); - --ig-test-component-hover-background: hsl(from var(--ig-secondary-700) h s l/0.26); - --ig-test-component-foreground: var(--ig-primary-400-contrast); - --ig-test-component-hover-foreground: var(--ig-secondary-700-contrast); - --ig-test-component-border-style: solid; - --ig-test-component-border-radius: 0.125rem; - --ig-test-component-brushes: var(--chart-brushes); - --ig-test-component-resting-elevation: var(--ig-elevation-2); - --ig-test-component-default-size: 2; -} - -/* END_EXPECTED */ -/* END_ASSERT */ -/* */ -/* Test: should always use the ig prefix regardless of configured variable-prefix */ -/* ASSERT: */ -/* OUTPUT */ -.test-output { - --ig-test-prefix-background: blue; -} - -/* END_OUTPUT */ -/* EXPECTED */ -.test-output { - --ig-test-prefix-background: blue; -} - -/* END_EXPECTED */ -/* END_ASSERT */ -/* */ -/* Test: should scope theme CSS variables when mode is scoped */ -/* ASSERT: */ -/* OUTPUT */ -igc-avatar { - --background: var(--igx-test-component-background, var(--ig-test-component-background, var(--ig-primary-400))); - --hover-background: var(--igx-test-component-hover-background, var(--ig-test-component-hover-background, hsl(from var(--ig-secondary-700) h s l/0.26))); - --foreground: var(--igx-test-component-foreground, var(--ig-test-component-foreground, var(--ig-primary-400-contrast))); - --hover-foreground: var(--igx-test-component-hover-foreground, var(--ig-test-component-hover-foreground, var(--ig-secondary-700-contrast))); - --border-style: var(--igx-test-component-border-style, var(--ig-test-component-border-style, solid)); - --border-radius: var(--igx-test-component-border-radius, var(--ig-test-component-border-radius, 0.125rem)); - --brushes: var(--igx-test-component-brushes, var(--ig-test-component-brushes, var(--chart-brushes))); - --resting-elevation: var(--igx-test-component-resting-elevation, var(--ig-test-component-resting-elevation, var(--ig-elevation-2))); - --ig-theme: material; - --ig-theme-variant: light; -} - -/* END_OUTPUT */ -/* EXPECTED */ -igc-avatar { - --background: var(--igx-test-component-background, var(--ig-test-component-background, var(--ig-primary-400))); - --hover-background: var(--igx-test-component-hover-background, var(--ig-test-component-hover-background, hsl(from var(--ig-secondary-700) h s l/0.26))); - --foreground: var(--igx-test-component-foreground, var(--ig-test-component-foreground, var(--ig-primary-400-contrast))); - --hover-foreground: var(--igx-test-component-hover-foreground, var(--ig-test-component-hover-foreground, var(--ig-secondary-700-contrast))); - --border-style: var(--igx-test-component-border-style, var(--ig-test-component-border-style, solid)); - --border-radius: var(--igx-test-component-border-radius, var(--ig-test-component-border-radius, 0.125rem)); - --brushes: var(--igx-test-component-brushes, var(--ig-test-component-brushes, var(--chart-brushes))); - --resting-elevation: var(--igx-test-component-resting-elevation, var(--ig-test-component-resting-elevation, var(--ig-elevation-2))); - --ig-theme: material; - --ig-theme-variant: light; -} - -/* END_EXPECTED */ -/* END_ASSERT */ -/* ASSERT: */ -/* OUTPUT */ -.my-theme, -.my-theme igc-avatar { - --background: var(--igx-test-component-background, var(--ig-test-component-background, var(--ig-primary-400))); - --hover-background: var(--igx-test-component-hover-background, var(--ig-test-component-hover-background, hsl(from var(--ig-secondary-700) h s l/0.26))); - --foreground: var(--igx-test-component-foreground, var(--ig-test-component-foreground, var(--ig-primary-400-contrast))); - --hover-foreground: var(--igx-test-component-hover-foreground, var(--ig-test-component-hover-foreground, var(--ig-secondary-700-contrast))); - --border-style: var(--igx-test-component-border-style, var(--ig-test-component-border-style, solid)); - --border-radius: var(--igx-test-component-border-radius, var(--ig-test-component-border-radius, 0.125rem)); - --brushes: var(--igx-test-component-brushes, var(--ig-test-component-brushes, var(--chart-brushes))); - --resting-elevation: var(--igx-test-component-resting-elevation, var(--ig-test-component-resting-elevation, var(--ig-elevation-2))); - --ig-theme: material; - --ig-theme-variant: light; -} - -/* END_OUTPUT */ -/* EXPECTED */ -.my-theme, -.my-theme igc-avatar { - --background: var(--igx-test-component-background, var(--ig-test-component-background, var(--ig-primary-400))); - --hover-background: var(--igx-test-component-hover-background, var(--ig-test-component-hover-background, hsl(from var(--ig-secondary-700) h s l/0.26))); - --foreground: var(--igx-test-component-foreground, var(--ig-test-component-foreground, var(--ig-primary-400-contrast))); - --hover-foreground: var(--igx-test-component-hover-foreground, var(--ig-test-component-hover-foreground, var(--ig-secondary-700-contrast))); - --border-style: var(--igx-test-component-border-style, var(--ig-test-component-border-style, solid)); - --border-radius: var(--igx-test-component-border-radius, var(--ig-test-component-border-radius, 0.125rem)); - --brushes: var(--igx-test-component-brushes, var(--ig-test-component-brushes, var(--chart-brushes))); - --resting-elevation: var(--igx-test-component-resting-elevation, var(--ig-test-component-resting-elevation, var(--ig-elevation-2))); - --ig-theme: material; - --ig-theme-variant: light; -} - -/* END_EXPECTED */ -/* END_ASSERT */ -/* */ -/* Test: should scope theme CSS variables to a custom scope when mode is scoped */ -/* ASSERT: */ -/* OUTPUT */ -.custom-scope { - --background: var(--igx-test-component-background, var(--ig-test-component-background, var(--ig-primary-400))); - --hover-background: var(--igx-test-component-hover-background, var(--ig-test-component-hover-background, hsl(from var(--ig-secondary-700) h s l/0.26))); - --foreground: var(--igx-test-component-foreground, var(--ig-test-component-foreground, var(--ig-primary-400-contrast))); - --hover-foreground: var(--igx-test-component-hover-foreground, var(--ig-test-component-hover-foreground, var(--ig-secondary-700-contrast))); - --border-style: var(--igx-test-component-border-style, var(--ig-test-component-border-style, solid)); - --border-radius: var(--igx-test-component-border-radius, var(--ig-test-component-border-radius, 0.125rem)); - --brushes: var(--igx-test-component-brushes, var(--ig-test-component-brushes, var(--chart-brushes))); - --resting-elevation: var(--igx-test-component-resting-elevation, var(--ig-test-component-resting-elevation, var(--ig-elevation-2))); - --ig-theme: material; - --ig-theme-variant: light; -} - -/* END_OUTPUT */ -/* EXPECTED */ -.custom-scope { - --background: var(--igx-test-component-background, var(--ig-test-component-background, var(--ig-primary-400))); - --hover-background: var(--igx-test-component-hover-background, var(--ig-test-component-hover-background, hsl(from var(--ig-secondary-700) h s l/0.26))); - --foreground: var(--igx-test-component-foreground, var(--ig-test-component-foreground, var(--ig-primary-400-contrast))); - --hover-foreground: var(--igx-test-component-hover-foreground, var(--ig-test-component-hover-foreground, var(--ig-secondary-700-contrast))); - --border-style: var(--igx-test-component-border-style, var(--ig-test-component-border-style, solid)); - --border-radius: var(--igx-test-component-border-radius, var(--ig-test-component-border-radius, 0.125rem)); - --brushes: var(--igx-test-component-brushes, var(--ig-test-component-brushes, var(--chart-brushes))); - --resting-elevation: var(--igx-test-component-resting-elevation, var(--ig-test-component-resting-elevation, var(--ig-elevation-2))); - --ig-theme: material; - --ig-theme-variant: light; -} - -/* END_EXPECTED */ -/* END_ASSERT */ -/* */ -/* Test: should produce identical output for css-vars and tokens in scoped mode */ -/* ASSERT: */ -/* OUTPUT */ -igc-test { - --background: var(--igx-test-component-background, var(--ig-test-component-background, var(--ig-primary-400))); - --hover-background: var(--igx-test-component-hover-background, var(--ig-test-component-hover-background, hsl(from var(--ig-secondary-700) h s l/0.26))); - --foreground: var(--igx-test-component-foreground, var(--ig-test-component-foreground, var(--ig-primary-400-contrast))); - --hover-foreground: var(--igx-test-component-hover-foreground, var(--ig-test-component-hover-foreground, var(--ig-secondary-700-contrast))); - --border-style: var(--igx-test-component-border-style, var(--ig-test-component-border-style, solid)); - --border-radius: var(--igx-test-component-border-radius, var(--ig-test-component-border-radius, 0.125rem)); - --brushes: var(--igx-test-component-brushes, var(--ig-test-component-brushes, var(--chart-brushes))); - --resting-elevation: var(--igx-test-component-resting-elevation, var(--ig-test-component-resting-elevation, var(--ig-elevation-2))); - --ig-theme: material; - --ig-theme-variant: light; -} - -/* END_OUTPUT */ -/* EXPECTED */ -igc-test { - --background: var(--igx-test-component-background, var(--ig-test-component-background, var(--ig-primary-400))); - --hover-background: var(--igx-test-component-hover-background, var(--ig-test-component-hover-background, hsl(from var(--ig-secondary-700) h s l/0.26))); - --foreground: var(--igx-test-component-foreground, var(--ig-test-component-foreground, var(--ig-primary-400-contrast))); - --hover-foreground: var(--igx-test-component-hover-foreground, var(--ig-test-component-hover-foreground, var(--ig-secondary-700-contrast))); - --border-style: var(--igx-test-component-border-style, var(--ig-test-component-border-style, solid)); - --border-radius: var(--igx-test-component-border-radius, var(--ig-test-component-border-radius, 0.125rem)); - --brushes: var(--igx-test-component-brushes, var(--ig-test-component-brushes, var(--chart-brushes))); - --resting-elevation: var(--igx-test-component-resting-elevation, var(--ig-test-component-resting-elevation, var(--ig-elevation-2))); - --ig-theme: material; - --ig-theme-variant: light; -} - -/* END_EXPECTED */ -/* END_ASSERT */ -/* */ -/* */ -/* # Module: Themes :: schemas :: Sizing */ -/* ------------------------------------- */ -/* Test: should produce size variables */ -/* ASSERT: */ -/* OUTPUT */ -.test-output { - width: max(var(--is-large, 1) * max(300px, -1 * 300px), var(--is-medium, 1) * max(200px, -1 * 200px), var(--is-small, 1) * max(100px, -1 * 100px)); -} - -/* END_OUTPUT */ -/* EXPECTED */ -.test-output { - width: max(var(--is-large, 1) * max(300px, -1 * 300px), var(--is-medium, 1) * max(200px, -1 * 200px), var(--is-small, 1) * max(100px, -1 * 100px)); -} - -/* END_EXPECTED */ -/* END_ASSERT */ -/* */ -/* */ -/* # Module: Themes :: schemas :: Spacing */ -/* -------------------------------------- */ -/* Test: should use customizable spacing when declaring padding/margin */ -/* ASSERT: */ -/* OUTPUT */ -.test-output { - padding: max(var(--is-large, 1) * max(14px, -1 * 14px) * var(--ig-spacing-large, var(--ig-spacing, var(--ig-spacing))), var(--is-medium, 1) * max(14px, -1 * 14px) * var(--ig-spacing-medium, var(--ig-spacing, var(--ig-spacing))), var(--is-small, 1) * max(14px, -1 * 14px) * var(--ig-spacing-small, var(--ig-spacing, var(--ig-spacing)))); -} - -/* END_OUTPUT */ -/* EXPECTED */ -.test-output { - padding: max(var(--is-large, 1) * max(14px, -1 * 14px) * var(--ig-spacing-large, var(--ig-spacing, var(--ig-spacing))), var(--is-medium, 1) * max(14px, -1 * 14px) * var(--ig-spacing-medium, var(--ig-spacing, var(--ig-spacing))), var(--is-small, 1) * max(14px, -1 * 14px) * var(--ig-spacing-small, var(--ig-spacing, var(--ig-spacing)))); -} - -/* END_EXPECTED */ -/* END_ASSERT */ -/* */ -/* Test: should use customizable inline spacing when declaring inline padding/margin */ -/* ASSERT: */ -/* OUTPUT */ -.test-output { - padding-inline: max(var(--is-large, 1) * max(14px, -1 * 14px) * var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))), var(--is-medium, 1) * max(14px, -1 * 14px) * var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))), var(--is-small, 1) * max(14px, -1 * 14px) * var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing)))); -} - -/* END_OUTPUT */ -/* EXPECTED */ -.test-output { - padding-inline: max(var(--is-large, 1) * max(14px, -1 * 14px) * var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))), var(--is-medium, 1) * max(14px, -1 * 14px) * var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))), var(--is-small, 1) * max(14px, -1 * 14px) * var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing)))); -} - -/* END_EXPECTED */ -/* END_ASSERT */ -/* */ -/* Test: should use customizable block spacing when declaring inline padding/margin */ -/* ASSERT: */ -/* OUTPUT */ -.test-output { - padding-block: max(var(--is-large, 1) * max(16px, -1 * 16px) * var(--ig-spacing-block-large, var(--ig-spacing-block, var(--ig-spacing))), var(--is-medium, 1) * max(8px, -1 * 8px) * var(--ig-spacing-block-medium, var(--ig-spacing-block, var(--ig-spacing))), var(--is-small, 1) * max(4px, -1 * 4px) * var(--ig-spacing-block-small, var(--ig-spacing-block, var(--ig-spacing)))); -} - -/* END_OUTPUT */ -/* EXPECTED */ -.test-output { - padding-block: max(var(--is-large, 1) * max(16px, -1 * 16px) * var(--ig-spacing-block-large, var(--ig-spacing-block, var(--ig-spacing))), var(--is-medium, 1) * max(8px, -1 * 8px) * var(--ig-spacing-block-medium, var(--ig-spacing-block, var(--ig-spacing))), var(--is-small, 1) * max(4px, -1 * 4px) * var(--ig-spacing-block-small, var(--ig-spacing-block, var(--ig-spacing)))); -} - -/* END_EXPECTED */ -/* END_ASSERT */ -/* */ -/* */ -/* */ -/* */ -/* # Module: Elevations */ -/* -------------------- */ -/* Test: should return an empty list for a list of non box-shadow values */ -/* ✔ [assert-equal] should return an empty list for a list of non box-shadow values */ -/* */ -/* Test: should produce a box shadow that reacts to CSS --ig-elevation-factor changes */ -/* ✔ [assert-equal] should produce a box shadow that reacts to CSS --ig-elevation-factor changes */ -/* */ -/* Test: should configure the material elevations module */ -/* ASSERT: */ -/* OUTPUT */ -.test-output { - --ig-elevation-0: none; - --ig-elevation-1: 0 calc(var(--ig-elevation-factor, 1) * 1px) calc(var(--ig-elevation-factor, 1) * 3px) 0 red, 0 calc(var(--ig-elevation-factor, 1) * 1px) calc(var(--ig-elevation-factor, 1) * 1px) 0 green, 0 calc(var(--ig-elevation-factor, 1) * 2px) calc(var(--ig-elevation-factor, 1) * 1px) calc(var(--ig-elevation-factor, 1) * -1px) blue; - --ig-elevation-2: 0 calc(var(--ig-elevation-factor, 1) * 1px) calc(var(--ig-elevation-factor, 1) * 5px) 0 red, 0 calc(var(--ig-elevation-factor, 1) * 2px) calc(var(--ig-elevation-factor, 1) * 2px) 0 green, 0 calc(var(--ig-elevation-factor, 1) * 3px) calc(var(--ig-elevation-factor, 1) * 1px) calc(var(--ig-elevation-factor, 1) * -2px) blue; - --ig-elevation-3: 0 calc(var(--ig-elevation-factor, 1) * 1px) calc(var(--ig-elevation-factor, 1) * 8px) 0 red, 0 calc(var(--ig-elevation-factor, 1) * 3px) calc(var(--ig-elevation-factor, 1) * 4px) 0 green, 0 calc(var(--ig-elevation-factor, 1) * 3px) calc(var(--ig-elevation-factor, 1) * 3px) calc(var(--ig-elevation-factor, 1) * -2px) blue; - --ig-elevation-4: 0 calc(var(--ig-elevation-factor, 1) * 2px) calc(var(--ig-elevation-factor, 1) * 4px) calc(var(--ig-elevation-factor, 1) * -1px) red, 0 calc(var(--ig-elevation-factor, 1) * 4px) calc(var(--ig-elevation-factor, 1) * 5px) 0 green, 0 calc(var(--ig-elevation-factor, 1) * 1px) calc(var(--ig-elevation-factor, 1) * 10px) 0 blue; - --ig-elevation-5: 0 calc(var(--ig-elevation-factor, 1) * 3px) calc(var(--ig-elevation-factor, 1) * 5px) calc(var(--ig-elevation-factor, 1) * -1px) red, 0 calc(var(--ig-elevation-factor, 1) * 5px) calc(var(--ig-elevation-factor, 1) * 8px) 0 green, 0 calc(var(--ig-elevation-factor, 1) * 1px) calc(var(--ig-elevation-factor, 1) * 14px) 0 blue; - --ig-elevation-6: 0 calc(var(--ig-elevation-factor, 1) * 3px) calc(var(--ig-elevation-factor, 1) * 5px) calc(var(--ig-elevation-factor, 1) * -1px) red, 0 calc(var(--ig-elevation-factor, 1) * 6px) calc(var(--ig-elevation-factor, 1) * 10px) 0 green, 0 calc(var(--ig-elevation-factor, 1) * 1px) calc(var(--ig-elevation-factor, 1) * 18px) 0 blue; - --ig-elevation-7: 0 calc(var(--ig-elevation-factor, 1) * 4px) calc(var(--ig-elevation-factor, 1) * 5px) calc(var(--ig-elevation-factor, 1) * -2px) red, 0 calc(var(--ig-elevation-factor, 1) * 7px) calc(var(--ig-elevation-factor, 1) * 10px) calc(var(--ig-elevation-factor, 1) * 1px) green, 0 calc(var(--ig-elevation-factor, 1) * 2px) calc(var(--ig-elevation-factor, 1) * 16px) calc(var(--ig-elevation-factor, 1) * 1px) blue; - --ig-elevation-8: 0 calc(var(--ig-elevation-factor, 1) * 5px) calc(var(--ig-elevation-factor, 1) * 5px) calc(var(--ig-elevation-factor, 1) * -3px) red, 0 calc(var(--ig-elevation-factor, 1) * 8px) calc(var(--ig-elevation-factor, 1) * 10px) calc(var(--ig-elevation-factor, 1) * 1px) green, 0 calc(var(--ig-elevation-factor, 1) * 3px) calc(var(--ig-elevation-factor, 1) * 14px) calc(var(--ig-elevation-factor, 1) * 2px) blue; - --ig-elevation-9: 0 calc(var(--ig-elevation-factor, 1) * 5px) calc(var(--ig-elevation-factor, 1) * 6px) calc(var(--ig-elevation-factor, 1) * -3px) red, 0 calc(var(--ig-elevation-factor, 1) * 9px) calc(var(--ig-elevation-factor, 1) * 12px) calc(var(--ig-elevation-factor, 1) * 1px) green, 0 calc(var(--ig-elevation-factor, 1) * 3px) calc(var(--ig-elevation-factor, 1) * 16px) calc(var(--ig-elevation-factor, 1) * 2px) blue; - --ig-elevation-10: 0 calc(var(--ig-elevation-factor, 1) * 6px) calc(var(--ig-elevation-factor, 1) * 6px) calc(var(--ig-elevation-factor, 1) * -3px) red, 0 calc(var(--ig-elevation-factor, 1) * 10px) calc(var(--ig-elevation-factor, 1) * 14px) calc(var(--ig-elevation-factor, 1) * 1px) green, 0 calc(var(--ig-elevation-factor, 1) * 4px) calc(var(--ig-elevation-factor, 1) * 18px) calc(var(--ig-elevation-factor, 1) * 3px) blue; - --ig-elevation-11: 0 calc(var(--ig-elevation-factor, 1) * 6px) calc(var(--ig-elevation-factor, 1) * 7px) calc(var(--ig-elevation-factor, 1) * -4px) red, 0 calc(var(--ig-elevation-factor, 1) * 11px) calc(var(--ig-elevation-factor, 1) * 15px) calc(var(--ig-elevation-factor, 1) * 1px) green, 0 calc(var(--ig-elevation-factor, 1) * 4px) calc(var(--ig-elevation-factor, 1) * 20px) calc(var(--ig-elevation-factor, 1) * 3px) blue; - --ig-elevation-12: 0 calc(var(--ig-elevation-factor, 1) * 7px) calc(var(--ig-elevation-factor, 1) * 8px) calc(var(--ig-elevation-factor, 1) * -4px) red, 0 calc(var(--ig-elevation-factor, 1) * 12px) calc(var(--ig-elevation-factor, 1) * 17px) calc(var(--ig-elevation-factor, 1) * 2px) green, 0 calc(var(--ig-elevation-factor, 1) * 5px) calc(var(--ig-elevation-factor, 1) * 22px) calc(var(--ig-elevation-factor, 1) * 4px) blue; - --ig-elevation-13: 0 calc(var(--ig-elevation-factor, 1) * 7px) calc(var(--ig-elevation-factor, 1) * 8px) calc(var(--ig-elevation-factor, 1) * -4px) red, 0 calc(var(--ig-elevation-factor, 1) * 13px) calc(var(--ig-elevation-factor, 1) * 19px) calc(var(--ig-elevation-factor, 1) * 2px) green, 0 calc(var(--ig-elevation-factor, 1) * 5px) calc(var(--ig-elevation-factor, 1) * 24px) calc(var(--ig-elevation-factor, 1) * 4px) blue; - --ig-elevation-14: 0 calc(var(--ig-elevation-factor, 1) * 7px) calc(var(--ig-elevation-factor, 1) * 9px) calc(var(--ig-elevation-factor, 1) * -4px) red, 0 calc(var(--ig-elevation-factor, 1) * 14px) calc(var(--ig-elevation-factor, 1) * 21px) calc(var(--ig-elevation-factor, 1) * 2px) green, 0 calc(var(--ig-elevation-factor, 1) * 5px) calc(var(--ig-elevation-factor, 1) * 26px) calc(var(--ig-elevation-factor, 1) * 4px) blue; - --ig-elevation-15: 0 calc(var(--ig-elevation-factor, 1) * 8px) calc(var(--ig-elevation-factor, 1) * 9px) calc(var(--ig-elevation-factor, 1) * -5px) red, 0 calc(var(--ig-elevation-factor, 1) * 15px) calc(var(--ig-elevation-factor, 1) * 22px) calc(var(--ig-elevation-factor, 1) * 2px) green, 0 calc(var(--ig-elevation-factor, 1) * 6px) calc(var(--ig-elevation-factor, 1) * 28px) calc(var(--ig-elevation-factor, 1) * 5px) blue; - --ig-elevation-16: 0 calc(var(--ig-elevation-factor, 1) * 8px) calc(var(--ig-elevation-factor, 1) * 10px) calc(var(--ig-elevation-factor, 1) * -5px) red, 0 calc(var(--ig-elevation-factor, 1) * 16px) calc(var(--ig-elevation-factor, 1) * 24px) calc(var(--ig-elevation-factor, 1) * 2px) green, 0 calc(var(--ig-elevation-factor, 1) * 6px) calc(var(--ig-elevation-factor, 1) * 30px) calc(var(--ig-elevation-factor, 1) * 5px) blue; - --ig-elevation-17: 0 calc(var(--ig-elevation-factor, 1) * 8px) calc(var(--ig-elevation-factor, 1) * 11px) calc(var(--ig-elevation-factor, 1) * -5px) red, 0 calc(var(--ig-elevation-factor, 1) * 17px) calc(var(--ig-elevation-factor, 1) * 26px) calc(var(--ig-elevation-factor, 1) * 2px) green, 0 calc(var(--ig-elevation-factor, 1) * 6px) calc(var(--ig-elevation-factor, 1) * 32px) calc(var(--ig-elevation-factor, 1) * 5px) blue; - --ig-elevation-18: 0 calc(var(--ig-elevation-factor, 1) * 9px) calc(var(--ig-elevation-factor, 1) * 11px) calc(var(--ig-elevation-factor, 1) * -5px) red, 0 calc(var(--ig-elevation-factor, 1) * 18px) calc(var(--ig-elevation-factor, 1) * 28px) calc(var(--ig-elevation-factor, 1) * 2px) green, 0 calc(var(--ig-elevation-factor, 1) * 7px) calc(var(--ig-elevation-factor, 1) * 34px) calc(var(--ig-elevation-factor, 1) * 6px) blue; - --ig-elevation-19: 0 calc(var(--ig-elevation-factor, 1) * 9px) calc(var(--ig-elevation-factor, 1) * 12px) calc(var(--ig-elevation-factor, 1) * -6px) red, 0 calc(var(--ig-elevation-factor, 1) * 19px) calc(var(--ig-elevation-factor, 1) * 29px) calc(var(--ig-elevation-factor, 1) * 2px) green, 0 calc(var(--ig-elevation-factor, 1) * 7px) calc(var(--ig-elevation-factor, 1) * 36px) calc(var(--ig-elevation-factor, 1) * 6px) blue; - --ig-elevation-20: 0 calc(var(--ig-elevation-factor, 1) * 10px) calc(var(--ig-elevation-factor, 1) * 13px) calc(var(--ig-elevation-factor, 1) * -6px) red, 0 calc(var(--ig-elevation-factor, 1) * 20px) calc(var(--ig-elevation-factor, 1) * 31px) calc(var(--ig-elevation-factor, 1) * 3px) green, 0 calc(var(--ig-elevation-factor, 1) * 8px) calc(var(--ig-elevation-factor, 1) * 38px) calc(var(--ig-elevation-factor, 1) * 7px) blue; - --ig-elevation-21: 0 calc(var(--ig-elevation-factor, 1) * 10px) calc(var(--ig-elevation-factor, 1) * 13px) calc(var(--ig-elevation-factor, 1) * -6px) red, 0 calc(var(--ig-elevation-factor, 1) * 21px) calc(var(--ig-elevation-factor, 1) * 33px) calc(var(--ig-elevation-factor, 1) * 3px) green, 0 calc(var(--ig-elevation-factor, 1) * 8px) calc(var(--ig-elevation-factor, 1) * 40px) calc(var(--ig-elevation-factor, 1) * 7px) blue; - --ig-elevation-22: 0 calc(var(--ig-elevation-factor, 1) * 10px) calc(var(--ig-elevation-factor, 1) * 14px) calc(var(--ig-elevation-factor, 1) * -6px) red, 0 calc(var(--ig-elevation-factor, 1) * 22px) calc(var(--ig-elevation-factor, 1) * 35px) calc(var(--ig-elevation-factor, 1) * 3px) green, 0 calc(var(--ig-elevation-factor, 1) * 8px) calc(var(--ig-elevation-factor, 1) * 42px) calc(var(--ig-elevation-factor, 1) * 7px) blue; - --ig-elevation-23: 0 calc(var(--ig-elevation-factor, 1) * 11px) calc(var(--ig-elevation-factor, 1) * 14px) calc(var(--ig-elevation-factor, 1) * -7px) red, 0 calc(var(--ig-elevation-factor, 1) * 23px) calc(var(--ig-elevation-factor, 1) * 36px) calc(var(--ig-elevation-factor, 1) * 3px) green, 0 calc(var(--ig-elevation-factor, 1) * 9px) calc(var(--ig-elevation-factor, 1) * 44px) calc(var(--ig-elevation-factor, 1) * 8px) blue; - --ig-elevation-24: 0 calc(var(--ig-elevation-factor, 1) * 11px) calc(var(--ig-elevation-factor, 1) * 15px) calc(var(--ig-elevation-factor, 1) * -7px) red, 0 calc(var(--ig-elevation-factor, 1) * 24px) calc(var(--ig-elevation-factor, 1) * 38px) calc(var(--ig-elevation-factor, 1) * 3px) green, 0 calc(var(--ig-elevation-factor, 1) * 9px) calc(var(--ig-elevation-factor, 1) * 46px) calc(var(--ig-elevation-factor, 1) * 8px) blue; -} - -/* END_OUTPUT */ -/* CONTAINED */ -.test-output { - --ig-elevation-1: 0 calc(var(--ig-elevation-factor, 1) * 1px) calc(var(--ig-elevation-factor, 1) * 3px) 0 red, 0 calc(var(--ig-elevation-factor, 1) * 1px) calc(var(--ig-elevation-factor, 1) * 1px) 0 green, 0 calc(var(--ig-elevation-factor, 1) * 2px) calc(var(--ig-elevation-factor, 1) * 1px) calc(var(--ig-elevation-factor, 1) * -1px) blue; -} - -/* END_CONTAINED */ -/* END_ASSERT */ -/* */ -/* Test: should produce CSS variables for a map of shadows */ -/* ASSERT: */ -/* OUTPUT */ -.test-output { - --ig-elevation-small: 0 calc(var(--ig-elevation-factor, 1) * 0.125rem) calc(var(--ig-elevation-factor, 1) * 0.25rem) rgba(0, 0, 0, 0.75); - --ig-elevation-medium: 0 calc(var(--ig-elevation-factor, 1) * 0.25rem) calc(var(--ig-elevation-factor, 1) * 0.5rem) rgba(0, 0, 0, 0.85); - --ig-elevation-large: 0 calc(var(--ig-elevation-factor, 1) * 0.75rem) calc(var(--ig-elevation-factor, 1) * 1rem) rgba(0, 0, 0, 0.95); -} - -/* END_OUTPUT */ -/* EXPECTED */ -.test-output { - --ig-elevation-small: 0 calc(var(--ig-elevation-factor, 1) * 0.125rem) calc(var(--ig-elevation-factor, 1) * 0.25rem) rgba(0, 0, 0, 0.75); - --ig-elevation-medium: 0 calc(var(--ig-elevation-factor, 1) * 0.25rem) calc(var(--ig-elevation-factor, 1) * 0.5rem) rgba(0, 0, 0, 0.85); - --ig-elevation-large: 0 calc(var(--ig-elevation-factor, 1) * 0.75rem) calc(var(--ig-elevation-factor, 1) * 1rem) rgba(0, 0, 0, 0.95); -} - -/* END_EXPECTED */ -/* END_ASSERT */ -/* */ -/* Test: should retrieve a CSS variable elevation by name */ -/* ASSERT: */ -/* OUTPUT */ -.test-output { - box-shadow: var(--ig-elevation-small); -} - -/* END_OUTPUT */ -/* EXPECTED */ -.test-output { - box-shadow: var(--ig-elevation-small); -} - -/* END_EXPECTED */ -/* END_ASSERT */ -/* */ -/* Test: should include box-shadow styles for an elevation level */ -/* ASSERT: */ -/* OUTPUT */ -.test-output { - box-shadow: var(--ig-elevation-small); -} - -/* END_OUTPUT */ -/* EXPECTED */ -.test-output { - box-shadow: var(--ig-elevation-small); -} - -/* END_EXPECTED */ -/* END_ASSERT */ -/* */ -/* */ -/* # Module: BEM */ -/* ------------- */ -/* Test: creates block__element classes */ -/* ASSERT: */ -/* OUTPUT */ -.block { - background: black; -} -.block__element { - color: orange; -} - -/* END_OUTPUT */ -/* EXPECTED */ -.block { - background: black; -} - -.block__element { - color: orange; -} - -/* END_EXPECTED */ -/* END_ASSERT */ -/* */ -/* Test: creates block--modifier classes using the modifier mixins */ -/* ASSERT: */ -/* OUTPUT */ -.block { - background: black; -} -.block--error { - background: red; -} - -.block--error.block--selected { - background: darkred; -} - -/* END_OUTPUT */ -/* EXPECTED */ -.block { - background: black; -} - -.block--error { - background: red; -} - -.block--error.block--selected { - background: darkred; -} - -/* END_EXPECTED */ -/* END_ASSERT */ -/* */ -/* Test: creates block__element--modifier classes using the element mixin */ -/* ASSERT: */ -/* OUTPUT */ -.block { - background: black; -} -.block__element--small { - font-size: 12px; -} - -.block__element--medium { - font-size: 14px; -} - -.block__element--large { - font-size: 16px; -} - -/* END_OUTPUT */ -/* EXPECTED */ -.block { - background: black; -} - -.block__element--small { - font-size: 12px; -} - -.block__element--medium { - font-size: 14px; -} - -.block__element--large { - font-size: 16px; -} - -/* END_EXPECTED */ -/* END_ASSERT */ -/* */ -/* Test: creates negating block__element--modifier classes */ -/* ASSERT: */ -/* OUTPUT */ -.block__element--small:not(.block__element--circle) { - background: blue; -} - -/* END_OUTPUT */ -/* EXPECTED */ -.block__element--small:not(.block__element--circle) { - background: blue; -} - -/* END_EXPECTED */ -/* END_ASSERT */ -/* */ -/* Test: creates multiple element modifier classes using the element mixin */ -/* ASSERT: */ -/* OUTPUT */ -.block { - background: black; -} -.block__element--small.block__element--pink { - color: pink; - font-size: 12px; -} - -/* END_OUTPUT */ -/* EXPECTED */ -.block { - background: black; -} - -.block__element--small.block__element--pink { - color: pink; - font-size: 12px; -} - -/* END_EXPECTED */ -/* END_ASSERT */ -/* */ -/* Test: creates multiple negating element modifier classes */ -/* ASSERT: */ -/* OUTPUT */ -.block__element--small.block__element--pink:not(.block__element--circle, .block__element--large) { - color: pink; - font-size: 12px; -} - -/* END_OUTPUT */ -/* EXPECTED */ -.block__element--small.block__element--pink:not(.block__element--circle, .block__element--large) { - color: pink; - font-size: 12px; -} - -/* END_EXPECTED */ -/* END_ASSERT */ -/* */ -/* Test: overwrites element styles in a modified block */ -/* ASSERT: */ -/* OUTPUT */ -.block { - background: black; -} -.block__element { - color: wheat; -} - -.block--error { - background: red; -} -.block--error .block__element { - color: white; -} - -/* END_OUTPUT */ -/* EXPECTED */ -.block { - background: black; -} - -.block__element { - color: wheat; -} - -.block--error { - background: red; -} - -.block--error .block__element { - color: white; -} - -/* END_EXPECTED */ -/* END_ASSERT */ -/* */ -/* Test: creates negating modifier classes using the mod and mods mixins */ -/* ASSERT: */ -/* OUTPUT */ -.block--checked:not(.block--disabled, .block--indeterminate) { - background: pink; -} - -.block--disabled:not(.block--checked) { - background: gray; -} -.block--disabled:not(.block--checked) .block__element { - color: darkgray; -} - -.block--disabled.block--checked:not(.block--indeterminate) { - background: darkgray; -} - -.block--disabled.block--checked:not(.block--indeterminate, .block--invalid) { - background: black; -} -.block--disabled.block--checked:not(.block--indeterminate, .block--invalid) .block__element { - color: red; -} - -.block--disabled.block--checked:not(.block--indeterminate, .block--invalid) .block__element--orange { - color: orange; -} - -.block--disabled.block--checked:not(.block--indeterminate, .block--invalid) .block__element--rebecca.block__element--purple { - color: rebeccapurple; -} - -/* END_OUTPUT */ -/* EXPECTED */ -.block--checked:not(.block--disabled, .block--indeterminate) { - background: pink; -} - -.block--disabled:not(.block--checked) { - background: gray; -} - -.block--disabled:not(.block--checked) .block__element { - color: darkgray; -} - -.block--disabled.block--checked:not(.block--indeterminate) { - background: darkgray; -} - -.block--disabled.block--checked:not(.block--indeterminate, .block--invalid) { - background: black; -} - -.block--disabled.block--checked:not(.block--indeterminate, .block--invalid) .block__element { - color: red; -} - -.block--disabled.block--checked:not(.block--indeterminate, .block--invalid) .block__element--orange { - color: orange; -} - -.block--disabled.block--checked:not(.block--indeterminate, .block--invalid) .block__element--rebecca.block__element--purple { - color: rebeccapurple; -} - -/* END_EXPECTED */ -/* END_ASSERT */ -/* */ -/* Test: creates element selector inside an attribute selector context */ -/* ASSERT: */ -/* OUTPUT */ -.block[aria-selected=false] .block__element { - display: none; -} - -/* END_OUTPUT */ -/* EXPECTED */ -.block[aria-selected=false] .block__element { - display: none; -} - -/* END_EXPECTED */ -/* END_ASSERT */ -/* */ -/* Test: creates element--modifier selector inside an attribute selector context */ -/* ASSERT: */ -/* OUTPUT */ -.block[aria-selected=false] .block__element--active { - display: block; -} - -/* END_OUTPUT */ -/* EXPECTED */ -.block[aria-selected=false] .block__element--active { - display: block; -} - -/* END_EXPECTED */ -/* END_ASSERT */ -/* */ -/* Test: creates multiple element modifier selectors inside an attribute selector context */ -/* ASSERT: */ -/* OUTPUT */ -.block[aria-selected=false] .block__element--small.block__element--pink { - font-size: 12px; -} - -/* END_OUTPUT */ -/* EXPECTED */ -.block[aria-selected=false] .block__element--small.block__element--pink { - font-size: 12px; -} - -/* END_EXPECTED */ -/* END_ASSERT */ -/* */ -/* Test: creates element selector inside a descendant attribute selector context */ -/* ASSERT: */ -/* OUTPUT */ -.block [aria-selected=true] .block__element { - display: block; -} - -.block [aria-selected=false] .block__element { - display: none; -} - -/* END_OUTPUT */ -/* EXPECTED */ -.block [aria-selected=true] .block__element { - display: block; -} - -.block [aria-selected=false] .block__element { - display: none; -} - -/* END_EXPECTED */ -/* END_ASSERT */ -/* */ -/* Test: should be able to use element classes in modifier body rules */ -/* ASSERT: */ -/* OUTPUT */ -.block__element--circle { - border-radius: 50%; -} - -.block--checked:has(.block__element--circle) { - background: pink; -} - -/* END_OUTPUT */ -/* EXPECTED */ -.block__element--circle { - border-radius: 50%; -} - -.block--checked:has(.block__element--circle) { - background: pink; -} - -/* END_EXPECTED */ -/* END_ASSERT */ -/* */ -/* */ diff --git a/_to_delete/theming-tmp2/perf.css b/_to_delete/theming-tmp2/perf.css deleted file mode 100644 index 4eff3884..00000000 --- a/_to_delete/theming-tmp2/perf.css +++ /dev/null @@ -1,242 +0,0 @@ -:root { - --ig-wcag-a: 0.31; - --ig-wcag-aa: 0.185; - --ig-wcag-aaa: 0.178; - --ig-contrast-level: var(--ig-wcag-aa); - --y: clamp(0, (y / var(--ig-contrast-level) - 1) * -infinity, 1); - --y-contrast: xyz-d65 var(--y) var(--y) var(--y); -} -:root { - --ig-primary-50: rgb(226, 237, 251); - --ig-primary-50-contrast: hsla(from color(from var(--ig-primary-50) var(--y-contrast)) h 0 l/1); - --ig-primary-100: rgb(172, 207, 251); - --ig-primary-100-contrast: hsla(from color(from var(--ig-primary-100) var(--y-contrast)) h 0 l/1); - --ig-primary-200: rgb(117, 180, 250); - --ig-primary-200-contrast: hsla(from color(from var(--ig-primary-200) var(--y-contrast)) h 0 l/1); - --ig-primary-300: rgb(67, 155, 239); - --ig-primary-300-contrast: hsla(from color(from var(--ig-primary-300) var(--y-contrast)) h 0 l/1); - --ig-primary-400: rgb(27, 131, 214); - --ig-primary-400-contrast: hsla(from color(from var(--ig-primary-400) var(--y-contrast)) h 0 l/1); - --ig-primary-500: rgb(9, 109, 183); - --ig-primary-500-contrast: hsla(from color(from var(--ig-primary-500) var(--y-contrast)) h 0 l/1); - --ig-primary-600: rgb(6, 89, 150); - --ig-primary-600-contrast: hsla(from color(from var(--ig-primary-600) var(--y-contrast)) h 0 l/1); - --ig-primary-700: rgb(11, 69, 116); - --ig-primary-700-contrast: hsla(from color(from var(--ig-primary-700) var(--y-contrast)) h 0 l/1); - --ig-primary-800: rgb(12, 48, 80); - --ig-primary-800-contrast: hsla(from color(from var(--ig-primary-800) var(--y-contrast)) h 0 l/1); - --ig-primary-900: rgb(6, 22, 37); - --ig-primary-900-contrast: hsla(from color(from var(--ig-primary-900) var(--y-contrast)) h 0 l/1); - --ig-primary-seed: #09f; - --ig-primary-seed-contrast: hsla(from color(from var(--ig-primary-seed) var(--y-contrast)) h 0 l/1); - --ig-primary-A100: rgb(191, 221, 255); - --ig-primary-A100-contrast: hsla(from color(from var(--ig-primary-A100) var(--y-contrast)) h 0 l/1); - --ig-primary-A200: rgb(73, 164, 255); - --ig-primary-A200-contrast: hsla(from color(from var(--ig-primary-A200) var(--y-contrast)) h 0 l/1); - --ig-primary-A400: rgb(4, 127, 213); - --ig-primary-A400-contrast: hsla(from color(from var(--ig-primary-A400) var(--y-contrast)) h 0 l/1); - --ig-primary-A700: rgb(0, 100, 169); - --ig-primary-A700-contrast: hsla(from color(from var(--ig-primary-A700) var(--y-contrast)) h 0 l/1); - --ig-secondary-50: rgb(254, 230, 235); - --ig-secondary-50-contrast: hsla(from color(from var(--ig-secondary-50) var(--y-contrast)) h 0 l/1); - --ig-secondary-100: rgb(255, 186, 205); - --ig-secondary-100-contrast: hsla(from color(from var(--ig-secondary-100) var(--y-contrast)) h 0 l/1); - --ig-secondary-200: rgb(255, 141, 177); - --ig-secondary-200-contrast: hsla(from color(from var(--ig-secondary-200) var(--y-contrast)) h 0 l/1); - --ig-secondary-300: rgb(253, 92, 150); - --ig-secondary-300-contrast: hsla(from color(from var(--ig-secondary-300) var(--y-contrast)) h 0 l/1); - --ig-secondary-400: rgb(233, 52, 126); - --ig-secondary-400-contrast: hsla(from color(from var(--ig-secondary-400) var(--y-contrast)) h 0 l/1); - --ig-secondary-500: rgb(203, 23, 105); - --ig-secondary-500-contrast: hsla(from color(from var(--ig-secondary-500) var(--y-contrast)) h 0 l/1); - --ig-secondary-600: rgb(168, 13, 85); - --ig-secondary-600-contrast: hsla(from color(from var(--ig-secondary-600) var(--y-contrast)) h 0 l/1); - --ig-secondary-700: rgb(131, 16, 66); - --ig-secondary-700-contrast: hsla(from color(from var(--ig-secondary-700) var(--y-contrast)) h 0 l/1); - --ig-secondary-800: rgb(91, 17, 46); - --ig-secondary-800-contrast: hsla(from color(from var(--ig-secondary-800) var(--y-contrast)) h 0 l/1); - --ig-secondary-900: rgb(43, 9, 21); - --ig-secondary-900-contrast: hsla(from color(from var(--ig-secondary-900) var(--y-contrast)) h 0 l/1); - --ig-secondary-seed: #df1b74; - --ig-secondary-seed-contrast: hsla(from color(from var(--ig-secondary-seed) var(--y-contrast)) h 0 l/1); - --ig-secondary-A100: rgb(255, 205, 220); - --ig-secondary-A100-contrast: hsla(from color(from var(--ig-secondary-A100) var(--y-contrast)) h 0 l/1); - --ig-secondary-A200: rgb(255, 112, 163); - --ig-secondary-A200-contrast: hsla(from color(from var(--ig-secondary-A200) var(--y-contrast)) h 0 l/1); - --ig-secondary-A400: rgb(236, 25, 123); - --ig-secondary-A400-contrast: hsla(from color(from var(--ig-secondary-A400) var(--y-contrast)) h 0 l/1); - --ig-secondary-A700: rgb(191, 1, 96); - --ig-secondary-A700-contrast: hsla(from color(from var(--ig-secondary-A700) var(--y-contrast)) h 0 l/1); - --ig-gray-50: rgb(248, 248, 248); - --ig-gray-50-contrast: hsla(from color(from var(--ig-gray-50) var(--y-contrast)) h 0 l/1); - --ig-gray-100: rgb(244, 244, 244); - --ig-gray-100-contrast: hsla(from color(from var(--ig-gray-100) var(--y-contrast)) h 0 l/1); - --ig-gray-200: rgb(233, 233, 233); - --ig-gray-200-contrast: hsla(from color(from var(--ig-gray-200) var(--y-contrast)) h 0 l/1); - --ig-gray-300: rgb(215, 215, 215); - --ig-gray-300-contrast: hsla(from color(from var(--ig-gray-300) var(--y-contrast)) h 0 l/1); - --ig-gray-400: rgb(190, 190, 190); - --ig-gray-400-contrast: hsla(from color(from var(--ig-gray-400) var(--y-contrast)) h 0 l/1); - --ig-gray-500: rgb(162, 162, 162); - --ig-gray-500-contrast: hsla(from color(from var(--ig-gray-500) var(--y-contrast)) h 0 l/1); - --ig-gray-600: rgb(130, 130, 130); - --ig-gray-600-contrast: hsla(from color(from var(--ig-gray-600) var(--y-contrast)) h 0 l/1); - --ig-gray-700: rgb(97, 97, 97); - --ig-gray-700-contrast: hsla(from color(from var(--ig-gray-700) var(--y-contrast)) h 0 l/1); - --ig-gray-800: rgb(64, 64, 64); - --ig-gray-800-contrast: hsla(from color(from var(--ig-gray-800) var(--y-contrast)) h 0 l/1); - --ig-gray-900: rgb(31, 31, 31); - --ig-gray-900-contrast: hsla(from color(from var(--ig-gray-900) var(--y-contrast)) h 0 l/1); - --ig-gray-seed: #333; - --ig-gray-seed-contrast: hsla(from color(from var(--ig-gray-seed) var(--y-contrast)) h 0 l/1); - --ig-surface-50: rgb(253, 253, 253); - --ig-surface-50-contrast: hsla(from color(from var(--ig-surface-50) var(--y-contrast)) h 0 l/1); - --ig-surface-100: rgb(253, 253, 253); - --ig-surface-100-contrast: hsla(from color(from var(--ig-surface-100) var(--y-contrast)) h 0 l/1); - --ig-surface-200: rgb(253, 253, 253); - --ig-surface-200-contrast: hsla(from color(from var(--ig-surface-200) var(--y-contrast)) h 0 l/1); - --ig-surface-300: rgb(252, 252, 253); - --ig-surface-300-contrast: hsla(from color(from var(--ig-surface-300) var(--y-contrast)) h 0 l/1); - --ig-surface-400: rgb(252, 252, 253); - --ig-surface-400-contrast: hsla(from color(from var(--ig-surface-400) var(--y-contrast)) h 0 l/1); - --ig-surface-500: rgb(252, 252, 253); - --ig-surface-500-contrast: hsla(from color(from var(--ig-surface-500) var(--y-contrast)) h 0 l/1); - --ig-surface-600: rgb(227, 227, 227); - --ig-surface-600-contrast: hsla(from color(from var(--ig-surface-600) var(--y-contrast)) h 0 l/1); - --ig-surface-700: rgb(204, 204, 204); - --ig-surface-700-contrast: hsla(from color(from var(--ig-surface-700) var(--y-contrast)) h 0 l/1); - --ig-surface-800: rgb(183, 183, 183); - --ig-surface-800-contrast: hsla(from color(from var(--ig-surface-800) var(--y-contrast)) h 0 l/1); - --ig-surface-900: rgb(163, 163, 163); - --ig-surface-900-contrast: hsla(from color(from var(--ig-surface-900) var(--y-contrast)) h 0 l/1); - --ig-surface-seed: #fcfcfd; - --ig-surface-seed-contrast: hsla(from color(from var(--ig-surface-seed) var(--y-contrast)) h 0 l/1); - --ig-surface-A100: rgb(216, 216, 216); - --ig-surface-A100-contrast: hsla(from color(from var(--ig-surface-A100) var(--y-contrast)) h 0 l/1); - --ig-surface-A200: rgb(158, 158, 158); - --ig-surface-A200-contrast: hsla(from color(from var(--ig-surface-A200) var(--y-contrast)) h 0 l/1); - --ig-surface-A400: rgb(122, 122, 122); - --ig-surface-A400-contrast: hsla(from color(from var(--ig-surface-A400) var(--y-contrast)) h 0 l/1); - --ig-surface-A700: rgb(95, 95, 95); - --ig-surface-A700-contrast: hsla(from color(from var(--ig-surface-A700) var(--y-contrast)) h 0 l/1); - --ig-info-50: rgb(227, 236, 251); - --ig-info-50-contrast: hsla(from color(from var(--ig-info-50) var(--y-contrast)) h 0 l/1); - --ig-info-100: rgb(176, 207, 251); - --ig-info-100-contrast: hsla(from color(from var(--ig-info-100) var(--y-contrast)) h 0 l/1); - --ig-info-200: rgb(124, 179, 252); - --ig-info-200-contrast: hsla(from color(from var(--ig-info-200) var(--y-contrast)) h 0 l/1); - --ig-info-300: rgb(75, 152, 245); - --ig-info-300-contrast: hsla(from color(from var(--ig-info-300) var(--y-contrast)) h 0 l/1); - --ig-info-400: rgb(34, 129, 223); - --ig-info-400-contrast: hsla(from color(from var(--ig-info-400) var(--y-contrast)) h 0 l/1); - --ig-info-500: rgb(13, 107, 193); - --ig-info-500-contrast: hsla(from color(from var(--ig-info-500) var(--y-contrast)) h 0 l/1); - --ig-info-600: rgb(7, 87, 159); - --ig-info-600-contrast: hsla(from color(from var(--ig-info-600) var(--y-contrast)) h 0 l/1); - --ig-info-700: rgb(10, 68, 123); - --ig-info-700-contrast: hsla(from color(from var(--ig-info-700) var(--y-contrast)) h 0 l/1); - --ig-info-800: rgb(12, 47, 85); - --ig-info-800-contrast: hsla(from color(from var(--ig-info-800) var(--y-contrast)) h 0 l/1); - --ig-info-900: rgb(6, 22, 40); - --ig-info-900-contrast: hsla(from color(from var(--ig-info-900) var(--y-contrast)) h 0 l/1); - --ig-info-seed: #1377d5; - --ig-info-seed-contrast: hsla(from color(from var(--ig-info-seed) var(--y-contrast)) h 0 l/1); - --ig-info-A100: rgb(194, 220, 255); - --ig-info-A100-contrast: hsla(from color(from var(--ig-info-A100) var(--y-contrast)) h 0 l/1); - --ig-info-A200: rgb(87, 163, 255); - --ig-info-A200-contrast: hsla(from color(from var(--ig-info-A200) var(--y-contrast)) h 0 l/1); - --ig-info-A400: rgb(10, 124, 225); - --ig-info-A400-contrast: hsla(from color(from var(--ig-info-A400) var(--y-contrast)) h 0 l/1); - --ig-info-A700: rgb(0, 97, 180); - --ig-info-A700-contrast: hsla(from color(from var(--ig-info-A700) var(--y-contrast)) h 0 l/1); - --ig-success-50: rgb(203, 247, 207); - --ig-success-50-contrast: hsla(from color(from var(--ig-success-50) var(--y-contrast)) h 0 l/1); - --ig-success-100: rgb(127, 225, 142); - --ig-success-100-contrast: hsla(from color(from var(--ig-success-100) var(--y-contrast)) h 0 l/1); - --ig-success-200: rgb(94, 197, 112); - --ig-success-200-contrast: hsla(from color(from var(--ig-success-200) var(--y-contrast)) h 0 l/1); - --ig-success-300: rgb(73, 169, 91); - --ig-success-300-contrast: hsla(from color(from var(--ig-success-300) var(--y-contrast)) h 0 l/1); - --ig-success-400: rgb(59, 144, 75); - --ig-success-400-contrast: hsla(from color(from var(--ig-success-400) var(--y-contrast)) h 0 l/1); - --ig-success-500: rgb(48, 120, 62); - --ig-success-500-contrast: hsla(from color(from var(--ig-success-500) var(--y-contrast)) h 0 l/1); - --ig-success-600: rgb(39, 98, 50); - --ig-success-600-contrast: hsla(from color(from var(--ig-success-600) var(--y-contrast)) h 0 l/1); - --ig-success-700: rgb(32, 76, 39); - --ig-success-700-contrast: hsla(from color(from var(--ig-success-700) var(--y-contrast)) h 0 l/1); - --ig-success-800: rgb(24, 53, 28); - --ig-success-800-contrast: hsla(from color(from var(--ig-success-800) var(--y-contrast)) h 0 l/1); - --ig-success-900: rgb(11, 24, 12); - --ig-success-900-contrast: hsla(from color(from var(--ig-success-900) var(--y-contrast)) h 0 l/1); - --ig-success-seed: #4eb862; - --ig-success-seed-contrast: hsla(from color(from var(--ig-success-seed) var(--y-contrast)) h 0 l/1); - --ig-success-A100: rgb(51, 250, 108); - --ig-success-A100-contrast: hsla(from color(from var(--ig-success-A100) var(--y-contrast)) h 0 l/1); - --ig-success-A200: rgb(0, 186, 71); - --ig-success-A200-contrast: hsla(from color(from var(--ig-success-A200) var(--y-contrast)) h 0 l/1); - --ig-success-A400: rgb(0, 143, 53); - --ig-success-A400-contrast: hsla(from color(from var(--ig-success-A400) var(--y-contrast)) h 0 l/1); - --ig-success-A700: rgb(0, 113, 40); - --ig-success-A700-contrast: hsla(from color(from var(--ig-success-A700) var(--y-contrast)) h 0 l/1); - --ig-warn-50: rgb(251, 233, 213); - --ig-warn-50-contrast: hsla(from color(from var(--ig-warn-50) var(--y-contrast)) h 0 l/1); - --ig-warn-100: rgb(247, 195, 133); - --ig-warn-100-contrast: hsla(from color(from var(--ig-warn-100) var(--y-contrast)) h 0 l/1); - --ig-warn-200: rgb(233, 162, 65); - --ig-warn-200-contrast: hsla(from color(from var(--ig-warn-200) var(--y-contrast)) h 0 l/1); - --ig-warn-300: rgb(206, 135, 24); - --ig-warn-300-contrast: hsla(from color(from var(--ig-warn-300) var(--y-contrast)) h 0 l/1); - --ig-warn-400: rgb(177, 114, 4); - --ig-warn-400-contrast: hsla(from color(from var(--ig-warn-400) var(--y-contrast)) h 0 l/1); - --ig-warn-500: rgb(149, 94, 1); - --ig-warn-500-contrast: hsla(from color(from var(--ig-warn-500) var(--y-contrast)) h 0 l/1); - --ig-warn-600: rgb(121, 77, 4); - --ig-warn-600-contrast: hsla(from color(from var(--ig-warn-600) var(--y-contrast)) h 0 l/1); - --ig-warn-700: rgb(94, 60, 9); - --ig-warn-700-contrast: hsla(from color(from var(--ig-warn-700) var(--y-contrast)) h 0 l/1); - --ig-warn-800: rgb(65, 42, 11); - --ig-warn-800-contrast: hsla(from color(from var(--ig-warn-800) var(--y-contrast)) h 0 l/1); - --ig-warn-900: rgb(30, 19, 6); - --ig-warn-900-contrast: hsla(from color(from var(--ig-warn-900) var(--y-contrast)) h 0 l/1); - --ig-warn-seed: #faa419; - --ig-warn-seed-contrast: hsla(from color(from var(--ig-warn-seed) var(--y-contrast)) h 0 l/1); - --ig-warn-A100: rgb(255, 211, 156); - --ig-warn-A100-contrast: hsla(from color(from var(--ig-warn-A100) var(--y-contrast)) h 0 l/1); - --ig-warn-A200: rgb(222, 144, 3); - --ig-warn-A200-contrast: hsla(from color(from var(--ig-warn-A200) var(--y-contrast)) h 0 l/1); - --ig-warn-A400: rgb(172, 110, 0); - --ig-warn-A400-contrast: hsla(from color(from var(--ig-warn-A400) var(--y-contrast)) h 0 l/1); - --ig-warn-A700: rgb(136, 86, 0); - --ig-warn-A700-contrast: hsla(from color(from var(--ig-warn-A700) var(--y-contrast)) h 0 l/1); - --ig-error-50: rgb(254, 230, 230); - --ig-error-50-contrast: hsla(from color(from var(--ig-error-50) var(--y-contrast)) h 0 l/1); - --ig-error-100: rgb(255, 187, 187); - --ig-error-100-contrast: hsla(from color(from var(--ig-error-100) var(--y-contrast)) h 0 l/1); - --ig-error-200: rgb(255, 144, 147); - --ig-error-200-contrast: hsla(from color(from var(--ig-error-200) var(--y-contrast)) h 0 l/1); - --ig-error-300: rgb(254, 97, 109); - --ig-error-300-contrast: hsla(from color(from var(--ig-error-300) var(--y-contrast)) h 0 l/1); - --ig-error-400: rgb(236, 56, 81); - --ig-error-400-contrast: hsla(from color(from var(--ig-error-400) var(--y-contrast)) h 0 l/1); - --ig-error-500: rgb(207, 27, 62); - --ig-error-500-contrast: hsla(from color(from var(--ig-error-500) var(--y-contrast)) h 0 l/1); - --ig-error-600: rgb(172, 15, 48); - --ig-error-600-contrast: hsla(from color(from var(--ig-error-600) var(--y-contrast)) h 0 l/1); - --ig-error-700: rgb(134, 17, 38); - --ig-error-700-contrast: hsla(from color(from var(--ig-error-700) var(--y-contrast)) h 0 l/1); - --ig-error-800: rgb(93, 17, 27); - --ig-error-800-contrast: hsla(from color(from var(--ig-error-800) var(--y-contrast)) h 0 l/1); - --ig-error-900: rgb(44, 9, 12); - --ig-error-900-contrast: hsla(from color(from var(--ig-error-900) var(--y-contrast)) h 0 l/1); - --ig-error-seed: #ff134a; - --ig-error-seed-contrast: hsla(from color(from var(--ig-error-seed) var(--y-contrast)) h 0 l/1); - --ig-error-A100: rgb(255, 206, 206); - --ig-error-A100-contrast: hsla(from color(from var(--ig-error-A100) var(--y-contrast)) h 0 l/1); - --ig-error-A200: rgb(255, 117, 125); - --ig-error-A200-contrast: hsla(from color(from var(--ig-error-A200) var(--y-contrast)) h 0 l/1); - --ig-error-A400: rgb(240, 31, 72); - --ig-error-A400-contrast: hsla(from color(from var(--ig-error-A400) var(--y-contrast)) h 0 l/1); - --ig-error-A700: rgb(195, 1, 53); - --ig-error-A700-contrast: hsla(from color(from var(--ig-error-A700) var(--y-contrast)) h 0 l/1); -} diff --git a/_to_delete/theming-tmp2/perf.scss b/_to_delete/theming-tmp2/perf.scss deleted file mode 100644 index e461c9a0..00000000 --- a/_to_delete/theming-tmp2/perf.scss +++ /dev/null @@ -1,3 +0,0 @@ -@use '../sass/color' as *; -$p: palette($primary: #09f, $secondary: #df1b74, $surface: #fcfcfd, $gray: #333); -:root { @include palette($p); } diff --git a/_to_delete/theming-tmp2/s1.scss b/_to_delete/theming-tmp2/s1.scss deleted file mode 100644 index 67c38ada..00000000 --- a/_to_delete/theming-tmp2/s1.scss +++ /dev/null @@ -1,8 +0,0 @@ -@use '../sass/color' as *; -$light: palette($primary: #09f, $secondary: #09f, $surface: #fff); -$off: palette($primary: #09f, $secondary: #09f, $surface: #f5f6f8); -$dark: palette($primary: #09f, $secondary: #09f, $surface: #1a1a24); -$V: ('50','100','200','300','400','500','600','700','800','900'); -surface-white { @each $v in $V { #{$v}: color($light, surface, $v); } } -surface-offwhite { @each $v in $V { #{$v}: color($off, surface, $v); } } -surface-dark { @each $v in $V { #{$v}: color($dark, surface, $v); } } diff --git a/_to_delete/theming-tmp2/s2.css b/_to_delete/theming-tmp2/s2.css deleted file mode 100644 index 9b39c384..00000000 --- a/_to_delete/theming-tmp2/s2.css +++ /dev/null @@ -1,77 +0,0 @@ -gray-light { - 50: #fbfbfb; - 100: #f7f7f7; - 200: #ececec; - 300: #d9d9d9; - 400: #c1c1c1; - 500: #a4a4a4; - 600: #848484; - 700: #636363; - 800: #424242; - 900: #212121; -} - -gray-dark { - 50: #1e1e1e; - 100: #212121; - 200: #292929; - 300: #353535; - 400: #454545; - 500: #5a5a5a; - 600: #757575; - 700: #989898; - 800: #c6c6c6; - 900: #f7f7f7; -} - -surface-white { - 50: white; - 100: white; - 200: white; - 300: white; - 400: white; - 500: white; - 600: #e5e5e5; - 700: #cecece; - 800: #b9b9b9; - 900: #a5a5a5; -} - -surface-off { - 50: #fdfdfd; - 100: #fdfdfd; - 200: #fbfbfb; - 300: #f9f9f9; - 400: #f8f8f8; - 500: #f5f6f8; - 600: #dddddd; - 700: #c7c7c7; - 800: #b2b2b2; - 900: #9f9f9f; -} - -surface-dark { - 50: #686868; - 100: #595959; - 200: #4b4b4b; - 300: #3c3c3c; - 400: #2d2d2d; - 500: #1a1a24; - 600: #161616; - 700: #101010; - 800: #080808; - 900: black; -} - -primary-light { - 50: #e2edfb; - 100: #accffb; - 200: #75b4fa; - 300: #439bef; - 400: #1b83d6; - 500: #096db7; - 600: #065996; - 700: #0b4574; - 800: #0c3050; - 900: #061625; -} diff --git a/_to_delete/theming-tmp2/s2.scss b/_to_delete/theming-tmp2/s2.scss deleted file mode 100644 index f3cd6653..00000000 --- a/_to_delete/theming-tmp2/s2.scss +++ /dev/null @@ -1,11 +0,0 @@ -@use '../sass/color' as *; -$V: ('50','100','200','300','400','500','600','700','800','900'); -$light: palette($primary: #09f, $secondary: #09f, $surface: #fff, $gray: #333); -$off: palette($primary: #09f, $secondary: #09f, $surface: #f5f6f8, $gray: #333); -$dark: palette($primary: #09f, $secondary: #09f, $surface: #1a1a24, $gray: #dcdce4); -gray-light { @each $v in $V { #{$v}: color($light, gray, $v); } } -gray-dark { @each $v in $V { #{$v}: color($dark, gray, $v); } } -surface-white { @each $v in $V { #{$v}: color($light, surface, $v); } } -surface-off { @each $v in $V { #{$v}: color($off, surface, $v); } } -surface-dark { @each $v in $V { #{$v}: color($dark, surface, $v); } } -primary-light { @each $v in $V { #{$v}: color($light, primary, $v); } } diff --git a/_to_delete/theming-tmp2/s3.scss b/_to_delete/theming-tmp2/s3.scss deleted file mode 100644 index e195eac0..00000000 --- a/_to_delete/theming-tmp2/s3.scss +++ /dev/null @@ -1,3 +0,0 @@ -@use '../sass/color' as *; -$p: palette($primary: #09f, $secondary: #df1b74, $surface: #fcfcfd, $gray: #333); -:root { @include palette($p, $contrast: false); } diff --git a/_to_delete/theming-tmp2/shades.html b/_to_delete/theming-tmp2/shades.html deleted file mode 100644 index 291aa151..00000000 --- a/_to_delete/theming-tmp2/shades.html +++ /dev/null @@ -1,380 +0,0 @@ - - -Shade generators -
-

Shade generators, side by side

-

Compiled from the library. Numbers are WCAG contrast against white for color ramps, -and against the surface for the neutral and surface families. Every value is a concrete color — -the generator resolves them at build time.

-
Build warnings
The "surface" seed #fff leaves no room for shades 50 100 200 300 400
The "surface" seed #ffffff leaves no room for shades 50 100 200 300 400
- -

Color ramps

- -
-

Framework primary

#0099ff - lands on 300
-
- -
-

gamut-relative

-
50
100
200
300
400
500
600
700
800
900
- -
- -
-

legacy

-
50
100
200
300
400
500
600
700
800
900
- -
-
-
-

accent track

A100
A200
A400
A700
-

legacy accents

A100
A200
A400
A700
-
-
-
-

Framework secondary

#df1b74 - lands on 400
-
- -
-

gamut-relative

-
50
100
200
300
400
500
600
700
800
900
- -
- -
-

legacy

-
50
100
200
300
400
500
600
700
800
900
- -
-
-
-

accent track

A100
A200
A400
A700
-

legacy accents

A100
A200
A400
A700
-
-
-
-

Warn

#faa419 - lands on 200
-
- -
-

gamut-relative

-
50
100
200
300
400
500
600
700
800
900
- -
- -
-

legacy

-
50
100
200
300
400
500
600
700
800
900
- -
-
-
-

accent track

A100
A200
A400
A700
-

legacy accents

A100
A200
A400
A700
-
-
-
-

Success

#4eb862 - lands on 200
-
- -
-

gamut-relative

-
50
100
200
300
400
500
600
700
800
900
- -
- -
-

legacy

-
50
100
200
300
400
500
600
700
800
900
- -
-
-
-

accent track

A100
A200
A400
A700
-

legacy accents

A100
A200
A400
A700
-
-
-
-

Near-white seed

#ffe9b0 - lands on 50
-
- -
-

gamut-relative

-
50
100
200
300
400
500
600
700
800
900
- -
- -
-

legacy

-
50
100
200
300
400
500
600
700
800
900
- -
-
-
-

accent track

A100
A200
A400
A700
-

legacy accents

A100
A200
A400
A700
-
-
-
-

Near-black seed

#141225 - lands on 900
-
- -
-

gamut-relative

-
50
100
200
300
400
500
600
700
800
900
- -
- -
-

legacy

-
50
100
200
300
400
500
600
700
800
900
- -
-
-
-

accent track

A100
A200
A400
A700
-

legacy accents

A100
A200
A400
A700
-
-
-
-

Neon

#00ff00 - lands on 100
-
- -
-

gamut-relative

-
50
100
200
300
400
500
600
700
800
900
- -
- -
-

legacy

-
50
100
200
300
400
500
600
700
800
900
- -
-
-
-

accent track

A100
A200
A400
A700
-

legacy accents

A100
A200
A400
A700
-
-
-
-

Washed out

#a99bb0 - lands on 300
-
- -
-

gamut-relative

-
50
100
200
300
400
500
600
700
800
900
- -
- -
-

legacy

-
50
100
200
300
400
500
600
700
800
900
- -
-
-
-

accent track

A100
A200
A400
A700
-

legacy accents

A100
A200
A400
A700
-
-
-
-

Pure gray

#8a8a8a - lands on 400
-
- -
-

gamut-relative

-
50
100
200
300
400
500
600
700
800
900
- -
- -
-

legacy

-
50
100
200
300
400
500
600
700
800
900
- -
-
-
-

accent track

A100
A200
A400
A700
-

legacy accents

A100
A200
A400
A700
-
-
- -

Neutral and surface families

- -
-

Pure white surface

#ffffff
-
- -
-

gray · gamut-relative

-
50
100
200
300
400
500
600
700
800
900
-

anchored to the surface, so 50 always sits nearest the background

-
- -
-

gray · legacy

-
50
100
200
300
400
500
600
700
800
900
- -
-
-
- -
-

surface · gamut-relative

-
50
100
200
300
400
500
600
700
800
900
-

500 is the background itself; the rest are layering steps either side of it

-
- -
-

surface · legacy

-
50
100
200
300
400
500
600
700
800
900
- -
-
-
-
-

Off-white surface

#f5f6f8
-
- -
-

gray · gamut-relative

-
50
100
200
300
400
500
600
700
800
900
-

anchored to the surface, so 50 always sits nearest the background

-
- -
-

gray · legacy

-
50
100
200
300
400
500
600
700
800
900
- -
-
-
- -
-

surface · gamut-relative

-
50
100
200
300
400
500
600
700
800
900
-

500 is the background itself; the rest are layering steps either side of it

-
- -
-

surface · legacy

-
50
100
200
300
400
500
600
700
800
900
- -
-
-
-
-

Dark surface

#1a1a24
-
- -
-

gray · gamut-relative

-
50
100
200
300
400
500
600
700
800
900
-

anchored to the surface, so 50 always sits nearest the background

-
- -
-

gray · legacy

-
50
100
200
300
400
500
600
700
800
900
- -
-
-
- -
-

surface · gamut-relative

-
50
100
200
300
400
500
600
700
800
900
-

500 is the background itself; the rest are layering steps either side of it

-
- -
-

surface · legacy

-
50
100
200
300
400
500
600
700
800
900
- -
-
-
- -
Generated by .scripts/previewShades.mjs. The palettes bundled with the library -stay on the legacy generator, so shipped themes are unchanged.
-
- \ No newline at end of file diff --git a/_to_delete/theming-tmp2/sweep.mjs b/_to_delete/theming-tmp2/sweep.mjs deleted file mode 100644 index b14f1779..00000000 --- a/_to_delete/theming-tmp2/sweep.mjs +++ /dev/null @@ -1,47 +0,0 @@ -import * as sass from "sass"; -const ROOT = "."; -const SH = ["50","100","200","300","400","500","600","700","800","900"]; -const SEEDS = ["#0099ff","#df1b74","#faa419","#4eb862","#7c3aed","#e11d48","#0d9488","#a99bb0", - "#00ff00","#ffe9b0","#141225","#8a8a8a","#ff00ff","#00ffff","#123456","#fefefe","#010203","#c0ffee"]; -const SURFACES = ["#ffffff","#fcfcfd","#f5f6f8","#eeeeee","#1a1a24","#000000","#0d1117"]; -const warn = []; -const run = (body) => { - const css = sass.compileString(`@use 'sass:map';\n@use 'sass/color' as *;\n${body}`, - { loadPaths: [ROOT], logger: { warn: (m) => warn.push(m.split(" —")[0]) } }).css; - const o = {}; - for (const l of css.split("\n")) { const m = l.match(/^\s*([\w-]+):\s*(.+);\s*$/); if (m) o[m[1]] = m[2].trim(); } - return o; -}; -const hex = (s) => { const m = s.match(/^#?([0-9a-f]{6})$/i) || s.match(/rgb\((\d+),\s*(\d+),\s*(\d+)\)/i); - if (!m) return null; - return m.length === 2 ? [0,2,4].map(i=>parseInt(m[1].slice(i,i+2),16)) : [1,2,3].map(i=>+m[i]); }; -const lin = v => (v/=255) <= 0.03928 ? v/12.92 : Math.pow((v+0.055)/1.055,2.4); -const lum = ([r,g,b]) => 0.2126*lin(r)+0.7152*lin(g)+0.0722*lin(b); -const cr = (a,b) => { const x=lum(a)+0.05, y=lum(b)+0.05; return Math.max(x,y)/Math.min(x,y); }; - -let aaFail=0, aaTot=0, dupFams=0, famTot=0; -for (const seed of SEEDS) { - const d = run(`$p: palette($primary: ${seed}, $secondary: ${seed}, $surface: #fff, $gray: #333); - $s: map.get($p,'primary'); out { ${SH.map(v=>`s-${v}: #{map.get($s,'${v}-raw')};`).join("")} }`); - const c = SH.map(v => hex(d[`s-${v}`])); - famTot++; - if (new Set(c.map(String)).size !== c.length) { dupFams++; console.log("DUP", seed); } - for (let i=0;i<5;i++){ aaTot++; if (cr(c[i],c[i+5]) < 4.5) { aaFail++; console.log("AA fail", seed, SH[i], SH[i+5], cr(c[i],c[i+5]).toFixed(2)); } } -} -console.log(`\ncolor ramps: ${famTot} seeds | AA 5-rung failures ${aaFail}/${aaTot} | families with duplicate shades ${dupFams}`); - -console.log("\nsurface + gray across surfaces:"); -for (const bg of SURFACES) { - const d = run(`$p: palette($primary: #09f, $secondary: #09f, $surface: ${bg}, $gray: #333); - $g: map.get($p,'gray'); $s: map.get($p,'surface'); - out { ${SH.map(v=>`g-${v}: #{map.get($g,'${v}-raw')};`).join("")} - ${SH.map(v=>`s-${v}: #{map.get($s,'${v}-raw')};`).join("")} - s500: #{map.get($s,'500-raw')}; }`); - const g = SH.map(v=>hex(d[`g-${v}`])), s = SH.map(v=>hex(d[`s-${v}`])); - const bgc = hex(bg); - const uniqG = new Set(g.map(String)).size, uniqS = new Set(s.map(String)).size; - const anchored = String(s[5]) === String(bgc); - const nearest = cr(g[0], bgc) < cr(g[9], bgc); - console.log(` ${bg} gray distinct ${uniqG}/10, 50-nearest-bg ${nearest} | surface distinct ${uniqS}/10, 500==bg ${anchored} span ${cr(s[0],s[9]).toFixed(2)}:1`); -} -console.log("\nwarnings:", [...new Set(warn)].length ? [...new Set(warn)] : "none"); diff --git a/_to_delete/theming-tmp2/tests.css b/_to_delete/theming-tmp2/tests.css deleted file mode 100644 index d57b04c4..00000000 --- a/_to_delete/theming-tmp2/tests.css +++ /dev/null @@ -1,7969 +0,0 @@ -@charset "UTF-8"; -/* # Module: Animations */ -/* -------------------- */ -/* Test: should include a keyframe animation only once at the root of the stylesheet */ -/* ASSERT: */ -/* OUTPUT */ -@keyframes test-keyframes { - 0% { - color: red; - } - 100% { - color: blue; - } -} -/* END_OUTPUT */ -/* EXPECTED */ -@keyframes test-keyframes { - 0% { - color: red; - } - 100% { - color: blue; - } -} -/* END_EXPECTED */ -/* END_ASSERT */ -/* */ -/* Test: should include a list of animations using the animation mixin */ -/* ASSERT: */ -/* OUTPUT */ -.test-output { - animation: "test-keyframes" 2s ease-out, "bounce-out" 1s ease-out; -} - -/* END_OUTPUT */ -/* EXPECTED */ -.test-output { - animation: "test-keyframes" 2s ease-out, "bounce-out" 1s ease-out; -} - -/* END_EXPECTED */ -/* END_ASSERT */ -/* */ -/* */ -/* # Module: Color */ -/* --------------- */ -/* # Module: Color :: base */ -/* ----------------------- */ -/* Test: should mix two colors to produce an opaque color */ -/* ✔ [assert-equal] should mix two colors to produce an opaque color */ -/* ✔ [assert-equal] should mix two colors to produce an opaque color */ -/* */ -/* Test: converts a color to a list of HSL values */ -/* ✔ [assert-equal] converts a color to a list of HSL values */ -/* */ -/* */ -/* # Module: Color :: charts */ -/* ------------------------- */ -/* Test: should resolve regular chart brushes */ -/* ✔ [assert-equal] should resolve regular chart brushes */ -/* */ -/* Test: should resolve color-blind chart brushes */ -/* ✔ [assert-equal] should resolve color-blind chart brushes */ -/* */ -/* */ -/* # Module: Color :: contrast */ -/* --------------------------- */ -/* Test: should return an adaptive contrast color from a hex value */ -/* ✔ [assert-equal] should return an adaptive contrast color from a hex value */ -/* */ -/* Test: should return an adaptive contrast color from an hsl value */ -/* ✔ [assert-equal] should return an adaptive contrast color from an hsl value */ -/* */ -/* Test: should return an adaptive contrast color from a CSS variable value */ -/* ✔ [assert-equal] should return an adaptive contrast color from a CSS variable value */ -/* */ -/* Test: should return the passed background value if no valid colors are provided */ -/* ✔ [assert-equal] should return the passed background value if no valid colors are provided */ -/* */ -/* Test: should return black for a white background */ -/* ✔ [assert-equal] should return black for a white background */ -/* */ -/* Test: should return white for a black background */ -/* ✔ [assert-equal] should return white for a black background */ -/* */ -/* Test: should return a contrasting color for a given background regardless of level case */ -/* ✔ [assert-equal] should return a contrasting color for a given background regardless of level case */ -/* ✔ [assert-equal] should return a contrasting color for a given background regardless of level case */ -/* ✔ [assert-equal] should return a contrasting color for a given background regardless of level case */ -/* */ -/* Test: returns the best contrast color from a list of candidates */ -/* ✔ [assert-equal] returns the best contrast color from a list of candidates */ -/* */ -/* Test: should return an AAA contrasting color for a given background */ -/* ✔ [assert-equal] should return an AAA contrasting color for a given background */ -/* */ -/* Test: should return an AA contrasting color for a given background */ -/* ✔ [assert-equal] should return an AA contrasting color for a given background */ -/* */ -/* */ -/* # Module: Color :: palette */ -/* -------------------------- */ -/* Test: should return a shade of type color w/ palette as only argument */ -/* ✔ [assert-equal] should return a shade of type color w/ palette as only argument */ -/* */ -/* Test: should return a shade of type color string w/ palette and color as only arguments */ -/* ✔ [assert-equal] should return a shade of type color string w/ palette and color as only arguments */ -/* */ -/* Test: should return a shade of type string w/ all arguments passed */ -/* ✔ [assert-equal] should return a shade of type string w/ all arguments passed */ -/* ✔ [assert-unequal] should return a shade of type string w/ all arguments passed */ -/* */ -/* Test: should return a shade as CSS variable w/o arguments */ -/* ✔ [assert-equal] should return a shade as CSS variable w/o arguments */ -/* ✔ [assert-equal] should return a shade as CSS variable w/o arguments */ -/* */ -/* Test: should return a shade as CSS variable w/ color as only argument */ -/* ✔ [assert-equal] should return a shade as CSS variable w/ color as only argument */ -/* ✔ [assert-equal] should return a shade as CSS variable w/ color as only argument */ -/* */ -/* Test: should return a shade of type string as CSS var w/ color and variant as only arguments */ -/* ✔ [assert-equal] should return a shade of type string as CSS var w/ color and variant as only arguments */ -/* ✔ [assert-equal] should return a shade of type string as CSS var w/ color and variant as only arguments */ -/* */ -/* Test: should return a contrast shade w/ palette as only argument */ -/* ✔ [assert-equal] should return a contrast shade w/ palette as only argument */ -/* */ -/* Test: should return a contrast shade of type string as CSS var w/ color and variant as only arguments */ -/* ✔ [assert-equal] should return a contrast shade of type string as CSS var w/ color and variant as only arguments */ -/* ✔ [assert-equal] should return a contrast shade of type string as CSS var w/ color and variant as only arguments */ -/* */ -/* Test: should retrieve colors from a palette regadless of type of key */ -/* ✔ [assert-true] should retrieve colors from a palette regadless of type of key */ -/* ✔ [assert-equal] should retrieve colors from a palette regadless of type of key */ -/* ✔ [assert-true] should retrieve colors from a palette regadless of type of key */ -/* ✔ [assert-equal] should retrieve colors from a palette regadless of type of key */ -/* ✔ [assert-true] should retrieve colors from a palette regadless of type of key */ -/* ✔ [assert-equal] should retrieve colors from a palette regadless of type of key */ -/* ✔ [assert-true] should retrieve colors from a palette regadless of type of key */ -/* ✔ [assert-equal] should retrieve colors from a palette regadless of type of key */ -/* */ -/* Test: should generate an HSL color shade from a given base color */ -/* ✔ [assert-equal] should generate an HSL color shade from a given base color */ -/* */ -/* Test: should generate an a contrasting HSL grayscale shade for a given surface color */ -/* ✔ [assert-equal] should generate an a contrasting HSL grayscale shade for a given surface color */ -/* ✔ [assert-equal] should generate an a contrasting HSL grayscale shade for a given surface color */ -/* */ -/* Test: should generate a valid palette */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] map */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] map */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] map */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] map */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] map */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] map */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] map */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] map */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] map */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] string */ -/* */ -/* Test: should generate correct CSS variables for color and grayscale shades in a palette */ -/* ASSERT: */ -/* OUTPUT */ -:root { - --ig-wcag-a: 0.31; - --ig-wcag-aa: 0.185; - --ig-wcag-aaa: 0.178; - --ig-contrast-level: var(--ig-wcag-aa); - --y: clamp(0, (y / var(--ig-contrast-level) - 1) * -infinity, 1); - --y-contrast: xyz-d65 var(--y) var(--y) var(--y); -} - -:root { - --ig-primary-50: rgb(226, 237, 251); - --ig-primary-50-contrast: hsla(from color(from var(--ig-primary-50) var(--y-contrast)) h 0 l/1); - --ig-primary-100: rgb(172, 207, 251); - --ig-primary-100-contrast: hsla(from color(from var(--ig-primary-100) var(--y-contrast)) h 0 l/1); - --ig-primary-200: rgb(117, 180, 250); - --ig-primary-200-contrast: hsla(from color(from var(--ig-primary-200) var(--y-contrast)) h 0 l/1); - --ig-primary-300: rgb(67, 155, 239); - --ig-primary-300-contrast: hsla(from color(from var(--ig-primary-300) var(--y-contrast)) h 0 l/1); - --ig-primary-400: rgb(27, 131, 214); - --ig-primary-400-contrast: hsla(from color(from var(--ig-primary-400) var(--y-contrast)) h 0 l/1); - --ig-primary-500: rgb(9, 109, 183); - --ig-primary-500-contrast: hsla(from color(from var(--ig-primary-500) var(--y-contrast)) h 0 l/1); - --ig-primary-600: rgb(6, 89, 150); - --ig-primary-600-contrast: hsla(from color(from var(--ig-primary-600) var(--y-contrast)) h 0 l/1); - --ig-primary-700: rgb(11, 69, 116); - --ig-primary-700-contrast: hsla(from color(from var(--ig-primary-700) var(--y-contrast)) h 0 l/1); - --ig-primary-800: rgb(12, 48, 80); - --ig-primary-800-contrast: hsla(from color(from var(--ig-primary-800) var(--y-contrast)) h 0 l/1); - --ig-primary-900: rgb(6, 22, 37); - --ig-primary-900-contrast: hsla(from color(from var(--ig-primary-900) var(--y-contrast)) h 0 l/1); - --ig-primary-seed: #09f; - --ig-primary-seed-contrast: hsla(from color(from var(--ig-primary-seed) var(--y-contrast)) h 0 l/1); - --ig-primary-A100: rgb(191, 221, 255); - --ig-primary-A100-contrast: hsla(from color(from var(--ig-primary-A100) var(--y-contrast)) h 0 l/1); - --ig-primary-A200: rgb(73, 164, 255); - --ig-primary-A200-contrast: hsla(from color(from var(--ig-primary-A200) var(--y-contrast)) h 0 l/1); - --ig-primary-A400: rgb(4, 127, 213); - --ig-primary-A400-contrast: hsla(from color(from var(--ig-primary-A400) var(--y-contrast)) h 0 l/1); - --ig-primary-A700: rgb(0, 100, 169); - --ig-primary-A700-contrast: hsla(from color(from var(--ig-primary-A700) var(--y-contrast)) h 0 l/1); - --ig-secondary-50: rgb(240, 235, 245); - --ig-secondary-50-contrast: hsla(from color(from var(--ig-secondary-50) var(--y-contrast)) h 0 l/1); - --ig-secondary-100: rgb(213, 198, 231); - --ig-secondary-100-contrast: hsla(from color(from var(--ig-secondary-100) var(--y-contrast)) h 0 l/1); - --ig-secondary-200: rgb(190, 166, 221); - --ig-secondary-200-contrast: hsla(from color(from var(--ig-secondary-200) var(--y-contrast)) h 0 l/1); - --ig-secondary-300: rgb(168, 136, 211); - --ig-secondary-300-contrast: hsla(from color(from var(--ig-secondary-300) var(--y-contrast)) h 0 l/1); - --ig-secondary-400: rgb(146, 110, 198); - --ig-secondary-400-contrast: hsla(from color(from var(--ig-secondary-400) var(--y-contrast)) h 0 l/1); - --ig-secondary-500: rgb(125, 87, 177); - --ig-secondary-500-contrast: hsla(from color(from var(--ig-secondary-500) var(--y-contrast)) h 0 l/1); - --ig-secondary-600: rgb(103, 69, 150); - --ig-secondary-600-contrast: hsla(from color(from var(--ig-secondary-600) var(--y-contrast)) h 0 l/1); - --ig-secondary-700: rgb(80, 53, 117); - --ig-secondary-700-contrast: hsla(from color(from var(--ig-secondary-700) var(--y-contrast)) h 0 l/1); - --ig-secondary-800: rgb(56, 38, 81); - --ig-secondary-800-contrast: hsla(from color(from var(--ig-secondary-800) var(--y-contrast)) h 0 l/1); - --ig-secondary-900: rgb(25, 17, 38); - --ig-secondary-900-contrast: hsla(from color(from var(--ig-secondary-900) var(--y-contrast)) h 0 l/1); - --ig-secondary-seed: #97c; - --ig-secondary-seed-contrast: hsla(from color(from var(--ig-secondary-seed) var(--y-contrast)) h 0 l/1); - --ig-secondary-A100: rgb(233, 209, 255); - --ig-secondary-A100-contrast: hsla(from color(from var(--ig-secondary-A100) var(--y-contrast)) h 0 l/1); - --ig-secondary-A200: rgb(192, 134, 255); - --ig-secondary-A200-contrast: hsla(from color(from var(--ig-secondary-A200) var(--y-contrast)) h 0 l/1); - --ig-secondary-A400: rgb(163, 75, 255); - --ig-secondary-A400-contrast: hsla(from color(from var(--ig-secondary-A400) var(--y-contrast)) h 0 l/1); - --ig-secondary-A700: rgb(139, 23, 233); - --ig-secondary-A700-contrast: hsla(from color(from var(--ig-secondary-A700) var(--y-contrast)) h 0 l/1); - --ig-gray-50: rgb(251, 251, 251); - --ig-gray-50-contrast: hsla(from color(from var(--ig-gray-50) var(--y-contrast)) h 0 l/1); - --ig-gray-100: rgb(247, 247, 247); - --ig-gray-100-contrast: hsla(from color(from var(--ig-gray-100) var(--y-contrast)) h 0 l/1); - --ig-gray-200: rgb(236, 236, 236); - --ig-gray-200-contrast: hsla(from color(from var(--ig-gray-200) var(--y-contrast)) h 0 l/1); - --ig-gray-300: rgb(217, 217, 217); - --ig-gray-300-contrast: hsla(from color(from var(--ig-gray-300) var(--y-contrast)) h 0 l/1); - --ig-gray-400: rgb(193, 193, 193); - --ig-gray-400-contrast: hsla(from color(from var(--ig-gray-400) var(--y-contrast)) h 0 l/1); - --ig-gray-500: rgb(164, 164, 164); - --ig-gray-500-contrast: hsla(from color(from var(--ig-gray-500) var(--y-contrast)) h 0 l/1); - --ig-gray-600: rgb(132, 132, 132); - --ig-gray-600-contrast: hsla(from color(from var(--ig-gray-600) var(--y-contrast)) h 0 l/1); - --ig-gray-700: rgb(99, 99, 99); - --ig-gray-700-contrast: hsla(from color(from var(--ig-gray-700) var(--y-contrast)) h 0 l/1); - --ig-gray-800: rgb(66, 66, 66); - --ig-gray-800-contrast: hsla(from color(from var(--ig-gray-800) var(--y-contrast)) h 0 l/1); - --ig-gray-900: rgb(33, 33, 33); - --ig-gray-900-contrast: hsla(from color(from var(--ig-gray-900) var(--y-contrast)) h 0 l/1); - --ig-gray-seed: #000; - --ig-gray-seed-contrast: hsla(from color(from var(--ig-gray-seed) var(--y-contrast)) h 0 l/1); - --ig-surface-50: rgb(255, 255, 255); - --ig-surface-50-contrast: hsla(from color(from var(--ig-surface-50) var(--y-contrast)) h 0 l/1); - --ig-surface-100: rgb(255, 255, 255); - --ig-surface-100-contrast: hsla(from color(from var(--ig-surface-100) var(--y-contrast)) h 0 l/1); - --ig-surface-200: rgb(255, 255, 255); - --ig-surface-200-contrast: hsla(from color(from var(--ig-surface-200) var(--y-contrast)) h 0 l/1); - --ig-surface-300: rgb(255, 255, 255); - --ig-surface-300-contrast: hsla(from color(from var(--ig-surface-300) var(--y-contrast)) h 0 l/1); - --ig-surface-400: rgb(255, 255, 255); - --ig-surface-400-contrast: hsla(from color(from var(--ig-surface-400) var(--y-contrast)) h 0 l/1); - --ig-surface-500: rgb(255, 255, 255); - --ig-surface-500-contrast: hsla(from color(from var(--ig-surface-500) var(--y-contrast)) h 0 l/1); - --ig-surface-600: rgb(229, 229, 229); - --ig-surface-600-contrast: hsla(from color(from var(--ig-surface-600) var(--y-contrast)) h 0 l/1); - --ig-surface-700: rgb(206, 206, 206); - --ig-surface-700-contrast: hsla(from color(from var(--ig-surface-700) var(--y-contrast)) h 0 l/1); - --ig-surface-800: rgb(185, 185, 185); - --ig-surface-800-contrast: hsla(from color(from var(--ig-surface-800) var(--y-contrast)) h 0 l/1); - --ig-surface-900: rgb(165, 165, 165); - --ig-surface-900-contrast: hsla(from color(from var(--ig-surface-900) var(--y-contrast)) h 0 l/1); - --ig-surface-seed: #fff; - --ig-surface-seed-contrast: hsla(from color(from var(--ig-surface-seed) var(--y-contrast)) h 0 l/1); - --ig-surface-A100: rgb(218, 218, 218); - --ig-surface-A100-contrast: hsla(from color(from var(--ig-surface-A100) var(--y-contrast)) h 0 l/1); - --ig-surface-A200: rgb(161, 161, 161); - --ig-surface-A200-contrast: hsla(from color(from var(--ig-surface-A200) var(--y-contrast)) h 0 l/1); - --ig-surface-A400: rgb(124, 124, 124); - --ig-surface-A400-contrast: hsla(from color(from var(--ig-surface-A400) var(--y-contrast)) h 0 l/1); - --ig-surface-A700: rgb(97, 97, 97); - --ig-surface-A700-contrast: hsla(from color(from var(--ig-surface-A700) var(--y-contrast)) h 0 l/1); - --ig-info-50: rgb(232, 235, 252); - --ig-info-50-contrast: hsla(from color(from var(--ig-info-50) var(--y-contrast)) h 0 l/1); - --ig-info-100: rgb(190, 203, 253); - --ig-info-100-contrast: hsla(from color(from var(--ig-info-100) var(--y-contrast)) h 0 l/1); - --ig-info-200: rgb(149, 173, 255); - --ig-info-200-contrast: hsla(from color(from var(--ig-info-200) var(--y-contrast)) h 0 l/1); - --ig-info-300: rgb(109, 145, 255); - --ig-info-300-contrast: hsla(from color(from var(--ig-info-300) var(--y-contrast)) h 0 l/1); - --ig-info-400: rgb(70, 117, 255); - --ig-info-400-contrast: hsla(from color(from var(--ig-info-400) var(--y-contrast)) h 0 l/1); - --ig-info-500: rgb(34, 91, 245); - --ig-info-500-contrast: hsla(from color(from var(--ig-info-500) var(--y-contrast)) h 0 l/1); - --ig-info-600: rgb(15, 67, 220); - --ig-info-600-contrast: hsla(from color(from var(--ig-info-600) var(--y-contrast)) h 0 l/1); - --ig-info-700: rgb(7, 50, 180); - --ig-info-700-contrast: hsla(from color(from var(--ig-info-700) var(--y-contrast)) h 0 l/1); - --ig-info-800: rgb(6, 36, 125); - --ig-info-800-contrast: hsla(from color(from var(--ig-info-800) var(--y-contrast)) h 0 l/1); - --ig-info-900: rgb(4, 18, 59); - --ig-info-900-contrast: hsla(from color(from var(--ig-info-900) var(--y-contrast)) h 0 l/1); - --ig-info-seed: blue; - --ig-info-seed-contrast: hsla(from color(from var(--ig-info-seed) var(--y-contrast)) h 0 l/1); - --ig-info-A100: rgb(207, 217, 255); - --ig-info-A100-contrast: hsla(from color(from var(--ig-info-A100) var(--y-contrast)) h 0 l/1); - --ig-info-A200: rgb(124, 156, 255); - --ig-info-A200-contrast: hsla(from color(from var(--ig-info-A200) var(--y-contrast)) h 0 l/1); - --ig-info-A400: rgb(63, 113, 255); - --ig-info-A400-contrast: hsla(from color(from var(--ig-info-A400) var(--y-contrast)) h 0 l/1); - --ig-info-A700: rgb(16, 75, 249); - --ig-info-A700-contrast: hsla(from color(from var(--ig-info-A700) var(--y-contrast)) h 0 l/1); - --ig-success-50: rgb(193, 251, 187); - --ig-success-50-contrast: hsla(from color(from var(--ig-success-50) var(--y-contrast)) h 0 l/1); - --ig-success-100: rgb(93, 231, 86); - --ig-success-100-contrast: hsla(from color(from var(--ig-success-100) var(--y-contrast)) h 0 l/1); - --ig-success-200: rgb(47, 203, 42); - --ig-success-200-contrast: hsla(from color(from var(--ig-success-200) var(--y-contrast)) h 0 l/1); - --ig-success-300: rgb(17, 175, 14); - --ig-success-300-contrast: hsla(from color(from var(--ig-success-300) var(--y-contrast)) h 0 l/1); - --ig-success-400: rgb(1, 148, 1); - --ig-success-400-contrast: hsla(from color(from var(--ig-success-400) var(--y-contrast)) h 0 l/1); - --ig-success-500: rgb(1, 124, 0); - --ig-success-500-contrast: hsla(from color(from var(--ig-success-500) var(--y-contrast)) h 0 l/1); - --ig-success-600: rgb(5, 101, 4); - --ig-success-600-contrast: hsla(from color(from var(--ig-success-600) var(--y-contrast)) h 0 l/1); - --ig-success-700: rgb(11, 78, 9); - --ig-success-700-contrast: hsla(from color(from var(--ig-success-700) var(--y-contrast)) h 0 l/1); - --ig-success-800: rgb(13, 55, 11); - --ig-success-800-contrast: hsla(from color(from var(--ig-success-800) var(--y-contrast)) h 0 l/1); - --ig-success-900: rgb(7, 25, 6); - --ig-success-900-contrast: hsla(from color(from var(--ig-success-900) var(--y-contrast)) h 0 l/1); - --ig-success-seed: green; - --ig-success-seed-contrast: hsla(from color(from var(--ig-success-seed) var(--y-contrast)) h 0 l/1); - --ig-success-A100: rgb(56, 251, 50); - --ig-success-A100-contrast: hsla(from color(from var(--ig-success-A100) var(--y-contrast)) h 0 l/1); - --ig-success-A200: rgb(0, 187, 0); - --ig-success-A200-contrast: hsla(from color(from var(--ig-success-A200) var(--y-contrast)) h 0 l/1); - --ig-success-A400: rgb(0, 144, 0); - --ig-success-A400-contrast: hsla(from color(from var(--ig-success-A400) var(--y-contrast)) h 0 l/1); - --ig-success-A700: rgb(0, 114, 0); - --ig-success-A700-contrast: hsla(from color(from var(--ig-success-A700) var(--y-contrast)) h 0 l/1); - --ig-warn-50: rgb(251, 233, 213); - --ig-warn-50-contrast: hsla(from color(from var(--ig-warn-50) var(--y-contrast)) h 0 l/1); - --ig-warn-100: rgb(247, 195, 133); - --ig-warn-100-contrast: hsla(from color(from var(--ig-warn-100) var(--y-contrast)) h 0 l/1); - --ig-warn-200: rgb(233, 161, 65); - --ig-warn-200-contrast: hsla(from color(from var(--ig-warn-200) var(--y-contrast)) h 0 l/1); - --ig-warn-300: rgb(207, 135, 24); - --ig-warn-300-contrast: hsla(from color(from var(--ig-warn-300) var(--y-contrast)) h 0 l/1); - --ig-warn-400: rgb(177, 114, 4); - --ig-warn-400-contrast: hsla(from color(from var(--ig-warn-400) var(--y-contrast)) h 0 l/1); - --ig-warn-500: rgb(149, 94, 1); - --ig-warn-500-contrast: hsla(from color(from var(--ig-warn-500) var(--y-contrast)) h 0 l/1); - --ig-warn-600: rgb(121, 77, 4); - --ig-warn-600-contrast: hsla(from color(from var(--ig-warn-600) var(--y-contrast)) h 0 l/1); - --ig-warn-700: rgb(94, 60, 9); - --ig-warn-700-contrast: hsla(from color(from var(--ig-warn-700) var(--y-contrast)) h 0 l/1); - --ig-warn-800: rgb(65, 42, 11); - --ig-warn-800-contrast: hsla(from color(from var(--ig-warn-800) var(--y-contrast)) h 0 l/1); - --ig-warn-900: rgb(30, 19, 6); - --ig-warn-900-contrast: hsla(from color(from var(--ig-warn-900) var(--y-contrast)) h 0 l/1); - --ig-warn-seed: orange; - --ig-warn-seed-contrast: hsla(from color(from var(--ig-warn-seed) var(--y-contrast)) h 0 l/1); - --ig-warn-A100: rgb(255, 211, 156); - --ig-warn-A100-contrast: hsla(from color(from var(--ig-warn-A100) var(--y-contrast)) h 0 l/1); - --ig-warn-A200: rgb(222, 143, 4); - --ig-warn-A200-contrast: hsla(from color(from var(--ig-warn-A200) var(--y-contrast)) h 0 l/1); - --ig-warn-A400: rgb(172, 110, 0); - --ig-warn-A400-contrast: hsla(from color(from var(--ig-warn-A400) var(--y-contrast)) h 0 l/1); - --ig-warn-A700: rgb(136, 86, 0); - --ig-warn-A700-contrast: hsla(from color(from var(--ig-warn-A700) var(--y-contrast)) h 0 l/1); - --ig-error-50: rgb(254, 231, 227); - --ig-error-50-contrast: hsla(from color(from var(--ig-error-50) var(--y-contrast)) h 0 l/1); - --ig-error-100: rgb(255, 188, 177); - --ig-error-100-contrast: hsla(from color(from var(--ig-error-100) var(--y-contrast)) h 0 l/1); - --ig-error-200: rgb(255, 146, 130); - --ig-error-200-contrast: hsla(from color(from var(--ig-error-200) var(--y-contrast)) h 0 l/1); - --ig-error-300: rgb(255, 99, 82); - --ig-error-300-contrast: hsla(from color(from var(--ig-error-300) var(--y-contrast)) h 0 l/1); - --ig-error-400: rgb(237, 58, 45); - --ig-error-400-contrast: hsla(from color(from var(--ig-error-400) var(--y-contrast)) h 0 l/1); - --ig-error-500: rgb(209, 28, 19); - --ig-error-500-contrast: hsla(from color(from var(--ig-error-500) var(--y-contrast)) h 0 l/1); - --ig-error-600: rgb(174, 16, 9); - --ig-error-600-contrast: hsla(from color(from var(--ig-error-600) var(--y-contrast)) h 0 l/1); - --ig-error-700: rgb(135, 17, 11); - --ig-error-700-contrast: hsla(from color(from var(--ig-error-700) var(--y-contrast)) h 0 l/1); - --ig-error-800: rgb(93, 18, 12); - --ig-error-800-contrast: hsla(from color(from var(--ig-error-800) var(--y-contrast)) h 0 l/1); - --ig-error-900: rgb(44, 9, 6); - --ig-error-900-contrast: hsla(from color(from var(--ig-error-900) var(--y-contrast)) h 0 l/1); - --ig-error-seed: red; - --ig-error-seed-contrast: hsla(from color(from var(--ig-error-seed) var(--y-contrast)) h 0 l/1); - --ig-error-A100: rgb(255, 207, 198); - --ig-error-A100-contrast: hsla(from color(from var(--ig-error-A100) var(--y-contrast)) h 0 l/1); - --ig-error-A200: rgb(255, 119, 101); - --ig-error-A200-contrast: hsla(from color(from var(--ig-error-A200) var(--y-contrast)) h 0 l/1); - --ig-error-A400: rgb(242, 34, 24); - --ig-error-A400-contrast: hsla(from color(from var(--ig-error-A400) var(--y-contrast)) h 0 l/1); - --ig-error-A700: rgb(197, 2, 1); - --ig-error-A700-contrast: hsla(from color(from var(--ig-error-A700) var(--y-contrast)) h 0 l/1); -} - -/* END_OUTPUT */ -/* CONTAINED */ -:root { - --ig-primary-50: rgb(226, 237, 251); - --ig-primary-100: rgb(172, 207, 251); - --ig-primary-200: rgb(117, 180, 250); - --ig-primary-300: rgb(67, 155, 239); - --ig-primary-400: rgb(27, 131, 214); - --ig-primary-500: rgb(9, 109, 183); - --ig-primary-600: rgb(6, 89, 150); - --ig-primary-700: rgb(11, 69, 116); - --ig-primary-800: rgb(12, 48, 80); - --ig-primary-900: rgb(6, 22, 37); - --ig-primary-seed: #09f; - --ig-primary-A100: rgb(191, 221, 255); - --ig-primary-A200: rgb(73, 164, 255); - --ig-primary-A400: rgb(4, 127, 213); - --ig-primary-A700: rgb(0, 100, 169); - --ig-secondary-50: rgb(240, 235, 245); - --ig-secondary-100: rgb(213, 198, 231); - --ig-secondary-200: rgb(190, 166, 221); - --ig-secondary-300: rgb(168, 136, 211); - --ig-secondary-400: rgb(146, 110, 198); - --ig-secondary-500: rgb(125, 87, 177); - --ig-secondary-600: rgb(103, 69, 150); - --ig-secondary-700: rgb(80, 53, 117); - --ig-secondary-800: rgb(56, 38, 81); - --ig-secondary-900: rgb(25, 17, 38); - --ig-secondary-seed: #97c; - --ig-secondary-A100: rgb(233, 209, 255); - --ig-secondary-A200: rgb(192, 134, 255); - --ig-secondary-A400: rgb(163, 75, 255); - --ig-secondary-A700: rgb(139, 23, 233); - --ig-gray-50: rgb(251, 251, 251); - --ig-gray-100: rgb(247, 247, 247); - --ig-gray-200: rgb(236, 236, 236); - --ig-gray-300: rgb(217, 217, 217); - --ig-gray-400: rgb(193, 193, 193); - --ig-gray-500: rgb(164, 164, 164); - --ig-gray-600: rgb(132, 132, 132); - --ig-gray-700: rgb(99, 99, 99); - --ig-gray-800: rgb(66, 66, 66); - --ig-gray-900: rgb(33, 33, 33); - --ig-gray-seed: #000; - --ig-surface-50: rgb(255, 255, 255); - --ig-surface-100: rgb(255, 255, 255); - --ig-surface-200: rgb(255, 255, 255); - --ig-surface-300: rgb(255, 255, 255); - --ig-surface-400: rgb(255, 255, 255); - --ig-surface-500: rgb(255, 255, 255); - --ig-surface-600: rgb(229, 229, 229); - --ig-surface-700: rgb(206, 206, 206); - --ig-surface-800: rgb(185, 185, 185); - --ig-surface-900: rgb(165, 165, 165); - --ig-surface-seed: #fff; - --ig-surface-A100: rgb(218, 218, 218); - --ig-surface-A200: rgb(161, 161, 161); - --ig-surface-A400: rgb(124, 124, 124); - --ig-surface-A700: rgb(97, 97, 97); - --ig-info-50: rgb(232, 235, 252); - --ig-info-100: rgb(190, 203, 253); - --ig-info-200: rgb(149, 173, 255); - --ig-info-300: rgb(109, 145, 255); - --ig-info-400: rgb(70, 117, 255); - --ig-info-500: rgb(34, 91, 245); - --ig-info-600: rgb(15, 67, 220); - --ig-info-700: rgb(7, 50, 180); - --ig-info-800: rgb(6, 36, 125); - --ig-info-900: rgb(4, 18, 59); - --ig-info-seed: blue; - --ig-info-A100: rgb(207, 217, 255); - --ig-info-A200: rgb(124, 156, 255); - --ig-info-A400: rgb(63, 113, 255); - --ig-info-A700: rgb(16, 75, 249); - --ig-success-50: rgb(193, 251, 187); - --ig-success-100: rgb(93, 231, 86); - --ig-success-200: rgb(47, 203, 42); - --ig-success-300: rgb(17, 175, 14); - --ig-success-400: rgb(1, 148, 1); - --ig-success-500: rgb(1, 124, 0); - --ig-success-600: rgb(5, 101, 4); - --ig-success-700: rgb(11, 78, 9); - --ig-success-800: rgb(13, 55, 11); - --ig-success-900: rgb(7, 25, 6); - --ig-success-seed: green; - --ig-success-A100: rgb(56, 251, 50); - --ig-success-A200: rgb(0, 187, 0); - --ig-success-A400: rgb(0, 144, 0); - --ig-success-A700: rgb(0, 114, 0); - --ig-warn-50: rgb(251, 233, 213); - --ig-warn-100: rgb(247, 195, 133); - --ig-warn-200: rgb(233, 161, 65); - --ig-warn-300: rgb(207, 135, 24); - --ig-warn-400: rgb(177, 114, 4); - --ig-warn-500: rgb(149, 94, 1); - --ig-warn-600: rgb(121, 77, 4); - --ig-warn-700: rgb(94, 60, 9); - --ig-warn-800: rgb(65, 42, 11); - --ig-warn-900: rgb(30, 19, 6); - --ig-warn-seed: orange; - --ig-warn-A100: rgb(255, 211, 156); - --ig-warn-A200: rgb(222, 143, 4); - --ig-warn-A400: rgb(172, 110, 0); - --ig-warn-A700: rgb(136, 86, 0); - --ig-error-50: rgb(254, 231, 227); - --ig-error-100: rgb(255, 188, 177); - --ig-error-200: rgb(255, 146, 130); - --ig-error-300: rgb(255, 99, 82); - --ig-error-400: rgb(237, 58, 45); - --ig-error-500: rgb(209, 28, 19); - --ig-error-600: rgb(174, 16, 9); - --ig-error-700: rgb(135, 17, 11); - --ig-error-800: rgb(93, 18, 12); - --ig-error-900: rgb(44, 9, 6); - --ig-error-seed: red; - --ig-error-A100: rgb(255, 207, 198); - --ig-error-A200: rgb(255, 119, 101); - --ig-error-A400: rgb(242, 34, 24); - --ig-error-A700: rgb(197, 2, 1); -} - -/* END_CONTAINED */ -/* END_ASSERT */ -/* */ -/* Test: verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] map */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] map */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] map */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] map */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] map */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] map */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] map */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] map */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* */ -/* Test: should generate CSS variables for handmande palettes */ -/* ASSERT: */ -/* OUTPUT */ -:root { - --ig-wcag-a: 0.31; - --ig-wcag-aa: 0.185; - --ig-wcag-aaa: 0.178; - --ig-contrast-level: var(--ig-wcag-aa); - --y: clamp(0, (y / var(--ig-contrast-level) - 1) * -infinity, 1); - --y-contrast: xyz-d65 var(--y) var(--y) var(--y); -} - -:root { - --ig-primary-50: #e6eff8; - --ig-primary-50-contrast: black; - --ig-primary-100: #bfd7f2; - --ig-primary-100-contrast: black; - --ig-primary-200: #98bfec; - --ig-primary-200-contrast: black; - --ig-primary-300: #85b5e9; - --ig-primary-300-contrast: white; - --ig-primary-400: #73a6e4; - --ig-primary-400-contrast: white; - --ig-primary-500: #6797de; - --ig-primary-500-contrast: white; - --ig-primary-600: #3681dd; - --ig-primary-600-contrast: white; - --ig-primary-700: #357fda; - --ig-primary-700-contrast: white; - --ig-primary-800: #306dc8; - --ig-primary-800-contrast: white; - --ig-primary-900: #284ea8; - --ig-primary-900-contrast: white; - --ig-primary-A100: #98bfec; - --ig-primary-A100-contrast: white; - --ig-primary-A200: #73a6e4; - --ig-primary-A200-contrast: white; - --ig-primary-A400: #3681dd; - --ig-primary-A400-contrast: white; - --ig-primary-A700: #284ea8; - --ig-primary-A700-contrast: white; - --ig-primary-seed: #6797de; - --ig-primary-seed-contrast: white; - --ig-secondary-50: #fef7e2; - --ig-secondary-50-contrast: black; - --ig-secondary-100: #fdeab7; - --ig-secondary-100-contrast: black; - --ig-secondary-200: #fbdd89; - --ig-secondary-200-contrast: black; - --ig-secondary-300: #fad15c; - --ig-secondary-300-contrast: black; - --ig-secondary-400: #f9c63f; - --ig-secondary-400-contrast: black; - --ig-secondary-500: #f7bd32; - --ig-secondary-500-contrast: white; - --ig-secondary-600: #f6b02d; - --ig-secondary-600-contrast: white; - --ig-secondary-700: #f49e2a; - --ig-secondary-700-contrast: white; - --ig-secondary-800: #f38e28; - --ig-secondary-800-contrast: white; - --ig-secondary-900: #f38e28; - --ig-secondary-900-contrast: white; - --ig-secondary-A100: #fbdd89; - --ig-secondary-A100-contrast: black; - --ig-secondary-A200: #f9c63f; - --ig-secondary-A200-contrast: black; - --ig-secondary-A400: #f6b02d; - --ig-secondary-A400-contrast: white; - --ig-secondary-A700: #f38e28; - --ig-secondary-A700-contrast: white; - --ig-secondary-seed: #f7bd32; - --ig-secondary-seed-contrast: white; - --ig-tertiary-500: #f7bd32; - --ig-tertiary-500-contrast: white; - --ig-gray-50: #fff; - --ig-gray-50-contrast: black; - --ig-gray-100: #fafafa; - --ig-gray-100-contrast: black; - --ig-gray-200: #f5f5f5; - --ig-gray-200-contrast: black; - --ig-gray-300: #f0f0f0; - --ig-gray-300-contrast: black; - --ig-gray-400: #dedede; - --ig-gray-400-contrast: black; - --ig-gray-500: #b3b2b2; - --ig-gray-500-contrast: black; - --ig-gray-600: #979696; - --ig-gray-600-contrast: white; - --ig-gray-700: #7b7a7a; - --ig-gray-700-contrast: white; - --ig-gray-800: #404040; - --ig-gray-800-contrast: white; - --ig-gray-900: #1a1a1a; - --ig-gray-900-contrast: white; - --ig-gray-seed: #b3b2b2; - --ig-gray-seed-contrast: black; - --ig-info-50: #fef7e2; - --ig-info-50-contrast: black; - --ig-info-100: #fdeab7; - --ig-info-100-contrast: black; - --ig-info-200: #fbdd89; - --ig-info-200-contrast: black; - --ig-info-300: #fad15c; - --ig-info-300-contrast: black; - --ig-info-400: #f9c63f; - --ig-info-400-contrast: black; - --ig-info-500: #f7bd32; - --ig-info-500-contrast: white; - --ig-info-600: #f6b02d; - --ig-info-600-contrast: white; - --ig-info-700: #f49e2a; - --ig-info-700-contrast: white; - --ig-info-800: #f38e28; - --ig-info-800-contrast: white; - --ig-info-900: #f38e28; - --ig-info-900-contrast: white; - --ig-info-A100: #fbdd89; - --ig-info-A100-contrast: black; - --ig-info-A200: #f9c63f; - --ig-info-A200-contrast: black; - --ig-info-A400: #f6b02d; - --ig-info-A400-contrast: white; - --ig-info-A700: #f38e28; - --ig-info-A700-contrast: white; - --ig-info-seed: #f7bd32; - --ig-info-seed-contrast: white; - --ig-success-50: #fef7e2; - --ig-success-50-contrast: black; - --ig-success-100: #fdeab7; - --ig-success-100-contrast: black; - --ig-success-200: #fbdd89; - --ig-success-200-contrast: black; - --ig-success-300: #fad15c; - --ig-success-300-contrast: black; - --ig-success-400: #f9c63f; - --ig-success-400-contrast: black; - --ig-success-500: #f7bd32; - --ig-success-500-contrast: white; - --ig-success-600: #f6b02d; - --ig-success-600-contrast: white; - --ig-success-700: #f49e2a; - --ig-success-700-contrast: white; - --ig-success-800: #f38e28; - --ig-success-800-contrast: white; - --ig-success-900: #f38e28; - --ig-success-900-contrast: white; - --ig-success-A100: #fbdd89; - --ig-success-A100-contrast: black; - --ig-success-A200: #f9c63f; - --ig-success-A200-contrast: black; - --ig-success-A400: #f6b02d; - --ig-success-A400-contrast: white; - --ig-success-A700: #f38e28; - --ig-success-A700-contrast: white; - --ig-success-seed: #f7bd32; - --ig-success-seed-contrast: white; - --ig-warn-50: #fef7e2; - --ig-warn-50-contrast: black; - --ig-warn-100: #fdeab7; - --ig-warn-100-contrast: black; - --ig-warn-200: #fbdd89; - --ig-warn-200-contrast: black; - --ig-warn-300: #fad15c; - --ig-warn-300-contrast: black; - --ig-warn-400: #f9c63f; - --ig-warn-400-contrast: black; - --ig-warn-500: #f7bd32; - --ig-warn-500-contrast: white; - --ig-warn-600: #f6b02d; - --ig-warn-600-contrast: white; - --ig-warn-700: #f49e2a; - --ig-warn-700-contrast: white; - --ig-warn-800: #f38e28; - --ig-warn-800-contrast: white; - --ig-warn-900: #f38e28; - --ig-warn-900-contrast: white; - --ig-warn-A100: #fbdd89; - --ig-warn-A100-contrast: black; - --ig-warn-A200: #f9c63f; - --ig-warn-A200-contrast: black; - --ig-warn-A400: #f6b02d; - --ig-warn-A400-contrast: white; - --ig-warn-A700: #f38e28; - --ig-warn-A700-contrast: white; - --ig-warn-seed: #f7bd32; - --ig-warn-seed-contrast: white; - --ig-error-50: #fef7e2; - --ig-error-50-contrast: black; - --ig-error-100: #fdeab7; - --ig-error-100-contrast: black; - --ig-error-200: #fbdd89; - --ig-error-200-contrast: black; - --ig-error-300: #fad15c; - --ig-error-300-contrast: black; - --ig-error-400: #f9c63f; - --ig-error-400-contrast: black; - --ig-error-500: #f7bd32; - --ig-error-500-contrast: white; - --ig-error-600: #f6b02d; - --ig-error-600-contrast: white; - --ig-error-700: #f49e2a; - --ig-error-700-contrast: white; - --ig-error-800: #f38e28; - --ig-error-800-contrast: white; - --ig-error-900: #f38e28; - --ig-error-900-contrast: white; - --ig-error-A100: #fbdd89; - --ig-error-A100-contrast: black; - --ig-error-A200: #f9c63f; - --ig-error-A200-contrast: black; - --ig-error-A400: #f6b02d; - --ig-error-A400-contrast: white; - --ig-error-A700: #f38e28; - --ig-error-A700-contrast: white; - --ig-error-seed: #f7bd32; - --ig-error-seed-contrast: white; - --ig-surface-50: #fef7e2; - --ig-surface-50-contrast: black; - --ig-surface-100: #fdeab7; - --ig-surface-100-contrast: black; - --ig-surface-200: #fbdd89; - --ig-surface-200-contrast: black; - --ig-surface-300: #fad15c; - --ig-surface-300-contrast: black; - --ig-surface-400: #f9c63f; - --ig-surface-400-contrast: black; - --ig-surface-500: #f7bd32; - --ig-surface-500-contrast: white; - --ig-surface-600: #f6b02d; - --ig-surface-600-contrast: white; - --ig-surface-700: #f49e2a; - --ig-surface-700-contrast: white; - --ig-surface-800: #f38e28; - --ig-surface-800-contrast: white; - --ig-surface-900: #f38e28; - --ig-surface-900-contrast: white; - --ig-surface-A100: #fbdd89; - --ig-surface-A100-contrast: black; - --ig-surface-A200: #f9c63f; - --ig-surface-A200-contrast: black; - --ig-surface-A400: #f6b02d; - --ig-surface-A400-contrast: white; - --ig-surface-A700: #f38e28; - --ig-surface-A700-contrast: white; - --ig-surface-seed: #f7bd32; - --ig-surface-seed-contrast: white; -} - -/* END_OUTPUT */ -/* CONTAINED */ -:root { - --ig-primary-50: #e6eff8; - --ig-primary-100: #bfd7f2; - --ig-primary-200: #98bfec; - --ig-primary-300: #85b5e9; - --ig-primary-400: #73a6e4; - --ig-primary-500: #6797de; - --ig-primary-600: #3681dd; - --ig-primary-700: #357fda; - --ig-primary-800: #306dc8; - --ig-primary-900: #284ea8; - --ig-primary-seed: #6797de; - --ig-primary-A100: #98bfec; - --ig-primary-A200: #73a6e4; - --ig-primary-A400: #3681dd; - --ig-primary-A700: #284ea8; - --ig-secondary-50: #fef7e2; - --ig-secondary-100: #fdeab7; - --ig-secondary-200: #fbdd89; - --ig-secondary-300: #fad15c; - --ig-secondary-400: #f9c63f; - --ig-secondary-500: #f7bd32; - --ig-secondary-600: #f6b02d; - --ig-secondary-700: #f49e2a; - --ig-secondary-800: #f38e28; - --ig-secondary-900: #f38e28; - --ig-secondary-seed: #f7bd32; - --ig-secondary-A100: #fbdd89; - --ig-secondary-A200: #f9c63f; - --ig-secondary-A400: #f6b02d; - --ig-secondary-A700: #f38e28; - --ig-gray-50: #fff; - --ig-gray-100: #fafafa; - --ig-gray-200: #f5f5f5; - --ig-gray-300: #f0f0f0; - --ig-gray-400: #dedede; - --ig-gray-500: #b3b2b2; - --ig-gray-600: #979696; - --ig-gray-700: #7b7a7a; - --ig-gray-800: #404040; - --ig-gray-900: #1a1a1a; - --ig-gray-seed: #b3b2b2; - --ig-surface-50: #fef7e2; - --ig-surface-100: #fdeab7; - --ig-surface-200: #fbdd89; - --ig-surface-300: #fad15c; - --ig-surface-400: #f9c63f; - --ig-surface-500: #f7bd32; - --ig-surface-600: #f6b02d; - --ig-surface-700: #f49e2a; - --ig-surface-800: #f38e28; - --ig-surface-900: #f38e28; - --ig-surface-seed: #f7bd32; - --ig-surface-A100: #fbdd89; - --ig-surface-A200: #f9c63f; - --ig-surface-A400: #f6b02d; - --ig-surface-A700: #f38e28; - --ig-info-50: #fef7e2; - --ig-info-100: #fdeab7; - --ig-info-200: #fbdd89; - --ig-info-300: #fad15c; - --ig-info-400: #f9c63f; - --ig-info-500: #f7bd32; - --ig-info-600: #f6b02d; - --ig-info-700: #f49e2a; - --ig-info-800: #f38e28; - --ig-info-900: #f38e28; - --ig-info-seed: #f7bd32; - --ig-info-A100: #fbdd89; - --ig-info-A200: #f9c63f; - --ig-info-A400: #f6b02d; - --ig-info-A700: #f38e28; - --ig-success-50: #fef7e2; - --ig-success-100: #fdeab7; - --ig-success-200: #fbdd89; - --ig-success-300: #fad15c; - --ig-success-400: #f9c63f; - --ig-success-500: #f7bd32; - --ig-success-600: #f6b02d; - --ig-success-700: #f49e2a; - --ig-success-800: #f38e28; - --ig-success-900: #f38e28; - --ig-success-seed: #f7bd32; - --ig-success-A100: #fbdd89; - --ig-success-A200: #f9c63f; - --ig-success-A400: #f6b02d; - --ig-success-A700: #f38e28; - --ig-warn-50: #fef7e2; - --ig-warn-100: #fdeab7; - --ig-warn-200: #fbdd89; - --ig-warn-300: #fad15c; - --ig-warn-400: #f9c63f; - --ig-warn-500: #f7bd32; - --ig-warn-600: #f6b02d; - --ig-warn-700: #f49e2a; - --ig-warn-800: #f38e28; - --ig-warn-900: #f38e28; - --ig-warn-seed: #f7bd32; - --ig-warn-A100: #fbdd89; - --ig-warn-A200: #f9c63f; - --ig-warn-A400: #f6b02d; - --ig-warn-A700: #f38e28; - --ig-error-50: #fef7e2; - --ig-error-100: #fdeab7; - --ig-error-200: #fbdd89; - --ig-error-300: #fad15c; - --ig-error-400: #f9c63f; - --ig-error-500: #f7bd32; - --ig-error-600: #f6b02d; - --ig-error-700: #f49e2a; - --ig-error-800: #f38e28; - --ig-error-900: #f38e28; - --ig-error-seed: #f7bd32; - --ig-error-A100: #fbdd89; - --ig-error-A200: #f9c63f; - --ig-error-A400: #f6b02d; - --ig-error-A700: #f38e28; -} - -/* END_CONTAINED */ -/* END_ASSERT */ -/* */ -/* Test: should properly get the value from handmade palettes */ -/* ✔ [assert-equal] should properly get the value from handmade palettes */ -/* ASSERT: */ -/* OUTPUT */ -.test-output { - color: rgb(250, 250, 250); -} - -/* END_OUTPUT */ -/* CONTAINED */ -.test-output { - color: rgb(250, 250, 250); -} - -/* END_CONTAINED */ -/* END_ASSERT */ -/* */ -/* # Module: Color :: palette :: gamut-relative generator */ -/* ------------------------------------------------------ */ -/* Test: keeps any two shades 500 apart at WCAG AA or better */ -/* ✔ [assert-true] keeps any two shades 500 apart at WCAG AA or better */ -/* ✔ [assert-true] keeps any two shades 500 apart at WCAG AA or better */ -/* ✔ [assert-true] keeps any two shades 500 apart at WCAG AA or better */ -/* ✔ [assert-true] keeps any two shades 500 apart at WCAG AA or better */ -/* ✔ [assert-true] keeps any two shades 500 apart at WCAG AA or better */ -/* ✔ [assert-true] keeps any two shades 500 apart at WCAG AA or better */ -/* ✔ [assert-true] keeps any two shades 500 apart at WCAG AA or better */ -/* ✔ [assert-true] keeps any two shades 500 apart at WCAG AA or better */ -/* ✔ [assert-true] keeps any two shades 500 apart at WCAG AA or better */ -/* ✔ [assert-true] keeps any two shades 500 apart at WCAG AA or better */ -/* ✔ [assert-true] keeps any two shades 500 apart at WCAG AA or better */ -/* ✔ [assert-true] keeps any two shades 500 apart at WCAG AA or better */ -/* ✔ [assert-true] keeps any two shades 500 apart at WCAG AA or better */ -/* ✔ [assert-true] keeps any two shades 500 apart at WCAG AA or better */ -/* ✔ [assert-true] keeps any two shades 500 apart at WCAG AA or better */ -/* ✔ [assert-true] keeps any two shades 500 apart at WCAG AA or better */ -/* ✔ [assert-true] keeps any two shades 500 apart at WCAG AA or better */ -/* ✔ [assert-true] keeps any two shades 500 apart at WCAG AA or better */ -/* ✔ [assert-true] keeps any two shades 500 apart at WCAG AA or better */ -/* ✔ [assert-true] keeps any two shades 500 apart at WCAG AA or better */ -/* ✔ [assert-true] keeps any two shades 500 apart at WCAG AA or better */ -/* ✔ [assert-true] keeps any two shades 500 apart at WCAG AA or better */ -/* ✔ [assert-true] keeps any two shades 500 apart at WCAG AA or better */ -/* ✔ [assert-true] keeps any two shades 500 apart at WCAG AA or better */ -/* ✔ [assert-true] keeps any two shades 500 apart at WCAG AA or better */ -/* ✔ [assert-true] keeps any two shades 500 apart at WCAG AA or better */ -/* ✔ [assert-true] keeps any two shades 500 apart at WCAG AA or better */ -/* ✔ [assert-true] keeps any two shades 500 apart at WCAG AA or better */ -/* ✔ [assert-true] keeps any two shades 500 apart at WCAG AA or better */ -/* ✔ [assert-true] keeps any two shades 500 apart at WCAG AA or better */ -/* ✔ [assert-true] keeps any two shades 500 apart at WCAG AA or better */ -/* ✔ [assert-true] keeps any two shades 500 apart at WCAG AA or better */ -/* ✔ [assert-true] keeps any two shades 500 apart at WCAG AA or better */ -/* ✔ [assert-true] keeps any two shades 500 apart at WCAG AA or better */ -/* ✔ [assert-true] keeps any two shades 500 apart at WCAG AA or better */ -/* ✔ [assert-true] keeps any two shades 500 apart at WCAG AA or better */ -/* ✔ [assert-true] keeps any two shades 500 apart at WCAG AA or better */ -/* ✔ [assert-true] keeps any two shades 500 apart at WCAG AA or better */ -/* ✔ [assert-true] keeps any two shades 500 apart at WCAG AA or better */ -/* ✔ [assert-true] keeps any two shades 500 apart at WCAG AA or better */ -/* */ -/* Test: keeps every shade visibly distinct, whatever the seed */ -/* ✔ [assert-true] keeps every shade visibly distinct, whatever the seed */ -/* ✔ [assert-true] keeps every shade visibly distinct, whatever the seed */ -/* ✔ [assert-true] keeps every shade visibly distinct, whatever the seed */ -/* ✔ [assert-true] keeps every shade visibly distinct, whatever the seed */ -/* ✔ [assert-true] keeps every shade visibly distinct, whatever the seed */ -/* ✔ [assert-true] keeps every shade visibly distinct, whatever the seed */ -/* ✔ [assert-true] keeps every shade visibly distinct, whatever the seed */ -/* ✔ [assert-true] keeps every shade visibly distinct, whatever the seed */ -/* ✔ [assert-true] keeps every shade visibly distinct, whatever the seed */ -/* ✔ [assert-true] keeps every shade visibly distinct, whatever the seed */ -/* ✔ [assert-true] keeps every shade visibly distinct, whatever the seed */ -/* ✔ [assert-true] keeps every shade visibly distinct, whatever the seed */ -/* ✔ [assert-true] keeps every shade visibly distinct, whatever the seed */ -/* ✔ [assert-true] keeps every shade visibly distinct, whatever the seed */ -/* ✔ [assert-true] keeps every shade visibly distinct, whatever the seed */ -/* ✔ [assert-true] keeps every shade visibly distinct, whatever the seed */ -/* ✔ [assert-true] keeps every shade visibly distinct, whatever the seed */ -/* ✔ [assert-true] keeps every shade visibly distinct, whatever the seed */ -/* ✔ [assert-true] keeps every shade visibly distinct, whatever the seed */ -/* ✔ [assert-true] keeps every shade visibly distinct, whatever the seed */ -/* ✔ [assert-true] keeps every shade visibly distinct, whatever the seed */ -/* ✔ [assert-true] keeps every shade visibly distinct, whatever the seed */ -/* ✔ [assert-true] keeps every shade visibly distinct, whatever the seed */ -/* ✔ [assert-true] keeps every shade visibly distinct, whatever the seed */ -/* ✔ [assert-true] keeps every shade visibly distinct, whatever the seed */ -/* ✔ [assert-true] keeps every shade visibly distinct, whatever the seed */ -/* ✔ [assert-true] keeps every shade visibly distinct, whatever the seed */ -/* ✔ [assert-true] keeps every shade visibly distinct, whatever the seed */ -/* ✔ [assert-true] keeps every shade visibly distinct, whatever the seed */ -/* ✔ [assert-true] keeps every shade visibly distinct, whatever the seed */ -/* ✔ [assert-true] keeps every shade visibly distinct, whatever the seed */ -/* ✔ [assert-true] keeps every shade visibly distinct, whatever the seed */ -/* ✔ [assert-true] keeps every shade visibly distinct, whatever the seed */ -/* ✔ [assert-true] keeps every shade visibly distinct, whatever the seed */ -/* ✔ [assert-true] keeps every shade visibly distinct, whatever the seed */ -/* ✔ [assert-true] keeps every shade visibly distinct, whatever the seed */ -/* ✔ [assert-true] keeps every shade visibly distinct, whatever the seed */ -/* ✔ [assert-true] keeps every shade visibly distinct, whatever the seed */ -/* ✔ [assert-true] keeps every shade visibly distinct, whatever the seed */ -/* ✔ [assert-true] keeps every shade visibly distinct, whatever the seed */ -/* ✔ [assert-true] keeps every shade visibly distinct, whatever the seed */ -/* ✔ [assert-true] keeps every shade visibly distinct, whatever the seed */ -/* ✔ [assert-true] keeps every shade visibly distinct, whatever the seed */ -/* ✔ [assert-true] keeps every shade visibly distinct, whatever the seed */ -/* ✔ [assert-true] keeps every shade visibly distinct, whatever the seed */ -/* ✔ [assert-true] keeps every shade visibly distinct, whatever the seed */ -/* ✔ [assert-true] keeps every shade visibly distinct, whatever the seed */ -/* ✔ [assert-true] keeps every shade visibly distinct, whatever the seed */ -/* ✔ [assert-true] keeps every shade visibly distinct, whatever the seed */ -/* ✔ [assert-true] keeps every shade visibly distinct, whatever the seed */ -/* */ -/* Test: generates a neutral ramp for a seed with no usable hue */ -/* ✔ [assert-equal] generates a neutral ramp for a seed with no usable hue */ -/* ✔ [assert-equal] generates a neutral ramp for a seed with no usable hue */ -/* ✔ [assert-equal] generates a neutral ramp for a seed with no usable hue */ -/* ✔ [assert-equal] generates a neutral ramp for a seed with no usable hue */ -/* ✔ [assert-equal] generates a neutral ramp for a seed with no usable hue */ -/* ✔ [assert-equal] generates a neutral ramp for a seed with no usable hue */ -/* ✔ [assert-equal] generates a neutral ramp for a seed with no usable hue */ -/* ✔ [assert-equal] generates a neutral ramp for a seed with no usable hue */ -/* ✔ [assert-equal] generates a neutral ramp for a seed with no usable hue */ -/* ✔ [assert-equal] generates a neutral ramp for a seed with no usable hue */ -/* */ -/* Test: leaves the surface family anchored on its seed */ -/* ✔ [assert-equal] leaves the surface family anchored on its seed */ -/* */ -/* Test: emits concrete colors, not runtime expressions */ -/* ✔ [assert-equal] emits concrete colors, not runtime expressions */ -/* ✔ [assert-equal] emits concrete colors, not runtime expressions */ -/* ✔ [assert-equal] emits concrete colors, not runtime expressions */ -/* ✔ [assert-equal] emits concrete colors, not runtime expressions */ -/* ✔ [assert-equal] emits concrete colors, not runtime expressions */ -/* ✔ [assert-equal] emits concrete colors, not runtime expressions */ -/* ✔ [assert-equal] emits concrete colors, not runtime expressions */ -/* ✔ [assert-equal] emits concrete colors, not runtime expressions */ -/* ✔ [assert-equal] emits concrete colors, not runtime expressions */ -/* ✔ [assert-equal] emits concrete colors, not runtime expressions */ -/* */ -/* Test: keeps the surface seed exactly on shade 500 */ -/* ✔ [assert-equal] keeps the surface seed exactly on shade 500 */ -/* ✔ [assert-equal] keeps the surface seed exactly on shade 500 */ -/* ✔ [assert-equal] keeps the surface seed exactly on shade 500 */ -/* ✔ [assert-equal] keeps the surface seed exactly on shade 500 */ -/* */ -/* Test: gives a surface with headroom distinct layering shades */ -/* ✔ [assert-true] gives a surface with headroom distinct layering shades */ -/* ✔ [assert-true] gives a surface with headroom distinct layering shades */ -/* ✔ [assert-true] gives a surface with headroom distinct layering shades */ -/* ✔ [assert-true] gives a surface with headroom distinct layering shades */ -/* */ -/* Test: follows the grayscale rhythm the component schemas expect */ -/* ✔ [assert-true] follows the grayscale rhythm the component schemas expect */ -/* ✔ [assert-true] follows the grayscale rhythm the component schemas expect */ -/* ✔ [assert-true] follows the grayscale rhythm the component schemas expect */ -/* ✔ [assert-true] follows the grayscale rhythm the component schemas expect */ -/* */ -/* Test: flips the grayscale for a dark surface but not the color ramps */ -/* ✔ [assert-true] flips the grayscale for a dark surface but not the color ramps */ -/* ✔ [assert-true] flips the grayscale for a dark surface but not the color ramps */ -/* ✔ [assert-equal] flips the grayscale for a dark surface but not the color ramps */ -/* ✔ [assert-equal] flips the grayscale for a dark surface but not the color ramps */ -/* ✔ [assert-equal] flips the grayscale for a dark surface but not the color ramps */ -/* ✔ [assert-equal] flips the grayscale for a dark surface but not the color ramps */ -/* ✔ [assert-equal] flips the grayscale for a dark surface but not the color ramps */ -/* ✔ [assert-equal] flips the grayscale for a dark surface but not the color ramps */ -/* ✔ [assert-equal] flips the grayscale for a dark surface but not the color ramps */ -/* ✔ [assert-equal] flips the grayscale for a dark surface but not the color ramps */ -/* ✔ [assert-equal] flips the grayscale for a dark surface but not the color ramps */ -/* ✔ [assert-equal] flips the grayscale for a dark surface but not the color ramps */ -/* */ -/* Test: reports which shade the seed lands nearest */ -/* ✔ [assert-equal] reports which shade the seed lands nearest */ -/* ✔ [assert-equal] reports which shade the seed lands nearest */ -/* */ -/* Test: falls back to the original multipliers on request */ -/* ✔ [assert-equal] falls back to the original multipliers on request */ -/* ✔ [assert-equal] falls back to the original multipliers on request */ -/* */ -/* */ -/* Test: should convert a color to a list of HSL values */ -/* ✔ [assert-equal] should convert a color to a list of HSL values */ -/* */ -/* Test: should include all necessarry CSS custom properties for adaptive contrast to work */ -/* ASSERT: */ -/* OUTPUT */ -:root { - --ig-wcag-a: 0.31; - --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-d65 var(--y) var(--y) var(--y); -} - -/* END_OUTPUT */ -/* CONTAINED */ -:root { - --ig-wcag-a: 0.31; - --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-d65 var(--y) var(--y) var(--y); -} - -/* END_CONTAINED */ -/* END_ASSERT */ -/* */ -/* # Module: Color :: palette :: seed color variables */ -/* -------------------------------------------------- */ -/* Test: emits --ig-{name}-seed CSS variables; uses provided gray or derives from surface */ -/* ASSERT: */ -/* OUTPUT */ -:root { - --ig-wcag-a: 0.31; - --ig-wcag-aa: 0.185; - --ig-wcag-aaa: 0.178; - --ig-contrast-level: var(--ig-wcag-aa); - --y: clamp(0, (y / var(--ig-contrast-level) - 1) * -infinity, 1); - --y-contrast: xyz-d65 var(--y) var(--y) var(--y); -} - -:root { - --ig-primary-50: rgb(226, 237, 251); - --ig-primary-50-contrast: hsla(from color(from var(--ig-primary-50) var(--y-contrast)) h 0 l/1); - --ig-primary-100: rgb(172, 207, 251); - --ig-primary-100-contrast: hsla(from color(from var(--ig-primary-100) var(--y-contrast)) h 0 l/1); - --ig-primary-200: rgb(117, 180, 250); - --ig-primary-200-contrast: hsla(from color(from var(--ig-primary-200) var(--y-contrast)) h 0 l/1); - --ig-primary-300: rgb(67, 155, 239); - --ig-primary-300-contrast: hsla(from color(from var(--ig-primary-300) var(--y-contrast)) h 0 l/1); - --ig-primary-400: rgb(27, 131, 214); - --ig-primary-400-contrast: hsla(from color(from var(--ig-primary-400) var(--y-contrast)) h 0 l/1); - --ig-primary-500: rgb(9, 109, 183); - --ig-primary-500-contrast: hsla(from color(from var(--ig-primary-500) var(--y-contrast)) h 0 l/1); - --ig-primary-600: rgb(6, 89, 150); - --ig-primary-600-contrast: hsla(from color(from var(--ig-primary-600) var(--y-contrast)) h 0 l/1); - --ig-primary-700: rgb(11, 69, 116); - --ig-primary-700-contrast: hsla(from color(from var(--ig-primary-700) var(--y-contrast)) h 0 l/1); - --ig-primary-800: rgb(12, 48, 80); - --ig-primary-800-contrast: hsla(from color(from var(--ig-primary-800) var(--y-contrast)) h 0 l/1); - --ig-primary-900: rgb(6, 22, 37); - --ig-primary-900-contrast: hsla(from color(from var(--ig-primary-900) var(--y-contrast)) h 0 l/1); - --ig-primary-seed: #09f; - --ig-primary-seed-contrast: hsla(from color(from var(--ig-primary-seed) var(--y-contrast)) h 0 l/1); - --ig-primary-A100: rgb(191, 221, 255); - --ig-primary-A100-contrast: hsla(from color(from var(--ig-primary-A100) var(--y-contrast)) h 0 l/1); - --ig-primary-A200: rgb(73, 164, 255); - --ig-primary-A200-contrast: hsla(from color(from var(--ig-primary-A200) var(--y-contrast)) h 0 l/1); - --ig-primary-A400: rgb(4, 127, 213); - --ig-primary-A400-contrast: hsla(from color(from var(--ig-primary-A400) var(--y-contrast)) h 0 l/1); - --ig-primary-A700: rgb(0, 100, 169); - --ig-primary-A700-contrast: hsla(from color(from var(--ig-primary-A700) var(--y-contrast)) h 0 l/1); - --ig-secondary-50: rgb(240, 235, 245); - --ig-secondary-50-contrast: hsla(from color(from var(--ig-secondary-50) var(--y-contrast)) h 0 l/1); - --ig-secondary-100: rgb(213, 198, 231); - --ig-secondary-100-contrast: hsla(from color(from var(--ig-secondary-100) var(--y-contrast)) h 0 l/1); - --ig-secondary-200: rgb(190, 166, 221); - --ig-secondary-200-contrast: hsla(from color(from var(--ig-secondary-200) var(--y-contrast)) h 0 l/1); - --ig-secondary-300: rgb(168, 136, 211); - --ig-secondary-300-contrast: hsla(from color(from var(--ig-secondary-300) var(--y-contrast)) h 0 l/1); - --ig-secondary-400: rgb(146, 110, 198); - --ig-secondary-400-contrast: hsla(from color(from var(--ig-secondary-400) var(--y-contrast)) h 0 l/1); - --ig-secondary-500: rgb(125, 87, 177); - --ig-secondary-500-contrast: hsla(from color(from var(--ig-secondary-500) var(--y-contrast)) h 0 l/1); - --ig-secondary-600: rgb(103, 69, 150); - --ig-secondary-600-contrast: hsla(from color(from var(--ig-secondary-600) var(--y-contrast)) h 0 l/1); - --ig-secondary-700: rgb(80, 53, 117); - --ig-secondary-700-contrast: hsla(from color(from var(--ig-secondary-700) var(--y-contrast)) h 0 l/1); - --ig-secondary-800: rgb(56, 38, 81); - --ig-secondary-800-contrast: hsla(from color(from var(--ig-secondary-800) var(--y-contrast)) h 0 l/1); - --ig-secondary-900: rgb(25, 17, 38); - --ig-secondary-900-contrast: hsla(from color(from var(--ig-secondary-900) var(--y-contrast)) h 0 l/1); - --ig-secondary-seed: #97c; - --ig-secondary-seed-contrast: hsla(from color(from var(--ig-secondary-seed) var(--y-contrast)) h 0 l/1); - --ig-secondary-A100: rgb(233, 209, 255); - --ig-secondary-A100-contrast: hsla(from color(from var(--ig-secondary-A100) var(--y-contrast)) h 0 l/1); - --ig-secondary-A200: rgb(192, 134, 255); - --ig-secondary-A200-contrast: hsla(from color(from var(--ig-secondary-A200) var(--y-contrast)) h 0 l/1); - --ig-secondary-A400: rgb(163, 75, 255); - --ig-secondary-A400-contrast: hsla(from color(from var(--ig-secondary-A400) var(--y-contrast)) h 0 l/1); - --ig-secondary-A700: rgb(139, 23, 233); - --ig-secondary-A700-contrast: hsla(from color(from var(--ig-secondary-A700) var(--y-contrast)) h 0 l/1); - --ig-gray-50: rgb(251, 251, 251); - --ig-gray-50-contrast: hsla(from color(from var(--ig-gray-50) var(--y-contrast)) h 0 l/1); - --ig-gray-100: rgb(247, 247, 247); - --ig-gray-100-contrast: hsla(from color(from var(--ig-gray-100) var(--y-contrast)) h 0 l/1); - --ig-gray-200: rgb(236, 236, 236); - --ig-gray-200-contrast: hsla(from color(from var(--ig-gray-200) var(--y-contrast)) h 0 l/1); - --ig-gray-300: rgb(217, 217, 217); - --ig-gray-300-contrast: hsla(from color(from var(--ig-gray-300) var(--y-contrast)) h 0 l/1); - --ig-gray-400: rgb(193, 193, 193); - --ig-gray-400-contrast: hsla(from color(from var(--ig-gray-400) var(--y-contrast)) h 0 l/1); - --ig-gray-500: rgb(164, 164, 164); - --ig-gray-500-contrast: hsla(from color(from var(--ig-gray-500) var(--y-contrast)) h 0 l/1); - --ig-gray-600: rgb(132, 132, 132); - --ig-gray-600-contrast: hsla(from color(from var(--ig-gray-600) var(--y-contrast)) h 0 l/1); - --ig-gray-700: rgb(99, 99, 99); - --ig-gray-700-contrast: hsla(from color(from var(--ig-gray-700) var(--y-contrast)) h 0 l/1); - --ig-gray-800: rgb(66, 66, 66); - --ig-gray-800-contrast: hsla(from color(from var(--ig-gray-800) var(--y-contrast)) h 0 l/1); - --ig-gray-900: rgb(33, 33, 33); - --ig-gray-900-contrast: hsla(from color(from var(--ig-gray-900) var(--y-contrast)) h 0 l/1); - --ig-gray-seed: #333; - --ig-gray-seed-contrast: hsla(from color(from var(--ig-gray-seed) var(--y-contrast)) h 0 l/1); - --ig-surface-50: rgb(255, 255, 255); - --ig-surface-50-contrast: hsla(from color(from var(--ig-surface-50) var(--y-contrast)) h 0 l/1); - --ig-surface-100: rgb(255, 255, 255); - --ig-surface-100-contrast: hsla(from color(from var(--ig-surface-100) var(--y-contrast)) h 0 l/1); - --ig-surface-200: rgb(255, 255, 255); - --ig-surface-200-contrast: hsla(from color(from var(--ig-surface-200) var(--y-contrast)) h 0 l/1); - --ig-surface-300: rgb(255, 255, 255); - --ig-surface-300-contrast: hsla(from color(from var(--ig-surface-300) var(--y-contrast)) h 0 l/1); - --ig-surface-400: rgb(255, 255, 255); - --ig-surface-400-contrast: hsla(from color(from var(--ig-surface-400) var(--y-contrast)) h 0 l/1); - --ig-surface-500: rgb(255, 255, 255); - --ig-surface-500-contrast: hsla(from color(from var(--ig-surface-500) var(--y-contrast)) h 0 l/1); - --ig-surface-600: rgb(229, 229, 229); - --ig-surface-600-contrast: hsla(from color(from var(--ig-surface-600) var(--y-contrast)) h 0 l/1); - --ig-surface-700: rgb(206, 206, 206); - --ig-surface-700-contrast: hsla(from color(from var(--ig-surface-700) var(--y-contrast)) h 0 l/1); - --ig-surface-800: rgb(185, 185, 185); - --ig-surface-800-contrast: hsla(from color(from var(--ig-surface-800) var(--y-contrast)) h 0 l/1); - --ig-surface-900: rgb(165, 165, 165); - --ig-surface-900-contrast: hsla(from color(from var(--ig-surface-900) var(--y-contrast)) h 0 l/1); - --ig-surface-seed: #fff; - --ig-surface-seed-contrast: hsla(from color(from var(--ig-surface-seed) var(--y-contrast)) h 0 l/1); - --ig-surface-A100: rgb(218, 218, 218); - --ig-surface-A100-contrast: hsla(from color(from var(--ig-surface-A100) var(--y-contrast)) h 0 l/1); - --ig-surface-A200: rgb(161, 161, 161); - --ig-surface-A200-contrast: hsla(from color(from var(--ig-surface-A200) var(--y-contrast)) h 0 l/1); - --ig-surface-A400: rgb(124, 124, 124); - --ig-surface-A400-contrast: hsla(from color(from var(--ig-surface-A400) var(--y-contrast)) h 0 l/1); - --ig-surface-A700: rgb(97, 97, 97); - --ig-surface-A700-contrast: hsla(from color(from var(--ig-surface-A700) var(--y-contrast)) h 0 l/1); - --ig-info-50: rgb(232, 235, 252); - --ig-info-50-contrast: hsla(from color(from var(--ig-info-50) var(--y-contrast)) h 0 l/1); - --ig-info-100: rgb(190, 203, 253); - --ig-info-100-contrast: hsla(from color(from var(--ig-info-100) var(--y-contrast)) h 0 l/1); - --ig-info-200: rgb(149, 173, 255); - --ig-info-200-contrast: hsla(from color(from var(--ig-info-200) var(--y-contrast)) h 0 l/1); - --ig-info-300: rgb(109, 145, 255); - --ig-info-300-contrast: hsla(from color(from var(--ig-info-300) var(--y-contrast)) h 0 l/1); - --ig-info-400: rgb(70, 117, 255); - --ig-info-400-contrast: hsla(from color(from var(--ig-info-400) var(--y-contrast)) h 0 l/1); - --ig-info-500: rgb(34, 91, 245); - --ig-info-500-contrast: hsla(from color(from var(--ig-info-500) var(--y-contrast)) h 0 l/1); - --ig-info-600: rgb(15, 67, 220); - --ig-info-600-contrast: hsla(from color(from var(--ig-info-600) var(--y-contrast)) h 0 l/1); - --ig-info-700: rgb(7, 50, 180); - --ig-info-700-contrast: hsla(from color(from var(--ig-info-700) var(--y-contrast)) h 0 l/1); - --ig-info-800: rgb(6, 36, 125); - --ig-info-800-contrast: hsla(from color(from var(--ig-info-800) var(--y-contrast)) h 0 l/1); - --ig-info-900: rgb(4, 18, 59); - --ig-info-900-contrast: hsla(from color(from var(--ig-info-900) var(--y-contrast)) h 0 l/1); - --ig-info-seed: blue; - --ig-info-seed-contrast: hsla(from color(from var(--ig-info-seed) var(--y-contrast)) h 0 l/1); - --ig-info-A100: rgb(207, 217, 255); - --ig-info-A100-contrast: hsla(from color(from var(--ig-info-A100) var(--y-contrast)) h 0 l/1); - --ig-info-A200: rgb(124, 156, 255); - --ig-info-A200-contrast: hsla(from color(from var(--ig-info-A200) var(--y-contrast)) h 0 l/1); - --ig-info-A400: rgb(63, 113, 255); - --ig-info-A400-contrast: hsla(from color(from var(--ig-info-A400) var(--y-contrast)) h 0 l/1); - --ig-info-A700: rgb(16, 75, 249); - --ig-info-A700-contrast: hsla(from color(from var(--ig-info-A700) var(--y-contrast)) h 0 l/1); - --ig-success-50: rgb(193, 251, 187); - --ig-success-50-contrast: hsla(from color(from var(--ig-success-50) var(--y-contrast)) h 0 l/1); - --ig-success-100: rgb(93, 231, 86); - --ig-success-100-contrast: hsla(from color(from var(--ig-success-100) var(--y-contrast)) h 0 l/1); - --ig-success-200: rgb(47, 203, 42); - --ig-success-200-contrast: hsla(from color(from var(--ig-success-200) var(--y-contrast)) h 0 l/1); - --ig-success-300: rgb(17, 175, 14); - --ig-success-300-contrast: hsla(from color(from var(--ig-success-300) var(--y-contrast)) h 0 l/1); - --ig-success-400: rgb(1, 148, 1); - --ig-success-400-contrast: hsla(from color(from var(--ig-success-400) var(--y-contrast)) h 0 l/1); - --ig-success-500: rgb(1, 124, 0); - --ig-success-500-contrast: hsla(from color(from var(--ig-success-500) var(--y-contrast)) h 0 l/1); - --ig-success-600: rgb(5, 101, 4); - --ig-success-600-contrast: hsla(from color(from var(--ig-success-600) var(--y-contrast)) h 0 l/1); - --ig-success-700: rgb(11, 78, 9); - --ig-success-700-contrast: hsla(from color(from var(--ig-success-700) var(--y-contrast)) h 0 l/1); - --ig-success-800: rgb(13, 55, 11); - --ig-success-800-contrast: hsla(from color(from var(--ig-success-800) var(--y-contrast)) h 0 l/1); - --ig-success-900: rgb(7, 25, 6); - --ig-success-900-contrast: hsla(from color(from var(--ig-success-900) var(--y-contrast)) h 0 l/1); - --ig-success-seed: green; - --ig-success-seed-contrast: hsla(from color(from var(--ig-success-seed) var(--y-contrast)) h 0 l/1); - --ig-success-A100: rgb(56, 251, 50); - --ig-success-A100-contrast: hsla(from color(from var(--ig-success-A100) var(--y-contrast)) h 0 l/1); - --ig-success-A200: rgb(0, 187, 0); - --ig-success-A200-contrast: hsla(from color(from var(--ig-success-A200) var(--y-contrast)) h 0 l/1); - --ig-success-A400: rgb(0, 144, 0); - --ig-success-A400-contrast: hsla(from color(from var(--ig-success-A400) var(--y-contrast)) h 0 l/1); - --ig-success-A700: rgb(0, 114, 0); - --ig-success-A700-contrast: hsla(from color(from var(--ig-success-A700) var(--y-contrast)) h 0 l/1); - --ig-warn-50: rgb(251, 233, 213); - --ig-warn-50-contrast: hsla(from color(from var(--ig-warn-50) var(--y-contrast)) h 0 l/1); - --ig-warn-100: rgb(247, 195, 133); - --ig-warn-100-contrast: hsla(from color(from var(--ig-warn-100) var(--y-contrast)) h 0 l/1); - --ig-warn-200: rgb(233, 161, 65); - --ig-warn-200-contrast: hsla(from color(from var(--ig-warn-200) var(--y-contrast)) h 0 l/1); - --ig-warn-300: rgb(207, 135, 24); - --ig-warn-300-contrast: hsla(from color(from var(--ig-warn-300) var(--y-contrast)) h 0 l/1); - --ig-warn-400: rgb(177, 114, 4); - --ig-warn-400-contrast: hsla(from color(from var(--ig-warn-400) var(--y-contrast)) h 0 l/1); - --ig-warn-500: rgb(149, 94, 1); - --ig-warn-500-contrast: hsla(from color(from var(--ig-warn-500) var(--y-contrast)) h 0 l/1); - --ig-warn-600: rgb(121, 77, 4); - --ig-warn-600-contrast: hsla(from color(from var(--ig-warn-600) var(--y-contrast)) h 0 l/1); - --ig-warn-700: rgb(94, 60, 9); - --ig-warn-700-contrast: hsla(from color(from var(--ig-warn-700) var(--y-contrast)) h 0 l/1); - --ig-warn-800: rgb(65, 42, 11); - --ig-warn-800-contrast: hsla(from color(from var(--ig-warn-800) var(--y-contrast)) h 0 l/1); - --ig-warn-900: rgb(30, 19, 6); - --ig-warn-900-contrast: hsla(from color(from var(--ig-warn-900) var(--y-contrast)) h 0 l/1); - --ig-warn-seed: orange; - --ig-warn-seed-contrast: hsla(from color(from var(--ig-warn-seed) var(--y-contrast)) h 0 l/1); - --ig-warn-A100: rgb(255, 211, 156); - --ig-warn-A100-contrast: hsla(from color(from var(--ig-warn-A100) var(--y-contrast)) h 0 l/1); - --ig-warn-A200: rgb(222, 143, 4); - --ig-warn-A200-contrast: hsla(from color(from var(--ig-warn-A200) var(--y-contrast)) h 0 l/1); - --ig-warn-A400: rgb(172, 110, 0); - --ig-warn-A400-contrast: hsla(from color(from var(--ig-warn-A400) var(--y-contrast)) h 0 l/1); - --ig-warn-A700: rgb(136, 86, 0); - --ig-warn-A700-contrast: hsla(from color(from var(--ig-warn-A700) var(--y-contrast)) h 0 l/1); - --ig-error-50: rgb(254, 231, 227); - --ig-error-50-contrast: hsla(from color(from var(--ig-error-50) var(--y-contrast)) h 0 l/1); - --ig-error-100: rgb(255, 188, 177); - --ig-error-100-contrast: hsla(from color(from var(--ig-error-100) var(--y-contrast)) h 0 l/1); - --ig-error-200: rgb(255, 146, 130); - --ig-error-200-contrast: hsla(from color(from var(--ig-error-200) var(--y-contrast)) h 0 l/1); - --ig-error-300: rgb(255, 99, 82); - --ig-error-300-contrast: hsla(from color(from var(--ig-error-300) var(--y-contrast)) h 0 l/1); - --ig-error-400: rgb(237, 58, 45); - --ig-error-400-contrast: hsla(from color(from var(--ig-error-400) var(--y-contrast)) h 0 l/1); - --ig-error-500: rgb(209, 28, 19); - --ig-error-500-contrast: hsla(from color(from var(--ig-error-500) var(--y-contrast)) h 0 l/1); - --ig-error-600: rgb(174, 16, 9); - --ig-error-600-contrast: hsla(from color(from var(--ig-error-600) var(--y-contrast)) h 0 l/1); - --ig-error-700: rgb(135, 17, 11); - --ig-error-700-contrast: hsla(from color(from var(--ig-error-700) var(--y-contrast)) h 0 l/1); - --ig-error-800: rgb(93, 18, 12); - --ig-error-800-contrast: hsla(from color(from var(--ig-error-800) var(--y-contrast)) h 0 l/1); - --ig-error-900: rgb(44, 9, 6); - --ig-error-900-contrast: hsla(from color(from var(--ig-error-900) var(--y-contrast)) h 0 l/1); - --ig-error-seed: red; - --ig-error-seed-contrast: hsla(from color(from var(--ig-error-seed) var(--y-contrast)) h 0 l/1); - --ig-error-A100: rgb(255, 207, 198); - --ig-error-A100-contrast: hsla(from color(from var(--ig-error-A100) var(--y-contrast)) h 0 l/1); - --ig-error-A200: rgb(255, 119, 101); - --ig-error-A200-contrast: hsla(from color(from var(--ig-error-A200) var(--y-contrast)) h 0 l/1); - --ig-error-A400: rgb(242, 34, 24); - --ig-error-A400-contrast: hsla(from color(from var(--ig-error-A400) var(--y-contrast)) h 0 l/1); - --ig-error-A700: rgb(197, 2, 1); - --ig-error-A700-contrast: hsla(from color(from var(--ig-error-A700) var(--y-contrast)) h 0 l/1); -} - -/* END_OUTPUT */ -/* CONTAINED */ -:root { - --ig-primary-seed: #09f; - --ig-gray-seed: #333; -} - -/* END_CONTAINED */ -/* END_ASSERT */ -/* ASSERT: */ -/* OUTPUT */ -:root { - --ig-wcag-a: 0.31; - --ig-wcag-aa: 0.185; - --ig-wcag-aaa: 0.178; - --ig-contrast-level: var(--ig-wcag-aa); - --y: clamp(0, (y / var(--ig-contrast-level) - 1) * -infinity, 1); - --y-contrast: xyz-d65 var(--y) var(--y) var(--y); -} - -:root { - --ig-primary-50: rgb(226, 237, 251); - --ig-primary-50-contrast: hsla(from color(from var(--ig-primary-50) var(--y-contrast)) h 0 l/1); - --ig-primary-100: rgb(172, 207, 251); - --ig-primary-100-contrast: hsla(from color(from var(--ig-primary-100) var(--y-contrast)) h 0 l/1); - --ig-primary-200: rgb(117, 180, 250); - --ig-primary-200-contrast: hsla(from color(from var(--ig-primary-200) var(--y-contrast)) h 0 l/1); - --ig-primary-300: rgb(67, 155, 239); - --ig-primary-300-contrast: hsla(from color(from var(--ig-primary-300) var(--y-contrast)) h 0 l/1); - --ig-primary-400: rgb(27, 131, 214); - --ig-primary-400-contrast: hsla(from color(from var(--ig-primary-400) var(--y-contrast)) h 0 l/1); - --ig-primary-500: rgb(9, 109, 183); - --ig-primary-500-contrast: hsla(from color(from var(--ig-primary-500) var(--y-contrast)) h 0 l/1); - --ig-primary-600: rgb(6, 89, 150); - --ig-primary-600-contrast: hsla(from color(from var(--ig-primary-600) var(--y-contrast)) h 0 l/1); - --ig-primary-700: rgb(11, 69, 116); - --ig-primary-700-contrast: hsla(from color(from var(--ig-primary-700) var(--y-contrast)) h 0 l/1); - --ig-primary-800: rgb(12, 48, 80); - --ig-primary-800-contrast: hsla(from color(from var(--ig-primary-800) var(--y-contrast)) h 0 l/1); - --ig-primary-900: rgb(6, 22, 37); - --ig-primary-900-contrast: hsla(from color(from var(--ig-primary-900) var(--y-contrast)) h 0 l/1); - --ig-primary-seed: #09f; - --ig-primary-seed-contrast: hsla(from color(from var(--ig-primary-seed) var(--y-contrast)) h 0 l/1); - --ig-primary-A100: rgb(191, 221, 255); - --ig-primary-A100-contrast: hsla(from color(from var(--ig-primary-A100) var(--y-contrast)) h 0 l/1); - --ig-primary-A200: rgb(73, 164, 255); - --ig-primary-A200-contrast: hsla(from color(from var(--ig-primary-A200) var(--y-contrast)) h 0 l/1); - --ig-primary-A400: rgb(4, 127, 213); - --ig-primary-A400-contrast: hsla(from color(from var(--ig-primary-A400) var(--y-contrast)) h 0 l/1); - --ig-primary-A700: rgb(0, 100, 169); - --ig-primary-A700-contrast: hsla(from color(from var(--ig-primary-A700) var(--y-contrast)) h 0 l/1); - --ig-secondary-50: rgb(240, 235, 245); - --ig-secondary-50-contrast: hsla(from color(from var(--ig-secondary-50) var(--y-contrast)) h 0 l/1); - --ig-secondary-100: rgb(213, 198, 231); - --ig-secondary-100-contrast: hsla(from color(from var(--ig-secondary-100) var(--y-contrast)) h 0 l/1); - --ig-secondary-200: rgb(190, 166, 221); - --ig-secondary-200-contrast: hsla(from color(from var(--ig-secondary-200) var(--y-contrast)) h 0 l/1); - --ig-secondary-300: rgb(168, 136, 211); - --ig-secondary-300-contrast: hsla(from color(from var(--ig-secondary-300) var(--y-contrast)) h 0 l/1); - --ig-secondary-400: rgb(146, 110, 198); - --ig-secondary-400-contrast: hsla(from color(from var(--ig-secondary-400) var(--y-contrast)) h 0 l/1); - --ig-secondary-500: rgb(125, 87, 177); - --ig-secondary-500-contrast: hsla(from color(from var(--ig-secondary-500) var(--y-contrast)) h 0 l/1); - --ig-secondary-600: rgb(103, 69, 150); - --ig-secondary-600-contrast: hsla(from color(from var(--ig-secondary-600) var(--y-contrast)) h 0 l/1); - --ig-secondary-700: rgb(80, 53, 117); - --ig-secondary-700-contrast: hsla(from color(from var(--ig-secondary-700) var(--y-contrast)) h 0 l/1); - --ig-secondary-800: rgb(56, 38, 81); - --ig-secondary-800-contrast: hsla(from color(from var(--ig-secondary-800) var(--y-contrast)) h 0 l/1); - --ig-secondary-900: rgb(25, 17, 38); - --ig-secondary-900-contrast: hsla(from color(from var(--ig-secondary-900) var(--y-contrast)) h 0 l/1); - --ig-secondary-seed: #97c; - --ig-secondary-seed-contrast: hsla(from color(from var(--ig-secondary-seed) var(--y-contrast)) h 0 l/1); - --ig-secondary-A100: rgb(233, 209, 255); - --ig-secondary-A100-contrast: hsla(from color(from var(--ig-secondary-A100) var(--y-contrast)) h 0 l/1); - --ig-secondary-A200: rgb(192, 134, 255); - --ig-secondary-A200-contrast: hsla(from color(from var(--ig-secondary-A200) var(--y-contrast)) h 0 l/1); - --ig-secondary-A400: rgb(163, 75, 255); - --ig-secondary-A400-contrast: hsla(from color(from var(--ig-secondary-A400) var(--y-contrast)) h 0 l/1); - --ig-secondary-A700: rgb(139, 23, 233); - --ig-secondary-A700-contrast: hsla(from color(from var(--ig-secondary-A700) var(--y-contrast)) h 0 l/1); - --ig-gray-50: rgb(251, 251, 251); - --ig-gray-50-contrast: hsla(from color(from var(--ig-gray-50) var(--y-contrast)) h 0 l/1); - --ig-gray-100: rgb(247, 247, 247); - --ig-gray-100-contrast: hsla(from color(from var(--ig-gray-100) var(--y-contrast)) h 0 l/1); - --ig-gray-200: rgb(236, 236, 236); - --ig-gray-200-contrast: hsla(from color(from var(--ig-gray-200) var(--y-contrast)) h 0 l/1); - --ig-gray-300: rgb(217, 217, 217); - --ig-gray-300-contrast: hsla(from color(from var(--ig-gray-300) var(--y-contrast)) h 0 l/1); - --ig-gray-400: rgb(193, 193, 193); - --ig-gray-400-contrast: hsla(from color(from var(--ig-gray-400) var(--y-contrast)) h 0 l/1); - --ig-gray-500: rgb(164, 164, 164); - --ig-gray-500-contrast: hsla(from color(from var(--ig-gray-500) var(--y-contrast)) h 0 l/1); - --ig-gray-600: rgb(132, 132, 132); - --ig-gray-600-contrast: hsla(from color(from var(--ig-gray-600) var(--y-contrast)) h 0 l/1); - --ig-gray-700: rgb(99, 99, 99); - --ig-gray-700-contrast: hsla(from color(from var(--ig-gray-700) var(--y-contrast)) h 0 l/1); - --ig-gray-800: rgb(66, 66, 66); - --ig-gray-800-contrast: hsla(from color(from var(--ig-gray-800) var(--y-contrast)) h 0 l/1); - --ig-gray-900: rgb(33, 33, 33); - --ig-gray-900-contrast: hsla(from color(from var(--ig-gray-900) var(--y-contrast)) h 0 l/1); - --ig-gray-seed: #000; - --ig-gray-seed-contrast: hsla(from color(from var(--ig-gray-seed) var(--y-contrast)) h 0 l/1); - --ig-surface-50: rgb(255, 255, 255); - --ig-surface-50-contrast: hsla(from color(from var(--ig-surface-50) var(--y-contrast)) h 0 l/1); - --ig-surface-100: rgb(255, 255, 255); - --ig-surface-100-contrast: hsla(from color(from var(--ig-surface-100) var(--y-contrast)) h 0 l/1); - --ig-surface-200: rgb(255, 255, 255); - --ig-surface-200-contrast: hsla(from color(from var(--ig-surface-200) var(--y-contrast)) h 0 l/1); - --ig-surface-300: rgb(255, 255, 255); - --ig-surface-300-contrast: hsla(from color(from var(--ig-surface-300) var(--y-contrast)) h 0 l/1); - --ig-surface-400: rgb(255, 255, 255); - --ig-surface-400-contrast: hsla(from color(from var(--ig-surface-400) var(--y-contrast)) h 0 l/1); - --ig-surface-500: rgb(255, 255, 255); - --ig-surface-500-contrast: hsla(from color(from var(--ig-surface-500) var(--y-contrast)) h 0 l/1); - --ig-surface-600: rgb(229, 229, 229); - --ig-surface-600-contrast: hsla(from color(from var(--ig-surface-600) var(--y-contrast)) h 0 l/1); - --ig-surface-700: rgb(206, 206, 206); - --ig-surface-700-contrast: hsla(from color(from var(--ig-surface-700) var(--y-contrast)) h 0 l/1); - --ig-surface-800: rgb(185, 185, 185); - --ig-surface-800-contrast: hsla(from color(from var(--ig-surface-800) var(--y-contrast)) h 0 l/1); - --ig-surface-900: rgb(165, 165, 165); - --ig-surface-900-contrast: hsla(from color(from var(--ig-surface-900) var(--y-contrast)) h 0 l/1); - --ig-surface-seed: #fff; - --ig-surface-seed-contrast: hsla(from color(from var(--ig-surface-seed) var(--y-contrast)) h 0 l/1); - --ig-surface-A100: rgb(218, 218, 218); - --ig-surface-A100-contrast: hsla(from color(from var(--ig-surface-A100) var(--y-contrast)) h 0 l/1); - --ig-surface-A200: rgb(161, 161, 161); - --ig-surface-A200-contrast: hsla(from color(from var(--ig-surface-A200) var(--y-contrast)) h 0 l/1); - --ig-surface-A400: rgb(124, 124, 124); - --ig-surface-A400-contrast: hsla(from color(from var(--ig-surface-A400) var(--y-contrast)) h 0 l/1); - --ig-surface-A700: rgb(97, 97, 97); - --ig-surface-A700-contrast: hsla(from color(from var(--ig-surface-A700) var(--y-contrast)) h 0 l/1); - --ig-info-50: rgb(232, 235, 252); - --ig-info-50-contrast: hsla(from color(from var(--ig-info-50) var(--y-contrast)) h 0 l/1); - --ig-info-100: rgb(190, 203, 253); - --ig-info-100-contrast: hsla(from color(from var(--ig-info-100) var(--y-contrast)) h 0 l/1); - --ig-info-200: rgb(149, 173, 255); - --ig-info-200-contrast: hsla(from color(from var(--ig-info-200) var(--y-contrast)) h 0 l/1); - --ig-info-300: rgb(109, 145, 255); - --ig-info-300-contrast: hsla(from color(from var(--ig-info-300) var(--y-contrast)) h 0 l/1); - --ig-info-400: rgb(70, 117, 255); - --ig-info-400-contrast: hsla(from color(from var(--ig-info-400) var(--y-contrast)) h 0 l/1); - --ig-info-500: rgb(34, 91, 245); - --ig-info-500-contrast: hsla(from color(from var(--ig-info-500) var(--y-contrast)) h 0 l/1); - --ig-info-600: rgb(15, 67, 220); - --ig-info-600-contrast: hsla(from color(from var(--ig-info-600) var(--y-contrast)) h 0 l/1); - --ig-info-700: rgb(7, 50, 180); - --ig-info-700-contrast: hsla(from color(from var(--ig-info-700) var(--y-contrast)) h 0 l/1); - --ig-info-800: rgb(6, 36, 125); - --ig-info-800-contrast: hsla(from color(from var(--ig-info-800) var(--y-contrast)) h 0 l/1); - --ig-info-900: rgb(4, 18, 59); - --ig-info-900-contrast: hsla(from color(from var(--ig-info-900) var(--y-contrast)) h 0 l/1); - --ig-info-seed: blue; - --ig-info-seed-contrast: hsla(from color(from var(--ig-info-seed) var(--y-contrast)) h 0 l/1); - --ig-info-A100: rgb(207, 217, 255); - --ig-info-A100-contrast: hsla(from color(from var(--ig-info-A100) var(--y-contrast)) h 0 l/1); - --ig-info-A200: rgb(124, 156, 255); - --ig-info-A200-contrast: hsla(from color(from var(--ig-info-A200) var(--y-contrast)) h 0 l/1); - --ig-info-A400: rgb(63, 113, 255); - --ig-info-A400-contrast: hsla(from color(from var(--ig-info-A400) var(--y-contrast)) h 0 l/1); - --ig-info-A700: rgb(16, 75, 249); - --ig-info-A700-contrast: hsla(from color(from var(--ig-info-A700) var(--y-contrast)) h 0 l/1); - --ig-success-50: rgb(193, 251, 187); - --ig-success-50-contrast: hsla(from color(from var(--ig-success-50) var(--y-contrast)) h 0 l/1); - --ig-success-100: rgb(93, 231, 86); - --ig-success-100-contrast: hsla(from color(from var(--ig-success-100) var(--y-contrast)) h 0 l/1); - --ig-success-200: rgb(47, 203, 42); - --ig-success-200-contrast: hsla(from color(from var(--ig-success-200) var(--y-contrast)) h 0 l/1); - --ig-success-300: rgb(17, 175, 14); - --ig-success-300-contrast: hsla(from color(from var(--ig-success-300) var(--y-contrast)) h 0 l/1); - --ig-success-400: rgb(1, 148, 1); - --ig-success-400-contrast: hsla(from color(from var(--ig-success-400) var(--y-contrast)) h 0 l/1); - --ig-success-500: rgb(1, 124, 0); - --ig-success-500-contrast: hsla(from color(from var(--ig-success-500) var(--y-contrast)) h 0 l/1); - --ig-success-600: rgb(5, 101, 4); - --ig-success-600-contrast: hsla(from color(from var(--ig-success-600) var(--y-contrast)) h 0 l/1); - --ig-success-700: rgb(11, 78, 9); - --ig-success-700-contrast: hsla(from color(from var(--ig-success-700) var(--y-contrast)) h 0 l/1); - --ig-success-800: rgb(13, 55, 11); - --ig-success-800-contrast: hsla(from color(from var(--ig-success-800) var(--y-contrast)) h 0 l/1); - --ig-success-900: rgb(7, 25, 6); - --ig-success-900-contrast: hsla(from color(from var(--ig-success-900) var(--y-contrast)) h 0 l/1); - --ig-success-seed: green; - --ig-success-seed-contrast: hsla(from color(from var(--ig-success-seed) var(--y-contrast)) h 0 l/1); - --ig-success-A100: rgb(56, 251, 50); - --ig-success-A100-contrast: hsla(from color(from var(--ig-success-A100) var(--y-contrast)) h 0 l/1); - --ig-success-A200: rgb(0, 187, 0); - --ig-success-A200-contrast: hsla(from color(from var(--ig-success-A200) var(--y-contrast)) h 0 l/1); - --ig-success-A400: rgb(0, 144, 0); - --ig-success-A400-contrast: hsla(from color(from var(--ig-success-A400) var(--y-contrast)) h 0 l/1); - --ig-success-A700: rgb(0, 114, 0); - --ig-success-A700-contrast: hsla(from color(from var(--ig-success-A700) var(--y-contrast)) h 0 l/1); - --ig-warn-50: rgb(251, 233, 213); - --ig-warn-50-contrast: hsla(from color(from var(--ig-warn-50) var(--y-contrast)) h 0 l/1); - --ig-warn-100: rgb(247, 195, 133); - --ig-warn-100-contrast: hsla(from color(from var(--ig-warn-100) var(--y-contrast)) h 0 l/1); - --ig-warn-200: rgb(233, 161, 65); - --ig-warn-200-contrast: hsla(from color(from var(--ig-warn-200) var(--y-contrast)) h 0 l/1); - --ig-warn-300: rgb(207, 135, 24); - --ig-warn-300-contrast: hsla(from color(from var(--ig-warn-300) var(--y-contrast)) h 0 l/1); - --ig-warn-400: rgb(177, 114, 4); - --ig-warn-400-contrast: hsla(from color(from var(--ig-warn-400) var(--y-contrast)) h 0 l/1); - --ig-warn-500: rgb(149, 94, 1); - --ig-warn-500-contrast: hsla(from color(from var(--ig-warn-500) var(--y-contrast)) h 0 l/1); - --ig-warn-600: rgb(121, 77, 4); - --ig-warn-600-contrast: hsla(from color(from var(--ig-warn-600) var(--y-contrast)) h 0 l/1); - --ig-warn-700: rgb(94, 60, 9); - --ig-warn-700-contrast: hsla(from color(from var(--ig-warn-700) var(--y-contrast)) h 0 l/1); - --ig-warn-800: rgb(65, 42, 11); - --ig-warn-800-contrast: hsla(from color(from var(--ig-warn-800) var(--y-contrast)) h 0 l/1); - --ig-warn-900: rgb(30, 19, 6); - --ig-warn-900-contrast: hsla(from color(from var(--ig-warn-900) var(--y-contrast)) h 0 l/1); - --ig-warn-seed: orange; - --ig-warn-seed-contrast: hsla(from color(from var(--ig-warn-seed) var(--y-contrast)) h 0 l/1); - --ig-warn-A100: rgb(255, 211, 156); - --ig-warn-A100-contrast: hsla(from color(from var(--ig-warn-A100) var(--y-contrast)) h 0 l/1); - --ig-warn-A200: rgb(222, 143, 4); - --ig-warn-A200-contrast: hsla(from color(from var(--ig-warn-A200) var(--y-contrast)) h 0 l/1); - --ig-warn-A400: rgb(172, 110, 0); - --ig-warn-A400-contrast: hsla(from color(from var(--ig-warn-A400) var(--y-contrast)) h 0 l/1); - --ig-warn-A700: rgb(136, 86, 0); - --ig-warn-A700-contrast: hsla(from color(from var(--ig-warn-A700) var(--y-contrast)) h 0 l/1); - --ig-error-50: rgb(254, 231, 227); - --ig-error-50-contrast: hsla(from color(from var(--ig-error-50) var(--y-contrast)) h 0 l/1); - --ig-error-100: rgb(255, 188, 177); - --ig-error-100-contrast: hsla(from color(from var(--ig-error-100) var(--y-contrast)) h 0 l/1); - --ig-error-200: rgb(255, 146, 130); - --ig-error-200-contrast: hsla(from color(from var(--ig-error-200) var(--y-contrast)) h 0 l/1); - --ig-error-300: rgb(255, 99, 82); - --ig-error-300-contrast: hsla(from color(from var(--ig-error-300) var(--y-contrast)) h 0 l/1); - --ig-error-400: rgb(237, 58, 45); - --ig-error-400-contrast: hsla(from color(from var(--ig-error-400) var(--y-contrast)) h 0 l/1); - --ig-error-500: rgb(209, 28, 19); - --ig-error-500-contrast: hsla(from color(from var(--ig-error-500) var(--y-contrast)) h 0 l/1); - --ig-error-600: rgb(174, 16, 9); - --ig-error-600-contrast: hsla(from color(from var(--ig-error-600) var(--y-contrast)) h 0 l/1); - --ig-error-700: rgb(135, 17, 11); - --ig-error-700-contrast: hsla(from color(from var(--ig-error-700) var(--y-contrast)) h 0 l/1); - --ig-error-800: rgb(93, 18, 12); - --ig-error-800-contrast: hsla(from color(from var(--ig-error-800) var(--y-contrast)) h 0 l/1); - --ig-error-900: rgb(44, 9, 6); - --ig-error-900-contrast: hsla(from color(from var(--ig-error-900) var(--y-contrast)) h 0 l/1); - --ig-error-seed: red; - --ig-error-seed-contrast: hsla(from color(from var(--ig-error-seed) var(--y-contrast)) h 0 l/1); - --ig-error-A100: rgb(255, 207, 198); - --ig-error-A100-contrast: hsla(from color(from var(--ig-error-A100) var(--y-contrast)) h 0 l/1); - --ig-error-A200: rgb(255, 119, 101); - --ig-error-A200-contrast: hsla(from color(from var(--ig-error-A200) var(--y-contrast)) h 0 l/1); - --ig-error-A400: rgb(242, 34, 24); - --ig-error-A400-contrast: hsla(from color(from var(--ig-error-A400) var(--y-contrast)) h 0 l/1); - --ig-error-A700: rgb(197, 2, 1); - --ig-error-A700-contrast: hsla(from color(from var(--ig-error-A700) var(--y-contrast)) h 0 l/1); -} - -/* END_OUTPUT */ -/* CONTAINED */ -:root { - --ig-primary-seed: #09f; - --ig-gray-seed: #000; -} - -/* END_CONTAINED */ -/* END_ASSERT */ -/* */ -/* */ -/* */ -/* */ -/* # Module: Typography */ -/* -------------------- */ -/* # Module: Typography :: operations */ -/* ---------------------------------- */ -/* Test: should convert pixel numbers to rem */ -/* ✔ [assert-equal] should convert pixel numbers to rem */ -/* */ -/* Test: should convert unitless numbers to rem */ -/* ✔ [assert-equal] should convert unitless numbers to rem */ -/* */ -/* Test: should convert pixel numbers to em */ -/* ✔ [assert-equal] should convert pixel numbers to em */ -/* */ -/* Test: should convert unitless numbers to em */ -/* ✔ [assert-equal] should convert unitless numbers to em */ -/* */ -/* Test: should convert relative unit numbers to pixels */ -/* ✔ [assert-equal] should convert relative unit numbers to pixels */ -/* ✔ [assert-equal] should convert relative unit numbers to pixels */ -/* */ -/* Test: should convert unitless numbers to pixels */ -/* ✔ [assert-equal] should convert unitless numbers to pixels */ -/* */ -/* */ -/* # Module: Typography :: generation */ -/* ---------------------------------- */ -/* Test: should produce a map of default type style rules matching the ITypeStyle map */ -/* ✔ [assert-equal] should produce a map of default type style rules matching the ITypeStyle map */ -/* ✔ [assert-equal] should produce a map of default type style rules matching the ITypeStyle map */ -/* ✔ [assert-equal] should produce a map of default type style rules matching the ITypeStyle map */ -/* ✔ [assert-equal] should produce a map of default type style rules matching the ITypeStyle map */ -/* ✔ [assert-equal] should produce a map of default type style rules matching the ITypeStyle map */ -/* ✔ [assert-equal] should produce a map of default type style rules matching the ITypeStyle map */ -/* ✔ [assert-equal] should produce a map of default type style rules matching the ITypeStyle map */ -/* ✔ [assert-equal] should produce a map of default type style rules matching the ITypeStyle map */ -/* ✔ [assert-equal] should produce a map of default type style rules matching the ITypeStyle map */ -/* */ -/* Test: should only produce a map of allowed type style rules */ -/* ✔ [assert-equal] should only produce a map of allowed type style rules */ -/* ✔ [assert-equal] should only produce a map of allowed type style rules */ -/* ✔ [assert-equal] should only produce a map of allowed type style rules */ -/* ✔ [assert-equal] should only produce a map of allowed type style rules */ -/* ✔ [assert-equal] should only produce a map of allowed type style rules */ -/* ✔ [assert-equal] should only produce a map of allowed type style rules */ -/* ✔ [assert-equal] should only produce a map of allowed type style rules */ -/* ✔ [assert-equal] should only produce a map of allowed type style rules */ -/* ✔ [assert-equal] should only produce a map of allowed type style rules */ -/* ✔ [assert-false] should only produce a map of allowed type style rules */ -/* */ -/* Test: should produce a type scale map of type style values for each category */ -/* ✔ [assert-equal] should produce a type scale map of type style values for each category */ -/* ✔ [assert-equal] should produce a type scale map of type style values for each category */ -/* ✔ [assert-equal] should produce a type scale map of type style values for each category */ -/* ✔ [assert-equal] should produce a type scale map of type style values for each category */ -/* ✔ [assert-equal] should produce a type scale map of type style values for each category */ -/* ✔ [assert-equal] should produce a type scale map of type style values for each category */ -/* ✔ [assert-equal] should produce a type scale map of type style values for each category */ -/* ✔ [assert-equal] should produce a type scale map of type style values for each category */ -/* ✔ [assert-equal] should produce a type scale map of type style values for each category */ -/* ✔ [assert-equal] should produce a type scale map of type style values for each category */ -/* ✔ [assert-equal] should produce a type scale map of type style values for each category */ -/* ✔ [assert-equal] should produce a type scale map of type style values for each category */ -/* ✔ [assert-equal] should produce a type scale map of type style values for each category */ -/* ✔ [assert-equal] should produce a type scale map of type style values for each category */ -/* */ -/* Test: should retreive type styles from a scale */ -/* ✔ [assert-equal] should retreive type styles from a scale */ -/* ✔ [assert-equal] should retreive type styles from a scale */ -/* ✔ [assert-equal] should retreive type styles from a scale */ -/* ✔ [assert-equal] should retreive type styles from a scale */ -/* ✔ [assert-equal] should retreive type styles from a scale */ -/* ✔ [assert-equal] should retreive type styles from a scale */ -/* ✔ [assert-equal] should retreive type styles from a scale */ -/* ✔ [assert-equal] should retreive type styles from a scale */ -/* ✔ [assert-equal] should retreive type styles from a scale */ -/* */ -/* Test: generates CSS variables from a type style map without font-family if its value is "inherit" */ -/* ASSERT: */ -/* OUTPUT */ -.test-output { - --ig-h1-font-size: 96px; - --ig-h1-font-weight: normal; - --ig-h1-font-style: normal; - --ig-h1-line-height: normal; - --ig-h1-letter-spacing: normal; - --ig-h1-text-transform: none; - --ig-h1-margin-top: 0; - --ig-h1-margin-bottom: 0; -} - -/* END_OUTPUT */ -/* EXPECTED */ -.test-output { - --ig-h1-font-size: 96px; - --ig-h1-font-weight: normal; - --ig-h1-font-style: normal; - --ig-h1-line-height: normal; - --ig-h1-letter-spacing: normal; - --ig-h1-text-transform: none; - --ig-h1-margin-top: 0; - --ig-h1-margin-bottom: 0; -} - -/* END_EXPECTED */ -/* END_ASSERT */ -/* */ -/* Test: generates CSS variables for a type style map with font-family if its value is not "inherit" */ -/* ASSERT: */ -/* OUTPUT */ -.test-output { - --ig-h1-font-family: 'American Typewriter', serif; - --ig-h1-font-size: 96px; - --ig-h1-font-weight: normal; - --ig-h1-font-style: normal; - --ig-h1-line-height: normal; - --ig-h1-letter-spacing: normal; - --ig-h1-text-transform: none; - --ig-h1-margin-top: 0; - --ig-h1-margin-bottom: 0; -} - -/* END_OUTPUT */ -/* EXPECTED */ -.test-output { - --ig-h1-font-family: 'American Typewriter', serif; - --ig-h1-font-size: 96px; - --ig-h1-font-weight: normal; - --ig-h1-font-style: normal; - --ig-h1-line-height: normal; - --ig-h1-letter-spacing: normal; - --ig-h1-text-transform: none; - --ig-h1-margin-top: 0; - --ig-h1-margin-bottom: 0; -} - -/* END_EXPECTED */ -/* END_ASSERT */ -/* */ -/* Test: should include all styles from a custom type category */ -/* ASSERT: */ -/* OUTPUT */ -.test-output { - font-family: var(--ig-calendar-labels-font-family, var(--ig-font-family)); - font-size: var(--ig-calendar-labels-font-size); - font-weight: var(--ig-calendar-labels-font-weight); - font-style: var(--ig-calendar-labels-font-style); - line-height: var(--ig-calendar-labels-line-height); - letter-spacing: var(--ig-calendar-labels-letter-spacing); - text-transform: var(--ig-calendar-labels-text-transform); - margin-top: var(--ig-calendar-labels-margin-top); - margin-bottom: var(--ig-calendar-labels-margin-bottom); -} - -/* END_OUTPUT */ -/* EXPECTED */ -.test-output { - font-family: var(--ig-calendar-labels-font-family, var(--ig-font-family)); - font-size: var(--ig-calendar-labels-font-size); - font-weight: var(--ig-calendar-labels-font-weight); - font-style: var(--ig-calendar-labels-font-style); - line-height: var(--ig-calendar-labels-line-height); - letter-spacing: var(--ig-calendar-labels-letter-spacing); - text-transform: var(--ig-calendar-labels-text-transform); - margin-top: var(--ig-calendar-labels-margin-top); - margin-bottom: var(--ig-calendar-labels-margin-bottom); -} - -/* END_EXPECTED */ -/* END_ASSERT */ -/* */ -/* Test: should include type styles with CSS var refs as values for a specific category */ -/* ASSERT: */ -/* OUTPUT */ -.test-output .my-h1 { - font-family: var(--ig-h1-font-family, var(--ig-font-family)); - font-size: var(--ig-h1-font-size); - font-weight: var(--ig-h1-font-weight); - font-style: var(--ig-h1-font-style); - line-height: var(--ig-h1-line-height); - letter-spacing: var(--ig-h1-letter-spacing); - text-transform: var(--ig-h1-text-transform); - margin-top: var(--ig-h1-margin-top); - margin-bottom: var(--ig-h1-margin-bottom); -} - -/* END_OUTPUT */ -/* EXPECTED */ -.test-output .my-h1 { - font-family: var(--ig-h1-font-family, var(--ig-font-family)); - font-size: var(--ig-h1-font-size); - font-weight: var(--ig-h1-font-weight); - font-style: var(--ig-h1-font-style); - line-height: var(--ig-h1-line-height); - letter-spacing: var(--ig-h1-letter-spacing); - text-transform: var(--ig-h1-text-transform); - margin-top: var(--ig-h1-margin-top); - margin-bottom: var(--ig-h1-margin-bottom); -} - -/* END_EXPECTED */ -/* END_ASSERT */ -/* */ -/* Test: should include CSS classes with style rules for all categories in a type scale */ -/* ASSERT: */ -/* OUTPUT */ -.ig-typography .ig-typography__h1 { - font-family: var(--ig-h1-font-family, var(--ig-font-family)); - font-size: var(--ig-h1-font-size); - font-weight: var(--ig-h1-font-weight); - font-style: var(--ig-h1-font-style); - line-height: var(--ig-h1-line-height); - letter-spacing: var(--ig-h1-letter-spacing); - text-transform: var(--ig-h1-text-transform); - margin-top: var(--ig-h1-margin-top); - margin-bottom: var(--ig-h1-margin-bottom); -} -.ig-typography .ig-typography__h2 { - font-family: var(--ig-h2-font-family, var(--ig-font-family)); - font-size: var(--ig-h2-font-size); - font-weight: var(--ig-h2-font-weight); - font-style: var(--ig-h2-font-style); - line-height: var(--ig-h2-line-height); - letter-spacing: var(--ig-h2-letter-spacing); - text-transform: var(--ig-h2-text-transform); - margin-top: var(--ig-h2-margin-top); - margin-bottom: var(--ig-h2-margin-bottom); -} -.ig-typography .ig-typography__h3 { - font-family: var(--ig-h3-font-family, var(--ig-font-family)); - font-size: var(--ig-h3-font-size); - font-weight: var(--ig-h3-font-weight); - font-style: var(--ig-h3-font-style); - line-height: var(--ig-h3-line-height); - letter-spacing: var(--ig-h3-letter-spacing); - text-transform: var(--ig-h3-text-transform); - margin-top: var(--ig-h3-margin-top); - margin-bottom: var(--ig-h3-margin-bottom); -} -.ig-typography .ig-typography__h4 { - font-family: var(--ig-h4-font-family, var(--ig-font-family)); - font-size: var(--ig-h4-font-size); - font-weight: var(--ig-h4-font-weight); - font-style: var(--ig-h4-font-style); - line-height: var(--ig-h4-line-height); - letter-spacing: var(--ig-h4-letter-spacing); - text-transform: var(--ig-h4-text-transform); - margin-top: var(--ig-h4-margin-top); - margin-bottom: var(--ig-h4-margin-bottom); -} -.ig-typography .ig-typography__h5 { - font-family: var(--ig-h5-font-family, var(--ig-font-family)); - font-size: var(--ig-h5-font-size); - font-weight: var(--ig-h5-font-weight); - font-style: var(--ig-h5-font-style); - line-height: var(--ig-h5-line-height); - letter-spacing: var(--ig-h5-letter-spacing); - text-transform: var(--ig-h5-text-transform); - margin-top: var(--ig-h5-margin-top); - margin-bottom: var(--ig-h5-margin-bottom); -} -.ig-typography .ig-typography__h6 { - font-family: var(--ig-h6-font-family, var(--ig-font-family)); - font-size: var(--ig-h6-font-size); - font-weight: var(--ig-h6-font-weight); - font-style: var(--ig-h6-font-style); - line-height: var(--ig-h6-line-height); - letter-spacing: var(--ig-h6-letter-spacing); - text-transform: var(--ig-h6-text-transform); - margin-top: var(--ig-h6-margin-top); - margin-bottom: var(--ig-h6-margin-bottom); -} -.ig-typography .ig-typography__subtitle-1 { - font-family: var(--ig-subtitle-1-font-family, var(--ig-font-family)); - font-size: var(--ig-subtitle-1-font-size); - font-weight: var(--ig-subtitle-1-font-weight); - font-style: var(--ig-subtitle-1-font-style); - line-height: var(--ig-subtitle-1-line-height); - letter-spacing: var(--ig-subtitle-1-letter-spacing); - text-transform: var(--ig-subtitle-1-text-transform); - margin-top: var(--ig-subtitle-1-margin-top); - margin-bottom: var(--ig-subtitle-1-margin-bottom); -} -.ig-typography .ig-typography__subtitle-2 { - font-family: var(--ig-subtitle-2-font-family, var(--ig-font-family)); - font-size: var(--ig-subtitle-2-font-size); - font-weight: var(--ig-subtitle-2-font-weight); - font-style: var(--ig-subtitle-2-font-style); - line-height: var(--ig-subtitle-2-line-height); - letter-spacing: var(--ig-subtitle-2-letter-spacing); - text-transform: var(--ig-subtitle-2-text-transform); - margin-top: var(--ig-subtitle-2-margin-top); - margin-bottom: var(--ig-subtitle-2-margin-bottom); -} -.ig-typography .ig-typography__body-1 { - font-family: var(--ig-body-1-font-family, var(--ig-font-family)); - font-size: var(--ig-body-1-font-size); - font-weight: var(--ig-body-1-font-weight); - font-style: var(--ig-body-1-font-style); - line-height: var(--ig-body-1-line-height); - letter-spacing: var(--ig-body-1-letter-spacing); - text-transform: var(--ig-body-1-text-transform); - margin-top: var(--ig-body-1-margin-top); - margin-bottom: var(--ig-body-1-margin-bottom); -} -.ig-typography .ig-typography__body-2 { - font-family: var(--ig-body-2-font-family, var(--ig-font-family)); - font-size: var(--ig-body-2-font-size); - font-weight: var(--ig-body-2-font-weight); - font-style: var(--ig-body-2-font-style); - line-height: var(--ig-body-2-line-height); - letter-spacing: var(--ig-body-2-letter-spacing); - text-transform: var(--ig-body-2-text-transform); - margin-top: var(--ig-body-2-margin-top); - margin-bottom: var(--ig-body-2-margin-bottom); -} -.ig-typography .ig-typography__button { - font-family: var(--ig-button-font-family, var(--ig-font-family)); - font-size: var(--ig-button-font-size); - font-weight: var(--ig-button-font-weight); - font-style: var(--ig-button-font-style); - line-height: var(--ig-button-line-height); - letter-spacing: var(--ig-button-letter-spacing); - text-transform: var(--ig-button-text-transform); - margin-top: var(--ig-button-margin-top); - margin-bottom: var(--ig-button-margin-bottom); -} -.ig-typography .ig-typography__caption { - font-family: var(--ig-caption-font-family, var(--ig-font-family)); - font-size: var(--ig-caption-font-size); - font-weight: var(--ig-caption-font-weight); - font-style: var(--ig-caption-font-style); - line-height: var(--ig-caption-line-height); - letter-spacing: var(--ig-caption-letter-spacing); - text-transform: var(--ig-caption-text-transform); - margin-top: var(--ig-caption-margin-top); - margin-bottom: var(--ig-caption-margin-bottom); -} -.ig-typography .ig-typography__overline { - font-family: var(--ig-overline-font-family, var(--ig-font-family)); - font-size: var(--ig-overline-font-size); - font-weight: var(--ig-overline-font-weight); - font-style: var(--ig-overline-font-style); - line-height: var(--ig-overline-line-height); - letter-spacing: var(--ig-overline-letter-spacing); - text-transform: var(--ig-overline-text-transform); - margin-top: var(--ig-overline-margin-top); - margin-bottom: var(--ig-overline-margin-bottom); -} - -/* END_OUTPUT */ -/* EXPECTED */ -.ig-typography .ig-typography__h1 { - font-family: var(--ig-h1-font-family, var(--ig-font-family)); - font-size: var(--ig-h1-font-size); - font-weight: var(--ig-h1-font-weight); - font-style: var(--ig-h1-font-style); - line-height: var(--ig-h1-line-height); - letter-spacing: var(--ig-h1-letter-spacing); - text-transform: var(--ig-h1-text-transform); - margin-top: var(--ig-h1-margin-top); - margin-bottom: var(--ig-h1-margin-bottom); -} - -.ig-typography .ig-typography__h2 { - font-family: var(--ig-h2-font-family, var(--ig-font-family)); - font-size: var(--ig-h2-font-size); - font-weight: var(--ig-h2-font-weight); - font-style: var(--ig-h2-font-style); - line-height: var(--ig-h2-line-height); - letter-spacing: var(--ig-h2-letter-spacing); - text-transform: var(--ig-h2-text-transform); - margin-top: var(--ig-h2-margin-top); - margin-bottom: var(--ig-h2-margin-bottom); -} - -.ig-typography .ig-typography__h3 { - font-family: var(--ig-h3-font-family, var(--ig-font-family)); - font-size: var(--ig-h3-font-size); - font-weight: var(--ig-h3-font-weight); - font-style: var(--ig-h3-font-style); - line-height: var(--ig-h3-line-height); - letter-spacing: var(--ig-h3-letter-spacing); - text-transform: var(--ig-h3-text-transform); - margin-top: var(--ig-h3-margin-top); - margin-bottom: var(--ig-h3-margin-bottom); -} - -.ig-typography .ig-typography__h4 { - font-family: var(--ig-h4-font-family, var(--ig-font-family)); - font-size: var(--ig-h4-font-size); - font-weight: var(--ig-h4-font-weight); - font-style: var(--ig-h4-font-style); - line-height: var(--ig-h4-line-height); - letter-spacing: var(--ig-h4-letter-spacing); - text-transform: var(--ig-h4-text-transform); - margin-top: var(--ig-h4-margin-top); - margin-bottom: var(--ig-h4-margin-bottom); -} - -.ig-typography .ig-typography__h5 { - font-family: var(--ig-h5-font-family, var(--ig-font-family)); - font-size: var(--ig-h5-font-size); - font-weight: var(--ig-h5-font-weight); - font-style: var(--ig-h5-font-style); - line-height: var(--ig-h5-line-height); - letter-spacing: var(--ig-h5-letter-spacing); - text-transform: var(--ig-h5-text-transform); - margin-top: var(--ig-h5-margin-top); - margin-bottom: var(--ig-h5-margin-bottom); -} - -.ig-typography .ig-typography__h6 { - font-family: var(--ig-h6-font-family, var(--ig-font-family)); - font-size: var(--ig-h6-font-size); - font-weight: var(--ig-h6-font-weight); - font-style: var(--ig-h6-font-style); - line-height: var(--ig-h6-line-height); - letter-spacing: var(--ig-h6-letter-spacing); - text-transform: var(--ig-h6-text-transform); - margin-top: var(--ig-h6-margin-top); - margin-bottom: var(--ig-h6-margin-bottom); -} - -.ig-typography .ig-typography__subtitle-1 { - font-family: var(--ig-subtitle-1-font-family, var(--ig-font-family)); - font-size: var(--ig-subtitle-1-font-size); - font-weight: var(--ig-subtitle-1-font-weight); - font-style: var(--ig-subtitle-1-font-style); - line-height: var(--ig-subtitle-1-line-height); - letter-spacing: var(--ig-subtitle-1-letter-spacing); - text-transform: var(--ig-subtitle-1-text-transform); - margin-top: var(--ig-subtitle-1-margin-top); - margin-bottom: var(--ig-subtitle-1-margin-bottom); -} - -.ig-typography .ig-typography__subtitle-2 { - font-family: var(--ig-subtitle-2-font-family, var(--ig-font-family)); - font-size: var(--ig-subtitle-2-font-size); - font-weight: var(--ig-subtitle-2-font-weight); - font-style: var(--ig-subtitle-2-font-style); - line-height: var(--ig-subtitle-2-line-height); - letter-spacing: var(--ig-subtitle-2-letter-spacing); - text-transform: var(--ig-subtitle-2-text-transform); - margin-top: var(--ig-subtitle-2-margin-top); - margin-bottom: var(--ig-subtitle-2-margin-bottom); -} - -.ig-typography .ig-typography__body-1 { - font-family: var(--ig-body-1-font-family, var(--ig-font-family)); - font-size: var(--ig-body-1-font-size); - font-weight: var(--ig-body-1-font-weight); - font-style: var(--ig-body-1-font-style); - line-height: var(--ig-body-1-line-height); - letter-spacing: var(--ig-body-1-letter-spacing); - text-transform: var(--ig-body-1-text-transform); - margin-top: var(--ig-body-1-margin-top); - margin-bottom: var(--ig-body-1-margin-bottom); -} - -.ig-typography .ig-typography__body-2 { - font-family: var(--ig-body-2-font-family, var(--ig-font-family)); - font-size: var(--ig-body-2-font-size); - font-weight: var(--ig-body-2-font-weight); - font-style: var(--ig-body-2-font-style); - line-height: var(--ig-body-2-line-height); - letter-spacing: var(--ig-body-2-letter-spacing); - text-transform: var(--ig-body-2-text-transform); - margin-top: var(--ig-body-2-margin-top); - margin-bottom: var(--ig-body-2-margin-bottom); -} - -.ig-typography .ig-typography__button { - font-family: var(--ig-button-font-family, var(--ig-font-family)); - font-size: var(--ig-button-font-size); - font-weight: var(--ig-button-font-weight); - font-style: var(--ig-button-font-style); - line-height: var(--ig-button-line-height); - letter-spacing: var(--ig-button-letter-spacing); - text-transform: var(--ig-button-text-transform); - margin-top: var(--ig-button-margin-top); - margin-bottom: var(--ig-button-margin-bottom); -} - -.ig-typography .ig-typography__caption { - font-family: var(--ig-caption-font-family, var(--ig-font-family)); - font-size: var(--ig-caption-font-size); - font-weight: var(--ig-caption-font-weight); - font-style: var(--ig-caption-font-style); - line-height: var(--ig-caption-line-height); - letter-spacing: var(--ig-caption-letter-spacing); - text-transform: var(--ig-caption-text-transform); - margin-top: var(--ig-caption-margin-top); - margin-bottom: var(--ig-caption-margin-bottom); -} - -.ig-typography .ig-typography__overline { - font-family: var(--ig-overline-font-family, var(--ig-font-family)); - font-size: var(--ig-overline-font-size); - font-weight: var(--ig-overline-font-weight); - font-style: var(--ig-overline-font-style); - line-height: var(--ig-overline-line-height); - letter-spacing: var(--ig-overline-letter-spacing); - text-transform: var(--ig-overline-text-transform); - margin-top: var(--ig-overline-margin-top); - margin-bottom: var(--ig-overline-margin-bottom); -} - -/* END_EXPECTED */ -/* END_ASSERT */ -/* */ -/* Test: should include CSS headeing and paragraph style rules for mapped categories in a type scale, unwrapped by default */ -/* ASSERT: */ -/* OUTPUT */ -.test-output h1 { - font-family: var(--ig-h1-font-family, var(--ig-font-family)); - font-size: var(--ig-h1-font-size); - font-weight: var(--ig-h1-font-weight); - font-style: var(--ig-h1-font-style); - line-height: var(--ig-h1-line-height); - letter-spacing: var(--ig-h1-letter-spacing); - text-transform: var(--ig-h1-text-transform); - margin-top: var(--ig-h1-margin-top); - margin-bottom: var(--ig-h1-margin-bottom); -} -.test-output h2 { - font-family: var(--ig-h2-font-family, var(--ig-font-family)); - font-size: var(--ig-h2-font-size); - font-weight: var(--ig-h2-font-weight); - font-style: var(--ig-h2-font-style); - line-height: var(--ig-h2-line-height); - letter-spacing: var(--ig-h2-letter-spacing); - text-transform: var(--ig-h2-text-transform); - margin-top: var(--ig-h2-margin-top); - margin-bottom: var(--ig-h2-margin-bottom); -} -.test-output h3 { - font-family: var(--ig-h3-font-family, var(--ig-font-family)); - font-size: var(--ig-h3-font-size); - font-weight: var(--ig-h3-font-weight); - font-style: var(--ig-h3-font-style); - line-height: var(--ig-h3-line-height); - letter-spacing: var(--ig-h3-letter-spacing); - text-transform: var(--ig-h3-text-transform); - margin-top: var(--ig-h3-margin-top); - margin-bottom: var(--ig-h3-margin-bottom); -} -.test-output h4 { - font-family: var(--ig-h4-font-family, var(--ig-font-family)); - font-size: var(--ig-h4-font-size); - font-weight: var(--ig-h4-font-weight); - font-style: var(--ig-h4-font-style); - line-height: var(--ig-h4-line-height); - letter-spacing: var(--ig-h4-letter-spacing); - text-transform: var(--ig-h4-text-transform); - margin-top: var(--ig-h4-margin-top); - margin-bottom: var(--ig-h4-margin-bottom); -} -.test-output h5 { - font-family: var(--ig-h5-font-family, var(--ig-font-family)); - font-size: var(--ig-h5-font-size); - font-weight: var(--ig-h5-font-weight); - font-style: var(--ig-h5-font-style); - line-height: var(--ig-h5-line-height); - letter-spacing: var(--ig-h5-letter-spacing); - text-transform: var(--ig-h5-text-transform); - margin-top: var(--ig-h5-margin-top); - margin-bottom: var(--ig-h5-margin-bottom); -} -.test-output h6 { - font-family: var(--ig-h6-font-family, var(--ig-font-family)); - font-size: var(--ig-h6-font-size); - font-weight: var(--ig-h6-font-weight); - font-style: var(--ig-h6-font-style); - line-height: var(--ig-h6-line-height); - letter-spacing: var(--ig-h6-letter-spacing); - text-transform: var(--ig-h6-text-transform); - margin-top: var(--ig-h6-margin-top); - margin-bottom: var(--ig-h6-margin-bottom); -} -.test-output p { - font-family: var(--ig-body-1-font-family, var(--ig-font-family)); - font-size: var(--ig-body-1-font-size); - font-weight: var(--ig-body-1-font-weight); - font-style: var(--ig-body-1-font-style); - line-height: var(--ig-body-1-line-height); - letter-spacing: var(--ig-body-1-letter-spacing); - text-transform: var(--ig-body-1-text-transform); - margin-top: var(--ig-body-1-margin-top); - margin-bottom: var(--ig-body-1-margin-bottom); -} - -/* END_OUTPUT */ -/* EXPECTED */ -.test-output h1 { - font-family: var(--ig-h1-font-family, var(--ig-font-family)); - font-size: var(--ig-h1-font-size); - font-weight: var(--ig-h1-font-weight); - font-style: var(--ig-h1-font-style); - line-height: var(--ig-h1-line-height); - letter-spacing: var(--ig-h1-letter-spacing); - text-transform: var(--ig-h1-text-transform); - margin-top: var(--ig-h1-margin-top); - margin-bottom: var(--ig-h1-margin-bottom); -} -.test-output h2 { - font-family: var(--ig-h2-font-family, var(--ig-font-family)); - font-size: var(--ig-h2-font-size); - font-weight: var(--ig-h2-font-weight); - font-style: var(--ig-h2-font-style); - line-height: var(--ig-h2-line-height); - letter-spacing: var(--ig-h2-letter-spacing); - text-transform: var(--ig-h2-text-transform); - margin-top: var(--ig-h2-margin-top); - margin-bottom: var(--ig-h2-margin-bottom); -} -.test-output h3 { - font-family: var(--ig-h3-font-family, var(--ig-font-family)); - font-size: var(--ig-h3-font-size); - font-weight: var(--ig-h3-font-weight); - font-style: var(--ig-h3-font-style); - line-height: var(--ig-h3-line-height); - letter-spacing: var(--ig-h3-letter-spacing); - text-transform: var(--ig-h3-text-transform); - margin-top: var(--ig-h3-margin-top); - margin-bottom: var(--ig-h3-margin-bottom); -} -.test-output h4 { - font-family: var(--ig-h4-font-family, var(--ig-font-family)); - font-size: var(--ig-h4-font-size); - font-weight: var(--ig-h4-font-weight); - font-style: var(--ig-h4-font-style); - line-height: var(--ig-h4-line-height); - letter-spacing: var(--ig-h4-letter-spacing); - text-transform: var(--ig-h4-text-transform); - margin-top: var(--ig-h4-margin-top); - margin-bottom: var(--ig-h4-margin-bottom); -} -.test-output h5 { - font-family: var(--ig-h5-font-family, var(--ig-font-family)); - font-size: var(--ig-h5-font-size); - font-weight: var(--ig-h5-font-weight); - font-style: var(--ig-h5-font-style); - line-height: var(--ig-h5-line-height); - letter-spacing: var(--ig-h5-letter-spacing); - text-transform: var(--ig-h5-text-transform); - margin-top: var(--ig-h5-margin-top); - margin-bottom: var(--ig-h5-margin-bottom); -} -.test-output h6 { - font-family: var(--ig-h6-font-family, var(--ig-font-family)); - font-size: var(--ig-h6-font-size); - font-weight: var(--ig-h6-font-weight); - font-style: var(--ig-h6-font-style); - line-height: var(--ig-h6-line-height); - letter-spacing: var(--ig-h6-letter-spacing); - text-transform: var(--ig-h6-text-transform); - margin-top: var(--ig-h6-margin-top); - margin-bottom: var(--ig-h6-margin-bottom); -} -.test-output p { - font-family: var(--ig-body-1-font-family, var(--ig-font-family)); - font-size: var(--ig-body-1-font-size); - font-weight: var(--ig-body-1-font-weight); - font-style: var(--ig-body-1-font-style); - line-height: var(--ig-body-1-line-height); - letter-spacing: var(--ig-body-1-letter-spacing); - text-transform: var(--ig-body-1-text-transform); - margin-top: var(--ig-body-1-margin-top); - margin-bottom: var(--ig-body-1-margin-bottom); -} - -/* END_EXPECTED */ -/* END_ASSERT */ -/* */ -/* Test: should wrap CSS heading and paragraph style rules in :where():not() when $allow-exclusion is true */ -/* ASSERT: */ -/* OUTPUT */ -.test-output :where(h1):not(:where([data-no-typography], [data-no-typography] *)) { - font-family: var(--ig-h1-font-family, var(--ig-font-family)); - font-size: var(--ig-h1-font-size); - font-weight: var(--ig-h1-font-weight); - font-style: var(--ig-h1-font-style); - line-height: var(--ig-h1-line-height); - letter-spacing: var(--ig-h1-letter-spacing); - text-transform: var(--ig-h1-text-transform); - margin-top: var(--ig-h1-margin-top); - margin-bottom: var(--ig-h1-margin-bottom); -} -.test-output :where(h2):not(:where([data-no-typography], [data-no-typography] *)) { - font-family: var(--ig-h2-font-family, var(--ig-font-family)); - font-size: var(--ig-h2-font-size); - font-weight: var(--ig-h2-font-weight); - font-style: var(--ig-h2-font-style); - line-height: var(--ig-h2-line-height); - letter-spacing: var(--ig-h2-letter-spacing); - text-transform: var(--ig-h2-text-transform); - margin-top: var(--ig-h2-margin-top); - margin-bottom: var(--ig-h2-margin-bottom); -} -.test-output :where(h3):not(:where([data-no-typography], [data-no-typography] *)) { - font-family: var(--ig-h3-font-family, var(--ig-font-family)); - font-size: var(--ig-h3-font-size); - font-weight: var(--ig-h3-font-weight); - font-style: var(--ig-h3-font-style); - line-height: var(--ig-h3-line-height); - letter-spacing: var(--ig-h3-letter-spacing); - text-transform: var(--ig-h3-text-transform); - margin-top: var(--ig-h3-margin-top); - margin-bottom: var(--ig-h3-margin-bottom); -} -.test-output :where(h4):not(:where([data-no-typography], [data-no-typography] *)) { - font-family: var(--ig-h4-font-family, var(--ig-font-family)); - font-size: var(--ig-h4-font-size); - font-weight: var(--ig-h4-font-weight); - font-style: var(--ig-h4-font-style); - line-height: var(--ig-h4-line-height); - letter-spacing: var(--ig-h4-letter-spacing); - text-transform: var(--ig-h4-text-transform); - margin-top: var(--ig-h4-margin-top); - margin-bottom: var(--ig-h4-margin-bottom); -} -.test-output :where(h5):not(:where([data-no-typography], [data-no-typography] *)) { - font-family: var(--ig-h5-font-family, var(--ig-font-family)); - font-size: var(--ig-h5-font-size); - font-weight: var(--ig-h5-font-weight); - font-style: var(--ig-h5-font-style); - line-height: var(--ig-h5-line-height); - letter-spacing: var(--ig-h5-letter-spacing); - text-transform: var(--ig-h5-text-transform); - margin-top: var(--ig-h5-margin-top); - margin-bottom: var(--ig-h5-margin-bottom); -} -.test-output :where(h6):not(:where([data-no-typography], [data-no-typography] *)) { - font-family: var(--ig-h6-font-family, var(--ig-font-family)); - font-size: var(--ig-h6-font-size); - font-weight: var(--ig-h6-font-weight); - font-style: var(--ig-h6-font-style); - line-height: var(--ig-h6-line-height); - letter-spacing: var(--ig-h6-letter-spacing); - text-transform: var(--ig-h6-text-transform); - margin-top: var(--ig-h6-margin-top); - margin-bottom: var(--ig-h6-margin-bottom); -} -.test-output :where(p):not(:where([data-no-typography], [data-no-typography] *)) { - font-family: var(--ig-body-1-font-family, var(--ig-font-family)); - font-size: var(--ig-body-1-font-size); - font-weight: var(--ig-body-1-font-weight); - font-style: var(--ig-body-1-font-style); - line-height: var(--ig-body-1-line-height); - letter-spacing: var(--ig-body-1-letter-spacing); - text-transform: var(--ig-body-1-text-transform); - margin-top: var(--ig-body-1-margin-top); - margin-bottom: var(--ig-body-1-margin-bottom); -} - -/* END_OUTPUT */ -/* EXPECTED */ -.test-output :where(h1):not(:where([data-no-typography], [data-no-typography] *)) { - font-family: var(--ig-h1-font-family, var(--ig-font-family)); - font-size: var(--ig-h1-font-size); - font-weight: var(--ig-h1-font-weight); - font-style: var(--ig-h1-font-style); - line-height: var(--ig-h1-line-height); - letter-spacing: var(--ig-h1-letter-spacing); - text-transform: var(--ig-h1-text-transform); - margin-top: var(--ig-h1-margin-top); - margin-bottom: var(--ig-h1-margin-bottom); -} -.test-output :where(h2):not(:where([data-no-typography], [data-no-typography] *)) { - font-family: var(--ig-h2-font-family, var(--ig-font-family)); - font-size: var(--ig-h2-font-size); - font-weight: var(--ig-h2-font-weight); - font-style: var(--ig-h2-font-style); - line-height: var(--ig-h2-line-height); - letter-spacing: var(--ig-h2-letter-spacing); - text-transform: var(--ig-h2-text-transform); - margin-top: var(--ig-h2-margin-top); - margin-bottom: var(--ig-h2-margin-bottom); -} -.test-output :where(h3):not(:where([data-no-typography], [data-no-typography] *)) { - font-family: var(--ig-h3-font-family, var(--ig-font-family)); - font-size: var(--ig-h3-font-size); - font-weight: var(--ig-h3-font-weight); - font-style: var(--ig-h3-font-style); - line-height: var(--ig-h3-line-height); - letter-spacing: var(--ig-h3-letter-spacing); - text-transform: var(--ig-h3-text-transform); - margin-top: var(--ig-h3-margin-top); - margin-bottom: var(--ig-h3-margin-bottom); -} -.test-output :where(h4):not(:where([data-no-typography], [data-no-typography] *)) { - font-family: var(--ig-h4-font-family, var(--ig-font-family)); - font-size: var(--ig-h4-font-size); - font-weight: var(--ig-h4-font-weight); - font-style: var(--ig-h4-font-style); - line-height: var(--ig-h4-line-height); - letter-spacing: var(--ig-h4-letter-spacing); - text-transform: var(--ig-h4-text-transform); - margin-top: var(--ig-h4-margin-top); - margin-bottom: var(--ig-h4-margin-bottom); -} -.test-output :where(h5):not(:where([data-no-typography], [data-no-typography] *)) { - font-family: var(--ig-h5-font-family, var(--ig-font-family)); - font-size: var(--ig-h5-font-size); - font-weight: var(--ig-h5-font-weight); - font-style: var(--ig-h5-font-style); - line-height: var(--ig-h5-line-height); - letter-spacing: var(--ig-h5-letter-spacing); - text-transform: var(--ig-h5-text-transform); - margin-top: var(--ig-h5-margin-top); - margin-bottom: var(--ig-h5-margin-bottom); -} -.test-output :where(h6):not(:where([data-no-typography], [data-no-typography] *)) { - font-family: var(--ig-h6-font-family, var(--ig-font-family)); - font-size: var(--ig-h6-font-size); - font-weight: var(--ig-h6-font-weight); - font-style: var(--ig-h6-font-style); - line-height: var(--ig-h6-line-height); - letter-spacing: var(--ig-h6-letter-spacing); - text-transform: var(--ig-h6-text-transform); - margin-top: var(--ig-h6-margin-top); - margin-bottom: var(--ig-h6-margin-bottom); -} -.test-output :where(p):not(:where([data-no-typography], [data-no-typography] *)) { - font-family: var(--ig-body-1-font-family, var(--ig-font-family)); - font-size: var(--ig-body-1-font-size); - font-weight: var(--ig-body-1-font-weight); - font-style: var(--ig-body-1-font-style); - line-height: var(--ig-body-1-line-height); - letter-spacing: var(--ig-body-1-letter-spacing); - text-transform: var(--ig-body-1-text-transform); - margin-top: var(--ig-body-1-margin-top); - margin-bottom: var(--ig-body-1-margin-bottom); -} - -/* END_EXPECTED */ -/* END_ASSERT */ -/* */ -/* Test: should include typography variables in the :root scope */ -/* ASSERT: */ -/* OUTPUT */ -:root { - --ig-font-family: Roboto, sans-serif; - --ig-base-font-size: 16px; - --ig-h1-font-size: 96px; - --ig-h1-font-weight: normal; - --ig-h1-font-style: normal; - --ig-h1-line-height: normal; - --ig-h1-letter-spacing: normal; - --ig-h1-text-transform: none; - --ig-h1-margin-top: 0; - --ig-h1-margin-bottom: 0; - --ig-h2-font-size: 70px; - --ig-h2-font-weight: normal; - --ig-h2-font-style: normal; - --ig-h2-line-height: normal; - --ig-h2-letter-spacing: normal; - --ig-h2-text-transform: none; - --ig-h2-margin-top: 0; - --ig-h2-margin-bottom: 0; - --ig-h3-font-size: 40px; - --ig-h3-font-weight: normal; - --ig-h3-font-style: normal; - --ig-h3-line-height: normal; - --ig-h3-letter-spacing: normal; - --ig-h3-text-transform: none; - --ig-h3-margin-top: 0; - --ig-h3-margin-bottom: 0; - --ig-h4-font-size: 30px; - --ig-h4-font-weight: normal; - --ig-h4-font-style: normal; - --ig-h4-line-height: normal; - --ig-h4-letter-spacing: normal; - --ig-h4-text-transform: none; - --ig-h4-margin-top: 0; - --ig-h4-margin-bottom: 0; - --ig-h5-font-size: 20px; - --ig-h5-font-weight: normal; - --ig-h5-font-style: normal; - --ig-h5-line-height: normal; - --ig-h5-letter-spacing: normal; - --ig-h5-text-transform: none; - --ig-h5-margin-top: 0; - --ig-h5-margin-bottom: 0; - --ig-h6-font-size: 10px; - --ig-h6-font-weight: normal; - --ig-h6-font-style: normal; - --ig-h6-line-height: normal; - --ig-h6-letter-spacing: normal; - --ig-h6-text-transform: none; - --ig-h6-margin-top: 0; - --ig-h6-margin-bottom: 0; - --ig-subtitle-1-font-size: 96px; - --ig-subtitle-1-font-weight: normal; - --ig-subtitle-1-font-style: normal; - --ig-subtitle-1-line-height: normal; - --ig-subtitle-1-letter-spacing: normal; - --ig-subtitle-1-text-transform: none; - --ig-subtitle-1-margin-top: 0; - --ig-subtitle-1-margin-bottom: 0; - --ig-subtitle-2-font-size: 70px; - --ig-subtitle-2-font-weight: normal; - --ig-subtitle-2-font-style: normal; - --ig-subtitle-2-line-height: normal; - --ig-subtitle-2-letter-spacing: normal; - --ig-subtitle-2-text-transform: none; - --ig-subtitle-2-margin-top: 0; - --ig-subtitle-2-margin-bottom: 0; - --ig-body-1-font-size: 40px; - --ig-body-1-font-weight: normal; - --ig-body-1-font-style: normal; - --ig-body-1-line-height: normal; - --ig-body-1-letter-spacing: normal; - --ig-body-1-text-transform: none; - --ig-body-1-margin-top: 0; - --ig-body-1-margin-bottom: 0; - --ig-body-2-font-size: 30px; - --ig-body-2-font-weight: normal; - --ig-body-2-font-style: normal; - --ig-body-2-line-height: normal; - --ig-body-2-letter-spacing: normal; - --ig-body-2-text-transform: none; - --ig-body-2-margin-top: 0; - --ig-body-2-margin-bottom: 0; - --ig-button-font-size: 20px; - --ig-button-font-weight: normal; - --ig-button-font-style: normal; - --ig-button-line-height: normal; - --ig-button-letter-spacing: normal; - --ig-button-text-transform: none; - --ig-button-margin-top: 0; - --ig-button-margin-bottom: 0; - --ig-caption-font-size: 10px; - --ig-caption-font-weight: normal; - --ig-caption-font-style: normal; - --ig-caption-line-height: normal; - --ig-caption-letter-spacing: normal; - --ig-caption-text-transform: none; - --ig-caption-margin-top: 0; - --ig-caption-margin-bottom: 0; - --ig-overline-font-size: 10px; - --ig-overline-font-weight: normal; - --ig-overline-font-style: normal; - --ig-overline-line-height: normal; - --ig-overline-letter-spacing: normal; - --ig-overline-text-transform: none; - --ig-overline-margin-top: 0; - --ig-overline-margin-bottom: 0; -} - -.ig-typography h1 { - font-family: var(--ig-h1-font-family, var(--ig-font-family)); - font-size: var(--ig-h1-font-size); - font-weight: var(--ig-h1-font-weight); - font-style: var(--ig-h1-font-style); - line-height: var(--ig-h1-line-height); - letter-spacing: var(--ig-h1-letter-spacing); - text-transform: var(--ig-h1-text-transform); - margin-top: var(--ig-h1-margin-top); - margin-bottom: var(--ig-h1-margin-bottom); -} -.ig-typography h2 { - font-family: var(--ig-h2-font-family, var(--ig-font-family)); - font-size: var(--ig-h2-font-size); - font-weight: var(--ig-h2-font-weight); - font-style: var(--ig-h2-font-style); - line-height: var(--ig-h2-line-height); - letter-spacing: var(--ig-h2-letter-spacing); - text-transform: var(--ig-h2-text-transform); - margin-top: var(--ig-h2-margin-top); - margin-bottom: var(--ig-h2-margin-bottom); -} -.ig-typography h3 { - font-family: var(--ig-h3-font-family, var(--ig-font-family)); - font-size: var(--ig-h3-font-size); - font-weight: var(--ig-h3-font-weight); - font-style: var(--ig-h3-font-style); - line-height: var(--ig-h3-line-height); - letter-spacing: var(--ig-h3-letter-spacing); - text-transform: var(--ig-h3-text-transform); - margin-top: var(--ig-h3-margin-top); - margin-bottom: var(--ig-h3-margin-bottom); -} -.ig-typography h4 { - font-family: var(--ig-h4-font-family, var(--ig-font-family)); - font-size: var(--ig-h4-font-size); - font-weight: var(--ig-h4-font-weight); - font-style: var(--ig-h4-font-style); - line-height: var(--ig-h4-line-height); - letter-spacing: var(--ig-h4-letter-spacing); - text-transform: var(--ig-h4-text-transform); - margin-top: var(--ig-h4-margin-top); - margin-bottom: var(--ig-h4-margin-bottom); -} -.ig-typography h5 { - font-family: var(--ig-h5-font-family, var(--ig-font-family)); - font-size: var(--ig-h5-font-size); - font-weight: var(--ig-h5-font-weight); - font-style: var(--ig-h5-font-style); - line-height: var(--ig-h5-line-height); - letter-spacing: var(--ig-h5-letter-spacing); - text-transform: var(--ig-h5-text-transform); - margin-top: var(--ig-h5-margin-top); - margin-bottom: var(--ig-h5-margin-bottom); -} -.ig-typography h6 { - font-family: var(--ig-h6-font-family, var(--ig-font-family)); - font-size: var(--ig-h6-font-size); - font-weight: var(--ig-h6-font-weight); - font-style: var(--ig-h6-font-style); - line-height: var(--ig-h6-line-height); - letter-spacing: var(--ig-h6-letter-spacing); - text-transform: var(--ig-h6-text-transform); - margin-top: var(--ig-h6-margin-top); - margin-bottom: var(--ig-h6-margin-bottom); -} -.ig-typography p { - font-family: var(--ig-body-1-font-family, var(--ig-font-family)); - font-size: var(--ig-body-1-font-size); - font-weight: var(--ig-body-1-font-weight); - font-style: var(--ig-body-1-font-style); - line-height: var(--ig-body-1-line-height); - letter-spacing: var(--ig-body-1-letter-spacing); - text-transform: var(--ig-body-1-text-transform); - margin-top: var(--ig-body-1-margin-top); - margin-bottom: var(--ig-body-1-margin-bottom); -} -.ig-typography .ig-typography__h1 { - font-family: var(--ig-h1-font-family, var(--ig-font-family)); - font-size: var(--ig-h1-font-size); - font-weight: var(--ig-h1-font-weight); - font-style: var(--ig-h1-font-style); - line-height: var(--ig-h1-line-height); - letter-spacing: var(--ig-h1-letter-spacing); - text-transform: var(--ig-h1-text-transform); - margin-top: var(--ig-h1-margin-top); - margin-bottom: var(--ig-h1-margin-bottom); -} -.ig-typography .ig-typography__h2 { - font-family: var(--ig-h2-font-family, var(--ig-font-family)); - font-size: var(--ig-h2-font-size); - font-weight: var(--ig-h2-font-weight); - font-style: var(--ig-h2-font-style); - line-height: var(--ig-h2-line-height); - letter-spacing: var(--ig-h2-letter-spacing); - text-transform: var(--ig-h2-text-transform); - margin-top: var(--ig-h2-margin-top); - margin-bottom: var(--ig-h2-margin-bottom); -} -.ig-typography .ig-typography__h3 { - font-family: var(--ig-h3-font-family, var(--ig-font-family)); - font-size: var(--ig-h3-font-size); - font-weight: var(--ig-h3-font-weight); - font-style: var(--ig-h3-font-style); - line-height: var(--ig-h3-line-height); - letter-spacing: var(--ig-h3-letter-spacing); - text-transform: var(--ig-h3-text-transform); - margin-top: var(--ig-h3-margin-top); - margin-bottom: var(--ig-h3-margin-bottom); -} -.ig-typography .ig-typography__h4 { - font-family: var(--ig-h4-font-family, var(--ig-font-family)); - font-size: var(--ig-h4-font-size); - font-weight: var(--ig-h4-font-weight); - font-style: var(--ig-h4-font-style); - line-height: var(--ig-h4-line-height); - letter-spacing: var(--ig-h4-letter-spacing); - text-transform: var(--ig-h4-text-transform); - margin-top: var(--ig-h4-margin-top); - margin-bottom: var(--ig-h4-margin-bottom); -} -.ig-typography .ig-typography__h5 { - font-family: var(--ig-h5-font-family, var(--ig-font-family)); - font-size: var(--ig-h5-font-size); - font-weight: var(--ig-h5-font-weight); - font-style: var(--ig-h5-font-style); - line-height: var(--ig-h5-line-height); - letter-spacing: var(--ig-h5-letter-spacing); - text-transform: var(--ig-h5-text-transform); - margin-top: var(--ig-h5-margin-top); - margin-bottom: var(--ig-h5-margin-bottom); -} -.ig-typography .ig-typography__h6 { - font-family: var(--ig-h6-font-family, var(--ig-font-family)); - font-size: var(--ig-h6-font-size); - font-weight: var(--ig-h6-font-weight); - font-style: var(--ig-h6-font-style); - line-height: var(--ig-h6-line-height); - letter-spacing: var(--ig-h6-letter-spacing); - text-transform: var(--ig-h6-text-transform); - margin-top: var(--ig-h6-margin-top); - margin-bottom: var(--ig-h6-margin-bottom); -} -.ig-typography .ig-typography__subtitle-1 { - font-family: var(--ig-subtitle-1-font-family, var(--ig-font-family)); - font-size: var(--ig-subtitle-1-font-size); - font-weight: var(--ig-subtitle-1-font-weight); - font-style: var(--ig-subtitle-1-font-style); - line-height: var(--ig-subtitle-1-line-height); - letter-spacing: var(--ig-subtitle-1-letter-spacing); - text-transform: var(--ig-subtitle-1-text-transform); - margin-top: var(--ig-subtitle-1-margin-top); - margin-bottom: var(--ig-subtitle-1-margin-bottom); -} -.ig-typography .ig-typography__subtitle-2 { - font-family: var(--ig-subtitle-2-font-family, var(--ig-font-family)); - font-size: var(--ig-subtitle-2-font-size); - font-weight: var(--ig-subtitle-2-font-weight); - font-style: var(--ig-subtitle-2-font-style); - line-height: var(--ig-subtitle-2-line-height); - letter-spacing: var(--ig-subtitle-2-letter-spacing); - text-transform: var(--ig-subtitle-2-text-transform); - margin-top: var(--ig-subtitle-2-margin-top); - margin-bottom: var(--ig-subtitle-2-margin-bottom); -} -.ig-typography .ig-typography__body-1 { - font-family: var(--ig-body-1-font-family, var(--ig-font-family)); - font-size: var(--ig-body-1-font-size); - font-weight: var(--ig-body-1-font-weight); - font-style: var(--ig-body-1-font-style); - line-height: var(--ig-body-1-line-height); - letter-spacing: var(--ig-body-1-letter-spacing); - text-transform: var(--ig-body-1-text-transform); - margin-top: var(--ig-body-1-margin-top); - margin-bottom: var(--ig-body-1-margin-bottom); -} -.ig-typography .ig-typography__body-2 { - font-family: var(--ig-body-2-font-family, var(--ig-font-family)); - font-size: var(--ig-body-2-font-size); - font-weight: var(--ig-body-2-font-weight); - font-style: var(--ig-body-2-font-style); - line-height: var(--ig-body-2-line-height); - letter-spacing: var(--ig-body-2-letter-spacing); - text-transform: var(--ig-body-2-text-transform); - margin-top: var(--ig-body-2-margin-top); - margin-bottom: var(--ig-body-2-margin-bottom); -} -.ig-typography .ig-typography__button { - font-family: var(--ig-button-font-family, var(--ig-font-family)); - font-size: var(--ig-button-font-size); - font-weight: var(--ig-button-font-weight); - font-style: var(--ig-button-font-style); - line-height: var(--ig-button-line-height); - letter-spacing: var(--ig-button-letter-spacing); - text-transform: var(--ig-button-text-transform); - margin-top: var(--ig-button-margin-top); - margin-bottom: var(--ig-button-margin-bottom); -} -.ig-typography .ig-typography__caption { - font-family: var(--ig-caption-font-family, var(--ig-font-family)); - font-size: var(--ig-caption-font-size); - font-weight: var(--ig-caption-font-weight); - font-style: var(--ig-caption-font-style); - line-height: var(--ig-caption-line-height); - letter-spacing: var(--ig-caption-letter-spacing); - text-transform: var(--ig-caption-text-transform); - margin-top: var(--ig-caption-margin-top); - margin-bottom: var(--ig-caption-margin-bottom); -} -.ig-typography .ig-typography__overline { - font-family: var(--ig-overline-font-family, var(--ig-font-family)); - font-size: var(--ig-overline-font-size); - font-weight: var(--ig-overline-font-weight); - font-style: var(--ig-overline-font-style); - line-height: var(--ig-overline-line-height); - letter-spacing: var(--ig-overline-letter-spacing); - text-transform: var(--ig-overline-text-transform); - margin-top: var(--ig-overline-margin-top); - margin-bottom: var(--ig-overline-margin-bottom); -} - -/* END_OUTPUT */ -/* CONTAINED */ -:root { - --ig-font-family: Roboto, sans-serif; - --ig-h1-font-size: 96px; - --ig-h1-font-weight: normal; - --ig-h1-font-style: normal; - --ig-h1-line-height: normal; - --ig-h1-letter-spacing: normal; - --ig-h1-text-transform: none; - --ig-h1-margin-top: 0; - --ig-h1-margin-bottom: 0; - --ig-h2-font-size: 70px; - --ig-h2-font-weight: normal; - --ig-h2-font-style: normal; - --ig-h2-line-height: normal; - --ig-h2-letter-spacing: normal; - --ig-h2-text-transform: none; - --ig-h2-margin-top: 0; - --ig-h2-margin-bottom: 0; - --ig-h3-font-size: 40px; - --ig-h3-font-weight: normal; - --ig-h3-font-style: normal; - --ig-h3-line-height: normal; - --ig-h3-letter-spacing: normal; - --ig-h3-text-transform: none; - --ig-h3-margin-top: 0; - --ig-h3-margin-bottom: 0; - --ig-h4-font-size: 30px; - --ig-h4-font-weight: normal; - --ig-h4-font-style: normal; - --ig-h4-line-height: normal; - --ig-h4-letter-spacing: normal; - --ig-h4-text-transform: none; - --ig-h4-margin-top: 0; - --ig-h4-margin-bottom: 0; - --ig-h5-font-size: 20px; - --ig-h5-font-weight: normal; - --ig-h5-font-style: normal; - --ig-h5-line-height: normal; - --ig-h5-letter-spacing: normal; - --ig-h5-text-transform: none; - --ig-h5-margin-top: 0; - --ig-h5-margin-bottom: 0; - --ig-h6-font-size: 10px; - --ig-h6-font-weight: normal; - --ig-h6-font-style: normal; - --ig-h6-line-height: normal; - --ig-h6-letter-spacing: normal; - --ig-h6-text-transform: none; - --ig-h6-margin-top: 0; - --ig-h6-margin-bottom: 0; - --ig-subtitle-1-font-size: 96px; - --ig-subtitle-1-font-weight: normal; - --ig-subtitle-1-font-style: normal; - --ig-subtitle-1-line-height: normal; - --ig-subtitle-1-letter-spacing: normal; - --ig-subtitle-1-text-transform: none; - --ig-subtitle-1-margin-top: 0; - --ig-subtitle-1-margin-bottom: 0; - --ig-subtitle-2-font-size: 70px; - --ig-subtitle-2-font-weight: normal; - --ig-subtitle-2-font-style: normal; - --ig-subtitle-2-line-height: normal; - --ig-subtitle-2-letter-spacing: normal; - --ig-subtitle-2-text-transform: none; - --ig-subtitle-2-margin-top: 0; - --ig-subtitle-2-margin-bottom: 0; - --ig-body-1-font-size: 40px; - --ig-body-1-font-weight: normal; - --ig-body-1-font-style: normal; - --ig-body-1-line-height: normal; - --ig-body-1-letter-spacing: normal; - --ig-body-1-text-transform: none; - --ig-body-1-margin-top: 0; - --ig-body-1-margin-bottom: 0; - --ig-body-2-font-size: 30px; - --ig-body-2-font-weight: normal; - --ig-body-2-font-style: normal; - --ig-body-2-line-height: normal; - --ig-body-2-letter-spacing: normal; - --ig-body-2-text-transform: none; - --ig-body-2-margin-top: 0; - --ig-body-2-margin-bottom: 0; - --ig-button-font-size: 20px; - --ig-button-font-weight: normal; - --ig-button-font-style: normal; - --ig-button-line-height: normal; - --ig-button-letter-spacing: normal; - --ig-button-text-transform: none; - --ig-button-margin-top: 0; - --ig-button-margin-bottom: 0; - --ig-caption-font-size: 10px; - --ig-caption-font-weight: normal; - --ig-caption-font-style: normal; - --ig-caption-line-height: normal; - --ig-caption-letter-spacing: normal; - --ig-caption-text-transform: none; - --ig-caption-margin-top: 0; - --ig-caption-margin-bottom: 0; - --ig-overline-font-size: 10px; - --ig-overline-font-weight: normal; - --ig-overline-font-style: normal; - --ig-overline-line-height: normal; - --ig-overline-letter-spacing: normal; - --ig-overline-text-transform: none; - --ig-overline-margin-top: 0; - --ig-overline-margin-bottom: 0; -} - -/* END_CONTAINED */ -/* END_ASSERT */ -/* */ -/* Test: should include typography variables for a parent scope */ -/* ASSERT: */ -/* OUTPUT */ -.test-output { - --ig-font-family: Roboto, sans-serif; - --ig-base-font-size: 16px; - --ig-h1-font-size: 96px; - --ig-h1-font-weight: normal; - --ig-h1-font-style: normal; - --ig-h1-line-height: normal; - --ig-h1-letter-spacing: normal; - --ig-h1-text-transform: none; - --ig-h1-margin-top: 0; - --ig-h1-margin-bottom: 0; - --ig-h2-font-size: 70px; - --ig-h2-font-weight: normal; - --ig-h2-font-style: normal; - --ig-h2-line-height: normal; - --ig-h2-letter-spacing: normal; - --ig-h2-text-transform: none; - --ig-h2-margin-top: 0; - --ig-h2-margin-bottom: 0; - --ig-h3-font-size: 40px; - --ig-h3-font-weight: normal; - --ig-h3-font-style: normal; - --ig-h3-line-height: normal; - --ig-h3-letter-spacing: normal; - --ig-h3-text-transform: none; - --ig-h3-margin-top: 0; - --ig-h3-margin-bottom: 0; - --ig-h4-font-size: 30px; - --ig-h4-font-weight: normal; - --ig-h4-font-style: normal; - --ig-h4-line-height: normal; - --ig-h4-letter-spacing: normal; - --ig-h4-text-transform: none; - --ig-h4-margin-top: 0; - --ig-h4-margin-bottom: 0; - --ig-h5-font-size: 20px; - --ig-h5-font-weight: normal; - --ig-h5-font-style: normal; - --ig-h5-line-height: normal; - --ig-h5-letter-spacing: normal; - --ig-h5-text-transform: none; - --ig-h5-margin-top: 0; - --ig-h5-margin-bottom: 0; - --ig-h6-font-size: 10px; - --ig-h6-font-weight: normal; - --ig-h6-font-style: normal; - --ig-h6-line-height: normal; - --ig-h6-letter-spacing: normal; - --ig-h6-text-transform: none; - --ig-h6-margin-top: 0; - --ig-h6-margin-bottom: 0; - --ig-subtitle-1-font-size: 96px; - --ig-subtitle-1-font-weight: normal; - --ig-subtitle-1-font-style: normal; - --ig-subtitle-1-line-height: normal; - --ig-subtitle-1-letter-spacing: normal; - --ig-subtitle-1-text-transform: none; - --ig-subtitle-1-margin-top: 0; - --ig-subtitle-1-margin-bottom: 0; - --ig-subtitle-2-font-size: 70px; - --ig-subtitle-2-font-weight: normal; - --ig-subtitle-2-font-style: normal; - --ig-subtitle-2-line-height: normal; - --ig-subtitle-2-letter-spacing: normal; - --ig-subtitle-2-text-transform: none; - --ig-subtitle-2-margin-top: 0; - --ig-subtitle-2-margin-bottom: 0; - --ig-body-1-font-size: 40px; - --ig-body-1-font-weight: normal; - --ig-body-1-font-style: normal; - --ig-body-1-line-height: normal; - --ig-body-1-letter-spacing: normal; - --ig-body-1-text-transform: none; - --ig-body-1-margin-top: 0; - --ig-body-1-margin-bottom: 0; - --ig-body-2-font-size: 30px; - --ig-body-2-font-weight: normal; - --ig-body-2-font-style: normal; - --ig-body-2-line-height: normal; - --ig-body-2-letter-spacing: normal; - --ig-body-2-text-transform: none; - --ig-body-2-margin-top: 0; - --ig-body-2-margin-bottom: 0; - --ig-button-font-size: 20px; - --ig-button-font-weight: normal; - --ig-button-font-style: normal; - --ig-button-line-height: normal; - --ig-button-letter-spacing: normal; - --ig-button-text-transform: none; - --ig-button-margin-top: 0; - --ig-button-margin-bottom: 0; - --ig-caption-font-size: 10px; - --ig-caption-font-weight: normal; - --ig-caption-font-style: normal; - --ig-caption-line-height: normal; - --ig-caption-letter-spacing: normal; - --ig-caption-text-transform: none; - --ig-caption-margin-top: 0; - --ig-caption-margin-bottom: 0; - --ig-overline-font-size: 10px; - --ig-overline-font-weight: normal; - --ig-overline-font-style: normal; - --ig-overline-line-height: normal; - --ig-overline-letter-spacing: normal; - --ig-overline-text-transform: none; - --ig-overline-margin-top: 0; - --ig-overline-margin-bottom: 0; -} - -/* END_OUTPUT */ -/* EXPECTED */ -.test-output { - --ig-font-family: Roboto, sans-serif; - --ig-base-font-size: 16px; - --ig-h1-font-size: 96px; - --ig-h1-font-weight: normal; - --ig-h1-font-style: normal; - --ig-h1-line-height: normal; - --ig-h1-letter-spacing: normal; - --ig-h1-text-transform: none; - --ig-h1-margin-top: 0; - --ig-h1-margin-bottom: 0; - --ig-h2-font-size: 70px; - --ig-h2-font-weight: normal; - --ig-h2-font-style: normal; - --ig-h2-line-height: normal; - --ig-h2-letter-spacing: normal; - --ig-h2-text-transform: none; - --ig-h2-margin-top: 0; - --ig-h2-margin-bottom: 0; - --ig-h3-font-size: 40px; - --ig-h3-font-weight: normal; - --ig-h3-font-style: normal; - --ig-h3-line-height: normal; - --ig-h3-letter-spacing: normal; - --ig-h3-text-transform: none; - --ig-h3-margin-top: 0; - --ig-h3-margin-bottom: 0; - --ig-h4-font-size: 30px; - --ig-h4-font-weight: normal; - --ig-h4-font-style: normal; - --ig-h4-line-height: normal; - --ig-h4-letter-spacing: normal; - --ig-h4-text-transform: none; - --ig-h4-margin-top: 0; - --ig-h4-margin-bottom: 0; - --ig-h5-font-size: 20px; - --ig-h5-font-weight: normal; - --ig-h5-font-style: normal; - --ig-h5-line-height: normal; - --ig-h5-letter-spacing: normal; - --ig-h5-text-transform: none; - --ig-h5-margin-top: 0; - --ig-h5-margin-bottom: 0; - --ig-h6-font-size: 10px; - --ig-h6-font-weight: normal; - --ig-h6-font-style: normal; - --ig-h6-line-height: normal; - --ig-h6-letter-spacing: normal; - --ig-h6-text-transform: none; - --ig-h6-margin-top: 0; - --ig-h6-margin-bottom: 0; - --ig-subtitle-1-font-size: 96px; - --ig-subtitle-1-font-weight: normal; - --ig-subtitle-1-font-style: normal; - --ig-subtitle-1-line-height: normal; - --ig-subtitle-1-letter-spacing: normal; - --ig-subtitle-1-text-transform: none; - --ig-subtitle-1-margin-top: 0; - --ig-subtitle-1-margin-bottom: 0; - --ig-subtitle-2-font-size: 70px; - --ig-subtitle-2-font-weight: normal; - --ig-subtitle-2-font-style: normal; - --ig-subtitle-2-line-height: normal; - --ig-subtitle-2-letter-spacing: normal; - --ig-subtitle-2-text-transform: none; - --ig-subtitle-2-margin-top: 0; - --ig-subtitle-2-margin-bottom: 0; - --ig-body-1-font-size: 40px; - --ig-body-1-font-weight: normal; - --ig-body-1-font-style: normal; - --ig-body-1-line-height: normal; - --ig-body-1-letter-spacing: normal; - --ig-body-1-text-transform: none; - --ig-body-1-margin-top: 0; - --ig-body-1-margin-bottom: 0; - --ig-body-2-font-size: 30px; - --ig-body-2-font-weight: normal; - --ig-body-2-font-style: normal; - --ig-body-2-line-height: normal; - --ig-body-2-letter-spacing: normal; - --ig-body-2-text-transform: none; - --ig-body-2-margin-top: 0; - --ig-body-2-margin-bottom: 0; - --ig-button-font-size: 20px; - --ig-button-font-weight: normal; - --ig-button-font-style: normal; - --ig-button-line-height: normal; - --ig-button-letter-spacing: normal; - --ig-button-text-transform: none; - --ig-button-margin-top: 0; - --ig-button-margin-bottom: 0; - --ig-caption-font-size: 10px; - --ig-caption-font-weight: normal; - --ig-caption-font-style: normal; - --ig-caption-line-height: normal; - --ig-caption-letter-spacing: normal; - --ig-caption-text-transform: none; - --ig-caption-margin-top: 0; - --ig-caption-margin-bottom: 0; - --ig-overline-font-size: 10px; - --ig-overline-font-weight: normal; - --ig-overline-font-style: normal; - --ig-overline-line-height: normal; - --ig-overline-letter-spacing: normal; - --ig-overline-text-transform: none; - --ig-overline-margin-top: 0; - --ig-overline-margin-bottom: 0; -} - -/* END_EXPECTED */ -/* END_ASSERT */ -/* */ -/* */ -/* */ -/* # Module: Utilities */ -/* ------------------- */ -/* # Module: Utilities :: css */ -/* -------------------------- */ -/* Test: should expand shorthand properties */ -/* ✔ [assert-equal] should expand shorthand properties */ -/* */ -/* */ -/* # Module: Utilities :: meta */ -/* --------------------------- */ -/* Test: should resolve if the call context is the root of the stylesheet */ -/* ASSERT: */ -/* OUTPUT */ -.test-output { - content: true; -} - -/* END_OUTPUT */ -/* EXPECTED */ -.test-output { - content: true; -} - -/* END_EXPECTED */ -/* END_ASSERT */ -/* ASSERT: */ -/* OUTPUT */ -.test-output { - content: false; -} - -/* END_OUTPUT */ -/* EXPECTED */ -.test-output { - content: false; -} - -/* END_EXPECTED */ -/* END_ASSERT */ -/* */ -/* Test: should resolve if the call context is :host */ -/* ASSERT: */ -/* OUTPUT */ -:host { - content: true; -} - -/* END_OUTPUT */ -/* EXPECTED */ -:host { - content: true; -} - -/* END_EXPECTED */ -/* END_ASSERT */ -/* ASSERT: */ -/* OUTPUT */ -.test-output { - content: false; -} - -/* END_OUTPUT */ -/* EXPECTED */ -.test-output { - content: false; -} - -/* END_EXPECTED */ -/* END_ASSERT */ -/* */ -/* */ -/* # Module: Utilities :: map */ -/* -------------------------- */ -/* Test: should clean a map of null values */ -/* ✔ [assert-equal] should clean a map of null values */ -/* */ -/* Test: should merge two maps removing null values in the process */ -/* ✔ [assert-equal] should merge two maps removing null values in the process */ -/* */ -/* Test: should accumulate _meta keys when merging schema maps */ -/* ✔ [assert-equal] should accumulate _meta keys when merging schema maps */ -/* */ -/* Test: should fully replace nested property maps regardless of whether the override has _meta */ -/* ✔ [assert-equal] should fully replace nested property maps regardless of whether the override has _meta */ -/* ✔ [assert-equal] should fully replace nested property maps regardless of whether the override has _meta */ -/* */ -/* Test: should diff two maps resolving all unique values in the second map in the process */ -/* ✔ [assert-equal] should diff two maps resolving all unique values in the second map in the process */ -/* */ -/* Test: should prefix all keys in a map with a given string */ -/* ✔ [assert-equal] should prefix all keys in a map with a given string */ -/* */ -/* */ -/* # Module: Utilities :: math */ -/* --------------------------- */ -/* Test: returns a number to a fixed floating point */ -/* ✔ [assert-equal] returns a number to a fixed floating point */ -/* */ -/* Test: converts a number to string */ -/* ✔ [assert-equal] converts a number to string */ -/* */ -/* */ -/* # Module: Utilities :: string */ -/* ----------------------------- */ -/* Test: should split a string by a given separator into a list of values */ -/* ✔ [assert-equal] should split a string by a given separator into a list of values */ -/* */ -/* Test: should replace a search term in target string */ -/* ✔ [assert-equal] should replace a search term in target string */ -/* */ -/* Test: converts a string into a number */ -/* ✔ [assert-equal] converts a string into a number */ -/* ✔ [assert-equal] converts a string into a number */ -/* */ -/* */ -/* */ -/* # Module: Themes */ -/* ---------------- */ -/* # Module: Themes :: schemas */ -/* --------------------------- */ -/* Test: resolves util function values */ -/* ✔ [assert-equal] resolves util function values */ -/* ASSERT: */ -/* OUTPUT */ -igx-data-chart { - --title-padding-top: var(--igx-data-chart-title-padding-top, var(--ig-data-chart-title-padding-top, 4px)); - --title-padding-right: var(--igx-data-chart-title-padding-right, var(--ig-data-chart-title-padding-right, 8px)); - --title-padding-bottom: var(--igx-data-chart-title-padding-bottom, var(--ig-data-chart-title-padding-bottom, 4px)); - --title-padding-left: var(--igx-data-chart-title-padding-left, var(--ig-data-chart-title-padding-left, 8px)); - --ig-theme: material; - --ig-theme-variant: light; -} - -/* END_OUTPUT */ -/* EXPECTED */ -igx-data-chart { - --title-padding-top: var(--igx-data-chart-title-padding-top, var(--ig-data-chart-title-padding-top, 4px)); - --title-padding-right: var(--igx-data-chart-title-padding-right, var(--ig-data-chart-title-padding-right, 8px)); - --title-padding-bottom: var(--igx-data-chart-title-padding-bottom, var(--ig-data-chart-title-padding-bottom, 4px)); - --title-padding-left: var(--igx-data-chart-title-padding-left, var(--ig-data-chart-title-padding-left, 8px)); - --ig-theme: material; - --ig-theme-variant: light; -} - -/* END_EXPECTED */ -/* END_ASSERT */ -/* */ -/* Test: should resolve values from function instructions */ -/* ✔ [assert-equal] should resolve values from function instructions */ -/* ✔ [assert-equal] should resolve values from function instructions */ -/* */ -/* Test: should work with custom(handmade) palettes */ -/* ✔ [assert-equal] should work with custom(handmade) palettes */ -/* ✔ [assert-equal] should work with custom(handmade) palettes */ -/* */ -/* Test: should output theme maps from schema definitions */ -/* ✔ [assert-equal] should output theme maps from schema definitions */ -/* */ -/* Test: should include proper metadata in each component schema */ -/* ✔ [assert-true] Component schema for category-chart is missing metadata. */ -/* ✔ [assert-equal] Component schema for light material category-chart has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light material category-chart has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for category-chart is missing name metadata. */ -/* ✔ [assert-true] Component schema for data-chart is missing metadata. */ -/* ✔ [assert-equal] Component schema for light material data-chart has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light material data-chart has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for data-chart is missing name metadata. */ -/* ✔ [assert-true] Component schema for doughnut-chart is missing metadata. */ -/* ✔ [assert-equal] Component schema for light material doughnut-chart has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light material doughnut-chart has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for doughnut-chart is missing name metadata. */ -/* ✔ [assert-true] Component schema for financial-chart is missing metadata. */ -/* ✔ [assert-equal] Component schema for light material financial-chart has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light material financial-chart has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for financial-chart is missing name metadata. */ -/* ✔ [assert-true] Component schema for funnel-chart is missing metadata. */ -/* ✔ [assert-equal] Component schema for light material funnel-chart has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light material funnel-chart has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for funnel-chart is missing name metadata. */ -/* ✔ [assert-true] Component schema for linear-gauge is missing metadata. */ -/* ✔ [assert-equal] Component schema for light material linear-gauge has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light material linear-gauge has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for linear-gauge is missing name metadata. */ -/* ✔ [assert-true] Component schema for radial-gauge is missing metadata. */ -/* ✔ [assert-equal] Component schema for light material radial-gauge has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light material radial-gauge has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for radial-gauge is missing name metadata. */ -/* ✔ [assert-true] Component schema for geo-map is missing metadata. */ -/* ✔ [assert-equal] Component schema for light material geo-map has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light material geo-map has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for geo-map is missing name metadata. */ -/* ✔ [assert-true] Component schema for bullet-graph is missing metadata. */ -/* ✔ [assert-equal] Component schema for light material bullet-graph has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light material bullet-graph has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for bullet-graph is missing name metadata. */ -/* ✔ [assert-true] Component schema for pie-chart is missing metadata. */ -/* ✔ [assert-equal] Component schema for light material pie-chart has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light material pie-chart has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for pie-chart is missing name metadata. */ -/* ✔ [assert-true] Component schema for shape-chart is missing metadata. */ -/* ✔ [assert-equal] Component schema for light material shape-chart has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light material shape-chart has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for shape-chart is missing name metadata. */ -/* ✔ [assert-true] Component schema for sparkline is missing metadata. */ -/* ✔ [assert-equal] Component schema for light material sparkline has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light material sparkline has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for sparkline is missing name metadata. */ -/* ✔ [assert-true] Component schema for action-strip is missing metadata. */ -/* ✔ [assert-equal] Component schema for light material action-strip has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light material action-strip has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for action-strip is missing name metadata. */ -/* ✔ [assert-true] Component schema for avatar is missing metadata. */ -/* ✔ [assert-equal] Component schema for light material avatar has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light material avatar has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for avatar is missing name metadata. */ -/* ✔ [assert-true] Component schema for badge is missing metadata. */ -/* ✔ [assert-equal] Component schema for light material badge has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light material badge has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for badge is missing name metadata. */ -/* ✔ [assert-true] Component schema for banner is missing metadata. */ -/* ✔ [assert-equal] Component schema for light material banner has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light material banner has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for banner is missing name metadata. */ -/* ✔ [assert-true] Component schema for bottom-nav is missing metadata. */ -/* ✔ [assert-equal] Component schema for light material bottom-nav has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light material bottom-nav has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for bottom-nav is missing name metadata. */ -/* ✔ [assert-true] Component schema for flat button is missing metadata. */ -/* ✔ [assert-equal] Component schema for light material flat button has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light material flat button has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for flat button is missing name metadata. */ -/* ✔ [assert-true] Component schema for outlined button is missing metadata. */ -/* ✔ [assert-equal] Component schema for light material outlined button has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light material outlined button has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for outlined button is missing name metadata. */ -/* ✔ [assert-true] Component schema for contained button is missing metadata. */ -/* ✔ [assert-equal] Component schema for light material contained button has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light material contained button has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for contained button is missing name metadata. */ -/* ✔ [assert-true] Component schema for fab button is missing metadata. */ -/* ✔ [assert-equal] Component schema for light material fab button has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light material fab button has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for fab button is missing name metadata. */ -/* ✔ [assert-true] Component schema for button-group is missing metadata. */ -/* ✔ [assert-equal] Component schema for light material button-group has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light material button-group has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for button-group is missing name metadata. */ -/* ✔ [assert-true] Component schema for calendar is missing metadata. */ -/* ✔ [assert-equal] Component schema for light material calendar has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light material calendar has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for calendar is missing name metadata. */ -/* ✔ [assert-true] Component schema for card is missing metadata. */ -/* ✔ [assert-equal] Component schema for light material card has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light material card has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for card is missing name metadata. */ -/* ✔ [assert-true] Component schema for carousel is missing metadata. */ -/* ✔ [assert-equal] Component schema for light material carousel has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light material carousel has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for carousel is missing name metadata. */ -/* ✔ [assert-true] Component schema for chat is missing metadata. */ -/* ✔ [assert-equal] Component schema for light material chat has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light material chat has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for chat is missing name metadata. */ -/* ✔ [assert-true] Component schema for checkbox is missing metadata. */ -/* ✔ [assert-equal] Component schema for light material checkbox has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light material checkbox has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for checkbox is missing name metadata. */ -/* ✔ [assert-true] Component schema for chip is missing metadata. */ -/* ✔ [assert-equal] Component schema for light material chip has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light material chip has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for chip is missing name metadata. */ -/* ✔ [assert-true] Component schema for color-picker is missing metadata. */ -/* ✔ [assert-equal] Component schema for light material color-picker has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light material color-picker has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for color-picker is missing name metadata. */ -/* ✔ [assert-true] Component schema for column-actions is missing metadata. */ -/* ✔ [assert-equal] Component schema for light material column-actions has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light material column-actions has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for column-actions is missing name metadata. */ -/* ✔ [assert-true] Component schema for combo is missing metadata. */ -/* ✔ [assert-equal] Component schema for light material combo has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light material combo has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for combo is missing name metadata. */ -/* ✔ [assert-true] Component schema for date-picker is missing metadata. */ -/* ✔ [assert-equal] Component schema for light material date-picker has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light material date-picker has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for date-picker is missing name metadata. */ -/* ✔ [assert-true] Component schema for date-range is missing metadata. */ -/* ✔ [assert-equal] Component schema for light material date-range has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light material date-range has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for date-range is missing name metadata. */ -/* ✔ [assert-true] Component schema for dialog is missing metadata. */ -/* ✔ [assert-equal] Component schema for light material dialog has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light material dialog has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for dialog is missing name metadata. */ -/* ✔ [assert-true] Component schema for divider is missing metadata. */ -/* ✔ [assert-equal] Component schema for light material divider has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light material divider has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for divider is missing name metadata. */ -/* ✔ [assert-true] Component schema for dockmanager is missing metadata. */ -/* ✔ [assert-equal] Component schema for light material dockmanager has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light material dockmanager has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for dockmanager is missing name metadata. */ -/* ✔ [assert-true] Component schema for drop-down is missing metadata. */ -/* ✔ [assert-equal] Component schema for light material drop-down has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light material drop-down has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for drop-down is missing name metadata. */ -/* ✔ [assert-true] Component schema for expansion-panel is missing metadata. */ -/* ✔ [assert-equal] Component schema for light material expansion-panel has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light material expansion-panel has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for expansion-panel is missing name metadata. */ -/* ✔ [assert-true] Component schema for grid is missing metadata. */ -/* ✔ [assert-equal] Component schema for light material grid has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light material grid has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for grid is missing name metadata. */ -/* ✔ [assert-true] Component schema for grid-excel-filtering is missing metadata. */ -/* ✔ [assert-equal] Component schema for light material grid-excel-filtering has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light material grid-excel-filtering has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for grid-excel-filtering is missing name metadata. */ -/* ✔ [assert-true] Component schema for grid-filtering is missing metadata. */ -/* ✔ [assert-equal] Component schema for light material grid-filtering has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light material grid-filtering has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for grid-filtering is missing name metadata. */ -/* ✔ [assert-true] Component schema for grid-summary is missing metadata. */ -/* ✔ [assert-equal] Component schema for light material grid-summary has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light material grid-summary has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for grid-summary is missing name metadata. */ -/* ✔ [assert-true] Component schema for grid-toolbar is missing metadata. */ -/* ✔ [assert-equal] Component schema for light material grid-toolbar has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light material grid-toolbar has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for grid-toolbar is missing name metadata. */ -/* ✔ [assert-true] Component schema for highlight is missing metadata. */ -/* ✔ [assert-equal] Component schema for light material highlight has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light material highlight has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for highlight is missing name metadata. */ -/* ✔ [assert-true] Component schema for icon is missing metadata. */ -/* ✔ [assert-equal] Component schema for light material icon has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light material icon has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for icon is missing name metadata. */ -/* ✔ [assert-true] Component schema for flat icon-button is missing metadata. */ -/* ✔ [assert-equal] Component schema for light material flat icon-button has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light material flat icon-button has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for flat icon-button is missing name metadata. */ -/* ✔ [assert-true] Component schema for contained icon-button is missing metadata. */ -/* ✔ [assert-equal] Component schema for light material contained icon-button has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light material contained icon-button has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for contained icon-button is missing name metadata. */ -/* ✔ [assert-true] Component schema for outlined icon-button is missing metadata. */ -/* ✔ [assert-equal] Component schema for light material outlined icon-button has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light material outlined icon-button has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for outlined icon-button is missing name metadata. */ -/* ✔ [assert-true] Component schema for input-group is missing metadata. */ -/* ✔ [assert-equal] Component schema for light material input-group has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light material input-group has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for input-group is missing name metadata. */ -/* ✔ [assert-true] Component schema for label is missing metadata. */ -/* ✔ [assert-equal] Component schema for light material label has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light material label has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for label is missing name metadata. */ -/* ✔ [assert-true] Component schema for list is missing metadata. */ -/* ✔ [assert-equal] Component schema for light material list has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light material list has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for list is missing name metadata. */ -/* ✔ [assert-true] Component schema for navbar is missing metadata. */ -/* ✔ [assert-equal] Component schema for light material navbar has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light material navbar has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for navbar is missing name metadata. */ -/* ✔ [assert-true] Component schema for nav-drawer is missing metadata. */ -/* ✔ [assert-equal] Component schema for light material nav-drawer has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light material nav-drawer has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for nav-drawer is missing name metadata. */ -/* ✔ [assert-true] Component schema for overlay is missing metadata. */ -/* ✔ [assert-equal] Component schema for light material overlay has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light material overlay has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for overlay is missing name metadata. */ -/* ✔ [assert-true] Component schema for paginator is missing metadata. */ -/* ✔ [assert-equal] Component schema for light material paginator has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light material paginator has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for paginator is missing name metadata. */ -/* ✔ [assert-true] Component schema for pivot-data-selector is missing metadata. */ -/* ✔ [assert-equal] Component schema for light material pivot-data-selector has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light material pivot-data-selector has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for pivot-data-selector is missing name metadata. */ -/* ✔ [assert-true] Component schema for linear-bar is missing metadata. */ -/* ✔ [assert-equal] Component schema for light material linear-bar has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light material linear-bar has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for linear-bar is missing name metadata. */ -/* ✔ [assert-true] Component schema for circular-bar is missing metadata. */ -/* ✔ [assert-equal] Component schema for light material circular-bar has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light material circular-bar has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for circular-bar is missing name metadata. */ -/* ✔ [assert-true] Component schema for qr-code is missing metadata. */ -/* ✔ [assert-equal] Component schema for light material qr-code has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light material qr-code has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for qr-code is missing name metadata. */ -/* ✔ [assert-true] Component schema for query-builder is missing metadata. */ -/* ✔ [assert-equal] Component schema for light material query-builder has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light material query-builder has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for query-builder is missing name metadata. */ -/* ✔ [assert-true] Component schema for radio is missing metadata. */ -/* ✔ [assert-equal] Component schema for light material radio has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light material radio has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for radio is missing name metadata. */ -/* ✔ [assert-true] Component schema for rating is missing metadata. */ -/* ✔ [assert-equal] Component schema for light material rating has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light material rating has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for rating is missing name metadata. */ -/* ✔ [assert-true] Component schema for resize-indicator is missing metadata. */ -/* ✔ [assert-equal] Component schema for light material resize-indicator has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light material resize-indicator has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for resize-indicator is missing name metadata. */ -/* ✔ [assert-true] Component schema for ripple is missing metadata. */ -/* ✔ [assert-equal] Component schema for light material ripple has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light material ripple has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for ripple is missing name metadata. */ -/* ✔ [assert-true] Component schema for scrollbar is missing metadata. */ -/* ✔ [assert-equal] Component schema for light material scrollbar has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light material scrollbar has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for scrollbar is missing name metadata. */ -/* ✔ [assert-true] Component schema for select is missing metadata. */ -/* ✔ [assert-equal] Component schema for light material select has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light material select has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for select is missing name metadata. */ -/* ✔ [assert-true] Component schema for slider is missing metadata. */ -/* ✔ [assert-equal] Component schema for light material slider has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light material slider has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for slider is missing name metadata. */ -/* ✔ [assert-true] Component schema for snackbar is missing metadata. */ -/* ✔ [assert-equal] Component schema for light material snackbar has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light material snackbar has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for snackbar is missing name metadata. */ -/* ✔ [assert-true] Component schema for splitter is missing metadata. */ -/* ✔ [assert-equal] Component schema for light material splitter has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light material splitter has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for splitter is missing name metadata. */ -/* ✔ [assert-true] Component schema for stepper is missing metadata. */ -/* ✔ [assert-equal] Component schema for light material stepper has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light material stepper has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for stepper is missing name metadata. */ -/* ✔ [assert-true] Component schema for switch is missing metadata. */ -/* ✔ [assert-equal] Component schema for light material switch has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light material switch has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for switch is missing name metadata. */ -/* ✔ [assert-true] Component schema for tabs is missing metadata. */ -/* ✔ [assert-equal] Component schema for light material tabs has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light material tabs has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for tabs is missing name metadata. */ -/* ✔ [assert-true] Component schema for tile-manager is missing metadata. */ -/* ✔ [assert-equal] Component schema for light material tile-manager has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light material tile-manager has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for tile-manager is missing name metadata. */ -/* ✔ [assert-true] Component schema for time-picker is missing metadata. */ -/* ✔ [assert-equal] Component schema for light material time-picker has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light material time-picker has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for time-picker is missing name metadata. */ -/* ✔ [assert-true] Component schema for toast is missing metadata. */ -/* ✔ [assert-equal] Component schema for light material toast has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light material toast has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for toast is missing name metadata. */ -/* ✔ [assert-true] Component schema for tooltip is missing metadata. */ -/* ✔ [assert-equal] Component schema for light material tooltip has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light material tooltip has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for tooltip is missing name metadata. */ -/* ✔ [assert-true] Component schema for tree is missing metadata. */ -/* ✔ [assert-equal] Component schema for light material tree has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light material tree has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for tree is missing name metadata. */ -/* ✔ [assert-true] Component schema for validator is missing metadata. */ -/* ✔ [assert-equal] Component schema for light material validator has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light material validator has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for validator is missing name metadata. */ -/* ✔ [assert-true] Component schema for watermark is missing metadata. */ -/* ✔ [assert-equal] Component schema for light material watermark has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light material watermark has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for watermark is missing name metadata. */ -/* ✔ [assert-true] Component schema for file-input is missing metadata. */ -/* ✔ [assert-equal] Component schema for light material file-input has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light material file-input has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for file-input is missing name metadata. */ -/* ✔ [assert-true] Component schema for category-chart is missing metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap category-chart has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap category-chart has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for category-chart is missing name metadata. */ -/* ✔ [assert-true] Component schema for data-chart is missing metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap data-chart has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap data-chart has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for data-chart is missing name metadata. */ -/* ✔ [assert-true] Component schema for doughnut-chart is missing metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap doughnut-chart has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap doughnut-chart has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for doughnut-chart is missing name metadata. */ -/* ✔ [assert-true] Component schema for financial-chart is missing metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap financial-chart has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap financial-chart has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for financial-chart is missing name metadata. */ -/* ✔ [assert-true] Component schema for funnel-chart is missing metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap funnel-chart has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap funnel-chart has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for funnel-chart is missing name metadata. */ -/* ✔ [assert-true] Component schema for linear-gauge is missing metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap linear-gauge has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap linear-gauge has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for linear-gauge is missing name metadata. */ -/* ✔ [assert-true] Component schema for radial-gauge is missing metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap radial-gauge has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap radial-gauge has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for radial-gauge is missing name metadata. */ -/* ✔ [assert-true] Component schema for geo-map is missing metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap geo-map has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap geo-map has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for geo-map is missing name metadata. */ -/* ✔ [assert-true] Component schema for bullet-graph is missing metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap bullet-graph has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap bullet-graph has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for bullet-graph is missing name metadata. */ -/* ✔ [assert-true] Component schema for pie-chart is missing metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap pie-chart has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap pie-chart has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for pie-chart is missing name metadata. */ -/* ✔ [assert-true] Component schema for shape-chart is missing metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap shape-chart has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap shape-chart has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for shape-chart is missing name metadata. */ -/* ✔ [assert-true] Component schema for sparkline is missing metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap sparkline has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap sparkline has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for sparkline is missing name metadata. */ -/* ✔ [assert-true] Component schema for action-strip is missing metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap action-strip has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap action-strip has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for action-strip is missing name metadata. */ -/* ✔ [assert-true] Component schema for avatar is missing metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap avatar has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap avatar has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for avatar is missing name metadata. */ -/* ✔ [assert-true] Component schema for badge is missing metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap badge has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap badge has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for badge is missing name metadata. */ -/* ✔ [assert-true] Component schema for banner is missing metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap banner has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap banner has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for banner is missing name metadata. */ -/* ✔ [assert-true] Component schema for bottom-nav is missing metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap bottom-nav has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap bottom-nav has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for bottom-nav is missing name metadata. */ -/* ✔ [assert-true] Component schema for flat button is missing metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap flat button has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap flat button has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for flat button is missing name metadata. */ -/* ✔ [assert-true] Component schema for outlined button is missing metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap outlined button has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap outlined button has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for outlined button is missing name metadata. */ -/* ✔ [assert-true] Component schema for contained button is missing metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap contained button has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap contained button has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for contained button is missing name metadata. */ -/* ✔ [assert-true] Component schema for fab button is missing metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap fab button has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap fab button has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for fab button is missing name metadata. */ -/* ✔ [assert-true] Component schema for button-group is missing metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap button-group has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap button-group has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for button-group is missing name metadata. */ -/* ✔ [assert-true] Component schema for calendar is missing metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap calendar has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap calendar has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for calendar is missing name metadata. */ -/* ✔ [assert-true] Component schema for card is missing metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap card has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap card has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for card is missing name metadata. */ -/* ✔ [assert-true] Component schema for carousel is missing metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap carousel has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap carousel has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for carousel is missing name metadata. */ -/* ✔ [assert-true] Component schema for chat is missing metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap chat has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap chat has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for chat is missing name metadata. */ -/* ✔ [assert-true] Component schema for checkbox is missing metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap checkbox has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap checkbox has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for checkbox is missing name metadata. */ -/* ✔ [assert-true] Component schema for chip is missing metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap chip has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap chip has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for chip is missing name metadata. */ -/* ✔ [assert-true] Component schema for color-picker is missing metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap color-picker has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap color-picker has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for color-picker is missing name metadata. */ -/* ✔ [assert-true] Component schema for column-actions is missing metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap column-actions has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap column-actions has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for column-actions is missing name metadata. */ -/* ✔ [assert-true] Component schema for combo is missing metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap combo has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap combo has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for combo is missing name metadata. */ -/* ✔ [assert-true] Component schema for date-picker is missing metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap date-picker has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap date-picker has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for date-picker is missing name metadata. */ -/* ✔ [assert-true] Component schema for date-range is missing metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap date-range has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap date-range has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for date-range is missing name metadata. */ -/* ✔ [assert-true] Component schema for dialog is missing metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap dialog has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap dialog has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for dialog is missing name metadata. */ -/* ✔ [assert-true] Component schema for divider is missing metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap divider has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap divider has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for divider is missing name metadata. */ -/* ✔ [assert-true] Component schema for dockmanager is missing metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap dockmanager has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap dockmanager has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for dockmanager is missing name metadata. */ -/* ✔ [assert-true] Component schema for drop-down is missing metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap drop-down has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap drop-down has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for drop-down is missing name metadata. */ -/* ✔ [assert-true] Component schema for expansion-panel is missing metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap expansion-panel has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap expansion-panel has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for expansion-panel is missing name metadata. */ -/* ✔ [assert-true] Component schema for grid is missing metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap grid has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap grid has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for grid is missing name metadata. */ -/* ✔ [assert-true] Component schema for grid-excel-filtering is missing metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap grid-excel-filtering has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap grid-excel-filtering has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for grid-excel-filtering is missing name metadata. */ -/* ✔ [assert-true] Component schema for grid-filtering is missing metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap grid-filtering has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap grid-filtering has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for grid-filtering is missing name metadata. */ -/* ✔ [assert-true] Component schema for grid-summary is missing metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap grid-summary has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap grid-summary has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for grid-summary is missing name metadata. */ -/* ✔ [assert-true] Component schema for grid-toolbar is missing metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap grid-toolbar has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap grid-toolbar has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for grid-toolbar is missing name metadata. */ -/* ✔ [assert-true] Component schema for highlight is missing metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap highlight has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap highlight has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for highlight is missing name metadata. */ -/* ✔ [assert-true] Component schema for icon is missing metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap icon has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap icon has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for icon is missing name metadata. */ -/* ✔ [assert-true] Component schema for flat icon-button is missing metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap flat icon-button has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap flat icon-button has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for flat icon-button is missing name metadata. */ -/* ✔ [assert-true] Component schema for contained icon-button is missing metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap contained icon-button has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap contained icon-button has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for contained icon-button is missing name metadata. */ -/* ✔ [assert-true] Component schema for outlined icon-button is missing metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap outlined icon-button has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap outlined icon-button has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for outlined icon-button is missing name metadata. */ -/* ✔ [assert-true] Component schema for input-group is missing metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap input-group has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap input-group has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for input-group is missing name metadata. */ -/* ✔ [assert-true] Component schema for label is missing metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap label has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap label has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for label is missing name metadata. */ -/* ✔ [assert-true] Component schema for list is missing metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap list has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap list has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for list is missing name metadata. */ -/* ✔ [assert-true] Component schema for navbar is missing metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap navbar has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap navbar has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for navbar is missing name metadata. */ -/* ✔ [assert-true] Component schema for nav-drawer is missing metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap nav-drawer has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap nav-drawer has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for nav-drawer is missing name metadata. */ -/* ✔ [assert-true] Component schema for overlay is missing metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap overlay has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap overlay has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for overlay is missing name metadata. */ -/* ✔ [assert-true] Component schema for paginator is missing metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap paginator has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap paginator has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for paginator is missing name metadata. */ -/* ✔ [assert-true] Component schema for pivot-data-selector is missing metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap pivot-data-selector has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap pivot-data-selector has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for pivot-data-selector is missing name metadata. */ -/* ✔ [assert-true] Component schema for linear-bar is missing metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap linear-bar has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap linear-bar has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for linear-bar is missing name metadata. */ -/* ✔ [assert-true] Component schema for circular-bar is missing metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap circular-bar has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap circular-bar has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for circular-bar is missing name metadata. */ -/* ✔ [assert-true] Component schema for qr-code is missing metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap qr-code has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap qr-code has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for qr-code is missing name metadata. */ -/* ✔ [assert-true] Component schema for query-builder is missing metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap query-builder has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap query-builder has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for query-builder is missing name metadata. */ -/* ✔ [assert-true] Component schema for radio is missing metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap radio has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap radio has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for radio is missing name metadata. */ -/* ✔ [assert-true] Component schema for rating is missing metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap rating has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap rating has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for rating is missing name metadata. */ -/* ✔ [assert-true] Component schema for resize-indicator is missing metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap resize-indicator has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap resize-indicator has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for resize-indicator is missing name metadata. */ -/* ✔ [assert-true] Component schema for ripple is missing metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap ripple has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap ripple has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for ripple is missing name metadata. */ -/* ✔ [assert-true] Component schema for scrollbar is missing metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap scrollbar has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap scrollbar has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for scrollbar is missing name metadata. */ -/* ✔ [assert-true] Component schema for select is missing metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap select has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap select has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for select is missing name metadata. */ -/* ✔ [assert-true] Component schema for slider is missing metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap slider has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap slider has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for slider is missing name metadata. */ -/* ✔ [assert-true] Component schema for snackbar is missing metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap snackbar has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap snackbar has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for snackbar is missing name metadata. */ -/* ✔ [assert-true] Component schema for splitter is missing metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap splitter has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap splitter has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for splitter is missing name metadata. */ -/* ✔ [assert-true] Component schema for stepper is missing metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap stepper has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap stepper has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for stepper is missing name metadata. */ -/* ✔ [assert-true] Component schema for switch is missing metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap switch has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap switch has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for switch is missing name metadata. */ -/* ✔ [assert-true] Component schema for tabs is missing metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap tabs has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap tabs has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for tabs is missing name metadata. */ -/* ✔ [assert-true] Component schema for tile-manager is missing metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap tile-manager has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap tile-manager has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for tile-manager is missing name metadata. */ -/* ✔ [assert-true] Component schema for time-picker is missing metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap time-picker has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap time-picker has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for time-picker is missing name metadata. */ -/* ✔ [assert-true] Component schema for toast is missing metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap toast has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap toast has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for toast is missing name metadata. */ -/* ✔ [assert-true] Component schema for tooltip is missing metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap tooltip has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap tooltip has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for tooltip is missing name metadata. */ -/* ✔ [assert-true] Component schema for tree is missing metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap tree has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap tree has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for tree is missing name metadata. */ -/* ✔ [assert-true] Component schema for validator is missing metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap validator has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap validator has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for validator is missing name metadata. */ -/* ✔ [assert-true] Component schema for watermark is missing metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap watermark has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap watermark has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for watermark is missing name metadata. */ -/* ✔ [assert-true] Component schema for file-input is missing metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap file-input has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap file-input has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for file-input is missing name metadata. */ -/* ✔ [assert-true] Component schema for category-chart is missing metadata. */ -/* ✔ [assert-equal] Component schema for light fluent category-chart has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light fluent category-chart has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for category-chart is missing name metadata. */ -/* ✔ [assert-true] Component schema for data-chart is missing metadata. */ -/* ✔ [assert-equal] Component schema for light fluent data-chart has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light fluent data-chart has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for data-chart is missing name metadata. */ -/* ✔ [assert-true] Component schema for doughnut-chart is missing metadata. */ -/* ✔ [assert-equal] Component schema for light fluent doughnut-chart has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light fluent doughnut-chart has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for doughnut-chart is missing name metadata. */ -/* ✔ [assert-true] Component schema for financial-chart is missing metadata. */ -/* ✔ [assert-equal] Component schema for light fluent financial-chart has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light fluent financial-chart has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for financial-chart is missing name metadata. */ -/* ✔ [assert-true] Component schema for funnel-chart is missing metadata. */ -/* ✔ [assert-equal] Component schema for light fluent funnel-chart has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light fluent funnel-chart has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for funnel-chart is missing name metadata. */ -/* ✔ [assert-true] Component schema for linear-gauge is missing metadata. */ -/* ✔ [assert-equal] Component schema for light fluent linear-gauge has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light fluent linear-gauge has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for linear-gauge is missing name metadata. */ -/* ✔ [assert-true] Component schema for radial-gauge is missing metadata. */ -/* ✔ [assert-equal] Component schema for light fluent radial-gauge has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light fluent radial-gauge has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for radial-gauge is missing name metadata. */ -/* ✔ [assert-true] Component schema for geo-map is missing metadata. */ -/* ✔ [assert-equal] Component schema for light fluent geo-map has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light fluent geo-map has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for geo-map is missing name metadata. */ -/* ✔ [assert-true] Component schema for bullet-graph is missing metadata. */ -/* ✔ [assert-equal] Component schema for light fluent bullet-graph has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light fluent bullet-graph has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for bullet-graph is missing name metadata. */ -/* ✔ [assert-true] Component schema for pie-chart is missing metadata. */ -/* ✔ [assert-equal] Component schema for light fluent pie-chart has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light fluent pie-chart has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for pie-chart is missing name metadata. */ -/* ✔ [assert-true] Component schema for shape-chart is missing metadata. */ -/* ✔ [assert-equal] Component schema for light fluent shape-chart has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light fluent shape-chart has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for shape-chart is missing name metadata. */ -/* ✔ [assert-true] Component schema for sparkline is missing metadata. */ -/* ✔ [assert-equal] Component schema for light fluent sparkline has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light fluent sparkline has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for sparkline is missing name metadata. */ -/* ✔ [assert-true] Component schema for action-strip is missing metadata. */ -/* ✔ [assert-equal] Component schema for light fluent action-strip has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light fluent action-strip has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for action-strip is missing name metadata. */ -/* ✔ [assert-true] Component schema for avatar is missing metadata. */ -/* ✔ [assert-equal] Component schema for light fluent avatar has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light fluent avatar has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for avatar is missing name metadata. */ -/* ✔ [assert-true] Component schema for badge is missing metadata. */ -/* ✔ [assert-equal] Component schema for light fluent badge has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light fluent badge has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for badge is missing name metadata. */ -/* ✔ [assert-true] Component schema for banner is missing metadata. */ -/* ✔ [assert-equal] Component schema for light fluent banner has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light fluent banner has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for banner is missing name metadata. */ -/* ✔ [assert-true] Component schema for bottom-nav is missing metadata. */ -/* ✔ [assert-equal] Component schema for light fluent bottom-nav has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light fluent bottom-nav has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for bottom-nav is missing name metadata. */ -/* ✔ [assert-true] Component schema for flat button is missing metadata. */ -/* ✔ [assert-equal] Component schema for light fluent flat button has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light fluent flat button has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for flat button is missing name metadata. */ -/* ✔ [assert-true] Component schema for outlined button is missing metadata. */ -/* ✔ [assert-equal] Component schema for light fluent outlined button has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light fluent outlined button has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for outlined button is missing name metadata. */ -/* ✔ [assert-true] Component schema for contained button is missing metadata. */ -/* ✔ [assert-equal] Component schema for light fluent contained button has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light fluent contained button has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for contained button is missing name metadata. */ -/* ✔ [assert-true] Component schema for fab button is missing metadata. */ -/* ✔ [assert-equal] Component schema for light fluent fab button has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light fluent fab button has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for fab button is missing name metadata. */ -/* ✔ [assert-true] Component schema for button-group is missing metadata. */ -/* ✔ [assert-equal] Component schema for light fluent button-group has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light fluent button-group has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for button-group is missing name metadata. */ -/* ✔ [assert-true] Component schema for calendar is missing metadata. */ -/* ✔ [assert-equal] Component schema for light fluent calendar has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light fluent calendar has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for calendar is missing name metadata. */ -/* ✔ [assert-true] Component schema for card is missing metadata. */ -/* ✔ [assert-equal] Component schema for light fluent card has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light fluent card has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for card is missing name metadata. */ -/* ✔ [assert-true] Component schema for carousel is missing metadata. */ -/* ✔ [assert-equal] Component schema for light fluent carousel has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light fluent carousel has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for carousel is missing name metadata. */ -/* ✔ [assert-true] Component schema for chat is missing metadata. */ -/* ✔ [assert-equal] Component schema for light fluent chat has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light fluent chat has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for chat is missing name metadata. */ -/* ✔ [assert-true] Component schema for checkbox is missing metadata. */ -/* ✔ [assert-equal] Component schema for light fluent checkbox has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light fluent checkbox has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for checkbox is missing name metadata. */ -/* ✔ [assert-true] Component schema for chip is missing metadata. */ -/* ✔ [assert-equal] Component schema for light fluent chip has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light fluent chip has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for chip is missing name metadata. */ -/* ✔ [assert-true] Component schema for color-picker is missing metadata. */ -/* ✔ [assert-equal] Component schema for light fluent color-picker has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light fluent color-picker has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for color-picker is missing name metadata. */ -/* ✔ [assert-true] Component schema for column-actions is missing metadata. */ -/* ✔ [assert-equal] Component schema for light fluent column-actions has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light fluent column-actions has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for column-actions is missing name metadata. */ -/* ✔ [assert-true] Component schema for combo is missing metadata. */ -/* ✔ [assert-equal] Component schema for light fluent combo has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light fluent combo has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for combo is missing name metadata. */ -/* ✔ [assert-true] Component schema for date-picker is missing metadata. */ -/* ✔ [assert-equal] Component schema for light fluent date-picker has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light fluent date-picker has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for date-picker is missing name metadata. */ -/* ✔ [assert-true] Component schema for date-range is missing metadata. */ -/* ✔ [assert-equal] Component schema for light fluent date-range has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light fluent date-range has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for date-range is missing name metadata. */ -/* ✔ [assert-true] Component schema for dialog is missing metadata. */ -/* ✔ [assert-equal] Component schema for light fluent dialog has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light fluent dialog has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for dialog is missing name metadata. */ -/* ✔ [assert-true] Component schema for divider is missing metadata. */ -/* ✔ [assert-equal] Component schema for light fluent divider has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light fluent divider has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for divider is missing name metadata. */ -/* ✔ [assert-true] Component schema for dockmanager is missing metadata. */ -/* ✔ [assert-equal] Component schema for light fluent dockmanager has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light fluent dockmanager has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for dockmanager is missing name metadata. */ -/* ✔ [assert-true] Component schema for drop-down is missing metadata. */ -/* ✔ [assert-equal] Component schema for light fluent drop-down has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light fluent drop-down has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for drop-down is missing name metadata. */ -/* ✔ [assert-true] Component schema for expansion-panel is missing metadata. */ -/* ✔ [assert-equal] Component schema for light fluent expansion-panel has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light fluent expansion-panel has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for expansion-panel is missing name metadata. */ -/* ✔ [assert-true] Component schema for grid is missing metadata. */ -/* ✔ [assert-equal] Component schema for light fluent grid has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light fluent grid has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for grid is missing name metadata. */ -/* ✔ [assert-true] Component schema for grid-excel-filtering is missing metadata. */ -/* ✔ [assert-equal] Component schema for light fluent grid-excel-filtering has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light fluent grid-excel-filtering has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for grid-excel-filtering is missing name metadata. */ -/* ✔ [assert-true] Component schema for grid-filtering is missing metadata. */ -/* ✔ [assert-equal] Component schema for light fluent grid-filtering has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light fluent grid-filtering has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for grid-filtering is missing name metadata. */ -/* ✔ [assert-true] Component schema for grid-summary is missing metadata. */ -/* ✔ [assert-equal] Component schema for light fluent grid-summary has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light fluent grid-summary has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for grid-summary is missing name metadata. */ -/* ✔ [assert-true] Component schema for grid-toolbar is missing metadata. */ -/* ✔ [assert-equal] Component schema for light fluent grid-toolbar has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light fluent grid-toolbar has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for grid-toolbar is missing name metadata. */ -/* ✔ [assert-true] Component schema for highlight is missing metadata. */ -/* ✔ [assert-equal] Component schema for light fluent highlight has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light fluent highlight has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for highlight is missing name metadata. */ -/* ✔ [assert-true] Component schema for icon is missing metadata. */ -/* ✔ [assert-equal] Component schema for light fluent icon has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light fluent icon has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for icon is missing name metadata. */ -/* ✔ [assert-true] Component schema for flat icon-button is missing metadata. */ -/* ✔ [assert-equal] Component schema for light fluent flat icon-button has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light fluent flat icon-button has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for flat icon-button is missing name metadata. */ -/* ✔ [assert-true] Component schema for contained icon-button is missing metadata. */ -/* ✔ [assert-equal] Component schema for light fluent contained icon-button has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light fluent contained icon-button has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for contained icon-button is missing name metadata. */ -/* ✔ [assert-true] Component schema for outlined icon-button is missing metadata. */ -/* ✔ [assert-equal] Component schema for light fluent outlined icon-button has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light fluent outlined icon-button has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for outlined icon-button is missing name metadata. */ -/* ✔ [assert-true] Component schema for input-group is missing metadata. */ -/* ✔ [assert-equal] Component schema for light fluent input-group has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light fluent input-group has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for input-group is missing name metadata. */ -/* ✔ [assert-true] Component schema for label is missing metadata. */ -/* ✔ [assert-equal] Component schema for light fluent label has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light fluent label has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for label is missing name metadata. */ -/* ✔ [assert-true] Component schema for list is missing metadata. */ -/* ✔ [assert-equal] Component schema for light fluent list has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light fluent list has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for list is missing name metadata. */ -/* ✔ [assert-true] Component schema for navbar is missing metadata. */ -/* ✔ [assert-equal] Component schema for light fluent navbar has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light fluent navbar has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for navbar is missing name metadata. */ -/* ✔ [assert-true] Component schema for nav-drawer is missing metadata. */ -/* ✔ [assert-equal] Component schema for light fluent nav-drawer has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light fluent nav-drawer has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for nav-drawer is missing name metadata. */ -/* ✔ [assert-true] Component schema for overlay is missing metadata. */ -/* ✔ [assert-equal] Component schema for light fluent overlay has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light fluent overlay has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for overlay is missing name metadata. */ -/* ✔ [assert-true] Component schema for paginator is missing metadata. */ -/* ✔ [assert-equal] Component schema for light fluent paginator has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light fluent paginator has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for paginator is missing name metadata. */ -/* ✔ [assert-true] Component schema for pivot-data-selector is missing metadata. */ -/* ✔ [assert-equal] Component schema for light fluent pivot-data-selector has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light fluent pivot-data-selector has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for pivot-data-selector is missing name metadata. */ -/* ✔ [assert-true] Component schema for linear-bar is missing metadata. */ -/* ✔ [assert-equal] Component schema for light fluent linear-bar has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light fluent linear-bar has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for linear-bar is missing name metadata. */ -/* ✔ [assert-true] Component schema for circular-bar is missing metadata. */ -/* ✔ [assert-equal] Component schema for light fluent circular-bar has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light fluent circular-bar has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for circular-bar is missing name metadata. */ -/* ✔ [assert-true] Component schema for qr-code is missing metadata. */ -/* ✔ [assert-equal] Component schema for light fluent qr-code has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light fluent qr-code has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for qr-code is missing name metadata. */ -/* ✔ [assert-true] Component schema for query-builder is missing metadata. */ -/* ✔ [assert-equal] Component schema for light fluent query-builder has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light fluent query-builder has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for query-builder is missing name metadata. */ -/* ✔ [assert-true] Component schema for radio is missing metadata. */ -/* ✔ [assert-equal] Component schema for light fluent radio has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light fluent radio has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for radio is missing name metadata. */ -/* ✔ [assert-true] Component schema for rating is missing metadata. */ -/* ✔ [assert-equal] Component schema for light fluent rating has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light fluent rating has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for rating is missing name metadata. */ -/* ✔ [assert-true] Component schema for resize-indicator is missing metadata. */ -/* ✔ [assert-equal] Component schema for light fluent resize-indicator has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light fluent resize-indicator has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for resize-indicator is missing name metadata. */ -/* ✔ [assert-true] Component schema for ripple is missing metadata. */ -/* ✔ [assert-equal] Component schema for light fluent ripple has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light fluent ripple has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for ripple is missing name metadata. */ -/* ✔ [assert-true] Component schema for scrollbar is missing metadata. */ -/* ✔ [assert-equal] Component schema for light fluent scrollbar has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light fluent scrollbar has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for scrollbar is missing name metadata. */ -/* ✔ [assert-true] Component schema for select is missing metadata. */ -/* ✔ [assert-equal] Component schema for light fluent select has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light fluent select has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for select is missing name metadata. */ -/* ✔ [assert-true] Component schema for slider is missing metadata. */ -/* ✔ [assert-equal] Component schema for light fluent slider has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light fluent slider has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for slider is missing name metadata. */ -/* ✔ [assert-true] Component schema for snackbar is missing metadata. */ -/* ✔ [assert-equal] Component schema for light fluent snackbar has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light fluent snackbar has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for snackbar is missing name metadata. */ -/* ✔ [assert-true] Component schema for splitter is missing metadata. */ -/* ✔ [assert-equal] Component schema for light fluent splitter has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light fluent splitter has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for splitter is missing name metadata. */ -/* ✔ [assert-true] Component schema for stepper is missing metadata. */ -/* ✔ [assert-equal] Component schema for light fluent stepper has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light fluent stepper has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for stepper is missing name metadata. */ -/* ✔ [assert-true] Component schema for switch is missing metadata. */ -/* ✔ [assert-equal] Component schema for light fluent switch has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light fluent switch has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for switch is missing name metadata. */ -/* ✔ [assert-true] Component schema for tabs is missing metadata. */ -/* ✔ [assert-equal] Component schema for light fluent tabs has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light fluent tabs has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for tabs is missing name metadata. */ -/* ✔ [assert-true] Component schema for tile-manager is missing metadata. */ -/* ✔ [assert-equal] Component schema for light fluent tile-manager has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light fluent tile-manager has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for tile-manager is missing name metadata. */ -/* ✔ [assert-true] Component schema for time-picker is missing metadata. */ -/* ✔ [assert-equal] Component schema for light fluent time-picker has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light fluent time-picker has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for time-picker is missing name metadata. */ -/* ✔ [assert-true] Component schema for toast is missing metadata. */ -/* ✔ [assert-equal] Component schema for light fluent toast has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light fluent toast has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for toast is missing name metadata. */ -/* ✔ [assert-true] Component schema for tooltip is missing metadata. */ -/* ✔ [assert-equal] Component schema for light fluent tooltip has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light fluent tooltip has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for tooltip is missing name metadata. */ -/* ✔ [assert-true] Component schema for tree is missing metadata. */ -/* ✔ [assert-equal] Component schema for light fluent tree has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light fluent tree has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for tree is missing name metadata. */ -/* ✔ [assert-true] Component schema for validator is missing metadata. */ -/* ✔ [assert-equal] Component schema for light fluent validator has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light fluent validator has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for validator is missing name metadata. */ -/* ✔ [assert-true] Component schema for watermark is missing metadata. */ -/* ✔ [assert-equal] Component schema for light fluent watermark has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light fluent watermark has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for watermark is missing name metadata. */ -/* ✔ [assert-true] Component schema for file-input is missing metadata. */ -/* ✔ [assert-equal] Component schema for light fluent file-input has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light fluent file-input has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for file-input is missing name metadata. */ -/* ✔ [assert-true] Component schema for category-chart is missing metadata. */ -/* ✔ [assert-equal] Component schema for light indigo category-chart has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light indigo category-chart has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for category-chart is missing name metadata. */ -/* ✔ [assert-true] Component schema for data-chart is missing metadata. */ -/* ✔ [assert-equal] Component schema for light indigo data-chart has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light indigo data-chart has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for data-chart is missing name metadata. */ -/* ✔ [assert-true] Component schema for doughnut-chart is missing metadata. */ -/* ✔ [assert-equal] Component schema for light indigo doughnut-chart has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light indigo doughnut-chart has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for doughnut-chart is missing name metadata. */ -/* ✔ [assert-true] Component schema for financial-chart is missing metadata. */ -/* ✔ [assert-equal] Component schema for light indigo financial-chart has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light indigo financial-chart has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for financial-chart is missing name metadata. */ -/* ✔ [assert-true] Component schema for funnel-chart is missing metadata. */ -/* ✔ [assert-equal] Component schema for light indigo funnel-chart has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light indigo funnel-chart has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for funnel-chart is missing name metadata. */ -/* ✔ [assert-true] Component schema for linear-gauge is missing metadata. */ -/* ✔ [assert-equal] Component schema for light indigo linear-gauge has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light indigo linear-gauge has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for linear-gauge is missing name metadata. */ -/* ✔ [assert-true] Component schema for radial-gauge is missing metadata. */ -/* ✔ [assert-equal] Component schema for light indigo radial-gauge has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light indigo radial-gauge has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for radial-gauge is missing name metadata. */ -/* ✔ [assert-true] Component schema for geo-map is missing metadata. */ -/* ✔ [assert-equal] Component schema for light indigo geo-map has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light indigo geo-map has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for geo-map is missing name metadata. */ -/* ✔ [assert-true] Component schema for bullet-graph is missing metadata. */ -/* ✔ [assert-equal] Component schema for light indigo bullet-graph has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light indigo bullet-graph has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for bullet-graph is missing name metadata. */ -/* ✔ [assert-true] Component schema for pie-chart is missing metadata. */ -/* ✔ [assert-equal] Component schema for light indigo pie-chart has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light indigo pie-chart has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for pie-chart is missing name metadata. */ -/* ✔ [assert-true] Component schema for shape-chart is missing metadata. */ -/* ✔ [assert-equal] Component schema for light indigo shape-chart has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light indigo shape-chart has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for shape-chart is missing name metadata. */ -/* ✔ [assert-true] Component schema for sparkline is missing metadata. */ -/* ✔ [assert-equal] Component schema for light indigo sparkline has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light indigo sparkline has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for sparkline is missing name metadata. */ -/* ✔ [assert-true] Component schema for action-strip is missing metadata. */ -/* ✔ [assert-equal] Component schema for light indigo action-strip has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light indigo action-strip has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for action-strip is missing name metadata. */ -/* ✔ [assert-true] Component schema for avatar is missing metadata. */ -/* ✔ [assert-equal] Component schema for light indigo avatar has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light indigo avatar has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for avatar is missing name metadata. */ -/* ✔ [assert-true] Component schema for badge is missing metadata. */ -/* ✔ [assert-equal] Component schema for light indigo badge has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light indigo badge has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for badge is missing name metadata. */ -/* ✔ [assert-true] Component schema for banner is missing metadata. */ -/* ✔ [assert-equal] Component schema for light indigo banner has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light indigo banner has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for banner is missing name metadata. */ -/* ✔ [assert-true] Component schema for bottom-nav is missing metadata. */ -/* ✔ [assert-equal] Component schema for light indigo bottom-nav has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light indigo bottom-nav has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for bottom-nav is missing name metadata. */ -/* ✔ [assert-true] Component schema for flat button is missing metadata. */ -/* ✔ [assert-equal] Component schema for light indigo flat button has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light indigo flat button has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for flat button is missing name metadata. */ -/* ✔ [assert-true] Component schema for outlined button is missing metadata. */ -/* ✔ [assert-equal] Component schema for light indigo outlined button has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light indigo outlined button has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for outlined button is missing name metadata. */ -/* ✔ [assert-true] Component schema for contained button is missing metadata. */ -/* ✔ [assert-equal] Component schema for light indigo contained button has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light indigo contained button has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for contained button is missing name metadata. */ -/* ✔ [assert-true] Component schema for fab button is missing metadata. */ -/* ✔ [assert-equal] Component schema for light indigo fab button has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light indigo fab button has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for fab button is missing name metadata. */ -/* ✔ [assert-true] Component schema for button-group is missing metadata. */ -/* ✔ [assert-equal] Component schema for light indigo button-group has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light indigo button-group has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for button-group is missing name metadata. */ -/* ✔ [assert-true] Component schema for calendar is missing metadata. */ -/* ✔ [assert-equal] Component schema for light indigo calendar has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light indigo calendar has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for calendar is missing name metadata. */ -/* ✔ [assert-true] Component schema for card is missing metadata. */ -/* ✔ [assert-equal] Component schema for light indigo card has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light indigo card has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for card is missing name metadata. */ -/* ✔ [assert-true] Component schema for carousel is missing metadata. */ -/* ✔ [assert-equal] Component schema for light indigo carousel has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light indigo carousel has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for carousel is missing name metadata. */ -/* ✔ [assert-true] Component schema for chat is missing metadata. */ -/* ✔ [assert-equal] Component schema for light indigo chat has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light indigo chat has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for chat is missing name metadata. */ -/* ✔ [assert-true] Component schema for checkbox is missing metadata. */ -/* ✔ [assert-equal] Component schema for light indigo checkbox has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light indigo checkbox has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for checkbox is missing name metadata. */ -/* ✔ [assert-true] Component schema for chip is missing metadata. */ -/* ✔ [assert-equal] Component schema for light indigo chip has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light indigo chip has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for chip is missing name metadata. */ -/* ✔ [assert-true] Component schema for color-picker is missing metadata. */ -/* ✔ [assert-equal] Component schema for light indigo color-picker has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light indigo color-picker has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for color-picker is missing name metadata. */ -/* ✔ [assert-true] Component schema for column-actions is missing metadata. */ -/* ✔ [assert-equal] Component schema for light indigo column-actions has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light indigo column-actions has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for column-actions is missing name metadata. */ -/* ✔ [assert-true] Component schema for combo is missing metadata. */ -/* ✔ [assert-equal] Component schema for light indigo combo has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light indigo combo has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for combo is missing name metadata. */ -/* ✔ [assert-true] Component schema for date-picker is missing metadata. */ -/* ✔ [assert-equal] Component schema for light indigo date-picker has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light indigo date-picker has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for date-picker is missing name metadata. */ -/* ✔ [assert-true] Component schema for date-range is missing metadata. */ -/* ✔ [assert-equal] Component schema for light indigo date-range has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light indigo date-range has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for date-range is missing name metadata. */ -/* ✔ [assert-true] Component schema for dialog is missing metadata. */ -/* ✔ [assert-equal] Component schema for light indigo dialog has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light indigo dialog has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for dialog is missing name metadata. */ -/* ✔ [assert-true] Component schema for divider is missing metadata. */ -/* ✔ [assert-equal] Component schema for light indigo divider has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light indigo divider has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for divider is missing name metadata. */ -/* ✔ [assert-true] Component schema for dockmanager is missing metadata. */ -/* ✔ [assert-equal] Component schema for light indigo dockmanager has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light indigo dockmanager has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for dockmanager is missing name metadata. */ -/* ✔ [assert-true] Component schema for drop-down is missing metadata. */ -/* ✔ [assert-equal] Component schema for light indigo drop-down has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light indigo drop-down has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for drop-down is missing name metadata. */ -/* ✔ [assert-true] Component schema for expansion-panel is missing metadata. */ -/* ✔ [assert-equal] Component schema for light indigo expansion-panel has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light indigo expansion-panel has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for expansion-panel is missing name metadata. */ -/* ✔ [assert-true] Component schema for grid is missing metadata. */ -/* ✔ [assert-equal] Component schema for light indigo grid has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light indigo grid has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for grid is missing name metadata. */ -/* ✔ [assert-true] Component schema for grid-excel-filtering is missing metadata. */ -/* ✔ [assert-equal] Component schema for light indigo grid-excel-filtering has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light indigo grid-excel-filtering has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for grid-excel-filtering is missing name metadata. */ -/* ✔ [assert-true] Component schema for grid-filtering is missing metadata. */ -/* ✔ [assert-equal] Component schema for light indigo grid-filtering has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light indigo grid-filtering has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for grid-filtering is missing name metadata. */ -/* ✔ [assert-true] Component schema for grid-summary is missing metadata. */ -/* ✔ [assert-equal] Component schema for light indigo grid-summary has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light indigo grid-summary has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for grid-summary is missing name metadata. */ -/* ✔ [assert-true] Component schema for grid-toolbar is missing metadata. */ -/* ✔ [assert-equal] Component schema for light indigo grid-toolbar has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light indigo grid-toolbar has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for grid-toolbar is missing name metadata. */ -/* ✔ [assert-true] Component schema for highlight is missing metadata. */ -/* ✔ [assert-equal] Component schema for light indigo highlight has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light indigo highlight has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for highlight is missing name metadata. */ -/* ✔ [assert-true] Component schema for icon is missing metadata. */ -/* ✔ [assert-equal] Component schema for light indigo icon has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light indigo icon has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for icon is missing name metadata. */ -/* ✔ [assert-true] Component schema for flat icon-button is missing metadata. */ -/* ✔ [assert-equal] Component schema for light indigo flat icon-button has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light indigo flat icon-button has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for flat icon-button is missing name metadata. */ -/* ✔ [assert-true] Component schema for contained icon-button is missing metadata. */ -/* ✔ [assert-equal] Component schema for light indigo contained icon-button has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light indigo contained icon-button has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for contained icon-button is missing name metadata. */ -/* ✔ [assert-true] Component schema for outlined icon-button is missing metadata. */ -/* ✔ [assert-equal] Component schema for light indigo outlined icon-button has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light indigo outlined icon-button has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for outlined icon-button is missing name metadata. */ -/* ✔ [assert-true] Component schema for input-group is missing metadata. */ -/* ✔ [assert-equal] Component schema for light indigo input-group has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light indigo input-group has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for input-group is missing name metadata. */ -/* ✔ [assert-true] Component schema for label is missing metadata. */ -/* ✔ [assert-equal] Component schema for light indigo label has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light indigo label has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for label is missing name metadata. */ -/* ✔ [assert-true] Component schema for list is missing metadata. */ -/* ✔ [assert-equal] Component schema for light indigo list has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light indigo list has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for list is missing name metadata. */ -/* ✔ [assert-true] Component schema for navbar is missing metadata. */ -/* ✔ [assert-equal] Component schema for light indigo navbar has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light indigo navbar has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for navbar is missing name metadata. */ -/* ✔ [assert-true] Component schema for nav-drawer is missing metadata. */ -/* ✔ [assert-equal] Component schema for light indigo nav-drawer has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light indigo nav-drawer has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for nav-drawer is missing name metadata. */ -/* ✔ [assert-true] Component schema for overlay is missing metadata. */ -/* ✔ [assert-equal] Component schema for light indigo overlay has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light indigo overlay has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for overlay is missing name metadata. */ -/* ✔ [assert-true] Component schema for paginator is missing metadata. */ -/* ✔ [assert-equal] Component schema for light indigo paginator has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light indigo paginator has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for paginator is missing name metadata. */ -/* ✔ [assert-true] Component schema for pivot-data-selector is missing metadata. */ -/* ✔ [assert-equal] Component schema for light indigo pivot-data-selector has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light indigo pivot-data-selector has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for pivot-data-selector is missing name metadata. */ -/* ✔ [assert-true] Component schema for linear-bar is missing metadata. */ -/* ✔ [assert-equal] Component schema for light indigo linear-bar has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light indigo linear-bar has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for linear-bar is missing name metadata. */ -/* ✔ [assert-true] Component schema for circular-bar is missing metadata. */ -/* ✔ [assert-equal] Component schema for light indigo circular-bar has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light indigo circular-bar has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for circular-bar is missing name metadata. */ -/* ✔ [assert-true] Component schema for qr-code is missing metadata. */ -/* ✔ [assert-equal] Component schema for light indigo qr-code has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light indigo qr-code has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for qr-code is missing name metadata. */ -/* ✔ [assert-true] Component schema for query-builder is missing metadata. */ -/* ✔ [assert-equal] Component schema for light indigo query-builder has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light indigo query-builder has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for query-builder is missing name metadata. */ -/* ✔ [assert-true] Component schema for radio is missing metadata. */ -/* ✔ [assert-equal] Component schema for light indigo radio has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light indigo radio has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for radio is missing name metadata. */ -/* ✔ [assert-true] Component schema for rating is missing metadata. */ -/* ✔ [assert-equal] Component schema for light indigo rating has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light indigo rating has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for rating is missing name metadata. */ -/* ✔ [assert-true] Component schema for resize-indicator is missing metadata. */ -/* ✔ [assert-equal] Component schema for light indigo resize-indicator has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light indigo resize-indicator has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for resize-indicator is missing name metadata. */ -/* ✔ [assert-true] Component schema for ripple is missing metadata. */ -/* ✔ [assert-equal] Component schema for light indigo ripple has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light indigo ripple has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for ripple is missing name metadata. */ -/* ✔ [assert-true] Component schema for scrollbar is missing metadata. */ -/* ✔ [assert-equal] Component schema for light indigo scrollbar has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light indigo scrollbar has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for scrollbar is missing name metadata. */ -/* ✔ [assert-true] Component schema for select is missing metadata. */ -/* ✔ [assert-equal] Component schema for light indigo select has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light indigo select has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for select is missing name metadata. */ -/* ✔ [assert-true] Component schema for slider is missing metadata. */ -/* ✔ [assert-equal] Component schema for light indigo slider has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light indigo slider has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for slider is missing name metadata. */ -/* ✔ [assert-true] Component schema for snackbar is missing metadata. */ -/* ✔ [assert-equal] Component schema for light indigo snackbar has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light indigo snackbar has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for snackbar is missing name metadata. */ -/* ✔ [assert-true] Component schema for splitter is missing metadata. */ -/* ✔ [assert-equal] Component schema for light indigo splitter has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light indigo splitter has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for splitter is missing name metadata. */ -/* ✔ [assert-true] Component schema for stepper is missing metadata. */ -/* ✔ [assert-equal] Component schema for light indigo stepper has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light indigo stepper has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for stepper is missing name metadata. */ -/* ✔ [assert-true] Component schema for switch is missing metadata. */ -/* ✔ [assert-equal] Component schema for light indigo switch has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light indigo switch has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for switch is missing name metadata. */ -/* ✔ [assert-true] Component schema for tabs is missing metadata. */ -/* ✔ [assert-equal] Component schema for light indigo tabs has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light indigo tabs has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for tabs is missing name metadata. */ -/* ✔ [assert-true] Component schema for tile-manager is missing metadata. */ -/* ✔ [assert-equal] Component schema for light indigo tile-manager has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light indigo tile-manager has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for tile-manager is missing name metadata. */ -/* ✔ [assert-true] Component schema for time-picker is missing metadata. */ -/* ✔ [assert-equal] Component schema for light indigo time-picker has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light indigo time-picker has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for time-picker is missing name metadata. */ -/* ✔ [assert-true] Component schema for toast is missing metadata. */ -/* ✔ [assert-equal] Component schema for light indigo toast has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light indigo toast has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for toast is missing name metadata. */ -/* ✔ [assert-true] Component schema for tooltip is missing metadata. */ -/* ✔ [assert-equal] Component schema for light indigo tooltip has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light indigo tooltip has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for tooltip is missing name metadata. */ -/* ✔ [assert-true] Component schema for tree is missing metadata. */ -/* ✔ [assert-equal] Component schema for light indigo tree has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light indigo tree has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for tree is missing name metadata. */ -/* ✔ [assert-true] Component schema for validator is missing metadata. */ -/* ✔ [assert-equal] Component schema for light indigo validator has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light indigo validator has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for validator is missing name metadata. */ -/* ✔ [assert-true] Component schema for watermark is missing metadata. */ -/* ✔ [assert-equal] Component schema for light indigo watermark has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light indigo watermark has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for watermark is missing name metadata. */ -/* ✔ [assert-true] Component schema for file-input is missing metadata. */ -/* ✔ [assert-equal] Component schema for light indigo file-input has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light indigo file-input has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for file-input is missing name metadata. */ -/* ✔ [assert-true] Component schema for category-chart is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark material category-chart has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark material category-chart has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for category-chart is missing name metadata. */ -/* ✔ [assert-true] Component schema for data-chart is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark material data-chart has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark material data-chart has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for data-chart is missing name metadata. */ -/* ✔ [assert-true] Component schema for doughnut-chart is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark material doughnut-chart has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark material doughnut-chart has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for doughnut-chart is missing name metadata. */ -/* ✔ [assert-true] Component schema for financial-chart is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark material financial-chart has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark material financial-chart has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for financial-chart is missing name metadata. */ -/* ✔ [assert-true] Component schema for funnel-chart is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark material funnel-chart has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark material funnel-chart has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for funnel-chart is missing name metadata. */ -/* ✔ [assert-true] Component schema for linear-gauge is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark material linear-gauge has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark material linear-gauge has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for linear-gauge is missing name metadata. */ -/* ✔ [assert-true] Component schema for radial-gauge is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark material radial-gauge has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark material radial-gauge has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for radial-gauge is missing name metadata. */ -/* ✔ [assert-true] Component schema for geo-map is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark material geo-map has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark material geo-map has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for geo-map is missing name metadata. */ -/* ✔ [assert-true] Component schema for bullet-graph is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark material bullet-graph has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark material bullet-graph has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for bullet-graph is missing name metadata. */ -/* ✔ [assert-true] Component schema for pie-chart is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark material pie-chart has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark material pie-chart has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for pie-chart is missing name metadata. */ -/* ✔ [assert-true] Component schema for shape-chart is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark material shape-chart has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark material shape-chart has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for shape-chart is missing name metadata. */ -/* ✔ [assert-true] Component schema for sparkline is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark material sparkline has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark material sparkline has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for sparkline is missing name metadata. */ -/* ✔ [assert-true] Component schema for action-strip is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark material action-strip has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark material action-strip has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for action-strip is missing name metadata. */ -/* ✔ [assert-true] Component schema for avatar is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark material avatar has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark material avatar has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for avatar is missing name metadata. */ -/* ✔ [assert-true] Component schema for badge is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark material badge has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark material badge has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for badge is missing name metadata. */ -/* ✔ [assert-true] Component schema for banner is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark material banner has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark material banner has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for banner is missing name metadata. */ -/* ✔ [assert-true] Component schema for bottom-nav is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark material bottom-nav has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark material bottom-nav has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for bottom-nav is missing name metadata. */ -/* ✔ [assert-true] Component schema for flat button is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark material flat button has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark material flat button has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for flat button is missing name metadata. */ -/* ✔ [assert-true] Component schema for outlined button is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark material outlined button has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark material outlined button has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for outlined button is missing name metadata. */ -/* ✔ [assert-true] Component schema for contained button is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark material contained button has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark material contained button has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for contained button is missing name metadata. */ -/* ✔ [assert-true] Component schema for fab button is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark material fab button has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark material fab button has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for fab button is missing name metadata. */ -/* ✔ [assert-true] Component schema for button-group is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark material button-group has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark material button-group has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for button-group is missing name metadata. */ -/* ✔ [assert-true] Component schema for calendar is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark material calendar has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark material calendar has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for calendar is missing name metadata. */ -/* ✔ [assert-true] Component schema for card is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark material card has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark material card has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for card is missing name metadata. */ -/* ✔ [assert-true] Component schema for carousel is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark material carousel has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark material carousel has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for carousel is missing name metadata. */ -/* ✔ [assert-true] Component schema for chat is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark material chat has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark material chat has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for chat is missing name metadata. */ -/* ✔ [assert-true] Component schema for checkbox is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark material checkbox has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark material checkbox has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for checkbox is missing name metadata. */ -/* ✔ [assert-true] Component schema for chip is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark material chip has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark material chip has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for chip is missing name metadata. */ -/* ✔ [assert-true] Component schema for color-picker is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark material color-picker has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark material color-picker has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for color-picker is missing name metadata. */ -/* ✔ [assert-true] Component schema for column-actions is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark material column-actions has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark material column-actions has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for column-actions is missing name metadata. */ -/* ✔ [assert-true] Component schema for combo is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark material combo has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark material combo has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for combo is missing name metadata. */ -/* ✔ [assert-true] Component schema for date-picker is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark material date-picker has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark material date-picker has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for date-picker is missing name metadata. */ -/* ✔ [assert-true] Component schema for date-range is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark material date-range has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark material date-range has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for date-range is missing name metadata. */ -/* ✔ [assert-true] Component schema for dialog is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark material dialog has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark material dialog has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for dialog is missing name metadata. */ -/* ✔ [assert-true] Component schema for divider is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark material divider has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark material divider has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for divider is missing name metadata. */ -/* ✔ [assert-true] Component schema for dockmanager is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark material dockmanager has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark material dockmanager has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for dockmanager is missing name metadata. */ -/* ✔ [assert-true] Component schema for drop-down is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark material drop-down has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark material drop-down has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for drop-down is missing name metadata. */ -/* ✔ [assert-true] Component schema for expansion-panel is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark material expansion-panel has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark material expansion-panel has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for expansion-panel is missing name metadata. */ -/* ✔ [assert-true] Component schema for grid is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark material grid has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark material grid has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for grid is missing name metadata. */ -/* ✔ [assert-true] Component schema for grid-excel-filtering is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark material grid-excel-filtering has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark material grid-excel-filtering has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for grid-excel-filtering is missing name metadata. */ -/* ✔ [assert-true] Component schema for grid-filtering is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark material grid-filtering has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark material grid-filtering has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for grid-filtering is missing name metadata. */ -/* ✔ [assert-true] Component schema for grid-summary is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark material grid-summary has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark material grid-summary has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for grid-summary is missing name metadata. */ -/* ✔ [assert-true] Component schema for grid-toolbar is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark material grid-toolbar has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark material grid-toolbar has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for grid-toolbar is missing name metadata. */ -/* ✔ [assert-true] Component schema for highlight is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark material highlight has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark material highlight has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for highlight is missing name metadata. */ -/* ✔ [assert-true] Component schema for icon is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark material icon has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark material icon has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for icon is missing name metadata. */ -/* ✔ [assert-true] Component schema for flat icon-button is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark material flat icon-button has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark material flat icon-button has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for flat icon-button is missing name metadata. */ -/* ✔ [assert-true] Component schema for outlined icon-button is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark material outlined icon-button has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark material outlined icon-button has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for outlined icon-button is missing name metadata. */ -/* ✔ [assert-true] Component schema for contained icon-button is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark material contained icon-button has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark material contained icon-button has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for contained icon-button is missing name metadata. */ -/* ✔ [assert-true] Component schema for input-group is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark material input-group has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark material input-group has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for input-group is missing name metadata. */ -/* ✔ [assert-true] Component schema for label is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark material label has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark material label has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for label is missing name metadata. */ -/* ✔ [assert-true] Component schema for list is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark material list has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark material list has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for list is missing name metadata. */ -/* ✔ [assert-true] Component schema for navbar is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark material navbar has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark material navbar has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for navbar is missing name metadata. */ -/* ✔ [assert-true] Component schema for nav-drawer is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark material nav-drawer has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark material nav-drawer has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for nav-drawer is missing name metadata. */ -/* ✔ [assert-true] Component schema for overlay is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark material overlay has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark material overlay has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for overlay is missing name metadata. */ -/* ✔ [assert-true] Component schema for paginator is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark material paginator has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark material paginator has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for paginator is missing name metadata. */ -/* ✔ [assert-true] Component schema for pivot-data-selector is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark material pivot-data-selector has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark material pivot-data-selector has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for pivot-data-selector is missing name metadata. */ -/* ✔ [assert-true] Component schema for linear-bar is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark material linear-bar has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark material linear-bar has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for linear-bar is missing name metadata. */ -/* ✔ [assert-true] Component schema for circular-bar is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark material circular-bar has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark material circular-bar has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for circular-bar is missing name metadata. */ -/* ✔ [assert-true] Component schema for qr-code is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark material qr-code has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark material qr-code has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for qr-code is missing name metadata. */ -/* ✔ [assert-true] Component schema for query-builder is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark material query-builder has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark material query-builder has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for query-builder is missing name metadata. */ -/* ✔ [assert-true] Component schema for radio is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark material radio has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark material radio has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for radio is missing name metadata. */ -/* ✔ [assert-true] Component schema for rating is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark material rating has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark material rating has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for rating is missing name metadata. */ -/* ✔ [assert-true] Component schema for resize-indicator is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark material resize-indicator has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark material resize-indicator has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for resize-indicator is missing name metadata. */ -/* ✔ [assert-true] Component schema for ripple is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark material ripple has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark material ripple has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for ripple is missing name metadata. */ -/* ✔ [assert-true] Component schema for scrollbar is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark material scrollbar has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark material scrollbar has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for scrollbar is missing name metadata. */ -/* ✔ [assert-true] Component schema for select is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark material select has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark material select has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for select is missing name metadata. */ -/* ✔ [assert-true] Component schema for slider is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark material slider has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark material slider has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for slider is missing name metadata. */ -/* ✔ [assert-true] Component schema for snackbar is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark material snackbar has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark material snackbar has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for snackbar is missing name metadata. */ -/* ✔ [assert-true] Component schema for splitter is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark material splitter has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark material splitter has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for splitter is missing name metadata. */ -/* ✔ [assert-true] Component schema for stepper is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark material stepper has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark material stepper has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for stepper is missing name metadata. */ -/* ✔ [assert-true] Component schema for switch is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark material switch has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark material switch has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for switch is missing name metadata. */ -/* ✔ [assert-true] Component schema for tabs is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark material tabs has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark material tabs has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for tabs is missing name metadata. */ -/* ✔ [assert-true] Component schema for tile-manager is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark material tile-manager has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark material tile-manager has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for tile-manager is missing name metadata. */ -/* ✔ [assert-true] Component schema for time-picker is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark material time-picker has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark material time-picker has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for time-picker is missing name metadata. */ -/* ✔ [assert-true] Component schema for toast is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark material toast has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark material toast has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for toast is missing name metadata. */ -/* ✔ [assert-true] Component schema for tooltip is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark material tooltip has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark material tooltip has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for tooltip is missing name metadata. */ -/* ✔ [assert-true] Component schema for tree is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark material tree has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark material tree has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for tree is missing name metadata. */ -/* ✔ [assert-true] Component schema for validator is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark material validator has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark material validator has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for validator is missing name metadata. */ -/* ✔ [assert-true] Component schema for watermark is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark material watermark has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark material watermark has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for watermark is missing name metadata. */ -/* ✔ [assert-true] Component schema for file-input is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark material file-input has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark material file-input has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for file-input is missing name metadata. */ -/* ✔ [assert-true] Component schema for category-chart is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap category-chart has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap category-chart has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for category-chart is missing name metadata. */ -/* ✔ [assert-true] Component schema for data-chart is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap data-chart has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap data-chart has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for data-chart is missing name metadata. */ -/* ✔ [assert-true] Component schema for doughnut-chart is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap doughnut-chart has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap doughnut-chart has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for doughnut-chart is missing name metadata. */ -/* ✔ [assert-true] Component schema for financial-chart is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap financial-chart has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap financial-chart has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for financial-chart is missing name metadata. */ -/* ✔ [assert-true] Component schema for funnel-chart is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap funnel-chart has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap funnel-chart has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for funnel-chart is missing name metadata. */ -/* ✔ [assert-true] Component schema for linear-gauge is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap linear-gauge has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap linear-gauge has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for linear-gauge is missing name metadata. */ -/* ✔ [assert-true] Component schema for radial-gauge is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap radial-gauge has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap radial-gauge has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for radial-gauge is missing name metadata. */ -/* ✔ [assert-true] Component schema for geo-map is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap geo-map has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap geo-map has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for geo-map is missing name metadata. */ -/* ✔ [assert-true] Component schema for bullet-graph is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap bullet-graph has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap bullet-graph has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for bullet-graph is missing name metadata. */ -/* ✔ [assert-true] Component schema for pie-chart is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap pie-chart has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap pie-chart has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for pie-chart is missing name metadata. */ -/* ✔ [assert-true] Component schema for shape-chart is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap shape-chart has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap shape-chart has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for shape-chart is missing name metadata. */ -/* ✔ [assert-true] Component schema for sparkline is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap sparkline has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap sparkline has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for sparkline is missing name metadata. */ -/* ✔ [assert-true] Component schema for action-strip is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap action-strip has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap action-strip has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for action-strip is missing name metadata. */ -/* ✔ [assert-true] Component schema for avatar is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap avatar has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap avatar has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for avatar is missing name metadata. */ -/* ✔ [assert-true] Component schema for badge is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap badge has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap badge has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for badge is missing name metadata. */ -/* ✔ [assert-true] Component schema for banner is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap banner has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap banner has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for banner is missing name metadata. */ -/* ✔ [assert-true] Component schema for bottom-nav is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap bottom-nav has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap bottom-nav has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for bottom-nav is missing name metadata. */ -/* ✔ [assert-true] Component schema for flat button is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap flat button has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap flat button has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for flat button is missing name metadata. */ -/* ✔ [assert-true] Component schema for outlined button is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap outlined button has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap outlined button has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for outlined button is missing name metadata. */ -/* ✔ [assert-true] Component schema for contained button is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap contained button has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap contained button has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for contained button is missing name metadata. */ -/* ✔ [assert-true] Component schema for fab button is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap fab button has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap fab button has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for fab button is missing name metadata. */ -/* ✔ [assert-true] Component schema for button-group is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap button-group has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap button-group has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for button-group is missing name metadata. */ -/* ✔ [assert-true] Component schema for calendar is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap calendar has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap calendar has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for calendar is missing name metadata. */ -/* ✔ [assert-true] Component schema for card is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap card has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap card has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for card is missing name metadata. */ -/* ✔ [assert-true] Component schema for carousel is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap carousel has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap carousel has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for carousel is missing name metadata. */ -/* ✔ [assert-true] Component schema for chat is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap chat has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap chat has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for chat is missing name metadata. */ -/* ✔ [assert-true] Component schema for checkbox is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap checkbox has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap checkbox has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for checkbox is missing name metadata. */ -/* ✔ [assert-true] Component schema for chip is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap chip has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap chip has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for chip is missing name metadata. */ -/* ✔ [assert-true] Component schema for color-picker is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap color-picker has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap color-picker has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for color-picker is missing name metadata. */ -/* ✔ [assert-true] Component schema for column-actions is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap column-actions has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap column-actions has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for column-actions is missing name metadata. */ -/* ✔ [assert-true] Component schema for combo is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap combo has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap combo has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for combo is missing name metadata. */ -/* ✔ [assert-true] Component schema for date-picker is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap date-picker has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap date-picker has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for date-picker is missing name metadata. */ -/* ✔ [assert-true] Component schema for date-range is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap date-range has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap date-range has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for date-range is missing name metadata. */ -/* ✔ [assert-true] Component schema for dialog is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap dialog has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap dialog has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for dialog is missing name metadata. */ -/* ✔ [assert-true] Component schema for divider is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap divider has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap divider has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for divider is missing name metadata. */ -/* ✔ [assert-true] Component schema for dockmanager is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap dockmanager has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap dockmanager has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for dockmanager is missing name metadata. */ -/* ✔ [assert-true] Component schema for drop-down is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap drop-down has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap drop-down has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for drop-down is missing name metadata. */ -/* ✔ [assert-true] Component schema for expansion-panel is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap expansion-panel has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap expansion-panel has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for expansion-panel is missing name metadata. */ -/* ✔ [assert-true] Component schema for grid is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap grid has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap grid has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for grid is missing name metadata. */ -/* ✔ [assert-true] Component schema for grid-excel-filtering is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap grid-excel-filtering has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap grid-excel-filtering has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for grid-excel-filtering is missing name metadata. */ -/* ✔ [assert-true] Component schema for grid-filtering is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap grid-filtering has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap grid-filtering has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for grid-filtering is missing name metadata. */ -/* ✔ [assert-true] Component schema for grid-summary is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap grid-summary has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap grid-summary has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for grid-summary is missing name metadata. */ -/* ✔ [assert-true] Component schema for grid-toolbar is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap grid-toolbar has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap grid-toolbar has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for grid-toolbar is missing name metadata. */ -/* ✔ [assert-true] Component schema for highlight is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap highlight has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap highlight has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for highlight is missing name metadata. */ -/* ✔ [assert-true] Component schema for icon is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap icon has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap icon has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for icon is missing name metadata. */ -/* ✔ [assert-true] Component schema for flat icon-button is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap flat icon-button has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap flat icon-button has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for flat icon-button is missing name metadata. */ -/* ✔ [assert-true] Component schema for outlined icon-button is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap outlined icon-button has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap outlined icon-button has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for outlined icon-button is missing name metadata. */ -/* ✔ [assert-true] Component schema for contained icon-button is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap contained icon-button has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap contained icon-button has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for contained icon-button is missing name metadata. */ -/* ✔ [assert-true] Component schema for input-group is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap input-group has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap input-group has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for input-group is missing name metadata. */ -/* ✔ [assert-true] Component schema for label is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap label has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap label has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for label is missing name metadata. */ -/* ✔ [assert-true] Component schema for list is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap list has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap list has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for list is missing name metadata. */ -/* ✔ [assert-true] Component schema for navbar is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap navbar has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap navbar has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for navbar is missing name metadata. */ -/* ✔ [assert-true] Component schema for nav-drawer is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap nav-drawer has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap nav-drawer has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for nav-drawer is missing name metadata. */ -/* ✔ [assert-true] Component schema for overlay is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap overlay has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap overlay has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for overlay is missing name metadata. */ -/* ✔ [assert-true] Component schema for paginator is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap paginator has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap paginator has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for paginator is missing name metadata. */ -/* ✔ [assert-true] Component schema for pivot-data-selector is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap pivot-data-selector has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap pivot-data-selector has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for pivot-data-selector is missing name metadata. */ -/* ✔ [assert-true] Component schema for linear-bar is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap linear-bar has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap linear-bar has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for linear-bar is missing name metadata. */ -/* ✔ [assert-true] Component schema for circular-bar is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap circular-bar has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap circular-bar has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for circular-bar is missing name metadata. */ -/* ✔ [assert-true] Component schema for qr-code is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap qr-code has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap qr-code has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for qr-code is missing name metadata. */ -/* ✔ [assert-true] Component schema for query-builder is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap query-builder has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap query-builder has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for query-builder is missing name metadata. */ -/* ✔ [assert-true] Component schema for radio is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap radio has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap radio has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for radio is missing name metadata. */ -/* ✔ [assert-true] Component schema for rating is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap rating has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap rating has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for rating is missing name metadata. */ -/* ✔ [assert-true] Component schema for resize-indicator is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap resize-indicator has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap resize-indicator has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for resize-indicator is missing name metadata. */ -/* ✔ [assert-true] Component schema for ripple is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap ripple has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap ripple has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for ripple is missing name metadata. */ -/* ✔ [assert-true] Component schema for scrollbar is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap scrollbar has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap scrollbar has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for scrollbar is missing name metadata. */ -/* ✔ [assert-true] Component schema for select is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap select has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap select has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for select is missing name metadata. */ -/* ✔ [assert-true] Component schema for slider is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap slider has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap slider has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for slider is missing name metadata. */ -/* ✔ [assert-true] Component schema for snackbar is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap snackbar has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap snackbar has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for snackbar is missing name metadata. */ -/* ✔ [assert-true] Component schema for splitter is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap splitter has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap splitter has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for splitter is missing name metadata. */ -/* ✔ [assert-true] Component schema for stepper is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap stepper has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap stepper has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for stepper is missing name metadata. */ -/* ✔ [assert-true] Component schema for switch is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap switch has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap switch has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for switch is missing name metadata. */ -/* ✔ [assert-true] Component schema for tabs is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap tabs has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap tabs has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for tabs is missing name metadata. */ -/* ✔ [assert-true] Component schema for tile-manager is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap tile-manager has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap tile-manager has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for tile-manager is missing name metadata. */ -/* ✔ [assert-true] Component schema for time-picker is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap time-picker has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap time-picker has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for time-picker is missing name metadata. */ -/* ✔ [assert-true] Component schema for toast is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap toast has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap toast has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for toast is missing name metadata. */ -/* ✔ [assert-true] Component schema for tooltip is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap tooltip has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap tooltip has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for tooltip is missing name metadata. */ -/* ✔ [assert-true] Component schema for tree is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap tree has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap tree has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for tree is missing name metadata. */ -/* ✔ [assert-true] Component schema for validator is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap validator has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap validator has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for validator is missing name metadata. */ -/* ✔ [assert-true] Component schema for watermark is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap watermark has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap watermark has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for watermark is missing name metadata. */ -/* ✔ [assert-true] Component schema for file-input is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap file-input has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap file-input has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for file-input is missing name metadata. */ -/* ✔ [assert-true] Component schema for category-chart is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent category-chart has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent category-chart has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for category-chart is missing name metadata. */ -/* ✔ [assert-true] Component schema for data-chart is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent data-chart has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent data-chart has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for data-chart is missing name metadata. */ -/* ✔ [assert-true] Component schema for doughnut-chart is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent doughnut-chart has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent doughnut-chart has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for doughnut-chart is missing name metadata. */ -/* ✔ [assert-true] Component schema for financial-chart is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent financial-chart has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent financial-chart has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for financial-chart is missing name metadata. */ -/* ✔ [assert-true] Component schema for funnel-chart is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent funnel-chart has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent funnel-chart has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for funnel-chart is missing name metadata. */ -/* ✔ [assert-true] Component schema for linear-gauge is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent linear-gauge has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent linear-gauge has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for linear-gauge is missing name metadata. */ -/* ✔ [assert-true] Component schema for radial-gauge is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent radial-gauge has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent radial-gauge has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for radial-gauge is missing name metadata. */ -/* ✔ [assert-true] Component schema for geo-map is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent geo-map has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent geo-map has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for geo-map is missing name metadata. */ -/* ✔ [assert-true] Component schema for bullet-graph is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent bullet-graph has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent bullet-graph has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for bullet-graph is missing name metadata. */ -/* ✔ [assert-true] Component schema for pie-chart is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent pie-chart has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent pie-chart has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for pie-chart is missing name metadata. */ -/* ✔ [assert-true] Component schema for shape-chart is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent shape-chart has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent shape-chart has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for shape-chart is missing name metadata. */ -/* ✔ [assert-true] Component schema for sparkline is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent sparkline has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent sparkline has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for sparkline is missing name metadata. */ -/* ✔ [assert-true] Component schema for action-strip is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent action-strip has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent action-strip has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for action-strip is missing name metadata. */ -/* ✔ [assert-true] Component schema for avatar is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent avatar has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent avatar has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for avatar is missing name metadata. */ -/* ✔ [assert-true] Component schema for badge is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent badge has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent badge has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for badge is missing name metadata. */ -/* ✔ [assert-true] Component schema for banner is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent banner has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent banner has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for banner is missing name metadata. */ -/* ✔ [assert-true] Component schema for bottom-nav is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent bottom-nav has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent bottom-nav has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for bottom-nav is missing name metadata. */ -/* ✔ [assert-true] Component schema for flat button is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent flat button has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent flat button has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for flat button is missing name metadata. */ -/* ✔ [assert-true] Component schema for outlined button is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent outlined button has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent outlined button has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for outlined button is missing name metadata. */ -/* ✔ [assert-true] Component schema for contained button is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent contained button has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent contained button has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for contained button is missing name metadata. */ -/* ✔ [assert-true] Component schema for fab button is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent fab button has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent fab button has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for fab button is missing name metadata. */ -/* ✔ [assert-true] Component schema for button-group is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent button-group has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent button-group has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for button-group is missing name metadata. */ -/* ✔ [assert-true] Component schema for calendar is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent calendar has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent calendar has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for calendar is missing name metadata. */ -/* ✔ [assert-true] Component schema for card is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent card has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent card has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for card is missing name metadata. */ -/* ✔ [assert-true] Component schema for carousel is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent carousel has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent carousel has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for carousel is missing name metadata. */ -/* ✔ [assert-true] Component schema for chat is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent chat has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent chat has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for chat is missing name metadata. */ -/* ✔ [assert-true] Component schema for checkbox is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent checkbox has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent checkbox has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for checkbox is missing name metadata. */ -/* ✔ [assert-true] Component schema for chip is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent chip has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent chip has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for chip is missing name metadata. */ -/* ✔ [assert-true] Component schema for color-picker is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent color-picker has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent color-picker has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for color-picker is missing name metadata. */ -/* ✔ [assert-true] Component schema for column-actions is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent column-actions has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent column-actions has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for column-actions is missing name metadata. */ -/* ✔ [assert-true] Component schema for combo is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent combo has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent combo has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for combo is missing name metadata. */ -/* ✔ [assert-true] Component schema for date-picker is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent date-picker has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent date-picker has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for date-picker is missing name metadata. */ -/* ✔ [assert-true] Component schema for date-range is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent date-range has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent date-range has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for date-range is missing name metadata. */ -/* ✔ [assert-true] Component schema for dialog is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent dialog has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent dialog has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for dialog is missing name metadata. */ -/* ✔ [assert-true] Component schema for divider is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent divider has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent divider has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for divider is missing name metadata. */ -/* ✔ [assert-true] Component schema for dockmanager is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent dockmanager has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent dockmanager has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for dockmanager is missing name metadata. */ -/* ✔ [assert-true] Component schema for drop-down is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent drop-down has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent drop-down has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for drop-down is missing name metadata. */ -/* ✔ [assert-true] Component schema for expansion-panel is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent expansion-panel has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent expansion-panel has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for expansion-panel is missing name metadata. */ -/* ✔ [assert-true] Component schema for grid is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent grid has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent grid has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for grid is missing name metadata. */ -/* ✔ [assert-true] Component schema for grid-excel-filtering is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent grid-excel-filtering has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent grid-excel-filtering has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for grid-excel-filtering is missing name metadata. */ -/* ✔ [assert-true] Component schema for grid-filtering is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent grid-filtering has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent grid-filtering has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for grid-filtering is missing name metadata. */ -/* ✔ [assert-true] Component schema for grid-summary is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent grid-summary has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent grid-summary has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for grid-summary is missing name metadata. */ -/* ✔ [assert-true] Component schema for grid-toolbar is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent grid-toolbar has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent grid-toolbar has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for grid-toolbar is missing name metadata. */ -/* ✔ [assert-true] Component schema for highlight is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent highlight has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent highlight has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for highlight is missing name metadata. */ -/* ✔ [assert-true] Component schema for icon is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent icon has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent icon has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for icon is missing name metadata. */ -/* ✔ [assert-true] Component schema for flat icon-button is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent flat icon-button has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent flat icon-button has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for flat icon-button is missing name metadata. */ -/* ✔ [assert-true] Component schema for outlined icon-button is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent outlined icon-button has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent outlined icon-button has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for outlined icon-button is missing name metadata. */ -/* ✔ [assert-true] Component schema for contained icon-button is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent contained icon-button has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent contained icon-button has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for contained icon-button is missing name metadata. */ -/* ✔ [assert-true] Component schema for input-group is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent input-group has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent input-group has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for input-group is missing name metadata. */ -/* ✔ [assert-true] Component schema for label is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent label has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent label has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for label is missing name metadata. */ -/* ✔ [assert-true] Component schema for list is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent list has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent list has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for list is missing name metadata. */ -/* ✔ [assert-true] Component schema for navbar is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent navbar has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent navbar has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for navbar is missing name metadata. */ -/* ✔ [assert-true] Component schema for nav-drawer is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent nav-drawer has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent nav-drawer has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for nav-drawer is missing name metadata. */ -/* ✔ [assert-true] Component schema for overlay is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent overlay has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent overlay has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for overlay is missing name metadata. */ -/* ✔ [assert-true] Component schema for paginator is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent paginator has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent paginator has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for paginator is missing name metadata. */ -/* ✔ [assert-true] Component schema for pivot-data-selector is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent pivot-data-selector has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent pivot-data-selector has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for pivot-data-selector is missing name metadata. */ -/* ✔ [assert-true] Component schema for linear-bar is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent linear-bar has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent linear-bar has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for linear-bar is missing name metadata. */ -/* ✔ [assert-true] Component schema for circular-bar is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent circular-bar has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent circular-bar has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for circular-bar is missing name metadata. */ -/* ✔ [assert-true] Component schema for qr-code is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent qr-code has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent qr-code has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for qr-code is missing name metadata. */ -/* ✔ [assert-true] Component schema for query-builder is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent query-builder has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent query-builder has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for query-builder is missing name metadata. */ -/* ✔ [assert-true] Component schema for radio is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent radio has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent radio has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for radio is missing name metadata. */ -/* ✔ [assert-true] Component schema for rating is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent rating has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent rating has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for rating is missing name metadata. */ -/* ✔ [assert-true] Component schema for resize-indicator is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent resize-indicator has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent resize-indicator has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for resize-indicator is missing name metadata. */ -/* ✔ [assert-true] Component schema for ripple is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent ripple has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent ripple has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for ripple is missing name metadata. */ -/* ✔ [assert-true] Component schema for scrollbar is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent scrollbar has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent scrollbar has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for scrollbar is missing name metadata. */ -/* ✔ [assert-true] Component schema for select is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent select has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent select has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for select is missing name metadata. */ -/* ✔ [assert-true] Component schema for slider is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent slider has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent slider has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for slider is missing name metadata. */ -/* ✔ [assert-true] Component schema for snackbar is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent snackbar has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent snackbar has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for snackbar is missing name metadata. */ -/* ✔ [assert-true] Component schema for splitter is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent splitter has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent splitter has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for splitter is missing name metadata. */ -/* ✔ [assert-true] Component schema for stepper is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent stepper has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent stepper has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for stepper is missing name metadata. */ -/* ✔ [assert-true] Component schema for switch is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent switch has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent switch has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for switch is missing name metadata. */ -/* ✔ [assert-true] Component schema for tabs is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent tabs has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent tabs has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for tabs is missing name metadata. */ -/* ✔ [assert-true] Component schema for tile-manager is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent tile-manager has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent tile-manager has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for tile-manager is missing name metadata. */ -/* ✔ [assert-true] Component schema for time-picker is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent time-picker has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent time-picker has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for time-picker is missing name metadata. */ -/* ✔ [assert-true] Component schema for toast is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent toast has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent toast has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for toast is missing name metadata. */ -/* ✔ [assert-true] Component schema for tooltip is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent tooltip has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent tooltip has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for tooltip is missing name metadata. */ -/* ✔ [assert-true] Component schema for tree is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent tree has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent tree has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for tree is missing name metadata. */ -/* ✔ [assert-true] Component schema for validator is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent validator has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent validator has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for validator is missing name metadata. */ -/* ✔ [assert-true] Component schema for watermark is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent watermark has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent watermark has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for watermark is missing name metadata. */ -/* ✔ [assert-true] Component schema for file-input is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent file-input has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent file-input has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for file-input is missing name metadata. */ -/* ✔ [assert-true] Component schema for category-chart is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo category-chart has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo category-chart has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for category-chart is missing name metadata. */ -/* ✔ [assert-true] Component schema for data-chart is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo data-chart has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo data-chart has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for data-chart is missing name metadata. */ -/* ✔ [assert-true] Component schema for doughnut-chart is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo doughnut-chart has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo doughnut-chart has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for doughnut-chart is missing name metadata. */ -/* ✔ [assert-true] Component schema for financial-chart is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo financial-chart has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo financial-chart has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for financial-chart is missing name metadata. */ -/* ✔ [assert-true] Component schema for funnel-chart is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo funnel-chart has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo funnel-chart has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for funnel-chart is missing name metadata. */ -/* ✔ [assert-true] Component schema for linear-gauge is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo linear-gauge has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo linear-gauge has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for linear-gauge is missing name metadata. */ -/* ✔ [assert-true] Component schema for radial-gauge is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo radial-gauge has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo radial-gauge has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for radial-gauge is missing name metadata. */ -/* ✔ [assert-true] Component schema for geo-map is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo geo-map has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo geo-map has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for geo-map is missing name metadata. */ -/* ✔ [assert-true] Component schema for bullet-graph is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo bullet-graph has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo bullet-graph has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for bullet-graph is missing name metadata. */ -/* ✔ [assert-true] Component schema for pie-chart is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo pie-chart has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo pie-chart has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for pie-chart is missing name metadata. */ -/* ✔ [assert-true] Component schema for shape-chart is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo shape-chart has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo shape-chart has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for shape-chart is missing name metadata. */ -/* ✔ [assert-true] Component schema for sparkline is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo sparkline has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo sparkline has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for sparkline is missing name metadata. */ -/* ✔ [assert-true] Component schema for action-strip is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo action-strip has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo action-strip has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for action-strip is missing name metadata. */ -/* ✔ [assert-true] Component schema for avatar is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo avatar has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo avatar has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for avatar is missing name metadata. */ -/* ✔ [assert-true] Component schema for badge is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo badge has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo badge has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for badge is missing name metadata. */ -/* ✔ [assert-true] Component schema for banner is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo banner has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo banner has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for banner is missing name metadata. */ -/* ✔ [assert-true] Component schema for bottom-nav is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo bottom-nav has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo bottom-nav has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for bottom-nav is missing name metadata. */ -/* ✔ [assert-true] Component schema for flat button is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo flat button has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo flat button has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for flat button is missing name metadata. */ -/* ✔ [assert-true] Component schema for outlined button is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo outlined button has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo outlined button has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for outlined button is missing name metadata. */ -/* ✔ [assert-true] Component schema for contained button is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo contained button has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo contained button has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for contained button is missing name metadata. */ -/* ✔ [assert-true] Component schema for fab button is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo fab button has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo fab button has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for fab button is missing name metadata. */ -/* ✔ [assert-true] Component schema for button-group is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo button-group has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo button-group has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for button-group is missing name metadata. */ -/* ✔ [assert-true] Component schema for calendar is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo calendar has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo calendar has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for calendar is missing name metadata. */ -/* ✔ [assert-true] Component schema for card is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo card has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo card has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for card is missing name metadata. */ -/* ✔ [assert-true] Component schema for carousel is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo carousel has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo carousel has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for carousel is missing name metadata. */ -/* ✔ [assert-true] Component schema for chat is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo chat has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo chat has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for chat is missing name metadata. */ -/* ✔ [assert-true] Component schema for checkbox is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo checkbox has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo checkbox has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for checkbox is missing name metadata. */ -/* ✔ [assert-true] Component schema for chip is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo chip has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo chip has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for chip is missing name metadata. */ -/* ✔ [assert-true] Component schema for color-picker is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo color-picker has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo color-picker has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for color-picker is missing name metadata. */ -/* ✔ [assert-true] Component schema for column-actions is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo column-actions has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo column-actions has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for column-actions is missing name metadata. */ -/* ✔ [assert-true] Component schema for combo is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo combo has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo combo has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for combo is missing name metadata. */ -/* ✔ [assert-true] Component schema for date-picker is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo date-picker has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo date-picker has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for date-picker is missing name metadata. */ -/* ✔ [assert-true] Component schema for date-range is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo date-range has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo date-range has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for date-range is missing name metadata. */ -/* ✔ [assert-true] Component schema for dialog is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo dialog has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo dialog has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for dialog is missing name metadata. */ -/* ✔ [assert-true] Component schema for divider is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo divider has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo divider has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for divider is missing name metadata. */ -/* ✔ [assert-true] Component schema for dockmanager is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo dockmanager has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo dockmanager has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for dockmanager is missing name metadata. */ -/* ✔ [assert-true] Component schema for drop-down is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo drop-down has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo drop-down has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for drop-down is missing name metadata. */ -/* ✔ [assert-true] Component schema for expansion-panel is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo expansion-panel has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo expansion-panel has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for expansion-panel is missing name metadata. */ -/* ✔ [assert-true] Component schema for grid is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo grid has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo grid has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for grid is missing name metadata. */ -/* ✔ [assert-true] Component schema for grid-excel-filtering is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo grid-excel-filtering has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo grid-excel-filtering has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for grid-excel-filtering is missing name metadata. */ -/* ✔ [assert-true] Component schema for grid-filtering is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo grid-filtering has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo grid-filtering has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for grid-filtering is missing name metadata. */ -/* ✔ [assert-true] Component schema for grid-summary is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo grid-summary has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo grid-summary has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for grid-summary is missing name metadata. */ -/* ✔ [assert-true] Component schema for grid-toolbar is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo grid-toolbar has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo grid-toolbar has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for grid-toolbar is missing name metadata. */ -/* ✔ [assert-true] Component schema for highlight is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo highlight has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo highlight has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for highlight is missing name metadata. */ -/* ✔ [assert-true] Component schema for icon is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo icon has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo icon has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for icon is missing name metadata. */ -/* ✔ [assert-true] Component schema for flat icon-button is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo flat icon-button has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo flat icon-button has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for flat icon-button is missing name metadata. */ -/* ✔ [assert-true] Component schema for outlined icon-button is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo outlined icon-button has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo outlined icon-button has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for outlined icon-button is missing name metadata. */ -/* ✔ [assert-true] Component schema for contained icon-button is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo contained icon-button has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo contained icon-button has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for contained icon-button is missing name metadata. */ -/* ✔ [assert-true] Component schema for input-group is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo input-group has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo input-group has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for input-group is missing name metadata. */ -/* ✔ [assert-true] Component schema for label is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo label has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo label has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for label is missing name metadata. */ -/* ✔ [assert-true] Component schema for list is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo list has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo list has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for list is missing name metadata. */ -/* ✔ [assert-true] Component schema for navbar is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo navbar has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo navbar has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for navbar is missing name metadata. */ -/* ✔ [assert-true] Component schema for nav-drawer is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo nav-drawer has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo nav-drawer has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for nav-drawer is missing name metadata. */ -/* ✔ [assert-true] Component schema for overlay is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo overlay has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo overlay has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for overlay is missing name metadata. */ -/* ✔ [assert-true] Component schema for paginator is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo paginator has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo paginator has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for paginator is missing name metadata. */ -/* ✔ [assert-true] Component schema for pivot-data-selector is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo pivot-data-selector has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo pivot-data-selector has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for pivot-data-selector is missing name metadata. */ -/* ✔ [assert-true] Component schema for linear-bar is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo linear-bar has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo linear-bar has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for linear-bar is missing name metadata. */ -/* ✔ [assert-true] Component schema for circular-bar is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo circular-bar has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo circular-bar has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for circular-bar is missing name metadata. */ -/* ✔ [assert-true] Component schema for qr-code is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo qr-code has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo qr-code has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for qr-code is missing name metadata. */ -/* ✔ [assert-true] Component schema for query-builder is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo query-builder has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo query-builder has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for query-builder is missing name metadata. */ -/* ✔ [assert-true] Component schema for radio is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo radio has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo radio has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for radio is missing name metadata. */ -/* ✔ [assert-true] Component schema for rating is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo rating has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo rating has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for rating is missing name metadata. */ -/* ✔ [assert-true] Component schema for resize-indicator is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo resize-indicator has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo resize-indicator has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for resize-indicator is missing name metadata. */ -/* ✔ [assert-true] Component schema for ripple is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo ripple has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo ripple has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for ripple is missing name metadata. */ -/* ✔ [assert-true] Component schema for scrollbar is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo scrollbar has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo scrollbar has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for scrollbar is missing name metadata. */ -/* ✔ [assert-true] Component schema for select is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo select has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo select has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for select is missing name metadata. */ -/* ✔ [assert-true] Component schema for slider is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo slider has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo slider has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for slider is missing name metadata. */ -/* ✔ [assert-true] Component schema for snackbar is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo snackbar has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo snackbar has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for snackbar is missing name metadata. */ -/* ✔ [assert-true] Component schema for splitter is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo splitter has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo splitter has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for splitter is missing name metadata. */ -/* ✔ [assert-true] Component schema for stepper is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo stepper has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo stepper has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for stepper is missing name metadata. */ -/* ✔ [assert-true] Component schema for switch is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo switch has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo switch has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for switch is missing name metadata. */ -/* ✔ [assert-true] Component schema for tabs is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo tabs has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo tabs has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for tabs is missing name metadata. */ -/* ✔ [assert-true] Component schema for tile-manager is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo tile-manager has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo tile-manager has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for tile-manager is missing name metadata. */ -/* ✔ [assert-true] Component schema for time-picker is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo time-picker has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo time-picker has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for time-picker is missing name metadata. */ -/* ✔ [assert-true] Component schema for toast is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo toast has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo toast has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for toast is missing name metadata. */ -/* ✔ [assert-true] Component schema for tooltip is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo tooltip has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo tooltip has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for tooltip is missing name metadata. */ -/* ✔ [assert-true] Component schema for tree is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo tree has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo tree has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for tree is missing name metadata. */ -/* ✔ [assert-true] Component schema for validator is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo validator has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo validator has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for validator is missing name metadata. */ -/* ✔ [assert-true] Component schema for watermark is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo watermark has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo watermark has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for watermark is missing name metadata. */ -/* ✔ [assert-true] Component schema for file-input is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo file-input has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo file-input has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for file-input is missing name metadata. */ -/* */ -/* Test: should resolve the border-radius function from schema definitions */ -/* ✔ [assert-equal] should resolve the border-radius function from schema definitions */ -/* */ -/* Test: should retrieve a reference to the CSS variable for a given theme */ -/* ✔ [assert-equal] should retrieve a reference to the CSS variable for a given theme */ -/* */ -/* Test: should convert component theme props into CSS variables */ -/* ASSERT: */ -/* OUTPUT */ -.test-output { - --background: var(--igx-test-component-background, var(--ig-test-component-background, var(--ig-primary-400))); - --hover-background: var(--igx-test-component-hover-background, var(--ig-test-component-hover-background, hsl(from var(--ig-secondary-700) h s l/0.26))); - --foreground: var(--igx-test-component-foreground, var(--ig-test-component-foreground, var(--ig-primary-400-contrast))); - --hover-foreground: var(--igx-test-component-hover-foreground, var(--ig-test-component-hover-foreground, var(--ig-secondary-700-contrast))); - --border-style: var(--igx-test-component-border-style, var(--ig-test-component-border-style, solid)); - --border-radius: var(--igx-test-component-border-radius, var(--ig-test-component-border-radius, 0.125rem)); - --brushes: var(--igx-test-component-brushes, var(--ig-test-component-brushes, var(--chart-brushes))); - --resting-elevation: var(--igx-test-component-resting-elevation, var(--ig-test-component-resting-elevation, var(--ig-elevation-2))); - --ig-theme: material; - --ig-theme-variant: light; -} - -/* END_OUTPUT */ -/* EXPECTED */ -.test-output { - --background: var(--igx-test-component-background, var(--ig-test-component-background, var(--ig-primary-400))); - --hover-background: var(--igx-test-component-hover-background, var(--ig-test-component-hover-background, hsl(from var(--ig-secondary-700) h s l/0.26))); - --foreground: var(--igx-test-component-foreground, var(--ig-test-component-foreground, var(--ig-primary-400-contrast))); - --hover-foreground: var(--igx-test-component-hover-foreground, var(--ig-test-component-hover-foreground, var(--ig-secondary-700-contrast))); - --border-style: var(--igx-test-component-border-style, var(--ig-test-component-border-style, solid)); - --border-radius: var(--igx-test-component-border-radius, var(--ig-test-component-border-radius, 0.125rem)); - --brushes: var(--igx-test-component-brushes, var(--ig-test-component-brushes, var(--chart-brushes))); - --resting-elevation: var(--igx-test-component-resting-elevation, var(--ig-test-component-resting-elevation, var(--ig-elevation-2))); - --ig-theme: material; - --ig-theme-variant: light; -} - -/* END_EXPECTED */ -/* END_ASSERT */ -/* */ -/* Test: should prepend the prefix to CSS variable names when the theme map includes a prefix */ -/* ASSERT: */ -/* OUTPUT */ -.test-output { - --igc-background: var(--igx-test-component-background, var(--ig-test-component-background, var(--ig-primary-400))); - --igc-hover-background: var(--igx-test-component-hover-background, var(--ig-test-component-hover-background, hsl(from var(--ig-secondary-700) h s l/0.26))); - --igc-foreground: var(--igx-test-component-foreground, var(--ig-test-component-foreground, var(--ig-primary-400-contrast))); - --igc-hover-foreground: var(--igx-test-component-hover-foreground, var(--ig-test-component-hover-foreground, var(--ig-secondary-700-contrast))); - --igc-border-style: var(--igx-test-component-border-style, var(--ig-test-component-border-style, solid)); - --igc-border-radius: var(--igx-test-component-border-radius, var(--ig-test-component-border-radius, 0.125rem)); - --igc-brushes: var(--igx-test-component-brushes, var(--ig-test-component-brushes, var(--chart-brushes))); - --igc-resting-elevation: var(--igx-test-component-resting-elevation, var(--ig-test-component-resting-elevation, var(--ig-elevation-2))); - --ig-theme: material; - --ig-theme-variant: light; -} - -/* END_OUTPUT */ -/* EXPECTED */ -.test-output { - --igc-background: var(--igx-test-component-background, var(--ig-test-component-background, var(--ig-primary-400))); - --igc-hover-background: var(--igx-test-component-hover-background, var(--ig-test-component-hover-background, hsl(from var(--ig-secondary-700) h s l/0.26))); - --igc-foreground: var(--igx-test-component-foreground, var(--ig-test-component-foreground, var(--ig-primary-400-contrast))); - --igc-hover-foreground: var(--igx-test-component-hover-foreground, var(--ig-test-component-hover-foreground, var(--ig-secondary-700-contrast))); - --igc-border-style: var(--igx-test-component-border-style, var(--ig-test-component-border-style, solid)); - --igc-border-radius: var(--igx-test-component-border-radius, var(--ig-test-component-border-radius, 0.125rem)); - --igc-brushes: var(--igx-test-component-brushes, var(--ig-test-component-brushes, var(--chart-brushes))); - --igc-resting-elevation: var(--igx-test-component-resting-elevation, var(--ig-test-component-resting-elevation, var(--ig-elevation-2))); - --ig-theme: material; - --ig-theme-variant: light; -} - -/* END_EXPECTED */ -/* END_ASSERT */ -/* */ -/* Test: should not prepend a prefix when the theme map has no prefix property */ -/* ✔ [assert-false] Digested schema should not have a prefix key */ -/* ASSERT: */ -/* OUTPUT */ -.test-output { - --background: var(--igx-test-component-background, var(--ig-test-component-background, var(--ig-primary-400))); - --hover-background: var(--igx-test-component-hover-background, var(--ig-test-component-hover-background, hsl(from var(--ig-secondary-700) h s l/0.26))); - --foreground: var(--igx-test-component-foreground, var(--ig-test-component-foreground, var(--ig-primary-400-contrast))); - --hover-foreground: var(--igx-test-component-hover-foreground, var(--ig-test-component-hover-foreground, var(--ig-secondary-700-contrast))); - --border-style: var(--igx-test-component-border-style, var(--ig-test-component-border-style, solid)); - --border-radius: var(--igx-test-component-border-radius, var(--ig-test-component-border-radius, 0.125rem)); - --brushes: var(--igx-test-component-brushes, var(--ig-test-component-brushes, var(--chart-brushes))); - --resting-elevation: var(--igx-test-component-resting-elevation, var(--ig-test-component-resting-elevation, var(--ig-elevation-2))); - --ig-theme: material; - --ig-theme-variant: light; -} - -/* END_OUTPUT */ -/* EXPECTED */ -.test-output { - --background: var(--igx-test-component-background, var(--ig-test-component-background, var(--ig-primary-400))); - --hover-background: var(--igx-test-component-hover-background, var(--ig-test-component-hover-background, hsl(from var(--ig-secondary-700) h s l/0.26))); - --foreground: var(--igx-test-component-foreground, var(--ig-test-component-foreground, var(--ig-primary-400-contrast))); - --hover-foreground: var(--igx-test-component-hover-foreground, var(--ig-test-component-hover-foreground, var(--ig-secondary-700-contrast))); - --border-style: var(--igx-test-component-border-style, var(--ig-test-component-border-style, solid)); - --border-radius: var(--igx-test-component-border-radius, var(--ig-test-component-border-radius, 0.125rem)); - --brushes: var(--igx-test-component-brushes, var(--ig-test-component-brushes, var(--chart-brushes))); - --resting-elevation: var(--igx-test-component-resting-elevation, var(--ig-test-component-resting-elevation, var(--ig-elevation-2))); - --ig-theme: material; - --ig-theme-variant: light; -} - -/* END_EXPECTED */ -/* END_ASSERT */ -/* */ -/* Test: should scope prefixed CSS variables correctly via the tokens mixin */ -/* ASSERT: */ -/* OUTPUT */ -igc-dockmanager { - --igc-background: var(--igx-test-component-background, var(--ig-test-component-background, var(--ig-primary-400))); - --igc-hover-background: var(--igx-test-component-hover-background, var(--ig-test-component-hover-background, hsl(from var(--ig-secondary-700) h s l/0.26))); - --igc-foreground: var(--igx-test-component-foreground, var(--ig-test-component-foreground, var(--ig-primary-400-contrast))); - --igc-hover-foreground: var(--igx-test-component-hover-foreground, var(--ig-test-component-hover-foreground, var(--ig-secondary-700-contrast))); - --igc-border-style: var(--igx-test-component-border-style, var(--ig-test-component-border-style, solid)); - --igc-border-radius: var(--igx-test-component-border-radius, var(--ig-test-component-border-radius, 0.125rem)); - --igc-brushes: var(--igx-test-component-brushes, var(--ig-test-component-brushes, var(--chart-brushes))); - --igc-resting-elevation: var(--igx-test-component-resting-elevation, var(--ig-test-component-resting-elevation, var(--ig-elevation-2))); - --ig-theme: material; - --ig-theme-variant: light; -} - -/* END_OUTPUT */ -/* EXPECTED */ -igc-dockmanager { - --igc-background: var(--igx-test-component-background, var(--ig-test-component-background, var(--ig-primary-400))); - --igc-hover-background: var(--igx-test-component-hover-background, var(--ig-test-component-hover-background, hsl(from var(--ig-secondary-700) h s l/0.26))); - --igc-foreground: var(--igx-test-component-foreground, var(--ig-test-component-foreground, var(--ig-primary-400-contrast))); - --igc-hover-foreground: var(--igx-test-component-hover-foreground, var(--ig-test-component-hover-foreground, var(--ig-secondary-700-contrast))); - --igc-border-style: var(--igx-test-component-border-style, var(--ig-test-component-border-style, solid)); - --igc-border-radius: var(--igx-test-component-border-radius, var(--ig-test-component-border-radius, 0.125rem)); - --igc-brushes: var(--igx-test-component-brushes, var(--ig-test-component-brushes, var(--chart-brushes))); - --igc-resting-elevation: var(--igx-test-component-resting-elevation, var(--ig-test-component-resting-elevation, var(--ig-elevation-2))); - --ig-theme: material; - --ig-theme-variant: light; -} - -/* END_EXPECTED */ -/* END_ASSERT */ -/* */ -/* Test: should ignore $name property when provided to css-vars-from-theme mixin */ -/* ASSERT: */ -/* OUTPUT */ -.test-output { - --background: var(--igx-test-component-background, var(--ig-test-component-background, var(--ig-primary-400))); - --hover-background: var(--igx-test-component-hover-background, var(--ig-test-component-hover-background, hsl(from var(--ig-secondary-700) h s l/0.26))); - --foreground: var(--igx-test-component-foreground, var(--ig-test-component-foreground, var(--ig-primary-400-contrast))); - --hover-foreground: var(--igx-test-component-hover-foreground, var(--ig-test-component-hover-foreground, var(--ig-secondary-700-contrast))); - --border-style: var(--igx-test-component-border-style, var(--ig-test-component-border-style, solid)); - --border-radius: var(--igx-test-component-border-radius, var(--ig-test-component-border-radius, 0.125rem)); - --brushes: var(--igx-test-component-brushes, var(--ig-test-component-brushes, var(--chart-brushes))); - --resting-elevation: var(--igx-test-component-resting-elevation, var(--ig-test-component-resting-elevation, var(--ig-elevation-2))); - --ig-theme: material; - --ig-theme-variant: light; -} - -/* END_OUTPUT */ -/* EXPECTED */ -.test-output { - --background: var(--igx-test-component-background, var(--ig-test-component-background, var(--ig-primary-400))); - --hover-background: var(--igx-test-component-hover-background, var(--ig-test-component-hover-background, hsl(from var(--ig-secondary-700) h s l/0.26))); - --foreground: var(--igx-test-component-foreground, var(--ig-test-component-foreground, var(--ig-primary-400-contrast))); - --hover-foreground: var(--igx-test-component-hover-foreground, var(--ig-test-component-hover-foreground, var(--ig-secondary-700-contrast))); - --border-style: var(--igx-test-component-border-style, var(--ig-test-component-border-style, solid)); - --border-radius: var(--igx-test-component-border-radius, var(--ig-test-component-border-radius, 0.125rem)); - --brushes: var(--igx-test-component-brushes, var(--ig-test-component-brushes, var(--chart-brushes))); - --resting-elevation: var(--igx-test-component-resting-elevation, var(--ig-test-component-resting-elevation, var(--ig-elevation-2))); - --ig-theme: material; - --ig-theme-variant: light; -} - -/* END_EXPECTED */ -/* END_ASSERT */ -/* */ -/* Test: should ignore all keys in the ignore list */ -/* ASSERT: */ -/* OUTPUT */ -.test-output { - --background: var(--igx-test-component-background, var(--ig-test-component-background, var(--ig-primary-400))); - --hover-background: var(--igx-test-component-hover-background, var(--ig-test-component-hover-background, hsl(from var(--ig-secondary-700) h s l/0.26))); - --foreground: var(--igx-test-component-foreground, var(--ig-test-component-foreground, var(--ig-primary-400-contrast))); - --hover-foreground: var(--igx-test-component-hover-foreground, var(--ig-test-component-hover-foreground, var(--ig-secondary-700-contrast))); - --border-style: var(--igx-test-component-border-style, var(--ig-test-component-border-style, solid)); - --border-radius: var(--igx-test-component-border-radius, var(--ig-test-component-border-radius, 0.125rem)); - --brushes: var(--igx-test-component-brushes, var(--ig-test-component-brushes, var(--chart-brushes))); - --resting-elevation: var(--igx-test-component-resting-elevation, var(--ig-test-component-resting-elevation, var(--ig-elevation-2))); - --ig-theme: material; - --ig-theme-variant: light; -} - -/* END_OUTPUT */ -/* EXPECTED */ -.test-output { - --background: var(--igx-test-component-background, var(--ig-test-component-background, var(--ig-primary-400))); - --hover-background: var(--igx-test-component-hover-background, var(--ig-test-component-hover-background, hsl(from var(--ig-secondary-700) h s l/0.26))); - --foreground: var(--igx-test-component-foreground, var(--ig-test-component-foreground, var(--ig-primary-400-contrast))); - --hover-foreground: var(--igx-test-component-hover-foreground, var(--ig-test-component-hover-foreground, var(--ig-secondary-700-contrast))); - --border-style: var(--igx-test-component-border-style, var(--ig-test-component-border-style, solid)); - --border-radius: var(--igx-test-component-border-radius, var(--ig-test-component-border-radius, 0.125rem)); - --brushes: var(--igx-test-component-brushes, var(--ig-test-component-brushes, var(--chart-brushes))); - --resting-elevation: var(--igx-test-component-resting-elevation, var(--ig-test-component-resting-elevation, var(--ig-elevation-2))); - --ig-theme: material; - --ig-theme-variant: light; -} - -/* END_EXPECTED */ -/* END_ASSERT */ -/* */ -/* Test: should scope theme CSS variables correctly */ -/* ASSERT: */ -/* OUTPUT */ -igc-avatar { - --background: var(--igx-test-component-background, var(--ig-test-component-background, var(--ig-primary-400))); - --hover-background: var(--igx-test-component-hover-background, var(--ig-test-component-hover-background, hsl(from var(--ig-secondary-700) h s l/0.26))); - --foreground: var(--igx-test-component-foreground, var(--ig-test-component-foreground, var(--ig-primary-400-contrast))); - --hover-foreground: var(--igx-test-component-hover-foreground, var(--ig-test-component-hover-foreground, var(--ig-secondary-700-contrast))); - --border-style: var(--igx-test-component-border-style, var(--ig-test-component-border-style, solid)); - --border-radius: var(--igx-test-component-border-radius, var(--ig-test-component-border-radius, 0.125rem)); - --brushes: var(--igx-test-component-brushes, var(--ig-test-component-brushes, var(--chart-brushes))); - --resting-elevation: var(--igx-test-component-resting-elevation, var(--ig-test-component-resting-elevation, var(--ig-elevation-2))); - --ig-theme: material; - --ig-theme-variant: light; -} - -/* END_OUTPUT */ -/* EXPECTED */ -igc-avatar { - --background: var(--igx-test-component-background, var(--ig-test-component-background, var(--ig-primary-400))); - --hover-background: var(--igx-test-component-hover-background, var(--ig-test-component-hover-background, hsl(from var(--ig-secondary-700) h s l/0.26))); - --foreground: var(--igx-test-component-foreground, var(--ig-test-component-foreground, var(--ig-primary-400-contrast))); - --hover-foreground: var(--igx-test-component-hover-foreground, var(--ig-test-component-hover-foreground, var(--ig-secondary-700-contrast))); - --border-style: var(--igx-test-component-border-style, var(--ig-test-component-border-style, solid)); - --border-radius: var(--igx-test-component-border-radius, var(--ig-test-component-border-radius, 0.125rem)); - --brushes: var(--igx-test-component-brushes, var(--ig-test-component-brushes, var(--chart-brushes))); - --resting-elevation: var(--igx-test-component-resting-elevation, var(--ig-test-component-resting-elevation, var(--ig-elevation-2))); - --ig-theme: material; - --ig-theme-variant: light; -} - -/* END_EXPECTED */ -/* END_ASSERT */ -/* ASSERT: */ -/* OUTPUT */ -.my-theme, -.my-theme igc-avatar { - --background: var(--igx-test-component-background, var(--ig-test-component-background, var(--ig-primary-400))); - --hover-background: var(--igx-test-component-hover-background, var(--ig-test-component-hover-background, hsl(from var(--ig-secondary-700) h s l/0.26))); - --foreground: var(--igx-test-component-foreground, var(--ig-test-component-foreground, var(--ig-primary-400-contrast))); - --hover-foreground: var(--igx-test-component-hover-foreground, var(--ig-test-component-hover-foreground, var(--ig-secondary-700-contrast))); - --border-style: var(--igx-test-component-border-style, var(--ig-test-component-border-style, solid)); - --border-radius: var(--igx-test-component-border-radius, var(--ig-test-component-border-radius, 0.125rem)); - --brushes: var(--igx-test-component-brushes, var(--ig-test-component-brushes, var(--chart-brushes))); - --resting-elevation: var(--igx-test-component-resting-elevation, var(--ig-test-component-resting-elevation, var(--ig-elevation-2))); - --ig-theme: material; - --ig-theme-variant: light; -} - -/* END_OUTPUT */ -/* EXPECTED */ -.my-theme, -.my-theme igc-avatar { - --background: var(--igx-test-component-background, var(--ig-test-component-background, var(--ig-primary-400))); - --hover-background: var(--igx-test-component-hover-background, var(--ig-test-component-hover-background, hsl(from var(--ig-secondary-700) h s l/0.26))); - --foreground: var(--igx-test-component-foreground, var(--ig-test-component-foreground, var(--ig-primary-400-contrast))); - --hover-foreground: var(--igx-test-component-hover-foreground, var(--ig-test-component-hover-foreground, var(--ig-secondary-700-contrast))); - --border-style: var(--igx-test-component-border-style, var(--ig-test-component-border-style, solid)); - --border-radius: var(--igx-test-component-border-radius, var(--ig-test-component-border-radius, 0.125rem)); - --brushes: var(--igx-test-component-brushes, var(--ig-test-component-brushes, var(--chart-brushes))); - --resting-elevation: var(--igx-test-component-resting-elevation, var(--ig-test-component-resting-elevation, var(--ig-elevation-2))); - --ig-theme: material; - --ig-theme-variant: light; -} - -/* END_EXPECTED */ -/* END_ASSERT */ -/* */ -/* Test: should scope theme CSS variables to a specified scope */ -/* ASSERT: */ -/* OUTPUT */ -.custom-selector { - --background: var(--igx-test-component-background, var(--ig-test-component-background, var(--ig-primary-400))); - --hover-background: var(--igx-test-component-hover-background, var(--ig-test-component-hover-background, hsl(from var(--ig-secondary-700) h s l/0.26))); - --foreground: var(--igx-test-component-foreground, var(--ig-test-component-foreground, var(--ig-primary-400-contrast))); - --hover-foreground: var(--igx-test-component-hover-foreground, var(--ig-test-component-hover-foreground, var(--ig-secondary-700-contrast))); - --border-style: var(--igx-test-component-border-style, var(--ig-test-component-border-style, solid)); - --border-radius: var(--igx-test-component-border-radius, var(--ig-test-component-border-radius, 0.125rem)); - --brushes: var(--igx-test-component-brushes, var(--ig-test-component-brushes, var(--chart-brushes))); - --resting-elevation: var(--igx-test-component-resting-elevation, var(--ig-test-component-resting-elevation, var(--ig-elevation-2))); - --ig-theme: material; - --ig-theme-variant: light; -} - -/* END_OUTPUT */ -/* EXPECTED */ -.custom-selector { - --background: var(--igx-test-component-background, var(--ig-test-component-background, var(--ig-primary-400))); - --hover-background: var(--igx-test-component-hover-background, var(--ig-test-component-hover-background, hsl(from var(--ig-secondary-700) h s l/0.26))); - --foreground: var(--igx-test-component-foreground, var(--ig-test-component-foreground, var(--ig-primary-400-contrast))); - --hover-foreground: var(--igx-test-component-hover-foreground, var(--ig-test-component-hover-foreground, var(--ig-secondary-700-contrast))); - --border-style: var(--igx-test-component-border-style, var(--ig-test-component-border-style, solid)); - --border-radius: var(--igx-test-component-border-radius, var(--ig-test-component-border-radius, 0.125rem)); - --brushes: var(--igx-test-component-brushes, var(--ig-test-component-brushes, var(--chart-brushes))); - --resting-elevation: var(--igx-test-component-resting-elevation, var(--ig-test-component-resting-elevation, var(--ig-elevation-2))); - --ig-theme: material; - --ig-theme-variant: light; -} - -/* END_EXPECTED */ -/* END_ASSERT */ -/* ASSERT: */ -/* OUTPUT */ -.my-theme, -.my-theme .custom-selector { - --background: var(--igx-test-component-background, var(--ig-test-component-background, var(--ig-primary-400))); - --hover-background: var(--igx-test-component-hover-background, var(--ig-test-component-hover-background, hsl(from var(--ig-secondary-700) h s l/0.26))); - --foreground: var(--igx-test-component-foreground, var(--ig-test-component-foreground, var(--ig-primary-400-contrast))); - --hover-foreground: var(--igx-test-component-hover-foreground, var(--ig-test-component-hover-foreground, var(--ig-secondary-700-contrast))); - --border-style: var(--igx-test-component-border-style, var(--ig-test-component-border-style, solid)); - --border-radius: var(--igx-test-component-border-radius, var(--ig-test-component-border-radius, 0.125rem)); - --brushes: var(--igx-test-component-brushes, var(--ig-test-component-brushes, var(--chart-brushes))); - --resting-elevation: var(--igx-test-component-resting-elevation, var(--ig-test-component-resting-elevation, var(--ig-elevation-2))); - --ig-theme: material; - --ig-theme-variant: light; -} - -/* END_OUTPUT */ -/* EXPECTED */ -.my-theme, -.my-theme .custom-selector { - --background: var(--igx-test-component-background, var(--ig-test-component-background, var(--ig-primary-400))); - --hover-background: var(--igx-test-component-hover-background, var(--ig-test-component-hover-background, hsl(from var(--ig-secondary-700) h s l/0.26))); - --foreground: var(--igx-test-component-foreground, var(--ig-test-component-foreground, var(--ig-primary-400-contrast))); - --hover-foreground: var(--igx-test-component-hover-foreground, var(--ig-test-component-hover-foreground, var(--ig-secondary-700-contrast))); - --border-style: var(--igx-test-component-border-style, var(--ig-test-component-border-style, solid)); - --border-radius: var(--igx-test-component-border-radius, var(--ig-test-component-border-radius, 0.125rem)); - --brushes: var(--igx-test-component-brushes, var(--ig-test-component-brushes, var(--chart-brushes))); - --resting-elevation: var(--igx-test-component-resting-elevation, var(--ig-test-component-resting-elevation, var(--ig-elevation-2))); - --ig-theme: material; - --ig-theme-variant: light; -} - -/* END_EXPECTED */ -/* END_ASSERT */ -/* */ -/* Test: should set the border-radius to a value between min and max */ -/* ✔ [assert-equal] should set the border-radius to a value between min and max */ -/* */ -/* Test: should include border-radius styles to a given scope with a value between min and max */ -/* ASSERT: */ -/* OUTPUT */ -.test-output { - border-radius: clamp(0.125rem, calc(var(--ig-radius-factor, 1) * 0.25rem), 0.25rem); -} - -/* END_OUTPUT */ -/* EXPECTED */ -.test-output { - border-radius: clamp(0.125rem, calc(var(--ig-radius-factor, 1) * 0.25rem), 0.25rem); -} - -/* END_EXPECTED */ -/* END_ASSERT */ -/* */ -/* Test: include single-line truncate styles when the ellipsis mixin is included */ -/* ASSERT: */ -/* OUTPUT */ -.test-output { - white-space: nowrap; - text-overflow: ellipsis; - overflow: hidden; -} - -/* END_OUTPUT */ -/* EXPECTED */ -.test-output { - white-space: nowrap; - text-overflow: ellipsis; - overflow: hidden; -} - -/* END_EXPECTED */ -/* END_ASSERT */ -/* */ -/* Test: includes multi-line truncate styles when the line-clamp mixin is included */ -/* ASSERT: */ -/* OUTPUT */ -.test-output { - display: -webkit-inline-box; - -webkit-line-clamp: 3; - -webkit-box-orient: vertical; - overflow: hidden; -} - -/* END_OUTPUT */ -/* EXPECTED */ -.test-output { - display: -webkit-inline-box; - -webkit-line-clamp: 3; - -webkit-box-orient: vertical; - overflow: hidden; -} - -/* END_EXPECTED */ -/* END_ASSERT */ -/* */ -/* Test: includes styles that hide the default element when the hide-default mixin is included */ -/* ASSERT: */ -/* OUTPUT */ -.test-output { - position: absolute; - width: 1px; - height: 1px; - margin: -1px; - border: none; - clip: rect(0, 0, 0, 0); - outline: 0; - pointer-events: none; - overflow: hidden; - appearance: none; -} - -/* END_OUTPUT */ -/* EXPECTED */ -.test-output { - position: absolute; - width: 1px; - height: 1px; - margin: -1px; - border: none; - clip: rect(0, 0, 0, 0); - outline: 0; - pointer-events: none; - overflow: hidden; - appearance: none; -} - -/* END_EXPECTED */ -/* END_ASSERT */ -/* */ -/* # Module: Themes :: schemas :: Tokens */ -/* ------------------------------------- */ -/* Test: should generate global tokens with the ig prefix */ -/* ASSERT: */ -/* OUTPUT */ -.test-output { - --ig-test-component-background: var(--ig-primary-400); - --ig-test-component-hover-background: hsl(from var(--ig-secondary-700) h s l/0.26); - --ig-test-component-foreground: var(--ig-primary-400-contrast); - --ig-test-component-hover-foreground: var(--ig-secondary-700-contrast); - --ig-test-component-border-style: solid; - --ig-test-component-border-radius: 0.125rem; - --ig-test-component-brushes: var(--chart-brushes); - --ig-test-component-resting-elevation: var(--ig-elevation-2); -} - -/* END_OUTPUT */ -/* EXPECTED */ -.test-output { - --ig-test-component-background: var(--ig-primary-400); - --ig-test-component-hover-background: hsl(from var(--ig-secondary-700) h s l/0.26); - --ig-test-component-foreground: var(--ig-primary-400-contrast); - --ig-test-component-hover-foreground: var(--ig-secondary-700-contrast); - --ig-test-component-border-style: solid; - --ig-test-component-border-radius: 0.125rem; - --ig-test-component-brushes: var(--chart-brushes); - --ig-test-component-resting-elevation: var(--ig-elevation-2); -} - -/* END_EXPECTED */ -/* END_ASSERT */ -/* */ -/* Test: should rewrite local var references to global ig-prefixed tokens */ -/* ASSERT: */ -/* OUTPUT */ -.test-output { - --ig-test-rewrite-background: red; - --ig-test-rewrite-color: hsla(from color(from var(--ig-test-rewrite-background) var(--y-contrast)) h 0 l/1); - --ig-test-rewrite-border-style: solid; -} - -/* END_OUTPUT */ -/* EXPECTED */ -.test-output { - --ig-test-rewrite-background: red; - --ig-test-rewrite-color: hsla(from color(from var(--ig-test-rewrite-background) var(--y-contrast)) h 0 l/1); - --ig-test-rewrite-border-style: solid; -} - -/* END_EXPECTED */ -/* END_ASSERT */ -/* */ -/* Test: should rewrite multiple local var references in a single value */ -/* ASSERT: */ -/* OUTPUT */ -.test-output { - --ig-test-multi-background: red; - --ig-test-multi-foreground: blue; - --ig-test-multi-computed: calc(var(--ig-test-multi-background) + var(--ig-test-multi-foreground)); -} - -/* END_OUTPUT */ -/* EXPECTED */ -.test-output { - --ig-test-multi-background: red; - --ig-test-multi-foreground: blue; - --ig-test-multi-computed: calc(var(--ig-test-multi-background) + var(--ig-test-multi-foreground)); -} - -/* END_EXPECTED */ -/* END_ASSERT */ -/* */ -/* Test: should skip sizable expressions from schema defaults */ -/* ASSERT: */ -/* OUTPUT */ -.test-output { - --ig-test-sizable-background: red; -} - -/* END_OUTPUT */ -/* EXPECTED */ -.test-output { - --ig-test-sizable-background: red; -} - -/* END_EXPECTED */ -/* END_ASSERT */ -/* */ -/* Test: should emit concrete size values provided by the user */ -/* ASSERT: */ -/* OUTPUT */ -.test-output { - --ig-test-concrete-size-background: red; - --ig-test-concrete-size-size: 2rem; -} - -/* END_OUTPUT */ -/* EXPECTED */ -.test-output { - --ig-test-concrete-size-background: red; - --ig-test-concrete-size-size: 2rem; -} - -/* END_EXPECTED */ -/* END_ASSERT */ -/* */ -/* Test: should not emit ignored keys */ -/* ASSERT: */ -/* OUTPUT */ -.test-output { - --ig-test-component-background: var(--ig-primary-400); - --ig-test-component-hover-background: hsl(from var(--ig-secondary-700) h s l/0.26); - --ig-test-component-foreground: var(--ig-primary-400-contrast); - --ig-test-component-hover-foreground: var(--ig-secondary-700-contrast); - --ig-test-component-border-style: solid; - --ig-test-component-border-radius: 0.125rem; - --ig-test-component-brushes: var(--chart-brushes); - --ig-test-component-resting-elevation: var(--ig-elevation-2); - --ig-test-component-default-size: 2; -} - -/* END_OUTPUT */ -/* EXPECTED */ -.test-output { - --ig-test-component-background: var(--ig-primary-400); - --ig-test-component-hover-background: hsl(from var(--ig-secondary-700) h s l/0.26); - --ig-test-component-foreground: var(--ig-primary-400-contrast); - --ig-test-component-hover-foreground: var(--ig-secondary-700-contrast); - --ig-test-component-border-style: solid; - --ig-test-component-border-radius: 0.125rem; - --ig-test-component-brushes: var(--chart-brushes); - --ig-test-component-resting-elevation: var(--ig-elevation-2); - --ig-test-component-default-size: 2; -} - -/* END_EXPECTED */ -/* END_ASSERT */ -/* */ -/* Test: should always use the ig prefix regardless of configured variable-prefix */ -/* ASSERT: */ -/* OUTPUT */ -.test-output { - --ig-test-prefix-background: blue; -} - -/* END_OUTPUT */ -/* EXPECTED */ -.test-output { - --ig-test-prefix-background: blue; -} - -/* END_EXPECTED */ -/* END_ASSERT */ -/* */ -/* Test: should scope theme CSS variables when mode is scoped */ -/* ASSERT: */ -/* OUTPUT */ -igc-avatar { - --background: var(--igx-test-component-background, var(--ig-test-component-background, var(--ig-primary-400))); - --hover-background: var(--igx-test-component-hover-background, var(--ig-test-component-hover-background, hsl(from var(--ig-secondary-700) h s l/0.26))); - --foreground: var(--igx-test-component-foreground, var(--ig-test-component-foreground, var(--ig-primary-400-contrast))); - --hover-foreground: var(--igx-test-component-hover-foreground, var(--ig-test-component-hover-foreground, var(--ig-secondary-700-contrast))); - --border-style: var(--igx-test-component-border-style, var(--ig-test-component-border-style, solid)); - --border-radius: var(--igx-test-component-border-radius, var(--ig-test-component-border-radius, 0.125rem)); - --brushes: var(--igx-test-component-brushes, var(--ig-test-component-brushes, var(--chart-brushes))); - --resting-elevation: var(--igx-test-component-resting-elevation, var(--ig-test-component-resting-elevation, var(--ig-elevation-2))); - --ig-theme: material; - --ig-theme-variant: light; -} - -/* END_OUTPUT */ -/* EXPECTED */ -igc-avatar { - --background: var(--igx-test-component-background, var(--ig-test-component-background, var(--ig-primary-400))); - --hover-background: var(--igx-test-component-hover-background, var(--ig-test-component-hover-background, hsl(from var(--ig-secondary-700) h s l/0.26))); - --foreground: var(--igx-test-component-foreground, var(--ig-test-component-foreground, var(--ig-primary-400-contrast))); - --hover-foreground: var(--igx-test-component-hover-foreground, var(--ig-test-component-hover-foreground, var(--ig-secondary-700-contrast))); - --border-style: var(--igx-test-component-border-style, var(--ig-test-component-border-style, solid)); - --border-radius: var(--igx-test-component-border-radius, var(--ig-test-component-border-radius, 0.125rem)); - --brushes: var(--igx-test-component-brushes, var(--ig-test-component-brushes, var(--chart-brushes))); - --resting-elevation: var(--igx-test-component-resting-elevation, var(--ig-test-component-resting-elevation, var(--ig-elevation-2))); - --ig-theme: material; - --ig-theme-variant: light; -} - -/* END_EXPECTED */ -/* END_ASSERT */ -/* ASSERT: */ -/* OUTPUT */ -.my-theme, -.my-theme igc-avatar { - --background: var(--igx-test-component-background, var(--ig-test-component-background, var(--ig-primary-400))); - --hover-background: var(--igx-test-component-hover-background, var(--ig-test-component-hover-background, hsl(from var(--ig-secondary-700) h s l/0.26))); - --foreground: var(--igx-test-component-foreground, var(--ig-test-component-foreground, var(--ig-primary-400-contrast))); - --hover-foreground: var(--igx-test-component-hover-foreground, var(--ig-test-component-hover-foreground, var(--ig-secondary-700-contrast))); - --border-style: var(--igx-test-component-border-style, var(--ig-test-component-border-style, solid)); - --border-radius: var(--igx-test-component-border-radius, var(--ig-test-component-border-radius, 0.125rem)); - --brushes: var(--igx-test-component-brushes, var(--ig-test-component-brushes, var(--chart-brushes))); - --resting-elevation: var(--igx-test-component-resting-elevation, var(--ig-test-component-resting-elevation, var(--ig-elevation-2))); - --ig-theme: material; - --ig-theme-variant: light; -} - -/* END_OUTPUT */ -/* EXPECTED */ -.my-theme, -.my-theme igc-avatar { - --background: var(--igx-test-component-background, var(--ig-test-component-background, var(--ig-primary-400))); - --hover-background: var(--igx-test-component-hover-background, var(--ig-test-component-hover-background, hsl(from var(--ig-secondary-700) h s l/0.26))); - --foreground: var(--igx-test-component-foreground, var(--ig-test-component-foreground, var(--ig-primary-400-contrast))); - --hover-foreground: var(--igx-test-component-hover-foreground, var(--ig-test-component-hover-foreground, var(--ig-secondary-700-contrast))); - --border-style: var(--igx-test-component-border-style, var(--ig-test-component-border-style, solid)); - --border-radius: var(--igx-test-component-border-radius, var(--ig-test-component-border-radius, 0.125rem)); - --brushes: var(--igx-test-component-brushes, var(--ig-test-component-brushes, var(--chart-brushes))); - --resting-elevation: var(--igx-test-component-resting-elevation, var(--ig-test-component-resting-elevation, var(--ig-elevation-2))); - --ig-theme: material; - --ig-theme-variant: light; -} - -/* END_EXPECTED */ -/* END_ASSERT */ -/* */ -/* Test: should scope theme CSS variables to a custom scope when mode is scoped */ -/* ASSERT: */ -/* OUTPUT */ -.custom-scope { - --background: var(--igx-test-component-background, var(--ig-test-component-background, var(--ig-primary-400))); - --hover-background: var(--igx-test-component-hover-background, var(--ig-test-component-hover-background, hsl(from var(--ig-secondary-700) h s l/0.26))); - --foreground: var(--igx-test-component-foreground, var(--ig-test-component-foreground, var(--ig-primary-400-contrast))); - --hover-foreground: var(--igx-test-component-hover-foreground, var(--ig-test-component-hover-foreground, var(--ig-secondary-700-contrast))); - --border-style: var(--igx-test-component-border-style, var(--ig-test-component-border-style, solid)); - --border-radius: var(--igx-test-component-border-radius, var(--ig-test-component-border-radius, 0.125rem)); - --brushes: var(--igx-test-component-brushes, var(--ig-test-component-brushes, var(--chart-brushes))); - --resting-elevation: var(--igx-test-component-resting-elevation, var(--ig-test-component-resting-elevation, var(--ig-elevation-2))); - --ig-theme: material; - --ig-theme-variant: light; -} - -/* END_OUTPUT */ -/* EXPECTED */ -.custom-scope { - --background: var(--igx-test-component-background, var(--ig-test-component-background, var(--ig-primary-400))); - --hover-background: var(--igx-test-component-hover-background, var(--ig-test-component-hover-background, hsl(from var(--ig-secondary-700) h s l/0.26))); - --foreground: var(--igx-test-component-foreground, var(--ig-test-component-foreground, var(--ig-primary-400-contrast))); - --hover-foreground: var(--igx-test-component-hover-foreground, var(--ig-test-component-hover-foreground, var(--ig-secondary-700-contrast))); - --border-style: var(--igx-test-component-border-style, var(--ig-test-component-border-style, solid)); - --border-radius: var(--igx-test-component-border-radius, var(--ig-test-component-border-radius, 0.125rem)); - --brushes: var(--igx-test-component-brushes, var(--ig-test-component-brushes, var(--chart-brushes))); - --resting-elevation: var(--igx-test-component-resting-elevation, var(--ig-test-component-resting-elevation, var(--ig-elevation-2))); - --ig-theme: material; - --ig-theme-variant: light; -} - -/* END_EXPECTED */ -/* END_ASSERT */ -/* */ -/* Test: should produce identical output for css-vars and tokens in scoped mode */ -/* ASSERT: */ -/* OUTPUT */ -igc-test { - --background: var(--igx-test-component-background, var(--ig-test-component-background, var(--ig-primary-400))); - --hover-background: var(--igx-test-component-hover-background, var(--ig-test-component-hover-background, hsl(from var(--ig-secondary-700) h s l/0.26))); - --foreground: var(--igx-test-component-foreground, var(--ig-test-component-foreground, var(--ig-primary-400-contrast))); - --hover-foreground: var(--igx-test-component-hover-foreground, var(--ig-test-component-hover-foreground, var(--ig-secondary-700-contrast))); - --border-style: var(--igx-test-component-border-style, var(--ig-test-component-border-style, solid)); - --border-radius: var(--igx-test-component-border-radius, var(--ig-test-component-border-radius, 0.125rem)); - --brushes: var(--igx-test-component-brushes, var(--ig-test-component-brushes, var(--chart-brushes))); - --resting-elevation: var(--igx-test-component-resting-elevation, var(--ig-test-component-resting-elevation, var(--ig-elevation-2))); - --ig-theme: material; - --ig-theme-variant: light; -} - -/* END_OUTPUT */ -/* EXPECTED */ -igc-test { - --background: var(--igx-test-component-background, var(--ig-test-component-background, var(--ig-primary-400))); - --hover-background: var(--igx-test-component-hover-background, var(--ig-test-component-hover-background, hsl(from var(--ig-secondary-700) h s l/0.26))); - --foreground: var(--igx-test-component-foreground, var(--ig-test-component-foreground, var(--ig-primary-400-contrast))); - --hover-foreground: var(--igx-test-component-hover-foreground, var(--ig-test-component-hover-foreground, var(--ig-secondary-700-contrast))); - --border-style: var(--igx-test-component-border-style, var(--ig-test-component-border-style, solid)); - --border-radius: var(--igx-test-component-border-radius, var(--ig-test-component-border-radius, 0.125rem)); - --brushes: var(--igx-test-component-brushes, var(--ig-test-component-brushes, var(--chart-brushes))); - --resting-elevation: var(--igx-test-component-resting-elevation, var(--ig-test-component-resting-elevation, var(--ig-elevation-2))); - --ig-theme: material; - --ig-theme-variant: light; -} - -/* END_EXPECTED */ -/* END_ASSERT */ -/* */ -/* */ -/* # Module: Themes :: schemas :: Sizing */ -/* ------------------------------------- */ -/* Test: should produce size variables */ -/* ASSERT: */ -/* OUTPUT */ -.test-output { - width: max(var(--is-large, 1) * max(300px, -1 * 300px), var(--is-medium, 1) * max(200px, -1 * 200px), var(--is-small, 1) * max(100px, -1 * 100px)); -} - -/* END_OUTPUT */ -/* EXPECTED */ -.test-output { - width: max(var(--is-large, 1) * max(300px, -1 * 300px), var(--is-medium, 1) * max(200px, -1 * 200px), var(--is-small, 1) * max(100px, -1 * 100px)); -} - -/* END_EXPECTED */ -/* END_ASSERT */ -/* */ -/* */ -/* # Module: Themes :: schemas :: Spacing */ -/* -------------------------------------- */ -/* Test: should use customizable spacing when declaring padding/margin */ -/* ASSERT: */ -/* OUTPUT */ -.test-output { - padding: max(var(--is-large, 1) * max(14px, -1 * 14px) * var(--ig-spacing-large, var(--ig-spacing, var(--ig-spacing))), var(--is-medium, 1) * max(14px, -1 * 14px) * var(--ig-spacing-medium, var(--ig-spacing, var(--ig-spacing))), var(--is-small, 1) * max(14px, -1 * 14px) * var(--ig-spacing-small, var(--ig-spacing, var(--ig-spacing)))); -} - -/* END_OUTPUT */ -/* EXPECTED */ -.test-output { - padding: max(var(--is-large, 1) * max(14px, -1 * 14px) * var(--ig-spacing-large, var(--ig-spacing, var(--ig-spacing))), var(--is-medium, 1) * max(14px, -1 * 14px) * var(--ig-spacing-medium, var(--ig-spacing, var(--ig-spacing))), var(--is-small, 1) * max(14px, -1 * 14px) * var(--ig-spacing-small, var(--ig-spacing, var(--ig-spacing)))); -} - -/* END_EXPECTED */ -/* END_ASSERT */ -/* */ -/* Test: should use customizable inline spacing when declaring inline padding/margin */ -/* ASSERT: */ -/* OUTPUT */ -.test-output { - padding-inline: max(var(--is-large, 1) * max(14px, -1 * 14px) * var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))), var(--is-medium, 1) * max(14px, -1 * 14px) * var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))), var(--is-small, 1) * max(14px, -1 * 14px) * var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing)))); -} - -/* END_OUTPUT */ -/* EXPECTED */ -.test-output { - padding-inline: max(var(--is-large, 1) * max(14px, -1 * 14px) * var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))), var(--is-medium, 1) * max(14px, -1 * 14px) * var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))), var(--is-small, 1) * max(14px, -1 * 14px) * var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing)))); -} - -/* END_EXPECTED */ -/* END_ASSERT */ -/* */ -/* Test: should use customizable block spacing when declaring inline padding/margin */ -/* ASSERT: */ -/* OUTPUT */ -.test-output { - padding-block: max(var(--is-large, 1) * max(16px, -1 * 16px) * var(--ig-spacing-block-large, var(--ig-spacing-block, var(--ig-spacing))), var(--is-medium, 1) * max(8px, -1 * 8px) * var(--ig-spacing-block-medium, var(--ig-spacing-block, var(--ig-spacing))), var(--is-small, 1) * max(4px, -1 * 4px) * var(--ig-spacing-block-small, var(--ig-spacing-block, var(--ig-spacing)))); -} - -/* END_OUTPUT */ -/* EXPECTED */ -.test-output { - padding-block: max(var(--is-large, 1) * max(16px, -1 * 16px) * var(--ig-spacing-block-large, var(--ig-spacing-block, var(--ig-spacing))), var(--is-medium, 1) * max(8px, -1 * 8px) * var(--ig-spacing-block-medium, var(--ig-spacing-block, var(--ig-spacing))), var(--is-small, 1) * max(4px, -1 * 4px) * var(--ig-spacing-block-small, var(--ig-spacing-block, var(--ig-spacing)))); -} - -/* END_EXPECTED */ -/* END_ASSERT */ -/* */ -/* */ -/* */ -/* */ -/* # Module: Elevations */ -/* -------------------- */ -/* Test: should return an empty list for a list of non box-shadow values */ -/* ✔ [assert-equal] should return an empty list for a list of non box-shadow values */ -/* */ -/* Test: should produce a box shadow that reacts to CSS --ig-elevation-factor changes */ -/* ✔ [assert-equal] should produce a box shadow that reacts to CSS --ig-elevation-factor changes */ -/* */ -/* Test: should configure the material elevations module */ -/* ASSERT: */ -/* OUTPUT */ -.test-output { - --ig-elevation-0: none; - --ig-elevation-1: 0 calc(var(--ig-elevation-factor, 1) * 1px) calc(var(--ig-elevation-factor, 1) * 3px) 0 red, 0 calc(var(--ig-elevation-factor, 1) * 1px) calc(var(--ig-elevation-factor, 1) * 1px) 0 green, 0 calc(var(--ig-elevation-factor, 1) * 2px) calc(var(--ig-elevation-factor, 1) * 1px) calc(var(--ig-elevation-factor, 1) * -1px) blue; - --ig-elevation-2: 0 calc(var(--ig-elevation-factor, 1) * 1px) calc(var(--ig-elevation-factor, 1) * 5px) 0 red, 0 calc(var(--ig-elevation-factor, 1) * 2px) calc(var(--ig-elevation-factor, 1) * 2px) 0 green, 0 calc(var(--ig-elevation-factor, 1) * 3px) calc(var(--ig-elevation-factor, 1) * 1px) calc(var(--ig-elevation-factor, 1) * -2px) blue; - --ig-elevation-3: 0 calc(var(--ig-elevation-factor, 1) * 1px) calc(var(--ig-elevation-factor, 1) * 8px) 0 red, 0 calc(var(--ig-elevation-factor, 1) * 3px) calc(var(--ig-elevation-factor, 1) * 4px) 0 green, 0 calc(var(--ig-elevation-factor, 1) * 3px) calc(var(--ig-elevation-factor, 1) * 3px) calc(var(--ig-elevation-factor, 1) * -2px) blue; - --ig-elevation-4: 0 calc(var(--ig-elevation-factor, 1) * 2px) calc(var(--ig-elevation-factor, 1) * 4px) calc(var(--ig-elevation-factor, 1) * -1px) red, 0 calc(var(--ig-elevation-factor, 1) * 4px) calc(var(--ig-elevation-factor, 1) * 5px) 0 green, 0 calc(var(--ig-elevation-factor, 1) * 1px) calc(var(--ig-elevation-factor, 1) * 10px) 0 blue; - --ig-elevation-5: 0 calc(var(--ig-elevation-factor, 1) * 3px) calc(var(--ig-elevation-factor, 1) * 5px) calc(var(--ig-elevation-factor, 1) * -1px) red, 0 calc(var(--ig-elevation-factor, 1) * 5px) calc(var(--ig-elevation-factor, 1) * 8px) 0 green, 0 calc(var(--ig-elevation-factor, 1) * 1px) calc(var(--ig-elevation-factor, 1) * 14px) 0 blue; - --ig-elevation-6: 0 calc(var(--ig-elevation-factor, 1) * 3px) calc(var(--ig-elevation-factor, 1) * 5px) calc(var(--ig-elevation-factor, 1) * -1px) red, 0 calc(var(--ig-elevation-factor, 1) * 6px) calc(var(--ig-elevation-factor, 1) * 10px) 0 green, 0 calc(var(--ig-elevation-factor, 1) * 1px) calc(var(--ig-elevation-factor, 1) * 18px) 0 blue; - --ig-elevation-7: 0 calc(var(--ig-elevation-factor, 1) * 4px) calc(var(--ig-elevation-factor, 1) * 5px) calc(var(--ig-elevation-factor, 1) * -2px) red, 0 calc(var(--ig-elevation-factor, 1) * 7px) calc(var(--ig-elevation-factor, 1) * 10px) calc(var(--ig-elevation-factor, 1) * 1px) green, 0 calc(var(--ig-elevation-factor, 1) * 2px) calc(var(--ig-elevation-factor, 1) * 16px) calc(var(--ig-elevation-factor, 1) * 1px) blue; - --ig-elevation-8: 0 calc(var(--ig-elevation-factor, 1) * 5px) calc(var(--ig-elevation-factor, 1) * 5px) calc(var(--ig-elevation-factor, 1) * -3px) red, 0 calc(var(--ig-elevation-factor, 1) * 8px) calc(var(--ig-elevation-factor, 1) * 10px) calc(var(--ig-elevation-factor, 1) * 1px) green, 0 calc(var(--ig-elevation-factor, 1) * 3px) calc(var(--ig-elevation-factor, 1) * 14px) calc(var(--ig-elevation-factor, 1) * 2px) blue; - --ig-elevation-9: 0 calc(var(--ig-elevation-factor, 1) * 5px) calc(var(--ig-elevation-factor, 1) * 6px) calc(var(--ig-elevation-factor, 1) * -3px) red, 0 calc(var(--ig-elevation-factor, 1) * 9px) calc(var(--ig-elevation-factor, 1) * 12px) calc(var(--ig-elevation-factor, 1) * 1px) green, 0 calc(var(--ig-elevation-factor, 1) * 3px) calc(var(--ig-elevation-factor, 1) * 16px) calc(var(--ig-elevation-factor, 1) * 2px) blue; - --ig-elevation-10: 0 calc(var(--ig-elevation-factor, 1) * 6px) calc(var(--ig-elevation-factor, 1) * 6px) calc(var(--ig-elevation-factor, 1) * -3px) red, 0 calc(var(--ig-elevation-factor, 1) * 10px) calc(var(--ig-elevation-factor, 1) * 14px) calc(var(--ig-elevation-factor, 1) * 1px) green, 0 calc(var(--ig-elevation-factor, 1) * 4px) calc(var(--ig-elevation-factor, 1) * 18px) calc(var(--ig-elevation-factor, 1) * 3px) blue; - --ig-elevation-11: 0 calc(var(--ig-elevation-factor, 1) * 6px) calc(var(--ig-elevation-factor, 1) * 7px) calc(var(--ig-elevation-factor, 1) * -4px) red, 0 calc(var(--ig-elevation-factor, 1) * 11px) calc(var(--ig-elevation-factor, 1) * 15px) calc(var(--ig-elevation-factor, 1) * 1px) green, 0 calc(var(--ig-elevation-factor, 1) * 4px) calc(var(--ig-elevation-factor, 1) * 20px) calc(var(--ig-elevation-factor, 1) * 3px) blue; - --ig-elevation-12: 0 calc(var(--ig-elevation-factor, 1) * 7px) calc(var(--ig-elevation-factor, 1) * 8px) calc(var(--ig-elevation-factor, 1) * -4px) red, 0 calc(var(--ig-elevation-factor, 1) * 12px) calc(var(--ig-elevation-factor, 1) * 17px) calc(var(--ig-elevation-factor, 1) * 2px) green, 0 calc(var(--ig-elevation-factor, 1) * 5px) calc(var(--ig-elevation-factor, 1) * 22px) calc(var(--ig-elevation-factor, 1) * 4px) blue; - --ig-elevation-13: 0 calc(var(--ig-elevation-factor, 1) * 7px) calc(var(--ig-elevation-factor, 1) * 8px) calc(var(--ig-elevation-factor, 1) * -4px) red, 0 calc(var(--ig-elevation-factor, 1) * 13px) calc(var(--ig-elevation-factor, 1) * 19px) calc(var(--ig-elevation-factor, 1) * 2px) green, 0 calc(var(--ig-elevation-factor, 1) * 5px) calc(var(--ig-elevation-factor, 1) * 24px) calc(var(--ig-elevation-factor, 1) * 4px) blue; - --ig-elevation-14: 0 calc(var(--ig-elevation-factor, 1) * 7px) calc(var(--ig-elevation-factor, 1) * 9px) calc(var(--ig-elevation-factor, 1) * -4px) red, 0 calc(var(--ig-elevation-factor, 1) * 14px) calc(var(--ig-elevation-factor, 1) * 21px) calc(var(--ig-elevation-factor, 1) * 2px) green, 0 calc(var(--ig-elevation-factor, 1) * 5px) calc(var(--ig-elevation-factor, 1) * 26px) calc(var(--ig-elevation-factor, 1) * 4px) blue; - --ig-elevation-15: 0 calc(var(--ig-elevation-factor, 1) * 8px) calc(var(--ig-elevation-factor, 1) * 9px) calc(var(--ig-elevation-factor, 1) * -5px) red, 0 calc(var(--ig-elevation-factor, 1) * 15px) calc(var(--ig-elevation-factor, 1) * 22px) calc(var(--ig-elevation-factor, 1) * 2px) green, 0 calc(var(--ig-elevation-factor, 1) * 6px) calc(var(--ig-elevation-factor, 1) * 28px) calc(var(--ig-elevation-factor, 1) * 5px) blue; - --ig-elevation-16: 0 calc(var(--ig-elevation-factor, 1) * 8px) calc(var(--ig-elevation-factor, 1) * 10px) calc(var(--ig-elevation-factor, 1) * -5px) red, 0 calc(var(--ig-elevation-factor, 1) * 16px) calc(var(--ig-elevation-factor, 1) * 24px) calc(var(--ig-elevation-factor, 1) * 2px) green, 0 calc(var(--ig-elevation-factor, 1) * 6px) calc(var(--ig-elevation-factor, 1) * 30px) calc(var(--ig-elevation-factor, 1) * 5px) blue; - --ig-elevation-17: 0 calc(var(--ig-elevation-factor, 1) * 8px) calc(var(--ig-elevation-factor, 1) * 11px) calc(var(--ig-elevation-factor, 1) * -5px) red, 0 calc(var(--ig-elevation-factor, 1) * 17px) calc(var(--ig-elevation-factor, 1) * 26px) calc(var(--ig-elevation-factor, 1) * 2px) green, 0 calc(var(--ig-elevation-factor, 1) * 6px) calc(var(--ig-elevation-factor, 1) * 32px) calc(var(--ig-elevation-factor, 1) * 5px) blue; - --ig-elevation-18: 0 calc(var(--ig-elevation-factor, 1) * 9px) calc(var(--ig-elevation-factor, 1) * 11px) calc(var(--ig-elevation-factor, 1) * -5px) red, 0 calc(var(--ig-elevation-factor, 1) * 18px) calc(var(--ig-elevation-factor, 1) * 28px) calc(var(--ig-elevation-factor, 1) * 2px) green, 0 calc(var(--ig-elevation-factor, 1) * 7px) calc(var(--ig-elevation-factor, 1) * 34px) calc(var(--ig-elevation-factor, 1) * 6px) blue; - --ig-elevation-19: 0 calc(var(--ig-elevation-factor, 1) * 9px) calc(var(--ig-elevation-factor, 1) * 12px) calc(var(--ig-elevation-factor, 1) * -6px) red, 0 calc(var(--ig-elevation-factor, 1) * 19px) calc(var(--ig-elevation-factor, 1) * 29px) calc(var(--ig-elevation-factor, 1) * 2px) green, 0 calc(var(--ig-elevation-factor, 1) * 7px) calc(var(--ig-elevation-factor, 1) * 36px) calc(var(--ig-elevation-factor, 1) * 6px) blue; - --ig-elevation-20: 0 calc(var(--ig-elevation-factor, 1) * 10px) calc(var(--ig-elevation-factor, 1) * 13px) calc(var(--ig-elevation-factor, 1) * -6px) red, 0 calc(var(--ig-elevation-factor, 1) * 20px) calc(var(--ig-elevation-factor, 1) * 31px) calc(var(--ig-elevation-factor, 1) * 3px) green, 0 calc(var(--ig-elevation-factor, 1) * 8px) calc(var(--ig-elevation-factor, 1) * 38px) calc(var(--ig-elevation-factor, 1) * 7px) blue; - --ig-elevation-21: 0 calc(var(--ig-elevation-factor, 1) * 10px) calc(var(--ig-elevation-factor, 1) * 13px) calc(var(--ig-elevation-factor, 1) * -6px) red, 0 calc(var(--ig-elevation-factor, 1) * 21px) calc(var(--ig-elevation-factor, 1) * 33px) calc(var(--ig-elevation-factor, 1) * 3px) green, 0 calc(var(--ig-elevation-factor, 1) * 8px) calc(var(--ig-elevation-factor, 1) * 40px) calc(var(--ig-elevation-factor, 1) * 7px) blue; - --ig-elevation-22: 0 calc(var(--ig-elevation-factor, 1) * 10px) calc(var(--ig-elevation-factor, 1) * 14px) calc(var(--ig-elevation-factor, 1) * -6px) red, 0 calc(var(--ig-elevation-factor, 1) * 22px) calc(var(--ig-elevation-factor, 1) * 35px) calc(var(--ig-elevation-factor, 1) * 3px) green, 0 calc(var(--ig-elevation-factor, 1) * 8px) calc(var(--ig-elevation-factor, 1) * 42px) calc(var(--ig-elevation-factor, 1) * 7px) blue; - --ig-elevation-23: 0 calc(var(--ig-elevation-factor, 1) * 11px) calc(var(--ig-elevation-factor, 1) * 14px) calc(var(--ig-elevation-factor, 1) * -7px) red, 0 calc(var(--ig-elevation-factor, 1) * 23px) calc(var(--ig-elevation-factor, 1) * 36px) calc(var(--ig-elevation-factor, 1) * 3px) green, 0 calc(var(--ig-elevation-factor, 1) * 9px) calc(var(--ig-elevation-factor, 1) * 44px) calc(var(--ig-elevation-factor, 1) * 8px) blue; - --ig-elevation-24: 0 calc(var(--ig-elevation-factor, 1) * 11px) calc(var(--ig-elevation-factor, 1) * 15px) calc(var(--ig-elevation-factor, 1) * -7px) red, 0 calc(var(--ig-elevation-factor, 1) * 24px) calc(var(--ig-elevation-factor, 1) * 38px) calc(var(--ig-elevation-factor, 1) * 3px) green, 0 calc(var(--ig-elevation-factor, 1) * 9px) calc(var(--ig-elevation-factor, 1) * 46px) calc(var(--ig-elevation-factor, 1) * 8px) blue; -} - -/* END_OUTPUT */ -/* CONTAINED */ -.test-output { - --ig-elevation-1: 0 calc(var(--ig-elevation-factor, 1) * 1px) calc(var(--ig-elevation-factor, 1) * 3px) 0 red, 0 calc(var(--ig-elevation-factor, 1) * 1px) calc(var(--ig-elevation-factor, 1) * 1px) 0 green, 0 calc(var(--ig-elevation-factor, 1) * 2px) calc(var(--ig-elevation-factor, 1) * 1px) calc(var(--ig-elevation-factor, 1) * -1px) blue; -} - -/* END_CONTAINED */ -/* END_ASSERT */ -/* */ -/* Test: should produce CSS variables for a map of shadows */ -/* ASSERT: */ -/* OUTPUT */ -.test-output { - --ig-elevation-small: 0 calc(var(--ig-elevation-factor, 1) * 0.125rem) calc(var(--ig-elevation-factor, 1) * 0.25rem) rgba(0, 0, 0, 0.75); - --ig-elevation-medium: 0 calc(var(--ig-elevation-factor, 1) * 0.25rem) calc(var(--ig-elevation-factor, 1) * 0.5rem) rgba(0, 0, 0, 0.85); - --ig-elevation-large: 0 calc(var(--ig-elevation-factor, 1) * 0.75rem) calc(var(--ig-elevation-factor, 1) * 1rem) rgba(0, 0, 0, 0.95); -} - -/* END_OUTPUT */ -/* EXPECTED */ -.test-output { - --ig-elevation-small: 0 calc(var(--ig-elevation-factor, 1) * 0.125rem) calc(var(--ig-elevation-factor, 1) * 0.25rem) rgba(0, 0, 0, 0.75); - --ig-elevation-medium: 0 calc(var(--ig-elevation-factor, 1) * 0.25rem) calc(var(--ig-elevation-factor, 1) * 0.5rem) rgba(0, 0, 0, 0.85); - --ig-elevation-large: 0 calc(var(--ig-elevation-factor, 1) * 0.75rem) calc(var(--ig-elevation-factor, 1) * 1rem) rgba(0, 0, 0, 0.95); -} - -/* END_EXPECTED */ -/* END_ASSERT */ -/* */ -/* Test: should retrieve a CSS variable elevation by name */ -/* ASSERT: */ -/* OUTPUT */ -.test-output { - box-shadow: var(--ig-elevation-small); -} - -/* END_OUTPUT */ -/* EXPECTED */ -.test-output { - box-shadow: var(--ig-elevation-small); -} - -/* END_EXPECTED */ -/* END_ASSERT */ -/* */ -/* Test: should include box-shadow styles for an elevation level */ -/* ASSERT: */ -/* OUTPUT */ -.test-output { - box-shadow: var(--ig-elevation-small); -} - -/* END_OUTPUT */ -/* EXPECTED */ -.test-output { - box-shadow: var(--ig-elevation-small); -} - -/* END_EXPECTED */ -/* END_ASSERT */ -/* */ -/* */ -/* # Module: BEM */ -/* ------------- */ -/* Test: creates block__element classes */ -/* ASSERT: */ -/* OUTPUT */ -.block { - background: black; -} -.block__element { - color: orange; -} - -/* END_OUTPUT */ -/* EXPECTED */ -.block { - background: black; -} - -.block__element { - color: orange; -} - -/* END_EXPECTED */ -/* END_ASSERT */ -/* */ -/* Test: creates block--modifier classes using the modifier mixins */ -/* ASSERT: */ -/* OUTPUT */ -.block { - background: black; -} -.block--error { - background: red; -} - -.block--error.block--selected { - background: darkred; -} - -/* END_OUTPUT */ -/* EXPECTED */ -.block { - background: black; -} - -.block--error { - background: red; -} - -.block--error.block--selected { - background: darkred; -} - -/* END_EXPECTED */ -/* END_ASSERT */ -/* */ -/* Test: creates block__element--modifier classes using the element mixin */ -/* ASSERT: */ -/* OUTPUT */ -.block { - background: black; -} -.block__element--small { - font-size: 12px; -} - -.block__element--medium { - font-size: 14px; -} - -.block__element--large { - font-size: 16px; -} - -/* END_OUTPUT */ -/* EXPECTED */ -.block { - background: black; -} - -.block__element--small { - font-size: 12px; -} - -.block__element--medium { - font-size: 14px; -} - -.block__element--large { - font-size: 16px; -} - -/* END_EXPECTED */ -/* END_ASSERT */ -/* */ -/* Test: creates negating block__element--modifier classes */ -/* ASSERT: */ -/* OUTPUT */ -.block__element--small:not(.block__element--circle) { - background: blue; -} - -/* END_OUTPUT */ -/* EXPECTED */ -.block__element--small:not(.block__element--circle) { - background: blue; -} - -/* END_EXPECTED */ -/* END_ASSERT */ -/* */ -/* Test: creates multiple element modifier classes using the element mixin */ -/* ASSERT: */ -/* OUTPUT */ -.block { - background: black; -} -.block__element--small.block__element--pink { - color: pink; - font-size: 12px; -} - -/* END_OUTPUT */ -/* EXPECTED */ -.block { - background: black; -} - -.block__element--small.block__element--pink { - color: pink; - font-size: 12px; -} - -/* END_EXPECTED */ -/* END_ASSERT */ -/* */ -/* Test: creates multiple negating element modifier classes */ -/* ASSERT: */ -/* OUTPUT */ -.block__element--small.block__element--pink:not(.block__element--circle, .block__element--large) { - color: pink; - font-size: 12px; -} - -/* END_OUTPUT */ -/* EXPECTED */ -.block__element--small.block__element--pink:not(.block__element--circle, .block__element--large) { - color: pink; - font-size: 12px; -} - -/* END_EXPECTED */ -/* END_ASSERT */ -/* */ -/* Test: overwrites element styles in a modified block */ -/* ASSERT: */ -/* OUTPUT */ -.block { - background: black; -} -.block__element { - color: wheat; -} - -.block--error { - background: red; -} -.block--error .block__element { - color: white; -} - -/* END_OUTPUT */ -/* EXPECTED */ -.block { - background: black; -} - -.block__element { - color: wheat; -} - -.block--error { - background: red; -} - -.block--error .block__element { - color: white; -} - -/* END_EXPECTED */ -/* END_ASSERT */ -/* */ -/* Test: creates negating modifier classes using the mod and mods mixins */ -/* ASSERT: */ -/* OUTPUT */ -.block--checked:not(.block--disabled, .block--indeterminate) { - background: pink; -} - -.block--disabled:not(.block--checked) { - background: gray; -} -.block--disabled:not(.block--checked) .block__element { - color: darkgray; -} - -.block--disabled.block--checked:not(.block--indeterminate) { - background: darkgray; -} - -.block--disabled.block--checked:not(.block--indeterminate, .block--invalid) { - background: black; -} -.block--disabled.block--checked:not(.block--indeterminate, .block--invalid) .block__element { - color: red; -} - -.block--disabled.block--checked:not(.block--indeterminate, .block--invalid) .block__element--orange { - color: orange; -} - -.block--disabled.block--checked:not(.block--indeterminate, .block--invalid) .block__element--rebecca.block__element--purple { - color: rebeccapurple; -} - -/* END_OUTPUT */ -/* EXPECTED */ -.block--checked:not(.block--disabled, .block--indeterminate) { - background: pink; -} - -.block--disabled:not(.block--checked) { - background: gray; -} - -.block--disabled:not(.block--checked) .block__element { - color: darkgray; -} - -.block--disabled.block--checked:not(.block--indeterminate) { - background: darkgray; -} - -.block--disabled.block--checked:not(.block--indeterminate, .block--invalid) { - background: black; -} - -.block--disabled.block--checked:not(.block--indeterminate, .block--invalid) .block__element { - color: red; -} - -.block--disabled.block--checked:not(.block--indeterminate, .block--invalid) .block__element--orange { - color: orange; -} - -.block--disabled.block--checked:not(.block--indeterminate, .block--invalid) .block__element--rebecca.block__element--purple { - color: rebeccapurple; -} - -/* END_EXPECTED */ -/* END_ASSERT */ -/* */ -/* Test: creates element selector inside an attribute selector context */ -/* ASSERT: */ -/* OUTPUT */ -.block[aria-selected=false] .block__element { - display: none; -} - -/* END_OUTPUT */ -/* EXPECTED */ -.block[aria-selected=false] .block__element { - display: none; -} - -/* END_EXPECTED */ -/* END_ASSERT */ -/* */ -/* Test: creates element--modifier selector inside an attribute selector context */ -/* ASSERT: */ -/* OUTPUT */ -.block[aria-selected=false] .block__element--active { - display: block; -} - -/* END_OUTPUT */ -/* EXPECTED */ -.block[aria-selected=false] .block__element--active { - display: block; -} - -/* END_EXPECTED */ -/* END_ASSERT */ -/* */ -/* Test: creates multiple element modifier selectors inside an attribute selector context */ -/* ASSERT: */ -/* OUTPUT */ -.block[aria-selected=false] .block__element--small.block__element--pink { - font-size: 12px; -} - -/* END_OUTPUT */ -/* EXPECTED */ -.block[aria-selected=false] .block__element--small.block__element--pink { - font-size: 12px; -} - -/* END_EXPECTED */ -/* END_ASSERT */ -/* */ -/* Test: creates element selector inside a descendant attribute selector context */ -/* ASSERT: */ -/* OUTPUT */ -.block [aria-selected=true] .block__element { - display: block; -} - -.block [aria-selected=false] .block__element { - display: none; -} - -/* END_OUTPUT */ -/* EXPECTED */ -.block [aria-selected=true] .block__element { - display: block; -} - -.block [aria-selected=false] .block__element { - display: none; -} - -/* END_EXPECTED */ -/* END_ASSERT */ -/* */ -/* Test: should be able to use element classes in modifier body rules */ -/* ASSERT: */ -/* OUTPUT */ -.block__element--circle { - border-radius: 50%; -} - -.block--checked:has(.block__element--circle) { - background: pink; -} - -/* END_OUTPUT */ -/* EXPECTED */ -.block__element--circle { - border-radius: 50%; -} - -.block--checked:has(.block__element--circle) { - background: pink; -} - -/* END_EXPECTED */ -/* END_ASSERT */ -/* */ -/* */ diff --git a/_to_delete/tmp3/perf.css b/_to_delete/tmp3/perf.css deleted file mode 100644 index ce558aab..00000000 --- a/_to_delete/tmp3/perf.css +++ /dev/null @@ -1,242 +0,0 @@ -:root { - --ig-wcag-a: 0.31; - --ig-wcag-aa: 0.185; - --ig-wcag-aaa: 0.178; - --ig-contrast-level: var(--ig-wcag-aa); - --y: clamp(0, (y / var(--ig-contrast-level) - 1) * -infinity, 1); - --y-contrast: xyz-d65 var(--y) var(--y) var(--y); -} -:root { - --ig-primary-50: rgb(226, 237, 251); - --ig-primary-50-contrast: hsla(from color(from var(--ig-primary-50) var(--y-contrast)) h 0 l/1); - --ig-primary-100: rgb(172, 207, 251); - --ig-primary-100-contrast: hsla(from color(from var(--ig-primary-100) var(--y-contrast)) h 0 l/1); - --ig-primary-200: rgb(117, 180, 250); - --ig-primary-200-contrast: hsla(from color(from var(--ig-primary-200) var(--y-contrast)) h 0 l/1); - --ig-primary-300: rgb(67, 155, 239); - --ig-primary-300-contrast: hsla(from color(from var(--ig-primary-300) var(--y-contrast)) h 0 l/1); - --ig-primary-400: rgb(27, 131, 214); - --ig-primary-400-contrast: hsla(from color(from var(--ig-primary-400) var(--y-contrast)) h 0 l/1); - --ig-primary-500: rgb(9, 109, 183); - --ig-primary-500-contrast: hsla(from color(from var(--ig-primary-500) var(--y-contrast)) h 0 l/1); - --ig-primary-600: rgb(6, 89, 150); - --ig-primary-600-contrast: hsla(from color(from var(--ig-primary-600) var(--y-contrast)) h 0 l/1); - --ig-primary-700: rgb(11, 69, 116); - --ig-primary-700-contrast: hsla(from color(from var(--ig-primary-700) var(--y-contrast)) h 0 l/1); - --ig-primary-800: rgb(12, 48, 80); - --ig-primary-800-contrast: hsla(from color(from var(--ig-primary-800) var(--y-contrast)) h 0 l/1); - --ig-primary-900: rgb(6, 22, 37); - --ig-primary-900-contrast: hsla(from color(from var(--ig-primary-900) var(--y-contrast)) h 0 l/1); - --ig-primary-seed: #09f; - --ig-primary-seed-contrast: hsla(from color(from var(--ig-primary-seed) var(--y-contrast)) h 0 l/1); - --ig-primary-A100: rgb(191, 221, 255); - --ig-primary-A100-contrast: hsla(from color(from var(--ig-primary-A100) var(--y-contrast)) h 0 l/1); - --ig-primary-A200: rgb(73, 164, 255); - --ig-primary-A200-contrast: hsla(from color(from var(--ig-primary-A200) var(--y-contrast)) h 0 l/1); - --ig-primary-A400: rgb(4, 127, 213); - --ig-primary-A400-contrast: hsla(from color(from var(--ig-primary-A400) var(--y-contrast)) h 0 l/1); - --ig-primary-A700: rgb(0, 100, 169); - --ig-primary-A700-contrast: hsla(from color(from var(--ig-primary-A700) var(--y-contrast)) h 0 l/1); - --ig-secondary-50: rgb(254, 230, 235); - --ig-secondary-50-contrast: hsla(from color(from var(--ig-secondary-50) var(--y-contrast)) h 0 l/1); - --ig-secondary-100: rgb(255, 186, 205); - --ig-secondary-100-contrast: hsla(from color(from var(--ig-secondary-100) var(--y-contrast)) h 0 l/1); - --ig-secondary-200: rgb(255, 141, 177); - --ig-secondary-200-contrast: hsla(from color(from var(--ig-secondary-200) var(--y-contrast)) h 0 l/1); - --ig-secondary-300: rgb(253, 92, 150); - --ig-secondary-300-contrast: hsla(from color(from var(--ig-secondary-300) var(--y-contrast)) h 0 l/1); - --ig-secondary-400: rgb(233, 52, 126); - --ig-secondary-400-contrast: hsla(from color(from var(--ig-secondary-400) var(--y-contrast)) h 0 l/1); - --ig-secondary-500: rgb(203, 23, 105); - --ig-secondary-500-contrast: hsla(from color(from var(--ig-secondary-500) var(--y-contrast)) h 0 l/1); - --ig-secondary-600: rgb(168, 13, 85); - --ig-secondary-600-contrast: hsla(from color(from var(--ig-secondary-600) var(--y-contrast)) h 0 l/1); - --ig-secondary-700: rgb(131, 16, 66); - --ig-secondary-700-contrast: hsla(from color(from var(--ig-secondary-700) var(--y-contrast)) h 0 l/1); - --ig-secondary-800: rgb(91, 17, 46); - --ig-secondary-800-contrast: hsla(from color(from var(--ig-secondary-800) var(--y-contrast)) h 0 l/1); - --ig-secondary-900: rgb(43, 9, 21); - --ig-secondary-900-contrast: hsla(from color(from var(--ig-secondary-900) var(--y-contrast)) h 0 l/1); - --ig-secondary-seed: #df1b74; - --ig-secondary-seed-contrast: hsla(from color(from var(--ig-secondary-seed) var(--y-contrast)) h 0 l/1); - --ig-secondary-A100: rgb(255, 205, 220); - --ig-secondary-A100-contrast: hsla(from color(from var(--ig-secondary-A100) var(--y-contrast)) h 0 l/1); - --ig-secondary-A200: rgb(255, 112, 163); - --ig-secondary-A200-contrast: hsla(from color(from var(--ig-secondary-A200) var(--y-contrast)) h 0 l/1); - --ig-secondary-A400: rgb(236, 25, 123); - --ig-secondary-A400-contrast: hsla(from color(from var(--ig-secondary-A400) var(--y-contrast)) h 0 l/1); - --ig-secondary-A700: rgb(191, 1, 96); - --ig-secondary-A700-contrast: hsla(from color(from var(--ig-secondary-A700) var(--y-contrast)) h 0 l/1); - --ig-gray-50: rgb(251, 251, 251); - --ig-gray-50-contrast: hsla(from color(from var(--ig-gray-50) var(--y-contrast)) h 0 l/1); - --ig-gray-100: rgb(247, 247, 247); - --ig-gray-100-contrast: hsla(from color(from var(--ig-gray-100) var(--y-contrast)) h 0 l/1); - --ig-gray-200: rgb(236, 236, 236); - --ig-gray-200-contrast: hsla(from color(from var(--ig-gray-200) var(--y-contrast)) h 0 l/1); - --ig-gray-300: rgb(217, 217, 217); - --ig-gray-300-contrast: hsla(from color(from var(--ig-gray-300) var(--y-contrast)) h 0 l/1); - --ig-gray-400: rgb(193, 193, 193); - --ig-gray-400-contrast: hsla(from color(from var(--ig-gray-400) var(--y-contrast)) h 0 l/1); - --ig-gray-500: rgb(164, 164, 164); - --ig-gray-500-contrast: hsla(from color(from var(--ig-gray-500) var(--y-contrast)) h 0 l/1); - --ig-gray-600: rgb(132, 132, 132); - --ig-gray-600-contrast: hsla(from color(from var(--ig-gray-600) var(--y-contrast)) h 0 l/1); - --ig-gray-700: rgb(99, 99, 99); - --ig-gray-700-contrast: hsla(from color(from var(--ig-gray-700) var(--y-contrast)) h 0 l/1); - --ig-gray-800: rgb(66, 66, 66); - --ig-gray-800-contrast: hsla(from color(from var(--ig-gray-800) var(--y-contrast)) h 0 l/1); - --ig-gray-900: rgb(33, 33, 33); - --ig-gray-900-contrast: hsla(from color(from var(--ig-gray-900) var(--y-contrast)) h 0 l/1); - --ig-gray-seed: #333; - --ig-gray-seed-contrast: hsla(from color(from var(--ig-gray-seed) var(--y-contrast)) h 0 l/1); - --ig-surface-50: rgb(253, 253, 253); - --ig-surface-50-contrast: hsla(from color(from var(--ig-surface-50) var(--y-contrast)) h 0 l/1); - --ig-surface-100: rgb(240, 240, 240); - --ig-surface-100-contrast: hsla(from color(from var(--ig-surface-100) var(--y-contrast)) h 0 l/1); - --ig-surface-200: rgb(228, 228, 228); - --ig-surface-200-contrast: hsla(from color(from var(--ig-surface-200) var(--y-contrast)) h 0 l/1); - --ig-surface-300: rgb(216, 216, 216); - --ig-surface-300-contrast: hsla(from color(from var(--ig-surface-300) var(--y-contrast)) h 0 l/1); - --ig-surface-400: rgb(204, 204, 204); - --ig-surface-400-contrast: hsla(from color(from var(--ig-surface-400) var(--y-contrast)) h 0 l/1); - --ig-surface-500: rgb(255, 255, 255); - --ig-surface-500-contrast: hsla(from color(from var(--ig-surface-500) var(--y-contrast)) h 0 l/1); - --ig-surface-600: rgb(194, 194, 194); - --ig-surface-600-contrast: hsla(from color(from var(--ig-surface-600) var(--y-contrast)) h 0 l/1); - --ig-surface-700: rgb(183, 183, 183); - --ig-surface-700-contrast: hsla(from color(from var(--ig-surface-700) var(--y-contrast)) h 0 l/1); - --ig-surface-800: rgb(174, 174, 174); - --ig-surface-800-contrast: hsla(from color(from var(--ig-surface-800) var(--y-contrast)) h 0 l/1); - --ig-surface-900: rgb(164, 164, 164); - --ig-surface-900-contrast: hsla(from color(from var(--ig-surface-900) var(--y-contrast)) h 0 l/1); - --ig-surface-seed: #fff; - --ig-surface-seed-contrast: hsla(from color(from var(--ig-surface-seed) var(--y-contrast)) h 0 l/1); - --ig-surface-A100: rgb(218, 218, 218); - --ig-surface-A100-contrast: hsla(from color(from var(--ig-surface-A100) var(--y-contrast)) h 0 l/1); - --ig-surface-A200: rgb(161, 161, 161); - --ig-surface-A200-contrast: hsla(from color(from var(--ig-surface-A200) var(--y-contrast)) h 0 l/1); - --ig-surface-A400: rgb(124, 124, 124); - --ig-surface-A400-contrast: hsla(from color(from var(--ig-surface-A400) var(--y-contrast)) h 0 l/1); - --ig-surface-A700: rgb(97, 97, 97); - --ig-surface-A700-contrast: hsla(from color(from var(--ig-surface-A700) var(--y-contrast)) h 0 l/1); - --ig-info-50: rgb(227, 236, 251); - --ig-info-50-contrast: hsla(from color(from var(--ig-info-50) var(--y-contrast)) h 0 l/1); - --ig-info-100: rgb(176, 207, 251); - --ig-info-100-contrast: hsla(from color(from var(--ig-info-100) var(--y-contrast)) h 0 l/1); - --ig-info-200: rgb(124, 179, 252); - --ig-info-200-contrast: hsla(from color(from var(--ig-info-200) var(--y-contrast)) h 0 l/1); - --ig-info-300: rgb(75, 152, 245); - --ig-info-300-contrast: hsla(from color(from var(--ig-info-300) var(--y-contrast)) h 0 l/1); - --ig-info-400: rgb(34, 129, 223); - --ig-info-400-contrast: hsla(from color(from var(--ig-info-400) var(--y-contrast)) h 0 l/1); - --ig-info-500: rgb(13, 107, 193); - --ig-info-500-contrast: hsla(from color(from var(--ig-info-500) var(--y-contrast)) h 0 l/1); - --ig-info-600: rgb(7, 87, 159); - --ig-info-600-contrast: hsla(from color(from var(--ig-info-600) var(--y-contrast)) h 0 l/1); - --ig-info-700: rgb(10, 68, 123); - --ig-info-700-contrast: hsla(from color(from var(--ig-info-700) var(--y-contrast)) h 0 l/1); - --ig-info-800: rgb(12, 47, 85); - --ig-info-800-contrast: hsla(from color(from var(--ig-info-800) var(--y-contrast)) h 0 l/1); - --ig-info-900: rgb(6, 22, 40); - --ig-info-900-contrast: hsla(from color(from var(--ig-info-900) var(--y-contrast)) h 0 l/1); - --ig-info-seed: #1377d5; - --ig-info-seed-contrast: hsla(from color(from var(--ig-info-seed) var(--y-contrast)) h 0 l/1); - --ig-info-A100: rgb(194, 220, 255); - --ig-info-A100-contrast: hsla(from color(from var(--ig-info-A100) var(--y-contrast)) h 0 l/1); - --ig-info-A200: rgb(87, 163, 255); - --ig-info-A200-contrast: hsla(from color(from var(--ig-info-A200) var(--y-contrast)) h 0 l/1); - --ig-info-A400: rgb(10, 124, 225); - --ig-info-A400-contrast: hsla(from color(from var(--ig-info-A400) var(--y-contrast)) h 0 l/1); - --ig-info-A700: rgb(0, 97, 180); - --ig-info-A700-contrast: hsla(from color(from var(--ig-info-A700) var(--y-contrast)) h 0 l/1); - --ig-success-50: rgb(203, 247, 207); - --ig-success-50-contrast: hsla(from color(from var(--ig-success-50) var(--y-contrast)) h 0 l/1); - --ig-success-100: rgb(127, 225, 142); - --ig-success-100-contrast: hsla(from color(from var(--ig-success-100) var(--y-contrast)) h 0 l/1); - --ig-success-200: rgb(94, 197, 112); - --ig-success-200-contrast: hsla(from color(from var(--ig-success-200) var(--y-contrast)) h 0 l/1); - --ig-success-300: rgb(73, 169, 91); - --ig-success-300-contrast: hsla(from color(from var(--ig-success-300) var(--y-contrast)) h 0 l/1); - --ig-success-400: rgb(59, 144, 75); - --ig-success-400-contrast: hsla(from color(from var(--ig-success-400) var(--y-contrast)) h 0 l/1); - --ig-success-500: rgb(48, 120, 62); - --ig-success-500-contrast: hsla(from color(from var(--ig-success-500) var(--y-contrast)) h 0 l/1); - --ig-success-600: rgb(39, 98, 50); - --ig-success-600-contrast: hsla(from color(from var(--ig-success-600) var(--y-contrast)) h 0 l/1); - --ig-success-700: rgb(32, 76, 39); - --ig-success-700-contrast: hsla(from color(from var(--ig-success-700) var(--y-contrast)) h 0 l/1); - --ig-success-800: rgb(24, 53, 28); - --ig-success-800-contrast: hsla(from color(from var(--ig-success-800) var(--y-contrast)) h 0 l/1); - --ig-success-900: rgb(11, 24, 12); - --ig-success-900-contrast: hsla(from color(from var(--ig-success-900) var(--y-contrast)) h 0 l/1); - --ig-success-seed: #4eb862; - --ig-success-seed-contrast: hsla(from color(from var(--ig-success-seed) var(--y-contrast)) h 0 l/1); - --ig-success-A100: rgb(51, 250, 108); - --ig-success-A100-contrast: hsla(from color(from var(--ig-success-A100) var(--y-contrast)) h 0 l/1); - --ig-success-A200: rgb(0, 186, 71); - --ig-success-A200-contrast: hsla(from color(from var(--ig-success-A200) var(--y-contrast)) h 0 l/1); - --ig-success-A400: rgb(0, 143, 53); - --ig-success-A400-contrast: hsla(from color(from var(--ig-success-A400) var(--y-contrast)) h 0 l/1); - --ig-success-A700: rgb(0, 113, 40); - --ig-success-A700-contrast: hsla(from color(from var(--ig-success-A700) var(--y-contrast)) h 0 l/1); - --ig-warn-50: rgb(251, 233, 213); - --ig-warn-50-contrast: hsla(from color(from var(--ig-warn-50) var(--y-contrast)) h 0 l/1); - --ig-warn-100: rgb(247, 195, 133); - --ig-warn-100-contrast: hsla(from color(from var(--ig-warn-100) var(--y-contrast)) h 0 l/1); - --ig-warn-200: rgb(233, 162, 65); - --ig-warn-200-contrast: hsla(from color(from var(--ig-warn-200) var(--y-contrast)) h 0 l/1); - --ig-warn-300: rgb(206, 135, 24); - --ig-warn-300-contrast: hsla(from color(from var(--ig-warn-300) var(--y-contrast)) h 0 l/1); - --ig-warn-400: rgb(177, 114, 4); - --ig-warn-400-contrast: hsla(from color(from var(--ig-warn-400) var(--y-contrast)) h 0 l/1); - --ig-warn-500: rgb(149, 94, 1); - --ig-warn-500-contrast: hsla(from color(from var(--ig-warn-500) var(--y-contrast)) h 0 l/1); - --ig-warn-600: rgb(121, 77, 4); - --ig-warn-600-contrast: hsla(from color(from var(--ig-warn-600) var(--y-contrast)) h 0 l/1); - --ig-warn-700: rgb(94, 60, 9); - --ig-warn-700-contrast: hsla(from color(from var(--ig-warn-700) var(--y-contrast)) h 0 l/1); - --ig-warn-800: rgb(65, 42, 11); - --ig-warn-800-contrast: hsla(from color(from var(--ig-warn-800) var(--y-contrast)) h 0 l/1); - --ig-warn-900: rgb(30, 19, 6); - --ig-warn-900-contrast: hsla(from color(from var(--ig-warn-900) var(--y-contrast)) h 0 l/1); - --ig-warn-seed: #faa419; - --ig-warn-seed-contrast: hsla(from color(from var(--ig-warn-seed) var(--y-contrast)) h 0 l/1); - --ig-warn-A100: rgb(255, 211, 156); - --ig-warn-A100-contrast: hsla(from color(from var(--ig-warn-A100) var(--y-contrast)) h 0 l/1); - --ig-warn-A200: rgb(222, 144, 3); - --ig-warn-A200-contrast: hsla(from color(from var(--ig-warn-A200) var(--y-contrast)) h 0 l/1); - --ig-warn-A400: rgb(172, 110, 0); - --ig-warn-A400-contrast: hsla(from color(from var(--ig-warn-A400) var(--y-contrast)) h 0 l/1); - --ig-warn-A700: rgb(136, 86, 0); - --ig-warn-A700-contrast: hsla(from color(from var(--ig-warn-A700) var(--y-contrast)) h 0 l/1); - --ig-error-50: rgb(254, 230, 230); - --ig-error-50-contrast: hsla(from color(from var(--ig-error-50) var(--y-contrast)) h 0 l/1); - --ig-error-100: rgb(255, 187, 187); - --ig-error-100-contrast: hsla(from color(from var(--ig-error-100) var(--y-contrast)) h 0 l/1); - --ig-error-200: rgb(255, 144, 147); - --ig-error-200-contrast: hsla(from color(from var(--ig-error-200) var(--y-contrast)) h 0 l/1); - --ig-error-300: rgb(254, 97, 109); - --ig-error-300-contrast: hsla(from color(from var(--ig-error-300) var(--y-contrast)) h 0 l/1); - --ig-error-400: rgb(236, 56, 81); - --ig-error-400-contrast: hsla(from color(from var(--ig-error-400) var(--y-contrast)) h 0 l/1); - --ig-error-500: rgb(207, 27, 62); - --ig-error-500-contrast: hsla(from color(from var(--ig-error-500) var(--y-contrast)) h 0 l/1); - --ig-error-600: rgb(172, 15, 48); - --ig-error-600-contrast: hsla(from color(from var(--ig-error-600) var(--y-contrast)) h 0 l/1); - --ig-error-700: rgb(134, 17, 38); - --ig-error-700-contrast: hsla(from color(from var(--ig-error-700) var(--y-contrast)) h 0 l/1); - --ig-error-800: rgb(93, 17, 27); - --ig-error-800-contrast: hsla(from color(from var(--ig-error-800) var(--y-contrast)) h 0 l/1); - --ig-error-900: rgb(44, 9, 12); - --ig-error-900-contrast: hsla(from color(from var(--ig-error-900) var(--y-contrast)) h 0 l/1); - --ig-error-seed: #ff134a; - --ig-error-seed-contrast: hsla(from color(from var(--ig-error-seed) var(--y-contrast)) h 0 l/1); - --ig-error-A100: rgb(255, 206, 206); - --ig-error-A100-contrast: hsla(from color(from var(--ig-error-A100) var(--y-contrast)) h 0 l/1); - --ig-error-A200: rgb(255, 117, 125); - --ig-error-A200-contrast: hsla(from color(from var(--ig-error-A200) var(--y-contrast)) h 0 l/1); - --ig-error-A400: rgb(240, 31, 72); - --ig-error-A400-contrast: hsla(from color(from var(--ig-error-A400) var(--y-contrast)) h 0 l/1); - --ig-error-A700: rgb(195, 1, 53); - --ig-error-A700-contrast: hsla(from color(from var(--ig-error-A700) var(--y-contrast)) h 0 l/1); -} diff --git a/_to_delete/tmp3/perf.scss b/_to_delete/tmp3/perf.scss deleted file mode 100644 index 6bc23aa9..00000000 --- a/_to_delete/tmp3/perf.scss +++ /dev/null @@ -1,3 +0,0 @@ -@use '../sass/color' as *; -$p: palette($primary: #09f, $secondary: #df1b74, $surface: #fff, $gray: #333); -:root { @include palette($p); } diff --git a/_to_delete/tmp3/s4.scss b/_to_delete/tmp3/s4.scss deleted file mode 100644 index 44a3dbb3..00000000 --- a/_to_delete/tmp3/s4.scss +++ /dev/null @@ -1,9 +0,0 @@ -@use '../sass/color' as *; -$V: ('50','100','200','300','400','500','600','700','800','900'); -$white: palette($primary: #09f, $secondary: #09f, $surface: #fff, $gray: #333); -$black: palette($primary: #09f, $secondary: #09f, $surface: #000, $gray: #ccc); -$off: palette($primary: #09f, $secondary: #09f, $surface: #f8f8fa, $gray: #333); -surface-white { @each $v in $V { #{$v}: color($white, surface, $v); } } -surface-black { @each $v in $V { #{$v}: color($black, surface, $v); } } -surface-off { @each $v in $V { #{$v}: color($off, surface, $v); } } -gray-white { @each $v in $V { #{$v}: color($white, gray, $v); } } diff --git a/_to_delete/tmp3/s5.scss b/_to_delete/tmp3/s5.scss deleted file mode 100644 index 18c86eaf..00000000 --- a/_to_delete/tmp3/s5.scss +++ /dev/null @@ -1,18 +0,0 @@ -@use '../sass/color' as *; -$V: ('50','100','200','300','400','500','600','700','800','900'); -// 1. preset name per family -$a: palette($primary: #09f, $secondary: #09f, $surface: #fff, $gray: #333, $ladders: ('gray': 'carbon')); -// 2. one preset for every family -$b: palette($primary: #09f, $secondary: #09f, $surface: #fff, $gray: #333, $ladders: 'tailwind'); -// 3. a bare curve -$c: palette($primary: #09f, $secondary: #09f, $surface: #fff, $gray: #333, $ladders: ('gray': (0.53, 0, 0.825, 0.785))); -// 4. an explicit spec -$d: palette($primary: #09f, $secondary: #09f, $surface: #fff, $gray: #333, $ladders: ('gray': (range: (1.1, 12), curve: null))); -// 5. shades() directly -$e: shades('brand', #09f, $IColorShades, $ladder: 'carbon'); -gray-carbon { @each $v in $V { #{$v}: color($a, gray, $v); } } -gray-tailwind { @each $v in $V { #{$v}: color($b, gray, $v); } } -primary-tailwind { @each $v in $V { #{$v}: color($b, primary, $v); } } -gray-curve { @each $v in $V { #{$v}: color($c, gray, $v); } } -gray-spec { @each $v in $V { #{$v}: color($d, gray, $v); } } -brand-direct { @each $v in $V { #{$v}: map-get($e, '#{$v}-raw'); } } diff --git a/_to_delete/tmp3/shades.html b/_to_delete/tmp3/shades.html deleted file mode 100644 index f9f12fb7..00000000 --- a/_to_delete/tmp3/shades.html +++ /dev/null @@ -1,436 +0,0 @@ - - -Shade generators -
-

Shade generators, side by side

-

Compiled from the library. Numbers are WCAG contrast against white for color ramps, -and against the surface for the neutral and surface families. Every value is a concrete color — -the generator resolves them at build time.

- - -

Color ramps

- -
-

Framework primary

#0099ff - lands on 300
-
- -
-

gamut-relative

-
50
100
200
300
400
500
600
700
800
900
- -
- -
-

legacy

-
50
100
200
300
400
500
600
700
800
900
- -
-
-
-

accent track

A100
A200
A400
A700
-

legacy accents

A100
A200
A400
A700
-
-
-
-

Framework secondary

#df1b74 - lands on 400
-
- -
-

gamut-relative

-
50
100
200
300
400
500
600
700
800
900
- -
- -
-

legacy

-
50
100
200
300
400
500
600
700
800
900
- -
-
-
-

accent track

A100
A200
A400
A700
-

legacy accents

A100
A200
A400
A700
-
-
-
-

Warn

#faa419 - lands on 200
-
- -
-

gamut-relative

-
50
100
200
300
400
500
600
700
800
900
- -
- -
-

legacy

-
50
100
200
300
400
500
600
700
800
900
- -
-
-
-

accent track

A100
A200
A400
A700
-

legacy accents

A100
A200
A400
A700
-
-
-
-

Success

#4eb862 - lands on 200
-
- -
-

gamut-relative

-
50
100
200
300
400
500
600
700
800
900
- -
- -
-

legacy

-
50
100
200
300
400
500
600
700
800
900
- -
-
-
-

accent track

A100
A200
A400
A700
-

legacy accents

A100
A200
A400
A700
-
-
-
-

Near-white seed

#ffe9b0 - lands on 50
-
- -
-

gamut-relative

-
50
100
200
300
400
500
600
700
800
900
- -
- -
-

legacy

-
50
100
200
300
400
500
600
700
800
900
- -
-
-
-

accent track

A100
A200
A400
A700
-

legacy accents

A100
A200
A400
A700
-
-
-
-

Near-black seed

#141225 - lands on 900
-
- -
-

gamut-relative

-
50
100
200
300
400
500
600
700
800
900
- -
- -
-

legacy

-
50
100
200
300
400
500
600
700
800
900
- -
-
-
-

accent track

A100
A200
A400
A700
-

legacy accents

A100
A200
A400
A700
-
-
-
-

Neon

#00ff00 - lands on 100
-
- -
-

gamut-relative

-
50
100
200
300
400
500
600
700
800
900
- -
- -
-

legacy

-
50
100
200
300
400
500
600
700
800
900
- -
-
-
-

accent track

A100
A200
A400
A700
-

legacy accents

A100
A200
A400
A700
-
-
-
-

Washed out

#a99bb0 - lands on 300
-
- -
-

gamut-relative

-
50
100
200
300
400
500
600
700
800
900
- -
- -
-

legacy

-
50
100
200
300
400
500
600
700
800
900
- -
-
-
-

accent track

A100
A200
A400
A700
-

legacy accents

A100
A200
A400
A700
-
-
-
-

Pure gray

#8a8a8a - lands on 400
-
- -
-

gamut-relative

-
50
100
200
300
400
500
600
700
800
900
- -
- -
-

legacy

-
50
100
200
300
400
500
600
700
800
900
- -
-
-
-

accent track

A100
A200
A400
A700
-

legacy accents

A100
A200
A400
A700
-
-
- -

Ladder flavors

-

The same generator, a different rhythm. Each curve was fitted to the scale it is named -after; material reproduces this library's original grayscale, which is why it is the default -for gray. Pass one with $ladders: ('gray': 'carbon'), or hand in your own -cubic-bezier control points.

-
- -
-

even

-
50
100
200
300
400
500
600
700
800
900
-
-
-

material

-
50
100
200
300
400
500
600
700
800
900
-
-
-

tailwind

-
50
100
200
300
400
500
600
700
800
900
-
-
-

carbon

-
50
100
200
300
400
500
600
700
800
900
-
-
- -

Neutral and surface families

- -
-

Pure white surface

#ffffff
-
- -
-

gray · gamut-relative

-
50
100
200
300
400
500
600
700
800
900
-

anchored to the surface, so 50 always sits nearest the background

-
- -
-

gray · legacy

-
50
100
200
300
400
500
600
700
800
900
- -
-
-
- -
-

surface · gamut-relative

-
50
100
200
300
400
500
600
700
800
900
-

500 is the background; every other shade is a layer on it, 50 the faintest through 900 the strongest

-
- -
-

surface · legacy

-
50
100
200
300
400
500
600
700
800
900
- -
-
-
-
-

Off-white surface

#f8f8fa
-
- -
-

gray · gamut-relative

-
50
100
200
300
400
500
600
700
800
900
-

anchored to the surface, so 50 always sits nearest the background

-
- -
-

gray · legacy

-
50
100
200
300
400
500
600
700
800
900
- -
-
-
- -
-

surface · gamut-relative

-
50
100
200
300
400
500
600
700
800
900
-

500 is the background; every other shade is a layer on it, 50 the faintest through 900 the strongest

-
- -
-

surface · legacy

-
50
100
200
300
400
500
600
700
800
900
- -
-
-
-
-

Dark surface

#1a1a24
-
- -
-

gray · gamut-relative

-
50
100
200
300
400
500
600
700
800
900
-

anchored to the surface, so 50 always sits nearest the background

-
- -
-

gray · legacy

-
50
100
200
300
400
500
600
700
800
900
- -
-
-
- -
-

surface · gamut-relative

-
50
100
200
300
400
500
600
700
800
900
-

500 is the background; every other shade is a layer on it, 50 the faintest through 900 the strongest

-
- -
-

surface · legacy

-
50
100
200
300
400
500
600
700
800
900
- -
-
-
-
-

Pure black surface

#000000
-
- -
-

gray · gamut-relative

-
50
100
200
300
400
500
600
700
800
900
-

anchored to the surface, so 50 always sits nearest the background

-
- -
-

gray · legacy

-
50
100
200
300
400
500
600
700
800
900
- -
-
-
- -
-

surface · gamut-relative

-
50
100
200
300
400
500
600
700
800
900
-

500 is the background; every other shade is a layer on it, 50 the faintest through 900 the strongest

-
- -
-

surface · legacy

-
50
100
200
300
400
500
600
700
800
900
- -
-
-
- -
Generated by .scripts/previewShades.mjs. The palettes bundled with the library -stay on the legacy generator, so shipped themes are unchanged.
-
- \ No newline at end of file diff --git a/_to_delete/tmp3/sweep.mjs b/_to_delete/tmp3/sweep.mjs deleted file mode 100644 index 7b65497c..00000000 --- a/_to_delete/tmp3/sweep.mjs +++ /dev/null @@ -1,53 +0,0 @@ -import * as sass from "sass"; -const ROOT="."; -const SH=["50","100","200","300","400","500","600","700","800","900"]; -const LAYERS=["50","100","200","300","400","600","700","800","900"]; -const SEEDS=["#0099ff","#df1b74","#faa419","#4eb862","#7c3aed","#e11d48","#0d9488","#a99bb0", - "#00ff00","#ffe9b0","#141225","#8a8a8a","#ff00ff","#00ffff","#123456","#fefefe","#010203","#c0ffee"]; -const SURFACES=["#ffffff","#fcfcfd","#f8f8fa","#eeeeee","#1a1a24","#000000","#0d1117","#808080"]; -const warn=[]; -const run=(b)=>{const css=sass.compileString(`@use 'sass:map';\n@use 'sass/color' as *;\n${b}`, - {loadPaths:[ROOT],logger:{warn:(m)=>warn.push(m.split("\n")[0])}}).css; - const o={};for(const l of css.split("\n")){const m=l.match(/^\s*([\w-]+):\s*(.+);\s*$/);if(m)o[m[1]]=m[2].trim();}return o;}; -const hx=(s)=>{const m=s.match(/^#?([0-9a-f]{3,6})$/i)||s.match(/rgb\((\d+),\s*(\d+),\s*(\d+)\)/i); - if(!m)return null; - if(m.length===2){let h=m[1];if(h.length===3)h=[...h].map(c=>c+c).join("");return [0,2,4].map(i=>parseInt(h.slice(i,i+2),16));} - return [1,2,3].map(i=>+m[i]);}; -const NAMED={white:[255,255,255],black:[0,0,0],lightgray:[211,211,211]}; -const col=(s)=>NAMED[s]||hx(s); -const lin=v=>(v/=255)<=0.03928?v/12.92:Math.pow((v+0.055)/1.055,2.4); -const lum=([r,g,b])=>0.2126*lin(r)+0.7152*lin(g)+0.0722*lin(b); -const cr=(a,b)=>{const x=lum(a)+0.05,y=lum(b)+0.05;return Math.max(x,y)/Math.min(x,y);}; - -let aaF=0,aaT=0,dup=0; -for(const seed of SEEDS){ - const d=run(`$p: palette($primary: ${seed}, $secondary: ${seed}, $surface: #fff, $gray: #333); - $s: map.get($p,'primary'); out { ${SH.map(v=>`s-${v}: #{map.get($s,'${v}-raw')};`).join("")} }`); - const c=SH.map(v=>col(d[`s-${v}`])); - if(new Set(c.map(String)).size!==c.length){dup++;console.log("DUP",seed);} - for(let i=0;i<5;i++){aaT++;if(cr(c[i],c[i+5])<4.5){aaF++;console.log("AA fail",seed,SH[i],SH[i+5],cr(c[i],c[i+5]).toFixed(2));}} -} -console.log(`color ramps: ${SEEDS.length} seeds | AA 5-rung failures ${aaF}/${aaT} | duplicate-shade families ${dup}\n`); - -console.log("surface + gray across backgrounds:"); -for(const bg of SURFACES){ - const d=run(`$p: palette($primary: #09f, $secondary: #09f, $surface: ${bg}, $gray: #333); - $g: map.get($p,'gray'); $s: map.get($p,'surface'); - out { ${SH.map(v=>`g-${v}: #{map.get($g,'${v}-raw')};`).join("")} - ${SH.map(v=>`s-${v}: #{map.get($s,'${v}-raw')};`).join("")} }`); - const g=SH.map(v=>col(d[`g-${v}`])), s=SH.map(v=>col(d[`s-${v}`])), b=col(bg); - const layers=LAYERS.map(v=>col(d[`s-${v}`])); - let mono=true,prev=1; - for(const l of layers){const a=cr(l,b);if(a<=prev){mono=false}prev=a;} - console.log(` ${bg} gray ${new Set(g.map(String)).size}/10 distinct, 50-nearest ${cr(g[0],b)`g-${v}: #{map.get($g,'${v}-raw')};`).join("")} }`); - const g=SH.map(v=>col(d[`g-${v}`])); - let f=0; for(let i=0;i<5;i++) if(cr(g[i],g[i+5])<4.5) f++; - console.log(` ${p.padEnd(9)} ${SH.map(v=>d[`g-${v}`]).join(" ")} AA ${5-f}/5`); -} -console.log("\nwarnings:",[...new Set(warn)].length?[...new Set(warn)]:"none"); diff --git a/_to_delete/tmp3/tests.css b/_to_delete/tmp3/tests.css deleted file mode 100644 index dc94aac4..00000000 --- a/_to_delete/tmp3/tests.css +++ /dev/null @@ -1,8052 +0,0 @@ -@charset "UTF-8"; -/* # Module: Animations */ -/* -------------------- */ -/* Test: should include a keyframe animation only once at the root of the stylesheet */ -/* ASSERT: */ -/* OUTPUT */ -@keyframes test-keyframes { - 0% { - color: red; - } - 100% { - color: blue; - } -} -/* END_OUTPUT */ -/* EXPECTED */ -@keyframes test-keyframes { - 0% { - color: red; - } - 100% { - color: blue; - } -} -/* END_EXPECTED */ -/* END_ASSERT */ -/* */ -/* Test: should include a list of animations using the animation mixin */ -/* ASSERT: */ -/* OUTPUT */ -.test-output { - animation: "test-keyframes" 2s ease-out, "bounce-out" 1s ease-out; -} - -/* END_OUTPUT */ -/* EXPECTED */ -.test-output { - animation: "test-keyframes" 2s ease-out, "bounce-out" 1s ease-out; -} - -/* END_EXPECTED */ -/* END_ASSERT */ -/* */ -/* */ -/* # Module: Color */ -/* --------------- */ -/* # Module: Color :: base */ -/* ----------------------- */ -/* Test: should mix two colors to produce an opaque color */ -/* ✔ [assert-equal] should mix two colors to produce an opaque color */ -/* ✔ [assert-equal] should mix two colors to produce an opaque color */ -/* */ -/* Test: converts a color to a list of HSL values */ -/* ✔ [assert-equal] converts a color to a list of HSL values */ -/* */ -/* */ -/* # Module: Color :: charts */ -/* ------------------------- */ -/* Test: should resolve regular chart brushes */ -/* ✔ [assert-equal] should resolve regular chart brushes */ -/* */ -/* Test: should resolve color-blind chart brushes */ -/* ✔ [assert-equal] should resolve color-blind chart brushes */ -/* */ -/* */ -/* # Module: Color :: contrast */ -/* --------------------------- */ -/* Test: should return an adaptive contrast color from a hex value */ -/* ✔ [assert-equal] should return an adaptive contrast color from a hex value */ -/* */ -/* Test: should return an adaptive contrast color from an hsl value */ -/* ✔ [assert-equal] should return an adaptive contrast color from an hsl value */ -/* */ -/* Test: should return an adaptive contrast color from a CSS variable value */ -/* ✔ [assert-equal] should return an adaptive contrast color from a CSS variable value */ -/* */ -/* Test: should return the passed background value if no valid colors are provided */ -/* ✔ [assert-equal] should return the passed background value if no valid colors are provided */ -/* */ -/* Test: should return black for a white background */ -/* ✔ [assert-equal] should return black for a white background */ -/* */ -/* Test: should return white for a black background */ -/* ✔ [assert-equal] should return white for a black background */ -/* */ -/* Test: should return a contrasting color for a given background regardless of level case */ -/* ✔ [assert-equal] should return a contrasting color for a given background regardless of level case */ -/* ✔ [assert-equal] should return a contrasting color for a given background regardless of level case */ -/* ✔ [assert-equal] should return a contrasting color for a given background regardless of level case */ -/* */ -/* Test: returns the best contrast color from a list of candidates */ -/* ✔ [assert-equal] returns the best contrast color from a list of candidates */ -/* */ -/* Test: should return an AAA contrasting color for a given background */ -/* ✔ [assert-equal] should return an AAA contrasting color for a given background */ -/* */ -/* Test: should return an AA contrasting color for a given background */ -/* ✔ [assert-equal] should return an AA contrasting color for a given background */ -/* */ -/* */ -/* # Module: Color :: palette */ -/* -------------------------- */ -/* Test: should return a shade of type color w/ palette as only argument */ -/* ✔ [assert-equal] should return a shade of type color w/ palette as only argument */ -/* */ -/* Test: should return a shade of type color string w/ palette and color as only arguments */ -/* ✔ [assert-equal] should return a shade of type color string w/ palette and color as only arguments */ -/* */ -/* Test: should return a shade of type string w/ all arguments passed */ -/* ✔ [assert-equal] should return a shade of type string w/ all arguments passed */ -/* ✔ [assert-unequal] should return a shade of type string w/ all arguments passed */ -/* */ -/* Test: should return a shade as CSS variable w/o arguments */ -/* ✔ [assert-equal] should return a shade as CSS variable w/o arguments */ -/* ✔ [assert-equal] should return a shade as CSS variable w/o arguments */ -/* */ -/* Test: should return a shade as CSS variable w/ color as only argument */ -/* ✔ [assert-equal] should return a shade as CSS variable w/ color as only argument */ -/* ✔ [assert-equal] should return a shade as CSS variable w/ color as only argument */ -/* */ -/* Test: should return a shade of type string as CSS var w/ color and variant as only arguments */ -/* ✔ [assert-equal] should return a shade of type string as CSS var w/ color and variant as only arguments */ -/* ✔ [assert-equal] should return a shade of type string as CSS var w/ color and variant as only arguments */ -/* */ -/* Test: should return a contrast shade w/ palette as only argument */ -/* ✔ [assert-equal] should return a contrast shade w/ palette as only argument */ -/* */ -/* Test: should return a contrast shade of type string as CSS var w/ color and variant as only arguments */ -/* ✔ [assert-equal] should return a contrast shade of type string as CSS var w/ color and variant as only arguments */ -/* ✔ [assert-equal] should return a contrast shade of type string as CSS var w/ color and variant as only arguments */ -/* */ -/* Test: should retrieve colors from a palette regadless of type of key */ -/* ✔ [assert-true] should retrieve colors from a palette regadless of type of key */ -/* ✔ [assert-equal] should retrieve colors from a palette regadless of type of key */ -/* ✔ [assert-true] should retrieve colors from a palette regadless of type of key */ -/* ✔ [assert-equal] should retrieve colors from a palette regadless of type of key */ -/* ✔ [assert-true] should retrieve colors from a palette regadless of type of key */ -/* ✔ [assert-equal] should retrieve colors from a palette regadless of type of key */ -/* ✔ [assert-true] should retrieve colors from a palette regadless of type of key */ -/* ✔ [assert-equal] should retrieve colors from a palette regadless of type of key */ -/* */ -/* Test: should generate an HSL color shade from a given base color */ -/* ✔ [assert-equal] should generate an HSL color shade from a given base color */ -/* */ -/* Test: should generate an a contrasting HSL grayscale shade for a given surface color */ -/* ✔ [assert-equal] should generate an a contrasting HSL grayscale shade for a given surface color */ -/* ✔ [assert-equal] should generate an a contrasting HSL grayscale shade for a given surface color */ -/* */ -/* Test: should generate a valid palette */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] map */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] map */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] map */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] map */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] map */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] map */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] map */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] map */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] map */ -/* ✔ [assert-true] should generate a valid palette */ -/* ✔ [assert-true] color */ -/* ✔ [assert-true] string */ -/* */ -/* Test: should generate correct CSS variables for color and grayscale shades in a palette */ -/* ASSERT: */ -/* OUTPUT */ -:root { - --ig-wcag-a: 0.31; - --ig-wcag-aa: 0.185; - --ig-wcag-aaa: 0.178; - --ig-contrast-level: var(--ig-wcag-aa); - --y: clamp(0, (y / var(--ig-contrast-level) - 1) * -infinity, 1); - --y-contrast: xyz-d65 var(--y) var(--y) var(--y); -} - -:root { - --ig-primary-50: rgb(226, 237, 251); - --ig-primary-50-contrast: hsla(from color(from var(--ig-primary-50) var(--y-contrast)) h 0 l/1); - --ig-primary-100: rgb(172, 207, 251); - --ig-primary-100-contrast: hsla(from color(from var(--ig-primary-100) var(--y-contrast)) h 0 l/1); - --ig-primary-200: rgb(117, 180, 250); - --ig-primary-200-contrast: hsla(from color(from var(--ig-primary-200) var(--y-contrast)) h 0 l/1); - --ig-primary-300: rgb(67, 155, 239); - --ig-primary-300-contrast: hsla(from color(from var(--ig-primary-300) var(--y-contrast)) h 0 l/1); - --ig-primary-400: rgb(27, 131, 214); - --ig-primary-400-contrast: hsla(from color(from var(--ig-primary-400) var(--y-contrast)) h 0 l/1); - --ig-primary-500: rgb(9, 109, 183); - --ig-primary-500-contrast: hsla(from color(from var(--ig-primary-500) var(--y-contrast)) h 0 l/1); - --ig-primary-600: rgb(6, 89, 150); - --ig-primary-600-contrast: hsla(from color(from var(--ig-primary-600) var(--y-contrast)) h 0 l/1); - --ig-primary-700: rgb(11, 69, 116); - --ig-primary-700-contrast: hsla(from color(from var(--ig-primary-700) var(--y-contrast)) h 0 l/1); - --ig-primary-800: rgb(12, 48, 80); - --ig-primary-800-contrast: hsla(from color(from var(--ig-primary-800) var(--y-contrast)) h 0 l/1); - --ig-primary-900: rgb(6, 22, 37); - --ig-primary-900-contrast: hsla(from color(from var(--ig-primary-900) var(--y-contrast)) h 0 l/1); - --ig-primary-seed: #09f; - --ig-primary-seed-contrast: hsla(from color(from var(--ig-primary-seed) var(--y-contrast)) h 0 l/1); - --ig-primary-A100: rgb(191, 221, 255); - --ig-primary-A100-contrast: hsla(from color(from var(--ig-primary-A100) var(--y-contrast)) h 0 l/1); - --ig-primary-A200: rgb(73, 164, 255); - --ig-primary-A200-contrast: hsla(from color(from var(--ig-primary-A200) var(--y-contrast)) h 0 l/1); - --ig-primary-A400: rgb(4, 127, 213); - --ig-primary-A400-contrast: hsla(from color(from var(--ig-primary-A400) var(--y-contrast)) h 0 l/1); - --ig-primary-A700: rgb(0, 100, 169); - --ig-primary-A700-contrast: hsla(from color(from var(--ig-primary-A700) var(--y-contrast)) h 0 l/1); - --ig-secondary-50: rgb(240, 235, 245); - --ig-secondary-50-contrast: hsla(from color(from var(--ig-secondary-50) var(--y-contrast)) h 0 l/1); - --ig-secondary-100: rgb(213, 198, 231); - --ig-secondary-100-contrast: hsla(from color(from var(--ig-secondary-100) var(--y-contrast)) h 0 l/1); - --ig-secondary-200: rgb(190, 166, 221); - --ig-secondary-200-contrast: hsla(from color(from var(--ig-secondary-200) var(--y-contrast)) h 0 l/1); - --ig-secondary-300: rgb(168, 136, 211); - --ig-secondary-300-contrast: hsla(from color(from var(--ig-secondary-300) var(--y-contrast)) h 0 l/1); - --ig-secondary-400: rgb(146, 110, 198); - --ig-secondary-400-contrast: hsla(from color(from var(--ig-secondary-400) var(--y-contrast)) h 0 l/1); - --ig-secondary-500: rgb(125, 87, 177); - --ig-secondary-500-contrast: hsla(from color(from var(--ig-secondary-500) var(--y-contrast)) h 0 l/1); - --ig-secondary-600: rgb(103, 69, 150); - --ig-secondary-600-contrast: hsla(from color(from var(--ig-secondary-600) var(--y-contrast)) h 0 l/1); - --ig-secondary-700: rgb(80, 53, 117); - --ig-secondary-700-contrast: hsla(from color(from var(--ig-secondary-700) var(--y-contrast)) h 0 l/1); - --ig-secondary-800: rgb(56, 38, 81); - --ig-secondary-800-contrast: hsla(from color(from var(--ig-secondary-800) var(--y-contrast)) h 0 l/1); - --ig-secondary-900: rgb(25, 17, 38); - --ig-secondary-900-contrast: hsla(from color(from var(--ig-secondary-900) var(--y-contrast)) h 0 l/1); - --ig-secondary-seed: #97c; - --ig-secondary-seed-contrast: hsla(from color(from var(--ig-secondary-seed) var(--y-contrast)) h 0 l/1); - --ig-secondary-A100: rgb(233, 209, 255); - --ig-secondary-A100-contrast: hsla(from color(from var(--ig-secondary-A100) var(--y-contrast)) h 0 l/1); - --ig-secondary-A200: rgb(192, 134, 255); - --ig-secondary-A200-contrast: hsla(from color(from var(--ig-secondary-A200) var(--y-contrast)) h 0 l/1); - --ig-secondary-A400: rgb(163, 75, 255); - --ig-secondary-A400-contrast: hsla(from color(from var(--ig-secondary-A400) var(--y-contrast)) h 0 l/1); - --ig-secondary-A700: rgb(139, 23, 233); - --ig-secondary-A700-contrast: hsla(from color(from var(--ig-secondary-A700) var(--y-contrast)) h 0 l/1); - --ig-gray-50: rgb(251, 251, 251); - --ig-gray-50-contrast: hsla(from color(from var(--ig-gray-50) var(--y-contrast)) h 0 l/1); - --ig-gray-100: rgb(247, 247, 247); - --ig-gray-100-contrast: hsla(from color(from var(--ig-gray-100) var(--y-contrast)) h 0 l/1); - --ig-gray-200: rgb(236, 236, 236); - --ig-gray-200-contrast: hsla(from color(from var(--ig-gray-200) var(--y-contrast)) h 0 l/1); - --ig-gray-300: rgb(217, 217, 217); - --ig-gray-300-contrast: hsla(from color(from var(--ig-gray-300) var(--y-contrast)) h 0 l/1); - --ig-gray-400: rgb(193, 193, 193); - --ig-gray-400-contrast: hsla(from color(from var(--ig-gray-400) var(--y-contrast)) h 0 l/1); - --ig-gray-500: rgb(164, 164, 164); - --ig-gray-500-contrast: hsla(from color(from var(--ig-gray-500) var(--y-contrast)) h 0 l/1); - --ig-gray-600: rgb(132, 132, 132); - --ig-gray-600-contrast: hsla(from color(from var(--ig-gray-600) var(--y-contrast)) h 0 l/1); - --ig-gray-700: rgb(99, 99, 99); - --ig-gray-700-contrast: hsla(from color(from var(--ig-gray-700) var(--y-contrast)) h 0 l/1); - --ig-gray-800: rgb(66, 66, 66); - --ig-gray-800-contrast: hsla(from color(from var(--ig-gray-800) var(--y-contrast)) h 0 l/1); - --ig-gray-900: rgb(33, 33, 33); - --ig-gray-900-contrast: hsla(from color(from var(--ig-gray-900) var(--y-contrast)) h 0 l/1); - --ig-gray-seed: #000; - --ig-gray-seed-contrast: hsla(from color(from var(--ig-gray-seed) var(--y-contrast)) h 0 l/1); - --ig-surface-50: rgb(253, 253, 253); - --ig-surface-50-contrast: hsla(from color(from var(--ig-surface-50) var(--y-contrast)) h 0 l/1); - --ig-surface-100: rgb(240, 240, 240); - --ig-surface-100-contrast: hsla(from color(from var(--ig-surface-100) var(--y-contrast)) h 0 l/1); - --ig-surface-200: rgb(228, 228, 228); - --ig-surface-200-contrast: hsla(from color(from var(--ig-surface-200) var(--y-contrast)) h 0 l/1); - --ig-surface-300: rgb(216, 216, 216); - --ig-surface-300-contrast: hsla(from color(from var(--ig-surface-300) var(--y-contrast)) h 0 l/1); - --ig-surface-400: rgb(204, 204, 204); - --ig-surface-400-contrast: hsla(from color(from var(--ig-surface-400) var(--y-contrast)) h 0 l/1); - --ig-surface-500: rgb(255, 255, 255); - --ig-surface-500-contrast: hsla(from color(from var(--ig-surface-500) var(--y-contrast)) h 0 l/1); - --ig-surface-600: rgb(194, 194, 194); - --ig-surface-600-contrast: hsla(from color(from var(--ig-surface-600) var(--y-contrast)) h 0 l/1); - --ig-surface-700: rgb(183, 183, 183); - --ig-surface-700-contrast: hsla(from color(from var(--ig-surface-700) var(--y-contrast)) h 0 l/1); - --ig-surface-800: rgb(174, 174, 174); - --ig-surface-800-contrast: hsla(from color(from var(--ig-surface-800) var(--y-contrast)) h 0 l/1); - --ig-surface-900: rgb(164, 164, 164); - --ig-surface-900-contrast: hsla(from color(from var(--ig-surface-900) var(--y-contrast)) h 0 l/1); - --ig-surface-seed: #fff; - --ig-surface-seed-contrast: hsla(from color(from var(--ig-surface-seed) var(--y-contrast)) h 0 l/1); - --ig-surface-A100: rgb(218, 218, 218); - --ig-surface-A100-contrast: hsla(from color(from var(--ig-surface-A100) var(--y-contrast)) h 0 l/1); - --ig-surface-A200: rgb(161, 161, 161); - --ig-surface-A200-contrast: hsla(from color(from var(--ig-surface-A200) var(--y-contrast)) h 0 l/1); - --ig-surface-A400: rgb(124, 124, 124); - --ig-surface-A400-contrast: hsla(from color(from var(--ig-surface-A400) var(--y-contrast)) h 0 l/1); - --ig-surface-A700: rgb(97, 97, 97); - --ig-surface-A700-contrast: hsla(from color(from var(--ig-surface-A700) var(--y-contrast)) h 0 l/1); - --ig-info-50: rgb(232, 235, 252); - --ig-info-50-contrast: hsla(from color(from var(--ig-info-50) var(--y-contrast)) h 0 l/1); - --ig-info-100: rgb(190, 203, 253); - --ig-info-100-contrast: hsla(from color(from var(--ig-info-100) var(--y-contrast)) h 0 l/1); - --ig-info-200: rgb(149, 173, 255); - --ig-info-200-contrast: hsla(from color(from var(--ig-info-200) var(--y-contrast)) h 0 l/1); - --ig-info-300: rgb(109, 145, 255); - --ig-info-300-contrast: hsla(from color(from var(--ig-info-300) var(--y-contrast)) h 0 l/1); - --ig-info-400: rgb(70, 117, 255); - --ig-info-400-contrast: hsla(from color(from var(--ig-info-400) var(--y-contrast)) h 0 l/1); - --ig-info-500: rgb(34, 91, 245); - --ig-info-500-contrast: hsla(from color(from var(--ig-info-500) var(--y-contrast)) h 0 l/1); - --ig-info-600: rgb(15, 67, 220); - --ig-info-600-contrast: hsla(from color(from var(--ig-info-600) var(--y-contrast)) h 0 l/1); - --ig-info-700: rgb(7, 50, 180); - --ig-info-700-contrast: hsla(from color(from var(--ig-info-700) var(--y-contrast)) h 0 l/1); - --ig-info-800: rgb(6, 36, 125); - --ig-info-800-contrast: hsla(from color(from var(--ig-info-800) var(--y-contrast)) h 0 l/1); - --ig-info-900: rgb(4, 18, 59); - --ig-info-900-contrast: hsla(from color(from var(--ig-info-900) var(--y-contrast)) h 0 l/1); - --ig-info-seed: blue; - --ig-info-seed-contrast: hsla(from color(from var(--ig-info-seed) var(--y-contrast)) h 0 l/1); - --ig-info-A100: rgb(207, 217, 255); - --ig-info-A100-contrast: hsla(from color(from var(--ig-info-A100) var(--y-contrast)) h 0 l/1); - --ig-info-A200: rgb(124, 156, 255); - --ig-info-A200-contrast: hsla(from color(from var(--ig-info-A200) var(--y-contrast)) h 0 l/1); - --ig-info-A400: rgb(63, 113, 255); - --ig-info-A400-contrast: hsla(from color(from var(--ig-info-A400) var(--y-contrast)) h 0 l/1); - --ig-info-A700: rgb(16, 75, 249); - --ig-info-A700-contrast: hsla(from color(from var(--ig-info-A700) var(--y-contrast)) h 0 l/1); - --ig-success-50: rgb(193, 251, 187); - --ig-success-50-contrast: hsla(from color(from var(--ig-success-50) var(--y-contrast)) h 0 l/1); - --ig-success-100: rgb(93, 231, 86); - --ig-success-100-contrast: hsla(from color(from var(--ig-success-100) var(--y-contrast)) h 0 l/1); - --ig-success-200: rgb(47, 203, 42); - --ig-success-200-contrast: hsla(from color(from var(--ig-success-200) var(--y-contrast)) h 0 l/1); - --ig-success-300: rgb(17, 175, 14); - --ig-success-300-contrast: hsla(from color(from var(--ig-success-300) var(--y-contrast)) h 0 l/1); - --ig-success-400: rgb(1, 148, 1); - --ig-success-400-contrast: hsla(from color(from var(--ig-success-400) var(--y-contrast)) h 0 l/1); - --ig-success-500: rgb(1, 124, 0); - --ig-success-500-contrast: hsla(from color(from var(--ig-success-500) var(--y-contrast)) h 0 l/1); - --ig-success-600: rgb(5, 101, 4); - --ig-success-600-contrast: hsla(from color(from var(--ig-success-600) var(--y-contrast)) h 0 l/1); - --ig-success-700: rgb(11, 78, 9); - --ig-success-700-contrast: hsla(from color(from var(--ig-success-700) var(--y-contrast)) h 0 l/1); - --ig-success-800: rgb(13, 55, 11); - --ig-success-800-contrast: hsla(from color(from var(--ig-success-800) var(--y-contrast)) h 0 l/1); - --ig-success-900: rgb(7, 25, 6); - --ig-success-900-contrast: hsla(from color(from var(--ig-success-900) var(--y-contrast)) h 0 l/1); - --ig-success-seed: green; - --ig-success-seed-contrast: hsla(from color(from var(--ig-success-seed) var(--y-contrast)) h 0 l/1); - --ig-success-A100: rgb(56, 251, 50); - --ig-success-A100-contrast: hsla(from color(from var(--ig-success-A100) var(--y-contrast)) h 0 l/1); - --ig-success-A200: rgb(0, 187, 0); - --ig-success-A200-contrast: hsla(from color(from var(--ig-success-A200) var(--y-contrast)) h 0 l/1); - --ig-success-A400: rgb(0, 144, 0); - --ig-success-A400-contrast: hsla(from color(from var(--ig-success-A400) var(--y-contrast)) h 0 l/1); - --ig-success-A700: rgb(0, 114, 0); - --ig-success-A700-contrast: hsla(from color(from var(--ig-success-A700) var(--y-contrast)) h 0 l/1); - --ig-warn-50: rgb(251, 233, 213); - --ig-warn-50-contrast: hsla(from color(from var(--ig-warn-50) var(--y-contrast)) h 0 l/1); - --ig-warn-100: rgb(247, 195, 133); - --ig-warn-100-contrast: hsla(from color(from var(--ig-warn-100) var(--y-contrast)) h 0 l/1); - --ig-warn-200: rgb(233, 161, 65); - --ig-warn-200-contrast: hsla(from color(from var(--ig-warn-200) var(--y-contrast)) h 0 l/1); - --ig-warn-300: rgb(207, 135, 24); - --ig-warn-300-contrast: hsla(from color(from var(--ig-warn-300) var(--y-contrast)) h 0 l/1); - --ig-warn-400: rgb(177, 114, 4); - --ig-warn-400-contrast: hsla(from color(from var(--ig-warn-400) var(--y-contrast)) h 0 l/1); - --ig-warn-500: rgb(149, 94, 1); - --ig-warn-500-contrast: hsla(from color(from var(--ig-warn-500) var(--y-contrast)) h 0 l/1); - --ig-warn-600: rgb(121, 77, 4); - --ig-warn-600-contrast: hsla(from color(from var(--ig-warn-600) var(--y-contrast)) h 0 l/1); - --ig-warn-700: rgb(94, 60, 9); - --ig-warn-700-contrast: hsla(from color(from var(--ig-warn-700) var(--y-contrast)) h 0 l/1); - --ig-warn-800: rgb(65, 42, 11); - --ig-warn-800-contrast: hsla(from color(from var(--ig-warn-800) var(--y-contrast)) h 0 l/1); - --ig-warn-900: rgb(30, 19, 6); - --ig-warn-900-contrast: hsla(from color(from var(--ig-warn-900) var(--y-contrast)) h 0 l/1); - --ig-warn-seed: orange; - --ig-warn-seed-contrast: hsla(from color(from var(--ig-warn-seed) var(--y-contrast)) h 0 l/1); - --ig-warn-A100: rgb(255, 211, 156); - --ig-warn-A100-contrast: hsla(from color(from var(--ig-warn-A100) var(--y-contrast)) h 0 l/1); - --ig-warn-A200: rgb(222, 143, 4); - --ig-warn-A200-contrast: hsla(from color(from var(--ig-warn-A200) var(--y-contrast)) h 0 l/1); - --ig-warn-A400: rgb(172, 110, 0); - --ig-warn-A400-contrast: hsla(from color(from var(--ig-warn-A400) var(--y-contrast)) h 0 l/1); - --ig-warn-A700: rgb(136, 86, 0); - --ig-warn-A700-contrast: hsla(from color(from var(--ig-warn-A700) var(--y-contrast)) h 0 l/1); - --ig-error-50: rgb(254, 231, 227); - --ig-error-50-contrast: hsla(from color(from var(--ig-error-50) var(--y-contrast)) h 0 l/1); - --ig-error-100: rgb(255, 188, 177); - --ig-error-100-contrast: hsla(from color(from var(--ig-error-100) var(--y-contrast)) h 0 l/1); - --ig-error-200: rgb(255, 146, 130); - --ig-error-200-contrast: hsla(from color(from var(--ig-error-200) var(--y-contrast)) h 0 l/1); - --ig-error-300: rgb(255, 99, 82); - --ig-error-300-contrast: hsla(from color(from var(--ig-error-300) var(--y-contrast)) h 0 l/1); - --ig-error-400: rgb(237, 58, 45); - --ig-error-400-contrast: hsla(from color(from var(--ig-error-400) var(--y-contrast)) h 0 l/1); - --ig-error-500: rgb(209, 28, 19); - --ig-error-500-contrast: hsla(from color(from var(--ig-error-500) var(--y-contrast)) h 0 l/1); - --ig-error-600: rgb(174, 16, 9); - --ig-error-600-contrast: hsla(from color(from var(--ig-error-600) var(--y-contrast)) h 0 l/1); - --ig-error-700: rgb(135, 17, 11); - --ig-error-700-contrast: hsla(from color(from var(--ig-error-700) var(--y-contrast)) h 0 l/1); - --ig-error-800: rgb(93, 18, 12); - --ig-error-800-contrast: hsla(from color(from var(--ig-error-800) var(--y-contrast)) h 0 l/1); - --ig-error-900: rgb(44, 9, 6); - --ig-error-900-contrast: hsla(from color(from var(--ig-error-900) var(--y-contrast)) h 0 l/1); - --ig-error-seed: red; - --ig-error-seed-contrast: hsla(from color(from var(--ig-error-seed) var(--y-contrast)) h 0 l/1); - --ig-error-A100: rgb(255, 207, 198); - --ig-error-A100-contrast: hsla(from color(from var(--ig-error-A100) var(--y-contrast)) h 0 l/1); - --ig-error-A200: rgb(255, 119, 101); - --ig-error-A200-contrast: hsla(from color(from var(--ig-error-A200) var(--y-contrast)) h 0 l/1); - --ig-error-A400: rgb(242, 34, 24); - --ig-error-A400-contrast: hsla(from color(from var(--ig-error-A400) var(--y-contrast)) h 0 l/1); - --ig-error-A700: rgb(197, 2, 1); - --ig-error-A700-contrast: hsla(from color(from var(--ig-error-A700) var(--y-contrast)) h 0 l/1); -} - -/* END_OUTPUT */ -/* CONTAINED */ -:root { - --ig-primary-50: rgb(226, 237, 251); - --ig-primary-100: rgb(172, 207, 251); - --ig-primary-200: rgb(117, 180, 250); - --ig-primary-300: rgb(67, 155, 239); - --ig-primary-400: rgb(27, 131, 214); - --ig-primary-500: rgb(9, 109, 183); - --ig-primary-600: rgb(6, 89, 150); - --ig-primary-700: rgb(11, 69, 116); - --ig-primary-800: rgb(12, 48, 80); - --ig-primary-900: rgb(6, 22, 37); - --ig-primary-seed: #09f; - --ig-primary-A100: rgb(191, 221, 255); - --ig-primary-A200: rgb(73, 164, 255); - --ig-primary-A400: rgb(4, 127, 213); - --ig-primary-A700: rgb(0, 100, 169); - --ig-secondary-50: rgb(240, 235, 245); - --ig-secondary-100: rgb(213, 198, 231); - --ig-secondary-200: rgb(190, 166, 221); - --ig-secondary-300: rgb(168, 136, 211); - --ig-secondary-400: rgb(146, 110, 198); - --ig-secondary-500: rgb(125, 87, 177); - --ig-secondary-600: rgb(103, 69, 150); - --ig-secondary-700: rgb(80, 53, 117); - --ig-secondary-800: rgb(56, 38, 81); - --ig-secondary-900: rgb(25, 17, 38); - --ig-secondary-seed: #97c; - --ig-secondary-A100: rgb(233, 209, 255); - --ig-secondary-A200: rgb(192, 134, 255); - --ig-secondary-A400: rgb(163, 75, 255); - --ig-secondary-A700: rgb(139, 23, 233); - --ig-gray-50: rgb(251, 251, 251); - --ig-gray-100: rgb(247, 247, 247); - --ig-gray-200: rgb(236, 236, 236); - --ig-gray-300: rgb(217, 217, 217); - --ig-gray-400: rgb(193, 193, 193); - --ig-gray-500: rgb(164, 164, 164); - --ig-gray-600: rgb(132, 132, 132); - --ig-gray-700: rgb(99, 99, 99); - --ig-gray-800: rgb(66, 66, 66); - --ig-gray-900: rgb(33, 33, 33); - --ig-gray-seed: #000; - --ig-surface-50: rgb(253, 253, 253); - --ig-surface-100: rgb(240, 240, 240); - --ig-surface-200: rgb(228, 228, 228); - --ig-surface-300: rgb(216, 216, 216); - --ig-surface-400: rgb(204, 204, 204); - --ig-surface-500: rgb(255, 255, 255); - --ig-surface-600: rgb(194, 194, 194); - --ig-surface-700: rgb(183, 183, 183); - --ig-surface-800: rgb(174, 174, 174); - --ig-surface-900: rgb(164, 164, 164); - --ig-surface-seed: #fff; - --ig-surface-A100: rgb(218, 218, 218); - --ig-surface-A200: rgb(161, 161, 161); - --ig-surface-A400: rgb(124, 124, 124); - --ig-surface-A700: rgb(97, 97, 97); - --ig-info-50: rgb(232, 235, 252); - --ig-info-100: rgb(190, 203, 253); - --ig-info-200: rgb(149, 173, 255); - --ig-info-300: rgb(109, 145, 255); - --ig-info-400: rgb(70, 117, 255); - --ig-info-500: rgb(34, 91, 245); - --ig-info-600: rgb(15, 67, 220); - --ig-info-700: rgb(7, 50, 180); - --ig-info-800: rgb(6, 36, 125); - --ig-info-900: rgb(4, 18, 59); - --ig-info-seed: blue; - --ig-info-A100: rgb(207, 217, 255); - --ig-info-A200: rgb(124, 156, 255); - --ig-info-A400: rgb(63, 113, 255); - --ig-info-A700: rgb(16, 75, 249); - --ig-success-50: rgb(193, 251, 187); - --ig-success-100: rgb(93, 231, 86); - --ig-success-200: rgb(47, 203, 42); - --ig-success-300: rgb(17, 175, 14); - --ig-success-400: rgb(1, 148, 1); - --ig-success-500: rgb(1, 124, 0); - --ig-success-600: rgb(5, 101, 4); - --ig-success-700: rgb(11, 78, 9); - --ig-success-800: rgb(13, 55, 11); - --ig-success-900: rgb(7, 25, 6); - --ig-success-seed: green; - --ig-success-A100: rgb(56, 251, 50); - --ig-success-A200: rgb(0, 187, 0); - --ig-success-A400: rgb(0, 144, 0); - --ig-success-A700: rgb(0, 114, 0); - --ig-warn-50: rgb(251, 233, 213); - --ig-warn-100: rgb(247, 195, 133); - --ig-warn-200: rgb(233, 161, 65); - --ig-warn-300: rgb(207, 135, 24); - --ig-warn-400: rgb(177, 114, 4); - --ig-warn-500: rgb(149, 94, 1); - --ig-warn-600: rgb(121, 77, 4); - --ig-warn-700: rgb(94, 60, 9); - --ig-warn-800: rgb(65, 42, 11); - --ig-warn-900: rgb(30, 19, 6); - --ig-warn-seed: orange; - --ig-warn-A100: rgb(255, 211, 156); - --ig-warn-A200: rgb(222, 143, 4); - --ig-warn-A400: rgb(172, 110, 0); - --ig-warn-A700: rgb(136, 86, 0); - --ig-error-50: rgb(254, 231, 227); - --ig-error-100: rgb(255, 188, 177); - --ig-error-200: rgb(255, 146, 130); - --ig-error-300: rgb(255, 99, 82); - --ig-error-400: rgb(237, 58, 45); - --ig-error-500: rgb(209, 28, 19); - --ig-error-600: rgb(174, 16, 9); - --ig-error-700: rgb(135, 17, 11); - --ig-error-800: rgb(93, 18, 12); - --ig-error-900: rgb(44, 9, 6); - --ig-error-seed: red; - --ig-error-A100: rgb(255, 207, 198); - --ig-error-A200: rgb(255, 119, 101); - --ig-error-A400: rgb(242, 34, 24); - --ig-error-A700: rgb(197, 2, 1); -} - -/* END_CONTAINED */ -/* END_ASSERT */ -/* */ -/* Test: verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] map */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] map */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] map */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] map */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] map */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] map */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] map */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] map */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] verify the integrity of sample handmade palette */ -/* ✔ [assert-true] list */ -/* */ -/* Test: should generate CSS variables for handmande palettes */ -/* ASSERT: */ -/* OUTPUT */ -:root { - --ig-wcag-a: 0.31; - --ig-wcag-aa: 0.185; - --ig-wcag-aaa: 0.178; - --ig-contrast-level: var(--ig-wcag-aa); - --y: clamp(0, (y / var(--ig-contrast-level) - 1) * -infinity, 1); - --y-contrast: xyz-d65 var(--y) var(--y) var(--y); -} - -:root { - --ig-primary-50: #e6eff8; - --ig-primary-50-contrast: black; - --ig-primary-100: #bfd7f2; - --ig-primary-100-contrast: black; - --ig-primary-200: #98bfec; - --ig-primary-200-contrast: black; - --ig-primary-300: #85b5e9; - --ig-primary-300-contrast: white; - --ig-primary-400: #73a6e4; - --ig-primary-400-contrast: white; - --ig-primary-500: #6797de; - --ig-primary-500-contrast: white; - --ig-primary-600: #3681dd; - --ig-primary-600-contrast: white; - --ig-primary-700: #357fda; - --ig-primary-700-contrast: white; - --ig-primary-800: #306dc8; - --ig-primary-800-contrast: white; - --ig-primary-900: #284ea8; - --ig-primary-900-contrast: white; - --ig-primary-A100: #98bfec; - --ig-primary-A100-contrast: white; - --ig-primary-A200: #73a6e4; - --ig-primary-A200-contrast: white; - --ig-primary-A400: #3681dd; - --ig-primary-A400-contrast: white; - --ig-primary-A700: #284ea8; - --ig-primary-A700-contrast: white; - --ig-primary-seed: #6797de; - --ig-primary-seed-contrast: white; - --ig-secondary-50: #fef7e2; - --ig-secondary-50-contrast: black; - --ig-secondary-100: #fdeab7; - --ig-secondary-100-contrast: black; - --ig-secondary-200: #fbdd89; - --ig-secondary-200-contrast: black; - --ig-secondary-300: #fad15c; - --ig-secondary-300-contrast: black; - --ig-secondary-400: #f9c63f; - --ig-secondary-400-contrast: black; - --ig-secondary-500: #f7bd32; - --ig-secondary-500-contrast: white; - --ig-secondary-600: #f6b02d; - --ig-secondary-600-contrast: white; - --ig-secondary-700: #f49e2a; - --ig-secondary-700-contrast: white; - --ig-secondary-800: #f38e28; - --ig-secondary-800-contrast: white; - --ig-secondary-900: #f38e28; - --ig-secondary-900-contrast: white; - --ig-secondary-A100: #fbdd89; - --ig-secondary-A100-contrast: black; - --ig-secondary-A200: #f9c63f; - --ig-secondary-A200-contrast: black; - --ig-secondary-A400: #f6b02d; - --ig-secondary-A400-contrast: white; - --ig-secondary-A700: #f38e28; - --ig-secondary-A700-contrast: white; - --ig-secondary-seed: #f7bd32; - --ig-secondary-seed-contrast: white; - --ig-tertiary-500: #f7bd32; - --ig-tertiary-500-contrast: white; - --ig-gray-50: #fff; - --ig-gray-50-contrast: black; - --ig-gray-100: #fafafa; - --ig-gray-100-contrast: black; - --ig-gray-200: #f5f5f5; - --ig-gray-200-contrast: black; - --ig-gray-300: #f0f0f0; - --ig-gray-300-contrast: black; - --ig-gray-400: #dedede; - --ig-gray-400-contrast: black; - --ig-gray-500: #b3b2b2; - --ig-gray-500-contrast: black; - --ig-gray-600: #979696; - --ig-gray-600-contrast: white; - --ig-gray-700: #7b7a7a; - --ig-gray-700-contrast: white; - --ig-gray-800: #404040; - --ig-gray-800-contrast: white; - --ig-gray-900: #1a1a1a; - --ig-gray-900-contrast: white; - --ig-gray-seed: #b3b2b2; - --ig-gray-seed-contrast: black; - --ig-info-50: #fef7e2; - --ig-info-50-contrast: black; - --ig-info-100: #fdeab7; - --ig-info-100-contrast: black; - --ig-info-200: #fbdd89; - --ig-info-200-contrast: black; - --ig-info-300: #fad15c; - --ig-info-300-contrast: black; - --ig-info-400: #f9c63f; - --ig-info-400-contrast: black; - --ig-info-500: #f7bd32; - --ig-info-500-contrast: white; - --ig-info-600: #f6b02d; - --ig-info-600-contrast: white; - --ig-info-700: #f49e2a; - --ig-info-700-contrast: white; - --ig-info-800: #f38e28; - --ig-info-800-contrast: white; - --ig-info-900: #f38e28; - --ig-info-900-contrast: white; - --ig-info-A100: #fbdd89; - --ig-info-A100-contrast: black; - --ig-info-A200: #f9c63f; - --ig-info-A200-contrast: black; - --ig-info-A400: #f6b02d; - --ig-info-A400-contrast: white; - --ig-info-A700: #f38e28; - --ig-info-A700-contrast: white; - --ig-info-seed: #f7bd32; - --ig-info-seed-contrast: white; - --ig-success-50: #fef7e2; - --ig-success-50-contrast: black; - --ig-success-100: #fdeab7; - --ig-success-100-contrast: black; - --ig-success-200: #fbdd89; - --ig-success-200-contrast: black; - --ig-success-300: #fad15c; - --ig-success-300-contrast: black; - --ig-success-400: #f9c63f; - --ig-success-400-contrast: black; - --ig-success-500: #f7bd32; - --ig-success-500-contrast: white; - --ig-success-600: #f6b02d; - --ig-success-600-contrast: white; - --ig-success-700: #f49e2a; - --ig-success-700-contrast: white; - --ig-success-800: #f38e28; - --ig-success-800-contrast: white; - --ig-success-900: #f38e28; - --ig-success-900-contrast: white; - --ig-success-A100: #fbdd89; - --ig-success-A100-contrast: black; - --ig-success-A200: #f9c63f; - --ig-success-A200-contrast: black; - --ig-success-A400: #f6b02d; - --ig-success-A400-contrast: white; - --ig-success-A700: #f38e28; - --ig-success-A700-contrast: white; - --ig-success-seed: #f7bd32; - --ig-success-seed-contrast: white; - --ig-warn-50: #fef7e2; - --ig-warn-50-contrast: black; - --ig-warn-100: #fdeab7; - --ig-warn-100-contrast: black; - --ig-warn-200: #fbdd89; - --ig-warn-200-contrast: black; - --ig-warn-300: #fad15c; - --ig-warn-300-contrast: black; - --ig-warn-400: #f9c63f; - --ig-warn-400-contrast: black; - --ig-warn-500: #f7bd32; - --ig-warn-500-contrast: white; - --ig-warn-600: #f6b02d; - --ig-warn-600-contrast: white; - --ig-warn-700: #f49e2a; - --ig-warn-700-contrast: white; - --ig-warn-800: #f38e28; - --ig-warn-800-contrast: white; - --ig-warn-900: #f38e28; - --ig-warn-900-contrast: white; - --ig-warn-A100: #fbdd89; - --ig-warn-A100-contrast: black; - --ig-warn-A200: #f9c63f; - --ig-warn-A200-contrast: black; - --ig-warn-A400: #f6b02d; - --ig-warn-A400-contrast: white; - --ig-warn-A700: #f38e28; - --ig-warn-A700-contrast: white; - --ig-warn-seed: #f7bd32; - --ig-warn-seed-contrast: white; - --ig-error-50: #fef7e2; - --ig-error-50-contrast: black; - --ig-error-100: #fdeab7; - --ig-error-100-contrast: black; - --ig-error-200: #fbdd89; - --ig-error-200-contrast: black; - --ig-error-300: #fad15c; - --ig-error-300-contrast: black; - --ig-error-400: #f9c63f; - --ig-error-400-contrast: black; - --ig-error-500: #f7bd32; - --ig-error-500-contrast: white; - --ig-error-600: #f6b02d; - --ig-error-600-contrast: white; - --ig-error-700: #f49e2a; - --ig-error-700-contrast: white; - --ig-error-800: #f38e28; - --ig-error-800-contrast: white; - --ig-error-900: #f38e28; - --ig-error-900-contrast: white; - --ig-error-A100: #fbdd89; - --ig-error-A100-contrast: black; - --ig-error-A200: #f9c63f; - --ig-error-A200-contrast: black; - --ig-error-A400: #f6b02d; - --ig-error-A400-contrast: white; - --ig-error-A700: #f38e28; - --ig-error-A700-contrast: white; - --ig-error-seed: #f7bd32; - --ig-error-seed-contrast: white; - --ig-surface-50: #fef7e2; - --ig-surface-50-contrast: black; - --ig-surface-100: #fdeab7; - --ig-surface-100-contrast: black; - --ig-surface-200: #fbdd89; - --ig-surface-200-contrast: black; - --ig-surface-300: #fad15c; - --ig-surface-300-contrast: black; - --ig-surface-400: #f9c63f; - --ig-surface-400-contrast: black; - --ig-surface-500: #f7bd32; - --ig-surface-500-contrast: white; - --ig-surface-600: #f6b02d; - --ig-surface-600-contrast: white; - --ig-surface-700: #f49e2a; - --ig-surface-700-contrast: white; - --ig-surface-800: #f38e28; - --ig-surface-800-contrast: white; - --ig-surface-900: #f38e28; - --ig-surface-900-contrast: white; - --ig-surface-A100: #fbdd89; - --ig-surface-A100-contrast: black; - --ig-surface-A200: #f9c63f; - --ig-surface-A200-contrast: black; - --ig-surface-A400: #f6b02d; - --ig-surface-A400-contrast: white; - --ig-surface-A700: #f38e28; - --ig-surface-A700-contrast: white; - --ig-surface-seed: #f7bd32; - --ig-surface-seed-contrast: white; -} - -/* END_OUTPUT */ -/* CONTAINED */ -:root { - --ig-primary-50: #e6eff8; - --ig-primary-100: #bfd7f2; - --ig-primary-200: #98bfec; - --ig-primary-300: #85b5e9; - --ig-primary-400: #73a6e4; - --ig-primary-500: #6797de; - --ig-primary-600: #3681dd; - --ig-primary-700: #357fda; - --ig-primary-800: #306dc8; - --ig-primary-900: #284ea8; - --ig-primary-seed: #6797de; - --ig-primary-A100: #98bfec; - --ig-primary-A200: #73a6e4; - --ig-primary-A400: #3681dd; - --ig-primary-A700: #284ea8; - --ig-secondary-50: #fef7e2; - --ig-secondary-100: #fdeab7; - --ig-secondary-200: #fbdd89; - --ig-secondary-300: #fad15c; - --ig-secondary-400: #f9c63f; - --ig-secondary-500: #f7bd32; - --ig-secondary-600: #f6b02d; - --ig-secondary-700: #f49e2a; - --ig-secondary-800: #f38e28; - --ig-secondary-900: #f38e28; - --ig-secondary-seed: #f7bd32; - --ig-secondary-A100: #fbdd89; - --ig-secondary-A200: #f9c63f; - --ig-secondary-A400: #f6b02d; - --ig-secondary-A700: #f38e28; - --ig-gray-50: #fff; - --ig-gray-100: #fafafa; - --ig-gray-200: #f5f5f5; - --ig-gray-300: #f0f0f0; - --ig-gray-400: #dedede; - --ig-gray-500: #b3b2b2; - --ig-gray-600: #979696; - --ig-gray-700: #7b7a7a; - --ig-gray-800: #404040; - --ig-gray-900: #1a1a1a; - --ig-gray-seed: #b3b2b2; - --ig-surface-50: #fef7e2; - --ig-surface-100: #fdeab7; - --ig-surface-200: #fbdd89; - --ig-surface-300: #fad15c; - --ig-surface-400: #f9c63f; - --ig-surface-500: #f7bd32; - --ig-surface-600: #f6b02d; - --ig-surface-700: #f49e2a; - --ig-surface-800: #f38e28; - --ig-surface-900: #f38e28; - --ig-surface-seed: #f7bd32; - --ig-surface-A100: #fbdd89; - --ig-surface-A200: #f9c63f; - --ig-surface-A400: #f6b02d; - --ig-surface-A700: #f38e28; - --ig-info-50: #fef7e2; - --ig-info-100: #fdeab7; - --ig-info-200: #fbdd89; - --ig-info-300: #fad15c; - --ig-info-400: #f9c63f; - --ig-info-500: #f7bd32; - --ig-info-600: #f6b02d; - --ig-info-700: #f49e2a; - --ig-info-800: #f38e28; - --ig-info-900: #f38e28; - --ig-info-seed: #f7bd32; - --ig-info-A100: #fbdd89; - --ig-info-A200: #f9c63f; - --ig-info-A400: #f6b02d; - --ig-info-A700: #f38e28; - --ig-success-50: #fef7e2; - --ig-success-100: #fdeab7; - --ig-success-200: #fbdd89; - --ig-success-300: #fad15c; - --ig-success-400: #f9c63f; - --ig-success-500: #f7bd32; - --ig-success-600: #f6b02d; - --ig-success-700: #f49e2a; - --ig-success-800: #f38e28; - --ig-success-900: #f38e28; - --ig-success-seed: #f7bd32; - --ig-success-A100: #fbdd89; - --ig-success-A200: #f9c63f; - --ig-success-A400: #f6b02d; - --ig-success-A700: #f38e28; - --ig-warn-50: #fef7e2; - --ig-warn-100: #fdeab7; - --ig-warn-200: #fbdd89; - --ig-warn-300: #fad15c; - --ig-warn-400: #f9c63f; - --ig-warn-500: #f7bd32; - --ig-warn-600: #f6b02d; - --ig-warn-700: #f49e2a; - --ig-warn-800: #f38e28; - --ig-warn-900: #f38e28; - --ig-warn-seed: #f7bd32; - --ig-warn-A100: #fbdd89; - --ig-warn-A200: #f9c63f; - --ig-warn-A400: #f6b02d; - --ig-warn-A700: #f38e28; - --ig-error-50: #fef7e2; - --ig-error-100: #fdeab7; - --ig-error-200: #fbdd89; - --ig-error-300: #fad15c; - --ig-error-400: #f9c63f; - --ig-error-500: #f7bd32; - --ig-error-600: #f6b02d; - --ig-error-700: #f49e2a; - --ig-error-800: #f38e28; - --ig-error-900: #f38e28; - --ig-error-seed: #f7bd32; - --ig-error-A100: #fbdd89; - --ig-error-A200: #f9c63f; - --ig-error-A400: #f6b02d; - --ig-error-A700: #f38e28; -} - -/* END_CONTAINED */ -/* END_ASSERT */ -/* */ -/* Test: should properly get the value from handmade palettes */ -/* ✔ [assert-equal] should properly get the value from handmade palettes */ -/* ASSERT: */ -/* OUTPUT */ -.test-output { - color: rgb(250, 250, 250); -} - -/* END_OUTPUT */ -/* CONTAINED */ -.test-output { - color: rgb(250, 250, 250); -} - -/* END_CONTAINED */ -/* END_ASSERT */ -/* */ -/* # Module: Color :: palette :: gamut-relative generator */ -/* ------------------------------------------------------ */ -/* Test: keeps any two shades 500 apart at WCAG AA or better */ -/* ✔ [assert-true] keeps any two shades 500 apart at WCAG AA or better */ -/* ✔ [assert-true] keeps any two shades 500 apart at WCAG AA or better */ -/* ✔ [assert-true] keeps any two shades 500 apart at WCAG AA or better */ -/* ✔ [assert-true] keeps any two shades 500 apart at WCAG AA or better */ -/* ✔ [assert-true] keeps any two shades 500 apart at WCAG AA or better */ -/* ✔ [assert-true] keeps any two shades 500 apart at WCAG AA or better */ -/* ✔ [assert-true] keeps any two shades 500 apart at WCAG AA or better */ -/* ✔ [assert-true] keeps any two shades 500 apart at WCAG AA or better */ -/* ✔ [assert-true] keeps any two shades 500 apart at WCAG AA or better */ -/* ✔ [assert-true] keeps any two shades 500 apart at WCAG AA or better */ -/* ✔ [assert-true] keeps any two shades 500 apart at WCAG AA or better */ -/* ✔ [assert-true] keeps any two shades 500 apart at WCAG AA or better */ -/* ✔ [assert-true] keeps any two shades 500 apart at WCAG AA or better */ -/* ✔ [assert-true] keeps any two shades 500 apart at WCAG AA or better */ -/* ✔ [assert-true] keeps any two shades 500 apart at WCAG AA or better */ -/* ✔ [assert-true] keeps any two shades 500 apart at WCAG AA or better */ -/* ✔ [assert-true] keeps any two shades 500 apart at WCAG AA or better */ -/* ✔ [assert-true] keeps any two shades 500 apart at WCAG AA or better */ -/* ✔ [assert-true] keeps any two shades 500 apart at WCAG AA or better */ -/* ✔ [assert-true] keeps any two shades 500 apart at WCAG AA or better */ -/* ✔ [assert-true] keeps any two shades 500 apart at WCAG AA or better */ -/* ✔ [assert-true] keeps any two shades 500 apart at WCAG AA or better */ -/* ✔ [assert-true] keeps any two shades 500 apart at WCAG AA or better */ -/* ✔ [assert-true] keeps any two shades 500 apart at WCAG AA or better */ -/* ✔ [assert-true] keeps any two shades 500 apart at WCAG AA or better */ -/* ✔ [assert-true] keeps any two shades 500 apart at WCAG AA or better */ -/* ✔ [assert-true] keeps any two shades 500 apart at WCAG AA or better */ -/* ✔ [assert-true] keeps any two shades 500 apart at WCAG AA or better */ -/* ✔ [assert-true] keeps any two shades 500 apart at WCAG AA or better */ -/* ✔ [assert-true] keeps any two shades 500 apart at WCAG AA or better */ -/* ✔ [assert-true] keeps any two shades 500 apart at WCAG AA or better */ -/* ✔ [assert-true] keeps any two shades 500 apart at WCAG AA or better */ -/* ✔ [assert-true] keeps any two shades 500 apart at WCAG AA or better */ -/* ✔ [assert-true] keeps any two shades 500 apart at WCAG AA or better */ -/* ✔ [assert-true] keeps any two shades 500 apart at WCAG AA or better */ -/* ✔ [assert-true] keeps any two shades 500 apart at WCAG AA or better */ -/* ✔ [assert-true] keeps any two shades 500 apart at WCAG AA or better */ -/* ✔ [assert-true] keeps any two shades 500 apart at WCAG AA or better */ -/* ✔ [assert-true] keeps any two shades 500 apart at WCAG AA or better */ -/* ✔ [assert-true] keeps any two shades 500 apart at WCAG AA or better */ -/* */ -/* Test: keeps every shade visibly distinct, whatever the seed */ -/* ✔ [assert-true] keeps every shade visibly distinct, whatever the seed */ -/* ✔ [assert-true] keeps every shade visibly distinct, whatever the seed */ -/* ✔ [assert-true] keeps every shade visibly distinct, whatever the seed */ -/* ✔ [assert-true] keeps every shade visibly distinct, whatever the seed */ -/* ✔ [assert-true] keeps every shade visibly distinct, whatever the seed */ -/* ✔ [assert-true] keeps every shade visibly distinct, whatever the seed */ -/* ✔ [assert-true] keeps every shade visibly distinct, whatever the seed */ -/* ✔ [assert-true] keeps every shade visibly distinct, whatever the seed */ -/* ✔ [assert-true] keeps every shade visibly distinct, whatever the seed */ -/* ✔ [assert-true] keeps every shade visibly distinct, whatever the seed */ -/* ✔ [assert-true] keeps every shade visibly distinct, whatever the seed */ -/* ✔ [assert-true] keeps every shade visibly distinct, whatever the seed */ -/* ✔ [assert-true] keeps every shade visibly distinct, whatever the seed */ -/* ✔ [assert-true] keeps every shade visibly distinct, whatever the seed */ -/* ✔ [assert-true] keeps every shade visibly distinct, whatever the seed */ -/* ✔ [assert-true] keeps every shade visibly distinct, whatever the seed */ -/* ✔ [assert-true] keeps every shade visibly distinct, whatever the seed */ -/* ✔ [assert-true] keeps every shade visibly distinct, whatever the seed */ -/* ✔ [assert-true] keeps every shade visibly distinct, whatever the seed */ -/* ✔ [assert-true] keeps every shade visibly distinct, whatever the seed */ -/* ✔ [assert-true] keeps every shade visibly distinct, whatever the seed */ -/* ✔ [assert-true] keeps every shade visibly distinct, whatever the seed */ -/* ✔ [assert-true] keeps every shade visibly distinct, whatever the seed */ -/* ✔ [assert-true] keeps every shade visibly distinct, whatever the seed */ -/* ✔ [assert-true] keeps every shade visibly distinct, whatever the seed */ -/* ✔ [assert-true] keeps every shade visibly distinct, whatever the seed */ -/* ✔ [assert-true] keeps every shade visibly distinct, whatever the seed */ -/* ✔ [assert-true] keeps every shade visibly distinct, whatever the seed */ -/* ✔ [assert-true] keeps every shade visibly distinct, whatever the seed */ -/* ✔ [assert-true] keeps every shade visibly distinct, whatever the seed */ -/* ✔ [assert-true] keeps every shade visibly distinct, whatever the seed */ -/* ✔ [assert-true] keeps every shade visibly distinct, whatever the seed */ -/* ✔ [assert-true] keeps every shade visibly distinct, whatever the seed */ -/* ✔ [assert-true] keeps every shade visibly distinct, whatever the seed */ -/* ✔ [assert-true] keeps every shade visibly distinct, whatever the seed */ -/* ✔ [assert-true] keeps every shade visibly distinct, whatever the seed */ -/* ✔ [assert-true] keeps every shade visibly distinct, whatever the seed */ -/* ✔ [assert-true] keeps every shade visibly distinct, whatever the seed */ -/* ✔ [assert-true] keeps every shade visibly distinct, whatever the seed */ -/* ✔ [assert-true] keeps every shade visibly distinct, whatever the seed */ -/* ✔ [assert-true] keeps every shade visibly distinct, whatever the seed */ -/* ✔ [assert-true] keeps every shade visibly distinct, whatever the seed */ -/* ✔ [assert-true] keeps every shade visibly distinct, whatever the seed */ -/* ✔ [assert-true] keeps every shade visibly distinct, whatever the seed */ -/* ✔ [assert-true] keeps every shade visibly distinct, whatever the seed */ -/* ✔ [assert-true] keeps every shade visibly distinct, whatever the seed */ -/* ✔ [assert-true] keeps every shade visibly distinct, whatever the seed */ -/* ✔ [assert-true] keeps every shade visibly distinct, whatever the seed */ -/* ✔ [assert-true] keeps every shade visibly distinct, whatever the seed */ -/* ✔ [assert-true] keeps every shade visibly distinct, whatever the seed */ -/* */ -/* Test: generates a neutral ramp for a seed with no usable hue */ -/* ✔ [assert-equal] generates a neutral ramp for a seed with no usable hue */ -/* ✔ [assert-equal] generates a neutral ramp for a seed with no usable hue */ -/* ✔ [assert-equal] generates a neutral ramp for a seed with no usable hue */ -/* ✔ [assert-equal] generates a neutral ramp for a seed with no usable hue */ -/* ✔ [assert-equal] generates a neutral ramp for a seed with no usable hue */ -/* ✔ [assert-equal] generates a neutral ramp for a seed with no usable hue */ -/* ✔ [assert-equal] generates a neutral ramp for a seed with no usable hue */ -/* ✔ [assert-equal] generates a neutral ramp for a seed with no usable hue */ -/* ✔ [assert-equal] generates a neutral ramp for a seed with no usable hue */ -/* ✔ [assert-equal] generates a neutral ramp for a seed with no usable hue */ -/* */ -/* Test: leaves the surface family anchored on its seed */ -/* ✔ [assert-equal] leaves the surface family anchored on its seed */ -/* */ -/* Test: emits concrete colors, not runtime expressions */ -/* ✔ [assert-equal] emits concrete colors, not runtime expressions */ -/* ✔ [assert-equal] emits concrete colors, not runtime expressions */ -/* ✔ [assert-equal] emits concrete colors, not runtime expressions */ -/* ✔ [assert-equal] emits concrete colors, not runtime expressions */ -/* ✔ [assert-equal] emits concrete colors, not runtime expressions */ -/* ✔ [assert-equal] emits concrete colors, not runtime expressions */ -/* ✔ [assert-equal] emits concrete colors, not runtime expressions */ -/* ✔ [assert-equal] emits concrete colors, not runtime expressions */ -/* ✔ [assert-equal] emits concrete colors, not runtime expressions */ -/* ✔ [assert-equal] emits concrete colors, not runtime expressions */ -/* */ -/* Test: keeps the surface seed exactly on shade 500 */ -/* ✔ [assert-equal] keeps the surface seed exactly on shade 500 */ -/* ✔ [assert-equal] keeps the surface seed exactly on shade 500 */ -/* ✔ [assert-equal] keeps the surface seed exactly on shade 500 */ -/* ✔ [assert-equal] keeps the surface seed exactly on shade 500 */ -/* */ -/* Test: gives every surface a full set of distinct layers */ -/* ✔ [assert-true] gives every surface a full set of distinct layers */ -/* ✔ [assert-true] gives every surface a full set of distinct layers */ -/* ✔ [assert-true] gives every surface a full set of distinct layers */ -/* ✔ [assert-true] gives every surface a full set of distinct layers */ -/* ✔ [assert-true] gives every surface a full set of distinct layers */ -/* ✔ [assert-true] gives every surface a full set of distinct layers */ -/* ✔ [assert-true] gives every surface a full set of distinct layers */ -/* ✔ [assert-true] gives every surface a full set of distinct layers */ -/* ✔ [assert-true] gives every surface a full set of distinct layers */ -/* ✔ [assert-true] gives every surface a full set of distinct layers */ -/* ✔ [assert-true] gives every surface a full set of distinct layers */ -/* ✔ [assert-true] gives every surface a full set of distinct layers */ -/* ✔ [assert-true] gives every surface a full set of distinct layers */ -/* ✔ [assert-true] gives every surface a full set of distinct layers */ -/* ✔ [assert-true] gives every surface a full set of distinct layers */ -/* ✔ [assert-true] gives every surface a full set of distinct layers */ -/* ✔ [assert-true] gives every surface a full set of distinct layers */ -/* ✔ [assert-true] gives every surface a full set of distinct layers */ -/* ✔ [assert-true] gives every surface a full set of distinct layers */ -/* ✔ [assert-true] gives every surface a full set of distinct layers */ -/* ✔ [assert-true] gives every surface a full set of distinct layers */ -/* ✔ [assert-true] gives every surface a full set of distinct layers */ -/* ✔ [assert-true] gives every surface a full set of distinct layers */ -/* ✔ [assert-true] gives every surface a full set of distinct layers */ -/* ✔ [assert-true] gives every surface a full set of distinct layers */ -/* ✔ [assert-true] gives every surface a full set of distinct layers */ -/* ✔ [assert-true] gives every surface a full set of distinct layers */ -/* ✔ [assert-true] gives every surface a full set of distinct layers */ -/* ✔ [assert-true] gives every surface a full set of distinct layers */ -/* ✔ [assert-true] gives every surface a full set of distinct layers */ -/* ✔ [assert-true] gives every surface a full set of distinct layers */ -/* ✔ [assert-true] gives every surface a full set of distinct layers */ -/* ✔ [assert-true] gives every surface a full set of distinct layers */ -/* ✔ [assert-true] gives every surface a full set of distinct layers */ -/* ✔ [assert-true] gives every surface a full set of distinct layers */ -/* ✔ [assert-true] gives every surface a full set of distinct layers */ -/* ✔ [assert-true] gives every surface a full set of distinct layers */ -/* ✔ [assert-true] gives every surface a full set of distinct layers */ -/* ✔ [assert-true] gives every surface a full set of distinct layers */ -/* ✔ [assert-true] gives every surface a full set of distinct layers */ -/* ✔ [assert-true] gives every surface a full set of distinct layers */ -/* ✔ [assert-true] gives every surface a full set of distinct layers */ -/* ✔ [assert-true] gives every surface a full set of distinct layers */ -/* ✔ [assert-true] gives every surface a full set of distinct layers */ -/* ✔ [assert-true] gives every surface a full set of distinct layers */ -/* ✔ [assert-true] gives every surface a full set of distinct layers */ -/* ✔ [assert-true] gives every surface a full set of distinct layers */ -/* ✔ [assert-true] gives every surface a full set of distinct layers */ -/* ✔ [assert-true] gives every surface a full set of distinct layers */ -/* ✔ [assert-true] gives every surface a full set of distinct layers */ -/* ✔ [assert-true] gives every surface a full set of distinct layers */ -/* ✔ [assert-true] gives every surface a full set of distinct layers */ -/* ✔ [assert-true] gives every surface a full set of distinct layers */ -/* ✔ [assert-true] gives every surface a full set of distinct layers */ -/* ✔ [assert-true] gives every surface a full set of distinct layers */ -/* ✔ [assert-true] gives every surface a full set of distinct layers */ -/* ✔ [assert-true] gives every surface a full set of distinct layers */ -/* ✔ [assert-true] gives every surface a full set of distinct layers */ -/* ✔ [assert-true] gives every surface a full set of distinct layers */ -/* ✔ [assert-true] gives every surface a full set of distinct layers */ -/* ✔ [assert-true] gives every surface a full set of distinct layers */ -/* ✔ [assert-true] gives every surface a full set of distinct layers */ -/* ✔ [assert-true] gives every surface a full set of distinct layers */ -/* ✔ [assert-true] gives every surface a full set of distinct layers */ -/* ✔ [assert-true] gives every surface a full set of distinct layers */ -/* ✔ [assert-true] gives every surface a full set of distinct layers */ -/* ✔ [assert-true] gives every surface a full set of distinct layers */ -/* ✔ [assert-true] gives every surface a full set of distinct layers */ -/* ✔ [assert-true] gives every surface a full set of distinct layers */ -/* ✔ [assert-true] gives every surface a full set of distinct layers */ -/* ✔ [assert-true] gives every surface a full set of distinct layers */ -/* ✔ [assert-true] gives every surface a full set of distinct layers */ -/* */ -/* Test: accepts a ladder as a preset name, a curve, or a full spec */ -/* ✔ [assert-true] accepts a ladder as a preset name, a curve, or a full spec */ -/* ✔ [assert-true] accepts a ladder as a preset name, a curve, or a full spec */ -/* ✔ [assert-unequal] accepts a ladder as a preset name, a curve, or a full spec */ -/* ✔ [assert-unequal] accepts a ladder as a preset name, a curve, or a full spec */ -/* ✔ [assert-unequal] accepts a ladder as a preset name, a curve, or a full spec */ -/* ✔ [assert-equal] accepts a ladder as a preset name, a curve, or a full spec */ -/* */ -/* Test: ships the documented ladder presets */ -/* ✔ [assert-true] ships the documented ladder presets */ -/* ✔ [assert-true] ships the documented ladder presets */ -/* ✔ [assert-true] ships the documented ladder presets */ -/* ✔ [assert-true] ships the documented ladder presets */ -/* ✔ [assert-true] ships the documented ladder presets */ -/* */ -/* Test: follows the grayscale rhythm the component schemas expect */ -/* ✔ [assert-true] follows the grayscale rhythm the component schemas expect */ -/* ✔ [assert-true] follows the grayscale rhythm the component schemas expect */ -/* ✔ [assert-true] follows the grayscale rhythm the component schemas expect */ -/* ✔ [assert-true] follows the grayscale rhythm the component schemas expect */ -/* */ -/* Test: flips the grayscale for a dark surface but not the color ramps */ -/* ✔ [assert-true] flips the grayscale for a dark surface but not the color ramps */ -/* ✔ [assert-true] flips the grayscale for a dark surface but not the color ramps */ -/* ✔ [assert-equal] flips the grayscale for a dark surface but not the color ramps */ -/* ✔ [assert-equal] flips the grayscale for a dark surface but not the color ramps */ -/* ✔ [assert-equal] flips the grayscale for a dark surface but not the color ramps */ -/* ✔ [assert-equal] flips the grayscale for a dark surface but not the color ramps */ -/* ✔ [assert-equal] flips the grayscale for a dark surface but not the color ramps */ -/* ✔ [assert-equal] flips the grayscale for a dark surface but not the color ramps */ -/* ✔ [assert-equal] flips the grayscale for a dark surface but not the color ramps */ -/* ✔ [assert-equal] flips the grayscale for a dark surface but not the color ramps */ -/* ✔ [assert-equal] flips the grayscale for a dark surface but not the color ramps */ -/* ✔ [assert-equal] flips the grayscale for a dark surface but not the color ramps */ -/* */ -/* Test: reports which shade the seed lands nearest */ -/* ✔ [assert-equal] reports which shade the seed lands nearest */ -/* ✔ [assert-equal] reports which shade the seed lands nearest */ -/* */ -/* Test: falls back to the original multipliers on request */ -/* ✔ [assert-equal] falls back to the original multipliers on request */ -/* ✔ [assert-equal] falls back to the original multipliers on request */ -/* */ -/* */ -/* Test: should convert a color to a list of HSL values */ -/* ✔ [assert-equal] should convert a color to a list of HSL values */ -/* */ -/* Test: should include all necessarry CSS custom properties for adaptive contrast to work */ -/* ASSERT: */ -/* OUTPUT */ -:root { - --ig-wcag-a: 0.31; - --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-d65 var(--y) var(--y) var(--y); -} - -/* END_OUTPUT */ -/* CONTAINED */ -:root { - --ig-wcag-a: 0.31; - --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-d65 var(--y) var(--y) var(--y); -} - -/* END_CONTAINED */ -/* END_ASSERT */ -/* */ -/* # Module: Color :: palette :: seed color variables */ -/* -------------------------------------------------- */ -/* Test: emits --ig-{name}-seed CSS variables; uses provided gray or derives from surface */ -/* ASSERT: */ -/* OUTPUT */ -:root { - --ig-wcag-a: 0.31; - --ig-wcag-aa: 0.185; - --ig-wcag-aaa: 0.178; - --ig-contrast-level: var(--ig-wcag-aa); - --y: clamp(0, (y / var(--ig-contrast-level) - 1) * -infinity, 1); - --y-contrast: xyz-d65 var(--y) var(--y) var(--y); -} - -:root { - --ig-primary-50: rgb(226, 237, 251); - --ig-primary-50-contrast: hsla(from color(from var(--ig-primary-50) var(--y-contrast)) h 0 l/1); - --ig-primary-100: rgb(172, 207, 251); - --ig-primary-100-contrast: hsla(from color(from var(--ig-primary-100) var(--y-contrast)) h 0 l/1); - --ig-primary-200: rgb(117, 180, 250); - --ig-primary-200-contrast: hsla(from color(from var(--ig-primary-200) var(--y-contrast)) h 0 l/1); - --ig-primary-300: rgb(67, 155, 239); - --ig-primary-300-contrast: hsla(from color(from var(--ig-primary-300) var(--y-contrast)) h 0 l/1); - --ig-primary-400: rgb(27, 131, 214); - --ig-primary-400-contrast: hsla(from color(from var(--ig-primary-400) var(--y-contrast)) h 0 l/1); - --ig-primary-500: rgb(9, 109, 183); - --ig-primary-500-contrast: hsla(from color(from var(--ig-primary-500) var(--y-contrast)) h 0 l/1); - --ig-primary-600: rgb(6, 89, 150); - --ig-primary-600-contrast: hsla(from color(from var(--ig-primary-600) var(--y-contrast)) h 0 l/1); - --ig-primary-700: rgb(11, 69, 116); - --ig-primary-700-contrast: hsla(from color(from var(--ig-primary-700) var(--y-contrast)) h 0 l/1); - --ig-primary-800: rgb(12, 48, 80); - --ig-primary-800-contrast: hsla(from color(from var(--ig-primary-800) var(--y-contrast)) h 0 l/1); - --ig-primary-900: rgb(6, 22, 37); - --ig-primary-900-contrast: hsla(from color(from var(--ig-primary-900) var(--y-contrast)) h 0 l/1); - --ig-primary-seed: #09f; - --ig-primary-seed-contrast: hsla(from color(from var(--ig-primary-seed) var(--y-contrast)) h 0 l/1); - --ig-primary-A100: rgb(191, 221, 255); - --ig-primary-A100-contrast: hsla(from color(from var(--ig-primary-A100) var(--y-contrast)) h 0 l/1); - --ig-primary-A200: rgb(73, 164, 255); - --ig-primary-A200-contrast: hsla(from color(from var(--ig-primary-A200) var(--y-contrast)) h 0 l/1); - --ig-primary-A400: rgb(4, 127, 213); - --ig-primary-A400-contrast: hsla(from color(from var(--ig-primary-A400) var(--y-contrast)) h 0 l/1); - --ig-primary-A700: rgb(0, 100, 169); - --ig-primary-A700-contrast: hsla(from color(from var(--ig-primary-A700) var(--y-contrast)) h 0 l/1); - --ig-secondary-50: rgb(240, 235, 245); - --ig-secondary-50-contrast: hsla(from color(from var(--ig-secondary-50) var(--y-contrast)) h 0 l/1); - --ig-secondary-100: rgb(213, 198, 231); - --ig-secondary-100-contrast: hsla(from color(from var(--ig-secondary-100) var(--y-contrast)) h 0 l/1); - --ig-secondary-200: rgb(190, 166, 221); - --ig-secondary-200-contrast: hsla(from color(from var(--ig-secondary-200) var(--y-contrast)) h 0 l/1); - --ig-secondary-300: rgb(168, 136, 211); - --ig-secondary-300-contrast: hsla(from color(from var(--ig-secondary-300) var(--y-contrast)) h 0 l/1); - --ig-secondary-400: rgb(146, 110, 198); - --ig-secondary-400-contrast: hsla(from color(from var(--ig-secondary-400) var(--y-contrast)) h 0 l/1); - --ig-secondary-500: rgb(125, 87, 177); - --ig-secondary-500-contrast: hsla(from color(from var(--ig-secondary-500) var(--y-contrast)) h 0 l/1); - --ig-secondary-600: rgb(103, 69, 150); - --ig-secondary-600-contrast: hsla(from color(from var(--ig-secondary-600) var(--y-contrast)) h 0 l/1); - --ig-secondary-700: rgb(80, 53, 117); - --ig-secondary-700-contrast: hsla(from color(from var(--ig-secondary-700) var(--y-contrast)) h 0 l/1); - --ig-secondary-800: rgb(56, 38, 81); - --ig-secondary-800-contrast: hsla(from color(from var(--ig-secondary-800) var(--y-contrast)) h 0 l/1); - --ig-secondary-900: rgb(25, 17, 38); - --ig-secondary-900-contrast: hsla(from color(from var(--ig-secondary-900) var(--y-contrast)) h 0 l/1); - --ig-secondary-seed: #97c; - --ig-secondary-seed-contrast: hsla(from color(from var(--ig-secondary-seed) var(--y-contrast)) h 0 l/1); - --ig-secondary-A100: rgb(233, 209, 255); - --ig-secondary-A100-contrast: hsla(from color(from var(--ig-secondary-A100) var(--y-contrast)) h 0 l/1); - --ig-secondary-A200: rgb(192, 134, 255); - --ig-secondary-A200-contrast: hsla(from color(from var(--ig-secondary-A200) var(--y-contrast)) h 0 l/1); - --ig-secondary-A400: rgb(163, 75, 255); - --ig-secondary-A400-contrast: hsla(from color(from var(--ig-secondary-A400) var(--y-contrast)) h 0 l/1); - --ig-secondary-A700: rgb(139, 23, 233); - --ig-secondary-A700-contrast: hsla(from color(from var(--ig-secondary-A700) var(--y-contrast)) h 0 l/1); - --ig-gray-50: rgb(251, 251, 251); - --ig-gray-50-contrast: hsla(from color(from var(--ig-gray-50) var(--y-contrast)) h 0 l/1); - --ig-gray-100: rgb(247, 247, 247); - --ig-gray-100-contrast: hsla(from color(from var(--ig-gray-100) var(--y-contrast)) h 0 l/1); - --ig-gray-200: rgb(236, 236, 236); - --ig-gray-200-contrast: hsla(from color(from var(--ig-gray-200) var(--y-contrast)) h 0 l/1); - --ig-gray-300: rgb(217, 217, 217); - --ig-gray-300-contrast: hsla(from color(from var(--ig-gray-300) var(--y-contrast)) h 0 l/1); - --ig-gray-400: rgb(193, 193, 193); - --ig-gray-400-contrast: hsla(from color(from var(--ig-gray-400) var(--y-contrast)) h 0 l/1); - --ig-gray-500: rgb(164, 164, 164); - --ig-gray-500-contrast: hsla(from color(from var(--ig-gray-500) var(--y-contrast)) h 0 l/1); - --ig-gray-600: rgb(132, 132, 132); - --ig-gray-600-contrast: hsla(from color(from var(--ig-gray-600) var(--y-contrast)) h 0 l/1); - --ig-gray-700: rgb(99, 99, 99); - --ig-gray-700-contrast: hsla(from color(from var(--ig-gray-700) var(--y-contrast)) h 0 l/1); - --ig-gray-800: rgb(66, 66, 66); - --ig-gray-800-contrast: hsla(from color(from var(--ig-gray-800) var(--y-contrast)) h 0 l/1); - --ig-gray-900: rgb(33, 33, 33); - --ig-gray-900-contrast: hsla(from color(from var(--ig-gray-900) var(--y-contrast)) h 0 l/1); - --ig-gray-seed: #333; - --ig-gray-seed-contrast: hsla(from color(from var(--ig-gray-seed) var(--y-contrast)) h 0 l/1); - --ig-surface-50: rgb(253, 253, 253); - --ig-surface-50-contrast: hsla(from color(from var(--ig-surface-50) var(--y-contrast)) h 0 l/1); - --ig-surface-100: rgb(240, 240, 240); - --ig-surface-100-contrast: hsla(from color(from var(--ig-surface-100) var(--y-contrast)) h 0 l/1); - --ig-surface-200: rgb(228, 228, 228); - --ig-surface-200-contrast: hsla(from color(from var(--ig-surface-200) var(--y-contrast)) h 0 l/1); - --ig-surface-300: rgb(216, 216, 216); - --ig-surface-300-contrast: hsla(from color(from var(--ig-surface-300) var(--y-contrast)) h 0 l/1); - --ig-surface-400: rgb(204, 204, 204); - --ig-surface-400-contrast: hsla(from color(from var(--ig-surface-400) var(--y-contrast)) h 0 l/1); - --ig-surface-500: rgb(255, 255, 255); - --ig-surface-500-contrast: hsla(from color(from var(--ig-surface-500) var(--y-contrast)) h 0 l/1); - --ig-surface-600: rgb(194, 194, 194); - --ig-surface-600-contrast: hsla(from color(from var(--ig-surface-600) var(--y-contrast)) h 0 l/1); - --ig-surface-700: rgb(183, 183, 183); - --ig-surface-700-contrast: hsla(from color(from var(--ig-surface-700) var(--y-contrast)) h 0 l/1); - --ig-surface-800: rgb(174, 174, 174); - --ig-surface-800-contrast: hsla(from color(from var(--ig-surface-800) var(--y-contrast)) h 0 l/1); - --ig-surface-900: rgb(164, 164, 164); - --ig-surface-900-contrast: hsla(from color(from var(--ig-surface-900) var(--y-contrast)) h 0 l/1); - --ig-surface-seed: #fff; - --ig-surface-seed-contrast: hsla(from color(from var(--ig-surface-seed) var(--y-contrast)) h 0 l/1); - --ig-surface-A100: rgb(218, 218, 218); - --ig-surface-A100-contrast: hsla(from color(from var(--ig-surface-A100) var(--y-contrast)) h 0 l/1); - --ig-surface-A200: rgb(161, 161, 161); - --ig-surface-A200-contrast: hsla(from color(from var(--ig-surface-A200) var(--y-contrast)) h 0 l/1); - --ig-surface-A400: rgb(124, 124, 124); - --ig-surface-A400-contrast: hsla(from color(from var(--ig-surface-A400) var(--y-contrast)) h 0 l/1); - --ig-surface-A700: rgb(97, 97, 97); - --ig-surface-A700-contrast: hsla(from color(from var(--ig-surface-A700) var(--y-contrast)) h 0 l/1); - --ig-info-50: rgb(232, 235, 252); - --ig-info-50-contrast: hsla(from color(from var(--ig-info-50) var(--y-contrast)) h 0 l/1); - --ig-info-100: rgb(190, 203, 253); - --ig-info-100-contrast: hsla(from color(from var(--ig-info-100) var(--y-contrast)) h 0 l/1); - --ig-info-200: rgb(149, 173, 255); - --ig-info-200-contrast: hsla(from color(from var(--ig-info-200) var(--y-contrast)) h 0 l/1); - --ig-info-300: rgb(109, 145, 255); - --ig-info-300-contrast: hsla(from color(from var(--ig-info-300) var(--y-contrast)) h 0 l/1); - --ig-info-400: rgb(70, 117, 255); - --ig-info-400-contrast: hsla(from color(from var(--ig-info-400) var(--y-contrast)) h 0 l/1); - --ig-info-500: rgb(34, 91, 245); - --ig-info-500-contrast: hsla(from color(from var(--ig-info-500) var(--y-contrast)) h 0 l/1); - --ig-info-600: rgb(15, 67, 220); - --ig-info-600-contrast: hsla(from color(from var(--ig-info-600) var(--y-contrast)) h 0 l/1); - --ig-info-700: rgb(7, 50, 180); - --ig-info-700-contrast: hsla(from color(from var(--ig-info-700) var(--y-contrast)) h 0 l/1); - --ig-info-800: rgb(6, 36, 125); - --ig-info-800-contrast: hsla(from color(from var(--ig-info-800) var(--y-contrast)) h 0 l/1); - --ig-info-900: rgb(4, 18, 59); - --ig-info-900-contrast: hsla(from color(from var(--ig-info-900) var(--y-contrast)) h 0 l/1); - --ig-info-seed: blue; - --ig-info-seed-contrast: hsla(from color(from var(--ig-info-seed) var(--y-contrast)) h 0 l/1); - --ig-info-A100: rgb(207, 217, 255); - --ig-info-A100-contrast: hsla(from color(from var(--ig-info-A100) var(--y-contrast)) h 0 l/1); - --ig-info-A200: rgb(124, 156, 255); - --ig-info-A200-contrast: hsla(from color(from var(--ig-info-A200) var(--y-contrast)) h 0 l/1); - --ig-info-A400: rgb(63, 113, 255); - --ig-info-A400-contrast: hsla(from color(from var(--ig-info-A400) var(--y-contrast)) h 0 l/1); - --ig-info-A700: rgb(16, 75, 249); - --ig-info-A700-contrast: hsla(from color(from var(--ig-info-A700) var(--y-contrast)) h 0 l/1); - --ig-success-50: rgb(193, 251, 187); - --ig-success-50-contrast: hsla(from color(from var(--ig-success-50) var(--y-contrast)) h 0 l/1); - --ig-success-100: rgb(93, 231, 86); - --ig-success-100-contrast: hsla(from color(from var(--ig-success-100) var(--y-contrast)) h 0 l/1); - --ig-success-200: rgb(47, 203, 42); - --ig-success-200-contrast: hsla(from color(from var(--ig-success-200) var(--y-contrast)) h 0 l/1); - --ig-success-300: rgb(17, 175, 14); - --ig-success-300-contrast: hsla(from color(from var(--ig-success-300) var(--y-contrast)) h 0 l/1); - --ig-success-400: rgb(1, 148, 1); - --ig-success-400-contrast: hsla(from color(from var(--ig-success-400) var(--y-contrast)) h 0 l/1); - --ig-success-500: rgb(1, 124, 0); - --ig-success-500-contrast: hsla(from color(from var(--ig-success-500) var(--y-contrast)) h 0 l/1); - --ig-success-600: rgb(5, 101, 4); - --ig-success-600-contrast: hsla(from color(from var(--ig-success-600) var(--y-contrast)) h 0 l/1); - --ig-success-700: rgb(11, 78, 9); - --ig-success-700-contrast: hsla(from color(from var(--ig-success-700) var(--y-contrast)) h 0 l/1); - --ig-success-800: rgb(13, 55, 11); - --ig-success-800-contrast: hsla(from color(from var(--ig-success-800) var(--y-contrast)) h 0 l/1); - --ig-success-900: rgb(7, 25, 6); - --ig-success-900-contrast: hsla(from color(from var(--ig-success-900) var(--y-contrast)) h 0 l/1); - --ig-success-seed: green; - --ig-success-seed-contrast: hsla(from color(from var(--ig-success-seed) var(--y-contrast)) h 0 l/1); - --ig-success-A100: rgb(56, 251, 50); - --ig-success-A100-contrast: hsla(from color(from var(--ig-success-A100) var(--y-contrast)) h 0 l/1); - --ig-success-A200: rgb(0, 187, 0); - --ig-success-A200-contrast: hsla(from color(from var(--ig-success-A200) var(--y-contrast)) h 0 l/1); - --ig-success-A400: rgb(0, 144, 0); - --ig-success-A400-contrast: hsla(from color(from var(--ig-success-A400) var(--y-contrast)) h 0 l/1); - --ig-success-A700: rgb(0, 114, 0); - --ig-success-A700-contrast: hsla(from color(from var(--ig-success-A700) var(--y-contrast)) h 0 l/1); - --ig-warn-50: rgb(251, 233, 213); - --ig-warn-50-contrast: hsla(from color(from var(--ig-warn-50) var(--y-contrast)) h 0 l/1); - --ig-warn-100: rgb(247, 195, 133); - --ig-warn-100-contrast: hsla(from color(from var(--ig-warn-100) var(--y-contrast)) h 0 l/1); - --ig-warn-200: rgb(233, 161, 65); - --ig-warn-200-contrast: hsla(from color(from var(--ig-warn-200) var(--y-contrast)) h 0 l/1); - --ig-warn-300: rgb(207, 135, 24); - --ig-warn-300-contrast: hsla(from color(from var(--ig-warn-300) var(--y-contrast)) h 0 l/1); - --ig-warn-400: rgb(177, 114, 4); - --ig-warn-400-contrast: hsla(from color(from var(--ig-warn-400) var(--y-contrast)) h 0 l/1); - --ig-warn-500: rgb(149, 94, 1); - --ig-warn-500-contrast: hsla(from color(from var(--ig-warn-500) var(--y-contrast)) h 0 l/1); - --ig-warn-600: rgb(121, 77, 4); - --ig-warn-600-contrast: hsla(from color(from var(--ig-warn-600) var(--y-contrast)) h 0 l/1); - --ig-warn-700: rgb(94, 60, 9); - --ig-warn-700-contrast: hsla(from color(from var(--ig-warn-700) var(--y-contrast)) h 0 l/1); - --ig-warn-800: rgb(65, 42, 11); - --ig-warn-800-contrast: hsla(from color(from var(--ig-warn-800) var(--y-contrast)) h 0 l/1); - --ig-warn-900: rgb(30, 19, 6); - --ig-warn-900-contrast: hsla(from color(from var(--ig-warn-900) var(--y-contrast)) h 0 l/1); - --ig-warn-seed: orange; - --ig-warn-seed-contrast: hsla(from color(from var(--ig-warn-seed) var(--y-contrast)) h 0 l/1); - --ig-warn-A100: rgb(255, 211, 156); - --ig-warn-A100-contrast: hsla(from color(from var(--ig-warn-A100) var(--y-contrast)) h 0 l/1); - --ig-warn-A200: rgb(222, 143, 4); - --ig-warn-A200-contrast: hsla(from color(from var(--ig-warn-A200) var(--y-contrast)) h 0 l/1); - --ig-warn-A400: rgb(172, 110, 0); - --ig-warn-A400-contrast: hsla(from color(from var(--ig-warn-A400) var(--y-contrast)) h 0 l/1); - --ig-warn-A700: rgb(136, 86, 0); - --ig-warn-A700-contrast: hsla(from color(from var(--ig-warn-A700) var(--y-contrast)) h 0 l/1); - --ig-error-50: rgb(254, 231, 227); - --ig-error-50-contrast: hsla(from color(from var(--ig-error-50) var(--y-contrast)) h 0 l/1); - --ig-error-100: rgb(255, 188, 177); - --ig-error-100-contrast: hsla(from color(from var(--ig-error-100) var(--y-contrast)) h 0 l/1); - --ig-error-200: rgb(255, 146, 130); - --ig-error-200-contrast: hsla(from color(from var(--ig-error-200) var(--y-contrast)) h 0 l/1); - --ig-error-300: rgb(255, 99, 82); - --ig-error-300-contrast: hsla(from color(from var(--ig-error-300) var(--y-contrast)) h 0 l/1); - --ig-error-400: rgb(237, 58, 45); - --ig-error-400-contrast: hsla(from color(from var(--ig-error-400) var(--y-contrast)) h 0 l/1); - --ig-error-500: rgb(209, 28, 19); - --ig-error-500-contrast: hsla(from color(from var(--ig-error-500) var(--y-contrast)) h 0 l/1); - --ig-error-600: rgb(174, 16, 9); - --ig-error-600-contrast: hsla(from color(from var(--ig-error-600) var(--y-contrast)) h 0 l/1); - --ig-error-700: rgb(135, 17, 11); - --ig-error-700-contrast: hsla(from color(from var(--ig-error-700) var(--y-contrast)) h 0 l/1); - --ig-error-800: rgb(93, 18, 12); - --ig-error-800-contrast: hsla(from color(from var(--ig-error-800) var(--y-contrast)) h 0 l/1); - --ig-error-900: rgb(44, 9, 6); - --ig-error-900-contrast: hsla(from color(from var(--ig-error-900) var(--y-contrast)) h 0 l/1); - --ig-error-seed: red; - --ig-error-seed-contrast: hsla(from color(from var(--ig-error-seed) var(--y-contrast)) h 0 l/1); - --ig-error-A100: rgb(255, 207, 198); - --ig-error-A100-contrast: hsla(from color(from var(--ig-error-A100) var(--y-contrast)) h 0 l/1); - --ig-error-A200: rgb(255, 119, 101); - --ig-error-A200-contrast: hsla(from color(from var(--ig-error-A200) var(--y-contrast)) h 0 l/1); - --ig-error-A400: rgb(242, 34, 24); - --ig-error-A400-contrast: hsla(from color(from var(--ig-error-A400) var(--y-contrast)) h 0 l/1); - --ig-error-A700: rgb(197, 2, 1); - --ig-error-A700-contrast: hsla(from color(from var(--ig-error-A700) var(--y-contrast)) h 0 l/1); -} - -/* END_OUTPUT */ -/* CONTAINED */ -:root { - --ig-primary-seed: #09f; - --ig-gray-seed: #333; -} - -/* END_CONTAINED */ -/* END_ASSERT */ -/* ASSERT: */ -/* OUTPUT */ -:root { - --ig-wcag-a: 0.31; - --ig-wcag-aa: 0.185; - --ig-wcag-aaa: 0.178; - --ig-contrast-level: var(--ig-wcag-aa); - --y: clamp(0, (y / var(--ig-contrast-level) - 1) * -infinity, 1); - --y-contrast: xyz-d65 var(--y) var(--y) var(--y); -} - -:root { - --ig-primary-50: rgb(226, 237, 251); - --ig-primary-50-contrast: hsla(from color(from var(--ig-primary-50) var(--y-contrast)) h 0 l/1); - --ig-primary-100: rgb(172, 207, 251); - --ig-primary-100-contrast: hsla(from color(from var(--ig-primary-100) var(--y-contrast)) h 0 l/1); - --ig-primary-200: rgb(117, 180, 250); - --ig-primary-200-contrast: hsla(from color(from var(--ig-primary-200) var(--y-contrast)) h 0 l/1); - --ig-primary-300: rgb(67, 155, 239); - --ig-primary-300-contrast: hsla(from color(from var(--ig-primary-300) var(--y-contrast)) h 0 l/1); - --ig-primary-400: rgb(27, 131, 214); - --ig-primary-400-contrast: hsla(from color(from var(--ig-primary-400) var(--y-contrast)) h 0 l/1); - --ig-primary-500: rgb(9, 109, 183); - --ig-primary-500-contrast: hsla(from color(from var(--ig-primary-500) var(--y-contrast)) h 0 l/1); - --ig-primary-600: rgb(6, 89, 150); - --ig-primary-600-contrast: hsla(from color(from var(--ig-primary-600) var(--y-contrast)) h 0 l/1); - --ig-primary-700: rgb(11, 69, 116); - --ig-primary-700-contrast: hsla(from color(from var(--ig-primary-700) var(--y-contrast)) h 0 l/1); - --ig-primary-800: rgb(12, 48, 80); - --ig-primary-800-contrast: hsla(from color(from var(--ig-primary-800) var(--y-contrast)) h 0 l/1); - --ig-primary-900: rgb(6, 22, 37); - --ig-primary-900-contrast: hsla(from color(from var(--ig-primary-900) var(--y-contrast)) h 0 l/1); - --ig-primary-seed: #09f; - --ig-primary-seed-contrast: hsla(from color(from var(--ig-primary-seed) var(--y-contrast)) h 0 l/1); - --ig-primary-A100: rgb(191, 221, 255); - --ig-primary-A100-contrast: hsla(from color(from var(--ig-primary-A100) var(--y-contrast)) h 0 l/1); - --ig-primary-A200: rgb(73, 164, 255); - --ig-primary-A200-contrast: hsla(from color(from var(--ig-primary-A200) var(--y-contrast)) h 0 l/1); - --ig-primary-A400: rgb(4, 127, 213); - --ig-primary-A400-contrast: hsla(from color(from var(--ig-primary-A400) var(--y-contrast)) h 0 l/1); - --ig-primary-A700: rgb(0, 100, 169); - --ig-primary-A700-contrast: hsla(from color(from var(--ig-primary-A700) var(--y-contrast)) h 0 l/1); - --ig-secondary-50: rgb(240, 235, 245); - --ig-secondary-50-contrast: hsla(from color(from var(--ig-secondary-50) var(--y-contrast)) h 0 l/1); - --ig-secondary-100: rgb(213, 198, 231); - --ig-secondary-100-contrast: hsla(from color(from var(--ig-secondary-100) var(--y-contrast)) h 0 l/1); - --ig-secondary-200: rgb(190, 166, 221); - --ig-secondary-200-contrast: hsla(from color(from var(--ig-secondary-200) var(--y-contrast)) h 0 l/1); - --ig-secondary-300: rgb(168, 136, 211); - --ig-secondary-300-contrast: hsla(from color(from var(--ig-secondary-300) var(--y-contrast)) h 0 l/1); - --ig-secondary-400: rgb(146, 110, 198); - --ig-secondary-400-contrast: hsla(from color(from var(--ig-secondary-400) var(--y-contrast)) h 0 l/1); - --ig-secondary-500: rgb(125, 87, 177); - --ig-secondary-500-contrast: hsla(from color(from var(--ig-secondary-500) var(--y-contrast)) h 0 l/1); - --ig-secondary-600: rgb(103, 69, 150); - --ig-secondary-600-contrast: hsla(from color(from var(--ig-secondary-600) var(--y-contrast)) h 0 l/1); - --ig-secondary-700: rgb(80, 53, 117); - --ig-secondary-700-contrast: hsla(from color(from var(--ig-secondary-700) var(--y-contrast)) h 0 l/1); - --ig-secondary-800: rgb(56, 38, 81); - --ig-secondary-800-contrast: hsla(from color(from var(--ig-secondary-800) var(--y-contrast)) h 0 l/1); - --ig-secondary-900: rgb(25, 17, 38); - --ig-secondary-900-contrast: hsla(from color(from var(--ig-secondary-900) var(--y-contrast)) h 0 l/1); - --ig-secondary-seed: #97c; - --ig-secondary-seed-contrast: hsla(from color(from var(--ig-secondary-seed) var(--y-contrast)) h 0 l/1); - --ig-secondary-A100: rgb(233, 209, 255); - --ig-secondary-A100-contrast: hsla(from color(from var(--ig-secondary-A100) var(--y-contrast)) h 0 l/1); - --ig-secondary-A200: rgb(192, 134, 255); - --ig-secondary-A200-contrast: hsla(from color(from var(--ig-secondary-A200) var(--y-contrast)) h 0 l/1); - --ig-secondary-A400: rgb(163, 75, 255); - --ig-secondary-A400-contrast: hsla(from color(from var(--ig-secondary-A400) var(--y-contrast)) h 0 l/1); - --ig-secondary-A700: rgb(139, 23, 233); - --ig-secondary-A700-contrast: hsla(from color(from var(--ig-secondary-A700) var(--y-contrast)) h 0 l/1); - --ig-gray-50: rgb(251, 251, 251); - --ig-gray-50-contrast: hsla(from color(from var(--ig-gray-50) var(--y-contrast)) h 0 l/1); - --ig-gray-100: rgb(247, 247, 247); - --ig-gray-100-contrast: hsla(from color(from var(--ig-gray-100) var(--y-contrast)) h 0 l/1); - --ig-gray-200: rgb(236, 236, 236); - --ig-gray-200-contrast: hsla(from color(from var(--ig-gray-200) var(--y-contrast)) h 0 l/1); - --ig-gray-300: rgb(217, 217, 217); - --ig-gray-300-contrast: hsla(from color(from var(--ig-gray-300) var(--y-contrast)) h 0 l/1); - --ig-gray-400: rgb(193, 193, 193); - --ig-gray-400-contrast: hsla(from color(from var(--ig-gray-400) var(--y-contrast)) h 0 l/1); - --ig-gray-500: rgb(164, 164, 164); - --ig-gray-500-contrast: hsla(from color(from var(--ig-gray-500) var(--y-contrast)) h 0 l/1); - --ig-gray-600: rgb(132, 132, 132); - --ig-gray-600-contrast: hsla(from color(from var(--ig-gray-600) var(--y-contrast)) h 0 l/1); - --ig-gray-700: rgb(99, 99, 99); - --ig-gray-700-contrast: hsla(from color(from var(--ig-gray-700) var(--y-contrast)) h 0 l/1); - --ig-gray-800: rgb(66, 66, 66); - --ig-gray-800-contrast: hsla(from color(from var(--ig-gray-800) var(--y-contrast)) h 0 l/1); - --ig-gray-900: rgb(33, 33, 33); - --ig-gray-900-contrast: hsla(from color(from var(--ig-gray-900) var(--y-contrast)) h 0 l/1); - --ig-gray-seed: #000; - --ig-gray-seed-contrast: hsla(from color(from var(--ig-gray-seed) var(--y-contrast)) h 0 l/1); - --ig-surface-50: rgb(253, 253, 253); - --ig-surface-50-contrast: hsla(from color(from var(--ig-surface-50) var(--y-contrast)) h 0 l/1); - --ig-surface-100: rgb(240, 240, 240); - --ig-surface-100-contrast: hsla(from color(from var(--ig-surface-100) var(--y-contrast)) h 0 l/1); - --ig-surface-200: rgb(228, 228, 228); - --ig-surface-200-contrast: hsla(from color(from var(--ig-surface-200) var(--y-contrast)) h 0 l/1); - --ig-surface-300: rgb(216, 216, 216); - --ig-surface-300-contrast: hsla(from color(from var(--ig-surface-300) var(--y-contrast)) h 0 l/1); - --ig-surface-400: rgb(204, 204, 204); - --ig-surface-400-contrast: hsla(from color(from var(--ig-surface-400) var(--y-contrast)) h 0 l/1); - --ig-surface-500: rgb(255, 255, 255); - --ig-surface-500-contrast: hsla(from color(from var(--ig-surface-500) var(--y-contrast)) h 0 l/1); - --ig-surface-600: rgb(194, 194, 194); - --ig-surface-600-contrast: hsla(from color(from var(--ig-surface-600) var(--y-contrast)) h 0 l/1); - --ig-surface-700: rgb(183, 183, 183); - --ig-surface-700-contrast: hsla(from color(from var(--ig-surface-700) var(--y-contrast)) h 0 l/1); - --ig-surface-800: rgb(174, 174, 174); - --ig-surface-800-contrast: hsla(from color(from var(--ig-surface-800) var(--y-contrast)) h 0 l/1); - --ig-surface-900: rgb(164, 164, 164); - --ig-surface-900-contrast: hsla(from color(from var(--ig-surface-900) var(--y-contrast)) h 0 l/1); - --ig-surface-seed: #fff; - --ig-surface-seed-contrast: hsla(from color(from var(--ig-surface-seed) var(--y-contrast)) h 0 l/1); - --ig-surface-A100: rgb(218, 218, 218); - --ig-surface-A100-contrast: hsla(from color(from var(--ig-surface-A100) var(--y-contrast)) h 0 l/1); - --ig-surface-A200: rgb(161, 161, 161); - --ig-surface-A200-contrast: hsla(from color(from var(--ig-surface-A200) var(--y-contrast)) h 0 l/1); - --ig-surface-A400: rgb(124, 124, 124); - --ig-surface-A400-contrast: hsla(from color(from var(--ig-surface-A400) var(--y-contrast)) h 0 l/1); - --ig-surface-A700: rgb(97, 97, 97); - --ig-surface-A700-contrast: hsla(from color(from var(--ig-surface-A700) var(--y-contrast)) h 0 l/1); - --ig-info-50: rgb(232, 235, 252); - --ig-info-50-contrast: hsla(from color(from var(--ig-info-50) var(--y-contrast)) h 0 l/1); - --ig-info-100: rgb(190, 203, 253); - --ig-info-100-contrast: hsla(from color(from var(--ig-info-100) var(--y-contrast)) h 0 l/1); - --ig-info-200: rgb(149, 173, 255); - --ig-info-200-contrast: hsla(from color(from var(--ig-info-200) var(--y-contrast)) h 0 l/1); - --ig-info-300: rgb(109, 145, 255); - --ig-info-300-contrast: hsla(from color(from var(--ig-info-300) var(--y-contrast)) h 0 l/1); - --ig-info-400: rgb(70, 117, 255); - --ig-info-400-contrast: hsla(from color(from var(--ig-info-400) var(--y-contrast)) h 0 l/1); - --ig-info-500: rgb(34, 91, 245); - --ig-info-500-contrast: hsla(from color(from var(--ig-info-500) var(--y-contrast)) h 0 l/1); - --ig-info-600: rgb(15, 67, 220); - --ig-info-600-contrast: hsla(from color(from var(--ig-info-600) var(--y-contrast)) h 0 l/1); - --ig-info-700: rgb(7, 50, 180); - --ig-info-700-contrast: hsla(from color(from var(--ig-info-700) var(--y-contrast)) h 0 l/1); - --ig-info-800: rgb(6, 36, 125); - --ig-info-800-contrast: hsla(from color(from var(--ig-info-800) var(--y-contrast)) h 0 l/1); - --ig-info-900: rgb(4, 18, 59); - --ig-info-900-contrast: hsla(from color(from var(--ig-info-900) var(--y-contrast)) h 0 l/1); - --ig-info-seed: blue; - --ig-info-seed-contrast: hsla(from color(from var(--ig-info-seed) var(--y-contrast)) h 0 l/1); - --ig-info-A100: rgb(207, 217, 255); - --ig-info-A100-contrast: hsla(from color(from var(--ig-info-A100) var(--y-contrast)) h 0 l/1); - --ig-info-A200: rgb(124, 156, 255); - --ig-info-A200-contrast: hsla(from color(from var(--ig-info-A200) var(--y-contrast)) h 0 l/1); - --ig-info-A400: rgb(63, 113, 255); - --ig-info-A400-contrast: hsla(from color(from var(--ig-info-A400) var(--y-contrast)) h 0 l/1); - --ig-info-A700: rgb(16, 75, 249); - --ig-info-A700-contrast: hsla(from color(from var(--ig-info-A700) var(--y-contrast)) h 0 l/1); - --ig-success-50: rgb(193, 251, 187); - --ig-success-50-contrast: hsla(from color(from var(--ig-success-50) var(--y-contrast)) h 0 l/1); - --ig-success-100: rgb(93, 231, 86); - --ig-success-100-contrast: hsla(from color(from var(--ig-success-100) var(--y-contrast)) h 0 l/1); - --ig-success-200: rgb(47, 203, 42); - --ig-success-200-contrast: hsla(from color(from var(--ig-success-200) var(--y-contrast)) h 0 l/1); - --ig-success-300: rgb(17, 175, 14); - --ig-success-300-contrast: hsla(from color(from var(--ig-success-300) var(--y-contrast)) h 0 l/1); - --ig-success-400: rgb(1, 148, 1); - --ig-success-400-contrast: hsla(from color(from var(--ig-success-400) var(--y-contrast)) h 0 l/1); - --ig-success-500: rgb(1, 124, 0); - --ig-success-500-contrast: hsla(from color(from var(--ig-success-500) var(--y-contrast)) h 0 l/1); - --ig-success-600: rgb(5, 101, 4); - --ig-success-600-contrast: hsla(from color(from var(--ig-success-600) var(--y-contrast)) h 0 l/1); - --ig-success-700: rgb(11, 78, 9); - --ig-success-700-contrast: hsla(from color(from var(--ig-success-700) var(--y-contrast)) h 0 l/1); - --ig-success-800: rgb(13, 55, 11); - --ig-success-800-contrast: hsla(from color(from var(--ig-success-800) var(--y-contrast)) h 0 l/1); - --ig-success-900: rgb(7, 25, 6); - --ig-success-900-contrast: hsla(from color(from var(--ig-success-900) var(--y-contrast)) h 0 l/1); - --ig-success-seed: green; - --ig-success-seed-contrast: hsla(from color(from var(--ig-success-seed) var(--y-contrast)) h 0 l/1); - --ig-success-A100: rgb(56, 251, 50); - --ig-success-A100-contrast: hsla(from color(from var(--ig-success-A100) var(--y-contrast)) h 0 l/1); - --ig-success-A200: rgb(0, 187, 0); - --ig-success-A200-contrast: hsla(from color(from var(--ig-success-A200) var(--y-contrast)) h 0 l/1); - --ig-success-A400: rgb(0, 144, 0); - --ig-success-A400-contrast: hsla(from color(from var(--ig-success-A400) var(--y-contrast)) h 0 l/1); - --ig-success-A700: rgb(0, 114, 0); - --ig-success-A700-contrast: hsla(from color(from var(--ig-success-A700) var(--y-contrast)) h 0 l/1); - --ig-warn-50: rgb(251, 233, 213); - --ig-warn-50-contrast: hsla(from color(from var(--ig-warn-50) var(--y-contrast)) h 0 l/1); - --ig-warn-100: rgb(247, 195, 133); - --ig-warn-100-contrast: hsla(from color(from var(--ig-warn-100) var(--y-contrast)) h 0 l/1); - --ig-warn-200: rgb(233, 161, 65); - --ig-warn-200-contrast: hsla(from color(from var(--ig-warn-200) var(--y-contrast)) h 0 l/1); - --ig-warn-300: rgb(207, 135, 24); - --ig-warn-300-contrast: hsla(from color(from var(--ig-warn-300) var(--y-contrast)) h 0 l/1); - --ig-warn-400: rgb(177, 114, 4); - --ig-warn-400-contrast: hsla(from color(from var(--ig-warn-400) var(--y-contrast)) h 0 l/1); - --ig-warn-500: rgb(149, 94, 1); - --ig-warn-500-contrast: hsla(from color(from var(--ig-warn-500) var(--y-contrast)) h 0 l/1); - --ig-warn-600: rgb(121, 77, 4); - --ig-warn-600-contrast: hsla(from color(from var(--ig-warn-600) var(--y-contrast)) h 0 l/1); - --ig-warn-700: rgb(94, 60, 9); - --ig-warn-700-contrast: hsla(from color(from var(--ig-warn-700) var(--y-contrast)) h 0 l/1); - --ig-warn-800: rgb(65, 42, 11); - --ig-warn-800-contrast: hsla(from color(from var(--ig-warn-800) var(--y-contrast)) h 0 l/1); - --ig-warn-900: rgb(30, 19, 6); - --ig-warn-900-contrast: hsla(from color(from var(--ig-warn-900) var(--y-contrast)) h 0 l/1); - --ig-warn-seed: orange; - --ig-warn-seed-contrast: hsla(from color(from var(--ig-warn-seed) var(--y-contrast)) h 0 l/1); - --ig-warn-A100: rgb(255, 211, 156); - --ig-warn-A100-contrast: hsla(from color(from var(--ig-warn-A100) var(--y-contrast)) h 0 l/1); - --ig-warn-A200: rgb(222, 143, 4); - --ig-warn-A200-contrast: hsla(from color(from var(--ig-warn-A200) var(--y-contrast)) h 0 l/1); - --ig-warn-A400: rgb(172, 110, 0); - --ig-warn-A400-contrast: hsla(from color(from var(--ig-warn-A400) var(--y-contrast)) h 0 l/1); - --ig-warn-A700: rgb(136, 86, 0); - --ig-warn-A700-contrast: hsla(from color(from var(--ig-warn-A700) var(--y-contrast)) h 0 l/1); - --ig-error-50: rgb(254, 231, 227); - --ig-error-50-contrast: hsla(from color(from var(--ig-error-50) var(--y-contrast)) h 0 l/1); - --ig-error-100: rgb(255, 188, 177); - --ig-error-100-contrast: hsla(from color(from var(--ig-error-100) var(--y-contrast)) h 0 l/1); - --ig-error-200: rgb(255, 146, 130); - --ig-error-200-contrast: hsla(from color(from var(--ig-error-200) var(--y-contrast)) h 0 l/1); - --ig-error-300: rgb(255, 99, 82); - --ig-error-300-contrast: hsla(from color(from var(--ig-error-300) var(--y-contrast)) h 0 l/1); - --ig-error-400: rgb(237, 58, 45); - --ig-error-400-contrast: hsla(from color(from var(--ig-error-400) var(--y-contrast)) h 0 l/1); - --ig-error-500: rgb(209, 28, 19); - --ig-error-500-contrast: hsla(from color(from var(--ig-error-500) var(--y-contrast)) h 0 l/1); - --ig-error-600: rgb(174, 16, 9); - --ig-error-600-contrast: hsla(from color(from var(--ig-error-600) var(--y-contrast)) h 0 l/1); - --ig-error-700: rgb(135, 17, 11); - --ig-error-700-contrast: hsla(from color(from var(--ig-error-700) var(--y-contrast)) h 0 l/1); - --ig-error-800: rgb(93, 18, 12); - --ig-error-800-contrast: hsla(from color(from var(--ig-error-800) var(--y-contrast)) h 0 l/1); - --ig-error-900: rgb(44, 9, 6); - --ig-error-900-contrast: hsla(from color(from var(--ig-error-900) var(--y-contrast)) h 0 l/1); - --ig-error-seed: red; - --ig-error-seed-contrast: hsla(from color(from var(--ig-error-seed) var(--y-contrast)) h 0 l/1); - --ig-error-A100: rgb(255, 207, 198); - --ig-error-A100-contrast: hsla(from color(from var(--ig-error-A100) var(--y-contrast)) h 0 l/1); - --ig-error-A200: rgb(255, 119, 101); - --ig-error-A200-contrast: hsla(from color(from var(--ig-error-A200) var(--y-contrast)) h 0 l/1); - --ig-error-A400: rgb(242, 34, 24); - --ig-error-A400-contrast: hsla(from color(from var(--ig-error-A400) var(--y-contrast)) h 0 l/1); - --ig-error-A700: rgb(197, 2, 1); - --ig-error-A700-contrast: hsla(from color(from var(--ig-error-A700) var(--y-contrast)) h 0 l/1); -} - -/* END_OUTPUT */ -/* CONTAINED */ -:root { - --ig-primary-seed: #09f; - --ig-gray-seed: #000; -} - -/* END_CONTAINED */ -/* END_ASSERT */ -/* */ -/* */ -/* */ -/* */ -/* # Module: Typography */ -/* -------------------- */ -/* # Module: Typography :: operations */ -/* ---------------------------------- */ -/* Test: should convert pixel numbers to rem */ -/* ✔ [assert-equal] should convert pixel numbers to rem */ -/* */ -/* Test: should convert unitless numbers to rem */ -/* ✔ [assert-equal] should convert unitless numbers to rem */ -/* */ -/* Test: should convert pixel numbers to em */ -/* ✔ [assert-equal] should convert pixel numbers to em */ -/* */ -/* Test: should convert unitless numbers to em */ -/* ✔ [assert-equal] should convert unitless numbers to em */ -/* */ -/* Test: should convert relative unit numbers to pixels */ -/* ✔ [assert-equal] should convert relative unit numbers to pixels */ -/* ✔ [assert-equal] should convert relative unit numbers to pixels */ -/* */ -/* Test: should convert unitless numbers to pixels */ -/* ✔ [assert-equal] should convert unitless numbers to pixels */ -/* */ -/* */ -/* # Module: Typography :: generation */ -/* ---------------------------------- */ -/* Test: should produce a map of default type style rules matching the ITypeStyle map */ -/* ✔ [assert-equal] should produce a map of default type style rules matching the ITypeStyle map */ -/* ✔ [assert-equal] should produce a map of default type style rules matching the ITypeStyle map */ -/* ✔ [assert-equal] should produce a map of default type style rules matching the ITypeStyle map */ -/* ✔ [assert-equal] should produce a map of default type style rules matching the ITypeStyle map */ -/* ✔ [assert-equal] should produce a map of default type style rules matching the ITypeStyle map */ -/* ✔ [assert-equal] should produce a map of default type style rules matching the ITypeStyle map */ -/* ✔ [assert-equal] should produce a map of default type style rules matching the ITypeStyle map */ -/* ✔ [assert-equal] should produce a map of default type style rules matching the ITypeStyle map */ -/* ✔ [assert-equal] should produce a map of default type style rules matching the ITypeStyle map */ -/* */ -/* Test: should only produce a map of allowed type style rules */ -/* ✔ [assert-equal] should only produce a map of allowed type style rules */ -/* ✔ [assert-equal] should only produce a map of allowed type style rules */ -/* ✔ [assert-equal] should only produce a map of allowed type style rules */ -/* ✔ [assert-equal] should only produce a map of allowed type style rules */ -/* ✔ [assert-equal] should only produce a map of allowed type style rules */ -/* ✔ [assert-equal] should only produce a map of allowed type style rules */ -/* ✔ [assert-equal] should only produce a map of allowed type style rules */ -/* ✔ [assert-equal] should only produce a map of allowed type style rules */ -/* ✔ [assert-equal] should only produce a map of allowed type style rules */ -/* ✔ [assert-false] should only produce a map of allowed type style rules */ -/* */ -/* Test: should produce a type scale map of type style values for each category */ -/* ✔ [assert-equal] should produce a type scale map of type style values for each category */ -/* ✔ [assert-equal] should produce a type scale map of type style values for each category */ -/* ✔ [assert-equal] should produce a type scale map of type style values for each category */ -/* ✔ [assert-equal] should produce a type scale map of type style values for each category */ -/* ✔ [assert-equal] should produce a type scale map of type style values for each category */ -/* ✔ [assert-equal] should produce a type scale map of type style values for each category */ -/* ✔ [assert-equal] should produce a type scale map of type style values for each category */ -/* ✔ [assert-equal] should produce a type scale map of type style values for each category */ -/* ✔ [assert-equal] should produce a type scale map of type style values for each category */ -/* ✔ [assert-equal] should produce a type scale map of type style values for each category */ -/* ✔ [assert-equal] should produce a type scale map of type style values for each category */ -/* ✔ [assert-equal] should produce a type scale map of type style values for each category */ -/* ✔ [assert-equal] should produce a type scale map of type style values for each category */ -/* ✔ [assert-equal] should produce a type scale map of type style values for each category */ -/* */ -/* Test: should retreive type styles from a scale */ -/* ✔ [assert-equal] should retreive type styles from a scale */ -/* ✔ [assert-equal] should retreive type styles from a scale */ -/* ✔ [assert-equal] should retreive type styles from a scale */ -/* ✔ [assert-equal] should retreive type styles from a scale */ -/* ✔ [assert-equal] should retreive type styles from a scale */ -/* ✔ [assert-equal] should retreive type styles from a scale */ -/* ✔ [assert-equal] should retreive type styles from a scale */ -/* ✔ [assert-equal] should retreive type styles from a scale */ -/* ✔ [assert-equal] should retreive type styles from a scale */ -/* */ -/* Test: generates CSS variables from a type style map without font-family if its value is "inherit" */ -/* ASSERT: */ -/* OUTPUT */ -.test-output { - --ig-h1-font-size: 96px; - --ig-h1-font-weight: normal; - --ig-h1-font-style: normal; - --ig-h1-line-height: normal; - --ig-h1-letter-spacing: normal; - --ig-h1-text-transform: none; - --ig-h1-margin-top: 0; - --ig-h1-margin-bottom: 0; -} - -/* END_OUTPUT */ -/* EXPECTED */ -.test-output { - --ig-h1-font-size: 96px; - --ig-h1-font-weight: normal; - --ig-h1-font-style: normal; - --ig-h1-line-height: normal; - --ig-h1-letter-spacing: normal; - --ig-h1-text-transform: none; - --ig-h1-margin-top: 0; - --ig-h1-margin-bottom: 0; -} - -/* END_EXPECTED */ -/* END_ASSERT */ -/* */ -/* Test: generates CSS variables for a type style map with font-family if its value is not "inherit" */ -/* ASSERT: */ -/* OUTPUT */ -.test-output { - --ig-h1-font-family: 'American Typewriter', serif; - --ig-h1-font-size: 96px; - --ig-h1-font-weight: normal; - --ig-h1-font-style: normal; - --ig-h1-line-height: normal; - --ig-h1-letter-spacing: normal; - --ig-h1-text-transform: none; - --ig-h1-margin-top: 0; - --ig-h1-margin-bottom: 0; -} - -/* END_OUTPUT */ -/* EXPECTED */ -.test-output { - --ig-h1-font-family: 'American Typewriter', serif; - --ig-h1-font-size: 96px; - --ig-h1-font-weight: normal; - --ig-h1-font-style: normal; - --ig-h1-line-height: normal; - --ig-h1-letter-spacing: normal; - --ig-h1-text-transform: none; - --ig-h1-margin-top: 0; - --ig-h1-margin-bottom: 0; -} - -/* END_EXPECTED */ -/* END_ASSERT */ -/* */ -/* Test: should include all styles from a custom type category */ -/* ASSERT: */ -/* OUTPUT */ -.test-output { - font-family: var(--ig-calendar-labels-font-family, var(--ig-font-family)); - font-size: var(--ig-calendar-labels-font-size); - font-weight: var(--ig-calendar-labels-font-weight); - font-style: var(--ig-calendar-labels-font-style); - line-height: var(--ig-calendar-labels-line-height); - letter-spacing: var(--ig-calendar-labels-letter-spacing); - text-transform: var(--ig-calendar-labels-text-transform); - margin-top: var(--ig-calendar-labels-margin-top); - margin-bottom: var(--ig-calendar-labels-margin-bottom); -} - -/* END_OUTPUT */ -/* EXPECTED */ -.test-output { - font-family: var(--ig-calendar-labels-font-family, var(--ig-font-family)); - font-size: var(--ig-calendar-labels-font-size); - font-weight: var(--ig-calendar-labels-font-weight); - font-style: var(--ig-calendar-labels-font-style); - line-height: var(--ig-calendar-labels-line-height); - letter-spacing: var(--ig-calendar-labels-letter-spacing); - text-transform: var(--ig-calendar-labels-text-transform); - margin-top: var(--ig-calendar-labels-margin-top); - margin-bottom: var(--ig-calendar-labels-margin-bottom); -} - -/* END_EXPECTED */ -/* END_ASSERT */ -/* */ -/* Test: should include type styles with CSS var refs as values for a specific category */ -/* ASSERT: */ -/* OUTPUT */ -.test-output .my-h1 { - font-family: var(--ig-h1-font-family, var(--ig-font-family)); - font-size: var(--ig-h1-font-size); - font-weight: var(--ig-h1-font-weight); - font-style: var(--ig-h1-font-style); - line-height: var(--ig-h1-line-height); - letter-spacing: var(--ig-h1-letter-spacing); - text-transform: var(--ig-h1-text-transform); - margin-top: var(--ig-h1-margin-top); - margin-bottom: var(--ig-h1-margin-bottom); -} - -/* END_OUTPUT */ -/* EXPECTED */ -.test-output .my-h1 { - font-family: var(--ig-h1-font-family, var(--ig-font-family)); - font-size: var(--ig-h1-font-size); - font-weight: var(--ig-h1-font-weight); - font-style: var(--ig-h1-font-style); - line-height: var(--ig-h1-line-height); - letter-spacing: var(--ig-h1-letter-spacing); - text-transform: var(--ig-h1-text-transform); - margin-top: var(--ig-h1-margin-top); - margin-bottom: var(--ig-h1-margin-bottom); -} - -/* END_EXPECTED */ -/* END_ASSERT */ -/* */ -/* Test: should include CSS classes with style rules for all categories in a type scale */ -/* ASSERT: */ -/* OUTPUT */ -.ig-typography .ig-typography__h1 { - font-family: var(--ig-h1-font-family, var(--ig-font-family)); - font-size: var(--ig-h1-font-size); - font-weight: var(--ig-h1-font-weight); - font-style: var(--ig-h1-font-style); - line-height: var(--ig-h1-line-height); - letter-spacing: var(--ig-h1-letter-spacing); - text-transform: var(--ig-h1-text-transform); - margin-top: var(--ig-h1-margin-top); - margin-bottom: var(--ig-h1-margin-bottom); -} -.ig-typography .ig-typography__h2 { - font-family: var(--ig-h2-font-family, var(--ig-font-family)); - font-size: var(--ig-h2-font-size); - font-weight: var(--ig-h2-font-weight); - font-style: var(--ig-h2-font-style); - line-height: var(--ig-h2-line-height); - letter-spacing: var(--ig-h2-letter-spacing); - text-transform: var(--ig-h2-text-transform); - margin-top: var(--ig-h2-margin-top); - margin-bottom: var(--ig-h2-margin-bottom); -} -.ig-typography .ig-typography__h3 { - font-family: var(--ig-h3-font-family, var(--ig-font-family)); - font-size: var(--ig-h3-font-size); - font-weight: var(--ig-h3-font-weight); - font-style: var(--ig-h3-font-style); - line-height: var(--ig-h3-line-height); - letter-spacing: var(--ig-h3-letter-spacing); - text-transform: var(--ig-h3-text-transform); - margin-top: var(--ig-h3-margin-top); - margin-bottom: var(--ig-h3-margin-bottom); -} -.ig-typography .ig-typography__h4 { - font-family: var(--ig-h4-font-family, var(--ig-font-family)); - font-size: var(--ig-h4-font-size); - font-weight: var(--ig-h4-font-weight); - font-style: var(--ig-h4-font-style); - line-height: var(--ig-h4-line-height); - letter-spacing: var(--ig-h4-letter-spacing); - text-transform: var(--ig-h4-text-transform); - margin-top: var(--ig-h4-margin-top); - margin-bottom: var(--ig-h4-margin-bottom); -} -.ig-typography .ig-typography__h5 { - font-family: var(--ig-h5-font-family, var(--ig-font-family)); - font-size: var(--ig-h5-font-size); - font-weight: var(--ig-h5-font-weight); - font-style: var(--ig-h5-font-style); - line-height: var(--ig-h5-line-height); - letter-spacing: var(--ig-h5-letter-spacing); - text-transform: var(--ig-h5-text-transform); - margin-top: var(--ig-h5-margin-top); - margin-bottom: var(--ig-h5-margin-bottom); -} -.ig-typography .ig-typography__h6 { - font-family: var(--ig-h6-font-family, var(--ig-font-family)); - font-size: var(--ig-h6-font-size); - font-weight: var(--ig-h6-font-weight); - font-style: var(--ig-h6-font-style); - line-height: var(--ig-h6-line-height); - letter-spacing: var(--ig-h6-letter-spacing); - text-transform: var(--ig-h6-text-transform); - margin-top: var(--ig-h6-margin-top); - margin-bottom: var(--ig-h6-margin-bottom); -} -.ig-typography .ig-typography__subtitle-1 { - font-family: var(--ig-subtitle-1-font-family, var(--ig-font-family)); - font-size: var(--ig-subtitle-1-font-size); - font-weight: var(--ig-subtitle-1-font-weight); - font-style: var(--ig-subtitle-1-font-style); - line-height: var(--ig-subtitle-1-line-height); - letter-spacing: var(--ig-subtitle-1-letter-spacing); - text-transform: var(--ig-subtitle-1-text-transform); - margin-top: var(--ig-subtitle-1-margin-top); - margin-bottom: var(--ig-subtitle-1-margin-bottom); -} -.ig-typography .ig-typography__subtitle-2 { - font-family: var(--ig-subtitle-2-font-family, var(--ig-font-family)); - font-size: var(--ig-subtitle-2-font-size); - font-weight: var(--ig-subtitle-2-font-weight); - font-style: var(--ig-subtitle-2-font-style); - line-height: var(--ig-subtitle-2-line-height); - letter-spacing: var(--ig-subtitle-2-letter-spacing); - text-transform: var(--ig-subtitle-2-text-transform); - margin-top: var(--ig-subtitle-2-margin-top); - margin-bottom: var(--ig-subtitle-2-margin-bottom); -} -.ig-typography .ig-typography__body-1 { - font-family: var(--ig-body-1-font-family, var(--ig-font-family)); - font-size: var(--ig-body-1-font-size); - font-weight: var(--ig-body-1-font-weight); - font-style: var(--ig-body-1-font-style); - line-height: var(--ig-body-1-line-height); - letter-spacing: var(--ig-body-1-letter-spacing); - text-transform: var(--ig-body-1-text-transform); - margin-top: var(--ig-body-1-margin-top); - margin-bottom: var(--ig-body-1-margin-bottom); -} -.ig-typography .ig-typography__body-2 { - font-family: var(--ig-body-2-font-family, var(--ig-font-family)); - font-size: var(--ig-body-2-font-size); - font-weight: var(--ig-body-2-font-weight); - font-style: var(--ig-body-2-font-style); - line-height: var(--ig-body-2-line-height); - letter-spacing: var(--ig-body-2-letter-spacing); - text-transform: var(--ig-body-2-text-transform); - margin-top: var(--ig-body-2-margin-top); - margin-bottom: var(--ig-body-2-margin-bottom); -} -.ig-typography .ig-typography__button { - font-family: var(--ig-button-font-family, var(--ig-font-family)); - font-size: var(--ig-button-font-size); - font-weight: var(--ig-button-font-weight); - font-style: var(--ig-button-font-style); - line-height: var(--ig-button-line-height); - letter-spacing: var(--ig-button-letter-spacing); - text-transform: var(--ig-button-text-transform); - margin-top: var(--ig-button-margin-top); - margin-bottom: var(--ig-button-margin-bottom); -} -.ig-typography .ig-typography__caption { - font-family: var(--ig-caption-font-family, var(--ig-font-family)); - font-size: var(--ig-caption-font-size); - font-weight: var(--ig-caption-font-weight); - font-style: var(--ig-caption-font-style); - line-height: var(--ig-caption-line-height); - letter-spacing: var(--ig-caption-letter-spacing); - text-transform: var(--ig-caption-text-transform); - margin-top: var(--ig-caption-margin-top); - margin-bottom: var(--ig-caption-margin-bottom); -} -.ig-typography .ig-typography__overline { - font-family: var(--ig-overline-font-family, var(--ig-font-family)); - font-size: var(--ig-overline-font-size); - font-weight: var(--ig-overline-font-weight); - font-style: var(--ig-overline-font-style); - line-height: var(--ig-overline-line-height); - letter-spacing: var(--ig-overline-letter-spacing); - text-transform: var(--ig-overline-text-transform); - margin-top: var(--ig-overline-margin-top); - margin-bottom: var(--ig-overline-margin-bottom); -} - -/* END_OUTPUT */ -/* EXPECTED */ -.ig-typography .ig-typography__h1 { - font-family: var(--ig-h1-font-family, var(--ig-font-family)); - font-size: var(--ig-h1-font-size); - font-weight: var(--ig-h1-font-weight); - font-style: var(--ig-h1-font-style); - line-height: var(--ig-h1-line-height); - letter-spacing: var(--ig-h1-letter-spacing); - text-transform: var(--ig-h1-text-transform); - margin-top: var(--ig-h1-margin-top); - margin-bottom: var(--ig-h1-margin-bottom); -} - -.ig-typography .ig-typography__h2 { - font-family: var(--ig-h2-font-family, var(--ig-font-family)); - font-size: var(--ig-h2-font-size); - font-weight: var(--ig-h2-font-weight); - font-style: var(--ig-h2-font-style); - line-height: var(--ig-h2-line-height); - letter-spacing: var(--ig-h2-letter-spacing); - text-transform: var(--ig-h2-text-transform); - margin-top: var(--ig-h2-margin-top); - margin-bottom: var(--ig-h2-margin-bottom); -} - -.ig-typography .ig-typography__h3 { - font-family: var(--ig-h3-font-family, var(--ig-font-family)); - font-size: var(--ig-h3-font-size); - font-weight: var(--ig-h3-font-weight); - font-style: var(--ig-h3-font-style); - line-height: var(--ig-h3-line-height); - letter-spacing: var(--ig-h3-letter-spacing); - text-transform: var(--ig-h3-text-transform); - margin-top: var(--ig-h3-margin-top); - margin-bottom: var(--ig-h3-margin-bottom); -} - -.ig-typography .ig-typography__h4 { - font-family: var(--ig-h4-font-family, var(--ig-font-family)); - font-size: var(--ig-h4-font-size); - font-weight: var(--ig-h4-font-weight); - font-style: var(--ig-h4-font-style); - line-height: var(--ig-h4-line-height); - letter-spacing: var(--ig-h4-letter-spacing); - text-transform: var(--ig-h4-text-transform); - margin-top: var(--ig-h4-margin-top); - margin-bottom: var(--ig-h4-margin-bottom); -} - -.ig-typography .ig-typography__h5 { - font-family: var(--ig-h5-font-family, var(--ig-font-family)); - font-size: var(--ig-h5-font-size); - font-weight: var(--ig-h5-font-weight); - font-style: var(--ig-h5-font-style); - line-height: var(--ig-h5-line-height); - letter-spacing: var(--ig-h5-letter-spacing); - text-transform: var(--ig-h5-text-transform); - margin-top: var(--ig-h5-margin-top); - margin-bottom: var(--ig-h5-margin-bottom); -} - -.ig-typography .ig-typography__h6 { - font-family: var(--ig-h6-font-family, var(--ig-font-family)); - font-size: var(--ig-h6-font-size); - font-weight: var(--ig-h6-font-weight); - font-style: var(--ig-h6-font-style); - line-height: var(--ig-h6-line-height); - letter-spacing: var(--ig-h6-letter-spacing); - text-transform: var(--ig-h6-text-transform); - margin-top: var(--ig-h6-margin-top); - margin-bottom: var(--ig-h6-margin-bottom); -} - -.ig-typography .ig-typography__subtitle-1 { - font-family: var(--ig-subtitle-1-font-family, var(--ig-font-family)); - font-size: var(--ig-subtitle-1-font-size); - font-weight: var(--ig-subtitle-1-font-weight); - font-style: var(--ig-subtitle-1-font-style); - line-height: var(--ig-subtitle-1-line-height); - letter-spacing: var(--ig-subtitle-1-letter-spacing); - text-transform: var(--ig-subtitle-1-text-transform); - margin-top: var(--ig-subtitle-1-margin-top); - margin-bottom: var(--ig-subtitle-1-margin-bottom); -} - -.ig-typography .ig-typography__subtitle-2 { - font-family: var(--ig-subtitle-2-font-family, var(--ig-font-family)); - font-size: var(--ig-subtitle-2-font-size); - font-weight: var(--ig-subtitle-2-font-weight); - font-style: var(--ig-subtitle-2-font-style); - line-height: var(--ig-subtitle-2-line-height); - letter-spacing: var(--ig-subtitle-2-letter-spacing); - text-transform: var(--ig-subtitle-2-text-transform); - margin-top: var(--ig-subtitle-2-margin-top); - margin-bottom: var(--ig-subtitle-2-margin-bottom); -} - -.ig-typography .ig-typography__body-1 { - font-family: var(--ig-body-1-font-family, var(--ig-font-family)); - font-size: var(--ig-body-1-font-size); - font-weight: var(--ig-body-1-font-weight); - font-style: var(--ig-body-1-font-style); - line-height: var(--ig-body-1-line-height); - letter-spacing: var(--ig-body-1-letter-spacing); - text-transform: var(--ig-body-1-text-transform); - margin-top: var(--ig-body-1-margin-top); - margin-bottom: var(--ig-body-1-margin-bottom); -} - -.ig-typography .ig-typography__body-2 { - font-family: var(--ig-body-2-font-family, var(--ig-font-family)); - font-size: var(--ig-body-2-font-size); - font-weight: var(--ig-body-2-font-weight); - font-style: var(--ig-body-2-font-style); - line-height: var(--ig-body-2-line-height); - letter-spacing: var(--ig-body-2-letter-spacing); - text-transform: var(--ig-body-2-text-transform); - margin-top: var(--ig-body-2-margin-top); - margin-bottom: var(--ig-body-2-margin-bottom); -} - -.ig-typography .ig-typography__button { - font-family: var(--ig-button-font-family, var(--ig-font-family)); - font-size: var(--ig-button-font-size); - font-weight: var(--ig-button-font-weight); - font-style: var(--ig-button-font-style); - line-height: var(--ig-button-line-height); - letter-spacing: var(--ig-button-letter-spacing); - text-transform: var(--ig-button-text-transform); - margin-top: var(--ig-button-margin-top); - margin-bottom: var(--ig-button-margin-bottom); -} - -.ig-typography .ig-typography__caption { - font-family: var(--ig-caption-font-family, var(--ig-font-family)); - font-size: var(--ig-caption-font-size); - font-weight: var(--ig-caption-font-weight); - font-style: var(--ig-caption-font-style); - line-height: var(--ig-caption-line-height); - letter-spacing: var(--ig-caption-letter-spacing); - text-transform: var(--ig-caption-text-transform); - margin-top: var(--ig-caption-margin-top); - margin-bottom: var(--ig-caption-margin-bottom); -} - -.ig-typography .ig-typography__overline { - font-family: var(--ig-overline-font-family, var(--ig-font-family)); - font-size: var(--ig-overline-font-size); - font-weight: var(--ig-overline-font-weight); - font-style: var(--ig-overline-font-style); - line-height: var(--ig-overline-line-height); - letter-spacing: var(--ig-overline-letter-spacing); - text-transform: var(--ig-overline-text-transform); - margin-top: var(--ig-overline-margin-top); - margin-bottom: var(--ig-overline-margin-bottom); -} - -/* END_EXPECTED */ -/* END_ASSERT */ -/* */ -/* Test: should include CSS headeing and paragraph style rules for mapped categories in a type scale, unwrapped by default */ -/* ASSERT: */ -/* OUTPUT */ -.test-output h1 { - font-family: var(--ig-h1-font-family, var(--ig-font-family)); - font-size: var(--ig-h1-font-size); - font-weight: var(--ig-h1-font-weight); - font-style: var(--ig-h1-font-style); - line-height: var(--ig-h1-line-height); - letter-spacing: var(--ig-h1-letter-spacing); - text-transform: var(--ig-h1-text-transform); - margin-top: var(--ig-h1-margin-top); - margin-bottom: var(--ig-h1-margin-bottom); -} -.test-output h2 { - font-family: var(--ig-h2-font-family, var(--ig-font-family)); - font-size: var(--ig-h2-font-size); - font-weight: var(--ig-h2-font-weight); - font-style: var(--ig-h2-font-style); - line-height: var(--ig-h2-line-height); - letter-spacing: var(--ig-h2-letter-spacing); - text-transform: var(--ig-h2-text-transform); - margin-top: var(--ig-h2-margin-top); - margin-bottom: var(--ig-h2-margin-bottom); -} -.test-output h3 { - font-family: var(--ig-h3-font-family, var(--ig-font-family)); - font-size: var(--ig-h3-font-size); - font-weight: var(--ig-h3-font-weight); - font-style: var(--ig-h3-font-style); - line-height: var(--ig-h3-line-height); - letter-spacing: var(--ig-h3-letter-spacing); - text-transform: var(--ig-h3-text-transform); - margin-top: var(--ig-h3-margin-top); - margin-bottom: var(--ig-h3-margin-bottom); -} -.test-output h4 { - font-family: var(--ig-h4-font-family, var(--ig-font-family)); - font-size: var(--ig-h4-font-size); - font-weight: var(--ig-h4-font-weight); - font-style: var(--ig-h4-font-style); - line-height: var(--ig-h4-line-height); - letter-spacing: var(--ig-h4-letter-spacing); - text-transform: var(--ig-h4-text-transform); - margin-top: var(--ig-h4-margin-top); - margin-bottom: var(--ig-h4-margin-bottom); -} -.test-output h5 { - font-family: var(--ig-h5-font-family, var(--ig-font-family)); - font-size: var(--ig-h5-font-size); - font-weight: var(--ig-h5-font-weight); - font-style: var(--ig-h5-font-style); - line-height: var(--ig-h5-line-height); - letter-spacing: var(--ig-h5-letter-spacing); - text-transform: var(--ig-h5-text-transform); - margin-top: var(--ig-h5-margin-top); - margin-bottom: var(--ig-h5-margin-bottom); -} -.test-output h6 { - font-family: var(--ig-h6-font-family, var(--ig-font-family)); - font-size: var(--ig-h6-font-size); - font-weight: var(--ig-h6-font-weight); - font-style: var(--ig-h6-font-style); - line-height: var(--ig-h6-line-height); - letter-spacing: var(--ig-h6-letter-spacing); - text-transform: var(--ig-h6-text-transform); - margin-top: var(--ig-h6-margin-top); - margin-bottom: var(--ig-h6-margin-bottom); -} -.test-output p { - font-family: var(--ig-body-1-font-family, var(--ig-font-family)); - font-size: var(--ig-body-1-font-size); - font-weight: var(--ig-body-1-font-weight); - font-style: var(--ig-body-1-font-style); - line-height: var(--ig-body-1-line-height); - letter-spacing: var(--ig-body-1-letter-spacing); - text-transform: var(--ig-body-1-text-transform); - margin-top: var(--ig-body-1-margin-top); - margin-bottom: var(--ig-body-1-margin-bottom); -} - -/* END_OUTPUT */ -/* EXPECTED */ -.test-output h1 { - font-family: var(--ig-h1-font-family, var(--ig-font-family)); - font-size: var(--ig-h1-font-size); - font-weight: var(--ig-h1-font-weight); - font-style: var(--ig-h1-font-style); - line-height: var(--ig-h1-line-height); - letter-spacing: var(--ig-h1-letter-spacing); - text-transform: var(--ig-h1-text-transform); - margin-top: var(--ig-h1-margin-top); - margin-bottom: var(--ig-h1-margin-bottom); -} -.test-output h2 { - font-family: var(--ig-h2-font-family, var(--ig-font-family)); - font-size: var(--ig-h2-font-size); - font-weight: var(--ig-h2-font-weight); - font-style: var(--ig-h2-font-style); - line-height: var(--ig-h2-line-height); - letter-spacing: var(--ig-h2-letter-spacing); - text-transform: var(--ig-h2-text-transform); - margin-top: var(--ig-h2-margin-top); - margin-bottom: var(--ig-h2-margin-bottom); -} -.test-output h3 { - font-family: var(--ig-h3-font-family, var(--ig-font-family)); - font-size: var(--ig-h3-font-size); - font-weight: var(--ig-h3-font-weight); - font-style: var(--ig-h3-font-style); - line-height: var(--ig-h3-line-height); - letter-spacing: var(--ig-h3-letter-spacing); - text-transform: var(--ig-h3-text-transform); - margin-top: var(--ig-h3-margin-top); - margin-bottom: var(--ig-h3-margin-bottom); -} -.test-output h4 { - font-family: var(--ig-h4-font-family, var(--ig-font-family)); - font-size: var(--ig-h4-font-size); - font-weight: var(--ig-h4-font-weight); - font-style: var(--ig-h4-font-style); - line-height: var(--ig-h4-line-height); - letter-spacing: var(--ig-h4-letter-spacing); - text-transform: var(--ig-h4-text-transform); - margin-top: var(--ig-h4-margin-top); - margin-bottom: var(--ig-h4-margin-bottom); -} -.test-output h5 { - font-family: var(--ig-h5-font-family, var(--ig-font-family)); - font-size: var(--ig-h5-font-size); - font-weight: var(--ig-h5-font-weight); - font-style: var(--ig-h5-font-style); - line-height: var(--ig-h5-line-height); - letter-spacing: var(--ig-h5-letter-spacing); - text-transform: var(--ig-h5-text-transform); - margin-top: var(--ig-h5-margin-top); - margin-bottom: var(--ig-h5-margin-bottom); -} -.test-output h6 { - font-family: var(--ig-h6-font-family, var(--ig-font-family)); - font-size: var(--ig-h6-font-size); - font-weight: var(--ig-h6-font-weight); - font-style: var(--ig-h6-font-style); - line-height: var(--ig-h6-line-height); - letter-spacing: var(--ig-h6-letter-spacing); - text-transform: var(--ig-h6-text-transform); - margin-top: var(--ig-h6-margin-top); - margin-bottom: var(--ig-h6-margin-bottom); -} -.test-output p { - font-family: var(--ig-body-1-font-family, var(--ig-font-family)); - font-size: var(--ig-body-1-font-size); - font-weight: var(--ig-body-1-font-weight); - font-style: var(--ig-body-1-font-style); - line-height: var(--ig-body-1-line-height); - letter-spacing: var(--ig-body-1-letter-spacing); - text-transform: var(--ig-body-1-text-transform); - margin-top: var(--ig-body-1-margin-top); - margin-bottom: var(--ig-body-1-margin-bottom); -} - -/* END_EXPECTED */ -/* END_ASSERT */ -/* */ -/* Test: should wrap CSS heading and paragraph style rules in :where():not() when $allow-exclusion is true */ -/* ASSERT: */ -/* OUTPUT */ -.test-output :where(h1):not(:where([data-no-typography], [data-no-typography] *)) { - font-family: var(--ig-h1-font-family, var(--ig-font-family)); - font-size: var(--ig-h1-font-size); - font-weight: var(--ig-h1-font-weight); - font-style: var(--ig-h1-font-style); - line-height: var(--ig-h1-line-height); - letter-spacing: var(--ig-h1-letter-spacing); - text-transform: var(--ig-h1-text-transform); - margin-top: var(--ig-h1-margin-top); - margin-bottom: var(--ig-h1-margin-bottom); -} -.test-output :where(h2):not(:where([data-no-typography], [data-no-typography] *)) { - font-family: var(--ig-h2-font-family, var(--ig-font-family)); - font-size: var(--ig-h2-font-size); - font-weight: var(--ig-h2-font-weight); - font-style: var(--ig-h2-font-style); - line-height: var(--ig-h2-line-height); - letter-spacing: var(--ig-h2-letter-spacing); - text-transform: var(--ig-h2-text-transform); - margin-top: var(--ig-h2-margin-top); - margin-bottom: var(--ig-h2-margin-bottom); -} -.test-output :where(h3):not(:where([data-no-typography], [data-no-typography] *)) { - font-family: var(--ig-h3-font-family, var(--ig-font-family)); - font-size: var(--ig-h3-font-size); - font-weight: var(--ig-h3-font-weight); - font-style: var(--ig-h3-font-style); - line-height: var(--ig-h3-line-height); - letter-spacing: var(--ig-h3-letter-spacing); - text-transform: var(--ig-h3-text-transform); - margin-top: var(--ig-h3-margin-top); - margin-bottom: var(--ig-h3-margin-bottom); -} -.test-output :where(h4):not(:where([data-no-typography], [data-no-typography] *)) { - font-family: var(--ig-h4-font-family, var(--ig-font-family)); - font-size: var(--ig-h4-font-size); - font-weight: var(--ig-h4-font-weight); - font-style: var(--ig-h4-font-style); - line-height: var(--ig-h4-line-height); - letter-spacing: var(--ig-h4-letter-spacing); - text-transform: var(--ig-h4-text-transform); - margin-top: var(--ig-h4-margin-top); - margin-bottom: var(--ig-h4-margin-bottom); -} -.test-output :where(h5):not(:where([data-no-typography], [data-no-typography] *)) { - font-family: var(--ig-h5-font-family, var(--ig-font-family)); - font-size: var(--ig-h5-font-size); - font-weight: var(--ig-h5-font-weight); - font-style: var(--ig-h5-font-style); - line-height: var(--ig-h5-line-height); - letter-spacing: var(--ig-h5-letter-spacing); - text-transform: var(--ig-h5-text-transform); - margin-top: var(--ig-h5-margin-top); - margin-bottom: var(--ig-h5-margin-bottom); -} -.test-output :where(h6):not(:where([data-no-typography], [data-no-typography] *)) { - font-family: var(--ig-h6-font-family, var(--ig-font-family)); - font-size: var(--ig-h6-font-size); - font-weight: var(--ig-h6-font-weight); - font-style: var(--ig-h6-font-style); - line-height: var(--ig-h6-line-height); - letter-spacing: var(--ig-h6-letter-spacing); - text-transform: var(--ig-h6-text-transform); - margin-top: var(--ig-h6-margin-top); - margin-bottom: var(--ig-h6-margin-bottom); -} -.test-output :where(p):not(:where([data-no-typography], [data-no-typography] *)) { - font-family: var(--ig-body-1-font-family, var(--ig-font-family)); - font-size: var(--ig-body-1-font-size); - font-weight: var(--ig-body-1-font-weight); - font-style: var(--ig-body-1-font-style); - line-height: var(--ig-body-1-line-height); - letter-spacing: var(--ig-body-1-letter-spacing); - text-transform: var(--ig-body-1-text-transform); - margin-top: var(--ig-body-1-margin-top); - margin-bottom: var(--ig-body-1-margin-bottom); -} - -/* END_OUTPUT */ -/* EXPECTED */ -.test-output :where(h1):not(:where([data-no-typography], [data-no-typography] *)) { - font-family: var(--ig-h1-font-family, var(--ig-font-family)); - font-size: var(--ig-h1-font-size); - font-weight: var(--ig-h1-font-weight); - font-style: var(--ig-h1-font-style); - line-height: var(--ig-h1-line-height); - letter-spacing: var(--ig-h1-letter-spacing); - text-transform: var(--ig-h1-text-transform); - margin-top: var(--ig-h1-margin-top); - margin-bottom: var(--ig-h1-margin-bottom); -} -.test-output :where(h2):not(:where([data-no-typography], [data-no-typography] *)) { - font-family: var(--ig-h2-font-family, var(--ig-font-family)); - font-size: var(--ig-h2-font-size); - font-weight: var(--ig-h2-font-weight); - font-style: var(--ig-h2-font-style); - line-height: var(--ig-h2-line-height); - letter-spacing: var(--ig-h2-letter-spacing); - text-transform: var(--ig-h2-text-transform); - margin-top: var(--ig-h2-margin-top); - margin-bottom: var(--ig-h2-margin-bottom); -} -.test-output :where(h3):not(:where([data-no-typography], [data-no-typography] *)) { - font-family: var(--ig-h3-font-family, var(--ig-font-family)); - font-size: var(--ig-h3-font-size); - font-weight: var(--ig-h3-font-weight); - font-style: var(--ig-h3-font-style); - line-height: var(--ig-h3-line-height); - letter-spacing: var(--ig-h3-letter-spacing); - text-transform: var(--ig-h3-text-transform); - margin-top: var(--ig-h3-margin-top); - margin-bottom: var(--ig-h3-margin-bottom); -} -.test-output :where(h4):not(:where([data-no-typography], [data-no-typography] *)) { - font-family: var(--ig-h4-font-family, var(--ig-font-family)); - font-size: var(--ig-h4-font-size); - font-weight: var(--ig-h4-font-weight); - font-style: var(--ig-h4-font-style); - line-height: var(--ig-h4-line-height); - letter-spacing: var(--ig-h4-letter-spacing); - text-transform: var(--ig-h4-text-transform); - margin-top: var(--ig-h4-margin-top); - margin-bottom: var(--ig-h4-margin-bottom); -} -.test-output :where(h5):not(:where([data-no-typography], [data-no-typography] *)) { - font-family: var(--ig-h5-font-family, var(--ig-font-family)); - font-size: var(--ig-h5-font-size); - font-weight: var(--ig-h5-font-weight); - font-style: var(--ig-h5-font-style); - line-height: var(--ig-h5-line-height); - letter-spacing: var(--ig-h5-letter-spacing); - text-transform: var(--ig-h5-text-transform); - margin-top: var(--ig-h5-margin-top); - margin-bottom: var(--ig-h5-margin-bottom); -} -.test-output :where(h6):not(:where([data-no-typography], [data-no-typography] *)) { - font-family: var(--ig-h6-font-family, var(--ig-font-family)); - font-size: var(--ig-h6-font-size); - font-weight: var(--ig-h6-font-weight); - font-style: var(--ig-h6-font-style); - line-height: var(--ig-h6-line-height); - letter-spacing: var(--ig-h6-letter-spacing); - text-transform: var(--ig-h6-text-transform); - margin-top: var(--ig-h6-margin-top); - margin-bottom: var(--ig-h6-margin-bottom); -} -.test-output :where(p):not(:where([data-no-typography], [data-no-typography] *)) { - font-family: var(--ig-body-1-font-family, var(--ig-font-family)); - font-size: var(--ig-body-1-font-size); - font-weight: var(--ig-body-1-font-weight); - font-style: var(--ig-body-1-font-style); - line-height: var(--ig-body-1-line-height); - letter-spacing: var(--ig-body-1-letter-spacing); - text-transform: var(--ig-body-1-text-transform); - margin-top: var(--ig-body-1-margin-top); - margin-bottom: var(--ig-body-1-margin-bottom); -} - -/* END_EXPECTED */ -/* END_ASSERT */ -/* */ -/* Test: should include typography variables in the :root scope */ -/* ASSERT: */ -/* OUTPUT */ -:root { - --ig-font-family: Roboto, sans-serif; - --ig-base-font-size: 16px; - --ig-h1-font-size: 96px; - --ig-h1-font-weight: normal; - --ig-h1-font-style: normal; - --ig-h1-line-height: normal; - --ig-h1-letter-spacing: normal; - --ig-h1-text-transform: none; - --ig-h1-margin-top: 0; - --ig-h1-margin-bottom: 0; - --ig-h2-font-size: 70px; - --ig-h2-font-weight: normal; - --ig-h2-font-style: normal; - --ig-h2-line-height: normal; - --ig-h2-letter-spacing: normal; - --ig-h2-text-transform: none; - --ig-h2-margin-top: 0; - --ig-h2-margin-bottom: 0; - --ig-h3-font-size: 40px; - --ig-h3-font-weight: normal; - --ig-h3-font-style: normal; - --ig-h3-line-height: normal; - --ig-h3-letter-spacing: normal; - --ig-h3-text-transform: none; - --ig-h3-margin-top: 0; - --ig-h3-margin-bottom: 0; - --ig-h4-font-size: 30px; - --ig-h4-font-weight: normal; - --ig-h4-font-style: normal; - --ig-h4-line-height: normal; - --ig-h4-letter-spacing: normal; - --ig-h4-text-transform: none; - --ig-h4-margin-top: 0; - --ig-h4-margin-bottom: 0; - --ig-h5-font-size: 20px; - --ig-h5-font-weight: normal; - --ig-h5-font-style: normal; - --ig-h5-line-height: normal; - --ig-h5-letter-spacing: normal; - --ig-h5-text-transform: none; - --ig-h5-margin-top: 0; - --ig-h5-margin-bottom: 0; - --ig-h6-font-size: 10px; - --ig-h6-font-weight: normal; - --ig-h6-font-style: normal; - --ig-h6-line-height: normal; - --ig-h6-letter-spacing: normal; - --ig-h6-text-transform: none; - --ig-h6-margin-top: 0; - --ig-h6-margin-bottom: 0; - --ig-subtitle-1-font-size: 96px; - --ig-subtitle-1-font-weight: normal; - --ig-subtitle-1-font-style: normal; - --ig-subtitle-1-line-height: normal; - --ig-subtitle-1-letter-spacing: normal; - --ig-subtitle-1-text-transform: none; - --ig-subtitle-1-margin-top: 0; - --ig-subtitle-1-margin-bottom: 0; - --ig-subtitle-2-font-size: 70px; - --ig-subtitle-2-font-weight: normal; - --ig-subtitle-2-font-style: normal; - --ig-subtitle-2-line-height: normal; - --ig-subtitle-2-letter-spacing: normal; - --ig-subtitle-2-text-transform: none; - --ig-subtitle-2-margin-top: 0; - --ig-subtitle-2-margin-bottom: 0; - --ig-body-1-font-size: 40px; - --ig-body-1-font-weight: normal; - --ig-body-1-font-style: normal; - --ig-body-1-line-height: normal; - --ig-body-1-letter-spacing: normal; - --ig-body-1-text-transform: none; - --ig-body-1-margin-top: 0; - --ig-body-1-margin-bottom: 0; - --ig-body-2-font-size: 30px; - --ig-body-2-font-weight: normal; - --ig-body-2-font-style: normal; - --ig-body-2-line-height: normal; - --ig-body-2-letter-spacing: normal; - --ig-body-2-text-transform: none; - --ig-body-2-margin-top: 0; - --ig-body-2-margin-bottom: 0; - --ig-button-font-size: 20px; - --ig-button-font-weight: normal; - --ig-button-font-style: normal; - --ig-button-line-height: normal; - --ig-button-letter-spacing: normal; - --ig-button-text-transform: none; - --ig-button-margin-top: 0; - --ig-button-margin-bottom: 0; - --ig-caption-font-size: 10px; - --ig-caption-font-weight: normal; - --ig-caption-font-style: normal; - --ig-caption-line-height: normal; - --ig-caption-letter-spacing: normal; - --ig-caption-text-transform: none; - --ig-caption-margin-top: 0; - --ig-caption-margin-bottom: 0; - --ig-overline-font-size: 10px; - --ig-overline-font-weight: normal; - --ig-overline-font-style: normal; - --ig-overline-line-height: normal; - --ig-overline-letter-spacing: normal; - --ig-overline-text-transform: none; - --ig-overline-margin-top: 0; - --ig-overline-margin-bottom: 0; -} - -.ig-typography h1 { - font-family: var(--ig-h1-font-family, var(--ig-font-family)); - font-size: var(--ig-h1-font-size); - font-weight: var(--ig-h1-font-weight); - font-style: var(--ig-h1-font-style); - line-height: var(--ig-h1-line-height); - letter-spacing: var(--ig-h1-letter-spacing); - text-transform: var(--ig-h1-text-transform); - margin-top: var(--ig-h1-margin-top); - margin-bottom: var(--ig-h1-margin-bottom); -} -.ig-typography h2 { - font-family: var(--ig-h2-font-family, var(--ig-font-family)); - font-size: var(--ig-h2-font-size); - font-weight: var(--ig-h2-font-weight); - font-style: var(--ig-h2-font-style); - line-height: var(--ig-h2-line-height); - letter-spacing: var(--ig-h2-letter-spacing); - text-transform: var(--ig-h2-text-transform); - margin-top: var(--ig-h2-margin-top); - margin-bottom: var(--ig-h2-margin-bottom); -} -.ig-typography h3 { - font-family: var(--ig-h3-font-family, var(--ig-font-family)); - font-size: var(--ig-h3-font-size); - font-weight: var(--ig-h3-font-weight); - font-style: var(--ig-h3-font-style); - line-height: var(--ig-h3-line-height); - letter-spacing: var(--ig-h3-letter-spacing); - text-transform: var(--ig-h3-text-transform); - margin-top: var(--ig-h3-margin-top); - margin-bottom: var(--ig-h3-margin-bottom); -} -.ig-typography h4 { - font-family: var(--ig-h4-font-family, var(--ig-font-family)); - font-size: var(--ig-h4-font-size); - font-weight: var(--ig-h4-font-weight); - font-style: var(--ig-h4-font-style); - line-height: var(--ig-h4-line-height); - letter-spacing: var(--ig-h4-letter-spacing); - text-transform: var(--ig-h4-text-transform); - margin-top: var(--ig-h4-margin-top); - margin-bottom: var(--ig-h4-margin-bottom); -} -.ig-typography h5 { - font-family: var(--ig-h5-font-family, var(--ig-font-family)); - font-size: var(--ig-h5-font-size); - font-weight: var(--ig-h5-font-weight); - font-style: var(--ig-h5-font-style); - line-height: var(--ig-h5-line-height); - letter-spacing: var(--ig-h5-letter-spacing); - text-transform: var(--ig-h5-text-transform); - margin-top: var(--ig-h5-margin-top); - margin-bottom: var(--ig-h5-margin-bottom); -} -.ig-typography h6 { - font-family: var(--ig-h6-font-family, var(--ig-font-family)); - font-size: var(--ig-h6-font-size); - font-weight: var(--ig-h6-font-weight); - font-style: var(--ig-h6-font-style); - line-height: var(--ig-h6-line-height); - letter-spacing: var(--ig-h6-letter-spacing); - text-transform: var(--ig-h6-text-transform); - margin-top: var(--ig-h6-margin-top); - margin-bottom: var(--ig-h6-margin-bottom); -} -.ig-typography p { - font-family: var(--ig-body-1-font-family, var(--ig-font-family)); - font-size: var(--ig-body-1-font-size); - font-weight: var(--ig-body-1-font-weight); - font-style: var(--ig-body-1-font-style); - line-height: var(--ig-body-1-line-height); - letter-spacing: var(--ig-body-1-letter-spacing); - text-transform: var(--ig-body-1-text-transform); - margin-top: var(--ig-body-1-margin-top); - margin-bottom: var(--ig-body-1-margin-bottom); -} -.ig-typography .ig-typography__h1 { - font-family: var(--ig-h1-font-family, var(--ig-font-family)); - font-size: var(--ig-h1-font-size); - font-weight: var(--ig-h1-font-weight); - font-style: var(--ig-h1-font-style); - line-height: var(--ig-h1-line-height); - letter-spacing: var(--ig-h1-letter-spacing); - text-transform: var(--ig-h1-text-transform); - margin-top: var(--ig-h1-margin-top); - margin-bottom: var(--ig-h1-margin-bottom); -} -.ig-typography .ig-typography__h2 { - font-family: var(--ig-h2-font-family, var(--ig-font-family)); - font-size: var(--ig-h2-font-size); - font-weight: var(--ig-h2-font-weight); - font-style: var(--ig-h2-font-style); - line-height: var(--ig-h2-line-height); - letter-spacing: var(--ig-h2-letter-spacing); - text-transform: var(--ig-h2-text-transform); - margin-top: var(--ig-h2-margin-top); - margin-bottom: var(--ig-h2-margin-bottom); -} -.ig-typography .ig-typography__h3 { - font-family: var(--ig-h3-font-family, var(--ig-font-family)); - font-size: var(--ig-h3-font-size); - font-weight: var(--ig-h3-font-weight); - font-style: var(--ig-h3-font-style); - line-height: var(--ig-h3-line-height); - letter-spacing: var(--ig-h3-letter-spacing); - text-transform: var(--ig-h3-text-transform); - margin-top: var(--ig-h3-margin-top); - margin-bottom: var(--ig-h3-margin-bottom); -} -.ig-typography .ig-typography__h4 { - font-family: var(--ig-h4-font-family, var(--ig-font-family)); - font-size: var(--ig-h4-font-size); - font-weight: var(--ig-h4-font-weight); - font-style: var(--ig-h4-font-style); - line-height: var(--ig-h4-line-height); - letter-spacing: var(--ig-h4-letter-spacing); - text-transform: var(--ig-h4-text-transform); - margin-top: var(--ig-h4-margin-top); - margin-bottom: var(--ig-h4-margin-bottom); -} -.ig-typography .ig-typography__h5 { - font-family: var(--ig-h5-font-family, var(--ig-font-family)); - font-size: var(--ig-h5-font-size); - font-weight: var(--ig-h5-font-weight); - font-style: var(--ig-h5-font-style); - line-height: var(--ig-h5-line-height); - letter-spacing: var(--ig-h5-letter-spacing); - text-transform: var(--ig-h5-text-transform); - margin-top: var(--ig-h5-margin-top); - margin-bottom: var(--ig-h5-margin-bottom); -} -.ig-typography .ig-typography__h6 { - font-family: var(--ig-h6-font-family, var(--ig-font-family)); - font-size: var(--ig-h6-font-size); - font-weight: var(--ig-h6-font-weight); - font-style: var(--ig-h6-font-style); - line-height: var(--ig-h6-line-height); - letter-spacing: var(--ig-h6-letter-spacing); - text-transform: var(--ig-h6-text-transform); - margin-top: var(--ig-h6-margin-top); - margin-bottom: var(--ig-h6-margin-bottom); -} -.ig-typography .ig-typography__subtitle-1 { - font-family: var(--ig-subtitle-1-font-family, var(--ig-font-family)); - font-size: var(--ig-subtitle-1-font-size); - font-weight: var(--ig-subtitle-1-font-weight); - font-style: var(--ig-subtitle-1-font-style); - line-height: var(--ig-subtitle-1-line-height); - letter-spacing: var(--ig-subtitle-1-letter-spacing); - text-transform: var(--ig-subtitle-1-text-transform); - margin-top: var(--ig-subtitle-1-margin-top); - margin-bottom: var(--ig-subtitle-1-margin-bottom); -} -.ig-typography .ig-typography__subtitle-2 { - font-family: var(--ig-subtitle-2-font-family, var(--ig-font-family)); - font-size: var(--ig-subtitle-2-font-size); - font-weight: var(--ig-subtitle-2-font-weight); - font-style: var(--ig-subtitle-2-font-style); - line-height: var(--ig-subtitle-2-line-height); - letter-spacing: var(--ig-subtitle-2-letter-spacing); - text-transform: var(--ig-subtitle-2-text-transform); - margin-top: var(--ig-subtitle-2-margin-top); - margin-bottom: var(--ig-subtitle-2-margin-bottom); -} -.ig-typography .ig-typography__body-1 { - font-family: var(--ig-body-1-font-family, var(--ig-font-family)); - font-size: var(--ig-body-1-font-size); - font-weight: var(--ig-body-1-font-weight); - font-style: var(--ig-body-1-font-style); - line-height: var(--ig-body-1-line-height); - letter-spacing: var(--ig-body-1-letter-spacing); - text-transform: var(--ig-body-1-text-transform); - margin-top: var(--ig-body-1-margin-top); - margin-bottom: var(--ig-body-1-margin-bottom); -} -.ig-typography .ig-typography__body-2 { - font-family: var(--ig-body-2-font-family, var(--ig-font-family)); - font-size: var(--ig-body-2-font-size); - font-weight: var(--ig-body-2-font-weight); - font-style: var(--ig-body-2-font-style); - line-height: var(--ig-body-2-line-height); - letter-spacing: var(--ig-body-2-letter-spacing); - text-transform: var(--ig-body-2-text-transform); - margin-top: var(--ig-body-2-margin-top); - margin-bottom: var(--ig-body-2-margin-bottom); -} -.ig-typography .ig-typography__button { - font-family: var(--ig-button-font-family, var(--ig-font-family)); - font-size: var(--ig-button-font-size); - font-weight: var(--ig-button-font-weight); - font-style: var(--ig-button-font-style); - line-height: var(--ig-button-line-height); - letter-spacing: var(--ig-button-letter-spacing); - text-transform: var(--ig-button-text-transform); - margin-top: var(--ig-button-margin-top); - margin-bottom: var(--ig-button-margin-bottom); -} -.ig-typography .ig-typography__caption { - font-family: var(--ig-caption-font-family, var(--ig-font-family)); - font-size: var(--ig-caption-font-size); - font-weight: var(--ig-caption-font-weight); - font-style: var(--ig-caption-font-style); - line-height: var(--ig-caption-line-height); - letter-spacing: var(--ig-caption-letter-spacing); - text-transform: var(--ig-caption-text-transform); - margin-top: var(--ig-caption-margin-top); - margin-bottom: var(--ig-caption-margin-bottom); -} -.ig-typography .ig-typography__overline { - font-family: var(--ig-overline-font-family, var(--ig-font-family)); - font-size: var(--ig-overline-font-size); - font-weight: var(--ig-overline-font-weight); - font-style: var(--ig-overline-font-style); - line-height: var(--ig-overline-line-height); - letter-spacing: var(--ig-overline-letter-spacing); - text-transform: var(--ig-overline-text-transform); - margin-top: var(--ig-overline-margin-top); - margin-bottom: var(--ig-overline-margin-bottom); -} - -/* END_OUTPUT */ -/* CONTAINED */ -:root { - --ig-font-family: Roboto, sans-serif; - --ig-h1-font-size: 96px; - --ig-h1-font-weight: normal; - --ig-h1-font-style: normal; - --ig-h1-line-height: normal; - --ig-h1-letter-spacing: normal; - --ig-h1-text-transform: none; - --ig-h1-margin-top: 0; - --ig-h1-margin-bottom: 0; - --ig-h2-font-size: 70px; - --ig-h2-font-weight: normal; - --ig-h2-font-style: normal; - --ig-h2-line-height: normal; - --ig-h2-letter-spacing: normal; - --ig-h2-text-transform: none; - --ig-h2-margin-top: 0; - --ig-h2-margin-bottom: 0; - --ig-h3-font-size: 40px; - --ig-h3-font-weight: normal; - --ig-h3-font-style: normal; - --ig-h3-line-height: normal; - --ig-h3-letter-spacing: normal; - --ig-h3-text-transform: none; - --ig-h3-margin-top: 0; - --ig-h3-margin-bottom: 0; - --ig-h4-font-size: 30px; - --ig-h4-font-weight: normal; - --ig-h4-font-style: normal; - --ig-h4-line-height: normal; - --ig-h4-letter-spacing: normal; - --ig-h4-text-transform: none; - --ig-h4-margin-top: 0; - --ig-h4-margin-bottom: 0; - --ig-h5-font-size: 20px; - --ig-h5-font-weight: normal; - --ig-h5-font-style: normal; - --ig-h5-line-height: normal; - --ig-h5-letter-spacing: normal; - --ig-h5-text-transform: none; - --ig-h5-margin-top: 0; - --ig-h5-margin-bottom: 0; - --ig-h6-font-size: 10px; - --ig-h6-font-weight: normal; - --ig-h6-font-style: normal; - --ig-h6-line-height: normal; - --ig-h6-letter-spacing: normal; - --ig-h6-text-transform: none; - --ig-h6-margin-top: 0; - --ig-h6-margin-bottom: 0; - --ig-subtitle-1-font-size: 96px; - --ig-subtitle-1-font-weight: normal; - --ig-subtitle-1-font-style: normal; - --ig-subtitle-1-line-height: normal; - --ig-subtitle-1-letter-spacing: normal; - --ig-subtitle-1-text-transform: none; - --ig-subtitle-1-margin-top: 0; - --ig-subtitle-1-margin-bottom: 0; - --ig-subtitle-2-font-size: 70px; - --ig-subtitle-2-font-weight: normal; - --ig-subtitle-2-font-style: normal; - --ig-subtitle-2-line-height: normal; - --ig-subtitle-2-letter-spacing: normal; - --ig-subtitle-2-text-transform: none; - --ig-subtitle-2-margin-top: 0; - --ig-subtitle-2-margin-bottom: 0; - --ig-body-1-font-size: 40px; - --ig-body-1-font-weight: normal; - --ig-body-1-font-style: normal; - --ig-body-1-line-height: normal; - --ig-body-1-letter-spacing: normal; - --ig-body-1-text-transform: none; - --ig-body-1-margin-top: 0; - --ig-body-1-margin-bottom: 0; - --ig-body-2-font-size: 30px; - --ig-body-2-font-weight: normal; - --ig-body-2-font-style: normal; - --ig-body-2-line-height: normal; - --ig-body-2-letter-spacing: normal; - --ig-body-2-text-transform: none; - --ig-body-2-margin-top: 0; - --ig-body-2-margin-bottom: 0; - --ig-button-font-size: 20px; - --ig-button-font-weight: normal; - --ig-button-font-style: normal; - --ig-button-line-height: normal; - --ig-button-letter-spacing: normal; - --ig-button-text-transform: none; - --ig-button-margin-top: 0; - --ig-button-margin-bottom: 0; - --ig-caption-font-size: 10px; - --ig-caption-font-weight: normal; - --ig-caption-font-style: normal; - --ig-caption-line-height: normal; - --ig-caption-letter-spacing: normal; - --ig-caption-text-transform: none; - --ig-caption-margin-top: 0; - --ig-caption-margin-bottom: 0; - --ig-overline-font-size: 10px; - --ig-overline-font-weight: normal; - --ig-overline-font-style: normal; - --ig-overline-line-height: normal; - --ig-overline-letter-spacing: normal; - --ig-overline-text-transform: none; - --ig-overline-margin-top: 0; - --ig-overline-margin-bottom: 0; -} - -/* END_CONTAINED */ -/* END_ASSERT */ -/* */ -/* Test: should include typography variables for a parent scope */ -/* ASSERT: */ -/* OUTPUT */ -.test-output { - --ig-font-family: Roboto, sans-serif; - --ig-base-font-size: 16px; - --ig-h1-font-size: 96px; - --ig-h1-font-weight: normal; - --ig-h1-font-style: normal; - --ig-h1-line-height: normal; - --ig-h1-letter-spacing: normal; - --ig-h1-text-transform: none; - --ig-h1-margin-top: 0; - --ig-h1-margin-bottom: 0; - --ig-h2-font-size: 70px; - --ig-h2-font-weight: normal; - --ig-h2-font-style: normal; - --ig-h2-line-height: normal; - --ig-h2-letter-spacing: normal; - --ig-h2-text-transform: none; - --ig-h2-margin-top: 0; - --ig-h2-margin-bottom: 0; - --ig-h3-font-size: 40px; - --ig-h3-font-weight: normal; - --ig-h3-font-style: normal; - --ig-h3-line-height: normal; - --ig-h3-letter-spacing: normal; - --ig-h3-text-transform: none; - --ig-h3-margin-top: 0; - --ig-h3-margin-bottom: 0; - --ig-h4-font-size: 30px; - --ig-h4-font-weight: normal; - --ig-h4-font-style: normal; - --ig-h4-line-height: normal; - --ig-h4-letter-spacing: normal; - --ig-h4-text-transform: none; - --ig-h4-margin-top: 0; - --ig-h4-margin-bottom: 0; - --ig-h5-font-size: 20px; - --ig-h5-font-weight: normal; - --ig-h5-font-style: normal; - --ig-h5-line-height: normal; - --ig-h5-letter-spacing: normal; - --ig-h5-text-transform: none; - --ig-h5-margin-top: 0; - --ig-h5-margin-bottom: 0; - --ig-h6-font-size: 10px; - --ig-h6-font-weight: normal; - --ig-h6-font-style: normal; - --ig-h6-line-height: normal; - --ig-h6-letter-spacing: normal; - --ig-h6-text-transform: none; - --ig-h6-margin-top: 0; - --ig-h6-margin-bottom: 0; - --ig-subtitle-1-font-size: 96px; - --ig-subtitle-1-font-weight: normal; - --ig-subtitle-1-font-style: normal; - --ig-subtitle-1-line-height: normal; - --ig-subtitle-1-letter-spacing: normal; - --ig-subtitle-1-text-transform: none; - --ig-subtitle-1-margin-top: 0; - --ig-subtitle-1-margin-bottom: 0; - --ig-subtitle-2-font-size: 70px; - --ig-subtitle-2-font-weight: normal; - --ig-subtitle-2-font-style: normal; - --ig-subtitle-2-line-height: normal; - --ig-subtitle-2-letter-spacing: normal; - --ig-subtitle-2-text-transform: none; - --ig-subtitle-2-margin-top: 0; - --ig-subtitle-2-margin-bottom: 0; - --ig-body-1-font-size: 40px; - --ig-body-1-font-weight: normal; - --ig-body-1-font-style: normal; - --ig-body-1-line-height: normal; - --ig-body-1-letter-spacing: normal; - --ig-body-1-text-transform: none; - --ig-body-1-margin-top: 0; - --ig-body-1-margin-bottom: 0; - --ig-body-2-font-size: 30px; - --ig-body-2-font-weight: normal; - --ig-body-2-font-style: normal; - --ig-body-2-line-height: normal; - --ig-body-2-letter-spacing: normal; - --ig-body-2-text-transform: none; - --ig-body-2-margin-top: 0; - --ig-body-2-margin-bottom: 0; - --ig-button-font-size: 20px; - --ig-button-font-weight: normal; - --ig-button-font-style: normal; - --ig-button-line-height: normal; - --ig-button-letter-spacing: normal; - --ig-button-text-transform: none; - --ig-button-margin-top: 0; - --ig-button-margin-bottom: 0; - --ig-caption-font-size: 10px; - --ig-caption-font-weight: normal; - --ig-caption-font-style: normal; - --ig-caption-line-height: normal; - --ig-caption-letter-spacing: normal; - --ig-caption-text-transform: none; - --ig-caption-margin-top: 0; - --ig-caption-margin-bottom: 0; - --ig-overline-font-size: 10px; - --ig-overline-font-weight: normal; - --ig-overline-font-style: normal; - --ig-overline-line-height: normal; - --ig-overline-letter-spacing: normal; - --ig-overline-text-transform: none; - --ig-overline-margin-top: 0; - --ig-overline-margin-bottom: 0; -} - -/* END_OUTPUT */ -/* EXPECTED */ -.test-output { - --ig-font-family: Roboto, sans-serif; - --ig-base-font-size: 16px; - --ig-h1-font-size: 96px; - --ig-h1-font-weight: normal; - --ig-h1-font-style: normal; - --ig-h1-line-height: normal; - --ig-h1-letter-spacing: normal; - --ig-h1-text-transform: none; - --ig-h1-margin-top: 0; - --ig-h1-margin-bottom: 0; - --ig-h2-font-size: 70px; - --ig-h2-font-weight: normal; - --ig-h2-font-style: normal; - --ig-h2-line-height: normal; - --ig-h2-letter-spacing: normal; - --ig-h2-text-transform: none; - --ig-h2-margin-top: 0; - --ig-h2-margin-bottom: 0; - --ig-h3-font-size: 40px; - --ig-h3-font-weight: normal; - --ig-h3-font-style: normal; - --ig-h3-line-height: normal; - --ig-h3-letter-spacing: normal; - --ig-h3-text-transform: none; - --ig-h3-margin-top: 0; - --ig-h3-margin-bottom: 0; - --ig-h4-font-size: 30px; - --ig-h4-font-weight: normal; - --ig-h4-font-style: normal; - --ig-h4-line-height: normal; - --ig-h4-letter-spacing: normal; - --ig-h4-text-transform: none; - --ig-h4-margin-top: 0; - --ig-h4-margin-bottom: 0; - --ig-h5-font-size: 20px; - --ig-h5-font-weight: normal; - --ig-h5-font-style: normal; - --ig-h5-line-height: normal; - --ig-h5-letter-spacing: normal; - --ig-h5-text-transform: none; - --ig-h5-margin-top: 0; - --ig-h5-margin-bottom: 0; - --ig-h6-font-size: 10px; - --ig-h6-font-weight: normal; - --ig-h6-font-style: normal; - --ig-h6-line-height: normal; - --ig-h6-letter-spacing: normal; - --ig-h6-text-transform: none; - --ig-h6-margin-top: 0; - --ig-h6-margin-bottom: 0; - --ig-subtitle-1-font-size: 96px; - --ig-subtitle-1-font-weight: normal; - --ig-subtitle-1-font-style: normal; - --ig-subtitle-1-line-height: normal; - --ig-subtitle-1-letter-spacing: normal; - --ig-subtitle-1-text-transform: none; - --ig-subtitle-1-margin-top: 0; - --ig-subtitle-1-margin-bottom: 0; - --ig-subtitle-2-font-size: 70px; - --ig-subtitle-2-font-weight: normal; - --ig-subtitle-2-font-style: normal; - --ig-subtitle-2-line-height: normal; - --ig-subtitle-2-letter-spacing: normal; - --ig-subtitle-2-text-transform: none; - --ig-subtitle-2-margin-top: 0; - --ig-subtitle-2-margin-bottom: 0; - --ig-body-1-font-size: 40px; - --ig-body-1-font-weight: normal; - --ig-body-1-font-style: normal; - --ig-body-1-line-height: normal; - --ig-body-1-letter-spacing: normal; - --ig-body-1-text-transform: none; - --ig-body-1-margin-top: 0; - --ig-body-1-margin-bottom: 0; - --ig-body-2-font-size: 30px; - --ig-body-2-font-weight: normal; - --ig-body-2-font-style: normal; - --ig-body-2-line-height: normal; - --ig-body-2-letter-spacing: normal; - --ig-body-2-text-transform: none; - --ig-body-2-margin-top: 0; - --ig-body-2-margin-bottom: 0; - --ig-button-font-size: 20px; - --ig-button-font-weight: normal; - --ig-button-font-style: normal; - --ig-button-line-height: normal; - --ig-button-letter-spacing: normal; - --ig-button-text-transform: none; - --ig-button-margin-top: 0; - --ig-button-margin-bottom: 0; - --ig-caption-font-size: 10px; - --ig-caption-font-weight: normal; - --ig-caption-font-style: normal; - --ig-caption-line-height: normal; - --ig-caption-letter-spacing: normal; - --ig-caption-text-transform: none; - --ig-caption-margin-top: 0; - --ig-caption-margin-bottom: 0; - --ig-overline-font-size: 10px; - --ig-overline-font-weight: normal; - --ig-overline-font-style: normal; - --ig-overline-line-height: normal; - --ig-overline-letter-spacing: normal; - --ig-overline-text-transform: none; - --ig-overline-margin-top: 0; - --ig-overline-margin-bottom: 0; -} - -/* END_EXPECTED */ -/* END_ASSERT */ -/* */ -/* */ -/* */ -/* # Module: Utilities */ -/* ------------------- */ -/* # Module: Utilities :: css */ -/* -------------------------- */ -/* Test: should expand shorthand properties */ -/* ✔ [assert-equal] should expand shorthand properties */ -/* */ -/* */ -/* # Module: Utilities :: meta */ -/* --------------------------- */ -/* Test: should resolve if the call context is the root of the stylesheet */ -/* ASSERT: */ -/* OUTPUT */ -.test-output { - content: true; -} - -/* END_OUTPUT */ -/* EXPECTED */ -.test-output { - content: true; -} - -/* END_EXPECTED */ -/* END_ASSERT */ -/* ASSERT: */ -/* OUTPUT */ -.test-output { - content: false; -} - -/* END_OUTPUT */ -/* EXPECTED */ -.test-output { - content: false; -} - -/* END_EXPECTED */ -/* END_ASSERT */ -/* */ -/* Test: should resolve if the call context is :host */ -/* ASSERT: */ -/* OUTPUT */ -:host { - content: true; -} - -/* END_OUTPUT */ -/* EXPECTED */ -:host { - content: true; -} - -/* END_EXPECTED */ -/* END_ASSERT */ -/* ASSERT: */ -/* OUTPUT */ -.test-output { - content: false; -} - -/* END_OUTPUT */ -/* EXPECTED */ -.test-output { - content: false; -} - -/* END_EXPECTED */ -/* END_ASSERT */ -/* */ -/* */ -/* # Module: Utilities :: map */ -/* -------------------------- */ -/* Test: should clean a map of null values */ -/* ✔ [assert-equal] should clean a map of null values */ -/* */ -/* Test: should merge two maps removing null values in the process */ -/* ✔ [assert-equal] should merge two maps removing null values in the process */ -/* */ -/* Test: should accumulate _meta keys when merging schema maps */ -/* ✔ [assert-equal] should accumulate _meta keys when merging schema maps */ -/* */ -/* Test: should fully replace nested property maps regardless of whether the override has _meta */ -/* ✔ [assert-equal] should fully replace nested property maps regardless of whether the override has _meta */ -/* ✔ [assert-equal] should fully replace nested property maps regardless of whether the override has _meta */ -/* */ -/* Test: should diff two maps resolving all unique values in the second map in the process */ -/* ✔ [assert-equal] should diff two maps resolving all unique values in the second map in the process */ -/* */ -/* Test: should prefix all keys in a map with a given string */ -/* ✔ [assert-equal] should prefix all keys in a map with a given string */ -/* */ -/* */ -/* # Module: Utilities :: math */ -/* --------------------------- */ -/* Test: returns a number to a fixed floating point */ -/* ✔ [assert-equal] returns a number to a fixed floating point */ -/* */ -/* Test: converts a number to string */ -/* ✔ [assert-equal] converts a number to string */ -/* */ -/* */ -/* # Module: Utilities :: string */ -/* ----------------------------- */ -/* Test: should split a string by a given separator into a list of values */ -/* ✔ [assert-equal] should split a string by a given separator into a list of values */ -/* */ -/* Test: should replace a search term in target string */ -/* ✔ [assert-equal] should replace a search term in target string */ -/* */ -/* Test: converts a string into a number */ -/* ✔ [assert-equal] converts a string into a number */ -/* ✔ [assert-equal] converts a string into a number */ -/* */ -/* */ -/* */ -/* # Module: Themes */ -/* ---------------- */ -/* # Module: Themes :: schemas */ -/* --------------------------- */ -/* Test: resolves util function values */ -/* ✔ [assert-equal] resolves util function values */ -/* ASSERT: */ -/* OUTPUT */ -igx-data-chart { - --title-padding-top: var(--igx-data-chart-title-padding-top, var(--ig-data-chart-title-padding-top, 4px)); - --title-padding-right: var(--igx-data-chart-title-padding-right, var(--ig-data-chart-title-padding-right, 8px)); - --title-padding-bottom: var(--igx-data-chart-title-padding-bottom, var(--ig-data-chart-title-padding-bottom, 4px)); - --title-padding-left: var(--igx-data-chart-title-padding-left, var(--ig-data-chart-title-padding-left, 8px)); - --ig-theme: material; - --ig-theme-variant: light; -} - -/* END_OUTPUT */ -/* EXPECTED */ -igx-data-chart { - --title-padding-top: var(--igx-data-chart-title-padding-top, var(--ig-data-chart-title-padding-top, 4px)); - --title-padding-right: var(--igx-data-chart-title-padding-right, var(--ig-data-chart-title-padding-right, 8px)); - --title-padding-bottom: var(--igx-data-chart-title-padding-bottom, var(--ig-data-chart-title-padding-bottom, 4px)); - --title-padding-left: var(--igx-data-chart-title-padding-left, var(--ig-data-chart-title-padding-left, 8px)); - --ig-theme: material; - --ig-theme-variant: light; -} - -/* END_EXPECTED */ -/* END_ASSERT */ -/* */ -/* Test: should resolve values from function instructions */ -/* ✔ [assert-equal] should resolve values from function instructions */ -/* ✔ [assert-equal] should resolve values from function instructions */ -/* */ -/* Test: should work with custom(handmade) palettes */ -/* ✔ [assert-equal] should work with custom(handmade) palettes */ -/* ✔ [assert-equal] should work with custom(handmade) palettes */ -/* */ -/* Test: should output theme maps from schema definitions */ -/* ✔ [assert-equal] should output theme maps from schema definitions */ -/* */ -/* Test: should include proper metadata in each component schema */ -/* ✔ [assert-true] Component schema for category-chart is missing metadata. */ -/* ✔ [assert-equal] Component schema for light material category-chart has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light material category-chart has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for category-chart is missing name metadata. */ -/* ✔ [assert-true] Component schema for data-chart is missing metadata. */ -/* ✔ [assert-equal] Component schema for light material data-chart has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light material data-chart has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for data-chart is missing name metadata. */ -/* ✔ [assert-true] Component schema for doughnut-chart is missing metadata. */ -/* ✔ [assert-equal] Component schema for light material doughnut-chart has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light material doughnut-chart has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for doughnut-chart is missing name metadata. */ -/* ✔ [assert-true] Component schema for financial-chart is missing metadata. */ -/* ✔ [assert-equal] Component schema for light material financial-chart has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light material financial-chart has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for financial-chart is missing name metadata. */ -/* ✔ [assert-true] Component schema for funnel-chart is missing metadata. */ -/* ✔ [assert-equal] Component schema for light material funnel-chart has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light material funnel-chart has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for funnel-chart is missing name metadata. */ -/* ✔ [assert-true] Component schema for linear-gauge is missing metadata. */ -/* ✔ [assert-equal] Component schema for light material linear-gauge has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light material linear-gauge has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for linear-gauge is missing name metadata. */ -/* ✔ [assert-true] Component schema for radial-gauge is missing metadata. */ -/* ✔ [assert-equal] Component schema for light material radial-gauge has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light material radial-gauge has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for radial-gauge is missing name metadata. */ -/* ✔ [assert-true] Component schema for geo-map is missing metadata. */ -/* ✔ [assert-equal] Component schema for light material geo-map has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light material geo-map has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for geo-map is missing name metadata. */ -/* ✔ [assert-true] Component schema for bullet-graph is missing metadata. */ -/* ✔ [assert-equal] Component schema for light material bullet-graph has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light material bullet-graph has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for bullet-graph is missing name metadata. */ -/* ✔ [assert-true] Component schema for pie-chart is missing metadata. */ -/* ✔ [assert-equal] Component schema for light material pie-chart has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light material pie-chart has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for pie-chart is missing name metadata. */ -/* ✔ [assert-true] Component schema for shape-chart is missing metadata. */ -/* ✔ [assert-equal] Component schema for light material shape-chart has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light material shape-chart has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for shape-chart is missing name metadata. */ -/* ✔ [assert-true] Component schema for sparkline is missing metadata. */ -/* ✔ [assert-equal] Component schema for light material sparkline has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light material sparkline has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for sparkline is missing name metadata. */ -/* ✔ [assert-true] Component schema for action-strip is missing metadata. */ -/* ✔ [assert-equal] Component schema for light material action-strip has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light material action-strip has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for action-strip is missing name metadata. */ -/* ✔ [assert-true] Component schema for avatar is missing metadata. */ -/* ✔ [assert-equal] Component schema for light material avatar has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light material avatar has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for avatar is missing name metadata. */ -/* ✔ [assert-true] Component schema for badge is missing metadata. */ -/* ✔ [assert-equal] Component schema for light material badge has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light material badge has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for badge is missing name metadata. */ -/* ✔ [assert-true] Component schema for banner is missing metadata. */ -/* ✔ [assert-equal] Component schema for light material banner has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light material banner has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for banner is missing name metadata. */ -/* ✔ [assert-true] Component schema for bottom-nav is missing metadata. */ -/* ✔ [assert-equal] Component schema for light material bottom-nav has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light material bottom-nav has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for bottom-nav is missing name metadata. */ -/* ✔ [assert-true] Component schema for flat button is missing metadata. */ -/* ✔ [assert-equal] Component schema for light material flat button has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light material flat button has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for flat button is missing name metadata. */ -/* ✔ [assert-true] Component schema for outlined button is missing metadata. */ -/* ✔ [assert-equal] Component schema for light material outlined button has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light material outlined button has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for outlined button is missing name metadata. */ -/* ✔ [assert-true] Component schema for contained button is missing metadata. */ -/* ✔ [assert-equal] Component schema for light material contained button has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light material contained button has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for contained button is missing name metadata. */ -/* ✔ [assert-true] Component schema for fab button is missing metadata. */ -/* ✔ [assert-equal] Component schema for light material fab button has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light material fab button has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for fab button is missing name metadata. */ -/* ✔ [assert-true] Component schema for button-group is missing metadata. */ -/* ✔ [assert-equal] Component schema for light material button-group has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light material button-group has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for button-group is missing name metadata. */ -/* ✔ [assert-true] Component schema for calendar is missing metadata. */ -/* ✔ [assert-equal] Component schema for light material calendar has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light material calendar has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for calendar is missing name metadata. */ -/* ✔ [assert-true] Component schema for card is missing metadata. */ -/* ✔ [assert-equal] Component schema for light material card has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light material card has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for card is missing name metadata. */ -/* ✔ [assert-true] Component schema for carousel is missing metadata. */ -/* ✔ [assert-equal] Component schema for light material carousel has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light material carousel has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for carousel is missing name metadata. */ -/* ✔ [assert-true] Component schema for chat is missing metadata. */ -/* ✔ [assert-equal] Component schema for light material chat has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light material chat has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for chat is missing name metadata. */ -/* ✔ [assert-true] Component schema for checkbox is missing metadata. */ -/* ✔ [assert-equal] Component schema for light material checkbox has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light material checkbox has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for checkbox is missing name metadata. */ -/* ✔ [assert-true] Component schema for chip is missing metadata. */ -/* ✔ [assert-equal] Component schema for light material chip has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light material chip has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for chip is missing name metadata. */ -/* ✔ [assert-true] Component schema for color-picker is missing metadata. */ -/* ✔ [assert-equal] Component schema for light material color-picker has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light material color-picker has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for color-picker is missing name metadata. */ -/* ✔ [assert-true] Component schema for column-actions is missing metadata. */ -/* ✔ [assert-equal] Component schema for light material column-actions has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light material column-actions has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for column-actions is missing name metadata. */ -/* ✔ [assert-true] Component schema for combo is missing metadata. */ -/* ✔ [assert-equal] Component schema for light material combo has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light material combo has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for combo is missing name metadata. */ -/* ✔ [assert-true] Component schema for date-picker is missing metadata. */ -/* ✔ [assert-equal] Component schema for light material date-picker has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light material date-picker has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for date-picker is missing name metadata. */ -/* ✔ [assert-true] Component schema for date-range is missing metadata. */ -/* ✔ [assert-equal] Component schema for light material date-range has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light material date-range has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for date-range is missing name metadata. */ -/* ✔ [assert-true] Component schema for dialog is missing metadata. */ -/* ✔ [assert-equal] Component schema for light material dialog has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light material dialog has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for dialog is missing name metadata. */ -/* ✔ [assert-true] Component schema for divider is missing metadata. */ -/* ✔ [assert-equal] Component schema for light material divider has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light material divider has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for divider is missing name metadata. */ -/* ✔ [assert-true] Component schema for dockmanager is missing metadata. */ -/* ✔ [assert-equal] Component schema for light material dockmanager has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light material dockmanager has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for dockmanager is missing name metadata. */ -/* ✔ [assert-true] Component schema for drop-down is missing metadata. */ -/* ✔ [assert-equal] Component schema for light material drop-down has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light material drop-down has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for drop-down is missing name metadata. */ -/* ✔ [assert-true] Component schema for expansion-panel is missing metadata. */ -/* ✔ [assert-equal] Component schema for light material expansion-panel has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light material expansion-panel has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for expansion-panel is missing name metadata. */ -/* ✔ [assert-true] Component schema for grid is missing metadata. */ -/* ✔ [assert-equal] Component schema for light material grid has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light material grid has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for grid is missing name metadata. */ -/* ✔ [assert-true] Component schema for grid-excel-filtering is missing metadata. */ -/* ✔ [assert-equal] Component schema for light material grid-excel-filtering has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light material grid-excel-filtering has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for grid-excel-filtering is missing name metadata. */ -/* ✔ [assert-true] Component schema for grid-filtering is missing metadata. */ -/* ✔ [assert-equal] Component schema for light material grid-filtering has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light material grid-filtering has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for grid-filtering is missing name metadata. */ -/* ✔ [assert-true] Component schema for grid-summary is missing metadata. */ -/* ✔ [assert-equal] Component schema for light material grid-summary has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light material grid-summary has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for grid-summary is missing name metadata. */ -/* ✔ [assert-true] Component schema for grid-toolbar is missing metadata. */ -/* ✔ [assert-equal] Component schema for light material grid-toolbar has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light material grid-toolbar has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for grid-toolbar is missing name metadata. */ -/* ✔ [assert-true] Component schema for highlight is missing metadata. */ -/* ✔ [assert-equal] Component schema for light material highlight has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light material highlight has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for highlight is missing name metadata. */ -/* ✔ [assert-true] Component schema for icon is missing metadata. */ -/* ✔ [assert-equal] Component schema for light material icon has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light material icon has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for icon is missing name metadata. */ -/* ✔ [assert-true] Component schema for flat icon-button is missing metadata. */ -/* ✔ [assert-equal] Component schema for light material flat icon-button has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light material flat icon-button has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for flat icon-button is missing name metadata. */ -/* ✔ [assert-true] Component schema for contained icon-button is missing metadata. */ -/* ✔ [assert-equal] Component schema for light material contained icon-button has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light material contained icon-button has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for contained icon-button is missing name metadata. */ -/* ✔ [assert-true] Component schema for outlined icon-button is missing metadata. */ -/* ✔ [assert-equal] Component schema for light material outlined icon-button has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light material outlined icon-button has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for outlined icon-button is missing name metadata. */ -/* ✔ [assert-true] Component schema for input-group is missing metadata. */ -/* ✔ [assert-equal] Component schema for light material input-group has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light material input-group has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for input-group is missing name metadata. */ -/* ✔ [assert-true] Component schema for label is missing metadata. */ -/* ✔ [assert-equal] Component schema for light material label has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light material label has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for label is missing name metadata. */ -/* ✔ [assert-true] Component schema for list is missing metadata. */ -/* ✔ [assert-equal] Component schema for light material list has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light material list has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for list is missing name metadata. */ -/* ✔ [assert-true] Component schema for navbar is missing metadata. */ -/* ✔ [assert-equal] Component schema for light material navbar has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light material navbar has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for navbar is missing name metadata. */ -/* ✔ [assert-true] Component schema for nav-drawer is missing metadata. */ -/* ✔ [assert-equal] Component schema for light material nav-drawer has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light material nav-drawer has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for nav-drawer is missing name metadata. */ -/* ✔ [assert-true] Component schema for overlay is missing metadata. */ -/* ✔ [assert-equal] Component schema for light material overlay has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light material overlay has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for overlay is missing name metadata. */ -/* ✔ [assert-true] Component schema for paginator is missing metadata. */ -/* ✔ [assert-equal] Component schema for light material paginator has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light material paginator has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for paginator is missing name metadata. */ -/* ✔ [assert-true] Component schema for pivot-data-selector is missing metadata. */ -/* ✔ [assert-equal] Component schema for light material pivot-data-selector has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light material pivot-data-selector has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for pivot-data-selector is missing name metadata. */ -/* ✔ [assert-true] Component schema for linear-bar is missing metadata. */ -/* ✔ [assert-equal] Component schema for light material linear-bar has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light material linear-bar has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for linear-bar is missing name metadata. */ -/* ✔ [assert-true] Component schema for circular-bar is missing metadata. */ -/* ✔ [assert-equal] Component schema for light material circular-bar has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light material circular-bar has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for circular-bar is missing name metadata. */ -/* ✔ [assert-true] Component schema for qr-code is missing metadata. */ -/* ✔ [assert-equal] Component schema for light material qr-code has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light material qr-code has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for qr-code is missing name metadata. */ -/* ✔ [assert-true] Component schema for query-builder is missing metadata. */ -/* ✔ [assert-equal] Component schema for light material query-builder has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light material query-builder has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for query-builder is missing name metadata. */ -/* ✔ [assert-true] Component schema for radio is missing metadata. */ -/* ✔ [assert-equal] Component schema for light material radio has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light material radio has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for radio is missing name metadata. */ -/* ✔ [assert-true] Component schema for rating is missing metadata. */ -/* ✔ [assert-equal] Component schema for light material rating has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light material rating has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for rating is missing name metadata. */ -/* ✔ [assert-true] Component schema for resize-indicator is missing metadata. */ -/* ✔ [assert-equal] Component schema for light material resize-indicator has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light material resize-indicator has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for resize-indicator is missing name metadata. */ -/* ✔ [assert-true] Component schema for ripple is missing metadata. */ -/* ✔ [assert-equal] Component schema for light material ripple has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light material ripple has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for ripple is missing name metadata. */ -/* ✔ [assert-true] Component schema for scrollbar is missing metadata. */ -/* ✔ [assert-equal] Component schema for light material scrollbar has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light material scrollbar has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for scrollbar is missing name metadata. */ -/* ✔ [assert-true] Component schema for select is missing metadata. */ -/* ✔ [assert-equal] Component schema for light material select has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light material select has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for select is missing name metadata. */ -/* ✔ [assert-true] Component schema for slider is missing metadata. */ -/* ✔ [assert-equal] Component schema for light material slider has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light material slider has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for slider is missing name metadata. */ -/* ✔ [assert-true] Component schema for snackbar is missing metadata. */ -/* ✔ [assert-equal] Component schema for light material snackbar has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light material snackbar has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for snackbar is missing name metadata. */ -/* ✔ [assert-true] Component schema for splitter is missing metadata. */ -/* ✔ [assert-equal] Component schema for light material splitter has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light material splitter has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for splitter is missing name metadata. */ -/* ✔ [assert-true] Component schema for stepper is missing metadata. */ -/* ✔ [assert-equal] Component schema for light material stepper has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light material stepper has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for stepper is missing name metadata. */ -/* ✔ [assert-true] Component schema for switch is missing metadata. */ -/* ✔ [assert-equal] Component schema for light material switch has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light material switch has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for switch is missing name metadata. */ -/* ✔ [assert-true] Component schema for tabs is missing metadata. */ -/* ✔ [assert-equal] Component schema for light material tabs has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light material tabs has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for tabs is missing name metadata. */ -/* ✔ [assert-true] Component schema for tile-manager is missing metadata. */ -/* ✔ [assert-equal] Component schema for light material tile-manager has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light material tile-manager has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for tile-manager is missing name metadata. */ -/* ✔ [assert-true] Component schema for time-picker is missing metadata. */ -/* ✔ [assert-equal] Component schema for light material time-picker has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light material time-picker has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for time-picker is missing name metadata. */ -/* ✔ [assert-true] Component schema for toast is missing metadata. */ -/* ✔ [assert-equal] Component schema for light material toast has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light material toast has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for toast is missing name metadata. */ -/* ✔ [assert-true] Component schema for tooltip is missing metadata. */ -/* ✔ [assert-equal] Component schema for light material tooltip has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light material tooltip has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for tooltip is missing name metadata. */ -/* ✔ [assert-true] Component schema for tree is missing metadata. */ -/* ✔ [assert-equal] Component schema for light material tree has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light material tree has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for tree is missing name metadata. */ -/* ✔ [assert-true] Component schema for validator is missing metadata. */ -/* ✔ [assert-equal] Component schema for light material validator has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light material validator has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for validator is missing name metadata. */ -/* ✔ [assert-true] Component schema for watermark is missing metadata. */ -/* ✔ [assert-equal] Component schema for light material watermark has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light material watermark has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for watermark is missing name metadata. */ -/* ✔ [assert-true] Component schema for file-input is missing metadata. */ -/* ✔ [assert-equal] Component schema for light material file-input has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light material file-input has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for file-input is missing name metadata. */ -/* ✔ [assert-true] Component schema for category-chart is missing metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap category-chart has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap category-chart has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for category-chart is missing name metadata. */ -/* ✔ [assert-true] Component schema for data-chart is missing metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap data-chart has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap data-chart has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for data-chart is missing name metadata. */ -/* ✔ [assert-true] Component schema for doughnut-chart is missing metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap doughnut-chart has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap doughnut-chart has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for doughnut-chart is missing name metadata. */ -/* ✔ [assert-true] Component schema for financial-chart is missing metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap financial-chart has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap financial-chart has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for financial-chart is missing name metadata. */ -/* ✔ [assert-true] Component schema for funnel-chart is missing metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap funnel-chart has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap funnel-chart has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for funnel-chart is missing name metadata. */ -/* ✔ [assert-true] Component schema for linear-gauge is missing metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap linear-gauge has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap linear-gauge has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for linear-gauge is missing name metadata. */ -/* ✔ [assert-true] Component schema for radial-gauge is missing metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap radial-gauge has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap radial-gauge has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for radial-gauge is missing name metadata. */ -/* ✔ [assert-true] Component schema for geo-map is missing metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap geo-map has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap geo-map has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for geo-map is missing name metadata. */ -/* ✔ [assert-true] Component schema for bullet-graph is missing metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap bullet-graph has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap bullet-graph has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for bullet-graph is missing name metadata. */ -/* ✔ [assert-true] Component schema for pie-chart is missing metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap pie-chart has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap pie-chart has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for pie-chart is missing name metadata. */ -/* ✔ [assert-true] Component schema for shape-chart is missing metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap shape-chart has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap shape-chart has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for shape-chart is missing name metadata. */ -/* ✔ [assert-true] Component schema for sparkline is missing metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap sparkline has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap sparkline has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for sparkline is missing name metadata. */ -/* ✔ [assert-true] Component schema for action-strip is missing metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap action-strip has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap action-strip has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for action-strip is missing name metadata. */ -/* ✔ [assert-true] Component schema for avatar is missing metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap avatar has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap avatar has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for avatar is missing name metadata. */ -/* ✔ [assert-true] Component schema for badge is missing metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap badge has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap badge has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for badge is missing name metadata. */ -/* ✔ [assert-true] Component schema for banner is missing metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap banner has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap banner has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for banner is missing name metadata. */ -/* ✔ [assert-true] Component schema for bottom-nav is missing metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap bottom-nav has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap bottom-nav has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for bottom-nav is missing name metadata. */ -/* ✔ [assert-true] Component schema for flat button is missing metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap flat button has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap flat button has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for flat button is missing name metadata. */ -/* ✔ [assert-true] Component schema for outlined button is missing metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap outlined button has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap outlined button has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for outlined button is missing name metadata. */ -/* ✔ [assert-true] Component schema for contained button is missing metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap contained button has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap contained button has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for contained button is missing name metadata. */ -/* ✔ [assert-true] Component schema for fab button is missing metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap fab button has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap fab button has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for fab button is missing name metadata. */ -/* ✔ [assert-true] Component schema for button-group is missing metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap button-group has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap button-group has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for button-group is missing name metadata. */ -/* ✔ [assert-true] Component schema for calendar is missing metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap calendar has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap calendar has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for calendar is missing name metadata. */ -/* ✔ [assert-true] Component schema for card is missing metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap card has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap card has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for card is missing name metadata. */ -/* ✔ [assert-true] Component schema for carousel is missing metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap carousel has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap carousel has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for carousel is missing name metadata. */ -/* ✔ [assert-true] Component schema for chat is missing metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap chat has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap chat has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for chat is missing name metadata. */ -/* ✔ [assert-true] Component schema for checkbox is missing metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap checkbox has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap checkbox has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for checkbox is missing name metadata. */ -/* ✔ [assert-true] Component schema for chip is missing metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap chip has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap chip has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for chip is missing name metadata. */ -/* ✔ [assert-true] Component schema for color-picker is missing metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap color-picker has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap color-picker has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for color-picker is missing name metadata. */ -/* ✔ [assert-true] Component schema for column-actions is missing metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap column-actions has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap column-actions has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for column-actions is missing name metadata. */ -/* ✔ [assert-true] Component schema for combo is missing metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap combo has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap combo has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for combo is missing name metadata. */ -/* ✔ [assert-true] Component schema for date-picker is missing metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap date-picker has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap date-picker has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for date-picker is missing name metadata. */ -/* ✔ [assert-true] Component schema for date-range is missing metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap date-range has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap date-range has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for date-range is missing name metadata. */ -/* ✔ [assert-true] Component schema for dialog is missing metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap dialog has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap dialog has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for dialog is missing name metadata. */ -/* ✔ [assert-true] Component schema for divider is missing metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap divider has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap divider has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for divider is missing name metadata. */ -/* ✔ [assert-true] Component schema for dockmanager is missing metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap dockmanager has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap dockmanager has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for dockmanager is missing name metadata. */ -/* ✔ [assert-true] Component schema for drop-down is missing metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap drop-down has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap drop-down has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for drop-down is missing name metadata. */ -/* ✔ [assert-true] Component schema for expansion-panel is missing metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap expansion-panel has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap expansion-panel has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for expansion-panel is missing name metadata. */ -/* ✔ [assert-true] Component schema for grid is missing metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap grid has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap grid has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for grid is missing name metadata. */ -/* ✔ [assert-true] Component schema for grid-excel-filtering is missing metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap grid-excel-filtering has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap grid-excel-filtering has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for grid-excel-filtering is missing name metadata. */ -/* ✔ [assert-true] Component schema for grid-filtering is missing metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap grid-filtering has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap grid-filtering has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for grid-filtering is missing name metadata. */ -/* ✔ [assert-true] Component schema for grid-summary is missing metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap grid-summary has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap grid-summary has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for grid-summary is missing name metadata. */ -/* ✔ [assert-true] Component schema for grid-toolbar is missing metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap grid-toolbar has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap grid-toolbar has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for grid-toolbar is missing name metadata. */ -/* ✔ [assert-true] Component schema for highlight is missing metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap highlight has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap highlight has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for highlight is missing name metadata. */ -/* ✔ [assert-true] Component schema for icon is missing metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap icon has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap icon has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for icon is missing name metadata. */ -/* ✔ [assert-true] Component schema for flat icon-button is missing metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap flat icon-button has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap flat icon-button has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for flat icon-button is missing name metadata. */ -/* ✔ [assert-true] Component schema for contained icon-button is missing metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap contained icon-button has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap contained icon-button has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for contained icon-button is missing name metadata. */ -/* ✔ [assert-true] Component schema for outlined icon-button is missing metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap outlined icon-button has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap outlined icon-button has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for outlined icon-button is missing name metadata. */ -/* ✔ [assert-true] Component schema for input-group is missing metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap input-group has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap input-group has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for input-group is missing name metadata. */ -/* ✔ [assert-true] Component schema for label is missing metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap label has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap label has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for label is missing name metadata. */ -/* ✔ [assert-true] Component schema for list is missing metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap list has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap list has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for list is missing name metadata. */ -/* ✔ [assert-true] Component schema for navbar is missing metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap navbar has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap navbar has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for navbar is missing name metadata. */ -/* ✔ [assert-true] Component schema for nav-drawer is missing metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap nav-drawer has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap nav-drawer has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for nav-drawer is missing name metadata. */ -/* ✔ [assert-true] Component schema for overlay is missing metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap overlay has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap overlay has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for overlay is missing name metadata. */ -/* ✔ [assert-true] Component schema for paginator is missing metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap paginator has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap paginator has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for paginator is missing name metadata. */ -/* ✔ [assert-true] Component schema for pivot-data-selector is missing metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap pivot-data-selector has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap pivot-data-selector has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for pivot-data-selector is missing name metadata. */ -/* ✔ [assert-true] Component schema for linear-bar is missing metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap linear-bar has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap linear-bar has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for linear-bar is missing name metadata. */ -/* ✔ [assert-true] Component schema for circular-bar is missing metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap circular-bar has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap circular-bar has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for circular-bar is missing name metadata. */ -/* ✔ [assert-true] Component schema for qr-code is missing metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap qr-code has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap qr-code has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for qr-code is missing name metadata. */ -/* ✔ [assert-true] Component schema for query-builder is missing metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap query-builder has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap query-builder has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for query-builder is missing name metadata. */ -/* ✔ [assert-true] Component schema for radio is missing metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap radio has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap radio has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for radio is missing name metadata. */ -/* ✔ [assert-true] Component schema for rating is missing metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap rating has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap rating has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for rating is missing name metadata. */ -/* ✔ [assert-true] Component schema for resize-indicator is missing metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap resize-indicator has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap resize-indicator has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for resize-indicator is missing name metadata. */ -/* ✔ [assert-true] Component schema for ripple is missing metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap ripple has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap ripple has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for ripple is missing name metadata. */ -/* ✔ [assert-true] Component schema for scrollbar is missing metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap scrollbar has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap scrollbar has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for scrollbar is missing name metadata. */ -/* ✔ [assert-true] Component schema for select is missing metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap select has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap select has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for select is missing name metadata. */ -/* ✔ [assert-true] Component schema for slider is missing metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap slider has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap slider has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for slider is missing name metadata. */ -/* ✔ [assert-true] Component schema for snackbar is missing metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap snackbar has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap snackbar has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for snackbar is missing name metadata. */ -/* ✔ [assert-true] Component schema for splitter is missing metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap splitter has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap splitter has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for splitter is missing name metadata. */ -/* ✔ [assert-true] Component schema for stepper is missing metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap stepper has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap stepper has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for stepper is missing name metadata. */ -/* ✔ [assert-true] Component schema for switch is missing metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap switch has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap switch has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for switch is missing name metadata. */ -/* ✔ [assert-true] Component schema for tabs is missing metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap tabs has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap tabs has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for tabs is missing name metadata. */ -/* ✔ [assert-true] Component schema for tile-manager is missing metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap tile-manager has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap tile-manager has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for tile-manager is missing name metadata. */ -/* ✔ [assert-true] Component schema for time-picker is missing metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap time-picker has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap time-picker has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for time-picker is missing name metadata. */ -/* ✔ [assert-true] Component schema for toast is missing metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap toast has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap toast has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for toast is missing name metadata. */ -/* ✔ [assert-true] Component schema for tooltip is missing metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap tooltip has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap tooltip has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for tooltip is missing name metadata. */ -/* ✔ [assert-true] Component schema for tree is missing metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap tree has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap tree has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for tree is missing name metadata. */ -/* ✔ [assert-true] Component schema for validator is missing metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap validator has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap validator has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for validator is missing name metadata. */ -/* ✔ [assert-true] Component schema for watermark is missing metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap watermark has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap watermark has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for watermark is missing name metadata. */ -/* ✔ [assert-true] Component schema for file-input is missing metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap file-input has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light bootstrap file-input has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for file-input is missing name metadata. */ -/* ✔ [assert-true] Component schema for category-chart is missing metadata. */ -/* ✔ [assert-equal] Component schema for light fluent category-chart has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light fluent category-chart has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for category-chart is missing name metadata. */ -/* ✔ [assert-true] Component schema for data-chart is missing metadata. */ -/* ✔ [assert-equal] Component schema for light fluent data-chart has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light fluent data-chart has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for data-chart is missing name metadata. */ -/* ✔ [assert-true] Component schema for doughnut-chart is missing metadata. */ -/* ✔ [assert-equal] Component schema for light fluent doughnut-chart has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light fluent doughnut-chart has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for doughnut-chart is missing name metadata. */ -/* ✔ [assert-true] Component schema for financial-chart is missing metadata. */ -/* ✔ [assert-equal] Component schema for light fluent financial-chart has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light fluent financial-chart has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for financial-chart is missing name metadata. */ -/* ✔ [assert-true] Component schema for funnel-chart is missing metadata. */ -/* ✔ [assert-equal] Component schema for light fluent funnel-chart has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light fluent funnel-chart has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for funnel-chart is missing name metadata. */ -/* ✔ [assert-true] Component schema for linear-gauge is missing metadata. */ -/* ✔ [assert-equal] Component schema for light fluent linear-gauge has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light fluent linear-gauge has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for linear-gauge is missing name metadata. */ -/* ✔ [assert-true] Component schema for radial-gauge is missing metadata. */ -/* ✔ [assert-equal] Component schema for light fluent radial-gauge has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light fluent radial-gauge has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for radial-gauge is missing name metadata. */ -/* ✔ [assert-true] Component schema for geo-map is missing metadata. */ -/* ✔ [assert-equal] Component schema for light fluent geo-map has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light fluent geo-map has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for geo-map is missing name metadata. */ -/* ✔ [assert-true] Component schema for bullet-graph is missing metadata. */ -/* ✔ [assert-equal] Component schema for light fluent bullet-graph has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light fluent bullet-graph has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for bullet-graph is missing name metadata. */ -/* ✔ [assert-true] Component schema for pie-chart is missing metadata. */ -/* ✔ [assert-equal] Component schema for light fluent pie-chart has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light fluent pie-chart has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for pie-chart is missing name metadata. */ -/* ✔ [assert-true] Component schema for shape-chart is missing metadata. */ -/* ✔ [assert-equal] Component schema for light fluent shape-chart has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light fluent shape-chart has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for shape-chart is missing name metadata. */ -/* ✔ [assert-true] Component schema for sparkline is missing metadata. */ -/* ✔ [assert-equal] Component schema for light fluent sparkline has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light fluent sparkline has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for sparkline is missing name metadata. */ -/* ✔ [assert-true] Component schema for action-strip is missing metadata. */ -/* ✔ [assert-equal] Component schema for light fluent action-strip has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light fluent action-strip has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for action-strip is missing name metadata. */ -/* ✔ [assert-true] Component schema for avatar is missing metadata. */ -/* ✔ [assert-equal] Component schema for light fluent avatar has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light fluent avatar has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for avatar is missing name metadata. */ -/* ✔ [assert-true] Component schema for badge is missing metadata. */ -/* ✔ [assert-equal] Component schema for light fluent badge has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light fluent badge has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for badge is missing name metadata. */ -/* ✔ [assert-true] Component schema for banner is missing metadata. */ -/* ✔ [assert-equal] Component schema for light fluent banner has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light fluent banner has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for banner is missing name metadata. */ -/* ✔ [assert-true] Component schema for bottom-nav is missing metadata. */ -/* ✔ [assert-equal] Component schema for light fluent bottom-nav has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light fluent bottom-nav has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for bottom-nav is missing name metadata. */ -/* ✔ [assert-true] Component schema for flat button is missing metadata. */ -/* ✔ [assert-equal] Component schema for light fluent flat button has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light fluent flat button has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for flat button is missing name metadata. */ -/* ✔ [assert-true] Component schema for outlined button is missing metadata. */ -/* ✔ [assert-equal] Component schema for light fluent outlined button has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light fluent outlined button has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for outlined button is missing name metadata. */ -/* ✔ [assert-true] Component schema for contained button is missing metadata. */ -/* ✔ [assert-equal] Component schema for light fluent contained button has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light fluent contained button has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for contained button is missing name metadata. */ -/* ✔ [assert-true] Component schema for fab button is missing metadata. */ -/* ✔ [assert-equal] Component schema for light fluent fab button has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light fluent fab button has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for fab button is missing name metadata. */ -/* ✔ [assert-true] Component schema for button-group is missing metadata. */ -/* ✔ [assert-equal] Component schema for light fluent button-group has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light fluent button-group has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for button-group is missing name metadata. */ -/* ✔ [assert-true] Component schema for calendar is missing metadata. */ -/* ✔ [assert-equal] Component schema for light fluent calendar has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light fluent calendar has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for calendar is missing name metadata. */ -/* ✔ [assert-true] Component schema for card is missing metadata. */ -/* ✔ [assert-equal] Component schema for light fluent card has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light fluent card has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for card is missing name metadata. */ -/* ✔ [assert-true] Component schema for carousel is missing metadata. */ -/* ✔ [assert-equal] Component schema for light fluent carousel has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light fluent carousel has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for carousel is missing name metadata. */ -/* ✔ [assert-true] Component schema for chat is missing metadata. */ -/* ✔ [assert-equal] Component schema for light fluent chat has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light fluent chat has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for chat is missing name metadata. */ -/* ✔ [assert-true] Component schema for checkbox is missing metadata. */ -/* ✔ [assert-equal] Component schema for light fluent checkbox has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light fluent checkbox has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for checkbox is missing name metadata. */ -/* ✔ [assert-true] Component schema for chip is missing metadata. */ -/* ✔ [assert-equal] Component schema for light fluent chip has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light fluent chip has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for chip is missing name metadata. */ -/* ✔ [assert-true] Component schema for color-picker is missing metadata. */ -/* ✔ [assert-equal] Component schema for light fluent color-picker has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light fluent color-picker has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for color-picker is missing name metadata. */ -/* ✔ [assert-true] Component schema for column-actions is missing metadata. */ -/* ✔ [assert-equal] Component schema for light fluent column-actions has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light fluent column-actions has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for column-actions is missing name metadata. */ -/* ✔ [assert-true] Component schema for combo is missing metadata. */ -/* ✔ [assert-equal] Component schema for light fluent combo has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light fluent combo has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for combo is missing name metadata. */ -/* ✔ [assert-true] Component schema for date-picker is missing metadata. */ -/* ✔ [assert-equal] Component schema for light fluent date-picker has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light fluent date-picker has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for date-picker is missing name metadata. */ -/* ✔ [assert-true] Component schema for date-range is missing metadata. */ -/* ✔ [assert-equal] Component schema for light fluent date-range has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light fluent date-range has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for date-range is missing name metadata. */ -/* ✔ [assert-true] Component schema for dialog is missing metadata. */ -/* ✔ [assert-equal] Component schema for light fluent dialog has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light fluent dialog has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for dialog is missing name metadata. */ -/* ✔ [assert-true] Component schema for divider is missing metadata. */ -/* ✔ [assert-equal] Component schema for light fluent divider has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light fluent divider has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for divider is missing name metadata. */ -/* ✔ [assert-true] Component schema for dockmanager is missing metadata. */ -/* ✔ [assert-equal] Component schema for light fluent dockmanager has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light fluent dockmanager has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for dockmanager is missing name metadata. */ -/* ✔ [assert-true] Component schema for drop-down is missing metadata. */ -/* ✔ [assert-equal] Component schema for light fluent drop-down has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light fluent drop-down has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for drop-down is missing name metadata. */ -/* ✔ [assert-true] Component schema for expansion-panel is missing metadata. */ -/* ✔ [assert-equal] Component schema for light fluent expansion-panel has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light fluent expansion-panel has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for expansion-panel is missing name metadata. */ -/* ✔ [assert-true] Component schema for grid is missing metadata. */ -/* ✔ [assert-equal] Component schema for light fluent grid has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light fluent grid has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for grid is missing name metadata. */ -/* ✔ [assert-true] Component schema for grid-excel-filtering is missing metadata. */ -/* ✔ [assert-equal] Component schema for light fluent grid-excel-filtering has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light fluent grid-excel-filtering has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for grid-excel-filtering is missing name metadata. */ -/* ✔ [assert-true] Component schema for grid-filtering is missing metadata. */ -/* ✔ [assert-equal] Component schema for light fluent grid-filtering has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light fluent grid-filtering has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for grid-filtering is missing name metadata. */ -/* ✔ [assert-true] Component schema for grid-summary is missing metadata. */ -/* ✔ [assert-equal] Component schema for light fluent grid-summary has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light fluent grid-summary has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for grid-summary is missing name metadata. */ -/* ✔ [assert-true] Component schema for grid-toolbar is missing metadata. */ -/* ✔ [assert-equal] Component schema for light fluent grid-toolbar has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light fluent grid-toolbar has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for grid-toolbar is missing name metadata. */ -/* ✔ [assert-true] Component schema for highlight is missing metadata. */ -/* ✔ [assert-equal] Component schema for light fluent highlight has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light fluent highlight has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for highlight is missing name metadata. */ -/* ✔ [assert-true] Component schema for icon is missing metadata. */ -/* ✔ [assert-equal] Component schema for light fluent icon has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light fluent icon has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for icon is missing name metadata. */ -/* ✔ [assert-true] Component schema for flat icon-button is missing metadata. */ -/* ✔ [assert-equal] Component schema for light fluent flat icon-button has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light fluent flat icon-button has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for flat icon-button is missing name metadata. */ -/* ✔ [assert-true] Component schema for contained icon-button is missing metadata. */ -/* ✔ [assert-equal] Component schema for light fluent contained icon-button has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light fluent contained icon-button has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for contained icon-button is missing name metadata. */ -/* ✔ [assert-true] Component schema for outlined icon-button is missing metadata. */ -/* ✔ [assert-equal] Component schema for light fluent outlined icon-button has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light fluent outlined icon-button has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for outlined icon-button is missing name metadata. */ -/* ✔ [assert-true] Component schema for input-group is missing metadata. */ -/* ✔ [assert-equal] Component schema for light fluent input-group has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light fluent input-group has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for input-group is missing name metadata. */ -/* ✔ [assert-true] Component schema for label is missing metadata. */ -/* ✔ [assert-equal] Component schema for light fluent label has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light fluent label has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for label is missing name metadata. */ -/* ✔ [assert-true] Component schema for list is missing metadata. */ -/* ✔ [assert-equal] Component schema for light fluent list has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light fluent list has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for list is missing name metadata. */ -/* ✔ [assert-true] Component schema for navbar is missing metadata. */ -/* ✔ [assert-equal] Component schema for light fluent navbar has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light fluent navbar has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for navbar is missing name metadata. */ -/* ✔ [assert-true] Component schema for nav-drawer is missing metadata. */ -/* ✔ [assert-equal] Component schema for light fluent nav-drawer has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light fluent nav-drawer has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for nav-drawer is missing name metadata. */ -/* ✔ [assert-true] Component schema for overlay is missing metadata. */ -/* ✔ [assert-equal] Component schema for light fluent overlay has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light fluent overlay has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for overlay is missing name metadata. */ -/* ✔ [assert-true] Component schema for paginator is missing metadata. */ -/* ✔ [assert-equal] Component schema for light fluent paginator has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light fluent paginator has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for paginator is missing name metadata. */ -/* ✔ [assert-true] Component schema for pivot-data-selector is missing metadata. */ -/* ✔ [assert-equal] Component schema for light fluent pivot-data-selector has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light fluent pivot-data-selector has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for pivot-data-selector is missing name metadata. */ -/* ✔ [assert-true] Component schema for linear-bar is missing metadata. */ -/* ✔ [assert-equal] Component schema for light fluent linear-bar has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light fluent linear-bar has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for linear-bar is missing name metadata. */ -/* ✔ [assert-true] Component schema for circular-bar is missing metadata. */ -/* ✔ [assert-equal] Component schema for light fluent circular-bar has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light fluent circular-bar has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for circular-bar is missing name metadata. */ -/* ✔ [assert-true] Component schema for qr-code is missing metadata. */ -/* ✔ [assert-equal] Component schema for light fluent qr-code has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light fluent qr-code has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for qr-code is missing name metadata. */ -/* ✔ [assert-true] Component schema for query-builder is missing metadata. */ -/* ✔ [assert-equal] Component schema for light fluent query-builder has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light fluent query-builder has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for query-builder is missing name metadata. */ -/* ✔ [assert-true] Component schema for radio is missing metadata. */ -/* ✔ [assert-equal] Component schema for light fluent radio has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light fluent radio has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for radio is missing name metadata. */ -/* ✔ [assert-true] Component schema for rating is missing metadata. */ -/* ✔ [assert-equal] Component schema for light fluent rating has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light fluent rating has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for rating is missing name metadata. */ -/* ✔ [assert-true] Component schema for resize-indicator is missing metadata. */ -/* ✔ [assert-equal] Component schema for light fluent resize-indicator has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light fluent resize-indicator has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for resize-indicator is missing name metadata. */ -/* ✔ [assert-true] Component schema for ripple is missing metadata. */ -/* ✔ [assert-equal] Component schema for light fluent ripple has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light fluent ripple has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for ripple is missing name metadata. */ -/* ✔ [assert-true] Component schema for scrollbar is missing metadata. */ -/* ✔ [assert-equal] Component schema for light fluent scrollbar has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light fluent scrollbar has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for scrollbar is missing name metadata. */ -/* ✔ [assert-true] Component schema for select is missing metadata. */ -/* ✔ [assert-equal] Component schema for light fluent select has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light fluent select has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for select is missing name metadata. */ -/* ✔ [assert-true] Component schema for slider is missing metadata. */ -/* ✔ [assert-equal] Component schema for light fluent slider has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light fluent slider has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for slider is missing name metadata. */ -/* ✔ [assert-true] Component schema for snackbar is missing metadata. */ -/* ✔ [assert-equal] Component schema for light fluent snackbar has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light fluent snackbar has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for snackbar is missing name metadata. */ -/* ✔ [assert-true] Component schema for splitter is missing metadata. */ -/* ✔ [assert-equal] Component schema for light fluent splitter has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light fluent splitter has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for splitter is missing name metadata. */ -/* ✔ [assert-true] Component schema for stepper is missing metadata. */ -/* ✔ [assert-equal] Component schema for light fluent stepper has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light fluent stepper has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for stepper is missing name metadata. */ -/* ✔ [assert-true] Component schema for switch is missing metadata. */ -/* ✔ [assert-equal] Component schema for light fluent switch has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light fluent switch has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for switch is missing name metadata. */ -/* ✔ [assert-true] Component schema for tabs is missing metadata. */ -/* ✔ [assert-equal] Component schema for light fluent tabs has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light fluent tabs has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for tabs is missing name metadata. */ -/* ✔ [assert-true] Component schema for tile-manager is missing metadata. */ -/* ✔ [assert-equal] Component schema for light fluent tile-manager has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light fluent tile-manager has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for tile-manager is missing name metadata. */ -/* ✔ [assert-true] Component schema for time-picker is missing metadata. */ -/* ✔ [assert-equal] Component schema for light fluent time-picker has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light fluent time-picker has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for time-picker is missing name metadata. */ -/* ✔ [assert-true] Component schema for toast is missing metadata. */ -/* ✔ [assert-equal] Component schema for light fluent toast has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light fluent toast has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for toast is missing name metadata. */ -/* ✔ [assert-true] Component schema for tooltip is missing metadata. */ -/* ✔ [assert-equal] Component schema for light fluent tooltip has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light fluent tooltip has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for tooltip is missing name metadata. */ -/* ✔ [assert-true] Component schema for tree is missing metadata. */ -/* ✔ [assert-equal] Component schema for light fluent tree has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light fluent tree has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for tree is missing name metadata. */ -/* ✔ [assert-true] Component schema for validator is missing metadata. */ -/* ✔ [assert-equal] Component schema for light fluent validator has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light fluent validator has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for validator is missing name metadata. */ -/* ✔ [assert-true] Component schema for watermark is missing metadata. */ -/* ✔ [assert-equal] Component schema for light fluent watermark has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light fluent watermark has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for watermark is missing name metadata. */ -/* ✔ [assert-true] Component schema for file-input is missing metadata. */ -/* ✔ [assert-equal] Component schema for light fluent file-input has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light fluent file-input has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for file-input is missing name metadata. */ -/* ✔ [assert-true] Component schema for category-chart is missing metadata. */ -/* ✔ [assert-equal] Component schema for light indigo category-chart has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light indigo category-chart has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for category-chart is missing name metadata. */ -/* ✔ [assert-true] Component schema for data-chart is missing metadata. */ -/* ✔ [assert-equal] Component schema for light indigo data-chart has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light indigo data-chart has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for data-chart is missing name metadata. */ -/* ✔ [assert-true] Component schema for doughnut-chart is missing metadata. */ -/* ✔ [assert-equal] Component schema for light indigo doughnut-chart has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light indigo doughnut-chart has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for doughnut-chart is missing name metadata. */ -/* ✔ [assert-true] Component schema for financial-chart is missing metadata. */ -/* ✔ [assert-equal] Component schema for light indigo financial-chart has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light indigo financial-chart has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for financial-chart is missing name metadata. */ -/* ✔ [assert-true] Component schema for funnel-chart is missing metadata. */ -/* ✔ [assert-equal] Component schema for light indigo funnel-chart has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light indigo funnel-chart has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for funnel-chart is missing name metadata. */ -/* ✔ [assert-true] Component schema for linear-gauge is missing metadata. */ -/* ✔ [assert-equal] Component schema for light indigo linear-gauge has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light indigo linear-gauge has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for linear-gauge is missing name metadata. */ -/* ✔ [assert-true] Component schema for radial-gauge is missing metadata. */ -/* ✔ [assert-equal] Component schema for light indigo radial-gauge has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light indigo radial-gauge has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for radial-gauge is missing name metadata. */ -/* ✔ [assert-true] Component schema for geo-map is missing metadata. */ -/* ✔ [assert-equal] Component schema for light indigo geo-map has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light indigo geo-map has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for geo-map is missing name metadata. */ -/* ✔ [assert-true] Component schema for bullet-graph is missing metadata. */ -/* ✔ [assert-equal] Component schema for light indigo bullet-graph has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light indigo bullet-graph has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for bullet-graph is missing name metadata. */ -/* ✔ [assert-true] Component schema for pie-chart is missing metadata. */ -/* ✔ [assert-equal] Component schema for light indigo pie-chart has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light indigo pie-chart has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for pie-chart is missing name metadata. */ -/* ✔ [assert-true] Component schema for shape-chart is missing metadata. */ -/* ✔ [assert-equal] Component schema for light indigo shape-chart has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light indigo shape-chart has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for shape-chart is missing name metadata. */ -/* ✔ [assert-true] Component schema for sparkline is missing metadata. */ -/* ✔ [assert-equal] Component schema for light indigo sparkline has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light indigo sparkline has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for sparkline is missing name metadata. */ -/* ✔ [assert-true] Component schema for action-strip is missing metadata. */ -/* ✔ [assert-equal] Component schema for light indigo action-strip has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light indigo action-strip has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for action-strip is missing name metadata. */ -/* ✔ [assert-true] Component schema for avatar is missing metadata. */ -/* ✔ [assert-equal] Component schema for light indigo avatar has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light indigo avatar has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for avatar is missing name metadata. */ -/* ✔ [assert-true] Component schema for badge is missing metadata. */ -/* ✔ [assert-equal] Component schema for light indigo badge has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light indigo badge has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for badge is missing name metadata. */ -/* ✔ [assert-true] Component schema for banner is missing metadata. */ -/* ✔ [assert-equal] Component schema for light indigo banner has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light indigo banner has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for banner is missing name metadata. */ -/* ✔ [assert-true] Component schema for bottom-nav is missing metadata. */ -/* ✔ [assert-equal] Component schema for light indigo bottom-nav has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light indigo bottom-nav has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for bottom-nav is missing name metadata. */ -/* ✔ [assert-true] Component schema for flat button is missing metadata. */ -/* ✔ [assert-equal] Component schema for light indigo flat button has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light indigo flat button has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for flat button is missing name metadata. */ -/* ✔ [assert-true] Component schema for outlined button is missing metadata. */ -/* ✔ [assert-equal] Component schema for light indigo outlined button has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light indigo outlined button has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for outlined button is missing name metadata. */ -/* ✔ [assert-true] Component schema for contained button is missing metadata. */ -/* ✔ [assert-equal] Component schema for light indigo contained button has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light indigo contained button has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for contained button is missing name metadata. */ -/* ✔ [assert-true] Component schema for fab button is missing metadata. */ -/* ✔ [assert-equal] Component schema for light indigo fab button has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light indigo fab button has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for fab button is missing name metadata. */ -/* ✔ [assert-true] Component schema for button-group is missing metadata. */ -/* ✔ [assert-equal] Component schema for light indigo button-group has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light indigo button-group has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for button-group is missing name metadata. */ -/* ✔ [assert-true] Component schema for calendar is missing metadata. */ -/* ✔ [assert-equal] Component schema for light indigo calendar has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light indigo calendar has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for calendar is missing name metadata. */ -/* ✔ [assert-true] Component schema for card is missing metadata. */ -/* ✔ [assert-equal] Component schema for light indigo card has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light indigo card has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for card is missing name metadata. */ -/* ✔ [assert-true] Component schema for carousel is missing metadata. */ -/* ✔ [assert-equal] Component schema for light indigo carousel has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light indigo carousel has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for carousel is missing name metadata. */ -/* ✔ [assert-true] Component schema for chat is missing metadata. */ -/* ✔ [assert-equal] Component schema for light indigo chat has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light indigo chat has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for chat is missing name metadata. */ -/* ✔ [assert-true] Component schema for checkbox is missing metadata. */ -/* ✔ [assert-equal] Component schema for light indigo checkbox has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light indigo checkbox has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for checkbox is missing name metadata. */ -/* ✔ [assert-true] Component schema for chip is missing metadata. */ -/* ✔ [assert-equal] Component schema for light indigo chip has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light indigo chip has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for chip is missing name metadata. */ -/* ✔ [assert-true] Component schema for color-picker is missing metadata. */ -/* ✔ [assert-equal] Component schema for light indigo color-picker has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light indigo color-picker has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for color-picker is missing name metadata. */ -/* ✔ [assert-true] Component schema for column-actions is missing metadata. */ -/* ✔ [assert-equal] Component schema for light indigo column-actions has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light indigo column-actions has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for column-actions is missing name metadata. */ -/* ✔ [assert-true] Component schema for combo is missing metadata. */ -/* ✔ [assert-equal] Component schema for light indigo combo has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light indigo combo has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for combo is missing name metadata. */ -/* ✔ [assert-true] Component schema for date-picker is missing metadata. */ -/* ✔ [assert-equal] Component schema for light indigo date-picker has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light indigo date-picker has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for date-picker is missing name metadata. */ -/* ✔ [assert-true] Component schema for date-range is missing metadata. */ -/* ✔ [assert-equal] Component schema for light indigo date-range has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light indigo date-range has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for date-range is missing name metadata. */ -/* ✔ [assert-true] Component schema for dialog is missing metadata. */ -/* ✔ [assert-equal] Component schema for light indigo dialog has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light indigo dialog has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for dialog is missing name metadata. */ -/* ✔ [assert-true] Component schema for divider is missing metadata. */ -/* ✔ [assert-equal] Component schema for light indigo divider has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light indigo divider has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for divider is missing name metadata. */ -/* ✔ [assert-true] Component schema for dockmanager is missing metadata. */ -/* ✔ [assert-equal] Component schema for light indigo dockmanager has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light indigo dockmanager has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for dockmanager is missing name metadata. */ -/* ✔ [assert-true] Component schema for drop-down is missing metadata. */ -/* ✔ [assert-equal] Component schema for light indigo drop-down has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light indigo drop-down has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for drop-down is missing name metadata. */ -/* ✔ [assert-true] Component schema for expansion-panel is missing metadata. */ -/* ✔ [assert-equal] Component schema for light indigo expansion-panel has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light indigo expansion-panel has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for expansion-panel is missing name metadata. */ -/* ✔ [assert-true] Component schema for grid is missing metadata. */ -/* ✔ [assert-equal] Component schema for light indigo grid has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light indigo grid has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for grid is missing name metadata. */ -/* ✔ [assert-true] Component schema for grid-excel-filtering is missing metadata. */ -/* ✔ [assert-equal] Component schema for light indigo grid-excel-filtering has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light indigo grid-excel-filtering has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for grid-excel-filtering is missing name metadata. */ -/* ✔ [assert-true] Component schema for grid-filtering is missing metadata. */ -/* ✔ [assert-equal] Component schema for light indigo grid-filtering has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light indigo grid-filtering has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for grid-filtering is missing name metadata. */ -/* ✔ [assert-true] Component schema for grid-summary is missing metadata. */ -/* ✔ [assert-equal] Component schema for light indigo grid-summary has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light indigo grid-summary has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for grid-summary is missing name metadata. */ -/* ✔ [assert-true] Component schema for grid-toolbar is missing metadata. */ -/* ✔ [assert-equal] Component schema for light indigo grid-toolbar has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light indigo grid-toolbar has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for grid-toolbar is missing name metadata. */ -/* ✔ [assert-true] Component schema for highlight is missing metadata. */ -/* ✔ [assert-equal] Component schema for light indigo highlight has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light indigo highlight has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for highlight is missing name metadata. */ -/* ✔ [assert-true] Component schema for icon is missing metadata. */ -/* ✔ [assert-equal] Component schema for light indigo icon has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light indigo icon has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for icon is missing name metadata. */ -/* ✔ [assert-true] Component schema for flat icon-button is missing metadata. */ -/* ✔ [assert-equal] Component schema for light indigo flat icon-button has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light indigo flat icon-button has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for flat icon-button is missing name metadata. */ -/* ✔ [assert-true] Component schema for contained icon-button is missing metadata. */ -/* ✔ [assert-equal] Component schema for light indigo contained icon-button has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light indigo contained icon-button has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for contained icon-button is missing name metadata. */ -/* ✔ [assert-true] Component schema for outlined icon-button is missing metadata. */ -/* ✔ [assert-equal] Component schema for light indigo outlined icon-button has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light indigo outlined icon-button has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for outlined icon-button is missing name metadata. */ -/* ✔ [assert-true] Component schema for input-group is missing metadata. */ -/* ✔ [assert-equal] Component schema for light indigo input-group has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light indigo input-group has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for input-group is missing name metadata. */ -/* ✔ [assert-true] Component schema for label is missing metadata. */ -/* ✔ [assert-equal] Component schema for light indigo label has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light indigo label has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for label is missing name metadata. */ -/* ✔ [assert-true] Component schema for list is missing metadata. */ -/* ✔ [assert-equal] Component schema for light indigo list has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light indigo list has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for list is missing name metadata. */ -/* ✔ [assert-true] Component schema for navbar is missing metadata. */ -/* ✔ [assert-equal] Component schema for light indigo navbar has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light indigo navbar has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for navbar is missing name metadata. */ -/* ✔ [assert-true] Component schema for nav-drawer is missing metadata. */ -/* ✔ [assert-equal] Component schema for light indigo nav-drawer has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light indigo nav-drawer has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for nav-drawer is missing name metadata. */ -/* ✔ [assert-true] Component schema for overlay is missing metadata. */ -/* ✔ [assert-equal] Component schema for light indigo overlay has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light indigo overlay has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for overlay is missing name metadata. */ -/* ✔ [assert-true] Component schema for paginator is missing metadata. */ -/* ✔ [assert-equal] Component schema for light indigo paginator has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light indigo paginator has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for paginator is missing name metadata. */ -/* ✔ [assert-true] Component schema for pivot-data-selector is missing metadata. */ -/* ✔ [assert-equal] Component schema for light indigo pivot-data-selector has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light indigo pivot-data-selector has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for pivot-data-selector is missing name metadata. */ -/* ✔ [assert-true] Component schema for linear-bar is missing metadata. */ -/* ✔ [assert-equal] Component schema for light indigo linear-bar has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light indigo linear-bar has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for linear-bar is missing name metadata. */ -/* ✔ [assert-true] Component schema for circular-bar is missing metadata. */ -/* ✔ [assert-equal] Component schema for light indigo circular-bar has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light indigo circular-bar has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for circular-bar is missing name metadata. */ -/* ✔ [assert-true] Component schema for qr-code is missing metadata. */ -/* ✔ [assert-equal] Component schema for light indigo qr-code has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light indigo qr-code has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for qr-code is missing name metadata. */ -/* ✔ [assert-true] Component schema for query-builder is missing metadata. */ -/* ✔ [assert-equal] Component schema for light indigo query-builder has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light indigo query-builder has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for query-builder is missing name metadata. */ -/* ✔ [assert-true] Component schema for radio is missing metadata. */ -/* ✔ [assert-equal] Component schema for light indigo radio has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light indigo radio has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for radio is missing name metadata. */ -/* ✔ [assert-true] Component schema for rating is missing metadata. */ -/* ✔ [assert-equal] Component schema for light indigo rating has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light indigo rating has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for rating is missing name metadata. */ -/* ✔ [assert-true] Component schema for resize-indicator is missing metadata. */ -/* ✔ [assert-equal] Component schema for light indigo resize-indicator has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light indigo resize-indicator has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for resize-indicator is missing name metadata. */ -/* ✔ [assert-true] Component schema for ripple is missing metadata. */ -/* ✔ [assert-equal] Component schema for light indigo ripple has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light indigo ripple has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for ripple is missing name metadata. */ -/* ✔ [assert-true] Component schema for scrollbar is missing metadata. */ -/* ✔ [assert-equal] Component schema for light indigo scrollbar has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light indigo scrollbar has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for scrollbar is missing name metadata. */ -/* ✔ [assert-true] Component schema for select is missing metadata. */ -/* ✔ [assert-equal] Component schema for light indigo select has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light indigo select has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for select is missing name metadata. */ -/* ✔ [assert-true] Component schema for slider is missing metadata. */ -/* ✔ [assert-equal] Component schema for light indigo slider has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light indigo slider has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for slider is missing name metadata. */ -/* ✔ [assert-true] Component schema for snackbar is missing metadata. */ -/* ✔ [assert-equal] Component schema for light indigo snackbar has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light indigo snackbar has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for snackbar is missing name metadata. */ -/* ✔ [assert-true] Component schema for splitter is missing metadata. */ -/* ✔ [assert-equal] Component schema for light indigo splitter has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light indigo splitter has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for splitter is missing name metadata. */ -/* ✔ [assert-true] Component schema for stepper is missing metadata. */ -/* ✔ [assert-equal] Component schema for light indigo stepper has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light indigo stepper has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for stepper is missing name metadata. */ -/* ✔ [assert-true] Component schema for switch is missing metadata. */ -/* ✔ [assert-equal] Component schema for light indigo switch has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light indigo switch has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for switch is missing name metadata. */ -/* ✔ [assert-true] Component schema for tabs is missing metadata. */ -/* ✔ [assert-equal] Component schema for light indigo tabs has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light indigo tabs has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for tabs is missing name metadata. */ -/* ✔ [assert-true] Component schema for tile-manager is missing metadata. */ -/* ✔ [assert-equal] Component schema for light indigo tile-manager has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light indigo tile-manager has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for tile-manager is missing name metadata. */ -/* ✔ [assert-true] Component schema for time-picker is missing metadata. */ -/* ✔ [assert-equal] Component schema for light indigo time-picker has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light indigo time-picker has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for time-picker is missing name metadata. */ -/* ✔ [assert-true] Component schema for toast is missing metadata. */ -/* ✔ [assert-equal] Component schema for light indigo toast has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light indigo toast has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for toast is missing name metadata. */ -/* ✔ [assert-true] Component schema for tooltip is missing metadata. */ -/* ✔ [assert-equal] Component schema for light indigo tooltip has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light indigo tooltip has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for tooltip is missing name metadata. */ -/* ✔ [assert-true] Component schema for tree is missing metadata. */ -/* ✔ [assert-equal] Component schema for light indigo tree has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light indigo tree has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for tree is missing name metadata. */ -/* ✔ [assert-true] Component schema for validator is missing metadata. */ -/* ✔ [assert-equal] Component schema for light indigo validator has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light indigo validator has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for validator is missing name metadata. */ -/* ✔ [assert-true] Component schema for watermark is missing metadata. */ -/* ✔ [assert-equal] Component schema for light indigo watermark has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light indigo watermark has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for watermark is missing name metadata. */ -/* ✔ [assert-true] Component schema for file-input is missing metadata. */ -/* ✔ [assert-equal] Component schema for light indigo file-input has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for light indigo file-input has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for file-input is missing name metadata. */ -/* ✔ [assert-true] Component schema for category-chart is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark material category-chart has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark material category-chart has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for category-chart is missing name metadata. */ -/* ✔ [assert-true] Component schema for data-chart is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark material data-chart has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark material data-chart has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for data-chart is missing name metadata. */ -/* ✔ [assert-true] Component schema for doughnut-chart is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark material doughnut-chart has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark material doughnut-chart has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for doughnut-chart is missing name metadata. */ -/* ✔ [assert-true] Component schema for financial-chart is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark material financial-chart has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark material financial-chart has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for financial-chart is missing name metadata. */ -/* ✔ [assert-true] Component schema for funnel-chart is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark material funnel-chart has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark material funnel-chart has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for funnel-chart is missing name metadata. */ -/* ✔ [assert-true] Component schema for linear-gauge is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark material linear-gauge has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark material linear-gauge has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for linear-gauge is missing name metadata. */ -/* ✔ [assert-true] Component schema for radial-gauge is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark material radial-gauge has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark material radial-gauge has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for radial-gauge is missing name metadata. */ -/* ✔ [assert-true] Component schema for geo-map is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark material geo-map has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark material geo-map has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for geo-map is missing name metadata. */ -/* ✔ [assert-true] Component schema for bullet-graph is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark material bullet-graph has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark material bullet-graph has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for bullet-graph is missing name metadata. */ -/* ✔ [assert-true] Component schema for pie-chart is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark material pie-chart has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark material pie-chart has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for pie-chart is missing name metadata. */ -/* ✔ [assert-true] Component schema for shape-chart is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark material shape-chart has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark material shape-chart has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for shape-chart is missing name metadata. */ -/* ✔ [assert-true] Component schema for sparkline is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark material sparkline has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark material sparkline has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for sparkline is missing name metadata. */ -/* ✔ [assert-true] Component schema for action-strip is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark material action-strip has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark material action-strip has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for action-strip is missing name metadata. */ -/* ✔ [assert-true] Component schema for avatar is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark material avatar has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark material avatar has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for avatar is missing name metadata. */ -/* ✔ [assert-true] Component schema for badge is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark material badge has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark material badge has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for badge is missing name metadata. */ -/* ✔ [assert-true] Component schema for banner is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark material banner has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark material banner has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for banner is missing name metadata. */ -/* ✔ [assert-true] Component schema for bottom-nav is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark material bottom-nav has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark material bottom-nav has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for bottom-nav is missing name metadata. */ -/* ✔ [assert-true] Component schema for flat button is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark material flat button has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark material flat button has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for flat button is missing name metadata. */ -/* ✔ [assert-true] Component schema for outlined button is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark material outlined button has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark material outlined button has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for outlined button is missing name metadata. */ -/* ✔ [assert-true] Component schema for contained button is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark material contained button has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark material contained button has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for contained button is missing name metadata. */ -/* ✔ [assert-true] Component schema for fab button is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark material fab button has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark material fab button has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for fab button is missing name metadata. */ -/* ✔ [assert-true] Component schema for button-group is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark material button-group has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark material button-group has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for button-group is missing name metadata. */ -/* ✔ [assert-true] Component schema for calendar is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark material calendar has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark material calendar has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for calendar is missing name metadata. */ -/* ✔ [assert-true] Component schema for card is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark material card has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark material card has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for card is missing name metadata. */ -/* ✔ [assert-true] Component schema for carousel is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark material carousel has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark material carousel has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for carousel is missing name metadata. */ -/* ✔ [assert-true] Component schema for chat is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark material chat has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark material chat has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for chat is missing name metadata. */ -/* ✔ [assert-true] Component schema for checkbox is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark material checkbox has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark material checkbox has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for checkbox is missing name metadata. */ -/* ✔ [assert-true] Component schema for chip is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark material chip has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark material chip has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for chip is missing name metadata. */ -/* ✔ [assert-true] Component schema for color-picker is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark material color-picker has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark material color-picker has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for color-picker is missing name metadata. */ -/* ✔ [assert-true] Component schema for column-actions is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark material column-actions has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark material column-actions has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for column-actions is missing name metadata. */ -/* ✔ [assert-true] Component schema for combo is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark material combo has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark material combo has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for combo is missing name metadata. */ -/* ✔ [assert-true] Component schema for date-picker is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark material date-picker has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark material date-picker has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for date-picker is missing name metadata. */ -/* ✔ [assert-true] Component schema for date-range is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark material date-range has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark material date-range has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for date-range is missing name metadata. */ -/* ✔ [assert-true] Component schema for dialog is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark material dialog has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark material dialog has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for dialog is missing name metadata. */ -/* ✔ [assert-true] Component schema for divider is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark material divider has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark material divider has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for divider is missing name metadata. */ -/* ✔ [assert-true] Component schema for dockmanager is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark material dockmanager has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark material dockmanager has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for dockmanager is missing name metadata. */ -/* ✔ [assert-true] Component schema for drop-down is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark material drop-down has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark material drop-down has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for drop-down is missing name metadata. */ -/* ✔ [assert-true] Component schema for expansion-panel is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark material expansion-panel has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark material expansion-panel has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for expansion-panel is missing name metadata. */ -/* ✔ [assert-true] Component schema for grid is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark material grid has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark material grid has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for grid is missing name metadata. */ -/* ✔ [assert-true] Component schema for grid-excel-filtering is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark material grid-excel-filtering has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark material grid-excel-filtering has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for grid-excel-filtering is missing name metadata. */ -/* ✔ [assert-true] Component schema for grid-filtering is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark material grid-filtering has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark material grid-filtering has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for grid-filtering is missing name metadata. */ -/* ✔ [assert-true] Component schema for grid-summary is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark material grid-summary has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark material grid-summary has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for grid-summary is missing name metadata. */ -/* ✔ [assert-true] Component schema for grid-toolbar is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark material grid-toolbar has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark material grid-toolbar has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for grid-toolbar is missing name metadata. */ -/* ✔ [assert-true] Component schema for highlight is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark material highlight has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark material highlight has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for highlight is missing name metadata. */ -/* ✔ [assert-true] Component schema for icon is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark material icon has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark material icon has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for icon is missing name metadata. */ -/* ✔ [assert-true] Component schema for flat icon-button is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark material flat icon-button has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark material flat icon-button has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for flat icon-button is missing name metadata. */ -/* ✔ [assert-true] Component schema for outlined icon-button is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark material outlined icon-button has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark material outlined icon-button has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for outlined icon-button is missing name metadata. */ -/* ✔ [assert-true] Component schema for contained icon-button is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark material contained icon-button has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark material contained icon-button has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for contained icon-button is missing name metadata. */ -/* ✔ [assert-true] Component schema for input-group is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark material input-group has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark material input-group has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for input-group is missing name metadata. */ -/* ✔ [assert-true] Component schema for label is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark material label has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark material label has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for label is missing name metadata. */ -/* ✔ [assert-true] Component schema for list is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark material list has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark material list has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for list is missing name metadata. */ -/* ✔ [assert-true] Component schema for navbar is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark material navbar has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark material navbar has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for navbar is missing name metadata. */ -/* ✔ [assert-true] Component schema for nav-drawer is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark material nav-drawer has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark material nav-drawer has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for nav-drawer is missing name metadata. */ -/* ✔ [assert-true] Component schema for overlay is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark material overlay has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark material overlay has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for overlay is missing name metadata. */ -/* ✔ [assert-true] Component schema for paginator is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark material paginator has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark material paginator has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for paginator is missing name metadata. */ -/* ✔ [assert-true] Component schema for pivot-data-selector is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark material pivot-data-selector has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark material pivot-data-selector has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for pivot-data-selector is missing name metadata. */ -/* ✔ [assert-true] Component schema for linear-bar is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark material linear-bar has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark material linear-bar has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for linear-bar is missing name metadata. */ -/* ✔ [assert-true] Component schema for circular-bar is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark material circular-bar has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark material circular-bar has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for circular-bar is missing name metadata. */ -/* ✔ [assert-true] Component schema for qr-code is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark material qr-code has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark material qr-code has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for qr-code is missing name metadata. */ -/* ✔ [assert-true] Component schema for query-builder is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark material query-builder has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark material query-builder has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for query-builder is missing name metadata. */ -/* ✔ [assert-true] Component schema for radio is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark material radio has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark material radio has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for radio is missing name metadata. */ -/* ✔ [assert-true] Component schema for rating is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark material rating has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark material rating has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for rating is missing name metadata. */ -/* ✔ [assert-true] Component schema for resize-indicator is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark material resize-indicator has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark material resize-indicator has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for resize-indicator is missing name metadata. */ -/* ✔ [assert-true] Component schema for ripple is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark material ripple has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark material ripple has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for ripple is missing name metadata. */ -/* ✔ [assert-true] Component schema for scrollbar is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark material scrollbar has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark material scrollbar has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for scrollbar is missing name metadata. */ -/* ✔ [assert-true] Component schema for select is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark material select has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark material select has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for select is missing name metadata. */ -/* ✔ [assert-true] Component schema for slider is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark material slider has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark material slider has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for slider is missing name metadata. */ -/* ✔ [assert-true] Component schema for snackbar is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark material snackbar has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark material snackbar has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for snackbar is missing name metadata. */ -/* ✔ [assert-true] Component schema for splitter is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark material splitter has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark material splitter has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for splitter is missing name metadata. */ -/* ✔ [assert-true] Component schema for stepper is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark material stepper has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark material stepper has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for stepper is missing name metadata. */ -/* ✔ [assert-true] Component schema for switch is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark material switch has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark material switch has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for switch is missing name metadata. */ -/* ✔ [assert-true] Component schema for tabs is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark material tabs has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark material tabs has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for tabs is missing name metadata. */ -/* ✔ [assert-true] Component schema for tile-manager is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark material tile-manager has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark material tile-manager has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for tile-manager is missing name metadata. */ -/* ✔ [assert-true] Component schema for time-picker is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark material time-picker has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark material time-picker has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for time-picker is missing name metadata. */ -/* ✔ [assert-true] Component schema for toast is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark material toast has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark material toast has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for toast is missing name metadata. */ -/* ✔ [assert-true] Component schema for tooltip is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark material tooltip has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark material tooltip has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for tooltip is missing name metadata. */ -/* ✔ [assert-true] Component schema for tree is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark material tree has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark material tree has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for tree is missing name metadata. */ -/* ✔ [assert-true] Component schema for validator is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark material validator has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark material validator has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for validator is missing name metadata. */ -/* ✔ [assert-true] Component schema for watermark is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark material watermark has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark material watermark has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for watermark is missing name metadata. */ -/* ✔ [assert-true] Component schema for file-input is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark material file-input has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark material file-input has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for file-input is missing name metadata. */ -/* ✔ [assert-true] Component schema for category-chart is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap category-chart has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap category-chart has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for category-chart is missing name metadata. */ -/* ✔ [assert-true] Component schema for data-chart is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap data-chart has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap data-chart has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for data-chart is missing name metadata. */ -/* ✔ [assert-true] Component schema for doughnut-chart is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap doughnut-chart has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap doughnut-chart has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for doughnut-chart is missing name metadata. */ -/* ✔ [assert-true] Component schema for financial-chart is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap financial-chart has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap financial-chart has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for financial-chart is missing name metadata. */ -/* ✔ [assert-true] Component schema for funnel-chart is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap funnel-chart has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap funnel-chart has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for funnel-chart is missing name metadata. */ -/* ✔ [assert-true] Component schema for linear-gauge is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap linear-gauge has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap linear-gauge has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for linear-gauge is missing name metadata. */ -/* ✔ [assert-true] Component schema for radial-gauge is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap radial-gauge has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap radial-gauge has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for radial-gauge is missing name metadata. */ -/* ✔ [assert-true] Component schema for geo-map is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap geo-map has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap geo-map has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for geo-map is missing name metadata. */ -/* ✔ [assert-true] Component schema for bullet-graph is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap bullet-graph has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap bullet-graph has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for bullet-graph is missing name metadata. */ -/* ✔ [assert-true] Component schema for pie-chart is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap pie-chart has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap pie-chart has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for pie-chart is missing name metadata. */ -/* ✔ [assert-true] Component schema for shape-chart is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap shape-chart has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap shape-chart has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for shape-chart is missing name metadata. */ -/* ✔ [assert-true] Component schema for sparkline is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap sparkline has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap sparkline has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for sparkline is missing name metadata. */ -/* ✔ [assert-true] Component schema for action-strip is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap action-strip has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap action-strip has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for action-strip is missing name metadata. */ -/* ✔ [assert-true] Component schema for avatar is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap avatar has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap avatar has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for avatar is missing name metadata. */ -/* ✔ [assert-true] Component schema for badge is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap badge has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap badge has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for badge is missing name metadata. */ -/* ✔ [assert-true] Component schema for banner is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap banner has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap banner has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for banner is missing name metadata. */ -/* ✔ [assert-true] Component schema for bottom-nav is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap bottom-nav has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap bottom-nav has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for bottom-nav is missing name metadata. */ -/* ✔ [assert-true] Component schema for flat button is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap flat button has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap flat button has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for flat button is missing name metadata. */ -/* ✔ [assert-true] Component schema for outlined button is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap outlined button has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap outlined button has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for outlined button is missing name metadata. */ -/* ✔ [assert-true] Component schema for contained button is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap contained button has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap contained button has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for contained button is missing name metadata. */ -/* ✔ [assert-true] Component schema for fab button is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap fab button has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap fab button has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for fab button is missing name metadata. */ -/* ✔ [assert-true] Component schema for button-group is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap button-group has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap button-group has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for button-group is missing name metadata. */ -/* ✔ [assert-true] Component schema for calendar is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap calendar has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap calendar has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for calendar is missing name metadata. */ -/* ✔ [assert-true] Component schema for card is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap card has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap card has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for card is missing name metadata. */ -/* ✔ [assert-true] Component schema for carousel is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap carousel has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap carousel has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for carousel is missing name metadata. */ -/* ✔ [assert-true] Component schema for chat is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap chat has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap chat has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for chat is missing name metadata. */ -/* ✔ [assert-true] Component schema for checkbox is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap checkbox has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap checkbox has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for checkbox is missing name metadata. */ -/* ✔ [assert-true] Component schema for chip is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap chip has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap chip has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for chip is missing name metadata. */ -/* ✔ [assert-true] Component schema for color-picker is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap color-picker has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap color-picker has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for color-picker is missing name metadata. */ -/* ✔ [assert-true] Component schema for column-actions is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap column-actions has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap column-actions has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for column-actions is missing name metadata. */ -/* ✔ [assert-true] Component schema for combo is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap combo has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap combo has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for combo is missing name metadata. */ -/* ✔ [assert-true] Component schema for date-picker is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap date-picker has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap date-picker has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for date-picker is missing name metadata. */ -/* ✔ [assert-true] Component schema for date-range is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap date-range has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap date-range has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for date-range is missing name metadata. */ -/* ✔ [assert-true] Component schema for dialog is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap dialog has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap dialog has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for dialog is missing name metadata. */ -/* ✔ [assert-true] Component schema for divider is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap divider has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap divider has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for divider is missing name metadata. */ -/* ✔ [assert-true] Component schema for dockmanager is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap dockmanager has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap dockmanager has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for dockmanager is missing name metadata. */ -/* ✔ [assert-true] Component schema for drop-down is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap drop-down has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap drop-down has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for drop-down is missing name metadata. */ -/* ✔ [assert-true] Component schema for expansion-panel is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap expansion-panel has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap expansion-panel has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for expansion-panel is missing name metadata. */ -/* ✔ [assert-true] Component schema for grid is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap grid has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap grid has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for grid is missing name metadata. */ -/* ✔ [assert-true] Component schema for grid-excel-filtering is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap grid-excel-filtering has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap grid-excel-filtering has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for grid-excel-filtering is missing name metadata. */ -/* ✔ [assert-true] Component schema for grid-filtering is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap grid-filtering has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap grid-filtering has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for grid-filtering is missing name metadata. */ -/* ✔ [assert-true] Component schema for grid-summary is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap grid-summary has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap grid-summary has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for grid-summary is missing name metadata. */ -/* ✔ [assert-true] Component schema for grid-toolbar is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap grid-toolbar has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap grid-toolbar has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for grid-toolbar is missing name metadata. */ -/* ✔ [assert-true] Component schema for highlight is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap highlight has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap highlight has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for highlight is missing name metadata. */ -/* ✔ [assert-true] Component schema for icon is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap icon has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap icon has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for icon is missing name metadata. */ -/* ✔ [assert-true] Component schema for flat icon-button is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap flat icon-button has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap flat icon-button has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for flat icon-button is missing name metadata. */ -/* ✔ [assert-true] Component schema for outlined icon-button is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap outlined icon-button has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap outlined icon-button has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for outlined icon-button is missing name metadata. */ -/* ✔ [assert-true] Component schema for contained icon-button is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap contained icon-button has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap contained icon-button has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for contained icon-button is missing name metadata. */ -/* ✔ [assert-true] Component schema for input-group is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap input-group has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap input-group has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for input-group is missing name metadata. */ -/* ✔ [assert-true] Component schema for label is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap label has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap label has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for label is missing name metadata. */ -/* ✔ [assert-true] Component schema for list is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap list has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap list has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for list is missing name metadata. */ -/* ✔ [assert-true] Component schema for navbar is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap navbar has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap navbar has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for navbar is missing name metadata. */ -/* ✔ [assert-true] Component schema for nav-drawer is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap nav-drawer has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap nav-drawer has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for nav-drawer is missing name metadata. */ -/* ✔ [assert-true] Component schema for overlay is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap overlay has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap overlay has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for overlay is missing name metadata. */ -/* ✔ [assert-true] Component schema for paginator is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap paginator has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap paginator has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for paginator is missing name metadata. */ -/* ✔ [assert-true] Component schema for pivot-data-selector is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap pivot-data-selector has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap pivot-data-selector has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for pivot-data-selector is missing name metadata. */ -/* ✔ [assert-true] Component schema for linear-bar is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap linear-bar has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap linear-bar has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for linear-bar is missing name metadata. */ -/* ✔ [assert-true] Component schema for circular-bar is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap circular-bar has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap circular-bar has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for circular-bar is missing name metadata. */ -/* ✔ [assert-true] Component schema for qr-code is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap qr-code has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap qr-code has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for qr-code is missing name metadata. */ -/* ✔ [assert-true] Component schema for query-builder is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap query-builder has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap query-builder has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for query-builder is missing name metadata. */ -/* ✔ [assert-true] Component schema for radio is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap radio has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap radio has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for radio is missing name metadata. */ -/* ✔ [assert-true] Component schema for rating is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap rating has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap rating has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for rating is missing name metadata. */ -/* ✔ [assert-true] Component schema for resize-indicator is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap resize-indicator has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap resize-indicator has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for resize-indicator is missing name metadata. */ -/* ✔ [assert-true] Component schema for ripple is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap ripple has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap ripple has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for ripple is missing name metadata. */ -/* ✔ [assert-true] Component schema for scrollbar is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap scrollbar has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap scrollbar has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for scrollbar is missing name metadata. */ -/* ✔ [assert-true] Component schema for select is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap select has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap select has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for select is missing name metadata. */ -/* ✔ [assert-true] Component schema for slider is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap slider has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap slider has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for slider is missing name metadata. */ -/* ✔ [assert-true] Component schema for snackbar is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap snackbar has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap snackbar has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for snackbar is missing name metadata. */ -/* ✔ [assert-true] Component schema for splitter is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap splitter has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap splitter has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for splitter is missing name metadata. */ -/* ✔ [assert-true] Component schema for stepper is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap stepper has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap stepper has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for stepper is missing name metadata. */ -/* ✔ [assert-true] Component schema for switch is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap switch has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap switch has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for switch is missing name metadata. */ -/* ✔ [assert-true] Component schema for tabs is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap tabs has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap tabs has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for tabs is missing name metadata. */ -/* ✔ [assert-true] Component schema for tile-manager is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap tile-manager has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap tile-manager has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for tile-manager is missing name metadata. */ -/* ✔ [assert-true] Component schema for time-picker is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap time-picker has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap time-picker has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for time-picker is missing name metadata. */ -/* ✔ [assert-true] Component schema for toast is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap toast has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap toast has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for toast is missing name metadata. */ -/* ✔ [assert-true] Component schema for tooltip is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap tooltip has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap tooltip has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for tooltip is missing name metadata. */ -/* ✔ [assert-true] Component schema for tree is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap tree has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap tree has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for tree is missing name metadata. */ -/* ✔ [assert-true] Component schema for validator is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap validator has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap validator has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for validator is missing name metadata. */ -/* ✔ [assert-true] Component schema for watermark is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap watermark has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap watermark has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for watermark is missing name metadata. */ -/* ✔ [assert-true] Component schema for file-input is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap file-input has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark bootstrap file-input has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for file-input is missing name metadata. */ -/* ✔ [assert-true] Component schema for category-chart is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent category-chart has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent category-chart has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for category-chart is missing name metadata. */ -/* ✔ [assert-true] Component schema for data-chart is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent data-chart has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent data-chart has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for data-chart is missing name metadata. */ -/* ✔ [assert-true] Component schema for doughnut-chart is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent doughnut-chart has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent doughnut-chart has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for doughnut-chart is missing name metadata. */ -/* ✔ [assert-true] Component schema for financial-chart is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent financial-chart has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent financial-chart has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for financial-chart is missing name metadata. */ -/* ✔ [assert-true] Component schema for funnel-chart is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent funnel-chart has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent funnel-chart has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for funnel-chart is missing name metadata. */ -/* ✔ [assert-true] Component schema for linear-gauge is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent linear-gauge has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent linear-gauge has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for linear-gauge is missing name metadata. */ -/* ✔ [assert-true] Component schema for radial-gauge is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent radial-gauge has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent radial-gauge has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for radial-gauge is missing name metadata. */ -/* ✔ [assert-true] Component schema for geo-map is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent geo-map has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent geo-map has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for geo-map is missing name metadata. */ -/* ✔ [assert-true] Component schema for bullet-graph is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent bullet-graph has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent bullet-graph has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for bullet-graph is missing name metadata. */ -/* ✔ [assert-true] Component schema for pie-chart is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent pie-chart has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent pie-chart has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for pie-chart is missing name metadata. */ -/* ✔ [assert-true] Component schema for shape-chart is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent shape-chart has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent shape-chart has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for shape-chart is missing name metadata. */ -/* ✔ [assert-true] Component schema for sparkline is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent sparkline has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent sparkline has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for sparkline is missing name metadata. */ -/* ✔ [assert-true] Component schema for action-strip is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent action-strip has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent action-strip has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for action-strip is missing name metadata. */ -/* ✔ [assert-true] Component schema for avatar is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent avatar has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent avatar has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for avatar is missing name metadata. */ -/* ✔ [assert-true] Component schema for badge is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent badge has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent badge has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for badge is missing name metadata. */ -/* ✔ [assert-true] Component schema for banner is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent banner has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent banner has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for banner is missing name metadata. */ -/* ✔ [assert-true] Component schema for bottom-nav is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent bottom-nav has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent bottom-nav has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for bottom-nav is missing name metadata. */ -/* ✔ [assert-true] Component schema for flat button is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent flat button has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent flat button has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for flat button is missing name metadata. */ -/* ✔ [assert-true] Component schema for outlined button is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent outlined button has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent outlined button has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for outlined button is missing name metadata. */ -/* ✔ [assert-true] Component schema for contained button is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent contained button has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent contained button has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for contained button is missing name metadata. */ -/* ✔ [assert-true] Component schema for fab button is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent fab button has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent fab button has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for fab button is missing name metadata. */ -/* ✔ [assert-true] Component schema for button-group is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent button-group has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent button-group has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for button-group is missing name metadata. */ -/* ✔ [assert-true] Component schema for calendar is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent calendar has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent calendar has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for calendar is missing name metadata. */ -/* ✔ [assert-true] Component schema for card is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent card has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent card has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for card is missing name metadata. */ -/* ✔ [assert-true] Component schema for carousel is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent carousel has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent carousel has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for carousel is missing name metadata. */ -/* ✔ [assert-true] Component schema for chat is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent chat has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent chat has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for chat is missing name metadata. */ -/* ✔ [assert-true] Component schema for checkbox is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent checkbox has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent checkbox has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for checkbox is missing name metadata. */ -/* ✔ [assert-true] Component schema for chip is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent chip has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent chip has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for chip is missing name metadata. */ -/* ✔ [assert-true] Component schema for color-picker is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent color-picker has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent color-picker has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for color-picker is missing name metadata. */ -/* ✔ [assert-true] Component schema for column-actions is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent column-actions has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent column-actions has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for column-actions is missing name metadata. */ -/* ✔ [assert-true] Component schema for combo is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent combo has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent combo has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for combo is missing name metadata. */ -/* ✔ [assert-true] Component schema for date-picker is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent date-picker has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent date-picker has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for date-picker is missing name metadata. */ -/* ✔ [assert-true] Component schema for date-range is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent date-range has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent date-range has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for date-range is missing name metadata. */ -/* ✔ [assert-true] Component schema for dialog is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent dialog has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent dialog has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for dialog is missing name metadata. */ -/* ✔ [assert-true] Component schema for divider is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent divider has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent divider has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for divider is missing name metadata. */ -/* ✔ [assert-true] Component schema for dockmanager is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent dockmanager has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent dockmanager has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for dockmanager is missing name metadata. */ -/* ✔ [assert-true] Component schema for drop-down is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent drop-down has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent drop-down has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for drop-down is missing name metadata. */ -/* ✔ [assert-true] Component schema for expansion-panel is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent expansion-panel has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent expansion-panel has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for expansion-panel is missing name metadata. */ -/* ✔ [assert-true] Component schema for grid is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent grid has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent grid has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for grid is missing name metadata. */ -/* ✔ [assert-true] Component schema for grid-excel-filtering is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent grid-excel-filtering has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent grid-excel-filtering has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for grid-excel-filtering is missing name metadata. */ -/* ✔ [assert-true] Component schema for grid-filtering is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent grid-filtering has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent grid-filtering has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for grid-filtering is missing name metadata. */ -/* ✔ [assert-true] Component schema for grid-summary is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent grid-summary has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent grid-summary has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for grid-summary is missing name metadata. */ -/* ✔ [assert-true] Component schema for grid-toolbar is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent grid-toolbar has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent grid-toolbar has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for grid-toolbar is missing name metadata. */ -/* ✔ [assert-true] Component schema for highlight is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent highlight has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent highlight has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for highlight is missing name metadata. */ -/* ✔ [assert-true] Component schema for icon is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent icon has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent icon has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for icon is missing name metadata. */ -/* ✔ [assert-true] Component schema for flat icon-button is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent flat icon-button has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent flat icon-button has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for flat icon-button is missing name metadata. */ -/* ✔ [assert-true] Component schema for outlined icon-button is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent outlined icon-button has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent outlined icon-button has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for outlined icon-button is missing name metadata. */ -/* ✔ [assert-true] Component schema for contained icon-button is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent contained icon-button has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent contained icon-button has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for contained icon-button is missing name metadata. */ -/* ✔ [assert-true] Component schema for input-group is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent input-group has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent input-group has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for input-group is missing name metadata. */ -/* ✔ [assert-true] Component schema for label is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent label has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent label has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for label is missing name metadata. */ -/* ✔ [assert-true] Component schema for list is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent list has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent list has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for list is missing name metadata. */ -/* ✔ [assert-true] Component schema for navbar is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent navbar has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent navbar has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for navbar is missing name metadata. */ -/* ✔ [assert-true] Component schema for nav-drawer is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent nav-drawer has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent nav-drawer has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for nav-drawer is missing name metadata. */ -/* ✔ [assert-true] Component schema for overlay is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent overlay has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent overlay has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for overlay is missing name metadata. */ -/* ✔ [assert-true] Component schema for paginator is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent paginator has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent paginator has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for paginator is missing name metadata. */ -/* ✔ [assert-true] Component schema for pivot-data-selector is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent pivot-data-selector has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent pivot-data-selector has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for pivot-data-selector is missing name metadata. */ -/* ✔ [assert-true] Component schema for linear-bar is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent linear-bar has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent linear-bar has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for linear-bar is missing name metadata. */ -/* ✔ [assert-true] Component schema for circular-bar is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent circular-bar has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent circular-bar has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for circular-bar is missing name metadata. */ -/* ✔ [assert-true] Component schema for qr-code is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent qr-code has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent qr-code has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for qr-code is missing name metadata. */ -/* ✔ [assert-true] Component schema for query-builder is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent query-builder has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent query-builder has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for query-builder is missing name metadata. */ -/* ✔ [assert-true] Component schema for radio is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent radio has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent radio has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for radio is missing name metadata. */ -/* ✔ [assert-true] Component schema for rating is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent rating has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent rating has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for rating is missing name metadata. */ -/* ✔ [assert-true] Component schema for resize-indicator is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent resize-indicator has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent resize-indicator has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for resize-indicator is missing name metadata. */ -/* ✔ [assert-true] Component schema for ripple is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent ripple has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent ripple has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for ripple is missing name metadata. */ -/* ✔ [assert-true] Component schema for scrollbar is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent scrollbar has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent scrollbar has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for scrollbar is missing name metadata. */ -/* ✔ [assert-true] Component schema for select is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent select has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent select has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for select is missing name metadata. */ -/* ✔ [assert-true] Component schema for slider is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent slider has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent slider has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for slider is missing name metadata. */ -/* ✔ [assert-true] Component schema for snackbar is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent snackbar has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent snackbar has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for snackbar is missing name metadata. */ -/* ✔ [assert-true] Component schema for splitter is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent splitter has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent splitter has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for splitter is missing name metadata. */ -/* ✔ [assert-true] Component schema for stepper is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent stepper has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent stepper has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for stepper is missing name metadata. */ -/* ✔ [assert-true] Component schema for switch is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent switch has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent switch has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for switch is missing name metadata. */ -/* ✔ [assert-true] Component schema for tabs is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent tabs has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent tabs has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for tabs is missing name metadata. */ -/* ✔ [assert-true] Component schema for tile-manager is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent tile-manager has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent tile-manager has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for tile-manager is missing name metadata. */ -/* ✔ [assert-true] Component schema for time-picker is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent time-picker has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent time-picker has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for time-picker is missing name metadata. */ -/* ✔ [assert-true] Component schema for toast is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent toast has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent toast has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for toast is missing name metadata. */ -/* ✔ [assert-true] Component schema for tooltip is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent tooltip has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent tooltip has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for tooltip is missing name metadata. */ -/* ✔ [assert-true] Component schema for tree is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent tree has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent tree has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for tree is missing name metadata. */ -/* ✔ [assert-true] Component schema for validator is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent validator has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent validator has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for validator is missing name metadata. */ -/* ✔ [assert-true] Component schema for watermark is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent watermark has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent watermark has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for watermark is missing name metadata. */ -/* ✔ [assert-true] Component schema for file-input is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent file-input has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark fluent file-input has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for file-input is missing name metadata. */ -/* ✔ [assert-true] Component schema for category-chart is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo category-chart has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo category-chart has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for category-chart is missing name metadata. */ -/* ✔ [assert-true] Component schema for data-chart is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo data-chart has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo data-chart has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for data-chart is missing name metadata. */ -/* ✔ [assert-true] Component schema for doughnut-chart is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo doughnut-chart has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo doughnut-chart has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for doughnut-chart is missing name metadata. */ -/* ✔ [assert-true] Component schema for financial-chart is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo financial-chart has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo financial-chart has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for financial-chart is missing name metadata. */ -/* ✔ [assert-true] Component schema for funnel-chart is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo funnel-chart has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo funnel-chart has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for funnel-chart is missing name metadata. */ -/* ✔ [assert-true] Component schema for linear-gauge is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo linear-gauge has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo linear-gauge has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for linear-gauge is missing name metadata. */ -/* ✔ [assert-true] Component schema for radial-gauge is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo radial-gauge has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo radial-gauge has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for radial-gauge is missing name metadata. */ -/* ✔ [assert-true] Component schema for geo-map is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo geo-map has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo geo-map has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for geo-map is missing name metadata. */ -/* ✔ [assert-true] Component schema for bullet-graph is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo bullet-graph has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo bullet-graph has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for bullet-graph is missing name metadata. */ -/* ✔ [assert-true] Component schema for pie-chart is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo pie-chart has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo pie-chart has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for pie-chart is missing name metadata. */ -/* ✔ [assert-true] Component schema for shape-chart is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo shape-chart has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo shape-chart has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for shape-chart is missing name metadata. */ -/* ✔ [assert-true] Component schema for sparkline is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo sparkline has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo sparkline has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for sparkline is missing name metadata. */ -/* ✔ [assert-true] Component schema for action-strip is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo action-strip has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo action-strip has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for action-strip is missing name metadata. */ -/* ✔ [assert-true] Component schema for avatar is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo avatar has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo avatar has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for avatar is missing name metadata. */ -/* ✔ [assert-true] Component schema for badge is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo badge has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo badge has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for badge is missing name metadata. */ -/* ✔ [assert-true] Component schema for banner is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo banner has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo banner has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for banner is missing name metadata. */ -/* ✔ [assert-true] Component schema for bottom-nav is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo bottom-nav has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo bottom-nav has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for bottom-nav is missing name metadata. */ -/* ✔ [assert-true] Component schema for flat button is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo flat button has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo flat button has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for flat button is missing name metadata. */ -/* ✔ [assert-true] Component schema for outlined button is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo outlined button has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo outlined button has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for outlined button is missing name metadata. */ -/* ✔ [assert-true] Component schema for contained button is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo contained button has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo contained button has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for contained button is missing name metadata. */ -/* ✔ [assert-true] Component schema for fab button is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo fab button has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo fab button has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for fab button is missing name metadata. */ -/* ✔ [assert-true] Component schema for button-group is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo button-group has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo button-group has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for button-group is missing name metadata. */ -/* ✔ [assert-true] Component schema for calendar is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo calendar has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo calendar has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for calendar is missing name metadata. */ -/* ✔ [assert-true] Component schema for card is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo card has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo card has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for card is missing name metadata. */ -/* ✔ [assert-true] Component schema for carousel is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo carousel has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo carousel has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for carousel is missing name metadata. */ -/* ✔ [assert-true] Component schema for chat is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo chat has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo chat has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for chat is missing name metadata. */ -/* ✔ [assert-true] Component schema for checkbox is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo checkbox has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo checkbox has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for checkbox is missing name metadata. */ -/* ✔ [assert-true] Component schema for chip is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo chip has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo chip has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for chip is missing name metadata. */ -/* ✔ [assert-true] Component schema for color-picker is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo color-picker has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo color-picker has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for color-picker is missing name metadata. */ -/* ✔ [assert-true] Component schema for column-actions is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo column-actions has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo column-actions has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for column-actions is missing name metadata. */ -/* ✔ [assert-true] Component schema for combo is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo combo has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo combo has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for combo is missing name metadata. */ -/* ✔ [assert-true] Component schema for date-picker is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo date-picker has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo date-picker has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for date-picker is missing name metadata. */ -/* ✔ [assert-true] Component schema for date-range is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo date-range has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo date-range has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for date-range is missing name metadata. */ -/* ✔ [assert-true] Component schema for dialog is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo dialog has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo dialog has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for dialog is missing name metadata. */ -/* ✔ [assert-true] Component schema for divider is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo divider has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo divider has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for divider is missing name metadata. */ -/* ✔ [assert-true] Component schema for dockmanager is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo dockmanager has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo dockmanager has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for dockmanager is missing name metadata. */ -/* ✔ [assert-true] Component schema for drop-down is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo drop-down has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo drop-down has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for drop-down is missing name metadata. */ -/* ✔ [assert-true] Component schema for expansion-panel is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo expansion-panel has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo expansion-panel has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for expansion-panel is missing name metadata. */ -/* ✔ [assert-true] Component schema for grid is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo grid has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo grid has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for grid is missing name metadata. */ -/* ✔ [assert-true] Component schema for grid-excel-filtering is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo grid-excel-filtering has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo grid-excel-filtering has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for grid-excel-filtering is missing name metadata. */ -/* ✔ [assert-true] Component schema for grid-filtering is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo grid-filtering has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo grid-filtering has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for grid-filtering is missing name metadata. */ -/* ✔ [assert-true] Component schema for grid-summary is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo grid-summary has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo grid-summary has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for grid-summary is missing name metadata. */ -/* ✔ [assert-true] Component schema for grid-toolbar is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo grid-toolbar has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo grid-toolbar has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for grid-toolbar is missing name metadata. */ -/* ✔ [assert-true] Component schema for highlight is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo highlight has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo highlight has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for highlight is missing name metadata. */ -/* ✔ [assert-true] Component schema for icon is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo icon has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo icon has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for icon is missing name metadata. */ -/* ✔ [assert-true] Component schema for flat icon-button is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo flat icon-button has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo flat icon-button has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for flat icon-button is missing name metadata. */ -/* ✔ [assert-true] Component schema for outlined icon-button is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo outlined icon-button has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo outlined icon-button has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for outlined icon-button is missing name metadata. */ -/* ✔ [assert-true] Component schema for contained icon-button is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo contained icon-button has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo contained icon-button has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for contained icon-button is missing name metadata. */ -/* ✔ [assert-true] Component schema for input-group is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo input-group has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo input-group has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for input-group is missing name metadata. */ -/* ✔ [assert-true] Component schema for label is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo label has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo label has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for label is missing name metadata. */ -/* ✔ [assert-true] Component schema for list is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo list has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo list has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for list is missing name metadata. */ -/* ✔ [assert-true] Component schema for navbar is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo navbar has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo navbar has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for navbar is missing name metadata. */ -/* ✔ [assert-true] Component schema for nav-drawer is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo nav-drawer has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo nav-drawer has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for nav-drawer is missing name metadata. */ -/* ✔ [assert-true] Component schema for overlay is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo overlay has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo overlay has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for overlay is missing name metadata. */ -/* ✔ [assert-true] Component schema for paginator is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo paginator has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo paginator has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for paginator is missing name metadata. */ -/* ✔ [assert-true] Component schema for pivot-data-selector is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo pivot-data-selector has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo pivot-data-selector has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for pivot-data-selector is missing name metadata. */ -/* ✔ [assert-true] Component schema for linear-bar is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo linear-bar has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo linear-bar has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for linear-bar is missing name metadata. */ -/* ✔ [assert-true] Component schema for circular-bar is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo circular-bar has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo circular-bar has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for circular-bar is missing name metadata. */ -/* ✔ [assert-true] Component schema for qr-code is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo qr-code has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo qr-code has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for qr-code is missing name metadata. */ -/* ✔ [assert-true] Component schema for query-builder is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo query-builder has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo query-builder has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for query-builder is missing name metadata. */ -/* ✔ [assert-true] Component schema for radio is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo radio has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo radio has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for radio is missing name metadata. */ -/* ✔ [assert-true] Component schema for rating is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo rating has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo rating has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for rating is missing name metadata. */ -/* ✔ [assert-true] Component schema for resize-indicator is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo resize-indicator has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo resize-indicator has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for resize-indicator is missing name metadata. */ -/* ✔ [assert-true] Component schema for ripple is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo ripple has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo ripple has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for ripple is missing name metadata. */ -/* ✔ [assert-true] Component schema for scrollbar is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo scrollbar has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo scrollbar has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for scrollbar is missing name metadata. */ -/* ✔ [assert-true] Component schema for select is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo select has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo select has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for select is missing name metadata. */ -/* ✔ [assert-true] Component schema for slider is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo slider has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo slider has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for slider is missing name metadata. */ -/* ✔ [assert-true] Component schema for snackbar is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo snackbar has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo snackbar has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for snackbar is missing name metadata. */ -/* ✔ [assert-true] Component schema for splitter is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo splitter has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo splitter has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for splitter is missing name metadata. */ -/* ✔ [assert-true] Component schema for stepper is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo stepper has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo stepper has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for stepper is missing name metadata. */ -/* ✔ [assert-true] Component schema for switch is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo switch has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo switch has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for switch is missing name metadata. */ -/* ✔ [assert-true] Component schema for tabs is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo tabs has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo tabs has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for tabs is missing name metadata. */ -/* ✔ [assert-true] Component schema for tile-manager is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo tile-manager has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo tile-manager has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for tile-manager is missing name metadata. */ -/* ✔ [assert-true] Component schema for time-picker is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo time-picker has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo time-picker has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for time-picker is missing name metadata. */ -/* ✔ [assert-true] Component schema for toast is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo toast has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo toast has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for toast is missing name metadata. */ -/* ✔ [assert-true] Component schema for tooltip is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo tooltip has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo tooltip has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for tooltip is missing name metadata. */ -/* ✔ [assert-true] Component schema for tree is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo tree has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo tree has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for tree is missing name metadata. */ -/* ✔ [assert-true] Component schema for validator is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo validator has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo validator has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for validator is missing name metadata. */ -/* ✔ [assert-true] Component schema for watermark is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo watermark has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo watermark has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for watermark is missing name metadata. */ -/* ✔ [assert-true] Component schema for file-input is missing metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo file-input has missing/malformed theme metadata. */ -/* ✔ [assert-equal] Component schema for dark indigo file-input has missing/malformed variant metadata. */ -/* ✔ [assert-true] Component schema for file-input is missing name metadata. */ -/* */ -/* Test: should resolve the border-radius function from schema definitions */ -/* ✔ [assert-equal] should resolve the border-radius function from schema definitions */ -/* */ -/* Test: should retrieve a reference to the CSS variable for a given theme */ -/* ✔ [assert-equal] should retrieve a reference to the CSS variable for a given theme */ -/* */ -/* Test: should convert component theme props into CSS variables */ -/* ASSERT: */ -/* OUTPUT */ -.test-output { - --background: var(--igx-test-component-background, var(--ig-test-component-background, var(--ig-primary-400))); - --hover-background: var(--igx-test-component-hover-background, var(--ig-test-component-hover-background, hsl(from var(--ig-secondary-700) h s l/0.26))); - --foreground: var(--igx-test-component-foreground, var(--ig-test-component-foreground, var(--ig-primary-400-contrast))); - --hover-foreground: var(--igx-test-component-hover-foreground, var(--ig-test-component-hover-foreground, var(--ig-secondary-700-contrast))); - --border-style: var(--igx-test-component-border-style, var(--ig-test-component-border-style, solid)); - --border-radius: var(--igx-test-component-border-radius, var(--ig-test-component-border-radius, 0.125rem)); - --brushes: var(--igx-test-component-brushes, var(--ig-test-component-brushes, var(--chart-brushes))); - --resting-elevation: var(--igx-test-component-resting-elevation, var(--ig-test-component-resting-elevation, var(--ig-elevation-2))); - --ig-theme: material; - --ig-theme-variant: light; -} - -/* END_OUTPUT */ -/* EXPECTED */ -.test-output { - --background: var(--igx-test-component-background, var(--ig-test-component-background, var(--ig-primary-400))); - --hover-background: var(--igx-test-component-hover-background, var(--ig-test-component-hover-background, hsl(from var(--ig-secondary-700) h s l/0.26))); - --foreground: var(--igx-test-component-foreground, var(--ig-test-component-foreground, var(--ig-primary-400-contrast))); - --hover-foreground: var(--igx-test-component-hover-foreground, var(--ig-test-component-hover-foreground, var(--ig-secondary-700-contrast))); - --border-style: var(--igx-test-component-border-style, var(--ig-test-component-border-style, solid)); - --border-radius: var(--igx-test-component-border-radius, var(--ig-test-component-border-radius, 0.125rem)); - --brushes: var(--igx-test-component-brushes, var(--ig-test-component-brushes, var(--chart-brushes))); - --resting-elevation: var(--igx-test-component-resting-elevation, var(--ig-test-component-resting-elevation, var(--ig-elevation-2))); - --ig-theme: material; - --ig-theme-variant: light; -} - -/* END_EXPECTED */ -/* END_ASSERT */ -/* */ -/* Test: should prepend the prefix to CSS variable names when the theme map includes a prefix */ -/* ASSERT: */ -/* OUTPUT */ -.test-output { - --igc-background: var(--igx-test-component-background, var(--ig-test-component-background, var(--ig-primary-400))); - --igc-hover-background: var(--igx-test-component-hover-background, var(--ig-test-component-hover-background, hsl(from var(--ig-secondary-700) h s l/0.26))); - --igc-foreground: var(--igx-test-component-foreground, var(--ig-test-component-foreground, var(--ig-primary-400-contrast))); - --igc-hover-foreground: var(--igx-test-component-hover-foreground, var(--ig-test-component-hover-foreground, var(--ig-secondary-700-contrast))); - --igc-border-style: var(--igx-test-component-border-style, var(--ig-test-component-border-style, solid)); - --igc-border-radius: var(--igx-test-component-border-radius, var(--ig-test-component-border-radius, 0.125rem)); - --igc-brushes: var(--igx-test-component-brushes, var(--ig-test-component-brushes, var(--chart-brushes))); - --igc-resting-elevation: var(--igx-test-component-resting-elevation, var(--ig-test-component-resting-elevation, var(--ig-elevation-2))); - --ig-theme: material; - --ig-theme-variant: light; -} - -/* END_OUTPUT */ -/* EXPECTED */ -.test-output { - --igc-background: var(--igx-test-component-background, var(--ig-test-component-background, var(--ig-primary-400))); - --igc-hover-background: var(--igx-test-component-hover-background, var(--ig-test-component-hover-background, hsl(from var(--ig-secondary-700) h s l/0.26))); - --igc-foreground: var(--igx-test-component-foreground, var(--ig-test-component-foreground, var(--ig-primary-400-contrast))); - --igc-hover-foreground: var(--igx-test-component-hover-foreground, var(--ig-test-component-hover-foreground, var(--ig-secondary-700-contrast))); - --igc-border-style: var(--igx-test-component-border-style, var(--ig-test-component-border-style, solid)); - --igc-border-radius: var(--igx-test-component-border-radius, var(--ig-test-component-border-radius, 0.125rem)); - --igc-brushes: var(--igx-test-component-brushes, var(--ig-test-component-brushes, var(--chart-brushes))); - --igc-resting-elevation: var(--igx-test-component-resting-elevation, var(--ig-test-component-resting-elevation, var(--ig-elevation-2))); - --ig-theme: material; - --ig-theme-variant: light; -} - -/* END_EXPECTED */ -/* END_ASSERT */ -/* */ -/* Test: should not prepend a prefix when the theme map has no prefix property */ -/* ✔ [assert-false] Digested schema should not have a prefix key */ -/* ASSERT: */ -/* OUTPUT */ -.test-output { - --background: var(--igx-test-component-background, var(--ig-test-component-background, var(--ig-primary-400))); - --hover-background: var(--igx-test-component-hover-background, var(--ig-test-component-hover-background, hsl(from var(--ig-secondary-700) h s l/0.26))); - --foreground: var(--igx-test-component-foreground, var(--ig-test-component-foreground, var(--ig-primary-400-contrast))); - --hover-foreground: var(--igx-test-component-hover-foreground, var(--ig-test-component-hover-foreground, var(--ig-secondary-700-contrast))); - --border-style: var(--igx-test-component-border-style, var(--ig-test-component-border-style, solid)); - --border-radius: var(--igx-test-component-border-radius, var(--ig-test-component-border-radius, 0.125rem)); - --brushes: var(--igx-test-component-brushes, var(--ig-test-component-brushes, var(--chart-brushes))); - --resting-elevation: var(--igx-test-component-resting-elevation, var(--ig-test-component-resting-elevation, var(--ig-elevation-2))); - --ig-theme: material; - --ig-theme-variant: light; -} - -/* END_OUTPUT */ -/* EXPECTED */ -.test-output { - --background: var(--igx-test-component-background, var(--ig-test-component-background, var(--ig-primary-400))); - --hover-background: var(--igx-test-component-hover-background, var(--ig-test-component-hover-background, hsl(from var(--ig-secondary-700) h s l/0.26))); - --foreground: var(--igx-test-component-foreground, var(--ig-test-component-foreground, var(--ig-primary-400-contrast))); - --hover-foreground: var(--igx-test-component-hover-foreground, var(--ig-test-component-hover-foreground, var(--ig-secondary-700-contrast))); - --border-style: var(--igx-test-component-border-style, var(--ig-test-component-border-style, solid)); - --border-radius: var(--igx-test-component-border-radius, var(--ig-test-component-border-radius, 0.125rem)); - --brushes: var(--igx-test-component-brushes, var(--ig-test-component-brushes, var(--chart-brushes))); - --resting-elevation: var(--igx-test-component-resting-elevation, var(--ig-test-component-resting-elevation, var(--ig-elevation-2))); - --ig-theme: material; - --ig-theme-variant: light; -} - -/* END_EXPECTED */ -/* END_ASSERT */ -/* */ -/* Test: should scope prefixed CSS variables correctly via the tokens mixin */ -/* ASSERT: */ -/* OUTPUT */ -igc-dockmanager { - --igc-background: var(--igx-test-component-background, var(--ig-test-component-background, var(--ig-primary-400))); - --igc-hover-background: var(--igx-test-component-hover-background, var(--ig-test-component-hover-background, hsl(from var(--ig-secondary-700) h s l/0.26))); - --igc-foreground: var(--igx-test-component-foreground, var(--ig-test-component-foreground, var(--ig-primary-400-contrast))); - --igc-hover-foreground: var(--igx-test-component-hover-foreground, var(--ig-test-component-hover-foreground, var(--ig-secondary-700-contrast))); - --igc-border-style: var(--igx-test-component-border-style, var(--ig-test-component-border-style, solid)); - --igc-border-radius: var(--igx-test-component-border-radius, var(--ig-test-component-border-radius, 0.125rem)); - --igc-brushes: var(--igx-test-component-brushes, var(--ig-test-component-brushes, var(--chart-brushes))); - --igc-resting-elevation: var(--igx-test-component-resting-elevation, var(--ig-test-component-resting-elevation, var(--ig-elevation-2))); - --ig-theme: material; - --ig-theme-variant: light; -} - -/* END_OUTPUT */ -/* EXPECTED */ -igc-dockmanager { - --igc-background: var(--igx-test-component-background, var(--ig-test-component-background, var(--ig-primary-400))); - --igc-hover-background: var(--igx-test-component-hover-background, var(--ig-test-component-hover-background, hsl(from var(--ig-secondary-700) h s l/0.26))); - --igc-foreground: var(--igx-test-component-foreground, var(--ig-test-component-foreground, var(--ig-primary-400-contrast))); - --igc-hover-foreground: var(--igx-test-component-hover-foreground, var(--ig-test-component-hover-foreground, var(--ig-secondary-700-contrast))); - --igc-border-style: var(--igx-test-component-border-style, var(--ig-test-component-border-style, solid)); - --igc-border-radius: var(--igx-test-component-border-radius, var(--ig-test-component-border-radius, 0.125rem)); - --igc-brushes: var(--igx-test-component-brushes, var(--ig-test-component-brushes, var(--chart-brushes))); - --igc-resting-elevation: var(--igx-test-component-resting-elevation, var(--ig-test-component-resting-elevation, var(--ig-elevation-2))); - --ig-theme: material; - --ig-theme-variant: light; -} - -/* END_EXPECTED */ -/* END_ASSERT */ -/* */ -/* Test: should ignore $name property when provided to css-vars-from-theme mixin */ -/* ASSERT: */ -/* OUTPUT */ -.test-output { - --background: var(--igx-test-component-background, var(--ig-test-component-background, var(--ig-primary-400))); - --hover-background: var(--igx-test-component-hover-background, var(--ig-test-component-hover-background, hsl(from var(--ig-secondary-700) h s l/0.26))); - --foreground: var(--igx-test-component-foreground, var(--ig-test-component-foreground, var(--ig-primary-400-contrast))); - --hover-foreground: var(--igx-test-component-hover-foreground, var(--ig-test-component-hover-foreground, var(--ig-secondary-700-contrast))); - --border-style: var(--igx-test-component-border-style, var(--ig-test-component-border-style, solid)); - --border-radius: var(--igx-test-component-border-radius, var(--ig-test-component-border-radius, 0.125rem)); - --brushes: var(--igx-test-component-brushes, var(--ig-test-component-brushes, var(--chart-brushes))); - --resting-elevation: var(--igx-test-component-resting-elevation, var(--ig-test-component-resting-elevation, var(--ig-elevation-2))); - --ig-theme: material; - --ig-theme-variant: light; -} - -/* END_OUTPUT */ -/* EXPECTED */ -.test-output { - --background: var(--igx-test-component-background, var(--ig-test-component-background, var(--ig-primary-400))); - --hover-background: var(--igx-test-component-hover-background, var(--ig-test-component-hover-background, hsl(from var(--ig-secondary-700) h s l/0.26))); - --foreground: var(--igx-test-component-foreground, var(--ig-test-component-foreground, var(--ig-primary-400-contrast))); - --hover-foreground: var(--igx-test-component-hover-foreground, var(--ig-test-component-hover-foreground, var(--ig-secondary-700-contrast))); - --border-style: var(--igx-test-component-border-style, var(--ig-test-component-border-style, solid)); - --border-radius: var(--igx-test-component-border-radius, var(--ig-test-component-border-radius, 0.125rem)); - --brushes: var(--igx-test-component-brushes, var(--ig-test-component-brushes, var(--chart-brushes))); - --resting-elevation: var(--igx-test-component-resting-elevation, var(--ig-test-component-resting-elevation, var(--ig-elevation-2))); - --ig-theme: material; - --ig-theme-variant: light; -} - -/* END_EXPECTED */ -/* END_ASSERT */ -/* */ -/* Test: should ignore all keys in the ignore list */ -/* ASSERT: */ -/* OUTPUT */ -.test-output { - --background: var(--igx-test-component-background, var(--ig-test-component-background, var(--ig-primary-400))); - --hover-background: var(--igx-test-component-hover-background, var(--ig-test-component-hover-background, hsl(from var(--ig-secondary-700) h s l/0.26))); - --foreground: var(--igx-test-component-foreground, var(--ig-test-component-foreground, var(--ig-primary-400-contrast))); - --hover-foreground: var(--igx-test-component-hover-foreground, var(--ig-test-component-hover-foreground, var(--ig-secondary-700-contrast))); - --border-style: var(--igx-test-component-border-style, var(--ig-test-component-border-style, solid)); - --border-radius: var(--igx-test-component-border-radius, var(--ig-test-component-border-radius, 0.125rem)); - --brushes: var(--igx-test-component-brushes, var(--ig-test-component-brushes, var(--chart-brushes))); - --resting-elevation: var(--igx-test-component-resting-elevation, var(--ig-test-component-resting-elevation, var(--ig-elevation-2))); - --ig-theme: material; - --ig-theme-variant: light; -} - -/* END_OUTPUT */ -/* EXPECTED */ -.test-output { - --background: var(--igx-test-component-background, var(--ig-test-component-background, var(--ig-primary-400))); - --hover-background: var(--igx-test-component-hover-background, var(--ig-test-component-hover-background, hsl(from var(--ig-secondary-700) h s l/0.26))); - --foreground: var(--igx-test-component-foreground, var(--ig-test-component-foreground, var(--ig-primary-400-contrast))); - --hover-foreground: var(--igx-test-component-hover-foreground, var(--ig-test-component-hover-foreground, var(--ig-secondary-700-contrast))); - --border-style: var(--igx-test-component-border-style, var(--ig-test-component-border-style, solid)); - --border-radius: var(--igx-test-component-border-radius, var(--ig-test-component-border-radius, 0.125rem)); - --brushes: var(--igx-test-component-brushes, var(--ig-test-component-brushes, var(--chart-brushes))); - --resting-elevation: var(--igx-test-component-resting-elevation, var(--ig-test-component-resting-elevation, var(--ig-elevation-2))); - --ig-theme: material; - --ig-theme-variant: light; -} - -/* END_EXPECTED */ -/* END_ASSERT */ -/* */ -/* Test: should scope theme CSS variables correctly */ -/* ASSERT: */ -/* OUTPUT */ -igc-avatar { - --background: var(--igx-test-component-background, var(--ig-test-component-background, var(--ig-primary-400))); - --hover-background: var(--igx-test-component-hover-background, var(--ig-test-component-hover-background, hsl(from var(--ig-secondary-700) h s l/0.26))); - --foreground: var(--igx-test-component-foreground, var(--ig-test-component-foreground, var(--ig-primary-400-contrast))); - --hover-foreground: var(--igx-test-component-hover-foreground, var(--ig-test-component-hover-foreground, var(--ig-secondary-700-contrast))); - --border-style: var(--igx-test-component-border-style, var(--ig-test-component-border-style, solid)); - --border-radius: var(--igx-test-component-border-radius, var(--ig-test-component-border-radius, 0.125rem)); - --brushes: var(--igx-test-component-brushes, var(--ig-test-component-brushes, var(--chart-brushes))); - --resting-elevation: var(--igx-test-component-resting-elevation, var(--ig-test-component-resting-elevation, var(--ig-elevation-2))); - --ig-theme: material; - --ig-theme-variant: light; -} - -/* END_OUTPUT */ -/* EXPECTED */ -igc-avatar { - --background: var(--igx-test-component-background, var(--ig-test-component-background, var(--ig-primary-400))); - --hover-background: var(--igx-test-component-hover-background, var(--ig-test-component-hover-background, hsl(from var(--ig-secondary-700) h s l/0.26))); - --foreground: var(--igx-test-component-foreground, var(--ig-test-component-foreground, var(--ig-primary-400-contrast))); - --hover-foreground: var(--igx-test-component-hover-foreground, var(--ig-test-component-hover-foreground, var(--ig-secondary-700-contrast))); - --border-style: var(--igx-test-component-border-style, var(--ig-test-component-border-style, solid)); - --border-radius: var(--igx-test-component-border-radius, var(--ig-test-component-border-radius, 0.125rem)); - --brushes: var(--igx-test-component-brushes, var(--ig-test-component-brushes, var(--chart-brushes))); - --resting-elevation: var(--igx-test-component-resting-elevation, var(--ig-test-component-resting-elevation, var(--ig-elevation-2))); - --ig-theme: material; - --ig-theme-variant: light; -} - -/* END_EXPECTED */ -/* END_ASSERT */ -/* ASSERT: */ -/* OUTPUT */ -.my-theme, -.my-theme igc-avatar { - --background: var(--igx-test-component-background, var(--ig-test-component-background, var(--ig-primary-400))); - --hover-background: var(--igx-test-component-hover-background, var(--ig-test-component-hover-background, hsl(from var(--ig-secondary-700) h s l/0.26))); - --foreground: var(--igx-test-component-foreground, var(--ig-test-component-foreground, var(--ig-primary-400-contrast))); - --hover-foreground: var(--igx-test-component-hover-foreground, var(--ig-test-component-hover-foreground, var(--ig-secondary-700-contrast))); - --border-style: var(--igx-test-component-border-style, var(--ig-test-component-border-style, solid)); - --border-radius: var(--igx-test-component-border-radius, var(--ig-test-component-border-radius, 0.125rem)); - --brushes: var(--igx-test-component-brushes, var(--ig-test-component-brushes, var(--chart-brushes))); - --resting-elevation: var(--igx-test-component-resting-elevation, var(--ig-test-component-resting-elevation, var(--ig-elevation-2))); - --ig-theme: material; - --ig-theme-variant: light; -} - -/* END_OUTPUT */ -/* EXPECTED */ -.my-theme, -.my-theme igc-avatar { - --background: var(--igx-test-component-background, var(--ig-test-component-background, var(--ig-primary-400))); - --hover-background: var(--igx-test-component-hover-background, var(--ig-test-component-hover-background, hsl(from var(--ig-secondary-700) h s l/0.26))); - --foreground: var(--igx-test-component-foreground, var(--ig-test-component-foreground, var(--ig-primary-400-contrast))); - --hover-foreground: var(--igx-test-component-hover-foreground, var(--ig-test-component-hover-foreground, var(--ig-secondary-700-contrast))); - --border-style: var(--igx-test-component-border-style, var(--ig-test-component-border-style, solid)); - --border-radius: var(--igx-test-component-border-radius, var(--ig-test-component-border-radius, 0.125rem)); - --brushes: var(--igx-test-component-brushes, var(--ig-test-component-brushes, var(--chart-brushes))); - --resting-elevation: var(--igx-test-component-resting-elevation, var(--ig-test-component-resting-elevation, var(--ig-elevation-2))); - --ig-theme: material; - --ig-theme-variant: light; -} - -/* END_EXPECTED */ -/* END_ASSERT */ -/* */ -/* Test: should scope theme CSS variables to a specified scope */ -/* ASSERT: */ -/* OUTPUT */ -.custom-selector { - --background: var(--igx-test-component-background, var(--ig-test-component-background, var(--ig-primary-400))); - --hover-background: var(--igx-test-component-hover-background, var(--ig-test-component-hover-background, hsl(from var(--ig-secondary-700) h s l/0.26))); - --foreground: var(--igx-test-component-foreground, var(--ig-test-component-foreground, var(--ig-primary-400-contrast))); - --hover-foreground: var(--igx-test-component-hover-foreground, var(--ig-test-component-hover-foreground, var(--ig-secondary-700-contrast))); - --border-style: var(--igx-test-component-border-style, var(--ig-test-component-border-style, solid)); - --border-radius: var(--igx-test-component-border-radius, var(--ig-test-component-border-radius, 0.125rem)); - --brushes: var(--igx-test-component-brushes, var(--ig-test-component-brushes, var(--chart-brushes))); - --resting-elevation: var(--igx-test-component-resting-elevation, var(--ig-test-component-resting-elevation, var(--ig-elevation-2))); - --ig-theme: material; - --ig-theme-variant: light; -} - -/* END_OUTPUT */ -/* EXPECTED */ -.custom-selector { - --background: var(--igx-test-component-background, var(--ig-test-component-background, var(--ig-primary-400))); - --hover-background: var(--igx-test-component-hover-background, var(--ig-test-component-hover-background, hsl(from var(--ig-secondary-700) h s l/0.26))); - --foreground: var(--igx-test-component-foreground, var(--ig-test-component-foreground, var(--ig-primary-400-contrast))); - --hover-foreground: var(--igx-test-component-hover-foreground, var(--ig-test-component-hover-foreground, var(--ig-secondary-700-contrast))); - --border-style: var(--igx-test-component-border-style, var(--ig-test-component-border-style, solid)); - --border-radius: var(--igx-test-component-border-radius, var(--ig-test-component-border-radius, 0.125rem)); - --brushes: var(--igx-test-component-brushes, var(--ig-test-component-brushes, var(--chart-brushes))); - --resting-elevation: var(--igx-test-component-resting-elevation, var(--ig-test-component-resting-elevation, var(--ig-elevation-2))); - --ig-theme: material; - --ig-theme-variant: light; -} - -/* END_EXPECTED */ -/* END_ASSERT */ -/* ASSERT: */ -/* OUTPUT */ -.my-theme, -.my-theme .custom-selector { - --background: var(--igx-test-component-background, var(--ig-test-component-background, var(--ig-primary-400))); - --hover-background: var(--igx-test-component-hover-background, var(--ig-test-component-hover-background, hsl(from var(--ig-secondary-700) h s l/0.26))); - --foreground: var(--igx-test-component-foreground, var(--ig-test-component-foreground, var(--ig-primary-400-contrast))); - --hover-foreground: var(--igx-test-component-hover-foreground, var(--ig-test-component-hover-foreground, var(--ig-secondary-700-contrast))); - --border-style: var(--igx-test-component-border-style, var(--ig-test-component-border-style, solid)); - --border-radius: var(--igx-test-component-border-radius, var(--ig-test-component-border-radius, 0.125rem)); - --brushes: var(--igx-test-component-brushes, var(--ig-test-component-brushes, var(--chart-brushes))); - --resting-elevation: var(--igx-test-component-resting-elevation, var(--ig-test-component-resting-elevation, var(--ig-elevation-2))); - --ig-theme: material; - --ig-theme-variant: light; -} - -/* END_OUTPUT */ -/* EXPECTED */ -.my-theme, -.my-theme .custom-selector { - --background: var(--igx-test-component-background, var(--ig-test-component-background, var(--ig-primary-400))); - --hover-background: var(--igx-test-component-hover-background, var(--ig-test-component-hover-background, hsl(from var(--ig-secondary-700) h s l/0.26))); - --foreground: var(--igx-test-component-foreground, var(--ig-test-component-foreground, var(--ig-primary-400-contrast))); - --hover-foreground: var(--igx-test-component-hover-foreground, var(--ig-test-component-hover-foreground, var(--ig-secondary-700-contrast))); - --border-style: var(--igx-test-component-border-style, var(--ig-test-component-border-style, solid)); - --border-radius: var(--igx-test-component-border-radius, var(--ig-test-component-border-radius, 0.125rem)); - --brushes: var(--igx-test-component-brushes, var(--ig-test-component-brushes, var(--chart-brushes))); - --resting-elevation: var(--igx-test-component-resting-elevation, var(--ig-test-component-resting-elevation, var(--ig-elevation-2))); - --ig-theme: material; - --ig-theme-variant: light; -} - -/* END_EXPECTED */ -/* END_ASSERT */ -/* */ -/* Test: should set the border-radius to a value between min and max */ -/* ✔ [assert-equal] should set the border-radius to a value between min and max */ -/* */ -/* Test: should include border-radius styles to a given scope with a value between min and max */ -/* ASSERT: */ -/* OUTPUT */ -.test-output { - border-radius: clamp(0.125rem, calc(var(--ig-radius-factor, 1) * 0.25rem), 0.25rem); -} - -/* END_OUTPUT */ -/* EXPECTED */ -.test-output { - border-radius: clamp(0.125rem, calc(var(--ig-radius-factor, 1) * 0.25rem), 0.25rem); -} - -/* END_EXPECTED */ -/* END_ASSERT */ -/* */ -/* Test: include single-line truncate styles when the ellipsis mixin is included */ -/* ASSERT: */ -/* OUTPUT */ -.test-output { - white-space: nowrap; - text-overflow: ellipsis; - overflow: hidden; -} - -/* END_OUTPUT */ -/* EXPECTED */ -.test-output { - white-space: nowrap; - text-overflow: ellipsis; - overflow: hidden; -} - -/* END_EXPECTED */ -/* END_ASSERT */ -/* */ -/* Test: includes multi-line truncate styles when the line-clamp mixin is included */ -/* ASSERT: */ -/* OUTPUT */ -.test-output { - display: -webkit-inline-box; - -webkit-line-clamp: 3; - -webkit-box-orient: vertical; - overflow: hidden; -} - -/* END_OUTPUT */ -/* EXPECTED */ -.test-output { - display: -webkit-inline-box; - -webkit-line-clamp: 3; - -webkit-box-orient: vertical; - overflow: hidden; -} - -/* END_EXPECTED */ -/* END_ASSERT */ -/* */ -/* Test: includes styles that hide the default element when the hide-default mixin is included */ -/* ASSERT: */ -/* OUTPUT */ -.test-output { - position: absolute; - width: 1px; - height: 1px; - margin: -1px; - border: none; - clip: rect(0, 0, 0, 0); - outline: 0; - pointer-events: none; - overflow: hidden; - appearance: none; -} - -/* END_OUTPUT */ -/* EXPECTED */ -.test-output { - position: absolute; - width: 1px; - height: 1px; - margin: -1px; - border: none; - clip: rect(0, 0, 0, 0); - outline: 0; - pointer-events: none; - overflow: hidden; - appearance: none; -} - -/* END_EXPECTED */ -/* END_ASSERT */ -/* */ -/* # Module: Themes :: schemas :: Tokens */ -/* ------------------------------------- */ -/* Test: should generate global tokens with the ig prefix */ -/* ASSERT: */ -/* OUTPUT */ -.test-output { - --ig-test-component-background: var(--ig-primary-400); - --ig-test-component-hover-background: hsl(from var(--ig-secondary-700) h s l/0.26); - --ig-test-component-foreground: var(--ig-primary-400-contrast); - --ig-test-component-hover-foreground: var(--ig-secondary-700-contrast); - --ig-test-component-border-style: solid; - --ig-test-component-border-radius: 0.125rem; - --ig-test-component-brushes: var(--chart-brushes); - --ig-test-component-resting-elevation: var(--ig-elevation-2); -} - -/* END_OUTPUT */ -/* EXPECTED */ -.test-output { - --ig-test-component-background: var(--ig-primary-400); - --ig-test-component-hover-background: hsl(from var(--ig-secondary-700) h s l/0.26); - --ig-test-component-foreground: var(--ig-primary-400-contrast); - --ig-test-component-hover-foreground: var(--ig-secondary-700-contrast); - --ig-test-component-border-style: solid; - --ig-test-component-border-radius: 0.125rem; - --ig-test-component-brushes: var(--chart-brushes); - --ig-test-component-resting-elevation: var(--ig-elevation-2); -} - -/* END_EXPECTED */ -/* END_ASSERT */ -/* */ -/* Test: should rewrite local var references to global ig-prefixed tokens */ -/* ASSERT: */ -/* OUTPUT */ -.test-output { - --ig-test-rewrite-background: red; - --ig-test-rewrite-color: hsla(from color(from var(--ig-test-rewrite-background) var(--y-contrast)) h 0 l/1); - --ig-test-rewrite-border-style: solid; -} - -/* END_OUTPUT */ -/* EXPECTED */ -.test-output { - --ig-test-rewrite-background: red; - --ig-test-rewrite-color: hsla(from color(from var(--ig-test-rewrite-background) var(--y-contrast)) h 0 l/1); - --ig-test-rewrite-border-style: solid; -} - -/* END_EXPECTED */ -/* END_ASSERT */ -/* */ -/* Test: should rewrite multiple local var references in a single value */ -/* ASSERT: */ -/* OUTPUT */ -.test-output { - --ig-test-multi-background: red; - --ig-test-multi-foreground: blue; - --ig-test-multi-computed: calc(var(--ig-test-multi-background) + var(--ig-test-multi-foreground)); -} - -/* END_OUTPUT */ -/* EXPECTED */ -.test-output { - --ig-test-multi-background: red; - --ig-test-multi-foreground: blue; - --ig-test-multi-computed: calc(var(--ig-test-multi-background) + var(--ig-test-multi-foreground)); -} - -/* END_EXPECTED */ -/* END_ASSERT */ -/* */ -/* Test: should skip sizable expressions from schema defaults */ -/* ASSERT: */ -/* OUTPUT */ -.test-output { - --ig-test-sizable-background: red; -} - -/* END_OUTPUT */ -/* EXPECTED */ -.test-output { - --ig-test-sizable-background: red; -} - -/* END_EXPECTED */ -/* END_ASSERT */ -/* */ -/* Test: should emit concrete size values provided by the user */ -/* ASSERT: */ -/* OUTPUT */ -.test-output { - --ig-test-concrete-size-background: red; - --ig-test-concrete-size-size: 2rem; -} - -/* END_OUTPUT */ -/* EXPECTED */ -.test-output { - --ig-test-concrete-size-background: red; - --ig-test-concrete-size-size: 2rem; -} - -/* END_EXPECTED */ -/* END_ASSERT */ -/* */ -/* Test: should not emit ignored keys */ -/* ASSERT: */ -/* OUTPUT */ -.test-output { - --ig-test-component-background: var(--ig-primary-400); - --ig-test-component-hover-background: hsl(from var(--ig-secondary-700) h s l/0.26); - --ig-test-component-foreground: var(--ig-primary-400-contrast); - --ig-test-component-hover-foreground: var(--ig-secondary-700-contrast); - --ig-test-component-border-style: solid; - --ig-test-component-border-radius: 0.125rem; - --ig-test-component-brushes: var(--chart-brushes); - --ig-test-component-resting-elevation: var(--ig-elevation-2); - --ig-test-component-default-size: 2; -} - -/* END_OUTPUT */ -/* EXPECTED */ -.test-output { - --ig-test-component-background: var(--ig-primary-400); - --ig-test-component-hover-background: hsl(from var(--ig-secondary-700) h s l/0.26); - --ig-test-component-foreground: var(--ig-primary-400-contrast); - --ig-test-component-hover-foreground: var(--ig-secondary-700-contrast); - --ig-test-component-border-style: solid; - --ig-test-component-border-radius: 0.125rem; - --ig-test-component-brushes: var(--chart-brushes); - --ig-test-component-resting-elevation: var(--ig-elevation-2); - --ig-test-component-default-size: 2; -} - -/* END_EXPECTED */ -/* END_ASSERT */ -/* */ -/* Test: should always use the ig prefix regardless of configured variable-prefix */ -/* ASSERT: */ -/* OUTPUT */ -.test-output { - --ig-test-prefix-background: blue; -} - -/* END_OUTPUT */ -/* EXPECTED */ -.test-output { - --ig-test-prefix-background: blue; -} - -/* END_EXPECTED */ -/* END_ASSERT */ -/* */ -/* Test: should scope theme CSS variables when mode is scoped */ -/* ASSERT: */ -/* OUTPUT */ -igc-avatar { - --background: var(--igx-test-component-background, var(--ig-test-component-background, var(--ig-primary-400))); - --hover-background: var(--igx-test-component-hover-background, var(--ig-test-component-hover-background, hsl(from var(--ig-secondary-700) h s l/0.26))); - --foreground: var(--igx-test-component-foreground, var(--ig-test-component-foreground, var(--ig-primary-400-contrast))); - --hover-foreground: var(--igx-test-component-hover-foreground, var(--ig-test-component-hover-foreground, var(--ig-secondary-700-contrast))); - --border-style: var(--igx-test-component-border-style, var(--ig-test-component-border-style, solid)); - --border-radius: var(--igx-test-component-border-radius, var(--ig-test-component-border-radius, 0.125rem)); - --brushes: var(--igx-test-component-brushes, var(--ig-test-component-brushes, var(--chart-brushes))); - --resting-elevation: var(--igx-test-component-resting-elevation, var(--ig-test-component-resting-elevation, var(--ig-elevation-2))); - --ig-theme: material; - --ig-theme-variant: light; -} - -/* END_OUTPUT */ -/* EXPECTED */ -igc-avatar { - --background: var(--igx-test-component-background, var(--ig-test-component-background, var(--ig-primary-400))); - --hover-background: var(--igx-test-component-hover-background, var(--ig-test-component-hover-background, hsl(from var(--ig-secondary-700) h s l/0.26))); - --foreground: var(--igx-test-component-foreground, var(--ig-test-component-foreground, var(--ig-primary-400-contrast))); - --hover-foreground: var(--igx-test-component-hover-foreground, var(--ig-test-component-hover-foreground, var(--ig-secondary-700-contrast))); - --border-style: var(--igx-test-component-border-style, var(--ig-test-component-border-style, solid)); - --border-radius: var(--igx-test-component-border-radius, var(--ig-test-component-border-radius, 0.125rem)); - --brushes: var(--igx-test-component-brushes, var(--ig-test-component-brushes, var(--chart-brushes))); - --resting-elevation: var(--igx-test-component-resting-elevation, var(--ig-test-component-resting-elevation, var(--ig-elevation-2))); - --ig-theme: material; - --ig-theme-variant: light; -} - -/* END_EXPECTED */ -/* END_ASSERT */ -/* ASSERT: */ -/* OUTPUT */ -.my-theme, -.my-theme igc-avatar { - --background: var(--igx-test-component-background, var(--ig-test-component-background, var(--ig-primary-400))); - --hover-background: var(--igx-test-component-hover-background, var(--ig-test-component-hover-background, hsl(from var(--ig-secondary-700) h s l/0.26))); - --foreground: var(--igx-test-component-foreground, var(--ig-test-component-foreground, var(--ig-primary-400-contrast))); - --hover-foreground: var(--igx-test-component-hover-foreground, var(--ig-test-component-hover-foreground, var(--ig-secondary-700-contrast))); - --border-style: var(--igx-test-component-border-style, var(--ig-test-component-border-style, solid)); - --border-radius: var(--igx-test-component-border-radius, var(--ig-test-component-border-radius, 0.125rem)); - --brushes: var(--igx-test-component-brushes, var(--ig-test-component-brushes, var(--chart-brushes))); - --resting-elevation: var(--igx-test-component-resting-elevation, var(--ig-test-component-resting-elevation, var(--ig-elevation-2))); - --ig-theme: material; - --ig-theme-variant: light; -} - -/* END_OUTPUT */ -/* EXPECTED */ -.my-theme, -.my-theme igc-avatar { - --background: var(--igx-test-component-background, var(--ig-test-component-background, var(--ig-primary-400))); - --hover-background: var(--igx-test-component-hover-background, var(--ig-test-component-hover-background, hsl(from var(--ig-secondary-700) h s l/0.26))); - --foreground: var(--igx-test-component-foreground, var(--ig-test-component-foreground, var(--ig-primary-400-contrast))); - --hover-foreground: var(--igx-test-component-hover-foreground, var(--ig-test-component-hover-foreground, var(--ig-secondary-700-contrast))); - --border-style: var(--igx-test-component-border-style, var(--ig-test-component-border-style, solid)); - --border-radius: var(--igx-test-component-border-radius, var(--ig-test-component-border-radius, 0.125rem)); - --brushes: var(--igx-test-component-brushes, var(--ig-test-component-brushes, var(--chart-brushes))); - --resting-elevation: var(--igx-test-component-resting-elevation, var(--ig-test-component-resting-elevation, var(--ig-elevation-2))); - --ig-theme: material; - --ig-theme-variant: light; -} - -/* END_EXPECTED */ -/* END_ASSERT */ -/* */ -/* Test: should scope theme CSS variables to a custom scope when mode is scoped */ -/* ASSERT: */ -/* OUTPUT */ -.custom-scope { - --background: var(--igx-test-component-background, var(--ig-test-component-background, var(--ig-primary-400))); - --hover-background: var(--igx-test-component-hover-background, var(--ig-test-component-hover-background, hsl(from var(--ig-secondary-700) h s l/0.26))); - --foreground: var(--igx-test-component-foreground, var(--ig-test-component-foreground, var(--ig-primary-400-contrast))); - --hover-foreground: var(--igx-test-component-hover-foreground, var(--ig-test-component-hover-foreground, var(--ig-secondary-700-contrast))); - --border-style: var(--igx-test-component-border-style, var(--ig-test-component-border-style, solid)); - --border-radius: var(--igx-test-component-border-radius, var(--ig-test-component-border-radius, 0.125rem)); - --brushes: var(--igx-test-component-brushes, var(--ig-test-component-brushes, var(--chart-brushes))); - --resting-elevation: var(--igx-test-component-resting-elevation, var(--ig-test-component-resting-elevation, var(--ig-elevation-2))); - --ig-theme: material; - --ig-theme-variant: light; -} - -/* END_OUTPUT */ -/* EXPECTED */ -.custom-scope { - --background: var(--igx-test-component-background, var(--ig-test-component-background, var(--ig-primary-400))); - --hover-background: var(--igx-test-component-hover-background, var(--ig-test-component-hover-background, hsl(from var(--ig-secondary-700) h s l/0.26))); - --foreground: var(--igx-test-component-foreground, var(--ig-test-component-foreground, var(--ig-primary-400-contrast))); - --hover-foreground: var(--igx-test-component-hover-foreground, var(--ig-test-component-hover-foreground, var(--ig-secondary-700-contrast))); - --border-style: var(--igx-test-component-border-style, var(--ig-test-component-border-style, solid)); - --border-radius: var(--igx-test-component-border-radius, var(--ig-test-component-border-radius, 0.125rem)); - --brushes: var(--igx-test-component-brushes, var(--ig-test-component-brushes, var(--chart-brushes))); - --resting-elevation: var(--igx-test-component-resting-elevation, var(--ig-test-component-resting-elevation, var(--ig-elevation-2))); - --ig-theme: material; - --ig-theme-variant: light; -} - -/* END_EXPECTED */ -/* END_ASSERT */ -/* */ -/* Test: should produce identical output for css-vars and tokens in scoped mode */ -/* ASSERT: */ -/* OUTPUT */ -igc-test { - --background: var(--igx-test-component-background, var(--ig-test-component-background, var(--ig-primary-400))); - --hover-background: var(--igx-test-component-hover-background, var(--ig-test-component-hover-background, hsl(from var(--ig-secondary-700) h s l/0.26))); - --foreground: var(--igx-test-component-foreground, var(--ig-test-component-foreground, var(--ig-primary-400-contrast))); - --hover-foreground: var(--igx-test-component-hover-foreground, var(--ig-test-component-hover-foreground, var(--ig-secondary-700-contrast))); - --border-style: var(--igx-test-component-border-style, var(--ig-test-component-border-style, solid)); - --border-radius: var(--igx-test-component-border-radius, var(--ig-test-component-border-radius, 0.125rem)); - --brushes: var(--igx-test-component-brushes, var(--ig-test-component-brushes, var(--chart-brushes))); - --resting-elevation: var(--igx-test-component-resting-elevation, var(--ig-test-component-resting-elevation, var(--ig-elevation-2))); - --ig-theme: material; - --ig-theme-variant: light; -} - -/* END_OUTPUT */ -/* EXPECTED */ -igc-test { - --background: var(--igx-test-component-background, var(--ig-test-component-background, var(--ig-primary-400))); - --hover-background: var(--igx-test-component-hover-background, var(--ig-test-component-hover-background, hsl(from var(--ig-secondary-700) h s l/0.26))); - --foreground: var(--igx-test-component-foreground, var(--ig-test-component-foreground, var(--ig-primary-400-contrast))); - --hover-foreground: var(--igx-test-component-hover-foreground, var(--ig-test-component-hover-foreground, var(--ig-secondary-700-contrast))); - --border-style: var(--igx-test-component-border-style, var(--ig-test-component-border-style, solid)); - --border-radius: var(--igx-test-component-border-radius, var(--ig-test-component-border-radius, 0.125rem)); - --brushes: var(--igx-test-component-brushes, var(--ig-test-component-brushes, var(--chart-brushes))); - --resting-elevation: var(--igx-test-component-resting-elevation, var(--ig-test-component-resting-elevation, var(--ig-elevation-2))); - --ig-theme: material; - --ig-theme-variant: light; -} - -/* END_EXPECTED */ -/* END_ASSERT */ -/* */ -/* */ -/* # Module: Themes :: schemas :: Sizing */ -/* ------------------------------------- */ -/* Test: should produce size variables */ -/* ASSERT: */ -/* OUTPUT */ -.test-output { - width: max(var(--is-large, 1) * max(300px, -1 * 300px), var(--is-medium, 1) * max(200px, -1 * 200px), var(--is-small, 1) * max(100px, -1 * 100px)); -} - -/* END_OUTPUT */ -/* EXPECTED */ -.test-output { - width: max(var(--is-large, 1) * max(300px, -1 * 300px), var(--is-medium, 1) * max(200px, -1 * 200px), var(--is-small, 1) * max(100px, -1 * 100px)); -} - -/* END_EXPECTED */ -/* END_ASSERT */ -/* */ -/* */ -/* # Module: Themes :: schemas :: Spacing */ -/* -------------------------------------- */ -/* Test: should use customizable spacing when declaring padding/margin */ -/* ASSERT: */ -/* OUTPUT */ -.test-output { - padding: max(var(--is-large, 1) * max(14px, -1 * 14px) * var(--ig-spacing-large, var(--ig-spacing, var(--ig-spacing))), var(--is-medium, 1) * max(14px, -1 * 14px) * var(--ig-spacing-medium, var(--ig-spacing, var(--ig-spacing))), var(--is-small, 1) * max(14px, -1 * 14px) * var(--ig-spacing-small, var(--ig-spacing, var(--ig-spacing)))); -} - -/* END_OUTPUT */ -/* EXPECTED */ -.test-output { - padding: max(var(--is-large, 1) * max(14px, -1 * 14px) * var(--ig-spacing-large, var(--ig-spacing, var(--ig-spacing))), var(--is-medium, 1) * max(14px, -1 * 14px) * var(--ig-spacing-medium, var(--ig-spacing, var(--ig-spacing))), var(--is-small, 1) * max(14px, -1 * 14px) * var(--ig-spacing-small, var(--ig-spacing, var(--ig-spacing)))); -} - -/* END_EXPECTED */ -/* END_ASSERT */ -/* */ -/* Test: should use customizable inline spacing when declaring inline padding/margin */ -/* ASSERT: */ -/* OUTPUT */ -.test-output { - padding-inline: max(var(--is-large, 1) * max(14px, -1 * 14px) * var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))), var(--is-medium, 1) * max(14px, -1 * 14px) * var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))), var(--is-small, 1) * max(14px, -1 * 14px) * var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing)))); -} - -/* END_OUTPUT */ -/* EXPECTED */ -.test-output { - padding-inline: max(var(--is-large, 1) * max(14px, -1 * 14px) * var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))), var(--is-medium, 1) * max(14px, -1 * 14px) * var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))), var(--is-small, 1) * max(14px, -1 * 14px) * var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing)))); -} - -/* END_EXPECTED */ -/* END_ASSERT */ -/* */ -/* Test: should use customizable block spacing when declaring inline padding/margin */ -/* ASSERT: */ -/* OUTPUT */ -.test-output { - padding-block: max(var(--is-large, 1) * max(16px, -1 * 16px) * var(--ig-spacing-block-large, var(--ig-spacing-block, var(--ig-spacing))), var(--is-medium, 1) * max(8px, -1 * 8px) * var(--ig-spacing-block-medium, var(--ig-spacing-block, var(--ig-spacing))), var(--is-small, 1) * max(4px, -1 * 4px) * var(--ig-spacing-block-small, var(--ig-spacing-block, var(--ig-spacing)))); -} - -/* END_OUTPUT */ -/* EXPECTED */ -.test-output { - padding-block: max(var(--is-large, 1) * max(16px, -1 * 16px) * var(--ig-spacing-block-large, var(--ig-spacing-block, var(--ig-spacing))), var(--is-medium, 1) * max(8px, -1 * 8px) * var(--ig-spacing-block-medium, var(--ig-spacing-block, var(--ig-spacing))), var(--is-small, 1) * max(4px, -1 * 4px) * var(--ig-spacing-block-small, var(--ig-spacing-block, var(--ig-spacing)))); -} - -/* END_EXPECTED */ -/* END_ASSERT */ -/* */ -/* */ -/* */ -/* */ -/* # Module: Elevations */ -/* -------------------- */ -/* Test: should return an empty list for a list of non box-shadow values */ -/* ✔ [assert-equal] should return an empty list for a list of non box-shadow values */ -/* */ -/* Test: should produce a box shadow that reacts to CSS --ig-elevation-factor changes */ -/* ✔ [assert-equal] should produce a box shadow that reacts to CSS --ig-elevation-factor changes */ -/* */ -/* Test: should configure the material elevations module */ -/* ASSERT: */ -/* OUTPUT */ -.test-output { - --ig-elevation-0: none; - --ig-elevation-1: 0 calc(var(--ig-elevation-factor, 1) * 1px) calc(var(--ig-elevation-factor, 1) * 3px) 0 red, 0 calc(var(--ig-elevation-factor, 1) * 1px) calc(var(--ig-elevation-factor, 1) * 1px) 0 green, 0 calc(var(--ig-elevation-factor, 1) * 2px) calc(var(--ig-elevation-factor, 1) * 1px) calc(var(--ig-elevation-factor, 1) * -1px) blue; - --ig-elevation-2: 0 calc(var(--ig-elevation-factor, 1) * 1px) calc(var(--ig-elevation-factor, 1) * 5px) 0 red, 0 calc(var(--ig-elevation-factor, 1) * 2px) calc(var(--ig-elevation-factor, 1) * 2px) 0 green, 0 calc(var(--ig-elevation-factor, 1) * 3px) calc(var(--ig-elevation-factor, 1) * 1px) calc(var(--ig-elevation-factor, 1) * -2px) blue; - --ig-elevation-3: 0 calc(var(--ig-elevation-factor, 1) * 1px) calc(var(--ig-elevation-factor, 1) * 8px) 0 red, 0 calc(var(--ig-elevation-factor, 1) * 3px) calc(var(--ig-elevation-factor, 1) * 4px) 0 green, 0 calc(var(--ig-elevation-factor, 1) * 3px) calc(var(--ig-elevation-factor, 1) * 3px) calc(var(--ig-elevation-factor, 1) * -2px) blue; - --ig-elevation-4: 0 calc(var(--ig-elevation-factor, 1) * 2px) calc(var(--ig-elevation-factor, 1) * 4px) calc(var(--ig-elevation-factor, 1) * -1px) red, 0 calc(var(--ig-elevation-factor, 1) * 4px) calc(var(--ig-elevation-factor, 1) * 5px) 0 green, 0 calc(var(--ig-elevation-factor, 1) * 1px) calc(var(--ig-elevation-factor, 1) * 10px) 0 blue; - --ig-elevation-5: 0 calc(var(--ig-elevation-factor, 1) * 3px) calc(var(--ig-elevation-factor, 1) * 5px) calc(var(--ig-elevation-factor, 1) * -1px) red, 0 calc(var(--ig-elevation-factor, 1) * 5px) calc(var(--ig-elevation-factor, 1) * 8px) 0 green, 0 calc(var(--ig-elevation-factor, 1) * 1px) calc(var(--ig-elevation-factor, 1) * 14px) 0 blue; - --ig-elevation-6: 0 calc(var(--ig-elevation-factor, 1) * 3px) calc(var(--ig-elevation-factor, 1) * 5px) calc(var(--ig-elevation-factor, 1) * -1px) red, 0 calc(var(--ig-elevation-factor, 1) * 6px) calc(var(--ig-elevation-factor, 1) * 10px) 0 green, 0 calc(var(--ig-elevation-factor, 1) * 1px) calc(var(--ig-elevation-factor, 1) * 18px) 0 blue; - --ig-elevation-7: 0 calc(var(--ig-elevation-factor, 1) * 4px) calc(var(--ig-elevation-factor, 1) * 5px) calc(var(--ig-elevation-factor, 1) * -2px) red, 0 calc(var(--ig-elevation-factor, 1) * 7px) calc(var(--ig-elevation-factor, 1) * 10px) calc(var(--ig-elevation-factor, 1) * 1px) green, 0 calc(var(--ig-elevation-factor, 1) * 2px) calc(var(--ig-elevation-factor, 1) * 16px) calc(var(--ig-elevation-factor, 1) * 1px) blue; - --ig-elevation-8: 0 calc(var(--ig-elevation-factor, 1) * 5px) calc(var(--ig-elevation-factor, 1) * 5px) calc(var(--ig-elevation-factor, 1) * -3px) red, 0 calc(var(--ig-elevation-factor, 1) * 8px) calc(var(--ig-elevation-factor, 1) * 10px) calc(var(--ig-elevation-factor, 1) * 1px) green, 0 calc(var(--ig-elevation-factor, 1) * 3px) calc(var(--ig-elevation-factor, 1) * 14px) calc(var(--ig-elevation-factor, 1) * 2px) blue; - --ig-elevation-9: 0 calc(var(--ig-elevation-factor, 1) * 5px) calc(var(--ig-elevation-factor, 1) * 6px) calc(var(--ig-elevation-factor, 1) * -3px) red, 0 calc(var(--ig-elevation-factor, 1) * 9px) calc(var(--ig-elevation-factor, 1) * 12px) calc(var(--ig-elevation-factor, 1) * 1px) green, 0 calc(var(--ig-elevation-factor, 1) * 3px) calc(var(--ig-elevation-factor, 1) * 16px) calc(var(--ig-elevation-factor, 1) * 2px) blue; - --ig-elevation-10: 0 calc(var(--ig-elevation-factor, 1) * 6px) calc(var(--ig-elevation-factor, 1) * 6px) calc(var(--ig-elevation-factor, 1) * -3px) red, 0 calc(var(--ig-elevation-factor, 1) * 10px) calc(var(--ig-elevation-factor, 1) * 14px) calc(var(--ig-elevation-factor, 1) * 1px) green, 0 calc(var(--ig-elevation-factor, 1) * 4px) calc(var(--ig-elevation-factor, 1) * 18px) calc(var(--ig-elevation-factor, 1) * 3px) blue; - --ig-elevation-11: 0 calc(var(--ig-elevation-factor, 1) * 6px) calc(var(--ig-elevation-factor, 1) * 7px) calc(var(--ig-elevation-factor, 1) * -4px) red, 0 calc(var(--ig-elevation-factor, 1) * 11px) calc(var(--ig-elevation-factor, 1) * 15px) calc(var(--ig-elevation-factor, 1) * 1px) green, 0 calc(var(--ig-elevation-factor, 1) * 4px) calc(var(--ig-elevation-factor, 1) * 20px) calc(var(--ig-elevation-factor, 1) * 3px) blue; - --ig-elevation-12: 0 calc(var(--ig-elevation-factor, 1) * 7px) calc(var(--ig-elevation-factor, 1) * 8px) calc(var(--ig-elevation-factor, 1) * -4px) red, 0 calc(var(--ig-elevation-factor, 1) * 12px) calc(var(--ig-elevation-factor, 1) * 17px) calc(var(--ig-elevation-factor, 1) * 2px) green, 0 calc(var(--ig-elevation-factor, 1) * 5px) calc(var(--ig-elevation-factor, 1) * 22px) calc(var(--ig-elevation-factor, 1) * 4px) blue; - --ig-elevation-13: 0 calc(var(--ig-elevation-factor, 1) * 7px) calc(var(--ig-elevation-factor, 1) * 8px) calc(var(--ig-elevation-factor, 1) * -4px) red, 0 calc(var(--ig-elevation-factor, 1) * 13px) calc(var(--ig-elevation-factor, 1) * 19px) calc(var(--ig-elevation-factor, 1) * 2px) green, 0 calc(var(--ig-elevation-factor, 1) * 5px) calc(var(--ig-elevation-factor, 1) * 24px) calc(var(--ig-elevation-factor, 1) * 4px) blue; - --ig-elevation-14: 0 calc(var(--ig-elevation-factor, 1) * 7px) calc(var(--ig-elevation-factor, 1) * 9px) calc(var(--ig-elevation-factor, 1) * -4px) red, 0 calc(var(--ig-elevation-factor, 1) * 14px) calc(var(--ig-elevation-factor, 1) * 21px) calc(var(--ig-elevation-factor, 1) * 2px) green, 0 calc(var(--ig-elevation-factor, 1) * 5px) calc(var(--ig-elevation-factor, 1) * 26px) calc(var(--ig-elevation-factor, 1) * 4px) blue; - --ig-elevation-15: 0 calc(var(--ig-elevation-factor, 1) * 8px) calc(var(--ig-elevation-factor, 1) * 9px) calc(var(--ig-elevation-factor, 1) * -5px) red, 0 calc(var(--ig-elevation-factor, 1) * 15px) calc(var(--ig-elevation-factor, 1) * 22px) calc(var(--ig-elevation-factor, 1) * 2px) green, 0 calc(var(--ig-elevation-factor, 1) * 6px) calc(var(--ig-elevation-factor, 1) * 28px) calc(var(--ig-elevation-factor, 1) * 5px) blue; - --ig-elevation-16: 0 calc(var(--ig-elevation-factor, 1) * 8px) calc(var(--ig-elevation-factor, 1) * 10px) calc(var(--ig-elevation-factor, 1) * -5px) red, 0 calc(var(--ig-elevation-factor, 1) * 16px) calc(var(--ig-elevation-factor, 1) * 24px) calc(var(--ig-elevation-factor, 1) * 2px) green, 0 calc(var(--ig-elevation-factor, 1) * 6px) calc(var(--ig-elevation-factor, 1) * 30px) calc(var(--ig-elevation-factor, 1) * 5px) blue; - --ig-elevation-17: 0 calc(var(--ig-elevation-factor, 1) * 8px) calc(var(--ig-elevation-factor, 1) * 11px) calc(var(--ig-elevation-factor, 1) * -5px) red, 0 calc(var(--ig-elevation-factor, 1) * 17px) calc(var(--ig-elevation-factor, 1) * 26px) calc(var(--ig-elevation-factor, 1) * 2px) green, 0 calc(var(--ig-elevation-factor, 1) * 6px) calc(var(--ig-elevation-factor, 1) * 32px) calc(var(--ig-elevation-factor, 1) * 5px) blue; - --ig-elevation-18: 0 calc(var(--ig-elevation-factor, 1) * 9px) calc(var(--ig-elevation-factor, 1) * 11px) calc(var(--ig-elevation-factor, 1) * -5px) red, 0 calc(var(--ig-elevation-factor, 1) * 18px) calc(var(--ig-elevation-factor, 1) * 28px) calc(var(--ig-elevation-factor, 1) * 2px) green, 0 calc(var(--ig-elevation-factor, 1) * 7px) calc(var(--ig-elevation-factor, 1) * 34px) calc(var(--ig-elevation-factor, 1) * 6px) blue; - --ig-elevation-19: 0 calc(var(--ig-elevation-factor, 1) * 9px) calc(var(--ig-elevation-factor, 1) * 12px) calc(var(--ig-elevation-factor, 1) * -6px) red, 0 calc(var(--ig-elevation-factor, 1) * 19px) calc(var(--ig-elevation-factor, 1) * 29px) calc(var(--ig-elevation-factor, 1) * 2px) green, 0 calc(var(--ig-elevation-factor, 1) * 7px) calc(var(--ig-elevation-factor, 1) * 36px) calc(var(--ig-elevation-factor, 1) * 6px) blue; - --ig-elevation-20: 0 calc(var(--ig-elevation-factor, 1) * 10px) calc(var(--ig-elevation-factor, 1) * 13px) calc(var(--ig-elevation-factor, 1) * -6px) red, 0 calc(var(--ig-elevation-factor, 1) * 20px) calc(var(--ig-elevation-factor, 1) * 31px) calc(var(--ig-elevation-factor, 1) * 3px) green, 0 calc(var(--ig-elevation-factor, 1) * 8px) calc(var(--ig-elevation-factor, 1) * 38px) calc(var(--ig-elevation-factor, 1) * 7px) blue; - --ig-elevation-21: 0 calc(var(--ig-elevation-factor, 1) * 10px) calc(var(--ig-elevation-factor, 1) * 13px) calc(var(--ig-elevation-factor, 1) * -6px) red, 0 calc(var(--ig-elevation-factor, 1) * 21px) calc(var(--ig-elevation-factor, 1) * 33px) calc(var(--ig-elevation-factor, 1) * 3px) green, 0 calc(var(--ig-elevation-factor, 1) * 8px) calc(var(--ig-elevation-factor, 1) * 40px) calc(var(--ig-elevation-factor, 1) * 7px) blue; - --ig-elevation-22: 0 calc(var(--ig-elevation-factor, 1) * 10px) calc(var(--ig-elevation-factor, 1) * 14px) calc(var(--ig-elevation-factor, 1) * -6px) red, 0 calc(var(--ig-elevation-factor, 1) * 22px) calc(var(--ig-elevation-factor, 1) * 35px) calc(var(--ig-elevation-factor, 1) * 3px) green, 0 calc(var(--ig-elevation-factor, 1) * 8px) calc(var(--ig-elevation-factor, 1) * 42px) calc(var(--ig-elevation-factor, 1) * 7px) blue; - --ig-elevation-23: 0 calc(var(--ig-elevation-factor, 1) * 11px) calc(var(--ig-elevation-factor, 1) * 14px) calc(var(--ig-elevation-factor, 1) * -7px) red, 0 calc(var(--ig-elevation-factor, 1) * 23px) calc(var(--ig-elevation-factor, 1) * 36px) calc(var(--ig-elevation-factor, 1) * 3px) green, 0 calc(var(--ig-elevation-factor, 1) * 9px) calc(var(--ig-elevation-factor, 1) * 44px) calc(var(--ig-elevation-factor, 1) * 8px) blue; - --ig-elevation-24: 0 calc(var(--ig-elevation-factor, 1) * 11px) calc(var(--ig-elevation-factor, 1) * 15px) calc(var(--ig-elevation-factor, 1) * -7px) red, 0 calc(var(--ig-elevation-factor, 1) * 24px) calc(var(--ig-elevation-factor, 1) * 38px) calc(var(--ig-elevation-factor, 1) * 3px) green, 0 calc(var(--ig-elevation-factor, 1) * 9px) calc(var(--ig-elevation-factor, 1) * 46px) calc(var(--ig-elevation-factor, 1) * 8px) blue; -} - -/* END_OUTPUT */ -/* CONTAINED */ -.test-output { - --ig-elevation-1: 0 calc(var(--ig-elevation-factor, 1) * 1px) calc(var(--ig-elevation-factor, 1) * 3px) 0 red, 0 calc(var(--ig-elevation-factor, 1) * 1px) calc(var(--ig-elevation-factor, 1) * 1px) 0 green, 0 calc(var(--ig-elevation-factor, 1) * 2px) calc(var(--ig-elevation-factor, 1) * 1px) calc(var(--ig-elevation-factor, 1) * -1px) blue; -} - -/* END_CONTAINED */ -/* END_ASSERT */ -/* */ -/* Test: should produce CSS variables for a map of shadows */ -/* ASSERT: */ -/* OUTPUT */ -.test-output { - --ig-elevation-small: 0 calc(var(--ig-elevation-factor, 1) * 0.125rem) calc(var(--ig-elevation-factor, 1) * 0.25rem) rgba(0, 0, 0, 0.75); - --ig-elevation-medium: 0 calc(var(--ig-elevation-factor, 1) * 0.25rem) calc(var(--ig-elevation-factor, 1) * 0.5rem) rgba(0, 0, 0, 0.85); - --ig-elevation-large: 0 calc(var(--ig-elevation-factor, 1) * 0.75rem) calc(var(--ig-elevation-factor, 1) * 1rem) rgba(0, 0, 0, 0.95); -} - -/* END_OUTPUT */ -/* EXPECTED */ -.test-output { - --ig-elevation-small: 0 calc(var(--ig-elevation-factor, 1) * 0.125rem) calc(var(--ig-elevation-factor, 1) * 0.25rem) rgba(0, 0, 0, 0.75); - --ig-elevation-medium: 0 calc(var(--ig-elevation-factor, 1) * 0.25rem) calc(var(--ig-elevation-factor, 1) * 0.5rem) rgba(0, 0, 0, 0.85); - --ig-elevation-large: 0 calc(var(--ig-elevation-factor, 1) * 0.75rem) calc(var(--ig-elevation-factor, 1) * 1rem) rgba(0, 0, 0, 0.95); -} - -/* END_EXPECTED */ -/* END_ASSERT */ -/* */ -/* Test: should retrieve a CSS variable elevation by name */ -/* ASSERT: */ -/* OUTPUT */ -.test-output { - box-shadow: var(--ig-elevation-small); -} - -/* END_OUTPUT */ -/* EXPECTED */ -.test-output { - box-shadow: var(--ig-elevation-small); -} - -/* END_EXPECTED */ -/* END_ASSERT */ -/* */ -/* Test: should include box-shadow styles for an elevation level */ -/* ASSERT: */ -/* OUTPUT */ -.test-output { - box-shadow: var(--ig-elevation-small); -} - -/* END_OUTPUT */ -/* EXPECTED */ -.test-output { - box-shadow: var(--ig-elevation-small); -} - -/* END_EXPECTED */ -/* END_ASSERT */ -/* */ -/* */ -/* # Module: BEM */ -/* ------------- */ -/* Test: creates block__element classes */ -/* ASSERT: */ -/* OUTPUT */ -.block { - background: black; -} -.block__element { - color: orange; -} - -/* END_OUTPUT */ -/* EXPECTED */ -.block { - background: black; -} - -.block__element { - color: orange; -} - -/* END_EXPECTED */ -/* END_ASSERT */ -/* */ -/* Test: creates block--modifier classes using the modifier mixins */ -/* ASSERT: */ -/* OUTPUT */ -.block { - background: black; -} -.block--error { - background: red; -} - -.block--error.block--selected { - background: darkred; -} - -/* END_OUTPUT */ -/* EXPECTED */ -.block { - background: black; -} - -.block--error { - background: red; -} - -.block--error.block--selected { - background: darkred; -} - -/* END_EXPECTED */ -/* END_ASSERT */ -/* */ -/* Test: creates block__element--modifier classes using the element mixin */ -/* ASSERT: */ -/* OUTPUT */ -.block { - background: black; -} -.block__element--small { - font-size: 12px; -} - -.block__element--medium { - font-size: 14px; -} - -.block__element--large { - font-size: 16px; -} - -/* END_OUTPUT */ -/* EXPECTED */ -.block { - background: black; -} - -.block__element--small { - font-size: 12px; -} - -.block__element--medium { - font-size: 14px; -} - -.block__element--large { - font-size: 16px; -} - -/* END_EXPECTED */ -/* END_ASSERT */ -/* */ -/* Test: creates negating block__element--modifier classes */ -/* ASSERT: */ -/* OUTPUT */ -.block__element--small:not(.block__element--circle) { - background: blue; -} - -/* END_OUTPUT */ -/* EXPECTED */ -.block__element--small:not(.block__element--circle) { - background: blue; -} - -/* END_EXPECTED */ -/* END_ASSERT */ -/* */ -/* Test: creates multiple element modifier classes using the element mixin */ -/* ASSERT: */ -/* OUTPUT */ -.block { - background: black; -} -.block__element--small.block__element--pink { - color: pink; - font-size: 12px; -} - -/* END_OUTPUT */ -/* EXPECTED */ -.block { - background: black; -} - -.block__element--small.block__element--pink { - color: pink; - font-size: 12px; -} - -/* END_EXPECTED */ -/* END_ASSERT */ -/* */ -/* Test: creates multiple negating element modifier classes */ -/* ASSERT: */ -/* OUTPUT */ -.block__element--small.block__element--pink:not(.block__element--circle, .block__element--large) { - color: pink; - font-size: 12px; -} - -/* END_OUTPUT */ -/* EXPECTED */ -.block__element--small.block__element--pink:not(.block__element--circle, .block__element--large) { - color: pink; - font-size: 12px; -} - -/* END_EXPECTED */ -/* END_ASSERT */ -/* */ -/* Test: overwrites element styles in a modified block */ -/* ASSERT: */ -/* OUTPUT */ -.block { - background: black; -} -.block__element { - color: wheat; -} - -.block--error { - background: red; -} -.block--error .block__element { - color: white; -} - -/* END_OUTPUT */ -/* EXPECTED */ -.block { - background: black; -} - -.block__element { - color: wheat; -} - -.block--error { - background: red; -} - -.block--error .block__element { - color: white; -} - -/* END_EXPECTED */ -/* END_ASSERT */ -/* */ -/* Test: creates negating modifier classes using the mod and mods mixins */ -/* ASSERT: */ -/* OUTPUT */ -.block--checked:not(.block--disabled, .block--indeterminate) { - background: pink; -} - -.block--disabled:not(.block--checked) { - background: gray; -} -.block--disabled:not(.block--checked) .block__element { - color: darkgray; -} - -.block--disabled.block--checked:not(.block--indeterminate) { - background: darkgray; -} - -.block--disabled.block--checked:not(.block--indeterminate, .block--invalid) { - background: black; -} -.block--disabled.block--checked:not(.block--indeterminate, .block--invalid) .block__element { - color: red; -} - -.block--disabled.block--checked:not(.block--indeterminate, .block--invalid) .block__element--orange { - color: orange; -} - -.block--disabled.block--checked:not(.block--indeterminate, .block--invalid) .block__element--rebecca.block__element--purple { - color: rebeccapurple; -} - -/* END_OUTPUT */ -/* EXPECTED */ -.block--checked:not(.block--disabled, .block--indeterminate) { - background: pink; -} - -.block--disabled:not(.block--checked) { - background: gray; -} - -.block--disabled:not(.block--checked) .block__element { - color: darkgray; -} - -.block--disabled.block--checked:not(.block--indeterminate) { - background: darkgray; -} - -.block--disabled.block--checked:not(.block--indeterminate, .block--invalid) { - background: black; -} - -.block--disabled.block--checked:not(.block--indeterminate, .block--invalid) .block__element { - color: red; -} - -.block--disabled.block--checked:not(.block--indeterminate, .block--invalid) .block__element--orange { - color: orange; -} - -.block--disabled.block--checked:not(.block--indeterminate, .block--invalid) .block__element--rebecca.block__element--purple { - color: rebeccapurple; -} - -/* END_EXPECTED */ -/* END_ASSERT */ -/* */ -/* Test: creates element selector inside an attribute selector context */ -/* ASSERT: */ -/* OUTPUT */ -.block[aria-selected=false] .block__element { - display: none; -} - -/* END_OUTPUT */ -/* EXPECTED */ -.block[aria-selected=false] .block__element { - display: none; -} - -/* END_EXPECTED */ -/* END_ASSERT */ -/* */ -/* Test: creates element--modifier selector inside an attribute selector context */ -/* ASSERT: */ -/* OUTPUT */ -.block[aria-selected=false] .block__element--active { - display: block; -} - -/* END_OUTPUT */ -/* EXPECTED */ -.block[aria-selected=false] .block__element--active { - display: block; -} - -/* END_EXPECTED */ -/* END_ASSERT */ -/* */ -/* Test: creates multiple element modifier selectors inside an attribute selector context */ -/* ASSERT: */ -/* OUTPUT */ -.block[aria-selected=false] .block__element--small.block__element--pink { - font-size: 12px; -} - -/* END_OUTPUT */ -/* EXPECTED */ -.block[aria-selected=false] .block__element--small.block__element--pink { - font-size: 12px; -} - -/* END_EXPECTED */ -/* END_ASSERT */ -/* */ -/* Test: creates element selector inside a descendant attribute selector context */ -/* ASSERT: */ -/* OUTPUT */ -.block [aria-selected=true] .block__element { - display: block; -} - -.block [aria-selected=false] .block__element { - display: none; -} - -/* END_OUTPUT */ -/* EXPECTED */ -.block [aria-selected=true] .block__element { - display: block; -} - -.block [aria-selected=false] .block__element { - display: none; -} - -/* END_EXPECTED */ -/* END_ASSERT */ -/* */ -/* Test: should be able to use element classes in modifier body rules */ -/* ASSERT: */ -/* OUTPUT */ -.block__element--circle { - border-radius: 50%; -} - -.block--checked:has(.block__element--circle) { - background: pink; -} - -/* END_OUTPUT */ -/* EXPECTED */ -.block__element--circle { - border-radius: 50%; -} - -.block--checked:has(.block__element--circle) { - background: pink; -} - -/* END_EXPECTED */ -/* END_ASSERT */ -/* */ -/* */ diff --git a/biome.json b/biome.json index f8668ff7..a7375b8d 100644 --- a/biome.json +++ b/biome.json @@ -4,6 +4,7 @@ "includes": [ "packages/theming/**/*.{ts,js,mjs,cjs}", "packages/mcp/src/**/*.ts", + "packages/preview/**/*.ts", "!!**/dist" ] }, @@ -37,7 +38,9 @@ "noUnusedPrivateClassMembers": "off", "useImportExtensions": { "level": "error", - "options": { "forceJsExtensions": true } + "options": { + "forceJsExtensions": true + } } }, "style": { @@ -76,6 +79,16 @@ } } }, + { + "includes": ["packages/preview/src/**/*.ts"], + "linter": { + "rules": { + "suspicious": { + "noConsole": "off" + } + } + } + }, { "includes": ["packages/mcp/src/knowledge/**/*.ts"], "linter": { diff --git a/package-lock.json b/package-lock.json index b5281b16..2533517b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,7 +8,8 @@ "license": "MIT", "workspaces": [ "packages/theming", - "packages/mcp" + "packages/mcp", + "packages/preview" ], "devDependencies": { "@biomejs/biome": "^2.4.9", @@ -1104,6 +1105,10 @@ "hono": "^4" } }, + "node_modules/@igniteui-theming/preview": { + "resolved": "packages/preview", + "link": true + }, "node_modules/@jest/diff-sequences": { "version": "30.3.0", "resolved": "https://registry.npmjs.org/@jest/diff-sequences/-/diff-sequences-30.3.0.tgz", @@ -10921,6 +10926,15 @@ "igniteui-theming": "*" } }, + "packages/preview": { + "name": "@igniteui-theming/preview", + "version": "0.0.0", + "devDependencies": { + "sass-embedded": "~1.92.1", + "stylelint": "^17.5.0", + "stylelint-config-standard-scss": "^17.0.0" + } + }, "packages/theming": { "name": "igniteui-theming", "version": "1.0.0", @@ -10931,6 +10945,7 @@ "zod": "^3.25.76" }, "bin": { + "igniteui-theming": "dist/mcp/index.js", "igniteui-theming-mcp": "dist/mcp/index.js" }, "devDependencies": { diff --git a/package.json b/package.json index 02a75bae..446e4217 100644 --- a/package.json +++ b/package.json @@ -15,7 +15,8 @@ "type": "module", "workspaces": [ "packages/theming", - "packages/mcp" + "packages/mcp", + "packages/preview" ], "scripts": { "build": "npm run build -w packages/theming", @@ -26,7 +27,9 @@ "format": "biome check --fix && npm run format --workspaces --if-present", "prepare": "husky install && npm run prepare --workspaces --if-present", "coverage": "vitest run --coverage", - "mcp:inspector": "npx @modelcontextprotocol/inspector ./packages/theming/dist/mcp/index.js" + "mcp:inspector": "npx @modelcontextprotocol/inspector ./packages/theming/dist/mcp/index.js", + "preview": "npm run dev -w packages/preview", + "preview:build": "npm run build -w packages/preview" }, "devDependencies": { "@biomejs/biome": "^2.4.9", diff --git a/packages/mcp/src/__tests__/generators/css.test.ts b/packages/mcp/src/__tests__/generators/css.test.ts index 1ad89b69..a6424c9e 100644 --- a/packages/mcp/src/__tests__/generators/css.test.ts +++ b/packages/mcp/src/__tests__/generators/css.test.ts @@ -25,8 +25,13 @@ describe("generatePaletteCss", () => { expect(result.css).toContain("--ig-primary-900"); expect(result.css).toContain("--ig-secondary-50"); expect(result.css).toContain("--ig-secondary-500"); - expect(result.css).toContain("--ig-surface-50"); - expect(result.css).toContain("--ig-surface-500"); + // A surface is addressed by layer role, not by shade number + expect(result.css).toContain("--ig-surface-base"); + expect(result.css).toContain("--ig-surface-sunken"); + expect(result.css).toContain("--ig-surface-raised"); + expect(result.css).toContain("--ig-surface-overlay"); + expect(result.css).toContain("--ig-surface-container"); + expect(result.css).not.toContain("--ig-surface-500"); expect(result.css).toContain("--ig-gray-50"); expect(result.css).toContain("--ig-gray-500"); expect(result.css).toContain("--ig-wcag-aa"); @@ -51,7 +56,7 @@ describe("generatePaletteCss", () => { expect(result.description).toContain("dark palette"); expect(result.css).toContain("--ig-primary-500"); expect(result.css).toContain("--ig-secondary-500"); - expect(result.css).toContain("--ig-surface-500"); + expect(result.css).toContain("--ig-surface-base"); expect(result.css).toContain("--ig-gray-500"); }); diff --git a/packages/mcp/src/__tests__/generators/scales.test.ts b/packages/mcp/src/__tests__/generators/scales.test.ts new file mode 100644 index 00000000..47c015c2 --- /dev/null +++ b/packages/mcp/src/__tests__/generators/scales.test.ts @@ -0,0 +1,75 @@ +import { describe, expect, it } from "vitest"; +import { generatePaletteCss } from "../../generators/css.js"; +import { generatePalette, generateTheme } from "../../generators/sass.js"; +import { SCALE_NAMES, SHADE_SCALES } from "../../knowledge/scales.js"; + +const base = { primary: "#09f", secondary: "#f0f", surface: "#fff" }; + +describe("shade scales", () => { + it("exposes the presets the Sass ships", () => { + // Generated from config.$scales, so this cannot drift from the generator. + expect(SCALE_NAMES).toEqual( + expect.arrayContaining(["even", "material", "tailwind", "carbon"]), + ); + expect(SHADE_SCALES.even.curve).toBeNull(); + expect(SHADE_SCALES.carbon.curve).toHaveLength(4); + }); + + it("emits a named preset", () => { + expect(generatePalette({ ...base, scales: "carbon" }).code).toContain( + "$scales: 'carbon'", + ); + }); + + it("emits a per-family map", () => { + expect( + generatePalette({ ...base, scales: { gray: "tailwind" } }).code, + ).toContain("$scales: ('gray': 'tailwind')"); + }); + + it("emits an inline range and curve", () => { + const code = generatePalette({ + ...base, + scales: { + gray: { range: [1.05, 17.85], curve: [0.611, 0.06, 0.249, 0.46] }, + }, + }).code; + + expect(code).toContain( + "$scales: ('gray': (range: (1.05, 17.85), curve: (0.611, 0.06, 0.249, 0.46)))", + ); + }); + + it("emits the generator only when asked", () => { + expect(generatePalette(base).code).not.toContain("$generator"); + expect(generatePalette({ ...base, generator: "legacy" }).code).toContain( + "$generator: 'legacy'", + ); + }); + + it("threads both through create_theme", () => { + const code = generateTheme({ + primaryColor: "#09f", + secondaryColor: "#f0f", + surfaceColor: "#fff", + scales: { gray: "carbon" }, + generator: "fitted", + }).code; + + expect(code).toContain("$scales: ('gray': 'carbon')"); + expect(code).toContain("$generator: 'fitted'"); + }); + + it("compiles, and a scale changes the grays it produces", async () => { + const [plain, carbon] = await Promise.all([ + generatePaletteCss(base), + generatePaletteCss({ ...base, scales: { gray: "carbon" } }), + ]); + + const grays = (css: string) => + [...css.matchAll(/--ig-gray-(\d00): ([^;]+);/g)].map((m) => m[2]); + + expect(grays(plain.css).length).toBeGreaterThan(5); + expect(grays(carbon.css)).not.toEqual(grays(plain.css)); + }); +}); diff --git a/packages/mcp/src/__tests__/tools/handlers/handlers.test.ts b/packages/mcp/src/__tests__/tools/handlers/handlers.test.ts index f9a7a1a8..dd92bfd4 100644 --- a/packages/mcp/src/__tests__/tools/handlers/handlers.test.ts +++ b/packages/mcp/src/__tests__/tools/handlers/handlers.test.ts @@ -173,17 +173,17 @@ describe("handleCreateTheme", () => { expect(text).not.toContain("@include typography("); }); - it("warns about color suitability issues", async () => { - const result = await handleCreateTheme({ - ...baseThemeParams, - primaryColor: "#fafafa", // very light color - }); - - const text = result.content[0].text; - // Should warn about luminance issues - check for warning indicators - const hasWarning = - text.includes("luminance") || text.toLowerCase().includes("warning"); - expect(hasWarning).toBe(true); + it("accepts extreme seed colors without a luminance warning", async () => { + for (const primaryColor of ["#fafafa", "#050a14"]) { + const result = await handleCreateTheme({ + ...baseThemeParams, + primaryColor, + }); + const text = result.content[0].text; + + expect(text).not.toContain("luminance"); + expect(text).not.toContain("SUITABILITY"); + } }); it("shows Angular-specific content for angular platform", async () => { diff --git a/packages/mcp/src/__tests__/utils/color.test.ts b/packages/mcp/src/__tests__/utils/color.test.ts index b6e304d4..26d20da0 100644 --- a/packages/mcp/src/__tests__/utils/color.test.ts +++ b/packages/mcp/src/__tests__/utils/color.test.ts @@ -7,14 +7,12 @@ import { describe, expect, it } from "vitest"; import { analyzeColor, - analyzeColorForPalette, analyzeSurfaceGrayColors, calculateContrast, extractHue, huesAreClose, isValidColor, LUMINANCE_THRESHOLD, - PALETTE_LUMINANCE_THRESHOLDS, validateColorsInBatch, } from "../../utils/color.js"; @@ -155,53 +153,6 @@ describe("huesAreClose", () => { }); }); -describe("analyzeColorForPalette", () => { - it("marks mid-tone colors as suitable", async () => { - const result = await analyzeColorForPalette("#2ab759"); // Medium green - expect(result.suitable).toBe(true); - // TypeScript correctly narrows: issue/description don't exist on suitable results - if (!result.suitable) { - throw new Error("Expected suitable result"); - } - }); - - it("marks very light colors as unsuitable (too light)", async () => { - const result = await analyzeColorForPalette("#f8f8f8"); // Very light gray - expect(result.suitable).toBe(false); - if (result.suitable) { - throw new Error("Expected unsuitable result"); - } - expect(result.issue).toBe("too-light"); - expect(result.description).toBeDefined(); - }); - - it("marks very dark colors as unsuitable (too dark)", async () => { - const result = await analyzeColorForPalette("#0a0a0a"); // Very dark gray - expect(result.suitable).toBe(false); - if (result.suitable) { - throw new Error("Expected unsuitable result"); - } - expect(result.issue).toBe("too-dark"); - expect(result.description).toBeDefined(); - }); - - it("uses correct threshold for too light", async () => { - const result = await analyzeColorForPalette("white"); - expect(result.luminance).toBeGreaterThan( - PALETTE_LUMINANCE_THRESHOLDS.TOO_LIGHT, - ); - expect(result.suitable).toBe(false); - }); - - it("uses correct threshold for too dark", async () => { - const result = await analyzeColorForPalette("black"); - expect(result.luminance).toBeLessThan( - PALETTE_LUMINANCE_THRESHOLDS.TOO_DARK, - ); - expect(result.suitable).toBe(false); - }); -}); - describe("LUMINANCE_THRESHOLD", () => { it("is set to 0.5 for light/dark determination", () => { expect(LUMINANCE_THRESHOLD).toBe(0.5); diff --git a/packages/mcp/src/__tests__/utils/scale-fit.test.ts b/packages/mcp/src/__tests__/utils/scale-fit.test.ts new file mode 100644 index 00000000..d4fa021d --- /dev/null +++ b/packages/mcp/src/__tests__/utils/scale-fit.test.ts @@ -0,0 +1,84 @@ +import { describe, expect, it } from "vitest"; +import { fitScale } from "../../utils/scale-fit.js"; + +/** Pure sRGB relative luminance, so the fitter can be tested without a Sass round-trip. */ +const luminance = (hex: string): number => { + const c = [1, 3, 5].map( + (i) => Number.parseInt(hex.slice(i, i + 2), 16) / 255, + ); + const f = (v: number) => + v < 0.03928 ? v / 12.92 : ((v + 0.055) / 1.055) ** 2.4; + return 0.2126 * f(c[0]) + 0.7152 * f(c[1]) + 0.0722 * f(c[2]); +}; + +const TAILWIND_SLATE = [ + "#f8fafc", + "#f1f5f9", + "#e2e8f0", + "#cbd5e1", + "#94a3b8", + "#64748b", + "#475569", + "#334155", + "#1e293b", + "#0f172a", +]; + +const CARBON_GRAY = [ + "#f4f4f4", + "#e0e0e0", + "#c6c6c6", + "#a8a8a8", + "#8d8d8d", + "#6f6f6f", + "#525252", + "#393939", + "#262626", + "#161616", +]; + +describe("fitScale", () => { + it("recovers the range from the ladder's endpoints", () => { + const fitted = fitScale(TAILWIND_SLATE.map(luminance)); + + // The committed `tailwind` preset is range 1.04 17.76, fitted from this same ladder. + expect(fitted.range[0]).toBeCloseTo(1.04, 1); + expect(fitted.range[1]).toBeCloseTo(17.8, 0); + }); + + it("reproduces the committed presets it was fitted from", () => { + for (const ladder of [TAILWIND_SLATE, CARBON_GRAY]) { + const fitted = fitScale(ladder.map(luminance)); + + expect(fitted.curve).not.toBeNull(); + // Every rung the fit predicts should land on the ladder it came from. + for (const rung of fitted.rungs) { + expect(Math.abs(rung.fitted - rung.actual) / rung.actual).toBeLessThan( + 0.05, + ); + } + expect(fitted.rms).toBeLessThan(0.02); + } + }); + + it("returns a null curve for a ladder that is already evenly spread", () => { + // Geometric steps in contrast are exactly what "even" means. + const contrasts = Array.from( + { length: 10 }, + (_, i) => 1.1 * (18 / 1.1) ** (i / 9), + ); + const luminances = contrasts.map((c) => 1.05 / c - 0.05); + + expect(fitScale(luminances).curve).toBeNull(); + }); + + it("rejects a ladder that does not run lightest to darkest", () => { + expect(() => + fitScale([...TAILWIND_SLATE].reverse().map(luminance)), + ).toThrow(/lightest to darkest/); + }); + + it("rejects a ladder too short to fit a curve", () => { + expect(() => fitScale([0.9, 0.1])).toThrow(/at least 3 rungs/); + }); +}); diff --git a/packages/mcp/src/generators/css.ts b/packages/mcp/src/generators/css.ts index da93a585..6db80662 100644 --- a/packages/mcp/src/generators/css.ts +++ b/packages/mcp/src/generators/css.ts @@ -11,8 +11,12 @@ import type { ColorDefinition, GrayDefinition, PLATFORMS, + ScalesInput, + ShadeGenerator, + SurfaceDefinition, ThemeVariant, } from "../utils/types.js"; +import { appendShadeArgs } from "./sass.js"; /** * Result from generating CSS palette variables. @@ -43,6 +47,10 @@ export interface PaletteCssOptions { warn?: string; error?: string; variant?: ThemeVariant; + /** Shade rhythm: a preset name, an inline spec, or a map keyed by family */ + scales?: ScalesInput; + /** Which shade generator to use */ + generator?: ShadeGenerator; /** Internal testing parameter for Sass importers */ _importers?: FileImporter[]; } @@ -79,6 +87,8 @@ export async function generatePaletteCss( if (options.warn) paletteArgs.push(`$warn: ${options.warn}`); if (options.error) paletteArgs.push(`$error: ${options.error}`); + appendShadeArgs(paletteArgs, options); + const sassCode = ` @use 'igniteui-theming/sass/color' as *; @@ -115,7 +125,7 @@ export interface CustomPaletteCssOptions { colors: { primary: ColorDefinition; secondary: ColorDefinition; - surface: ColorDefinition; + surface: SurfaceDefinition; gray: GrayDefinition; info: ColorDefinition; success: ColorDefinition; diff --git a/packages/mcp/src/generators/sass.ts b/packages/mcp/src/generators/sass.ts index 56a7a3f6..0cf52743 100644 --- a/packages/mcp/src/generators/sass.ts +++ b/packages/mcp/src/generators/sass.ts @@ -33,6 +33,9 @@ import type { DesignSystem, GeneratedCode, Platform, + ScaleSpec, + ScalesInput, + ShadeGenerator, ThemeVariant, } from "../utils/types.js"; @@ -57,6 +60,54 @@ export { /** * Generate a palette definition. */ +/** + * Renders a scale spec as Sass. A preset is a quoted name; an inline spec becomes a map of + * the `range` it spans and the `curve` that eases across it. + */ +function scaleToSass(spec: ScaleSpec): string { + if (typeof spec === "string") { + return `'${spec}'`; + } + + const parts: string[] = []; + + if (spec.range) parts.push(`range: (${spec.range.join(", ")})`); + if (spec.curve) parts.push(`curve: (${spec.curve.join(", ")})`); + + return `(${parts.join(", ")})`; +} + +/** + * Renders the `$scales` argument. A bare spec applies to every family; a map keyed by + * family name applies per family. + */ +function scalesToSass(scales: ScalesInput): string { + if (typeof scales === "string") { + return `'${scales}'`; + } + + if ("range" in scales || "curve" in scales) { + return scaleToSass(scales as ScaleSpec); + } + + const entries = Object.entries(scales as Record).map( + ([family, spec]) => `'${family}': ${scaleToSass(spec)}`, + ); + + return `(${entries.join(", ")})`; +} + +/** + * Appends the optional `$generator` and `$scales` arguments to a palette() call. + */ +export function appendShadeArgs( + args: string[], + input: { generator?: ShadeGenerator; scales?: ScalesInput }, +): void { + if (input.generator) args.push(`$generator: '${input.generator}'`); + if (input.scales) args.push(`$scales: ${scalesToSass(input.scales)}`); +} + export function generatePalette(input: CreatePaletteInput): GeneratedCode { const variant = input.variant ?? "light"; const name = input.name ? toVariableName(input.name) : `custom-${variant}`; @@ -76,6 +127,8 @@ export function generatePalette(input: CreatePaletteInput): GeneratedCode { if (input.warn) paletteArgs.push(`$warn: ${input.warn}`); if (input.error) paletteArgs.push(`$error: ${input.error}`); + appendShadeArgs(paletteArgs, input); + const code = `${generateHeader(`${variant} palette with primary color ${input.primary}`)} ${generateUseStatement(input.platform, input.licensed)} @@ -314,6 +367,8 @@ function generateGenericTheme( paletteArgs.push(`$surface: ${variant === "dark" ? "#222222" : "white"}`); } + appendShadeArgs(paletteArgs, input); + // Generate preset imports for typography and/or elevations const presetImports = generatePresetImports({ platform: input.platform, diff --git a/packages/mcp/src/index.ts b/packages/mcp/src/index.ts index 0f266a7f..9c9ebb84 100644 --- a/packages/mcp/src/index.ts +++ b/packages/mcp/src/index.ts @@ -19,6 +19,7 @@ import { createThemeSchema, createTypographySchema, detectPlatformSchema, + fitColorScaleSchema, getChartSeriesColorsSchema, getColorSchema, getComponentDesignTokensSchema, @@ -29,6 +30,7 @@ import { handleCreateTheme, handleCreateTypography, handleDetectPlatform, + handleFitColorScale, handleGetChartSeriesColors, handleGetColor, handleGetComponentDesignTokens, @@ -102,6 +104,8 @@ function registerTools(server: McpServer): void { licensed: createPaletteSchema.shape.licensed, variant: createPaletteSchema.shape.variant, name: createPaletteSchema.shape.name, + scales: createPaletteSchema.shape.scales, + generator: createPaletteSchema.shape.generator, output: createPaletteSchema.shape.output, primary: createPaletteSchema.shape.primary, secondary: createPaletteSchema.shape.secondary, @@ -199,6 +203,8 @@ function registerTools(server: McpServer): void { surfaceColor: createThemeSchema.shape.surfaceColor, variant: createThemeSchema.shape.variant, name: createThemeSchema.shape.name, + scales: createThemeSchema.shape.scales, + generator: createThemeSchema.shape.generator, fontFamily: createThemeSchema.shape.fontFamily, includeTypography: createThemeSchema.shape.includeTypography, includeElevations: createThemeSchema.shape.includeElevations, @@ -354,6 +360,23 @@ function registerTools(server: McpServer): void { }, ); + // fit_color_scale tool + server.registerTool( + "fit_color_scale", + { + title: "Fit Color Scale", + description: TOOL_DESCRIPTIONS.fit_color_scale, + inputSchema: { + colors: fitColorScaleSchema.shape.colors, + name: fitColorScaleSchema.shape.name, + }, + }, + async (params) => { + const validated = fitColorScaleSchema.parse(params); + return handleFitColorScale(validated); + }, + ); + // read_resource tool — description built dynamically from RESOURCE_DEFINITIONS server.registerTool( "read_resource", diff --git a/packages/mcp/src/knowledge/scales.ts b/packages/mcp/src/knowledge/scales.ts new file mode 100644 index 00000000..0a2795a3 --- /dev/null +++ b/packages/mcp/src/knowledge/scales.ts @@ -0,0 +1,126 @@ +/** + * Shade scales - the rhythm a color family follows from its lightest shade to its darkest. + * + * The data is generated from `config.$scales` in the Sass by buildJSON.mjs, so the presets + * here cannot drift from the ones the generator actually ships. + */ + +import { FamilyScales, ShadeScales } from "igniteui-theming"; + +export interface ShadeScale { + /** WCAG contrast at the lightest and darkest shade, measured against white. */ + range: [number, number]; + /** Cubic-bezier control points, or null for the straight line. */ + curve: [number, number, number, number] | null; +} + +const toScale = (raw: { range: string[]; curve: string[] }): ShadeScale => ({ + range: [Number(raw.range[0]), Number(raw.range[1])], + curve: + raw.curve.length === 4 && raw.curve[0] !== "" + ? (raw.curve.map(Number) as [number, number, number, number]) + : null, +}); + +/** Every built-in scale, keyed by name. */ +export const SHADE_SCALES: Record = Object.fromEntries( + Object.entries(ShadeScales).map(([name, raw]) => [name, toScale(raw)]), +); + +/** The names a `scales` argument accepts. */ +export const SCALE_NAMES = Object.keys(SHADE_SCALES); + +/** Which scale each family uses when none is given. Unlisted families use `even`. */ +export const FAMILY_SCALES: Record = FamilyScales; + +/** What each preset is for, in one line. Keyed to the generated scale names. */ +export const SCALE_NOTES: Record = { + even: "Straight line. Every pair of shades 500 apart clears WCAG AA - the only preset that guarantees it.", + material: + "This library's original grayscale. Familiar rhythm, but 2 of the 5 AA pairs fall short.", + tailwind: "Fitted to Tailwind v4 slate. Keeps all 5 AA pairs.", + carbon: "Fitted to IBM Carbon gray 10-100. Keeps all 5 AA pairs.", +}; + +/** + * The on-demand guidance for shade scales. Built from SHADE_SCALES, so the numbers here are + * whatever the Sass currently ships. + */ +export function buildScalesGuidance(): string { + const rows = SCALE_NAMES.map((name) => { + const scale = SHADE_SCALES[name]; + const curve = scale.curve + ? `\`${scale.curve.join(", ")}\`` + : "straight line"; + + return `| \`${name}\` | ${scale.range[0]}:1 → ${scale.range[1]}:1 | ${curve} | ${SCALE_NOTES[name] ?? ""} |`; + }); + + const defaults = Object.entries(FAMILY_SCALES) + .map(([family, name]) => `\`${family}\` uses \`${name}\``) + .join("; "); + + return `# Shade scales + +A scale is the *rhythm* of a color family - where each shade sits between the lightest and +the darkest. It never changes the hue; the seed color still decides that. + +Two numbers describe it: + +- **range** - the WCAG contrast the family spans, from shade 50 to shade 900, measured + against white (or against the background, for \`gray\`). \`1.182 18.232\` means the lightest + shade sits at 1.18:1 and the darkest at 18.23:1. +- **curve** - read exactly like a CSS \`cubic-bezier()\` timing function. \`x\` is how far along + the shades you are, \`y\` is how far into the contrast range. No curve is the straight line. + +## Built-in scales + +| name | range | curve | notes | +|------|-------|-------|-------| +${rows.join("\n")} + +Defaults: ${defaults}. Every other family uses \`even\`. + +## The tradeoff + +An even spread is what makes any two shades 500 apart clear WCAG AA - shade 100 against 600, +200 against 700, and so on. Bunching the light end buys the familiar rhythm people expect +from Material-style palettes, and gives that guarantee up. \`material\` is the preset that +makes this trade; \`tailwind\` and \`carbon\` keep all five pairs. + +Pick \`even\` when accessibility is the priority, a named preset when matching a look. + +## Using one + +Name a preset for every family, or per family: + +\`\`\`scss +$p: palette(#09f, #f0f, #fff, $scales: 'carbon'); +$p: palette(#09f, #f0f, #fff, $scales: ('gray': 'carbon')); +\`\`\` + +## Matching a ladder from somewhere else + +Do not hand-write control points. Call the \`fit_color_scale\` tool with the ladder's colors +ordered lightest first; it measures the range and least-squares fits the curve, and reports +how closely the result reproduces the original. Pass what it returns straight back as +\`scales\`. + +Written inline, a fitted scale looks like this: + +\`\`\`scss +$p: palette(#09f, #f0f, #fff, $scales: ( + 'gray': (range: (1.05, 17.85), curve: (0.611, 0.06, 0.249, 0.46)) +)); +\`\`\` + +\`range\` alone is valid too - it spans that contrast range on a straight line. + +## Generators + +\`$generator\` is a separate axis. \`fitted\` (the default) solves every shade for a contrast +target and is what scales apply to. \`legacy\` reproduces the original multiplier-based ramps and +ignores scales entirely; it exists so an existing theme can stay byte-identical while +migrating. Do not choose it for new work. +`; +} diff --git a/packages/mcp/src/resources/presets.ts b/packages/mcp/src/resources/presets.ts index 4c39b779..dfc39c56 100644 --- a/packages/mcp/src/resources/presets.ts +++ b/packages/mcp/src/resources/presets.ts @@ -62,6 +62,7 @@ import { WEBCOMPONENTS_RUNTIME_CONFIG, WEBCOMPONENTS_USAGE_EXAMPLES, } from "../knowledge/platforms/webcomponents.js"; +import { buildScalesGuidance } from "../knowledge/scales.js"; import { TYPOGRAPHY_PRESETS } from "../knowledge/typography.js"; /** @@ -96,6 +97,7 @@ export const RESOURCE_URIS = { GUIDANCE_COLORS_STATES: `${RESOURCE_SCHEME}://guidance/colors/states`, GUIDANCE_COLORS_THEMES: `${RESOURCE_SCHEME}://guidance/colors/themes`, GUIDANCE_COLORS_CHARTS: `${RESOURCE_SCHEME}://guidance/colors/charts`, + GUIDANCE_COLORS_SCALES: `${RESOURCE_SCHEME}://guidance/colors/scales`, // Chart preset resources PRESETS_CHART_BRUSHES: `${RESOURCE_SCHEME}://presets/chart-brushes`, // Layout documentation resources @@ -245,6 +247,13 @@ export const RESOURCE_DEFINITIONS = [ "Guidance on the shared chart series brush palette (regular/color-blind), the accessibility toggle, per-chart-type color tokens (category, data, doughnut, pie, funnel, shape, financial, gauge, bullet graph), and the theme-vs-component-property override precedence. Excludes sparkline and selection/highlight colors.", mimeType: "text/markdown", }, + { + uri: RESOURCE_URIS.GUIDANCE_COLORS_SCALES, + name: "Shade Scales", + description: + "The rhythm a color family follows from its lightest shade to its darkest: the built-in scales, what each trades away, and how to match a ladder from another design system", + mimeType: "text/markdown", + }, { uri: RESOURCE_URIS.PRESETS_CHART_BRUSHES, name: "Chart Series Brush Palettes", @@ -509,6 +518,13 @@ const RESOURCE_HANDLERS: Map = new Map([ description: "Material/Fluent/Bootstrap/Indigo characteristics", mimeType: "application/json", }, + { + uri: RESOURCE_URIS.GUIDANCE_COLORS_SCALES, + name: "Shade Scales", + description: + "Built-in shade rhythms and how to fit one to an existing ladder", + mimeType: "text/markdown", + }, { uri: RESOURCE_URIS.GUIDANCE_COLORS_CHARTS, name: "Chart Series Colors Guidance", @@ -575,6 +591,13 @@ const RESOURCE_HANDLERS: Map = new Map([ mimeType: "text/markdown", }), ], + [ + RESOURCE_URIS.GUIDANCE_COLORS_SCALES, + () => ({ + content: buildScalesGuidance(), + mimeType: "text/markdown", + }), + ], [ RESOURCE_URIS.PRESETS_CHART_BRUSHES, () => ({ diff --git a/packages/mcp/src/tools/descriptions.ts b/packages/mcp/src/tools/descriptions.ts index 901b1178..799692ac 100644 --- a/packages/mcp/src/tools/descriptions.ts +++ b/packages/mcp/src/tools/descriptions.ts @@ -39,13 +39,17 @@ export const FRAGMENTS = { GRAY_SHADES: "10 shades required: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900", - /** Luminance warning */ - LUMINANCE_WARNING: - "Colors with extreme luminance (< 0.05 or > 0.45) may produce suboptimal automatic shade generation.", + /** Surface layer roles */ + SURFACE_ROLES: + "6 layers required: base, sunken, raised, overlay, container, seed", - /** Monochromatic requirement for chromatic colors */ + /** What a seed color does and does not control */ + SEED_BEHAVIOUR: + "Every shade is solved for a contrast target, so a seed supplies HUE and SATURATION, not lightness - a very light or very dark brand color yields the same ramp as a mid-tone one. Pass the brand color as-is. The one caveat: a seed with almost no chroma (a near-white or near-gray wash) is read as neutral and produces a gray ramp.", + + /** Monochromatic requirement - only applies to hand-written explicit shades */ MONOCHROMATIC_RULE: - "MONOCHROMATIC REQUIREMENT: All shades in a color group (e.g., primary) must be the SAME HUE. Shades are lighter/darker versions of ONE color, NOT different colors. Example: primary shades should all be blue (#E3F2FD → #0D47A1), not blue→green→purple. Vary only lightness and saturation, keep hue constant (±30° tolerance).", + "In explicit mode, all shades in a group must be the SAME HUE (±30°) and run 50 lightest to 900 darkest - they are lightness steps of one color, not different colors. Shades mode enforces this for you.", /** Sass @use placement guidance for tools that generate Sass output */ SASS_FILE_PLACEMENT: `SASS FILE PLACEMENT: @@ -132,8 +136,8 @@ export const TOOL_DESCRIPTIONS = { Use this tool when you have base colors and want to auto-generate a complete palette - with all shade variations (50-900, A100-A700). Best for colors with mid-range luminance - that will produce good automatic shade distribution. + with all shade variations (50-900, A100-A700). This is the right tool for almost every + palette - pass the brand colors and let the generator do the rest. @@ -148,17 +152,16 @@ export const TOOL_DESCRIPTIONS = { 1. Validates input colors against the theme variant - 2. Analyzes color luminance for shade generation suitability - 3. Generates Sass code OR compiles to CSS based on output parameter - 4. Adds warning comments to code if issues detected - 5. Returns validation warnings and tips in response + 2. Generates Sass code OR compiles to CSS based on output parameter + 3. Adds warning comments to code if issues detected + 4. Returns validation warnings and tips in response - Requires primary, secondary, and surface colors (matches Sass palette() API) - Gray, info, success, warn, error are optional (use design system defaults) - Surface color should match variant: light colors for "light", dark for "dark" - - ${FRAGMENTS.LUMINANCE_WARNING} + - ${FRAGMENTS.SEED_BEHAVIOUR} SHADE PROGRESSION (important): - Primary, secondary, and all chromatic colors: shades are NEVER inverted. @@ -181,7 +184,6 @@ export const TOOL_DESCRIPTIONS = { - Invalid color format: Returns error with format examples - Variant mismatch: Warns if surface color doesn't match theme variant - - Luminance issues: Warns with recommendation to use create_custom_palette @@ -205,7 +207,7 @@ export const TOOL_DESCRIPTIONS = { - detect_platform: Run first to get correct platform value - - create_custom_palette: Use if this tool warns about luminance issues + - create_custom_palette: Only when exact per-shade values are mandated by a brand spec - create_theme: Use instead if you want palette + typography + elevations together @@ -230,12 +232,18 @@ export const TOOL_DESCRIPTIONS = { This applies to BOTH light and dark themes. Only gray inverts for dark themes. - Use this tool when: - - The standard palette() function produces suboptimal shade distribution - - You have brand guidelines specifying exact color values for each shade - - Base colors are too light (luminance > 0.45) or too dark (< 0.05) - - You have specific accessibility audit requirements with exact contrast color values (rare - auto-generated contrast is usually sufficient) - - You want to mix auto-generated and manually specified color groups + PREFER create_palette. It derives every shade from a seed by solving for a contrast + target, so it handles any brand color - light, dark, muted or neon - on its own. + ${FRAGMENTS.SEED_BEHAVIOUR} + + Reach for this tool only when: + - A brand spec mandates exact values for specific shades, and those values must be + reproduced rather than generated + - An accessibility audit requires exact contrast color values (rare - the generated + adaptive-contrast() is normally what you want) + + Mixing is supported and is the usual shape: pin the one group the brand specifies and + leave every other group in "shades" mode. @@ -251,69 +259,36 @@ export const TOOL_DESCRIPTIONS = { 1. For each color group, choose a mode: - - mode:"shades" → Auto-generate all shades from baseColor using shades() function - - mode:"explicit" → Manually specify every shade value - 2. Validates all explicit shades for: - - Completeness: All required shades present - - Color format: Valid CSS color values - - Luminance progression: 50 lightest → 900 darkest (chromatic colors) - - Hue consistency: All shades within ±30° hue tolerance (monochromatic) + - mode:"shades" → Auto-generate from baseColor (the default choice) + - mode:"explicit" → Reproduce mandated values shade by shade + 2. Validates explicit shades for completeness, color format, lightness order and hue + consistency 3. Generates Sass code with color() map structure 4. Returns any validation warnings - CRITICAL - SHADE PROGRESSION RULES: - - CHROMATIC colors (primary, secondary, surface, info, success, warn, error): - Shade 50 = ALWAYS lightest, shade 900 = ALWAYS darkest. - This is TRUE FOR BOTH light AND dark themes. NEVER invert chromatic colors. - - GRAY color ONLY: Inverts for dark themes (50=darkest, 900=lightest). - - DO NOT confuse these rules. Only gray inverts, never primary/secondary/etc. - - ⚠️ CRITICAL - MONOCHROMATIC REQUIREMENT: - Each color group (primary, secondary, etc.) must contain shades of ONE COLOR ONLY. - Shades are lighter/darker variations of the SAME hue - NOT different colors! - - CORRECT example for primary blue: - 50: "#E3F2FD" (very light blue) - 500: "#2196F3" (medium blue) - 900: "#0D47A1" (dark blue) - → All shades are BLUE, just different lightness levels - - WRONG example (DO NOT DO THIS): - 50: "#E3F2FD" (light blue) - 500: "#4CAF50" (green) ← WRONG! Different hue - 900: "#9C27B0" (purple) ← WRONG! Different hue - → This creates a rainbow, not a shade palette - - Rule: Keep hue constant (±30° tolerance), vary only lightness and saturation. - - CHROMATIC COLORS (primary, secondary, surface, info, success, warn, error): - - Explicit mode requires ${FRAGMENTS.CHROMATIC_SHADES} - - Shade 50 = lightest, shade 900 = darkest (SAME for light AND dark themes) - - ALL shades must be the SAME HUE (monochromatic) - see requirement above - - A100-A700 are accent shades (same hue, typically more saturated) - - GRAY COLOR (the ONLY color that inverts): - - Explicit mode requires ${FRAGMENTS.GRAY_SHADES} - - LIGHT themes: 50 = lightest (near white), 900 = darkest (near black) - - DARK themes: 50 = darkest, 900 = lightest (INVERTED progression) - - Gray inverts because text/UI elements need to contrast against the surface - - CONTRAST COLORS (AUTO-GENERATED - DO NOT PROVIDE): - - DO NOT include contrastOverrides in your input - OMIT THIS FIELD ENTIRELY - - The system AUTOMATICALLY generates contrast colors using adaptive-contrast() - - For each shade, the generated Sass output will include: - '500': #4CAF50, - '500-contrast': adaptive-contrast(#4CAF50), ← AUTO-GENERATED - '500-raw': #4CAF50, - - The adaptive-contrast() function auto-selects black or white for readability - - Only provide contrastOverrides if you have a specific accessibility audit - requiring exact contrast color values (this is extremely rare) - - MIXING MODES: - - You can use "shades" mode for some colors and "explicit" for others - - Example: explicit primary, shades-based secondary and surface + CHROMATIC COLORS (primary, secondary, info, success, warn, error): + - "shades" mode needs only a baseColor - prefer it + - "explicit" mode requires ${FRAGMENTS.CHROMATIC_SHADES} + - ${FRAGMENTS.MONOCHROMATIC_RULE} + - Chromatic shades are NEVER inverted: 50 is lightest and 900 darkest in BOTH light + and dark themes + + GRAY (the only family that inverts): + - "explicit" mode requires ${FRAGMENTS.GRAY_SHADES} + - LIGHT themes: 50 = lightest, 900 = darkest. DARK themes: inverted + - Gray inverts because text and UI elements contrast against the surface + + SURFACE (not a ramp): + - A background plus the layers on it, keyed by ${FRAGMENTS.SURFACE_ROLES} + - "base" is the page; "sunken"/"raised"/"overlay" step away from it; "container" is a + translucent tint; "seed" is the input color + - There are no numeric surface shades and no hue ramp to keep monochromatic + + CONTRAST COLORS - OMIT contrastOverrides entirely. Each shade automatically gets + '-contrast': adaptive-contrast(), which picks black or white for + readability. Only supply overrides for an audit demanding exact values. ${FRAGMENTS.SASS_FILE_PLACEMENT} @@ -339,47 +314,37 @@ export const TOOL_DESCRIPTIONS = { - Brand green with exact shades (NOTE: ALL shades are GREEN - same hue, different lightness): + The usual case - every group from a seed: + { + "variant": "light", + "primary": { "mode": "shades", "baseColor": "#4CAF50" }, + "secondary": { "mode": "shades", "baseColor": "#FF9800" }, + "surface": { "mode": "shades", "baseColor": "#FAFAFA" } + } - INPUT (what you provide - NO contrastOverrides needed): + A brand spec pins primary; everything else is still generated: { "variant": "light", "primary": { "mode": "explicit", "shades": { - "50": "#E8F5E9", - "100": "#C8E6C9", - "200": "#A5D6A7", - "300": "#81C784", - "400": "#66BB6A", - "500": "#4CAF50", - "600": "#43A047", - "700": "#388E3C", - "800": "#2E7D32", - "900": "#1B5E20", - "A100": "#B9F6CA", - "A200": "#69F0AE", - "A400": "#00E676", - "A700": "#00C853" + "50": "#E8F5E9", "100": "#C8E6C9", "200": "#A5D6A7", "300": "#81C784", + "400": "#66BB6A", "500": "#4CAF50", "600": "#43A047", "700": "#388E3C", + "800": "#2E7D32", "900": "#1B5E20", + "A100": "#B9F6CA", "A200": "#69F0AE", "A400": "#00E676", "A700": "#00C853" } - // ↑ Only provide shades - contrast colors are AUTO-GENERATED }, "secondary": { "mode": "shades", "baseColor": "#FF9800" }, "surface": { "mode": "shades", "baseColor": "#FAFAFA" } } - GENERATED OUTPUT (contrast colors added automatically): - 'primary': ( - '500': #4CAF50, - '500-contrast': adaptive-contrast(#4CAF50), // ← AUTO-GENERATED - '500-raw': #4CAF50, // ← AUTO-GENERATED - // ... same pattern for all 14 shades - ) + Note: no contrastOverrides in either input. The generated Sass adds + '500-contrast': adaptive-contrast(#4CAF50) for every shade automatically. - detect_platform: Run first to get correct platform value - - create_palette: Use for simpler cases with mid-range luminance colors + - create_palette: Prefer this - it handles any seed color without hand-written shades - create_theme: Does not support custom palettes; use this tool + manual theme assembly @@ -410,6 +375,30 @@ export const TOOL_DESCRIPTIONS = { // --------------------------------------------------------------------------- // create_typography - Medium complexity // --------------------------------------------------------------------------- + fit_color_scale: `Derive a shade scale from an existing color ladder. + + + Use when shades must follow the rhythm of a ladder you already have - another design + system's grays, a brand ramp, a palette from a screenshot. Pass the returned spec to + create_palette or create_theme as \`scales\`. Never hand-write range/curve values. + + Not needed for the built-in presets ("even" | "material" | "tailwind" | "carbon") - + name those in \`scales\` directly. + + + + - Order the colors LIGHTEST FIRST (a 50-900 ladder already is). 3 minimum, 10 fits best. + - The response reports how closely the fit reproduces the ladder; a ladder that does not + follow one smooth curve fits loosely and says so. + - A scale sets rhythm only, never hue - the seed still decides the color. + - Background: read_resource "igniteui-theming://guidance/colors/scales" + + + + { "colors": ["#f8fafc","#f1f5f9","#e2e8f0","#cbd5e1","#94a3b8", + "#64748b","#475569","#334155","#1e293b","#0f172a"], "name": "gray" } +`, + create_typography: `Set up typography for Ignite UI themes with custom font families and type scales. @@ -516,13 +505,11 @@ export const TOOL_DESCRIPTIONS = { - 1. Analyzes input colors for palette shade generation suitability - 2. Creates color palette using palette() function - 3. Sets up typography with specified font family (if includeTypography: true) - 4. Configures elevations based on design system (if includeElevations: true) - 5. Configures spacing utilities for Web Components, React, and Blazor (if includeSpacing: true) - 6. Applies the theme using the theme() mixin - 7. Returns luminance warnings if any colors may produce poor shades + 1. Creates color palette using palette() function + 2. Sets up typography with specified font family (if includeTypography: true) + 3. Configures elevations based on design system (if includeElevations: true) + 4. Configures spacing utilities for Web Components, React, and Blazor (if includeSpacing: true) + 5. Applies the theme using the theme() mixin @@ -538,9 +525,8 @@ export const TOOL_DESCRIPTIONS = { - Only gray shades behave differently (for text contrast against surface). - DO NOT provide inverted primary/secondary colors for dark themes. - LUMINANCE ANALYSIS: - - ${FRAGMENTS.LUMINANCE_WARNING} - - If warnings appear, consider using create_custom_palette for those colors + SEED COLORS: + - ${FRAGMENTS.SEED_BEHAVIOUR} PLATFORM DIFFERENCES: - Angular: Uses igniteui-angular/theming with core() and theme() mixins @@ -554,14 +540,12 @@ export const TOOL_DESCRIPTIONS = { Returns: - Complete Sass code with all theme components - - Luminance analysis warnings (if applicable) - List of variables created/used - Platform-specific guidance - Invalid color format: Returns error with format examples - - Luminance issues: Warns but still generates code (may produce suboptimal shades) - Variant mismatch: Warns if surface color doesn't match theme variant @@ -582,17 +566,13 @@ export const TOOL_DESCRIPTIONS = { After generating a theme: - 1. Review any luminance warnings in the output - 2. If warnings suggest shade generation issues: - - Use create_custom_palette for problematic colors - - Manually assemble theme with custom palette - 3. Import the generated Sass file in your application's main styles - 4. Customize individual component themes as needed using component schema overrides + 1. Import the generated Sass file in your application's main styles + 2. Customize individual component themes as needed using component schema overrides - detect_platform: Run first to auto-detect platform from package.json - - create_custom_palette: Use for colors that produce luminance warnings + - create_custom_palette: Only when exact per-shade values are mandated by a brand spec - create_palette: Use if you only need a palette without full theme - create_typography: Use if you only need typography setup - create_elevations: Use if you only need elevation shadows @@ -1248,19 +1228,35 @@ Layout tools (set_size, set_spacing, set_roundness) default to "css". Generation // Custom palette parameters (for create_custom_palette) // --------------------------------------------------------------------------- colorDefinition: `Color definition object with mode selection: -• mode: "shades" + baseColor: Auto-generates all shades from one color +• mode: "shades" + baseColor: Auto-generates all shades from one color - prefer this • mode: "explicit" + shades: Manually specify all ${FRAGMENTS.CHROMATIC_SHADES} -IMPORTANT: All shades must be MONOCHROMATIC (same hue). Shades are lighter/darker versions of ONE color, not different colors.`, +${FRAGMENTS.MONOCHROMATIC_RULE}`, + + surfaceDefinition: `Surface definition object with mode selection: +• mode: "shades" + baseColor: Auto-generates the background and its layers from one color +• mode: "explicit" + shades: Manually specify all ${FRAGMENTS.SURFACE_ROLES} +IMPORTANT: A surface is a background plus the layers that sit on it, so it is addressed by ROLE, not by shade number. "base" is the page background; "sunken", "raised" and "overlay" step away from it; "container" is a translucent tint. A role with no room in its direction resolves back onto "base".`, grayDefinition: `Gray color definition object with mode selection: • mode: "shades" + baseColor: Auto-generates all shades from one color • mode: "explicit" + shades: Manually specify all ${FRAGMENTS.GRAY_SHADES} Important: Gray progression is INVERTED for dark themes (50=darkest, 900=lightest).`, - baseColor: `Base color for automatic shade generation using shades() function. Choose a mid-luminance color (0.1-0.4) for best results. ${FRAGMENTS.COLOR_FORMAT}`, + scales: `OPTIONAL - omit unless asked to match another system's rhythm. Preset name ("even" | "material" | "tailwind" | "carbon"), or a map keyed by family: {"gray": "carbon"}. To match a ladder you have seen, call fit_color_scale and pass back its spec - never hand-write a curve.`, + + generator: `OPTIONAL - omit it. "legacy" reproduces the original multiplier-based ramps and exists only to keep an existing theme byte-identical while migrating.`, + + ladderColors: `The ladder to fit, LIGHTEST FIRST (3-20 colors). ${FRAGMENTS.COLOR_FORMAT}`, + + ladderName: + "Optional label for the fitted scale, used in the generated Sass comment.", + + baseColor: `Base color for automatic shade generation using shades() function. Pass the brand color as-is; its lightness does not need adjusting. ${FRAGMENTS.COLOR_FORMAT}`, shades: `Object with all shade values. ${FRAGMENTS.CHROMATIC_SHADES}. Luminance should decrease from 50 (lightest) to 900 (darkest). CRITICAL: All shades must be the SAME COLOR (same hue) at different lightness levels - do NOT use different colors for different shades.`, + surfaceRoles: `Object with all surface layer values. ${FRAGMENTS.SURFACE_ROLES}. "base" is the page background; "sunken" is darker, "raised" and "overlay" lighter (inverted for dark themes); "container" is a translucent black/white tint; "seed" is the original input color.`, + grayShades: `Object with all gray shade values. ${FRAGMENTS.GRAY_SHADES}. For light themes: 50=lightest, 900=darkest. For dark themes: 50=darkest, 900=lightest.`, contrastOverrides: diff --git a/packages/mcp/src/tools/handlers/custom-palette.ts b/packages/mcp/src/tools/handlers/custom-palette.ts index a3176c10..ac412597 100644 --- a/packages/mcp/src/tools/handlers/custom-palette.ts +++ b/packages/mcp/src/tools/handlers/custom-palette.ts @@ -22,6 +22,7 @@ import type { ColorDefinition, GrayDefinition, ShadesBasedColor, + SurfaceDefinition, } from "../../utils/types.js"; import { formatCustomPaletteValidation, @@ -40,13 +41,13 @@ export async function handleCreateCustomPalette( const preset = PALETTE_PRESETS[presetName]; // Determine surface color for gray generation - // If surface is explicit, extract a representative color (500 shade) + // If surface is explicit, extract a representative color (the `base` layer) // If surface is shades-based, use the baseColor let surfaceColorForGray: string; if (params.surface.mode === "shades") { surfaceColorForGray = params.surface.baseColor; } else { - surfaceColorForGray = params.surface.shades["500"]; + surfaceColorForGray = params.surface.shades.base; } // Fill in missing colors with defaults from preset (using shades mode) @@ -54,7 +55,7 @@ export async function handleCreateCustomPalette( const colors: { primary: ColorDefinition; secondary: ColorDefinition; - surface: ColorDefinition; + surface: SurfaceDefinition; gray: GrayDefinition; info: ColorDefinition; success: ColorDefinition; @@ -63,7 +64,7 @@ export async function handleCreateCustomPalette( } = { primary: params.primary as ColorDefinition, secondary: params.secondary as ColorDefinition, - surface: params.surface as ColorDefinition, + surface: params.surface as SurfaceDefinition, gray: (params.gray as GrayDefinition) ?? ({ mode: "shades", baseColor: preset.gray } as ShadesBasedColor), @@ -145,7 +146,7 @@ async function handleCssOutput( colors: { primary: ColorDefinition; secondary: ColorDefinition; - surface: ColorDefinition; + surface: SurfaceDefinition; gray: GrayDefinition; info: ColorDefinition; success: ColorDefinition; @@ -235,7 +236,7 @@ function handleSassOutput( colors: { primary: ColorDefinition; secondary: ColorDefinition; - surface: ColorDefinition; + surface: SurfaceDefinition; gray: GrayDefinition; info: ColorDefinition; success: ColorDefinition; diff --git a/packages/mcp/src/tools/handlers/fit-scale.ts b/packages/mcp/src/tools/handlers/fit-scale.ts new file mode 100644 index 00000000..6baeabee --- /dev/null +++ b/packages/mcp/src/tools/handlers/fit-scale.ts @@ -0,0 +1,110 @@ +/** + * Handler for fit_color_scale tool. + * Turns an existing color ladder into a `$scales` spec the palette tools accept. + */ + +import { analyzeColorsWithHue } from "../../utils/color.js"; +import { fitScale } from "../../utils/scale-fit.js"; +import type { FitColorScaleParams } from "../schemas.js"; + +/** Renders the fitted spec as the Sass a user would paste into palette(). */ +function toSass( + range: [number, number], + curve: [number, number, number, number] | null, + family: string, +): string { + const parts = [`range: (${range[0]}, ${range[1]})`]; + + if (curve) { + parts.push(`curve: (${curve.join(", ")})`); + } + + return `$scales: ('${family}': (${parts.join(", ")}))`; +} + +export async function handleFitColorScale(params: FitColorScaleParams) { + const { colors, name } = params; + + const analyzed = await analyzeColorsWithHue( + Object.fromEntries(colors.map((c, i) => [`rung${i}`, c])), + ); + + const luminances = colors.map((color, i) => { + const entry = analyzed[`rung${i}`]; + + if (!entry) { + throw new Error(`Could not read the color at position ${i}: ${color}`); + } + + return entry.luminance; + }); + + let fitted: ReturnType; + + try { + fitted = fitScale(luminances); + } catch (error) { + const message = error instanceof Error ? error.message : String(error); + + return { + content: [ + { + type: "text" as const, + text: `**Could not fit a scale**\n\n${message}`, + }, + ], + isError: true, + }; + } + + const family = name ?? "gray"; + const worst = Math.max( + ...fitted.rungs.map((r) => Math.abs(r.fitted - r.actual) / r.actual), + ); + + const lines = [ + `**Fitted scale${name ? ` for "${name}"` : ""}**`, + "", + `- range: \`(${fitted.range[0]}, ${fitted.range[1]})\` — contrast against white at the lightest and darkest rungs`, + `- curve: ${fitted.curve ? `\`(${fitted.curve.join(", ")})\`` : "`null` — the ladder is already evenly spread, so no curve is needed"}`, + `- fit: RMS ${fitted.rms}, worst rung off by ${(worst * 100).toFixed(1)}%`, + "", + "Pass it to create_palette or create_theme as:", + "```json", + JSON.stringify( + { + scales: { + [family]: fitted.curve + ? { range: fitted.range, curve: fitted.curve } + : { range: fitted.range }, + }, + }, + null, + 2, + ), + "```", + "", + "Or write it directly in Sass:", + "```scss", + toSass(fitted.range, fitted.curve, family), + "```", + "", + "| rung | ladder | fitted |", + "|------|--------|--------|", + ...fitted.rungs.map( + (r) => `| ${r.index} | ${r.actual}:1 | ${r.fitted}:1 |`, + ), + ]; + + if (worst > 0.1) { + lines.push( + "", + "Note: the ladder does not follow a single smooth curve, so the fit is approximate. " + + "Check the table above before using it.", + ); + } + + return { + content: [{ type: "text" as const, text: lines.join("\n") }], + }; +} diff --git a/packages/mcp/src/tools/handlers/index.ts b/packages/mcp/src/tools/handlers/index.ts index e5a11057..2a3dccd8 100644 --- a/packages/mcp/src/tools/handlers/index.ts +++ b/packages/mcp/src/tools/handlers/index.ts @@ -8,6 +8,7 @@ export { handleCreateComponentTheme } from "./component-theme.js"; export { handleGetComponentDesignTokens } from "./component-tokens.js"; export { handleCreateCustomPalette } from "./custom-palette.js"; export { handleCreateElevations } from "./elevations.js"; +export { handleFitColorScale } from "./fit-scale.js"; export { handleSetRoundness, handleSetSize, diff --git a/packages/mcp/src/tools/handlers/theme.ts b/packages/mcp/src/tools/handlers/theme.ts index 733b5580..f2ef81c4 100644 --- a/packages/mcp/src/tools/handlers/theme.ts +++ b/packages/mcp/src/tools/handlers/theme.ts @@ -6,10 +6,7 @@ import { formatCssOutput, generateThemeCss } from "../../generators/css.js"; import { generateTheme } from "../../generators/sass.js"; import { SASS_USE_ASSEMBLY_NOTE } from "../../utils/sass.js"; import { - analyzeThemeColorsForPalette, - formatPaletteSuitabilityWarnings, formatValidationResult, - generatePaletteSuitabilityComments, generateWarningComments, validatePaletteColors, } from "../../validators/index.js"; @@ -26,24 +23,16 @@ export async function handleCreateTheme(params: CreateThemeParams) { surface: params.surfaceColor, }); - // Analyze colors for palette shade generation suitability - const suitabilityAnalysis = await analyzeThemeColorsForPalette({ - primary: params.primaryColor, - secondary: params.secondaryColor, - surface: params.surfaceColor, - }); - if (output === "css") { - return handleCssOutput(params, validation, suitabilityAnalysis); + return handleCssOutput(params, validation); } - return handleSassOutput(params, validation, suitabilityAnalysis); + return handleSassOutput(params, validation); } async function handleCssOutput( params: CreateThemeParams, validation: Awaited>, - suitabilityAnalysis: Awaited>, ) { try { const result = await generateThemeCss({ @@ -91,11 +80,6 @@ async function handleCssOutput( responseParts.push(validationText); } - if (!suitabilityAnalysis.allSuitable) { - responseParts.push(""); - responseParts.push(formatPaletteSuitabilityWarnings(suitabilityAnalysis)); - } - responseParts.push(""); responseParts.push("```css"); responseParts.push(formattedCss.trimEnd()); @@ -121,7 +105,6 @@ async function handleCssOutput( async function handleSassOutput( params: CreateThemeParams, validation: Awaited>, - suitabilityAnalysis: Awaited>, ) { // Generate the theme code const result = generateTheme({ @@ -150,13 +133,6 @@ async function handleSassOutput( allWarningComments.push(...generateWarningComments(validation)); } - // Add suitability warnings (block comment) - if (!suitabilityAnalysis.allSuitable) { - allWarningComments.push( - ...generatePaletteSuitabilityComments(suitabilityAnalysis), - ); - } - // Insert all warning comments after the header but before the @use statement if (allWarningComments.length > 0) { const lines = finalCode.split("\n"); @@ -207,12 +183,6 @@ async function handleSassOutput( responseParts.push(validationText); } - // Add suitability warnings (luminance issues) - if (!suitabilityAnalysis.allSuitable) { - responseParts.push(""); - responseParts.push(formatPaletteSuitabilityWarnings(suitabilityAnalysis)); - } - responseParts.push(""); responseParts.push(`Variables created/used: ${result.variables.join(", ")}`); responseParts.push(""); diff --git a/packages/mcp/src/tools/index.ts b/packages/mcp/src/tools/index.ts index bacefca3..d0de60a1 100644 --- a/packages/mcp/src/tools/index.ts +++ b/packages/mcp/src/tools/index.ts @@ -10,6 +10,7 @@ export { handleCreateTheme, handleCreateTypography, handleDetectPlatform, + handleFitColorScale, handleGetChartSeriesColors, handleGetColor, handleGetComponentDesignTokens, @@ -33,6 +34,8 @@ export { createTypographySchema, type DetectPlatformParams, detectPlatformSchema, + type FitColorScaleParams, + fitColorScaleSchema, type GetChartSeriesColorsParams, type GetColorParams, type GetComponentDesignTokensParams, diff --git a/packages/mcp/src/tools/schemas.ts b/packages/mcp/src/tools/schemas.ts index 440884c0..6b0c57f1 100644 --- a/packages/mcp/src/tools/schemas.ts +++ b/packages/mcp/src/tools/schemas.ts @@ -19,10 +19,29 @@ import { OUTPUT_FORMATS, PALETTE_COLOR_GROUPS, PLATFORMS, + SURFACE_ROLES, VARIANTS, } from "../utils/types.js"; import { PARAM_DESCRIPTIONS } from "./descriptions.js"; +/** + * A shade scale: a preset name, or an inline spec. Accepted as one value for every family + * or as a map keyed by family name. + */ +const scaleSpecSchema = z.union([ + z.string(), + z.object({ + range: z.array(z.number()).length(2).optional(), + curve: z.array(z.number()).length(4).optional(), + }), +]); + +const scalesSchema = z + .union([scaleSpecSchema, z.record(z.string(), scaleSpecSchema)]) + .optional(); + +const generatorSchema = z.enum(["fitted", "legacy"]).optional(); + /** * Regex for validating CSS color values. * @@ -130,6 +149,8 @@ export const createPaletteSchema = z.object({ variant: variantSchema.describe(PARAM_DESCRIPTIONS.variant), name: z.string().optional().describe(PARAM_DESCRIPTIONS.name), output: outputFormatSchema.describe(PARAM_DESCRIPTIONS.output), + scales: scalesSchema.describe(PARAM_DESCRIPTIONS.scales), + generator: generatorSchema.describe(PARAM_DESCRIPTIONS.generator), }); /** @@ -187,6 +208,8 @@ export const createThemeSchema = z.object({ surfaceColor: colorSchema.describe(PARAM_DESCRIPTIONS.surfaceColor), variant: variantSchema.describe(PARAM_DESCRIPTIONS.variant), name: z.string().optional().describe(PARAM_DESCRIPTIONS.name), + scales: scalesSchema.describe(PARAM_DESCRIPTIONS.scales), + generator: generatorSchema.describe(PARAM_DESCRIPTIONS.generator), fontFamily: z.string().optional().describe(PARAM_DESCRIPTIONS.fontFamily), includeTypography: z .boolean() @@ -285,6 +308,28 @@ const explicitGrayShadesSchema = z.object({ .describe(PARAM_DESCRIPTIONS.contrastOverrides), }); +/** + * Schema for explicit surface layers, keyed by role rather than by shade number. + */ +const explicitSurfaceRolesSchema = z.object({ + mode: z.literal("explicit"), + shades: z + .object( + Object.fromEntries(SURFACE_ROLES.map((s) => [s, colorSchema])) as Record< + string, + z.ZodString + >, + ) + .describe(PARAM_DESCRIPTIONS.surfaceRoles), + contrastOverrides: z + .record( + z.enum(SURFACE_ROLES as unknown as [string, ...string[]]), + colorSchema, + ) + .optional() + .describe(PARAM_DESCRIPTIONS.contrastOverrides), +}); + /** * Schema for color definition - either shades-based or explicit. */ @@ -293,6 +338,14 @@ const colorDefinitionSchema = z.union([ explicitColorShadesSchema, ]); +/** + * Schema for surface definition - either shades-based or explicit roles. + */ +const surfaceDefinitionSchema = z.union([ + shadesBasedColorSchema, + explicitSurfaceRolesSchema, +]); + /** * Schema for gray definition - either shades-based or explicit. */ @@ -315,7 +368,9 @@ export const createCustomPaletteSchema = z.object({ // Required colors - use colorDefinition description for detailed guidance primary: colorDefinitionSchema.describe(PARAM_DESCRIPTIONS.colorDefinition), secondary: colorDefinitionSchema.describe(PARAM_DESCRIPTIONS.colorDefinition), - surface: colorDefinitionSchema.describe(PARAM_DESCRIPTIONS.colorDefinition), + surface: surfaceDefinitionSchema.describe( + PARAM_DESCRIPTIONS.surfaceDefinition, + ), // Optional colors - defaults from design system preset if not provided gray: grayDefinitionSchema @@ -518,6 +573,20 @@ export type SetRoundnessParams = z.infer; /** * Schema for read_resource tool. */ +/** + * Schema for fit_color_scale tool. + */ +export const fitColorScaleSchema = z.object({ + colors: z + .array(colorSchema) + .min(3) + .max(20) + .describe(PARAM_DESCRIPTIONS.ladderColors), + name: z.string().optional().describe(PARAM_DESCRIPTIONS.ladderName), +}); + +export type FitColorScaleParams = z.infer; + export const readResourceSchema = z.object({ uri: z.string().describe(PARAM_DESCRIPTIONS.resourceUri), }); diff --git a/packages/mcp/src/utils/color.ts b/packages/mcp/src/utils/color.ts index 9f4850d1..a71e09c8 100644 --- a/packages/mcp/src/utils/color.ts +++ b/packages/mcp/src/utils/color.ts @@ -452,111 +452,3 @@ export async function analyzeColorsWithHue( throw new Error(`Failed to analyze colors: ${message}`); } } - -// ============================================================================ -// Palette Shade Generation Suitability -// ============================================================================ - -/** - * Luminance thresholds for palette shade generation suitability. - * Colors outside this range may produce poor automatic shade generation results. - * - * Note: This is different from LUMINANCE_THRESHOLD (0.5) which determines - * if a color is "light" or "dark" for variant matching. These thresholds - * determine if a color can produce a good range of shades when used with - * the palette() function. - * - * Based on color theory research: - * - Optimal base color tone: 35-65 L* (CIELAB) - * - Too light (L* > 70-75): darker shades compress together - * - Too dark (L* < 25-30): lighter shades compress together - */ -export const PALETTE_LUMINANCE_THRESHOLDS = { - /** Below this luminance, lighter shades (50-200) will lack contrast range */ - TOO_DARK: 0.05, - /** Above this luminance, darker shades (600-900) will appear washed out */ - TOO_LIGHT: 0.45, -} as const; - -/** - * Base fields for palette suitability analysis. - */ -interface PaletteSuitabilityBase { - /** The original color value */ - color: string; - /** Calculated luminance (0-1) */ - luminance: number; -} - -/** - * Result when a color is suitable for automatic shade generation. - */ -interface PaletteSuitabilitySuitable extends PaletteSuitabilityBase { - /** The color is suitable for automatic shade generation */ - suitable: true; -} - -/** - * Result when a color is NOT suitable for automatic shade generation. - */ -interface PaletteSuitabilityUnsuitable extends PaletteSuitabilityBase { - /** The color is not suitable for automatic shade generation */ - suitable: false; - /** Issue type - always present when not suitable */ - issue: "too-light" | "too-dark"; - /** Human-readable description of the issue - always present when not suitable */ - description: string; -} - -/** - * Result of analyzing a color for palette shade generation suitability. - * Uses a discriminated union: when `suitable` is false, `issue` and `description` - * are guaranteed to be present. - */ -export type PaletteSuitabilityAnalysis = - | PaletteSuitabilitySuitable - | PaletteSuitabilityUnsuitable; - -/** - * Analyze whether a color is suitable for automatic shade generation. - * Colors with extreme luminance (very light or very dark) may produce - * poor results when using the palette() function's automatic shade generation. - * - * @param color - CSS color value (hex, rgb, hsl, or named color) - * @returns Analysis result indicating suitability and any issues - */ -export async function analyzeColorForPalette( - color: string, -): Promise { - const analysis = await analyzeColor(color); - - if (analysis.luminance > PALETTE_LUMINANCE_THRESHOLDS.TOO_LIGHT) { - return { - color, - luminance: analysis.luminance, - suitable: false, - issue: "too-light", - description: - `Luminance ${analysis.luminance.toFixed(2)} exceeds ${PALETTE_LUMINANCE_THRESHOLDS.TOO_LIGHT} - ` + - "darker shades (600-900) will appear washed out", - }; - } - - if (analysis.luminance < PALETTE_LUMINANCE_THRESHOLDS.TOO_DARK) { - return { - color, - luminance: analysis.luminance, - suitable: false, - issue: "too-dark", - description: - `Luminance ${analysis.luminance.toFixed(2)} is below ${PALETTE_LUMINANCE_THRESHOLDS.TOO_DARK} - ` + - "lighter shades (50-200) will lack contrast range", - }; - } - - return { - color, - luminance: analysis.luminance, - suitable: true, - }; -} diff --git a/packages/mcp/src/utils/sass.ts b/packages/mcp/src/utils/sass.ts index 92c98785..9eab14e2 100644 --- a/packages/mcp/src/utils/sass.ts +++ b/packages/mcp/src/utils/sass.ts @@ -12,6 +12,8 @@ import { type ColorDefinition, type GrayDefinition, type Platform, + SURFACE_ROLES, + type SurfaceDefinition, type ThemeVariant, } from "./types.js"; @@ -360,7 +362,7 @@ export interface CustomPaletteCodeOptions { colors: { primary: ColorDefinition; secondary: ColorDefinition; - surface: ColorDefinition; + surface: SurfaceDefinition; gray: GrayDefinition; info: ColorDefinition; success: ColorDefinition; @@ -400,7 +402,7 @@ export function generateCustomPaletteCode( const colorGroups: Array<{ name: string; - def: ColorDefinition | GrayDefinition; + def: ColorDefinition | GrayDefinition | SurfaceDefinition; shades: readonly string[]; isGray: boolean; }> = [ @@ -423,9 +425,11 @@ export function generateCustomPaletteCode( isGray: true, }, { + // A surface is a background plus its layers, addressed by role rather than by + // shade number. Both generators emit these keys. name: "surface", def: options.colors.surface, - shades: ALL_COLOR_SHADES, + shades: SURFACE_ROLES, isGray: false, }, { diff --git a/packages/mcp/src/utils/scale-fit.ts b/packages/mcp/src/utils/scale-fit.ts new file mode 100644 index 00000000..8ab9ddd9 --- /dev/null +++ b/packages/mcp/src/utils/scale-fit.ts @@ -0,0 +1,148 @@ +/** + * Fits a shade scale to an existing color ladder. + * + * A scale is two things: the WCAG contrast `range` a family spans from its lightest shade + * to its darkest, and a cubic-bezier `curve` placing each shade inside that range. Given a + * ladder of colors from some other design system, both can be recovered exactly - the range + * from the two endpoints, the curve by least-squares over the shades between them. + */ + +/** Control points of a cubic bezier whose outer points are pinned at 0 and 1. */ +export type Curve = [number, number, number, number]; + +export interface FittedScale { + /** Contrast against white at the lightest and darkest rungs. */ + range: [number, number]; + /** The eased placement, or null when the ladder is already evenly spread. */ + curve: Curve | null; + /** RMS error between the fitted curve and the ladder, in normalized range units. */ + rms: number; + /** Per-rung contrast the fitted scale would produce, against the ladder's own. */ + rungs: Array<{ index: number; actual: number; fitted: number }>; +} + +/** WCAG contrast of a luminance against white. */ +const againstWhite = (luminance: number) => 1.05 / (luminance + 0.05); + +/** One axis of a cubic bezier with outer control points at 0 and 1. */ +const bezier = (t: number, p1: number, p2: number) => + 3 * (1 - t) ** 2 * t * p1 + 3 * (1 - t) * t * t * p2 + t ** 3; + +/** Reads the curve the way CSS reads a timing function: solve x for t, return y. */ +export const ease = (x: number, curve: Curve): number => { + let lo = 0; + let hi = 1; + + for (let i = 0; i < 30; i++) { + const mid = (lo + hi) / 2; + + if (bezier(mid, curve[0], curve[2]) < x) { + lo = mid; + } else { + hi = mid; + } + } + + return bezier((lo + hi) / 2, curve[1], curve[3]); +}; + +const sse = (xs: number[], ts: number[], curve: Curve) => + xs.reduce((acc, x, i) => acc + (ease(x, curve) - ts[i]) ** 2, 0); + +/** + * Fit a scale to a ladder of luminances, ordered lightest to darkest. + * + * @param luminances - One luminance per rung, at least 3, lightest first. + * @returns The range, the fitted curve, and how closely it reproduces the ladder. + */ +export function fitScale(luminances: number[]): FittedScale { + if (luminances.length < 3) { + throw new Error( + `A scale needs at least 3 rungs to fit a curve, got ${luminances.length}.`, + ); + } + + const contrasts = luminances.map(againstWhite); + const lo = contrasts[0]; + const hi = contrasts[contrasts.length - 1]; + + if (!(hi > lo)) { + throw new Error( + "Ladder must run lightest to darkest - its last color is not darker than its first.", + ); + } + + // Contrast is perceived as a ratio, so the range is walked geometrically. Normalizing in + // log space is what makes a straight line the "even" scale. + const span = Math.log(hi) - Math.log(lo); + const ts = contrasts.map((c) => (Math.log(c) - Math.log(lo)) / span); + const xs = contrasts.map((_, i) => i / (contrasts.length - 1)); + + // Coarse grid, then a shrinking coordinate descent. The surface is smooth and the grid is + // dense enough to land in the right basin. + let best: Curve = [0.5, 0.5, 0.5, 0.5]; + let bestErr = Number.POSITIVE_INFINITY; + const grid = Array.from({ length: 11 }, (_, i) => i / 10); + + for (const p1x of grid) { + for (const p1y of grid) { + for (const p2x of grid) { + for (const p2y of grid) { + if (p1x <= 0 || p2x <= 0) continue; + + const candidate: Curve = [p1x, p1y, p2x, p2y]; + const err = sse(xs, ts, candidate); + + if (err < bestErr) { + bestErr = err; + best = candidate; + } + } + } + } + } + + for (const step of [0.05, 0.02, 0.008, 0.003]) { + let improved = true; + + while (improved) { + improved = false; + + for (let axis = 0; axis < 4; axis++) { + for (const delta of [-step, step]) { + const candidate = [...best] as Curve; + candidate[axis] = Math.min( + 1, + Math.max(0.001, candidate[axis] + delta), + ); + + const err = sse(xs, ts, candidate); + + if (err < bestErr - 1e-12) { + bestErr = err; + best = candidate; + improved = true; + } + } + } + } + } + + const round = (n: number) => Math.round(n * 1000) / 1000; + const straight = sse(xs, ts, [1 / 3, 1 / 3, 2 / 3, 2 / 3]); + // A ladder already on the straight line does not need a curve, and `null` is how the + // generator spells that. + const curve: Curve | null = + Math.sqrt(straight / xs.length) < 0.01 ? null : (best.map(round) as Curve); + + return { + range: [round(lo), round(hi)], + curve, + rms: round(Math.sqrt(bestErr / xs.length)), + rungs: contrasts.map((actual, i) => ({ + index: i, + actual: round(actual), + fitted: round(lo * (hi / lo) ** (curve ? ease(xs[i], curve) : xs[i])), + })), + }; +} diff --git a/packages/mcp/src/utils/types.ts b/packages/mcp/src/utils/types.ts index e3cddb0e..902d5827 100644 --- a/packages/mcp/src/utils/types.ts +++ b/packages/mcp/src/utils/types.ts @@ -79,6 +79,21 @@ export const SHADE_LEVELS = [ */ export const ACCENT_SHADE_LEVELS = ["A100", "A200", "A400", "A700"] as const; +/** + * Surface layer roles. + * + * A surface is a background plus the layers that sit on it, not a chromatic ramp, so it + * is addressed by role rather than by shade number. Both shade generators emit these. + */ +export const SURFACE_ROLES = [ + "base", + "sunken", + "raised", + "overlay", + "container", + "seed", +] as const; + // ============================================================================ // CANONICAL TYPES (derived from constants) // ============================================================================ @@ -118,6 +133,28 @@ export type ShadeLevel = (typeof SHADE_LEVELS)[number]; */ export type AccentShadeLevel = (typeof ACCENT_SHADE_LEVELS)[number]; +/** + * Surface layer role type. + */ +export type SurfaceRole = (typeof SURFACE_ROLES)[number]; + +/** + * A shade scale: a preset name, or an inline spec giving the contrast `range` a family + * spans and the cubic-bezier `curve` that places each shade inside it. + */ +export type ScaleSpec = string | { range?: number[]; curve?: number[] }; + +/** + * One scale for every family, or a map keyed by family name. + */ +export type ScalesInput = ScaleSpec | Record; + +/** + * Which generator builds the shades. `fitted` solves each shade for a contrast target; + * `legacy` reproduces the original multiplier-based ramps. + */ +export type ShadeGenerator = "fitted" | "legacy"; + /** * Input parameters for palette creation. */ @@ -146,6 +183,10 @@ export interface CreatePaletteInput { variant?: ThemeVariant; /** Custom name for the palette variable */ name?: string; + /** Shade rhythm: a preset name, an inline spec, or a map keyed by family */ + scales?: ScalesInput; + /** Which shade generator to use */ + generator?: ShadeGenerator; } /** @@ -222,6 +263,10 @@ export interface CreateThemeInput { includeElevations?: boolean; /** Whether to include spacing setup (Web Components only) */ includeSpacing?: boolean; + /** Shade rhythm: a preset name, an inline spec, or a map keyed by family */ + scales?: ScalesInput; + /** Which shade generator to use */ + generator?: ShadeGenerator; } /** @@ -333,6 +378,20 @@ export interface ExplicitGrayShades { */ export type ColorDefinition = ShadesBasedColor | ExplicitColorShades; +/** + * Explicit surface layers, keyed by role rather than by shade number. + */ +export interface ExplicitSurfaceRoles { + mode: "explicit"; + shades: Record; + contrastOverrides?: Partial>; +} + +/** + * Surface definition - either shades-based or explicit roles. + */ +export type SurfaceDefinition = ShadesBasedColor | ExplicitSurfaceRoles; + /** * Gray definition - either shades-based or explicit. */ @@ -358,8 +417,8 @@ export interface CreateCustomPaletteInput { primary: ColorDefinition; /** Secondary/accent color definition */ secondary: ColorDefinition; - /** Surface/background color definition */ - surface: ColorDefinition; + /** Surface/background definition, addressed by layer role */ + surface: SurfaceDefinition; // Optional colors (defaults from design system preset) /** Gray/neutral color definition */ diff --git a/packages/mcp/src/validators/custom-palette.ts b/packages/mcp/src/validators/custom-palette.ts index d972c085..4d22a858 100644 --- a/packages/mcp/src/validators/custom-palette.ts +++ b/packages/mcp/src/validators/custom-palette.ts @@ -29,9 +29,22 @@ import { type ColorDefinition, type CreateCustomPaletteInput, type GrayDefinition, + SURFACE_ROLES, + type SurfaceDefinition, type ThemeVariant, } from "../utils/types.js"; +/** + * The chromatic families that are actually a hue ramp. + * + * `surface` is a background plus the layers that sit on it, addressed by role rather than + * by shade number, so the ramp checks below (ordered lightness, one hue throughout) do not + * describe it. + */ +const RAMP_COLOR_GROUPS = CHROMATIC_COLOR_GROUPS.filter( + (g): g is Exclude => g !== "surface", +); + /** * Result of custom palette validation. * Uses the standard ValidationResult interface. @@ -73,7 +86,7 @@ function collectAllColors(input: CreateCustomPaletteInput): { const missingShades: ValidationError[] = []; // Collect chromatic colors - for (const group of CHROMATIC_COLOR_GROUPS) { + for (const group of RAMP_COLOR_GROUPS) { const definition = input[group]; if (definition) { collectFromDefinition( @@ -86,6 +99,17 @@ function collectAllColors(input: CreateCustomPaletteInput): { } } + // Collect surface layers, which are keyed by role + if (input.surface) { + collectFromDefinition( + "surface", + input.surface, + SURFACE_ROLES, + colors, + missingShades, + ); + } + // Collect gray colors if (input.gray) { collectFromDefinition( @@ -105,7 +129,7 @@ function collectAllColors(input: CreateCustomPaletteInput): { */ function collectFromDefinition( groupName: string, - definition: ColorDefinition | GrayDefinition, + definition: ColorDefinition | GrayDefinition | SurfaceDefinition, expectedShades: readonly string[], colors: CollectedColor[], missingShades: ValidationError[], @@ -177,8 +201,9 @@ export async function validateCustomPalette( // Cast to string[] for includes() check since we're validating user input const chromaticShadeSet = ALL_COLOR_SHADES as readonly string[]; const grayShadeSet = SHADE_LEVELS as readonly string[]; + const surfaceRoleSet = SURFACE_ROLES as readonly string[]; - for (const group of CHROMATIC_COLOR_GROUPS) { + for (const group of RAMP_COLOR_GROUPS) { const definition = input[group]; if (definition?.mode === "explicit" && definition.contrastOverrides) { for (const shade of Object.keys(definition.contrastOverrides)) { @@ -191,6 +216,16 @@ export async function validateCustomPalette( } } } + if (input.surface?.mode === "explicit" && input.surface.contrastOverrides) { + for (const role of Object.keys(input.surface.contrastOverrides)) { + if (!surfaceRoleSet.includes(role)) { + errors.push({ + field: makeFieldPath("surface", role), + message: `Invalid contrast override key: ${role}. Valid keys are: ${SURFACE_ROLES.join(", ")}`, + }); + } + } + } if (input.gray?.mode === "explicit" && input.gray.contrastOverrides) { for (const shade of Object.keys(input.gray.contrastOverrides)) { if (!grayShadeSet.includes(shade)) { @@ -239,7 +274,7 @@ export async function validateCustomPalette( // Phase 3: Validate shade progression and monochromatic hue (only for explicit shades) // These use analyzeColorsWithHue which already batches colors efficiently - for (const group of CHROMATIC_COLOR_GROUPS) { + for (const group of RAMP_COLOR_GROUPS) { const definition = input[group]; if (definition?.mode === "explicit") { await validateShadeProgression( diff --git a/packages/mcp/src/validators/index.ts b/packages/mcp/src/validators/index.ts index 207eb759..4479200c 100644 --- a/packages/mcp/src/validators/index.ts +++ b/packages/mcp/src/validators/index.ts @@ -23,15 +23,11 @@ export { } from "./custom-palette.js"; // Palette validation export { - analyzeThemeColorsForPalette, - formatPaletteSuitabilityWarnings, formatValidationResult, - generatePaletteSuitabilityComments, generateWarningComments, type PaletteValidationMetadata, type PaletteValidationResult, type PaletteWarning, - type ThemeColorsSuitabilityResult, type ValidatePaletteColorsInput, validatePaletteColors, type WarningSeverity, diff --git a/packages/mcp/src/validators/palette.ts b/packages/mcp/src/validators/palette.ts index 8cbf0d9d..23df27c2 100644 --- a/packages/mcp/src/validators/palette.ts +++ b/packages/mcp/src/validators/palette.ts @@ -7,12 +7,10 @@ */ import { - analyzeColorForPalette, analyzeSurfaceGrayColors, type ColorAnalysis, DEFAULT_MINIMUM_CONTRAST_RATIO, LUMINANCE_THRESHOLD, - type PaletteSuitabilityAnalysis, SUGGESTED_COLORS, type SurfaceGrayAnalysis, } from "../utils/color.js"; @@ -304,176 +302,3 @@ export function generateWarningComments( function capitalize(str: string): string { return str.charAt(0).toUpperCase() + str.slice(1); } - -// ============================================================================ -// Palette Shade Generation Suitability Analysis -// ============================================================================ - -/** - * Result of analyzing theme colors for palette shade generation suitability. - */ -export interface ThemeColorsSuitabilityResult { - /** Whether all colors are suitable for standard palette() generation */ - allSuitable: boolean; - /** Analysis for each color */ - colors: Record; - /** Colors that have suitability issues */ - problematicColors: Array<{ - name: string; - color: string; - luminance: number; - issue: "too-light" | "too-dark"; - description: string; - }>; -} - -/** - * Analyze theme colors for palette shade generation suitability. - * Checks if colors have extreme luminance that would produce poor - * automatic shade generation results with the palette() function. - * - * @param params - Theme colors to analyze - * @returns Analysis result with suitability status and any problematic colors - */ -export async function analyzeThemeColorsForPalette(params: { - primary: string; - secondary?: string; - surface?: string; -}): Promise { - const colors: Record = {}; - const problematicColors: ThemeColorsSuitabilityResult["problematicColors"] = - []; - - // Analyze primary (required) - colors.primary = await analyzeColorForPalette(params.primary); - if (!colors.primary.suitable) { - problematicColors.push({ - name: "primary", - color: params.primary, - luminance: colors.primary.luminance, - issue: colors.primary.issue, - description: colors.primary.description, - }); - } - - // Analyze secondary (optional) - if (params.secondary) { - colors.secondary = await analyzeColorForPalette(params.secondary); - if (!colors.secondary.suitable) { - problematicColors.push({ - name: "secondary", - color: params.secondary, - luminance: colors.secondary.luminance, - issue: colors.secondary.issue, - description: colors.secondary.description, - }); - } - } - - // Analyze surface (optional) - if (params.surface) { - colors.surface = await analyzeColorForPalette(params.surface); - if (!colors.surface.suitable) { - problematicColors.push({ - name: "surface", - color: params.surface, - luminance: colors.surface.luminance, - issue: colors.surface.issue, - description: colors.surface.description, - }); - } - } - - return { - allSuitable: problematicColors.length === 0, - colors, - problematicColors, - }; -} - -/** - * Format palette suitability warnings as markdown table. - * - * @param result - Suitability analysis result - * @returns Formatted markdown string with warnings table and recommendations - */ -export function formatPaletteSuitabilityWarnings( - result: ThemeColorsSuitabilityResult, -): string { - if (result.allSuitable) { - return ""; - } - - const lines: string[] = []; - - lines.push("**Color Luminance Warnings:**"); - lines.push(""); - lines.push( - "The following colors have extreme luminance values that may produce suboptimal shade generation:", - ); - lines.push(""); - lines.push("| Color | Value | Luminance | Issue |"); - lines.push("|-------|-------|-----------|-------|"); - - for (const pc of result.problematicColors) { - const issueText = - pc.issue === "too-light" - ? "Too light - darker shades (600-900) will appear washed out" - : "Too dark - lighter shades (50-200) will lack contrast range"; - lines.push( - `| ${pc.name} | \`${pc.color}\` | ${pc.luminance.toFixed(2)} | ${issueText} |`, - ); - } - - lines.push(""); - lines.push( - "**Recommendation:** For production-quality results, use the `create_custom_palette` tool from the Ignite UI Theming MCP with explicit " + - "shade values for these colors. This gives you fine-grained control over each shade level (50-900, A100-A700).", - ); - lines.push(""); - lines.push( - "The generated code below uses the standard `palette()` function, which may produce " + - "limited shade ranges for the flagged colors.", - ); - - return lines.join("\n"); -} - -/** - * Generate Sass block comment for palette suitability warnings. - * This comment is inserted into the generated Sass code to warn developers. - * - * @param result - Suitability analysis result - * @returns Array of Sass comment lines - */ -export function generatePaletteSuitabilityComments( - result: ThemeColorsSuitabilityResult, -): string[] { - if (result.allSuitable) { - return []; - } - - const lines: string[] = []; - lines.push("/*"); - lines.push(" * ⚠️ PALETTE SUITABILITY WARNINGS"); - lines.push( - " * The following colors have extreme luminance that may produce suboptimal shade generation:", - ); - - for (const pc of result.problematicColors) { - const issueText = - pc.issue === "too-light" - ? "too light - darker shades may be washed out" - : "too dark - lighter shades may lack range"; - lines.push( - ` * - ${pc.name} (${pc.color}): luminance ${pc.luminance.toFixed(2)} - ${issueText}`, - ); - } - - lines.push( - " * Consider using the create_custom_palette tool of the Ignite UI Theming MCP server with explicit shade values for better results.", - ); - lines.push(" */"); - - return lines; -} diff --git a/packages/preview/index.html b/packages/preview/index.html new file mode 100644 index 00000000..4ae39dd4 --- /dev/null +++ b/packages/preview/index.html @@ -0,0 +1,66 @@ + + + + + + Shade generators + + + +
+

Shade Generators

+

+ Every scope on this page emits a real palette through the palette() mixin. + Swatch fills come from --ig-{family}-{shade} and every label color from + --ig-{family}-{shade}-contrast, so what you see is what a consumer receives. + Pairs are stacked with the same shade in the same column: legacy on top, + fitted below. +

+ +
+ +

Color ramps

+

+ The guarantee: any two shades 500 apart clear WCAG AA. It holds by construction under + fitted, and by accident — or not at all — under legacy. +

+

+ The number under each shade is its WCAG contrast against white. Hover a swatch for + its token name and resolved value. +

+ + +

Surface

+

+ Surface stopped being a ramp. It is a background plus named layers, and the mock on the + left is built entirely from them, text included. +

+

+ Contrast here is measured against the page, not against white — 1.0:1 means + the shade is the page. +

+ + +

Grayscale

+

+ Anchored to the background, so shade 50 always sits nearest it — in either theme. + The default material scale reproduces the original grayscale to within about + one JND. +

+

Contrast here is measured against the page.

+ + +

Scale flavors

+

+ The same generator with a different rhythm. Each curve was fitted to the published scale + it names; pass one with $scales: ('gray': 'carbon'). +

+ + +
+ Generated by packages/preview. The palettes bundled with the library stay on + the legacy generator, so shipped themes are unchanged. +
+
+ + diff --git a/packages/preview/package.json b/packages/preview/package.json new file mode 100644 index 00000000..7713c101 --- /dev/null +++ b/packages/preview/package.json @@ -0,0 +1,18 @@ +{ + "name": "@igniteui-theming/preview", + "private": true, + "version": "0.0.0", + "description": "Visual comparison of the shade generators.", + "type": "module", + "scripts": { + "dev": "vite", + "build": "vite build", + "preview": "vite preview", + "lint": "stylelint ./src/**/*.scss" + }, + "devDependencies": { + "sass-embedded": "~1.92.1", + "stylelint": "^17.5.0", + "stylelint-config-standard-scss": "^17.0.0" + } +} diff --git a/packages/preview/src/color.spec.ts b/packages/preview/src/color.spec.ts new file mode 100644 index 00000000..04b18868 --- /dev/null +++ b/packages/preview/src/color.spec.ts @@ -0,0 +1,62 @@ +import { describe, expect, it } from "vitest"; +import { composite, contrast, hex, parse } from "./color.js"; + +describe("parse", () => { + it("reads the literals Sass emits", () => { + expect(parse("#0099ff")).toEqual([0, 153, 255, 1]); + expect(parse("#fff")).toEqual([255, 255, 255, 1]); + expect(parse("rgb(226, 237, 251)")).toEqual([226, 237, 251, 1]); + expect(parse("rgba(255, 255, 255, 0.03)")).toEqual([255, 255, 255, 0.03]); + expect(parse("hsl(0, 0%, 98%)")).toEqual([250, 250, 250, 1]); + }); + + it("clips out-of-range saturation at the channel, not at the input", () => { + // The legacy generator emits calc(s * 1.26) against a fully saturated seed. A browser + // computes with s = 126% and clips the resulting channels; clamping s to 100% first + // would yield rgb(0, 136, 227) and overstate the contrast. + expect(parse("hsl(204, 126%, 44.5%)")).toEqual([0, 142, 255, 1]); + }); + + it("resolves lightness above 100% to white, the way color(srgb 1.78 ...) paints", () => { + expect(parse("hsl(0, 0%, 174%)")).toEqual([255, 255, 255, 1]); + }); + + it("rejects anything it cannot resolve", () => { + expect(() => parse("var(--ig-primary-500)")).toThrow(/unsupported/); + }); +}); + +describe("composite", () => { + it("flattens a translucent color onto its background", () => { + expect(composite([255, 255, 255, 0.03], [26, 26, 36, 1])).toEqual([ + 33, 33, 43, + ]); + }); + + it("leaves an opaque color alone", () => { + expect(composite([12, 34, 56, 1], [255, 255, 255, 1])).toEqual([ + 12, 34, 56, + ]); + }); +}); + +describe("contrast", () => { + it("matches the WCAG reference ratios", () => { + expect(contrast([0, 0, 0], [255, 255, 255])).toBeCloseTo(21, 5); + expect(contrast([255, 255, 255], [255, 255, 255])).toBeCloseTo(1, 5); + expect(contrast([0, 153, 255], [255, 255, 255])).toBeCloseTo(3.0, 2); + }); + + it("is symmetric", () => { + expect(contrast([12, 34, 56], [200, 210, 220])).toBeCloseTo( + contrast([200, 210, 220], [12, 34, 56]), + 10, + ); + }); +}); + +describe("hex", () => { + it("pads single-digit channels", () => { + expect(hex([0, 9, 255])).toBe("#0009ff"); + }); +}); diff --git a/packages/preview/src/color.ts b/packages/preview/src/color.ts new file mode 100644 index 00000000..869ead3a --- /dev/null +++ b/packages/preview/src/color.ts @@ -0,0 +1,79 @@ +/** Color math shared by the build. Pure functions over sRGB tuples. */ + +export type Rgb = [number, number, number]; +export type Rgba = [number, number, number, number]; + +const clamp = (v: number) => Math.min(255, Math.max(0, v)); + +const alpha = (value: string | undefined) => + value === undefined ? 1 : Number(value); + +/** + * CSS Color 4 hsl-to-rgb. Saturation and lightness are used as given, including the + * out-of-range values the legacy generator produces (`calc(s * 1.26)`), so the channels + * can land outside sRGB and get clipped exactly where a browser clips them. + */ +const hslToRgb = (h: number, s: number, l: number): Rgb => { + const k = (n: number) => (((n + h / 30) % 12) + 12) % 12; + const a = s * Math.min(l, 1 - l); + const f = (n: number) => + l - a * Math.max(-1, Math.min(k(n) - 3, 9 - k(n), 1)); + + return [f(0), f(8), f(4)].map((v) => Math.round(clamp(v * 255))) as Rgb; +}; + +/** Resolves a Sass-emitted color literal to clipped sRGB. */ +export const parse = (value: string): Rgba => { + const hsl = value.match( + /^hsla?\(\s*([-\d.]+)[,\s]+([\d.]+)%[,\s]+([\d.]+)%\s*(?:[,/]\s*([\d.]+))?/, + ); + + if (hsl) { + const [h, s, l] = hsl.slice(1, 4).map(Number); + return [...hslToRgb(h, s / 100, l / 100), alpha(hsl[4])]; + } + + const rgb = value.match( + /^rgba?\(\s*([-\d.]+)[,\s]+([-\d.]+)[,\s]+([-\d.]+)\s*(?:[,/]\s*([\d.]+))?/, + ); + + if (rgb) { + const [r, g, b] = rgb.slice(1, 4).map(Number); + return [clamp(r), clamp(g), clamp(b), alpha(rgb[4])]; + } + + const hex = value.trim().match(/^#([0-9a-f]{3,8})$/i); + + if (hex) { + const d = + hex[1].length < 6 ? [...hex[1]].map((c) => c + c).join("") : hex[1]; + const n = [0, 2, 4, 6].map((i) => + Number.parseInt(d.slice(i, i + 2) || "ff", 16), + ); + return [n[0], n[1], n[2], n[3] / 255]; + } + + throw new Error(`unsupported color literal: ${value}`); +}; + +/** Flattens a translucent color onto the background it is painted over. */ +export const composite = ([r, g, b, a]: Rgba, over: Rgba): Rgb => + [r, g, b].map((c, i) => Math.round(a * c + (1 - a) * over[i])) as Rgb; + +const channel = (v: number) => { + const s = v / 255; + return s <= 0.03928 ? s / 12.92 : ((s + 0.055) / 1.055) ** 2.4; +}; + +export const luminance = ([r, g, b]: Rgb) => + 0.2126 * channel(r) + 0.7152 * channel(g) + 0.0722 * channel(b); + +/** WCAG 2.x contrast ratio. */ +export const contrast = (a: Rgb, b: Rgb) => { + const x = luminance(a) + 0.05; + const y = luminance(b) + 0.05; + return Math.max(x, y) / Math.min(x, y); +}; + +export const hex = ([r, g, b]: Rgb) => + `#${[r, g, b].map((v) => v.toString(16).padStart(2, "0")).join("")}`; diff --git a/packages/preview/src/html.ts b/packages/preview/src/html.ts new file mode 100644 index 00000000..f6c4a2b2 --- /dev/null +++ b/packages/preview/src/html.ts @@ -0,0 +1,35 @@ +/** Minimal escaping template tag. Arrays join, `raw()` opts a value out of escaping. */ +const ESCAPES: Record = { + "&": "&", + "<": "<", + ">": ">", + '"': """, + "'": "'", +}; + +const marker = Symbol("raw"); + +export interface Raw { + [marker]: string; +} + +export const raw = (value: string): Raw => ({ [marker]: value }); + +const escapeHtml = (value: string) => + value.replace(/[&<>"']/g, (c) => ESCAPES[c]); + +const stringifyValue = (value: unknown): string => { + if (value == null || value === false) return ""; + if (Array.isArray(value)) return value.map(stringifyValue).join(""); + if (typeof value === "object" && marker in value) + return (value as Raw)[marker]; + return escapeHtml(String(value)); +}; + +export const html = ( + strings: TemplateStringsArray, + ...values: unknown[] +): Raw => + raw(strings.reduce((out, s, i) => out + stringifyValue(values[i - 1]) + s)); + +export const stringify = (value: Raw) => value[marker]; diff --git a/packages/preview/src/model.ts b/packages/preview/src/model.ts new file mode 100644 index 00000000..5270cc1f --- /dev/null +++ b/packages/preview/src/model.ts @@ -0,0 +1,319 @@ +/** Turns compiled palettes into the view model the page renders. */ +import { composite, contrast, hex, parse, type Rgb } from "./color.js"; +import { + ACCENTS, + type Generator, + paletteExpr, + type Resolved, + ROLES, + resolve, + SCALES, + type Scope, + SEEDS, + SHADES, + SURFACES, + seedLandsOn, + stylesheet, +} from "./palettes.js"; + +const AA = 4.5; +/** Below this the shade is indistinguishable from the surface it sits on. */ +const SAME = 1.005; + +export interface Swatch { + key: string; + token: string; + rgb: Rgb; + ratio: number; + hex: string; + against: string; +} + +export interface Row { + cls: string; + label: string; + swatches: Swatch[]; + verdict: string; + ok: boolean; +} + +export interface Role { + key: string; + away: number; + collapsed: boolean; +} + +export interface Ramp { + label: string; + seed: string; + lands: string; + shades: Row[]; + accents: Row[]; +} + +export interface Neutral { + label: string; + bg: string; + fittedCls: string; + legacySurface: Row; + roles: Role[]; + grays: Row[]; +} + +export interface Score { + legacyAA: number; + fittedAA: number; + legacyDup: number; + fittedDup: number; + pairs: number; +} + +export interface Model { + css: string; + ramps: Ramp[]; + neutrals: Neutral[]; + flavors: { name: string; row: Row }[]; + score: Score; +} + +const swatch = ( + family: string, + key: string, + literal: string, + against: Rgb, + label: string, +): Swatch => { + const color = composite(parse(literal), [...against, 1]); + return { + key, + token: `--ig-${family}-${key}`, + rgb: color, + ratio: contrast(color, against), + hex: hex(color), + against: label, + }; +}; + +const rgbOf = (swatches: Swatch[]) => swatches.map((s) => s.hex); + +/** Any two shades five apart must clear AA — the guarantee the fitted generator makes. */ +const failures = (swatches: Swatch[]) => { + let fails = 0; + + for (let i = 0; i + 5 < swatches.length; i++) { + if (contrast(swatches[i].rgb, swatches[i + 5].rgb) < AA) fails++; + } + + return fails; +}; + +interface RowSpec { + /** Scope class the palette was compiled under, and the row's caption. */ + cls: string; + label: string; + /** Which family, which of its keys, and the resolved literals to read them from. */ + family: string; + keys: string[]; + resolved: Resolved; + /** What the swatches are measured against, and how to name it. */ + against: Rgb; + againstLabel: string; + /** Whether to score the "500 apart clears AA" guarantee, which only ramps make. */ + scored?: boolean; +} + +const row = ({ + cls, + label, + family, + keys, + resolved, + against, + againstLabel, + scored = false, +}: RowSpec): Row => { + const swatches = keys.map((k) => + swatch(family, k, resolved[`${family}-${k}`], against, againstLabel), + ); + const dup = swatches.length - new Set(rgbOf(swatches)).size; + const fails = scored ? failures(swatches) : 0; + const bits: string[] = []; + + if (scored) + bits.push(fails ? `${fails}/5 AA pairs fail` : "all 5 AA pairs pass"); + if (dup) bits.push(`${dup} duplicate${dup > 1 ? "s" : ""}`); + + return { + cls, + label, + swatches, + verdict: bits.join(" · "), + ok: !fails && !dup, + }; +}; + +export const build = (): Model => { + const scopes: Scope[] = []; + const push = ( + cls: string, + families: string[], + keys: string[], + seed: string, + surface: string, + generator: Generator, + extra = "", + ) => { + scopes.push({ + cls, + families, + keys, + expr: paletteExpr(seed, surface, generator, extra), + }); + return cls; + }; + + const rampScopes = SEEDS.map(([, seed], i) => ({ + seed, + legacy: push( + `r${i}l`, + ["primary"], + [...SHADES, ...ACCENTS], + seed, + "#fff", + "legacy", + ), + fitted: push( + `r${i}f`, + ["primary"], + [...SHADES, ...ACCENTS], + seed, + "#fff", + "fitted", + ), + })); + + const neutralScopes = SURFACES.map(([, bg], i) => ({ + bg, + legacy: push(`n${i}l`, ["gray", "surface"], SHADES, "#09f", bg, "legacy"), + fitted: push(`n${i}f`, ["gray"], SHADES, "#09f", bg, "fitted"), + roles: push(`n${i}r`, ["surface"], ROLES, "#09f", bg, "fitted"), + })); + + const flavorScopes = SCALES.map((name) => ({ + name, + cls: push( + `sc-${name}`, + ["gray"], + SHADES, + "#09f", + "#fff", + "fitted", + `, $scales: ('gray': '${name}')`, + ), + })); + + const css = stylesheet(scopes); + const values = resolve(scopes); + const at = (cls: string) => values.get(cls) as Resolved; + const lands = seedLandsOn(SEEDS.map(([, seed]) => seed)); + const white = parse("#ffffff").slice(0, 3) as Rgb; + const score: Score = { + legacyAA: 0, + fittedAA: 0, + legacyDup: 0, + fittedDup: 0, + pairs: 0, + }; + + const ramps = SEEDS.map(([label, seed], i) => { + const { legacy, fitted } = rampScopes[i]; + const ramp = ( + cls: string, + label: string, + keys: string[], + scored: boolean, + ) => + row({ + cls, + label, + family: "primary", + keys, + resolved: at(cls), + against: white, + againstLabel: "white", + scored, + }); + const shades = [ + ramp(legacy, "legacy", SHADES, true), + ramp(fitted, "fitted", SHADES, true), + ]; + + score.pairs += 5; + score.legacyAA += failures(shades[0].swatches); + score.fittedAA += failures(shades[1].swatches); + score.legacyDup += + shades[0].swatches.length - new Set(rgbOf(shades[0].swatches)).size; + score.fittedDup += + shades[1].swatches.length - new Set(rgbOf(shades[1].swatches)).size; + + return { + label, + seed, + lands: lands[i], + shades, + accents: [ + ramp(legacy, "legacy accent", ACCENTS, false), + ramp(fitted, "fitted accent", ACCENTS, false), + ], + }; + }); + + const neutrals = SURFACES.map(([label, bg], i) => { + const { legacy, fitted, roles } = neutralScopes[i]; + const page = parse(bg).slice(0, 3) as Rgb; + const onPage = (cls: string, label: string, family: string) => + row({ + cls, + label, + family, + keys: SHADES, + resolved: at(cls), + against: page, + againstLabel: `the page ${bg}`, + scored: true, + }); + + return { + label, + bg, + fittedCls: roles, + legacySurface: onPage(legacy, "legacy", "surface"), + roles: ROLES.map((key) => { + const away = contrast( + composite(parse(at(roles)[`surface-${key}`]), [...page, 1]), + page, + ); + return { key, away, collapsed: away < SAME }; + }), + grays: [ + onPage(legacy, "legacy", "gray"), + onPage(fitted, "fitted", "gray"), + ], + }; + }); + + const flavors = flavorScopes.map(({ name, cls }) => ({ + name, + row: row({ + cls, + label: name, + family: "gray", + keys: SHADES, + resolved: at(cls), + against: white, + againstLabel: "white", + }), + })); + + return { css, ramps, neutrals, flavors, score }; +}; diff --git a/packages/preview/src/palettes.ts b/packages/preview/src/palettes.ts new file mode 100644 index 00000000..cb592b37 --- /dev/null +++ b/packages/preview/src/palettes.ts @@ -0,0 +1,140 @@ +/** + * Compiles every palette the page needs in two passes: one emits the `--ig-*` custom + * properties the page renders from, the other reports the resolved literal behind each + * token so the build can measure contrast without a browser. + */ +import { fileURLToPath } from "node:url"; +import * as sass from "sass-embedded"; + +const LOAD_PATH = fileURLToPath(new URL("../../theming", import.meta.url)); + +export const SHADES = [ + "50", + "100", + "200", + "300", + "400", + "500", + "600", + "700", + "800", + "900", +]; +export const ACCENTS = ["A100", "A200", "A400", "A700"]; +export const ROLES = ["base", "sunken", "raised", "overlay", "container"]; +export const SCALES = ["even", "material", "tailwind", "carbon"]; + +export const SEEDS: [string, string][] = [ + ["Framework primary", "#0099ff"], + ["Framework secondary", "#df1b74"], + ["Warn", "#faa419"], + ["Success", "#4eb862"], + ["Near-white seed", "#ffe9b0"], + ["Near-black seed", "#141225"], + ["Neon", "#00ff00"], + ["Washed out", "#a99bb0"], + ["Pure gray", "#8a8a8a"], +]; + +export const SURFACES: [string, string][] = [ + ["Pure white", "#ffffff"], + ["Off-white", "#f8f8fa"], + ["Dark", "#1a1a24"], + ["Pure black", "#000000"], +]; + +export type Generator = "legacy" | "fitted"; + +export interface Scope { + cls: string; + families: string[]; + keys: string[]; + expr: string; +} + +/** Resolved literals for one scope, keyed `family.shade`. */ +export type Resolved = Record; + +const compile = (source: string) => + sass.compileString(source, { + loadPaths: [LOAD_PATH], + logger: { + warn(message, options) { + // The preview exists to catch generator problems, so a warning from the very + // code under test is a result, not noise. + const where = options.span ? ` (${options.span.text})` : ""; + + console.warn(`sass: ${message}${where}`); + }, + }, + }).css; + +export const paletteExpr = ( + seed: string, + surface: string, + generator: Generator, + extra = "", +) => + `palette($primary: ${seed}, $secondary: ${seed}, $surface: ${surface}, $gray: #333` + + `${generator === "legacy" ? ", $generator: 'legacy'" : ""}${extra})`; + +/** The `--ig-*` declarations the page paints with. */ +export const stylesheet = (scopes: Scope[]) => + compile( + `@use 'sass:map';\n@use 'sass/color' as *;\n${scopes + .map( + (s) => + `.${s.cls} { $p: ${s.expr}; @include palette((` + + `${s.families.map((f) => `'${f}': map.get($p, '${f}')`).join(", ")})); }`, + ) + .join("\n")}`, + ); + +/** + * The literal behind every token. `-raw` is the color Sass computed before it was + * written out as a custom property, so it matches what the browser resolves. + */ +export const resolve = (scopes: Scope[]): Map => { + const css = compile( + `@use 'sass:map';\n@use 'sass/color' as *;\n${scopes + .map((s, i) => { + const rows = s.families.flatMap((f) => + s.keys.map( + (k) => + ` ${f}-${k}: '#{map.get(map.get($p, '${f}'), '${k}-raw')}';`, + ), + ); + return `s${i} { $p: ${s.expr};\n${rows.join("\n")}\n}`; + }) + .join("\n")}`, + ); + + const blocks = [...css.matchAll(/s(\d+)\s*\{([^}]*)\}/g)]; + + return new Map( + blocks.map(([, index, body]) => { + const entries = [...body.matchAll(/([\w-]+):\s*"([^"]+)"/g)].map( + ([, token, value]) => [token, value] as const, + ); + return [scopes[Number(index)].cls, Object.fromEntries(entries)]; + }), + ); +}; + +export const seedLandsOn = (seeds: string[]) => { + const css = compile( + `@use 'sass/color' as *;\nout {\n${seeds + .map( + (seed, i) => + ` s${i}: seed-lands-on(${paletteExpr(seed, "#fff", "fitted")}, 'primary');`, + ) + .join("\n")}\n}`, + ); + + return seeds.map( + (_, i) => + css + .match(new RegExp(`s${i}:\\s*"?([^";]+)"?;`))?.[1] + ?.replace(/"/g, "") ?? "", + ); +}; diff --git a/packages/preview/src/plugin.ts b/packages/preview/src/plugin.ts new file mode 100644 index 00000000..de1cecee --- /dev/null +++ b/packages/preview/src/plugin.ts @@ -0,0 +1,64 @@ +import type { OutputAsset } from "rolldown"; +import type { Plugin } from "vite"; +import { stringify } from "./html.js"; +import { build } from "./model.js"; +import { sections } from "./render.js"; + +/** + * Compiles the palettes and fills the placeholders in index.html. The generated + * `--ig-*` declarations are injected as a stylesheet so the page paints from the same + * custom properties a consumer receives. + */ +export const previewData = (): Plugin => ({ + name: "preview-data", + transformIndexHtml: { + order: "pre", + handler(template) { + const model = build(); + const parts = sections(model); + + const filled = template.replace( + //g, + (match, key: string) => (key in parts ? stringify(parts[key]) : match), + ); + + return { + html: filled, + tags: [{ tag: "style", children: model.css, injectTo: "head-prepend" }], + }; + }, + }, +}); + +/** + * Folds the emitted stylesheet back into the HTML so the build is a single file that + * opens from disk. A linked asset carries `crossorigin`, which a browser refuses to + * fetch over `file://`, and this page is meant to be opened and passed around. + */ +export const singleFile = (): Plugin => ({ + name: "preview-single-file", + enforce: "post", + generateBundle(_options, bundle) { + const css = Object.values(bundle).filter( + (chunk): chunk is OutputAsset => + chunk.type === "asset" && chunk.fileName.endsWith(".css"), + ); + + for (const page of Object.values(bundle)) { + if (page.type !== "asset" || !page.fileName.endsWith(".html")) continue; + + page.source = css.reduce( + (html, asset) => + html.replace( + new RegExp( + `]+href="[^"]*${asset.fileName.replace(/[.*+?^$()|[\]\\]/g, "\\$&")}"[^>]*>`, + ), + ``, + ), + String(page.source), + ); + } + + for (const asset of css) delete bundle[asset.fileName]; + }, +}); diff --git a/packages/preview/src/render.ts b/packages/preview/src/render.ts new file mode 100644 index 00000000..90579a41 --- /dev/null +++ b/packages/preview/src/render.ts @@ -0,0 +1,114 @@ +/** Markup for the parts of the page that repeat over data. The chrome lives in index.html. */ +import { html, type Raw, raw } from "./html.js"; +import type { + Model, + Neutral, + Ramp, + Role, + Row, + Score, + Swatch, +} from "./model.js"; +import { ROLES } from "./palettes.js"; + +const ratio = (value: number) => `${value.toFixed(1)}:1`; + +const swatch = (s: Swatch) => html` + + ${s.key}${ratio(s.ratio)} + `; + +const strip = (row: Row) => html` +
+ ${row.label} +
${row.swatches.map(swatch)}
+ ${row.verdict} +
`; + +const rampBlock = (r: Ramp) => html` +
+
+ +

${r.label}

${r.seed} + seed sits at ${r.lands}’s lightness +
+
${r.shades.map(strip)}
+
${r.accents.map(strip)}
+
`; + +const mock = (n: Neutral) => html` +
+
+
sunken — a well
+
+ raiseda card that sits on the page +
+
+
overlaya menu above everything
+
`; + +const role = (n: Neutral, r: Role) => html` +
+ +
${r.key}${r.collapsed ? "on the background" : `${r.away.toFixed(2)}:1 away`}
+
`; + +const surfaceBlock = (n: Neutral) => html` +
+

${n.label}

${n.bg}
+
+ ${mock(n)} +
+
${strip(n.legacySurface)}
+

Ten numbered shades, no role names. On a page at either extreme most of them + collapse onto the background — the generator has nowhere left to go.

+
${ROLES.map((k) => role(n, n.roles.find((r) => r.key === k) as Role))}
+

Five roles that say what they are for. A role with no room resolves onto the + background on purpose, and the shadow carries the elevation instead.

+
+
+
`; + +const grayBlock = (n: Neutral) => html` +
+

${n.label}

${n.bg}
+
${n.grays.map(strip)}
+
`; + +const tile = ( + key: string, + now: string | number, + before: string | number, + note: string, +) => html` +
${key}${now} was ${before}${note}
`; + +const scoreboard = (s: Score) => [ + tile( + "AA pairs that fail", + s.fittedAA, + `${s.legacyAA} of ${s.pairs}`, + "Across every seed on this page. Five shades apart, both directions.", + ), + tile( + "Duplicate shades", + s.fittedDup, + s.legacyDup, + "Two tokens resolving to the same color, so a border vanishes into its fill.", + ), + tile( + "Surface roles", + ROLES.length, + "none", + "Named layers instead of ten numbers, nine of which no component referenced.", + ), +]; + +export const sections = (m: Model): Record => ({ + score: html`${scoreboard(m.score)}`, + ramps: html`${m.ramps.map(rampBlock)}`, + surfaces: html`${m.neutrals.map(surfaceBlock)}`, + grays: html`${m.neutrals.map(grayBlock)}`, + flavors: html`
${m.flavors.map((f) => strip(f.row))}
`, +}); diff --git a/packages/preview/src/styles.scss b/packages/preview/src/styles.scss new file mode 100644 index 00000000..06a574d8 --- /dev/null +++ b/packages/preview/src/styles.scss @@ -0,0 +1,373 @@ +:root { + color-scheme: light dark; + + --bg: #fbfbfc; + --fg: #16141f; + --mut: #6b6579; + --line: #e4e1ea; + --card: #fff; + --ok: #1f7a3d; + --bad: #c11a5e; +} + +@media (prefers-color-scheme: dark) { + :root { + --bg: #111019; + --fg: #eae7f2; + --mut: #948da8; + --line: #2c2940; + --card: #191823; + --ok: #69c97b; + --bad: #ff8cb0; + } +} + +* { + box-sizing: border-box; +} + +body { + margin: 0; + padding: 0 24px 90px; + background: var(--bg); + color: var(--fg); + font: 15px/1.55 ui-sans-serif, system-ui, sans-serif; +} + +.wrap { + max-width: 1200px; + margin: 0 auto; +} + +h1 { + margin: 46px 0 8px; + font-size: 2rem; + letter-spacing: -0.02em; +} + +h2 { + margin: 52px 0 4px; + font-size: 1.15rem; + letter-spacing: -0.01em; +} + +h3 { + margin: 0; + font-size: 0.95rem; +} + +.sub { + margin: 0 0 8px; + color: var(--mut); +} + +code { + font: 12px ui-monospace, monospace; + color: var(--mut); +} + +.score { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); + gap: 14px; + margin: 26px 0 8px; +} + +.tile { + padding: 15px 17px; + border: 1px solid var(--line); + border-radius: 10px; + background: var(--card); + + em { + display: block; + margin-bottom: 9px; + font: 600 10.5px/1 ui-monospace, monospace; + font-style: normal; + letter-spacing: 0.1em; + text-transform: uppercase; + color: var(--mut); + } + + b { + font-size: 1.5rem; + font-weight: 600; + letter-spacing: -0.02em; + } + + s { + color: var(--bad); + font-size: 1.05rem; + font-weight: 600; + text-decoration: none; + } + + span { + display: block; + margin-top: 5px; + color: var(--mut); + font-size: 12.5px; + } +} + +article { + margin-top: 22px; + padding-top: 18px; + border-top: 1px solid var(--line); +} + +header { + display: flex; + align-items: center; + flex-wrap: wrap; + gap: 9px; + margin-bottom: 11px; +} + +.dot { + flex: none; + width: 20px; + height: 20px; + border: 1px solid var(--line); + border-radius: 5px; +} + +.meta { + margin-left: auto; + font: 12px ui-monospace, monospace; + color: var(--mut); +} + +.stack { + display: flex; + flex-direction: column; + gap: 2px; + + & + & { + margin-top: 12px; + } +} + +.row { + display: grid; + grid-template-columns: 52px 1fr 150px; + align-items: center; + gap: 10px; +} + +.who { + font: 600 10.5px/1 ui-monospace, monospace; + letter-spacing: 0.06em; + text-transform: uppercase; + text-align: right; + color: var(--mut); +} + +.strip { + display: flex; + border: 1px solid var(--line); + border-radius: 5px; + overflow: hidden; + + i { + display: flex; + flex: 1; + flex-direction: column; + align-items: center; + justify-content: center; + gap: 1px; + height: 46px; + font-style: normal; + cursor: help; + } + + b { + font: 600 10.5px/1 ui-monospace, monospace; + } + + em { + font: 9.5px/1 ui-monospace, monospace; + font-style: normal; + letter-spacing: -0.02em; + opacity: 0.72; + } +} + +.verdict { + font: 11.5px/1.3 ui-sans-serif, system-ui, sans-serif; + + &.ok { + color: var(--ok); + } + + &.bad { + color: var(--bad); + } +} + +.two { + display: grid; + grid-template-columns: minmax(280px, 340px) 1fr; + align-items: start; + gap: 22px; + + @media (width <= 820px) { + grid-template-columns: 1fr; + } +} + +.mock { + display: flex; + flex-direction: column; + gap: 11px; + padding: 14px; + border: 1px solid var(--line); + border-radius: 10px; + background: var(--ig-surface-base); + color: var(--ig-surface-base-contrast); +} + +.mock-bar { + display: flex; + align-items: center; + gap: 8px; + height: 22px; + + > span:first-child { + width: 74px; + height: 7px; + border-radius: 4px; + background: currentcolor; + opacity: 0.5; + } +} + +.pill { + width: 56px; + height: 20px; + margin-left: auto; + border-radius: 100px; + background: var(--ig-surface-container); +} + +.well { + padding: 9px 11px; + border-radius: 7px; + background: var(--ig-surface-sunken); + color: var(--ig-surface-sunken-contrast); + font: 11.5px ui-monospace, monospace; +} + +.card { + display: flex; + flex-direction: column; + gap: 5px; + padding: 12px 13px; + border-radius: 8px; + background: var(--ig-surface-raised); + color: var(--ig-surface-raised-contrast); + box-shadow: 0 1px 2px rgb(0 0 0 / 9%); +} + +.pop { + display: flex; + flex-direction: column; + gap: 4px; + margin-left: 22px; + padding: 12px 13px; + border-radius: 8px; + background: var(--ig-surface-overlay); + color: var(--ig-surface-overlay-contrast); + box-shadow: 0 8px 22px -6px rgb(0 0 0 / 35%), 0 2px 5px rgb(0 0 0 / 16%); +} + +.card strong, +.pop strong { + font-size: 12.5px; +} + +.card span, +.pop span { + font-size: 11.5px; + opacity: 0.72; +} + +.line { + height: 6px; + border-radius: 3px; + background: currentcolor; + opacity: 0.16; + + &.short { + width: 58%; + } +} + +.roles { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); + gap: 9px; + margin-top: 14px; +} + +.role { + display: flex; + align-items: center; + gap: 9px; + + > i { + display: grid; + flex: none; + place-items: center; + width: 42px; + height: 30px; + border: 1px solid var(--line); + border-radius: 5px; + + > b { + display: block; + width: 26px; + height: 16px; + border-radius: 3px; + } + } + + code { + display: block; + color: var(--fg); + } + + em { + display: block; + font: 10.5px ui-monospace, monospace; + font-style: normal; + color: var(--mut); + } +} + +.note { + margin: 10px 0 0; + color: var(--mut); + font-size: 12.5px; +} + +.legend { + margin: 0 0 6px; + padding: 7px 11px; + border-left: 2px solid var(--line); + color: var(--mut); + font-size: 12.5px; + + b { + color: var(--fg); + font-weight: 600; + } +} + +footer { + margin-top: 46px; + padding-top: 18px; + border-top: 1px solid var(--line); + color: var(--mut); + font-size: 13px; +} diff --git a/packages/preview/stylelint.config.mjs b/packages/preview/stylelint.config.mjs new file mode 100644 index 00000000..885c7060 --- /dev/null +++ b/packages/preview/stylelint.config.mjs @@ -0,0 +1,3 @@ +export default { + extends: ["stylelint-config-standard-scss"], +}; diff --git a/packages/preview/tsconfig.json b/packages/preview/tsconfig.json new file mode 100644 index 00000000..ecfa4a20 --- /dev/null +++ b/packages/preview/tsconfig.json @@ -0,0 +1,9 @@ +{ + "extends": "../../tsconfig.base.json", + "compilerOptions": { + "noEmit": true, + "declaration": false, + "lib": ["ES2022", "DOM"] + }, + "include": ["src/**/*.ts", "vite.config.ts"] +} diff --git a/packages/preview/vite.config.ts b/packages/preview/vite.config.ts new file mode 100644 index 00000000..8cbc0837 --- /dev/null +++ b/packages/preview/vite.config.ts @@ -0,0 +1,10 @@ +import { fileURLToPath } from "node:url"; +import { defineConfig } from "vite"; +import { previewData, singleFile } from "./src/plugin.js"; + +export default defineConfig({ + root: fileURLToPath(new URL(".", import.meta.url)), + plugins: [previewData(), singleFile()], + base: "./", + build: { outDir: "dist", emptyOutDir: true }, +}); diff --git a/packages/preview/vitest.config.ts b/packages/preview/vitest.config.ts new file mode 100644 index 00000000..90824d85 --- /dev/null +++ b/packages/preview/vitest.config.ts @@ -0,0 +1,10 @@ +import { defineConfig } from "vitest/config"; + +export default defineConfig({ + test: { + name: "preview", + include: ["src/**/*.spec.ts"], + environment: "node", + testTimeout: 20000, + }, +}); diff --git a/packages/theming/.scripts/previewShades.mjs b/packages/theming/.scripts/previewShades.mjs deleted file mode 100644 index a9c31097..00000000 --- a/packages/theming/.scripts/previewShades.mjs +++ /dev/null @@ -1,274 +0,0 @@ -/** - * Renders a side-by-side comparison of the two shade generators as a standalone HTML - * page. Every value in it comes from compiling the library, not from a fixture. - * - * node .scripts/previewShades.mjs [--out=dist/shades.html] [--seeds=#09f,#f0f] - */ -import { mkdirSync } from "node:fs"; -import { writeFile } from "node:fs/promises"; -import path from "node:path"; -import { fileURLToPath } from "node:url"; -import * as sass from "sass"; -import getArgs from "./getArgs.mjs"; - -const __dirname = path.dirname(fileURLToPath(import.meta.url)); -const ROOT = path.resolve(__dirname, ".."); - -const DEFAULT_SEEDS = [ - ["Framework primary", "#0099ff"], - ["Framework secondary", "#df1b74"], - ["Warn", "#faa419"], - ["Success", "#4eb862"], - ["Near-white seed", "#ffe9b0"], - ["Near-black seed", "#141225"], - ["Neon", "#00ff00"], - ["Washed out", "#a99bb0"], - ["Pure gray", "#8a8a8a"], -]; - -const SURFACES = [ - ["Pure white", "#ffffff"], - ["Off-white", "#f8f8fa"], - ["Dark", "#1a1a24"], - ["Pure black", "#000000"], -]; - -const LADDERS = ["even", "material", "tailwind", "carbon"]; - -const SHADES = [ - "50", - "100", - "200", - "300", - "400", - "500", - "600", - "700", - "800", - "900", -]; -const ACCENTS = ["A100", "A200", "A400", "A700"]; -const ALL = [...SHADES, ...ACCENTS]; - -const { out = "dist/shades.html", seeds } = getArgs(); -const list = seeds - ? seeds.split(",").map((s) => [s.trim(), s.trim()]) - : DEFAULT_SEEDS; - -const warnings = []; - -function compile(body) { - const css = sass.compileString( - `@use 'sass:map';\n@use 'sass/color' as *;\n${body}`, - { - loadPaths: [ROOT], - logger: { warn: (msg) => warnings.push(msg.split(" —")[0]) }, - }, - ).css; - const data = {}; - for (const line of css.split("\n")) { - const m = line.match(/^\s*([A-Za-z0-9-]+):\s*(.+);\s*$/); - if (m) data[m[1]] = m[2].trim(); - } - return data; -} - -const family = (seed, name, generator, surface = "#fff", keys = ALL) => { - const gen = generator ? `, $generator: '${generator}'` : ""; - return compile(` - $p: palette($primary: ${seed}, $secondary: ${seed}, $surface: ${surface}, $gray: #333${gen}); - $s: map.get($p, '${name}'); - out { - lands-on: ${generator ? "'n/a'" : `seed-lands-on($p, '${name}')`}; - ${keys.map((v) => `s-${v}: #{map.get($s, '${v}-raw')};`).join("\n")} - }`); -}; - -const rows = list.map(([label, seed]) => ({ - label, - seed, - fitted: family(seed, "primary", null), - legacy: family(seed, "primary", "legacy"), -})); - -const flavors = LADDERS.map((name) => ({ - name, - gray: compile(` - $p: palette($primary: #09f, $secondary: #09f, $surface: #fff, $gray: #333, $ladders: ('gray': '${name}')); - $s: map.get($p, 'gray'); - out { ${SHADES.map((v) => `s-${v}: #{map.get($s, '${v}-raw')};`).join("\n")} }`), -})); - -const neutrals = SURFACES.map(([label, bg]) => ({ - label, - bg, - gray: family("#09f", "gray", null, bg, SHADES), - grayLegacy: family("#09f", "gray", "legacy", bg, SHADES), - surface: family("#09f", "surface", null, bg, SHADES), - surfaceLegacy: family("#09f", "surface", "legacy", bg, SHADES), -})); - -const sw = (hex, key) => - `
${key}
`; -const ramp = (data, keys, id) => - `
${keys.map((k) => sw(data[`s-${k}`], k)).join("")}
`; - -const pair = (title, a, keys, id, note = "") => ` -
-

${title}

- ${ramp(a, keys, id)} - ${note ? `

${note}

` : ""} -
`; - -const seedSection = (r) => ` -
-

${r.label}

${r.seed} - lands on ${(r.fitted["lands-on"] || "").replace(/["']/g, "")}
-
- ${pair("gamut-relative", r.fitted, SHADES, `f${r.seed}`)} - ${pair("legacy", r.legacy, SHADES, `l${r.seed}`)} -
-
-

accent track

${ramp(r.fitted, ACCENTS)}
-

legacy accents

${ramp(r.legacy, ACCENTS)}
-
-
`; - -const neutralSection = (n) => ` -
-

${n.label} surface

${n.bg}
-
- ${pair( - "gray · gamut-relative", - n.gray, - SHADES, - `g${n.bg}`, - "anchored to the surface, so 50 always sits nearest the background", - )} - ${pair("gray · legacy", n.grayLegacy, SHADES, `gl${n.bg}`)} -
-
- ${pair( - "surface · gamut-relative", - n.surface, - SHADES, - `s${n.bg}`, - "500 is the background; every other shade is a layer on it, 50 the faintest through 900 the strongest", - )} - ${pair("surface · legacy", n.surfaceLegacy, SHADES, `sl${n.bg}`)} -
-
`; - -const html = ` - -Shade generators -
-

Shade generators, side by side

-

Compiled from the library. Numbers are WCAG contrast against white for color ramps, -and against the surface for the neutral and surface families. Every value is a concrete color — -the generator resolves them at build time.

-${warnings.length ? `
Build warnings
${[...new Set(warnings)].join("
")}
` : ""} - -

Color ramps

-${rows.map(seedSection).join("")} - -

Ladder flavors

-

The same generator, a different rhythm. Each curve was fitted to the scale it is named -after; material reproduces this library's original grayscale, which is why it is the default -for gray. Pass one with $ladders: ('gray': 'carbon'), or hand in your own -cubic-bezier control points.

-
- ${flavors - .map( - (f) => ` -
-

${f.name}

- ${ramp(f.gray, SHADES, `ladder-${f.name}`)} -
`, - ) - .join("")} -
- -

Neutral and surface families

-${neutrals.map(neutralSection).join("")} - -
Generated by .scripts/previewShades.mjs. The palettes bundled with the library -stay on the legacy generator, so shipped themes are unchanged.
-
-`; - -const dest = path.resolve(ROOT, out); -mkdirSync(path.dirname(dest), { recursive: true }); -await writeFile(dest, html, "utf8"); -console.log( - `wrote ${path.relative(ROOT, dest)} (${rows.length} seeds, ${neutrals.length} surfaces)`, -); diff --git a/packages/theming/package.json b/packages/theming/package.json index 0691bed5..f8ac60b6 100644 --- a/packages/theming/package.json +++ b/packages/theming/package.json @@ -35,8 +35,7 @@ "prepack": "shx cp ../../README.md README.md && shx cp ../../LICENSE LICENSE", "postpack": "shx rm -f README.md LICENSE", "prepare": "node .scripts/setup-grammars.mjs", - "test": "vitest run", - "preview:shades": "node .scripts/previewShades.mjs --out=dist/shades.html" + "test": "vitest run" }, "lint-staged": { "*.{js,ts,cjs,mjs,jsx,tsx}": [ diff --git a/packages/theming/sass/color/_config.scss b/packages/theming/sass/color/_config.scss index e74d143f..efa0bd1f 100644 --- a/packages/theming/sass/color/_config.scss +++ b/packages/theming/sass/color/_config.scss @@ -3,187 +3,93 @@ /// @group Palettes //// -/// The shade generator used by `palette()` and `shades()` when none is passed explicitly. -/// -/// - `'gamut-relative'` — lightness is solved from a contrast target, chroma is a fraction -/// of what the sRGB gamut allows at that lightness and hue. Works for any seed color. -/// - `'legacy'` — the original fixed saturation/lightness multiplier tables. Kept for -/// backward compatibility; the palettes shipped with this library use it. -/// +/// Which generator builds the shades. `fitted` cuts each scale to its own hue — +/// lightness from a contrast target, chroma from how much color that hue can actually +/// hold. `legacy` multiplies the seed by fixed saturation and lightness tables. /// @type String /// @access public -/// @example scss - Opt the whole build back to the original algorithm +/// @example scss /// @use 'igniteui-theming' with ($shade-generator: 'legacy'); -$shade-generator: 'gamut-relative' !default; +$shade-generator: 'fitted' !default; -/// Families generated as a background rather than as a ramp. +/// Ready-made scale shapes. /// -/// Their seed stays exactly on shade 500 — component schemas read -/// `color($palette, 'surface', 500)` expecting the background itself — and the remaining -/// shades are layering steps either side of it. -/// @type List -/// @access public -$surface-families: ('surface') !default; - -/// Families generated as a near-neutral, anchored to the surface rather than to white, -/// and flipped when the surface is dark. -/// @type List -/// @access public -$neutral-families: ('gray') !default; - -// --- the contrast ladder ---------------------------------------------------- - -/// Spacing between adjacent rungs of the default contrast ladder, as a natural-log step. -/// `ln(4.5) / 5` is what makes any two shades 500 apart clear WCAG AA; the extra -/// thousandth is a rounding buffer. -/// @type Number -/// @access public -$contrast-step: 0.304 !default; - -/// Shifts the default ladder. 0.55 puts shade 50 at a 1.18:1 tint and shade 900 at 18.3:1. -/// @type Number -/// @access public -$contrast-offset: 0.55 !default; - -/// Ready-made ladder flavors. +/// `range` is the WCAG contrast the family spans, from shade 50 to shade 900, measured +/// against white — or against the background for `gray`. So `1.182 18.232` means the +/// lightest shade sits at 1.18:1 and the darkest at 18.23:1. /// -/// A ladder is `(range: (lowest, highest), curve: (x1, y1, x2, y2))` — the contrast the -/// scale spans, and how the rungs are distributed across it. The curve is a cubic Bézier -/// read exactly like a CSS `cubic-bezier()` timing function: `even` is the straight line, -/// and the others bunch the light steps together the way real design systems do. +/// `curve` is read exactly like a CSS `cubic-bezier()` timing function: x is how far +/// along the shades you are, y is how far into that contrast range. `null` is the +/// straight line, and an even spread is what makes any two shades 500 apart clear AA — +/// bunching the light end buys a familiar rhythm at the cost of that guarantee. /// -/// Each was fitted to the published scale it is named after; the numbers in brackets are -/// how closely it reproduces that scale, and how many of the five "500 apart" pairs still -/// clear WCAG AA. +/// Each preset was fitted to the published scale it names. Bracketed figures are the max +/// ΔE from that scale and how many of the five "500 apart" pairs still clear AA. /// -/// - `even` — straight. All five pairs clear AA. The right default for color ramps. -/// - `material` — this library's original grayscale [ΔE 0.025, 3/5 AA]. Use it to keep -/// existing component schemas looking exactly as they do today. -/// - `tailwind` — Tailwind v4's neutral rhythm [ΔE 0.013, 5/5 AA]. -/// - `carbon` — IBM Carbon's gray 10–100 [ΔE 0.007, 5/5 AA]. -/// - `layers` — the shallow ladder used by surface families. +/// - `even` — straight [5/5] +/// - `material` — this library's original grayscale [0.025, 3/5] +/// - `tailwind` — Tailwind v4 slate [0.013, 5/5] +/// - `carbon` — IBM Carbon gray 10–100 [0.007, 5/5] /// /// @type Map /// @access public -/// @example scss - Pick a flavor per family -/// $palette: palette($primary: #09f, $secondary: #f0f, $surface: #fff, $ladders: ('gray': 'carbon')); -/// @example scss - Or pass a curve directly -/// $shades: shades('brand', #09f, $IColorShades, $ladder: (0.53, 0, 0.825, 0.785)); -$ladders: ( +/// @example scss - Name a preset +/// $p: palette($primary: #09f, $secondary: #f0f, $surface: #fff, $scales: ('gray': 'carbon')); +/// @example scss - Or write one inline +/// $p: palette(#09f, #f0f, #fff, $scales: ('gray': (range: 1.1 14, curve: 0.5 0 0.8 0.8))); +$scales: ( 'even': ( - range: null, + range: 1.182 18.232, curve: null, ), 'material': ( - range: ( - 1.04, - 16.1, - ), - curve: ( - 0.53, - 0, - 0.825, - 0.785, - ), + range: 1.04 16.1, + curve: 0.53 0 0.825 0.785, ), 'tailwind': ( - range: ( - 1.04, - 17.76, - ), - curve: ( - 0.615, - 0.07, - 0.225, - 0.43, - ), + range: 1.04 17.76, + curve: 0.615 0.07 0.225 0.43, ), 'carbon': ( - range: ( - 1.1, - 18.1, - ), - curve: ( - 0.525, - 0.295, - 0.655, - 0.87, - ), - ), - 'layers': ( - range: ( - 1.02, - 2.5, - ), - curve: null, + range: 1.1 18.1, + curve: 0.525 0.295 0.655 0.87, ), ) !default; -/// Which ladder each family uses when the caller does not say. Families not listed use -/// `even`; surface families use `layers`. +/// Which scale each family uses. Unlisted families use `even`. /// @type Map /// @access public -/// @example scss - Evenly spaced grays instead of the legacy rhythm -/// @use 'igniteui-theming' with ($family-ladders: ()); -$family-ladders: ( +$family-scales: ( 'gray': 'material', ) !default; -/// How far the strongest surface shade sits from the background, as a contrast ratio. -/// Surface shades are layering steps, so they stay shallow: 2.5 matches the darkest -/// surface shade the original generator produced. Capped by the room actually available. -/// @type Number -/// @access public -$surface-reach: 2.5 !default; - -/// Contrast targets for the accent (A) shades. Same ladder, but these ride the gamut hull. +/// The layers a surface family generates. +/// The `toward` is the end of the range each moves to; +/// A layer with no room resolves onto the background. +/// The `step` is its contrast from the background. /// @type Map /// @access public -$accent-targets: ( - 'A100': 1.4, - 'A200': 2.6, - 'A400': 4.2, - 'A700': 6.2, +$surface-roles: ( + 'sunken': ( + toward: 'black', + step: 1.07, + ), + 'raised': ( + toward: 'white', + step: 1.08, + ), + 'overlay': ( + toward: 'white', + step: 1.18, + ), ) !default; -// --- chroma ----------------------------------------------------------------- - -/// Below this chroma a seed carries no usable hue — its hue is a rounding artifact — -/// so the family is generated as a true neutral. +/// Alpha of the translucent `container` layer — black over a light background, white over a dark one. /// @type Number /// @access public -$neutral-threshold: 0.02 !default; +$surface-container-alpha: 0.03 !default; -/// Lower bound on the seed's saturation level, so a very muted brand color still -/// produces a ramp with enough color in it to build a UI from. +/// Lower bound on the seed's saturation level, so a muted brand color still yields a usable ramp. /// @type Number /// @access public $saturation-floor: 0.3 !default; - -/// Upper bound on the saturation level of neutral and surface families, so a tinted -/// gray stays a gray. -/// @type Number -/// @access public -$neutral-tint-cap: 0.12 !default; - -/// How much chroma is pulled back at the two ends of the ramp, so 50 reads as a tint -/// and 900 as a near-neutral. -/// @type Number -/// @access public -$envelope-depth: 0.3 !default; - -/// Shape of that taper. Higher keeps more of the ramp at full strength. -/// @type Number -/// @access public -$envelope-power: 2.5 !default; - -/// Chroma ceiling softness for the numbered track. 4 sits comfortably inside the -/// sRGB boundary, leaving headroom so shades survive gamut mapping unchanged. -/// @type Number -/// @access public -$ceiling-softness: 4 !default; - -/// Chroma ceiling softness for the accent track. 8 tracks the real boundary closely. -/// @type Number -/// @access public -$accent-ceiling-softness: 8 !default; diff --git a/packages/theming/sass/color/_functions.scss b/packages/theming/sass/color/_functions.scss index f08c98a5..2b9a021f 100644 --- a/packages/theming/sass/color/_functions.scss +++ b/packages/theming/sass/color/_functions.scss @@ -46,6 +46,8 @@ $_enhanced-accessibility: false; /// @param {Color} $warn [#faa419] - The warning color used throughout the application (optional). /// @param {Color} $error [#ff134a] - The error color used throughout the application (optional). /// @param {String} $variant [null] - Used internally (optional). +/// @param {String} $generator [$shade-generator] - Either `fitted` or `legacy` (optional). +/// @param {String | Map | List} $scales [null] - One scale for every family, or a map keyed by family name (optional). /// @requires {function} shades /// @returns {Map} A map consisting of color shades for the passed base colors (primary, secondary, gray, etc). /// @example scss @@ -58,6 +60,12 @@ $_enhanced-accessibility: false; /// /// // Include the generated palette colors as CSS variables. /// @include palette($my-palette); +/// @example scss - Keep the original multiplier-based shades +/// $my-palette: palette(rebeccapurple, orange, white, $generator: 'legacy'); +/// @example scss - Give the grayscale a different rhythm +/// $my-palette: palette(rebeccapurple, orange, white, $scales: ('gray': 'carbon')); +/// @see $shade-generator +/// @see $scales @function palette( $primary, $secondary, @@ -68,52 +76,54 @@ $_enhanced-accessibility: false; $warn: #faa419, $error: #ff134a, $variant: null, - $generator: null, - $ladders: null + $generator: config.$shade-generator, + $scales: null ) { $color-shades: types.$IColorShades; $gray-shades: types.$IGrayShades; - $g: $generator; + + // Legacy palettes keep numeric surface shades. + $surface-shades: if($generator == 'legacy', $color-shades, types.$ISurfaceRoles); $primary-palette: shades( 'primary', $primary, $color-shades, - $generator: $g, - $ladder: _ladder-for('primary', $ladders) + $generator: $generator, + $scale: _scale-for('primary', $scales) ); $secondary-palette: shades( 'secondary', $secondary, $color-shades, - $generator: $g, - $ladder: _ladder-for('secondary', $ladders) + $generator: $generator, + $scale: _scale-for('secondary', $scales) ); $surface-palette: shades( 'surface', $surface, - $color-shades, - $generator: $g, - $ladder: _ladder-for('surface', $ladders) + $surface-shades, + $generator: $generator, + $scale: _scale-for('surface', $scales) ); - $grayscale-palette: shades('gray', $gray, $gray-shades, $surface, $g, _ladder-for('gray', $ladders)); + $grayscale-palette: shades('gray', $gray, $gray-shades, $surface, $generator, _scale-for('gray', $scales)); $info-palette: if( $info, - shades('info', $info, $color-shades, $generator: $g, $ladder: _ladder-for('info', $ladders)), + shades('info', $info, $color-shades, $generator: $generator, $scale: _scale-for('info', $scales)), () ); $success-palette: if( $success, - shades('success', $success, $color-shades, $generator: $g, $ladder: _ladder-for('success', $ladders)), + shades('success', $success, $color-shades, $generator: $generator, $scale: _scale-for('success', $scales)), () ); $warn-palette: if( $warn, - shades('warn', $warn, $color-shades, $generator: $g, $ladder: _ladder-for('warn', $ladders)), + shades('warn', $warn, $color-shades, $generator: $generator, $scale: _scale-for('warn', $scales)), () ); $error-palette: if( $error, - shades('error', $error, $color-shades, $generator: $g, $ladder: _ladder-for('error', $ladders)), + shades('error', $error, $color-shades, $generator: $generator, $scale: _scale-for('error', $scales)), () ); @@ -132,19 +142,23 @@ $_enhanced-accessibility: false; ); } -/// Picks one family's ladder out of the `$ladders` argument, which may be a single spec +/// Picks one family's scale out of the `$scales` argument, which may be a single spec /// for every family or a map keyed by family name. /// @access private -@function _ladder-for($name, $ladders) { - @if not $ladders { +/// @group Palettes +/// @param {String} $name - The family to look up. +/// @param {String | Map | List} $scales - The `palette()` argument, or null. +/// @returns {String | Map | List} That family's scale, or null to let the generator decide. +@function _scale-for($name, $scales) { + @if not $scales { @return null; } - @if meta.type-of($ladders) == 'map' and not map.has-key($ladders, range) and not map.has-key($ladders, curve) { - @return map.get($ladders, $name); + @if meta.type-of($scales) == 'map' and not map.has-key($scales, range) and not map.has-key($scales, curve) { + @return map.get($scales, $name); } - @return $ladders; + @return $scales; } /// Generates color shades for a given color. @@ -154,6 +168,8 @@ $_enhanced-accessibility: false; /// @param {Color} $color - The base color used to generate the shades. /// @param {List} $shades - The list of shade variants. /// @param {Color} $surface [null] - The surface color. Useful if generating shades of gray (optional). +/// @param {String} $generator [$shade-generator] - Either `fitted` or `legacy` (optional). +/// @param {String | Map | List} $scale [null] - A preset name, a `(range:, curve:)` map, or a curve (optional). /// @requires {function} adaptive-contrast /// @returns {Map} A map consisting of color shades and their respective contrast colors. /// @@ -166,39 +182,61 @@ $_enhanced-accessibility: false; /// #{$color-name}: shades($color-name, #a57865, $IColorShades), /// ) /// ); +/// @example scss - Pick a scale for this scale +/// $shades: shades('accent', #a57865, $IColorShades, $scale: 'carbon'); /// @see $IColorShades -@function shades($name, $color, $shades, $surface: null, $generator: null, $ladder: null) { - $gen: if($generator, $generator, config.$shade-generator); +/// @see $scales +@function shades($name, $color, $shades, $surface: null, $generator: config.$shade-generator, $scale: null) { + $entries: if( + $generator == 'legacy', + _legacy-entries($name, $color, $shades, $surface), + generator.family($name, $color, $shades, $surface, $scale) + ); $result: (); - @if $gen == 'legacy' { - @each $variant in $shades { - $shade: shade($name, $color, $variant, $surface); - $result: map.merge( - $result, - ( - $variant: map.get($shade, 'hsl'), - '#{$variant}-contrast': adaptive-contrast(#{var(--ig-#{$name}-#{$variant})}), - '#{$variant}-raw': map.get($shade, 'raw'), - ) - ); - } - } @else { - @each $variant, $shade in generator.family($name, $color, $shades, $surface, $ladder) { - $result: map.merge( - $result, - ( - $variant: map.get($shade, 'css'), - '#{$variant}-contrast': adaptive-contrast(#{var(--ig-#{$name}-#{$variant})}), - '#{$variant}-raw': map.get($shade, 'raw'), - ) - ); - } + @each $variant, $shade in $entries { + $result: map.set($result, $variant, map.get($shade, 'css')); + $result: map.set($result, '#{$variant}-contrast', adaptive-contrast(#{var(--ig-#{$name}-#{$variant})})); + $result: map.set($result, '#{$variant}-raw', map.get($shade, 'raw')); } @return $result; } +/// Builds the multiplier-based shades, plus — for a surface — the same layer roles the +/// `fitted` generator emits. The roles are contrast steps off the background rather than +/// points on a multiplier ramp, so they mean the same thing under either generator, and +/// having them everywhere is what lets a schema say `('surface', 'base')` unconditionally. +/// @access private +/// @group Palettes +/// @param {String} $name - The name of the color. +/// @param {Color} $color - The base color used to generate the shades. +/// @param {List} $shades - The list of shade variants. +/// @param {Color} $surface [null] - The surface color, for the grayscale. +/// @requires {function} shade +/// @returns {Map} Each variant mapped to `(css:, raw:)`. +@function _legacy-entries($name, $color, $shades, $surface: null) { + $entries: (); + + @each $variant in $shades { + $shade: shade($name, $color, $variant, $surface); + $entries: map.set( + $entries, + $variant, + ( + css: map.get($shade, 'hsl'), + raw: map.get($shade, 'raw'), + ) + ); + } + + @if '#{$name}' == 'surface' { + @return map.merge($entries, generator.family('surface', $color, types.$ISurfaceRoles)); + } + + @return $entries; +} + /// Generates a color shade for a given base colors. /// @access private /// @group Palettes @@ -319,7 +357,8 @@ $_enhanced-accessibility: false; /// .my-component-2 { /// background: color($my-palette, primary, 200, $opacity: 0.5); // rgba(136, 192, 229, 0.5) /// } -@function color($palette: null, $color: primary, $variant: 500, $opacity: null) { +@function color($palette: null, $color: primary, $variant: null, $opacity: null) { + $variant: if($variant, $variant, if('#{$color}' == 'surface', 'base', 500)); $s: #{var(--ig-#{$color}-#{$variant})}; $contrast: if(meta.type-of($variant) == string, string.index($variant, 'contrast'), false); $_alpha: if($opacity, $opacity, 1); @@ -330,7 +369,11 @@ $_enhanced-accessibility: false; $base: map.get($s, #{$variant}); $raw: map.get($s, #{$variant}-raw); - @return if($contrast, $_relative-color, if($raw, rgba($raw, $_alpha), _normalize-color($base))); + @return if( + $contrast, + $_relative-color, + if($raw, if($opacity, rgba($raw, $opacity), $raw), _normalize-color($base)) + ); } @return $_relative-color; @@ -351,7 +394,9 @@ $_enhanced-accessibility: false; /// background: color($color: 'primary', $variant: 200); /// color: contrast-color($color: 'primary', $variant: 200); /// } -@function contrast-color($palette: null, $color: primary, $variant: 500, $opacity: null) { +@function contrast-color($palette: null, $color: primary, $variant: null, $opacity: null) { + $variant: if($variant, $variant, if('#{$color}' == 'surface', 'base', 500)); + @return color($palette, $color, #{$variant}-contrast, $opacity); } diff --git a/packages/theming/sass/color/_gamut.scss b/packages/theming/sass/color/_gamut.scss index 29102a5d..1869b0ce 100644 --- a/packages/theming/sass/color/_gamut.scss +++ b/packages/theming/sass/color/_gamut.scss @@ -4,63 +4,55 @@ @use 'sass:list'; //// -/// sRGB gamut geometry in OKLCH. -/// -/// Every hue has a hard limit on how colorful it can get, and that limit changes with -/// lightness. Plotted, it makes a tent: chroma rises from 0 at black, peaks at the -/// hue's "cusp", and falls back to 0 at white. These functions find that tent and -/// report its height at any lightness. -/// +/// sRGB gamut geometry in OKLCH. Chroma rises from 0 at black, peaks at the hue's cusp, +/// and falls back to 0 at white — a tent whose height these functions report. /// @package theming /// @group Palettes /// @access private //// -/// Reads a color's OKLCH channels as plain numbers. -/// -/// `color.channel()` returns units — lightness as `70.8%`, hue as `314.6deg`. Feeding -/// those straight into arithmetic silently yields a hundred-times-too-large lightness -/// and range comparisons that never match, and it compiles without error. -/// @access private +/// Reads a color's OKLCH components as plain numbers. `color.channel()` returns units — +/// lightness as `70.8%`, hue as `314.6deg` — which break arithmetic silently. /// @param {Color} $c - The color to read. -/// @returns {Map} A map with unitless `l`, `c` and `h` keys. +/// @returns {Map} Its `l`, `c` and `h`, unitless. @function read($c) { $ok: color.to-space($c, oklch); - $h: color.channel($ok, 'hue', $space: oklch); @return ( l: math.div(color.channel($ok, 'lightness', $space: oklch), 100%), c: color.channel($ok, 'chroma', $space: oklch), - h: if($h == 0, 0, math.div($h, 1deg)) + h: math.div(color.channel($ok, 'hue', $space: oklch), 1deg) ); } /// Builds an OKLCH color from unitless components. -/// @access private +/// @param {Number} $l - Lightness, 0 to 1. +/// @param {Number} $c - Chroma. +/// @param {Number} $h - Hue, in degrees. +/// @returns {Color} The color, which may fall outside sRGB. @function make($l, $c, $h) { - @return color.change(oklch(0.5 0 0), $lightness: $l, $chroma: $c, $hue: $h); + @return oklch($l $c $h); } -/// Whether the screen can show this color. -/// @access private +/// Whether an OKLCH color fits inside sRGB. +/// @param {Number} $l - Lightness, 0 to 1. +/// @param {Number} $c - Chroma. +/// @param {Number} $h - Hue, in degrees. +/// @returns {Boolean} True when the color is displayable. @function in-srgb($l, $c, $h) { @return color.is-in-gamut(make($l, $c, $h), srgb); } -/// The tent's height at one lightness: the most chroma sRGB can hold there. -/// -/// Found by bisection — guess the middle of the remaining range, keep the half that -/// still contains the answer, repeat. 18 rounds narrows 0.45 to about 0.0000017. -/// @access private +/// The most chroma sRGB can hold at one lightness, found by bisection. +/// 18 rounds narrow the search from 0.45 to about 0.0000017. /// @param {Number} $l - Lightness, 0 to 1. /// @param {Number} $h - Hue, in degrees. -/// @returns {Number} The maximum in-gamut chroma. +/// @returns {Number} The highest in-gamut chroma there. @function max-chroma($l, $h) { $lo: 0; $hi: 0.45; - $i: 0; - @while $i < 18 { + @for $i from 0 to 18 { $mid: math.div($lo + $hi, 2); @if in-srgb($l, $mid, $h) { @@ -68,27 +60,20 @@ } @else { $hi: $mid; } - - $i: $i + 1; } @return $lo; } -/// The peak of the tent for a hue. -/// -/// `max-chroma` rises then falls as lightness climbs, so a ternary search finds the -/// peak in far fewer probes than a scan: repeatedly discard whichever third of the -/// range cannot contain it. -/// @access private +/// The peak of a hue's chroma curve. +/// The `max-chroma` rises then falls, so a ternary search is used. /// @param {Number} $h - Hue, in degrees. -/// @returns {Map} `l` and `c` of the peak. +/// @returns {Map} The peak's `l` and `c`. @function cusp($h) { $lo: 0.02; $hi: 0.995; - $i: 0; - @while $i < 26 { + @for $i from 0 to 26 { $a: $lo + math.div($hi - $lo, 3); $b: $hi - math.div($hi - $lo, 3); @@ -97,8 +82,6 @@ } @else { $hi: $b; } - - $i: $i + 1; } $l: math.div($lo + $hi, 2); @@ -106,12 +89,7 @@ @return (l: $l, c: max-chroma($l, $h)); } -/// The peak expressed as the two slopes of a tent. -/// -/// Storing it this way turns "how much chroma is available at lightness L" into a -/// single multiply on each side. Compute this once per color family — every shade in -/// a family shares a hue, so they share a tent. -/// @access private +/// The cusp as the two slopes of a tent, which turns the chroma available at a given lightness into a single multiply. /// @param {Number} $h - Hue, in degrees. /// @returns {List} `(rising-slope, falling-slope)`. @function tent($h) { @@ -122,12 +100,11 @@ @return (math.div($cc, $lc), math.div($cc, 1 - $lc)); } -/// A `min()` that curves instead of forming a sharp point. -/// -/// The tent's height is whichever slope is lower, but a hard `min()` leaves a corner, -/// and a corner shows up in the ramp as one shade noticeably more colorful than its -/// neighbours. `$p` controls how tight the corner is: higher hugs the real boundary. -/// @access private +/// A `min()` that curves, so the tent has no corner for a shade to land on. +/// @param {Number} $a - First value. +/// @param {Number} $b - Second value. +/// @param {Number} $p - Softness. Higher tracks the true minimum more closely. +/// @returns {Number} The softened minimum, or 0 if either value is non-positive. @function soft-min($a, $b, $p) { @if $a <= 0 or $b <= 0 { @return 0; @@ -137,10 +114,8 @@ } /// Converts a color to sRGB with integer channels. -/// -/// Matches what the browser will actually paint, and keeps generated token files free -/// of ten-decimal channel values. -/// @access private +/// @param {Color} $c - The color to convert. +/// @returns {Color} The color as `rgb()` with rounded channels. @function to-srgb($c) { $rgb: color.to-space($c, rgb); @@ -151,12 +126,11 @@ ); } -/// How much chroma the ramp is allowed to use at a given lightness. -/// @access private +/// How much chroma a hue can hold at one lightness, read off its tent. /// @param {Number} $l - Lightness, 0 to 1. -/// @param {List} $tent - The family's tent, from `tent()`. -/// @param {Number} $p - Ceiling softness. -/// @returns {Number} The chroma ceiling. +/// @param {List} $tent - The hue's tent, from `tent()`. +/// @param {Number} $p - Softness of the tent's peak. +/// @returns {Number} The chroma ceiling there. @function ceiling($l, $tent, $p) { @return soft-min($l * list.nth($tent, 1), (1 - $l) * list.nth($tent, 2), $p); } diff --git a/packages/theming/sass/color/_generator.scss b/packages/theming/sass/color/_generator.scss index ddb4a53f..e2aaca10 100644 --- a/packages/theming/sass/color/_generator.scss +++ b/packages/theming/sass/color/_generator.scss @@ -2,47 +2,61 @@ @use 'sass:map'; @use 'sass:math'; @use 'sass:list'; -@use 'sass:string'; @use 'sass:meta'; @use 'config'; @use 'gamut'; +@use 'types'; @use 'contrast' as *; //// -/// The gamut-relative shade generator. -/// -/// Lightness comes from a contrast target, not from the seed. Chroma is a fraction of -/// what the sRGB gamut allows at that lightness and hue, not a multiple of the seed's. -/// The seed contributes its hue and its saturation *level* — how much of the available -/// color it chooses to use — so any seed, however light, dark, muted or neon, produces -/// a ramp with the same structure. -/// -/// Three kinds of family: -/// -/// - **chromatic** — primary, secondary, info, success, warn, error. Anchored to white. -/// Identical in light and dark themes; schemas pick which shade to use. -/// - **neutral** — gray. Anchored to the surface, so shade 50 always sits nearest the -/// background and 900 furthest from it, in both themes. -/// - **surface** — the background itself. Shade 500 *is* the seed; the rest are layering -/// steps either side of it. -/// /// @package theming /// @group Palettes /// @access private //// -// --- the ladder ------------------------------------------------------------- - -/// A cubic Bézier evaluated on one axis, with the first and last control points -/// pinned at 0 and 1 — the same construction as a CSS `cubic-bezier()`. -/// @access private +$_default-scale: 'even'; + +// Where the accent (A100-A700) shades sit, as contrast against white. +$_accent-targets: ( + 'A100': 1.4, + 'A200': 2.6, + 'A400': 4.2, + 'A700': 6.2, +); + +// Below this chroma a seed's hue is a rounding artifact. Surfaces are exempt. +$_neutral-threshold: 0.02; + +// Keeps a tinted gray a gray. +$_neutral-tint-cap: 0.12; + +// Chroma pulled back at the ends of a ramp, and the shape of that taper. +$_envelope-depth: 0.3; +$_envelope-power: 2.5; + +// Ceiling softness: 4 sits inside the sRGB boundary so shades survive gamut mapping; +// 8 tracks the real boundary, which is where the accent track rides. +$_ceiling-softness: 4; +$_accent-ceiling-softness: 8; + +// How far a solved shade may sit from its contrast target before that is worth reporting. +// The solver always returns its closest approach, so this only trips when a target is +// genuinely out of reach for the hue. +$_target-tolerance: 0.05; + +/// Evaluates one axis of a cubic Bézier whose outer control points are pinned at 0 and 1. +/// @param {Number} $t - Position along the curve, 0 to 1. +/// @param {Number} $p1 - First inner control point. +/// @param {Number} $p2 - Second inner control point. +/// @returns {Number} The value of that axis at `$t`. @function _bezier($t, $p1, $p2) { @return 3 * math.pow(1 - $t, 2) * $t * $p1 + 3 * (1 - $t) * $t * $t * $p2 + math.pow($t, 3); } -/// Inverts the x axis of that curve, so the caller can ask "at progress `$x`, how far -/// along is y?" — exactly what an animation timing function does. -/// @access private +/// Reads a cubic Bézier the way CSS reads a timing function: solves x for t, then returns y. +/// @param {Number} $x - Progress along the x axis, 0 to 1. +/// @param {List} $curve - Control points `(x1, y1, x2, y2)`, or null for a straight line. +/// @returns {Number} The eased position, 0 to 1. @function _ease($x, $curve) { @if not $curve { @return $x; @@ -50,9 +64,8 @@ $lo: 0; $hi: 1; - $i: 0; - @while $i < 24 { + @for $i from 0 to 24 { $mid: math.div($lo + $hi, 2); @if _bezier($mid, list.nth($curve, 1), list.nth($curve, 3)) < $x { @@ -60,80 +73,74 @@ } @else { $hi: $mid; } - - $i: $i + 1; } @return _bezier(math.div($lo + $hi, 2), list.nth($curve, 2), list.nth($curve, 4)); } -/// Resolves a ladder argument into `(range, curve)`. -/// -/// Accepts a preset name from `$ladders`, a `(range:, curve:)` map, a bare -/// `(x1, y1, x2, y2)` curve, or null for the family's default. -/// @access private -@function _ladder($name, $given) { +/// Resolves a scale argument into its `(range:, curve:)` pair. +/// @param {String} $name - The family name, used to look up a default in `$family-scales`. +/// @param {String | Map | List} $given - A preset name, a `(range:, curve:)` map, a bare curve, or null. +/// @returns {Map} The resolved scale. Falls back to `even` for both the scale and a missing range. +/// @throws Unknown scale "". +@function _scale($name, $given) { $spec: $given; @if not $spec { - $spec: map.get(config.$family-ladders, $name); + $spec: map.get(config.$family-scales, $name); @if not $spec { - $spec: if(list.index(config.$surface-families, $name), 'layers', 'even'); + $spec: $_default-scale; } } @if meta.type-of($spec) == 'string' { - $found: map.get(config.$ladders, $spec); + $found: map.get(config.$scales, $spec); @if not $found { - @error 'Unknown ladder "#{$spec}". Available: #{map.keys(config.$ladders)}.'; + @error 'Unknown scale "#{$spec}". Available: #{map.keys(config.$scales)}.'; } @return $found; } - @if meta.type-of($spec) == 'list' and list.length($spec) == 4 { - @return (range: null, curve: $spec); - } - - @return (range: map.get($spec, range), curve: map.get($spec, curve)); -} + $default-range: map.get(config.$scales, $_default-scale, range); -/// The contrast target for rung `$i` of a ladder. -/// -/// The endpoints and the distribution between them are both configurable, so a scale can -/// be given a different *flavor* — the same math, a different rhythm — without touching -/// the generator. An even distribution is what makes the contrast between any two shades -/// depend only on how many rungs apart they are. -/// @access private -@function _target($ladder, $i, $n, $reach: null) { - $range: map.get($ladder, range); - $lo: if($range, list.nth($range, 1), math.pow(math.$e, config.$contrast-step * config.$contrast-offset)); - $hi: if($range, list.nth($range, 2), math.pow(math.$e, config.$contrast-step * ($n - 1 + config.$contrast-offset))); - - @if $reach { - $hi: math.min($hi, $reach); + @if meta.type-of($spec) == 'list' and list.length($spec) == 4 { + @return (range: $default-range, curve: $spec); } - $t: _ease(math.div($i, $n - 1), map.get($ladder, curve)); + $range: map.get($spec, range); - @return math.pow(math.$e, math.log($lo) + (math.log($hi) - math.log($lo)) * $t); + @return (range: if($range, $range, $default-range), curve: map.get($spec, curve)); } -// --- chroma ----------------------------------------------------------------- +/// The contrast target for one shade, placed along the scale by its curve. +/// The range is walked geometrically, so equal steps are equal contrast *ratios*. +/// @param {Map} $scale - A resolved `(range:, curve:)` pair. +/// @param {Number} $i - Zero-based index of the shade. +/// @param {Number} $n - How many shades the family has. +/// @returns {Number} The WCAG contrast this shade should reach against its anchor. +@function _target($scale, $i, $n) { + $range: map.get($scale, range); + $lo: list.nth($range, 1); + $hi: list.nth($range, 2); + $t: _ease(math.div($i, $n - 1), map.get($scale, curve)); + + @return $lo * math.pow(math.div($hi, $lo), $t); +} -/// Pulls chroma back at the two ends of the ramp, so 50 reads as a tint and 900 as a -/// near-neutral instead of both sitting on the gamut boundary. -/// @access private +/// Tapers chroma toward both ends of a ramp, so 50 reads as a tint and 900 as a near-neutral. +/// @param {Number} $t - Position along the ramp, 0 to 1. +/// @returns {Number} A multiplier for the chroma ceiling at that position. @function _envelope($t) { - @return 1 - config.$envelope-depth * math.pow(math.abs(2 * $t - 1), config.$envelope-power); + @return 1 - $_envelope-depth * math.pow(math.abs(2 * $t - 1), $_envelope-power); } -/// OKLCH holds hue well almost everywhere. The exception is the blue-violet wedge, -/// where keeping the number constant makes light blues drift visibly toward cyan. -/// These are linear fits measured against CAM16, which gets the wedge right. -/// @access private +/// Corrects the hue drift OKLCH shows through the blue-violet wedge. Linear fits against CAM16. +/// @param {Number} $h - The family's hue, in degrees. +/// @param {Number} $l - Lightness of the shade being built, 0 to 1. +/// @returns {Number} The hue to use at that lightness. Unchanged outside the wedge. @function _hue-at($h, $l) { @if $h >= 255 and $h <= 295 and $l > 0.55 { @return $h + 33 * ($l - 0.55); @@ -146,40 +153,44 @@ @return $h; } -// --- solving ---------------------------------------------------------------- - -/// Solves one shade: nudges lightness until the finished color's measured contrast -/// lands on its target. -/// -/// You cannot compute the lightness directly, because adding chroma adds light — a -/// colorful color is brighter than the gray of the same OKLCH lightness, so the -/// contrast solved for on a gray is wrong the moment color goes in. So: guess, measure, -/// correct. The 0.55 damping is deliberately below 1; it converges a little slower but -/// never oscillates. -/// -/// @access private -/// @param {Number} $h - The family's hue. -/// @param {List} $tent - The family's tent. -/// @param {Number} $s - The saturation level to apply, 0 to 1. -/// @param {Number} $t - Position along the ramp, 0 to 1, for the envelope. -/// @param {Number} $target - Target contrast ratio. +/// The fixed part of a solve: what the shades of this family are being built against. +/// @param {Number} $h - The family's hue, in degrees. +/// @param {List} $tent - The hue's chroma tent, from `gamut.tent()`. /// @param {Number} $anchor-y - Luminance of whatever the contrast is measured against. -/// @param {Boolean} $lighter - True when the shade must be lighter than the anchor. -/// @param {Number} $p - Chroma ceiling softness. +/// @param {Boolean} $lighter - Whether the shades sit lighter than the anchor. +/// @returns {Map} A context for `_solve()`. +@function _context($h, $tent, $anchor-y, $lighter) { + @return (h: $h, tent: $tent, anchor-y: $anchor-y, lighter: $lighter); +} + +/// Finds the shade that hits a contrast target. Chroma adds light, so the lightness cannot be +/// computed directly; contrast is monotonic in lightness, so this bisects for it. +/// @param {Map} $ctx - The family context, from `_context()`. +/// @param {Number} $target - The WCAG contrast to reach. +/// @param {Map} $chroma - How to chroma the shade, plus the ceiling `softness` to use. +/// Either `(level:, at:, softness:)` to take that share of the ceiling with the envelope +/// applied at position `at`, or `(fixed:, softness:)` to hold chroma flat. /// @returns {Map} The solved `color` and the contrast it actually `reached`. -@function _solve($h, $tent, $s, $t, $target, $anchor-y, $lighter, $p) { - // Contrast is monotonic in lightness, so bisect rather than nudge. A multiplicative - // step overshoots badly when the anchor is itself near an extreme — which is exactly - // the case for a surface family, where the anchor is the background. +@function _solve($ctx, $target, $chroma) { + $h: map.get($ctx, 'h'); + $tent: map.get($ctx, 'tent'); + $anchor-y: map.get($ctx, 'anchor-y'); + $lighter: map.get($ctx, 'lighter'); + $fixed: map.get($chroma, 'fixed'); + $softness: map.get($chroma, 'softness'); $lo: 0.02; $hi: 0.995; $out: null; $got: 1; - $i: 0; - @while $i < 20 { + @for $i from 0 to 20 { $l: math.div($lo + $hi, 2); - $c: $s * _envelope($t) * gamut.ceiling($l, $tent, $p); + $ceiling: gamut.ceiling($l, $tent, $softness); + $c: if( + $fixed != null, + math.min($fixed, $ceiling), + map.get($chroma, 'level') * _envelope(map.get($chroma, 'at')) * $ceiling + ); $out: color.to-gamut(gamut.make($l, $c, _hue-at($h, $l)), srgb, local-minde); $y: luminance($out); $got: if($lighter, math.div($y + 0.05, $anchor-y + 0.05), math.div($anchor-y + 0.05, $y + 0.05)); @@ -188,104 +199,186 @@ @return (color: $out, reached: $got); } - $needs-more-light: if($lighter, $got < $target, $got > $target); - - @if $needs-more-light { + @if if($lighter, $got < $target, $got > $target) { $lo: $l; } @else { $hi: $l; } - - $i: $i + 1; } @return (color: $out, reached: $got); } -/// The seed's saturation level: how much of the color available to it at its own -/// lightness it actually uses. This single number replaces the whole `s:` column of the -/// old multiplier table. -/// @access private +/// Solves one shade and reports a target the hue cannot reach, rather than emitting the +/// near miss silently. +/// @param {String} $name - The family name, for the warning. +/// @param {String} $variant - The shade being built, for the warning. +/// @param {Map} $ctx - The family context, from `_context()`. +/// @param {Number} $target - The WCAG contrast to reach. +/// @param {Map} $chroma - The chroma spec, as `_solve()` takes it. +/// @returns {Color} The solved color. +@function _shade-at($name, $variant, $ctx, $target, $chroma) { + $solved: _solve($ctx, $target, $chroma); + $reached: map.get($solved, 'reached'); + + @if math.abs($reached - $target) > $target * $_target-tolerance { + @warn 'Shade "#{$name}-#{$variant}" wanted #{$target}:1 but its hue only reaches #{$reached}:1.'; + } + + @return map.get($solved, 'color'); +} + +/// How much of the chroma available at its own lightness the seed actually uses. +/// @param {Map} $read - The seed's OKLCH components, from `gamut.read()`. +/// @param {List} $tent - The hue's chroma tent, from `gamut.tent()`. +/// @param {Boolean} $chromatic - Whether the seed carries a usable hue. +/// @param {Boolean} $muted - Whether to cap the result at `$_neutral-tint-cap`. +/// @returns {Number} A saturation level, 0 to 1. @function _level($read, $tent, $chromatic, $muted) { @if not $chromatic { @return 0; } - $s: math.div(map.get($read, 'c'), gamut.ceiling(map.get($read, 'l'), $tent, config.$ceiling-softness)); + $s: math.div(map.get($read, 'c'), gamut.ceiling(map.get($read, 'l'), $tent, $_ceiling-softness)); + + @return if($muted, math.min($s, $_neutral-tint-cap), math.clamp(config.$saturation-floor, $s, 1)); +} + +/// Packs one finished color into the pair `shades()` expects. +/// @param {Color} $color - The solved color. +/// @returns {Map} The color as both `raw` and `css`, in sRGB with integer channels. +@function _entry($color) { + $srgb: gamut.to-srgb($color); + + @return (raw: $srgb, css: $srgb); +} + +/// Steps one surface layer away from its background. +/// @param {Map} $ctx - The surface context, from `_context()`, with `lighter` set for this role. +/// @param {Color} $anchor - The background the layer sits on. +/// @param {Number} $c - Chroma to hold the layer at. +/// @param {Number} $target - The WCAG contrast the layer should reach from the background. +/// @returns {Color} The layer, or the anchor unchanged when there is no room in that direction. +@function _layer($ctx, $anchor, $c, $target) { + $y: map.get($ctx, 'anchor-y'); + $lighter: map.get($ctx, 'lighter'); + $room: if($lighter, math.div(1.05, $y + 0.05), math.div($y + 0.05, 0.05)); + + @if $room < $target { + @return $anchor; + } + + $solved: _solve( + $ctx, + $target, + ( + fixed: $c, + softness: $_ceiling-softness, + ) + ); - @return if($muted, math.min($s, config.$neutral-tint-cap), math.clamp(config.$saturation-floor, $s, 1)); + @return if(map.get($solved, 'reached') >= $target * 0.9, map.get($solved, 'color'), $anchor); } -// --- the public entry point ------------------------------------------------- +/// Builds a surface family: a background plus the layers that sit on it. Layers hold the +/// background's chroma flat, since scaling it reads as a color shift rather than an elevation. +/// @param {Color} $seed - The background color. +/// @param {List} $variants - The roles to generate, in emit order. +/// @param {Number} $sh - The background's hue, in degrees. +/// @param {List} $tent - The hue's chroma tent, from `gamut.tent()`. +/// @param {Number} $c - The background's chroma. +/// @returns {Map} Each role mapped to `(raw:, css:)`. +/// @throws A surface family is built from roles, not numeric shades. +@function _surface($seed, $variants, $sh, $tent, $c) { + $by: luminance($seed); + $result: ( + 'base': _entry($seed), + 'seed': ( + raw: $seed, + css: $seed, + ), + ); + + @each $role, $spec in config.$surface-roles { + $ctx: _context($sh, $tent, $by, map.get($spec, toward) == 'white'); + $result: map.set($result, $role, _entry(_layer($ctx, $seed, $c, map.get($spec, step)))); + } + + $translucent: rgba(if($by > 0.5, #000, #fff), config.$surface-container-alpha); + $result: map.set( + $result, + 'container', + ( + raw: $translucent, + css: $translucent, + ) + ); + $ordered: (); + + @each $variant in $variants { + $v: '#{$variant}'; + + @if map.has-key($result, $v) { + $ordered: map.set($ordered, $v, map.get($result, $v)); + } + } + + @if not map.has-key($ordered, 'base') { + @error 'A surface family is built from roles, not numeric shades. Pass $ISurfaceRoles ' + + '(or a list containing "base") as its variants, got: #{$variants}.'; + } + + @return $ordered; +} /// Generates every shade of one color family in a single pass. -/// -/// The gamut cusp is found once here and reused for all shades — every shade in a -/// family shares a hue, so they share a tent. Recomputing it per shade is correct but -/// more than ten times slower. -/// -/// @access private +/// The gamut cusp is found once and shared by all shades; /// @param {String} $name - The family name. /// @param {Color} $seed - The seed color. /// @param {List} $variants - The shade variants to generate. /// @param {Color} $surface [null] - The surface color, for neutral families. -/// @param {String | Map | List} $ladder [null] - A ladder name, spec, or bare curve. +/// @param {String | Map | List} $scale [null] - A scale name, spec, or bare curve. /// @returns {Map} Each variant mapped to `(raw:, css:)`. -@function family($name, $seed, $variants, $surface: null, $ladder: null) { +/// @throws A "" family needs at least two numeric shades to span a scale. +@function family($name, $seed, $variants, $surface: null, $scale: null) { $key: '#{$name}'; - $is-surface: list.index(config.$surface-families, $key) != null; - $is-neutral: list.index(config.$neutral-families, $key) != null; - $muted: $is-surface or $is-neutral; - $lad: _ladder($key, $ladder); + $is-surface: $key == 'surface'; + $is-neutral: $key == 'gray'; @if $is-neutral and not $seed { $seed: if(luminance($surface) > 0.5, #000, #fff); } - // Chromatic families are measured against white and are identical in every theme. - // Neutral families are measured against the surface, so they flip with it. Surface - // families are measured against themselves. - $anchor-y: 1; - - @if $is-neutral { - $anchor-y: luminance($surface); - } @else if $is-surface { - $anchor-y: luminance($seed); - } - - $flip: $is-neutral and $anchor-y <= 0.5; + $read: gamut.read($seed); + $sh: map.get($read, 'h'); - // A surface family only ever moves one way: into whichever side of the range has - // room. A white page has nothing lighter than itself and a black one nothing darker, - // so pretending the scale runs both ways is what produced five identical whites. - $up: false; - $reach: null; + // Backgrounds are picked deliberately, and a warm vs cool dark sits below the + // threshold that rounds a near-gray seed to neutral. + $chromatic: if($is-surface, map.get($read, 'c') > 0, map.get($read, 'c') >= $_neutral-threshold); + $tent: if($chromatic, gamut.tent($sh), (0, 0)); + $s: _level($read, $tent, $chromatic, $is-neutral); @if $is-surface { - $lighter: math.div(1.05, $anchor-y + 0.05); - $darker: math.div($anchor-y + 0.05, 0.05); - $up: $lighter > $darker; - $reach: math.max($lighter, $darker) * 0.98; + @return _surface($seed, $variants, $sh, $tent, map.get($read, 'c')); } - $read: gamut.read($seed); - $sh: map.get($read, 'h'); - $chromatic: map.get($read, 'c') >= config.$neutral-threshold; - $tent: if($chromatic, gamut.tent($sh), (0.0001, 0.0001)); - $s: _level($read, $tent, $chromatic, $muted); + $anchor-y: if($is-neutral, luminance($surface), 1); + $ctx: _context($sh, $tent, $anchor-y, $is-neutral and $anchor-y <= 0.5); + $sc: _scale($key, $scale); $result: (); $i: 0; $n: 0; @each $variant in $variants { - @if not(map.has-key(config.$accent-targets, '#{$variant}')) and '#{$variant}' != 'seed' { + @if not map.has-key($_accent-targets, '#{$variant}') and '#{$variant}' != 'seed' { $n: $n + 1; } } - // Surface keeps shade 500 for the background itself, so the remaining keys share one - // rung fewer between them. - $rungs: if($is-surface, $n - 1, $n); + // The scale spans a range across `$n` shades, so a lone shade has nowhere to sit. + @if $n < 2 { + @error 'A "#{$key}" family needs at least two numeric shades to span a scale, got #{$n}.'; + } @each $variant in $variants { $v: '#{$variant}'; @@ -299,35 +392,42 @@ css: $seed, ) ); - } @else if map.has-key(config.$accent-targets, $v) { - // The accent track: the same anchor, but riding the gamut hull rather than - // following the seed's restraint. - $solved: _solve( - $sh, - $tent, - if($chromatic, 1, 0), - 0.5, - map.get(config.$accent-targets, $v), - $anchor-y, - $flip, - config.$accent-ceiling-softness + } @else if map.has-key($_accent-targets, $v) { + $result: map.set( + $result, + $v, + _entry( + _shade-at( + $key, + $v, + $ctx, + map.get($_accent-targets, $v), + ( + level: if($chromatic, 1, 0), + at: 0.5, + softness: $_accent-ceiling-softness, + ) + ) + ) ); - $result: map.set($result, $v, _entry(map.get($solved, 'color'))); - } @else if $is-surface and $v == '500' { - $result: map.set($result, $v, _entry($seed)); } @else { - $target: if($is-surface, _target($lad, $i, $rungs, $reach), _target($lad, $i, $rungs)); - $solved: _solve( - $sh, - $tent, - $s, - math.div($i, $rungs - 1), - $target, - $anchor-y, - if($is-surface, $up, $flip), - config.$ceiling-softness + $result: map.set( + $result, + $v, + _entry( + _shade-at( + $key, + $v, + $ctx, + _target($sc, $i, $n), + ( + level: $s, + at: math.div($i, $n - 1), + softness: $_ceiling-softness, + ) + ) + ) ); - $result: map.set($result, $v, _entry(map.get($solved, 'color'))); $i: $i + 1; } } @@ -335,28 +435,15 @@ @return $result; } -/// Both halves of a shade. They hold the same value — the generator resolves colors at -/// build time — but the pair is what `shades()` expects, and keeping `-raw` populated -/// keeps every existing consumer working. -/// @access private -@function _entry($color) { - $srgb: gamut.to-srgb($color); - - @return (raw: $srgb, css: $srgb); -} - -/// Reports which shade a seed color lands nearest. -/// -/// Under this generator the seed informs the ramp without necessarily appearing in it. -/// Nothing depends on the answer — `--ig-{name}-seed` always holds the original — but -/// it is worth surfacing, because someone who hands you `#00ff00` will want to know it -/// landed at shade 100 rather than in the middle. -/// +/// Reports which shade sits closest to the seed in lightness. Chroma and hue are not +/// compared: each shade carries the chroma its hue can hold at that lightness, so the +/// match is rarely the seed itself. `--ig-{name}-seed` always holds the original. /// @access public /// @group Palettes /// @param {Map} $palette - A generated palette. /// @param {String} $name ['primary'] - The color family to inspect. -/// @returns {String} The variant whose lightness is closest to the seed's. +/// @returns {String} The variant whose lightness is closest to the seed's, or null when +/// the family has no seed or no numeric shades. /// @example scss /// $where: seed-lands-on($my-palette, 'primary'); // '300' @function seed-lands-on($palette, $name: 'primary') { @@ -369,21 +456,18 @@ $target: map.get(gamut.read($seed), 'l'); $best: null; - $best-d: 99; + $best-d: null; - @each $variant, $value in $family { - $skip: string.index($variant, 'raw') != - null or - string.index($variant, 'contrast') != - null or - $variant == - 'seed' or - map.has-key(config.$accent-targets, $variant); + // Only the numeric shades are candidates: `seed` is the input itself, the accents ride + // their own contrast track, and `-raw`/`-contrast` are other views of these same shades. + @each $variant in types.$INumericShades { + $raw: map.get($family, '#{$variant}-raw'); - @if not $skip { - $d: math.abs(map.get(gamut.read(map.get($family, '#{$variant}-raw')), 'l') - $target); + @if $raw { + $d: math.abs(map.get(gamut.read($raw), 'l') - $target); - @if $d < $best-d { + // Only null is falsy here — a distance of 0 is a real, and winning, value. + @if not $best-d or $d < $best-d { $best-d: $d; $best: $variant; } diff --git a/packages/theming/sass/color/_types.scss b/packages/theming/sass/color/_types.scss index 14c672da..eef3729d 100644 --- a/packages/theming/sass/color/_types.scss +++ b/packages/theming/sass/color/_types.scss @@ -1,32 +1,65 @@ @use 'sass:map'; @use 'sass:list'; +@use 'config'; //// /// @package theming /// @group Palettes //// +/// The numeric shades every chromatic family generates. +/// @type List +/// @access public +$INumericShades: ('50', '100', '200', '300', '400', '500', '600', '700', '800', '900'); + +/// The accent shades a chromatic family adds on top of its numeric ones. +/// @type List +/// @access public +$IAccentShades: ('A100', 'A200', 'A400', 'A700'); + /// A list consisting of all generated gray shades /// @type Map /// @access public -$IGrayShades: ('50', '100', '200', '300', '400', '500', '600', '700', '800', '900', 'seed'); +/// @requires $INumericShades +$IGrayShades: list.join($INumericShades, ('seed')); /// A list consisting of all generated shades for palette colors /// @type Map /// @access public /// @requires $IGrayShades -$IColorShades: list.join($IGrayShades, ('A100', 'A200', 'A400', 'A700')); +/// @requires $IAccentShades +$IColorShades: list.join($IGrayShades, $IAccentShades); + +/// A background plus the layers that sit on it. A role with no room in its direction +/// resolves onto the background. Derived from `$surface-roles`, so configuring that +/// map is enough to add or drop a layer. +/// @type List +/// @access public +/// @requires $surface-roles +$ISurfaceRoles: list.join(('base'), list.join(map.keys(config.$surface-roles), ('container', 'seed'))); + +/// Every key a surface family can expose. Both generators emit the roles; `legacy` +/// additionally keeps the numeric shades it has always carried. `$IPaletteColors` +/// deliberately lists only the roles — those are what *every* palette has — so this is +/// for consumers that must cover a legacy palette's extras too. +/// @type List +/// @access public +/// @requires $ISurfaceRoles +/// @requires $INumericShades +/// @requires $IAccentShades +$ISurfaceShades: list.join($ISurfaceRoles, list.join($INumericShades, $IAccentShades)); /// All palette colors mapped with corresponding color shades /// @type Map /// @access public /// @requires $IColorShades /// @requires $IGrayShades +/// @requires $ISurfaceRoles $IPaletteColors: ( 'primary': $IColorShades, 'secondary': $IColorShades, 'gray': $IGrayShades, - 'surface': $IColorShades, + 'surface': $ISurfaceRoles, 'info': $IColorShades, 'success': $IColorShades, 'warn': $IColorShades, diff --git a/packages/theming/sass/color/presets/dark/_indigo.scss b/packages/theming/sass/color/presets/dark/_indigo.scss index 714a12bb..7dda5d14 100644 --- a/packages/theming/sass/color/presets/dark/_indigo.scss +++ b/packages/theming/sass/color/presets/dark/_indigo.scss @@ -8,7 +8,7 @@ //// $color-shades: types.$IColorShades; -$surface-shades: shades('surface', #1e1f24, $color-shades); +$surface-shades: shades('surface', #1e1f24, $color-shades, $generator: 'legacy'); /// Generates the dark indigo palette. /// @type Map diff --git a/packages/theming/sass/color/presets/light/_indigo.scss b/packages/theming/sass/color/presets/light/_indigo.scss index 6ea4fecf..426af95c 100644 --- a/packages/theming/sass/color/presets/light/_indigo.scss +++ b/packages/theming/sass/color/presets/light/_indigo.scss @@ -8,7 +8,7 @@ //// $color-shades: types.$IColorShades; -$surface-shades: shades('surface', #f8f8fa, $color-shades); +$surface-shades: shades('surface', #f8f8fa, $color-shades, $generator: 'legacy'); /// Generates the light indigo palette. /// @type Map diff --git a/packages/theming/sass/json/generators.scss b/packages/theming/sass/json/generators.scss index d24af732..6f2c6d65 100644 --- a/packages/theming/sass/json/generators.scss +++ b/packages/theming/sass/json/generators.scss @@ -22,6 +22,32 @@ palette { } } +/* +* @outputDir - /colors/meta +*/ +scales { + @each $name, $spec in $scales { + $range: map.get($spec, range); + $curve: map.get($spec, curve); + + > #{$name} { + --range: [#{list.nth($range, 1)}, #{list.nth($range, 2)}]; + --curve: [ + #{if( + $curve, + '#{list.nth($curve, 1)}, #{list.nth($curve, 2)}, #{list.nth($curve, 3)}, #{list.nth($curve, 4)}', + '' + )}]; + } + } +} + +family-scales { + @each $family, $name in $family-scales { + --#{$family}: #{$name}; + } +} + multipliers { @each $variant in ('color', 'grayscale') { $multipliers: meta.module-variables(multipliers); diff --git a/packages/theming/sass/tailwind/_mixins.scss b/packages/theming/sass/tailwind/_mixins.scss index 000794e0..8aa16910 100644 --- a/packages/theming/sass/tailwind/_mixins.scss +++ b/packages/theming/sass/tailwind/_mixins.scss @@ -7,7 +7,11 @@ $theme-schemas: () !default; @mixin generate-color-vars { - @each $colorName, $shades in $IPaletteColors { + // A `legacy` surface carries numeric shades on top of the roles every palette has, + // and this bridge is static, so it covers the union rather than picking a generator. + $families: map.set($IPaletteColors, 'surface', $ISurfaceShades); + + @each $colorName, $shades in $families { @each $shade in $shades { --color-#{$colorName}-#{$shade}: var(--ig-#{$colorName}-#{$shade}); --color-#{$colorName}-#{$shade}-contrast: var(--ig-#{$colorName}-#{$shade}-contrast); diff --git a/packages/theming/sass/themes/schemas/charts/light/_data-chart.scss b/packages/theming/sass/themes/schemas/charts/light/_data-chart.scss index c9e627e4..89ab16f7 100644 --- a/packages/theming/sass/themes/schemas/charts/light/_data-chart.scss +++ b/packages/theming/sass/themes/schemas/charts/light/_data-chart.scss @@ -28,7 +28,7 @@ $light-data-chart: ( /// @prop {List} marker-brushes [series] - Defines the palette from which automatically assigned marker brushes are selected. /// @prop {List} outlines [series] - Defines the palette from which automatically assigned series outline colors are selected. /// @prop {List} marker-outlines [series] - Defines the palette from which automatically assigned marker outlines are selected. -/// @prop {Color} plot-area-background [color: ('surface', 500)] - Sets the brush used as the background for the current Chart object's plot area. +/// @prop {Color} plot-area-background [color: ('surface', 'base')] - Sets the brush used as the background for the current Chart object's plot area. /// @prop {String} title-horizontal-alignment [null] - The horizontal alignment to use for the title. /// @prop {String} subtitle-horizontal-alignment [null] - The horizontal alignment to use for the subtitle. /// @prop {List} axis-label-margin [null] - Sets the margin (top, right, bottom, left) of labels on the both axes. @@ -74,7 +74,7 @@ $material-data-chart: extend( plot-area-background: ( color: ( 'surface', - 500, + 'base', ), ), title-horizontal-alignment: null, diff --git a/packages/theming/sass/themes/schemas/charts/light/_gauge.scss b/packages/theming/sass/themes/schemas/charts/light/_gauge.scss index 73048e8a..68a8ef02 100644 --- a/packages/theming/sass/themes/schemas/charts/light/_gauge.scss +++ b/packages/theming/sass/themes/schemas/charts/light/_gauge.scss @@ -35,13 +35,13 @@ $light-base-gauge: ( font-brush: ( contrast-color: ( 'surface', - 500, + 'base', ), ), minor-tick-brush: ( contrast-color: ( 'surface', - 500, + 'base', ), ), minor-tick-stroke-thickness: null, @@ -60,7 +60,7 @@ $light-base-gauge: ( tick-brush: ( contrast-color: ( 'surface', - 500, + 'base', ), ), tick-stroke-thickness: null, diff --git a/packages/theming/sass/themes/schemas/charts/light/_graph.scss b/packages/theming/sass/themes/schemas/charts/light/_graph.scss index d9186f09..24ac9977 100644 --- a/packages/theming/sass/themes/schemas/charts/light/_graph.scss +++ b/packages/theming/sass/themes/schemas/charts/light/_graph.scss @@ -53,13 +53,13 @@ $material-graph: extend( font-brush: ( contrast-color: ( 'surface', - 500, + 'base', ), ), minor-tick-brush: ( contrast-color: ( 'surface', - 500, + 'base', ), ), minor-tick-thickness: null, @@ -84,7 +84,7 @@ $material-graph: extend( tick-brush: ( contrast-color: ( 'surface', - 500, + 'base', ), ), tick-stroke-thickness: null, diff --git a/packages/theming/sass/themes/schemas/components/dark/_grid.scss b/packages/theming/sass/themes/schemas/components/dark/_grid.scss index 7cd2902c..80d2daf1 100644 --- a/packages/theming/sass/themes/schemas/components/dark/_grid.scss +++ b/packages/theming/sass/themes/schemas/components/dark/_grid.scss @@ -494,8 +494,8 @@ $dark-bootstrap-grid: extend( /// @prop {Map} expand-icon-hover-color [contrast-color: ('gray', 50)] - The grid row expand icon hover color. /// @prop {Map} active-expand-icon-color [contrast-color: ('gray', 50, .8)] - The drop area background on drop color. /// @prop {Map} drop-area-on-drop-background [color: ('gray', 100)] - The drop area background on drop color. -/// @prop {Map} header-background [color: ('surface', 500)] - The table header background color. -/// @prop {Map} content-background [color: ('surface', 500)] - The table body background color. +/// @prop {Map} header-background [color: ('surface', 'base')] - The table header background color. +/// @prop {Map} content-background [color: ('surface', 'base')] - The table body background color. /// @prop {Map} cell-editing-background [color: ('gray' 100)] - The background for the cell in editing mode. /// @prop {Map} cell-editing-foreground [contrast-color: ('gray', 50)] - The cell text color in edit mode /// @prop {Map} cell-edited-value-color [contrast-color: ('gray', 50)] - The color of cell edited value. @@ -518,7 +518,7 @@ $dark-indigo-grid: extend( content-background: ( color: ( 'surface', - 500, + 'base', ), ), @@ -763,7 +763,7 @@ $dark-indigo-grid: extend( header-background: ( color: ( 'surface', - 500, + 'base', ), ), diff --git a/packages/theming/sass/themes/schemas/components/light/_chat.scss b/packages/theming/sass/themes/schemas/components/light/_chat.scss index 00b1fb53..34bddf5b 100644 --- a/packages/theming/sass/themes/schemas/components/light/_chat.scss +++ b/packages/theming/sass/themes/schemas/components/light/_chat.scss @@ -9,9 +9,9 @@ /// Generates a light chat component schema. /// @type Map -/// @prop {Map} background [color: ('surface', 500)] - The background color of the chat component. -/// @prop {Map} header-background [color: ('surface', 500)] - The background color of the chat header. -/// @prop {Map} header-color [contrast-color: ('surface', 500)] - The text color of the chat header. +/// @prop {Map} background [color: ('surface', 'base')] - The background color of the chat component. +/// @prop {Map} header-background [color: ('surface', 'base')] - The background color of the chat header. +/// @prop {Map} header-color [contrast-color: ('surface', 'base')] - The text color of the chat header. /// @prop {Color} header-border [transparent] - The color used for the chat header border. /// @prop {Map} sent-message-background [color: ('gray', 200)] - The background color for sent messages. /// @prop {Map} sent-message-color [color: ('gray', 800)] - The text color for sent messages. @@ -32,19 +32,19 @@ $light-chat: ( background: ( color: ( 'surface', - 500, + 'base', ), ), header-background: ( color: ( 'surface', - 500, + 'base', ), ), header-color: ( contrast-color: ( 'surface', - 500, + 'base', ), ), header-border: ( diff --git a/packages/theming/sass/themes/schemas/components/light/_grid-excel-filtering.scss b/packages/theming/sass/themes/schemas/components/light/_grid-excel-filtering.scss index 225e38f7..80a29205 100644 --- a/packages/theming/sass/themes/schemas/components/light/_grid-excel-filtering.scss +++ b/packages/theming/sass/themes/schemas/components/light/_grid-excel-filtering.scss @@ -158,7 +158,7 @@ $bootstrap-excel-filtering: extend( /// Generates an indigo excel filtering schema. /// @prop {Map} background [contrast-color: ('gray', 900)] - The background contrast color for the excel filtering area. -/// @prop {Map} secondary-background [color: ('surface', 500)] - The secondary background color for the excel filtering area. +/// @prop {Map} secondary-background [color: ('surface', 'base')] - The secondary background color for the excel filtering area. /// @type Map /// @requires $light-excel-filtering $indigo-excel-filtering: extend( @@ -174,7 +174,7 @@ $indigo-excel-filtering: extend( secondary-background: ( color: ( 'surface', - 500, + 'base', ), ), diff --git a/packages/theming/sass/themes/schemas/components/light/_grid-toolbar.scss b/packages/theming/sass/themes/schemas/components/light/_grid-toolbar.scss index fc99c958..e22bf140 100644 --- a/packages/theming/sass/themes/schemas/components/light/_grid-toolbar.scss +++ b/packages/theming/sass/themes/schemas/components/light/_grid-toolbar.scss @@ -147,7 +147,7 @@ $bootstrap-grid-toolbar: extend( /// Generates an indigo grid-toolbar schema. /// @type Map -/// @prop {Color} background [color: ('surface', 500)] - The toolbar background color. +/// @prop {Color} background [color: ('surface', 'base')] - The toolbar background color. /// @prop {Map} border-color [color: ('gray', 400)] - The toolbar border-bottom color. /// @requires $light-grid-toolbar $indigo-grid-toolbar: extend( @@ -156,7 +156,7 @@ $indigo-grid-toolbar: extend( background: ( color: ( 'surface', - 500, + 'base', ), ), diff --git a/packages/theming/sass/themes/schemas/components/light/_grid.scss b/packages/theming/sass/themes/schemas/components/light/_grid.scss index 47d97d12..bcf275b1 100644 --- a/packages/theming/sass/themes/schemas/components/light/_grid.scss +++ b/packages/theming/sass/themes/schemas/components/light/_grid.scss @@ -79,7 +79,7 @@ /// @prop {Map} filtering-header-text-color [color: ('gray', 800)] - The text color of the filtered column header. /// @prop {Map} filtering-row-background [color: 'gray', 50)] - The background color of the filtering row. /// @prop {Map} filtering-row-text-color [color: ('gray', 800)] - The text color of the filtering row. -/// @prop {Map} filtering-dialog-background [color: ('surface', 500)] - The background color of the advanced filtering dialog. +/// @prop {Map} filtering-dialog-background [color: ('surface', 'base')] - The background color of the advanced filtering dialog. /// @prop {Map} excel-filtering-header-foreground [color: ('gray', 700)] - The text color of the header in the excel style filtering. /// @prop {Map} excel-filtering-subheader-foreground [color: ('gray', 700)] - The text color of the sorting and moving headers in the excel style filtering. /// @prop {Map} excel-filtering-actions-foreground [color: ('gray', 700)] - The text color of the excel style filtering options. @@ -605,7 +605,7 @@ $light-grid: extend( filtering-dialog-background: ( color: ( 'surface', - 500, + 'base', ), ), @@ -1243,7 +1243,7 @@ $bootstrap-grid: extend( /// @prop {Map} header-selected-text-color [color: 'gray', 900] - The table header text color when selected (ex. column selection). /// @prop {Map} header-border-color [color: ('gray', 400)] - The color used for header borders. /// @prop {Map} action-border-color [color: ('gray', 400)] - The color used for action borders. -/// @prop {Map} filtering-row-background [color: ('surface', 500)] - The background color of the filtering row. +/// @prop {Map} filtering-row-background [color: ('surface', 'base')] - The background color of the filtering row. /// @prop {Map} filtering-dialog-background [contrast-color: ('gray', 900)] - The background color of the advanced filtering dialog. /// @prop {Map} edited-row-indicator [color: ('primary', 400)] - The indicator's color of edited row. /// @prop {Map} cell-selected-background [color: ('primary', 50)] - The selected cell background color. @@ -1267,7 +1267,7 @@ $bootstrap-grid: extend( /// @prop {Map} edit-mode-color [color: ('primary', 400)] - The text color in edit mode. /// @prop {Map} drop-area-text-color [color: ('gray', 600)] - The drop area text color. /// @prop {Map} drop-area-icon-color [color: ('gray', 600)] - The drop area icon color. -/// @prop {Map} group-row-background [color: ('surface', 500)] - The grid group row background color. +/// @prop {Map} group-row-background [color: ('surface', 'base')] - The grid group row background color. /// @prop {Map} group-row-selected-background [color: ('gray', 100)] - The drop area background on drop color. /// @prop {Map} group-count-background [color: ('primary', 400)] - The grid group row cont badge background color. /// @prop {Map} group-count-text-color [contrast-color: ('primary', 900)] - The grid group row cont badge text color. @@ -1277,7 +1277,7 @@ $bootstrap-grid: extend( /// @prop {Map} cell-active-border-color [color: ('primary', 400)] - The active(focused) cell border color. /// @prop {Map} cell-editing-background [color: ('gray' 200)] - The background for the cell in editing mode. /// @prop {Map} row-selected-hover-text-color [color: ('gray', 900)] - The selected row hover text color. -/// @prop {Map} grouparea-background [color: ('surface', 500)] - The grid group area background color. +/// @prop {Map} grouparea-background [color: ('surface', 'base')] - The grid group area background color. /// @prop {Map} grouparea-color [color: ('gray', 500)] - The grid group area color. /// @prop {Map} drop-area-background [color: ('gray', 200)] - The drop area background color. /// @prop {Map} row-hover-text-color [color: ('gray', 900)] - The hover row text color. @@ -1371,7 +1371,7 @@ $indigo-grid: extend( filtering-row-background: ( color: ( 'surface', - 500, + 'base', ), ), @@ -1553,7 +1553,7 @@ $indigo-grid: extend( group-row-background: ( color: ( 'surface', - 500, + 'base', ), ), @@ -1619,7 +1619,7 @@ $indigo-grid: extend( grouparea-background: ( color: ( 'surface', - 500, + 'base', ), ), diff --git a/packages/theming/sass/themes/schemas/components/light/_navbar.scss b/packages/theming/sass/themes/schemas/components/light/_navbar.scss index eedcce23..ca4b2560 100644 --- a/packages/theming/sass/themes/schemas/components/light/_navbar.scss +++ b/packages/theming/sass/themes/schemas/components/light/_navbar.scss @@ -159,7 +159,7 @@ $bootstrap-navbar: extend( /// Generates an indigo navbar schema. /// @type Map -/// @prop {Map} background [color: ('surface', 500)] - The navbar background color. +/// @prop {Map} background [color: ('surface', 'base')] - The navbar background color. /// @prop {Map} text-color [color: ('gray', 800)] - The navbar text color. /// @prop {Map} idle-icon-color [color: ('gray', 600)] - The navbar idle icon color. /// @prop {Map} hover-icon-color [color: ('gray', 700)] - The navbar hover icon color. diff --git a/packages/theming/sass/themes/schemas/components/light/_pagination.scss b/packages/theming/sass/themes/schemas/components/light/_pagination.scss index a2f3c67f..8f8b5955 100644 --- a/packages/theming/sass/themes/schemas/components/light/_pagination.scss +++ b/packages/theming/sass/themes/schemas/components/light/_pagination.scss @@ -105,7 +105,7 @@ $bootstrap-pagination: extend( /// Generates an indigo pagination schema. /// @type Map -/// @prop {Map} background [color: ('surface', 500)] - The background color of the paging panel. +/// @prop {Map} background [color: ('surface', 'base')] - The background color of the paging panel. /// @prop {Map} border-color [color: ('gray', 400)] - The border color of the paging panel. /// @requires $light-pagination $indigo-pagination: extend( @@ -114,7 +114,7 @@ $indigo-pagination: extend( background: ( color: ( 'surface', - 500, + 'base', ), ), diff --git a/packages/theming/sass/themes/schemas/components/light/_query-builder.scss b/packages/theming/sass/themes/schemas/components/light/_query-builder.scss index c431230b..bc5bc548 100644 --- a/packages/theming/sass/themes/schemas/components/light/_query-builder.scss +++ b/packages/theming/sass/themes/schemas/components/light/_query-builder.scss @@ -11,8 +11,8 @@ /// Generates a base light query builder schema. /// @type Map -/// @prop {Map} background [color: ('surface', 500)] - The background color of the query builder. -/// @prop {Map} header-background [color: ('surface', 500)] - The background color of the query builder header. +/// @prop {Map} background [color: ('surface', 'base')] - The background color of the query builder. +/// @prop {Map} header-background [color: ('surface', 'base')] - The background color of the query builder header. /// @prop {Map} header-foreground [color: ('gray', 900)] - The foreground color of the query builder header. /// @prop {Color} header-border [transparent] - The border color of the query builder header. /// @prop {Map} label-foreground [color: ('gray', 700)] - The color for query builder labels "from" & "select". @@ -30,14 +30,14 @@ $light-query-builder: extend( background: ( color: ( 'surface', - 500, + 'base', ), ), header-background: ( color: ( 'surface', - 500, + 'base', ), ), diff --git a/packages/theming/sass/themes/schemas/components/light/_slider.scss b/packages/theming/sass/themes/schemas/components/light/_slider.scss index 5cf7869f..f982693c 100644 --- a/packages/theming/sass/themes/schemas/components/light/_slider.scss +++ b/packages/theming/sass/themes/schemas/components/light/_slider.scss @@ -170,12 +170,12 @@ $material-slider: extend( /// @type Map /// @prop {Map} track-color [color: ('gray', 800)] - The color of the track. /// @prop {Map} track-hover-color [color: ('primary', 500)] - The color of the track on hover. -/// @prop {Map} thumb-color [color: ('surface', 500)] - The color of the thumb. +/// @prop {Map} thumb-color [color: ('surface', 'base')] - The color of the thumb. /// @prop {Map} thumb-border-color [color: ('gray', 700)] - The thumb border color. /// @prop {Map} thumb-border-hover-color [color: ('gray', 700)] - The thumb border color when hovered. /// @prop {Map} thumb-border-focus-color [color: ('gray', 700)] - The thumb border color when focused. /// @prop {Map} thumb-focus-color [color: ('primary', 700)] - The focus outline color of the thumb. -/// @prop {Map} disabled-thumb-color [color: ('surface', 500)] - The thumb color when its disabled. +/// @prop {Map} disabled-thumb-color [color: ('surface', 'base')] - The thumb color when its disabled. /// @prop {Map} label-background-color [color: ('primary', 500)] - The background color of the bubble label. /// @prop {Map} base-track-color [color: ('gray', 600)] - The base background color of the track. /// @prop {Map} base-track-hover-color [color: ('gray', 600)] - The base background color of the track on hover. @@ -200,7 +200,7 @@ $fluent-slider: extend( thumb-color: ( color: ( 'surface', - 500, + 'base', ), ), thumb-border-color: ( @@ -230,7 +230,7 @@ $fluent-slider: extend( disabled-thumb-color: ( color: ( 'surface', - 500, + 'base', ), ), base-track-color: ( @@ -277,7 +277,7 @@ $fluent-slider: extend( /// @prop {Map} thumb-color [color: ('primary', 500)] - The color of the thumb. /// @prop {Map} thumb-border-color [color: ('primary', 500)] - The thumb border color. /// @prop {Map} thumb-border-hover-color [color: ('primary', 500)] - The thumb border color when hovered. -/// @prop {Map} thumb-border-focus-color [color: ('surface', 500)] - The thumb border color when focused. +/// @prop {Map} thumb-border-focus-color [color: ('surface', 'base')] - The thumb border color when focused. /// @prop {Map} thumb-focus-color [color: ('primary', 200)] - The focus outline color of the thumb. /// @prop {Map} disabled-thumb-color [color: ('gray', 400)] - The thumb color when its disabled. /// @prop {Map} disabled-base-track-color [color: ('gray', 200)] - The base background color of the track when is disabled. @@ -326,7 +326,7 @@ $bootstrap-slider: extend( thumb-border-focus-color: ( color: ( 'surface', - 500, + 'base', ), ), thumb-focus-color: ( diff --git a/packages/theming/sass/themes/schemas/components/light/_tile-manager.scss b/packages/theming/sass/themes/schemas/components/light/_tile-manager.scss index af60f683..bdf30b23 100644 --- a/packages/theming/sass/themes/schemas/components/light/_tile-manager.scss +++ b/packages/theming/sass/themes/schemas/components/light/_tile-manager.scss @@ -11,10 +11,10 @@ /// Generates a light base tile manager schema. /// @type Map /// @prop {Map} background [color: ('gray', 100)] - The background color of the tile manager component. -/// @prop {Map} tile-background [color: ('surface', 500)] - The background color of the tile component inside the tile manager. +/// @prop {Map} tile-background [color: ('surface', 'base')] - The background color of the tile component inside the tile manager. /// @prop {Map} title-color [color: ('gray', 900)] - The title color of the tile component. -/// @prop {Map} header-background [color: ('surface', 500)] - The background color of the tile header component. -/// @prop {Map} content-background [color: ('surface', 500)] - The background color of the tile component content. +/// @prop {Map} header-background [color: ('surface', 'base')] - The background color of the tile header component. +/// @prop {Map} content-background [color: ('surface', 'base')] - The background color of the tile component content. /// @prop {Map} content-color [color: ('gray', 700)] - The text color of the tile component content. /// @prop {Color} border-color [transparent] - The border color of the tile component. /// @prop {Map} hover-border-color [color: ('gray', 400)] - The border color of the tile component on hover. @@ -38,7 +38,7 @@ $light-tile-manager: extend( tile-background: ( color: ( 'surface', - 500, + 'base', ), ), @@ -52,14 +52,14 @@ $light-tile-manager: extend( header-background: ( color: ( 'surface', - 500, + 'base', ), ), content-background: ( color: ( 'surface', - 500, + 'base', ), ), @@ -207,7 +207,7 @@ $bootstrap-tile-manager: extend( /// Generates an indigo tile manager schema. /// @type Map -/// @prop {Map} background [color: ('surface', 500)] - The background color of the tile manager component. +/// @prop {Map} background [color: ('surface', 'base')] - The background color of the tile manager component. /// @prop {Map} tile-background [contrast-color: ('gray', 900)] - The background color of the tile component inside the tile manager. /// @prop {Map} title-color [color: ('gray', 800)] - The title color of the tile component. /// @prop {Map} header-background [contrast-color: ('gray', 900)] - The background color of the tile header component. @@ -224,7 +224,7 @@ $indigo-tile-manager: extend( background: ( color: ( 'surface', - 500, + 'base', ), ), diff --git a/packages/theming/schemas/index.mjs b/packages/theming/schemas/index.mjs index eeb8ea55..ce596786 100644 --- a/packages/theming/schemas/index.mjs +++ b/packages/theming/schemas/index.mjs @@ -33,6 +33,21 @@ export const PaletteMultipliersSchema = z.object({ export const PaletteMetaSchema = z.record(z.string(), z.array(z.string())); +/** + * A shade scale: the WCAG contrast `range` the family spans from shade 50 to 900, and the + * cubic-bezier `curve` that places each shade in it. An empty `curve` is the straight line. + */ +export const ShadeScalesSchema = z.record( + z.string(), + z.object({ + range: z.array(z.string()).length(2), + curve: z.array(z.string()), + }), +); + +/** Which scale each family uses by default. Unlisted families use `even`. */ +export const FamilyScalesSchema = z.record(z.string(), z.string()); + export const PalettesSchema = z.record( z.string(), z.object({ @@ -139,6 +154,14 @@ export const EXPORT_MAP = { exportName: "PaletteMeta", schema: PaletteMetaSchema, }, + "colors/meta/scales": { + exportName: "ShadeScales", + schema: ShadeScalesSchema, + }, + "colors/meta/family-scales": { + exportName: "FamilyScales", + schema: FamilyScalesSchema, + }, "colors/presets/palettes": { exportName: "Palettes", schema: PalettesSchema }, "colors/charts/brushes": { exportName: "ChartBrushes", diff --git a/packages/theming/tests/_color.spec.scss b/packages/theming/tests/_color.spec.scss index 9efb8503..94c0fb55 100644 --- a/packages/theming/tests/_color.spec.scss +++ b/packages/theming/tests/_color.spec.scss @@ -371,7 +371,7 @@ $_legacy-palette: palette( } } - @include describe('gamut-relative generator') { + @include describe('fitted generator') { $_numbered: ('50', '100', '200', '300', '400', '500', '600', '700', '800', '900'); @include it('keeps any two shades 500 apart at WCAG AA or better') { @@ -426,16 +426,6 @@ $_legacy-palette: palette( } } - @include it('leaves the surface family anchored on its seed') { - $p: palette( - $primary: #09f, - $secondary: #09f, - $surface: #fff, - ); - - @include assert-equal(color($p, surface, 500), #fff); - } - @include it('emits concrete colors, not runtime expressions') { $p: palette( $primary: #09f, @@ -448,7 +438,7 @@ $_legacy-palette: palette( } } - @include it('keeps the surface seed exactly on shade 500') { + @include it('keeps the surface seed on base, which is also its default variant') { @each $bg in (#fff, #fcfcfd, #1a1a24, #000) { $p: palette( $primary: #09f, @@ -456,42 +446,90 @@ $_legacy-palette: palette( $surface: $bg, ); - @include assert-equal(color($p, surface, 500), $bg); + @include assert-equal(color($p, surface, 'base'), $bg); + // surface has no numeric shades, so a bare reference lands on base + @include assert-equal(color($p, surface), $bg); + // every other family still defaults to 500 + @include assert-equal(color($p, primary), color($p, primary, 500)); } } - @include it('gives every surface a full set of distinct layers') { - // 500 is the background; the rest are layers on it, 50 the faintest - // through 900 the strongest. A white or black page has room on exactly - // one side, which is the side the whole scale uses. - @each $bg in (#fff, #000, #f8f8fa, #1a1a24) { - $p: palette( - $primary: #09f, - $secondary: #09f, - $surface: $bg, - ); - $seen: (); - $previous: 1; + @include it('moves surface layers away from the background, or collapses them onto it') { + // sunken goes toward black and raised/overlay toward white, so a page at + // either extreme resolves the roles it has no room for onto itself — + // elevation is carried by shadow there, the way light themes really work. + $white: palette( + $primary: #09f, + $secondary: #09f, + $surface: #fff, + ); + $black: palette( + $primary: #09f, + $secondary: #09f, + $surface: #000, + ); + $mid: palette( + $primary: #09f, + $secondary: #09f, + $surface: #1a1a24, + ); - @each $v in ('50', '100', '200', '300', '400', '600', '700', '800', '900') { - $c: color($p, surface, $v); - $away: contrast($c, $bg); + // white page: nothing lighter exists + @include assert-equal(color($white, surface, 'raised'), #fff); + @include assert-equal(color($white, surface, 'overlay'), #fff); + @include assert-true(contrast(color($white, surface, 'sunken'), #fff) > 1.04); + + // black page: nothing darker exists + @include assert-equal(color($black, surface, 'sunken'), #000); + @include assert-true(contrast(color($black, surface, 'raised'), #000) > 1.04); + @include assert-true(contrast(color($black, surface, 'overlay'), #000) > 1.1); + + // a page with room either side gets every role distinct, and overlay + // always sits further out than raised + @include assert-true( + contrast(color($mid, surface, 'overlay'), #1a1a24) > + contrast(color($mid, surface, 'raised'), #1a1a24) + ); + @include assert-unequal(color($mid, surface, 'sunken'), color($mid, surface, 'base')); + } - @include assert-true(list.index($seen, $c) == null); - @include assert-true($away > $previous); + @include it('keeps translucent containers translucent') { + $p: palette( + $primary: #09f, + $secondary: #09f, + $surface: #fff, + ); + $dark: palette( + $primary: #09f, + $secondary: #09f, + $surface: #1a1a24, + ); - $seen: list.append($seen, $c); - $previous: $away; - } - } + @include assert-equal(color($p, surface, 'container'), rgba(#000, 0.03)); + @include assert-equal(color($dark, surface, 'container'), rgba(#fff, 0.03)); } - @include it('accepts a ladder as a preset name, a curve, or a full spec') { + @include it('carries a tinted background through its layers') { + // A cool dark and a warm dark are a deliberate choice, and the tint sits + // well below the threshold that rounds a near-gray seed to neutral. + $p: palette( + $primary: #09f, + $secondary: #09f, + $surface: #1a1a24, + ); + $raised: color($p, surface, 'raised'); + + @include assert-true( + color.channel($raised, 'blue', $space: rgb) > color.channel($raised, 'red', $space: rgb) + 5 + ); + } + + @include it('accepts a scale as a preset name, a curve, or a full spec') { $carbon: palette( $primary: #09f, $secondary: #09f, $surface: #fff, - $ladders: ( + $scales: ( 'gray': 'carbon', ), ); @@ -499,7 +537,7 @@ $_legacy-palette: palette( $primary: #09f, $secondary: #09f, $surface: #fff, - $ladders: ( + $scales: ( 'gray': ( 0.53, 0, @@ -512,7 +550,7 @@ $_legacy-palette: palette( $primary: #09f, $secondary: #09f, $surface: #fff, - $ladders: ( + $scales: ( 'gray': ( range: ( 1.1, @@ -526,9 +564,9 @@ $_legacy-palette: palette( $primary: #09f, $secondary: #09f, $surface: #fff, - $ladders: 'tailwind', + $scales: 'tailwind', ); - $direct: shades('brand', #09f, $IColorShades, $ladder: 'carbon'); + $direct: shades('brand', #09f, $IColorShades, $scale: 'carbon'); // carbon reproduces IBM's published grayscale @include assert-true(contrast(color($carbon, gray, 50), #f4f4f4) < 1.02); @@ -543,9 +581,9 @@ $_legacy-palette: palette( @include assert-equal(meta.type-of(map.get($direct, '300-raw')), 'color'); } - @include it('ships the documented ladder presets') { - @each $name in ('even', 'material', 'tailwind', 'carbon', 'layers') { - @include assert-true(map.has-key($ladders, $name)); + @include it('ships the documented scale presets') { + @each $name in ('even', 'material', 'tailwind', 'carbon') { + @include assert-true(map.has-key($scales, $name)); } } @@ -555,7 +593,7 @@ $_legacy-palette: palette( $secondary: #09f, $surface: #fff, ); - // The eased ladder reproduces the original grayscale to within ~1 JND, + // The eased scale reproduces the original grayscale to within ~1 JND, // so existing schemas keep their intended weight. $expected: ( '100': #f5f5f5, @@ -625,6 +663,60 @@ $_legacy-palette: palette( } } + @include describe('surface roles across generators') { + $_light-fitted: palette($primary: #09f, $secondary: #09f, $surface: #f8f8fa); + $_light-legacy: palette( + $primary: #09f, + $secondary: #09f, + $surface: #f8f8fa, + $generator: 'legacy', + ); + + @include it('gives a legacy surface the same role vocabulary a fitted one has') { + // Roles are contrast steps off the background rather than points on a + // multiplier ramp, so they mean the same thing under either generator. + // That is what lets a component schema say ('surface', 'base') outright. + @each $role in $ISurfaceRoles { + @include assert-true(map.has-key($_light-fitted, 'surface', $role)); + @include assert-true(map.has-key($_light-legacy, 'surface', $role)); + @include assert-true(map.has-key($_light-legacy, 'surface', '#{$role}-raw')); + } + } + + @include it('keeps the numeric shades a legacy surface has always carried') { + @each $shade in $IColorShades { + @include assert-true(map.has-key($_light-legacy, 'surface', $shade)); + } + + // ...and a fitted surface deliberately has none of them + @include assert-false(map.has-key($_light-fitted, 'surface', '500')); + } + + @include it('resolves a bare surface reference under either generator') { + @include assert-equal(color($_light-fitted, 'surface'), color($_light-fitted, 'surface', 'base')); + @include assert-equal(color($_light-legacy, 'surface'), color($_light-legacy, 'surface', 'base')); + @include assert-equal(color($_light-legacy, 'surface', 'base'), #f8f8fa); + } + + @include it('derives $ISurfaceRoles from the $surface-roles config') { + // The two used to be maintained separately, so a role added to the public + // config was generated and then silently filtered back out. + @each $role, $spec in $surface-roles { + @include assert-true(list.index($ISurfaceRoles, $role) != null); + } + + @include assert-equal(list.length($ISurfaceRoles), list.length(map.keys($surface-roles)) + 3); + } + + @include it('covers both surface vocabularies in $ISurfaceShades') { + // The Tailwind bridge is static, so it has to name every key either + // generator can emit. + @each $key in list.join($ISurfaceRoles, $IColorShades) { + @include assert-true(list.index($ISurfaceShades, $key) != null); + } + } + } + @include it('should convert a color to a list of HSL values') { @include assert-equal(to-hsl(black), (0deg, 0%, 0%)); } diff --git a/packages/theming/tests/styles/_mocks.scss b/packages/theming/tests/styles/_mocks.scss index 40c4074b..685602a0 100644 --- a/packages/theming/tests/styles/_mocks.scss +++ b/packages/theming/tests/styles/_mocks.scss @@ -222,35 +222,17 @@ $handmade-palette: ( 'seed-contrast': white, ), 'surface': ( - '50': #fef7e2, - '50-contrast': black, - '100': #fdeab7, - '100-contrast': black, - '200': #fbdd89, - '200-contrast': black, - '300': #fad15c, - '300-contrast': black, - '400': #f9c63f, - '400-contrast': black, - '500': #f7bd32, - '500-contrast': white, - '600': #f6b02d, - '600-contrast': white, - '700': #f49e2a, - '700-contrast': white, - '800': #f38e28, - '800-contrast': white, - '900': #f38e28, - '900-contrast': white, - 'A100': #fbdd89, - 'A100-contrast': black, - 'A200': #f9c63f, - 'A200-contrast': black, - 'A400': #f6b02d, - 'A400-contrast': white, - 'A700': #f38e28, - 'A700-contrast': white, + 'base': #f7bd32, + 'base-contrast': black, + 'sunken': #eeb732, + 'sunken-contrast': black, + 'raised': #f9c657, + 'raised-contrast': black, + 'overlay': #fdd073, + 'overlay-contrast': black, + 'container': rgb(0 0 0 / 0.03), + 'container-contrast': black, 'seed': #f7bd32, 'seed-contrast': white, - ) + ), ); diff --git a/research/dynamic-shades/ramp-prototype.py b/research/dynamic-shades/ramp-prototype.py deleted file mode 100644 index 1abf300c..00000000 --- a/research/dynamic-shades/ramp-prototype.py +++ /dev/null @@ -1,188 +0,0 @@ -import math, json -from coloraide import Color - -# ---------- helpers ---------- -def oklch(c): - o = Color(c).convert('oklch') - L = o['lightness']; C = o['chroma']; h = o['hue'] - if h != h: h = 0.0 - return L, C, h - -def lum(c): - return Color(c).luminance() - -def wcag(a,b): - la, lb = lum(a), lum(b) - hi, lo = max(la,lb), min(la,lb) - return (hi+0.05)/(lo+0.05) - -def deltaEOKr2(c1,c2): - K1,K2 = 0.206,0.03; K3=(1+K1)/(1+K2) - def toe(x): return 0.5*(K3*x-K1+math.sqrt((K3*x-K1)**2+4*K2*K3*x)) - a1=Color(c1).convert('oklab'); a2=Color(c2).convert('oklab') - dL=toe(a1['lightness'])-toe(a2['lightness']) - da=2*(a1['a']-a2['a']); db=2*(a1['b']-a2['b']) - return math.sqrt(dL*dL+da*da+db*db) - -# ---------- sRGB cusp per hue (cached scan) ---------- -_cusp={} -def cusp(h): - key=round(h,1) - if key in _cusp: return _cusp[key] - best=(0,0) - L=0.02 - while L<=0.999: - # binary search max in-gamut chroma at (L,h) - lo,hi=0.0,0.45 - for _ in range(28): - mid=(lo+hi)/2 - if Color('oklch',[L,mid,h]).in_gamut('srgb', tolerance=0.0001): lo=mid - else: hi=mid - if lo>best[1]: best=(L,lo) - L+=0.005 - _cusp[key]=best - return best - -def ST(h): - Lc,Cc=cusp(h) - return Cc/Lc, Cc/(1-Lc), Lc, Cc - -def softmin(a,b,p): - if a<=0 or b<=0: return 0.0 - return (1/(1/a**p + 1/b**p))**(1/p) - -def cmax_curve(L,h,p=4,k=1.0): - S,T,_,_=ST(h) - return k*softmin(L*S,(1-L)*T,p) - -# ---------- lightness from target contrast vs surface ---------- -def L_for_contrast_vs_white(cr): - # Y such that 1.05/(Y+0.05) = cr - Y = 1.05/cr - 0.05 - return max(Y, 0.0) - -def oklabL_from_Y(Y): - # gray with that luminance - c = Color('xyz-d65', [Y*0.9505, Y, Y*1.089]) - return c.convert('oklch')['lightness'] - -# ---------- ramp ---------- -SHADES = ['50','100','200','300','400','500','600','700','800','900'] -K_CR = 0.304 # ln(4.5)/5 + buffer -> 5 index steps guarantee AA -OFFSET = 0.55 - -def contrast_ladder(): - return [math.exp(K_CR*(i+OFFSET)) for i in range(10)] - -# accent shades: vivid track, anchored at these contrast indices -ACCENTS = {'A100':1.4,'A200':2.6,'A400':4.2,'A700':6.2} - -def torsion_for(h, mode='stable'): - if mode=='none': return 0.0 - if mode=='gamut': - if 30<=h<=115: return 55.0 # warm: hue rises with L - if 195<=h<=285: return -22.0 # cool: hue falls with L - return 0.0 - return 0.0 - -def blue_correction(h,L): - if 255<=h<=295 and L>0.55: return 33.0*(L-0.55) - if (235<=h<255 or 3000.60: return 20.0*(L-0.60) - return 0.0 - -def envelope(t,a=0.30,q=2.5): - return 1 - a*abs(2*t-1)**q - -NEUTRAL_C = 0.02 # below this the seed carries no usable hue signal - -def solve_L(cr, h, s0, t, p, surface_Y=1.0, iters=4): - """Solve OKLab L so that the FINAL chromatic color hits the target contrast.""" - Y = (surface_Y+0.05)/cr - 0.05 - L = oklabL_from_Y(max(Y,0.0)) - for _ in range(iters): - hh = h - C = s0*envelope(t)*cmax_curve(L,hh,p) - c = Color('oklch',[L,C,hh]).fit('srgb', method='oklch-chroma') - got = (surface_Y+0.05)/(c.luminance()+0.05) - if abs(got-cr) < 0.005: break - L *= 1 + 0.55*(got-cr)/cr # chromatic colors are brighter -> raise contrast by lowering L - L = min(max(L,0.02),0.995) - return L - -def build(seed, surface='#fff', tors='stable', s_floor=0.30, p=4): - Ls,Cs,hs = oklch(seed) - neutral = Cs < NEUTRAL_C - Cm_seed = cmax_curve(Ls,hs,p) - s0 = min(1.0, Cs/Cm_seed) if Cm_seed>0 else 0 - s0 = 0.0 if neutral else max(s0, s_floor) - tau = torsion_for(hs,tors) - out={} - ladder = contrast_ladder() - n=len(ladder) - for i,(name,cr) in enumerate(zip(SHADES,ladder)): - t=i/(n-1) - L=solve_L(cr,hs,s0,t,p) - h = hs + tau*(L-Ls) + blue_correction(hs,L) - C = s0*envelope(t)*cmax_curve(L,h,p) - c = Color('oklch',[L,C,h]).fit('srgb', method='oklch-chroma') - out[name]=c.convert('srgb').to_string(hex=True) - for name,cr in ACCENTS.items(): - L=solve_L(cr,hs,(0.0 if neutral else 1.0),0.5,8) - h = hs + tau*(L-Ls) + blue_correction(hs,L) - C = (0.0 if neutral else 1.0)*cmax_curve(L,h,p=8) # vivid track: ride the hull - c = Color('oklch',[L,C,h]).fit('srgb', method='oklch-chroma') - out[name]=c.convert('srgb').to_string(hex=True) - # seed placement - Lstar=[oklch(out[s])[0] for s in SHADES] - i_star=min(range(n), key=lambda i: abs(Lstar[i]-Ls)) - return out, dict(seed_L=round(Ls,4), seed_C=round(Cs,4), seed_h=round(hs,2), - s0=round(s0,3), snaps_to=SHADES[i_star], tau=tau) - -# ---------- current HSL-multiplier approach, replicated ---------- -MS={'50':(1.23,1.78),'100':(0.8,1.66),'200':(0.64,1.43),'300':(0.73,1.19),'400':(0.875,1.08), - '500':(1,1),'600':(1.26,0.89),'700':(1.26,0.81),'800':(1.26,0.73),'900':(1.26,0.64), - 'A100':(1.23,1.34),'A200':(1.22,1.16),'A400':(1.23,0.91),'A700':(1.23,0.65)} -def build_current(seed): - c=Color(seed).convert('hsl') - H,S,L=c['hue'],c['saturation'],c['lightness'] - if H!=H: H=0 - out={} - for k,(sx,lx) in MS.items(): - out[k]=Color('hsl',[H,min(S*sx,1.0),min(L*lx,1.0)]).convert('srgb').to_string(hex=True) - return out - -def report(name, seed, tors='stable'): - new,meta=build(seed,tors=tors) - cur=build_current(seed) - print(f"\n{'='*78}\n{name} seed={seed} L={meta['seed_L']:.3f} C={meta['seed_C']:.3f} h={meta['seed_h']:.0f} s0={meta['s0']} snaps→{meta['snaps_to']}") - print(f"{'step':6} {'NEW hex':9} {'L':>5} {'C':>6} {'h':>6} {'CRw':>5} {'ΔE':>6} | {'CUR hex':9} {'CRw':>5} {'ΔE':>6}") - prevN=prevC=None - for s in SHADES: - Ln,Cn,hn=oklch(new[s]); crn=wcag(new[s],'#fff') - crc=wcag(cur[s],'#fff') - dn=deltaEOKr2(prevN,new[s]) if prevN else 0 - dc=deltaEOKr2(prevC,cur[s]) if prevC else 0 - print(f"{s:6} {new[s]:9} {Ln:5.3f} {Cn:6.4f} {hn:6.1f} {crn:5.2f} {dn:6.4f} | {cur[s]:9} {crc:5.2f} {dc:6.4f}") - prevN,prevC=new[s],cur[s] - def spread(hl): - hl=[h for h in hl] - best=360 - for ref in hl: - d=[((h-ref+180)%360)-180 for h in hl] - best=min(best,max(d)-min(d)) - return best - hs_n=[oklch(new[s])[2] for s in SHADES]; hs_c=[oklch(cur[s])[2] for s in SHADES] - print(f" hue spread NEW {spread(hs_n):5.1f}° CUR {spread(hs_c):5.1f}°") - dn=[deltaEOKr2(new[SHADES[i]],new[SHADES[i+1]]) for i in range(9)] - dc=[deltaEOKr2(cur[SHADES[i]],cur[SHADES[i+1]]) for i in range(9)] - print(f" min ΔEOKr2 NEW {min(dn):.4f} CUR {min(dc):.4f} (target ≥0.015)") - # AA guarantee check for 5-index gaps - bad=[(SHADES[i],SHADES[i+5],round(wcag(new[SHADES[i]],new[SHADES[i+5]]),2)) for i in range(5) if wcag(new[SHADES[i]],new[SHADES[i+5]])<4.5] - badc=[(SHADES[i],SHADES[i+5],round(wcag(cur[SHADES[i]],cur[SHADES[i+5]]),2)) for i in range(5) if wcag(cur[SHADES[i]],cur[SHADES[i+5]])<4.5] - print(f" 5-step AA failures NEW {bad or 'none'} CUR {badc or 'none'}") - print(f" accents " + " ".join(f"{k}={new[k]}" for k in ACCENTS)) - -for nm,sd in [("ignite primary","#0099ff"),("ignite secondary","#df1b74"),("warn","#faa419"), - ("success","#4eb862"),("near-white seed","#ffe9b0"),("near-black seed","#141225"), - ("neon green","#00ff00"),("washed-out mauve","#a99bb0"),("near-gray","#8a8a8a")]: - report(nm,sd) diff --git a/research/dynamic-shades/ramp-prototype.scss b/research/dynamic-shades/ramp-prototype.scss deleted file mode 100644 index 1138c165..00000000 --- a/research/dynamic-shades/ramp-prototype.scss +++ /dev/null @@ -1,251 +0,0 @@ -// --------------------------------------------------------------------------- -// Dynamic color shades — prototype -// Verified against Dart Sass 1.92.1 (the version pinned in this repo). -// -// Two kinds of family: -// chromatic-ramp() primary, secondary, info, success, warn, error -// anchored to WHITE. Identical in light and dark themes. -// neutral-ramp() gray (and surface) -// anchored to the SURFACE, so it flips with the theme. -// --------------------------------------------------------------------------- -@use 'sass:color'; -@use 'sass:math'; -@use 'sass:map'; -@use 'sass:list'; - -// --- tunables --------------------------------------------------------------- -$K: 0.304; // ln(4.5)/5 + buffer → any two shades 500 apart clear AA -$OFFSET: 0.55; // shifts the whole ladder; 0.55 puts 50 at CR 1.18 -$NEUTRAL-C: 0.02; // below this chroma the seed carries no usable hue -$S-FLOOR: 0.30; // a muted seed still gets a usable amount of color -$ENV-DEPTH: 0.30; // how much the ends of the ramp are tapered -$ENV-POWER: 2.5; -$P-SOFT: 4; // chroma ceiling for the numbered track (inside the gamut) -$P-HULL: 8; // chroma ceiling for the A track (on the gamut hull) - -$SHADES: '50' '100' '200' '300' '400' '500' '600' '700' '800' '900'; -$ACCENTS: ( - 'A100': 1.4, - 'A200': 2.6, - 'A400': 4.2, - 'A700': 6.2, -); - -// --- 1. how much chroma can sRGB hold at this lightness and hue? ------------- -@function _in-gamut($l, $c, $h) { - @return color.is-in-gamut(color.change(oklch(0.5 0 0), $lightness: $l, $chroma: $c, $hue: $h), srgb); -} - -@function _max-chroma($l, $h) { - $lo: 0; - $hi: 0.45; - $i: 0; - - @while $i < 18 { - $mid: math.div($lo + $hi, 2); - - @if _in-gamut($l, $mid, $h) { - $lo: $mid; - } @else { - $hi: $mid; - } - - $i: $i + 1; - } - - @return $lo; -} - -// --- 2. the peak of that curve: the hue's "cusp" ----------------------------- -@function cusp($h) { - $bl: 0; - $bc: 0; - $l: 0.04; - - @while $l < 1 { - $c: _max-chroma($l, $h); - - @if $c > $bc { - $bc: $c; - $bl: $l; - } - - $l: $l + 0.02; - } - - // refine around the coarse winner - $l: math.max(0.02, $bl - 0.02); - $end: math.min(0.99, $bl + 0.02); - - @while $l <= $end { - $c: _max-chroma($l, $h); - - @if $c > $bc { - $bc: $c; - $bl: $l; - } - - $l: $l + 0.004; - } - - @return (l: $bl, c: $bc); -} - -// The cusp expressed as the two slopes of a tent. Compute once per family. -@function tent($h) { - $k: cusp($h); - $lc: map.get($k, l); - $cc: map.get($k, c); - - @return (math.div($cc, $lc), math.div($cc, 1 - $lc)); -} - -// --- 3. the tent, with its corner rounded off -------------------------------- -@function _softmin($a, $b, $p) { - @if $a <= 0 or $b <= 0 { - @return 0; - } - - @return math.pow(math.div(1, math.div(1, math.pow($a, $p)) + math.div(1, math.pow($b, $p))), math.div(1, $p)); -} - -@function chroma-ceiling($l, $tent, $p: $P-SOFT) { - @return _softmin($l * list.nth($tent, 1), (1 - $l) * list.nth($tent, 2), $p); -} - -// --- 3b. reading a seed -------------------------------------------------- -// color.channel() hands back UNITS: lightness as `70.8%`, hue as `314.6deg`. -// Everything below expects plain numbers, so normalize on the way in. -@function _seed($c) { - $ok: color.to-space($c, oklch); - - @return ( - l: math.div(color.channel($ok, 'lightness', $space: oklch), 100%), - c: color.channel($ok, 'chroma', $space: oklch), - h: math.div(color.channel($ok, 'hue', $space: oklch), 1deg) - ); -} - -// --- 4. WCAG luminance ------------------------------------------------------ -// NOTE: the library already ships `luminance()` and `_lcv()` — use those. -@function _lcv($v) { - @return if($v < 0.03928, math.div($v, 12.92), math.pow(math.div($v + 0.055, 1.055), 2.4)); -} - -@function luminance($c) { - $r: _lcv(math.div(color.channel($c, 'red', $space: rgb), 255)); - $g: _lcv(math.div(color.channel($c, 'green', $space: rgb), 255)); - $b: _lcv(math.div(color.channel($c, 'blue', $space: rgb), 255)); - - @return 0.2126 * $r + 0.7152 * $g + 0.0722 * $b; -} - -// --- 5. the taper across the ramp ------------------------------------------- -@function envelope($t) { - @return 1 - $ENV-DEPTH * math.pow(math.abs(2 * $t - 1), $ENV-POWER); -} - -// --- 6. hue: hold it, except in the blue-violet corner ---------------------- -@function _hue-at($h, $l) { - @if $h >= 255 and $h <= 295 and $l > 0.55 { - @return $h + 33 * ($l - 0.55); - } - - @if (($h >= 235 and $h < 255) or ($h > 300 and $h <= 355)) and $l > 0.6 { - @return $h + 20 * ($l - 0.6); - } - - @return $h; -} - -// --- 7. solve one shade ------------------------------------------------------ -// $anchor-y luminance of the color the contrast is measured against -// $lighter true when the shade must be LIGHTER than the anchor (dark themes) -@function solve-shade($h, $tent, $s0, $t, $target-cr, $anchor-y: 1, $lighter: false, $p: $P-SOFT) { - $l: if($lighter, 0.5, 0.5); - $i: 0; - $col: null; - - @while $i < 12 { - $hh: _hue-at($h, $l); - $c: $s0 * envelope($t) * chroma-ceiling($l, $tent, $p); - $col: color.to-gamut(color.change(oklch(0.5 0 0), $lightness: $l, $chroma: $c, $hue: $hh), srgb, local-minde); - $y: luminance($col); - $got: if($lighter, math.div($y + 0.05, $anchor-y + 0.05), math.div($anchor-y + 0.05, $y + 0.05)); - - @if math.abs($got - $target-cr) < 0.01 { - @return $col; - } - - $err: math.div($got - $target-cr, $target-cr); - $l: math.clamp(0.02, $l * (1 + if($lighter, -0.55, 0.55) * $err), 0.995); - $i: $i + 1; - } - - @return $col; -} - -@function _cr($i) { - @return math.pow(math.$e, $K * ($i + $OFFSET)); -} - -// --- 8. chromatic families: primary, secondary, info, success, warn, error --- -// Anchored to white. The SAME values in every theme — schemas pick which shade -// to use per theme; the scale itself does not move. -@function chromatic-ramp($seed) { - $s: _seed($seed); - $hs: map.get($s, h); - $ls: map.get($s, l); - $cs: map.get($s, c); - $tent: tent($hs); - $s0: if($cs < $NEUTRAL-C, 0, math.clamp($S-FLOOR, math.div($cs, chroma-ceiling($ls, $tent)), 1)); - $vivid: if($cs < $NEUTRAL-C, 0, 1); - $out: (); - $i: 0; - - // numbered track — the seed's own saturation level - @each $name in $SHADES { - $out: map.set($out, $name, solve-shade($hs, $tent, $s0, math.div($i, 9), _cr($i))); - $i: $i + 1; - } - - // A track — same ladder shape, but riding the gamut hull - @each $name, $cr in $ACCENTS { - $out: map.set($out, $name, solve-shade($hs, $tent, $vivid, 0.5, $cr, $p: $P-HULL)); - } - - @return map.set($out, 'seed', $seed); -} - -// --- 9. neutral family: gray (and surface) ---------------------------------- -// Anchored to the SURFACE, so 50 is always the shade nearest the background and -// 900 the shade furthest from it — in both light and dark themes. -@function neutral-ramp($seed, $surface) { - $sy: luminance($surface); - $lighter: $sy <= 0.5; // dark surface → the ramp climbs toward white - $h: 0; - $tent: (0.0001, 0.0001); - $s0: 0; - - @if $seed { - $s: _seed($seed); - $cs: map.get($s, c); - - @if $cs >= $NEUTRAL-C { - $h: map.get($s, h); - $tent: tent($h); - // grays take a whisper of the seed's hue, never its full saturation - $s0: math.min(0.12, math.div($cs, chroma-ceiling(map.get($s, l), $tent))); - } - } - - $out: (); - $i: 0; - - @each $name in $SHADES { - $out: map.set($out, $name, solve-shade($h, $tent, $s0, math.div($i, 9), _cr($i), $sy, $lighter)); - $i: $i + 1; - } - - @return map.set($out, 'seed', if($seed, $seed, if($lighter, #fff, #000))); -} diff --git a/vitest.config.ts b/vitest.config.ts index eb73860b..375de0cc 100644 --- a/vitest.config.ts +++ b/vitest.config.ts @@ -5,6 +5,7 @@ export default defineConfig({ projects: [ 'packages/theming', 'packages/mcp', + 'packages/preview', ], }, }); From 733b39fbaa6c68c46eb9c2c215456b0c054a725e Mon Sep 17 00:00:00 2001 From: Simeon Simeonoff Date: Thu, 17 Sep 2026 15:44:42 +0300 Subject: [PATCH 3/3] refactor(preview): rebuild the preview as a sectioned demo app Replace the single-page shade comparison with an application that grows one section per pillar of the theming system. Sections and their views register in a registry the shell reads; views load as they near the viewport, and a pinned control bar drives every view in a section from one selection. Data comes from build-time providers that compile the library's own Sass and cache the result against their inputs. The color section ships three: the shipped presets regenerated from their recorded seeds, a 1080-seed hue sweep through both generators, and a contrast-target lookup table that makes range and curve editable live. Color section views: shades (legacy against fitted, any two shades measurable against each other), neutrals (surface roles in use, grayscale anchored to the page), scales (range and curve editor with the AA ladder) and sweep (verdicts per ramp plus the sRGB cross-section at the seed hue). Shared code lives in pure modules with their own tests: color math, scale math, ramp decoding, the preset view model and the Sass snippet builder. The curve editor and gamut plot are standalone elements. Styles run on a type and spacing scale with logical properties, hold up at phone widths, and follow a data-theme override as well as the system scheme. Adds happy-dom for DOM tests and a typecheck script wired into lint. Includes the openspec change and specs for sections, data providers and the color demos. --- .../.openspec.yaml | 2 + .../blog-draft.md | 135 +++ .../2026-09-17-preview-app-sections/design.md | 241 ++++ .../proposal.md | 49 + .../specs/preview-color-demos/spec.md | 217 ++++ .../specs/preview-data-providers/spec.md | 80 ++ .../specs/preview-sections/spec.md | 190 +++ .../2026-09-17-preview-app-sections/tasks.md | 124 ++ openspec/specs/preview-color-demos/spec.md | 221 ++++ openspec/specs/preview-data-providers/spec.md | 84 ++ openspec/specs/preview-sections/spec.md | 194 +++ package-lock.json | 235 ++++ packages/preview/index.html | 61 +- packages/preview/package.json | 9 +- packages/preview/src/color.spec.ts | 153 ++- packages/preview/src/color.ts | 208 +++- packages/preview/src/data/cache.spec.ts | 91 ++ packages/preview/src/data/cache.ts | 85 ++ packages/preview/src/data/color/index.ts | 8 + packages/preview/src/data/color/presets.ts | 156 +++ packages/preview/src/data/color/sass-util.ts | 75 ++ .../preview/src/data/color/scales.spec.ts | 145 +++ packages/preview/src/data/color/scales.ts | 237 ++++ packages/preview/src/data/color/sweep.spec.ts | 86 ++ packages/preview/src/data/color/sweep.ts | 186 +++ packages/preview/src/data/plugin.ts | 35 + packages/preview/src/data/provider.ts | 19 + packages/preview/src/data/registry.ts | 30 + packages/preview/src/define.ts | 11 + packages/preview/src/elements/code-block.ts | 142 +++ packages/preview/src/elements/curve-editor.ts | 274 +++++ packages/preview/src/elements/gamut-plot.ts | 267 +++++ packages/preview/src/elements/ignite.ts | 60 + packages/preview/src/elements/index.ts | 10 + .../src/elements/palette-scope.spec.ts | 34 + .../preview/src/elements/palette-scope.ts | 38 + packages/preview/src/elements/verdict.ts | 55 + packages/preview/src/html.ts | 35 - packages/preview/src/main.ts | 1 + packages/preview/src/model.ts | 319 ----- packages/preview/src/palettes.ts | 140 --- packages/preview/src/plugin.ts | 64 - packages/preview/src/preset-model.spec.ts | 133 +++ packages/preview/src/preset-model.ts | 250 ++++ packages/preview/src/ramp.spec.ts | 91 ++ packages/preview/src/ramp.ts | 53 + packages/preview/src/render.ts | 114 -- packages/preview/src/sass-code.spec.ts | 112 ++ packages/preview/src/sass-code.ts | 102 ++ packages/preview/src/scale-math.spec.ts | 95 ++ packages/preview/src/scale-math.ts | 127 ++ .../preview/src/sections/color/controls.ts | 76 ++ .../preview/src/sections/color/grade.spec.ts | 61 + packages/preview/src/sections/color/grade.ts | 41 + packages/preview/src/sections/color/index.ts | 46 + packages/preview/src/sections/color/model.ts | 20 + .../preview/src/sections/color/neutrals.ts | 115 ++ packages/preview/src/sections/color/scales.ts | 397 +++++++ packages/preview/src/sections/color/shades.ts | 77 ++ .../preview/src/sections/color/state.spec.ts | 80 ++ packages/preview/src/sections/color/state.ts | 109 ++ packages/preview/src/sections/color/strip.ts | 178 +++ packages/preview/src/sections/color/sweep.ts | 185 +++ packages/preview/src/sections/index.spec.ts | 25 + packages/preview/src/sections/index.ts | 14 + packages/preview/src/sections/types.ts | 30 + packages/preview/src/shell/shell.ts | 238 ++++ packages/preview/src/shell/theme.scss | 93 ++ packages/preview/src/styles.scss | 1046 +++++++++++++---- packages/preview/src/variants.ts | 60 + packages/preview/src/vite-env.d.ts | 16 + packages/preview/vite.config.ts | 4 +- 72 files changed, 7829 insertions(+), 965 deletions(-) create mode 100644 openspec/changes/archive/2026-09-17-preview-app-sections/.openspec.yaml create mode 100644 openspec/changes/archive/2026-09-17-preview-app-sections/blog-draft.md create mode 100644 openspec/changes/archive/2026-09-17-preview-app-sections/design.md create mode 100644 openspec/changes/archive/2026-09-17-preview-app-sections/proposal.md create mode 100644 openspec/changes/archive/2026-09-17-preview-app-sections/specs/preview-color-demos/spec.md create mode 100644 openspec/changes/archive/2026-09-17-preview-app-sections/specs/preview-data-providers/spec.md create mode 100644 openspec/changes/archive/2026-09-17-preview-app-sections/specs/preview-sections/spec.md create mode 100644 openspec/changes/archive/2026-09-17-preview-app-sections/tasks.md create mode 100644 openspec/specs/preview-color-demos/spec.md create mode 100644 openspec/specs/preview-data-providers/spec.md create mode 100644 openspec/specs/preview-sections/spec.md create mode 100644 packages/preview/src/data/cache.spec.ts create mode 100644 packages/preview/src/data/cache.ts create mode 100644 packages/preview/src/data/color/index.ts create mode 100644 packages/preview/src/data/color/presets.ts create mode 100644 packages/preview/src/data/color/sass-util.ts create mode 100644 packages/preview/src/data/color/scales.spec.ts create mode 100644 packages/preview/src/data/color/scales.ts create mode 100644 packages/preview/src/data/color/sweep.spec.ts create mode 100644 packages/preview/src/data/color/sweep.ts create mode 100644 packages/preview/src/data/plugin.ts create mode 100644 packages/preview/src/data/provider.ts create mode 100644 packages/preview/src/data/registry.ts create mode 100644 packages/preview/src/define.ts create mode 100644 packages/preview/src/elements/code-block.ts create mode 100644 packages/preview/src/elements/curve-editor.ts create mode 100644 packages/preview/src/elements/gamut-plot.ts create mode 100644 packages/preview/src/elements/ignite.ts create mode 100644 packages/preview/src/elements/index.ts create mode 100644 packages/preview/src/elements/palette-scope.spec.ts create mode 100644 packages/preview/src/elements/palette-scope.ts create mode 100644 packages/preview/src/elements/verdict.ts delete mode 100644 packages/preview/src/html.ts create mode 100644 packages/preview/src/main.ts delete mode 100644 packages/preview/src/model.ts delete mode 100644 packages/preview/src/palettes.ts delete mode 100644 packages/preview/src/plugin.ts create mode 100644 packages/preview/src/preset-model.spec.ts create mode 100644 packages/preview/src/preset-model.ts create mode 100644 packages/preview/src/ramp.spec.ts create mode 100644 packages/preview/src/ramp.ts delete mode 100644 packages/preview/src/render.ts create mode 100644 packages/preview/src/sass-code.spec.ts create mode 100644 packages/preview/src/sass-code.ts create mode 100644 packages/preview/src/scale-math.spec.ts create mode 100644 packages/preview/src/scale-math.ts create mode 100644 packages/preview/src/sections/color/controls.ts create mode 100644 packages/preview/src/sections/color/grade.spec.ts create mode 100644 packages/preview/src/sections/color/grade.ts create mode 100644 packages/preview/src/sections/color/index.ts create mode 100644 packages/preview/src/sections/color/model.ts create mode 100644 packages/preview/src/sections/color/neutrals.ts create mode 100644 packages/preview/src/sections/color/scales.ts create mode 100644 packages/preview/src/sections/color/shades.ts create mode 100644 packages/preview/src/sections/color/state.spec.ts create mode 100644 packages/preview/src/sections/color/state.ts create mode 100644 packages/preview/src/sections/color/strip.ts create mode 100644 packages/preview/src/sections/color/sweep.ts create mode 100644 packages/preview/src/sections/index.spec.ts create mode 100644 packages/preview/src/sections/index.ts create mode 100644 packages/preview/src/sections/types.ts create mode 100644 packages/preview/src/shell/shell.ts create mode 100644 packages/preview/src/shell/theme.scss create mode 100644 packages/preview/src/variants.ts create mode 100644 packages/preview/src/vite-env.d.ts diff --git a/openspec/changes/archive/2026-09-17-preview-app-sections/.openspec.yaml b/openspec/changes/archive/2026-09-17-preview-app-sections/.openspec.yaml new file mode 100644 index 00000000..f0807784 --- /dev/null +++ b/openspec/changes/archive/2026-09-17-preview-app-sections/.openspec.yaml @@ -0,0 +1,2 @@ +schema: spec-driven +created: 2026-09-16 diff --git a/openspec/changes/archive/2026-09-17-preview-app-sections/blog-draft.md b/openspec/changes/archive/2026-09-17-preview-app-sections/blog-draft.md new file mode 100644 index 00000000..f1f526fa --- /dev/null +++ b/openspec/changes/archive/2026-09-17-preview-app-sections/blog-draft.md @@ -0,0 +1,135 @@ +# Ten shades, one seed, and a guarantee + +*Draft. The `` elements are the live demos — each one is a custom element from the preview bundle, and everything it shows is computed in the page, not a screenshot.* + +--- + +Here is an uncomfortable fact about the palette Ignite UI has shipped for years. + +Take its light Material theme. Take any of its colour families — primary, secondary, info, success, warn, error. Take shade 50 and shade 500, or 100 and 600, or any pair five steps apart. Check the contrast. + +All thirty pairs fail WCAG AA. + +Not *some*. Thirty of thirty. And Bootstrap and Fluent, built the same way, fail thirty of thirty too. If you have ever put shade 100 behind shade 600 and assumed the numbers were doing some work for you, they were not. + +We rebuilt the shade generator. The new one fails none of them — not on these palettes, and not on the 1,080 seeds we threw at it. This post is about how, and more importantly about how you can check rather than believe. Every demo below runs the real thing. + +## Pick a palette and look + + + +Three counters at the top, all computed live from the shades on screen: + +- **AA pairs that fail.** Any two shades 500 apart. Zero now, thirty before. +- **Duplicate shades.** Two tokens resolving to the same colour, so a border quietly vanishes into its fill. +- **Shades outside sRGB.** Colours no display can show, which the browser clips back to something it can — twenty of Material's sixty, fifteen of Bootstrap's and Fluent's. + +Both sides start from exactly the same seeds. We read them out of the shipped palette rather than retyping them, so the comparison has nowhere to hide. + +## Why a multiplier table cannot work + +The old generator did what most of them do: take the seed in HSL, multiply saturation and lightness by a fixed table, ten entries in, ten entries out. It is simple, it is fast, and it is wrong for a reason worth understanding. + +sRGB is not a box. It is a lumpy solid, and its shape changes with hue. The widest point of a hue — its **cusp**, where that hue holds the most colour before the display gives up — moves enormously as you go around the wheel. Across the spectrum the cusp varies by **more than twofold in chroma** and about **twofold in lightness**, and it never sits at either end of the lightness axis. + +So a multiplier that produces a pleasant ramp for blue produces a washed-out one for yellow and an impossible one for magenta. "Impossible" is literal: the generator asks for a colour outside sRGB, and the browser clips it. Two shades that asked to be different land on the same clipped edge and become the same colour. + +The new generator inverts the problem. Instead of multiplying the seed and hoping, it decides **what contrast each shade should have** and then finds the colour that hits it — working in OKLCH, cutting against the actual gamut boundary for that specific hue, and tapering chroma toward both ends so 50 reads as a tint and 900 as a near-neutral rather than as mud. + +The guarantee falls out of the construction: any two shades 500 apart clear AA, because the contrast targets were chosen so they would. + +## The receipts + + + +Drag the hue slider. That is 360 hues at three saturations — **1,080 seeds**, both generators, every ramp precomputed so you can sweep it in real time. + +The totals: + +| | legacy | fitted | +|---|---|---| +| AA pairs that fail | 5,182 of 5,400 | **0** | +| Seeds with a clean ramp | 0 of 1,080 | **1,080** | +| Shades outside sRGB | 1,800 of 10,800 | **0** | + +Zero seeds out of 1,080 produce a fully clean ramp under the old generator. Not a bad average — *none*. + +One honest note on that gamut figure, because it is easy to overstate: all 1,800 clipped shades come from the 85%-saturation row. At 60% and 35% there are none. Clipping is a saturated-seed problem, not a universal one. The AA failures are universal. + +The panel underneath is a slice through sRGB at whatever hue you have selected. The lit region is every colour that hue can produce; the hollow rings are shades the old table asked for and could not have, with a leader to where they actually landed. Sweep the hue and watch the region change shape — that changing shape is the whole argument against a fixed table, drawn. + +## Surface was never a ramp + +The old palette gave `surface` ten numbered shades, exactly like a colour family. It is not a colour family. It is the page, plus the layers that sit on it. + +On a white page that fell apart completely. Material's light surface ramp has **five duplicate shades** and fails **all five** AA pairs — because a generator asked to make ten distinct steps away from `#ffffff` simply runs out of room and returns white, repeatedly. + +Surface now has five named roles instead: `base`, `sunken`, `raised`, `overlay`, `container`. A role says what it is for, which means a component can ask for the right one rather than guessing that 200 is probably a card. And when a role has nowhere to go — `raised` on a pure-white page — it resolves onto the background deliberately, and the elevation shadow carries the depth instead of a colour difference that was never going to be visible. + + + +The mock on the left is built entirely from those roles, text included. Switch the theme and watch it hold together in both. + +The grayscale below it changed too: it is anchored to the page rather than to white, so shade 50 always sits nearest the background whichever theme you are in. No more inverting your mental model between light and dark. + +## The knobs + +Here is the part that actually differentiates this from a generator you cannot argue with. + +A **scale** decides where the ten shades sit between the lightest and the darkest. It has two parts: + +- **`range`** — the contrast of shade 50 and shade 900. `1.182` to `18.232` by default, measured against the anchor. +- **`curve`** — an optional cubic-bezier that redistributes the steps in between. No curve means evenly spaced by contrast. + +That is it. Two numbers and four control points, and they are yours. + + + +Four scales ship. `even` is the default and gives maximum separation. `material` reproduces the rhythm our grayscale has always had. `tailwind` matches Tailwind v4's slate, `carbon` matches IBM Carbon's gray 10–100 — both included because "make our palette feel like theirs" is a real request and a scale is the honest way to answer it. + +Drag the two handles on the chart and watch the ramp below redraw. Bunch the light end and watch the guarantee ladder go red as pairs drop under 4.5:1. That is the trade a scale makes, made visible. + +Two things this demo will tell you that a marketing page would not: + +**The default gray scale knowingly costs you two pairs.** Select `material` and the record reads 3 of 5. The gray family defaults to that scale because the familiar rhythm was worth more to us than two pairs on a family that is mostly used for text and borders. It is a choice, it is documented, and `even` undoes it in one line. + +**The guarantee is conditional on the range being reachable.** Switch the subject to a neutral on a dark page and push the range to its maximum. It fails — not because the generator broke, but because white on a `#222` page tops out around 15.6:1 and you asked for 18.2:1. The demo reports each subject's ceiling for exactly this reason. A guarantee that quietly degraded instead of telling you would be worse than no guarantee. + +## What you write + +```scss +$palette: palette( + $primary: #0099ff, + $secondary: #df1b74, + $gray: #000000, + $surface: #ffffff +); +``` + +Same call, same seeds, better shades. If you want a different rhythm: + +```scss +$palette: palette( + $primary: #0099ff, + $surface: #ffffff, + $scales: ('gray': 'carbon') +); +``` + +Or hand it a range and a curve directly: + +```scss +$scales: ('primary': (range: 1.1 14, curve: 0.5 0 0.8 0.8)) +``` + +**One migration note, stated plainly.** Surface no longer emits ten numbered shades, and components that still reference `--ig-surface-500` will need either the named roles or an alias onto `base`. That is the one breaking edge in this change, and it is the price of surface finally meaning something. + +## Why the demos and not screenshots + +Every number in this post is computed in your browser, from the same Sass that ships. The contrast ratios are measured, not asserted. The gamut cross-section is the real boundary for the hue you selected. The failing pairs go red because they failed, not because a designer coloured them red. + +We think that is the right way to make a claim about colour. If we have got something wrong, the demo above will show you before we do. + +--- + +*`igniteui-theming` is open source. The preview app these demos come from lives in the repository, and every figure here is covered by a test.* diff --git a/openspec/changes/archive/2026-09-17-preview-app-sections/design.md b/openspec/changes/archive/2026-09-17-preview-app-sections/design.md new file mode 100644 index 00000000..03697fcc --- /dev/null +++ b/openspec/changes/archive/2026-09-17-preview-app-sections/design.md @@ -0,0 +1,241 @@ +## Context + +`packages/preview` is 1,272 lines with two devDependencies and no client JavaScript. Its page is generated at build time by a Vite plugin that fills placeholders in `index.html` with markup built from compiled palettes. That is a good shape for a report and the wrong shape for everything we now want the package to do. + +The constraint that drives most of the decisions below: **the generator lives in Sass and only in Sass.** Shades cannot be computed in the browser. Anything interactive has to be served from data compiled at build time, which makes the data layer the load-bearing piece rather than the rendering layer. + +## Goals / Non-Goals + +**Goals:** + +- One application that teaches the framework by letting someone operate it, not a gallery of separate pages +- Adding a pillar costs a folder and a registry entry, never a shell edit +- Every demo looks and behaves like part of one product, because the shared pieces make consistency the path of least resistance +- Regressions in the claims the app makes fail the test suite, not the reader's attention +- Demos remain embeddable outside this app — in the sassdoc output, a marketing page, or a sandbox + +**Non-Goals:** + +- Porting the shade generator to TypeScript. The lookup strategy in Decision 8 removes the need, and a second implementation of the algorithm would be a correctness liability +- Implementing the typography, elevations, sizing, spacing or roundness sections. This change establishes the structure that will hold them +- Publishing this package or any component from it +- Server-side rendering or hydration. The app is a local and internal tool + +## Decisions + +### 1) Lit as the rendering layer + +Adopt `lit` for demos and the shell. + +Rationale: the package acquires a client runtime for the first time here, so the question is not whether to leave vanilla but what the new runtime should be. Lit is already the org's component technology (`igniteui-webcomponents`), so it is existing team knowledge. Its output is custom elements, which makes a demo portable into the sassdoc site or any other page without build coupling — that portability is what allows the demos to be reused rather than reimplemented. + +Alternatives considered: + +- **Imperative DOM with a tagged-template helper**: this is what the prototypes used. It works at this size, but its full-rebuild pattern (`replaceChildren()` on every state change) destroys DOM identity, which already produced two defects during prototyping: a pointer capture lost when an SVG re-rendered mid-drag, and keyboard focus needing manual restoration after each update. Both are the class of problem a diffing renderer removes. +- **React or Svelte**: neither offers anything Lit does not for this use, and both are unfamiliar in this repository. + +### 2) Composition over inheritance: the frame belongs to the shell + +A demo is a custom element with no base class and no required methods. The shell renders the surrounding frame — title and the one-line statement of what the demo teaches — from the registry metadata it already holds. Recurring behaviour is offered as elements a demo may use: `` for generated Sass with its copy control, `` for a pass/fail readout, `` for applying a compiled palette. + +Rationale: an earlier draft of this design fixed a four-part anatomy — controls, stage, verdict, generated Sass — in an abstract base class. That anatomy was generalised from three demos of a single pillar, and color is the pillar least like the others. Contrast is objectively measurable, so a verdict is natural there; a type scale's quality signals are line length and minimum size, which are guidelines rather than thresholds, and elevation's real question is whether one level reads as above another, which is perceptual. Sizing, spacing and roundness are multipliers whose stage is a real component being resized and which have no honest number at all. A contract that presumes a verdict, or presumes that a stage is a visualisation rather than a specimen, would have to be worked around by the second pillar to arrive. + +Moving the frame into the shell also keeps demos portable. A demo placed in the documentation site or a post should not carry this application's chrome with it, which a base class rendering that chrome would force it to do. + +Alternatives considered: + +- **A base class with optional hooks**: still presumes a rendering shape, and still couples every demo to the application it happens to live in. +- **No shared elements at all**: consistency degrades and each pillar reinvents the copy affordance and the palette scope. + +Trade-off: consistency across pillars becomes a convention upheld in review rather than a constraint enforced by the type system. For an application with a small number of authors that is the cheaper error — an inconsistent demo is a review comment, whereas a wrong abstraction spread across six pillars is a migration. + +### 3) Build-time data providers behind virtual modules + +A provider declares an id, the Sass paths that invalidate it, and a build function. A Vite plugin registers them and serves each as `virtual:data/`. + +```ts +interface DataProvider { + id: string; + deps: string[]; + build(): Promise; +} +``` + +Rationale: every pillar needs Sass compiled to JSON, and without a shared contract each will grow its own script — which is exactly how `previewShades.mjs` became unmaintainable. One mechanism, declared dependencies, uniform loading. + +### 4) On-disk caching keyed on inputs + +Provider output is cached under the package's build directory, keyed on a hash of its `deps` contents plus the provider module's own source. + +Rationale: the color scale tables take roughly 40 seconds of Sass to compile. Uncached, that lands on every `npm run preview`. Hashing the provider source as well as its inputs means editing the provider invalidates its own cache, which a naive mtime check would miss. CI is unaffected either way, since it never builds this package. + +### 5) Per-demo lazy loading of both code and data + +Sections are code-split, and a demo's data module is dynamically imported when the demo first renders. + +Rationale: the color tables are roughly 300 KB. Someone reading about spacing should not download them. This is nearly free to set up now and awkward to retrofit once several pillars exist. + +### 6) The static report becomes a demo; its assertions become tests + +The generator comparison is ported to ``. The AA-pair, duplicate-shade and out-of-gamut counts it displayed are asserted in the vitest project instead. + +Rationale: the page's regression value was always conditional on someone looking at it. Assertions belong where they fail the build. What remains — seeing thirty palettes side by side — is a legitimate demo, so the visuals stay and the checking moves. + +### 7) Hash routing, no router dependency + +`#/color/scales` selects section and demo. Unknown routes fall back to the first section. + +Rationale: deep links make demos citable from the docs and from a post. A hash router for a flat two-level structure is a few lines; a routing library is not warranted. + +### 8) Lookup tables generated through a degenerate range + +For the scale editor, `shades()` is compiled at N contrast targets using a `range` whose endpoints are equal. Every shade then solves to the same contrast while keeping its own position-dependent chroma taper, producing an exact `(position, target) -> color` table the editor reads. + +Rationale: a shade's color depends only on its position and its contrast target, so the table is complete in structure; sampling makes it approximate only in resolution. Across every subject and all four shipped presets, 78% of shades match the generator bit for bit, 99% are within one step per channel and none is more than two — far below a perceptible difference, and asserted in `scales.spec.ts` so it cannot drift unnoticed. This is what makes live `range` and `curve` manipulation possible without a second implementation of the generator. + +Alternatives considered: + +- **Port the generator to TypeScript**: enables arbitrary seeds entered at runtime, at the cost of two implementations that must be kept in agreement. Deferred until a feature actually requires it. +- **Bake only the four presets**: no editor, and the knobs stay abstract. + +### 9) The sweep covers hue and saturation, not hue alone + +Seeds are `hsl(h, s%, 50%)` at three saturations rather than one. + +Rationale: a hue-only sweep tests a single slice of seed space, and the obvious objection to any result from it is that maximally saturated seeds are unrepresentative. Widening the grid answers that before it is raised, and the answer is not uniform: the AA result holds everywhere — no seed at any of the three saturations clears all five pairs under `legacy`, against every seed clearing them under `fitted` — while the out-of-gamut result turns out to be specific to saturated seeds, appearing at 85% and not at all at 60% or 35%. Reporting both accurately is worth more than a larger headline. + +Known gap: the grid fixes lightness at 50%, so near-white and near-black seeds are not represented, and those are exactly where duplicate shades come from. The generator comparison covers that end with named seeds. Neither view should be presented as exhaustive on its own. + +### 10) App chrome styled from the library's own neutrals + +The shell takes its surface, text and line colors from the `gray` family and surface roles the library generates. + +Rationale: dogfooding, and a constraint rather than a preference — chrome carrying its own hue would contaminate how a reader perceives the swatches under test. The gray family is both the honest demonstration and the correct neutral. Demo content applies its scoped palettes through a wrapper element rather than ancestor classes, so a demo stays self-contained when embedded elsewhere. Custom properties inherit through shadow boundaries, so `var(--ig-*)` resolves inside components without further work. + +### 11) The build is served, not opened + +Code splitting produces several chunks, so the output is no longer a single file that works from `file://`. `npm run preview` runs the dev server and `vite preview` serves a build. + +Rationale: the previous report was a single self-contained page precisely so it could be emailed and double-clicked. An application with lazily loaded sections cannot be that, and should not pretend to be. What is lost is a convenience the report had; what is gained is that a reader never downloads a pillar they did not open. + +### 12) A palette travels with the markup that uses it + +`` sets one scope's `--ig-*` declarations on itself rather than the document carrying a stylesheet of scoped rules. It is a plain custom element with no render method, so the children written by whoever used it survive. + +Rationale: a demo that depends on a stylesheet another part of the app injected only works inside that app, which defeats the portability the whole composition approach is for. Setting the properties on the element means the palette is part of the markup, and custom properties inherit through shadow boundaries, so children resolve them wherever the element is mounted. + +It also removed a duplicate: the provider had been carrying both the stylesheet text and the same declarations parsed per scope. Dropping the stylesheet took the color chunk from 197 KB back to 111 KB. + +### 13) Every SVG fragment uses Lit's `svg` tag + +Any template inserted inside an `` is built with `svg` rather than `html`. + +Rationale: Lit parses each template independently, and `html` parses in the HTML namespace. A nested `html` fragment holding `` or `` therefore produces HTML elements with those names, which render nothing and cannot take focus. The failure is quiet — the markup is present, the selectors match, and the plot is simply empty — so it is worth stating as a rule rather than rediscovering. + +### 14) Straight-line curve handles sit at the identity control points + +When `curve` is null the editor still shows two handles, placed at 1/3 and 2/3. + +Rationale: a cubic bezier with control points at 1/3 and 2/3 reduces exactly to `t`, so the handles can be visible and grabbable while the scale is still a straight line, and the ramp does not shift when they appear. Rendering handles only once a preset had been chosen left the editor with nothing to drag on first load. + +### 15) A section is one page, with its controls pinned + +A section renders all of its views stacked on a single page, under a sticky bar holding the controls they share. The in-section nav scrolls rather than swaps. + +Rationale: tabs implied the views were independent subjects, and the seed picker had to be repeated in each one. Once the whole section reads one selection, tabs actively hide the payoff — the reader changes a palette and cannot see the other three views respond. Stacking costs nothing at load: an `IntersectionObserver` imports each view as it nears the viewport, so the code-splitting from Decision 5 still holds, and the first paint still carries one view's chunk. + +### 16) Section state lives in a controller, not in the shell + +The color section owns a small store and a `ReactiveController` over it. The shell knows only that a section may declare a persistent controls element; it never reads or writes what that element controls. + +Rationale: the pillars will not agree on what "the controls" are — typography has no seed, elevations have no theme — so a state shape in the shell would be a color-shaped shape imposed on everything else. A controller also makes a view independent of where it is mounted, which keeps Decision 2's promise that a view is a plain custom element. The selection is mirrored into the hash as a query string so a link carries it, using `replaceState` rather than assignment: it is a selection, not a navigation, and a `hashchange` would send the shell scrolling. + +### 17) The demos' seeds are the shipped palettes, read out of the library + +Every seed on the page comes from `$--palette`, read at build time rather than transcribed, and the fitted side is regenerated from exactly those seeds. The scale editor derives its subjects the same way, deduplicated by `(family, seed, surface)`. + +Rationale: a comparison between generators is only honest if both start from the same input, and a reader trusts a palette they recognise more than nine seeds chosen to make a point. Reading the seeds also means the page cannot drift from the library: change a preset's seed and the demo changes with it. The earlier `color.palettes` provider, with its hand-picked adversarial seeds, is retired — the hue sweep already covers the adversarial case across 1080 seeds, and with far better standing. + +### 18) Sass color keywords are normalised where they are emitted + +A provider that interpolates a resolved color emits it through a helper that rewrites a legacy-rgb color as `rgba(...)`, leaving every other value alone. + +Rationale: Sass serialises a color to its shortest form, so a shade that happens to equal `#ffffff` interpolates as `white` and the Node-side parser throws. Teaching the parser 148 color keywords would put a table in the browser bundle to work around a serialisation detail. The one value that must not be rewritten is a legacy `hsl()`: its saturation routinely exceeds 100%, and asking for its red channel would both fail and discard the out-of-gamut position the sweep exists to show. + +### 19) The app's own controls are the library's components + +The pickers, the range controls and the action buttons are `igc-button-group`, `igc-toggle-button`, `igc-slider` and `igc-button` from `igniteui-webcomponents`, themed by the palette `shell/theme.scss` puts on `:root`. + +Rationale: an app that exists to show off a theming framework should be built from the components that framework themes. It is also a live check that the fitted generator produces a usable theme for real components rather than only for swatches — the shipped CSS reads `--ig-*` at runtime, so no rebuild of the component library is involved and what paints the controls is this branch's generator. + +What the token audit found, per component's compiled CSS: + +| component | palette families it reads | usable under a fitted palette | +| --- | --- | --- | +| `igc-button` | none — typography and sizing only | anywhere | +| `igc-button-group` | `gray`, `primary` | yes | +| `igc-slider` | `gray`, `primary`, `secondary`, `surface` | needs numbered surface tokens | +| `igc-color-picker` | `gray`, `primary`, `error`, `surface` | needs numbered surface tokens | + +Two consequences. The controls sit outside every ``, so they take the document theme and a demo scope cannot repaint them — the same reason `chrome()` resolves to concrete colors. And `--ig-surface-500`, which the shipped components reference 488 times, no longer exists under the fitted generator, which is Decision 20. + +Trade-offs: the package's `exports` map publishes only `.`, `./themes/*.css` and `./extras`, so there is no subpath to import four components from and the whole library comes with them — about 59 KB gzipped, loaded with the section's controls. And the components are compiled against the theming version pinned at their publish time, so their *structure* is a release behind this branch even though their *colors* are current. + +### 20) Numbered surface tokens are aliased onto the named roles + +`theme.scss` emits `--ig-surface-50` through `--ig-surface-900`, all resolving to `surface.base`. + +Rationale: the fitted generator replaced the numbered surface ramp with five named roles, and `igc-slider` — like every shipped component — still asks for `--ig-surface-500`. Aliasing every numbered token to `base` is the model rather than a fudge: under the fitted generator the page is one color, and depth is carried by the roles and the elevation shadow, which is what the Neutrals view says in prose. The library has the same decision to make for real consumers, and this is the concrete proposal. + +### 21) The segmented control is themed to the chrome neutrals + +`igc-button-group` is given the chrome's own colors through its public `--ig-button-group-item-*` tokens. + +Rationale: at its defaults the group paints itself in `primary`, and a blue control pinned above the swatches under test changes how those swatches read — the objection Decision 10 already makes about chrome carrying a hue of its own. Overriding published tokens is still using the component as a consumer would, so the dogfooding claim survives. The one action button keeps its `primary` tint, because it is the only control on the page that does something rather than selecting something. + +### 22) The hue slider stays bespoke + +Sweep's hue control remains a native `input[type=range]`. + +Rationale: its track is the hue wheel. `igc-slider` publishes only flat `--ig-slider-*-color` tokens with no hook for a gradient, so adopting it would mean overriding shadow parts to draw the one thing that makes the control legible — more coupling than the bespoke input costs. Everything else about it, including keyboard operation, already works. + +### 23) The component family is `indigo`, chosen independently of the palette + +`configureTheme('indigo', variant)` in `elements/ignite.ts`, with `shell/theme.scss` taking `indigo` for its typography and elevation presets. + +Rationale: family and palette are separate axes and the app is better for showing that. The family decides the components' structure — their density, shapes and the type and elevation scales they assume — while the colors still come from this branch's generator, so switching it changes how the controls are built without touching what the views are about. Both sides name the same family so a component never assumes a type scale the document does not emit. + +The variant is taken from `prefers-color-scheme`, not from the section's theme picker. They mean different things: the picker chooses which shipped palette the views render, while the variant is the scheme the reader's own chrome is drawn in. Conflating them would repaint the page every time someone compared a light palette against a dark one. + +Two visible consequences, both left alone on purpose: the controls are denser than under `material` (28px against 38px), and they stopped being uppercased, because uppercasing was Material's button convention rather than anything this app asked for. Overriding either would be reintroducing a bespoke control through the back door. + +### 24) The curve chart's canvas follows the handle bound, not the plot + +The viewBox is derived from how far a control point may be pulled — `PY(1 + OVER) - PAD` to `PY(-OVER) + PAD` — rather than from the plotted range. + +Rationale: overshoot is the interesting part of a curve, since it is what bunches one end, so the bound is deliberately generous at ±0.4 beyond the range. But the canvas used to stop at the plot, which meant a handle pulled past it was drawn outside the viewBox: still live, still holding its value, and with nothing on screen left to grab it by. Deriving one from the other makes that unrepresentable rather than merely fixed. The cost is vertical headroom that sits empty while the curve is tame, and a dashed line closes the range so that space reads as overshoot rather than padding. + +The handles also carry a transparent target wider than their mark and are painted after the shade dots. Ten dots sit on the same curve, and a handle that had drifted under one was both invisible and unhittable. + +### 25) The shades are a contrast probe, not a scoreboard + +Clicking a shade pins its *number*. Every numbered strip on the page then measures its own shades against its own shade of that number, reporting the ratio and the best WCAG grade it earns. The score tiles, the per-row readout and the failing-pair dots that preceded this are all gone. + +Rationale: each of those answered a question the library has rather than one a reader has. "Do any two shades 500 apart miss AA" is the generator's internal promise; a developer asks "can I put 600 on 100", about an arbitrary pair. The dots were also, by construction, only ever going to appear on `legacy` — permanently empty on the row people would actually build from, which made them evidence dressed as a tool. + +Pinning the number rather than the swatch is what makes it an argument. Pin `100` and the two rows answer at once: `legacy` says 2.3:1 and fails, `fitted` says 4.5:1 and clears. That is the guarantee, performed by the reader in two clicks instead of asserted by a badge. Accent rows are untouched, since their keys are their own. + +The pin is section state, not per-view, because it is one key space: a reader who pins 100 has asked the same question of every strip that has a 100. It stays out of the hash — a palette is a selection worth linking to, an inspection is not. + +Mechanics worth recording. The swatches are native ` - Shade generators + Ignite UI Theming + + -
-

Shade Generators

-

- Every scope on this page emits a real palette through the palette() mixin. - Swatch fills come from --ig-{family}-{shade} and every label color from - --ig-{family}-{shade}-contrast, so what you see is what a consumer receives. - Pairs are stacked with the same shade in the same column: legacy on top, - fitted below. -

- -
- -

Color ramps

-

- The guarantee: any two shades 500 apart clear WCAG AA. It holds by construction under - fitted, and by accident — or not at all — under legacy. -

-

- The number under each shade is its WCAG contrast against white. Hover a swatch for - its token name and resolved value. -

- - -

Surface

-

- Surface stopped being a ramp. It is a background plus named layers, and the mock on the - left is built entirely from them, text included. -

-

- Contrast here is measured against the page, not against white — 1.0:1 means - the shade is the page. -

- - -

Grayscale

-

- Anchored to the background, so shade 50 always sits nearest it — in either theme. - The default material scale reproduces the original grayscale to within about - one JND. -

-

Contrast here is measured against the page.

- - -

Scale flavors

-

- The same generator with a different rhythm. Each curve was fitted to the published scale - it names; pass one with $scales: ('gray': 'carbon'). -

- - -
- Generated by packages/preview. The palettes bundled with the library stay on - the legacy generator, so shipped themes are unchanged. -
-
+ + diff --git a/packages/preview/package.json b/packages/preview/package.json index 7713c101..dfc007f7 100644 --- a/packages/preview/package.json +++ b/packages/preview/package.json @@ -2,15 +2,20 @@ "name": "@igniteui-theming/preview", "private": true, "version": "0.0.0", - "description": "Visual comparison of the shade generators.", + "description": "Interactive demos of the theming system, one section per pillar, built from the library itself.", "type": "module", "scripts": { "dev": "vite", "build": "vite build", "preview": "vite preview", - "lint": "stylelint ./src/**/*.scss" + "test": "vitest run", + "typecheck": "tsc -p tsconfig.json", + "lint": "stylelint \"./src/**/*.scss\" && npm run typecheck" }, "devDependencies": { + "happy-dom": "^20.14.5", + "igniteui-webcomponents": "^7.3.2", + "lit": "^3.2.1", "sass-embedded": "~1.92.1", "stylelint": "^17.5.0", "stylelint-config-standard-scss": "^17.0.0" diff --git a/packages/preview/src/color.spec.ts b/packages/preview/src/color.spec.ts index 04b18868..b8f10f67 100644 --- a/packages/preview/src/color.spec.ts +++ b/packages/preview/src/color.spec.ts @@ -1,5 +1,22 @@ import { describe, expect, it } from "vitest"; -import { composite, contrast, hex, parse } from "./color.js"; +import { + composite, + contrast, + displayable, + failingPairs, + gamutCusp, + hex, + inSrgb, + maxChroma, + oklchToLinear, + parse, + parseRaw, + type Rgb, + readableOn, + rgbToOklch, + shadePairs, + toRgb, +} from "./color.js"; describe("parse", () => { it("reads the literals Sass emits", () => { @@ -24,19 +41,36 @@ describe("parse", () => { it("rejects anything it cannot resolve", () => { expect(() => parse("var(--ig-primary-500)")).toThrow(/unsupported/); }); + + it("drops alpha for callers that only measure", () => { + expect(toRgb("rgba(1, 2, 3, 0.5)")).toEqual([1, 2, 3]); + }); +}); + +describe("parseRaw", () => { + it("keeps a request the display cannot satisfy", () => { + // The legacy generator asks for this when it multiplies a near-white seed. + const [r, g, b] = parseRaw("hsl(0, 0%, 174%)"); + expect(r).toBeGreaterThan(255); + expect(g).toBeGreaterThan(255); + expect(b).toBeGreaterThan(255); + expect(displayable([r, g, b])).toBe(false); + }); + + it("agrees with parse when the color is reachable", () => { + expect(parseRaw("rgb(226, 237, 251)")).toEqual(parse("rgb(226, 237, 251)")); + }); }); describe("composite", () => { it("flattens a translucent color onto its background", () => { - expect(composite([255, 255, 255, 0.03], [26, 26, 36, 1])).toEqual([ + expect(composite([255, 255, 255, 0.03], [26, 26, 36])).toEqual([ 33, 33, 43, ]); }); it("leaves an opaque color alone", () => { - expect(composite([12, 34, 56, 1], [255, 255, 255, 1])).toEqual([ - 12, 34, 56, - ]); + expect(composite([12, 34, 56, 1], [255, 255, 255])).toEqual([12, 34, 56]); }); }); @@ -55,8 +89,117 @@ describe("contrast", () => { }); }); +describe("shade pairs", () => { + const gray = (v: number): Rgb => [v, v, v]; + /** White to black in ten even steps: every pair five apart clears AA comfortably. */ + const wide = Array.from({ length: 10 }, (_, i) => + gray(Math.round(255 - (i * 255) / 9)), + ); + /** Ten grays between 200 and 100: nothing five apart reaches 4.5:1. */ + const narrow = Array.from({ length: 10 }, (_, i) => + gray(Math.round(200 - (i * 100) / 9)), + ); + + it("pairs each shade with the one five steps darker", () => { + expect(shadePairs(wide).map((p) => [p.i, p.j])).toEqual([ + [0, 5], + [1, 6], + [2, 7], + [3, 8], + [4, 9], + ]); + }); + + it("counts the pairs under AA", () => { + expect(failingPairs(wide)).toBe(0); + expect(failingPairs(narrow)).toBe(5); + // Five whites over three blacks and two light grays: only the last two pairs fail. + const mixed = [ + ...Array(5).fill(gray(255)), + ...Array(3).fill(gray(0)), + gray(200), + gray(200), + ]; + expect(failingPairs(mixed)).toBe(2); + }); +}); + +describe("readableOn", () => { + it("picks the ink that contrasts more with the color itself", () => { + expect(readableOn([255, 255, 255])).toBe("#111"); + expect(readableOn([0, 0, 0])).toBe("#fff"); + expect(readableOn([0, 153, 255])).toBe("#111"); + }); +}); + describe("hex", () => { it("pads single-digit channels", () => { expect(hex([0, 9, 255])).toBe("#0009ff"); }); }); + +describe("OKLCH", () => { + it("round-trips a mid-tone", () => { + const [L, C, h] = rgbToOklch([9, 109, 183]); + const linear = oklchToLinear(L, C, h); + const back = linear.map((v) => + Math.round( + 255 * (v <= 0.0031308 ? 12.92 * v : 1.055 * v ** (1 / 2.4) - 0.055), + ), + ); + expect(back).toEqual([9, 109, 183]); + }); + + it("reports black and white as achromatic", () => { + expect(rgbToOklch([0, 0, 0])[1]).toBeCloseTo(0, 6); + expect(rgbToOklch([255, 255, 255])[1]).toBeCloseTo(0, 6); + expect(rgbToOklch([255, 255, 255])[0]).toBeCloseTo(1, 3); + }); + + it("places sRGB blue near its documented position", () => { + const [L, C] = rgbToOklch([0, 0, 255]); + expect(L).toBeCloseTo(0.452, 2); + expect(C).toBeCloseTo(0.313, 2); + }); +}); + +describe("maxChroma", () => { + it("collapses to near zero at white", () => { + expect(maxChroma(1, 250)).toBeLessThan(0.005); + }); + + it("stays inside the gamut and is maximal there", () => { + const hue = 250; + const L = 0.6; + const c = maxChroma(L, hue); + expect(c).toBeGreaterThan(0.1); + expect(inSrgb(oklchToLinear(L, c, hue))).toBe(true); + expect(inSrgb(oklchToLinear(L, c + 0.01, hue))).toBe(false); + }); + + it("does not bulge at the dark end", () => { + // A tolerance applied to linear channels rather than encoded ones admits chroma + // around 0.12 at near-black, which would widen the bottom of the gamut solid. + expect(maxChroma(0.001, 250)).toBeLessThan(0.06); + }); +}); + +describe("the gamut cusp across hue", () => { + const peaks = Array.from({ length: 72 }, (_, i) => gamutCusp(i * 5)); + const span = (values: number[]) => Math.max(...values) / Math.min(...values); + + it("varies more than twofold in chroma, which is why one multiplier table cannot serve every hue", () => { + expect(span(peaks.map((p) => p.C))).toBeGreaterThan(2); + }); + + it("varies about twofold in lightness", () => { + expect(span(peaks.map((p) => p.L))).toBeGreaterThan(1.9); + }); + + it("never peaks at an extreme of the lightness axis", () => { + for (const peak of peaks) { + expect(peak.L).toBeGreaterThan(0.3); + expect(peak.L).toBeLessThan(0.99); + } + }); +}); diff --git a/packages/preview/src/color.ts b/packages/preview/src/color.ts index 869ead3a..6513de39 100644 --- a/packages/preview/src/color.ts +++ b/packages/preview/src/color.ts @@ -1,8 +1,14 @@ -/** Color math shared by the build. Pure functions over sRGB tuples. */ +/** Color math shared by the build and the views. Pure functions over sRGB tuples. */ export type Rgb = [number, number, number]; export type Rgba = [number, number, number, number]; +/** WCAG AA for normal text. Every "pair" claim in the app is measured against it. */ +export const AA = 4.5; + +/** Shades this far apart in a ten-step ramp are the pairs the generator guarantees. */ +export const PAIR_DISTANCE = 5; + const clamp = (v: number) => Math.min(255, Math.max(0, v)); const alpha = (value: string | undefined) => @@ -13,24 +19,25 @@ const alpha = (value: string | undefined) => * out-of-range values the legacy generator produces (`calc(s * 1.26)`), so the channels * can land outside sRGB and get clipped exactly where a browser clips them. */ -const hslToRgb = (h: number, s: number, l: number): Rgb => { +const hslToRgb = (h: number, s: number, l: number, clip = true): Rgb => { const k = (n: number) => (((n + h / 30) % 12) + 12) % 12; const a = s * Math.min(l, 1 - l); const f = (n: number) => l - a * Math.max(-1, Math.min(k(n) - 3, 9 - k(n), 1)); - return [f(0), f(8), f(4)].map((v) => Math.round(clamp(v * 255))) as Rgb; + return [f(0), f(8), f(4)].map((v) => + clip ? Math.round(clamp(v * 255)) : v * 255, + ) as Rgb; }; -/** Resolves a Sass-emitted color literal to clipped sRGB. */ -export const parse = (value: string): Rgba => { +const read = (value: string, clip: boolean): Rgba => { const hsl = value.match( /^hsla?\(\s*([-\d.]+)[,\s]+([\d.]+)%[,\s]+([\d.]+)%\s*(?:[,/]\s*([\d.]+))?/, ); if (hsl) { const [h, s, l] = hsl.slice(1, 4).map(Number); - return [...hslToRgb(h, s / 100, l / 100), alpha(hsl[4])]; + return [...hslToRgb(h, s / 100, l / 100, clip), alpha(hsl[4])]; } const rgb = value.match( @@ -39,7 +46,9 @@ export const parse = (value: string): Rgba => { if (rgb) { const [r, g, b] = rgb.slice(1, 4).map(Number); - return [clamp(r), clamp(g), clamp(b), alpha(rgb[4])]; + return clip + ? [clamp(r), clamp(g), clamp(b), alpha(rgb[4])] + : [r, g, b, alpha(rgb[4])]; } const hex = value.trim().match(/^#([0-9a-f]{3,8})$/i); @@ -56,8 +65,23 @@ export const parse = (value: string): Rgba => { throw new Error(`unsupported color literal: ${value}`); }; +/** Resolves a Sass-emitted color literal to clipped sRGB. */ +export const parse = (value: string): Rgba => read(value, true); + +/** + * Resolves a literal without clipping, so a request the display cannot satisfy keeps + * the position it asked for. The legacy generator emits these routinely. + */ +export const parseRaw = (value: string): Rgba => read(value, false); + +/** The opaque channels of a literal. Most measurements do not care about alpha. */ +export const toRgb = (value: string): Rgb => { + const [r, g, b] = parse(value); + return [r, g, b]; +}; + /** Flattens a translucent color onto the background it is painted over. */ -export const composite = ([r, g, b, a]: Rgba, over: Rgba): Rgb => +export const composite = ([r, g, b, a]: Rgba, over: Rgb): Rgb => [r, g, b].map((c, i) => Math.round(a * c + (1 - a) * over[i])) as Rgb; const channel = (v: number) => { @@ -75,5 +99,173 @@ export const contrast = (a: Rgb, b: Rgb) => { return Math.max(x, y) / Math.min(x, y); }; +export interface ShadePair { + /** Index of the lighter shade in the ramp. */ + i: number; + /** Index of the darker shade, `PAIR_DISTANCE` steps on. */ + j: number; + contrast: number; +} + +/** Every pair of shades `PAIR_DISTANCE` apart, with the contrast between them. */ +export const shadePairs = (ramp: Rgb[]): ShadePair[] => { + const pairs: ShadePair[] = []; + + for (let i = 0; i + PAIR_DISTANCE < ramp.length; i++) { + const j = i + PAIR_DISTANCE; + pairs.push({ i, j, contrast: contrast(ramp[i], ramp[j]) }); + } + + return pairs; +}; + +/** How many of a ramp's pairs fall short of AA. */ +export const failingPairs = (ramp: Rgb[]) => + shadePairs(ramp).filter((pair) => pair.contrast < AA).length; + +/** + * Black or white, whichever reads better *on this color*. Choosing it from the color's + * contrast with some other anchor gets it backwards as soon as the anchor is dark. + */ +export const readableOn = (color: Rgb) => + contrast(color, [255, 255, 255]) >= contrast(color, [0, 0, 0]) + ? "#fff" + : "#111"; + export const hex = ([r, g, b]: Rgb) => `#${[r, g, b].map((v) => v.toString(16).padStart(2, "0")).join("")}`; + +/** Sign-preserving sRGB transfer, defined outside [0,1] so an unreachable request stays measurable. */ +const toLinear = (v: number) => { + const s = Math.abs(v) / 255; + const lin = s <= 0.04045 ? s / 12.92 : ((s + 0.055) / 1.055) ** 2.4; + return Math.sign(v) * lin; +}; + +/** Linear sRGB channel to its 0–255 encoding, clipped. */ +export const encode = (v: number) => { + const c = v <= 0 ? 0 : v >= 1 ? 1 : v; + return ( + (255 * (c <= 0.0031308 ? 12.92 * c : 1.055 * c ** (1 / 2.4) - 0.055)) | 0 + ); +}; + +/** sRGB to OKLCH, after Ottosson. Hue is degrees. */ +export const rgbToOklch = ([R, G, B]: Rgb): [number, number, number] => { + const r = toLinear(R); + const g = toLinear(G); + const b = toLinear(B); + const l = Math.cbrt(0.4122214708 * r + 0.5363325363 * g + 0.0514459929 * b); + const m = Math.cbrt(0.2119034982 * r + 0.6806995451 * g + 0.1073969566 * b); + const s = Math.cbrt(0.0883024619 * r + 0.2817188376 * g + 0.6299787005 * b); + const L = 0.2104542553 * l + 0.793617785 * m - 0.0040720468 * s; + const A = 1.9779984951 * l - 2.428592205 * m + 0.4505937099 * s; + const Bb = 0.0259040371 * l + 0.7827717662 * m - 0.808675766 * s; + + return [ + L, + Math.hypot(A, Bb), + ((Math.atan2(Bb, A) * 180) / Math.PI + 360) % 360, + ]; +}; + +/** + * OKLab (a, b) to linear sRGB. Split out from `oklchToLinear` so a caller that holds + * the hue fixed — the gamut plot paints thousands of pixels at one hue — can convert + * the angle once instead of per pixel. + */ +export const oklabToLinear = ( + L: number, + a: number, + b: number, +): [number, number, number] => { + const l = (L + 0.3963377774 * a + 0.2158037573 * b) ** 3; + const m = (L - 0.1055613458 * a - 0.0638541728 * b) ** 3; + const s = (L - 0.0894841775 * a - 1.291485548 * b) ** 3; + + return [ + 4.0767416621 * l - 3.3077115913 * m + 0.2309699292 * s, + -1.2684380046 * l + 2.6097574011 * m - 0.3413193965 * s, + -0.0041960863 * l - 0.7034186147 * m + 1.707614701 * s, + ]; +}; + +/** OKLCH to linear sRGB. Channels outside [0,1] mean the color is outside the gamut. */ +export const oklchToLinear = ( + L: number, + C: number, + hDeg: number, +): [number, number, number] => { + const h = (hDeg * Math.PI) / 180; + return oklabToLinear(L, C * Math.cos(h), C * Math.sin(h)); +}; + +/** + * The linear values that encode to -0.001 and 1.001. + * + * The tolerance belongs on the *encoded* channels: near black every linear channel is + * close to zero, so a slack of 0.001 applied there would admit colors far outside the + * gamut and bulge the dark end of the solid. Converting the two bounds once, rather than + * encoding every channel of every sample, makes the test three `pow` calls cheaper — + * which matters because the gamut plot runs it per pixel. + */ +export const GAMUT_LOW = -0.001 / 12.92; +export const GAMUT_HIGH = ((1.001 + 0.055) / 1.055) ** 2.4; + +/** + * Whether an unclipped 0–255 triple is displayable, to the same one-part-in-a-thousand + * tolerance `GAMUT_LOW`/`GAMUT_HIGH` use. `parseRaw` keeps the position a legacy shade + * asked for, and this is what says the display cannot honour it. + */ +export const displayable = ([r, g, b]: Rgb) => + r >= -0.255 && + r <= 255.255 && + g >= -0.255 && + g <= 255.255 && + b >= -0.255 && + b <= 255.255; + +/** Whether a linear triple is displayable. */ +export const inSrgb = ([r, g, b]: [number, number, number]) => + r >= GAMUT_LOW && + r <= GAMUT_HIGH && + g >= GAMUT_LOW && + g <= GAMUT_HIGH && + b >= GAMUT_LOW && + b <= GAMUT_HIGH; + +/** Chroma past which no sRGB color exists at any hue. Bounds the searches below. */ +export const CHROMA_CEILING = 0.37; + +/** Largest chroma this hue can hold at this lightness, by bisection. */ +export const maxChroma = (L: number, hue: number, ceiling = CHROMA_CEILING) => { + let lo = 0; + let hi = ceiling; + + for (let i = 0; i < 18; i++) { + const mid = (lo + hi) / 2; + if (inSrgb(oklchToLinear(L, mid, hue))) lo = mid; + else hi = mid; + } + + return lo; +}; + +export interface Cusp { + hue: number; + L: number; + C: number; +} + +/** The most saturated color a hue can reach in sRGB, and the lightness it sits at. */ +export const gamutCusp = (hue: number): Cusp => { + let best: Cusp = { hue, L: 0, C: 0 }; + + for (let i = 1; i < 100; i++) { + const L = i / 100; + const C = maxChroma(L, hue); + if (C > best.C) best = { hue, L, C }; + } + + return best; +}; diff --git a/packages/preview/src/data/cache.spec.ts b/packages/preview/src/data/cache.spec.ts new file mode 100644 index 00000000..45d88a3a --- /dev/null +++ b/packages/preview/src/data/cache.spec.ts @@ -0,0 +1,91 @@ +import { mkdtempSync, rmSync, writeFileSync } from "node:fs"; +import { tmpdir } from "node:os"; +import path from "node:path"; +import { pathToFileURL } from "node:url"; +import { afterAll, beforeEach, describe, expect, it } from "vitest"; +import { fingerprint, resolve } from "./cache.js"; +import type { DataProvider } from "./provider.js"; +import { get, register, reset } from "./registry.js"; + +const dir = mkdtempSync(path.join(tmpdir(), "ig-preview-")); +const cacheDir = mkdtempSync(path.join(tmpdir(), "ig-preview-cache-")); +const dep = path.join(dir, "input.scss"); +const self = path.join(dir, "provider.ts"); + +const provider = (id: string, value: string): DataProvider => ({ + id, + module: pathToFileURL(self).href, + deps: [dep], + build: () => value, +}); + +beforeEach(() => { + reset(); + writeFileSync(dep, "$a: 1;"); + writeFileSync(self, "export const p = 1;"); +}); + +afterAll(() => { + rmSync(dir, { recursive: true, force: true }); + rmSync(cacheDir, { recursive: true, force: true }); +}); + +describe("fingerprint", () => { + it("is stable while inputs and provider source are unchanged", () => { + expect(fingerprint(provider("t", "x"))).toBe( + fingerprint(provider("t", "x")), + ); + }); + + it("changes when a declared dependency changes", () => { + const before = fingerprint(provider("t", "x")); + writeFileSync(dep, "$a: 2;"); + expect(fingerprint(provider("t", "x"))).not.toBe(before); + }); + + it("changes when the provider's own source changes", () => { + const before = fingerprint(provider("t", "x")); + writeFileSync(self, "export const p = 2;"); + expect(fingerprint(provider("t", "x"))).not.toBe(before); + }); +}); + +describe("resolve", () => { + it("builds on a miss and reads from disk on the next call", async () => { + const hits: boolean[] = []; + const onHit = (hit: boolean) => hits.push(hit); + + await resolve(provider("hit", "first"), { dir: cacheDir, onHit }); + await resolve(provider("hit", "first"), { dir: cacheDir, onHit }); + + expect(hits).toEqual([false, true]); + }); + + it("rebuilds when a dependency changed, even though the id is the same", async () => { + await resolve(provider("dep", "first"), { dir: cacheDir }); + writeFileSync(dep, "$a: 3;"); + + const hits: boolean[] = []; + const value = await resolve(provider("dep", "second"), { + dir: cacheDir, + onHit: (hit) => hits.push(hit), + }); + + expect(hits).toEqual([false]); + expect(value).toBe("second"); + }); +}); + +describe("registry", () => { + it("rejects two providers claiming the same id", () => { + register(provider("clash", "a")); + expect(() => + register({ ...provider("clash", "b"), module: "file:///elsewhere.ts" }), + ).toThrow(/Duplicate data provider id "clash"/); + }); + + it("names the registered ids when one is missing", () => { + register(provider("color.palettes", "a")); + expect(() => get("color.nope")).toThrow(/Registered: color\.palettes/); + }); +}); diff --git a/packages/preview/src/data/cache.ts b/packages/preview/src/data/cache.ts new file mode 100644 index 00000000..d015dfad --- /dev/null +++ b/packages/preview/src/data/cache.ts @@ -0,0 +1,85 @@ +/** + * Caches provider output on disk so a rebuild does not recompile Sass that has not + * changed. The key covers the provider's declared inputs *and* its own source: editing + * the provider changes what it produces from identical inputs, which an mtime check on + * `deps` alone would miss. + */ +import { createHash } from "node:crypto"; +import { + mkdirSync, + readdirSync, + readFileSync, + statSync, + writeFileSync, +} from "node:fs"; +import path from "node:path"; +import { fileURLToPath } from "node:url"; +import type { DataProvider } from "./provider.js"; + +const CACHE_DIR = fileURLToPath( + new URL("../../node_modules/.cache/ig-preview/", import.meta.url), +); + +const sassFilesUnder = (dir: string): string[] => + readdirSync(dir, { withFileTypes: true }) + .flatMap((entry) => { + const full = path.join(dir, entry.name); + if (entry.isDirectory()) return sassFilesUnder(full); + return entry.name.endsWith(".scss") ? [full] : []; + }) + .sort(); + +const filesFor = (dep: string): string[] => { + const target = dep.startsWith("file:") ? fileURLToPath(dep) : dep; + return statSync(target).isDirectory() ? sassFilesUnder(target) : [target]; +}; + +/** Hash of everything that can change a provider's output. */ +export const fingerprint = (provider: DataProvider): string => { + const hash = createHash("sha256"); + hash.update(provider.id); + hash.update(readFileSync(fileURLToPath(provider.module))); + + for (const dep of provider.deps) { + for (const file of filesFor(dep)) { + hash.update(file); + hash.update(readFileSync(file)); + } + } + + return hash.digest("hex").slice(0, 16); +}; + +export interface ResolveOptions { + /** Skip the cache entirely. Used by tests. */ + fresh?: boolean; + /** Reports whether the value came from disk. Used by tests. */ + onHit?: (hit: boolean) => void; + /** Where entries live. Tests point this at a temporary directory. */ + dir?: string; +} + +export const resolve = async ( + provider: DataProvider, + options: ResolveOptions = {}, +): Promise => { + const dir = options.dir ?? CACHE_DIR; + const file = path.join(dir, `${provider.id}.${fingerprint(provider)}.json`); + + if (!options.fresh) { + try { + const cached = JSON.parse(readFileSync(file, "utf8")) as T; + options.onHit?.(true); + return cached; + } catch { + // A miss, an unreadable entry and a corrupt one are all just "build it". + } + } + + options.onHit?.(false); + const built = await provider.build(); + mkdirSync(dir, { recursive: true }); + writeFileSync(file, JSON.stringify(built), "utf8"); + + return built; +}; diff --git a/packages/preview/src/data/color/index.ts b/packages/preview/src/data/color/index.ts new file mode 100644 index 00000000..f4741e97 --- /dev/null +++ b/packages/preview/src/data/color/index.ts @@ -0,0 +1,8 @@ +/** Importing this module registers every data provider the color section needs. */ +import "./presets.js"; +import "./scales.js"; +import "./sweep.js"; + +export { presetData } from "./presets.js"; +export { scaleData } from "./scales.js"; +export { sweepData } from "./sweep.js"; diff --git a/packages/preview/src/data/color/presets.ts b/packages/preview/src/data/color/presets.ts new file mode 100644 index 00000000..6f337246 --- /dev/null +++ b/packages/preview/src/data/color/presets.ts @@ -0,0 +1,156 @@ +/** + * The palettes the library ships, each one twice: as it ships today, and regenerated by + * the fitted generator from the seeds it already records. + * + * The comparison is only honest if both sides start from the same place, so the seeds + * are read out of the shipped palette rather than transcribed — what ships is what the + * legacy side shows, and the fitted side starts from exactly those seeds. + */ +import { + ACCENTS, + FAMILIES, + type Family, + PRESETS, + type PresetKey, + ROLES, + SHADES, + THEMES, + type Theme, +} from "../../variants.js"; +import { defineProvider } from "../provider.js"; +import { register } from "../registry.js"; +import { COLOR_SASS, compile, HEX_FN, HEX_USE } from "./sass-util.js"; + +export interface PresetSide { + /** `--ig-*` declarations, ready to apply to a subtree. */ + vars: Record; + /** Resolved literals keyed `family-variant`, for measuring. */ + values: Record; +} + +export interface Preset { + key: PresetKey; + label: string; + theme: Theme; + /** What the shipped palette records as each family's seed. */ + seeds: Record; + legacy: PresetSide; + fitted: PresetSide; +} + +export interface PresetData { + presets: Preset[]; + /** Sass warnings raised while compiling, reported by the plugin on every serve. */ + warnings: string[]; +} + +type Generator = "legacy" | "fitted"; + +/** The variants a family exposes. Surface has roles under fitted and numbers under legacy. */ +const variants = (family: Family, generator: Generator): readonly string[] => { + if (family !== "surface") return [...SHADES, ...ACCENTS]; + return generator === "fitted" ? ROLES : SHADES; +}; + +/** One rule per preset and side, plus the seeds: `.p-light-material-l { --ig-...: ...; }` */ +const probe = (key: PresetKey, theme: Theme) => { + const cls = `${theme}-${key}`; + const shipped = `$${theme}-${key}-palette`; + const sides: [Generator, string][] = [ + ["legacy", shipped], + ["fitted", `_fit(${shipped})`], + ]; + + return [ + // `_fit()` builds a whole palette, so it is bound once per rule. Calling it inside + // each lookup would regenerate it sixty times over. + ...sides.map( + ([generator, palette]) => + `.p-${cls}-${generator} { $s: ${palette}; @include palette($s); }`, + ), + `seed-${cls} { ${FAMILIES.map((f) => `${f}: '#{_hex(_seed(${shipped}, "${f}"))}';`).join(" ")} }`, + ...sides.map(([generator, palette]) => { + const rows = FAMILIES.flatMap((family) => + variants(family, generator).map( + (v) => + ` ${family}-${v}: '#{_lit(map.get(map.get($s, "${family}"), "${v}-raw"))}';`, + ), + ); + return `val-${cls}-${generator} {\n $s: ${palette};\n${rows.join("\n")}\n}`; + }), + ].join("\n"); +}; + +const PRELUDE = + `@use 'sass:map';\n@use 'sass/color' as *;\n@use 'sass/color/presets' as *;\n` + + HEX_USE + + `@function _seed($p, $f) { @return map.get(map.get($p, $f), 'seed'); }\n` + + HEX_FN + + "@function _fit($p) {\n @return palette(\n" + + FAMILIES.map((f) => ` $${f}: _seed($p, '${f}')`).join(",\n") + + "\n );\n}\n"; + +/** Custom property declarations of every rule with this class. */ +const declarations = (css: string, selector: string) => { + const out: Record = {}; + + for (const [, name, body] of css.matchAll(/\.([\w-]+)\s*\{([^}]*)\}/g)) { + if (name !== selector) continue; + + for (const [, prop, value] of body.matchAll(/(--[\w-]+):\s*([^;]+);/g)) { + out[prop] = value.trim(); + } + } + + return out; +}; + +/** The quoted `name: "value"` pairs of a probe rule. */ +const quoted = (css: string, selector: string) => { + const rule = css.match(new RegExp(`${selector}\\s*\\{([^}]*)\\}`)); + if (!rule) throw new Error(`presets: missing ${selector}`); + + return Object.fromEntries( + [...rule[1].matchAll(/([\w-]+):\s*"([^"]*)"/g)].map(([, name, value]) => [ + name, + value, + ]), + ) as Record; +}; + +export const presetData = defineProvider({ + id: "color.presets", + module: import.meta.url, + deps: [COLOR_SASS], + build() { + const selections = PRESETS.flatMap((preset) => + THEMES.map((theme) => ({ ...preset, theme })), + ); + const { css, warnings } = compile( + PRELUDE + selections.map((s) => probe(s.key, s.theme)).join("\n"), + ); + + const side = (cls: string, generator: Generator): PresetSide => ({ + vars: declarations(css, `p-${cls}-${generator}`), + values: quoted(css, `val-${cls}-${generator}`), + }); + + return { + warnings, + presets: selections.map(({ key, label, theme }) => { + const cls = `${theme}-${key}`; + + return { + key, + label, + theme, + seeds: quoted(css, `seed-${cls}`), + legacy: side(cls, "legacy"), + fitted: side(cls, "fitted"), + }; + }), + }; + }, +}); + +register(presetData); diff --git a/packages/preview/src/data/color/sass-util.ts b/packages/preview/src/data/color/sass-util.ts new file mode 100644 index 00000000..b62156ea --- /dev/null +++ b/packages/preview/src/data/color/sass-util.ts @@ -0,0 +1,75 @@ +/** + * What every color provider needs to compile a probe stylesheet against the library. + */ +import { fileURLToPath } from "node:url"; +import * as sass from "sass-embedded"; +import { SHADES } from "../../variants.js"; + +/** The theming package, which the probes `@use` by path. */ +export const THEMING = new URL("../../../../theming/", import.meta.url); + +/** The Sass sources whose contents change what a color provider produces. */ +export const COLOR_SASS = fileURLToPath(new URL("sass/color/", THEMING)); + +/** + * Sass serialises a color to its shortest form, so a seed written as `white` or `red` + * interpolates as that keyword rather than as a hex literal. Emitting through + * `ie-hex-str` — the one built-in that always produces `#AARRGGBB` — keeps every seed in + * a single shape the Node side can parse. + * + * Split in two because `@use` is only legal at the top of a stylesheet, above the + * function definitions the callers interleave with their own. + */ +export const HEX_USE = `@use 'sass:color';\n@use 'sass:meta';\n@use 'sass:string';\n`; + +export const HEX_FN = + `@function _hex($c) { @return '#' + string.slice(color.ie-hex-str($c), 4); }\n` + + // A resolved shade is usually a relative-color string the browser finishes, but a + // plain color comes back a color — and so gets the same keyword treatment. `rgba()` + // rather than `_hex()` because a shade may carry alpha. + // + // Only legacy-rgb colors are rewritten. A legacy `hsl()` is left exactly as written: + // its saturation routinely exceeds 100%, and asking for a red channel would both fail + // and throw away the out-of-gamut position the reader is here to see. + "@function _lit($v) {\n" + + ` @if meta.type-of($v) != 'color' { @return $v; }\n` + + ` @if color.space($v) != 'rgb' { @return $v; }\n` + + ` @return 'rgba(' + color.channel($v, 'red') + ',' + color.channel($v, 'green')\n` + + ` + ',' + color.channel($v, 'blue') + ',' + color.alpha($v) + ')';\n` + + "}\n"; + +/** The ten raw shade literals of a compiled family, `|`-separated, through `_lit`. */ +export const shadeList = (name: string) => + SHADES.map((shade) => `#{_lit(map.get(${name}, "${shade}-raw"))}`).join("|"); + +export interface CompileOptions { + /** Warnings matching this are expected by the probe and not worth reporting. */ + expected?: RegExp; +} + +/** + * Compiles a probe stylesheet with the theming package on the load path. + * + * Sass warnings come back with the CSS so a provider can carry them in its output: the + * plugin reports them whenever it serves the module, cached or not, which is how + * "shade 900 wanted 16.1:1 but its hue only reaches 15.2:1" reaches the terminal on + * every run and not only the one that compiled it. + */ +export const compile = (source: string, { expected }: CompileOptions = {}) => { + const warnings = new Set(); + + const { css } = sass.compileString(source, { + loadPaths: [fileURLToPath(THEMING)], + logger: { + warn(message, options) { + const where = options.span ? ` (${options.span.text})` : ""; + warnings.add(`${message}${where}`); + }, + }, + }); + + return { + css, + warnings: [...warnings].filter((warning) => !expected?.test(warning)), + }; +}; diff --git a/packages/preview/src/data/color/scales.spec.ts b/packages/preview/src/data/color/scales.spec.ts new file mode 100644 index 00000000..025808e2 --- /dev/null +++ b/packages/preview/src/data/color/scales.spec.ts @@ -0,0 +1,145 @@ +/** + * The scale table is a lookup standing in for the generator, so the thing worth testing + * is that it agrees with the generator. If this drifts, the editor lies. + */ +import { describe, expect, it } from "vitest"; +import { AA, contrast, toRgb } from "../../color.js"; +import { + rampFromTable, + SCALE_PRESETS, + type ScalePreset, +} from "../../scale-math.js"; +import { SHADES, type Theme } from "../../variants.js"; +import { resolve } from "../cache.js"; +import { compile } from "./sass-util.js"; +import { type ScaleSubject, scaleData } from "./scales.js"; + +/** What the generator itself produces for a subject under a shipped scale. */ +const rampFromSass = (subject: ScaleSubject, preset: ScalePreset) => { + const surface = + subject.family === "gray" ? `, $surface: ${subject.surface}` : ""; + const { css } = compile( + `@use 'sass:map';\n@use 'sass/color' as *;\n@use 'sass/color/types' as types;\n` + + `o { $s: shades('${subject.family}', ${subject.seed}, types.$INumericShades${surface}, $scale: '${preset.name}');\n` + + SHADES.map((v) => ` v${v}: '#{map.get($s, "${v}-raw")}';`).join("\n") + + "\n}", + ); + + return [...css.matchAll(/v\d+:\s*"([^"]+)"/g)].map(([, literal]) => + toRgb(literal), + ); +}; + +const rampFromData = (subject: ScaleSubject, preset: ScalePreset) => + rampFromTable(subject.table, preset).map((h) => toRgb(`#${h}`)); + +/** How many of the five "500 apart" pairs clear AA, under one preset, for one subject. */ +const record = (subject: ScaleSubject, name: string) => { + const preset = SCALE_PRESETS.find((p) => p.name === name); + if (!preset) throw new Error(`no preset ${name}`); + + const ramp = rampFromData(subject, preset); + let clear = 0; + + for (let i = 0; i + 5 < ramp.length; i++) { + if (contrast(ramp[i], ramp[i + 5]) >= AA) clear++; + } + + return clear; +}; + +// The real cache: the provider compiles thousands of Sass rules and the result is keyed +// by its inputs, so a warm run here is the same data the dev server serves. +const data = await resolve(scaleData); + +/** + * Subjects are derived from the shipped palettes, so they are addressed by what they + * are rather than by a key that moves when a preset's seeds change. + */ +const neutral = (theme: Theme) => { + const found = data.subjects.find( + (s) => s.family === "gray" && s.presets.includes(`material-${theme}`), + ); + if (!found) throw new Error(`no material ${theme} neutral`); + + return found; +}; + +describe("the scale lookup table", () => { + for (const subject of data.subjects) { + for (const preset of SCALE_PRESETS) { + it(`reproduces ${preset.name} on ${subject.key}`, () => { + const got = rampFromData(subject, preset); + const want = rampFromSass(subject, preset); + const worst = Math.max( + ...got.map((c, i) => + Math.max(...c.map((v, ch) => Math.abs(v - want[i][ch]))), + ), + ); + + // Sampling 400 targets geometrically leaves adjacent entries about half a + // percent of contrast apart, so a shade can land one step either side. Across + // all five subjects and four presets: 78% exact, 99% within one, never above two. + expect(worst).toBeLessThanOrEqual(2); + }); + } + } + + it("reports a ceiling a subject cannot exceed", () => { + for (const subject of data.subjects) { + const anchor = toRgb(subject.anchor); + const { samples, rows } = subject.table; + const reached = rows.flatMap((row) => + Array.from({ length: samples }, (_, k) => + contrast(toRgb(`#${row.slice(k * 6, k * 6 + 6)}`), anchor), + ), + ); + + expect(Math.max(...reached)).toBeLessThanOrEqual(subject.ceiling + 0.001); + } + }); + + it("anchors a neutral family to its page rather than to white", () => { + const dark = neutral("dark"); + expect(dark.anchor).not.toBe("#ffffff"); + // White on a dark page cannot reach the 21:1 a white page allows. + expect(dark.ceiling).toBeLessThan(18); + }); +}); + +describe("the AA record each preset carries", () => { + // `$scales` documents these against the grayscale the presets were fitted to. + it("matches the documented figures on the neutral family", () => { + const light = neutral("light"); + + expect(record(light, "even")).toBe(5); + expect(record(light, "material")).toBe(3); + expect(record(light, "tailwind")).toBe(5); + expect(record(light, "carbon")).toBe(5); + }); + + it("is stable across subjects that can reach the range", () => { + const reachable = data.subjects.filter((s) => s.ceiling >= 16.1); + const records = reachable.map((s) => record(s, "material")); + + expect(reachable.length).toBeGreaterThan(1); + expect(new Set(records).size).toBe(1); + }); + + it("degrades when the range asks for more contrast than the subject has", () => { + // `even` reaches for 18.232:1. A neutral on a dark page tops out below 17, so the + // ramp compresses at the dark end and a pair drops under AA. The guarantee is + // conditional on the range being reachable, and the ceiling is what tells you. + const dark = neutral("dark"); + + expect(dark.ceiling).toBeLessThan(18.232); + expect(record(dark, "even")).toBeLessThan(5); + }); + + it("holds for the straight line wherever the range is reachable", () => { + for (const subject of data.subjects) { + if (subject.ceiling < 18.232) continue; + expect(record(subject, "even")).toBe(5); + } + }); +}); diff --git a/packages/preview/src/data/color/scales.ts b/packages/preview/src/data/color/scales.ts new file mode 100644 index 00000000..7152a3a8 --- /dev/null +++ b/packages/preview/src/data/color/scales.ts @@ -0,0 +1,237 @@ +/** + * An exact `(position, contrast target) -> color` table per subject, so `range` and + * `curve` can be manipulated live without reimplementing the generator. + * + * The trick is a degenerate range: compiling `shades()` with `range: X X` pins every + * shade to the same contrast target while each keeps its own position-dependent chroma + * taper. Sweeping X across the reachable span therefore yields the whole table, and a + * scale is then a lookup rather than a computation. + * + * Reproduces every shipped preset closely rather than exactly: 78% of shades match the + * generator's output bit for bit, 99% are within one step per channel, and none is more + * than two — well under a perceptible difference, and guarded by `scales.spec.ts`. + * + * Gray is included twice, on a light and a dark page, because a neutral family is + * anchored to the background rather than to white — which is the whole reason the + * `material` scale exists, and it cannot be shown on a chromatic family. + */ +import { contrast, hex, toRgb } from "../../color.js"; +import type { ScaleTable } from "../../scale-math.js"; +import { PRESETS, SHADES, THEMES, type Theme } from "../../variants.js"; +import { defineProvider } from "../provider.js"; +import { register } from "../registry.js"; +import { + COLOR_SASS, + compile, + HEX_FN, + HEX_USE, + shadeList, +} from "./sass-util.js"; + +/** How many contrast targets are sampled, geometrically, across the span below. */ +export const SAMPLES = 400; +export const SPAN: [number, number] = [1, 21]; + +export interface ScaleSubject { + key: string; + label: string; + /** Which `-` selections this subject serves. */ + presets: string[]; + /** What the reader is looking at, in one line. */ + note: string; + family: "primary" | "gray"; + seed: string; + surface: string; + /** What contrast is measured against: white for a chromatic family, the page for gray. */ + anchor: string; + table: ScaleTable; + /** The highest contrast this subject can actually reach against its anchor. */ + ceiling: number; +} + +type Definition = Omit; + +export interface ScaleData { + subjects: ScaleSubject[]; + /** Sass warnings raised while compiling, reported by the plugin on every serve. */ + warnings: string[]; +} + +interface Seeds { + name: string; + theme: Theme; + primary: string; + gray: string; + surface: string; +} + +/** Read from the shipped palettes so the editor's subjects are the ones the picker offers. */ +const readSeeds = (): Seeds[] => { + const rules = PRESETS.flatMap(({ key }) => + THEMES.map( + (theme) => + `s-${theme}-${key} { ` + + (["primary", "gray", "surface"] as const) + .map( + (f) => + `${f}: '#{_hex(map.get(map.get($${theme}-${key}-palette, "${f}"), "seed"))}';`, + ) + .join(" ") + + " }", + ), + ); + const { css } = compile( + `@use 'sass:map';\n@use 'sass/color/presets' as *;\n${HEX_USE}${HEX_FN}${rules.join("\n")}`, + ); + + return [...css.matchAll(/s-(\w+)-(\w+)\s*\{([^}]*)\}/g)].map( + ([, theme, name, body]) => + ({ + name, + theme, + ...Object.fromEntries( + [...body.matchAll(/([\w-]+):\s*"([^"]+)"/g)].map(([, key, value]) => [ + key, + value, + ]), + ), + }) as Seeds, + ); +}; + +const capitalise = (name: string) => name[0].toUpperCase() + name.slice(1); + +/** + * One subject per distinct (family, seed, surface). Several presets share a surface, and + * a chromatic family is anchored to white whatever the page is, so the list collapses + * well below one entry per preset. + */ +const definitions = (): Definition[] => { + const seen = new Map(); + + for (const entry of readSeeds()) { + const candidates: Definition[] = [ + { + key: `${entry.name}-primary`, + label: `${capitalise(entry.name)} primary`, + note: "A chromatic family, measured against white.", + family: "primary", + seed: entry.primary, + surface: "#ffffff", + anchor: "#ffffff", + presets: [], + }, + { + key: `${entry.name}-${entry.theme}-gray`, + label: `Gray on a ${entry.theme} page`, + note: "Anchored to the page rather than to white. This is the family the material scale was fitted to.", + family: "gray", + seed: entry.gray, + surface: entry.surface, + anchor: entry.surface, + presets: [], + }, + ]; + + for (const subject of candidates) { + const id = `${subject.family}|${subject.seed}|${subject.surface}`; + const tag = `${entry.name}-${entry.theme}`; + const existing = seen.get(id); + + if (existing) existing.presets.push(tag); + else seen.set(id, { ...subject, presets: [tag] }); + } + } + + return [...seen.values()]; +}; + +/** The contrast targets sampled, geometrically spaced so each step is a constant ratio. */ +const sampled = () => + Array.from( + { length: SAMPLES }, + (_, k) => SPAN[0] * (SPAN[1] / SPAN[0]) ** (k / (SAMPLES - 1)), + ); + +/** One rule per target: every shade pinned to the same contrast. */ +const probe = (index: number, subject: Definition, target: number) => { + const surface = + subject.family === "gray" ? `, $surface: ${subject.surface}` : ""; + const range = `${target.toFixed(5)} ${target.toFixed(5)}`; + + return ( + `o${index} { $s: shades('${subject.family}', ${subject.seed}, types.$INumericShades` + + `${surface}, $scale: (range: ${range}, curve: null)); v: '${shadeList("$s")}'; }` + ); +}; + +export const scaleData = defineProvider({ + id: "color.scales", + module: import.meta.url, + deps: [COLOR_SASS], + build() { + const subjects = definitions(); + const targets = sampled(); + const rules = subjects.flatMap((subject, s) => + targets.map((target, k) => probe(s * SAMPLES + k, subject, target)), + ); + const { css, warnings } = compile( + `@use 'sass:map';\n@use 'sass/color' as *;\n@use 'sass/color/types' as types;\n` + + HEX_USE + + HEX_FN + + rules.join("\n"), + { + // Sampling deliberately runs past what a subject can reach, so the generator's + // "wanted X but only reaches Y" is the probe working, not a problem. `ceiling` + // carries the same information, per subject. + expected: /wanted [\d.]+:1 but its hue only reaches/, + }, + ); + + const payloads = new Map(); + for (const [, index, payload] of css.matchAll( + /o(\d+)\s*\{\s*v:\s*"([^"]+)"/g, + )) { + payloads.set(Number(index), payload.split("|")); + } + + return { + warnings, + subjects: subjects.map((subject, s) => { + const rows = SHADES.map(() => [] as string[]); + + for (let k = 0; k < SAMPLES; k++) { + const literals = payloads.get(s * SAMPLES + k); + if (!literals) { + throw new Error( + `scales: missing rule for ${subject.key} sample ${k}`, + ); + } + + literals.forEach((literal, position) => { + rows[position].push(hex(toRgb(literal)).slice(1)); + }); + } + + const anchor = toRgb(subject.anchor); + const ceiling = Math.max( + ...rows.flatMap((row) => + row.map((h) => contrast(toRgb(`#${h}`), anchor)), + ), + ); + + return { + ...subject, + ceiling: Number(ceiling.toFixed(3)), + table: { + samples: SAMPLES, + span: SPAN, + rows: rows.map((row) => row.join("")), + }, + }; + }), + }; + }, +}); + +register(scaleData); diff --git a/packages/preview/src/data/color/sweep.spec.ts b/packages/preview/src/data/color/sweep.spec.ts new file mode 100644 index 00000000..3d82f64e --- /dev/null +++ b/packages/preview/src/data/color/sweep.spec.ts @@ -0,0 +1,86 @@ +/** + * The claims the color section makes, asserted rather than displayed. A scoreboard on a + * page only catches a regression when somebody opens the page. + */ +import { describe, expect, it } from "vitest"; +import { AA, contrast, PAIR_DISTANCE } from "../../color.js"; +import { clampedCount, rampRgb } from "../../ramp.js"; +import { resolve } from "../cache.js"; +import { sweepData } from "./sweep.js"; + +// The real cache, for the same reason as `scales.spec.ts`. +const data = await resolve(sweepData); + +describe("the fitted generator, across every seed in the sweep", () => { + it("covers the whole hue circle at more than one saturation", () => { + expect(data.rows.length).toBeGreaterThan(1); + expect(data.totals.seeds).toBe(data.rows.length * (360 / data.hueStep)); + }); + + it("clears AA for every pair five shades apart", () => { + expect(data.totals.fittedFails).toBe(0); + expect(data.totals.fittedClean).toBe(data.totals.seeds); + }); + + it("never asks for a color outside sRGB", () => { + expect(data.totals.fittedOog).toBe(0); + }); + + it("never resolves two shades to the same color", () => { + expect(data.totals.fittedDup).toBe(0); + }); + + it("holds at every saturation, not only the vivid one", () => { + for (const row of data.rows) { + for (const ramp of row.fitted) { + expect(clampedCount(ramp)).toBe(0); + const rgb = rampRgb(ramp); + for (let i = 0; i + PAIR_DISTANCE < rgb.length; i++) { + expect( + contrast(rgb[i], rgb[i + PAIR_DISTANCE]), + ).toBeGreaterThanOrEqual(AA); + } + } + } + }); +}); + +describe("the legacy generator, for comparison", () => { + it("fails AA pairs at every seed in the grid", () => { + expect(data.totals.legacyClean).toBe(0); + expect(data.totals.legacyFails).toBeGreaterThan(data.totals.pairs * 0.9); + }); + + it("emits shades outside sRGB, but only at high saturation", () => { + expect(data.totals.legacyOog).toBeGreaterThan(0); + + const bySaturation = data.rows.map((row) => ({ + saturation: row.saturation, + oog: row.legacy.reduce((sum, ramp) => sum + clampedCount(ramp), 0), + })); + const worst = bySaturation.reduce((a, b) => (a.oog > b.oog ? a : b)); + + // The out-of-gamut problem belongs to saturated seeds. Reporting it as a property of + // every legacy ramp would overstate it, which is why the grid has a saturation axis. + expect(worst.saturation).toBe(Math.max(...data.saturations)); + expect(bySaturation.filter((r) => r.oog === 0).length).toBeGreaterThan(0); + }); + + it("records where a clamped shade asked to be", () => { + const withAsk = data.rows + .flatMap((row) => row.legacy) + .filter((ramp) => ramp.mask !== 0); + expect(withAsk.length).toBeGreaterThan(0); + for (const ramp of withAsk) { + expect(ramp.ask.length).toBe(clampedCount(ramp) * 3); + } + }); +}); + +describe("the grid's own limits", () => { + it("does not claim to cover extreme lightness", () => { + // Every seed sits at 50% lightness, so near-white and near-black seeds — where + // duplicate shades come from — are the comparison demo's job, not the sweep's. + expect(data.totals.legacyDup).toBe(0); + }); +}); diff --git a/packages/preview/src/data/color/sweep.ts b/packages/preview/src/data/color/sweep.ts new file mode 100644 index 00000000..f3ac1e62 --- /dev/null +++ b/packages/preview/src/data/color/sweep.ts @@ -0,0 +1,186 @@ +/** + * Every hue at several saturations, through both generators. + * + * Sweeping hue alone would only test one slice of seed space, and the most obvious + * objection to the result is that maximally saturated seeds are unrepresentative. The + * saturation axis is here to answer that rather than to be pretty. + */ +import { + displayable, + failingPairs, + hex, + PAIR_DISTANCE, + parseRaw, + toRgb, +} from "../../color.js"; +import { SHADES } from "../../variants.js"; +import { defineProvider } from "../provider.js"; +import { register } from "../registry.js"; +import { + COLOR_SASS, + compile, + HEX_FN, + HEX_USE, + shadeList, +} from "./sass-util.js"; + +/** Muted, mid and vivid. Brand colors land across this span. */ +export const SATURATIONS = [35, 60, 85]; +export const HUE_STEP = 1; + +export interface SweepRamp { + /** Ten shades, concatenated six-digit hex, as the display will paint them. */ + hex: string; + /** Bit per shade: the generator asked for a color outside sRGB. */ + mask: number; + /** Unclipped `r, g, b` of the masked shades only — where each one asked to be. */ + ask: number[]; +} + +export interface SweepRow { + saturation: number; + /** Six-digit hex per hue step. */ + seeds: string[]; + legacy: SweepRamp[]; + fitted: SweepRamp[]; +} + +export interface SweepTotals { + seeds: number; + pairs: number; + shades: number; + legacyFails: number; + fittedFails: number; + legacyOog: number; + fittedOog: number; + legacyDup: number; + fittedDup: number; + /** Seeds where all five pairs clear AA. */ + legacyClean: number; + fittedClean: number; +} + +export interface SweepData { + saturations: number[]; + hueStep: number; + rows: SweepRow[]; + totals: SweepTotals; + /** Sass warnings raised while compiling, reported by the plugin on every serve. */ + warnings: string[]; +} + +const hues = () => { + const out: number[] = []; + for (let hue = 0; hue < 360; hue += HUE_STEP) out.push(hue); + return out; +}; + +/** A seed per rule, both generators run on it, the results joined by `#`. */ +const probe = (index: number, seed: string) => + `o${index} { $s: ${seed}; ` + + `$l: shades('primary', $s, types.$INumericShades, $generator: 'legacy'); ` + + `$f: shades('primary', $s, types.$INumericShades); ` + + `v: '#{$s}#${shadeList("$l")}#${shadeList("$f")}'; }`; + +/** Reads a ramp's literals into what the browser paints and what the generator asked for. */ +const measure = (literals: string[]) => { + const clipped = literals.map(toRgb); + const ask: number[] = []; + let mask = 0; + + literals.forEach((literal, index) => { + const [r, g, b] = parseRaw(literal); + if (displayable([r, g, b])) return; + mask |= 1 << index; + ask.push(r, g, b); + }); + + return { + ramp: { hex: clipped.map((c) => hex(c).slice(1)).join(""), mask, ask }, + fails: failingPairs(clipped), + oog: ask.length / 3, + dup: clipped.length - new Set(clipped.map(String)).size, + }; +}; + +export const sweepData = defineProvider({ + id: "color.sweep", + module: import.meta.url, + deps: [COLOR_SASS], + build() { + const seeds = SATURATIONS.flatMap((saturation) => + hues().map((hue) => ({ + saturation, + seed: `hsl(${hue}, ${saturation}%, 50%)`, + })), + ); + const { css, warnings } = compile( + `@use 'sass:map';\n@use 'sass/color' as *;\n@use 'sass/color/types' as types;\n` + + HEX_USE + + HEX_FN + + seeds.map((s, i) => probe(i, s.seed)).join("\n"), + ); + + const payloads = new Map(); + for (const [, index, payload] of css.matchAll( + /o(\d+)\s*\{\s*v:\s*"([^"]+)"/g, + )) { + payloads.set(Number(index), payload.split("#")); + } + + const totals: SweepTotals = { + seeds: 0, + pairs: 0, + shades: 0, + legacyFails: 0, + fittedFails: 0, + legacyOog: 0, + fittedOog: 0, + legacyDup: 0, + fittedDup: 0, + legacyClean: 0, + fittedClean: 0, + }; + const rows: SweepRow[] = SATURATIONS.map((saturation) => ({ + saturation, + seeds: [], + legacy: [], + fitted: [], + })); + + seeds.forEach(({ saturation }, index) => { + const parts = payloads.get(index); + if (!parts) throw new Error(`sweep: missing rule ${index}`); + + const row = rows[SATURATIONS.indexOf(saturation)]; + const legacy = measure(parts[1].split("|")); + const fitted = measure(parts[2].split("|")); + + row.seeds.push(hex(toRgb(parts[0])).slice(1)); + row.legacy.push(legacy.ramp); + row.fitted.push(fitted.ramp); + + totals.seeds++; + totals.pairs += SHADES.length - PAIR_DISTANCE; + totals.shades += SHADES.length; + totals.legacyFails += legacy.fails; + totals.fittedFails += fitted.fails; + totals.legacyOog += legacy.oog; + totals.fittedOog += fitted.oog; + totals.legacyDup += legacy.dup; + totals.fittedDup += fitted.dup; + if (!legacy.fails) totals.legacyClean++; + if (!fitted.fails) totals.fittedClean++; + }); + + return { + saturations: SATURATIONS, + hueStep: HUE_STEP, + rows, + totals, + warnings, + }; + }, +}); + +register(sweepData); diff --git a/packages/preview/src/data/plugin.ts b/packages/preview/src/data/plugin.ts new file mode 100644 index 00000000..ea665fb5 --- /dev/null +++ b/packages/preview/src/data/plugin.ts @@ -0,0 +1,35 @@ +import type { Plugin } from "vite"; +import { resolve } from "./cache.js"; +import "./color/index.js"; +import { get } from "./registry.js"; + +const PREFIX = "virtual:data/"; + +/** Provider output that carries the Sass warnings its build raised. */ +const warningsOf = (data: unknown): string[] => + typeof data === "object" && data !== null && "warnings" in data + ? (data.warnings as string[]) + : []; + +/** Serves each registered provider as `virtual:data/`, built once and cached. */ +export const dataProviders = (): Plugin => ({ + name: "preview-data-providers", + resolveId(id) { + return id.startsWith(PREFIX) ? `\0${id}` : null; + }, + async load(id) { + if (!id.startsWith(`\0${PREFIX}`)) return null; + + const providerId = id.slice(PREFIX.length + 1); + const data = await resolve(get(providerId)); + + // Reported here rather than at compile time, so a build served from cache says the + // same thing as the build that produced it. + for (const warning of warningsOf(data)) + this.warn(`${providerId}: ${warning}`); + + // `JSON.parse` of a string beats an object literal of the same size: the literal is + // parsed as source, which for a few hundred kilobytes is the bulk of a tab switch. + return `export default JSON.parse(${JSON.stringify(JSON.stringify(data))});`; + }, +}); diff --git a/packages/preview/src/data/provider.ts b/packages/preview/src/data/provider.ts new file mode 100644 index 00000000..33cbb64b --- /dev/null +++ b/packages/preview/src/data/provider.ts @@ -0,0 +1,19 @@ +/** + * A dataset the preview derives from Sass at build time. + * + * Every pillar of the theming system needs something compiled — palettes, type scales, + * shadow maps — and each one declares it the same way so no section has to invent its + * own build step. + */ +export interface DataProvider { + /** Unique, dot-separated: `color.sweep`. Also the `virtual:data/` specifier. */ + id: string; + /** `import.meta.url` of the declaring module, so editing it invalidates its cache. */ + module: string; + /** Sass files or directories whose contents change the output. Directories are walked for `.scss`. */ + deps: string[]; + build(): Promise | T; +} + +export const defineProvider = (provider: DataProvider): DataProvider => + provider; diff --git a/packages/preview/src/data/registry.ts b/packages/preview/src/data/registry.ts new file mode 100644 index 00000000..55e24314 --- /dev/null +++ b/packages/preview/src/data/registry.ts @@ -0,0 +1,30 @@ +import type { DataProvider } from "./provider.js"; + +const providers = new Map(); + +/** Registers a provider. IDs are unique across the whole app. */ +export const register = (provider: DataProvider): void => { + const clash = providers.get(provider.id); + + if (clash && clash.module !== provider.module) { + throw new Error( + `Duplicate data provider id "${provider.id}", declared by ${clash.module} and ${provider.module}.`, + ); + } + + providers.set(provider.id, provider); +}; + +export const get = (id: string): DataProvider => { + const provider = providers.get(id); + + if (!provider) { + const known = [...providers.keys()].sort().join(", ") || "none"; + throw new Error(`Unknown data provider "${id}". Registered: ${known}.`); + } + + return provider; +}; + +/** Test seam. */ +export const reset = (): void => providers.clear(); diff --git a/packages/preview/src/define.ts b/packages/preview/src/define.ts new file mode 100644 index 00000000..4126667c --- /dev/null +++ b/packages/preview/src/define.ts @@ -0,0 +1,11 @@ +/** + * Registers a custom element unless that name is already taken. + * + * `customElements.define` throws on a repeat, and an uncaught throw aborts the rest of + * the module — which is how a second copy of a shared element silently stops a whole view + * from ever being defined. Two views bundled separately and landing on the same page is + * enough to cause it. + */ +export const define = (tag: string, element: CustomElementConstructor) => { + if (!customElements.get(tag)) customElements.define(tag, element); +}; diff --git a/packages/preview/src/elements/code-block.ts b/packages/preview/src/elements/code-block.ts new file mode 100644 index 00000000..53de1c9d --- /dev/null +++ b/packages/preview/src/elements/code-block.ts @@ -0,0 +1,142 @@ +import { css, html, LitElement } from "lit"; +import { define } from "../define.js"; + +type State = "idle" | "copied" | "selected"; + +/** + * The Sass that reproduces what a demo is showing, with a control that copies it. + * + * Where the clipboard is unavailable — an insecure origin, a browser that refuses + * without a gesture it recognises, a denied permission — the text is selected instead + * and the control says which keys to press. A copy button that silently does nothing is + * worse than one that admits it cannot. + */ +export class CodeBlock extends LitElement { + static properties = { + code: { type: String }, + label: { type: String }, + state: { state: true }, + }; + + static styles = css` + :host { + display: block; + } + + header { + display: flex; + align-items: center; + gap: var(--space-3, 12px); + margin-block-end: var(--space-2, 8px); + } + + .label { + font-family: var(--mono, ui-monospace, monospace); + font-size: var(--text-xs, 11px); + font-weight: 500; + letter-spacing: 0.11em; + text-transform: uppercase; + color: var(--muted, currentColor); + } + + button { + margin-inline-start: auto; + font-family: var(--mono, ui-monospace, monospace); + font-size: var(--text-xs, 11px); + font-weight: 500; + letter-spacing: 0.07em; + text-transform: uppercase; + color: inherit; + background: transparent; + border: 1px solid var(--line, currentColor); + border-radius: var(--radius-sm, 3px); + padding: 5px 11px; + cursor: pointer; + } + + button:hover { + border-color: var(--muted, currentColor); + } + + button:focus-visible { + outline: 2px solid currentColor; + outline-offset: 2px; + } + + pre { + margin: 0; + padding: var(--space-4, 16px); + background: var(--line-soft, rgb(0 0 0 / 5%)); + border-radius: var(--radius-sm, 3px); + overflow-x: auto; + font-family: var(--mono, ui-monospace, monospace); + font-size: var(--text-sm, 12px); + line-height: 1.65; + } + `; + + declare code: string; + declare label: string; + declare state: State; + + constructor() { + super(); + this.code = ""; + this.label = "What to paste"; + this.state = "idle"; + } + + private get shortcut() { + return navigator.platform?.startsWith("Mac") ? "⌘C" : "Ctrl+C"; + } + + private select() { + const pre = this.renderRoot.querySelector("pre"); + const selection = getSelection(); + + if (!pre || !selection) return; + + const range = document.createRange(); + range.selectNodeContents(pre); + selection.removeAllRanges(); + selection.addRange(range); + } + + private async copy() { + try { + await navigator.clipboard.writeText(this.code); + this.state = "copied"; + } catch { + this.select(); + this.state = "selected"; + } + + setTimeout(() => { + this.state = "idle"; + }, 2000); + } + + private get action() { + if (this.state === "copied") return "Copied"; + if (this.state === "selected") return `Press ${this.shortcut}`; + return "Copy"; + } + + render() { + return html` +
+ ${this.label} + +
+ 
${this.code}
+ `; + } +} + +define("ig-code-block", CodeBlock); + +declare global { + interface HTMLElementTagNameMap { + "ig-code-block": CodeBlock; + } +} diff --git a/packages/preview/src/elements/curve-editor.ts b/packages/preview/src/elements/curve-editor.ts new file mode 100644 index 00000000..69dafbac --- /dev/null +++ b/packages/preview/src/elements/curve-editor.ts @@ -0,0 +1,274 @@ +import { css, html, LitElement, svg } from "lit"; +import { define } from "../define.js"; +import { type Curve, ease, IDENTITY_CURVE } from "../scale-math.js"; + +/** A shade drawn on the curve: where it sits, where the curve put it, what it looks like. */ +export interface CurvePoint { + x: number; + t: number; + hex: string; +} + +type Handle = "p1" | "p2"; + +const WIDTH = 900; +const TOP = 16; +const BOTTOM = 176; +const LEFT = WIDTH * 0.05; +const SPAN = WIDTH * 0.9; +const px = (t: number) => LEFT + t * SPAN; +const py = (t: number) => BOTTOM - t * (BOTTOM - TOP); + +/** + * How far past the range a control point may be pulled. Overshoot is the interesting + * part of a curve — it is what bunches one end — so the bound is generous. + */ +const OVERSHOOT = 0.4; +/** Half the handle mark plus its ring, so one pulled to the limit still draws whole. */ +const PAD = 12; +/** The viewBox follows the overshoot bound, so a handle at the limit stays on screen to grab. */ +const VIEW_TOP = py(1 + OVERSHOOT) - PAD; +const VIEW_HEIGHT = py(-OVERSHOOT) + PAD - VIEW_TOP; +const CURVE_SAMPLES = 120; + +const clamp = (value: number, low: number, high: number) => + Math.min(high, Math.max(low, value)); + +/** + * The easing curve, made grabbable. Controlled: the host owns `curve` and hears + * `curve-change` when a handle is dragged or nudged. + */ +export class CurveEditor extends LitElement { + static properties = { + curve: { attribute: false }, + points: { attribute: false }, + low: { type: String }, + high: { type: String }, + }; + + static styles = css` + :host { + display: block; + color: var(--plot-ink, currentColor); + } + + svg { + display: block; + width: 100%; + height: auto; + touch-action: none; + } + + .tick { + font-family: var(--mono, ui-monospace, monospace); + font-size: 10px; + fill: currentColor; + opacity: 0.8; + } + + .axis { + letter-spacing: 0.08em; + opacity: 0.6; + } + + .handle { + cursor: grab; + } + + .handle:active { + cursor: grabbing; + } + + /* The transparent target takes the pointer; the marks are decoration. */ + .handle circle { + pointer-events: all; + } + + .handle rect { + pointer-events: none; + } + + .handle rect[tabindex] { + pointer-events: all; + } + + .handle rect:focus-visible { + outline: 2px solid currentColor; + outline-offset: 2px; + } + `; + + declare curve: Curve | null; + declare points: CurvePoint[]; + declare low: string; + declare high: string; + + private dragging: Handle | null = null; + + constructor() { + super(); + this.curve = null; + this.points = []; + this.low = ""; + this.high = ""; + } + + disconnectedCallback() { + this.release(); + super.disconnectedCallback(); + } + + private get handles(): Curve { + return this.curve ?? IDENTITY_CURVE; + } + + private change(next: Curve) { + this.dispatchEvent( + new CustomEvent("curve-change", { detail: next, bubbles: true }), + ); + } + + private move(which: Handle, x: number, y: number) { + const next = [...this.handles] as Curve; + const at = which === "p1" ? 0 : 2; + + next[at] = clamp(x, 0, 1); + next[at + 1] = clamp(y, -OVERSHOOT, 1 + OVERSHOOT); + this.change(next); + } + + private grab(event: PointerEvent, which: Handle) { + event.preventDefault(); + this.dragging = which; + addEventListener("pointermove", this.onDrag); + addEventListener("pointerup", this.release); + addEventListener("pointercancel", this.release); + // Grabbing with the pointer also takes focus, so the arrow keys carry on from + // wherever the drag ended rather than from whichever handle was last tabbed to. + (event.currentTarget as SVGGElement) + .querySelector("[tabindex]") + ?.focus(); + } + + private onDrag = (event: PointerEvent) => { + const which = this.dragging; + const canvas = this.renderRoot.querySelector("svg"); + if (!which || !canvas) return; + + event.preventDefault(); + const box = canvas.getBoundingClientRect(); + const x = (((event.clientX - box.left) / box.width) * WIDTH - LEFT) / SPAN; + const local = + VIEW_TOP + ((event.clientY - box.top) / box.height) * VIEW_HEIGHT; + const y = (BOTTOM - local) / (BOTTOM - TOP); + + this.move(which, x, y); + }; + + private release = () => { + this.dragging = null; + removeEventListener("pointermove", this.onDrag); + removeEventListener("pointerup", this.release); + removeEventListener("pointercancel", this.release); + }; + + private nudge(event: KeyboardEvent, which: Handle) { + const step = event.shiftKey ? 0.1 : 0.02; + const moves: Record = { + ArrowLeft: [-step, 0], + ArrowRight: [step, 0], + ArrowUp: [0, step], + ArrowDown: [0, -step], + }; + const move = moves[event.key]; + if (!move) return; + + event.preventDefault(); + const at = which === "p1" ? 0 : 2; + this.move( + which, + this.handles[at] + move[0], + this.handles[at + 1] + move[1], + ); + } + + private handle(which: Handle) { + const [x, y] = + which === "p1" ? this.handles.slice(0, 2) : this.handles.slice(2); + const [anchorX, anchorY] = which === "p1" ? [0, 0] : [1, 1]; + const cx = px(x); + const cy = py(y); + + return svg` + + this.grab(event, which)}> + + + + + this.nudge(event, which)} + /> + + `; + } + + private path() { + return Array.from({ length: CURVE_SAMPLES + 1 }, (_, k) => { + const x = k / CURVE_SAMPLES; + return `${k ? "L" : "M"}${px(x).toFixed(2)} ${py(ease(x, this.curve)).toFixed(2)}`; + }).join(" "); + } + + render() { + return html` + + + + + + ${this.high} + ${this.low} + CONTRAST + ${this.points.map( + ( + p, + ) => svg``, + )} + + ${this.points.map( + (p) => svg``, + )} + ${this.handle("p1")} + ${this.handle("p2")} + 50 + 900 + + `; + } +} + +define("ig-curve-editor", CurveEditor); + +declare global { + interface HTMLElementTagNameMap { + "ig-curve-editor": CurveEditor; + } + + interface HTMLElementEventMap { + "curve-change": CustomEvent; + } +} diff --git a/packages/preview/src/elements/gamut-plot.ts b/packages/preview/src/elements/gamut-plot.ts new file mode 100644 index 00000000..87698377 --- /dev/null +++ b/packages/preview/src/elements/gamut-plot.ts @@ -0,0 +1,267 @@ +import { css, html, LitElement, type SVGTemplateResult, svg } from "lit"; +import { + CHROMA_CEILING, + type Cusp, + encode, + GAMUT_HIGH, + GAMUT_LOW, + gamutCusp, + oklabToLinear, + rgbToOklch, + toRgb, +} from "../color.js"; +import type { SweepRamp } from "../data/color/sweep.js"; +import { define } from "../define.js"; +import { isClamped, shadeHex, shadeRgb } from "../ramp.js"; +import { SHADES } from "../variants.js"; + +/** The plot's coordinate space. The canvas and the SVG over it share it exactly. */ +const PLOT = { + width: 400, + height: 300, + left: 46, + right: 384, + top: 16, + bottom: 260, +}; +const px = (C: number) => + PLOT.left + (C / CHROMA_CEILING) * (PLOT.right - PLOT.left); +const py = (L: number) => PLOT.bottom - L * (PLOT.bottom - PLOT.top); + +/** + * A slice through sRGB at one hue, with both generators' shades placed on it. + * + * The lit region is every color the hue can produce. Painted per pixel on a canvas at + * one device pixel per CSS pixel: the field is a smooth gradient the browser scales up + * cleanly, and everything that needs to stay crisp — axes, ticks, marks — is SVG over it. + */ +export class GamutPlot extends LitElement { + static properties = { + seed: { type: String }, + legacy: { attribute: false }, + fitted: { attribute: false }, + }; + + static styles = css` + :host { + display: block; + color: var(--plot-ink, currentColor); + } + + .plot { + position: relative; + aspect-ratio: ${PLOT.width} / ${PLOT.height}; + border: 1px solid var(--line); + border-radius: var(--radius-sm, 3px); + background: var(--panel); + overflow: hidden; + } + + canvas, + svg { + position: absolute; + inset: 0; + width: 100%; + height: 100%; + } + + .tick { + font-family: var(--mono, ui-monospace, monospace); + font-size: 9px; + fill: currentColor; + opacity: 0.8; + } + + .axis { + letter-spacing: 0.08em; + opacity: 0.6; + } + + .legend { + display: flex; + flex-wrap: wrap; + gap: var(--space-4, 16px); + margin-block-start: var(--space-3, 12px); + font-family: var(--mono, ui-monospace, monospace); + font-size: var(--text-xs, 11px); + color: var(--muted); + } + + .legend span { + display: inline-flex; + align-items: center; + gap: var(--space-2, 8px); + } + + .mark { + flex: none; + width: 9px; + height: 9px; + border: 1.5px solid currentColor; + background: currentColor; + } + + .mark.is-fitted, + .mark.is-asked { + border-radius: 50%; + } + + .mark.is-asked { + background: transparent; + } + `; + + declare seed: string; + declare legacy: SweepRamp; + declare fitted: SweepRamp; + + private cusps = new Map(); + private paintedHue = Number.NaN; + + constructor() { + super(); + this.seed = "#000000"; + this.legacy = { hex: "", mask: 0, ask: [] }; + this.fitted = { hex: "", mask: 0, ask: [] }; + } + + /** Memoised: finding the cusp is 100 bisections, and it is read several times a render. */ + private get cusp(): Cusp { + const cached = this.cusps.get(this.seed); + if (cached) return cached; + + const cusp = gamutCusp(rgbToOklch(toRgb(this.seed))[2]); + this.cusps.set(this.seed, cusp); + return cusp; + } + + updated() { + this.paint(); + } + + /** Only the hue moves the field, so a render for any other reason reuses the canvas. */ + private paint() { + const canvas = this.renderRoot.querySelector("canvas"); + const context = canvas?.getContext("2d"); + const { hue } = this.cusp; + if (!canvas || !context || hue === this.paintedHue) return; + + const { width, height, left, right, top, bottom } = PLOT; + canvas.width = width; + canvas.height = height; + + const image = context.createImageData(width, height); + const radians = (hue * Math.PI) / 180; + const cos = Math.cos(radians); + const sin = Math.sin(radians); + + for (let y = top; y <= bottom; y++) { + const L = (bottom - y) / (bottom - top); + + for (let x = left; x <= right; x++) { + const C = ((x - left) / (right - left)) * CHROMA_CEILING; + const [r, g, b] = oklabToLinear(L, C * cos, C * sin); + + if (r < GAMUT_LOW || r > GAMUT_HIGH) continue; + if (g < GAMUT_LOW || g > GAMUT_HIGH) continue; + if (b < GAMUT_LOW || b > GAMUT_HIGH) continue; + + const i = (y * width + x) * 4; + image.data[i] = encode(r); + image.data[i + 1] = encode(g); + image.data[i + 2] = encode(b); + image.data[i + 3] = 255; + } + } + + context.putImageData(image, 0, 0); + this.paintedHue = hue; + } + + /** Where each clamped legacy shade asked to be, with a leader to where it landed. */ + private asked(): SVGTemplateResult[] { + const marks: SVGTemplateResult[] = []; + let n = 0; + + SHADES.forEach((_, i) => { + if (!isClamped(this.legacy, i)) return; + + const ask = this.legacy.ask; + const [askL, askC] = rgbToOklch([ + ask[n * 3], + ask[n * 3 + 1], + ask[n * 3 + 2], + ]); + const [landedL, landedC] = rgbToOklch(shadeRgb(this.legacy, i)); + const ax = Math.min(px(Math.min(askC, CHROMA_CEILING)), PLOT.right); + const ay = py(Math.max(0, Math.min(1, askL))); + n++; + + marks.push(svg` + + + `); + }); + + return marks; + } + + private marks(ramp: SweepRamp, shape: "square" | "circle") { + return SHADES.map((_, i) => { + const [L, C] = rgbToOklch(shadeRgb(ramp, i)); + const fill = shadeHex(ramp, i); + + return shape === "square" + ? svg`` + : svg``; + }); + } + + render() { + const cusp = this.cusp; + const { left, right, top, bottom } = PLOT; + + return html` +
+ + + + + ${[0, 0.25, 0.5, 0.75, 1].map( + (L) => + svg`${L.toFixed(2)}`, + )} + ${[0, 0.1, 0.2, 0.3].map( + (C) => + svg`${C.toFixed(1)}`, + )} + CHROMA + LIGHTNESS + + cusp ${cusp.C.toFixed(2)} + ${this.asked()} + ${this.marks(this.legacy, "square")} + ${this.marks(this.fitted, "circle")} + +
+

+ legacy + fitted + asked for, clamped back +

+ `; + } +} + +define("ig-gamut-plot", GamutPlot); + +declare global { + interface HTMLElementTagNameMap { + "ig-gamut-plot": GamutPlot; + } +} diff --git a/packages/preview/src/elements/ignite.ts b/packages/preview/src/elements/ignite.ts new file mode 100644 index 00000000..99b341ed --- /dev/null +++ b/packages/preview/src/elements/ignite.ts @@ -0,0 +1,60 @@ +/** + * The shipped components this app uses for its own controls. + * + * Registered here rather than at each call site so the set is visible in one place, and + * so a view that imports it cannot forget one and render an inert custom element. + * + * It has to come through the package barrel: `exports` only publishes `.`, `./themes/*` + * and `./extras`, so there is no subpath to import five components from. That is what + * the ~59 KB gzipped chunk buys — the whole library, for a button, a button group, a + * slider and a tooltip. + * + * They are themed by `shell/theme.scss`, which emits this branch's palette onto `:root` — + * the components read `--ig-*` at runtime, so the controls in this app are painted by the + * generator the app is about. + */ +import { + configureTheme, + defineComponents, + IgcButtonComponent, + IgcButtonGroupComponent, + IgcSliderComponent, + IgcToggleButtonComponent, + IgcTooltipComponent, +} from "igniteui-webcomponents"; + +/** + * The family decides the components' structure — their shapes, densities and the type and + * elevation scales they assume. `shell/theme.scss` picks the same one for its Sass + * presets, so the two stay in step. + */ +const THEME = "indigo"; + +const prefersDark = matchMedia("(prefers-color-scheme: dark)"); + +/** + * The scheme the chrome is drawn in: an explicit `data-theme` on the root wins, then the + * system preference. The same two sources, in the same order, that `shell/theme.scss` + * reads — a control themed for the other scheme is invisible on the page. + */ +const scheme = () => { + const forced = document.documentElement.dataset.theme; + if (forced === "light" || forced === "dark") return forced; + return prefersDark.matches ? "dark" : "light"; +}; + +const applyTheme = () => configureTheme(THEME, scheme()); + +applyTheme(); +prefersDark.addEventListener("change", applyTheme); +new MutationObserver(applyTheme).observe(document.documentElement, { + attributeFilter: ["data-theme"], +}); + +defineComponents( + IgcButtonComponent, + IgcButtonGroupComponent, + IgcSliderComponent, + IgcToggleButtonComponent, + IgcTooltipComponent, +); diff --git a/packages/preview/src/elements/index.ts b/packages/preview/src/elements/index.ts new file mode 100644 index 00000000..ded5bf3a --- /dev/null +++ b/packages/preview/src/elements/index.ts @@ -0,0 +1,10 @@ +/** + * Registers every element a view may compose. Importing this module is all a view has to + * do; the elements are addressed by tag, so nothing is exported. + */ +import "./code-block.js"; +import "./curve-editor.js"; +import "./gamut-plot.js"; +import "./ignite.js"; +import "./palette-scope.js"; +import "./verdict.js"; diff --git a/packages/preview/src/elements/palette-scope.spec.ts b/packages/preview/src/elements/palette-scope.spec.ts new file mode 100644 index 00000000..8e7438f9 --- /dev/null +++ b/packages/preview/src/elements/palette-scope.spec.ts @@ -0,0 +1,34 @@ +// @vitest-environment happy-dom +import { describe, expect, it } from "vitest"; +import { define } from "../define.js"; +import { PaletteScope } from "./palette-scope.js"; + +describe("ig-palette-scope", () => { + const scope = () => document.createElement("ig-palette-scope"); + + it("applies its palette as inline custom properties", () => { + const element = scope(); + element.vars = { "--ig-primary-500": "#09f" }; + + expect(element.style.getPropertyValue("--ig-primary-500")).toBe("#09f"); + }); + + it("removes properties the next palette no longer carries", () => { + const element = scope(); + element.vars = { "--ig-primary-500": "#09f", "--ig-gray-500": "#888" }; + element.vars = { "--ig-primary-500": "#f90" }; + + expect(element.style.getPropertyValue("--ig-primary-500")).toBe("#f90"); + expect(element.style.getPropertyValue("--ig-gray-500")).toBe(""); + expect(element.vars).toEqual({ "--ig-primary-500": "#f90" }); + }); +}); + +describe("define", () => { + it("keeps the first definition rather than throwing on a repeat", () => { + class Other extends HTMLElement {} + + expect(() => define("ig-palette-scope", Other)).not.toThrow(); + expect(customElements.get("ig-palette-scope")).toBe(PaletteScope); + }); +}); diff --git a/packages/preview/src/elements/palette-scope.ts b/packages/preview/src/elements/palette-scope.ts new file mode 100644 index 00000000..8010e05b --- /dev/null +++ b/packages/preview/src/elements/palette-scope.ts @@ -0,0 +1,38 @@ +/** + * Applies one compiled palette to its own subtree. + * + * A demo that relied on a stylesheet somebody else added to the document would only work + * inside this application. Setting the declarations on the element itself means the + * palette travels with the markup, and custom properties inherit through shadow + * boundaries, so children resolve `var(--ig-*)` wherever they are. + * + * It deliberately does not render: children belong to whoever wrote the template. + */ +import { define } from "../define.js"; +export class PaletteScope extends HTMLElement { + #vars: Record = {}; + + set vars(next: Record | undefined) { + for (const name of Object.keys(this.#vars)) { + if (!next || !(name in next)) this.style.removeProperty(name); + } + + this.#vars = next ?? {}; + + for (const [name, value] of Object.entries(this.#vars)) { + this.style.setProperty(name, value); + } + } + + get vars() { + return this.#vars; + } +} + +define("ig-palette-scope", PaletteScope); + +declare global { + interface HTMLElementTagNameMap { + "ig-palette-scope": PaletteScope; + } +} diff --git a/packages/preview/src/elements/verdict.ts b/packages/preview/src/elements/verdict.ts new file mode 100644 index 00000000..0ff450fe --- /dev/null +++ b/packages/preview/src/elements/verdict.ts @@ -0,0 +1,55 @@ +import { css, html, LitElement } from "lit"; +import { define } from "../define.js"; + +export interface Finding { + text: string; + ok: boolean; +} + +/** + * A pass or fail readout. Offered, not imposed: a demo whose subject has no honest + * measure simply does not use one. + */ +export class Verdict extends LitElement { + static properties = { findings: { attribute: false } }; + + static styles = css` + :host { + display: flex; + flex-direction: column; + gap: 2px; + font-family: var(--mono, ui-monospace, monospace); + font-size: var(--text-xs, 11px); + } + + .ok { + color: var(--pass, currentColor); + } + + .no { + color: var(--fail, currentColor); + } + `; + + declare findings: Finding[]; + + constructor() { + super(); + this.findings = []; + } + + render() { + return this.findings.map( + (finding) => + html`${finding.text}`, + ); + } +} + +define("ig-verdict", Verdict); + +declare global { + interface HTMLElementTagNameMap { + "ig-verdict": Verdict; + } +} diff --git a/packages/preview/src/html.ts b/packages/preview/src/html.ts deleted file mode 100644 index f6c4a2b2..00000000 --- a/packages/preview/src/html.ts +++ /dev/null @@ -1,35 +0,0 @@ -/** Minimal escaping template tag. Arrays join, `raw()` opts a value out of escaping. */ -const ESCAPES: Record = { - "&": "&", - "<": "<", - ">": ">", - '"': """, - "'": "'", -}; - -const marker = Symbol("raw"); - -export interface Raw { - [marker]: string; -} - -export const raw = (value: string): Raw => ({ [marker]: value }); - -const escapeHtml = (value: string) => - value.replace(/[&<>"']/g, (c) => ESCAPES[c]); - -const stringifyValue = (value: unknown): string => { - if (value == null || value === false) return ""; - if (Array.isArray(value)) return value.map(stringifyValue).join(""); - if (typeof value === "object" && marker in value) - return (value as Raw)[marker]; - return escapeHtml(String(value)); -}; - -export const html = ( - strings: TemplateStringsArray, - ...values: unknown[] -): Raw => - raw(strings.reduce((out, s, i) => out + stringifyValue(values[i - 1]) + s)); - -export const stringify = (value: Raw) => value[marker]; diff --git a/packages/preview/src/main.ts b/packages/preview/src/main.ts new file mode 100644 index 00000000..328928ff --- /dev/null +++ b/packages/preview/src/main.ts @@ -0,0 +1 @@ +import "./shell/shell.js"; diff --git a/packages/preview/src/model.ts b/packages/preview/src/model.ts deleted file mode 100644 index 5270cc1f..00000000 --- a/packages/preview/src/model.ts +++ /dev/null @@ -1,319 +0,0 @@ -/** Turns compiled palettes into the view model the page renders. */ -import { composite, contrast, hex, parse, type Rgb } from "./color.js"; -import { - ACCENTS, - type Generator, - paletteExpr, - type Resolved, - ROLES, - resolve, - SCALES, - type Scope, - SEEDS, - SHADES, - SURFACES, - seedLandsOn, - stylesheet, -} from "./palettes.js"; - -const AA = 4.5; -/** Below this the shade is indistinguishable from the surface it sits on. */ -const SAME = 1.005; - -export interface Swatch { - key: string; - token: string; - rgb: Rgb; - ratio: number; - hex: string; - against: string; -} - -export interface Row { - cls: string; - label: string; - swatches: Swatch[]; - verdict: string; - ok: boolean; -} - -export interface Role { - key: string; - away: number; - collapsed: boolean; -} - -export interface Ramp { - label: string; - seed: string; - lands: string; - shades: Row[]; - accents: Row[]; -} - -export interface Neutral { - label: string; - bg: string; - fittedCls: string; - legacySurface: Row; - roles: Role[]; - grays: Row[]; -} - -export interface Score { - legacyAA: number; - fittedAA: number; - legacyDup: number; - fittedDup: number; - pairs: number; -} - -export interface Model { - css: string; - ramps: Ramp[]; - neutrals: Neutral[]; - flavors: { name: string; row: Row }[]; - score: Score; -} - -const swatch = ( - family: string, - key: string, - literal: string, - against: Rgb, - label: string, -): Swatch => { - const color = composite(parse(literal), [...against, 1]); - return { - key, - token: `--ig-${family}-${key}`, - rgb: color, - ratio: contrast(color, against), - hex: hex(color), - against: label, - }; -}; - -const rgbOf = (swatches: Swatch[]) => swatches.map((s) => s.hex); - -/** Any two shades five apart must clear AA — the guarantee the fitted generator makes. */ -const failures = (swatches: Swatch[]) => { - let fails = 0; - - for (let i = 0; i + 5 < swatches.length; i++) { - if (contrast(swatches[i].rgb, swatches[i + 5].rgb) < AA) fails++; - } - - return fails; -}; - -interface RowSpec { - /** Scope class the palette was compiled under, and the row's caption. */ - cls: string; - label: string; - /** Which family, which of its keys, and the resolved literals to read them from. */ - family: string; - keys: string[]; - resolved: Resolved; - /** What the swatches are measured against, and how to name it. */ - against: Rgb; - againstLabel: string; - /** Whether to score the "500 apart clears AA" guarantee, which only ramps make. */ - scored?: boolean; -} - -const row = ({ - cls, - label, - family, - keys, - resolved, - against, - againstLabel, - scored = false, -}: RowSpec): Row => { - const swatches = keys.map((k) => - swatch(family, k, resolved[`${family}-${k}`], against, againstLabel), - ); - const dup = swatches.length - new Set(rgbOf(swatches)).size; - const fails = scored ? failures(swatches) : 0; - const bits: string[] = []; - - if (scored) - bits.push(fails ? `${fails}/5 AA pairs fail` : "all 5 AA pairs pass"); - if (dup) bits.push(`${dup} duplicate${dup > 1 ? "s" : ""}`); - - return { - cls, - label, - swatches, - verdict: bits.join(" · "), - ok: !fails && !dup, - }; -}; - -export const build = (): Model => { - const scopes: Scope[] = []; - const push = ( - cls: string, - families: string[], - keys: string[], - seed: string, - surface: string, - generator: Generator, - extra = "", - ) => { - scopes.push({ - cls, - families, - keys, - expr: paletteExpr(seed, surface, generator, extra), - }); - return cls; - }; - - const rampScopes = SEEDS.map(([, seed], i) => ({ - seed, - legacy: push( - `r${i}l`, - ["primary"], - [...SHADES, ...ACCENTS], - seed, - "#fff", - "legacy", - ), - fitted: push( - `r${i}f`, - ["primary"], - [...SHADES, ...ACCENTS], - seed, - "#fff", - "fitted", - ), - })); - - const neutralScopes = SURFACES.map(([, bg], i) => ({ - bg, - legacy: push(`n${i}l`, ["gray", "surface"], SHADES, "#09f", bg, "legacy"), - fitted: push(`n${i}f`, ["gray"], SHADES, "#09f", bg, "fitted"), - roles: push(`n${i}r`, ["surface"], ROLES, "#09f", bg, "fitted"), - })); - - const flavorScopes = SCALES.map((name) => ({ - name, - cls: push( - `sc-${name}`, - ["gray"], - SHADES, - "#09f", - "#fff", - "fitted", - `, $scales: ('gray': '${name}')`, - ), - })); - - const css = stylesheet(scopes); - const values = resolve(scopes); - const at = (cls: string) => values.get(cls) as Resolved; - const lands = seedLandsOn(SEEDS.map(([, seed]) => seed)); - const white = parse("#ffffff").slice(0, 3) as Rgb; - const score: Score = { - legacyAA: 0, - fittedAA: 0, - legacyDup: 0, - fittedDup: 0, - pairs: 0, - }; - - const ramps = SEEDS.map(([label, seed], i) => { - const { legacy, fitted } = rampScopes[i]; - const ramp = ( - cls: string, - label: string, - keys: string[], - scored: boolean, - ) => - row({ - cls, - label, - family: "primary", - keys, - resolved: at(cls), - against: white, - againstLabel: "white", - scored, - }); - const shades = [ - ramp(legacy, "legacy", SHADES, true), - ramp(fitted, "fitted", SHADES, true), - ]; - - score.pairs += 5; - score.legacyAA += failures(shades[0].swatches); - score.fittedAA += failures(shades[1].swatches); - score.legacyDup += - shades[0].swatches.length - new Set(rgbOf(shades[0].swatches)).size; - score.fittedDup += - shades[1].swatches.length - new Set(rgbOf(shades[1].swatches)).size; - - return { - label, - seed, - lands: lands[i], - shades, - accents: [ - ramp(legacy, "legacy accent", ACCENTS, false), - ramp(fitted, "fitted accent", ACCENTS, false), - ], - }; - }); - - const neutrals = SURFACES.map(([label, bg], i) => { - const { legacy, fitted, roles } = neutralScopes[i]; - const page = parse(bg).slice(0, 3) as Rgb; - const onPage = (cls: string, label: string, family: string) => - row({ - cls, - label, - family, - keys: SHADES, - resolved: at(cls), - against: page, - againstLabel: `the page ${bg}`, - scored: true, - }); - - return { - label, - bg, - fittedCls: roles, - legacySurface: onPage(legacy, "legacy", "surface"), - roles: ROLES.map((key) => { - const away = contrast( - composite(parse(at(roles)[`surface-${key}`]), [...page, 1]), - page, - ); - return { key, away, collapsed: away < SAME }; - }), - grays: [ - onPage(legacy, "legacy", "gray"), - onPage(fitted, "fitted", "gray"), - ], - }; - }); - - const flavors = flavorScopes.map(({ name, cls }) => ({ - name, - row: row({ - cls, - label: name, - family: "gray", - keys: SHADES, - resolved: at(cls), - against: white, - againstLabel: "white", - }), - })); - - return { css, ramps, neutrals, flavors, score }; -}; diff --git a/packages/preview/src/palettes.ts b/packages/preview/src/palettes.ts deleted file mode 100644 index cb592b37..00000000 --- a/packages/preview/src/palettes.ts +++ /dev/null @@ -1,140 +0,0 @@ -/** - * Compiles every palette the page needs in two passes: one emits the `--ig-*` custom - * properties the page renders from, the other reports the resolved literal behind each - * token so the build can measure contrast without a browser. - */ -import { fileURLToPath } from "node:url"; -import * as sass from "sass-embedded"; - -const LOAD_PATH = fileURLToPath(new URL("../../theming", import.meta.url)); - -export const SHADES = [ - "50", - "100", - "200", - "300", - "400", - "500", - "600", - "700", - "800", - "900", -]; -export const ACCENTS = ["A100", "A200", "A400", "A700"]; -export const ROLES = ["base", "sunken", "raised", "overlay", "container"]; -export const SCALES = ["even", "material", "tailwind", "carbon"]; - -export const SEEDS: [string, string][] = [ - ["Framework primary", "#0099ff"], - ["Framework secondary", "#df1b74"], - ["Warn", "#faa419"], - ["Success", "#4eb862"], - ["Near-white seed", "#ffe9b0"], - ["Near-black seed", "#141225"], - ["Neon", "#00ff00"], - ["Washed out", "#a99bb0"], - ["Pure gray", "#8a8a8a"], -]; - -export const SURFACES: [string, string][] = [ - ["Pure white", "#ffffff"], - ["Off-white", "#f8f8fa"], - ["Dark", "#1a1a24"], - ["Pure black", "#000000"], -]; - -export type Generator = "legacy" | "fitted"; - -export interface Scope { - cls: string; - families: string[]; - keys: string[]; - expr: string; -} - -/** Resolved literals for one scope, keyed `family.shade`. */ -export type Resolved = Record; - -const compile = (source: string) => - sass.compileString(source, { - loadPaths: [LOAD_PATH], - logger: { - warn(message, options) { - // The preview exists to catch generator problems, so a warning from the very - // code under test is a result, not noise. - const where = options.span ? ` (${options.span.text})` : ""; - - console.warn(`sass: ${message}${where}`); - }, - }, - }).css; - -export const paletteExpr = ( - seed: string, - surface: string, - generator: Generator, - extra = "", -) => - `palette($primary: ${seed}, $secondary: ${seed}, $surface: ${surface}, $gray: #333` + - `${generator === "legacy" ? ", $generator: 'legacy'" : ""}${extra})`; - -/** The `--ig-*` declarations the page paints with. */ -export const stylesheet = (scopes: Scope[]) => - compile( - `@use 'sass:map';\n@use 'sass/color' as *;\n${scopes - .map( - (s) => - `.${s.cls} { $p: ${s.expr}; @include palette((` + - `${s.families.map((f) => `'${f}': map.get($p, '${f}')`).join(", ")})); }`, - ) - .join("\n")}`, - ); - -/** - * The literal behind every token. `-raw` is the color Sass computed before it was - * written out as a custom property, so it matches what the browser resolves. - */ -export const resolve = (scopes: Scope[]): Map => { - const css = compile( - `@use 'sass:map';\n@use 'sass/color' as *;\n${scopes - .map((s, i) => { - const rows = s.families.flatMap((f) => - s.keys.map( - (k) => - ` ${f}-${k}: '#{map.get(map.get($p, '${f}'), '${k}-raw')}';`, - ), - ); - return `s${i} { $p: ${s.expr};\n${rows.join("\n")}\n}`; - }) - .join("\n")}`, - ); - - const blocks = [...css.matchAll(/s(\d+)\s*\{([^}]*)\}/g)]; - - return new Map( - blocks.map(([, index, body]) => { - const entries = [...body.matchAll(/([\w-]+):\s*"([^"]+)"/g)].map( - ([, token, value]) => [token, value] as const, - ); - return [scopes[Number(index)].cls, Object.fromEntries(entries)]; - }), - ); -}; - -export const seedLandsOn = (seeds: string[]) => { - const css = compile( - `@use 'sass/color' as *;\nout {\n${seeds - .map( - (seed, i) => - ` s${i}: seed-lands-on(${paletteExpr(seed, "#fff", "fitted")}, 'primary');`, - ) - .join("\n")}\n}`, - ); - - return seeds.map( - (_, i) => - css - .match(new RegExp(`s${i}:\\s*"?([^";]+)"?;`))?.[1] - ?.replace(/"/g, "") ?? "", - ); -}; diff --git a/packages/preview/src/plugin.ts b/packages/preview/src/plugin.ts deleted file mode 100644 index de1cecee..00000000 --- a/packages/preview/src/plugin.ts +++ /dev/null @@ -1,64 +0,0 @@ -import type { OutputAsset } from "rolldown"; -import type { Plugin } from "vite"; -import { stringify } from "./html.js"; -import { build } from "./model.js"; -import { sections } from "./render.js"; - -/** - * Compiles the palettes and fills the placeholders in index.html. The generated - * `--ig-*` declarations are injected as a stylesheet so the page paints from the same - * custom properties a consumer receives. - */ -export const previewData = (): Plugin => ({ - name: "preview-data", - transformIndexHtml: { - order: "pre", - handler(template) { - const model = build(); - const parts = sections(model); - - const filled = template.replace( - //g, - (match, key: string) => (key in parts ? stringify(parts[key]) : match), - ); - - return { - html: filled, - tags: [{ tag: "style", children: model.css, injectTo: "head-prepend" }], - }; - }, - }, -}); - -/** - * Folds the emitted stylesheet back into the HTML so the build is a single file that - * opens from disk. A linked asset carries `crossorigin`, which a browser refuses to - * fetch over `file://`, and this page is meant to be opened and passed around. - */ -export const singleFile = (): Plugin => ({ - name: "preview-single-file", - enforce: "post", - generateBundle(_options, bundle) { - const css = Object.values(bundle).filter( - (chunk): chunk is OutputAsset => - chunk.type === "asset" && chunk.fileName.endsWith(".css"), - ); - - for (const page of Object.values(bundle)) { - if (page.type !== "asset" || !page.fileName.endsWith(".html")) continue; - - page.source = css.reduce( - (html, asset) => - html.replace( - new RegExp( - `]+href="[^"]*${asset.fileName.replace(/[.*+?^$()|[\]\\]/g, "\\$&")}"[^>]*>`, - ), - ``, - ), - String(page.source), - ); - } - - for (const asset of css) delete bundle[asset.fileName]; - }, -}); diff --git a/packages/preview/src/preset-model.spec.ts b/packages/preview/src/preset-model.spec.ts new file mode 100644 index 00000000..d1910d9b --- /dev/null +++ b/packages/preview/src/preset-model.spec.ts @@ -0,0 +1,133 @@ +import { describe, expect, it } from "vitest"; +import type { Preset, PresetSide } from "./data/color/presets.js"; +import { buildPreset, markTwins, type Swatch } from "./preset-model.js"; +import { ACCENTS, FAMILIES, type Family, ROLES, SHADES } from "./variants.js"; + +/** A gray ramp from white to black, the same on every family. */ +const ramp = (i: number) => { + const v = Math.round(255 - (i * 255) / 9); + return `rgb(${v}, ${v}, ${v})`; +}; + +/** A preset whose every shade is set by one function, so a test can shape it. */ +const side = (literal: (family: Family, key: string) => string): PresetSide => { + const values: Record = {}; + + for (const family of FAMILIES) { + SHADES.forEach((key, i) => { + values[`${family}-${key}`] = literal(family, key) ?? ramp(i); + }); + for (const key of ACCENTS) + values[`${family}-${key}`] = literal(family, key); + for (const key of ROLES) values[`${family}-${key}`] = literal(family, key); + } + + return { vars: { "--ig-primary-500": "#09f" }, values }; +}; + +const preset = (literal: (family: Family, key: string) => string): Preset => ({ + key: "material", + label: "Material", + theme: "light", + seeds: { + primary: "#0099ff", + secondary: "#df1b74", + gray: "#333333", + surface: "#ffffff", + info: "#1377d5", + success: "#4eb862", + warn: "#faa419", + error: "#ff134a", + }, + legacy: side(literal), + fitted: side(literal), +}); + +const grayscale = (_: Family, key: string) => { + const i = SHADES.indexOf(key as (typeof SHADES)[number]); + return i >= 0 ? ramp(i) : "rgb(128, 128, 128)"; +}; + +describe("buildPreset", () => { + const model = buildPreset(preset(grayscale)); + + it("measures chromatic families against white, whatever the page", () => { + const primary = model.families[0].shades[0]; + expect(primary.swatches[0].against).toBe("white"); + expect(primary.swatches[0].ratio).toBeCloseTo(1, 5); + expect(primary.swatches[9].ratio).toBeCloseTo(21, 3); + }); + + it("measures the neutrals against the page", () => { + const gray = model.surface.grays[0]; + expect(gray.swatches[0].against).toBe("the page #ffffff"); + }); + + it("only lets the numbered ramps take part in the probe", () => { + const [family] = model.families; + expect(family.shades.every((row) => row.probeable)).toBe(true); + expect(family.accents.every((row) => !row.probeable)).toBe(true); + }); + + it("names the token each swatch paints from", () => { + expect(model.families[0].shades[0].swatches[4].token).toBe( + "--ig-primary-400", + ); + }); + + it("flags a shade the generator asked for outside sRGB", () => { + const clipped = buildPreset( + preset((family, key) => + family === "primary" && key === "50" + ? "hsl(0, 0%, 174%)" + : grayscale(family, key), + ), + ); + const [first, second] = clipped.families[0].shades[0].swatches; + + expect(first.clipped).toBe(true); + expect(first.hex).toBe("#ffffff"); + expect(second.clipped).toBe(false); + }); + + it("reports a role that resolved onto the page as collapsed", () => { + const flat = buildPreset( + preset((family, key) => + family === "surface" && key === "raised" + ? "#ffffff" + : grayscale(family, key), + ), + ); + const raised = flat.surface.roles.find((r) => r.key === "raised"); + const sunken = flat.surface.roles.find((r) => r.key === "sunken"); + + expect(raised?.collapsed).toBe(true); + expect(sunken?.collapsed).toBe(false); + }); +}); + +describe("markTwins", () => { + const swatch = (key: string, hex: string): Swatch => ({ + key, + hex, + token: "", + rgb: [0, 0, 0], + ratio: 1, + against: "", + clipped: false, + same: [], + }); + + it("lists, on each shade, every other shade with the same color", () => { + const swatches = [ + swatch("50", "#fff"), + swatch("100", "#fff"), + swatch("200", "#eee"), + ]; + markTwins(swatches); + + expect(swatches[0].same).toEqual(["100"]); + expect(swatches[1].same).toEqual(["50"]); + expect(swatches[2].same).toEqual([]); + }); +}); diff --git a/packages/preview/src/preset-model.ts b/packages/preview/src/preset-model.ts new file mode 100644 index 00000000..326d4154 --- /dev/null +++ b/packages/preview/src/preset-model.ts @@ -0,0 +1,250 @@ +/** Turns a compiled preset into the view model the color views render. */ + +import { + composite, + contrast, + displayable, + hex, + parse, + parseRaw, + type Rgb, + toRgb, +} from "./color.js"; +import type { Preset, PresetSide } from "./data/color/presets.js"; +import { + ACCENTS, + type Family, + ROLES, + type RoleKey, + SHADES, + type Theme, +} from "./variants.js"; + +/** Below this the shade is indistinguishable from the surface it sits on. */ +const SAME = 1.005; + +/** + * The families that get the full ten shades plus accents. `gray` and `surface` are + * shown on their own terms, because both are about the page rather than about a color. + */ +export const CHROMATIC: { key: Family; label: string }[] = [ + { key: "primary", label: "Primary" }, + { key: "secondary", label: "Secondary" }, + { key: "info", label: "Info" }, + { key: "success", label: "Success" }, + { key: "warn", label: "Warn" }, + { key: "error", label: "Error" }, +]; + +export interface Swatch { + key: string; + token: string; + rgb: Rgb; + ratio: number; + hex: string; + against: string; + /** The shade asked for a color outside sRGB, and the browser clipped it to fit. */ + clipped: boolean; + /** Keys of other shades in the same row that resolve to this exact color. */ + same: string[]; +} + +export interface Row { + /** The custom properties this row paints from, applied to its own subtree. */ + vars: Record; + label: string; + swatches: Swatch[]; + /** Whether a pinned shade number applies here. Accents run on their own keys. */ + probeable: boolean; +} + +export interface Role { + key: RoleKey; + /** Contrast against the page. */ + away: number; + /** The role had no room and resolved onto the page. */ + collapsed: boolean; +} + +export interface FamilyBlock { + key: Family; + label: string; + seed: string; + shades: Row[]; + accents: Row[]; +} + +export interface SurfaceBlock { + /** The page the preset paints on, and what grays are measured against. */ + bg: string; + seed: string; + fittedVars: Record; + legacySurface: Row; + roles: Role[]; + grays: Row[]; +} + +export interface PresetModel { + key: string; + label: string; + theme: Theme; + bg: string; + families: FamilyBlock[]; + surface: SurfaceBlock; +} + +interface RowSpec { + side: PresetSide; + label: string; + family: Family; + keys: readonly string[]; + against: Rgb; + againstLabel: string; + /** Whether the row takes part in the probe, which only the numbered ramps do. */ + probeable?: boolean; +} + +const swatch = ( + family: Family, + key: string, + literal: string, + against: Rgb, + label: string, +): Swatch => { + const color = composite(parse(literal), against); + + return { + key, + token: `--ig-${family}-${key}`, + rgb: color, + ratio: contrast(color, against), + hex: hex(color), + against: label, + clipped: !displayable(toRgbRaw(literal)), + same: [], + }; +}; + +const toRgbRaw = (literal: string): Rgb => { + const [r, g, b] = parseRaw(literal); + return [r, g, b]; +}; + +/** + * Marks every shade that resolves to the same color as another in its row. + * + * Two tokens with one color is the quiet failure: a border drawn in 600 over a fill of + * 700 simply is not there, and nothing in the markup says so. It happens when a ramp is + * asked for ten steps in a direction that has fewer than ten left. + */ +export const markTwins = (swatches: Swatch[]) => { + const byColor = new Map(); + + for (const entry of swatches) { + const group = byColor.get(entry.hex) ?? []; + group.push(entry); + byColor.set(entry.hex, group); + } + + for (const group of byColor.values()) { + if (group.length < 2) continue; + + for (const entry of group) { + entry.same = group.filter((o) => o !== entry).map((o) => o.key); + } + } +}; + +const row = ({ + side, + label, + family, + keys, + against, + againstLabel, + probeable = false, +}: RowSpec): Row => { + const swatches = keys.map((key) => + swatch(family, key, side.values[`${family}-${key}`], against, againstLabel), + ); + + markTwins(swatches); + + return { vars: side.vars, label, swatches, probeable }; +}; + +const WHITE: Rgb = [255, 255, 255]; + +export const buildPreset = (preset: Preset): PresetModel => { + const bg = preset.seeds.surface; + const page = toRgb(bg); + + // Chromatic families are cut against white whatever the page is, so that is what + // their numbers are measured against — the page would be a different claim. + const chromatic = ( + side: PresetSide, + label: string, + family: Family, + keys: readonly string[], + probeable: boolean, + ) => + row({ + side, + label, + family, + keys, + against: WHITE, + againstLabel: "white", + probeable, + }); + + const onPage = (side: PresetSide, label: string, family: Family) => + row({ + side, + label, + family, + keys: SHADES, + against: page, + againstLabel: `the page ${bg}`, + probeable: true, + }); + + const families = CHROMATIC.map(({ key, label }) => ({ + key, + label, + seed: preset.seeds[key], + shades: [ + chromatic(preset.legacy, "legacy", key, SHADES, true), + chromatic(preset.fitted, "fitted", key, SHADES, true), + ], + accents: [ + chromatic(preset.legacy, "legacy accent", key, ACCENTS, false), + chromatic(preset.fitted, "fitted accent", key, ACCENTS, false), + ], + })); + + const roles = ROLES.map((key): Role => { + const literal = preset.fitted.values[`surface-${key}`]; + const away = contrast(composite(parse(literal), page), page); + return { key, away, collapsed: away < SAME }; + }); + + return { + key: preset.key, + label: preset.label, + theme: preset.theme, + bg, + families, + surface: { + bg, + seed: preset.seeds.gray, + fittedVars: preset.fitted.vars, + legacySurface: onPage(preset.legacy, "legacy", "surface"), + roles, + grays: [ + onPage(preset.legacy, "legacy", "gray"), + onPage(preset.fitted, "fitted", "gray"), + ], + }, + }; +}; diff --git a/packages/preview/src/ramp.spec.ts b/packages/preview/src/ramp.spec.ts new file mode 100644 index 00000000..63297338 --- /dev/null +++ b/packages/preview/src/ramp.spec.ts @@ -0,0 +1,91 @@ +import { describe, expect, it } from "vitest"; +import type { SweepRamp } from "./data/color/sweep.js"; +import { + clampedCount, + duplicateCount, + findings, + isClamped, + shadeHex, +} from "./ramp.js"; + +/** Ten grays from white to black, packed the way the provider packs them. */ +const grays = Array.from({ length: 10 }, (_, i) => { + const v = Math.round(255 - (i * 255) / 9) + .toString(16) + .padStart(2, "0"); + return `${v}${v}${v}`; +}); + +const ramp = (extra: Partial = {}): SweepRamp => ({ + hex: grays.join(""), + mask: 0, + ask: [], + ...extra, +}); + +describe("reading a packed ramp", () => { + it("addresses shades by index", () => { + expect(shadeHex(ramp(), 0)).toBe("#ffffff"); + expect(shadeHex(ramp(), 9)).toBe("#000000"); + }); + + it("reads the clamped bits", () => { + const clamped = ramp({ mask: 0b1000000001 }); + expect(isClamped(clamped, 0)).toBe(true); + expect(isClamped(clamped, 1)).toBe(false); + expect(isClamped(clamped, 9)).toBe(true); + expect(clampedCount(clamped)).toBe(2); + }); + + it("counts shades that resolve to the same color", () => { + const twins = ramp({ + hex: `ffffff${grays.slice(1).join("")}`.replace( + /^ffffff.{6}/, + "ffffffffffff", + ), + }); + expect(duplicateCount(twins)).toBe(1); + }); +}); + +describe("findings", () => { + it("leads with the AA record", () => { + expect(findings(ramp())[0]).toEqual({ + text: "all 5 AA pairs pass", + ok: true, + }); + + // Ten grays between 200 and 100: nothing five apart reaches 4.5:1. + const narrow = Array.from({ length: 10 }, (_, i) => { + const v = Math.round(200 - (i * 100) / 9) + .toString(16) + .padStart(2, "0"); + return `${v}${v}${v}`; + }); + expect(findings(ramp({ hex: narrow.join("") }))[0]).toEqual({ + text: "5 of 5 AA pairs fail", + ok: false, + }); + }); + + it("reports a clean ramp as clean", () => { + // Black-and-white alternation: every pair five apart is 21:1. + const stark = ramp({ + hex: Array.from({ length: 10 }, (_, i) => + i < 5 ? "ffffff" : "000000", + ).join(""), + }); + // Five identical whites are duplicates, so only the AA line and the duplicate line show. + expect(findings(stark).map((f) => f.text)).toEqual([ + "all 5 AA pairs pass", + "8 duplicates", + ]); + }); + + it("names clamping and duplicates when there are any, and sRGB when there are none", () => { + expect(findings(ramp()).map((f) => f.text)).toContain("all 10 inside sRGB"); + expect(findings(ramp({ mask: 0b11 })).map((f) => f.text)).toContain( + "2 shades clamped", + ); + }); +}); diff --git a/packages/preview/src/ramp.ts b/packages/preview/src/ramp.ts new file mode 100644 index 00000000..c7fab379 --- /dev/null +++ b/packages/preview/src/ramp.ts @@ -0,0 +1,53 @@ +/** Reading the packed ramps the sweep provider emits. Pure, shared by the view and its tests. */ +import { failingPairs, PAIR_DISTANCE, type Rgb, toRgb } from "./color.js"; +import type { SweepRamp } from "./data/color/sweep.js"; +import type { Finding } from "./elements/verdict.js"; +import { SHADES } from "./variants.js"; + +/** The six-digit hex of shade `i`, with its `#`. */ +export const shadeHex = (ramp: SweepRamp, i: number) => + `#${ramp.hex.slice(i * 6, i * 6 + 6)}`; + +export const shadeRgb = (ramp: SweepRamp, i: number): Rgb => + toRgb(shadeHex(ramp, i)); + +export const rampRgb = (ramp: SweepRamp): Rgb[] => + SHADES.map((_, i) => shadeRgb(ramp, i)); + +/** Whether the generator asked for shade `i` outside sRGB. */ +export const isClamped = (ramp: SweepRamp, i: number) => + ((ramp.mask >> i) & 1) === 1; + +export const clampedCount = (ramp: SweepRamp) => + SHADES.filter((_, i) => isClamped(ramp, i)).length; + +export const duplicateCount = (ramp: SweepRamp) => { + const shades = rampRgb(ramp); + return shades.length - new Set(shades.map(String)).size; +}; + +/** What the verdict beside a ramp says. */ +export const findings = (ramp: SweepRamp): Finding[] => { + const shades = rampRgb(ramp); + const pairs = shades.length - PAIR_DISTANCE; + const fails = failingPairs(shades); + const clamped = clampedCount(ramp); + const dup = duplicateCount(ramp); + const out: Finding[] = [ + { + text: fails + ? `${fails} of ${pairs} AA pairs fail` + : `all ${pairs} AA pairs pass`, + ok: fails === 0, + }, + ]; + + if (clamped) out.push({ text: `${clamped} shades clamped`, ok: false }); + if (dup) + out.push({ text: `${dup} duplicate${dup > 1 ? "s" : ""}`, ok: false }); + if (!clamped && !dup) { + out.push({ text: `all ${shades.length} inside sRGB`, ok: true }); + } + + return out; +}; diff --git a/packages/preview/src/render.ts b/packages/preview/src/render.ts deleted file mode 100644 index 90579a41..00000000 --- a/packages/preview/src/render.ts +++ /dev/null @@ -1,114 +0,0 @@ -/** Markup for the parts of the page that repeat over data. The chrome lives in index.html. */ -import { html, type Raw, raw } from "./html.js"; -import type { - Model, - Neutral, - Ramp, - Role, - Row, - Score, - Swatch, -} from "./model.js"; -import { ROLES } from "./palettes.js"; - -const ratio = (value: number) => `${value.toFixed(1)}:1`; - -const swatch = (s: Swatch) => html` - - ${s.key}${ratio(s.ratio)} - `; - -const strip = (row: Row) => html` -
- ${row.label} -
${row.swatches.map(swatch)}
- ${row.verdict} -
`; - -const rampBlock = (r: Ramp) => html` -
-
- -

${r.label}

${r.seed} - seed sits at ${r.lands}’s lightness -
-
${r.shades.map(strip)}
-
${r.accents.map(strip)}
-
`; - -const mock = (n: Neutral) => html` -
-
-
sunken — a well
-
- raiseda card that sits on the page -
-
-
overlaya menu above everything
-
`; - -const role = (n: Neutral, r: Role) => html` -
- -
${r.key}${r.collapsed ? "on the background" : `${r.away.toFixed(2)}:1 away`}
-
`; - -const surfaceBlock = (n: Neutral) => html` -
-

${n.label}

${n.bg}
-
- ${mock(n)} -
-
${strip(n.legacySurface)}
-

Ten numbered shades, no role names. On a page at either extreme most of them - collapse onto the background — the generator has nowhere left to go.

-
${ROLES.map((k) => role(n, n.roles.find((r) => r.key === k) as Role))}
-

Five roles that say what they are for. A role with no room resolves onto the - background on purpose, and the shadow carries the elevation instead.

-
-
-
`; - -const grayBlock = (n: Neutral) => html` -
-

${n.label}

${n.bg}
-
${n.grays.map(strip)}
-
`; - -const tile = ( - key: string, - now: string | number, - before: string | number, - note: string, -) => html` -
${key}${now} was ${before}${note}
`; - -const scoreboard = (s: Score) => [ - tile( - "AA pairs that fail", - s.fittedAA, - `${s.legacyAA} of ${s.pairs}`, - "Across every seed on this page. Five shades apart, both directions.", - ), - tile( - "Duplicate shades", - s.fittedDup, - s.legacyDup, - "Two tokens resolving to the same color, so a border vanishes into its fill.", - ), - tile( - "Surface roles", - ROLES.length, - "none", - "Named layers instead of ten numbers, nine of which no component referenced.", - ), -]; - -export const sections = (m: Model): Record => ({ - score: html`${scoreboard(m.score)}`, - ramps: html`${m.ramps.map(rampBlock)}`, - surfaces: html`${m.neutrals.map(surfaceBlock)}`, - grays: html`${m.neutrals.map(grayBlock)}`, - flavors: html`
${m.flavors.map((f) => strip(f.row))}
`, -}); diff --git a/packages/preview/src/sass-code.spec.ts b/packages/preview/src/sass-code.spec.ts new file mode 100644 index 00000000..aaa9f5c6 --- /dev/null +++ b/packages/preview/src/sass-code.spec.ts @@ -0,0 +1,112 @@ +import { describe, expect, it } from "vitest"; +import { + call, + entries, + list, + map, + num, + quoted, + raw, + statement, +} from "./sass-code.js"; + +describe("sass-code", () => { + it("keeps a short map on one line", () => { + expect( + statement( + "scale", + map([ + ["range", list(1.182, 18.232)], + ["curve", raw("null")], + ]), + ), + ).toBe("$scale: (range: 1.182 18.232, curve: null);"); + }); + + it("breaks a call that will not fit on one line", () => { + const code = statement( + "palette", + call("palette", [ + ["$primary", raw("#0099ff")], + ["$surface", raw("#fff")], + [ + "$scales", + map([ + [ + "'gray'", + map([ + ["range", list(1.1, 18.1)], + ["curve", raw("null")], + ]), + ], + ]), + ], + ]), + ); + + expect(code).toBe( + `$palette: palette( + $primary: #0099ff, + $surface: #fff, + $scales: ('gray': (range: 1.1 18.1, curve: null)) +);`, + ); + }); + + it("breaks a call that is merely long", () => { + const code = statement( + "palette", + call("palette", [ + ["$primary", raw("#0099ff")], + ["$secondary", raw("#df1b74")], + ["$surface", raw("#1a1a24")], + ["$gray", raw("#333333")], + ]), + ); + + expect(code.split("\n")).toHaveLength(6); + expect(code).toContain("\n $gray: #333333\n"); + }); + + it("keeps the trailing comma in a map and drops it in an argument list", () => { + const code = statement( + "p", + call("palette", [["$scales", map([["'gray'", quoted("carbon")]])]]), + ); + expect(code).toBe("$p: palette($scales: ('gray': 'carbon'));"); + }); + + it("ignores extra arguments, so `map(num)` cannot pass an index as the precision", () => { + expect( + [0.53, 0, 0.825].map(num).map((v) => (v as { text: string }).text), + ).toEqual(["0.53", "0", "0.825"]); + }); + + it("trims a number the way a person writes it", () => { + expect(statement("x", list(num(1.04), num(16.1)))).toBe("$x: 1.04 16.1;"); + expect(statement("y", num(0))).toBe("$y: 0;"); + expect(statement("z", num(0.5296))).toBe("$z: 0.53;"); + }); + + it("quotes only what asked to be quoted", () => { + expect( + statement( + "x", + map([ + ["a", quoted("gray")], + ["b", raw("gray")], + ]), + ), + ).toBe("$x: (a: 'gray', b: gray);"); + }); + + it("drops absent entries so callers do not branch", () => { + const args = entries({ + $primary: raw("#09f"), + $gray: undefined, + $surface: raw("#fff"), + }); + + expect(args.map(([key]) => key)).toEqual(["$primary", "$surface"]); + }); +}); diff --git a/packages/preview/src/sass-code.ts b/packages/preview/src/sass-code.ts new file mode 100644 index 00000000..6c2e4e14 --- /dev/null +++ b/packages/preview/src/sass-code.ts @@ -0,0 +1,102 @@ +/** + * Builds the Sass a demo shows, as a value rather than a string. + * + * The snippets are small but they nest, and every branch — a family that needs a + * `$gray` argument, a curve that is `null` rather than four numbers — used to be another + * ternary inside a template literal. Composing values and formatting once keeps the + * shape of the call readable and makes the output testable. + */ +export type Value = + | { kind: "raw"; text: string } + | { kind: "quoted"; text: string } + | { kind: "list"; items: Value[] } + | { kind: "map"; entries: Entry[] } + | { kind: "call"; name: string; args: Entry[] }; + +export type Entry = [string, Value]; + +/** + * A number, trimmed the way a person writes it: `1.04`, not `1.040`. + * + * Takes no precision argument on purpose. With one it is `Array.map`-shaped, and + * `values.map(num)` then passes the index as the precision — which reads fine and + * silently rounds the first element to zero decimals. + */ +export const num = (value: number): Value => + raw(String(Number(value.toFixed(3)))); + +/** A color, a number, an identifier, `null` — anything Sass reads literally. */ +export const raw = (text: string | number): Value => ({ + kind: "raw", + text: String(text), +}); + +/** A single-quoted string, as scale and family names are written. */ +export const quoted = (text: string): Value => ({ kind: "quoted", text }); + +/** Space separated, the way a `range` is written. */ +export const list = (...items: (string | number | Value)[]): Value => ({ + kind: "list", + items: items.map((item) => (typeof item === "object" ? item : raw(item))), +}); + +export const map = (entries: Entry[]): Value => ({ kind: "map", entries }); + +export const call = (name: string, args: Entry[]): Value => ({ + kind: "call", + name, + args, +}); + +/** Entries whose value is absent are dropped, so a caller can compose without branching. */ +export const entries = (source: Record): Entry[] => + Object.entries(source).filter( + (entry): entry is Entry => entry[1] !== undefined, + ); + +const WIDTH = 64; + +const inline = (value: Value): string => { + switch (value.kind) { + case "raw": + return value.text; + case "quoted": + return `'${value.text}'`; + case "list": + return value.items.map(inline).join(" "); + case "map": + return `(${value.entries.map(([key, item]) => `${key}: ${inline(item)}`).join(", ")})`; + case "call": + return `${value.name}(${value.args.map(([key, item]) => `${key}: ${inline(item)}`).join(", ")})`; + } +}; + +/** Broken across lines only when the flat form will not fit. */ +const format = (value: Value, depth: number): string => { + if (value.kind !== "map" && value.kind !== "call") return inline(value); + + const flat = inline(value); + + if (flat.length + depth * 4 <= WIDTH) return flat; + + const group = value.kind === "map" ? value.entries : value.args; + const pad = " ".repeat(depth + 1); + // A map keeps its trailing comma, the way they are usually written; an argument list + // does not, because nobody writes one that way. + const last = value.kind === "map" ? "," : ""; + const body = group + .map( + ([key, item], index) => + `${pad}${key}: ${format(item, depth + 1)}${index === group.length - 1 ? last : ","}`, + ) + .join("\n"); + const close = " ".repeat(depth); + + return value.kind === "map" + ? `(\n${body}\n${close})` + : `${value.name}(\n${body}\n${close})`; +}; + +/** A complete statement: `$name: ;` */ +export const statement = (name: string, value: Value) => + `$${name}: ${format(value, 0)};`; diff --git a/packages/preview/src/scale-math.spec.ts b/packages/preview/src/scale-math.spec.ts new file mode 100644 index 00000000..e70d7d41 --- /dev/null +++ b/packages/preview/src/scale-math.spec.ts @@ -0,0 +1,95 @@ +import { describe, expect, it } from "vitest"; +import { + ease, + IDENTITY_CURVE, + lookup, + rampFromTable, + SCALE_PRESETS, + type ScaleTable, + sameScale, + targets, +} from "./scale-math.js"; + +describe("ease", () => { + it("is the identity without a curve, and with the identity curve", () => { + for (const x of [0, 0.25, 0.5, 0.75, 1]) { + expect(ease(x, null)).toBe(x); + expect(ease(x, IDENTITY_CURVE)).toBeCloseTo(x, 6); + } + }); + + it("pins both ends whatever the curve", () => { + for (const { curve } of SCALE_PRESETS) { + expect(ease(0, curve)).toBeCloseTo(0, 6); + expect(ease(1, curve)).toBeCloseTo(1, 6); + } + }); + + it("bunches the light end under the material curve", () => { + const material = SCALE_PRESETS.find((p) => p.name === "material")?.curve; + // A slow start: the first third of the positions covers well under a third of the range. + expect(ease(1 / 3, material ?? null)).toBeLessThan(0.15); + }); +}); + +describe("targets", () => { + it("runs from the low end of the range to the high end", () => { + const [first, ...rest] = targets({ range: [1.2, 18], curve: null }); + expect(first).toBeCloseTo(1.2, 6); + expect(rest.at(-1)).toBeCloseTo(18, 6); + expect(rest).toHaveLength(9); + }); + + it("spaces a straight line geometrically", () => { + const t = targets({ range: [1, 16], curve: null }); + const ratios = t.slice(1).map((v, i) => v / t[i]); + for (const r of ratios) expect(r).toBeCloseTo(ratios[0], 6); + }); +}); + +describe("lookup", () => { + // Three samples per row, each a distinct hex, so the index chosen is visible. + const table: ScaleTable = { + samples: 3, + span: [1, 4], + rows: ["aaaaaabbbbbbcccccc", "111111222222333333"], + }; + + it("picks the sample nearest the requested contrast", () => { + expect(lookup(table, 0, 1)).toBe("aaaaaa"); + expect(lookup(table, 0, 2)).toBe("bbbbbb"); + expect(lookup(table, 0, 4)).toBe("cccccc"); + expect(lookup(table, 1, 2.1)).toBe("222222"); + }); + + it("clamps a request outside the span to the nearest end", () => { + expect(lookup(table, 0, 0.5)).toBe("aaaaaa"); + expect(lookup(table, 0, 40)).toBe("cccccc"); + }); + + it("reads one hex per shade position", () => { + expect( + rampFromTable( + { ...table, rows: Array(10).fill(table.rows[0]) }, + { + range: [1, 4], + curve: null, + }, + ), + ).toHaveLength(10); + }); +}); + +describe("sameScale", () => { + it("compares the range and the curve by value", () => { + const [even, material] = SCALE_PRESETS; + expect(sameScale(even, { range: [1.182, 18.232], curve: null })).toBe(true); + expect( + sameScale(material, { + ...material, + curve: [...(material.curve ?? [0, 0, 0, 0])], + }), + ).toBe(true); + expect(sameScale(even, material)).toBe(false); + }); +}); diff --git a/packages/preview/src/scale-math.ts b/packages/preview/src/scale-math.ts new file mode 100644 index 00000000..0336d115 --- /dev/null +++ b/packages/preview/src/scale-math.ts @@ -0,0 +1,127 @@ +/** + * How a scale places ten shades between two contrast targets. This is the arithmetic + * `_generator.scss` performs, kept in one place so the editor, the lookup table and the + * tests that check the table against Sass all agree on it. + */ + +/** Cubic bezier control points, `(x1, y1, x2, y2)`, as the Sass `curve` option takes them. */ +export type Curve = [number, number, number, number]; + +export interface Scale { + /** Contrast of shade 50 and shade 900 against the anchor. */ + range: [number, number]; + /** How positions are eased between them. `null` is a straight line. */ + curve: Curve | null; +} + +export interface ScalePreset extends Scale { + name: string; + /** What the preset is for, in one line. */ + why: string; +} + +/** The scales the library ships, with the figures `_scales.scss` documents. */ +export const SCALE_PRESETS: ScalePreset[] = [ + { + name: "even", + range: [1.182, 18.232], + curve: null, + why: "Maximum separation. The default.", + }, + { + name: "material", + range: [1.04, 16.1], + curve: [0.53, 0, 0.825, 0.785], + why: "Our original grayscale.", + }, + { + name: "tailwind", + range: [1.04, 17.76], + curve: [0.615, 0.07, 0.225, 0.43], + why: "Tailwind v4 slate.", + }, + { + name: "carbon", + range: [1.1, 18.1], + curve: [0.525, 0.295, 0.655, 0.87], + why: "IBM Carbon gray 10–100.", + }, +]; + +/** + * Control points for a straight line. A cubic bezier with its handles at 1/3 and 2/3 + * reduces exactly to `t`, so an editor can show and drag them while `curve` is still + * null without the rendered ramp shifting. + */ +export const IDENTITY_CURVE: Curve = [1 / 3, 1 / 3, 2 / 3, 2 / 3]; + +/** One axis of a cubic bezier from (0,0) to (1,1). */ +export const bezier = (t: number, p1: number, p2: number) => { + const u = 1 - t; + return 3 * u * u * t * p1 + 3 * u * t * t * p2 + t ** 3; +}; + +/** The same easing `_ease()` performs in the generator: solve x for t, then read y. */ +export const ease = (x: number, curve: Curve | null) => { + if (!curve) return x; + + let lo = 0; + let hi = 1; + + for (let i = 0; i < 24; i++) { + const mid = (lo + hi) / 2; + if (bezier(mid, curve[0], curve[2]) < x) lo = mid; + else hi = mid; + } + + return bezier((lo + hi) / 2, curve[1], curve[3]); +}; + +/** Where a shade sits on the 0–1 axis, before easing. */ +export const position = (index: number, count = 10) => index / (count - 1); + +/** The contrast a shade at eased position `t` aims for: geometric between the two ends. */ +export const target = ([lo, hi]: [number, number], t: number) => + lo * (hi / lo) ** t; + +/** The ten contrast targets a scale asks for, in shade order. */ +export const targets = ({ range, curve }: Scale, count = 10) => + Array.from({ length: count }, (_, i) => + target(range, ease(position(i, count), curve)), + ); + +/** + * A `(position, contrast target) -> color` table sampled geometrically across a span. + * Each row is one shade position; each entry is a six-digit hex, concatenated. + */ +export interface ScaleTable { + samples: number; + span: [number, number]; + /** One string per shade position. */ + rows: string[]; +} + +/** The hex at `position` nearest to `contrast`, by index into the sampled span. */ +export const lookup = ( + table: ScaleTable, + position: number, + contrast: number, +) => { + const { samples, span, rows } = table; + const fraction = Math.log(contrast / span[0]) / Math.log(span[1] / span[0]); + const k = Math.min( + samples - 1, + Math.max(0, Math.round(fraction * (samples - 1))), + ); + + return rows[position].slice(k * 6, k * 6 + 6); +}; + +/** The ten hexes a scale produces from a table. */ +export const rampFromTable = (table: ScaleTable, scale: Scale) => + targets(scale).map((contrast, i) => lookup(table, i, contrast)); + +export const sameScale = (a: Scale, b: Scale) => + a.range[0] === b.range[0] && + a.range[1] === b.range[1] && + String(a.curve) === String(b.curve); diff --git a/packages/preview/src/sections/color/controls.ts b/packages/preview/src/sections/color/controls.ts new file mode 100644 index 00000000..9c72b579 --- /dev/null +++ b/packages/preview/src/sections/color/controls.ts @@ -0,0 +1,76 @@ +import "../../elements/index.js"; +import { html, LitElement } from "lit"; +import { define } from "../../define.js"; +import { isPresetKey, isTheme, PRESETS, THEMES } from "../../variants.js"; +import { ColorStateController, setColorState } from "./state.js"; + +/** `igcSelect` carries the chosen button's value; an empty group emits undefined. */ +type Select = CustomEvent; + +/** + * The section's one input. Every view below reads what this writes, so a reader changes a + * palette once and watches the shades, the surface roles and the scale editor all move + * together. + * + * Built from the library's own button groups: this app demonstrates a theming framework, + * so its controls should be the components that framework themes. + */ +export class ColorControls extends LitElement { + private state = new ColorStateController(this); + + createRenderRoot() { + return this; + } + + render() { + const { preset, theme } = this.state.value; + + return html` +
+ Palette + { + if (isPresetKey(detail)) setColorState({ preset: detail }); + }} + > + ${PRESETS.map( + (entry) => html` + + ${entry.label} + + `, + )} + +
+ +
+ Theme + { + if (isTheme(detail)) setColorState({ theme: detail }); + }} + > + ${THEMES.map( + (entry) => html` + + ${entry === "light" ? "Light" : "Dark"} + + `, + )} + +
+ `; + } +} + +define("ig-color-controls", ColorControls); + +declare global { + interface HTMLElementTagNameMap { + "ig-color-controls": ColorControls; + } +} diff --git a/packages/preview/src/sections/color/grade.spec.ts b/packages/preview/src/sections/color/grade.spec.ts new file mode 100644 index 00000000..919b6f6e --- /dev/null +++ b/packages/preview/src/sections/color/grade.spec.ts @@ -0,0 +1,61 @@ +import { describe, expect, it } from "vitest"; +import type { Swatch } from "../../preset-model.js"; +import { describe as describeSwatch, grade, listKeys, ratio } from "./grade.js"; + +const swatch = (extra: Partial = {}): Swatch => ({ + key: "500", + token: "--ig-primary-500", + rgb: [0, 153, 255], + ratio: 3.02, + hex: "#0099ff", + against: "white", + clipped: false, + same: [], + ...extra, +}); + +describe("grade", () => { + it("awards the best threshold a ratio clears", () => { + expect(grade(7)).toBe("AAA"); + expect(grade(4.5)).toBe("AA"); + expect(grade(3.2)).toBe("UI"); + expect(grade(2.9)).toBeNull(); + }); + + it("prints a ratio to one decimal", () => { + expect(ratio(4.456)).toBe("4.5:1"); + }); +}); + +describe("listKeys", () => { + it("reads as a sentence", () => { + expect(listKeys(["50"])).toBe("50"); + expect(listKeys(["50", "100"])).toBe("50 and 100"); + expect(listKeys(["50", "100", "200"])).toBe("50, 100 and 200"); + }); +}); + +describe("describe", () => { + it("names the token, the color and the ratio against the row's anchor", () => { + expect(describeSwatch(swatch(), null, 3.02)).toBe( + "--ig-primary-500 #0099ff 3.02:1 vs white", + ); + }); + + it("grades the ratio when a reference is pinned", () => { + expect(describeSwatch(swatch(), "100", 4.8)).toContain( + "4.80:1 vs 100 · AA", + ); + expect(describeSwatch(swatch(), "100", 1.2)).toContain("below 3:1"); + }); + + it("says what is wrong with the shade", () => { + const text = describeSwatch( + swatch({ same: ["600"], clipped: true }), + null, + 1, + ); + expect(text).toContain("same color as 600"); + expect(text).toContain("outside sRGB"); + }); +}); diff --git a/packages/preview/src/sections/color/grade.ts b/packages/preview/src/sections/color/grade.ts new file mode 100644 index 00000000..62cba862 --- /dev/null +++ b/packages/preview/src/sections/color/grade.ts @@ -0,0 +1,41 @@ +/** How a measured contrast is reported to the reader. Pure, so it is easy to test. */ +import type { Swatch } from "../../preset-model.js"; + +/** WCAG thresholds, coarsest last, so the first match is the best grade a ratio earns. */ +const GRADES: [number, string][] = [ + [7, "AAA"], + [4.5, "AA"], + [3, "UI"], +]; + +/** The best grade a ratio earns, or null when it clears none of them. */ +export const grade = (value: number) => + GRADES.find(([min]) => value >= min)?.[1] ?? null; + +export const ratio = (value: number) => `${value.toFixed(1)}:1`; + +/** `50, 100 and 200` */ +export const listKeys = (keys: string[]) => + keys.length > 1 + ? `${keys.slice(0, -1).join(", ")} and ${keys.at(-1)}` + : keys[0]; + +/** The tooltip for a swatch: token, hex, the measured ratio, and whatever is wrong with it. */ +export const describe = ( + swatch: Swatch, + against: string | null, + value: number, +) => { + const notes = [`${swatch.token} ${swatch.hex}`]; + + notes.push( + against + ? `${value.toFixed(2)}:1 vs ${against} · ${grade(value) ?? "below 3:1"}` + : `${value.toFixed(2)}:1 vs ${swatch.against}`, + ); + + if (swatch.same.length) notes.push(`same color as ${listKeys(swatch.same)}`); + if (swatch.clipped) notes.push("outside sRGB, clipped to fit"); + + return notes.join(" "); +}; diff --git a/packages/preview/src/sections/color/index.ts b/packages/preview/src/sections/color/index.ts new file mode 100644 index 00000000..a9cd134c --- /dev/null +++ b/packages/preview/src/sections/color/index.ts @@ -0,0 +1,46 @@ +import type { SectionDef } from "../types.js"; + +export const color: SectionDef = { + id: "color", + title: "Color", + blurb: + "One seed becomes ten shades. Pick a palette the library ships and watch the same seeds run through every view below.", + controls: { + tag: "ig-color-controls", + load: () => import("./controls.js"), + }, + views: [ + { + id: "shades", + title: "Shades", + teaches: + "What changes when shades are cut to their own hue instead of multiplied by a fixed table.", + tag: "ig-view-shades", + load: () => import("./shades.js"), + }, + { + id: "neutrals", + title: "Neutrals", + teaches: + "Why surface stopped being ten numbered shades, and what a family anchored to the page buys you at either extreme.", + tag: "ig-view-neutrals", + load: () => import("./neutrals.js"), + }, + { + id: "scales", + title: "Scales", + teaches: + "How a scale decides where the ten shades sit, and what a bunched light end costs you.", + tag: "ig-view-scales", + load: () => import("./scales.js"), + }, + { + id: "sweep", + title: "Sweep", + teaches: + "The receipts: 1080 seeds through both generators, and what the sRGB gamut has to do with it.", + tag: "ig-view-sweep", + load: () => import("./sweep.js"), + }, + ], +}; diff --git a/packages/preview/src/sections/color/model.ts b/packages/preview/src/sections/color/model.ts new file mode 100644 index 00000000..e5944f50 --- /dev/null +++ b/packages/preview/src/sections/color/model.ts @@ -0,0 +1,20 @@ +import data from "virtual:data/color.presets"; +import { buildPreset, type PresetModel } from "../../preset-model.js"; +import type { ColorState } from "./state.js"; + +/** Built once per preset and kept, so flipping back and forth is a lookup. */ +const cache = new Map(); + +export const modelFor = ({ preset, theme }: ColorState): PresetModel => { + const id = `${preset}-${theme}`; + const hit = cache.get(id); + if (hit) return hit; + + const record = + data.presets.find((p) => p.key === preset && p.theme === theme) ?? + data.presets[0]; + const built = buildPreset(record); + cache.set(id, built); + + return built; +}; diff --git a/packages/preview/src/sections/color/neutrals.ts b/packages/preview/src/sections/color/neutrals.ts new file mode 100644 index 00000000..522d40bb --- /dev/null +++ b/packages/preview/src/sections/color/neutrals.ts @@ -0,0 +1,115 @@ +import "../../elements/index.js"; +import { html, LitElement } from "lit"; +import { define } from "../../define.js"; +import type { Role, SurfaceBlock } from "../../preset-model.js"; +import { modelFor } from "./model.js"; +import { ColorStateController, setColorState } from "./state.js"; +import { legend, type Probe, strip } from "./strip.js"; + +/** A page built from nothing but the five surface roles, text included. */ +const mock = (surface: SurfaceBlock) => html` + +
+
sunken — a well
+
+ raiseda card that sits on the page +
+
+
+
+ overlaya menu above everything +
+ +`; + +const role = (surface: SurfaceBlock, r: Role) => html` +
+ + + +
+ ${r.key} + + ${r.collapsed ? "on the background" : `${r.away.toFixed(2)}:1 away`} + +
+
+`; + +/** + * Surface stopped being ten numbered shades, and gray stopped being anchored to white. + * Both are about the page rather than about a color, which is why they share a view. + */ +export class ViewNeutrals extends LitElement { + private state = new ColorStateController(this); + + private get probe(): Probe { + return { + pinned: this.state.value.pinned, + pin: (pinned) => setColorState({ pinned }), + }; + } + + createRenderRoot() { + return this; + } + + render() { + const model = modelFor(this.state.value); + const surface = model.surface; + + return html` +
+
+ +

${model.label} ${model.theme}

+ ${surface.bg} +
+
+ ${mock(surface)} +
+
${strip(surface.legacySurface, this.probe)}
+

+ Ten numbered shades, no role names. On a page at either extreme most of + them collapse onto the background — the generator has nowhere left to + go. +

+ + ${surface.roles.map((r) => role(surface, r))} + +

+ Five roles that say what they are for. A role with no room resolves onto + the background on purpose, and the shadow carries the elevation instead. + The mock on the left is built entirely from them, text included. +

+
+
+
+ + ${legend(this.probe)} + +

Grayscale

+

+ Anchored to the background rather than to white, so shade 50 always sits nearest + the page — in either theme. Seeded with ${surface.seed}. +

+
+
${surface.grays.map((row) => strip(row, this.probe))}
+

+ Both sides fail the same two pairs on purpose: the gray family defaults to the + material scale, which keeps the rhythm our grayscale has always + had and trades two AA pairs for it. Range and curve, below, is where that + trade is made — and undone. +

+
+ `; + } +} + +define("ig-view-neutrals", ViewNeutrals); + +declare global { + interface HTMLElementTagNameMap { + "ig-view-neutrals": ViewNeutrals; + } +} diff --git a/packages/preview/src/sections/color/scales.ts b/packages/preview/src/sections/color/scales.ts new file mode 100644 index 00000000..6b1ba554 --- /dev/null +++ b/packages/preview/src/sections/color/scales.ts @@ -0,0 +1,397 @@ +import "../../elements/index.js"; +import data from "virtual:data/color.scales"; +import { html, LitElement } from "lit"; +import { + AA, + contrast, + PAIR_DISTANCE, + readableOn, + shadePairs, + toRgb, +} from "../../color.js"; +import type { ScaleSubject } from "../../data/color/scales.js"; +import { define } from "../../define.js"; +import type { CurvePoint } from "../../elements/curve-editor.js"; +import { + call, + entries, + list, + map, + num, + raw, + statement, +} from "../../sass-code.js"; +import { + type Curve, + ease, + lookup, + position, + rampFromTable, + SCALE_PRESETS, + type Scale, + type ScalePreset, + sameScale, + target, +} from "../../scale-math.js"; +import { SHADES } from "../../variants.js"; +import { ColorStateController } from "./state.js"; + +/** The two ends of the range cannot cross; this keeps them apart on the sliders. */ +const MIN_RANGE = 0.5; +/** Past the subject's ceiling by more than this, the dark end is visibly compressing. */ +const CEILING_SLACK = 0.05; + +interface Step { + key: string; + x: number; + t: number; + target: number; + hex: string; + reached: number; +} + +/** Range and curve, made editable. */ +export class ViewScales extends LitElement { + static properties = { + subject: { state: true }, + lo: { state: true }, + hi: { state: true }, + curve: { state: true }, + }; + + declare subject: string; + declare lo: number; + declare hi: number; + declare curve: Curve | null; + + private state = new ColorStateController(this); + + constructor() { + super(); + this.subject = ""; + this.apply(SCALE_PRESETS[0]); + } + + createRenderRoot() { + return this; + } + + /** + * The first render happens before `igc-slider` has upgraded, so Lit's `value` property + * lands while the element still holds default bounds and gets quantised against them. + * One re-render after the definition resolves is enough; `updated()` then asserts the + * real value. + */ + async firstUpdated() { + await customElements.whenDefined("igc-slider"); + this.requestUpdate(); + } + + /** + * Keeps each slider's thumb on the number its label reports. Both steps are 0.01, the + * precision the labels print at, so the two can always agree exactly. + */ + updated() { + const sliders = [ + ["scale-lo", this.lo], + ["scale-hi", this.hi], + ] as const; + + for (const [id, value] of sliders) { + const slider = this.querySelector( + `#${id}`, + ); + if (slider && slider.value !== value) slider.value = value; + } + } + + /** + * Only the subjects the selected palette actually has. The section's control bar owns + * the seed, so this view shows what that seed produces rather than a menu of seeds of + * its own. + */ + private get available(): ScaleSubject[] { + const { preset, theme } = this.state.value; + const tag = `${preset}-${theme}`; + const matching = data.subjects.filter((s) => s.presets.includes(tag)); + + return matching.length ? matching : data.subjects; + } + + /** Falls back rather than resetting, so switching palette keeps the reader's place. */ + private get current(): ScaleSubject { + const available = this.available; + return available.find((s) => s.key === this.subject) ?? available[0]; + } + + private get scale(): Scale { + return { range: [this.lo, this.hi], curve: this.curve }; + } + + private get ramp(): Step[] { + const subject = this.current; + const anchor = toRgb(subject.anchor); + + return SHADES.map((key, i) => { + const x = position(i); + const t = ease(x, this.curve); + const wanted = target(this.scale.range, t); + const hex = `#${lookup(subject.table, i, wanted)}`; + + return { + key, + x, + t, + target: wanted, + hex, + reached: contrast(toRgb(hex), anchor), + }; + }); + } + + private apply({ range, curve }: Scale) { + this.lo = range[0]; + this.hi = range[1]; + this.curve = curve ? ([...curve] as Curve) : null; + } + + private get code() { + const { family, seed, surface } = this.current; + const neutral = family === "gray"; + + return statement( + "palette", + call( + "palette", + entries({ + $primary: raw(neutral ? "#0099ff" : seed), + $secondary: raw("#df1b74"), + $surface: raw(neutral ? surface : "#fff"), + $gray: neutral ? raw(seed) : undefined, + $scales: map([ + [ + `'${family}'`, + map([ + ["range", list(num(this.lo), num(this.hi))], + [ + "curve", + this.curve ? list(...this.curve.map(num)) : raw("null"), + ], + ]), + ], + ]), + }), + ), + ); + } + + private preset(preset: ScalePreset) { + const hexes = rampFromTable(this.current.table, preset); + const failing = shadePairs(hexes.map((h) => toRgb(`#${h}`))).filter( + (pair) => pair.contrast < AA, + ).length; + const pairs = SHADES.length - PAIR_DISTANCE; + + return html` + + `; + } + + private subjects(subject: ScaleSubject) { + return html` +
+ Subject + ) => { + if (detail) this.subject = detail; + }} + > + ${this.available.map( + (entry) => html` + + ${entry.label} + + `, + )} + +
+

+ ${subject.note} Highest contrast this subject can reach against + ${subject.anchor} is ${subject.ceiling.toFixed(2)}:1. +

+ `; + } + + private controls(subject: ScaleSubject) { + const overshoot = this.hi > subject.ceiling + CEILING_SLACK; + const curveLabel = this.curve + ? this.curve.map((v) => v.toFixed(2)).join(", ") + : "linear"; + + return html` +
+
+ + ) => { + this.lo = Math.min(detail, this.hi - MIN_RANGE); + }} + > +

Contrast of shade 50 against the anchor. At 1:1 it is the anchor.

+
+
+ + ) => { + this.hi = Math.max(detail, this.lo + MIN_RANGE); + }} + > +

+ ${ + overshoot + ? html`Past this subject’s ceiling of ${subject.ceiling.toFixed(2)}:1 — + the dark end compresses and pairs start to fail.` + : "Contrast of shade 900. Black on white is 21:1." + } +

+
+
+ Curve ${curveLabel} +

Drag the two handles on the chart, or nudge them with the arrow keys.

+ { + this.curve = null; + }}>Straight line +
+
+ `; + } + + /** Every guaranteed pair as a bar spanning the two shades, on a twenty-column grid. */ + private ladder(ramp: Step[]) { + return html` +
+ ${shadePairs(ramp.map((s) => toRgb(s.hex))).map((pair) => { + const ok = pair.contrast >= AA; + // Labels sit after the bar until the bar reaches the right edge, then before it. + const tail = pair.j >= SHADES.length - 3; + const bar = `${pair.i * 2 + 2} / ${pair.j * 2 + 2}`; + const label = tail + ? `1 / ${pair.i * 2 + 2}` + : `${pair.j * 2 + 2} / -1`; + + return html` +
+ + + ${ramp[pair.i].key}–${ramp[pair.j].key} ${pair.contrast.toFixed(1)}:1 + +
+ `; + })} +
+ `; + } + + private table(ramp: Step[]) { + return html` +
+ + + + + + ${ramp.map( + (s) => html` + + + + + + + + + `, + )} + +
ShadePositionAfter curveTargetReachedColor
${s.key}${s.x.toFixed(3)}${s.t.toFixed(3)}${s.target.toFixed(2)}:1 s.target * 0.05 ? "is-miss" : ""}> + ${s.reached.toFixed(2)}:1 + ${s.hex}
+
+ `; + } + + render() { + const subject = this.current; + const ramp = this.ramp; + const points: CurvePoint[] = ramp.map(({ x, t, hex }) => ({ x, t, hex })); + + return html` +
${SCALE_PRESETS.map((p) => this.preset(p))}
+ + ${this.subjects(subject)} + ${this.controls(subject)} + +
+ ) => { + this.curve = detail; + }} + > + +
+ ${ramp.map( + (s) => html` + + ${s.key} + ${s.reached.toFixed(1)}:1 + + `, + )} +
+ + ${this.ladder(ramp)} +
+ + ${this.table(ramp)} + + + `; + } +} + +define("ig-view-scales", ViewScales); + +declare global { + interface HTMLElementTagNameMap { + "ig-view-scales": ViewScales; + } +} diff --git a/packages/preview/src/sections/color/shades.ts b/packages/preview/src/sections/color/shades.ts new file mode 100644 index 00000000..b21132bc --- /dev/null +++ b/packages/preview/src/sections/color/shades.ts @@ -0,0 +1,77 @@ +import "../../elements/index.js"; +import { html, LitElement } from "lit"; +import { define } from "../../define.js"; +import type { FamilyBlock } from "../../preset-model.js"; +import { call, type Entry, raw, statement } from "../../sass-code.js"; +import { modelFor } from "./model.js"; +import { ColorStateController, setColorState } from "./state.js"; +import { legend, type Probe, strip } from "./strip.js"; + +const block = (family: FamilyBlock, probe: Probe) => html` +
+
+ +

${family.label}

+ ${family.seed} +
+
${family.shades.map((row) => strip(row, probe))}
+
${family.accents.map((row) => strip(row, probe))}
+
+`; + +/** + * The selected palette, as it ships and as the fitted generator rebuilds it from the + * very seeds the shipped palette records. Same input on both sides, which is the only + * way the comparison means anything. + */ +export class ViewShades extends LitElement { + private state = new ColorStateController(this); + + private get probe(): Probe { + return { + pinned: this.state.value.pinned, + pin: (pinned) => setColorState({ pinned }), + }; + } + + createRenderRoot() { + return this; + } + + render() { + const model = modelFor(this.state.value); + const args: Entry[] = [ + ...model.families.map( + (family): Entry => [`$${family.key}`, raw(family.seed.toLowerCase())], + ), + ["$gray", raw(model.surface.seed.toLowerCase())], + ["$surface", raw(model.bg.toLowerCase())], + ]; + + return html` +

+ The guarantee: any two shades 500 apart clear WCAG AA. It holds by construction + under fitted, and by accident — or not at all — under + legacy. Hover any swatch for its token, its measured ratio and + whatever is wrong with it. +

+ + ${legend(this.probe)} + + ${model.families.map((family) => block(family, this.probe))} + + + `; + } +} + +define("ig-view-shades", ViewShades); + +declare global { + interface HTMLElementTagNameMap { + "ig-view-shades": ViewShades; + } +} diff --git a/packages/preview/src/sections/color/state.spec.ts b/packages/preview/src/sections/color/state.spec.ts new file mode 100644 index 00000000..4c58d8cb --- /dev/null +++ b/packages/preview/src/sections/color/state.spec.ts @@ -0,0 +1,80 @@ +// @vitest-environment happy-dom +import { describe, expect, it } from "vitest"; +import { + ColorStateController, + getColorState, + readColorState, + setColorState, + writeColorState, +} from "./state.js"; + +describe("readColorState", () => { + it("reads the selection from the hash query", () => { + expect(readColorState("#/color/shades?preset=fluent&theme=dark")).toEqual({ + preset: "fluent", + theme: "dark", + pinned: null, + }); + }); + + it("falls back to material light for anything it does not recognise", () => { + expect(readColorState("#/color?preset=nope&theme=sepia")).toMatchObject({ + preset: "material", + theme: "light", + }); + expect(readColorState("")).toMatchObject({ + preset: "material", + theme: "light", + }); + }); +}); + +describe("writeColorState", () => { + const state = { preset: "bootstrap", theme: "dark", pinned: "100" } as const; + + it("keeps the path and rewrites the query", () => { + expect(writeColorState("#/color/scales?preset=material", state)).toBe( + "#/color/scales?preset=bootstrap&theme=dark", + ); + }); + + it("leaves other parameters alone, and never writes the pin", () => { + expect(writeColorState("#/color?x=1", state)).toBe( + "#/color?x=1&preset=bootstrap&theme=dark", + ); + }); + + it("starts from the color section when the hash is empty", () => { + expect(writeColorState("", state)).toBe( + "#/color?preset=bootstrap&theme=dark", + ); + }); +}); + +describe("the store", () => { + it("updates the hash without navigating, and tells its hosts", () => { + let updates = 0; + const host = { + addController() {}, + removeController() {}, + requestUpdate: () => updates++, + updateComplete: Promise.resolve(true), + }; + const controller = new ColorStateController(host); + controller.hostConnected(); + + setColorState({ preset: "fluent" }); + + expect(getColorState().preset).toBe("fluent"); + expect(controller.value.preset).toBe("fluent"); + expect(location.hash).toContain("preset=fluent"); + expect(updates).toBe(1); + + setColorState({ preset: "fluent" }); + expect(updates).toBe(1); + + controller.hostDisconnected(); + setColorState({ pinned: "50" }); + expect(updates).toBe(1); + }); +}); diff --git a/packages/preview/src/sections/color/state.ts b/packages/preview/src/sections/color/state.ts new file mode 100644 index 00000000..c9496b11 --- /dev/null +++ b/packages/preview/src/sections/color/state.ts @@ -0,0 +1,109 @@ +import type { ReactiveController, ReactiveControllerHost } from "lit"; +import { + isPresetKey, + isTheme, + type PresetKey, + type Theme, +} from "../../variants.js"; + +/** + * What every view in the color section reads. One store rather than one control per + * view: the point of the section is that a single seed set flows through the shades, the + * surface roles and the scale editor at once, and a reader should be able to see that by + * moving one control. + */ +export interface ColorState { + /** A palette the library ships, by name. */ + preset: PresetKey; + /** Which variant of it — the two differ in more than their background. */ + theme: Theme; + /** + * The shade number every numbered strip measures against, or null. + * + * Section state rather than per-view: it is one key space, and a reader who pins 100 in + * one place has asked the same question of every strip that has a 100. It stays out of + * the hash — a palette is a selection worth linking to, an inspection is not. + */ + pinned: string | null; +} + +const FALLBACK: ColorState = { + preset: "material", + theme: "light", + pinned: null, +}; + +/** The selection lives in the hash, so a link carries it and a reload keeps it. */ +export const readColorState = (hash: string): ColorState => { + const query = new URLSearchParams(hash.split("?")[1] ?? ""); + const preset = query.get("preset"); + const theme = query.get("theme"); + + return { + preset: isPresetKey(preset) ? preset : FALLBACK.preset, + theme: isTheme(theme) ? theme : FALLBACK.theme, + pinned: null, + }; +}; + +/** The hash with the selection written into its query, path untouched. */ +export const writeColorState = (hash: string, state: ColorState) => { + const [path, query = ""] = hash.split("?"); + const params = new URLSearchParams(query); + + params.set("preset", state.preset); + params.set("theme", state.theme); + + return `${path || "#/color"}?${params}`; +}; + +let state = readColorState(location.hash); +const listeners = new Set<() => void>(); + +export const getColorState = (): ColorState => state; + +export const setColorState = (patch: Partial) => { + const next = { ...state, ...patch }; + + if ( + next.preset === state.preset && + next.theme === state.theme && + next.pinned === state.pinned + ) { + return; + } + + state = next; + + // `replaceState` rather than assigning the hash: the selection is not a navigation, + // and a `hashchange` here would send the shell scrolling to the view in the path. + history.replaceState(null, "", writeColorState(location.hash, next)); + + for (const listener of listeners) listener(); +}; + +/** + * Re-renders its host whenever the selection changes. A controller rather than an event + * on the shell so a view is independent of where it is mounted. + */ +export class ColorStateController implements ReactiveController { + private readonly host: ReactiveControllerHost; + private readonly listener = () => this.host.requestUpdate(); + + constructor(host: ReactiveControllerHost) { + this.host = host; + host.addController(this); + } + + get value(): ColorState { + return state; + } + + hostConnected() { + listeners.add(this.listener); + } + + hostDisconnected() { + listeners.delete(this.listener); + } +} diff --git a/packages/preview/src/sections/color/strip.ts b/packages/preview/src/sections/color/strip.ts new file mode 100644 index 00000000..bc16be4b --- /dev/null +++ b/packages/preview/src/sections/color/strip.ts @@ -0,0 +1,178 @@ +/** A row of swatches the reader can pin one of, and the legend that explains it. */ +import { html, nothing } from "lit"; +import { contrast } from "../../color.js"; +import type { Row, Swatch } from "../../preset-model.js"; +import { describe, grade, listKeys, ratio } from "./grade.js"; + +/** + * A pinned shade number, and how to change it. + * + * It is a number rather than one swatch on purpose: pinning `100` makes every numbered + * row measure against its own `100`, so the legacy answer and the fitted answer appear + * side by side. The reader performs the comparison instead of being told it. + */ +export interface Probe { + pinned: string | null; + pin: (key: string | null) => void; +} + +/** + * One tooltip for the whole app, moved to whichever swatch is under the pointer or has + * focus. `igc-tooltip` takes a transient anchor, so a shared instance does the work that + * one instance per swatch would — and there are a hundred and twenty swatches on a page. + */ +type Tooltip = HTMLElement & { + show(target: Element): unknown; + hide(): unknown; +}; + +let tooltip: Tooltip | null = null; + +const sharedTooltip = (): Tooltip => { + if (!tooltip) { + tooltip = document.createElement("igc-tooltip") as Tooltip; + tooltip.setAttribute("placement", "bottom"); + tooltip.setAttribute("show-delay", "120"); + tooltip.setAttribute("hide-delay", "0"); + document.body.append(tooltip); + } + + return tooltip; +}; + +const swatch = ( + s: Swatch, + probe: Probe, + reference: Swatch | null, + focusable: string, +) => { + const isReference = reference?.key === s.key; + const measured = + reference && !isReference ? contrast(s.rgb, reference.rgb) : s.ratio; + const against = reference && !isReference ? reference.key : null; + const earned = against ? grade(measured) : null; + + const show = (event: Event) => { + const tip = sharedTooltip(); + tip.textContent = describe(s, against, measured); + tip.show(event.currentTarget as Element); + }; + const hide = () => sharedTooltip().hide(); + + return html` + + `; +}; + +/** Every swatch paints from the palette its own scope carries, not a document stylesheet. */ +export const strip = (row: Row, probe: Probe) => { + const reference = + row.probeable && probe.pinned + ? (row.swatches.find((s) => s.key === probe.pinned) ?? null) + : null; + const focusable = reference?.key ?? row.swatches[0].key; + + // Arrow keys move and pin in one go, which is what a radio group does. Escape clears, + // because a pinned shade is an inspection the reader needs a way out of. + const onKey = (event: KeyboardEvent) => { + if (event.key === "Escape") { + probe.pin(null); + return; + } + + const keys = row.swatches.map((s) => s.key); + const from = keys.indexOf( + (event.target as HTMLElement).dataset.key ?? focusable, + ); + const moves: Record = { + ArrowLeft: from - 1, + ArrowRight: from + 1, + Home: 0, + End: keys.length - 1, + }; + const to = moves[event.key]; + if (to === undefined) return; + + event.preventDefault(); + const next = keys[Math.min(keys.length - 1, Math.max(0, to))]; + probe.pin(next); + + const group = event.currentTarget as HTMLElement; + requestAnimationFrame(() => + group + .querySelector(`[data-key="${next}"]`) + ?.focus({ preventScroll: true }), + ); + }; + + return html` + + ${row.label} +
+ ${row.swatches.map((s) => swatch(s, probe, reference, focusable))} +
+ + `; +}; + +/** + * What the marks mean, and what the probe is currently doing. + * + * The line changes with the state rather than describing every state at once: before a + * shade is pinned the only thing worth saying is that you can pin one. + */ +export const legend = (probe: Probe) => html` +
+ ${ + probe.pinned + ? html` + Every shade measured against its own + ${probe.pinned} — AAA from 7:1, AA from 4.5:1, UI from 3:1 + + ` + : html`Click a shade to measure every other shade against it. Ratios shown are + against white, or the page for a neutral.` + } + same color as another shade +
+`; diff --git a/packages/preview/src/sections/color/sweep.ts b/packages/preview/src/sections/color/sweep.ts new file mode 100644 index 00000000..e4cc6776 --- /dev/null +++ b/packages/preview/src/sections/color/sweep.ts @@ -0,0 +1,185 @@ +import "../../elements/index.js"; +import data from "virtual:data/color.sweep"; +import { html, LitElement } from "lit"; +import { contrast, type Rgb, readableOn } from "../../color.js"; +import type { SweepRamp } from "../../data/color/sweep.js"; +import { define } from "../../define.js"; +import { findings, isClamped, shadeHex, shadeRgb } from "../../ramp.js"; +import { SHADES } from "../../variants.js"; + +const WHITE: Rgb = [255, 255, 255]; +/** Milliseconds per hue step while sweeping: a full circle in about sixteen seconds. */ +const SWEEP_INTERVAL = 45; + +/** Sweeps the seed across the whole hue circle, at more than one saturation. */ +export class ViewSweep extends LitElement { + static properties = { + hue: { state: true }, + row: { state: true }, + running: { state: true }, + }; + + declare hue: number; + /** Index into `data.rows`: which saturation. */ + declare row: number; + declare running: boolean; + + private timer = 0; + + constructor() { + super(); + this.hue = 204; + this.row = data.rows.length - 1; + this.running = false; + } + + createRenderRoot() { + return this; + } + + disconnectedCallback() { + this.stop(); + super.disconnectedCallback(); + } + + private get index() { + return ( + Math.round(this.hue / data.hueStep) % data.rows[this.row].seeds.length + ); + } + + private get seed() { + return `#${data.rows[this.row].seeds[this.index]}`; + } + + private stop = () => { + clearInterval(this.timer); + this.timer = 0; + this.running = false; + }; + + private toggle() { + if (this.timer) { + this.stop(); + return; + } + + this.running = true; + this.timer = window.setInterval(() => { + this.hue = (this.hue + data.hueStep) % 360; + }, SWEEP_INTERVAL); + } + + private strip(ramp: SweepRamp, label: string) { + return html` +
+ ${label} +
+ ${SHADES.map((key, i) => { + const rgb = shadeRgb(ramp, i); + const hex = shadeHex(ramp, i); + const cr = contrast(rgb, WHITE); + const clamped = isClamped(ramp, i); + + return html` + + ${key} + ${cr.toFixed(1)}:1 + + `; + })} +
+ +
+ `; + } + + render() { + const row = data.rows[this.row]; + const legacy = row.legacy[this.index]; + const fitted = row.fitted[this.index]; + const totals = data.totals; + const count = (n: number) => n.toLocaleString("en-US"); + + return html` +
+ + seed ${this.seed} + Saturation + ) => { + if (detail !== undefined) this.row = Number(detail); + }} + > + ${data.rows.map( + (entry, i) => html` + + ${entry.saturation}% + + `, + )} + + + ${this.running ? "Stop" : "Sweep"} + +
+ + + + { + this.hue = Number((event.target as HTMLInputElement).value); + }} /> + +
${this.strip(legacy, "legacy")}${this.strip(fitted, "fitted")}
+ +
+ 50 → 900 shade, with its contrast against white + clamped — asked for a color outside sRGB +
+ +
+ +
+

+ A slice through sRGB at this hue. The lit region is every color the hue can + produce, and its widest point — the cusp — moves by more than + twofold in both chroma and lightness as you sweep. +

+

+ Hollow rings are shades the multiplier table asked for and sRGB could not + deliver, with a leader to where they landed. When two clamp to the same edge, + two tokens resolve to the same color. +

+

+ Across all ${count(totals.seeds)} seeds in this grid, + ${count(totals.legacyClean)} clear every AA pair under legacy against + ${count(totals.fittedClean)} under fitted. Out-of-gamut shades belong to + the saturated end: ${count(totals.legacyOog)} of ${count(totals.shades)}, none + of them below ${Math.max(...data.saturations)}% saturation. +

+
+
+ `; + } +} + +define("ig-view-sweep", ViewSweep); + +declare global { + interface HTMLElementTagNameMap { + "ig-view-sweep": ViewSweep; + } +} diff --git a/packages/preview/src/sections/index.spec.ts b/packages/preview/src/sections/index.spec.ts new file mode 100644 index 00000000..5b457ce9 --- /dev/null +++ b/packages/preview/src/sections/index.spec.ts @@ -0,0 +1,25 @@ +import { describe, expect, it } from "vitest"; +import { findSection, findView, SECTIONS } from "./index.js"; + +describe("the section registry", () => { + it("finds a section by id and falls back to the first", () => { + expect(findSection("color").id).toBe("color"); + expect(findSection("nope")).toBe(SECTIONS[0]); + expect(findSection(undefined)).toBe(SECTIONS[0]); + }); + + it("finds a view within a section", () => { + const color = findSection("color"); + expect(findView(color, "sweep")?.tag).toBe("ig-view-sweep"); + expect(findView(color, "nope")).toBeUndefined(); + }); + + it("gives every view a unique tag and id", () => { + for (const section of SECTIONS) { + const ids = section.views.map((v) => v.id); + const tags = section.views.map((v) => v.tag); + expect(new Set(ids).size).toBe(ids.length); + expect(new Set(tags).size).toBe(tags.length); + } + }); +}); diff --git a/packages/preview/src/sections/index.ts b/packages/preview/src/sections/index.ts new file mode 100644 index 00000000..9e6adf3b --- /dev/null +++ b/packages/preview/src/sections/index.ts @@ -0,0 +1,14 @@ +import { color } from "./color/index.js"; +import type { SectionDef } from "./types.js"; + +/** + * Every pillar of the theming system, in display order. Adding one is a folder and an + * entry here; the shell reads this and knows nothing else about them. + */ +export const SECTIONS: SectionDef[] = [color]; + +export const findSection = (id: string | undefined) => + SECTIONS.find((section) => section.id === id) ?? SECTIONS[0]; + +export const findView = (section: SectionDef, id: string | undefined) => + section.views.find((view) => view.id === id); diff --git a/packages/preview/src/sections/types.ts b/packages/preview/src/sections/types.ts new file mode 100644 index 00000000..ff90cb52 --- /dev/null +++ b/packages/preview/src/sections/types.ts @@ -0,0 +1,30 @@ +/** A view is a custom element. The shell supplies its frame from this metadata. */ +export interface ViewDef { + id: string; + title: string; + /** What a reader learns here, in one line. Rendered by the shell, not the view. */ + teaches: string; + /** Custom element tag the loader defines. */ + tag: string; + /** Imported as the view nears the viewport, so a section's code and data stay out of the initial load. */ + load: () => Promise; +} + +/** + * A persistent element pinned above a section's views. Every view in the section reads + * the same state it writes, which is what lets one control drive the whole page. + */ +export interface ControlsDef { + tag: string; + load: () => Promise; +} + +/** One pillar of the theming system. */ +export interface SectionDef { + id: string; + title: string; + blurb: string; + /** Optional: a pillar whose views share no state does not need one. */ + controls?: ControlsDef; + views: ViewDef[]; +} diff --git a/packages/preview/src/shell/shell.ts b/packages/preview/src/shell/shell.ts new file mode 100644 index 00000000..fe331c4b --- /dev/null +++ b/packages/preview/src/shell/shell.ts @@ -0,0 +1,238 @@ +import { html, LitElement, nothing } from "lit"; +import { html as staticHtml, unsafeStatic } from "lit/static-html.js"; +import { define } from "../define.js"; +import { findSection, findView, SECTIONS } from "../sections/index.js"; +import type { SectionDef, ViewDef } from "../sections/types.js"; + +/** How far ahead of the viewport a view starts loading. */ +const LOOKAHEAD = "600px"; + +/** `#/
/?` — the query belongs to the section, not the shell. */ +const parseHash = (hash: string) => { + const [section, view] = hash.replace(/^#\/?/, "").split("?")[0].split("/"); + return { section: findSection(section), viewId: view }; +}; + +/** + * Navigation, routing and the frame around a section. + * + * A section renders as one page: its controls are pinned at the top and every view is + * stacked below them, so a control the reader moves is visibly the same control for all + * of them. Views still load one at a time — an observer imports each as it nears the + * viewport — so stacking costs nothing on first paint. + */ +export class PreviewShell extends LitElement { + static properties = { + section: { state: true }, + loaded: { state: true }, + controlsReady: { state: true }, + current: { state: true }, + }; + + declare section: SectionDef; + /** Tags whose module has finished loading. */ + declare loaded: Set; + declare controlsReady: boolean; + /** The view the reader is looking at, for the nav. */ + declare current: string; + + private approach?: IntersectionObserver; + private spy?: IntersectionObserver; + private bar?: ResizeObserver; + + constructor() { + super(); + this.section = parseHash(location.hash).section; + this.loaded = new Set(); + this.controlsReady = false; + this.current = this.section.views[0]?.id ?? ""; + } + + /** Light DOM: the app is styled by the library's own generated custom properties. */ + createRenderRoot() { + return this; + } + + connectedCallback() { + super.connectedCallback(); + addEventListener("hashchange", this.onHashChange); + this.approach = new IntersectionObserver(this.onApproach, { + rootMargin: `${LOOKAHEAD} 0px ${LOOKAHEAD} 0px`, + }); + this.spy = new IntersectionObserver(this.onSpy, { + rootMargin: "-20% 0px -70% 0px", + }); + this.loadControls(); + } + + disconnectedCallback() { + removeEventListener("hashchange", this.onHashChange); + this.approach?.disconnect(); + this.spy?.disconnect(); + this.bar?.disconnect(); + super.disconnectedCallback(); + } + + /** + * The pinned bar's height, as a custom property, so a view scrolled to by link stops + * below it rather than under it. Measured because the bar wraps on narrow screens. + */ + firstUpdated() { + const bar = this.querySelector(".control-bar"); + if (!bar) return; + + this.bar = new ResizeObserver(([entry]) => { + this.style.setProperty( + "--control-bar-height", + `${entry.contentRect.height}px`, + ); + }); + this.bar.observe(bar); + } + + private onHashChange = () => { + const { section, viewId } = parseHash(location.hash); + + if (section !== this.section) { + this.section = section; + this.controlsReady = false; + this.loadControls(); + } + + const view = findView(section, viewId); + if (view) this.updateComplete.then(() => this.reveal(view.id)); + }; + + private async loadControls() { + const { controls } = this.section; + if (!controls) return; + + await controls.load(); + if (this.section.controls === controls) this.controlsReady = true; + } + + private onApproach = (entries: IntersectionObserverEntry[]) => { + for (const entry of entries) { + if (!entry.isIntersecting) continue; + + const view = findView( + this.section, + (entry.target as HTMLElement).dataset.view, + ); + if (!view || this.loaded.has(view.tag)) continue; + + this.approach?.unobserve(entry.target); + view.load().then(() => { + this.loaded = new Set(this.loaded).add(view.tag); + }); + } + }; + + /** + * The observer is only the trigger; which view is current is read from geometry. A + * batch of entries can be nothing but departures, which says where the reader left, + * not where they are. + */ + private onSpy = () => { + const frames = [...this.querySelectorAll("[data-view]")]; + if (!frames.length) return; + + const line = innerHeight * 0.25; + const passed = frames.filter( + (frame) => frame.getBoundingClientRect().top <= line, + ); + const current = (passed.at(-1) ?? frames[0]).dataset.view; + + if (current) this.current = current; + }; + + private reveal(id: string) { + this.querySelector(`[data-view="${id}"]`)?.scrollIntoView({ + behavior: "smooth", + block: "start", + }); + } + + updated() { + for (const frame of this.querySelectorAll("[data-view]")) { + const tag = findView(this.section, frame.dataset.view)?.tag ?? ""; + if (!this.loaded.has(tag)) this.approach?.observe(frame); + this.spy?.observe(frame); + } + } + + private frame(view: ViewDef) { + return html` +
+
+

${view.title}

+

${view.teaches}

+
+ ${ + this.loaded.has(view.tag) + ? staticHtml`<${unsafeStatic(view.tag)}>` + : html`

Compiling…

` + } +
+ `; + } + + render() { + const section = this.section; + const controls = section.controls; + + return html` +
+

igniteui-theming

+ +
+ +
+

${section.title}

+

${section.blurb}

+
+ +
+ ${ + controls && this.controlsReady + ? staticHtml`<${unsafeStatic(controls.tag)}>` + : nothing + } + ${ + section.views.length > 1 + ? html` + + ` + : nothing + } +
+ + ${section.views.map((view) => this.frame(view))} + `; + } +} + +define("ig-preview-shell", PreviewShell); + +declare global { + interface HTMLElementTagNameMap { + "ig-preview-shell": PreviewShell; + } +} diff --git a/packages/preview/src/shell/theme.scss b/packages/preview/src/shell/theme.scss new file mode 100644 index 00000000..375fcf78 --- /dev/null +++ b/packages/preview/src/shell/theme.scss @@ -0,0 +1,93 @@ +// The app is styled by the library it demonstrates. Chrome tokens resolve to concrete +// colors here rather than aliasing `--ig-*`, because a demo scope that redefines +// `--ig-gray-*` would otherwise repaint the chrome sitting inside it. Only the neutral +// and semantic families are used: chrome carrying a hue of its own would change how the +// swatches under test read. +@use "../../../theming/sass/color" as *; +@use "../../../theming/sass/elevations" as *; +@use "../../../theming/sass/elevations/presets" as elevation-presets; +@use "../../../theming/sass/themes" as themes; +@use "../../../theming/sass/typography" as *; +@use "../../../theming/sass/typography/presets" as type-presets; + +$light: palette($primary: #09f, $secondary: #df1b74, $surface: #f8f8fa, $gray: #333); +$dark: palette($primary: #09f, $secondary: #df1b74, $surface: #1a1a24, $gray: #333); + +@mixin chrome($palette, $semantic) { + // The page is the well and a card sits at the base level. Going the other way puts + // `raised` against a near-white page, where it has no room and collapses by design. + --ground: #{color($palette, "surface", "sunken")}; + --panel: #{color($palette, "surface", "base")}; + --raised: #{color($palette, "surface", "raised")}; + --overlay: #{color($palette, "surface", "overlay")}; + --ink: #{color($palette, "gray", 900)}; + --muted: #{color($palette, "gray", 600)}; + --line: #{color($palette, "gray", 200)}; + --line-soft: #{color($palette, "gray", 100)}; + --plot-ink: #{color($palette, "gray", 700)}; + --pass: #{color($palette, "success", $semantic)}; + --fail: #{color($palette, "error", $semantic)}; +} + +/* + * The shipped components read `--ig-*` at runtime, so supplying the branch's own palette + * here is what themes them — no rebuild of `igniteui-webcomponents`, and the controls in + * this app are painted by the generator the app is about. + * + * It goes on `:root` only. A demo scope redefining `--ig-gray-*` must not repaint a + * control sitting above it, which is also why `chrome()` resolves to concrete colors. + */ +@include themes.sizing; +@include themes.spacing; + +// `indigo` throughout: the Sass presets here and `configureTheme` in `elements/ignite.ts` +// pick the same family, so the components' structure and the type and elevation scales +// they assume stay in step. Only the colors come from this branch's generator. +@include typography($font-family: (ui-sans-serif, system-ui, sans-serif), $type-scale: type-presets.$indigo-type-scale); +@include elevations(elevation-presets.$indigo-elevations); + +:root { + color-scheme: light dark; + + // Semantic colors are chromatic, so they are anchored to white whatever the page is. + // The light theme needs a dark variant of them and the dark theme a light one. + @include chrome($light, 700); +} + +@include palette($light); + +/* + * `igc-slider` and `igc-color-picker` still ask for `--ig-surface-500`, which the fitted + * generator no longer emits — surface became five named roles. Every numbered token + * resolves to `base`, which is the model rather than a fudge: under the fitted generator + * the page is one color and depth is carried by the roles and the elevation shadow. The + * library has the same decision to make for real consumers. + */ +@mixin surface-compat($palette) { + @each $shade in (50, 100, 200, 300, 400, 500, 600, 700, 800, 900) { + --ig-surface-#{$shade}: #{color($palette, "surface", "base")}; + --ig-surface-#{$shade}-contrast: #{contrast-color($palette, "surface", "base")}; + } +} + +:root { + @include surface-compat($light); + + --ig-theme-variant: light; +} + +@media (prefers-color-scheme: dark) { + :root:not([data-theme="light"]) { + @include chrome($dark, 300); + @include surface-compat($dark); + + --ig-theme-variant: dark; + } +} + +:root[data-theme="dark"] { + @include chrome($dark, 300); + @include surface-compat($dark); + + --ig-theme-variant: dark; +} diff --git a/packages/preview/src/styles.scss b/packages/preview/src/styles.scss index 06a574d8..3ff53254 100644 --- a/packages/preview/src/styles.scss +++ b/packages/preview/src/styles.scss @@ -1,304 +1,617 @@ +/* + * Type and layout. Every color comes from shell/theme.scss, generated by the library. + * + * Organised top to bottom: tokens, base elements, the primitives views compose + * (rows, strips, legends), the shell, then one block per view. + */ + +/* --- tokens --- */ :root { - color-scheme: light dark; - - --bg: #fbfbfc; - --fg: #16141f; - --mut: #6b6579; - --line: #e4e1ea; - --card: #fff; - --ok: #1f7a3d; - --bad: #c11a5e; -} - -@media (prefers-color-scheme: dark) { - :root { - --bg: #111019; - --fg: #eae7f2; - --mut: #948da8; - --line: #2c2940; - --card: #191823; - --ok: #69c97b; - --bad: #ff8cb0; - } -} - + --sans: ui-sans-serif, system-ui, sans-serif; + --mono: ui-monospace, "SF Mono", menlo, monospace; + + /* + * The widest thing on the page is a ten-swatch strip with a label and a ratio in each + * swatch, which stops gaining from extra width at about this point. Past it the rows + * only get longer to scan, so on a wide display the page centres instead. + */ + --measure: 1280px; + + /* Type: nothing below 11px, so the smallest label is still a label. */ + --text-xs: 0.6875rem; + --text-sm: 0.75rem; + --text-md: 0.8125rem; + --text-base: 0.9375rem; + --text-lg: 1.05rem; + --text-xl: 1.2rem; + --text-2xl: clamp(1.7rem, 4vw, 2.3rem); + + /* Space, on a 4px grid. */ + --space-1: 4px; + --space-2: 8px; + --space-3: 12px; + --space-4: 16px; + --space-5: 20px; + --space-6: 24px; + --space-8: 32px; + --space-10: 40px; + --space-12: 48px; + --radius-sm: 3px; + --radius-md: 6px; + --radius-lg: 10px; + --swatch-height: 46px; +} + +/* --- base --- */ * { box-sizing: border-box; } body { - margin: 0; - padding: 0 24px 90px; - background: var(--bg); - color: var(--fg); - font: 15px/1.55 ui-sans-serif, system-ui, sans-serif; -} - -.wrap { - max-width: 1200px; + max-width: var(--measure); margin: 0 auto; + padding: 0 var(--space-6) var(--space-12); + background: var(--ground); + color: var(--ink); + font: var(--text-base) / 1.55 var(--sans); } -h1 { - margin: 46px 0 8px; - font-size: 2rem; - letter-spacing: -0.02em; -} - -h2 { - margin: 52px 0 4px; - font-size: 1.15rem; +h1, +h2, +h3 { + margin: 0; letter-spacing: -0.01em; } h3 { - margin: 0; - font-size: 0.95rem; + font-size: var(--text-base); } -.sub { - margin: 0 0 8px; - color: var(--mut); +p { + margin: 0; } code { - font: 12px ui-monospace, monospace; - color: var(--mut); + font: var(--text-sm) var(--mono); + color: var(--muted); } -.score { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); - gap: 14px; - margin: 26px 0 8px; +article { + margin-block-start: var(--space-5); + padding-block-start: var(--space-4); + border-block-start: 1px solid var(--line); + + > header { + display: flex; + align-items: center; + flex-wrap: wrap; + gap: var(--space-2); + margin-block-end: var(--space-3); + } } -.tile { - padding: 15px 17px; - border: 1px solid var(--line); - border-radius: 10px; - background: var(--card); +:focus-visible { + outline: 2px solid var(--ink); + outline-offset: 2px; +} - em { - display: block; - margin-bottom: 9px; - font: 600 10.5px/1 ui-monospace, monospace; - font-style: normal; - letter-spacing: 0.1em; - text-transform: uppercase; - color: var(--mut); - } +/* For text that has to reach a screen reader but would be noise on screen. */ +.visually-hidden { + position: absolute; + width: 1px; + height: 1px; + overflow: hidden; + clip-path: inset(50%); + white-space: nowrap; +} - b { - font-size: 1.5rem; - font-weight: 600; - letter-spacing: -0.02em; - } +/* --- text roles --- */ +.sub, +.note, +.teaches, +.blurb { + color: var(--muted); +} - s { - color: var(--bad); - font-size: 1.05rem; - font-weight: 600; - text-decoration: none; - } +.sub { + margin-block-end: var(--space-2); +} - span { - display: block; - margin-top: 5px; - color: var(--mut); - font-size: 12.5px; - } +.note { + margin-block-start: var(--space-3); + font-size: var(--text-md); } -article { - margin-top: 22px; - padding-top: 18px; - border-top: 1px solid var(--line); +.group { + margin-block: var(--space-12) var(--space-2); + font-size: var(--text-lg); } -header { - display: flex; - align-items: center; - flex-wrap: wrap; - gap: 9px; - margin-bottom: 11px; +/* A small uppercase caption in the mono face. */ +.tag, +.who, +.picker-label, +.control-label { + font-family: var(--mono); + font-size: var(--text-xs); + letter-spacing: 0.08em; + text-transform: uppercase; + color: var(--muted); } .dot { flex: none; + display: inline-block; width: 20px; height: 20px; border: 1px solid var(--line); border-radius: 5px; + vertical-align: middle; } -.meta { - margin-left: auto; - font: 12px ui-monospace, monospace; - color: var(--mut); -} - +/* --- layout primitives --- */ .stack { display: flex; flex-direction: column; gap: 2px; & + & { - margin-top: 12px; + margin-block-start: var(--space-3); } } +/* A labelled strip, with room for a verdict when the view supplies one. */ .row { display: grid; - grid-template-columns: 52px 1fr 150px; + grid-template-columns: 52px minmax(0, 1fr); align-items: center; - gap: 10px; + gap: var(--space-3); + + &:has(ig-verdict) { + grid-template-columns: 52px minmax(0, 1fr) 150px; + } } .who { - font: 600 10.5px/1 ui-monospace, monospace; - letter-spacing: 0.06em; - text-transform: uppercase; - text-align: right; - color: var(--mut); + font-weight: 600; + text-align: end; +} + +.two-up { + display: grid; + grid-template-columns: minmax(280px, 340px) minmax(0, 1fr); + align-items: start; + gap: var(--space-6); + + &.is-plot { + grid-template-columns: minmax(0, 420px) minmax(0, 1fr); + gap: var(--space-8); + margin-block-start: var(--space-6); + } + + @media (width <= 860px) { + grid-template-columns: minmax(0, 1fr); + } +} + +@media (width <= 640px) { + .row, + .row:has(ig-verdict) { + grid-template-columns: minmax(0, 1fr); + gap: var(--space-1); + } + + .who { + text-align: start; + } } +/* --- swatch strips --- */ .strip { display: flex; border: 1px solid var(--line); border-radius: 5px; overflow: hidden; - i { - display: flex; - flex: 1; - flex-direction: column; - align-items: center; - justify-content: center; - gap: 1px; - height: 46px; - font-style: normal; - cursor: help; + &.is-attached { + border-radius: 0; + border-block-start: 0; + } +} + +.swatch { + position: relative; + display: flex; + flex: 1 1 0; + flex-direction: column; + align-items: center; + justify-content: center; + gap: 1px; + min-width: 0; + height: var(--swatch-height); + padding: 0; + border: 0; + font: inherit; + cursor: pointer; + + /* The shade every other shade in the row is being measured against. */ + &.is-reference { + box-shadow: inset 0 0 0 2px currentcolor; + } + + /* + * Focus rings go inward. An outward ring on a swatch in a seamless run of ten + * overlaps its neighbours and gets clipped at the ends of the strip, which reads as + * a broken box rather than a focus indicator. Nested inside the reference ring so a + * focused reference shows both. + */ + &:focus-visible { + outline: 2px solid currentcolor; + outline-offset: -6px; + } + + /* + * A pairing that earns no grade keeps its ratio, quietly. With a shade pinned most + * pairings fail, and that is not news; what the reader is looking for is what they + * can use. + */ + &.is-short .swatch-ratio { + opacity: 0.5; + } + + /* The generator asked for a color outside sRGB and the browser clipped it. */ + &.is-clipped::after { + content: ""; + position: absolute; + inset-inline: 0; + inset-block-end: 0; + height: 3px; + background: repeating-linear-gradient(-45deg, currentcolor 0 2px, transparent 2px 4px); + opacity: 0.85; + } +} + +.swatch-key { + font: 600 var(--text-xs) / 1 var(--mono); +} + +.swatch-ratio { + display: flex; + align-items: center; + gap: var(--space-1); + font: var(--text-xs) / 1 var(--mono); + letter-spacing: -0.02em; + opacity: 0.72; +} + +/* The grade a pairing earns. Hairline in the swatch's own contrast color, so it stays legible on any shade. */ +.grade { + flex: none; + padding: 1px 3px 0; + border: 1px solid currentcolor; + border-radius: 2px; + font: 700 0.625rem / 1.35 var(--mono); + letter-spacing: 0.04em; +} + +/* Two tokens, one color. Opposite corner from the grade so a shade can carry both. */ +.twin { + position: absolute; + inset-block-end: 3px; + inset-inline-end: 5px; + font: 700 var(--text-xs) / 1 var(--mono); + opacity: 0.85; +} + +@media (width <= 640px) { + .swatch { + height: 36px; } + .swatch-ratio { + display: none; + } +} + +/* --- legends --- */ +.keyline { + display: flex; + align-items: center; + flex-wrap: wrap; + gap: var(--space-5); + + /* Held at the height of its tallest state, so pinning a shade does not shift the page. */ + min-height: 38px; + margin-block-start: var(--space-4); + padding-block-start: var(--space-3); + font-size: var(--text-sm); + color: var(--muted); + b { - font: 600 10.5px/1 ui-monospace, monospace; + font-weight: 450; + color: var(--ink); } +} - em { - font: 9.5px/1 ui-monospace, monospace; - font-style: normal; - letter-spacing: -0.02em; - opacity: 0.72; +.key-twin { + display: inline-block; + margin-inline-end: var(--space-2); + font: 700 var(--text-xs) / 1 var(--mono); + color: var(--ink); + vertical-align: middle; +} + +.key-hatch { + display: inline-block; + width: 15px; + height: 4px; + margin-inline-end: var(--space-1); + background: repeating-linear-gradient(-45deg, var(--ink) 0 2px, transparent 2px 4px); + vertical-align: middle; +} + +.clear { + height: 22px; + padding: 0 var(--space-2); + border: 1px solid var(--line); + border-radius: var(--radius-sm); + background: transparent; + color: var(--muted); + font: var(--text-xs) / 1 var(--mono); + cursor: pointer; + + &:hover { + color: var(--ink); + border-color: var(--muted); } } -.verdict { - font: 11.5px/1.3 ui-sans-serif, system-ui, sans-serif; +/* --- shell --- */ +.masthead { + display: flex; + align-items: baseline; + flex-wrap: wrap; + gap: var(--space-5); + padding-block-start: var(--space-6); + border-block-end: 1px solid var(--line); - &.ok { - color: var(--ok); + .eyebrow { + margin-block-end: var(--space-3); } +} + +.sections, +.views { + display: flex; + gap: var(--space-1); + margin-inline-start: auto; + + a { + padding: var(--space-2) var(--space-3); + border-radius: var(--radius-sm) var(--radius-sm) 0 0; + font-family: var(--mono); + font-size: var(--text-xs); + letter-spacing: 0.06em; + text-transform: uppercase; + text-decoration: none; + white-space: nowrap; + color: var(--muted); - &.bad { - color: var(--bad); + &:hover { + color: var(--ink); + background: var(--line-soft); + } + + &[aria-current] { + color: var(--ink); + box-shadow: inset 0 -2px 0 var(--ink); + } } } -.two { - display: grid; - grid-template-columns: minmax(280px, 340px) 1fr; - align-items: start; - gap: 22px; +.section-intro { + padding-block-start: var(--space-8); + + h1 { + margin-block-end: var(--space-2); + font-size: var(--text-2xl); + letter-spacing: -0.02em; + } +} + +.blurb { + font-size: 1rem; +} + +/* + * Pinned rather than scrolled away: the whole point of one page is that the control the + * reader moves is visibly the same control for every view under it. + */ +.control-bar { + position: sticky; + inset-block-start: 0; + z-index: 5; + display: flex; + align-items: center; + flex-wrap: wrap; + gap: var(--space-2) var(--space-5); + margin-block-start: var(--space-5); + padding-block-start: var(--space-2); + border-block-end: 1px solid var(--line); + background: var(--ground); + + /* One row at any width: a wrapped four-item nav eats half a phone screen. */ + .views { + flex-basis: 100%; + flex-wrap: nowrap; + margin-inline-start: 0; + overflow-x: auto; + scrollbar-width: none; + } +} + +ig-color-controls { + display: contents; +} - @media (width <= 820px) { - grid-template-columns: 1fr; +.picker { + display: flex; + align-items: center; + gap: var(--space-2); +} + +/* + * The library's segmented control, themed to the chrome neutrals through its own public + * tokens. Left at its defaults it paints itself in `primary`, and a blue control sitting + * above the swatches under test changes how those swatches read — the same reason + * `shell/theme.scss` keeps the chrome free of any hue of its own. + */ +igc-button-group { + --ig-button-group-elevation: none; + --ig-button-group-item-background: transparent; + --ig-button-group-item-text-color: var(--muted); + --ig-button-group-item-border-color: var(--line); + --ig-button-group-item-hover-background: var(--line-soft); + --ig-button-group-item-hover-text-color: var(--ink); + --ig-button-group-item-focused-background: var(--line-soft); + --ig-button-group-item-focused-text-color: var(--ink); + --ig-button-group-item-selected-background: var(--line-soft); + --ig-button-group-item-selected-text-color: var(--ink); + --ig-button-group-item-selected-border-color: var(--ink); + --ig-button-group-item-selected-hover-background: var(--line-soft); + --ig-button-group-item-selected-hover-text-color: var(--ink); +} + +/* A view's frame is an article too, but only frames after the first draw a rule. */ +.view-frame { + margin-block-start: var(--space-10); + padding-block-start: 0; + border-block-start: 0; + + /* Measured by the shell: the bar wraps to more rows as the screen narrows. */ + scroll-margin-block-start: calc(var(--control-bar-height, 64px) + var(--space-4)); + + & + & { + padding-block-start: var(--space-10); + border-block-start: 1px solid var(--line); } + + > header { + display: block; + margin-block-end: var(--space-5); + } + + h2 { + margin-block-end: var(--space-1); + font-size: var(--text-xl); + } +} + +.teaches { + font-size: 0.875rem; +} + +.loading { + padding-block: var(--space-10); + font-family: var(--mono); + font-size: var(--text-md); + color: var(--muted); +} + +/* Shared elements are laid out by their host and carry their own internals. */ +ig-palette-scope { + display: block; +} + +ig-code-block { + display: block; + margin-block-start: var(--space-5); } +/* --- neutrals: the mock page and the surface roles --- */ .mock { display: flex; flex-direction: column; - gap: 11px; - padding: 14px; + gap: var(--space-3); + padding: var(--space-4); border: 1px solid var(--line); - border-radius: 10px; + border-radius: var(--radius-lg); background: var(--ig-surface-base); color: var(--ig-surface-base-contrast); + + strong { + font-size: var(--text-md); + } + + span { + font-size: var(--text-sm); + } } .mock-bar { display: flex; align-items: center; - gap: 8px; + gap: var(--space-2); height: 22px; +} - > span:first-child { - width: 74px; - height: 7px; - border-radius: 4px; - background: currentcolor; - opacity: 0.5; - } +.mock-title { + width: 74px; + height: 7px; + border-radius: var(--space-1); + background: currentcolor; + opacity: 0.5; } -.pill { +.mock-pill { width: 56px; height: 20px; - margin-left: auto; + margin-inline-start: auto; border-radius: 100px; background: var(--ig-surface-container); } -.well { - padding: 9px 11px; +.mock-well { + padding: var(--space-2) var(--space-3); border-radius: 7px; background: var(--ig-surface-sunken); color: var(--ig-surface-sunken-contrast); - font: 11.5px ui-monospace, monospace; + font: var(--text-sm) var(--mono); } -.card { +.mock-card, +.mock-pop { display: flex; flex-direction: column; - gap: 5px; - padding: 12px 13px; - border-radius: 8px; + gap: var(--space-1); + padding: var(--space-3); + border-radius: var(--radius-md); + + span { + opacity: 0.72; + } +} + +.mock-card { background: var(--ig-surface-raised); color: var(--ig-surface-raised-contrast); box-shadow: 0 1px 2px rgb(0 0 0 / 9%); } -.pop { - display: flex; - flex-direction: column; - gap: 4px; - margin-left: 22px; - padding: 12px 13px; - border-radius: 8px; +.mock-pop { + margin-inline-start: var(--space-5); background: var(--ig-surface-overlay); color: var(--ig-surface-overlay-contrast); box-shadow: 0 8px 22px -6px rgb(0 0 0 / 35%), 0 2px 5px rgb(0 0 0 / 16%); } -.card strong, -.pop strong { - font-size: 12.5px; -} - -.card span, -.pop span { - font-size: 11.5px; - opacity: 0.72; -} - -.line { +.mock-line { height: 6px; border-radius: 3px; background: currentcolor; opacity: 0.16; - &.short { + &.is-short { width: 58%; } } @@ -306,68 +619,361 @@ header { .roles { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); - gap: 9px; - margin-top: 14px; + gap: var(--space-2); + margin-block-start: var(--space-4); } .role { display: flex; align-items: center; - gap: 9px; - - > i { - display: grid; - flex: none; - place-items: center; - width: 42px; - height: 30px; - border: 1px solid var(--line); - border-radius: 5px; - - > b { - display: block; - width: 26px; - height: 16px; - border-radius: 3px; - } - } + gap: var(--space-2); code { display: block; - color: var(--fg); + color: var(--ink); } +} - em { +.role-swatch { + display: grid; + flex: none; + place-items: center; + width: 42px; + height: 30px; + border: 1px solid var(--line); + border-radius: 5px; + + > span { display: block; - font: 10.5px ui-monospace, monospace; - font-style: normal; - color: var(--mut); + width: 26px; + height: 16px; + border-radius: var(--radius-sm); } } -.note { - margin: 10px 0 0; - color: var(--mut); - font-size: 12.5px; +.role-distance { + display: block; + font: var(--text-xs) var(--mono); + color: var(--muted); +} + +/* --- sweep --- */ +.sweep-head { + display: flex; + align-items: center; + flex-wrap: wrap; + gap: var(--space-3); + margin-block-end: var(--space-4); +} + +.sweep-toggle { + margin-inline-start: auto; +} + +.seed-chip { + flex: none; + width: 30px; + height: 30px; + border: 1px solid var(--line); + border-radius: var(--radius-sm); +} + +.seed-readout { + font-family: var(--mono); + font-size: var(--text-md); + font-variant-numeric: tabular-nums; + + span { + color: var(--muted); + } +} + +/* + * The one control that stays bespoke: its track is the hue wheel itself. Both engines' + * pseudo-elements are styled, because a range input with `appearance: none` and no + * track rule is invisible. + */ +.hue-input { + display: block; + width: 100%; + height: 26px; + margin-block-start: var(--space-2); + background: transparent; + appearance: none; + cursor: ew-resize; + + --hue-track: linear-gradient( + to right, + hsl(0deg 90% 50%), + hsl(60deg 90% 50%), + hsl(120deg 90% 50%), + hsl(180deg 90% 50%), + hsl(240deg 90% 50%), + hsl(300deg 90% 50%), + hsl(359deg 90% 50%) + ); + + &::-webkit-slider-runnable-track { + height: 26px; + border: 1px solid var(--line); + border-radius: var(--radius-sm); + background: var(--hue-track); + } + + &::-moz-range-track { + height: 26px; + border: 1px solid var(--line); + border-radius: var(--radius-sm); + background: var(--hue-track); + } + + &::-webkit-slider-thumb { + width: 10px; + height: 34px; + margin-block-start: -5px; + border: 2px solid var(--ink); + border-radius: 2px; + background: var(--panel); + appearance: none; + } + + &::-moz-range-thumb { + width: 10px; + height: 34px; + border: 2px solid var(--ink); + border-radius: 2px; + background: var(--panel); + } +} + +.strips { + display: flex; + flex-direction: column; + gap: var(--space-3); + margin-block-start: var(--space-5); +} + +/* --- scales: presets, controls, the editor and its readouts --- */ +.scale-presets { + display: flex; + flex-direction: column; + gap: 2px; + margin-block-end: var(--space-5); +} + +.scale-preset { + display: grid; + grid-template-columns: 128px minmax(0, 1fr) 118px; + align-items: center; + gap: var(--space-3); + width: 100%; + padding: var(--space-2) var(--space-3); + border: 1px solid transparent; + border-radius: var(--radius-sm); + background: none; + color: inherit; + font: inherit; + text-align: start; + cursor: pointer; + + &:hover, + &[aria-current="true"] { + background: var(--line-soft); + } + + &[aria-current="true"] { + border-color: var(--muted); + } + + @media (width <= 620px) { + grid-template-columns: 104px minmax(0, 1fr); + + .preset-record { + grid-column: 2; + } + } +} + +.preset-name { + font: 600 var(--text-sm) var(--mono); +} + +.preset-why { + display: block; + margin-block-start: 2px; + font-size: var(--text-xs); + font-weight: 400; + line-height: 1.35; + color: var(--muted); } -.legend { - margin: 0 0 6px; - padding: 7px 11px; - border-left: 2px solid var(--line); - color: var(--mut); - font-size: 12.5px; +.preset-mini { + display: flex; + height: 28px; + border: 1px solid var(--line); + border-radius: 2px; + overflow: hidden; + + span { + flex: 1; + } +} + +.preset-record { + font-family: var(--mono); + font-size: var(--text-xs); + text-align: end; +} + +.subjects { + display: flex; + align-items: center; + flex-wrap: wrap; + gap: var(--space-3); +} + +.subject-note { + margin-block: var(--space-2) var(--space-4); +} + +.controls { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); + gap: var(--space-4) var(--space-6); + padding-block-end: var(--space-4); + border-block-end: 1px solid var(--line); +} + +.control-label { + display: flex; + justify-content: space-between; + gap: var(--space-2); + margin-block-end: var(--space-2); b { - color: var(--fg); - font-weight: 600; + color: var(--ink); + font-variant-numeric: tabular-nums; + letter-spacing: 0; } } -footer { - margin-top: 46px; - padding-top: 18px; - border-top: 1px solid var(--line); - color: var(--mut); - font-size: 13px; +.control-hint { + margin-block-start: var(--space-2); + font-size: var(--text-sm); + line-height: 1.45; + color: var(--muted); + + &.is-over { + color: var(--fail); + } +} + +.control-action { + margin-block-start: var(--space-2); +} + +/* + * No top margin: the chart carries empty headroom above the plot for a handle pulled + * past the range, and that band is the gap between the controls and the chart. + */ +.stage { + width: 100%; +} + +/* Every guaranteed pair as a bar between its two shades, on the strip's own twenty columns. */ +.ladder { + display: flex; + flex-direction: column; + gap: 3px; + margin-block-start: var(--space-2); +} + +.ladder-row { + display: grid; + grid-template-columns: repeat(20, minmax(0, 1fr)); + align-items: center; + height: 16px; +} + +.ladder-bar { + height: 4px; + border-radius: 2px; +} + +.ladder-tag { + padding-inline-start: var(--space-2); + font-family: var(--mono); + font-size: var(--text-xs); + white-space: nowrap; + + &.is-before { + padding-inline: 0 var(--space-2); + text-align: end; + } +} + +.is-passing { + color: var(--pass); + + &.ladder-bar { + background: var(--pass); + } +} + +.is-failing { + color: var(--fail); + + &.ladder-bar { + background: var(--fail); + } +} + +.table-wrap { + margin-block-start: var(--space-6); + overflow-x: auto; +} + +table { + width: 100%; + border-collapse: collapse; + font-family: var(--mono); + font-size: var(--text-sm); + font-variant-numeric: tabular-nums; +} + +th, +td { + padding-inline-start: var(--space-4); + text-align: end; + white-space: nowrap; + + &:first-child { + padding-inline-start: 0; + text-align: start; + } +} + +th { + padding-block-end: var(--space-2); + font-size: var(--text-xs); + font-weight: 500; + letter-spacing: 0.08em; + text-transform: uppercase; + color: var(--muted); +} + +td { + padding-block: var(--space-1); + border-block-start: 1px solid var(--line-soft); + + &.is-miss { + color: var(--fail); + } + + .dot { + width: 12px; + height: 12px; + margin-inline-end: var(--space-2); + border-radius: 2px; + } } diff --git a/packages/preview/src/variants.ts b/packages/preview/src/variants.ts new file mode 100644 index 00000000..58806838 --- /dev/null +++ b/packages/preview/src/variants.ts @@ -0,0 +1,60 @@ +/** + * The names a palette is addressed by. A leaf module on purpose: both the Sass-compiling + * providers and the browser bundle need these, and a provider drags `sass-embedded` in + * with it. + */ +export const FAMILIES = [ + "primary", + "secondary", + "gray", + "surface", + "info", + "success", + "warn", + "error", +] as const; + +export const SHADES = [ + "50", + "100", + "200", + "300", + "400", + "500", + "600", + "700", + "800", + "900", +] as const; + +export const ACCENTS = ["A100", "A200", "A400", "A700"] as const; + +export const ROLES = [ + "base", + "sunken", + "raised", + "overlay", + "container", +] as const; + +export const THEMES = ["light", "dark"] as const; + +/** The palettes the library ships, in the order the picker offers them. */ +export const PRESETS = [ + { key: "material", label: "Material" }, + { key: "bootstrap", label: "Bootstrap" }, + { key: "fluent", label: "Fluent" }, +] as const; + +export type Family = (typeof FAMILIES)[number]; +export type Shade = (typeof SHADES)[number]; +export type Accent = (typeof ACCENTS)[number]; +export type RoleKey = (typeof ROLES)[number]; +export type Theme = (typeof THEMES)[number]; +export type PresetKey = (typeof PRESETS)[number]["key"]; + +export const isTheme = (value: unknown): value is Theme => + THEMES.includes(value as Theme); + +export const isPresetKey = (value: unknown): value is PresetKey => + PRESETS.some((preset) => preset.key === value); diff --git a/packages/preview/src/vite-env.d.ts b/packages/preview/src/vite-env.d.ts new file mode 100644 index 00000000..1e03fd07 --- /dev/null +++ b/packages/preview/src/vite-env.d.ts @@ -0,0 +1,16 @@ +/// + +declare module "virtual:data/color.sweep" { + const data: import("./data/color/sweep.js").SweepData; + export default data; +} + +declare module "virtual:data/color.scales" { + const data: import("./data/color/scales.js").ScaleData; + export default data; +} + +declare module "virtual:data/color.presets" { + const data: import("./data/color/presets.js").PresetData; + export default data; +} diff --git a/packages/preview/vite.config.ts b/packages/preview/vite.config.ts index 8cbc0837..20e93f06 100644 --- a/packages/preview/vite.config.ts +++ b/packages/preview/vite.config.ts @@ -1,10 +1,10 @@ import { fileURLToPath } from "node:url"; import { defineConfig } from "vite"; -import { previewData, singleFile } from "./src/plugin.js"; +import { dataProviders } from "./src/data/plugin.js"; export default defineConfig({ root: fileURLToPath(new URL(".", import.meta.url)), - plugins: [previewData(), singleFile()], + plugins: [dataProviders()], base: "./", build: { outDir: "dist", emptyOutDir: true }, });