formeo 5.1.2 → 5.2.0

package/dist/formeo.css

@@ -1,10 +1,111 @@
 
 /**
 formeo - https://formeo.io
-Version: 5.1.1
+Version: 5.1.3
 Author: Draggable https://draggable.io
 */
 
+:where(:root) {
+  --formeo-bg: #fff;
+  --formeo-bg-hover: rgb(242.25, 242.25, 242.25);
+  --formeo-surface-muted: rgb(229.5, 229.5, 229.5);
+  --formeo-stage-bg: rgba(255, 255, 255, 0);
+  --formeo-stage-shadow: rgba(255, 255, 255, 0.25);
+  --formeo-overlay: rgba(255, 255, 255, 0.9);
+  --formeo-text: #000;
+  --formeo-text-strong: rgb(25.5, 25.5, 25.5);
+  --formeo-text-secondary: #333333;
+  --formeo-text-muted: #666666;
+  --formeo-text-subtle: #999999;
+  --formeo-on-accent: #fff;
+  --formeo-icon: #000;
+  --formeo-border: #cccccc;
+  --formeo-border-strong: #999999;
+  --formeo-focus: rgb(102, 175, 233);
+  --formeo-primary: rgb(50, 93, 136);
+  --formeo-primary-dark: rgb(36.2903225806, 67.5, 98.7096774194);
+  --formeo-success: rgb(147, 197, 75);
+  --formeo-success-dark: rgb(120.7142857143, 167.1428571429, 53.8571428571);
+  --formeo-warning: rgb(244, 124, 60);
+  --formeo-warning-dark: rgb(239.4902912621, 92.1116504854, 13.5097087379);
+  --formeo-danger: rgb(217, 83, 79);
+  --formeo-danger-dark: rgb(201.4953271028, 48.0841121495, 43.5046728972);
+  --formeo-danger-subtle: rgba(217, 83, 79, 0.1);
+  --formeo-info: rgb(153, 84, 187);
+  --formeo-remove-bg: rgba(217, 83, 79, 0.25);
+  --formeo-column-outline-soft: rgb(238.4265402844, 183.3516587678, 137.0734597156);
+  --formeo-stage-outline: #4F46E5;
+  --formeo-stage-outline-text: #f9fafb;
+  --formeo-stage-highlight: rgb(185.3507109005, 181.7890995261, 244.7109004739);
+  --formeo-stage-highlight-text: #111827;
+  --formeo-row-outline: rgb(229, 70, 188.2);
+  --formeo-row-outline-text: #f9fafb;
+  --formeo-row-highlight: rgb(244.7109004739, 181.7890995261, 228.56492891);
+  --formeo-row-highlight-text: #111827;
+  --formeo-column-outline: rgb(229, 142.6, 70);
+  --formeo-column-outline-text: #111827;
+  --formeo-column-highlight: rgb(244.7109004739, 210.5194312796, 181.7890995261);
+  --formeo-column-highlight-text: #111827;
+  --formeo-field-outline: rgb(124.6, 229, 70);
+  --formeo-field-outline-text: #111827;
+  --formeo-field-highlight: rgb(203.3962085308, 244.7109004739, 181.7890995261);
+  --formeo-field-highlight-text: #111827;
+  --formeo-option-outline: rgb(70, 229, 206.2);
+  --formeo-option-outline-text: #111827;
+  --formeo-option-highlight: rgb(181.7890995261, 244.7109004739, 235.6881516588);
+  --formeo-option-highlight-text: #111827;
+}
+
+:where(.formeo-dark) {
+  color-scheme: dark;
+  --formeo-bg: #1f1f23;
+  --formeo-bg-hover: #2a2a2f;
+  --formeo-surface-muted: #26262b;
+  --formeo-stage-bg: rgba(0, 0, 0, 0);
+  --formeo-stage-shadow: rgba(0, 0, 0, 0.25);
+  --formeo-overlay: rgba(31, 31, 35, 0.9);
+  --formeo-text: #f4f4f5;
+  --formeo-text-strong: #e4e4e7;
+  --formeo-text-secondary: #d4d4d8;
+  --formeo-text-muted: #a1a1aa;
+  --formeo-text-subtle: #71717a;
+  --formeo-icon: #e4e4e7;
+  --formeo-border: #3f3f46;
+  --formeo-border-strong: #52525b;
+  --formeo-danger-subtle: rgba(217, 83, 79, 0.2);
+  --formeo-remove-bg: rgba(217, 83, 79, 0.35);
+  --formeo-stage-highlight: rgba(79, 70, 229, 0.25);
+  --formeo-stage-highlight-text: #f4f4f5;
+  --formeo-row-highlight: rgba(229, 70, 188.2, 0.25);
+  --formeo-row-highlight-text: #f4f4f5;
+  --formeo-column-highlight: rgba(229, 142.6, 70, 0.25);
+  --formeo-column-highlight-text: #f4f4f5;
+  --formeo-field-highlight: rgba(124.6, 229, 70, 0.25);
+  --formeo-field-highlight-text: #f4f4f5;
+  --formeo-option-highlight: rgba(70, 229, 206.2, 0.25);
+  --formeo-option-highlight-text: #f4f4f5;
+}
+
+:where(.formeo-dark) :where(.formeo, .formeo-controls, .formeo-dialog),
+:where(.formeo-dark):where(.formeo, .formeo-controls, .formeo-dialog) {
+  color: var(--formeo-text);
+}
+
+.formeo-dark .formeo.formeo-editor .conditions-prop-inputs label.condition-label.then-condition-label,
+.formeo-dark.formeo.formeo-editor .conditions-prop-inputs label.condition-label.then-condition-label {
+  background-color: var(--formeo-border-strong);
+}
+
+:where(.formeo-dark) :where(.formeo-dialog),
+:where(.formeo-dark):where(.formeo-dialog) {
+  background-color: var(--formeo-bg);
+  color: var(--formeo-text);
+}
+
+:where(.editing-field) {
+  background-color: var(--formeo-bg);
+}
+
 /*
   Mixins
 */
@@ -15,36 +116,41 @@ Author: Draggable https://draggable.io
   pointer-events: none;
 }
 
