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

[project/luci.git] / themes / luci-theme-material / htdocs / luci-static / material / custom.css

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 b2515fb5aa4c89902f5d6c2df55830094854baba..b9ad8bbeb86b1af91357f63482b57b4a6a2c21c7 100644 (file)
--- 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";
 }