@q1travel/design-system 0.31.2 → 0.31.3

package/dist-pkg/style.css

@@ -8432,7 +8432,7 @@ a.q1-card:focus-visible {
   visibility: hidden;
 }
 /* 变体：default 是浅灰底 + border-strong 外框，分割线与外框同为 border-strong，在浅灰底上保持清晰；
-   secondary 是面板底 + 与 Button 次要档一致的外框（亮色 border、暗色 border-control）；分割线始终与外框同色同粗。 */
+   secondary 是面板底 + 与 Button 次要档一致的外框（亮色 border-strong、暗色 border-control）；分割线始终与外框同色同粗。 */
 .split-button--default .split-button__primary,
 .split-button--default .split-button__toggle {
   background: var(--q1-color-bg-subtle);
@@ -8469,6 +8469,21 @@ a.q1-card:focus-visible {
 .split-button__toggle[aria-disabled='true'] {
   cursor: progress;
 }
+/* 亮色次要按钮的常态与交互边框；暗色和纯图标悬停沿用既有配方。 */
+:where(:root:not([data-theme='dark']), [data-q1-theme='light']) .button:where(:not(.button--primary, .button--ghost, .button--warning, .button--danger, .button--selected)):not(:where([data-q1-theme='dark'], [data-q1-theme='dark'] *)),
+:where(:root:not([data-theme='dark']), [data-q1-theme='light']) .split-button--secondary :is(.split-button__primary, .split-button__toggle):not(:where([data-q1-theme='dark'], [data-q1-theme='dark'] *)) {
+  border-color: var(--q1-color-border-strong);
+}
+:where(:root:not([data-theme='dark']), [data-q1-theme='light']) .button:where(:not(.button--primary, .button--ghost, .button--warning, .button--danger, .button--selected, .button--icon)):not(:where([data-q1-theme='dark'], [data-q1-theme='dark'] *)):active:not(:disabled, [aria-disabled='true']),
+:where(:root:not([data-theme='dark']), [data-q1-theme='light']) .split-button--secondary :is(.split-button__primary, .split-button__toggle):not(:where([data-q1-theme='dark'], [data-q1-theme='dark'] *)):active:not(:disabled, [aria-disabled='true']) {
+  border-color: var(--q1-color-gray-600);
+}
+@media (hover: hover) and (pointer: fine) {
+  :where(:root:not([data-theme='dark']), [data-q1-theme='light']) .button:where(:not(.button--primary, .button--ghost, .button--warning, .button--danger, .button--selected, .button--icon)):not(:where([data-q1-theme='dark'], [data-q1-theme='dark'] *)):hover:not(:disabled, [aria-disabled='true']),
+  :where(:root:not([data-theme='dark']), [data-q1-theme='light']) .split-button--secondary :is(.split-button__primary, .split-button__toggle):not(:where([data-q1-theme='dark'], [data-q1-theme='dark'] *)):hover:not(:disabled, [aria-disabled='true']) {
+    border-color: var(--q1-color-gray-600);
+  }
+}
 /* 尺寸（与 Button 家族共享刻度：高 32/40/48、radius 6/6/8、字号 14/14/16） */
 .split-button--sm .split-button__primary {
   min-height: 32px;
@@ -11566,6 +11581,62 @@ a.q1-navigation__item[aria-disabled='true'] {
   display: none;
 }
 
+.empty-state--panel {
+  box-sizing: border-box;
+  inline-size: 100%;
+  max-inline-size: none;
+  max-width: none;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--q1-space-4);
+  padding: var(--q1-space-4) var(--q1-space-6);
+  border: calc(var(--q1-space-1) / 4) solid var(--q1-color-border-subtle);
+  border-radius: var(--q1-radius-3);
+  background: var(--q1-color-bg-subtle);
+  text-align: start;
+}
+
+.empty-state--panel > .empty-state__body {
+  min-inline-size: 0;
+  display: grid;
+  gap: var(--q1-space-1);
+  overflow-wrap: anywhere;
+}
+
+.empty-state--panel .empty-state__title,
+.empty-state--panel .empty-state__desc {
+  font-size: var(--q1-font-size-copy-14);
+  line-height: var(--q1-line-height-copy-14);
+}
+
+.empty-state--panel .empty-state__title {
+  font-weight: var(--q1-font-weight-semibold);
+  color: var(--q1-color-text-primary);
+}
+
+.empty-state--panel .empty-state__desc {
+  font-weight: var(--q1-font-weight-regular);
+  color: var(--q1-color-text-secondary);
+}
+
+.empty-state--panel > .empty-state__actions {
+  flex-shrink: 0;
+  justify-content: start;
+  margin: 0;
+}
+
+@media (max-width: 30rem) {
+  .empty-state--panel {
+    flex-direction: column;
+    align-items: start;
+  }
+
+  .empty-state--panel > .empty-state__actions {
+    max-inline-size: 100%;
+  }
+}
+
 .q1-cascader { display: grid; gap: var(--q1-space-2); min-inline-size: 0; }
 .q1-cascader__label { color: var(--q1-color-text-primary); font-size: var(--q1-font-size-label-14); line-height: var(--q1-line-height-label-14); }
 .q1-cascader__control { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: var(--q1-space-2); border: calc(var(--q1-space-1) / 4) solid var(--q1-color-border-control); border-radius: var(--q1-radius-2); background: var(--q1-color-bg-sunken); }
@@ -14308,16 +14379,17 @@ a.q1-navigation__item[aria-disabled='true'] {
 
 .empty-state__illustration {
   display: grid;
+  grid-template-columns: minmax(0, 1fr);
   place-items: center;
-  max-inline-size: calc(var(--q1-space-6) * 4);
-  margin-block-end: var(--q1-space-2);
+  max-inline-size: var(--q1-space-16);
+  margin-block-end: 0;
 }
 
 .empty-state--inline > .empty-state__illustration {
   grid-template-columns: minmax(0, 1fr);
   flex-shrink: 0;
-  inline-size: var(--q1-space-16);
-  max-inline-size: var(--q1-space-16);
+  inline-size: var(--q1-space-10);
+  max-inline-size: var(--q1-space-10);
   margin-block-end: 0;
 }
 
@@ -14337,7 +14409,7 @@ a.q1-navigation__item[aria-disabled='true'] {
 
 .empty-list-illustration__back { fill: var(--q1-color-gray-400); }
 .empty-list-illustration__card { fill: var(--q1-color-gray-500); stroke: var(--q1-color-border-strong); }
-.empty-list-illustration rect { rx: var(--q1-radius-3); }
+.empty-list-illustration rect:not(:where(.empty-illustration-redraw *)) { rx: var(--q1-radius-3); }
 .empty-list-illustration .empty-list-illustration__clip { rx: var(--q1-radius-1); }
 .empty-list-illustration__rows { fill: none; stroke: var(--q1-color-gray-600); }
 .empty-list-illustration__lens { stroke: var(--q1-color-border-control); }
@@ -14391,6 +14463,72 @@ a.q1-navigation__item[aria-disabled='true'] {
   }
 }
 
+.empty-list-illustration .empty-illustration-redraw .empty-illustration-redraw__surface { fill: var(--q1-color-background-100); }
+.empty-illustration-redraw__outline { stroke: var(--q1-color-gray-700); }
+.empty-illustration-redraw__detail { fill: none; stroke: var(--q1-color-gray-700); }
+.empty-illustration-redraw__tint { fill: var(--q1-color-teal-300); stroke: var(--q1-color-teal-900); }
+.empty-illustration-redraw__tint-detail { fill: none; stroke: var(--q1-color-teal-900); }
+.empty-illustration-redraw__shadow { fill: var(--q1-color-gray-alpha-100); stroke: none; }
+.empty-illustration-redraw__brand { fill: var(--q1-color-primary-700); stroke: none; }
+.empty-illustration-redraw__brand-line { fill: none; stroke: var(--q1-color-primary-700); }
+
+[data-scene='inventory'] .empty-illustration-redraw__tint { fill: var(--q1-color-amber-300); stroke: var(--q1-color-amber-900); }
+[data-scene='orders'] .empty-illustration-redraw__tint { fill: var(--q1-color-green-300); stroke: var(--q1-color-green-900); }
+[data-scene='orders'] .empty-illustration-redraw__tint-detail { stroke: var(--q1-color-green-900); }
+[data-scene='activity'] .empty-illustration-redraw__tint { fill: var(--q1-color-blue-300); stroke: var(--q1-color-blue-900); }
+[data-scene='activity'] .empty-illustration-redraw__tint-detail { stroke: var(--q1-color-blue-900); }
+
+[data-scene='purchase'] .empty-illustration-redraw__tint { fill: var(--q1-color-green-300); stroke: var(--q1-color-green-900); }
+[data-scene='purchase'] .empty-illustration-redraw__tint-detail { stroke: var(--q1-color-green-900); }
+[data-scene='search'] .empty-illustration-redraw__tint { fill: var(--q1-color-blue-300); stroke: var(--q1-color-blue-900); }
+[data-scene='search'] .empty-illustration-redraw__tint-detail { stroke: var(--q1-color-blue-900); }
+[data-scene='supplier'] .empty-illustration-redraw__tint { fill: var(--q1-color-blue-300); stroke: var(--q1-color-blue-900); }
+[data-scene='supplier'] .empty-illustration-redraw__tint-detail { stroke: var(--q1-color-blue-900); }
+[data-scene='product'] .empty-illustration-redraw__tint { fill: var(--q1-color-teal-300); stroke: var(--q1-color-teal-900); }
+[data-scene='product'] .empty-illustration-redraw__tint-detail { stroke: var(--q1-color-teal-900); }
+[data-scene='team'] .empty-illustration-redraw__tint { fill: var(--q1-color-green-300); stroke: var(--q1-color-green-900); }
+[data-scene='team'] .empty-illustration-redraw__tint-detail { stroke: var(--q1-color-green-900); }
+[data-scene='store'] .empty-illustration-redraw__tint { fill: var(--q1-color-blue-300); stroke: var(--q1-color-blue-900); }
+[data-scene='store'] .empty-illustration-redraw__tint-detail { stroke: var(--q1-color-blue-900); }
+
+:is(:root[data-theme='dark'], [data-q1-theme='dark']) .empty-illustration-redraw__tint:not(:where([data-q1-theme='light'], [data-q1-theme='light'] *)),
+:is(:root[data-theme='dark'], [data-q1-theme='dark']) .empty-illustration-redraw__tint-detail:not(:where([data-q1-theme='light'], [data-q1-theme='light'] *)) { stroke: var(--q1-color-gray-700); }
+:is(:root[data-theme='dark'], [data-q1-theme='dark']) [data-scene='inventory'] .empty-illustration-redraw__tint:not(:where([data-q1-theme='light'], [data-q1-theme='light'] *)) { fill: var(--q1-color-blue-300); }
+:is(:root[data-theme='dark'], [data-q1-theme='dark']) .empty-illustration-redraw__shadow:not(:where([data-q1-theme='light'], [data-q1-theme='light'] *)) { fill: var(--q1-color-gray-alpha-200); }
+:is(:root[data-theme='dark'], [data-q1-theme='dark']) .empty-illustration-redraw__brand:not(:where([data-q1-theme='light'], [data-q1-theme='light'] *)) { fill: var(--q1-color-primary-900); }
+:is(:root[data-theme='dark'], [data-q1-theme='dark']) .empty-illustration-redraw__brand-line:not(:where([data-q1-theme='light'], [data-q1-theme='light'] *)) { stroke: var(--q1-color-primary-900); }
+
+@media (forced-colors: active) {
+  .empty-illustration-redraw :is(.empty-illustration-redraw__surface, .empty-illustration-redraw__tint) { fill: Canvas !important; stroke: CanvasText !important; }
+  .empty-illustration-redraw :is(.empty-illustration-redraw__outline, .empty-illustration-redraw__detail, .empty-illustration-redraw__tint-detail, .empty-illustration-redraw__brand-line) { stroke: CanvasText !important; }
+  .empty-illustration-redraw__brand { fill: CanvasText !important; }
+  .empty-illustration-redraw__shadow { fill: none !important; }
+}
+
+.empty-state--inline { padding-inline: 0; }
+.empty-state--inline .empty-state__title { color: var(--q1-color-text-primary); }
+.empty-state--inline .empty-illustration-inline :is(rect, path, circle) { vector-effect: non-scaling-stroke; }
+[data-scene='complete'] .empty-illustration-redraw__tint { fill: var(--q1-color-green-300); stroke: var(--q1-color-green-900); }
+[data-scene='complete'] .empty-illustration-redraw__tint-detail { stroke: var(--q1-color-green-900); }
+[data-scene='permission'] .empty-illustration-redraw__tint { fill: var(--q1-color-blue-300); stroke: var(--q1-color-blue-900); }
+[data-scene='permission'] .empty-illustration-redraw__tint-detail { stroke: var(--q1-color-blue-900); }
+[data-scene='notification'] .empty-illustration-redraw__tint { fill: var(--q1-color-teal-300); stroke: var(--q1-color-teal-900); }
+[data-scene='notification'] .empty-illustration-redraw__tint-detail { stroke: var(--q1-color-teal-900); }
+[data-scene='session'] .empty-illustration-redraw__tint { fill: var(--q1-color-blue-300); stroke: var(--q1-color-blue-900); }
+[data-scene='session'] .empty-illustration-redraw__tint-detail { stroke: var(--q1-color-blue-900); }
+[data-scene='integration'] .empty-illustration-redraw__tint { fill: var(--q1-color-teal-300); stroke: var(--q1-color-teal-900); }
+[data-scene='integration'] .empty-illustration-redraw__tint-detail { stroke: var(--q1-color-teal-900); }
+[data-scene='payment'] .empty-illustration-redraw__tint { fill: var(--q1-color-green-300); stroke: var(--q1-color-green-900); }
+[data-scene='payment'] .empty-illustration-redraw__tint-detail { stroke: var(--q1-color-green-900); }
+[data-scene='security'] .empty-illustration-redraw__tint { fill: var(--q1-color-blue-300); stroke: var(--q1-color-blue-900); }
+[data-scene='security'] .empty-illustration-redraw__tint-detail { stroke: var(--q1-color-blue-900); }
+
+:is(:root[data-theme='dark'], [data-q1-theme='dark']) .empty-illustration-redraw__tint:not(:where([data-q1-theme='light'], [data-q1-theme='light'] *)),
+:is(:root[data-theme='dark'], [data-q1-theme='dark']) .empty-illustration-redraw__tint-detail:not(:where([data-q1-theme='light'], [data-q1-theme='light'] *)) { stroke: var(--q1-color-gray-700); }
+
+[data-scene='activity'] .empty-illustration-inline__solid { fill: var(--q1-color-blue-900); stroke: none; }
+:is(:root[data-theme='dark'], [data-q1-theme='dark']) [data-scene='activity'] .empty-illustration-inline__solid:not(:where([data-q1-theme='light'], [data-q1-theme='light'] *)) { fill: var(--q1-color-blue-900); stroke: none; }
+
 /* Private geometry derives from existing spacing; no new consumer token surface. */
 .control-option.checkbox-circle {
   --checkbox-circle-diameter: calc(var(--q1-space-4) + var(--q1-space-1) / 2);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@q1travel/design-system",
-  "version": "0.31.2",
+  "version": "0.31.3",
   "description": "React components, design tokens, and interface contracts for q1travel products.",
   "keywords": [
     "react",