@semanticus/semanticus-css 0.9.0 → 1.1.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 (148) hide show
  1. package/NOTICE +16 -16
  2. package/README.md +128 -29
  3. package/dist/semanticus-no-utilities.css +11 -0
  4. package/dist/semanticus-semantics.css +3 -4
  5. package/dist/semanticus-utilities.css +11 -0
  6. package/dist/semanticus.css +4 -12
  7. package/dist/semanticus.palette.amber.css +1 -1
  8. package/dist/semanticus.palette.azure.css +1 -0
  9. package/dist/semanticus.palette.blue.css +1 -1
  10. package/dist/semanticus.palette.cyan.css +1 -1
  11. package/dist/semanticus.palette.fuchsia.css +1 -1
  12. package/dist/semanticus.palette.green.css +1 -1
  13. package/dist/semanticus.palette.grey.css +1 -1
  14. package/dist/semanticus.palette.indigo.css +1 -1
  15. package/dist/semanticus.palette.jade.css +1 -1
  16. package/dist/semanticus.palette.lime.css +1 -1
  17. package/dist/semanticus.palette.orange.css +1 -1
  18. package/dist/semanticus.palette.pink.css +1 -1
  19. package/dist/semanticus.palette.pumpkin.css +1 -1
  20. package/dist/semanticus.palette.purple.css +1 -1
  21. package/dist/semanticus.palette.red.css +1 -1
  22. package/dist/semanticus.palette.sand.css +1 -1
  23. package/dist/semanticus.palette.slate.css +1 -1
  24. package/dist/semanticus.palette.violet.css +1 -1
  25. package/dist/semanticus.palette.yellow.css +1 -1
  26. package/dist/semanticus.palette.zinc.css +1 -1
  27. package/dist/semanticus.size.pico.css +1 -1
  28. package/package.json +24 -15
  29. package/src/components/_card.css +47 -0
  30. package/src/{variants → components}/_container.css +3 -10
  31. package/src/components/_icons.css +59 -0
  32. package/src/components/_pane.css +19 -0
  33. package/src/{variants → components}/_sidebar.css +3 -5
  34. package/src/components/modules.css +5 -0
  35. package/src/index.css +8 -10
  36. package/src/no-utilities.css +22 -0
  37. package/src/palettes/amber.css +28 -53
  38. package/src/palettes/azure.css +31 -0
  39. package/src/palettes/blue.css +28 -53
  40. package/src/palettes/cyan.css +28 -53
  41. package/src/palettes/fuchsia.css +28 -53
  42. package/src/palettes/green.css +28 -53
  43. package/src/palettes/grey.css +28 -53
  44. package/src/palettes/indigo.css +28 -53
  45. package/src/palettes/jade.css +28 -53
  46. package/src/palettes/lime.css +28 -53
  47. package/src/palettes/orange.css +28 -53
  48. package/src/palettes/pink.css +28 -53
  49. package/src/palettes/pumpkin.css +28 -53
  50. package/src/palettes/purple.css +28 -53
  51. package/src/palettes/red.css +28 -53
  52. package/src/palettes/sand.css +28 -53
  53. package/src/palettes/slate.css +28 -53
  54. package/src/palettes/violet.css +28 -53
  55. package/src/palettes/yellow.css +28 -53
  56. package/src/palettes/zinc.css +28 -53
  57. package/src/semantics/attributes/_aria-busy.css +0 -3
  58. package/src/semantics/attributes/_aria-disabled.css +25 -0
  59. package/src/semantics/attributes/_hidden.css +0 -3
  60. package/src/semantics/attributes/_role-group-search.css +11 -14
  61. package/src/semantics/attributes/_role-status-alert.css +123 -0
  62. package/src/semantics/attributes/_role-toolbar.css +2 -5
  63. package/src/semantics/attributes/_role-tooltip.css +7 -10
  64. package/src/semantics/elements/_article.css +0 -3
  65. package/src/semantics/elements/_aside.css +1 -7
  66. package/src/semantics/elements/_blockquote.css +2 -2
  67. package/src/semantics/elements/_body.css +1 -4
  68. package/src/semantics/elements/_button.css +25 -31
  69. package/src/semantics/elements/_code.css +5 -8
  70. package/src/semantics/elements/_del.css +1 -1
  71. package/src/semantics/elements/_details.css +39 -40
  72. package/src/semantics/elements/_dialog.css +19 -43
  73. package/src/semantics/elements/_document.css +10 -4
  74. package/src/semantics/elements/_embedded.css +0 -3
  75. package/src/semantics/elements/_figure.css +0 -3
  76. package/src/semantics/elements/_footer.css +0 -3
  77. package/src/semantics/elements/_header.css +0 -3
  78. package/src/semantics/elements/_headings.css +7 -17
  79. package/src/semantics/elements/_hgroup.css +1 -1
  80. package/src/semantics/elements/_hr.css +1 -4
  81. package/src/semantics/elements/_input.css +33 -36
  82. package/src/semantics/elements/_ins.css +1 -1
  83. package/src/semantics/elements/_links.css +22 -18
  84. package/src/semantics/elements/_main.css +0 -4
  85. package/src/semantics/elements/_mark.css +2 -2
  86. package/src/semantics/elements/_nav.css +5 -8
  87. package/src/semantics/elements/_progress.css +5 -8
  88. package/src/semantics/elements/_section.css +0 -3
  89. package/src/semantics/elements/_small.css +3 -0
  90. package/src/semantics/elements/_table.css +3 -5
  91. package/src/semantics/elements/_type-checkbox-radio.css +19 -22
  92. package/src/semantics/elements/_type-color.css +2 -5
  93. package/src/semantics/elements/_type-date.css +1 -4
  94. package/src/semantics/elements/_type-file.css +7 -10
  95. package/src/semantics/elements/_type-range.css +11 -14
  96. package/src/semantics/elements/_type-search.css +6 -10
  97. package/src/semantics/index.css +2 -5
  98. package/src/semantics/modules.css +3 -7
  99. package/src/sizes/pico.css +20 -33
  100. package/src/utilities/_grid.css +306 -0
  101. package/src/utilities/_variables.css +27 -42
  102. package/src/utilities/borders/_border-radius.css +54 -79
  103. package/src/utilities/borders/_border-style.css +15 -5
  104. package/src/utilities/borders/_border-width.css +0 -28
  105. package/src/utilities/colors/_bg-colors.css +75 -0
  106. package/src/utilities/colors/_border-colors.css +17 -39
  107. package/src/utilities/colors/_subtle-colors.css +145 -0
  108. package/src/utilities/colors/_text-bg-colors.css +62 -0
  109. package/src/utilities/colors/_text-colors.css +32 -409
  110. package/src/utilities/effects/_focus-ring.css +33 -0
  111. package/src/utilities/effects/_shadows.css +0 -33
  112. package/src/utilities/index.css +16 -0
  113. package/src/utilities/layout/_misc.css +2 -5
  114. package/src/utilities/layout/{_grid.css → _ratio.css} +0 -19
  115. package/src/utilities/modules.css +9 -3
  116. package/src/utilities/sizing/_width.css +8 -0
  117. package/src/utilities/spacing/_gap.css +144 -144
  118. package/src/utilities/spacing/_margin.css +324 -324
  119. package/src/utilities/spacing/_padding.css +324 -324
  120. package/src/utilities/typography/_font-sizes.css +6 -6
  121. package/src/variables/_all.css +2 -20
  122. package/src/variables/_elements.css +29 -28
  123. package/src/variables/_theme.css +336 -0
  124. package/src/variants/_variables.css +24 -0
  125. package/src/variants/intent/_contrast.css +47 -0
  126. package/src/variants/intent/_danger.css +39 -0
  127. package/src/variants/intent/_info.css +39 -0
  128. package/src/variants/intent/_primary.css +39 -0
  129. package/src/variants/intent/_secondary.css +39 -0
  130. package/src/variants/intent/_success.css +39 -0
  131. package/src/variants/intent/_warning.css +39 -0
  132. package/src/variants/modifiers/_ghost.css +164 -0
  133. package/src/variants/modifiers/_striped.css +11 -0
  134. package/src/variants/modifiers/_subtle.css +133 -0
  135. package/src/variants/modules.css +11 -14
  136. package/src/_normalize.css +0 -214
  137. package/src/semantics/_misc.css +0 -3
  138. package/src/utilities/colors/_background-colors.css +0 -248
  139. package/src/variables/_colors.css +0 -355
  140. package/src/variables/_components.css +0 -330
  141. package/src/variables/_icons.css +0 -55
  142. package/src/variables/_layout.css +0 -123
  143. package/src/variants/_contained.css +0 -43
  144. package/src/variants/_contrast.css +0 -61
  145. package/src/variants/_ghost.css +0 -68
  146. package/src/variants/_pane-panel-card.css +0 -54
  147. package/src/variants/_secondary.css +0 -48
  148. package/src/variants/_striped.css +0 -10
