-
Notifications
You must be signed in to change notification settings - Fork 3
Expand file tree
/
Copy pathTheme-Gallery.html
More file actions
351 lines (323 loc) · 14.8 KB
/
Theme-Gallery.html
File metadata and controls
351 lines (323 loc) · 14.8 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
<!DOCTYPE html>
<html lang="en" class="fluentlm fluent-dark">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>FluentLM — Theme Gallery</title>
<!-- Combined library CSS (base) then theme overrides -->
<link rel="stylesheet" href="static-files/fluentlm.min.css">
<link rel="stylesheet" href="static-files/theme-light.css">
<link rel="stylesheet" href="static-files/theme-dark.css">
<!-- All 10 themes -->
<link rel="stylesheet" href="default-themes/nebula-dawn.v3.css">
<link rel="stylesheet" href="default-themes/nebula-dusk.v3.css">
<link rel="stylesheet" href="default-themes/solar-flare-dawn.v3.css">
<link rel="stylesheet" href="default-themes/solar-flare-dusk.v3.css">
<link rel="stylesheet" href="default-themes/aurora-dawn.v3.css">
<link rel="stylesheet" href="default-themes/aurora-dusk.v3.css">
<link rel="stylesheet" href="default-themes/cosmos-dawn.v3.css">
<link rel="stylesheet" href="default-themes/cosmos-dusk.v3.css">
<link rel="stylesheet" href="default-themes/high-contrast-light.v3.css">
<link rel="stylesheet" href="default-themes/high-contrast-dark.v3.css">
<style>
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
body {
font-family: var(--fontFamily);
background: var(--bodyBackground);
color: var(--bodyText);
height: 100vh;
overflow: hidden;
}
/* ── Chrome: top bar ── */
.chrome {
position: fixed; top: 0; left: 0; right: 0; z-index: 100;
display: flex; align-items: center; justify-content: space-between;
padding: 10px 24px;
background: var(--bodyStandoutBackground);
border-bottom: 1px solid var(--bodyFrameDivider);
backdrop-filter: blur(12px);
flex-wrap: wrap; gap: 8px;
}
.chrome-left { display: flex; align-items: center; gap: 16px; }
.chrome-title {
font-size: var(--fontSizeLarge);
font-weight: var(--fontWeightSemibold);
color: var(--bodyText);
}
.chrome-subtitle {
font-size: var(--fontSizeSmall);
color: var(--bodySubtext);
}
.chrome-right {
display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
.theme-btn {
padding: 5px 10px; border-radius: var(--roundedCorner4);
border: 1px solid var(--buttonBorder); background: var(--buttonBackground);
color: var(--bodyText); cursor: pointer; font-size: 11px;
font-family: var(--fontFamily); white-space: nowrap;
}
.theme-btn:hover { background: var(--buttonBackgroundHovered); }
.theme-btn--active {
background: var(--themePrimary); color: #fff; border-color: transparent;
}
/* ── Scrollable content ── */
.content {
position: absolute; top: 54px; bottom: 0; left: 0; right: 0;
overflow-y: auto; padding: 32px 48px 48px;
}
/* ── Theme info banner ── */
.theme-info {
display: flex; align-items: center; gap: 16px;
margin-bottom: 32px;
}
.theme-info h1 {
font-size: var(--fontSizeXXLarge); font-weight: var(--fontWeightBold);
color: var(--bodyText);
}
.hue-badge {
display: inline-block; padding: 4px 12px; border-radius: 999px;
font-size: var(--fontSizeSmall); font-weight: var(--fontWeightSemibold);
color: #fff;
}
.mode-badge {
display: inline-block; padding: 4px 12px; border-radius: 999px;
font-size: var(--fontSizeSmall); font-weight: var(--fontWeightSemibold);
border: 1px solid var(--variantBorder); color: var(--bodyText);
background: var(--cardStandoutBackground);
}
/* ── Section headers ── */
.section-title {
font-size: var(--fontSizeXLarge); font-weight: var(--fontWeightSemibold);
color: var(--bodyText); margin: 32px 0 16px;
padding-bottom: 8px; border-bottom: 1px solid var(--bodyDivider);
}
/* ── Swatch grids ── */
.swatch-grid {
display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
gap: 10px; margin-bottom: 24px;
}
.swatch {
border-radius: var(--roundedCorner4);
border: 1px solid var(--variantBorder);
overflow: hidden;
}
.swatch-color { height: 48px; }
.swatch-info { padding: 6px 8px; background: var(--cardStandoutBackground); }
.swatch-name { font-size: 10px; font-weight: var(--fontWeightSemibold); color: var(--bodyText); }
.swatch-val { font-size: 9px; color: var(--bodySubtext); font-family: var(--fontFamilyMonospace); }
/* ── Component preview ── */
.preview-grid {
display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-bottom: 24px;
}
.preview-card {
background: var(--cardStandoutBackground); border: 1px solid var(--variantBorder);
border-radius: var(--roundedCorner4); padding: 20px;
}
.preview-card h3 {
font-size: var(--fontSizeMedium); font-weight: var(--fontWeightSemibold);
color: var(--bodyText); margin-bottom: 12px;
}
.preview-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 12px; }
.preview-stack { display: flex; flex-direction: column; gap: 8px; }
/* ── Status bars in preview ── */
.status-bars { display: flex; flex-direction: column; gap: 8px; }
</style>
</head>
<body>
<!-- ════════ Top Chrome ════════ -->
<div class="chrome">
<div class="chrome-left">
<div class="chrome-title">FluentLM</div>
<div class="chrome-subtitle">Theme Gallery</div>
</div>
<div class="chrome-right">
<button class="theme-btn" data-theme="nebula-dusk">Nebula Dusk</button>
<button class="theme-btn" data-theme="nebula-dawn">Nebula Dawn</button>
<button class="theme-btn" data-theme="solar-flare-dusk">Solar Dusk</button>
<button class="theme-btn" data-theme="solar-flare-dawn">Solar Dawn</button>
<button class="theme-btn" data-theme="aurora-dusk">Aurora Dusk</button>
<button class="theme-btn" data-theme="aurora-dawn">Aurora Dawn</button>
<button class="theme-btn" data-theme="cosmos-dusk">Cosmos Dusk</button>
<button class="theme-btn" data-theme="cosmos-dawn">Cosmos Dawn</button>
<button class="theme-btn" data-theme="high-contrast-dark">HC Dark</button>
<button class="theme-btn" data-theme="high-contrast-light">HC Light</button>
</div>
</div>
<!-- ════════ Scrollable Content ════════ -->
<div class="content">
<!-- Theme Info -->
<div class="theme-info">
<h1 id="themeName">Nebula Dusk</h1>
<span class="hue-badge" id="hueBadge" style="background:#764ba2;">Purple</span>
<span class="mode-badge" id="modeBadge">Dark</span>
</div>
<!-- Brand Ramp -->
<h2 class="section-title">Brand / Accent Ramp</h2>
<div class="swatch-grid" id="accentRamp"></div>
<!-- Neutral Ramp -->
<h2 class="section-title">Neutral Ramp</h2>
<div class="swatch-grid" id="neutralRamp"></div>
<!-- Component Preview -->
<h2 class="section-title">Component Preview</h2>
<div class="preview-grid">
<div class="preview-card">
<h3>Buttons</h3>
<div class="preview-row">
<button class="flm-button flm-button--primary">Primary</button>
<button class="flm-button">Default</button>
<button class="flm-button flm-button--subtle">Subtle</button>
<button class="flm-button" disabled>Disabled</button>
</div>
<div class="preview-row">
<button class="flm-button flm-button--primary" data-icon="Add">Create</button>
<button class="flm-button" data-icon="Settings">Settings</button>
</div>
</div>
<div class="preview-card">
<h3>Text Fields</h3>
<div class="preview-stack">
<div class="flm-textfield">
<label class="flm-label" for="gal-tf1">Standard</label>
<input class="flm-textfield-input" id="gal-tf1" placeholder="Enter text…">
</div>
<div class="flm-textfield flm-textfield--error">
<label class="flm-label" for="gal-tf2">Error State</label>
<input class="flm-textfield-input" id="gal-tf2" value="bad input">
<span class="flm-textfield-error">Invalid value.</span>
</div>
</div>
</div>
<div class="preview-card">
<h3>Card Example</h3>
<div style="background:var(--bodyBackground);border:1px solid var(--variantBorder);border-radius:var(--roundedCorner4);padding:16px;">
<div style="font-weight:var(--fontWeightSemibold);color:var(--bodyText);margin-bottom:8px;">Document Title</div>
<div style="font-size:var(--fontSizeSmall);color:var(--bodySubtext);margin-bottom:12px;">A card rendered with the current theme's surface and border tokens.</div>
<div style="display:flex;gap:8px;">
<button class="flm-button flm-button--primary" style="font-size:12px;padding:4px 12px;">Open</button>
<button class="flm-button" style="font-size:12px;padding:4px 12px;">Share</button>
</div>
</div>
</div>
<div class="preview-card">
<h3>Message Bars</h3>
<div class="status-bars">
<div class="flm-messagebar flm-messagebar--info">Informational message.</div>
<div class="flm-messagebar flm-messagebar--success">Operation succeeded.</div>
<div class="flm-messagebar flm-messagebar--warning">Warning: check inputs.</div>
<div class="flm-messagebar flm-messagebar--severeWarning">Severe warning issued.</div>
<div class="flm-messagebar flm-messagebar--error">An error occurred.</div>
<div class="flm-messagebar flm-messagebar--blocked">Access blocked.</div>
</div>
</div>
</div>
</div>
<script src="static-files/fluentlm.min.js"></script>
<script>
(function () {
// ── Theme metadata ──
var THEME_META = {
'nebula-dusk': { name: 'Nebula Dusk', hue: 'Purple', hueColor: '#764ba2', mode: 'Dark' },
'nebula-dawn': { name: 'Nebula Dawn', hue: 'Purple', hueColor: '#764ba2', mode: 'Light' },
'solar-flare-dusk': { name: 'Solar Flare Dusk', hue: 'Amber', hueColor: '#e67e22', mode: 'Dark' },
'solar-flare-dawn': { name: 'Solar Flare Dawn', hue: 'Amber', hueColor: '#e67e22', mode: 'Light' },
'aurora-dusk': { name: 'Aurora Dusk', hue: 'Teal', hueColor: '#00b4d8', mode: 'Dark' },
'aurora-dawn': { name: 'Aurora Dawn', hue: 'Teal', hueColor: '#00b4d8', mode: 'Light' },
'cosmos-dusk': { name: 'Cosmos Dusk', hue: 'Indigo', hueColor: '#3f37c9', mode: 'Dark' },
'cosmos-dawn': { name: 'Cosmos Dawn', hue: 'Indigo', hueColor: '#3f37c9', mode: 'Light' },
'high-contrast-dark': { name: 'High Contrast Dark', hue: 'Grayscale', hueColor: '#ffffff', mode: 'Dark' },
'high-contrast-light': { name: 'High Contrast Light', hue: 'Grayscale', hueColor: '#000000', mode: 'Light' }
};
var ALL_THEMES = Object.keys(THEME_META);
// ── Theme switcher ──
var themeBtns = document.querySelectorAll('.theme-btn[data-theme]');
function applyTheme(name) {
var html = document.documentElement;
// Remove all theme classes
ALL_THEMES.forEach(function (t) { html.classList.remove(t); });
// Dark detection
if (name.indexOf('-dusk') !== -1 || name === 'high-contrast-dark') {
html.classList.add('fluent-dark');
} else {
html.classList.remove('fluent-dark');
}
html.classList.add(name);
localStorage.setItem('fluentlm-theme', name);
// Update info banner
var meta = THEME_META[name];
document.getElementById('themeName').textContent = meta.name;
var hueBadge = document.getElementById('hueBadge');
hueBadge.textContent = meta.hue;
hueBadge.style.background = meta.hueColor;
// Ensure badge text is readable
if (name === 'high-contrast-dark') {
hueBadge.style.color = '#000';
} else if (name === 'high-contrast-light') {
hueBadge.style.color = '#fff';
} else {
hueBadge.style.color = '#fff';
}
document.getElementById('modeBadge').textContent = meta.mode;
// Rebuild ramps
buildAccentRamp();
buildNeutralRamp();
}
function setActiveThemeBtn(name) {
themeBtns.forEach(function (b) {
b.classList.toggle('theme-btn--active', b.getAttribute('data-theme') === name);
});
}
themeBtns.forEach(function (b) {
b.addEventListener('click', function () {
var name = b.getAttribute('data-theme');
applyTheme(name);
setActiveThemeBtn(name);
});
});
// ── Build accent ramp swatches ──
function buildAccentRamp() {
var cs = getComputedStyle(document.documentElement);
var ramp = [
['--themeDarker', 'themeDarker'],
['--themeDark', 'themeDark'],
['--themeDarkAlt', 'themeDarkAlt'],
['--themePrimary', 'themePrimary'],
['--themeSecondary', 'themeSecondary'],
['--themeTertiary', 'themeTertiary'],
['--themeLight', 'themeLight'],
['--themeLighter', 'themeLighter'],
['--themeLighterAlt','themeLighterAlt']
];
var grid = document.getElementById('accentRamp');
grid.innerHTML = '';
ramp.forEach(function (r) {
var v = cs.getPropertyValue(r[0]).trim() || '#888';
grid.innerHTML += '<div class="swatch"><div class="swatch-color" style="background:' + v + ';"></div><div class="swatch-info"><div class="swatch-name">' + r[1] + '</div><div class="swatch-val">' + v + '</div></div></div>';
});
}
// ── Build neutral ramp ──
function buildNeutralRamp() {
var cs = getComputedStyle(document.documentElement);
var neutrals = [
'--black', '--neutralDark', '--neutralPrimary', '--neutralPrimaryAlt',
'--neutralSecondary', '--neutralSecondaryAlt', '--neutralTertiary',
'--neutralTertiaryAlt', '--neutralQuaternary', '--neutralQuaternaryAlt',
'--neutralLight', '--neutralLighter', '--neutralLighterAlt', '--white'
];
var grid = document.getElementById('neutralRamp');
grid.innerHTML = '';
neutrals.forEach(function (n) {
var v = cs.getPropertyValue(n).trim() || '#888';
var name = n.replace('--', '');
grid.innerHTML += '<div class="swatch"><div class="swatch-color" style="background:' + v + ';"></div><div class="swatch-info"><div class="swatch-name">' + name + '</div><div class="swatch-val">' + v + '</div></div></div>';
});
}
// ── Init ──
var saved = localStorage.getItem('fluentlm-theme');
var initial = (saved && THEME_META[saved]) ? saved : 'nebula-dusk';
applyTheme(initial);
setActiveThemeBtn(initial);
})();
</script>
</body>
</html>