[pve-devel] [PATCH widget-toolkit 3/6] dark-theme: re-work buttons colors to appear dimmer

[Stefan Sterz <s.sterz@proxmox.com>]

this dims buttons further by removing pure white text color and
adjusting backgrounds and border accordingly. it also keeps the help
buttons brighter than other buttons to draw (possibly confused) users
to them.

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

diff --git a/src/proxmox-dark/scss/abstracts/_variables.scss b/src/proxmox-dark/scss/abstracts/_variables.scss
index 96581df..cf61ad2 100644
--- a/src/proxmox-dark/scss/abstracts/_variables.scss
+++ b/src/proxmox-dark/scss/abstracts/_variables.scss
@@ -28,14 +28,14 @@ $background-invalid: hsl(360deg, 60%, 30%);
 $background-warning: hsl(40deg, 100%, 30%);
 
 // Buttons
-$neutral-button-color: hsl(0deg, 0%, 35%);
-$neutral-button-color-alt: hsl(0deg, 0%, 55%);
-$neutral-button-text-color: hsl(0deg, 0%, 100%);
+$neutral-button-color: hsl(0deg, 0%, 25%);
+$neutral-button-color-alt: hsl(0deg, 0%, 35%);
+$neutral-button-text-color: hsl(0deg, 0%, 95%);
 $neutral-button-icon-color: $neutral-button-text-color;
 
 // Help Buttons
-$help-button-color: hsl(0deg, 0%, 70%);
-$help-button-color-alt: hsl(0deg, 0%, 60%);
+$help-button-color: hsl(0deg, 0%, 65%);
+$help-button-color-alt: hsl(0deg, 0%, 55%);
 $help-button-text-color: hsl(0deg, 0%, 10%);
 $help-button-icon-color: $help-button-text-color;
 
diff --git a/src/proxmox-dark/scss/extjs/form/_button.scss b/src/proxmox-dark/scss/extjs/form/_button.scss
index 0aa1475..bf02135 100644
--- a/src/proxmox-dark/scss/extjs/form/_button.scss
+++ b/src/proxmox-dark/scss/extjs/form/_button.scss
@@ -35,6 +35,7 @@
   &.x-btn-over,
   .x-keyboard-mode &.x-btn-focus {
     background-color: $neutral-button-color-alt;
+    border-color: $neutral-button-color-alt;
 
     // the little arrow in certain toolbar buttons with dropdowns
     .x-btn-wrap-default-toolbar-small.x-btn-arrow-right::after,
diff --git a/src/proxmox-dark/scss/proxmox/_helpbutton.scss b/src/proxmox-dark/scss/proxmox/_helpbutton.scss
index aad92e2..817d6a1 100644
--- a/src/proxmox-dark/scss/proxmox/_helpbutton.scss
+++ b/src/proxmox-dark/scss/proxmox/_helpbutton.scss
@@ -1,6 +1,7 @@
 // help buttons
 .proxmox-inline-button {
   background-color: $help-button-color;
+  border-color: $help-button-color-alt;
   color: $help-button-text-color;
 
   &.x-btn-over,
-- 
2.30.2