Update light and dark

jgthms · Oct 18, 2024 · 41e046c · 41e046c
1 parent 0db6ff0
commit 41e046c
Show file tree

Hide file tree

Showing 5 changed files with 44 additions and 27 deletions.
diff --git a/sass/components/navbar.scss b/sass/components/navbar.scss
@@ -14,7 +14,6 @@ $navbar-z: 30 !default;
 $navbar-fixed-z: 30 !default;
 
 $navbar-item-background-color: cv.getVar("scheme-main") !default;
-$navbar-item-background-a: 0 !default;
 $navbar-item-color: cv.getVar("text") !default;
 $navbar-item-hover-background-color: hsl(
   from #{cv.getVar("navbar-item-background-color")} h s calc(l + #{cv.getVar(
@@ -61,6 +60,7 @@ $navbar-dropdown-arrow: cv.getVar("link") !default;
 $navbar-dropdown-radius: cv.getVar("radius-large") !default;
 $navbar-dropdown-z: 20 !default;
 
+$navbar-dropdown-item-background-l: cv.getVar("scheme-main-l") !default;
 $navbar-dropdown-item-background-color: cv.getVar("scheme-main") !default;
 $navbar-dropdown-item-color: cv.getVar("text") !default;
 $navbar-dropdown-item-hover-background-color: hsl(
@@ -91,6 +91,7 @@ $navbar-dropdown-boxed-shadow:
       0.1
     ) !default;
 
+$navbar-divider-background-l: cv.getVar("background-l") !default;
 $navbar-divider-background-color: cv.getVar("background") !default;
 $navbar-divider-height: 0.125em !default;
 
@@ -126,7 +127,6 @@ $navbar-colors: dv.$colors !default;
       "navbar-z": #{$navbar-z},
       "navbar-fixed-z": #{$navbar-fixed-z},
       "navbar-item-background-color": #{$navbar-item-background-color},
-      "navbar-item-background-a": #{$navbar-item-background-a},
       "navbar-item-color": #{$navbar-item-color},
       "navbar-item-hover-background-color": #{$navbar-item-hover-background-color},
       "navbar-item-hover-color": #{$navbar-item-hover-color},
@@ -153,12 +153,14 @@ $navbar-colors: dv.$colors !default;
       "navbar-dropdown-arrow": #{$navbar-dropdown-arrow},
       "navbar-dropdown-radius": #{$navbar-dropdown-radius},
       "navbar-dropdown-z": #{$navbar-dropdown-z},
+      "navbar-dropdown-item-background-l": #{$navbar-dropdown-item-background-l},
       "navbar-dropdown-item-background-color": #{$navbar-dropdown-item-background-color},
       "navbar-dropdown-item-color": #{$navbar-dropdown-item-color},
       "navbar-dropdown-item-hover-background-color": #{$navbar-dropdown-item-hover-background-color},
       "navbar-dropdown-item-active-background-color": #{$navbar-dropdown-item-active-background-color},
       "navbar-dropdown-boxed-radius": #{$navbar-dropdown-boxed-radius},
       "navbar-dropdown-boxed-shadow": #{$navbar-dropdown-boxed-shadow},
+      "navbar-divider-background-l": #{$navbar-divider-background-l},
       "navbar-divider-background-color": #{$navbar-divider-background-color},
       "navbar-divider-height": #{$navbar-divider-height},
       "navbar-bottom-box-shadow-size": #{$navbar-bottom-box-shadow-size},
@@ -182,7 +184,9 @@ $navbar-colors: dv.$colors !default;
           "navbar-item-hover-color": #{cv.getVar($name, "", "-invert")},
           "navbar-item-active-color": #{cv.getVar($name, "", "-invert")},
           "navbar-item-selected-background-color": #{cv.getVar($name)},
+          "navbar-item-selected-color": #{cv.getVar($name, "", "-invert")},
           "navbar-dropdown-arrow": #{cv.getVar($name, "", "-invert")},
+          "navbar-dropdown-border-color": #{cv.getVar($name, "", "-on-scheme")},
           "navbar-dropdown-item-color": #{cv.getVar($name, "", "-on-scheme")},
         )
       );
