@volvo-cars/css 0.36.0 → 0.38.0

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/dist/styles.d.ts CHANGED
@@ -1,5 +1,125 @@
1
1
  export interface ClassNames {
2
2
  readonly root: 'root';
3
+ /**
4
+ * ```css
5
+ * margin: -1rem
6
+ * ``` */ readonly m16: '-m-16';
7
+ /**
8
+ * ```css
9
+ * margin: -1.5rem
10
+ * ``` */ readonly m24: '-m-24';
11
+ /**
12
+ * ```css
13
+ * margin: -.25rem
14
+ * ``` */ readonly m4: '-m-4';
15
+ /**
16
+ * ```css
17
+ * margin: -.5rem
18
+ * ``` */ readonly m8: '-m-8';
19
+ /**
20
+ * ```css
21
+ * margin-bottom: -1rem
22
+ * ``` */ readonly mb16: '-mb-16';
23
+ /**
24
+ * ```css
25
+ * margin-bottom: -1.5rem
26
+ * ``` */ readonly mb24: '-mb-24';
27
+ /**
28
+ * ```css
29
+ * margin-bottom: -.25rem
30
+ * ``` */ readonly mb4: '-mb-4';
31
+ /**
32
+ * ```css
33
+ * margin-bottom: -.5rem
34
+ * ``` */ readonly mb8: '-mb-8';
35
+ /**
36
+ * ```css
37
+ * margin-inline-start: -1rem
38
+ * ``` */ readonly ml16: '-ml-16';
39
+ /**
40
+ * ```css
41
+ * margin-inline-start: -1.5rem
42
+ * ``` */ readonly ml24: '-ml-24';
43
+ /**
44
+ * ```css
45
+ * margin-inline-start: -.25rem
46
+ * ``` */ readonly ml4: '-ml-4';
47
+ /**
48
+ * ```css
49
+ * margin-inline-start: -.5rem
50
+ * ``` */ readonly ml8: '-ml-8';
51
+ /**
52
+ * ```css
53
+ * margin-inline-end: -1rem
54
+ * ``` */ readonly mr16: '-mr-16';
55
+ /**
56
+ * ```css
57
+ * margin-inline-end: -1.5rem
58
+ * ``` */ readonly mr24: '-mr-24';
59
+ /**
60
+ * ```css
61
+ * margin-inline-end: -.25rem
62
+ * ``` */ readonly mr4: '-mr-4';
63
+ /**
64
+ * ```css
65
+ * margin-inline-end: -.5rem
66
+ * ``` */ readonly mr8: '-mr-8';
67
+ /**
68
+ * ```css
69
+ * margin-top: -1rem
70
+ * ``` */ readonly mt16: '-mt-16';
71
+ /**
72
+ * ```css
73
+ * margin-top: -1.5rem
74
+ * ``` */ readonly mt24: '-mt-24';
75
+ /**
76
+ * ```css
77
+ * margin-top: -.25rem
78
+ * ``` */ readonly mt4: '-mt-4';
79
+ /**
80
+ * ```css
81
+ * margin-top: -.5rem
82
+ * ``` */ readonly mt8: '-mt-8';
83
+ /**
84
+ * ```css
85
+ * margin-inline-end: -1rem
86
+ * margin-inline-start: -1rem
87
+ * ``` */ readonly mx16: '-mx-16';
88
+ /**
89
+ * ```css
90
+ * margin-inline-end: -1.5rem
91
+ * margin-inline-start: -1.5rem
92
+ * ``` */ readonly mx24: '-mx-24';
93
+ /**
94
+ * ```css
95
+ * margin-inline-end: -.25rem
96
+ * margin-inline-start: -.25rem
97
+ * ``` */ readonly mx4: '-mx-4';
98
+ /**
99
+ * ```css
100
+ * margin-inline-end: -.5rem
101
+ * margin-inline-start: -.5rem
102
+ * ``` */ readonly mx8: '-mx-8';
103
+ /**
104
+ * ```css
105
+ * margin-top: -1rem
106
+ * margin-bottom: -1rem
107
+ * ``` */ readonly my16: '-my-16';
108
+ /**
109
+ * ```css
110
+ * margin-top: -1.5rem
111
+ * margin-bottom: -1.5rem
112
+ * ``` */ readonly my24: '-my-24';
113
+ /**
114
+ * ```css
115
+ * margin-top: -.25rem
116
+ * margin-bottom: -.25rem
117
+ * ``` */ readonly my4: '-my-4';
118
+ /**
119
+ * ```css
120
+ * margin-top: -.5rem
121
+ * margin-bottom: -.5rem
122
+ * ``` */ readonly my8: '-my-8';
3
123
  /**
4
124
  * ```css
5
125
  * background-color: var(--_v-color-black-64)
@@ -215,24 +335,23 @@ export interface ClassNames {
215
335
  * --stack-gap: var(--v-space-24)
216
336
  * --stack-gap: var(--v-space-32)
217
337
  * --stack-gap: var(--v-space-16)
218
- * font-size: var(--v-font-16-size)
219
- * font-weight: var(--v-font-emphasis-weight)
220
- * white-space: nowrap
221
338
  * user-select: none
339
+ * transition: transform var(--v-transition-default), background-color var(--v-transition-default)
222
340
  * justify-content: center
223
341
  * align-items: center
224
342
  * min-width: max-content
225
- * max-width: 100%
226
- * height: 3rem
227
- * transition: transform .2s, background-color .2s
228
343
  * display: inline-flex
229
344
  * position: relative
230
- * overflow: hidden
231
345
  * opacity: var(--_v-disabled-opacity)
232
- * --_min-touch-area: 44px
233
- * height: var(--_min-touch-area)
346
+ * font-size: var(--v-font-16-size)
347
+ * font-weight: var(--v-font-emphasis-weight)
348
+ * white-space: nowrap
349
+ * max-width: 100%
350
+ * height: 3rem
351
+ * overflow: hidden
234
352
  * content: ""
235
353
  * width: 100%
354
+ * height: 44px
236
355
  * position: absolute
237
356
  * top: 50%
238
357
  * transform: translateY(-50%)
@@ -248,6 +367,7 @@ export interface ClassNames {
248
367
  * --button-accent-color: var(--v-color-surface-feedback-red)
249
368
  * background: var(--button-accent-color)
250
369
  * --_overlay-rate: var(--_v-color-mix-strong)
370
+ * transform: scale(.95)
251
371
  * padding-inline: min(var(--v-space-32), 8vw)
252
372
  * border-radius: var(--v-radius-4)
253
373
  * width: 1.5rem
@@ -255,8 +375,6 @@ export interface ClassNames {
255
375
  * padding-inline: var(--v-space-16)
256
376
  * width: 1rem
257
377
  * height: 1rem
258
- * height: 44px
259
- * transform: scale(.95)
260
378
  * ``` */ readonly buttonFilled: 'button-filled';
261
379
  /**
262
380
  * ```css
@@ -277,24 +395,23 @@ export interface ClassNames {
277
395
  * --stack-gap: var(--v-space-24)
278
396
  * --stack-gap: var(--v-space-32)
279
397
  * --stack-gap: var(--v-space-16)
280
- * font-size: var(--v-font-16-size)
281
- * font-weight: var(--v-font-emphasis-weight)
282
- * white-space: nowrap
283
398
  * user-select: none
399
+ * transition: transform var(--v-transition-default), background-color var(--v-transition-default)
284
400
  * justify-content: center
285
401
  * align-items: center
286
402
  * min-width: max-content
287
- * max-width: 100%
288
- * height: 3rem
289
- * transition: transform .2s, background-color .2s
290
403
  * display: inline-flex
291
404
  * position: relative
292
- * overflow: hidden
293
405
  * opacity: var(--_v-disabled-opacity)
294
- * --_min-touch-area: 44px
295
- * height: var(--_min-touch-area)
406
+ * font-size: var(--v-font-16-size)
407
+ * font-weight: var(--v-font-emphasis-weight)
408
+ * white-space: nowrap
409
+ * max-width: 100%
410
+ * height: 3rem
411
+ * overflow: hidden
296
412
  * content: ""
297
413
  * width: 100%
414
+ * height: 44px
298
415
  * position: absolute
299
416
  * top: 50%
300
417
  * transform: translateY(-50%)
@@ -303,6 +420,7 @@ export interface ClassNames {
303
420
  * box-shadow: inset 0 0 0 1px var(--button-accent-color)
304
421
  * color: var(--v-color-foreground-inverted)
305
422
  * background-color: var(--button-accent-color)
423
+ * transform: scale(.95)
306
424
  * padding-inline: min(var(--v-space-32), 8vw)
307
425
  * border-radius: var(--v-radius-4)
308
426
  * width: 1.5rem
@@ -310,8 +428,6 @@ export interface ClassNames {
310
428
  * padding-inline: var(--v-space-16)
311
429
  * width: 1rem
312
430
  * height: 1rem
313
- * height: 44px
314
- * transform: scale(.95)
315
431
  * --button-accent-color: var(--v-color-foreground-primary)
316
432
  * color: var(--button-accent-color)
317
433
  * --button-accent-color: var(--v-color-foreground-accent-blue)
@@ -323,24 +439,23 @@ export interface ClassNames {
323
439
  * flex: 1 0 40cqw
324
440
  * --stack-gap: var(--v-space-24)
325
441
  * --stack-gap: var(--v-space-16)
326
- * font-size: var(--v-font-16-size)
327
- * font-weight: var(--v-font-emphasis-weight)
328
- * white-space: nowrap
329
442
  * user-select: none
443
+ * transition: transform var(--v-transition-default), background-color var(--v-transition-default)
330
444
  * justify-content: center
331
445
  * align-items: center
332
446
  * min-width: max-content
333
- * max-width: 100%
334
- * height: 3rem
335
- * transition: transform .2s, background-color .2s
336
447
  * display: inline-flex
337
448
  * position: relative
338
- * overflow: hidden
339
449
  * opacity: var(--_v-disabled-opacity)
340
- * --_min-touch-area: 44px
341
- * height: var(--_min-touch-area)
450
+ * font-size: var(--v-font-16-size)
451
+ * font-weight: var(--v-font-emphasis-weight)
452
+ * white-space: nowrap
453
+ * max-width: 100%
454
+ * height: 3rem
455
+ * overflow: hidden
342
456
  * content: ""
343
457
  * width: 100%
458
+ * height: 44px
344
459
  * position: absolute
345
460
  * top: 50%
346
461
  * transform: translateY(-50%)
@@ -371,6 +486,7 @@ export interface ClassNames {
371
486
  * --_arrow-rotation: var(--_rtl-arrow-rotation, -180deg)
372
487
  * --_arrow-rotation: 90deg
373
488
  * --_arrow-rotation: -90deg
489
+ * margin-inline-start: var(--v-space-8)
374
490
  * text-decoration-line: underline
375
491
  * ``` */ readonly buttonText: 'button-text';
376
492
  /**
@@ -399,6 +515,7 @@ export interface ClassNames {
399
515
  * width: 100%
400
516
  * margin-inline: auto
401
517
  * container-type: inline-size
518
+ * --_outer-margin: calc(var(--v-space-pagemargin) * 2)
402
519
  * ``` */ readonly container: 'container';
403
520
  /**
404
521
  * ```css
@@ -510,6 +627,13 @@ export interface ClassNames {
510
627
  * height: 2.5rem
511
628
  * line-height: 0
512
629
  * ``` */ readonly dialogClose: 'dialog__close';
630
+ /**
631
+ * ```css
632
+ * display: flex
633
+ * flex-direction: row
634
+ * justify-content: space-between
635
+ * align-items: center
636
+ * ``` */ readonly disclosure: 'disclosure';
513
637
  /**
514
638
  * ```css
515
639
  * display: flex
@@ -680,6 +804,36 @@ export interface ClassNames {
680
804
  * ```css
681
805
  * row-gap: var(--v-space-s)
682
806
  * ``` */ readonly gapYS: 'gap-y-s';
807
+ /**
808
+ * ```css
809
+ * grid-template-columns: repeat(2, minmax(0, 1fr))
810
+ * display: grid
811
+ * ``` */ readonly gridCols2: 'grid-cols-2';
812
+ /**
813
+ * ```css
814
+ * grid-template-columns: repeat(3, minmax(0, 1fr))
815
+ * display: grid
816
+ * ``` */ readonly gridCols3: 'grid-cols-3';
817
+ /**
818
+ * ```css
819
+ * height: var(--v-space-16)
820
+ * ``` */ readonly h16: 'h-16';
821
+ /**
822
+ * ```css
823
+ * height: var(--v-space-24)
824
+ * ``` */ readonly h24: 'h-24';
825
+ /**
826
+ * ```css
827
+ * height: var(--v-space-32)
828
+ * ``` */ readonly h32: 'h-32';
829
+ /**
830
+ * ```css
831
+ * height: var(--v-space-48)
832
+ * ``` */ readonly h48: 'h-48';
833
+ /**
834
+ * ```css
835
+ * height: var(--v-space-64)
836
+ * ``` */ readonly h64: 'h-64';
683
837
  /**
684
838
  * ```css
685
839
  * --stack-gap: var(--v-space-8)
@@ -707,6 +861,94 @@ export interface ClassNames {
707
861
  * ```css
708
862
  * hyphens: auto
709
863
  * ``` */ readonly hyphens: 'hyphens';
864
+ /**
865
+ * ```css
866
+ * user-select: none
867
+ * transition: transform var(--v-transition-default), background-color var(--v-transition-default)
868
+ * justify-content: center
869
+ * align-items: center
870
+ * min-width: max-content
871
+ * display: inline-flex
872
+ * position: relative
873
+ * opacity: var(--_v-disabled-opacity)
874
+ * transform: scale(.95)
875
+ * --button-accent-color: var(--v-color-foreground-primary)
876
+ * color: var(--button-accent-color)
877
+ * --button-accent-color: var(--v-color-foreground-accent-blue)
878
+ * --button-accent-color: var(--v-color-foreground-feedback-red)
879
+ * border-radius: var(--v-radius-full)
880
+ * flex-shrink: 0
881
+ * width: 2.5rem
882
+ * height: 2.5rem
883
+ * content: ""
884
+ * width: 44px
885
+ * height: 44px
886
+ * position: absolute
887
+ * top: 50%
888
+ * transform: translateY(-50%)
889
+ * background-color: color-mix(in lab, var(--background-color, var(--v-color-background-primary)), var(--button-accent-color) var(--_v-color-mix-subtle))
890
+ * ``` */ readonly iconButtonClear: 'icon-button-clear';
891
+ /**
892
+ * ```css
893
+ * user-select: none
894
+ * transition: transform var(--v-transition-default), background-color var(--v-transition-default)
895
+ * justify-content: center
896
+ * align-items: center
897
+ * min-width: max-content
898
+ * display: inline-flex
899
+ * position: relative
900
+ * opacity: var(--_v-disabled-opacity)
901
+ * --button-accent-color: var(--v-color-surface-neutral)
902
+ * --_color: var(--v-color-foreground-inverted)
903
+ * --_overlay-rate: 0%
904
+ * color: var(--_color)
905
+ * background: color-mix(in oklab, var(--button-accent-color), var(--_color) var(--_overlay-rate))
906
+ * --button-accent-color: var(--v-color-surface-accent-blue)
907
+ * --_color: var(--v-color-always-white)
908
+ * --button-accent-color: var(--v-color-surface-feedback-red)
909
+ * background: var(--button-accent-color)
910
+ * --_overlay-rate: var(--_v-color-mix-strong)
911
+ * transform: scale(.95)
912
+ * border-radius: var(--v-radius-full)
913
+ * flex-shrink: 0
914
+ * width: 2.5rem
915
+ * height: 2.5rem
916
+ * content: ""
917
+ * width: 44px
918
+ * height: 44px
919
+ * position: absolute
920
+ * top: 50%
921
+ * transform: translateY(-50%)
922
+ * ``` */ readonly iconButtonFilled: 'icon-button-filled';
923
+ /**
924
+ * ```css
925
+ * user-select: none
926
+ * transition: transform var(--v-transition-default), background-color var(--v-transition-default)
927
+ * justify-content: center
928
+ * align-items: center
929
+ * min-width: max-content
930
+ * display: inline-flex
931
+ * position: relative
932
+ * opacity: var(--_v-disabled-opacity)
933
+ * box-shadow: inset 0 0 0 1px var(--button-accent-color)
934
+ * color: var(--v-color-foreground-inverted)
935
+ * background-color: var(--button-accent-color)
936
+ * transform: scale(.95)
937
+ * --button-accent-color: var(--v-color-foreground-primary)
938
+ * color: var(--button-accent-color)
939
+ * --button-accent-color: var(--v-color-foreground-accent-blue)
940
+ * --button-accent-color: var(--v-color-foreground-feedback-red)
941
+ * border-radius: var(--v-radius-full)
942
+ * flex-shrink: 0
943
+ * width: 2.5rem
944
+ * height: 2.5rem
945
+ * content: ""
946
+ * width: 44px
947
+ * height: 44px
948
+ * position: absolute
949
+ * top: 50%
950
+ * transform: translateY(-50%)
951
+ * ``` */ readonly iconButtonOutlined: 'icon-button-outlined';
710
952
  /**
711
953
  * ```css
712
954
  * width: var(--_height)
@@ -734,6 +976,7 @@ export interface ClassNames {
734
976
  * ``` */ readonly iconMask: 'icon-mask';
735
977
  /**
736
978
  * ```css
979
+ * margin-inline-start: var(--v-space-8)
737
980
  * width: var(--_height)
738
981
  * min-width: var(--_height)
739
982
  * height: var(--_height)
@@ -1632,7 +1875,6 @@ export interface ClassNames {
1632
1875
  /**
1633
1876
  * ```css
1634
1877
  * cursor: pointer
1635
- * border-radius: var(--v-radius-4)
1636
1878
  * transition: color, background-color, border-color, box-shadow, text-decoration-color, fill, stroke
1637
1879
  * transition-duration: var(--_v-transition-speed-default)
1638
1880
  * display: block
@@ -1792,6 +2034,26 @@ export interface ClassNames {
1792
2034
  * display: inline-flex
1793
2035
  * margin-top: var(--v-space-8)
1794
2036
  * ``` */ readonly vLabel: 'v-label';
2037
+ /**
2038
+ * ```css
2039
+ * width: var(--v-space-16)
2040
+ * ``` */ readonly w16: 'w-16';
2041
+ /**
2042
+ * ```css
2043
+ * width: var(--v-space-24)
2044
+ * ``` */ readonly w24: 'w-24';
2045
+ /**
2046
+ * ```css
2047
+ * width: var(--v-space-32)
2048
+ * ``` */ readonly w32: 'w-32';
2049
+ /**
2050
+ * ```css
2051
+ * width: var(--v-space-48)
2052
+ * ``` */ readonly w48: 'w-48';
2053
+ /**
2054
+ * ```css
2055
+ * width: var(--v-space-64)
2056
+ * ``` */ readonly w64: 'w-64';
1795
2057
  /**
1796
2058
  * ```css
1797
2059
  * --_outer-margin: 0px