@semanticus/semanticus-css 2.1.1 → 3.0.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.
Files changed (150) hide show
  1. package/README.md +22 -21
  2. package/dist/semanticus-no-utilities.css +1 -1
  3. package/dist/semanticus-semantics.css +1 -1
  4. package/dist/semanticus-utilities.css +1 -1
  5. package/dist/semanticus.css +2 -2
  6. package/dist/semanticus.palette.amber.css +1 -1
  7. package/dist/semanticus.palette.azure.css +1 -1
  8. package/dist/semanticus.palette.blue.css +1 -1
  9. package/dist/semanticus.palette.cyan.css +1 -1
  10. package/dist/semanticus.palette.fuchsia.css +1 -1
  11. package/dist/semanticus.palette.green.css +1 -1
  12. package/dist/semanticus.palette.grey.css +1 -1
  13. package/dist/semanticus.palette.indigo.css +1 -1
  14. package/dist/semanticus.palette.jade.css +1 -1
  15. package/dist/semanticus.palette.lime.css +1 -1
  16. package/dist/semanticus.palette.orange.css +1 -1
  17. package/dist/semanticus.palette.pink.css +1 -1
  18. package/dist/semanticus.palette.pumpkin.css +1 -1
  19. package/dist/semanticus.palette.purple.css +1 -1
  20. package/dist/semanticus.palette.red.css +1 -1
  21. package/dist/semanticus.palette.sand.css +1 -1
  22. package/dist/semanticus.palette.slate.css +1 -1
  23. package/dist/semanticus.palette.violet.css +1 -1
  24. package/dist/semanticus.palette.yellow.css +1 -1
  25. package/dist/semanticus.palette.zinc.css +1 -1
  26. package/dist/semanticus.size.pico.css +1 -1
  27. package/package.json +1 -1
  28. package/src/components/_card.css +55 -46
  29. package/src/components/_icons.css +2 -2
  30. package/src/components/_pane.css +22 -0
  31. package/src/components/_sidebar.css +12 -7
  32. package/src/components/_variables.css +28 -0
  33. package/src/components/modules.css +5 -2
  34. package/src/index.css +1 -1
  35. package/src/palettes/amber.css +22 -26
  36. package/src/palettes/azure.css +22 -26
  37. package/src/palettes/blue.css +22 -26
  38. package/src/palettes/cyan.css +22 -26
  39. package/src/palettes/fuchsia.css +25 -26
  40. package/src/palettes/green.css +22 -26
  41. package/src/palettes/grey.css +22 -26
  42. package/src/palettes/indigo.css +22 -26
  43. package/src/palettes/jade.css +22 -26
  44. package/src/palettes/lime.css +22 -26
  45. package/src/palettes/orange.css +22 -26
  46. package/src/palettes/pink.css +22 -26
  47. package/src/palettes/pumpkin.css +25 -26
  48. package/src/palettes/purple.css +22 -26
  49. package/src/palettes/red.css +22 -26
  50. package/src/palettes/sand.css +22 -26
  51. package/src/palettes/slate.css +22 -26
  52. package/src/palettes/violet.css +22 -26
  53. package/src/palettes/yellow.css +22 -26
  54. package/src/palettes/zinc.css +22 -26
  55. package/src/semantics/attributes/_aria-busy.css +1 -10
  56. package/src/semantics/attributes/_aria-disabled.css +2 -23
  57. package/src/semantics/attributes/_disabled.css +3 -0
  58. package/src/semantics/attributes/_popover.css +4 -3
  59. package/src/semantics/attributes/_role-group-search.css +135 -0
  60. package/src/semantics/attributes/_role-list.css +23 -0
  61. package/src/semantics/attributes/_role-status-alert.css +28 -22
  62. package/src/semantics/attributes/_role-tooltip.css +11 -8
  63. package/src/semantics/elements/_address.css +2 -2
  64. package/src/semantics/elements/_aside.css +1 -2
  65. package/src/semantics/elements/_blockquote.css +6 -6
  66. package/src/semantics/elements/_body.css +0 -2
  67. package/src/semantics/elements/_buttons.css +100 -0
  68. package/src/semantics/elements/_code.css +18 -8
  69. package/src/semantics/elements/_del.css +1 -1
  70. package/src/semantics/elements/_details.css +147 -162
  71. package/src/semantics/elements/_dialog.css +24 -17
  72. package/src/semantics/elements/_fieldset.css +27 -0
  73. package/src/semantics/elements/_figure.css +1 -1
  74. package/src/semantics/elements/_footer.css +0 -1
  75. package/src/semantics/elements/_header.css +0 -1
  76. package/src/semantics/elements/_headings.css +86 -9
  77. package/src/semantics/elements/_hgroup.css +2 -2
  78. package/src/semantics/elements/_hr.css +2 -2
  79. package/src/semantics/elements/_inputs.css +14 -0
  80. package/src/semantics/elements/_ins.css +1 -1
  81. package/src/semantics/elements/_label.css +4 -0
  82. package/src/semantics/elements/_links.css +39 -27
  83. package/src/semantics/elements/_lists.css +10 -8
  84. package/src/semantics/elements/_mark.css +2 -2
  85. package/src/semantics/elements/_nav.css +31 -7
  86. package/src/semantics/elements/_p.css +2 -2
  87. package/src/semantics/elements/_progress.css +18 -11
  88. package/src/semantics/elements/{_document.css → _root.css} +12 -9
  89. package/src/semantics/elements/_section.css +0 -1
  90. package/src/semantics/elements/_small.css +27 -0
  91. package/src/semantics/elements/_table.css +20 -6
  92. package/src/semantics/elements/inputs/_checkbox-radio.css +30 -0
  93. package/src/semantics/elements/inputs/_checkbox.css +19 -0
  94. package/src/semantics/elements/{_type-color.css → inputs/_color.css} +5 -3
  95. package/src/semantics/elements/inputs/_common.css +87 -0
  96. package/src/semantics/elements/inputs/_date.css +53 -0
  97. package/src/semantics/elements/inputs/_file.css +35 -0
  98. package/src/semantics/elements/inputs/_input.css +47 -0
  99. package/src/semantics/elements/inputs/_radio.css +11 -0
  100. package/src/semantics/elements/inputs/_range.css +69 -0
  101. package/src/semantics/elements/inputs/_search.css +48 -0
  102. package/src/semantics/elements/inputs/_select.css +32 -0
  103. package/src/semantics/elements/inputs/_switch.css +46 -0
  104. package/src/semantics/elements/inputs/_textarea.css +30 -0
  105. package/src/semantics/modules.css +9 -13
  106. package/src/sizes/pico.css +24 -23
  107. package/src/utilities/_grid.css +917 -179
  108. package/src/utilities/_variables.css +21 -14
  109. package/src/utilities/borders/_border-radius.css +9 -9
  110. package/src/utilities/borders/_border-style.css +10 -10
  111. package/src/utilities/colors/_bg-colors.css +22 -38
  112. package/src/utilities/colors/_border-colors.css +20 -26
  113. package/src/utilities/colors/_subtle-colors.css +55 -61
  114. package/src/utilities/colors/_text-bg-colors.css +35 -35
  115. package/src/utilities/colors/_text-colors.css +24 -46
  116. package/src/utilities/effects/_focus-ring.css +14 -11
  117. package/src/utilities/layout/_misc.css +4 -3
  118. package/src/utilities/sizing/_width.css +48 -0
  119. package/src/utilities/spacing/_gap.css +0 -43
  120. package/src/utilities/spacing/_margin.css +0 -1
  121. package/src/utilities/spacing/_padding.css +0 -1
  122. package/src/utilities/typography/_font-sizes.css +6 -6
  123. package/src/variables/_all.css +3 -4
  124. package/src/variables/_theme.css +394 -237
  125. package/src/variants/_intent.css +8 -0
  126. package/src/variants/_variables.css +109 -9
  127. package/src/variants/intent/_common.css +33 -0
  128. package/src/variants/intent/_contrast.css +30 -31
  129. package/src/variants/intent/_danger.css +7 -30
  130. package/src/variants/intent/_info.css +7 -30
  131. package/src/variants/intent/_primary.css +7 -30
  132. package/src/variants/intent/_secondary.css +7 -30
  133. package/src/variants/intent/_success.css +7 -30
  134. package/src/variants/intent/_warning.css +7 -30
  135. package/src/variants/modifiers/_ghost.css +52 -152
  136. package/src/variants/modifiers/_striped.css +6 -5
  137. package/src/variants/modifiers/_subtle.css +55 -113
  138. package/src/variants/modules.css +1 -7
  139. package/src/semantics/attributes/_role-group.css +0 -126
  140. package/src/semantics/attributes/_role-search.css +0 -14
  141. package/src/semantics/elements/_article.css +0 -3
  142. package/src/semantics/elements/_button.css +0 -124
  143. package/src/semantics/elements/_input.css +0 -302
  144. package/src/semantics/elements/_main.css +0 -3
  145. package/src/semantics/elements/_type-checkbox-radio.css +0 -139
  146. package/src/semantics/elements/_type-date.css +0 -37
  147. package/src/semantics/elements/_type-file.css +0 -23
  148. package/src/semantics/elements/_type-range.css +0 -87
  149. package/src/semantics/elements/_type-search.css +0 -30
  150. package/src/variables/_elements.css +0 -195
