update colors

zero.Web.UI/App/components/forms/form-header.vue

@@ -73,7 +73,7 @@
     align-items: center;
     padding: 0 14px 0 20px;
     height: 42px;
-    /*background: var(--color-box);
+    /*background: var(--color-bg-bright);
     color: var(--color-fg);
     border: none;
     box-shadow: var(--color-shadow-short);

zero.Web.UI/App/components/forms/input-list.vue

@@ -95,6 +95,8 @@
   {
     display: grid;
     grid-template-columns: 1fr auto;
+    background: var(--color-bg-dim);
+    border-radius: var(--radius);
 
     & + .ui-input-list-item, & + .ui-button
     {
@@ -104,7 +106,6 @@
     .ui-input
     {
       border-radius: var(--radius) 0 0 var(--radius);
-      border-right: none;
     }
 
     .ui-icon-button
@@ -112,7 +113,6 @@
       border-radius: 0 var(--radius) var(--radius) 0;
       height: 42px;
       width: 42px;
-      border: 1px solid var(--color-line);
       border-left: none;
       background: transparent !important;
     }

zero.Web.UI/App/components/forms/media-old.vue

@@ -444,7 +444,7 @@
     line-height: 26px;
     border-radius: 20px;
     background: var(--color-negative);
-    color: var(--color-secondary-fg);
+    color: var(--color-primary-fg);
     z-index: 2;
     text-align: center;
     font-size: 13px;

zero.Web.UI/App/components/forms/property.vue

@@ -52,7 +52,7 @@
   {
     padding-top: 30px;
     margin-top: 30px;
-    border-top: 1px solid var(--color-line-light);
+    //border-top: 1px solid var(--color-line);
   }
 
   .ui-property.is-vertical
@@ -107,7 +107,7 @@
     font-weight: 400;
     line-height: 1.4;
     text-decoration: none;
-    color: var(--color-fg-light);
+    color: var(--color-fg-dim);
     letter-spacing: 0.3px;
 
     &:empty
@@ -118,7 +118,7 @@
 
   .ui-property-required
   {
-    color: var(--color-negative);
+    color: var(--color-fg-dim);
     margin-left: 0.2em;
     font-weight: 400;
   }
@@ -134,7 +134,7 @@
   {
     max-width: 800px;
     font-size: var(--font-size-xs);
-    color: var(--color-fg-light);
+    color: var(--color-fg-dim);
     margin: 15px 0 0;
     letter-spacing: 0.3px;
 
@@ -142,7 +142,7 @@
     {
       content: "\e87f";
       @extend %font-icon;
-      color: var(--color-secondary);
+      color: var(--color-primary);
       font-size: var(--font-size-l);
       float: left;
       position: relative;

zero.Web.UI/App/components/forms/rte.vue

@@ -135,8 +135,7 @@
     .pell,
     .pell-raw
     {
-      border: 1px solid var(--color-line);
-      background: var(--color-bg-light);
+      background: var(--color-bg-dim);
       max-width: 800px;
       min-height: 42px;
       display: flex;
@@ -195,7 +194,7 @@
 
     .pell-actionbar
     {
-      background: var(--color-bg-light);
+      background: var(--color-bg-dim);
       border-radius: var(--radius) var(--radius) 0 0;
       padding: 5px;
     }
@@ -221,13 +220,13 @@
 
     .pell-button:hover
     {
-      background: var(--color-bg);
+      background: var(--color-bg-bright);
     }
 
     .pell-button-selected
     {
-      background-color: var(--color-highlight);
-      color: var(--color-secondary);
+      background-color: var(--color-bg-bright-two);
+      color: var(--color-primary);
     }
   }
 </style>

zero.Web.UI/App/components/forms/search.vue

@@ -60,6 +60,7 @@
       padding-right: 40px;
       border: none;
       box-shadow: var(--color-shadow-short);
+      background: var(--color-bg-bright-two);
     }
 
     .ui-searchinput-button

zero.Web.UI/App/components/forms/toggle.vue

@@ -100,46 +100,37 @@
     }
   }
 
-  .ui-toggle-switch
+  .ui-toggle-switch 
   {
     display: inline-block;
     height: 22px;
     width: 36px;
-    background: var(--color-bg);
-    border: 1px solid var(--color-line);
+    background: var(--color-bg-bright-three);
     border-radius: 20px;
     transition: all 0.2s ease;
     z-index: 1;
     pointer-events: none;
+
     i
     {
       display: inline-block;
       height: 16px;
       width: 16px;
       border-radius: 20px;
-      margin: 2px;
-      background: var(--color-bg-dark);
+      margin: 3px;
+      background: var(--color-fg);
       transition: all 0.2s ease;
     }
 
     &.is-active
     {
-      /*background: var(--color-secondary);
-      transform: translateX(18px);*/
-      background: var(--color-secondary);
-      border-color: transparent;
+      background: var(--color-primary);
+    }
 
-      i
-      {
-        background: var(--color-secondary-fg);
-        transform: translateX(14px);
-      }
-
-      /*.is-primary &
-      {
-        background: var(--color-primary);
-        box-shadow: 0 0 0 4px var(--color-primary-low);
-      }*/
+    &.is-active  i
+    {
+      background: var(--color-primary-fg);
+      transform: translateX(14px);
     }
   }
 
@@ -147,9 +138,4 @@
   {
     background: var(--color-negative);
   }
-
-  /*.ui-toggle.is-disabled .ui-toggle-switch i
-  {
-    background: var(--color-bg-dark);
-  }*/
 </style>