@temboplus/frontend-react-core 0.1.3-beta.14 → 0.1.3-beta.15

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/alerts/index.cjs.js +1 -1
  2. package/dist/alerts/index.js +1 -1
  3. package/dist/dialogs/index.cjs.js +1 -1
  4. package/dist/dialogs/index.js +1 -1
  5. package/dist/index.cjs.js +1 -1
  6. package/dist/index.esm.js +1 -1
  7. package/dist/notifications/index.cjs.js +1 -1
  8. package/dist/notifications/index.js +1 -1
  9. package/dist/{tembo-notify-DrVkWFXZ.js → tembo-notify-60Hk7l5W.js} +2 -2
  10. package/dist/{tembo-notify-DrVkWFXZ.js.map → tembo-notify-60Hk7l5W.js.map} +1 -1
  11. package/dist/{tembo-notify-8__PpMV9.js → tembo-notify-BEEB2wEp.js} +2 -2
  12. package/dist/{tembo-notify-8__PpMV9.js.map → tembo-notify-BEEB2wEp.js.map} +1 -1
  13. package/dist/theme/index.cjs.js +1 -1
  14. package/dist/theme/index.js +1 -1
  15. package/dist/theme/theme-config.d.ts +7 -0
  16. package/dist/theme/theme-config.js +114 -217
  17. package/dist/{theme-provider-Ck6qg6WJ.js → theme-provider-BJjIEVwv.js} +2 -2
  18. package/dist/{theme-provider-Ck6qg6WJ.js.map → theme-provider-BJjIEVwv.js.map} +1 -1
  19. package/dist/theme-provider-CpPw8sUs.js +11 -0
  20. package/dist/theme-provider-CpPw8sUs.js.map +1 -0
  21. package/dist/{theme-provider-Cpt7os8V.js → theme-provider-D3-cveEd.js} +2 -2
  22. package/dist/{theme-provider-Cpt7os8V.js.map → theme-provider-D3-cveEd.js.map} +1 -1
  23. package/dist/theme-provider-xDEswLd1.js +11 -0
  24. package/dist/theme-provider-xDEswLd1.js.map +1 -0
  25. package/package.json +1 -1
  26. package/dist/theme-provider-BP-1aQ22.js +0 -11
  27. package/dist/theme-provider-BP-1aQ22.js.map +0 -1
  28. package/dist/theme-provider-CvaUdBY_.js +0 -11
  29. package/dist/theme-provider-CvaUdBY_.js.map +0 -1
package/dist/theme/theme-config.js CHANGED
@@ -1,5 +1,12 @@
1
1
  /**
2
2
  * Build comprehensive Ant Design theme from Tembo tokens
3
+ *
4
+ * Design principles:
5
+ * - Set sizing/spacing once at token level, not per component
6
+ * - Components inherit global tokens unless they need specific overrides
7
+ * - Bold rounded corners (24px buttons/inputs, 28px cards, 32px modals)
8
+ * - Zero shadows on flat elements (buttons, inputs)
9
+ * - Gentle shadows on elevated elements (cards, modals, popovers)
3
10
  */
