@q1travel/design-system 0.19.0 → 0.20.0

package/contracts/design.dark.md

@@ -450,7 +450,7 @@ These components ship in the package. Compose from this list before writing new
 
 **Identity and media.** Avatar, AvatarGroup, Book, Browser, BrowserDots, BrowserControls, BrowserAddress, BrowserTabs, BrowserPlaceholder, Phone, Video, ThemeSwitcher, ProductLockup, Q1travelSymbol.
 
-- ProductLockup combines a product icon, product name, and brand endorsement into one identity mark. The endorsement is smaller and uses secondary text color.
+- ProductLockup combines a product icon, product name, and brand endorsement into one identity mark. The endorsement is smaller and uses secondary text color. Pass only the brand name through `brand`; the component renders "by" itself.
 
 **Text utilities.** Code, CodeInline, CodeTokens, CodeBlock, Snippet, Kbd, MiddleTruncate, TextWithCopyButton.
 

package/contracts/design.md

@@ -450,7 +450,7 @@ These components ship in the package. Compose from this list before writing new
 
 **Identity and media.** Avatar, AvatarGroup, Book, Browser, BrowserDots, BrowserControls, BrowserAddress, BrowserTabs, BrowserPlaceholder, Phone, Video, ThemeSwitcher, ProductLockup, Q1travelSymbol.
 
-- ProductLockup combines a product icon, product name, and brand endorsement into one identity mark. The endorsement is smaller and uses secondary text color.
+- ProductLockup combines a product icon, product name, and brand endorsement into one identity mark. The endorsement is smaller and uses secondary text color. Pass only the brand name through `brand`; the component renders "by" itself.
 
 **Text utilities.** Code, CodeInline, CodeTokens, CodeBlock, Snippet, Kbd, MiddleTruncate, TextWithCopyButton.
 

package/contracts/token-naming.md

@@ -118,6 +118,24 @@ Examples:
 Shipped today for the `.form-control` skin: `--q1-input-bg`, `--q1-input-border`,
 `--q1-input-fg`, `--q1-input-border-focus`, `--q1-input-focus-ring`.
 
+Shipped for `Table` rows, defined in `tokens.css` for both themes:
+
+| Token | Light | Dark | Derivation |
+| --- | --- | --- | --- |
+| `--q1-table-row-bg` | `#ffffff` | `#121212` | `var(--q1-color-bg-canvas)` |
+| `--q1-table-row-bg-hover` | `#f6f6f6` | `#1f1f1f` | `--q1-color-bg-hover` flattened onto the canvas (text-primary at 4% light, 6% dark) |
+| `--q1-table-row-bg-selected` | `#f1efff` | `#1f1e38` | `var(--q1-color-bg-selected)` |
+| `--q1-table-row-bg-selected-hover` | `#edebfa` | `#25243d` | text-primary at half the hover strength (2% light, 3% dark) over the selected surface |
+
+Every value is opaque. Table cells, not rows, carry the background and read it from the row, so a
+sticky column always paints the same color as the rest of its row and never lets scrolled content
+show through; row states swap the value instead of stacking a translucent layer. The half-strength
+selected hover keeps `--q1-color-text-muted` at or above 4.5:1. `check-contrast-contract` recomputes
+each derivation and checks the three text levels against all four values. Unlike the input tokens they
+ship with values, because the pre-mixed colors exist nowhere else; `Table` still reads each one with
+a fallback (`bg-canvas`, `bg-subtle`, `bg-selected`) so a stylesheet without them keeps an opaque
+row. A table on a surface other than the canvas overrides all four on the table or its container.
+
 Every component token MUST declare a fallback to the semantic token it replaces, so a
 consumer that defines none of them sees no change. A component token without a fallback
 turns an opt-in customisation surface into a required one: the first consumer to upgrade

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

