[IMP] css: clean up UX color palette

We have a lots of colors across all of our css. Some of these colors
are duplicated and some are almost the same. We are not consistent
at all.

With this commit, I try to clean up all of these colors:
- we now have less colors than before
- all colors now use css variables
- some colors used in the JS were moved to the CSS

closes #7196

Task: 5107222
Signed-off-by: Pierre Rousseau (pro) <pro@odoo.com>

Author: hokolomopo

src/components/autofill/autofill.css

@@ -2,7 +2,7 @@
   .o-autofill {
     position: absolute;
     border: 1px solid white;
-    background-color: #1a73e8;
+    background-color: var(--os-selection-border-color);
     height: var(--os-autofill-edge-length);
     width: var(--os-autofill-edge-length);
   }

src/components/bottom_bar/bottom_bar.css

@@ -1,7 +1,7 @@
 .o-spreadsheet {
   .o-spreadsheet-bottom-bar {
     font-size: 15px;
-    border-top: 1px solid lightgrey;
+    border-top: 1px solid var(--os-gray-400);
     background-color: var(--os-background-gray-color);
     padding-left: var(--os-header-width);
 
@@ -15,11 +15,11 @@
     .o-all-sheets {
       max-width: 70%;
       .o-bottom-bar-fade-out {
-        background-image: linear-gradient(-90deg, #cfcfcf, transparent 1%);
+        background-image: linear-gradient(-90deg, var(--os-gray-400), transparent 1%);
       }
       .o-bottom-bar-fade-in {
         z-index: 1;
-        background-image: linear-gradient(90deg, #cfcfcf, transparent 1%);
+        background-image: linear-gradient(90deg, var(--os-gray-400), transparent 1%);
       }
       .o-sheet-list {
         overflow-y: hidden;

src/components/bottom_bar/bottom_bar_sheet/bottom_bar_sheet.css

@@ -3,8 +3,8 @@
     padding: 0 15px;
     padding-right: 10px;
     height: var(--os-desktop-bottombar-height);
-    border-left: 1px solid #c1c1c1;
-    border-right: 1px solid #c1c1c1;
+    border-left: 1px solid var(--os-gray-400);
+    border-right: 1px solid var(--os-gray-400);
     margin-left: -1px;
     cursor: pointer;
     &:hover {

src/components/bottom_bar/bottom_bar_statistic/bottom_bar_statistic.css

@@ -2,7 +2,6 @@
   .o-selection-statistic {
     margin-right: 20px;
     padding: 4px 4px 4px 8px;
-    color: #333;
     cursor: pointer;
     &:hover {
       background-color: rgba(0, 0, 0, 0.08) !important;

src/components/color_picker/color_picker.css

@@ -37,21 +37,21 @@
       height: calc(var(--os-item-edge-length) + (2 * var(--os-item-border-width)));
       margin: 0px;
       border-radius: 50px;
-      border: var(--os-item-border-width) solid #666666;
+      border: var(--os-item-border-width) solid var(--os-gray-600);
       padding: 0px;
       font-size: 16px;
       background: white;
       &:hover {
         background-color: rgba(0, 0, 0, 0.08);
-        outline: 1px solid gray;
+        outline: 1px solid var(--os-gray-500);
         cursor: pointer;
       }
     }
     .o-buttons {
       padding: var(--os-picker-padding);
       display: flex;
       .o-cancel {
-        border: var(--os-item-border-width) solid #c0c0c0;
+        border: var(--os-item-border-width) solid var(--os-gray-300);
         width: 100%;
         padding: 5px;
         font-size: 14px;
@@ -63,7 +63,7 @@
       }
     }
     .o-add-button {
-      border: var(--os-item-border-width) solid #c0c0c0;
+      border: var(--os-item-border-width) solid var(--os-gray-300);
       padding: 4px;
       background: white;
       border-radius: 4px;
@@ -82,7 +82,7 @@
       position: relative;
       .o-gradient {
         margin-bottom: calc(var(--os-magnifier-edge) / 2);
-        border: var(--os-item-border-width) solid #c0c0c0;
+        border: var(--os-item-border-width) solid var(--os-gray-300);
         width: calc(var(--os-inner-gradient-width) + (2 * var(--os-item-border-width)));
         height: calc(var(--os-inner-gradient-height) + (2 * var(--os-item-border-width)));
         position: relative;
@@ -93,7 +93,7 @@
         width: var(--os-magnifier-edge);
         border-radius: 50%;
         border: 2px solid #fff;
-        box-shadow: 0px 0px 3px #c0c0c0;
+        box-shadow: 0px 0px 3px var(--os-gray-300);
         position: absolute;
         z-index: 2;
       }
@@ -104,7 +104,7 @@
         background: linear-gradient(to top, #000 0%, transparent 100%);
       }
       .o-hue-picker {
-        border: var(--os-item-border-width) solid #c0c0c0;
+        border: var(--os-item-border-width) solid var(--os-gray-300);
         width: 100%;
         height: 12px;
         border-radius: 4px;
@@ -135,7 +135,7 @@
           border-radius: 4px;
           padding: 4px 23px 4px 10px;
           height: 24px;
-          border: 1px solid #c0c0c0;
+          border: 1px solid var(--os-gray-300);
           margin-right: 2px;
         }
         .o-wrong-color {
@@ -154,7 +154,7 @@
         justify-content: end;
       }
       .o-color-preview {
-        border: 1px solid #c0c0c0;
+        border: 1px solid var(--os-gray-300);
         border-radius: 4px;
         width: 50%;
       }

src/components/composer/autocomplete_dropdown/autocomplete_dropdown.css

@@ -6,7 +6,7 @@
     max-width: 400px;
     z-index: 1;
     .o-autocomplete-value-focus {
-      background-color: #f2f2f2;
+      background-color: var(--os-composer-assistant-background);
     }
     & > div {
       padding: 1px 5px 5px 5px;

src/components/composer/composer/composer.css

@@ -24,28 +24,21 @@
 
           &.selector-flag:after {
             content: "␣";
-            color: #a9a9a9;
+            color: var(--os-composer-selector-flag-color);
           }
 
           &.highlight-parenthesis-flag:not(.highlight-flag) {
             border-radius: 5px;
-            background-color: lightgray;
+            background-color: var(--os-gray-400);
             padding: 1.5px 0px 1.5px 0px;
           }
 
           &.highlight-flag {
-            background-color: #e6edf3;
+            background-color: var(--os-composer-highlight-flag-color);
           }
         }
       }
     }
-    .o-composer[placeholder]:empty:not(:focus):not(.active)::before {
-      content: attr(placeholder);
-      color: #bdbdbd;
-      position: relative;
-      top: 0%;
-      pointer-events: none;
-    }
 
     .fa-stack {
       /* reset stack size which is doubled by default */
@@ -59,7 +52,7 @@
       top: -1px;
 
       .fa-question-circle {
-        color: var(--os-button-primary-bg);
+        color: var(--os-primary-button-bg);
       }
     }
 

src/components/composer/formula_assistant/formula_assistant.css

@@ -1,7 +1,7 @@
 .o-spreadsheet .o-formula-assistant {
   background: #ffffff;
   .o-formula-assistant-head {
-    background-color: #f2f2f2;
+    background-color: var(--os-composer-assistant-background);
     padding: 10px;
   }
   .o-formula-assistant-core {

src/components/composer/speech_bubble/speech_bubble.css

@@ -3,7 +3,7 @@
     background-color: white;
     box-sizing: border-box;
     box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.15);
-    border: 1px solid #ccc;
+    border: 1px solid var(--os-gray-400);
     z-index: var(--os-components-importance-popover);
 
     &::after {
@@ -16,8 +16,8 @@
       width: var(--os-bubble-arrow-size);
       transform-origin: top left;
       transform: translate(0, -67%) rotate(45deg);
-      border-right: 1px solid #ccc;
-      border-bottom: 1px solid #ccc;
+      border-right: 1px solid var(--os-gray-400);
+      border-bottom: 1px solid var(--os-gray-400);
       box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.15);
     }
   }

src/components/figures/figure/figure.css

@@ -12,6 +12,11 @@
 
   div.o-figure-border {
     z-index: 1;
+    border: 0px solid var(--os-figure-border-color);
+
+    &.o-selected {
+      border-color: var(--os-selection-border-color);
+    }
   }
 
   .o-figure-wrapper {
@@ -29,7 +34,7 @@
       position: absolute;
       width: 8px;
       height: 8px;
-      background-color: #1a73e8;
+      background-color: var(--os-selection-border-color);
       outline: 1px solid white;
 
       &.o-top {