feat: extract & rewrite variables with CSS syntax

src/_variables/README.md

@@ -0,0 +1,7 @@
+Every file matching variable-*.scss in src/ will be processed with PostCSS,
+prefixed with "_" and copied to this folder at build time.
+
+> ⚠ Any changes you make to files within this folder **will be overwritten** on next build!
+
+→ Edit variables within `src/variable-[...].scss`  
+→ Use them within Sass by importing `src/_variables/_variable-[...]`.

src/dark.scss

@@ -1,23 +0,0 @@
-$background: #202b38 !default;
-$background-alt: #161f27 !default;
-
-$selection: #161f27 !default;
-
-$text-main: #dbdbdb !default;
-$text-bright: #ffffff !default;
-
-$links: #41adff !default;
-$focus: #0096bfab !default;
-$border: #dbdbdb !default;
-$code: #ffbe85 !default;
-
-$button-hover: #324759 !default;
-$animation-duration: 0.1s !default;
-
-$scrollbar-thumb: $button-hover;
-$scrollbar-thumb-hover: lighten($button-hover, 8%);
-
-$form-placeholder: #a9a9a9 !default;
-$form-text: #ffffff !default;
-
-@import 'parts/core';

src/light.scss

@@ -1,23 +0,0 @@
-$background: #ffffff !default;
-$background-alt: #efefef !default;
-
-$selection: #9e9e9e !default;
-
-$text-main: #363636 !default;
-$text-bright: #000000 !default;
-
-$links: #0076d1 !default;
-$focus: #0096bfab !default;
-$border: #dbdbdb !default;
-$code: #000000 !default;
-
-$button-hover: #dddddd !default;
-$animation-duration: 0.1s !default;
-
-$scrollbar-thumb: darken($button-hover, 3%);
-$scrollbar-thumb-hover: darken($button-hover, 10%);
-
-$form-placeholder: #949494 !default;
-$form-text: #000000 !default;
-
-@import 'parts/core';

src/variables-dark.scss

@@ -0,0 +1,25 @@
+/* ! To use this file from Sass, import `_variables/_variables-dark` ! */
+
+:root {
+  --background: #202b38;
+  --background-alt: #161f27;
+
+  --selection: #161f27;
+
+  --text-main: #dbdbdb;
+  --text-bright: #ffffff;
+
+  --links: #41adff;
+  --focus: #0096bfab;
+  --border: #dbdbdb;
+  --code: #ffbe85;
+
+  --animation-duration: 0.1s;
+  --button-hover: #324759;
+
+  --scrollbar-thumb: var(--button-hover);
+  --scrollbar-thumb-hover: #{lighten(var(--scrollbar-thumb), 8%)};
+
+  --form-placeholder: #a9a9a9;
+  --form-text: #ffffff;
+}

src/variables-light.scss

@@ -0,0 +1,25 @@
+/* ! To use this file from Sass, import `_variables/_variables-light` ! */
+
+:root {
+--background: #ffffff;
+--background-alt: #efefef;
+
+--selection: #9e9e9e;
+
+--text-main: #363636;
+--text-bright: #000000;
+
+--links: #0076d1;
+--focus: #0096bfab;
+--border: #dbdbdb;
+--code: #000000;
+
+--animation-duration: 0.1s;
+--button-hover: #dddddd;
+
+--scrollbar-thumb: #{darken( var(--button-hover), 3% )};
+--scrollbar-thumb-hover: #{darken( var(--button-hover), 10% )};
+
+--form-placeholder: #949494;
+--form-text: #000000;
+}