Transparency works without exploding now. All nice.

src/components/opacity_input/opacity_input.vue

@@ -22,6 +22,16 @@
     max="1"
     min="0"
     step=".05">
+  <input
+    :id="name"
+    class="input-number"
+    type="number"
+    :value="value || fallback"
+    :disabled="!present"
+    @input="$emit('input', $event.target.value)"
+    max="1"
+    min="0"
+    step=".05">
 </div>
 </template>
 
@@ -64,12 +74,17 @@ export default {
     align-self: center;
     background: none;
     border: none;
-    padding: 0;
     margin: 0;
     height: auto;
     box-shadow: none;
-    min-width: 9em;
+    min-width: 7em;
     flex: 1;
   }
+  .input-number {
+    align-self: center;
+    margin: 0;
+    min-width: 4em;
+    flex: 0;
+  }
 }
 </style>

src/components/style_switcher/style_switcher.js

@@ -17,7 +17,6 @@ export default {
       bgOpacityLocal: undefined,
 
       fgColorLocal: '',
-      fgOpacityLocal: undefined,
       fgTextColorLocal: undefined,
       fgLinkColorLocal: undefined,
 
@@ -37,7 +36,6 @@ export default {
       topBarColorLocal: undefined,
       topBarTextColorLocal: undefined,
       topBarLinkColorLocal: undefined,
-      topBarOpacityLocal: undefined,
 
       alertOpacityLocal: undefined,
 
@@ -112,6 +110,15 @@ export default {
           cGreen: this.cGreenColorLocal,
           cOrange: this.cOrangeColorLocal
         },
+        opacity: {
+          bg: this.bgOpacityLocal,
+          btn: this.btnOpacityLocal,
+          input: this.inputOpacityLocal,
+          panel: this.panelOpacityLocal,
+          topBar: this.topBarOpacityLocal,
+          border: this.borderOpacityLocal,
+          faint: this.faintOpacityLocal
+        },
         radii: {
           btnRadius: this.btnRadiusLocal,
           inputRadius: this.inputRadiusLocal,
@@ -136,8 +143,7 @@ export default {
       }
     },
     previewTheme () {
-      if (!this.preview.theme) return { colors: {}, radii: {} }
+      if (!this.preview.theme) return { colors: {}, opacity: {}, radii: {} }
-      console.log(this.preview.theme)
       return this.preview.theme
     },
     previewRules () {
@@ -226,7 +232,6 @@ export default {
     clearV1 () {
       this.bgOpacityLocal = undefined
       this.fgOpacityLocal = undefined
-      this.fgTextColorLocal = undefined
       this.fgLinkColorLocal = undefined
 
       this.btnColorLocal = undefined
@@ -239,6 +244,7 @@ export default {
 
       this.panelColorLocal = undefined
       this.panelTextColorLocal = undefined
+      this.panelFaintColorLocal = undefined
       this.panelOpacityLocal = undefined
 
       this.topBarColorLocal = undefined
@@ -246,8 +252,6 @@ export default {
       this.topBarLinkColorLocal = undefined
       this.topBarOpacityLocal = undefined
 
-      this.alertOpacityLocal = undefined
-
       this.borderColorLocal = undefined
       this.borderOpacityLocal = undefined
 
@@ -264,6 +268,7 @@ export default {
     normalizeLocalState (input, version = 0) {
       const colors = input.colors || input
       const radii = input.radii || input
+      const opacity = input.opacity || input
 
       if (version === 0) {
         if (input.version) version = input.version
@@ -277,11 +282,8 @@ export default {
         }
       }
 
-      console.log('BENIS')
-      console.log(version)
       // Stuff that differs between V1 and V2
       if (version === 1) {
-        console.log(colors)
         this.fgColorLocal = rgb2hex(colors.btn)
         this.textColorLocal = rgb2hex(colors.fg)
       }
@@ -302,6 +304,7 @@ export default {
         this[key + 'ColorLocal'] = rgb2hex(colors[key])
       })
 
+      // TODO optimize this
       this.btnRadiusLocal = radii.btnRadius || 4
       this.inputRadiusLocal = radii.inputRadius || 4
       this.panelRadiusLocal = radii.panelRadius || 10
@@ -309,6 +312,11 @@ export default {
       this.avatarAltRadiusLocal = radii.avatarAltRadius || 50
       this.tooltipRadiusLocal = radii.tooltipRadius || 2
       this.attachmentRadiusLocal = radii.attachmentRadius || 5
+
+      Object.entries(opacity).forEach(([k, v]) => {
+        if (typeof v === 'undefined' || v === null || Number.isNaN(v)) return
+        this[k + 'OpacityLocal'] = v
+      })
     }
   },
   watch: {

src/components/style_switcher/style_switcher.vue

@@ -51,13 +51,12 @@
     <div>
       <div class="color-item">
         <ColorInput name="bgColor" v-model="bgColorLocal" :label="$t('settings.background')"/>
-        <OpacityInput name="bgOpacity" v-model="bgOpacityLocal" fallback="1"/>
+        <OpacityInput name="bgOpacity" v-model="bgOpacityLocal" :fallback="previewTheme.opacity.bg || 1"/>
         <ColorInput name="textColor" v-model="textColorLocal" :label="$t('settings.text')"/>
         <ColorInput name="linkColor" v-model="linkColorLocal" :label="$t('settings.links')"/>
       </div>
       <div class="color-item">
         <ColorInput name="fgColor" v-model="fgColorLocal" :label="$t('settings.foreground')"/>
-        <OpacityInput name="fgOpacity" v-model="fgOpacityLocal" :fallback="bgOpacityLocal || 1"/>
         <ColorInput name="fgTextColor" v-model="fgTextColorLocal" :label="$t('settings.text')" :fallback="previewTheme.colors.fgText"/>
         <ColorInput name="fgLinkColor" v-model="fgLinkColorLocal" :label="$t('settings.links')" :fallback="previewTheme.colors.fgLink"/>
       </div>
@@ -71,7 +70,7 @@
       </div>
       <div class="color-item wide">
         <h4>Alert opacity</h4>
-        <OpacityInput name="alertOpacity" v-model="alertOpacityLocal" fallback="1"/>
+        <OpacityInput name="alertOpacity" v-model="alertOpacityLocal" fallback="previewTheme.opacity.alert || 1"/>
       </div>
     </div>
 
@@ -80,39 +79,38 @@
       <div class="color-item">
         <h4>Panel header</h4>
         <ColorInput name="panelColor" v-model="panelColorLocal" :fallback="fgColorLocal" :label="$t('settings.background')"/>
-        <OpacityInput name="panelOpacity" v-model="panelOpacityLocal" fallback="1"/>
+        <OpacityInput name="panelOpacity" v-model="panelOpacityLocal" :fallback="previewTheme.opacity.panel || 1"/>
         <ColorInput name="panelTextColor" v-model="panelTextColorLocal" :fallback="previewTheme.colors.panelText" :label="$t('settings.links')"/>
         <ColorInput name="panelFaintColor" v-model="panelFaintColorLocal" :fallback="previewTheme.colors.panelFaint" :label="$t('settings.faint')"/>
       </div>
       <div class="color-item">
         <h4>Top bar</h4>
         <ColorInput name="topBarColor" v-model="topBarColorLocal" :fallback="fgColorLocal" :label="$t('settings.background')"/>
-        <OpacityInput name="topBarOpacity" v-model="topBarOpacityLocal" fallback="1"/>
         <ColorInput name="topBarTextColor" v-model="topBarTextColorLocal" :fallback="previewTheme.colors.topBarText" :label="$t('settings.text')"/>
         <ColorInput name="topBarLinkColor" v-model="topBarLinkColorLocal" :fallback="previewTheme.colors.topBarLink" :label="$t('settings.links')"/>
       </div>
       <div class="color-item">
         <h4>Inputs</h4>
         <ColorInput name="inputColor" v-model="inputColorLocal" :fallback="fgColorLocal" :label="$t('settings.background')"/>
-        <OpacityInput name="inputOpacity" v-model="inputOpacityLocal" fallback="0.5"/>
+        <OpacityInput name="inputOpacity" v-model="inputOpacityLocal" :fallback="previewTheme.opacity.input || 1"/>
         <ColorInput name="inputTextColor" v-model="inputTextColorLocal" :fallback="previewTheme.colors.inputText" :label="$t('settings.text')"/>
       </div>
       <div class="color-item">
         <h4>Buttons</h4>
         <ColorInput name="btnColor" v-model="btnColorLocal" :fallback="fgColorLocal" :label="$t('settings.background')"/>
-        <OpacityInput name="btnOpacity" v-model="btnOpacityLocal" fallback="0.5"/>
+        <OpacityInput name="btnOpacity" v-model="btnOpacityLocal" :fallback="previewTheme.opacity.btn || 1"/>
         <ColorInput name="btnTextColor" v-model="btnTextColorLocal" :fallback="previewTheme.colors.btnText" :label="$t('settings.text')"/>
       </div>
       <div class="color-item">
         <h4>Borders</h4>
         <ColorInput name="borderColor" v-model="borderColorLocal" :fallback="previewTheme.colors.border" label="Color"/>
-        <OpacityInput name="borderOpacity" v-model="borderOpacityLocal" fallback="0.5"/>
+        <OpacityInput name="borderOpacity" v-model="borderOpacityLocal" :fallback="previewTheme.opacity.border || 1"/>
       </div>
       <div class="color-item">
         <h4>Faint text</h4>
-        <ColorInput name="faintColor" v-model="faintColorLocal" :fallback="previewTheme.colors.faint" :label="$t('settings.text')"/>
+        <ColorInput name="faintColor" v-model="faintColorLocal" :fallback="previewTheme.colors.faint || 1" :label="$t('settings.text')"/>
-        <OpacityInput name="faintOpacity" v-model="faintOpacityLocal" fallback="0.5"/>
+        <ColorInput name="faintLinkColor" v-model="faintLinkColorLocal" :fallback="previewTheme.colors.faintLink" :label="$t('settings.links')"/>
-        <ColorInput name="faintLinkColor" v-model="faintLinkColorLocal" :fallback="previewTheme.colors.faintLink" :label="$t('settings.link')"/>
+        <OpacityInput name="faintOpacity" v-model="faintOpacityLocal" fallback="previewTheme.opacity.faint"/>
       </div>
     </div>
   </div>
@@ -255,10 +253,6 @@
   label {
     color: var(--faint, $fallback--faint);
   }
-  .opacity-control {
-    margin-top: 5px;
-    margin-bottom: 5px;
-  }
 }
 
 .radius-item {

src/components/tab_switcher/tab_switcher.scss

@@ -17,8 +17,8 @@
 
     .tab, &::after, &::before {
       border-bottom: 1px solid;
-      border-bottom-color: $fallback--fg;
+      border-bottom-color: $fallback--border;
-      border-bottom-color: var(--fg, $fallback--fg);
+      border-bottom-color: var(--border, $fallback--border);
     }
 
     .tab {
@@ -28,8 +28,8 @@
 
       &:not(.active) {
         border-bottom: 1px solid;
-        border-bottom-color: $fallback--fg;
+        border-bottom-color: $fallback--border;
-        border-bottom-color: var(--fg, $fallback--fg);
+        border-bottom-color: var(--border, $fallback--border);
         z-index: 4;
       }
 

src/services/style_setter/style_setter.js

@@ -90,7 +90,6 @@ const setColors = (input, commit) => {
 }
 
 const generatePreset = (input) => {
-  console.log(input)
   const radii = input.radii || {
     btnRadius: input.btnRadius,
     inputRadius: input.inputRadius,
@@ -101,6 +100,12 @@ const generatePreset = (input) => {
     attachmentRadius: input.attachmentRadius
   }
   const colors = {}
+  const opacity = Object.assign({
+    alert: 0.5,
+    input: 0.5,
+    faint: 0.5
+  }, input.opacity)
+
   const col = Object.entries(input.colors || input).reduce((acc, [k, v]) => {
     if (typeof v === 'object') {
       acc[k] = v
@@ -110,11 +115,13 @@ const generatePreset = (input) => {
     return acc
   }, {})
 
+  const isLightOnDark = convert(col.bg).hsl.l < convert(col.text).hsl.l
+  const mod = isLightOnDark ? 1 : -1
+
   colors.text = col.text
-  colors.lightText = colors.text
+  colors.lightText = brightness(20 * mod, colors.text).rgb
   colors.link = col.link
-  colors.border = col.border || col.fg
+  colors.faint = col.faint || Object.assign({}, col.text)
-  colors.faint = col.faint || col.text
 
   colors.bg = col.bg
   colors.lightBg = col.lightBg || brightness(5, colors.bg).rgb
@@ -123,21 +130,23 @@ const generatePreset = (input) => {
   colors.fgText = col.fgText || getTextColor(colors.fg, colors.text)
   colors.fgLink = col.fgLink || getTextColor(colors.fg, colors.link)
 
-  colors.btn = col.btn || col.fg
+  colors.border = col.border || brightness(20 * mod, colors.fg).rgb
+
+  colors.btn = col.btn || Object.assign({}, col.fg)
   colors.btnText = col.btnText || getTextColor(colors.btn, colors.fgText)
 
-  colors.input = col.input || col.fg
+  colors.input = col.input || Object.assign({}, col.fg)
-  colors.inputText = col.inputText || getTextColor(colors.input, colors.fgText)
+  colors.inputText = col.inputText || getTextColor(colors.input, colors.lightText)
 
-  colors.panel = col.panel || col.fg
+  colors.panel = col.panel || Object.assign({}, col.fg)
   colors.panelText = col.panelText || getTextColor(colors.panel, colors.fgText)
   colors.panelFaint = col.panelFaint || getTextColor(colors.panel, colors.faint)
 
-  colors.topBar = col.topBar || col.fg
+  colors.topBar = col.topBar || Object.assign({}, col.fg)
   colors.topBarText = col.topBarText || getTextColor(colors.topBar, colors.fgText)
   colors.topBarLink = col.topBarLink || getTextColor(colors.topBar, colors.fgLink)
 
-  colors.faintLink = col.faintLink || col.link
+  colors.faintLink = col.faintLink || Object.assign({}, col.link)
 
   colors.icon = mixrgb(colors.bg, colors.text)
 
@@ -146,20 +155,35 @@ const generatePreset = (input) => {
   colors.cGreen = col.cGreen
   colors.cOrange = col.cOrange
 
-  colors.cAlertRed = col.cAlertRed || Object.assign({ a: 0.5 }, col.cRed)
+  colors.cAlertRed = col.cAlertRed || Object.assign({}, col.cRed)
+
+  Object.entries(opacity).forEach(([ k, v ]) => {
+    if (typeof v === 'undefined') return
+    if (k === 'alert') {
+      colors.cAlertRed.a = v
+      return
+    }
+    if (k === 'faint') {
+      colors[k + 'Link'].a = v
+      colors['panelFaint'].a = v
+    }
+    colors[k].a = v
+  })
 
   const htmlColors = Object.entries(colors)
         .reduce((acc, [k, v]) => {
           if (!v) return acc
-          acc[k] = typeof v.a === 'undefined' ? rgb2hex(v) : rgb2rgba(v)
+          acc.solid[k] = rgb2hex(v)
+          acc.complete[k] = typeof v.a === 'undefined' ? rgb2hex(v) : rgb2rgba(v)
           return acc
-        }, {})
+        }, { complete: {}, solid: {} })
 
   return {
-    colorRules: Object.entries(htmlColors).filter(([k, v]) => v).map(([k, v]) => `--${k}: ${v}`).join(';'),
+    colorRules: Object.entries(htmlColors.complete).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(';'),
     theme: {
-      colors: htmlColors,
+      colors: htmlColors.solid,
+      opacity,
       radii
     }
   }