@q1travel/design-system 0.3.1 → 0.4.0

package/dist-pkg/style.css

@@ -202,6 +202,10 @@
   --q1-radius-3: 8px;
   --q1-radius-4: 12px;
   --q1-shadow-focus: 0 0 0 3px color-mix(in srgb, var(--q1-color-primary-700) 22%, transparent);
+  /* 浮层阴影两档：popover=菜单/悬浮卡/小浮层，modal=模态级大浮层。方向性面板（drawer/sheet）例外，
+     在组件内自持。恒黑 shadow token 混色，暗色靠 --q1-color-border-overlay 发丝边保证清晰度。 */
+  --q1-shadow-popover: 0 8px 28px color-mix(in srgb, var(--q1-color-shadow) 16%, transparent);
+  --q1-shadow-modal: 0 16px 48px color-mix(in srgb, var(--q1-color-shadow) 32%, transparent);
 }
 
 :root[data-theme='dark'] {
@@ -736,6 +740,74 @@
   padding: 12px 14px;
 }
 
+/* Textarea 字符计数外框（#22 决策 5，仿 input-control affix 先例）：maxLength 存在时才渲染，
+   外框承载边框/焦点环/校验/禁用皮肤，内部 textarea 去皮，计数器占真实布局空间、右下角对齐。 */
+.textarea-control {
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  border: 1px solid var(--q1-color-border-strong);
+  border-radius: var(--q1-radius-2);
+  background: var(--q1-color-bg-panel);
+}
+
+.textarea-control:hover:not(:has(.form-control:disabled)) {
+  border-color: var(--q1-color-text-secondary);
+}
+
+.textarea-control:focus-within {
+  border-color: var(--q1-color-action-primary);
+  box-shadow: var(--q1-shadow-focus);
+}
+
+.form-field--error .textarea-control,
+.textarea-control:has(.form-control[aria-invalid='true']) {
+  border-color: var(--q1-color-status-danger);
+  box-shadow: 0 0 0 4px color-mix(in srgb, var(--q1-color-status-danger) 16%, transparent);
+}
+
+.textarea-control:has(.form-control:disabled) {
+  background: var(--q1-color-bg-subtle);
+}
+
+/* 尺寸档圆角随内部控件对齐（同 input-control 的 :has 尺寸档规则）。 */
+.textarea-control:has(.form-control--xs) {
+  border-radius: var(--q1-radius-1);
+}
+
+.textarea-control:has(.form-control--lg) {
+  border-radius: var(--q1-radius-3);
+}
+
+.textarea-control .form-control {
+  border: none;
+  border-radius: inherit;
+  background: transparent;
+}
+
+.textarea-control .form-control:focus,
+.textarea-control .form-control:focus-visible,
+.form-field--error .textarea-control .form-control,
+.textarea-control .form-control[aria-invalid='true'] {
+  box-shadow: none;
+}
+
+.textarea-control .form-control:disabled {
+  background: transparent;
+}
+
+.textarea-control__count {
+  align-self: flex-end;
+  padding: 0 12px 8px;
+  color: var(--q1-color-text-secondary);
+  font-size: 12px;
+  line-height: 16px;
+}
+
+.textarea-control:has(.form-control:disabled) .textarea-control__count {
+  color: var(--q1-color-text-muted);
+}
+
 .form-control::placeholder {
   color: var(--q1-color-text-muted);
 }
@@ -784,6 +856,16 @@
   opacity: 0;
 }
 
