fix(mantine, tabs): vertical tabs look and small style improvements (#…

…3848)

packages/mantine/src/styles/Tabs.module.css

@@ -1,45 +1,19 @@
-.list {
-    &[data-orientation='horizontal'] {
-        &::before {
-            border-style: none;
+.root {
+    &[data-variant='default'] {
+        @mixin light {
+            --tab-hover-color: var(--mantine-color-gray-1);
         }
 
-        border-bottom: rem(1) solid var(--mantine-color-gray-3);
-    }
+        --tabs-list-border-width: 1px;
 
-    &[data-orientation='vertical'] {
-        &::before {
-            border-style: none;
+        &[data-orientation='horizontal'] {
+            .list {
+                margin-bottom: calc(-1 * var(--tabs-list-border-width));
+            }
         }
-
-        border-right: rem(1) solid var(--mantine-color-gray-3);
     }
 }
 
 .tab {
-    &[data-orientation='horizontal'] {
-        border-bottom: rem(1) solid transparent;
-        margin-bottom: rem(-1);
-
-        &[data-active] {
-            border-bottom: rem(1) solid var(--mantine-primary-color-6);
-        }
-    }
-
-    &[data-orientation='vertical'] {
-        border-right: rem(1) solid transparent;
-        margin-right: rem(-1);
-
-        &[data-active] {
-            border-bottom: rem(1) solid var(--mantine-primary-color-6);
-        }
-    }
-
-    & :hover {
-        background-color: var(--mantine-color-gray-0);
-    }
-
-    &:not([data-active]):hover {
-        border-color: var(--mantine-color-gray-3);
-    }
+    line-height: 1.5;
 }

packages/mantine/src/theme/Theme.tsx

@@ -265,7 +265,12 @@ export const plasmaTheme: MantineThemeOverride = createTheme({
             },
         }),
         Tabs: Tabs.extend({
-            classNames: {list: TabsClasses.list, tab: TabsClasses.tab},
+            classNames: TabsClasses,
+        }),
+        TabsTab: Tabs.Tab.extend({
+            defaultProps: {
+                px: 'sm',
+            },
         }),
         Text: Text.extend({
             classNames: TextClasses,