@mar7th/march7th-ui 1.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.idea/march7th-ui.iml +9 -0
- package/.idea/misc.xml +6 -0
- package/.idea/modules.xml +8 -0
- package/demo/march7th-components.js +204 -0
- package/demo/march7th-theme-preview.html +166 -0
- package/demo/march7th-theme.css +9 -0
- package/demo/march7th-theme.js +296 -0
- package/demo/march7th-tokens.css +327 -0
- package/demo/march7th-ui.css +431 -0
- package/package.json +13 -0
- package/src/index.html +166 -0
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
<?xml version="1.0" encoding="UTF-8"?>
|
|
2
|
+
<module type="JAVA_MODULE" version="4">
|
|
3
|
+
<component name="NewModuleRootManager" inherit-compiler-output="true">
|
|
4
|
+
<exclude-output />
|
|
5
|
+
<content url="file://$MODULE_DIR$" />
|
|
6
|
+
<orderEntry type="inheritedJdk" />
|
|
7
|
+
<orderEntry type="sourceFolder" forTests="false" />
|
|
8
|
+
</component>
|
|
9
|
+
</module>
|
package/.idea/misc.xml
ADDED
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
<?xml version="1.0" encoding="UTF-8"?>
|
|
2
|
+
<project version="4">
|
|
3
|
+
<component name="ProjectModuleManager">
|
|
4
|
+
<modules>
|
|
5
|
+
<module fileurl="file://$PROJECT_DIR$/.idea/march7th-ui.iml" filepath="$PROJECT_DIR$/.idea/march7th-ui.iml" />
|
|
6
|
+
</modules>
|
|
7
|
+
</component>
|
|
8
|
+
</project>
|
|
@@ -0,0 +1,204 @@
|
|
|
1
|
+
/*
|
|
2
|
+
* March7th Web Components
|
|
3
|
+
* Lightweight custom elements that consume march7th design tokens and UI styles.
|
|
4
|
+
* Load after march7th-tokens.css and march7th-ui.css.
|
|
5
|
+
*/
|
|
6
|
+
(function () {
|
|
7
|
+
"use strict";
|
|
8
|
+
|
|
9
|
+
function defineOnce(name, constructor) {
|
|
10
|
+
if (!customElements.get(name)) customElements.define(name, constructor);
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
function parseItems(element, fallback) {
|
|
14
|
+
var raw = element.getAttribute("items");
|
|
15
|
+
if (!raw) return fallback;
|
|
16
|
+
return raw.split("|").map(function (item) { return item.trim(); }).filter(Boolean);
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
defineOnce("m7-marquee", class extends HTMLElement {
|
|
20
|
+
connectedCallback() {
|
|
21
|
+
var text = this.getAttribute("text") || this.textContent.trim() || "March7th Theme";
|
|
22
|
+
var speed = this.getAttribute("speed") || "18s";
|
|
23
|
+
this.innerHTML = "";
|
|
24
|
+
this.setAttribute("role", "region");
|
|
25
|
+
this.setAttribute("aria-label", this.getAttribute("label") || "滚动文字");
|
|
26
|
+
this.style.display = "block";
|
|
27
|
+
this.style.overflow = "hidden";
|
|
28
|
+
this.style.border = "1px solid var(--m7-line-divider)";
|
|
29
|
+
this.style.borderRadius = "var(--m7-radius-full)";
|
|
30
|
+
this.style.background = "var(--m7-card-bg-transparent)";
|
|
31
|
+
this.style.backdropFilter = "blur(var(--m7-blur-md))";
|
|
32
|
+
|
|
33
|
+
var track = document.createElement("div");
|
|
34
|
+
track.className = "m7-marquee-track";
|
|
35
|
+
track.style.display = "flex";
|
|
36
|
+
track.style.width = "max-content";
|
|
37
|
+
track.style.animation = "m7-marquee-scroll " + speed + " linear infinite";
|
|
38
|
+
|
|
39
|
+
for (var i = 0; i < 2; i += 1) {
|
|
40
|
+
var span = document.createElement("span");
|
|
41
|
+
span.textContent = text;
|
|
42
|
+
span.style.display = "inline-flex";
|
|
43
|
+
span.style.alignItems = "center";
|
|
44
|
+
span.style.gap = "var(--m7-spacing-sm)";
|
|
45
|
+
span.style.padding = "0.55rem 1.25rem";
|
|
46
|
+
span.style.color = "var(--m7-text-regular)";
|
|
47
|
+
span.style.whiteSpace = "nowrap";
|
|
48
|
+
track.appendChild(span);
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
this.appendChild(track);
|
|
52
|
+
ensureStyle();
|
|
53
|
+
}
|
|
54
|
+
});
|
|
55
|
+
|
|
56
|
+
defineOnce("m7-carousel", class extends HTMLElement {
|
|
57
|
+
connectedCallback() {
|
|
58
|
+
this.items = parseItems(this, [
|
|
59
|
+
"Memory of Everything",
|
|
60
|
+
"Lovely March7th",
|
|
61
|
+
"To travel far away"
|
|
62
|
+
]);
|
|
63
|
+
this.index = 0;
|
|
64
|
+
this.interval = Number.parseInt(this.getAttribute("interval") || "3500", 10);
|
|
65
|
+
this.render();
|
|
66
|
+
this.start();
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
disconnectedCallback() {
|
|
70
|
+
this.stop();
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
start() {
|
|
74
|
+
if (this.hasAttribute("no-auto")) return;
|
|
75
|
+
this.stop();
|
|
76
|
+
this.timer = window.setInterval(() => this.next(), this.interval);
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
stop() {
|
|
80
|
+
if (this.timer) window.clearInterval(this.timer);
|
|
81
|
+
this.timer = null;
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
next() {
|
|
85
|
+
this.index = (this.index + 1) % this.items.length;
|
|
86
|
+
this.update();
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
prev() {
|
|
90
|
+
this.index = (this.index - 1 + this.items.length) % this.items.length;
|
|
91
|
+
this.update();
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
render() {
|
|
95
|
+
this.className = [this.className, "m7-card"].filter(Boolean).join(" ");
|
|
96
|
+
this.style.display = "block";
|
|
97
|
+
this.style.position = "relative";
|
|
98
|
+
this.style.overflow = "hidden";
|
|
99
|
+
this.style.minHeight = this.getAttribute("height") || "220px";
|
|
100
|
+
|
|
101
|
+
this.innerHTML = "";
|
|
102
|
+
var viewport = document.createElement("div");
|
|
103
|
+
viewport.style.minHeight = "inherit";
|
|
104
|
+
viewport.style.padding = "var(--m7-spacing-3xl)";
|
|
105
|
+
viewport.style.display = "grid";
|
|
106
|
+
viewport.style.alignContent = "end";
|
|
107
|
+
viewport.style.background = "radial-gradient(circle at 20% 10%, color-mix(in oklch, var(--m7-accent-pink) 28%, transparent), transparent 34%), radial-gradient(circle at 85% 20%, color-mix(in oklch, var(--m7-primary) 30%, transparent), transparent 38%), var(--m7-card-bg-transparent)";
|
|
108
|
+
|
|
109
|
+
this.titleEl = document.createElement("h3");
|
|
110
|
+
this.titleEl.style.margin = "0";
|
|
111
|
+
this.titleEl.style.maxWidth = "18em";
|
|
112
|
+
this.titleEl.style.fontSize = "clamp(1.7rem, 4vw, 3rem)";
|
|
113
|
+
|
|
114
|
+
this.metaEl = document.createElement("p");
|
|
115
|
+
this.metaEl.className = "m7-text-muted";
|
|
116
|
+
this.metaEl.style.margin = "var(--m7-spacing-sm) 0 0";
|
|
117
|
+
|
|
118
|
+
viewport.append(this.titleEl, this.metaEl);
|
|
119
|
+
|
|
120
|
+
var controls = document.createElement("div");
|
|
121
|
+
controls.className = "m7-cluster";
|
|
122
|
+
controls.style.position = "absolute";
|
|
123
|
+
controls.style.right = "var(--m7-spacing-lg)";
|
|
124
|
+
controls.style.bottom = "var(--m7-spacing-lg)";
|
|
125
|
+
|
|
126
|
+
var prev = document.createElement("button");
|
|
127
|
+
prev.className = "m7-btn-plain";
|
|
128
|
+
prev.type = "button";
|
|
129
|
+
prev.textContent = "‹";
|
|
130
|
+
prev.setAttribute("aria-label", "上一张");
|
|
131
|
+
prev.addEventListener("click", () => { this.prev(); this.start(); });
|
|
132
|
+
|
|
133
|
+
var next = document.createElement("button");
|
|
134
|
+
next.className = "m7-btn-plain";
|
|
135
|
+
next.type = "button";
|
|
136
|
+
next.textContent = "›";
|
|
137
|
+
next.setAttribute("aria-label", "下一张");
|
|
138
|
+
next.addEventListener("click", () => { this.next(); this.start(); });
|
|
139
|
+
|
|
140
|
+
controls.append(prev, next);
|
|
141
|
+
this.append(viewport, controls);
|
|
142
|
+
this.update();
|
|
143
|
+
}
|
|
144
|
+
|
|
145
|
+
update() {
|
|
146
|
+
if (!this.titleEl) return;
|
|
147
|
+
this.titleEl.textContent = this.items[this.index];
|
|
148
|
+
this.metaEl.textContent = String(this.index + 1).padStart(2, "0") + " / " + String(this.items.length).padStart(2, "0");
|
|
149
|
+
}
|
|
150
|
+
});
|
|
151
|
+
|
|
152
|
+
defineOnce("m7-notice", class extends HTMLElement {
|
|
153
|
+
connectedCallback() {
|
|
154
|
+
var type = this.getAttribute("type") || "note";
|
|
155
|
+
var title = this.getAttribute("title") || type;
|
|
156
|
+
var colorMap = {
|
|
157
|
+
tip: "var(--m7-admonitions-color-tip)",
|
|
158
|
+
note: "var(--m7-admonitions-color-note)",
|
|
159
|
+
important: "var(--m7-admonitions-color-important)",
|
|
160
|
+
warning: "var(--m7-admonitions-color-warning)",
|
|
161
|
+
caution: "var(--m7-admonitions-color-caution)"
|
|
162
|
+
};
|
|
163
|
+
var content = this.innerHTML;
|
|
164
|
+
this.innerHTML = "";
|
|
165
|
+
this.className = [this.className, "m7-surface"].filter(Boolean).join(" ");
|
|
166
|
+
this.style.display = "block";
|
|
167
|
+
this.style.padding = "var(--m7-spacing-lg)";
|
|
168
|
+
this.style.borderLeft = "4px solid " + (colorMap[type] || colorMap.note);
|
|
169
|
+
|
|
170
|
+
var heading = document.createElement("strong");
|
|
171
|
+
heading.textContent = title;
|
|
172
|
+
heading.style.display = "block";
|
|
173
|
+
heading.style.marginBottom = "var(--m7-spacing-xs)";
|
|
174
|
+
heading.style.color = colorMap[type] || colorMap.note;
|
|
175
|
+
|
|
176
|
+
var body = document.createElement("div");
|
|
177
|
+
body.className = "m7-text-regular";
|
|
178
|
+
body.innerHTML = content;
|
|
179
|
+
this.append(heading, body);
|
|
180
|
+
}
|
|
181
|
+
});
|
|
182
|
+
|
|
183
|
+
defineOnce("m7-tags", class extends HTMLElement {
|
|
184
|
+
connectedCallback() {
|
|
185
|
+
var items = parseItems(this, ["March7th", "OKLCH", "Design Tokens"]);
|
|
186
|
+
this.innerHTML = "";
|
|
187
|
+
this.className = [this.className, "m7-cluster"].filter(Boolean).join(" ");
|
|
188
|
+
items.forEach(function (item) {
|
|
189
|
+
var tag = document.createElement("span");
|
|
190
|
+
tag.className = "m7-badge";
|
|
191
|
+
tag.textContent = item;
|
|
192
|
+
this.appendChild(tag);
|
|
193
|
+
}, this);
|
|
194
|
+
}
|
|
195
|
+
});
|
|
196
|
+
|
|
197
|
+
function ensureStyle() {
|
|
198
|
+
if (document.getElementById("m7-components-style")) return;
|
|
199
|
+
var style = document.createElement("style");
|
|
200
|
+
style.id = "m7-components-style";
|
|
201
|
+
style.textContent = "@keyframes m7-marquee-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}} m7-marquee:hover .m7-marquee-track{animation-play-state:paused}";
|
|
202
|
+
document.head.appendChild(style);
|
|
203
|
+
}
|
|
204
|
+
})();
|
|
@@ -0,0 +1,166 @@
|
|
|
1
|
+
<!doctype html>
|
|
2
|
+
<html lang="zh-CN">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8" />
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
6
|
+
<title>March7th Theme Preview</title>
|
|
7
|
+
<script>
|
|
8
|
+
(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);})();
|
|
9
|
+
</script>
|
|
10
|
+
<link rel="stylesheet" href="./march7th-tokens.css" />
|
|
11
|
+
<link rel="stylesheet" href="./march7th-ui.css" />
|
|
12
|
+
<script src="./march7th-theme.js" defer></script>
|
|
13
|
+
<script src="./march7th-components.js" defer></script>
|
|
14
|
+
<style>
|
|
15
|
+
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}}
|
|
16
|
+
</style>
|
|
17
|
+
</head>
|
|
18
|
+
<body class="m7-theme m7-scrollbar">
|
|
19
|
+
<div class="preview-bg">
|
|
20
|
+
<nav class="m7-navbar">
|
|
21
|
+
<div class="m7-container m7-cluster" style="min-height:4.5rem;justify-content:space-between">
|
|
22
|
+
<strong class="m7-text-strong">March7th UI</strong>
|
|
23
|
+
<div class="m7-cluster">
|
|
24
|
+
<a class="m7-link" href="#colors">色彩</a>
|
|
25
|
+
<a class="m7-link" href="#base">基础样式</a>
|
|
26
|
+
<a class="m7-link" href="#components">组件</a>
|
|
27
|
+
<a class="m7-link" href="#custom-elements">自定义标签</a>
|
|
28
|
+
</div>
|
|
29
|
+
</div>
|
|
30
|
+
</nav>
|
|
31
|
+
|
|
32
|
+
<main class="m7-container preview-pad m7-stack">
|
|
33
|
+
<section class="m7-sidebar-layout">
|
|
34
|
+
<div class="m7-hero">
|
|
35
|
+
<p class="preview-eyebrow"><span class="preview-dot"></span>March7th Theme Preview</p>
|
|
36
|
+
<h1 class="preview-hero-title">三月七 UI 风格设计预览</h1>
|
|
37
|
+
<p class="m7-text-regular">这份预览展示了主题色、基础排版、常规 HTML 元素、表单、布局、组件与响应式效果。其它站点引入 CSS/JS 后即可复用这套轻量底层 UI 风格。</p>
|
|
38
|
+
<div class="m7-cluster">
|
|
39
|
+
<button class="m7-btn m7-pressable" data-mode="light">浅色模式</button>
|
|
40
|
+
<button class="m7-btn m7-pressable" data-mode="dark">暗色模式</button>
|
|
41
|
+
<button class="m7-btn m7-pressable" data-mode="system">跟随系统</button>
|
|
42
|
+
<button class="m7-btn-plain m7-pressable" id="resetTheme">重置</button>
|
|
43
|
+
</div>
|
|
44
|
+
</div>
|
|
45
|
+
|
|
46
|
+
<aside class="preview-side">
|
|
47
|
+
<section class="m7-card preview-card">
|
|
48
|
+
<h2>主题色相</h2>
|
|
49
|
+
<p class="preview-row"><span>当前 hue</span><strong id="hueValue">215</strong></p>
|
|
50
|
+
<input id="hueSlider" class="m7-hue-slider" type="range" min="0" max="360" step="5" />
|
|
51
|
+
</section>
|
|
52
|
+
<section class="m7-card preview-card">
|
|
53
|
+
<h2>模式状态</h2>
|
|
54
|
+
<p class="preview-row"><span>存储模式</span><code id="storedMode">system</code></p>
|
|
55
|
+
<p class="preview-row"><span>实际模式</span><code id="resolvedMode">light</code></p>
|
|
56
|
+
</section>
|
|
57
|
+
</aside>
|
|
58
|
+
</section>
|
|
59
|
+
|
|
60
|
+
<section id="colors" class="m7-card preview-card m7-stack">
|
|
61
|
+
<h2>核心色板</h2>
|
|
62
|
+
<div class="swatches">
|
|
63
|
+
<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>
|
|
64
|
+
</div>
|
|
65
|
+
</section>
|
|
66
|
+
|
|
67
|
+
<section id="base" class="m7-grid">
|
|
68
|
+
<article class="m7-card preview-card m7-prose">
|
|
69
|
+
<h2>基础排版</h2>
|
|
70
|
+
<p><strong>强文本</strong>、常规正文、<small>辅助文字</small> 和 <a href="#">默认链接</a> 都已提供底层样式。</p>
|
|
71
|
+
<blockquote>这是 blockquote 引用块，使用主题主色作为左侧强调边。</blockquote>
|
|
72
|
+
<ul><li>无序列表项目</li><li>自动使用正文颜色</li></ul>
|
|
73
|
+
<ol><li>有序列表项目</li><li>保持统一间距</li></ol>
|
|
74
|
+
</article>
|
|
75
|
+
|
|
76
|
+
<article class="m7-card preview-card m7-prose">
|
|
77
|
+
<h2>媒体与说明</h2>
|
|
78
|
+
<figure>
|
|
79
|
+
<div class="preview-img"></div>
|
|
80
|
+
<figcaption>图片、视频和说明文字的常规样式预览</figcaption>
|
|
81
|
+
</figure>
|
|
82
|
+
<hr />
|
|
83
|
+
<p>水平分割线、图片圆角、说明文字颜色都已纳入底层样式。</p>
|
|
84
|
+
</article>
|
|
85
|
+
|
|
86
|
+
<article class="m7-card preview-card m7-prose">
|
|
87
|
+
<h2>表单控件</h2>
|
|
88
|
+
<input class="m7-input" value="Lovely March7th!" />
|
|
89
|
+
<select class="m7-select"><option>March7th Blue</option><option>Memory Pink</option></select>
|
|
90
|
+
<textarea class="m7-textarea">Memory of Everything</textarea>
|
|
91
|
+
<button class="m7-btn">提交</button>
|
|
92
|
+
</article>
|
|
93
|
+
</section>
|
|
94
|
+
|
|
95
|
+
<section id="components" class="m7-grid">
|
|
96
|
+
<article class="m7-card preview-card">
|
|
97
|
+
<h2>按钮、徽章与链接</h2>
|
|
98
|
+
<p>这是一段包含 <a class="m7-link" href="#">主题链接</a> 的示例文本。</p>
|
|
99
|
+
<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>
|
|
100
|
+
</article>
|
|
101
|
+
|
|
102
|
+
<article class="m7-card preview-card">
|
|
103
|
+
<h2>表格</h2>
|
|
104
|
+
<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>
|
|
105
|
+
</article>
|
|
106
|
+
|
|
107
|
+
<article class="m7-surface preview-card">
|
|
108
|
+
<h2>Surface 表面</h2>
|
|
109
|
+
<p>半透明表面适合放在壁纸或渐变背景上，包含边框、阴影和毛玻璃。</p>
|
|
110
|
+
<div class="m7-cluster"><span class="m7-badge">Glass</span><span class="m7-badge">Responsive</span></div>
|
|
111
|
+
</article>
|
|
112
|
+
</section>
|
|
113
|
+
|
|
114
|
+
<section id="custom-elements" class="m7-card preview-card m7-stack">
|
|
115
|
+
<h2>自定义 HTML 标签组件</h2>
|
|
116
|
+
<p class="m7-text-regular">通过 <code>march7th-components.js</code> 注册 Web Components，不依赖框架，直接使用主题变量和 UI 类。</p>
|
|
117
|
+
<m7-marquee text="March7th Theme · Memory of Everything · Lovely March7th · To travel far away ·" speed="22s"></m7-marquee>
|
|
118
|
+
<div class="m7-grid">
|
|
119
|
+
<m7-carousel height="260px" items="Memory of Everything|Lovely March7th|Sleep Tight, the Night Dreams Long|Wake Up, the Tomorrow is Yours"></m7-carousel>
|
|
120
|
+
<div class="m7-stack">
|
|
121
|
+
<m7-notice type="tip" title="自定义标签示例">这是 <code><m7-notice></code>，适合用于提示、公告和说明。</m7-notice>
|
|
122
|
+
<m7-notice type="warning" title="无需框架">这些组件只依赖浏览器原生 Custom Elements，可以在任意站点中使用。</m7-notice>
|
|
123
|
+
<m7-tags items="Web Components|Carousel|Marquee|Notice|Theme Tokens"></m7-tags>
|
|
124
|
+
</div>
|
|
125
|
+
</div>
|
|
126
|
+
<pre><code><script src="/theme/march7th-components.js" defer></script>
|
|
127
|
+
|
|
128
|
+
<m7-marquee text="March7th Theme · Lovely March7th"></m7-marquee>
|
|
129
|
+
<m7-carousel items="Memory|Lovely|Tomorrow"></m7-carousel>
|
|
130
|
+
<m7-notice type="tip" title="提示">内容</m7-notice>
|
|
131
|
+
<m7-tags items="OKLCH|Design Tokens|Web Components"></m7-tags></code></pre>
|
|
132
|
+
</section>
|
|
133
|
+
|
|
134
|
+
<section class="m7-card preview-card m7-stack">
|
|
135
|
+
<h2>语义提示色</h2>
|
|
136
|
+
<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>
|
|
137
|
+
</section>
|
|
138
|
+
|
|
139
|
+
<section class="m7-grid">
|
|
140
|
+
<article class="m7-card preview-card" style="grid-column:span 2">
|
|
141
|
+
<h2>代码块</h2>
|
|
142
|
+
<pre><code>const theme = {
|
|
143
|
+
hue: March7thTheme.getHue(),
|
|
144
|
+
mode: March7thTheme.getMode(),
|
|
145
|
+
resolvedMode: March7thTheme.getResolvedMode(),
|
|
146
|
+
};
|
|
147
|
+
|
|
148
|
+
March7thTheme.setMode("system");
|
|
149
|
+
March7thTheme.setHue(215);</code></pre>
|
|
150
|
+
</article>
|
|
151
|
+
<article class="m7-card-transparent preview-card">
|
|
152
|
+
<h2>透明卡片</h2>
|
|
153
|
+
<p><code>.m7-card-transparent</code> 适合放在壁纸、渐变和 Banner 上。</p>
|
|
154
|
+
</article>
|
|
155
|
+
</section>
|
|
156
|
+
|
|
157
|
+
<p class="m7-text-muted" style="text-align:center">预览文件：<code>/theme/march7th-theme-preview.html</code></p>
|
|
158
|
+
</main>
|
|
159
|
+
</div>
|
|
160
|
+
|
|
161
|
+
<script>
|
|
162
|
+
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)})}
|
|
163
|
+
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()});
|
|
164
|
+
</script>
|
|
165
|
+
</body>
|
|
166
|
+
</html>
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
/*
|
|
2
|
+
* March7th Theme Bundle Entry
|
|
3
|
+
* Compatibility entry that loads both design tokens and UI styles.
|
|
4
|
+
* For tokens only, use march7th-tokens.css.
|
|
5
|
+
* For full UI, keep using this file or load tokens + ui manually.
|
|
6
|
+
*/
|
|
7
|
+
|
|
8
|
+
@import "./march7th-tokens.css";
|
|
9
|
+
@import "./march7th-ui.css";
|