@mooncellwiki/prts-design-tokens 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026-present MooncellWiki
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,13 @@
+# @mooncellwiki/prts-design-tokens
+
+PRTS Design（明日方舟网页设计系统，prts.wiki 皮肤）的设计令牌，≈ primer/primitives。
+
+- `src/**/*.json5`：W3C DTCG 格式的源——`base/` 原始色板 · 字体 · 尺寸 · 动效 · 层级，`functional/` 亮 / 暗 / 高对比语义令牌与页眉头图画布主题接口，`bridge/` MediaWiki Codex 桥接
+- `tokens.css`：CSS 变量版——亮 `:root` / 暗 `data-theme="dark"` · `html.skin-theme-clientpref-night` / 跟随系统 / 局部主题 `.ak-scope[data-theme]` / 高对比；只要令牌时 `import "@mooncellwiki/prts-design-tokens/tokens.css"`
+- `tokens.json`：每个令牌的 CSS 写法与亮 / 暗解析值
+
+`tokens.css` 与 [`packages/css`](../css)（`@mooncellwiki/prts-design-css`）里的 `src/tokens.css` 是同一份生成物；Codex / MediaWiki 桥接（`bridge/codex` 源）单独生成在 CSS 包的 `bridge-codex.css`，只属于皮肤、不在这份 `tokens.css` 里（`tokens.json` 里仍有它们）。仓库内改完源文件跑 `pnpm tokens` 重新生成。
+
+许可：MIT。
+
+文档：https://mooncellwiki.github.io/prts-design/foundations/color

package/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "@mooncellwiki/prts-design-tokens",
+  "version": "0.1.0",
+  "description": "PRTS Design · 明日方舟网页设计系统的设计令牌：W3C DTCG 格式的 JSON5 源 + CSS 变量版 tokens.css（亮 / 暗 / 跟随系统 / 局部主题）+ 解析后的 tokens.json（每个令牌带 CSS 写法与亮 / 暗解析值）",
+  "license": "MIT",
+  "type": "module",
+  "homepage": "https://mooncellwiki.github.io/prts-design/foundations/color",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/MooncellWiki/prts-design.git",
+    "directory": "packages/tokens"
+  },
+  "exports": {
+    "./tokens.css": "./tokens.css",
+    "./tokens.json": "./tokens.json",
+    "./src/*": "./src/*",
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "src",
+    "tokens.css",
+    "tokens.json"
+  ],
+  "devDependencies": {
+    "json5": "^2.2.3",
+    "style-dictionary": "^5.5.5"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "node build.ts"
+  }
+}

package/src/base/asset.json5

@@ -0,0 +1,6 @@
+{
+  asset: {
+    $description: "资源路径约定：模板 / Gadget 拼图标路径的基准（默认相对 preview/assets；生产环境见文档站 /foundations/icons#游戏图标）。CSS 不读它——url() 里不能放 var()；CSS 引用的游戏素材走 base/skin-assets.css 的 --ak-item-bg-* 接口",
+    "asset-base": { $value: "assets" },
+  },
+}

package/src/base/color.json5