package/src/utilities/colors/_text-colors.css CHANGED
@@ -1,84 +1,62 @@
1
1
  .text-reset {
2
- --color-text-opacity: 100%;
3
-
4
2
  color: inherit !important;
5
3
  }
6
4
 
7
5
  .text-body {
8
- color: oklch(from var(--color-text) l c h / var(--color-text-opacity)) !important;
6
+ color: var(--typography-color) !important;
9
7
  }
10
8
 
11
9
  .text-muted {
12
- --color-text: var(--color-text-muted);
10
+ --typography-color: var(--color-muted);
13
11
 
14
- color: var(--color-text) !important;
12
+ color: var(--typography-color) !important;
15
13
  }
16
14
 
17
15
  .text-primary {
18
- --color-text: oklch(from var(--color-primary-text) l c h / var(--color-text-opacity));
19
- --color-text-muted: color-mix(in srgb, var(--color-text), transparent 40%);
16
+ --typography-color: var(--primary-color);
17
+ --color-muted: color-mix(in srgb, var(--typography-color), transparent 40%);
20
18
 
21
- color: var(--color-text) !important;
19
+ color: var(--typography-color) !important;
22
20
  }
23
21
 
24
22
  .text-secondary {
25
- --color-text: oklch(from var(--color-secondary-text) l c h / var(--color-text-opacity));
26
- --color-text-muted: color-mix(in srgb, var(--color-text), transparent 40%);
23
+ --typography-color: var(--secondary-color);
24
+ --color-muted: color-mix(in srgb, var(--typography-color), transparent 40%);
27
25
 
28
- color: var(--color-text) !important;
26
+ color: var(--typography-color) !important;
29
27
  }
