From cb58a187bdf623e1852616e870a8d30442ccd55e Mon Sep 17 00:00:00 2001 From: daudix Date: Mon, 26 Aug 2024 05:39:42 +0300 Subject: [PATCH] Simple variable overrides for stylesheets (fixes #55) --- sass/_variables.scss | 96 +++++++++++++++++++++++--------------------- 1 file changed, 50 insertions(+), 46 deletions(-) diff --git a/sass/_variables.scss b/sass/_variables.scss index 2b214af..3260c88 100644 --- a/sass/_variables.scss +++ b/sass/_variables.scss @@ -1,5 +1,22 @@ -@mixin theme-variables($theme) { +@mixin theme-variables { + :root { + @content("light"); + } + + [data-theme="dark"] { + @content("dark"); + } + + @media (prefers-color-scheme: dark) { + :root:not([data-theme="light"]) { + @content("dark"); + } + } +} + +@include theme-variables using ($theme) { @if $theme =="dark" { + // COLORS --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); @@ -25,6 +42,7 @@ } @else { + // COLORS --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); @@ -46,50 +64,36 @@ --red-fg: rgb(224 27 36); --yellow-bg: rgb(156 110 3 / 0.1); --yellow-fg: rgb(156 110 3); - } -} - -: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"); + + // 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"; } }