Merge branch 'themes3' into shigusegubu-themes3

src/components/badge.style.js

@@ -9,6 +9,12 @@ export default {
     notification: '.-notification'
   },
   defaultRules: [
+    {
+      component: 'Root',
+      directives: {
+        '--badgeNotification': 'color | --cRed'
+      }
+    },
     {
       directives: {
         background: '--cGreen'

src/components/chat_message/chat_message.scss

@@ -1,5 +1,3 @@
-@import "../../variables";
-
 .chat-message-wrapper {
   &.hovered-message-chain {
     .animated.Avatar {
@@ -93,8 +91,7 @@
   .error {
     .status-content.media-body,
     .created-at {
-      color: $fallback--cRed;
+      color: var(--badgeNotification);
-      color: var(--badgeNotification, $fallback--cRed);
     }
   }
 
@@ -146,6 +143,5 @@
   margin: 1.4em 0;
   font-size: 0.9em;
   user-select: none;
-  color: $fallback--text;
+  color: var(--textFaint);
-  color: var(--faintedText, $fallback--text);
 }

src/components/root.style.js

@@ -15,9 +15,23 @@ export default {
   defaultRules: [
     {
       directives: {
+        // These are here just to establish order,
+        // themes should override those
+        '--bg': 'color | #121a24',
+        '--fg': 'color | #182230',
+        '--text': 'color | #b9b9ba',
+        '--link': 'color | #d8a070',
+        '--cRed': 'color | #FF0000',
+        '--cBlue': 'color | #0095ff',
+        '--cGreen': 'color | #0fa00f',
+        '--cOrange': 'color | #ffa500',
+
+        // Fonts
         '--font': 'generic | sans-serif',
         '--monoFont': 'generic | monospace',
-        '--bg': 'color | #000000', // just to establish order
+
+        // Fallback no-background-image color
+        // (also useful in some other places like scrollbars)
         '--wallpaper': 'color | --bg, -2'
       }
     }

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.actor_type === 'Service'"
-                  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