root/aurora-admin
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity
Files
main
aurora-admin/frameworks-mobile/ColorPicker.css
T
aurora-admin f1fbfc2ddb
Regression / regression (push) Canceled after 0s
Details
feat(品牌标识): 几何 K 图标(favicon/顶栏标记/theme-color) + 并行会话成果入库 
## 品牌标识（本次会话）

起因：品牌此前没有任何图形标识 —— 唯一 favicon 是内联 data-URI 里的字母「A」，
那是 v2.0.0「Aurora Admin → Kole UI」改名漏掉的一处（PC 顶栏也是「A」，
移动端站已是「K」；移动端文档站则完全没有 favicon）。

- 几何：24 网格三个互不接触的笔画（竖 + 两斜），圆头描边；
  描边 2.25 → 16px 标签页尺寸下正好 1.5px = 规范原文「描边1.5px」
- 取色分两套（刻意）：favicon 硬编码品牌蓝/白（渲染在浏览器标签栏，不继承 kole-dark）；
  顶栏标记走 currentColor（实测暗色下自动转 rgb(20,22,28)）
- 新增 theme-color 双条（light #FFFFFF / dark #1C1F26，取 --kole-color-card-bg）
- 修 site/app.js hero 标语 KOLE ADMIN → KOLE UI（改名变形残留）
- 移动端 7 个模板补 favicon（此前计数 0）

验收：门禁 9 条全 OK（site-routing/site-routes/mobile-docs/mobile-site/isolation/
theme/nav/i18n/icons）；PC 回归 1464/1464 · 移动端 807/807，各连跑 8 次一致；
两端 favicon 405 字节逐字节一致；PC 站控制台错误 1→0。

## 并行会话成果（本次一并入库）

- 图标系统：2576 图标（TDesign/Element Plus，MIT）+ 11 端注入 + 5 个构建门禁工具
  + IconPreview 预览页 + ICON-SPEC.md 冻结规格
- 移动端平台：47 组件 × 6 端 + 文档站 53 页 + 隔离门禁
- PC 组件：103 个大后台组件 / 组件11 批次
- uni-app：PC 端试点 + 移动端端实现 + 真实编译验证

## 工程

- .gitignore 补 .scratch/ 与 .zcode-preexisting-*.txt（会话中间产物，实测 9.1MB，不入库）
- CHANGELOG 补品牌标识条目
- ROADMAP 登 S8-P4（品牌标识任务包 + og:image/apple-touch-icon 未做部分）
2026-09-21 10:05:48 +08:00

224 lines
7.5 KiB
CSS
Raw Permalink Blame History

