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

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'],

src/components/component_preview/component_preview.vue

@@ -11,20 +11,51 @@
     <!-- 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>
-    <input
+    <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 y-shift-number"
+        class="input input-number"
         type="number"
         @input="e => updateProperty('y', e.target.value)"
       >
+    </label>
+    <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)"
+    >
     <input
       v-show="shadowControl && !hideControls"
       :value="shadow?.y"
@@ -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
+    <div class="assists">
-      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="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-columns: 1em 1fr 1fr 1em;
-  grid-template-rows: 2em 1fr 2em;
+  grid-template-rows: 2em 1fr 1fr 1fr 1em 2em max-content;
   grid-template-areas:
-    ".       header  y-num  "
+    "header     header     header     header "
-    ".       preview y-slide"
+    "preview    preview    preview    y-slide"
-    "x-num   x-slide .      "
+    "preview    preview    preview    y-slide"
-    "options options options";
+    "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;

src/components/contrast_ratio/contrast_ratio.vue

@@ -3,39 +3,44 @@
     v-if="contrast"
     class="contrast-ratio"
   >
-    <span
+    <span v-if="showRatio">
-      :title="hint"
+      {{ 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>
+    </Tooltip>
-    <span
+    <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;
+  align-items: baseline;
-  margin-bottom: 5px;
 
   .label {
     margin-right: 1em;
@@ -96,7 +108,6 @@ export default {
 
   .rating {
     display: inline-block;
-    text-align: center;
     margin-left: 0.5em;
   }
 }

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;
 

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
+    const getContrast = (bg, text) => {
-    // support variables, fallbacks etc.
-    exports.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')
     })

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>
+            <div
-              <ContrastRatio :contrast="getContrast(editedBackgroundColor, editedTextColor)" />
+              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>
+            <div v-if="componentHas('Text')">
-              <!-- spacer for missing checkbox -->
             </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)"
+              :fallback="computeColor(editedBorderColor) ?? previewColors.border"
-              :label="$t('settings.style.themes3.editor.Border_color')"
+              :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>

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>

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) }))
 

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)"
         />

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",

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

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'] })
       }

src/services/theme_data/theme_data_3.service.js

@@ -63,6 +63,7 @@ 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('--')) {
@@ -111,6 +112,13 @@ export const findColor = (color, { dynamicVars, staticVars }) => {
     }
     // 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)}`)
+  }
 }
 
 const getTextColorAlpha = (directives, intendedTextColor, dynamicVars, staticVars) => {
@@ -241,6 +249,7 @@ 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)
 
@@ -448,6 +457,10 @@ export const init = ({
 
         return rule
       }
+    } catch (e) {
+      const { component, variant, state } = combination
+      throw new Error(`Error processing combination ${component}.${variant}:${state.join(':')}: ${e}`)
+    }
   }
 
   const processInnerComponent = (component, parent) => {