package/src/utilities/borders/_border-radius.css CHANGED
@@ -1,33 +1,29 @@
1
1
  .rounded {
2
- border-radius: var(--border-radius) !important;
2
+ border-radius: var(--radius) !important;
3
3
  }
4
4
 
5
5
  .rounded-0 {
6
6
  border-radius: 0 !important;
7
7
  }
8
8
 
9
- .rounded-d {
10
- border-radius: var(--border-radius-default) !important;
11
- }
12
-
13
9
  .rounded-1 {
14
- border-radius: var(--border-radius-sm) !important;
10
+ border-radius: var(--border-radius-1) !important;
15
11
  }
16
12
 
17
13
  .rounded-2 {
18
- border-radius: var(--border-radius) !important;
14
+ border-radius: var(--border-radius-2) !important;
19
15
  }
20
16
 
21
17
  .rounded-3 {
22
- border-radius: var(--border-radius-lg) !important;
18
+ border-radius: var(--border-radius-3) !important;
23
19
  }
24
20
 
25
21
  .rounded-4 {
26
- border-radius: var(--border-radius-xl) !important;
22
+ border-radius: var(--border-radius-4) !important;
27
23
  }
28
24
 
29
25
  .rounded-5 {
30
- border-radius: var(--border-radius-xxl) !important;
26
+ border-radius: var(--border-radius-5) !important;
31
27
  }
