refactor(uip-settings): draft attempt to rework settings section styl…

…es (layouts, themes, compact mode)

src/plugins/registration.less

@@ -1,5 +1,7 @@
 @import './header/header.less';
 @import './header/snippets/snippets.less';
 @import './header/options/options.less';
+
+@import "./copy/uip-copy.less";
 @import './editor/editor.less';
 @import './settings/settings.less';

src/plugins/settings/settings.horizontal.less

@@ -34,6 +34,10 @@
     width: 100%;
     border-top: 1px solid var(--uip-settings-divider, transparent);
     border-bottom: 1px solid var(--uip-settings-divider, transparent);
+
+    &-icon {
+      margin-inline-end: 5px;
+    }
   }
 
   .uip-settings-inner {

src/plugins/settings/settings.less

@@ -2,6 +2,8 @@
 @import (reference) '../../common/variables.less';
 
 html {
+  --uip-settings-fg: #000;
+  --uip-settings-bg: #f5f2f0;
   --uip-settings-divider: #ccc;
   --uip-settings-divider-v: @section-border;
   --uip-settings-header-bg: #ccc;
@@ -15,15 +17,17 @@ uip-settings {
   grid-area: sidebar;
 
   display: flex;
-  overflow: auto;
-  accent-color: @dark-text;
+  accent-color: var(--uip-settings-fg, #000);
 
   &-inner {
     flex: 1 1 auto;
     display: flex;
     position: relative;
     overflow: hidden;
     padding: 0;
+
+    color: var(--uip-editor-fg);
+    background: var(--uip-editor-bg);
   }
 
   &-container {
@@ -61,6 +65,7 @@ uip-settings {
     &-title:not(:empty) {
       flex: 1 1 auto;
       padding: 5px;
+      line-height: 1em;
     }
 
     &-trigger {
@@ -79,13 +84,19 @@ uip-settings {
 
     &-icon {
       display: inline-flex;
-      width: 1.25rem;
+      width: 1.5rem;
       height: 1.25rem;
       margin-block: -5px;
       transform-origin: center center;
+
+      > svg {
+        fill: currentColor;
+        stroke: currentColor;
+      }
     }
   }
 }
 
 @import "./settings.vertical.less";
 @import "./settings.horizontal.less";
+@import "./settings.themes.less";

src/plugins/settings/settings.themes.less

@@ -0,0 +1,7 @@
+[dark-theme] {
+  --uip-settings-fg: #ccc;
+  --uip-settings-bg: #2f2f2f;
+  --uip-settings-divider: #ebebeb;
+  --uip-settings-header-bg: #2f2f2f;
+  --uip-settings-header-fg: #ccc;
+}

src/plugins/settings/settings.vertical.less

@@ -31,8 +31,11 @@
   }
 
   .uip-settings-header {
-    border-left: 1px solid var(--uip-settings-divider-v, transparent);
-    border-right: 1px solid var(--uip-settings-divider-v, transparent);
+    border-inline-end: 1px solid var(--uip-settings-divider-v, transparent);
+  }
+
+  .uip-editor-compact & .uip-settings-header {
+    margin-bottom: -30px;
   }
 
   .uip-settings-header-title {

src/plugins/settings/slider-setting/slider-setting.less

@@ -4,8 +4,36 @@
     width: 100%;
   }
 
+  input[type="range"] {
+    -webkit-appearance: none;
+    margin: 10px 0 5px;
+    height: 10px;
+    background: var(--uip-settings-bg, #000);
+    border: 1px solid var(--uip-settings-fg, #ccc);
+    border-radius: 5px;
+  }
+
+  input[type="range"]::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    height: 15px;
+    width: 15px;
+    border-radius: 50%;
+    background:var(--uip-settings-fg, #000);
+    cursor: ew-resize;
+    transition: background .1s linear;
+  }
+
+  input[type=range]::-webkit-slider-runnable-track  {
+    -webkit-appearance: none;
+    box-shadow: none;
+    border: none;
+    background: transparent;
+  }
+
+
   .slider-value {
-    color: gray;
+    opacity: 0.8;
+    color: var(--uip-settings-fg, #000);
 
     &.disabled {
       font-size: 14px;

src/plugins/settings/text-setting/text-setting.less

@@ -4,5 +4,8 @@
   width: 100%;
   padding: 3px 1px 1px;
   font-size: 16px;
-  color: @dark-text;
+  color: var(--uip-settings-fg, #000);
+  background: transparent;
+  border: 1px solid var(--uip-settings-fg, #000);
+  box-shadow: none;
 }