@wycm9527/morganite 0.0.0-stage → 0.3.4

package/design-system/preview/preview.css

@@ -0,0 +1,190 @@
+/* 虚拟项目的组件样式：只引用 token 变量，按 DESIGN「组件配方」的角色拼出来。
+   颜色类角色缺失时露出洋红 --pv-miss，尺寸类缺失时用保守后备——预览里看到洋红 = 这个系统类型要求的角色没填。
+   结构性布局（grid / flex / 断点镜像 768px）不是设计决定，可以写死。 */
+:root {
+  --pv-miss: #ff00ff;
+  --pv-radius-control: var(--radius-md, 0px);
+  --pv-radius-card: var(--radius-lg, 0px);
+  color-scheme: light dark;
+}
+html { font-size: var(--layout-root-font-size, 16px); }
+*, *::before, *::after { box-sizing: border-box; }
+body {
+  margin: 0;
+  background: var(--color-bg-page, var(--pv-miss));
+  color: var(--color-text-primary, var(--pv-miss));
+  font-family: var(--font-family-body, system-ui, sans-serif);
+  font-size: var(--text-body-size, 1rem);
+  line-height: var(--text-body-line-height, 1.5);
+  -webkit-font-smoothing: auto;
+}
+h1, h2, h3, h4, p, ul, figure { margin: 0; }
+ul { padding: 0; list-style: none; }
+a { color: inherit; text-decoration: none; }
+img, svg { display: block; max-width: 100%; }
+button, input, select, textarea { font: inherit; color: inherit; }
+
+/* —— 布局 —— */
+.pv-container { max-width: var(--layout-container-max-width, 1200px); margin: 0 auto; padding-left: var(--space-gutter, 24px); padding-right: var(--space-gutter, 24px); }
+.pv-section { padding-top: var(--space-stack, 16px); padding-bottom: var(--space-stack, 16px); }
+.pv-section--tall { padding-top: calc(var(--space-stack, 16px) * 3); padding-bottom: calc(var(--space-stack, 16px) * 3); }
+.pv-section--surface { background: var(--color-bg-surface, var(--pv-miss)); }
+.pv-section--subtle { background: var(--color-bg-subtle, var(--pv-miss)); }
+.pv-section--inverse { background: var(--color-bg-inverse, var(--pv-miss)); color: var(--color-text-inverse, var(--pv-miss)); }
+.pv-section--brand { background: var(--color-bg-brand, var(--pv-miss)); color: var(--color-text-on-brand, var(--pv-miss)); }
+.pv-grid { display: grid; gap: var(--space-stack, 16px); grid-template-columns: repeat(3, minmax(0, 1fr)); }
+.pv-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+.pv-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
+.pv-row { display: flex; gap: var(--space-inline, 8px); align-items: center; flex-wrap: wrap; }
+.pv-stack { display: grid; gap: var(--space-stack, 16px); }
+.pv-stack--tight { gap: var(--space-inline, 8px); }
+.pv-divider { border: 0; border-top: var(--border-width-default, 1px) solid var(--color-border-default, var(--pv-miss)); margin: var(--space-stack, 16px) 0; }
+@media (max-width: 767px) {
+  .pv-grid, .pv-grid--2, .pv-grid--4 { grid-template-columns: 1fr; }
+  .pv-hide-mobile { display: none !important; }
+  /* 窄屏字号降两档：hero → display，display → heading（token 只收了桌面值，这是通用做法的镜像） */
+  .pv-hero-title { font-size: var(--text-display-size, 2.5rem); line-height: var(--text-display-line-height, 1.1); }
+  .pv-display { font-size: var(--text-heading-size, 1.5rem); }
+}
+
+/* —— 文字 —— */
+.pv-eyebrow { color: var(--color-text-brand, var(--pv-miss)); font-size: var(--text-small-size, 0.875rem); font-weight: var(--text-weight-label, 500); letter-spacing: var(--font-letter-spacing-wide, 0.04em); text-transform: uppercase; }
+.pv-hero-title { font-family: var(--font-family-heading, var(--font-family-body, inherit)); font-size: var(--text-hero-size, var(--text-display-size, 3rem)); line-height: var(--text-hero-line-height, var(--text-display-line-height, 1.1)); font-weight: var(--text-weight-brand, 700); letter-spacing: var(--text-display-tracking, 0); }
+.pv-display { font-family: var(--font-family-heading, var(--font-family-body, inherit)); font-size: var(--text-display-size, 2.5rem); line-height: var(--text-display-line-height, 1.1); font-weight: var(--text-display-weight, 700); letter-spacing: var(--text-display-tracking, 0); }
+.pv-h2 { font-family: var(--font-family-heading, var(--font-family-body, inherit)); font-size: var(--text-heading-size, 1.5rem); line-height: var(--text-heading-line-height, 1.25); font-weight: var(--text-weight-strong, 600); }
+.pv-h3 { font-size: var(--text-title-size, 1.125rem); line-height: var(--text-heading-line-height, 1.25); font-weight: var(--text-weight-strong, 600); }
+.pv-h4 { font-size: var(--text-title-sm-size, 1rem); font-weight: var(--text-weight-strong, 600); }
+.pv-lead { font-size: var(--text-title-size, 1.125rem); color: var(--color-text-secondary, var(--pv-miss)); line-height: var(--text-paragraph-line-height, var(--text-body-line-height, 1.5)); }
+.pv-secondary { color: var(--color-text-secondary, var(--pv-miss)); }
+.pv-muted { color: var(--color-text-muted, var(--pv-miss)); }
+.pv-small { font-size: var(--text-small-size, 0.875rem); }
+.pv-caption { font-size: var(--text-caption-size, 0.75rem); color: var(--color-text-muted, var(--pv-miss)); }
+.pv-brand { color: var(--color-text-brand, var(--pv-miss)); }
+.pv-strong { font-weight: var(--text-weight-strong, 600); }
+.pv-link { color: var(--color-text-link, var(--pv-miss)); text-decoration: var(--text-link-decoration, underline); text-underline-offset: 0.15em; }
+.pv-link:hover { color: var(--color-text-link-hover, var(--color-text-link, var(--pv-miss))); }
+.pv-prose { max-width: 68ch; }
+.pv-prose > * + * { margin-top: var(--space-stack, 16px); }
+.pv-prose p { line-height: var(--text-paragraph-line-height, var(--text-body-line-height, 1.6)); }
+.pv-prose ul { list-style: disc; padding-left: 1.4em; }
+.pv-prose blockquote { margin: 0; padding-left: var(--space-card, 16px); border-left: var(--border-width-indicator, 3px) solid var(--color-brand-indicator, var(--pv-miss)); color: var(--color-text-secondary, var(--pv-miss)); }
+.pv-prose code, .pv-code { font-family: var(--font-family-code, ui-monospace, monospace); font-size: var(--text-small-size, 0.875em); background: var(--color-bg-subtle, var(--pv-miss)); padding: 0.1em 0.4em; border-radius: var(--radius-sm, var(--pv-radius-control)); }
+.pv-prose pre { background: var(--color-bg-subtle, var(--pv-miss)); padding: var(--space-card, 16px); border-radius: var(--pv-radius-card); overflow: auto; }
+.pv-prose pre code { background: none; padding: 0; }
+.pv-numeric { font-variant-numeric: var(--text-numeric-variant, tabular-nums); }
+
+/* —— 导航 / 顶栏 / 页脚 —— */
+.pv-nav { position: sticky; top: 0; z-index: var(--layer-sticky, 10); height: var(--layout-topbar-height, 56px); display: flex; align-items: center; background: var(--color-bg-page, var(--pv-miss)); }
+.pv-nav--surface { background: var(--color-bg-surface, var(--pv-miss)); border-bottom: var(--border-width-default, 1px) solid var(--color-border-default, var(--pv-miss)); }
+.pv-nav .pv-container { display: flex; align-items: center; justify-content: space-between; gap: var(--space-stack, 16px); width: 100%; }
+.pv-logo { font-family: var(--font-family-heading, var(--font-family-body, inherit)); font-weight: var(--text-weight-logo, var(--text-weight-strong, 700)); font-size: var(--text-title-size, 1.125rem); letter-spacing: var(--font-letter-spacing-wide, 0); }
+.pv-menu { display: flex; gap: var(--space-inline, 8px); align-items: center; }
+.pv-menu a { display: inline-flex; align-items: center; height: var(--control-height-md, 36px); padding: 0 var(--spacing-3, var(--space-inline, 12px)); font-weight: var(--text-weight-label, 500); color: var(--color-text-secondary, var(--pv-miss)); border-radius: var(--pv-radius-control); }
+.pv-menu a:hover { background: var(--color-bg-hover, var(--pv-miss)); color: var(--color-text-primary, var(--pv-miss)); }
+.pv-menu a.is-current { color: var(--color-text-primary, var(--pv-miss)); box-shadow: inset 0 calc(-1 * var(--border-width-active, 2px)) 0 var(--color-border-current, var(--pv-miss)); }
+.pv-footer { padding: calc(var(--space-stack, 16px) * 2) 0; color: var(--color-text-secondary, var(--pv-miss)); border-top: var(--border-width-default, 1px) solid var(--color-border-default, var(--pv-miss)); }
+.pv-footer .pv-grid a { display: block; padding: 2px 0; color: var(--color-text-secondary, var(--pv-miss)); }
+
+/* —— 按钮 —— */
+.pv-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-inline, 8px); height: var(--control-height-md, 36px); padding: 0 var(--spacing-4, 16px); border-radius: var(--pv-radius-control); border: var(--border-width-default, 1px) solid transparent; font-weight: var(--text-weight-label, 500); font-size: var(--text-body-size, 1rem); line-height: 1; cursor: pointer; white-space: nowrap; transition: background var(--motion-duration-fast, 120ms) var(--motion-easing-standard, ease), color var(--motion-duration-fast, 120ms) var(--motion-easing-standard, ease); }
+.pv-btn--primary { background: var(--color-action-primary, var(--pv-miss)); color: var(--color-text-on-primary, var(--pv-miss)); border-color: var(--color-action-primary, var(--pv-miss)); }
+.pv-btn--primary:hover { background: var(--color-action-primary-hover, var(--color-action-primary)); border-color: var(--color-action-primary-hover, var(--color-action-primary)); }
+.pv-btn--secondary { background: transparent; color: var(--color-text-primary, var(--pv-miss)); border-color: var(--color-border-strong, var(--pv-miss)); }
+.pv-btn--secondary:hover { background: var(--color-bg-hover, var(--pv-miss)); }
+.pv-btn--quiet { background: transparent; color: var(--color-text-link, var(--pv-miss)); }
+.pv-btn--quiet:hover { background: var(--color-action-quiet-hover, var(--color-bg-hover, var(--pv-miss))); }
+.pv-btn--danger { background: var(--color-action-danger, var(--pv-miss)); color: var(--color-text-on-danger, var(--pv-miss)); border-color: var(--color-action-danger, var(--pv-miss)); }
+.pv-btn--lg { height: var(--control-height-lg, var(--control-height-md, 44px)); padding: 0 var(--spacing-6, 24px); font-size: var(--text-title-sm-size, var(--text-body-size)); }
+.pv-btn--sm { height: var(--control-height-sm, 28px); padding: 0 var(--spacing-3, 12px); font-size: var(--text-small-size, 0.875rem); }
+.pv-btn--inverse { background: var(--color-bg-inverse, var(--pv-miss)); color: var(--color-text-inverse, var(--pv-miss)); border-color: var(--color-bg-inverse, var(--pv-miss)); }
+.pv-btn--on-brand { background: transparent; color: var(--color-text-on-brand, var(--pv-miss)); border-color: var(--color-text-on-brand, var(--pv-miss)); }
+.pv-btn:focus-visible, .pv-input:focus-visible { outline: var(--focus-ring-width, 2px) solid var(--color-focus-ring, var(--pv-miss)); outline-offset: 2px; }
+.is-disabled { opacity: var(--opacity-disabled, 0.5); pointer-events: none; }
+
+/* —— 表单 —— */
+.pv-field { display: grid; gap: var(--space-inline, 8px); }
+.pv-label { font-size: var(--text-body-sm-size, var(--text-body-size)); font-weight: var(--text-weight-label, 500); color: var(--color-text-primary, var(--pv-miss)); }
+.pv-help { font-size: var(--text-small-size, 0.875rem); color: var(--color-text-muted, var(--pv-miss)); }
+.pv-input { height: var(--control-height-md, 36px); width: 100%; padding: 0 var(--spacing-3, 12px); background: var(--color-bg-input, var(--pv-miss)); color: var(--color-text-primary, var(--pv-miss)); border: var(--border-width-default, 1px) solid var(--color-border-input, var(--pv-miss)); border-radius: var(--pv-radius-control); }
+.pv-input::placeholder { color: var(--color-text-placeholder, var(--pv-miss)); }
+.pv-input:focus { outline: var(--focus-ring-width, 2px) solid var(--color-focus-ring, var(--pv-miss)); border-color: var(--color-border-focus, var(--pv-miss)); }
+textarea.pv-input { height: auto; min-height: calc(var(--control-height-md, 36px) * 3); padding-top: var(--spacing-2, 8px); resize: vertical; }
+.pv-input--readonly { background: var(--color-bg-readonly, var(--color-bg-subtle, var(--pv-miss))); }
+.pv-form-h { display: grid; grid-template-columns: var(--layout-form-label-width, 112px) 1fr; gap: var(--space-inline, 8px) var(--space-stack, 16px); align-items: center; max-width: var(--layout-form-max-width, 720px); }
+.pv-form-h .pv-label { text-align: right; }
+.pv-check { display: inline-flex; align-items: center; gap: var(--space-inline, 8px); }
+.pv-check i { width: 16px; height: 16px; border: var(--border-width-control, var(--border-width-default, 1px)) solid var(--color-border-input, var(--pv-miss)); border-radius: var(--radius-xs, var(--radius-sm, 2px)); background: var(--color-bg-input, var(--pv-miss)); }
+.pv-check i.is-on { background: var(--color-action-primary, var(--pv-miss)); border-color: var(--color-action-primary, var(--pv-miss)); }
+
+/* —— 卡片 / 媒体 —— */
+.pv-card { background: var(--color-bg-surface, var(--pv-miss)); border-radius: var(--pv-radius-card); padding: var(--space-card, 16px); box-shadow: 0 var(--elevation-card-y, 0) var(--elevation-card-blur, 0) var(--elevation-card-color, transparent); display: grid; gap: var(--space-inline, 8px); align-content: start; }
+.pv-card--bordered { border: var(--border-width-default, 1px) solid var(--color-border-default, var(--pv-miss)); }
+.pv-card--flush { padding: 0; overflow: hidden; }
+.pv-card--flush .pv-card__body { padding: var(--space-card, 16px); display: grid; gap: var(--space-inline, 8px); }
+.pv-media { aspect-ratio: 16 / 9; border-radius: var(--pv-radius-card); background: linear-gradient(135deg, var(--color-bg-subtle, var(--pv-miss)) 0%, var(--color-bg-surface, var(--pv-miss)) 60%, var(--color-bg-brand, var(--pv-miss)) 100%); position: relative; overflow: hidden; }
+.pv-media--square { aspect-ratio: 1; }
+.pv-media--wide { aspect-ratio: 21 / 9; }
+.pv-media::after { content: ""; position: absolute; inset: auto 0 0 0; height: var(--border-width-indicator, 3px); background: var(--color-brand-indicator, var(--pv-miss)); }
+.pv-cover { position: relative; border-radius: var(--pv-radius-card); overflow: hidden; display: grid; align-items: end; min-height: 320px; background: linear-gradient(160deg, var(--color-bg-brand, var(--pv-miss)), var(--color-bg-subtle, var(--pv-miss))); }
+.pv-cover::before { content: ""; position: absolute; inset: 0; background: var(--color-bg-overlay, var(--pv-miss)); }
+.pv-cover > * { position: relative; padding: var(--space-card, 16px); color: var(--color-text-on-overlay, var(--pv-miss)); }
+.pv-stat { display: grid; gap: 4px; }
+.pv-stat b { font-size: var(--text-display-size, 2rem); line-height: var(--text-display-line-height, 1.1); font-weight: var(--text-display-weight, 600); letter-spacing: var(--text-display-tracking, 0); font-variant-numeric: var(--text-numeric-variant, tabular-nums); }
+
+/* —— 徽标 / 标签 / 状态 —— */
+.pv-badge { display: inline-flex; align-items: center; height: var(--control-height-sm, 24px); padding: 0 var(--spacing-2, 8px); border-radius: var(--radius-full, 999px); font-size: var(--text-small-size, 0.875rem); font-weight: var(--text-weight-label, 500); white-space: nowrap; }
+.pv-badge--success { background: var(--color-status-success-bg, var(--pv-miss)); color: var(--color-status-success, var(--pv-miss)); }
+.pv-badge--warning { background: var(--color-status-warning-bg, var(--pv-miss)); color: var(--color-status-warning, var(--pv-miss)); }
+.pv-badge--error { background: var(--color-status-error-bg, var(--pv-miss)); color: var(--color-status-error, var(--pv-miss)); }
+.pv-badge--info { background: var(--color-status-info-bg, var(--pv-miss)); color: var(--color-status-info, var(--pv-miss)); }
+.pv-badge--neutral { background: var(--color-status-neutral-bg, var(--pv-miss)); color: var(--color-status-neutral, var(--pv-miss)); }
+.pv-tag { display: inline-flex; align-items: center; height: var(--control-height-sm, var(--control-height-md, 24px)); padding: 0 var(--spacing-2, 8px); border-radius: var(--pv-radius-control); background: var(--color-bg-subtle, var(--pv-miss)); color: var(--color-text-secondary, var(--pv-miss)); font-size: var(--text-small-size, 0.875rem); letter-spacing: var(--font-letter-spacing-wide, 0); }
+.pv-alert { display: flex; gap: var(--space-inline, 8px); padding: var(--spacing-3, 12px) var(--space-card, 16px); border-radius: var(--pv-radius-control); background: var(--color-status-info-bg, var(--pv-miss)); color: var(--color-status-info, var(--pv-miss)); }
+.pv-alert--warning { background: var(--color-status-warning-bg, var(--pv-miss)); color: var(--color-status-warning, var(--pv-miss)); }
+.pv-dot { width: 8px; height: 8px; border-radius: var(--radius-full, 999px); background: var(--color-brand-indicator, var(--pv-miss)); display: inline-block; }
+
+/* —— 表格 / 分页 / 标签页 —— */
+.pv-table { width: 100%; border-collapse: collapse; background: var(--color-bg-surface, var(--pv-miss)); }
+.pv-table th { text-align: left; background: var(--color-bg-subtle, var(--pv-miss)); color: var(--color-text-secondary, var(--pv-miss)); font-weight: var(--text-weight-label, 500); font-size: var(--text-body-sm-size, var(--text-body-size)); padding: var(--table-cell-padding-y, 12px) var(--table-cell-padding-x, 16px); border-bottom: var(--border-width-default, 1px) solid var(--color-border-default, var(--pv-miss)); }
+.pv-table td { padding: var(--table-cell-padding-y, 12px) var(--table-cell-padding-x, 16px); border-bottom: var(--border-width-default, 1px) solid var(--color-border-default, var(--pv-miss)); vertical-align: middle; }
+.pv-table tr:hover td { background: var(--color-bg-hover, var(--pv-miss)); }
+.pv-table tr.is-selected td { background: var(--color-bg-selected-subtle, var(--pv-miss)); }
+.pv-table .pv-muted { font-size: var(--text-small-size, 0.875rem); }
+.pv-pagination { display: flex; gap: var(--space-inline, 8px); align-items: center; }
+.pv-pagination a { display: inline-flex; align-items: center; justify-content: center; min-width: var(--control-height-sm, 28px); height: var(--control-height-sm, 28px); padding: 0 var(--spacing-2, 8px); border-radius: var(--pv-radius-control); color: var(--color-text-secondary, var(--pv-miss)); font-variant-numeric: var(--text-numeric-variant, tabular-nums); }
+.pv-pagination a.is-current { background: var(--color-action-selected, var(--pv-miss)); color: var(--color-text-on-selected, var(--pv-miss)); }
+.pv-tabs { display: flex; gap: var(--space-stack, 16px); border-bottom: var(--border-width-default, 1px) solid var(--color-border-default, var(--pv-miss)); }
+.pv-tabs a { display: inline-flex; align-items: center; height: var(--control-height-md, 36px); color: var(--color-text-secondary, var(--pv-miss)); font-weight: var(--text-weight-label, 500); }
+.pv-tabs a.is-current { color: var(--color-text-primary, var(--pv-miss)); box-shadow: inset 0 calc(-1 * var(--border-width-active, 2px)) 0 var(--color-border-current, var(--pv-miss)); }
+.pv-toolbar { display: flex; gap: var(--space-inline, 8px); align-items: center; justify-content: space-between; flex-wrap: wrap; }
+.pv-search { width: var(--layout-search-width, 240px); }
+.pv-skeleton { height: 12px; border-radius: var(--radius-full, 999px); background: linear-gradient(90deg, var(--color-bg-skeleton, var(--pv-miss)), var(--color-bg-skeleton-highlight, var(--color-bg-skeleton, var(--pv-miss))), var(--color-bg-skeleton, var(--pv-miss))); }
+
+/* —— 中后台壳层 —— */
+.pv-shell { display: grid; grid-template-columns: var(--layout-sidebar-width, 240px) minmax(0, 1fr); min-height: 100vh; }
+.pv-sidebar { background: var(--color-bg-sidebar, var(--pv-miss)); color: var(--color-text-sidebar, var(--pv-miss)); border-right: var(--border-width-default, 1px) solid var(--color-border-sidebar, var(--pv-miss)); padding: var(--space-card, 16px) var(--spacing-3, 12px); display: grid; gap: var(--space-stack, 16px); align-content: start; }
+.pv-sidebar .pv-logo { color: var(--color-text-sidebar-strong, var(--pv-miss)); padding: 0 var(--spacing-3, 12px); }
+.pv-sidebar .pv-group { font-size: var(--text-caption-size, 0.75rem); color: var(--color-text-sidebar-muted, var(--pv-miss)); padding: 0 var(--spacing-3, 12px); text-transform: uppercase; letter-spacing: var(--font-letter-spacing-wide, 0.04em); }
+.pv-sidebar a { display: flex; align-items: center; gap: var(--space-inline, 8px); height: var(--control-height-md, 36px); padding: 0 var(--spacing-3, 12px); border-radius: var(--pv-radius-control); color: var(--color-text-sidebar, var(--pv-miss)); font-weight: var(--text-weight-label, 500); }
+.pv-sidebar a:hover { background: var(--color-bg-sidebar-hover, var(--pv-miss)); }
+.pv-sidebar a.is-current { background: var(--color-bg-sidebar-selected, var(--pv-miss)); color: var(--color-text-sidebar-selected, var(--pv-miss)); box-shadow: inset var(--border-width-indicator, 3px) 0 0 var(--color-brand-indicator, var(--pv-miss)); }
+.pv-sidebar i { width: 16px; height: 16px; border-radius: var(--radius-xs, 3px); background: currentColor; opacity: 0.7; }
+.pv-main { display: grid; grid-template-rows: auto 1fr; min-width: 0; }
+.pv-topbar { height: var(--layout-topbar-height, 56px); background: var(--color-bg-surface, var(--pv-miss)); border-bottom: var(--border-width-default, 1px) solid var(--color-border-default, var(--pv-miss)); display: flex; align-items: center; justify-content: space-between; padding: 0 var(--space-gutter, 24px); position: sticky; top: 0; z-index: var(--layer-sticky, 10); }
+.pv-content { padding: var(--space-gutter, 24px); display: grid; gap: var(--space-stack, 16px); align-content: start; }
+.pv-avatar { width: var(--avatar-size-md, 32px); height: var(--avatar-size-md, 32px); border-radius: var(--radius-full, 999px); background: var(--color-bg-brand, var(--pv-miss)); }
+@media (max-width: 767px) { .pv-shell { grid-template-columns: 1fr; } .pv-sidebar { display: none; } }
+
+/* —— 浮层 —— */
+.pv-overlay { position: fixed; inset: 0; background: var(--color-bg-overlay, var(--pv-miss)); z-index: var(--layer-modal, 1000); display: flex; align-items: center; justify-content: center; padding: var(--space-gutter, 24px); }
+.pv-overlay--right { justify-content: flex-end; padding: 0; }
+.pv-dialog { width: min(100%, var(--layout-modal-width-md, 640px)); background: var(--color-bg-elevated, var(--pv-miss)); border-radius: var(--pv-radius-card); padding: var(--space-card, 16px); display: grid; gap: var(--space-stack, 16px); box-shadow: 0 var(--elevation-modal-y, 0) var(--elevation-modal-blur, 0) var(--elevation-modal-color, transparent); }
+.pv-dialog--sm { width: min(100%, var(--layout-modal-width-sm, 420px)); }
+.pv-drawer { width: min(100%, var(--layout-drawer-width, 480px)); height: 100%; background: var(--color-bg-elevated, var(--pv-miss)); padding: var(--space-card, 16px); display: grid; gap: var(--space-stack, 16px); align-content: start; box-shadow: 0 var(--elevation-modal-y, 0) var(--elevation-modal-blur, 0) var(--elevation-modal-color, transparent); }
+.pv-popover { background: var(--color-bg-elevated, var(--pv-miss)); border: var(--border-width-default, 1px) solid var(--color-border-default, var(--pv-miss)); border-radius: var(--pv-radius-card); padding: var(--spacing-2, 8px); display: grid; gap: 2px; width: 200px; box-shadow: 0 var(--elevation-popover-y, 0) var(--elevation-popover-blur, 0) var(--elevation-popover-color, transparent); }
+.pv-popover a { display: block; padding: var(--spacing-2, 8px) var(--spacing-3, 12px); border-radius: var(--pv-radius-control); }
+.pv-popover a:hover { background: var(--color-bg-hover, var(--pv-miss)); }
+.pv-popover a.is-danger { color: var(--color-text-danger, var(--pv-miss)); }
+.pv-tooltip { display: inline-block; background: var(--color-bg-inverse, var(--pv-miss)); color: var(--color-text-inverse, var(--pv-miss)); padding: var(--spacing-1, 4px) var(--spacing-2, 8px); border-radius: var(--pv-radius-control); font-size: var(--text-small-size, 0.875rem); }
+.pv-menu-overlay { position: fixed; inset: 0; background: var(--color-bg-overlay, var(--pv-miss)); z-index: var(--layer-modal, 1000); display: grid; align-content: center; justify-items: center; gap: var(--space-stack, 16px); }
+.pv-menu-overlay a { font-family: var(--font-family-heading, var(--font-family-body, inherit)); font-size: var(--text-display-size, 2.5rem); line-height: var(--text-display-line-height, 1.1); color: var(--color-text-on-overlay, var(--pv-miss)); font-weight: var(--text-weight-brand, 700); }

