[pve-devel] [PATCH widget-toolkit 0/4] Dark Theme Fix-ups Round 3

[pve-devel] [PATCH widget-toolkit 0/4] Dark Theme Fix-ups Round 3

[Stefan Sterz]

this series adds a few more fix-ups for the dark theme:

* fix the contrast ratio of the focus state of help buttons
* make help buttons hovered/focused state brigther to be more 
  consistent with the rest of the theme
* dim warning and invalid colors further to be more consistent with
  crisp
* dim the color of "sorted-by" headers
* make the background mask more see-through while also letting windows
  stand out more

Stefan Sterz (4):
  dark-theme: improve help button contrast ratios in focused state
  dark-theme: make "sorted-by" header highlight more subtle
  dark-theme: dim warning and invalid colors more
  dark-theme: let the background "shine through" mask more

 src/proxmox-dark/scss/abstracts/_variables.scss | 6 +++---
 src/proxmox-dark/scss/extjs/_grid.scss          | 2 +-
 src/proxmox-dark/scss/extjs/_presentation.scss  | 6 +++---
 src/proxmox-dark/scss/proxmox/_helpbutton.scss  | 3 ++-
 4 files changed, 9 insertions(+), 8 deletions(-)

-- 
2.30.2

[pve-devel] [PATCH widget-toolkit 1/4] dark-theme: improve help button contrast ratios in focused state

[Stefan Sterz]

also improves the hovered/focused state and makes it more consistent
with other buttons by making it brighter than the default state.

Signed-off-by: Stefan Sterz <s.sterz@proxmox.com>
---
 src/proxmox-dark/scss/abstracts/_variables.scss | 2 +-
 src/proxmox-dark/scss/proxmox/_helpbutton.scss  | 3 ++-
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/proxmox-dark/scss/abstracts/_variables.scss b/src/proxmox-dark/scss/abstracts/_variables.scss
index cf61ad2..29c9020 100644
--- a/src/proxmox-dark/scss/abstracts/_variables.scss
+++ b/src/proxmox-dark/scss/abstracts/_variables.scss
@@ -35,7 +35,7 @@ $neutral-button-icon-color: $neutral-button-text-color;
 
 // Help Buttons
 $help-button-color: hsl(0deg, 0%, 65%);
-$help-button-color-alt: hsl(0deg, 0%, 55%);
+$help-button-color-alt: hsl(0deg, 0%, 75%);
 $help-button-text-color: hsl(0deg, 0%, 10%);
 $help-button-icon-color: $help-button-text-color;
 
diff --git a/src/proxmox-dark/scss/proxmox/_helpbutton.scss b/src/proxmox-dark/scss/proxmox/_helpbutton.scss
index 817d6a1..5032cc1 100644
--- a/src/proxmox-dark/scss/proxmox/_helpbutton.scss
+++ b/src/proxmox-dark/scss/proxmox/_helpbutton.scss
@@ -5,7 +5,8 @@
   color: $help-button-text-color;
 
   &.x-btn-over,
