Browse Source

fix(component): make scrim strokes theme-aware and deterministic

main
Mohan 1 month ago
parent
commit
e70712a654
  1. 22
      src/components/SongScrim.vue
  2. 8
      src/styles/base.css
  3. 9
      src/styles/tokens/dark.css
  4. 3
      src/styles/tokens/light.css

22
src/components/SongScrim.vue

@ -5,7 +5,7 @@
*/
defineProps({
pattern: { type: String, default: 'ice' },
opacity: { type: Number, default: 0.3 },
opacity: { type: Number, default: 1 },
box: { type: Boolean, default: false }
})
defineOptions({ name: 'SongScrim' })
@ -81,34 +81,26 @@ const PATTERNS = {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(2, 1fr);
opacity: 0.9;
}
.song-scrim--box {
position: absolute !important;
border-radius: var(--song-radius-l);
}
.song-scrim--box :deep(svg) {
filter: opacity(0.5);
}
.song-scrim__tile {
width: 100%;
height: 100%;
mix-blend-mode: multiply;
/* 降低与底色对比度:浅色模式下提亮纹样(乘变浅),暗色模式下压暗(屏变弱) */
filter: brightness(1.6);
}
.song-scrim__tile :deep(svg) {
width: 100%;
height: 100%;
}
:global([data-theme='dark']) .song-scrim__tile {
mix-blend-mode: screen;
filter: brightness(0.62);
/* 纹样线条颜色由 --song-scrim-line 按主题决定(低对比、确定性渲染,不用 blend/filter 技巧) */
.song-scrim__tile :deep(path),
.song-scrim__tile :deep(line),
.song-scrim__tile :deep(circle) {
stroke: var(--song-scrim-line, rgba(90, 107, 116, 0.16));
}
.song-scrim--box :deep(svg) {
filter: opacity(0.5) brightness(1.4);
}
:global([data-theme='dark']) .song-scrim--box :deep(svg) {
filter: opacity(0.5) brightness(0.72);
opacity: 0.5;
}
</style>

8
src/styles/base.css

@ -46,14 +46,6 @@ a:hover {
border-radius: 2px;
}
/* 纹样底纹基底(SVG 通过 mask 合成,置于内容之下) */
.song-scrim {
position: fixed;
inset: 0;
z-index: -1;
pointer-events: none;
}
/* 数字等宽 */
.tnum {
font-variant-numeric: tabular-nums;

9
src/styles/tokens/dark.css

@ -3,11 +3,11 @@
color-scheme: dark;
--song-bg: #14181b;
--song-bg-elevated: #1d2326;
--song-surface-3: #232b2f;
--song-bg-elevated: #20272b;
--song-surface-3: #273036;
--song-text: #e6ecef;
--song-text-secondary: #a9b6be;
--song-text-secondary: #b9c6cd;
--song-text-disabled: #5e6a71;
--song-primary: #9dbeee;
@ -31,6 +31,9 @@
/* 章印(印泥砂红,暗色下微提亮) */
--song-seal: #c76a4f;
/* 底纹线条(暗色下为淡月白,勿用深色线否则整页显暗) */
--song-scrim-line: rgba(230, 236, 239, 0.1);
--song-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.3);
--song-shadow-2: 0 2px 8px rgba(0, 0, 0, 0.35);
--song-shadow-3: 0 8px 24px rgba(0, 0, 0, 0.45);

3
src/styles/tokens/light.css

@ -36,6 +36,9 @@
/* 章印(印泥砂红) */
--song-seal: #a84635;
/* 底纹线条(与底色低对比) */
--song-scrim-line: rgba(90, 107, 116, 0.14);
/* 阴影 §6 */
--song-shadow-1: 0 1px 2px rgba(20, 24, 27, 0.06);
--song-shadow-2: 0 2px 8px rgba(20, 24, 27, 0.08);

Loading…
Cancel
Save