@principal-ade/industry-theme 0.1.4 → 0.1.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (29) hide show
  1. package/dist/cjs/ThemeShowcase.d.ts.map +1 -1
  2. package/dist/cjs/defaultThemes.d.ts.map +1 -1
  3. package/dist/cjs/glassmorphismTheme.d.ts.map +1 -1
  4. package/dist/cjs/index.d.ts +2 -1
  5. package/dist/cjs/index.d.ts.map +1 -1
  6. package/dist/cjs/index.js +32 -15
  7. package/dist/cjs/landingPageTheme.d.ts.map +1 -1
  8. package/dist/cjs/themeHelpers.d.ts.map +1 -1
  9. package/dist/cjs/themes.d.ts +2 -2
  10. package/dist/cjs/themes.d.ts.map +1 -1
  11. package/dist/esm/ThemeShowcase.d.ts.map +1 -1
  12. package/dist/esm/defaultThemes.d.ts.map +1 -1
  13. package/dist/esm/glassmorphismTheme.d.ts.map +1 -1
  14. package/dist/esm/index.d.ts +2 -1
  15. package/dist/esm/index.d.ts.map +1 -1
  16. package/dist/esm/index.js +32 -15
  17. package/dist/esm/landingPageTheme.d.ts.map +1 -1
  18. package/dist/esm/themeHelpers.d.ts.map +1 -1
  19. package/dist/esm/themes.d.ts +2 -2
  20. package/dist/esm/themes.d.ts.map +1 -1
  21. package/package.json +1 -1
  22. package/src/ThemeProvider.tsx +5 -5
  23. package/src/ThemeShowcase.tsx +322 -216
  24. package/src/defaultThemes.ts +10 -1
  25. package/src/glassmorphismTheme.ts +5 -2
  26. package/src/index.ts +7 -14
  27. package/src/landingPageTheme.ts +8 -1
  28. package/src/themeHelpers.ts +9 -15
  29. package/src/themes.ts +18 -10
