@prioticket/design-system-web 1.0.5 → 1.0.6
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/COMPONENT-DOCUMENTATION.md +561 -430
- package/README.md +341 -341
- package/component-documentation.json +1755 -1128
- package/custom-elements.json +6453 -0
- package/dist/component-gallery.html +2 -2
- package/dist/components/pd-button.d.cjs.js +1 -0
- package/dist/components/pd-button.d.es.js +7 -0
- package/dist/components/pd-card.d.cjs.js +1 -0
- package/dist/components/pd-card.d.es.js +1 -0
- package/dist/components/pd-checkbox.cjs.js +6 -6
- package/dist/components/pd-checkbox.d.cjs.js +1 -0
- package/dist/components/pd-checkbox.d.es.js +2 -0
- package/dist/components/pd-checkbox.es.js +39 -38
- package/dist/components/pd-chip.d.cjs.js +1 -0
- package/dist/components/pd-chip.d.es.js +6 -0
- package/dist/components/pd-dialog.d.cjs.js +1 -0
- package/dist/components/pd-dialog.d.es.js +5 -0
- package/dist/components/pd-expandable-card.d.cjs.js +1 -0
- package/dist/components/pd-expandable-card.d.es.js +3 -0
- package/dist/components/pd-fab.d.cjs.js +1 -0
- package/dist/components/pd-fab.d.es.js +4 -0
- package/dist/components/pd-icon-button.d.cjs.js +1 -0
- package/dist/components/pd-icon-button.d.es.js +6 -0
- package/dist/components/pd-icon.d.cjs.js +1 -0
- package/dist/components/pd-icon.d.es.js +2 -0
- package/dist/components/pd-list.d.cjs.js +1 -0
- package/dist/components/pd-list.d.es.js +5 -0
- package/dist/components/pd-menu-item.d.cjs.js +1 -0
- package/dist/components/pd-menu-item.d.es.js +3 -0
- package/dist/components/pd-menu.cjs.js +13 -13
- package/dist/components/pd-menu.d.cjs.js +1 -0
- package/dist/components/pd-menu.d.es.js +2 -0
- package/dist/components/pd-menu.es.js +19 -19
- package/dist/components/pd-progress.d.cjs.js +1 -0
- package/dist/components/pd-progress.d.es.js +3 -0
- package/dist/components/pd-radio.d.cjs.js +1 -0
- package/dist/components/pd-radio.d.es.js +2 -0
- package/dist/components/pd-segmented-button.d.cjs.js +1 -0
- package/dist/components/pd-segmented-button.d.es.js +2 -0
- package/dist/components/pd-segmented-stepper.cjs.js +3 -3
- package/dist/components/pd-segmented-stepper.d.cjs.js +1 -0
- package/dist/components/pd-segmented-stepper.d.es.js +2 -0
- package/dist/components/pd-segmented-stepper.es.js +4 -11
- package/dist/components/pd-select.d.cjs.js +1 -0
- package/dist/components/pd-select.d.es.js +5 -0
- package/dist/components/pd-slider.d.cjs.js +1 -0
- package/dist/components/pd-slider.d.es.js +2 -0
- package/dist/components/pd-stepper.cjs.js +3 -3
- package/dist/components/pd-stepper.d.cjs.js +1 -0
- package/dist/components/pd-stepper.d.es.js +1 -0
- package/dist/components/pd-stepper.es.js +19 -5
- package/dist/components/pd-switch.d.cjs.js +1 -0
- package/dist/components/pd-switch.d.es.js +3 -0
- package/dist/components/pd-tabs.cjs.js +4 -4
- package/dist/components/pd-tabs.d.cjs.js +1 -0
- package/dist/components/pd-tabs.d.es.js +5 -0
- package/dist/components/pd-tabs.es.js +53 -60
- package/dist/components/pd-text-field.d.cjs.js +1 -0
- package/dist/components/pd-text-field.d.es.js +4 -0
- package/dist/demo-theming.html +305 -305
- package/dist/prioticket-design-system-web.cjs.js +2281 -1
- package/dist/prioticket-design-system-web.es.js +4103 -50
- package/dist/types/components/pd-checkbox.d.ts +1 -0
- package/dist/types/components/pd-segmented-stepper.d.ts +2 -3
- package/dist/types/components/pd-stepper.d.ts +2 -0
- package/dist/types/components/pd-tabs.d.ts +2 -2
- package/package.json +25 -5
package/dist/demo-theming.html
CHANGED
|
@@ -1,305 +1,305 @@
|
|
|
1
|
-
<!DOCTYPE html>
|
|
2
|
-
<html lang="en">
|
|
3
|
-
<head>
|
|
4
|
-
<meta charset="UTF-8">
|
|
5
|
-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
-
<title>Dynamic Theming Demo - Prioticket Design System</title>
|
|
7
|
-
|
|
8
|
-
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200">
|
|
9
|
-
|
|
10
|
-
<script type="importmap">
|
|
11
|
-
{
|
|
12
|
-
"imports": {
|
|
13
|
-
"lit": "https://cdn.jsdelivr.net/npm/lit@3.3.1/index.js",
|
|
14
|
-
"lit/": "https://cdn.jsdelivr.net/npm/lit@3.3.1/",
|
|
15
|
-
"lit-html": "https://cdn.jsdelivr.net/npm/lit-html@3.3.1/lit-html.js",
|
|
16
|
-
"lit-html/": "https://cdn.jsdelivr.net/npm/lit-html@3.3.1/",
|
|
17
|
-
"lit-element": "https://cdn.jsdelivr.net/npm/lit-element@4.2.1/lit-element.js",
|
|
18
|
-
"lit-element/": "https://cdn.jsdelivr.net/npm/lit-element@4.2.1/",
|
|
19
|
-
"@lit/reactive-element": "https://cdn.jsdelivr.net/npm/@lit/reactive-element@2.1.1/reactive-element.js",
|
|
20
|
-
"@lit/reactive-element/": "https://cdn.jsdelivr.net/npm/@lit/reactive-element@2.1.1/",
|
|
21
|
-
"@material/web": "https://cdn.jsdelivr.net/npm/@material/web@2.4.0/index.js",
|
|
22
|
-
"@material/web/": "https://cdn.jsdelivr.net/npm/@material/web@2.4.0/",
|
|
23
|
-
"tslib": "https://cdn.jsdelivr.net/npm/tslib@2.6.2/tslib.es6.js",
|
|
24
|
-
"tslib/": "https://cdn.jsdelivr.net/npm/tslib@2.6.2/"
|
|
25
|
-
}
|
|
26
|
-
}
|
|
27
|
-
</script>
|
|
28
|
-
|
|
29
|
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@prioticket/design-system-web@1.0.
|
|
30
|
-
|
|
31
|
-
<style>
|
|
32
|
-
body {
|
|
33
|
-
font-family: system-ui, -apple-system, sans-serif;
|
|
34
|
-
margin: 2rem;
|
|
35
|
-
line-height: 1.6;
|
|
36
|
-
background: var(--md-sys-color-background);
|
|
37
|
-
color: var(--md-sys-color-on-background);
|
|
38
|
-
transition: background-color 0.3s ease, color 0.3s ease;
|
|
39
|
-
}
|
|
40
|
-
|
|
41
|
-
.demo-section {
|
|
42
|
-
margin-bottom: 2rem;
|
|
43
|
-
padding: 1.5rem;
|
|
44
|
-
border: 1px solid var(--md-sys-color-outline, #d1d1d1);
|
|
45
|
-
border-radius: var(--md-sys-shape-corner-medium, 8px);
|
|
46
|
-
background: var(--md-sys-color-surface);
|
|
47
|
-
color: var(--md-sys-color-on-surface);
|
|
48
|
-
transition: all 0.3s ease;
|
|
49
|
-
}
|
|
50
|
-
|
|
51
|
-
.theme-controls {
|
|
52
|
-
display: flex;
|
|
53
|
-
gap: 1rem;
|
|
54
|
-
flex-wrap: wrap;
|
|
55
|
-
margin-bottom: 1rem;
|
|
56
|
-
}
|
|
57
|
-
|
|
58
|
-
.theme-controls button {
|
|
59
|
-
padding: 0.5rem 1rem;
|
|
60
|
-
border: 1px solid var(--md-sys-color-outline, #ccc);
|
|
61
|
-
border-radius: var(--md-sys-shape-corner-small, 4px);
|
|
62
|
-
background: var(--md-sys-color-surface, white);
|
|
63
|
-
color: var(--md-sys-color-on-surface, black);
|
|
64
|
-
cursor: pointer;
|
|
65
|
-
transition: all 0.2s ease;
|
|
66
|
-
}
|
|
67
|
-
|
|
68
|
-
.theme-controls button:hover {
|
|
69
|
-
background: var(--md-sys-color-surface-variant, #f5f5f5);
|
|
70
|
-
}
|
|
71
|
-
|
|
72
|
-
.component-showcase {
|
|
73
|
-
display: flex;
|
|
74
|
-
gap: 1rem;
|
|
75
|
-
flex-wrap: wrap;
|
|
76
|
-
margin-top: 1rem;
|
|
77
|
-
}
|
|
78
|
-
|
|
79
|
-
.status {
|
|
80
|
-
padding: 1rem;
|
|
81
|
-
border-radius: var(--md-sys-shape-corner-small, 4px);
|
|
82
|
-
background: var(--md-sys-color-primary-container, #e3f2fd);
|
|
83
|
-
color: var(--md-sys-color-on-primary-container, #0d47a1);
|
|
84
|
-
margin: 1rem 0;
|
|
85
|
-
}
|
|
86
|
-
|
|
87
|
-
#debug-output {
|
|
88
|
-
font-family: "Courier New", monospace;
|
|
89
|
-
background: var(--md-sys-color-surface-variant, #f5f5f5);
|
|
90
|
-
color: var(--md-sys-color-on-surface-variant, #303030);
|
|
91
|
-
padding: 1rem;
|
|
92
|
-
border-radius: var(--md-sys-shape-corner-small, 4px);
|
|
93
|
-
max-height: 300px;
|
|
94
|
-
overflow-y: auto;
|
|
95
|
-
font-size: 0.875rem;
|
|
96
|
-
line-height: 1.4;
|
|
97
|
-
}
|
|
98
|
-
</style>
|
|
99
|
-
</head>
|
|
100
|
-
<body>
|
|
101
|
-
<h1>Dynamic Theming Demo</h1>
|
|
102
|
-
|
|
103
|
-
<div class="status" id="status">
|
|
104
|
-
Loading theming system...
|
|
105
|
-
</div>
|
|
106
|
-
|
|
107
|
-
<div class="demo-section">
|
|
108
|
-
<h2>Theme Controls</h2>
|
|
109
|
-
<p>Click the buttons below to see real-time theme changes:</p>
|
|
110
|
-
<div class="theme-controls">
|
|
111
|
-
<button onclick="applyDefaultTheme()">Default Theme</button>
|
|
112
|
-
<button onclick="applyOrangeTheme()">Orange Theme</button>
|
|
113
|
-
<button onclick="applyPurpleTheme()">Purple Theme</button>
|
|
114
|
-
<button onclick="applyGreenTheme()">Green Theme</button>
|
|
115
|
-
<button onclick="applyDarkTheme()">Dark Theme</button>
|
|
116
|
-
</div>
|
|
117
|
-
</div>
|
|
118
|
-
|
|
119
|
-
<div class="demo-section">
|
|
120
|
-
<h2>Components</h2>
|
|
121
|
-
<p>Components automatically update with theme changes:</p>
|
|
122
|
-
<div class="component-showcase">
|
|
123
|
-
<pd-button>Default</pd-button>
|
|
124
|
-
<pd-button variant="outlined">Outlined</pd-button>
|
|
125
|
-
<pd-button variant="text">Text</pd-button>
|
|
126
|
-
<pd-button variant="tonal">Tonal</pd-button>
|
|
127
|
-
</div>
|
|
128
|
-
|
|
129
|
-
<div class="component-showcase" style="margin-top: 1rem;">
|
|
130
|
-
<pd-card>
|
|
131
|
-
<div style="padding: 1rem;">
|
|
132
|
-
<h3>Sample Card</h3>
|
|
133
|
-
<p>Surface colors and text adapt automatically to the selected theme.</p>
|
|
134
|
-
</div>
|
|
135
|
-
</pd-card>
|
|
136
|
-
</div>
|
|
137
|
-
</div>
|
|
138
|
-
|
|
139
|
-
<div class="demo-section">
|
|
140
|
-
<h2>Debug Output</h2>
|
|
141
|
-
<div id="debug-output">
|
|
142
|
-
<p>Theming system initializing...</p>
|
|
143
|
-
</div>
|
|
144
|
-
</div>
|
|
145
|
-
|
|
146
|
-
<script type="module">
|
|
147
|
-
const CDN_BASE = 'https://cdn.jsdelivr.net/npm';
|
|
148
|
-
const DS_BASE = `${CDN_BASE}/@prioticket/design-system-web@1.0.
|
|
149
|
-
const THEMING_URL = `${DS_BASE}/theming.es.js`;
|
|
150
|
-
const COMPONENTS = [
|
|
151
|
-
`${DS_BASE}/components/pd-button.es.js`,
|
|
152
|
-
`${DS_BASE}/components/pd-card.es.js`
|
|
153
|
-
];
|
|
154
|
-
|
|
155
|
-
await Promise.all(COMPONENTS.map((url) => import(/* @vite-ignore */ url)));
|
|
156
|
-
const { initialize, getDefaultTheme } = await import(/* @vite-ignore */ THEMING_URL);
|
|
157
|
-
|
|
158
|
-
const statusEl = document.getElementById('status');
|
|
159
|
-
const debugOutput = document.getElementById('debug-output');
|
|
160
|
-
|
|
161
|
-
function updateStatus(message, type = 'info') {
|
|
162
|
-
const prefix = type === 'success' ? '[SUCCESS]' : type === 'error' ? '[ERROR]' : '[INFO]';
|
|
163
|
-
statusEl.textContent = `${prefix} ${message}`;
|
|
164
|
-
}
|
|
165
|
-
|
|
166
|
-
function logDebug(message) {
|
|
167
|
-
const timestamp = new Date().toLocaleTimeString();
|
|
168
|
-
debugOutput.innerHTML += `<div>[${timestamp}] ${message}</div>`;
|
|
169
|
-
debugOutput.scrollTop = debugOutput.scrollHeight;
|
|
170
|
-
}
|
|
171
|
-
|
|
172
|
-
const originalLog = console.log;
|
|
173
|
-
const originalWarn = console.warn;
|
|
174
|
-
const originalError = console.error;
|
|
175
|
-
|
|
176
|
-
console.log = (...args) => {
|
|
177
|
-
originalLog(...args);
|
|
178
|
-
if (args[0] && typeof args[0] === 'string' && args[0].includes('[Prioticket DS]')) {
|
|
179
|
-
logDebug(args.join(' '));
|
|
180
|
-
}
|
|
181
|
-
};
|
|
182
|
-
|
|
183
|
-
console.warn = (...args) => {
|
|
184
|
-
originalWarn(...args);
|
|
185
|
-
if (args[0] && typeof args[0] === 'string' && args[0].includes('[Prioticket DS]')) {
|
|
186
|
-
logDebug(`[WARN] ${args.join(' ')}`);
|
|
187
|
-
}
|
|
188
|
-
};
|
|
189
|
-
|
|
190
|
-
console.error = (...args) => {
|
|
191
|
-
originalError(...args);
|
|
192
|
-
if (args[0] && typeof args[0] === 'string' && args[0].includes('[Prioticket DS]')) {
|
|
193
|
-
logDebug(`[ERROR] ${args.join(' ')}`);
|
|
194
|
-
}
|
|
195
|
-
};
|
|
196
|
-
|
|
197
|
-
const themes = {
|
|
198
|
-
default: getDefaultTheme(),
|
|
199
|
-
orange: {
|
|
200
|
-
colorPrimary: '#ff6600',
|
|
201
|
-
colorOnPrimary: '#ffffff',
|
|
202
|
-
colorPrimaryContainer: '#fff3e8',
|
|
203
|
-
colorOnPrimaryContainer: '#cc5200',
|
|
204
|
-
colorSecondary: '#ff8833',
|
|
205
|
-
colorOnSecondary: '#ffffff',
|
|
206
|
-
colorSecondaryContainer: '#fff7f2',
|
|
207
|
-
colorOnSecondaryContainer: '#cc5200',
|
|
208
|
-
colorSurface: '#fffbf7',
|
|
209
|
-
colorOnSurface: '#2d1810',
|
|
210
|
-
shapeCornerSmall: '8px',
|
|
211
|
-
shapeCornerMedium: '12px',
|
|
212
|
-
shapeCornerLarge: '16px'
|
|
213
|
-
},
|
|
214
|
-
purple: {
|
|
215
|
-
colorPrimary: '#7c4dff',
|
|
216
|
-
colorOnPrimary: '#ffffff',
|
|
217
|
-
colorPrimaryContainer: '#f1ebff',
|
|
218
|
-
colorOnPrimaryContainer: '#5722cc',
|
|
219
|
-
colorSecondary: '#9575ff',
|
|
220
|
-
colorOnSecondary: '#ffffff',
|
|
221
|
-
colorSecondaryContainer: '#f5f0ff',
|
|
222
|
-
colorOnSecondaryContainer: '#5722cc',
|
|
223
|
-
colorSurface: '#fdfbff',
|
|
224
|
-
colorOnSurface: '#1c1b1e',
|
|
225
|
-
shapeCornerSmall: '2px',
|
|
226
|
-
shapeCornerMedium: '4px',
|
|
227
|
-
shapeCornerLarge: '8px'
|
|
228
|
-
},
|
|
229
|
-
green: {
|
|
230
|
-
colorPrimary: '#4caf50',
|
|
231
|
-
colorOnPrimary: '#ffffff',
|
|
232
|
-
colorPrimaryContainer: '#e8f5e8',
|
|
233
|
-
colorOnPrimaryContainer: '#2e7d32',
|
|
234
|
-
colorSecondary: '#66bb6a',
|
|
235
|
-
colorOnSecondary: '#ffffff',
|
|
236
|
-
colorSecondaryContainer: '#f1f8e9',
|
|
237
|
-
colorOnSecondaryContainer: '#2e7d32',
|
|
238
|
-
colorSurface: '#f8fff8',
|
|
239
|
-
colorOnSurface: '#181d18',
|
|
240
|
-
shapeCornerSmall: '16px',
|
|
241
|
-
shapeCornerMedium: '20px',
|
|
242
|
-
shapeCornerLarge: '24px'
|
|
243
|
-
},
|
|
244
|
-
dark: {
|
|
245
|
-
colorPrimary: '#bb86fc',
|
|
246
|
-
colorOnPrimary: '#000000',
|
|
247
|
-
colorPrimaryContainer: '#3700b3',
|
|
248
|
-
colorOnPrimaryContainer: '#ffffff',
|
|
249
|
-
colorSecondary: '#03dac6',
|
|
250
|
-
colorOnSecondary: '#000000',
|
|
251
|
-
colorSecondaryContainer: '#018786',
|
|
252
|
-
colorOnSecondaryContainer: '#ffffff',
|
|
253
|
-
colorSurface: '#121212',
|
|
254
|
-
colorOnSurface: '#ffffff',
|
|
255
|
-
colorBackground: '#000000',
|
|
256
|
-
colorOnBackground: '#ffffff',
|
|
257
|
-
shapeCornerSmall: '4px',
|
|
258
|
-
shapeCornerMedium: '8px',
|
|
259
|
-
shapeCornerLarge: '12px'
|
|
260
|
-
}
|
|
261
|
-
};
|
|
262
|
-
|
|
263
|
-
async function applyTheme(name) {
|
|
264
|
-
const theme = themes[name];
|
|
265
|
-
if (!theme) {
|
|
266
|
-
logDebug(`[WARN] Theme "${name}" not found.`);
|
|
267
|
-
return;
|
|
268
|
-
}
|
|
269
|
-
|
|
270
|
-
try {
|
|
271
|
-
updateStatus(`Applying ${name} theme...`);
|
|
272
|
-
logDebug(`[INFO] Switching to ${name} theme.`);
|
|
273
|
-
await initialize({ theme, debug: true });
|
|
274
|
-
updateStatus(`${name.charAt(0).toUpperCase() + name.slice(1)} theme applied successfully!`, 'success');
|
|
275
|
-
} catch (error) {
|
|
276
|
-
updateStatus(`Failed to apply ${name} theme`, 'error');
|
|
277
|
-
logDebug(`[ERROR] ${error instanceof Error ? error.message : error}`);
|
|
278
|
-
}
|
|
279
|
-
}
|
|
280
|
-
|
|
281
|
-
window.applyDefaultTheme = () => applyTheme('default');
|
|
282
|
-
window.applyOrangeTheme = () => applyTheme('orange');
|
|
283
|
-
window.applyPurpleTheme = () => applyTheme('purple');
|
|
284
|
-
window.applyGreenTheme = () => applyTheme('green');
|
|
285
|
-
window.applyDarkTheme = () => applyTheme('dark');
|
|
286
|
-
|
|
287
|
-
(async () => {
|
|
288
|
-
try {
|
|
289
|
-
logDebug('[INIT] Demo initializing...');
|
|
290
|
-
logDebug('[INIT] Components loaded.');
|
|
291
|
-
logDebug('[INIT] Applying default theme...');
|
|
292
|
-
|
|
293
|
-
await initialize({ theme: themes.default, debug: true });
|
|
294
|
-
|
|
295
|
-
updateStatus('Demo ready! Click theme buttons to test.', 'success');
|
|
296
|
-
logDebug('[INIT] Demo initialization complete.');
|
|
297
|
-
} catch (error) {
|
|
298
|
-
updateStatus('Demo initialization failed', 'error');
|
|
299
|
-
logDebug(`[ERROR] ${error instanceof Error ? error.message : error}`);
|
|
300
|
-
console.error('Demo initialization error:', error);
|
|
301
|
-
}
|
|
302
|
-
})();
|
|
303
|
-
</script>
|
|
304
|
-
</body>
|
|
305
|
-
</html>
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8">
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
+
<title>Dynamic Theming Demo - Prioticket Design System</title>
|
|
7
|
+
|
|
8
|
+
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200">
|
|
9
|
+
|
|
10
|
+
<script type="importmap">
|
|
11
|
+
{
|
|
12
|
+
"imports": {
|
|
13
|
+
"lit": "https://cdn.jsdelivr.net/npm/lit@3.3.1/index.js",
|
|
14
|
+
"lit/": "https://cdn.jsdelivr.net/npm/lit@3.3.1/",
|
|
15
|
+
"lit-html": "https://cdn.jsdelivr.net/npm/lit-html@3.3.1/lit-html.js",
|
|
16
|
+
"lit-html/": "https://cdn.jsdelivr.net/npm/lit-html@3.3.1/",
|
|
17
|
+
"lit-element": "https://cdn.jsdelivr.net/npm/lit-element@4.2.1/lit-element.js",
|
|
18
|
+
"lit-element/": "https://cdn.jsdelivr.net/npm/lit-element@4.2.1/",
|
|
19
|
+
"@lit/reactive-element": "https://cdn.jsdelivr.net/npm/@lit/reactive-element@2.1.1/reactive-element.js",
|
|
20
|
+
"@lit/reactive-element/": "https://cdn.jsdelivr.net/npm/@lit/reactive-element@2.1.1/",
|
|
21
|
+
"@material/web": "https://cdn.jsdelivr.net/npm/@material/web@2.4.0/index.js",
|
|
22
|
+
"@material/web/": "https://cdn.jsdelivr.net/npm/@material/web@2.4.0/",
|
|
23
|
+
"tslib": "https://cdn.jsdelivr.net/npm/tslib@2.6.2/tslib.es6.js",
|
|
24
|
+
"tslib/": "https://cdn.jsdelivr.net/npm/tslib@2.6.2/"
|
|
25
|
+
}
|
|
26
|
+
}
|
|
27
|
+
</script>
|
|
28
|
+
|
|
29
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@prioticket/design-system-web@1.0.6/dist/theme-only.css">
|
|
30
|
+
|
|
31
|
+
<style>
|
|
32
|
+
body {
|
|
33
|
+
font-family: system-ui, -apple-system, sans-serif;
|
|
34
|
+
margin: 2rem;
|
|
35
|
+
line-height: 1.6;
|
|
36
|
+
background: var(--md-sys-color-background);
|
|
37
|
+
color: var(--md-sys-color-on-background);
|
|
38
|
+
transition: background-color 0.3s ease, color 0.3s ease;
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
.demo-section {
|
|
42
|
+
margin-bottom: 2rem;
|
|
43
|
+
padding: 1.5rem;
|
|
44
|
+
border: 1px solid var(--md-sys-color-outline, #d1d1d1);
|
|
45
|
+
border-radius: var(--md-sys-shape-corner-medium, 8px);
|
|
46
|
+
background: var(--md-sys-color-surface);
|
|
47
|
+
color: var(--md-sys-color-on-surface);
|
|
48
|
+
transition: all 0.3s ease;
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
.theme-controls {
|
|
52
|
+
display: flex;
|
|
53
|
+
gap: 1rem;
|
|
54
|
+
flex-wrap: wrap;
|
|
55
|
+
margin-bottom: 1rem;
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
.theme-controls button {
|
|
59
|
+
padding: 0.5rem 1rem;
|
|
60
|
+
border: 1px solid var(--md-sys-color-outline, #ccc);
|
|
61
|
+
border-radius: var(--md-sys-shape-corner-small, 4px);
|
|
62
|
+
background: var(--md-sys-color-surface, white);
|
|
63
|
+
color: var(--md-sys-color-on-surface, black);
|
|
64
|
+
cursor: pointer;
|
|
65
|
+
transition: all 0.2s ease;
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
.theme-controls button:hover {
|
|
69
|
+
background: var(--md-sys-color-surface-variant, #f5f5f5);
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
.component-showcase {
|
|
73
|
+
display: flex;
|
|
74
|
+
gap: 1rem;
|
|
75
|
+
flex-wrap: wrap;
|
|
76
|
+
margin-top: 1rem;
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
.status {
|
|
80
|
+
padding: 1rem;
|
|
81
|
+
border-radius: var(--md-sys-shape-corner-small, 4px);
|
|
82
|
+
background: var(--md-sys-color-primary-container, #e3f2fd);
|
|
83
|
+
color: var(--md-sys-color-on-primary-container, #0d47a1);
|
|
84
|
+
margin: 1rem 0;
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
#debug-output {
|
|
88
|
+
font-family: "Courier New", monospace;
|
|
89
|
+
background: var(--md-sys-color-surface-variant, #f5f5f5);
|
|
90
|
+
color: var(--md-sys-color-on-surface-variant, #303030);
|
|
91
|
+
padding: 1rem;
|
|
92
|
+
border-radius: var(--md-sys-shape-corner-small, 4px);
|
|
93
|
+
max-height: 300px;
|
|
94
|
+
overflow-y: auto;
|
|
95
|
+
font-size: 0.875rem;
|
|
96
|
+
line-height: 1.4;
|
|
97
|
+
}
|
|
98
|
+
</style>
|
|
99
|
+
</head>
|
|
100
|
+
<body>
|
|
101
|
+
<h1>Dynamic Theming Demo</h1>
|
|
102
|
+
|
|
103
|
+
<div class="status" id="status">
|
|
104
|
+
Loading theming system...
|
|
105
|
+
</div>
|
|
106
|
+
|
|
107
|
+
<div class="demo-section">
|
|
108
|
+
<h2>Theme Controls</h2>
|
|
109
|
+
<p>Click the buttons below to see real-time theme changes:</p>
|
|
110
|
+
<div class="theme-controls">
|
|
111
|
+
<button onclick="applyDefaultTheme()">Default Theme</button>
|
|
112
|
+
<button onclick="applyOrangeTheme()">Orange Theme</button>
|
|
113
|
+
<button onclick="applyPurpleTheme()">Purple Theme</button>
|
|
114
|
+
<button onclick="applyGreenTheme()">Green Theme</button>
|
|
115
|
+
<button onclick="applyDarkTheme()">Dark Theme</button>
|
|
116
|
+
</div>
|
|
117
|
+
</div>
|
|
118
|
+
|
|
119
|
+
<div class="demo-section">
|
|
120
|
+
<h2>Components</h2>
|
|
121
|
+
<p>Components automatically update with theme changes:</p>
|
|
122
|
+
<div class="component-showcase">
|
|
123
|
+
<pd-button>Default</pd-button>
|
|
124
|
+
<pd-button variant="outlined">Outlined</pd-button>
|
|
125
|
+
<pd-button variant="text">Text</pd-button>
|
|
126
|
+
<pd-button variant="tonal">Tonal</pd-button>
|
|
127
|
+
</div>
|
|
128
|
+
|
|
129
|
+
<div class="component-showcase" style="margin-top: 1rem;">
|
|
130
|
+
<pd-card>
|
|
131
|
+
<div style="padding: 1rem;">
|
|
132
|
+
<h3>Sample Card</h3>
|
|
133
|
+
<p>Surface colors and text adapt automatically to the selected theme.</p>
|
|
134
|
+
</div>
|
|
135
|
+
</pd-card>
|
|
136
|
+
</div>
|
|
137
|
+
</div>
|
|
138
|
+
|
|
139
|
+
<div class="demo-section">
|
|
140
|
+
<h2>Debug Output</h2>
|
|
141
|
+
<div id="debug-output">
|
|
142
|
+
<p>Theming system initializing...</p>
|
|
143
|
+
</div>
|
|
144
|
+
</div>
|
|
145
|
+
|
|
146
|
+
<script type="module">
|
|
147
|
+
const CDN_BASE = 'https://cdn.jsdelivr.net/npm';
|
|
148
|
+
const DS_BASE = `${CDN_BASE}/@prioticket/design-system-web@1.0.6/dist`;
|
|
149
|
+
const THEMING_URL = `${DS_BASE}/theming.es.js`;
|
|
150
|
+
const COMPONENTS = [
|
|
151
|
+
`${DS_BASE}/components/pd-button.es.js`,
|
|
152
|
+
`${DS_BASE}/components/pd-card.es.js`
|
|
153
|
+
];
|
|
154
|
+
|
|
155
|
+
await Promise.all(COMPONENTS.map((url) => import(/* @vite-ignore */ url)));
|
|
156
|
+
const { initialize, getDefaultTheme } = await import(/* @vite-ignore */ THEMING_URL);
|
|
157
|
+
|
|
158
|
+
const statusEl = document.getElementById('status');
|
|
159
|
+
const debugOutput = document.getElementById('debug-output');
|
|
160
|
+
|
|
161
|
+
function updateStatus(message, type = 'info') {
|
|
162
|
+
const prefix = type === 'success' ? '[SUCCESS]' : type === 'error' ? '[ERROR]' : '[INFO]';
|
|
163
|
+
statusEl.textContent = `${prefix} ${message}`;
|
|
164
|
+
}
|
|
165
|
+
|
|
166
|
+
function logDebug(message) {
|
|
167
|
+
const timestamp = new Date().toLocaleTimeString();
|
|
168
|
+
debugOutput.innerHTML += `<div>[${timestamp}] ${message}</div>`;
|
|
169
|
+
debugOutput.scrollTop = debugOutput.scrollHeight;
|
|
170
|
+
}
|
|
171
|
+
|
|
172
|
+
const originalLog = console.log;
|
|
173
|
+
const originalWarn = console.warn;
|
|
174
|
+
const originalError = console.error;
|
|
175
|
+
|
|
176
|
+
console.log = (...args) => {
|
|
177
|
+
originalLog(...args);
|
|
178
|
+
if (args[0] && typeof args[0] === 'string' && args[0].includes('[Prioticket DS]')) {
|
|
179
|
+
logDebug(args.join(' '));
|
|
180
|
+
}
|
|
181
|
+
};
|
|
182
|
+
|
|
183
|
+
console.warn = (...args) => {
|
|
184
|
+
originalWarn(...args);
|
|
185
|
+
if (args[0] && typeof args[0] === 'string' && args[0].includes('[Prioticket DS]')) {
|
|
186
|
+
logDebug(`[WARN] ${args.join(' ')}`);
|
|
187
|
+
}
|
|
188
|
+
};
|
|
189
|
+
|
|
190
|
+
console.error = (...args) => {
|
|
191
|
+
originalError(...args);
|
|
192
|
+
if (args[0] && typeof args[0] === 'string' && args[0].includes('[Prioticket DS]')) {
|
|
193
|
+
logDebug(`[ERROR] ${args.join(' ')}`);
|
|
194
|
+
}
|
|
195
|
+
};
|
|
196
|
+
|
|
197
|
+
const themes = {
|
|
198
|
+
default: getDefaultTheme(),
|
|
199
|
+
orange: {
|
|
200
|
+
colorPrimary: '#ff6600',
|
|
201
|
+
colorOnPrimary: '#ffffff',
|
|
202
|
+
colorPrimaryContainer: '#fff3e8',
|
|
203
|
+
colorOnPrimaryContainer: '#cc5200',
|
|
204
|
+
colorSecondary: '#ff8833',
|
|
205
|
+
colorOnSecondary: '#ffffff',
|
|
206
|
+
colorSecondaryContainer: '#fff7f2',
|
|
207
|
+
colorOnSecondaryContainer: '#cc5200',
|
|
208
|
+
colorSurface: '#fffbf7',
|
|
209
|
+
colorOnSurface: '#2d1810',
|
|
210
|
+
shapeCornerSmall: '8px',
|
|
211
|
+
shapeCornerMedium: '12px',
|
|
212
|
+
shapeCornerLarge: '16px'
|
|
213
|
+
},
|
|
214
|
+
purple: {
|
|
215
|
+
colorPrimary: '#7c4dff',
|
|
216
|
+
colorOnPrimary: '#ffffff',
|
|
217
|
+
colorPrimaryContainer: '#f1ebff',
|
|
218
|
+
colorOnPrimaryContainer: '#5722cc',
|
|
219
|
+
colorSecondary: '#9575ff',
|
|
220
|
+
colorOnSecondary: '#ffffff',
|
|
221
|
+
colorSecondaryContainer: '#f5f0ff',
|
|
222
|
+
colorOnSecondaryContainer: '#5722cc',
|
|
223
|
+
colorSurface: '#fdfbff',
|
|
224
|
+
colorOnSurface: '#1c1b1e',
|
|
225
|
+
shapeCornerSmall: '2px',
|
|
226
|
+
shapeCornerMedium: '4px',
|
|
227
|
+
shapeCornerLarge: '8px'
|
|
228
|
+
},
|
|
229
|
+
green: {
|
|
230
|
+
colorPrimary: '#4caf50',
|
|
231
|
+
colorOnPrimary: '#ffffff',
|
|
232
|
+
colorPrimaryContainer: '#e8f5e8',
|
|
233
|
+
colorOnPrimaryContainer: '#2e7d32',
|
|
234
|
+
colorSecondary: '#66bb6a',
|
|
235
|
+
colorOnSecondary: '#ffffff',
|
|
236
|
+
colorSecondaryContainer: '#f1f8e9',
|
|
237
|
+
colorOnSecondaryContainer: '#2e7d32',
|
|
238
|
+
colorSurface: '#f8fff8',
|
|
239
|
+
colorOnSurface: '#181d18',
|
|
240
|
+
shapeCornerSmall: '16px',
|
|
241
|
+
shapeCornerMedium: '20px',
|
|
242
|
+
shapeCornerLarge: '24px'
|
|
243
|
+
},
|
|
244
|
+
dark: {
|
|
245
|
+
colorPrimary: '#bb86fc',
|
|
246
|
+
colorOnPrimary: '#000000',
|
|
247
|
+
colorPrimaryContainer: '#3700b3',
|
|
248
|
+
colorOnPrimaryContainer: '#ffffff',
|
|
249
|
+
colorSecondary: '#03dac6',
|
|
250
|
+
colorOnSecondary: '#000000',
|
|
251
|
+
colorSecondaryContainer: '#018786',
|
|
252
|
+
colorOnSecondaryContainer: '#ffffff',
|
|
253
|
+
colorSurface: '#121212',
|
|
254
|
+
colorOnSurface: '#ffffff',
|
|
255
|
+
colorBackground: '#000000',
|
|
256
|
+
colorOnBackground: '#ffffff',
|
|
257
|
+
shapeCornerSmall: '4px',
|
|
258
|
+
shapeCornerMedium: '8px',
|
|
259
|
+
shapeCornerLarge: '12px'
|
|
260
|
+
}
|
|
261
|
+
};
|
|
262
|
+
|
|
263
|
+
async function applyTheme(name) {
|
|
264
|
+
const theme = themes[name];
|
|
265
|
+
if (!theme) {
|
|
266
|
+
logDebug(`[WARN] Theme "${name}" not found.`);
|
|
267
|
+
return;
|
|
268
|
+
}
|
|
269
|
+
|
|
270
|
+
try {
|
|
271
|
+
updateStatus(`Applying ${name} theme...`);
|
|
272
|
+
logDebug(`[INFO] Switching to ${name} theme.`);
|
|
273
|
+
await initialize({ theme, debug: true });
|
|
274
|
+
updateStatus(`${name.charAt(0).toUpperCase() + name.slice(1)} theme applied successfully!`, 'success');
|
|
275
|
+
} catch (error) {
|
|
276
|
+
updateStatus(`Failed to apply ${name} theme`, 'error');
|
|
277
|
+
logDebug(`[ERROR] ${error instanceof Error ? error.message : error}`);
|
|
278
|
+
}
|
|
279
|
+
}
|
|
280
|
+
|
|
281
|
+
window.applyDefaultTheme = () => applyTheme('default');
|
|
282
|
+
window.applyOrangeTheme = () => applyTheme('orange');
|
|
283
|
+
window.applyPurpleTheme = () => applyTheme('purple');
|
|
284
|
+
window.applyGreenTheme = () => applyTheme('green');
|
|
285
|
+
window.applyDarkTheme = () => applyTheme('dark');
|
|
286
|
+
|
|
287
|
+
(async () => {
|
|
288
|
+
try {
|
|
289
|
+
logDebug('[INIT] Demo initializing...');
|
|
290
|
+
logDebug('[INIT] Components loaded.');
|
|
291
|
+
logDebug('[INIT] Applying default theme...');
|
|
292
|
+
|
|
293
|
+
await initialize({ theme: themes.default, debug: true });
|
|
294
|
+
|
|
295
|
+
updateStatus('Demo ready! Click theme buttons to test.', 'success');
|
|
296
|
+
logDebug('[INIT] Demo initialization complete.');
|
|
297
|
+
} catch (error) {
|
|
298
|
+
updateStatus('Demo initialization failed', 'error');
|
|
299
|
+
logDebug(`[ERROR] ${error instanceof Error ? error.message : error}`);
|
|
300
|
+
console.error('Demo initialization error:', error);
|
|
301
|
+
}
|
|
302
|
+
})();
|
|
303
|
+
</script>
|
|
304
|
+
</body>
|
|
305
|
+
</html>
|