@temboplus/frontend-react-core 0.1.3-beta.38 → 0.1.3-beta.39

package/dist/theme/theme-config.js

@@ -1,735 +0,0 @@
-/**
- * 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],
-            },
-        },
-    };
-};