Move CSS properties closer to their components and add dark mode

silicon/static/css/colors.css

@@ -0,0 +1,75 @@
+:root {
+    /* Color palette */
+    --c-gray10: white;
+    --c-gray9: rgb(236, 237, 239);
+    --c-gray8: rgb(221, 221, 221);
+    --c-gray7: rgb(214, 216, 219);
+    --c-gray5: rgb(128, 128, 128);
+    --c-gray4: rgb(119, 119, 119);
+    --c-gray2: rgb(52, 58, 64);
+    --c-gray0: black;
+
+    --c-invert-gray10: black;
+    --c-invert-gray9: rgb(32, 32, 33);
+    --c-invert-gray8: rgb(50, 49, 49);
+    --c-invert-gray7: rgb(69, 69, 69);
+    --c-invert-gray5: rgb(128, 128, 128);
+    --c-invert-gray4: rgb(147, 147, 147);
+    --c-invert-gray2: rgb(153, 168, 184);
+    --c-invert-gray0: rgb(239, 239, 239);
+
+    --c-blue-light: rgba(51, 122, 183);
+    --c-invert-blue-light: rgb(72, 145, 209);
+    --c-blue-light-translucent: rgba(51, 122, 183, 0.75);
+    --c-invert-blue-light-translucent: rgba(72, 145, 209, 0.85);
+    --c-red: rgb(183, 52, 52);
+    --c-green: rgb(45, 169, 74);
+    --c-blue: rgb(0, 0, 238);
+    --c-invert-blue: rgb(106, 106, 235);
+    --c-purple: rgb(85, 26, 139);
+    --c-invert-purple: rgb(140, 73, 202);
+
+    /* Color tokens */
+
+    --color-bg-weak: var(--c-gray10);
+    --color-bg-weak2: var(--c-gray9);
+    --color-bg-strong: var(--c-gray8);
+    --color-invert-bg-strong: var(--c-gray2);
+    --color-fg-error: var(--c-red);
+
+    --color-fg-text: var(--c-gray0);
+    --color-invert-fg-text: var(--c-gray10);
+    --color-fg-text-weak: var(--c-gray4);
+
+    --color-fg-link-external: var(--c-blue);
+    --color-fg-link-internal: var(--c-green);
+    --color-fg-link-visited: var(--c-purple);
+    --color-bg-link: var(--c-blue-light);
+    --color-bg-link-hover: var(--c-blue-light-translucent);
+
+    --color-border-weak: var(--c-gray7);
+    --color-border-strong: var(--c-gray5);
+}
+
+@media (prefers-color-scheme: dark) {
+    :root {
+        --color-bg-weak: var(--c-invert-gray9);
+        --color-bg-weak2: var(--c-invert-gray8);
+        --color-bg-strong: var(--c-invert-gray8);
+        --color-invert-bg-strong: var(--c-invert-gray2);
+        --color-fg-error: var(--c-red);
+
+        --color-fg-text: var(--c-invert-gray0);
+        --color-invert-fg-text: var(--c-invert-gray10);
+        --color-fg-text-weak: var(--c-invert-gray4);
+
+        --color-fg-link-external: var(--c-invert-blue);
+        --color-fg-link-internal: var(--c-green);
+        --color-fg-link-visited: var(--c-invert-purple);
+        --color-bg-link: var(--c-invert-blue-light);
+        --color-bg-link-hover: var(--c-invert-blue-light-translucent);
+
+        --color-border-weak: var(--c-invert-gray7);
+        --color-border-strong: var(--c-invert-gray5);
+    }
+}

silicon/static/css/edit.css

@@ -14,8 +14,8 @@
 }
 
 #alerts {
-    background: var(--nav-alert-background);
-    color: var(--nav-alert-text);
+    background: var(--color-bg-weak);
+    color: var(--color-fg-error);
     margin: 1em;
 }
 

silicon/static/css/history.css

@@ -3,7 +3,7 @@
 }
 
 #revisions a {
-    color: var(--nav-page-links);
+    color: var(--color-bg-link);
 }
 
 #current-revision {
@@ -12,14 +12,14 @@
 
 #current-revision a::before {
     content: "🡆 ";
-    color: var(--nav-text);
+    color: var(--color-fg-text-weak);
     font-weight: normal;
 }
 
 #revision-notice {
-    color: var(--article-warning-text);
-    background-color: var(--article-pre-background);
-    border: 1px solid var(--article-pre-border);
+    color: var(--color-fg-error);
+    background-color: var(--color-bg-weak2);
+    border: 1px solid var(--color-border-weak);
     border-radius: 0.5em;
     margin-top: 1em;
     margin-bottom: 0.5em;

silicon/static/css/layout.css

@@ -1,3 +1,17 @@
+:root {
+    --nav-text: var(--color-fg-text-weak);
+    --nav-background: var(--color-bg-strong);
+    --nav-button-text: var(--color-invert-fg-text);
+    --nav-button-background: var(--c-blue-light);
+    --nav-button-background-hover: var(--color-bg-link-hover);
+
+    /* Don't use dark mode colors on title, it's always dark */
+    --nav-title-text: var(--c-gray10);
+    --nav-title-background: var(--c-gray2);
+
+    --nav-page-links: var(--color-bg-link);
+}
+
 .grid-for-nav {
     position: absolute;
     width: 100%;
@@ -118,11 +132,21 @@
     list-style-type: decimal;
     padding-left: 2em;
 }
-#toc ol ol { list-style-type: upper-alpha; }
-#toc ol ol ol { list-style-type: upper-roman; }
-#toc ol ol ol ol { list-style-type: lower-alpha; }
-#toc ol ol ol ol ol { list-style-type: lower-roman; }
-#toc ol ol ol ol ol ol { list-style-type: lower-greek; }
+#toc ol ol {
+    list-style-type: upper-alpha;
+}
+#toc ol ol ol {
+    list-style-type: upper-roman;
+}
+#toc ol ol ol ol {
+    list-style-type: lower-alpha;
+}
+#toc ol ol ol ol ol {
+    list-style-type: lower-roman;
+}
+#toc ol ol ol ol ol ol {
+    list-style-type: lower-greek;
+}
 
 .nav-bottom {
     display: block;
@@ -153,7 +177,8 @@
     margin: 0.5em;
 }
 
-.nav-button, .menu-toggle {
+.nav-button,
+.menu-toggle {
     background: var(--nav-button-background);
     color: var(--nav-button-text);
     font-size: 14px;
@@ -168,7 +193,8 @@
     padding-right: 2em;
 }
 
-.nav-button:hover, .menu-toggle:hover {
+.nav-button:hover,
+.menu-toggle:hover {
     background: var(--nav-button-background-hover);
     text-decoration: none;
 }
@@ -198,10 +224,11 @@
 }
 
 .del-relation-btn {
-    color: var(--nav-alert-background);
+    color: var(--color-bg-error);
 }
 
-.widget-title-btn:hover, .del-relation-btn:hover {
+.widget-title-btn:hover,
+.del-relation-btn:hover {
     text-decoration: underline;
     cursor: pointer;
 }
@@ -219,7 +246,8 @@
         clear: both;
     }
 
-    .nav-top::after, .nav-top::before {
+    .nav-top::after,
+    .nav-top::before {
         display: table;
         content: "";
     }
@@ -255,7 +283,8 @@
         width: auto;
     }
 
-    .nav-page-title, .nav-bottom {
+    .nav-page-title,
+    .nav-bottom {
         display: none;
     }