Setup base "from" colors

jgthms · Sep 18, 2024 · 04d8632 · 04d8632
1 parent 15ff0be
commit 04d8632
Show file tree

Hide file tree

Showing 5 changed files with 83 additions and 108 deletions.
diff --git a/sass/components/dropdown.scss b/sass/components/dropdown.scss
@@ -13,21 +13,30 @@ $dropdown-content-radius: cv.getVar("radius") !default;
 $dropdown-content-shadow: cv.getVar("shadow") !default;
 $dropdown-content-z: 20 !default;
 
-$dropdown-item-h: cv.getVar("scheme-h");
-$dropdown-item-s: cv.getVar("scheme-s");
-$dropdown-item-l: cv.getVar("scheme-main-l");
-$dropdown-item-background-l: cv.getVar("scheme-main-l");
-$dropdown-item-background-l-delta: 0%;
-$dropdown-item-hover-background-l-delta: cv.getVar("hover-background-l-delta");
-$dropdown-item-active-background-l-delta: cv.getVar(
-  "active-background-l-delta"
-);
-$dropdown-item-color-l: cv.getVar("text-strong-l");
-$dropdown-item-selected-h: cv.getVar("link-h");
-$dropdown-item-selected-s: cv.getVar("link-s");
-$dropdown-item-selected-l: cv.getVar("link-l");
-$dropdown-item-selected-background-l: cv.getVar("link-l");
-$dropdown-item-selected-color-l: cv.getVar("link-invert-l");
+$dropdown-item-background-color: cv.getVar("scheme-main") !default;
+$dropdown-item-color: cv.getVar("text-strong") !default;
+$dropdown-item-hover-background-color: hsl(
+  from #{cv.getVar("dropdown-item-background-color")} h s calc(l + #{cv.getVar(
+          "hover-background-l-delta"
+        )})
+) !default;
+$dropdown-item-active-background-color: hsl(
+  from #{cv.getVar("dropdown-item-background-color")} h s calc(l + #{cv.getVar(
+          "active-background-l-delta"
+        )})
+) !default;
+$dropdown-item-selected-background-color: cv.getVar("link") !default;
+$dropdown-item-selected-color: cv.getVar("link-invert") !default;
+$dropdown-item-selected-hover-background-color: hsl(
+  from #{cv.getVar("dropdown-item-selected-background-color")} h s calc(l + #{cv.getVar(
+          "hover-background-l-delta"
+        )})
+) !default;
+$dropdown-item-selected-active-background-color: hsl(
+  from #{cv.getVar("dropdown-item-selected-background-color")} h s calc(l + #{cv.getVar(
+          "active-background-l-delta"
+        )})
+) !default;
 
 $dropdown-divider-background-color: cv.getVar("border-weak") !default;
 
@@ -43,19 +52,6 @@ $dropdown-divider-background-color: cv.getVar("border-weak") !default;
       "dropdown-content-radius": #{$dropdown-content-radius},
       "dropdown-content-shadow": #{$dropdown-content-shadow},
       "dropdown-content-z": #{$dropdown-content-z},
-      "dropdown-item-h": #{$dropdown-item-h},
-      "dropdown-item-s": #{$dropdown-item-s},
-      "dropdown-item-l": #{$dropdown-item-l},
-      "dropdown-item-background-l": #{$dropdown-item-background-l},
-      "dropdown-item-background-l-delta": #{$dropdown-item-background-l-delta},
-      "dropdown-item-hover-background-l-delta": #{$dropdown-item-hover-background-l-delta},
-      "dropdown-item-active-background-l-delta": #{$dropdown-item-active-background-l-delta},
-      "dropdown-item-color-l": #{$dropdown-item-color-l},
-      "dropdown-item-selected-h": #{$dropdown-item-selected-h},
-      "dropdown-item-selected-s": #{$dropdown-item-selected-s},
-      "dropdown-item-selected-l": #{$dropdown-item-selected-l},
-      "dropdown-item-selected-background-l": #{$dropdown-item-selected-background-l},
-      "dropdown-item-selected-color-l": #{$dropdown-item-selected-color-l},
       "dropdown-divider-background-color": #{$dropdown-divider-background-color},
     )
   );
@@ -110,11 +106,12 @@ $dropdown-divider-background-color: cv.getVar("border-weak") !default;
 }
 
 .#{iv.$class-prefix}dropdown-item {
