原件层——可复用的基础原件
这里是原件层的完整展示：按钮、徽章、表单控件、骨架屏等基础原件，全部基于 ty- 变量与全局类构建，是组件层的地基。
按钮 Button
按钮 = 基类 ty-btn + 变体组合。已补 soft/link/wide/block/xs/xl（对齐 daisyUI）。hover 变亮一档、active 变深一档。
| 类名 | 属性 | 说明 |
|---|---|---|
| ty-btn | 基类：inline-flex/圆角8/字号s/过渡/焦点环 | 必选 |
| ty-btn–primary | 主色实心（hover 亮/active 深） | + primary |
| ty-btn–secondary | 副色实心 | + secondary |
| ty-btn–outline | 描边（透明+主色边框/字） | + outline |
| ty-btn–ghost | 幽灵（透明+主色字） | + ghost |
| ty-btn–soft | 柔和底（浅色底+深字）★新增 | + soft |
| ty-btn–link | 链接式（无底+下划线）★新增 | + link |
| ty-btn–xs / –sm / –lg / –xl | 尺寸档（md 默认） | 任意叠加 |
| ty-btn–wide | 加宽（水平 padding 大）★新增 | 任意叠加 |
| ty-btn–block | 通栏（width 100%）★新增 | 任意叠加 |
| ty-btn–disabled | 禁用（半透明+禁止光标） | 任意叠加 |
徽章 Badge
徽章 = 基类 ty-badge + 语义色变体。实心（白字）/ soft（浅底深字）/ outline（描边）三种风格。用于状态提示、NEW、分类标签。
| 类名 | 属性 | 说明 |
|---|---|---|
| ty-badge | 基类：胶囊圆角/字号xs/600 | 必选 |
| ty-badge–neutral / –primary / –secondary / –success / –warning / –danger / –info | 语义色实心（白字） | + 颜色 |
| ty-badge–soft | 浅色底+深字（柔和） | + soft |
| ty-badge–outline | 透明+描边 | + outline |
区块标题 Section Header
三段式：eyebrow 眉题 + 标题 + 说明。容器类 ty-section-header（左对齐或 center 居中）+ ty-eyebrow 眉题类 + 标题（heading 元素）+ ty-section-desc 说明类。
| 类名 | 属性 | 说明 |
|---|---|---|
| ty-section-header | column 容器 + gap 8 | 区块标题容器 |
| ty-section-header–center | 居中版 | 居中布局 |
| ty-eyebrow | 眉题：s/600/主色/大写/字距 | 小标签文字 |
| ty-section-desc | 说明：m/灰/行高1.6 | 描述文字 |
Products We Offer
Built for Your Business
链接 Link
正文链接样式：主色+下划线（ty-link）、hover 加深（–hover）、灰链接（–muted，页脚用）、深底白链接（–light）。用 Bricks text-link 元素挂类。
| 类名 | 属性 | 说明 |
|---|---|---|
| ty-link | 主色 + 下划线 | 正文链接（必选） |
| ty-link–hover | hover 变深 | 叠加 |
| ty-link–muted | 灰色无下划线 | 次要链接/页脚 |
| ty-link–light | 白色（深底用） | 深色区块链接 |
输入框 Input
文本输入样式：基类 ty-input（含 hover/focus 内建）+ error/disabled 状态类。用 _cssCustom 裸类名实现，对原生 input 和 Bricks form 字段都生效。
| 类名 | 属性 | 说明 |
|---|---|---|
| ty-input | 边框/圆角8/字号m + hover/focus 内建 | 必选（含状态） |
| ty-input–error | danger 边框 | 叠加 |
| ty-input–disabled | 灰底+半透明+禁止 | 叠加 |
| ty-form | Bricks form 容器类（后代选择器统一字段） | Bricks form 挂这个 |
多行输入 Textarea
多行文本域：基类 ty-textarea（focus 内建）+ error 状态。_cssCustom 裸类名。
| 类名 | 属性 | 说明 |
|---|---|---|
| ty-textarea | 边框/圆角8/最小高120 + focus 内建 | 必选 |
| ty-textarea–error | danger 边框 | 叠加 |
下拉 Select
下拉选择：基类 ty-select（focus 内建）。_cssCustom 裸类名。
| 类名 | 属性 | 说明 |
|---|---|---|
| ty-select | 边框/圆角8/字号m + focus 内建 | 必选 |
选择控件 Checkbox / Radio / Toggle
三种选择控件：ty-checkbox（勾选）、ty-radio（圆点）、ty-toggle（开关）。_cssCustom 裸类名，checked 态变主色。
| 类名 | 属性 | 说明 |
|---|---|---|
| ty-checkbox | 18px 方框 + checked 主色勾 | 复选框 |
| ty-radio | 18px 圆 + checked 主色实心 | 单选框 |
| ty-toggle | 40×22 滑块开关 | 开关 |
表单文字 Label / Hint / Error
表单配套文字：ty-label（字段标签）、ty-form-hint（辅助提示）、ty-form-error（错误信息，danger 色）。
| 类名 | 属性 | 说明 |
|---|---|---|
| ty-label | s/600/正文色 | 字段标签 |
| ty-form-hint | xs/灰 | 辅助提示 |
| ty-form-error | xs/danger | 错误信息 |
分割线 Divider
水平分割线：ty-divider（纯线）、ty-divider–text（中间带文字）。用 ::before/::after 实现。
| 类名 | 属性 | 说明 |
|---|---|---|
| ty-divider | flex + ::before/::after 线 | 纯分割线 |
| ty-divider–text | 同 + 中间放文字 | 带字分割线 |
头像 Avatar
头像容器：圆形（默认）/方形（–square）+ 尺寸（–sm/–lg）。内部放图片或文字。
| 类名 | 属性 | 说明 |
|---|---|---|
| ty-avatar | 48×48 圆形 + 溢出隐藏 | 必选 |
| ty-avatar–sm / –lg | 32 / 64 尺寸 | 叠加 |
| ty-avatar–square | 方形圆角8 | 叠加 |
加载 Loading
旋转加载圈：ty-loading（24px）+ 尺寸（–sm/–lg）。用 @keyframes 旋转动画。
| 类名 | 属性 | 说明 |
|---|---|---|
| ty-loading | 24px 旋转圈 | 默认 |
| ty-loading–sm / –lg | 16 / 40px | 尺寸 |
提示条 Alert
提示条：浅色底+同色边框+同色文字（soft 风格）。语义色 4 种（info/success/warning/danger）。内部放图标+文字。
| 类名 | 属性 | 说明 |
|---|---|---|
| ty-alert | flex 容器 + 圆角8 | 必选 |
| ty-alert–info / –success / –warning / –danger | 语义色（浅底+边框+文字） | + 颜色 |
骨架屏 Skeleton
加载占位：ty-skeleton（方块）、–text（文字行）、–circle（圆形）。呼吸闪烁动画。
| 类名 | 属性 | 说明 |
|---|---|---|
| ty-skeleton | 灰块 + 闪烁动画 | 方块 |
| ty-skeleton–text | 14px 文字行 | 文字行 |
| ty-skeleton–circle | 48px 圆 | 圆形 |