package/design-system/preview/preview.local.css

@@ -0,0 +1,17 @@
+:root { --pv-radius-control: var(--radius-md, 0px); --pv-radius-card: var(--radius-lg, 0px); }
+
+/* Morganite 配方在虚拟项目里的对应（重新渲染时用 render-preview --local-css 传入本段）：
+   卡片标题 = 14px 深色标题（color.text.card-title）；统计卡标题 = 字距小标题；顶栏搜索 = 胶囊；勾选框未选中描 border.strong（填充式下 border.input 透明）；
+   侧栏当前项只用底块、不加指示条；标签页选中文字用 color.text.selected；输入框聚焦只换边线、不加外环；
+   表格选中行与悬停同色；分页当前页金底白字（生成器默认的白块在本系统是白底白卡） */
+.pv-card .pv-h3 { font-size: var(--text-body-size); font-weight: var(--text-weight-strong); color: var(--color-text-card-title); }
+.pv-stat > .pv-secondary.pv-small { font-size: var(--text-small-size); font-weight: var(--text-weight-strong); color: var(--color-text-secondary); letter-spacing: var(--text-tracking-caps); text-transform: uppercase; }
+.pv-search { border-radius: var(--radius-full); }
+.pv-check i { border-color: var(--color-border-strong); }
+.pv-check i.is-on { border-color: var(--color-action-primary); }
+.pv-sidebar a.is-current { box-shadow: none; }
+.pv-tabs a.is-current { color: var(--color-text-selected); }
+.pv-input:focus, .pv-input:focus-visible { outline: none; }
+.pv-table tr.is-selected td { background: var(--color-bg-hover); }
+.pv-pagination a.is-current { background: var(--color-action-primary); color: var(--color-text-on-primary); font-weight: var(--text-weight-strong); }
+

