@salt-ds/theme 0.0.0-snapshot-20240726102508 → 0.0.0-snapshot-20240726124318

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 (79) hide show
  1. package/CHANGELOG.md +1308 -0
  2. package/README.md +1 -0
  3. package/css/characteristics/accent-next.css +5 -0
  4. package/css/characteristics/accent.css +5 -0
  5. package/css/characteristics/actionable-next.css +41 -0
  6. package/css/characteristics/actionable.css +47 -0
  7. package/css/characteristics/category-next.css +22 -0
  8. package/css/characteristics/category.css +141 -0
  9. package/css/characteristics/container-next.css +16 -0
  10. package/css/characteristics/container.css +18 -0
  11. package/css/characteristics/content-next.css +14 -0
  12. package/css/characteristics/content.css +15 -0
  13. package/css/characteristics/draggable.css +10 -0
  14. package/css/characteristics/editable-next.css +19 -0
  15. package/css/characteristics/editable.css +33 -0
  16. package/css/characteristics/focused-next.css +3 -0
  17. package/css/characteristics/focused.css +21 -0
  18. package/css/characteristics/navigable-next.css +6 -0
  19. package/css/characteristics/navigable.css +21 -0
  20. package/css/characteristics/overlayable-next.css +4 -0
  21. package/css/characteristics/overlayable.css +12 -0
  22. package/css/characteristics/selectable-next.css +20 -0
  23. package/css/characteristics/selectable.css +31 -0
  24. package/css/characteristics/separable-next.css +5 -0
  25. package/css/characteristics/separable.css +7 -0
  26. package/css/characteristics/status-next.css +34 -0
  27. package/css/characteristics/status.css +34 -0
  28. package/css/characteristics/target-next.css +4 -0
  29. package/css/characteristics/target.css +10 -0
  30. package/css/characteristics/text-next.css +56 -0
  31. package/css/characteristics/text.css +226 -0
  32. package/css/characteristics/track-next.css +3 -0
  33. package/css/characteristics/track.css +8 -0
  34. package/css/deprecated/characteristics.css +186 -0
  35. package/css/deprecated/fade.css +8 -0
  36. package/css/deprecated/foundations.css +107 -0
  37. package/css/deprecated/palette.css +159 -0
  38. package/css/foundations/alpha-next.css +48 -0
  39. package/css/foundations/animation.css +155 -0
  40. package/css/foundations/color-next.css +148 -0
  41. package/css/foundations/color.css +297 -0
  42. package/css/foundations/curve-next.css +31 -0
  43. package/css/foundations/duration.css +6 -0
  44. package/css/foundations/fade.css +72 -0
  45. package/css/foundations/opacity.css +9 -0
  46. package/css/foundations/shadow.css +23 -0
  47. package/css/foundations/size.css +51 -0
  48. package/css/foundations/spacing.css +31 -0
  49. package/css/foundations/typography.css +12 -0
  50. package/css/foundations/zindex.css +14 -0
  51. package/css/global.css +10 -3
  52. package/css/palette/accent-next.css +63 -0
  53. package/css/palette/accent.css +11 -0
  54. package/css/palette/alpha-next.css +19 -0
  55. package/css/palette/background-next.css +16 -0
  56. package/css/palette/categorical.css +163 -0
  57. package/css/palette/corner-next.css +12 -0
  58. package/css/palette/error.css +17 -0
  59. package/css/palette/foreground-next.css +22 -0
  60. package/css/palette/info-next.css +10 -0
  61. package/css/palette/info.css +15 -0
  62. package/css/palette/interact.css +91 -0
  63. package/css/palette/navigate.css +17 -0
  64. package/css/palette/negative-next.css +10 -0
  65. package/css/palette/negative.css +7 -0
  66. package/css/palette/neutral-next.css +34 -0
  67. package/css/palette/neutral.css +51 -0
  68. package/css/palette/opacity.css +9 -0
  69. package/css/palette/positive-next.css +10 -0
  70. package/css/palette/positive.css +7 -0
  71. package/css/palette/success.css +17 -0
  72. package/css/palette/text-next.css +50 -0
  73. package/css/palette/text.css +24 -0
  74. package/css/palette/warning-next.css +10 -0
  75. package/css/palette/warning.css +17 -0
  76. package/css/theme-next.css +31 -954
  77. package/css/theme.css +55 -1954
  78. package/index.css +2 -1985
  79. package/package.json +4 -3
