diff --git a/src/components/color_input/color_input.vue b/src/components/color_input/color_input.vue
index 418fb18c4..a09325a80 100644
--- a/src/components/color_input/color_input.vue
+++ b/src/components/color_input/color_input.vue
@@ -11,7 +11,7 @@
       {{ label }}
     </label>
     <Checkbox
-      v-if="typeof fallback !== 'undefined' && showOptionalCheckbox && !hideOptionalCheckbox"
+      v-if="typeof fallback !== 'undefined' && showOptionalTickbox"
       :model-value="present"
       :disabled="disabled"
       class="opt"
@@ -112,16 +112,10 @@ export default {
       default: false
     },
     // Show "optional" tickbox, for when value might become mandatory
-    showOptionalCheckbox: {
+    showOptionalTickbox: {
       required: false,
       type: Boolean,
       default: true
-    },
-    // Force "optional" tickbox to hide
-    hideOptionalCheckbox: {
-      required: false,
-      type: Boolean,
-      default: false
     }
   },
   emits: ['update:modelValue'],
diff --git a/src/components/component_preview/component_preview.vue b/src/components/component_preview/component_preview.vue
index fc8b3f4fb..944e3a979 100644
--- a/src/components/component_preview/component_preview.vue
+++ b/src/components/component_preview/component_preview.vue
@@ -11,50 +11,19 @@
     <!-- eslint-enable vue/no-v-html vue/no-v-text-v-html-on-component -->
     <label
       v-show="shadowControl"
-      role="heading"
       class="header"
       :class="{ faint: disabled }"
     >
       {{ $t('settings.style.shadows.offset') }}
     </label>
-    <label
-      v-show="shadowControl && !hideControls"
-      class="x-shift-number"
-    >
-      {{ $t('settings.style.shadows.offset-x') }}
-      <input
-        :value="shadow?.x"
-        :disabled="disabled"
-        :class="{ disabled }"
-        class="input input-number"
-        type="number"
-        @input="e => updateProperty('x', e.target.value)"
-      >
-    </label>
-    <label
-      class="y-shift-number"
-      v-show="shadowControl && !hideControls"
-    >
-      {{ $t('settings.style.shadows.offset-y') }}
-      <input
-        :value="shadow?.y"
-        :disabled="disabled"
-        :class="{ disabled }"
-        class="input input-number"
-        type="number"
-        @input="e => updateProperty('y', e.target.value)"
-      >
-    </label>
     <input
       v-show="shadowControl && !hideControls"
-      :value="shadow?.x"
+      :value="shadow?.y"
       :disabled="disabled"
       :class="{ disabled }"
-      class="input input-range x-shift-slider"
-      type="range"
-      max="20"
-      min="-20"
-      @input="e => updateProperty('x', e.target.value)"
+      class="input input-number y-shift-number"
+      type="number"
+      @input="e => updateProperty('y', e.target.value)"
     >
     <input
       v-show="shadowControl && !hideControls"
@@ -74,7 +43,7 @@
       <div
         class="preview-block"
         :class="previewClass"
-        :style="style"
+        :style="previewStyle"
       >
         {{ $t('settings.style.themes3.editor.test_string') }}
       </div>
@@ -84,42 +53,43 @@
         </div>
       </div>
     </div>
-    <div class="assists">
-      <Checkbox
-        v-model="lightGrid"
-        name="lightGrid"
-        class="input-light-grid"
-      >
-        {{ $t('settings.style.shadows.light_grid') }}
-      </Checkbox>
-      <div class="style-control">
-        <label class="label">
-          {{ $t('settings.style.shadows.zoom') }}
-        </label>
-        <input
-          v-model="zoom"
-          class="input input-number y-shift-number"
-          type="number"
-        >
-      </div>
-      <ColorInput
-        class="input-color-input"
-        v-model="colorOverride"
-        fallback="#606060"
-        :label="$t('settings.style.shadows.color_override')"
-      />
-    </div>
+    <input
+      v-show="shadowControl && !hideControls"
+      :value="shadow?.x"
+      :disabled="disabled"
+      :class="{ disabled }"
+      class="input input-number x-shift-number"
+      type="number"
+      @input="e => updateProperty('x', e.target.value)"
+    >
+    <input
+      v-show="shadowControl && !hideControls"
+      :value="shadow?.x"
+      :disabled="disabled"
+      :class="{ disabled }"
+      class="input input-range x-shift-slider"
+      type="range"
+      max="20"
+      min="-20"
+      @input="e => updateProperty('x', e.target.value)"
+    >
+    <Checkbox
+      id="lightGrid"
+      v-model="lightGrid"
+      name="lightGrid"
+      class="input-light-grid"
+    >
+      {{ $t('settings.style.shadows.light_grid') }}
+    </Checkbox>
   </div>
 </template>
 
 <script>
 import Checkbox from 'src/components/checkbox/checkbox.vue'
