@mooncellwiki/prts-design-tokens 0.1.0

package/src/functional/themes/light.json5

@@ -0,0 +1,120 @@
+{
+  theme: {
+    background: {
+      $description: "背景 / 表面",
+      $type: "color",
+      "bg-canvas": { $value: "{color.neutral.gray-50}" },
+      "bg-surface": { $value: "{color.neutral.gray-0}" },
+      "bg-surface-2": { $value: "{color.neutral.gray-50}" },
+      "bg-surface-3": { $value: "{color.neutral.gray-100}" },
+      "bg-inset": { $value: "#eef0f1" },
+      "bg-hover": { $value: "rgba(0, 0, 0, 0.05)" },
+      "bg-active": { $value: "rgba(0, 0, 0, 0.09)" },
+      "bg-inverse": { $value: "{color.neutral.gray-900}" },
+      "bg-overlay": { $value: "rgba(15, 15, 16, 0.6)" },
+    },
+    foreground: {
+      $description: "文字",
+      $type: "color",
+      fg: { $value: "{color.neutral.gray-900}" },
+      "fg-secondary": { $value: "#454647" },
+      "fg-muted": { $value: "{color.neutral.gray-500}" },
+      "fg-subtle": { $value: "{color.neutral.gray-400}" },
+      "fg-disabled": { $value: "{color.neutral.gray-300}" },
+      "fg-inverse": { $value: "{color.neutral.gray-0}" },
+    },
+    accent: {
+      $description: "强调色：亮色 = 游戏内蓝 #0098DC，暗色 = 官网青 #18D1FF；次强调 = 黄",
+      $type: "color",
+      accent: { $value: "{color.brand.blue-500}", $description: "亮色下用游戏内蓝 #0098DC，对比更稳" },
+      "accent-hover": { $value: "{color.brand.blue-600}" },
+      "accent-fg": { $value: "#ffffff" },
+      "accent-subtle": { $value: "rgba(0, 152, 220, 0.10)" },
+      "accent-muted": { $value: "rgba(0, 152, 220, 0.28)" },
+      "accent-2": { $value: "{color.yellow.yellow-500}", $description: "次强调：黄" },
+      "accent-2-fg": { $value: "#1d1f20" },
+    },
+    link: {
+      $description: "链接",
+      $type: "color",
+      link: { $value: "#0072a8" },
+      "link-hover": { $value: "#005a82" },
+      "link-visited": {
+        $value: "#2c6b88",
+        $description: "已访问 = 链接色「褪一层」而不是换成紫：= #0072a8 × 55% + --ak-fg-muted #626262 × 45%（变灰变钝，白底 5.9:1）。\n写死算好的实色，不用 color-mix——链接色是常量，没必要让正文链接吃一个 2023 年的特性；重算：round(l*k + m*(1-k))。\n:visited 里的 alpha 会被浏览器丢掉（防历史嗅探），所以必须是实色；悬停回 --ak-link-hover",
+      },
+      "link-new": { $value: "#c82a36", $description: "红链" },
+      "link-external": { $value: "#0072a8" },
+    },
+    border: {
+      $description: "边框 / 焦点 / 选区 / 高亮",
+      $type: "color",
+      border: { $value: "#d9dbdc" },
+      "border-subtle": { $value: "#e8eaeb" },
+      "border-strong": { $value: "#b1b1b1" },
+      "border-accent": { $value: "{color.brand.blue-500}" },
+      focus: { $value: "{color.brand.blue-500}" },
+      selection: { $value: "rgba(0, 152, 220, 0.25)" },
+      "mark-bg": {
+        $value: "rgba(0, 152, 220, 0.14)",
+        $description: "<mark> 文字高亮：同 :target 引用 / 表格 is-hl / 面板当前项一套「淡青底」语言，比 --ak-accent-subtle 深一档、比 ::selection 浅一档（选中时仍看得出变化）；\n不用黄——黄留给稀有度 / 警示条纹，且半透明黄叠在暗色面上会发闷成橄榄色；不用红——红链 / danger 已占满红的语义，红底高亮会像报错，红链落在里面也看不清",
+      },
+    },
+    status: {
+      $description: "状态色",
+      $type: "color",
+      info: { $value: "#0072a8" },
+      "info-bg": { $value: "rgba(0, 152, 220, 0.10)" },
+      success: { $value: "#1f8f5f" },
+      "success-bg": { $value: "rgba(47, 172, 120, 0.12)" },
+      warning: { $value: "#b86f00" },
+      "warning-bg": { $value: "rgba(244, 152, 0, 0.14)" },
+      danger: { $value: "#c8102e" },
+      "danger-bg": { $value: "rgba(200, 42, 54, 0.10)" },
+    },
+    "rich-text": {
+      $description: "Rich text（游戏内 <color> 标签）· 亮色下微调以满足 AA",
+      $type: "color",
+      "rt-vup": { $value: "#007bb5" },
+      "rt-vdown": { $value: "#d0421c" },
+      "rt-rem": { $value: "#b86f00" },
+      "rt-kw": { $value: "#0077b3" },
+      "rt-imp": { $value: "#d40000" },
+      "rt-drop": { $value: "#1d78b8" },
+      "rt-enemy": { $value: "#c22f2f" },
+      "rt-gild": { $value: "#1f8f5f" },
+      "rt-acrem": { $value: "#727272" },
+      "rt-level": { $value: "#9a7b00" },
+    },
+    "rarity-text": {
+      $description: "Rarity text-safe（用于文字/描边）",
+      $type: "color",
+      "rarity-1-text": { $value: "#6f6f6f" },
+      "rarity-2-text": { $value: "#7f8a00" },
+      "rarity-3-text": { $value: "#1d78b8" },
+      "rarity-4-text": { $value: "#7d4fc2" },
+      "rarity-5-text": { $value: "#a87a00" },
+      "rarity-6-text": { $value: "#d45f00" },
+    },
+    shadow: {
+      $description: "阴影",
+      $type: "shadow",
+      "shadow-sm": { $value: "0 1px 2px rgba(0,0,0,.08)" },
+      "shadow-md": { $value: "0 4px 12px rgba(0,0,0,.10), 0 1px 3px rgba(0,0,0,.06)" },
+      "shadow-lg": { $value: "0 12px 32px rgba(0,0,0,.14), 0 2px 6px rgba(0,0,0,.08)" },
+      "shadow-accent": { $value: "0 0 0 3px {theme.accent.accent-subtle}" },
+    },
+    decoration: {
+      $description: "装饰：白线稿反相 / 斜纹 / 网格 / 网点 / 滚动条",
+      "glyph-filter": { $value: "invert(1)", $description: "游戏白色线稿图标在亮色下反相为黑" },
+      "glyph-filter-inverse": {
+        $value: "none",
+        $description: "同一套白线稿落在反色块（--ak-bg-inverse 底：.ak-phase-tabs 选中项那种）上时用——亮色下反色块是深底，白线稿不动；暗色下反色块是白底，要反相。组件走这个令牌，别按 :root[data-theme] 分支：跟随系统的暗色没有 data-theme，会漏",
+      },
+      "stripe-color": { $value: "rgba(0,0,0,.08)" },
+      "grid-color": { $value: "rgba(0,0,0,.06)" },
+      "halftone-color": { $value: "rgba(0,0,0,.14)" },
+      scrollbar: { $value: "#c4c6c8" },
+    },
+  },
+}