4
11
  export const buildAntDTheme = (colors, constants) => {
5
12
  const isDark = colors.mode === 'dark';
@@ -8,22 +15,22 @@ export const buildAntDTheme = (colors, constants) => {
8
15
  // ============================================
9
16
  // COLOR TOKENS
10
17
  // ============================================
11
- // Primary (monochrome - using darkest neutral)
12
- colorPrimary: colors.neutral[4],
13
- colorPrimaryHover: colors.text.secondary,
14
- colorPrimaryActive: colors.neutral[4],
18
+ // Primary (monochrome - using action tokens implicitly)
19
+ colorPrimary: colors.action.default,
20
+ colorPrimaryHover: colors.action.hover,
21
+ colorPrimaryActive: colors.action.default,
15
22
  colorPrimaryBg: colors.neutral[2],
16
23
  colorPrimaryBgHover: colors.surface.interactive,
17
- colorPrimaryBorder: colors.neutral[4],
18
- colorPrimaryBorderHover: colors.neutral[4],
19
- colorPrimaryText: colors.neutral[4],
24
+ colorPrimaryBorder: colors.action.default,
25
+ colorPrimaryBorderHover: colors.action.default,
26
+ colorPrimaryText: colors.action.default,
20
27
  colorPrimaryTextHover: colors.text.secondary,
21
- colorPrimaryTextActive: colors.neutral[4],
22
- // Links (standard web colors)
28
+ colorPrimaryTextActive: colors.action.default,
29
+ // Links (standard web blue + focus rings)
23
30
  colorLink: colors.link.default,
24
31
  colorLinkHover: colors.link.hover,
25
32
  colorLinkActive: colors.link.active,
26
- // Text
33
+ // Text hierarchy
27
34
  colorText: colors.text.primary,
28
35
  colorTextSecondary: colors.text.secondary,
29
36
  colorTextTertiary: colors.text.tertiary,
@@ -43,12 +50,14 @@ export const buildAntDTheme = (colors, constants) => {
43
50
  colorBgMask: isDark ? 'rgba(0, 0, 0, 0.65)' : 'rgba(0, 0, 0, 0.45)',
44
51
  colorBgTextHover: colors.surface.interactive,
45
52
  colorBgTextActive: colors.surface.interactive,
53
+ // Disabled backgrounds
54
+ colorBgContainerDisabled: colors.action.disabled,
46
55
  // Borders
47
56
  colorBorder: colors.border.default,
48
57
  colorBorderBg: colors.surface.card,
49
58
  colorBorderSecondary: colors.border.subtle,
50
59
  colorSplit: colors.border.subtle,
51
- // Fill (backgrounds of components)
60
+ // Fill colors
52
61
  colorFill: colors.neutral[2],
53
62
  colorFillSecondary: colors.neutral[2],
54
63
  colorFillTertiary: colors.neutral[2],
@@ -92,25 +101,25 @@ export const buildAntDTheme = (colors, constants) => {
92
101
  fontFamily: constants.typography.fontFamily.base,
93
102
  fontFamilyCode: constants.typography.fontFamily.mono,
94
103
  fontSize: constants.typography.fontSize.base,
104
+ fontSizeSM: constants.typography.fontSize.sm,
105
+ fontSizeLG: constants.typography.fontSize.lg,
106
+ fontSizeXL: constants.typography.fontSize.xl,
95
107
  fontSizeHeading1: constants.typography.fontSize['5xl'],
96
108
  fontSizeHeading2: constants.typography.fontSize['4xl'],
97
109
  fontSizeHeading3: constants.typography.fontSize['3xl'],
98
110
  fontSizeHeading4: constants.typography.fontSize['2xl'],
99
111
  fontSizeHeading5: constants.typography.fontSize.xl,
100
- fontSizeSM: constants.typography.fontSize.sm,
101
- fontSizeLG: constants.typography.fontSize.lg,
102
- fontSizeXL: constants.typography.fontSize.xl,
103
112
  fontWeightStrong: constants.typography.fontWeight.semibold,
104
113
  lineHeight: constants.typography.lineHeight.base,
114
+ lineHeightSM: constants.typography.lineHeight.base,
115
+ lineHeightLG: constants.typography.lineHeight.relaxed,
105
116
  lineHeightHeading1: constants.typography.lineHeight.tight,
106
117
  lineHeightHeading2: constants.typography.lineHeight.tight,
107
118
  lineHeightHeading3: constants.typography.lineHeight.tight,
108
119
  lineHeightHeading4: constants.typography.lineHeight.tight,
109
120
  lineHeightHeading5: constants.typography.lineHeight.tight,
110
- lineHeightLG: constants.typography.lineHeight.relaxed,
111
- lineHeightSM: constants.typography.lineHeight.base,
112
121
  // ============================================
113
- // SPACING & SIZING
122
+ // SPACING & SIZING - SET ONCE HERE
114
123
  // ============================================
115
124
  padding: constants.spacing[4],
116
125
  paddingXS: constants.spacing[2],
@@ -123,142 +132,137 @@ export const buildAntDTheme = (colors, constants) => {
123
132
  marginLG: constants.spacing[5],
124
133
  marginXL: constants.spacing[6],
125
134
  marginXXL: constants.spacing[8],
126
- controlHeight: 40,
127
- controlHeightLG: 48,
128
- controlHeightSM: 32,
129
- controlHeightXS: 24,
135
+ // Control heights - SET ONCE, components inherit
136
+ controlHeight: 40, // Default height for all controls
137
+ controlHeightLG: 48, // Large variant
138
+ controlHeightSM: 32, // Small variant
139
+ controlHeightXS: 24, // Extra small variant
130
140
  // ============================================
131
- // BORDER RADIUS
141
+ // BORDER RADIUS - Bold rounded corners
132
142
  // ============================================
133
- borderRadius: constants.radius.base,
134
- borderRadiusLG: constants.radius.md,
135
- borderRadiusSM: constants.radius.sm,
136
- borderRadiusXS: constants.radius.sm,
143
+ borderRadius: constants.radius.base, // 24px - default bold
144
+ borderRadiusLG: constants.radius.md, // 28px
145
+ borderRadiusSM: constants.radius.sm, // 12px
146
+ borderRadiusXS: constants.radius.sm, // 12px
137
147
  // ============================================
138
- // SHADOWS
148
+ // SHADOWS - Zero on flat, gentle on elevated
139
149
  // ============================================
140
- boxShadow: constants.shadow.none,
141
- boxShadowSecondary: constants.shadow.none,
142
- boxShadowTertiary: constants.shadow.card,
150
+ boxShadow: constants.shadow.none, // Default: no shadow
151
+ boxShadowSecondary: constants.shadow.none, // No shadow
152
+ boxShadowTertiary: constants.shadow.card, // Gentle card shadow
143
153
  // ============================================
144
154
  // MOTION
145
155
  // ============================================
146
156
  motionUnit: 0.1,
147
157
  motionBase: 0,
148
- motionEaseInOut: 'cubic-bezier(0.4, 0, 0.2, 1)',
149
- motionEaseOut: 'cubic-bezier(0.0, 0, 0.2, 1)',
150
- motionEaseInBack: 'cubic-bezier(0.4, 0, 1, 1)',
158
+ motionEaseInOut: constants.transition.base,
159
+ motionEaseOut: constants.transition.base,
160
+ motionEaseInBack: constants.transition.base,
151
161
  // ============================================
152
162
  // Z-INDEX
153
163
  // ============================================
154
164
  zIndexBase: 0,
155
- zIndexPopupBase: 1000,
165
+ zIndexPopupBase: constants.zIndex.dropdown,
156
166
  },
157
167
  components: {
158
168
  // ========================================
159
- // BUTTON - Monochrome with clear states
169
+ // BUTTON - Monochrome actions, zero shadow
160
170
  // ========================================
161
171
  Button: {
162
- // Primary button (inverted monochrome)
163
- colorPrimary: colors.neutral[4],
164
- colorPrimaryHover: colors.text.secondary,
165
- colorPrimaryActive: colors.neutral[4],
166
- colorPrimaryBorder: colors.neutral[4],
167
- primaryColor: colors.neutral[1],
168
- primaryShadow: 'none',
169
- // Default button (outlined)
172
+ // Action colors
173
+ colorPrimary: colors.action.default,
174
+ colorPrimaryHover: colors.action.hover,
175
+ colorPrimaryActive: colors.action.default,
176
+ colorPrimaryBorder: colors.action.default,
177
+ primaryColor: colors.action.contrast,
178
+ // Disabled
179
+ colorBgContainerDisabled: colors.action.disabled,
180
+ colorTextDisabled: colors.text.secondary,
181
+ borderColorDisabled: colors.action.disabled,
182
+ // Default button
170
183
  defaultBg: colors.surface.card,
171
184
  defaultBorderColor: colors.border.default,
172
185
  defaultColor: colors.text.primary,
173
186
  defaultHoverBg: colors.surface.interactive,
174
187
  defaultHoverBorderColor: colors.border.strong,
175
- defaultHoverColor: colors.text.primary,
176
- defaultActiveBg: colors.surface.interactive,
177
- defaultActiveBorderColor: colors.neutral[4],
178
- defaultActiveColor: colors.text.primary,
179
- defaultShadow: 'none',
180
- // Text button
181
- textHoverBg: colors.surface.interactive,
182
- textTextColor: colors.text.primary,
183
- textTextHoverColor: colors.text.primary,
188
+ defaultActiveBorderColor: colors.action.default,
184
189
  // Link button
185
- linkHoverBg: 'transparent',
186
190
  colorLink: colors.link.default,
187
191
  colorLinkHover: colors.link.hover,
188
192
  colorLinkActive: colors.link.active,
189
193
  // Danger button
190
194
  dangerColor: colors.semantic.error.main,
191
- colorErrorHover: colors.semantic.error.main,
192
- colorErrorActive: colors.semantic.error.main,
195
+ // Zero shadows on all buttons
196
+ primaryShadow: 'none',
197
+ defaultShadow: 'none',
193
198
  dangerShadow: 'none',
194
- paddingContentHorizontal: constants.spacing[4],
195
- paddingContentVertical: constants.spacing[2],
196
- // Styling
199
+ // Bold rounded corners
197
200
  borderRadius: constants.radius.button,
198
201
  borderRadiusLG: constants.radius.button,
199
202
  borderRadiusSM: constants.radius.button,
203
+ // Padding
204
+ paddingContentHorizontal: constants.spacing[4],
205
+ paddingContentVertical: constants.spacing[2],
206
+ // Typography
200
207
  fontWeight: constants.typography.fontWeight.medium,
201
- fontSize: constants.typography.fontSize.base,
208
+ // Heights inherited from token.controlHeight automatically ✅
202
209
  },
203
210
  // ========================================
204
- // INPUT & FORM CONTROLS
211
+ // INPUTS - Bold rounded, zero shadow, blue focus ring
205
212
  // ========================================
206
213
  Input: {
214
+ // Colors
207
215
  colorBgContainer: colors.surface.card,
208
216
  colorBorder: colors.border.default,
209
217
  colorText: colors.text.primary,
210
218
  colorTextPlaceholder: colors.text.tertiary,
219
+ // Icons - subtle
211
220
  colorIcon: colors.text.tertiary,
212
221
  colorIconHover: colors.text.secondary,
222
+ // States
213
223
  hoverBorderColor: colors.border.strong,
214
224
  activeBorderColor: colors.link.default,
215
- activeShadow: `0 0 0 2px ${colors.semantic.info.subtle}`,
225
+ activeShadow: `0 0 0 2px ${colors.semantic.info.subtle}`, // Blue focus ring
226
+ // Error/warning rings
216
227
  errorActiveShadow: `0 0 0 2px ${colors.semantic.error.subtle}`,
217
228
  warningActiveShadow: `0 0 0 2px ${colors.semantic.warning.subtle}`,
218
- paddingBlock: constants.spacing[2],
219
- paddingInline: constants.spacing[3],
220
- paddingInlineLG: constants.spacing[4],
229
+ // Bold rounded
221
230
  borderRadius: constants.radius.input,
222
231
  borderRadiusLG: constants.radius.input,
223
232
  borderRadiusSM: constants.radius.input,
233
+ // Padding
234
+ paddingBlock: constants.spacing[2],
235
+ paddingInline: constants.spacing[3],
236
+ paddingInlineLG: constants.spacing[4],
237
+ // Heights inherited from token.controlHeight automatically ✅
224
238
  },
225
239
  InputNumber: {
226
- colorBgContainer: colors.surface.card,
227
- colorBorder: colors.border.default,
228
- hoverBorderColor: colors.border.strong,
229
- activeBorderColor: colors.link.default,
230
240
  colorIcon: colors.text.tertiary,
231
241
  colorIconHover: colors.text.secondary,
242
+ activeBorderColor: colors.link.default,
232
243
  activeShadow: `0 0 0 2px ${colors.semantic.info.subtle}`,
233
244
  borderRadius: constants.radius.input,
234
245
  handleVisible: true,
235
246
  },
236
247
  Select: {
237
- colorBgContainer: colors.surface.card,
238
248
  colorBgElevated: colors.surface.overlay,
239
- colorBorder: colors.border.default,
240
- colorText: colors.text.primary,
241
- colorTextPlaceholder: colors.text.tertiary,
242
249
  colorIcon: colors.text.tertiary,
243
250
  colorIconHover: colors.text.secondary,
244
- hoverBorderColor: colors.border.strong,
245
- controlItemBgHover: colors.surface.interactive,
246
251
  activeBorderColor: colors.link.default,
252
+ boxShadow: `0 0 0 2px ${colors.semantic.info.subtle}`,
247
253
  optionSelectedBg: colors.surface.selected,
248
- optionSelectedColor: colors.text.primary,
249
254
  optionActiveBg: colors.surface.interactive,
255
+ controlItemBgHover: colors.surface.interactive,
250
256
  borderRadius: constants.radius.input,
251
257
  borderRadiusLG: constants.radius.input,
252
258
  borderRadiusSM: constants.radius.input,
259
+ // Dropdown has shadow
253
260
  boxShadowSecondary: constants.shadow.popover,
254
261
  },
255
262
  DatePicker: {
256
- colorBgContainer: colors.surface.card,
257
- colorBorder: colors.border.default,
258
- hoverBorderColor: colors.border.strong,
259
- activeBorderColor: colors.link.default,
260
263
  colorIcon: colors.text.tertiary,
261
264
  colorIconHover: colors.text.secondary,
265
+ activeBorderColor: colors.link.default,
262
266
  activeShadow: `0 0 0 2px ${colors.semantic.info.subtle}`,
263
267
  cellHoverBg: colors.surface.interactive,
264
268
  cellActiveWithRangeBg: colors.semantic.info.subtle,
@@ -268,34 +272,21 @@ export const buildAntDTheme = (colors, constants) => {
268
272
  Checkbox: {
269
273
  colorPrimary: colors.link.default,
270
274
  colorPrimaryHover: colors.link.hover,
271
- colorBorder: colors.border.default,
272
- colorBgContainer: colors.surface.card,
273
- colorIcon: colors.text.tertiary,
274
- colorIconHover: colors.text.secondary,
275
275
  borderRadiusSM: constants.radius.sm,
276
276
  },
277
277
  Radio: {
278
278
  colorPrimary: colors.link.default,
279
279
  colorPrimaryHover: colors.link.hover,
280
- colorBorder: colors.border.default,
281
- colorBgContainer: colors.surface.card,
282
- colorIcon: colors.text.tertiary,
283
- colorIconHover: colors.text.secondary,
284
280
  },
285
281
  Switch: {
286
282
  colorPrimary: colors.link.default,
287
283
  colorPrimaryHover: colors.link.hover,
288
- colorTextQuaternary: colors.text.disabled,
289
- colorTextTertiary: colors.text.tertiary,
290
- colorIcon: colors.text.tertiary,
291
- colorIconHover: colors.text.secondary,
284
+ handleSize: 18,
292
285
  },
293
286
  Slider: {
294
287
  colorPrimary: colors.link.default,
295
288
  colorPrimaryBorder: colors.link.default,
296
289
  colorPrimaryBorderHover: colors.link.hover,
297
- colorIcon: colors.text.tertiary,
298
- colorIconHover: colors.text.secondary,
299
290
  handleColor: colors.surface.card,
300
291
  handleActiveColor: colors.surface.card,
301
292
  railBg: colors.neutral[2],
@@ -308,39 +299,32 @@ export const buildAntDTheme = (colors, constants) => {
308
299
  Form: {
309
300
  labelColor: colors.text.primary,
310
301
  labelFontSize: constants.typography.fontSize.base,
311
- labelColonMarginInlineEnd: constants.spacing[2],
312
- labelColonMarginInlineStart: constants.spacing[1],
313
302
  itemMarginBottom: constants.spacing[4],
314
303
  verticalLabelPadding: `0 0 ${constants.spacing[2]}px`,
315
304
  labelRequiredMarkColor: colors.semantic.error.main,
316
- colorIcon: colors.text.tertiary,
317
- colorIconHover: colors.text.secondary,
318
305
  },
319
306
  // ========================================
320
307
  // DATA DISPLAY
321
308
  // ========================================
322
309
  Table: {
310
+ // Colors
323
311
  colorBgContainer: colors.surface.card,
324
- colorText: colors.text.primary,
325
- colorTextHeading: colors.text.primary,
326
312
  headerBg: colors.surface.page,
327
313
  headerColor: colors.text.secondary,
328
- headerSortActiveBg: colors.surface.interactive,
329
- headerSortHoverBg: colors.surface.interactive,
330
- headerSplitColor: colors.border.subtle,
331
314
  borderColor: colors.border.subtle,
315
+ // States
332
316
  rowHoverBg: colors.surface.interactive,
333
317
  rowSelectedBg: colors.surface.selected,
334
- rowSelectedHoverBg: colors.surface.selected,
335
318
  rowExpandedBg: colors.surface.nested,
319
+ // Smooth rounded
320
+ borderRadius: constants.radius.card,
321
+ borderRadiusLG: constants.radius.card,
322
+ headerBorderRadius: constants.radius.card,
323
+ // Padding
336
324
  cellPaddingBlock: constants.spacing[4],
337
325
  cellPaddingInline: constants.spacing[4],
338
326
  cellPaddingBlockSM: constants.spacing[2],
339
327
  cellPaddingInlineSM: constants.spacing[3],
340
- borderRadius: constants.radius.card,
341
- borderRadiusLG: constants.radius.card,
342
- headerBorderRadius: constants.radius.card,
343
- footerBg: colors.surface.page,
344
328
  },
345
329
  Descriptions: {
346
330
  labelBg: colors.surface.page,
@@ -348,15 +332,13 @@ export const buildAntDTheme = (colors, constants) => {
348
332
  contentColor: colors.text.primary,
349
333
  extraColor: colors.text.secondary,
350
334
  itemPaddingBottom: constants.spacing[4],
351
- colonMarginLeft: constants.spacing[1],
352
- colonMarginRight: constants.spacing[2],
353
335
  },
354
336
  Card: {
355
337
  colorBgContainer: colors.surface.card,
356
338
  colorBorderSecondary: colors.border.default,
357
- colorTextHeading: colors.text.primary,
358
- colorTextDescription: colors.text.secondary,
339
+ // Gentle shadow on cards
359
340
  boxShadowTertiary: constants.shadow.card,
341
+ // Smooth rounded
360
342
  borderRadius: constants.radius.card,
361
343
  borderRadiusLG: constants.radius.card,
362
344
  padding: constants.spacing[4],
@@ -365,19 +347,15 @@ export const buildAntDTheme = (colors, constants) => {
365
347
  Statistic: {
366
348
  titleFontSize: constants.typography.fontSize.base,
367
349
  contentFontSize: constants.typography.fontSize['4xl'],
368
- colorTextHeading: colors.text.primary,
369
- colorTextDescription: colors.text.secondary,
370
350
  },
371
351
  Timeline: {
372
352
  tailColor: colors.border.default,
353
+ tailWidth: 2,
373
354
  dotBg: colors.surface.card,
374
355
  itemPaddingBottom: constants.spacing[5],
375
356
  },
376
357
  Tag: {
377
358
  defaultBg: colors.neutral[2],
378
- defaultColor: colors.text.primary,
379
- colorBorder: colors.border.default,
380
- colorText: colors.text.primary,
381
359
  borderRadiusSM: constants.radius.sm,
382
360
  fontSize: constants.typography.fontSize.sm,
383
361
  fontSizeSM: constants.typography.fontSize.xs,
@@ -392,8 +370,6 @@ export const buildAntDTheme = (colors, constants) => {
392
370
  },
393
371
  Avatar: {
394
372
  colorBgContainer: colors.neutral[2],
395
- colorText: colors.text.secondary,
396
- colorTextLightSolid: colors.text.inverse,
397
373
  borderRadius: constants.radius.avatar,
398
374
  groupOverlapping: -8,
399
375
  groupSpace: constants.spacing[1],
@@ -401,32 +377,26 @@ export const buildAntDTheme = (colors, constants) => {
401
377
  Calendar: {
402
378
  colorBgContainer: colors.surface.card,
403
379
  colorPrimary: colors.link.default,
404
- fullBg: colors.surface.card,
405
- fullPanelBg: colors.surface.card,
406
380
  itemActiveBg: colors.semantic.info.subtle,
407
381
  borderRadius: constants.radius.card,
408
382
  },
409
383
  Collapse: {
410
384
  colorBgContainer: colors.surface.card,
411
- colorBorder: colors.border.default,
412
385
  headerBg: colors.surface.page,
413
386
  headerPadding: `${constants.spacing[3]}px ${constants.spacing[4]}px`,
414
387
  contentPadding: `${constants.spacing[4]}px ${constants.spacing[4]}px`,
415
388
  borderRadiusLG: constants.radius.card,
416
389
  },
417
- Carousel: {
418
- colorBgContainer: colors.surface.card,
419
- },
420
390
  Tree: {
421
- colorBgContainer: colors.surface.card,
422
391
  nodeHoverBg: colors.surface.interactive,
423
392
  nodeSelectedBg: colors.surface.selected,
424
393
  borderRadius: constants.radius.sm,
425
394
  },
426
395
  // ========================================
427
- // FEEDBACK
396
+ // FEEDBACK - Elevated with shadows
428
397
  // ========================================
429
398
  Alert: {
399
+ // Semantic colors
430
400
  colorSuccessBg: colors.semantic.success.subtle,
431
401
  colorSuccessBorder: colors.semantic.success.main,
432
402
  colorSuccessText: colors.semantic.success.main,
@@ -440,17 +410,17 @@ export const buildAntDTheme = (colors, constants) => {
440
410
  colorInfoBorder: colors.semantic.info.main,
441
411
  colorInfoText: colors.semantic.info.main,
442
412
  defaultPadding: `${constants.spacing[3]}px ${constants.spacing[4]}px`,
443
- withDescriptionPadding: `${constants.spacing[4]}px ${constants.spacing[5]}px`,
444
413
  borderRadiusLG: constants.radius.card,
445
414
  },
446
415
  Modal: {
447
416
  contentBg: colors.surface.overlay,
448
417
  headerBg: colors.surface.overlay,
449
418
  footerBg: colors.surface.overlay,
450
- titleColor: colors.text.primary,
451
419
  colorBgMask: isDark ? 'rgba(0, 0, 0, 0.65)' : 'rgba(0, 0, 0, 0.45)',
452
- borderRadiusLG: constants.radius.modal,
420
+ // Prominent shadow
453
421
  boxShadow: constants.shadow.modal,
422
+ // Generous rounding
423
+ borderRadiusLG: constants.radius.modal,
454
424
  },
455
425
  Drawer: {
456
426
  colorBgElevated: colors.surface.overlay,
@@ -461,31 +431,28 @@ export const buildAntDTheme = (colors, constants) => {
461
431
  },
462
432
  Notification: {
463
433
  colorBgElevated: colors.surface.overlay,
464
- colorText: colors.text.primary,
465
- colorTextHeading: colors.text.primary,
466
- borderRadiusLG: constants.radius.card,
434
+ // Shadow on notification
467
435
  boxShadow: constants.shadow.popover,
436
+ borderRadiusLG: constants.radius.card,
468
437
  padding: constants.spacing[4],
469
- paddingContentHorizontal: constants.spacing[4],
470
438
  },
471
439
  Message: {
472
440
  contentBg: colors.surface.overlay,
473
441
  contentPadding: `${constants.spacing[2]}px ${constants.spacing[4]}px`,
474
- borderRadiusLG: constants.radius.card,
442
+ // Shadow on message
475
443
  boxShadow: constants.shadow.popover,
444
+ borderRadiusLG: constants.radius.card,
476
445
  },
477
446
  Popconfirm: {
478
447
  colorBgElevated: colors.surface.overlay,
479
- colorWarning: colors.semantic.warning.main,
480
- borderRadiusLG: constants.radius.card,
481
448
  boxShadowSecondary: constants.shadow.popover,
449
+ borderRadiusLG: constants.radius.card,
482
450
  },
483
451
  Progress: {
484
452
  defaultColor: colors.link.default,
485
453
  colorSuccess: colors.semantic.success.main,
486
454
  colorError: colors.semantic.error.main,
487
455
  remainingColor: colors.neutral[2],
488
- circleTextColor: colors.text.primary,
489
456
  borderRadius: 100,
490
457
  lineBorderRadius: 100,
491
458
  },
@@ -493,7 +460,6 @@ export const buildAntDTheme = (colors, constants) => {
493
460
  titleFontSize: constants.typography.fontSize['3xl'],
494
461
  subtitleFontSize: constants.typography.fontSize.base,
495
462
  iconFontSize: constants.typography.fontSize['5xl'],
496
- extraMargin: `${constants.spacing[8]}px 0 0`,
497
463
  },
498
464
  Skeleton: {
499
465
  colorFill: colors.neutral[2],
@@ -502,9 +468,6 @@ export const buildAntDTheme = (colors, constants) => {
502
468
  },
503
469
  Spin: {
504
470
  colorPrimary: colors.link.default,
505
- dotSize: 20,
506
- dotSizeLG: 32,
507
- dotSizeSM: 14,
508
471
  },
509
472
  // ========================================
510
473
  // NAVIGATION
@@ -513,17 +476,12 @@ export const buildAntDTheme = (colors, constants) => {
513
476
  itemBg: 'transparent',
514
477
  itemColor: colors.text.primary,
515
478
  itemHoverBg: colors.surface.interactive,
516
- itemHoverColor: colors.text.primary,
517
479
  itemSelectedBg: colors.surface.selected,
518
- itemSelectedColor: colors.text.primary,
519
- itemActiveBg: colors.surface.selected,
520
- subMenuItemBg: 'transparent',
521
- // Dark menu (for sidebars)
480
+ // Dark sidebar
522
481
  darkItemBg: colors.absolute.black,
523
482
  darkSubMenuItemBg: colors.absolute.black,
524
483
  darkItemColor: colors.absolute.white,
525
484
  darkItemHoverBg: 'rgba(255, 255, 255, 0.08)',
526
- darkItemHoverColor: colors.absolute.white,
527
485
  darkItemSelectedBg: colors.link.default,
528
486
  darkItemSelectedColor: colors.absolute.white,
529
487
  itemBorderRadius: constants.radius.input,
@@ -536,40 +494,26 @@ export const buildAntDTheme = (colors, constants) => {
536
494
  linkHoverColor: colors.link.hover,
537
495
  separatorColor: colors.text.tertiary,
538
496
  separatorMargin: constants.spacing[2],
539
- iconFontSize: constants.typography.fontSize.base,
540
- fontSize: constants.typography.fontSize.base,
541
497
  },
542
498
  Pagination: {
543
499
  colorPrimary: colors.link.default,
544
500
  colorPrimaryHover: colors.link.hover,
545
501
  itemActiveBg: colors.link.default,
546
- itemActiveBgDisabled: colors.neutral[2],
547
- itemBg: colors.surface.card,
548
- itemLinkBg: colors.surface.card,
549
- itemInputBg: colors.surface.card,
550
502
  borderRadius: constants.radius.sm,
551
503
  },
552
504
  Steps: {
553
505
  colorPrimary: colors.link.default,
554
506
  colorText: colors.text.secondary,
555
507
  colorTextDescription: colors.text.tertiary,
556
- colorBorderSecondary: colors.border.default,
557
508
  },
558
509
  Tabs: {
559
510
  colorPrimary: colors.link.default,
560
511
  itemColor: colors.text.secondary,
561
512
  itemHoverColor: colors.link.hover,
562
513
  itemSelectedColor: colors.link.default,
563
- itemActiveColor: colors.link.default,
564
514
  inkBarColor: colors.link.default,
565
- colorBorderSecondary: colors.border.default,
566
- titleFontSize: constants.typography.fontSize.base,
567
- titleFontSizeLG: constants.typography.fontSize.lg,
568
- titleFontSizeSM: constants.typography.fontSize.sm,
569
- cardBg: colors.surface.card,
570
515
  cardPadding: `${constants.spacing[2]}px ${constants.spacing[4]}px`,
571
516
  horizontalItemPadding: `${constants.spacing[3]}px 0`,
572
- horizontalItemMargin: `0 ${constants.spacing[8]}px 0 0`,
573
517
  },
574
518
  Anchor: {
575
519
  colorPrimary: colors.link.default,
@@ -580,9 +524,10 @@ export const buildAntDTheme = (colors, constants) => {
580
524
  colorBgElevated: colors.surface.overlay,
581
525
  controlItemBgHover: colors.surface.interactive,
582
526
  controlItemBgActive: colors.surface.selected,
527
+ // Shadow on dropdown
583
528
  boxShadowSecondary: constants.shadow.popover,
584
- paddingBlock: constants.spacing[1],
585
529
  borderRadiusLG: constants.radius.card,
530
+ paddingBlock: constants.spacing[1],
586
531
  },
587
532
  // ========================================
588
533
  // LAYOUT
@@ -590,18 +535,10 @@ export const buildAntDTheme = (colors, constants) => {
590
535
  Layout: {
591
536
  colorBgBody: colors.surface.page,
592
537
  colorBgHeader: colors.surface.card,
593
- colorBgTrigger: colors.absolute.black,
594
- siderBg: colors.absolute.black,
595
538
  headerBg: colors.surface.card,
539
+ siderBg: colors.absolute.black,
596
540
  headerPadding: `0 ${constants.spacing[6]}px`,
597
- footerBg: colors.surface.card,
598
541
  footerPadding: `${constants.spacing[6]}px ${constants.spacing[12]}px`,
599
- bodyBg: colors.surface.page,
600
- triggerBg: colors.absolute.black,
601
- triggerColor: colors.absolute.white,
602
- lightSiderBg: colors.surface.card,
603
- lightTriggerBg: colors.surface.card,
604
- lightTriggerColor: colors.text.primary,
605
542
  },
606
543
  Divider: {
607
544
  colorSplit: colors.border.subtle,
@@ -614,97 +551,62 @@ export const buildAntDTheme = (colors, constants) => {
614
551
  Typography: {
615
552
  colorText: colors.text.primary,
616
553
  colorTextSecondary: colors.text.secondary,
617
- colorTextDescription: colors.text.tertiary,
618
554
  colorLink: colors.link.default,
619
555
  colorLinkHover: colors.link.hover,
620
556
  colorLinkActive: colors.link.active,
621
557
  titleMarginBottom: constants.spacing[2],
622
558
  titleMarginTop: constants.spacing[4],
623
- fontSizeHeading1: constants.typography.fontSize['5xl'],
624
- fontSizeHeading2: constants.typography.fontSize['4xl'],
625
- fontSizeHeading3: constants.typography.fontSize['3xl'],
626
- fontSizeHeading4: constants.typography.fontSize['2xl'],
627
- fontSizeHeading5: constants.typography.fontSize.xl,
628
- lineHeightHeading1: constants.typography.lineHeight.tight,
629
- lineHeightHeading2: constants.typography.lineHeight.tight,
630
- lineHeightHeading3: constants.typography.lineHeight.tight,
631
- lineHeightHeading4: constants.typography.lineHeight.tight,
632
- lineHeightHeading5: constants.typography.lineHeight.tight,
633
559
  },
634
560
  Tooltip: {
635
561
  colorBgSpotlight: colors.neutral[4],
636
562
  colorTextLightSolid: colors.text.inverse,
637
- borderRadius: constants.radius.sm,
563
+ // Subtle shadow
638
564
  boxShadowSecondary: constants.shadow.tooltip,
565
+ borderRadius: constants.radius.sm,
639
566
  },
640
567
  Popover: {
641
568
  colorBgElevated: colors.surface.overlay,
642
- colorText: colors.text.primary,
643
- borderRadiusLG: constants.radius.card,
569
+ // Shadow on popover
644
570
  boxShadowSecondary: constants.shadow.popover,
571
+ borderRadiusLG: constants.radius.card,
645
572
  padding: constants.spacing[3],
646
573
  },
647
- Image: {
648
- previewOperationColor: colors.absolute.white,
649
- previewOperationColorDisabled: 'rgba(255, 255, 255, 0.25)',
650
- },
651
574
  Upload: {
652
- colorBorder: colors.border.default,
653
575
  colorFillAlter: colors.surface.interactive,
654
- colorText: colors.text.primary,
655
- colorTextDescription: colors.text.secondary,
656
- colorTextHeading: colors.text.primary,
657
576
  actionsColor: colors.link.default,
658
577
  },
659
- QRCode: {
660
- colorBgContainer: colors.surface.card,
661
- },
662
578
  Tour: {
663
579
  colorBgElevated: colors.surface.overlay,
664
580
  colorPrimary: colors.link.default,
665
- borderRadius: constants.radius.card,
666
581
  boxShadowSecondary: constants.shadow.popover,
582
+ borderRadius: constants.radius.card,
667
583
  },
668
584
  FloatButton: {
669
585
  colorBgElevated: colors.surface.overlay,
670
586
  colorPrimary: colors.link.default,
671
- borderRadiusLG: constants.radius.avatar,
672
587
  boxShadow: constants.shadow.popover,
588
+ borderRadiusLG: constants.radius.avatar,
673
589
  },
674
590
  Segmented: {
675
591
  colorBgLayout: colors.neutral[2],
676
- itemColor: colors.text.primary,
677
- itemHoverColor: colors.text.primary,
678
592
  itemHoverBg: colors.surface.interactive,
679
593
  itemSelectedBg: colors.surface.card,
680
- itemSelectedColor: colors.text.primary,
681
594
  borderRadius: constants.radius.base,
682
595
  borderRadiusSM: constants.radius.sm,
683
596
  },
684
597
  Mentions: {
685
- colorBgContainer: colors.surface.card,
686
598
  colorBgElevated: colors.surface.overlay,
687
- colorBorder: colors.border.default,
688
599
  controlItemBgHover: colors.surface.interactive,
689
600
  controlItemBgActive: colors.surface.selected,
690
601
  boxShadowSecondary: constants.shadow.popover,
691
602
  },
692
- Transfer: {
693
- colorBgContainer: colors.surface.card,
694
- colorBorder: colors.border.default,
695
- itemPaddingBlock: constants.spacing[1],
696
- },
697
603
  Cascader: {
698
- colorBgContainer: colors.surface.card,
699
604
  colorBgElevated: colors.surface.overlay,
700
- colorBorder: colors.border.default,
701
605
  controlItemBgHover: colors.surface.interactive,
702
606
  optionSelectedBg: colors.surface.selected,
703
607
  },
704
608
  TreeSelect: {
705
- colorBgContainer: colors.surface.card,
706
609
  colorBgElevated: colors.surface.overlay,
707
- colorBorder: colors.border.default,
708
610
  nodeHoverBg: colors.surface.interactive,
709
611
  nodeSelectedBg: colors.surface.selected,
710
612
  },
@@ -715,17 +617,12 @@ export const buildAntDTheme = (colors, constants) => {
715
617
  Empty: {
716
618
  colorText: colors.text.secondary,
717
619
  colorTextDescription: colors.text.tertiary,
718
- fontSize: constants.typography.fontSize.base,
719
620
  },
720
621
  List: {
721
622
  colorBorder: colors.border.subtle,
722
- colorSplit: colors.border.subtle,
723
623
  itemPadding: `${constants.spacing[3]}px ${constants.spacing[6]}px`,
724
624
  itemPaddingSM: `${constants.spacing[2]}px ${constants.spacing[4]}px`,
725
625
  itemPaddingLG: `${constants.spacing[4]}px ${constants.spacing[6]}px`,
726
- headerBg: 'transparent',
727
- footerBg: 'transparent',
728
- emptyTextPadding: constants.spacing[4],
729
626
  metaMarginBottom: constants.spacing[2],
730
627
  avatarMarginRight: constants.spacing[4],
731
628
  titleMarginBottom: constants.spacing[1],