@@ -1,954 +1,31 @@
1
- /* css/foundations/alpha-next.css */
2
- .salt-theme.salt-theme-next {
3
- --salt-color-white-10a: rgba(var(--salt-color-white-rgb), 0.1);
4
- --salt-color-white-15a: rgba(var(--salt-color-white-rgb), 0.15);
5
- --salt-color-white-20a: rgba(var(--salt-color-white-rgb), 0.2);
6
- --salt-color-white-30a: rgba(var(--salt-color-white-rgb), 0.3);
7
- --salt-color-white-40a: rgba(var(--salt-color-white-rgb), 0.4);
8
- --salt-color-white-45a: rgba(var(--salt-color-white-rgb), 0.45);
9
- --salt-color-white-70a: rgba(var(--salt-color-white-rgb), 0.7);
10
- --salt-color-black-10a: rgba(var(--salt-color-black-rgb), 0.1);
11
- --salt-color-black-15a: rgba(var(--salt-color-black-rgb), 0.15);
12
- --salt-color-black-20a: rgba(var(--salt-color-black-rgb), 0.2);
13
- --salt-color-black-30a: rgba(var(--salt-color-black-rgb), 0.3);
14
- --salt-color-black-40a: rgba(var(--salt-color-black-rgb), 0.4);
15
- --salt-color-black-45a: rgba(var(--salt-color-black-rgb), 0.45);
16
- --salt-color-black-70a: rgba(var(--salt-color-black-rgb), 0.7);
17
- --salt-color-gray-300-10a: rgba(var(--salt-color-gray-300-rgb), 0.1);
18
- --salt-color-gray-300-40a: rgba(var(--salt-color-gray-300-rgb), 0.4);
19
- --salt-color-gray-400-40a: rgba(var(--salt-color-gray-400-rgb), 0.4);
20
- --salt-color-gray-500-10a: rgba(var(--salt-color-gray-500-rgb), 0.1);
21
- --salt-color-gray-500-40a: rgba(var(--salt-color-gray-500-rgb), 0.4);
22
- --salt-color-gray-600-40a: rgba(var(--salt-color-gray-600-rgb), 0.4);
23
- --salt-color-gray-700-10a: rgba(var(--salt-color-gray-700-rgb), 0.1);
24
- --salt-color-gray-700-40a: rgba(var(--salt-color-gray-700-rgb), 0.4);
25
- --salt-color-blue-200-40a: rgba(var(--salt-color-blue-200-rgb), 0.4);
26
- --salt-color-blue-300-40a: rgba(var(--salt-color-blue-300-rgb), 0.4);
27
- --salt-color-blue-400-40a: rgba(var(--salt-color-blue-400-rgb), 0.4);
28
- --salt-color-blue-500-40a: rgba(var(--salt-color-blue-500-rgb), 0.4);
29
- --salt-color-blue-600-40a: rgba(var(--salt-color-blue-600-rgb), 0.4);
30
- --salt-color-blue-700-40a: rgba(var(--salt-color-blue-700-rgb), 0.4);
31
- --salt-color-blue-800-40a: rgba(var(--salt-color-blue-800-rgb), 0.4);
32
- --salt-color-teal-200-40a: rgba(var(--salt-color-teal-200-rgb), 0.4);
33
- --salt-color-teal-300-40a: rgba(var(--salt-color-teal-300-rgb), 0.4);
34
- --salt-color-teal-400-40a: rgba(var(--salt-color-teal-400-rgb), 0.4);
35
- --salt-color-teal-500-40a: rgba(var(--salt-color-teal-500-rgb), 0.4);
36
- --salt-color-teal-600-40a: rgba(var(--salt-color-teal-600-rgb), 0.4);
37
- --salt-color-teal-700-40a: rgba(var(--salt-color-teal-700-rgb), 0.4);
38
- --salt-color-teal-800-40a: rgba(var(--salt-color-teal-800-rgb), 0.4);
39
- --salt-color-background-snow-40a: rgba(var(--salt-color-background-snow-rgb), 0.4);
40
- --salt-color-background-marble-40a: rgba(var(--salt-color-background-marble-rgb), 0.4);
41
- --salt-color-background-limestone-40a: rgba(var(--salt-color-background-limestone-rgb), 0.4);
42
- --salt-color-background-granite-40a: rgba(var(--salt-color-background-granite-rgb), 0.4);
43
- --salt-color-background-jet-40a: rgba(var(--salt-color-background-jet-rgb), 0.4);
44
- --salt-color-background-leather-40a: rgba(var(--salt-color-background-leather-rgb), 0.4);
45
- }
46
-
47
- /* css/foundations/color-next.css */
48
- .salt-theme.salt-theme-next {
49
- --salt-color-white-rgb:
50
- 255,
51
- 255,
52
- 255;
53
- --salt-color-gray-100-rgb:
54
- 245,
55
- 247,
56
- 248;
57
- --salt-color-gray-200-rgb:
58
- 211,
59
- 213,
60
- 216;
61
- --salt-color-gray-300-rgb:
62
- 177,
63
- 181,
64
- 185;
65
- --salt-color-gray-400-rgb:
66
- 145,
67
- 149,
68
- 154;
69
- --salt-color-gray-500-rgb:
70
- 114,
71
- 119,
72
- 125;
73
- --salt-color-gray-600-rgb:
74
- 95,
75
- 100,
76
- 106;
77
- --salt-color-gray-700-rgb:
78
- 76,
79
- 81,
80
- 87;
81
- --salt-color-gray-800-rgb:
82
- 58,
83
- 63,
84
- 68;
85
- --salt-color-gray-900-rgb:
86
- 41,
87
- 46,
88
- 51;
89
- --salt-color-black-rgb:
90
- 0,
91
- 0,
92
- 0;
93
- --salt-color-blue-100-rgb:
94
- 234,
95
- 246,
96
- 255;
97
- --salt-color-blue-200-rgb:
98
- 199,
99
- 222,
100
- 255;
101
- --salt-color-blue-300-rgb:
102
- 154,
103
- 189,
104
- 245;
105
- --salt-color-blue-400-rgb:
106
- 102,
107
- 156,
108
- 232;
109
- --salt-color-blue-500-rgb:
110
- 0,
111
- 120,
112
- 207;
113
- --salt-color-blue-600-rgb:
114
- 0,
115
- 94,
116
- 166;
117
- --salt-color-blue-700-rgb:
118
- 0,
119
- 69,
120
- 126;
121
- --salt-color-blue-800-rgb:
122
- 0,
123
- 45,
124
- 89;
125
- --salt-color-blue-900-rgb:
126
- 0,
127
- 23,
128
- 54;
129
- --salt-color-green-100-rgb:
130
- 234,
131
- 245,
132
- 242;
133
- --salt-color-green-200-rgb:
134
- 184,
135
- 229,
136
- 209;
137
- --salt-color-green-300-rgb:
138
- 137,
139
- 204,
140
- 173;
141
- --salt-color-green-400-rgb:
142
- 83,
143
- 176,
144
- 135;
145
- --salt-color-green-500-rgb:
146
- 0,
147
- 135,
148
- 93;
149
- --salt-color-green-600-rgb:
150
- 0,
151
- 107,
152
- 72;
153
- --salt-color-green-700-rgb:
154
- 0,
155
- 86,
156
- 55;
157
- --salt-color-green-800-rgb:
158
- 0,
159
- 63,
160
- 37;
161
- --salt-color-green-900-rgb:
162
- 0,
163
- 41,
164
- 21;
165
- --salt-color-teal-100-rgb:
166
- 219,
167
- 245,
168
- 247;
169
- --salt-color-teal-200-rgb:
170
- 175,
171
- 224,
172
- 237;
173
- --salt-color-teal-300-rgb:
174
- 131,
175
- 192,
176
- 214;
177
- --salt-color-teal-400-rgb:
178
- 76,
179
- 161,
180
- 194;
181
- --salt-color-teal-500-rgb:
182
- 27,
183
- 127,
184
- 158;
185
- --salt-color-teal-600-rgb:
186
- 18,
187
- 100,
188
- 126;
189
- --salt-color-teal-700-rgb:
190
- 9,
191
- 74,
192
- 96;
193
- --salt-color-teal-800-rgb:
194
- 3,
195
- 49,
196
- 66;
197
- --salt-color-teal-900-rgb:
198
- 0,
199
- 27,
200
- 41;
201
- --salt-color-orange-100-rgb:
202
- 255,
203
- 236,
204
- 217;
205
- --salt-color-orange-200-rgb:
206
- 255,
207
- 198,
208
- 161;
209
- --salt-color-orange-300-rgb:
210
- 247,
211
- 160,
212
- 106;
213
- --salt-color-orange-400-rgb:
214
- 232,
215
- 122,
216
- 56;
217
- --salt-color-orange-500-rgb:
218
- 199,
219
- 83,
220
- 0;
221
- --salt-color-orange-600-rgb:
222
- 163,
223
- 68,
224
- 0;
225
- --salt-color-orange-700-rgb:
226
- 129,
227
- 54,
228
- 0;
229
- --salt-color-orange-800-rgb:
230
- 97,
231
- 41,
232
- 0;
233
- --salt-color-orange-900-rgb:
234
- 66,
235
- 32,
236
- 0;
237
- --salt-color-red-100-rgb:
238
- 255,
239
- 236,
240
- 234;
241
- --salt-color-red-200-rgb:
242
- 255,
243
- 193,
244
- 186;
245
- --salt-color-red-300-rgb:
246
- 255,
247
- 147,
248
- 138;
249
- --salt-color-red-400-rgb:
250
- 255,
251
- 93,
252
- 87;
253
- --salt-color-red-500-rgb:
254
- 229,
255
- 33,
256
- 53;
257
- --salt-color-red-600-rgb:
258
- 186,
259
- 23,
260
- 41;
261
- --salt-color-red-700-rgb:
262
- 145,
263
- 13,
264
- 30;
265
- --salt-color-red-800-rgb:
266
- 105,
267
- 4,
268
- 19;
269
- --salt-color-red-900-rgb:
270
- 69,
271
- 0,
272
- 2;
273
- --salt-color-purple-100-rgb:
274
- 246,
275
- 240,
276
- 250;
277
- --salt-color-purple-200-rgb:
278
- 240,
279
- 214,
280
- 245;
281
- --salt-color-purple-300-rgb:
282
- 218,
283
- 175,
284
- 224;
285
- --salt-color-purple-400-rgb:
286
- 195,
287
- 136,
288
- 204;
289
- --salt-color-purple-500-rgb:
290
- 162,
291
- 91,
292
- 173;
293
- --salt-color-purple-600-rgb:
294
- 133,
295
- 67,
296
- 143;
297
- --salt-color-purple-700-rgb:
298
- 104,
299
- 45,
300
- 113;
301
- --salt-color-purple-800-rgb:
302
- 73,
303
- 21,
304
- 82;
305
- --salt-color-purple-900-rgb:
306
- 51,
307
- 0,
308
- 59;
309
- --salt-color-background-snow-rgb:
310
- 255,
311
- 255,
312
- 255;
313
- --salt-color-background-marble-rgb:
314
- 245,
315
- 247,
316
- 248;
317
- --salt-color-background-limestone-rgb:
318
- 250,
319
- 248,
320
- 242;
321
- --salt-color-background-gradientlight-rgb:
322
- 226,
323
- 228,
324
- 229;
325
- --salt-color-background-jet-rgb:
326
- 16,
327
- 24,
328
- 32;
329
- --salt-color-background-granite-rgb:
330
- 26,
331
- 34,
332
- 41;
333
- --salt-color-background-leather-rgb:
334
- 38,
335
- 41,
336
- 43;
337
- --salt-color-logo-brown-rgb:
338
- 58,
339
- 34,
340
- 6;
341
- --salt-color-white: rgb(var(--salt-color-white-rgb));
342
- --salt-color-gray-100: rgb(var(--salt-color-gray-100-rgb));
343
- --salt-color-gray-200: rgb(var(--salt-color-gray-200-rgb));
344
- --salt-color-gray-300: rgb(var(--salt-color-gray-300-rgb));
345
- --salt-color-gray-400: rgb(var(--salt-color-gray-400-rgb));
346
- --salt-color-gray-500: rgb(var(--salt-color-gray-500-rgb));
347
- --salt-color-gray-600: rgb(var(--salt-color-gray-600-rgb));
348
- --salt-color-gray-700: rgb(var(--salt-color-gray-700-rgb));
349
- --salt-color-gray-800: rgb(var(--salt-color-gray-800-rgb));
350
- --salt-color-gray-900: rgb(var(--salt-color-gray-900-rgb));
351
- --salt-color-black: rgb(var(--salt-color-black-rgb));
352
- --salt-color-blue-100: rgb(var(--salt-color-blue-100-rgb));
353
- --salt-color-blue-200: rgb(var(--salt-color-blue-200-rgb));
354
- --salt-color-blue-300: rgb(var(--salt-color-blue-300-rgb));
355
- --salt-color-blue-400: rgb(var(--salt-color-blue-400-rgb));
356
- --salt-color-blue-500: rgb(var(--salt-color-blue-500-rgb));
357
- --salt-color-blue-600: rgb(var(--salt-color-blue-600-rgb));
358
- --salt-color-blue-700: rgb(var(--salt-color-blue-700-rgb));
359
- --salt-color-blue-800: rgb(var(--salt-color-blue-800-rgb));
360
- --salt-color-blue-900: rgb(var(--salt-color-blue-900-rgb));
361
- --salt-color-green-100: rgb(var(--salt-color-green-100-rgb));
362
- --salt-color-green-200: rgb(var(--salt-color-green-200-rgb));
363
- --salt-color-green-300: rgb(var(--salt-color-green-300-rgb));
364
- --salt-color-green-400: rgb(var(--salt-color-green-400-rgb));
365
- --salt-color-green-500: rgb(var(--salt-color-green-500-rgb));
366
- --salt-color-green-600: rgb(var(--salt-color-green-600-rgb));
367
- --salt-color-green-700: rgb(var(--salt-color-green-700-rgb));
368
- --salt-color-green-800: rgb(var(--salt-color-green-800-rgb));
369
- --salt-color-green-900: rgb(var(--salt-color-green-900-rgb));
370
- --salt-color-teal-100: rgb(var(--salt-color-teal-100-rgb));
371
- --salt-color-teal-200: rgb(var(--salt-color-teal-200-rgb));
372
- --salt-color-teal-300: rgb(var(--salt-color-teal-300-rgb));
373
- --salt-color-teal-400: rgb(var(--salt-color-teal-400-rgb));
374
- --salt-color-teal-500: rgb(var(--salt-color-teal-500-rgb));
375
- --salt-color-teal-600: rgb(var(--salt-color-teal-600-rgb));
376
- --salt-color-teal-700: rgb(var(--salt-color-teal-700-rgb));
377
- --salt-color-teal-800: rgb(var(--salt-color-teal-800-rgb));
378
- --salt-color-teal-900: rgb(var(--salt-color-teal-900-rgb));
379
- --salt-color-orange-100: rgb(var(--salt-color-orange-100-rgb));
380
- --salt-color-orange-200: rgb(var(--salt-color-orange-200-rgb));
381
- --salt-color-orange-300: rgb(var(--salt-color-orange-300-rgb));
382
- --salt-color-orange-400: rgb(var(--salt-color-orange-400-rgb));
383
- --salt-color-orange-500: rgb(var(--salt-color-orange-500-rgb));
384
- --salt-color-orange-600: rgb(var(--salt-color-orange-600-rgb));
385
- --salt-color-orange-700: rgb(var(--salt-color-orange-700-rgb));
386
- --salt-color-orange-800: rgb(var(--salt-color-orange-800-rgb));
387
- --salt-color-orange-900: rgb(var(--salt-color-orange-900-rgb));
388
- --salt-color-red-100: rgb(var(--salt-color-red-100-rgb));
389
- --salt-color-red-200: rgb(var(--salt-color-red-200-rgb));
390
- --salt-color-red-300: rgb(var(--salt-color-red-300-rgb));
391
- --salt-color-red-400: rgb(var(--salt-color-red-400-rgb));
392
- --salt-color-red-500: rgb(var(--salt-color-red-500-rgb));
393
- --salt-color-red-600: rgb(var(--salt-color-red-600-rgb));
394
- --salt-color-red-700: rgb(var(--salt-color-red-700-rgb));
395
- --salt-color-red-800: rgb(var(--salt-color-red-800-rgb));
396
- --salt-color-red-900: rgb(var(--salt-color-red-900-rgb));
397
- --salt-color-purple-100: rgb(var(--salt-color-purple-100-rgb));
398
- --salt-color-purple-200: rgb(var(--salt-color-purple-200-rgb));
399
- --salt-color-purple-300: rgb(var(--salt-color-purple-300-rgb));
400
- --salt-color-purple-400: rgb(var(--salt-color-purple-400-rgb));
401
- --salt-color-purple-500: rgb(var(--salt-color-purple-500-rgb));
402
- --salt-color-purple-600: rgb(var(--salt-color-purple-600-rgb));
403
- --salt-color-purple-700: rgb(var(--salt-color-purple-700-rgb));
404
- --salt-color-purple-800: rgb(var(--salt-color-purple-800-rgb));
405
- --salt-color-purple-900: rgb(var(--salt-color-purple-900-rgb));
406
- --salt-color-background-snow: rgb(var(--salt-color-background-snow-rgb));
407
- --salt-color-background-marble: rgb(var(--salt-color-background-marble-rgb));
408
- --salt-color-background-limestone: rgb(var(--salt-color-background-limestone-rgb));
409
- --salt-color-background-gradientlight: rgb(var(--salt-color-background-gradientlight-rgb));
410
- --salt-color-background-jet: rgb(var(--salt-color-background-jet-rgb));
411
- --salt-color-background-granite: rgb(var(--salt-color-background-granite-rgb));
412
- --salt-color-background-leather: rgb(var(--salt-color-background-leather-rgb));
413
- --salt-color-logo-brown: rgb(var(--salt-color-logo-brown-rgb));
414
- }
415
-
416
- /* css/foundations/curve-next.css */
417
- .salt-density-high {
418
- --salt-curve-0: 0;
419
- --salt-curve-50: 1px;
420
- --salt-curve-100: 2px;
421
- --salt-curve-150: 3px;
422
- --salt-curve-999: 999px;
423
- }
424
- .salt-density-medium {
425
- --salt-curve-0: 0;
426
- --salt-curve-50: 2px;
427
- --salt-curve-100: 4px;
428
- --salt-curve-150: 6px;
429
- --salt-curve-999: 999px;
430
- }
431
- .salt-density-low {
432
- --salt-curve-0: 0;
433
- --salt-curve-50: 3px;
434
- --salt-curve-100: 6px;
435
- --salt-curve-150: 9px;
436
- --salt-curve-999: 999px;
437
- }
438
- .salt-density-touch {
439
- --salt-curve-0: 0;
440
- --salt-curve-50: 4px;
441
- --salt-curve-100: 8px;
442
- --salt-curve-150: 12px;
443
- --salt-curve-999: 999px;
444
- }
445
-
446
- /* css/palette/alpha-next.css */
447
- .salt-theme.salt-theme-next[data-mode=light] {
448
- --salt-palette-alpha: var(--salt-color-black-30a);
449
- --salt-palette-alpha-strong: var(--salt-color-black-45a);
450
- --salt-palette-alpha-weak: var(--salt-color-black-15a);
451
- --salt-palette-alpha-weaker: var(--salt-color-black-10a);
452
- --salt-palette-alpha-backdrop: var(--salt-color-white-70a);
453
- --salt-palette-alpha-none: transparent;
454
- }
455
- .salt-theme.salt-theme-next[data-mode=dark] {
456
- --salt-palette-alpha: var(--salt-color-white-30a);
457
- --salt-palette-alpha-strong: var(--salt-color-white-45a);
458
- --salt-palette-alpha-weak: var(--salt-color-white-15a);
459
- --salt-palette-alpha-weaker: var(--salt-color-white-10a);
460
- --salt-palette-alpha-backdrop: var(--salt-color-black-70a);
461
- --salt-palette-alpha-none: transparent;
462
- }
463
-
464
- /* css/palette/accent-next.css */
465
- .salt-theme.salt-theme-next[data-mode=light][data-accent=blue] {
466
- --salt-palette-accent: var(--salt-color-blue-500);
467
- --salt-palette-accent-disabled: var(--salt-color-blue-500-40a);
468
- --salt-palette-accent-strong: var(--salt-color-blue-600);
469
- --salt-palette-accent-strong-disabled: var(--salt-color-blue-600-40a);
470
- --salt-palette-accent-stronger: var(--salt-color-blue-700);
471
- --salt-palette-accent-stronger-disabled: var(--salt-color-blue-700-40a);
472
- --salt-palette-accent-strongest: var(--salt-color-blue-800);
473
- --salt-palette-accent-weak: var(--salt-color-blue-400);
474
- --salt-palette-accent-weaker: var(--salt-color-blue-200);
475
- --salt-palette-accent-weaker-disabled: var(--salt-color-blue-200-40a);
476
- --salt-palette-accent-weakest: var(--salt-color-blue-100);
477
- --salt-palette-accent-action-hover: var(--salt-color-blue-600);
478
- --salt-palette-accent-action-active: var(--salt-color-blue-800);
479
- }
480
- .salt-theme.salt-theme-next[data-mode=dark][data-accent=blue] {
481
- --salt-palette-accent: var(--salt-color-blue-500);
482
- --salt-palette-accent-disabled: var(--salt-color-blue-500-40a);
483
- --salt-palette-accent-strong: var(--salt-color-blue-400);
484
- --salt-palette-accent-strong-disabled: var(--salt-color-blue-400-40a);
485
- --salt-palette-accent-stronger: var(--salt-color-blue-300);
486
- --salt-palette-accent-stronger-disabled: var(--salt-color-blue-300-40a);
487
- --salt-palette-accent-strongest: var(--salt-color-blue-200);
488
- --salt-palette-accent-weak: var(--salt-color-blue-600);
489
- --salt-palette-accent-weaker: var(--salt-color-blue-800);
490
- --salt-palette-accent-weaker-disabled: var(--salt-color-blue-800-40a);
491
- --salt-palette-accent-weakest: var(--salt-color-blue-900);
492
- --salt-palette-accent-action-hover: var(--salt-color-blue-600);
493
- --salt-palette-accent-action-active: var(--salt-color-blue-800);
494
- }
495
- .salt-theme.salt-theme-next[data-mode=light][data-accent=teal] {
496
- --salt-palette-accent: var(--salt-color-teal-500);
497
- --salt-palette-accent-disabled: var(--salt-color-teal-500-40a);
498
- --salt-palette-accent-strong: var(--salt-color-teal-600);
499
- --salt-palette-accent-strong-disabled: var(--salt-color-teal-600-40a);
500
- --salt-palette-accent-stronger: var(--salt-color-teal-700);
501
- --salt-palette-accent-stronger-disabled: var(--salt-color-teal-700-40a);
502
- --salt-palette-accent-strongest: var(--salt-color-teal-800);
503
- --salt-palette-accent-weak: var(--salt-color-teal-400);
504
- --salt-palette-accent-weaker: var(--salt-color-teal-200);
505
- --salt-palette-accent-weaker-disabled: var(--salt-color-teal-200-40a);
506
- --salt-palette-accent-weakest: var(--salt-color-teal-100);
507
- --salt-palette-accent-action-hover: var(--salt-color-teal-600);
508
- --salt-palette-accent-action-active: var(--salt-color-teal-800);
509
- }
510
- .salt-theme.salt-theme-next[data-mode=dark][data-accent=teal] {
511
- --salt-palette-accent: var(--salt-color-teal-500);
512
- --salt-palette-accent-disabled: var(--salt-color-teal-500-40a);
513
- --salt-palette-accent-strong: var(--salt-color-teal-400);
514
- --salt-palette-accent-strong-disabled: var(--salt-color-teal-400-40a);
515
- --salt-palette-accent-stronger: var(--salt-color-teal-300);
516
- --salt-palette-accent-stronger-disabled: var(--salt-color-teal-300-40a);
517
- --salt-palette-accent-strongest: var(--salt-color-teal-200);
518
- --salt-palette-accent-weak: var(--salt-color-teal-600);
519
- --salt-palette-accent-weaker: var(--salt-color-teal-800);
520
- --salt-palette-accent-weaker-disabled: var(--salt-color-teal-800-40a);
521
- --salt-palette-accent-weakest: var(--salt-color-teal-900);
522
- --salt-palette-accent-action-hover: var(--salt-color-teal-600);
523
- --salt-palette-accent-action-active: var(--salt-color-teal-800);
524
- }
525
-
526
- /* css/palette/background-next.css */
527
- .salt-theme.salt-theme-next[data-mode=light] {
528
- --salt-palette-background-primary: var(--salt-color-background-snow);
529
- --salt-palette-background-primary-disabled: var(--salt-color-background-snow-40a);
530
- --salt-palette-background-secondary: var(--salt-color-background-marble);
531
- --salt-palette-background-secondary-disabled: var(--salt-color-background-marble-40a);
532
- --salt-palette-background-tertiary: var(--salt-color-background-limestone);
533
- --salt-palette-background-tertiary-disabled: var(--salt-color-background-limestone-40a);
534
- }
535
- .salt-theme.salt-theme-next[data-mode=dark] {
536
- --salt-palette-background-primary: var(--salt-color-background-jet);
537
- --salt-palette-background-primary-disabled: var(--salt-color-background-jet-40a);
538
- --salt-palette-background-secondary: var(--salt-color-background-granite);
539
- --salt-palette-background-secondary-disabled: var(--salt-color-background-granite-40a);
540
- --salt-palette-background-tertiary: var(--salt-color-background-leather);
541
- --salt-palette-background-tertiary-disabled: var(--salt-color-background-leather-40a);
542
- }
543
-
544
- /* css/palette/corner-next.css */
545
- .salt-theme-next[data-corner=rounded] {
546
- --salt-palette-corner-weaker: var(--salt-curve-50);
547
- --salt-palette-corner-weak: var(--salt-curve-100);
548
- --salt-palette-corner: var(--salt-curve-150);
549
- --salt-palette-corner-strongest: var(--salt-curve-999);
550
- }
551
- .salt-theme-next[data-corner=sharp] {
552
- --salt-palette-corner-weaker: var(--salt-curve-0);
553
- --salt-palette-corner-weak: var(--salt-curve-0);
554
- --salt-palette-corner: var(--salt-curve-0);
555
- --salt-palette-corner-strongest: var(--salt-curve-999);
556
- }
557
-
558
- /* css/palette/foreground-next.css */
559
- .salt-theme.salt-theme-next[data-mode=light] {
560
- --salt-palette-foreground-active: var(--salt-color-blue-700);
561
- --salt-palette-foreground-hover: var(--salt-color-blue-600);
562
- --salt-palette-foreground-primary: var(--salt-color-black);
563
- --salt-palette-foreground-primary-disabled: var(--salt-color-black-40a);
564
- --salt-palette-foreground-primary-alt: var(--salt-color-white);
565
- --salt-palette-foreground-primary-alt-disabled: var(--salt-color-white-40a);
566
- --salt-palette-foreground-secondary: var(--salt-color-gray-600);
567
- --salt-palette-foreground-secondary-disabled: var(--salt-color-gray-600-40a);
568
- --salt-palette-foreground-visited: var(--salt-color-purple-800);
569
- }
570
- .salt-theme.salt-theme-next[data-mode=dark] {
571
- --salt-palette-foreground-active: var(--salt-color-blue-300);
572
- --salt-palette-foreground-hover: var(--salt-color-blue-400);
573
- --salt-palette-foreground-primary: var(--salt-color-white);
574
- --salt-palette-foreground-primary-disabled: var(--salt-color-white-40a);
575
- --salt-palette-foreground-primary-alt: var(--salt-color-white);
576
- --salt-palette-foreground-primary-alt-disabled: var(--salt-color-white-40a);
577
- --salt-palette-foreground-secondary: var(--salt-color-gray-400);
578
- --salt-palette-foreground-secondary-disabled: var(--salt-color-gray-400-40a);
579
- --salt-palette-foreground-visited: var(--salt-color-purple-200);
580
- }
581
-
582
- /* css/palette/info-next.css */
583
- .salt-theme.salt-theme-next[data-mode=light] {
584
- --salt-palette-info: var(--salt-color-blue-500);
585
- --salt-palette-info-strong: var(--salt-color-blue-600);
586
- --salt-palette-info-weak: var(--salt-color-blue-100);
587
- }
588
- .salt-theme.salt-theme-next[data-mode=dark] {
589
- --salt-palette-info: var(--salt-color-blue-500);
590
- --salt-palette-info-strong: var(--salt-color-blue-400);
591
- --salt-palette-info-weak: var(--salt-color-blue-900);
592
- }
593
-
594
- /* css/palette/negative-next.css */
595
- .salt-theme.salt-theme-next[data-mode=light] {
596
- --salt-palette-negative: var(--salt-color-red-500);
597
- --salt-palette-negative-strong: var(--salt-color-red-600);
598
- --salt-palette-negative-weak: var(--salt-color-red-100);
599
- }
600
- .salt-theme.salt-theme-next[data-mode=dark] {
601
- --salt-palette-negative: var(--salt-color-red-500);
602
- --salt-palette-negative-strong: var(--salt-color-red-400);
603
- --salt-palette-negative-weak: var(--salt-color-red-900);
604
- }
605
-
606
- /* css/palette/neutral-next.css */
607
- .salt-theme.salt-theme-next[data-mode=light] {
608
- --salt-palette-neutral: var(--salt-color-gray-500);
609
- --salt-palette-neutral-disabled: var(--salt-color-gray-500-40a);
610
- --salt-palette-neutral-readonly: var(--salt-color-gray-500-10a);
611
- --salt-palette-neutral-strong: var(--salt-color-gray-600);
612
- --salt-palette-neutral-strong-disabled: var(--salt-color-gray-600-40a);
613
- --salt-palette-neutral-stronger: var(--salt-color-gray-700);
614
- --salt-palette-neutral-strongest: var(--salt-color-gray-800);
615
- --salt-palette-neutral-weak: var(--salt-color-gray-400);
616
- --salt-palette-neutral-weak-disabled: var(--salt-color-gray-400-40a);
617
- --salt-palette-neutral-weaker: var(--salt-color-gray-300);
618
- --salt-palette-neutral-weaker-disabled: var(--salt-color-gray-300-40a);
619
- --salt-palette-neutral-weaker-readonly: var(--salt-color-gray-300-10a);
620
- --salt-palette-neutral-weakest: var(--salt-color-gray-200);
621
- --salt-palette-neutral-action-hover: var(--salt-color-gray-600);
622
- --salt-palette-neutral-action-active: var(--salt-color-gray-800);
623
- }
624
- .salt-theme.salt-theme-next[data-mode=dark] {
625
- --salt-palette-neutral: var(--salt-color-gray-500);
626
- --salt-palette-neutral-disabled: var(--salt-color-gray-500-40a);
627
- --salt-palette-neutral-readonly: var(--salt-color-gray-500-10a);
628
- --salt-palette-neutral-strong: var(--salt-color-gray-400);
629
- --salt-palette-neutral-strong-disabled: var(--salt-color-gray-400-40a);
630
- --salt-palette-neutral-stronger: var(--salt-color-gray-300);
631
- --salt-palette-neutral-strongest: var(--salt-color-gray-200);
632
- --salt-palette-neutral-weak: var(--salt-color-gray-600);
633
- --salt-palette-neutral-weak-disabled: var(--salt-color-gray-600-40a);
634
- --salt-palette-neutral-weaker: var(--salt-color-gray-700);
635
- --salt-palette-neutral-weaker-disabled: var(--salt-color-gray-700-40a);
636
- --salt-palette-neutral-weaker-readonly: var(--salt-color-gray-700-10a);
637
- --salt-palette-neutral-weakest: var(--salt-color-gray-800);
638
- --salt-palette-neutral-action-hover: var(--salt-color-gray-600);
639
- --salt-palette-neutral-action-active: var(--salt-color-gray-800);
640
- }
641
-
642
- /* css/palette/positive-next.css */
643
- .salt-theme.salt-theme-next[data-mode=light] {
644
- --salt-palette-positive: var(--salt-color-green-500);
645
- --salt-palette-positive-strong: var(--salt-color-green-600);
646
- --salt-palette-positive-weak: var(--salt-color-green-100);
647
- }
648
- .salt-theme.salt-theme-next[data-mode=dark] {
649
- --salt-palette-positive: var(--salt-color-green-500);
650
- --salt-palette-positive-strong: var(--salt-color-green-400);
651
- --salt-palette-positive-weak: var(--salt-color-green-900);
652
- }
653
-
654
- /* css/palette/text-next.css */
655
- .salt-theme-next.salt-theme[data-heading-font="Open Sans"] {
656
- --salt-palette-text-fontFamily-heading: var(--salt-typography-fontFamily-openSans);
657
- --salt-palette-text-display-fontWeight: var(--salt-typography-fontWeight-semiBold);
658
- --salt-palette-text-display-fontWeight-small: var(--salt-typography-fontWeight-regular);
659
- --salt-palette-text-display-fontWeight-strong: var(--salt-typography-fontWeight-bold);
660
- --salt-palette-text-heading-fontWeight: var(--salt-typography-fontWeight-semiBold);
661
- --salt-palette-text-heading-fontWeight-small: var(--salt-typography-fontWeight-regular);
662
- --salt-palette-text-heading-fontWeight-strong: var(--salt-typography-fontWeight-bold);
663
- --salt-palette-text-body-fontWeight: var(--salt-typography-fontWeight-regular);
664
- --salt-palette-text-body-fontWeight-small: var(--salt-typography-fontWeight-light);
665
- --salt-palette-text-body-fontWeight-strong: var(--salt-typography-fontWeight-semiBold);
666
- --salt-palette-text-notation-fontWeight: var(--salt-typography-fontWeight-semiBold);
667
- --salt-palette-text-notation-fontWeight-small: var(--salt-typography-fontWeight-regular);
668
- --salt-palette-text-notation-fontWeight-strong: var(--salt-typography-fontWeight-bold);
669
- }
670
- .salt-theme-next.salt-theme[data-heading-font=Amplitude] {
671
- --salt-palette-text-fontFamily-heading: var(--salt-typography-fontFamily-amplitude);
672
- --salt-palette-text-display-fontWeight: var(--salt-typography-fontWeight-medium);
673
- --salt-palette-text-display-fontWeight-strong: var(--salt-typography-fontWeight-bold);
674
- --salt-palette-text-display-fontWeight-small: var(--salt-typography-fontWeight-regular);
675
- --salt-palette-text-heading-fontWeight: var(--salt-typography-fontWeight-medium);
676
- --salt-palette-text-heading-fontWeight-small: var(--salt-typography-fontWeight-regular);
677
- --salt-palette-text-heading-fontWeight-strong: var(--salt-typography-fontWeight-bold);
678
- --salt-palette-text-body-fontWeight: var(--salt-typography-fontWeight-regular);
679
- --salt-palette-text-body-fontWeight-small: var(--salt-typography-fontWeight-light);
680
- --salt-palette-text-body-fontWeight-strong: var(--salt-typography-fontWeight-semiBold);
681
- --salt-palette-text-notation-fontWeight: var(--salt-typography-fontWeight-semiBold);
682
- --salt-palette-text-notation-fontWeight-small: var(--salt-typography-fontWeight-regular);
683
- --salt-palette-text-notation-fontWeight-strong: var(--salt-typography-fontWeight-bold);
684
- }
685
- .salt-theme-next.salt-theme[data-action-font="Open Sans"] {
686
- --salt-palette-text-fontFamily-action: var(--salt-typography-fontFamily-openSans);
687
- --salt-palette-text-action-fontWeight: var(--salt-typography-fontWeight-semiBold);
688
- }
689
- .salt-theme-next.salt-theme[data-action-font=Amplitude] {
690
- --salt-palette-text-fontFamily-action: var(--salt-typography-fontFamily-amplitude);
691
- --salt-palette-text-action-fontWeight: var(--salt-typography-fontWeight-medium);
692
- }
693
-
694
- /* css/palette/warning-next.css */
695
- .salt-theme.salt-theme-next[data-mode=light] {
696
- --salt-palette-warning: var(--salt-color-orange-500);
697
- --salt-palette-warning-strong: var(--salt-color-orange-600);
698
- --salt-palette-warning-weak: var(--salt-color-orange-100);
699
- }
700
- .salt-theme.salt-theme-next[data-mode=dark] {
701
- --salt-palette-warning: var(--salt-color-orange-500);
702
- --salt-palette-warning-strong: var(--salt-color-orange-400);
703
- --salt-palette-warning-weak: var(--salt-color-orange-900);
704
- }
705
-
706
- /* css/characteristics/accent-next.css */
707
- .salt-theme.salt-theme-next {
708
- --salt-accent-background: var(--salt-palette-accent);
709
- --salt-accent-borderColor: var(--salt-palette-accent);
710
- --salt-accent-foreground: var(--salt-palette-foreground-primary-alt);
711
- }
712
-
713
- /* css/characteristics/actionable-next.css */
714
- .salt-theme.salt-theme-next {
715
- --salt-actionable-cta-foreground: var(--salt-palette-foreground-primary-alt);
716
- --salt-actionable-cta-foreground-hover: var(--salt-palette-foreground-primary-alt);
717
- --salt-actionable-cta-foreground-active: var(--salt-palette-foreground-primary-alt);
718
- --salt-actionable-cta-foreground-disabled: var(--salt-palette-foreground-primary-alt-disabled);
719
- --salt-actionable-cta-background: var(--salt-palette-accent);
720
- --salt-actionable-cta-background-hover: var(--salt-palette-accent-action-hover);
721
- --salt-actionable-cta-background-active: var(--salt-palette-accent-action-active);
722
- --salt-actionable-cta-background-disabled: var(--salt-palette-accent-disabled);
723
- --salt-actionable-cta-borderColor: var(--salt-palette-accent);
724
- --salt-actionable-cta-borderColor-hover: transparent;
725
- --salt-actionable-cta-borderColor-active: var(--salt-palette-accent);
726
- --salt-actionable-cta-borderColor-disabled: transparent;
727
- --salt-actionable-primary-foreground: var(--salt-palette-foreground-primary-alt);
728
- --salt-actionable-primary-foreground-hover: var(--salt-palette-foreground-primary-alt);
729
- --salt-actionable-primary-foreground-active: var(--salt-palette-foreground-primary-alt);
730
- --salt-actionable-primary-foreground-disabled: var(--salt-palette-foreground-primary-alt-disabled);
731
- --salt-actionable-primary-background: var(--salt-palette-neutral);
732
- --salt-actionable-primary-background-hover: var(--salt-palette-neutral-action-hover);
733
- --salt-actionable-primary-background-active: var(--salt-palette-neutral-action-active);
734
- --salt-actionable-primary-background-disabled: var(--salt-palette-neutral-disabled);
735
- --salt-actionable-primary-borderColor: var(--salt-palette-neutral);
736
- --salt-actionable-primary-borderColor-hover: transparent;
737
- --salt-actionable-primary-borderColor-active: var(--salt-palette-neutral);
738
- --salt-actionable-primary-borderColor-disabled: transparent;
739
- --salt-actionable-secondary-foreground: var(--salt-palette-foreground-primary);
740
- --salt-actionable-secondary-foreground-hover: var(--salt-palette-foreground-primary-alt);
741
- --salt-actionable-secondary-foreground-active: var(--salt-palette-foreground-primary-alt);
742
- --salt-actionable-secondary-foreground-disabled: var(--salt-palette-foreground-primary-disabled);
743
- --salt-actionable-secondary-background: transparent;
744
- --salt-actionable-secondary-background-hover: var(--salt-palette-neutral-action-hover);
745
- --salt-actionable-secondary-background-active: var(--salt-palette-neutral-action-active);
746
- --salt-actionable-secondary-background-disabled: transparent;
747
- --salt-actionable-secondary-borderColor: transparent;
748
- --salt-actionable-secondary-borderColor-hover: transparent;
749
- --salt-actionable-secondary-borderColor-active: var(--salt-palette-neutral);
750
- --salt-actionable-secondary-borderColor-disabled: transparent;
751
- }
752
-
753
- /* css/characteristics/category-next.css */
754
- .salt-theme.salt-theme-next {
755
- --salt-category-1-bold-foreground: var(--salt-palette-foreground-primary-alt);
756
- --salt-category-2-bold-foreground: var(--salt-palette-foreground-primary-alt);
757
- --salt-category-3-bold-foreground: var(--salt-palette-foreground-primary-alt);
758
- --salt-category-4-bold-foreground: var(--salt-palette-foreground-primary-alt);
759
- --salt-category-5-bold-foreground: var(--salt-palette-foreground-primary-alt);
760
- --salt-category-6-bold-foreground: var(--salt-palette-foreground-primary-alt);
761
- --salt-category-7-bold-foreground: var(--salt-palette-foreground-primary-alt);
762
- --salt-category-8-bold-foreground: var(--salt-palette-foreground-primary-alt);
763
- --salt-category-9-bold-foreground: var(--salt-palette-foreground-primary-alt);
764
- --salt-category-10-bold-foreground: var(--salt-palette-foreground-primary-alt);
765
- --salt-category-11-bold-foreground: var(--salt-palette-foreground-primary-alt);
766
- --salt-category-12-bold-foreground: var(--salt-palette-foreground-primary-alt);
767
- --salt-category-13-bold-foreground: var(--salt-palette-foreground-primary-alt);
768
- --salt-category-14-bold-foreground: var(--salt-palette-foreground-primary-alt);
769
- --salt-category-15-bold-foreground: var(--salt-palette-foreground-primary-alt);
770
- --salt-category-16-bold-foreground: var(--salt-palette-foreground-primary-alt);
771
- --salt-category-17-bold-foreground: var(--salt-palette-foreground-primary-alt);
772
- --salt-category-18-bold-foreground: var(--salt-palette-foreground-primary-alt);
773
- --salt-category-19-bold-foreground: var(--salt-palette-foreground-primary-alt);
774
- --salt-category-20-bold-foreground: var(--salt-palette-foreground-primary-alt);
775
- }
776
-
777
- /* css/characteristics/container-next.css */
778
- .salt-theme.salt-theme-next {
779
- --salt-container-primary-background: var(--salt-palette-background-primary);
780
- --salt-container-primary-background-disabled: var(--salt-palette-background-primary-disabled);
781
- --salt-container-primary-borderColor: var(--salt-palette-alpha);
782
- --salt-container-primary-borderColor-disabled: var(--salt-palette-alpha-weaker);
783
- --salt-container-secondary-background: var(--salt-palette-background-secondary);
784
- --salt-container-secondary-background-disabled: var(--salt-palette-background-secondary-disabled);
785
- --salt-container-secondary-borderColor: var(--salt-palette-alpha);
786
- --salt-container-secondary-borderColor-disabled: var(--salt-palette-alpha-weaker);
787
- --salt-container-tertiary-background: var(--salt-palette-background-tertiary);
788
- --salt-container-tertiary-background-disabled: var(--salt-palette-background-tertiary-disabled);
789
- --salt-container-tertiary-borderColor: var(--salt-palette-alpha);
790
- --salt-container-tertiary-borderColor-disabled: var(--salt-palette-alpha-weaker);
791
- }
792
-
793
- /* css/characteristics/content-next.css */
794
- .salt-theme.salt-theme-next {
795
- --salt-content-primary-foreground: var(--salt-palette-foreground-primary);
796
- --salt-content-primary-foreground-disabled: var(--salt-palette-foreground-primary-disabled);
797
- --salt-content-secondary-foreground: var(--salt-palette-foreground-secondary);
798
- --salt-content-secondary-foreground-disabled: var(--salt-palette-foreground-secondary-disabled);
799
- --salt-content-bold-foreground: var(--salt-palette-foreground-primary-alt);
800
- --salt-content-bold-foreground-disabled: var(--salt-palette-foreground-primary-alt-disabled);
801
- --salt-content-foreground-hover: var(--salt-palette-foreground-hover);
802
- --salt-content-foreground-active: var(--salt-palette-foreground-active);
803
- --salt-content-foreground-visited: var(--salt-palette-foreground-visited);
804
- --salt-content-foreground-highlight: var(--salt-palette-accent-weaker);
805
- }
806
-
807
- /* css/characteristics/editable-next.css */
808
- .salt-theme.salt-theme-next {
809
- --salt-editable-borderColor: var(--salt-palette-neutral);
810
- --salt-editable-borderColor-active: var(--salt-palette-accent-stronger);
811
- --salt-editable-borderColor-disabled: var(--salt-palette-neutral-disabled);
812
- --salt-editable-borderColor-hover: var(--salt-palette-accent);
813
- --salt-editable-borderColor-readonly: var(--salt-palette-neutral-readonly);
814
- --salt-editable-primary-background: var(--salt-palette-background-primary);
815
- --salt-editable-primary-background-active: var(--salt-palette-background-primary);
816
- --salt-editable-primary-background-disabled: var(--salt-palette-background-primary-disabled);
817
- --salt-editable-primary-background-hover: var(--salt-palette-background-primary);
818
- --salt-editable-primary-background-readonly: var(--salt-palette-alpha-none);
819
- --salt-editable-secondary-background: var(--salt-palette-background-secondary);
820
- --salt-editable-secondary-background-active: var(--salt-palette-background-secondary);
821
- --salt-editable-secondary-background-disabled: var(--salt-palette-background-secondary-disabled);
822
- --salt-editable-secondary-background-hover: var(--salt-palette-background-secondary);
823
- --salt-editable-secondary-background-readonly: var(--salt-palette-alpha-none);
824
- }
825
-
826
- /* css/characteristics/focused-next.css */
827
- .salt-theme.salt-theme-next {
828
- --salt-focused-outlineColor: var(--salt-palette-accent-stronger);
829
- }
830
-
831
- /* css/characteristics/navigable-next.css */
832
- .salt-theme.salt-theme-next {
833
- --salt-navigable-indicator-hover: var(--salt-palette-neutral);
834
- --salt-navigable-indicator-active: var(--salt-palette-accent);
835
- }
836
-
837
- /* css/characteristics/overlayable-next.css */
838
- .salt-theme.salt-theme-next {
839
- --salt-overlayable-background: var(--salt-palette-alpha-backdrop);
840
- --salt-overlayable-rangeSelection: var(--salt-palette-alpha-weak);
841
- }
842
-
843
- /* css/characteristics/selectable-next.css */
844
- .salt-theme.salt-theme-next {
845
- --salt-selectable-borderColor: var(--salt-palette-neutral);
846
- --salt-selectable-borderColor-hover: var(--salt-palette-accent-weak);
847
- --salt-selectable-borderColor-selected: var(--salt-palette-accent);
848
- --salt-selectable-borderColor-selectedDisabled: var(--salt-palette-accent-disabled);
849
- --salt-selectable-borderColor-disabled: var(--salt-palette-neutral-disabled);
850
- --salt-selectable-borderColor-readonly: var(--salt-palette-neutral-readonly);
851
- --salt-selectable-foreground: var(--salt-palette-neutral-strong);
852
- --salt-selectable-foreground-disabled: var(--salt-palette-neutral-strong-disabled);
853
- --salt-selectable-foreground-hover: var(--salt-palette-accent-weak);
854
- --salt-selectable-foreground-selected: var(--salt-palette-accent);
855
- --salt-selectable-foreground-selectedDisabled: var(--salt-palette-accent-disabled);
856
- --salt-selectable-background: var(--salt-palette-alpha-none);
857
- --salt-selectable-background-hover: var(--salt-palette-accent-weakest);
858
- --salt-selectable-background-selected: var(--salt-palette-accent-weaker);
859
- --salt-selectable-background-blurSelected: var(--salt-palette-neutral-weakest);
860
- --salt-selectable-background-disabled: var(--salt-palette-alpha-none);
861
- --salt-selectable-background-selectedDisabled: var(--salt-palette-accent-weaker-disabled);
862
- }
863
-
864
- /* css/characteristics/separable-next.css */
865
- .salt-theme.salt-theme-next {
866
- --salt-separable-primary-borderColor: var(--salt-palette-alpha-strong);
867
- --salt-separable-secondary-borderColor: var(--salt-palette-alpha);
868
- --salt-separable-tertiary-borderColor: var(--salt-palette-alpha-weak);
869
- }
870
-
871
- /* css/characteristics/status-next.css */
872
- .salt-theme.salt-theme-next {
873
- --salt-status-static-foreground: var(--salt-palette-foreground-secondary);
874
- --salt-status-negative-foreground: var(--salt-palette-negative);
875
- --salt-status-positive-foreground: var(--salt-palette-positive);
876
- --salt-status-info-foreground-decorative: var(--salt-palette-info);
877
- --salt-status-success-foreground-decorative: var(--salt-palette-positive);
878
- --salt-status-warning-foreground-decorative: var(--salt-palette-warning);
879
- --salt-status-error-foreground-decorative: var(--salt-palette-negative);
880
- --salt-status-info-foreground-informative: var(--salt-palette-info-strong);
881
- --salt-status-success-foreground-informative: var(--salt-palette-positive-strong);
882
- --salt-status-warning-foreground-informative: var(--salt-palette-warning-strong);
883
- --salt-status-error-foreground-informative: var(--salt-palette-negative-strong);
884
- --salt-status-info-borderColor: var(--salt-palette-info);
885
- --salt-status-success-borderColor: var(--salt-palette-positive);
886
- --salt-status-warning-borderColor: var(--salt-palette-warning);
887
- --salt-status-error-borderColor: var(--salt-palette-negative);
888
- --salt-status-info-background: var(--salt-palette-info-weak);
889
- --salt-status-success-background: var(--salt-palette-positive-weak);
890
- --salt-status-warning-background: var(--salt-palette-warning-weak);
891
- --salt-status-error-background: var(--salt-palette-negative-weak);
892
- --salt-status-info-bold-background: var(--salt-palette-info);
893
- --salt-status-error-bold-background: var(--salt-palette-negative);
894
- --salt-status-warning-bold-background: var(--salt-palette-warning);
895
- --salt-status-success-bold-background: var(--salt-palette-positive);
896
- --salt-status-success-background-selected: var(--salt-palette-positive-weak);
897
- --salt-status-warning-background-selected: var(--salt-palette-warning-weak);
898
- --salt-status-error-background-selected: var(--salt-palette-negative-weak);
899
- }
900
-
901
- /* css/characteristics/target-next.css */
902
- .salt-theme.salt-theme-next {
903
- --salt-target-background-hover: var(--salt-palette-accent);
904
- --salt-target-borderColor-hover: var(--salt-palette-accent-weakest);
905
- }
906
-
907
- /* css/characteristics/text-next.css */
908
- .salt-theme-next.salt-density-touch {
909
- --salt-text-display1-fontSize: 102px;
910
- --salt-text-display1-lineHeight: 133px;
911
- --salt-text-display2-fontSize: 84px;
912
- --salt-text-display2-lineHeight: 109px;
913
- --salt-text-display3-fontSize: 68px;
914
- --salt-text-display3-lineHeight: 88px;
915
- --salt-text-display4-fontSize: 54px;
916
- --salt-text-display4-lineHeight: 70px;
917
- }
918
- .salt-theme-next.salt-density-low {
919
- --salt-text-display1-fontSize: 84px;
920
- --salt-text-display1-lineHeight: 109px;
921
- --salt-text-display2-fontSize: 68px;
922
- --salt-text-display2-lineHeight: 88px;
923
- --salt-text-display3-fontSize: 54px;
924
- --salt-text-display3-lineHeight: 70px;
925
- --salt-text-display4-fontSize: 42px;
926
- --salt-text-display4-lineHeight: 55px;
927
- }
928
- .salt-theme-next.salt-density-medium {
929
- --salt-text-display1-fontSize: 68px;
930
- --salt-text-display1-lineHeight: 88px;
931
- --salt-text-display2-fontSize: 54px;
932
- --salt-text-display2-lineHeight: 70px;
933
- --salt-text-display3-fontSize: 42px;
934
- --salt-text-display3-lineHeight: 55px;
935
- --salt-text-display4-fontSize: 32px;
936
- --salt-text-display4-lineHeight: 42px;
937
- }
938
- .salt-theme-next.salt-density-high {
939
- --salt-text-display1-fontSize: 54px;
940
- --salt-text-display1-lineHeight: 70px;
941
- --salt-text-display2-fontSize: 42px;
942
- --salt-text-display2-lineHeight: 55px;
943
- --salt-text-display3-fontSize: 32px;
944
- --salt-text-display3-lineHeight: 42px;
945
- --salt-text-display4-fontSize: 24px;
946
- --salt-text-display4-lineHeight: 32px;
947
- }
948
-
949
- /* css/characteristics/track-next.css */
950
- .salt-theme.salt-theme-next {
951
- --salt-track-borderColor: var(--salt-palette-alpha);
952
- }
953
-
954
- /* css/theme-next.css */
1
+ @import url(foundations/alpha-next.css);
2
+ @import url(foundations/color-next.css);
3
+ @import url(foundations/curve-next.css);
4
+
5
+ @import url(palette/alpha-next.css);
6
+ @import url(palette/accent-next.css);
7
+ @import url(palette/background-next.css);
8
+ @import url(palette/corner-next.css);
9
+ @import url(palette/foreground-next.css);
10
+ @import url(palette/info-next.css);
11
+ @import url(palette/negative-next.css);
12
+ @import url(palette/neutral-next.css);
13
+ @import url(palette/positive-next.css);
14
+ @import url(palette/text-next.css);
15
+ @import url(palette/warning-next.css);
16
+
17
+ @import url(characteristics/accent-next.css);
18
+ @import url(characteristics/actionable-next.css);
19
+ @import url(characteristics/category-next.css);
20
+ @import url(characteristics/container-next.css);
21
+ @import url(characteristics/content-next.css);
22
+ @import url(characteristics/editable-next.css);
23
+ @import url(characteristics/focused-next.css);
24
+ @import url(characteristics/navigable-next.css);
25
+ @import url(characteristics/overlayable-next.css);
26
+ @import url(characteristics/selectable-next.css);
27
+ @import url(characteristics/separable-next.css);
28
+ @import url(characteristics/status-next.css);
29
+ @import url(characteristics/target-next.css);
30
+ @import url(characteristics/text-next.css);
31
+ @import url(characteristics/track-next.css);