@@ -0,0 +1,94 @@
+{
+  color: {
+    $description: "1. 原始色板 --ak-{hue}-{step}（来源：官网 CSS / 游戏解包 / gamedata）；组件不直接用，经由 functional/themes 的语义令牌引用",
+    neutral: {
+      $description: "Neutrals · 取自游戏内 UI 灰阶（btn #313131 / panel #F5F5F5）与官网灰阶",
+      $type: "color",
+      "gray-0": { $value: "#ffffff" },
+      "gray-50": { $value: "#f5f5f5", $description: "in-game light panel" },
+      "gray-100": { $value: "#ebebeb" },
+      "gray-200": { $value: "#d2d2d2", $description: "site" },
+      "gray-300": { $value: "#b1b1b1" },
+      "gray-400": { $value: "#8d8d8d", $description: "site" },
+      "gray-500": { $value: "#626262", $description: "in-game btn_done" },
+      "gray-600": { $value: "#535353" },
+      "gray-700": { $value: "#3b3b3b" },
+      "gray-800": { $value: "#313131", $description: "in-game standard button" },
+      "gray-850": { $value: "#272727", $description: "site" },
+      "gray-900": { $value: "#1d1f20", $description: "site panel" },
+      "gray-950": { $value: "#181818", $description: "in-game deep" },
+      "gray-1000": { $value: "#000000" },
+    },
+    brand: {
+      $description: "Brand cyan / blue · 官网 #18D1FF，游戏内选中蓝 #0098DC",
+      $type: "color",
+      "cyan-200": { $value: "#7ee5ff" },
+      "cyan-300": { $value: "#5ddcff" },
+      "cyan-400": { $value: "#22bbff", $description: "in-game select_round" },
+      "cyan-500": { $value: "#18d1ff", $description: "★ site brand accent" },
+      "blue-400": { $value: "#00b0ff", $description: "in-game <ba.kw>" },
+      "blue-500": { $value: "#0098dc", $description: "★ in-game UI blue / <ba.vup>" },
+      "blue-600": { $value: "#0075a9", $description: "in-game toggle-on" },
+      "blue-700": { $value: "#005a82" },
+    },
+    yellow: {
+      $description: "Yellow · 稀有度星 / 商店 / 关卡名",
+      $type: "color",
+      "yellow-400": { $value: "#ffe75a" },
+      "yellow-500": { $value: "#ffd800", $description: "★ in-game yellow (rarity #FFDE00)" },
+      "yellow-600": { $value: "#ffc90e", $description: "<ga.subtitle>" },
+      "yellow-700": { $value: "#eab841" },
+    },
+    lime: {
+      $description: "Lime · SP / 官网次级强调",
+      $type: "color",
+      "lime-400": { $value: "#caec46", $description: "in-game SP cost" },
+      "lime-500": { $value: "#c8eb21", $description: "site" },
+      "lime-600": { $value: "#8fc31f", $description: "site" },
+    },
+    orange: {
+      $description: "Orange",
+      $type: "color",
+      "orange-400": { $value: "#ff9433", $description: "6★" },
+      "orange-500": { $value: "#f49800", $description: "<ba.rem>" },
+      "orange-600": { $value: "#e5622b", $description: "in-game mission track" },
+    },
+    red: {
+      $description: "Red",
+      $type: "color",
+      "red-400": { $value: "#ff6237", $description: "<ba.vdown>" },
+      "red-500": { $value: "#d83c3c", $description: "<ba.enemy>" },
+      "red-600": { $value: "#c82a36", $description: "in-game NEW mark" },
+      "red-700": { $value: "#a40000", $description: "in-game BREAKING NEWS" },
+      "red-800": { $value: "#711111", $description: "in-game confirm button" },
+      "red-900": { $value: "#860101", $description: "specialization" },
+      "magenta-500": { $value: "#e40043", $description: "in-game monthly card" },
+    },
+    "green-purple": {
+      $description: "Green / Purple",
+      $type: "color",
+      "green-500": { $value: "#2fac78", $description: "<ba.gild>" },
+      "green-400": { $value: "#4ffaa5" },
+      "purple-400": { $value: "#bf96ed", $description: "4★" },
+      "purple-500": { $value: "#9266b2" },
+    },
+    rarity: {
+      $description: "Rarity · 官方色阶 (gamedata sandbox_table.charRarityColorList)",
+      $type: "color",
+      "rarity-1": { $value: "#bababa" },
+      "rarity-2": { $value: "#d3dc35" },
+      "rarity-3": { $value: "#82c5f5" },
+      "rarity-4": { $value: "#bf96ed" },
+      "rarity-5": { $value: "#efd691" },
+      "rarity-6": { $value: "#ff9433" },
+    },
+    sp: {
+      $description: "Skill SP 回复类型（对应游戏内技能框配色，近似取值）",
+      $type: "color",
+      "sp-auto": { $value: "#8fc31f", $description: "自动回复 INCREASE_WITH_TIME" },
+      "sp-attack": { $value: "#ff8a00", $description: "攻击回复 INCREASE_WHEN_ATTACK" },
+      "sp-hit": { $value: "#ffd800", $description: "受击回复 INCREASE_WHEN_TAKEN_DAMAGE" },
+      "sp-passive": { $value: "#8d8d8d", $description: "被动" },
+    },
+  },
+}