30
28
 
31
29
  .text-contrast {
32
- --color-text: oklch(from var(--color-contrast-text) l c h / var(--color-text-opacity));
33
- --color-text-muted: color-mix(in srgb, var(--color-text), transparent 40%);
30
+ --typography-color: var(--contrast-color);
31
+ --color-muted: color-mix(in srgb, var(--typography-color), transparent 40%);
34
32
 
35
- color: var(--color-text) !important;
33
+ color: var(--typography-color) !important;
36
34
  }
37
35
 
38
36
  .text-success {
39
- --color-text: oklch(from var(--color-success-text) l c h / var(--color-text-opacity));
40
- --color-text-muted: color-mix(in srgb, var(--color-text), transparent 40%);
37
+ --typography-color: var(--success-color);
38
+ --color-muted: color-mix(in srgb, var(--typography-color), transparent 40%);
41
39
 
42
- color: var(--color-text) !important;
40
+ color: var(--typography-color) !important;
43
41
  }
44
42
 
45
43
  .text-info {
46
- --color-text: oklch(from var(--color-info-text) l c h / var(--color-text-opacity));
47
- --color-text-muted: color-mix(in srgb, var(--color-text), transparent 40%);
44
+ --typography-color: var(--info-color);
45
+ --color-muted: color-mix(in srgb, var(--typography-color), transparent 40%);
48
46
 
49
- color: var(--color-text) !important;
47
+ color: var(--typography-color) !important;
50
48
  }
51
49
 
