Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 1 addition & 2 deletions packages/eagle/docs/llms.txt
Original file line number Diff line number Diff line change
Expand Up @@ -97,8 +97,7 @@ npm 包名:@cloudtower/eagle
- Icon: 图标容器,统一图标尺寸和样式
- BaseIcon: 基础图标,支持 SVG 图标渲染
- Link: 链接,封装 antd Typography.Link
- Typo: 排版样式集合,提供 Display/Heading/Label/Paragraph 等预定义的 Linaria 类名;若需要根据 Figma Typography 名称查找对应样式,请使用公开导出的 `FIGMA_TO_TYPO`
- Color: 颜色 token;若目标文件已依赖全局 Sass 变量或已有 `$...` 写法,优先使用 `dist/variables.scss` 中的 Sass 变量,否则优先使用公开导出的 `Color.*`
- Typo: 排版样式集合,提供 Display/Heading/Label/Paragraph 等预定义的 Linaria 类名
- Loading: 加载中动画,三条竖线动画
- CircleLoading: 圆形加载动画,旋转渐变圆形图标
- Space: 间距组件,封装 antd Space
Expand Down
65 changes: 0 additions & 65 deletions packages/eagle/src/core/Typo/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -10,11 +10,6 @@ const d1s_bold_title = css`
font-size: 24px;
line-height: 32px;
`;
const d1s_regular_title = css`
@include Inter();
font-size: 24px;
line-height: 32px;
`;
const d1_regular_title = css`
@include Inter();
font-size: 32px;
Expand Down Expand Up @@ -131,14 +126,6 @@ const l2_bold = css`
font-size: 14px;
line-height: 22px;
`;
const l2_bold_strikethrough = css`
@include Inter(bold);
text-decoration-line: line-through;
text-decoration-style: solid;
text-decoration-skip-ink: none;
font-size: 14px;
line-height: 22px;
`;
const l2_regular_title = css`
@include Inter();
font-size: 14px;
Expand Down Expand Up @@ -321,7 +308,6 @@ export const Typo = {
Display: {
d1_bold_title,
d1s_bold_title,
d1s_regular_title,
d1_regular_title,
d2_bold_title,
d2_regular_title,
Expand All @@ -346,7 +332,6 @@ export const Typo = {
l1_regular_title,
l1_regular_upper,
l2_bold,
l2_bold_strikethrough,
l2_bold_title,
l2_bold_upper,
l2_regular,
Expand Down Expand Up @@ -389,53 +374,3 @@ export const Typo = {
u1,
},
} as const;

export const FIGMA_TO_TYPO = {
"Display/display1-bold-sc": d1_bold_title,
"Display/display1-regular-sc": d1_regular_title,
"Display/display1s-bold-sc": d1s_bold_title,
"Display/display1s-regular-sc": d1s_regular_title,
"Display/display2-bold-sc": d2_bold_title,
"Display/display2-regular-sc": d2_regular_title,
"Display/display3-bold-sc": d3_bold_title,
"Display/display3-regular-sc": d3_regular_title,
"Heading/h1-bold-sc": h1_bold_title,
"Heading/h1-regular-sc": h1_regular_title,
"Heading/h2-bold-sc": h2_bold_title,
"Heading/h2-regular-sc": h2_regular_title,
"Heading/h3-bold-sc": h3_bold_title,
"Heading/h3-regular-sc": h3_regular_title,
"Heading/h3-bold-uppercase-sc": h3_bold_upper,
"Heading/h3-regular-uppercase-sc": h3_regular_upper,
"Label/label1-regular-sc": l1_regular,
"Label/label1-bold-sc": l1_bold,
"Label/label1-regular-uppercase-sc": l1_regular_upper,
"Label/label1-bold-uppercase-sc": l1_bold_upper,
"Label/label2-regular-sc": l2_regular,
"Label/label2-medium-sc": l2_medium,
"Label/label2-bold-sc": l2_bold,
"Label/label2-regular-uppercase-sc": l2_regular_upper,
"Label/label2-bold-uppercase-sc": l2_bold_upper,
"Label/label2-bold-strikethrough-sc": l2_bold_strikethrough,
"Label/label3-regular-sc": l3_regular,
"Label/label3-semibold-sc": l3_semibold,
"Label/label3-bold-sc": l3_bold,
"Label/label3-regular-uppercase-sc": l3_regular_upper,
"Label/label3-bold-uppercase-sc": l3_bold_upper,
"Label/label4-regular-sc": l4_regular,
"Label/label4-medium-sc": l4_medium,
"Label/label4-bold-sc": l4_bold,
"Label/label4-regular-uppercase-sc": l4_regular_upper,
"Label/label4-bold-uppercase-sc": l4_bold_upper,
"Footnote/footnote1-regular-sc": f1_regular,
"Footnote/footnote2-regular-sc": f2_regular,
"Tabular Num/tnum1-regular-monospace-sc": t1_regular_mono,
"Tabular Num/tnum1-regular-slashed0-sc": t1_regular_slash,
"Tabular Num/tnum2-regular-monospace-sc": t2_regular_mono,
"Tabular Num/tnum2-medium-monospace-sc": t2_medium_mono,
"Tabular Num/tnum2-regular-slashed0-sc": t2_regular_slash,
"Tabular Num/tnum2-medium-slashed0-sc": t2_medium_slash,
"Tabular Num/tnum16-bold-slashed0-sc": t16_bold_slash,
} as const;

export type FigmaTypographyName = keyof typeof FIGMA_TO_TYPO;
32 changes: 0 additions & 32 deletions skills/cloudtower-eagle-dev/SKILL.md
Original file line number Diff line number Diff line change
Expand Up @@ -68,38 +68,6 @@ description: >

列出差异清单,由开发者确认后再修改。

### 6. Typography 和 Color 的维护规则

当修改或新增 Typography、Color 相关内容时,按下面的规则处理。

**Typography**

1. `Typo` 是对外公开的用法,现有 key 不要直接删除,也不要随意改名。
2. 如果是为了和 Figma 对齐新增字体样式,要同时检查:
- `Typo`
- `FIGMA_TO_TYPO`
- 相关测试
3. 从 Figma 读取字体时,先看 design context 里的字体 token,再查 `FIGMA_TO_TYPO`。
4. 如果 Figma 名字和代码名字不完全一样,再按字号、行高、字重、是否大写来判断,不要只靠名字猜。

**Color**

1. `src/styles/token/color.ts` 和 `src/styles/token/color.scss` 是当前和 Figma 对齐的颜色定义。
2. `src/styles/common/variables.scss` 主要用来兼容旧的 Sass 变量名,不建议继续把新颜色优先加在这里。
3. 外部项目真正会用到的是 `dist/variables.scss`,所以旧的 Sass 变量名不能轻易删除或改名。
4. 新颜色如果要补充,优先补到:
- `token/color.ts`
- `token/color.scss`
5. 只有在需要兼容旧代码时,才补旧的 Sass 别名。
6. 从 Figma 读取颜色时,先看 `get_design_context` 结果里的 `var(--...)`,不要先猜旧变量名。

**文档**

1. 不要在多个地方各写一份完整映射表,避免以后不同步。
2. 如果这次改动会影响 agent 查找 Typography 或 Color 的方式,再同步更新:
- `packages/eagle/docs/llms.txt`
- `skills/cloudtower-eagle/SKILL.md`

## 共用规则

1. **始终用 package.json 定义的 script**:`yarn lint`, `yarn format`, `yarn typings`, `yarn test:ci`, `yarn build-storybook`
Expand Down
45 changes: 0 additions & 45 deletions skills/cloudtower-eagle/SKILL.md
Original file line number Diff line number Diff line change
Expand Up @@ -43,48 +43,3 @@ import "@cloudtower/eagle/dist/style.css";
```bash
find . -path "*/@cloudtower/eagle/docs/llms.txt" 2>/dev/null
```

## Figma Token 查找顺序

当任务来自 Figma 设计稿,或者你需要把 Figma 的字体、颜色 token 映射到 Eagle 代码时,按下面的顺序查,不要先猜名字。

### 先读 Figma MCP 返回什么

拿到 `get_design_context` 结果后,不要猜 token 名,按这个顺序获取信息:

1. 看生成代码里的 `var(--...)`
2. 这里通常能直接拿到颜色 token,例如 `var(--fill/notice/light, ...)`、`var(--text/colorful/outstanding, ...)`
3. 接着看 `These styles are contained in the design:`
4. 这里通常能直接拿到字体 token,例如 `Label/label4-regular-sc`
5. 如果两边都有信息,优先以生成代码里实际出现的 token 为准
6. 不要假设文字一定使用 `text/...` token;某些设计系统组件会直接使用 `fill/...` token 作为文字颜色

### 字体

1. 先从 Figma design context 里提取 typography token 名。
2. 优先查 `FIGMA_TO_TYPO`,找到后直接使用对应的 `Typo.*`。
3. 如果 Figma 名和 Eagle 导出名不完全一致,再按字号、行高、字重、是否 uppercase 归一化,选择最接近的 `Typo.*`。
4. 不要只靠名称猜测,必要时再看编译后的 `dist/components.css` 确认实际字体样式。

### 颜色

1. 先判断目标文件上下文,再决定输出格式。
2. 如果当前文件已经有 `$...` 写法、依赖全局 Sass 变量、或者外部项目通过 `@cloudtower/eagle/dist/variables.scss` 注入样式变量,优先使用 Sass 变量。
3. 这里要把 `dist/variables.scss` 当作外部项目真实消费的 Sass 变量接口;它是旧 `variables.scss` 与最新 `token/color.scss` 的并集,不要把源码 `src/**/variables.scss` 当作唯一外部事实。
4. 如果当前文件是 TS/Linaria、已经在用 `Color`、或者并不依赖全局 Sass 变量,优先使用 `Color.*`。
5. `dist/token.css` 只用来校验 Figma token 名和 CSS 变量形式,不作为首选输出格式。
6. 不要先猜旧变量名,先按 Figma token 名去查现有导出与 `dist` 产物。

**示例 1:Sass 上下文**

输入:Figma `Form / Tip` 组件,目标文件里已经有 `$text-light-secondary` 这类写法
输出:
- 颜色优先使用 `$fill-serious-light`、`$text-colorful-serious`、`$text-colorful-outstanding`
- 字体优先使用 `Typo.Label.l4_regular`

**示例 2:TS/Linaria 上下文**

输入:Figma `Form / Tip` 组件,目标文件已经在用 `Color.*`
输出:
- 颜色优先使用 `Color.fill.serious.light`、`Color.text.colorful.serious`、`Color.text.colorful.outstanding`
- 字体仍然优先使用 `Typo.Label.l4_regular`
Loading