@mooncellwiki/prts-design-tokens 0.1.13 → 0.1.14

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mooncellwiki/prts-design-tokens",
-  "version": "0.1.13",
+  "version": "0.1.14",
   "description": "PRTS Design · 明日方舟网页设计系统的设计令牌：W3C DTCG 格式的 JSON5 源 + CSS 变量版 tokens.css（亮 / 暗 / 跟随系统 / 局部主题）+ 解析后的 tokens.json（每个令牌带 CSS 写法与亮 / 暗解析值）",
   "license": "MIT",
   "type": "module",

package/src/functional/chrome.json5

@@ -1,6 +1,6 @@
 {
   chrome: {
-    $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）。",
+    $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）。",
     "theme-accent": {
       $value: "{color.brand.cyan-500}",
       $description: "活动主色：页眉标语 / 悬停、侧栏与目录分组条、页脚斜纹、窄屏卡片顶条 …（正文里的链接 / 选中仍是 --ak-accent；想一起换就连 --ak-accent 也覆盖）",
@@ -9,7 +9,11 @@
     "theme-accent-subtle": { $value: "rgba(24, 209, 255, .14)", $description: "活动主色的淡底（页眉里的悬停 / 选中底、聚焦光圈）= --ak-theme-accent 的 14%；换主色时一起写——不用 color-mix() 推导，老浏览器也认" },
     "chrome-bg": {
       $value: "rgba(8, 9, 10, .9)",
-      $description: "页眉玻璃：半透明 + 毛玻璃，头图 / 滚过来的正文在下面均匀透出。活动主题想让头图多透一点可调 alpha 到 .78–.85；别低于 .72（白色画面之下 #F2F2F2 仍 ≥7:1）",
+      $description: "页眉玻璃：半透明，头图 / 滚过来的正文在下面均匀透出。活动主题想让头图多透一点可调 alpha 到 .78–.85；别低于 .72（白色画面之下 #F2F2F2 仍 ≥7:1）",
+    },
+    "chrome-backdrop": {
+      $value: "none",
+      $description: "页眉玻璃底下的 backdrop-filter（毛玻璃），默认不开：玻璃 .9 不透明时模糊只透出一成，开不开截图逐像素平均只差 1.4/255，却是滚动时 GPU 上最重的一项——粘性页眉每帧都要把底下重糊一遍。玻璃调淡、确实要毛玻璃的活动主题再设 saturate(1.4) blur(10px) 之类",
     },
     "chrome-bg-solid": { $value: "#0e0f10", $description: "不透明处：窄屏工具卡片、飞出菜单" },
     "chrome-fg": { $value: "#f2f2f2" },
@@ -31,7 +35,7 @@
     "keyart-h": { $value: "0px", $description: "页眉之下那段画的高度（画有多高，不是占多高——占位看 -reveal）" },
     "keyart-reveal": { $value: "72px", $description: "留在版面之上、不被压住的一段高度（不超过 --ak-keyart-h，没有头图时不占位）：默认留一小条，画先露一口气、版面不贴着页眉；0 = 完全垫在版面背后；= --ak-keyart-h 即一条横幅带。≤639 为 0（functional/compact）" },
     "keyart-veil": { $value: "60%", $description: "垫在版面背后那一段蒙的画布色纱：顶端的浓度，往下渐浓到 100%。画面越花调得越高；别低于 50%（侧栏 / 标题压在画上要读得清）" },
-    "keyart-veil-filter": { $value: "blur(8px)", $description: "纱底下先给画加的 backdrop-filter：细节先糊开、再被纱盖住，亮色主题下读起来是雾 / 景深而不是隔着磨砂膜；none 关闭。画面鲜艳的主题可以再加 saturate(.6) 之类" },
+    "keyart-veil-filter": { $value: "blur(8px)", $description: "纱底下先给画加的 filter（加在 ::before 里同一幅头图的副本上，不是 backdrop-filter）：细节先糊开、再被纱盖住，亮色主题下读起来是雾 / 景深而不是隔着磨砂膜；none 关闭。画面鲜艳的主题可以再加 saturate(.6) 之类" },
     "keyart-position": { $value: "center 30%", $description: "-position / -size 相对整块（页眉高 + -h）计算" },
     "keyart-size": { $value: "cover" },
     "keyart-bg": { $value: "transparent", $description: "画未铺满 / 未加载时的底色；默认透明，没有头图时页眉背后什么也不多画" },

package/tokens.css

@@ -621,13 +621,14 @@ html.skin-theme-clientpref-night,
    * prts.wiki 大活期间会换头图 / 顶栏角饰 / 站标 / 侧栏配色（现网 ext.gadget.seventhStyle 就是改这些）：
    * 新皮肤把这些位置抽成下面这组变量，Gadget / MediaWiki:Common.css 只需在 :root（或 html.ak-theme-xxx）上覆盖，
    * 不必碰选择器。skin.css 里的 .ak-header 把语义令牌重映射到 --ak-chrome-*，页眉内的按钮 / 输入 / 头像 / 菜单自动跟随。
-   * 页眉与头图的关系：头图 .ak-keyart 从页面顶端铺起，页眉是压在它上面的一块均匀黑玻璃（--ak-chrome-bg + 毛玻璃）——
+   * 页眉与头图的关系：头图 .ak-keyart 从页面顶端铺起，页眉是压在它上面的一块均匀黑玻璃（--ak-chrome-bg，毛玻璃默认不开）——
    * 玻璃保证页眉可读，画从玻璃后面透出来；照片一律走 --ak-keyart-image，--ak-chrome-image 只放画在玻璃之上的深色角饰 / 底纹。
    * --ak-logo-image（不设默认值）：站标，设置后 .ak-header__logo img 用 content 替换（Chromium / WebKit；Firefox 请改 $wgLogos）。 */
   --ak-theme-accent: var(--ak-cyan-500);   /* 活动主色：页眉标语 / 悬停、侧栏与目录分组条、页脚斜纹、窄屏卡片顶条 …（正文里的链接 / 选中仍是 --ak-accent；想一起换就连 --ak-accent 也覆盖） */
   --ak-theme-accent-fg: #000;
   --ak-theme-accent-subtle: rgba(24, 209, 255, .14);   /* 活动主色的淡底（页眉里的悬停 / 选中底、聚焦光圈）= --ak-theme-accent 的 14%；换主色时一起写——不用 color-mix() 推导，老浏览器也认 */
-  --ak-chrome-bg: rgba(8, 9, 10, .9);      /* 页眉玻璃：半透明 + 毛玻璃，头图 / 滚过来的正文在下面均匀透出。活动主题想让头图多透一点可调 alpha 到 .78–.85；别低于 .72（白色画面之下 #F2F2F2 仍 ≥7:1） */
+  --ak-chrome-bg: rgba(8, 9, 10, .9);      /* 页眉玻璃：半透明，头图 / 滚过来的正文在下面均匀透出。活动主题想让头图多透一点可调 alpha 到 .78–.85；别低于 .72（白色画面之下 #F2F2F2 仍 ≥7:1） */
+  --ak-chrome-backdrop: none;              /* 页眉玻璃底下的 backdrop-filter（毛玻璃），默认不开：玻璃 .9 不透明时模糊只透出一成，开不开截图逐像素平均只差 1.4/255，却是滚动时 GPU 上最重的一项——粘性页眉每帧都要把底下重糊一遍。玻璃调淡、确实要毛玻璃的活动主题再设 saturate(1.4) blur(10px) 之类 */
   --ak-chrome-bg-solid: #0e0f10;           /* 不透明处：窄屏工具卡片、飞出菜单 */
   --ak-chrome-fg: #f2f2f2;
   --ak-chrome-fg-2: rgba(255, 255, 255, .74);
@@ -645,7 +646,7 @@ html.skin-theme-clientpref-night,
   --ak-keyart-h: 0px;                      /* 页眉之下那段画的高度（画有多高，不是占多高——占位看 -reveal） */
   --ak-keyart-reveal: 72px;                /* 留在版面之上、不被压住的一段高度（不超过 --ak-keyart-h，没有头图时不占位）：默认留一小条，画先露一口气、版面不贴着页眉；0 = 完全垫在版面背后；= --ak-keyart-h 即一条横幅带。≤639 为 0（functional/compact） */
   --ak-keyart-veil: 60%;                   /* 垫在版面背后那一段蒙的画布色纱：顶端的浓度，往下渐浓到 100%。画面越花调得越高；别低于 50%（侧栏 / 标题压在画上要读得清） */
-  --ak-keyart-veil-filter: blur(8px);      /* 纱底下先给画加的 backdrop-filter：细节先糊开、再被纱盖住，亮色主题下读起来是雾 / 景深而不是隔着磨砂膜；none 关闭。画面鲜艳的主题可以再加 saturate(.6) 之类 */
+  --ak-keyart-veil-filter: blur(8px);      /* 纱底下先给画加的 filter（加在 ::before 里同一幅头图的副本上，不是 backdrop-filter）：细节先糊开、再被纱盖住，亮色主题下读起来是雾 / 景深而不是隔着磨砂膜；none 关闭。画面鲜艳的主题可以再加 saturate(.6) 之类 */
   --ak-keyart-position: center 30%;        /* -position / -size 相对整块（页眉高 + -h）计算 */
   --ak-keyart-size: cover;
   --ak-keyart-bg: transparent;             /* 画未铺满 / 未加载时的底色；默认透明，没有头图时页眉背后什么也不多画 */

package/tokens.json

@@ -43,7 +43,7 @@
     "theme.rarity-text": "Rarity text-safe（用于文字/描边）",
     "theme.shadow": "阴影",
     "theme.decoration": "装饰：白线稿反相 / 斜纹 / 网格 / 网点 / 滚动条",
-    "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）。",
+    "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）。",
     "codex": "MediaWiki 1.43 核心与扩展（Codex 组件、mw-message-box、OOUI WikimediaUI 主题的部分）读取这些 CSS 变量。\n把它们映射到 PRTS Design 语义令牌，皮肤外的 UI 即可自动换肤。"
   },
   "tokens": [
@@ -3109,13 +3109,26 @@
         "chrome",
         "chrome-bg"
       ],
-      "description": "页眉玻璃：半透明 + 毛玻璃，头图 / 滚过来的正文在下面均匀透出。活动主题想让头图多透一点可调 alpha 到 .78–.85；别低于 .72（白色画面之下 #F2F2F2 仍 ≥7:1）",
+      "description": "页眉玻璃：半透明，头图 / 滚过来的正文在下面均匀透出。活动主题想让头图多透一点可调 alpha 到 .78–.85；别低于 .72（白色画面之下 #F2F2F2 仍 ≥7:1）",
       "css": "rgba(8, 9, 10, .9)",
       "resolved": {
         "light": "rgba(8, 9, 10, .9)",
         "dark": "rgba(8, 9, 10, .9)"
       }
     },
+    {
+      "name": "--ak-chrome-backdrop",
+      "path": [
+        "chrome",
+        "chrome-backdrop"
+      ],
+      "description": "页眉玻璃底下的 backdrop-filter（毛玻璃），默认不开：玻璃 .9 不透明时模糊只透出一成，开不开截图逐像素平均只差 1.4/255，却是滚动时 GPU 上最重的一项——粘性页眉每帧都要把底下重糊一遍。玻璃调淡、确实要毛玻璃的活动主题再设 saturate(1.4) blur(10px) 之类",
+      "css": "none",
+      "resolved": {
+        "light": "none",
+        "dark": "none"
+      }
+    },
     {
       "name": "--ak-chrome-bg-solid",
       "path": [
@@ -3340,7 +3353,7 @@
         "chrome",
         "keyart-veil-filter"
       ],
-      "description": "纱底下先给画加的 backdrop-filter：细节先糊开、再被纱盖住，亮色主题下读起来是雾 / 景深而不是隔着磨砂膜；none 关闭。画面鲜艳的主题可以再加 saturate(.6) 之类",
+      "description": "纱底下先给画加的 filter（加在 ::before 里同一幅头图的副本上，不是 backdrop-filter）：细节先糊开、再被纱盖住，亮色主题下读起来是雾 / 景深而不是隔着磨砂膜；none 关闭。画面鲜艳的主题可以再加 saturate(.6) 之类",
       "css": "blur(8px)",
       "resolved": {
         "light": "blur(8px)",