var-colors 1.0.0

package/scss/_maps.scss

@@ -0,0 +1,592 @@
+@use "sass:map";
+@use "sass:list";
+@use "sass:math";
+@use "./constants" as *;
+
+$preset-colors: (
+  "grey": (
+    hue: none,
+    max-chroma: (
+      srgb: 0,
+      pisplay-p3: 0,
+      rec2020: 0,
+    ),
+    max-chroma-lightness: (
+      srgb: 0,
+      pisplay-p3: 0,
+      rec2020: 0,
+    ),
+  ),
+  "rose": (
+    hue: 0,
+    max-chroma: (
+      srgb: 0.26,
+      pisplay-p3: 0.3,
+      rec2020: 0.37,
+    ),
+    max-chroma-lightness: (
+      srgb: 0.65,
+      pisplay-p3: 0.67,
+      rec2020: 0.7,
+    ),
+  ),
+  "crimson": (
+    hue: 15,
+    max-chroma: (
+      srgb: 0.25,
+      pisplay-p3: 0.29,
+      rec2020: 0.36,
+    ),
+    max-chroma-lightness: (
+      srgb: 0.64,
+      pisplay-p3: 0.66,
+      rec2020: 0.69,
+    ),
+  ),
+  "red": (
+    hue: 30,
+    max-chroma: (
+      srgb: 0.25,
+      pisplay-p3: 0.29,
+      rec2020: 0.31,
+    ),
+    max-chroma-lightness: (
+      srgb: 0.63,
+      pisplay-p3: 0.66,
+      rec2020: 0.72,
+    ),
+  ),
+  "tomato": (
+    hue: 45,
+    max-chroma: (
+      srgb: 0.2,
+      pisplay-p3: 0.23,
+      rec2020: 0.25,
+    ),
+    max-chroma-lightness: (
+      srgb: 0.7,
+      pisplay-p3: 0.72,
+      rec2020: 0.78,
+    ),
+  ),
+  "mango": (
+    hue: 60,
+    max-chroma: (
+      srgb: 0.17,
+      pisplay-p3: 0.2,
+      rec2020: 0.22,
+    ),
+    max-chroma-lightness: (
+      srgb: 0.76,
+      pisplay-p3: 0.78,
+      rec2020: 0.83,
+    ),
+  ),
+  "orange": (
+    hue: 75,
+    max-chroma: (
+      srgb: 0.17,
+      pisplay-p3: 0.19,
+      rec2020: 0.21,
+    ),
+    max-chroma-lightness: (
+      srgb: 0.81,
+      pisplay-p3: 0.82,
+      rec2020: 0.87,
+    ),
+  ),
+  "amber": (
+    hue: 90,
+    max-chroma: (
+      srgb: 0.17,
+      pisplay-p3: 0.2,
+      rec2020: 0.21,
+    ),
+    max-chroma-lightness: (
+      srgb: 0.86,
+      pisplay-p3: 0.87,
+      rec2020: 0.9,
+    ),
+  ),
+  "yellow": (
+    hue: 105,
+    max-chroma: (
+      srgb: 0.19,
+      pisplay-p3: 0.23,
+      rec2020: 0.24,
+    ),
+    max-chroma-lightness: (
+      srgb: 0.94,
+      pisplay-p3: 0.94,
+      rec2020: 0.96,
+    ),
+  ),
+  "lime": (
+    hue: 120,
+    max-chroma: (
+      srgb: 0.22,
+      pisplay-p3: 0.25,
+      rec2020: 0.26,
+    ),
+    max-chroma-lightness: (
+      srgb: 0.94,
+      pisplay-p3: 0.94,
+      rec2020: 0.94,
+    ),
+  ),
+  "green": (
+    hue: 135,
+    max-chroma: (
+      srgb: 0.26,
+      pisplay-p3: 0.3,
+      rec2020: 0.31,
+    ),
+    max-chroma-lightness: (
+      srgb: 0.89,
+      pisplay-p3: 0.89,
+      rec2020: 0.9,
+    ),
+  ),
+  "mint": (
+    hue: 150,
+    max-chroma: (
+      srgb: 0.24,
+      pisplay-p3: 0.32,
+      rec2020: 0.43,
+    ),
+    max-chroma-lightness: (
+      srgb: 0.88,
+      pisplay-p3: 0.86,
+      rec2020: 0.84,
+    ),
+  ),
+  "teal": (
+    hue: 165,
+    max-chroma: (
+      srgb: 0.18,
+      pisplay-p3: 0.25,
+      rec2020: 0.38,
+    ),
+    max-chroma-lightness: (
+      srgb: 0.89,
+      pisplay-p3: 0.87,
+      rec2020: 0.84,
+    ),
+  ),
+  "aqua": (
+    hue: 180,
+    max-chroma: (
+      srgb: 0.16,
+      pisplay-p3: 0.21,
+      rec2020: 0.33,
+    ),
+    max-chroma-lightness: (
+      srgb: 0.9,
+      pisplay-p3: 0.88,
+      rec2020: 0.86,
+    ),
+  ),
+  "cyan": (
+    hue: 195,
+    max-chroma: (
+      srgb: 0.15,
+      pisplay-p3: 0.2,
+      rec2020: 0.3,
+    ),
+    max-chroma-lightness: (
+      srgb: 0.91,
+      pisplay-p3: 0.88,
+      rec2020: 0.83,
+    ),
+  ),
+  "ice": (
+    hue: 210,
+    max-chroma: (
+      srgb: 0.14,
+      pisplay-p3: 0.18,
+      rec2020: 0.27,
+    ),
+    max-chroma-lightness: (
+      srgb: 0.84,
+      pisplay-p3: 0.81,
+      rec2020: 0.73,
+    ),
+  ),
+  "sky": (
+    hue: 225,
+    max-chroma: (
+      srgb: 0.14,
+      pisplay-p3: 0.18,
+      rec2020: 0.27,
+    ),
+    max-chroma-lightness: (
+      srgb: 0.78,
+      pisplay-p3: 0.75,
+      rec2020: 0.64,
+    ),
+  ),
+  "azure": (
+    hue: 240,
+    max-chroma: (
+      srgb: 0.16,
+      pisplay-p3: 0.2,
+      rec2020: 0.31,
+    ),
+    max-chroma-lightness: (
+      srgb: 0.72,
+      pisplay-p3: 0.68,
+      rec2020: 0.53,
+    ),
+  ),
+  "water": (
+    hue: 255,
+    max-chroma: (
+      srgb: 0.2,
+      pisplay-p3: 0.24,
+      rec2020: 0.35,
+    ),
+    max-chroma-lightness: (
+      srgb: 0.62,
+      pisplay-p3: 0.59,
+      rec2020: 0.44,
+    ),
+  ),
+  "blue": (
+    hue: 270,
+    max-chroma: (
+      srgb: 0.3,
+      pisplay-p3: 0.31,
+      rec2020: 0.32,
+    ),
+    max-chroma-lightness: (
+      srgb: 0.47,
+      pisplay-p3: 0.48,
+      rec2020: 0.47,
+    ),
+  ),
+  "indigo": (
+    hue: 285,
+    max-chroma: (
+      srgb: 0.29,
+      pisplay-p3: 0.3,
+      rec2020: 0.32,
+    ),
+    max-chroma-lightness: (
+      srgb: 0.5,
+      pisplay-p3: 0.52,
+      rec2020: 0.5,
+    ),
+  ),
+  "violet": (
+    hue: 300,
+    max-chroma: (
+      srgb: 0.29,
+      pisplay-p3: 0.31,
+      rec2020: 0.33,
+    ),
+    max-chroma-lightness: (
+      srgb: 0.55,
+      pisplay-p3: 0.56,
+      rec2020: 0.54,
+    ),
+  ),
+  "purple": (
+    hue: 315,
+    max-chroma: (
+      srgb: 0.3,
+      pisplay-p3: 0.33,
+      rec2020: 0.35,
+    ),
+    max-chroma-lightness: (
+      srgb: 0.62,
+      pisplay-p3: 0.63,
+      rec2020: 0.6,
+    ),
+  ),
+  "magenta": (
+    hue: 330,
+    max-chroma: (
+      srgb: 0.31,
+      pisplay-p3: 0.35,
+      rec2020: 0.39,
+    ),
+    max-chroma-lightness: (
+      srgb: 0.7,
+      pisplay-p3: 0.71,
+      rec2020: 0.69,
+    ),
+  ),
+  "pink": (
+    hue: 345,
+    max-chroma: (
+      srgb: 0.28,
+      pisplay-p3: 0.32,
+      rec2020: 0.4,
+    ),
+    max-chroma-lightness: (
+      srgb: 0.67,
+      pisplay-p3: 0.69,
+      rec2020: 0.73,
+    ),
+  ),
+);
+$preset-colors-keys: ();
+$preset-colors-hues: ();
+@each $color-key, $color-data in $preset-colors {
+  $color-hue: map.get($color-data, "hue");
+  $preset-colors-keys: list.append($preset-colors-keys, $color-key);
+  $preset-colors-hues: list.append($preset-colors-hues, $color-hue);
+}
+/* $preset-colors-keys-and-hues: map.merge(
+  $preset-colors-keys,
+  $preset-colors-hues
+); */
+
+$darkness-levels: (
+  0: (
+    min-lightness: 0.989,
+    max-lightness: 1,
+    consistent-chroma: 0,
+    lightness: 1,
+  ),
+  25: (
+    min-lightness: 0.968,
+    max-lightness: 0.989,
+    consistent-chroma: 0.011,
+    lightness: 1 - 1 * $regular-levels-lightness-step,
+  ),
+  50: (
+    min-lightness: 0.946,
+    max-lightness: 0.968,
+    consistent-chroma: 0.022,
+    lightness: 1 - 2 * $regular-levels-lightness-step,
+  ),
+  75: (
+    min-lightness: 0.925,
+    max-lightness: 0.946,
+    consistent-chroma: 0.033,
+    lightness: 1 - 3 * $regular-levels-lightness-step,
+  ),
+  100: (
+    min-lightness: 0.903,
+    max-lightness: 0.925,
+    consistent-chroma: 0.045,
+    lightness: 1 - 4 * $regular-levels-lightness-step,
+  ),
+  125: (
+    min-lightness: 0.882,
+    max-lightness: 0.903,
+    consistent-chroma: 0.057,
+    lightness: 1 - 5 * $regular-levels-lightness-step,
+  ),
+  150: (
+    min-lightness: 0.86,
+    max-lightness: 0.882,
+    consistent-chroma: 0.069,
+    lightness: 1 - 6 * $regular-levels-lightness-step,
+  ),
+  175: (
+    min-lightness: 0.838,
+    max-lightness: 0.86,
+    consistent-chroma: 0.081,
+    lightness: 1 - 7 * $regular-levels-lightness-step,
+  ),
+  200: (
+    min-lightness: 0.817,
+    max-lightness: 0.838,
+    consistent-chroma: 0.093,
+    lightness: 1 - 8 * $regular-levels-lightness-step,
+  ),
+  225: (
+    min-lightness: 0.795,
+    max-lightness: 0.817,
+    consistent-chroma: 0.105,
+    lightness: 1 - 9 * $regular-levels-lightness-step,
+  ),
+  250: (
+    min-lightness: 0.774,
+    max-lightness: 0.795,
+    consistent-chroma: 0.118,
+    lightness: 1 - 10 * $regular-levels-lightness-step,
+  ),
+  275: (
+    min-lightness: 0.752,
+    max-lightness: 0.774,
+    consistent-chroma: 0.131,
+    lightness: 1 - 11 * $regular-levels-lightness-step,
+  ),
+  300: (
+    min-lightness: 0.731,
+    max-lightness: 0.752,
+    consistent-chroma: 0.143,
+    lightness: 1 - 12 * $regular-levels-lightness-step,
+  ),
+  325: (
+    min-lightness: 0.709,
+    max-lightness: 0.731,
+    consistent-chroma: 0.157,
+    lightness: 1 - 13 * $regular-levels-lightness-step,
+  ),
+  350: (
+    min-lightness: 0.688,
+    max-lightness: 0.709,
+    consistent-chroma: 0.159,
+    lightness: 1 - 14 * $regular-levels-lightness-step,
+  ),
+  375: (
+    min-lightness: 0.666,
+    max-lightness: 0.688,
+    consistent-chroma: 0.154,
+    lightness: 1 - 15 * $regular-levels-lightness-step,
+  ),
+  400: (
+    min-lightness: 0.645,
+    max-lightness: 0.666,
+    consistent-chroma: 0.149,
+    lightness: 1 - 16 * $regular-levels-lightness-step,
+  ),
+  425: (
+    min-lightness: 0.623,
+    max-lightness: 0.645,
+    consistent-chroma: 0.144,
+    lightness: 1 - 17 * $regular-levels-lightness-step,
+  ),
+  450: (
+    min-lightness: 0.601,
+    max-lightness: 0.623,
+    consistent-chroma: 0.139,
+    lightness: 1 - 18 * $regular-levels-lightness-step,
+  ),
+  475: (
+    min-lightness: 0.58,
+    max-lightness: 0.601,
+    consistent-chroma: 0.134,
+    lightness: 1 - 19 * $regular-levels-lightness-step,
+  ),
+  500: (
+    min-lightness: 0.558,
+    max-lightness: 0.58,
+    consistent-chroma: 0.13,
+    lightness: 1 - 20 * $regular-levels-lightness-step,
+  ),
+  525: (
+    min-lightness: 0.537,
+    max-lightness: 0.558,
+    consistent-chroma: 0.125,
+    lightness: 1 - 21 * $regular-levels-lightness-step,
+  ),
+  550: (
+    min-lightness: 0.515,
+    max-lightness: 0.537,
+    consistent-chroma: 0.12,
+    lightness: 1 - 22 * $regular-levels-lightness-step,
+  ),
+  575: (
+    min-lightness: 0.494,
+    max-lightness: 0.515,
+    consistent-chroma: 0.115,
+    lightness: 1 - 23 * $regular-levels-lightness-step,
+  ),
+  600: (
+    min-lightness: 0.472,
+    max-lightness: 0.494,
+    consistent-chroma: 0.11,
+    lightness: 1 - 24 * $regular-levels-lightness-step,
+  ),
+  625: (
+    min-lightness: 0.451,
+    max-lightness: 0.472,
+    consistent-chroma: 0.105,
+    lightness: 1 - 25 * $regular-levels-lightness-step,
+  ),
+  650: (
+    min-lightness: 0.429,
+    max-lightness: 0.451,
+    consistent-chroma: 0.1,
+    lightness: 1 - 26 * $regular-levels-lightness-step,
+  ),
+  675: (
+    min-lightness: 0.408,
+    max-lightness: 0.429,
+    consistent-chroma: 0.096,
+    lightness: 1 - 27 * $regular-levels-lightness-step,
+  ),
+  700: (
+    min-lightness: 0.386,
+    max-lightness: 0.408,
+    consistent-chroma: 0.091,
+    lightness: 1 - 28 * $regular-levels-lightness-step,
+  ),
+  725: (
+    min-lightness: 0.365,
+    max-lightness: 0.386,
+    consistent-chroma: 0.086,
+    lightness: 1 - 29 * $regular-levels-lightness-step,
+  ),
+  750: (
+    min-lightness: 0.343,
+    max-lightness: 0.365,
+    consistent-chroma: 0.081,
+    lightness: 1 - 30 * $regular-levels-lightness-step,
+  ),
+  775: (
+    min-lightness: 0.321,
+    max-lightness: 0.343,
+    consistent-chroma: 0.076,
+    lightness: 1 - 31 * $regular-levels-lightness-step,
+  ),
+  800: (
+    min-lightness: 0.3,
+    max-lightness: 0.321,
+    consistent-chroma: 0.072,
+    lightness: 1 - 32 * $regular-levels-lightness-step,
+  ),
+  825: (
+    min-lightness: 0.278,
+    max-lightness: 0.3,
+    consistent-chroma: 0.067,
+    lightness: 1 - 33 * $regular-levels-lightness-step,
+  ),
+  850: (
+    min-lightness: 0.257,
+    max-lightness: 0.278,
+    consistent-chroma: 0.062,
+    lightness: 1 - 34 * $regular-levels-lightness-step,
+  ),
+  875: (
+    min-lightness: 0.235,
+    max-lightness: 0.257,
+    consistent-chroma: 0.058,
+    lightness: 1 - 35 * $regular-levels-lightness-step,
+  ),
+  900: (
+    min-lightness: 0.214,
+    max-lightness: 0.235,
+    consistent-chroma: 0.053,
+    lightness: 1 - 36 * $regular-levels-lightness-step,
+  ),
+  925: (
+    min-lightness: 0.189,
+    max-lightness: 0.214,
+    consistent-chroma: 0.049,
+    lightness: map.get($darkest-levels-lightness-map, 925),
+  ),
+  950: (
+    min-lightness: 0.158,
+    max-lightness: 0.189,
+    consistent-chroma: 0.044,
+    lightness: map.get($darkest-levels-lightness-map, 950),
+  ),
+  975: (
+    min-lightness: 0.07,
+    max-lightness: 0.158,
+    consistent-chroma: 0.038,
+    lightness: map.get($darkest-levels-lightness-map, 975),
+  ),
+  1000: (
+    min-lightness: 0,
+    max-lightness: 0.07,
+    consistent-chroma: 0,
+    lightness: 0,
+  ),
+);

