@q1travel/design-system 0.18.0 → 0.20.0

package/contracts/design.dark.md

@@ -448,7 +448,9 @@ These components ship in the package. Compose from this list before writing new
 - Tabs switch between peer views of the same subject. They are not a way to shorten a page.
 - ContextSwitcher is the two-level selection model; the consumer owns the state behind it.
 
-**Identity and media.** Avatar, AvatarGroup, Book, Browser, BrowserDots, BrowserControls, BrowserAddress, BrowserTabs, BrowserPlaceholder, Phone, Video, ThemeSwitcher.
+**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. 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

@@ -448,7 +448,9 @@ These components ship in the package. Compose from this list before writing new
 - Tabs switch between peer views of the same subject. They are not a way to shorten a page.
 - ContextSwitcher is the two-level selection model; the consumer owns the state behind it.
 
-**Identity and media.** Avatar, AvatarGroup, Book, Browser, BrowserDots, BrowserControls, BrowserAddress, BrowserTabs, BrowserPlaceholder, Phone, Video, ThemeSwitcher.
+**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. 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

@@ -16,6 +16,7 @@ import { Ref } from 'react';
 import { RefAttributes } from 'react';
 import { RefObject } from 'react';
 import { SelectHTMLAttributes } from 'react';
+import { SVGProps } from 'react';
 import { TableHTMLAttributes } from 'react';
 import { TextareaHTMLAttributes } from 'react';
 
@@ -1380,6 +1381,20 @@ export declare type PillProps = {
 
 export declare type PopoverLayout = 'vertical' | 'horizontal';
 
+export declare function ProductLockup({ name, icon, brand, size, className, 'aria-label': ariaLabel, ...rest }: ProductLockupProps): JSX.Element;
+
+export declare type ProductLockupProps = {
+    /** 产品名称，以文字渲染，随主题承色。 */
+    name: string;
+    /** 产品图标，视为装饰，不参与朗读。默认为品牌符号。 */
+    icon?: ReactNode;
+    /** 背书品牌名，渲染为「by {brand}」。 */
+    brand?: string;
+    size?: ProductLockupSize;
+} & Omit<HTMLAttributes<HTMLSpanElement>, 'children' | 'role'>;
+
+export declare type ProductLockupSize = 'sm' | 'md';
+
 export declare function Progress({ value, max, tone, slim, stops, label, }: {
     value: number;
     max?: number;
@@ -1414,6 +1429,8 @@ export declare type ProjectBannerProps = {
     action: ProjectBannerAction;
 };
 
+export declare function Q1travelSymbol(props: SVGProps<SVGSVGElement>): JSX.Element;
+
 export declare function Radio({ ...props }: RadioProps): JSX.Element;
 
 /** Radio 的完整 props。 */