twskin 0.6.2 → 0.6.3

package/CHANGELOG.md

@@ -5,6 +5,23 @@ All notable changes to this package are documented here. This project follows
 
 ## [Unreleased]
 
+## [0.6.3] - 2026-07-29
+
+### Fixed
+
+- Corrected the semantic foreground for TRAE's inverted primary actions. Settings,
+  Automation, Marketplace and their dialogs now use a high-contrast foreground
+  independently from the brand-color foreground in every official theme.
+- Removed the fixed pale strip behind the Templates tabs and the Automation Run
+  History filter bar, while preserving the hierarchy of their interactive controls.
+- Made injected runtime payloads read their version from the packaged manifest,
+  preventing a current runtime from being mistaken for an older injection.
+
+### For contributors
+
+- Added full-catalog regression coverage for primary-action foreground contrast
+  across every official theme and all TRAE token namespaces.
+
 ## [0.6.2] - 2026-07-29
 
 ### Fixed

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "twskin",
-  "version": "0.6.2",
+  "version": "0.6.3",
   "description": "An unofficial community theme manager and CLI for TRAE Work on macOS.",
   "type": "module",
   "bin": {

package/runtime/injector.mjs

@@ -16,7 +16,14 @@ import { spawnSync } from "node:child_process";
 import { fileURLToPath } from "node:url";
 
 const ROOT = path.dirname(fileURLToPath(import.meta.url));
-const VERSION = "0.5.10";
+const VERSION = (() => {
+  if (process.env.TWSKIN_RUNTIME_VERSION) return process.env.TWSKIN_RUNTIME_VERSION;
+  try {
+    const manifest = JSON.parse(fs.readFileSync(path.join(ROOT, "manifest.json"), "utf8"));
+    if (typeof manifest.packageVersion === "string" && manifest.packageVersion) return manifest.packageVersion;
+  } catch {}
+  return "development";
+})();
 const DATA_DIR = process.env.TWSKIN_DATA_DIR || path.join(os.homedir(), ".trae-work-skin");
 
 function parseArgs(argv) {

package/runtime/manifest.json

@@ -1,6 +1,6 @@
 {
   "schemaVersion": 1,
-  "packageVersion": "0.6.2",
+  "packageVersion": "0.6.3",
   "themesBundled": false,
   "files": [
     {
@@ -10,8 +10,8 @@
     },
     {
       "path": "injector.mjs",
-      "size": 31309,
-      "sha256": "7560f2353b03dd52a60fc6b7a87825b03e621e651a3f8c780c2ab03f91f88934"
+      "size": 31648,
+      "sha256": "7b0854c2b8b14323df1d5d469188ef3a0e290c7484aefd58bb3b29d19c0c056a"
     },
     {
       "path": "restore.sh",
@@ -20,8 +20,8 @@
     },
     {
       "path": "skin.js",
-      "size": 62024,
-      "sha256": "4cc53fd2534ba09b15ffe8260f3684430c2fd2477cfdb254f4bd5d31a7eb184b"
+      "size": 62070,
+      "sha256": "c2c259652046286048ee0a298ab08210ae3dd8dd226e6410ee888610b41cd96c"
     },
     {
       "path": "start.sh",
@@ -30,8 +30,8 @@
     },
     {
       "path": "styles/base.css",
-      "size": 35586,
-      "sha256": "a8bb84a963b8353372bb226c05b81bcaebe982ff18a45355a241f4d24b47e8ba"
+      "size": 36601,
+      "sha256": "4fb182ba011d330b9ff668d12a25c10eec07ff1c20cb924dbb2598a44a1b8d49"
     },
     {
       "path": "styles/manager.css",
@@ -40,8 +40,8 @@
     },
     {
       "path": "token-map.mjs",
-      "size": 24446,
-      "sha256": "7c79c75e7ba634febc9817c55eef2e314a9e92362b6f190ea903e363a65557df"
+      "size": 24840,
+      "sha256": "11ccf9f72410ac6b936d1fcd58d1087b933cef9697137a6a92a51593dcf6e0cb"
     }
   ]
 }

package/runtime/skin.js

@@ -416,6 +416,7 @@
     setVar("--trae-skin-success", state.success);
     setVar("--trae-skin-input", surface.input);
     setVar("--trae-skin-menu", surface.menu);
+    setVar("--trae-skin-card", surface.card);
     setVar("--trae-skin-card-hover", surface.cardHover);
     setVar("--trae-skin-border-subtle", border.subtle);
     setVar("--trae-skin-border-default", border.default);

package/runtime/styles/base.css

@@ -311,6 +311,23 @@ body.trae-skin-v2 [role="menuitem"][data-state="checked"] {
   background: var(--trae-skin-popover-selected) !important;
 }
 
+/* Templates 的 CSS module 固定用纯白 tab strip；让容器回归透明，
+   仅由搜索框与选中态承担控件层级。只匹配含 tabRow 的栏目导航，
+   避免影响其他同前缀的内部 tab 容器。 */
+body.trae-skin-v2 :is([class^="tabsBar-"], [class*=" tabsBar-"]):has(> :is([class^="tabRow-"], [class*=" tabRow-"])) {
+  background: transparent !important;
+}
+
+/* Automation Run History 的筛选条在宿主中强制占用基础背景，形成一整块
+   不透明色带。条本身应融入页面，仅让可操作的筛选控件使用 input 表面。 */
+body.trae-skin-v2 :is([class^="filterBar-"], [class*=" filterBar-"]):has(> :is([class^="statusSelect-"], [class*=" statusSelect-"])) {
+  background: transparent !important;
+}
+body.trae-skin-v2 :is([class^="filterBar-"], [class*=" filterBar-"]):has(> :is([class^="statusSelect-"], [class*=" statusSelect-"]))
+  :is([role="combobox"], [class^="trigger-"], [class*=" trigger-"]) {
+  background: var(--trae-skin-input) !important;
+}
+
 /* Account card：Trae Work 使用独立 CSS module，不走通用 popover。 */
 body.trae-skin-v2 [class*="account-module__card___"],
 body.trae-skin-v2 [class*="account-module__subMenuInner___"] {

package/runtime/token-map.mjs

@@ -179,6 +179,11 @@
   function buildVarMap(tokens, opts) {
     const r = deriveRoles(tokens, opts);
     const { accent, surface, text, icons, border, state } = r;
+    // TRAE 的原生语义并不对称：`*-onbrand` 配对 `bg-bg-brand`，
+    // 而 Marketplace / Automation / Settings 的主操作使用
+    // `bg-bg-invert` + `*-onaccent`。不能把二者都绑定到 accent，
+    // 否则浅色主题的深色 invert 表面会拿到同色文字。
+    const onInvert = pickOnColor(surface.invert);
     const out = {};
 
     // bg 语义（后缀共享：--bg-bg-* / --vscode-icube--bg-bg-* / --ras-bg-bg-*）
@@ -221,7 +226,8 @@
         case "disabled": return text.disabled;
         case "brand": case "brand-sub": case "brand-design": return accent.base;
         case "brand-hover": case "brand-hover-sub": case "brand-hover-design": return accent.hover;
-        case "onaccent": case "onbrand": return accent.onAccent;
+        case "onaccent": return onInvert;
+        case "onbrand": return accent.onAccent;
         case "preformat-foreground": return text.secondary;
         default: return undefined;
       }
@@ -234,7 +240,8 @@
         case "disabled": return icons.disabled;
         case "brand": case "brand-sub": case "brand-design": return accent.base;
         case "brand-hover": case "brand-hover-sub": case "brand-hover-design": return accent.hover;
-        case "onaccent": case "onbrand": return accent.onAccent;
+        case "onaccent": return onInvert;
+        case "onbrand": return accent.onAccent;
         case "white": return "#ffffff";
         default: return undefined;
       }