package/src/base/motion.json5

@@ -0,0 +1,20 @@
+{
+  motion: {
+    duration: {
+      $description: "Motion · 时长",
+      $type: "duration",
+      "dur-instant": { $value: "80ms" },
+      "dur-fast": { $value: "150ms" },
+      "dur-normal": { $value: "250ms" },
+      "dur-slow": { $value: "400ms" },
+    },
+    easing: {
+      $description: "Motion · 缓动",
+      $type: "cubicBezier",
+      ease: { $value: "cubic-bezier(0.2, 0.8, 0.2, 1)" },
+      "ease-in": { $value: "cubic-bezier(0.4, 0, 1, 1)" },
+      "ease-out": { $value: "cubic-bezier(0, 0, 0.2, 1)" },
+      "ease-sharp": { $value: "cubic-bezier(0.4, 0, 0.2, 1)" },
+    },
+  },
+}

package/src/base/size.json5

@@ -0,0 +1,57 @@
+{
+  size: {
+    space: {
+      $description: "Spacing (4px grid)",
+      $type: "dimension",
+      "space-1": { $value: "4px" },
+      "space-2": { $value: "8px" },
+      "space-3": { $value: "12px" },
+      "space-4": { $value: "16px" },
+      "space-5": { $value: "20px" },
+      "space-6": { $value: "24px" },
+      "space-8": { $value: "32px" },
+      "space-10": { $value: "40px" },
+      "space-12": { $value: "48px" },
+      "space-16": { $value: "64px" },
+      "space-20": { $value: "80px" },
+      "space-24": { $value: "96px" },
+    },
+    shape: {
+      $description: "Shape · 方舟 = 直角；仅极小圆角用于输入框。不做切角 / 斜切 / 斜带——整套系统里没有 45° 的斜边。\n色条 + 细框（pre / 消息 / 面板头 / 模组卡 …）：粗的 border-left 与 1px 的 border-top/bottom 在角上会被浏览器\n斜接（miter）出一道小斜边，看着像「斜切装饰」；所以这类盒子的框用 border-image 画成直角拼接：\nborder: 1px solid var(--ak-border); border-left-width: 4px;\nborder-image: linear-gradient(to right, <色条色> 4px, var(--ak-border) 4px) 1 1 1 4;   ← slice 与各边 border-width 一致\n（顶部色条同理：linear-gradient(<色条色> 3px, var(--ak-border) 3px) 3 1 1 1）。只有一条边有色条、其它边无框的盒子不受影响。",
+      $type: "dimension",
+      radius: { $value: "0px" },
+      "radius-sm": { $value: "2px" },
+      "radius-pill": { $value: "999px" },
+      "bar-w": { $value: "4px", $description: "标题左侧色条宽度" },
+      "bar-w-lg": { $value: "8px" },
+    },
+    layout: {
+      $description: "Layout · 与 Codex 断点一致: 320 / 640 / 1120 / 1680",
+      $type: "dimension",
+      "header-h": { $value: "56px" },
+      "local-nav-h": { $value: "48px", $description: "二级吸顶栏（<1400 出现：菜单 / 本页目录）" },
+      "sidebar-w": { $value: "248px" },
+      "toc-w": { $value: "240px" },
+      "content-max": { $value: "1240px", $description: "阅读区最大宽度；表格密集页可加 .ak-wide" },
+      "content-narrow": { $value: "760px" },
+      gutter: { $value: "24px" },
+      "gutter-sm": { $value: "16px" },
+    },
+    icon: {
+      $description: "Icon sizes",
+      $type: "dimension",
+      "icon-xs": { $value: "14px" },
+      "icon-sm": { $value: "18px" },
+      "icon-md": { $value: "24px" },
+      "icon-lg": { $value: "32px" },
+      "icon-xl": { $value: "48px" },
+    },
+    decoration: {
+      $description: "Signature decorations",
+      $type: "dimension",
+      "stripe-size": { $value: "8px" },
+      "halftone-size": { $value: "6px" },
+      "grid-size": { $value: "32px" },
+    },
+  },
+}

package/src/base/typography.json5