-  color: hsl(
-    #{cv.getVar("dropdown-item-h")},
-    #{cv.getVar("dropdown-item-s")},
-    #{cv.getVar("dropdown-item-color-l")}
+  @include cv.register-vars(
+    (
+      "dropdown-item-color": #{$dropdown-item-color},
+    )
   );
+  color: cv.getVar("dropdown-item-color");
   display: block;
   font-size: 0.875rem;
   line-height: 1.5;
@@ -123,59 +120,47 @@ $dropdown-divider-background-color: cv.getVar("border-weak") !default;
 
 a.#{iv.$class-prefix}dropdown-item,
 button.#{iv.$class-prefix}dropdown-item {
-  background-color: hsl(
-    #{cv.getVar("dropdown-item-h")},
-    #{cv.getVar("dropdown-item-s")},
-    calc(
-      #{cv.getVar("dropdown-item-background-l")} + #{cv.getVar(
-          "dropdown-item-background-l-delta"
-        )}
+  @include cv.register-vars(
+    (
+      "dropdown-item-background-color": #{$dropdown-item-background-color},
+      "dropdown-item-hover-background-color": #{$dropdown-item-hover-background-color},
+      "dropdown-item-active-background-color": #{$dropdown-item-active-background-color},
+      "dropdown-item-selected-background-color": #{$dropdown-item-selected-background-color},
+      "dropdown-item-selected-color": #{$dropdown-item-selected-color},
+      "dropdown-item-selected-hover-background-color": #{$dropdown-item-selected-hover-background-color},
+      "dropdown-item-selected-active-background-color": #{$dropdown-item-selected-active-background-color},
     )
   );
+  background-color: cv.getVar("dropdown-item-background-color");
   padding-inline-end: 3rem;
   text-align: inherit;
   white-space: nowrap;
   width: 100%;
 
   &:hover {
-    @include cv.register-vars(
-      (
-        "dropdown-item-background-l-delta": #{cv.getVar(
-            "dropdown-item-hover-background-l-delta"
-          )},
-        "dropdown-item-border-l-delta": #{cv.getVar(
-            "dropdown-item-hover-border-l-delta"
-          )},
-      )
-    );
+    background-color: cv.getVar("dropdown-item-hover-background-color");
   }
 
   &:active {
-    @include cv.register-vars(
-      (
-        "dropdown-item-background-l-delta": #{cv.getVar(
-            "dropdown-item-active-background-l-delta"
-          )},
-        "dropdown-item-border-l-delta": #{cv.getVar(
-            "dropdown-item-active-border-l-delta"
-          )},
-      )
-    );
+    background-color: cv.getVar("dropdown-item-active-background-color");
   }
 
   &.#{iv.$class-prefix}is-active,
   &.#{iv.$class-prefix}is-selected {
-    @include cv.register-vars(
-      (
-        "dropdown-item-h": #{cv.getVar("dropdown-item-selected-h")},
-        "dropdown-item-s": #{cv.getVar("dropdown-item-selected-s")},
-        "dropdown-item-l": #{cv.getVar("dropdown-item-selected-l")},
-        "dropdown-item-background-l": #{cv.getVar(
-            "dropdown-item-selected-background-l"
-          )},
-        "dropdown-item-color-l": #{cv.getVar("dropdown-item-selected-color-l")},
-      )
-    );
+    background-color: cv.getVar("dropdown-item-selected-background-color");
+    color: cv.getVar("dropdown-item-selected-color");
+
+    &:hover {
+      background-color: cv.getVar(
+        "dropdown-item-selected-hover-background-color"
+      );
+    }
+
+    &:active {
+      background-color: cv.getVar(
+        "dropdown-item-selected-active-background-color"
+      );
+    }
   }
 }
 

diff --git a/sass/elements/tag.scss b/sass/elements/tag.scss
@@ -4,13 +4,10 @@
 @use "../utilities/extends";
 @use "../utilities/mixins" as mx;
 
-$tag-h: cv.getVar("scheme-h");
-$tag-s: cv.getVar("scheme-s");
-$tag-background-l: cv.getVar("background-l");
-$tag-background-l-delta: 0%;
 $tag-hover-background-l-delta: cv.getVar("hover-background-l-delta");
 $tag-active-background-l-delta: cv.getVar("active-background-l-delta");
-$tag-color-l: cv.getVar("text-l");
+$tag-color: cv.getVar("text");
+$tag-background-color: cv.getVar("background");
 $tag-radius: cv.getVar("radius") !default;
 $tag-delete-margin: 1px !default;
 
@@ -20,7 +17,7 @@ $tag-colors: dv.$colors !default;
   @extend %block;
 
   align-items: center;
-  color: hsl(cv.getVar("tag-h"), cv.getVar("tag-s"), cv.getVar("tag-color-l"));
+  color: cv.getVar("tag-color");
   display: flex;
   flex-wrap: wrap;
   gap: 0.5rem;
@@ -72,28 +69,17 @@ $tag-colors: dv.$colors !default;
 .#{iv.$class-prefix}tag {
   @include cv.register-vars(
     (
-      "tag-h": #{$tag-h},
-      "tag-s": #{$tag-s},
-      "tag-background-l": #{$tag-background-l},
-      "tag-background-l-delta": #{$tag-background-l-delta},
-      "tag-hover-background-l-delta": #{$tag-hover-background-l-delta},
-      "tag-active-background-l-delta": #{$tag-active-background-l-delta},
-      "tag-color-l": #{$tag-color-l},
+      "tag-background-color": #{$tag-background-color},
+      "tag-color": #{$tag-color},
       "tag-radius": #{$tag-radius},
       "tag-delete-margin": #{$tag-delete-margin},
     )
   );
 
   align-items: center;