32
28
 
33
29
  .rounded-circle {
@@ -39,8 +35,8 @@
39
35
  }
40
36
 
41
37
  .rounded-top {
42
- border-top-left-radius: var(--border-radius) !important;
43
- border-top-right-radius: var(--border-radius) !important;
38
+ border-top-left-radius: var(--radius) !important;
39
+ border-top-right-radius: var(--radius) !important;
44
40
  }
45
41
 
46
42
  .rounded-top-0 {
@@ -48,34 +44,29 @@
48
44
  border-top-right-radius: 0 !important;
49
45
  }
50
46
 
51
- .rounded-top-d {
52
- border-top-left-radius: var(--border-radius-default) !important;
53
- border-top-right-radius: var(--border-radius-default) !important;
54
- }
55
-
56
47
  .rounded-top-1 {
57
- border-top-left-radius: var(--border-radius-sm) !important;
58
- border-top-right-radius: var(--border-radius-sm) !important;
48
+ border-top-left-radius: var(--border-radius-1) !important;
49
+ border-top-right-radius: var(--border-radius-1) !important;
59
50
  }
60
51
 
61
52
  .rounded-top-2 {
62
- border-top-left-radius: var(--border-radius) !important;
63
- border-top-right-radius: var(--border-radius) !important;
53
+ border-top-left-radius: var(--border-radius-2) !important;
54
+ border-top-right-radius: var(--border-radius-2) !important;
64
55
  }
65
56
 
66
57
  .rounded-top-3 {
67
- border-top-left-radius: var(--border-radius-lg) !important;
68
- border-top-right-radius: var(--border-radius-lg) !important;
58
+ border-top-left-radius: var(--border-radius-3) !important;
59
+ border-top-right-radius: var(--border-radius-3) !important;
69
60
  }
70
61
 
71
62
  .rounded-top-4 {
72
- border-top-left-radius: var(--border-radius-xl) !important;
73
- border-top-right-radius: var(--border-radius-xl) !important;
63
+ border-top-left-radius: var(--border-radius-4) !important;
64
+ border-top-right-radius: var(--border-radius-4) !important;
74
65
  }
75
66
 
76
67
  .rounded-top-5 {
77
- border-top-left-radius: var(--border-radius-xxl) !important;
78
- border-top-right-radius: var(--border-radius-xxl) !important;
68
+ border-top-left-radius: var(--border-radius-5) !important;
69
+ border-top-right-radius: var(--border-radius-5) !important;
79
70
  }
80
71
 
81
72
  .rounded-top-circle {
@@ -89,8 +80,8 @@
89
80
  }
90
81
 
91
82
  .rounded-end {
92
- border-top-right-radius: var(--border-radius) !important;
93
- border-bottom-right-radius: var(--border-radius) !important;
83
+ border-top-right-radius: var(--radius) !important;
84
+ border-bottom-right-radius: var(--radius) !important;
94
85
  }
95
86
 
96
87
  .rounded-end-0 {
@@ -98,34 +89,29 @@
98
89
  border-bottom-right-radius: 0 !important;
99
90
  }
