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

package/dist/theme/theme-config.js

@@ -1,13 +1,8 @@
-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) => {
+export const buildAntDTheme = (colors, constants) => {
     const isDark = colors.mode === 'dark';
-    const componentShadow = isDark ? buildDarkModeShadows() : componentShadows;
     return {
         token: {
             // ============================================
@@ -94,40 +89,40 @@ export const buildAntDTheme = (colors) => {
             // ============================================
             // 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,
+            fontFamily: constants.typography.fontFamily.base,
+            fontFamilyCode: constants.typography.fontFamily.mono,
+            fontSize: constants.typography.fontSize.base,
+            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,
+            fontSizeSM: constants.typography.fontSize.sm,
+            fontSizeLG: constants.typography.fontSize.lg,
+            fontSizeXL: constants.typography.fontSize.xl,
+            fontWeightStrong: constants.typography.fontWeight.semibold,
+            lineHeight: constants.typography.lineHeight.base,
+            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,
+            lineHeightLG: constants.typography.lineHeight.relaxed,
+            lineHeightSM: constants.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],
+            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],
             controlHeight: 40,
             controlHeightLG: 48,
             controlHeightSM: 32,
@@ -135,16 +130,16 @@ export const buildAntDTheme = (colors) => {
             // ============================================
             // BORDER RADIUS
             // ============================================
-            borderRadius: radius.base,
-            borderRadiusLG: radius.md,
-            borderRadiusSM: radius.sm,
-            borderRadiusXS: radius.sm,
+            borderRadius: constants.radius.base,
+            borderRadiusLG: constants.radius.md,
+            borderRadiusSM: constants.radius.sm,
+            borderRadiusXS: constants.radius.sm,
             // ============================================
             // SHADOWS
             // ============================================
-            boxShadow: shadows.none,
-            boxShadowSecondary: shadows.none,
-            boxShadowTertiary: componentShadow.card,
+            boxShadow: constants.shadow.none,
+            boxShadowSecondary: constants.shadow.none,
+            boxShadowTertiary: constants.shadow.card,
             // ============================================
             // MOTION
             // ============================================
@@ -196,18 +191,14 @@ export const buildAntDTheme = (colors) => {
                 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],
+                paddingContentHorizontal: constants.spacing[4],
+                paddingContentVertical: constants.spacing[2],
                 // Styling
-                borderRadius: componentRadius.button,
-                borderRadiusLG: componentRadius.button,
-                borderRadiusSM: componentRadius.button,
-                fontWeight: typography.fontWeight.medium,
-                fontSize: typography.fontSize.base,
+                borderRadius: constants.radius.button,
+                borderRadiusLG: constants.radius.button,
+                borderRadiusSM: constants.radius.button,
+                fontWeight: constants.typography.fontWeight.medium,
+                fontSize: constants.typography.fontSize.base,
             },
             // ========================================
             // INPUT & FORM CONTROLS
@@ -224,15 +215,12 @@ export const buildAntDTheme = (colors) => {
                 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],
-                paddingInlineLG: spacing[4],
-                borderRadius: componentRadius.input,
-                borderRadiusLG: componentRadius.input,
-                borderRadiusSM: componentRadius.input,
+                paddingBlock: constants.spacing[2],
+                paddingInline: constants.spacing[3],
+                paddingInlineLG: constants.spacing[4],
+                borderRadius: constants.radius.input,
+                borderRadiusLG: constants.radius.input,
+                borderRadiusSM: constants.radius.input,
             },
             InputNumber: {
                 colorBgContainer: colors.surface.card,
@@ -242,8 +230,7 @@ export const buildAntDTheme = (colors) => {
                 colorIcon: colors.text.tertiary,
                 colorIconHover: colors.text.secondary,
                 activeShadow: `0 0 0 2px ${colors.semantic.info.subtle}`,
-                controlHeight: 40,
-                borderRadius: componentRadius.input,
+                borderRadius: constants.radius.input,
                 handleVisible: true,
             },
             Select: {
@@ -260,13 +247,10 @@ export const buildAntDTheme = (colors) => {
                 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,
+                borderRadius: constants.radius.input,
+                borderRadiusLG: constants.radius.input,
+                borderRadiusSM: constants.radius.input,
+                boxShadowSecondary: constants.shadow.popover,
             },
             DatePicker: {
                 colorBgContainer: colors.surface.card,
@@ -279,8 +263,7 @@ export const buildAntDTheme = (colors) => {
                 cellHoverBg: colors.surface.interactive,
                 cellActiveWithRangeBg: colors.semantic.info.subtle,
                 colorPrimary: colors.link.default,
-                controlHeight: 40,
-                borderRadius: componentRadius.input,
+                borderRadius: constants.radius.input,
             },
             Checkbox: {
                 colorPrimary: colors.link.default,
@@ -289,7 +272,7 @@ export const buildAntDTheme = (colors) => {
                 colorBgContainer: colors.surface.card,
                 colorIcon: colors.text.tertiary,
                 colorIconHover: colors.text.secondary,
-                borderRadiusSM: radius.sm,
+                borderRadiusSM: constants.radius.sm,
             },
             Radio: {
                 colorPrimary: colors.link.default,
@@ -298,7 +281,6 @@ export const buildAntDTheme = (colors) => {
                 colorBgContainer: colors.surface.card,
                 colorIcon: colors.text.tertiary,
                 colorIconHover: colors.text.secondary,
-                dotSize: 8,
             },
             Switch: {
                 colorPrimary: colors.link.default,
@@ -307,7 +289,6 @@ export const buildAntDTheme = (colors) => {
                 colorTextTertiary: colors.text.tertiary,
                 colorIcon: colors.text.tertiary,
                 colorIconHover: colors.text.secondary,
-                handleSize: 18,
             },
             Slider: {
                 colorPrimary: colors.link.default,
@@ -326,12 +307,11 @@ export const buildAntDTheme = (colors) => {
             },
             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`,
+                labelFontSize: constants.typography.fontSize.base,
+                labelColonMarginInlineEnd: constants.spacing[2],
+                labelColonMarginInlineStart: constants.spacing[1],
+                itemMarginBottom: constants.spacing[4],
+                verticalLabelPadding: `0 0 ${constants.spacing[2]}px`,
                 labelRequiredMarkColor: colors.semantic.error.main,
                 colorIcon: colors.text.tertiary,
                 colorIconHover: colors.text.secondary,
@@ -353,13 +333,13 @@ export const buildAntDTheme = (colors) => {
                 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,
+                cellPaddingBlock: constants.spacing[4],
+                cellPaddingInline: constants.spacing[4],
+                cellPaddingBlockSM: constants.spacing[2],
+                cellPaddingInlineSM: constants.spacing[3],
+                borderRadius: constants.radius.card,
+                borderRadiusLG: constants.radius.card,
+                headerBorderRadius: constants.radius.card,
                 footerBg: colors.surface.page,
             },
             Descriptions: {
@@ -367,42 +347,40 @@ export const buildAntDTheme = (colors) => {
                 titleColor: colors.text.primary,
                 contentColor: colors.text.primary,
                 extraColor: colors.text.secondary,
-                itemPaddingBottom: spacing[4],
-                colonMarginLeft: spacing[1],
-                colonMarginRight: spacing[2],
+                itemPaddingBottom: constants.spacing[4],
+                colonMarginLeft: constants.spacing[1],
+                colonMarginRight: constants.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,
+                boxShadowTertiary: constants.shadow.card,
+                borderRadius: constants.radius.card,
+                borderRadiusLG: constants.radius.card,
+                padding: constants.spacing[4],
+                paddingLG: constants.spacing[6],
             },
             Statistic: {
-                titleFontSize: typography.fontSize.base,
-                contentFontSize: typography.fontSize['4xl'],
+                titleFontSize: constants.typography.fontSize.base,
+                contentFontSize: constants.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],
+                itemPaddingBottom: constants.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,
+                borderRadiusSM: constants.radius.sm,
+                fontSize: constants.typography.fontSize.sm,
+                fontSizeSM: constants.typography.fontSize.xs,
             },
             Badge: {
                 colorBorderBg: colors.surface.card,
@@ -410,21 +388,15 @@ export const buildAntDTheme = (colors) => {
                 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,
+                textFontSize: constants.typography.fontSize.xs,
             },
             Avatar: {
                 colorBgContainer: colors.neutral[2],
                 colorText: colors.text.secondary,
                 colorTextLightSolid: colors.text.inverse,
-                containerSize: 32,
-                containerSizeLG: 40,
-                containerSizeSM: 24,
-                borderRadius: componentRadius.avatar,
+                borderRadius: constants.radius.avatar,
                 groupOverlapping: -8,
-                groupSpace: spacing[1],
+                groupSpace: constants.spacing[1],
             },
             Calendar: {
                 colorBgContainer: colors.surface.card,
@@ -432,28 +404,24 @@ export const buildAntDTheme = (colors) => {
                 fullBg: colors.surface.card,
                 fullPanelBg: colors.surface.card,
                 itemActiveBg: colors.semantic.info.subtle,
-                borderRadius: componentRadius.card,
+                borderRadius: constants.radius.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,
+                headerPadding: `${constants.spacing[3]}px ${constants.spacing[4]}px`,
+                contentPadding: `${constants.spacing[4]}px ${constants.spacing[4]}px`,
+                borderRadiusLG: constants.radius.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,
+                borderRadius: constants.radius.sm,
             },
             // ========================================
             // FEEDBACK
@@ -471,9 +439,9 @@ export const buildAntDTheme = (colors) => {
                 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,
+                defaultPadding: `${constants.spacing[3]}px ${constants.spacing[4]}px`,
+                withDescriptionPadding: `${constants.spacing[4]}px ${constants.spacing[5]}px`,
+                borderRadiusLG: constants.radius.card,
             },
             Modal: {
                 contentBg: colors.surface.overlay,
@@ -481,36 +449,36 @@ export const buildAntDTheme = (colors) => {
                 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,
+                borderRadiusLG: constants.radius.modal,
+                boxShadow: constants.shadow.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],
+                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,
-                borderRadiusLG: componentRadius.card,
-                boxShadow: componentShadow.dropdown,
-                padding: spacing[4],
-                paddingContentHorizontal: spacing[4],
+                borderRadiusLG: constants.radius.card,
+                boxShadow: constants.shadow.popover,
+                padding: constants.spacing[4],
+                paddingContentHorizontal: constants.spacing[4],
             },
             Message: {
                 contentBg: colors.surface.overlay,
-                contentPadding: `${spacing[2]}px ${spacing[4]}px`,
-                borderRadiusLG: componentRadius.card,
-                boxShadow: componentShadow.dropdown,
+                contentPadding: `${constants.spacing[2]}px ${constants.spacing[4]}px`,
+                borderRadiusLG: constants.radius.card,
+                boxShadow: constants.shadow.popover,
             },
             Popconfirm: {
                 colorBgElevated: colors.surface.overlay,
                 colorWarning: colors.semantic.warning.main,
-                borderRadiusLG: componentRadius.card,
-                boxShadowSecondary: componentShadow.dropdown,
+                borderRadiusLG: constants.radius.card,
+                boxShadowSecondary: constants.shadow.popover,
             },
             Progress: {
                 defaultColor: colors.link.default,
@@ -522,15 +490,15 @@ export const buildAntDTheme = (colors) => {
                 lineBorderRadius: 100,
             },
             Result: {
-                titleFontSize: typography.fontSize['3xl'],
-                subtitleFontSize: typography.fontSize.base,
-                iconFontSize: typography.fontSize['5xl'],
-                extraMargin: `${spacing[8]}px 0 0`,
+                titleFontSize: constants.typography.fontSize['3xl'],
+                subtitleFontSize: constants.typography.fontSize.base,
+                iconFontSize: constants.typography.fontSize['5xl'],
+                extraMargin: `${constants.spacing[8]}px 0 0`,
             },
             Skeleton: {
                 colorFill: colors.neutral[2],
                 colorFillContent: colors.neutral[1],
-                borderRadiusSM: radius.sm,
+                borderRadiusSM: constants.radius.sm,
             },
             Spin: {
                 colorPrimary: colors.link.default,
@@ -558,12 +526,8 @@ export const buildAntDTheme = (colors) => {
                 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,
+                itemBorderRadius: constants.radius.input,
+                itemPaddingInline: constants.spacing[4],
             },
             Breadcrumb: {
                 itemColor: colors.text.secondary,
@@ -571,9 +535,9 @@ export const buildAntDTheme = (colors) => {
                 linkColor: colors.link.default,
                 linkHoverColor: colors.link.hover,
                 separatorColor: colors.text.tertiary,
-                separatorMargin: spacing[2],
-                iconFontSize: typography.fontSize.base,
-                fontSize: typography.fontSize.base,
+                separatorMargin: constants.spacing[2],
+                iconFontSize: constants.typography.fontSize.base,
+                fontSize: constants.typography.fontSize.base,
             },
             Pagination: {
                 colorPrimary: colors.link.default,
@@ -583,18 +547,13 @@ export const buildAntDTheme = (colors) => {
                 itemBg: colors.surface.card,
                 itemLinkBg: colors.surface.card,
                 itemInputBg: colors.surface.card,
-                itemSize: 32,
-                itemSizeSM: 24,
-                borderRadius: radius.sm,
+                borderRadius: constants.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,
@@ -604,26 +563,26 @@ export const buildAntDTheme = (colors) => {
                 itemActiveColor: colors.link.default,
                 inkBarColor: colors.link.default,
                 colorBorderSecondary: colors.border.default,
-                titleFontSize: typography.fontSize.base,
-                titleFontSizeLG: typography.fontSize.lg,
-                titleFontSizeSM: typography.fontSize.sm,
+                titleFontSize: constants.typography.fontSize.base,
+                titleFontSizeLG: constants.typography.fontSize.lg,
+                titleFontSizeSM: constants.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`,
+                cardPadding: `${constants.spacing[2]}px ${constants.spacing[4]}px`,
+                horizontalItemPadding: `${constants.spacing[3]}px 0`,
+                horizontalItemMargin: `0 ${constants.spacing[8]}px 0 0`,
             },
             Anchor: {
                 colorPrimary: colors.link.default,
-                linkPaddingBlock: spacing[1],
-                linkPaddingInlineStart: spacing[4],
+                linkPaddingBlock: constants.spacing[1],
+                linkPaddingInlineStart: constants.spacing[4],
             },
             Dropdown: {
                 colorBgElevated: colors.surface.overlay,
                 controlItemBgHover: colors.surface.interactive,
                 controlItemBgActive: colors.surface.selected,
-                boxShadowSecondary: componentShadow.dropdown,
-                paddingBlock: spacing[1],
-                borderRadiusLG: componentRadius.card,
+                boxShadowSecondary: constants.shadow.popover,
+                paddingBlock: constants.spacing[1],
+                borderRadiusLG: constants.radius.card,
             },
             // ========================================
             // LAYOUT
@@ -634,16 +593,12 @@ export const buildAntDTheme = (colors) => {
                 colorBgTrigger: colors.absolute.black,
                 siderBg: colors.absolute.black,
                 headerBg: colors.surface.card,
-                headerHeight: 64,
-                headerPadding: `0 ${spacing[6]}px`,
+                headerPadding: `0 ${constants.spacing[6]}px`,
                 footerBg: colors.surface.card,
-                footerPadding: `${spacing[6]}px ${spacing[12]}px`,
+                footerPadding: `${constants.spacing[6]}px ${constants.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,
@@ -651,8 +606,7 @@ export const buildAntDTheme = (colors) => {
             Divider: {
                 colorSplit: colors.border.subtle,
                 colorText: colors.text.tertiary,
-                orientationMargin: 0.05,
-                verticalMarginInline: spacing[2],
+                verticalMarginInline: constants.spacing[2],
             },
             // ========================================
             // OTHER
@@ -664,31 +618,31 @@ export const buildAntDTheme = (colors) => {
                 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,
+                titleMarginBottom: constants.spacing[2],
+                titleMarginTop: constants.spacing[4],
+                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,
+                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,
             },
             Tooltip: {
                 colorBgSpotlight: colors.neutral[4],
                 colorTextLightSolid: colors.text.inverse,
-                borderRadius: radius.sm,
-                boxShadowSecondary: componentShadow.tooltip,
+                borderRadius: constants.radius.sm,
+                boxShadowSecondary: constants.shadow.tooltip,
             },
             Popover: {
                 colorBgElevated: colors.surface.overlay,
                 colorText: colors.text.primary,
-                borderRadiusLG: componentRadius.card,
-                boxShadowSecondary: componentShadow.dropdown,
-                padding: spacing[3],
+                borderRadiusLG: constants.radius.card,
+                boxShadowSecondary: constants.shadow.popover,
+                padding: constants.spacing[3],
             },
             Image: {
                 previewOperationColor: colors.absolute.white,
@@ -708,14 +662,14 @@ export const buildAntDTheme = (colors) => {
             Tour: {
                 colorBgElevated: colors.surface.overlay,
                 colorPrimary: colors.link.default,
-                borderRadius: componentRadius.card,
-                boxShadowSecondary: componentShadow.dropdown,
+                borderRadius: constants.radius.card,
+                boxShadowSecondary: constants.shadow.popover,
             },
             FloatButton: {
                 colorBgElevated: colors.surface.overlay,
                 colorPrimary: colors.link.default,
-                borderRadiusLG: componentRadius.avatar,
-                boxShadow: componentShadow.dropdown,
+                borderRadiusLG: constants.radius.avatar,
+                boxShadow: constants.shadow.popover,
             },
             Segmented: {
                 colorBgLayout: colors.neutral[2],
@@ -724,8 +678,8 @@ export const buildAntDTheme = (colors) => {
                 itemHoverBg: colors.surface.interactive,
                 itemSelectedBg: colors.surface.card,
                 itemSelectedColor: colors.text.primary,
-                borderRadius: radius.base,
-                borderRadiusSM: radius.sm,
+                borderRadius: constants.radius.base,
+                borderRadiusSM: constants.radius.sm,
             },
             Mentions: {
                 colorBgContainer: colors.surface.card,
@@ -733,12 +687,12 @@ export const buildAntDTheme = (colors) => {
                 colorBorder: colors.border.default,
                 controlItemBgHover: colors.surface.interactive,
                 controlItemBgActive: colors.surface.selected,
-                boxShadowSecondary: componentShadow.dropdown,
+                boxShadowSecondary: constants.shadow.popover,
             },
             Transfer: {
                 colorBgContainer: colors.surface.card,
                 colorBorder: colors.border.default,
-                itemPaddingBlock: spacing[1],
+                itemPaddingBlock: constants.spacing[1],
             },
             Cascader: {
                 colorBgContainer: colors.surface.card,
@@ -761,20 +715,20 @@ export const buildAntDTheme = (colors) => {
             Empty: {
                 colorText: colors.text.secondary,
                 colorTextDescription: colors.text.tertiary,
-                fontSize: typography.fontSize.base,
+                fontSize: constants.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`,
+                itemPadding: `${constants.spacing[3]}px ${constants.spacing[6]}px`,
+                itemPaddingSM: `${constants.spacing[2]}px ${constants.spacing[4]}px`,
+                itemPaddingLG: `${constants.spacing[4]}px ${constants.spacing[6]}px`,
                 headerBg: 'transparent',
                 footerBg: 'transparent',
-                emptyTextPadding: spacing[4],
-                metaMarginBottom: spacing[2],
-                avatarMarginRight: spacing[4],
-                titleMarginBottom: spacing[1],
+                emptyTextPadding: constants.spacing[4],
+                metaMarginBottom: constants.spacing[2],
+                avatarMarginRight: constants.spacing[4],
+                titleMarginBottom: constants.spacing[1],
             },
         },
     };