proper fallbacks and contrast ratio for component style editor

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/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/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 = []
 
@@ -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>
+            <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.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

@@ -793,6 +793,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",