@lark-apaas/coding-steering 0.1.70 → 0.1.71

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

@@ -1,272 +0,0 @@
----
-version: alpha
-name: pop-art
-name_zh: 波普艺术
-description: 美式漫画/丝网印刷波普风——高饱和四色(黄/红/绿/蓝)+纯黑纯白,零渐变零透明叠加;所有容器纯黑粗描边(2~8px)配纯色零模糊硬阴影(色块偏移,非 blur),背景叠加半色调圆点纹理(致敬 Ben-Day dots);装饰大标题用漫画体 Bangers,全部标题/标签 uppercase+宽字距+font-black(900);圆角只取极端两端(超大圆角或完全无圆角);标题色块/CTA 施加 1~3deg 微倾斜模拟拼贴剪报感;交互强调硬位移("按下"感)而非缓动渐变。视觉冲击、直接、图形化。
-colors:
-  background: "#FFDE00"
-  primary: "#FFDE00"
-  primary-foreground: "#000000"
-  ring: "#000000"
-  signal: "#FF3B30"
-  success: "#4CD964"
-  info: "#007AFF"
-  foreground: "#000000"
-  border: "#000000"
-  card: "#FFFFFF"
-  surface-warm: "#FFF9C4"
-  surface-warm-alt: "#FFFDF5"
-  button-yellow: "#FFCC00"
-  status-green: "green-400(Tailwind 默认色,源未给 hex)"
-  status-red: "red-400(Tailwind 默认色,源未给 hex)"
-  overlay: "black/60"
-typography:
-  display:
-    fontFamily: 'Bangers, "PingFang SC", "Microsoft YaHei", "Noto Sans SC", cursive'
-    fontWeight: 400
-    usage: 装饰性大标题/Section Header(.pop-font),全大写宽字距
-  heading:
-    fontFamily: '"Noto Sans SC", system-ui, sans-serif'
-    fontWeight: 900
-    usage: 弹窗标题/卡片标题/侧边栏标题/统计数值等 font-black 主体文本,全大写
-  quote:
-    fontFamily: '"Noto Sans SC", system-ui, sans-serif'
-    fontWeight: 700
-    usage: 引言/描述性斜体文本,opacity 70%,唯一非 font-black 角色
-rounded:
-  xl: 4rem
-  lg: "3rem / 2.5rem"
-  full: 9999px
-spacing:
-  sidebar-width: 20rem
-  container-max: 80rem
-  content-padding: "24px~48px"
-  card-padding: "20px~32px"
-  sidebar-padding: 32px
-  modal-padding: 48px
-  column-gap: 48px
-  column-gap-v: 40px
-  nav-gap: 16px
-components:
-  pop-card:
-    background: "{colors.card}(默认) | {colors.surface-warm-alt} | {colors.foreground}"
-    border: "6px solid {colors.border}(弹窗用 8px)"
-    boxShadow: "12px 12px 0px 0px {colors.foreground}(默认档,见 Elevation)"
-    padding: "{spacing.card-padding}"
-    borderRadius: "{rounded.lg}"
-  pop-button:
-    border: "4px solid {colors.border}"
-    boxShadow: "4px 4px 0px 0px {colors.foreground}"
-    padding: "24px 12px(默认) | 24px(大按钮)"
-    borderRadius: "{rounded.full}"
-    fontStyle: font-black uppercase tracking-widest
-    variants: "red={colors.signal}白字(暂停/停止) | green={colors.success}黑字(开始/选中) | blue={colors.info}白字(选择/商店) | yellow={colors.button-yellow}黑字(默认/重置) | black={colors.foreground}白字(强调) | white={colors.card}黑字(未选中)"
-    active: "translate(2px,2px)+阴影缩小至 2px;disabled opacity-50;选中态 scale-105+ring-4 ring-black ring-offset-2"
-  section-header:
-    background: "{colors.foreground} | {colors.signal}(按主题)"
-    color: "#FFFFFF"
-    padding: "32px 12px"
-    borderRadius: "0(完全无圆角,方形色块呼应剪报/漫画分格感)"
-    rotate: "-1deg | 1deg"
-    boxShadow: "8px 8px 0 0 {colors.success} | 8px 8px 0 0 {colors.foreground}"
-    typography: text-5xl font-black pop-font uppercase tracking-tighter
-  status-bar:
-    background: "{colors.foreground}"
-    color: "#FFFFFF"
-    padding: "32px 20px"
-    borderRadius: "0 0 2.5rem 2.5rem"
-    typography: font-black uppercase tracking-widest text-xs
-    layout: flex justify-between items-center
-  progress-bar:
-    track: "{colors.foreground}底,border-4 {colors.border},{rounded.full},内 padding 4px"
-    inner-track: "bg-gray-900,高 32px,{rounded.full}"
-    fill: "{colors.success},{rounded.full}"
-    label: "覆盖居中,{colors.card} 10px font-black uppercase tracking-widest"
-  stat-item:
-    layout: flex justify-between items-center
-    divider: "border-b-4 {colors.border}/5(见 Exceptions),底 padding 20px"
-    label: font-black text-lg opacity-60 uppercase tracking-widest
-    value: "font-black text-5xl + 主题色 + drop-shadow(2px 2px 0 {colors.foreground})"
-  pill-tag:
-    background: "语义色浅底(如 -50)"
-    color: "语义色主色(如 -500)"
-    padding: "16px 8px"
-    typography: text-xs font-black uppercase
-    borderRadius: "{rounded.full}"
-    border: "2px solid 语义色浅描边(如 -100)"
-    boxShadow: "2px 2px 0 0 {colors.foreground}(纯色偏移,禁止半透明)"
-  modal-overlay:
-    mask: "{colors.overlay}+backdrop-blur-md,z-[100],fixed inset-0 flex center,padding 24px"
-    card: "{colors.card}底,border-[8px] {colors.border},padding {spacing.modal-padding},{rounded.xl},boxShadow 24px 24px 0 0 {colors.button-yellow}"
-    enter: "scale 0.8→1,rotate -10deg→0"
-  quote-block:
-    typography: font-bold italic leading-relaxed opacity-70
-    border: "border-l-8 border-yellow-400,左 padding 24px"
-  chart-container:
-    background: "{colors.card}"
-    border: "4px solid {colors.border}"
-    boxShadow: "12px 12px 0 0 {colors.foreground}(见 Elevation 标准档,禁止默认 blur 投影)"
-    borderRadius: "{rounded.lg}"
-    padding: "{spacing.card-padding}"
-    seriesColors: "循环取用 {colors.primary}/{colors.signal}/{colors.success}/{colors.info}/{colors.button-yellow},不使用渐变/半透明系列色"
-    axisLabel: "font-black text-xs {colors.foreground};刻度/数值本身非标题语义,不强制 uppercase"
-    legend: "font-black uppercase tracking-wide text-xs,图例色块用方形(非圆点),呼应硬边气质"
-anchors:
-  - id: halftone-dot-bg
-    type: pattern
-    desc: 主内容区/黑底区块背景叠加半色调圆点纹理(见 Shapes),Ben-Day dots 印刷致敬,是风格辨识度的关键细节
-  - id: hard-offset-shadow
-    type: token
-    desc: 全部阴影零模糊纯色块偏移(见 Elevation 分级),禁止 blur,拟丝网印刷错版效果
-  - id: heavy-ink-border
-    type: token
-    desc: 卡片/按钮/容器统一纯黑粗描边(见 Shapes 边框系统),是区分波普与普通扁平化的关键特征
-  - id: bangers-display-type
-    type: token
-    desc: 装饰性大标题用漫画体(见 typography.display),全大写宽字距,视觉冲击直接
-  - id: micro-tilt-collage
-    type: pattern
-    desc: 标题色块/CTA/装饰元素施加微倾斜(见 components 各处 rotate),模拟拼贴剪报感
-  - id: extreme-rounded-or-none
-    type: pattern
-    desc: 圆角要么取极端超大档(见 rounded),要么完全无圆角,拒绝居中档
-  - id: pop-card
-    type: component
-    desc: 核心卡片基座(见 components.pop-card),粗描边+硬阴影+超大圆角三件套
-  - id: pop-button
-    type: component
-    desc: 核心按钮(见 components.pop-button),六色语义变体+按下位移无缓动
-gaps:
-  - 无暗色模式定义
-  - 无表单控件(input/select 等)规范
-  - 状态指示灯(colors.status-green/status-red)源仅给 Tailwind 默认色名,未给具体 hex,已照抄色名而非编造 hex(补充项:如需精确 hex 需与调用方确认)
-  - 源应用绑定特定业务插画动效(如吉祥物呼吸、收获弹跳)未纳入通用组件规范,仅收录按钮/卡片/进度条等通用交互动效
-  - 字体 @import 具体 URL 源未给出字符串(仅注明 Google Fonts 加载),已按标准 Google Fonts CDN 语法补充为补充项
-  - 动效缓动函数:v_n 仅有定性描述"弹跳突然",无具体缓动值;本版补充 cubic-bezier(0.34,1.56,0.64,1) 回弹曲线作为可执行默认值(补充项,非源文件原有数值)
-exceptions:
-  - 引言(quote-block)字重为 font-bold(非通用规则的 font-black),是唯一非 font-black 主体文本
-  - 弹窗遮罩自带 backdrop-blur,是唯一允许的模糊效果(不属于阴影系统)
-  - 次级分隔线/边框允许不透明度衰减(border-black/5、/10、/20),不违反"边框必须纯黑实线"的硬规则;stat-item 的行内 divider 属此例外,该行作为列表行不要求单独描边,其可见容器边界由外层承载的 pop-card 提供
-  - 状态指示灯(status-green/status-red)使用 Tailwind 默认命名色,不入常规九色主色板引用
----
-
-## Overview
-
-美式漫画 × 丝网印刷波普美学。用高饱和色块、粗黑描边、硬偏移阴影和半色调纹理组织内容；导航与模块布局按实际应用决定。情绪基调:直接、有力、图形化、视觉冲击。
-
-## Colors
-
-| 角色 | 值 | 用法 |
-|-----|-----|-----|
-| background | {colors.background} | 页面主背景(与 primary 同值) |
-| primary | {colors.primary} | 主按钮默认态、签名黄 |
-| primary-foreground | {colors.primary-foreground} | 压在 primary 黄底上的黑字 |
-| ring | {colors.ring} | 选中态 ring-4 ring-black 聚焦环 |
-| signal | {colors.signal} | 强调/危险操作、暂停停止按钮、成就标题背景 |
-| success | {colors.success} | 开始按钮、进度条填充、侧边栏标题阴影 |
-| info | {colors.info} | 选中态、CTA 卡片、连续记录数值、选择按钮 |
-| foreground | {colors.foreground} | 阴影、头部导航栏、标题块背景、主要文本 |
-| border | {colors.border} | 全部纯黑粗描边(与 foreground 同值) |
-| card | {colors.card} | 卡片基底、内容面板、未选中按钮底色 |
-| surface-warm | {colors.surface-warm} | 侧边栏背景,降低纯白刺眼感 |
-| surface-warm-alt | {colors.surface-warm-alt} | 计时器一类卡片内底色 |
-| button-yellow | {colors.button-yellow} | 重置按钮、激活态、统计数值高亮 |
-| status-green | {colors.status-green} | 运行态指示灯(配 animate-pulse) |
-| status-red | {colors.status-red} | 就绪态指示灯 |
-| overlay | {colors.overlay} | 弹窗背景遮罩,配 backdrop-blur-md |
-
-## Typography
-
-全局样式首行原样写入(HARD REQUIREMENT,禁止替换;URL 为标准 Google Fonts CDN 语法补充项):
-
-```css
-@import url('https://fonts.googleapis.com/css2?family=Bangers&family=Noto+Sans+SC:wght@400;700;900&display=swap');
-```
-
-Bangers 为拉丁漫画体,无中文字形,fontFamily 已含 CJK 兜底(PingFang SC/Microsoft YaHei/Noto Sans SC,系统字体无需额外 @import)。
-
-| 层级 | 尺寸 | 权重 | 附加样式 | 角色 |
-|-----|-----|-----|---------|-----|
-| 巨屏数字 | 6.5rem~8.5rem(md) | 900 | tracking 0.1em,leading-none | heading |
-| 弹窗标题 | text-6xl(3.75rem) | 900 | italic uppercase tracking-widest | heading |
-| 区块大标题 | text-5xl(3rem) | 900 | uppercase tracking-tighter,带背景色块 | display/heading |
-| 侧边栏标题 | text-3xl(1.875rem) | 900 | uppercase leading-none tracking-tighter,居中 | heading |
-| 卡片标题 | text-2xl~text-3xl | 900 | uppercase italic tracking-tight | heading |
-| 引言标题 | text-xl(1.25rem) | 900 | uppercase,decoration-8 下划线 | heading |
-| 标签文字 | text-xs~text-sm | 900 | uppercase tracking-widest | heading |
-| 微型标签 | text-[10px] | 900 | uppercase tracking-[0.2em] | heading |
-| 引言正文 | text-base(1rem) | 700 | italic leading-relaxed opacity-70 | quote |
-
-排版规则:全部标题/标签 uppercase(禁止小写),这一条硬约束不因层级而异;但**宽字距(tracking-widest 或以上)只是标签/按钮/微型文字类角色的强制要求**(对应上表"标签文字""微型标签"两行),展示级大标题(区块大标题/侧边栏标题/卡片标题)按上表走 tracking-tighter/tracking-tight,是漫画大字号海报的正当紧凑排版,不视为"宽字距不足";两类角色不互相覆盖,禁止把大标题也拉成 tracking-widest。强调数值叠加 drop-shadow(2px 2px 0 {colors.foreground}) 增加立体感。
-
-## Layout
-
-- 页面可使用 {colors.background} 底叠加半色调纹理，内容容器最大宽度参考 {spacing.container-max}，内边距使用 {spacing.content-padding}。
-- 导航、核心视图、统计、引言和 CTA 按实际任务组织；侧栏和左右双列只是可选构图，不是风格要求。
-- 视图切换:进入 opacity 0→1 配 scale 0.95→1 或 y 30→0,退出反向;缓动统一用 cubic-bezier(0.34,1.56,0.64,1)(回弹感,见 Hard Rules),禁止用框架默认的 ease/ease-out。
-- 响应式(移动优先):按内容关系减少列数，导航选择适合当前应用的窄屏形态；不得简单隐藏业务必要内容，主内容 padding 随宽度调整。
-
-## Elevation & Depth
-
-阴影分级,全部零模糊纯色块偏移,颜色随语境变化(不固定同一色):
-
-| 档位 | 值 | 用途 |
-|-----|-----|-----|
-| 超大 | 24px 24px 0 0 {colors.button-yellow} | 弹窗卡片 |
-| 大 | 16px 16px 0 0 {colors.foreground} | 计时器一类主卡片 |
-| 标准 | 12px 12px 0 0 {colors.foreground} | 普通内容卡片、CTA 卡片、图表容器(见 Components.chart-container) |
-| 中 | 8px 8px 0 0 {colors.success} 或 {colors.foreground} | 区块标题色块 |
-| 小 | 6px 6px 0 0 {colors.signal} 或 {colors.success} | 侧边栏卡片、品牌标题 |
-| 按钮 | 4px 4px 0 0 {colors.foreground} | 所有按钮默认态 |
-| 按钮按下 | 2px 2px 0 0 {colors.foreground} | 按钮 active 态 |
-| 标签 | 2px 2px 0 0 {colors.foreground} | pill-tag 等小型标签容器 |
-| 文字 | drop-shadow 2px 2px 0 {colors.foreground} | 统计数字高亮 |
-
-所有阴影均为零模糊纯色偏移(禁止任何 rgba/半透明色值),这是波普风格的核心视觉标识(见 Hard Rules)。
-
-## Shapes
-
-- 圆角:见 frontmatter rounded,**只有 xl(4rem)/lg(3rem~2.5rem)/full(9999px 全圆)三档可选**,不存在任何 16~32px 区间的"中等圆角"选项;需要方形直角时直接写字面值 0(如 section-header),禁止引入新的居中档半径。
-- 边框:超粗 8px(弹窗)、主 6px(pop-card)、标准 4px(按钮/CTA/进度条/图表容器)、细 2px(次级/标签)、虚线 4px dashed(提示占位区域),统一纯黑 {colors.border};次级分隔线允许低透明度(见 Exceptions)。
-- 半色调纹理:`radial-gradient(rgba(0,0,0,0.1) 2px, transparent 2px)`,background-size 20px 20px,叠加于主内容区/黑底区块背景,致敬 Ben-Day dots 印刷技法。
-- 微倾斜:标题色块/CTA 约 -1deg~2deg,装饰元素随机小角度,营造拼贴/剪报感,幅度不超过 3deg 避免阅读困难。
-
-## Components
-
-核心组件规格见 frontmatter components(pop-card / pop-button / section-header / status-bar / progress-bar / stat-item / pill-tag / modal-overlay / quote-block / chart-container)。补充细节:
-
-- **PopCard**:所有内容卡片的基座;variant=黑底用于对比色块,可视强调需要升级到 Elevation 大/超大档。
-- **PopButton**:六色变体覆盖主要操作语义(红=危险/暂停、绿=开始/选中、蓝=选择、黄=默认/重置、黑=强调、白=未选中);圆角改为 {rounded.full} 药丸形,选中态叠加 ring-4 ring-black ring-offset-2 + scale-105。
-- **SectionHeader**:承担页面/模块分区职责,signal/foreground 背底与 success/foreground 阴影交替使用,方形直角(borderRadius:0)呼应剪报分格,保持区域可扫描。
-- **ProgressBar**:外框/内轨/填充三层结构,标签绝对居中覆盖,填充色随语义变化(默认 success)。
-- **StatItem**:关键数值展示,标签 60% 不透明度弱化,数值用主题色 + drop-shadow 强调立体感;该行不单独描边(边界由外层 pop-card 提供,见 Exceptions)。
-- **PillTag**:用语义色浅底/主色/浅描边组合承载标签场景,阴影为纯色 2px 偏移(禁止 rgba 半透明),非主色板核心角色,轻量补充。
-- **ModalOverlay**:遮罩 60% 黑 + backdrop-blur-md,卡片入场 scale 0.8→1 + rotate -10deg→0,是全局唯一使用模糊效果的场景。
-- **QuoteBlock**:左侧粗色条(border-l-8)+ 斜体正文,是唯一非 font-black 主体文本角色。
-- **ChartContainer**:报表/图表类页面(折线图、饼图、柱状图、雷达图、热力图、桑基图等)统一套用与 PopCard 同级的边框+阴影+圆角三件套(4px 纯黑描边 + 标准档硬偏移阴影 + {rounded.lg}),禁止套用常规仪表盘的细边框+软阴影+默认圆角;图表序列色循环取 primary/signal/success/info/button-yellow,图例用方形色块 + font-black uppercase 标签,坐标轴刻度数值本身不强制 uppercase。
-
-## Do's and Don'ts
-
-- 微倾斜控制在 1~3deg,过度会导致阅读困难。
-- 半色调圆点纹理保持 2px 点径/20px 间距的比例,过密或过疏都会喧宾夺主。
-- 优先用色块区分内容层级(如黑底白字/强调色底白字),而非仅靠字号变化。
-- 装饰性大标题字体(Bangers)仅用于强调型标题,不作长段正文字体。
-- 报表/图表类内容不因"数据展示"豁免波普容器规格,ChartContainer 与 PopCard 同规格,不得退化为默认仪表盘卡片样式。
-
-## Hard Rules
-
-- 所有阴影必须零模糊纯色块偏移,禁止使用 blur 阴影或任何 rgba/半透明色值(Material/扁平化风格特征禁止混入)。
-- 每个可见容器至少 2px 纯黑描边起,禁止无描边容器;图表/数据可视化容器同样适用,不得因内容类型豁免(见 Components.ChartContainer)。
-- 标题与标签统一 uppercase,禁止小写标题;宽字距(tracking-widest 或以上)仅强制要求标签/按钮/微型文字类角色,展示级大标题按 Typography 表使用 tracking-tighter/tracking-tight(紧凑排版是正当设计选择,不算违规,见 Typography 排版规则)。
-- 字重优先 font-black(900)或 font-bold(700),禁止 regular(400)/light(300)正文字重。
-- 圆角只能取 xl/lg/full 三档或字面值 0,禁止任何 16~32px 区间的中等圆角(见 Shapes)。
-- 配色保持高饱和纯色块,禁止半透明叠加/柔和渐变。
-- 交互动画使用位移/缩放/旋转的"弹跳突然"感,禁止 ease/ease-out/ease-in-out/linear 等 CSS 内置缓动关键字;统一使用 cubic-bezier(0.34,1.56,0.64,1) 回弹曲线,悬停/点击类瞬时反馈 duration-75~150,页面级入场 duration-200~300。
-- 字体 @import 必须原样写入全局样式首行,禁止替换或省略(HARD REQUIREMENT)。
-
-## Exceptions
-
-- 引言(quote-block)字重为 font-bold,是唯一非 font-black 主体文本角色。
-- 弹窗遮罩自带 backdrop-blur,是唯一允许的模糊效果(不属于阴影系统)。
-- 次级分隔线/边框允许不透明度衰减({colors.border}/5、/10、/20),不违反"边框必须纯黑实线"的硬规则;stat-item 行内 divider 属此例外,不代表该行需要独立完整描边。
-- 状态指示灯(colors.status-green/colors.status-red)使用 Tailwind 默认命名色,不入常规九色主色板引用。

