Merge branch 'themes3-grand-finale-maybe' into shigusegubu-themes3

2024-10-25 16:58:48 +03:00 · 2024-10-25 16:58:48 +03:00 · 0562fe1c44
commit 0562fe1c44
parent 461eb8752d b55aeb54f6
13 changed files with 534 additions and 343 deletions
--- 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' && showOptionalTickbox"
+      v-if="typeof fallback !== 'undefined' && showOptionalCheckbox && !hideOptionalCheckbox"
      :model-value="present"
      :disabled="disabled"
      class="opt"
@ -112,10 +112,16 @@ export default {
      default: false
    },
    // Show "optional" tickbox, for when value might become mandatory
-    showOptionalTickbox: {
+    showOptionalCheckbox: {
      required: false,
      type: Boolean,
      default: true
+    },
+    // Force "optional" tickbox to hide
+    hideOptionalCheckbox: {
+      required: false,
+      type: Boolean,
+      default: false
    }
  },
  emits: ['update:modelValue'],
--- a/src/components/component_preview/component_preview.vue
+++ b/src/components/component_preview/component_preview.vue
@ -11,19 +11,50 @@
    <!-- 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?.y"
+      :value="shadow?.x"
      :disabled="disabled"
      :class="{ disabled }"
-      class="input input-number y-shift-number"
-      type="number"
-      @input="e => updateProperty('y', e.target.value)"
+      class="input input-range x-shift-slider"
+      type="range"
+      max="20"
+      min="-20"
+      @input="e => updateProperty('x', e.target.value)"
    >
    <input
      v-show="shadowControl && !hideControls"
@ -43,7 +74,7 @@
      <div
        class="preview-block"
        :class="previewClass"
-        :style="previewStyle"
+        :style="style"
      >
        {{ $t('settings.style.themes3.editor.test_string') }}
      </div>
@ -53,43 +84,42 @@
        </div>
      </div>
    </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 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>
  </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
