@mar7th/march7th-ui 1.0.0

package/demo/march7th-ui.css

@@ -0,0 +1,431 @@
+/*
+ * March7th UI Styles
+ * Base styles and utility/component classes powered by march7th-tokens.css.
+ * Load after march7th-tokens.css.
+ * Usage:
+ *   <link rel="stylesheet" href="/theme/march7th-tokens.css">
+ *   <link rel="stylesheet" href="/theme/march7th-ui.css">
+ */
+
+:root.m7-theme-transitioning *,
+:root.m7-theme-transitioning *::before,
+:root.m7-theme-transitioning *::after {
+  transition: none !important;
+}
+
+.m7-theme {
+  background: var(--m7-page-bg); /* 应用页面背景色 */
+  color: var(--m7-text); /* 应用默认正文文字色 */
+  transition:
+    background-color var(--m7-duration-fast) var(--m7-ease-standard),
+    color var(--m7-duration-fast) var(--m7-ease-standard);
+}
+
+.m7-card {
+  background: var(--m7-card-bg); /* 应用卡片背景色 */
+  border-radius: var(--m7-radius-large);
+  box-shadow: var(--m7-shadow-sm);
+  color: var(--m7-text-regular); /* 应用常规文本色 */
+  overflow: hidden;
+  transition:
+    background-color var(--m7-duration-fast) var(--m7-ease-standard),
+    color var(--m7-duration-fast) var(--m7-ease-standard),
+    box-shadow var(--m7-duration-fast) var(--m7-ease-standard);
+}
+
+.m7-card-transparent {
+  background: var(--m7-card-bg-transparent); /* 应用半透明卡片背景色 */
+  backdrop-filter: blur(8px);
+  border-radius: var(--m7-radius-large);
+  box-shadow: var(--m7-shadow-sm);
+  overflow: hidden;
+}
+
+.m7-float-panel {
+  background: var(--m7-float-panel-bg); /* 应用浮动面板背景色 */
+  border: 1px solid var(--m7-line-divider); /* 应用轻量分割线/边框颜色 */
+  border-radius: var(--m7-radius-large);
+  box-shadow: var(--m7-shadow-xl);
+  color: var(--m7-text-regular); /* 应用常规文本色 */
+  overflow: hidden;
+}
+
+.m7-btn,
+.m7-btn-regular {
+  align-items: center;
+  background: var(--m7-btn-regular-bg); /* 应用常规按钮背景色 */
+  border: 0; /* 无边框颜色 */
+  border-radius: 0.75rem;
+  color: var(--m7-btn-content); /* 应用常规按钮内容颜色 */
+  cursor: pointer;
+  display: inline-flex;
+  font: inherit;
+  gap: 0.4em;
+  justify-content: center;
+  min-height: 2.5rem;
+  padding: 0.55rem 0.9rem;
+  text-decoration: none;
+  transition:
+    background-color var(--m7-duration-fast) var(--m7-ease-standard),
+    color var(--m7-duration-fast) var(--m7-ease-standard),
+    transform var(--m7-duration-fast) var(--m7-ease-standard);
+}
+
+.m7-btn:hover,
+.m7-btn-regular:hover {
+  background: var(--m7-btn-regular-bg-hover); /* 应用常规按钮悬停背景色 */
+}
+
+.m7-btn:active,
+.m7-btn-regular:active {
+  background: var(--m7-btn-regular-bg-active); /* 应用常规按钮按下背景色 */
+  transform: scale(0.97);
+}
+
+.m7-btn-plain {
+  align-items: center;
+  background: transparent; /* 透明背景，不额外铺色 */
+  border: 0; /* 无边框颜色 */
+  border-radius: 0.75rem;
+  color: var(--m7-text-regular); /* 应用常规文本色 */
+  cursor: pointer;
+  display: inline-flex;
+  font: inherit;
+  gap: 0.4em;
+  justify-content: center;
+  min-height: 2.5rem;
+  padding: 0.55rem 0.75rem;
+  text-decoration: none;
+  transition:
+    background-color var(--m7-duration-fast) var(--m7-ease-standard),
+    color var(--m7-duration-fast) var(--m7-ease-standard),
+    transform var(--m7-duration-fast) var(--m7-ease-standard);
+}
+
+.m7-btn-plain:hover {
+  background: var(--m7-btn-plain-bg-hover); /* 应用朴素按钮悬停/当前背景色 */
+  color: var(--m7-primary); /* 应用主品牌色 */
+}
+
+.m7-btn-plain:active {
+  background: var(--m7-btn-plain-bg-active); /* 应用朴素按钮按下背景色 */
+  transform: scale(0.97);
+}
+
+.m7-current,
+.m7-current-theme-btn {
+  background: var(--m7-btn-plain-bg-hover); /* 应用朴素按钮悬停/当前背景色 */
+  color: var(--m7-primary); /* 应用主品牌色 */
+}
+
+.m7-link {
+  border-radius: 0.375rem;
+  color: inherit; /* 继承父级文字颜色 */
+  margin: -0.15em;
+  padding: 0.15em;
+  text-decoration-line: underline;
+  text-decoration-style: dashed;
+  text-decoration-thickness: 2px;
+  text-decoration-color: var(--m7-link-underline); /* 应用链接下划线颜色 */
+  text-underline-offset: 0.25rem;
+  transition:
+    background-color var(--m7-duration-fast) var(--m7-ease-standard),
+    color var(--m7-duration-fast) var(--m7-ease-standard),
+    text-decoration-color var(--m7-duration-fast) var(--m7-ease-standard);
+}
+
+.m7-link:hover {
+  background: var(--m7-link-hover); /* 应用链接悬停背景色 */
+  color: var(--m7-primary); /* 应用主品牌色 */
+  text-decoration-color: var(--m7-link-hover); /* 应用链接悬停装饰色 */
+}
+
+.m7-link:active {
+  background: var(--m7-link-active); /* 应用链接按下背景色 */
+  text-decoration-color: var(--m7-link-active); /* 应用链接按下装饰色 */
+}
+
+.m7-inline-code {
+  background: var(--m7-inline-code-bg); /* 应用行内代码背景色 */
+  border-radius: 0.35rem;
+  color: var(--m7-inline-code-color); /* 应用行内代码文字色 */
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+  font-size: 0.9em;
+  padding: 0.12em 0.35em;
+}
+
+.m7-codeblock {
+  background: var(--m7-codeblock-bg); /* 应用代码块背景色 */
+  border-radius: 0.75rem;
+  color: rgba(255, 255, 255, 0.88); /* 代码块默认文字颜色 */
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+  line-height: 1.6;
+  overflow: auto;
+  padding: 1rem;
+}
+
+.m7-text-strong {
+  color: var(--m7-text-strong); /* 应用强文本颜色 */
+}
+
+.m7-text-regular {
+  color: var(--m7-text-regular); /* 应用常规文本色 */
+}
+
+.m7-text-muted {
+  color: var(--m7-text-muted); /* 应用弱化文本颜色 */
+}
+
+.m7-text-subtle {
+  color: var(--m7-text-subtle); /* 应用极弱文本颜色 */
+}
+
+.m7-divider {
+  border-color: var(--m7-line-divider); /* 应用分割线颜色 */
+}
+
+.m7-theme ::selection,
+.m7-card ::selection,
+.m7-float-panel ::selection {
+  background: var(--m7-selection-bg); /* 应用文本选中背景色 */
+}
+
+.m7-scrollbar {
+  scrollbar-color: var(--m7-scrollbar-bg) transparent; /* 应用 Firefox 滚动条颜色与透明轨道 */
+  scrollbar-width: thin;
+}
+
+.m7-scrollbar::-webkit-scrollbar {
+  height: 8px;
+  width: 8px;
+}
+
+.m7-scrollbar::-webkit-scrollbar-thumb {
+  background: var(--m7-scrollbar-bg); /* 应用滚动条默认颜色 */
+  border-radius: 999px;
+}
+
+.m7-scrollbar::-webkit-scrollbar-thumb:hover {
+  background: var(--m7-scrollbar-bg-hover); /* 应用滚动条悬停颜色 */
+}
+
+.m7-scrollbar::-webkit-scrollbar-thumb:active {
+  background: var(--m7-scrollbar-bg-active); /* 应用滚动条按下颜色 */
+}
+
+.m7-hue-slider {
+  appearance: none;
+  background: var(--m7-color-selection-bar); /* 应用主题色选择条渐变 */
+  border-radius: 0.375rem;
+  height: 1.5rem;
+  width: 100%;
+}
+
+.m7-hue-slider::-webkit-slider-thumb {
+  appearance: none;
+  background: rgba(255, 255, 255, 0.75); /* 滑块手柄半透明白色 */
+  border: 0; /* 无边框颜色 */
+  border-radius: 0.125rem;
+  cursor: pointer;
+  height: 1rem;
+  width: 0.5rem;
+}
+
+.m7-hue-slider::-moz-range-thumb {
+  background: rgba(255, 255, 255, 0.75); /* 滑块手柄半透明白色 */
+  border: 0; /* 无边框颜色 */
+  border-radius: 0.125rem;
+  cursor: pointer;
+  height: 1rem;
+  width: 0.5rem;
+}
+
+.m7-container {
+  width: min(var(--m7-container-width), calc(100% - var(--m7-spacing-3xl)));
+  margin-inline: auto;
+}
+
+.m7-section { padding-block: var(--m7-spacing-5xl); }
+.m7-stack { display: flex; flex-direction: column; gap: var(--m7-widget-gap); }
+.m7-cluster { display: flex; flex-wrap: wrap; gap: var(--m7-spacing-sm); align-items: center; }
+.m7-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); gap: var(--m7-widget-gap); }
+.m7-sidebar-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--m7-widget-gap); }
+
+@media (min-width: 768px) {
+  .m7-sidebar-layout { grid-template-columns: minmax(0, 1fr) var(--m7-sidebar-width); }
+}
+
+.m7-surface {
+  background: var(--m7-card-bg-transparent); /* 通用半透明表面 */
+  border: 1px solid var(--m7-line-divider); /* 通用表面边框 */
+  border-radius: var(--m7-radius-2xl);
+  box-shadow: var(--m7-shadow-md);
+  color: var(--m7-text-regular); /* 表面默认文字颜色 */
+  backdrop-filter: blur(var(--m7-blur-md));
+}
+
+.m7-navbar {
+  position: sticky;
+  top: 0;
+  z-index: var(--m7-z-sticky);
+  background: color-mix(in oklch, var(--m7-card-bg) 78%, transparent); /* 导航栏半透明背景 */
+  border-bottom: 1px solid var(--m7-line-divider); /* 导航栏底部分割线 */
+  backdrop-filter: blur(var(--m7-blur-2xl));
+  box-shadow: var(--m7-shadow-sm);
+}
+
+.m7-hero {
+  position: relative;
+  overflow: hidden;
+  padding: clamp(var(--m7-spacing-4xl), 8vw, 7rem) var(--m7-spacing-lg);
+  border-radius: var(--m7-radius-3xl);
+  background:
+    radial-gradient(circle at 20% 15%, color-mix(in oklch, var(--m7-accent-pink) 22%, transparent), transparent 34%),
+    radial-gradient(circle at 80% 20%, color-mix(in oklch, var(--m7-primary) 24%, transparent), transparent 36%),
+    var(--m7-card-bg-transparent); /* 英雄区渐变表面 */
+  border: 1px solid var(--m7-line-divider); /* 英雄区边框 */
+  backdrop-filter: blur(var(--m7-blur-md));
+}
+
+.m7-input,
+.m7-select,
+.m7-textarea {
+  width: 100%;
+  min-height: 2.75rem;
+  padding: 0 var(--m7-spacing-lg);
+  border: 1px solid var(--m7-line-divider); /* 表单控件边框 */
+  border-radius: var(--m7-radius-xl);
+  outline: none;
+  background: var(--m7-btn-regular-bg); /* 表单控件背景 */
+  color: var(--m7-text-strong); /* 表单控件文字 */
+  font: inherit;
+  transition: border-color var(--m7-duration-fast) var(--m7-ease-standard), box-shadow var(--m7-duration-fast) var(--m7-ease-standard), background-color var(--m7-duration-fast) var(--m7-ease-standard);
+}
+
+.m7-textarea { min-height: 7rem; padding-block: var(--m7-spacing-md); resize: vertical; }
+.m7-input:focus,
+.m7-select:focus,
+.m7-textarea:focus {
+  border-color: var(--m7-primary); /* 表单聚焦边框 */
+  box-shadow: 0 0 0 4px color-mix(in oklch, var(--m7-primary) 18%, transparent); /* 表单聚焦光晕 */
+}
+
+.m7-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--m7-spacing-xs);
+  padding: 0.25rem 0.6rem;
+  border: 1px solid var(--m7-line-divider); /* 徽章边框 */
+  border-radius: var(--m7-radius-full);
+  background: var(--m7-btn-regular-bg); /* 徽章背景 */
+  color: var(--m7-content-meta); /* 徽章文字 */
+  font-size: 0.8125rem;
+  font-weight: 600;
+}
+
+.m7-scale-hover { transition: transform var(--m7-duration-fast) var(--m7-ease-standard); }
+.m7-scale-hover:hover { transform: scale(var(--m7-scale-105)); }
+.m7-pressable { transition: transform var(--m7-duration-fast) var(--m7-ease-standard); }
+.m7-pressable:active { transform: scale(var(--m7-scale-95)); }
+.m7-gpu { transform: var(--m7-gpu-transform); backface-visibility: hidden; }
+
+/* ===== March7th Base Styles ===== */
+.m7-theme,
+.m7-theme * ,
+.m7-theme *::before,
+.m7-theme *::after {
+  box-sizing: border-box;
+}
+
+.m7-theme {
+  min-height: 100vh;
+  margin: 0;
+  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
+  font-size: 16px;
+  line-height: 1.65;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.m7-theme :where(h1, h2, h3, h4, h5, h6) {
+  margin: 0 0 var(--m7-spacing-md);
+  color: var(--m7-text-strong); /* 标题文字颜色 */
+  font-weight: 750;
+  line-height: 1.2;
+  letter-spacing: -0.025em;
+}
+
+.m7-theme :where(h1) { font-size: clamp(2rem, 5vw, 4rem); }
+.m7-theme :where(h2) { font-size: clamp(1.5rem, 3vw, 2.25rem); }
+.m7-theme :where(h3) { font-size: clamp(1.25rem, 2vw, 1.5rem); }
+.m7-theme :where(p) { margin: 0 0 var(--m7-spacing-lg); color: var(--m7-text-regular); /* 段落文字颜色 */ }
+.m7-theme :where(small) { color: var(--m7-text-muted); /* 小号辅助文字颜色 */ }
+.m7-theme :where(strong, b) { color: var(--m7-text-strong); /* 加粗强调文字颜色 */ }
+.m7-theme :where(hr) { height: 1px; margin: var(--m7-spacing-2xl) 0; border: 0; background: var(--m7-line-divider); /* 水平分割线颜色 */ }
+
+.m7-theme :where(a:not(.m7-btn):not(.m7-btn-regular):not(.m7-btn-plain):not(.m7-link)) {
+  color: var(--m7-primary); /* 默认链接文字颜色 */
+  text-decoration-color: var(--m7-link-underline); /* 默认链接下划线颜色 */
+  text-underline-offset: 0.2em;
+}
+
+.m7-theme :where(a:not(.m7-btn):not(.m7-btn-regular):not(.m7-btn-plain):not(.m7-link):hover) {
+  color: var(--m7-primary); /* 默认链接悬停文字颜色 */
+  text-decoration-color: var(--m7-primary); /* 默认链接悬停下划线颜色 */
+}
+
+.m7-theme :where(ul, ol) { margin: 0 0 var(--m7-spacing-lg); padding-left: 1.35em; color: var(--m7-text-regular); /* 列表文字颜色 */ }
+.m7-theme :where(li + li) { margin-top: var(--m7-spacing-xs); }
+.m7-theme :where(blockquote) {
+  margin: var(--m7-spacing-xl) 0;
+  padding: var(--m7-spacing-md) var(--m7-spacing-lg);
+  border-left: 4px solid var(--m7-primary); /* 引用块强调边框颜色 */
+  border-radius: var(--m7-radius-lg);
+  background: var(--m7-btn-regular-bg); /* 引用块背景色 */
+  color: var(--m7-text-regular); /* 引用块文字颜色 */
+}
+
+.m7-theme :where(img, svg, video, canvas) { max-width: 100%; height: auto; }
+.m7-theme :where(img, video) { border-radius: var(--m7-radius-xl); }
+.m7-theme :where(figure) { margin: 0 0 var(--m7-spacing-xl); }
+.m7-theme :where(figcaption) { margin-top: var(--m7-spacing-sm); color: var(--m7-text-muted); /* 媒体说明文字颜色 */ font-size: 0.875rem; text-align: center; }
+
+.m7-theme :where(table) {
+  width: 100%;
+  border-collapse: collapse;
+  border: 1px solid var(--m7-line-divider); /* 表格外边框颜色 */
+  border-radius: var(--m7-radius-xl);
+  overflow: hidden;
+}
+
+.m7-theme :where(th, td) {
+  padding: var(--m7-spacing-sm) var(--m7-spacing-md);
+  border-bottom: 1px solid var(--m7-line-divider); /* 表格行分割线颜色 */
+  text-align: left;
+}
+
+.m7-theme :where(th) {
+  background: var(--m7-btn-regular-bg); /* 表头背景色 */
+  color: var(--m7-text-strong); /* 表头文字颜色 */
+  font-weight: 700;
+}
+
+.m7-theme :where(td) { color: var(--m7-text-regular); /* 表格内容文字颜色 */ }
+.m7-theme :where(tr:last-child td) { border-bottom: 0; }
+.m7-theme :where(code:not(.m7-inline-code)) { background: var(--m7-inline-code-bg); color: var(--m7-inline-code-color); border-radius: var(--m7-radius-md); padding: 0.12em 0.35em; font-size: 0.9em; }
+.m7-theme :where(pre:not(.m7-codeblock)) { background: var(--m7-codeblock-bg); color: rgba(255, 255, 255, 0.88); border-radius: var(--m7-radius-xl); overflow: auto; padding: var(--m7-spacing-lg); }
+
+.m7-theme :where(button, input, select, textarea) { font: inherit; }
+.m7-theme :where(button) { cursor: pointer; }
+.m7-theme :where(:focus-visible) { outline: 3px solid color-mix(in oklch, var(--m7-primary) 50%, transparent); outline-offset: 3px; }
+
+.m7-prose { color: var(--m7-text-regular); }
+.m7-prose > * + * { margin-top: var(--m7-spacing-lg); }
+.m7-prose :where(p, ul, ol, blockquote, table, figure, pre) { margin-bottom: 0; }
+
+@media (max-width: 767px) {
+  .m7-theme { font-size: 15px; }
+  .m7-section { padding-block: var(--m7-spacing-3xl); }
+  .m7-container { width: min(var(--m7-container-width), calc(100% - var(--m7-spacing-xl))); }
+}

package/package.json

@@ -0,0 +1,13 @@
+{
+  "name": "@mar7th/march7th-ui",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "packageManager": "pnpm@10.12.4"
+}

package/src/index.html

@@ -0,0 +1,166 @@
+<!doctype html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>March7th Theme Preview</title>
+    <script>
+        (function(){var p="m7-theme",m=localStorage.getItem(p+":mode")||"system",h=localStorage.getItem(p+":hue")||"215",r=m==="system"?(matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light"):m;document.documentElement.style.setProperty("--m7-hue",h);document.documentElement.classList.toggle("m7-dark",r==="dark");document.documentElement.setAttribute("data-m7-mode",m);document.documentElement.setAttribute("data-m7-resolved-mode",r);})();
+    </script>
+    <link rel="stylesheet" href="../demo/march7th-tokens.css" />
+    <link rel="stylesheet" href="../demo/march7th-ui.css" />
+    <script src="../demo/march7th-theme.js" defer></script>
+    <script src="../demo/march7th-components.js" defer></script>
+    <style>
+        body{margin:0}.preview-bg{position:relative;isolation:isolate;min-height:100vh;overflow:hidden}.preview-bg:before,.preview-bg:after{position:fixed;z-index:-1;content:"";border-radius:999px;filter:blur(16px);pointer-events:none}.preview-bg:before{top:-12rem;right:-10rem;width:34rem;height:34rem;background:color-mix(in oklch,var(--m7-primary) 32%,transparent)}.preview-bg:after{bottom:-14rem;left:-9rem;width:34rem;height:34rem;background:color-mix(in oklch,var(--m7-accent-pink) 24%,transparent)}.preview-pad{padding:var(--m7-spacing-2xl) 0 var(--m7-spacing-5xl)}.preview-card{padding:var(--m7-spacing-xl)}.preview-hero-title{max-width:11em;font-size:clamp(2.4rem,7vw,5.2rem);line-height:.96;letter-spacing:-.07em}.preview-eyebrow{display:inline-flex;gap:.5rem;align-items:center;margin:0 0 1rem;padding:.35rem .7rem;border:1px solid var(--m7-line-divider);border-radius:var(--m7-radius-full);color:var(--m7-primary);font-size:.875rem;font-weight:700}.preview-dot{width:.55rem;height:.55rem;border-radius:var(--m7-radius-full);background:var(--m7-primary);box-shadow:0 0 1rem var(--m7-primary)}.preview-side{display:grid;gap:var(--m7-widget-gap)}.preview-row{display:flex;justify-content:space-between;gap:1rem;color:var(--m7-text-muted)}.preview-row strong{color:var(--m7-primary);font-size:1.3rem}.swatches{display:grid;grid-template-columns:repeat(6,1fr);gap:var(--m7-spacing-sm)}.swatch{min-height:4.5rem;padding:.6rem;border:1px solid var(--m7-line-divider);border-radius:var(--m7-radius-xl);font-size:.75rem;font-weight:800}.primary{background:var(--m7-primary);color:#fff}.pink{background:var(--m7-accent-pink);color:#fff}.purple{background:var(--m7-accent-purple);color:#fff}.ice{background:var(--m7-accent-ice);color:rgba(0,0,0,.7)}.cardbg{background:var(--m7-card-bg);color:var(--m7-text-regular)}.pagebg{background:var(--m7-page-bg);color:var(--m7-text-regular)}.admonitions{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--m7-spacing-sm)}.ad{padding:var(--m7-spacing-md);border:1px solid var(--m7-line-divider);border-radius:var(--m7-radius-xl);background:var(--m7-card-bg-transparent)}.ad strong{display:block}.ad span{color:var(--m7-text-muted);font-size:.85rem}.tip strong{color:var(--m7-admonitions-color-tip)}.note strong{color:var(--m7-admonitions-color-note)}.important strong{color:var(--m7-admonitions-color-important)}.warning strong{color:var(--m7-admonitions-color-warning)}.caution strong{color:var(--m7-admonitions-color-caution)}.preview-table-wrap{overflow:auto}.preview-img{width:100%;aspect-ratio:16/9;background:linear-gradient(135deg,color-mix(in oklch,var(--m7-primary) 28%,transparent),color-mix(in oklch,var(--m7-accent-pink) 22%,transparent)),var(--m7-btn-regular-bg)}@media(max-width:900px){.swatches{grid-template-columns:repeat(3,1fr)}.admonitions{grid-template-columns:1fr}}
+    </style>
+</head>
+<body class="m7-theme m7-scrollbar">
+<div class="preview-bg">
+    <nav class="m7-navbar">
+        <div class="m7-container m7-cluster" style="min-height:4.5rem;justify-content:space-between">
+            <strong class="m7-text-strong">March7th UI</strong>
+            <div class="m7-cluster">
+                <a class="m7-link" href="#colors">色彩</a>
+                <a class="m7-link" href="#base">基础样式</a>
+                <a class="m7-link" href="#components">组件</a>
+                <a class="m7-link" href="#custom-elements">自定义标签</a>
+            </div>
+        </div>
+    </nav>
+
+    <main class="m7-container preview-pad m7-stack">
+        <section class="m7-sidebar-layout">
+            <div class="m7-hero">
+                <p class="preview-eyebrow"><span class="preview-dot"></span>March7th Theme Preview</p>
+                <h1 class="preview-hero-title">三月七 UI 风格设计预览</h1>
+                <p class="m7-text-regular">这份预览展示了主题色、基础排版、常规 HTML 元素、表单、布局、组件与响应式效果。其它站点引入 CSS/JS 后即可复用这套轻量底层 UI 风格。</p>
+                <div class="m7-cluster">
+                    <button class="m7-btn m7-pressable" data-mode="light">浅色模式</button>
+                    <button class="m7-btn m7-pressable" data-mode="dark">暗色模式</button>
+                    <button class="m7-btn m7-pressable" data-mode="system">跟随系统</button>
+                    <button class="m7-btn-plain m7-pressable" id="resetTheme">重置</button>
+                </div>
+            </div>
+
+            <aside class="preview-side">
+                <section class="m7-card preview-card">
+                    <h2>主题色相</h2>
+                    <p class="preview-row"><span>当前 hue</span><strong id="hueValue">215</strong></p>
+                    <input id="hueSlider" class="m7-hue-slider" type="range" min="0" max="360" step="5" />
+                </section>
+                <section class="m7-card preview-card">
+                    <h2>模式状态</h2>
+                    <p class="preview-row"><span>存储模式</span><code id="storedMode">system</code></p>
+                    <p class="preview-row"><span>实际模式</span><code id="resolvedMode">light</code></p>
+                </section>
+            </aside>
+        </section>
+
+        <section id="colors" class="m7-card preview-card m7-stack">
+            <h2>核心色板</h2>
+            <div class="swatches">
+                <div class="swatch primary">primary</div><div class="swatch pink">accent pink</div><div class="swatch purple">accent purple</div><div class="swatch ice">accent ice</div><div class="swatch cardbg">card bg</div><div class="swatch pagebg">page bg</div>
+            </div>
+        </section>
+
+        <section id="base" class="m7-grid">
+            <article class="m7-card preview-card m7-prose">
+                <h2>基础排版</h2>
+                <p><strong>强文本</strong>、常规正文、<small>辅助文字</small> 和 <a href="#">默认链接</a> 都已提供底层样式。</p>
+                <blockquote>这是 blockquote 引用块，使用主题主色作为左侧强调边。</blockquote>
+                <ul><li>无序列表项目</li><li>自动使用正文颜色</li></ul>
+                <ol><li>有序列表项目</li><li>保持统一间距</li></ol>
+            </article>
+
+            <article class="m7-card preview-card m7-prose">
+                <h2>媒体与说明</h2>
+                <figure>
+                    <div class="preview-img"></div>
+                    <figcaption>图片、视频和说明文字的常规样式预览</figcaption>
+                </figure>
+                <hr />
+                <p>水平分割线、图片圆角、说明文字颜色都已纳入底层样式。</p>
+            </article>
+
+            <article class="m7-card preview-card m7-prose">
+                <h2>表单控件</h2>
+                <input class="m7-input" value="Lovely March7th!" />
+                <select class="m7-select"><option>March7th Blue</option><option>Memory Pink</option></select>
+                <textarea class="m7-textarea">Memory of Everything</textarea>
+                <button class="m7-btn">提交</button>
+            </article>
+        </section>
+
+        <section id="components" class="m7-grid">
+            <article class="m7-card preview-card">
+                <h2>按钮、徽章与链接</h2>
+                <p>这是一段包含 <a class="m7-link" href="#">主题链接</a> 的示例文本。</p>
+                <div class="m7-cluster"><button class="m7-btn">主要按钮</button><button class="m7-btn-plain">朴素按钮</button><span class="m7-badge">Badge</span><span class="m7-badge">OKLCH</span></div>
+            </article>
+
+            <article class="m7-card preview-card">
+                <h2>表格</h2>
+                <div class="preview-table-wrap"><table><thead><tr><th>变量</th><th>用途</th></tr></thead><tbody><tr><td><code>--m7-primary</code></td><td>主品牌色</td></tr><tr><td><code>--m7-card-bg</code></td><td>卡片背景</td></tr><tr><td><code>--m7-widget-gap</code></td><td>响应式组件间距</td></tr></tbody></table></div>
+            </article>
+
+            <article class="m7-surface preview-card">
+                <h2>Surface 表面</h2>
+                <p>半透明表面适合放在壁纸或渐变背景上，包含边框、阴影和毛玻璃。</p>
+                <div class="m7-cluster"><span class="m7-badge">Glass</span><span class="m7-badge">Responsive</span></div>
+            </article>
+        </section>
+
+        <section id="custom-elements" class="m7-card preview-card m7-stack">
+            <h2>自定义 HTML 标签组件</h2>
+            <p class="m7-text-regular">通过 <code>march7th-components.js</code> 注册 Web Components，不依赖框架，直接使用主题变量和 UI 类。</p>
+            <m7-marquee text="March7th Theme · Memory of Everything · Lovely March7th · To travel far away ·" speed="22s"></m7-marquee>
+            <div class="m7-grid">
+                <m7-carousel height="260px" items="Memory of Everything|Lovely March7th|Sleep Tight, the Night Dreams Long|Wake Up, the Tomorrow is Yours"></m7-carousel>
+                <div class="m7-stack">
+                    <m7-notice type="tip" title="自定义标签示例">这是 <code>&lt;m7-notice&gt;</code>，适合用于提示、公告和说明。</m7-notice>
+                    <m7-notice type="warning" title="无需框架">这些组件只依赖浏览器原生 Custom Elements，可以在任意站点中使用。</m7-notice>
+                    <m7-tags items="Web Components|Carousel|Marquee|Notice|Theme Tokens"></m7-tags>
+                </div>
+            </div>
+            <pre><code>&lt;script src="/theme/march7th-components.js" defer&gt;&lt;/script&gt;
+
+&lt;m7-marquee text="March7th Theme · Lovely March7th"&gt;&lt;/m7-marquee&gt;
+&lt;m7-carousel items="Memory|Lovely|Tomorrow"&gt;&lt;/m7-carousel&gt;
+&lt;m7-notice type="tip" title="提示"&gt;内容&lt;/m7-notice&gt;
+&lt;m7-tags items="OKLCH|Design Tokens|Web Components"&gt;&lt;/m7-tags&gt;</code></pre>
+        </section>
+
+        <section class="m7-card preview-card m7-stack">
+            <h2>语义提示色</h2>
+            <div class="admonitions"><div class="ad tip"><strong>Tip</strong><span>青色提示</span></div><div class="ad note"><strong>Note</strong><span>蓝色备注</span></div><div class="ad important"><strong>Important</strong><span>紫色重点</span></div><div class="ad warning"><strong>Warning</strong><span>黄色警告</span></div><div class="ad caution"><strong>Caution</strong><span>红色谨慎</span></div></div>
+        </section>
+
+        <section class="m7-grid">
+            <article class="m7-card preview-card" style="grid-column:span 2">
+                <h2>代码块</h2>
+                <pre><code>const theme = {
+  hue: March7thTheme.getHue(),
+  mode: March7thTheme.getMode(),
+  resolvedMode: March7thTheme.getResolvedMode(),
+};
+
+March7thTheme.setMode("system");
+March7thTheme.setHue(215);</code></pre>
+            </article>
+            <article class="m7-card-transparent preview-card">
+                <h2>透明卡片</h2>
+                <p><code>.m7-card-transparent</code> 适合放在壁纸、渐变和 Banner 上。</p>
+            </article>
+        </section>
+
+        <p class="m7-text-muted" style="text-align:center">预览文件：<code>/theme/march7th-theme-preview.html</code></p>
+    </main>
+</div>
+
+<script>
+    function sync(){if(!window.March7thTheme)return;var h=March7thTheme.getHue(),m=March7thTheme.getMode(),r=March7thTheme.getResolvedMode();hueValue.textContent=h;hueSlider.value=h;storedMode.textContent=m;resolvedMode.textContent=r;document.querySelectorAll("[data-mode]").forEach(function(b){b.classList.toggle("m7-current",b.dataset.mode===m)})}
+    addEventListener("march7th-theme-ready",sync);addEventListener("march7th-theme-change",sync);addEventListener("march7th-hue-change",sync);addEventListener("DOMContentLoaded",function(){document.querySelectorAll("[data-mode]").forEach(function(b){b.addEventListener("click",function(){March7thTheme.setMode(b.dataset.mode);sync()})});hueSlider.addEventListener("input",function(e){March7thTheme.setHue(e.target.value);sync()});resetTheme.addEventListener("click",function(){March7thTheme.reset();sync()});sync()});
+</script>
+</body>
+</html>