[pve-devel] [PATCH widget-toolkit 0/2] Proxmox Dark Theme Fix-ups - Round 6

[pve-devel] [PATCH widget-toolkit 0/2] Proxmox Dark Theme Fix-ups - Round 6

[Stefan Sterz]

this patch series adds a couple more tweaks to the dark theme. first
it improves the contrast ratios on panel header tool icons. then the
chart and gauge colors are brightened to match the primary color.

for the backup server first the path to the dark theme css in the api
viewer is fixed. then the theme switcher menu item is renamed to
"color theme" to match promox ve. the final patch also renames this
menu item for the mail gateway.

Stefan Sterz (2) @ widget-toolkit:
  dark-mode: adjust panel header tool icons
  fix #4618: dark-mode: lighten critical/warning charts/gauges colors

 src/proxmox-dark/scss/extjs/_panel.scss    | 37 +++++++++++++++++++---
 src/proxmox-dark/scss/extjs/_progress.scss |  4 +--
 src/proxmox-dark/scss/other/_charts.scss   |  4 +--
 3 files changed, 36 insertions(+), 9 deletions(-)

Stefan Sterz (2) @ proxmox-backup:
  docs: fix api viewer dark theme path
  ui: main view: rename "Theme" selector to "Color Theme"

 docs/api-viewer/index.html | 2 +-
 www/MainView.js            | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

Stefan Sterz (1) @ pmg-gui:
  main view/quarantine: rename "Theme" selector to "Color Theme"

 js/MainView.js       | 2 +-
 js/QuarantineView.js | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

-- 
2.30.2

[pve-devel] [PATCH widget-toolkit 1/2] dark-mode: adjust panel header tool icons

[Stefan Sterz]

by brigthenening the icons on a more individual basis some darker ones
can now feature higher contrasts while others won't be too bright.

Signed-off-by: Stefan Sterz <s.sterz@proxmox.com>
---
 src/proxmox-dark/scss/extjs/_panel.scss | 37 +++++++++++++++++++++----
 1 file changed, 32 insertions(+), 5 deletions(-)

diff --git a/src/proxmox-dark/scss/extjs/_panel.scss b/src/proxmox-dark/scss/extjs/_panel.scss
index 217d3f8..a3c9682 100644
--- a/src/proxmox-dark/scss/extjs/_panel.scss
+++ b/src/proxmox-dark/scss/extjs/_panel.scss
@@ -2,15 +2,42 @@
   background-color: $content-background-color;
   border: none;
 
-  // The small navigation elements in the panel header bar e.g. to
-  // collapse a panel
   .x-tool-tool-el {
     background-color: transparent;
-    filter: brightness(120%);
+  }
+}
+
+// The small navigation elements in the panel header bar e.g. to
+// collapse a panel
+.x-tool-img {
+  filter: brightness(175%);
+
+  // these are brighter per default, so they don't need to be
+  // brigthened as much
+  &.x-tool-expand,
+  &.x-tool-collapse,
+  &.x-tool-refresh {
+    filter: brightness(125%);
+  }
+
+  // this icon uses multiple tones, to have them behave appropriatelly
+  // invert them before brightening them
+  &.x-tool-print {
+    filter: invert(100%) hue-rotate(180deg) brightness(125%);
+  }
+
+  .x-tool-over & {
+    filter: brightness(200%);
+  }
+
+  .x-tool-over &.x-tool-expand,
+  .x-tool-over &.x-tool-collapse,
+  .x-tool-over &.x-tool-refresh {
+    filter: brightness(150%);
   }
 
-  .x-tool-over .x-tool-tool-el {
-    filter: brightness(140%);
+  .x-tool-over &.x-tool-print {
+    filter: invert(100%) hue-rotate(180deg) brightness(150%);
   }
 }
 
-- 
2.30.2

[pve-devel] [PATCH widget-toolkit 2/2] fix #4618: dark-mode: lighten critical/warning charts/gauges colors

[Stefan Sterz]

by increasing the lightness of these colors to to make them have the
same amount of lightness as the primary color.

Signed-off-by: Stefan Sterz <s.sterz@proxmox.com>
---
 src/proxmox-dark/scss/extjs/_progress.scss | 4 ++--
 src/proxmox-dark/scss/other/_charts.scss   | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/proxmox-dark/scss/extjs/_progress.scss b/src/proxmox-dark/scss/extjs/_progress.scss
index 4f2bb49..5d5941c 100644
--- a/src/proxmox-dark/scss/extjs/_progress.scss
+++ b/src/proxmox-dark/scss/extjs/_progress.scss
@@ -11,9 +11,9 @@
 }
 
 .x-progress.warning .x-progress-bar {
-  background-color: $background-warning;
+  background-color: var(--pwt-gauge-warn);
 }
 
 .x-progress.critical .x-progress-bar {
-  background-color: $background-invalid;
+  background-color: var(--pwt-gauge-crit);
 }
diff --git a/src/proxmox-dark/scss/other/_charts.scss b/src/proxmox-dark/scss/other/_charts.scss
index 5c67282..26b0104 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: #{$background-warning};
-  --pwt-gauge-crit: #{$background-invalid};
+  --pwt-gauge-warn: #{adjust-color($background-warning, $lightness: lightness($primary-color))};
+  --pwt-gauge-crit: #{adjust-color($background-invalid, $lightness: lightness($primary-color))};
   --pwt-chart-primary: #{$primary-color};
   --pwt-chart-grid-stroke: #{$content-background-selected};
 }
-- 
2.30.2

[pve-devel] applied-series: [pbs-devel] [PATCH widget-toolkit 0/2] Proxmox Dark Theme Fix-ups - Round 6

[Thomas Lamprecht]

Am 14/04/2023 um 15:28 schrieb Stefan Sterz:
> this patch series adds a couple more tweaks to the dark theme. first
> it improves the contrast ratios on panel header tool icons. then the
> chart and gauge colors are brightened to match the primary color.
> 
> for the backup server first the path to the dark theme css in the api
> viewer is fixed. then the theme switcher menu item is renamed to
> "color theme" to match promox ve. the final patch also renames this
> menu item for the mail gateway.
> 
> Stefan Sterz (2) @ widget-toolkit:
>   dark-mode: adjust panel header tool icons
>   fix #4618: dark-mode: lighten critical/warning charts/gauges colors
> 
>  src/proxmox-dark/scss/extjs/_panel.scss    | 37 +++++++++++++++++++---
>  src/proxmox-dark/scss/extjs/_progress.scss |  4 +--
>  src/proxmox-dark/scss/other/_charts.scss   |  4 +--
>  3 files changed, 36 insertions(+), 9 deletions(-)
> 
> Stefan Sterz (2) @ proxmox-backup:
>   docs: fix api viewer dark theme path
>   ui: main view: rename "Theme" selector to "Color Theme"
> 
>  docs/api-viewer/index.html | 2 +-
>  www/MainView.js            | 2 +-
>  2 files changed, 2 insertions(+), 2 deletions(-)
> 
> Stefan Sterz (1) @ pmg-gui:
>   main view/quarantine: rename "Theme" selector to "Color Theme"
> 
>  js/MainView.js       | 2 +-
>  js/QuarantineView.js | 2 +-
>  2 files changed, 2 insertions(+), 2 deletions(-)
> 


applied all the patches in the respective three repos, thanks!