@q1travel/design-system 0.17.2 → 0.18.0

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.
Files changed (7) hide show
  1. package/contracts/design.dark.md +38 -18
  2. package/contracts/design.md +24 -4
  3. package/contracts/token-naming.md +3 -1
  4. package/dist-pkg/design-system.js +4547 -4512
  5. package/dist-pkg/style.css +188 -124
  6. package/dist-pkg/tokens.css +65 -23
  7. package/package.json +1 -1
package/dist-pkg/tokens.css CHANGED
@@ -1,9 +1,10 @@
1
1
  :root {
2
2
  --q1-color-background-100: #ffffff;
3
3
  --q1-color-background-200: #fafafa;
4
+ --q1-color-gray-50: #fafafa;
4
5
  --q1-color-gray-100: #f2f2f2;
5
- --q1-color-gray-200: #ebebeb;
6
- --q1-color-gray-300: #e6e6e6;
6
+ --q1-color-gray-200: #eeeeee;
7
+ --q1-color-gray-300: #ebebeb;
7
8
  --q1-color-gray-400: #eaeaea;
8
9
  --q1-color-gray-500: #c9c9c9;
9
10
  --q1-color-gray-600: #a8a8a8;
@@ -115,26 +116,44 @@
115
116
  --q1-color-bg-canvas: var(--q1-color-background-100);
116
117
  --q1-color-bg-subtle: var(--q1-color-background-200);
117
118
  --q1-color-bg-panel: var(--q1-color-background-100);
119
+ --q1-color-bg-sunken: var(--q1-color-background-100);
120
+ --q1-color-bg-raised: var(--q1-color-background-100);
121
+ --q1-color-bg-overlay: var(--q1-color-background-100);
122
+ --q1-color-bg-hover: color-mix(in srgb, var(--q1-color-text-primary) 4%, transparent);
123
+ --q1-color-bg-selected: var(--q1-color-primary-100);
124
+ --q1-color-bg-inverse: var(--q1-color-gray-1000);
125
+ --q1-color-text-on-inverse: var(--q1-color-background-100);
118
126
  --q1-color-bg-media: #0a0a0a;
119
127
  --q1-color-text-on-media: #ffffff;
120
128
  --q1-color-border: var(--q1-color-gray-400);
121
129
  --q1-color-border-subtle: rgba(203, 213, 225, 0.82);
122
130
  --q1-color-border-strong: var(--q1-color-gray-500);
131
+ --q1-color-border-active: var(--q1-color-primary-700);
123
132
  --q1-color-text-primary: var(--q1-color-gray-1000);
124
133
  --q1-color-text-secondary: var(--q1-color-gray-900);
125
134
  --q1-color-text-muted: #6b6b6b;
126
135
  --q1-color-text-soft: #6e6e73;
136
+ --q1-color-text-disabled: #b7b7b7;
127
137
  --q1-color-overlay-scrim: rgba(2, 6, 23, 0.44);
128
138
  --q1-color-focus: var(--q1-color-primary-700);
129
139
  --q1-color-selection-bg: var(--q1-color-text-primary);
130
140
  --q1-color-selection-fg: var(--q1-color-bg-canvas);
131
141
  --q1-color-status-success: var(--q1-color-green-700);
142
+ --q1-color-status-success-text: var(--q1-color-green-900);
143
+ --q1-color-status-success-surface: var(--q1-color-green-100);
144
+ --q1-color-status-success-border: #a8d9ad;
132
145
  --q1-color-status-warning: var(--q1-color-amber-900);
146
+ --q1-color-status-warning-text: var(--q1-color-amber-900);
147
+ --q1-color-status-warning-surface: var(--q1-color-amber-100);
148
+ --q1-color-status-warning-border: #edc47d;
133
149
  --q1-color-status-danger: var(--q1-color-red-700);
134
- --q1-color-status-danger-text: #d32f2f;
150
+ --q1-color-status-danger-text: #c62828;
135
151
  --q1-color-status-danger-surface: var(--q1-color-red-100);
136
- --q1-color-status-danger-border: #d32f2f;
152
+ --q1-color-status-danger-border: #f5b9b8;
137
153
  --q1-color-status-info: var(--q1-color-blue-700);
154
+ --q1-color-status-info-text: #0064b8;
155
+ --q1-color-status-info-surface: var(--q1-color-blue-100);
156
+ --q1-color-status-info-border: #abcff0;
138
157
  --q1-font-sans: "Noto Sans SC", "PingFang SC", "Microsoft YaHei UI", sans-serif;
139
158
  --q1-font-mono: "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
140
159
  --q1-font-weight-regular: 400;
@@ -227,7 +246,9 @@
227
246
  --q1-radius-4: 12px;
228
247
  --q1-radius-5: 16px;
229
248
  --q1-radius-full: 9999px;
230
- --q1-shadow-focus: 0 0 0 1px var(--q1-color-bg-canvas), 0 0 0 3px var(--q1-color-focus);
249
+ --q1-shadow-focus: 0 0 0 2px var(--q1-color-bg-canvas), 0 0 0 4px var(--q1-color-focus);
250
+ --q1-shadow-focus-input: inset 0 0 0 1px var(--q1-color-border-active), 0 0 0 3px color-mix(in srgb, var(--q1-color-focus) 24%, transparent);
251
+ --q1-shadow-focus-input-danger: inset 0 0 0 1px var(--q1-color-status-danger), 0 0 0 3px color-mix(in srgb, var(--q1-color-status-danger) 24%, transparent);
231
252
  --q1-shadow-focus-danger: 0 0 0 4px color-mix(in srgb, var(--q1-color-status-danger) 16%, transparent);
232
253
  --q1-shadow-popover: 0 1px 3px color-mix(in srgb, var(--q1-color-shadow) 10%, transparent),
233
254
  0 8px 28px color-mix(in srgb, var(--q1-color-shadow) 14%, transparent);
@@ -246,17 +267,18 @@
246
267
  }
