From 3bdbde1c2f5ed55837aa6d9631a374c9390b0773 Mon Sep 17 00:00:00 2001
From: supakeen <cmdr@supakeen.com>
Date: Sat, 5 Mar 2022 14:00:07 +0100
Subject: [PATCH] Propagate CSS variables.

CSS variables are used for the prefers-dark, propagate them to component
CSS as well.
---
 public/css/style.css                         |  6 +++-
 src/css/style.css                            |  6 +++-
 src/frontend/components/datasheet-search.css | 37 ++++++++++----------
 3 files changed, 28 insertions(+), 21 deletions(-)

diff --git a/public/css/style.css b/public/css/style.css
index 0fd6feb..ddf1085 100644
--- a/public/css/style.css
+++ b/public/css/style.css
@@ -1,6 +1,8 @@
 :root {
     --color-background: #f9f9f9;
+    --color-background-attention: #ffffff;
     --color-text: #000000;
+    --color-text-inverted: #ffffff;
     --color-text-subdued: #4f4e4e;
     --color-text-attention: teal;
     --color-text-warning: rgb(218, 13, 13);
@@ -10,8 +12,10 @@
 @media (prefers-color-scheme: dark) {
     :root {
         --color-background: #222222;
+        --color-background-attention: #000000;
         --color-text: #f9f9f9;
-        --color-text-subdued: #cccccc;
+        --color-text-inverted: #ffffff;
+        --color-text-subdued: #f1f1f1;
         --color-text-warning: rgb(218, 13, 13);
         --invert: 1;
     }
diff --git a/src/css/style.css b/src/css/style.css
index d821624..49939a4 100644
--- a/src/css/style.css
+++ b/src/css/style.css
@@ -1,6 +1,8 @@
 :root {
     --color-background: #f9f9f9;
+    --color-background-attention: #ffffff;
     --color-text: #000000;
+    --color-text-inverted: #ffffff;
     --color-text-subdued: #4f4e4e;
     --color-text-attention: teal;
     --color-text-warning: rgb(218, 13, 13);
@@ -10,8 +12,10 @@
 @media (prefers-color-scheme: dark) {
     :root {
         --color-background: #222222;
+        --color-background-attention: #000000;
         --color-text: #f9f9f9;
-        --color-text-subdued: #cccccc;
+        --color-text-inverted: #ffffff;
+        --color-text-subdued: #f1f1f1;
         --color-text-warning: rgb(218, 13, 13);
         --invert: 1;
     }
diff --git a/src/frontend/components/datasheet-search.css b/src/frontend/components/datasheet-search.css
index 60320ae..a361111 100644
--- a/src/frontend/components/datasheet-search.css
+++ b/src/frontend/components/datasheet-search.css
@@ -1,39 +1,38 @@
 .query {
-	font-size: 1.3em;
-	background-color: white;
-	color: black;
-	border: 1px solid teal;
+	font-size: 1.3rem;
+	background-color: var(--color-background-autention);
+	color: var(--color-text);
+	border: 1px solid var(--color-text-attention);
 	border-radius: 5px;
-	padding: .4em .8em;
+	padding: .4rem .8rem;
 	width: 100%;
 	box-sizing: border-box;
 }
 
 .noResults {
-	padding: .6em 1em;
+	padding: .6rem 1rem;
 }
 
 .results {
-	border: 1px solid teal;
+	border: 1px solid var(--color-text-attention);
 	border-radius: 5px;
-	/* margin-top: 1em; */
 
 	.result {
-		border-top: 1px solid teal;
-		padding: .6em 1em;
-		font-size: .8em;
+		border-top: 1px solid var(--color-text-attention);
+		padding: .6rem 1rem;
+		font-size: .8rem;
 
 		&.first {
 			border-top: 0;
-			font-size: 1em
+			font-size: 1rem
 		}
 
 		.name {
-			font-size: 1.3em;
+			font-size: 1.3rem;
 
 			.manufacturer {
-				color: #4f4e4e;
-				margin-right: .3em;
+				color: var(--color-text-subdued);
+				margin-right: .3rem;
 			}
 
 			.model {
@@ -42,7 +41,7 @@
 		}
 
 		.description {
-			color: #4f4e4e;
+			color: var(--color-text-subdued);
 			margin-top: .2em;
 		}
 
@@ -55,9 +54,9 @@
 			margin-top: -.3em;
 			margin-right: -.7em;
 
-			border: 1px solid #006262;
-			background-color: #039f9f;
-			color: white;
+			border: 1px solid var(--color-text);
+			background-color: var(--color-text-attention);
+			color: var(--color-text-inverted);
 		}
 	}
 }