refactor: simplify test page

Author: mxschll

pages/tabs/style-permutations.page.tsx

@@ -8,56 +8,8 @@ import createPermutations from '../utils/permutations';
 import PermutationsView from '../utils/permutations-view';
 import ScreenshotArea from '../utils/screenshot-area';
 
-// No background, underline
-const style1 = {
-  tabs: {
-    backgroundColor: {
-      default: 'transparent',
-      hover: 'light-dark(rgba(59, 130, 246, 0.08), rgba(59, 130, 246, 0.15))',
-      active: 'transparent',
-      disabled: 'transparent',
-    },
-    borderColor: {
-      default: 'transparent',
-      hover: 'transparent',
-      active: 'transparent',
-      disabled: 'transparent',
-    },
-    borderWidth: '0px',
-    borderRadius: '6px',
-    color: {
-      default: 'light-dark(#64748b, #94a3b8)',
-      hover: 'light-dark(#1e293b, #e2e8f0)',
-      active: 'light-dark(#0f172a, #ffffff)',
-      disabled: 'light-dark(#cbd5e1, #475569)',
-    },
-    fontSize: '14px',
-    fontWeight: '500',
-    paddingBlock: '12px',
-    paddingInline: '20px',
-    focusRing: {
-      borderColor: 'light-dark(#3b82f6, #60a5fa)',
-      borderRadius: '6px',
-      borderWidth: '2px',
-    },
-  },
-  tabUnderline: {
-    color: 'light-dark(#3b82f6, #60a5fa)',
-    width: '3px',
-    borderRadius: '3px',
-  },
-  tabSeparator: {
-    color: 'transparent',
-    width: '0px',
-  },
-  headerBorder: {
-    color: 'light-dark(#e2e8f0, #334155)',
-    width: '1px',
-  },
-};
-
 // Rounded with background
-const style2 = {
+const style1 = {
   tabs: {
     backgroundColor: {
       default: 'light-dark(#f1f5f9, #1e293b)',
@@ -72,7 +24,7 @@ const style2 = {
       disabled: 'lightblue',
     },
     borderWidth: '2px',
-    borderRadius: '20px',
+    borderRadius: '40px',
     color: {
       default: 'light-dark(#475569, #94a3b8)',
       hover: 'light-dark(#1e3a8a, #dbeafe)',
@@ -105,7 +57,7 @@ const style2 = {
 };
 
 // Border colors with background
-const style3 = {
+const style2 = {
   tabs: {
     backgroundColor: {
       default: 'light-dark(#fef3c7, #422006)',
@@ -144,7 +96,7 @@ const style3 = {
   },
   tabSeparator: {
     color: 'light-dark(#fde68a, #78350f)',
-    width: '1px',
+    width: '2px',
   },
   headerBorder: {
     color: 'light-dark(#fde047, #92400e)',
@@ -164,7 +116,7 @@ const permutations = createPermutations<TabsProps>([
     activeTabId: ['first', 'second'],
     variant: ['default', 'container', 'stacked'],
     disableContentPaddings: [false, true],
-    style: [style1, style2, style3],
+    style: [style1, style2],
   },
 ]);
 
@@ -173,15 +125,6 @@ export default function TabsStylePermutations() {
     <>
       <h1>Tabs Style Permutations</h1>
 
-      <Tabs
-        style={style3}
-        tabs={[
-          { id: 'first', label: 'First tab', content: 'First tab content' },
-          { id: 'second', label: 'Second tab', content: 'Second tab content' },
-          { id: 'third', label: 'Third tab', content: 'Third tab content', disabled: true },
-        ]}
-      />
-
       <ScreenshotArea disableAnimations={true}>
         <PermutationsView
           permutations={permutations}