color icon classes

packages/web/public/icon-colors.css

@@ -0,0 +1,23 @@
+.color-icon-blue {
+  color: var(--theme-icon-blue);
+}
+
+.color-icon-green {
+  color: var(--theme-icon-green);
+}
+
+.color-icon-red {
+  color: var(--theme-icon-red);
+}
+
+.color-icon-gold {
+  color: var(--theme-icon-gold);
+}
+
+.color-icon-yellow {
+  color: var(--theme-icon-yellow);
+}
+
+.color-icon-magenta {
+  color: var(--theme-icon-magenta);
+}

packages/web/public/index.html

@@ -11,6 +11,7 @@
 	<link rel='stylesheet' href='/theme-light.css'>
 	<link rel='stylesheet' href='/theme-dark.css'>
 	<link rel='stylesheet' href='/dimensions.css'>
+	<link rel='stylesheet' href='/icon-colors.css'>
 	<link rel='stylesheet' href='/build/bundle.css'>
 	<link rel='stylesheet' href='/build/fonts/materialdesignicons.css'>
 

packages/web/public/theme-dark.css

@@ -1,25 +1,8 @@
 .theme-dark {
-  --theme-font-1: #000000;
-  --theme-font-2: #4d4d4d;
-  --theme-font-3: #808080;
-  --theme-font-4: #b3b3b3;
-
-  --theme-bg-1: #ededed;
-  --theme-bg-2: #d4d4d4;
-  --theme-bg-3: #bbbbbb;
-  --theme-bg-4: #a2a2a2;
-
-  --theme-font-inv-1: #FFFFFF;
-  --theme-font-inv-2: #b3b3b3;
-  --theme-font-inv-3: #808080;
-  --theme-font-inv-4: #4d4d4d;
-
-  --theme-bg-inv-1: #222;
-  --theme-bg-inv-2: #3c3c3c;
-  --theme-bg-inv-3: #565656;
-  --theme-bg-inv-4: #707070;
-
-  --theme-border: #ccc;
-
-  --theme-bg-statusbar-inv: blue;
+  --theme-icon-blue: #3c9ae8;
+  --theme-icon-green: #8fd460;
+  --theme-icon-red: #e84749;
+  --theme-icon-gold: #e8b339;
+  --theme-icon-yellow: #e8d639;
+  --theme-icon-magenta: #e0529c;
 }

packages/web/public/theme-light.css

@@ -21,5 +21,14 @@
 
   --theme-border: #ccc;
 
+  --theme-bg-hover: #bae7ff;
+
   --theme-bg-statusbar-inv: blue;
+
+  --theme-icon-blue: #096dd9;
+  --theme-icon-green: #237804;
+  --theme-icon-red: #cf1322;
+  --theme-icon-gold: #d48806;
+  --theme-icon-yellow: #d4b106;
+  --theme-icon-magenta: #c41d7f;
 }