+    Checkbox,
+    ColorInput
  },
  props: [
    'shadow',
@ -103,10 +133,21 @@ export default {
  emits: ['update:shadow'],
  data () {
    return {
-      lightGrid: false
+      colorOverride: null,
+      lightGrid: false,
+      zoom: 100
    }
  },
  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'
    }
@ -121,16 +162,27 @@ export default {
 <style lang="scss">
 .ComponentPreview {
  display: grid;
-  grid-template-columns: 3em 1fr 3em;
-  grid-template-rows: 2em 1fr 2em;
+  grid-template-columns: 1em 1fr 1fr 1em;
+  grid-template-rows: 2em 1fr 1fr 1fr 1em 2em max-content;
  grid-template-areas:
-    ".       header  y-num  "
-    ".       preview y-slide"
-    "x-num   x-slide .      "
-    "options options options";
+    "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";
  grid-gap: 0.5em;
-  max-width: 25em;
-  max-height: 25em;
+
+  &: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;
+  }

  .header {
    grid-area: header;
@ -155,8 +207,15 @@ 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;
  }

@ -166,6 +225,19 @@ 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 {
@ -175,10 +247,6 @@ export default {
    min-width: 10em;
  }

-  .y-shift-number {
-    grid-area: y-num;
-  }
-
  .y-shift-slider {
    grid-area: y-slide;
    writing-mode: vertical-lr;
--- a/src/components/contrast_ratio/contrast_ratio.vue
+++ b/src/components/contrast_ratio/contrast_ratio.vue
@ -3,39 +3,44 @@
    v-if="contrast"
    class="contrast-ratio"
  >
-    <span
-      :title="hint"
+    <span v-if="showRatio">
+      {{ contrast.text }}
+    </span>
+    <Tooltip
+      :text="hint"
      class="rating"
    >
      <span v-if="contrast.aaa">
-        <FAIcon icon="thumbs-up" />
+        <FAIcon icon="thumbs-up" :size="showRatio ? 'lg' : ''" />
      </span>
      <span v-if="!contrast.aaa && contrast.aa">
-        <FAIcon icon="adjust" />
+        <FAIcon icon="adjust" :size="showRatio ? 'lg' : ''" />
      </span>
      <span v-if="!contrast.aaa && !contrast.aa">
-        <FAIcon icon="exclamation-triangle" />
+        <FAIcon icon="exclamation-triangle" :size="showRatio ? 'lg' : ''" />
      </span>
-    </span>
-    <span
+    </Tooltip>
+    <Tooltip
      v-if="contrast && large"
+      :text="hint_18pt"
      class="rating"
-      :title="hint_18pt"
    >
      <span v-if="contrast.laaa">
-        <FAIcon icon="thumbs-up" />
+        <FAIcon icon="thumbs-up" :size="showRatio ? 'large' : ''" />
      </span>
      <span v-if="!contrast.laaa && contrast.laa">
-        <FAIcon icon="adjust" />
+        <FAIcon icon="adjust" :size="showRatio ? 'lg' : ''" />
      </span>
      <span v-if="!contrast.laaa && !contrast.laa">
-        <FAIcon icon="exclamation-triangle" />
+        <FAIcon icon="exclamation-triangle" :size="showRatio ? 'lg' : ''" />
      </span>
-    </span>
+    </Tooltip>
  </span>
 </template>

 <script>
+import Tooltip from 'src/components/tooltip/tooltip.vue'
+
 import { library } from '@fortawesome/fontawesome-svg-core'
 import {
  faAdjust,
@ -62,8 +67,16 @@ 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')
@ -87,8 +100,7 @@ export default {
 .contrast-ratio {
  display: flex;
  justify-content: flex-end;
-  margin-top: -4px;
-  margin-bottom: 5px;
+  align-items: baseline;

  .label {
    margin-right: 1em;
@ -96,7 +108,6 @@ export default {

  .rating {
    display: inline-block;
-    text-align: center;
    margin-left: 0.5em;
  }
 }
--- a/src/components/palette_editor/palette_editor.vue
+++ b/src/components/palette_editor/palette_editor.vue
@ -75,9 +75,17 @@ const paletteKeys = [
  'cBlue',
  'cGreen',
  'cOrange',
+  'wallpaper',
  'extra1',
  'extra2',
-  'extra3'
+  'extra3',
+  'extra4',
+  'extra5',
+  'extra6',
+  'extra7',
+  'extra8',
+  'extra9',
+  'extra10'
 ]

 const fallback = (key) => {
@ -88,6 +96,9 @@ const fallback = (key) => {
    return props.modelValue.accent
  }
  if (key.startsWith('extra')) {
+    return '#FF00FF'
+  }
+  if (key.startsWith('wallpaper')) {
    return '#008080'
  }
 }
@ -105,7 +116,7 @@ const updatePalette = (paletteKey, value) => {
  display: grid;
  justify-content: space-around;
  grid-template-columns: repeat(4, 1fr);
-  grid-template-rows: repeat(3, 1fr) auto;
+  grid-template-rows: repeat(5, 1fr) auto;
  grid-gap: 0.5em;
  align-items: baseline;

--- a/src/components/settings_modal/tabs/style_tab/style_tab.js
+++ b/src/components/settings_modal/tabs/style_tab/style_tab.js
@ -340,9 +340,7 @@ export default {
    exports.editedBorderColor = getEditedElement('Border', 'textColor')
    exports.isBorderColorPresent = isElementPresent('Border', 'textColor', '#909090')

-    // TODO this is VERY primitive right now, need to make it
-    // support variables, fallbacks etc.
-    exports.getContrast = (bg, text) => {
+    const getContrast = (bg, text) => {
      try {
        const bgRgb = hex2rgb(bg)
        const textRgb = hex2rgb(text)
@ -464,6 +462,24 @@ 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 = []

@ -600,16 +616,23 @@ export default {
        return virtualDirectives[selectedVirtualDirectiveId.value].valType
      },
      set (value) {
-        virtualDirectives[selectedVirtualDirectiveId.value].valType = value
+        const newValType = value
+        let newValue
        switch (value) {
          case 'shadow':
-            virtualDirectives[selectedVirtualDirectiveId.value].value = '0 0 0 #000000'
+            newValue = '0 0 0 #000000 / 1'
            break
          case 'color':
-            virtualDirectives[selectedVirtualDirectiveId.value].value = '#000000'
+            newValue = '#000000'
            break
          default:
-            virtualDirectives[selectedVirtualDirectiveId.value].value = 'none'
+            newValue = 'none'
+        }
+        const newName = virtualDirectives[selectedVirtualDirectiveId.value].name
+        virtualDirectives[selectedVirtualDirectiveId.value] = {
+          name: newName,
+          value: newValue,
+          valType: newValType
        }
      }
    })
@ -664,6 +687,14 @@ 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',
@ -678,6 +709,13 @@ 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 = () => {
@ -694,10 +732,18 @@ 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: [
-            ...editorFriendlyToOriginal.value,
-            paletteRule
+            paletteRule,
+            virtualDirectivesRule,
+            ...editorFriendlyToOriginal.value
          ],
          ultimateBackgroundColor: '#000000',
          liteMode: true,
@ -726,7 +772,8 @@ export default {
      parser: (string) => deserialize(string),
      onImport (parsed, filename) {
        const editorComponents = parsed.filter(x => x.component.startsWith('@'))
-        const rules = 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 metaIn = editorComponents.find(x => x.component === '@meta').directives
        const palettesIn = editorComponents.filter(x => x.component === '@palette')

@ -735,8 +782,16 @@ 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])

@ -753,6 +808,7 @@ export default {
      return [
        metaOut.value,
        palettesOut.value,
+        virtualDirectivesOut.value,
        serialize(editorFriendlyToOriginal.value)
      ].join('\n\n')
    })
--- a/src/components/settings_modal/tabs/style_tab/style_tab.vue
+++ b/src/components/settings_modal/tabs/style_tab/style_tab.vue
@ -166,27 +166,21 @@
          >
            <ColorInput
              v-model="editedBackgroundColor"
-              :fallback="computeColor(editedBackgroundColor)"
+              :fallback="computeColor(editedBackgroundColor) ?? previewColors.background"
              :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)"
+              :fallback="computeColor(editedTextColor) ?? previewColors.text"
              :label="$t('settings.style.themes3.editor.text_color')"
              :disabled="!isTextColorPresent"
+              :hide-optional-checkbox="true"
            />
            <Tooltip
              v-if="componentHas('Text')"
@ -194,7 +188,10 @@
            >
              <Checkbox v-model="isTextColorPresent" />
            </Tooltip>
-            <div class="style-control suboption">
+            <div
+              v-if="componentHas('Text')"
+              class="style-control suboption"
+            >
              <label
                for="textAuto"
                class="label"
@ -224,18 +221,27 @@
            >
              <Checkbox v-model="isTextAutoPresent" />
            </Tooltip>
-            <div>
-              <ContrastRatio :contrast="getContrast(editedBackgroundColor, editedTextColor)" />
+            <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>
-            <div>
-              <!-- spacer for missing checkbox -->
+            <div v-if="componentHas('Text')">
            </div>
            <ColorInput
              v-if="componentHas('Link')"
              v-model="editedLinkColor"
-              :fallback="computeColor(editedLinkColor)"
+              :fallback="computeColor(editedLinkColor) ?? previewColors.link"
              :label="$t('settings.style.themes3.editor.link_color')"
              :disabled="!isLinkColorPresent"
+              :hide-optional-checkbox="true"
            />
            <Tooltip
              v-if="componentHas('Link')"
@ -246,9 +252,10 @@
            <ColorInput
              v-if="componentHas('Icon')"
              v-model="editedIconColor"
-              :fallback="computeColor(editedIconColor)"
+              :fallback="computeColor(editedIconColor) ?? previewColors.icon"
              :label="$t('settings.style.themes3.editor.icon_color')"
              :disabled="!isIconColorPresent"
+              :hide-optional-checkbox="true"
            />
            <Tooltip
              v-if="componentHas('Icon')"
@ -259,9 +266,10 @@
            <ColorInput
              v-if="componentHas('Border')"
              v-model="editedBorderColor"
-              :fallback="computeColor(editedBorderColor)"
-              :label="$t('settings.style.themes3.editor.Border_color')"
+              :fallback="computeColor(editedBorderColor) ?? previewColors.border"
+              :label="$t('settings.style.themes3.editor.border_color')"
              :disabled="!isBorderColorPresent"
+              :hide-optional-checkbox="true"
            />
            <Tooltip
              v-if="componentHas('Border')"
@ -269,6 +277,14 @@
            >
              <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"
@ -418,6 +434,7 @@
            v-model="draftVirtualDirective"
            :fallback="computeColor(draftVirtualDirective)"
            :label="$t('settings.style.themes3.editor.variables.virtual_color')"
+            :hide-optional-checkbox="true"
          />
        </div>
      </div>
--- 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-tickbox="typeof linkColorLocal !== 'undefined'"
+              :show-optional-checkbox="typeof linkColorLocal !== 'undefined'"
            />
            <ColorInput
              v-model="linkColorLocal"
              name="linkColor"
              :fallback="previewTheme.colors?.accent"
              :label="$t('settings.links')"
-              :show-optional-tickbox="typeof accentColorLocal !== 'undefined'"
+              :show-optional-checkbox="typeof accentColorLocal !== 'undefined'"
            />
            <ContrastRatio :contrast="previewContrast.bgLink" />
          </div>
--- 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(',')
-        deserializeShadow(serialized) // validate
+        serialized.split(/,/).map(deserializeShadow) // validate
        const expandedShadow = flattenDeep(findShadow(this.cValue, { dynamicVars: {}, staticVars: this.staticVars }))
        const fixedShadows = expandedShadow.map(x => ({ ...x, color: console.log(x) || rgb2hex(x.color) }))

--- 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-tickbox="false"
+          :show-optional-checkbox="false"
          name="shadow"
          @update:modelValue="e => updateProperty('color', e)"
        />
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@ -770,9 +770,17 @@
          "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": {
@ -793,6 +801,7 @@
          "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",
@ -940,7 +949,11 @@
        "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",
--- 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-z\\-_]+|\\$[a-z\\-()_]+)',
+    '(#[0-9a-f]{6}|--[a-z0-9\\-_]+|\\$[a-z0-9\\-()_]+)',
    // opacity (optional)
    '(?:\\s+\\/\\s+([0-9]+(?:\\.[0-9]+)?)\\s*)?',
    // name
--- a/src/services/theme_data/theme2_to_theme3.js
+++ b/src/services/theme_data/theme2_to_theme3.js
@ -354,10 +354,6 @@ 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'] })
      }
--- a/src/services/theme_data/theme_data_3.service.js
+++ b/src/services/theme_data/theme_data_3.service.js
@ -63,54 +63,62 @@ export const findShadow = (shadows, { dynamicVars, staticVars }) => {
 }

 export const findColor = (color, { dynamicVars, staticVars }) => {
-  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
+  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
        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 {
-        const virtualSlot = variableSlot.replace(/^parent/, '')
-        targetColor = convert(dynamicVars.lowerLevelVirtualDirectivesRaw[virtualSlot]).rgb
+        switch (variableSlot) {
+          case 'inheritedBackground':
+            targetColor = convert(dynamicVars.inheritedBackground).rgb
+            break
+          case 'background':
+            targetColor = convert(dynamicVars.background).rgb
+            break
+          default:
+            targetColor = convert(staticVars[variableSlot]).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 (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
      }
    }

-    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
+    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
+  } 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) => {
@ -241,212 +249,217 @@ export const init = ({
  const nonEditableComponents = new Set(Object.values(components).filter(c => c.notEditable).map(c => c.name))

  const processCombination = (combination) => {
-    const selector = ruleToSelector(combination, true)
-    const cssSelector = ruleToSelector(combination)
+    try {
+      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
-    }
-
-    // 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
+      const dynamicVars = computed[selector] || {
+        lowerLevelBackground,
+        lowerLevelVirtualDirectives,
+        lowerLevelVirtualDirectivesRaw
      }

-      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,
+      // 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
      }

-      return rule
+      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}`)
    }
  }