feat(design): ok/warn/bad 语义色 token + btn-outline + 弹窗动效 keyframes
- tailwind 新增语义状态色三组(纸底文字级 600/700 对比度 ≥4.5:1,AA), 色相降饱和贴近墨色印刷感;后续替换全部裸 tailwind 原色(emerald/amber/rose) - 补 btn-outline 定义:此前三处使用但从未定义,样式静默失效 - 弹窗入场动画 keyframes:遮罩淡入 0.18s + 面板上浮 0.2s,仅 opacity/transform
This commit is contained in:
@@ -103,6 +103,28 @@
|
|||||||
.btn-danger {
|
.btn-danger {
|
||||||
@apply border-press bg-transparent text-press hover:bg-press hover:text-paper-50;
|
@apply border-press bg-transparent text-press hover:bg-press hover:text-paper-50;
|
||||||
}
|
}
|
||||||
|
/* 描边确认按钮:次级动作中需要比默认 btn 更明确轮廓的场合
|
||||||
|
(此前三处使用但从未定义,样式静默失效) */
|
||||||
|
.btn-outline {
|
||||||
|
@apply border-ink-900 bg-transparent text-ink-900
|
||||||
|
hover:border-press hover:bg-press-wash hover:text-press-dark;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── 弹窗入场:遮罩淡入 + 面板上浮(仅 opacity/transform,GPU 友好) ── */
|
||||||
|
.modal-overlay-enter {
|
||||||
|
animation: modal-fade 0.18s ease-out both;
|
||||||
|
}
|
||||||
|
.modal-panel-enter {
|
||||||
|
animation: modal-rise 0.2s cubic-bezier(0.22, 1, 0.36, 1) both;
|
||||||
|
}
|
||||||
|
@keyframes modal-fade {
|
||||||
|
from { opacity: 0; }
|
||||||
|
to { opacity: 1; }
|
||||||
|
}
|
||||||
|
@keyframes modal-rise {
|
||||||
|
from { opacity: 0; transform: translateY(12px); }
|
||||||
|
to { opacity: 1; transform: translateY(0); }
|
||||||
|
}
|
||||||
|
|
||||||
/* ── 统一空态 ── */
|
/* ── 统一空态 ── */
|
||||||
.empty-state {
|
.empty-state {
|
||||||
|
|||||||
@@ -24,12 +24,39 @@ export default {
|
|||||||
800: '#282420',
|
800: '#282420',
|
||||||
900: '#17140F',
|
900: '#17140F',
|
||||||
},
|
},
|
||||||
// 印报红:全站唯一强调色,克制使用
|
// 印报红:全站唯一强调色,克制使用
|
||||||
press: {
|
press: {
|
||||||
DEFAULT: '#9E1B1B',
|
DEFAULT: '#9E1B1B',
|
||||||
dark: '#7C1414',
|
dark: '#7C1414',
|
||||||
wash: '#F7E9E4',
|
wash: '#F7E9E4',
|
||||||
},
|
},
|
||||||
|
// ── 语义状态色:成功/警告/负面 ──
|
||||||
|
// 设计约束:纸底 #FDFCF8 上文字级(600/700)对比度 ≥ 4.5:1(WCAG AA),
|
||||||
|
// 点/条级(500) ≥ 3:1;色相降饱和以贴近墨色印刷感,不使用 tailwind 原色。
|
||||||
|
ok: {
|
||||||
|
50: '#EAF3ED',
|
||||||
|
100: '#D5E8DC',
|
||||||
|
300: '#A3C9B1',
|
||||||
|
500: '#43925F',
|
||||||
|
600: '#2E7A4C',
|
||||||
|
700: '#1F6B45',
|
||||||
|
},
|
||||||
|
warn: {
|
||||||
|
50: '#FBF3E4',
|
||||||
|
100: '#F5E5C8',
|
||||||
|
300: '#E2C48E',
|
||||||
|
500: '#D97706',
|
||||||
|
600: '#A15C0B',
|
||||||
|
700: '#8F5109',
|
||||||
|
},
|
||||||
|
bad: {
|
||||||
|
50: '#FAEDED',
|
||||||
|
100: '#F6E3E3',
|
||||||
|
300: '#E4AFAF',
|
||||||
|
500: '#C24A4A',
|
||||||
|
600: '#A83B3B',
|
||||||
|
700: '#8F3030',
|
||||||
|
},
|
||||||
},
|
},
|
||||||
fontFamily: {
|
fontFamily: {
|
||||||
// 毛体草书(国内 CDN)+ 粗楷体回退
|
// 毛体草书(国内 CDN)+ 粗楷体回退
|
||||||
|
|||||||
Reference in New Issue
Block a user