refactor(color/functions): calculate using adjustment (from name to…

…o) all hsla values and move retrieve color to each hsla functions. Add `$shade` with `dark` and `light` by default and `$color` with retrieve arguments in each hsla functions. Add `$shade` also to `hsla-color()` function.
angular-package · Dec 13, 2023 · 69010c0 · 69010c0
1 parent 7ca383a
commit 69010c0
Show file tree

Hide file tree

Showing 5 changed files with 90 additions and 23 deletions.
diff --git a/color/functions/_color.alpha-var.function.scss b/color/functions/_color.alpha-var.function.scss
@@ -6,6 +6,7 @@
 
 // Modules.
 @use '../../var';
+@use '../name';
 
 // Functions.
 @use 'color.name.function' as *;
@@ -19,6 +20,8 @@
 // @param `$delimiter` Separator between each element in name of returned CSS variable.
 // @param `$prefix` Prefix in `$name`. By default, it uses `prefix` of `$var` sass variable.
 // @param `$suffix` Suffix in `$name`. By default, it uses `suffix` of `$var` sass variable.
+// @param `$shade` Shade of color, by default dark or light.
+// @param `$color` Retrieved color from `$name`.
 // @returns The returned value is CSS variable that indicates alpha of color.
 @function alpha-var(
   $name,
@@ -28,10 +31,12 @@
   $delimiter: null,
   $prefix: null,
   $suffix: null,
+  $shade: (dark, light),
+  $color: name.retrieve($name),
 ) {
   @return var.get(
-    name($name, alpha),
-    $adjust,
+    name(map.get($color, name), alpha, $delimiter, $shade: $shade),
+    name.adjustment-calculate(map.get($color, alpha), $adjust, 0),
     null,
     $fallback,
     $dictionary,
@@ -42,6 +47,8 @@
 }
 
 // Examples.
+// $-delimiter: '-';
+
 // @debug alpha-var(primary); // var(--s-primary-color-alpha)
 
 // delimiter in dictionary
@@ -61,3 +68,6 @@
 // adjusted + fallback + dictionary
 // @debug alpha-var(primary, 0.9, 0.5, (primary: p)); // calc(var(--s-p-color-alpha, 0.5) + 0.9)
 // @debug alpha-var(primary, 0.9, 0.5, (primary: spectre, suffix: basic)); // calc(var(--spectre-primary-color-alpha-basic, 0.5) + 0.9)
+
+// adjustment in name
+// @debug alpha-var((primary-dark, 15%, -0.2), '-' 0.9, $delimiter: $-delimiter); // calc(var(--primary-color-dark-alpha) - 0.7)
diff --git a/color/functions/_color.hsla-color.function.scss b/color/functions/_color.hsla-color.function.scss
@@ -1,16 +1,13 @@
 // Sass.
 @use 'sass:list';
+@use 'sass:map';
 
-// Functions.
-@use '../../map/map.get.function' as map;
+// Module functions.
 @use 'color.alpha-var.function' as *;
 @use 'color.hue-var.function' as *;
 @use 'color.lightness-var.function' as *;
 @use 'color.saturation-var.function' as *;
 
-// Modules.
-@use '../name';
-
 // Status: DONE
 // The function `color.hsla-color()` returns color in `hsla()` if adjusted or the CSS variable `var()` from of `$name`.
 // @param `$name` The name of `string`, `list` or `map` type for the returned `hsla()` or `var()` color.
@@ -22,7 +19,7 @@
 // @param `$delimiter` Separator between each element in name of returned CSS variable or variables.
 // @param `$prefix` Prefix in `$name`. By default, it uses `prefix` of `$var` sass variable.
 // @param `$suffix` Suffix in `$name`. By default, it uses `suffix` of `$var` sass variable.
-// @param `$color` Retrieves adjustments from `$name`.
+// @param `$shade` Shade of color, by default dark or light.
 // @returns The returned value is color in a hsla form or as `var()` CSS variable.
 @function hsla-color(
   $name,
@@ -34,17 +31,49 @@
   $delimiter: null,
   $prefix: null,
   $suffix: null,
-  $color: name.retrieve($name),
+  $shade: (dark, light),
 ) {
   @return hsla(
-    hue-var(map.get($color, name), map.get($color, hue, $hue), null, $dictionary, $delimiter, $prefix, $suffix),
-    saturation-var(map.get($color, name), map.get($color, saturation, $saturation), null, $dictionary, $delimiter, $prefix, $suffix),
+    hue-var(
+      $name,
+      $hue,
+      null,
+      $dictionary,
+      $delimiter,
+      $prefix,
+      $suffix,
+      $shade,
+    ),
+    saturation-var(
+      $name,
+      $saturation,
+      null,
+      $dictionary,
+      $delimiter,
+      $prefix,
+      $suffix,
+      $shade,
+    ),
     lightness-var(
-      map.get($color, name),
-      if(type-of($lightness) == number, map.get($color, lightness, 0%) + $lightness, map.get($color, lightness) or $lightness),
-      null, $dictionary, $delimiter, $prefix, $suffix
+      $name,
+      $lightness,
+      null,
+      $dictionary,
+      $delimiter,
+      $prefix,
+      $suffix,
+      $shade,
     ),
-    alpha-var(map.get($color, name), map.get($color, alpha, $alpha), null, $dictionary, $delimiter, $prefix, $suffix)
+    alpha-var(
+      $name,
+      $alpha,
+      null,
+      $dictionary,
+      $delimiter,
+      $prefix,
+      $suffix,
+      $shade,
+    )
   );
 }
 
@@ -72,7 +101,7 @@
 // list modifiers
 // @debug hsla-color((primary light) 20deg 15% 1% 0.5); // hsla(calc(var(--s-primary-color-light-hue) + 20deg), calc(var(--s-primary-color-light-saturation) + 15%), calc(var(--s-primary-color-light-lightness) + 1%), calc(var(--s-primary-color-light-alpha) + 0.5))
 // @debug hsla-color((primary light, 20deg, 15%, 1%, 0.5)); // hsla(calc(var(--s-primary-color-light-hue) + 20deg), calc(var(--s-primary-color-light-saturation) + 15%), calc(var(--s-primary-color-light-lightness) + 1%), calc(var(--s-primary-color-light-alpha) + 0.5))
-// @debug hsla-color((primary light) ('*' 5deg) ('/' 15%) ('*' 3%) ('*' 0.5)); // hsla(calc(var(--s-primary-color-light-hue) * 5deg), calc(var(--s-primary-color-light-saturation) / 15%), calc(var(--s-primary-color-light-lightness) * 3%), calc(var(--s-primary-color-light-alpha) * 0.5))
+// @debug hsla-color((primary light) ('/*' 5deg) ('/' 15%) ('*' 3%) ('*' 0.5)); // hsla(calc(var(--s-primary-color-light-hue) * 5deg), calc(var(--s-primary-color-light-saturation) / 15%), calc(var(--s-primary-color-light-lightness) * 3%), calc(var(--s-primary-color-light-alpha) * 0.5))
 
 // list modifiers + parameter lightness
 // @debug hsla-color((primary light) 1%, $lightness: 3%); // hsla(var(--s-primary-color-light-hue), var(--s-primary-color-light-saturation), calc(var(--s-primary-color-light-lightness) + 4%), var(--s-primary-color-light-alpha))
@@ -82,3 +111,7 @@
 
 // map modifiers
 // @debug hsla-color((primary light) (lightness: 1%, alpha: 0.95, hue: 20deg), $lightness: 3%); // hsla(calc(var(--s-primary-color-light-hue) + 20deg), var(--s-primary-color-light-saturation), calc(var(--s-primary-color-light-lightness) + 4%), calc(var(--s-primary-color-light-alpha) + 0.95))
+// @debug hsla-color((primary light) (alpha: 0.95, hue: 20deg), $hue: '*' -15deg);
+
+// other
+// @debug hsla-color((primary light, -1%), $lightness: '*' 15%);
diff --git a/color/functions/_color.hue-var.function.scss b/color/functions/_color.hue-var.function.scss
@@ -6,6 +6,7 @@
 
 // Modules.
 @use '../../var';
+@use '../name';
 
 // Functions.
 @use 'color.name.function' as *;
@@ -19,6 +20,8 @@
 // @param `$delimiter` Separator between each element in name of returned CSS variable.
 // @param `$prefix` Prefix in `$name`. By default, it uses `prefix` of `$var` sass variable.
 // @param `$suffix` Suffix in `$name`. By default, it uses `suffix` of `$var` sass variable.
+// @param `$shade` Shade of color, by default dark or light.
+// @param `$color` Retrieved color from `$name`.
 // @returns The returned value is CSS variable that indicates hue of color.
 @function hue-var(
   $name,
@@ -28,10 +31,12 @@
   $delimiter: null,
   $prefix: null,
   $suffix: null,
+  $shade: (dark, light),
+  $color: name.retrieve($name),
 ) {
   @return var.get(
-    name($name, hue),
-    $adjust,
+    name(map.get($color, name), hue, $delimiter, $shade: $shade),
+    name.adjustment-calculate(map.get($color, hue), $adjust, 0deg),
     null,
     $fallback,
     $dictionary,
@@ -64,3 +69,6 @@
 // @debug hue-var(primary, 1deg, 30deg, (hue: hue, prefix: spectre)); // calc(var(--spectre-primary-color-hue, 30deg) + 1deg)
 // @debug hue-var(primary, 1deg, 30deg, (suffix: basic)); // calc(var(--s-primary-color-hue-basic, 30deg) + 1deg)
 // @debug hue-var(primary, 1deg, 30deg, (prefix: spectre, suffix: basic)); // calc(var(--spectre-primary-color-hue-basic, 30deg) + 1deg)
+
+// adjustment in name
+// @debug hue-var((primary-dark, 15deg, 15%, 0.1), 5deg, $delimiter: '-'); // calc(var(--primary-color-dark-hue) + 20deg)
diff --git a/color/functions/_color.lightness-var.function.scss b/color/functions/_color.lightness-var.function.scss
@@ -6,6 +6,7 @@
 
 // Modules.
 @use '../../var';
+@use '../name';
 
 // Functions.
 @use 'color.name.function' as *;
@@ -19,6 +20,8 @@
 // @param `$delimiter` Separator between each element in name of returned CSS variable.
 // @param `$prefix` Prefix in `$name`. By default, it uses `prefix` of `$var` sass variable.
 // @param `$suffix` Suffix in `$name`. By default, it uses `suffix` of `$var` sass variable.
+// @param `$shade` Shade of color, by default dark or light.
+// @param `$color` Retrieved color from `$name`.
 // @returns The returned value is CSS variable that indicates lightness of color.
 @function lightness-var(
   $name,
@@ -28,16 +31,18 @@
   $delimiter: null,
   $prefix: null,
   $suffix: null,
+  $shade: (dark, light),
+  $color: name.retrieve($name),
 ) {
   @return var.get(
-    name($name, lightness),
-    $adjust,
+    name(map.get($color, name), lightness, $delimiter, $shade: $shade),
+    name.adjustment-calculate(map.get($color, lightness), $adjust, 0%),
     null,
     $fallback,
     $dictionary,
     map.get($dictionary, map.get(variables.$name-configuration, delimiter)) or $delimiter,
     $prefix,
-    $suffix
+    $suffix,
   );
 }
 
@@ -53,3 +58,6 @@
 
 // dictionary
 // @debug lightness-var(primary, 1%, 30%, (prefix: spectre, suffix: basic)); // calc(var(--spectre-primary-color-lightness-basic, 30%) + 1%)
+
+// adjustment in name
+// @debug lightness-var((primary-dark, 15%, 0.1), 5%, $delimiter: '-'); // calc(var(--primary-color-dark-lightness) + 20%)
diff --git a/color/functions/_color.saturation-var.function.scss b/color/functions/_color.saturation-var.function.scss
@@ -6,6 +6,7 @@
 
 // Modules.
 @use '../../var';
+@use '../name';
 
 // Functions.
 @use 'color.name.function' as *;
@@ -19,6 +20,8 @@
 // @param `$delimiter` Separator between each element in name of returned CSS variable.
 // @param `$prefix` Prefix in `$name`. By default, it uses `prefix` of `$var` sass variable.
 // @param `$suffix` Suffix in `$name`. By default, it uses `suffix` of `$var` sass variable.
+// @param `$shade` Shade of color, by default dark or light.
+// @param `$color` Retrieved color from `$name`.
 // @returns The returned value is CSS variable that indicates saturation of color.
 @function saturation-var(
   $name,
@@ -28,10 +31,12 @@
   $delimiter: null,
   $prefix: null,
   $suffix: null,
+  $shade: (dark, light),
+  $color: name.retrieve($name),
 ) {
   @return var.get(
-    name($name, saturation),
-    $adjust,
+    name(map.get($color, name), saturation, $delimiter, $shade: $shade),
+    name.adjustment-calculate(map.get($color, saturation), $adjust, 0%),
     null,
     $fallback,
     $dictionary,
@@ -57,3 +62,6 @@
 // @debug saturation-var(primary, 5%, 50%, (color: c, prefix: s, primary: p)); // calc(var(--s-p-c-s, 50%) + 5%)
 // @debug saturation-var(primary, 5%, 50%, (color: c, primary: p)); // calc(var(--s-p-c-s, 50%) + 5%)
 // @debug saturation-var(primary, 5%, 50%, (prefix: spectre, suffix: basic)); // calc(var(--spectre-primary-color-saturation-basic, 50%) + 5%)
+
+// adjustment in name
+// @debug saturation-var((primary-dark, 1deg, 3%, 15%, 0.1), 5%, $delimiter: '-'); // calc(var(--primary-color-dark-saturation) + 8%)