package/scss/index.scss

@@ -0,0 +1,106 @@
+@use "./truevarcolors/scss/_config" as *;
+@use "./truevarcolors/scss/_constants" as *;
+@use "./truevarcolors/scss/_maps" as *;
+@use "./truevarcolors/scss/_functions" as *;
+@use "sass:map";
+@use "sass:list";
+
+// 1.Configuration validations
+$colors: get-valid-colors($colors);
+$levels: get-valid-levels($levels);
+$levels-step: get-valid-levels-step($levels-step, $levels);
+$consistent-chroma: get-valid-consistent-chroma($consistent-chroma);
+$gamut: get-valid-gamut($gamut);
+$prefix: get-valid-prefix($prefix);
+$root-rule: get-valid-root-rule($root-rule);
+
+// 2.Getting preset colors by the configuration
+$configured-preset-colors: get-preset-colors-by-keys($colors);
+
+// 3.Creating a list of levels
+$levels: get-levels-by-config($levels, $levels-step);
+
+// 4.Setting the max-chroma value for preset colors
+$preset-colors-with-max-chroma: get-preset-colors-chroma(
+  $configured-preset-colors,
+  $consistent-chroma,
+  $gamut
+);
+
+// 5.Generating a palette of shades of preset colors
+$preset-colors-palette: get-preset-colors-palette(
+  $preset-colors-with-max-chroma,
+  $levels,
+  $gamut,
+  $prefix
+);
+
+// 6.Filtering custom colors by valid hue
+$custom-colors: filter-colors-by-valid-hue($custom-colors);
+
+// 7.Converting string custom colors hue values matching the names of preset colors to numeric values
+$custom-colors: convert-custom-colors-string-hues-to-numbers($custom-colors);
+
+// 8.Setting the max-chroma value for custom colors
+$custom-colors: get-custom-color-chroma($custom-colors, $gamut);
+
+// 9.Adoption of max-chroma-lightness values to the range from 0 to 1
+$custom-colors: validate-custom-colors-max-chroma-lightness($custom-colors);
+
+// 10.Setting the max-chroma-lightness value for custom colors
+$custom-colors: get-custom-colors-max-chroma-lightness($custom-colors, $gamut);
+
+// 11.Getting a list of dynamic hues
+$var-hues: get-dynamic-var-hues($custom-colors, $prefix);
+
+// 12.Creating a list of dynamic hue values
+$custom-colors: get-custom-colors-variable-hue($custom-colors, $prefix);
+
+// 13.Generating a palette of shades of custom colors
+$custom-colors-palette: get-custom-colors-palette(
+  $custom-colors,
+  $levels,
+  $gamut,
+  $prefix
+);
+
+// 14.Combining a palette of shades
+@if list.length(map.keys($custom-colors-palette)) >
+  0 and
+  list.length(map.keys($preset-colors-palette)) ==
+  0
+{
+  $custom-colors-palette: map.merge($custom-colors-palette, $base-palette);
+} @else if list.length(map.keys($preset-colors-palette)) > 0 {
+  $preset-colors-palette: map.merge($base-palette, $preset-colors-palette);
+}
+$custom-hues-count: list.length(map.keys($var-hues));
+$custom-shades-count: list.length(map.keys($custom-colors-palette));
+$preset-shades-count: list.length(map.keys($preset-colors-palette));
+$palette: map.merge($custom-colors-palette, $preset-colors-palette);
+
+// 15.Creating a root rule with custom property values
+@if $root-rule {
+  :root {
+    @each $var-name, $default-hue in $var-hues {
+      @if $prefix {
+        $var-name: #{$prefix}-#{$var-name};
+      }
+      --#{$var-name}: #{$default-hue};
+    }
+    @each $color-name, $color-value in $palette {
+      @if $prefix {
+        $color-name: #{$prefix}-#{$color-name};
+      }
+      --#{$color-name}: #{$color-value};
+    }
+  }
+}
+
+// 16.Report on completed work
+@debug get-report(
+  $custom-hues-count,
+  $custom-shades-count,
+  $preset-shades-count,
+  $root-rule
+);