+:where(.svg-icon) {
+  fill: var(--formeo-icon);
+  color: var(--formeo-icon);
+}
+
 .f-i-remove:hover {
-  fill: rgb(217, 83, 79);
+  fill: var(--formeo-danger);
 }
 
 button[class*=-move]:hover {
-  background-color: rgb(153, 84, 187) !important;
+  background-color: var(--formeo-info) !important;
 }
 button[class*=-move]:hover .svg-icon {
-  fill: #fff;
+  fill: var(--formeo-on-accent);
 }
 
 button[class*=-remove]:hover {
-  background-color: rgb(217, 83, 79) !important;
+  background-color: var(--formeo-danger) !important;
 }
 button[class*=-remove]:hover .svg-icon {
-  fill: #fff;
+  fill: var(--formeo-on-accent);
 }
 
 button[class*=-clone]:hover {
-  background-color: rgb(147, 197, 75) !important;
+  background-color: var(--formeo-success) !important;
 }
 button[class*=-clone]:hover .svg-icon {
-  fill: #fff;
+  fill: var(--formeo-on-accent);
 }
 
 .edit-toggle:hover {
-  background-color: rgb(50, 93, 136) !important;
+  background-color: var(--formeo-primary) !important;
 }
 .edit-toggle:hover .svg-icon {
-  fill: #fff;
+  fill: var(--formeo-on-accent);
 }
 
 .f-autocomplete {
@@ -56,7 +162,7 @@ button[class*=-clone]:hover .svg-icon {
 }
 
 .f-autocomplete-list {
-  background-color: #fff;
+  background-color: var(--formeo-bg);
   display: none;
   list-style: none;
   padding: 0;
@@ -64,13 +170,13 @@ button[class*=-clone]:hover .svg-icon {
   z-index: 2;
   width: 100%;
   margin: 0 -1px;
-  border: 1px solid #999999;
+  border: 1px solid var(--formeo-border-strong);
   border-width: 1px 1px 0;
   box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.5);
 }
 .f-autocomplete-list li {
   position: relative;
-  border: 1px solid #999999;
+  border: 1px solid var(--formeo-border-strong);
   display: none;
   cursor: default;
   padding: 4px;
@@ -90,50 +196,50 @@ button[class*=-clone]:hover .svg-icon {
   padding-left: 16px;
 }
 .f-autocomplete-list li.active-option.component-type-stage {
-  background-color: #4F46E5;
-  color: #f9fafb;
+  background-color: var(--formeo-stage-outline);
+  color: var(--formeo-stage-outline-text);
 }
 .f-autocomplete-list li.active-option.component-type-row {
-  background-color: rgb(229, 70, 188.2);
-  color: #f9fafb;
+  background-color: var(--formeo-row-outline);
+  color: var(--formeo-row-outline-text);
 }
 .f-autocomplete-list li.active-option.component-type-column {
-  background-color: rgb(229, 142.6, 70);
-  color: #111827;
+  background-color: var(--formeo-column-outline);
+  color: var(--formeo-column-outline-text);
 }
 .f-autocomplete-list li.active-option.component-type-field {
-  background-color: rgb(124.6, 229, 70);
-  color: #111827;
+  background-color: var(--formeo-field-outline);
+  color: var(--formeo-field-outline-text);
 }
 .f-autocomplete-list li.active-option.component-type-option {
-  background-color: rgb(70, 229, 206.2);
-  color: #111827;
+  background-color: var(--formeo-option-outline);
+  color: var(--formeo-option-outline-text);
 }
 .f-autocomplete-list li:hover.component-type-stage {
-  background-color: rgb(185.3507109005, 181.7890995261, 244.7109004739);
-  color: #111827;
+  background-color: var(--formeo-stage-highlight);
+  color: var(--formeo-stage-highlight-text);
 }
 .f-autocomplete-list li:hover.component-type-row {
-  background-color: rgb(244.7109004739, 181.7890995261, 228.56492891);
-  color: #111827;
+  background-color: var(--formeo-row-highlight);
+  color: var(--formeo-row-highlight-text);
 }
 .f-autocomplete-list li:hover.component-type-column {
-  background-color: rgb(244.7109004739, 210.5194312796, 181.7890995261);
-  color: #111827;
+  background-color: var(--formeo-column-highlight);
+  color: var(--formeo-column-highlight-text);
 }
 .f-autocomplete-list li:hover.component-type-field {
-  background-color: rgb(203.3962085308, 244.7109004739, 181.7890995261);
-  color: #111827;
+  background-color: var(--formeo-field-highlight);
+  color: var(--formeo-field-highlight-text);
 }
 .f-autocomplete-list li:hover.component-type-option {
-  background-color: rgb(181.7890995261, 244.7109004739, 235.6881516588);
-  color: #111827;
+  background-color: var(--formeo-option-highlight);
+  color: var(--formeo-option-highlight-text);
 }
 .f-autocomplete-list li:has(.options-list):hover .options-list {
   display: block;
 }
 .f-autocomplete-list .component-type {
-  color: #666666;
+  color: var(--formeo-text-muted);
   font-style: italic;
   font-size: 0.75em;
 }
@@ -150,7 +256,7 @@ button[class*=-clone]:hover .svg-icon {
 .formeo-panels-wrap h5 {
   margin: 0;
   padding: 0.55em 0;
-  color: #666666;
+  color: var(--formeo-text-muted);
   font-weight: normal;
   display: inline-block;
   width: 100%;
@@ -163,7 +269,7 @@ button[class*=-clone]:hover .svg-icon {
 .formeo-panels-wrap nav button {
   position: absolute;
   width: 24px;
-  color: #000;
+  color: var(--formeo-text);
   height: 100%;
   padding: 0;
   line-height: 0;
@@ -171,7 +277,7 @@ button[class*=-clone]:hover .svg-icon {
 }
 .formeo-panels-wrap nav button:focus {
   outline: none;
-  border: 1px solid rgb(102, 175, 233);
+  border: 1px solid var(--formeo-focus);
   box-shadow: none;
 }
 .formeo-panels-wrap nav button .svg-icon {
@@ -216,7 +322,7 @@ button[class*=-clone]:hover .svg-icon {
 }
 .formeo-panels-wrap .panel-labels {
   height: 100%;
-  background: #fff;
+  background: var(--formeo-bg);
   overflow: hidden;
   text-align: center;
   white-space: nowrap;
@@ -243,13 +349,13 @@ button[class*=-clone]:hover .svg-icon {
   flex-direction: column;
   flex: 1;
   cursor: pointer;
-  background-color: #cccccc;
-  box-shadow: 0 -1px 8px #999999 inset;
+  background-color: var(--formeo-border);
+  box-shadow: 0 -1px 8px var(--formeo-border-strong) inset;
 }
 .tabbed-panels .panel-labels h5.active-tab {
-  color: #000;
+  color: var(--formeo-text);
   box-shadow: none;
-  background-color: #fff;
+  background-color: var(--formeo-bg);
 }
 
 .formeo-dialog {
@@ -291,7 +397,7 @@ button[class*=-clone]:hover .svg-icon {
   margin: 0;
   font-size: 1.25rem;
   font-weight: 600;
-  color: rgb(25.5, 25.5, 25.5);
+  color: var(--formeo-text-strong);
 }
 .formeo-dialog .dialog-body {
   display: flex;
@@ -304,26 +410,26 @@ button[class*=-clone]:hover .svg-icon {
   gap: 4px;
   font-weight: 500;
   font-size: 0.9rem;
-  color: #333333;
+  color: var(--formeo-text-secondary);
 }
 .formeo-dialog .dialog-body label input,
 .formeo-dialog .dialog-body label textarea,
 .formeo-dialog .dialog-body label select {
   padding: 0.3em 0.6em;
-  border: 1px solid #cccccc;
+  border: 1px solid var(--formeo-border);
   border-radius: 4px;
   font-size: 1rem;
 }
 .formeo-dialog .dialog-body label input:focus,
 .formeo-dialog .dialog-body label textarea:focus,
 .formeo-dialog .dialog-body label select:focus {
-  outline: 2px solid rgb(50, 93, 136);
+  outline: 2px solid var(--formeo-primary);
   outline-offset: 0;
 }
 .formeo-dialog .dialog-message {
   margin: 0;
   line-height: 1.6;
-  color: rgb(25.5, 25.5, 25.5);
+  color: var(--formeo-text-strong);
 }
 .formeo-dialog .dialog-prompt-label .dialog-message {
   margin-bottom: 4px;
@@ -416,7 +522,7 @@ button[class*=-clone]:hover .svg-icon {
   margin-top: 1rem;
   margin-bottom: 1rem;
   border: 0;
-  border-top: 1px solid #cccccc;
+  border-top: 1px solid var(--formeo-border);
 }
 .formeo .f-field-group {
   flex-wrap: wrap;
@@ -441,15 +547,15 @@ button[class*=-clone]:hover .svg-icon {
   height: 2.1em;
   line-height: 1.5;
   margin: 0;
-  border: 1px solid #cccccc;
+  border: 1px solid var(--formeo-border);
   border-radius: 4px;
-  background-color: #fff;
+  background-color: var(--formeo-bg);
   width: 100%;
   padding: 0.3em 0.6em;
   box-sizing: border-box;
 }
 .formeo select:focus {
-  border: 1px solid rgb(102, 175, 233);
+  border: 1px solid var(--formeo-focus);
   outline: none;
 }
 .formeo select[multiple] {
@@ -461,15 +567,15 @@ button[class*=-clone]:hover .svg-icon {
   height: 2.1em;
   line-height: 1.5;
   margin: 0;
-  border: 1px solid #cccccc;
+  border: 1px solid var(--formeo-border);
   border-radius: 4px;
-  background-color: #fff;
+  background-color: var(--formeo-bg);
   width: 100%;
   padding: 0.3em 0.6em;
   box-sizing: border-box;
 }
 .formeo input:focus {
-  border: 1px solid rgb(102, 175, 233);
+  border: 1px solid var(--formeo-focus);
   outline: none;
 }
 .formeo input[type=checkbox], .formeo input[type=radio] {
@@ -487,15 +593,15 @@ button[class*=-clone]:hover .svg-icon {
   height: 2.1em;
   line-height: 1.5;
   margin: 0;
-  border: 1px solid #cccccc;
+  border: 1px solid var(--formeo-border);
   border-radius: 4px;
-  background-color: #fff;
+  background-color: var(--formeo-bg);
   width: 100%;
   padding: 0.3em 0.6em;
   box-sizing: border-box;
 }
 .formeo textarea:focus {
-  border: 1px solid rgb(102, 175, 233);
+  border: 1px solid var(--formeo-focus);
   outline: none;
 }
 .formeo textarea {
@@ -503,9 +609,9 @@ button[class*=-clone]:hover .svg-icon {
 }
 .formeo button {
   border-radius: 4px;
-  border: 1px solid #666666;
-  color: #333333;
-  background-color: #fff;
+  border: 1px solid var(--formeo-text-muted);
+  color: var(--formeo-text-secondary);
+  background-color: var(--formeo-bg);
   padding: 4px 8px;
 }
 .formeo button:active {
@@ -518,30 +624,30 @@ button[class*=-clone]:hover .svg-icon {
   line-height: 1.5em;
 }
 .formeo button.primary, .formeo button.success, .formeo button.warning, .formeo button.error {
-  color: #fff;
+  color: var(--formeo-on-accent);
 }
 .formeo button.primary {
-  background-color: rgb(50, 93, 136);
-  border-color: rgb(36.2903225806, 67.5, 98.7096774194);
+  background-color: var(--formeo-primary);
+  border-color: var(--formeo-primary-dark);
 }
 .formeo button.success {
-  background-color: rgb(147, 197, 75);
-  border-color: rgb(120.7142857143, 167.1428571429, 53.8571428571);
+  background-color: var(--formeo-success);
+  border-color: var(--formeo-success-dark);
 }
 .formeo button.warning {
-  background-color: rgb(244, 124, 60);
-  border-color: rgb(239.4902912621, 92.1116504854, 13.5097087379);
+  background-color: var(--formeo-warning);
+  border-color: var(--formeo-warning-dark);
 }
 .formeo button.error {
-  background-color: rgb(217, 83, 79);
-  border-color: rgb(201.4953271028, 48.0841121495, 43.5046728972);
+  background-color: var(--formeo-danger);
+  border-color: var(--formeo-danger-dark);
 }
 .formeo button[disabled] {
-  background-color: #cccccc;
-  color: #fff;
+  background-color: var(--formeo-border);
+  color: var(--formeo-on-accent);
 }
 .formeo button:focus {
-  border: 1px solid rgb(102, 175, 233);
+  border: 1px solid var(--formeo-focus);
 }
 .formeo button:hover, .formeo button:focus {
   outline: 0 none;
@@ -552,15 +658,15 @@ button[class*=-clone]:hover .svg-icon {
   height: 2.1em;
   line-height: 1.5;
   margin: 0;
-  border: 1px solid #cccccc;
+  border: 1px solid var(--formeo-border);
   border-radius: 4px;
-  background-color: #fff;
+  background-color: var(--formeo-bg);
   width: 100%;
   padding: 0.3em 0.6em;
   box-sizing: border-box;
 }
 .formeo .f-addon:focus {
-  border: 1px solid rgb(102, 175, 233);
+  border: 1px solid var(--formeo-focus);
   outline: none;
 }
 .formeo .f-addon {
@@ -654,19 +760,19 @@ button[class*=-clone]:hover .svg-icon {
 .formeo .f-input-group input:focus + select,
 .formeo .f-input-group select:focus + input,
 .formeo .f-input-group select:focus + select {
-  border-left: 1px solid rgb(102, 175, 233);
+  border-left: 1px solid var(--formeo-focus);
 }
 .formeo .text-primary {
-  color: rgb(50, 93, 136);
+  color: var(--formeo-primary);
 }
 .formeo .text-success {
-  color: rgb(147, 197, 75);
+  color: var(--formeo-success);
 }
 .formeo .text-warning {
-  color: rgb(244, 124, 60);
+  color: var(--formeo-warning);
 }
 .formeo .text-error {
-  color: rgb(217, 83, 79);
+  color: var(--formeo-danger);
 }
 .formeo small.f-help-text {
   display: block;
@@ -700,26 +806,26 @@ button[class*=-clone]:hover .svg-icon {
 }
 @keyframes DRAG_GHOST {
   0% {
-    box-shadow: 0 0 0 0 #999999;
+    box-shadow: 0 0 0 0 var(--formeo-border-strong);
   }
   100% {
-    box-shadow: 0 0 30px 0 #999999;
+    box-shadow: 0 0 30px 0 var(--formeo-border-strong);
   }
 }
 @keyframes EDIT_PULSE {
   from, to {
-    border-color: rgb(102, 175, 233);
+    border-color: var(--formeo-focus);
   }
   50% {
-    border-color: rgb(191.1771428571, 221.6285714286, 245.8228571429);
+    border-color: color-mix(in srgb, var(--formeo-focus) 80%, white);
   }
 }
 @keyframes COMPONENT_HIGHLIGHT_PULSE {
   0% {
-    box-shadow: 0 0 1px 8px rgb(153, 84, 187);
+    box-shadow: 0 0 1px 8px var(--formeo-info);
   }
   100% {
-    box-shadow: 0 0 0 0 rgb(153, 84, 187);
+    box-shadow: 0 0 0 0 var(--formeo-info);
   }
 }
 @keyframes SLIDE_UP {
@@ -745,8 +851,8 @@ button[class*=-clone]:hover .svg-icon {
   top: -24px;
   border-top-left-radius: 8px;
   border-top-right-radius: 8px;
-  background-color: #fff;
-  border-color: #cccccc;
+  background-color: var(--formeo-bg);
+  border-color: var(--formeo-border);
   border-style: solid;
   border-width: 1px 1px 0 1px;
 }
@@ -784,7 +890,7 @@ button[class*=-clone]:hover .svg-icon {
   opacity: 0.65;
 }
 .formeo.formeo-editor .group-actions .action-btn-wrap button {
-  background-color: #fff;
+  background-color: var(--formeo-bg);
 }
 .formeo.formeo-editor .group-actions button {
   background-color: transparent;
@@ -843,8 +949,8 @@ button[class*=-clone]:hover .svg-icon {
   transition: background-color 125ms ease-in-out;
   position: relative;
   clear: both;
-  background-color: #fff;
-  box-shadow: 0 0 0 1px #cccccc;
+  background-color: var(--formeo-bg);
+  box-shadow: 0 0 0 1px var(--formeo-border);
   padding: 16px;
 }
 .formeo.formeo-editor .formeo-row::after {
@@ -878,15 +984,15 @@ button[class*=-clone]:hover .svg-icon {
 }
 .formeo.formeo-editor .formeo-row .row-tag {
   left: -1px;
-  border-color: rgb(229, 70, 188.2);
+  border-color: var(--formeo-row-outline);
 }
 .formeo.formeo-editor .formeo-row:has(.hovering-column) .row-actions,
 .formeo.formeo-editor .formeo-row:has(.hovering-column) .field-actions {
   display: none;
 }
 .formeo.formeo-editor .formeo-row.sortable-ghost {
-  background-color: rgb(244.7109004739, 181.7890995261, 228.56492891);
-  box-shadow: 0 0 0 1px rgb(229, 70, 188.2);
+  background-color: var(--formeo-row-highlight);
+  box-shadow: 0 0 0 1px var(--formeo-row-outline);
 }
 .formeo.formeo-editor .formeo-row.sortable-ghost * {
   opacity: 0;
@@ -895,16 +1001,16 @@ button[class*=-clone]:hover .svg-icon {
   display: none;
 }
 .formeo.formeo-editor .formeo-row.highlight-component {
-  box-shadow: 0 0 4px 2px rgb(229, 70, 188.2);
+  box-shadow: 0 0 4px 2px var(--formeo-row-outline);
 }
 .formeo.formeo-editor .row-moving {
-  background-color: rgb(244.7109004739, 181.7890995261, 228.56492891) !important;
+  background-color: var(--formeo-row-highlight) !important;
 }
 .formeo.formeo-editor .row-moving .action-btn-wrap button {
-  background-color: rgb(244.7109004739, 181.7890995261, 228.56492891);
+  background-color: var(--formeo-row-highlight);
 }
 .formeo.formeo-editor .row-moving .row-tag {
-  background-color: rgb(244.7109004739, 181.7890995261, 228.56492891);
+  background-color: var(--formeo-row-highlight);
 }
 .formeo.formeo-editor .row-actions {
   left: 0;
@@ -927,7 +1033,7 @@ button[class*=-clone]:hover .svg-icon {
 }
 .formeo.formeo-editor .hovering-row,
 .formeo.formeo-editor .editing-row {
-  box-shadow: 0 0 0 1px rgb(229, 70, 188.2);
+  box-shadow: 0 0 0 1px var(--formeo-row-outline);
 }
 .formeo.formeo-editor .hovering-row:first-child,
 .formeo.formeo-editor .editing-row:first-child {
@@ -972,7 +1078,7 @@ button[class*=-clone]:hover .svg-icon {
   gap: 16px;
 }
 .formeo.formeo-editor .formeo-column .column-tag {
-  border-color: rgb(229, 142.6, 70);
+  border-color: var(--formeo-column-outline);
 }
 .formeo.formeo-editor .formeo-column .column-tag,
 .formeo.formeo-editor .formeo-column .column-actions {
@@ -1010,7 +1116,7 @@ button[class*=-clone]:hover .svg-icon {
 .formeo.formeo-editor .formeo-column .resize-x-handle::before {
   width: 0;
   right: 6px;
-  border: 1px dashed rgb(238.4265402844, 183.3516587678, 137.0734597156);
+  border: 1px dashed var(--formeo-column-outline-soft);
   border-width: 0 2px;
   display: block;
   top: 0;
@@ -1019,7 +1125,7 @@ button[class*=-clone]:hover .svg-icon {
   content: "";
 }
 .formeo.formeo-editor .formeo-column .resize-x-handle svg {
-  fill: rgb(238.4265402844, 183.3516587678, 137.0734597156);
+  fill: var(--formeo-column-outline-soft);
   position: absolute;
   right: 1px;
   width: 14px;
@@ -1031,10 +1137,10 @@ button[class*=-clone]:hover .svg-icon {
   bottom: -14px;
 }
 .formeo.formeo-editor .formeo-column .resize-x-handle:hover::before {
-  border-color: rgb(229, 142.6, 70);
+  border-color: var(--formeo-column-outline);
 }
 .formeo.formeo-editor .formeo-column .resize-x-handle:hover svg {
-  fill: rgb(229, 142.6, 70);
+  fill: var(--formeo-column-outline);
 }
 .formeo.formeo-editor .formeo-column.editing-column {
   overflow: hidden;
@@ -1046,8 +1152,8 @@ button[class*=-clone]:hover .svg-icon {
   display: none;
 }
 .formeo.formeo-editor .formeo-column.sortable-ghost {
-  background-color: rgb(244.7109004739, 210.5194312796, 181.7890995261);
-  box-shadow: 0 0 0 1px rgb(229, 142.6, 70);
+  background-color: var(--formeo-column-highlight);
+  box-shadow: 0 0 0 1px var(--formeo-column-outline);
 }
 .formeo.formeo-editor .formeo-column.sortable-ghost * {
   opacity: 0;
@@ -1056,13 +1162,13 @@ button[class*=-clone]:hover .svg-icon {
   display: none;
 }
 .formeo.formeo-editor .formeo-column.highlight-component {
-  box-shadow: 0 0 4px 2px rgb(229, 142.6, 70);
+  box-shadow: 0 0 4px 2px var(--formeo-column-outline);
 }
 .formeo.formeo-editor .editing-row .formeo-column,
 .formeo.formeo-editor .editing-row .empty {
   border-radius: 8px;
   height: 60px;
-  background-color: rgb(229.5, 229.5, 229.5);
+  background-color: var(--formeo-surface-muted);
 }
 .formeo.formeo-editor .editing-row .formeo-column.empty,
 .formeo.formeo-editor .editing-row .empty.empty {
@@ -1078,7 +1184,7 @@ button[class*=-clone]:hover .svg-icon {
 }
 .formeo.formeo-editor .editing-row .formeo-column::after,
 .formeo.formeo-editor .editing-row .empty::after {
-  color: #333333 !important;
+  color: var(--formeo-text-secondary) !important;
   line-height: 1em;
   opacity: 1;
   font-size: 1.1em;
@@ -1096,16 +1202,16 @@ button[class*=-clone]:hover .svg-icon {
   display: none;
 }
 .formeo.formeo-editor .column-moving {
-  background-color: rgb(244.7109004739, 210.5194312796, 181.7890995261);
+  background-color: var(--formeo-column-highlight);
 }
 .formeo.formeo-editor .column-moving .action-btn-wrap button {
-  background-color: rgb(244.7109004739, 210.5194312796, 181.7890995261);
+  background-color: var(--formeo-column-highlight);
 }
 .formeo.formeo-editor .column-moving .column-tag {
-  background-color: rgb(244.7109004739, 210.5194312796, 181.7890995261);
+  background-color: var(--formeo-column-highlight);
 }
 .formeo.formeo-editor button.column-handle {
-  background-color: rgba(255, 255, 255, 0.9);
+  background-color: var(--formeo-overlay);
 }
 .formeo.formeo-editor .hovering-column .column-tag {
   display: flex;
@@ -1124,7 +1230,7 @@ button[class*=-clone]:hover .svg-icon {
 }
 .formeo.formeo-editor .hovering-column,
 .formeo.formeo-editor .editing-column {
-  box-shadow: 0 0 0 1px rgb(229, 142.6, 70);
+  box-shadow: 0 0 0 1px var(--formeo-column-outline);
 }
 .formeo.formeo-editor .column-actions {
   padding: 0;
@@ -1142,7 +1248,7 @@ button[class*=-clone]:hover .svg-icon {
   will-change: box-shadow;
 }
 .formeo.formeo-editor .formeo-field.highlight-component {
-  box-shadow: 0 0 4px 2px rgb(124.6, 229, 70);
+  box-shadow: 0 0 4px 2px var(--formeo-field-outline);
 }
 .formeo.formeo-editor .formeo-field:last-child {
   border-bottom-right-radius: 4px;
@@ -1175,13 +1281,13 @@ button[class*=-clone]:hover .svg-icon {
   position: absolute;
   bottom: 0;
   left: 0;
-  border-bottom: 1px dashed #cccccc;
+  border-bottom: 1px dashed var(--formeo-border);
 }
 .formeo.formeo-editor .formeo-field [contenteditable]:focus {
   border-radius: 4px;
   border-bottom-color: transparent;
   outline: none;
-  box-shadow: 0 0 0 1px rgb(102, 175, 233) inset;
+  box-shadow: 0 0 0 1px var(--formeo-focus) inset;
 }
 .formeo.formeo-editor .formeo-field [contenteditable]:focus::after {
   display: none;
@@ -1193,11 +1299,11 @@ button[class*=-clone]:hover .svg-icon {
   position: absolute;
 }
 .formeo.formeo-editor .formeo-field.field-type-hidden {
-  border: 1px dashed #cccccc;
+  border: 1px dashed var(--formeo-border);
 }
 .formeo.formeo-editor .formeo-field.sortable-ghost {
-  background-color: rgb(203.3962085308, 244.7109004739, 181.7890995261);
-  box-shadow: 0 0 0 1px rgb(124.6, 229, 70);
+  background-color: var(--formeo-field-highlight);
+  box-shadow: 0 0 0 1px var(--formeo-field-outline);
 }
 .formeo.formeo-editor .formeo-field.sortable-ghost * {
   opacity: 0;
@@ -1206,12 +1312,12 @@ button[class*=-clone]:hover .svg-icon {
   right: -1px;
   left: auto;
   top: -24px;
-  border-color: rgb(124.6, 229, 70);
-  background-color: #fff;
+  border-color: var(--formeo-field-outline);
+  background-color: var(--formeo-bg);
 }
 .formeo.formeo-editor .editing-field,
 .formeo.formeo-editor .hovering-field {
-  box-shadow: 0 0 0 1px rgb(124.6, 229, 70);
+  box-shadow: 0 0 0 1px var(--formeo-field-outline);
 }
 .formeo.formeo-editor .editing-field .field-tag,
 .formeo.formeo-editor .hovering-field .field-tag {
@@ -1238,13 +1344,13 @@ button[class*=-clone]:hover .svg-icon {
   flex-direction: row-reverse;
 }
 .formeo.formeo-editor .field-moving {
-  background-color: rgb(203.3962085308, 244.7109004739, 181.7890995261);
+  background-color: var(--formeo-field-highlight);
 }
 .formeo.formeo-editor .field-moving .action-btn-wrap button {
-  background-color: rgb(203.3962085308, 244.7109004739, 181.7890995261);
+  background-color: var(--formeo-field-highlight);
 }
 .formeo.formeo-editor .field-moving .field-tag {
-  background-color: rgb(203.3962085308, 244.7109004739, 181.7890995261);
+  background-color: var(--formeo-field-highlight);
 }
 .formeo.formeo-editor .editing-field {
   z-index: 1;
@@ -1257,7 +1363,7 @@ button[class*=-clone]:hover .svg-icon {
 }
 .formeo.formeo-editor .field-preview .f-checkbox.highlight-component,
 .formeo.formeo-editor .field-preview .f-radio.highlight-component {
-  box-shadow: 0 0 2px 1px rgb(70, 229, 206.2) inset;
+  box-shadow: 0 0 2px 1px var(--formeo-option-outline) inset;
 }
 .formeo.formeo-editor .component-edit {
   display: none;
@@ -1361,7 +1467,7 @@ button[class*=-clone]:hover .svg-icon {
   left: 0;
   width: 100%;
   height: 100%;
-  background-color: rgba(217, 83, 79, 0.1);
+  background-color: var(--formeo-danger-subtle);
   z-index: 2;
 }
 .formeo.formeo-editor .component-edit .prop-wrap {
@@ -1438,7 +1544,7 @@ button[class*=-clone]:hover .svg-icon {
   width: calc(100% - 24px);
 }
 .formeo.formeo-editor .component-edit.panel-count-1 .panel-nav {
-  border-bottom: 1px solid #999999;
+  border-bottom: 1px solid var(--formeo-border-strong);
 }
 .formeo.formeo-editor .component-edit.panel-count-1 .panel-nav button {
   display: none;
@@ -1454,7 +1560,7 @@ button[class*=-clone]:hover .svg-icon {
   left: 50%;
   transform: translate(-50%, -50%);
   box-shadow: 0 0 24px 1px #000;
-  border: 1px solid #000;
+  border: 1px solid var(--formeo-text);
   border-radius: 8px;
   z-index: 100;
 }
@@ -1462,10 +1568,10 @@ button[class*=-clone]:hover .svg-icon {
   display: flex;
   width: 100%;
   position: relative;
-  border-bottom: 1px solid #cccccc;
+  border-bottom: 1px solid var(--formeo-border);
 }
 .formeo.formeo-editor .f-condition-row > [class^=condition-] {
-  border-left: 1px solid #cccccc;
+  border-left: 1px solid var(--formeo-border);
 }
 .formeo.formeo-editor .f-condition-row .manage-condition-type {
   display: flex;
@@ -1500,19 +1606,19 @@ button[class*=-clone]:hover .svg-icon {
 .formeo.formeo-editor .f-condition-row input,
 .formeo.formeo-editor .f-condition-row select,
 .formeo.formeo-editor .f-condition-row [contenteditable] {
-  background-color: #fff;
+  background-color: var(--formeo-bg);
   border: 0 none;
   border-radius: 0;
 }
 .formeo.formeo-editor .f-condition-row input:focus,
 .formeo.formeo-editor .f-condition-row select:focus,
 .formeo.formeo-editor .f-condition-row [contenteditable]:focus {
-  box-shadow: 0 0 0 1px rgb(102, 175, 233) inset;
+  box-shadow: 0 0 0 1px var(--formeo-focus) inset;
 }
 .formeo.formeo-editor .f-condition-row div.condition-source,
 .formeo.formeo-editor .f-condition-row div.condition-target {
   position: relative;
-  border-left: 1px solid #cccccc;
+  border-left: 1px solid var(--formeo-border);
 }
 .formeo.formeo-editor .f-condition-row .condition-logical,
 .formeo.formeo-editor .f-condition-row .condition-source,
@@ -1585,23 +1691,23 @@ button[class*=-clone]:hover .svg-icon {
   height: 12px;
   border-radius: 50%;
   padding: 1px;
-  border: 1px solid #333333;
-  fill: #333333;
+  border: 1px solid var(--formeo-text-secondary);
+  fill: var(--formeo-text-secondary);
 }
 .formeo.formeo-editor .condition-target .clear-button:hover .svg-icon,
 .formeo.formeo-editor .condition-source .clear-button:hover .svg-icon {
-  border: 1px solid rgb(217, 83, 79);
-  fill: rgb(217, 83, 79);
+  border: 1px solid var(--formeo-danger);
+  fill: var(--formeo-danger);
 }
 .formeo.formeo-editor .condition-target .clear-button:active .svg-icon,
 .formeo.formeo-editor .condition-source .clear-button:active .svg-icon {
-  background-color: rgb(217, 83, 79);
-  border: 1px solid rgb(201.4953271028, 48.0841121495, 43.5046728972);
-  fill: #fff;
+  background-color: var(--formeo-danger);
+  border: 1px solid var(--formeo-danger-dark);
+  fill: var(--formeo-on-accent);
 }
 .formeo.formeo-editor .conditions-prop-inputs {
-  border-top: 1px solid #cccccc;
-  border-right: 1px solid #cccccc;
+  border-top: 1px solid var(--formeo-border);
+  border-right: 1px solid var(--formeo-border);
 }
 .formeo.formeo-editor .conditions-prop-inputs label.condition-label {
   display: inline-flex;
@@ -1610,12 +1716,12 @@ button[class*=-clone]:hover .svg-icon {
   padding: 4px;
   border-right: 0;
   text-transform: uppercase;
-  color: #333333;
-  background-color: #fff;
+  color: var(--formeo-text-secondary);
+  background-color: var(--formeo-bg);
 }
 .formeo.formeo-editor .conditions-prop-inputs label.condition-label.then-condition-label {
-  background-color: #666666;
-  color: #fff;
+  background-color: var(--formeo-text-muted);
+  color: var(--formeo-on-accent);
 }
 .formeo.formeo-editor .field-conditions-0 .conditions-prop-inputs {
   border-top: 0 none;
@@ -1711,7 +1817,7 @@ button[class*=-clone]:hover .svg-icon {
   border-width: 1px;
   border-style: dashed;
   border-color: transparent;
-  background-color: rgba(255, 255, 255, 0);
+  background-color: var(--formeo-stage-bg);
   padding-left: 23px;
   padding-bottom: 8px;
   overflow: visible;
@@ -1728,7 +1834,7 @@ button[class*=-clone]:hover .svg-icon {
   transition: margin-top 250ms ease-in;
 }
 .formeo.formeo-editor .formeo-stage > .formeo-field {
-  background-color: #fff;
+  background-color: var(--formeo-bg);
 }
 .formeo.formeo-editor .formeo-stage {
   margin: 0;
@@ -1741,17 +1847,17 @@ button[class*=-clone]:hover .svg-icon {
   }
 }
 .formeo.formeo-editor .formeo-stage.highlight-component {
-  box-shadow: 0 0 4px 2px #4F46E5;
+  box-shadow: 0 0 4px 2px var(--formeo-stage-outline);
 }
 .formeo.formeo-editor .formeo-stage .hidden {
   display: none;
 }
 .formeo.formeo-editor .formeo-stage.empty {
-  border-color: #999999;
-  background-color: rgba(255, 255, 255, 0.25);
+  border-color: var(--formeo-border-strong);
+  background-color: var(--formeo-stage-shadow);
 }
 .formeo.formeo-editor .formeo-stage.editing-stage, .formeo.formeo-editor .formeo-stage.hovering-stage, .formeo.formeo-editor .formeo-stage.hovering-stage.empty {
-  border-color: #4F46E5;
+  border-color: var(--formeo-stage-outline);
   border-style: solid;
 }
 .formeo.formeo-editor .formeo-stage.editing-stage .stage-tag, .formeo.formeo-editor .formeo-stage.hovering-stage .stage-tag, .formeo.formeo-editor .formeo-stage.hovering-stage.empty .stage-tag {
@@ -1781,7 +1887,7 @@ button[class*=-clone]:hover .svg-icon {
 }
 .formeo.formeo-editor .stage-edit {
   padding: 16px;
-  background-color: #fff;
+  background-color: var(--formeo-bg);
   margin-top: 0;
   margin-bottom: 16px;
   border-top-left-radius: 8px;
@@ -1790,7 +1896,7 @@ button[class*=-clone]:hover .svg-icon {
   border-bottom: 0 none !important;
 }
 .formeo.formeo-editor .stage-edit .conditions-prop-inputs {
-  border-top: 1px solid #cccccc;
+  border-top: 1px solid var(--formeo-border);
 }
 .formeo.formeo-editor .stage-actions {
   right: -1px;
@@ -1804,10 +1910,10 @@ button[class*=-clone]:hover .svg-icon {
 .formeo.formeo-editor .stage-actions .edit-toggle:focus {
   border-bottom-left-radius: 0;
   border-bottom-right-radius: 0;
-  border-right: 1px solid #4F46E5;
+  border-right: 1px solid var(--formeo-stage-outline);
   border-top-left-radius: 0;
   border-top-right-radius: 8px;
-  border-top: 1px solid #4F46E5;
+  border-top: 1px solid var(--formeo-stage-outline);
 }
 .formeo.formeo-editor .editing-stage .formeo-settings {
   display: block;
@@ -1827,7 +1933,7 @@ button[class*=-clone]:hover .svg-icon {
   position: absolute;
   top: 50%;
   left: 50%;
-  color: #999999;
+  color: var(--formeo-text-subtle);
   transition: opacity 200ms ease-in-out;
   will-change: opacity;
   text-align: center;
@@ -1947,14 +2053,14 @@ button[class*=-clone]:hover .svg-icon {
   align-items: stretch;
   display: flex;
   border-radius: 8px;
-  outline: 0 solid rgba(217, 83, 79, 0.25);
+  outline: 0 solid var(--formeo-remove-bg);
   transition: background-color 133ms, outline 133ms;
   padding: 4px 0;
 }
 .formeo.formeo-render .formeo-row.will-remove {
   border-radius: 2px;
-  background-color: rgba(217, 83, 79, 0.25);
-  outline: 6px solid rgba(217, 83, 79, 0.25);
+  background-color: var(--formeo-remove-bg);
+  outline: 6px solid var(--formeo-remove-bg);
 }
 .formeo.formeo-render .formeo-row:last-of-type {
   margin-bottom: 0;
@@ -2000,10 +2106,10 @@ button[class*=-clone]:hover .svg-icon {
   padding: 4px;
 }
 .formeo.formeo-render .remove-input-group:hover {
-  background-color: #fff;
+  background-color: var(--formeo-bg);
 }
 .formeo.formeo-render .remove-input-group:hover .svg-icon {
-  fill: rgb(217, 83, 79);
+  fill: var(--formeo-danger);
 }
 .formeo.formeo-render .remove-input-group .svg-icon {
   pointer-events: none;
@@ -2059,10 +2165,10 @@ button[class*=-clone]:hover .svg-icon {
 }
 
 .formeo-controls .filtered-term {
-  background-color: #fff;
+  background-color: var(--formeo-bg);
   text-align: center;
   border-radius: 4px 4px 0 0;
-  border: 1px solid #cccccc;
+  border: 1px solid var(--formeo-border);
   border-bottom: 0 none;
   width: calc(100% - 2px);
 }
@@ -2085,12 +2191,12 @@ button[class*=-clone]:hover .svg-icon {
 .formeo-controls nav button {
   position: absolute;
   width: 24px;
-  color: #000;
+  color: var(--formeo-text);
   height: calc(100% + 1px);
   padding: 0;
   line-height: 0;
   margin: 0;
-  border-color: #cccccc;
+  border-color: var(--formeo-border);
 }
 
 .formeo-controls nav button.next-group {
@@ -2114,7 +2220,7 @@ button[class*=-clone]:hover .svg-icon {
 }
 
 .formeo-controls .panel-labels {
-  border-top: 1px solid #cccccc;
+  border-top: 1px solid var(--formeo-border);
 }
 
 .formeo-controls .panel-count-1 {
@@ -2139,7 +2245,7 @@ button[class*=-clone]:hover .svg-icon {
   vertical-align: top;
   display: inline-block;
   width: 100%;
-  border-top: 1px solid #cccccc;
+  border-top: 1px solid var(--formeo-border);
 }
 
 .formeo-controls .control-group > li:first-child {
@@ -2172,7 +2278,7 @@ button[class*=-clone]:hover .svg-icon {
 
 .formeo-controls .control-group-labels {
   height: 100%;
-  background: #fff;
+  background: var(--formeo-bg);
   overflow: hidden;
 }
 
@@ -2191,25 +2297,25 @@ button[class*=-clone]:hover .svg-icon {
 }
 
 .formeo-controls .form-actions .svg-icon {
-  fill: #666666;
+  fill: var(--formeo-text-muted);
   display: none;
 }
 
 .formeo-controls .form-actions .svg-icon:hover {
-  fill: #000;
+  fill: var(--formeo-text);
 }
 
 .formeo-controls .form-actions .save-form:hover,
 .formeo-controls .form-actions .clear-form:hover {
-  color: #fff;
+  color: var(--formeo-on-accent);
 }
 
 .formeo-controls .form-actions .save-form:hover {
-  background-color: rgb(50, 93, 136);
+  background-color: var(--formeo-primary);
 }
 
 .formeo-controls .form-actions .clear-form:hover {
-  background-color: rgb(217, 83, 79);
+  background-color: var(--formeo-danger);
 }
 
 @media (max-width: 481px) {
@@ -2261,9 +2367,9 @@ button[class*=-clone]:hover .svg-icon {
   cursor: move;
   list-style: none;
   margin: -1px 0 0;
-  border: 1px solid #cccccc;
+  border: 1px solid var(--formeo-border);
   text-align: left;
-  background: #fff;
+  background: var(--formeo-bg);
   user-select: none;
   overflow: hidden;
 }
@@ -2279,7 +2385,7 @@ button[class*=-clone]:hover .svg-icon {
 }
 
 .formeo-controls .field-control:hover {
-  background-color: rgb(242.25, 242.25, 242.25);
+  background-color: var(--formeo-bg-hover);
 }
 
 .formeo-controls .field-control button {
@@ -2298,8 +2404,8 @@ button[class*=-clone]:hover .svg-icon {
 
 .formeo-controls .field-control button:focus {
   outline: 0 none;
-  background-color: rgb(242.25, 242.25, 242.25);
-  box-shadow: 0 0 0 1px rgb(102, 175, 233) inset;
+  background-color: var(--formeo-bg-hover);
+  box-shadow: 0 0 0 1px var(--formeo-focus) inset;
   border-radius: 0 !important;
 }
 
@@ -2363,9 +2469,9 @@ button[class*=-clone]:hover .svg-icon {
   cursor: move;
   list-style: none;
   margin: -1px 0 0;
-  border: 1px solid #cccccc;
+  border: 1px solid var(--formeo-border);
   text-align: left;
-  background: #fff;
+  background: var(--formeo-bg);
   user-select: none;
   overflow: hidden;
 }
@@ -2378,7 +2484,7 @@ button[class*=-clone]:hover .svg-icon {
   font-size: 16px;
 }
 .field-control:hover {
-  background-color: rgb(242.25, 242.25, 242.25);
+  background-color: var(--formeo-bg-hover);
 }
 .field-control button {
   box-sizing: border-box;
@@ -2395,8 +2501,8 @@ button[class*=-clone]:hover .svg-icon {
 }
 .field-control button:focus {
   outline: 0 none;
-  background-color: rgb(242.25, 242.25, 242.25);
-  box-shadow: 0 0 0 1px rgb(102, 175, 233) inset;
+  background-color: var(--formeo-bg-hover);
+  box-shadow: 0 0 0 1px var(--formeo-focus) inset;
   border-radius: 0 !important;
 }
 .field-control button:active {