@lifeonlars/prime-yggdrasil 0.1.1 → 0.1.3

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.
@@ -0,0 +1,491 @@
1
+ /**
2
+ * message components
3
+ */
4
+
5
+ .p-message {
6
+ margin: 1rem 0;
7
+ border-radius: var(--radius-md);
8
+ }
9
+ .p-message .p-message-wrapper {
10
+ padding: 1.25rem 1.75rem;
11
+ }
12
+ .p-message .p-message-close {
13
+ width: 2rem;
14
+ height: 2rem;
15
+ border-radius: var(--radius-full);
16
+ background: transparent;
17
+ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
18
+ }
19
+ .p-message .p-message-close:hover {
20
+ background: rgba(255, 255, 255, 0.5);
21
+ }
22
+ .p-message .p-message-close:focus-visible {
23
+ outline: 0 none;
24
+ outline-offset: 0;
25
+ box-shadow: 0 0 0 0.2rem var(--surface-brand-overlay);
26
+ }
27
+ .p-message.p-message-info {
28
+ background: var(--severity-info-surface-tint);
29
+ border: solid var(--severity-info-border);
30
+ border-width: 0 0 0 6px;
31
+ color: var(--severity-info-text);
32
+ }
33
+ .p-message.p-message-info .p-message-icon {
34
+ color: var(--severity-info-icon);
35
+ }
36
+ .p-message.p-message-info .p-message-close {
37
+ color: var(--severity-info-icon);
38
+ }
39
+ .p-message.p-message-success {
40
+ background: var(--severity-success-surface-tint);
41
+ border: solid var(--severity-success-border);
42
+ border-width: 0 0 0 6px;
43
+ color: var(--severity-success-text);
44
+ }
45
+ .p-message.p-message-success .p-message-icon {
46
+ color: var(--severity-success-icon);
47
+ }
48
+ .p-message.p-message-success .p-message-close {
49
+ color: var(--severity-success-icon);
50
+ }
51
+ .p-message.p-message-warn {
52
+ background: var(--severity-warn-surface-tint);
53
+ border: solid var(--severity-warn-border);
54
+ border-width: 0 0 0 6px;
55
+ color: var(--severity-warn-text);
56
+ }
57
+ .p-message.p-message-warn .p-message-icon {
58
+ color: var(--severity-warn-icon);
59
+ }
60
+ .p-message.p-message-warn .p-message-close {
61
+ color: var(--severity-warn-icon);
62
+ }
63
+ .p-message.p-message-error {
64
+ background: var(--severity-error-surface-tint);
65
+ border: solid var(--severity-error-border);
66
+ border-width: 0 0 0 6px;
67
+ color: var(--severity-error-text);
68
+ }
69
+ .p-message.p-message-error .p-message-icon {
70
+ color: var(--severity-error-icon);
71
+ }
72
+ .p-message.p-message-error .p-message-close {
73
+ color: var(--severity-error-icon);
74
+ }
75
+ .p-message .p-message-text {
76
+ font-size: 1rem;
77
+ font-weight: 500;
78
+ }
79
+ .p-message .p-message-icon {
80
+ font-size: 1.5rem;
81
+ margin-right: 0.5rem;
82
+ }
83
+ .p-message .p-message-icon.p-icon {
84
+ width: 1.5rem;
85
+ height: 1.5rem;
86
+ }
87
+ .p-message .p-message-summary {
88
+ font-weight: 700;
89
+ }
90
+ .p-message .p-message-detail {
91
+ margin-left: 0.5rem;
92
+ }
93
+ .p-inline-message {
94
+ padding: 0.75rem 0.75rem;
95
+ margin: 0;
96
+ border-radius: var(--radius-md);
97
+ }
98
+ .p-inline-message.p-inline-message-info {
99
+ background: var(--severity-info-surface-tint);
100
+ border: solid var(--severity-info-border);
101
+ border-width: 0px;
102
+ color: var(--severity-info-text);
103
+ }
104
+ .p-inline-message.p-inline-message-info .p-inline-message-icon {
105
+ color: var(--severity-info-icon);
106
+ }
107
+ .p-inline-message.p-inline-message-success {
108
+ background: var(--severity-success-surface-tint);
109
+ border: solid var(--severity-success-border);
110
+ border-width: 0px;
111
+ color: var(--severity-success-text);
112
+ }
113
+ .p-inline-message.p-inline-message-success .p-inline-message-icon {
114
+ color: var(--severity-success-icon);
115
+ }
116
+ .p-inline-message.p-inline-message-warn {
117
+ background: var(--severity-warn-surface-tint);
118
+ border: solid var(--severity-warn-border);
119
+ border-width: 0px;
120
+ color: var(--severity-warn-text);
121
+ }
122
+ .p-inline-message.p-inline-message-warn .p-inline-message-icon {
123
+ color: var(--severity-warn-icon);
124
+ }
125
+ .p-inline-message.p-inline-message-error {
126
+ background: var(--severity-error-surface-tint);
127
+ border: solid var(--severity-error-border);
128
+ border-width: 0px;
129
+ color: var(--severity-error-text);
130
+ }
131
+ .p-inline-message.p-inline-message-error .p-inline-message-icon {
132
+ color: var(--severity-error-icon);
133
+ }
134
+ .p-inline-message .p-inline-message-icon {
135
+ font-size: 1rem;
136
+ margin-right: 0.5rem;
137
+ }
138
+ .p-inline-message .p-inline-message-icon.p-icon {
139
+ width: 1rem;
140
+ height: 1rem;
141
+ }
142
+ .p-inline-message .p-inline-message-text {
143
+ font-size: 1rem;
144
+ }
145
+ .p-inline-message.p-inline-message-icon-only .p-inline-message-icon {
146
+ margin-right: 0;
147
+ }
148
+ .p-toast {
149
+ opacity: 1;
150
+ }
151
+ .p-toast .p-toast-message {
152
+ margin: 0 0 1rem 0;
153
+ box-shadow: var(--elevation-moderate);
154
+ border-radius: var(--radius-md);
155
+ }
156
+ .p-toast .p-toast-message .p-toast-message-content {
157
+ padding: 1rem;
158
+ }
159
+ .p-toast .p-toast-message .p-toast-message-content .p-toast-message-text {
160
+ margin: 0 0 0 1rem;
161
+ }
162
+ .p-toast .p-toast-message .p-toast-message-content .p-toast-message-icon {
163
+ font-size: 2rem;
164
+ }
165
+ .p-toast .p-toast-message .p-toast-message-content .p-toast-message-icon.p-icon {
166
+ width: 2rem;
167
+ height: 2rem;
168
+ }
169
+ .p-toast .p-toast-message .p-toast-message-content .p-toast-summary {
170
+ font-weight: 700;
171
+ }
172
+ .p-toast .p-toast-message .p-toast-message-content .p-toast-detail {
173
+ margin: 0.5rem 0 0 0;
174
+ }
175
+ .p-toast .p-toast-message .p-toast-icon-close {
176
+ width: 2rem;
177
+ height: 2rem;
178
+ border-radius: var(--radius-full);
179
+ background: transparent;
180
+ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
181
+ }
182
+ .p-toast .p-toast-message .p-toast-icon-close:hover {
183
+ background: rgba(255, 255, 255, 0.5);
184
+ }
185
+ .p-toast .p-toast-message .p-toast-icon-close:focus-visible {
186
+ outline: 0 none;
187
+ outline-offset: 0;
188
+ box-shadow: 0 0 0 0.2rem var(--surface-brand-overlay);
189
+ }
190
+ .p-toast .p-toast-message.p-toast-message-info {
191
+ background: var(--severity-info-surface-tint);
192
+ border: solid var(--severity-info-border);
193
+ border-width: 0 0 0 6px;
194
+ color: var(--severity-info-text);
195
+ }
196
+ .p-toast .p-toast-message.p-toast-message-info .p-toast-message-icon,
197
+ .p-toast .p-toast-message.p-toast-message-info .p-toast-icon-close {
198
+ color: var(--severity-info-icon);
199
+ }
200
+ .p-toast .p-toast-message.p-toast-message-success {
201
+ background: var(--severity-success-surface-tint);
202
+ border: solid var(--severity-success-border);
203
+ border-width: 0 0 0 6px;
204
+ color: var(--severity-success-text);
205
+ }
206
+ .p-toast .p-toast-message.p-toast-message-success .p-toast-message-icon,
207
+ .p-toast .p-toast-message.p-toast-message-success .p-toast-icon-close {
208
+ color: var(--severity-success-icon);
209
+ }
210
+ .p-toast .p-toast-message.p-toast-message-warn {
211
+ background: var(--severity-warn-surface-tint);
212
+ border: solid var(--severity-warn-border);
213
+ border-width: 0 0 0 6px;
214
+ color: var(--severity-warn-text);
215
+ }
216
+ .p-toast .p-toast-message.p-toast-message-warn .p-toast-message-icon,
217
+ .p-toast .p-toast-message.p-toast-message-warn .p-toast-icon-close {
218
+ color: var(--severity-warn-icon);
219
+ }
220
+ .p-toast .p-toast-message.p-toast-message-error {
221
+ background: var(--severity-error-surface-tint);
222
+ border: solid var(--severity-error-border);
223
+ border-width: 0 0 0 6px;
224
+ color: var(--severity-error-text);
225
+ }
226
+ .p-toast .p-toast-message.p-toast-message-error .p-toast-message-icon,
227
+ .p-toast .p-toast-message.p-toast-message-error .p-toast-icon-close {
228
+ color: var(--severity-error-icon);
229
+ }
230
+ .p-tag {
231
+ background: var(--surface-brand-primary);
232
+ color: var(--surface-neutral-primary);
233
+ font-size: 0.75rem;
234
+ font-weight: 700;
235
+ padding: 0.25rem 0.4rem;
236
+ border-radius: var(--radius-md);
237
+ }
238
+ .p-tag.p-tag-success {
239
+ background-color: var(--severity-success-surface);
240
+ color: var(--severity-success-text);
241
+ }
242
+ .p-tag.p-tag-info {
243
+ background-color: var(--severity-info-surface);
244
+ color: var(--severity-info-text);
245
+ }
246
+ .p-tag.p-tag-warning {
247
+ background-color: var(--severity-warn-surface);
248
+ color: var(--severity-warn-text);
249
+ }
250
+ .p-tag.p-tag-danger {
251
+ background-color: var(--severity-danger-surface);
252
+ color: var(--severity-danger-text);
253
+ }
254
+ .p-tag .p-tag-icon {
255
+ margin-right: 0.25rem;
256
+ font-size: 0.75rem;
257
+ }
258
+ .p-tag .p-tag-icon.p-icon {
259
+ width: 0.75rem;
260
+ height: 0.75rem;
261
+ }
262
+ .p-tag {
263
+ background: var(--surface-brand-primary);
264
+ color: var(--surface-neutral-primary);
265
+ font-size: 0.75rem;
266
+ font-weight: 700;
267
+ padding: 0.25rem 0.4rem;
268
+ border-radius: var(--radius-md);
269
+ }
270
+ .p-tag.p-tag-success {
271
+ background-color: var(--severity-success-surface);
272
+ color: var(--severity-success-text);
273
+ }
274
+ .p-tag.p-tag-info {
275
+ background-color: var(--severity-info-surface);
276
+ color: var(--severity-info-text);
277
+ }
278
+ .p-tag.p-tag-warning {
279
+ background-color: var(--severity-warn-surface);
280
+ color: var(--severity-warn-text);
281
+ }
282
+ .p-tag.p-tag-danger {
283
+ background-color: var(--severity-danger-surface);
284
+ color: var(--severity-danger-text);
285
+ }
286
+
287
+ @layer primereact {
288
+ .p-button-label {
289
+ font-weight: 700;
290
+ }
291
+ .p-selectbutton > .p-button,
292
+ .p-togglebutton.p-button {
293
+ transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
294
+ }
295
+ .p-accordion .p-accordion-header .p-accordion-header-link {
296
+ transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
297
+ }
298
+ .p-tabview .p-tabview-nav li .p-tabview-nav-link {
299
+ transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
300
+ }
301
+ .p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link {
302
+ transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
303
+ }
304
+ .p-carousel .p-carousel-indicators .p-carousel-indicator.p-highlight button {
305
+ background-color: var(--surface-brand-primary);
306
+ }
307
+ .p-galleria .p-galleria-indicators .p-galleria-indicator.p-highlight button {
308
+ background-color: var(--surface-brand-primary);
309
+ }
310
+ .p-button:focus {
311
+ box-shadow: 0 0 0 2px var(--surface-neutral-primary), 0 0 0 4px var(--surface-context-info), 0 1px 2px 0 black;
312
+ }
313
+ .p-button.p-button-secondary:enabled:focus {
314
+ box-shadow: 0 0 0 2px var(--surface-neutral-primary), 0 0 0 4px var(--border-neutral-subdued), 0 1px 2px 0 black;
315
+ }
316
+ .p-button.p-button-success:enabled:focus {
317
+ box-shadow: 0 0 0 2px var(--surface-neutral-primary), 0 0 0 4px var(--severity-success-border), 0 1px 2px 0 black;
318
+ }
319
+ .p-button.p-button-info:enabled:focus {
320
+ box-shadow: 0 0 0 2px var(--surface-neutral-primary), 0 0 0 4px var(--severity-info-border), 0 1px 2px 0 black;
321
+ }
322
+ .p-button.p-button-warning:enabled:focus {
323
+ box-shadow: 0 0 0 2px var(--surface-neutral-primary), 0 0 0 4px var(--severity-warn-border), 0 1px 2px 0 black;
324
+ }
325
+ .p-button.p-button-help:enabled:focus {
326
+ box-shadow: 0 0 0 2px var(--surface-neutral-primary), 0 0 0 4px color-mix(in srgb, var(--surface-brand-accent) 50%, white), 0 1px 2px 0 black;
327
+ }
328
+ .p-button.p-button-danger:enabled:focus {
329
+ box-shadow: 0 0 0 2px var(--surface-neutral-primary), 0 0 0 4px var(--severity-danger-border), 0 1px 2px 0 black;
330
+ }
331
+ .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-top > td {
332
+ box-shadow: inset 0 2px 0 0 var(--surface-brand-primary);
333
+ }
334
+ .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-bottom > td {
335
+ box-shadow: inset 0 -2px 0 0 var(--surface-brand-primary);
336
+ }
337
+ .p-speeddial-item.p-focus > .p-speeddial-action {
338
+ box-shadow: 0 0 0 2px var(--surface-neutral-primary), 0 0 0 4px var(--surface-context-info), 0 1px 2px 0 black;
339
+ }
340
+ .p-toast-message {
341
+ backdrop-filter: blur(10px);
342
+ }
343
+ .p-inline-message-text {
344
+ font-weight: 500;
345
+ }
346
+ .p-picklist-buttons .p-button,
347
+ .p-orderlist-controls .p-button {
348
+ transition: opacity 0.2s, background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
349
+ }
350
+ .p-steps .p-steps-item.p-highlight .p-steps-number {
351
+ background: var(--surface-brand-primary);
352
+ color: var(--surface-neutral-primary);
353
+ }
354
+ .p-stepper .p-stepper-header.p-highlight .p-stepper-number {
355
+ background: var(--surface-brand-primary);
356
+ color: var(--surface-neutral-primary);
357
+ }
358
+
359
+ /* ==================== Shadow Utilities ==================== */
360
+ /* Map PrimeReact shadow utilities to Yggdrasil elevation tokens */
361
+
362
+ .shadow-none {
363
+ box-shadow: none !important;
364
+ }
365
+
366
+ .shadow-1 {
367
+ box-shadow: var(--elevation-subtle) !important;
368
+ }
369
+
370
+ .shadow-2 {
371
+ box-shadow: var(--elevation-moderate) !important;
372
+ }
373
+
374
+ .shadow-3 {
375
+ box-shadow: var(--elevation-elevated) !important;
376
+ }
377
+
378
+ .shadow-4,
379
+ .shadow-5,
380
+ .shadow-6,
381
+ .shadow-7,
382
+ .shadow-8 {
383
+ box-shadow: var(--elevation-high) !important;
384
+ }
385
+
386
+ /* ==================== Border Radius Utilities ==================== */
387
+ /* Map PrimeReact border-radius utilities to Yggdrasil radius tokens (4px grid) */
388
+
389
+ .border-round-none {
390
+ border-radius: var(--radius-none) !important;
391
+ }
392
+
393
+ .border-round-sm {
394
+ border-radius: var(--radius-sm) !important;
395
+ }
396
+
397
+ .border-round,
398
+ .border-round-md {
399
+ border-radius: var(--radius-md) !important;
400
+ }
401
+
402
+ .border-round-lg {
403
+ border-radius: var(--radius-lg) !important;
404
+ }
405
+
406
+ .border-round-xl {
407
+ border-radius: var(--radius-xl) !important;
408
+ }
409
+
410
+ .border-round-2xl {
411
+ border-radius: var(--radius-2xl) !important;
412
+ }
413
+
414
+ .border-round-3xl {
415
+ border-radius: var(--radius-3xl) !important;
416
+ }
417
+
418
+ .border-circle,
419
+ .border-round-full {
420
+ border-radius: var(--radius-full) !important;
421
+ }
422
+
423
+ /* Top border radius */
424
+ .border-round-top-sm {
425
+ border-top-left-radius: var(--radius-sm) !important;
426
+ border-top-right-radius: var(--radius-sm) !important;
427
+ }
428
+
429
+ .border-round-top,
430
+ .border-round-top-md {
431
+ border-top-left-radius: var(--radius-md) !important;
432
+ border-top-right-radius: var(--radius-md) !important;
433
+ }
434
+
435
+ .border-round-top-lg {
436
+ border-top-left-radius: var(--radius-lg) !important;
437
+ border-top-right-radius: var(--radius-lg) !important;
438
+ }
439
+
440
+ /* Bottom border radius */
441
+ .border-round-bottom-sm {
442
+ border-bottom-left-radius: var(--radius-sm) !important;
443
+ border-bottom-right-radius: var(--radius-sm) !important;
444
+ }
445
+
446
+ .border-round-bottom,
447
+ .border-round-bottom-md {
448
+ border-bottom-left-radius: var(--radius-md) !important;
449
+ border-bottom-right-radius: var(--radius-md) !important;
450
+ }
451
+
452
+ .border-round-bottom-lg {
453
+ border-bottom-left-radius: var(--radius-lg) !important;
454
+ border-bottom-right-radius: var(--radius-lg) !important;
455
+ }
456
+
457
+ /* Left border radius */
458
+ .border-round-left-sm {
459
+ border-top-left-radius: var(--radius-sm) !important;
460
+ border-bottom-left-radius: var(--radius-sm) !important;
461
+ }
462
+
463
+ .border-round-left,
464
+ .border-round-left-md {
465
+ border-top-left-radius: var(--radius-md) !important;
466
+ border-bottom-left-radius: var(--radius-md) !important;
467
+ }
468
+
469
+ .border-round-left-lg {
470
+ border-top-left-radius: var(--radius-lg) !important;
471
+ border-bottom-left-radius: var(--radius-lg) !important;
472
+ }
473
+
474
+ /* Right border radius */
475
+ .border-round-right-sm {
476
+ border-top-right-radius: var(--radius-sm) !important;
477
+ border-bottom-right-radius: var(--radius-sm) !important;
478
+ }
479
+
480
+ .border-round-right,
481
+ .border-round-right-md {
482
+ border-top-right-radius: var(--radius-md) !important;
483
+ border-bottom-right-radius: var(--radius-md) !important;
484
+ }
485
+
486
+ .border-round-right-lg {
487
+ border-top-right-radius: var(--radius-lg) !important;
488
+ border-bottom-right-radius: var(--radius-lg) !important;
489
+ }
490
+ }
491
+