6 files changed, 67 insertions, 9 deletions
diff --git a/src/components/alert.style.js b/src/components/alert.style.js
index 5881e833..bb97bd64 100644
--- a/src/components/alert.style.js
+++ b/src/components/alert.style.js
@@ -5,7 +5,8 @@ export default {
     'Text',
     'Icon',
     'Link',
-    'Border'
+    'Border',
+    'ButtonUnstyled'
   ],
   variants: {
     normal: '.neutral',
diff --git a/src/components/button_unstyled.style.js b/src/components/button_unstyled.style.js
index 60dd0d47..a2d854aa 100644
--- a/src/components/button_unstyled.style.js
+++ b/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'
   },
diff --git a/src/components/panel.style.js b/src/components/panel.style.js
index 95a10366..504ecbcb 100644
--- a/src/components/panel.style.js
+++ b/src/components/panel.style.js
@@ -16,7 +16,8 @@ export default {
     'Alert',
     'UserCard',
     'Chat',
-    'Attachment'
+    'Attachment',
+    'Tab'
   ],
   defaultRules: [
     {
diff --git a/src/components/tab_switcher/tab.style.js b/src/components/tab_switcher/tab.style.js
new file mode 100644
index 00000000..563da87c
--- /dev/null
+++ b/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'
+      }
+    }
+  ]
+}
diff --git a/src/components/tab_switcher/tab_switcher.jsx b/src/components/tab_switcher/tab_switcher.jsx
index b444da43..027a380a 100644
--- a/src/components/tab_switcher/tab_switcher.jsx
+++ b/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')
diff --git a/src/components/tab_switcher/tab_switcher.scss b/src/components/tab_switcher/tab_switcher.scss
index 705925c8..a90a13ed 100644
--- a/src/components/tab_switcher/tab_switcher.scss
+++ b/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;