100
91
 
101
- .rounded-end-d {
102
- border-top-right-radius: var(--border-radius-default) !important;
103
- border-bottom-right-radius: var(--border-radius-default) !important;
104
- }
105
-
106
92
  .rounded-end-1 {
107
- border-top-right-radius: var(--border-radius-sm) !important;
108
- border-bottom-right-radius: var(--border-radius-sm) !important;
93
+ border-top-right-radius: var(--border-radius-1) !important;
94
+ border-bottom-right-radius: var(--border-radius-1) !important;
109
95
  }
110
96
 
111
97
  .rounded-end-2 {
112
- border-top-right-radius: var(--border-radius) !important;
113
- border-bottom-right-radius: var(--border-radius) !important;
98
+ border-top-right-radius: var(--border-radius-2) !important;
99
+ border-bottom-right-radius: var(--border-radius-2) !important;
114
100
  }
115
101
 
116
102
  .rounded-end-3 {
117
- border-top-right-radius: var(--border-radius-lg) !important;
118
- border-bottom-right-radius: var(--border-radius-lg) !important;
103
+ border-top-right-radius: var(--border-radius-3) !important;
104
+ border-bottom-right-radius: var(--border-radius-3) !important;
119
105
  }
120
106
 
121
107
  .rounded-end-4 {
122
- border-top-right-radius: var(--border-radius-xl) !important;
123
- border-bottom-right-radius: var(--border-radius-xl) !important;
108
+ border-top-right-radius: var(--border-radius-4) !important;
109
+ border-bottom-right-radius: var(--border-radius-4) !important;
124
110
  }
125
111
 
126
112
  .rounded-end-5 {
127
- border-top-right-radius: var(--border-radius-xxl) !important;
128
- border-bottom-right-radius: var(--border-radius-xxl) !important;
113
+ border-top-right-radius: var(--border-radius-5) !important;
114
+ border-bottom-right-radius: var(--border-radius-5) !important;
129
115
  }
130
116
 
131
117
  .rounded-end-circle {
@@ -139,8 +125,8 @@
139
125
  }
140
126
 
141
127
  .rounded-bottom {
142
- border-bottom-right-radius: var(--border-radius) !important;
143
- border-bottom-left-radius: var(--border-radius) !important;
128
+ border-bottom-right-radius: var(--radius) !important;
129
+ border-bottom-left-radius: var(--radius) !important;
144
130
  }
145
131
 
146
132
  .rounded-bottom-0 {
@@ -148,34 +134,29 @@
148
134
  border-bottom-left-radius: 0 !important;
149
135
  }
150
136
 
151
- .rounded-bottom-d {
152
- border-bottom-right-radius: var(--border-radius-default) !important;
153
- border-bottom-left-radius: var(--border-radius-default) !important;
154
- }
155
-
156
137
  .rounded-bottom-1 {
157
- border-bottom-right-radius: var(--border-radius-sm) !important;
158
- border-bottom-left-radius: var(--border-radius-sm) !important;
138
+ border-bottom-right-radius: var(--border-radius-1) !important;
139
+ border-bottom-left-radius: var(--border-radius-1) !important;
159
140
  }
160
141
 
161
142
  .rounded-bottom-2 {
162
- border-bottom-right-radius: var(--border-radius) !important;
163
- border-bottom-left-radius: var(--border-radius) !important;
143
+ border-bottom-right-radius: var(--border-radius-2) !important;
144
+ border-bottom-left-radius: var(--border-radius-2) !important;
164
145
  }
165
146
 
166
147
  .rounded-bottom-3 {
167
- border-bottom-right-radius: var(--border-radius-lg) !important;
168
- border-bottom-left-radius: var(--border-radius-lg) !important;
148
+ border-bottom-right-radius: var(--border-radius-3) !important;
149
+ border-bottom-left-radius: var(--border-radius-3) !important;
169
150
  }
170
151
 
171
152
  .rounded-bottom-4 {
172
- border-bottom-right-radius: var(--border-radius-xl) !important;
173
- border-bottom-left-radius: var(--border-radius-xl) !important;
153
+ border-bottom-right-radius: var(--border-radius-4) !important;
154
+ border-bottom-left-radius: var(--border-radius-4) !important;
174
155
  }
175
156
 
176
157
  .rounded-bottom-5 {
177
- border-bottom-right-radius: var(--border-radius-xxl) !important;
178
- border-bottom-left-radius: var(--border-radius-xxl) !important;
158
+ border-bottom-right-radius: var(--border-radius-5) !important;
159
+ border-bottom-left-radius: var(--border-radius-5) !important;
179
160
  }
