89 lines
4.8 KiB
JSON
89 lines
4.8 KiB
JSON
{
|
||
"slug": "emptypro",
|
||
"end": "css",
|
||
"curated": true,
|
||
"summary": "CSS 端空状态样式：居中留白排版加主次按钮配色，只给类名，不包含场景内容与交互。",
|
||
"usage": [
|
||
"根类 .kole-empty 一次性决定排版：纵向 flex、align-items 与 justify-content 都居中、padding 40px 20px、text-align:center（EmptyPro.css:3-4）。",
|
||
"插画位 .kole-empty-icon 只定字号 48px 与下边距 12px，用 emoji 或字符即可充当插画（EmptyPro.css:5）。",
|
||
"文字两级：.kole-empty-title 是 16px/500 的标题色，.kole-empty-desc 是 13px 次要色、上边距 8px、max-width 300px 限制换行宽度（EmptyPro.css:6-7）。",
|
||
"按钮行 .kole-empty-actions 用 margin-top:16px 与 gap:8px 排出主次两颗按钮的间距（EmptyPro.css:8）。",
|
||
"按钮基类 .kole-empty-btn 是描边样式（32px 高、圆角 6px、1px 边框），加 .primary 修饰类才变成品牌色实心（EmptyPro.css:9,11）。",
|
||
"悬停态已经写死：.kole-empty-btn:hover 边框转 #C9D4F2 且文字转品牌色，.primary:hover 换成 --kole-color-brand-hover 实心底（EmptyPro.css:10,12）。"
|
||
],
|
||
"bestPractices": [
|
||
"修饰类是「与基类同节点」的写法（.kole-empty-btn.primary），不能只写 .primary 单类，否则拿不到实心底色与边框色（EmptyPro.css:11）。",
|
||
"按钮悬停的浅蓝边框 #C9D4F2 是硬编码值，不是令牌；换主题时这一处需要在 CSS 里手工替换（EmptyPro.css:10）。",
|
||
".kole-empty-desc 的 max-width 是 300px 固定值，宽屏下描述会提前折行；要放宽请在引用处覆盖该属性（EmptyPro.css:7）。",
|
||
"本文件不含任何状态类（没有 disabled / loading），说明空状态的按钮不做禁用态；需要禁用表现时须自行补类与样式（EmptyPro.css:9-12）。"
|
||
],
|
||
"apiCarrier": {
|
||
"kind": "classes",
|
||
"note": "CSS 端交付的是类名组合：.kole-empty 定整体排版，三个结构类定插画与文字层级，.kole-empty-actions 与 .kole-empty-btn(.primary) 定按钮行；内容填充、点击行为、场景切换都不在本文件范围内。",
|
||
"table": [
|
||
{
|
||
"name": "kole-empty",
|
||
"type": "基础类名",
|
||
"desc": "根容器：纵向居中、padding 40px 20px、正文色取 --kole-color-text-body"
|
||
},
|
||
{
|
||
"name": "kole-empty-icon",
|
||
"type": "结构类名",
|
||
"desc": "插画位，48px 字号，下方留 12px"
|
||
},
|
||
{
|
||
"name": "kole-empty-title",
|
||
"type": "结构类名",
|
||
"desc": "标题，16px/500，取 --kole-color-text-title"
|
||
},
|
||
{
|
||
"name": "kole-empty-desc",
|
||
"type": "结构类名",
|
||
"desc": "描述，13px 次要色，行高 1.5，max-width 300px"
|
||
},
|
||
{
|
||
"name": "kole-empty-actions",
|
||
"type": "结构类名",
|
||
"desc": "按钮行容器，上边距 16px，两按钮 gap 8px"
|
||
},
|
||
{
|
||
"name": "kole-empty-btn",
|
||
"type": "按钮类名",
|
||
"desc": "次要按钮：描边、白底、32px 高、圆角 6px"
|
||
},
|
||
{
|
||
"name": "primary",
|
||
"type": "修饰类名",
|
||
"desc": "与 .kole-empty-btn 同节点时变品牌色实心主按钮"
|
||
}
|
||
]
|
||
},
|
||
"a11y": [
|
||
"本文件作用在纯视觉层，不带 role / aria 属性；空状态容器与按钮的语义需要由 HTML 标记补上（EmptyPro.css:3-12 无相关声明）。",
|
||
"标题与描述分别用 --kole-color-text-title 与 --kole-color-text-secondary，在 --kole-color-card-bg 上保持层级与可读对比（EmptyPro.css:6-7）。",
|
||
"主次按钮的区分不只靠颜色：主按钮是实心、次按钮是描边，色觉障碍与灰度打印下仍可辨（EmptyPro.css:9,11）。",
|
||
"本文件没有 :focus-visible 规则，按钮的键盘焦点环将由浏览器的默认或全局样式提供，替换全局重置样式时需确认焦点仍然可见（EmptyPro.css:9-12）。"
|
||
],
|
||
"resources": [
|
||
{
|
||
"file": "frameworks/EmptyPro.css",
|
||
"kind": "CSS 端全部交付物",
|
||
"desc": "EmptyPro.css —— 13 行样式源码：空状态排版、两级文字、按钮行与主次按钮配色"
|
||
}
|
||
],
|
||
"exampleIds": [
|
||
"emptypro-ex-1",
|
||
"emptypro-ex-2",
|
||
"emptypro-ex-3",
|
||
"emptypro-ex-4"
|
||
],
|
||
"notes": [
|
||
"根容器排版：frameworks/EmptyPro.css:3-4",
|
||
"插画与两级文字：frameworks/EmptyPro.css:5-7",
|
||
"按钮行与按钮基类：frameworks/EmptyPro.css:8-9",
|
||
"悬停与主按钮配色：frameworks/EmptyPro.css:10-12",
|
||
"EmptyPro.css 只有 13 行、7 个类（根容器/插画/两级文字/按钮行/按钮与主按钮）：文件里没有代码块，因为 css 端 byEnd.code 是空字符串，示例由 exampleIds 给出。",
|
||
"契约 dims 的 illustration=static/animated 在本文件中没有对应类，未写入 table。"
|
||
]
|
||
}
|