82 lines
4.9 KiB
JSON
82 lines
4.9 KiB
JSON
{
|
||
"slug": "themeswitcher",
|
||
"end": "css",
|
||
"curated": true,
|
||
"summary": "CSS 端的 themeswitcher：.kole-themesw-opt 是主题选项，is-active 高亮，色块用 .dark/.light/.auto 区分。",
|
||
"usage": [
|
||
"选项条 .kole-themesw 是可换行 flex 加 10px 间距，横向居中排列（frameworks/ThemeSwitcher.css:2）。",
|
||
"单个选项 .kole-themesw-opt 是描边胶囊加 8px 12px 内边距，透明过渡针对边框、底色与文字色三处（frameworks/ThemeSwitcher.css:3）。",
|
||
"选中项加 .is-active：品牌边框、品牌浅底加品牌字色，三重提示（frameworks/ThemeSwitcher.css:5）。",
|
||
"小方块 .kole-themesw-dot 是 16px 圆角方块，靠 .dark / .light / .auto 三个类分别取工具提示底色、卡片底色与表头底色来示意主题（frameworks/ThemeSwitcher.css:6-9）。",
|
||
"品牌色圆点区 .kole-themesw-colors 是 8px 间距 flex；单枚 .kole-themesw-color 是 22px 圆，选中加 .is-active 换 2px 描边，悬停放大到 1.1 倍（frameworks/ThemeSwitcher.css:10-13）。",
|
||
"说明文字 .kole-themesw-label 占满整行（width:100%）并留 4px 上边距，因此会换到选项条下一行（frameworks/ThemeSwitcher.css:15）。"
|
||
],
|
||
"bestPractices": [
|
||
"该文件是本项目里唯一引用 --kole-color-focus-ring 的样式表：选项与色块都显式写了 focus-visible 的 2px 焦点环（frameworks/ThemeSwitcher.css:4、14），这是其他 67 个文件都没有的写法。",
|
||
"三个 dot 变体（.dark / .light / .auto）只是取不同令牌作示意色，不代表真实主题渲染；主题切换的实际生效由业务侧改根节点属性或类完成（frameworks/ThemeSwitcher.css:7-9）。",
|
||
"色块有一整套焦点样式，在目标清单中都属于最完整的一档（frameworks/ThemeSwitcher.css:4、14）。",
|
||
"色块放大用 transform:scale(1.1)，不占布局空间；若在缩放时出现像素抖动，改用 box-shadow 描边替代（frameworks/ThemeSwitcher.css:12）。"
|
||
],
|
||
"a11y": [
|
||
"主题选项建议用原生 radio 或补 role=\"radio\" 与 aria-checked；示例在外层写了 role、aria-label 与 aria-checked（site/examples/themeswitcher.json）（frameworks/ThemeSwitcher.css:3）。",
|
||
"焦点环显式引用了 --kole-color-focus-ring 令牌（offset 1px 与 2px 两处），保证键盘用户可见，去掉它会直接失去可达性（frameworks/ThemeSwitcher.css:4、14）。",
|
||
"dark/light/auto 三块只靠色差区分，选项文字必须写明主题名（frameworks/ThemeSwitcher.css:7-9）。"
|
||
],
|
||
"apiCarrier": {
|
||
"kind": "classes",
|
||
"note": "CSS 端无 props：载体是 .kole-themesw（选项条）、.kole-themesw-opt（主题选项）、.kole-themesw-dot / -colors / -color（色块区）、.kole-themesw-label（说明）；状态 is-active，主题示意用 .dark / .light / .auto。",
|
||
"table": [
|
||
{
|
||
"name": "kole-themesw",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/ThemeSwitcher.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
},
|
||
{
|
||
"name": "kole-themesw-opt",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/ThemeSwitcher.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
},
|
||
{
|
||
"name": "is-active",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/ThemeSwitcher.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
},
|
||
{
|
||
"name": "kole-themesw-dot",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/ThemeSwitcher.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
},
|
||
{
|
||
"name": "kole-themesw-colors",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/ThemeSwitcher.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
},
|
||
{
|
||
"name": "kole-themesw-color",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/ThemeSwitcher.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
},
|
||
{
|
||
"name": "kole-themesw-label",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/ThemeSwitcher.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
}
|
||
]
|
||
},
|
||
"resources": [
|
||
{
|
||
"file": "frameworks/ThemeSwitcher.css",
|
||
"kind": "CSS",
|
||
"desc": "该端实现（本页 API 与用法的唯一权威来源）。"
|
||
}
|
||
],
|
||
"exampleIds": [
|
||
"themeswitcher-ex-1"
|
||
],
|
||
"notes": [
|
||
"选项条与选项见 frameworks/ThemeSwitcher.css:2-5，三个 dot 变体见 frameworks/ThemeSwitcher.css:7-9，色块区见 frameworks/ThemeSwitcher.css:10-14，说明文字见 frameworks/ThemeSwitcher.css:15。",
|
||
"该文件是 68 个目标文件中唯一使用 --kole-color-focus-ring 的（frameworks/ThemeSwitcher.css:4、14）。",
|
||
"示例在外层写了 data-mode 与 aria-checked（site/examples/themeswitcher.json），样式层不消费 data-mode。"
|
||
]
|
||
}
|