@nex125/seatmap-viewer 0.1.8 → 0.1.9

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.
Files changed (2) hide show
  1. package/package.json +1 -1
  2. package/src/theme/seatmapViewerTheme.css +325 -24
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@nex125/seatmap-viewer",
3
- "version": "0.1.8",
3
+ "version": "0.1.9",
4
4
  "type": "module",
5
5
  "main": "./dist/index.cjs",
6
6
  "module": "./dist/index.js",
package/src/theme/seatmapViewerTheme.css CHANGED
@@ -1,30 +1,63 @@
1
1
  .seatmap-viewer-theme {
2
- --seatmap-viewer-surface: rgba(24, 24, 24, 0.94);
3
- --seatmap-viewer-surface-elevated: rgba(28, 28, 28, 0.98);
4
- --seatmap-viewer-surface-muted: #212121;
5
- --seatmap-viewer-border: rgba(92, 89, 87, 0.65);
6
- --seatmap-viewer-border-subtle: rgba(92, 89, 87, 0.45);
7
- --seatmap-viewer-text: #e5e2e1;
8
- --seatmap-viewer-text-muted: #9a9694;
9
- --seatmap-viewer-accent: #6f663a;
2
+ --seatmap-surface: var(--ds-surface-container-low, rgba(24, 24, 24, 0.94));
3
+ --seatmap-surface-elevated: var(--ds-surface-container, rgba(28, 28, 28, 0.98));
4
+ --seatmap-surface-muted: var(--ds-surface-container-high, #242424);
5
+ --seatmap-on-surface: var(--ds-on-surface, #e5e2e1);
6
+ --seatmap-on-surface-variant: var(--ds-on-surface-variant, #9a9694);
7
+ --seatmap-outline: var(--ds-input-border, rgba(92, 89, 87, 0.65));
8
+ --seatmap-outline-variant: var(--ds-border-subtle, rgba(92, 89, 87, 0.45));
9
+ --seatmap-primary: var(--ds-primary, #6f663a);
10
+ --seatmap-on-primary: var(--ds-on-primary, #f5edc7);
11
+ --seatmap-error: var(--ds-error, #ad3f3f);
12
+ --seatmap-on-error: var(--ds-on-error, #ffffff);
13
+ --seatmap-state-layer-hover: var(--ds-primary-wash, color-mix(in srgb, var(--seatmap-primary) 12%, transparent));
14
+ --seatmap-state-layer-pressed: var(--ds-primary-wash-strong, color-mix(in srgb, var(--seatmap-primary) 18%, transparent));
15
+ --seatmap-focus-ring: var(--ds-primary-ring, color-mix(in srgb, var(--seatmap-primary) 55%, transparent));
16
+ --seatmap-radius-sm: var(--ds-radius-structural-sm, 8px);
17
+ --seatmap-radius-md: var(--ds-radius-structural, 10px);
18
+ --seatmap-radius-lg: calc(var(--ds-radius-structural, 10px) + 6px);
19
+ --seatmap-shadow-raised: var(--ds-shadow-ambient-sm, 0 8px 20px rgba(0, 0, 0, 0.22));
20
+ --seatmap-shadow-elevated: var(--ds-shadow-ambient, 0 10px 24px rgba(0, 0, 0, 0.28));
21
+ --seatmap-shadow-floating: var(--ds-shadow-ambient-lg, 0 14px 34px rgba(0, 0, 0, 0.32));
22
+ --seatmap-viewer-surface: var(--seatmap-surface);
23
+ --seatmap-viewer-surface-elevated: var(--seatmap-surface-elevated);
24
+ --seatmap-viewer-surface-muted: var(--seatmap-surface-muted);
25
+ --seatmap-viewer-border: var(--seatmap-outline);
26
+ --seatmap-viewer-border-subtle: var(--seatmap-outline-variant);
27
+ --seatmap-viewer-text: var(--seatmap-on-surface);
28
+ --seatmap-viewer-text-muted: var(--seatmap-on-surface-variant);
29
+ --seatmap-viewer-accent: var(--seatmap-primary);
10
30
  --seatmap-viewer-accent-disabled: #4f4933;
11
- --seatmap-viewer-accent-text: #f5edc7;
12
- --seatmap-viewer-danger: #ad3f3f;
13
- --seatmap-viewer-danger-text: #ffffff;
14
- --seatmap-viewer-radius-sm: 8px;
15
- --seatmap-viewer-radius-md: 10px;
16
- --seatmap-viewer-shadow-elevated: 0 10px 24px rgba(0, 0, 0, 0.28);
31
+ --seatmap-viewer-accent-text: var(--seatmap-on-primary);
32
+ --seatmap-viewer-danger: var(--seatmap-error);
33
+ --seatmap-viewer-danger-text: var(--seatmap-on-error);
34
+ --seatmap-viewer-state-layer-hover: var(--seatmap-state-layer-hover);
35
+ --seatmap-viewer-state-layer-pressed: var(--seatmap-state-layer-pressed);
36
+ --seatmap-viewer-focus-ring: var(--seatmap-focus-ring);
37
+ --seatmap-viewer-radius-sm: var(--seatmap-radius-sm);
38
+ --seatmap-viewer-radius-md: var(--seatmap-radius-md);
39
+ --seatmap-viewer-radius-lg: var(--seatmap-radius-lg);
40
+ --seatmap-viewer-shadow-raised: var(--seatmap-shadow-raised);
41
+ --seatmap-viewer-shadow-elevated: var(--seatmap-shadow-elevated);
42
+ --seatmap-viewer-shadow-floating: var(--seatmap-shadow-floating);
17
43
  }
18
44
 
19
45
  .seatmap-viewer-theme .seatmap-viewer__legend-container {
20
46
  font-family: var(--ds-font-body, system-ui);
21
47
  color: var(--seatmap-viewer-text);
22
- background: var(--seatmap-viewer-surface);
48
+ background: color-mix(in srgb, var(--seatmap-viewer-surface) 90%, transparent);
23
49
  border: 1px solid var(--seatmap-viewer-border);
24
50
  border-radius: var(--seatmap-viewer-radius-md);
51
+ box-shadow: var(--seatmap-viewer-shadow-raised);
52
+ backdrop-filter: blur(6px);
53
+ padding: 8px 10px;
25
54
  }
26
55
 
27
56
  .seatmap-viewer-theme .seatmap-viewer__legend-heading {
57
+ font-size: 10px;
58
+ font-weight: 600;
59
+ letter-spacing: 0.3px;
60
+ text-transform: uppercase;
28
61
  color: var(--seatmap-viewer-text-muted);
29
62
  }
30
63
 
@@ -33,24 +66,41 @@
33
66
  }
34
67
 
35
68
  .seatmap-viewer-theme .seatmap-viewer__legend-swatch {
36
- border-color: color-mix(in srgb, var(--seatmap-viewer-text) 25%, transparent);
69
+ border-color: color-mix(in srgb, var(--seatmap-viewer-text) 30%, transparent);
70
+ box-shadow: inset 0 0 0 1px color-mix(in srgb, #000 10%, transparent);
37
71
  }
38
72
 
39
73
  .seatmap-viewer-theme .seatmap-viewer__cart-chip {
40
74
  font-family: var(--ds-font-body, system-ui);
41
75
  color: var(--seatmap-viewer-text);
42
76
  background: var(--seatmap-viewer-surface-elevated);
43
- border: 1px solid var(--seatmap-viewer-border);
77
+ border: 1px solid var(--seatmap-viewer-border-subtle);
44
78
  border-radius: 999px;
45
- box-shadow: var(--seatmap-viewer-shadow-elevated);
79
+ box-shadow: var(--seatmap-viewer-shadow-raised);
80
+ transition: box-shadow 160ms ease, border-color 160ms ease, transform 120ms ease, background-color 160ms ease;
81
+ }
82
+
83
+ .seatmap-viewer-theme .seatmap-viewer__cart-chip:hover {
84
+ background: color-mix(in srgb, var(--seatmap-viewer-surface-elevated) 92%, var(--seatmap-viewer-state-layer-hover));
85
+ border-color: color-mix(in srgb, var(--seatmap-viewer-border) 65%, var(--seatmap-viewer-state-layer-hover));
86
+ }
87
+
88
+ .seatmap-viewer-theme .seatmap-viewer__cart-chip:active {
89
+ transform: translateY(1px);
90
+ background: color-mix(in srgb, var(--seatmap-viewer-surface-elevated) 88%, var(--seatmap-viewer-state-layer-pressed));
91
+ }
92
+
93
+ .seatmap-viewer-theme .seatmap-viewer__cart-chip:focus-visible {
94
+ outline: 2px solid var(--seatmap-viewer-focus-ring);
95
+ outline-offset: 2px;
46
96
  }
47
97
 
48
98
  .seatmap-viewer-theme .seatmap-viewer__cart-popup {
49
99
  background: var(--seatmap-viewer-surface-elevated);
50
- border-top: 1px solid var(--seatmap-viewer-border);
51
- border-left: 1px solid var(--seatmap-viewer-border);
52
- border-top-left-radius: calc(var(--seatmap-viewer-radius-md) + 2px);
53
- box-shadow: var(--seatmap-viewer-shadow-elevated);
100
+ border-top: 1px solid var(--seatmap-viewer-border-subtle);
101
+ border-left: 1px solid var(--seatmap-viewer-border-subtle);
102
+ border-top-left-radius: var(--seatmap-viewer-radius-lg);
103
+ box-shadow: var(--seatmap-viewer-shadow-floating);
54
104
  }
55
105
 
56
106
  .seatmap-viewer-theme .seatmap-viewer__cart-header {
@@ -67,6 +117,27 @@
67
117
  color: var(--seatmap-viewer-text);
68
118
  background: var(--seatmap-viewer-surface-muted);
69
119
  border-radius: calc(var(--seatmap-viewer-radius-sm) - 3px);
120
+ transition: border-color 140ms ease, background-color 140ms ease, box-shadow 140ms ease, transform 100ms ease;
121
+ }
122
+
123
+ .seatmap-viewer-theme .seatmap-viewer__cart-icon-button:hover:not(:disabled) {
124
+ background: color-mix(in srgb, var(--seatmap-viewer-surface-muted) 88%, var(--seatmap-viewer-state-layer-hover));
125
+ border-color: color-mix(in srgb, var(--seatmap-viewer-border) 70%, var(--seatmap-viewer-state-layer-hover));
126
+ }
127
+
128
+ .seatmap-viewer-theme .seatmap-viewer__cart-icon-button:active:not(:disabled) {
129
+ transform: translateY(1px);
130
+ background: color-mix(in srgb, var(--seatmap-viewer-surface-muted) 84%, var(--seatmap-viewer-state-layer-pressed));
131
+ }
132
+
133
+ .seatmap-viewer-theme .seatmap-viewer__cart-icon-button:focus-visible {
134
+ outline: 2px solid var(--seatmap-viewer-focus-ring);
135
+ outline-offset: 1px;
136
+ }
137
+
138
+ .seatmap-viewer-theme .seatmap-viewer__cart-icon-button:disabled {
139
+ opacity: 0.55;
140
+ cursor: not-allowed;
70
141
  }
71
142
 
72
143
  .seatmap-viewer-theme .seatmap-viewer__cart-empty-state,
@@ -78,7 +149,7 @@
78
149
 
79
150
  .seatmap-viewer-theme .seatmap-viewer__cart-group {
80
151
  background: var(--seatmap-viewer-surface-muted);
81
- border: 1px solid var(--seatmap-viewer-border);
152
+ border: 1px solid var(--seatmap-viewer-border-subtle);
82
153
  border-radius: var(--seatmap-viewer-radius-md);
83
154
  }
84
155
 
@@ -98,9 +169,239 @@
98
169
  background: var(--seatmap-viewer-accent);
99
170
  border-radius: var(--seatmap-viewer-radius-sm);
100
171
  font-family: var(--ds-font-body, system-ui);
172
+ box-shadow: var(--seatmap-viewer-shadow-raised);
173
+ transition: background-color 140ms ease, border-color 140ms ease, box-shadow 140ms ease, transform 100ms ease;
174
+ }
175
+
176
+ .seatmap-viewer-theme .seatmap-viewer__cart-proceed-button:hover:not(:disabled) {
177
+ background: color-mix(in srgb, var(--seatmap-viewer-accent) 90%, var(--seatmap-viewer-state-layer-hover));
178
+ }
179
+
180
+ .seatmap-viewer-theme .seatmap-viewer__cart-proceed-button:active:not(:disabled) {
181
+ transform: translateY(1px);
182
+ background: color-mix(in srgb, var(--seatmap-viewer-accent) 84%, var(--seatmap-viewer-state-layer-pressed));
183
+ }
184
+
185
+ .seatmap-viewer-theme .seatmap-viewer__cart-proceed-button:focus-visible {
186
+ outline: 2px solid var(--seatmap-viewer-focus-ring);
187
+ outline-offset: 2px;
101
188
  }
102
189
 
103
190
  .seatmap-viewer-theme .seatmap-viewer__cart-proceed-button:disabled {
104
- opacity: 0.72;
191
+ background: var(--seatmap-viewer-accent-disabled);
192
+ border-color: color-mix(in srgb, var(--seatmap-viewer-accent-disabled) 65%, #000);
193
+ box-shadow: none;
194
+ opacity: 1;
105
195
  cursor: not-allowed;
106
196
  }
197
+
198
+ .seatmap-viewer-theme .seatmap-viewer__legend {
199
+ position: absolute;
200
+ top: 12px;
201
+ left: 12px;
202
+ z-index: 10;
203
+ pointer-events: none;
204
+ min-width: 138px;
205
+ }
206
+
207
+ .seatmap-viewer-theme .seatmap-viewer__legend-section {
208
+ display: block;
209
+ }
210
+
211
+ .seatmap-viewer-theme .seatmap-viewer__legend-section + .seatmap-viewer__legend-section {
212
+ margin-top: 8px;
213
+ padding-top: 8px;
214
+ border-top: 1px solid var(--seatmap-viewer-border-subtle);
215
+ }
216
+
217
+ .seatmap-viewer-theme .seatmap-viewer__legend-heading-base {
218
+ margin: 0;
219
+ }
220
+
221
+ .seatmap-viewer-theme .seatmap-viewer__legend-list-base {
222
+ list-style: none;
223
+ margin: 5px 0 0;
224
+ padding: 0;
225
+ display: flex;
226
+ flex-direction: column;
227
+ gap: 3px;
228
+ }
229
+
230
+ .seatmap-viewer-theme .seatmap-viewer__legend-item-base {
231
+ display: flex;
232
+ align-items: center;
233
+ gap: 6px;
234
+ min-width: 0;
235
+ font-size: 12px;
236
+ line-height: 1.2;
237
+ }
238
+
239
+ .seatmap-viewer-theme .seatmap-viewer__legend-swatch-base {
240
+ width: 9px;
241
+ height: 9px;
242
+ border-radius: 2px;
243
+ flex-shrink: 0;
244
+ }
245
+
246
+ .seatmap-viewer-theme .seatmap-viewer__legend-divider-base {
247
+ height: 1px;
248
+ margin: 7px 0;
249
+ border-radius: 999px;
250
+ }
251
+
252
+ .seatmap-viewer-theme .seatmap-viewer__cart-chip-base {
253
+ position: absolute;
254
+ right: 12px;
255
+ bottom: 12px;
256
+ z-index: 20;
257
+ }
258
+
259
+ .seatmap-viewer-theme .seatmap-viewer__cart-popup-base {
260
+ position: absolute;
261
+ right: 0;
262
+ bottom: 0;
263
+ z-index: 30;
264
+ max-height: 72vh;
265
+ display: flex;
266
+ flex-direction: column;
267
+ overflow: hidden;
268
+ }
269
+
270
+ .seatmap-viewer-theme .seatmap-viewer__cart-header-base {
271
+ display: flex;
272
+ align-items: center;
273
+ justify-content: space-between;
274
+ gap: 8px;
275
+ padding: 10px 12px;
276
+ }
277
+
278
+ .seatmap-viewer-theme .seatmap-viewer__cart-header-title-base {
279
+ font-size: 13px;
280
+ }
281
+
282
+ .seatmap-viewer-theme .seatmap-viewer__cart-icon-button-base {
283
+ width: 24px;
284
+ height: 24px;
285
+ display: inline-flex;
286
+ align-items: center;
287
+ justify-content: center;
288
+ }
289
+
290
+ .seatmap-viewer-theme .seatmap-viewer__cart-body-base {
291
+ display: flex;
292
+ flex-direction: column;
293
+ gap: 8px;
294
+ overflow: auto;
295
+ padding: 12px;
296
+ flex: 1;
297
+ }
298
+
299
+ .seatmap-viewer-theme .seatmap-viewer__cart-group-base {
300
+ padding: 8px;
301
+ display: flex;
302
+ flex-direction: column;
303
+ gap: 6px;
304
+ }
305
+
306
+ .seatmap-viewer-theme .seatmap-viewer__cart-group-title-base {
307
+ font-size: 12px;
308
+ font-weight: 600;
309
+ }
310
+
311
+ .seatmap-viewer-theme .seatmap-viewer__cart-group-meta-base {
312
+ font-size: 11px;
313
+ }
314
+
315
+ .seatmap-viewer-theme .seatmap-viewer__cart-quantity-row-base {
316
+ display: flex;
317
+ align-items: center;
318
+ justify-content: space-between;
319
+ gap: 8px;
320
+ }
321
+
322
+ .seatmap-viewer-theme .seatmap-viewer__cart-quantity-controls {
323
+ display: inline-flex;
324
+ align-items: center;
325
+ gap: 6px;
326
+ }
327
+
328
+ .seatmap-viewer-theme .seatmap-viewer__cart-quantity-value-base {
329
+ min-width: 20px;
330
+ text-align: center;
331
+ font-size: 12px;
332
+ }
333
+
334
+ .seatmap-viewer-theme .seatmap-viewer__cart-group-total-base {
335
+ font-size: 12px;
336
+ font-weight: 600;
337
+ }
338
+
339
+ .seatmap-viewer-theme .seatmap-viewer__cart-seat-list {
340
+ display: flex;
341
+ flex-direction: column;
342
+ gap: 4px;
343
+ }
344
+
345
+ .seatmap-viewer-theme .seatmap-viewer__cart-seat-row-base {
346
+ display: flex;
347
+ align-items: center;
348
+ justify-content: space-between;
349
+ gap: 8px;
350
+ }
351
+
352
+ .seatmap-viewer-theme .seatmap-viewer__cart-seat-label-base {
353
+ font-size: 11px;
354
+ }
355
+
356
+ .seatmap-viewer-theme .seatmap-viewer__cart-footer-base {
357
+ padding: 12px;
358
+ display: flex;
359
+ flex-direction: column;
360
+ gap: 8px;
361
+ }
362
+
363
+ .seatmap-viewer-theme .seatmap-viewer__cart-summary-base {
364
+ font-size: 12px;
365
+ }
366
+
367
+ .seatmap-viewer-theme .seatmap-viewer__cart-proceed-button-base {
368
+ padding: 8px 12px;
369
+ font-size: 13px;
370
+ font-weight: 600;
371
+ cursor: pointer;
372
+ }
373
+
374
+ @media (max-width: 767px) {
375
+ .seatmap-viewer-theme .seatmap-viewer__legend {
376
+ top: 8px;
377
+ left: 8px;
378
+ min-width: 114px;
379
+ }
380
+
381
+ .seatmap-viewer-theme .seatmap-viewer__legend-container {
382
+ padding: 7px 8px;
383
+ border-radius: 8px;
384
+ font-size: 11px;
385
+ }
386
+
387
+ .seatmap-viewer-theme .seatmap-viewer__legend-heading-base {
388
+ font-size: 10px;
389
+ margin-bottom: 3px;
390
+ }
391
+
392
+ .seatmap-viewer-theme .seatmap-viewer__legend-list-base {
393
+ margin-top: 4px;
394
+ gap: 3px;
395
+ }
396
+
397
+ .seatmap-viewer-theme .seatmap-viewer__legend-swatch-base {
398
+ width: 8px;
399
+ height: 8px;
400
+ border-radius: 2px;
401
+ }
402
+
403
+ .seatmap-viewer-theme .seatmap-viewer__legend-divider-base {
404
+ margin: 6px 0;
405
+ }
406
+
407
+ }