package/steering/nestjs-react-fullstack/skills/design-guide/references/sap-fiori-horizon.md

@@ -1,154 +0,0 @@
----
-version: alpha
-name: sap-fiori-horizon
-name_zh: 晨光远航
-description: >-
-  冷白画布、浅灰分组面与深蓝文字，企业蓝仅标记主操作、链接、选中态和焦点。
-  使用 6–8px 圆角、1px 边框、无阴影普通卡片、紧凑表格和表单，并在窄屏重排内容。
-colors:
-  background: "#FFFFFF"
-  muted: "#F5F6F7"
-  card: "#FFFFFF"
-  foreground: "#1D2D3E"
-  muted-foreground: "#556B82"
-  border: "#D9D9D9"
-  primary: "#0A6ED1"
-  primary-foreground: "#FFFFFF"
-  accent: "rgba(10, 110, 209, 0.10)"
-  ring: "#0A6ED1"
-typography:
-  heading:
-    fontFamily: '"Inter", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif'
-    fontWeight: 600
-  body:
-    fontFamily: '"Inter", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif'
-    fontSize: 14px
-    lineHeight: 1.5
-    fontWeight: 400
-  label:
-    fontFamily: '"Inter", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif'
-    fontSize: 12px
-    lineHeight: 1.35
-    fontWeight: 500
-  number:
-    fontFamily: '"Inter", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif'
-    fontVariantNumeric: tabular-nums
-rounded:
-  control: 6px
-  card: 8px
-  pill: 999px
-spacing:
-  compact-gap: 8px
-  control-gap: 12px
-  content-gap: 16px
-  section-gap: 24px
-  card-padding: 16px
-components:
-  primaryButton:
-    background: "{colors.primary}"
-    color: "{colors.primary-foreground}"
-    border: "1px solid {colors.primary}"
-    borderRadius: "{rounded.control}"
-    description: 每个操作组只设一个蓝色主操作
-  secondaryButton:
-    background: "{colors.background}"
-    color: "{colors.primary}"
-    border: "1px solid {colors.border}"
-    borderRadius: "{rounded.control}"
-  card:
-    background: "{colors.card}"
-    border: "1px solid {colors.border}"
-    borderRadius: "{rounded.card}"
-    description: 使用明度差和边框分层，不使用常驻阴影
-  field:
-    background: "{colors.background}"
-    color: "{colors.foreground}"
-    border: "1px solid {colors.border}"
-    borderRadius: "{rounded.control}"
-    focus: "2px solid {colors.ring}"
-  table:
-    headerBackground: "{colors.muted}"
-    rowBorder: "1px solid {colors.border}"
-    description: 浅灰表头、紧凑行高、稳定列对齐和等宽数字
-  status:
-    borderRadius: "{rounded.pill}"
-    description: 状态色必须配文字或图标
-anchors:
-  - id: enterprise-neutral-palette
-    type: token
-    desc: 白色画布、浅灰表面、深蓝文字和单一企业蓝强调
-  - id: coherent-component-language
-    type: pattern
-    desc: 表单、表格、卡片和反馈使用相同的边框、圆角、间距与状态规则
-  - id: dense-task-layout
-    type: pattern
-    desc: 高密度信息通过对齐、分组和紧凑间距组织，不依赖装饰性容器
-  - id: adaptive-accessibility
-    type: pattern
-    desc: 窄屏重排内容，并保留键盘焦点、触控尺寸和非颜色状态提示
----
-
-## Overview
-
-高密度企业界面。白色画布与浅灰表面分层，深蓝文字承载信息，企业蓝只标记操作、链接、选中态和焦点。
-
-## Colors
-
-| 角色 | Token | 用法 |
-|------|-------|------|
-| 画布 | `{colors.background}` | 页面与输入区域 |
-| 次级表面 | `{colors.muted}` | 表头、分组、弱选中态 |
-| 独立表面 | `{colors.card}` | 卡片与浮层 |
-| 主文字 | `{colors.foreground}` | 标题、正文、数字、图标 |
-| 次文字 | `{colors.muted-foreground}` | 说明和元信息 |
-| 分隔线 | `{colors.border}` | 控件、表格和分组边界 |
-| 企业蓝 | `{colors.primary}` | 主操作、链接、选中态和焦点 |
-| 主色上文字 | `{colors.primary-foreground}` | 主按钮文字 |
-| 弱强调 | `{colors.accent}` | 当前行、轻提示和弱选中背景 |
-
-企业蓝不用于普通正文、卡片底色或大面积背景。信息层级优先使用字重、间距、表面和边框。
-
-## Typography
-
-```css
-@import url('https://miaoda.feishu.cn/fonts/css2?family=Inter:wght@400;500;600;700&family=Noto+Sans+SC:wght@400;500;700&display=swap');
-```
-
-- 标题使用 600 字重；正文默认 14px / 1.5；标签使用 12px / 1.35。
-- 数字启用 `font-variant-numeric: tabular-nums`。
-- 中文多行标题行高不低于 1.1，不使用负字距。
-
-## Layout
-
-- 以信息依赖和操作频率决定分组、顺序与操作位置。
-- 桌面端保持紧凑行高、稳定对齐和清晰分组；窄屏重排内容、折叠次要列并收纳导航。
-- 列数、分栏比例和导航形式由内容与视口决定。
-- 不固定侧栏、Hero、KPI 数量、首页结构或区块顺序。
-
-## Elevation & Depth
-
-- 页面、次级表面和独立表面通过明度差与 1px 边框分层。
-- 普通卡片不使用阴影；菜单、弹层等覆盖型表面可使用一层低透明度柔影。
-
-## Shapes
-
-- 控件使用 6px 圆角，卡片使用 8px 圆角，状态标签可使用全圆角。
-- 同级组件保持相同圆角和边框；普通按钮与输入框不使用胶囊形。
-
-## Components
-
-- **主按钮** `{components.primaryButton}`：蓝底白字，每个操作组只设一个。
-- **次按钮** `{components.secondaryButton}`：白底细边框，不与主操作竞争。
-- **字段** `{components.field}`：标签常驻，错误信息紧邻字段，键盘焦点使用 2px 蓝色轮廓。
-- **卡片** `{components.card}`：仅包裹独立信息组，不把每行内容卡片化。
-- **表格** `{components.table}`：浅灰表头、细行分隔、稳定列对齐；数字使用等宽数字。
-- **状态** `{components.status}`：同时使用颜色和文字或图标。
-
-## Hard Rules
-
-1. 保持白色画布、浅灰表面、深蓝文字和单一企业蓝强调的颜色角色。
-2. 企业蓝只用于操作、链接、选中态和焦点。
-3. 表单、表格和交互状态必须提供清晰键盘焦点及非颜色提示。
-4. 同级组件使用一致的圆角、边框、间距和反馈状态。
-5. 禁止固定侧栏、Hero、KPI 数量、分栏比例或区块顺序。
-6. 字体使用 Inter 与中文兜底栈，数字使用等宽数字特性。

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