/* Kole UI Mobile · ColorPicker 样式 — 对齐移动端规格 §45
颜色选择器：预设色板 + 当前色显示。色板里的色值是**数据**（由宿主传入 presets），
本文件不出现任何 hex —— 每个色块的背景由行内 style 写出，组件样式只负责尺寸、圆角、
选中环与文字色（全部走 --kole-* / --kole-m-* 令牌）。
选中态用「外环 + 放大」表达，不靠色块自身颜色差异（浅色块上看不出高亮）。 */
.kole-m-colorpicker {
/* 组件级变量：业务侧可在容器上覆盖 */
--kole-m-colorpicker-swatch-size: 32px; /* 色块视觉尺寸 */
--kole-m-colorpicker-gap: var(--kole-space-12); /* 色块间距 */
--kole-m-colorpicker-columns: 6; /* 每行色块数 */
--kole-m-colorpicker-radius: var(--kole-radius-base); /* 色块圆角 */
/* 当前色：**由宿主以行内自定义属性传入**（色值是数据，样式表里不出现 hex）。
业务侧通常写 style="--kole-m-colorpicker-current: #RRGGBB"，或用 JS setProperty 更新。 */
--kole-m-colorpicker-current: var(--kole-color-border);
box-sizing: border-box;
display: flex;
flex-direction: column;
gap: var(--kole-space-12);
width: 100%;
background: var(--kole-color-card-bg);
color: var(--kole-color-text-body);
font-family: var(--kole-font-family);
font-size: var(--kole-m-font-size-body);
line-height: 1.4;
}
.kole-m-colorpicker__mask {
position: fixed;
inset: 0;
z-index: 2000;
background: var(--kole-color-mask);
opacity: 0;
pointer-events: none;
transition: opacity var(--kole-m-duration-slide) var(--kole-m-ease-slide);
}
.kole-m-colorpicker__mask.is-open {
opacity: 1;
pointer-events: auto;
}
/* 变体 mode=swatch：只有色板，没有任何自定义入口 */
.kole-m-colorpicker--swatch .kole-m-colorpicker__custom { display: none; }
/* 变体 mode=custom：色板之后追加自定义色值输入 */
.kole-m-colorpicker--custom .kole-m-colorpicker__custom { display: flex; }
/* 变体 round=true：色块与当前色圆点都用圆形（与圆点式主题选择器一致） */
.kole-m-colorpicker--round .kole-m-colorpicker__swatch,
.kole-m-colorpicker--round .kole-m-colorpicker__dot { border-radius: 50%; }
/* 变体 showValue=false：不显示色值文字，只留色块（空间紧张时用） */
.kole-m-colorpicker--no-value .kole-m-colorpicker__value { display: none; }
/* 顶部：当前色圆点 + 色值文字 —— 这是「当前色显示」的落点 */
.kole-m-colorpicker__current {
display: flex;
align-items: center;
gap: var(--kole-space-8);
min-height: var(--kole-m-touch-target);
}
.kole-m-colorpicker__dot {
flex: 0 0 auto;
box-sizing: border-box;
width: 24px;
height: 24px;
border: 1px solid var(--kole-color-border);
border-radius: var(--kole-m-colorpicker-radius);
background: var(--kole-m-colorpicker-current);
}
.kole-m-colorpicker__value {
color: var(--kole-color-text-body);
font-family: var(--kole-font-family-num);
font-size: var(--kole-m-font-size-label);
}
.kole-m-colorpicker__caption {
color: var(--kole-color-text-secondary);
font-size: var(--kole-m-font-size-label);
}
/* 色板：定列数网格，色块在各列内居中（375px 与 320px 下都不横向溢出） */
.kole-m-colorpicker__swatches {
display: grid;
grid-template-columns: repeat(var(--kole-m-colorpicker-columns), 1fr);
gap: var(--kole-m-colorpicker-gap);
width: 100%;
}
/* 色块：无文字（颜色本身就是语义，色值由 aria-label 播报），
背景色由宿主以行内自定义属性传入（`--kole-m-colorpicker-swatch`）——
**数据色不进样式表**，组件样式表里没有任何 hex。 */
.kole-m-colorpicker__swatch {
box-sizing: border-box;
justify-self: center;
width: var(--kole-m-colorpicker-swatch-size);
height: var(--kole-m-colorpicker-swatch-size);
padding: 0;
margin: 0;
border: 1px solid var(--kole-color-border);
border-radius: var(--kole-m-colorpicker-radius);
background: var(--kole-m-colorpicker-swatch);
cursor: pointer;
touch-action: manipulation;
transition: transform var(--kole-duration-fast) var(--kole-ease-standard);
}
.kole-m-colorpicker__swatch:active:not(:disabled) { transform: scale(0.94); }
.kole-m-colorpicker__swatch:focus-visible {
outline: 2px solid var(--kole-color-focus-ring);
outline-offset: 2px;
}
/* 状态 selected：外环 + 放大（形状差异，浅色块上也读得出）
外环用 box-shadow 画在色块之外，不占用网格尺寸 */
.kole-m-colorpicker__swatch.is-selected {
transform: scale(1.08);
box-shadow: 0 0 0 2px var(--kole-color-card-bg), 0 0 0 4px var(--kole-color-brand);
}
.kole-m-colorpicker__swatch[aria-checked="true"] {
box-shadow: 0 0 0 2px var(--kole-color-card-bg), 0 0 0 4px var(--kole-color-brand);
}
/* 状态 disabled：整块置灰且不响应 */
.kole-m-colorpicker__swatch:disabled {
cursor: not-allowed;
opacity: 0.4;
}
.kole-m-colorpicker__swatch:disabled:active { transform: none; }
.kole-m-colorpicker.is-disabled .kole-m-colorpicker__value,
.kole-m-colorpicker.is-disabled .kole-m-colorpicker__caption { color: var(--kole-color-text-disabled); }
/* 自定义区（mode=custom）：色值输入 + 应用按钮 */
.kole-m-colorpicker__custom {
display: none;
align-items: center;
gap: var(--kole-space-8);
min-height: var(--kole-m-touch-target);
}
.kole-m-colorpicker__input {
flex: 1 1 auto;
min-width: 0;
box-sizing: border-box;
min-height: var(--kole-m-touch-target);
padding: 0 var(--kole-space-12);
border: 1px solid var(--kole-color-border);
border-radius: var(--kole-radius-base);
background: var(--kole-color-card-bg);
color: var(--kole-color-text-body);
font-family: var(--kole-font-family-num);
font-size: var(--kole-m-font-size-label);
}
.kole-m-colorpicker__input:focus-visible {
outline: 2px solid var(--kole-color-focus-ring);
outline-offset: 0;
}
/* 色值非法时置灰提示（不发明「自动纠正」） */
.kole-m-colorpicker__input.is-invalid {
border-color: var(--kole-color-error);
color: var(--kole-color-error);
}
.kole-m-colorpicker__apply {
flex: 0 0 auto;
box-sizing: border-box;
min-height: var(--kole-m-touch-target);
padding: 0 var(--kole-space-16);
border: 1px solid var(--kole-color-brand);
border-radius: var(--kole-radius-base);
background: var(--kole-color-brand);
color: var(--kole-color-text-inverse);
font-family: inherit;
font-size: var(--kole-m-font-size-label);
cursor: pointer;
touch-action: manipulation;
}
.kole-m-colorpicker__apply:focus-visible {
outline: 2px solid var(--kole-color-focus-ring);
outline-offset: 2px;
}
.kole-m-colorpicker__apply:disabled {
border-color: var(--kole-color-border);
background: var(--kole-color-disabled-bg);
color: var(--kole-color-text-disabled);
cursor: not-allowed;
}
.kole-m-colorpicker__error {
color: var(--kole-color-error);
font-size: var(--kole-m-font-size-label);
}
/* 演示页触发器（非组件交付样式） */
.kole-m-colorpicker__trigger {
box-sizing: border-box;
min-height: var(--kole-m-touch-target);
padding: 0 var(--kole-m-gutter);
border: 1px solid var(--kole-color-border);
border-radius: var(--kole-radius-base);
background: var(--kole-color-card-bg);
color: var(--kole-color-text-body);
font-family: inherit;
font-size: var(--kole-m-font-size-label);
cursor: pointer;
touch-action: manipulation;
}
.kole-m-colorpicker__trigger:focus-visible {
outline: 2px solid var(--kole-color-focus-ring);
outline-offset: 2px;
}
Reference in New Issue View Git Blame Copy Permalink