@@ -0,0 +1,56 @@
+{
+  typography: {
+    font: {
+      $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 关掉 / 离线单文件）时自然退到后两段。",
+      $type: "fontFamily",
+      "font-body": {
+        $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",
+      },
+      "font-display": {
+        $value: "\"Novecento Sans Wide\", \"Novecentosanswide-Bold\", \"Bender\", \"Oswald\", \"Michroma\", \"Arial Narrow\", system-ui, sans-serif",
+        $description: "拉丁展示字（大写）：Novecento 500–800 → Bender → Oswald 接非 ASCII",
+      },
+      "font-label": {
+        $value: "\"Bender\", \"Bender-Bold\", \"Chakra Petch\", \"Rajdhani\", \"Saira\", \"Oswald\", system-ui, sans-serif",
+        $description: "HUD 标签 / 数值：Bender 400/700 → Chakra Petch 接非 ASCII",
+      },
+      "font-condensed": {
+        $value: "\"Oswald\", \"Roboto Condensed\", \"Arial Narrow\", sans-serif",
+        $description: "自托管 Oswald 200–700",
+      },
+      "font-mono": {
+        $value: "\"JetBrains Mono\", \"SF Mono\", Menlo, Consolas, \"Liberation Mono\", monospace",
+        $description: "自托管 JetBrains Mono 100–800 正 / 斜",
+      },
+    },
+    "font-size": {
+      $description: "字号（rem；注释为 px）",
+      $type: "dimension",
+      "fs-display-xl": { $value: "3.5rem", $description: "56" },
+      "fs-display": { $value: "2.5rem", $description: "40" },
+      "fs-h1": { $value: "2rem", $description: "32" },
+      "fs-h2": { $value: "1.5rem", $description: "24" },
+      "fs-h3": { $value: "1.25rem", $description: "20" },
+      "fs-h4": { $value: "1.0625rem", $description: "17" },
+      "fs-body-lg": { $value: "1.125rem", $description: "18" },
+      "fs-body": { $value: "1rem", $description: "16" },
+      "fs-sm": { $value: "0.875rem", $description: "14" },
+      "fs-xs": { $value: "0.75rem", $description: "12" },
+      "fs-overline": { $value: "0.6875rem", $description: "11" },
+    },
+    "line-height": {
+      $description: "行高",
+      $type: "number",
+      "lh-body": { $value: "1.7", $description: "CJK 正文" },
+      "lh-tight": { $value: "1.25" },
+      "lh-display": { $value: "1.05" },
+    },
+    tracking: {
+      $description: "字距",
+      $type: "dimension",
+      "tracking-caps": { $value: "0.08em" },
+      "tracking-overline": { $value: "0.14em" },
+      "tracking-display": { $value: "-0.02em" },
+    },
+  },
+}

package/src/base/z-index.json5

@@ -0,0 +1,15 @@
+{
+  layer: {
+    "z-index": {
+      $description: "Z-index",
+      $type: "number",
+      "z-dropdown": { $value: "100" },
+      "z-sticky": { $value: "200" },
+      "z-header": { $value: "1000" },
+      "z-overlay": { $value: "1500" },
+      "z-modal": { $value: "2000" },
+      "z-toast": { $value: "3000" },
+      "z-tooltip": { $value: "4000" },
+    },
+  },
+}

package/src/bridge/codex.json5