180
161
 
181
162
  .rounded-bottom-circle {
@@ -189,8 +170,8 @@
189
170
  }
190
171
 
191
172
  .rounded-start {
192
- border-bottom-left-radius: var(--border-radius) !important;
193
- border-top-left-radius: var(--border-radius) !important;
173
+ border-bottom-left-radius: var(--radius) !important;
174
+ border-top-left-radius: var(--radius) !important;
194
175
  }
195
176
 
196
177
  .rounded-start-0 {
@@ -198,34 +179,29 @@
198
179
  border-top-left-radius: 0 !important;
199
180
  }
200
181
 
201
- .rounded-start-d {
202
- border-bottom-left-radius: var(--border-radius-default) !important;
203
- border-top-left-radius: var(--border-radius-default) !important;
204
- }
205
-
206
182
  .rounded-start-1 {
207
- border-bottom-left-radius: var(--border-radius-sm) !important;
208
- border-top-left-radius: var(--border-radius-sm) !important;
183
+ border-bottom-left-radius: var(--border-radius-1) !important;
184
+ border-top-left-radius: var(--border-radius-1) !important;
209
185
  }
210
186
 
211
187
  .rounded-start-2 {
212
- border-bottom-left-radius: var(--border-radius) !important;
213
- border-top-left-radius: var(--border-radius) !important;
188
+ border-bottom-left-radius: var(--border-radius-2) !important;
189
+ border-top-left-radius: var(--border-radius-2) !important;
214
190
  }
215
191
 
216
192
  .rounded-start-3 {
217
- border-bottom-left-radius: var(--border-radius-lg) !important;
218
- border-top-left-radius: var(--border-radius-lg) !important;
193
+ border-bottom-left-radius: var(--border-radius-3) !important;
194
+ border-top-left-radius: var(--border-radius-3) !important;
219
195
  }
220
196
 
221
197
  .rounded-start-4 {
222
- border-bottom-left-radius: var(--border-radius-xl) !important;
223
- border-top-left-radius: var(--border-radius-xl) !important;
198
+ border-bottom-left-radius: var(--border-radius-4) !important;
199
+ border-top-left-radius: var(--border-radius-4) !important;
224
200
  }
225
201
 
226
202
  .rounded-start-5 {
227
- border-bottom-left-radius: var(--border-radius-xxl) !important;
228
- border-top-left-radius: var(--border-radius-xxl) !important;
203
+ border-bottom-left-radius: var(--border-radius-5) !important;
204
+ border-top-left-radius: var(--border-radius-5) !important;
229
205
  }
230
206
 
231
207
  .rounded-start-circle {
@@ -237,4 +213,3 @@
237
213
  border-bottom-left-radius: var(--border-radius-pill) !important;
238
214
  border-top-left-radius: var(--border-radius-pill) !important;
239
215
  }
240
-
package/src/utilities/borders/_border-style.css CHANGED
@@ -1,5 +1,7 @@
1
1
  .border {
2
- border: var(--border-width) var(--border-style) var(--border-color) !important;
2
+ --border-color: oklch(from var(--color-border) l c h / var(--color-border-opacity));
3
+
4
+ border: var(--border-size) var(--border-style) var(--border-color) !important;
3
5
  }
4
6
 
5
7
  .border-0 {
@@ -7,7 +9,9 @@
7
9
  }
8
10
 
9
11
  .border-top {
10
- border-top: var(--border-width) var(--border-style) var(--border-color) !important;
12
+ --border-color: oklch(from var(--color-border) l c h / var(--color-border-opacity));
13
+
14
+ border-top: var(--border-size) var(--border-style) var(--border-color) !important;
11
15
  }
12
16
 
13
17
  .border-top-0 {
@@ -15,7 +19,9 @@
15
19
  }
16
20
 
17
21
  .border-end {
18
- border-right: var(--border-width) var(--border-style) var(--border-color) !important;
22
+ --border-color: oklch(from var(--color-border) l c h / var(--color-border-opacity));
23
+
24
+ border-right: var(--border-size) var(--border-style) var(--border-color) !important;
19
25
  }
20
26
 
21
27
  .border-end-0 {
@@ -23,7 +29,9 @@
23
29
  }
24
30
 
25
31
  .border-bottom {
26
- border-bottom: var(--border-width) var(--border-style) var(--border-color) !important;
32
+ --border-color: oklch(from var(--color-border) l c h / var(--color-border-opacity));
33
+
34
+ border-bottom: var(--border-size) var(--border-style) var(--border-color) !important;
27
35
  }
