Styling inputs and selects

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

src/renderer/components/input/input.scss

@@ -96,13 +96,13 @@
       }
 
       label {
-        background: #00000021;
+        background: var(--inputControlBackground);
-        border: 1px solid #202225bf;
+        border: 1px solid var(--inputControlBorder);
         border-radius: 4px;
         padding: $padding;
 
         &:hover {
-          border-color: #07080880;
+          border-color: var(--inputControlHoverBorder);
         }
 
         &:focus-within {

src/renderer/components/layout/page-layout.scss

@@ -35,7 +35,7 @@
     right: 0;
     bottom: 0;
     height: unset;
-    background-color: var(--mainBackground);
+    background-color: var(--settingsBackground);
   }
 
   > .sidebarRegion {
@@ -79,12 +79,12 @@
           }
 
           &:hover {
-            background-color: #4f545c29;
+            background-color: var(--navHoverBackground);
-            color: #dcddde;
+            color: var(--navHoverColor);
           }
 
           &.active {
-            background-color: #4f545c52;
+            background-color: var(--navSelectedBackground);
           }
         }
       }
@@ -143,25 +143,6 @@
     color: var(--colorInfo);
   }
 
-  .Select {
-    &__control {
-      box-shadow: 0 0 0 1px #202225bf;
-      background: #00000021;
-    }
-
-    :hover {
-      &.Select__control {
-        box-shadow: 0 0 0 1px #07080880;
-      }
-    }
-
-    :focus-within {
-      &.Select__control {
-        box-shadow: 0 0 0 1px $colorInfo;
-      }
-    }
-  }
-
   section {
     display: flex;
     flex-direction: column;
@@ -202,7 +183,7 @@
     hr {
       margin-top: 40px;
       height: 1px;
-      border-top: thin solid #ffffff0f;
+      border-top: thin solid var(--hrColor);
 
       &.small {
         margin-top: 20px;

src/renderer/components/select/select.scss

@@ -5,8 +5,7 @@ html {
   $menuBackgroundColor: $contentColor;
 
   --select-menu-bgc: #{$menuBackgroundColor};
-  --select-menu-border-color: #{$halfGray};
+  --select-option-selected-color: #{$inputOptionHoverColor};
-  --select-option-selected-color: #{$selectOptionHoveredColor};
   --select-option-focused-bgc: #{$colorInfo};
   --select-option-focused-color: #{$textColorAccent};
 
@@ -14,6 +13,18 @@ html {
     position: relative;
     min-width: 220px;
 
+    :hover {
+      &.Select__control {
+        box-shadow: 0 0 0 1px var(--inputControlHoverBorder);
+      }
+    }
+
+    :focus-within {
+      &.Select__control {
+        box-shadow: 0 0 0 1px $colorInfo;
+      }
+    }
+
     * {
       color: inherit;
     }
@@ -29,11 +40,12 @@ html {
       border-radius: $radius;
       background: transparent;
       min-height: 0;
-      box-shadow: 0 0 0 1px $halfGray;
+      box-shadow: 0 0 0 1px var(--inputControlBorder); // TODO: make theme-aware colors
+      background: var(--inputControlBackground);
       cursor: pointer;
 
       &--is-focused {
-        box-shadow: 0 0 0 2px $primary;
+        box-shadow: 0 0 0 1px $primary;
       }
     }
 
@@ -68,13 +80,12 @@ html {
 
     &__menu {
       background: var(--select-menu-bgc);
-      box-shadow: inset 0 0 0 1px var(--select-menu-border-color);
+      box-shadow: inset 0 0 0 1px var(--inputControlHoverBorder);
       width: max-content;
       min-width: 100%;
 
       &-list {
-        padding-right: 1px;
+        padding: 6px;
-        padding-left: 1px;
         width: max-content;
         min-width: 100%;
       }
@@ -87,19 +98,19 @@ html {
     &__option {
       white-space: nowrap;
       cursor: pointer;
+      border-radius: 4px;
 
       &:active {
-        background: $primary;
+        background: var(--inputControlBackground);
       }
 
       &--is-selected {
-        background: var(--menuSelectedOptionBgc);
+        background: var(--inputControlBackground);
-        color: var(--select-option-selected-color);
+        color: var(--textColorAccent);
       }
 
       &--is-focused {
-        color: var(--select-option-focused-color);
+        background: var(--inputControlBackground);
-        background: var(--select-option-focused-bgc);
       }
 
       &--is-disabled {
@@ -143,32 +154,6 @@ html {
   }
 
   .Select, .Select__menu {
-    &.theme-light {
-      --select-menu-bgc: white;
-      --select-option-selected-color: $textColorSecondary;
-
-      .Select {
-        &__multi-value {
-          background: none;
-          box-shadow: 0 0 0 1px $textColorSecondary;
-        }
-
-        &__option {
-          &:active {
-            color: white;
-          }
-
-          &:hover {
-            color: white;
-          }
-
-          &--is-focused {
-            color: white;
-          }
-        }
-      }
-    }
-
     &.theme-outlined {
       .Select__control {
         box-shadow: 0 0 0 1px $colorVague;

src/renderer/themes/lens-dark.json

@@ -114,11 +114,19 @@
     "chartStripesColor": "#ffffff08",
     "chartCapacityColor": "#4c545f",
     "pieChartDefaultColor": "#30353a",
-    "selectOptionHoveredColor": "#87909c",
+    "inputOptionHoverColor": "#87909c",
+    "inputControlBackground": "#00000021",
+    "inputControlBorder": "#202225bf",
+    "inputControlHoverBorder": "#07080880",
     "lineProgressBackground": "#414448",
     "radioActiveBackground": "#36393e",
     "menuActiveBackground": "#36393e",
     "menuSelectedOptionBgc": "#36393e",
-    "scrollBarColor": "#5f6064"
+    "scrollBarColor": "#5f6064",
+    "settingsBackground": "#2b3035",
+    "navSelectedBackground": "#4f545c52",
+    "navHoverBackground": "#4f545c29",
+    "navHoverColor": "#dcddde",
+    "hrColor": "#ffffff0f"
   }
 }

src/renderer/themes/lens-light.json

@@ -115,12 +115,20 @@
     "chartStripesColor": "#00000009",
     "chartCapacityColor": "#cccccc",
     "pieChartDefaultColor": "#efefef",
-    "selectOptionHoveredColor": "#ffffff",
+    "inputOptionHoverColor": "#ffffff",
+    "inputControlBackground": "#f6f6f7",
+    "inputControlBorder": "#cccdcf",
+    "inputControlHoverBorder": "#b9bbbe",
     "lineProgressBackground": "#e8e8e8",
     "radioActiveBackground": "#f1f1f1",
     "menuActiveBackground": "#e8e8e8",
     "menuSelectedOptionBgc": "#e8e8e8",
     "scrollBarColor": "#bbbbbb",
-    "canvasBackground": "#24292e"
+    "canvasBackground": "#24292e",
+    "settingsBackground": "#ffffff",
+    "navSelectedBackground": "#747f8d3d",
+    "navHoverBackground": "#747f8d14",
+    "navHoverColor": "#2e3135",
+    "hrColor": "#06060714"
   }
 }

src/renderer/themes/theme-vars.scss

@@ -128,7 +128,7 @@ $iconActiveColor: var(--iconActiveColor);
 $iconActiveBackground: var(--iconActiveBackground);
 $filterAreaBackground: var(--filterAreaBackground);
 
-$selectOptionHoveredColor: var(--selectOptionHoveredColor);
+$inputOptionHoverColor: var(--inputOptionHoverColor);
 $lineProgressBackground: var(--lineProgressBackground);
 $radioActiveBackground: var(--radioActiveBackground);
 $menuActiveBackground: var(--menuActiveBackground);