From 5d1f4615278f03facceafb7571d0c6c251e85c22 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?David=20Benqu=C3=A9?= <david.benque@xwiki.com>
Date: Thu, 17 Mar 2022 16:09:17 +0000
Subject: [PATCH] Fix button contrasts in toolbar

---
 customize.dist/src/less2/include/drive.less   |  9 ++++----
 customize.dist/src/less2/include/toolbar.less | 22 +++++++++----------
 2 files changed, 16 insertions(+), 15 deletions(-)

diff --git a/customize.dist/src/less2/include/drive.less b/customize.dist/src/less2/include/drive.less
index 2de73f0b4..fa4d4846b 100644
--- a/customize.dist/src/less2/include/drive.less
+++ b/customize.dist/src/less2/include/drive.less
@@ -943,13 +943,14 @@
 
     .cp-toolbar-bottom {
         .cp-toolbar-bottom-left {
+            @drive-light: lighten(@cryptpad_color_brand, 30%);
             .cp-app-drive-toolbar-new {
                 border-radius: @variables_radius;
-                color: @cp_toolbar-fg;
-                border-color: var(--toolbar-bg-color);
-                background-color: var(--toolbar-bg-color);
+                color: @cryptpad_color_grey_900;
+                border-color: @drive-light;
+                background-color: @drive-light;
                 &:hover {
-                    background-color: var(--toolbar-bg-color-fade);
+                    background-color: fade(@drive-light, 80%);
                 }
             }
         }
diff --git a/customize.dist/src/less2/include/toolbar.less b/customize.dist/src/less2/include/toolbar.less
index 134368945..dc5c52116 100644
--- a/customize.dist/src/less2/include/toolbar.less
+++ b/customize.dist/src/less2/include/toolbar.less
@@ -17,10 +17,10 @@
     @toolbar-bg-color: @bg-color;
     // XXX Todo: clean up unused variables
     // XXX: check contrasts of app colors used as btn background
-    @toolbar-bg-color-fade: fade(@toolbar-bg-color, 70%);
-    @desat-color: desaturate(@bg-color, 20%);
-    @toolbar-bg-color-light: contrast(@cp_toolbar-fg, lighten(@bg-color, 30%), darken(@desat-color, 20%));
-    @toolbar-bg-color-active: contrast(@cp_toolbar-fg, lighten(@bg-color, 20%), darken(@desat-color, 10%));
+    // @desat-color: desaturate(@bg-color, 20%);
+    // @toolbar-bg-color-active: contrast(@cp_toolbar-fg, lighten(@bg-color, 20%), darken(@desat-color, 10%));
+    @toolbar-bg-color-light: lighten(@bg-color, 30%);
+    @toolbar-bg-color-fade: fade(@toolbar-bg-color-light, 80%);
 };
 
 .toolbar_main (
@@ -32,7 +32,7 @@
     --toolbar-bg-color: @toolbar-bg-color;
     --toolbar-bg-color-fade: @toolbar-bg-color-fade;
     --toolbar-bg-color-light: @toolbar-bg-color-light;
-    --toolbar-bg-color-active: @toolbar-bg-color-active;
+    // --toolbar-bg-color-active: @toolbar-bg-color-active;
 
     .help_main();
     .notifications_main();
@@ -1024,16 +1024,16 @@
         }
 
         button.cp-toolbar-button-primary {
-            background-color: @toolbar-bg-color;
-            background-color: var(--toolbar-bg-color);
-            border-color: @toolbar-bg-color;
-            border-color: var(--toolbar-bg-color);
+            background-color: @toolbar-bg-color-light;
+            background-color: var(--toolbar-bg-color-light);
+            border-color: @toolbar-bg-color-light;
+            border-color: var(--toolbar-bg-color-light);
             color: @cp_toolbar-bottom-fg;
             &:hover {
                 // XXX DB: not working well in dark/light
-                background-color: fade(@toolbar-bg-color, 50%);
+                background-color: fade(@toolbar-bg-color-light, 80%);
                 background-color: var(--toolbar-bg-color-fade);
-                border-color: fade(@toolbar-bg-color, 50%);
+                border-color: fade(@toolbar-bg-color-light, 80%);
                 border-color: var(--toolbar-bg-color-fade);
             }
         }