@q1travel/design-system 0.30.8 → 0.30.10

package/contracts/design.dark.md

@@ -175,6 +175,7 @@ semantic-colors:
   auth-text-secondary: "#d1d5db"
   auth-text-muted: "#9ca3af"
   auth-border-strong: "#343943"
+  auth-border-control: "#616b7b"
   auth-surface-card: "#17191d"
   auth-surface-subtle: "#101216"
   auth-surface-input: "#101216"

package/contracts/design.md

@@ -175,6 +175,7 @@ semantic-colors:
   auth-text-secondary: "#273951"
   auth-text-muted: "#64748d"
   auth-border-strong: "#d6dde6"
+  auth-border-control: "#8290a3"
   auth-surface-card: "#ffffff"
   auth-surface-subtle: "#f8fafc"
   auth-surface-input: "#ffffff"

package/contracts/token-naming.md

@@ -135,7 +135,8 @@ Shipped domain palette (owner-approved 2026-10-13): `auth`, the cool blue-gray p
 | `--q1-color-auth-text-primary` | `#061b31` | `#f3f4f6` | Headings |
 | `--q1-color-auth-text-secondary` | `#273951` | `#d1d5db` | Body copy |
 | `--q1-color-auth-text-muted` | `#64748d` | `#9ca3af` | Supporting notes |
-| `--q1-color-auth-border-strong` | `#d6dde6` | `#343943` | Card and input borders |
+| `--q1-color-auth-border-strong` | `#d6dde6` | `#343943` | Card borders and dividers |
+| `--q1-color-auth-border-control` | `#8290a3` | `#616b7b` | Enabled input and selection control boundaries; at least 3:1 against auth input, card and subtle surfaces |
 | `--q1-color-auth-surface-card` | `#ffffff` | `#17191d` | Card |
 | `--q1-color-auth-surface-subtle` | `#f8fafc` | `#101216` | Preview area |
 | `--q1-color-auth-surface-input` | `#ffffff` | `#101216` | Input background |

package/dist-pkg/style.css

@@ -185,6 +185,7 @@
   --q1-color-auth-text-secondary: #273951;
   --q1-color-auth-text-muted: #64748d;
   --q1-color-auth-border-strong: #d6dde6;
+  --q1-color-auth-border-control: #8290a3;
   --q1-color-auth-surface-card: #ffffff;
   --q1-color-auth-surface-subtle: #f8fafc;
   --q1-color-auth-surface-input: #ffffff;
@@ -526,6 +527,7 @@
   --q1-color-auth-text-secondary: #d1d5db;
   --q1-color-auth-text-muted: #9ca3af;
   --q1-color-auth-border-strong: #343943;
+  --q1-color-auth-border-control: #616b7b;
   --q1-color-auth-surface-card: #17191d;
   --q1-color-auth-surface-subtle: #101216;
   --q1-color-auth-surface-input: #101216;
@@ -610,6 +612,11 @@
   text-decoration: none;
 }
 
+/* 暗色控件边界独立于表面分隔线；变体与选中/忙态仍由各自配方覆盖。 */
+:where(:root[data-theme='dark'], [data-q1-theme='dark']) .button:not(:where([data-q1-theme='light'], [data-q1-theme='light'] *)) {
+  border-color: var(--q1-color-border-control);
+}
+
 /* 文字槽包住内容与粗指针命中区：自身沿用按钮的行内排布与间距，图标与文字之间的 gap 不因包裹而丢失。 */
 .button__text {
   display: inline-flex;
@@ -640,7 +647,7 @@
 
 .button--danger {
   border-color: color-mix(in srgb, var(--q1-color-status-danger) 44%, var(--q1-color-border));
-  color: var(--q1-color-status-danger);
+  color: var(--q1-color-status-danger-text);
 }
 
 .button--warning {
@@ -778,6 +785,10 @@
     background: var(--q1-color-bg-hover);
   }
 
+  :where(:root[data-theme='dark'], [data-q1-theme='dark']) .button:where(:not(:where([data-q1-theme='light'], [data-q1-theme='light'] *)):not(.button--primary):not(.button--ghost):not(.button--danger):not(.button--warning):not(.button--selected):not(:disabled):not([aria-disabled='true'])):hover {
+    border-color: var(--q1-color-gray-800);
+  }
+
   .button--primary:not(.button--icon):not(.button--selected):not(:disabled):not([aria-disabled='true']):hover {
     border-color: transparent;
     background: var(--q1-color-action-primary-hover);
@@ -968,7 +979,7 @@
   --q1-tone-fg-warning: oklch(from var(--q1-color-status-warning) 0.47 0.13 h);
   --q1-tone-bg-danger: oklch(from var(--q1-color-status-danger) 0.96 0.03 h);
   --q1-tone-border-danger: oklch(from var(--q1-color-status-danger) 0.86 0.06 h);
-  --q1-tone-fg-danger: oklch(from var(--q1-color-status-danger) 0.47 0.13 h);
+  --q1-tone-fg-danger: oklch(from var(--q1-color-status-danger-text) 0.47 0.13 h);
 }
 
 :root[data-theme='dark'],
@@ -984,7 +995,7 @@
   --q1-tone-fg-warning: oklch(from var(--q1-color-status-warning) 0.72 0.14 h);
   --q1-tone-bg-danger: oklch(from var(--q1-color-status-danger) 0.24 0.04 h);
   --q1-tone-border-danger: oklch(from var(--q1-color-status-danger) 0.34 0.06 h);
-  --q1-tone-fg-danger: oklch(from var(--q1-color-status-danger) 0.72 0.14 h);
+  --q1-tone-fg-danger: oklch(from var(--q1-color-status-danger-text) 0.72 0.14 h);
 }
 
 /* 局部主题子树根元素：原生控件与继承文字色随子树主题，不沿用页面主题。 */
