core-components

原文涵盖的主题

• Core Components
• Design System Overview
• Design Tokens
• Spacing Tokens
• Color Tokens
• Typography Tokens
• Core Components
• Box

Use components from your core library instead of raw platform components. This ensures consistent styling and behavior. NEVER hard-code values. Always use design tokens. | Token | Value | |-------|-------| | $1 | 4px | | $2 | 8px | | $3 | 12px | | $4 | 16px | | $6 | 24px | | $8 | 32px | | Semantic Token | Use For | |----------------|---------| | $textPrimary | Main text | | $textSecondary | Supporting text | | $textTertiary | Disabled/hint text | | $primary500 | Brand/accent color | | $statusError | Error states | | $statusSuccess | Success states | | Token | Size | |-------|------| | $xs | 12px | | $sm | 14px | | $md | 16px | | $lg | 18px | | $xl | 20px | | $2xl | 24px | Base layout component with token support: Horizontal and vertical flex layouts: Typography with token support: Interactive button with variants: | Variant | Use For | |---------|---------| | solid | Primary actions | | outline | Secondary actions | | ghost | Tertiary/subtle actions | | link | Inline actions | Form input with validation: Content container: When creating components, use token-based props: react-ui-patterns: Use core components for UI states testing-patterns: Mock core components in tests storybook:

这里只展示节选，请以完整原文和当前要求为准。