[pve-devel] [PATCH proxmox-widget-toolkit v2 1/3] fix #4546: css: create a new css class for warning texts

[Philipp Hufnagl]

Creates a new css class 'text-color-warning' for the dark theme, which
will be used to propperly show a warning icon later. For this purpose
the 'pwt-gauge-warn' color is extracted in a variable and reused. Also
the variable 'pwd-gauge-crit' has been extracted for consistency.

Signed-off-by: Philipp Hufnagl <p.hufnagl at proxmox.com>
---
 .../scss/abstracts/_variables.scss            | 20 ++++++++++---------
 src/proxmox-dark/scss/extjs/_menu.scss        |  4 ++++
 src/proxmox-dark/scss/other/_charts.scss      |  4 ++--
 3 files changed, 17 insertions(+), 11 deletions(-)

diff --git a/src/proxmox-dark/scss/abstracts/_variables.scss b/src/proxmox-dark/scss/abstracts/_variables.scss
index cac51eb..cf7cda4 100644
--- a/src/proxmox-dark/scss/abstracts/_variables.scss
+++ b/src/proxmox-dark/scss/abstracts/_variables.scss
@@ -8,9 +8,20 @@ $highlighted-text: hsl(205deg, 100%, 65%);
 $highlighted-text-alt: hsl(205deg, 100%, 80%);
 $highlighted-text-crit: hsl(360deg, 100%, 65%);
 
+// Backgrounds
+$content-background-color: hsl(0deg, 0%, 20%);
+$content-background-selected: hsl(0deg, 0%, 30%);
+$background-dark: hsl(0deg, 0%, 20%);
+$background-darker: hsl(0deg, 0%, 15%);
+$background-darkest: hsl(0deg, 0%, 10%);
+$background-invalid: hsl(360deg, 60%, 20%);
+$background-warning: hsl(40deg, 100%, 20%);
+
 // Icon and Text colors
 $text-color: hsl(0deg, 0%, 95%);
 $text-color-inactive: hsl(0deg, 0%, 60%);
+$text-color-warning: adjust-color($background-warning, $lightness: lightness($primary-color));
+$text-color-invalid: adjust-color($background-invalid, $lightness: lightness($primary-color));
 $icon-color: hsl(0deg, 0%, 90%);
 $icon-color-alt: hsl(0deg, 0%, 55%);
 
@@ -18,15 +29,6 @@ $icon-color-alt: hsl(0deg, 0%, 55%);
 $border-color: hsl(0deg, 0%, 40%);
 $border-color-alt: hsl(0deg, 0%, 25%);
 
-// Backgrounds
-$content-background-color: hsl(0deg, 0%, 20%);
-$content-background-selected: hsl(0deg, 0%, 30%);
-$background-dark: hsl(0deg, 0%, 20%);
-$background-darker: hsl(0deg, 0%, 15%);
-$background-darkest: hsl(0deg, 0%, 10%);
-$background-invalid: hsl(360deg, 60%, 20%);
-$background-warning: hsl(40deg, 100%, 20%);
-
 // Buttons
 $neutral-button-color: hsl(0deg, 0%, 25%);
 $neutral-button-color-alt: hsl(0deg, 0%, 35%);
diff --git a/src/proxmox-dark/scss/extjs/_menu.scss b/src/proxmox-dark/scss/extjs/_menu.scss
index 2983f60..aa51260 100644
--- a/src/proxmox-dark/scss/extjs/_menu.scss
+++ b/src/proxmox-dark/scss/extjs/_menu.scss
@@ -33,6 +33,10 @@
   color: $icon-color;
 }
 
+.x-menu-item-icon-default.warning {
+  color: $text-color-warning;
+}
+
 // Vertical divider (e.g. in UserInfo between icons and text)
 .x-menu-icon-separator-default {
   background-color: $background-dark;
diff --git a/src/proxmox-dark/scss/other/_charts.scss b/src/proxmox-dark/scss/other/_charts.scss
index 26b0104..a3a5b12 100644
--- a/src/proxmox-dark/scss/other/_charts.scss
+++ b/src/proxmox-dark/scss/other/_charts.scss
@@ -7,8 +7,8 @@
   --pwt-text-color: #{$text-color};
   --pwt-gauge-default: #{$primary-color};
   --pwt-gauge-back: #{$background-dark};
-  --pwt-gauge-warn: #{adjust-color($background-warning, $lightness: lightness($primary-color))};
-  --pwt-gauge-crit: #{adjust-color($background-invalid, $lightness: lightness($primary-color))};
+  --pwt-gauge-warn: #{$text-color-warning};
+  --pwt-gauge-crit: #{$text-color-invalid};
   --pwt-chart-primary: #{$primary-color};
   --pwt-chart-grid-stroke: #{$content-background-selected};
 }
-- 
2.39.2