@phila/phila-ui-core 2.1.2 → 2.2.0-beta.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.
Files changed (41) hide show
  1. package/dist/BaseLink.css +1 -0
  2. package/dist/BaseLink.vue_vue_type_script_setup_true_lang-CXQJyB5W.js +225 -0
  3. package/dist/BaseLink.vue_vue_type_script_setup_true_lang-CexJ6lNf.cjs +1 -0
  4. package/dist/classNames-CcykAxZN.js +6 -0
  5. package/dist/classNames-GLLmlfI4.cjs +1 -0
  6. package/dist/collapse-ApWEJVnD.cjs +1 -0
  7. package/dist/collapse-BvsHwQBu.js +74 -0
  8. package/dist/components.d.ts +162 -1
  9. package/dist/components.js +1 -1
  10. package/dist/components.mjs +7 -109
  11. package/dist/composables.d.ts +100 -0
  12. package/dist/composables.js +1 -1
  13. package/dist/composables.mjs +6 -2
  14. package/dist/index.d.ts +356 -0
  15. package/dist/index.js +1 -1
  16. package/dist/index.mjs +19 -2
  17. package/dist/styles/elements/buttons.css +230 -0
  18. package/dist/styles/elements/icons.css +53 -0
  19. package/dist/styles/elements/index.css +3 -0
  20. package/dist/styles/elements/links.css +87 -0
  21. package/dist/styles/legacy.css +39 -0
  22. package/dist/styles/template-light.css +6 -2
  23. package/dist/styles/template-orange.css +4 -2
  24. package/dist/styles/tokens.css +39 -0
  25. package/dist/styles/typography.css +45 -0
  26. package/dist/styles/utilities/color.css +26 -0
  27. package/dist/styles/utilities/containers.css +158 -0
  28. package/dist/styles/utilities/index.css +4 -0
  29. package/dist/styles/utilities/spacing.css +433 -0
  30. package/dist/styles/utilities/text.css +177 -0
  31. package/dist/useRouter-BVKwor6C.js +50 -0
  32. package/dist/useRouter-C4oT8vFk.cjs +1 -0
  33. package/dist/utils.d.ts +71 -0
  34. package/dist/utils.js +1 -1
  35. package/dist/utils.mjs +17 -3
  36. package/package.json +25 -13
  37. package/dist/components.css +0 -1
  38. package/dist/index-DkaNsoLU.cjs +0 -5
  39. package/dist/index-dajx1Lu4.js +0 -1718
  40. package/dist/styles/light-mode.css +0 -106
  41. package/dist/styles/variables.css +0 -92