52
50
  .text-warning {
53
- --color-text: oklch(from var(--color-warning-text) l c h / var(--color-text-opacity));
54
- --color-text-muted: color-mix(in srgb, var(--color-text), transparent 40%);
51
+ --typography-color: var(--warning-color);
52
+ --color-muted: color-mix(in srgb, var(--typography-color), transparent 40%);
55
53
 
56
- color: var(--color-text) !important;
54
+ color: var(--typography-color) !important;
57
55
  }
58
56
 
59
57
  .text-danger {
60
- --color-text: oklch(from var(--color-danger-text) l c h / var(--color-text-opacity));
61
- --color-text-muted: color-mix(in srgb, var(--color-text), transparent 40%);
62
-
63
- color: var(--color-text) !important;
64
- }
65
-
66
- .text-opacity-10 {
67
- --color-text-opacity: 10%;
68
- }
69
-
70
- .text-opacity-25 {
71
- --color-text-opacity: 25%;
72
- }
73
-
74
- .text-opacity-50 {
75
- --color-text-opacity: 50%;
76
- }
77
-
78
- .text-opacity-75 {
79
- --color-text-opacity: 75%;
80
- }
58
+ --typography-color: var(--danger-color);
59
+ --color-muted: color-mix(in srgb, var(--typography-color), transparent 40%);
81
60
 
82
- .text-opacity-100 {
83
- --color-text-opacity: 100%;
61
+ color: var(--typography-color) !important;
84
62
  }
package/src/utilities/effects/_focus-ring.css CHANGED
@@ -1,33 +1,36 @@
1
- .focus-ring:focus {
2
- outline: 0;
3
- box-shadow: var(--focus-ring-x, 0) var(--focus-ring-y, 0) var(--focus-ring-blur, 0) var(--outline-size) var(--focus-ring-color);
1
+ .focus-ring {
2
+ --_focus-ring-color: var(--primary-outline-color);
3
+
4
+ &:focus {
5
+ outline: var(--outline-width) solid var(--_focus-ring-color);
6
+ box-shadow: 0 0 0 var(--focus-ring-width) var(--_focus-ring-color);
7
+ }
4
8
  }
5
9
 
6
- .focus-ring,
7
10
  .focus-ring-primary {
8
- --focus-ring-color: var(--color-primary-focus-ring);
11
+ --_focus-ring-color: var(--primary-outline-color);
9
12
  }
10
13
 
11
14
  .focus-ring-secondary {
12
- --focus-ring-color: var(--color-secondary-focus-ring);
15
+ --_focus-ring-color: var(--secondary-outline-color);
13
16
  }
14
17
 
15
18
  .focus-ring-success {
16
- --focus-ring-color: var(--color-success-focus-ring);
19
+ --_focus-ring-color: var(--success-outline-color);
17
20
  }
18
21
 
19
22
  .focus-ring-info {
20
- --focus-ring-color: var(--color-info-focus-ring);
23
+ --_focus-ring-color: var(--info-outline-color);
21
24
  }
22
25
 
23
26
  .focus-ring-warning {
24
- --focus-ring-color: var(--color-warning-focus-ring);
27
+ --_focus-ring-color: var(--warning-outline-color);
25
28
  }
26
29
 
27
30
  .focus-ring-danger {
28
- --focus-ring-color: var(--color-danger-focus-ring);
31
+ --_focus-ring-color: var(--danger-outline-color);
29
32
  }
30
33
 
31
34
  .focus-ring-contrast {
32
- --focus-ring-color: var(--color-contrast-focus-ring);
35
+ --_focus-ring-color: var(--contrast-outline-color);
33
36
  }
package/src/utilities/layout/_misc.css CHANGED
@@ -8,7 +8,7 @@
8
8
  display: inline-flex;
9
9
  gap: 0.375rem;
10
10
  align-items: center;
11
- text-decoration-color: oklch(from var(--color-text) l c h / 0.4);
11
+ text-decoration-color: oklch(from var(--color) l c h / 0.4);
12
12
  text-underline-offset: 0.25em;
13
13
  backface-visibility: hidden;
14
14
  }
@@ -25,7 +25,8 @@
25
25
  }
26
26
  }
27
27
 