package/design-system/preview/shell.html

@@ -0,0 +1,50 @@
+<!doctype html>
+<html lang="zh-CN">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>Morganite 玫瑰金 · 工作台 · 虚拟项目</title>
+<link rel="stylesheet" href="../dist/index.css">
+<link rel="stylesheet" href="../../bridge/base.css">
+<link rel="stylesheet" href="preview.css">
+<link rel="stylesheet" href="preview.local.css">
+</head>
+<body>
+<div class="pv-shell">
+  <aside class="pv-sidebar">
+    <span class="pv-logo">Morganite 玫瑰金</span>
+    <nav class="pv-stack pv-stack--tight">
+      <span class="pv-group">工作台</span>
+      <a class="is-current" href="#"><i></i>产品</a><a href="#"><i></i>案例</a><a href="#"><i></i>关于</a>
+      <span class="pv-group">管理</span>
+      <a href="#"><i></i>联系</a><a href="#"><i></i>设置</a>
+    </nav>
+  </aside>
+  <div class="pv-main">
+    <header class="pv-topbar"><div class="pv-row"><span class="pv-secondary pv-small">产品 / 概览</span></div><div class="pv-row"><input class="pv-input pv-search pv-hide-mobile" placeholder="搜索…"><button class="pv-btn pv-btn--primary pv-btn--sm" type="button">立即开始</button><span class="pv-avatar"></span></div></header>
+    <main class="pv-content">
+      <div class="pv-toolbar"><h1 class="pv-h2">Morganite 玫瑰金 让每一次决定都有来处</h1><nav class="pv-tabs" style="border: 0"><a class="is-current" href="#">今日</a><a href="#">本周</a><a href="#">本月</a></nav></div>
+      <div class="pv-grid pv-grid--4">
+        <div class="pv-card pv-stat"><span class="pv-secondary pv-small">板块一</span><b class="pv-numeric">12,480</b><span class="pv-small" style="color: var(--color-data-increase, var(--color-status-success))">▲ 8.2%</span></div>
+        <div class="pv-card pv-stat"><span class="pv-secondary pv-small">板块二</span><b class="pv-numeric">96.4%</b><span class="pv-small" style="color: var(--color-data-increase, var(--color-status-success))">▲ 0.6%</span></div>
+        <div class="pv-card pv-stat"><span class="pv-secondary pv-small">板块三</span><b class="pv-numeric">37</b><span class="pv-small" style="color: var(--color-data-decrease, var(--color-status-error))">▼ 3.1%</span></div>
+        <div class="pv-card pv-stat"><span class="pv-secondary pv-small">图表色</span><div class="pv-row" style="align-items: flex-end; height: 48px; gap: 4px"><i style="flex:1;height:60%;background:var(--color-chart-1, var(--pv-miss))"></i><i style="flex:1;height:90%;background:var(--color-chart-2, var(--pv-miss))"></i><i style="flex:1;height:40%;background:var(--color-chart-3, var(--pv-miss))"></i><i style="flex:1;height:70%;background:var(--color-chart-4, var(--pv-miss))"></i><i style="flex:1;height:30%;background:var(--color-chart-5, var(--pv-miss))"></i><i style="flex:1;height:55%;background:var(--color-chart-6, var(--pv-miss))"></i></div></div>
+      </div>
+      <div class="pv-card pv-card--flush">
+        <div class="pv-toolbar" style="padding: var(--space-card, 16px)"><h2 class="pv-h3">产品</h2><div class="pv-row"><input class="pv-input" style="width: 180px" placeholder="筛选"><button class="pv-btn pv-btn--secondary pv-btn--sm" type="button">导出</button></div></div>
+        <table class="pv-table">
+          <thead><tr><th style="width: 40px"><span class="pv-check"><i></i></span></th><th>名称</th><th>负责人</th><th>状态</th><th class="pv-numeric" style="text-align: right">金额</th><th>更新时间</th><th></th></tr></thead>
+          <tbody>
+            <tr class="is-selected"><td><span class="pv-check"><i class="is-on"></i></span></td><td><div class="pv-strong">板块一</div><div class="pv-muted">副行说明</div></td><td>王小明</td><td><span class="pv-badge pv-badge--success">已通过</span></td><td class="pv-numeric" style="text-align: right">12,800.00</td><td class="pv-secondary">今天 10:24</td><td><a class="pv-link pv-small" href="#">编辑</a></td></tr>
+            <tr><td><span class="pv-check"><i></i></span></td><td><div class="pv-strong">板块二</div><div class="pv-muted">副行说明</div></td><td>李华</td><td><span class="pv-badge pv-badge--warning">待审批</span></td><td class="pv-numeric" style="text-align: right">3,200.00</td><td class="pv-secondary">昨天</td><td><a class="pv-link pv-small" href="#">编辑</a></td></tr>
+            <tr><td><span class="pv-check"><i></i></span></td><td><div class="pv-strong">板块三</div><div class="pv-muted">副行说明</div></td><td>张三</td><td><span class="pv-badge pv-badge--error">已驳回</span></td><td class="pv-numeric" style="text-align: right">980.00</td><td class="pv-secondary">3 天前</td><td><a class="pv-link pv-small" href="#">编辑</a></td></tr>
+            <tr><td><span class="pv-check"><i></i></span></td><td><div class="pv-strong">第四条</div><div class="pv-muted">副行说明</div></td><td>陈静</td><td><span class="pv-badge pv-badge--info">提示</span></td><td class="pv-numeric" style="text-align: right">45,000.00</td><td class="pv-secondary">上周</td><td><a class="pv-link pv-small" href="#">编辑</a></td></tr>
+          </tbody>
+        </table>
+        <div class="pv-toolbar" style="padding: var(--space-card, 16px)"><span class="pv-secondary pv-small">第 1–4 条，共 128 条</span><nav class="pv-pagination"><a href="#">‹</a><a class="is-current" href="#">1</a><a href="#">2</a><a href="#">3</a><a href="#">›</a></nav></div>
+      </div>
+    </main>
+  </div>
+</div>
+</body>
+</html>

