@mooncellwiki/prts-design-tokens 0.1.12 → 0.1.13
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +1 -1
- package/package.json +1 -1
- package/src/base/size.json5 +3 -3
- package/src/base/typography.json5 +6 -6
- package/src/functional/chrome.json5 +2 -2
- package/src/functional/compact.json5 +26 -0
- package/tokens.css +37 -11
- package/tokens.json +70 -23
package/README.md
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
PRTS Design（明日方舟网页设计系统，prts.wiki 皮肤）的设计令牌，≈ primer/primitives。
|
|
4
4
|
|
|
5
|
-
- `src/**/*.json5`：W3C DTCG 格式的源——`base/` 原始色板 · 字体 · 尺寸 · 动效 · 层级，`functional/` 亮 / 暗 /
|
|
5
|
+
- `src/**/*.json5`：W3C DTCG 格式的源——`base/` 原始色板 · 字体 · 尺寸 · 动效 · 层级，`functional/` 亮 / 暗 / 高对比语义令牌、页眉头图画布主题接口，以及窄屏（≤ 639）与低分屏的覆盖，`bridge/` MediaWiki Codex 桥接
|
|
6
6
|
- `tokens.css`：CSS 变量版——亮 `:root` / 暗 `data-theme="dark"` · `html.skin-theme-clientpref-night` / 跟随系统 / 局部主题 `.ak-scope[data-theme]` / 高对比；只要令牌时 `import "@mooncellwiki/prts-design-tokens/tokens.css"`
|
|
7
7
|
- `tokens.json`：每个令牌的 CSS 写法与亮 / 暗解析值
|
|
8
8
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@mooncellwiki/prts-design-tokens",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.13",
|
|
4
4
|
"description": "PRTS Design · 明日方舟网页设计系统的设计令牌：W3C DTCG 格式的 JSON5 源 + CSS 变量版 tokens.css（亮 / 暗 / 跟随系统 / 局部主题）+ 解析后的 tokens.json（每个令牌带 CSS 写法与亮 / 暗解析值）",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"type": "module",
|
package/src/base/size.json5
CHANGED
|
@@ -28,14 +28,14 @@
|
|
|
28
28
|
layout: {
|
|
29
29
|
$description: "Layout · 与 Codex 断点一致: 320 / 640 / 1120 / 1680",
|
|
30
30
|
$type: "dimension",
|
|
31
|
-
"header-h": { $value: "56px" },
|
|
32
|
-
"local-nav-h": { $value: "48px", $description: "二级吸顶栏（<1400 出现：菜单 / 本页目录）" },
|
|
31
|
+
"header-h": { $value: "56px", $description: "≤639 为 52（functional/compact）" },
|
|
33
32
|
"sidebar-w": { $value: "208px" },
|
|
34
33
|
"toc-w": { $value: "200px" },
|
|
35
34
|
"content-max": { $value: "1240px", $description: "阅读区最大宽度；表格密集页可加 .ak-wide" },
|
|
36
35
|
"content-narrow": { $value: "760px" },
|
|
37
|
-
gutter: { $value: "24px" },
|
|
36
|
+
gutter: { $value: "24px", $description: "版面两侧留白 / 栏间距；≤639 换成 gutter-sm" },
|
|
38
37
|
"gutter-sm": { $value: "16px" },
|
|
38
|
+
"space-section": { $value: "{size.space.space-8}", $description: "大区块之间的竖向间隔：带色条的章节标题 .ak-heading 的上边距、正文 hr 的上下；≤639 收到 space-6（24）" },
|
|
39
39
|
},
|
|
40
40
|
icon: {
|
|
41
41
|
$description: "Icon sizes",
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
typography: {
|
|
3
3
|
font: {
|
|
4
|
-
$description: "Typography —— 每条链的前两段都由 fonts.css 自托管（人人一致，也是「上线效果」）：\n① 官网同源的 Novecento Sans Wide / Bender（ASCII 子集：· » — × ° 等非 ASCII 会逐字落到 ②）\n② OFL 的 Noto Sans SC / Oswald / Chakra Petch / JetBrains Mono\n之后是装机备选 → 系统字。fonts.css 没加载（Gadget 关掉 /
|
|
4
|
+
$description: "Typography —— 每条链的前两段都由 fonts.css 自托管（人人一致，也是「上线效果」）：\n① 官网同源的 Novecento Sans Wide / Bender（ASCII 子集：· » — × ° 等非 ASCII 会逐字落到 ②）\n② OFL 的 Noto Sans SC / Oswald / Chakra Petch / JetBrains Mono\n之后是装机备选 → 系统字。fonts.css 没加载（Gadget 关掉 / 站外只引 standalone.css）时自然退到后两段。",
|
|
5
5
|
$type: "fontFamily",
|
|
6
6
|
"font-body": {
|
|
7
7
|
$value: "\"Source Han Sans SC\", \"Noto Sans SC\", \"Noto Sans CJK SC\", \"PingFang SC\", \"HarmonyOS Sans SC\", \"Microsoft YaHei\", system-ui, -apple-system, sans-serif",
|
|
@@ -26,11 +26,11 @@
|
|
|
26
26
|
"font-size": {
|
|
27
27
|
$description: "字号（rem；注释为 px）",
|
|
28
28
|
$type: "dimension",
|
|
29
|
-
"fs-display-xl": { $value: "3.5rem", $description: "56" },
|
|
30
|
-
"fs-display": { $value: "2.5rem", $description: "40" },
|
|
31
|
-
"fs-h1": { $value: "2rem", $description: "32" },
|
|
32
|
-
"fs-h2": { $value: "1.5rem", $description: "24" },
|
|
33
|
-
"fs-h3": { $value: "1.25rem", $description: "20" },
|
|
29
|
+
"fs-display-xl": { $value: "3.5rem", $description: "56（≤639 为 40，见 functional/compact）" },
|
|
30
|
+
"fs-display": { $value: "2.5rem", $description: "40（≤639 为 32）" },
|
|
31
|
+
"fs-h1": { $value: "2rem", $description: "32（≤639 为 26）" },
|
|
32
|
+
"fs-h2": { $value: "1.5rem", $description: "24（≤639 为 22）" },
|
|
33
|
+
"fs-h3": { $value: "1.25rem", $description: "20（≤639 为 18）" },
|
|
34
34
|
"fs-h4": { $value: "1.0625rem", $description: "17" },
|
|
35
35
|
"fs-body-lg": { $value: "1.125rem", $description: "18" },
|
|
36
36
|
"fs-body": { $value: "1rem", $description: "16" },
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
chrome: {
|
|
3
|
-
$description: "2d. CHROME · 页眉 / 头图 / 画布 的主题接口（活动主题只改这里）\n
|
|
3
|
+
$description: "2d. CHROME · 页眉 / 头图 / 画布 的主题接口（活动主题只改这里）\n皮肤的「框」（页眉 + 窄屏工具卡片）在两套主题下都是黑的：官网导航栏、游戏主界面顶栏、\n干员档案页的顶部黑边都是\"黑框白纸 / 黑框黑纸\"——所以 chrome 令牌不随明暗主题变，只跟着活动主题变。\nprts.wiki 大活期间会换头图 / 顶栏角饰 / 站标 / 侧栏配色（现网 ext.gadget.seventhStyle 就是改这些）：\n新皮肤把这些位置抽成下面这组变量，Gadget / MediaWiki:Common.css 只需在 :root（或 html.ak-theme-xxx）上覆盖，\n不必碰选择器。skin.css 里的 .ak-header 把语义令牌重映射到 --ak-chrome-*，页眉内的按钮 / 输入 / 头像 / 菜单自动跟随。\n页眉与头图的关系：头图 .ak-keyart 从页面顶端铺起，页眉是压在它上面的一块均匀黑玻璃（--ak-chrome-bg + 毛玻璃）——\n玻璃保证页眉可读，画从玻璃后面透出来；照片一律走 --ak-keyart-image，--ak-chrome-image 只放画在玻璃之上的深色角饰 / 底纹。\n--ak-logo-image（不设默认值）：站标，设置后 .ak-header__logo img 用 content 替换（Chromium / WebKit；Firefox 请改 $wgLogos）。",
|
|
4
4
|
"theme-accent": {
|
|
5
5
|
$value: "{color.brand.cyan-500}",
|
|
6
6
|
$description: "活动主色：页眉标语 / 悬停、侧栏与目录分组条、页脚斜纹、窄屏卡片顶条 …（正文里的链接 / 选中仍是 --ak-accent；想一起换就连 --ak-accent 也覆盖）",
|
|
@@ -29,7 +29,7 @@
|
|
|
29
29
|
"chrome-texture": { $value: ".55", $description: "右侧半调网点强度 0–1（游戏顶栏 img_back / 官网左缘网点），0 关闭" },
|
|
30
30
|
"keyart-image": { $value: "none", $description: "头图（Key Visual）：从页面顶端铺起、垫在页眉与版面背后的一幅通栏画；--ak-keyart-h 为 0 时只在页眉后面透" },
|
|
31
31
|
"keyart-h": { $value: "0px", $description: "页眉之下那段画的高度（画有多高，不是占多高——占位看 -reveal）" },
|
|
32
|
-
"keyart-reveal": { $value: "72px", $description: "留在版面之上、不被压住的一段高度（不超过 --ak-keyart-h，没有头图时不占位）：默认留一小条，画先露一口气、版面不贴着页眉；0 = 完全垫在版面背后；= --ak-keyart-h
|
|
32
|
+
"keyart-reveal": { $value: "72px", $description: "留在版面之上、不被压住的一段高度（不超过 --ak-keyart-h，没有头图时不占位）：默认留一小条，画先露一口气、版面不贴着页眉；0 = 完全垫在版面背后；= --ak-keyart-h 即一条横幅带。≤639 为 0（functional/compact）" },
|
|
33
33
|
"keyart-veil": { $value: "60%", $description: "垫在版面背后那一段蒙的画布色纱：顶端的浓度，往下渐浓到 100%。画面越花调得越高；别低于 50%（侧栏 / 标题压在画上要读得清）" },
|
|
34
34
|
"keyart-veil-filter": { $value: "blur(8px)", $description: "纱底下先给画加的 backdrop-filter：细节先糊开、再被纱盖住，亮色主题下读起来是雾 / 景深而不是隔着磨砂膜；none 关闭。画面鲜艳的主题可以再加 saturate(.6) 之类" },
|
|
35
35
|
"keyart-position": { $value: "center 30%", $description: "-position / -size 相对整块（页眉高 + -h）计算" },
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
{
|
|
2
|
+
typography: {
|
|
3
|
+
"font-size": {
|
|
4
|
+
$description: "窄屏（≤ 639）的标题档：只压缩 h3 以上，整档收一级（同 Primer f1–f3 的窄屏值）。原先手机上页面标题临时降到 h2 字号，和章节 h2 一样大（都 24），两级标题分不出来；整档一起收，层级在窄屏上照样成立。\nh4 / body 及以下不动：手机正文仍是 16（iOS 输入框小于 16 聚焦时会放大页面），表格 / 卡片里的 14 / 12 再缩就掉到「中文最小 12px」以下。\nfs-h2 / fs-h3 也给 HUD 数字用（.ak-stat__value / .ak-attr__value / .ak-stage__code / 倒计时），这些数字在手机上跟着小一档。",
|
|
5
|
+
$type: "dimension",
|
|
6
|
+
"fs-display-xl": { $value: "2.5rem", $description: "40（宽屏 56）" },
|
|
7
|
+
"fs-display": { $value: "2rem", $description: "32（宽屏 40）" },
|
|
8
|
+
"fs-h1": { $value: "1.625rem", $description: "26（宽屏 32）" },
|
|
9
|
+
"fs-h2": { $value: "1.375rem", $description: "22（宽屏 24）" },
|
|
10
|
+
"fs-h3": { $value: "1.125rem", $description: "18（宽屏 20）" },
|
|
11
|
+
},
|
|
12
|
+
},
|
|
13
|
+
size: {
|
|
14
|
+
layout: {
|
|
15
|
+
$description: "窄屏的版面间距：只改版面这一层（两侧 gutter、页眉高、大区块间隔）。原始的 --ak-space-* 阶梯不动——它同时管按钮内边距、列表缩进和点按面积，整档缩小会连触控区一起缩。",
|
|
16
|
+
$type: "dimension",
|
|
17
|
+
"header-h": { $value: "52px", $description: "宽屏 56" },
|
|
18
|
+
gutter: { $value: "{size.layout.gutter-sm}", $description: "16（宽屏 24）" },
|
|
19
|
+
"space-section": { $value: "{size.space.space-6}", $description: "24（宽屏 32）" },
|
|
20
|
+
},
|
|
21
|
+
},
|
|
22
|
+
chrome: {
|
|
23
|
+
$description: "窄屏的头图：不留露出段，版面（页面标题 / 动作行）直接从页眉之下排起、压在画上——手机首屏寸土寸金，画仍垫在页眉玻璃与版面背后透出来。主题显式设了 --ak-keyart-reveal 的照它的（chrome/keyart.css 在窄屏再收到 10vw 以内）。",
|
|
24
|
+
"keyart-reveal": { $value: "0px", $description: "宽屏 72" },
|
|
25
|
+
},
|
|
26
|
+
}
|
package/tokens.css
CHANGED
|
@@ -98,7 +98,7 @@
|
|
|
98
98
|
/* ─── typography · font · Typography —— 每条链的前两段都由 fonts.css 自托管（人人一致，也是「上线效果」）：
|
|
99
99
|
* ① 官网同源的 Novecento Sans Wide / Bender（ASCII 子集：· » — × ° 等非 ASCII 会逐字落到 ②）
|
|
100
100
|
* ② OFL 的 Noto Sans SC / Oswald / Chakra Petch / JetBrains Mono
|
|
101
|
-
* 之后是装机备选 → 系统字。fonts.css 没加载（Gadget 关掉 /
|
|
101
|
+
* 之后是装机备选 → 系统字。fonts.css 没加载（Gadget 关掉 / 站外只引 standalone.css）时自然退到后两段。 */
|
|
102
102
|
--ak-font-body: "Source Han Sans SC", "Noto Sans SC", "Noto Sans CJK SC", "PingFang SC", "HarmonyOS Sans SC", "Microsoft YaHei", system-ui, -apple-system, sans-serif;
|
|
103
103
|
--ak-font-display: "Novecento Sans Wide", "Novecentosanswide-Bold", "Bender", "Oswald", "Michroma", "Arial Narrow", system-ui, sans-serif; /* 拉丁展示字（大写）：Novecento 500–800 → Bender → Oswald 接非 ASCII */
|
|
104
104
|
--ak-font-label: "Bender", "Bender-Bold", "Chakra Petch", "Rajdhani", "Saira", "Oswald", system-ui, sans-serif; /* HUD 标签 / 数值：Bender 400/700 → Chakra Petch 接非 ASCII */
|
|
@@ -106,11 +106,11 @@
|
|
|
106
106
|
--ak-font-mono: "JetBrains Mono", "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; /* 自托管 JetBrains Mono 100–800 正 / 斜 */
|
|
107
107
|
|
|
108
108
|
/* ─── typography · font-size · 字号（rem；注释为 px） */
|
|
109
|
-
--ak-fs-display-xl: 3.5rem; /* 56 */
|
|
110
|
-
--ak-fs-display: 2.5rem; /* 40 */
|
|
111
|
-
--ak-fs-h1: 2rem; /* 32 */
|
|
112
|
-
--ak-fs-h2: 1.5rem; /* 24 */
|
|
113
|
-
--ak-fs-h3: 1.25rem; /* 20 */
|
|
109
|
+
--ak-fs-display-xl: 3.5rem; /* 56（≤639 为 40，见 functional/compact） */
|
|
110
|
+
--ak-fs-display: 2.5rem; /* 40（≤639 为 32） */
|
|
111
|
+
--ak-fs-h1: 2rem; /* 32（≤639 为 26） */
|
|
112
|
+
--ak-fs-h2: 1.5rem; /* 24（≤639 为 22） */
|
|
113
|
+
--ak-fs-h3: 1.25rem; /* 20（≤639 为 18） */
|
|
114
114
|
--ak-fs-h4: 1.0625rem; /* 17 */
|
|
115
115
|
--ak-fs-body-lg: 1.125rem; /* 18 */
|
|
116
116
|
--ak-fs-body: 1rem; /* 16 */
|
|
@@ -160,14 +160,14 @@
|
|
|
160
160
|
--ak-bar-w-lg: 8px;
|
|
161
161
|
|
|
162
162
|
/* ─── size · layout · Layout · 与 Codex 断点一致: 320 / 640 / 1120 / 1680 */
|
|
163
|
-
--ak-header-h: 56px;
|
|
164
|
-
--ak-local-nav-h: 48px; /* 二级吸顶栏（<1400 出现：菜单 / 本页目录） */
|
|
163
|
+
--ak-header-h: 56px; /* ≤639 为 52（functional/compact） */
|
|
165
164
|
--ak-sidebar-w: 208px;
|
|
166
165
|
--ak-toc-w: 200px;
|
|
167
166
|
--ak-content-max: 1240px; /* 阅读区最大宽度；表格密集页可加 .ak-wide */
|
|
168
167
|
--ak-content-narrow: 760px;
|
|
169
|
-
--ak-gutter: 24px;
|
|
168
|
+
--ak-gutter: 24px; /* 版面两侧留白 / 栏间距；≤639 换成 gutter-sm */
|
|
170
169
|
--ak-gutter-sm: 16px;
|
|
170
|
+
--ak-space-section: var(--ak-space-8); /* 大区块之间的竖向间隔：带色条的章节标题 .ak-heading 的上边距、正文 hr 的上下；≤639 收到 space-6（24） */
|
|
171
171
|
|
|
172
172
|
/* ─── size · icon · Icon sizes */
|
|
173
173
|
--ak-icon-xs: 14px;
|
|
@@ -616,7 +616,7 @@ html.skin-theme-clientpref-night,
|
|
|
616
616
|
/* ═══ 2d. CHROME · 页眉 / 头图 / 画布 的主题接口 ═══ */
|
|
617
617
|
:root {
|
|
618
618
|
/* ─── chrome · 2d. CHROME · 页眉 / 头图 / 画布 的主题接口（活动主题只改这里）
|
|
619
|
-
*
|
|
619
|
+
* 皮肤的「框」（页眉 + 窄屏工具卡片）在两套主题下都是黑的：官网导航栏、游戏主界面顶栏、
|
|
620
620
|
* 干员档案页的顶部黑边都是"黑框白纸 / 黑框黑纸"——所以 chrome 令牌不随明暗主题变，只跟着活动主题变。
|
|
621
621
|
* prts.wiki 大活期间会换头图 / 顶栏角饰 / 站标 / 侧栏配色（现网 ext.gadget.seventhStyle 就是改这些）：
|
|
622
622
|
* 新皮肤把这些位置抽成下面这组变量，Gadget / MediaWiki:Common.css 只需在 :root（或 html.ak-theme-xxx）上覆盖，
|
|
@@ -643,7 +643,7 @@ html.skin-theme-clientpref-night,
|
|
|
643
643
|
--ak-chrome-texture: .55; /* 右侧半调网点强度 0–1（游戏顶栏 img_back / 官网左缘网点），0 关闭 */
|
|
644
644
|
--ak-keyart-image: none; /* 头图（Key Visual）：从页面顶端铺起、垫在页眉与版面背后的一幅通栏画；--ak-keyart-h 为 0 时只在页眉后面透 */
|
|
645
645
|
--ak-keyart-h: 0px; /* 页眉之下那段画的高度（画有多高，不是占多高——占位看 -reveal） */
|
|
646
|
-
--ak-keyart-reveal: 72px; /* 留在版面之上、不被压住的一段高度（不超过 --ak-keyart-h，没有头图时不占位）：默认留一小条，画先露一口气、版面不贴着页眉；0 = 完全垫在版面背后；= --ak-keyart-h
|
|
646
|
+
--ak-keyart-reveal: 72px; /* 留在版面之上、不被压住的一段高度（不超过 --ak-keyart-h，没有头图时不占位）：默认留一小条，画先露一口气、版面不贴着页眉；0 = 完全垫在版面背后；= --ak-keyart-h 即一条横幅带。≤639 为 0（functional/compact） */
|
|
647
647
|
--ak-keyart-veil: 60%; /* 垫在版面背后那一段蒙的画布色纱：顶端的浓度，往下渐浓到 100%。画面越花调得越高；别低于 50%（侧栏 / 标题压在画上要读得清） */
|
|
648
648
|
--ak-keyart-veil-filter: blur(8px); /* 纱底下先给画加的 backdrop-filter：细节先糊开、再被纱盖住，亮色主题下读起来是雾 / 景深而不是隔着磨砂膜；none 关闭。画面鲜艳的主题可以再加 saturate(.6) 之类 */
|
|
649
649
|
--ak-keyart-position: center 30%; /* -position / -size 相对整块（页眉高 + -h）计算 */
|
|
@@ -657,6 +657,32 @@ html.skin-theme-clientpref-night,
|
|
|
657
657
|
--ak-canvas-attachment: scroll;
|
|
658
658
|
}
|
|
659
659
|
|
|
660
|
+
/* ═══ 窄屏（≤ 639，与 Codex 的 640 断点一致）：标题档整档收一级（h4 / 正文及以下不动），版面 gutter / 页眉高 / 大区块间隔收紧，头图不留露出段；原始的 --ak-space-* 阶梯不动 ═══ */
|
|
661
|
+
@media (max-width: 639px) {
|
|
662
|
+
:root {
|
|
663
|
+
/* ─── typography */
|
|
664
|
+
|
|
665
|
+
/* ─── typography · font-size · 窄屏（≤ 639）的标题档：只压缩 h3 以上，整档收一级（同 Primer f1–f3 的窄屏值）。原先手机上页面标题临时降到 h2 字号，和章节 h2 一样大（都 24），两级标题分不出来；整档一起收，层级在窄屏上照样成立。
|
|
666
|
+
* h4 / body 及以下不动：手机正文仍是 16（iOS 输入框小于 16 聚焦时会放大页面），表格 / 卡片里的 14 / 12 再缩就掉到「中文最小 12px」以下。
|
|
667
|
+
* fs-h2 / fs-h3 也给 HUD 数字用（.ak-stat__value / .ak-attr__value / .ak-stage__code / 倒计时），这些数字在手机上跟着小一档。 */
|
|
668
|
+
--ak-fs-display-xl: 2.5rem; /* 40（宽屏 56） */
|
|
669
|
+
--ak-fs-display: 2rem; /* 32（宽屏 40） */
|
|
670
|
+
--ak-fs-h1: 1.625rem; /* 26（宽屏 32） */
|
|
671
|
+
--ak-fs-h2: 1.375rem; /* 22（宽屏 24） */
|
|
672
|
+
--ak-fs-h3: 1.125rem; /* 18（宽屏 20） */
|
|
673
|
+
|
|
674
|
+
/* ─── size */
|
|
675
|
+
|
|
676
|
+
/* ─── size · layout · 窄屏的版面间距：只改版面这一层（两侧 gutter、页眉高、大区块间隔）。原始的 --ak-space-* 阶梯不动——它同时管按钮内边距、列表缩进和点按面积，整档缩小会连触控区一起缩。 */
|
|
677
|
+
--ak-header-h: 52px; /* 宽屏 56 */
|
|
678
|
+
--ak-gutter: var(--ak-gutter-sm); /* 16（宽屏 24） */
|
|
679
|
+
--ak-space-section: var(--ak-space-6); /* 24（宽屏 32） */
|
|
680
|
+
|
|
681
|
+
/* ─── chrome · 窄屏的头图：不留露出段，版面（页面标题 / 动作行）直接从页眉之下排起、压在画上——手机首屏寸土寸金，画仍垫在页眉玻璃与版面背后透出来。主题显式设了 --ak-keyart-reveal 的照它的（chrome/keyart.css 在窄屏再收到 10vw 以内）。 */
|
|
682
|
+
--ak-keyart-reveal: 0px; /* 宽屏 72 */
|
|
683
|
+
}
|
|
684
|
+
}
|
|
685
|
+
|
|
660
686
|
/* ═══ 低分屏：正文链把微软雅黑提到 Noto Sans SC 前面（Windows 100% / 125% 缩放下未 hinting 的 Noto 发虚；没装雅黑的系统不受影响）；中文小字抬到 12px（1× 屏上 9–11px 的汉字分不到足够像素） ═══ */
|
|
661
687
|
@media (max-resolution: 1.49dppx) {
|
|
662
688
|
:root {
|
package/tokens.json
CHANGED
|
@@ -18,7 +18,7 @@
|
|
|
18
18
|
"color.green-purple": "Green / Purple",
|
|
19
19
|
"color.rarity": "Rarity · 官方色阶 (gamedata sandbox_table.charRarityColorList)",
|
|
20
20
|
"color.sp": "Skill SP 回复类型（对应游戏内技能框配色，近似取值）",
|
|
21
|
-
"typography.font": "Typography —— 每条链的前两段都由 fonts.css 自托管（人人一致，也是「上线效果」）：\n① 官网同源的 Novecento Sans Wide / Bender（ASCII 子集：· » — × ° 等非 ASCII 会逐字落到 ②）\n② OFL 的 Noto Sans SC / Oswald / Chakra Petch / JetBrains Mono\n之后是装机备选 → 系统字。fonts.css 没加载（Gadget 关掉 /
|
|
21
|
+
"typography.font": "Typography —— 每条链的前两段都由 fonts.css 自托管（人人一致，也是「上线效果」）：\n① 官网同源的 Novecento Sans Wide / Bender（ASCII 子集：· » — × ° 等非 ASCII 会逐字落到 ②）\n② OFL 的 Noto Sans SC / Oswald / Chakra Petch / JetBrains Mono\n之后是装机备选 → 系统字。fonts.css 没加载（Gadget 关掉 / 站外只引 standalone.css）时自然退到后两段。",
|
|
22
22
|
"typography.font-size": "字号（rem；注释为 px）",
|
|
23
23
|
"typography.legibility": "中文小字的字号下限：可能出现中文的 9–10px 小字（卡片副题、解锁条件、标签、页签计数…）写成 max(设计字号, var(--ak-fs-cjk-min))",
|
|
24
24
|
"typography.line-height": "行高",
|
|
@@ -43,7 +43,7 @@
|
|
|
43
43
|
"theme.rarity-text": "Rarity text-safe（用于文字/描边）",
|
|
44
44
|
"theme.shadow": "阴影",
|
|
45
45
|
"theme.decoration": "装饰：白线稿反相 / 斜纹 / 网格 / 网点 / 滚动条",
|
|
46
|
-
"chrome": "2d. CHROME · 页眉 / 头图 / 画布 的主题接口（活动主题只改这里）\n
|
|
46
|
+
"chrome": "2d. CHROME · 页眉 / 头图 / 画布 的主题接口（活动主题只改这里）\n皮肤的「框」（页眉 + 窄屏工具卡片）在两套主题下都是黑的：官网导航栏、游戏主界面顶栏、\n干员档案页的顶部黑边都是\"黑框白纸 / 黑框黑纸\"——所以 chrome 令牌不随明暗主题变，只跟着活动主题变。\nprts.wiki 大活期间会换头图 / 顶栏角饰 / 站标 / 侧栏配色（现网 ext.gadget.seventhStyle 就是改这些）：\n新皮肤把这些位置抽成下面这组变量，Gadget / MediaWiki:Common.css 只需在 :root（或 html.ak-theme-xxx）上覆盖，\n不必碰选择器。skin.css 里的 .ak-header 把语义令牌重映射到 --ak-chrome-*，页眉内的按钮 / 输入 / 头像 / 菜单自动跟随。\n页眉与头图的关系：头图 .ak-keyart 从页面顶端铺起，页眉是压在它上面的一块均匀黑玻璃（--ak-chrome-bg + 毛玻璃）——\n玻璃保证页眉可读，画从玻璃后面透出来；照片一律走 --ak-keyart-image，--ak-chrome-image 只放画在玻璃之上的深色角饰 / 底纹。\n--ak-logo-image（不设默认值）：站标，设置后 .ak-header__logo img 用 content 替换（Chromium / WebKit；Firefox 请改 $wgLogos）。",
|
|
47
47
|
"codex": "MediaWiki 1.43 核心与扩展（Codex 组件、mw-message-box、OOUI WikimediaUI 主题的部分）读取这些 CSS 变量。\n把它们映射到 PRTS Design 语义令牌，皮肤外的 UI 即可自动换肤。"
|
|
48
48
|
},
|
|
49
49
|
"tokens": [
|
|
@@ -905,11 +905,16 @@
|
|
|
905
905
|
"fs-display-xl"
|
|
906
906
|
],
|
|
907
907
|
"type": "dimension",
|
|
908
|
-
"description": "56",
|
|
908
|
+
"description": "56（≤639 为 40，见 functional/compact）",
|
|
909
909
|
"css": "3.5rem",
|
|
910
910
|
"resolved": {
|
|
911
911
|
"light": "3.5rem",
|
|
912
912
|
"dark": "3.5rem"
|
|
913
|
+
},
|
|
914
|
+
"compact": {
|
|
915
|
+
"css": "2.5rem",
|
|
916
|
+
"resolved": "2.5rem",
|
|
917
|
+
"description": "40（宽屏 56）"
|
|
913
918
|
}
|
|
914
919
|
},
|
|
915
920
|
{
|
|
@@ -920,11 +925,16 @@
|
|
|
920
925
|
"fs-display"
|
|
921
926
|
],
|
|
922
927
|
"type": "dimension",
|
|
923
|
-
"description": "40",
|
|
928
|
+
"description": "40（≤639 为 32）",
|
|
924
929
|
"css": "2.5rem",
|
|
925
930
|
"resolved": {
|
|
926
931
|
"light": "2.5rem",
|
|
927
932
|
"dark": "2.5rem"
|
|
933
|
+
},
|
|
934
|
+
"compact": {
|
|
935
|
+
"css": "2rem",
|
|
936
|
+
"resolved": "2rem",
|
|
937
|
+
"description": "32（宽屏 40）"
|
|
928
938
|
}
|
|
929
939
|
},
|
|
930
940
|
{
|
|
@@ -935,11 +945,16 @@
|
|
|
935
945
|
"fs-h1"
|
|
936
946
|
],
|
|
937
947
|
"type": "dimension",
|
|
938
|
-
"description": "32",
|
|
948
|
+
"description": "32（≤639 为 26）",
|
|
939
949
|
"css": "2rem",
|
|
940
950
|
"resolved": {
|
|
941
951
|
"light": "2rem",
|
|
942
952
|
"dark": "2rem"
|
|
953
|
+
},
|
|
954
|
+
"compact": {
|
|
955
|
+
"css": "1.625rem",
|
|
956
|
+
"resolved": "1.625rem",
|
|
957
|
+
"description": "26（宽屏 32）"
|
|
943
958
|
}
|
|
944
959
|
},
|
|
945
960
|
{
|
|
@@ -950,11 +965,16 @@
|
|
|
950
965
|
"fs-h2"
|
|
951
966
|
],
|
|
952
967
|
"type": "dimension",
|
|
953
|
-
"description": "24",
|
|
968
|
+
"description": "24（≤639 为 22）",
|
|
954
969
|
"css": "1.5rem",
|
|
955
970
|
"resolved": {
|
|
956
971
|
"light": "1.5rem",
|
|
957
972
|
"dark": "1.5rem"
|
|
973
|
+
},
|
|
974
|
+
"compact": {
|
|
975
|
+
"css": "1.375rem",
|
|
976
|
+
"resolved": "1.375rem",
|
|
977
|
+
"description": "22（宽屏 24）"
|
|
958
978
|
}
|
|
959
979
|
},
|
|
960
980
|
{
|
|
@@ -965,11 +985,16 @@
|
|
|
965
985
|
"fs-h3"
|
|
966
986
|
],
|
|
967
987
|
"type": "dimension",
|
|
968
|
-
"description": "20",
|
|
988
|
+
"description": "20（≤639 为 18）",
|
|
969
989
|
"css": "1.25rem",
|
|
970
990
|
"resolved": {
|
|
971
991
|
"light": "1.25rem",
|
|
972
992
|
"dark": "1.25rem"
|
|
993
|
+
},
|
|
994
|
+
"compact": {
|
|
995
|
+
"css": "1.125rem",
|
|
996
|
+
"resolved": "1.125rem",
|
|
997
|
+
"description": "18（宽屏 20）"
|
|
973
998
|
}
|
|
974
999
|
},
|
|
975
1000
|
{
|
|
@@ -1409,25 +1434,16 @@
|
|
|
1409
1434
|
"header-h"
|
|
1410
1435
|
],
|
|
1411
1436
|
"type": "dimension",
|
|
1437
|
+
"description": "≤639 为 52（functional/compact）",
|
|
1412
1438
|
"css": "56px",
|
|
1413
1439
|
"resolved": {
|
|
1414
1440
|
"light": "56px",
|
|
1415
1441
|
"dark": "56px"
|
|
1416
|
-
}
|
|
1417
|
-
|
|
1418
|
-
|
|
1419
|
-
|
|
1420
|
-
|
|
1421
|
-
"size",
|
|
1422
|
-
"layout",
|
|
1423
|
-
"local-nav-h"
|
|
1424
|
-
],
|
|
1425
|
-
"type": "dimension",
|
|
1426
|
-
"description": "二级吸顶栏（<1400 出现：菜单 / 本页目录）",
|
|
1427
|
-
"css": "48px",
|
|
1428
|
-
"resolved": {
|
|
1429
|
-
"light": "48px",
|
|
1430
|
-
"dark": "48px"
|
|
1442
|
+
},
|
|
1443
|
+
"compact": {
|
|
1444
|
+
"css": "52px",
|
|
1445
|
+
"resolved": "52px",
|
|
1446
|
+
"description": "宽屏 56"
|
|
1431
1447
|
}
|
|
1432
1448
|
},
|
|
1433
1449
|
{
|
|
@@ -1495,10 +1511,16 @@
|
|
|
1495
1511
|
"gutter"
|
|
1496
1512
|
],
|
|
1497
1513
|
"type": "dimension",
|
|
1514
|
+
"description": "版面两侧留白 / 栏间距；≤639 换成 gutter-sm",
|
|
1498
1515
|
"css": "24px",
|
|
1499
1516
|
"resolved": {
|
|
1500
1517
|
"light": "24px",
|
|
1501
1518
|
"dark": "24px"
|
|
1519
|
+
},
|
|
1520
|
+
"compact": {
|
|
1521
|
+
"css": "var(--ak-gutter-sm)",
|
|
1522
|
+
"resolved": "16px",
|
|
1523
|
+
"description": "16（宽屏 24）"
|
|
1502
1524
|
}
|
|
1503
1525
|
},
|
|
1504
1526
|
{
|
|
@@ -1515,6 +1537,26 @@
|
|
|
1515
1537
|
"dark": "16px"
|
|
1516
1538
|
}
|
|
1517
1539
|
},
|
|
1540
|
+
{
|
|
1541
|
+
"name": "--ak-space-section",
|
|
1542
|
+
"path": [
|
|
1543
|
+
"size",
|
|
1544
|
+
"layout",
|
|
1545
|
+
"space-section"
|
|
1546
|
+
],
|
|
1547
|
+
"type": "dimension",
|
|
1548
|
+
"description": "大区块之间的竖向间隔：带色条的章节标题 .ak-heading 的上边距、正文 hr 的上下；≤639 收到 space-6（24）",
|
|
1549
|
+
"css": "var(--ak-space-8)",
|
|
1550
|
+
"resolved": {
|
|
1551
|
+
"light": "32px",
|
|
1552
|
+
"dark": "32px"
|
|
1553
|
+
},
|
|
1554
|
+
"compact": {
|
|
1555
|
+
"css": "var(--ak-space-6)",
|
|
1556
|
+
"resolved": "24px",
|
|
1557
|
+
"description": "24（宽屏 32）"
|
|
1558
|
+
}
|
|
1559
|
+
},
|
|
1518
1560
|
{
|
|
1519
1561
|
"name": "--ak-icon-xs",
|
|
1520
1562
|
"path": [
|
|
@@ -3267,11 +3309,16 @@
|
|
|
3267
3309
|
"chrome",
|
|
3268
3310
|
"keyart-reveal"
|
|
3269
3311
|
],
|
|
3270
|
-
"description": "留在版面之上、不被压住的一段高度（不超过 --ak-keyart-h，没有头图时不占位）：默认留一小条，画先露一口气、版面不贴着页眉；0 = 完全垫在版面背后；= --ak-keyart-h
|
|
3312
|
+
"description": "留在版面之上、不被压住的一段高度（不超过 --ak-keyart-h，没有头图时不占位）：默认留一小条，画先露一口气、版面不贴着页眉；0 = 完全垫在版面背后；= --ak-keyart-h 即一条横幅带。≤639 为 0（functional/compact）",
|
|
3271
3313
|
"css": "72px",
|
|
3272
3314
|
"resolved": {
|
|
3273
3315
|
"light": "72px",
|
|
3274
3316
|
"dark": "72px"
|
|
3317
|
+
},
|
|
3318
|
+
"compact": {
|
|
3319
|
+
"css": "0px",
|
|
3320
|
+
"resolved": "0px",
|
|
3321
|
+
"description": "宽屏 72"
|
|
3275
3322
|
}
|
|
3276
3323
|
},
|
|
3277
3324
|
{
|