@@ -1381,15 +1381,15 @@ export declare type PillProps = {
 
 export declare type PopoverLayout = 'vertical' | 'horizontal';
 
-export declare function ProductLockup({ name, icon, endorsement, size, className, 'aria-label': ariaLabel, ...rest }: ProductLockupProps): JSX.Element;
+export declare function ProductLockup({ name, icon, brand, size, className, 'aria-label': ariaLabel, ...rest }: ProductLockupProps): JSX.Element;
 
 export declare type ProductLockupProps = {
     /** 产品名称，以文字渲染，随主题承色。 */
     name: string;
     /** 产品图标，视为装饰，不参与朗读。默认为品牌符号。 */
     icon?: ReactNode;
-    /** 背书文字。 */
-    endorsement?: string;
+    /** 背书品牌名，渲染为「by {brand}」。 */
+    brand?: string;
     size?: ProductLockupSize;
 } & Omit<HTMLAttributes<HTMLSpanElement>, 'children' | 'role'>;
 

package/dist-pkg/design-system.js

@@ -4664,24 +4664,25 @@ function hi(e) {
 function Bs({
   name: e,
   icon: t,
-  endorsement: r = "by 奇异旅行",
+  brand: r = "奇异旅行",
   size: o = "md",
   className: i,
   "aria-label": s,
   ...a
 }) {
+  const l = `by ${r}`;
   return /* @__PURE__ */ w(
     "span",
     {
       ...a,
       role: "img",
-      "aria-label": s ?? `${e} ${r}`,
+      "aria-label": s ?? `${e} ${l}`,
       className: ie("q1-product-lockup", `q1-product-lockup--${o}`, i ?? ""),
       children: [
         /* @__PURE__ */ n("span", { className: "q1-product-lockup__icon", "aria-hidden": "true", children: t ?? /* @__PURE__ */ n(hi, {}) }),
         /* @__PURE__ */ n("span", { className: "q1-product-lockup__name", children: e }),
         /* @__PURE__ */ n(mi, { orientation: "vertical", className: "q1-product-lockup__divider" }),
-        /* @__PURE__ */ n("span", { className: "q1-product-lockup__endorsement", children: r })
+        /* @__PURE__ */ n("span", { className: "q1-product-lockup__endorsement", children: l })
       ]
     }
   );

package/dist-pkg/style.css

@@ -125,6 +125,15 @@
   --q1-color-bg-overlay: var(--q1-color-background-100);
   --q1-color-bg-hover: color-mix(in srgb, var(--q1-color-text-primary) 4%, transparent);
   --q1-color-bg-selected: var(--q1-color-primary-100);
+  /* 表格行底色：单元格自带不透明底色，行状态只换取值，固定列与普通列同色、永不透出下层。
+ 半透明的 bg-hover 不能直接用于固定列——叠在已有底色的行上会双层加深。以下取值为预混结果：
+ hover = bg-hover（text-primary 4%）叠在 bg-canvas 上；selected = bg-selected（本身不透明）；
+ selected-hover = bg-hover 半强度（2%）叠在 bg-selected 上，整强度会把 text-muted 压到 AA 以下。
+ 推导与对比度由 check-contrast-contract 锁定；改表面色或悬停强度须同步重算。 */
+  --q1-table-row-bg: var(--q1-color-bg-canvas);
+  --q1-table-row-bg-hover: #f6f6f6;
+  --q1-table-row-bg-selected: var(--q1-color-bg-selected);
+  --q1-table-row-bg-selected-hover: #edebfa;
   --q1-color-bg-inverse: var(--q1-color-gray-1000);
   --q1-color-text-on-inverse: var(--q1-color-background-100);
   --q1-color-bg-media: #0a0a0a;
@@ -406,6 +415,9 @@
   --q1-color-bg-overlay: var(--q1-color-gray-300);
   --q1-color-bg-hover: color-mix(in srgb, var(--q1-color-text-primary) 6%, transparent);
   --q1-color-bg-selected: #1f1e38;
+  /* 暗色预混：hover = text-primary 6% 叠在 bg-canvas 上；selected-hover 取半强度 3%。 */
+  --q1-table-row-bg-hover: #1f1f1f;
+  --q1-table-row-bg-selected-hover: #25243d;
   --q1-color-bg-inverse: var(--q1-color-gray-1000);
   --q1-color-text-on-inverse: #0a0a0a;
   --q1-color-bg-media: #0a0a0a;
@@ -1909,6 +1921,21 @@
   font-weight: var(--q1-font-weight-medium);
 }
 
+/* 底色落在单元格上而不是行上：消费方把某列设为 position: sticky 时，它与同行其余单元格读同一个
+ 不透明值，横向滚动不透底，悬停也不会在行底色之上再叠一层。行状态只改 --table-cell-bg。 */
+.table tbody tr {
+  --table-cell-bg: var(--q1-table-row-bg, var(--q1-color-bg-canvas));
+}
+
+.table tbody td,
+.table tbody th {
+  background: var(--table-cell-bg);
+}
+
+.table tbody tr:has(.table__checkbox-control input:checked) {
+  --table-cell-bg: var(--q1-table-row-bg-selected, var(--q1-color-bg-selected));
+}
+
 .table__head--hidden {
   position: absolute;
   width: 1px;
@@ -1942,7 +1969,7 @@
   position: sticky;
   top: 0;
   z-index: 1;
-  background: var(--q1-color-bg-canvas);
+  background: var(--q1-table-row-bg, var(--q1-color-bg-canvas));
 }
 
 .table__sort {
@@ -1994,8 +2021,35 @@
   cursor: not-allowed;
 }
 
+/* 焦点环画在单元格上：单元格自带不透明底色，行上的阴影或 outline 会被单元格底色、
+ 以及消费方的 sticky 列盖住。每格画上下两边，首末格补外侧一边，拼成整行的一圈。 */
 .table tbody tr[tabindex='0']:focus-visible {
   outline: none;
+}
+
+.table tbody tr[tabindex='0']:focus-visible > * {
+  --table-focus-edge: inset 0 2px 0 var(--q1-color-action-primary), inset 0 -2px 0 var(--q1-color-action-primary);
+  box-shadow: var(--table-focus-edge);
+}
+
+.table tbody tr[tabindex='0']:focus-visible > :first-child {
+  box-shadow: var(--table-focus-edge), inset 2px 0 0 var(--q1-color-action-primary);
+}
+
+.table tbody tr[tabindex='0']:focus-visible > :last-child {
+  box-shadow: var(--table-focus-edge), inset -2px 0 0 var(--q1-color-action-primary);
+}
+
+.table tbody tr[tabindex='0']:focus-visible > :first-child:dir(rtl) {
+  box-shadow: var(--table-focus-edge), inset -2px 0 0 var(--q1-color-action-primary);
+}
+
+.table tbody tr[tabindex='0']:focus-visible > :last-child:dir(rtl) {
+  box-shadow: var(--table-focus-edge), inset 2px 0 0 var(--q1-color-action-primary);
+}
+
+/* 整行只有一格（跨列的空态、加载行）时首末是同一格，四边都要画。 */
+.table tbody tr[tabindex='0']:focus-visible > :first-child:last-child {
   box-shadow: inset 0 0 0 2px var(--q1-color-action-primary);
 }
 
@@ -2005,12 +2059,26 @@
   }
 
   .table tbody tr.table__row--interactive:hover {
-    background: var(--q1-color-bg-subtle);
+    --table-cell-bg: var(--q1-table-row-bg-hover, var(--q1-color-bg-subtle));
+  }
+
+  .table tbody tr.table__row--interactive:hover:has(.table__checkbox-control input:checked) {
+    --table-cell-bg: var(--q1-table-row-bg-selected-hover, var(--q1-color-bg-selected));
   }
 }
 