package/design-system/scope-map.json

@@ -0,0 +1,4 @@
+{
+  "scopes": [],
+  "version": 1
+}

package/design-system/style-dictionary.config.mjs

@@ -0,0 +1,172 @@
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+
+const root = path.dirname(fileURLToPath(import.meta.url));
+
+function environmentPathList(name, fallback) {
+  const raw = process.env[name];
+  if (!raw) {
+    return fallback;
+  }
+  let parsed;
+  try {
+    parsed = JSON.parse(raw);
+  } catch (error) {
+    throw new Error(`${name} must be a JSON array of absolute token globs: ${error.message}`);
+  }
+  if (!Array.isArray(parsed) || parsed.some((entry) => typeof entry !== "string" || !path.isAbsolute(entry))) {
+    throw new Error(`${name} must be a JSON array of absolute token globs`);
+  }
+  return parsed;
+}
+
+function outputDestination() {
+  const destination = process.env.DS_SCOPE_DESTINATION ?? "tokens.css";
+  if (path.isAbsolute(destination) || destination.split(/[\\/]/).includes("..")) {
+    throw new Error("DS_SCOPE_DESTINATION must be a relative CSS file path");
+  }
+  if (!destination.endsWith(".css")) {
+    throw new Error("DS_SCOPE_DESTINATION must end in .css");
+  }
+  return destination;
+}
+
+function mediaQuery() {
+  const query = process.env.DS_SCOPE_MEDIA;
+  if (!query) {
+    return null;
+  }
+  if (!/^\(prefers-color-scheme: (?:dark|light)\)$/.test(query)) {
+    throw new Error("DS_SCOPE_MEDIA must be a supported prefers-color-scheme query");
+  }
+  return query;
+}
+
+function collectReferences(value) {
+  if (typeof value !== "string") {
+    return [];
+  }
+  return [...value.matchAll(/\{([^{}]+)\}/g)].map((match) => match[1]);
+}
+
+function sourceFirst(tokens) {
+  const sourceTokens = tokens.filter((token) => token.isSource);
+  const byPath = new Map(sourceTokens.map((token) => [token.path.join("."), token]));
+  const sorted = [];
+  const state = new Map();
+
+  function visit(token) {
+    const tokenPath = token.path.join(".");
+    const current = state.get(tokenPath) ?? "unseen";
+    if (current === "visiting" || current === "done") {
+      return;
+    }
+    state.set(tokenPath, "visiting");
+    const original = token.original.$value ?? token.original.value;
+    for (const reference of collectReferences(original).sort((left, right) => left.localeCompare(right))) {
+      const dependency = byPath.get(reference);
+      if (dependency) {
+        visit(dependency);
+      }
+    }
+    state.set(tokenPath, "done");
+    sorted.push(token);
+  }
+
+  for (const token of [...sourceTokens].sort((left, right) => left.name.localeCompare(right.name))) {
+    visit(token);
+  }
+  return sorted;
+}
+
+function cssValue(token, namesByPath) {
+  const original = token.original.$value ?? token.original.value;
+  if (typeof original === "string" && original.includes("{")) {
+    return original.replace(/\{([^{}]+)\}/g, (match, reference) => {
+      const target = namesByPath.get(reference);
+      return target ? `var(--${target.name})` : match;
+    });
+  }
+  if (original && typeof original === "object" && !Array.isArray(original) && typeof original.hex === "string") {
+    return original.hex.trim();
+  }
+
+  const value = token.$value ?? token.value;
+  const type = token.$type ?? token.type ?? token.original.$type ?? token.original.type;
+  if (value && typeof value === "object" && !Array.isArray(value)
+    && (type === "dimension" || type === "duration")
+    && typeof value.value === "number" && typeof value.unit === "string") {
+    return `${value.value}${value.unit}`;
+  }
+  if (Array.isArray(value)) {
+    return type === "cubicBezier" ? `cubic-bezier(${value.join(", ")})` : value.join(", ");
+  }
+  if (value && typeof value === "object") {
+    throw new Error(`CSS profile did not transform ${token.path.join(".")} into a CSS value`);
+  }
+  return String(value);
+}
+
+/**
+ * Style Dictionary receives all ancestor tokens as `include` and only the
+ * current layer as `source`. The formatter therefore resolves aliases from the
+ * complete dictionary but writes only `isSource` delta tokens.
+ */
+async function scopeDeltaCss({ dictionary, options }) {
+  const selector = options.selector ?? ":root";
+  const allTokens = dictionary.unfilteredAllTokens ?? dictionary.allTokens;
+  const namesByPath = new Map(allTokens.map((token) => [token.path.join("."), token]));
+  const lines = sourceFirst(dictionary.allTokens)
+    .map((token) => `  --${token.name}: ${cssValue(token, namesByPath)};`);
+  if (lines.length === 0) {
+    return "";
+  }
+  const body = `${selector} {\n${lines.join("\n")}\n}\n`;
+  if (!options.media) {
+    return body;
+  }
+  return `@media ${options.media} {\n${body.replace(/^/gm, "  ").replace(/\n*$/, "")}\n}\n`;
+}
+
+const outputRoot = process.env.DS_OUTPUT_DIR
+  ? path.resolve(process.env.DS_OUTPUT_DIR)
+  : path.join(root, "dist");
+const source = environmentPathList(
+  "DS_SCOPE_SOURCE",
+  [path.join(root, "tokens", "**", "*.tokens.json")]
+);
+const include = environmentPathList("DS_SCOPE_INCLUDE", []);
+const media = mediaQuery();
+
+export default {
+  include,
+  log: {
+    warnings: "error"
+  },
+  source,
+  hooks: {
+    formats: {
+      "design-system-steward/scope-delta": scopeDeltaCss
+    }
+  },
+  platforms: {
+    css: {
+      transformGroup: "css",
+      buildPath: `${outputRoot}${path.sep}`,
+      log: {
+        warnings: "error"
+      },
+      files: [
+        {
+          destination: outputDestination(),
+          format: "design-system-steward/scope-delta",
+          options: {
+            media,
+            selector: process.env.DS_SCOPE_SELECTOR ?? ":root",
+            showFileHeader: false
+          }
+        }
+      ]
+    }
+  }
+};

