@q1travel/design-system 0.17.0 → 0.17.2

package/README.md

@@ -1,20 +1,93 @@
 # q1travel Design System
 
-q1travel 产品家族的设计权威上游仓，三件事集于一处：`@q1travel/design-system` npm 包、设计契约（`contracts/`）与公开文档站。下游各仓只读消费已发布的包，并用包内 `q1-design` CLI 同步、校验契约缓存。推荐公开域名：`design.q1lx.com`。
+[![npm version](https://img.shields.io/npm/v/@q1travel/design-system.svg)](https://www.npmjs.com/package/@q1travel/design-system)
 
-**技术栈**：React 19（peerDependency）· TypeScript · Vite 7（文档站 / 库双构建管线）· lucide-react · npm
+`@q1travel/design-system` 提供一套 React 组件、设计 token 与设计契约，用于构建一致、可访问、支持明暗主题的产品界面。
 
-文档站以公开产品标准的口径撰写，信息架构为 `基础`、`品牌`、`组件` 三组。
+## 文档
 
-## Sources
+完整的组件指南、设计基础与使用示例见 [design.q1lx.com](https://design.q1lx.com)。
 
-- Source contracts（设计契约源，canonical）：`contracts/design.md`、`contracts/design.dark.md`、`contracts/token-naming.md`、`contracts/icon-system.md`、`contracts/button-api-compatibility.md`、`contracts/interface-guidelines.md`、`contracts/design-engineering-principles.md`、`contracts/implementation-map.md`、`contracts/overlay-foundation.md`，以及迁移契约 `contracts/context-contrast-migration.md`、`contracts/status-chip-badge-migration.md`、`contracts/pagination-migration.md`、`contracts/table-migration.md`、`contracts/overlay-shadow-migration.md`。独立 HTML 文档的有界 class 词汇表源为 `contracts/design.css`。
-- Generated mirrors（生成镜像，勿手改）：`public/design.md`、`public/design.dark.md` 由 `scripts/sync-design-contracts.mjs` 从契约源逐字节复制；`public/design.css` 由 `scripts/build-design-css.mjs` 把两份契约 frontmatter 的取值注入 `contracts/design.css` 的类词汇后生成，因而自足、可被独立 HTML 页面直接加载。
-- Runtime tokens：`src/styles/tokens.css`（canonical `--q1-*`，仅 `:root` 与 `:root[data-theme='dark']` 两个扁平 selector）。
-- 发布台账：`contracts/releases/`（仅存于仓库，不进 npm 包）。
-- npm 发布与下游自动更新：版本 tag 触发 GitHub Actions OIDC 免令牌发布，详见[发布操作说明](docs/npm-release.md)。
+## 环境要求
+
+- React 19 与 React DOM 19（peerDependency）
+- 支持 ES Module 的构建工具（如 Vite）
+- 使用 `q1-design` CLI 需要 Node.js 22+
+
+## 安装
+
+```bash
+npm install @q1travel/design-system
+```
+
+## 使用
+
+在应用入口引入样式表，然后按需导入组件：
+
+```tsx
+import '@q1travel/design-system/style.css';
+import { Button } from '@q1travel/design-system';
+
+export function SaveAction() {
+  return <Button variant="primary">保存</Button>;
+}
+```
+
+`style.css` 已包含全部设计 token 与组件样式。如果只需要设计 token（例如为自有组件取色、取间距），可以单独引入：
+
+```ts
+import '@q1travel/design-system/tokens.css';
+```
+
+所有 token 以 `--q1-*` 命名，例如 `var(--q1-color-gray-1000)`。
+
+### 主题
+
+组件默认使用浅色主题。在根元素上设置 `data-theme="dark"` 即可切换为深色主题：
+
+```html
+<html data-theme="dark">
+```
 
-## Getting Started
+### 反馈提示
+
+使用 `useToast` 前，需要在应用根部包裹 `ToastProvider`：
+
+```tsx
+import { ToastProvider } from '@q1travel/design-system';
+
+root.render(
+  <ToastProvider>
+    <App />
+  </ToastProvider>,
+);
+```
+
+## CLI
+
+包内附带 `q1-design` 命令行工具，用于查询组件 API 并检查样式用法：
+
+| 命令 | 说明 |
+| --- | --- |
+| `npx q1-design ls` | 列出包内提供的组件与 hook |
+| `npx q1-design doc <组件名>` | 打印组件的公共 API |
+| `npx q1-design lint [路径...]` | 按 `Q1-DS-*` 规则检查样式用法，默认扫描 `src` |
+| `npx q1-design lint --diff <base-ref>` | 只检查相对 `base-ref` 有改动的文件 |
+| `npx q1-design overrides [路径...]` | 统计对组件外观的 `className` 覆写 |
+| `npx q1-design sync` | 将设计契约与 AI 编码指南同步为项目内的只读缓存 |
+| `npx q1-design verify` | 校验缓存未被修改且与已安装版本一致 |
+
+## 设计契约与 AI 编码指南
+
+包内随附设计契约（`contracts/*.md`）与 product-design 编码指南（`.agents/`），可供 AI 编码助手读取，使生成的界面遵循同一套 token 与组件规范。契约文件通过 `@q1travel/design-system/contracts/*` 路径导出，也可以用 `npx q1-design sync` 同步到项目中。
+
+## 版本
+
+历史版本见 npm 的 [Versions](https://www.npmjs.com/package/@q1travel/design-system?activeTab=versions) 页。
+
+## 参与开发
+
+以下内容面向本仓库的贡献者。
 
 前置要求：Node.js 22+（CI 基线 22）与 npm（依赖锁定在 `package-lock.json`）；运行 `check:browser` 需要本机 Chrome（可用 `CHROME_PATH` 指定）。`check:browser` 在本地与 CI 都默认使用 `--headless=new`，不探测 TTY 或 `DISPLAY`；只有显式设置 `Q1_DESIGN_BROWSER_HEADLESS=false` 才切换到 headed 模式。
 
@@ -23,7 +96,17 @@ npm install
 npm run dev
 ```
 
-## Available Scripts
+**技术栈**：React 19 · TypeScript · Vite 7（文档站 / 库双构建管线）· lucide-react · npm
+
+### Sources
+
+- Source contracts（设计契约源，canonical）：`contracts/design.md`、`contracts/design.dark.md`、`contracts/token-naming.md`、`contracts/icon-system.md`、`contracts/button-api-compatibility.md`、`contracts/interface-guidelines.md`、`contracts/design-engineering-principles.md`、`contracts/implementation-map.md`、`contracts/overlay-foundation.md`，以及迁移契约 `contracts/context-contrast-migration.md`、`contracts/status-chip-badge-migration.md`、`contracts/pagination-migration.md`、`contracts/table-migration.md`、`contracts/overlay-shadow-migration.md`。独立 HTML 文档的有界 class 词汇表源为 `contracts/design.css`。
+- Generated mirrors（生成镜像，勿手改）：`public/design.md`、`public/design.dark.md` 由 `scripts/sync-design-contracts.mjs` 从契约源逐字节复制；`public/design.css` 由 `scripts/build-design-css.mjs` 把两份契约 frontmatter 的取值注入 `contracts/design.css` 的类词汇后生成，因而自足、可被独立 HTML 页面直接加载。
+- Runtime tokens：`src/styles/tokens.css`（canonical `--q1-*`，仅 `:root` 与 `:root[data-theme='dark']` 两个扁平 selector）。
+- 发布记录：`contracts/releases/`（仅存于仓库，不进 npm 包）。
+- npm 发布：版本 tag 触发 GitHub Actions OIDC 免令牌发布，详见 `docs/npm-release.md`。
+
+### Available Scripts
 
 | 命令 | 用途 |
 | --- | --- |
@@ -34,15 +117,15 @@ npm run dev
 | `npm run check:shell` | 结构与源码契约断言 + token 包检查 + 发布溯源检查 |
 | `npm run check:browser` | 基于 CDP 的浏览器行为契约（含 StrictMode 前置轮） |
 | `npm run check:package-api` | 已构建包的声明与运行时 API + 组件契约 `node --test` 套件 |
-| `npm run check:release-provenance` | 发布台账 vs `CHANGELOG.md`、origin tag 与 npm registry |
-| `npm run check:release-sync` | 发布后 registry 完整性与四仓 Renovate 通知脚本测试 |
+| `npm run check:release-provenance` | 发布记录 vs `CHANGELOG.md`、origin tag 与 npm registry |
+| `npm run check:release-sync` | 发布后 registry 完整性校验与依赖更新通知脚本测试 |
 | `npm run release:verify -- <tarball>` | 只校验 workflow tarball 与 npm registry 完整性 |
-| `npm run release:sync -- <tarball>` | 校验 registry 后通知四仓 Renovate；不具备发布能力 |
+| `npm run release:sync -- <tarball>` | 校验 registry 后发送依赖更新通知；不具备发布能力 |
 | `npm run build:pkg` | 库构建（产物 `dist-pkg/`）+ CSS 拼装 + 包 API 检查（`prepack` 同款） |
 
 本仓没有独立的 test / lint script——规范由 `scripts/` 下的契约门禁脚本守护。
 
-## Project Structure
+### Project Structure
 
 ```
 src/components/ui/     npm 包组件源（入口 index.ts，统一公共导出面）
@@ -50,20 +133,19 @@ src/components/        docs/、layout/、brand/ 文档站结构组件
 src/pages/             文档站页面（组件示例编排）
 src/styles/            tokens.css、foundations.css、components.css 等分桶样式
 src/browser-fixtures/  check:browser 的行为契约 fixture
-contracts/             设计契约源 + releases/ 发布台账
+contracts/             设计契约源 + releases/ 发布记录
 public/                契约镜像与品牌/字体/图标静态资产
 scripts/               契约门禁与构建脚本（check-shell / check-browser / …）
-bin/                   q1-design CLI（消费仓 ls / doc / sync / verify / lint / eval）
+bin/                   q1-design CLI（ls / doc / sync / verify / lint / eval / overrides）
 tooling/               规则清单（Q1-DS-*）与 eval fixture
 .agents/               随包分发的 product-design skill
-docs/  review/         架构骨架、agent 规范、历史决策记录
+docs/  review/         架构说明、agent 规范、历史决策记录
 ```
 
-## Documentation & AI Guidelines
+### Documentation & AI Guidelines
 
-- **AI Agent 必须遵循根目录 `AGENTS.md`**（Claude Code 与 Codex 共用的 canonical 入口：命令速查、红线约束、工作闭环与知识索引）；`CLAUDE.md` 仅为其薄包装。
-- `docs/architecture.md` — 双构建管线、契约生成与下游消费模型、文档站托管与公开契约的缓存策略（含 Cloudflare Cache Rule 与 Purge 运维备忘）、发布溯源链路。
+- AI 编码助手遵循根目录 `AGENTS.md`（命令速查、约束、工作闭环与知识索引）；`CLAUDE.md` 仅为其薄包装。
+- `docs/architecture.md` — 双构建管线、契约生成与消费模型、文档站托管与缓存策略、发布溯源链路。
 - `docs/adr/template.md` — 新 ADR 从此模板开始；早期已接受决策存于 `review/decision-log/`。
-- `docs/token-coverage-gaps.md` — 下游有真实消费需求但本仓未导出的 `--q1-*` 能力缺口登记（待决清单，非契约）。
+- `docs/token-coverage-gaps.md` — 尚未导出的 `--q1-*` 能力缺口登记（待决清单，非契约）。
 - `docs/research/design-md-eval/` — design.md 有/无 对照评测：固定场景、确定性检查、修正队列（研究记录，非契约）。
-- 下游消费方式：安装 `@q1travel/design-system` 后 import 组件与 `style.css` / `tokens.css`；`npx q1-design sync` 把包内 skill 与契约物化为只读缓存，`q1-design verify` 校验缓存未被改动，`q1-design lint` 执行 `Q1-DS-*` 机械规则；`q1-design ls` 列出随包组件，`q1-design doc <组件名>` 打印其公共 API（两者现推自随包的 `.d.ts`，不另存清单）；`q1-design overrides` 统计并分类消费方对组件外观的覆写。

package/contracts/design.dark.md

@@ -128,15 +128,22 @@ semantic-colors:
   text-on-media: "#ffffff"
   border: "{colors.gray-200}"
   border-strong: "{colors.gray-400}"
+  border-subtle: "#1f1f1f"
   text-primary: "{colors.text-primary}"
   text-secondary: "{colors.text-secondary}"
   text-muted: "{colors.text-muted}"
+  text-soft: "#9a9a9c"
+  overlay-scrim: "rgba(2, 6, 23, 0.44)"
   selection-background: "{colors.text-primary}"
   selection-foreground: "{colors.background-100}"
   focus-ring: "{colors.primary}"
+  focus: "{colors.primary-700}"
   status-success: "{colors.green-900}"
   status-warning: "{colors.amber-700}"
   status-danger: "{colors.red-900}"
+  status-danger-text: "#ef5350"
+  status-danger-surface: "{colors.red-100}"
+  status-danger-border: "#ef5350"
 typography:
   heading-72:
     fontFamily: Noto Sans SC

package/contracts/design.md

@@ -128,15 +128,22 @@ semantic-colors:
   text-on-media: "#ffffff"
   border: "{colors.gray-400}"
   border-strong: "{colors.gray-500}"
+  border-subtle: "rgba(203, 213, 225, 0.82)"
   text-primary: "{colors.text-primary}"
   text-secondary: "{colors.text-secondary}"
   text-muted: "{colors.text-muted}"
+  text-soft: "#6e6e73"
+  overlay-scrim: "rgba(2, 6, 23, 0.44)"
   selection-background: "{colors.text-primary}"
   selection-foreground: "{colors.background-100}"
   focus-ring: "{colors.primary}"
+  focus: "{colors.primary-700}"
   status-success: "{colors.green-700}"
   status-warning: "{colors.amber-900}"
   status-danger: "{colors.red-700}"
+  status-danger-text: "#d32f2f"
+  status-danger-surface: "{colors.red-100}"
+  status-danger-border: "#d32f2f"
 typography:
   heading-72:
     fontFamily: Noto Sans SC

package/contracts/overlay-shadow-migration.md

@@ -27,7 +27,7 @@ Decision date: 2026-08-26
 
 **为什么环境层要降不透明度**：新增的接触层已经补上了元件根部的密度。若环境层沿用原不透明度，两层叠加后整体偏重，浮层看起来像是"脏"了而不是"浮起来"。popover 16%→14%、modal 32%→28% 是为抵消这部分叠加。
 
-`--q1-shadow-focus` 不在本次范围内：焦点环是独立语义，不参与光照模型，保持单层。
+`--q1-shadow-focus` 不在本次浮层阴影迁移范围内：焦点环是独立语义，不参与光照模型。其后续双层对比环见 `contracts/token-naming.md`。
 
 方向性面板（Drawer / Sheet）的阴影在组件内自持，不消费这两个 token，因此不受影响。
 
@@ -78,5 +78,5 @@ q1travel-web 当前停留在 0.7.3，与本仓 0.9.0 之间还隔着其他变更
 
 - 不修改 q1travel-web，不代下游提交。
 - 不新增第三档阴影，不为 Drawer / Sheet 引入共享阴影 token。
-- 不改动 `--q1-shadow-focus`。
+- 本次浮层阴影迁移不改动 `--q1-shadow-focus`；后续焦点环调整独立进行。
 - 不在本合同内处理 `contracts/interface-guidelines.md` Design 章节的其余条款（嵌套圆角见 #141，色相一致见 #142）。

package/contracts/table-migration.md

@@ -95,7 +95,11 @@ requires each capability.
   receives the sort-change event, and owns data ordering or server requests.
 - A sortable heading is a native button inside the heading cell. The heading
   exposes `aria-sort` with the applicable `none`, `ascending`, or `descending`
-  value. The sort icon is decorative and is not the only state cue.
+  value for the current state. Its button name describes the direction after
+  activation. A column may provide `nextSortDirection` when the consumer's
+  sorting policy differs from the default ascending-first toggle; that same
+  direction is sent to `onSortChange`. The sort icon is decorative and is not
+  the only state cue.
 - Table does not silently sort data, fetch a new page, mutate URL/query state,
   or fabricate a total while sorting.
 

package/contracts/token-naming.md

@@ -94,7 +94,9 @@ Examples:
 - `--q1-shadow-focus`
 - `--q1-shadow-focus-danger`
 
-`--q1-shadow-focus-danger` is the ring the field family already draws on an invalid control, now named: one step wider and one step lighter than `--q1-shadow-focus`, because red at the same opacity swallows the 1px red border it sits on. Both rings resolve their color through a semantic token, so light and dark need no separate declaration.
+`--q1-color-status-danger` is the bright red for fills and strokes only; use `--q1-color-status-danger-text` for text and weak notices without an underline. `--q1-color-status-danger-surface` and `--q1-color-status-danger-border` keep the background and stroke roles separate. `--q1-color-text-soft`, `--q1-color-border-subtle`, and `--q1-color-overlay-scrim` cover tertiary text, quiet separators, and overlay scrims.
+
+`--q1-color-focus` resolves to `--q1-color-primary-700`. `--q1-shadow-focus` draws a 1px canvas contrast ring and a 3px focus color ring, keeping keyboard focus visible against a purple control or dark surface. `--q1-shadow-focus-danger` remains the field family's invalid-control ring and does not change with this focus-ring migration.
 
 ### Component Tokens
 

package/dist-pkg/design-system.d.ts

@@ -1781,6 +1781,8 @@ export declare type TableColumn<T> = {
     render: (row: T, rowIndex: number) => ReactNode;
     sortable?: boolean;
     sortLabel?: string;
+    /** 下次点击此列时的排序方向；未提供时沿用默认的升序优先切换。 */
+    nextSortDirection?: TableSortDirection;
     /**
      * 横向对齐，默认 `start`。数值列用 `end`——个位对齐个位，一眼可比大小与位数；
      * 左对齐的数字列要逐行数位数才知道谁大。表头随单元格一起对齐，否则列会读成两栏。

package/dist-pkg/design-system.js

@@ -3447,8 +3447,11 @@ function Is({
   }, []);
   Z(() => {
     const R = D.current !== r;
-    D.current = r, k((j) => R ? r.trim() ? x[0]?.key : void 0 : x.some((G) => G.key === j) ? j : r.trim() ? x[0]?.key : void 0);
-  }, [x, r]), Z(() => {
+    D.current = r, k((j) => {
+      if (e)
+        return R ? r.trim() ? x[0]?.key : void 0 : x.some((G) => G.key === j) ? j : r.trim() ? x[0]?.key : void 0;
+    });
+  }, [x, e, r]), Z(() => {
     if (!e || !I) return;
     p.current?.querySelector('[data-search-dialog-active="true"]')?.scrollIntoView({ block: "nearest" });
   }, [e, I]), Z(() => {
@@ -8106,10 +8109,10 @@ function bc({
     !E || Wn(A.target, A.currentTarget) || A.key !== "Enter" && A.key !== " " || (A.preventDefault(), E.onActivate(T.row, T.rowIndex));
   }
   function j(T) {
-    return f === T && _ === "asc" ? "desc" : "asc";
+    return T.nextSortDirection ?? (f === T.key && _ === "asc" ? "desc" : "asc");
   }
   function G(T) {
-    N && N(T, j(T));
+    N && N(T.key, j(T));
   }
   function ee(T) {
     if (T.sortable)
@@ -8134,14 +8137,14 @@ function bc({
         }
       ) }) }) : null,
       t.map((T) => {
-        const A = ee(T), Y = T.sortable && f === T.key && _ ? _ === "asc" ? "升序" : "降序" : null, J = j(T.key) === "asc" ? "升序" : "降序", te = Y ? /* @__PURE__ */ n("span", { className: "table__sort-state", children: Y }) : null, B = T.sortLabel ?? (typeof T.header == "string" ? T.header : T.key), H = T.sortable ? /* @__PURE__ */ w(
+        const A = ee(T), Y = T.sortable && f === T.key && _ ? _ === "asc" ? "升序" : "降序" : null, J = j(T) === "asc" ? "升序" : "降序", te = Y ? /* @__PURE__ */ n("span", { className: "table__sort-state", children: Y }) : null, B = T.sortLabel ?? (typeof T.header == "string" ? T.header : T.key), H = T.sortable ? /* @__PURE__ */ w(
           "button",
           {
             type: "button",
             className: "table__sort",
-            "aria-label": `按${B}${J}排序`,
+            "aria-label": `点击后将按${B}${J}排序`,
             disabled: !N,
-            onClick: N ? () => G(T.key) : void 0,
+            onClick: N ? () => G(T) : void 0,
             children: [
               T.header,
               te

package/dist-pkg/style.css

@@ -122,15 +122,23 @@
   --q1-color-bg-media: #0a0a0a;
   --q1-color-text-on-media: #ffffff;
   --q1-color-border: var(--q1-color-gray-400);
+  --q1-color-border-subtle: rgba(203, 213, 225, 0.82);
   --q1-color-border-strong: var(--q1-color-gray-500);
   --q1-color-text-primary: var(--q1-color-gray-1000);
   --q1-color-text-secondary: var(--q1-color-gray-900);
   --q1-color-text-muted: #6b6b6b;
+  --q1-color-text-soft: #6e6e73;
+  --q1-color-overlay-scrim: rgba(2, 6, 23, 0.44);
+  --q1-color-focus: var(--q1-color-primary-700);
   --q1-color-selection-bg: var(--q1-color-text-primary);
   --q1-color-selection-fg: var(--q1-color-bg-canvas);
   --q1-color-status-success: var(--q1-color-green-700);
   --q1-color-status-warning: var(--q1-color-amber-900);
   --q1-color-status-danger: var(--q1-color-red-700);
+  /* status-danger 是亮红，只用于填充和描边；文字或无下划线弱提示使用 danger-text。 */
+  --q1-color-status-danger-text: #d32f2f;
+  --q1-color-status-danger-surface: var(--q1-color-red-100);
+  --q1-color-status-danger-border: #d32f2f;
   --q1-color-status-info: var(--q1-color-blue-700);
   --q1-font-sans: "Noto Sans SC", "PingFang SC", "Microsoft YaHei UI", sans-serif;
   --q1-font-mono: "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
@@ -232,7 +240,7 @@
   --q1-radius-5: 16px;
   /* 胶囊：半径大于任何可能的半高即可，具体数值不参与计算。 */
   --q1-radius-full: 9999px;
-  --q1-shadow-focus: 0 0 0 3px color-mix(in srgb, var(--q1-color-primary-700) 22%, transparent);
+  --q1-shadow-focus: 0 0 0 1px var(--q1-color-bg-canvas), 0 0 0 3px var(--q1-color-focus);
   /* 危险态环：字段家族错误态与危险动作共用。比默认焦点环宽一档、淡一档——红色本身已经足够响，
  同样浓度会盖过 1px 红描边。取值沿用字段错误态的既有标定，status-danger 明暗各有取值。 */
   --q1-shadow-focus-danger: 0 0 0 4px color-mix(in srgb, var(--q1-color-status-danger) 16%, transparent);
@@ -374,15 +382,22 @@
   --q1-color-bg-media: #0a0a0a;
   --q1-color-text-on-media: #ffffff;
   --q1-color-border: var(--q1-color-gray-200);
+  --q1-color-border-subtle: #1f1f1f;
   /* 降档：控件描边不再泛白。 */
   --q1-color-border-strong: var(--q1-color-gray-400);
   --q1-color-border-overlay: color-mix(in srgb, #ffffff 14%, transparent);
   --q1-color-text-primary: var(--q1-color-gray-1000);
   --q1-color-text-secondary: var(--q1-color-gray-900);
   --q1-color-text-muted: var(--q1-color-gray-700);
+  --q1-color-text-soft: #9a9a9c;
+  --q1-color-overlay-scrim: rgba(2, 6, 23, 0.44);
+  --q1-color-focus: var(--q1-color-primary-700);
   --q1-color-status-success: var(--q1-color-green-900);
   --q1-color-status-warning: var(--q1-color-amber-700);
   --q1-color-status-danger: var(--q1-color-red-900);
+  --q1-color-status-danger-text: #ef5350;
+  --q1-color-status-danger-surface: var(--q1-color-red-100);
+  --q1-color-status-danger-border: #ef5350;
   --q1-color-status-info: var(--q1-color-blue-900);
   /* Override only the press state: the dark Primary ramp runs left-dark to
  right-light, so Primary-900 is a light tint. Point action-press at a darker
@@ -6399,7 +6414,7 @@ a.q1-card:focus-visible {
 }
 .collapse__trigger:focus-visible {
   outline: none;
-  box-shadow: inset var(--q1-shadow-focus);
+  box-shadow: inset 0 0 0 1px var(--q1-color-bg-canvas), inset 0 0 0 3px var(--q1-color-focus);
 }
 .collapse__title {
   font-size: 14px;

package/dist-pkg/tokens.css

@@ -118,15 +118,22 @@
   --q1-color-bg-media: #0a0a0a;
   --q1-color-text-on-media: #ffffff;
   --q1-color-border: var(--q1-color-gray-400);
+  --q1-color-border-subtle: rgba(203, 213, 225, 0.82);
   --q1-color-border-strong: var(--q1-color-gray-500);
   --q1-color-text-primary: var(--q1-color-gray-1000);
   --q1-color-text-secondary: var(--q1-color-gray-900);
   --q1-color-text-muted: #6b6b6b;
+  --q1-color-text-soft: #6e6e73;
+  --q1-color-overlay-scrim: rgba(2, 6, 23, 0.44);
+  --q1-color-focus: var(--q1-color-primary-700);
   --q1-color-selection-bg: var(--q1-color-text-primary);
   --q1-color-selection-fg: var(--q1-color-bg-canvas);
   --q1-color-status-success: var(--q1-color-green-700);
   --q1-color-status-warning: var(--q1-color-amber-900);
   --q1-color-status-danger: var(--q1-color-red-700);
+  --q1-color-status-danger-text: #d32f2f;
+  --q1-color-status-danger-surface: var(--q1-color-red-100);
+  --q1-color-status-danger-border: #d32f2f;
   --q1-color-status-info: var(--q1-color-blue-700);
   --q1-font-sans: "Noto Sans SC", "PingFang SC", "Microsoft YaHei UI", sans-serif;
   --q1-font-mono: "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
@@ -220,7 +227,7 @@
   --q1-radius-4: 12px;
   --q1-radius-5: 16px;
   --q1-radius-full: 9999px;
-  --q1-shadow-focus: 0 0 0 3px color-mix(in srgb, var(--q1-color-primary-700) 22%, transparent);
+  --q1-shadow-focus: 0 0 0 1px var(--q1-color-bg-canvas), 0 0 0 3px var(--q1-color-focus);
   --q1-shadow-focus-danger: 0 0 0 4px color-mix(in srgb, var(--q1-color-status-danger) 16%, transparent);
   --q1-shadow-popover: 0 1px 3px color-mix(in srgb, var(--q1-color-shadow) 10%, transparent),
     0 8px 28px color-mix(in srgb, var(--q1-color-shadow) 14%, transparent);
@@ -358,15 +365,22 @@
   --q1-color-bg-media: #0a0a0a;
   --q1-color-text-on-media: #ffffff;
   --q1-color-border: var(--q1-color-gray-200);
+  --q1-color-border-subtle: #1f1f1f;
   --q1-color-border-strong: var(--q1-color-gray-400);
   --q1-color-text-primary: var(--q1-color-gray-1000);
   --q1-color-text-secondary: var(--q1-color-gray-900);
   --q1-color-text-muted: var(--q1-color-gray-700);
+  --q1-color-text-soft: #9a9a9c;
+  --q1-color-overlay-scrim: rgba(2, 6, 23, 0.44);
+  --q1-color-focus: var(--q1-color-primary-700);
   --q1-color-selection-bg: var(--q1-color-text-primary);
   --q1-color-selection-fg: var(--q1-color-bg-canvas);
   --q1-color-status-success: var(--q1-color-green-900);
   --q1-color-status-warning: var(--q1-color-amber-700);
   --q1-color-status-danger: var(--q1-color-red-900);
+  --q1-color-status-danger-text: #ef5350;
+  --q1-color-status-danger-surface: var(--q1-color-red-100);
+  --q1-color-status-danger-border: #ef5350;
   --q1-color-status-info: var(--q1-color-blue-900);
   --q1-font-sans: "Noto Sans SC", "PingFang SC", "Microsoft YaHei UI", sans-serif;
   --q1-font-mono: "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
@@ -460,7 +474,7 @@
   --q1-radius-4: 12px;
   --q1-radius-5: 16px;
   --q1-radius-full: 9999px;
-  --q1-shadow-focus: 0 0 0 3px color-mix(in srgb, var(--q1-color-primary-700) 22%, transparent);
+  --q1-shadow-focus: 0 0 0 1px var(--q1-color-bg-canvas), 0 0 0 3px var(--q1-color-focus);
   --q1-shadow-focus-danger: 0 0 0 4px color-mix(in srgb, var(--q1-color-status-danger) 16%, transparent);
   --q1-shadow-popover: 0 1px 3px color-mix(in srgb, var(--q1-color-shadow) 10%, transparent),
     0 8px 28px color-mix(in srgb, var(--q1-color-shadow) 14%, transparent);

package/package.json

@@ -1,6 +1,16 @@
 {
   "name": "@q1travel/design-system",
-  "version": "0.17.0",
+  "version": "0.17.2",
+  "description": "React components, design tokens, and interface contracts for q1travel products.",
+  "keywords": [
+    "react",
+    "design-system",
+    "components",
+    "design-tokens",
+    "theme"
+  ],
+  "homepage": "https://design.q1lx.com",
+  "license": "UNLICENSED",
   "private": false,
   "type": "module",
   "repository": {