-  &.x-btn.x-btn-pressed.x-btn-default-toolbar-small {
+  &.x-btn.x-btn-pressed.x-btn-default-toolbar-small,
+  .x-keyboard-mode &.x-btn-default-toolbar-small.x-btn-focus {
     background-color: $help-button-color-alt;
     border-color: $help-button-color-alt;
   }
-- 
2.30.2

[pve-devel] [PATCH widget-toolkit 2/4] dark-theme: make "sorted-by" header highlight more subtle

[Stefan Sterz]

by making the highlight more subtle, the theme is more consistent with
the look of crisp.

Signed-off-by: Stefan Sterz <s.sterz@proxmox.com>
---
 src/proxmox-dark/scss/extjs/_grid.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/proxmox-dark/scss/extjs/_grid.scss b/src/proxmox-dark/scss/extjs/_grid.scss
index 3719fdc..beef492 100644
--- a/src/proxmox-dark/scss/extjs/_grid.scss
+++ b/src/proxmox-dark/scss/extjs/_grid.scss
@@ -88,7 +88,7 @@
 // header element that the grid is currently sorted by
 .x-column-header-sort-ASC,
 .x-column-header-sort-DESC {
-  background-color: $primary-dark;
+  background-color: mix($background-darker, $primary-color, 70%);
 }
 
 // summary rows (e.g. ceph pools last row)
-- 
2.30.2

[pve-devel] [PATCH widget-toolkit 3/4] dark-theme: dim warning and invalid colors more

[Stefan Sterz]

this brings them more in-line with the appearance of crisp.

Signed-off-by: Stefan Sterz <s.sterz@proxmox.com>
---
 src/proxmox-dark/scss/abstracts/_variables.scss | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/proxmox-dark/scss/abstracts/_variables.scss b/src/proxmox-dark/scss/abstracts/_variables.scss
index 29c9020..cac51eb 100644
--- a/src/proxmox-dark/scss/abstracts/_variables.scss
+++ b/src/proxmox-dark/scss/abstracts/_variables.scss
@@ -24,8 +24,8 @@ $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%, 30%);
-$background-warning: hsl(40deg, 100%, 30%);
+$background-invalid: hsl(360deg, 60%, 20%);
+$background-warning: hsl(40deg, 100%, 20%);
 
 // Buttons
 $neutral-button-color: hsl(0deg, 0%, 25%);
-- 
2.30.2

[pve-devel] [PATCH widget-toolkit 4/4] dark-theme: let the background "shine through" mask more

[Stefan Sterz]

this makes the background mask a bit brighter and more see-through to
make it possible to read values from behind the mask, if needed. it
also adds a more visible shadow to windows so that the stand out more
at the same time.

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

diff --git a/src/proxmox-dark/scss/extjs/_presentation.scss b/src/proxmox-dark/scss/extjs/_presentation.scss
index 2503368..5fd35a9 100644
--- a/src/proxmox-dark/scss/extjs/_presentation.scss
+++ b/src/proxmox-dark/scss/extjs/_presentation.scss
@@ -1,8 +1,8 @@
 // The mask that is applied when the window is unaccessible (Login
 // screen, Loading, ...)
 .x-mask {
-  background-color: black;
-  opacity: 0.85;
+  background-color: $background-darker;
+  opacity: 0.75;
 }
 
 // Shadows of floating windows like window modals, form selectors and
@@ -10,5 +10,5 @@
 .x-css-shadow {
   // the additional styling from the pve css overwrites the setting on
   // the element with "!important", that's why we need it here.
-  box-shadow: $background-darkest 0 0 5px !important;
+  box-shadow: $background-dark 0 -1px 15px 7px !important;
 }
-- 
2.30.2

[pve-devel] applied: [PATCH widget-toolkit 0/4] Dark Theme Fix-ups Round 3

[Thomas Lamprecht]

Am 20/03/2023 um 10:02 schrieb Stefan Sterz:
> this series adds a few more fix-ups for the dark theme:
> 
> * fix the contrast ratio of the focus state of help buttons
> * make help buttons hovered/focused state brigther to be more 
>   consistent with the rest of the theme
> * dim warning and invalid colors further to be more consistent with
>   crisp
> * dim the color of "sorted-by" headers
> * make the background mask more see-through while also letting windows
>   stand out more
> 
> Stefan Sterz (4):
>   dark-theme: improve help button contrast ratios in focused state
>   dark-theme: make "sorted-by" header highlight more subtle
>   dark-theme: dim warning and invalid colors more
>   dark-theme: let the background "shine through" mask more
> 
>  src/proxmox-dark/scss/abstracts/_variables.scss | 6 +++---
>  src/proxmox-dark/scss/extjs/_grid.scss          | 2 +-
>  src/proxmox-dark/scss/extjs/_presentation.scss  | 6 +++---
>  src/proxmox-dark/scss/proxmox/_helpbutton.scss  | 3 ++-
>  4 files changed, 9 insertions(+), 8 deletions(-)
> 


applied series, thanks!