@temboplus/frontend-react-core 0.1.3-beta.2 → 0.1.3-beta.20

package/dist/theme/theme-config.js

@@ -0,0 +1,735 @@
+/**
+ * Build comprehensive Ant Design theme from Tembo tokens
+ *
+ * Design principles:
+ * - 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 SYSTEM
+            // ============================================
+            // Primary = Monochrome actions (near-black/near-white)
+            colorPrimary: colors.action.default,
+            colorPrimaryHover: colors.action.hover,
+            colorPrimaryActive: colors.action.default,
+            colorPrimaryBg: colors.neutral[3],
+            colorPrimaryBgHover: colors.surface.interactive,
+            colorPrimaryBorder: colors.action.default,
+            colorPrimaryBorderHover: colors.action.hover,
+            colorPrimaryText: colors.action.default,
+            colorPrimaryTextHover: colors.action.hover,
+            colorPrimaryTextActive: colors.action.default,
+            // 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,
+            colorTextTertiary: colors.text.tertiary,
+            colorTextQuaternary: colors.text.tertiary,
+            colorTextDescription: colors.text.secondary,
+            colorTextDisabled: colors.text.disabled,
+            colorTextHeading: colors.text.primary,
+            colorTextLabel: colors.text.secondary,
+            colorTextPlaceholder: colors.text.tertiary,
+            colorTextLightSolid: colors.text.inverse,
+            // Backgrounds
+            colorBgBase: colors.surface.page,
+            colorBgContainer: colors.surface.card,
+            colorBgElevated: colors.surface.overlay,
+            colorBgLayout: colors.surface.page,
+            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.selected,
+            colorBgContainerDisabled: colors.action.disabled,
+            // Borders
+            colorBorder: colors.border.default,
+            colorBorderBg: colors.surface.card,
+            colorBorderSecondary: colors.border.subtle,
+            colorSplit: colors.border.subtle,
+            // 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 - modern, vibrant
+            colorSuccess: colors.semantic.success.main,
+            colorSuccessBg: colors.semantic.success.subtle,
+            colorSuccessBgHover: colors.semantic.success.subtle,
+            colorSuccessBorder: colors.semantic.success.main,
+            colorSuccessBorderHover: colors.semantic.success.main,
+            colorSuccessText: colors.semantic.success.main,
+            colorSuccessTextHover: colors.semantic.success.main,
+            colorSuccessTextActive: colors.semantic.success.main,
+            colorError: colors.semantic.error.main,
+            colorErrorBg: colors.semantic.error.subtle,
+            colorErrorBgHover: colors.semantic.error.subtle,
+            colorErrorBorder: colors.semantic.error.main,
+            colorErrorBorderHover: colors.semantic.error.main,
+            colorErrorText: colors.semantic.error.main,
+            colorErrorTextHover: colors.semantic.error.main,
+            colorErrorTextActive: colors.semantic.error.main,
+            colorWarning: colors.semantic.warning.main,
+            colorWarningBg: colors.semantic.warning.subtle,
+            colorWarningBgHover: colors.semantic.warning.subtle,
+            colorWarningBorder: colors.semantic.warning.main,
+            colorWarningBorderHover: colors.semantic.warning.main,
+            colorWarningText: colors.semantic.warning.main,
+            colorWarningTextHover: colors.semantic.warning.main,
+            colorWarningTextActive: colors.semantic.warning.main,
+            colorInfo: colors.semantic.info.main,
+            colorInfoBg: colors.semantic.info.subtle,
+            colorInfoBgHover: colors.semantic.info.subtle,
+            colorInfoBorder: colors.semantic.info.main,
+            colorInfoBorderHover: colors.semantic.info.main,
+            colorInfoText: colors.semantic.info.main,
+            colorInfoTextHover: colors.semantic.info.main,
+            colorInfoTextActive: colors.semantic.info.main,
+            // ============================================
+            // TYPOGRAPHY
+            // ============================================
+            fontFamily: constants.typography.fontFamily.base,
+            fontFamilyCode: constants.typography.fontFamily.mono,
+            fontSize: constants.typography.fontSize.base,
+            fontSizeSM: constants.typography.fontSize.sm,
+            fontSizeLG: constants.typography.fontSize.lg,
+            fontSizeXL: constants.typography.fontSize.xl,
+            fontSizeHeading1: constants.typography.fontSize['5xl'],
+            fontSizeHeading2: constants.typography.fontSize['4xl'],
+            fontSizeHeading3: constants.typography.fontSize['3xl'],
+            fontSizeHeading4: constants.typography.fontSize['2xl'],
+            fontSizeHeading5: constants.typography.fontSize.xl,
+            fontWeightStrong: constants.typography.fontWeight.semibold,
+            lineHeight: constants.typography.lineHeight.base,
+            lineHeightSM: constants.typography.lineHeight.base,
+            lineHeightLG: constants.typography.lineHeight.relaxed,
+            lineHeightHeading1: constants.typography.lineHeight.tight,
+            lineHeightHeading2: constants.typography.lineHeight.tight,
+            lineHeightHeading3: constants.typography.lineHeight.tight,
+            lineHeightHeading4: constants.typography.lineHeight.tight,
+            lineHeightHeading5: constants.typography.lineHeight.tight,
+            // ============================================
+            // SPACING & SIZING
+            // ============================================
+            padding: constants.spacing[4],
+            paddingXS: constants.spacing[2],
+            paddingSM: constants.spacing[3],
+            paddingLG: constants.spacing[5],
+            paddingXL: constants.spacing[6],
+            margin: constants.spacing[4],
+            marginXS: constants.spacing[2],
+            marginSM: constants.spacing[3],
+            marginLG: constants.spacing[5],
+            marginXL: constants.spacing[6],
+            marginXXL: constants.spacing[8],
+            // Control heights - consistent across all inputs
+            controlHeight: 40,
+            controlHeightLG: 48,
+            controlHeightSM: 32,
+            controlHeightXS: 24,
+            // ============================================
+            // BORDER RADIUS - Bold rounded corners
+            // ============================================
+            borderRadius: constants.radius.base,
+            borderRadiusLG: constants.radius.md,
+            borderRadiusSM: constants.radius.base,
+            borderRadiusXS: constants.radius.base,
+            // ============================================
+            // SHADOWS - Flat elements have none
+            // ============================================
+            boxShadow: constants.shadow.none,
+            boxShadowSecondary: constants.shadow.none,
+            boxShadowTertiary: constants.shadow.card,
+            // ============================================
+            // MOTION
+            // ============================================
+            motionUnit: 0.1,
+            motionBase: 0,
+            motionEaseInOut: constants.transition.base,
+            motionEaseOut: constants.transition.base,
+            motionEaseInBack: constants.transition.base,
+            // ============================================
+            // Z-INDEX
+            // ============================================
+            zIndexBase: 0,
+            zIndexPopupBase: constants.zIndex.dropdown,
+        },
+        components: {
+            // ========================================
+            // BUTTONS - Monochrome actions
+            // ========================================
+            Button: {
+                // 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,
+                // 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,
+                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,
+                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',
+                // Bold rounded corners
+                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],
+                // Heights inherited from token.controlHeight ✅
+            },
+            // ========================================
+            // INPUTS - Blue accent for focus states
+            // ========================================
+            Input: {
+                colorBgContainer: colors.surface.input,
+                colorBorder: colors.border.default,
+                colorText: colors.text.input,
+                colorTextPlaceholder: colors.text.tertiary,
+                // Icons
+                colorIcon: colors.text.tertiary,
+                colorIconHover: colors.text.secondary,
+                // Hover state
+                hoverBg: colors.surface.card,
+                hoverBorderColor: colors.border.strong,
+                // Focus state - blue accent ring
+                activeBg: colors.surface.card,
+                activeBorderColor: colors.accent.default,
+                activeShadow: `0 0 0 2px ${colors.accent.subtle}`,
+                // Error/warning focus rings
+                errorActiveShadow: `0 0 0 2px ${colors.semantic.error.subtle}`,
+                warningActiveShadow: `0 0 0 2px ${colors.semantic.warning.subtle}`,
+                // Disabled
+                colorBgContainerDisabled: colors.surface.nested,
+                colorTextDisabled: colors.text.disabled,
+                // Bold rounded
+                borderRadius: constants.radius.input,
+                borderRadiusLG: constants.radius.input,
+                borderRadiusSM: constants.radius.input,
+                // Padding
+                paddingBlock: constants.spacing[2],
+                paddingInline: constants.spacing[3],
+                paddingInlineLG: constants.spacing[4],
+                // Font weight - 500 for input text
+                fontWeightStrong: constants.typography.fontWeight.medium,
+            },
+            InputNumber: {
+                colorBgContainer: colors.surface.input,
+                colorText: colors.text.input,
+                colorTextPlaceholder: colors.text.tertiary,
+                colorIcon: colors.text.tertiary,
+                colorIconHover: colors.text.secondary,
+                activeBorderColor: colors.accent.default,
+                activeShadow: `0 0 0 2px ${colors.accent.subtle}`,
+                borderRadius: constants.radius.input,
+                handleVisible: true,
+                fontWeightStrong: constants.typography.fontWeight.medium,
+            },
+            Select: {
+                colorBgContainer: colors.surface.input,
+                colorBgElevated: colors.surface.overlay,
+                colorText: colors.text.input,
+                colorTextPlaceholder: colors.text.tertiary,
+                colorIcon: colors.text.tertiary,
+                colorIconHover: colors.text.secondary,
+                // 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,
+                // Dropdown has shadow
+                boxShadowSecondary: constants.shadow.popover,
+                fontWeightStrong: constants.typography.fontWeight.medium,
+            },
+            DatePicker: {
+                colorBgContainer: colors.surface.input,
+                colorText: colors.text.input,
+                colorTextPlaceholder: colors.text.tertiary,
+                colorIcon: colors.text.tertiary,
+                colorIconHover: colors.text.secondary,
+                activeBorderColor: colors.accent.default,
+                activeShadow: `0 0 0 2px ${colors.accent.subtle}`,
+                cellHoverBg: colors.surface.interactive,
+                cellActiveWithRangeBg: colors.accent.subtle,
+                colorPrimary: colors.accent.default,
+                borderRadius: constants.radius.input,
+                fontWeightStrong: constants.typography.fontWeight.medium,
+            },
+            // ========================================
+            // FORM CONTROLS - Use accent for selected state
+            // ========================================
+            Checkbox: {
+                colorPrimary: colors.accent.default,
+                colorPrimaryHover: colors.accent.hover,
+                colorPrimaryBorder: colors.border.default,
+                borderRadiusSM: constants.radius.sm,
+            },
+            Radio: {
+                colorPrimary: colors.accent.default,
+                colorPrimaryHover: colors.accent.hover,
+                colorBorder: colors.border.default,
+            },
+            Switch: {
+                colorPrimary: colors.accent.default,
+                colorPrimaryHover: colors.accent.hover,
+                colorTextQuaternary: colors.neutral[4],
+                colorTextTertiary: colors.neutral[5],
+                handleSize: 18,
+            },
+            Slider: {
+                colorPrimary: colors.accent.default,
+                colorPrimaryBorder: colors.accent.default,
+                colorPrimaryBorderHover: colors.accent.hover,
+                handleColor: colors.surface.card,
+                handleActiveColor: colors.surface.card,
+                railBg: colors.neutral[3],
+                railHoverBg: colors.neutral[4],
+                trackBg: colors.accent.default,
+                trackHoverBg: colors.accent.hover,
+                dotBorderColor: colors.border.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`,
+            },
+            // ========================================
+            // DATA DISPLAY
+            // ========================================
+            Table: {
+                colorBgContainer: colors.surface.card,
+                headerBg: colors.surface.page,
+                headerColor: colors.text.secondary,
+                colorText: colors.text.primary,
+                colorTextHeading: colors.text.secondary,
+                borderColor: colors.border.subtle,
+                // Interactive states
+                rowHoverBg: colors.surface.interactive,
+                rowSelectedBg: colors.surface.selected,
+                rowExpandedBg: colors.surface.nested,
+                // Smooth rounded
+                borderRadius: constants.radius.card,
+                borderRadiusLG: constants.radius.card,
+                headerBorderRadius: constants.radius.card,
+                // Padding
+                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,
+                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
+                borderRadius: constants.radius.card,
+                borderRadiusLG: constants.radius.card,
+                padding: constants.spacing[4],
+                paddingLG: constants.spacing[6],
+            },
+            Statistic: {
+                titleFontSize: constants.typography.fontSize.sm,
+                contentFontSize: constants.typography.fontSize['4xl'],
+            },
+            Timeline: {
+                tailColor: colors.border.default,
+                tailWidth: 2,
+                dotBg: colors.surface.card,
+                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,
+            },
+            Badge: {
+                colorBorderBg: colors.surface.card,
+                colorError: colors.semantic.error.main,
+                colorSuccess: colors.semantic.success.main,
+                colorInfo: colors.accent.default,
+                colorWarning: colors.semantic.warning.main,
+                textFontSize: constants.typography.fontSize.xs,
+                textFontWeight: constants.typography.fontWeight.medium,
+            },
+            Avatar: {
+                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.accent.default,
+                itemActiveBg: colors.accent.subtle,
+                borderRadius: constants.radius.card,
+            },
+            Collapse: {
+                colorBgContainer: colors.surface.card,
+                headerBg: colors.surface.page,
+                headerPadding: `${constants.spacing[3]}px ${constants.spacing[4]}px`,
+                contentPadding: `${constants.spacing[4]}px ${constants.spacing[4]}px`,
+                borderRadiusLG: constants.radius.card,
+            },
+            Tree: {
+                nodeHoverBg: colors.surface.interactive,
+                nodeSelectedBg: colors.surface.selected,
+                directoryNodeSelectedBg: colors.surface.selected,
+                borderRadius: constants.radius.sm,
+            },
+            // ========================================
+            // FEEDBACK - Elevated with shadows
+            // ========================================
+            Alert: {
+                colorSuccessBg: colors.semantic.success.subtle,
+                colorSuccessBorder: colors.semantic.success.main,
+                colorSuccessText: colors.semantic.success.main,
+                colorErrorBg: colors.semantic.error.subtle,
+                colorErrorBorder: colors.semantic.error.main,
+                colorErrorText: colors.semantic.error.main,
+                colorWarningBg: colors.semantic.warning.subtle,
+                colorWarningBorder: colors.semantic.warning.main,
+                colorWarningText: colors.semantic.warning.main,
+                colorInfoBg: colors.semantic.info.subtle,
+                colorInfoBorder: colors.semantic.info.main,
+                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,
+                // Generous rounding
+                borderRadiusLG: constants.radius.modal,
+            },
+            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],
+                footerPaddingInline: constants.spacing[6],
+            },
+            Notification: {
+                colorBgElevated: colors.surface.overlay,
+                colorText: colors.text.primary,
+                colorTextHeading: colors.text.primary,
+                // Shadow on notification
+                boxShadow: constants.shadow.popover,
+                borderRadiusLG: constants.radius.card,
+                padding: constants.spacing[4],
+            },
+            Message: {
+                contentBg: colors.surface.overlay,
+                contentPadding: `${constants.spacing[2]}px ${constants.spacing[4]}px`,
+                // Shadow on message
+                boxShadow: constants.shadow.popover,
+                borderRadiusLG: constants.radius.card,
+            },
+            Popconfirm: {
+                colorBgElevated: colors.surface.overlay,
+                colorText: colors.text.primary,
+                colorTextHeading: colors.text.primary,
+                boxShadowSecondary: constants.shadow.popover,
+                borderRadiusLG: constants.radius.card,
+            },
+            Progress: {
+                defaultColor: colors.accent.default,
+                colorSuccess: colors.semantic.success.main,
+                colorError: colors.semantic.error.main,
+                remainingColor: colors.neutral[3],
+                borderRadius: 100,
+                lineBorderRadius: 100,
+            },
+            Result: {
+                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[3],
+                borderRadiusSM: constants.radius.sm,
+            },
+            Spin: {
+                colorPrimary: colors.accent.default,
+            },
+            // ========================================
+            // 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.accent.default,
+                darkItemSelectedColor: colors.absolute.white,
+                itemBorderRadius: constants.radius.sm,
+                itemMarginInline: constants.spacing[1],
+                itemPaddingInline: constants.spacing[3],
+            },
+            Breadcrumb: {
+                itemColor: colors.text.secondary,
+                lastItemColor: colors.text.primary,
+                linkColor: colors.accent.default,
+                linkHoverColor: colors.accent.hover,
+                separatorColor: colors.text.tertiary,
+                separatorMargin: constants.spacing[2],
+                fontSize: constants.typography.fontSize.sm,
+            },
+            Pagination: {
+                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.accent.default,
+                colorText: colors.text.secondary,
+                colorTextDescription: colors.text.tertiary,
+                colorFillContent: colors.neutral[3],
+            },
+            Tabs: {
+                colorPrimary: colors.accent.default,
+                itemColor: colors.text.secondary,
+                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.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
+                boxShadowSecondary: constants.shadow.popover,
+                borderRadiusLG: constants.radius.card,
+                paddingBlock: constants.spacing[1],
+            },
+            // ========================================
+            // LAYOUT
+            // ========================================
+            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],
+            },
+            // ========================================
+            // OVERLAYS
+            // ========================================
+            Typography: {
+                colorText: colors.text.primary,
+                colorTextSecondary: colors.text.secondary,
+                colorLink: colors.accent.default,
+                colorLinkHover: colors.accent.hover,
+                colorLinkActive: colors.accent.active,
+                titleMarginBottom: constants.spacing[2],
+                titleMarginTop: constants.spacing[4],
+            },
+            Tooltip: {
+                colorBgSpotlight: colors.neutral[8],
+                colorTextLightSolid: colors.text.inverse,
+                // Subtle shadow
+                boxShadowSecondary: constants.shadow.tooltip,
+                borderRadius: constants.radius.sm,
+            },
+            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,
+                colorBorder: colors.border.default,
+                actionsColor: colors.accent.default,
+            },
+            Tour: {
+                colorBgElevated: colors.surface.overlay,
+                colorPrimary: colors.accent.default,
+                colorText: colors.text.primary,
+                boxShadowSecondary: constants.shadow.popover,
+                borderRadius: constants.radius.card,
+            },
+            FloatButton: {
+                colorBgElevated: colors.surface.overlay,
+                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,
+                borderRadiusLG: constants.radius.lg,
+                fontWeightStrong: constants.typography.fontWeight.medium,
+            },
+            Mentions: {
+                colorBgElevated: colors.surface.overlay,
+                controlItemBgHover: colors.surface.interactive,
+                controlItemBgActive: colors.surface.selected,
+                boxShadowSecondary: constants.shadow.popover,
+            },
+            Cascader: {
+                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,
+                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],
+                titleMarginBottom: constants.spacing[1],
+            },
+        },
+    };
+};