@@ -0,0 +1,90 @@
+{
+  codex: {
+    $description: "MediaWiki 1.43 核心与扩展（Codex 组件、mw-message-box、OOUI WikimediaUI 主题的部分）读取这些 CSS 变量。\n把它们映射到 PRTS Design 语义令牌，皮肤外的 UI 即可自动换肤。",
+    "background-color-base": { $value: "{theme.background.bg-surface}" },
+    "background-color-neutral": { $value: "{theme.background.bg-surface-2}" },
+    "background-color-neutral-subtle": { $value: "{theme.background.bg-canvas}" },
+    "background-color-interactive": { $value: "{theme.background.bg-surface-2}" },
+    "background-color-interactive-subtle": { $value: "{theme.background.bg-surface-2}" },
+    "background-color-interactive--hover": { $value: "{theme.background.bg-hover}" },
+    "background-color-interactive--active": { $value: "{theme.background.bg-active}" },
+    "background-color-disabled": { $value: "{theme.background.bg-surface-3}" },
+    "background-color-disabled-subtle": { $value: "{theme.background.bg-surface-2}" },
+    "background-color-inverted": { $value: "{theme.background.bg-inverse}" },
+    "background-color-progressive": { $value: "{theme.accent.accent}" },
+    "background-color-progressive--hover": { $value: "{theme.accent.accent-hover}" },
+    "background-color-progressive--active": { $value: "{theme.accent.accent-hover}" },
+    "background-color-progressive-subtle": { $value: "{theme.accent.accent-subtle}" },
+    "background-color-destructive": { $value: "{theme.status.danger}" },
+    "background-color-destructive-subtle": { $value: "{theme.status.danger-bg}" },
+    "background-color-error-subtle": { $value: "{theme.status.danger-bg}" },
+    "background-color-warning-subtle": { $value: "{theme.status.warning-bg}" },
+    "background-color-success-subtle": { $value: "{theme.status.success-bg}" },
+    "background-color-notice-subtle": { $value: "{theme.status.info-bg}" },
+    "background-color-backdrop-light": { $value: "{theme.background.bg-overlay}" },
+    "background-color-backdrop-dark": { $value: "{theme.background.bg-overlay}" },
+    "color-base": { $value: "{theme.foreground.fg}" },
+    "color-base--hover": { $value: "{theme.foreground.fg}" },
+    "color-emphasized": { $value: "{theme.foreground.fg}" },
+    "color-subtle": { $value: "{theme.foreground.fg-muted}" },
+    "color-placeholder": { $value: "{theme.foreground.fg-subtle}" },
+    "color-disabled": { $value: "{theme.foreground.fg-disabled}" },
+    "color-inverted": { $value: "{theme.foreground.fg-inverse}" },
+    "color-progressive": { $value: "{theme.link.link}" },
+    "color-progressive--hover": { $value: "{theme.link.link-hover}" },
+    "color-progressive--active": { $value: "{theme.link.link-hover}" },
+    "color-visited": { $value: "{theme.link.link-visited}" },
+    "color-destructive": { $value: "{theme.status.danger}" },
+    "color-destructive--visited": { $value: "{theme.link.link-new}" },
+    "color-error": { $value: "{theme.status.danger}" },
+    "color-warning": { $value: "{theme.status.warning}" },
+    "color-success": { $value: "{theme.status.success}" },
+    "color-notice": { $value: "{theme.foreground.fg-secondary}" },
+    "color-link-red": { $value: "{theme.link.link-new}" },
+    "color-link-red--visited": { $value: "{theme.link.link-new}" },
+    "color-icon-base": { $value: "{theme.foreground.fg-secondary}" },
+    "border-color-base": { $value: "{theme.border.border}" },
+    "border-color-subtle": { $value: "{theme.border.border-subtle}" },
+    "border-color-muted": { $value: "{theme.border.border-subtle}" },
+    "border-color-interactive": { $value: "{theme.border.border-strong}" },
+    "border-color-disabled": { $value: "{theme.border.border-subtle}" },
+    "border-color-progressive": { $value: "{theme.accent.accent}" },
+    "border-color-progressive--focus": { $value: "{theme.border.focus}" },
+    "border-color-input-binary": {
+      $value: "{theme.border.border-strong}",
+      $description: "复选框/单选框/开关：OOUI 用 6px 边框画选中态的圆点，不映射就是 Codex 默认的 #36c，和强调色对不上",
+    },
+    "border-color-input-binary--checked": { $value: "{theme.accent.accent}" },
+    "border-color-input-binary--active": { $value: "{theme.accent.accent-hover}" },
+    "border-color-destructive": { $value: "{theme.status.danger}" },
+    "border-color-error": { $value: "{theme.status.danger}" },
+    "border-color-warning": { $value: "{theme.status.warning}" },
+    "border-color-success": { $value: "{theme.status.success}" },
+    "border-color-notice": { $value: "{theme.border.border-strong}" },
+    "border-color-transparent": { $value: "transparent" },
+    "border-radius-base": { $value: "{size.shape.radius}" },
+    "border-radius-sharp": { $value: "0" },
+    "border-radius-pill": { $value: "{size.shape.radius-pill}" },
+    "box-shadow-drop-small": { $value: "{theme.shadow.shadow-sm}" },
+    "box-shadow-drop-medium": { $value: "{theme.shadow.shadow-md}" },
+    "box-shadow-drop-xx-large": { $value: "{theme.shadow.shadow-lg}" },
+    "box-shadow-color-progressive--focus": { $value: "{theme.border.focus}" },
+    "box-shadow-color-progressive--active": { $value: "{theme.accent.accent-hover}" },
+    "font-family-base": { $value: "{typography.font.font-body}" },
+    "font-family-heading-main": { $value: "{typography.font.font-body}" },
+    "font-family-monospace": { $value: "{typography.font.font-mono}" },
+    "font-size-medium": { $value: "{typography.font-size.fs-body}" },
+    "font-size-small": { $value: "{typography.font-size.fs-sm}" },
+    "font-size-x-small": { $value: "{typography.font-size.fs-xs}" },
+    "line-height-medium": { $value: "{typography.line-height.lh-body}" },
+    "opacity-icon-base": { $value: "0.87" },
+    "opacity-icon-subtle": { $value: "0.67" },
+    "z-index-dropdown": { $value: "{layer.z-index.z-dropdown}" },
+    "z-index-sticky": { $value: "{layer.z-index.z-sticky}" },
+    "z-index-fixed": { $value: "{layer.z-index.z-header}" },
+    "z-index-overlay": { $value: "{layer.z-index.z-overlay}" },
+    "z-index-overlay-backdrop": { $value: "{layer.z-index.z-overlay}" },
+    "z-index-toast-notification": { $value: "{layer.z-index.z-toast}" },
+    "z-index-tooltip": { $value: "{layer.z-index.z-tooltip}" },
+  },
+}

