Skip to content

Commit 1d4a190

Browse files
mxschllmxschll
committed
chore: update style permutation page
1 parent 662b517 commit 1d4a190

File tree

1 file changed

+196
-83
lines changed

1 file changed

+196
-83
lines changed

‎pages/tabs/style-permutations.page.tsx‎

Lines changed: 196 additions & 83 deletions
Original file line numberDiff line numberDiff line change
@@ -18,60 +18,64 @@ const permutations = createPermutations<TabsProps>([
1818
],
1919
],
2020
activeTabId: ['first', 'second'],
21+
variant: ['default', 'container', 'stacked'],
22+
disableContentPaddings: [false, true],
2123
style: [
24+
// Minimal Modern - no background, clean underline
2225
{
2326
tabs: {
2427
backgroundColor: {
25-
default: 'light-dark(#f0f9ff, #1e293b)',
26-
hover: 'light-dark(#e0f2fe, #334155)',
27-
active: 'light-dark(#bae6fd, #0f172a)',
28-
disabled: 'light-dark(#f8fafc, #334155)',
28+
default: 'transparent',
29+
hover: 'light-dark(rgba(59, 130, 246, 0.08), rgba(59, 130, 246, 0.15))',
30+
active: 'transparent',
31+
disabled: 'transparent',
2932
},
3033
borderColor: {
31-
default: 'light-dark(#0ea5e9, #0284c7)',
32-
hover: 'light-dark(#0284c7, #0369a1)',
33-
active: 'light-dark(#0369a1, #0ea5e9)',
34-
disabled: 'light-dark(#e0f2fe, #334155)',
34+
default: 'transparent',
35+
hover: 'transparent',
36+
active: 'transparent',
37+
disabled: 'transparent',
3538
},
3639
borderWidth: '0px',
37-
borderRadius: '8px 8px 0 0',
40+
borderRadius: '6px',
3841
color: {
39-
default: 'light-dark(#0c4a6e, #e0f2fe)',
40-
hover: 'light-dark(#075985, #f0f9ff)',
41-
active: 'light-dark(#0c4a6e, #ffffff)',
42-
disabled: 'light-dark(#94a3b8, #64748b)',
42+
default: 'light-dark(#64748b, #94a3b8)',
43+
hover: 'light-dark(#1e293b, #e2e8f0)',
44+
active: 'light-dark(#0f172a, #ffffff)',
45+
disabled: 'light-dark(#cbd5e1, #475569)',
4346
},
44-
fontSize: '15px',
45-
fontWeight: '600',
47+
fontSize: '14px',
48+
fontWeight: '500',
4649
paddingBlock: '12px',
4750
paddingInline: '20px',
4851
focusRing: {
49-
borderColor: 'light-dark(#0ea5e9, #0284c7)',
50-
borderRadius: '8px',
52+
borderColor: 'light-dark(#3b82f6, #60a5fa)',
53+
borderRadius: '6px',
5154
borderWidth: '2px',
5255
},
5356
},
5457
underline: {
55-
color: 'light-dark(#0ea5e9, #06b6d4)',
58+
color: 'light-dark(#3b82f6, #60a5fa)',
5659
width: '3px',
5760
borderRadius: '3px 3px 0 0',
5861
},
5962
divider: {
60-
color: 'light-dark(#e0f2fe, #334155)',
61-
width: '1px',
63+
color: 'transparent',
64+
width: '0px',
6265
},
6366
headerDivider: {
64-
color: 'light-dark(#bae6fd, #475569)',
65-
width: '2px',
67+
color: 'light-dark(#e2e8f0, #334155)',
68+
width: '1px',
6669
},
6770
},
71+
// Pill Style - rounded with subtle background
6872
{
6973
tabs: {
7074
backgroundColor: {
71-
default: 'transparent',
72-
hover: 'light-dark(#f8fafc, #1e293b)',
73-
active: 'light-dark(#f1f5f9, #0f172a)',
74-
disabled: 'transparent',
75+
default: 'light-dark(#f1f5f9, #1e293b)',
76+
hover: 'light-dark(#e0e7ff, #312e81)',
77+
active: 'light-dark(#6366f1, #4f46e5)',
78+
disabled: 'light-dark(#f8fafc, #1e293b)',
7579
},
7680
borderColor: {
7781
default: 'transparent',
@@ -80,121 +84,222 @@ const permutations = createPermutations<TabsProps>([
8084
disabled: 'transparent',
8185
},
8286
borderWidth: '0px',
83-
borderRadius: '0px',
87+
borderRadius: '20px',
8488
color: {
85-
default: 'light-dark(#64748b, #cbd5e1)',
86-
hover: 'light-dark(#1e293b, #f1f5f9)',
87-
active: 'light-dark(#0f172a, #ffffff)',
88-
disabled: 'light-dark(#cbd5e1, #475569)',
89+
default: 'light-dark(#475569, #94a3b8)',
90+
hover: 'light-dark(#4338ca, #c7d2fe)',
91+
active: 'light-dark(#ffffff, #ffffff)',
92+
disabled: 'light-dark(#cbd5e1, #64748b)',
8993
},
9094
fontSize: '14px',
91-
fontWeight: '500',
95+
fontWeight: '600',
9296
paddingBlock: '10px',
93-
paddingInline: '16px',
97+
paddingInline: '24px',
98+
focusRing: {
99+
borderColor: 'light-dark(#6366f1, #818cf8)',
100+
borderRadius: '22px',
101+
borderWidth: '2px',
102+
},
94103
},
95104
underline: {
96-
color: 'light-dark(#0f172a, #e2e8f0)',
97-
width: '2px',
98-
borderRadius: '2px 2px 0 0',
99-
},
100-
divider: {
101105
color: 'transparent',
102106
width: '0px',
107+
borderRadius: '0px',
108+
},
109+
divider: {
110+
color: 'light-dark(#e2e8f0, #334155)',
111+
width: '1px',
103112
},
104113
headerDivider: {
105-
color: 'light-dark(#e2e8f0, #475569)',
114+
color: 'light-dark(#cbd5e1, #475569)',
106115
width: '1px',
107116
},
108117
},
118+
// Bold Accent - strong colors with background
109119
{
110120
tabs: {
111121
backgroundColor: {
112-
default: 'light-dark(#faf5ff, #1e1b4b)',
113-
hover: 'light-dark(#f3e8ff, #312e81)',
114-
active: 'light-dark(#e9d5ff, #1e1b4b)',
115-
disabled: 'light-dark(#faf5ff, #312e81)',
122+
default: 'light-dark(#fef3c7, #422006)',
123+
hover: 'light-dark(#fde68a, #713f12)',
124+
active: 'light-dark(#fbbf24, #d97706)',
125+
disabled: 'light-dark(#fef9e7, #78350f)',
116126
},
117127
borderColor: {
118-
default: 'light-dark(#a855f7, #9333ea)',
119-
hover: 'light-dark(#9333ea, #a855f7)',
120-
active: 'light-dark(#7e22ce, #c084fc)',
121-
disabled: 'light-dark(#f3e8ff, #4c1d95)',
128+
default: 'transparent',
129+
hover: 'transparent',
130+
active: 'transparent',
131+
disabled: 'transparent',
122132
},
123-
borderWidth: '2px',
124-
borderRadius: '12px 12px 0 0',
133+
borderWidth: '0px',
134+
borderRadius: '8px 8px 0 0',
125135
color: {
126-
default: 'light-dark(#6b21a8, #e9d5ff)',
127-
hover: 'light-dark(#581c87, #f3e8ff)',
128-
active: 'light-dark(#4c1d95, #faf5ff)',
129-
disabled: 'light-dark(#c4b5fd, #6b21a8)',
136+
default: 'light-dark(#92400e, #fef3c7)',
137+
hover: 'light-dark(#78350f, #fef9e7)',
138+
active: 'light-dark(#451a03, #ffffff)',
139+
disabled: 'light-dark(#d1d5db, #78350f)',
130140
},
131-
fontSize: '16px',
141+
fontSize: '14px',
132142
fontWeight: '600',
133-
paddingBlock: '14px',
134-
paddingInline: '24px',
143+
paddingBlock: '12px',
144+
paddingInline: '20px',
135145
focusRing: {
136-
borderColor: 'light-dark(#a855f7, #c084fc)',
137-
borderRadius: '12px',
138-
borderWidth: '3px',
146+
borderColor: 'light-dark(#f59e0b, #fbbf24)',
147+
borderRadius: '8px',
148+
borderWidth: '2px',
139149
},
140150
},
141151
underline: {
142-
color: 'light-dark(#a855f7, #c084fc)',
152+
color: 'light-dark(#f59e0b, #fbbf24)',
143153
width: '4px',
144154
borderRadius: '4px 4px 0 0',
145155
},
146156
divider: {
147-
color: 'light-dark(#f3e8ff, #4c1d95)',
157+
color: 'light-dark(#fde68a, #78350f)',
158+
width: '1px',
159+
},
160+
headerDivider: {
161+
color: 'light-dark(#fde047, #92400e)',
148162
width: '2px',
149163
},
164+
},
165+
// Elegant Teal - sophisticated with borders
166+
{
167+
tabs: {
168+
backgroundColor: {
169+
default: 'transparent',
170+
hover: 'light-dark(#f0fdfa, #134e4a)',
171+
active: 'light-dark(#ffffff, #0f766e)',
172+
disabled: 'transparent',
173+
},
174+
borderColor: {
175+
default: 'light-dark(#d1fae5, #2dd4bf)',
176+
hover: 'light-dark(#14b8a6, #5eead4)',
177+
active: 'light-dark(#0d9488, #14b8a6)',
178+
disabled: 'light-dark(#e5e7eb, #374151)',
179+
},
180+
borderWidth: '2px',
181+
borderRadius: '10px 10px 0 0',
182+
color: {
183+
default: 'light-dark(#0f766e, #99f6e4)',
184+
hover: 'light-dark(#115e59, #5eead4)',
185+
active: 'light-dark(#134e4a, #ffffff)',
186+
disabled: 'light-dark(#9ca3af, #6b7280)',
187+
},
188+
fontSize: '14px',
189+
fontWeight: '600',
190+
paddingBlock: '12px',
191+
paddingInline: '20px',
192+
focusRing: {
193+
borderColor: 'light-dark(#14b8a6, #2dd4bf)',
194+
borderRadius: '10px',
195+
borderWidth: '2px',
196+
},
197+
},
198+
underline: {
199+
color: 'transparent',
200+
width: '0px',
201+
borderRadius: '0px',
202+
},
203+
divider: {
204+
color: 'light-dark(#ccfbf1, #134e4a)',
205+
width: '1px',
206+
},
150207
headerDivider: {
151-
color: 'light-dark(#e9d5ff, #6b21a8)',
208+
color: 'light-dark(#99f6e4, #0f766e)',
209+
width: '2px',
210+
},
211+
},
212+
// Cool Minimalist - subtle grays with accent
213+
{
214+
tabs: {
215+
backgroundColor: {
216+
default: 'transparent',
217+
hover: 'light-dark(#f8fafc, #1e293b)',
218+
active: 'light-dark(#f1f5f9, #334155)',
219+
disabled: 'transparent',
220+
},
221+
borderColor: {
222+
default: 'transparent',
223+
hover: 'transparent',
224+
active: 'light-dark(#e2e8f0, #64748b)',
225+
disabled: 'transparent',
226+
},
227+
borderWidth: '0px 0px 2px 0px',
228+
borderRadius: '0px',
229+
color: {
230+
default: 'light-dark(#64748b, #94a3b8)',
231+
hover: 'light-dark(#334155, #cbd5e1)',
232+
active: 'light-dark(#0f172a, #f1f5f9)',
233+
disabled: 'light-dark(#cbd5e1, #475569)',
234+
},
235+
fontSize: '14px',
236+
fontWeight: '500',
237+
paddingBlock: '12px',
238+
paddingInline: '20px',
239+
focusRing: {
240+
borderColor: 'light-dark(#94a3b8, #cbd5e1)',
241+
borderRadius: '4px',
242+
borderWidth: '2px',
243+
},
244+
},
245+
underline: {
246+
color: 'light-dark(#0f172a, #f1f5f9)',
152247
width: '3px',
248+
borderRadius: '3px 3px 0 0',
249+
},
250+
divider: {
251+
color: 'transparent',
252+
width: '0px',
253+
},
254+
headerDivider: {
255+
color: 'light-dark(#e2e8f0, #475569)',
256+
width: '1px',
153257
},
154258
},
259+
// Vibrant Rose - energetic and modern
155260
{
156261
tabs: {
157262
backgroundColor: {
158-
default: 'light-dark(#f0fdf4, #14532d)',
159-
hover: 'light-dark(#dcfce7, #166534)',
160-
active: 'light-dark(#bbf7d0, #14532d)',
161-
disabled: 'light-dark(#f7fee7, #1e3a8a)',
263+
default: 'light-dark(#fff1f2, #4c0519)',
264+
hover: 'light-dark(#ffe4e6, #881337)',
265+
active: 'light-dark(#fb7185, #e11d48)',
266+
disabled: 'light-dark(#fff5f7, #881337)',
162267
},
163268
borderColor: {
164-
default: 'light-dark(#10b981, #059669)',
165-
hover: 'light-dark(#059669, #10b981)',
166-
active: 'light-dark(#047857, #34d399)',
167-
disabled: 'light-dark(#d1fae5, #1e40af)',
269+
default: 'transparent',
270+
hover: 'transparent',
271+
active: 'transparent',
272+
disabled: 'transparent',
168273
},
169274
borderWidth: '0px',
170-
borderRadius: '10px 10px 0 0',
275+
borderRadius: '12px 12px 0 0',
171276
color: {
172-
default: 'light-dark(#065f46, #d1fae5)',
173-
hover: 'light-dark(#047857, #ecfdf5)',
174-
active: 'light-dark(#064e3b, #f0fdf4)',
175-
disabled: 'light-dark(#a7f3d0, #475569)',
277+
default: 'light-dark(#9f1239, #fecdd3)',
278+
hover: 'light-dark(#881337, #ffe4e6)',
279+
active: 'light-dark(#ffffff, #ffffff)',
280+
disabled: 'light-dark(#d1d5db, #881337)',
176281
},
177-
fontSize: '15px',
282+
fontSize: '14px',
178283
fontWeight: '600',
179284
paddingBlock: '12px',
180-
paddingInline: '18px',
285+
paddingInline: '20px',
181286
focusRing: {
182-
borderColor: 'light-dark(#10b981, #34d399)',
183-
borderRadius: '10px',
287+
borderColor: 'light-dark(#f43f5e, #fb7185)',
288+
borderRadius: '12px',
184289
borderWidth: '2px',
185290
},
186291
},
187292
underline: {
188-
color: 'light-dark(#10b981, #34d399)',
293+
color: 'light-dark(#f43f5e, #fda4af)',
189294
width: '3px',
190295
borderRadius: '3px 3px 0 0',
191296
},
192297
divider: {
193-
color: 'light-dark(#d1fae5, #1e3a8a)',
298+
color: 'light-dark(#fecdd3, #881337)',
194299
width: '1px',
195300
},
196301
headerDivider: {
197-
color: 'light-dark(#a7f3d0, #334155)',
302+
color: 'light-dark(#fda4af, #9f1239)',
198303
width: '2px',
199304
},
200305
},
@@ -207,7 +312,15 @@ export default function TabsStylePermutations() {
207312
<>
208313
<h1>Tabs Style Permutations</h1>
209314
<ScreenshotArea disableAnimations={true}>
210-
<PermutationsView permutations={permutations} render={permutation => <Tabs {...permutation} />} />
315+
<PermutationsView
316+
permutations={permutations}
317+
render={permutation => (
318+
<Tabs
319+
{...permutation}
320+
i18nStrings={{ scrollLeftAriaLabel: 'Scroll left', scrollRightAriaLabel: 'Scroll right' }}
321+
/>
322+
)}
323+
/>
211324
</ScreenshotArea>
212325
</>
213326
);

0 commit comments

Comments
 (0)