ics-ui-kit 1.0.0-alpha.2 → 1.0.0-alpha.4
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/shadcn-tailwind.css +629 -0
- package/dist/tailwind.css +407 -406
- package/package.json +5 -3
package/dist/tailwind.css
CHANGED
|
@@ -1,406 +1,407 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Публичная точка входа ICS UI Kit для Tailwind 4.
|
|
3
|
-
*
|
|
4
|
-
* Заменяет собой tailwind.preset.js: токены дизайн-системы объявлены через
|
|
5
|
-
* @theme, а не через JS-конфиг. Подключение у потребителя:
|
|
6
|
-
*
|
|
7
|
-
* @import "tailwindcss";
|
|
8
|
-
* @import "ics-ui-kit/tailwind.css";
|
|
9
|
-
* @source "../node_modules/ics-ui-kit/dist";
|
|
10
|
-
*
|
|
11
|
-
* Файл везёт токены, варианты, утилиты И базовый слой. Последний не
|
|
12
|
-
* украшение: в v4 border-* без явного цвета раскрывается в currentColor,
|
|
13
|
-
* поэтому без правила * { border-color } рамки компонентов окрасились бы
|
|
14
|
-
* в цвет текста. Переопределяется своим @layer base после импорта.
|
|
15
|
-
*
|
|
16
|
-
* @theme inline — не то же самое, что @theme. Значения токенов ссылаются на
|
|
17
|
-
* CSS-переменные темы (--primary-accent и т.п.), которые переопределяются
|
|
18
|
-
* в .dark. Без inline утилита получает var(--color-primary-accent), а это
|
|
19
|
-
* значение вычисляется один раз на :root — и застывает. Пока .dark висит на
|
|
20
|
-
* <html>, разницы не видно, но вложенный тёмный остров внутри светлой
|
|
21
|
-
* страницы сломается. С inline утилита несёт hsl(var(--primary-accent))
|
|
22
|
-
* и пересчитывается на любом элементе.
|
|
23
|
-
*
|
|
24
|
-
* По той же причине в базовом слое ниже используется @apply, а не
|
|
25
|
-
* var(--color-*): прямое обращение к переменной застыло бы на :root.
|
|
26
|
-
*/
|
|
27
|
-
|
|
28
|
-
@import "tw-animate-css";
|
|
29
|
-
@import "./
|
|
30
|
-
@import "./
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
--color-
|
|
44
|
-
--color-
|
|
45
|
-
--color-card
|
|
46
|
-
--color-
|
|
47
|
-
--color-popover
|
|
48
|
-
--color-
|
|
49
|
-
--color-muted
|
|
50
|
-
--color-
|
|
51
|
-
--color-accent
|
|
52
|
-
--color-
|
|
53
|
-
--color-destructive
|
|
54
|
-
--color-
|
|
55
|
-
--color-
|
|
56
|
-
--color-
|
|
57
|
-
--color-
|
|
58
|
-
--color-chart-
|
|
59
|
-
--color-chart-
|
|
60
|
-
--color-chart-
|
|
61
|
-
--color-chart-
|
|
62
|
-
--color-
|
|
63
|
-
--color-
|
|
64
|
-
--color-primary
|
|
65
|
-
--color-primary-accent
|
|
66
|
-
--color-primary-
|
|
67
|
-
--color-primary-
|
|
68
|
-
--color-primary-
|
|
69
|
-
--color-primary-
|
|
70
|
-
--color-primary-hover: hsl(var(--primary-hover));
|
|
71
|
-
--color-primary-
|
|
72
|
-
--color-
|
|
73
|
-
--color-secondary
|
|
74
|
-
--color-secondary-
|
|
75
|
-
--color-secondary-
|
|
76
|
-
--color-secondary-
|
|
77
|
-
--color-secondary-
|
|
78
|
-
--color-secondary-
|
|
79
|
-
--color-
|
|
80
|
-
--color-
|
|
81
|
-
--color-inverse-
|
|
82
|
-
--color-inverse-
|
|
83
|
-
--color-inverse-
|
|
84
|
-
--color-inverse-
|
|
85
|
-
--color-inverse-
|
|
86
|
-
--color-inverse-
|
|
87
|
-
--color-inverse-
|
|
88
|
-
--color-
|
|
89
|
-
--color-status-neutral
|
|
90
|
-
--color-status-neutral-
|
|
91
|
-
--color-status-neutral-
|
|
92
|
-
--color-status-neutral-
|
|
93
|
-
--color-status-neutral-bg
|
|
94
|
-
--color-status-neutral-
|
|
95
|
-
--color-status-
|
|
96
|
-
--color-status-info
|
|
97
|
-
--color-status-info-
|
|
98
|
-
--color-status-info-
|
|
99
|
-
--color-status-info-bg
|
|
100
|
-
--color-status-info-
|
|
101
|
-
--color-status-info-
|
|
102
|
-
--color-status-info-
|
|
103
|
-
--color-status-
|
|
104
|
-
--color-status-success
|
|
105
|
-
--color-status-success-
|
|
106
|
-
--color-status-success-
|
|
107
|
-
--color-status-success-bg
|
|
108
|
-
--color-status-success-
|
|
109
|
-
--color-status-success-
|
|
110
|
-
--color-status-success-
|
|
111
|
-
--color-status-
|
|
112
|
-
--color-status-warning
|
|
113
|
-
--color-status-warning-
|
|
114
|
-
--color-status-warning-
|
|
115
|
-
--color-status-warning-bg
|
|
116
|
-
--color-status-warning-
|
|
117
|
-
--color-status-warning-
|
|
118
|
-
--color-status-warning-
|
|
119
|
-
--color-status-
|
|
120
|
-
--color-status-error
|
|
121
|
-
--color-status-error-
|
|
122
|
-
--color-status-error-
|
|
123
|
-
--color-status-error-bg
|
|
124
|
-
--color-status-error-
|
|
125
|
-
--color-status-error-
|
|
126
|
-
--color-status-error-
|
|
127
|
-
--color-
|
|
128
|
-
--color-alpha-
|
|
129
|
-
--color-alpha-
|
|
130
|
-
--color-alpha-
|
|
131
|
-
--color-alpha-
|
|
132
|
-
--color-alpha-
|
|
133
|
-
--color-alpha-
|
|
134
|
-
--color-alpha-
|
|
135
|
-
--color-alpha-
|
|
136
|
-
--color-alpha-
|
|
137
|
-
--color-alpha-high-
|
|
138
|
-
--color-alpha-high-
|
|
139
|
-
--color-alpha-high-
|
|
140
|
-
--color-alpha-high-
|
|
141
|
-
--color-alpha-high-
|
|
142
|
-
--color-alpha-high-
|
|
143
|
-
--color-alpha-high-
|
|
144
|
-
--color-alpha-high-
|
|
145
|
-
--color-alpha-
|
|
146
|
-
--color-alpha-
|
|
147
|
-
--color-alpha-
|
|
148
|
-
--color-alpha-accent-
|
|
149
|
-
--color-alpha-accent-
|
|
150
|
-
--color-alpha-accent-high-
|
|
151
|
-
--color-
|
|
152
|
-
--color-
|
|
153
|
-
--color-palette-
|
|
154
|
-
--color-palette-
|
|
155
|
-
--color-palette-
|
|
156
|
-
--color-palette-
|
|
157
|
-
--color-palette-
|
|
158
|
-
--color-palette-
|
|
159
|
-
--color-palette-
|
|
160
|
-
--color-palette-
|
|
161
|
-
--color-palette-
|
|
162
|
-
--color-palette-
|
|
163
|
-
--color-palette-
|
|
164
|
-
--color-palette-
|
|
165
|
-
--color-palette-
|
|
166
|
-
--color-palette-
|
|
167
|
-
--color-palette-
|
|
168
|
-
--color-palette-
|
|
169
|
-
--color-palette-
|
|
170
|
-
--color-palette-
|
|
171
|
-
--color-palette-
|
|
172
|
-
--color-palette-
|
|
173
|
-
--color-palette-
|
|
174
|
-
--color-palette-
|
|
175
|
-
--color-palette-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
--radius-
|
|
180
|
-
--radius-
|
|
181
|
-
--radius-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
--shadow-soft-
|
|
186
|
-
--shadow-soft-
|
|
187
|
-
--shadow-soft-
|
|
188
|
-
--shadow-soft-
|
|
189
|
-
--shadow-soft-
|
|
190
|
-
--shadow-
|
|
191
|
-
--shadow-
|
|
192
|
-
--shadow-focus
|
|
193
|
-
--shadow-
|
|
194
|
-
--shadow-hard-
|
|
195
|
-
--shadow-hard-
|
|
196
|
-
--shadow-hard-
|
|
197
|
-
--shadow-hard-
|
|
198
|
-
--shadow-hard-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
--leading-
|
|
203
|
-
--leading-
|
|
204
|
-
--leading-
|
|
205
|
-
--leading-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
--text-2xs
|
|
210
|
-
--text-
|
|
211
|
-
--text-base
|
|
212
|
-
--text-
|
|
213
|
-
--text-lg
|
|
214
|
-
--text-
|
|
215
|
-
--text-4xl
|
|
216
|
-
--text-4xl--
|
|
217
|
-
--text-
|
|
218
|
-
--text-5xl
|
|
219
|
-
--text-5xl--
|
|
220
|
-
--text-
|
|
221
|
-
--text-6xl
|
|
222
|
-
--text-6xl--
|
|
223
|
-
--text-
|
|
224
|
-
--text-7xl
|
|
225
|
-
--text-7xl--
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
--font-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
--animate-
|
|
234
|
-
--animate-collapsible-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
}
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
}
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
}
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
*
|
|
279
|
-
*
|
|
280
|
-
*
|
|
281
|
-
*
|
|
282
|
-
*
|
|
283
|
-
*
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
--tw-prose-
|
|
288
|
-
--tw-prose-
|
|
289
|
-
--tw-prose-
|
|
290
|
-
--tw-prose-
|
|
291
|
-
--tw-prose-
|
|
292
|
-
--tw-prose-
|
|
293
|
-
--tw-prose-
|
|
294
|
-
--tw-prose-
|
|
295
|
-
--tw-prose-
|
|
296
|
-
--tw-prose-
|
|
297
|
-
--tw-prose-
|
|
298
|
-
--tw-prose-
|
|
299
|
-
--tw-prose-pre-
|
|
300
|
-
--tw-prose-
|
|
301
|
-
--tw-prose-
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
|
|
310
|
-
|
|
311
|
-
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
|
|
318
|
-
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
|
|
324
|
-
margin-
|
|
325
|
-
|
|
326
|
-
|
|
327
|
-
|
|
328
|
-
margin-
|
|
329
|
-
|
|
330
|
-
|
|
331
|
-
|
|
332
|
-
|
|
333
|
-
|
|
334
|
-
|
|
335
|
-
|
|
336
|
-
|
|
337
|
-
|
|
338
|
-
|
|
339
|
-
|
|
340
|
-
|
|
341
|
-
|
|
342
|
-
|
|
343
|
-
|
|
344
|
-
|
|
345
|
-
|
|
346
|
-
|
|
347
|
-
|
|
348
|
-
|
|
349
|
-
|
|
350
|
-
|
|
351
|
-
|
|
352
|
-
margin-
|
|
353
|
-
|
|
354
|
-
border:
|
|
355
|
-
|
|
356
|
-
|
|
357
|
-
|
|
358
|
-
|
|
359
|
-
|
|
360
|
-
|
|
361
|
-
|
|
362
|
-
|
|
363
|
-
|
|
364
|
-
|
|
365
|
-
|
|
366
|
-
|
|
367
|
-
}
|
|
368
|
-
|
|
369
|
-
|
|
370
|
-
|
|
371
|
-
|
|
372
|
-
|
|
373
|
-
|
|
374
|
-
|
|
375
|
-
|
|
376
|
-
|
|
377
|
-
|
|
378
|
-
|
|
379
|
-
|
|
380
|
-
|
|
381
|
-
|
|
382
|
-
|
|
383
|
-
|
|
384
|
-
|
|
385
|
-
scrollbar-
|
|
386
|
-
|
|
387
|
-
|
|
388
|
-
|
|
389
|
-
|
|
390
|
-
|
|
391
|
-
|
|
392
|
-
|
|
393
|
-
|
|
394
|
-
|
|
395
|
-
|
|
396
|
-
|
|
397
|
-
|
|
398
|
-
|
|
399
|
-
|
|
400
|
-
|
|
401
|
-
}
|
|
402
|
-
|
|
403
|
-
|
|
404
|
-
|
|
405
|
-
text-
|
|
406
|
-
|
|
1
|
+
/**
|
|
2
|
+
* Публичная точка входа ICS UI Kit для Tailwind 4.
|
|
3
|
+
*
|
|
4
|
+
* Заменяет собой tailwind.preset.js: токены дизайн-системы объявлены через
|
|
5
|
+
* @theme, а не через JS-конфиг. Подключение у потребителя:
|
|
6
|
+
*
|
|
7
|
+
* @import "tailwindcss";
|
|
8
|
+
* @import "ics-ui-kit/tailwind.css";
|
|
9
|
+
* @source "../node_modules/ics-ui-kit/dist";
|
|
10
|
+
*
|
|
11
|
+
* Файл везёт токены, варианты, утилиты И базовый слой. Последний не
|
|
12
|
+
* украшение: в v4 border-* без явного цвета раскрывается в currentColor,
|
|
13
|
+
* поэтому без правила * { border-color } рамки компонентов окрасились бы
|
|
14
|
+
* в цвет текста. Переопределяется своим @layer base после импорта.
|
|
15
|
+
*
|
|
16
|
+
* @theme inline — не то же самое, что @theme. Значения токенов ссылаются на
|
|
17
|
+
* CSS-переменные темы (--primary-accent и т.п.), которые переопределяются
|
|
18
|
+
* в .dark. Без inline утилита получает var(--color-primary-accent), а это
|
|
19
|
+
* значение вычисляется один раз на :root — и застывает. Пока .dark висит на
|
|
20
|
+
* <html>, разницы не видно, но вложенный тёмный остров внутри светлой
|
|
21
|
+
* страницы сломается. С inline утилита несёт hsl(var(--primary-accent))
|
|
22
|
+
* и пересчитывается на любом элементе.
|
|
23
|
+
*
|
|
24
|
+
* По той же причине в базовом слое ниже используется @apply, а не
|
|
25
|
+
* var(--color-*): прямое обращение к переменной застыло бы на :root.
|
|
26
|
+
*/
|
|
27
|
+
|
|
28
|
+
@import "tw-animate-css";
|
|
29
|
+
@import "./shadcn-tailwind.css";
|
|
30
|
+
@import "./theme.css";
|
|
31
|
+
@import "./font-smoothing.css";
|
|
32
|
+
|
|
33
|
+
@plugin "@tailwindcss/typography";
|
|
34
|
+
|
|
35
|
+
/* darkMode: ["class"] из пресета */
|
|
36
|
+
@custom-variant dark (&:where(.dark, .dark *));
|
|
37
|
+
|
|
38
|
+
/* screens.touch: { raw: "(pointer: coarse)" } из пресета */
|
|
39
|
+
@custom-variant touch (@media (pointer: coarse));
|
|
40
|
+
|
|
41
|
+
@theme inline {
|
|
42
|
+
/* Цвета */
|
|
43
|
+
--color-background: hsl(var(--background));
|
|
44
|
+
--color-foreground: hsl(var(--foreground));
|
|
45
|
+
--color-card: hsl(var(--card));
|
|
46
|
+
--color-card-foreground: hsl(var(--card-foreground));
|
|
47
|
+
--color-popover: hsl(var(--popover));
|
|
48
|
+
--color-popover-foreground: hsl(var(--popover-foreground));
|
|
49
|
+
--color-muted: hsl(var(--muted));
|
|
50
|
+
--color-muted-foreground: hsl(var(--muted-foreground));
|
|
51
|
+
--color-accent: hsl(var(--accent));
|
|
52
|
+
--color-accent-foreground: hsl(var(--accent-foreground));
|
|
53
|
+
--color-destructive: hsl(var(--destructive));
|
|
54
|
+
--color-destructive-foreground: hsl(var(--destructive-foreground));
|
|
55
|
+
--color-border: hsl(var(--border));
|
|
56
|
+
--color-input: hsl(var(--input));
|
|
57
|
+
--color-ring: hsl(var(--ring));
|
|
58
|
+
--color-chart-1: hsl(var(--chart-1));
|
|
59
|
+
--color-chart-2: hsl(var(--chart-2));
|
|
60
|
+
--color-chart-3: hsl(var(--chart-3));
|
|
61
|
+
--color-chart-4: hsl(var(--chart-4));
|
|
62
|
+
--color-chart-5: hsl(var(--chart-5));
|
|
63
|
+
--color-sidebar-bg: hsl(var(--sidebar-bg));
|
|
64
|
+
--color-primary: hsl(var(--primary));
|
|
65
|
+
--color-primary-accent: hsl(var(--primary-accent));
|
|
66
|
+
--color-primary-accent-hover: hsl(var(--primary-accent-hover));
|
|
67
|
+
--color-primary-fg: hsl(var(--primary-fg));
|
|
68
|
+
--color-primary-bg: hsl(var(--primary-bg));
|
|
69
|
+
--color-primary-border: hsl(var(--primary-border));
|
|
70
|
+
--color-primary-bg-hover: hsl(var(--primary-bg-hover));
|
|
71
|
+
--color-primary-hover: hsl(var(--primary-hover));
|
|
72
|
+
--color-primary-foreground: hsl(var(--primary-foreground));
|
|
73
|
+
--color-secondary: hsl(var(--secondary));
|
|
74
|
+
--color-secondary-accent: hsl(var(--secondary-accent));
|
|
75
|
+
--color-secondary-fg: hsl(var(--secondary-fg));
|
|
76
|
+
--color-secondary-bg: hsl(var(--secondary-bg));
|
|
77
|
+
--color-secondary-border: hsl(var(--secondary-border));
|
|
78
|
+
--color-secondary-bg-hover: hsl(var(--secondary-bg-hover));
|
|
79
|
+
--color-secondary-foreground: hsl(var(--secondary-foreground));
|
|
80
|
+
--color-tertiary-accent: hsl(var(--tertiary-accent));
|
|
81
|
+
--color-inverse-primary-bg: hsl(var(--inverse-primary-bg));
|
|
82
|
+
--color-inverse-secondary-bg: hsl(var(--inverse-secondary-bg));
|
|
83
|
+
--color-inverse-hover: hsl(var(--inverse-hover));
|
|
84
|
+
--color-inverse-active: hsl(var(--inverse-active));
|
|
85
|
+
--color-inverse-border: hsl(var(--inverse-border));
|
|
86
|
+
--color-inverse-muted: hsl(var(--inverse-muted));
|
|
87
|
+
--color-inverse-secondary-fg: hsl(var(--inverse-secondary-fg));
|
|
88
|
+
--color-inverse-primary-fg: hsl(var(--inverse-primary-fg));
|
|
89
|
+
--color-status-neutral: hsl(var(--status-default));
|
|
90
|
+
--color-status-neutral-hover: hsl(var(--status-default-hover));
|
|
91
|
+
--color-status-neutral-border: hsl(var(--status-default-border));
|
|
92
|
+
--color-status-neutral-muted: hsl(var(--status-default-muted));
|
|
93
|
+
--color-status-neutral-bg: hsl(var(--status-default-bg));
|
|
94
|
+
--color-status-neutral-bg-hover: hsl(var(--status-default-bg-hover));
|
|
95
|
+
--color-status-neutral-fg: hsl(var(--status-default-fg));
|
|
96
|
+
--color-status-info: hsl(var(--status-info));
|
|
97
|
+
--color-status-info-fg: hsl(var(--status-info-fg));
|
|
98
|
+
--color-status-info-bg: hsl(var(--status-info-bg));
|
|
99
|
+
--color-status-info-primary-bg: hsl(var(--status-info-primary-bg));
|
|
100
|
+
--color-status-info-bg-hover: hsl(var(--status-info-bg-hover));
|
|
101
|
+
--color-status-info-primary-border: hsl(var(--status-info-primary-border));
|
|
102
|
+
--color-status-info-secondary-border: hsl(var(--status-info-secondary-border));
|
|
103
|
+
--color-status-info-hover: hsl(var(--status-info-hover));
|
|
104
|
+
--color-status-success: hsl(var(--status-success));
|
|
105
|
+
--color-status-success-fg: hsl(var(--status-success-fg));
|
|
106
|
+
--color-status-success-bg: hsl(var(--status-success-bg));
|
|
107
|
+
--color-status-success-primary-bg: hsl(var(--status-success-primary-bg));
|
|
108
|
+
--color-status-success-bg-hover: hsl(var(--status-success-bg-hover));
|
|
109
|
+
--color-status-success-primary-border: hsl(var(--status-success-primary-border));
|
|
110
|
+
--color-status-success-secondary-border: hsl(var(--status-success-secondary-border));
|
|
111
|
+
--color-status-success-hover: hsl(var(--status-success-hover));
|
|
112
|
+
--color-status-warning: hsl(var(--status-warning));
|
|
113
|
+
--color-status-warning-fg: hsl(var(--status-warning-fg));
|
|
114
|
+
--color-status-warning-bg: hsl(var(--status-warning-bg));
|
|
115
|
+
--color-status-warning-primary-bg: hsl(var(--status-warning-primary-bg));
|
|
116
|
+
--color-status-warning-bg-hover: hsl(var(--status-warning-bg-hover));
|
|
117
|
+
--color-status-warning-primary-border: hsl(var(--status-warning-primary-border));
|
|
118
|
+
--color-status-warning-secondary-border: hsl(var(--status-warning-secondary-border));
|
|
119
|
+
--color-status-warning-hover: hsl(var(--status-warning-hover));
|
|
120
|
+
--color-status-error: hsl(var(--status-error));
|
|
121
|
+
--color-status-error-fg: hsl(var(--status-error-fg));
|
|
122
|
+
--color-status-error-bg: hsl(var(--status-error-bg));
|
|
123
|
+
--color-status-error-primary-bg: hsl(var(--status-error-primary-bg));
|
|
124
|
+
--color-status-error-bg-hover: hsl(var(--status-error-bg-hover));
|
|
125
|
+
--color-status-error-primary-border: hsl(var(--status-error-primary-border));
|
|
126
|
+
--color-status-error-secondary-border: hsl(var(--status-error-secondary-border));
|
|
127
|
+
--color-status-error-hover: hsl(var(--status-error-hover));
|
|
128
|
+
--color-alpha-10: hsl(var(--alpha-90));
|
|
129
|
+
--color-alpha-20: hsl(var(--alpha-80));
|
|
130
|
+
--color-alpha-30: hsl(var(--alpha-70));
|
|
131
|
+
--color-alpha-40: hsl(var(--alpha-60));
|
|
132
|
+
--color-alpha-50: hsl(var(--alpha-50));
|
|
133
|
+
--color-alpha-60: hsl(var(--alpha-40));
|
|
134
|
+
--color-alpha-70: hsl(var(--alpha-30));
|
|
135
|
+
--color-alpha-80: hsl(var(--alpha-20));
|
|
136
|
+
--color-alpha-90: hsl(var(--alpha-10));
|
|
137
|
+
--color-alpha-high-10: hsl(var(--alpha-high-90));
|
|
138
|
+
--color-alpha-high-20: hsl(var(--alpha-high-80));
|
|
139
|
+
--color-alpha-high-30: hsl(var(--alpha-high-70));
|
|
140
|
+
--color-alpha-high-40: hsl(var(--alpha-high-60));
|
|
141
|
+
--color-alpha-high-50: hsl(var(--alpha-high-50));
|
|
142
|
+
--color-alpha-high-60: hsl(var(--alpha-high-40));
|
|
143
|
+
--color-alpha-high-70: hsl(var(--alpha-high-30));
|
|
144
|
+
--color-alpha-high-80: hsl(var(--alpha-high-20));
|
|
145
|
+
--color-alpha-high-90: hsl(var(--alpha-high-10));
|
|
146
|
+
--color-alpha-hover: hsl(var(--alpha-hover));
|
|
147
|
+
--color-alpha-high-hover: hsl(var(--alpha-high-hover));
|
|
148
|
+
--color-alpha-accent-primary: hsl(var(--alpha-accent-primary));
|
|
149
|
+
--color-alpha-accent-secondary: hsl(var(--alpha-accent-secondary));
|
|
150
|
+
--color-alpha-accent-high-primary: hsl(var(--alpha-accent-high-primary));
|
|
151
|
+
--color-alpha-accent-high-secondary: hsl(var(--alpha-accent-high-secondary));
|
|
152
|
+
--color-shadow-scroll: hsl(222, 47%, 11%);
|
|
153
|
+
--color-palette-peony: hsl(var(--peony));
|
|
154
|
+
--color-palette-garnet: hsl(var(--garnet));
|
|
155
|
+
--color-palette-cinnamon: hsl(var(--cinnamon));
|
|
156
|
+
--color-palette-caramel: hsl(var(--caramel));
|
|
157
|
+
--color-palette-hazel: hsl(var(--hazel));
|
|
158
|
+
--color-palette-honey: hsl(var(--honey));
|
|
159
|
+
--color-palette-lemon: hsl(var(--lemon));
|
|
160
|
+
--color-palette-olive: hsl(var(--olive));
|
|
161
|
+
--color-palette-sage: hsl(var(--sage));
|
|
162
|
+
--color-palette-mint: hsl(var(--mint));
|
|
163
|
+
--color-palette-bazil: hsl(var(--bazil));
|
|
164
|
+
--color-palette-spruce: hsl(var(--spruce));
|
|
165
|
+
--color-palette-aqua: hsl(var(--aqua));
|
|
166
|
+
--color-palette-azure: hsl(var(--azure));
|
|
167
|
+
--color-palette-tiffany: hsl(var(--tiffany));
|
|
168
|
+
--color-palette-marine: hsl(var(--marine));
|
|
169
|
+
--color-palette-turquoise: hsl(var(--turquoise));
|
|
170
|
+
--color-palette-frost: hsl(var(--frost));
|
|
171
|
+
--color-palette-bosphorus: hsl(var(--bosphorus));
|
|
172
|
+
--color-palette-lavender: hsl(var(--lavender));
|
|
173
|
+
--color-palette-orchid: hsl(var(--orchid));
|
|
174
|
+
--color-palette-lilac: hsl(var(--lilac));
|
|
175
|
+
--color-palette-plume: hsl(var(--plume));
|
|
176
|
+
--color-palette-velvet: hsl(var(--velvet));
|
|
177
|
+
|
|
178
|
+
/* Радиусы */
|
|
179
|
+
--radius-lg: var(--radius);
|
|
180
|
+
--radius-md: calc(var(--radius) - 2px);
|
|
181
|
+
--radius-sm: calc(var(--radius) - 4px);
|
|
182
|
+
--radius-xs: calc(var(--radius) - 6px);
|
|
183
|
+
|
|
184
|
+
/* Тени */
|
|
185
|
+
--shadow-soft-base: 0 1px 3px 0 rgba(0, 0, 0, 0.12), 0 1px 2px -1px rgba(0, 0, 0, 0.12);
|
|
186
|
+
--shadow-soft-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.06);
|
|
187
|
+
--shadow-soft-md: 0 4px 6px -1px rgba(0, 0, 0, 0.12), 0 2px 4px -2px rgba(0, 0, 0, 0.12);
|
|
188
|
+
--shadow-soft-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.12), 0 4px 6px -4px rgba(0, 0, 0, 0.12);
|
|
189
|
+
--shadow-soft-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.12), 0 8px 10px -6px rgba(0, 0, 0, 0.12);
|
|
190
|
+
--shadow-soft-2xl: 0 24px 48px -12px rgba(15, 23, 42, 0.24);
|
|
191
|
+
--shadow-focus: 0 0 0 0.5px hsl(var(--primary-bg)), 0 0 0 1px hsl(var(--focus));
|
|
192
|
+
--shadow-inverse-focus: 0 0 0 0.5px hsl(var(--inverse-primary-bg)), 0 0 0 1px hsl(var(--inverse-muted));
|
|
193
|
+
--shadow-focus-error: 0 0 0 0.5px hsl(var(--primary-bg)), 0 0 0 1px hsl(var(--status-error));
|
|
194
|
+
--shadow-hard-base: 0 1px 3px 0 rgba(2, 6, 23, 0.50), 0 0 0.5px 0 rgba(255, 255, 255, 0.30) inset, 0 3px 8px 0 rgba(2, 6, 23, 0.35), 0 0.5px 0 0 rgba(255, 255, 255, 0.08) inset;
|
|
195
|
+
--shadow-hard-sm: 0 1px 3px 0 rgba(2, 6, 23, 0.40), 0 0 0.5px 0 rgba(255, 255, 255, 0.30) inset, 0 0.5px 0 0 rgba(255, 255, 255, 0.10) inset, 0 0 0.5px 0 rgba(2, 6, 23, 0.50);
|
|
196
|
+
--shadow-hard-md: 0 1px 3px 0 rgba(15, 23, 42, 0.50), 0 0 0.5px 0 rgba(255, 255, 255, 0.30) inset, 0 5px 12px 0 rgba(15, 23, 42, 0.35), 0 0.5px 0 0 rgba(255, 255, 255, 0.08) inset;
|
|
197
|
+
--shadow-hard-lg: 0 2px 5px 0 rgba(15, 23, 42, 0.35), 0 0 0.5px 0 rgba(255, 255, 255, 0.35) inset, 0 10px 16px 0 rgba(2, 6, 23, 0.35), 0 0.5px 0 0 rgba(255, 255, 255, 0.08) inset;
|
|
198
|
+
--shadow-hard-xl: 0 3px 5px 0 rgba(2, 6, 23, 0.35), 0 0 0.5px 0 rgba(255, 255, 255, 0.35) inset, 0 10px 24px 0 rgba(2, 6, 23, 0.45), 0 0.5px 0 0 rgba(255, 255, 255, 0.08) inset;
|
|
199
|
+
--shadow-hard-2xl: 0 4px 6px 0 rgba(2, 6, 23, 0.35), 0 0 0.5px 0 rgba(255, 255, 255, 0.35) inset, 0 12px 28px 0 rgba(2, 6, 23, 0.45), 0 0.5px 0 0 rgba(255, 255, 255, 0.08) inset;
|
|
200
|
+
|
|
201
|
+
/* Интерлиньяж */
|
|
202
|
+
--leading-11: 2.75rem;
|
|
203
|
+
--leading-12: 3.75rem;
|
|
204
|
+
--leading-13: 4.5rem;
|
|
205
|
+
--leading-14: 5.5rem;
|
|
206
|
+
--leading-none: 100%;
|
|
207
|
+
|
|
208
|
+
/* Типографика */
|
|
209
|
+
--text-2xs: 0.5rem;
|
|
210
|
+
--text-2xs--line-height: 0.5rem;
|
|
211
|
+
--text-base: 1rem;
|
|
212
|
+
--text-base--line-height: 1.375rem;
|
|
213
|
+
--text-lg: 1.125rem;
|
|
214
|
+
--text-lg--line-height: 1.5rem;
|
|
215
|
+
--text-4xl: 2.25rem;
|
|
216
|
+
--text-4xl--line-height: 2.75rem;
|
|
217
|
+
--text-4xl--letter-spacing: -0.02em;
|
|
218
|
+
--text-5xl: 3rem;
|
|
219
|
+
--text-5xl--line-height: 3.75rem;
|
|
220
|
+
--text-5xl--letter-spacing: -0.02em;
|
|
221
|
+
--text-6xl: 3.75rem;
|
|
222
|
+
--text-6xl--line-height: 4.5rem;
|
|
223
|
+
--text-6xl--letter-spacing: -0.02em;
|
|
224
|
+
--text-7xl: 4.5rem;
|
|
225
|
+
--text-7xl--line-height: 5.5rem;
|
|
226
|
+
--text-7xl--letter-spacing: -0.02em;
|
|
227
|
+
|
|
228
|
+
/* Шрифты */
|
|
229
|
+
--font-sans: "Inter Variable", Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
|
|
230
|
+
--font-mono: Menlo, ui-monospace, SFMono-Regular, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
|
|
231
|
+
|
|
232
|
+
/* Анимации */
|
|
233
|
+
--animate-indeterminate-bar: indeterminate-bar 1.5s cubic-bezier(.65,.815,.735,.395) infinite;
|
|
234
|
+
--animate-collapsible-down: collapsible-down 200ms cubic-bezier(0.22,1,0.36,1);
|
|
235
|
+
--animate-collapsible-up: collapsible-up 200ms cubic-bezier(0.22,1,0.36,1);
|
|
236
|
+
}
|
|
237
|
+
|
|
238
|
+
@keyframes indeterminate-bar {
|
|
239
|
+
0% {
|
|
240
|
+
transform: translate(-50%) scaleX(.2);
|
|
241
|
+
}
|
|
242
|
+
100% {
|
|
243
|
+
transform: translate(100%) scaleX(1);
|
|
244
|
+
}
|
|
245
|
+
}
|
|
246
|
+
|
|
247
|
+
@keyframes collapsible-down {
|
|
248
|
+
from {
|
|
249
|
+
height: 0;
|
|
250
|
+
}
|
|
251
|
+
to {
|
|
252
|
+
height: var(--radix-collapsible-content-height);
|
|
253
|
+
}
|
|
254
|
+
}
|
|
255
|
+
|
|
256
|
+
@keyframes collapsible-up {
|
|
257
|
+
from {
|
|
258
|
+
height: var(--radix-collapsible-content-height);
|
|
259
|
+
}
|
|
260
|
+
to {
|
|
261
|
+
height: 0;
|
|
262
|
+
}
|
|
263
|
+
}
|
|
264
|
+
|
|
265
|
+
@utility shadow-glass-sm {
|
|
266
|
+
box-shadow: var(--shadow-glass-sm);
|
|
267
|
+
}
|
|
268
|
+
|
|
269
|
+
@utility shadow-glass-md {
|
|
270
|
+
box-shadow: var(--shadow-glass-md);
|
|
271
|
+
}
|
|
272
|
+
|
|
273
|
+
@utility shadow-glass-lg {
|
|
274
|
+
box-shadow: var(--shadow-glass-lg);
|
|
275
|
+
}
|
|
276
|
+
|
|
277
|
+
/*
|
|
278
|
+
* theme.extend.typography из пресета. В v4 плагин typography не берёт
|
|
279
|
+
* конфигурацию из JS, поэтому переменные и правила перенесены сюда.
|
|
280
|
+
*
|
|
281
|
+
* Блок намеренно вне @layer: правила самого плагина едут в слои
|
|
282
|
+
* components/utilities, и любой слой они бы перебили. Неслоёные стили
|
|
283
|
+
* выигрывают у слоёных, так что это единственный способ гарантировать,
|
|
284
|
+
* что кастомизация кита возьмёт верх над дефолтами плагина.
|
|
285
|
+
*/
|
|
286
|
+
.prose {
|
|
287
|
+
--tw-prose-body: hsl(var(--primary-fg));
|
|
288
|
+
--tw-prose-headings: hsl(var(--primary-fg));
|
|
289
|
+
--tw-prose-lead: hsl(var(--primary-fg));
|
|
290
|
+
--tw-prose-links: hsl(var(--primary-fg));
|
|
291
|
+
--tw-prose-bold: hsl(var(--primary-fg));
|
|
292
|
+
--tw-prose-counters: hsl(var(--primary-fg));
|
|
293
|
+
--tw-prose-bullets: hsl(var(--primary-fg));
|
|
294
|
+
--tw-prose-hr: hsl(var(--secondary-border));
|
|
295
|
+
--tw-prose-quotes: hsl(var(--primary-fg));
|
|
296
|
+
--tw-prose-quote-borders: hsl(var(--secondary-border));
|
|
297
|
+
--tw-prose-captions: hsl(var(--primary-fg));
|
|
298
|
+
--tw-prose-code: hsl(var(--primary-fg));
|
|
299
|
+
--tw-prose-pre-code: hsl(var(--primary-bg));
|
|
300
|
+
--tw-prose-pre-bg: hsl(var(--primary-accent));
|
|
301
|
+
--tw-prose-th-borders: hsl(var(--secondary-border));
|
|
302
|
+
--tw-prose-td-borders: hsl(var(--secondary-border));
|
|
303
|
+
|
|
304
|
+
a {
|
|
305
|
+
text-underline-offset: 24%;
|
|
306
|
+
}
|
|
307
|
+
abbr {
|
|
308
|
+
text-underline-offset: 24%;
|
|
309
|
+
}
|
|
310
|
+
ins {
|
|
311
|
+
text-underline-offset: 24%;
|
|
312
|
+
}
|
|
313
|
+
kbd {
|
|
314
|
+
color: hsl(var(--muted));
|
|
315
|
+
background: hsl(var(--secondary-bg));
|
|
316
|
+
border: 1px solid hsl(var(--secondary-border));
|
|
317
|
+
box-shadow: none;
|
|
318
|
+
padding: 0.125rem 0.25rem;
|
|
319
|
+
}
|
|
320
|
+
figcaption {
|
|
321
|
+
font-style: italic;
|
|
322
|
+
}
|
|
323
|
+
ul {
|
|
324
|
+
margin-top: 1.25rem;
|
|
325
|
+
margin-left: 1.5rem;
|
|
326
|
+
}
|
|
327
|
+
ol {
|
|
328
|
+
margin-top: 1.25rem;
|
|
329
|
+
margin-left: 1.5rem;
|
|
330
|
+
}
|
|
331
|
+
code {
|
|
332
|
+
background: hsl(var(--secondary-bg-hover));
|
|
333
|
+
border-radius: calc(var(--radius) - 4px);
|
|
334
|
+
padding: 0.2rem 0.3rem;
|
|
335
|
+
font-weight: 700;
|
|
336
|
+
line-height: 1.25rem;
|
|
337
|
+
font-family: Menlo, ui-monospace, SFMono-Regular, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
|
|
338
|
+
&::before {
|
|
339
|
+
content: "" !important;
|
|
340
|
+
}
|
|
341
|
+
&::after {
|
|
342
|
+
content: "" !important;
|
|
343
|
+
}
|
|
344
|
+
}
|
|
345
|
+
pre {
|
|
346
|
+
border: 1px solid hsl(var(--secondary-border));
|
|
347
|
+
}
|
|
348
|
+
blockquote {
|
|
349
|
+
padding-inline-start: 1.5rem;
|
|
350
|
+
}
|
|
351
|
+
table {
|
|
352
|
+
margin-top: 1.25rem !important;
|
|
353
|
+
margin-bottom: 1.25rem;
|
|
354
|
+
border-collapse: collapse;
|
|
355
|
+
border: 1px solid hsl(var(--secondary-border));
|
|
356
|
+
& tbody tr:nth-child(odd) {
|
|
357
|
+
background-color: hsl(var(--secondary-bg-hover));
|
|
358
|
+
}
|
|
359
|
+
}
|
|
360
|
+
th {
|
|
361
|
+
border: 1px solid hsl(var(--secondary-border));
|
|
362
|
+
padding: 0.5rem 1rem;
|
|
363
|
+
}
|
|
364
|
+
td {
|
|
365
|
+
border: 1px solid hsl(var(--secondary-border));
|
|
366
|
+
padding: 0.5rem 1rem;
|
|
367
|
+
}
|
|
368
|
+
}
|
|
369
|
+
|
|
370
|
+
/*
|
|
371
|
+
* Базовый слой кита. Переопределяется своим @layer base после импорта.
|
|
372
|
+
*/
|
|
373
|
+
@layer base {
|
|
374
|
+
* {
|
|
375
|
+
@apply border-border;
|
|
376
|
+
}
|
|
377
|
+
body {
|
|
378
|
+
@apply bg-background font-sans text-foreground;
|
|
379
|
+
}
|
|
380
|
+
:root {
|
|
381
|
+
@apply font-smoothing;
|
|
382
|
+
}
|
|
383
|
+
|
|
384
|
+
* {
|
|
385
|
+
scrollbar-width: thin;
|
|
386
|
+
scrollbar-color: hsl(var(--secondary-border)) transparent;
|
|
387
|
+
}
|
|
388
|
+
|
|
389
|
+
/* Дефолты, изменившиеся в Tailwind 4 */
|
|
390
|
+
|
|
391
|
+
/* v4 отдаёт кнопкам cursor: default; кит рассчитан на pointer */
|
|
392
|
+
button:not(:disabled),
|
|
393
|
+
[role="button"]:not(:disabled) {
|
|
394
|
+
cursor: pointer;
|
|
395
|
+
}
|
|
396
|
+
|
|
397
|
+
/* v4 красит плейсхолдер текущим цветом с прозрачностью 50%; кит — токеном muted */
|
|
398
|
+
input::placeholder,
|
|
399
|
+
textarea::placeholder {
|
|
400
|
+
color: hsl(var(--muted));
|
|
401
|
+
}
|
|
402
|
+
}
|
|
403
|
+
|
|
404
|
+
@utility underline {
|
|
405
|
+
text-decoration: underline;
|
|
406
|
+
text-underline-offset: 24%;
|
|
407
|
+
}
|