@q1travel/design-system 0.17.3 → 0.19.0

package/contracts/design.dark.md

@@ -14,10 +14,10 @@ colors:
   secondary: "#a0a0a0"
   tertiary: "#006efe"
   neutral: "#1a1a1a"
-  background-100: "#0a0a0a"
+  background-100: "#121212"
   background-200: "#000000"
   text-primary: "#ededed"
-  text-secondary: "#a0a0a0"
+  text-secondary: "#b4b4b4"
   text-muted: "#8f8f8f"
   brand-preview-light-bg: "#ffffff"
   brand-preview-light-fg: "#171717"
@@ -25,15 +25,16 @@ colors:
   brand-preview-dark-fg: "#ededed"
   mask-visible: "#ffffff"
   mask-opaque: "#000000"
+  gray-50: "#161616"
   gray-100: "#1a1a1a"
-  gray-200: "#1f1f1f"
-  gray-300: "#292929"
-  gray-400: "#2e2e2e"
-  gray-500: "#454545"
-  gray-600: "#878787"
-  gray-700: "#8f8f8f"
-  gray-800: "#7d7d7d"
-  gray-900: "#a0a0a0"
+  gray-200: "#222222"
+  gray-300: "#2b2b2b"
+  gray-400: "#333333"
+  gray-500: "#585858"
+  gray-600: "#7d7d7d"
+  gray-700: "#878787"
+  gray-800: "#8f8f8f"
+  gray-900: "#b4b4b4"
   gray-1000: "#ededed"
   primary-100: "#15103a"
   primary-200: "#1a1547"
@@ -122,28 +123,47 @@ semantic-colors:
   action-on-primary: "#ffffff"
   action-text: "{colors.primary-900}"
   surface-canvas: "{colors.background-100}"
-  surface-subtle: "{colors.gray-100}"
-  surface-panel: "{colors.background-100}"
+  surface-subtle: "{colors.gray-50}"
+  surface-panel: "{colors.gray-100}"
+  surface-sunken: "{colors.gray-50}"
+  surface-raised: "{colors.gray-200}"
+  surface-overlay: "{colors.gray-300}"
+  surface-hover: "color-mix(in srgb, var(--q1-color-text-primary) 6%, transparent)"
+  surface-selected: "#1f1e38"
+  surface-inverse: "{colors.gray-1000}"
+  text-on-inverse: "#0a0a0a"
   surface-media: "#0a0a0a"
   text-on-media: "#ffffff"
-  border: "{colors.gray-200}"
+  border: "{colors.gray-400}"
   border-strong: "{colors.gray-400}"
-  border-subtle: "#1f1f1f"
+  border-active: "{colors.primary-900}"
+  border-subtle: "#2a2a2a"
   text-primary: "{colors.text-primary}"
   text-secondary: "{colors.text-secondary}"
   text-muted: "{colors.text-muted}"
   text-soft: "#9a9a9c"
+  text-disabled: "{colors.gray-500}"
   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}"
+  focus-ring: "{colors.primary-900}"
+  focus: "{colors.primary-900}"
   status-success: "{colors.green-900}"
+  status-success-text: "{colors.green-900}"
+  status-success-surface: "{colors.green-100}"
+  status-success-border: "#255a2f"
   status-warning: "{colors.amber-700}"
+  status-warning-text: "#fac053"
+  status-warning-surface: "{colors.amber-100}"
+  status-warning-border: "#754b10"
   status-danger: "{colors.red-900}"
-  status-danger-text: "#ef5350"
+  status-danger-text: "#f97770"
   status-danger-surface: "{colors.red-100}"
-  status-danger-border: "#ef5350"
+  status-danger-border: "#7e2f31"
+  status-info: "{colors.blue-900}"
+  status-info-text: "{colors.blue-900}"
+  status-info-surface: "{colors.blue-100}"
+  status-info-border: "#194f81"
 typography:
   heading-72:
     fontFamily: Noto Sans SC
@@ -428,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.
 
 **Text utilities.** Code, CodeInline, CodeTokens, CodeBlock, Snippet, Kbd, MiddleTruncate, TextWithCopyButton.
 

package/contracts/design.md