-  background-color: hsl(
-    cv.getVar("tag-h"),
-    cv.getVar("tag-s"),
-    calc(
-      #{cv.getVar("tag-background-l")} + #{cv.getVar("tag-background-l-delta")}
-    )
-  );
+  background-color: cv.getVar("tag-background-color");
   border-radius: $tag-radius;
-  color: hsl(cv.getVar("tag-h"), cv.getVar("tag-s"), cv.getVar("tag-color-l"));
+  color: cv.getVar("tag-color");
   display: inline-flex;
   font-size: cv.getVar("size-small");
   height: 2em;
@@ -113,18 +99,16 @@ $tag-colors: dv.$colors !default;
     &.#{iv.$class-prefix}is-#{$name} {
       @include cv.register-vars(
         (
-          "tag-h": #{cv.getVar($name, "", "-h")},
-          "tag-s": #{cv.getVar($name, "", "-s")},
-          "tag-background-l": #{cv.getVar($name, "", "-l")},
-          "tag-color-l": #{cv.getVar($name, "", "-invert-l")},
+          "tag-background-color": cv.getVar($name),
+          "tag-color": #{cv.getVar($name, "", "-invert")},
         )
       );
 
       &.#{iv.$class-prefix}is-light {
         @include cv.register-vars(
           (
-            "tag-background-l": #{cv.getVar("light-l")},
-            "tag-color-l": #{cv.getVar($name, "", "-light-invert-l")},
+            "tag-background-color": #{cv.getVar($name, "", "-light")},
+            "tag-color": #{cv.getVar($name, "", "-light-invert")},
           )
         );
       }

diff --git a/sass/themes/dark.scss b/sass/themes/dark.scss
@@ -44,10 +44,13 @@ $text: hsl(iv.$scheme-h, iv.$scheme-s, $text-l);
       "text-strong-l": 93%,
       "text-title-l": 100%,
       "hover-background-l-delta": 5%,
+      "focus-background-l-delta": 5%,
       "active-background-l-delta": 10%,
       "hover-border-l-delta": 10%,
+      "focus-border-l-delta": 10%,
       "active-border-l-delta": 20%,
       "hover-color-l-delta": 5%,
+      "focus-color-l-delta": 5%,
       "active-color-l-delta": 10%,
     )
   );

diff --git a/sass/themes/light.scss b/sass/themes/light.scss
@@ -27,16 +27,20 @@ $scheme-main: hsl(iv.$scheme-h, iv.$scheme-s, $scheme-main-l);
       "bold-invert-l": iv.$light-l,
 
       // Deltas
-      "hover-background-l-delta": -5%,
-      "active-background-l-delta": -10%,
+      "hover-background-l-delta": -5,
+      "focus-background-l-delta": -5,
+      "active-background-l-delta": -10,
 
-      "hover-border-l-delta": -10%,
-      "active-border-l-delta": -20%,
+      "hover-border-l-delta": -10,
+      "focus-border-l-delta": -10,
+      "active-border-l-delta": -20,
 
-      "hover-color-l-delta": -5%,
-      "active-color-l-delta": -10%,
+      "hover-color-l-delta": -5,
+      "focus-color-l-delta": -5,
+      "active-color-l-delta": -10,
 
       "hover-shadow-a-delta": -0.05,
+      "focus-shadow-a-delta": -0.05,
       "active-shadow-a-delta": -0.1,
 
       // Light only

diff --git a/sass/utilities/css-variables.scss b/sass/utilities/css-variables.scss
@@ -10,12 +10,12 @@
   @return "--#{iv.$cssvars-prefix}#{$prefix}#{$name}#{$suffix}";
 }
 
-@function buildHslaString($name, $l, $a: 1) {
+@function buildHslaString($name, $l) {
   $lightness: getVar($name, "", "-l");
   @if ($l) {
     $lightness: $l;
   }
-  @return "hsla(#{getVar($name, '', '-h')}, #{getVar($name, '', '-s')}, #{$lightness}, #{$a})";
+  @return "hsl(from #{getVar($name)} h s #{$lightness})";
 }
 
 @function getVar($name, $prefix: "", $suffix: "") {
@@ -124,9 +124,8 @@
 }
 
 @mixin register-base-color($name, $base) {
-  $hsla: buildHslaString($name, getVar($name, "", "-l"));
-  @include register-var($name, $hsla);
-  @include register-var($name, $hsla, "", "-base"); // Just for reference
+  @include register-var($name, $base);
+  @include register-var($name, $base, "", "-base"); // Just for reference
   @include register-rgb($name, $base);
   @include register-hsl($name, $base);
 }