feat: rename .scss -> .css and use color-mod()

src/_variables/README.md

@@ -1,7 +0,0 @@
-Every file matching variables-*.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/variables-[...].scss`  
-→ Use them within Sass by importing `src/_variables/_variables-[...]`.

src/_variables/_variables-dark.scss

@@ -1,25 +0,0 @@
-/* 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: #324759;
-  --scrollbar-thumb-hover: #{lighten(#324759, 8%)};
-
-  --form-placeholder: #a9a9a9;
-  --form-text: #ffffff;
-}

src/_variables/_variables-light.scss

@@ -1,25 +0,0 @@
-/* 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( #dddddd, 3% )};
---scrollbar-thumb-hover: #{darken( #dddddd, 10% )};
-
---form-placeholder: #949494;
---form-text: #000000;
-}

src/builds/dark.css

@@ -7,10 +7,7 @@
  * at runtime in the browser.
  */
 
-@import '../_variables/_variables-dark';
+@import '../variables-dark.css';
+@import '../variables-light.css' (prefers-color-scheme: light);
 
-@media (prefers-color-scheme: light) {
+@import '../parts/_core.css';
-  @import '../_variables/_variables-light';
-}
-
-@import '../parts/core';

src/builds/dark.standalone.css

@@ -4,5 +4,5 @@
  * will only include regular CSS, no variables.
  */
 
-@import '../_variables/variables-dark';
+@import '../variables-dark.css';
-@import '../parts/core';
+@import '../parts/_core.css';

src/builds/light.css

@@ -7,10 +7,8 @@
  * at runtime in the browser.
  */
 
-@import '../_variables/variables-light';
+@import '../variables-light.css';
+@import '../variables-dark.css' (prefers-color-scheme: dark);
 
-@media (prefers-color-scheme: dark) {
-  @import '../_variables/variables-dark';
-}
 
-@import '../parts/core';
+@import '../parts/_core.css';

src/builds/light.standalone.css

@@ -4,5 +4,5 @@
  * will only include regular CSS, no variables.
  */
 
-@import '../_variables/variables-light';
+@import '../variables-light.css';
-@import '../parts/core';
+@import '../parts/_core.css';

src/parts/_core.css

@@ -0,0 +1,6 @@
+@import '_base.css';
+@import '_typography.css';
+@import '_forms.css';
+@import '_links.css';
+@import '_code.css';
+@import '_misc.css';

src/parts/_core.scss

@@ -1,6 +0,0 @@
-@import 'base';
-@import 'typography';
-@import 'forms';
-@import 'links';
-@import 'code';
-@import 'misc';

src/variables-dark.css

@@ -1,5 +1,3 @@
-/* To use this file from Sass, import `_variables/_variables-dark` */
-
 :root {
   --background: #202b38;
   --background-alt: #161f27;
@@ -18,7 +16,7 @@
   --button-hover: #324759;
 
   --scrollbar-thumb: var(--button-hover);
-  --scrollbar-thumb-hover: #{lighten(var(--scrollbar-thumb), 8%)};
+  --scrollbar-thumb-hover: color-mod(var(--scrollbar-thumb) lightness(+8%));
 
   --form-placeholder: #a9a9a9;
   --form-text: #ffffff;

src/variables-light.css

@@ -0,0 +1,23 @@
+: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: color-mod(var(--button-hover) lightness(-3%));
+  --scrollbar-thumb-hover: color-mod(var(--button-hover) lightness(-10%));
+
+  --form-placeholder: #949494;
+  --form-text: #000000;
+}

src/variables-light.scss

@@ -1,25 +0,0 @@
-/* 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;
-}