44 lines
1 KiB
SCSS
44 lines
1 KiB
SCSS
|
|
||
|
|
$lighter: oklch(95% 8% var(--base-hue));
|
||
|
|
$light: oklch(90% 12% var(--base-hue));
|
||
|
|
$mid: oklch(40% 20% var(--base-hue));
|
||
|
|
$dark: oklch(20% 45% var(--base-hue));
|
||
|
|
$darker: oklch(10% 40% var(--base-hue));
|
||
|
|
|
||
|
|
$dark-accent: oklch(56% 40% calc(var(--base-hue) - 180));
|
||
|
|
$light-accent: oklch(90% 30% calc(var(--base-hue) - 180));
|
||
|
|
|
||
|
|
@function halfalpha($col) {
|
||
|
|
@return color-mix(in srgb, #{$col} 50%, transparent);
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
@mixin color-var($name, $light, $dark: null) {
|
||
|
|
@property #{$name} {
|
||
|
|
syntax: "<color>";
|
||
|
|
inherits: true;
|
||
|
|
initial-value: #{$light};
|
||
|
|
}
|
||
|
|
:root {
|
||
|
|
#{$name}: #{$light};
|
||
|
|
@if $dark != null {
|
||
|
|
@media (prefers-color-scheme: dark) { #{$name}: #{$dark}; }
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@mixin apply-colors($fg, $bg, $accent: null) {
|
||
|
|
--fg: #{$fg};
|
||
|
|
--bg: #{$bg};
|
||
|
|
@if $accent { --accent: #{$accent}; }
|
||
|
|
|
||
|
|
color: var(--fg);
|
||
|
|
background: var(--bg);
|
||
|
|
}
|
||
|
|
|
||
|
|
@mixin inverted($padding: 0.5em) {
|
||
|
|
@include apply-colors($fg: var(--counter-fg), $bg: var(--counter-bg),
|
||
|
|
$accent: var(--counter-accent));
|
||
|
|
padding: $padding;
|
||
|
|
}
|