public/assets/css/src/_buttons.scss

@@ -37,7 +37,6 @@
     border: 1px solid currentColor;
     border-radius: calc(var(--input-h));
     font-weight: 500;
-    background-color: var(--color-panel-bg);
 
     &.active{
       background-color: var(--color-interface-400);

public/assets/css/src/_colors.scss

@@ -77,29 +77,29 @@
 
 
 
-[data-color-type="page"]{
+[data-color-type="elem"]{
-  --color-050: #fff4ec;
+    --color-050: #fff4ec;
-  --color-100: #ffe6d6;
+    --color-100: #ffe6d6;
-  --color-200: #ffd7c2;
+    --color-200: #ffd1b5;
-  --color-300: #ffc7ac;
+    --color-300: #ffbc94;
-  --color-400: #ffb38f;
+    --color-400: #ffa673;
-  --color-500: #ffa06f;
+    --color-500: #ff945b;
-  --color-600: #ff8a50; 
+    --color-600: #ff8d54;
-  --color-700: #ff8a50; 
+    --color-700: #f97f46;
-  --color-800: #ea733c; 
+    --color-800: #ff8a50; 
-  --color-900: #d96a30;
+    --color-900: #d96a30;
 }
 
 
-[data-color-type="elem"]{
+[data-color-type="page"]{
-  --color-050: #f4f0ff;
+    --color-050: #f4f0ff;
-  --color-100: #e7e1ff;
+    --color-100: #e7e1ff;
-  --color-200: #dacfff;
+    --color-200: #d4c8ff;
-  --color-300: #c7b8ff;
+    --color-300: #b9a8ff;
-  --color-400: #b19cff;
+    --color-400: #9f89ff;
-  --color-500: #9a80ff;
+    --color-500: #866aff;
-  --color-600: #7136ff; 
+    --color-600: #7a52ff;
-  --color-700: #6930f5;
+    --color-700: #7442ff;
-  --color-800: #5d28e6;
+    --color-800: #7136ff; 
-  --color-900: #5223d6;
+    --color-900: #5223d6;
 }

public/assets/css/src/_forms-section.scss

@@ -12,9 +12,21 @@
 
     font-weight: 600;
     font-size: 1.4rem;
+    // border-radius: var(--border-radius);
+    // height: var(--input-h);
+    // padding: 0 1ch;
+    // display: flex;
+    // align-items: center;
+
+    // color: var(--color-interface-050);
+    // background-color: var(--color-800);
+    // display: inline-block;
+
     border-bottom: 1px solid var(--color-200);
     color: var(--color-800);
 
+//   border-bottom: 2px solid currentColor;
+//   margin-bottom: 2rem;
   }
 
   .infos{
@@ -31,9 +43,10 @@
 
     h3 {
         margin-top: calc(var(--space-xs)*1.5);
-        margin-bottom: calc(var(--space-xs)*2);
+      margin-bottom: calc(var(--space-xs)*2);
-        font-size: 1rem;
+    //   color: var(--color-600);
-        font-weight: 600;
+      font-size: 1rem;
+      font-weight: 600;
 
     }
   }

public/assets/css/src/_forms.scss

@@ -15,6 +15,11 @@ input[type="number"] {
 .field {
   display: flex;
 
+  // label{
+  //   width: var(--label-w);
+  //   background-color: red;
+  //   flex-grow: 3;
+  // }
 
   label {
     font-weight: 600;
@@ -103,6 +108,9 @@ input[type="number"] {
 .checkbox-field{
   margin: calc(var(--space-xs)*2) 0;
   grid-template-columns: 3ch 1fr;
+  label{
+    // font-weight: normal;
+  }
   input{
     justify-self: left;
     margin: 0;

public/assets/css/style.css

@@ -163,29 +163,29 @@
   --color-900: #483c39;
 }
 
-[data-color-type=page] {
+[data-color-type=elem] {
   --color-050: #fff4ec;
   --color-100: #ffe6d6;
-  --color-200: #ffd7c2;
+  --color-200: #ffd1b5;
-  --color-300: #ffc7ac;
+  --color-300: #ffbc94;
-  --color-400: #ffb38f;
+  --color-400: #ffa673;
-  --color-500: #ffa06f;
+  --color-500: #ff945b;
-  --color-600: #ff8a50;
+  --color-600: #ff8d54;
-  --color-700: #ff8a50;
+  --color-700: #f97f46;
-  --color-800: #ea733c;
+  --color-800: #ff8a50;
   --color-900: #d96a30;
 }
 
-[data-color-type=elem] {
+[data-color-type=page] {
   --color-050: #f4f0ff;
   --color-100: #e7e1ff;
-  --color-200: #dacfff;
+  --color-200: #d4c8ff;
-  --color-300: #c7b8ff;
+  --color-300: #b9a8ff;
-  --color-400: #b19cff;
+  --color-400: #9f89ff;
-  --color-500: #9a80ff;
+  --color-500: #866aff;
-  --color-600: #7136ff;
+  --color-600: #7a52ff;
-  --color-700: #6930f5;
+  --color-700: #7442ff;
-  --color-800: #5d28e6;
+  --color-800: #7136ff;
   --color-900: #5223d6;
 }
 
@@ -490,7 +490,6 @@ input[type=number] {
   border: 1px solid currentColor;
   border-radius: calc(var(--input-h));
   font-weight: 500;
-  background-color: var(--color-panel-bg);
 }
 #editor-panel .tabs .tab.active {
   background-color: var(--color-interface-400);