From 43f4f0160c936d60b5630e252190221a6e3ff062 Mon Sep 17 00:00:00 2001 From: chenenpei Date: Wed, 22 Apr 2026 15:11:39 +0800 Subject: [PATCH] Revert "feat(eagle): Enhance Typo component with new styles and Figma mapping (#1277)" This reverts commit 0110c87287a090efd9c2a87973b9e904e6d8f9d2. --- packages/eagle/docs/llms.txt | 3 +- packages/eagle/src/core/Typo/index.ts | 65 --------------------------- skills/cloudtower-eagle-dev/SKILL.md | 32 ------------- skills/cloudtower-eagle/SKILL.md | 45 ------------------- 4 files changed, 1 insertion(+), 144 deletions(-) diff --git a/packages/eagle/docs/llms.txt b/packages/eagle/docs/llms.txt index 3342de61d..cf94f1428 100644 --- a/packages/eagle/docs/llms.txt +++ b/packages/eagle/docs/llms.txt @@ -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 diff --git a/packages/eagle/src/core/Typo/index.ts b/packages/eagle/src/core/Typo/index.ts index ed56ad739..fc866d4e0 100644 --- a/packages/eagle/src/core/Typo/index.ts +++ b/packages/eagle/src/core/Typo/index.ts @@ -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; @@ -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; @@ -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, @@ -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, @@ -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; diff --git a/skills/cloudtower-eagle-dev/SKILL.md b/skills/cloudtower-eagle-dev/SKILL.md index e3f9b6bf9..73f7121e2 100644 --- a/skills/cloudtower-eagle-dev/SKILL.md +++ b/skills/cloudtower-eagle-dev/SKILL.md @@ -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` diff --git a/skills/cloudtower-eagle/SKILL.md b/skills/cloudtower-eagle/SKILL.md index 818b0a41c..d37641064 100644 --- a/skills/cloudtower-eagle/SKILL.md +++ b/skills/cloudtower-eagle/SKILL.md @@ -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`