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

Setup base "from" colors

Browse Source
This commit is contained in:
Jeremy Thomas 2024-09-18 17:48:30 +01:00
parent 15ff0be367
commit 04d86325e8
5 changed files with 83 additions and 108 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

125
sass/components/dropdown.scss
View File

@ -13,21 +13,30 @@ $dropdown-content-radius: cv.getVar("radius") !default;
$dropdown-content-shadow: cv.getVar("shadow") !default; $dropdown-content-shadow: cv.getVar("shadow") !default;
$dropdown-content-z: 20 !default; $dropdown-content-z: 20 !default;
$dropdown-item-h: cv.getVar("scheme-h"); $dropdown-item-background-color: cv.getVar("scheme-main") !default;
$dropdown-item-s: cv.getVar("scheme-s"); $dropdown-item-color: cv.getVar("text-strong") !default;
$dropdown-item-l: cv.getVar("scheme-main-l"); $dropdown-item-hover-background-color: hsl(
$dropdown-item-background-l: cv.getVar("scheme-main-l"); from #{cv.getVar("dropdown-item-background-color")} h s calc(l + #{cv.getVar(
$dropdown-item-background-l-delta: 0%; "hover-background-l-delta"
$dropdown-item-hover-background-l-delta: cv.getVar("hover-background-l-delta"); )})
$dropdown-item-active-background-l-delta: cv.getVar( ) !default;
"active-background-l-delta" $dropdown-item-active-background-color: hsl(
); from #{cv.getVar("dropdown-item-background-color")} h s calc(l + #{cv.getVar(
$dropdown-item-color-l: cv.getVar("text-strong-l"); "active-background-l-delta"
$dropdown-item-selected-h: cv.getVar("link-h"); )})
$dropdown-item-selected-s: cv.getVar("link-s"); ) !default;
$dropdown-item-selected-l: cv.getVar("link-l"); $dropdown-item-selected-background-color: cv.getVar("link") !default;
$dropdown-item-selected-background-l: cv.getVar("link-l"); $dropdown-item-selected-color: cv.getVar("link-invert") !default;
$dropdown-item-selected-color-l: cv.getVar("link-invert-l"); $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; $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-radius": #{$dropdown-content-radius},
"dropdown-content-shadow": #{$dropdown-content-shadow}, "dropdown-content-shadow": #{$dropdown-content-shadow},
"dropdown-content-z": #{$dropdown-content-z}, "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}, "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 { .#{iv.$class-prefix}dropdown-item {
color: hsl( @include cv.register-vars(
#{cv.getVar("dropdown-item-h")}, (
#{cv.getVar("dropdown-item-s")}, "dropdown-item-color": #{$dropdown-item-color},
#{cv.getVar("dropdown-item-color-l")} )
); );
color: cv.getVar("dropdown-item-color");
display: block; display: block;
font-size: 0.875rem; font-size: 0.875rem;
line-height: 1.5; line-height: 1.5;
@ -123,59 +120,47 @@ $dropdown-divider-background-color: cv.getVar("border-weak") !default;
a.#{iv.$class-prefix}dropdown-item, a.#{iv.$class-prefix}dropdown-item,
button.#{iv.$class-prefix}dropdown-item { button.#{iv.$class-prefix}dropdown-item {
background-color: hsl( @include cv.register-vars(
#{cv.getVar("dropdown-item-h")}, (
#{cv.getVar("dropdown-item-s")}, "dropdown-item-background-color": #{$dropdown-item-background-color},
calc( "dropdown-item-hover-background-color": #{$dropdown-item-hover-background-color},
#{cv.getVar("dropdown-item-background-l")} + #{cv.getVar( "dropdown-item-active-background-color": #{$dropdown-item-active-background-color},
"dropdown-item-background-l-delta" "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; padding-inline-end: 3rem;
text-align: inherit; text-align: inherit;
white-space: nowrap; white-space: nowrap;
width: 100%; width: 100%;
&:hover { &:hover {
@include cv.register-vars( background-color: cv.getVar("dropdown-item-hover-background-color");
(
"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"
)},
)
);
} }
&:active { &:active {
@include cv.register-vars( background-color: cv.getVar("dropdown-item-active-background-color");
(
"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"
)},
)
);
} }
&.#{iv.$class-prefix}is-active, &.#{iv.$class-prefix}is-active,
&.#{iv.$class-prefix}is-selected { &.#{iv.$class-prefix}is-selected {
@include cv.register-vars( background-color: cv.getVar("dropdown-item-selected-background-color");
( color: cv.getVar("dropdown-item-selected-color");
"dropdown-item-h": #{cv.getVar("dropdown-item-selected-h")},
"dropdown-item-s": #{cv.getVar("dropdown-item-selected-s")}, &:hover {
"dropdown-item-l": #{cv.getVar("dropdown-item-selected-l")}, background-color: cv.getVar(
"dropdown-item-background-l": #{cv.getVar( "dropdown-item-selected-hover-background-color"
"dropdown-item-selected-background-l" );
)}, }
"dropdown-item-color-l": #{cv.getVar("dropdown-item-selected-color-l")},
) &:active {
); background-color: cv.getVar(
"dropdown-item-selected-active-background-color"
);
}
} }
} }

38
sass/elements/tag.scss
View File

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

3
sass/themes/dark.scss
View File

@ -44,10 +44,13 @@ $text: hsl(iv.$scheme-h, iv.$scheme-s, $text-l);
"text-strong-l": 93%, "text-strong-l": 93%,
"text-title-l": 100%, "text-title-l": 100%,
"hover-background-l-delta": 5%, "hover-background-l-delta": 5%,
"focus-background-l-delta": 5%,
"active-background-l-delta": 10%, "active-background-l-delta": 10%,
"hover-border-l-delta": 10%, "hover-border-l-delta": 10%,
"focus-border-l-delta": 10%,
"active-border-l-delta": 20%, "active-border-l-delta": 20%,
"hover-color-l-delta": 5%, "hover-color-l-delta": 5%,
"focus-color-l-delta": 5%,
"active-color-l-delta": 10%, "active-color-l-delta": 10%,
) )
); );

16
sass/themes/light.scss
View File

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

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

@ -10,12 +10,12 @@
@return "--#{iv.$cssvars-prefix}#{$prefix}#{$name}#{$suffix}"; @return "--#{iv.$cssvars-prefix}#{$prefix}#{$name}#{$suffix}";
} }
@function buildHslaString($name, $l, $a: 1) { @function buildHslaString($name, $l) {
$lightness: getVar($name, "", "-l"); $lightness: getVar($name, "", "-l");
@if ($l) { @if ($l) {
$lightness: $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: "") { @function getVar($name, $prefix: "", $suffix: "") {
@ -124,9 +124,8 @@
} }
@mixin register-base-color($name, $base) { @mixin register-base-color($name, $base) {
$hsla: buildHslaString($name, getVar($name, "", "-l")); @include register-var($name, $base);
@include register-var($name, $hsla); @include register-var($name, $base, "", "-base"); // Just for reference
@include register-var($name, $hsla, "", "-base"); // Just for reference
@include register-rgb($name, $base); @include register-rgb($name, $base);
@include register-hsl($name, $base); @include register-hsl($name, $base);
} }