something works without exploding and i'm tired already

src/services/style_setter/style_setter.js

@@ -1,5 +1,6 @@
 import { times } from 'lodash'
-import { rgb2hex, hex2rgb } from '../color_convert/color_convert.js'
+import { brightness, invertLightness, convert } from 'chromatism'
+import { rgb2hex, hex2rgb, mixrgb } from '../color_convert/color_convert.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
@@ -53,7 +54,23 @@ const setStyle = (href, commit) => {
   cssEl.addEventListener('load', setDynamic)
 }
 
-const setColors = (col, commit) => {
+const rgb2rgba = function (rgba) {
+  return `rgba(${rgba.r}, ${rgba.g}, ${rgba.b}, ${rgba.a})`
+}
+
+const getTextColor = function (bg, text) {
+  const bgIsLight = convert(bg).hsl.l > 50
+  const textIsLight = convert(text).hsl.l > 50
+
+  if ((bgIsLight && textIsLight) || (!bgIsLight && !textIsLight)) {
+    const base = typeof text.a !== 'undefined' ? { a: text.a } : {}
+    return Object.assign(base, invertLightness(text).rgb)
+  }
+  return text
+}
+
+const setColors = (input, commit) => {
+  const { colorRules, radiiRules, col } = generatePreset(input)
   const head = document.head
   const body = document.body
   body.style.display = 'none'
@@ -62,51 +79,83 @@ const setColors = (col, commit) => {
   head.appendChild(styleEl)
   const styleSheet = styleEl.sheet
 
-  const isDark = (col.text.r + col.text.g + col.text.b) > (col.bg.r + col.bg.g + col.bg.b)
-  let colors = {}
-  let radii = {}
-
-  const mod = isDark ? -10 : 10
-
-  colors.bg = rgb2hex(col.bg.r, col.bg.g, col.bg.b)                         // background
-  colors.lightBg = rgb2hex((col.bg.r + col.fg.r) / 2, (col.bg.g + col.fg.g) / 2, (col.bg.b + col.fg.b) / 2) // hilighted bg
-  colors.btn = rgb2hex(col.fg.r, col.fg.g, col.fg.b)                         // panels & buttons
-  colors.input = `rgba(${col.fg.r}, ${col.fg.g}, ${col.fg.b}, .5)`
-  colors.border = rgb2hex(col.fg.r - mod, col.fg.g - mod, col.fg.b - mod)       // borders
-  colors.faint = `rgba(${col.text.r}, ${col.text.g}, ${col.text.b}, .5)`
-  colors.fg = rgb2hex(col.text.r, col.text.g, col.text.b)                   // text
-  colors.lightFg = rgb2hex(col.text.r - mod * 5, col.text.g - mod * 5, col.text.b - mod * 5) // strong text
-
-  colors['base07'] = rgb2hex(col.text.r - mod * 2, col.text.g - mod * 2, col.text.b - mod * 2)
-
-  colors.link = rgb2hex(col.link.r, col.link.g, col.link.b)                   // links
-  colors.icon = rgb2hex((col.bg.r + col.text.r) / 2, (col.bg.g + col.text.g) / 2, (col.bg.b + col.text.b) / 2) // icons
-
-  colors.cBlue = col.cBlue && rgb2hex(col.cBlue.r, col.cBlue.g, col.cBlue.b)
-  colors.cRed = col.cRed && rgb2hex(col.cRed.r, col.cRed.g, col.cRed.b)
-  colors.cGreen = col.cGreen && rgb2hex(col.cGreen.r, col.cGreen.g, col.cGreen.b)
-  colors.cOrange = col.cOrange && rgb2hex(col.cOrange.r, col.cOrange.g, col.cOrange.b)
-
-  colors.cAlertRed = col.cRed && `rgba(${col.cRed.r}, ${col.cRed.g}, ${col.cRed.b}, .5)`
-
-  radii.btnRadius = col.btnRadius
-  radii.inputRadius = col.inputRadius
-  radii.panelRadius = col.panelRadius
-  radii.avatarRadius = col.avatarRadius
-  radii.avatarAltRadius = col.avatarAltRadius
-  radii.tooltipRadius = col.tooltipRadius
-  radii.attachmentRadius = col.attachmentRadius
-
   styleSheet.toString()
-  styleSheet.insertRule(`body { ${Object.entries(colors).filter(([k, v]) => v).map(([k, v]) => `--${k}: ${v}`).join(';')} }`, 'index-max')
-  styleSheet.insertRule(`body { ${Object.entries(radii).filter(([k, v]) => v).map(([k, v]) => `--${k}: ${v}px`).join(';')} }`, 'index-max')
+  styleSheet.insertRule(`body { ${colorRules} }`, 'index-max')
+  styleSheet.insertRule(`body { ${radiiRules} }`, 'index-max')
   body.style.display = 'initial'
 
-  commit('setOption', { name: 'colors', value: colors })
-  commit('setOption', { name: 'radii', value: radii })
+  // commit('setOption', { name: 'colors', value: htmlColors })
+  // commit('setOption', { name: 'radii', value: radii })
   commit('setOption', { name: 'customTheme', value: col })
 }
 
+const generatePreset = (input) => {
+  const radii = input.radii || {
+    btnRadius: input.btnRadius,
+    inputRadius: input.inputRadius,
+    panelRadius: input.panelRadius,
+    avatarRadius: input.avatarRadius,
+    avatarAltRadius: input.avatarAltRadius,
+    tooltipRadius: input.tooltipRadius,
+    attachmentRadius: input.attachmentRadius
+  }
+  const colors = {}
+
+  const col = Object.entries(input.colors || input).reduce((acc, [k, v]) => {
+    if (typeof v === 'object') {
+      acc[k] = v
+    } else {
+      acc[k] = hex2rgb(v)
+    }
+    return acc
+  }, {})
+
+  colors.fg = col.fg || col.text                   // text
+  colors.text = col.fg || col.text                   // text
+  colors.lightFg = col.fg || col.text                   // text
+
+  colors.bg = col.bg                         // background
+  colors.lightBg = col.lightBg || brightness(5, colors.bg).rgb // hilighted bg
+  console.log(colors.bg)
+  console.log(colors.lightBg)
+
+  colors.btn = col.btn || { r: 0, g: 0, b: 0 }
+  colors.btnText = getTextColor(colors.btn, colors.text)
+
+  colors.panel = col.panel || col.btn
+  colors.panelText = getTextColor(colors.panel, colors.text)
+
+  colors.topBar = col.topBar || col.btn
+  colors.topBarText = getTextColor(colors.topBar, colors.text)
+
+  colors.input = col.input || Object.assign({ a: 0.5 }, col.btn)
+  colors.border = col.btn       // borders
+  colors.faint = col.faint || Object.assign({ a: 0.5 }, col.text)
+
+  colors.link = col.link                   // links
+  colors.icon = mixrgb(colors.bg, colors.text) // icons
+
+  colors.cBlue = col.cBlue
+  colors.cRed = col.cRed
+  colors.cGreen = col.cGreen
+  colors.cOrange = col.cOrange
+
+  colors.cAlertRed = col.cAlertRed || Object.assign({ a: 0.5 }, col.cRed)
+
+  const htmlColors = Object.entries(colors)
+        .reduce((acc, [k, v]) => {
+          if (!v) return acc
+          acc[k] = typeof v.a === 'undefined' ? rgb2hex(v) : rgb2rgba(v)
+          return acc
+        }, {})
+
+  return {
+    colorRules: Object.entries(htmlColors).filter(([k, v]) => v).map(([k, v]) => `--${k}: ${v}`).join(';'),
+    radiiRules: Object.entries(radii).filter(([k, v]) => v).map(([k, v]) => `--${k}: ${v}px`).join(';'),
+    col
+  }
+}
+
 const setPreset = (val, commit) => {
   window.fetch('/static/styles.json')
     .then((data) => data.json())
@@ -148,7 +197,8 @@ const setPreset = (val, commit) => {
 const StyleSetter = {
   setStyle,
   setPreset,
-  setColors
+  setColors,
+  generatePreset
 }
 
 export default StyleSetter