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

package/dist/theme/theme-config.js

@@ -1,33 +1,36 @@
-import { buildDarkModeConstants } from './tokens/constants.js';
 /**
  * Build comprehensive Ant Design theme from Tembo tokens
+ *
+ * Design principles:
+ * - Set sizing/spacing once at token level, not per component
+ * - Components inherit global tokens unless they need specific overrides
+ * - Bold rounded corners (24px buttons/inputs, 28px cards, 32px modals)
+ * - Zero shadows on flat elements (buttons, inputs)
+ * - Gentle shadows on elevated elements (cards, modals, popovers)
  */
 export const buildAntDTheme = (colors, constants) => {
     const isDark = colors.mode === 'dark';
-    const componentShadow = isDark
-        ? buildDarkModeConstants().componentShadow
-        : constants.componentShadow;
     return {
         token: {
             // ============================================
             // COLOR TOKENS
             // ============================================
-            // Primary (monochrome - using darkest neutral)
-            colorPrimary: colors.neutral[4],
-            colorPrimaryHover: colors.text.secondary,
-            colorPrimaryActive: colors.neutral[4],
+            // Primary (monochrome - using action tokens implicitly)
+            colorPrimary: colors.action.default,
+            colorPrimaryHover: colors.action.hover,
+            colorPrimaryActive: colors.action.default,
             colorPrimaryBg: colors.neutral[2],
             colorPrimaryBgHover: colors.surface.interactive,
-            colorPrimaryBorder: colors.neutral[4],
-            colorPrimaryBorderHover: colors.neutral[4],
-            colorPrimaryText: colors.neutral[4],
+            colorPrimaryBorder: colors.action.default,
+            colorPrimaryBorderHover: colors.action.default,
+            colorPrimaryText: colors.action.default,
             colorPrimaryTextHover: colors.text.secondary,
-            colorPrimaryTextActive: colors.neutral[4],
-            // Links (standard web colors)
+            colorPrimaryTextActive: colors.action.default,
+            // Links (standard web blue + focus rings)
             colorLink: colors.link.default,
             colorLinkHover: colors.link.hover,
             colorLinkActive: colors.link.active,
-            // Text
+            // Text hierarchy
             colorText: colors.text.primary,
             colorTextSecondary: colors.text.secondary,
             colorTextTertiary: colors.text.tertiary,
@@ -47,12 +50,14 @@ export const buildAntDTheme = (colors, constants) => {
             colorBgMask: isDark ? 'rgba(0, 0, 0, 0.65)' : 'rgba(0, 0, 0, 0.45)',
             colorBgTextHover: colors.surface.interactive,
             colorBgTextActive: colors.surface.interactive,
+            // Disabled backgrounds
+            colorBgContainerDisabled: colors.action.disabled,
             // Borders
             colorBorder: colors.border.default,
             colorBorderBg: colors.surface.card,
             colorBorderSecondary: colors.border.subtle,
             colorSplit: colors.border.subtle,
-            // Fill (backgrounds of components)
+            // Fill colors
             colorFill: colors.neutral[2],
             colorFillSecondary: colors.neutral[2],
             colorFillTertiary: colors.neutral[2],
@@ -96,25 +101,25 @@ export const buildAntDTheme = (colors, constants) => {
             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,
-            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,
+            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,
-            lineHeightLG: constants.typography.lineHeight.relaxed,
-            lineHeightSM: constants.typography.lineHeight.base,
             // ============================================
-            // SPACING & SIZING
+            // SPACING & SIZING - SET ONCE HERE
             // ============================================
             padding: constants.spacing[4],
             paddingXS: constants.spacing[2],
@@ -127,193 +132,161 @@ export const buildAntDTheme = (colors, constants) => {
             marginLG: constants.spacing[5],
             marginXL: constants.spacing[6],
             marginXXL: constants.spacing[8],
-            controlHeight: 40,
-            controlHeightLG: 48,
-            controlHeightSM: 32,
-            controlHeightXS: 24,
+            // Control heights - SET ONCE, components inherit
+            controlHeight: 40, // Default height for all controls
+            controlHeightLG: 48, // Large variant
+            controlHeightSM: 32, // Small variant
+            controlHeightXS: 24, // Extra small variant
             // ============================================
-            // BORDER RADIUS
+            // BORDER RADIUS - Bold rounded corners
             // ============================================
-            borderRadius: constants.radius.base,
-            borderRadiusLG: constants.radius.md,
-            borderRadiusSM: constants.radius.sm,
-            borderRadiusXS: constants.radius.sm,
+            borderRadius: constants.radius.base, // 24px - default bold
+            borderRadiusLG: constants.radius.md, // 28px
+            borderRadiusSM: constants.radius.sm, // 12px
+            borderRadiusXS: constants.radius.sm, // 12px
             // ============================================
-            // SHADOWS
+            // SHADOWS - Zero on flat, gentle on elevated
             // ============================================
-            boxShadow: constants.shadow.none,
-            boxShadowSecondary: constants.shadow.none,
-            boxShadowTertiary: componentShadow.card,
+            boxShadow: constants.shadow.none, // Default: no shadow
+            boxShadowSecondary: constants.shadow.none, // No shadow
+            boxShadowTertiary: constants.shadow.card, // Gentle card shadow
             // ============================================
             // 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)',
+            motionEaseInOut: constants.transition.base,
+            motionEaseOut: constants.transition.base,
+            motionEaseInBack: constants.transition.base,
             // ============================================
             // Z-INDEX
             // ============================================
             zIndexBase: 0,
-            zIndexPopupBase: 1000,
+            zIndexPopupBase: constants.zIndex.dropdown,
         },
         components: {
             // ========================================
-            // BUTTON - Monochrome with clear states
+            // BUTTON - Monochrome actions, zero shadow
             // ========================================
             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)
+                // Action colors
+                colorPrimary: colors.action.default,
+                colorPrimaryHover: colors.action.hover,
+                colorPrimaryActive: colors.action.default,
+                colorPrimaryBorder: colors.action.default,
+                primaryColor: colors.action.contrast,
+                // Disabled
+                colorBgContainerDisabled: colors.action.disabled,
+                colorTextDisabled: colors.text.secondary,
+                borderColorDisabled: colors.action.disabled,
+                // Default button
                 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,
+                defaultActiveBorderColor: colors.action.default,
                 // 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,
+                // Zero shadows on all buttons
+                primaryShadow: 'none',
+                defaultShadow: 'none',
                 dangerShadow: 'none',
-                // Sizing
-                controlHeight: 40,
-                controlHeightLG: 48,
-                controlHeightSM: 32,
+                // Bold rounded corners
+                borderRadius: constants.radius.button,
+                borderRadiusLG: constants.radius.button,
+                borderRadiusSM: constants.radius.button,
+                // Padding
                 paddingContentHorizontal: constants.spacing[4],
                 paddingContentVertical: constants.spacing[2],
-                // Styling
-                borderRadius: constants.componentRadius.button,
-                borderRadiusLG: constants.componentRadius.button,
-                borderRadiusSM: constants.componentRadius.button,
+                // Typography
                 fontWeight: constants.typography.fontWeight.medium,
-                fontSize: constants.typography.fontSize.base,
+                // Heights inherited from token.controlHeight automatically ✅
             },
             // ========================================
-            // INPUT & FORM CONTROLS
+            // INPUTS - Bold rounded, zero shadow, blue focus ring
             // ========================================
             Input: {
+                // Colors
                 colorBgContainer: colors.surface.card,
                 colorBorder: colors.border.default,
                 colorText: colors.text.primary,
                 colorTextPlaceholder: colors.text.tertiary,
+                // Icons - subtle
                 colorIcon: colors.text.tertiary,
                 colorIconHover: colors.text.secondary,
+                // States
                 hoverBorderColor: colors.border.strong,
                 activeBorderColor: colors.link.default,
-                activeShadow: `0 0 0 2px ${colors.semantic.info.subtle}`,
+                activeShadow: `0 0 0 2px ${colors.semantic.info.subtle}`, // Blue focus ring
+                // Error/warning rings
                 errorActiveShadow: `0 0 0 2px ${colors.semantic.error.subtle}`,
                 warningActiveShadow: `0 0 0 2px ${colors.semantic.warning.subtle}`,
-                controlHeight: 40,
-                controlHeightLG: 48,
-                controlHeightSM: 32,
+                // 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],
-                borderRadius: constants.componentRadius.input,
-                borderRadiusLG: constants.componentRadius.input,
-                borderRadiusSM: constants.componentRadius.input,
+                // Heights inherited from token.controlHeight automatically ✅
             },
             InputNumber: {
-                colorBgContainer: colors.surface.card,
-                colorBorder: colors.border.default,
-                hoverBorderColor: colors.border.strong,
-                activeBorderColor: colors.link.default,
                 colorIcon: colors.text.tertiary,
                 colorIconHover: colors.text.secondary,
+                activeBorderColor: colors.link.default,
                 activeShadow: `0 0 0 2px ${colors.semantic.info.subtle}`,
-                controlHeight: 40,
-                borderRadius: constants.componentRadius.input,
+                borderRadius: constants.radius.input,
                 handleVisible: true,
             },
             Select: {
-                colorBgContainer: colors.surface.card,
                 colorBgElevated: colors.surface.overlay,
-                colorBorder: colors.border.default,
-                colorText: colors.text.primary,
-                colorTextPlaceholder: colors.text.tertiary,
                 colorIcon: colors.text.tertiary,
                 colorIconHover: colors.text.secondary,
-                hoverBorderColor: colors.border.strong,
-                controlItemBgHover: colors.surface.interactive,
                 activeBorderColor: colors.link.default,
+                boxShadow: `0 0 0 2px ${colors.semantic.info.subtle}`,
                 optionSelectedBg: colors.surface.selected,
-                optionSelectedColor: colors.text.primary,
                 optionActiveBg: colors.surface.interactive,
-                controlHeight: 40,
-                controlHeightLG: 48,
-                controlHeightSM: 32,
-                borderRadius: constants.componentRadius.input,
-                borderRadiusLG: constants.componentRadius.input,
-                borderRadiusSM: constants.componentRadius.input,
-                boxShadowSecondary: componentShadow.dropdown,
+                controlItemBgHover: colors.surface.interactive,
+                borderRadius: constants.radius.input,
+                borderRadiusLG: constants.radius.input,
+                borderRadiusSM: constants.radius.input,
+                // Dropdown has shadow
+                boxShadowSecondary: constants.shadow.popover,
             },
             DatePicker: {
-                colorBgContainer: colors.surface.card,
-                colorBorder: colors.border.default,
-                hoverBorderColor: colors.border.strong,
-                activeBorderColor: colors.link.default,
                 colorIcon: colors.text.tertiary,
                 colorIconHover: colors.text.secondary,
+                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: constants.componentRadius.input,
+                borderRadius: constants.radius.input,
             },
             Checkbox: {
                 colorPrimary: colors.link.default,
                 colorPrimaryHover: colors.link.hover,
-                colorBorder: colors.border.default,
-                colorBgContainer: colors.surface.card,
-                colorIcon: colors.text.tertiary,
-                colorIconHover: colors.text.secondary,
                 borderRadiusSM: constants.radius.sm,
             },
             Radio: {
                 colorPrimary: colors.link.default,
                 colorPrimaryHover: colors.link.hover,
-                colorBorder: colors.border.default,
-                colorBgContainer: colors.surface.card,
-                colorIcon: colors.text.tertiary,
-                colorIconHover: colors.text.secondary,
-                dotSize: 8,
             },
             Switch: {
                 colorPrimary: colors.link.default,
                 colorPrimaryHover: colors.link.hover,
-                colorTextQuaternary: colors.text.disabled,
-                colorTextTertiary: colors.text.tertiary,
-                colorIcon: colors.text.tertiary,
-                colorIconHover: colors.text.secondary,
                 handleSize: 18,
             },
             Slider: {
                 colorPrimary: colors.link.default,
                 colorPrimaryBorder: colors.link.default,
                 colorPrimaryBorderHover: colors.link.hover,
-                colorIcon: colors.text.tertiary,
-                colorIconHover: colors.text.secondary,
                 handleColor: colors.surface.card,
                 handleActiveColor: colors.surface.card,
                 railBg: colors.neutral[2],
@@ -326,40 +299,32 @@ export const buildAntDTheme = (colors, constants) => {
             Form: {
                 labelColor: colors.text.primary,
                 labelFontSize: constants.typography.fontSize.base,
-                labelHeight: 32,
-                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,
             },
             // ========================================
             // DATA DISPLAY
             // ========================================
             Table: {
+                // Colors
                 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,
+                // States
                 rowHoverBg: colors.surface.interactive,
                 rowSelectedBg: colors.surface.selected,
-                rowSelectedHoverBg: 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[4],
                 cellPaddingInline: constants.spacing[4],
                 cellPaddingBlockSM: constants.spacing[2],
                 cellPaddingInlineSM: constants.spacing[3],
-                borderRadius: constants.componentRadius.card,
-                borderRadiusLG: constants.componentRadius.card,
-                headerBorderRadius: constants.componentRadius.card,
-                footerBg: colors.surface.page,
             },
             Descriptions: {
                 labelBg: colors.surface.page,
@@ -367,39 +332,31 @@ export const buildAntDTheme = (colors, constants) => {
                 contentColor: colors.text.primary,
                 extraColor: colors.text.secondary,
                 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: constants.componentRadius.card,
-                borderRadiusLG: constants.componentRadius.card,
+                // 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.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: constants.spacing[5],
             },
             Tag: {
                 defaultBg: colors.neutral[2],
-                defaultColor: colors.text.primary,
-                colorBorder: colors.border.default,
-                colorText: colors.text.primary,
-                borderRadiusSM: constants.componentRadius.badge,
+                borderRadiusSM: constants.radius.sm,
                 fontSize: constants.typography.fontSize.sm,
                 fontSizeSM: constants.typography.fontSize.xs,
             },
@@ -410,54 +367,36 @@ export const buildAntDTheme = (colors, constants) => {
                 colorInfo: colors.semantic.info.main,
                 colorWarning: colors.semantic.warning.main,
                 textFontSize: constants.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: constants.componentRadius.avatar,
+                borderRadius: constants.radius.avatar,
                 groupOverlapping: -8,
                 groupSpace: constants.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: constants.componentRadius.card,
+                borderRadius: constants.radius.card,
             },
             Collapse: {
                 colorBgContainer: colors.surface.card,
-                colorBorder: colors.border.default,
                 headerBg: colors.surface.page,
                 headerPadding: `${constants.spacing[3]}px ${constants.spacing[4]}px`,
                 contentPadding: `${constants.spacing[4]}px ${constants.spacing[4]}px`,
-                borderRadiusLG: constants.componentRadius.card,
-            },
-            Carousel: {
-                colorBgContainer: colors.surface.card,
-                dotWidth: 8,
-                dotHeight: 8,
-                dotActiveWidth: 24,
+                borderRadiusLG: constants.radius.card,
             },
             Tree: {
-                colorBgContainer: colors.surface.card,
                 nodeHoverBg: colors.surface.interactive,
                 nodeSelectedBg: colors.surface.selected,
-                titleHeight: 32,
                 borderRadius: constants.radius.sm,
             },
             // ========================================
-            // FEEDBACK
+            // FEEDBACK - Elevated with shadows
             // ========================================
             Alert: {
+                // Semantic colors
                 colorSuccessBg: colors.semantic.success.subtle,
                 colorSuccessBorder: colors.semantic.success.main,
                 colorSuccessText: colors.semantic.success.main,
@@ -471,52 +410,49 @@ export const buildAntDTheme = (colors, constants) => {
                 colorInfoBorder: colors.semantic.info.main,
                 colorInfoText: colors.semantic.info.main,
                 defaultPadding: `${constants.spacing[3]}px ${constants.spacing[4]}px`,
-                withDescriptionPadding: `${constants.spacing[4]}px ${constants.spacing[5]}px`,
-                borderRadiusLG: constants.componentRadius.card,
+                borderRadiusLG: constants.radius.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: constants.componentRadius.modal,
-                boxShadow: componentShadow.modal,
+                // Prominent shadow
+                boxShadow: constants.shadow.modal,
+                // Generous rounding
+                borderRadiusLG: constants.radius.modal,
             },
             Drawer: {
                 colorBgElevated: colors.surface.overlay,
                 colorBgMask: isDark ? 'rgba(0, 0, 0, 0.65)' : 'rgba(0, 0, 0, 0.45)',
-                borderRadiusLG: constants.componentRadius.modal,
+                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: constants.componentRadius.card,
-                boxShadow: componentShadow.dropdown,
+                // Shadow on notification
+                boxShadow: constants.shadow.popover,
+                borderRadiusLG: constants.radius.card,
                 padding: constants.spacing[4],
-                paddingContentHorizontal: constants.spacing[4],
             },
             Message: {
                 contentBg: colors.surface.overlay,
                 contentPadding: `${constants.spacing[2]}px ${constants.spacing[4]}px`,
-                borderRadiusLG: constants.componentRadius.card,
-                boxShadow: componentShadow.dropdown,
+                // Shadow on message
+                boxShadow: constants.shadow.popover,
+                borderRadiusLG: constants.radius.card,
             },
             Popconfirm: {
                 colorBgElevated: colors.surface.overlay,
-                colorWarning: colors.semantic.warning.main,
-                borderRadiusLG: constants.componentRadius.card,
-                boxShadowSecondary: componentShadow.dropdown,
+                boxShadowSecondary: constants.shadow.popover,
+                borderRadiusLG: constants.radius.card,
             },
             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,
             },
@@ -524,7 +460,6 @@ export const buildAntDTheme = (colors, constants) => {
                 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],
@@ -533,9 +468,6 @@ export const buildAntDTheme = (colors, constants) => {
             },
             Spin: {
                 colorPrimary: colors.link.default,
-                dotSize: 20,
-                dotSizeLG: 32,
-                dotSizeSM: 14,
             },
             // ========================================
             // NAVIGATION
@@ -544,25 +476,16 @@ export const buildAntDTheme = (colors, constants) => {
                 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)
+                // Dark sidebar
                 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: constants.componentRadius.input,
-                itemHeight: 40,
+                itemBorderRadius: constants.radius.input,
                 itemPaddingInline: constants.spacing[4],
-                iconSize: 16,
-                collapsedIconSize: 16,
-                collapsedWidth: 64,
             },
             Breadcrumb: {
                 itemColor: colors.text.secondary,
@@ -571,45 +494,26 @@ export const buildAntDTheme = (colors, constants) => {
                 linkHoverColor: colors.link.hover,
                 separatorColor: colors.text.tertiary,
                 separatorMargin: constants.spacing[2],
-                iconFontSize: constants.typography.fontSize.base,
-                fontSize: constants.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: 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,
                 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: constants.typography.fontSize.base,
-                titleFontSizeLG: constants.typography.fontSize.lg,
-                titleFontSizeSM: constants.typography.fontSize.sm,
-                cardBg: colors.surface.card,
                 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,
@@ -620,9 +524,10 @@ export const buildAntDTheme = (colors, constants) => {
                 colorBgElevated: colors.surface.overlay,
                 controlItemBgHover: colors.surface.interactive,
                 controlItemBgActive: colors.surface.selected,
-                boxShadowSecondary: componentShadow.dropdown,
+                // Shadow on dropdown
+                boxShadowSecondary: constants.shadow.popover,
+                borderRadiusLG: constants.radius.card,
                 paddingBlock: constants.spacing[1],
-                borderRadiusLG: constants.componentRadius.card,
             },
             // ========================================
             // LAYOUT
@@ -630,27 +535,14 @@ export const buildAntDTheme = (colors, constants) => {
             Layout: {
                 colorBgBody: colors.surface.page,
                 colorBgHeader: colors.surface.card,
-                colorBgTrigger: colors.absolute.black,
-                siderBg: colors.absolute.black,
                 headerBg: colors.surface.card,
-                headerHeight: 64,
+                siderBg: colors.absolute.black,
                 headerPadding: `0 ${constants.spacing[6]}px`,
-                footerBg: colors.surface.card,
                 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,
             },
             Divider: {
                 colorSplit: colors.border.subtle,
                 colorText: colors.text.tertiary,
-                orientationMargin: 0.05,
                 verticalMarginInline: constants.spacing[2],
             },
             // ========================================
@@ -659,97 +551,62 @@ export const buildAntDTheme = (colors, constants) => {
             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: 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,
+                // Subtle shadow
+                boxShadowSecondary: constants.shadow.tooltip,
                 borderRadius: constants.radius.sm,
-                boxShadowSecondary: componentShadow.tooltip,
             },
             Popover: {
                 colorBgElevated: colors.surface.overlay,
-                colorText: colors.text.primary,
-                borderRadiusLG: constants.componentRadius.card,
-                boxShadowSecondary: componentShadow.dropdown,
+                // Shadow on popover
+                boxShadowSecondary: constants.shadow.popover,
+                borderRadiusLG: constants.radius.card,
                 padding: constants.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: constants.componentRadius.card,
-                boxShadowSecondary: componentShadow.dropdown,
+                boxShadowSecondary: constants.shadow.popover,
+                borderRadius: constants.radius.card,
             },
             FloatButton: {
                 colorBgElevated: colors.surface.overlay,
                 colorPrimary: colors.link.default,
-                borderRadiusLG: constants.componentRadius.avatar,
-                boxShadow: componentShadow.dropdown,
+                boxShadow: constants.shadow.popover,
+                borderRadiusLG: constants.radius.avatar,
             },
             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: constants.radius.base,
                 borderRadiusSM: constants.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: constants.spacing[1],
+                boxShadowSecondary: constants.shadow.popover,
             },
             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,
             },
@@ -760,17 +617,12 @@ export const buildAntDTheme = (colors, constants) => {
             Empty: {
                 colorText: colors.text.secondary,
                 colorTextDescription: colors.text.tertiary,
-                fontSize: constants.typography.fontSize.base,
             },
             List: {
                 colorBorder: colors.border.subtle,
-                colorSplit: colors.border.subtle,
                 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: constants.spacing[4],
                 metaMarginBottom: constants.spacing[2],
                 avatarMarginRight: constants.spacing[4],
                 titleMarginBottom: constants.spacing[1],