From 6d3145bf2ea0fcca265d5a71118277c423ea9169 Mon Sep 17 00:00:00 2001 From: Silvia Ivanova <59446295+SisIvanova@users.noreply.github.com> Date: Wed, 31 Jul 2024 13:37:22 +0300 Subject: [PATCH] refactor(*): use CSS relative colors (#137) --- README.md | 9 ++ package-lock.json | 19 ++- package.json | 5 +- sass/color/_functions.scss | 16 ++- sass/color/_mixins.scss | 8 +- sass/color/_multipliers.scss | 6 +- sass/color/presets/dark/_indigo.scss | 188 +++++++++++++------------- sass/color/presets/light/_indigo.scss | 188 +++++++++++++------------- scripts/getArgs.mjs | 20 +++ scripts/previewPalette.mjs | 64 +++++++-- test/_color.spec.scss | 28 ++-- test/_themes.spec.scss | 4 +- test/e2e/theme.scss | 6 +- 13 files changed, 326 insertions(+), 235 deletions(-) create mode 100644 scripts/getArgs.mjs diff --git a/README.md b/README.md index 0054f33d..43f9fdc8 100644 --- a/README.md +++ b/README.md @@ -102,3 +102,12 @@ To start the docs in your browser, run ``` npm run serve:docs ``` + +## Testing and Debugging + +### Preview Palettes +To preview a palette you can pass the palette (`material`, `bootstrap`, `fluent`, `indigo`) and variant to the (`light` or `dark`) to the `palette` and `variant` arguments respectively. If you want to output the result to a file in the `./dist` folder add the `out` option. + +``` +npm run preview:palette -- --palette=material --variant=light --out +``` diff --git a/package-lock.json b/package-lock.json index 1eb94173..7b3c0bb6 100644 --- a/package-lock.json +++ b/package-lock.json @@ -27,11 +27,10 @@ "shx": "^0.3.4", "stylelint": "^15.6.2", "stylelint-config-standard-scss": "^7.0.1", - "stylelint-scss": "^4.7.0", - "yargs": "^17.7.2" + "stylelint-scss": "^4.7.0" }, "peerDependencies": { - "sass": "^1.58.1" + "sass": "^1.69.5" } }, "node_modules/@aashutoshrathi/word-wrap": { @@ -7899,9 +7898,9 @@ } }, "node_modules/sass": { - "version": "1.58.1", - "resolved": "https://registry.npmjs.org/sass/-/sass-1.58.1.tgz", - "integrity": "sha512-bnINi6nPXbP1XNRaranMFEBZWUfdW/AF16Ql5+ypRxfTvCRTTKrLsMIakyDcayUt2t/RZotmL4kgJwNH5xO+bg==", + "version": "1.69.5", + "resolved": "https://registry.npmjs.org/sass/-/sass-1.69.5.tgz", + "integrity": "sha512-qg2+UCJibLr2LCVOt3OlPhr/dqVHWOa9XtZf2OjbLs/T4VPSJ00udtgJxH3neXZm+QqX8B+3cU7RaLqp1iVfcQ==", "peer": true, "dependencies": { "chokidar": ">=3.0.0 <4.0.0", @@ -7912,7 +7911,7 @@ "sass": "sass.js" }, "engines": { - "node": ">=12.0.0" + "node": ">=14.0.0" } }, "node_modules/sass-convert": { @@ -15964,9 +15963,9 @@ } }, "sass": { - "version": "1.58.1", - "resolved": "https://registry.npmjs.org/sass/-/sass-1.58.1.tgz", - "integrity": "sha512-bnINi6nPXbP1XNRaranMFEBZWUfdW/AF16Ql5+ypRxfTvCRTTKrLsMIakyDcayUt2t/RZotmL4kgJwNH5xO+bg==", + "version": "1.69.5", + "resolved": "https://registry.npmjs.org/sass/-/sass-1.69.5.tgz", + "integrity": "sha512-qg2+UCJibLr2LCVOt3OlPhr/dqVHWOa9XtZf2OjbLs/T4VPSJ00udtgJxH3neXZm+QqX8B+3cU7RaLqp1iVfcQ==", "peer": true, "requires": { "chokidar": ">=3.0.0 <4.0.0", diff --git a/package.json b/package.json index a52a3f45..3dab31f8 100644 --- a/package.json +++ b/package.json @@ -93,10 +93,9 @@ "shx": "^0.3.4", "stylelint": "^15.6.2", "stylelint-config-standard-scss": "^7.0.1", - "stylelint-scss": "^4.7.0", - "yargs": "^17.7.2" + "stylelint-scss": "^4.7.0" }, "peerDependencies": { - "sass": "^1.58.1" + "sass": "^1.69.5" } } diff --git a/sass/color/_functions.scss b/sass/color/_functions.scss index 98aaec6d..affa2dcb 100644 --- a/sass/color/_functions.scss +++ b/sass/color/_functions.scss @@ -139,8 +139,14 @@ $_enhanced-accessibility: false; $len: list.length($lmap); $i: list.index(map.keys($lmap), $shade); $l: list.nth(map.values($lmap), if($lum > 0.5, $len - $i + 1, $i)); + $raw: hsl(to-fixed(color.hue($color)), to-fixed(color.saturation($color)), $l); + $hsl: #{hsl(from var(--ig-#{$name}-500) h s $l)}; - @return (raw: hsl(to-fixed(color.hue($color)), to-fixed(color.saturation($color)), $l), hsl: #{$h, $s, $l}); + @if #{$shade} == '500' { + $hsl: hsl($h $s $l); + } + + @return (raw: $raw, hsl: $hsl); } @else { $sx: map.get(multipliers.$color, 's', $shade); $lx: map.get(multipliers.$color, 'l', $shade); @@ -149,9 +155,11 @@ $_enhanced-accessibility: false; to-fixed(color.saturation($color) * $sx), to-fixed(color.lightness($color) * $lx) ); + $hsl: #{hsl(from var(--ig-#{$name}-500) h calc(s * $sx) calc(l * $lx))}; - // prettier-ignore - $hsl: #{$h, calc(#{$s} * #{$sx}), calc(#{$l} * #{$lx})}; + @if #{$shade} == '500' { + $hsl: hsl($h $s $l); + } @return (raw: $raw, hsl: $hsl); } @@ -184,7 +192,7 @@ $_enhanced-accessibility: false; $contrast: if(meta.type-of($variant) == string, string.index($variant, 'contrast'), false); $meta: if($palette, map.get($palette, '_meta'), null); $_alpha: if($opacity, $opacity, 1); - $_hsl-alpha: hsla($s, if($opacity, $opacity, $a)); + $_hsl-alpha: hsl(from $s h s l/ if($opacity, $opacity, $a)); $_mix-alpha: color-mix(in oklch, $s #{$_alpha * 100%}, transparent); @if not($palette) or not($meta) { diff --git a/sass/color/_mixins.scss b/sass/color/_mixins.scss index 88b789da..402df3b7 100644 --- a/sass/color/_mixins.scss +++ b/sass/color/_mixins.scss @@ -36,10 +36,11 @@ // Generates CSS variables for a shade color // @access private -@mixin _shade($color, $shade, $value, $contrast) { +@mixin _shade($color, $shade, $value, $contrast, $variant) { $_shade: meta.type-of($shade) == 'string'; $_hsl: if($_shade, string.index($shade, 'hsl'), false); $_contrast: if($_shade, string.index($shade, 'contrast'), false); + $_variant: if($_shade, string.index($shade, 'variant'), false); $_color: '' + $color; @if $_hsl { @@ -48,7 +49,7 @@ --ig-#{$_color}-#{$variant}: #{$value}; } - @if not($_hsl) and not($_contrast) { + @if not($_hsl) and not($_contrast) and not($_variant) { --ig-#{$_color}-#{$shade}: #{$value}; } @@ -68,12 +69,13 @@ /// @require {function} is-root @mixin palette($palette, $contrast: true) { $scope: if(is-root(), ':root', '&'); + $variant: map.get($palette, '_meta', 'variant'); #{$scope} { @each $color, $shades in map.remove($palette, '_meta') { @each $shade, $value in $shades { @include _base($color, $shade, $value); - @include _shade($color, $shade, $value, $contrast); + @include _shade($color, $shade, $value, $contrast, $variant); } } } diff --git a/sass/color/_multipliers.scss b/sass/color/_multipliers.scss index 6f56de0a..f6f0356b 100644 --- a/sass/color/_multipliers.scss +++ b/sass/color/_multipliers.scss @@ -7,9 +7,9 @@ $color: ( 400: 0.875, 500: 1, 600: 1.26, - 700: 1.52, - 800: 1.5, - 900: 1.34, + 700: 1.26, + 800: 1.26, + 900: 1.26, 'A100': 1.23, 'A200': 1.22, 'A400': 1.23, diff --git a/sass/color/presets/dark/_indigo.scss b/sass/color/presets/dark/_indigo.scss index 827f4247..e32582ff 100644 --- a/sass/color/presets/dark/_indigo.scss +++ b/sass/color/presets/dark/_indigo.scss @@ -23,205 +23,205 @@ $surface-shades: shades('surface', #1e1f24, $color-shades); /// @prop {Color} surface [#1e1f24] - The surface color. $palette: ( 'primary': ( - 50: to-hsl(#c5cdff), + 50: #c5cdff, '50-contrast': black, - 100: to-hsl(#a3aff6), + 100: #a3aff6, '100-contrast': black, - 200: to-hsl(#8293f8), + 200: #8293f8, '200-contrast': black, - 300: to-hsl(#7385f4), + 300: #7385f4, '300-contrast': black, - 400: to-hsl(#5468d9), + 400: #5468d9, '400-contrast': black, - 500: to-hsl(#3f51b5), + 500: #3f51b5, '500-contrast': white, - 600: to-hsl(#39479c), + 600: #39479c, '600-contrast': white, - 700: to-hsl(#333d83), + 700: #333d83, '700-contrast': white, - 800: to-hsl(#2e3172), + 800: #2e3172, '800-contrast': white, - 900: to-hsl(#262851), + 900: #262851, '900-contrast': white, - 'A100': to-hsl(#39479c), + 'A100': #39479c, 'A100-contrast': white, - 'A200': to-hsl(#333d83), + 'A200': #333d83, 'A200-contrast': white, - 'A400': to-hsl(#2e3172), + 'A400': #2e3172, 'A400-contrast': white, - 'A700': to-hsl(#262851), + 'A700': #262851, 'A700-contrast': white, ), 'secondary': ( - 50: to-hsl(#c5cdff), + 50: #c5cdff, '50-contrast': black, - 100: to-hsl(#a3aff6), + 100: #a3aff6, '100-contrast': black, - 200: to-hsl(#8293f8), + 200: #8293f8, '200-contrast': black, - 300: to-hsl(#7385f4), + 300: #7385f4, '300-contrast': black, - 400: to-hsl(#5468d9), + 400: #5468d9, '400-contrast': black, - 500: to-hsl(#3f51b5), + 500: #3f51b5, '500-contrast': white, - 600: to-hsl(#39479c), + 600: #39479c, '600-contrast': white, - 700: to-hsl(#333d83), + 700: #333d83, '700-contrast': white, - 800: to-hsl(#2e3172), + 800: #2e3172, '800-contrast': white, - 900: to-hsl(#262851), + 900: #262851, '900-contrast': white, - 'A100': to-hsl(#39479c), + 'A100': #39479c, 'A100-contrast': white, - 'A200': to-hsl(#333d83), + 'A200': #333d83, 'A200-contrast': white, - 'A400': to-hsl(#2e3172), + 'A400': #2e3172, 'A400-contrast': white, - 'A700': to-hsl(#262851), + 'A700': #262851, 'A700-contrast': white, ), 'gray': ( - 50: to-hsl(#24252c), + 50: #24252c, '50-contrast': white, - 100: to-hsl(#3b3d47), + 100: #3b3d47, '100-contrast': white, - 200: to-hsl(#545762), + 200: #545762, '200-contrast': white, - 300: to-hsl(#6c707a), + 300: #6c707a, '300-contrast': white, - 400: to-hsl(#9a9da2), + 400: #9a9da2, '400-contrast': black, - 500: to-hsl(#c3c4c7), + 500: #c3c4c7, '500-contrast': black, - 600: to-hsl(#d6d8dc), + 600: #d6d8dc, '600-contrast': black, - 700: to-hsl(#ebedf2), + 700: #ebedf2, '700-contrast': black, - 800: to-hsl(#f8f8fa), + 800: #f8f8fa, '800-contrast': black, - 900: to-hsl(#fcfcfd), + 900: #fcfcfd, '900-contrast': black, ), 'info': ( - 50: to-hsl(#f1c3ff), + 50: #f1c3ff, '50-contrast': black, - 100: to-hsl(#e89eff), + 100: #e89eff, '100-contrast': black, - 200: to-hsl(#dd71ff), + 200: #dd71ff, '200-contrast': black, - 300: to-hsl(#da64ff), + 300: #da64ff, '300-contrast': black, - 400: to-hsl(#bc34d3), + 400: #bc34d3, '400-contrast': white, - 500: to-hsl(#9c27b0), + 500: #9c27b0, '500-contrast': white, - 600: to-hsl(#8c16a0), + 600: #8c16a0, '600-contrast': white, - 700: to-hsl(#7f1192), + 700: #7f1192, '700-contrast': white, - 800: to-hsl(#6f0a80), + 800: #6f0a80, '800-contrast': white, - 900: to-hsl(#5c056b), + 900: #5c056b, '900-contrast': white, - 'A100': to-hsl(#8c16a0), + 'A100': #8c16a0, 'A100-contrast': white, - 'A200': to-hsl(#7f1192), + 'A200': #7f1192, 'A200-contrast': white, - 'A400': to-hsl(#6f0a80), + 'A400': #6f0a80, 'A400-contrast': white, - 'A700': to-hsl(#5c056b), + 'A700': #5c056b, 'A700-contrast': white, ), 'success': ( - 50: to-hsl(#edf3e7), + 50: #edf3e7, '50-contrast': black, - 100: to-hsl(#d2e2c3), + 100: #d2e2c3, '100-contrast': black, - 200: to-hsl(#b4cf9c), + 200: #b4cf9c, '200-contrast': black, - 300: to-hsl(#95bc74), + 300: #95bc74, '300-contrast': black, - 400: to-hsl(#7fad56), + 400: #7fad56, '400-contrast': black, - 500: to-hsl(#689f38), + 500: #689f38, '500-contrast': black, - 600: to-hsl(#5a912a), + 600: #5a912a, '600-contrast': black, - 700: to-hsl(#4e8222), + 700: #4e8222, '700-contrast': white, - 800: to-hsl(#3d7012), + 800: #3d7012, '800-contrast': white, - 900: to-hsl(#316109), + 900: #316109, '900-contrast': white, - 'A100': to-hsl(#5a912a), + 'A100': #5a912a, 'A100-contrast': black, - 'A200': to-hsl(#4e8222), + 'A200': #4e8222, 'A200-contrast': white, - 'A400': to-hsl(#3d7012), + 'A400': #3d7012, 'A400-contrast': white, - 'A700': to-hsl(#316109), + 'A700': #316109, 'A700-contrast': white, ), 'warn': ( - 50: to-hsl(#fed7b7), + 50: #fed7b7, '50-contrast': black, - 100: to-hsl(#ffc696), + 100: #ffc696, '100-contrast': black, - 200: to-hsl(#ffad67), + 200: #ffad67, '200-contrast': black, - 300: to-hsl(#fb8f32), + 300: #fb8f32, '300-contrast': black, - 400: to-hsl(#fa7b0e), + 400: #fa7b0e, '400-contrast': black, - 500: to-hsl(#f56b1d), + 500: #f56b1d, '500-contrast': black, - 600: to-hsl(#f05a2b), + 600: #f05a2b, '600-contrast': black, - 700: to-hsl(#ec4820), + 700: #ec4820, '700-contrast': black, - 800: to-hsl(#df370e), + 800: #df370e, '800-contrast': black, - 900: to-hsl(#d22900), + 900: #d22900, '900-contrast': white, - 'A100': to-hsl(#f05a2b), + 'A100': #f05a2b, 'A100-contrast': black, - 'A200': to-hsl(#ec4820), + 'A200': #ec4820, 'A200-contrast': black, - 'A400': to-hsl(#df370e), + 'A400': #df370e, 'A400-contrast': black, - 'A700': to-hsl(#d22900), + 'A700': #d22900, 'A700-contrast': white, ), 'error': ( - 50: to-hsl(#ffebf0), + 50: #ffebf0, '50-contrast': black, - 100: to-hsl(#ffb0b7), + 100: #ffb0b7, '100-contrast': black, - 200: to-hsl(#fc7f8a), + 200: #fc7f8a, '200-contrast': black, - 300: to-hsl(#ec5461), + 300: #ec5461, '300-contrast': black, - 400: to-hsl(#dd3544), + 400: #dd3544, '400-contrast': black, - 500: to-hsl(#cf1a2b), + 500: #cf1a2b, '500-contrast': white, - 600: to-hsl(#c31223), + 600: #c31223, '600-contrast': white, - 700: to-hsl(#b90415), + 700: #b90415, '700-contrast': white, - 800: to-hsl(#ae0111), + 800: #ae0111, '800-contrast': white, - 900: to-hsl(#9f000f), + 900: #9f000f, '900-contrast': white, - 'A100': to-hsl(#c31223), + 'A100': #c31223, 'A100-contrast': white, - 'A200': to-hsl(#b90415), + 'A200': #b90415, 'A200-contrast': white, - 'A400': to-hsl(#ae0111), + 'A400': #ae0111, 'A400-contrast': white, - 'A700': to-hsl(#9f000f), + 'A700': #9f000f, 'A700-contrast': white, ), 'surface': $surface-shades, diff --git a/sass/color/presets/light/_indigo.scss b/sass/color/presets/light/_indigo.scss index 850d892f..57a8017b 100644 --- a/sass/color/presets/light/_indigo.scss +++ b/sass/color/presets/light/_indigo.scss @@ -23,205 +23,205 @@ $surface-shades: shades('surface', #f8f8fa, $color-shades); /// @prop {Color} surface [#f8f8fa] - The surface color. $palette: ( 'primary': ( - 50: to-hsl(#c5cdff), + 50: #c5cdff, '50-contrast': black, - 100: to-hsl(#a3aff6), + 100: #a3aff6, '100-contrast': black, - 200: to-hsl(#8293f8), + 200: #8293f8, '200-contrast': black, - 300: to-hsl(#7385f4), + 300: #7385f4, '300-contrast': black, - 400: to-hsl(#5468d9), + 400: #5468d9, '400-contrast': black, - 500: to-hsl(#3f51b5), + 500: #3f51b5, '500-contrast': white, - 600: to-hsl(#39479c), + 600: #39479c, '600-contrast': white, - 700: to-hsl(#333d83), + 700: #333d83, '700-contrast': white, - 800: to-hsl(#2e3172), + 800: #2e3172, '800-contrast': white, - 900: to-hsl(#262851), + 900: #262851, '900-contrast': white, - 'A100': to-hsl(#39479c), + 'A100': #39479c, 'A100-contrast': white, - 'A200': to-hsl(#333d83), + 'A200': #333d83, 'A200-contrast': white, - 'A400': to-hsl(#2e3172), + 'A400': #2e3172, 'A400-contrast': white, - 'A700': to-hsl(#262851), + 'A700': #262851, 'A700-contrast': white, ), 'secondary': ( - 50: to-hsl(#c5cdff), + 50: #c5cdff, '50-contrast': black, - 100: to-hsl(#a3aff6), + 100: #a3aff6, '100-contrast': black, - 200: to-hsl(#8293f8), + 200: #8293f8, '200-contrast': black, - 300: to-hsl(#7385f4), + 300: #7385f4, '300-contrast': black, - 400: to-hsl(#5468d9), + 400: #5468d9, '400-contrast': black, - 500: to-hsl(#3f51b5), + 500: #3f51b5, '500-contrast': white, - 600: to-hsl(#39479c), + 600: #39479c, '600-contrast': white, - 700: to-hsl(#333d83), + 700: #333d83, '700-contrast': white, - 800: to-hsl(#2e3172), + 800: #2e3172, '800-contrast': white, - 900: to-hsl(#262851), + 900: #262851, '900-contrast': white, - 'A100': to-hsl(#39479c), + 'A100': #39479c, 'A100-contrast': white, - 'A200': to-hsl(#333d83), + 'A200': #333d83, 'A200-contrast': white, - 'A400': to-hsl(#2e3172), + 'A400': #2e3172, 'A400-contrast': white, - 'A700': to-hsl(#262851), + 'A700': #262851, 'A700-contrast': white, ), 'gray': ( - 50: to-hsl(#fcfcfd), + 50: #fcfcfd, '50-contrast': black, - 100: to-hsl(#f8f8fa), + 100: #f8f8fa, '100-contrast': black, - 200: to-hsl(#ebedf2), + 200: #ebedf2, '200-contrast': black, - 300: to-hsl(#d6d8dc), + 300: #d6d8dc, '300-contrast': black, - 400: to-hsl(#c3c4c7), + 400: #c3c4c7, '400-contrast': black, - 500: to-hsl(#9a9da2), + 500: #9a9da2, '500-contrast': black, - 600: to-hsl(#6c707a), + 600: #6c707a, '600-contrast': white, - 700: to-hsl(#545762), + 700: #545762, '700-contrast': white, - 800: to-hsl(#3b3d47), + 800: #3b3d47, '800-contrast': white, - 900: to-hsl(#24252c), + 900: #24252c, '900-contrast': white, ), 'info': ( - 50: to-hsl(#f1c3ff), + 50: #f1c3ff, '50-contrast': black, - 100: to-hsl(#e89eff), + 100: #e89eff, '100-contrast': black, - 200: to-hsl(#dd71ff), + 200: #dd71ff, '200-contrast': black, - 300: to-hsl(#da64ff), + 300: #da64ff, '300-contrast': black, - 400: to-hsl(#bc34d3), + 400: #bc34d3, '400-contrast': white, - 500: to-hsl(#9c27b0), + 500: #9c27b0, '500-contrast': white, - 600: to-hsl(#8c16a0), + 600: #8c16a0, '600-contrast': white, - 700: to-hsl(#7f1192), + 700: #7f1192, '700-contrast': white, - 800: to-hsl(#6f0a80), + 800: #6f0a80, '800-contrast': white, - 900: to-hsl(#5c056b), + 900: #5c056b, '900-contrast': white, - 'A100': to-hsl(#8c16a0), + 'A100': #8c16a0, 'A100-contrast': white, - 'A200': to-hsl(#7f1192), + 'A200': #7f1192, 'A200-contrast': white, - 'A400': to-hsl(#6f0a80), + 'A400': #6f0a80, 'A400-contrast': white, - 'A700': to-hsl(#5c056b), + 'A700': #5c056b, 'A700-contrast': white, ), 'success': ( - 50: to-hsl(#edf3e7), + 50: #edf3e7, '50-contrast': black, - 100: to-hsl(#d2e2c3), + 100: #d2e2c3, '100-contrast': black, - 200: to-hsl(#b4cf9c), + 200: #b4cf9c, '200-contrast': black, - 300: to-hsl(#95bc74), + 300: #95bc74, '300-contrast': black, - 400: to-hsl(#7fad56), + 400: #7fad56, '400-contrast': black, - 500: to-hsl(#689f38), + 500: #689f38, '500-contrast': black, - 600: to-hsl(#5a912a), + 600: #5a912a, '600-contrast': black, - 700: to-hsl(#4e8222), + 700: #4e8222, '700-contrast': white, - 800: to-hsl(#3d7012), + 800: #3d7012, '800-contrast': white, - 900: to-hsl(#316109), + 900: #316109, '900-contrast': white, - 'A100': to-hsl(#5a912a), + 'A100': #5a912a, 'A100-contrast': black, - 'A200': to-hsl(#4e8222), + 'A200': #4e8222, 'A200-contrast': white, - 'A400': to-hsl(#3d7012), + 'A400': #3d7012, 'A400-contrast': white, - 'A700': to-hsl(#316109), + 'A700': #316109, 'A700-contrast': white, ), 'warn': ( - 50: to-hsl(#fed7b7), + 50: #fed7b7, '50-contrast': black, - 100: to-hsl(#ffc696), + 100: #ffc696, '100-contrast': black, - 200: to-hsl(#ffad67), + 200: #ffad67, '200-contrast': black, - 300: to-hsl(#fb8f32), + 300: #fb8f32, '300-contrast': black, - 400: to-hsl(#fa7b0e), + 400: #fa7b0e, '400-contrast': black, - 500: to-hsl(#f56b1d), + 500: #f56b1d, '500-contrast': black, - 600: to-hsl(#f05a2b), + 600: #f05a2b, '600-contrast': black, - 700: to-hsl(#ec4820), + 700: #ec4820, '700-contrast': black, - 800: to-hsl(#df370e), + 800: #df370e, '800-contrast': black, - 900: to-hsl(#d22900), + 900: #d22900, '900-contrast': white, - 'A100': to-hsl(#f05a2b), + 'A100': #f05a2b, 'A100-contrast': black, - 'A200': to-hsl(#ec4820), + 'A200': #ec4820, 'A200-contrast': black, - 'A400': to-hsl(#df370e), + 'A400': #df370e, 'A400-contrast': black, - 'A700': to-hsl(#d22900), + 'A700': #d22900, 'A700-contrast': white, ), 'error': ( - 50: to-hsl(#ffebf0), + 50: #ffebf0, '50-contrast': black, - 100: to-hsl(#ffb0b7), + 100: #ffb0b7, '100-contrast': black, - 200: to-hsl(#fc7f8a), + 200: #fc7f8a, '200-contrast': black, - 300: to-hsl(#ec5461), + 300: #ec5461, '300-contrast': black, - 400: to-hsl(#dd3544), + 400: #dd3544, '400-contrast': black, - 500: to-hsl(#cf1a2b), + 500: #cf1a2b, '500-contrast': white, - 600: to-hsl(#c31223), + 600: #c31223, '600-contrast': white, - 700: to-hsl(#b90415), + 700: #b90415, '700-contrast': white, - 800: to-hsl(#ae0111), + 800: #ae0111, '800-contrast': white, - 900: to-hsl(#9f000f), + 900: #9f000f, '900-contrast': white, - 'A100': to-hsl(#c31223), + 'A100': #c31223, 'A100-contrast': white, - 'A200': to-hsl(#b90415), + 'A200': #b90415, 'A200-contrast': white, - 'A400': to-hsl(#ae0111), + 'A400': #ae0111, 'A400-contrast': white, - 'A700': to-hsl(#9f000f), + 'A700': #9f000f, 'A700-contrast': white, ), 'surface': $surface-shades, diff --git a/scripts/getArgs.mjs b/scripts/getArgs.mjs new file mode 100644 index 00000000..ba012099 --- /dev/null +++ b/scripts/getArgs.mjs @@ -0,0 +1,20 @@ +export default function getArgs() { + const args = {}; + process.argv.slice(2, process.argv.length).forEach((arg) => { + // long arg + if (arg.slice(0, 2) === "--") { + const longArg = arg.split("="); + const longArgFlag = longArg[0].slice(2, longArg[0].length); + const longArgValue = longArg.length > 1 ? longArg[1] : true; + args[longArgFlag] = longArgValue; + } + // flags + else if (arg[0] === "-") { + const flags = arg.slice(1, arg.length).split(""); + flags.forEach((flag) => { + args[flag] = true; + }); + } + }); + return args; +} diff --git a/scripts/previewPalette.mjs b/scripts/previewPalette.mjs index 8320185c..82709b19 100644 --- a/scripts/previewPalette.mjs +++ b/scripts/previewPalette.mjs @@ -1,8 +1,28 @@ -import yargs from "yargs"; -import { hideBin } from "yargs/helpers"; -import sass from "sass"; +import path from 'path'; +import { mkdirSync as makeDir } from 'fs'; +import { fileURLToPath } from 'url'; +import { writeFile } from 'fs/promises'; +import * as sass from 'sass'; +import getArgs from './getArgs.mjs'; +import postcss from 'postcss'; -const { palette, variant } = yargs(hideBin(process.argv)).parse(); +const __dirname = path.dirname(fileURLToPath(import.meta.url)); +const DEST_DIR = path.join.bind(null, path.resolve(__dirname, '../dist')); + +const {palette, variant, out} = getArgs(); + +const stripComments = () => { + return { + postcssPlugin: 'postcss-strip-comments', + OnceExit(root) { + root.walkComments((node) => node.remove()); + }, + }; +}; + +stripComments.postcss = true; + +const postProcessor = postcss([stripComments]); const styles = ` @use 'sass:string'; @@ -11,12 +31,40 @@ const styles = ` @use 'sass/color'; @use 'sass/color/presets' as *; - @each $p, $c in map.remove(color.$IPalette, '_meta') { + $protoPalette: map.remove(color.$IPalette, '_meta'); + $result: (); + + @each $p, $c in $protoPalette { + $result: map.merge($result, ($p: ())); + @each $v in $c { - @debug string.unquote('#{$p}-#{$v}:') color($${variant}-${palette}-palette, $p, $v); - @debug string.unquote('#{$p}-#{$v}-contrast:') contrast-color($${variant}-${palette}-palette, $p, $v); + $shade: color($${variant}-${palette}-palette, $p, $v); + $contrast: contrast-color($${variant}-${palette}-palette, $p, $v); + $result: map.merge($result, $p, ($v: $shade, #{$v}-contrast: $contrast)); + } + } + + @each $palette, $color in $result { + #{$palette} { + @each $shade, $value in $color { + #{$shade}: #{$value}; + } } } `; -sass.compileString(styles, { loadPaths: ["./"] }); +const result = sass.compileString(styles, {loadPaths: ['./']}); +let cssStr = postProcessor.process(result.css).css; + +// Strip BOM if any +if (cssStr.charCodeAt(0) === 0xfeff) { + cssStr = cssStr.substring(1); +} + +console.log(cssStr); + +if (out) { + const outputFile = DEST_DIR(`${palette}-${variant}.css`); + makeDir(path.dirname(outputFile), { recursive: true }); + await writeFile(outputFile, cssStr, 'utf-8'); +} diff --git a/test/_color.spec.scss b/test/_color.spec.scss index 2eaa9ae5..b5dd3718 100644 --- a/test/_color.spec.scss +++ b/test/_color.spec.scss @@ -123,21 +123,21 @@ $_palette: palette( $value: color(); @include assert-equal(type-of($value), string); - @include assert-equal($value, hsla(var(--ig-primary-500), var(--ig-primary-a))); + @include assert-equal($value, hsl(from (var(--ig-primary-500)) h s l / var(--ig-primary-a))); } @include it('should return a shade as CSS variable w/ color as only argument') { $value: color($color: secondary); @include assert-equal(type-of($value), string); - @include assert-equal($value, hsla(var(--ig-secondary-500), var(--ig-secondary-a))); + @include assert-equal($value, hsl(from (var(--ig-secondary-500)) h s l / var(--ig-secondary-a))); } @include it('should return a shade of type string as CSS var w/ color and variant as only arguments') { $value: color($color: secondary, $variant: 'A400'); @include assert-equal(type-of($value), string); - @include assert-equal($value, hsla(var(--ig-secondary-A400), var(--ig-secondary-a))); + @include assert-equal($value, hsl(from (var(--ig-secondary-A400)) h s l / var(--ig-secondary-a))); } @include it('should return a contrast shade of type color w/ palette as only argument') { @@ -160,7 +160,7 @@ $_palette: palette( $shade: shade($color, $_primary, $variant, null); $expected: ( raw: hsl(204deg 100% 44.5%), - hsl: #{var(--ig-primary-h), calc(var(--ig-primary-s) * 1.26), calc(var(--ig-primary-l) * .89)} + hsl: #{hsl(from var(--ig-primary-500) h calc(s * 1.26) calc(l * 0.89))} ); @include assert-equal($shade, $expected); @@ -173,7 +173,7 @@ $_palette: palette( $shade: shade($color, null, $variant, $surface); $expected: ( raw: hsl(0deg 0% 98%), - hsl: #{var(--ig-gray-h), var(--ig-gray-s), 98%} + hsl: #{hsl(from var(--ig-gray-500) h s 98%)} ); // $surface is bright, return a darker shade of gray @@ -184,7 +184,7 @@ $_palette: palette( $expected: #{var(--ig-#{$color}-h), var(--ig-#{$color}-s), 13%}; $expected: ( raw: hsl(0deg 0% 13%), - hsl: #{var(--ig-gray-h), var(--ig-gray-s), 13%} + hsl: #{hsl(from var(--ig-gray-500) h s 13%)} ); // $surface is dark, return a lighter shade of gray @@ -237,15 +237,17 @@ $_palette: palette( --ig-gray-l: #{math.round(color.lightness($gray-500))}; --ig-gray-a: #{math.round(color.alpha($gray-500))}; --ig-primary-500: - #{var(--ig-primary-h), - calc(var(--ig-primary-s) * 1), - calc(var(--ig-primary-l) * 1)}; + #{hsl(var(--ig-primary-h), var(--ig-primary-s), var(--ig-primary-l))}; --ig-primary-500-contrast: #{contrast-color($_palette, primary, 500)}; + --ig-primary-600: + #{hsl(from var(--ig-primary-500) h calc(s * 1.26) calc(l * 0.89))}; --ig-gray-500: - #{var(--ig-gray-h), - var(--ig-gray-s), - #{math.round(color.lightness($gray-500))}}; + #{hsl(var(--ig-gray-h) + var(--ig-gray-s) + #{math.round(color.lightness($gray-500))})}; --ig-gray-500-contrast: #{contrast-color($_palette, gray, 500)}; + --ig-gray-600: + #{hsl(from var(--ig-gray-500) h s 54%)}; } } } @@ -312,7 +314,7 @@ $_palette: palette( $_ref: color(null, primary, 800); @include assert-equal($_hex, #316ec9); - @include assert-equal($_ref, hsla(var(--ig-primary-800), var(--ig-primary-a))); + @include assert-equal($_ref, hsl(from var(--ig-primary-800) h s l / var(--ig-primary-a))); } @include it('should convert a color to a list of HSL values') { diff --git a/test/_themes.spec.scss b/test/_themes.spec.scss index dd5bad10..a78990ba 100644 --- a/test/_themes.spec.scss +++ b/test/_themes.spec.scss @@ -103,8 +103,8 @@ $schema: ( $theme: ( variant: 'material', type: 'light', - background: hsla(var(--ig-primary-400), var(--ig-primary-a)), - hover-background: hsla(var(--ig-secondary-700), .26), + background: hsl(from var(--ig-primary-400) h s l / var(--ig-primary-a)), + hover-background: hsl(from var(--ig-secondary-700) h s l / .26), foreground: color-mix(in oklch, var(--ig-primary-400-contrast) 100%, transparent), hover-foreground: color-mix(in oklch, var(--ig-secondary-700-contrast) 100%, transparent), border-style: solid, diff --git a/test/e2e/theme.scss b/test/e2e/theme.scss index 7981abbe..ff7cfc10 100644 --- a/test/e2e/theme.scss +++ b/test/e2e/theme.scss @@ -17,5 +17,9 @@ // Test handmade palette .handmade { - @include palette(mocks.$handmade-palette); + $handmade-palette: mocks.$handmade-palette; + + @include palette($handmade-palette); + + color: color($handmade-palette, 'primary', 300); }