@@ -191,32 +195,44 @@ $navbar-colors: dv.$colors !default;
         .#{iv.$class-prefix}navbar-item {
           &:not(.is-active, .is-selected) {
             background-color: hsl(
-              from cv.getVar("navbar-dropdown-item-background-color")
-                cv.getVar($name, "", "-h")
-                cv.getVar($name, "", "-s")
-                l
+              from cv.getVar($name)
+                h
+                s
+                cv.getVar("navbar-dropdown-item-background-l")
             );
 
             &:hover {
               background-color: hsl(
-                from cv.getVar("navbar-dropdown-item-hover-background-color")
-                  cv.getVar($name, "", "-h")
-                  cv.getVar($name, "", "-s")
-                  l
+                from cv.getVar($name)
+                  h
+                  s
+                  calc(
+                    #{cv.getVar("navbar-dropdown-item-background-l")} +
+                      #{cv.getVar("hover-background-l-delta")}
+                  )
               );
             }
 
             &:active {
               background-color: hsl(
-                from cv.getVar("navbar-dropdown-item-active-background-color")
-                  cv.getVar($name, "", "-h")
-                  cv.getVar($name, "", "-s")
-                  l
+                from cv.getVar($name)
+                  h
+                  s
+                  calc(
+                    cv.getVar("navbar-dropdown-item-background-l") +
+                      cv.getVar("active-background-l-delta")
+                  )
               );
             }
           }
         }
       }
+
+      .#{iv.$class-prefix}navbar-divider {
+        background-color: hsl(
+          from cv.getVar($name) h s cv.getVar("navbar-divider-background-l")
+        );
+      }
     }
   }
 

diff --git a/sass/themes/dark.scss b/sass/themes/dark.scss
@@ -6,13 +6,13 @@
 @use "setup";
 
 // The main lightness of this theme
-$scheme-main-l: 9%;
-$background-l: 14%;
+$scheme-main-l: 9;
+$background-l: 14;
 $text-l: 71%;
 
 // The main scheme color, used to make calculations
-$scheme-main: hsl(iv.$scheme-h, iv.$scheme-s, $scheme-main-l);
-$background: hsl(iv.$scheme-h, iv.$scheme-s, $background-l);
+$scheme-main: hsl(iv.$scheme-h, iv.$scheme-s, $scheme-main-l * 1%);
+$background: hsl(iv.$scheme-h, iv.$scheme-s, $background-l * 1%);
 $text: hsl(iv.$scheme-h, iv.$scheme-s, $text-l);
 
 @mixin dark-theme {
@@ -30,8 +30,8 @@ $text: hsl(iv.$scheme-h, iv.$scheme-s, $text-l);
     (
       "scheme-brightness": "dark",
       "scheme-main-l": $scheme-main-l,
-      "scheme-main-bis-l": $scheme-main-l + 2%,
-      "scheme-main-ter-l": $scheme-main-l + 4%,
+      "scheme-main-bis-l": $scheme-main-l + 2,
+      "scheme-main-ter-l": $scheme-main-l + 4,
       "soft-l": iv.$dark-l,
       "bold-l": iv.$light-l,
       "soft-invert-l": iv.$light-l,

diff --git a/sass/themes/light.scss b/sass/themes/light.scss
@@ -7,10 +7,10 @@
 @use "setup";
 
 // The main lightness of this theme
-$scheme-main-l: 100%;
+$scheme-main-l: 100;
 
 // The main scheme color, used to make calculations
-$scheme-main: hsl(iv.$scheme-h, iv.$scheme-s, $scheme-main-l);
+$scheme-main: hsl(iv.$scheme-h, iv.$scheme-s, $scheme-main-l * 1%);
 
 @mixin light-theme {
   @include cv.register-vars(
@@ -48,7 +48,7 @@ $scheme-main: hsl(iv.$scheme-h, iv.$scheme-s, $scheme-main-l);
       "scheme-main-l": $scheme-main-l,
       "scheme-main-bis-l": 98%,
       "scheme-main-ter-l": 96%,
-      "background-l": 96%,
+      "background-l": 96,
       "border-weak-l": 93%,
       "border-l": 86%,
       "text-weak-l": 48%,

diff --git a/sass/themes/setup.scss b/sass/themes/setup.scss
@@ -8,7 +8,7 @@
         hsl(
           #{cv.getVar("scheme-h")},
           #{cv.getVar("scheme-s")},
-          #{cv.getVar("scheme-main-l")}
+          calc(#{cv.getVar("scheme-main-l")} * 1%)
         ),
       "scheme-main-bis":
         hsl(

diff --git a/sass/utilities/css-variables.scss b/sass/utilities/css-variables.scss
@@ -142,7 +142,7 @@
 @mixin generate-color-palette(
   $name,
   $base,
-  $scheme-main-l: 100%,
+  $scheme-main-l: 100,
   $invert: null,
   $light: null,
   $dark: null
@@ -159,8 +159,9 @@
 
   // Calculate digits like "40" for the scheme-main
   $scheme-l-0: 0%;
-  $scheme-l-base: round($scheme-main-l % 10);
-  $closest-5: math.round(math.div($scheme-main-l, 5)) * 5;
+  $scheme-l-base: round(($scheme-main-l * 1%) % 10);
+  @debug $scheme-l-base;
+  $closest-5: math.round(math.div(($scheme-main-l * 1%), 5)) * 5;
   $pct-to-int: math.div($closest-5, 100%) * 100;
   $scheme-main-digits: #{$pct-to-int};