@@ -2552,7 +2563,7 @@
 
 .badge--danger-subtle {
   background: oklch(from var(--q1-color-status-danger) 0.95 0.035 h);
-  color: oklch(from var(--q1-color-status-danger) 0.47 0.15 h);
+  color: oklch(from var(--q1-color-status-danger-text) 0.47 0.15 h);
 }
 
 /* subtle 暗色：暗底 + 亮字（oklch L0.26 底 / L0.74 字）。 */
@@ -2573,7 +2584,7 @@
 
 :is(:root[data-theme='dark'], [data-q1-theme='dark']) .badge--danger-subtle:not(:where([data-q1-theme='light'], [data-q1-theme='light'] *)) {
   background: oklch(from var(--q1-color-status-danger) 0.26 0.045 h);
-  color: oklch(from var(--q1-color-status-danger) 0.74 0.16 h);
+  color: oklch(from var(--q1-color-status-danger-text) 0.74 0.16 h);
 }
 
 /* quiet 档：低强调元数据形态（SKU/条码/待绑定包裹等），视觉≈neutral-subtle——淡染底、无描边，但不带 tone 语义色。 */
@@ -4882,7 +4893,7 @@ a[href]:has(> .book):focus-visible {
 
 .label__required {
   margin-left: 2px;
-  color: var(--q1-color-status-danger);
+  color: var(--q1-color-status-danger-text);
 }
 
 .code-block {
@@ -6648,7 +6659,7 @@ a.q1-card:focus-visible {
 }
 
 .fieldset--danger .fieldset__status {
-  color: var(--q1-color-status-danger);
+  color: var(--q1-color-status-danger-text);
 }
 
 /* 窄屏：页脚纵排，说明文字整行在上、操作在下，避免日期与按钮文案被并排挤成两行。 */
@@ -10682,7 +10693,7 @@ a.q1-navigation__item[aria-disabled='true'] {
   border-radius: var(--q1-radius-2);
   background: color-mix(in srgb, var(--q1-color-status-danger) 10%, transparent);
   padding: var(--q1-space-2) var(--q1-space-3);
-  color: color-mix(in srgb, var(--q1-color-status-danger) 70%, var(--q1-color-text-primary));
+  color: color-mix(in srgb, var(--q1-color-status-danger-text) 70%, var(--q1-color-text-primary));
   font-size: var(--q1-font-size-label-13);
   line-height: var(--q1-line-height-label-13);
 }
@@ -12012,7 +12023,7 @@ a.q1-navigation__item[aria-disabled='true'] {
 }
 
 .cal-inputs__error {
-  color: var(--q1-color-status-danger);
+  color: var(--q1-color-status-danger-text);
   font-size: var(--q1-font-size-label-12);
   line-height: var(--q1-line-height-label-12);
 }
@@ -15011,7 +15022,7 @@ a.q1-navigation__item[aria-disabled='true'] {
 }
 
 .feedback__message--error {
-  color: var(--q1-color-status-danger);
+  color: var(--q1-color-status-danger-text);
 }
 
 .feedback__submit {
@@ -15298,7 +15309,7 @@ a.q1-navigation__item[aria-disabled='true'] {
 
 .page-feedback__actions { justify-content: flex-end; }
 .page-feedback__status { margin: 0; }
-.page-feedback__error { color: var(--q1-color-status-danger); }
+.page-feedback__error { color: var(--q1-color-status-danger-text); }
 .page-feedback :disabled { cursor: default; opacity: 0.5; }
 
 @media (hover: hover) and (pointer: fine) {

package/dist-pkg/tokens.css

@@ -169,6 +169,7 @@
   --q1-color-auth-text-secondary: #273951;
   --q1-color-auth-text-muted: #64748d;
   --q1-color-auth-border-strong: #d6dde6;
+  --q1-color-auth-border-control: #8290a3;
   --q1-color-auth-surface-card: #ffffff;
   --q1-color-auth-surface-subtle: #f8fafc;
   --q1-color-auth-surface-input: #ffffff;
@@ -494,6 +495,7 @@
   --q1-color-auth-text-secondary: #d1d5db;
   --q1-color-auth-text-muted: #9ca3af;
   --q1-color-auth-border-strong: #343943;
+  --q1-color-auth-border-control: #616b7b;
   --q1-color-auth-surface-card: #17191d;
   --q1-color-auth-surface-subtle: #101216;
   --q1-color-auth-surface-input: #101216;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@q1travel/design-system",
-  "version": "0.30.8",
+  "version": "0.30.10",
   "description": "React components, design tokens, and interface contracts for q1travel products.",
   "keywords": [
     "react",
@@ -53,7 +53,7 @@
     "preview": "vite preview --host 127.0.0.1",
     "check:shell": "npm run sync:contracts && node scripts/check-shell.mjs && node scripts/check-token-package.mjs && npm run check:release-provenance",
     "check:browser:strictmode": "node scripts/check-browser.mjs --strictmode-ref",
-    "check:browser": "node --test scripts/devtools-connection.test.mjs scripts/browser-exit-deadline.test.mjs scripts/chromium-teardown.test.mjs scripts/vite-server-lifecycle.test.mjs scripts/chromium-launch.test.mjs scripts/chromium-recovery.test.mjs scripts/chromium-ownership.test.mjs scripts/cdp-recovery.test.mjs && npm run check:browser:strictmode && node scripts/check-browser.mjs --note && node scripts/check-browser.mjs && node scripts/check-clearable-input-browser.mjs && node scripts/check-calendar-browser.mjs && node scripts/check-banner-browser.mjs && node scripts/check-button-link-browser.mjs && node scripts/check-button-browser.mjs && node scripts/check-trailing-icon-padding-browser.mjs && node scripts/check-overlay-theme-browser.mjs && node scripts/check-browser-component-browser.mjs",
+    "check:browser": "node --test scripts/devtools-connection.test.mjs scripts/browser-exit-deadline.test.mjs scripts/chromium-teardown.test.mjs scripts/vite-server-lifecycle.test.mjs scripts/chromium-launch.test.mjs scripts/chromium-recovery.test.mjs scripts/chromium-ownership.test.mjs scripts/cdp-recovery.test.mjs && npm run check:browser:strictmode && node scripts/check-browser.mjs --note && node scripts/check-browser.mjs --combobox-panel && node scripts/check-browser.mjs && node scripts/check-clearable-input-browser.mjs && node scripts/check-calendar-browser.mjs && node scripts/check-banner-browser.mjs && node scripts/check-button-link-browser.mjs && node scripts/check-button-browser.mjs && node scripts/check-trailing-icon-padding-browser.mjs && node scripts/check-overlay-theme-browser.mjs && node scripts/check-browser-component-browser.mjs",
     "check:package-api": "node scripts/check-package-api.mjs && node --test scripts/check-combobox-required.test.mjs scripts/check-multi-combobox-contract.test.mjs && node --test scripts/check-q1-design-lint.test.mjs scripts/check-q1-design-bin-entry.test.mjs && node --test scripts/check-json-view-contract.test.mjs && node --test scripts/check-verification-code-input.test.mjs && node --test scripts/check-bare-field-error.test.mjs scripts/check-label-hidden-contract.test.mjs scripts/check-required-indicator-contract.test.mjs scripts/check-spinner-inherit-contract.test.mjs && node --test scripts/check-controls-contract.test.mjs && node --test scripts/check-pagination-contract.test.mjs && node --test scripts/check-table-core.test.mjs scripts/check-table-interaction.test.mjs scripts/check-table-layout.test.mjs && node --test scripts/check-contrast-contract.test.mjs && node --test scripts/check-optical-alignment-contract.test.mjs && node --test scripts/check-overlay-coordination.test.mjs scripts/check-sheet-contract.test.mjs && node --test scripts/check-choicebox-contract.test.mjs && node --test scripts/check-radio-group-contract.test.mjs && node --test scripts/check-clearable-input-contract.test.mjs && node --test scripts/check-card-contract.test.mjs && node --test scripts/check-book-contract.test.mjs && node --test scripts/check-breadcrumbs-contract.test.mjs && node --test scripts/check-description-contract.test.mjs && node --test scripts/check-error-message-contract.test.mjs && node --test scripts/check-show-more-contract.test.mjs && node --test scripts/check-load-more-button-contract.test.mjs && node --test scripts/check-banner-contract.test.mjs && node --test scripts/check-project-banner-contract.test.mjs && node --test scripts/check-note-contract.test.mjs && node --test scripts/check-feedback-contract.test.mjs && node --test scripts/check-page-feedback-contract.test.mjs && node --test scripts/check-drawer-gesture.test.mjs && node --test scripts/check-checkbox-circle-contract.test.mjs && node --test scripts/check-chat-contract.test.mjs && node --test scripts/check-calendar-single-contract.test.mjs && node --test scripts/check-hover-card-contract.test.mjs && node --test scripts/check-bare-field-error.test.mjs && node --test scripts/check-controls-contract.test.mjs scripts/check-control-size-contract.test.mjs && node --test scripts/check-composer-dots-menu-contract.test.mjs && node --test scripts/check-filter-option-panel-contract.test.mjs && npm run check:release-diff",
     "check:release-diff": "node --test scripts/check-release-artifact-diff.test.mjs && node scripts/check-release-artifact-diff.mjs",
     "check:release-provenance": "node --test scripts/check-release-provenance.test.mjs && node scripts/check-release-provenance.mjs",