247
268
 
248
269
  :root[data-theme='dark'] {
249
- --q1-color-background-100: #0a0a0a;
270
+ --q1-color-background-100: #121212;
250
271
  --q1-color-background-200: #000000;
272
+ --q1-color-gray-50: #161616;
251
273
  --q1-color-gray-100: #1a1a1a;
252
- --q1-color-gray-200: #1f1f1f;
253
- --q1-color-gray-300: #292929;
254
- --q1-color-gray-400: #2e2e2e;
255
- --q1-color-gray-500: #454545;
256
- --q1-color-gray-600: #878787;
257
- --q1-color-gray-700: #8f8f8f;
258
- --q1-color-gray-800: #7d7d7d;
259
- --q1-color-gray-900: #a0a0a0;
274
+ --q1-color-gray-200: #222222;
275
+ --q1-color-gray-300: #2b2b2b;
276
+ --q1-color-gray-400: #333333;
277
+ --q1-color-gray-500: #585858;
278
+ --q1-color-gray-600: #7d7d7d;
279
+ --q1-color-gray-700: #878787;
280
+ --q1-color-gray-800: #8f8f8f;
281
+ --q1-color-gray-900: #b4b4b4;
260
282
  --q1-color-gray-1000: #ededed;
261
283
  --q1-color-primary-100: #15103a;
262
284
  --q1-color-primary-200: #1a1547;
@@ -360,28 +382,46 @@
360
382
  --q1-color-shadow: #000000;
361
383
  --q1-color-border-overlay: color-mix(in srgb, #ffffff 14%, transparent);
362
384
  --q1-color-bg-canvas: var(--q1-color-background-100);
363
- --q1-color-bg-subtle: var(--q1-color-gray-100);
364
- --q1-color-bg-panel: var(--q1-color-background-100);
385
+ --q1-color-bg-subtle: var(--q1-color-gray-50);
386
+ --q1-color-bg-panel: var(--q1-color-gray-100);
387
+ --q1-color-bg-sunken: var(--q1-color-bg-subtle);
388
+ --q1-color-bg-raised: var(--q1-color-gray-200);
389
+ --q1-color-bg-overlay: var(--q1-color-gray-300);
390
+ --q1-color-bg-hover: color-mix(in srgb, var(--q1-color-text-primary) 6%, transparent);
391
+ --q1-color-bg-selected: #1f1e38;
392
+ --q1-color-bg-inverse: var(--q1-color-gray-1000);
393
+ --q1-color-text-on-inverse: #0a0a0a;
365
394
  --q1-color-bg-media: #0a0a0a;
366
395
  --q1-color-text-on-media: #ffffff;
367
- --q1-color-border: var(--q1-color-gray-200);
368
- --q1-color-border-subtle: #1f1f1f;
396
+ --q1-color-border: var(--q1-color-gray-400);
397
+ --q1-color-border-subtle: #2a2a2a;
369
398
  --q1-color-border-strong: var(--q1-color-gray-400);
399
+ --q1-color-border-active: var(--q1-color-primary-900);
370
400
  --q1-color-text-primary: var(--q1-color-gray-1000);
371
401
  --q1-color-text-secondary: var(--q1-color-gray-900);
372
- --q1-color-text-muted: var(--q1-color-gray-700);
402
+ --q1-color-text-muted: var(--q1-color-gray-800);
373
403
  --q1-color-text-soft: #9a9a9c;
404
+ --q1-color-text-disabled: var(--q1-color-gray-500);
374
405
  --q1-color-overlay-scrim: rgba(2, 6, 23, 0.44);
375
- --q1-color-focus: var(--q1-color-primary-700);
406
+ --q1-color-focus: var(--q1-color-primary-900);
376
407
  --q1-color-selection-bg: var(--q1-color-text-primary);
377
408
  --q1-color-selection-fg: var(--q1-color-bg-canvas);
378
409
  --q1-color-status-success: var(--q1-color-green-900);
410
+ --q1-color-status-success-text: var(--q1-color-green-900);
411
+ --q1-color-status-success-surface: var(--q1-color-green-100);
412
+ --q1-color-status-success-border: #255a2f;
379
413
  --q1-color-status-warning: var(--q1-color-amber-700);
414
+ --q1-color-status-warning-text: #fac053;
415
+ --q1-color-status-warning-surface: var(--q1-color-amber-100);
416
+ --q1-color-status-warning-border: #754b10;
380
417
  --q1-color-status-danger: var(--q1-color-red-900);
381
- --q1-color-status-danger-text: #ef5350;
418
+ --q1-color-status-danger-text: #f97770;
382
419
  --q1-color-status-danger-surface: var(--q1-color-red-100);
383
- --q1-color-status-danger-border: #ef5350;
420
+ --q1-color-status-danger-border: #7e2f31;
384
421
  --q1-color-status-info: var(--q1-color-blue-900);
422
+ --q1-color-status-info-text: var(--q1-color-blue-900);
423
+ --q1-color-status-info-surface: var(--q1-color-blue-100);
424
+ --q1-color-status-info-border: #194f81;
385
425
  --q1-font-sans: "Noto Sans SC", "PingFang SC", "Microsoft YaHei UI", sans-serif;
386
426
  --q1-font-mono: "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
387
427
  --q1-font-weight-regular: 400;
@@ -474,7 +514,9 @@
474
514
  --q1-radius-4: 12px;
475
515
  --q1-radius-5: 16px;
476
516
  --q1-radius-full: 9999px;
477
- --q1-shadow-focus: 0 0 0 1px var(--q1-color-bg-canvas), 0 0 0 3px var(--q1-color-focus);
517
+ --q1-shadow-focus: 0 0 0 2px var(--q1-color-bg-canvas), 0 0 0 4px var(--q1-color-focus);
518
+ --q1-shadow-focus-input: inset 0 0 0 1px var(--q1-color-border-active), 0 0 0 3px color-mix(in srgb, var(--q1-color-focus) 24%, transparent);
519
+ --q1-shadow-focus-input-danger: inset 0 0 0 1px var(--q1-color-status-danger), 0 0 0 3px color-mix(in srgb, var(--q1-color-status-danger) 24%, transparent);
478
520
  --q1-shadow-focus-danger: 0 0 0 4px color-mix(in srgb, var(--q1-color-status-danger) 16%, transparent);
479
521
  --q1-shadow-popover: 0 1px 3px color-mix(in srgb, var(--q1-color-shadow) 10%, transparent),
480
522
  0 8px 28px color-mix(in srgb, var(--q1-color-shadow) 14%, transparent);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@q1travel/design-system",
3
- "version": "0.17.2",
3
+ "version": "0.18.0",
4
4
  "description": "React components, design tokens, and interface contracts for q1travel products.",
5
5
  "keywords": [
6
6
  "react",