package/src/functional/chrome.json5

@@ -0,0 +1,41 @@
+{
+  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）。",
+    "theme-accent": {
+      $value: "{color.brand.cyan-500}",
+      $description: "活动主色：页眉标语 / 悬停、侧栏与目录分组条、页脚斜纹、窄屏卡片顶条 …（正文里的链接 / 选中仍是 --ak-accent；想一起换就连 --ak-accent 也覆盖）",
+    },
+    "theme-accent-fg": { $value: "#000" },
+    "chrome-bg": {
+      $value: "rgba(8, 9, 10, .9)",
+      $description: "页眉玻璃：半透明 + 毛玻璃，头图 / 滚过来的正文在下面均匀透出。活动主题想让头图多透一点可调 alpha 到 .78–.85；别低于 .72（白色画面之下 #F2F2F2 仍 ≥7:1）",
+    },
+    "chrome-bg-solid": { $value: "#0e0f10", $description: "不透明处：窄屏工具卡片、飞出菜单" },
+    "chrome-fg": { $value: "#f2f2f2" },
+    "chrome-fg-2": { $value: "rgba(255, 255, 255, .74)" },
+    "chrome-fg-muted": { $value: "rgba(255, 255, 255, .5)" },
+    "chrome-line": { $value: "rgba(255, 255, 255, .14)", $description: "页眉底线 / 分隔线" },
+    "chrome-line-strong": { $value: "rgba(255, 255, 255, .32)" },
+    "chrome-hover": { $value: "rgba(255, 255, 255, .08)" },
+    "chrome-field": { $value: "rgba(255, 255, 255, .07)", $description: "搜索触发器底" },
+    "chrome-image": {
+      $value: "none",
+      $description: "顶栏角饰 / 底纹：url(left.png), url(right.png)（现网 PRTSheadleft 的活动徽章 / Garanheadright 的波纹那种）。画在玻璃之上、不会被压暗——只放深色低对比素材，照片请走 --ak-keyart-image",
+    },
+    "chrome-image-position": { $value: "right top" },
+    "chrome-image-size": { $value: "auto 100%" },
+    "chrome-image-repeat": { $value: "no-repeat" },
+    "chrome-texture": { $value: ".55", $description: "右侧半调网点强度 0–1（游戏顶栏 img_back / 官网左缘网点），0 关闭" },
+    "keyart-image": { $value: "none", $description: "头图（Key Visual）：从页面顶端铺起、页眉压在它上面的一条通栏画；--ak-keyart-h 为 0 时不占位（只在页眉后面透）" },
+    "keyart-h": { $value: "0px", $description: "页眉之下可见的那段高度" },
+    "keyart-position": { $value: "center 30%", $description: "-position / -size 相对整块（页眉高 + -h）计算" },
+    "keyart-size": { $value: "cover" },
+    "keyart-bg": { $value: "transparent", $description: "画未铺满 / 未加载时的底色；默认透明，没有头图时页眉背后什么也不多画" },
+    "keyart-fade": { $value: "96px", $description: "底部渐隐进画布的高度，0 关闭" },
+    "canvas-image": { $value: "none", $description: "页面画布底纹 / 底图（body 背景，叠在 --ak-bg-canvas 之上；现网 body 的 bkg 图位置）" },
+    "canvas-position": { $value: "center top" },
+    "canvas-size": { $value: "auto" },
+    "canvas-repeat": { $value: "repeat" },
+    "canvas-attachment": { $value: "scroll" },
+  },
+}