@@ -1,68 +0,0 @@
-# 风格 token → 全栈主题槽位的语义映射规则
-
-> 往 `client/src/tailwind-theme.css` 写颜色前读本文。预置风格、用户指定方向和 frontend-design 自定义方向都适用。
-
-## 0. 先判明暗
-
-看风格的画布色（`background`，即最底层那个面）。画布是渐变时按渐变的主要色判断明暗，`--background` 也只填这个单一主要色，渐变本身按 §3 另加变量。亮度低于 50% 视为**深色风格**，深色时必须改下面这些模板默认值，后果见表下说明：
-
-| 变量 | 浅色（模板默认） | 深色必须改成 |
-|---|---|---|
-| `--elevate-1` / `--elevate-2` | `rgba(0,0,0,.03)` / `.08` | `rgba(255,255,255,.04)` / `.10` |
-| `--button-outline` / `--badge-outline` | `rgba(0,0,0,.10)` / `.05` | `rgba(255,255,255,.12)` / `.06` |
-| `--opaque-button-border-intensity` | `-8`（压暗） | `+8`（提亮） |
-| `--muted` / `--secondary` / `--accent`（风格未给时） | `hsl(220 14% 96%)` 浅灰 | 比 `--card`、`--popover` 中较亮者再亮一档的中性深色（见 §1） |
-
-前三行是 hover / active / 按钮描边的唯一来源，模板里写死了黑色，深色底上不改 = 悬停无反馈、按钮无边；最后一行不改 = 骨架屏和菜单悬停在深色底上变成刺眼的浅色块。
-
-## 1. 同名即同义
-
-预置风格的 `colors` 已按 shadcn 槽位命名：key 与槽位同名（`primary`、`background`、`muted`、`accent` 等），就直接写进同名变量，含义与 shadcn 一致。不是槽位名的 key 按下表看角色：状态色（`danger`、`error`、`positive` 这类）落到 `--destructive` / `--success` / `--warning`，导航与顶栏色落到 `--sidebar*`；找不到对应角色的才是风格专有色，按 §3 处理。
-
-应用里较早生成的 `design.md` 可能还是旧命名：没有 `primary`，签名色叫 `accent`。遇到这种文件不按名字落槽，按下表看角色，签名色进 `--primary`。
-
-用户指定或自定义方向由你自己给颜色命名时，遵守同一约定：用了槽位名就必须承担槽位含义，签名色叫 `primary`。各槽位的角色：
-
-| 角色 | 槽位 |
-|---|---|
-| 最底层页面画布 | `--background` |
-| 卡片 / 内容块的面 | `--card`、`--popover`（`--popover` 承载下拉与弹层，必须不透明；风格卡片是半透明玻璃时，`--popover` 取不透明的表面色） |
-| 比画布略深或略浅的次级面、区块底 | `--muted`、`--secondary` |
-| 正文主文字 | `--foreground`、`--card-foreground`、`--popover-foreground` |
-| 次要 / 弱化文字 | `--muted-foreground` |
-| 分隔线、描边 | `--border`、`--input` |
-| **唯一那个高亮色**（CTA、激活态、数值点睛所用） | `--primary` + `--ring`；其上的文字给 `--primary-foreground` |
-| 悬停、选中、加载占位这类**弱强调面** | `--accent` + `--accent-foreground` |
-| 导航栏 / 侧边栏 / 顶栏专用色 | `--sidebar*` 那 8 个（见 §4） |
-
-`--accent`、`--muted`、`--secondary` 都是贴近画布的浅色面（深色风格则是贴近画布的深色面）：模板的骨架屏、下拉菜单与选择器的悬停行、日历和切换按钮的选中底都直接用它们铺色。高饱和色放进这三个槽位，这些区域会整块被染色。风格没给 `accent` 时，`--accent` 直接取 `--muted` 的值。`--muted`、`--secondary` 缺失时取中性面，并与 `--card`、`--popover` 拉开一档，否则卡片和菜单里的悬停行、骨架屏看不出来：浅色风格默认用模板浅灰，它和 `--card` 或 `--popover` 太近时取比两者中较深者再深一档的中性浅色；深色风格取比 `--card`、`--popover` 中较亮者再亮一档的中性深色。不要从 `--primary` 派生——那会让菜单悬停和骨架屏都带上主色调。
-
-**`--x-foreground` 是「压在 x 上的文字色」**，不是 x 的浅色底。徽章底色（如 `success-soft`）按 §3 另加变量。
-
-## 2. 缺源怎么办（这是多数情况，不是例外）
-
-预置风格通常只给出部分槽位，状态色和图表色缺得最多。照抄模板默认的蓝/红/绿/橙会把风格外的色相直接注进去。按下面推：
-
-- **缺 `primary`**：风格若明确宣称无强调色（暗夜鎏金、夜航灯塔那类），`--primary` 填最高对比的中性色（深色风格填最亮的 ink，浅色风格填最深的 ink），`--primary-foreground` 填画布色。**不要自己发明一个强调色。**
-- **缺 `success` / `danger` / `warning`**：保留语义可辨的最低要求，但把饱和度和明度拉到风格的水位——取模板默认的色相，饱和度与明度对齐风格里已有的彩色 token。**风格一个彩色 token 都没有时（暗夜鎏金那类），饱和度取 35% 为下限**，不要跟着中性色降到 7%——那样红绿橙互相分不出来。这种情况下状态色只用于 badge 与文字，不做面。风格明确禁止某类色（克莱因蓝的双色绝对主义、暗夜鎏金的严格中性）时，只在状态标记这一个位置破例，其余不用。
-- **缺 `primary-foreground`**：在画布色与最深的正文色里选与 `--primary` 对比度更高的那个，不要沿用模板默认白字——亮黄、亮绿主色上白字看不清。
-- **缺 chart-1..5**：从 `--primary` 的色相出发生成 5 档单色阶（改明度与饱和度，不引入新色相），不要直接套模板默认图表色。
-
-## 3. 风格专有 token 不塞进槽位
-
-`surface-dark-elevated`、`hero-stripe-start`、`axisColor`、`tooltipBorder`、`header-start/end` 这类没有对应槽位的，**按原名另加 CSS 变量**（`--surface-dark-elevated: …`），在组件里直接引用。塞进最近似的 shadcn 槽位会让全局组件跟着变形。
-
-## 4. 别漏的三处联动
-
-1. **`--sidebar*` 是独立的 8 个变量**，不跟随 `--background`/`--card`。风格有 `header` / `nav` 类 token（8 个风格有）就落这里；没有就按画布与卡片的关系推一档。漏改 = 导航栏还是模板的默认蓝灰。
-2. **`--primary-border` / `--secondary-border` / `--destructive-border` / `--accent-border` / `--muted-border` 把源色内联写死了**，形如 `hsl(from hsl(221 83% 53%) h s calc(l + var(--opaque-button-border-intensity)))`。只改 `--primary` 不改它，按钮边框还是原来的蓝。**这 5 个必须同步替换内联的那个色。**
-3. **阴影是 8 个 `--shadow-*` 加 6 个参数，全是黑色 1-5% 透明度。** 风格说「全局无阴影」就把 8 个全设 `none`；说「硬阴影」（牛皮粉彩 4px 零模糊、波普艺术色块偏移）要把 `--shadow-blur` 设 0 并给实色；说「漫射深投影」（暗夜鎏金）要加大 blur 与不透明度。只改颜色不改这套 = 风格的层次语言没落地。
-
-## 5. 非颜色槽位
-
-- `--radius` 一个值驱动 sm/md/lg/xl（`calc(--radius ± 4px)`）。零圆角风格设 `0`；超大圆角（有机极简 40-48px、翡翠光晕 32-40px）设到 `2rem` 以上后要复核 sm 档是否还合理。
-- `--font-sans` / `--font-serif` / `--font-mono`：风格指定了字体族就替换，**保留模板原有的中文与 emoji 回退链**（`PingFang SC`、`Microsoft Yahei`、`Apple Color Emoji` 那串），只在最前面插入风格字体。删掉回退链会让中文掉字形。
-
-## 6. 值的写法
-
-模板里 hex（`--shadow-color: #000000`）、`hsl(...)`、`rgba(...)` 三种并存，**都合法，照风格原值写即可**。带透明度的色（`rgba(255,255,255,.04)` 这种发丝边）保留 rgba，不要强行转 hsl。