/* ═══════════════════════════════════════════════════════════════════════════ palette.css — 便签色板（唯一替换点） ─────────────────────────────────────────────────────────────────────────── 色板来源：用户提供的《酸性霓虹配色》参考图（6 组 × 4 色）。 本文件把参考图的色值落成可用的 UI 色板。全站（灵感墙便签 / 色板选择器 / 后台预览 / 深色模式）都从 §1 取值，换色板只改这一段。 ── 每个颜色 2 个 token ──────────────────────────────────────────────────── --n--c 便签主色（填充） --n--ink 主色上的正文墨色 ── 为什么正文墨色不直接用参考图的搭配 ──────────────────────────────────── 参考图的搭配是为「大标题」做的，实测对比度大多不适合正文： 参考图原生搭配 对比度 panel1 #9be014 on #9732f9 3.16 仅适合大标题 panel2 #c6f24e on #fc15a4 2.80 对比不足 panel3 #f4377f on #9be014 2.29 对比不足 panel4 #477c09 on #e20c0c 1.03 基本看不清 panel5 #f9ab21 on #5451f2 2.83 对比不足 panel6 #0f0a77 on #f29fc6 7.93 可用 所以墨色独立取「可读性优先」的深色 / 白色，9 色全部 >= 4.5（最低 pink 4.55）。 ── 为什么不再保留「酸性反差色」点睛 ────────────────────────────────────── 之前每色额外配了一个反差色 --n--pop，用在分类标签上。 实际效果是「红便签 + 绿标签」「青柠便签 + 玫红标签」—— 互补色做成小色块 互相打架，而且标签色跟着便签色走，同一分类在不同便签上是不同颜色， 连语义都乱了。现在分类标签改走「便签自身墨色的半透明底」（见 views.css 的 .note-cat），留下的唯一彩色强调是分类小圆点，取自 §3 的语义色。 那套互补色想看就去看参考图本身，UI 里不再复刻。 ── 填充色不随主题变化 ──────────────────────────────────────────────────── 参考图本身就是「霓虹压在近黑底上」，所以同一组填充色在白天/夜间都要用。 实测：把蓝/紫在夜间提亮虽能改善与夜底的分离度，却会把它俩的白墨 对比从 5.5 压到 4.2（低于 4.5）。因此**填充色只有一个来源**， 主题切换只改描边的混合方向（§5）。 ── 一个易踩的坑（§4 存在的理由）───────────────────────────────────────── CSS 自定义属性里的 var() 在**声明它的那个元素上**求值，不是在使用处。 所以 --note-edge / --note-shadow 这类由 --nc 派生的变量， 必须和 --nc 声明在同一个元素（即 .note--xxx 上）， 否则写在 :root 里会因为那里没有 --nc 而被判为无效值， 最终表现为便签完全没有描边、没有阴影。 ═══════════════════════════════════════════════════════════════════════════ */ :root { /* ── §1 便签九色（换色板只改这一段 · 18 个值）─────────────────────────── */ /* key 填充 正文墨 取自参考图的哪一块 */ --n-red-c: #ff3131; --n-red-ink: #3d0505; /* panel4 主色 */ --n-pink-c: #f4377f; --n-pink-ink: #3d0722; /* panel3 反差色 */ --n-orange-c: #f9ab21; --n-orange-ink: #3d2600; /* panel5 反差色 */ --n-yellow-c: #ffec00; --n-yellow-ink: #3a3600; /* panel1 反差色 */ --n-lime-c: #9be014; --n-lime-ink: #23300a; /* panel1 主色 */ --n-green-c: #06c163; --n-green-ink: #00301a; /* panel4 反差色 */ --n-cyan-c: #27d3fc; --n-cyan-ink: #00303d; /* panel2 反差色 */ --n-blue-c: #5451f2; --n-blue-ink: #ffffff; /* panel5 主色 */ --n-purple-c: #9732f9; --n-purple-ink: #ffffff; /* panel1 主色 */ /* ── §2 与颜色解耦的质感标量（换色时不用动）───────────────────────────── */ --note-radius: 18px; /* 名片式圆弧 */ --note-edge-w: 1px; /* 细描边宽度 */ /* 描边混合基色：白天往深混（亮色便签才在白底上定得住形），夜间由 §5 反转。 实测白天边缘对底色 2.51~8.06、夜间 6.32~17.03，全部 >= 2.2 可辨。 */ --note-edge-base: #0b0f19; /* ── §3 分类语义色（沿用便签色，改色自动跟随）─────────────────────────── */ --cat-idea: var(--n-yellow-c); --cat-inspiration: var(--n-cyan-c); --cat-complaint: var(--n-red-c); --cat-praise: var(--n-pink-c); } /* ── §4 便签色工具类 ─────────────────────────────────────────────────────── 第 1 组：给元素挂上主色 / 墨色。 第 2 组：由主色派生的描边 / 投影 —— 必须与上一组声明在同一元素上。 */ .note--red { --nc: var(--n-red-c); --nc-ink: var(--n-red-ink); } .note--pink { --nc: var(--n-pink-c); --nc-ink: var(--n-pink-ink); } .note--orange { --nc: var(--n-orange-c); --nc-ink: var(--n-orange-ink); } .note--yellow { --nc: var(--n-yellow-c); --nc-ink: var(--n-yellow-ink); } .note--lime { --nc: var(--n-lime-c); --nc-ink: var(--n-lime-ink); } .note--green { --nc: var(--n-green-c); --nc-ink: var(--n-green-ink); } .note--cyan { --nc: var(--n-cyan-c); --nc-ink: var(--n-cyan-ink); } .note--blue { --nc: var(--n-blue-c); --nc-ink: var(--n-blue-ink); } .note--purple { --nc: var(--n-purple-c); --nc-ink: var(--n-purple-ink); } .note--red, .note--pink, .note--orange, .note--yellow, .note--lime, .note--green, .note--cyan, .note--blue, .note--purple { /* 描边：主色往深混，比纯白描边更"长在"便签上，也让亮色便签在白底上有边界 */ --note-edge: color-mix(in srgb, var(--nc) 64%, var(--note-edge-base)); /* 弱阴影：三层叠加，近处 1px 定形、中距离晕开、远处拉出体积。 必须是中性色 —— 霓虹底配彩色投影会互相染色，整面墙看着发脏。 */ --note-shadow: 0 1px 2px rgb(15 23 42 / 0.10), 0 7px 18px rgb(15 23 42 / 0.09), 0 18px 36px rgb(15 23 42 / 0.06); } /* ── §5 夜间模式 ─────────────────────────────────────────────────────────── 填充色不变（见文件头说明），只做两件事： ① 描边混合基色反转成亮色 —— 霓虹压在暗底上时，亮边才能把便签从背景里切出来 ② 阴影转成纯黑并加大 —— 暗底上任何彩色投影都会发灰 */ [data-theme="dark"] { --note-edge-base: #ffffff; } [data-theme="dark"] .note--red, [data-theme="dark"] .note--pink, [data-theme="dark"] .note--orange, [data-theme="dark"] .note--yellow, [data-theme="dark"] .note--lime, [data-theme="dark"] .note--green, [data-theme="dark"] .note--cyan, [data-theme="dark"] .note--blue, [data-theme="dark"] .note--purple { --note-edge: color-mix(in srgb, var(--nc) 70%, var(--note-edge-base)); --note-shadow: 0 1px 2px rgb(0 0 0 / 0.46), 0 8px 20px rgb(0 0 0 / 0.40), 0 18px 38px rgb(0 0 0 / 0.34); }