@salt-ds/theme 0.0.0-snapshot-20240725145339 → 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/css/characteristics/accent-next.css +5 -0
  3. package/css/characteristics/accent.css +5 -0
  4. package/css/characteristics/actionable-next.css +41 -0
  5. package/css/characteristics/actionable.css +47 -0
  6. package/css/characteristics/category-next.css +22 -0
  7. package/css/characteristics/category.css +141 -0
  8. package/css/characteristics/container-next.css +16 -0
  9. package/css/characteristics/container.css +18 -0
  10. package/css/characteristics/content-next.css +14 -0
  11. package/css/characteristics/content.css +15 -0
  12. package/css/characteristics/draggable.css +10 -0
  13. package/css/characteristics/editable-next.css +19 -0
  14. package/css/characteristics/editable.css +33 -0
  15. package/css/characteristics/focused-next.css +3 -0
  16. package/css/characteristics/focused.css +21 -0
  17. package/css/characteristics/navigable-next.css +6 -0
  18. package/css/characteristics/navigable.css +21 -0
  19. package/css/characteristics/overlayable-next.css +4 -0
  20. package/css/characteristics/overlayable.css +12 -0
  21. package/css/characteristics/selectable-next.css +20 -0
  22. package/css/characteristics/selectable.css +31 -0
  23. package/css/characteristics/separable-next.css +5 -0
  24. package/css/characteristics/separable.css +7 -0
  25. package/css/characteristics/status-next.css +34 -0
  26. package/css/characteristics/status.css +34 -0
  27. package/css/characteristics/target-next.css +4 -0
  28. package/css/characteristics/target.css +10 -0
  29. package/css/characteristics/text-next.css +56 -0
  30. package/css/characteristics/text.css +226 -0
  31. package/css/characteristics/track-next.css +3 -0
  32. package/css/characteristics/track.css +8 -0
  33. package/css/deprecated/characteristics.css +186 -0
  34. package/css/deprecated/fade.css +8 -0
  35. package/css/deprecated/foundations.css +107 -0
  36. package/css/deprecated/palette.css +159 -0
  37. package/css/foundations/alpha-next.css +48 -0
  38. package/css/foundations/animation.css +155 -0
  39. package/css/foundations/color-next.css +148 -0
  40. package/css/foundations/color.css +297 -0
  41. package/css/foundations/curve-next.css +31 -0
  42. package/css/foundations/duration.css +6 -0
  43. package/css/foundations/fade.css +72 -0
  44. package/css/foundations/opacity.css +9 -0
  45. package/css/foundations/shadow.css +23 -0
  46. package/css/foundations/size.css +51 -0
  47. package/css/foundations/spacing.css +31 -0
  48. package/css/foundations/typography.css +12 -0
  49. package/css/foundations/zindex.css +14 -0
  50. package/css/global.css +10 -3
  51. package/css/palette/accent-next.css +63 -0
  52. package/css/palette/accent.css +11 -0
  53. package/css/palette/alpha-next.css +19 -0
  54. package/css/palette/background-next.css +16 -0
  55. package/css/palette/categorical.css +163 -0
  56. package/css/palette/corner-next.css +12 -0
  57. package/css/palette/error.css +17 -0
  58. package/css/palette/foreground-next.css +22 -0
  59. package/css/palette/info-next.css +10 -0
  60. package/css/palette/info.css +15 -0
  61. package/css/palette/interact.css +91 -0
  62. package/css/palette/navigate.css +17 -0
  63. package/css/palette/negative-next.css +10 -0
  64. package/css/palette/negative.css +7 -0
  65. package/css/palette/neutral-next.css +34 -0
  66. package/css/palette/neutral.css +51 -0
  67. package/css/palette/opacity.css +9 -0
  68. package/css/palette/positive-next.css +10 -0
  69. package/css/palette/positive.css +7 -0
  70. package/css/palette/success.css +17 -0
  71. package/css/palette/text-next.css +50 -0
  72. package/css/palette/text.css +24 -0
  73. package/css/palette/warning-next.css +10 -0
  74. package/css/palette/warning.css +17 -0
  75. package/css/theme-next.css +31 -954
  76. package/css/theme.css +55 -1954
  77. package/index.css +2 -1985
  78. package/package.json +2 -2
  79. package/LICENSE +0 -201
