From c4c00ae51583a5e5f60a879091a7bb0e694eb017 Mon Sep 17 00:00:00 2001
From: Maxim Kadushkin <maxim.kadushkin@onlyoffice.com>
Date: Sat, 6 Feb 2021 21:15:49 +0300
Subject: [PATCH] [stylesheets] updated colors table

---
 .../resources/less/colors-table-dark.less     | 35 ++++++++++++--
 .../main/resources/less/colors-table.less     | 46 ++++++++++++++++---
 2 files changed, 70 insertions(+), 11 deletions(-)

diff --git a/apps/common/main/resources/less/colors-table-dark.less b/apps/common/main/resources/less/colors-table-dark.less
index 62ff8213f..e8a1f7d67 100644
--- a/apps/common/main/resources/less/colors-table-dark.less
+++ b/apps/common/main/resources/less/colors-table-dark.less
@@ -50,21 +50,48 @@
         --icon-contrast-popover: #fff;
         --icon-success: #090;
 
+        // Canvas colors
         --canvas-background: #666666;
         --canvas-content-background: #fff;
+        --canvas-page-border: #555;
+
         --canvas-ruler-background: #555;
         --canvas-ruler-margins-background: #444;
-        --canvas-ruler-marks-border: #b2b2b2;
+        --canvas-ruler-mark: #b2b2b2;
+        --canvas-ruler-handle-border: #b2b2b2;
+        --canvas-ruler-handle-border-disabled: #717171;
+
         --canvas-high-contrast: #fff;
+        --canvas-high-contrast-disabled: #888;
+
         --canvas-cell-border: fade(#000, 10%);
-        --canvas-cell-title-border: fade(#fff, 10%);
+        --canvas-cell-title-border: #757575;
+        --canvas-cell-title-border-hover: #858585;
+        --canvas-cell-title-border-selected: #9e9e9e;
         --canvas-cell-title-hover: #787878;
         --canvas-cell-title-selected: #939393;
+
         --canvas-dark-cell-title: #111;
         --canvas-dark-cell-title-hover: #000;
         --canvas-dark-cell-title-selected: #333;
-        --canvas-scroll-controls: fade(#000, 20%);
-        --canvas-scroll-controls-hover: fade(#000, 30%);
+        --canvas-dark-cell-title-border: #282828;
+        --canvas-dark-cell-title-border-hover: #191919;
+        --canvas-dark-cell-title-border-selected: #474747;
+
+        --canvas-scroll-thumb: #404040;
+        --canvas-scroll-thumb-hover: #999;
+        --canvas-scroll-thumb-pressed: #adadad;
+        --canvas-scroll-thumb-border: #2a2a2a;
+        --canvas-scroll-thumb-border-hover: #2a2a2a;
+        --canvas-scroll-thumb-border-pressed: #2a2a2a;
+        --canvas-scroll-arrow: #999;
+        --canvas-scroll-arrow-hover: #404040;
+        --canvas-scroll-arrow-pressed: #404040;
+        --canvas-scroll-thumb-target: #999;
+        --canvas-scroll-thumb-target-hover: #404040;
+        --canvas-scroll-thumb-target-pressed: #404040;
+
+        // Others
 
         --button-small-normal-icon-offset-x: -20px;
         --button-small-active-icon-offset-x: -20px;
diff --git a/apps/common/main/resources/less/colors-table.less b/apps/common/main/resources/less/colors-table.less
index 0b0183155..e149e47c7 100644
--- a/apps/common/main/resources/less/colors-table.less
+++ b/apps/common/main/resources/less/colors-table.less
@@ -59,21 +59,49 @@
     --icon-contrast-popover: #fff;
     --icon-success: #090;
 
-    --canvas-background: #e2e2e2;
+    // Canvas
+
+    --canvas-background: #f0f0f0;
     --canvas-content-background: #fff;
+    --canvas-page-border: #ccc;
+
     --canvas-ruler-background: #fff;
-    --canvas-ruler-margins-background: #cfcfcf;
-    --canvas-ruler-marks-border: #585b5e;
+    --canvas-ruler-margins-background: #d9d9d9;
+    --canvas-ruler-mark: #555;
+    --canvas-ruler-handle-border: #555;
+    --canvas-ruler-handle-border-disabled: #bbb;
+
     --canvas-high-contrast: #000;
+    --canvas-high-contrast-disabled: #999;
+
     --canvas-cell-border: fade(black, 10%);
-    --canvas-cell-title-border: fade(black, 10%);
+    --canvas-cell-title-border: #d8d8d8;
+    --canvas-cell-title-border-hover: #c9c9c9;
+    --canvas-cell-title-border-selected: #bbb;
     --canvas-cell-title-hover: #dfdfdf;
     --canvas-cell-title-selected: #cfcfcf;
+
     --canvas-dark-cell-title: #444;
     --canvas-dark-cell-title-hover: #666 ;
     --canvas-dark-cell-title-selected: #111;
-    --canvas-scroll-controls: #f1f1f1;
-    --canvas-scroll-controls-hover: #cfcfcf;
+    --canvas-dark-cell-title-border: #3d3d3d;
+    --canvas-dark-cell-title-border-hover: #5c5c5c;
+    --canvas-dark-cell-title-border-selected: #0f0f0f;
+
+    --canvas-scroll-thumb: #f7f7f7;
+    --canvas-scroll-thumb-hover: #c0c0c0;
+    --canvas-scroll-thumb-pressed: #adadad;
+    --canvas-scroll-thumb-border: #c0c0c0;
+    --canvas-scroll-thumb-border-hover: #c0c0c0;
+    --canvas-scroll-thumb-border-pressed: #0%;
+    --canvas-scroll-arrow: #adadad;
+    --canvas-scroll-arrow-hover: #f7f7f7;
+    --canvas-scroll-arrow-pressed: #f7f7f7;
+    --canvas-scroll-thumb-target: #c0c0c0;
+    --canvas-scroll-thumb-target-hover: #f7f7f7;
+    --canvas-scroll-thumb-target-pressed: #f7f7f7;
+
+    // Others
 
     //--button-small-normal-icon-offset-x: 0;
     //--button-small-active-icon-offset-x: 0;
@@ -158,4 +186,8 @@
 
 @component-normal-icon-filer: var(--component-normal-icon-filter);
 
-@menu-icon-item-checked-offset-x: var(--menu-icon-item-checked-offset-x, 0);
\ No newline at end of file
+@menu-icon-item-checked-offset-x: var(--menu-icon-item-checked-offset-x, 0);
+
+// Canvas
+// ---------------------------
+@canvas-content-background: var(--canvas-content-background);