overhaul how style-switcher makes state, removed tons of copy-paste

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: '',
+      ...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,
       shadowsLocal: {},
@@ -149,59 +112,14 @@ export default {
       return Array.isArray(this.selected) ? 1 : 2
     },
     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 () {
-      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 () {
       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 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 }, {})
     },

src/components/style_switcher/style_switcher.vue

@@ -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>

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({
+  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') {
       acc[k] = v
     }

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 {