@q1travel/design-system 0.25.1 → 0.26.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +2 -0
- package/contracts/design.dark.md +6 -0
- package/contracts/design.md +6 -0
- package/contracts/token-naming.md +6 -0
- package/dist-pkg/design-system.d.ts +5 -9
- package/dist-pkg/design-system.js +4402 -4414
- package/dist-pkg/style.css +20 -17
- package/dist-pkg/tokens.css +4 -0
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -98,6 +98,8 @@ npm run dev
|
|
|
98
98
|
|
|
99
99
|
**技术栈**:React 19 · TypeScript · Vite 7(文档站 / 库双构建管线)· lucide-react · npm
|
|
100
100
|
|
|
101
|
+
**Token 刻度原则**:目标是刻度纯粹、正交,而不是冻结。字号、行高、控件高度、圆角等刻度以 Geist 原生档位为基准,Geist 有而本仓缺失的档位可以补齐。业务页面参考其他产品时,只借鉴页面布局、信息架构与间距节奏,并映射到现有档位;仅为贴合某个产品像素而插入孤立私有尺寸的请求,设计系统直接拒绝,无需上报。确有通用诉求、且契合现有比例与刻度演进的新档位,仍走正常的规范评审。完整规则见 `contracts/token-naming.md` 的 Scale Governance。
|
|
102
|
+
|
|
101
103
|
### Sources
|
|
102
104
|
|
|
103
105
|
- 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`。
|
package/contracts/design.dark.md
CHANGED
|
@@ -267,6 +267,12 @@ typography:
|
|
|
267
267
|
fontWeight: 400
|
|
268
268
|
lineHeight: 18px
|
|
269
269
|
letterSpacing: 0
|
|
270
|
+
label-12:
|
|
271
|
+
fontFamily: Noto Sans SC
|
|
272
|
+
fontSize: 12px
|
|
273
|
+
fontWeight: 400
|
|
274
|
+
lineHeight: 16px
|
|
275
|
+
letterSpacing: 0
|
|
270
276
|
copy-16:
|
|
271
277
|
fontFamily: Noto Sans SC
|
|
272
278
|
fontSize: 16px
|
package/contracts/design.md
CHANGED
|
@@ -267,6 +267,12 @@ typography:
|
|
|
267
267
|
fontWeight: 400
|
|
268
268
|
lineHeight: 18px
|
|
269
269
|
letterSpacing: 0
|
|
270
|
+
label-12:
|
|
271
|
+
fontFamily: Noto Sans SC
|
|
272
|
+
fontSize: 12px
|
|
273
|
+
fontWeight: 400
|
|
274
|
+
lineHeight: 16px
|
|
275
|
+
letterSpacing: 0
|
|
270
276
|
copy-16:
|
|
271
277
|
fontFamily: Noto Sans SC
|
|
272
278
|
fontSize: 16px
|
|
@@ -165,6 +165,12 @@ gets an input with no border and no background.
|
|
|
165
165
|
- Shadow tokens should be displayed as token references, not as color swatches.
|
|
166
166
|
- Theme-specific values may differ, but token names must stay stable across light and dark themes.
|
|
167
167
|
|
|
168
|
+
## Scale Governance
|
|
169
|
+
|
|
170
|
+
- The goal is a pure, orthogonal scale, not a frozen one. The size, typography, radius, and control-height scales are based on Geist's native steps; a step Geist defines and q1travel lacks may be filled (for example `label-12`, 12px / 16px).
|
|
171
|
+
- Product surfaces may take page layout, information architecture, and spacing rhythm from other products, but MUST map them onto existing steps. A request to add an isolated, non-standard step only so one surface matches another product's pixels is declined by the design system without escalation.
|
|
172
|
+
- A genuine, reusable need that fits the existing ratios and evolves the scale orthogonally still goes through normal design review. A new step must serve many surfaces, not close a gap of a few pixels on one page.
|
|
173
|
+
|
|
168
174
|
## Migration Rules
|
|
169
175
|
|
|
170
176
|
- Do not create new public `--ds-*` tokens.
|
|
@@ -965,13 +965,11 @@ export declare type ExternalOverlayRegistration = {
|
|
|
965
965
|
getContainer: () => HTMLElement | null;
|
|
966
966
|
};
|
|
967
967
|
|
|
968
|
-
export declare function Feedback({ label, prompt,
|
|
968
|
+
export declare function Feedback({ label, prompt, inline, topics, onSubmit, disabled, }: FeedbackProps): JSX.Element;
|
|
969
969
|
|
|
970
970
|
export declare interface FeedbackProps {
|
|
971
971
|
label?: string;
|
|
972
972
|
prompt?: string;
|
|
973
|
-
/** textarea 占位:换成更具体的引导,帮助用户知道从哪里说起。 */
|
|
974
|
-
placeholder?: string;
|
|
975
973
|
inline?: boolean;
|
|
976
974
|
topics?: string[];
|
|
977
975
|
onSubmit?: (payload: FeedbackSubmitPayload) => void | Promise<void>;
|
|
@@ -1333,7 +1331,7 @@ declare type MentionQuery = (query: string, options: {
|
|
|
1333
1331
|
signal: AbortSignal;
|
|
1334
1332
|
}) => Promise<ComposerMention[]>;
|
|
1335
1333
|
|
|
1336
|
-
export declare function Menu({ label, entries, withChevron, align, triggerContent, size }: {
|
|
1334
|
+
export declare function Menu({ label, entries, withChevron, align, triggerContent, prefix, size }: {
|
|
1337
1335
|
label: string;
|
|
1338
1336
|
/** 文字触发器尺寸,默认 md;图标触发器保留原尺寸。 */
|
|
1339
1337
|
size?: ButtonSize;
|
|
@@ -1342,6 +1340,8 @@ export declare function Menu({ label, entries, withChevron, align, triggerConten
|
|
|
1342
1340
|
align?: 'start' | 'end';
|
|
1343
1341
|
/** 自定义触发器内容(如纯图标);label 始终作为可访问名称的兜底,图标-only 时经 aria-label 暴露。 */
|
|
1344
1342
|
triggerContent?: ReactNode;
|
|
1343
|
+
/** 文字触发器的前置图标,与 Button 的 prefix 一致;仍按文字触发器的尺寸与内边距渲染,传了 triggerContent 时忽略。 */
|
|
1344
|
+
prefix?: ReactNode;
|
|
1345
1345
|
}): JSX.Element;
|
|
1346
1346
|
|
|
1347
1347
|
export declare type MenuEntry = (MenuItemBase & {
|
|
@@ -1603,25 +1603,21 @@ export declare type OverlaySnapshot = {
|
|
|
1603
1603
|
readonly blockingCount: number;
|
|
1604
1604
|
};
|
|
1605
1605
|
|
|
1606
|
-
export declare function PageFeedback({ variant, onSubmit
|
|
1606
|
+
export declare function PageFeedback({ variant, onSubmit }: PageFeedbackProps): JSX.Element;
|
|
1607
1607
|
|
|
1608
1608
|
export declare type PageFeedbackPayload = {
|
|
1609
1609
|
scale: 'rating4';
|
|
1610
1610
|
rating: PageFeedbackRating;
|
|
1611
1611
|
comment: string;
|
|
1612
|
-
contactConsent: boolean;
|
|
1613
1612
|
} | {
|
|
1614
1613
|
scale: 'helpful';
|
|
1615
1614
|
rating: 'yes' | 'no';
|
|
1616
1615
|
comment: string;
|
|
1617
|
-
contactConsent: boolean;
|
|
1618
1616
|
};
|
|
1619
1617
|
|
|
1620
1618
|
export declare type PageFeedbackProps = {
|
|
1621
1619
|
variant: 'rating' | 'helpful';
|
|
1622
1620
|
onSubmit: (payload: PageFeedbackPayload) => Promise<void>;
|
|
1623
|
-
contactConsent?: boolean;
|
|
1624
|
-
privacyHref?: string;
|
|
1625
1621
|
};
|
|
1626
1622
|
|
|
1627
1623
|
export declare type PageFeedbackRating = 'not-great' | 'okay' | 'good' | 'love';
|