28
- .icon-link-hover:hover > .bi, .icon-link-hover:focus-visible > .bi {
28
+ .icon-link-hover:hover > .bi,
29
+ .icon-link-hover:focus-visible > .bi {
29
30
  transform: var(--icon-link-transform, translate3d(0.25em, 0, 0));
30
31
  }
31
32
 
@@ -42,7 +43,7 @@
42
43
  .vr {
43
44
  display: inline-block;
44
45
  align-self: stretch;
45
- width: var(--border-size);
46
+ width: var(--border-width);
46
47
  min-height: 1em;
47
48
  background-color: currentcolor;
48
49
  opacity: 0.25;
package/src/utilities/sizing/_width.css CHANGED
@@ -1,31 +1,79 @@
1
+ .w-5 {
2
+ width: 5% !important;
3
+ }
4
+
1
5
  .w-10 {
2
6
  width: 10% !important;
3
7
  }
4
8
 
9
+ .w-15 {
10
+ width: 15% !important;
11
+ }
12
+
13
+ .w-20 {
14
+ width: 20% !important;
15
+ }
16
+
5
17
  .w-25 {
6
18
  width: 25% !important;
7
19
  }
8
20
 
21
+ .w-30 {
22
+ width: 30% !important;
23
+ }
24
+
25
+ .w-35 {
26
+ width: 35% !important;
27
+ }
28
+
9
29
  .w-40 {
10
30
  width: 40% !important;
11
31
  }
12
32
 
33
+ .w-45 {
34
+ width: 45% !important;
35
+ }
36
+
13
37
  .w-50 {
14
38
  width: 50% !important;
15
39
  }
16
40
 
41
+ .w-55 {
42
+ width: 55% !important;
43
+ }
44
+
17
45
  .w-60 {
18
46
  width: 60% !important;
19
47
  }
20
48
 
49
+ .w-65 {
50
+ width: 65% !important;
51
+ }
52
+
53
+ .w-70 {
54
+ width: 70% !important;
55
+ }
56
+
21
57
  .w-75 {
22
58
  width: 75% !important;
23
59
  }
24
60
 
61
+ .w-80 {
62
+ width: 80% !important;
63
+ }
64
+
65
+ .w-85 {
66
+ width: 85% !important;
67
+ }
68
+
25
69
  .w-90 {
26
70
  width: 90% !important;
27
71
  }
28
72
 
73
+ .w-95 {
74
+ width: 95% !important;
75
+ }
76
+
29
77
  .w-100 {
30
78
  width: 100% !important;
31
79
  }
package/src/utilities/spacing/_gap.css CHANGED
@@ -55,37 +55,30 @@
55
55
  }
56
56
 
57
57
  .column-gap-0 {
58
- -moz-column-gap: 0 !important;
59
58
  column-gap: 0 !important;
60
59
  }
61
60
 
62
61
  .column-gap-d {
63
- -moz-column-gap: var(--spacing) !important;
64
62
  column-gap: var(--spacing) !important;
65
63
  }
66
64
 
67
65
  .column-gap-1 {
68
- -moz-column-gap: var(--spacing-1) !important;
69
66
  column-gap: var(--spacing-1) !important;
70
67
  }
71
68
 
72
69
  .column-gap-2 {
73
- -moz-column-gap: var(--spacing-2) !important;
74
70
  column-gap: var(--spacing-2) !important;
75
71
  }
76
72
 
77
73
  .column-gap-3 {
78
- -moz-column-gap: var(--spacing-3) !important;
79
74
  column-gap: var(--spacing-3) !important;
80
75
  }
81
76
 
82
77
  .column-gap-4 {
83
- -moz-column-gap: var(--spacing-4) !important;
84
78
  column-gap: var(--spacing-4) !important;
85
79
  }
86
80
 
87
81
  .column-gap-5 {
88
- -moz-column-gap: var(--spacing-5) !important;
89
82
  column-gap: var(--spacing-5) !important;
90
83
  }
91
84
 
@@ -133,31 +126,24 @@
133
126
  row-gap: var(--spacing-5) !important;
134
127
  }
135
128
  .column-gap-sm-0 {
136
- -moz-column-gap: 0 !important;
137
129
  column-gap: 0 !important;
138
130
  }
