136 lines
6.6 KiB
JSON
136 lines
6.6 KiB
JSON
{
|
||
"slug": "icon",
|
||
"end": "css",
|
||
"curated": true,
|
||
"summary": "CSS 端图标样式：1em 方块内联 SVG、四档尺寸变量、五档语义色与旋转动画（含动效降级）。",
|
||
"usage": [
|
||
"尺寸系统用 CSS 变量驱动：.kole-icon-icon--small/default/large 分别把 --kole-icon-size 指向 16/20/24 的三个令牌，--xlarge 固定 32px（Icon.css:104-107）。",
|
||
"内联 SVG 用 .kole-icon-icon__svg 定成 display:block 且宽高都为 1em，因此外层 font-size 就是图标尺寸，overflow:visible 允许描边溢出（Icon.css:98）。",
|
||
"字形字符路径用 .kole-icon-icon__glyph：display:block、font-family:inherit、line-height:1，避免不同字形基线漂移（Icon.css:101）。",
|
||
"语义色是五条独立规则：--brand/--secondary/--danger/--success/--warning 各取一个颜色令牌，default 不加类即继承父级文字色（Icon.css:112-116）。",
|
||
"旋转由 .kole-icon-icon--spin 加 @keyframes kole-icon-spin（rotate 360deg、1s 线性无限）实现（Icon.css:119-121）。",
|
||
"动效降级写在媒体查询里：prefers-reduced-motion: reduce 下把 --spin 的 animation 置 none，动画完全停止（Icon.css:123-125）。"
|
||
],
|
||
"bestPractices": [
|
||
"本文件同时交付了演示场景类（.kole-icon-grid / .kole-icon-sort-head / .kole-icon-empty）与一大批同前缀通用类（.kole-icon-button/.kole-icon-table 等），图标本体只用 kole-icon-icon 一族，混用会让样式来源变乱（Icon.css:127-134 与 2-70）。",
|
||
"xlarge 档用的是硬编码 32px 而不是令牌，其余三档都走 --kole-icon-size-*，做主题令牌替换时注意这一处不一致（Icon.css:104-107）。",
|
||
"旋转动画对 prefers-reduced-motion 已有处理，但其它动画（若在业务里新增）需要各自补降级；这里是唯一一处 media query（Icon.css:123-125）。",
|
||
"语义色注释明确标注了亮色对比度区间 5.00–5.87:1、对卡片底 ≥3:1，用于满足 WCAG 1.4.11 非文本对比；改动这些令牌时要复核该结论（Icon.css:109-111）。"
|
||
],
|
||
"apiCarrier": {
|
||
"kind": "classes",
|
||
"note": "CSS 端以类名交付：.kole-icon-icon 是根类，尺寸（--small/--default/--large/--xlarge）与色调（--brand/--secondary/--danger/--success/--warning）与旋转（--spin）都是修饰类，内部两个结构类 __svg 与 __glyph 决定 SVG 或字形字符的呈现；名字表与查表逻辑不在这里。",
|
||
"table": [
|
||
{
|
||
"name": "kole-icon-icon",
|
||
"type": "根类名",
|
||
"desc": "图标根节点：1em 方块、颜色继承、与文字基线对齐"
|
||
},
|
||
{
|
||
"name": "kole-icon-icon--small",
|
||
"type": "尺寸类名",
|
||
"desc": "--kole-icon-size 指向 16 令牌"
|
||
},
|
||
{
|
||
"name": "kole-icon-icon--default",
|
||
"type": "尺寸类名",
|
||
"desc": "--kole-icon-size 指向 20 令牌"
|
||
},
|
||
{
|
||
"name": "kole-icon-icon--large",
|
||
"type": "尺寸类名",
|
||
"desc": "--kole-icon-size 指向 24 令牌"
|
||
},
|
||
{
|
||
"name": "kole-icon-icon--xlarge",
|
||
"type": "尺寸类名",
|
||
"desc": "固定 32px（该档未走令牌）"
|
||
},
|
||
{
|
||
"name": "kole-icon-icon--brand",
|
||
"type": "色调类名",
|
||
"desc": "color 取 --kole-color-brand"
|
||
},
|
||
{
|
||
"name": "kole-icon-icon--secondary",
|
||
"type": "色调类名",
|
||
"desc": "color 取 --kole-color-text-secondary"
|
||
},
|
||
{
|
||
"name": "kole-icon-icon--danger",
|
||
"type": "色调类名",
|
||
"desc": "color 取 --kole-color-error"
|
||
},
|
||
{
|
||
"name": "kole-icon-icon--success",
|
||
"type": "色调类名",
|
||
"desc": "color 取 --kole-color-success"
|
||
},
|
||
{
|
||
"name": "kole-icon-icon--warning",
|
||
"type": "色调类名",
|
||
"desc": "color 取 --kole-color-warning"
|
||
},
|
||
{
|
||
"name": "kole-icon-icon--spin",
|
||
"type": "状态类名",
|
||
"desc": "1s 线性无限旋转；reduce 动效下 animation:none"
|
||
},
|
||
{
|
||
"name": "kole-icon-icon__svg",
|
||
"type": "结构类名",
|
||
"desc": "内联 SVG：block 布局、1em×1em、overflow visible"
|
||
},
|
||
{
|
||
"name": "kole-icon-icon__glyph",
|
||
"type": "结构类名",
|
||
"desc": "字形字符容器：block、继承字体、line-height 1"
|
||
},
|
||
{
|
||
"name": "kole-icon-sort-head",
|
||
"type": "场景类名",
|
||
"desc": "排序表头按钮外观；配合 [aria-sort] 改变图标颜色"
|
||
},
|
||
{
|
||
"name": "kole-icon-empty",
|
||
"type": "场景类名",
|
||
"desc": "空状态容器：居中网格、gap 与内边距取间距令牌"
|
||
},
|
||
{
|
||
"name": "kole-icon-grid",
|
||
"type": "场景类名",
|
||
"desc": "图标网格：auto-fill 最小 96px 一列"
|
||
}
|
||
]
|
||
},
|
||
"a11y": [
|
||
"色调注释写明所有取值在亮色下为 5.00–5.87:1、对卡片底 ≥3:1，满足 WCAG 1.4.11 非文本对比要求（Icon.css:109-111）。",
|
||
"旋转动画在 prefers-reduced-motion: reduce 下完全停止，前庭敏感用户不会被持续旋转干扰（Icon.css:123-125）。",
|
||
"本文件不输出 role/aria，语义由标记层决定；类名层面没有任何视觉线索暗示「这是可点击图标」（Icon.css:82-125）。",
|
||
"排序表头靠 [aria-sort] 属性选择器切换图标颜色，颜色变化与语义属性绑定，不会只靠颜色表达排序状态（Icon.css:132-133）。"
|
||
],
|
||
"resources": [
|
||
{
|
||
"file": "frameworks/Icon.css",
|
||
"kind": "CSS 端全部交付物",
|
||
"desc": "Icon.css —— 135 行样式源码：图标根类、四档尺寸、五档色调、旋转与动效降级，另有场景与通用类"
|
||
}
|
||
],
|
||
"exampleIds": [
|
||
"icon-ex-1",
|
||
"icon-ex-2",
|
||
"icon-ex-3",
|
||
"icon-ex-4",
|
||
"icon-ex-6"
|
||
],
|
||
"notes": [
|
||
"内联 SVG 与字形字符结构类：frameworks/Icon.css:98-101",
|
||
"四档尺寸类：frameworks/Icon.css:104-107",
|
||
"五档语义色与对比度注释：frameworks/Icon.css:109-116",
|
||
"旋转与 reduce 降级：frameworks/Icon.css:119-125",
|
||
"场景类（网格/排序表头/空状态）：frameworks/Icon.css:128-134",
|
||
"Icon.css 第 1-70 行是模板底座，第 81-134 行才是图标本体（.kole-icon-icon 及尺寸/色调/旋转变体）：文件里没有代码块，因为 css 端 byEnd.code 为空字符串，示例由 exampleIds 给出。",
|
||
"文件前 70 行是与 Layout 同族的通用类（.kole-icon-layout/.kole-icon-table 等，由同一模板生成），属共用底座而非图标本体 API，table 只列图标相关类。"
|
||
]
|
||
}
|