@salt-ds/theme 0.0.0-snapshot-20240523122351 → 0.0.0-snapshot-20240725145339

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