From 69617e317a4e445f332ba0266fb023108d3397fa Mon Sep 17 00:00:00 2001
From: "Val Erastov (xibyte)" <xibyte@gmail.com>
Date: Fri, 22 May 2020 01:17:37 -0700
Subject: [PATCH] work on color, make different levels of background

---
 modules/ui/components/AuxWidget.less      |  8 ++++--
 modules/ui/components/Folder.less         |  4 +--
 modules/ui/components/Menu.less           |  2 +-
 modules/ui/components/TabSwitcher.less    |  2 +-
 modules/ui/components/ToolButton.jsx      |  2 +-
 modules/ui/components/ToolButton.less     | 16 +++++------
 modules/ui/components/Window.less         |  7 ++---
 modules/ui/styles/global/form.less        |  8 +++---
 modules/ui/styles/global/main.less        |  2 +-
 modules/ui/styles/global/tables.less      |  4 +--
 modules/ui/styles/theme.less              | 34 ++++++++++++++++-------
 web/app/cad/dom/components/AppTabs.jsx    |  2 +-
 web/app/cad/dom/components/FloatView.less |  2 +-
 web/app/cad/dom/components/View3d.jsx     |  2 +-
 web/app/cad/expressions/Expressions.less  |  5 +++-
 15 files changed, 59 insertions(+), 41 deletions(-)

diff --git a/modules/ui/components/AuxWidget.less b/modules/ui/components/AuxWidget.less
index b50dc3bf..fb3c3881 100644
--- a/modules/ui/components/AuxWidget.less
+++ b/modules/ui/components/AuxWidget.less
@@ -1,10 +1,12 @@
 @import "./flatEdges.less";
+@import "~ui/styles/theme.less";
 @border-radius: 3px;
 
+
 .root {
-  color: #fff;
-  background-color: rgba(40, 40, 40, 0.95);
-  border: solid 1px #000;
+  color: @font-color;
+  background-color: @bg-color-3;
+  border: solid 1px @bg-color-1;
   border-radius: @border-radius;
 }
 
diff --git a/modules/ui/components/Folder.less b/modules/ui/components/Folder.less
index 92428f06..f22b07ae 100644
--- a/modules/ui/components/Folder.less
+++ b/modules/ui/components/Folder.less
@@ -1,12 +1,12 @@
 @import "~ui/styles/theme.less";
 
 .root {
-  background-color: @bg-color-alt;
+  background-color: @bg-color-2;
 }
 
 .title {
   border-bottom: 1px solid @border-color;
-  background-color: @bg-color;
+  background-color: @bg-base-color;
   padding: 3px 6px;
   line-height: 1.7;
 }
diff --git a/modules/ui/components/Menu.less b/modules/ui/components/Menu.less
index 3af34d7c..43708699 100644
--- a/modules/ui/components/Menu.less
+++ b/modules/ui/components/Menu.less
@@ -39,7 +39,7 @@
 }
 
 .separator {
-  border-top: solid 1px #777;
+  border-top: solid 1px @bg-color-8;
 }
 
 .disabled {
diff --git a/modules/ui/components/TabSwitcher.less b/modules/ui/components/TabSwitcher.less
index 6de7e158..680aaf8e 100644
--- a/modules/ui/components/TabSwitcher.less
+++ b/modules/ui/components/TabSwitcher.less
@@ -15,7 +15,7 @@
     color: @font-color;
   }
   &.active {
-    background-color: @bg-color-alt;
+    background-color: @bg-color-2;
     color: @font-color;
   }
   &:first-child {
diff --git a/modules/ui/components/ToolButton.jsx b/modules/ui/components/ToolButton.jsx
index 96fb9461..36b7ce1d 100644
--- a/modules/ui/components/ToolButton.jsx
+++ b/modules/ui/components/ToolButton.jsx
@@ -3,5 +3,5 @@ import ls from './ToolButton.less';
 import cx from 'classnames';
 
 export default function ToolButton({pressed, type, className, ...props}) {
-  return <button tabIndex="-1" className={cx(ls.root, ls[type], pressed && ls.pressed, className)} {...props}/>;
+  return <button tabIndex="-1" className={cx(ls.root, ls[type], pressed && ls.pressed, className, 'small-typography')} {...props}/>;
 }
diff --git a/modules/ui/components/ToolButton.less b/modules/ui/components/ToolButton.less
index 8fde30d8..48548220 100644
--- a/modules/ui/components/ToolButton.less
+++ b/modules/ui/components/ToolButton.less
@@ -2,25 +2,25 @@
 
 .root {
 
-  border: 1px solid @bg-color;
+  //border: 1px solid @bg-color-6;
   margin: 3px;
   border-radius: 3px;
 
-  padding: 5px 2px;
+  padding: 0.4em 0.3em;
   cursor: pointer;
-  background-color: @bg-color;
-
+  background-color: @bg-color-6;
+  color: @font-color-empph;
   outline: none;
 
   &:hover {
-    background-color: #9c9c9c !important;
-  }     
+    background-color: @bg-color-5 !important;
+  }
   &:active {
     transition: 200ms;
-    background-color: #BFBFBF !important;
+    background-color: @bg-color-7 !important;
   }
   &.pressed {
-    background-color: #7d7d7d;
+    background-color: @color-btn-selected !important;
   }
 }
 