package/dist/styles/utilities/containers.css ADDED
@@ -0,0 +1,158 @@
1
+ .container-text {
2
+ max-width: 65ch;
3
+ }
4
+ .is-flex {
5
+ display: flex;
6
+ }
7
+ .is-flex-1 {
8
+ flex: 1;
9
+ }
10
+ .is-inline-flex {
11
+ display: inline-flex;
12
+ }
13
+ .is-justify-center {
14
+ justify-content: center;
15
+ }
16
+ .is-justify-flex-start {
17
+ justify-content: flex-start;
18
+ }
19
+ .is-justify-flex-end {
20
+ justify-content: flex-end;
21
+ }
22
+ .is-justify-space-between {
23
+ justify-content: space-between;
24
+ }
25
+ .is-justify-space-around {
26
+ justify-content: space-around;
27
+ }
28
+ .is-align-center {
29
+ align-items: center;
30
+ }
31
+ .is-align-flex-start {
32
+ align-items: flex-start;
33
+ }
34
+ .is-align-flex-end {
35
+ align-items: flex-end;
36
+ }
37
+ .is-flex-wrap {
38
+ flex-wrap: wrap;
39
+ }
40
+ .is-flex-column {
41
+ flex-direction: column;
42
+ }
43
+ .is-flex-row {
44
+ flex-direction: row;
45
+ }
46
+ .is-12 {
47
+ flex: 0 0 100%;
48
+ max-width: 100%;
49
+ }
50
+ .is-6 {
51
+ flex: 0 0 50%;
52
+ max-width: 50%;
53
+ }
54
+ .is-4 {
55
+ flex: 0 0 33.3333%;
56
+ max-width: 33.3333%;
57
+ }
58
+ .is-3 {
59
+ flex: 0 0 25%;
60
+ max-width: 25%;
61
+ }
62
+ .is-2 {
63
+ flex: 0 0 16.6667%;
64
+ max-width: 16.6667%;
65
+ }
66
+ .is-1 {
67
+ flex: 0 0 8.3333%;
68
+ max-width: 8.3333%;
69
+ }
70
+
71
+ .is-gap-1 {
72
+ gap: var(--spacing-xs) !important;
73
+ }
74
+ .is-gap-2 {
75
+ gap: var(--spacing-s) !important;
76
+ }
77
+ .is-gap-3 {
78
+ gap: var(--spacing-m) !important;
79
+ }
80
+ .is-gap-4 {
81
+ gap: var(--spacing-l) !important;
82
+ }
83
+ .is-gap-5 {
84
+ gap: var(--spacing-xl) !important;
85
+ }
86
+ .is-gap-6 {
87
+ gap: var(--spacing-xxl) !important;
88
+ }
89
+
90
+ .is-sticky {
91
+ position: sticky;
92
+ top: 0;
93
+ z-index: 9999;
94
+ }
95
+
96
+ @media screen and (max-width: 768px) {
97
+ .is-flex .is-flex:has(.is-12-mobile),
98
+ .is-flex .is-flex:has(.is-6-mobile),
99
+ .is-flex .is-flex:has(.is-4-mobile),
100
+ .is-flex .is-flex:has(.is-3-mobile),
101
+ .is-flex .is-flex:has(.is-2-mobile),
102
+ .is-flex .is-flex:has(.is-1-mobile) {
103
+ flex-wrap: wrap;
104
+ }
105
+ .is-12-mobile {
106
+ flex: 0 0 100% !important;
107
+ max-width: 100% !important;
108
+ }
109
+ .is-6-mobile {
110
+ flex: 0 0 50%;
111
+ max-width: 50%;
112
+ }
113
+ .is-4-mobile {
114
+ flex: 0 0 33.3333%;
115
+ max-width: 33.3333%;
116
+ }
117
+ .is-3-mobile {
118
+ flex: 0 0 25%;
119
+ max-width: 25%;
120
+ }
121
+ .is-2-mobile {
122
+ flex: 0 0 16.6667%;
123
+ max-width: 16.6667%;
124
+ }
125
+ .is-1-mobile {
126
+ flex: 0 0 8.3333%;
127
+ max-width: 8.3333%;
128
+ }
129
+ .hidden-mobile {
130
+ display: none !important;
131
+ }
132
+ .visible-mobile {
133
+ display: block !important;
134
+ }
135
+ }
136
+
137
+ @media screen and (max-width: 1024px) {
138
+ .hidden-tablet {
139
+ display: none !important;
140
+ }
141
+ .visible-tablet {
142
+ display: block !important;
143
+ }
144
+ }
145
+
146
+ @media screen and (min-width: 1025px) {
147
+ .hidden-desktop {
148
+ display: none !important;
149
+ }
150
+ .visible-desktop {
151
+ display: block !important;
152
+ }
153
+ .is-sticky-desktop {
154
+ position: sticky;
155
+ top: 0;
156
+ z-index: 9999;
157
+ }
158
+ }
package/dist/styles/utilities/index.css ADDED
@@ -0,0 +1,4 @@
1
+ @import "./spacing.css";
2
+ @import "./text.css";
3
+ @import "./color.css";
4
+ @import "./containers.css";
package/dist/styles/utilities/spacing.css ADDED
@@ -0,0 +1,433 @@
1
+ .m-0 {
2
+ margin: 0 !important;
3
+ }
4
+ .m-1 {
5
+ margin: var(--spacing-xs) !important;
6
+ }
7
+ .m-2 {
8
+ margin: var(--spacing-s) !important;
9
+ }
10
+ .m-3 {
11
+ margin: var(--spacing-m) !important;
12
+ }
13
+ .m-4 {
14
+ margin: var(--spacing-l) !important;
15
+ }
16
+ .m-5 {
17
+ margin: var(--spacing-xl) !important;
18
+ }
19
+ .m-6 {
20
+ margin: var(--spacing-xxl) !important;
21
+ }
22
+ .m-7 {
23
+ margin: var(--spacing-6xl) !important;
24
+ }
25
+ .mt-0 {
26
+ margin-top: 0 !important;
27
+ }
28
+ .mt-1 {
29
+ margin-top: var(--spacing-xs) !important;
30
+ }
31
+ .mt-2 {
32
+ margin-top: var(--spacing-s) !important;
33
+ }
34
+ .mt-3 {
35
+ margin-top: var(--spacing-m) !important;
36
+ }
37
+ .mt-4 {
38
+ margin-top: var(--spacing-l) !important;
39
+ }
40
+ .mt-5 {
41
+ margin-top: var(--spacing-xl) !important;
42
+ }
43
+ .mt-6 {
44
+ margin-top: var(--spacing-xxl) !important;
45
+ }
46
+ .mt-7 {
47
+ margin-top: var(--spacing-6xl) !important;
48
+ }
49
+ .mr-0 {
50
+ margin-right: 0 !important;
51
+ }
52
+ .mr-1 {
53
+ margin-right: var(--spacing-xs) !important;
54
+ }
55
+ .mr-2 {
56
+ margin-right: var(--spacing-s) !important;
57
+ }
58
+ .mr-3 {
59
+ margin-right: var(--spacing-m) !important;
60
+ }
61
+ .mr-4 {
62
+ margin-right: var(--spacing-l) !important;
63
+ }
64
+ .mr-5 {
65
+ margin-right: var(--spacing-xl) !important;
66
+ }
67
+ .mr-6 {
68
+ margin-right: var(--spacing-xxl) !important;
69
+ }
70
+ .mr-7 {
71
+ margin-right: var(--spacing-6xl) !important;
72
+ }
73
+ .mb-0 {
74
+ margin-bottom: 0 !important;
75
+ }
76
+ .mb-1 {
77
+ margin-bottom: var(--spacing-xs) !important;
78
+ }
79
+ .mb-2 {
80
+ margin-bottom: var(--spacing-s) !important;
81
+ }
82
+ .mb-3 {
83
+ margin-bottom: var(--spacing-m) !important;
84
+ }
85
+ .mb-4 {
86
+ margin-bottom: var(--spacing-l) !important;
87
+ }
88
+ .mb-5 {
89
+ margin-bottom: var(--spacing-xl) !important;
90
+ }
91
+ .mb-6 {
92
+ margin-bottom: var(--spacing-xxl) !important;
93
+ }
94
+ .mb-7 {
95
+ margin-bottom: var(--spacing-6xl) !important;
96
+ }
97
+ .ml-0 {
98
+ margin-left: 0 !important;
99
+ }
100
+ .ml-1 {
101
+ margin-left: var(--spacing-xs) !important;
102
+ }
103
+ .ml-2 {
104
+ margin-left: var(--spacing-s) !important;
105
+ }
106
+ .ml-3 {
107
+ margin-left: var(--spacing-m) !important;
108
+ }
109
+ .ml-4 {
110
+ margin-left: var(--spacing-l) !important;
111
+ }
112
+ .ml-5 {
113
+ margin-left: var(--spacing-xl) !important;
114
+ }
115
+ .ml-6 {
116
+ margin-left: var(--spacing-xxl) !important;
117
+ }
118
+ .ml-7 {
119
+ margin-left: var(--spacing-6xl) !important;
120
+ }
121
+ .mx-0 {
122
+ margin-left: 0 !important;
123
+ margin-right: 0 !important;
124
+ }
125
+ .mx-1 {
126
+ margin-left: var(--spacing-xs) !important;
127
+ margin-right: var(--spacing-xs) !important;
128
+ }
129
+ .mx-2 {
130
+ margin-left: var(--spacing-s) !important;
131
+ margin-right: var(--spacing-s) !important;
132
+ }
133
+ .mx-3 {
134
+ margin-left: var(--spacing-m) !important;
135
+ margin-right: var(--spacing-m) !important;
136
+ }
137
+ .mx-4 {
138
+ margin-left: var(--spacing-l) !important;
139
+ margin-right: var(--spacing-l) !important;
140
+ }
141
+ .mx-5 {
142
+ margin-left: var(--spacing-xl) !important;
143
+ margin-right: var(--spacing-xl) !important;
144
+ }
145
+ .mx-6 {
146
+ margin-left: var(--spacing-xxl) !important;
147
+ margin-right: var(--spacing-xxl) !important;
148
+ }
149
+ .mx-7 {
150
+ margin-left: var(--spacing-6xl) !important;
151
+ margin-right: var(--spacing-6xl) !important;
152
+ }
153
+ .my-0 {
154
+ margin-top: 0 !important;
155
+ margin-bottom: 0 !important;
156
+ }
157
+ .my-1 {
158
+ margin-top: var(--spacing-xs) !important;
159
+ margin-bottom: var(--spacing-xs) !important;
160
+ }
161
+ .my-2 {
162
+ margin-top: var(--spacing-s) !important;
163
+ margin-bottom: var(--spacing-s) !important;
164
+ }
165
+ .my-3 {
166
+ margin-top: var(--spacing-m) !important;
167
+ margin-bottom: var(--spacing-m) !important;
168
+ }
169
+ .my-4 {
170
+ margin-top: var(--spacing-l) !important;
171
+ margin-bottom: var(--spacing-l) !important;
172
+ }
173
+
174
+ .my-5 {
175
+ margin-top: var(--spacing-xl) !important;
176
+ margin-bottom: var(--spacing-xl) !important;
177
+ }
178
+ .my-6 {
179
+ margin-top: var(--spacing-xxl) !important;
180
+ margin-bottom: var(--spacing-xxl) !important;
181
+ }
182
+ .my-7 {
183
+ margin-top: var(--spacing-6xl) !important;
184
+ margin-bottom: var(--spacing-6xl) !important;
185
+ }
186
+ .p-0 {
187
+ padding: 0 !important;
188
+ }
189
+ .p-1 {
190
+ padding: var(--spacing-xs) !important;
191
+ }
192
+ .p-1 {
193
+ padding: var(--spacing-xs) !important;
194
+ }
195
+ .p-2 {
196
+ padding: var(--spacing-s) !important;
197
+ }
198
+ .p-3 {
199
+ padding: var(--spacing-m) !important;
200
+ }
201
+ .p-4 {
202
+ padding: var(--spacing-l) !important;
203
+ }
204
+ .p-5 {
205
+ padding: var(--spacing-xl) !important;
206
+ }
207
+ .p-6 {
208
+ padding: var(--spacing-xxl) !important;
209
+ }
210
+ .p-7 {
211
+ padding: var(--spacing-6xl) !important;
212
+ }
213
+ .pt-0 {
214
+ padding-top: 0 !important;
215
+ }
216
+ .pt-1 {
217
+ padding-top: var(--spacing-xs) !important;
218
+ }
219
+ .pt-2 {
220
+ padding-top: var(--spacing-s) !important;
221
+ }
222
+ .pt-3 {
223
+ padding-top: var(--spacing-m) !important;
224
+ }
225
+ .pt-4 {
226
+ padding-top: var(--spacing-l) !important;
227
+ }
228
+ .pt-5 {
229
+ padding-top: var(--spacing-xl) !important;
230
+ }
231
+ .pt-6 {
232
+ padding-top: var(--spacing-xxl) !important;
233
+ }
234
+ .pt-7 {
235
+ padding-top: var(--spacing-6xl) !important;
236
+ }
237
+ .pr-0 {
238
+ padding-right: 0 !important;
239
+ }
240
+ .pr-1 {
241
+ padding-right: var(--spacing-xs) !important;
242
+ }
243
+ .pr-2 {
244
+ padding-right: var(--spacing-s) !important;
245
+ }
246
+ .pr-3 {
247
+ padding-right: var(--spacing-m) !important;
248
+ }
249
+ .pr-4 {
250
+ padding-right: var(--spacing-l) !important;
251
+ }
252
+ .pr-5 {
253
+ padding-right: var(--spacing-xl) !important;
254
+ }
255
+ .pr-6 {
256
+ padding-right: var(--spacing-xxl) !important;
257
+ }
258
+ .pr-7 {
259
+ padding-right: var(--spacing-6xl) !important;
260
+ }
261
+ .pb-0 {
262
+ padding-bottom: 0 !important;
263
+ }
264
+ .pb-1 {
265
+ padding-bottom: var(--spacing-xs) !important;
266
+ }
267
+ .pb-2 {
268
+ padding-bottom: var(--spacing-s) !important;
269
+ }
270
+ .pb-3 {
271
+ padding-bottom: var(--spacing-m) !important;
272
+ }
273
+ .pb-4 {
274
+ padding-bottom: var(--spacing-l) !important;
275
+ }
276
+ .pb-5 {
277
+ padding-bottom: var(--spacing-xl) !important;
278
+ }
279
+ .pb-6 {
280
+ padding-bottom: var(--spacing-xxl) !important;
281
+ }
282
+ .pb-7 {
283
+ padding-bottom: var(--spacing-6xl) !important;
284
+ }
285
+ .pl-0 {
286
+ padding-left: 0 !important;
287
+ }
288
+ .pl-1 {
289
+ padding-left: var(--spacing-xs) !important;
290
+ }
291
+ .pl-2 {
292
+ padding-left: var(--spacing-s) !important;
293
+ }
294
+ .pl-3 {
295
+ padding-left: var(--spacing-m) !important;
296
+ }
297
+ .pl-4 {
298
+ padding-left: var(--spacing-l) !important;
299
+ }
300
+ .pl-5 {
301
+ padding-left: var(--spacing-xl) !important;
302
+ }
303
+ .pl-6 {
304
+ padding-left: var(--spacing-xxl) !important;
305
+ }
306
+ .pl-7 {
307
+ padding-left: var(--spacing-6xl) !important;
308
+ }
309
+ .px-0 {
310
+ padding-left: 0 !important;
311
+ padding-right: 0 !important;
312
+ }
313
+ .px-1 {
314
+ padding-left: var(--spacing-xs) !important;
315
+ padding-right: var(--spacing-xs) !important;
316
+ }
317
+ .px-2 {
318
+ padding-left: var(--spacing-s) !important;
319
+ padding-right: var(--spacing-s) !important;
320
+ }
321
+ .px-3 {
322
+ padding-left: var(--spacing-m) !important;
323
+ padding-right: var(--spacing-m) !important;
324
+ }
325
+ .px-4 {
326
+ padding-left: var(--spacing-l) !important;
327
+ padding-right: var(--spacing-l) !important;
328
+ }
329
+ .px-5 {
330
+ padding-left: var(--spacing-xl) !important;
331
+ padding-right: var(--spacing-xl) !important;
332
+ }
333
+ .px-6 {
334
+ padding-left: var(--spacing-xxl) !important;
335
+ padding-right: var(--spacing-xxl) !important;
336
+ }
337
+ .px-7 {
338
+ padding-left: var(--spacing-6xl) !important;
339
+ padding-right: var(--spacing-6xl) !important;
340
+ }
341
+ .py-0 {
342
+ padding-top: 0 !important;
343
+ padding-bottom: 0 !important;
344
+ }
345
+ .py-1 {
346
+ padding-top: var(--spacing-xs) !important;
347
+ padding-bottom: var(--spacing-xs) !important;
348
+ }
349
+ .py-2 {
350
+ padding-top: var(--spacing-s) !important;
351
+ padding-bottom: var(--spacing-s) !important;
352
+ }
353
+ .py-3 {
354
+ padding-top: var(--spacing-m) !important;
355
+ padding-bottom: var(--spacing-m) !important;
356
+ }
357
+ .py-4 {
358
+ padding-top: var(--spacing-l) !important;
359
+ padding-bottom: var(--spacing-l) !important;
360
+ }
361
+ .py-5 {
362
+ padding-top: var(--spacing-xl) !important;
363
+ padding-bottom: var(--spacing-xl) !important;
364
+ }
365
+ .py-6 {
366
+ padding-top: var(--spacing-xxl) !important;
367
+ padding-bottom: var(--spacing-xxl) !important;
368
+ }
369
+ .py-7 {
370
+ padding-top: var(--spacing-6xl) !important;
371
+ padding-bottom: var(--spacing-6xl) !important;
372
+ }
373
+ .has-spacing-body-small {
374
+ margin: 0 0 var(--spacing-l) 0 !important;
375
+ }
376
+ .has-spacing-body-default {
377
+ margin: 0 0 var(--spacing-l) 0 !important;
378
+ }
379
+ .has-spacing-body-large {
380
+ margin: 0 0 var(--spacing-xl) 0 !important;
381
+ }
382
+ .has-spacing-body-extra-large {
383
+ margin: 0 0 var(--spacing-xxl) 0 !important;
384
+ }
385
+ .has-spacing-heading-1 {
386
+ margin: var(--spacing-xxl) 0 !important;
387
+ }
388
+ .has-spacing-heading-2 {
389
+ margin: var(--spacing-l) 0 var(--spacing-xxl) 0 !important;
390
+ }
391
+ .has-spacing-heading-3 {
392
+ margin: var(--spacing-l) 0 var(--spacing-xxl) 0 !important;
393
+ }
394
+ .has-spacing-heading-4 {
395
+ margin: var(--spacing-l) 0 !important;
396
+ }
397
+ .has-spacing-heading-5 {
398
+ margin: var(--spacing-l) 0 !important;
399
+ }
400
+ .has-spacing-heading-6 {
401
+ margin: var(--spacing-l) 0 !important;
402
+ }
403
+ .has-spacing-display-1 {
404
+ margin: 0 0 var(--spacing-xxl) 0 !important;
405
+ }
406
+ .has-spacing-display-2 {
407
+ margin: 0 0 var(--spacing-l) 0 !important;
408
+ }
409
+ .has-spacing-subtitle-1 {
410
+ margin: 0 0 var(--spacing-l) 0 !important;
411
+ }
412
+ .has-spacing-subtitle-2 {
413
+ margin: 0 0 var(--spacing-l) 0 !important;
414
+ }
415
+ .has-spacing-label-small {
416
+ margin: 0 0 var(--spacing-l) 0 !important;
417
+ }
418
+ .has-spacing-label-default {
419
+ margin: 0 0 var(--spacing-l) 0 !important;
420
+ }
421
+ .has-spacing-label-large {
422
+ margin: 0 0 var(--spacing-xl) 0 !important;
423
+ }
424
+ .has-spacing-quote {
425
+ margin: 0 0 var(--spacing-l) 0 !important;
426
+ }
427
+
428
+ /* fix for collapsing margins on flex containers when stacked */
429
+ @media screen and (max-width: 768px) {
430
+ .is-flex + .is-flex {
431
+ margin-top: 0 !important;
432
+ }
433
+ }