28
36
 
29
37
  .border-bottom-0 {
@@ -31,7 +39,9 @@
31
39
  }
32
40
 
33
41
  .border-start {
34
- border-left: var(--border-width) var(--border-style) var(--border-color) !important;
42
+ --border-color: oklch(from var(--color-border) l c h / var(--color-border-opacity));
43
+
44
+ border-left: var(--border-size) var(--border-style) var(--border-color) !important;
35
45
  }
36
46
 
37
47
  .border-start-0 {
package/src/utilities/borders/_border-width.css CHANGED
@@ -1,11 +1,3 @@
1
- .border-0 {
2
- border-width: 0 !important;
3
- }
4
-
5
- .border-d {
6
- border-width: var(--border-width-default) !important;
7
- }
8
-
9
1
  .border-1 {
10
2
  border-width: var(--border-width-1) !important;
11
3
  }
@@ -25,23 +17,3 @@
25
17
  .border-5 {
26
18
  border-width: var(--border-width-5) !important;
27
19
  }
28
-
29
- .border-opacity-10 {
30
- --border-opacity: 0.1;
31
- }
32
-
33
- .border-opacity-25 {
34
- --border-opacity: 0.25;
35
- }
36
-
37
- .border-opacity-50 {
38
- --border-opacity: 0.5;
39
- }
40
-
41
- .border-opacity-75 {
42
- --border-opacity: 0.75;
43
- }
44
-
45
- .border-opacity-100 {
46
- --border-opacity: 1;
47
- }
package/src/utilities/colors/_bg-colors.css ADDED
@@ -0,0 +1,75 @@
1
+ .bg-transparent {
2
+ --color-background: transparent;
3
+ }
4
+
5
+ .bg-gradient {
6
+ background-image: var(--gradient) !important;
7
+ }
8
+
9
+ .bg-body {
10
+ --color-background: oklch(from var(--color-background) l c h / var(--color-background-opacity));
11
+
12
+ background-color: var(--color-background) !important;
13
+ }
14
+
15
+ .bg-primary {
16
+ --color-background: oklch(from var(--color-primary-fill) l c h / var(--color-background-opacity));
17
+
18
+ background-color: var(--color-background) !important;
19
+ }
20
+
21
+ .bg-secondary {
22
+ --color-background: oklch(from var(--color-secondary-fill) l c h / var(--color-background-opacity));
23
+
24
+ background-color: var(--color-background) !important;
25
+ }
26
+
27
+ .bg-success {
28
+ --color-background: oklch(from var(--color-success-fill) l c h / var(--color-background-opacity));
29
+
30
+ background-color: var(--color-background) !important;
31
+ }
32
+
33
+ .bg-info {
34
+ --color-background: oklch(from var(--color-info-fill) l c h / var(--color-background-opacity));
35
+
36
+ background-color: var(--color-background) !important;
37
+ }
38
+
39
+ .bg-warning {
40
+ --color-background: oklch(from var(--color-warning-fill) l c h / var(--color-background-opacity));
41
+
42
+ background-color: var(--color-background) !important;
43
+ }
44
+
45
+ .bg-danger {
46
+ --color-background: oklch(from var(--color-danger-fill) l c h / var(--color-background-opacity));
47
+
48
+ background-color: var(--color-background) !important;
49
+ }
50
+
51
+ .bg-contrast {
52
+ --color-background: oklch(from var(--color-contrast-fill) l c h / var(--color-background-opacity));
53
+
54
+ background-color: var(--color-background) !important;
55
+ }
56
+
57
+ .bg-opacity-10 {
58
+ --color-background-opacity: 10%;
59
+ }
60
+
61
+ .bg-opacity-25 {
62
+ --color-background-opacity: 25%;
63
+ }
64
+
65
+ .bg-opacity-50 {
66
+ --color-background-opacity: 50%;
67
+ }
68
+
69
+ .bg-opacity-75 {
70
+ --color-background-opacity: 75%;
71
+ }
72
+
73
+ .bg-opacity-100 {
74
+ --color-background-opacity: 100%;
75
+ }
package/src/utilities/colors/_border-colors.css CHANGED
@@ -1,69 +1,47 @@
1
1
  .border-primary {
2
- --border-opacity: 1;
3
-
4
- border-color: rgba(var(--color-primary-rgb), var(--border-opacity)) !important;
2
+ --color-border: var(--color-primary-fill);
5
3
  }
6
4
 
7
5
  .border-secondary {
8
- --border-opacity: 1;
9
-
10
- border-color: rgba(var(--color-secondary-rgb), var(--border-opacity)) !important;
6
+ --color-border: var(--color-secondary-fill);
11
7
  }
12
8
 
13
9
  .border-success {
14
- --border-opacity: 1;
15
-
16
- border-color: rgba(var(--color-success-rgb), var(--border-opacity)) !important;
10
+ --color-border: var(--color-success-fill);
17
11
  }
18
12
 
19
13
  .border-info {
20
- --border-opacity: 1;
21
-
22
- border-color: rgba(var(--color-info-rgb), var(--border-opacity)) !important;
14
+ --color-border: var(--color-info-fill);
23
15
  }
24
16
 
25
17
  .border-warning {
26
- --border-opacity: 1;
27
-
28
- border-color: rgba(var(--color-warning-rgb), var(--border-opacity)) !important;
18
+ --color-border: var(--color-warning-fill);
29
19
  }
30
20
 
31
21
  .border-danger {
32
- --border-opacity: 1;
33
-
34
- border-color: rgba(var(--color-danger-rgb), var(--border-opacity)) !important;
22
+ --color-border: var(--color-danger-fill);
35
23
  }
36
24
 
37
25
  .border-contrast {
38
- --border-opacity: 1;
39
-
40
- border-color: rgba(var(--color-contrast-rgb), var(--border-opacity)) !important;
41
- }
42
-
43
- .border-primary-subtle {
44
- border-color: var(--color-primary-border-subtle) !important;
45
- }
46
-
47
- .border-secondary-subtle {
48
- border-color: var(--color-secondary-border-subtle) !important;
26
+ --color-border: var(--color-contrast-fill);
49
27
  }
50
28
 
51
- .border-success-subtle {
52
- border-color: var(--color-success-border-subtle) !important;
29
+ .border-opacity-10 {
30
+ --color-border-opacity: 10%;
53
31
  }
54
32
 
55
- .border-info-subtle {
56
- border-color: var(--color-info-border-subtle) !important;
33
+ .border-opacity-25 {
34
+ --color-border-opacity: 25%;
57
35
  }
58
36
 
59
- .border-warning-subtle {
60
- border-color: var(--color-warning-border-subtle) !important;
37
+ .border-opacity-50 {
38
+ --color-border-opacity: 50%;
61
39
  }
62
40
 
63
- .border-danger-subtle {
64
- border-color: var(--color-danger-border-subtle) !important;
41
+ .border-opacity-75 {
42
+ --color-border-opacity: 75%;
65
43
  }
66
44
 
67
- .border-contrast-subtle {
68
- border-color: var(--color-contrast-border-subtle) !important;
45
+ .border-opacity-100 {
46
+ --color-border-opacity: 100%;
69
47
  }
package/src/utilities/colors/_subtle-colors.css ADDED
@@ -0,0 +1,145 @@
1
+ .bg-primary-subtle,
2
+ .text-bg-primary-subtle {
3
+ --color-background: oklch(from var(--color-primary-subtle-fill) l c h / var(--color-background-opacity));
4
+
5
+ background-color: var(--color-background) !important;
6
+ }
7
+
8
+ .bg-secondary-subtle,
9
+ .text-bg-secondary-subtle {
10
+ --color-background: oklch(from var(--color-secondary-subtle-fill) l c h / var(--color-background-opacity));
11
+
12
+ background-color: var(--color-background) !important;
13
+ }
14
+
15
+ .bg-contrast-subtle,
16
+ .text-bg-contrast-subtle {
17
+ --color-background: oklch(from var(--color-contrast-subtle-fill) l c h / var(--color-background-opacity));
18
+
19
+ background-color: var(--color-background) !important;
20
+ }
21
+
22
+ .bg-success-subtle,
23
+ .text-bg-success-subtle {
24
+ --color-background: oklch(from var(--color-success-subtle-fill) l c h / var(--color-background-opacity));
25
+
26
+ background-color: var(--color-background) !important;
27
+ }
28
+
29
+ .bg-info-subtle,
30
+ .text-bg-info-subtle {
31
+ --color-background: oklch(from var(--color-info-subtle-fill) l c h / var(--color-background-opacity));
32
+
33
+ background-color: var(--color-background) !important;
34
+ }
35
+
36
+ .bg-warning-subtle,
37
+ .text-bg-warning-subtle {
38
+ --color-background: oklch(from var(--color-warning-subtle-fill) l c h / var(--color-background-opacity));
39
+
40
+ background-color: var(--color-background) !important;
41
+ }
42
+
43
+ .bg-danger-subtle,
44
+ .text-bg-danger-subtle {
45
+ --color-background: oklch(from var(--color-danger-subtle-fill) l c h / var(--color-background-opacity));
46
+
47
+ background-color: var(--color-background) !important;
48
+ }
49
+
50
+ .text-bg-primary-subtle {
51
+ --color-text: oklch(from var(--color-primary-on-fill) l c h / var(--color-text-opacity));
52
+ --color-text-muted: color-mix(in srgb, var(--color-text), transparent 40%);
53
+
54
+ color: var(--color-text) !important;
55
+ }
56
+
57
+ .text-bg-secondary-subtle {
58
+ --color-text: oklch(from var(--color-secondary-on-fill) l c h / var(--color-text-opacity));
59
+ --color-text-muted: color-mix(in srgb, var(--color-text), transparent 40%);
60
+
61
+ color: var(--color-text) !important;
62
+ }
63
+
64
+ .text-bg-contrast-subtle {
65
+ --color-text: oklch(from var(--color-contrast-on-fill) l c h / var(--color-text-opacity));
66
+ --color-text-muted: color-mix(in srgb, var(--color-text), transparent 40%);
67
+
68
+ color: var(--color-text) !important;
69
+ }
70
+
71
+ .text-bg-success-subtle {
72
+ --color-text: oklch(from var(--color-success-on-fill) l c h / var(--color-text-opacity));
73
+ --color-text-muted: color-mix(in srgb, var(--color-text), transparent 40%);
74
+
75
+ color: var(--color-text) !important;
76
+ }
77
+
78
+ .text-bg-info-subtle {
79
+ --color-text: oklch(from var(--color-info-on-fill) l c h / var(--color-text-opacity));
80
+ --color-text-muted: color-mix(in srgb, var(--color-text), transparent 40%);
81
+
82
+ color: var(--color-text) !important;
83
+ }
84
+
85
+ .text-bg-warning-subtle {
86
+ --color-text: oklch(from var(--color-warning-on-fill) l c h / var(--color-text-opacity));
87
+ --color-text-muted: color-mix(in srgb, var(--color-text), transparent 40%);
88
+
89
+ color: var(--color-text) !important;
90
+ }
91
+
92
+ .text-bg-danger-subtle {
93
+ --color-text: oklch(from var(--color-danger-on-fill) l c h / var(--color-text-opacity));
94
+ --color-text-muted: color-mix(in srgb, var(--color-text), transparent 40%);
95
+
96
+ color: var(--color-text) !important;
97
+ }
98
+
99
+ .border-primary-subtle {
100
+ --border-color: oklch(from var(--color-primary-subtle-fill) l c h / var(--color-border-opacity));
101
+ }
102
+
103
+ .border-secondary-subtle {
104
+ --border-color: oklch(from var(--color-secondary-subtle-fill) l c h / var(--color-border-opacity));
105
+ }
106
+
107
+ .border-contrast-subtle {
108
+ --border-color: oklch(from var(--color-contrast-subtle-fill) l c h / var(--color-border-opacity));
109
+ }
110
+
111
+ .border-success-subtle {
112
+ --border-color: oklch(from var(--color-success-subtle-fill) l c h / var(--color-border-opacity));
113
+ }
114
+
115
+ .border-info-subtle {
116
+ --border-color: oklch(from var(--color-info-subtle-fill) l c h / var(--color-border-opacity));
117
+ }
118
+
119
+ .border-warning-subtle {
120
+ --border-color: oklch(from var(--color-warning-subtle-fill) l c h / var(--color-border-opacity));
121
+ }
122
+
123
+ .border-danger-subtle {
124
+ --border-color: oklch(from var(--color-danger-subtle-fill) l c h / var(--color-border-opacity));
125
+ }
126
+
127
+ .subtle-opacity-10 {
128
+ --subtle-opacity: 10%;
129
+ }
130
+
131
+ .subtle-opacity-25 {
132
+ --subtle-opacity: 25%;
133
+ }
134
+
135
+ .subtle-opacity-50 {
136
+ --subtle-opacity: 50%;
137
+ }
138
+
139
+ .subtle-opacity-75 {
140
+ --subtle-opacity: 75%;
141
+ }
142
+
143
+ .subtle-opacity-100 {
144
+ --subtle-opacity: 100%;
145
+ }