package/index.css CHANGED
@@ -1,1985 +1,2 @@
1
- /* css/global.css */
2
- .salt-theme {
3
- color: var(--salt-content-primary-foreground);
4
- font-family: var(--salt-text-fontFamily);
5
- font-size: var(--salt-text-fontSize);
6
- letter-spacing: var(--salt-text-letterSpacing);
7
- line-height: var(--salt-text-lineHeight);
8
- }
9
- .salt-theme ::selection {
10
- background: var(--salt-content-foreground-highlight);
11
- }
12
- .salt-theme[data-mode=light] {
13
- color-scheme: light;
14
- }
15
- .salt-theme[data-mode=dark] {
16
- color-scheme: dark;
17
- }
18
- .salt-visuallyHidden {
19
- position: absolute;
20
- height: 1px;
21
- width: 1px;
22
- padding: 0;
23
- margin: -1px;
24
- overflow: hidden;
25
- clip: rect(0, 0, 0, 0);
26
- white-space: nowrap;
27
- border-width: 0;
28
- }
29
-
30
- /* css/foundations/animation.css */
31
- .salt-density-touch,
32
- .salt-density-low,
33
- .salt-density-medium,
34
- .salt-density-high {
35
- --salt-animation-opacity-start: 0;
36
- --salt-animation-opacity-end: 1;
37
- --salt-animation-scale-start: 0;
38
- --salt-animation-scale-end: 1;
39
- --salt-animation-transform-start: 100%;
40
- --salt-animation-transform-end: 0;
41
- --salt-animation-duration: var(--salt-duration-perceptible);
42
- --salt-animation-timing-function: ease-in-out;
43
- --salt-animation-slide-in-top: slide-in-top var(--salt-animation-duration) var(--salt-animation-timing-function);
44
- --salt-animation-slide-in-left: slide-in-left var(--salt-animation-duration) var(--salt-animation-timing-function);
45
- --salt-animation-slide-in-right: slide-in-right var(--salt-animation-duration) var(--salt-animation-timing-function);
46
- --salt-animation-slide-in-bottom: slide-in-bottom var(--salt-animation-duration) var(--salt-animation-timing-function);
47
- --salt-animation-slide-out-top: slide-out-top var(--salt-animation-duration) var(--salt-animation-timing-function) both;
48
- --salt-animation-slide-out-left: slide-out-left var(--salt-animation-duration) var(--salt-animation-timing-function) both;
49
- --salt-animation-slide-out-right: slide-out-right var(--salt-animation-duration) var(--salt-animation-timing-function) both;
50
- --salt-animation-slide-out-bottom: slide-out-bottom var(--salt-animation-duration) var(--salt-animation-timing-function) both;
51
- --salt-animation-fade-in-back: fade-in-back var(--salt-animation-duration) var(--salt-animation-timing-function);
52
- --salt-animation-fade-in-forward: fade-in-forward var(--salt-animation-duration) var(--salt-animation-timing-function);
53
- --salt-animation-fade-in-center: fade-in-center var(--salt-animation-duration) var(--salt-animation-timing-function);
54
- --salt-animation-fade-out-back: fade-out-back var(--salt-animation-duration) ease-in-out both;
55
- }
56
- @keyframes slide-in-top {
57
- 0% {
58
- opacity: var(--salt-animation-opacity-start);
59
- transform: translateY(var(--salt-animation-transform-start));
60
- }
61
- 100% {
62
- opacity: var(--salt-animation-opacity-end);
63
- transform: translateY(var(--salt-animation-transform-end));
64
- }
65
- }
66
- @keyframes slide-out-top {
67
- 0% {
68
- opacity: var(--salt-animation-opacity-end);
69
- transform: translateY(var(--salt-animation-transform-end));
70
- }
71
- 100% {
72
- opacity: var(--salt-animation-opacity-start);
73
- transform: translateY(var(--salt-animation-transform-start));
74
- }
75
- }
76
- @keyframes slide-in-left {
77
- 0% {
78
- opacity: var(--salt-animation-opacity-start);
79
- transform: translateX(calc(-1 * var(--salt-animation-transform-start)));
80
- }
81
- 100% {
82
- opacity: var(--salt-animation-opacity-end);
83
- transform: translateX(var(--salt-animation-transform-end));
84
- }
85
- }
86
- @keyframes slide-out-left {
87
- 0% {
88
- opacity: var(--salt-animation-opacity-end);
89
- transform: translateX(var(--salt-animation-transform-end));
90
- }
91
- 100% {
92
- opacity: var(--salt-animation-opacity-start);
93
- transform: translateX(calc(-1 * var(--salt-animation-transform-start)));
94
- }
95
- }
96
- @keyframes slide-in-right {
97
- 0% {
98
- opacity: var(--salt-animation-opacity-start);
99
- transform: translateX(var(--salt-animation-transform-start));
100
- }
101
- 100% {
102
- opacity: var(--salt-animation-opacity-end);
103
- transform: translateX(var(--salt-animation-transform-end));
104
- }
105
- }
106
- @keyframes slide-out-right {
107
- 0% {
108
- opacity: var(--salt-animation-opacity-end);
109
- transform: translateX(var(--salt-animation-transform-end));
110
- }
111
- 100% {
112
- opacity: var(--salt-animation-opacity-start);
113
- transform: translateX(var(--salt-animation-transform-start));
114
- }
115
- }
116
- @keyframes slide-in-bottom {
117
- 0% {
118
- opacity: var(--salt-animation-opacity-start);
119
- transform: translateY(calc(-1 * var(--salt-animation-transform-start)));
120
- }
121
- 100% {
122
- opacity: var(--salt-animation-opacity-end);
123
- transform: translateY(var(--salt-animation-transform-end));
124
- }
125
- }
126
- @keyframes slide-out-bottom {
127
- 0% {
128
- opacity: var(--salt-animation-opacity-end);
129
- transform: translateY(var(--salt-animation-transform-end));
130
- }
131
- 100% {
132
- opacity: var(--salt-animation-opacity-start);
133
- transform: translateY(calc(-1 * var(--salt-animation-transform-start)));
134
- }
135
- }
136
- @keyframes fade-in-back {
137
- 0% {
138
- --salt-animation-scale-start: 1.4;
139
- opacity: var(--salt-animation-opacity-start);
140
- transform: scale(var(--salt-animation-scale-start));
141
- }
142
- 100% {
143
- opacity: var(--salt-animation-opacity-end);
144
- transform: scale(var(--salt-animation-scale-end));
145
- }
146
- }
147
- @keyframes fade-in-forward {
148
- 0% {
149
- --salt-animation-scale-start: 0.6;
150
- opacity: var(--salt-animation-opacity-start);
151
- transform: scale(var(--salt-animation-scale-start));
152
- }
153
- 100% {
154
- opacity: var(--salt-animation-opacity-end);
155
- transform: scale(var(--salt-animation-scale-end));
156
- }
157
- }
158
- @keyframes fade-in-center {
159
- 0% {
160
- opacity: var(--salt-animation-opacity-start);
161
- }
162
- 100% {
163
- opacity: var(--salt-animation-opacity-end);
164
- }
165
- }
166
- @keyframes fade-out-back {
167
- 0% {
168
- opacity: var(--salt-animation-opacity-end);
169
- }
170
- 100% {
171
- opacity: var(--salt-animation-opacity-start);
172
- }
173
- }
174
-
175
- /* css/foundations/color.css */
176
- .salt-theme {
177
- --salt-color-white: rgb(255, 255, 255);
178
- --salt-color-black: rgb(0, 0, 0);
179
- --salt-color-red-10: rgb(255, 227, 224);
180
- --salt-color-red-20: rgb(255, 207, 201);
181
- --salt-color-red-30: rgb(255, 187, 178);
182
- --salt-color-red-40: rgb(255, 167, 156);
183
- --salt-color-red-50: rgb(255, 148, 133);
184
- --salt-color-red-100: rgb(255, 128, 111);
185
- --salt-color-red-200: rgb(255, 108, 88);
186
- --salt-color-red-300: rgb(255, 89, 66);
187
- --salt-color-red-400: rgb(237, 65, 42);
188
- --salt-color-red-500: rgb(227, 43, 22);
189
- --salt-color-red-600: rgb(196, 32, 16);
190
- --salt-color-red-700: rgb(166, 21, 11);
191
- --salt-color-red-800: rgb(136, 10, 5);
192
- --salt-color-red-900: rgb(65, 37, 34);
193
- --salt-color-orange-10: rgb(255, 232, 191);
194
- --salt-color-orange-20: rgb(254, 223, 166);
195
- --salt-color-orange-30: rgb(254, 214, 142);
196
- --salt-color-orange-40: rgb(254, 205, 118);
197
- --salt-color-orange-50: rgb(254, 197, 94);
198
- --salt-color-orange-100: rgb(250, 181, 81);
199
- --salt-color-orange-200: rgb(246, 165, 68);
200
- --salt-color-orange-300: rgb(242, 149, 56);
201
- --salt-color-orange-400: rgb(238, 133, 43);
202
- --salt-color-orange-500: rgb(234, 115, 25);
203
- --salt-color-orange-600: rgb(224, 101, 25);
204
- --salt-color-orange-700: rgb(214, 85, 19);
205
- --salt-color-orange-800: rgb(204, 68, 13);
206
- --salt-color-orange-850: rgb(194, 52, 7);
207
- --salt-color-orange-900: rgb(54, 44, 36);
208
- --salt-color-green-10: rgb(209, 244, 201);
209
- --salt-color-green-20: rgb(184, 232, 182);
210
- --salt-color-green-30: rgb(160, 221, 164);
211
- --salt-color-green-40: rgb(136, 210, 145);
212
- --salt-color-green-50: rgb(112, 199, 127);
213
- --salt-color-green-100: rgb(93, 189, 116);
214
- --salt-color-green-200: rgb(77, 180, 105);
215
- --salt-color-green-300: rgb(60, 171, 96);
216
- --salt-color-green-400: rgb(48, 156, 90);
217
- --salt-color-green-500: rgb(36, 135, 75);
218
- --salt-color-green-600: rgb(24, 114, 61);
219
- --salt-color-green-700: rgb(12, 93, 46);
220
- --salt-color-green-800: rgb(1, 73, 32);
221
- --salt-color-green-900: rgb(35, 52, 43);
222
- --salt-color-teal-10: rgb(218, 240, 240);
223
- --salt-color-teal-20: rgb(199, 232, 232);
224
- --salt-color-teal-30: rgb(180, 224, 225);
225
- --salt-color-teal-40: rgb(162, 217, 218);
226
- --salt-color-teal-50: rgb(141, 205, 209);
227
- --salt-color-teal-100: rgb(123, 193, 200);
228
- --salt-color-teal-200: rgb(99, 181, 192);
229
- --salt-color-teal-300: rgb(73, 160, 172);
230
- --salt-color-teal-400: rgb(48, 149, 166);
231
- --salt-color-teal-500: rgb(0, 130, 151);
232
- --salt-color-teal-600: rgb(27, 107, 133);
233
- --salt-color-teal-700: rgb(0, 85, 113);
234
- --salt-color-teal-800: rgb(1, 65, 86);
235
- --salt-color-teal-900: rgb(0, 49, 76);
236
- --salt-color-blue-10: rgb(203, 231, 249);
237
- --salt-color-blue-20: rgb(183, 222, 246);
238
- --salt-color-blue-30: rgb(164, 213, 244);
239
- --salt-color-blue-40: rgb(144, 204, 242);
240
- --salt-color-blue-50: rgb(125, 195, 240);
241
- --salt-color-blue-100: rgb(100, 177, 228);
242
- --salt-color-blue-200: rgb(75, 159, 216);
243
- --salt-color-blue-300: rgb(51, 141, 205);
244
- --salt-color-blue-400: rgb(46, 132, 198);
245
- --salt-color-blue-500: rgb(38, 112, 169);
246
- --salt-color-blue-600: rgb(21, 92, 147);
247
- --salt-color-blue-700: rgb(0, 71, 123);
248
- --salt-color-blue-800: rgb(39, 60, 77);
249
- --salt-color-blue-900: rgb(35, 47, 56);
250
- --salt-color-purple-10: rgb(249, 224, 247);
251
- --salt-color-purple-20: rgb(247, 212, 244);
252
- --salt-color-purple-30: rgb(245, 201, 241);
253
- --salt-color-purple-40: rgb(243, 189, 238);
254
- --salt-color-purple-50: rgb(241, 178, 235);
255
- --salt-color-purple-100: rgb(223, 156, 225);
256
- --salt-color-purple-200: rgb(205, 135, 215);
257
- --salt-color-purple-300: rgb(192, 116, 203);
258
- --salt-color-purple-400: rgb(169, 97, 181);
259
- --salt-color-purple-500: rgb(150, 78, 162);
260
- --salt-color-purple-600: rgb(129, 60, 141);
261
- --salt-color-purple-700: rgb(103, 46, 122);
262
- --salt-color-purple-800: rgb(83, 37, 109);
263
- --salt-color-purple-900: rgb(59, 16, 84);
264
- --salt-color-gray-10: rgb(242, 244, 246);
265
- --salt-color-gray-20: rgb(234, 237, 239);
266
- --salt-color-gray-30: rgb(224, 228, 233);
267
- --salt-color-gray-40: rgb(217, 221, 227);
268
- --salt-color-gray-50: rgb(206, 210, 217);
269
- --salt-color-gray-60: rgb(197, 201, 208);
270
- --salt-color-gray-70: rgb(180, 183, 190);
271
- --salt-color-gray-80: rgb(159, 163, 170);
272
- --salt-color-gray-90: rgb(132, 135, 142);
273
- --salt-color-gray-100: rgb(116, 119, 127);
274
- --salt-color-gray-200: rgb(97, 101, 110);
275
- --salt-color-gray-300: rgb(76, 80, 91);
276
- --salt-color-gray-400: rgb(68, 72, 79);
277
- --salt-color-gray-500: rgb(59, 63, 70);
278
- --salt-color-gray-600: rgb(47, 49, 54);
279
- --salt-color-gray-700: rgb(42, 44, 47);
280
- --salt-color-gray-800: rgb(36, 37, 38);
281
- --salt-color-gray-900: rgb(22, 22, 22);
282
- --salt-color-cobalt-100: rgb(237, 244, 255);
283
- --salt-color-cobalt-200: rgb(198, 211, 239);
284
- --salt-color-cobalt-300: rgb(159, 179, 223);
285
- --salt-color-cobalt-400: rgb(118, 148, 207);
286
- --salt-color-cobalt-500: rgb(70, 118, 191);
287
- --salt-color-cobalt-600: rgb(53, 95, 161);
288
- --salt-color-cobalt-700: rgb(36, 72, 133);
289
- --salt-color-cobalt-800: rgb(19, 51, 105);
290
- --salt-color-cobalt-900: rgb(0, 31, 79);
291
- --salt-color-cider-100: rgb(255, 235, 217);
292
- --salt-color-cider-200: rgb(255, 201, 158);
293
- --salt-color-cider-300: rgb(242, 172, 116);
294
- --salt-color-cider-400: rgb(219, 138, 72);
295
- --salt-color-cider-500: rgb(171, 101, 40);
296
- --salt-color-cider-600: rgb(143, 82, 31);
297
- --salt-color-cider-700: rgb(116, 64, 21);
298
- --salt-color-cider-800: rgb(90, 47, 13);
299
- --salt-color-cider-900: rgb(66, 31, 0);
300
- --salt-color-plum-100: rgb(245, 224, 255);
301
- --salt-color-plum-200: rgb(230, 185, 250);
302
- --salt-color-plum-300: rgb(209, 148, 235);
303
- --salt-color-plum-400: rgb(188, 115, 222);
304
- --salt-color-plum-500: rgb(159, 85, 194);
305
- --salt-color-plum-600: rgb(131, 67, 161);
306
- --salt-color-plum-700: rgb(105, 50, 130);
307
- --salt-color-plum-800: rgb(79, 34, 100);
308
- --salt-color-plum-900: rgb(55, 18, 71);
309
- --salt-color-aqua-100: rgb(220, 247, 247);
310
- --salt-color-aqua-200: rgb(177, 229, 229);
311
- --salt-color-aqua-300: rgb(135, 200, 201);
312
- --salt-color-aqua-400: rgb(90, 171, 173);
313
- --salt-color-aqua-500: rgb(42, 130, 133);
314
- --salt-color-aqua-600: rgb(31, 109, 111);
315
- --salt-color-aqua-700: rgb(19, 88, 90);
316
- --salt-color-aqua-800: rgb(8, 68, 70);
317
- --salt-color-aqua-900: rgb(0, 49, 51);
318
- --salt-color-slate-100: rgb(225, 232, 247);
319
- --salt-color-slate-200: rgb(194, 202, 221);
320
- --salt-color-slate-300: rgb(164, 173, 196);
321
- --salt-color-slate-400: rgb(134, 145, 172);
322
- --salt-color-slate-500: rgb(105, 118, 148);
323
- --salt-color-slate-600: rgb(84, 95, 122);
324
- --salt-color-slate-700: rgb(64, 73, 97);
325
- --salt-color-slate-800: rgb(44, 53, 74);
326
- --salt-color-slate-900: rgb(26, 33, 51);
327
- --salt-color-rose-100: rgb(255, 227, 249);
328
- --salt-color-rose-200: rgb(250, 190, 237);
329
- --salt-color-rose-300: rgb(229, 154, 212);
330
- --salt-color-rose-400: rgb(209, 117, 189);
331
- --salt-color-rose-500: rgb(176, 86, 158);
332
- --salt-color-rose-600: rgb(146, 67, 130);
333
- --salt-color-rose-700: rgb(118, 50, 104);
334
- --salt-color-rose-800: rgb(90, 32, 78);
335
- --salt-color-rose-900: rgb(64, 16, 54);
336
- --salt-color-olive-100: rgb(234, 240, 223);
337
- --salt-color-olive-200: rgb(210, 222, 184);
338
- --salt-color-olive-300: rgb(180, 194, 149);
339
- --salt-color-olive-400: rgb(149, 166, 113);
340
- --salt-color-olive-500: rgb(109, 124, 77);
341
- --salt-color-olive-600: rgb(88, 103, 58);
342
- --salt-color-olive-700: rgb(68, 83, 39);
343
- --salt-color-olive-800: rgb(49, 64, 21);
344
- --salt-color-olive-900: rgb(31, 46, 0);
345
- --salt-color-salmon-100: rgb(255, 232, 233);
346
- --salt-color-salmon-200: rgb(255, 194, 194);
347
- --salt-color-salmon-300: rgb(240, 155, 153);
348
- --salt-color-salmon-400: rgb(222, 120, 120);
349
- --salt-color-salmon-500: rgb(189, 85, 88);
350
- --salt-color-salmon-600: rgb(154, 64, 67);
351
- --salt-color-salmon-700: rgb(121, 44, 48);
352
- --salt-color-salmon-800: rgb(89, 25, 29);
353
- --salt-color-salmon-900: rgb(59, 6, 8);
354
- --salt-color-indigo-100: rgb(231, 227, 255);
355
- --salt-color-indigo-200: rgb(208, 194, 252);
356
- --salt-color-indigo-300: rgb(180, 162, 242);
357
- --salt-color-indigo-400: rgb(149, 129, 229);
358
- --salt-color-indigo-500: rgb(120, 104, 206);
359
- --salt-color-indigo-600: rgb(98, 85, 170);
360
- --salt-color-indigo-700: rgb(77, 66, 135);
361
- --salt-color-indigo-800: rgb(57, 49, 102);
362
- --salt-color-indigo-900: rgb(38, 32, 71);
363
- --salt-color-jade-100: rgb(225, 245, 230);
364
- --salt-color-jade-200: rgb(179, 229, 187);
365
- --salt-color-jade-300: rgb(137, 201, 146);
366
- --salt-color-jade-400: rgb(92, 173, 106);
367
- --salt-color-jade-500: rgb(45, 133, 67);
368
- --salt-color-jade-600: rgb(33, 111, 53);
369
- --salt-color-jade-700: rgb(21, 90, 39);
370
- --salt-color-jade-800: rgb(8, 70, 26);
371
- --salt-color-jade-900: rgb(0, 51, 13);
372
- --salt-color-citrine-100: rgb(255, 249, 217);
373
- --salt-color-citrine-200: rgb(240, 225, 165);
374
- --salt-color-citrine-300: rgb(209, 189, 115);
375
- --salt-color-citrine-400: rgb(178, 156, 66);
376
- --salt-color-citrine-500: rgb(135, 116, 16);
377
- --salt-color-citrine-600: rgb(114, 98, 12);
378
- --salt-color-citrine-700: rgb(94, 80, 9);
379
- --salt-color-citrine-800: rgb(74, 63, 6);
380
- --salt-color-citrine-900: rgb(51, 43, 0);
381
- --salt-color-autumn-100: rgb(255, 233, 217);
382
- --salt-color-autumn-200: rgb(255, 197, 161);
383
- --salt-color-autumn-300: rgb(242, 163, 114);
384
- --salt-color-autumn-400: rgb(222, 126, 64);
385
- --salt-color-autumn-500: rgb(189, 91, 21);
386
- --salt-color-autumn-600: rgb(153, 73, 18);
387
- --salt-color-autumn-700: rgb(119, 55, 14);
388
- --salt-color-autumn-800: rgb(86, 39, 10);
389
- --salt-color-autumn-900: rgb(56, 23, 0);
390
- --salt-color-lavender-100: rgb(250, 235, 250);
391
- --salt-color-lavender-200: rgb(237, 199, 237);
392
- --salt-color-lavender-300: rgb(212, 167, 212);
393
- --salt-color-lavender-400: rgb(186, 134, 186);
394
- --salt-color-lavender-500: rgb(148, 102, 148);
395
- --salt-color-lavender-600: rgb(126, 80, 126);
396
- --salt-color-lavender-700: rgb(105, 58, 105);
397
- --salt-color-lavender-800: rgb(84, 37, 84);
398
- --salt-color-lavender-900: rgb(64, 15, 64);
399
- --salt-color-ocean-100: rgb(227, 251, 255);
400
- --salt-color-ocean-200: rgb(180, 229, 240);
401
- --salt-color-ocean-300: rgb(131, 197, 212);
402
- --salt-color-ocean-400: rgb(80, 167, 186);
403
- --salt-color-ocean-500: rgb(0, 128, 148);
404
- --salt-color-ocean-600: rgb(0, 106, 122);
405
- --salt-color-ocean-700: rgb(0, 84, 97);
406
- --salt-color-ocean-800: rgb(0, 64, 74);
407
- --salt-color-ocean-900: rgb(0, 44, 51);
408
- --salt-color-smoke-100: rgb(242, 245, 250);
409
- --salt-color-smoke-200: rgb(208, 211, 216);
410
- --salt-color-smoke-300: rgb(176, 179, 184);
411
- --salt-color-smoke-400: rgb(144, 147, 152);
412
- --salt-color-smoke-500: rgb(114, 117, 122);
413
- --salt-color-smoke-600: rgb(93, 96, 101);
414
- --salt-color-smoke-700: rgb(73, 76, 81);
415
- --salt-color-smoke-800: rgb(53, 56, 61);
416
- --salt-color-smoke-900: rgb(35, 38, 43);
417
- --salt-color-fuchsia-100: rgb(255, 232, 247);
418
- --salt-color-fuchsia-200: rgb(255, 191, 229);
419
- --salt-color-fuchsia-300: rgb(240, 151, 203);
420
- --salt-color-fuchsia-400: rgb(222, 109, 178);
421
- --salt-color-fuchsia-500: rgb(194, 71, 149);
422
- --salt-color-fuchsia-600: rgb(167, 54, 125);
423
- --salt-color-fuchsia-700: rgb(140, 37, 101);
424
- --salt-color-fuchsia-800: rgb(114, 19, 79);
425
- --salt-color-fuchsia-900: rgb(89, 0, 57);
426
- --salt-color-lime-100: rgb(239, 245, 220);
427
- --salt-color-lime-200: rgb(215, 227, 168);
428
- --salt-color-lime-300: rgb(182, 196, 120);
429
- --salt-color-lime-400: rgb(146, 166, 71);
430
- --salt-color-lime-500: rgb(102, 125, 21);
431
- --salt-color-lime-600: rgb(85, 106, 16);
432
- --salt-color-lime-700: rgb(69, 87, 11);
433
- --salt-color-lime-800: rgb(53, 68, 6);
434
- --salt-color-lime-900: rgb(36, 46, 0);
435
- --salt-color-fur-100: rgb(255, 244, 235);
436
- --salt-color-fur-200: rgb(245, 214, 191);
437
- --salt-color-fur-300: rgb(219, 178, 147);
438
- --salt-color-fur-400: rgb(194, 144, 107);
439
- --salt-color-fur-500: rgb(153, 106, 69);
440
- --salt-color-fur-600: rgb(130, 85, 52);
441
- --salt-color-fur-700: rgb(107, 65, 36);
442
- --salt-color-fur-800: rgb(85, 46, 20);
443
- --salt-color-fur-900: rgb(64, 28, 0);
444
- --salt-color-violet-100: rgb(237, 239, 255);
445
- --salt-color-violet-200: rgb(202, 203, 252);
446
- --salt-color-violet-300: rgb(167, 169, 235);
447
- --salt-color-violet-400: rgb(134, 139, 219);
448
- --salt-color-violet-500: rgb(99, 110, 191);
449
- --salt-color-violet-600: rgb(81, 90, 159);
450
- --salt-color-violet-700: rgb(63, 71, 128);
451
- --salt-color-violet-800: rgb(47, 53, 99);
452
- --salt-color-violet-900: rgb(31, 36, 71);
453
- --salt-color-forest-100: rgb(237, 250, 245);
454
- --salt-color-forest-200: rgb(188, 232, 211);
455
- --salt-color-forest-300: rgb(141, 204, 174);
456
- --salt-color-forest-400: rgb(91, 176, 136);
457
- --salt-color-forest-500: rgb(35, 133, 94);
458
- --salt-color-forest-600: rgb(25, 111, 77);
459
- --salt-color-forest-700: rgb(15, 90, 61);
460
- --salt-color-forest-800: rgb(6, 70, 46);
461
- --salt-color-forest-900: rgb(0, 51, 31);
462
- }
463
-
464
- /* css/foundations/duration.css */
465
- .salt-theme {
466
- --salt-duration-instant: 0ms;
467
- --salt-duration-perceptible: 300ms;
468
- --salt-duration-notable: 1000ms;
469
- --salt-duration-cutoff: 10000ms;
470
- }
471
-
472
- /* css/foundations/fade.css */
473
- .salt-theme {
474
- --salt-color-blue-100-fade-foreground: rgba(100, 177, 228, var(--salt-palette-opacity-disabled));
475
- --salt-color-blue-500-fade-foreground: rgba(38, 112, 169, var(--salt-palette-opacity-disabled));
476
- --salt-color-blue-600-fade-foreground: rgba(21, 92, 147, var(--salt-palette-opacity-disabled));
477
- --salt-color-gray-200-fade-foreground: rgba(97, 101, 110, var(--salt-palette-opacity-disabled));
478
- --salt-color-gray-70-fade-foreground: rgba(180, 183, 190, var(--salt-palette-opacity-disabled));
479
- --salt-color-gray-90-fade-foreground: rgba(132, 135, 142, var(--salt-palette-opacity-disabled));
480
- --salt-color-gray-900-fade-foreground: rgba(22, 22, 22, var(--salt-palette-opacity-disabled));
481
- --salt-color-green-300-fade-foreground: rgba(60, 171, 96, var(--salt-palette-opacity-disabled));
482
- --salt-color-green-400-fade-foreground: rgba(48, 156, 90, var(--salt-palette-opacity-disabled));
483
- --salt-color-green-500-fade-foreground: rgba(36, 135, 75, var(--salt-palette-opacity-disabled));
484
- --salt-color-green-700-fade-foreground: rgba(12, 93, 46, var(--salt-palette-opacity-disabled));
485
- --salt-color-red-300-fade-foreground: rgba(255, 89, 66, var(--salt-palette-opacity-disabled));
486
- --salt-color-red-500-fade-foreground: rgba(227, 43, 22, var(--salt-palette-opacity-disabled));
487
- --salt-color-red-700-fade-foreground: rgba(166, 21, 11, var(--salt-palette-opacity-disabled));
488
- --salt-color-white-fade-foreground: rgba(255, 255, 255, var(--salt-palette-opacity-disabled));
489
- --salt-color-blue-500-fade-border: rgba(38, 112, 169, var(--salt-palette-opacity-disabled));
490
- --salt-color-gray-50-fade-border: rgba(206, 210, 217, var(--salt-palette-opacity-disabled));
491
- --salt-color-gray-60-fade-border: rgba(197, 201, 208, var(--salt-palette-opacity-disabled));
492
- --salt-color-gray-90-fade-border: rgba(132, 135, 142, var(--salt-palette-opacity-disabled));
493
- --salt-color-gray-200-fade-border: rgba(97, 101, 110, var(--salt-palette-opacity-disabled));
494
- --salt-color-gray-300-fade-border: rgba(76, 80, 91, var(--salt-palette-opacity-disabled));
495
- --salt-color-green-400-fade-border: rgba(48, 156, 90, var(--salt-palette-opacity-disabled));
496
- --salt-color-green-500-fade-border: rgba(36, 135, 75, var(--salt-palette-opacity-disabled));
497
- --salt-color-orange-400-fade-border: rgba(238, 133, 43, var(--salt-palette-opacity-disabled));
498
- --salt-color-orange-500-fade-border: rgba(234, 115, 25, var(--salt-palette-opacity-disabled));
499
- --salt-color-orange-600-fade-border: rgba(224, 101, 25, var(--salt-palette-opacity-disabled));
500
- --salt-color-orange-700-fade-border: rgba(214, 85, 19, var(--salt-palette-opacity-disabled));
501
- --salt-color-red-500-fade-border: rgba(227, 43, 22, var(--salt-palette-opacity-disabled));
502
- --salt-color-gray-90-fade-border-readonly: rgba(132, 135, 142, var(--salt-palette-opacity-border-readonly));
503
- --salt-color-gray-200-fade-border-readonly: rgba(97, 101, 110, var(--salt-palette-opacity-border-readonly));
504
- --salt-color-blue-30-fade-background: rgba(164, 213, 244, var(--salt-palette-opacity-disabled));
505
- --salt-color-blue-500-fade-background: rgba(38, 112, 169, var(--salt-palette-opacity-disabled));
506
- --salt-color-blue-600-fade-background: rgba(21, 92, 147, var(--salt-palette-opacity-disabled));
507
- --salt-color-blue-700-fade-background: rgba(0, 71, 123, var(--salt-palette-opacity-disabled));
508
- --salt-color-gray-20-fade-background: rgba(234, 237, 239, var(--salt-palette-opacity-disabled));
509
- --salt-color-gray-30-fade-background: rgba(224, 228, 233, var(--salt-palette-opacity-disabled));
510
- --salt-color-gray-50-fade-background: rgba(206, 210, 217, var(--salt-palette-opacity-disabled));
511
- --salt-color-gray-60-fade-background: rgba(197, 201, 208, var(--salt-palette-opacity-disabled));
512
- --salt-color-gray-70-fade-background: rgba(180, 183, 190, var(--salt-palette-opacity-disabled));
513
- --salt-color-gray-200-fade-background: rgba(97, 101, 110, var(--salt-palette-opacity-disabled));
514
- --salt-color-gray-300-fade-background: rgba(76, 80, 91, var(--salt-palette-opacity-disabled));
515
- --salt-color-gray-600-fade-background: rgba(47, 49, 54, var(--salt-palette-opacity-disabled));
516
- --salt-color-gray-800-fade-background: rgba(36, 37, 38, var(--salt-palette-opacity-disabled));
517
- --salt-color-white-fade-background: rgba(255, 255, 255, var(--salt-palette-opacity-disabled));
518
- --salt-color-white-fade-background-readonly: rgba(255, 255, 255, var(--salt-palette-opacity-background-readonly));
519
- --salt-color-gray-20-fade-background-readonly: rgba(234, 237, 239, var(--salt-palette-opacity-background-readonly));
520
- --salt-color-gray-600-fade-background-readonly: rgba(47, 49, 54, var(--salt-palette-opacity-background-readonly));
521
- --salt-color-gray-800-fade-background-readonly: rgba(36, 37, 38, var(--salt-palette-opacity-background-readonly));
522
- --salt-color-white-fade-backdrop: rgba(255, 255, 255, var(--salt-palette-opacity-backdrop));
523
- --salt-color-black-fade-backdrop: rgba(0, 0, 0, var(--salt-palette-opacity-backdrop));
524
- --salt-color-blue-100-fade-fill: rgba(100, 177, 228, var(--salt-palette-opacity-disabled));
525
- --salt-color-blue-600-fade-fill: rgba(21, 92, 147, var(--salt-palette-opacity-disabled));
526
- --salt-color-white-fade-separatorOpacity-primary: rgba(255, 255, 255, var(--salt-palette-opacity-primary-border));
527
- --salt-color-white-fade-separatorOpacity-secondary: rgba(255, 255, 255, var(--salt-palette-opacity-secondary-border));
528
- --salt-color-white-fade-separatorOpacity-tertiary: rgba(255, 255, 255, var(--salt-palette-opacity-tertiary-border));
529
- --salt-color-black-fade-separatorOpacity-primary: rgba(0, 0, 0, var(--salt-palette-opacity-primary-border));
530
- --salt-color-black-fade-separatorOpacity-secondary: rgba(0, 0, 0, var(--salt-palette-opacity-secondary-border));
531
- --salt-color-black-fade-separatorOpacity-tertiary: rgba(0, 0, 0, var(--salt-palette-opacity-tertiary-border));
532
- --salt-color-black-fade-background-hover: rgba(0, 0, 0, var(--salt-opacity-8));
533
- --salt-color-black-fade-background-selection: rgba(0, 0, 0, var(--salt-opacity-15));
534
- --salt-color-white-fade-background-hover: rgba(255, 255, 255, var(--salt-opacity-8));
535
- --salt-color-white-fade-background-selection: rgba(255, 255, 255, var(--salt-opacity-15));
536
- }
537
-
538
- /* css/foundations/opacity.css */
539
- .salt-theme {
540
- --salt-opacity-0: 0;
541
- --salt-opacity-8: 0.08;
542
- --salt-opacity-15: 0.15;
543
- --salt-opacity-25: 0.25;
544
- --salt-opacity-40: 0.4;
545
- --salt-opacity-45: 0.45;
546
- --salt-opacity-70: 0.7;
547
- }
548
-
549
- /* css/foundations/shadow.css */
550
- .salt-theme[data-mode=light] {
551
- --salt-shadow-100-color: rgba(0, 0, 0, 0.1);
552
- --salt-shadow-200-color: rgba(0, 0, 0, 0.1);
553
- --salt-shadow-300-color: rgba(0, 0, 0, 0.15);
554
- --salt-shadow-400-color: rgba(0, 0, 0, 0.2);
555
- --salt-shadow-500-color: rgba(0, 0, 0, 0.3);
556
- }
557
- .salt-theme[data-mode=dark] {
558
- --salt-shadow-100-color: rgba(0, 0, 0, 0.5);
559
- --salt-shadow-200-color: rgba(0, 0, 0, 0.5);
560
- --salt-shadow-300-color: rgba(0, 0, 0, 0.55);
561
- --salt-shadow-400-color: rgba(0, 0, 0, 0.55);
562
- --salt-shadow-500-color: rgba(0, 0, 0, 0.65);
563
- }
564
- .salt-theme {
565
- --salt-shadow-100: 0 1px 3px 0 var(--salt-shadow-100-color);
566
- --salt-shadow-200: 0 2px 4px 0 var(--salt-shadow-200-color);
567
- --salt-shadow-300: 0 4px 8px 0 var(--salt-shadow-300-color);
568
- --salt-shadow-400: 0 6px 10px 0 var(--salt-shadow-400-color);
569
- --salt-shadow-500: 0 12px 40px 0 var(--salt-shadow-500-color);
570
- }
571
-
572
- /* css/foundations/size.css */
573
- .salt-density-high {
574
- --salt-size-adornment: 6px;
575
- --salt-size-bar: 2px;
576
- --salt-size-base: 20px;
577
- --salt-size-border: 1px;
578
- --salt-size-icon: 10px;
579
- --salt-size-indicator: 2px;
580
- --salt-size-selectable: 12px;
581
- --salt-size-bar-strong: 4px;
582
- --salt-size-bar-small: 2px;
583
- --salt-size-border-strong: 2px;
584
- }
585
- .salt-density-medium {
586
- --salt-size-adornment: 8px;
587
- --salt-size-bar: 4px;
588
- --salt-size-base: 28px;
589
- --salt-size-border: 1px;
590
- --salt-size-icon: 12px;
591
- --salt-size-indicator: 3px;
592
- --salt-size-selectable: 14px;
593
- --salt-size-bar-strong: 8px;
594
- --salt-size-bar-small: 2px;
595
- --salt-size-border-strong: 2px;
596
- }
597
- .salt-density-low {
598
- --salt-size-adornment: 10px;
599
- --salt-size-bar: 6px;
600
- --salt-size-base: 36px;
601
- --salt-size-border: 1px;
602
- --salt-size-icon: 14px;
603
- --salt-size-indicator: 4px;
604
- --salt-size-selectable: 16px;
605
- --salt-size-bar-strong: 12px;
606
- --salt-size-bar-small: 2px;
607
- --salt-size-border-strong: 2px;
608
- }
609
- .salt-density-touch {
610
- --salt-size-adornment: 12px;
611
- --salt-size-bar: 8px;
612
- --salt-size-base: 44px;
613
- --salt-size-border: 1px;
614
- --salt-size-icon: 16px;
615
- --salt-size-indicator: 5px;
616
- --salt-size-selectable: 18px;
617
- --salt-size-bar-strong: 16px;
618
- --salt-size-bar-small: 2px;
619
- --salt-size-border-strong: 2px;
620
- }
621
-
622
- /* css/foundations/spacing.css */
623
- .salt-density-touch {
624
- --salt-spacing-100: 16px;
625
- }
626
- .salt-density-low {
627
- --salt-spacing-100: 12px;
628
- }
629
- .salt-density-medium {
630
- --salt-spacing-100: 8px;
631
- }
632
- .salt-density-high {
633
- --salt-spacing-100: 4px;
634
- }
635
- .salt-density-touch,
636
- .salt-density-low,
637
- .salt-density-medium,
638
- .salt-density-high {
639
- --salt-spacing-25: calc(0.25 * var(--salt-spacing-100));
640
- --salt-spacing-50: calc(0.5 * var(--salt-spacing-100));
641
- --salt-spacing-75: calc(0.75 * var(--salt-spacing-100));
642
- --salt-spacing-150: calc(1.5 * var(--salt-spacing-100));
643
- --salt-spacing-200: calc(2 * var(--salt-spacing-100));
644
- --salt-spacing-250: calc(2.5 * var(--salt-spacing-100));
645
- --salt-spacing-300: calc(3 * var(--salt-spacing-100));
646
- --salt-spacing-350: calc(3.5 * var(--salt-spacing-100));
647
- --salt-spacing-400: calc(4 * var(--salt-spacing-100));
648
- }
649
-
650
- /* css/foundations/typography.css */
651
- .salt-theme {
652
- --salt-typography-fontFamily-openSans: "Open Sans";
653
- --salt-typography-fontFamily-amplitude: "Amplitude";
654
- --salt-typography-fontFamily-ptMono: "PT Mono";
655
- --salt-typography-fontWeight-light: 300;
656
- --salt-typography-fontWeight-regular: 400;
657
- --salt-typography-fontWeight-medium: 500;
658
- --salt-typography-fontWeight-semiBold: 600;
659
- --salt-typography-fontWeight-bold: 700;
660
- --salt-typography-fontWeight-extraBold: 800;
661
- }
662
-
663
- /* css/foundations/zindex.css */
664
- .salt-density-touch,
665
- .salt-density-low,
666
- .salt-density-medium,
667
- .salt-density-high {
668
- --salt-zIndex-default: 1;
669
- --salt-zIndex-popout: 1000;
670
- --salt-zIndex-appHeader: 1100;
671
- --salt-zIndex-drawer: 1200;
672
- --salt-zIndex-modal: 1300;
673
- --salt-zIndex-notification: 1400;
674
- --salt-zIndex-dragObject: 1420;
675
- --salt-zIndex-contextMenu: 1450;
676
- --salt-zIndex-flyover: 1500;
677
- }
678
-
679
- /* css/palette/accent.css */
680
- .salt-theme[data-mode=light] {
681
- --salt-palette-accent-background: var(--salt-color-blue-500);
682
- --salt-palette-accent-border: var(--salt-color-blue-500);
683
- --salt-palette-accent-foreground: var(--salt-color-white);
684
- }
685
- .salt-theme[data-mode=dark] {
686
- --salt-palette-accent-background: var(--salt-color-blue-500);
687
- --salt-palette-accent-border: var(--salt-color-blue-500);
688
- --salt-palette-accent-foreground: var(--salt-color-white);
689
- }
690
-
691
- /* css/palette/error.css */
692
- .salt-theme[data-mode=light] {
693
- --salt-palette-error-background: var(--salt-color-red-10);
694
- --salt-palette-error-bold-background: var(--salt-color-red-500);
695
- --salt-palette-error-background-selected: var(--salt-color-red-20);
696
- --salt-palette-error-border: var(--salt-color-red-500);
697
- --salt-palette-error-foreground-decorative: var(--salt-color-red-500);
698
- --salt-palette-error-foreground-informative: var(--salt-color-red-600);
699
- }
700
- .salt-theme[data-mode=dark] {
701
- --salt-palette-error-background: var(--salt-color-red-900);
702
- --salt-palette-error-bold-background: var(--salt-color-red-500);
703
- --salt-palette-error-background-selected: var(--salt-color-red-900);
704
- --salt-palette-error-border: var(--salt-color-red-400);
705
- --salt-palette-error-foreground-decorative: var(--salt-color-red-400);
706
- --salt-palette-error-foreground-informative: var(--salt-color-red-200);
707
- }
708
-
709
- /* css/palette/categorical.css */
710
- .salt-theme[data-mode=light] {
711
- --salt-palette-categorical-1: var(--salt-color-cobalt-500);
712
- --salt-palette-categorical-1-strong: var(--salt-color-cobalt-600);
713
- --salt-palette-categorical-1-weakest: var(--salt-color-cobalt-100);
714
- --salt-palette-categorical-2: var(--salt-color-cider-500);
715
- --salt-palette-categorical-2-strong: var(--salt-color-cider-600);
716
- --salt-palette-categorical-2-weakest: var(--salt-color-cider-100);
717
- --salt-palette-categorical-3: var(--salt-color-plum-500);
718
- --salt-palette-categorical-3-strong: var(--salt-color-plum-600);
719
- --salt-palette-categorical-3-weakest: var(--salt-color-plum-100);
720
- --salt-palette-categorical-4: var(--salt-color-aqua-500);
721
- --salt-palette-categorical-4-strong: var(--salt-color-aqua-600);
722
- --salt-palette-categorical-4-weakest: var(--salt-color-aqua-100);
723
- --salt-palette-categorical-5: var(--salt-color-slate-500);
724
- --salt-palette-categorical-5-strong: var(--salt-color-slate-600);
725
- --salt-palette-categorical-5-weakest: var(--salt-color-slate-100);
726
- --salt-palette-categorical-6: var(--salt-color-rose-500);
727
- --salt-palette-categorical-6-strong: var(--salt-color-rose-600);
728
- --salt-palette-categorical-6-weakest: var(--salt-color-rose-100);
729
- --salt-palette-categorical-7: var(--salt-color-olive-500);
730
- --salt-palette-categorical-7-strong: var(--salt-color-olive-600);
731
- --salt-palette-categorical-7-weakest: var(--salt-color-olive-100);
732
- --salt-palette-categorical-8: var(--salt-color-salmon-500);
733
- --salt-palette-categorical-8-strong: var(--salt-color-salmon-600);
734
- --salt-palette-categorical-8-weakest: var(--salt-color-salmon-100);
735
- --salt-palette-categorical-9: var(--salt-color-indigo-500);
736
- --salt-palette-categorical-9-strong: var(--salt-color-indigo-600);
737
- --salt-palette-categorical-9-weakest: var(--salt-color-indigo-100);
738
- --salt-palette-categorical-10: var(--salt-color-jade-500);
739
- --salt-palette-categorical-10-strong: var(--salt-color-jade-600);
740
- --salt-palette-categorical-10-weakest: var(--salt-color-jade-100);
741
- --salt-palette-categorical-11: var(--salt-color-citrine-500);
742
- --salt-palette-categorical-11-strong: var(--salt-color-citrine-600);
743
- --salt-palette-categorical-11-weakest: var(--salt-color-citrine-100);
744
- --salt-palette-categorical-12: var(--salt-color-autumn-500);
745
- --salt-palette-categorical-12-strong: var(--salt-color-autumn-600);
746
- --salt-palette-categorical-12-weakest: var(--salt-color-autumn-100);
747
- --salt-palette-categorical-13: var(--salt-color-lavender-500);
748
- --salt-palette-categorical-13-strong: var(--salt-color-lavender-600);
749
- --salt-palette-categorical-13-weakest: var(--salt-color-lavender-100);
750
- --salt-palette-categorical-14: var(--salt-color-ocean-500);
751
- --salt-palette-categorical-14-strong: var(--salt-color-ocean-600);
752
- --salt-palette-categorical-14-weakest: var(--salt-color-ocean-100);
753
- --salt-palette-categorical-15: var(--salt-color-smoke-500);
754
- --salt-palette-categorical-15-strong: var(--salt-color-smoke-600);
755
- --salt-palette-categorical-15-weakest: var(--salt-color-smoke-100);
756
- --salt-palette-categorical-16: var(--salt-color-fuchsia-500);
757
- --salt-palette-categorical-16-strong: var(--salt-color-fuchsia-600);
758
- --salt-palette-categorical-16-weakest: var(--salt-color-fuchsia-100);
759
- --salt-palette-categorical-17: var(--salt-color-lime-500);
760
- --salt-palette-categorical-17-strong: var(--salt-color-lime-600);
761
- --salt-palette-categorical-17-weakest: var(--salt-color-lime-100);
762
- --salt-palette-categorical-18: var(--salt-color-fur-500);
763
- --salt-palette-categorical-18-strong: var(--salt-color-fur-600);
764
- --salt-palette-categorical-18-weakest: var(--salt-color-fur-100);
765
- --salt-palette-categorical-19: var(--salt-color-violet-500);
766
- --salt-palette-categorical-19-strong: var(--salt-color-violet-600);
767
- --salt-palette-categorical-19-weakest: var(--salt-color-violet-100);
768
- --salt-palette-categorical-20: var(--salt-color-forest-500);
769
- --salt-palette-categorical-20-strong: var(--salt-color-forest-600);
770
- --salt-palette-categorical-20-weakest: var(--salt-color-forest-100);
771
- }
772
- .salt-theme[data-mode=dark] {
773
- --salt-palette-categorical-1: var(--salt-color-cobalt-500);
774
- --salt-palette-categorical-1-strong: var(--salt-color-cobalt-400);
775
- --salt-palette-categorical-1-weakest: var(--salt-color-cobalt-900);
776
- --salt-palette-categorical-2: var(--salt-color-cider-500);
777
- --salt-palette-categorical-2-strong: var(--salt-color-cider-400);
778
- --salt-palette-categorical-2-weakest: var(--salt-color-cider-900);
779
- --salt-palette-categorical-3: var(--salt-color-plum-500);
780
- --salt-palette-categorical-3-strong: var(--salt-color-plum-400);
781
- --salt-palette-categorical-3-weakest: var(--salt-color-plum-900);
782
- --salt-palette-categorical-4: var(--salt-color-aqua-500);
783
- --salt-palette-categorical-4-strong: var(--salt-color-aqua-400);
784
- --salt-palette-categorical-4-weakest: var(--salt-color-aqua-900);
785
- --salt-palette-categorical-5: var(--salt-color-slate-500);
786
- --salt-palette-categorical-5-strong: var(--salt-color-slate-400);
787
- --salt-palette-categorical-5-weakest: var(--salt-color-slate-900);
788
- --salt-palette-categorical-6: var(--salt-color-rose-500);
789
- --salt-palette-categorical-6-strong: var(--salt-color-rose-400);
790
- --salt-palette-categorical-6-weakest: var(--salt-color-rose-900);
791
- --salt-palette-categorical-7: var(--salt-color-olive-500);
792
- --salt-palette-categorical-7-strong: var(--salt-color-olive-400);
793
- --salt-palette-categorical-7-weakest: var(--salt-color-olive-900);
794
- --salt-palette-categorical-8: var(--salt-color-salmon-500);
795
- --salt-palette-categorical-8-strong: var(--salt-color-salmon-400);
796
- --salt-palette-categorical-8-weakest: var(--salt-color-salmon-900);
797
- --salt-palette-categorical-9: var(--salt-color-indigo-500);
798
- --salt-palette-categorical-9-strong: var(--salt-color-indigo-400);
799
- --salt-palette-categorical-9-weakest: var(--salt-color-indigo-900);
800
- --salt-palette-categorical-10: var(--salt-color-jade-500);
801
- --salt-palette-categorical-10-strong: var(--salt-color-jade-400);
802
- --salt-palette-categorical-10-weakest: var(--salt-color-jade-900);
803
- --salt-palette-categorical-11: var(--salt-color-citrine-500);
804
- --salt-palette-categorical-11-strong: var(--salt-color-citrine-400);
805
- --salt-palette-categorical-11-weakest: var(--salt-color-citrine-900);
806
- --salt-palette-categorical-12: var(--salt-color-autumn-500);
807
- --salt-palette-categorical-12-strong: var(--salt-color-autumn-400);
808
- --salt-palette-categorical-12-weakest: var(--salt-color-autumn-900);
809
- --salt-palette-categorical-13: var(--salt-color-lavender-500);
810
- --salt-palette-categorical-13-strong: var(--salt-color-lavender-400);
811
- --salt-palette-categorical-13-weakest: var(--salt-color-lavender-900);
812
- --salt-palette-categorical-14: var(--salt-color-ocean-500);
813
- --salt-palette-categorical-14-strong: var(--salt-color-ocean-400);
814
- --salt-palette-categorical-14-weakest: var(--salt-color-ocean-900);
815
- --salt-palette-categorical-15: var(--salt-color-smoke-500);
816
- --salt-palette-categorical-15-strong: var(--salt-color-smoke-400);
817
- --salt-palette-categorical-15-weakest: var(--salt-color-smoke-900);
818
- --salt-palette-categorical-16: var(--salt-color-fuchsia-500);
819
- --salt-palette-categorical-16-strong: var(--salt-color-fuchsia-400);
820
- --salt-palette-categorical-16-weakest: var(--salt-color-fuchsia-900);
821
- --salt-palette-categorical-17: var(--salt-color-lime-500);
822
- --salt-palette-categorical-17-strong: var(--salt-color-lime-400);
823
- --salt-palette-categorical-17-weakest: var(--salt-color-lime-900);
824
- --salt-palette-categorical-18: var(--salt-color-fur-500);
825
- --salt-palette-categorical-18-strong: var(--salt-color-fur-400);
826
- --salt-palette-categorical-18-weakest: var(--salt-color-fur-900);
827
- --salt-palette-categorical-19: var(--salt-color-violet-500);
828
- --salt-palette-categorical-19-strong: var(--salt-color-violet-400);
829
- --salt-palette-categorical-19-weakest: var(--salt-color-violet-900);
830
- --salt-palette-categorical-20: var(--salt-color-forest-500);
831
- --salt-palette-categorical-20-strong: var(--salt-color-forest-400);
832
- --salt-palette-categorical-20-weakest: var(--salt-color-forest-900);
833
- }
834
-
835
- /* css/palette/info.css */
836
- .salt-theme[data-mode=light] {
837
- --salt-palette-info-background: var(--salt-color-blue-10);
838
- --salt-palette-info-bold-background: var(--salt-color-blue-500);
839
- --salt-palette-info-border: var(--salt-color-blue-500);
840
- --salt-palette-info-foreground-decorative: var(--salt-color-blue-500);
841
- --salt-palette-info-foreground-informative: var(--salt-color-blue-600);
842
- }
843
- .salt-theme[data-mode=dark] {
844
- --salt-palette-info-background: var(--salt-color-blue-900);
845
- --salt-palette-info-bold-background: var(--salt-color-blue-500);
846
- --salt-palette-info-border: var(--salt-color-blue-400);
847
- --salt-palette-info-foreground-decorative: var(--salt-color-blue-400);
848
- --salt-palette-info-foreground-informative: var(--salt-color-blue-200);
849
- }
850
-
851
- /* css/palette/interact.css */
852
- .salt-theme[data-mode=light] {
853
- --salt-palette-interact-background: transparent;
854
- --salt-palette-interact-background-blurSelected: var(--salt-color-gray-30);
855
- --salt-palette-interact-background-hover: var(--salt-color-blue-10);
856
- --salt-palette-interact-background-active: var(--salt-color-blue-30);
857
- --salt-palette-interact-background-disabled: transparent;
858
- --salt-palette-interact-background-activeDisabled: var(--salt-color-blue-30-fade-background);
859
- --salt-palette-interact-border: var(--salt-color-gray-200);
860
- --salt-palette-interact-border-active: var(--salt-color-blue-600);
861
- --salt-palette-interact-border-activeDisabled: var(--salt-color-blue-600-fade-fill);
862
- --salt-palette-interact-border-disabled: var(--salt-color-gray-200-fade-border);
863
- --salt-palette-interact-border-hover: var(--salt-color-blue-500);
864
- --salt-palette-interact-border-readonly: var(--salt-color-gray-200-fade-border-readonly);
865
- --salt-palette-interact-foreground: var(--salt-color-gray-200);
866
- --salt-palette-interact-foreground-active: var(--salt-color-blue-600);
867
- --salt-palette-interact-foreground-activeDisabled: var(--salt-color-blue-600-fade-foreground);
868
- --salt-palette-interact-foreground-disabled: var(--salt-color-gray-200-fade-foreground);
869
- --salt-palette-interact-foreground-hover: var(--salt-color-blue-500);
870
- --salt-palette-interact-outline: var(--salt-color-blue-600);
871
- --salt-palette-interact-cta-background: var(--salt-color-blue-600);
872
- --salt-palette-interact-cta-background-active: var(--salt-color-blue-700);
873
- --salt-palette-interact-cta-background-disabled: var(--salt-color-blue-600-fade-background);
874
- --salt-palette-interact-cta-background-hover: var(--salt-color-blue-500);
875
- --salt-palette-interact-cta-foreground: var(--salt-color-white);
876
- --salt-palette-interact-cta-foreground-active: var(--salt-color-white);
877
- --salt-palette-interact-cta-foreground-disabled: var(--salt-color-white-fade-foreground);
878
- --salt-palette-interact-cta-foreground-hover: var(--salt-color-white);
879
- --salt-palette-interact-primary-background: var(--salt-color-gray-60);
880
- --salt-palette-interact-primary-background-active: var(--salt-color-gray-200);
881
- --salt-palette-interact-primary-background-disabled: var(--salt-color-gray-60-fade-background);
882
- --salt-palette-interact-primary-background-hover: var(--salt-color-gray-40);
883
- --salt-palette-interact-primary-foreground: var(--salt-color-gray-900);
884
- --salt-palette-interact-primary-foreground-active: var(--salt-color-white);
885
- --salt-palette-interact-primary-foreground-disabled: var(--salt-color-gray-900-fade-foreground);
886
- --salt-palette-interact-primary-foreground-hover: var(--salt-color-gray-900);
887
- --salt-palette-interact-secondary-background: transparent;
888
- --salt-palette-interact-secondary-background-active: var(--salt-color-gray-200);
889
- --salt-palette-interact-secondary-background-disabled: transparent;
890
- --salt-palette-interact-secondary-background-hover: var(--salt-color-gray-40);
891
- --salt-palette-interact-secondary-foreground: var(--salt-color-gray-900);
892
- --salt-palette-interact-secondary-foreground-active: var(--salt-color-white);
893
- --salt-palette-interact-secondary-foreground-disabled: var(--salt-color-gray-900-fade-foreground);
894
- --salt-palette-interact-secondary-foreground-hover: var(--salt-color-gray-900);
895
- }
896
- .salt-theme[data-mode=dark] {
897
- --salt-palette-interact-background: transparent;
898
- --salt-palette-interact-background-active: var(--salt-color-blue-700);
899
- --salt-palette-interact-background-blurSelected: var(--salt-color-gray-600);
900
- --salt-palette-interact-background-hover: var(--salt-color-blue-800);
901
- --salt-palette-interact-background-disabled: transparent;
902
- --salt-palette-interact-background-activeDisabled: var(--salt-color-blue-700-fade-background);
903
- --salt-palette-interact-border: var(--salt-color-gray-90);
904
- --salt-palette-interact-border-active: var(--salt-color-blue-100);
905
- --salt-palette-interact-border-activeDisabled: var(--salt-color-blue-100-fade-fill);
906
- --salt-palette-interact-border-disabled: var(--salt-color-gray-90-fade-border);
907
- --salt-palette-interact-border-hover: var(--salt-color-blue-500);
908
- --salt-palette-interact-border-readonly: var(--salt-color-gray-90-fade-border-readonly);
909
- --salt-palette-interact-foreground: var(--salt-color-gray-90);
910
- --salt-palette-interact-foreground-active: var(--salt-color-blue-100);
911
- --salt-palette-interact-foreground-activeDisabled: var(--salt-color-blue-100-fade-foreground);
912
- --salt-palette-interact-foreground-disabled: var(--salt-color-gray-90-fade-foreground);
913
- --salt-palette-interact-foreground-hover: var(--salt-color-blue-500);
914
- --salt-palette-interact-outline: var(--salt-color-blue-100);
915
- --salt-palette-interact-cta-background: var(--salt-color-blue-600);
916
- --salt-palette-interact-cta-background-active: var(--salt-color-blue-700);
917
- --salt-palette-interact-cta-background-disabled: var(--salt-color-blue-600-fade-background);
918
- --salt-palette-interact-cta-background-hover: var(--salt-color-blue-500);
919
- --salt-palette-interact-cta-foreground: var(--salt-color-white);
920
- --salt-palette-interact-cta-foreground-active: var(--salt-color-white);
921
- --salt-palette-interact-cta-foreground-disabled: var(--salt-color-white-fade-foreground);
922
- --salt-palette-interact-cta-foreground-hover: var(--salt-color-white);
923
- --salt-palette-interact-primary-background: var(--salt-color-gray-300);
924
- --salt-palette-interact-primary-background-active: var(--salt-color-gray-70);
925
- --salt-palette-interact-primary-background-disabled: var(--salt-color-gray-300-fade-background);
926
- --salt-palette-interact-primary-background-hover: var(--salt-color-gray-200);
927
- --salt-palette-interact-primary-foreground: var(--salt-color-white);
928
- --salt-palette-interact-primary-foreground-active: var(--salt-color-gray-900);
929
- --salt-palette-interact-primary-foreground-disabled: var(--salt-color-white-fade-foreground);
930
- --salt-palette-interact-primary-foreground-hover: var(--salt-color-white);
931
- --salt-palette-interact-secondary-background: transparent;
932
- --salt-palette-interact-secondary-background-active: var(--salt-color-gray-70);
933
- --salt-palette-interact-secondary-background-disabled: transparent;
934
- --salt-palette-interact-secondary-background-hover: var(--salt-color-gray-200);
935
- --salt-palette-interact-secondary-foreground: var(--salt-color-white);
936
- --salt-palette-interact-secondary-foreground-active: var(--salt-color-gray-900);
937
- --salt-palette-interact-secondary-foreground-disabled: var(--salt-color-white-fade-foreground);
938
- --salt-palette-interact-secondary-foreground-hover: var(--salt-color-white);
939
- }
940
-
941
- /* css/palette/navigate.css */
942
- .salt-theme[data-mode=light] {
943
- --salt-palette-navigate-background-hover: var(--salt-color-black-fade-background-hover);
944
- --salt-palette-navigate-foreground-hover: var(--salt-color-blue-600);
945
- --salt-palette-navigate-foreground-active: var(--salt-color-blue-700);
946
- --salt-palette-navigate-foreground-visited: var(--salt-color-purple-800);
947
- --salt-palette-navigate-indicator-hover: var(--salt-color-gray-90);
948
- --salt-palette-navigate-indicator-active: var(--salt-color-orange-600);
949
- }
950
- .salt-theme[data-mode=dark] {
951
- --salt-palette-navigate-background-hover: var(--salt-color-white-fade-background-hover);
952
- --salt-palette-navigate-foreground-hover: var(--salt-color-blue-200);
953
- --salt-palette-navigate-foreground-active: var(--salt-color-blue-300);
954
- --salt-palette-navigate-foreground-visited: var(--salt-color-purple-100);
955
- --salt-palette-navigate-indicator-hover: var(--salt-color-gray-90);
956
- --salt-palette-navigate-indicator-active: var(--salt-color-orange-400);
957
- }
958
-
959
- /* css/palette/negative.css */
960
- .salt-theme[data-mode=light] {
961
- --salt-palette-negative-foreground: var(--salt-color-red-700);
962
- }
963
- .salt-theme[data-mode=dark] {
964
- --salt-palette-negative-foreground: var(--salt-color-red-300);
965
- }
966
-
967
- /* css/palette/neutral.css */
968
- .salt-theme[data-mode=light] {
969
- --salt-palette-neutral-primary-background: var(--salt-color-white);
970
- --salt-palette-neutral-primary-background-disabled: var(--salt-color-white-fade-background);
971
- --salt-palette-neutral-primary-background-readonly: var(--salt-color-white-fade-background-readonly);
972
- --salt-palette-neutral-primary-foreground: var(--salt-color-gray-900);
973
- --salt-palette-neutral-primary-foreground-disabled: var(--salt-color-gray-900-fade-foreground);
974
- --salt-palette-neutral-primary-separator: var(--salt-color-black-fade-separatorOpacity-primary);
975
- --salt-palette-neutral-primary-border: var(--salt-color-gray-50);
976
- --salt-palette-neutral-primary-border-disabled: var(--salt-color-gray-50-fade-border);
977
- --salt-palette-neutral-secondary-background: var(--salt-color-gray-20);
978
- --salt-palette-neutral-secondary-background-disabled: var(--salt-color-gray-20-fade-background);
979
- --salt-palette-neutral-secondary-background-readonly: var(--salt-color-gray-20-fade-background-readonly);
980
- --salt-palette-neutral-secondary-border: var(--salt-color-gray-50);
981
- --salt-palette-neutral-secondary-border-disabled: var(--salt-color-gray-50-fade-border);
982
- --salt-palette-neutral-secondary-foreground: var(--salt-color-gray-200);
983
- --salt-palette-neutral-secondary-foreground-disabled: var(--salt-color-gray-200-fade-foreground);
984
- --salt-palette-neutral-backdrop: var(--salt-color-white-fade-backdrop);
985
- --salt-palette-neutral-secondary-separator: var(--salt-color-black-fade-separatorOpacity-secondary);
986
- --salt-palette-neutral-tertiary-separator: var(--salt-color-black-fade-separatorOpacity-tertiary);
987
- --salt-palette-neutral-selection: var(--salt-color-black-fade-background-selection);
988
- --salt-palette-neutral-tertiary-background: var(--salt-color-gray-30);
989
- --salt-palette-neutral-tertiary-background-disabled: var(--salt-color-gray-30-fade-background);
990
- --salt-palette-neutral-tertiary-border: var(--salt-color-gray-50);
991
- --salt-palette-neutral-tertiary-border-disabled: var(--salt-color-gray-50-fade-background);
992
- }
993
- .salt-theme[data-mode=dark] {
994
- --salt-palette-neutral-primary-background: var(--salt-color-gray-800);
995
- --salt-palette-neutral-primary-background-disabled: var(--salt-color-gray-800-fade-background);
996
- --salt-palette-neutral-primary-background-readonly: var(--salt-color-gray-800-fade-background-readonly);
997
- --salt-palette-neutral-primary-border: var(--salt-color-gray-300);
998
- --salt-palette-neutral-primary-border-disabled: var(--salt-color-gray-300-fade-border);
999
- --salt-palette-neutral-primary-foreground: var(--salt-color-white);
1000
- --salt-palette-neutral-primary-foreground-disabled: var(--salt-color-white-fade-foreground);
1001
- --salt-palette-neutral-primary-separator: var(--salt-color-white-fade-separatorOpacity-primary);
1002
- --salt-palette-neutral-secondary-background: var(--salt-color-gray-600);
1003
- --salt-palette-neutral-secondary-background-disabled: var(--salt-color-gray-600-fade-background);
1004
- --salt-palette-neutral-secondary-background-readonly: var(--salt-color-gray-600-fade-background-readonly);
1005
- --salt-palette-neutral-secondary-border: var(--salt-color-gray-300);
1006
- --salt-palette-neutral-secondary-border-disabled: var(--salt-color-gray-300-fade-border);
1007
- --salt-palette-neutral-secondary-foreground: var(--salt-color-gray-70);
1008
- --salt-palette-neutral-secondary-foreground-disabled: var(--salt-color-gray-70-fade-foreground);
1009
- --salt-palette-neutral-backdrop: var(--salt-color-black-fade-backdrop);
1010
- --salt-palette-neutral-secondary-separator: var(--salt-color-white-fade-separatorOpacity-secondary);
1011
- --salt-palette-neutral-tertiary-separator: var(--salt-color-white-fade-separatorOpacity-tertiary);
1012
- --salt-palette-neutral-selection: var(--salt-color-white-fade-background-selection);
1013
- --salt-palette-neutral-tertiary-background: var(--salt-color-gray-500);
1014
- --salt-palette-neutral-tertiary-background-disabled: var(--salt-color-gray-500-fade-background);
1015
- --salt-palette-neutral-tertiary-border: var(--salt-color-gray-300);
1016
- --salt-palette-neutral-tertiary-border-disabled: var(--salt-color-gray-300-fade-background);
1017
- }
1018
-
1019
- /* css/palette/opacity.css */
1020
- .salt-theme {
1021
- --salt-palette-opacity-backdrop: var(--salt-opacity-70);
1022
- --salt-palette-opacity-disabled: var(--salt-opacity-40);
1023
- --salt-palette-opacity-background-readonly: var(--salt-opacity-0);
1024
- --salt-palette-opacity-border-readonly: var(--salt-opacity-15);
1025
- --salt-palette-opacity-primary-border: var(--salt-opacity-45);
1026
- --salt-palette-opacity-secondary-border: var(--salt-opacity-25);
1027
- --salt-palette-opacity-tertiary-border: var(--salt-opacity-15);
1028
- }
1029
-
1030
- /* css/palette/positive.css */
1031
- .salt-theme[data-mode=light] {
1032
- --salt-palette-positive-foreground: var(--salt-color-green-700);
1033
- }
1034
- .salt-theme[data-mode=dark] {
1035
- --salt-palette-positive-foreground: var(--salt-color-green-300);
1036
- }
1037
-
1038
- /* css/palette/success.css */
1039
- .salt-theme[data-mode=light] {
1040
- --salt-palette-success-background: var(--salt-color-green-10);
1041
- --salt-palette-success-bold-background: var(--salt-color-green-500);
1042
- --salt-palette-success-background-selected: var(--salt-color-green-20);
1043
- --salt-palette-success-border: var(--salt-color-green-500);
1044
- --salt-palette-success-foreground-decorative: var(--salt-color-green-500);
1045
- --salt-palette-success-foreground-informative: var(--salt-color-green-600);
1046
- }
1047
- .salt-theme[data-mode=dark] {
1048
- --salt-palette-success-background: var(--salt-color-green-900);
1049
- --salt-palette-success-bold-background: var(--salt-color-green-500);
1050
- --salt-palette-success-background-selected: var(--salt-color-green-900);
1051
- --salt-palette-success-border: var(--salt-color-green-400);
1052
- --salt-palette-success-foreground-decorative: var(--salt-color-green-400);
1053
- --salt-palette-success-foreground-informative: var(--salt-color-green-200);
1054
- }
1055
-
1056
- /* css/palette/text.css */
1057
- .salt-theme {
1058
- --salt-palette-text-fontFamily: var(--salt-typography-fontFamily-openSans);
1059
- --salt-palette-text-fontFamily-heading: var(--salt-typography-fontFamily-openSans);
1060
- --salt-palette-text-fontFamily-code: var(--salt-typography-fontFamily-ptMono);
1061
- --salt-palette-text-fontFamily-action: var(--salt-typography-fontFamily-openSans);
1062
- --salt-palette-text-action-fontWeight: var(--salt-typography-fontWeight-semiBold);
1063
- --salt-palette-text-display-fontWeight: var(--salt-typography-fontWeight-semiBold);
1064
- --salt-palette-text-display-fontWeight-small: var(--salt-typography-fontWeight-regular);
1065
- --salt-palette-text-display-fontWeight-strong: var(--salt-typography-fontWeight-bold);
1066
- --salt-palette-text-heading-fontWeight: var(--salt-typography-fontWeight-semiBold);
1067
- --salt-palette-text-heading-fontWeight-small: var(--salt-typography-fontWeight-regular);
1068
- --salt-palette-text-heading-fontWeight-strong: var(--salt-typography-fontWeight-bold);
1069
- --salt-palette-text-body-fontWeight: var(--salt-typography-fontWeight-regular);
1070
- --salt-palette-text-body-fontWeight-small: var(--salt-typography-fontWeight-light);
1071
- --salt-palette-text-body-fontWeight-strong: var(--salt-typography-fontWeight-semiBold);
1072
- --salt-palette-text-notation-fontWeight: var(--salt-typography-fontWeight-semiBold);
1073
- --salt-palette-text-notation-fontWeight-small: var(--salt-typography-fontWeight-regular);
1074
- --salt-palette-text-notation-fontWeight-strong: var(--salt-typography-fontWeight-bold);
1075
- }
1076
-
1077
- /* css/palette/warning.css */
1078
- .salt-theme[data-mode=light] {
1079
- --salt-palette-warning-background: var(--salt-color-orange-10);
1080
- --salt-palette-warning-bold-background: var(--salt-color-orange-800);
1081
- --salt-palette-warning-background-selected: var(--salt-color-orange-20);
1082
- --salt-palette-warning-border: var(--salt-color-orange-700);
1083
- --salt-palette-warning-foreground-decorative: var(--salt-color-orange-700);
1084
- --salt-palette-warning-foreground-informative: var(--salt-color-orange-850);
1085
- }
1086
- .salt-theme[data-mode=dark] {
1087
- --salt-palette-warning-background: var(--salt-color-orange-900);
1088
- --salt-palette-warning-bold-background: var(--salt-color-orange-800);
1089
- --salt-palette-warning-background-selected: var(--salt-color-orange-900);
1090
- --salt-palette-warning-border: var(--salt-color-orange-500);
1091
- --salt-palette-warning-foreground-decorative: var(--salt-color-orange-500);
1092
- --salt-palette-warning-foreground-informative: var(--salt-color-orange-400);
1093
- }
1094
-
1095
- /* css/characteristics/accent.css */
1096
- .salt-theme {
1097
- --salt-accent-background: var(--salt-palette-accent-background);
1098
- --salt-accent-borderColor: var(--salt-palette-accent-border);
1099
- --salt-accent-foreground: var(--salt-palette-accent-foreground);
1100
- }
1101
-
1102
- /* css/characteristics/actionable.css */
1103
- .salt-theme {
1104
- --salt-actionable-cursor-hover: pointer;
1105
- --salt-actionable-cursor-active: pointer;
1106
- --salt-actionable-cursor-disabled: not-allowed;
1107
- --salt-actionable-primary-foreground: var(--salt-palette-interact-primary-foreground);
1108
- --salt-actionable-primary-foreground-hover: var(--salt-palette-interact-primary-foreground-hover);
1109
- --salt-actionable-primary-foreground-active: var(--salt-palette-interact-primary-foreground-active);
1110
- --salt-actionable-primary-foreground-disabled: var(--salt-palette-interact-primary-foreground-disabled);
1111
- --salt-actionable-primary-background: var(--salt-palette-interact-primary-background);
1112
- --salt-actionable-primary-background-hover: var(--salt-palette-interact-primary-background-hover);
1113
- --salt-actionable-primary-background-active: var(--salt-palette-interact-primary-background-active);
1114
- --salt-actionable-primary-background-disabled: var(--salt-palette-interact-primary-background-disabled);
1115
- --salt-actionable-primary-borderColor: transparent;
1116
- --salt-actionable-primary-borderColor-hover: transparent;
1117
- --salt-actionable-primary-borderColor-active: transparent;
1118
- --salt-actionable-primary-borderColor-disabled: transparent;
1119
- --salt-actionable-cta-foreground: var(--salt-palette-interact-cta-foreground);
1120
- --salt-actionable-cta-foreground-hover: var(--salt-palette-interact-cta-foreground-hover);
1121
- --salt-actionable-cta-foreground-active: var(--salt-palette-interact-cta-foreground-active);
1122
- --salt-actionable-cta-foreground-disabled: var(--salt-palette-interact-cta-foreground-disabled);
1123
- --salt-actionable-cta-background: var(--salt-palette-interact-cta-background);
1124
- --salt-actionable-cta-background-hover: var(--salt-palette-interact-cta-background-hover);
1125
- --salt-actionable-cta-background-active: var(--salt-palette-interact-cta-background-active);
1126
- --salt-actionable-cta-background-disabled: var(--salt-palette-interact-cta-background-disabled);
1127
- --salt-actionable-cta-borderColor: transparent;
1128
- --salt-actionable-cta-borderColor-hover: transparent;
1129
- --salt-actionable-cta-borderColor-active: transparent;
1130
- --salt-actionable-cta-borderColor-disabled: transparent;
1131
- --salt-actionable-secondary-foreground: var(--salt-palette-interact-secondary-foreground);
1132
- --salt-actionable-secondary-foreground-hover: var(--salt-palette-interact-secondary-foreground-hover);
1133
- --salt-actionable-secondary-foreground-active: var(--salt-palette-interact-secondary-foreground-active);
1134
- --salt-actionable-secondary-foreground-disabled: var(--salt-palette-interact-secondary-foreground-disabled);
1135
- --salt-actionable-secondary-background: var(--salt-palette-interact-secondary-background);
1136
- --salt-actionable-secondary-background-hover: var(--salt-palette-interact-secondary-background-hover);
1137
- --salt-actionable-secondary-background-active: var(--salt-palette-interact-secondary-background-active);
1138
- --salt-actionable-secondary-background-disabled: var(--salt-palette-interact-secondary-background-disabled);
1139
- --salt-actionable-secondary-borderColor: transparent;
1140
- --salt-actionable-secondary-borderColor-hover: transparent;
1141
- --salt-actionable-secondary-borderColor-active: transparent;
1142
- --salt-actionable-secondary-borderColor-disabled: transparent;
1143
- }
1144
-
1145
- /* css/characteristics/category.css */
1146
- .salt-theme {
1147
- --salt-category-1-subtle-foreground: var(--salt-palette-categorical-1-strong);
1148
- --salt-category-1-subtle-background: var(--salt-palette-categorical-1-weakest);
1149
- --salt-category-1-subtle-borderColor: var(--salt-palette-categorical-1);
1150
- --salt-category-1-bold-foreground: var(--salt-palette-accent-foreground);
1151
- --salt-category-1-bold-background: var(--salt-palette-categorical-1);
1152
- --salt-category-2-subtle-foreground: var(--salt-palette-categorical-2-strong);
1153
- --salt-category-2-subtle-background: var(--salt-palette-categorical-2-weakest);
1154
- --salt-category-2-subtle-borderColor: var(--salt-palette-categorical-2);
1155
- --salt-category-2-bold-foreground: var(--salt-palette-accent-foreground);
1156
- --salt-category-2-bold-background: var(--salt-palette-categorical-2);
1157
- --salt-category-3-subtle-foreground: var(--salt-palette-categorical-3-strong);
1158
- --salt-category-3-subtle-background: var(--salt-palette-categorical-3-weakest);
1159
- --salt-category-3-subtle-borderColor: var(--salt-palette-categorical-3);
1160
- --salt-category-3-bold-foreground: var(--salt-palette-accent-foreground);
1161
- --salt-category-3-bold-background: var(--salt-palette-categorical-3);
1162
- --salt-category-4-subtle-foreground: var(--salt-palette-categorical-4-strong);
1163
- --salt-category-4-subtle-background: var(--salt-palette-categorical-4-weakest);
1164
- --salt-category-4-subtle-borderColor: var(--salt-palette-categorical-4);
1165
- --salt-category-4-bold-foreground: var(--salt-palette-accent-foreground);
1166
- --salt-category-4-bold-background: var(--salt-palette-categorical-4);
1167
- --salt-category-5-subtle-foreground: var(--salt-palette-categorical-5-strong);
1168
- --salt-category-5-subtle-background: var(--salt-palette-categorical-5-weakest);
1169
- --salt-category-5-subtle-borderColor: var(--salt-palette-categorical-5);
1170
- --salt-category-5-bold-foreground: var(--salt-palette-accent-foreground);
1171
- --salt-category-5-bold-background: var(--salt-palette-categorical-5);
1172
- --salt-category-6-subtle-foreground: var(--salt-palette-categorical-6-strong);
1173
- --salt-category-6-subtle-background: var(--salt-palette-categorical-6-weakest);
1174
- --salt-category-6-subtle-borderColor: var(--salt-palette-categorical-6);
1175
- --salt-category-6-bold-foreground: var(--salt-palette-accent-foreground);
1176
- --salt-category-6-bold-background: var(--salt-palette-categorical-6);
1177
- --salt-category-7-subtle-foreground: var(--salt-palette-categorical-7-strong);
1178
- --salt-category-7-subtle-background: var(--salt-palette-categorical-7-weakest);
1179
- --salt-category-7-subtle-borderColor: var(--salt-palette-categorical-7);
1180
- --salt-category-7-bold-foreground: var(--salt-palette-accent-foreground);
1181
- --salt-category-7-bold-background: var(--salt-palette-categorical-7);
1182
- --salt-category-8-subtle-foreground: var(--salt-palette-categorical-8-strong);
1183
- --salt-category-8-subtle-background: var(--salt-palette-categorical-8-weakest);
1184
- --salt-category-8-subtle-borderColor: var(--salt-palette-categorical-8);
1185
- --salt-category-8-bold-foreground: var(--salt-palette-accent-foreground);
1186
- --salt-category-8-bold-background: var(--salt-palette-categorical-8);
1187
- --salt-category-9-subtle-foreground: var(--salt-palette-categorical-9-strong);
1188
- --salt-category-9-subtle-background: var(--salt-palette-categorical-9-weakest);
1189
- --salt-category-9-subtle-borderColor: var(--salt-palette-categorical-9);
1190
- --salt-category-9-bold-foreground: var(--salt-palette-accent-foreground);
1191
- --salt-category-9-bold-background: var(--salt-palette-categorical-9);
1192
- --salt-category-10-subtle-foreground: var(--salt-palette-categorical-10-strong);
1193
- --salt-category-10-subtle-background: var(--salt-palette-categorical-10-weakest);
1194
- --salt-category-10-subtle-borderColor: var(--salt-palette-categorical-10);
1195
- --salt-category-10-bold-foreground: var(--salt-palette-accent-foreground);
1196
- --salt-category-10-bold-background: var(--salt-palette-categorical-10);
1197
- --salt-category-11-subtle-foreground: var(--salt-palette-categorical-11-strong);
1198
- --salt-category-11-subtle-background: var(--salt-palette-categorical-11-weakest);
1199
- --salt-category-11-subtle-borderColor: var(--salt-palette-categorical-11);
1200
- --salt-category-11-bold-foreground: var(--salt-palette-accent-foreground);
1201
- --salt-category-11-bold-background: var(--salt-palette-categorical-11);
1202
- --salt-category-12-subtle-foreground: var(--salt-palette-categorical-12-strong);
1203
- --salt-category-12-subtle-background: var(--salt-palette-categorical-12-weakest);
1204
- --salt-category-12-subtle-borderColor: var(--salt-palette-categorical-12);
1205
- --salt-category-12-bold-foreground: var(--salt-palette-accent-foreground);
1206
- --salt-category-12-bold-background: var(--salt-palette-categorical-12);
1207
- --salt-category-13-subtle-foreground: var(--salt-palette-categorical-13-strong);
1208
- --salt-category-13-subtle-background: var(--salt-palette-categorical-13-weakest);
1209
- --salt-category-13-subtle-borderColor: var(--salt-palette-categorical-13);
1210
- --salt-category-13-bold-foreground: var(--salt-palette-accent-foreground);
1211
- --salt-category-13-bold-background: var(--salt-palette-categorical-13);
1212
- --salt-category-14-subtle-foreground: var(--salt-palette-categorical-14-strong);
1213
- --salt-category-14-subtle-background: var(--salt-palette-categorical-14-weakest);
1214
- --salt-category-14-subtle-borderColor: var(--salt-palette-categorical-14);
1215
- --salt-category-14-bold-foreground: var(--salt-palette-accent-foreground);
1216
- --salt-category-14-bold-background: var(--salt-palette-categorical-14);
1217
- --salt-category-15-subtle-foreground: var(--salt-palette-categorical-15-strong);
1218
- --salt-category-15-subtle-background: var(--salt-palette-categorical-15-weakest);
1219
- --salt-category-15-subtle-borderColor: var(--salt-palette-categorical-15);
1220
- --salt-category-15-bold-foreground: var(--salt-palette-accent-foreground);
1221
- --salt-category-15-bold-background: var(--salt-palette-categorical-15);
1222
- --salt-category-16-subtle-foreground: var(--salt-palette-categorical-16-strong);
1223
- --salt-category-16-subtle-background: var(--salt-palette-categorical-16-weakest);
1224
- --salt-category-16-subtle-borderColor: var(--salt-palette-categorical-16);
1225
- --salt-category-16-bold-foreground: var(--salt-palette-accent-foreground);
1226
- --salt-category-16-bold-background: var(--salt-palette-categorical-16);
1227
- --salt-category-17-subtle-foreground: var(--salt-palette-categorical-17-strong);
1228
- --salt-category-17-subtle-background: var(--salt-palette-categorical-17-weakest);
1229
- --salt-category-17-subtle-borderColor: var(--salt-palette-categorical-17);
1230
- --salt-category-17-bold-foreground: var(--salt-palette-accent-foreground);
1231
- --salt-category-17-bold-background: var(--salt-palette-categorical-17);
1232
- --salt-category-18-subtle-foreground: var(--salt-palette-categorical-18-strong);
1233
- --salt-category-18-subtle-background: var(--salt-palette-categorical-18-weakest);
1234
- --salt-category-18-subtle-borderColor: var(--salt-palette-categorical-18);
1235
- --salt-category-18-bold-foreground: var(--salt-palette-accent-foreground);
1236
- --salt-category-18-bold-background: var(--salt-palette-categorical-18);
1237
- --salt-category-19-subtle-foreground: var(--salt-palette-categorical-19-strong);
1238
- --salt-category-19-subtle-background: var(--salt-palette-categorical-19-weakest);
1239
- --salt-category-19-subtle-borderColor: var(--salt-palette-categorical-19);
1240
- --salt-category-19-bold-foreground: var(--salt-palette-accent-foreground);
1241
- --salt-category-19-bold-background: var(--salt-palette-categorical-19);
1242
- --salt-category-20-subtle-foreground: var(--salt-palette-categorical-20-strong);
1243
- --salt-category-20-subtle-background: var(--salt-palette-categorical-20-weakest);
1244
- --salt-category-20-subtle-borderColor: var(--salt-palette-categorical-20);
1245
- --salt-category-20-bold-foreground: var(--salt-palette-accent-foreground);
1246
- --salt-category-20-bold-background: var(--salt-palette-categorical-20);
1247
- }
1248
-
1249
- /* css/characteristics/container.css */
1250
- .salt-theme {
1251
- --salt-container-borderStyle: solid;
1252
- --salt-container-primary-background: var(--salt-palette-neutral-primary-background);
1253
- --salt-container-primary-background-disabled: var(--salt-palette-neutral-primary-background-disabled);
1254
- --salt-container-primary-borderColor: var(--salt-palette-neutral-primary-border);
1255
- --salt-container-primary-borderColor-disabled: var(--salt-palette-neutral-primary-border-disabled);
1256
- --salt-container-secondary-background: var(--salt-palette-neutral-secondary-background);
1257
- --salt-container-secondary-background-disabled: var(--salt-palette-neutral-secondary-background-disabled);
1258
- --salt-container-secondary-borderColor: var(--salt-palette-neutral-secondary-border);
1259
- --salt-container-secondary-borderColor-disabled: var(--salt-palette-neutral-secondary-border-disabled);
1260
- --salt-container-tertiary-background: var(--salt-palette-neutral-tertiary-background);
1261
- --salt-container-tertiary-background-disabled: var(--salt-palette-neutral-tertiary-background-disabled);
1262
- --salt-container-tertiary-borderColor: var(--salt-palette-neutral-tertiary-border);
1263
- --salt-container-tertiary-borderColor-disabled: var(--salt-palette-neutral-tertiary-border-disabled);
1264
- }
1265
-
1266
- /* css/characteristics/draggable.css */
1267
- .salt-theme {
1268
- --salt-draggable-horizontal-cursor-hover: row-resize;
1269
- --salt-draggable-horizontal-cursor-active: row-resize;
1270
- --salt-draggable-vertical-cursor-hover: col-resize;
1271
- --salt-draggable-vertical-cursor-active: col-resize;
1272
- --salt-draggable-grab-cursor-hover: grab;
1273
- --salt-draggable-grab-cursor-active: grabbing;
1274
- }
1275
-
1276
- /* css/characteristics/target.css */
1277
- .salt-theme {
1278
- --salt-target-background-hover: var(--salt-palette-interact-background-hover);
1279
- --salt-target-borderColor-hover: var(--salt-palette-interact-border-hover);
1280
- --salt-target-borderStyle: dashed;
1281
- --salt-target-borderStyle-hover: solid;
1282
- --salt-target-borderStyle-disabled: dashed;
1283
- --salt-target-cursor-disabled: not-allowed;
1284
- }
1285
-
1286
- /* css/characteristics/editable.css */
1287
- .salt-theme {
1288
- --salt-editable-cursor-hover: text;
1289
- --salt-editable-cursor-active: text;
1290
- --salt-editable-cursor-disabled: not-allowed;
1291
- --salt-editable-cursor-readonly: text;
1292
- --salt-editable-borderStyle: solid;
1293
- --salt-editable-borderStyle-hover: solid;
1294
- --salt-editable-borderStyle-active: solid;
1295
- --salt-editable-borderStyle-disabled: solid;
1296
- --salt-editable-borderStyle-readonly: solid;
1297
- --salt-editable-borderWidth-active: 2px;
1298
- --salt-editable-borderColor: var(--salt-palette-interact-border);
1299
- --salt-editable-borderColor-active: var(--salt-palette-interact-border-active);
1300
- --salt-editable-borderColor-disabled: var(--salt-palette-interact-border-disabled);
1301
- --salt-editable-borderColor-hover: var(--salt-palette-interact-border-hover);
1302
- --salt-editable-borderColor-readonly: var(--salt-palette-interact-border-readonly);
1303
- --salt-editable-primary-background: var(--salt-palette-neutral-primary-background);
1304
- --salt-editable-primary-background-active: var(--salt-palette-neutral-primary-background);
1305
- --salt-editable-primary-background-disabled: var(--salt-palette-neutral-primary-background-disabled);
1306
- --salt-editable-primary-background-hover: var(--salt-palette-neutral-primary-background);
1307
- --salt-editable-primary-background-readonly: var(--salt-palette-neutral-primary-background-readonly);
1308
- --salt-editable-secondary-background: var(--salt-palette-neutral-secondary-background);
1309
- --salt-editable-secondary-background-active: var(--salt-palette-neutral-secondary-background);
1310
- --salt-editable-secondary-background-disabled: var(--salt-palette-neutral-secondary-background-disabled);
1311
- --salt-editable-secondary-background-hover: var(--salt-palette-neutral-secondary-background);
1312
- --salt-editable-secondary-background-readonly: var(--salt-palette-neutral-secondary-background-readonly);
1313
- --salt-editable-help-fontStyle: italic;
1314
- }
1315
-
1316
- /* css/characteristics/focused.css */
1317
- .salt-theme {
1318
- --salt-focused-outlineColor: var(--salt-palette-interact-outline);
1319
- --salt-focused-outlineStyle: dotted;
1320
- --salt-focused-outlineWidth: 2px;
1321
- --salt-focused-outlineInset: 0;
1322
- --salt-focused-outlineOffset: 0;
1323
- --salt-focused-outline: var(--salt-focused-outlineWidth) var(--salt-focused-outlineStyle) var(--salt-focused-outlineColor);
1324
- }
1325
- .saltFocusVisible:after,
1326
- .focused:focus:after,
1327
- .focused:focus-visible:after {
1328
- content: "";
1329
- inset: var(--salt-focused-outlineInset);
1330
- outline-color: var(--salt-focused-outlineColor);
1331
- outline-offset: var(--salt-focused-outlineOffset);
1332
- outline-style: var(--salt-focused-outlineStyle);
1333
- outline-width: var(--salt-focused-outlineWidth);
1334
- position: absolute;
1335
- }
1336
-
1337
- /* css/characteristics/navigable.css */
1338
- .salt-theme {
1339
- --salt-navigable-cursor-active: pointer;
1340
- --salt-navigable-cursor-hover: pointer;
1341
- --salt-navigable-cursor-disabled: not-allowed;
1342
- --salt-navigable-cursor-edit: text;
1343
- --salt-navigable-fontWeight: var(--salt-typography-fontWeight-regular);
1344
- --salt-navigable-fontWeight-hover: var(--salt-typography-fontWeight-regular);
1345
- --salt-navigable-fontWeight-active: var(--salt-typography-fontWeight-semiBold);
1346
- --salt-navigable-fontWeight-edit: var(--salt-typography-fontWeight-regular);
1347
- --salt-navigable-indicator-hover: var(--salt-palette-navigate-indicator-hover);
1348
- --salt-navigable-indicator-active: var(--salt-palette-navigate-indicator-active);
1349
- --salt-navigable-background-hover: var(--salt-palette-navigate-background-hover);
1350
- --salt-navigable-textDecoration: underline;
1351
- --salt-navigable-textDecoration-hover: none;
1352
- --salt-navigable-textDecoration-selected: underline;
1353
- }
1354
-
1355
- /* css/characteristics/overlayable.css */
1356
- .salt-theme {
1357
- --salt-overlayable-shadow-scroll: var(--salt-shadow-100);
1358
- --salt-overlayable-shadow-region: var(--salt-shadow-200);
1359
- --salt-overlayable-shadow: var(--salt-shadow-200);
1360
- --salt-overlayable-shadow-hover: var(--salt-shadow-300);
1361
- --salt-overlayable-shadow-popout: var(--salt-shadow-400);
1362
- --salt-overlayable-shadow-drag: var(--salt-shadow-400);
1363
- --salt-overlayable-shadow-modal: var(--salt-shadow-500);
1364
- --salt-overlayable-background: var(--salt-palette-neutral-backdrop);
1365
- --salt-overlayable-rangeSelection: var(--salt-palette-neutral-selection);
1366
- }
1367
-
1368
- /* css/characteristics/selectable.css */
1369
- .salt-theme {
1370
- --salt-selectable-cursor-hover: pointer;
1371
- --salt-selectable-cursor-selected: pointer;
1372
- --salt-selectable-cursor-blurSelected: pointer;
1373
- --salt-selectable-cursor-disabled: not-allowed;
1374
- --salt-selectable-cursor-readonly: not-allowed;
1375
- --salt-selectable-borderStyle: solid;
1376
- --salt-selectable-borderStyle-hover: solid;
1377
- --salt-selectable-borderStyle-selected: solid;
1378
- --salt-selectable-borderStyle-blurSelected: solid;
1379
- --salt-selectable-borderColor: var(--salt-palette-interact-border);
1380
- --salt-selectable-borderColor-hover: var(--salt-palette-interact-border-hover);
1381
- --salt-selectable-borderColor-selected: var(--salt-palette-interact-border-active);
1382
- --salt-selectable-borderColor-selectedDisabled: var(--salt-palette-interact-border-activeDisabled);
1383
- --salt-selectable-borderColor-disabled: var(--salt-palette-interact-border-disabled);
1384
- --salt-selectable-borderColor-readonly: var(--salt-palette-interact-border-readonly);
1385
- --salt-selectable-foreground: var(--salt-palette-interact-foreground);
1386
- --salt-selectable-foreground-disabled: var(--salt-palette-interact-foreground-disabled);
1387
- --salt-selectable-foreground-hover: var(--salt-palette-interact-foreground-hover);
1388
- --salt-selectable-foreground-selected: var(--salt-palette-interact-foreground-active);
1389
- --salt-selectable-foreground-selectedDisabled: var(--salt-palette-interact-foreground-activeDisabled);
1390
- --salt-selectable-background: var(--salt-palette-interact-background);
1391
- --salt-selectable-background-hover: var(--salt-palette-interact-background-hover);
1392
- --salt-selectable-background-selected: var(--salt-palette-interact-background-active);
1393
- --salt-selectable-background-blurSelected: var(--salt-palette-interact-background-blurSelected);
1394
- --salt-selectable-background-disabled: var(--salt-palette-interact-background-disabled);
1395
- --salt-selectable-background-selectedDisabled: var(--salt-palette-interact-background-activeDisabled);
1396
- }
1397
-
1398
- /* css/characteristics/separable.css */
1399
- .salt-theme {
1400
- --salt-separable-borderStyle: solid;
1401
- --salt-separable-primary-borderColor: var(--salt-palette-neutral-primary-separator);
1402
- --salt-separable-secondary-borderColor: var(--salt-palette-neutral-secondary-separator);
1403
- --salt-separable-tertiary-borderColor: var(--salt-palette-neutral-tertiary-separator);
1404
- }
1405
-
1406
- /* css/characteristics/status.css */
1407
- .salt-theme {
1408
- --salt-status-static-foreground: var(--salt-palette-neutral-secondary-foreground);
1409
- --salt-status-negative-foreground: var(--salt-palette-negative-foreground);
1410
- --salt-status-positive-foreground: var(--salt-palette-positive-foreground);
1411
- --salt-status-info-foreground-decorative: var(--salt-palette-info-foreground-decorative);
1412
- --salt-status-error-foreground-decorative: var(--salt-palette-error-foreground-decorative);
1413
- --salt-status-warning-foreground-decorative: var(--salt-palette-warning-foreground-decorative);
1414
- --salt-status-success-foreground-decorative: var(--salt-palette-success-foreground-decorative);
1415
- --salt-status-info-foreground-informative: var(--salt-palette-info-foreground-informative);
1416
- --salt-status-error-foreground-informative: var(--salt-palette-error-foreground-informative);
1417
- --salt-status-warning-foreground-informative: var(--salt-palette-warning-foreground-informative);
1418
- --salt-status-success-foreground-informative: var(--salt-palette-success-foreground-informative);
1419
- --salt-status-info-borderColor: var(--salt-palette-info-border);
1420
- --salt-status-error-borderColor: var(--salt-palette-error-border);
1421
- --salt-status-warning-borderColor: var(--salt-palette-warning-border);
1422
- --salt-status-success-borderColor: var(--salt-palette-success-border);
1423
- --salt-status-info-background: var(--salt-palette-info-background);
1424
- --salt-status-error-background: var(--salt-palette-error-background);
1425
- --salt-status-warning-background: var(--salt-palette-warning-background);
1426
- --salt-status-success-background: var(--salt-palette-success-background);
1427
- --salt-status-info-bold-background: var(--salt-palette-info-bold-background);
1428
- --salt-status-error-bold-background: var(--salt-palette-error-bold-background);
1429
- --salt-status-warning-bold-background: var(--salt-palette-warning-bold-background);
1430
- --salt-status-success-bold-background: var(--salt-palette-success-bold-background);
1431
- --salt-status-error-background-selected: var(--salt-palette-error-background-selected);
1432
- --salt-status-warning-background-selected: var(--salt-palette-warning-background-selected);
1433
- --salt-status-success-background-selected: var(--salt-palette-success-background-selected);
1434
- }
1435
-
1436
- /* css/characteristics/text.css */
1437
- .salt-theme {
1438
- --salt-text-letterSpacing: 0;
1439
- --salt-text-textAlign: left;
1440
- --salt-text-textAlign-embedded: center;
1441
- --salt-text-textDecoration: none;
1442
- --salt-text-textTransform: none;
1443
- --salt-text-action-fontFamily: var(--salt-palette-text-fontFamily-action);
1444
- --salt-text-action-letterSpacing: 0.6px;
1445
- --salt-text-action-textTransform: uppercase;
1446
- --salt-text-action-textAlign: center;
1447
- --salt-text-action-fontWeight: var(--salt-palette-text-action-fontWeight);
1448
- --salt-text-fontFamily: var(--salt-palette-text-fontFamily);
1449
- --salt-text-fontWeight: var(--salt-palette-text-body-fontWeight);
1450
- --salt-text-fontWeight-small: var(--salt-palette-text-body-fontWeight-small);
1451
- --salt-text-fontWeight-strong: var(--salt-palette-text-body-fontWeight-strong);
1452
- --salt-text-notation-fontFamily: var(--salt-palette-text-fontFamily);
1453
- --salt-text-notation-fontWeight: var(--salt-palette-text-notation-fontWeight);
1454
- --salt-text-notation-fontWeight-small: var(--salt-palette-text-notation-fontWeight-small);
1455
- --salt-text-notation-fontWeight-strong: var(--salt-palette-text-notation-fontWeight-strong);
1456
- --salt-text-h1-fontFamily: var(--salt-palette-text-fontFamily-heading);
1457
- --salt-text-h1-fontWeight: var(--salt-palette-text-heading-fontWeight);
1458
- --salt-text-h1-fontWeight-small: var(--salt-palette-text-heading-fontWeight-small);
1459
- --salt-text-h1-fontWeight-strong: var(--salt-palette-text-heading-fontWeight-strong);
1460
- --salt-text-h2-fontFamily: var(--salt-palette-text-fontFamily-heading);
1461
- --salt-text-h2-fontWeight: var(--salt-palette-text-heading-fontWeight);
1462
- --salt-text-h2-fontWeight-small: var(--salt-palette-text-heading-fontWeight-small);
1463
- --salt-text-h2-fontWeight-strong: var(--salt-palette-text-heading-fontWeight-strong);
1464
- --salt-text-h3-fontFamily: var(--salt-palette-text-fontFamily-heading);
1465
- --salt-text-h3-fontWeight: var(--salt-palette-text-heading-fontWeight);
1466
- --salt-text-h3-fontWeight-small: var(--salt-palette-text-heading-fontWeight-small);
1467
- --salt-text-h3-fontWeight-strong: var(--salt-palette-text-heading-fontWeight-strong);
1468
- --salt-text-h4-fontFamily: var(--salt-palette-text-fontFamily-heading);
1469
- --salt-text-h4-fontWeight: var(--salt-palette-text-heading-fontWeight);
1470
- --salt-text-h4-fontWeight-small: var(--salt-palette-text-heading-fontWeight-small);
1471
- --salt-text-h4-fontWeight-strong: var(--salt-palette-text-heading-fontWeight-strong);
1472
- --salt-text-label-fontFamily: var(--salt-palette-text-fontFamily);
1473
- --salt-text-label-fontWeight: var(--salt-palette-text-body-fontWeight);
1474
- --salt-text-label-fontWeight-small: var(--salt-palette-text-body-fontWeight-small);
1475
- --salt-text-label-fontWeight-strong: var(--salt-palette-text-body-fontWeight-strong);
1476
- --salt-text-display1-fontFamily: var(--salt-palette-text-fontFamily-heading);
1477
- --salt-text-display1-fontWeight: var(--salt-palette-text-display-fontWeight);
1478
- --salt-text-display1-fontWeight-strong: var(--salt-palette-text-display-fontWeight-strong);
1479
- --salt-text-display1-fontWeight-small: var(--salt-palette-text-display-fontWeight-small);
1480
- --salt-text-display2-fontFamily: var(--salt-palette-text-fontFamily-heading);
1481
- --salt-text-display2-fontWeight: var(--salt-palette-text-display-fontWeight);
1482
- --salt-text-display2-fontWeight-strong: var(--salt-palette-text-display-fontWeight-strong);
1483
- --salt-text-display2-fontWeight-small: var(--salt-palette-text-display-fontWeight-small);
1484
- --salt-text-display3-fontFamily: var(--salt-palette-text-fontFamily-heading);
1485
- --salt-text-display3-fontWeight: var(--salt-palette-text-display-fontWeight);
1486
- --salt-text-display3-fontWeight-strong: var(--salt-palette-text-display-fontWeight-strong);
1487
- --salt-text-display3-fontWeight-small: var(--salt-palette-text-display-fontWeight-small);
1488
- --salt-text-display4-fontFamily: var(--salt-palette-text-fontFamily-heading);
1489
- --salt-text-display4-fontWeight: var(--salt-typography-fontWeight-semiBold);
1490
- --salt-text-display4-fontWeight-strong: var(--salt-typography-fontWeight-bold);
1491
- --salt-text-display4-fontWeight-small: var(--salt-typography-fontWeight-regular);
1492
- --salt-text-code-fontFamily: var(--salt-palette-text-fontFamily-code);
1493
- }
1494
- .salt-density-touch {
1495
- --salt-text-h1-fontSize: 42px;
1496
- --salt-text-h1-lineHeight: 54px;
1497
- --salt-text-h2-fontSize: 32px;
1498
- --salt-text-h2-lineHeight: 42px;
1499
- --salt-text-h3-fontSize: 24px;
1500
- --salt-text-h3-lineHeight: 32px;
1501
- --salt-text-h4-fontSize: 16px;
1502
- --salt-text-h4-lineHeight: 20px;
1503
- --salt-text-label-fontSize: 14px;
1504
- --salt-text-label-lineHeight: 18px;
1505
- --salt-text-fontSize: 16px;
1506
- --salt-text-lineHeight: 20px;
1507
- --salt-text-minHeight: 20px;
1508
- --salt-text-display1-fontSize: 84px;
1509
- --salt-text-display1-lineHeight: 109px;
1510
- --salt-text-display2-fontSize: 58px;
1511
- --salt-text-display2-lineHeight: 76px;
1512
- --salt-text-display3-fontSize: 42px;
1513
- --salt-text-display3-lineHeight: 54px;
1514
- --salt-text-display4-fontSize: 42px;
1515
- --salt-text-display4-lineHeight: 54px;
1516
- --salt-text-notation-fontSize: 14px;
1517
- --salt-text-notation-lineHeight: 18px;
1518
- }
1519
- .salt-density-low {
1520
- --salt-text-h1-fontSize: 32px;
1521
- --salt-text-h1-lineHeight: 42px;
1522
- --salt-text-h2-fontSize: 24px;
1523
- --salt-text-h2-lineHeight: 32px;
1524
- --salt-text-h3-fontSize: 18px;
1525
- --salt-text-h3-lineHeight: 24px;
1526
- --salt-text-h4-fontSize: 14px;
1527
- --salt-text-h4-lineHeight: 18px;
1528
- --salt-text-label-fontSize: 12px;
1529
- --salt-text-label-lineHeight: 16px;
1530
- --salt-text-fontSize: 14px;
1531
- --salt-text-lineHeight: 18px;
1532
- --salt-text-minHeight: 18px;
1533
- --salt-text-display1-fontSize: 68px;
1534
- --salt-text-display1-lineHeight: 88px;
1535
- --salt-text-display2-fontSize: 46px;
1536
- --salt-text-display2-lineHeight: 60px;
1537
- --salt-text-display3-fontSize: 32px;
1538
- --salt-text-display3-lineHeight: 42px;
1539
- --salt-text-display4-fontSize: 32px;
1540
- --salt-text-display4-lineHeight: 42px;
1541
- --salt-text-notation-fontSize: 12px;
1542
- --salt-text-notation-lineHeight: 16px;
1543
- }
1544
- .salt-density-medium {
1545
- --salt-text-h1-fontSize: 24px;
1546
- --salt-text-h1-lineHeight: 32px;
1547
- --salt-text-h2-fontSize: 18px;
1548
- --salt-text-h2-lineHeight: 24px;
1549
- --salt-text-h3-fontSize: 14px;
1550
- --salt-text-h3-lineHeight: 18px;
1551
- --salt-text-h4-fontSize: 12px;
1552
- --salt-text-h4-lineHeight: 16px;
1553
- --salt-text-label-fontSize: 11px;
1554
- --salt-text-label-lineHeight: 14px;
1555
- --salt-text-fontSize: 12px;
1556
- --salt-text-lineHeight: 16px;
1557
- --salt-text-minHeight: 16px;
1558
- --salt-text-display1-fontSize: 54px;
1559
- --salt-text-display1-lineHeight: 70px;
1560
- --salt-text-display2-fontSize: 36px;
1561
- --salt-text-display2-lineHeight: 47px;
1562
- --salt-text-display3-fontSize: 24px;
1563
- --salt-text-display3-lineHeight: 32px;
1564
- --salt-text-display4-fontSize: 24px;
1565
- --salt-text-display4-lineHeight: 32px;
1566
- --salt-text-notation-fontSize: 10px;
1567
- --salt-text-notation-lineHeight: 13px;
1568
- }
1569
- .salt-density-high {
1570
- --salt-text-h1-fontSize: 18px;
1571
- --salt-text-h1-lineHeight: 24px;
1572
- --salt-text-h2-fontSize: 14px;
1573
- --salt-text-h2-lineHeight: 18px;
1574
- --salt-text-h3-fontSize: 12px;
1575
- --salt-text-h3-lineHeight: 16px;
1576
- --salt-text-h4-fontSize: 11px;
1577
- --salt-text-h4-lineHeight: 14px;
1578
- --salt-text-label-fontSize: 10px;
1579
- --salt-text-label-lineHeight: 13px;
1580
- --salt-text-fontSize: 11px;
1581
- --salt-text-lineHeight: 14px;
1582
- --salt-text-minHeight: 14px;
1583
- --salt-text-display1-fontSize: 42px;
1584
- --salt-text-display1-lineHeight: 54px;
1585
- --salt-text-display2-fontSize: 28px;
1586
- --salt-text-display2-lineHeight: 36px;
1587
- --salt-text-display3-fontSize: 18px;
1588
- --salt-text-display3-lineHeight: 24px;
1589
- --salt-text-display4-fontSize: 18px;
1590
- --salt-text-display4-lineHeight: 24px;
1591
- --salt-text-notation-fontSize: 8px;
1592
- --salt-text-notation-lineHeight: 10px;
1593
- }
1594
-
1595
- /* css/characteristics/content.css */
1596
- .salt-theme {
1597
- --salt-content-primary-foreground: var(--salt-palette-neutral-primary-foreground);
1598
- --salt-content-primary-foreground-disabled: var(--salt-palette-neutral-primary-foreground-disabled);
1599
- --salt-content-secondary-foreground: var(--salt-palette-neutral-secondary-foreground);
1600
- --salt-content-secondary-foreground-disabled: var(--salt-palette-neutral-secondary-foreground-disabled);
1601
- --salt-content-bold-foreground: var(--salt-palette-interact-cta-foreground);
1602
- --salt-content-bold-foreground-disabled: var(--salt-palette-interact-cta-foreground-disabled);
1603
- --salt-content-foreground-hover: var(--salt-palette-navigate-foreground-hover);
1604
- --salt-content-foreground-active: var(--salt-palette-navigate-foreground-active);
1605
- --salt-content-foreground-visited: var(--salt-palette-navigate-foreground-visited);
1606
- --salt-content-foreground-highlight: var(--salt-palette-interact-background-active);
1607
- }
1608
-
1609
- /* css/characteristics/track.css */
1610
- .salt-theme {
1611
- --salt-track-borderStyle: solid;
1612
- --salt-track-borderStyle-active: solid;
1613
- --salt-track-borderStyle-complete: solid;
1614
- --salt-track-borderStyle-incomplete: dotted;
1615
- --salt-track-borderColor: var(--salt-palette-neutral-secondary-border);
1616
- }
1617
-
1618
- /* css/deprecated/characteristics.css */
1619
- .salt-theme {
1620
- --salt-differential-positive-foreground: var(--salt-palette-positive-foreground);
1621
- --salt-differential-negative-foreground: var(--salt-palette-negative-foreground);
1622
- --salt-editable-tertiary-background: var(--salt-palette-neutral-tertiary-background);
1623
- --salt-editable-tertiary-background-active: var(--salt-palette-neutral-tertiary-background);
1624
- --salt-editable-tertiary-background-disabled: var(--salt-palette-neutral-tertiary-background-disabled);
1625
- --salt-editable-tertiary-background-hover: var(--salt-palette-neutral-tertiary-background);
1626
- --salt-editable-tertiary-background-readonly: var(--salt-palette-neutral-tertiary-background-readonly);
1627
- --salt-measured-borderStyle: solid;
1628
- --salt-measured-borderStyle-active: solid;
1629
- --salt-measured-borderStyle-complete: solid;
1630
- --salt-measured-borderStyle-incomplete: dotted;
1631
- --salt-measured-borderWidth: 2px;
1632
- --salt-measured-borderWidth-active: 2px;
1633
- --salt-measured-borderWidth-complete: 2px;
1634
- --salt-measured-borderWidth-incomplete: 2px;
1635
- --salt-measured-fontWeight: var(--salt-typography-fontWeight-semiBold);
1636
- --salt-measured-textAlign: center;
1637
- --salt-measured-background: var(--salt-palette-measured-background);
1638
- --salt-measured-background-disabled: var(--salt-palette-measured-background-disabled);
1639
- --salt-measured-borderColor: var(--salt-palette-measured-border);
1640
- --salt-measured-borderColor-disabled: var(--salt-palette-measured-border-disabled);
1641
- --salt-measured-fill: var(--salt-palette-measured-fill);
1642
- --salt-measured-fill-disabled: var(--salt-palette-measured-fill-disabled);
1643
- --salt-measured-foreground: var(--salt-palette-measured-foreground);
1644
- --salt-measured-foreground-hover: var(--salt-palette-measured-foreground-active);
1645
- --salt-measured-foreground-active: var(--salt-palette-measured-foreground-active);
1646
- --salt-measured-foreground-undo: var(--salt-palette-measured-foreground-active);
1647
- --salt-measured-foreground-activeDisabled: var(--salt-palette-measured-foreground-activeDisabled);
1648
- --salt-measured-foreground-disabled: var(--salt-palette-measured-foreground-disabled);
1649
- --salt-overlayable-shadow-scroll-color: var(--salt-shadow-1-color);
1650
- --salt-overlayable-shadow-borderRegion: var(--salt-shadow-2);
1651
- --salt-selectable-foreground-partial: var(--salt-palette-interact-foreground-partial);
1652
- --salt-selectable-foreground-partialDisabled: var(--salt-palette-interact-foreground-partialDisabled);
1653
- --salt-selectable-cta-foreground: var(--salt-palette-interact-foreground);
1654
- --salt-selectable-cta-foreground-disabled: var(--salt-palette-interact-foreground-disabled);
1655
- --salt-selectable-cta-foreground-hover: var(--salt-palette-interact-cta-foreground-hover);
1656
- --salt-selectable-cta-foreground-selected: var(--salt-palette-interact-cta-foreground-active);
1657
- --salt-selectable-cta-foreground-selectedDisabled: var(--salt-palette-interact-cta-foreground-activeDisabled);
1658
- --salt-selectable-cta-background: var(--salt-palette-interact-background);
1659
- --salt-selectable-cta-background-disabled: var(--salt-palette-interact-background-disabled);
1660
- --salt-selectable-cta-background-hover: var(--salt-palette-interact-cta-background-hover);
1661
- --salt-selectable-cta-background-selected: var(--salt-palette-interact-cta-background-active);
1662
- --salt-selectable-cta-background-selectedDisabled: var(--salt-palette-interact-cta-background-activeDisabled);
1663
- --salt-selectable-primary-foreground: var(--salt-palette-interact-foreground);
1664
- --salt-selectable-primary-foreground-disabled: var(--salt-palette-interact-foreground-disabled);
1665
- --salt-selectable-primary-foreground-hover: var(--salt-palette-interact-primary-foreground-hover);
1666
- --salt-selectable-primary-foreground-selected: var(--salt-palette-interact-primary-foreground-active);
1667
- --salt-selectable-primary-foreground-selectedDisabled: var(--salt-palette-interact-primary-foreground-activeDisabled);
1668
- --salt-selectable-primary-background: var(--salt-palette-interact-background);
1669
- --salt-selectable-primary-background-disabled: var(--salt-palette-interact-background-disabled);
1670
- --salt-selectable-primary-background-hover: var(--salt-palette-interact-primary-background-hover);
1671
- --salt-selectable-primary-background-selected: var(--salt-palette-interact-primary-background-active);
1672
- --salt-selectable-primary-background-selectedDisabled: var(--salt-palette-interact-primary-background-activeDisabled);
1673
- --salt-selectable-secondary-foreground: var(--salt-palette-interact-foreground);
1674
- --salt-selectable-secondary-foreground-disabled: var(--salt-palette-interact-foreground-disabled);
1675
- --salt-selectable-secondary-foreground-hover: var(--salt-palette-interact-secondary-foreground-hover);
1676
- --salt-selectable-secondary-foreground-selected: var(--salt-palette-interact-secondary-foreground-active);
1677
- --salt-selectable-secondary-foreground-selectedDisabled: var(--salt-palette-interact-secondary-foreground-activeDisabled);
1678
- --salt-selectable-secondary-background: var(--salt-palette-interact-background);
1679
- --salt-selectable-secondary-background-disabled: var(--salt-palette-interact-background-disabled);
1680
- --salt-selectable-secondary-background-hover: var(--salt-palette-interact-secondary-background-hover);
1681
- --salt-selectable-secondary-background-selected: var(--salt-palette-interact-secondary-background-active);
1682
- --salt-selectable-secondary-background-selectedDisabled: var(--salt-palette-interact-secondary-background-activeDisabled);
1683
- --salt-status-info-background-emphasize: var(--salt-status-info-background);
1684
- --salt-status-success-background-emphasize: var(--salt-status-success-background);
1685
- --salt-status-warning-background-emphasize: var(--salt-status-warning-background);
1686
- --salt-status-error-background-emphasize: var(--salt-status-error-background);
1687
- --salt-status-info-foreground-disabled: var(--salt-palette-info-foreground-disabled);
1688
- --salt-status-success-foreground-disabled: var(--salt-palette-success-foreground-disabled);
1689
- --salt-status-warning-foreground-disabled: var(--salt-palette-warning-foreground-disabled);
1690
- --salt-status-error-foreground-disabled: var(--salt-palette-error-foreground-disabled);
1691
- --salt-status-static-foreground-disabled: var(--salt-palette-neutral-secondary-foreground-disabled);
1692
- --salt-status-negative-foreground-disabled: var(--salt-palette-negative-foreground-disabled);
1693
- --salt-status-positive-foreground-disabled: var(--salt-palette-positive-foreground-disabled);
1694
- --salt-status-info-borderColor-disabled: var(--salt-palette-info-border-disabled);
1695
- --salt-status-success-borderColor-disabled: var(--salt-palette-success-border-disabled);
1696
- --salt-status-warning-borderColor-disabled: var(--salt-palette-warning-border-disabled);
1697
- --salt-status-error-borderColor-disabled: var(--salt-palette-error-border-disabled);
1698
- --salt-status-info-foreground: var(--salt-palette-info-foreground);
1699
- --salt-status-error-foreground: var(--salt-palette-error-foreground);
1700
- --salt-status-warning-foreground: var(--salt-palette-warning-foreground);
1701
- --salt-status-success-foreground: var(--salt-palette-success-foreground);
1702
- --salt-actionable-letterSpacing: 0.6px;
1703
- --salt-actionable-textTransform: uppercase;
1704
- --salt-actionable-textAlign: center;
1705
- --salt-actionable-primary-fontWeight: var(--salt-typography-fontWeight-bold);
1706
- --salt-actionable-cta-fontWeight: var(--salt-typography-fontWeight-bold);
1707
- --salt-actionable-secondary-fontWeight: var(--salt-typography-fontWeight-semiBold);
1708
- --salt-text-background-selected: var(--salt-content-foreground-highlight);
1709
- --salt-text-link-foreground-hover: var(--salt-palette-navigate-foreground-hover);
1710
- --salt-text-link-foreground-active: var(--salt-palette-navigate-foreground-active);
1711
- --salt-text-link-foreground-visited: var(--salt-palette-navigate-foreground-visited);
1712
- --salt-text-link-textDecoration: underline;
1713
- --salt-text-link-textDecoration-hover: none;
1714
- --salt-text-link-textDecoration-selected: underline;
1715
- --salt-text-primary-foreground: var(--salt-palette-neutral-primary-foreground);
1716
- --salt-text-primary-foreground-disabled: var(--salt-palette-neutral-primary-foreground-disabled);
1717
- --salt-text-secondary-foreground: var(--salt-palette-neutral-secondary-foreground);
1718
- --salt-text-secondary-foreground-disabled: var(--salt-palette-neutral-secondary-foreground-disabled);
1719
- --salt-navigable-primary-background: var(--salt-palette-navigate-primary-background);
1720
- --salt-navigable-primary-background-hover: var(--salt-palette-navigate-primary-background-hover);
1721
- --salt-navigable-primary-background-active: var(--salt-palette-navigate-primary-background-active);
1722
- --salt-navigable-secondary-background: var(--salt-palette-navigate-secondary-background);
1723
- --salt-navigable-secondary-background-hover: var(--salt-palette-navigate-secondary-background-hover);
1724
- --salt-navigable-secondary-background-active: var(--salt-palette-navigate-secondary-background-active);
1725
- --salt-navigable-tertiary-background: var(--salt-palette-navigate-tertiary-background);
1726
- --salt-navigable-tertiary-background-hover: var(--salt-palette-navigate-tertiary-background-hover);
1727
- --salt-navigable-tertiary-background-active: var(--salt-palette-navigate-tertiary-background-active);
1728
- --salt-navigable-indicator-activeDisabled: var(--salt-palette-navigate-indicator-activeDisabled);
1729
- --salt-accent-fontWeight: var(--salt-typography-fontWeight-semiBold);
1730
- --salt-accent-foreground-disabled: var(--salt-palette-accent-foreground-disabled);
1731
- --salt-accent-background-disabled: var(--salt-palette-accent-background-disabled);
1732
- --salt-accent-borderColor-disabled: var(--salt-palette-accent-border-disabled);
1733
- --salt-track-borderWidth: 2px;
1734
- --salt-track-borderWidth-active: 2px;
1735
- --salt-track-borderWidth-complete: 2px;
1736
- --salt-track-borderWidth-incomplete: 2px;
1737
- --salt-track-fontWeight: var(--salt-typography-fontWeight-semiBold);
1738
- --salt-track-textAlign: center;
1739
- --salt-track-background: var(--salt-palette-track-background);
1740
- --salt-track-background-disabled: var(--salt-palette-track-background-disabled);
1741
- --salt-track-borderColor-disabled: var(--salt-palette-track-border-disabled);
1742
- --salt-taggable-cursor-hover: pointer;
1743
- --salt-taggable-cursor-active: pointer;
1744
- --salt-taggable-cursor-disabled: not-allowed;
1745
- --salt-taggable-background: var(--salt-palette-interact-primary-background);
1746
- --salt-taggable-background-hover: var(--salt-palette-interact-primary-background-hover);
1747
- --salt-taggable-background-active: var(--salt-palette-interact-primary-background-active);
1748
- --salt-taggable-background-disabled: var(--salt-palette-interact-primary-background-disabled);
1749
- --salt-taggable-foreground: var(--salt-palette-interact-primary-foreground);
1750
- --salt-taggable-foreground-hover: var(--salt-palette-interact-primary-foreground-hover);
1751
- --salt-taggable-foreground-active: var(--salt-palette-interact-primary-foreground-active);
1752
- --salt-taggable-foreground-disabled: var(--salt-palette-interact-primary-foreground-disabled);
1753
- }
1754
- .salt-density-high {
1755
- --salt-accent-fontSize: 8px;
1756
- --salt-accent-lineHeight: 11px;
1757
- }
1758
- .salt-density-medium {
1759
- --salt-accent-fontSize: 10px;
1760
- --salt-accent-lineHeight: 13px;
1761
- }
1762
- .salt-density-low {
1763
- --salt-accent-fontSize: 12px;
1764
- --salt-accent-lineHeight: 16px;
1765
- }
1766
- .salt-density-touch {
1767
- --salt-accent-fontSize: 14px;
1768
- --salt-accent-lineHeight: 18px;
1769
- }
1770
-
1771
- /* css/deprecated/fade.css */
1772
- .salt-theme {
1773
- --salt-color-orange-500-fade-foreground: rgba(234, 115, 25, var(--salt-palette-opacity-foreground));
1774
- --salt-color-orange-700-fade-foreground: rgba(214, 85, 19, var(--salt-palette-opacity-foreground));
1775
- --salt-color-orange-400-fade-background: rgba(238, 133, 43, var(--salt-palette-opacity-background));
1776
- --salt-color-orange-600-fade-background: rgba(224, 101, 25, var(--salt-palette-opacity-background));
1777
- --salt-color-blue-300-fade-fill: rgba(51, 141, 205, var(--salt-palette-opacity-fill));
1778
- --salt-color-blue-500-fade-fill: rgba(38, 112, 169, var(--salt-palette-opacity-fill));
1779
- }
1780
-
1781
- /* css/deprecated/foundations.css */
1782
- .salt-theme {
1783
- --salt-delay-instant: 100ms;
1784
- --salt-delay-perceptible: 300ms;
1785
- --salt-delay-notable: 1000ms;
1786
- --salt-delay-cutoff: 10000ms;
1787
- --salt-size-icon-base: var(--salt-icon-size-base);
1788
- --salt-opacity-1: 0.15;
1789
- --salt-opacity-2: 0.25;
1790
- --salt-opacity-3: 0.4;
1791
- --salt-opacity-4: 0.7;
1792
- --salt-shadow-0: none;
1793
- --salt-shadow-1: 0 1px 3px 0 var(--salt-shadow-1-color);
1794
- --salt-shadow-2: 0 2px 4px 0 var(--salt-shadow-2-color);
1795
- --salt-shadow-3: 0 4px 8px 0 var(--salt-shadow-3-color);
1796
- --salt-shadow-4: 0 6px 10px 0 var(--salt-shadow-4-color);
1797
- --salt-shadow-5: 0 12px 40px 0 var(--salt-shadow-5-color);
1798
- --salt-typography-fontFamily: var(--salt-typography-fontFamily-openSans);
1799
- --salt-typography-fontFamily-code: var(--salt-typography-fontFamily-ptMono);
1800
- }
1801
- .salt-theme[data-mode=light] {
1802
- --salt-shadow-1-color: rgba(0, 0, 0, 0.1);
1803
- --salt-shadow-2-color: rgba(0, 0, 0, 0.1);
1804
- --salt-shadow-3-color: rgba(0, 0, 0, 0.15);
1805
- --salt-shadow-4-color: rgba(0, 0, 0, 0.2);
1806
- --salt-shadow-5-color: rgba(0, 0, 0, 0.3);
1807
- }
1808
- .salt-theme[data-mode=dark] {
1809
- --salt-shadow-1-color: rgba(0, 0, 0, 0.5);
1810
- --salt-shadow-2-color: rgba(0, 0, 0, 0.5);
1811
- --salt-shadow-3-color: rgba(0, 0, 0, 0.55);
1812
- --salt-shadow-4-color: rgba(0, 0, 0, 0.55);
1813
- --salt-shadow-5-color: rgba(0, 0, 0, 0.65);
1814
- }
1815
- .salt-density-touch,
1816
- .salt-density-low,
1817
- .salt-density-medium,
1818
- .salt-density-high {
1819
- --salt-size-selection: var(--salt-size-selectable);
1820
- --salt-size-brandBar: 4px;
1821
- --salt-size-graphic-small: 12px;
1822
- --salt-size-graphic-medium: 24px;
1823
- --salt-size-graphic-large: 48px;
1824
- --salt-size-divider-height: var(--salt-size-separator-height);
1825
- --salt-size-divider-strokeWidth: var(--salt-size-separator-strokeWidth);
1826
- --salt-size-detail: var(--salt-size-compact);
1827
- --salt-size-basis-unit: 4px;
1828
- --salt-size-adornmentGap: calc(0.75 * var(--salt-size-unit));
1829
- --salt-size-container-spacing: calc(3 * var(--salt-size-unit));
1830
- --salt-size-separator-strokeWidth: 1px;
1831
- --salt-size-separator-height: calc(var(--salt-size-compact) + 1.5 * var(--salt-size-basis-unit));
1832
- --salt-size-sharktooth-height: 5px;
1833
- --salt-size-sharktooth-width: 10px;
1834
- --salt-size-stackable: calc(var(--salt-size-base) + var(--salt-size-unit));
1835
- --salt-zIndex-docked: 1050;
1836
- }
1837
- .salt-density-high {
1838
- --salt-size-unit: calc(var(--salt-size-basis-unit) * 1);
1839
- --salt-size-compact: calc(var(--salt-size-basis-unit) * 1.5);
1840
- --salt-size-accent: calc(var(--salt-size-basis-unit) * 0.5);
1841
- --salt-icon-size-base: 10px;
1842
- --salt-icon-size-status-adornment: 6px;
1843
- }
1844
- .salt-density-medium {
1845
- --salt-size-unit: calc(var(--salt-size-basis-unit) * 2);
1846
- --salt-size-compact: calc(var(--salt-size-basis-unit) * 2);
1847
- --salt-size-accent: calc(var(--salt-size-basis-unit) * 1);
1848
- --salt-icon-size-base: 12px;
1849
- --salt-icon-size-status-adornment: 8px;
1850
- }
1851
- .salt-density-low {
1852
- --salt-size-unit: calc(var(--salt-size-basis-unit) * 3);
1853
- --salt-size-compact: calc(var(--salt-size-basis-unit) * 2.5);
1854
- --salt-size-accent: calc(var(--salt-size-basis-unit) * 1.5);
1855
- --salt-icon-size-base: 14px;
1856
- --salt-icon-size-status-adornment: 10px;
1857
- }
1858
- .salt-density-touch {
1859
- --salt-size-unit: calc(var(--salt-size-basis-unit) * 4);
1860
- --salt-size-compact: calc(var(--salt-size-basis-unit) * 3);
1861
- --salt-size-accent: calc(var(--salt-size-basis-unit) * 2);
1862
- --salt-icon-size-base: 16px;
1863
- --salt-icon-size-status-adornment: 12px;
1864
- }
1865
-
1866
- /* css/deprecated/palette.css */
1867
- .salt-theme {
1868
- --salt-palette-error-background-emphasize: var(--salt-palette-error-background);
1869
- --salt-palette-warning-background-emphasize: var(--salt-palette-warning-background);
1870
- --salt-palette-success-background-emphasize: var(--salt-palette-success-background);
1871
- --salt-palette-info-background-emphasize: var(--salt-palette-info-background);
1872
- --salt-palette-opacity-fill: var(--salt-palette-opacity-disabled);
1873
- --salt-palette-opacity-stroke: var(--salt-palette-opacity-disabled);
1874
- --salt-palette-opacity-background: var(--salt-palette-opacity-disabled);
1875
- --salt-palette-opacity-border: var(--salt-palette-opacity-disabled);
1876
- --salt-palette-opacity-foreground: var(--salt-palette-opacity-disabled);
1877
- }
1878
- .salt-theme[data-mode=light] {
1879
- --salt-palette-interact-foreground-partial: var(--salt-color-blue-600);
1880
- --salt-palette-interact-foreground-partialDisabled: var(--salt-color-blue-600-fade-foreground);
1881
- --salt-palette-interact-cta-background-activeDisabled: var(--salt-color-blue-700-fade-background);
1882
- --salt-palette-interact-cta-foreground-activeDisabled: var(--salt-color-white-fade-foreground);
1883
- --salt-palette-interact-primary-foreground-activeDisabled: var(--salt-color-white-fade-foreground);
1884
- --salt-palette-interact-primary-background-activeDisabled: var(--salt-color-gray-200-fade-background);
1885
- --salt-palette-interact-secondary-foreground-activeDisabled: var(--salt-color-white-fade-foreground);
1886
- --salt-palette-interact-secondary-background-activeDisabled: var(--salt-color-gray-200-fade-background);
1887
- --salt-palette-measured-fill: var(--salt-color-blue-500);
1888
- --salt-palette-measured-fill-disabled: var(--salt-color-blue-500-fade-fill);
1889
- --salt-palette-measured-foreground: var(--salt-color-gray-90);
1890
- --salt-palette-measured-foreground-active: var(--salt-color-blue-500);
1891
- --salt-palette-measured-foreground-disabled: var(--salt-color-gray-90-fade-foreground);
1892
- --salt-palette-measured-foreground-activeDisabled: var(--salt-color-blue-500-fade-fill);
1893
- --salt-palette-measured-background: var(--salt-color-gray-60);
1894
- --salt-palette-measured-background-disabled: var(--salt-color-gray-60-fade-background);
1895
- --salt-palette-measured-border: var(--salt-color-gray-90);
1896
- --salt-palette-measured-border-disabled: var(--salt-color-gray-90-fade-border);
1897
- --salt-palette-neutral-tertiary-background-readonly: transparent;
1898
- --salt-palette-error-foreground-disabled: var(--salt-color-red-500-fade-foreground);
1899
- --salt-palette-error-border-disabled: var(--salt-color-red-500-fade-border);
1900
- --salt-palette-error-foreground: var(--salt-color-red-500);
1901
- --salt-palette-info-border-disabled: var(--salt-color-blue-500-fade-border);
1902
- --salt-palette-info-foreground-disabled: var(--salt-color-blue-500-fade-foreground);
1903
- --salt-palette-info-foreground: var(--salt-color-blue-500);
1904
- --salt-palette-negative-foreground-disabled: var(--salt-color-red-700-fade-foreground);
1905
- --salt-palette-positive-foreground-disabled: var(--salt-color-green-700-fade-foreground);
1906
- --salt-palette-success-border-disabled: var(--salt-color-green-500-fade-border);
1907
- --salt-palette-success-foreground-disabled: var(--salt-color-green-500-fade-foreground);
1908
- --salt-palette-success-foreground: var(--salt-color-green-500);
1909
- --salt-palette-warning-foreground-disabled: var(--salt-color-orange-700-fade-foreground);
1910
- --salt-palette-warning-border-disabled: var(--salt-color-orange-700-fade-border);
1911
- --salt-palette-warning-foreground: var(--salt-color-orange-700);
1912
- --salt-palette-navigate-primary-background: transparent;
1913
- --salt-palette-navigate-primary-background-active: transparent;
1914
- --salt-palette-navigate-primary-background-hover: var(--salt-color-gray-20);
1915
- --salt-palette-navigate-secondary-background: transparent;
1916
- --salt-palette-navigate-secondary-background-active: transparent;
1917
- --salt-palette-navigate-secondary-background-hover: var(--salt-color-gray-30);
1918
- --salt-palette-navigate-tertiary-background: transparent;
1919
- --salt-palette-navigate-tertiary-background-active: transparent;
1920
- --salt-palette-navigate-tertiary-background-hover: var(--salt-color-gray-20);
1921
- --salt-palette-navigate-indicator-activeDisabled: var(--salt-color-orange-600-fade-border);
1922
- --salt-palette-track-border: var(--salt-color-gray-90);
1923
- --salt-palette-track-border-disabled: var(--salt-color-gray-90-fade-border);
1924
- --salt-palette-track-background: var(--salt-color-gray-60);
1925
- --salt-palette-track-background-disabled: var(--salt-color-gray-60-fade-background);
1926
- --salt-palette-accent-background-disabled: var(--salt-color-blue-500-fade-background);
1927
- --salt-palette-accent-foreground-disabled: var(--salt-color-white-fade-foreground);
1928
- --salt-palette-accent-border-disabled: var(--salt-color-blue-500-fade-border);
1929
- }
1930
- .salt-theme[data-mode=dark] {
1931
- --salt-palette-interact-foreground-partial: var(--salt-color-blue-100);
1932
- --salt-palette-interact-foreground-partialDisabled: var(--salt-color-blue-100-fade-foreground);
1933
- --salt-palette-interact-cta-background-activeDisabled: var(--salt-color-blue-700-fade-background);
1934
- --salt-palette-interact-cta-foreground-activeDisabled: var(--salt-color-white-fade-foreground);
1935
- --salt-palette-interact-primary-foreground-activeDisabled: var(--salt-color-gray-900-fade-foreground);
1936
- --salt-palette-interact-primary-background-activeDisabled: var(--salt-color-gray-70-fade-background);
1937
- --salt-palette-interact-secondary-foreground-activeDisabled: var(--salt-color-gray-900-fade-foreground);
1938
- --salt-palette-interact-secondary-background-activeDisabled: var(--salt-color-gray-70-fade-background);
1939
- --salt-palette-measured-fill: var(--salt-color-blue-300);
1940
- --salt-palette-measured-fill-disabled: var(--salt-color-blue-300-fade-fill);
1941
- --salt-palette-measured-foreground: var(--salt-color-gray-90);
1942
- --salt-palette-measured-foreground-active: var(--salt-color-blue-300);
1943
- --salt-palette-measured-foreground-disabled: var(--salt-color-gray-90-fade-foreground);
1944
- --salt-palette-measured-foreground-activeDisabled: var(--salt-color-blue-300-fade-fill);
1945
- --salt-palette-measured-background: var(--salt-color-gray-300);
1946
- --salt-palette-measured-background-disabled: var(--salt-color-gray-300-fade-background);
1947
- --salt-palette-measured-border: var(--salt-color-gray-90);
1948
- --salt-palette-measured-border-disabled: var(--salt-color-gray-90-fade-border);
1949
- --salt-palette-neutral-tertiary-background-readonly: transparent;
1950
- --salt-palette-error-foreground-disabled: var(--salt-color-red-500-fade-foreground);
1951
- --salt-palette-error-border-disabled: var(--salt-color-red-500-fade-border);
1952
- --salt-palette-error-foreground: var(--salt-color-red-500);
1953
- --salt-palette-info-border-disabled: var(--salt-color-blue-500-fade-border);
1954
- --salt-palette-info-foreground-disabled: var(--salt-color-blue-500-fade-foreground);
1955
- --salt-palette-info-foreground: var(--salt-color-blue-500);
1956
- --salt-palette-negative-foreground-disabled: var(--salt-color-red-300-fade-foreground);
1957
- --salt-palette-positive-foreground-disabled: var(--salt-color-green-300-fade-foreground);
1958
- --salt-palette-success-border-disabled: var(--salt-color-green-400-fade-border);
1959
- --salt-palette-success-foreground-disabled: var(--salt-color-green-400-fade-foreground);
1960
- --salt-palette-success-foreground: var(--salt-color-green-400);
1961
- --salt-palette-warning-foreground-disabled: var(--salt-color-orange-500-fade-foreground);
1962
- --salt-palette-warning-border-disabled: var(--salt-color-orange-500-fade-border);
1963
- --salt-palette-warning-foreground: var(--salt-color-orange-500);
1964
- --salt-palette-navigate-primary-background: transparent;
1965
- --salt-palette-navigate-primary-background-active: transparent;
1966
- --salt-palette-navigate-primary-background-hover: var(--salt-color-gray-700);
1967
- --salt-palette-navigate-secondary-background: transparent;
1968
- --salt-palette-navigate-secondary-background-active: transparent;
1969
- --salt-palette-navigate-secondary-background-hover: var(--salt-color-gray-600);
1970
- --salt-palette-navigate-tertiary-background: transparent;
1971
- --salt-palette-navigate-tertiary-background-active: transparent;
1972
- --salt-palette-navigate-tertiary-background-hover: var(--salt-color-gray-700);
1973
- --salt-palette-navigate-indicator-activeDisabled: var(--salt-color-orange-400-fade-border);
1974
- --salt-palette-track-border: var(--salt-color-gray-90);
1975
- --salt-palette-track-border-disabled: var(--salt-color-gray-90-fade-border);
1976
- --salt-palette-track-background: var(--salt-color-gray-300);
1977
- --salt-palette-track-background-disabled: var(--salt-color-gray-300-fade-background);
1978
- --salt-palette-accent-background-disabled: var(--salt-color-blue-500-fade-background);
1979
- --salt-palette-accent-foreground-disabled: var(--salt-color-white-fade-foreground);
1980
- --salt-palette-accent-border-disabled: var(--salt-color-blue-500-fade-border);
1981
- }
1982
-
1983
- /* css/theme.css */
1984
-
1985
- /* index.css */
1
+ @import url(css/global.css);
2
+ @import url(css/theme.css);