+/* 按压在悬停值上再加深：两个输入都不透明，混出来的仍不透明。选中行另起一支，否则选中规则的
+ 特异度更高，按压没有反馈。 */
 .table tbody tr.table__row--interactive:active {
-  background: color-mix(in srgb, var(--q1-color-bg-subtle), var(--q1-color-text-primary) 8%);
+  --table-cell-bg: color-mix(in srgb, var(--q1-table-row-bg-hover, var(--q1-color-bg-subtle)), var(--q1-color-text-primary) 8%);
+}
+
+.table tbody tr.table__row--interactive:active:has(.table__checkbox-control input:checked) {
+  --table-cell-bg: color-mix(
+    in srgb,
+    var(--q1-table-row-bg-selected-hover, var(--q1-color-bg-selected)),
+    var(--q1-color-text-primary) 8%
+  );
 }
 
 .table th[aria-sort='ascending'] .table__sort,

package/dist-pkg/tokens.css

@@ -121,6 +121,10 @@
   --q1-color-bg-overlay: var(--q1-color-background-100);
   --q1-color-bg-hover: color-mix(in srgb, var(--q1-color-text-primary) 4%, transparent);
   --q1-color-bg-selected: var(--q1-color-primary-100);
+  --q1-table-row-bg: var(--q1-color-bg-canvas);
+  --q1-table-row-bg-hover: #f6f6f6;
+  --q1-table-row-bg-selected: var(--q1-color-bg-selected);
+  --q1-table-row-bg-selected-hover: #edebfa;
   --q1-color-bg-inverse: var(--q1-color-gray-1000);
   --q1-color-text-on-inverse: var(--q1-color-background-100);
   --q1-color-bg-media: #0a0a0a;
@@ -389,6 +393,10 @@
   --q1-color-bg-overlay: var(--q1-color-gray-300);
   --q1-color-bg-hover: color-mix(in srgb, var(--q1-color-text-primary) 6%, transparent);
   --q1-color-bg-selected: #1f1e38;
+  --q1-table-row-bg: var(--q1-color-bg-canvas);
+  --q1-table-row-bg-hover: #1f1f1f;
+  --q1-table-row-bg-selected: var(--q1-color-bg-selected);
+  --q1-table-row-bg-selected-hover: #25243d;
   --q1-color-bg-inverse: var(--q1-color-gray-1000);
   --q1-color-text-on-inverse: #0a0a0a;
   --q1-color-bg-media: #0a0a0a;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@q1travel/design-system",
-  "version": "0.19.0",
+  "version": "0.20.0",
   "description": "React components, design tokens, and interface contracts for q1travel products.",
   "keywords": [
     "react",