@@ -25,9 +25,10 @@ colors:
   brand-preview-dark-fg: "#ededed"
   mask-visible: "#ffffff"
   mask-opaque: "#000000"
+  gray-50: "#fafafa"
   gray-100: "#f2f2f2"
-  gray-200: "#ebebeb"
-  gray-300: "#e6e6e6"
+  gray-200: "#eeeeee"
+  gray-300: "#ebebeb"
   gray-400: "#eaeaea"
   gray-500: "#c9c9c9"
   gray-600: "#a8a8a8"
@@ -124,26 +125,45 @@ semantic-colors:
   surface-canvas: "{colors.background-100}"
   surface-subtle: "{colors.background-200}"
   surface-panel: "{colors.background-100}"
+  surface-sunken: "{colors.background-100}"
+  surface-raised: "{colors.background-100}"
+  surface-overlay: "{colors.background-100}"
+  surface-hover: "color-mix(in srgb, var(--q1-color-text-primary) 4%, transparent)"
+  surface-selected: "{colors.primary-100}"
+  surface-inverse: "{colors.gray-1000}"
+  text-on-inverse: "{colors.background-100}"
   surface-media: "#0a0a0a"
   text-on-media: "#ffffff"
   border: "{colors.gray-400}"
   border-strong: "{colors.gray-500}"
+  border-active: "{colors.primary-700}"
   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"
+  text-disabled: "#b7b7b7"
   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-success-text: "{colors.green-900}"
+  status-success-surface: "{colors.green-100}"
+  status-success-border: "#a8d9ad"
   status-warning: "{colors.amber-900}"
+  status-warning-text: "{colors.amber-900}"
+  status-warning-surface: "{colors.amber-100}"
+  status-warning-border: "#edc47d"
   status-danger: "{colors.red-700}"
-  status-danger-text: "#d32f2f"
+  status-danger-text: "#c62828"
   status-danger-surface: "{colors.red-100}"
-  status-danger-border: "#d32f2f"
+  status-danger-border: "#f5b9b8"
+  status-info: "{colors.blue-700}"
+  status-info-text: "#0064b8"
+  status-info-surface: "{colors.blue-100}"
+  status-info-border: "#abcff0"
 typography:
   heading-72:
     fontFamily: Noto Sans SC
@@ -428,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.
 
 **Text utilities.** Code, CodeInline, CodeTokens, CodeBlock, Snippet, Kbd, MiddleTruncate, TextWithCopyButton.
 

package/contracts/token-naming.md

@@ -96,7 +96,9 @@ Examples:
 
 `--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.
+`--q1-color-focus` resolves to `--q1-color-primary-700` in light mode and `--q1-color-primary-900` in dark mode. `--q1-shadow-focus` draws a 2px canvas gap and a 2px focus ring for controls that use a shadow. Button-family controls use a 2px outline with a 2px offset; inputs use `--q1-color-border-active` plus a 1px inset stroke and the gapless translucent `--q1-shadow-focus-input` glow for pointer and keyboard focus. Invalid inputs use `--q1-shadow-focus-input-danger` for a red inset stroke and glow. Text links keep a fine underline at rest, deepen it on hover, and use a 3px focus-color underline for keyboard focus. Forced colors use a system Highlight outline.
+
+Migration: `--q1-color-bg-panel` remains `#ffffff` in light mode and changes from `#0a0a0a` to `#1a1a1a` in dark mode. The dark canvas, raised surface, and overlay now use `#121212`, `#222222`, and `#2b2b2b`. Downstream overrides that manually raised panel or overlay backgrounds should be reviewed. `--q1-shadow-focus` keeps a canvas gap and uses a 2px focus ring; input focus adds a 1px inset stroke while preserving the translucent glow. Consumers with custom focus visuals should update their screenshots and forced-colors fallback. The unused `--q1-shadow-card` name is removed before release.
 
 ### Component Tokens
 

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, endorsement, size, className, 'aria-label': ariaLabel, ...rest }: ProductLockupProps): JSX.Element;
+
+export declare type ProductLockupProps = {
+    /** 产品名称，以文字渲染，随主题承色。 */
+    name: string;
+    /** 产品图标，视为装饰，不参与朗读。默认为品牌符号。 */
+    icon?: ReactNode;
+    /** 背书文字。 */
+    endorsement?: 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。 */