package/src/ThemeShowcase.tsx CHANGED
@@ -26,7 +26,7 @@ export const ThemeShowcase: React.FC<ThemeShowcaseProps> = ({
26
26
  theme,
27
27
  title,
28
28
  showValues = true,
29
- sections = ['colors', 'typography', 'spacing', 'shadows', 'radii']
29
+ sections = ['colors', 'typography', 'spacing', 'shadows', 'radii'],
30
30
  }) => {
31
31
  const containerStyle: React.CSSProperties = {
32
32
  fontFamily: theme.fonts.body,
@@ -64,11 +64,13 @@ export const ThemeShowcase: React.FC<ThemeShowcaseProps> = ({
64
64
  return (
65
65
  <div style={containerStyle}>
66
66
  {title && (
67
- <h1 style={{
68
- ...headingStyle,
69
- fontSize: theme.fontSizes[6],
70
- marginBottom: theme.space[4],
71
- }}>
67
+ <h1
68
+ style={{
69
+ ...headingStyle,
70
+ fontSize: theme.fontSizes[6],
71
+ marginBottom: theme.space[4],
72
+ }}
73
+ >
72
74
  {title}
73
75
  </h1>
74
76
  )}
@@ -79,45 +81,57 @@ export const ThemeShowcase: React.FC<ThemeShowcaseProps> = ({
79
81
 
80
82
  {/* Primary Colors */}
81
83
  <h3 style={subheadingStyle}>Primary Colors</h3>
82
- <div style={{
83
- display: 'grid',
84
- gridTemplateColumns: 'repeat(auto-fill, minmax(200px, 1fr))',
85
- gap: theme.space[3],
86
- marginBottom: theme.space[3],
87
- }}>
88
- {['text', 'background', 'primary', 'secondary', 'accent', 'muted'].map(key => {
84
+ <div
85
+ style={{
86
+ display: 'grid',
87
+ gridTemplateColumns: 'repeat(auto-fill, minmax(200px, 1fr))',
88
+ gap: theme.space[3],
89
+ marginBottom: theme.space[3],
90
+ }}
91
+ >
92
+ {['text', 'background', 'primary', 'secondary', 'accent', 'muted'].map((key) => {
89
93
  const color = theme.colors[key as keyof typeof theme.colors];
90
94
  if (!color) return null;
91
95
  return (
92
- <div key={key} style={{
93
- display: 'flex',
94
- alignItems: 'center',
95
- padding: theme.space[2],
96
- backgroundColor: theme.colors.backgroundLight || theme.colors.backgroundTertiary,
97
- borderRadius: theme.radii[1],
98
- }}>
99
- <div style={{
100
- width: 40,
101
- height: 40,
102
- backgroundColor: color,
103
- border: `1px solid ${theme.colors.border}`,
96
+ <div
97
+ key={key}
98
+ style={{
99
+ display: 'flex',
100
+ alignItems: 'center',
101
+ padding: theme.space[2],
102
+ backgroundColor:
103
+ theme.colors.backgroundLight || theme.colors.backgroundTertiary,
104
104
  borderRadius: theme.radii[1],
105
- marginRight: theme.space[2],
106
- }} />
105
+ }}
106
+ >
107
+ <div
108
+ style={{
109
+ width: 40,
110
+ height: 40,
111
+ backgroundColor: color,
112
+ border: `1px solid ${theme.colors.border}`,
113
+ borderRadius: theme.radii[1],
114
+ marginRight: theme.space[2],
115
+ }}
116
+ />
107
117
  <div>
108
- <div style={{
109
- fontFamily: theme.fonts.monospace,
110
- fontSize: theme.fontSizes[1],
111
- fontWeight: theme.fontWeights.medium,
112
- }}>
118
+ <div
119
+ style={{
120
+ fontFamily: theme.fonts.monospace,
121
+ fontSize: theme.fontSizes[1],
122
+ fontWeight: theme.fontWeights.medium,
123
+ }}
124
+ >
113
125
  {key}
114
126
  </div>
115
127
  {showValues && (
116
- <div style={{
117
- fontFamily: theme.fonts.monospace,
118
- fontSize: theme.fontSizes[0],
119
- color: theme.colors.textSecondary,
120
- }}>
128
+ <div
129
+ style={{
130
+ fontFamily: theme.fonts.monospace,
131
+ fontSize: theme.fontSizes[0],
132
+ color: theme.colors.textSecondary,
133
+ }}
134
+ >
121
135
  {color}
122
136
  </div>
123
137
  )}
@@ -129,45 +143,57 @@ export const ThemeShowcase: React.FC<ThemeShowcaseProps> = ({
129
143
 
130
144
  {/* Status Colors */}
131
145
  <h3 style={subheadingStyle}>Status Colors</h3>
132
- <div style={{
133
- display: 'grid',
134
- gridTemplateColumns: 'repeat(auto-fill, minmax(200px, 1fr))',
135
- gap: theme.space[3],
136
- marginBottom: theme.space[3],
137
- }}>
138
- {['success', 'warning', 'error', 'info'].map(key => {
146
+ <div
147
+ style={{
148
+ display: 'grid',
149
+ gridTemplateColumns: 'repeat(auto-fill, minmax(200px, 1fr))',
150
+ gap: theme.space[3],
151
+ marginBottom: theme.space[3],
152
+ }}
153
+ >
154
+ {['success', 'warning', 'error', 'info'].map((key) => {
139
155
  const color = theme.colors[key as keyof typeof theme.colors];
140
156
  if (!color) return null;
141
157
  return (
142
- <div key={key} style={{
143
- display: 'flex',
144
- alignItems: 'center',
145
- padding: theme.space[2],
146
- backgroundColor: theme.colors.backgroundLight || theme.colors.backgroundTertiary,
147
- borderRadius: theme.radii[1],
148
- }}>
149
- <div style={{
150
- width: 40,
151
- height: 40,
152
- backgroundColor: color,
153
- border: `1px solid ${theme.colors.border}`,
158
+ <div
159
+ key={key}
160
+ style={{
161
+ display: 'flex',
162
+ alignItems: 'center',
163
+ padding: theme.space[2],
164
+ backgroundColor:
165
+ theme.colors.backgroundLight || theme.colors.backgroundTertiary,
154
166
  borderRadius: theme.radii[1],
155
- marginRight: theme.space[2],
156
- }} />
167
+ }}
168
+ >
169
+ <div
170
+ style={{
171
+ width: 40,
172
+ height: 40,
173
+ backgroundColor: color,
174
+ border: `1px solid ${theme.colors.border}`,
175
+ borderRadius: theme.radii[1],
176
+ marginRight: theme.space[2],
177
+ }}
178
+ />
157
179
  <div>
158
- <div style={{
159
- fontFamily: theme.fonts.monospace,
160
- fontSize: theme.fontSizes[1],
161
- fontWeight: theme.fontWeights.medium,
162
- }}>
180
+ <div
181
+ style={{
182
+ fontFamily: theme.fonts.monospace,
183
+ fontSize: theme.fontSizes[1],
184
+ fontWeight: theme.fontWeights.medium,
185
+ }}
186
+ >
163
187
  {key}
164
188
  </div>
165
189
  {showValues && (
166
- <div style={{
167
- fontFamily: theme.fonts.monospace,
168
- fontSize: theme.fontSizes[0],
169
- color: theme.colors.textSecondary,
170
- }}>
190
+ <div
191
+ style={{
192
+ fontFamily: theme.fonts.monospace,
193
+ fontSize: theme.fontSizes[0],
194
+ color: theme.colors.textSecondary,
195
+ }}
196
+ >
171
197
  {color}
172
198
  </div>
173
199
  )}
@@ -179,35 +205,50 @@ export const ThemeShowcase: React.FC<ThemeShowcaseProps> = ({
179
205
 
180
206
  {/* Background Colors */}
181
207
  <h3 style={subheadingStyle}>Background Colors</h3>
182
- <div style={{
183
- display: 'grid',
184
- gridTemplateColumns: 'repeat(auto-fill, minmax(200px, 1fr))',
185
- gap: theme.space[3],
186
- }}>
187
- {['backgroundSecondary', 'backgroundTertiary', 'backgroundLight', 'backgroundHover', 'surface'].map(key => {
208
+ <div
209
+ style={{
210
+ display: 'grid',
211
+ gridTemplateColumns: 'repeat(auto-fill, minmax(200px, 1fr))',
212
+ gap: theme.space[3],
213
+ }}
214
+ >
215
+ {[
216
+ 'backgroundSecondary',
217
+ 'backgroundTertiary',
218
+ 'backgroundLight',
219
+ 'backgroundHover',
220
+ 'surface',
221
+ ].map((key) => {
188
222
  const color = theme.colors[key as keyof typeof theme.colors];
189
223
  if (!color) return null;
190
224
  return (
191
- <div key={key} style={{
192
- padding: theme.space[3],
193
- backgroundColor: color,
194
- border: `1px solid ${theme.colors.border}`,
195
- borderRadius: theme.radii[1],
196
- }}>
197
- <div style={{
198
- fontFamily: theme.fonts.monospace,
199
- fontSize: theme.fontSizes[1],
200
- fontWeight: theme.fontWeights.medium,
201
- }}>
225
+ <div
226
+ key={key}
227
+ style={{
228
+ padding: theme.space[3],
229
+ backgroundColor: color,
230
+ border: `1px solid ${theme.colors.border}`,
231
+ borderRadius: theme.radii[1],
232
+ }}
233
+ >
234
+ <div
235
+ style={{
236
+ fontFamily: theme.fonts.monospace,
237
+ fontSize: theme.fontSizes[1],
238
+ fontWeight: theme.fontWeights.medium,
239
+ }}
240
+ >
202
241
  {key}
203
242
  </div>
204
243
  {showValues && (
205
- <div style={{
206
- fontFamily: theme.fonts.monospace,
207
- fontSize: theme.fontSizes[0],
208
- color: theme.colors.textSecondary,
209
- marginTop: theme.space[1],
210
- }}>
244
+ <div
245
+ style={{
246
+ fontFamily: theme.fonts.monospace,
247
+ fontSize: theme.fontSizes[0],
248
+ color: theme.colors.textSecondary,
249
+ marginTop: theme.space[1],
250
+ }}
251
+ >
211
252
  {color}
212
253
  </div>
213
254
  )}
@@ -225,36 +266,66 @@ export const ThemeShowcase: React.FC<ThemeShowcaseProps> = ({
225
266
  {/* Font Families */}
226
267
  <h3 style={subheadingStyle}>Font Families</h3>
227
268
  <div style={{ marginBottom: theme.space[4] }}>
228
- <div style={{
229
- fontFamily: theme.fonts.heading,
230
- fontSize: theme.fontSizes[4],
231
- marginBottom: theme.space[2],
232
- }}>
233
- Heading Font: {showValues && <span style={{
234
- fontFamily: theme.fonts.monospace,
235
- fontSize: theme.fontSizes[1],
236
- color: theme.colors.textSecondary,
237
- }}> {theme.fonts.heading}</span>}
269
+ <div
270
+ style={{
271
+ fontFamily: theme.fonts.heading,
272
+ fontSize: theme.fontSizes[4],
273
+ marginBottom: theme.space[2],
274
+ }}
275
+ >
276
+ Heading Font:{' '}
277
+ {showValues && (
278
+ <span
279
+ style={{
280
+ fontFamily: theme.fonts.monospace,
281
+ fontSize: theme.fontSizes[1],
282
+ color: theme.colors.textSecondary,
283
+ }}
284
+ >
285
+ {' '}
286
+ {theme.fonts.heading}
287
+ </span>
288
+ )}
238
289
  </div>
239
- <div style={{
240
- fontFamily: theme.fonts.body,
241
- fontSize: theme.fontSizes[2],
242
- marginBottom: theme.space[2],
243
- }}>
244
- Body Font: {showValues && <span style={{
245
- fontFamily: theme.fonts.monospace,
246
- fontSize: theme.fontSizes[1],
247
- color: theme.colors.textSecondary,
248
- }}> {theme.fonts.body}</span>}
290
+ <div
291
+ style={{
292
+ fontFamily: theme.fonts.body,
293
+ fontSize: theme.fontSizes[2],
294
+ marginBottom: theme.space[2],
295
+ }}
296
+ >
297
+ Body Font:{' '}
298
+ {showValues && (
299
+ <span
300
+ style={{
301
+ fontFamily: theme.fonts.monospace,
302
+ fontSize: theme.fontSizes[1],
303
+ color: theme.colors.textSecondary,
304
+ }}
305
+ >
306
+ {' '}
307
+ {theme.fonts.body}
308
+ </span>
309
+ )}
249
310
  </div>
250
- <div style={{
251
- fontFamily: theme.fonts.monospace,
252
- fontSize: theme.fontSizes[2],
253
- }}>
254
- Monospace Font: {showValues && <span style={{
255
- fontSize: theme.fontSizes[1],
256
- color: theme.colors.textSecondary,
257
- }}> {theme.fonts.monospace}</span>}
311
+ <div
312
+ style={{
313
+ fontFamily: theme.fonts.monospace,
314
+ fontSize: theme.fontSizes[2],
315
+ }}
316
+ >
317
+ Monospace Font:{' '}
318
+ {showValues && (
319
+ <span
320
+ style={{
321
+ fontSize: theme.fontSizes[1],
322
+ color: theme.colors.textSecondary,
323
+ }}
324
+ >
325
+ {' '}
326
+ {theme.fonts.monospace}
327
+ </span>
328
+ )}
258
329
  </div>
259
330
  </div>
260
331
 
@@ -262,11 +333,14 @@ export const ThemeShowcase: React.FC<ThemeShowcaseProps> = ({
262
333
  <h3 style={subheadingStyle}>Font Sizes</h3>
263
334
  <div style={{ marginBottom: theme.space[4] }}>
264
335
  {theme.fontSizes.map((size, index) => (
265
- <div key={index} style={{
266
- fontSize: size,
267
- lineHeight: theme.lineHeights.body,
268
- marginBottom: theme.space[1],
269
- }}>
336
+ <div
337
+ key={index}
338
+ style={{
339
+ fontSize: size,
340
+ lineHeight: theme.lineHeights.body,
341
+ marginBottom: theme.space[1],
342
+ }}
343
+ >
270
344
  Size {index}: Sample Text {showValues && `(${size}px)`}
271
345
  </div>
272
346
  ))}
@@ -274,16 +348,21 @@ export const ThemeShowcase: React.FC<ThemeShowcaseProps> = ({
274
348
 
275
349
  {/* Font Weights */}
276
350
  <h3 style={subheadingStyle}>Font Weights</h3>
277
- <div style={{
278
- display: 'grid',
279
- gridTemplateColumns: 'repeat(auto-fit, minmax(150px, 1fr))',
280
- gap: theme.space[2],
281
- }}>
351
+ <div
352
+ style={{
353
+ display: 'grid',
354
+ gridTemplateColumns: 'repeat(auto-fit, minmax(150px, 1fr))',
355
+ gap: theme.space[2],
356
+ }}
357
+ >
282
358
  {Object.entries(theme.fontWeights).map(([name, weight]) => (
283
- <div key={name} style={{
284
- fontWeight: weight,
285
- fontSize: theme.fontSizes[2],
286
- }}>
359
+ <div
360
+ key={name}
361
+ style={{
362
+ fontWeight: weight,
363
+ fontSize: theme.fontSizes[2],
364
+ }}
365
+ >
287
366
  {name} {showValues && `(${weight})`}
288
367
  </div>
289
368
  ))}
@@ -297,27 +376,33 @@ export const ThemeShowcase: React.FC<ThemeShowcaseProps> = ({
297
376
  <div style={{ display: 'flex', flexDirection: 'column', gap: theme.space[2] }}>
298
377
  {theme.space.map((space, index) => (
299
378
  <div key={index} style={{ display: 'flex', alignItems: 'center' }}>
300
- <div style={{
301
- width: 60,
302
- fontFamily: theme.fonts.monospace,
303
- fontSize: theme.fontSizes[1],
304
- color: theme.colors.textSecondary,
305
- }}>
306
- [{index}]
307
- </div>
308
- <div style={{
309
- height: 24,
310
- width: space,
311
- backgroundColor: theme.colors.primary,
312
- borderRadius: theme.radii[1],
313
- }} />
314
- {showValues && (
315
- <div style={{
316
- marginLeft: theme.space[2],
379
+ <div
380
+ style={{
381
+ width: 60,
317
382
  fontFamily: theme.fonts.monospace,
318
383
  fontSize: theme.fontSizes[1],
319
384
  color: theme.colors.textSecondary,
320
- }}>
385
+ }}
386
+ >
387
+ [{index}]
388
+ </div>
389
+ <div
390
+ style={{
391
+ height: 24,
392
+ width: space,
393
+ backgroundColor: theme.colors.primary,
394
+ borderRadius: theme.radii[1],
395
+ }}
396
+ />
397
+ {showValues && (
398
+ <div
399
+ style={{
400
+ marginLeft: theme.space[2],
401
+ fontFamily: theme.fonts.monospace,
402
+ fontSize: theme.fontSizes[1],
403
+ color: theme.colors.textSecondary,
404
+ }}
405
+ >
321
406
  {space}px
322
407
  </div>
323
408
  )}
@@ -330,26 +415,32 @@ export const ThemeShowcase: React.FC<ThemeShowcaseProps> = ({
330
415
  {sections.includes('radii') && (
331
416
  <div style={sectionStyle}>
332
417
  <h2 style={headingStyle}>Border Radii</h2>
333
- <div style={{
334
- display: 'grid',
335
- gridTemplateColumns: 'repeat(auto-fill, minmax(100px, 1fr))',
336
- gap: theme.space[3],
337
- }}>
418
+ <div
419
+ style={{
420
+ display: 'grid',
421
+ gridTemplateColumns: 'repeat(auto-fill, minmax(100px, 1fr))',
422
+ gap: theme.space[3],
423
+ }}
424
+ >
338
425
  {theme.radii.map((radius, index) => (
339
426
  <div key={index} style={{ textAlign: 'center' }}>
340
- <div style={{
341
- width: 80,
342
- height: 80,
343
- backgroundColor: theme.colors.primary,
344
- borderRadius: radius,
345
- marginBottom: theme.space[1],
346
- margin: '0 auto',
347
- }} />
348
- <div style={{
349
- fontFamily: theme.fonts.monospace,
350
- fontSize: theme.fontSizes[0],
351
- color: theme.colors.textSecondary,
352
- }}>
427
+ <div
428
+ style={{
429
+ width: 80,
430
+ height: 80,
431
+ backgroundColor: theme.colors.primary,
432
+ borderRadius: radius,
433
+ marginBottom: theme.space[1],
434
+ margin: '0 auto',
435
+ }}
436
+ />
437
+ <div
438
+ style={{
439
+ fontFamily: theme.fonts.monospace,
440
+ fontSize: theme.fontSizes[0],
441
+ color: theme.colors.textSecondary,
442
+ }}
443
+ >
353
444
  [{index}] {showValues && `${radius}px`}
354
445
  </div>
355
446
  </div>
@@ -361,37 +452,45 @@ export const ThemeShowcase: React.FC<ThemeShowcaseProps> = ({
361
452
  {sections.includes('shadows') && (
362
453
  <div style={sectionStyle}>
363
454
  <h2 style={headingStyle}>Shadows</h2>
364
- <div style={{
365
- display: 'grid',
366
- gridTemplateColumns: 'repeat(auto-fill, minmax(150px, 1fr))',
367
- gap: theme.space[4],
368
- }}>
455
+ <div
456
+ style={{
457
+ display: 'grid',
458
+ gridTemplateColumns: 'repeat(auto-fill, minmax(150px, 1fr))',
459
+ gap: theme.space[4],
460
+ }}
461
+ >
369
462
  {theme.shadows.map((shadow, index) => (
370
463
  <div key={index} style={{ textAlign: 'center' }}>
371
- <div style={{
372
- width: 100,
373
- height: 100,
374
- backgroundColor: theme.colors.background,
375
- boxShadow: shadow,
376
- borderRadius: theme.radii[2],
377
- margin: '0 auto',
378
- marginBottom: theme.space[2],
379
- border: `1px solid ${theme.colors.border}`,
380
- }} />
381
- <div style={{
382
- fontFamily: theme.fonts.monospace,
383
- fontSize: theme.fontSizes[0],
384
- color: theme.colors.textSecondary,
385
- }}>
464
+ <div
465
+ style={{
466
+ width: 100,
467
+ height: 100,
468
+ backgroundColor: theme.colors.background,
469
+ boxShadow: shadow,
470
+ borderRadius: theme.radii[2],
471
+ margin: '0 auto',
472
+ marginBottom: theme.space[2],
473
+ border: `1px solid ${theme.colors.border}`,
474
+ }}
475
+ />
476
+ <div
477
+ style={{
478
+ fontFamily: theme.fonts.monospace,
479
+ fontSize: theme.fontSizes[0],
480
+ color: theme.colors.textSecondary,
481
+ }}
482
+ >
386
483
  Shadow [{index}]
387
484
  </div>
388
485
  {showValues && (
389
- <div style={{
390
- fontFamily: theme.fonts.monospace,
391
- fontSize: theme.fontSizes[0],
392
- color: theme.colors.textMuted,
393
- marginTop: theme.space[1],
394
- }}>
486
+ <div
487
+ style={{
488
+ fontFamily: theme.fonts.monospace,
489
+ fontSize: theme.fontSizes[0],
490
+ color: theme.colors.textMuted,
491
+ marginTop: theme.space[1],
492
+ }}
493
+ >
395
494
  {shadow === 'none' ? 'none' : '...'}
396
495
  </div>
397
496
  )}
@@ -405,30 +504,37 @@ export const ThemeShowcase: React.FC<ThemeShowcaseProps> = ({
405
504
  {theme.modes && Object.keys(theme.modes).length > 0 && (
406
505
  <div style={sectionStyle}>
407
506
  <h2 style={headingStyle}>Available Modes</h2>
408
- <div style={{
409
- display: 'flex',
410
- gap: theme.space[2],
411
- flexWrap: 'wrap',
412
- }}>
413
- <div style={{
414
- padding: `${theme.space[2]}px ${theme.space[3]}px`,
415
- backgroundColor: theme.colors.primary,
416
- color: '#ffffff',
417
- borderRadius: theme.radii[2],
418
- fontFamily: theme.fonts.body,
419
- fontSize: theme.fontSizes[1],
420
- }}>
421
- default
422
- </div>
423
- {Object.keys(theme.modes).map(modeName => (
424
- <div key={modeName} style={{
507
+ <div
508
+ style={{
509
+ display: 'flex',
510
+ gap: theme.space[2],
511
+ flexWrap: 'wrap',
512
+ }}
513
+ >
514
+ <div
515
+ style={{
425
516
  padding: `${theme.space[2]}px ${theme.space[3]}px`,
426
- backgroundColor: theme.colors.secondary,
427
- color: theme.colors.text,
517
+ backgroundColor: theme.colors.primary,
518
+ color: '#ffffff',
428
519
  borderRadius: theme.radii[2],
429
520
  fontFamily: theme.fonts.body,
430
521
  fontSize: theme.fontSizes[1],
431
- }}>
522
+ }}
523
+ >
524
+ default
525
+ </div>
526
+ {Object.keys(theme.modes).map((modeName) => (
527
+ <div
528
+ key={modeName}
529
+ style={{
530
+ padding: `${theme.space[2]}px ${theme.space[3]}px`,
531
+ backgroundColor: theme.colors.secondary,
532
+ color: theme.colors.text,
533
+ borderRadius: theme.radii[2],
534
+ fontFamily: theme.fonts.body,
535
+ fontSize: theme.fontSizes[1],
536
+ }}
537
+ >
432
538
  {modeName}
433
539
  </div>
434
540
  ))}
@@ -439,4 +545,4 @@ export const ThemeShowcase: React.FC<ThemeShowcaseProps> = ({
439
545
  );
440
546
  };
441
547
 
442
- export default ThemeShowcase;
548
+ export default ThemeShowcase;