feat: compile all new build versions

dist/light.css

@@ -1,17 +1,65 @@
 @charset "UTF-8";
+/**
+ * Light-themed version:
+ * uses light theme by default but switches to dark theme
+ * if a system-wide theme preference is set on the user's device.
+ *
+ * Variables will remain uncompiled so the theme can update dynamically
+ * at runtime in the browser.
+ */
+/* 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: #d5d5d5;
+  --scrollbar-thumb-hover: #c4c4c4;
+  --form-placeholder: #949494;
+  --form-text: #000000;
+}
+
+@media (prefers-color-scheme: dark) {
+  /* 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: #415c73;
+    --form-placeholder: #a9a9a9;
+    --form-text: #ffffff;
+  }
+}
+
 body {
   font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
   line-height: 1.4;
   max-width: 800px;
   margin: 20px auto;
   padding: 0 10px;
-  color: #363636;
-  background: #ffffff;
+  color: var(--text-main);
+  background: var(--background);
   text-rendering: optimizeLegibility;
 }
 
 button, input, textarea {
-  transition: background-color 0.1s linear, border-color 0.1s linear, color 0.1s linear, box-shadow 0.1s linear, transform 0.1s ease;
+  transition: background-color var(--animation-duration) linear, border-color var(--animation-duration) linear, color var(--animation-duration) linear, box-shadow var(--animation-duration) linear, transform var(--animation-duration) ease;
 }
 
 h1 {
@@ -35,7 +83,7 @@ h4,
 h5,
 h6,
 strong {
-  color: #000000;
+  color: var(--text-bright);
 }
 
 h1,
@@ -51,7 +99,7 @@ th {
 }
 
 blockquote {
-  border-left: 4px solid #0096bfab;
+  border-left: 4px solid var(--focus);
   margin: 1.5em 0em;
   padding: 0.5em 1em;
   font-style: italic;
@@ -95,8 +143,8 @@ select {
 }
 
 input, select, button, textarea {
-  color: #000000;
-  background-color: #efefef;
+  color: var(--form-text);
+  background-color: var(--background-alt);
   font-family: inherit;
   font-size: inherit;
   margin-right: 6px;
@@ -127,14 +175,14 @@ button, input[type='submit'], input[type='button'] {
 button:hover,
 input[type='submit']:hover,
 input[type='button']:hover {
-  background: #dddddd;
+  background: var(--button-hover);
 }
 
 input:focus,
 select:focus,
 button:focus,
 textarea:focus {
-  box-shadow: 0 0 0 2px #0096bfab;
+  box-shadow: 0 0 0 2px var(--focus);
 }
 
 input[type='checkbox']:active,
@@ -154,24 +202,24 @@ textarea:disabled {
 }
 
 ::-webkit-input-placeholder {
-  color: #949494;
+  color: var(--form-placeholder);
 }
 
 :-ms-input-placeholder {
-  color: #949494;
+  color: var(--form-placeholder);
 }
 
 ::-ms-input-placeholder {
-  color: #949494;
+  color: var(--form-placeholder);
 }
 
 ::placeholder {
-  color: #949494;
+  color: var(--form-placeholder);
 }
 
 a {
   text-decoration: none;
-  color: #0076d1;
+  color: var(--links);
 }
 
 a:hover {
@@ -179,8 +227,8 @@ a:hover {
 }
 
 code, kbd {
-  background: #efefef;
-  color: #000000;
+  background: var(--background-alt);
+  color: var(--code);
   padding: 5px;
   border-radius: 6px;
 }
@@ -198,7 +246,7 @@ img {
 
 hr {
   border: none;
-  border-top: 1px solid #dbdbdb;
+  border-top: 1px solid var(--border);
 }
 
 table {
@@ -213,11 +261,11 @@ td, th {
 }
 
 th {
-  border-bottom: 1px solid #dbdbdb;
+  border-bottom: 1px solid var(--border);
 }
 
 tbody tr:nth-child(even) {
-  background-color: #efefef;
+  background-color: var(--background-alt);
 }
 
 ::-webkit-scrollbar {
@@ -226,25 +274,25 @@ tbody tr:nth-child(even) {
 }
 
 ::-webkit-scrollbar-track {
-  background: #efefef;
+  background: var(--background-alt);
   border-radius: 6px;
 }
 
 ::-webkit-scrollbar-thumb {
-  background: #d5d5d5;
+  background: var(--scrollbar-thumb);
   border-radius: 6px;
 }
 
 ::-webkit-scrollbar-thumb:hover {
-  background: #c4c4c4;
+  background: var(--scrollbar-thumb-hover);
 }
 
 ::-moz-selection {
-  background-color: #9e9e9e;
+  background-color: var(--selection);
 }
 
 ::selection {
-  background-color: #9e9e9e;
+  background-color: var(--selection);
 }
 
 /*# sourceMappingURL=light.css.map */