mirror of
https://github.com/jgthms/bulma.git
synced 2024-11-14 11:14:24 +00:00
Setup base "from" colors
This commit is contained in:
Jeremy Thomas
parent
15ff0be367
commit
04d86325e8
@ -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"
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -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")},
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
@ -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%,
|
||||
)
|
||||
);
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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);
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user