112 lines
3.9 KiB
SCSS
112 lines
3.9 KiB
SCSS
@mixin theme-variables($theme) {
|
|
@if $theme == "dark" {
|
|
--bg-color: linear-gradient(rgb(0 0 0 / 0.9), rgb(0 0 0 / 0.9));
|
|
--fg-color: rgb(255 255 255);
|
|
--fg-muted-1: rgb(255 255 255 / 0.05);
|
|
--fg-muted-2: rgb(255 255 255 / 0.1);
|
|
--fg-muted-3: rgb(255 255 255 / 0.2);
|
|
--fg-muted-4: rgb(255 255 255 / 0.5);
|
|
--fg-muted-5: rgb(255 255 255 / 0.6);
|
|
--nav-bg: rgb(25 25 25 / 0.7);
|
|
--blue-bg: rgb(153 193 241 / 0.1);
|
|
--blue-fg: rgb(153 193 241);
|
|
--green-bg: rgb(143 240 164 / 0.1);
|
|
--green-fg: rgb(143 240 164);
|
|
--purple-bg: rgb(220 138 221 / 0.1);
|
|
--purple-fg: rgb(220 138 221);
|
|
--red-bg: rgb(226 97 81 / 0.1);
|
|
--red-fg: rgb(246 97 81);
|
|
--yellow-bg: rgb(248 228 92 / 0.1);
|
|
--yellow-fg: rgb(248 228 92);
|
|
--star-featured: rgb(248 228 92 / 0.05);
|
|
color-scheme: dark;
|
|
} @else {
|
|
--bg-color: linear-gradient(
|
|
rgb(255 255 255 / 0.8),
|
|
rgb(255 255 255 / 0.8)
|
|
);
|
|
--fg-color: rgb(0 0 0 / 0.8);
|
|
--fg-muted-1: rgb(0 0 0 / 0.05);
|
|
--fg-muted-2: rgb(0 0 0 / 0.1);
|
|
--fg-muted-3: rgb(0 0 0 / 0.2);
|
|
--fg-muted-4: rgb(0 0 0 / 0.5);
|
|
--fg-muted-5: rgb(0 0 0 / 0.6);
|
|
--nav-bg: rgb(242 242 242 / 0.7);
|
|
--blue-bg: rgb(53 132 228 / 0.1);
|
|
--blue-fg: rgb(53 132 228);
|
|
--green-bg: rgb(38 162 105 / 0.1);
|
|
--green-fg: rgb(38 162 105);
|
|
--purple-bg: rgb(145 65 172 / 0.1);
|
|
--purple-fg: rgb(145 65 172);
|
|
--red-bg: rgb(224 27 36 / 0.1);
|
|
--red-fg: rgb(224 27 36);
|
|
--yellow-bg: rgb(156 110 3 / 0.1);
|
|
--yellow-fg: rgb(156 110 3);
|
|
--star-featured: rgb(156 110 3 / 0.15);
|
|
}
|
|
}
|
|
|
|
:root {
|
|
@include theme-variables("light");
|
|
|
|
// VARIABLES
|
|
--active: 0.9;
|
|
--blur: saturate(180%) blur(0.75rem);
|
|
--container-width: 720px;
|
|
--edge-highlight: inset 0 0.0625rem 0 rgb(255 255 255 / 0.1);
|
|
--rounded-corner-small: 0.5rem;
|
|
--rounded-corner: 0.75rem;
|
|
--shadow-raised: 0 0 0 0.0625rem rgb(0 0 0 / 0.06),
|
|
0 0.125rem 0.375rem 0.125rem rgb(0 0 0 / 0.14),
|
|
0 0.25rem 0.75rem 0.25rem rgb(0 0 0 / 0.06);
|
|
--shadow: 0 0 0 0.0625rem rgb(0 0 0 / 0.03),
|
|
0 0.0625rem 0.1875rem 0.0625rem rgb(0 0 0 / 0.07),
|
|
0 0.125rem 0.375rem 0.125rem rgb(0 0 0 / 0.03);
|
|
--transition-long: 0.8s;
|
|
--transition-longer: 0.4s;
|
|
--transition: 0.2s;
|
|
|
|
// FONTS
|
|
--font-system-ui: system-ui, sans-serif;
|
|
--font-transitional: Charter, "Bitstream Charter", "Sitka Text", Cambria,
|
|
serif;
|
|
--font-old-style: "Iowan Old Style", "Palatino Linotype", "URW Palladio L",
|
|
P052, serif;
|
|
--font-humanist: Seravek, "Gill Sans Nova", Ubuntu, Calibri, "DejaVu Sans",
|
|
source-sans-pro, sans-serif;
|
|
--font-geometric-humanist: Avenir, Montserrat, Corbel, "URW Gothic",
|
|
source-sans-pro, sans-serif;
|
|
--font-classical-humanist: Optima, Candara, "Noto Sans", source-sans-pro,
|
|
sans-serif;
|
|
--font-neo-grotesque: Inter, Roboto, "Helvetica Neue", "Arial Nova",
|
|
"Nimbus Sans", Arial, sans-serif;
|
|
--font-monospace-slab-serif: "Nimbus Mono PS", "Courier New", monospace;
|
|
--font-monospace-code: ui-monospace, "Cascadia Code", "Source Code Pro",
|
|
Menlo, Consolas, "DejaVu Sans Mono", monospace;
|
|
--font-industrial: Bahnschrift, "DIN Alternate", "Franklin Gothic Medium",
|
|
"Nimbus Sans Narrow", sans-serif-condensed, sans-serif;
|
|
--font-rounded-sans: ui-rounded, "Hiragino Maru Gothic ProN", Quicksand,
|
|
Comfortaa, Manjari, "Arial Rounded MT", "Arial Rounded MT Bold", Calibri,
|
|
source-sans-pro, sans-serif;
|
|
--font-slab-serif: Rockwell, "Rockwell Nova", "Roboto Slab", "DejaVu Serif",
|
|
"Sitka Small", serif;
|
|
--font-antique: Superclarendon, "Bookman Old Style", "URW Bookman",
|
|
"URW Bookman L", "Georgia Pro", Georgia, serif;
|
|
--font-didone: Didot, "Bodoni MT", "Noto Serif Display", "URW Palladio L",
|
|
P052, Sylfaen, serif;
|
|
--font-handwritten: "Segoe Print", "Bradley Hand", Chilanka, TSCu_Comic,
|
|
casual, cursive;
|
|
--font-emoji: "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
|
|
"Noto Color Emoji";
|
|
}
|
|
|
|
[data-theme="dark"] {
|
|
@include theme-variables("dark");
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
:root:not([data-theme="light"]) {
|
|
@include theme-variables("dark");
|
|
}
|
|
}
|