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

package/dist/theme/theme-config.js

@@ -2,34 +2,35 @@
  * Build comprehensive Ant Design theme from Tembo tokens
  *
  * Design principles:
- * - Set sizing/spacing once at token level, not per component
- * - Components inherit global tokens unless they need specific overrides
- * - Bold rounded corners (24px buttons/inputs, 28px cards, 32px modals)
- * - Zero shadows on flat elements (buttons, inputs)
- * - Gentle shadows on elevated elements (cards, modals, popovers)
+ * - Monochrome-first: Primary actions use neutral[8] (near-black/near-white)
+ * - Single accent: Blue for links, focus states, and interactive feedback
+ * - Semantic colors: Only for critical feedback (success, error, warning)
+ * - Consistent spacing: Set once at token level, inherited by components
+ * - Bold rounded corners: 24px inputs/buttons, 28px cards, 32px modals
+ * - Smart shadows: None on flat elements, subtle on elevated surfaces
  */
 export const buildAntDTheme = (colors, constants) => {
     const isDark = colors.mode === 'dark';
     return {
         token: {
             // ============================================
-            // COLOR TOKENS
+            // COLOR SYSTEM
             // ============================================
-            // Primary (monochrome - using action tokens implicitly)
+            // Primary = Monochrome actions (near-black/near-white)
             colorPrimary: colors.action.default,
             colorPrimaryHover: colors.action.hover,
             colorPrimaryActive: colors.action.default,
-            colorPrimaryBg: colors.neutral[2],
+            colorPrimaryBg: colors.neutral[3],
             colorPrimaryBgHover: colors.surface.interactive,
             colorPrimaryBorder: colors.action.default,
-            colorPrimaryBorderHover: colors.action.default,
+            colorPrimaryBorderHover: colors.action.hover,
             colorPrimaryText: colors.action.default,
-            colorPrimaryTextHover: colors.text.secondary,
+            colorPrimaryTextHover: colors.action.hover,
             colorPrimaryTextActive: colors.action.default,
-            // Links (standard web blue + focus rings)
-            colorLink: colors.link.default,
-            colorLinkHover: colors.link.hover,
-            colorLinkActive: colors.link.active,
+            // Links = Accent blue (only color in monochrome system)
+            colorLink: colors.accent.default,
+            colorLinkHover: colors.accent.hover,
+            colorLinkActive: colors.accent.active,
             // Text hierarchy
             colorText: colors.text.primary,
             colorTextSecondary: colors.text.secondary,
@@ -49,20 +50,19 @@ export const buildAntDTheme = (colors, constants) => {
             colorBgSpotlight: colors.surface.interactive,
             colorBgMask: isDark ? 'rgba(0, 0, 0, 0.65)' : 'rgba(0, 0, 0, 0.45)',
             colorBgTextHover: colors.surface.interactive,
-            colorBgTextActive: colors.surface.interactive,
-            // Disabled backgrounds
+            colorBgTextActive: colors.surface.selected,
             colorBgContainerDisabled: colors.action.disabled,
             // Borders
             colorBorder: colors.border.default,
             colorBorderBg: colors.surface.card,
             colorBorderSecondary: colors.border.subtle,
             colorSplit: colors.border.subtle,
-            // Fill colors
-            colorFill: colors.neutral[2],
-            colorFillSecondary: colors.neutral[2],
+            // Fill colors (for backgrounds, progress bars, etc.)
+            colorFill: colors.neutral[3],
+            colorFillSecondary: colors.neutral[3],
             colorFillTertiary: colors.neutral[2],
             colorFillQuaternary: colors.surface.interactive,
-            // Semantic colors
+            // Semantic colors - modern, vibrant
             colorSuccess: colors.semantic.success.main,
             colorSuccessBg: colors.semantic.success.subtle,
             colorSuccessBgHover: colors.semantic.success.subtle,
@@ -119,7 +119,7 @@ export const buildAntDTheme = (colors, constants) => {
             lineHeightHeading4: constants.typography.lineHeight.tight,
             lineHeightHeading5: constants.typography.lineHeight.tight,
             // ============================================
-            // SPACING & SIZING - SET ONCE HERE
+            // SPACING & SIZING
             // ============================================
             padding: constants.spacing[4],
             paddingXS: constants.spacing[2],
@@ -132,24 +132,24 @@ export const buildAntDTheme = (colors, constants) => {
             marginLG: constants.spacing[5],
             marginXL: constants.spacing[6],
             marginXXL: constants.spacing[8],
-            // Control heights - SET ONCE, components inherit
-            controlHeight: 40, // Default height for all controls
-            controlHeightLG: 48, // Large variant
-            controlHeightSM: 32, // Small variant
-            controlHeightXS: 24, // Extra small variant
+            // Control heights - consistent across all inputs
+            controlHeight: 40,
+            controlHeightLG: 48,
+            controlHeightSM: 32,
+            controlHeightXS: 24,
             // ============================================
             // BORDER RADIUS - Bold rounded corners
             // ============================================
-            borderRadius: constants.radius.base, // 24px - default bold
-            borderRadiusLG: constants.radius.md, // 28px
-            borderRadiusSM: constants.radius.sm, // 12px
-            borderRadiusXS: constants.radius.sm, // 12px
+            borderRadius: constants.radius.base,
+            borderRadiusLG: constants.radius.md,
+            borderRadiusSM: constants.radius.sm,
+            borderRadiusXS: constants.radius.sm,
             // ============================================
-            // SHADOWS - Zero on flat, gentle on elevated
+            // SHADOWS - Flat elements have none
             // ============================================
-            boxShadow: constants.shadow.none, // Default: no shadow
-            boxShadowSecondary: constants.shadow.none, // No shadow
-            boxShadowTertiary: constants.shadow.card, // Gentle card shadow
+            boxShadow: constants.shadow.none,
+            boxShadowSecondary: constants.shadow.none,
+            boxShadowTertiary: constants.shadow.card,
             // ============================================
             // MOTION
             // ============================================
@@ -166,33 +166,40 @@ export const buildAntDTheme = (colors, constants) => {
         },
         components: {
             // ========================================
-            // BUTTON - Monochrome actions, zero shadow
+            // BUTTONS - Monochrome actions
             // ========================================
             Button: {
-                // Action colors
+                // Monochrome primary button (near-black/near-white)
                 colorPrimary: colors.action.default,
                 colorPrimaryHover: colors.action.hover,
                 colorPrimaryActive: colors.action.default,
                 colorPrimaryBorder: colors.action.default,
                 primaryColor: colors.action.contrast,
-                // Disabled
-                colorBgContainerDisabled: colors.action.disabled,
-                colorTextDisabled: colors.text.secondary,
-                borderColorDisabled: colors.action.disabled,
-                // Default button
+                // Default button (outlined)
                 defaultBg: colors.surface.card,
                 defaultBorderColor: colors.border.default,
                 defaultColor: colors.text.primary,
                 defaultHoverBg: colors.surface.interactive,
                 defaultHoverBorderColor: colors.border.strong,
+                defaultHoverColor: colors.text.primary,
+                defaultActiveBg: colors.surface.selected,
                 defaultActiveBorderColor: colors.action.default,
-                // Link button
-                colorLink: colors.link.default,
-                colorLinkHover: colors.link.hover,
-                colorLinkActive: colors.link.active,
-                // Danger button
+                defaultActiveColor: colors.action.default,
+                // Link button (uses accent color)
+                colorLink: colors.accent.default,
+                colorLinkHover: colors.accent.hover,
+                colorLinkActive: colors.accent.active,
+                // Text button
+                textHoverBg: colors.surface.interactive,
+                // Danger button (uses semantic red)
                 dangerColor: colors.semantic.error.main,
-                // Zero shadows on all buttons
+                colorErrorHover: colors.semantic.error.main,
+                colorErrorActive: colors.semantic.error.main,
+                // Disabled state
+                colorBgContainerDisabled: colors.action.disabled,
+                colorTextDisabled: colors.text.disabled,
+                borderColorDisabled: colors.action.disabled,
+                // No shadows on buttons (flat design)
                 primaryShadow: 'none',
                 defaultShadow: 'none',
                 dangerShadow: 'none',
@@ -200,32 +207,34 @@ export const buildAntDTheme = (colors, constants) => {
                 borderRadius: constants.radius.button,
                 borderRadiusLG: constants.radius.button,
                 borderRadiusSM: constants.radius.button,
+                // Typography
+                fontWeight: constants.typography.fontWeight.medium,
                 // Padding
                 paddingContentHorizontal: constants.spacing[4],
                 paddingContentVertical: constants.spacing[2],
-                // Typography
-                fontWeight: constants.typography.fontWeight.medium,
-                // Heights inherited from token.controlHeight automatically ✅
+                // Heights inherited from token.controlHeight ✅
             },
             // ========================================
-            // INPUTS - Bold rounded, zero shadow, blue focus ring
+            // INPUTS - Blue accent for focus states
             // ========================================
             Input: {
-                // Colors
-                colorBgContainer: colors.surface.card,
+                colorBgContainer: colors.surface.input,
                 colorBorder: colors.border.default,
                 colorText: colors.text.primary,
                 colorTextPlaceholder: colors.text.tertiary,
-                // Icons - subtle
+                // Icons
                 colorIcon: colors.text.tertiary,
                 colorIconHover: colors.text.secondary,
-                // States
+                // Hover state
+                hoverBg: colors.surface.card,
                 hoverBorderColor: colors.border.strong,
-                activeBorderColor: colors.link.default,
-                activeShadow: `0 0 0 2px ${colors.semantic.info.subtle}`, // Blue focus ring
-                // Error/warning rings
-                errorActiveShadow: `0 0 0 2px ${colors.semantic.error.subtle}`,
-                warningActiveShadow: `0 0 0 2px ${colors.semantic.warning.subtle}`,
+                // Focus state - blue accent ring
+                activeBg: colors.surface.card,
+                activeBorderColor: colors.accent.default,
+                activeShadow: `0 0 0 2px ${colors.accent.subtle}`,
+                // Disabled
+                colorBgContainerDisabled: colors.surface.nested,
+                colorTextDisabled: colors.text.disabled,
                 // Bold rounded
                 borderRadius: constants.radius.input,
                 borderRadiusLG: constants.radius.input,
@@ -234,25 +243,29 @@ export const buildAntDTheme = (colors, constants) => {
                 paddingBlock: constants.spacing[2],
                 paddingInline: constants.spacing[3],
                 paddingInlineLG: constants.spacing[4],
-                // Heights inherited from token.controlHeight automatically ✅
             },
             InputNumber: {
+                colorBgContainer: colors.surface.input,
                 colorIcon: colors.text.tertiary,
                 colorIconHover: colors.text.secondary,
-                activeBorderColor: colors.link.default,
-                activeShadow: `0 0 0 2px ${colors.semantic.info.subtle}`,
+                activeBorderColor: colors.accent.default,
+                activeShadow: `0 0 0 2px ${colors.accent.subtle}`,
                 borderRadius: constants.radius.input,
                 handleVisible: true,
             },
             Select: {
+                colorBgContainer: colors.surface.input,
                 colorBgElevated: colors.surface.overlay,
                 colorIcon: colors.text.tertiary,
                 colorIconHover: colors.text.secondary,
-                activeBorderColor: colors.link.default,
-                boxShadow: `0 0 0 2px ${colors.semantic.info.subtle}`,
+                // Focus - blue accent
+                activeBorderColor: colors.accent.default,
+                boxShadow: `0 0 0 2px ${colors.accent.subtle}`,
+                // Options
                 optionSelectedBg: colors.surface.selected,
                 optionActiveBg: colors.surface.interactive,
                 controlItemBgHover: colors.surface.interactive,
+                controlItemBgActive: colors.surface.selected,
                 borderRadius: constants.radius.input,
                 borderRadiusLG: constants.radius.input,
                 borderRadiusSM: constants.radius.input,
@@ -260,59 +273,71 @@ export const buildAntDTheme = (colors, constants) => {
                 boxShadowSecondary: constants.shadow.popover,
             },
             DatePicker: {
+                colorBgContainer: colors.surface.input,
                 colorIcon: colors.text.tertiary,
                 colorIconHover: colors.text.secondary,
-                activeBorderColor: colors.link.default,
-                activeShadow: `0 0 0 2px ${colors.semantic.info.subtle}`,
+                activeBorderColor: colors.accent.default,
+                activeShadow: `0 0 0 2px ${colors.accent.subtle}`,
                 cellHoverBg: colors.surface.interactive,
-                cellActiveWithRangeBg: colors.semantic.info.subtle,
-                colorPrimary: colors.link.default,
+                cellActiveWithRangeBg: colors.accent.subtle,
+                colorPrimary: colors.accent.default,
                 borderRadius: constants.radius.input,
             },
+            // ========================================
+            // FORM CONTROLS - Use accent for selected state
+            // ========================================
             Checkbox: {
-                colorPrimary: colors.link.default,
-                colorPrimaryHover: colors.link.hover,
+                colorPrimary: colors.accent.default,
+                colorPrimaryHover: colors.accent.hover,
+                colorPrimaryBorder: colors.border.default,
                 borderRadiusSM: constants.radius.sm,
             },
             Radio: {
-                colorPrimary: colors.link.default,
-                colorPrimaryHover: colors.link.hover,
+                colorPrimary: colors.accent.default,
+                colorPrimaryHover: colors.accent.hover,
+                colorBorder: colors.border.default,
             },
             Switch: {
-                colorPrimary: colors.link.default,
-                colorPrimaryHover: colors.link.hover,
+                colorPrimary: colors.accent.default,
+                colorPrimaryHover: colors.accent.hover,
+                colorTextQuaternary: colors.neutral[4],
+                colorTextTertiary: colors.neutral[5],
                 handleSize: 18,
             },
             Slider: {
-                colorPrimary: colors.link.default,
-                colorPrimaryBorder: colors.link.default,
-                colorPrimaryBorderHover: colors.link.hover,
+                colorPrimary: colors.accent.default,
+                colorPrimaryBorder: colors.accent.default,
+                colorPrimaryBorderHover: colors.accent.hover,
                 handleColor: colors.surface.card,
                 handleActiveColor: colors.surface.card,
-                railBg: colors.neutral[2],
-                railHoverBg: colors.neutral[3],
-                trackBg: colors.link.default,
-                trackHoverBg: colors.link.hover,
+                railBg: colors.neutral[3],
+                railHoverBg: colors.neutral[4],
+                trackBg: colors.accent.default,
+                trackHoverBg: colors.accent.hover,
                 dotBorderColor: colors.border.default,
-                dotActiveBorderColor: colors.link.default,
+                dotActiveBorderColor: colors.accent.default,
             },
+            // ========================================
+            // FORM LAYOUT
+            // ========================================
             Form: {
                 labelColor: colors.text.primary,
                 labelFontSize: constants.typography.fontSize.base,
+                labelRequiredMarkColor: colors.semantic.error.main,
                 itemMarginBottom: constants.spacing[4],
                 verticalLabelPadding: `0 0 ${constants.spacing[2]}px`,
-                labelRequiredMarkColor: colors.semantic.error.main,
             },
             // ========================================
             // DATA DISPLAY
             // ========================================
             Table: {
-                // Colors
                 colorBgContainer: colors.surface.card,
                 headerBg: colors.surface.page,
                 headerColor: colors.text.secondary,
+                colorText: colors.text.primary,
+                colorTextHeading: colors.text.secondary,
                 borderColor: colors.border.subtle,
-                // States
+                // Interactive states
                 rowHoverBg: colors.surface.interactive,
                 rowSelectedBg: colors.surface.selected,
                 rowExpandedBg: colors.surface.nested,
@@ -321,21 +346,27 @@ export const buildAntDTheme = (colors, constants) => {
                 borderRadiusLG: constants.radius.card,
                 headerBorderRadius: constants.radius.card,
                 // Padding
-                cellPaddingBlock: constants.spacing[4],
+                cellPaddingBlock: constants.spacing[3],
                 cellPaddingInline: constants.spacing[4],
                 cellPaddingBlockSM: constants.spacing[2],
                 cellPaddingInlineSM: constants.spacing[3],
+                // Typography
+                cellFontSize: constants.typography.fontSize.base,
+                headerSortActiveBg: colors.surface.interactive,
             },
             Descriptions: {
                 labelBg: colors.surface.page,
                 titleColor: colors.text.primary,
                 contentColor: colors.text.primary,
                 extraColor: colors.text.secondary,
-                itemPaddingBottom: constants.spacing[4],
+                colorSplit: colors.border.subtle,
+                itemPaddingBottom: constants.spacing[3],
             },
             Card: {
                 colorBgContainer: colors.surface.card,
                 colorBorderSecondary: colors.border.default,
+                colorTextHeading: colors.text.primary,
+                colorTextDescription: colors.text.secondary,
                 // Gentle shadow on cards
                 boxShadowTertiary: constants.shadow.card,
                 // Smooth rounded
@@ -345,17 +376,19 @@ export const buildAntDTheme = (colors, constants) => {
                 paddingLG: constants.spacing[6],
             },
             Statistic: {
-                titleFontSize: constants.typography.fontSize.base,
+                titleFontSize: constants.typography.fontSize.sm,
                 contentFontSize: constants.typography.fontSize['4xl'],
             },
             Timeline: {
                 tailColor: colors.border.default,
                 tailWidth: 2,
                 dotBg: colors.surface.card,
-                itemPaddingBottom: constants.spacing[5],
+                dotBorderWidth: 2,
+                itemPaddingBottom: constants.spacing[4],
             },
             Tag: {
                 defaultBg: colors.neutral[2],
+                defaultColor: colors.text.primary,
                 borderRadiusSM: constants.radius.sm,
                 fontSize: constants.typography.fontSize.sm,
                 fontSizeSM: constants.typography.fontSize.xs,
@@ -364,20 +397,22 @@ export const buildAntDTheme = (colors, constants) => {
                 colorBorderBg: colors.surface.card,
                 colorError: colors.semantic.error.main,
                 colorSuccess: colors.semantic.success.main,
-                colorInfo: colors.semantic.info.main,
+                colorInfo: colors.accent.default,
                 colorWarning: colors.semantic.warning.main,
                 textFontSize: constants.typography.fontSize.xs,
+                textFontWeight: constants.typography.fontWeight.medium,
             },
             Avatar: {
-                colorBgContainer: colors.neutral[2],
+                colorBgContainer: colors.neutral[3],
+                colorTextPlaceholder: colors.text.secondary,
                 borderRadius: constants.radius.avatar,
                 groupOverlapping: -8,
                 groupSpace: constants.spacing[1],
             },
             Calendar: {
                 colorBgContainer: colors.surface.card,
-                colorPrimary: colors.link.default,
-                itemActiveBg: colors.semantic.info.subtle,
+                colorPrimary: colors.accent.default,
+                itemActiveBg: colors.accent.subtle,
                 borderRadius: constants.radius.card,
             },
             Collapse: {
@@ -390,13 +425,13 @@ export const buildAntDTheme = (colors, constants) => {
             Tree: {
                 nodeHoverBg: colors.surface.interactive,
                 nodeSelectedBg: colors.surface.selected,
+                directoryNodeSelectedBg: colors.surface.selected,
                 borderRadius: constants.radius.sm,
             },
             // ========================================
             // FEEDBACK - Elevated with shadows
             // ========================================
             Alert: {
-                // Semantic colors
                 colorSuccessBg: colors.semantic.success.subtle,
                 colorSuccessBorder: colors.semantic.success.main,
                 colorSuccessText: colors.semantic.success.main,
@@ -411,11 +446,14 @@ export const buildAntDTheme = (colors, constants) => {
                 colorInfoText: colors.semantic.info.main,
                 defaultPadding: `${constants.spacing[3]}px ${constants.spacing[4]}px`,
                 borderRadiusLG: constants.radius.card,
+                withDescriptionPadding: `${constants.spacing[4]}px ${constants.spacing[5]}px`,
             },
             Modal: {
                 contentBg: colors.surface.overlay,
                 headerBg: colors.surface.overlay,
                 footerBg: colors.surface.overlay,
+                titleColor: colors.text.primary,
+                titleFontSize: constants.typography.fontSize.xl,
                 colorBgMask: isDark ? 'rgba(0, 0, 0, 0.65)' : 'rgba(0, 0, 0, 0.45)',
                 // Prominent shadow
                 boxShadow: constants.shadow.modal,
@@ -424,6 +462,7 @@ export const buildAntDTheme = (colors, constants) => {
             },
             Drawer: {
                 colorBgElevated: colors.surface.overlay,
+                colorText: colors.text.primary,
                 colorBgMask: isDark ? 'rgba(0, 0, 0, 0.65)' : 'rgba(0, 0, 0, 0.45)',
                 borderRadiusLG: constants.radius.modal,
                 footerPaddingBlock: constants.spacing[4],
@@ -431,6 +470,8 @@ export const buildAntDTheme = (colors, constants) => {
             },
             Notification: {
                 colorBgElevated: colors.surface.overlay,
+                colorText: colors.text.primary,
+                colorTextHeading: colors.text.primary,
                 // Shadow on notification
                 boxShadow: constants.shadow.popover,
                 borderRadiusLG: constants.radius.card,
@@ -445,14 +486,16 @@ export const buildAntDTheme = (colors, constants) => {
             },
             Popconfirm: {
                 colorBgElevated: colors.surface.overlay,
+                colorText: colors.text.primary,
+                colorTextHeading: colors.text.primary,
                 boxShadowSecondary: constants.shadow.popover,
                 borderRadiusLG: constants.radius.card,
             },
             Progress: {
-                defaultColor: colors.link.default,
+                defaultColor: colors.accent.default,
                 colorSuccess: colors.semantic.success.main,
                 colorError: colors.semantic.error.main,
-                remainingColor: colors.neutral[2],
+                remainingColor: colors.neutral[3],
                 borderRadius: 100,
                 lineBorderRadius: 100,
             },
@@ -460,68 +503,85 @@ export const buildAntDTheme = (colors, constants) => {
                 titleFontSize: constants.typography.fontSize['3xl'],
                 subtitleFontSize: constants.typography.fontSize.base,
                 iconFontSize: constants.typography.fontSize['5xl'],
+                colorSuccess: colors.semantic.success.main,
+                colorError: colors.semantic.error.main,
+                colorInfo: colors.accent.default,
+                colorWarning: colors.semantic.warning.main,
             },
             Skeleton: {
                 colorFill: colors.neutral[2],
-                colorFillContent: colors.neutral[1],
+                colorFillContent: colors.neutral[3],
                 borderRadiusSM: constants.radius.sm,
             },
             Spin: {
-                colorPrimary: colors.link.default,
+                colorPrimary: colors.accent.default,
             },
             // ========================================
-            // NAVIGATION
+            // NAVIGATION - Accent for active states
             // ========================================
             Menu: {
                 itemBg: 'transparent',
                 itemColor: colors.text.primary,
                 itemHoverBg: colors.surface.interactive,
+                itemHoverColor: colors.text.primary,
                 itemSelectedBg: colors.surface.selected,
+                itemSelectedColor: colors.accent.default,
+                itemActiveBg: colors.surface.selected,
                 // Dark sidebar
                 darkItemBg: colors.absolute.black,
                 darkSubMenuItemBg: colors.absolute.black,
                 darkItemColor: colors.absolute.white,
                 darkItemHoverBg: 'rgba(255, 255, 255, 0.08)',
-                darkItemSelectedBg: colors.link.default,
+                darkItemSelectedBg: colors.accent.default,
                 darkItemSelectedColor: colors.absolute.white,
-                itemBorderRadius: constants.radius.input,
-                itemPaddingInline: constants.spacing[4],
+                itemBorderRadius: constants.radius.sm,
+                itemMarginInline: constants.spacing[1],
+                itemPaddingInline: constants.spacing[3],
             },
             Breadcrumb: {
                 itemColor: colors.text.secondary,
                 lastItemColor: colors.text.primary,
-                linkColor: colors.link.default,
-                linkHoverColor: colors.link.hover,
+                linkColor: colors.accent.default,
+                linkHoverColor: colors.accent.hover,
                 separatorColor: colors.text.tertiary,
                 separatorMargin: constants.spacing[2],
+                fontSize: constants.typography.fontSize.sm,
             },
             Pagination: {
-                colorPrimary: colors.link.default,
-                colorPrimaryHover: colors.link.hover,
-                itemActiveBg: colors.link.default,
+                colorPrimary: colors.accent.default,
+                colorPrimaryHover: colors.accent.hover,
+                itemActiveBg: colors.accent.default,
+                itemBg: colors.surface.card,
+                itemLinkBg: colors.surface.card,
+                itemInputBg: colors.surface.card,
                 borderRadius: constants.radius.sm,
             },
             Steps: {
-                colorPrimary: colors.link.default,
+                colorPrimary: colors.accent.default,
                 colorText: colors.text.secondary,
                 colorTextDescription: colors.text.tertiary,
+                colorFillContent: colors.neutral[3],
             },
             Tabs: {
-                colorPrimary: colors.link.default,
+                colorPrimary: colors.accent.default,
                 itemColor: colors.text.secondary,
-                itemHoverColor: colors.link.hover,
-                itemSelectedColor: colors.link.default,
-                inkBarColor: colors.link.default,
+                itemHoverColor: colors.accent.hover,
+                itemSelectedColor: colors.accent.default,
+                itemActiveColor: colors.accent.default,
+                inkBarColor: colors.accent.default,
+                colorBgContainer: colors.surface.card,
                 cardPadding: `${constants.spacing[2]}px ${constants.spacing[4]}px`,
                 horizontalItemPadding: `${constants.spacing[3]}px 0`,
+                horizontalItemGutter: constants.spacing[8],
             },
             Anchor: {
-                colorPrimary: colors.link.default,
+                colorPrimary: colors.accent.default,
                 linkPaddingBlock: constants.spacing[1],
                 linkPaddingInlineStart: constants.spacing[4],
             },
             Dropdown: {
                 colorBgElevated: colors.surface.overlay,
+                colorText: colors.text.primary,
                 controlItemBgHover: colors.surface.interactive,
                 controlItemBgActive: colors.surface.selected,
                 // Shadow on dropdown
@@ -535,30 +595,35 @@ export const buildAntDTheme = (colors, constants) => {
             Layout: {
                 colorBgBody: colors.surface.page,
                 colorBgHeader: colors.surface.card,
+                colorBgTrigger: colors.surface.interactive,
                 headerBg: colors.surface.card,
+                headerColor: colors.text.primary,
                 siderBg: colors.absolute.black,
+                triggerBg: colors.surface.interactive,
+                triggerColor: colors.text.primary,
                 headerPadding: `0 ${constants.spacing[6]}px`,
                 footerPadding: `${constants.spacing[6]}px ${constants.spacing[12]}px`,
             },
             Divider: {
                 colorSplit: colors.border.subtle,
                 colorText: colors.text.tertiary,
+                colorTextHeading: colors.text.secondary,
                 verticalMarginInline: constants.spacing[2],
             },
             // ========================================
-            // OTHER
+            // OVERLAYS
             // ========================================
             Typography: {
                 colorText: colors.text.primary,
                 colorTextSecondary: colors.text.secondary,
-                colorLink: colors.link.default,
-                colorLinkHover: colors.link.hover,
-                colorLinkActive: colors.link.active,
+                colorLink: colors.accent.default,
+                colorLinkHover: colors.accent.hover,
+                colorLinkActive: colors.accent.active,
                 titleMarginBottom: constants.spacing[2],
                 titleMarginTop: constants.spacing[4],
             },
             Tooltip: {
-                colorBgSpotlight: colors.neutral[4],
+                colorBgSpotlight: colors.neutral[8],
                 colorTextLightSolid: colors.text.inverse,
                 // Subtle shadow
                 boxShadowSecondary: constants.shadow.tooltip,
@@ -566,31 +631,43 @@ export const buildAntDTheme = (colors, constants) => {
             },
             Popover: {
                 colorBgElevated: colors.surface.overlay,
+                colorText: colors.text.primary,
+                colorTextHeading: colors.text.primary,
                 // Shadow on popover
                 boxShadowSecondary: constants.shadow.popover,
                 borderRadiusLG: constants.radius.card,
                 padding: constants.spacing[3],
             },
+            // ========================================
+            // OTHER COMPONENTS
+            // ========================================
             Upload: {
                 colorFillAlter: colors.surface.interactive,
-                actionsColor: colors.link.default,
+                colorBorder: colors.border.default,
+                actionsColor: colors.accent.default,
             },
             Tour: {
                 colorBgElevated: colors.surface.overlay,
-                colorPrimary: colors.link.default,
+                colorPrimary: colors.accent.default,
+                colorText: colors.text.primary,
                 boxShadowSecondary: constants.shadow.popover,
                 borderRadius: constants.radius.card,
             },
             FloatButton: {
                 colorBgElevated: colors.surface.overlay,
-                colorPrimary: colors.link.default,
+                colorPrimary: colors.accent.default,
+                colorText: colors.text.primary,
                 boxShadow: constants.shadow.popover,
                 borderRadiusLG: constants.radius.avatar,
             },
             Segmented: {
                 colorBgLayout: colors.neutral[2],
+                itemColor: colors.text.secondary,
+                itemHoverColor: colors.text.primary,
                 itemHoverBg: colors.surface.interactive,
                 itemSelectedBg: colors.surface.card,
+                itemSelectedColor: colors.text.primary,
+                itemActiveBg: colors.surface.card,
                 borderRadius: constants.radius.base,
                 borderRadiusSM: constants.radius.sm,
             },
@@ -604,24 +681,34 @@ export const buildAntDTheme = (colors, constants) => {
                 colorBgElevated: colors.surface.overlay,
                 controlItemBgHover: colors.surface.interactive,
                 optionSelectedBg: colors.surface.selected,
+                colorPrimary: colors.accent.default,
             },
             TreeSelect: {
                 colorBgElevated: colors.surface.overlay,
                 nodeHoverBg: colors.surface.interactive,
                 nodeSelectedBg: colors.surface.selected,
             },
+            Transfer: {
+                colorBgContainer: colors.surface.card,
+                controlItemBgHover: colors.surface.interactive,
+                controlItemBgActive: colors.surface.selected,
+            },
             Rate: {
                 colorFillContent: colors.neutral[3],
                 starColor: '#FADB14',
+                starBg: colors.neutral[3],
             },
             Empty: {
                 colorText: colors.text.secondary,
                 colorTextDescription: colors.text.tertiary,
+                colorTextDisabled: colors.text.disabled,
             },
             List: {
                 colorBorder: colors.border.subtle,
-                itemPadding: `${constants.spacing[3]}px ${constants.spacing[6]}px`,
-                itemPaddingSM: `${constants.spacing[2]}px ${constants.spacing[4]}px`,
+                colorText: colors.text.primary,
+                colorTextDescription: colors.text.secondary,
+                itemPadding: `${constants.spacing[3]}px 0`,
+                itemPaddingSM: `${constants.spacing[2]}px ${constants.spacing[3]}px`,
                 itemPaddingLG: `${constants.spacing[4]}px ${constants.spacing[6]}px`,
                 metaMarginBottom: constants.spacing[2],
                 avatarMarginRight: constants.spacing[4],