/* ============================================================================ 伊月手記 —— 设计变量层（全站唯一颜色 / 字体 / 圆角来源） 风格来源：~/dev/awesome-design-md/design-md/basedash/DESIGN.md 这个文件只定义「名字 → 值」，不写任何版面。 所有页面都引它，所以改一处全站跟着变，不用挨个文件找颜色。 ── Basedash 最核心的一条做法 ──────────────────────────────────── 一般设计会给正文、次要文字、边框、分隔线各挑一个不同的灰， 于是页面上有五六个灰在打架（这个偏蓝、那个偏黄）。 Basedash 只用一个墨色，然后叠六档不透明度： 100% 纯墨 大标题、关键数字 70% b3 正文 50% 80 次要文字、表头 20% 33 禁用态（不放正经文字） 10% 1a 边框 4% 0a 最淡的分隔线 好处是整页只有一种颜色在呼吸，而且叠在任何底色上都自动协调 —— 面板上的边框和画布上的边框写的是同一个值，看起来却各自刚好。 代价是半透明只在「底下是纯色」时可靠，压在彩色块上会串色变脏， 所以本站凡是文字压色块的地方都换回实色（见 --on-accent）。 ============================================================================ */ /* ── 深色档（默认）────────────────────────────────────────────── 底色特意不用纯黑 #000 而是 #0b0b0b —— 留一点灰。 纯黑配长时间盯着看的内容太硬，边缘会有割裂感。 */ :root { color-scheme: dark; --canvas: #0b0b0b; /* 页面底 */ --surface: #161616; /* 卡片、面板 */ --surface-2: #1e1e1e; /* 卡片划过时 */ --ink-1: #ffffff; /* 100% 主文字 */ --ink-2: #ffffffb3; /* 70% 正文 */ --ink-3: #ffffff80; /* 50% 次要 */ --ink-4: #ffffff33; /* 20% 禁用（别放正经文字，对比度只有 1.8） */ --rule: #ffffff1a; /* 10% 边框 */ --rule-faint: #ffffff0a; /* 4% 分隔线 */ --accent: #9a7cff; /* 填充用的柔紫：按钮底、圆点、标记 */ --accent-text: #6e81ff; /* 可点击文字用偏蓝的：紫色字在近黑底上读着发飘 */ --accent-weak: #9a7cff1f; /* 紫色的极淡底，用来标"当前所在" */ --on-accent: #0b0b0b; /* 压在紫底上的字。深色档的紫是「亮」紫， 上面就得放深色字 —— 白字只有 3.13:1 不够看。 用画布色，看起来像从紫块里挖空出来的。 */ --st-good: #2fa86b; --st-warn: #f0b429; --st-crit: #e56152; --s1: #4ebcfc; /* 数据系列 1 —— 亮蓝 */ --s2: #2fa86b; /* 数据系列 2 —— 中绿 */ --s3: #9a7cff; /* 数据系列 3 —— 柔紫 */ } /* ── 浅色档 ────────────────────────────────────────────────────── 墨色换成 #111111，六档不透明度照抄，整条阶梯是镜像的。 ⚠️ 这里有三处跟规格文件不一样，都是被实测逼出来的，不是随手改的： 1) 次要文字从规格的 8c（55%）一路加深到 9c（61%），挪了两档。 第一档是照画布调的：8c 混到画布上是 #7b7b7b，只有 4.15，12px 的小字 不够看（要 4.5）；改 94 得到 4.56，过线。 第二档是六页实测逼出来的：这个灰极少真的打在画布上，多数时候底下垫着 淡灰标签底（#f3f3f3）、面板底（#f5f5f4）或者「当前所在」那块淡紫底 —— 底一变亮，4.56 就掉到 4.42〜4.50，共 66 处卡在线下（术语表的注音和 优先级小标签占了绝大多数）。改 9c 之后最难的那块底上也有 4.91。 两次都只挪不透明度，阶梯形状没动。 2) 状态色和图表色规格里只有一套，是照近黑底调的。 同一个黄 #f0b429 放到接近白的底上对比度只剩 1.86，字基本看不见。 这里按规格自己对「可点击文字」的做法（#6373ff 压深成 #4f46e5）补齐： 只降 OKLCH 里的亮度、色相不动，二分找「还过 4.6:1 的最亮那一档」。 算法在 build/derive_light_colors.py，改颜色时重跑它，别手调。 压深时彩度会被迫收窄（深黄不可能同时很鲜艳），这是颜色本身的物理限制， 但色相守住了 —— 黄还是黄，只漂了 0.5 度。 ⚠️ 底色必须拿画布 #fafaf9 去算，不能拿纯白。画布比纯白暗一点点， 深色的字压上去对比度反而更低。第一版就是拿纯白算的，四个颜色 全部虚高约 0.2，卡在 4.41〜4.45 假装过关 —— 用 build/check_contrast.py 按真实画布重算才抓出来。 ⚠️ 更要紧的一条：这些颜色最常见的用法不是「打在画布上」，而是 「打在自己兑出来的淡底上」—— 红字配淡红底、绿字配淡绿底，状态标签、 小徽章全是这个结构。淡底比画布更接近字色，对比度还要再掉一档： 照画布调出来的 4.60，放到自己的 12% 淡底上只剩 3.9。 六页实测抓出来的。所以推导和体检的基准底都改成了 mix(自己 12%, 画布)，四个状态色因此又各压深了一档 （#00834d→#007645、#946b00→#866100、#c8463a→#b9372d、#0079af→#006d9d）。 深色档同理但方向相反（淡底往亮里走，所以字要提亮）： #e05c4e→#e56152、#6373ff→#6e81ff。 3) 紫色填充也压深了（#9a7cff 在白底只有 3.13）。它只做色块不做文字， 3:1 就够，所以没跟着压到 4.6，也不参与上面那条淡底推导。 */ @media (prefers-color-scheme: light) { :root { color-scheme: light; --canvas: #fafaf9; --surface: #ffffff; --surface-2: #f5f5f4; --ink-1: #111111; --ink-2: #111111b8; --ink-3: #1111119c; --ink-4: #11111138; --rule: #1111111f; --rule-faint: #1111110d; --accent: #7f5ede; --accent-text: #4f46e5; --accent-weak: #7f5ede14; --on-accent: #ffffff; --st-good: #007645; --st-warn: #866100; --st-crit: #b9372d; --s1: #006d9d; --s2: #007645; --s3: #7f5ede; } } /* ── 手动切换 ──────────────────────────────────────────────────── 上面那条媒体查询跟的是系统设置。页面右上角的小按钮会往 上 写 data-theme="light" / "dark"，下面这两段必须能盖过媒体查询， 否则「系统是深色、我手动选浅色」这种组合会失效。 两个方向都要写全，只写一半会出现「切过去回不来」。 */ :root[data-theme="light"] { color-scheme: light; --canvas: #fafaf9; --surface: #ffffff; --surface-2: #f5f5f4; --ink-1: #111111; --ink-2: #111111b8; --ink-3: #1111119c; --ink-4: #11111138; --rule: #1111111f; --rule-faint: #1111110d; --accent: #7f5ede; --accent-text: #4f46e5; --accent-weak: #7f5ede14; --on-accent: #ffffff; --st-good: #007645; --st-warn: #866100; --st-crit: #b9372d; --s1: #006d9d; --s2: #007645; --s3: #7f5ede; } :root[data-theme="dark"] { color-scheme: dark; --canvas: #0b0b0b; --surface: #161616; --surface-2: #1e1e1e; --ink-1: #ffffff; --ink-2: #ffffffb3; --ink-3: #ffffff80; --ink-4: #ffffff33; --rule: #ffffff1a; --rule-faint: #ffffff0a; --accent: #9a7cff; --accent-text: #6e81ff; --accent-weak: #9a7cff1f; --on-accent: #0b0b0b; --st-good: #2fa86b; --st-warn: #f0b429; --st-crit: #e56152; --s1: #4ebcfc; --s2: #2fa86b; --s3: #9a7cff; } /* ── 字体 ──────────────────────────────────────────────────────── 规格里的 Alpha Lyrae 是商业字体、而且没有中文字形 —— 放中文页面上汉字会全部掉回系统字体，等于白引一个字体文件。 规格文件自己也写了「中文项目应该跳过它」。 所以这里只留它真正管用的两条规则：标题字重 500 + 字距 -0.025em。 不加粗、只靠字号和字距拉层次，是这套风格的核心纪律。 一旦某个标题为了「显眼」加到 700，整页的调子就散了。 顺带：全站不引任何外部字体文件。原来那版从 Google 字体服务器 拉五个字体，学校网慢的时候会先白屏一下再跳字，而且中文根本没用上。 */ :root { --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", "PingFang SC", "Hiragino Sans", "Noto Sans CJK SC", "Microsoft YaHei", sans-serif; --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, "Liberation Mono", monospace; /* 字号阶梯 12 / 14 / 16 / 18 / 24 / 36 / 48 / 60，不出现别的数 */ --t-caption: 12px; --t-sm: 14px; --t-md: 16px; --t-lg: 18px; --t-d-sm: 24px; --t-d-md: 36px; --t-d-lg: 48px; --t-d-xl: 60px; --tracking-tight: -0.025em; /* 只给标题用 */ --tracking-label: 0.1em; /* 只给全大写小标签用 */ } /* ── 圆角 ──────────────────────────────────────────────────────── 基准 6px，克制。不是现在满屏 16px 圆角的那种做法。 */ :root { --r-xs: 2px; --r-sm: 4px; --r-md: 6px; --r-lg: 8px; --r-xl: 12px; --r-2xl: 16px; --r-3xl: 24px; --r-pill: 9999px; } /* corner-shape 是新的 CSS 属性，把圆角从「正圆的一段弧」换成超椭圆 —— 苹果图标那种曲率连续变化的圆角，转角处没有肉眼可见的接缝。 超椭圆在同样数值下看起来更方，所以支持时整条阶梯放大 1.875 倍 才能维持一样的观感。不支持的浏览器什么都不用做，自动是普通圆角。 这是「渐进增强」的漂亮写法：新特性不做兼容层，只做加分项。 */ @supports (corner-shape: superellipse(1.5)) { :root { --r-xs: 3.75px; --r-sm: 7.5px; --r-md: 11.25px; --r-lg: 15px; --r-xl: 22.5px; --r-2xl: 30px; --r-3xl: 45px; } *, *::before, *::after { corner-shape: superellipse(1.5); } /* 胶囊形状例外 —— 半径 9999 时超椭圆会退化得不像胶囊 */ [data-shape="pill"] { corner-shape: round; } } /* ── 间距 ──────────────────────────────────────────────────────── 单一基准 4px，所有间距都是它的整数倍。没有 13px 这种数。 */ :root { --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-6: 24px; --sp-8: 32px; --sp-12: 48px; --sp-24: 96px; } /* ── 动效 ──────────────────────────────────────────────────────── 起步极快、尾巴极长的曲线。在工具里这条曲线的意思是： 点下去要「立刻」有反应（知道点到了），但停下来要柔（不打断阅读）。 */ :root { --ease: cubic-bezier(.22, 1, .36, 1); --dur: .18s; } @media (prefers-reduced-motion: reduce) { :root { --dur: 0s; } *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }