proper color fallbacks

src/components/color_input/color_input.vue

@@ -130,7 +130,7 @@ export default {
       return this.modelValue === 'transparent'
     },
     computedColor () {
-      return this.modelValue && this.modelValue.startsWith('--')
+      return this.modelValue && (this.modelValue.startsWith('--') || this.modelValue.startsWith('$'))
     }
   },
   methods: {

src/components/settings_modal/tabs/style_tab/style_tab.js

@@ -15,7 +15,7 @@ import Tooltip from 'src/components/tooltip/tooltip.vue'
 import ContrastRatio from 'src/components/contrast_ratio/contrast_ratio.vue'
 import Preview from '../theme_tab/theme_preview.vue'
 
-import { init } from 'src/services/theme_data/theme_data_3.service.js'
+import { init, findColor } from 'src/services/theme_data/theme_data_3.service.js'
 import {
   getCssRules,
   getScopedVersion
@@ -23,7 +23,7 @@ import {
 import { serializeShadow, serialize } from 'src/services/theme_data/iss_serializer.js'
 import { parseShadow, deserialize } from 'src/services/theme_data/iss_deserializer.js'
 import {
-  // rgb2hex,
+  rgb2hex,
   hex2rgb,
   getContrastRatio
 } from 'src/services/color_convert/color_convert.js'
@@ -73,6 +73,7 @@ export default {
     Preview
   },
   setup () {
+    const exports = {}
     // All rules that are made by editor
     const allEditedRules = reactive({})
 
@@ -136,7 +137,6 @@ export default {
     const selectedPaletteId = ref(0)
     const selectedPalette = computed({
       get () {
-        console.log(palettes, toValue(palettes))
         return palettes[selectedPaletteId.value]
       },
       set (newPalette) {
@@ -327,6 +327,8 @@ export default {
     const isLinkColorPresent = isElementPresent('Link', 'textColor', '#000080')
     const editedIconColor = getEditedElement('Icon', 'textColor')
     const isIconColorPresent = isElementPresent('Icon', 'textColor', '#909090')
+    const editedBorderColor = getEditedElement('Border', 'textColor')
+    const isBorderColorPresent = isElementPresent('Border', 'textColor', '#909090')
     // TODO this is VERY primitive right now, need to make it
     // support variables, fallbacks etc.
     const getContrast = (bg, text) => {
@@ -353,7 +355,6 @@ export default {
     }
 
     const normalizeShadows = (shadows) => {
-      console.log('NORMALIZE')
       return shadows?.map(shadow => {
         if (typeof shadow === 'object') {
           return shadow
@@ -626,6 +627,14 @@ export default {
       value: 'foobar'
     })
 
+    exports.computeColor = (color) => {
+      const computedColor = findColor(color, { dynamicVars: {}, staticVars: selectedPalette.value })
+      if (computedColor) {
+        return rgb2hex(computedColor)
+      }
+      return null
+    }
+
     const overallPreviewRules = ref()
     const updateOverallPreview = () => {
       try {
@@ -682,6 +691,7 @@ export default {
         author.value = metaIn.author
         website.value = metaIn.website
 
+        onPalettesUpdate(palettesIn.map(x => ({ name: x.variant, ...x.directives })))
         console.log('PALETTES', palettesIn)
 
         Object.keys(allEditedRules).forEach((k) => delete allEditedRules[k])
@@ -757,6 +767,8 @@ export default {
       isLinkColorPresent,
       editedIconColor,
       isIconColorPresent,
+      editedBorderColor,
+      isBorderColorPresent,
       getContrast,
 
       // component shadow
@@ -788,7 +800,9 @@ export default {
 
       // ## Export and Import
       exportStyle,
-      importStyle
+      importStyle,
+
+      ...exports
     }
   }
 }

src/components/settings_modal/tabs/style_tab/style_tab.vue

@@ -165,6 +165,7 @@
           >
             <ColorInput
               v-model="editedBackgroundColor"
+              :fallback="computeColor(editedBackgroundColor)"
               :disabled="!isBackgroundColorPresent"
               :label="$t('settings.style.themes3.editor.background')"
             />
@@ -182,6 +183,7 @@
             <ColorInput
               v-if="componentHas('Text')"
               v-model="editedTextColor"
+              :fallback="computeColor(editedTextColor)"
               :label="$t('settings.style.themes3.editor.text_color')"
               :disabled="!isTextColorPresent"
             />
@@ -230,6 +232,7 @@
             <ColorInput
               v-if="componentHas('Link')"
               v-model="editedLinkColor"
+              :fallback="computeColor(editedLinkColor)"
               :label="$t('settings.style.themes3.editor.link_color')"
               :disabled="!isLinkColorPresent"
             />
@@ -242,6 +245,7 @@
             <ColorInput
               v-if="componentHas('Icon')"
               v-model="editedIconColor"
+              :fallback="computeColor(editedIconColor)"
               :label="$t('settings.style.themes3.editor.icon_color')"
               :disabled="!isIconColorPresent"
             />
@@ -251,6 +255,19 @@
             >
               <Checkbox v-model="isIconColorPresent" />
             </Tooltip>
+            <ColorInput
+              v-if="componentHas('Border')"
+              v-model="editedBorderColor"
+              :fallback="computeColor(editedBorderColor)"
+              :label="$t('settings.style.themes3.editor.Border_color')"
+              :disabled="!isBorderColorPresent"
+            />
+            <Tooltip
+              v-if="componentHas('Border')"
+              :text="$t('settings.style.themes3.editor.include_in_rule')"
+            >
+              <Checkbox v-model="isBorderColorPresent" />
+            </Tooltip>
           </div>
           <div
             key="shadow"
@@ -397,6 +414,7 @@
           <ColorInput
             v-if="selectedVirtualDirectiveValType === 'color'"
             v-model="selectedVirtualDirectiveParsed"
+            :fallback="computeColor(selectedVirtualDirectiveParsed)"
             :label="$t('settings.style.themes3.editor.variables.virtual_color')"
           />
         </div>

src/services/theme_data/theme_data_3.service.js

@@ -62,7 +62,7 @@ const findShadow = (shadows, { dynamicVars, staticVars }) => {
   })
 }
 
-const findColor = (color, { dynamicVars, staticVars }) => {
+export const findColor = (color, { dynamicVars, staticVars }) => {
   if (typeof color !== 'string' || (!color.startsWith('--') && !color.startsWith('$'))) return color
   let targetColor = null
   if (color.startsWith('--')) {