create-component-style

新组件实践指南（中文）——创建样式

本文档记录了在本 monorepo 中新增 UI 组件的可复用流程，以 组件为示例。目标是形成一套可重复、可复用的惯例：样式通过类名控制、React 组件保持精简。

目标

• 样式使用 @vanilla-extract（集中在 @idealjs/camphora-styled 包）：颜色、尺寸、状态等变体以类的形式存在。
• React 组件接口尽量最小化——仅接受 className 与原生 HTML 属性，不增加过多自定义 props。

前置准备

• 如需新视觉原语，先在 packages/camphora-styled/src/tokens 中新增或复用 token（颜色、尺寸、层级、字体等）。
• 确保 packages/camphora-styled/src/index.ts 导出新增的样式文件。

本次示例涉及的文件

• packages/camphora-styled/src/<component>.css.ts —— 基础样式与变体类（如 <componentPrimary>, <componentSm>）。