library-mirrors/bulma
1
0
Fork 0
mirror of https://github.com/jgthms/bulma.git synced 2024-11-14 11:14:24 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Update light and dark
Some checks failed
End-to-end tests / cypress-run (push) Has been cancelled
Details

Browse Source
This commit is contained in:
Jeremy Thomas 2024-10-18 13:45:12 +01:00
parent 0db6ff07df
commit 41e046cab3
5 changed files with 44 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
sass/components/navbar.scss
View File

@ -14,7 +14,6 @@ $navbar-z: 30 !default;
$navbar-fixed-z: 30 !default; $navbar-fixed-z: 30 !default;
$navbar-item-background-color: cv.getVar("scheme-main") !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-color: cv.getVar("text") !default;
$navbar-item-hover-background-color: hsl( $navbar-item-hover-background-color: hsl(
from #{cv.getVar("navbar-item-background-color")} h s calc(l + #{cv.getVar( 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-radius: cv.getVar("radius-large") !default;
$navbar-dropdown-z: 20 !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-background-color: cv.getVar("scheme-main") !default;
$navbar-dropdown-item-color: cv.getVar("text") !default; $navbar-dropdown-item-color: cv.getVar("text") !default;
$navbar-dropdown-item-hover-background-color: hsl( $navbar-dropdown-item-hover-background-color: hsl(
@ -91,6 +91,7 @@ $navbar-dropdown-boxed-shadow:
0.1 0.1
) !default; ) !default;
$navbar-divider-background-l: cv.getVar("background-l") !default;
$navbar-divider-background-color: cv.getVar("background") !default; $navbar-divider-background-color: cv.getVar("background") !default;
$navbar-divider-height: 0.125em !default; $navbar-divider-height: 0.125em !default;
@ -126,7 +127,6 @@ $navbar-colors: dv.$colors !default;
"navbar-z": #{$navbar-z}, "navbar-z": #{$navbar-z},
"navbar-fixed-z": #{$navbar-fixed-z}, "navbar-fixed-z": #{$navbar-fixed-z},
"navbar-item-background-color": #{$navbar-item-background-color}, "navbar-item-background-color": #{$navbar-item-background-color},
"navbar-item-background-a": #{$navbar-item-background-a},
"navbar-item-color": #{$navbar-item-color}, "navbar-item-color": #{$navbar-item-color},
"navbar-item-hover-background-color": #{$navbar-item-hover-background-color}, "navbar-item-hover-background-color": #{$navbar-item-hover-background-color},
"navbar-item-hover-color": #{$navbar-item-hover-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-arrow": #{$navbar-dropdown-arrow},
"navbar-dropdown-radius": #{$navbar-dropdown-radius}, "navbar-dropdown-radius": #{$navbar-dropdown-radius},
"navbar-dropdown-z": #{$navbar-dropdown-z}, "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-background-color": #{$navbar-dropdown-item-background-color},
"navbar-dropdown-item-color": #{$navbar-dropdown-item-color}, "navbar-dropdown-item-color": #{$navbar-dropdown-item-color},
"navbar-dropdown-item-hover-background-color": #{$navbar-dropdown-item-hover-background-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-item-active-background-color": #{$navbar-dropdown-item-active-background-color},
"navbar-dropdown-boxed-radius": #{$navbar-dropdown-boxed-radius}, "navbar-dropdown-boxed-radius": #{$navbar-dropdown-boxed-radius},
"navbar-dropdown-boxed-shadow": #{$navbar-dropdown-boxed-shadow}, "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-background-color": #{$navbar-divider-background-color},
"navbar-divider-height": #{$navbar-divider-height}, "navbar-divider-height": #{$navbar-divider-height},
"navbar-bottom-box-shadow-size": #{$navbar-bottom-box-shadow-size}, "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-hover-color": #{cv.getVar($name, "", "-invert")},
"navbar-item-active-color": #{cv.getVar($name, "", "-invert")}, "navbar-item-active-color": #{cv.getVar($name, "", "-invert")},
"navbar-item-selected-background-color": #{cv.getVar($name)}, "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-arrow": #{cv.getVar($name, "", "-invert")},
"navbar-dropdown-border-color": #{cv.getVar($name, "", "-on-scheme")},
"navbar-dropdown-item-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 { .#{iv.$class-prefix}navbar-item {
&:not(.is-active, .is-selected) { &:not(.is-active, .is-selected) {
background-color: hsl( background-color: hsl(
from cv.getVar("navbar-dropdown-item-background-color") from cv.getVar($name)
cv.getVar($name, "", "-h") h
cv.getVar($name, "", "-s") s
l cv.getVar("navbar-dropdown-item-background-l")
); );
&:hover { &:hover {
background-color: hsl( background-color: hsl(
from cv.getVar("navbar-dropdown-item-hover-background-color") from cv.getVar($name)
cv.getVar($name, "", "-h") h
cv.getVar($name, "", "-s") s
l calc(
#{cv.getVar("navbar-dropdown-item-background-l")} +
#{cv.getVar("hover-background-l-delta")}
)
); );
} }
&:active { &:active {
background-color: hsl( background-color: hsl(
from cv.getVar("navbar-dropdown-item-active-background-color") from cv.getVar($name)
cv.getVar($name, "", "-h") h
cv.getVar($name, "", "-s") s
l 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")
);
}
} }
} }

12
sass/themes/dark.scss
View File

@ -6,13 +6,13 @@
@use "setup"; @use "setup";
// The main lightness of this theme // The main lightness of this theme
$scheme-main-l: 9%; $scheme-main-l: 9;
$background-l: 14%; $background-l: 14;
$text-l: 71%; $text-l: 71%;
// The main scheme color, used to make calculations // 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%);
$background: hsl(iv.$scheme-h, iv.$scheme-s, $background-l); $background: hsl(iv.$scheme-h, iv.$scheme-s, $background-l * 1%);
$text: hsl(iv.$scheme-h, iv.$scheme-s, $text-l); $text: hsl(iv.$scheme-h, iv.$scheme-s, $text-l);
@mixin dark-theme { @mixin dark-theme {
@ -30,8 +30,8 @@ $text: hsl(iv.$scheme-h, iv.$scheme-s, $text-l);
( (
"scheme-brightness": "dark", "scheme-brightness": "dark",
"scheme-main-l": $scheme-main-l, "scheme-main-l": $scheme-main-l,
"scheme-main-bis-l": $scheme-main-l + 2%, "scheme-main-bis-l": $scheme-main-l + 2,
"scheme-main-ter-l": $scheme-main-l + 4%, "scheme-main-ter-l": $scheme-main-l + 4,
"soft-l": iv.$dark-l, "soft-l": iv.$dark-l,
"bold-l": iv.$light-l, "bold-l": iv.$light-l,
"soft-invert-l": iv.$light-l, "soft-invert-l": iv.$light-l,

6
sass/themes/light.scss
View File

@ -7,10 +7,10 @@
@use "setup"; @use "setup";
// The main lightness of this theme // The main lightness of this theme
$scheme-main-l: 100%; $scheme-main-l: 100;
// The main scheme color, used to make calculations // 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 { @mixin light-theme {
@include cv.register-vars( @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-l": $scheme-main-l,
"scheme-main-bis-l": 98%, "scheme-main-bis-l": 98%,
"scheme-main-ter-l": 96%, "scheme-main-ter-l": 96%,
"background-l": 96%, "background-l": 96,
"border-weak-l": 93%, "border-weak-l": 93%,
"border-l": 86%, "border-l": 86%,
"text-weak-l": 48%, "text-weak-l": 48%,

2
sass/themes/setup.scss
View File

@ -8,7 +8,7 @@
hsl( hsl(
#{cv.getVar("scheme-h")}, #{cv.getVar("scheme-h")},
#{cv.getVar("scheme-s")}, #{cv.getVar("scheme-s")},
#{cv.getVar("scheme-main-l")} calc(#{cv.getVar("scheme-main-l")} * 1%)
), ),
"scheme-main-bis": "scheme-main-bis":
hsl( hsl(

7
sass/utilities/css-variables.scss
View File

@ -142,7 +142,7 @@
@mixin generate-color-palette( @mixin generate-color-palette(
$name, $name,
$base, $base,
$scheme-main-l: 100%, $scheme-main-l: 100,
$invert: null, $invert: null,
$light: null, $light: null,
$dark: null $dark: null
@ -159,8 +159,9 @@
// Calculate digits like "40" for the scheme-main // Calculate digits like "40" for the scheme-main
$scheme-l-0: 0%; $scheme-l-0: 0%;
$scheme-l-base: round($scheme-main-l % 10); $scheme-l-base: round(($scheme-main-l * 1%) % 10);
$closest-5: math.round(math.div($scheme-main-l, 5)) * 5; @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; $pct-to-int: math.div($closest-5, 100%) * 100;
$scheme-main-digits: #{$pct-to-int}; $scheme-main-digits: #{$pct-to-int};