component nav tidy up

packages/builder/src/common/PlusButton.svelte

@@ -8,8 +8,6 @@
     outline: none;
     border: none;
     border-radius: 5px;
-    background: rgba(249, 249, 249, 1);
-
     min-width: 1.8rem;
     min-height: 1.8rem;
     padding-bottom: 10px;
@@ -20,6 +18,6 @@
 
     font-size: 1.2rem;
     font-weight: 700;
-    color: rgba(22, 48, 87, 1);
+    color: var(--secondary100);
   }
 </style>

packages/builder/src/common/Select.svelte

@@ -23,11 +23,11 @@
   }
 
   select {
-    height: 35px;
+    height: 40px;
     display: block;
     font-family: sans-serif;
-    font-weight: 500;
-    color: #163057;
+    font-weight: 400;
+    color: #000333;
     padding: 0 2.6em 0em 1.4em;
     width: 100%;
     max-width: 100%;
@@ -36,8 +36,7 @@
     -moz-appearance: none;
     -webkit-appearance: none;
     appearance: none;
-    background: #fff;
-    border: 1px solid #ccc;
+    background: var(--lightslate);
   }
 
   .arrow {

packages/builder/src/global.css

@@ -36,8 +36,8 @@
 
     --white: #FFFFFF;
     --darkslate: #1a202c;
-    --slate: #a0aec0;
-    --lightslate: #f7fafc;
+    --slate: #d8d8d8;
+    --lightslate: #f9f9f9;
 
     --borderradius: 2px;
     --borderradiusall: 2px 2px 2px 2px;
@@ -56,7 +56,7 @@
     --quotation: var(--fontnormal) "italics" var(--darkslate) 16pt;
     --smallheavybodytext: var(--fontbold) "regular" var(--secondary100) 14pt;
 
-    --background-button: #e6eeff;
+    --background-button: #f9f9f9;
     --button-text: #0055ff;
 }
 

packages/builder/src/userInterface/ComponentSelectionList.svelte

@@ -239,12 +239,12 @@
     position: relative;
     padding: 0 15px;
     cursor: pointer;
-    border: 1px solid #ebebeb;
+    border: 1px solid #d8d8d8;
     border-radius: 2px;
     margin: 5px 0;
     height: 40px;
     box-sizing: border-box;
-    color: #163057;
+    color: #000333;
     display: flex;
     align-items: center;
     flex: 1;
@@ -256,11 +256,10 @@
   }
 
   .component > .name {
-    color: #163057;
+    color: #000333;
     display: inline-block;
     font-size: 12px;
-    font-weight: bold;
-    opacity: 0.6;
+    opacity: 0.8;
   }
 
   ul {
@@ -279,12 +278,11 @@
     background: #fafafa;
     padding: 10px;
     border-radius: 2px;
-    color: rgba(22, 48, 87, 0.6);
+    color:var(--secondary80);
   }
 
   .preset-menu > span {
     font-size: 12px;
-    font-weight: bold;
     text-transform: uppercase;
     margin-top: 5px;
   }

packages/builder/src/userInterface/ComponentsPaneSwitcher.svelte

@@ -54,14 +54,15 @@
     height: 100%;
     display: flex;
     flex-direction: column;
-    padding: 2rem 0;
+    padding: 20px 0;
   }
 
   .switcher {
     display: flex;
     justify-content: space-between;
-    margin-bottom: 25px;
-    padding: 0 1.5rem;
+    margin-bottom: 20px;
+    padding: 0 20px 20px;
+    border-bottom: 1px solid #d8d8d8;
   }
 
   .switcher > button {
@@ -70,15 +71,15 @@
     margin: 0;
     padding: 0;
     cursor: pointer;
-    font-weight: 600;
     font-size: 0.85rem;
+    font-weight: 400;
     text-transform: uppercase;
-    color: #999;
-    background-color: rgba(0, 0, 0, 0);
+    color: var(--secondary60);
   }
 
   .switcher > .selected {
-    color: #333;
+    color: var(--secondary100);
+    font-weight: 500;
   }
 
   .panel {