@prioticket/design-system-web 1.0.1 → 1.0.2
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/README.md +68 -0
- package/dist/demo-theming.html +331 -0
- package/dist/theming.cjs.js +1 -0
- package/dist/theming.es.js +66 -0
- package/dist/types/theming/index.d.ts +47 -0
- package/dist/types/theming/theme-service.d.ts +20 -0
- package/dist/types/theming/types.d.ts +39 -0
- package/package.json +6 -1
package/README.md
CHANGED
|
@@ -5,6 +5,7 @@ A comprehensive Web Components library built with **Lit** that provides Material
|
|
|
5
5
|
## Features
|
|
6
6
|
|
|
7
7
|
- 🎨 **Material Design 3** - Built on Google's official Material Web components
|
|
8
|
+
- 🌈 **Dynamic Theming** - Real-time theme switching without page reload
|
|
8
9
|
- 🌐 **Framework Agnostic** - Works with Angular, React, Vue, PHP, or any web technology
|
|
9
10
|
- 📦 **Tree Shakable** - Load only the components you need
|
|
10
11
|
- 🎯 **TypeScript** - Full type safety and excellent developer experience
|
|
@@ -179,6 +180,73 @@ import '@prioticket/design-system-web/components/pd-button';
|
|
|
179
180
|
| pd-tabs | Tab navigation | `components/pd-tabs.es.js` |
|
|
180
181
|
| pd-text-field | Text input fields | `components/pd-text-field.es.js` |
|
|
181
182
|
|
|
183
|
+
## Dynamic Theming
|
|
184
|
+
|
|
185
|
+
The design system supports real-time theme switching without page reload. Apply custom themes dynamically to match your brand or user preferences.
|
|
186
|
+
|
|
187
|
+
### Basic Usage
|
|
188
|
+
|
|
189
|
+
```javascript
|
|
190
|
+
// Import the theming system
|
|
191
|
+
import { initialize } from '@prioticket/design-system-web/theming';
|
|
192
|
+
|
|
193
|
+
// Apply a custom theme
|
|
194
|
+
await initialize({
|
|
195
|
+
theme: {
|
|
196
|
+
colorPrimary: '#ff6600',
|
|
197
|
+
colorOnPrimary: '#ffffff',
|
|
198
|
+
colorSurface: '#fff8f5',
|
|
199
|
+
shapeCornerSmall: '8px'
|
|
200
|
+
}
|
|
201
|
+
});
|
|
202
|
+
```
|
|
203
|
+
|
|
204
|
+
### CDN Usage
|
|
205
|
+
|
|
206
|
+
```html
|
|
207
|
+
<script type="module">
|
|
208
|
+
import { initialize } from 'https://cdn.jsdelivr.net/npm/@prioticket/design-system-web@latest/dist/theming.es.js';
|
|
209
|
+
|
|
210
|
+
// Apply orange theme
|
|
211
|
+
await initialize({
|
|
212
|
+
theme: {
|
|
213
|
+
colorPrimary: '#ff6600',
|
|
214
|
+
colorPrimaryContainer: '#fff3e8',
|
|
215
|
+
shapeCornerMedium: '12px'
|
|
216
|
+
}
|
|
217
|
+
});
|
|
218
|
+
</script>
|
|
219
|
+
```
|
|
220
|
+
|
|
221
|
+
### Supported Theme Tokens
|
|
222
|
+
|
|
223
|
+
- **Colors**: `colorPrimary`, `colorOnPrimary`, `colorPrimaryContainer`, `colorSecondary`, `colorSurface`, `colorOnSurface`, `colorBackground`, `colorError`
|
|
224
|
+
- **Shapes**: `shapeCornerSmall`, `shapeCornerMedium`, `shapeCornerLarge`
|
|
225
|
+
|
|
226
|
+
### Framework Examples
|
|
227
|
+
|
|
228
|
+
**React:**
|
|
229
|
+
```jsx
|
|
230
|
+
useEffect(() => {
|
|
231
|
+
initialize({
|
|
232
|
+
theme: { colorPrimary: '#4caf50' }
|
|
233
|
+
});
|
|
234
|
+
}, []);
|
|
235
|
+
```
|
|
236
|
+
|
|
237
|
+
**Angular:**
|
|
238
|
+
```typescript
|
|
239
|
+
ngOnInit() {
|
|
240
|
+
initialize({
|
|
241
|
+
theme: { colorPrimary: '#2196f3' }
|
|
242
|
+
});
|
|
243
|
+
}
|
|
244
|
+
```
|
|
245
|
+
|
|
246
|
+
### Live Demo
|
|
247
|
+
|
|
248
|
+
Run `npm run dev` and visit `/demo-theming.html` to see real-time theme switching in action.
|
|
249
|
+
|
|
182
250
|
## Customizing Fonts
|
|
183
251
|
|
|
184
252
|
The design system is built to work with any font stack. The theme CSS uses CSS custom properties:
|
|
@@ -0,0 +1,331 @@
|
|
|
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
|
+
<!-- Load Material Icons font -->
|
|
9
|
+
<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">
|
|
10
|
+
|
|
11
|
+
<!-- Load theme CSS -->
|
|
12
|
+
<link rel="stylesheet" href="/dist/theme-only.css">
|
|
13
|
+
|
|
14
|
+
<style>
|
|
15
|
+
body {
|
|
16
|
+
font-family: system-ui, -apple-system, sans-serif;
|
|
17
|
+
margin: 2rem;
|
|
18
|
+
line-height: 1.6;
|
|
19
|
+
background: var(--md-sys-color-background);
|
|
20
|
+
color: var(--md-sys-color-on-background);
|
|
21
|
+
transition: background-color 0.3s ease, color 0.3s ease;
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
.demo-section {
|
|
25
|
+
margin-bottom: 2rem;
|
|
26
|
+
padding: 1.5rem;
|
|
27
|
+
border: 1px solid var(--md-sys-color-outline, #d1d1d1);
|
|
28
|
+
border-radius: var(--md-sys-shape-corner-medium, 8px);
|
|
29
|
+
background: var(--md-sys-color-surface);
|
|
30
|
+
color: var(--md-sys-color-on-surface);
|
|
31
|
+
transition: all 0.3s ease;
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
.theme-controls {
|
|
35
|
+
display: flex;
|
|
36
|
+
gap: 1rem;
|
|
37
|
+
flex-wrap: wrap;
|
|
38
|
+
margin-bottom: 1rem;
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
.theme-controls button {
|
|
42
|
+
padding: 0.5rem 1rem;
|
|
43
|
+
border: 1px solid var(--md-sys-color-outline, #ccc);
|
|
44
|
+
border-radius: var(--md-sys-shape-corner-small, 4px);
|
|
45
|
+
background: var(--md-sys-color-surface, white);
|
|
46
|
+
color: var(--md-sys-color-on-surface, black);
|
|
47
|
+
cursor: pointer;
|
|
48
|
+
transition: all 0.2s ease;
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
.theme-controls button:hover {
|
|
52
|
+
background: var(--md-sys-color-surface-variant, #f5f5f5);
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
.component-showcase {
|
|
56
|
+
display: flex;
|
|
57
|
+
gap: 1rem;
|
|
58
|
+
flex-wrap: wrap;
|
|
59
|
+
margin-top: 1rem;
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
.status {
|
|
63
|
+
padding: 1rem;
|
|
64
|
+
border-radius: var(--md-sys-shape-corner-small, 4px);
|
|
65
|
+
background: var(--md-sys-color-primary-container, #e3f2fd);
|
|
66
|
+
color: var(--md-sys-color-on-primary-container, #0d47a1);
|
|
67
|
+
margin: 1rem 0;
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
#debug-output {
|
|
71
|
+
font-family: 'Courier New', monospace;
|
|
72
|
+
background: var(--md-sys-color-surface-variant, #f5f5f5);
|
|
73
|
+
color: var(--md-sys-color-on-surface-variant, #303030);
|
|
74
|
+
padding: 1rem;
|
|
75
|
+
border-radius: var(--md-sys-shape-corner-small, 4px);
|
|
76
|
+
max-height: 300px;
|
|
77
|
+
overflow-y: auto;
|
|
78
|
+
font-size: 0.875rem;
|
|
79
|
+
line-height: 1.4;
|
|
80
|
+
}
|
|
81
|
+
</style>
|
|
82
|
+
</head>
|
|
83
|
+
<body>
|
|
84
|
+
<h1>🎨 Dynamic Theming Demo</h1>
|
|
85
|
+
|
|
86
|
+
<div class="status" id="status">
|
|
87
|
+
⚡ Loading theming system...
|
|
88
|
+
</div>
|
|
89
|
+
|
|
90
|
+
<div class="demo-section">
|
|
91
|
+
<h2>Theme Controls</h2>
|
|
92
|
+
<p>Click the buttons below to see real-time theme changes:</p>
|
|
93
|
+
<div class="theme-controls">
|
|
94
|
+
<button onclick="applyDefaultTheme()">Default Theme</button>
|
|
95
|
+
<button onclick="applyOrangeTheme()">🧡 Orange Theme</button>
|
|
96
|
+
<button onclick="applyPurpleTheme()">💜 Purple Theme</button>
|
|
97
|
+
<button onclick="applyGreenTheme()">💚 Green Theme</button>
|
|
98
|
+
<button onclick="applyDarkTheme()">🌙 Dark Theme</button>
|
|
99
|
+
</div>
|
|
100
|
+
</div>
|
|
101
|
+
|
|
102
|
+
<div class="demo-section">
|
|
103
|
+
<h2>Components</h2>
|
|
104
|
+
<p>Components automatically update with theme changes:</p>
|
|
105
|
+
<div class="component-showcase">
|
|
106
|
+
<pd-button>Default</pd-button>
|
|
107
|
+
<pd-button variant="outlined">Outlined</pd-button>
|
|
108
|
+
<pd-button variant="text">Text</pd-button>
|
|
109
|
+
<pd-button variant="tonal">Tonal</pd-button>
|
|
110
|
+
</div>
|
|
111
|
+
|
|
112
|
+
<div class="component-showcase" style="margin-top: 1rem;">
|
|
113
|
+
<pd-card>
|
|
114
|
+
<div style="padding: 1rem;">
|
|
115
|
+
<h3>Sample Card</h3>
|
|
116
|
+
<p>Surface colors and text adapt automatically to the selected theme.</p>
|
|
117
|
+
</div>
|
|
118
|
+
</pd-card>
|
|
119
|
+
</div>
|
|
120
|
+
</div>
|
|
121
|
+
|
|
122
|
+
<div class="demo-section">
|
|
123
|
+
<h2>Debug Output</h2>
|
|
124
|
+
<div id="debug-output">
|
|
125
|
+
<p>🚀 Theming system initializing...</p>
|
|
126
|
+
</div>
|
|
127
|
+
</div>
|
|
128
|
+
|
|
129
|
+
<!-- Load dependencies and components -->
|
|
130
|
+
<script type="module">
|
|
131
|
+
// Import components and theming from the source (for development)
|
|
132
|
+
import '../src/components/pd-button.ts';
|
|
133
|
+
import '../src/components/pd-card.ts';
|
|
134
|
+
|
|
135
|
+
// Import theming system
|
|
136
|
+
import { initialize, getDefaultTheme } from '../src/theming/index.ts';
|
|
137
|
+
|
|
138
|
+
// Status and debug elements
|
|
139
|
+
const statusEl = document.getElementById('status');
|
|
140
|
+
const debugOutput = document.getElementById('debug-output');
|
|
141
|
+
|
|
142
|
+
function updateStatus(message, type = 'info') {
|
|
143
|
+
const emoji = type === 'success' ? '✅' : type === 'error' ? '❌' : '⚡';
|
|
144
|
+
statusEl.innerHTML = `${emoji} ${message}`;
|
|
145
|
+
}
|
|
146
|
+
|
|
147
|
+
function logDebug(message) {
|
|
148
|
+
const timestamp = new Date().toLocaleTimeString();
|
|
149
|
+
debugOutput.innerHTML += `<div>[${timestamp}] ${message}</div>`;
|
|
150
|
+
debugOutput.scrollTop = debugOutput.scrollHeight;
|
|
151
|
+
}
|
|
152
|
+
|
|
153
|
+
// Override console methods to capture theming logs
|
|
154
|
+
const originalLog = console.log;
|
|
155
|
+
const originalWarn = console.warn;
|
|
156
|
+
const originalError = console.error;
|
|
157
|
+
|
|
158
|
+
console.log = (...args) => {
|
|
159
|
+
originalLog(...args);
|
|
160
|
+
if (args[0] && typeof args[0] === 'string' && args[0].includes('[Prioticket DS]')) {
|
|
161
|
+
logDebug(args.join(' '));
|
|
162
|
+
}
|
|
163
|
+
};
|
|
164
|
+
|
|
165
|
+
console.warn = (...args) => {
|
|
166
|
+
originalWarn(...args);
|
|
167
|
+
if (args[0] && typeof args[0] === 'string' && args[0].includes('[Prioticket DS]')) {
|
|
168
|
+
logDebug(`⚠️ ${args.join(' ')}`);
|
|
169
|
+
}
|
|
170
|
+
};
|
|
171
|
+
|
|
172
|
+
console.error = (...args) => {
|
|
173
|
+
originalError(...args);
|
|
174
|
+
if (args[0] && typeof args[0] === 'string' && args[0].includes('[Prioticket DS]')) {
|
|
175
|
+
logDebug(`❌ ${args.join(' ')}`);
|
|
176
|
+
}
|
|
177
|
+
};
|
|
178
|
+
|
|
179
|
+
// Theme configurations
|
|
180
|
+
const themes = {
|
|
181
|
+
default: getDefaultTheme(),
|
|
182
|
+
|
|
183
|
+
orange: {
|
|
184
|
+
colorPrimary: '#ff6600',
|
|
185
|
+
colorOnPrimary: '#ffffff',
|
|
186
|
+
colorPrimaryContainer: '#fff3e8',
|
|
187
|
+
colorOnPrimaryContainer: '#cc5200',
|
|
188
|
+
colorSecondary: '#ff8833',
|
|
189
|
+
colorOnSecondary: '#ffffff',
|
|
190
|
+
colorSecondaryContainer: '#fff7f2',
|
|
191
|
+
colorOnSecondaryContainer: '#cc5200',
|
|
192
|
+
colorSurface: '#fffbf7',
|
|
193
|
+
colorOnSurface: '#2d1810',
|
|
194
|
+
shapeCornerSmall: '8px',
|
|
195
|
+
shapeCornerMedium: '12px',
|
|
196
|
+
shapeCornerLarge: '16px'
|
|
197
|
+
},
|
|
198
|
+
|
|
199
|
+
purple: {
|
|
200
|
+
colorPrimary: '#7c4dff',
|
|
201
|
+
colorOnPrimary: '#ffffff',
|
|
202
|
+
colorPrimaryContainer: '#f1ebff',
|
|
203
|
+
colorOnPrimaryContainer: '#5722cc',
|
|
204
|
+
colorSecondary: '#9575ff',
|
|
205
|
+
colorOnSecondary: '#ffffff',
|
|
206
|
+
colorSecondaryContainer: '#f5f0ff',
|
|
207
|
+
colorOnSecondaryContainer: '#5722cc',
|
|
208
|
+
colorSurface: '#fdfbff',
|
|
209
|
+
colorOnSurface: '#1c1b1e',
|
|
210
|
+
shapeCornerSmall: '2px',
|
|
211
|
+
shapeCornerMedium: '4px',
|
|
212
|
+
shapeCornerLarge: '8px'
|
|
213
|
+
},
|
|
214
|
+
|
|
215
|
+
green: {
|
|
216
|
+
colorPrimary: '#4caf50',
|
|
217
|
+
colorOnPrimary: '#ffffff',
|
|
218
|
+
colorPrimaryContainer: '#e8f5e8',
|
|
219
|
+
colorOnPrimaryContainer: '#2e7d32',
|
|
220
|
+
colorSecondary: '#66bb6a',
|
|
221
|
+
colorOnSecondary: '#ffffff',
|
|
222
|
+
colorSecondaryContainer: '#f1f8e9',
|
|
223
|
+
colorOnSecondaryContainer: '#2e7d32',
|
|
224
|
+
colorSurface: '#f8fff8',
|
|
225
|
+
colorOnSurface: '#181d18',
|
|
226
|
+
shapeCornerSmall: '16px',
|
|
227
|
+
shapeCornerMedium: '20px',
|
|
228
|
+
shapeCornerLarge: '24px'
|
|
229
|
+
},
|
|
230
|
+
|
|
231
|
+
dark: {
|
|
232
|
+
colorPrimary: '#bb86fc',
|
|
233
|
+
colorOnPrimary: '#000000',
|
|
234
|
+
colorPrimaryContainer: '#3700b3',
|
|
235
|
+
colorOnPrimaryContainer: '#ffffff',
|
|
236
|
+
colorSecondary: '#03dac6',
|
|
237
|
+
colorOnSecondary: '#000000',
|
|
238
|
+
colorSecondaryContainer: '#018786',
|
|
239
|
+
colorOnSecondaryContainer: '#ffffff',
|
|
240
|
+
colorSurface: '#121212',
|
|
241
|
+
colorOnSurface: '#ffffff',
|
|
242
|
+
colorBackground: '#000000',
|
|
243
|
+
colorOnBackground: '#ffffff',
|
|
244
|
+
shapeCornerSmall: '4px',
|
|
245
|
+
shapeCornerMedium: '8px',
|
|
246
|
+
shapeCornerLarge: '12px'
|
|
247
|
+
}
|
|
248
|
+
};
|
|
249
|
+
|
|
250
|
+
// Theme application functions
|
|
251
|
+
window.applyDefaultTheme = async () => {
|
|
252
|
+
try {
|
|
253
|
+
updateStatus('Applying default theme...');
|
|
254
|
+
logDebug('🎨 Switching to default theme');
|
|
255
|
+
await initialize({ theme: themes.default, debug: true });
|
|
256
|
+
updateStatus('Default theme applied successfully!', 'success');
|
|
257
|
+
} catch (error) {
|
|
258
|
+
updateStatus('Failed to apply default theme', 'error');
|
|
259
|
+
logDebug(`❌ Error: ${error.message}`);
|
|
260
|
+
}
|
|
261
|
+
};
|
|
262
|
+
|
|
263
|
+
window.applyOrangeTheme = async () => {
|
|
264
|
+
try {
|
|
265
|
+
updateStatus('Applying orange theme...');
|
|
266
|
+
logDebug('🧡 Switching to orange theme');
|
|
267
|
+
await initialize({ theme: themes.orange, debug: true });
|
|
268
|
+
updateStatus('Orange theme applied successfully!', 'success');
|
|
269
|
+
} catch (error) {
|
|
270
|
+
updateStatus('Failed to apply orange theme', 'error');
|
|
271
|
+
logDebug(`❌ Error: ${error.message}`);
|
|
272
|
+
}
|
|
273
|
+
};
|
|
274
|
+
|
|
275
|
+
window.applyPurpleTheme = async () => {
|
|
276
|
+
try {
|
|
277
|
+
updateStatus('Applying purple theme...');
|
|
278
|
+
logDebug('💜 Switching to purple theme');
|
|
279
|
+
await initialize({ theme: themes.purple, debug: true });
|
|
280
|
+
updateStatus('Purple theme applied successfully!', 'success');
|
|
281
|
+
} catch (error) {
|
|
282
|
+
updateStatus('Failed to apply purple theme', 'error');
|
|
283
|
+
logDebug(`❌ Error: ${error.message}`);
|
|
284
|
+
}
|
|
285
|
+
};
|
|
286
|
+
|
|
287
|
+
window.applyGreenTheme = async () => {
|
|
288
|
+
try {
|
|
289
|
+
updateStatus('Applying green theme...');
|
|
290
|
+
logDebug('💚 Switching to green theme');
|
|
291
|
+
await initialize({ theme: themes.green, debug: true });
|
|
292
|
+
updateStatus('Green theme applied successfully!', 'success');
|
|
293
|
+
} catch (error) {
|
|
294
|
+
updateStatus('Failed to apply green theme', 'error');
|
|
295
|
+
logDebug(`❌ Error: ${error.message}`);
|
|
296
|
+
}
|
|
297
|
+
};
|
|
298
|
+
|
|
299
|
+
window.applyDarkTheme = async () => {
|
|
300
|
+
try {
|
|
301
|
+
updateStatus('Applying dark theme...');
|
|
302
|
+
logDebug('🌙 Switching to dark theme');
|
|
303
|
+
await initialize({ theme: themes.dark, debug: true });
|
|
304
|
+
updateStatus('Dark theme applied successfully!', 'success');
|
|
305
|
+
} catch (error) {
|
|
306
|
+
updateStatus('Failed to apply dark theme', 'error');
|
|
307
|
+
logDebug(`❌ Error: ${error.message}`);
|
|
308
|
+
}
|
|
309
|
+
};
|
|
310
|
+
|
|
311
|
+
// Initialize demo
|
|
312
|
+
(async () => {
|
|
313
|
+
try {
|
|
314
|
+
logDebug('🚀 Demo initializing...');
|
|
315
|
+
logDebug('📦 Components loaded');
|
|
316
|
+
logDebug('🎨 Applying default theme...');
|
|
317
|
+
|
|
318
|
+
await initialize({ theme: themes.default, debug: true });
|
|
319
|
+
|
|
320
|
+
updateStatus('Demo ready! Click theme buttons to test.', 'success');
|
|
321
|
+
logDebug('✅ Demo initialization complete!');
|
|
322
|
+
|
|
323
|
+
} catch (error) {
|
|
324
|
+
updateStatus('Demo initialization failed', 'error');
|
|
325
|
+
logDebug(`❌ Initialization error: ${error.message}`);
|
|
326
|
+
console.error('Demo initialization error:', error);
|
|
327
|
+
}
|
|
328
|
+
})();
|
|
329
|
+
</script>
|
|
330
|
+
</body>
|
|
331
|
+
</html>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const f={colorPrimary:"#006eff",colorOnPrimary:"#ffffff",colorPrimaryContainer:"#eff5fc",colorOnPrimaryContainer:"#006eff",colorSecondary:"#ffffff",colorOnSecondary:"#006eff",colorSecondaryContainer:"#eff5fc",colorOnSecondaryContainer:"#006eff",colorSurface:"#fcfcfc",colorOnSurface:"#080808",colorBackground:"#ffffff",colorOnBackground:"#080808",colorError:"#e84020",colorOnError:"#ffffff",shapeCornerSmall:"4px",shapeCornerMedium:"8px",shapeCornerLarge:"12px"};function t(o){const r={};return o.colorPrimary&&(r["--md-sys-color-primary"]=o.colorPrimary),o.colorOnPrimary&&(r["--md-sys-color-on-primary"]=o.colorOnPrimary),o.colorPrimaryContainer&&(r["--md-sys-color-primary-container"]=o.colorPrimaryContainer),o.colorOnPrimaryContainer&&(r["--md-sys-color-on-primary-container"]=o.colorOnPrimaryContainer),o.colorSecondary&&(r["--md-sys-color-secondary"]=o.colorSecondary),o.colorOnSecondary&&(r["--md-sys-color-on-secondary"]=o.colorOnSecondary),o.colorSecondaryContainer&&(r["--md-sys-color-secondary-container"]=o.colorSecondaryContainer),o.colorOnSecondaryContainer&&(r["--md-sys-color-on-secondary-container"]=o.colorOnSecondaryContainer),o.colorSurface&&(r["--md-sys-color-surface"]=o.colorSurface),o.colorOnSurface&&(r["--md-sys-color-on-surface"]=o.colorOnSurface),o.colorBackground&&(r["--md-sys-color-background"]=o.colorBackground),o.colorOnBackground&&(r["--md-sys-color-on-background"]=o.colorOnBackground),o.colorError&&(r["--md-sys-color-error"]=o.colorError),o.colorOnError&&(r["--md-sys-color-on-error"]=o.colorOnError),o.shapeCornerSmall&&(r["--md-sys-shape-corner-small"]=o.shapeCornerSmall),o.shapeCornerMedium&&(r["--md-sys-shape-corner-medium"]=o.shapeCornerMedium),o.shapeCornerLarge&&(r["--md-sys-shape-corner-large"]=o.shapeCornerLarge),r}function l(o,r=!1){r&&console.log("[Prioticket DS] Applying theme:",o);const i=t(o),c=document.documentElement;Object.entries(i).forEach(([n,e])=>{c.style.setProperty(n,e),r&&console.log(`[Prioticket DS] Set ${n}: ${e}`)}),r&&console.log(`[Prioticket DS] Applied ${Object.keys(i).length} theme properties`)}async function y(o){return console.warn("[Prioticket DS] JWT theme fetching not yet implemented - using fallback theme"),Promise.resolve(f)}function a(){return{...f}}async function d(o={}){const{theme:r,jwt:i,debug:c=!1}=o;c&&console.log("[Prioticket DS] Initializing with config:",o);let n=null;try{if(r&&typeof r=="object")n=r,c&&console.log("[Prioticket DS] Using provided theme object");else if(i){c&&console.log("[Prioticket DS] Fetching theme using JWT");try{n=await y(i)}catch(e){console.error("[Prioticket DS] Failed to fetch theme with JWT:",e),n=null}}n||(n=a(),c&&console.log("[Prioticket DS] Using default fallback theme")),l(n,c),c&&console.log("[Prioticket DS] Theme initialization completed successfully")}catch(e){console.error("[Prioticket DS] Theme initialization failed:",e);const s=a();l(s,c),c&&console.log("[Prioticket DS] Applied fallback theme due to error")}}function u(o,r=!1){l(o,r)}exports.applyTheme=u;exports.getDefaultTheme=a;exports.initialize=d;
|
|
@@ -0,0 +1,66 @@
|
|
|
1
|
+
const f = {
|
|
2
|
+
colorPrimary: "#006eff",
|
|
3
|
+
colorOnPrimary: "#ffffff",
|
|
4
|
+
colorPrimaryContainer: "#eff5fc",
|
|
5
|
+
colorOnPrimaryContainer: "#006eff",
|
|
6
|
+
colorSecondary: "#ffffff",
|
|
7
|
+
colorOnSecondary: "#006eff",
|
|
8
|
+
colorSecondaryContainer: "#eff5fc",
|
|
9
|
+
colorOnSecondaryContainer: "#006eff",
|
|
10
|
+
colorSurface: "#fcfcfc",
|
|
11
|
+
colorOnSurface: "#080808",
|
|
12
|
+
colorBackground: "#ffffff",
|
|
13
|
+
colorOnBackground: "#080808",
|
|
14
|
+
colorError: "#e84020",
|
|
15
|
+
colorOnError: "#ffffff",
|
|
16
|
+
shapeCornerSmall: "4px",
|
|
17
|
+
shapeCornerMedium: "8px",
|
|
18
|
+
shapeCornerLarge: "12px"
|
|
19
|
+
};
|
|
20
|
+
function t(o) {
|
|
21
|
+
const r = {};
|
|
22
|
+
return o.colorPrimary && (r["--md-sys-color-primary"] = o.colorPrimary), o.colorOnPrimary && (r["--md-sys-color-on-primary"] = o.colorOnPrimary), o.colorPrimaryContainer && (r["--md-sys-color-primary-container"] = o.colorPrimaryContainer), o.colorOnPrimaryContainer && (r["--md-sys-color-on-primary-container"] = o.colorOnPrimaryContainer), o.colorSecondary && (r["--md-sys-color-secondary"] = o.colorSecondary), o.colorOnSecondary && (r["--md-sys-color-on-secondary"] = o.colorOnSecondary), o.colorSecondaryContainer && (r["--md-sys-color-secondary-container"] = o.colorSecondaryContainer), o.colorOnSecondaryContainer && (r["--md-sys-color-on-secondary-container"] = o.colorOnSecondaryContainer), o.colorSurface && (r["--md-sys-color-surface"] = o.colorSurface), o.colorOnSurface && (r["--md-sys-color-on-surface"] = o.colorOnSurface), o.colorBackground && (r["--md-sys-color-background"] = o.colorBackground), o.colorOnBackground && (r["--md-sys-color-on-background"] = o.colorOnBackground), o.colorError && (r["--md-sys-color-error"] = o.colorError), o.colorOnError && (r["--md-sys-color-on-error"] = o.colorOnError), o.shapeCornerSmall && (r["--md-sys-shape-corner-small"] = o.shapeCornerSmall), o.shapeCornerMedium && (r["--md-sys-shape-corner-medium"] = o.shapeCornerMedium), o.shapeCornerLarge && (r["--md-sys-shape-corner-large"] = o.shapeCornerLarge), r;
|
|
23
|
+
}
|
|
24
|
+
function l(o, r = !1) {
|
|
25
|
+
r && console.log("[Prioticket DS] Applying theme:", o);
|
|
26
|
+
const i = t(o), c = document.documentElement;
|
|
27
|
+
Object.entries(i).forEach(([n, e]) => {
|
|
28
|
+
c.style.setProperty(n, e), r && console.log(`[Prioticket DS] Set ${n}: ${e}`);
|
|
29
|
+
}), r && console.log(`[Prioticket DS] Applied ${Object.keys(i).length} theme properties`);
|
|
30
|
+
}
|
|
31
|
+
async function y(o) {
|
|
32
|
+
return console.warn("[Prioticket DS] JWT theme fetching not yet implemented - using fallback theme"), Promise.resolve(f);
|
|
33
|
+
}
|
|
34
|
+
function a() {
|
|
35
|
+
return { ...f };
|
|
36
|
+
}
|
|
37
|
+
async function d(o = {}) {
|
|
38
|
+
const { theme: r, jwt: i, debug: c = !1 } = o;
|
|
39
|
+
c && console.log("[Prioticket DS] Initializing with config:", o);
|
|
40
|
+
let n = null;
|
|
41
|
+
try {
|
|
42
|
+
if (r && typeof r == "object")
|
|
43
|
+
n = r, c && console.log("[Prioticket DS] Using provided theme object");
|
|
44
|
+
else if (i) {
|
|
45
|
+
c && console.log("[Prioticket DS] Fetching theme using JWT");
|
|
46
|
+
try {
|
|
47
|
+
n = await y(i);
|
|
48
|
+
} catch (e) {
|
|
49
|
+
console.error("[Prioticket DS] Failed to fetch theme with JWT:", e), n = null;
|
|
50
|
+
}
|
|
51
|
+
}
|
|
52
|
+
n || (n = a(), c && console.log("[Prioticket DS] Using default fallback theme")), l(n, c), c && console.log("[Prioticket DS] Theme initialization completed successfully");
|
|
53
|
+
} catch (e) {
|
|
54
|
+
console.error("[Prioticket DS] Theme initialization failed:", e);
|
|
55
|
+
const s = a();
|
|
56
|
+
l(s, c), c && console.log("[Prioticket DS] Applied fallback theme due to error");
|
|
57
|
+
}
|
|
58
|
+
}
|
|
59
|
+
function u(o, r = !1) {
|
|
60
|
+
l(o, r);
|
|
61
|
+
}
|
|
62
|
+
export {
|
|
63
|
+
u as applyTheme,
|
|
64
|
+
a as getDefaultTheme,
|
|
65
|
+
d as initialize
|
|
66
|
+
};
|
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
import type { PrioticketInitConfig, PrioticketThemeConfig } from './types.js';
|
|
2
|
+
export type { PrioticketInitConfig, PrioticketThemeConfig } from './types.js';
|
|
3
|
+
export { getDefaultTheme } from './theme-service.js';
|
|
4
|
+
/**
|
|
5
|
+
* The definitive initialization function for any Prioticket UI.
|
|
6
|
+
* It intelligently applies the theme based on the provided configuration.
|
|
7
|
+
*
|
|
8
|
+
* @param config Configuration object with theme data or JWT
|
|
9
|
+
* @returns Promise that resolves when theme is applied
|
|
10
|
+
*
|
|
11
|
+
* @example
|
|
12
|
+
* ```typescript
|
|
13
|
+
* // Apply a direct theme object
|
|
14
|
+
* await initialize({
|
|
15
|
+
* theme: {
|
|
16
|
+
* colorPrimary: '#ff6600',
|
|
17
|
+
* colorOnPrimary: '#ffffff'
|
|
18
|
+
* }
|
|
19
|
+
* });
|
|
20
|
+
*
|
|
21
|
+
* // TODO: Use JWT to fetch user theme (when API is ready)
|
|
22
|
+
* await initialize({
|
|
23
|
+
* jwt: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...'
|
|
24
|
+
* });
|
|
25
|
+
* ```
|
|
26
|
+
*/
|
|
27
|
+
export declare function initialize(config?: PrioticketInitConfig): Promise<void>;
|
|
28
|
+
/**
|
|
29
|
+
* Convenience function to apply a theme directly without configuration
|
|
30
|
+
* @param theme Theme configuration object
|
|
31
|
+
* @param debug Enable debug logging
|
|
32
|
+
*/
|
|
33
|
+
export declare function applyTheme(theme: PrioticketThemeConfig, debug?: boolean): void;
|
|
34
|
+
/**
|
|
35
|
+
* TODO: Add theme caching functionality
|
|
36
|
+
* This could include:
|
|
37
|
+
* - localStorage caching for theme persistence
|
|
38
|
+
* - Cache invalidation strategies
|
|
39
|
+
* - Memory caching for performance
|
|
40
|
+
*/
|
|
41
|
+
/**
|
|
42
|
+
* TODO: Add theme validation
|
|
43
|
+
* This could include:
|
|
44
|
+
* - Color contrast validation
|
|
45
|
+
* - Required token validation
|
|
46
|
+
* - Theme schema validation
|
|
47
|
+
*/
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import type { PrioticketThemeConfig } from './types.js';
|
|
2
|
+
/**
|
|
3
|
+
* Applies theme configuration to the document root
|
|
4
|
+
* @param themeConfig Theme configuration object
|
|
5
|
+
* @param debug Enable debug logging
|
|
6
|
+
*/
|
|
7
|
+
export declare function applyThemeToDocument(themeConfig: PrioticketThemeConfig, debug?: boolean): void;
|
|
8
|
+
/**
|
|
9
|
+
* TODO: Fetch theme configuration from API using JWT
|
|
10
|
+
* This will be implemented when the theme API is available
|
|
11
|
+
*
|
|
12
|
+
* @param jwt JWT token for authentication
|
|
13
|
+
* @returns Promise resolving to theme configuration
|
|
14
|
+
*/
|
|
15
|
+
export declare function fetchThemeFromApi(jwt: string): Promise<PrioticketThemeConfig>;
|
|
16
|
+
/**
|
|
17
|
+
* Gets the default fallback theme
|
|
18
|
+
* @returns Default theme configuration
|
|
19
|
+
*/
|
|
20
|
+
export declare function getDefaultTheme(): PrioticketThemeConfig;
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Basic theme configuration supporting core Material Design tokens
|
|
3
|
+
*/
|
|
4
|
+
export interface PrioticketThemeConfig {
|
|
5
|
+
colorPrimary?: string;
|
|
6
|
+
colorOnPrimary?: string;
|
|
7
|
+
colorPrimaryContainer?: string;
|
|
8
|
+
colorOnPrimaryContainer?: string;
|
|
9
|
+
colorSecondary?: string;
|
|
10
|
+
colorOnSecondary?: string;
|
|
11
|
+
colorSecondaryContainer?: string;
|
|
12
|
+
colorOnSecondaryContainer?: string;
|
|
13
|
+
colorSurface?: string;
|
|
14
|
+
colorOnSurface?: string;
|
|
15
|
+
colorBackground?: string;
|
|
16
|
+
colorOnBackground?: string;
|
|
17
|
+
colorError?: string;
|
|
18
|
+
colorOnError?: string;
|
|
19
|
+
shapeCornerSmall?: string;
|
|
20
|
+
shapeCornerMedium?: string;
|
|
21
|
+
shapeCornerLarge?: string;
|
|
22
|
+
}
|
|
23
|
+
/**
|
|
24
|
+
* Configuration for the Prioticket Design System initialization
|
|
25
|
+
*/
|
|
26
|
+
export interface PrioticketInitConfig {
|
|
27
|
+
/** Direct theme object to apply */
|
|
28
|
+
theme?: PrioticketThemeConfig;
|
|
29
|
+
/** JWT token for fetching user-specific theme (TODO: implement API integration) */
|
|
30
|
+
jwt?: string;
|
|
31
|
+
/** Enable debug logging */
|
|
32
|
+
debug?: boolean;
|
|
33
|
+
}
|
|
34
|
+
/**
|
|
35
|
+
* Internal mapping from theme config to CSS custom properties
|
|
36
|
+
*/
|
|
37
|
+
export interface CSSCustomPropertyMap {
|
|
38
|
+
[key: string]: string;
|
|
39
|
+
}
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@prioticket/design-system-web",
|
|
3
3
|
"private": false,
|
|
4
|
-
"version": "1.0.
|
|
4
|
+
"version": "1.0.2",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "./dist/prioticket-design-system-web.umd.js",
|
|
7
7
|
"module": "./dist/prioticket-design-system-web.es.js",
|
|
@@ -28,6 +28,11 @@
|
|
|
28
28
|
"import": "./dist/theme-with-fonts.es.js",
|
|
29
29
|
"require": "./dist/theme-with-fonts.cjs.js"
|
|
30
30
|
},
|
|
31
|
+
"./theming": {
|
|
32
|
+
"types": "./dist/types/theming/index.d.ts",
|
|
33
|
+
"import": "./dist/theming.es.js",
|
|
34
|
+
"require": "./dist/theming.cjs.js"
|
|
35
|
+
},
|
|
31
36
|
"./components/*": {
|
|
32
37
|
"types": "./dist/types/components/*.d.ts",
|
|
33
38
|
"import": "./dist/components/*.es.js",
|