tabs support + cleanup

src/boot/after_store.js

@@ -359,7 +359,6 @@ const afterStoreSetup = async ({ store, i18n }) => {
   const { theme } = store.state.instance
   const customThemePresent = customThemeSource || customTheme
 
-  console.log({ ...customThemeSource }, { ...customTheme })
   if (customThemePresent) {
     if (customThemeSource && customThemeSource.themeEngineVersion === CURRENT_VERSION) {
       applyTheme(customThemeSource)

src/components/alert.style.js

@@ -5,7 +5,8 @@ export default {
     'Text',
     'Icon',
     'Link',
-    'Border'
+    'Border',
+    'ButtonUnstyled'
   ],
   variants: {
     normal: '.neutral',

src/components/button_unstyled.style.js

@@ -3,8 +3,6 @@ export default {
   selector: '.button-unstyled',
   states: {
     disabled: ':disabled',
-    toggled: '.toggled',
-    pressed: ':active',
     hover: ':hover:not(:disabled)',
     focused: ':focus-within'
   },

src/components/panel.style.js

@@ -16,7 +16,8 @@ export default {
     'Alert',
     'UserCard',
     'Chat',
-    'Attachment'
+    'Attachment',
+    'Tab'
   ],
   defaultRules: [
     {

src/components/tab_switcher/tab.style.js

@@ -0,0 +1,52 @@
+export default {
+  name: 'Tab', // Name of the component
+  selector: '.tab', // CSS selector/prefix
+  states: {
+    active: '.active',
+    hover: ':hover:not(:disabled)',
+    disabled: '.disabled'
+  },
+  validInnerComponents: [
+    'Text',
+    'Icon'
+  ],
+  defaultRules: [
+    {
+      directives: {
+        background: '--fg',
+        shadow: ['--defaultButtonShadow', '--defaultButtonBevel'],
+        roundness: 3
+      }
+    },
+    {
+      state: ['hover'],
+      directives: {
+        shadow: ['--defaultButtonHoverGlow', '--defaultButtonBevel']
+      }
+    },
+    {
+      state: ['disabled'],
+      directives: {
+        background: '$blend(--inheritedBackground, 0.25, --parent)',
+        shadow: ['--defaultButtonBevel']
+      }
+    },
+    {
+      state: ['active'],
+      directives: {
+        opacity: 0
+      }
+    },
+    {
+      component: 'Text',
+      parent: {
+        component: 'Tab',
+        state: ['disabled']
+      },
+      directives: {
+        textOpacity: 0.25,
+        textOpacityMode: 'blend'
+      }
+    }
+  ]
+}

src/components/tab_switcher/tab_switcher.jsx

@@ -97,7 +97,7 @@ export default {
       .map((slot, index) => {
         const props = slot.props
         if (!props) return
-        const classesTab = ['tab', 'button-default']
+        const classesTab = ['tab']
         const classesWrapper = ['tab-wrapper']
         if (this.activeIndex === index) {
           classesTab.push('active')

src/components/tab_switcher/tab_switcher.scss

@@ -25,8 +25,7 @@
         content: "";
         flex: 1 1 auto;
         border-bottom: 1px solid;
-        border-bottom-color: $fallback--border;
-        border-bottom-color: var(--border, $fallback--border);
+        border-bottom-color: var(--border);
       }
 
       .tab-wrapper {
@@ -37,8 +36,7 @@
           right: 0;
           bottom: 0;
           border-bottom: 1px solid;
-          border-bottom-color: $fallback--border;
-          border-bottom-color: var(--border, $fallback--border);
+          border-bottom-color: var(--border);
         }
       }
 
@@ -173,6 +171,14 @@
   }
 
   .tab {
+    user-select: none;
+    color: var(--text);
+    border: none;
+    cursor: pointer;
+    box-shadow: var(--shadow);
+    font-size: 1em;
+    font-family: var(--interfaceFont, sans-serif);
+    border-radius: var(--roundness);
     position: relative;
     white-space: nowrap;
     padding: 6px 1em;

src/services/theme_data/css_utils.js

@@ -9,7 +9,6 @@ export const parseCssShadow = (text) => {
 
   const [x, y, blur = 0, spread = 0] = dimensions.split(/ /).filter(x => x).map(x => x.trim())
   const isInset = inset?.trim() === 'inset'
-  console.log(color.trim())
   const colorString = color.split(/ /).filter(x => x).map(x => x.trim())[0]
 
   return {

src/services/theme_data/theme2_to_theme3.js

@@ -55,7 +55,7 @@ export const extendedBasePrefixes = [
 
   'panel',
   'topBar',
-  // 'tab', // TODO: not implemented yet
+  'tab',
   'btn',
   'input',
   'selectedMenu',
@@ -122,6 +122,9 @@ export const convertTheme2To3 = (data) => {
         case 'btn':
           rule.component = 'Button'
           break
+        case 'tab':
+          rule.component = 'Tab'
+          break
         case 'input':
           rule.component = 'Input'
           break
@@ -155,6 +158,7 @@ export const convertTheme2To3 = (data) => {
       newRules.push(rule)
       if (rule.component === 'Button') {
         newRules.push({ ...rule, component: 'ScrollbarElement' })
+        newRules.push({ ...rule, component: 'Tab' })
       }
     })
     return newRules
@@ -215,6 +219,7 @@ export const convertTheme2To3 = (data) => {
 
       if (rule.component === 'Button') {
         newRules.push({ ...rule, component: 'ScrollbarElement' })
+        newRules.push({ ...rule, component: 'Tab' })
       }
     })
     return newRules
@@ -351,8 +356,7 @@ export const convertTheme2To3 = (data) => {
       }
 
       if (newRule.component === 'Button') {
-        console.log([newRule, { ...newRule, component: 'ScrollbarElement' }])
-        return [newRule, { ...newRule, component: 'ScrollbarElement' }]
+        return [newRule, { ...newRule, component: 'Tab' }, { ...newRule, component: 'ScrollbarElement' }]
       } else {
         return [newRule]
       }