@avento-space/ts-ui 1.2.4 → 1.2.6

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,293 @@
1
+ /* @avento-space/ts-ui — Tailwind v4 theme helper
2
+ This file exposes native Tailwind CSS utility mappings for Avento design
3
+ tokens so they can be used inside `::part()` rules with `@apply`.
4
+ */
5
+
6
+ @layer utilities {
7
+ /* Colour utilities */
8
+ .bg-primary { background-color: var(--u-color-primary); }
9
+ .bg-primary-hover { background-color: var(--u-color-primary-hover); }
10
+ .bg-primary-text { background-color: var(--u-color-primary-text); }
11
+ .bg-danger { background-color: var(--u-color-danger); }
12
+ .bg-danger-hover { background-color: var(--u-color-danger-hover); }
13
+ .bg-success { background-color: var(--u-color-success); }
14
+ .bg-warning { background-color: var(--u-color-warning); }
15
+ .bg-info { background-color: var(--u-color-info); }
16
+ .bg-text { background-color: var(--u-color-text); }
17
+ .bg-text-secondary { background-color: var(--u-color-text-secondary); }
18
+ .bg-text-muted { background-color: var(--u-color-text-muted); }
19
+ .bg-text-disabled { background-color: var(--u-color-text-disabled); }
20
+ .bg-border { background-color: var(--u-color-border); }
21
+ .bg-border-light { background-color: var(--u-color-border-light); }
22
+ .bg-border-lighter { background-color: var(--u-color-border-lighter); }
23
+ .bg-bg { background-color: var(--u-color-bg); }
24
+ .bg-bg-muted { background-color: var(--u-color-bg-muted); }
25
+ .bg-bg-hover { background-color: var(--u-color-bg-hover); }
26
+ .bg-bg-hover-strong { background-color: var(--u-color-bg-hover-strong); }
27
+ .bg-bg-selected { background-color: var(--u-color-bg-selected); }
28
+ .bg-focus { background-color: var(--u-color-focus); }
29
+ .bg-overlay { background-color: var(--u-color-overlay); }
30
+ .bg-white { background-color: var(--u-color-white); }
31
+ .bg-tooltip-bg { background-color: var(--u-color-tooltip-bg); }
32
+ .bg-success-bg { background-color: var(--u-color-success-bg); }
33
+ .bg-success-text { background-color: var(--u-color-success-text); }
34
+ .bg-warning-bg { background-color: var(--u-color-warning-bg); }
35
+ .bg-warning-text { background-color: var(--u-color-warning-text); }
36
+ .bg-danger-bg { background-color: var(--u-color-danger-bg); }
37
+ .bg-danger-text { background-color: var(--u-color-danger-text); }
38
+ .bg-info-bg { background-color: var(--u-color-info-bg); }
39
+ .bg-info-text { background-color: var(--u-color-info-text); }
40
+
41
+ .text-primary { color: var(--u-color-primary); }
42
+ .text-primary-hover { color: var(--u-color-primary-hover); }
43
+ .text-primary-text { color: var(--u-color-primary-text); }
44
+ .text-danger { color: var(--u-color-danger); }
45
+ .text-danger-hover { color: var(--u-color-danger-hover); }
46
+ .text-success { color: var(--u-color-success); }
47
+ .text-warning { color: var(--u-color-warning); }
48
+ .text-info { color: var(--u-color-info); }
49
+ .text-text { color: var(--u-color-text); }
50
+ .text-text-secondary { color: var(--u-color-text-secondary); }
51
+ .text-text-muted { color: var(--u-color-text-muted); }
52
+ .text-text-disabled { color: var(--u-color-text-disabled); }
53
+ .text-border { color: var(--u-color-border); }
54
+ .text-border-light { color: var(--u-color-border-light); }
55
+ .text-border-lighter { color: var(--u-color-border-lighter); }
56
+ .text-bg { color: var(--u-color-bg); }
57
+ .text-bg-muted { color: var(--u-color-bg-muted); }
58
+ .text-bg-hover { color: var(--u-color-bg-hover); }
59
+ .text-bg-hover-strong { color: var(--u-color-bg-hover-strong); }
60
+ .text-bg-selected { color: var(--u-color-bg-selected); }
61
+ .text-focus { color: var(--u-color-focus); }
62
+ .text-overlay { color: var(--u-color-overlay); }
63
+ .text-white { color: var(--u-color-white); }
64
+ .text-tooltip-bg { color: var(--u-color-tooltip-bg); }
65
+ .text-success-bg { color: var(--u-color-success-bg); }
66
+ .text-success-text { color: var(--u-color-success-text); }
67
+ .text-warning-bg { color: var(--u-color-warning-bg); }
68
+ .text-warning-text { color: var(--u-color-warning-text); }
69
+ .text-danger-bg { color: var(--u-color-danger-bg); }
70
+ .text-danger-text { color: var(--u-color-danger-text); }
71
+ .text-info-bg { color: var(--u-color-info-bg); }
72
+ .text-info-text { color: var(--u-color-info-text); }
73
+
74
+ .border-primary { border-color: var(--u-color-primary); }
75
+ .border-primary-hover { border-color: var(--u-color-primary-hover); }
76
+ .border-primary-text { border-color: var(--u-color-primary-text); }
77
+ .border-danger { border-color: var(--u-color-danger); }
78
+ .border-danger-hover { border-color: var(--u-color-danger-hover); }
79
+ .border-success { border-color: var(--u-color-success); }
80
+ .border-warning { border-color: var(--u-color-warning); }
81
+ .border-info { border-color: var(--u-color-info); }
82
+ .border-text { border-color: var(--u-color-text); }
83
+ .border-text-secondary { border-color: var(--u-color-text-secondary); }
84
+ .border-text-muted { border-color: var(--u-color-text-muted); }
85
+ .border-text-disabled { border-color: var(--u-color-text-disabled); }
86
+ .border-border { border-color: var(--u-color-border); }
87
+ .border-border-light { border-color: var(--u-color-border-light); }
88
+ .border-border-lighter { border-color: var(--u-color-border-lighter); }
89
+ .border-bg { border-color: var(--u-color-bg); }
90
+ .border-bg-muted { border-color: var(--u-color-bg-muted); }
91
+ .border-bg-hover { border-color: var(--u-color-bg-hover); }
92
+ .border-bg-hover-strong { border-color: var(--u-color-bg-hover-strong); }
93
+ .border-bg-selected { border-color: var(--u-color-bg-selected); }
94
+ .border-focus { border-color: var(--u-color-focus); }
95
+ .border-overlay { border-color: var(--u-color-overlay); }
96
+ .border-white { border-color: var(--u-color-white); }
97
+ .border-tooltip-bg { border-color: var(--u-color-tooltip-bg); }
98
+ .border-success-bg { border-color: var(--u-color-success-bg); }
99
+ .border-success-text { border-color: var(--u-color-success-text); }
100
+ .border-warning-bg { border-color: var(--u-color-warning-bg); }
101
+ .border-warning-text { border-color: var(--u-color-warning-text); }
102
+ .border-danger-bg { border-color: var(--u-color-danger-bg); }
103
+ .border-danger-text { border-color: var(--u-color-danger-text); }
104
+ .border-info-bg { border-color: var(--u-color-info-bg); }
105
+ .border-info-text { border-color: var(--u-color-info-text); }
106
+
107
+ /* Radius */
108
+ .rounded-xs { border-radius: var(--u-radius-xs); }
109
+ .rounded-sm { border-radius: var(--u-radius-sm); }
110
+ .rounded-md { border-radius: var(--u-radius-md); }
111
+ .rounded-lg { border-radius: var(--u-radius-lg); }
112
+ .rounded-xl { border-radius: var(--u-radius-xl); }
113
+ .rounded-2xl { border-radius: var(--u-radius-2xl); }
114
+ .rounded-full { border-radius: var(--u-radius-full); }
115
+ .rounded-round { border-radius: var(--u-radius-round); }
116
+
117
+ /* Font size */
118
+ .text-tiny { font-size: var(--u-font-tiny); }
119
+ .text-2xs { font-size: var(--u-font-2xs); }
120
+ .text-xs { font-size: var(--u-font-xs); }
121
+ .text-sm { font-size: var(--u-font-sm); }
122
+ .text-md { font-size: var(--u-font-md); }
123
+ .text-lg { font-size: var(--u-font-lg); }
124
+ .text-xl { font-size: var(--u-font-xl); }
125
+ .text-2xl { font-size: var(--u-font-2xl); }
126
+ .text-3xl { font-size: var(--u-font-3xl); }
127
+
128
+ /* Font weight */
129
+ .font-normal { font-weight: var(--u-font-weight-normal); }
130
+ .font-medium { font-weight: var(--u-font-weight-medium); }
131
+ .font-semibold { font-weight: var(--u-font-weight-semibold); }
132
+ .font-bold { font-weight: var(--u-font-weight-bold); }
133
+
134
+ /* Line height */
135
+ .leading-none { line-height: var(--u-line-height-none); }
136
+ .leading-tight { line-height: var(--u-line-height-tight); }
137
+ .leading-sm { line-height: var(--u-line-height-sm); }
138
+ .leading-md { line-height: var(--u-line-height-md); }
139
+ .leading-lg { line-height: var(--u-line-height-lg); }
140
+
141
+ /* Letter spacing */
142
+ .tracking-wide { letter-spacing: var(--u-letter-spacing-wide); }
143
+
144
+ /* Spacing */
145
+ .p-05 { padding: var(--u-spacing-05); }
146
+ .p-1 { padding: var(--u-spacing-1); }
147
+ .p-2 { padding: var(--u-spacing-2); }
148
+ .p-3 { padding: var(--u-spacing-3); }
149
+ .p-4 { padding: var(--u-spacing-4); }
150
+ .p-5 { padding: var(--u-spacing-5); }
151
+ .p-6 { padding: var(--u-spacing-6); }
152
+ .p-8 { padding: var(--u-spacing-8); }
153
+ .px-05 { padding-left: var(--u-spacing-05); padding-right: var(--u-spacing-05); }
154
+ .px-1 { padding-left: var(--u-spacing-1); padding-right: var(--u-spacing-1); }
155
+ .px-2 { padding-left: var(--u-spacing-2); padding-right: var(--u-spacing-2); }
156
+ .px-3 { padding-left: var(--u-spacing-3); padding-right: var(--u-spacing-3); }
157
+ .px-4 { padding-left: var(--u-spacing-4); padding-right: var(--u-spacing-4); }
158
+ .px-5 { padding-left: var(--u-spacing-5); padding-right: var(--u-spacing-5); }
159
+ .px-6 { padding-left: var(--u-spacing-6); padding-right: var(--u-spacing-6); }
160
+ .px-8 { padding-left: var(--u-spacing-8); padding-right: var(--u-spacing-8); }
161
+ .py-05 { padding-top: var(--u-spacing-05); padding-bottom: var(--u-spacing-05); }
162
+ .py-1 { padding-top: var(--u-spacing-1); padding-bottom: var(--u-spacing-1); }
163
+ .py-2 { padding-top: var(--u-spacing-2); padding-bottom: var(--u-spacing-2); }
164
+ .py-3 { padding-top: var(--u-spacing-3); padding-bottom: var(--u-spacing-3); }
165
+ .py-4 { padding-top: var(--u-spacing-4); padding-bottom: var(--u-spacing-4); }
166
+ .py-5 { padding-top: var(--u-spacing-5); padding-bottom: var(--u-spacing-5); }
167
+ .py-6 { padding-top: var(--u-spacing-6); padding-bottom: var(--u-spacing-6); }
168
+ .py-8 { padding-top: var(--u-spacing-8); padding-bottom: var(--u-spacing-8); }
169
+ .pt-05 { padding-top: var(--u-spacing-05); }
170
+ .pt-1 { padding-top: var(--u-spacing-1); }
171
+ .pt-2 { padding-top: var(--u-spacing-2); }
172
+ .pt-3 { padding-top: var(--u-spacing-3); }
173
+ .pt-4 { padding-top: var(--u-spacing-4); }
174
+ .pt-5 { padding-top: var(--u-spacing-5); }
175
+ .pt-6 { padding-top: var(--u-spacing-6); }
176
+ .pt-8 { padding-top: var(--u-spacing-8); }
177
+ .pr-05 { padding-right: var(--u-spacing-05); }
178
+ .pr-1 { padding-right: var(--u-spacing-1); }
179
+ .pr-2 { padding-right: var(--u-spacing-2); }
180
+ .pr-3 { padding-right: var(--u-spacing-3); }
181
+ .pr-4 { padding-right: var(--u-spacing-4); }
182
+ .pr-5 { padding-right: var(--u-spacing-5); }
183
+ .pr-6 { padding-right: var(--u-spacing-6); }
184
+ .pr-8 { padding-right: var(--u-spacing-8); }
185
+ .pb-05 { padding-bottom: var(--u-spacing-05); }
186
+ .pb-1 { padding-bottom: var(--u-spacing-1); }
187
+ .pb-2 { padding-bottom: var(--u-spacing-2); }
188
+ .pb-3 { padding-bottom: var(--u-spacing-3); }
189
+ .pb-4 { padding-bottom: var(--u-spacing-4); }
190
+ .pb-5 { padding-bottom: var(--u-spacing-5); }
191
+ .pb-6 { padding-bottom: var(--u-spacing-6); }
192
+ .pb-8 { padding-bottom: var(--u-spacing-8); }
193
+ .pl-05 { padding-left: var(--u-spacing-05); }
194
+ .pl-1 { padding-left: var(--u-spacing-1); }
195
+ .pl-2 { padding-left: var(--u-spacing-2); }
196
+ .pl-3 { padding-left: var(--u-spacing-3); }
197
+ .pl-4 { padding-left: var(--u-spacing-4); }
198
+ .pl-5 { padding-left: var(--u-spacing-5); }
199
+ .pl-6 { padding-left: var(--u-spacing-6); }
200
+ .pl-8 { padding-left: var(--u-spacing-8); }
201
+
202
+ .m-05 { margin: var(--u-spacing-05); }
203
+ .m-1 { margin: var(--u-spacing-1); }
204
+ .m-2 { margin: var(--u-spacing-2); }
205
+ .m-3 { margin: var(--u-spacing-3); }
206
+ .m-4 { margin: var(--u-spacing-4); }
207
+ .m-5 { margin: var(--u-spacing-5); }
208
+ .m-6 { margin: var(--u-spacing-6); }
209
+ .m-8 { margin: var(--u-spacing-8); }
210
+ .mx-05 { margin-left: var(--u-spacing-05); margin-right: var(--u-spacing-05); }
211
+ .mx-1 { margin-left: var(--u-spacing-1); margin-right: var(--u-spacing-1); }
212
+ .mx-2 { margin-left: var(--u-spacing-2); margin-right: var(--u-spacing-2); }
213
+ .mx-3 { margin-left: var(--u-spacing-3); margin-right: var(--u-spacing-3); }
214
+ .mx-4 { margin-left: var(--u-spacing-4); margin-right: var(--u-spacing-4); }
215
+ .mx-5 { margin-left: var(--u-spacing-5); margin-right: var(--u-spacing-5); }
216
+ .mx-6 { margin-left: var(--u-spacing-6); margin-right: var(--u-spacing-6); }
217
+ .mx-8 { margin-left: var(--u-spacing-8); margin-right: var(--u-spacing-8); }
218
+ .my-05 { margin-top: var(--u-spacing-05); margin-bottom: var(--u-spacing-05); }
219
+ .my-1 { margin-top: var(--u-spacing-1); margin-bottom: var(--u-spacing-1); }
220
+ .my-2 { margin-top: var(--u-spacing-2); margin-bottom: var(--u-spacing-2); }
221
+ .my-3 { margin-top: var(--u-spacing-3); margin-bottom: var(--u-spacing-3); }
222
+ .my-4 { margin-top: var(--u-spacing-4); margin-bottom: var(--u-spacing-4); }
223
+ .my-5 { margin-top: var(--u-spacing-5); margin-bottom: var(--u-spacing-5); }
224
+ .my-6 { margin-top: var(--u-spacing-6); margin-bottom: var(--u-spacing-6); }
225
+ .my-8 { margin-top: var(--u-spacing-8); margin-bottom: var(--u-spacing-8); }
226
+ .mt-05 { margin-top: var(--u-spacing-05); }
227
+ .mt-1 { margin-top: var(--u-spacing-1); }
228
+ .mt-2 { margin-top: var(--u-spacing-2); }
229
+ .mt-3 { margin-top: var(--u-spacing-3); }
230
+ .mt-4 { margin-top: var(--u-spacing-4); }
231
+ .mt-5 { margin-top: var(--u-spacing-5); }
232
+ .mt-6 { margin-top: var(--u-spacing-6); }
233
+ .mt-8 { margin-top: var(--u-spacing-8); }
234
+ .mr-05 { margin-right: var(--u-spacing-05); }
235
+ .mr-1 { margin-right: var(--u-spacing-1); }
236
+ .mr-2 { margin-right: var(--u-spacing-2); }
237
+ .mr-3 { margin-right: var(--u-spacing-3); }
238
+ .mr-4 { margin-right: var(--u-spacing-4); }
239
+ .mr-5 { margin-right: var(--u-spacing-5); }
240
+ .mr-6 { margin-right: var(--u-spacing-6); }
241
+ .mr-8 { margin-right: var(--u-spacing-8); }
242
+ .mb-05 { margin-bottom: var(--u-spacing-05); }
243
+ .mb-1 { margin-bottom: var(--u-spacing-1); }
244
+ .mb-2 { margin-bottom: var(--u-spacing-2); }
245
+ .mb-3 { margin-bottom: var(--u-spacing-3); }
246
+ .mb-4 { margin-bottom: var(--u-spacing-4); }
247
+ .mb-5 { margin-bottom: var(--u-spacing-5); }
248
+ .mb-6 { margin-bottom: var(--u-spacing-6); }
249
+ .mb-8 { margin-bottom: var(--u-spacing-8); }
250
+ .ml-05 { margin-left: var(--u-spacing-05); }
251
+ .ml-1 { margin-left: var(--u-spacing-1); }
252
+ .ml-2 { margin-left: var(--u-spacing-2); }
253
+ .ml-3 { margin-left: var(--u-spacing-3); }
254
+ .ml-4 { margin-left: var(--u-spacing-4); }
255
+ .ml-5 { margin-left: var(--u-spacing-5); }
256
+ .ml-6 { margin-left: var(--u-spacing-6); }
257
+ .ml-8 { margin-left: var(--u-spacing-8); }
258
+
259
+ /* Shadows */
260
+ .shadow-sm { box-shadow: var(--u-shadow-sm); }
261
+ .shadow-md { box-shadow: var(--u-shadow-md); }
262
+ .shadow-lg { box-shadow: var(--u-shadow-lg); }
263
+ .shadow-xl { box-shadow: var(--u-shadow-xl); }
264
+ .shadow-focus { box-shadow: var(--u-shadow-focus); }
265
+ .shadow-tooltip { box-shadow: var(--u-shadow-tooltip); }
266
+ .shadow-drawer { box-shadow: var(--u-shadow-drawer); }
267
+ .shadow-thumb { box-shadow: var(--u-shadow-thumb); }
268
+ .shadow-combobox { box-shadow: var(--u-shadow-combobox); }
269
+ .shadow-calendar { box-shadow: var(--u-shadow-calendar); }
270
+ .shadow-command-palette { box-shadow: var(--u-shadow-command-palette); }
271
+
272
+ /* z-index */
273
+ .z-backdrop { z-index: var(--u-z-backdrop); }
274
+ .z-modal { z-index: var(--u-z-modal); }
275
+ .z-command-palette { z-index: var(--u-z-command-palette); }
276
+ .z-dropdown { z-index: var(--u-z-dropdown); }
277
+ .z-drag { z-index: var(--u-z-drag); }
278
+ .z-toast { z-index: var(--u-z-toast); }
279
+
280
+ /* Opacity */
281
+ .opacity-disabled { opacity: var(--u-opacity-disabled); }
282
+ .opacity-muted { opacity: var(--u-opacity-muted); }
283
+ .opacity-fade { opacity: var(--u-opacity-fade); }
284
+
285
+ /* Transition duration */
286
+ .duration-fast { transition-duration: var(--u-transition-fast); }
287
+ .duration-base { transition-duration: var(--u-transition-base); }
288
+ .duration-slow { transition-duration: var(--u-transition-slow); }
289
+ .duration-slower { transition-duration: var(--u-transition-slower); }
290
+
291
+ /* Backdrop blur */
292
+ .backdrop-blur { backdrop-filter: blur(var(--u-blur)); }
293
+ }