diff --git a/sass/components/navbar.scss b/sass/components/navbar.scss index 08377a61..70d6f4b0 100644 --- 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 index 86f1d8f7..73ff116b 100644 --- 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 index c99e7152..f3f9a2c5 100644 --- 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 index 6caddf71..10bbad29 100644 --- 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 index 80cef0a8..45a8b131 100644 --- 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};