139
131
  .column-gap-sm-d {
140
- -moz-column-gap: var(--spacing) !important;
141
132
  column-gap: var(--spacing) !important;
142
133
  }
143
134
  .column-gap-sm-1 {
144
- -moz-column-gap: var(--spacing-1) !important;
145
135
  column-gap: var(--spacing-1) !important;
146
136
  }
147
137
  .column-gap-sm-2 {
148
- -moz-column-gap: var(--spacing-2) !important;
149
138
  column-gap: var(--spacing-2) !important;
150
139
  }
151
140
  .column-gap-sm-3 {
152
- -moz-column-gap: var(--spacing-3) !important;
153
141
  column-gap: var(--spacing-3) !important;
154
142
  }
155
143
  .column-gap-sm-4 {
156
- -moz-column-gap: var(--spacing-4) !important;
157
144
  column-gap: var(--spacing-4) !important;
158
145
  }
159
146
  .column-gap-sm-5 {
160
- -moz-column-gap: var(--spacing-5) !important;
161
147
  column-gap: var(--spacing-5) !important;
162
148
  }
163
149
  }
@@ -206,31 +192,24 @@
206
192
  row-gap: var(--spacing-5) !important;
207
193
  }
208
194
  .column-gap-md-0 {
209
- -moz-column-gap: 0 !important;
210
195
  column-gap: 0 !important;
211
196
  }
212
197
  .column-gap-md-d {
213
- -moz-column-gap: var(--spacing) !important;
214
198
  column-gap: var(--spacing) !important;
215
199
  }
216
200
  .column-gap-md-1 {
217
- -moz-column-gap: var(--spacing-1) !important;
218
201
  column-gap: var(--spacing-1) !important;
219
202
  }
220
203
  .column-gap-md-2 {
221
- -moz-column-gap: var(--spacing-2) !important;
222
204
  column-gap: var(--spacing-2) !important;
223
205
  }
224
206
  .column-gap-md-3 {
225
- -moz-column-gap: var(--spacing-3) !important;
226
207
  column-gap: var(--spacing-3) !important;
227
208
  }
228
209
  .column-gap-md-4 {
229
- -moz-column-gap: var(--spacing-4) !important;
230
210
  column-gap: var(--spacing-4) !important;
231
211
  }
232
212
  .column-gap-md-5 {
233
- -moz-column-gap: var(--spacing-5) !important;
234
213
  column-gap: var(--spacing-5) !important;
235
214
  }
236
215
  }
@@ -279,31 +258,24 @@
279
258
  row-gap: var(--spacing-5) !important;
280
259
  }
281
260
  .column-gap-lg-0 {
282
- -moz-column-gap: 0 !important;
283
261
  column-gap: 0 !important;
284
262
  }
285
263
  .column-gap-lg-d {
286
- -moz-column-gap: var(--spacing) !important;
287
264
  column-gap: var(--spacing) !important;
288
265
  }
289
266
  .column-gap-lg-1 {
290
- -moz-column-gap: var(--spacing-1) !important;
291
267
  column-gap: var(--spacing-1) !important;
292
268
  }
293
269
  .column-gap-lg-2 {
294
- -moz-column-gap: var(--spacing-2) !important;
295
270
  column-gap: var(--spacing-2) !important;
296
271
  }
297
272
  .column-gap-lg-3 {
298
- -moz-column-gap: var(--spacing-3) !important;
299
273
  column-gap: var(--spacing-3) !important;
300
274
  }
301
275
  .column-gap-lg-4 {
302
- -moz-column-gap: var(--spacing-4) !important;
303
276
  column-gap: var(--spacing-4) !important;
304
277
  }
305
278
  .column-gap-lg-5 {
306
- -moz-column-gap: var(--spacing-5) !important;
307
279
  column-gap: var(--spacing-5) !important;
308
280
  }
309
281
  }
@@ -352,31 +324,24 @@
352
324
  row-gap: var(--spacing-5) !important;
353
325
  }
354
326
  .column-gap-xl-0 {
355
- -moz-column-gap: 0 !important;
356
327
  column-gap: 0 !important;
357
328
  }
358
329
  .column-gap-xl-d {
359
- -moz-column-gap: var(--spacing) !important;
360
330
  column-gap: var(--spacing) !important;
361
331
  }
