overhaul how style-switcher makes state, removed tons of copy-paste
This commit is contained in:
parent
d52d181227
commit
88f83fc9fa
|
@ -14,7 +14,12 @@ import {
|
||||||
composePreset,
|
composePreset,
|
||||||
getThemes
|
getThemes
|
||||||
} from '../../services/style_setter/style_setter.js'
|
} from '../../services/style_setter/style_setter.js'
|
||||||
import { CURRENT_VERSION } from '../../services/theme_data/theme_data.service.js'
|
import {
|
||||||
|
CURRENT_VERSION,
|
||||||
|
SLOT_INHERITANCE,
|
||||||
|
DEFAULT_OPACITY,
|
||||||
|
getLayers
|
||||||
|
} from '../../services/theme_data/theme_data.service.js'
|
||||||
import ColorInput from '../color_input/color_input.vue'
|
import ColorInput from '../color_input/color_input.vue'
|
||||||
import RangeInput from '../range_input/range_input.vue'
|
import RangeInput from '../range_input/range_input.vue'
|
||||||
import OpacityInput from '../opacity_input/opacity_input.vue'
|
import OpacityInput from '../opacity_input/opacity_input.vue'
|
||||||
|
@ -67,55 +72,13 @@ export default {
|
||||||
keepRoundness: false,
|
keepRoundness: false,
|
||||||
keepFonts: false,
|
keepFonts: false,
|
||||||
|
|
||||||
textColorLocal: '',
|
...Object.keys(SLOT_INHERITANCE)
|
||||||
accentColorLocal: undefined,
|
.map(key => [key, ''])
|
||||||
linkColorLocal: undefined,
|
.reduce((acc, [key, val]) => ({ ...acc, [ key + 'ColorLocal' ]: val }), {}),
|
||||||
|
|
||||||
bgColorLocal: '',
|
...Object.keys(DEFAULT_OPACITY)
|
||||||
bgOpacityLocal: undefined,
|
.map(key => [key, undefined])
|
||||||
|
.reduce((acc, [key, val]) => ({ ...acc, [ key + 'OpacityLocal' ]: val }), {}),
|
||||||
underlayColorLocal: '',
|
|
||||||
underlayOpacityLocal: undefined,
|
|
||||||
|
|
||||||
fgColorLocal: '',
|
|
||||||
fgTextColorLocal: undefined,
|
|
||||||
fgLinkColorLocal: undefined,
|
|
||||||
|
|
||||||
btnColorLocal: undefined,
|
|
||||||
btnTextColorLocal: undefined,
|
|
||||||
btnOpacityLocal: undefined,
|
|
||||||
|
|
||||||
inputColorLocal: undefined,
|
|
||||||
inputTextColorLocal: undefined,
|
|
||||||
inputOpacityLocal: undefined,
|
|
||||||
|
|
||||||
panelColorLocal: undefined,
|
|
||||||
panelTextColorLocal: undefined,
|
|
||||||
panelLinkColorLocal: undefined,
|
|
||||||
panelFaintColorLocal: undefined,
|
|
||||||
panelOpacityLocal: undefined,
|
|
||||||
|
|
||||||
topBarColorLocal: undefined,
|
|
||||||
topBarTextColorLocal: undefined,
|
|
||||||
topBarLinkColorLocal: undefined,
|
|
||||||
|
|
||||||
alertErrorColorLocal: undefined,
|
|
||||||
alertWarningColorLocal: undefined,
|
|
||||||
|
|
||||||
badgeOpacityLocal: undefined,
|
|
||||||
badgeNotificationColorLocal: undefined,
|
|
||||||
|
|
||||||
borderColorLocal: undefined,
|
|
||||||
borderOpacityLocal: undefined,
|
|
||||||
|
|
||||||
faintColorLocal: undefined,
|
|
||||||
faintOpacityLocal: undefined,
|
|
||||||
faintLinkColorLocal: undefined,
|
|
||||||
|
|
||||||
cRedColorLocal: '',
|
|
||||||
cBlueColorLocal: '',
|
|
||||||
cGreenColorLocal: '',
|
|
||||||
cOrangeColorLocal: '',
|
|
||||||
|
|
||||||
shadowSelected: undefined,
|
shadowSelected: undefined,
|
||||||
shadowsLocal: {},
|
shadowsLocal: {},
|
||||||
|
@ -149,59 +112,14 @@ export default {
|
||||||
return Array.isArray(this.selected) ? 1 : 2
|
return Array.isArray(this.selected) ? 1 : 2
|
||||||
},
|
},
|
||||||
currentColors () {
|
currentColors () {
|
||||||
return {
|
return Object.keys(SLOT_INHERITANCE)
|
||||||
bg: this.bgColorLocal,
|
.map(key => [key, this[key + 'ColorLocal']])
|
||||||
text: this.textColorLocal,
|
.reduce((acc, [key, val]) => ({ ...acc, [ key ]: val }), {})
|
||||||
link: this.linkColorLocal,
|
|
||||||
|
|
||||||
fg: this.fgColorLocal,
|
|
||||||
fgText: this.fgTextColorLocal,
|
|
||||||
fgLink: this.fgLinkColorLocal,
|
|
||||||
|
|
||||||
accent: this.accentColorLocal,
|
|
||||||
|
|
||||||
underlay: this.underlayColorLocal,
|
|
||||||
|
|
||||||
panel: this.panelColorLocal,
|
|
||||||
panelText: this.panelTextColorLocal,
|
|
||||||
panelLink: this.panelLinkColorLocal,
|
|
||||||
panelFaint: this.panelFaintColorLocal,
|
|
||||||
|
|
||||||
input: this.inputColorLocal,
|
|
||||||
inputText: this.inputTextColorLocal,
|
|
||||||
|
|
||||||
topBar: this.topBarColorLocal,
|
|
||||||
topBarText: this.topBarTextColorLocal,
|
|
||||||
topBarLink: this.topBarLinkColorLocal,
|
|
||||||
|
|
||||||
btn: this.btnColorLocal,
|
|
||||||
btnText: this.btnTextColorLocal,
|
|
||||||
|
|
||||||
alertError: this.alertErrorColorLocal,
|
|
||||||
alertWarning: this.alertWarningColorLocal,
|
|
||||||
badgeNotification: this.badgeNotificationColorLocal,
|
|
||||||
|
|
||||||
faint: this.faintColorLocal,
|
|
||||||
faintLink: this.faintLinkColorLocal,
|
|
||||||
border: this.borderColorLocal,
|
|
||||||
|
|
||||||
cRed: this.cRedColorLocal,
|
|
||||||
cBlue: this.cBlueColorLocal,
|
|
||||||
cGreen: this.cGreenColorLocal,
|
|
||||||
cOrange: this.cOrangeColorLocal
|
|
||||||
}
|
|
||||||
},
|
},
|
||||||
currentOpacity () {
|
currentOpacity () {
|
||||||
return {
|
return Object.keys(DEFAULT_OPACITY)
|
||||||
bg: this.bgOpacityLocal,
|
.map(key => [key, this[key + 'OpacityLocal']])
|
||||||
btn: this.btnOpacityLocal,
|
.reduce((acc, [key, val]) => ({ ...acc, [ key + 'OpacityLocal' ]: val }), {})
|
||||||
input: this.inputOpacityLocal,
|
|
||||||
panel: this.panelOpacityLocal,
|
|
||||||
topBar: this.topBarOpacityLocal,
|
|
||||||
border: this.borderOpacityLocal,
|
|
||||||
faint: this.faintOpacityLocal,
|
|
||||||
underlay: this.underlayOpacityLocal
|
|
||||||
}
|
|
||||||
},
|
},
|
||||||
currentRadii () {
|
currentRadii () {
|
||||||
return {
|
return {
|
||||||
|
@ -237,63 +155,45 @@ export default {
|
||||||
laa: ratio >= 3,
|
laa: ratio >= 3,
|
||||||
laaa: ratio >= 4.5
|
laaa: ratio >= 4.5
|
||||||
})
|
})
|
||||||
|
const colorsConverted = Object.entries(colors).reduce((acc, [key, value]) => ({ ...acc, [key]: colorConvert(value) }), {})
|
||||||
|
|
||||||
// fgsfds :DDDD
|
const ratios = Object.entries(SLOT_INHERITANCE).reduce((acc, [key, value]) => {
|
||||||
const fgs = {
|
const slotIsBaseText = key === 'text' || key === 'link'
|
||||||
text: colorConvert(colors.text),
|
const slotIsText = slotIsBaseText || (
|
||||||
panelText: colorConvert(colors.panelText),
|
typeof value === 'object' && value !== null && value.textColor
|
||||||
panelLink: colorConvert(colors.panelLink),
|
)
|
||||||
btnText: colorConvert(colors.btnText),
|
if (!slotIsText) return acc
|
||||||
topBarText: colorConvert(colors.topBarText),
|
const { layer, variant } = slotIsBaseText ? { layer: 'bg' } : value
|
||||||
inputText: colorConvert(colors.inputText),
|
const background = variant || layer
|
||||||
|
const textColors = [
|
||||||
|
key,
|
||||||
|
...(background === 'bg' ? ['cRed', 'cGreen', 'cBlue', 'cOrange'] : [])
|
||||||
|
]
|
||||||
|
|
||||||
link: colorConvert(colors.link),
|
const layers = getLayers(
|
||||||
topBarLink: colorConvert(colors.topBarLink),
|
layer,
|
||||||
|
variant || layer,
|
||||||
|
colorsConverted,
|
||||||
|
opacity
|
||||||
|
)
|
||||||
|
|
||||||
red: colorConvert(colors.cRed),
|
return {
|
||||||
green: colorConvert(colors.cGreen),
|
...acc,
|
||||||
blue: colorConvert(colors.cBlue),
|
...textColors.reduce((acc, textColorKey) => {
|
||||||
orange: colorConvert(colors.cOrange)
|
const newKey = slotIsBaseText
|
||||||
|
? 'bg' + textColorKey[0].toUpperCase() + textColorKey.slice(1)
|
||||||
|
: textColorKey
|
||||||
|
return {
|
||||||
|
...acc,
|
||||||
|
[newKey]: getContrastRatioLayers(
|
||||||
|
colorsConverted[textColorKey],
|
||||||
|
layers,
|
||||||
|
colorsConverted[textColorKey]
|
||||||
|
)
|
||||||
}
|
}
|
||||||
|
}, {})
|
||||||
const bgs = {
|
|
||||||
bg: colorConvert(colors.bg),
|
|
||||||
underlay: colorConvert(colors.underlay),
|
|
||||||
btn: colorConvert(colors.btn),
|
|
||||||
panel: colorConvert(colors.panel),
|
|
||||||
topBar: colorConvert(colors.topBar),
|
|
||||||
input: colorConvert(colors.input),
|
|
||||||
alertError: colorConvert(colors.alertError),
|
|
||||||
alertWarning: colorConvert(colors.alertWarning),
|
|
||||||
badgeNotification: colorConvert(colors.badgeNotification)
|
|
||||||
}
|
|
||||||
|
|
||||||
const bg = [bgs.bg, opacity.bg]
|
|
||||||
const underlay = [bgs.underlay || colorConvert('#000000'), opacity.underlay]
|
|
||||||
|
|
||||||
const panel = [underlay, bg]
|
|
||||||
|
|
||||||
const ratios = {
|
|
||||||
bgText: getContrastRatioLayers(fgs.text, panel, fgs.text),
|
|
||||||
bgLink: getContrastRatioLayers(fgs.link, panel, fgs.link),
|
|
||||||
bgRed: getContrastRatioLayers(fgs.red, panel, fgs.red),
|
|
||||||
bgGreen: getContrastRatioLayers(fgs.green, panel, fgs.green),
|
|
||||||
bgBlue: getContrastRatioLayers(fgs.blue, panel, fgs.blue),
|
|
||||||
bgOrange: getContrastRatioLayers(fgs.orange, panel, fgs.orange),
|
|
||||||
|
|
||||||
// TODO what's this?
|
|
||||||
tintText: getContrastRatio(alphaBlend(bgs.bg, 0.5, fgs.panelText), fgs.text),
|
|
||||||
|
|
||||||
panelText: getContrastRatioLayers(fgs.text, [...panel, [bgs.panel, opacity.panel]], fgs.panelText),
|
|
||||||
panelLink: getContrastRatioLayers(fgs.link, [...panel, [bgs.panel, opacity.panel]], fgs.panelLink),
|
|
||||||
|
|
||||||
btnText: getContrastRatioLayers(fgs.text, [...panel, [bgs.btn, opacity.btn]], fgs.btnText),
|
|
||||||
|
|
||||||
inputText: getContrastRatioLayers(fgs.text, [...panel, [bgs.input, opacity.input]], fgs.inputText),
|
|
||||||
|
|
||||||
topBarText: getContrastRatioLayers(fgs.text, [...panel, [bgs.topBar, opacity.topBar]], fgs.topBarText),
|
|
||||||
topBarLink: getContrastRatioLayers(fgs.link, [...panel, [bgs.topBar, opacity.topBar]], fgs.topBarLink)
|
|
||||||
}
|
}
|
||||||
|
}, {})
|
||||||
|
|
||||||
return Object.entries(ratios).reduce((acc, [k, v]) => { acc[k] = hints(v); return acc }, {})
|
return Object.entries(ratios).reduce((acc, [k, v]) => { acc[k] = hints(v); return acc }, {})
|
||||||
},
|
},
|
||||||
|
|
|
@ -209,6 +209,12 @@
|
||||||
:label="$t('settings.style.advanced_colors.alert_error')"
|
:label="$t('settings.style.advanced_colors.alert_error')"
|
||||||
:fallback="previewTheme.colors.alertError"
|
:fallback="previewTheme.colors.alertError"
|
||||||
/>
|
/>
|
||||||
|
<ColorInput
|
||||||
|
v-model="alertErrorTextColorLocal"
|
||||||
|
name="alertErrorText"
|
||||||
|
:label="$t('settings.text')"
|
||||||
|
:fallback="previewTheme.colors.alertErrorText"
|
||||||
|
/>
|
||||||
<ContrastRatio :contrast="previewContrast.alertError" />
|
<ContrastRatio :contrast="previewContrast.alertError" />
|
||||||
<ColorInput
|
<ColorInput
|
||||||
v-model="alertWarningColorLocal"
|
v-model="alertWarningColorLocal"
|
||||||
|
@ -217,6 +223,12 @@
|
||||||
:fallback="previewTheme.colors.alertWarning"
|
:fallback="previewTheme.colors.alertWarning"
|
||||||
/>
|
/>
|
||||||
<ContrastRatio :contrast="previewContrast.alertWarning" />
|
<ContrastRatio :contrast="previewContrast.alertWarning" />
|
||||||
|
<ColorInput
|
||||||
|
v-model="alertWarningTextColorLocal"
|
||||||
|
name="alertWarningText"
|
||||||
|
:label="$t('settings.text')"
|
||||||
|
:fallback="previewTheme.colors.alertWarningText"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div class="color-item">
|
<div class="color-item">
|
||||||
<h4>{{ $t('settings.style.advanced_colors.badge') }}</h4>
|
<h4>{{ $t('settings.style.advanced_colors.badge') }}</h4>
|
||||||
|
|
|
@ -1,7 +1,7 @@
|
||||||
import { times } from 'lodash'
|
import { times } from 'lodash'
|
||||||
import { convert } from 'chromatism'
|
import { convert } from 'chromatism'
|
||||||
import { rgb2hex, hex2rgb, rgba2css, getCssColor } from '../color_convert/color_convert.js'
|
import { rgb2hex, hex2rgb, rgba2css, getCssColor } from '../color_convert/color_convert.js'
|
||||||
import { getColors } from '../theme_data/theme_data.service.js'
|
import { getColors, DEFAULT_OPACITY } from '../theme_data/theme_data.service.js'
|
||||||
|
|
||||||
// While this is not used anymore right now, I left it in if we want to do custom
|
// While this is not used anymore right now, I left it in if we want to do custom
|
||||||
// styles that aren't just colors, so user can pick from a few different distinct
|
// styles that aren't just colors, so user can pick from a few different distinct
|
||||||
|
@ -115,18 +115,7 @@ const getCssShadowFilter = (input) => {
|
||||||
}
|
}
|
||||||
|
|
||||||
export const generateColors = (themeData) => {
|
export const generateColors = (themeData) => {
|
||||||
const rawOpacity = Object.assign({
|
const rawOpacity = Object.assign({ ...DEFAULT_OPACITY }, Object.entries(themeData.opacity || {}).reduce((acc, [k, v]) => {
|
||||||
panel: 1,
|
|
||||||
btn: 1,
|
|
||||||
border: 1,
|
|
||||||
bg: 1,
|
|
||||||
badge: 1,
|
|
||||||
text: 1,
|
|
||||||
alert: 0.5,
|
|
||||||
input: 0.5,
|
|
||||||
faint: 0.5,
|
|
||||||
underlay: 0.15
|
|
||||||
}, Object.entries(themeData.opacity || {}).reduce((acc, [k, v]) => {
|
|
||||||
if (typeof v !== 'undefined') {
|
if (typeof v !== 'undefined') {
|
||||||
acc[k] = v
|
acc[k] = v
|
||||||
}
|
}
|
||||||
|
|
|
@ -23,6 +23,19 @@ export const LAYERS = {
|
||||||
alertPanel: 'panel'
|
alertPanel: 'panel'
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export const DEFAULT_OPACITY = {
|
||||||
|
panel: 1,
|
||||||
|
btn: 1,
|
||||||
|
border: 1,
|
||||||
|
bg: 1,
|
||||||
|
badge: 1,
|
||||||
|
text: 1,
|
||||||
|
alert: 0.5,
|
||||||
|
input: 0.5,
|
||||||
|
faint: 0.5,
|
||||||
|
underlay: 0.15
|
||||||
|
}
|
||||||
|
|
||||||
export const SLOT_INHERITANCE = {
|
export const SLOT_INHERITANCE = {
|
||||||
bg: null,
|
bg: null,
|
||||||
fg: null,
|
fg: null,
|
||||||
|
@ -289,7 +302,7 @@ export const getColors = (sourceColors, sourceOpacity, mod) => SLOT_ORDERED.redu
|
||||||
if (value.textColor === 'bw') {
|
if (value.textColor === 'bw') {
|
||||||
return {
|
return {
|
||||||
...acc,
|
...acc,
|
||||||
[key]: contrastRatio(bg)
|
[key]: contrastRatio(bg).rgb
|
||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
return {
|
return {
|
||||||
|
|
Loading…
Reference in New Issue