proper fallbacks and contrast ratio for component style editor

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 = []
 
@@ -678,6 +694,14 @@ export default {
       return null
     }
 
+    exports.contrast = computed(() => {
+      console.log('APR', applicablePreviewRules.value)
+      return getContrast(
+        exports.computeColor(previewColors.value.background),
+        exports.computeColor(previewColors.value.text)
+      )
+    })
+
     const overallPreviewRules = ref()
     exports.overallPreviewRules = overallPreviewRules
     exports.updateOverallPreview = () => {

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>

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>