362
332
  .column-gap-xl-1 {
363
- -moz-column-gap: var(--spacing-1) !important;
364
333
  column-gap: var(--spacing-1) !important;
365
334
  }
366
335
  .column-gap-xl-2 {
367
- -moz-column-gap: var(--spacing-2) !important;
368
336
  column-gap: var(--spacing-2) !important;
369
337
  }
370
338
  .column-gap-xl-3 {
371
- -moz-column-gap: var(--spacing-3) !important;
372
339
  column-gap: var(--spacing-3) !important;
373
340
  }
374
341
  .column-gap-xl-4 {
375
- -moz-column-gap: var(--spacing-4) !important;
376
342
  column-gap: var(--spacing-4) !important;
377
343
  }
378
344
  .column-gap-xl-5 {
379
- -moz-column-gap: var(--spacing-5) !important;
380
345
  column-gap: var(--spacing-5) !important;
381
346
  }
382
347
  }
@@ -425,32 +390,24 @@
425
390
  row-gap: var(--spacing-5) !important;
426
391
  }
427
392
  .column-gap-xxl-0 {
428
- -moz-column-gap: 0 !important;
429
393
  column-gap: 0 !important;
430
394
  }
431
395
  .column-gap-xxl-d {
432
- -moz-column-gap: var(--spacing) !important;
433
396
  column-gap: var(--spacing) !important;
434
397
  }
435
398
  .column-gap-xxl-1 {
436
- -moz-column-gap: var(--spacing-1) !important;
437
399
  column-gap: var(--spacing-1) !important;
438
400
  }
439
401
  .column-gap-xxl-2 {
440
- -moz-column-gap: var(--spacing-2) !important;
441
402
  column-gap: var(--spacing-2) !important;
442
403
  }
443
404
  .column-gap-xxl-3 {
444
- -moz-column-gap: var(--spacing-3) !important;
445
405
  column-gap: var(--spacing-3) !important;
446
406
  }
447
407
  .column-gap-xxl-4 {
448
- -moz-column-gap: var(--spacing-4) !important;
449
408
  column-gap: var(--spacing-4) !important;
450
409
  }
451
410
  .column-gap-xxl-5 {
452
- -moz-column-gap: var(--spacing-5) !important;
453
411
  column-gap: var(--spacing-5) !important;
454
412
  }
455
413
  }
456
-
package/src/utilities/spacing/_margin.css CHANGED
@@ -1172,4 +1172,3 @@
1172
1172
  margin-left: auto !important;
1173
1173
  }
1174
1174
  }
1175
-
package/src/utilities/spacing/_padding.css CHANGED
@@ -1027,4 +1027,3 @@
1027
1027
  padding-left: var(--spacing-5) !important;
1028
1028
  }
1029
1029
  }
1030
-
package/src/utilities/typography/_font-sizes.css CHANGED
@@ -1,23 +1,23 @@
1
1
  .fs-1 {
2
- font-size: var(--h1-size) !important;
2
+ font-size: var(--h1-font-size) !important;
3
3
  }
4
4
 
5
5
  .fs-2 {
6
- font-size: var(--h2-size) !important;
6
+ font-size: var(--h2-font-size) !important;
7
7
  }
8
8
 
9
9
  .fs-3 {
10
- font-size: var(--h3-size) !important;
10
+ font-size: var(--h3-font-size) !important;
11
11
  }
12
12
 
13
13
  .fs-4 {
14
- font-size: var(--h4-size) !important;
14
+ font-size: var(--h4-font-size) !important;
15
15
  }
16
16
 
17
17
  .fs-5 {
18
- font-size: var(--h5-size) !important;
18
+ font-size: var(--h5-font-size) !important;
19
19
  }
20
20
 
21
21
  .fs-6 {
22
- font-size: var(--h6-size) !important;
22
+ font-size: var(--h6-font-size) !important;
23
23
  }
package/src/variables/_all.css CHANGED
@@ -1,4 +1,3 @@
1
- @import '../palettes/azure.css';
2
- @import './_breakpoints.css';
3
- @import './_theme.css';
4
- @import './_elements.css';
1
+ @import "../palettes/azure.css";
2
+ @import "./_breakpoints.css";
3
+ @import "./_theme.css";