100 lines
3.9 KiB
SCSS
100 lines
3.9 KiB
SCSS
@use 'sass:color';
|
|
@use "sass:map";
|
|
|
|
$-colors: (
|
|
accent-azure: #66adffd9,
|
|
accent-blue: #4072e5,
|
|
accent-blue10: #4072e54d,
|
|
accent-blue30: #4072e573,
|
|
accent-blue50: #4072e599,
|
|
accent-gold: #cc9200d9,
|
|
accent-green: #39bf68d9,
|
|
accent-orange: #ff794cd9,
|
|
accent-red: #db2c3ae5,
|
|
accent-teal: #59adc4e5,
|
|
accent-white: #fff,
|
|
accent-wood-dark: #996b6f,
|
|
accent-wood: #cc7a52e5,
|
|
accent-yellow: #faa700cc,
|
|
accent-highlight: #ffd40026,
|
|
fill-primary: #ffffffe5,
|
|
fill-secondary: #ffffff8c,
|
|
fill-tertiary: #ffffff4d,
|
|
fill-quarternary: #ffffff1f,
|
|
fill-quinary: #ffffff0f,
|
|
fill-senary: #ffffff08,
|
|
color-background: #1e1e1e,
|
|
color-background50: #1e1e1e80,
|
|
color-background70: #1e1e1eb2,
|
|
color-border: #ffffff2e,
|
|
color-border50: #ffffff17,
|
|
color-button: #404040,
|
|
color-control: #ccc,
|
|
color-menu: #28282894,
|
|
color-panedivider: #404040,
|
|
color-sidepane: #303030,
|
|
color-tabbar: #1e1e1e,
|
|
color-toolbar: #272727,
|
|
color-scrollbar: rgb(117, 117, 117),
|
|
color-scrollbar-hover: rgb(158, 158, 158),
|
|
color-scrollbar-background: transparent,
|
|
color-stripe: #ffffff0d,
|
|
tag-blue: #2ea8e5d9,
|
|
tag-gray: #aaac,
|
|
tag-green: #5fb236d9,
|
|
tag-indigo: #576dd9,
|
|
tag-magenta: #e56eeed9,
|
|
tag-orange: #f19837cc,
|
|
tag-plum: #a6507b,
|
|
tag-purple: #a28ae5e5,
|
|
tag-red: #ff6666e5,
|
|
tag-teal: #009980,
|
|
tag-yellow: #ffd400bf,
|
|
);
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
:root {
|
|
@each $name, $color in $-colors {
|
|
--#{$name}: #{$color};
|
|
}
|
|
|
|
// composite (opaque) colors
|
|
--color-quinary-on-background: #{color.mix(
|
|
map.get($-colors, "color-background"), color.change(map.get($-colors, "fill-quinary"), $alpha: 1), 100% * (1 - color.alpha(map.get($-colors, "fill-quinary")))
|
|
)};
|
|
--color-quarternary-on-background: #{color.mix(
|
|
map.get($-colors, "color-background"), color.change(map.get($-colors, "fill-quarternary"), $alpha: 1), 100% * (1 - color.alpha(map.get($-colors, "fill-quarternary")))
|
|
)};
|
|
--color-quinary-on-sidepane: #{color.mix(
|
|
map.get($-colors, "color-sidepane"), color.change(map.get($-colors, "fill-quinary"), $alpha: 1), 100% * (1 - color.alpha(map.get($-colors, "fill-quinary")))
|
|
)};
|
|
--color-quarternary-on-sidepane: #{color.mix(
|
|
map.get($-colors, "color-sidepane"), color.change(map.get($-colors, "fill-quarternary"), $alpha: 1), 100% * (1 - color.alpha(map.get($-colors, "fill-quarternary")))
|
|
)};
|
|
--color-stripe-on-background: #{color.mix(
|
|
map.get($-colors, "color-background"), color.change(map.get($-colors, "color-stripe"), $alpha: 1), 100% * (1 - color.alpha(map.get($-colors, "color-stripe")))
|
|
)};
|
|
|
|
// background materials
|
|
--material-background: var(--color-background);
|
|
--material-background50: var(--color-background50);
|
|
--material-background70: var(--color-background70);
|
|
--material-button: var(--color-button);
|
|
--material-control: var(--color-control);
|
|
--material-menu: var(--color-menu);
|
|
--material-sidepane: var(--color-sidepane);
|
|
--material-tabbar: var(--color-tabbar);
|
|
--material-toolbar: var(--color-toolbar);
|
|
--material-mix-quinary: var(--color-quinary-on-background);
|
|
--material-mix-quarternary: var(--color-quarternary-on-background);
|
|
--material-stripe: var(--color-stripe-on-background);
|
|
|
|
// border materials
|
|
--material-border-transparent: 1px solid transparent;
|
|
--material-border: 1px solid var(--color-border);
|
|
--material-border50: 1px solid var(--color-border50);
|
|
--material-panedivider: 1px solid var(--color-panedivider);
|
|
--material-border-quinary: 1px solid var(--fill-quinary);
|
|
--material-border-quarternary: 1px solid var(--fill-quarternary);
|
|
}
|
|
}
|