diff --git a/modules/ui/components/Window.less b/modules/ui/components/Window.less
index 4d3038ca..dae50cf6 100644
--- a/modules/ui/components/Window.less
+++ b/modules/ui/components/Window.less
@@ -4,7 +4,7 @@
 .root {
   position: absolute;
   z-index: 1;
-  background-color: @bg-color-alt;
+  background-color: @bg-color-4;
   display: flex;
   flex-direction: column;
   min-width: 100px;
@@ -13,16 +13,15 @@
 }
 
 .mandatoryBorder {
-  border: 5px solid #444444;
+  border: 5px solid @bg-color-4;
 }
 
 .bar {
   display: flex;
   align-items: stretch;
   justify-content: space-between;
-  background-color: @bg-color;
+  background-color: @bg-color-3;
   cursor: default;
-  border-bottom: 1px solid @border-color;
 }
 
 .title {
diff --git a/modules/ui/styles/global/form.less b/modules/ui/styles/global/form.less
index ecfbdc68..1e7f66db 100644
--- a/modules/ui/styles/global/form.less
+++ b/modules/ui/styles/global/form.less
@@ -4,13 +4,13 @@ button, input, select, textarea {
 }
 
 button {
-  padding: 4px 8px;
+  padding: 6px 10px;
   border: 0;
-  background-color: darken(@color-neutral, 10%);
+  background-color: @bg-color-9;
+  font-weight: bold;
   color: @font-color;
   white-space: nowrap;
-  .button-behavior(@color-neutral);
-
+  border-radius: 1px;
 
   &.icon-button {
     display: inline-flex;
diff --git a/modules/ui/styles/global/main.less b/modules/ui/styles/global/main.less
index a8287a86..d46cee9d 100644
--- a/modules/ui/styles/global/main.less
+++ b/modules/ui/styles/global/main.less
@@ -4,7 +4,7 @@ html, pre {
 }
 
 body {
-  background-color: @bg-color;
+  background-color: @bg-base-color;
   color: @font-color;
 }
 
diff --git a/modules/ui/styles/global/tables.less b/modules/ui/styles/global/tables.less
index 9c1d30b8..5f138c57 100644
--- a/modules/ui/styles/global/tables.less
+++ b/modules/ui/styles/global/tables.less
@@ -4,10 +4,10 @@ table {
 
 table.striped {
   & tr:nth-child(even), & th {
-    background-color: @bg-color
+    background-color: @bg-base-color
   }
   & tr:nth-child(odd) {
-    background-color: @bg-color-alt
+    background-color: @bg-color-2
   }
   & tr:hover {
     background-color: @color-highlight;
diff --git a/modules/ui/styles/theme.less b/modules/ui/styles/theme.less
index d26ac087..e6a06744 100644
--- a/modules/ui/styles/theme.less
+++ b/modules/ui/styles/theme.less
@@ -1,13 +1,27 @@
-@bg-color: #000;
-@bg-color-alt: #1a1a1a;
 
-@font-color: #eee;
-@font-color-minor: #ccc;
+@hue-prim: 200;
+@saturation: 6%;
 
-@font-color-suppressed: #aaa;
-@font-color-disabled: #888;
+@bg-color-0: hsl(@hue-prim, @saturation, 7%);
+@bg-color-1: hsl(@hue-prim, @saturation, 12%);
+@bg-color-2: hsl(@hue-prim, @saturation, 17%);
+@bg-color-3: hsl(@hue-prim, @saturation, 23%);
+@bg-color-4: hsl(@hue-prim, @saturation, 28%);
+@bg-color-5: hsl(@hue-prim, @saturation, 33%);
+@bg-color-6: hsl(@hue-prim, @saturation, 38%);
+@bg-color-7: hsl(@hue-prim, @saturation, 43%);
+@bg-color-8: hsl(@hue-prim, @saturation, 48%);
+@bg-color-9: hsl(@hue-prim, @saturation, 53%);
 
-@border-color: #2c2c2c;
+@bg-base-color: @bg-color-1;
+
+@font-color-empph: #fff;
+@font-color: hsl(0, 0, 90%);
+@font-color-minor: hsl(0, 0, 80%);
+@font-color-suppressed: hsl(0, 0, 65%);
+@font-color-disabled: hsl(0, 0, 55%);
+
+@border-color: @bg-color-6;
 
 @control-color-number: #2fa1d6;
 @control-color-text: #9cdaf7;
@@ -21,11 +35,11 @@
 
 @color-danger: #b00;
 @color-accent: #2B7D2B;
+
 @color-neutral: #66727d;
 @color-highlight: #003f5d;
 
-@color-text-highlight: #9cdaf7;
+@color-btn-selected: hsl(@hue-prim, 55%, 46%);
 
+@color-text-highlight: hsl(@hue-prim, 85%, 85%);
 
-//@work-area-toolbar-bg-color: ;
-//@work-area-toolbar-font-color: ;
diff --git a/web/app/cad/dom/components/AppTabs.jsx b/web/app/cad/dom/components/AppTabs.jsx
index 8f66d09d..09875302 100644
--- a/web/app/cad/dom/components/AppTabs.jsx
+++ b/web/app/cad/dom/components/AppTabs.jsx
@@ -40,7 +40,7 @@ export default function AppTabs({}) {
         </Card>)}
     </div>
 
-    <TabSwitcher className={ls.contentSwitcher}>
+    <TabSwitcher className={ls.contentSwitcher + ' small-typography'}>
 
       <Tab label='3D View' active={activeTab < 0} readOnly={true} onSwitch={switchTo.bind(null, -1)}/>
 
diff --git a/web/app/cad/dom/components/FloatView.less b/web/app/cad/dom/components/FloatView.less
index 7b9262b4..fbc99a8b 100644
--- a/web/app/cad/dom/components/FloatView.less
+++ b/web/app/cad/dom/components/FloatView.less
@@ -14,7 +14,7 @@
 .tabs {
   position: relative;
   border-right: 1px solid @border-color;
-  background-color: @bg-color-alt;
+  background-color: @bg-color-2;
   font-size: 13px;
 }
 
diff --git a/web/app/cad/dom/components/View3d.jsx b/web/app/cad/dom/components/View3d.jsx
index 2aa363ae..bd2c8e69 100644
--- a/web/app/cad/dom/components/View3d.jsx
+++ b/web/app/cad/dom/components/View3d.jsx
@@ -39,7 +39,7 @@ export default class View3d extends React.Component {
             <HeadsUpHelper/>
           </div>
 
-          <div className={ls.middleSection}>
+          <div className={ls.middleSection + ' small-typography'}>
             <SketcherMode>
               <InplaceSketcher>
                 <div className={ls.overlayingPanel} >
diff --git a/web/app/cad/expressions/Expressions.less b/web/app/cad/expressions/Expressions.less
index 673906c5..808c681d 100644
--- a/web/app/cad/expressions/Expressions.less
+++ b/web/app/cad/expressions/Expressions.less
@@ -14,7 +14,7 @@ textarea.script {
   color: #C4E1A4;
   padding: 2px;
   outline: none;
-  line-height: 1.8;
+  font-family: Monaco, monospace;
   &:focus {
     border: none;
     background: inherit;
@@ -30,6 +30,9 @@ textarea.script {
 .switcher {
   border-bottom: 1px solid @border-color;
   width: 100%;
+  button {
+    padding: 0.3em 1em 0.3em 0.8em !important;
+  }
 }
 
 .toolBar {