package/design-system/theme-map.json

@@ -0,0 +1,16 @@
+{
+  "activation": {
+    "kind": "class"
+  },
+  "defaultTheme": "light",
+  "themes": [
+    {
+      "id": "dark",
+      "reason": "取证时手动打开 Pro 设置抽屉的「暗色风格（实验功能）」拿到另一模式；delta 64 条，页面底 / 表面 / 文字 / 边线 / 悬停来自实测，其余按 antd 暗色算法推断、2026-10-09 用户已确认，品牌相关的按用户决定。",
+      "runtimeOwner": "接入项目：在 <html> 上切换 dark 类；来源站 Ant Design Pro 通过设置抽屉切换，设置只存在内存里。",
+      "source": "https://preview.pro.ant.design/dashboard/analysis（toggle-dark）",
+      "status": "active"
+    }
+  ],
+  "version": 1
+}

package/design-system/themes/dark/THEME.md

@@ -0,0 +1,29 @@
+# Theme：dark
+
+> Core Token 是确认的默认 Theme。本文件只记录当前 Theme 相对 Core 的意图、适用范围和运行时约束；具体值只写在本目录 `tokens/*.tokens.json`，不要复制 Core 或手改生成 CSS。
+
+## 映射
+
+- 默认 Theme：`light`
+- 当前 Theme：`dark`
+- 状态：`active`
+- 激活方式：`:root.dark`
+- 权威来源：`https://preview.pro.ant.design/dashboard/analysis（toggle-dark）`
+- 运行时所有者：接入项目——在 `<html>` 上切换 `dark` 类；来源站 Ant Design Pro 通过设置抽屉切换，且设置只存在内存里。
+- 设计理由：取证时手动打开 Pro 设置抽屉的「暗色风格（实验功能）」拿到另一模式；delta 64 条，页面底 / 表面 / 文字 / 边线 / 悬停来自实测，其余按 antd 暗色算法推断、2026-10-09 用户已确认，品牌相关的按用户决定。
+
+## 相对 Core 的设计意图
+
+- delta 覆写 66 条（取证时 64 条，之后按用户决定加了图表提示气泡与卡片标题），每条的来源写在 `tokens/semantic.tokens.json` 的 `$description` 里。下面这些「通常也随模式变化」的角色逐条确认过，**保持 Core 值**：`color.bg.overlay`（antd 暗色遮罩与亮色同值）、`color.text.inverse`（反色底在暗色换成深灰，白字不变）、`color.text.brand` / `color.border.current` / `color.icon.brand` / `color.chart.1`（品牌金在深底上对比更高）、`color.border.input`（填充式，亮暗都不画边线）、`elevation.card.color` / `elevation.popover.color` / `elevation.modal.color`（沿用 antd：暗色仍是黑色阴影，深底上几乎看不见，层次改靠浮层表面亮一档）。
+- 品牌色 / 主按钮保持 Core 值：金底白字亮暗一致，品牌色一个值都不动。
+- 浮层表面（`color.bg.elevated`）比 `color.bg.surface` 亮一档，页面底最深；三层顺序与 antd 暗色算法一致。卡片与亮色一样不投影，靠底色差分层；暗色卡片边线保持 antd 暗色分隔线那一档，不跟亮色改成半透明黑。
+- 状态色文字换成更亮的一档，浅底改为 antd 暗色色板的预混实色，胶囊对比都在底线以上。
+- 侧栏当前项换成金色暗阶、文字换成亮金；表格选中行与悬停同色（白 8%），再悬停用白 12%（亮色当前项是主色底块配白字，暗色按用户要求保持金色暗底配亮金字）；筹码底取暗色筹码字色亮金的 10%（与亮色「字色同色 10%」同一规则，用户 2026-10-09 确认）；图表的「深灰 / 浅灰」两个分类色在深底上互换明暗，绿与涨跌色换亮一档；卡片标题取暗色正文色（与亮色的 #212121 同一层级，用户 2026-10-13 确认）。
+- 字体、尺寸、间距、线宽、动效等结构层 Token 不随 Theme 变化，本 Theme 不覆写它们。
+- 优先覆写 Core Semantic token；Component token 仅用于已批准的组件例外。
+- 不覆写 Core Primitive，也不在此处创建主题开关、持久化或系统偏好逻辑。
+
+## 与 Scope 的关系
+
+- Theme 是同一界面的模式，Scope 是页面边界；二者不自动组合。
+- 若当前 Theme 与某个 Scope 需要同时覆写同一 Semantic，先提出提案并获得确认；不要添加猜测性 CSS。