refactor: rename style to styles
This commit is contained in:
35
styles/bulma/sass/themes/_index.scss
Normal file
35
styles/bulma/sass/themes/_index.scss
Normal file
@ -0,0 +1,35 @@
|
||||
/* Bulma Themes */
|
||||
@charset "utf-8";
|
||||
|
||||
@use "../utilities/css-variables" as cv;
|
||||
|
||||
@use "light";
|
||||
@use "dark";
|
||||
@use "setup";
|
||||
|
||||
:root {
|
||||
@include light.light-theme;
|
||||
@include setup.setup-theme;
|
||||
}
|
||||
|
||||
// prefers-color-scheme: light
|
||||
@include cv.system-theme($name: "light") {
|
||||
@include light.light-theme;
|
||||
}
|
||||
|
||||
// prefers-color-scheme: dark
|
||||
@include cv.system-theme($name: "dark") {
|
||||
@include dark.dark-theme;
|
||||
}
|
||||
|
||||
// :root, [data-theme=light], .theme-light
|
||||
@include cv.bulma-theme($name: "light") {
|
||||
@include light.light-theme;
|
||||
@include setup.setup-theme;
|
||||
}
|
||||
|
||||
// [data-theme=dark], .theme-dark
|
||||
@include cv.bulma-theme($name: "dark") {
|
||||
@include dark.dark-theme;
|
||||
@include setup.setup-theme;
|
||||
}
|
||||
56
styles/bulma/sass/themes/dark.scss
Normal file
56
styles/bulma/sass/themes/dark.scss
Normal file
@ -0,0 +1,56 @@
|
||||
@use "sass:list";
|
||||
|
||||
@use "../utilities/initial-variables" as iv;
|
||||
@use "../utilities/css-variables" as cv;
|
||||
@use "../utilities/derived-variables" as dv;
|
||||
@use "setup";
|
||||
|
||||
// The main lightness of this theme
|
||||
$scheme-main-l: 9%;
|
||||
$background-l: 14%;
|
||||
$text-l: 71%;
|
||||
|
||||
// The main scheme color, used to make calculations
|
||||
$scheme-main: hsl(iv.$scheme-h, iv.$scheme-s, $scheme-main-l);
|
||||
$background: hsl(iv.$scheme-h, iv.$scheme-s, $background-l);
|
||||
$text: hsl(iv.$scheme-h, iv.$scheme-s, $text-l);
|
||||
|
||||
@mixin dark-theme {
|
||||
@each $name, $color in dv.$colors {
|
||||
$base: $color;
|
||||
|
||||
@if type-of($color == "list") {
|
||||
$base: list.nth($color, 1);
|
||||
}
|
||||
|
||||
@include cv.generate-on-scheme-colors($name, $base, $scheme-main);
|
||||
}
|
||||
|
||||
@include cv.register-vars(
|
||||
(
|
||||
"scheme-brightness": "dark",
|
||||
"scheme-main-l": $scheme-main-l,
|
||||
"scheme-main-bis-l": $scheme-main-l + 2%,
|
||||
"scheme-main-ter-l": $scheme-main-l + 4%,
|
||||
"soft-l": iv.$dark-l,
|
||||
"bold-l": iv.$light-l,
|
||||
"soft-invert-l": iv.$light-l,
|
||||
"bold-invert-l": iv.$dark-l,
|
||||
"background-l": $background-l,
|
||||
"border-weak-l": 21%,
|
||||
"border-l": 24%,
|
||||
"text-weak-l": 53%,
|
||||
"text-l": $text-l,
|
||||
"text-strong-l": 93%,
|
||||
"text-title-l": 100%,
|
||||
"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%,
|
||||
)
|
||||
);
|
||||
|
||||
@include cv.register-hsl("shadow", white);
|
||||
}
|
||||
145
styles/bulma/sass/themes/light.scss
Normal file
145
styles/bulma/sass/themes/light.scss
Normal file
@ -0,0 +1,145 @@
|
||||
@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,
|
||||
|
||||
"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);
|
||||
}
|
||||
}
|
||||
174
styles/bulma/sass/themes/setup.scss
Normal file
174
styles/bulma/sass/themes/setup.scss
Normal file
@ -0,0 +1,174 @@
|
||||
@use "../utilities/css-variables" as cv;
|
||||
|
||||
@mixin setup-theme() {
|
||||
@include cv.register-vars(
|
||||
(
|
||||
// Computed
|
||||
"scheme-main":
|
||||
hsl(
|
||||
#{cv.getVar("scheme-h")},
|
||||
#{cv.getVar("scheme-s")},
|
||||
#{cv.getVar("scheme-main-l")}
|
||||
),
|
||||
"scheme-main-bis":
|
||||
hsl(
|
||||
#{cv.getVar("scheme-h")},
|
||||
#{cv.getVar("scheme-s")},
|
||||
#{cv.getVar("scheme-main-bis-l")}
|
||||
),
|
||||
"scheme-main-ter":
|
||||
hsl(
|
||||
#{cv.getVar("scheme-h")},
|
||||
#{cv.getVar("scheme-s")},
|
||||
#{cv.getVar("scheme-main-ter-l")}
|
||||
),
|
||||
"background":
|
||||
hsl(
|
||||
#{cv.getVar("scheme-h")},
|
||||
#{cv.getVar("scheme-s")},
|
||||
#{cv.getVar("background-l")}
|
||||
),
|
||||
"background-hover":
|
||||
hsl(
|
||||
#{cv.getVar("scheme-h")},
|
||||
#{cv.getVar("scheme-s")},
|
||||
calc(
|
||||
#{cv.getVar("background-l")} + #{cv.getVar(
|
||||
"hover-background-l-delta"
|
||||
)}
|
||||
)
|
||||
),
|
||||
"background-active":
|
||||
hsl(
|
||||
#{cv.getVar("scheme-h")},
|
||||
#{cv.getVar("scheme-s")},
|
||||
calc(
|
||||
#{cv.getVar("background-l")} + #{cv.getVar(
|
||||
"active-background-l-delta"
|
||||
)}
|
||||
)
|
||||
),
|
||||
"border-weak":
|
||||
hsl(
|
||||
#{cv.getVar("scheme-h")},
|
||||
#{cv.getVar("scheme-s")},
|
||||
#{cv.getVar("border-weak-l")}
|
||||
),
|
||||
"border":
|
||||
hsl(
|
||||
#{cv.getVar("scheme-h")},
|
||||
#{cv.getVar("scheme-s")},
|
||||
#{cv.getVar("border-l")}
|
||||
),
|
||||
"border-hover":
|
||||
hsl(
|
||||
#{cv.getVar("scheme-h")},
|
||||
#{cv.getVar("scheme-s")},
|
||||
calc(#{cv.getVar("border-l")} + #{cv.getVar("hover-border-l-delta")})
|
||||
),
|
||||
"border-active":
|
||||
hsl(
|
||||
#{cv.getVar("scheme-h")},
|
||||
#{cv.getVar("scheme-s")},
|
||||
calc(#{cv.getVar("border-l")} + #{cv.getVar("active-border-l-delta")})
|
||||
),
|
||||
"text-weak":
|
||||
hsl(
|
||||
#{cv.getVar("text-h")},
|
||||
#{cv.getVar("text-s")},
|
||||
#{cv.getVar("text-weak-l")}
|
||||
),
|
||||
"text":
|
||||
hsl(
|
||||
#{cv.getVar("text-h")},
|
||||
#{cv.getVar("text-s")},
|
||||
#{cv.getVar("text-l")}
|
||||
),
|
||||
"text-strong":
|
||||
hsl(
|
||||
#{cv.getVar("text-h")},
|
||||
#{cv.getVar("text-s")},
|
||||
#{cv.getVar("text-strong-l")}
|
||||
),
|
||||
"scheme-invert-ter":
|
||||
hsl(
|
||||
#{cv.getVar("scheme-h")},
|
||||
#{cv.getVar("scheme-s")},
|
||||
#{cv.getVar("scheme-invert-ter-l")}
|
||||
),
|
||||
"scheme-invert-bis":
|
||||
hsl(
|
||||
#{cv.getVar("scheme-h")},
|
||||
#{cv.getVar("scheme-s")},
|
||||
#{cv.getVar("scheme-invert-bis-l")}
|
||||
),
|
||||
"scheme-invert":
|
||||
hsl(
|
||||
#{cv.getVar("scheme-h")},
|
||||
#{cv.getVar("scheme-s")},
|
||||
#{cv.getVar("scheme-invert-l")}
|
||||
),
|
||||
"link":
|
||||
hsl(
|
||||
#{cv.getVar("link-h")},
|
||||
#{cv.getVar("link-s")},
|
||||
#{cv.getVar("link-l")}
|
||||
),
|
||||
"link-text":
|
||||
hsl(
|
||||
#{cv.getVar("link-h")},
|
||||
#{cv.getVar("link-s")},
|
||||
#{cv.getVar("link-on-scheme-l")}
|
||||
),
|
||||
"link-text-hover":
|
||||
hsl(
|
||||
#{cv.getVar("link-h")},
|
||||
#{cv.getVar("link-s")},
|
||||
calc(
|
||||
#{cv.getVar("link-on-scheme-l")} + #{cv.getVar(
|
||||
"hover-color-l-delta"
|
||||
)}
|
||||
)
|
||||
),
|
||||
"link-text-active":
|
||||
hsl(
|
||||
#{cv.getVar("link-h")},
|
||||
#{cv.getVar("link-s")},
|
||||
calc(
|
||||
#{cv.getVar("link-on-scheme-l")} + #{cv.getVar(
|
||||
"active-color-l-delta"
|
||||
)}
|
||||
)
|
||||
),
|
||||
"focus-h": #{cv.getVar("link-h")},
|
||||
"focus-s": #{cv.getVar("link-s")},
|
||||
"focus-l": #{cv.getVar("link-l")},
|
||||
"focus-offset": 1px,
|
||||
"focus-style": solid,
|
||||
"focus-width": 2px,
|
||||
"focus-shadow-size": 0 0 0 0.1875em,
|
||||
"focus-shadow-alpha": 0.25,
|
||||
"code":
|
||||
hsl(
|
||||
#{cv.getVar("danger-h")},
|
||||
#{cv.getVar("danger-s")},
|
||||
#{cv.getVar("danger-on-scheme-l")}
|
||||
),
|
||||
"code-background": #{cv.getVar("background")},
|
||||
"pre": #{cv.getVar("text")},
|
||||
"pre-background": #{cv.getVar("background")},
|
||||
"shadow": (
|
||||
0 0.5em 1em -0.125em hsla(#{cv.getVar("shadow-h")}, #{cv.getVar(
|
||||
"shadow-s"
|
||||
)}, #{cv.getVar("shadow-l")}, 0.1),
|
||||
0 0px 0 1px
|
||||
hsla(
|
||||
#{cv.getVar("shadow-h")},
|
||||
#{cv.getVar("shadow-s")},
|
||||
#{cv.getVar("shadow-l")},
|
||||
0.02
|
||||
)
|
||||
)
|
||||
)
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user