+/* 裸形态（#22 §1.3 / #45）：去文本 body 列、仅剩 16px 视觉盒；外层是 span 非 label
+   （业务 <label> 包裹时 label 套 label 非法），保留 .control-option 类复用全部状态选择器
+   （checked/indeterminate/disabled/focus-visible 均以其为父作用域）。inline-grid 便于
+   表格选择列/工具栏内联对齐。 */
+.control-option--bare {
+  display: inline-grid;
+  grid-template-columns: 16px;
+  vertical-align: middle;
+}
+
 .control-option__visual {
   position: relative;
   display: block;
@@ -1020,7 +1102,7 @@
   border: 1px solid var(--q1-color-border-overlay);
   border-radius: var(--q1-radius-4);
   background: var(--q1-color-bg-panel);
-  box-shadow: 0 8px 28px color-mix(in srgb, var(--q1-color-shadow) 16%, transparent);
+  box-shadow: var(--q1-shadow-popover);
 }
 .menu__popup--start {
   left: 0;
@@ -2505,10 +2587,10 @@ a.breadcrumb__link:hover {
   display: flex;
   gap: var(--q1-space-6);
   padding: var(--q1-space-4);
-  border: 1px solid var(--q1-color-border);
+  border: 1px solid var(--q1-color-border-overlay);
   border-radius: var(--q1-radius-3);
   background: var(--q1-color-bg-panel);
-  box-shadow: 0 8px 24px color-mix(in srgb, var(--q1-color-mask-opaque) 14%, transparent);
+  box-shadow: var(--q1-shadow-popover);
 }
 
 .cal-popover--vertical {
@@ -2784,10 +2866,10 @@ a.breadcrumb__link:hover {
   z-index: 20;
   display: flex;
   min-width: 380px;
-  border: 1px solid var(--q1-color-border);
+  border: 1px solid var(--q1-color-border-overlay);
   border-radius: var(--q1-radius-3);
   background: var(--q1-color-bg-panel);
-  box-shadow: 0 8px 24px color-mix(in srgb, var(--q1-color-mask-opaque) 14%, transparent);
+  box-shadow: var(--q1-shadow-popover);
   overflow: hidden;
 }
 
@@ -3992,10 +4074,10 @@ a.breadcrumb__link:hover {
   flex-direction: column;
   gap: var(--q1-space-1);
   padding: var(--q1-space-3) var(--q1-space-4);
-  border: 1px solid var(--q1-color-border);
+  border: 1px solid var(--q1-color-border-overlay);
   border-radius: var(--q1-radius-2);
   background: var(--q1-color-bg-panel);
-  box-shadow: 0 8px 24px color-mix(in srgb, var(--q1-color-mask-opaque) 14%, transparent);
+  box-shadow: var(--q1-shadow-popover);
   opacity: 0;
   visibility: hidden;
   transition: opacity 0.12s ease, visibility 0.12s ease;
@@ -4133,7 +4215,7 @@ a.breadcrumb__link:hover {
   border: 1px solid var(--q1-color-border-overlay);
   border-radius: var(--q1-radius-2);
   background: var(--q1-color-bg-panel);
-  box-shadow: 0 8px 24px color-mix(in srgb, var(--q1-color-shadow) 14%, transparent);
+  box-shadow: var(--q1-shadow-popover);
   opacity: 0;
   visibility: hidden;
   transition: opacity 0.12s ease, visibility 0.12s ease;
@@ -5176,7 +5258,7 @@ a.q1-card:focus-visible {
   z-index: 10;
   width: 336px;
   border-color: var(--q1-color-border-overlay);
-  box-shadow: 0 8px 24px color-mix(in srgb, var(--q1-color-shadow) 16%, transparent);
+  box-shadow: var(--q1-shadow-popover);
 }
 .feedback__head {
   display: flex;
@@ -6107,6 +6189,10 @@ a.q1-card:focus-visible {
 .combobox--disabled .combobox__control {
   opacity: 0.55;
 }
+.combobox--readonly .combobox__input {
+  caret-color: transparent;
+  cursor: default;
+}
 .combobox__leading {
   flex: none;
   color: var(--q1-color-text-secondary);
@@ -6143,7 +6229,7 @@ a.q1-card:focus-visible {
   outline: none;
   box-shadow: var(--q1-shadow-focus);
 }
-.combobox__listbox {
+.combobox__popup {
   position: absolute;
   top: calc(100% + var(--q1-space-1));
   left: 0;
@@ -6157,7 +6243,12 @@ a.q1-card:focus-visible {
   border: 1px solid var(--q1-color-border-overlay);
   border-radius: var(--q1-radius-3);
   background: var(--q1-color-bg-panel);
-  box-shadow: 0 8px 28px color-mix(in srgb, var(--q1-color-shadow) 16%, transparent);
+  box-shadow: var(--q1-shadow-popover);
+}
+.combobox__listbox {
+  margin: 0;
+  padding: 0;
+  list-style: none;
 }
 .combobox__option {
   display: flex;
@@ -6186,15 +6277,31 @@ a.q1-card:focus-visible {
 .combobox__option--active {
   background: color-mix(in srgb, var(--q1-color-text-primary) 6%, transparent);
 }
+.combobox__option--disabled {
+  color: var(--q1-color-text-secondary);
+  opacity: 0.55;
+  cursor: not-allowed;
+}
 .combobox__option[aria-selected='true'] {
   color: var(--q1-color-action-primary);
   font-weight: 500;
 }
+/* 选中项对勾（对标 Geist 选中标记）：推到行尾，随选中色。 */
+.combobox__option-check {
+  flex: none;
+  margin-left: auto;
+  color: var(--q1-color-action-primary);
+}
 .combobox__empty {
   padding: var(--q1-space-3);
   font-size: 13px;
   color: var(--q1-color-text-secondary);
 }
+.combobox__empty :focus-visible {
+  outline: none;
+  border-radius: var(--q1-radius-1);
+  box-shadow: var(--q1-shadow-focus);
+}
 .combobox__error-text {
   margin: var(--q1-space-2) 0 0;
   font-size: 13px;
@@ -6242,7 +6349,7 @@ a.q1-card:focus-visible {
   border: 1px solid var(--q1-color-border-overlay);
   border-radius: var(--q1-radius-4);
   background: var(--q1-color-bg-panel);
-  box-shadow: 0 8px 28px color-mix(in srgb, var(--q1-color-shadow) 16%, transparent);
+  box-shadow: var(--q1-shadow-popover);
 }
 .multi-select__bulk {
   display: flex;
@@ -6407,7 +6514,7 @@ a.q1-card:focus-visible {
   border: 1px solid var(--q1-color-border-overlay);
   border-radius: var(--q1-radius-4);
   background: var(--q1-color-bg-panel);
-  box-shadow: 0 16px 48px color-mix(in srgb, var(--q1-color-shadow) 32%, transparent);
+  box-shadow: var(--q1-shadow-modal);
   overflow: hidden;
 }
 .command-palette__search {
@@ -6563,10 +6670,9 @@ a.q1-card:focus-visible {
 .modal-btn--primary:disabled:hover {
   background: var(--q1-color-bg-subtle);
 }
-/* fullWidth（对标 Geist Single button）：单按钮场景下让主操作铺满整行，而不是退回右对齐。 */
-.modal-btn--full-width {
+/* 单按钮场景铺满整行(对标 Geist Single button):布局属于模态框上下文,不进 Button 本体。 */
+.modal__action--full {
   width: 100%;
-  text-align: center;
 }
 .modal {
   position: fixed;
@@ -6592,7 +6698,7 @@ a.q1-card:focus-visible {
   border: 1px solid var(--q1-color-border-overlay);
   border-radius: var(--q1-radius-4);
   background: var(--q1-color-bg-panel);
-  box-shadow: 0 16px 48px color-mix(in srgb, var(--q1-color-shadow) 32%, transparent);
+  box-shadow: var(--q1-shadow-modal);
 }
 .modal__header {
   display: flex;

package/dist-pkg/tokens.css

@@ -0,0 +1,407 @@
+:root {
+  --q1-color-background-100: #ffffff;
+  --q1-color-background-200: #fafafa;
+  --q1-color-gray-100: #f2f2f2;
+  --q1-color-gray-200: #ebebeb;
+  --q1-color-gray-300: #e6e6e6;
+  --q1-color-gray-400: #eaeaea;
+  --q1-color-gray-500: #c9c9c9;
+  --q1-color-gray-600: #a8a8a8;
+  --q1-color-gray-700: #8f8f8f;
+  --q1-color-gray-800: #7d7d7d;
+  --q1-color-gray-900: #4d4d4d;
+  --q1-color-gray-1000: #171717;
+  --q1-color-primary-100: #f1efff;
+  --q1-color-primary-200: #e4e0ff;
+  --q1-color-primary-300: #cbc4ff;
+  --q1-color-primary-400: #aa9eff;
+  --q1-color-primary-500: #8776ff;
+  --q1-color-primary-600: #6b55ff;
+  --q1-color-primary-700: #533afd;
+  --q1-color-primary-800: #4434d4;
+  --q1-color-primary-900: #2e2b8c;
+  --q1-color-primary-1000: #17124f;
+  --q1-color-blue-100: #f0f7ff;
+  --q1-color-blue-200: #e9f4ff;
+  --q1-color-blue-300: #dfefff;
+  --q1-color-blue-400: #cae7ff;
+  --q1-color-blue-500: #94ccff;
+  --q1-color-blue-600: #48aeff;
+  --q1-color-blue-700: #006bff;
+  --q1-color-blue-800: #0059ec;
+  --q1-color-blue-900: #005ff2;
+  --q1-color-blue-1000: #002359;
+  --q1-color-red-100: #ffeeef;
+  --q1-color-red-200: #ffe8ea;
+  --q1-color-red-300: #ffe3e4;
+  --q1-color-red-400: #ffd7d6;
+  --q1-color-red-500: #ffb1b3;
+  --q1-color-red-600: #ff676d;
+  --q1-color-red-700: #fc0035;
+  --q1-color-red-800: #ea001d;
+  --q1-color-red-900: #d8001b;
+  --q1-color-red-1000: #47000c;
+  --q1-color-amber-100: #fff6de;
+  --q1-color-amber-200: #fff4cf;
+  --q1-color-amber-300: #fff1c1;
+  --q1-color-amber-400: #ffdc73;
+  --q1-color-amber-500: #ffc543;
+  --q1-color-amber-600: #ffa600;
+  --q1-color-amber-700: #ffae00;
+  --q1-color-amber-800: #ff9300;
+  --q1-color-amber-900: #aa4d00;
+  --q1-color-amber-1000: #561900;
+  --q1-color-green-100: #ecfdec;
+  --q1-color-green-200: #e5fce7;
+  --q1-color-green-300: #d3fad1;
+  --q1-color-green-400: #b9f5bc;
+  --q1-color-green-500: #82eb8d;
+  --q1-color-green-600: #4ce15e;
+  --q1-color-green-700: #28a948;
+  --q1-color-green-800: #279141;
+  --q1-color-green-900: #107d32;
+  --q1-color-green-1000: #003a00;
+  --q1-color-teal-100: #defffb;
+  --q1-color-teal-200: #ddfef6;
+  --q1-color-teal-300: #ccf9f1;
+  --q1-color-teal-400: #b1f7ec;
+  --q1-color-teal-500: #52f0db;
+  --q1-color-teal-600: #00e3c4;
+  --q1-color-teal-700: #00ac96;
+  --q1-color-teal-800: #00927f;
+  --q1-color-teal-900: #007f70;
+  --q1-color-teal-1000: #003f34;
+  --q1-color-purple-100: #faf0ff;
+  --q1-color-purple-200: #f9f0ff;
+  --q1-color-purple-300: #f6e8ff;
+  --q1-color-purple-400: #f2d9ff;
+  --q1-color-purple-500: #dfa7ff;
+  --q1-color-purple-600: #c979ff;
+  --q1-color-purple-700: #a000f8;
+  --q1-color-purple-800: #8500d1;
+  --q1-color-purple-900: #7d00cc;
+  --q1-color-purple-1000: #2f004e;
+  --q1-color-pink-100: #ffe8f6;
+  --q1-color-pink-200: #ffe8f3;
+  --q1-color-pink-300: #ffdfeb;
+  --q1-color-pink-400: #ffd3e1;
+  --q1-color-pink-500: #fdb3cc;
+  --q1-color-pink-600: #f97ea7;
+  --q1-color-pink-700: #f22782;
+  --q1-color-pink-800: #e4106e;
+  --q1-color-pink-900: #c41562;
+  --q1-color-pink-1000: #460523;
+  --q1-color-scale-neutral: var(--q1-color-gray-700);
+  --q1-color-scale-primary: var(--q1-color-primary-700);
+  --q1-color-scale-blue: var(--q1-color-blue-700);
+  --q1-color-scale-pink: var(--q1-color-pink-700);
+  --q1-color-scale-red: var(--q1-color-red-700);
+  --q1-color-scale-amber: var(--q1-color-amber-600);
+  --q1-color-scale-green: var(--q1-color-green-700);
+  --q1-color-scale-teal: var(--q1-color-teal-700);
+  --q1-color-action-primary: var(--q1-color-primary-700);
+  --q1-color-action-primary-hover: var(--q1-color-primary-800);
+  --q1-color-action-primary-press: var(--q1-color-primary-900);
+  --q1-color-action-on-primary: #ffffff;
+  --q1-color-brand-preview-light-bg: #ffffff;
+  --q1-color-brand-preview-light-fg: #171717;
+  --q1-color-brand-preview-dark-bg: #000000;
+  --q1-color-brand-preview-dark-fg: #ededed;
+  --q1-color-mask-visible: #ffffff;
+  --q1-color-mask-opaque: #000000;
+  --q1-color-shadow: #000000;
+  --q1-color-border-overlay: var(--q1-color-gray-400);
+  --q1-color-bg-canvas: var(--q1-color-background-100);
+  --q1-color-bg-subtle: var(--q1-color-background-200);
+  --q1-color-bg-panel: var(--q1-color-background-100);
+  --q1-color-border: var(--q1-color-gray-400);
+  --q1-color-border-strong: var(--q1-color-gray-500);
+  --q1-color-text-primary: var(--q1-color-gray-1000);
+  --q1-color-text-secondary: var(--q1-color-gray-900);
+  --q1-color-text-muted: var(--q1-color-gray-700);
+  --q1-color-selection-bg: var(--q1-color-text-primary);
+  --q1-color-selection-fg: var(--q1-color-bg-canvas);
+  --q1-color-status-success: var(--q1-color-green-700);
+  --q1-color-status-warning: var(--q1-color-amber-900);
+  --q1-color-status-danger: var(--q1-color-red-700);
+  --q1-color-status-info: var(--q1-color-blue-700);
+  --q1-font-sans: "Noto Sans SC", "PingFang SC", "Microsoft YaHei UI", sans-serif;
+  --q1-font-mono: "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
+  --q1-font-weight-regular: 400;
+  --q1-font-weight-medium: 500;
+  --q1-font-weight-semibold: 600;
+  --q1-font-size-heading-72: 72px;
+  --q1-font-weight-heading-72: var(--q1-font-weight-medium);
+  --q1-line-height-heading-72: 72px;
+  --q1-font-size-heading-64: 64px;
+  --q1-font-weight-heading-64: var(--q1-font-weight-medium);
+  --q1-line-height-heading-64: 68px;
+  --q1-font-size-heading-56: 56px;
+  --q1-font-weight-heading-56: var(--q1-font-weight-medium);
+  --q1-line-height-heading-56: 60px;
+  --q1-font-size-heading-48: 48px;
+  --q1-font-weight-heading-48: var(--q1-font-weight-medium);
+  --q1-line-height-heading-48: 52px;
+  --q1-font-size-heading-40: 40px;
+  --q1-font-weight-heading-40: var(--q1-font-weight-medium);
+  --q1-line-height-heading-40: 44px;
+  --q1-font-size-heading-32: 32px;
+  --q1-font-weight-heading-32: var(--q1-font-weight-medium);
+  --q1-line-height-heading-32: 38px;
+  --q1-font-size-heading-24: 24px;
+  --q1-font-weight-heading-24: var(--q1-font-weight-medium);
+  --q1-line-height-heading-24: 32px;
+  --q1-font-size-heading-20: 20px;
+  --q1-font-weight-heading-20: var(--q1-font-weight-medium);
+  --q1-line-height-heading-20: 28px;
+  --q1-font-size-heading-16: 16px;
+  --q1-font-weight-heading-16: var(--q1-font-weight-medium);
+  --q1-line-height-heading-16: 24px;
+  --q1-font-size-heading-14: 14px;
+  --q1-font-weight-heading-14: var(--q1-font-weight-medium);
+  --q1-line-height-heading-14: 20px;
+  --q1-font-size-label-14: 14px;
+  --q1-line-height-label-14: 20px;
+  --q1-font-size-label-13: 13px;
+  --q1-line-height-label-13: 18px;
+  --q1-font-size-copy-16: 16px;
+  --q1-line-height-copy-16: 24px;
+  --q1-font-size-copy-14: 14px;
+  --q1-line-height-copy-14: 20px;
+  --q1-font-size-code-13: 13px;
+  --q1-line-height-code-13: 18px;
+  --q1-space-1: 4px;
+  --q1-space-2: 8px;
+  --q1-space-3: 12px;
+  --q1-space-4: 16px;
+  --q1-space-6: 24px;
+  --q1-space-8: 32px;
+  --q1-space-10: 40px;
+  --q1-space-16: 64px;
+  --q1-space-24: 96px;
+  --q1-control-height-default: 40px;
+  --q1-doc-frame-gutter: 60px;
+  --q1-doc-frame-max-width: 1220px;
+  --q1-doc-sidebar-width: 260px;
+  --q1-doc-topbar-height: 64px;
+  --q1-doc-topbar-gutter: 16px;
+  --q1-doc-search-width: 220px;
+  --q1-doc-page-header-min-height: 187px;
+  --q1-doc-page-header-padding: 48px;
+  --q1-doc-page-content-max-width: 1120px;
+  --q1-doc-page-footer-min-height: 112px;
+  --q1-doc-page-footer-padding: 28px var(--q1-space-8) 48px;
+  --q1-doc-intro-footer-padding: 28px 48px;
+  --q1-doc-page-footer-action-min-width: 72px;
+  --q1-radius-1: 4px;
+  --q1-radius-2: 6px;
+  --q1-radius-3: 8px;
+  --q1-radius-4: 12px;
+  --q1-shadow-focus: 0 0 0 3px color-mix(in srgb, var(--q1-color-primary-700) 22%, transparent);
+  --q1-shadow-popover: 0 8px 28px color-mix(in srgb, var(--q1-color-shadow) 16%, transparent);
+  --q1-shadow-modal: 0 16px 48px color-mix(in srgb, var(--q1-color-shadow) 32%, transparent);
+}
+
+:root[data-theme='dark'] {
+  --q1-color-background-100: #0a0a0a;
+  --q1-color-background-200: #000000;
+  --q1-color-gray-100: #1a1a1a;
+  --q1-color-gray-200: #1f1f1f;
+  --q1-color-gray-300: #292929;
+  --q1-color-gray-400: #2e2e2e;
+  --q1-color-gray-500: #454545;
+  --q1-color-gray-600: #878787;
+  --q1-color-gray-700: #8f8f8f;
+  --q1-color-gray-800: #7d7d7d;
+  --q1-color-gray-900: #a0a0a0;
+  --q1-color-gray-1000: #ededed;
+  --q1-color-primary-100: #15103a;
+  --q1-color-primary-200: #1a1547;
+  --q1-color-primary-300: #241a6b;
+  --q1-color-primary-400: #2b2080;
+  --q1-color-primary-500: #342899;
+  --q1-color-primary-600: #5b41f5;
+  --q1-color-primary-700: #533afd;
+  --q1-color-primary-800: #4631d6;
+  --q1-color-primary-900: #9c8cff;
+  --q1-color-primary-1000: #ece9ff;
+  --q1-color-blue-100: #06193a;
+  --q1-color-blue-200: #022248;
+  --q1-color-blue-300: #002f62;
+  --q1-color-blue-400: #003674;
+  --q1-color-blue-500: #00418b;
+  --q1-color-blue-600: #0090ff;
+  --q1-color-blue-700: #006efe;
+  --q1-color-blue-800: #005be7;
+  --q1-color-blue-900: #47a8ff;
+  --q1-color-blue-1000: #eaf6ff;
+  --q1-color-red-100: #330a11;
+  --q1-color-red-200: #440d13;
+  --q1-color-red-300: #5d0e17;
+  --q1-color-red-400: #6f101b;
+  --q1-color-red-500: #88151f;
+  --q1-color-red-600: #f32e40;
+  --q1-color-red-700: #f13242;
+  --q1-color-red-800: #e2162a;
+  --q1-color-red-900: #ff565f;
+  --q1-color-red-1000: #ffe9ed;
+  --q1-color-amber-100: #2a1700;
+  --q1-color-amber-200: #361900;
+  --q1-color-amber-300: #502800;
+  --q1-color-amber-400: #5b3000;
+  --q1-color-amber-500: #703e00;
+  --q1-color-amber-600: #ed9a00;
+  --q1-color-amber-700: #ffae00;
+  --q1-color-amber-800: #ff9300;
+  --q1-color-amber-900: #ff9300;
+  --q1-color-amber-1000: #fff3d5;
+  --q1-color-green-100: #002608;
+  --q1-color-green-200: #00320b;
+  --q1-color-green-300: #003a0e;
+  --q1-color-green-400: #004615;
+  --q1-color-green-500: #006717;
+  --q1-color-green-600: #00952d;
+  --q1-color-green-700: #00ac3a;
+  --q1-color-green-800: #009432;
+  --q1-color-green-900: #00ca50;
+  --q1-color-green-1000: #d8ffe4;
+  --q1-color-teal-100: #00231b;
+  --q1-color-teal-200: #002b22;
+  --q1-color-teal-300: #003d34;
+  --q1-color-teal-400: #004035;
+  --q1-color-teal-500: #006354;
+  --q1-color-teal-600: #009e86;
+  --q1-color-teal-700: #00aa95;
+  --q1-color-teal-800: #00927f;
+  --q1-color-teal-900: #00cfb7;
+  --q1-color-teal-1000: #cbfff5;
+  --q1-color-purple-100: #290c33;
+  --q1-color-purple-200: #341142;
+  --q1-color-purple-300: #47185e;
+  --q1-color-purple-400: #541a76;
+  --q1-color-purple-500: #642290;
+  --q1-color-purple-600: #9440d5;
+  --q1-color-purple-700: #9440d5;
+  --q1-color-purple-800: #7d2bba;
+  --q1-color-purple-900: #c472fb;
+  --q1-color-purple-1000: #fbecff;
+  --q1-color-pink-100: #310d1e;
+  --q1-color-pink-200: #420c25;
+  --q1-color-pink-300: #571032;
+  --q1-color-pink-400: #5d0c34;
+  --q1-color-pink-500: #76063f;
+  --q1-color-pink-600: #ba0056;
+  --q1-color-pink-700: #f12b82;
+  --q1-color-pink-800: #e7006d;
+  --q1-color-pink-900: #ff4d8d;
+  --q1-color-pink-1000: #ffe9f4;
+  --q1-color-scale-neutral: var(--q1-color-gray-700);
+  --q1-color-scale-primary: var(--q1-color-primary-700);
+  --q1-color-scale-blue: var(--q1-color-blue-600);
+  --q1-color-scale-pink: var(--q1-color-pink-700);
+  --q1-color-scale-red: var(--q1-color-red-600);
+  --q1-color-scale-amber: var(--q1-color-amber-600);
+  --q1-color-scale-green: var(--q1-color-green-700);
+  --q1-color-scale-teal: var(--q1-color-teal-700);
+  --q1-color-action-primary: var(--q1-color-primary-700);
+  --q1-color-action-primary-hover: var(--q1-color-primary-800);
+  --q1-color-action-primary-press: var(--q1-color-primary-500);
+  --q1-color-action-on-primary: #ffffff;
+  --q1-color-brand-preview-light-bg: #ffffff;
+  --q1-color-brand-preview-light-fg: #171717;
+  --q1-color-brand-preview-dark-bg: #000000;
+  --q1-color-brand-preview-dark-fg: #ededed;
+  --q1-color-mask-visible: #ffffff;
+  --q1-color-mask-opaque: #000000;
+  --q1-color-shadow: #000000;
+  --q1-color-border-overlay: color-mix(in srgb, #ffffff 14%, transparent);
+  --q1-color-bg-canvas: var(--q1-color-background-100);
+  --q1-color-bg-subtle: var(--q1-color-gray-100);
+  --q1-color-bg-panel: var(--q1-color-background-100);
+  --q1-color-border: var(--q1-color-gray-200);
+  --q1-color-border-strong: var(--q1-color-gray-400);
+  --q1-color-text-primary: var(--q1-color-gray-1000);
+  --q1-color-text-secondary: var(--q1-color-gray-900);
+  --q1-color-text-muted: var(--q1-color-gray-800);
+  --q1-color-selection-bg: var(--q1-color-text-primary);
+  --q1-color-selection-fg: var(--q1-color-bg-canvas);
+  --q1-color-status-success: var(--q1-color-green-900);
+  --q1-color-status-warning: var(--q1-color-amber-700);
+  --q1-color-status-danger: var(--q1-color-red-900);
+  --q1-color-status-info: var(--q1-color-blue-900);
+  --q1-font-sans: "Noto Sans SC", "PingFang SC", "Microsoft YaHei UI", sans-serif;
+  --q1-font-mono: "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
+  --q1-font-weight-regular: 400;
+  --q1-font-weight-medium: 500;
+  --q1-font-weight-semibold: 600;
+  --q1-font-size-heading-72: 72px;
+  --q1-font-weight-heading-72: var(--q1-font-weight-medium);
+  --q1-line-height-heading-72: 72px;
+  --q1-font-size-heading-64: 64px;
+  --q1-font-weight-heading-64: var(--q1-font-weight-medium);
+  --q1-line-height-heading-64: 68px;
+  --q1-font-size-heading-56: 56px;
+  --q1-font-weight-heading-56: var(--q1-font-weight-medium);
+  --q1-line-height-heading-56: 60px;
+  --q1-font-size-heading-48: 48px;
+  --q1-font-weight-heading-48: var(--q1-font-weight-medium);
+  --q1-line-height-heading-48: 52px;
+  --q1-font-size-heading-40: 40px;
+  --q1-font-weight-heading-40: var(--q1-font-weight-medium);
+  --q1-line-height-heading-40: 44px;
+  --q1-font-size-heading-32: 32px;
+  --q1-font-weight-heading-32: var(--q1-font-weight-medium);
+  --q1-line-height-heading-32: 38px;
+  --q1-font-size-heading-24: 24px;
+  --q1-font-weight-heading-24: var(--q1-font-weight-medium);
+  --q1-line-height-heading-24: 32px;
+  --q1-font-size-heading-20: 20px;
+  --q1-font-weight-heading-20: var(--q1-font-weight-medium);
+  --q1-line-height-heading-20: 28px;
+  --q1-font-size-heading-16: 16px;
+  --q1-font-weight-heading-16: var(--q1-font-weight-medium);
+  --q1-line-height-heading-16: 24px;
+  --q1-font-size-heading-14: 14px;
+  --q1-font-weight-heading-14: var(--q1-font-weight-medium);
+  --q1-line-height-heading-14: 20px;
+  --q1-font-size-label-14: 14px;
+  --q1-line-height-label-14: 20px;
+  --q1-font-size-label-13: 13px;
+  --q1-line-height-label-13: 18px;
+  --q1-font-size-copy-16: 16px;
+  --q1-line-height-copy-16: 24px;
+  --q1-font-size-copy-14: 14px;
+  --q1-line-height-copy-14: 20px;
+  --q1-font-size-code-13: 13px;
+  --q1-line-height-code-13: 18px;
+  --q1-space-1: 4px;
+  --q1-space-2: 8px;
+  --q1-space-3: 12px;
+  --q1-space-4: 16px;
+  --q1-space-6: 24px;
+  --q1-space-8: 32px;
+  --q1-space-10: 40px;
+  --q1-space-16: 64px;
+  --q1-space-24: 96px;
+  --q1-control-height-default: 40px;
+  --q1-doc-frame-gutter: 60px;
+  --q1-doc-frame-max-width: 1220px;
+  --q1-doc-sidebar-width: 260px;
+  --q1-doc-topbar-height: 64px;
+  --q1-doc-topbar-gutter: 16px;
+  --q1-doc-search-width: 220px;
+  --q1-doc-page-header-min-height: 187px;
+  --q1-doc-page-header-padding: 48px;
+  --q1-doc-page-content-max-width: 1120px;
+  --q1-doc-page-footer-min-height: 112px;
+  --q1-doc-page-footer-padding: 28px var(--q1-space-8) 48px;
+  --q1-doc-intro-footer-padding: 28px 48px;
+  --q1-doc-page-footer-action-min-width: 72px;
+  --q1-radius-1: 4px;
+  --q1-radius-2: 6px;
+  --q1-radius-3: 8px;
+  --q1-radius-4: 12px;
+  --q1-shadow-focus: 0 0 0 3px color-mix(in srgb, var(--q1-color-primary-700) 22%, transparent);
+  --q1-shadow-popover: 0 8px 28px color-mix(in srgb, var(--q1-color-shadow) 16%, transparent);
+  --q1-shadow-modal: 0 16px 48px color-mix(in srgb, var(--q1-color-shadow) 32%, transparent);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@q1travel/design-system",
-  "version": "0.3.1",
+  "version": "0.4.0",
   "private": false,
   "type": "module",
   "main": "./dist-pkg/design-system.js",
@@ -15,6 +15,7 @@
       "import": "./dist-pkg/design-system.js"
     },
     "./style.css": "./dist-pkg/style.css",
+    "./tokens.css": "./dist-pkg/tokens.css",
     "./contracts/*": "./contracts/*",
     "./package.json": "./package.json"
   },
@@ -33,7 +34,7 @@
     "sync:contracts": "node scripts/sync-design-contracts.mjs",
     "build": "npm run sync:contracts && tsc -b && vite build",
     "preview": "vite preview --host 127.0.0.1",
-    "check:shell": "npm run sync:contracts && node scripts/check-shell.mjs",
+    "check:shell": "npm run sync:contracts && node scripts/check-shell.mjs && node scripts/check-token-package.mjs",
     "check:browser": "node scripts/check-browser.mjs",
     "check": "npm run build && npm run check:shell && npm run check:browser",
     "build:lib": "vite build --config vite.lib.config.ts",