-import ColorInput from 'src/components/color_input/color_input.vue'
 
 export default {
   components: {
-    Checkbox,
-    ColorInput
+    Checkbox
   },
   props: [
     'shadow',
@@ -133,21 +103,10 @@ export default {
   emits: ['update:shadow'],
   data () {
     return {
-      colorOverride: null,
-      lightGrid: false,
-      zoom: 100
+      lightGrid: false
     }
   },
   computed: {
-    style () {
-      console.log(this.previewStyle)
-      const result = [
-        this.previewStyle,
-        `zoom: ${this.zoom / 100}`
-      ]
-      if (this.colorOverride) result.push(`--background: ${this.colorOverride}`)
-      return result
-    },
     hideControls () {
       return typeof this.shadow === 'string'
     }
@@ -162,27 +121,16 @@ export default {
 <style lang="scss">
 .ComponentPreview {
   display: grid;
-  grid-template-columns: 1em 1fr 1fr 1em;
-  grid-template-rows: 2em 1fr 1fr 1fr 1em 2em max-content;
+  grid-template-columns: 3em 1fr 3em;
+  grid-template-rows: 2em 1fr 2em;
   grid-template-areas:
-    "header     header     header     header "
-    "preview    preview    preview    y-slide"
-    "preview    preview    preview    y-slide"
-    "preview    preview    preview    y-slide"
-    "x-slide    x-slide    x-slide    .      "
-    "x-num      x-num      y-num      y-num  "
-    "assists    assists    assists    assists";
+    ".       header  y-num  "
+    ".       preview y-slide"
+    "x-num   x-slide .      "
+    "options options options";
   grid-gap: 0.5em;
-
-  &:not(.-shadow-controls) {
-    grid-template-areas:
-      "header     header     header     header "
-      "preview    preview    preview    y-slide"
-      "preview    preview    preview    y-slide"
-      "preview    preview    preview    y-slide"
-      "assists    assists    assists    assists";
-    grid-template-rows: 2em 1fr 1fr 1fr max-content;
-  }
+  max-width: 25em;
+  max-height: 25em;
 
   .header {
     grid-area: header;
@@ -207,15 +155,8 @@ export default {
     }
   }
 
-  .assists {
-    grid-area: assists;
-    display: grid;
-    grid-auto-flow: rows;
-    grid-auto-rows: 2em;
-    grid-gap: 0.5em;
-  }
-
   .input-light-grid {
+    grid-area: options;
     justify-self: center;
   }
 
@@ -225,19 +166,6 @@ export default {
 
   .x-shift-number {
     grid-area: x-num;
-    justify-self: right;
-  }
-
-  .y-shift-number {
-    grid-area: y-num;
-    justify-self: left;
-  }
-
-  .x-shift-number,
-  .y-shift-number {
-    input {
-      max-width: 4em;
-    }
   }
 
   .x-shift-slider {
@@ -247,6 +175,10 @@ export default {
     min-width: 10em;
   }
 
+  .y-shift-number {
+    grid-area: y-num;
+  }
+
   .y-shift-slider {
     grid-area: y-slide;
     writing-mode: vertical-lr;
diff --git a/src/components/contrast_ratio/contrast_ratio.vue b/src/components/contrast_ratio/contrast_ratio.vue
index 2d3c5c834..bbd6fd4a5 100644
--- a/src/components/contrast_ratio/contrast_ratio.vue
+++ b/src/components/contrast_ratio/contrast_ratio.vue
@@ -3,44 +3,39 @@
     v-if="contrast"
     class="contrast-ratio"
   >
-    <span v-if="showRatio">
-      {{ contrast.text }}
-    </span>
-    <Tooltip
-      :text="hint"
+    <span
+      :title="hint"
       class="rating"
     >
       <span v-if="contrast.aaa">
-        <FAIcon icon="thumbs-up" :size="showRatio ? 'lg' : ''" />
+        <FAIcon icon="thumbs-up" />
       </span>
       <span v-if="!contrast.aaa && contrast.aa">
-        <FAIcon icon="adjust" :size="showRatio ? 'lg' : ''" />
+        <FAIcon icon="adjust" />
       </span>
       <span v-if="!contrast.aaa && !contrast.aa">
-        <FAIcon icon="exclamation-triangle" :size="showRatio ? 'lg' : ''" />
+        <FAIcon icon="exclamation-triangle" />
       </span>
-    </Tooltip>
-    <Tooltip
+    </span>
+    <span
       v-if="contrast && large"
-      :text="hint_18pt"
       class="rating"
+      :title="hint_18pt"
     >
       <span v-if="contrast.laaa">
-        <FAIcon icon="thumbs-up" :size="showRatio ? 'large' : ''" />
+        <FAIcon icon="thumbs-up" />
       </span>
       <span v-if="!contrast.laaa && contrast.laa">
-        <FAIcon icon="adjust" :size="showRatio ? 'lg' : ''" />
+        <FAIcon icon="adjust" />
       </span>
       <span v-if="!contrast.laaa && !contrast.laa">
-        <FAIcon icon="exclamation-triangle" :size="showRatio ? 'lg' : ''" />
+        <FAIcon icon="exclamation-triangle" />
       </span>
-    </Tooltip>
+    </span>
   </span>
 </template>
 
 <script>
-import Tooltip from 'src/components/tooltip/tooltip.vue'
-
 import { library } from '@fortawesome/fontawesome-svg-core'
 import {
   faAdjust,
@@ -67,16 +62,8 @@ export default {
       required: false,
       type: Object,
       default: () => ({})
-    },
-    showRatio: {
-      required: false,
-      type: Boolean,
-      default: false
     }
   },
-  components: {
-    Tooltip
-  },
   computed: {
     hint () {
       const levelVal = this.contrast.aaa ? 'aaa' : (this.contrast.aa ? 'aa' : 'bad')
@@ -100,7 +87,8 @@ export default {
 .contrast-ratio {
   display: flex;
   justify-content: flex-end;
-  align-items: baseline;
+  margin-top: -4px;
+  margin-bottom: 5px;
 
   .label {
     margin-right: 1em;
@@ -108,6 +96,7 @@ export default {
 
   .rating {
     display: inline-block;
+    text-align: center;
     margin-left: 0.5em;
   }
 }
diff --git a/src/components/palette_editor/palette_editor.vue b/src/components/palette_editor/palette_editor.vue
index 91236ce77..502f0ac8a 100644
--- a/src/components/palette_editor/palette_editor.vue
+++ b/src/components/palette_editor/palette_editor.vue
@@ -75,17 +75,9 @@ const paletteKeys = [
   'cBlue',
   'cGreen',
   'cOrange',
-  'wallpaper',
   'extra1',
   'extra2',
-  'extra3',
-  'extra4',
-  'extra5',
-  'extra6',
-  'extra7',
-  'extra8',
-  'extra9',
-  'extra10'
+  'extra3'
 ]
 
 const fallback = (key) => {
@@ -96,9 +88,6 @@ const fallback = (key) => {
     return props.modelValue.accent
   }
   if (key.startsWith('extra')) {
-    return '#FF00FF'
-  }
-  if (key.startsWith('wallpaper')) {
     return '#008080'
   }
 }
@@ -116,7 +105,7 @@ const updatePalette = (paletteKey, value) => {
   display: grid;
   justify-content: space-around;
   grid-template-columns: repeat(4, 1fr);
-  grid-template-rows: repeat(5, 1fr) auto;
+  grid-template-rows: repeat(3, 1fr) auto;
   grid-gap: 0.5em;
   align-items: baseline;
 
diff --git a/src/components/settings_modal/tabs/style_tab/style_tab.js b/src/components/settings_modal/tabs/style_tab/style_tab.js
index c5ac8d06c..d31a96038 100644
--- a/src/components/settings_modal/tabs/style_tab/style_tab.js
+++ b/src/components/settings_modal/tabs/style_tab/style_tab.js
@@ -340,7 +340,9 @@ export default {
     exports.editedBorderColor = getEditedElement('Border', 'textColor')
     exports.isBorderColorPresent = isElementPresent('Border', 'textColor', '#909090')
 
-    const getContrast = (bg, text) => {
+    // TODO this is VERY primitive right now, need to make it
+    // support variables, fallbacks etc.
+    exports.getContrast = (bg, text) => {
       try {
         const bgRgb = hex2rgb(bg)
         const textRgb = hex2rgb(text)
@@ -462,24 +464,6 @@ export default {
         return null
       }
     })
-
-    const applicablePreviewRules = computed(() => {
-      return previewRules.filter(rule => {
-        const filterable = rule.parent ? rule.parent : rule
-        const variantMatches = filterable.variant === selectedVariant.value
-        const stateMatches = filterable.state.filter(x => x !== 'normal').every(x => selectedState.has(x))
-        return variantMatches && stateMatches
-      })
-    })
-    const previewColors = computed(() => ({
-      text: applicablePreviewRules.value.find(r => r.component === 'Text')?.virtualDirectives['--text'],
-      link: applicablePreviewRules.value.find(r => r.component === 'Link')?.virtualDirectives['--link'],
-      border: applicablePreviewRules.value.find(r => r.component === 'Border')?.virtualDirectives['--border'],
-      icon: applicablePreviewRules.value.find(r => r.component === 'Icon')?.virtualDirectives['--icon'],
-      background: applicablePreviewRules.value.find(r => r.parent == null)?.dynamicVars.stacked
-    }))
-    exports.previewColors = previewColors
-
     const editorFriendlyToOriginal = computed(() => {
       const resultRules = []
 
@@ -616,23 +600,16 @@ export default {
         return virtualDirectives[selectedVirtualDirectiveId.value].valType
       },
       set (value) {
-        const newValType = value
-        let newValue
+        virtualDirectives[selectedVirtualDirectiveId.value].valType = value
         switch (value) {
           case 'shadow':
-            newValue = '0 0 0 #000000 / 1'
+            virtualDirectives[selectedVirtualDirectiveId.value].value = '0 0 0 #000000'
             break
           case 'color':
-            newValue = '#000000'
+            virtualDirectives[selectedVirtualDirectiveId.value].value = '#000000'
             break
           default:
-            newValue = 'none'
-        }
-        const newName = virtualDirectives[selectedVirtualDirectiveId.value].name
-        virtualDirectives[selectedVirtualDirectiveId.value] = {
-          name: newName,
-          value: newValue,
-          valType: newValType
+            virtualDirectives[selectedVirtualDirectiveId.value].value = 'none'
         }
       }
     })
@@ -687,14 +664,6 @@ export default {
       { immediate: true }
     )
 
-    const virtualDirectivesOut = computed(() => {
-      return [
-        'Root {',
-        ...virtualDirectives.map(vd => `  --${vd.name}: ${vd.valType} | ${vd.value};`),
-        '}'
-      ].join('\n')
-    })
-
     exports.getNewVirtualDirective = () => ({
       name: 'newDirective',
       valType: 'generic',
@@ -709,13 +678,6 @@ export default {
       return null
     }
 
-    exports.contrast = computed(() => {
-      return getContrast(
-        exports.computeColor(previewColors.value.background),
-        exports.computeColor(previewColors.value.text)
-      )
-    })
-
     const overallPreviewRules = ref()
     exports.overallPreviewRules = overallPreviewRules
     exports.updateOverallPreview = () => {
@@ -732,18 +694,10 @@ export default {
             .reduce((acc, [k, v]) => ({ ...acc, [k]: `color | ${v}` }), {})
         }
 
-        const virtualDirectivesRule = {
-          component: 'Root',
-          directives: Object.fromEntries(
-            virtualDirectives.map(vd => [`--${vd.name}`, `${vd.valType} | ${vd.value}`])
-          )
-        }
-
         const rules = init({
           inputRuleset: [
-            paletteRule,
-            virtualDirectivesRule,
-            ...editorFriendlyToOriginal.value
+            ...editorFriendlyToOriginal.value,
+            paletteRule
           ],
           ultimateBackgroundColor: '#000000',
           liteMode: true,
@@ -772,8 +726,7 @@ export default {
       parser: (string) => deserialize(string),
       onImport (parsed, filename) {
         const editorComponents = parsed.filter(x => x.component.startsWith('@'))
-        const rootComponent = parsed.find(x => x.component === 'Root')
-        const rules = parsed.filter(x => !x.component.startsWith('@') && x.component !== 'Root')
+        const rules = parsed.filter(x => !x.component.startsWith('@'))
         const metaIn = editorComponents.find(x => x.component === '@meta').directives
         const palettesIn = editorComponents.filter(x => x.component === '@palette')
 
@@ -782,16 +735,8 @@ export default {
         exports.author.value = metaIn.author
         exports.website.value = metaIn.website
 
-        virtualDirectives.splice(0, virtualDirectives.length)
-        const newVirtualDirectives = Object
-          .entries(rootComponent.directives)
-          .map(([name, value]) => {
-            const [valType, valVal] = value.split('|').map(x => x.trim())
-            return { name: name.substring(2), valType, value: valVal }
-          })
-        virtualDirectives.push(...newVirtualDirectives)
-
         onPalettesUpdate(palettesIn.map(x => ({ name: x.variant, ...x.directives })))
+        console.log('PALETTES', palettesIn)
 
         Object.keys(allEditedRules).forEach((k) => delete allEditedRules[k])
 
@@ -808,7 +753,6 @@ export default {
       return [
         metaOut.value,
         palettesOut.value,
-        virtualDirectivesOut.value,
         serialize(editorFriendlyToOriginal.value)
       ].join('\n\n')
     })
diff --git a/src/components/settings_modal/tabs/style_tab/style_tab.vue b/src/components/settings_modal/tabs/style_tab/style_tab.vue
index 5ca274c35..3fa70cb66 100644
--- a/src/components/settings_modal/tabs/style_tab/style_tab.vue
+++ b/src/components/settings_modal/tabs/style_tab/style_tab.vue
@@ -166,21 +166,27 @@
           >
             <ColorInput
               v-model="editedBackgroundColor"
-              :fallback="computeColor(editedBackgroundColor) ?? previewColors.background"
+              :fallback="computeColor(editedBackgroundColor)"
               :disabled="!isBackgroundColorPresent"
               :label="$t('settings.style.themes3.editor.background')"
-              :hide-optional-checkbox="true"
             />
             <Tooltip :text="$t('settings.style.themes3.editor.include_in_rule')">
               <Checkbox v-model="isBackgroundColorPresent" />
             </Tooltip>
+            <OpacityInput
+              v-model="editedOpacity"
+              :disabled="!isOpacityPresent"
+              :label="$t('settings.style.themes3.editor.opacity')"
+            />
+            <Tooltip :text="$t('settings.style.themes3.editor.include_in_rule')">
+              <Checkbox v-model="isOpacityPresent" />
+            </Tooltip>
             <ColorInput
               v-if="componentHas('Text')"
               v-model="editedTextColor"
-              :fallback="computeColor(editedTextColor) ?? previewColors.text"
+              :fallback="computeColor(editedTextColor)"
               :label="$t('settings.style.themes3.editor.text_color')"
               :disabled="!isTextColorPresent"
-              :hide-optional-checkbox="true"
             />
             <Tooltip
               v-if="componentHas('Text')"
@@ -188,10 +194,7 @@
             >
               <Checkbox v-model="isTextColorPresent" />
             </Tooltip>
-            <div
-              v-if="componentHas('Text')"
-              class="style-control suboption"
-            >
+            <div class="style-control suboption">
               <label
                 for="textAuto"
                 class="label"
@@ -221,27 +224,18 @@
             >
               <Checkbox v-model="isTextAutoPresent" />
             </Tooltip>
-            <div
-              class="style-control suboption"
-              v-if="componentHas('Text')"
-            >
-              <label class="label">
-                {{$t('settings.style.themes3.editor.contrast') }}
-              </label>
-              <ContrastRatio
-                :show-ratio="true"
-                :contrast="contrast"
-              />
+            <div>
+              <ContrastRatio :contrast="getContrast(editedBackgroundColor, editedTextColor)" />
             </div>
-            <div v-if="componentHas('Text')">
+            <div>
+              <!-- spacer for missing checkbox -->
             </div>
             <ColorInput
               v-if="componentHas('Link')"
               v-model="editedLinkColor"
-              :fallback="computeColor(editedLinkColor) ?? previewColors.link"
+              :fallback="computeColor(editedLinkColor)"
               :label="$t('settings.style.themes3.editor.link_color')"
               :disabled="!isLinkColorPresent"
-              :hide-optional-checkbox="true"
             />
             <Tooltip
               v-if="componentHas('Link')"
@@ -252,10 +246,9 @@
             <ColorInput
               v-if="componentHas('Icon')"
               v-model="editedIconColor"
-              :fallback="computeColor(editedIconColor) ?? previewColors.icon"
+              :fallback="computeColor(editedIconColor)"
               :label="$t('settings.style.themes3.editor.icon_color')"
               :disabled="!isIconColorPresent"
-              :hide-optional-checkbox="true"
             />
             <Tooltip
               v-if="componentHas('Icon')"
@@ -266,10 +259,9 @@
             <ColorInput
               v-if="componentHas('Border')"
               v-model="editedBorderColor"
-              :fallback="computeColor(editedBorderColor) ?? previewColors.border"
-              :label="$t('settings.style.themes3.editor.border_color')"
+              :fallback="computeColor(editedBorderColor)"
+              :label="$t('settings.style.themes3.editor.Border_color')"
               :disabled="!isBorderColorPresent"
-              :hide-optional-checkbox="true"
             />
             <Tooltip
               v-if="componentHas('Border')"
@@ -277,14 +269,6 @@
             >
               <Checkbox v-model="isBorderColorPresent" />
             </Tooltip>
-            <OpacityInput
-              v-model="editedOpacity"
-              :disabled="!isOpacityPresent"
-              :label="$t('settings.style.themes3.editor.opacity')"
-            />
-            <Tooltip :text="$t('settings.style.themes3.editor.include_in_rule')">
-              <Checkbox v-model="isOpacityPresent" />
-            </Tooltip>
           </div>
           <div
             key="shadow"
@@ -434,7 +418,6 @@
             v-model="draftVirtualDirective"
             :fallback="computeColor(draftVirtualDirective)"
             :label="$t('settings.style.themes3.editor.variables.virtual_color')"
-            :hide-optional-checkbox="true"
           />
         </div>
       </div>
diff --git a/src/components/settings_modal/tabs/theme_tab/theme_tab.vue b/src/components/settings_modal/tabs/theme_tab/theme_tab.vue
index 43046104c..146df43a9 100644
--- a/src/components/settings_modal/tabs/theme_tab/theme_tab.vue
+++ b/src/components/settings_modal/tabs/theme_tab/theme_tab.vue
@@ -187,14 +187,14 @@
               name="accentColor"
               :fallback="previewTheme.colors?.link"
               :label="$t('settings.accent')"
-              :show-optional-checkbox="typeof linkColorLocal !== 'undefined'"
+              :show-optional-tickbox="typeof linkColorLocal !== 'undefined'"
             />
             <ColorInput
               v-model="linkColorLocal"
               name="linkColor"
               :fallback="previewTheme.colors?.accent"
               :label="$t('settings.links')"
-              :show-optional-checkbox="typeof accentColorLocal !== 'undefined'"
+              :show-optional-tickbox="typeof accentColorLocal !== 'undefined'"
             />
             <ContrastRatio :contrast="previewContrast.bgLink" />
           </div>
diff --git a/src/components/shadow_control/shadow_control.js b/src/components/shadow_control/shadow_control.js
index d137f0175..22642340d 100644
--- a/src/components/shadow_control/shadow_control.js
+++ b/src/components/shadow_control/shadow_control.js
@@ -123,7 +123,7 @@ export default {
       try {
         let result
         const serialized = this.cValue.map(x => serializeShadow(x)).join(',')
-        serialized.split(/,/).map(deserializeShadow) // validate
+        deserializeShadow(serialized) // validate
         const expandedShadow = flattenDeep(findShadow(this.cValue, { dynamicVars: {}, staticVars: this.staticVars }))
         const fixedShadows = expandedShadow.map(x => ({ ...x, color: console.log(x) || rgb2hex(x.color) }))
 
diff --git a/src/components/shadow_control/shadow_control.vue b/src/components/shadow_control/shadow_control.vue
index 7bb5ccd14..056eae0f7 100644
--- a/src/components/shadow_control/shadow_control.vue
+++ b/src/components/shadow_control/shadow_control.vue
@@ -168,7 +168,7 @@
           :disabled="disabled || !present"
           :label="$t('settings.style.common.color')"
           :fallback="getColorFallback"
-          :show-optional-checkbox="false"
+          :show-optional-tickbox="false"
           name="shadow"
           @update:modelValue="e => updateProperty('color', e)"
         />
diff --git a/src/i18n/en.json b/src/i18n/en.json
index 3d531ad96..10d4fdb53 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -770,17 +770,9 @@
           "cBlue": "Blue color",
           "cGreen": "Green color",
           "cOrange": "Orange color",
-          "wallpaper": "Wallpaper",
           "extra1": "Extra 1",
           "extra2": "Extra 2",
           "extra3": "Extra 3",
-          "extra4": "Extra 4",
-          "extra5": "Extra 5",
-          "extra6": "Extra 6",
-          "extra7": "Extra 7",
-          "extra8": "Extra 8",
-          "extra9": "Extra 9",
-          "extra10": "Extra 10",
           "v2_unsupported": "Older v2 themes don't support palettes. Switch to v3 theme to make use of palettes"
         },
         "editor": {
@@ -801,7 +793,6 @@
           "text_color": "Text color",
           "icon_color": "Icon color",
           "link_color": "Link color",
-          "contrast": "Text contrast",
           "border_color": "Border color",
           "include_in_rule": "Add to rule",
           "test_string": "TEST",
@@ -949,11 +940,7 @@
         "override": "Override",
         "shadow_id": "Shadow #{value}",
         "offset": "Shadow offset",
-        "zoom": "Zoom",
-        "offset-x": "x:",
-        "offset-y": "y:",
         "light_grid": "Use light checkerboard",
-        "color_override": "Use different color",
         "name": "Name",
         "blur": "Blur",
         "spread": "Spread",
diff --git a/src/services/theme_data/iss_deserializer.js b/src/services/theme_data/iss_deserializer.js
index 196007e65..a007bea28 100644
--- a/src/services/theme_data/iss_deserializer.js
+++ b/src/services/theme_data/iss_deserializer.js
@@ -15,7 +15,7 @@ export const deserializeShadow = string => {
     // spread (optional)
     '(?:(-?[0-9]+(?:\\.[0-9]+)?)\\s+)?',
     // either hex, variable or function
-    '(#[0-9a-f]{6}|--[a-z0-9\\-_]+|\\$[a-z0-9\\-()_]+)',
+    '(#[0-9a-f]{6}|--[a-z\\-_]+|\\$[a-z\\-()_]+)',
     // opacity (optional)
     '(?:\\s+\\/\\s+([0-9]+(?:\\.[0-9]+)?)\\s*)?',
     // name
diff --git a/src/services/theme_data/theme2_to_theme3.js b/src/services/theme_data/theme2_to_theme3.js
index 9de1aca3c..bcc0c961b 100644
--- a/src/services/theme_data/theme2_to_theme3.js
+++ b/src/services/theme_data/theme2_to_theme3.js
@@ -354,6 +354,10 @@ export const convertTheme2To3 = (data) => {
         newRules.push({ ...rule, state: ['toggled'] })
         newRules.push({ ...rule, state: ['toggled', 'focus'] })
         newRules.push({ ...rule, state: ['pressed', 'focus'] })
+      }
+      if (key === 'buttonHover') {
+        newRules.push({ ...rule, state: ['toggled', 'hover'] })
+        newRules.push({ ...rule, state: ['pressed', 'hover'] })
         newRules.push({ ...rule, state: ['toggled', 'focus', 'hover'] })
         newRules.push({ ...rule, state: ['pressed', 'focus', 'hover'] })
       }
diff --git a/src/services/theme_data/theme_data_3.service.js b/src/services/theme_data/theme_data_3.service.js
index 890a06757..b05968813 100644
--- a/src/services/theme_data/theme_data_3.service.js
+++ b/src/services/theme_data/theme_data_3.service.js
@@ -63,62 +63,54 @@ export const findShadow = (shadows, { dynamicVars, staticVars }) => {
 }
 
 export const findColor = (color, { dynamicVars, staticVars }) => {
-  try {
-    if (typeof color !== 'string' || (!color.startsWith('--') && !color.startsWith('$'))) return color
-    let targetColor = null
-    if (color.startsWith('--')) {
-      // Modifier support is pretty much for v2 themes only
-      const [variable, modifier] = color.split(/,/g).map(str => str.trim())
-      const variableSlot = variable.substring(2)
-      if (variableSlot === 'stack') {
-        const { r, g, b } = dynamicVars.stacked
+  if (typeof color !== 'string' || (!color.startsWith('--') && !color.startsWith('$'))) return color
+  let targetColor = null
+  if (color.startsWith('--')) {
+    // Modifier support is pretty much for v2 themes only
+    const [variable, modifier] = color.split(/,/g).map(str => str.trim())
+    const variableSlot = variable.substring(2)
+    if (variableSlot === 'stack') {
+      const { r, g, b } = dynamicVars.stacked
+      targetColor = { r, g, b }
+    } else if (variableSlot.startsWith('parent')) {
+      if (variableSlot === 'parent') {
+        const { r, g, b } = dynamicVars.lowerLevelBackground
         targetColor = { r, g, b }
-      } else if (variableSlot.startsWith('parent')) {
-        if (variableSlot === 'parent') {
-          const { r, g, b } = dynamicVars.lowerLevelBackground
-          targetColor = { r, g, b }
-        } else {
-          const virtualSlot = variableSlot.replace(/^parent/, '')
-          targetColor = convert(dynamicVars.lowerLevelVirtualDirectivesRaw[virtualSlot]).rgb
-        }
       } else {
-        switch (variableSlot) {
-          case 'inheritedBackground':
-            targetColor = convert(dynamicVars.inheritedBackground).rgb
-            break
-          case 'background':
-            targetColor = convert(dynamicVars.background).rgb
-            break
-          default:
-            targetColor = convert(staticVars[variableSlot]).rgb
-        }
+        const virtualSlot = variableSlot.replace(/^parent/, '')
+        targetColor = convert(dynamicVars.lowerLevelVirtualDirectivesRaw[virtualSlot]).rgb
       }
-
-      if (modifier) {
-        const effectiveBackground = dynamicVars.lowerLevelBackground ?? targetColor
-        const isLightOnDark = relativeLuminance(convert(effectiveBackground).rgb) < 0.5
-        const mod = isLightOnDark ? 1 : -1
-        targetColor = brightness(Number.parseFloat(modifier) * mod, targetColor).rgb
+    } else {
+      switch (variableSlot) {
+        case 'inheritedBackground':
+          targetColor = convert(dynamicVars.inheritedBackground).rgb
+          break
+        case 'background':
+          targetColor = convert(dynamicVars.background).rgb
+          break
+        default:
+          targetColor = convert(staticVars[variableSlot]).rgb
       }
     }
 
-    if (color.startsWith('$')) {
-      try {
-        targetColor = process(color, colorFunctions, { findColor }, { dynamicVars, staticVars })
-      } catch (e) {
-        console.error('Failure executing color function', e)
-        targetColor = '#FF00FF'
-      }
+    if (modifier) {
+      const effectiveBackground = dynamicVars.lowerLevelBackground ?? targetColor
+      const isLightOnDark = relativeLuminance(convert(effectiveBackground).rgb) < 0.5
+      const mod = isLightOnDark ? 1 : -1
+      targetColor = brightness(Number.parseFloat(modifier) * mod, targetColor).rgb
     }
-    // Color references other color
-    return targetColor
-  } catch (e) {
-    throw new Error(`Couldn't find color "${color}", variables are:
-Static:
-${JSON.stringify(staticVars, null, 2)}
-Dynamic:
-${JSON.stringify(dynamicVars, null, 2)}`)
   }
+
+  if (color.startsWith('$')) {
+    try {
+      targetColor = process(color, colorFunctions, { findColor }, { dynamicVars, staticVars })
+    } catch (e) {
+      console.error('Failure executing color function', e)
+      targetColor = '#FF00FF'
+    }
+  }
+  // Color references other color
+  return targetColor
 }
 
 const getTextColorAlpha = (directives, intendedTextColor, dynamicVars, staticVars) => {
@@ -249,217 +241,212 @@ export const init = ({
   const nonEditableComponents = new Set(Object.values(components).filter(c => c.notEditable).map(c => c.name))
 
   const processCombination = (combination) => {
-    try {
-      const selector = ruleToSelector(combination, true)
-      const cssSelector = ruleToSelector(combination)
+    const selector = ruleToSelector(combination, true)
+    const cssSelector = ruleToSelector(combination)
 
-      const parentSelector = selector.split(/ /g).slice(0, -1).join(' ')
-      const soloSelector = selector.split(/ /g).slice(-1)[0]
+    const parentSelector = selector.split(/ /g).slice(0, -1).join(' ')
+    const soloSelector = selector.split(/ /g).slice(-1)[0]
 
-      const lowerLevelSelector = parentSelector
-      let lowerLevelBackground = computed[lowerLevelSelector]?.background
-      if (editMode && !lowerLevelBackground) {
-        // FIXME hack for editor until it supports handling component backgrounds
-        lowerLevelBackground = '#00FFFF'
-      }
-      const lowerLevelVirtualDirectives = computed[lowerLevelSelector]?.virtualDirectives
-      const lowerLevelVirtualDirectivesRaw = computed[lowerLevelSelector]?.virtualDirectivesRaw
+    const lowerLevelSelector = parentSelector
+    let lowerLevelBackground = computed[lowerLevelSelector]?.background
+    if (editMode && !lowerLevelBackground) {
+      // FIXME hack for editor until it supports handling component backgrounds
+      lowerLevelBackground = '#00FFFF'
+    }
+    const lowerLevelVirtualDirectives = computed[lowerLevelSelector]?.virtualDirectives
+    const lowerLevelVirtualDirectivesRaw = computed[lowerLevelSelector]?.virtualDirectivesRaw
 
-      const dynamicVars = computed[selector] || {
-        lowerLevelBackground,
-        lowerLevelVirtualDirectives,
-        lowerLevelVirtualDirectivesRaw
+    const dynamicVars = computed[selector] || {
+      lowerLevelBackground,
+      lowerLevelVirtualDirectives,
+      lowerLevelVirtualDirectivesRaw
+    }
+
+    // Inheriting all of the applicable rules
+    const existingRules = ruleset.filter(findRules(combination))
+    const computedDirectives =
+          existingRules
+            .map(r => r.directives)
+            .reduce((acc, directives) => ({ ...acc, ...directives }), {})
+    const computedRule = {
+      ...combination,
+      directives: computedDirectives
+    }
+
+    computed[selector] = computed[selector] || {}
+    computed[selector].computedRule = computedRule
+    computed[selector].dynamicVars = dynamicVars
+
+    if (virtualComponents.has(combination.component)) {
+      const virtualName = [
+        '--',
+        combination.component.toLowerCase(),
+        combination.variant === 'normal'
+          ? ''
+          : combination.variant[0].toUpperCase() + combination.variant.slice(1).toLowerCase(),
+        ...sortBy(combination.state.filter(x => x !== 'normal')).map(state => state[0].toUpperCase() + state.slice(1).toLowerCase())
+      ].join('')
+
+      let inheritedTextColor = computedDirectives.textColor
+      let inheritedTextAuto = computedDirectives.textAuto
+      let inheritedTextOpacity = computedDirectives.textOpacity
+      let inheritedTextOpacityMode = computedDirectives.textOpacityMode
+      const lowerLevelTextSelector = [...selector.split(/ /g).slice(0, -1), soloSelector].join(' ')
+      const lowerLevelTextRule = computed[lowerLevelTextSelector]
+
+      if (inheritedTextColor == null || inheritedTextOpacity == null || inheritedTextOpacityMode == null) {
+        inheritedTextColor = computedDirectives.textColor ?? lowerLevelTextRule.textColor
+        inheritedTextAuto = computedDirectives.textAuto ?? lowerLevelTextRule.textAuto
+        inheritedTextOpacity = computedDirectives.textOpacity ?? lowerLevelTextRule.textOpacity
+        inheritedTextOpacityMode = computedDirectives.textOpacityMode ?? lowerLevelTextRule.textOpacityMode
       }
 
-      // Inheriting all of the applicable rules
-      const existingRules = ruleset.filter(findRules(combination))
-      const computedDirectives =
-            existingRules
-              .map(r => r.directives)
-              .reduce((acc, directives) => ({ ...acc, ...directives }), {})
-      const computedRule = {
+      const newTextRule = {
+        ...computedRule,
+        directives: {
+          ...computedRule.directives,
+          textColor: inheritedTextColor,
+          textAuto: inheritedTextAuto ?? 'preserve',
+          textOpacity: inheritedTextOpacity,
+          textOpacityMode: inheritedTextOpacityMode
+        }
+      }
+
+      dynamicVars.inheritedBackground = lowerLevelBackground
+      dynamicVars.stacked = convert(stacked[lowerLevelSelector]).rgb
+
+      const intendedTextColor = convert(findColor(inheritedTextColor, { dynamicVars, staticVars })).rgb
+      const textColor = newTextRule.directives.textAuto === 'no-auto'
+        ? intendedTextColor
+        : getTextColor(
+          convert(stacked[lowerLevelSelector]).rgb,
+          intendedTextColor,
+          newTextRule.directives.textAuto === 'preserve'
+        )
+      const virtualDirectives = computed[lowerLevelSelector].virtualDirectives || {}
+      const virtualDirectivesRaw = computed[lowerLevelSelector].virtualDirectivesRaw || {}
+
+      // Storing color data in lower layer to use as custom css properties
+      virtualDirectives[virtualName] = getTextColorAlpha(newTextRule.directives, textColor, dynamicVars)
+      virtualDirectivesRaw[virtualName] = textColor
+
+      computed[lowerLevelSelector].virtualDirectives = virtualDirectives
+      computed[lowerLevelSelector].virtualDirectivesRaw = virtualDirectivesRaw
+
+      return {
+        dynamicVars,
+        selector: cssSelector.split(/ /g).slice(0, -1).join(' '),
+        ...combination,
+        directives: {},
+        virtualDirectives: {
+          [virtualName]: getTextColorAlpha(newTextRule.directives, textColor, dynamicVars)
+        },
+        virtualDirectivesRaw: {
+          [virtualName]: textColor
+        }
+      }
+    } else {
+      computed[selector] = computed[selector] || {}
+
+      // TODO: DEFAULT TEXT COLOR
+      const lowerLevelStackedBackground = stacked[lowerLevelSelector] || convert(ultimateBackgroundColor).rgb
+
+      if (computedDirectives.background) {
+        let inheritRule = null
+        const variantRules = ruleset.filter(
+          findRules({
+            component: combination.component,
+            variant: combination.variant,
+            parent: combination.parent
+          })
+        )
+        const lastVariantRule = variantRules[variantRules.length - 1]
+        if (lastVariantRule) {
+          inheritRule = lastVariantRule
+        } else {
+          const normalRules = ruleset.filter(findRules({
+            component: combination.component,
+            parent: combination.parent
+          }))
+          const lastNormalRule = normalRules[normalRules.length - 1]
+          inheritRule = lastNormalRule
+        }
+
+        const inheritSelector = ruleToSelector({ ...inheritRule, parent: combination.parent }, true)
+        const inheritedBackground = computed[inheritSelector].background
+
+        dynamicVars.inheritedBackground = inheritedBackground
+
+        const rgb = convert(findColor(computedDirectives.background, { dynamicVars, staticVars })).rgb
+
+        if (!stacked[selector]) {
+          let blend
+          const alpha = computedDirectives.opacity ?? 1
+          if (alpha >= 1) {
+            blend = rgb
+          } else if (alpha <= 0) {
+            blend = lowerLevelStackedBackground
+          } else {
+            blend = alphaBlend(rgb, computedDirectives.opacity, lowerLevelStackedBackground)
+          }
+          stacked[selector] = blend
+          computed[selector].background = { ...rgb, a: computedDirectives.opacity ?? 1 }
+        }
+      }
+
+      if (computedDirectives.shadow) {
+        dynamicVars.shadow = flattenDeep(findShadow(flattenDeep(computedDirectives.shadow), { dynamicVars, staticVars }))
+      }
+
+      if (!stacked[selector]) {
+        computedDirectives.background = 'transparent'
+        computedDirectives.opacity = 0
+        stacked[selector] = lowerLevelStackedBackground
+        computed[selector].background = { ...lowerLevelStackedBackground, a: 0 }
+      }
+
+      dynamicVars.stacked = stacked[selector]
+      dynamicVars.background = computed[selector].background
+
+      const dynamicSlots = Object.entries(computedDirectives).filter(([k, v]) => k.startsWith('--'))
+
+      dynamicSlots.forEach(([k, v]) => {
+        const [type, value] = v.split('|').map(x => x.trim()) // woah, Extreme!
+        switch (type) {
+          case 'color': {
+            const color = findColor(value, { dynamicVars, staticVars })
+            dynamicVars[k] = color
+            if (combination.component === rootComponentName) {
+              staticVars[k.substring(2)] = color
+            }
+            break
+          }
+          case 'shadow': {
+            const shadow = value.split(/,/g).map(s => s.trim()).filter(x => x)
+            dynamicVars[k] = shadow
+            if (combination.component === rootComponentName) {
+              staticVars[k.substring(2)] = shadow
+            }
+            break
+          }
+          case 'generic': {
+            dynamicVars[k] = value
+            if (combination.component === rootComponentName) {
+              staticVars[k.substring(2)] = value
+            }
+            break
+          }
+        }
+      })
+
+      const rule = {
+        dynamicVars,
+        selector: cssSelector,
         ...combination,
         directives: computedDirectives
       }
 
-      computed[selector] = computed[selector] || {}
-      computed[selector].computedRule = computedRule
-      computed[selector].dynamicVars = dynamicVars
-
-      if (virtualComponents.has(combination.component)) {
-        const virtualName = [
-          '--',
-          combination.component.toLowerCase(),
-          combination.variant === 'normal'
-            ? ''
-            : combination.variant[0].toUpperCase() + combination.variant.slice(1).toLowerCase(),
-          ...sortBy(combination.state.filter(x => x !== 'normal')).map(state => state[0].toUpperCase() + state.slice(1).toLowerCase())
-        ].join('')
-
-        let inheritedTextColor = computedDirectives.textColor
-        let inheritedTextAuto = computedDirectives.textAuto
-        let inheritedTextOpacity = computedDirectives.textOpacity
-        let inheritedTextOpacityMode = computedDirectives.textOpacityMode
-        const lowerLevelTextSelector = [...selector.split(/ /g).slice(0, -1), soloSelector].join(' ')
-        const lowerLevelTextRule = computed[lowerLevelTextSelector]
-
-        if (inheritedTextColor == null || inheritedTextOpacity == null || inheritedTextOpacityMode == null) {
-          inheritedTextColor = computedDirectives.textColor ?? lowerLevelTextRule.textColor
-          inheritedTextAuto = computedDirectives.textAuto ?? lowerLevelTextRule.textAuto
-          inheritedTextOpacity = computedDirectives.textOpacity ?? lowerLevelTextRule.textOpacity
-          inheritedTextOpacityMode = computedDirectives.textOpacityMode ?? lowerLevelTextRule.textOpacityMode
-        }
-
-        const newTextRule = {
-          ...computedRule,
-          directives: {
-            ...computedRule.directives,
-            textColor: inheritedTextColor,
-            textAuto: inheritedTextAuto ?? 'preserve',
-            textOpacity: inheritedTextOpacity,
-            textOpacityMode: inheritedTextOpacityMode
-          }
-        }
-
-        dynamicVars.inheritedBackground = lowerLevelBackground
-        dynamicVars.stacked = convert(stacked[lowerLevelSelector]).rgb
-
-        const intendedTextColor = convert(findColor(inheritedTextColor, { dynamicVars, staticVars })).rgb
-        const textColor = newTextRule.directives.textAuto === 'no-auto'
-          ? intendedTextColor
-          : getTextColor(
-            convert(stacked[lowerLevelSelector]).rgb,
-            intendedTextColor,
-            newTextRule.directives.textAuto === 'preserve'
-          )
-        const virtualDirectives = computed[lowerLevelSelector].virtualDirectives || {}
-        const virtualDirectivesRaw = computed[lowerLevelSelector].virtualDirectivesRaw || {}
-
-        // Storing color data in lower layer to use as custom css properties
-        virtualDirectives[virtualName] = getTextColorAlpha(newTextRule.directives, textColor, dynamicVars)
-        virtualDirectivesRaw[virtualName] = textColor
-
-        computed[lowerLevelSelector].virtualDirectives = virtualDirectives
-        computed[lowerLevelSelector].virtualDirectivesRaw = virtualDirectivesRaw
-
-        return {
-          dynamicVars,
-          selector: cssSelector.split(/ /g).slice(0, -1).join(' '),
-          ...combination,
-          directives: {},
-          virtualDirectives: {
-            [virtualName]: getTextColorAlpha(newTextRule.directives, textColor, dynamicVars)
-          },
-          virtualDirectivesRaw: {
-            [virtualName]: textColor
-          }
-        }
-      } else {
-        computed[selector] = computed[selector] || {}
-
-        // TODO: DEFAULT TEXT COLOR
-        const lowerLevelStackedBackground = stacked[lowerLevelSelector] || convert(ultimateBackgroundColor).rgb
-
-        if (computedDirectives.background) {
-          let inheritRule = null
-          const variantRules = ruleset.filter(
-            findRules({
-              component: combination.component,
-              variant: combination.variant,
-              parent: combination.parent
-            })
-          )
-          const lastVariantRule = variantRules[variantRules.length - 1]
-          if (lastVariantRule) {
-            inheritRule = lastVariantRule
-          } else {
-            const normalRules = ruleset.filter(findRules({
-              component: combination.component,
-              parent: combination.parent
-            }))
-            const lastNormalRule = normalRules[normalRules.length - 1]
-            inheritRule = lastNormalRule
-          }
-
-          const inheritSelector = ruleToSelector({ ...inheritRule, parent: combination.parent }, true)
-          const inheritedBackground = computed[inheritSelector].background
-
-          dynamicVars.inheritedBackground = inheritedBackground
-
-          const rgb = convert(findColor(computedDirectives.background, { dynamicVars, staticVars })).rgb
-
-          if (!stacked[selector]) {
-            let blend
-            const alpha = computedDirectives.opacity ?? 1
-            if (alpha >= 1) {
-              blend = rgb
-            } else if (alpha <= 0) {
-              blend = lowerLevelStackedBackground
-            } else {
-              blend = alphaBlend(rgb, computedDirectives.opacity, lowerLevelStackedBackground)
-            }
-            stacked[selector] = blend
-            computed[selector].background = { ...rgb, a: computedDirectives.opacity ?? 1 }
-          }
-        }
-
-        if (computedDirectives.shadow) {
-          dynamicVars.shadow = flattenDeep(findShadow(flattenDeep(computedDirectives.shadow), { dynamicVars, staticVars }))
-        }
-
-        if (!stacked[selector]) {
-          computedDirectives.background = 'transparent'
-          computedDirectives.opacity = 0
-          stacked[selector] = lowerLevelStackedBackground
-          computed[selector].background = { ...lowerLevelStackedBackground, a: 0 }
-        }
-
-        dynamicVars.stacked = stacked[selector]
-        dynamicVars.background = computed[selector].background
-
-        const dynamicSlots = Object.entries(computedDirectives).filter(([k, v]) => k.startsWith('--'))
-
-        dynamicSlots.forEach(([k, v]) => {
-          const [type, value] = v.split('|').map(x => x.trim()) // woah, Extreme!
-          switch (type) {
-            case 'color': {
-              const color = findColor(value, { dynamicVars, staticVars })
-              dynamicVars[k] = color
-              if (combination.component === rootComponentName) {
-                staticVars[k.substring(2)] = color
-              }
-              break
-            }
-            case 'shadow': {
-              const shadow = value.split(/,/g).map(s => s.trim()).filter(x => x)
-              dynamicVars[k] = shadow
-              if (combination.component === rootComponentName) {
-                staticVars[k.substring(2)] = shadow
-              }
-              break
-            }
-            case 'generic': {
-              dynamicVars[k] = value
-              if (combination.component === rootComponentName) {
-                staticVars[k.substring(2)] = value
-              }
-              break
-            }
-          }
-        })
-
-        const rule = {
-          dynamicVars,
-          selector: cssSelector,
-          ...combination,
-          directives: computedDirectives
-        }
-
-        return rule
-      }
-    } catch (e) {
-      const { component, variant, state } = combination
-      throw new Error(`Error processing combination ${component}.${variant}:${state.join(':')}: ${e}`)
+      return rule
     }
   }