user cards looking nicer now

src/components/tab_switcher/tab.style.js

@@ -3,7 +3,7 @@ export default {
   selector: '.tab', // CSS selector/prefix
   states: {
     active: '.active',
-    hover: ':hover:not(:disabled)',
+    hover: ':hover:not(.disabled)',
     disabled: '.disabled'
   },
   validInnerComponents: [
@@ -24,11 +24,16 @@ export default {
         shadow: ['--defaultButtonHoverGlow', '--defaultButtonBevel']
       }
     },
+    {
+      state: ['active'],
+      directives: {
+        opacity: 0
+      }
+    },
     {
       state: ['hover', 'active'],
       directives: {
-        shadow: ['--defaultButtonShadow', '--defaultButtonBevel'],
+        shadow: ['--defaultButtonShadow', '--defaultButtonBevel']
-        opacity: 0
       }
     },
     {
@@ -38,12 +43,6 @@ export default {
         shadow: ['--defaultButtonBevel']
       }
     },
-    {
-      state: ['active'],
-      directives: {
-        opacity: 0
-      }
-    },
     {
       component: 'Text',
       parent: {

src/components/user_card/user_card.scss

@@ -62,11 +62,6 @@
     padding: 1em;
     margin: 0;
 
-    a {
-      color: $fallback--link;
-      color: var(--postLink, $fallback--link);
-    }
-
     img {
       object-fit: contain;
       vertical-align: middle;
@@ -76,36 +71,31 @@
   }
 
   &.-rounded-t {
-    border-top-left-radius: $fallback--panelRadius;
+    border-top-left-radius: var(--roundness);
-    border-top-left-radius: var(--panelRadius, $fallback--panelRadius);
+    border-top-right-radius: var(--roundness);
-    border-top-right-radius: $fallback--panelRadius;
-    border-top-right-radius: var(--panelRadius, $fallback--panelRadius);
 
-    --__roundnessTop: var(--panelRadius);
+    --__roundnessTop: var(--roundness);
     --__roundnessBottom: 0;
   }
 
   &.-rounded {
-    border-radius: $fallback--panelRadius;
+    border-radius: var(--roundness);
-    border-radius: var(--panelRadius, $fallback--panelRadius);
 
-    --__roundnessTop: var(--panelRadius);
+    --__roundnessTop: var(--roundness);
-    --__roundnessBottom: var(--panelRadius);
+    --__roundnessBottom: var(--roundness);
   }
 
   &.-popover {
-    border-radius: $fallback--tooltipRadius;
+    border-radius: var(--roundness);
-    border-radius: var(--tooltipRadius, $fallback--tooltipRadius);
 
-    --__roundnessTop: var(--tooltipRadius);
+    --__roundnessTop: var(--roundness);
-    --__roundnessBottom: var(--tooltipRadius);
+    --__roundnessBottom: var(--roundness);
   }
 
   &.-bordered {
     border-width: 1px;
     border-style: solid;
-    border-color: $fallback--border;
+    border-color: var(--border);
-    border-color: var(--border, $fallback--border);
   }
 }
 
@@ -176,8 +166,7 @@
     padding: 0.5em 0;
 
     &:not(:hover) .icon {
-      color: $fallback--lightText;
+      color: var(--lightText);
-      color: var(--lightText, $fallback--lightText);
     }
   }
 
@@ -191,6 +180,7 @@
     }
 
     .user-screen-name {
+      color: var(--text);
       min-width: 1px;
       flex: 0 1 auto;
       text-overflow: ellipsis;
@@ -202,16 +192,11 @@
       flex: 0 0 auto;
       margin-left: 1em;
       font-size: 0.7em;
-      color: $fallback--text;
+      color: var(--text);
-      color: var(--text, $fallback--text);
     }
 
     .user-role {
       flex: none;
-      color: $fallback--text;
-      color: var(--alertNeutralText, $fallback--text);
-      background-color: $fallback--fg;
-      background-color: var(--alertNeutral, $fallback--fg);
     }
   }
 

src/components/user_card/user_card.style.js

@@ -15,6 +15,7 @@ export default {
     {
       directives: {
         background: '--bg',
+        opacity: 0,
         roundness: 3,
         shadow: [{
           x: 1,

src/components/user_card/user_card.vue

@@ -113,19 +113,19 @@
               <template v-if="!hideBio">
                 <span
                   v-if="user.deactivated"
-                  class="alert user-role"
+                  class="alert neutral user-role"
                 >
                   {{ $t('user_card.deactivated') }}
                 </span>
                 <span
                   v-if="!!visibleRole"
-                  class="alert user-role"
+                  class="alert neutral user-role"
                 >
                   {{ $t(`general.role.${visibleRole}`) }}
                 </span>
                 <span
                   v-if="user.bot"
-                  class="alert user-role"
+                  class="alert neutral user-role"
                 >
                   {{ $t('user_card.bot') }}
                 </span>

src/services/theme_data/theme2_to_theme3.js

@@ -200,6 +200,7 @@ export const convertTheme2To3 = (data) => {
       if (rule.component === 'Button') {
         newRules.push({ ...rule, component: 'ScrollbarElement' })
         newRules.push({ ...rule, component: 'Tab' })
+        newRules.push({ ...rule, component: 'Tab', state: ['active'], directives: { opacity: 0 } })
       }
     })
     return newRules