mirror of
https://github.com/jgthms/bulma.git
synced 2024-11-14 11:14:24 +00:00
147 lines
3.8 KiB
SCSS
147 lines
3.8 KiB
SCSS
@use "sass:list";
|
|
|
|
@use "../utilities/css-variables" as cv;
|
|
@use "../utilities/derived-variables" as dv;
|
|
@use "../utilities/initial-variables" as iv;
|
|
@use "../utilities/functions" as fn;
|
|
@use "setup";
|
|
|
|
// The main lightness of this theme
|
|
$scheme-main-l: 100%;
|
|
|
|
// The main scheme color, used to make calculations
|
|
$scheme-main: hsl(iv.$scheme-h, iv.$scheme-s, $scheme-main-l);
|
|
|
|
@mixin light-theme {
|
|
@include cv.register-vars(
|
|
(
|
|
"scheme-h": iv.$scheme-h,
|
|
"scheme-s": iv.$scheme-s,
|
|
"light-l": iv.$light-l,
|
|
"light-invert-l": iv.$dark-l,
|
|
"dark-l": iv.$dark-l,
|
|
"dark-invert-l": iv.$light-l,
|
|
"soft-l": iv.$light-l,
|
|
"bold-l": iv.$dark-l,
|
|
"soft-invert-l": iv.$dark-l,
|
|
"bold-invert-l": iv.$light-l,
|
|
|
|
// Deltas
|
|
"hover-background-l-delta": -5%,
|
|
"active-background-l-delta": -10%,
|
|
|
|
"hover-border-l-delta": -10%,
|
|
"active-border-l-delta": -20%,
|
|
|
|
"hover-color-l-delta": -5%,
|
|
"active-color-l-delta": -10%,
|
|
|
|
"hover-shadow-a-delta": -0.05,
|
|
"active-shadow-a-delta": -0.1,
|
|
|
|
// Light only
|
|
"scheme-brightness": "light",
|
|
"scheme-main-l": $scheme-main-l,
|
|
"scheme-main-bis-l": 98%,
|
|
"scheme-main-ter-l": 96%,
|
|
"background-l": 96%,
|
|
"border-weak-l": 93%,
|
|
"border-l": 86%,
|
|
"text-weak-l": 48%,
|
|
"text-l": 29%,
|
|
"text-strong-l": 21%,
|
|
"text-title-l": 14%,
|
|
"scheme-invert-ter-l": 14%,
|
|
"scheme-invert-bis-l": 7%,
|
|
"scheme-invert-l": 4%,
|
|
|
|
// Typography
|
|
"family-primary": dv.$family-primary,
|
|
"family-secondary": dv.$family-secondary,
|
|
"family-code": dv.$family-code,
|
|
"size-small": dv.$size-small,
|
|
"size-normal": dv.$size-normal,
|
|
"size-medium": dv.$size-medium,
|
|
"size-large": dv.$size-large,
|
|
"weight-light": iv.$weight-light,
|
|
"weight-normal": iv.$weight-normal,
|
|
"weight-medium": iv.$weight-medium,
|
|
"weight-semibold": iv.$weight-semibold,
|
|
"weight-bold": iv.$weight-bold,
|
|
"weight-extrabold": iv.$weight-extrabold,
|
|
|
|
// Other
|
|
"block-spacing": iv.$block-spacing,
|
|
"duration": 294ms,
|
|
"easing": ease-out,
|
|
"radius-small": iv.$radius-small,
|
|
"radius": iv.$radius,
|
|
"radius-medium": iv.$radius-medium,
|
|
"radius-large": iv.$radius-large,
|
|
"radius-rounded": 9999px,
|
|
"speed": 86ms,
|
|
|
|
"arrow-color": #{cv.getVar("link")},
|
|
"loading-color": #{cv.getVar("border")},
|
|
"burger-h": #{cv.getVar("link-h")},
|
|
"burger-s": #{cv.getVar("link-s")},
|
|
"burger-l": #{cv.getVar("link-l")},
|
|
"burger-border-radius": 0.5em,
|
|
// Using px values to prevent half pixel issues
|
|
"burger-gap": 5px,
|
|
"burger-item-height": 2px,
|
|
"burger-item-width": 20px,
|
|
)
|
|
);
|
|
|
|
// Colors
|
|
$no-palette: ("white", "black", "light", "dark");
|
|
|
|
@each $name, $color in dv.$colors {
|
|
$base: $color;
|
|
$invert: null;
|
|
$light: null;
|
|
$dark: null;
|
|
|
|
@if type-of($color == "list") {
|
|
$base: list.nth($color, 1);
|
|
|
|
@if list.length($color) > 3 {
|
|
$invert: list.nth($color, 2);
|
|
$light: list.nth($color, 3);
|
|
$dark: list.nth($color, 4);
|
|
} @else if list.length($color) > 1 {
|
|
$invert: list.nth($color, 2);
|
|
}
|
|
}
|
|
|
|
@if list.index($no-palette, $name) {
|
|
@include cv.generate-basic-palette($name, $base, $invert);
|
|
} @else {
|
|
@include cv.generate-color-palette(
|
|
$name,
|
|
$base,
|
|
$scheme-main-l,
|
|
$invert,
|
|
$light,
|
|
$dark
|
|
);
|
|
}
|
|
|
|
@include cv.generate-on-scheme-colors($name, $base, $scheme-main);
|
|
}
|
|
|
|
// Shades
|
|
@each $name, $shade in dv.$shades {
|
|
@include cv.register-var($name, $shade);
|
|
}
|
|
|
|
@include cv.register-hsl("shadow", dv.$shadow-color);
|
|
|
|
@each $size in dv.$sizes {
|
|
$i: index(dv.$sizes, $size);
|
|
$name: "size-#{$i}";
|
|
@include cv.register-var($name, $size);
|
|
}
|
|
}
|