@temboplus/frontend-react-core 0.1.3-beta.1 → 0.1.3-beta.11

package/dist/theme/theme-config.js

@@ -0,0 +1,762 @@
+import { spacing, componentSpacing } from './tokens/spacing.js';
+import { typography } from './tokens/typography.js';
+import { radius, componentRadius } from './tokens/radius.js';
+import { buildDarkModeShadows, componentShadows, shadows } from './tokens/shadow.js';
+/**
+ * Build comprehensive Ant Design theme from Tembo tokens
+ */
+export const buildAntDTheme = (colors) => {
+    const isDark = colors.mode === 'dark';
+    const componentShadow = isDark ? buildDarkModeShadows() : componentShadows;
+    return {
+        token: {
+            // ============================================
+            // COLOR TOKENS
+            // ============================================
+            // Primary (monochrome - using darkest neutral)
+            colorPrimary: colors.neutral[4],
+            colorPrimaryHover: colors.text.secondary,
+            colorPrimaryActive: colors.neutral[4],
+            colorPrimaryBg: colors.neutral[2],
+            colorPrimaryBgHover: colors.surface.interactive,
+            colorPrimaryBorder: colors.neutral[4],
+            colorPrimaryBorderHover: colors.neutral[4],
+            colorPrimaryText: colors.neutral[4],
+            colorPrimaryTextHover: colors.text.secondary,
+            colorPrimaryTextActive: colors.neutral[4],
+            // Links (standard web colors)
+            colorLink: colors.link.default,
+            colorLinkHover: colors.link.hover,
+            colorLinkActive: colors.link.active,
+            // Text
+            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.interactive,
+            // Borders
+            colorBorder: colors.border.default,
+            colorBorderBg: colors.surface.card,
+            colorBorderSecondary: colors.border.subtle,
+            colorSplit: colors.border.subtle,
+            // Fill (backgrounds of components)
+            colorFill: colors.neutral[2],
+            colorFillSecondary: colors.neutral[2],
+            colorFillTertiary: colors.neutral[2],
+            colorFillQuaternary: colors.surface.interactive,
+            // Semantic colors
+            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: typography.fontFamily.base,
+            fontFamilyCode: typography.fontFamily.mono,
+            fontSize: typography.fontSize.base,
+            fontSizeHeading1: typography.fontSize['5xl'],
+            fontSizeHeading2: typography.fontSize['4xl'],
+            fontSizeHeading3: typography.fontSize['3xl'],
+            fontSizeHeading4: typography.fontSize['2xl'],
+            fontSizeHeading5: typography.fontSize.xl,
+            fontSizeSM: typography.fontSize.sm,
+            fontSizeLG: typography.fontSize.lg,
+            fontSizeXL: typography.fontSize.xl,
+            fontWeightStrong: typography.fontWeight.semibold,
+            lineHeight: typography.lineHeight.base,
+            lineHeightHeading1: typography.lineHeight.tight,
+            lineHeightHeading2: typography.lineHeight.tight,
+            lineHeightHeading3: typography.lineHeight.tight,
+            lineHeightHeading4: typography.lineHeight.tight,
+            lineHeightHeading5: typography.lineHeight.tight,
+            lineHeightLG: typography.lineHeight.relaxed,
+            lineHeightSM: typography.lineHeight.base,
+            // ============================================
+            // SPACING & SIZING
+            // ============================================
+            padding: spacing[4],
+            paddingXS: spacing[2],
+            paddingSM: spacing[3],
+            paddingLG: spacing[5],
+            paddingXL: spacing[6],
+            margin: spacing[4],
+            marginXS: spacing[2],
+            marginSM: spacing[3],
+            marginLG: spacing[5],
+            marginXL: spacing[6],
+            marginXXL: spacing[8],
+            controlHeight: 40,
+            controlHeightLG: 48,
+            controlHeightSM: 32,
+            controlHeightXS: 24,
+            // ============================================
+            // BORDER RADIUS
+            // ============================================
+            borderRadius: radius.base,
+            borderRadiusLG: radius.md,
+            borderRadiusSM: radius.sm,
+            borderRadiusXS: radius.sm,
+            // ============================================
+            // SHADOWS
+            // ============================================
+            boxShadow: shadows.none,
+            boxShadowSecondary: shadows.none,
+            boxShadowTertiary: componentShadow.card,
+            // ============================================
+            // MOTION
+            // ============================================
+            motionUnit: 0.1,
+            motionBase: 0,
+            motionEaseInOut: 'cubic-bezier(0.4, 0, 0.2, 1)',
+            motionEaseOut: 'cubic-bezier(0.0, 0, 0.2, 1)',
+            motionEaseInBack: 'cubic-bezier(0.4, 0, 1, 1)',
+            // ============================================
+            // Z-INDEX
+            // ============================================
+            zIndexBase: 0,
+            zIndexPopupBase: 1000,
+        },
+        components: {
+            // ========================================
+            // BUTTON - Monochrome with clear states
+            // ========================================
+            Button: {
+                // Primary button (inverted monochrome)
+                colorPrimary: colors.neutral[4],
+                colorPrimaryHover: colors.text.secondary,
+                colorPrimaryActive: colors.neutral[4],
+                colorPrimaryBorder: colors.neutral[4],
+                primaryColor: colors.neutral[1],
+                primaryShadow: 'none',
+                // 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.interactive,
+                defaultActiveBorderColor: colors.neutral[4],
+                defaultActiveColor: colors.text.primary,
+                defaultShadow: 'none',
+                // Text button
+                textHoverBg: colors.surface.interactive,
+                textTextColor: colors.text.primary,
+                textTextHoverColor: colors.text.primary,
+                // Link button
+                linkHoverBg: 'transparent',
+                colorLink: colors.link.default,
+                colorLinkHover: colors.link.hover,
+                colorLinkActive: colors.link.active,
+                // Danger button
+                dangerColor: colors.semantic.error.main,
+                colorErrorHover: colors.semantic.error.main,
+                colorErrorActive: colors.semantic.error.main,
+                dangerShadow: 'none',
+                // Sizing
+                controlHeight: 40,
+                controlHeightLG: 48,
+                controlHeightSM: 32,
+                paddingContentHorizontal: spacing[4],
+                paddingContentVertical: spacing[2],
+                // Styling
+                borderRadius: componentRadius.button,
+                borderRadiusLG: componentRadius.button,
+                borderRadiusSM: componentRadius.button,
+                fontWeight: typography.fontWeight.medium,
+                fontSize: typography.fontSize.base,
+            },
+            // ========================================
+            // INPUT & FORM CONTROLS
+            // ========================================
+            Input: {
+                colorBgContainer: colors.surface.card,
+                colorBorder: colors.border.default,
+                colorText: colors.text.primary,
+                colorTextPlaceholder: colors.text.tertiary,
+                hoverBorderColor: colors.border.strong,
+                activeBorderColor: colors.link.default,
+                activeShadow: `0 0 0 2px ${colors.semantic.info.subtle}`,
+                errorActiveShadow: `0 0 0 2px ${colors.semantic.error.subtle}`,
+                warningActiveShadow: `0 0 0 2px ${colors.semantic.warning.subtle}`,
+                controlHeight: 40,
+                controlHeightLG: 48,
+                controlHeightSM: 32,
+                paddingBlock: spacing[2],
+                paddingInline: spacing[3],
+                borderRadius: componentRadius.input,
+                borderRadiusLG: componentRadius.input,
+                borderRadiusSM: componentRadius.input,
+            },
+            InputNumber: {
+                colorBgContainer: colors.surface.card,
+                colorBorder: colors.border.default,
+                hoverBorderColor: colors.border.strong,
+                activeBorderColor: colors.link.default,
+                activeShadow: `0 0 0 2px ${colors.semantic.info.subtle}`,
+                controlHeight: 40,
+                borderRadius: componentRadius.input,
+                handleVisible: true,
+            },
+            Select: {
+                colorBgContainer: colors.surface.card,
+                colorBgElevated: colors.surface.overlay,
+                colorBorder: colors.border.default,
+                colorText: colors.text.primary,
+                colorTextPlaceholder: colors.text.tertiary,
+                hoverBorderColor: colors.border.strong,
+                controlItemBgHover: colors.surface.interactive,
+                activeBorderColor: colors.link.default,
+                optionSelectedBg: colors.surface.selected,
+                optionSelectedColor: colors.text.primary,
+                optionActiveBg: colors.surface.interactive,
+                controlHeight: 40,
+                controlHeightLG: 48,
+                controlHeightSM: 32,
+                borderRadius: componentRadius.input,
+                borderRadiusLG: componentRadius.input,
+                borderRadiusSM: componentRadius.input,
+                boxShadowSecondary: componentShadow.dropdown,
+            },
+            DatePicker: {
+                colorBgContainer: colors.surface.card,
+                colorBorder: colors.border.default,
+                hoverBorderColor: colors.border.strong,
+                activeBorderColor: colors.link.default,
+                activeShadow: `0 0 0 2px ${colors.semantic.info.subtle}`,
+                cellHoverBg: colors.surface.interactive,
+                cellActiveWithRangeBg: colors.semantic.info.subtle,
+                colorPrimary: colors.link.default,
+                controlHeight: 40,
+                borderRadius: componentRadius.input,
+            },
+            Checkbox: {
+                colorPrimary: colors.link.default,
+                colorPrimaryHover: colors.link.hover,
+                colorBorder: colors.border.default,
+                colorBgContainer: colors.surface.card,
+                borderRadiusSM: radius.sm,
+            },
+            Radio: {
+                colorPrimary: colors.link.default,
+                colorPrimaryHover: colors.link.hover,
+                colorBorder: colors.border.default,
+                colorBgContainer: colors.surface.card,
+                dotSize: 8,
+            },
+            Switch: {
+                colorPrimary: colors.link.default,
+                colorPrimaryHover: colors.link.hover,
+                colorTextQuaternary: colors.text.disabled,
+                colorTextTertiary: colors.text.tertiary,
+                handleSize: 18,
+            },
+            Slider: {
+                colorPrimary: colors.link.default,
+                colorPrimaryBorder: colors.link.default,
+                colorPrimaryBorderHover: colors.link.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,
+                dotBorderColor: colors.border.default,
+                dotActiveBorderColor: colors.link.default,
+            },
+            Form: {
+                labelColor: colors.text.primary,
+                labelFontSize: typography.fontSize.base,
+                labelHeight: 32,
+                labelColonMarginInlineEnd: spacing[2],
+                labelColonMarginInlineStart: spacing[1],
+                itemMarginBottom: componentSpacing.form.itemGap,
+                verticalLabelPadding: `0 0 ${componentSpacing.form.labelGap}px`,
+                labelRequiredMarkColor: colors.semantic.error.main,
+            },
+            // ========================================
+            // DATA DISPLAY
+            // ========================================
+            Table: {
+                colorBgContainer: colors.surface.card,
+                colorText: colors.text.primary,
+                colorTextHeading: colors.text.primary,
+                headerBg: colors.surface.page,
+                headerColor: colors.text.secondary,
+                headerSortActiveBg: colors.surface.interactive,
+                headerSortHoverBg: colors.surface.interactive,
+                headerSplitColor: colors.border.subtle,
+                borderColor: colors.border.subtle,
+                rowHoverBg: colors.surface.interactive,
+                rowSelectedBg: colors.surface.selected,
+                rowSelectedHoverBg: colors.surface.selected,
+                rowExpandedBg: colors.surface.nested,
+                cellPaddingBlock: spacing[4],
+                cellPaddingInline: spacing[4],
+                cellPaddingBlockSM: spacing[2],
+                cellPaddingInlineSM: spacing[3],
+                borderRadius: componentRadius.card,
+                borderRadiusLG: componentRadius.card,
+                headerBorderRadius: componentRadius.card,
+                footerBg: colors.surface.page,
+            },
+            Descriptions: {
+                labelBg: colors.surface.page,
+                titleColor: colors.text.primary,
+                contentColor: colors.text.primary,
+                extraColor: colors.text.secondary,
+                itemPaddingBottom: spacing[4],
+                colonMarginLeft: spacing[1],
+                colonMarginRight: spacing[2],
+            },
+            Card: {
+                colorBgContainer: colors.surface.card,
+                colorBorderSecondary: colors.border.default,
+                colorTextHeading: colors.text.primary,
+                colorTextDescription: colors.text.secondary,
+                boxShadowTertiary: componentShadow.card,
+                borderRadius: componentRadius.card,
+                borderRadiusLG: componentRadius.card,
+                paddingLG: componentSpacing.card.md,
+                padding: componentSpacing.card.sm,
+            },
+            Statistic: {
+                titleFontSize: typography.fontSize.base,
+                contentFontSize: typography.fontSize['4xl'],
+                colorTextHeading: colors.text.primary,
+                colorTextDescription: colors.text.secondary,
+            },
+            Timeline: {
+                tailColor: colors.border.default,
+                tailWidth: 2,
+                dotBg: colors.surface.card,
+                dotBorderWidth: 2,
+                itemPaddingBottom: spacing[5],
+            },
+            Tag: {
+                defaultBg: colors.neutral[2],
+                defaultColor: colors.text.primary,
+                colorBorder: colors.border.default,
+                colorText: colors.text.primary,
+                borderRadiusSM: componentRadius.badge,
+                fontSize: typography.fontSize.sm,
+                fontSizeSM: typography.fontSize.xs,
+            },
+            Badge: {
+                colorBorderBg: colors.surface.card,
+                colorError: colors.semantic.error.main,
+                colorSuccess: colors.semantic.success.main,
+                colorInfo: colors.semantic.info.main,
+                colorWarning: colors.semantic.warning.main,
+                textFontSize: typography.fontSize.xs,
+                textFontSizeSM: 10,
+                indicatorHeight: 6,
+                indicatorHeightSM: 6,
+            },
+            Avatar: {
+                colorBgContainer: colors.neutral[2],
+                colorText: colors.text.secondary,
+                colorTextLightSolid: colors.text.inverse,
+                containerSize: 32,
+                containerSizeLG: 40,
+                containerSizeSM: 24,
+                borderRadius: componentRadius.avatar,
+                groupOverlapping: -8,
+                groupSpace: spacing[1],
+            },
+            Calendar: {
+                colorBgContainer: colors.surface.card,
+                colorPrimary: colors.link.default,
+                fullBg: colors.surface.card,
+                fullPanelBg: colors.surface.card,
+                itemActiveBg: colors.semantic.info.subtle,
+                borderRadius: componentRadius.card,
+            },
+            Collapse: {
+                colorBgContainer: colors.surface.card,
+                colorBorder: colors.border.default,
+                headerBg: colors.surface.page,
+                headerPadding: `${spacing[3]}px ${spacing[4]}px`,
+                contentPadding: `${spacing[4]}px ${spacing[4]}px`,
+                borderRadiusLG: componentRadius.card,
+            },
+            Carousel: {
+                colorBgContainer: colors.surface.card,
+                dotWidth: 8,
+                dotHeight: 8,
+                dotActiveWidth: 24,
+            },
+            Tree: {
+                colorBgContainer: colors.surface.card,
+                nodeHoverBg: colors.surface.interactive,
+                nodeSelectedBg: colors.surface.selected,
+                titleHeight: 32,
+                borderRadius: radius.sm,
+            },
+            // ========================================
+            // FEEDBACK
+            // ========================================
+            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: `${spacing[3]}px ${spacing[4]}px`,
+                withDescriptionPadding: `${spacing[4]}px ${spacing[5]}px`,
+                borderRadiusLG: componentRadius.card,
+            },
+            Modal: {
+                contentBg: colors.surface.overlay,
+                headerBg: colors.surface.overlay,
+                footerBg: colors.surface.overlay,
+                titleColor: colors.text.primary,
+                colorBgMask: isDark ? 'rgba(0, 0, 0, 0.65)' : 'rgba(0, 0, 0, 0.45)',
+                borderRadiusLG: componentRadius.modal,
+                boxShadow: componentShadow.modal,
+            },
+            Drawer: {
+                colorBgElevated: colors.surface.overlay,
+                colorBgMask: isDark ? 'rgba(0, 0, 0, 0.65)' : 'rgba(0, 0, 0, 0.45)',
+                borderRadiusLG: componentRadius.modal,
+                footerPaddingBlock: spacing[4],
+                footerPaddingInline: spacing[6],
+            },
+            Notification: {
+                colorBgElevated: colors.surface.overlay,
+                colorText: colors.text.primary,
+                colorTextHeading: colors.text.primary,
+                borderRadiusLG: componentRadius.card,
+                boxShadow: componentShadow.dropdown,
+                padding: spacing[4],
+                paddingContentHorizontal: spacing[4],
+            },
+            Message: {
+                contentBg: colors.surface.overlay,
+                contentPadding: `${spacing[2]}px ${spacing[4]}px`,
+                borderRadiusLG: componentRadius.card,
+                boxShadow: componentShadow.dropdown,
+            },
+            Popconfirm: {
+                colorBgElevated: colors.surface.overlay,
+                colorWarning: colors.semantic.warning.main,
+                borderRadiusLG: componentRadius.card,
+                boxShadowSecondary: componentShadow.dropdown,
+            },
+            Progress: {
+                defaultColor: colors.link.default,
+                colorSuccess: colors.semantic.success.main,
+                colorError: colors.semantic.error.main,
+                remainingColor: colors.neutral[2],
+                circleTextColor: colors.text.primary,
+                borderRadius: 100,
+                lineBorderRadius: 100,
+            },
+            Result: {
+                titleFontSize: typography.fontSize['3xl'],
+                subtitleFontSize: typography.fontSize.base,
+                iconFontSize: typography.fontSize['5xl'],
+                extraMargin: `${spacing[8]}px 0 0`,
+            },
+            Skeleton: {
+                colorFill: colors.neutral[2],
+                colorFillContent: colors.neutral[1],
+                borderRadiusSM: radius.sm,
+            },
+            Spin: {
+                colorPrimary: colors.link.default,
+                dotSize: 20,
+                dotSizeLG: 32,
+                dotSizeSM: 14,
+            },
+            // ========================================
+            // NAVIGATION
+            // ========================================
+            Menu: {
+                itemBg: 'transparent',
+                itemColor: colors.text.primary,
+                itemHoverBg: colors.surface.interactive,
+                itemHoverColor: colors.text.primary,
+                itemSelectedBg: colors.surface.selected,
+                itemSelectedColor: colors.text.primary,
+                itemActiveBg: colors.surface.selected,
+                subMenuItemBg: 'transparent',
+                // Dark menu (for sidebars)
+                darkItemBg: colors.absolute.black,
+                darkSubMenuItemBg: colors.absolute.black,
+                darkItemColor: colors.absolute.white,
+                darkItemHoverBg: 'rgba(255, 255, 255, 0.08)',
+                darkItemHoverColor: colors.absolute.white,
+                darkItemSelectedBg: colors.link.default,
+                darkItemSelectedColor: colors.absolute.white,
+                itemBorderRadius: componentRadius.input,
+                itemHeight: 40,
+                itemPaddingInline: spacing[4],
+                iconSize: 16,
+                collapsedIconSize: 16,
+                collapsedWidth: 64,
+            },
+            Breadcrumb: {
+                itemColor: colors.text.secondary,
+                lastItemColor: colors.text.primary,
+                linkColor: colors.link.default,
+                linkHoverColor: colors.link.hover,
+                separatorColor: colors.text.tertiary,
+                separatorMargin: spacing[2],
+                iconFontSize: typography.fontSize.base,
+                fontSize: typography.fontSize.base,
+            },
+            Pagination: {
+                colorPrimary: colors.link.default,
+                colorPrimaryHover: colors.link.hover,
+                itemActiveBg: colors.link.default,
+                itemActiveBgDisabled: colors.neutral[2],
+                itemBg: colors.surface.card,
+                itemLinkBg: colors.surface.card,
+                itemInputBg: colors.surface.card,
+                itemSize: 32,
+                itemSizeSM: 24,
+                borderRadius: radius.sm,
+            },
+            Steps: {
+                colorPrimary: colors.link.default,
+                colorText: colors.text.secondary,
+                colorTextDescription: colors.text.tertiary,
+                colorBorderSecondary: colors.border.default,
+                dotSize: 8,
+                iconSize: 32,
+                iconSizeSM: 24,
+            },
+            Tabs: {
+                colorPrimary: colors.link.default,
+                itemColor: colors.text.secondary,
+                itemHoverColor: colors.link.hover,
+                itemSelectedColor: colors.link.default,
+                itemActiveColor: colors.link.default,
+                inkBarColor: colors.link.default,
+                colorBorderSecondary: colors.border.default,
+                titleFontSize: typography.fontSize.base,
+                titleFontSizeLG: typography.fontSize.lg,
+                titleFontSizeSM: typography.fontSize.sm,
+                cardBg: colors.surface.card,
+                cardPadding: `${spacing[2]}px ${spacing[4]}px`,
+                horizontalItemPadding: `${spacing[3]}px 0`,
+                horizontalItemMargin: `0 ${spacing[8]}px 0 0`,
+            },
+            Anchor: {
+                colorPrimary: colors.link.default,
+                linkPaddingBlock: spacing[1],
+                linkPaddingInlineStart: spacing[4],
+            },
+            Dropdown: {
+                colorBgElevated: colors.surface.overlay,
+                controlItemBgHover: colors.surface.interactive,
+                controlItemBgActive: colors.surface.selected,
+                boxShadowSecondary: componentShadow.dropdown,
+                paddingBlock: spacing[1],
+                borderRadiusLG: componentRadius.card,
+            },
+            // ========================================
+            // LAYOUT
+            // ========================================
+            Layout: {
+                colorBgBody: colors.surface.page,
+                colorBgHeader: colors.surface.card,
+                colorBgTrigger: colors.absolute.black,
+                siderBg: colors.absolute.black,
+                headerBg: colors.surface.card,
+                headerHeight: 64,
+                headerPadding: `0 ${spacing[6]}px`,
+                footerBg: colors.surface.card,
+                footerPadding: `${spacing[6]}px ${spacing[12]}px`,
+                bodyBg: colors.surface.page,
+                triggerHeight: 48,
+                triggerBg: colors.absolute.black,
+                triggerColor: colors.absolute.white,
+                zeroTriggerWidth: 36,
+                zeroTriggerHeight: 42,
+                lightSiderBg: colors.surface.card,
+                lightTriggerBg: colors.surface.card,
+                lightTriggerColor: colors.text.primary,
+            },
+            Divider: {
+                colorSplit: colors.border.subtle,
+                colorText: colors.text.tertiary,
+                orientationMargin: 0.05,
+                verticalMarginInline: spacing[2],
+            },
+            // ========================================
+            // OTHER
+            // ========================================
+            Typography: {
+                colorText: colors.text.primary,
+                colorTextSecondary: colors.text.secondary,
+                colorTextDescription: colors.text.tertiary,
+                colorLink: colors.link.default,
+                colorLinkHover: colors.link.hover,
+                colorLinkActive: colors.link.active,
+                titleMarginBottom: spacing[2],
+                titleMarginTop: spacing[4],
+                fontSizeHeading1: typography.fontSize['5xl'],
+                fontSizeHeading2: typography.fontSize['4xl'],
+                fontSizeHeading3: typography.fontSize['3xl'],
+                fontSizeHeading4: typography.fontSize['2xl'],
+                fontSizeHeading5: typography.fontSize.xl,
+                lineHeightHeading1: typography.lineHeight.tight,
+                lineHeightHeading2: typography.lineHeight.tight,
+                lineHeightHeading3: typography.lineHeight.tight,
+                lineHeightHeading4: typography.lineHeight.tight,
+                lineHeightHeading5: typography.lineHeight.tight,
+            },
+            Tooltip: {
+                colorBgSpotlight: colors.neutral[4],
+                colorTextLightSolid: colors.text.inverse,
+                borderRadius: radius.sm,
+                boxShadowSecondary: componentShadow.tooltip,
+            },
+            Popover: {
+                colorBgElevated: colors.surface.overlay,
+                colorText: colors.text.primary,
+                borderRadiusLG: componentRadius.card,
+                boxShadowSecondary: componentShadow.dropdown,
+                padding: spacing[3],
+            },
+            Image: {
+                previewOperationColor: colors.absolute.white,
+                previewOperationColorDisabled: 'rgba(255, 255, 255, 0.25)',
+            },
+            Upload: {
+                colorBorder: colors.border.default,
+                colorFillAlter: colors.surface.interactive,
+                colorText: colors.text.primary,
+                colorTextDescription: colors.text.secondary,
+                colorTextHeading: colors.text.primary,
+                actionsColor: colors.link.default,
+            },
+            QRCode: {
+                colorBgContainer: colors.surface.card,
+            },
+            Tour: {
+                colorBgElevated: colors.surface.overlay,
+                colorPrimary: colors.link.default,
+                borderRadius: componentRadius.card,
+                boxShadowSecondary: componentShadow.dropdown,
+            },
+            FloatButton: {
+                colorBgElevated: colors.surface.overlay,
+                colorPrimary: colors.link.default,
+                borderRadiusLG: componentRadius.avatar,
+                boxShadow: componentShadow.dropdown,
+            },
+            Segmented: {
+                colorBgLayout: colors.neutral[2],
+                itemColor: colors.text.primary,
+                itemHoverColor: colors.text.primary,
+                itemHoverBg: colors.surface.interactive,
+                itemSelectedBg: colors.surface.card,
+                itemSelectedColor: colors.text.primary,
+                borderRadius: radius.base,
+                borderRadiusSM: radius.sm,
+            },
+            Mentions: {
+                colorBgContainer: colors.surface.card,
+                colorBgElevated: colors.surface.overlay,
+                colorBorder: colors.border.default,
+                controlItemBgHover: colors.surface.interactive,
+                controlItemBgActive: colors.surface.selected,
+                boxShadowSecondary: componentShadow.dropdown,
+            },
+            Transfer: {
+                colorBgContainer: colors.surface.card,
+                colorBorder: colors.border.default,
+                itemPaddingBlock: spacing[1],
+            },
+            Cascader: {
+                colorBgContainer: colors.surface.card,
+                colorBgElevated: colors.surface.overlay,
+                colorBorder: colors.border.default,
+                controlItemBgHover: colors.surface.interactive,
+                optionSelectedBg: colors.surface.selected,
+            },
+            TreeSelect: {
+                colorBgContainer: colors.surface.card,
+                colorBgElevated: colors.surface.overlay,
+                colorBorder: colors.border.default,
+                nodeHoverBg: colors.surface.interactive,
+                nodeSelectedBg: colors.surface.selected,
+            },
+            Rate: {
+                colorFillContent: colors.neutral[3],
+                starColor: '#FADB14',
+            },
+            Empty: {
+                colorText: colors.text.secondary,
+                colorTextDescription: colors.text.tertiary,
+                fontSize: typography.fontSize.base,
+            },
+            List: {
+                colorBorder: colors.border.subtle,
+                colorSplit: colors.border.subtle,
+                itemPadding: `${spacing[3]}px ${spacing[6]}px`,
+                itemPaddingSM: `${spacing[2]}px ${spacing[4]}px`,
+                itemPaddingLG: `${spacing[4]}px ${spacing[6]}px`,
+                headerBg: 'transparent',
+                footerBg: 'transparent',
+                emptyTextPadding: spacing[4],
+                metaMarginBottom: spacing[2],
+                avatarMarginRight: spacing[4],
+                titleMarginBottom: spacing[1],
+            },
+        },
+    };
+};