commit: 1ec1ba8d3ec762c838cc06e31fd5923451bd19b0
parent eeb2dbcb604e269257b42d0bfa6c759730d42478
Author: Henry Jameson <me@hjkos.com>
Date: Fri, 11 Oct 2024 20:48:46 +0300
proper color fallbacks
Diffstat:
4 files changed, 39 insertions(+), 7 deletions(-)
diff --git a/src/components/color_input/color_input.vue b/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: {
diff --git a/src/components/settings_modal/tabs/style_tab/style_tab.js b/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
}
}
}
diff --git a/src/components/settings_modal/tabs/style_tab/style_tab.vue b/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>
diff --git a/src/services/theme_data/theme_data_3.service.js b/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('--')) {