package/src/functional/control.json5

@@ -0,0 +1,10 @@
+{
+  control: {
+    "select-arrow": {
+      $description: "下拉箭头 ▾：裸 <select> 与 .ak-select 同一枚（两条 45° 渐变拼成实心三角，颜色随主题的 --ak-fg-muted）",
+      "select-arrow": {
+        $value: "linear-gradient(45deg, transparent 50%, {theme.foreground.fg-muted} 50%), linear-gradient(135deg, {theme.foreground.fg-muted} 50%, transparent 50%)",
+      },
+    },
+  },
+}

package/src/functional/themes/contrast-more.json5

@@ -0,0 +1,12 @@
+{
+  theme: {
+    border: {
+      $type: "color",
+      border: { $value: "{theme.border.border-strong}" },
+    },
+    foreground: {
+      $type: "color",
+      "fg-muted": { $value: "{theme.foreground.fg-secondary}" },
+    },
+  },
+}

package/src/functional/themes/dark.json5

@@ -0,0 +1,114 @@
+{
+  theme: {
+    background: {
+      $description: "背景 / 表面",
+      $type: "color",
+      "bg-canvas": { $value: "#0f0f10" },
+      "bg-surface": { $value: "#1a1b1c" },
+      "bg-surface-2": { $value: "#232425" },
+      "bg-surface-3": { $value: "#2d2e30" },
+      "bg-inset": { $value: "#141516" },
+      "bg-hover": { $value: "rgba(255, 255, 255, 0.06)" },
+      "bg-active": { $value: "rgba(255, 255, 255, 0.11)" },
+      "bg-inverse": { $value: "{color.neutral.gray-0}" },
+      "bg-overlay": { $value: "rgba(0, 0, 0, 0.7)" },
+    },
+    foreground: {
+      $description: "文字",
+      $type: "color",
+      fg: { $value: "#f0f0f0" },
+      "fg-secondary": { $value: "#c9c9c9" },
+      "fg-muted": { $value: "{color.neutral.gray-400}" },
+      "fg-subtle": { $value: "#6f7071" },
+      "fg-disabled": { $value: "#4a4b4c" },
+      "fg-inverse": { $value: "{color.neutral.gray-950}" },
+    },
+    accent: {
+      $description: "强调色：亮色 = 游戏内蓝 #0098DC，暗色 = 官网青 #18D1FF；次强调 = 黄",
+      $type: "color",
+      accent: { $value: "{color.brand.cyan-500}", $description: "暗色下用官网青 #18D1FF" },
+      "accent-hover": { $value: "{color.brand.cyan-200}" },
+      "accent-fg": { $value: "#000000" },
+      "accent-subtle": { $value: "rgba(24, 209, 255, 0.10)" },
+      "accent-muted": { $value: "rgba(24, 209, 255, 0.30)" },
+      "accent-2": { $value: "{color.yellow.yellow-500}" },
+      "accent-2-fg": { $value: "#000000" },
+    },
+    link: {
+      $description: "链接",
+      $type: "color",
+      link: { $value: "{color.brand.cyan-300}" },
+      "link-hover": { $value: "{color.brand.cyan-200}" },
+      "link-visited": {
+        $value: "#3f8ea4",
+        $description: "已访问 = 青 #5ddcff × 62% + 画布 #0f0f10 × 38%（视觉上就是「62% 透明的链接色」，写成实色）；黑底 5:1、surface 4.6:1",
+      },
+      "link-new": { $value: "#ff6b6b" },
+      "link-external": { $value: "{color.brand.cyan-300}" },
+    },
+    border: {
+      $description: "边框 / 焦点 / 选区 / 高亮",
+      $type: "color",
+      border: { $value: "#2f3133" },
+      "border-subtle": { $value: "#262729" },
+      "border-strong": { $value: "#4a4c4f" },
+      "border-accent": { $value: "{color.brand.cyan-500}" },
+      focus: { $value: "{color.brand.cyan-500}" },
+      selection: { $value: "rgba(24, 209, 255, 0.28)" },
+      "mark-bg": { $value: "rgba(24, 209, 255, 0.20)" },
+    },
+    status: {
+      $description: "状态色",
+      $type: "color",
+      info: { $value: "{color.brand.cyan-300}" },
+      "info-bg": { $value: "rgba(24, 209, 255, 0.10)" },
+      success: { $value: "#4fd18f" },
+      "success-bg": { $value: "rgba(47, 172, 120, 0.14)" },
+      warning: { $value: "#ffb340" },
+      "warning-bg": { $value: "rgba(244, 152, 0, 0.14)" },
+      danger: { $value: "#ff5c5c" },
+      "danger-bg": { $value: "rgba(216, 60, 60, 0.14)" },
+    },
+    "rich-text": {
+      $description: "Rich text（游戏内 <color> 标签）· 暗色下即游戏原值",
+      $type: "color",
+      "rt-vup": { $value: "{color.brand.blue-500}" },
+      "rt-vdown": { $value: "{color.red.red-400}" },
+      "rt-rem": { $value: "{color.orange.orange-500}" },
+      "rt-kw": { $value: "{color.brand.blue-400}" },
+      "rt-imp": { $value: "#ff3b3b" },
+      "rt-drop": { $value: "#36acff" },
+      "rt-enemy": { $value: "{color.red.red-500}" },
+      "rt-gild": { $value: "{color.green-purple.green-500}" },
+      "rt-acrem": { $value: "#8a8a8a" },
+      "rt-level": { $value: "#ffde00" },
+    },
+    "rarity-text": {
+      $description: "Rarity text-safe · 暗色下直接用稀有度原色",
+      $type: "color",
+      "rarity-1-text": { $value: "{color.rarity.rarity-1}" },
+      "rarity-2-text": { $value: "{color.rarity.rarity-2}" },
+      "rarity-3-text": { $value: "{color.rarity.rarity-3}" },
+      "rarity-4-text": { $value: "{color.rarity.rarity-4}" },
+      "rarity-5-text": { $value: "{color.rarity.rarity-5}" },
+      "rarity-6-text": { $value: "{color.rarity.rarity-6}" },
+    },
+    shadow: {
+      $description: "阴影",
+      $type: "shadow",
+      "shadow-sm": { $value: "0 1px 2px rgba(0,0,0,.4)" },
+      "shadow-md": { $value: "0 4px 14px rgba(0,0,0,.5), 0 1px 3px rgba(0,0,0,.4)" },
+      "shadow-lg": { $value: "0 16px 40px rgba(0,0,0,.6), 0 2px 6px rgba(0,0,0,.4)" },
+      "shadow-accent": { $value: "0 0 0 3px {theme.accent.accent-subtle}" },
+    },
+    decoration: {
+      $description: "装饰：白线稿反相 / 斜纹 / 网格 / 网点 / 滚动条",
+      "glyph-filter": { $value: "none" },
+      "glyph-filter-inverse": { $value: "invert(1)" },
+      "stripe-color": { $value: "rgba(255,255,255,.07)" },
+      "grid-color": { $value: "rgba(255,255,255,.05)" },
+      "halftone-color": { $value: "rgba(255,255,255,.16)" },
+      scrollbar: { $value: "#3b3d40" },
+    },
+  },
+}