stop using customTheme in user card, instead use color slots. fix for opacity

inheritance polluting inheritors

src/components/user_card/user_card.js

@@ -4,7 +4,6 @@ import ProgressButton from '../progress_button/progress_button.vue'
 import FollowButton from '../follow_button/follow_button.vue'
 import ModerationTools from '../moderation_tools/moderation_tools.vue'
 import AccountActions from '../account_actions/account_actions.vue'
-import { hex2rgb } from '../../services/color_convert/color_convert.js'
 import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'
 import { mapGetters } from 'vuex'
 
@@ -30,22 +29,12 @@ export default {
       }]
     },
     style () {
-      const color = this.$store.getters.mergedConfig.customTheme.colors
-        ? this.$store.getters.mergedConfig.customTheme.colors.bg // v2
-        : this.$store.getters.mergedConfig.colors.bg // v1
-
-      if (color) {
-        const rgb = (typeof color === 'string') ? hex2rgb(color) : color
-        const tintColor = `rgba(${Math.floor(rgb.r)}, ${Math.floor(rgb.g)}, ${Math.floor(rgb.b)}, .5)`
-
       return {
-          backgroundColor: `rgb(${Math.floor(rgb.r * 0.53)}, ${Math.floor(rgb.g * 0.56)}, ${Math.floor(rgb.b * 0.59)})`,
         backgroundImage: [
-            `linear-gradient(to bottom, ${tintColor}, ${tintColor})`,
+          `linear-gradient(to bottom, var(--profileTint), var(--profileTint))`,
           `url(${this.user.cover_photo})`
         ].join(', ')
       }
-      }
     },
     isOtherUser () {
       return this.user.id !== this.$store.state.users.currentUser.id

src/components/user_card/user_card.vue

@@ -286,6 +286,7 @@
     mask-size: 100% 60%;
     border-top-left-radius: calc(var(--panelRadius) - 1px);
     border-top-right-radius: calc(var(--panelRadius) - 1px);
+    background-color: var(--profileBg);
 
     &.hide-bio {
       mask-size: 100% 40px;

src/services/theme_data/pleromafe.js

@@ -8,6 +8,7 @@ export const LAYERS = {
   undelay: null, // root
   topBar: null, // no transparency support
   badge: null, //  no transparency support
+  profileTint: null, // doesn't matter
   fg: null,
   bg: 'underlay',
   highlight: 'bg',
@@ -29,6 +30,7 @@ export const LAYERS = {
  * this allows redefining it to something else
  */
 export const DEFAULT_OPACITY = {
+  profileTint: 0.5,
   alert: 0.5,
   input: 0.5,
   faint: 0.5,
@@ -119,6 +121,20 @@ export const SLOT_INHERITANCE = {
   cGreen: '#00FF00',
   cOrange: '#E3FF00',
 
+  profileBg: {
+    depends: ['bg'],
+    color: (mod, bg) => ({
+      r: Math.floor(bg.r * 0.53),
+      g: Math.floor(bg.g * 0.56),
+      b: Math.floor(bg.b * 0.59)
+    })
+  },
+  profileTint: {
+    depends: ['bg'],
+    layer: 'profileTint',
+    opacity: 'profileTint'
+  },
+
   highlight: {
     depends: ['bg'],
     color: (mod, bg) => brightness(5 * mod, bg).rgb

src/services/theme_data/theme_data.service.js

@@ -351,7 +351,8 @@ export const getColors = (sourceColors, sourceOpacity) => SLOT_ORDERED.reduce(({
     throw new Error('Couldn\'t generate color for ' + key)
   }
   const opacitySlot = getOpacitySlot(key)
-  if (opacitySlot && outputColor.a === undefined) {
+  const ownOpacitySlot = value.opacity
+  if (opacitySlot && (outputColor.a === undefined || ownOpacitySlot)) {
     const dependencySlot = deps[0]
     if (dependencySlot && colors[dependencySlot] === 'transparent') {
       outputColor.a = 0