@lark-apaas/coding-steering 0.1.70 → 0.1.71

package/steering/nestjs-react-fullstack/skills/design-guide/references/broadsheet.md

@@ -1,313 +0,0 @@
----
-version: alpha
-name: broadsheet
-name_zh: 新闻大报
-description: 网页新闻纸风格：纸白底、Source Serif 4 衬线字与近黑墨色构成主体，青与洋红仅作克制点色；页面层级主要依靠字阶和留白，图像可使用 CMYK 套印偏移与网点处理。
-colors:
-  background: "#f3f2f2"
-  card: "#eae9e9"
-  foreground: "#201e1d"
-  primary: "#0088b0"
-  primary-foreground: "#f3f2f2"
-  ring: "#0088b0"
-  primary-dark: "#006786"
-  highlight: "#d6006c"
-  process-yellow: "#edbb00"
-  neutral-dark: "#2d2b2b"
-typography:
-  heading:
-    fontFamily: "'Source Serif 4', 'Noto Serif SC', 'Songti SC', system-ui, serif"
-    fontWeight: "600"
-  body:
-    fontFamily: "'Source Serif 4', 'Noto Serif SC', 'Songti SC', system-ui, serif"
-    fontSize: "15px"
-    lineHeight: "1.5"
-  h1:
-    fontSize: "42px"
-  h2:
-    fontSize: "32px"
-  h3:
-    fontSize: "25px"
-spacing:
-  space-1: "5px"
-  space-2: "10px"
-  space-3: "15px"
-  space-4: "20px"
-  space-6: "30px"
-  space-8: "40px"
-rounded:
-  sm: "1px"
-  md: "2px"
-  lg: "4px"
-components:
-  primary-button:
-    background: "{colors.primary}"
-    color: "{colors.primary-foreground}"
-    fontFamily: "{typography.heading.fontFamily}"
-  card:
-    background: "{colors.card}"
-    description: "仅用于真正离散的条目，不作为页面布局容器"
-  cmyk-image:
-    description: "CMYK 分色印版错位叠印与网点处理；完整结构和依赖见来源规格"
-anchors:
-  - id: paper-and-ink
-    type: token
-    desc: 纸白底与近黑墨色形成新闻纸基调
-  - id: serif-everywhere
-    type: token
-    desc: 标题、正文与界面控件统一使用衬线字族
-  - id: restrained-process-colors
-    type: pattern
-    desc: 青与洋红只作小面积点色，同一组件不同时出现
-  - id: whitespace-hierarchy
-    type: pattern
-    desc: 页面结构主要依靠字阶与留白，不依赖框盒
-  - id: cmyk-registration
-    type: component
-    desc: 图像使用套印偏移分色版与新闻纸网点
-  - id: square-paper-components
-    type: component
-    desc: 组件圆角接近零，维持印刷纸面感
-gaps:
-  - 原始 styles.css、print-plates.js、_ds_bundle.js 与模板资产未随 markdown 提供；CMYK 签名效果的完整滤镜代码无法从二手描述还原，接入时需使用来源资产。
-  - 暗色模式未定义。
-exceptions:
-  - 工艺黄仅用于 CMYK 分色、印版数字等印刷处理，不进入正文或界面 chrome。
-  - 卡片仅用于真正离散的列表条目，不作为页面结构容器。
----
-
-## Overview
-
-网页上的新闻纸：纸白、墨色、衬线字阶和通透留白构成主体，青与洋红作为印刷点色，CMYK 套印图像提供签名视觉。
-
-## Colors
-
-页面使用 {colors.background} 纸底与 {colors.foreground} 墨色；{colors.primary} 和 {colors.highlight} 小面积点色，同一小组件只使用其中一种。段落级青字使用 {colors.primary-dark}。主按钮文字用 {colors.primary-foreground}，键盘焦点环用 {colors.ring}。
-
-## Typography
-
-@import url('https://miaoda.feishu.cn/fonts/css2?family=Noto+Serif+SC:wght@400;600&family=Source+Serif+4:ital,wght@0,400;0,600;1,400&display=swap');
-
-HARD REQUIREMENT：字体加载与字体族分工禁止替换。标题、正文和界面 chrome 均使用 {typography.heading.fontFamily}；中文多行标题行高不低于 1.05，正文不低于 1.5，中文负字距归零。
-
-## Layout
-
-内容左对齐并保留宽松右侧留白，主要依靠字号层级和间距组织，不用卡片或分割线搭建页面结构。
-
-## Elevation & Depth
-
-使用源规格的墨色调柔投影；页面结构主要依靠留白，离散条目需要分层时才使用投影。
-
-## Shapes
-
-圆角接近零，保留纸张与印刷物的硬朗边缘；图片可使用 CMYK 套印偏移和网点处理。
-
-## Components
-
-按钮、标签、原生表单、离散条目卡片、表格和对话框的精确规格见下方“来源规格”。CMYK 图像依赖来源中的 print-plates.js 与滤镜资产。
-
-## Hard Rules
-
-- 同一小组件只使用青或洋红中的一种。
-- 正文青色使用 {colors.primary-dark}；工艺黄只进入印刷处理。
-- 页面结构由字阶与留白组织，卡片仅承载真正离散的条目。
-- Source Serif 4 真斜体随正文字重加载，不使用合成斜体。
-
-## Exceptions
-
-- 工艺黄只用于 CMYK 分色、印版数字等印刷处理。
-- 真正离散的列表条目可使用 card 卡片与源规格投影。
-
-## Source Specification
-
-以下内容从用户提供的原始 design.md 原样保留，仅将标题层级下调以纳入 DSM v1 单文件结构。
-
-### 一句话定位
-
-网页上的新闻纸。纸白底上全篇 Source Serif 4 近黑墨色，四色印刷的青与洋红作为**点色**小面积、克制地用（印刷处理里再补一个工艺黄）。页面结构**不用框、不用分割线**——层级只来自衬线字阶和留白。唯一印线的地方是头版活件：landing 上日期栏两侧的粗-细线对，满墨强度。图片按自己的**套印偏移印版**输出。
-
----
-
-### 1. 颜色
-
-#### 基础角色
-
-| Token | 值 | 用途 |
-| --- | --- | --- |
-| `--color-background` | `#f3f2f2` | 纸白底 |
-| `--color-card` | `#eae9e9` | 卡片 / 面板填充 |
-| `--color-foreground` | `#201e1d` | 墨色正文 |
-| `--color-primary` | `#0088b0` | 青 —— 交互元素专用 |
-| `--color-highlight` | `#d6006c` | 洋红 —— 更罕用的第二点色 |
-| `--color-process-yellow` | `#edbb00` | 第三道工艺墨，**仅印刷处理**用（CMYK 分色、印版数字）；正文与界面 chrome 永不取它 |
-| `--color-divider` | `foreground` 16% 混合 | 1px 细线 |
-
-**双点色，但不许同框**：一个小组件里不能同时出现青和洋红。
-
-#### 色阶（OKLCH 同一感知明度轴，同 step 视觉重量一致）
-
-**Neutral** `#f8f4f4` · `#eae7e7` · `#d7d3d3` · `#bab6b6` · `#9b9797` · `#7d7979` · `#605d5d` · `#444141` · `#2d2b2b`
-
-**Primary（青）** `#e9f8ff` · `#cbeeff` · `#99e0ff` · `#62c5ee` · `#38a6cf` · `#1186ac` · `#006786` · `#004961` · `#0a303e`
-
-**Highlight（洋红）** `#fff1f4` · `#ffdee6` · `#ffc0d0` · `#ff90b1` · `#ff458e` · `#d82071` · `#aa0b56` · `#790e3d` · `#4b1528`
-
-用法规则：
-- 100–300 → 浅色填充、hover 底、细边框
-- 500 → 该角色基准
-- 700–900 → 浅色填充上的文字、按下态
-- 优先取色阶 step，不要临时 `color-mix()`
-
-#### 对比度红线
-
-primary 对纸底只到 **3:1** —— 够图标、大字号、界面 chrome，**不够正文**。段落级青字必须用 `--color-primary-700`（`#006786`）。
-
----
-
-### 2. 字体
-
-| Token | 值 |
-| --- | --- |
-| `--font-heading` | `"Source Serif 4", system-ui, sans-serif` |
-| `--font-heading-weight` | `600` |
-| `--font-body` | `"Source Serif 4", system-ui, sans-serif` |
-
-单一字族，字重 400 / 600 分层，**真斜体按正文字重载入**（引言和强调走衬线的斜体声音，绝不用合成倾斜）。
-
-从 Google Fonts 载入：`Source+Serif+4:ital,wght@0,400;0,600;1,400`
-
-#### 字号阶梯
-
-| 元素 | 字号 | 备注 |
-| --- | --- | --- |
-| h1 | 42px | |
-| h2 | 32px | |
-| h3 | 25px | |
-| h4 | 20px | |
-| h5 | 16px | |
-| h6 | 13px | **全大写**，letter-spacing 0.08em |
-| body | 15px | |
-| figcaption | 11px | foreground 55% |
-| `.card-title` | 17px | heading 族 600 |
-| `.card-kicker` | 10px | 大写，ls 0.1em，青色 |
-| `.btn` / `.input` | 14px | 刻意同字号——注册行里两者并排 |
-| `.tag` | 11px | |
-| `.table th` | 11px | 大写，ls 0.08em，foreground 60% |
-
-**不许为界面 chrome 引入无衬线字**——衬线本身就是 chrome。
-
----
-
-### 3. 间距与圆角
-
-密度 **1.25×**（宽松，已烘进变量）：
-
-```
---space-1: 5px    --space-2: 10px   --space-3: 15px
---space-4: 20px   --space-6: 30px   --space-8: 40px
-```
-
-圆角几乎为零：`--radius-sm: 1px` / `--radius-md: 2px` / `--radius-lg: 4px`
-
-**不许压缩这套通透的间距**。
-
-### 4. 阴影
-
-```
---shadow-sm: 0 1px 2px  (#2d2b2b 14%)
---shadow-md: 0 3px 10px (#2d2b2b 16%)
---shadow-lg: 0 12px 32px (#2d2b2b 22%)
-```
-
-墨色调柔投影，已针对纸底调过。工具类 `.elev-sm / -md / -lg`。不要自造 box-shadow。
-
----
-
-### 5. 布局方向
-
-- **左对齐、不对称**：标题齐左，内容贴左边缘，留白留在右侧
-- **区块之间只用留白**，不用分割线、不用卡片
-- deck 分节页 = 印版的打样余白：**页面保持纸白**（本系统没有深色面**）**，靠印刷活件承担断点——右侧一片套印偏移的网点场、`.cmyk-num` 印版数字、十级黑白灰梯、八格色标、一个星形套准标
-- 多数幻灯片把第一笔墨锚在同一个左上角落点，真正的套准标记落在纸张边缘
-
-### 6. 图像处理
-
-| 类名 | 说明 |
-| --- | --- |
-| `.cmyk` | **主打处理** —— 照片印成四张套印偏移的分色版。结构：`figure.cmyk` 内五份同图，第一份作布局尺子（`opacity:0`，保留在无障碍树里承载 alt），其余四份分别标 `.sep-c/.sep-m/.sep-y/.sep-k`；分色由 `print-plates.js` 的 SVG `feColorMatrix` 实时抽取，错开数像素后 multiply 叠到纸底，最后过一层 3px 网点 |
-| `.cmyk` + `.print` | 单图版本：`figure.cmyk > .print > image-slot`，用一个复合滤镜 `#sep-all` 处理可替换的单张图。hover 时印版回套准（印刷工在灯台上验套准），reduced-motion / 触屏下退化为直接切到清晰原图 |
-| `.cmyk-num` | 印版数字：**只三版 C/M/Y，没有黑版** —— 暗部完全来自三色 multiply 叠加，边缘毛刺就是套印漂移。结构：`.cmyk-num` 内一个 `.paper` span（纸白，用偏移 text-shadow 拼出字形并集）+ 三个 `.plate` span；自带 `--cmyk-num-ground` 兜底纸底 |
-| `.halftone` | 简版新闻纸网点（`grayscale(.35) contrast(1.15)` + 3px 径向网点 multiply），**给界面截图用** |
-
-`.cmyk` 依赖 `print-plates.js` 的 filter defs 在文档里。模板页通过编译好的 `_ds_bundle.js` 自动拿到；直接 link `styles.css` 的页面要自己在样式表旁加 `<script src="print-plates.js"></script>`（data-URI 滤镜引用在 Chromium 下不成立，外部文件引用跨引擎不可靠）。
-
-### 7. 组件
-
-| 类名 | 说明 |
-| --- | --- |
-| `.btn` + `.btn-primary / -secondary / -ghost / -icon / -block` | primary 是实心青填充，文字 `--color-background`；字体用 heading 族 600 / 14px；`.btn-icon` 36×36 |
-| `.tag` + `.tag-accent / -accent-2 / -neutral / -outline` | 色阶染色小标签（100 底 + 800 字） |
-| `.field` + `label` / `.input` / `.radio` + `.dot` / `.seg` + `.seg-opt` | 原生元素表单，无脚本。`.input` 36px 高、card 底、caret 用青；placeholder 明确定为 foreground 65%（实测 4.8:1，浏览器默认灰过不了小字 4.5:1） |
-| `.card` + `.card-kicker / -title / -body / -meta`；`.elev-sm/md/lg` | card 填充卡。**只用于真正离散的条目**（如列表项），绝不用来搭布局 |
-| `.nav` + `.nav-brand` | 顶栏，`border-bottom: none`（刻意） |
-| `.table` | 大写细字表头 + 8% 墨行线，hover 行底 4% |
-| `.dialog-backdrop` + `.dialog`（`-title / -body / -actions`） | 最高层模态 |
-| `.hr` | 1px 细线，存在但本系统偏好留白——**避免使用** |
-| `.text-muted` | foreground 55% |
-
-#### 交互态（已内建，不要逐页重写）
-
-- `.btn-primary` hover → `--color-primary-600`；active → `--color-primary-700`
-- `.btn-secondary` hover → foreground 7%；active → 14%
-- `.btn-ghost` hover → 青 10%；active → 18%
-- `.input:hover` → 边框 foreground 45%；`:focus-visible` → 青边框，`outline-offset: 0`
-- `.radio input:checked + .dot` → 青填充 + `inset 0 0 0 4px var(--color-background)` 做出内圈
-- `.seg-opt:has(input:checked)` → 青底 + 纸色字
-- 键盘焦点：`:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px }`
-- `::selection` → 青 30%
-- disabled → `opacity: 0.45` + `cursor: not-allowed`
-- `a` → 青，`text-underline-offset: 3px`；`.nav a:hover` / `[aria-current=page]` → 青
-
-### 8. 图标
-
-Phosphor（phosphoricons.com），**统一用 duotone 字重**。
-
----
-
-### 禁止清单
-
-1. 用线、边框或框盒搭页面结构 —— 页面是一张摊开的大报
-2. 同一个小组件里同时用青和洋红
-3. 压缩间距（密度 1.25× 是刻意的）
-4. 为界面 chrome 引入无衬线字
-5. `.card` 当布局容器
-6. `.hr` 当主要分隔手段
-7. 正文级文字用 `--color-primary` 本值（要用 `-700`）
-8. 工艺黄出现在正文或界面 chrome 里
-9. 合成斜体（用真斜体）
-10. 硬编码 hex / 字体名 / px（token 里已有的）
-
-### 接入方式
-
-```html
-<helmet>
-  <link rel="stylesheet" href="_ds/broadsheet-fed8f2ec-b6d6-4630-b717-2d074781ac94/styles.css">
-  <script src="_ds/broadsheet-fed8f2ec-b6d6-4630-b717-2d074781ac94/_ds_bundle.js"></script>
-</helmet>
-```
-
-组件直接在模板里挂载：
-
-```html
-<x-import component-from-global-scope="Broadsheet_broads.Button" hint-size="auto,40px">Label</x-import>
-```
-
-### 可用模板
-
-- `templates/deck/` —— 23 页演示起点：封面、目录、分节页、分栏、四宫格、数据表、SVG 图表、分色印版页、出血图、引言、结尾
-- `templates/landing/` —— 单页落地页（虚构产品 Daybreak，晨间新闻摘要）：衬线 hero、日期栏与索引头、功能分栏、分色照片、注册收尾
-
-## Do's and Don'ts
-
-- Do：按上述 token 与签名组件实现视觉语言，并根据用户内容组织信息。
-- Don't：不要为套用示例而改变用户内容的业务语义。