Ark/bulma
1
0
Fork 0
mirror of https://github.com/jgthms/bulma synced 2026-03-15 02:04:29 -07:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'jgthms:main' into main

Browse Source
This commit is contained in:
Gabor Kormany
2025-03-21 11:19:07 +01:00
committed by GitHub
parent 646d520b62 7f4c17bb55
commit 22557ffc84
127 changed files with 30385 additions and 22494 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -50,16 +50,35 @@ $variables-host: iv.$variables-host;
@mixin register-rgb($name, $value) {
@include register-var(
$name,
(red($value), green($value), blue($value)),
(
color.channel($value, "red", $space: rgb),
color.channel($value, "green", $space: rgb),
color.channel($value, "blue", $space: rgb)
),
"",
"-rgb"
);
}
@mixin register-hsl($name, $value) {
@include register-var($name, round(hue($value)), "", "-h");
@include register-var($name, round(saturation($value)), "", "-s");
@include register-var($name, round(lightness($value)), "", "-l");
@include register-var(
$name,
math.round(color.channel($value, "hue", $space: hsl)),
"",
"-h"
);
@include register-var(
$name,
math.round(color.channel($value, "saturation", $space: hsl)),
"",
"-s"
);
@include register-var(
$name,
math.round(color.channel($value, "lightness", $space: hsl)),
"",
"-l"
);
}
@mixin generate-on-scheme-colors($name, $base, $scheme-main) {
@@ -78,7 +97,11 @@ $variables-host: iv.$variables-host;
@if $ratio > 5 {
$found-decent-color: true;
} @else {
$on-scheme-color: lighten($on-scheme-color, 5%);
$on-scheme-color: color.adjust(
$on-scheme-color,
$lightness: 5%,
$space: hsl
);
$fg-lum: fn.bulmaColorLuminance($on-scheme-color);
}
}
@@ -89,13 +112,21 @@ $variables-host: iv.$variables-host;
@if $ratio > 5 {
$found-decent-color: true;
} @else {
$on-scheme-color: darken($on-scheme-color, 5%);
$on-scheme-color: color.adjust(
$on-scheme-color,
$lightness: -5%,
$space: hsl
);
$fg-lum: fn.bulmaColorLuminance($on-scheme-color);
}
}
}
$on-scheme-lightness: lightness($on-scheme-color);
$on-scheme-lightness: color.channel(
$on-scheme-color,
"lightness",
$space: hsl
);
@include register-var($name, $on-scheme-lightness, "", "-on-scheme-l");
$on-scheme-l: getVar($name, "", "-on-scheme-l");
@include register-var(
@@ -112,16 +143,28 @@ $variables-host: iv.$variables-host;
@if ($scheme-main-brightness == "bright") {
@while (fn.bulmaEnoughContrast($on-scheme-color, #fff) == false) {
// We're on a light background, so we'll darken the test color step by step.
$on-scheme-color: darken($on-scheme-color, 5%);
$on-scheme-color: color.adjust(
$on-scheme-color,
$lightness: -5%,
$space: hsl
);
}
} @else {
@while (fn.bulmaEnoughContrast($on-scheme-color, #000) == false) {
// We're on a dark background, so we'll lighten the test color step by step.
$on-scheme-color: lighten($on-scheme-color, 5%);
$on-scheme-color: color.adjust(
$on-scheme-color,
$lightness: 5%,
$space: hsl
);
}
}
$on-scheme-lightness: lightness($on-scheme-color);
$on-scheme-lightness: color.channel(
$on-scheme-color,
"lightness",
$space: hsl
);
@include register-var($name, $on-scheme-lightness, "", "-on-scheme-l");
}
@@ -137,7 +180,12 @@ $variables-host: iv.$variables-host;
@include register-base-color($name, $base);
@if $invert {
@include register-var($name, lightness($invert), "", "-invert-l");
@include register-var(
$name,
color.channel($invert, "lightness", $space: hsl),
"",
"-invert-l"
);
@include register-var("#{$name}-invert", $invert);
}
}
@@ -150,11 +198,11 @@ $variables-host: iv.$variables-host;
$light: null,
$dark: null
) {
$h: round(hue($base)); // Hue
$s: round(saturation($base)); // Saturation
$l: round(lightness($base)); // Lightness
$h:math.round(color.channel($base, "hue", $space: hsl)); // Hue
$s:math.round(color.channel($base, "saturation", $space: hsl)); // Saturation
$l:math.round(color.channel($base, "lightness", $space: hsl)); // Lightness
$base-lum: fn.bulmaColorLuminance($base);
$l-base: round($l % 10); // Get lightness second digit: 53% -> 3%
$l-base: math.round($l % 10); // Get lightness second digit: 53% -> 3%
$l-0: 0%; // 5% or less
$l-5: 5%; // More than 5%
$a: 1; // Alpha
@@ -162,7 +210,7 @@ $variables-host: iv.$variables-host;
// Calculate digits like "40" for the scheme-main
$scheme-l-0: 0%;
$scheme-l-base: round($scheme-main-l % 10);
$scheme-l-base: math.round($scheme-main-l % 10);
$closest-5: math.round(math.div($scheme-main-l, 5)) * 5;
$pct-to-int: math.div($closest-5, 100%) * 100;
$scheme-main-digits: #{$pct-to-int};
@@ -256,7 +304,10 @@ $variables-host: iv.$variables-host;
// Source: https://www.w3.org/TR/WCAG20-TECHS/G17.html
$fg-lum: fn.bulmaColorLuminance($foreground);
@if (lightness($foreground) > lightness($background)) {
@if (
color.channel($foreground, "lightness", $space: hsl) >
color.channel($background, "lightness", $space: hsl)
) {
$is-light-fg: true;
$ratio: math.div(($fg-lum + 0.05), ($bg-lum + 0.05));
} @else {
@@ -325,7 +376,12 @@ $variables-host: iv.$variables-host;
// If an invert color is provided by the user
@if $invert {
@include register-var($name, lightness($invert), "", "-invert-l");
@include register-var(
$name,
color.channel($invert, "lightness", $space: hsl),
"",
"-invert-l"
);
@include register-var("#{$name}-invert", $invert);
} @else {
$base-invert-l-digits: map.get($combos, $base-digits);
@@ -345,13 +401,33 @@ $variables-host: iv.$variables-host;
// Good color on light background (90% lightness)
@if $light and $dark {
@include register-var($name, lightness($light), "", "-light-l");
@include register-var($name, lightness($light), "", "-dark-invert-l");
@include register-var(
$name,
color.channel($light, "lightness", $space: hsl),
"",
"-light-l"
);
@include register-var(
$name,
color.channel($light, "lightness", $space: hsl),
"",
"-dark-invert-l"
);
@include register-var("#{$name}-light", $light);
@include register-var("#{$name}-dark-invert", $light);
@include register-var($name, lightness($dark), "", "-dark-l");
@include register-var($name, lightness($dark), "", "-light-invert-l");
@include register-var(
$name,
color.channel($dark, "lightness", $space: hsl),
"",
"-dark-l"
);
@include register-var(
$name,
color.channel($dark, "lightness", $space: hsl),
"",
"-light-invert-l"
);
@include register-var("#{$name}-dark", $dark);
@include register-var("#{$name}-light-invert", $dark);
} @else {