diff --git a/src/components/style_switcher/style_switcher.js b/src/components/style_switcher/style_switcher.js
index 4749d3f7..9c6f3266 100644
--- a/src/components/style_switcher/style_switcher.js
+++ b/src/components/style_switcher/style_switcher.js
@@ -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)
- }
-
- 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 {
+ ...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]
+ )
+ }
+ }, {})
+ }
+ }, {})
return Object.entries(ratios).reduce((acc, [k, v]) => { acc[k] = hints(v); return acc }, {})
},
diff --git a/src/components/style_switcher/style_switcher.vue b/src/components/style_switcher/style_switcher.vue
index 82b85bd5..b059eb8a 100644
--- a/src/components/style_switcher/style_switcher.vue
+++ b/src/components/style_switcher/style_switcher.vue
@@ -209,6 +209,12 @@
:label="$t('settings.style.advanced_colors.alert_error')"
:fallback="previewTheme.colors.alertError"
/>
+
+
{{ $t('settings.style.advanced_colors.badge') }}
diff --git a/src/services/style_setter/style_setter.js b/src/services/style_setter/style_setter.js
index 516fb5f6..e11516c0 100644
--- a/src/services/style_setter/style_setter.js
+++ b/src/services/style_setter/style_setter.js
@@ -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
}
diff --git a/src/services/theme_data/theme_data.service.js b/src/services/theme_data/theme_data.service.js
index 1117ab05..297d0223 100644
--- a/src/services/theme_data/theme_data.service.js
+++ b/src/services/theme_data/theme_data.service.js
@@ -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 {