Merge branch 'themes-3-1' into shigusegubu-themes3

changelog.d/weight-loss.change

@@ -0,0 +1 @@
+Reduced time taken processing theme by half

src/components/attachment/attachment.style.js

@@ -1,27 +0,0 @@
-export default {
-  name: 'Attachment',
-  selector: '.Attachment',
-  notEditable: true,
-  validInnerComponents: [
-    'Border',
-    'Button',
-    'Input'
-  ],
-  defaultRules: [
-    {
-      directives: {
-        roundness: 3
-      }
-    },
-    {
-      component: 'Button',
-      parent: {
-        component: 'Attachment'
-      },
-      directives: {
-        background: '#FFFFFF',
-        opacity: 0.5
-      }
-    }
-  ]
-}

src/components/chat_message/chat_message.style.js

@@ -8,9 +8,6 @@ export default {
     'Text',
     'Icon',
     'Border',
-    'Button',
-    'RichContent',
-    'Attachment',
     'PollGraph'
   ],
   defaultRules: [

src/components/list/list_item.style.js

@@ -1,48 +0,0 @@
-export default {
-  name: 'ListItem',
-  selector: '.list-item',
-  states: {
-    active: '.-active',
-    hover: ':is(:hover, :focus-visible, :has(:focus-visible)):not(.-non-interactive)'
-  },
-  validInnerComponents: [
-    'Text',
-    'Link',
-    'Icon',
-    'Border',
-    'Button',
-    'ButtonUnstyled',
-    'RichContent',
-    'Input',
-    'Avatar'
-  ],
-  defaultRules: [
-    {
-      directives: {
-        background: '--bg',
-        opacity: 0
-      }
-    },
-    {
-      state: ['active'],
-      directives: {
-        background: '--inheritedBackground, 10',
-        opacity: 1
-      }
-    },
-    {
-      state: ['hover'],
-      directives: {
-        background: '--inheritedBackground, 10',
-        opacity: 1
-      }
-    },
-    {
-      state: ['hover', 'active'],
-      directives: {
-        background: '--inheritedBackground, 20',
-        opacity: 1
-      }
-    }
-  ]
-}

src/components/menu_item.style.js

@@ -4,11 +4,7 @@ export default {
   validInnerComponents: [
     'Text',
     'Icon',
-    'Input',
+    'Border'
-    'Border',
-    'ButtonUnstyled',
-    'Badge',
-    'Avatar'
   ],
   states: {
     hover: ':is(:hover, :focus-visible, :has(:focus-visible)):not(.disabled)',

src/components/mobile_drawer.style.js

@@ -2,18 +2,7 @@ export default {
   name: 'MobileDrawer',
   selector: '.mobile-drawer',
   validInnerComponents: [
-    'Text',
+    'MenuItem'
-    'Link',
-    'Icon',
-    'Border',
-    'Button',
-    'ButtonUnstyled',
-    'Input',
-    'PanelHeader',
-    'MenuItem',
-    'Notification',
-    'Alert',
-    'UserCard'
   ],
   defaultRules: [
     {
@@ -21,21 +10,6 @@ export default {
         background: '--bg',
         backgroundNoCssColor: 'yes'
       }
-    },
-    {
-      component: 'PanelHeader',
-      parent: { component: 'MobileDrawer' },
-      directives: {
-        background: '--fg',
-        shadow: [{
-          x: 0,
-          y: 0,
-          blur: 4,
-          spread: 0,
-          color: '#000000',
-          alpha: 0.6
-        }]
-      }
     }
   ]
 }

src/components/notification/notification.style.js

@@ -6,12 +6,7 @@ export default {
     'Link',
     'Icon',
     'Border',
-    'Button',
-    'ButtonUnstyled',
-    'RichContent',
-    'Input',
     'Avatar',
-    'Attachment',
     'PollGraph'
   ],
   defaultRules: []

src/components/panel.style.js

@@ -6,29 +6,17 @@ export default {
     'Link',
     'Icon',
     'Border',
-    'Button',
-    'ButtonUnstyled',
-    'Input',
     'PanelHeader',
-    'MenuItem',
     'Post',
     'Notification',
-    'Alert',
+    'MenuItem'
-    'UserCard',
-    'Chat',
-    'Attachment',
-    'Tab',
-    'ListItem'
   ],
   validInnerComponentsLite: [
     'Text',
     'Link',
     'Icon',
     'Border',
-    'Button',
+    'PanelHeader'
-    'Input',
-    'PanelHeader',
-    'Alert'
   ],
   defaultRules: [
     {

src/components/panel_header.style.js

@@ -7,9 +7,7 @@ export default {
     'Icon',
     'Button',
     'ButtonUnstyled',
-    'Badge',
+    'Alert'
-    'Alert',
-    'Avatar'
   ],
   defaultRules: [
     {

src/components/popover.style.js

@@ -6,16 +6,7 @@ export default {
     modal: '.modal'
   },
   validInnerComponents: [
-    'Text',
+    'MenuItem'
-    'Link',
-    'Icon',
-    'Border',
-    'Button',
-    'ButtonUnstyled',
-    'Input',
-    'MenuItem',
-    'Post',
-    'UserCard'
   ],
   defaultRules: [
     {

src/components/rich_content/rich_content.scss

@@ -2,6 +2,7 @@
   font-family: var(--font);
 
   &.-faint {
+    color: var(--text);
     /* stylelint-disable declaration-no-important */
     --text: var(--textFaint) !important;
     --link: var(--linkFaint) !important;

src/components/rich_content/rich_content.style.js

@@ -1,20 +0,0 @@
-export default {
-  name: 'RichContent',
-  selector: '.RichContent',
-  notEditable: true,
-  transparent: true,
-  validInnerComponents: [
-    'Text',
-    'FunText',
-    'Link'
-  ],
-  defaultRules: [
-    {
-      directives: {
-        '--font': 'generic | inherit',
-        '--monoFont': 'generic | monospace',
-        textNoCssColor: 'yes'
-      }
-    }
-  ]
-}

src/components/status/post.style.js

@@ -9,23 +9,9 @@ export default {
     'Link',
     'Icon',
     'Border',
-    'Button',
-    'ButtonUnstyled',
-    'RichContent',
-    'Input',
     'Avatar',
-    'Attachment',
     'PollGraph'
   ],
-  validInnerComponentsLite: [
-    'Text',
-    'Link',
-    'Icon',
-    'Border',
-    'ButtonUnstyled',
-    'RichContent',
-    'Avatar'
-  ],
   defaultRules: [
     {
       directives: {

src/components/top_bar.style.js

@@ -5,6 +5,7 @@ export default {
     'Link',
     'Text',
     'Icon',
+    // Optimization: don't put heavy components unless needed
     'Button',
     'ButtonUnstyled',
     'Input',

src/components/user_card/user_card.scss

@@ -111,15 +111,20 @@
     }
   }
 
-  .banner-overlay,
+  .header-overlay {
-  .banner-image {
     position: absolute;
     inset: 0;
     right: -1.2em;
     left: -1.2em;
     top: -1.4em;
-    padding: 0;
     mask: linear-gradient(to top, transparent 0, white 5em) bottom no-repeat;
+  }
+
+  .banner-overlay,
+  .banner-image {
+    position: absolute;
+    inset: 0;
+    padding: 0;
     border-top-left-radius: calc(var(--roundness) - 1px);
     border-top-right-radius: calc(var(--roundness) - 1px);
   }
@@ -136,6 +141,7 @@
 
   .banner-overlay {
     background-color: var(--profileTint);
+    opacity: 0.5;
     pointer-events: none; // let user copy bg url
     z-index: -1;
   }

src/components/user_card/user_card.style.js

@@ -2,40 +2,10 @@ export default {
   name: 'UserCard',
   selector: '.user-card',
   notEditable: true,
-  validInnerComponents: [
-    'Text',
-    'Link',
-    'Icon',
-    'Button',
-    'ButtonUnstyled',
-    'Input',
-    'RichContent',
-    'Alert'
-  ],
   defaultRules: [
     {
       directives: {
-        background: '--bg',
+        '--profileTint': 'color | $alpha(--background 1)'
-        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
       }
     }
   ]

src/components/user_card/user_card.vue

@@ -3,16 +3,18 @@
     <div class="user-card-inner">
       <div class="user-info">
         <div class="user-identity">
-          <div class="banner-image">
+          <div class="header-overlay">
-            <img
+            <div class="banner-image">
-              :src="bannerImgSrc"
+              <img
+                :src="bannerImgSrc"
+                :class="{ 'hide-bio': hideBio }"
+              >
+            </div>
+            <div
+              class="banner-overlay"
               :class="{ 'hide-bio': hideBio }"
-            >
+            />
           </div>
-          <div
-            class="banner-overlay"
-            :class="{ 'hide-bio': hideBio }"
-          />
           <a
             v-if="avatarAction === 'zoom'"
             class="user-info-avatar -link"

src/services/style_setter/style_setter.js

@@ -86,7 +86,7 @@ export const generateTheme = (inputRuleset, callbacks, debug) => {
 
   const themes3 = init({
     inputRuleset,
-    debug
+    debug: true
   })
 
   getCssRules(themes3.eager, debug).forEach(rule => {

src/services/theme_data/theme2_to_theme3.js

@@ -244,9 +244,6 @@ export const convertTheme2To3 = (data) => {
         case 'tooltip':
           rule.component = 'Popover'
           break
-        case 'attachment':
-          rule.component = 'Attachment'
-          break
         case 'ChatMessage':
           rule.component = 'Button'
           break

src/services/theme_data/theme_data_3.service.js

@@ -33,7 +33,6 @@ const components = {
   Icon: null,
   Border: null,
   PanelHeader: null,
-  Attachment: null,
   Panel: null,
   Chat: null,
   ChatMessage: null,