luci-theme-material: improve theming system colors and contrasts

This changed spawned from trying to make certain text colors readable (such as white text on white background in many dialogs) introduced by commit 4ee2bc6 (ref: #5841) which made obvious the need to improve the color and contrast situation in the theme.

Alot of colors were duplicated in cascade.css and made for a hard time to align colors across different elements. This commit tries to rectify that by introducing variables for all commonly used colors.

* All base colors (white, blue, red, green, blue, yellow, etc) has been consolidated and moved to common variables
* Introduced more specific selectors for info levels to avoid colors bleeding over to other elements
* Removed duplicated properties which were overriden at the next row

Signed-off-by: Daniel Nilsson <daniel.nilsson94@outlook.com>

1 files changed, 41 insertions, 10 deletions

diff --git a/themes/luci-theme-material/htdocs/luci-static/material/custom.css b/themes/luci-theme-material/htdocs/luci-static/material/custom.css
index b2515fb5aa..b9ad8bbeb8 100644
--- a/themes/luci-theme-material/htdocs/luci-static/material/custom.css
+++ b/themes/luci-theme-material/htdocs/luci-static/material/custom.css
@@ -1,13 +1,44 @@
 :root {
-	--main-color: #00B5E2;
-	--header-bg: #00B5E2;
-	--header-color: #fff;
-	--bar-bg: #5bc0de;
-	--menu-bg-color: #fff;
-	--menu-color: #5f6368;
-	--menu-color-hover: #202124;
-	--main-menu-color: #202124;
-	--submenu-bg-hover: #d4d4d4;
-	--submenu-bg-hover-active: #00B5E2;
+	/** General colors */
+	--white-color: #ffffff;
+	--white-color-low: #f9f9f9;
+	--black-color: #000000;
+	--black-color-low: #202124;
+	--yellow-color: #f0ad4e;
+	--yellow-color-high: #eea236;
+	--on-yellow-color: var(--white-color);
+	--red-color: #d9534f;
+	--red-color-high: #d43f3a;
+	--on-red-color: var(--white-color);
+	--green-color: #5cb85c;
+	--green-color-high: #4cae4c;
+	--on-green-color: var(--white-color);
+	--dark-blue-color: #337ab7;
+	--dark-blue-color-high: #2e6da4;
+	--on-dark-blue-color: var(--white-color);
+	--gray-color: #d4d4d4;
+	--gray-color-high: #bfbfbf;
+	--light-blue-color: #5bc0de;
+	--light-blue-color-high: #46b8da;
+	--on-light-blue-color: var(--white-color);
+	
+	--primary-color: #00B5E2;
+	--secondary-color: #0099cc;
+
+	--notice-color: #002B49;
+	--on-notice-color: var(--white-color);
+
+	--danger-color: var(--red-color);
+	--on-danger-color: var(--on-red-color);
+
+	--warning-color: #f0e68c;
+	--on-warning-color: var(--black-color);
+
+	--success-color: var(--green-color);
+	--on-success-color: var(--on-green-color);
+
+	--error-color: #ff0000;
+	--on-error-color: var(--white-color);
+
 	--font-body: "Microsoft Yahei", "WenQuanYi Micro Hei", "sans-serif", "Helvetica Neue", "Helvetica", "Hiragino Sans GB";
 }