overhaul how style-switcher makes state, removed tons of copy-paste
This commit is contained in:
Henry Jameson
parent
d52d181227
commit
88f83fc9fa
4 changed files with 82 additions and 168 deletions
|
|
@ -14,7 +14,12 @@ import {
|
|||
composePreset,
|
||||
getThemes
|
||||
} 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 RangeInput from '../range_input/range_input.vue'
|
||||
import OpacityInput from '../opacity_input/opacity_input.vue'
|
||||
|
|
@ -67,55 +72,13 @@ export default {
|
|||
keepRoundness: false,
|
||||
keepFonts: false,
|
||||
|
||||
textColorLocal: '',
|
||||
accentColorLocal: undefined,
|
||||
linkColorLocal: undefined,
|
||||
...Object.keys(SLOT_INHERITANCE)
|
||||
.map(key => [key, ''])
|
||||
.reduce((acc, [key, val]) => ({ ...acc, [ key + 'ColorLocal' ]: val }), {}),
|
||||
|
||||
bgColorLocal: '',
|
||||
bgOpacityLocal: undefined,
|
||||
|
||||
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: '',
|
||||
...Object.keys(DEFAULT_OPACITY)
|
||||
.map(key => [key, undefined])
|
||||
.reduce((acc, [key, val]) => ({ ...acc, [ key + 'OpacityLocal' ]: val }), {}),
|
||||
|
||||
shadowSelected: undefined,
|
||||
shadowsLocal: {},
|
||||
|
|
@ -149,59 +112,14 @@ export default {
|
|||
return Array.isArray(this.selected) ? 1 : 2
|
||||
},
|
||||
currentColors () {
|
||||
return {
|
||||
bg: this.bgColorLocal,
|
||||
text: this.textColorLocal,
|
||||
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
|
||||
}
|
||||
return Object.keys(SLOT_INHERITANCE)
|
||||
.map(key => [key, this[key + 'ColorLocal']])
|
||||
.reduce((acc, [key, val]) => ({ ...acc, [ key ]: val }), {})
|
||||
},
|
||||
currentOpacity () {
|
||||
return {
|
||||
bg: this.bgOpacityLocal,
|
||||
btn: this.btnOpacityLocal,
|
||||
input: this.inputOpacityLocal,
|
||||
panel: this.panelOpacityLocal,
|
||||
topBar: this.topBarOpacityLocal,
|
||||
border: this.borderOpacityLocal,
|
||||
faint: this.faintOpacityLocal,
|
||||
underlay: this.underlayOpacityLocal
|
||||
}
|
||||
return Object.keys(DEFAULT_OPACITY)
|
||||
.map(key => [key, this[key + 'OpacityLocal']])
|
||||
.reduce((acc, [key, val]) => ({ ...acc, [ key + 'OpacityLocal' ]: val }), {})
|
||||
},
|
||||
currentRadii () {
|
||||
return {
|
||||
|
|
@ -237,63 +155,45 @@ export default {
|
|||
laa: ratio >= 3,
|
||||
laaa: ratio >= 4.5
|
||||
})
|
||||
const colorsConverted = Object.entries(colors).reduce((acc, [key, value]) => ({ ...acc, [key]: colorConvert(value) }), {})
|
||||
|
||||
// fgsfds :DDDD
|
||||
const fgs = {
|
||||
text: colorConvert(colors.text),
|
||||
panelText: colorConvert(colors.panelText),
|
||||
panelLink: colorConvert(colors.panelLink),
|
||||
btnText: colorConvert(colors.btnText),
|
||||
topBarText: colorConvert(colors.topBarText),
|
||||
inputText: colorConvert(colors.inputText),
|
||||
const ratios = Object.entries(SLOT_INHERITANCE).reduce((acc, [key, value]) => {
|
||||
const slotIsBaseText = key === 'text' || key === 'link'
|
||||
const slotIsText = slotIsBaseText || (
|
||||
typeof value === 'object' && value !== null && value.textColor
|
||||
)
|
||||
if (!slotIsText) return acc
|
||||
const { layer, variant } = slotIsBaseText ? { layer: 'bg' } : value
|
||||
const background = variant || layer
|
||||
const textColors = [
|
||||
key,
|
||||
...(background === 'bg' ? ['cRed', 'cGreen', 'cBlue', 'cOrange'] : [])
|
||||
]
|
||||
|
||||
link: colorConvert(colors.link),
|
||||
topBarLink: colorConvert(colors.topBarLink),
|
||||
const layers = getLayers(
|
||||
layer,
|
||||
variant || layer,
|
||||
colorsConverted,
|
||||
opacity
|
||||
)
|
||||
|
||||
red: colorConvert(colors.cRed),
|
||||
green: colorConvert(colors.cGreen),
|
||||
blue: colorConvert(colors.cBlue),
|
||||
orange: colorConvert(colors.cOrange)
|
||||
return {
|
||||
...acc,
|
||||
...textColors.reduce((acc, textColorKey) => {
|
||||
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 }, {})
|
||||
},
|
||||
|
|
|
|||
|
|
@ -209,6 +209,12 @@
|
|||
:label="$t('settings.style.advanced_colors.alert_error')"
|
||||
:fallback="previewTheme.colors.alertError"
|
||||
/>
|
||||
<ColorInput
|
||||
v-model="alertErrorTextColorLocal"
|
||||
name="alertErrorText"
|
||||
:label="$t('settings.text')"
|
||||
:fallback="previewTheme.colors.alertErrorText"
|
||||
/>
|
||||
<ContrastRatio :contrast="previewContrast.alertError" />
|
||||
<ColorInput
|
||||
v-model="alertWarningColorLocal"
|
||||
|
|
@ -217,6 +223,12 @@
|
|||
:fallback="previewTheme.colors.alertWarning"
|
||||
/>
|
||||
<ContrastRatio :contrast="previewContrast.alertWarning" />
|
||||
<ColorInput
|
||||
v-model="alertWarningTextColorLocal"
|
||||
name="alertWarningText"
|
||||
:label="$t('settings.text')"
|
||||
:fallback="previewTheme.colors.alertWarningText"
|
||||
/>
|
||||
</div>
|
||||
<div class="color-item">
|
||||
<h4>{{ $t('settings.style.advanced_colors.badge') }}</h4>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
import { times } from 'lodash'
|
||||
import { convert } from 'chromatism'
|
||||
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
|
||||
// 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) => {
|
||||
const rawOpacity = Object.assign({
|
||||
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]) => {
|
||||
const rawOpacity = Object.assign({ ...DEFAULT_OPACITY }, Object.entries(themeData.opacity || {}).reduce((acc, [k, v]) => {
|
||||
if (typeof v !== 'undefined') {
|
||||
acc[k] = v
|
||||
}
|
||||
|
|
|
|||
|
|
@ -23,6 +23,19 @@ export const LAYERS = {
|
|||
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 = {
|
||||
bg: null,
|
||||
fg: null,
|
||||
|
|
@ -289,7 +302,7 @@ export const getColors = (sourceColors, sourceOpacity, mod) => SLOT_ORDERED.redu
|
|||
if (value.textColor === 'bw') {
|
||||
return {
|
||||
...acc,
|
||||
[key]: contrastRatio(bg)
|
||||
[key]: contrastRatio(bg).rgb
|
||||
}
|
||||
} else {
|
||||
return {
|
||||
|
|
|
|||
Loading…
Reference in a new issue