3 files changed, 60 insertions, 48 deletions

diff --git a/src/components/user_card/user_card.scss b/src/components/user_card/user_card.scss
index 4ab93a8a..6dba3499 100644
--- a/src/components/user_card/user_card.scss
+++ b/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,53 +71,37 @@
   }
 
   &.-rounded-t {
-    border-top-left-radius: $fallback--panelRadius;
-    border-top-left-radius: var(--panelRadius, $fallback--panelRadius);
-    border-top-right-radius: $fallback--panelRadius;
-    border-top-right-radius: var(--panelRadius, $fallback--panelRadius);
+    border-top-left-radius: var(--roundness);
+    border-top-right-radius: var(--roundness);
 
-    --__roundnessTop: var(--panelRadius);
+    --__roundnessTop: var(--roundness);
     --__roundnessBottom: 0;
   }
 
   &.-rounded {
-    border-radius: $fallback--panelRadius;
-    border-radius: var(--panelRadius, $fallback--panelRadius);
+    border-radius: var(--roundness);
 
-    --__roundnessTop: var(--panelRadius);
-    --__roundnessBottom: var(--panelRadius);
+    --__roundnessTop: var(--roundness);
+    --__roundnessBottom: var(--roundness);
   }
 
   &.-popover {
-    border-radius: $fallback--tooltipRadius;
-    border-radius: var(--tooltipRadius, $fallback--tooltipRadius);
+    border-radius: var(--roundness);
 
-    --__roundnessTop: var(--tooltipRadius);
-    --__roundnessBottom: var(--tooltipRadius);
+    --__roundnessTop: var(--roundness);
+    --__roundnessBottom: var(--roundness);
   }
 
   &.-bordered {
     border-width: 1px;
     border-style: solid;
-    border-color: $fallback--border;
-    border-color: var(--border, $fallback--border);
+    border-color: var(--border);
   }
 }
 
 .user-info {
-  color: $fallback--lightText;
-  color: var(--lightText, $fallback--lightText);
   padding: 0 26px;
 
-  a {
-    color: $fallback--lightText;
-    color: var(--lightText, $fallback--lightText);
-
-    &:hover {
-      color: var(--icon);
-    }
-  }
-
   .container {
     min-width: 0;
     padding: 16px 0 6px;
@@ -164,8 +143,7 @@
       display: flex;
       justify-content: center;
       align-items: center;
-      border-radius: $fallback--avatarRadius;
-      border-radius: var(--avatarRadius, $fallback--avatarRadius);
+      border-radius: var(--roundness);
       opacity: 0;
       transition: opacity 0.2s ease;
 
@@ -188,8 +166,7 @@
     padding: 0.5em 0;
 
     &:not(:hover) .icon {
-      color: $fallback--lightText;
-      color: var(--lightText, $fallback--lightText);
+      color: var(--lightText);
     }
   }
 
@@ -203,6 +180,7 @@
     }
 
     .user-screen-name {
+      color: var(--text);
       min-width: 1px;
       flex: 0 1 auto;
       text-overflow: ellipsis;
@@ -214,16 +192,11 @@
       flex: 0 0 auto;
       margin-left: 1em;
       font-size: 0.7em;
-      color: $fallback--text;
-      color: var(--text, $fallback--text);
+      color: var(--text);
     }
 
     .user-role {
       flex: none;
-      color: $fallback--text;
-      color: var(--alertNeutralText, $fallback--text);
-      background-color: $fallback--fg;
-      background-color: var(--alertNeutral, $fallback--fg);
     }
   }
 
@@ -334,8 +307,6 @@
   padding: 0.5em 1.5em 0;
   text-align: center;
   justify-content: space-between;
-  color: $fallback--lightText;
-  color: var(--lightText, $fallback--lightText);
   flex-wrap: wrap;
 }
 
diff --git a/src/components/user_card/user_card.style.js b/src/components/user_card/user_card.style.js
new file mode 100644
index 00000000..34eaa176
--- /dev/null
+++ b/src/components/user_card/user_card.style.js
@@ -0,0 +1,41 @@
+export default {
+  name: 'UserCard',
+  selector: '.user-card',
+  validInnerComponents: [
+    'Text',
+    'Link',
+    'Icon',
+    'Button',
+    'ButtonUnstyled',
+    'Input',
+    'RichContent',
+    'Alert'
+  ],
+  defaultRules: [
+    {
+      directives: {
+        background: '--bg',
+        opacity: 0,
+        roundness: 3,
+        shadow: [{
+          x: 1,
+          y: 1,
+          blur: 4,
+          spread: 0,
+          color: '#000000',
+          alpha: 0.6
+        }],
+        '--profileTint': 'color | $alpha(--background, 0.5)'
+      }
+    },
+    {
+      parent: {
+        component: 'UserCard'
+      },
+      component: 'RichContent',
+      directives: {
+        opacity: 0
+      }
+    }
+  ]
+}
diff --git a/src/components/user_card/user_card.vue b/src/components/user_card/user_card.vue
index 2c76a220..0f627f62 100644
--- a/src/components/user_card/user_card.vue
+++ b/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.actor_type === 'Service'"
-                  class="alert user-role"
+                  class="alert neutral user-role"
                 >
                   {{ $t('user_card.bot') }}
                 </span>
@@ -166,14 +166,14 @@
               v-if="userHighlightType !== 'disabled'"
               :id="'userHighlightColorTx'+user.id"
               v-model="userHighlightColor"
-              class="userHighlightText"
+              class="input userHighlightText"
               type="text"
             >
             <input
               v-if="userHighlightType !== 'disabled'"
               :id="'userHighlightColor'+user.id"
               v-model="userHighlightColor"
-              class="userHighlightCl"
+              class="input userHighlightCl"
               type="color"
             >
             {{ ' ' }}