@salt-ds/theme 0.0.0-snapshot-20230705144029 → 0.0.0-snapshot-20231213150517

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 (4) hide show
  1. package/css/global.css +2 -2
  2. package/css/theme.css +611 -480
  3. package/index.css +613 -482
  4. package/package.json +10 -1
package/css/theme.css CHANGED
@@ -15,10 +15,10 @@
15
15
  --salt-animation-slide-in-left: slide-in-left var(--salt-animation-duration) var(--salt-animation-timing-function);
16
16
  --salt-animation-slide-in-right: slide-in-right var(--salt-animation-duration) var(--salt-animation-timing-function);
17
17
  --salt-animation-slide-in-bottom: slide-in-bottom var(--salt-animation-duration) var(--salt-animation-timing-function);
18
- --salt-animation-slide-out-top: slide-out-top var(--salt-animation-duration) var(--salt-animation-timing-function);
19
- --salt-animation-slide-out-left: slide-out-left var(--salt-animation-duration) var(--salt-animation-timing-function);
20
- --salt-animation-slide-out-right: slide-out-right var(--salt-animation-duration) var(--salt-animation-timing-function);
21
- --salt-animation-slide-out-bottom: slide-out-bottom var(--salt-animation-duration) var(--salt-animation-timing-function);
18
+ --salt-animation-slide-out-top: slide-out-top var(--salt-animation-duration) var(--salt-animation-timing-function) both;
19
+ --salt-animation-slide-out-left: slide-out-left var(--salt-animation-duration) var(--salt-animation-timing-function) both;
20
+ --salt-animation-slide-out-right: slide-out-right var(--salt-animation-duration) var(--salt-animation-timing-function) both;
21
+ --salt-animation-slide-out-bottom: slide-out-bottom var(--salt-animation-duration) var(--salt-animation-timing-function) both;
22
22
  --salt-animation-fade-in-back: fade-in-back var(--salt-animation-duration) var(--salt-animation-timing-function);
23
23
  --salt-animation-fade-in-forward: fade-in-forward var(--salt-animation-duration) var(--salt-animation-timing-function);
24
24
  --salt-animation-fade-in-center: fade-in-center var(--salt-animation-duration) var(--salt-animation-timing-function);
@@ -251,17 +251,9 @@
251
251
  --salt-color-gray-900: rgb(22, 22, 22);
252
252
  }
253
253
 
254
- /* css/foundations/delay.css */
255
- .salt-theme {
256
- --salt-delay-instant: 100ms;
257
- --salt-delay-perceptible: 300ms;
258
- --salt-delay-notable: 1000ms;
259
- --salt-delay-cutoff: 10000ms;
260
- }
261
-
262
254
  /* css/foundations/duration.css */
263
255
  .salt-theme {
264
- --salt-duration-instant: 100ms;
256
+ --salt-duration-instant: 0ms;
265
257
  --salt-duration-perceptible: 300ms;
266
258
  --salt-duration-notable: 1000ms;
267
259
  --salt-duration-cutoff: 10000ms;
@@ -269,190 +261,145 @@
269
261
 
270
262
  /* css/foundations/fade.css */
271
263
  .salt-theme {
272
- --salt-color-blue-100-fade-foreground: rgba(100, 177, 228, var(--salt-palette-opacity-foreground));
273
- --salt-color-blue-500-fade-foreground: rgba(38, 112, 169, var(--salt-palette-opacity-foreground));
274
- --salt-color-blue-600-fade-foreground: rgba(21, 92, 147, var(--salt-palette-opacity-foreground));
275
- --salt-color-gray-200-fade-foreground: rgba(97, 101, 110, var(--salt-palette-opacity-foreground));
276
- --salt-color-gray-70-fade-foreground: rgba(180, 183, 190, var(--salt-palette-opacity-foreground));
277
- --salt-color-gray-90-fade-foreground: rgba(132, 135, 142, var(--salt-palette-opacity-foreground));
278
- --salt-color-gray-900-fade-foreground: rgba(22, 22, 22, var(--salt-palette-opacity-foreground));
279
- --salt-color-green-300-fade-foreground: rgba(60, 171, 96, var(--salt-palette-opacity-foreground));
280
- --salt-color-green-400-fade-foreground: rgba(48, 156, 90, var(--salt-palette-opacity-foreground));
281
- --salt-color-green-500-fade-foreground: rgba(36, 135, 75, var(--salt-palette-opacity-foreground));
282
- --salt-color-green-700-fade-foreground: rgba(12, 93, 46, var(--salt-palette-opacity-foreground));
283
- --salt-color-orange-500-fade-foreground: rgba(234, 115, 25, var(--salt-palette-opacity-foreground));
284
- --salt-color-orange-700-fade-foreground: rgba(214, 85, 19, var(--salt-palette-opacity-foreground));
285
- --salt-color-red-300-fade-foreground: rgba(255, 89, 66, var(--salt-palette-opacity-foreground));
286
- --salt-color-red-500-fade-foreground: rgba(227, 43, 22, var(--salt-palette-opacity-foreground));
287
- --salt-color-red-700-fade-foreground: rgba(166, 21, 11, var(--salt-palette-opacity-foreground));
288
- --salt-color-white-fade-foreground: rgba(255, 255, 255, var(--salt-palette-opacity-foreground));
289
- --salt-color-blue-500-fade-border: rgba(38, 112, 169, var(--salt-palette-opacity-border));
290
- --salt-color-gray-60-fade-border: rgba(197, 201, 208, var(--salt-palette-opacity-border));
291
- --salt-color-gray-90-fade-border: rgba(132, 135, 142, var(--salt-palette-opacity-border));
292
- --salt-color-gray-200-fade-border: rgba(97, 101, 110, var(--salt-palette-opacity-border));
293
- --salt-color-gray-300-fade-border: rgba(76, 80, 91, var(--salt-palette-opacity-border));
294
- --salt-color-green-400-fade-border: rgba(48, 156, 90, var(--salt-palette-opacity-border));
295
- --salt-color-green-500-fade-border: rgba(36, 135, 75, var(--salt-palette-opacity-border));
296
- --salt-color-orange-400-fade-border: rgba(238, 133, 43, var(--salt-palette-opacity-border));
297
- --salt-color-orange-500-fade-border: rgba(234, 115, 25, var(--salt-palette-opacity-border));
298
- --salt-color-orange-600-fade-border: rgba(224, 101, 25, var(--salt-palette-opacity-border));
299
- --salt-color-orange-700-fade-border: rgba(214, 85, 19, var(--salt-palette-opacity-border));
300
- --salt-color-red-500-fade-border: rgba(227, 43, 22, var(--salt-palette-opacity-border));
264
+ --salt-color-blue-100-fade-foreground: rgba(100, 177, 228, var(--salt-palette-opacity-disabled));
265
+ --salt-color-blue-500-fade-foreground: rgba(38, 112, 169, var(--salt-palette-opacity-disabled));
266
+ --salt-color-blue-600-fade-foreground: rgba(21, 92, 147, var(--salt-palette-opacity-disabled));
267
+ --salt-color-gray-200-fade-foreground: rgba(97, 101, 110, var(--salt-palette-opacity-disabled));
268
+ --salt-color-gray-70-fade-foreground: rgba(180, 183, 190, var(--salt-palette-opacity-disabled));
269
+ --salt-color-gray-90-fade-foreground: rgba(132, 135, 142, var(--salt-palette-opacity-disabled));
270
+ --salt-color-gray-900-fade-foreground: rgba(22, 22, 22, var(--salt-palette-opacity-disabled));
271
+ --salt-color-green-300-fade-foreground: rgba(60, 171, 96, var(--salt-palette-opacity-disabled));
272
+ --salt-color-green-400-fade-foreground: rgba(48, 156, 90, var(--salt-palette-opacity-disabled));
273
+ --salt-color-green-500-fade-foreground: rgba(36, 135, 75, var(--salt-palette-opacity-disabled));
274
+ --salt-color-green-700-fade-foreground: rgba(12, 93, 46, var(--salt-palette-opacity-disabled));
275
+ --salt-color-red-300-fade-foreground: rgba(255, 89, 66, var(--salt-palette-opacity-disabled));
276
+ --salt-color-red-500-fade-foreground: rgba(227, 43, 22, var(--salt-palette-opacity-disabled));
277
+ --salt-color-red-700-fade-foreground: rgba(166, 21, 11, var(--salt-palette-opacity-disabled));
278
+ --salt-color-white-fade-foreground: rgba(255, 255, 255, var(--salt-palette-opacity-disabled));
279
+ --salt-color-blue-500-fade-border: rgba(38, 112, 169, var(--salt-palette-opacity-disabled));
280
+ --salt-color-gray-60-fade-border: rgba(197, 201, 208, var(--salt-palette-opacity-disabled));
281
+ --salt-color-gray-90-fade-border: rgba(132, 135, 142, var(--salt-palette-opacity-disabled));
282
+ --salt-color-gray-200-fade-border: rgba(97, 101, 110, var(--salt-palette-opacity-disabled));
283
+ --salt-color-gray-300-fade-border: rgba(76, 80, 91, var(--salt-palette-opacity-disabled));
284
+ --salt-color-green-400-fade-border: rgba(48, 156, 90, var(--salt-palette-opacity-disabled));
285
+ --salt-color-green-500-fade-border: rgba(36, 135, 75, var(--salt-palette-opacity-disabled));
286
+ --salt-color-orange-400-fade-border: rgba(238, 133, 43, var(--salt-palette-opacity-disabled));
287
+ --salt-color-orange-500-fade-border: rgba(234, 115, 25, var(--salt-palette-opacity-disabled));
288
+ --salt-color-orange-600-fade-border: rgba(224, 101, 25, var(--salt-palette-opacity-disabled));
289
+ --salt-color-orange-700-fade-border: rgba(214, 85, 19, var(--salt-palette-opacity-disabled));
290
+ --salt-color-red-500-fade-border: rgba(227, 43, 22, var(--salt-palette-opacity-disabled));
301
291
  --salt-color-gray-90-fade-border-readonly: rgba(132, 135, 142, var(--salt-palette-opacity-border-readonly));
302
292
  --salt-color-gray-200-fade-border-readonly: rgba(97, 101, 110, var(--salt-palette-opacity-border-readonly));
303
- --salt-color-blue-30-fade-background: rgba(164, 213, 244, var(--salt-palette-opacity-background));
304
- --salt-color-blue-500-fade-background: rgba(38, 112, 169, var(--salt-palette-opacity-background));
305
- --salt-color-blue-600-fade-background: rgba(21, 92, 147, var(--salt-palette-opacity-background));
306
- --salt-color-blue-700-fade-background: rgba(0, 71, 123, var(--salt-palette-opacity-background));
307
- --salt-color-gray-20-fade-background: rgba(234, 237, 239, var(--salt-palette-opacity-background));
308
- --salt-color-gray-60-fade-background: rgba(197, 201, 208, var(--salt-palette-opacity-background));
309
- --salt-color-gray-70-fade-background: rgba(180, 183, 190, var(--salt-palette-opacity-background));
310
- --salt-color-gray-200-fade-background: rgba(97, 101, 110, var(--salt-palette-opacity-background));
311
- --salt-color-gray-300-fade-background: rgba(76, 80, 91, var(--salt-palette-opacity-background));
312
- --salt-color-gray-600-fade-background: rgba(47, 49, 54, var(--salt-palette-opacity-background));
313
- --salt-color-gray-800-fade-background: rgba(36, 37, 38, var(--salt-palette-opacity-background));
314
- --salt-color-orange-400-fade-background: rgba(238, 133, 43, var(--salt-palette-opacity-background));
315
- --salt-color-orange-600-fade-background: rgba(224, 101, 25, var(--salt-palette-opacity-background));
316
- --salt-color-white-fade-background: rgba(255, 255, 255, var(--salt-palette-opacity-background));
293
+ --salt-color-blue-30-fade-background: rgba(164, 213, 244, var(--salt-palette-opacity-disabled));
294
+ --salt-color-blue-500-fade-background: rgba(38, 112, 169, var(--salt-palette-opacity-disabled));
295
+ --salt-color-blue-600-fade-background: rgba(21, 92, 147, var(--salt-palette-opacity-disabled));
296
+ --salt-color-blue-700-fade-background: rgba(0, 71, 123, var(--salt-palette-opacity-disabled));
297
+ --salt-color-gray-20-fade-background: rgba(234, 237, 239, var(--salt-palette-opacity-disabled));
298
+ --salt-color-gray-60-fade-background: rgba(197, 201, 208, var(--salt-palette-opacity-disabled));
299
+ --salt-color-gray-70-fade-background: rgba(180, 183, 190, var(--salt-palette-opacity-disabled));
300
+ --salt-color-gray-200-fade-background: rgba(97, 101, 110, var(--salt-palette-opacity-disabled));
301
+ --salt-color-gray-300-fade-background: rgba(76, 80, 91, var(--salt-palette-opacity-disabled));
302
+ --salt-color-gray-600-fade-background: rgba(47, 49, 54, var(--salt-palette-opacity-disabled));
303
+ --salt-color-gray-800-fade-background: rgba(36, 37, 38, var(--salt-palette-opacity-disabled));
304
+ --salt-color-white-fade-background: rgba(255, 255, 255, var(--salt-palette-opacity-disabled));
317
305
  --salt-color-white-fade-background-readonly: rgba(255, 255, 255, var(--salt-palette-opacity-background-readonly));
318
306
  --salt-color-gray-20-fade-background-readonly: rgba(234, 237, 239, var(--salt-palette-opacity-background-readonly));
319
307
  --salt-color-gray-600-fade-background-readonly: rgba(47, 49, 54, var(--salt-palette-opacity-background-readonly));
320
308
  --salt-color-gray-800-fade-background-readonly: rgba(36, 37, 38, var(--salt-palette-opacity-background-readonly));
321
309
  --salt-color-black-fade-backdrop: rgba(36, 37, 38, var(--salt-palette-opacity-backdrop));
322
- --salt-color-blue-100-fade-fill: rgba(100, 177, 228, var(--salt-palette-opacity-fill));
323
- --salt-color-blue-300-fade-fill: rgba(51, 141, 205, var(--salt-palette-opacity-fill));
324
- --salt-color-blue-500-fade-fill: rgba(38, 112, 169, var(--salt-palette-opacity-fill));
325
- --salt-color-blue-600-fade-fill: rgba(21, 92, 147, var(--salt-palette-opacity-fill));
310
+ --salt-color-blue-100-fade-fill: rgba(100, 177, 228, var(--salt-palette-opacity-disabled));
311
+ --salt-color-blue-600-fade-fill: rgba(21, 92, 147, var(--salt-palette-opacity-disabled));
326
312
  --salt-color-white-fade-separatorOpacity-primary: rgba(255, 255, 255, var(--salt-palette-opacity-primary-border));
327
313
  --salt-color-white-fade-separatorOpacity-secondary: rgba(255, 255, 255, var(--salt-palette-opacity-secondary-border));
328
314
  --salt-color-white-fade-separatorOpacity-tertiary: rgba(255, 255, 255, var(--salt-palette-opacity-tertiary-border));
329
315
  --salt-color-black-fade-separatorOpacity-primary: rgba(0, 0, 0, var(--salt-palette-opacity-primary-border));
330
316
  --salt-color-black-fade-separatorOpacity-secondary: rgba(0, 0, 0, var(--salt-palette-opacity-secondary-border));
331
317
  --salt-color-black-fade-separatorOpacity-tertiary: rgba(0, 0, 0, var(--salt-palette-opacity-tertiary-border));
332
- }
333
-
334
- /* css/foundations/icon.css */
335
- .salt-density-touch {
336
- --salt-icon-size-base: 16px;
337
- --salt-icon-size-status-adornment: 12px;
338
- }
339
- .salt-density-low {
340
- --salt-icon-size-base: 14px;
341
- --salt-icon-size-status-adornment: 10px;
342
- }
343
- .salt-density-medium {
344
- --salt-icon-size-base: 12px;
345
- --salt-icon-size-status-adornment: 8px;
346
- }
347
- .salt-density-high {
348
- --salt-icon-size-base: 10px;
349
- --salt-icon-size-status-adornment: 6px;
350
- }
351
- .salt-theme {
352
- --salt-size-icon-base: var(--salt-icon-size-base);
318
+ --salt-color-black-fade-background-hover: rgba(0, 0, 0, var(--salt-opacity-8));
319
+ --salt-color-white-fade-background-hover: rgba(255, 255, 255, var(--salt-opacity-8));
353
320
  }
354
321
 
355
322
  /* css/foundations/opacity.css */
356
323
  .salt-theme {
357
- --salt-opacity-1: 0.15;
358
- --salt-opacity-2: 0.25;
359
- --salt-opacity-3: 0.4;
360
- --salt-opacity-4: 0.7;
324
+ --salt-opacity-0: 0;
325
+ --salt-opacity-8: 0.08;
326
+ --salt-opacity-15: 0.15;
327
+ --salt-opacity-25: 0.25;
328
+ --salt-opacity-40: 0.4;
329
+ --salt-opacity-70: 0.7;
361
330
  }
362
331
 
363
332
  /* css/foundations/shadow.css */
364
333
  .salt-theme[data-mode=light] {
365
- --salt-shadow-1-color: rgba(0, 0, 0, 0.1);
366
- --salt-shadow-2-color: rgba(0, 0, 0, 0.1);
367
- --salt-shadow-3-color: rgba(0, 0, 0, 0.15);
368
- --salt-shadow-4-color: rgba(0, 0, 0, 0.2);
369
- --salt-shadow-5-color: rgba(0, 0, 0, 0.3);
334
+ --salt-shadow-100-color: rgba(0, 0, 0, 0.1);
335
+ --salt-shadow-200-color: rgba(0, 0, 0, 0.1);
336
+ --salt-shadow-300-color: rgba(0, 0, 0, 0.15);
337
+ --salt-shadow-400-color: rgba(0, 0, 0, 0.2);
338
+ --salt-shadow-500-color: rgba(0, 0, 0, 0.3);
370
339
  }
371
340
  .salt-theme[data-mode=dark] {
372
- --salt-shadow-1-color: rgba(0, 0, 0, 0.5);
373
- --salt-shadow-2-color: rgba(0, 0, 0, 0.5);
374
- --salt-shadow-3-color: rgba(0, 0, 0, 0.55);
375
- --salt-shadow-4-color: rgba(0, 0, 0, 0.55);
376
- --salt-shadow-5-color: rgba(0, 0, 0, 0.65);
341
+ --salt-shadow-100-color: rgba(0, 0, 0, 0.5);
342
+ --salt-shadow-200-color: rgba(0, 0, 0, 0.5);
343
+ --salt-shadow-300-color: rgba(0, 0, 0, 0.55);
344
+ --salt-shadow-400-color: rgba(0, 0, 0, 0.55);
345
+ --salt-shadow-500-color: rgba(0, 0, 0, 0.65);
377
346
  }
378
347
  .salt-theme {
379
- --salt-shadow-0: none;
380
- --salt-shadow-1: 0 1px 3px 0 var(--salt-shadow-1-color);
381
- --salt-shadow-2: 0 2px 4px 0 var(--salt-shadow-2-color);
382
- --salt-shadow-3: 0 4px 8px 0 var(--salt-shadow-3-color);
383
- --salt-shadow-4: 0 6px 10px 0 var(--salt-shadow-4-color);
384
- --salt-shadow-5: 0 12px 40px 0 var(--salt-shadow-5-color);
348
+ --salt-shadow-100: 0 1px 3px 0 var(--salt-shadow-100-color);
349
+ --salt-shadow-200: 0 2px 4px 0 var(--salt-shadow-200-color);
350
+ --salt-shadow-300: 0 4px 8px 0 var(--salt-shadow-300-color);
351
+ --salt-shadow-400: 0 6px 10px 0 var(--salt-shadow-400-color);
352
+ --salt-shadow-500: 0 12px 40px 0 var(--salt-shadow-500-color);
385
353
  }
386
354
 
387
355
  /* css/foundations/size.css */
388
- .salt-density-touch,
389
- .salt-density-low,
390
- .salt-density-medium,
391
- .salt-density-high {
392
- --salt-size-basis-unit: 4px;
393
- --salt-size-adornmentGap: calc(0.75 * var(--salt-size-unit));
394
- --salt-size-container-spacing: calc(3 * var(--salt-size-unit));
395
- --salt-size-separator-strokeWidth: 1px;
396
- --salt-size-selectable: calc(var(--salt-size-base) - (1.5 * var(--salt-size-unit)) - (0.5 * var(--salt-size-basis-unit)));
397
- --salt-size-separator-height: calc(var(--salt-size-compact) + 1.5 * var(--salt-size-basis-unit));
398
- --salt-size-sharktooth-height: 5px;
399
- --salt-size-sharktooth-width: 10px;
400
- --salt-size-stackable: calc(var(--salt-size-base) + var(--salt-size-unit));
401
- --salt-size-selection: var(--salt-size-selectable);
402
- --salt-size-brandBar: 4px;
403
- --salt-size-graphic-small: 12px;
404
- --salt-size-graphic-medium: 24px;
405
- --salt-size-graphic-large: 48px;
406
- --salt-size-divider-height: var(--salt-size-separator-height);
407
- --salt-size-divider-strokeWidth: var(--salt-size-separator-strokeWidth);
408
- }
409
356
  .salt-density-high {
410
- --salt-size-unit: calc(var(--salt-size-basis-unit) * 1);
411
- --salt-size-compact: calc(var(--salt-size-basis-unit) * 1.5);
412
- --salt-size-accent: calc(var(--salt-size-basis-unit) * 0.5);
413
357
  --salt-size-adornment: 6px;
414
358
  --salt-size-bar: 2px;
415
359
  --salt-size-base: 20px;
416
360
  --salt-size-border: 1px;
361
+ --salt-size-icon: 10px;
362
+ --salt-size-indicator: 1px;
417
363
  --salt-size-selectable: 12px;
418
- --salt-size-icon: 12px;
419
- --salt-size-detail: var(--salt-size-compact);
364
+ --salt-size-bar-strong: 4px;
365
+ --salt-size-bar-small: 2px;
366
+ --salt-size-border-strong: 2px;
420
367
  }
421
368
  .salt-density-medium {
422
- --salt-size-unit: calc(var(--salt-size-basis-unit) * 2);
423
- --salt-size-compact: calc(var(--salt-size-basis-unit) * 2);
424
- --salt-size-accent: calc(var(--salt-size-basis-unit) * 1);
425
369
  --salt-size-adornment: 8px;
426
370
  --salt-size-bar: 4px;
427
371
  --salt-size-base: 28px;
428
372
  --salt-size-border: 1px;
429
- --salt-size-selectable: 14px;
430
373
  --salt-size-icon: 12px;
431
- --salt-size-detail: var(--salt-size-compact);
374
+ --salt-size-indicator: 2px;
375
+ --salt-size-selectable: 14px;
376
+ --salt-size-bar-strong: 8px;
377
+ --salt-size-bar-small: 2px;
378
+ --salt-size-border-strong: 2px;
432
379
  }
433
380
  .salt-density-low {
434
- --salt-size-unit: calc(var(--salt-size-basis-unit) * 3);
435
- --salt-size-compact: calc(var(--salt-size-basis-unit) * 2.5);
436
- --salt-size-accent: calc(var(--salt-size-basis-unit) * 1.5);
437
381
  --salt-size-adornment: 10px;
438
382
  --salt-size-bar: 6px;
439
383
  --salt-size-base: 36px;
440
384
  --salt-size-border: 1px;
441
- --salt-size-selectable: 16px;
442
385
  --salt-size-icon: 14px;
443
- --salt-size-detail: var(--salt-size-compact);
386
+ --salt-size-indicator: 3px;
387
+ --salt-size-selectable: 16px;
388
+ --salt-size-bar-strong: 12px;
389
+ --salt-size-bar-small: 2px;
390
+ --salt-size-border-strong: 2px;
444
391
  }
445
392
  .salt-density-touch {
446
- --salt-size-unit: calc(var(--salt-size-basis-unit) * 4);
447
- --salt-size-compact: calc(var(--salt-size-basis-unit) * 3);
448
- --salt-size-accent: calc(var(--salt-size-basis-unit) * 2);
449
393
  --salt-size-adornment: 12px;
450
394
  --salt-size-bar: 8px;
451
395
  --salt-size-base: 44px;
452
396
  --salt-size-border: 1px;
453
- --salt-size-selectable: 18px;
454
397
  --salt-size-icon: 16px;
455
- --salt-size-detail: var(--salt-size-compact);
398
+ --salt-size-indicator: 4px;
399
+ --salt-size-selectable: 18px;
400
+ --salt-size-bar-strong: 16px;
401
+ --salt-size-bar-small: 2px;
402
+ --salt-size-border-strong: 2px;
456
403
  }
457
404
 
458
405
  /* css/foundations/spacing.css */
@@ -502,7 +449,6 @@
502
449
  .salt-density-high {
503
450
  --salt-zIndex-default: 1;
504
451
  --salt-zIndex-popout: 1000;
505
- --salt-zIndex-docked: 1050;
506
452
  --salt-zIndex-appHeader: 1100;
507
453
  --salt-zIndex-drawer: 1200;
508
454
  --salt-zIndex-modal: 1300;
@@ -512,31 +458,46 @@
512
458
  --salt-zIndex-flyover: 1500;
513
459
  }
514
460
 
515
- /* css/foundations/palette.css */
516
- .salt-theme {
517
- --salt-palette-opacity-background: var(--salt-opacity-3);
518
- --salt-palette-opacity-background-readonly: var(--salt-opacity-1);
519
- --salt-palette-opacity-border: var(--salt-opacity-3);
520
- --salt-palette-opacity-border-readonly: var(--salt-opacity-2);
521
- --salt-palette-opacity-fill: var(--salt-opacity-3);
522
- --salt-palette-opacity-foreground: var(--salt-opacity-4);
523
- --salt-palette-opacity-backdrop: var(--salt-opacity-4);
524
- --salt-palette-opacity-stroke: var(--salt-opacity-3);
525
- --salt-palette-opacity-primary-border: var(--salt-opacity-3);
526
- --salt-palette-opacity-secondary-border: var(--salt-opacity-2);
527
- --salt-palette-opacity-tertiary-border: var(--salt-opacity-1);
528
- --salt-palette-error-background-emphasize: var(--salt-palette-error-background);
529
- --salt-palette-warning-background-emphasize: var(--salt-palette-warning-background);
530
- --salt-palette-success-background-emphasize: var(--salt-palette-success-background);
531
- --salt-palette-info-background-emphasize: var(--salt-palette-info-background);
532
- }
461
+ /* css/palette/accent.css */
533
462
  .salt-theme[data-mode=light] {
534
463
  --salt-palette-accent-background: var(--salt-color-blue-500);
535
- --salt-palette-accent-background-disabled: var(--salt-color-blue-500-fade-background);
536
464
  --salt-palette-accent-border: var(--salt-color-blue-500);
537
- --salt-palette-accent-border-disabled: var(--salt-color-blue-500-fade-border);
538
465
  --salt-palette-accent-foreground: var(--salt-color-white);
539
- --salt-palette-accent-foreground-disabled: var(--salt-color-white-fade-foreground);
466
+ }
467
+ .salt-theme[data-mode=dark] {
468
+ --salt-palette-accent-background: var(--salt-color-blue-500);
469
+ --salt-palette-accent-border: var(--salt-color-blue-500);
470
+ --salt-palette-accent-foreground: var(--salt-color-white);
471
+ }
472
+
473
+ /* css/palette/error.css */
474
+ .salt-theme[data-mode=light] {
475
+ --salt-palette-error-background: var(--salt-color-red-10);
476
+ --salt-palette-error-background-selected: var(--salt-color-red-20);
477
+ --salt-palette-error-border: var(--salt-color-red-500);
478
+ --salt-palette-error-foreground: var(--salt-color-red-500);
479
+ }
480
+ .salt-theme[data-mode=dark] {
481
+ --salt-palette-error-background: var(--salt-color-red-900);
482
+ --salt-palette-error-background-selected: var(--salt-color-red-900);
483
+ --salt-palette-error-border: var(--salt-color-red-500);
484
+ --salt-palette-error-foreground: var(--salt-color-red-500);
485
+ }
486
+
487
+ /* css/palette/info.css */
488
+ .salt-theme[data-mode=light] {
489
+ --salt-palette-info-background: var(--salt-color-blue-10);
490
+ --salt-palette-info-border: var(--salt-color-blue-500);
491
+ --salt-palette-info-foreground: var(--salt-color-blue-500);
492
+ }
493
+ .salt-theme[data-mode=dark] {
494
+ --salt-palette-info-background: var(--salt-color-blue-900);
495
+ --salt-palette-info-border: var(--salt-color-blue-500);
496
+ --salt-palette-info-foreground: var(--salt-color-blue-500);
497
+ }
498
+
499
+ /* css/palette/interact.css */
500
+ .salt-theme[data-mode=light] {
540
501
  --salt-palette-interact-background: transparent;
541
502
  --salt-palette-interact-background-blurSelected: var(--salt-color-gray-30);
542
503
  --salt-palette-interact-background-hover: var(--salt-color-blue-10);
@@ -557,109 +518,30 @@
557
518
  --salt-palette-interact-outline: var(--salt-color-blue-600);
558
519
  --salt-palette-interact-cta-background: var(--salt-color-blue-600);
559
520
  --salt-palette-interact-cta-background-active: var(--salt-color-blue-700);
560
- --salt-palette-interact-cta-background-activeDisabled: var(--salt-color-blue-700-fade-background);
561
521
  --salt-palette-interact-cta-background-disabled: var(--salt-color-blue-600-fade-background);
562
522
  --salt-palette-interact-cta-background-hover: var(--salt-color-blue-500);
563
523
  --salt-palette-interact-cta-foreground: var(--salt-color-white);
564
524
  --salt-palette-interact-cta-foreground-active: var(--salt-color-white);
565
- --salt-palette-interact-cta-foreground-activeDisabled: var(--salt-color-white-fade-foreground);
566
525
  --salt-palette-interact-cta-foreground-disabled: var(--salt-color-white-fade-foreground);
567
526
  --salt-palette-interact-cta-foreground-hover: var(--salt-color-white);
568
527
  --salt-palette-interact-primary-background: var(--salt-color-gray-60);
569
528
  --salt-palette-interact-primary-background-active: var(--salt-color-gray-200);
570
- --salt-palette-interact-primary-background-activeDisabled: var(--salt-color-gray-200-fade-background);
571
529
  --salt-palette-interact-primary-background-disabled: var(--salt-color-gray-60-fade-background);
572
530
  --salt-palette-interact-primary-background-hover: var(--salt-color-gray-40);
573
531
  --salt-palette-interact-primary-foreground: var(--salt-color-gray-900);
574
532
  --salt-palette-interact-primary-foreground-active: var(--salt-color-white);
575
- --salt-palette-interact-primary-foreground-activeDisabled: var(--salt-color-white-fade-foreground);
576
533
  --salt-palette-interact-primary-foreground-disabled: var(--salt-color-gray-900-fade-foreground);
577
534
  --salt-palette-interact-primary-foreground-hover: var(--salt-color-gray-900);
578
535
  --salt-palette-interact-secondary-background: transparent;
579
536
  --salt-palette-interact-secondary-background-active: var(--salt-color-gray-200);
580
- --salt-palette-interact-secondary-background-activeDisabled: var(--salt-color-gray-200-fade-background);
581
537
  --salt-palette-interact-secondary-background-disabled: transparent;
582
538
  --salt-palette-interact-secondary-background-hover: var(--salt-color-gray-40);
583
539
  --salt-palette-interact-secondary-foreground: var(--salt-color-gray-900);
584
540
  --salt-palette-interact-secondary-foreground-active: var(--salt-color-white);
585
- --salt-palette-interact-secondary-foreground-activeDisabled: var(--salt-color-white-fade-foreground);
586
541
  --salt-palette-interact-secondary-foreground-disabled: var(--salt-color-gray-900-fade-foreground);
587
542
  --salt-palette-interact-secondary-foreground-hover: var(--salt-color-gray-900);
588
- --salt-palette-error-background: var(--salt-color-red-10);
589
- --salt-palette-error-background-selected: var(--salt-color-red-20);
590
- --salt-palette-error-border: var(--salt-color-red-500);
591
- --salt-palette-error-border-disabled: var(--salt-color-red-500-fade-border);
592
- --salt-palette-error-foreground: var(--salt-color-red-500);
593
- --salt-palette-error-foreground-disabled: var(--salt-color-red-500-fade-foreground);
594
- --salt-palette-info-background: var(--salt-color-blue-10);
595
- --salt-palette-info-border: var(--salt-color-blue-500);
596
- --salt-palette-info-border-disabled: var(--salt-color-blue-500-fade-border);
597
- --salt-palette-info-foreground: var(--salt-color-blue-500);
598
- --salt-palette-info-foreground-disabled: var(--salt-color-blue-500-fade-foreground);
599
- --salt-palette-success-background: var(--salt-color-green-10);
600
- --salt-palette-success-background-selected: var(--salt-color-green-20);
601
- --salt-palette-success-border: var(--salt-color-green-500);
602
- --salt-palette-success-border-disabled: var(--salt-color-green-500-fade-border);
603
- --salt-palette-success-foreground: var(--salt-color-green-500);
604
- --salt-palette-success-foreground-disabled: var(--salt-color-green-500-fade-foreground);
605
- --salt-palette-warning-background: var(--salt-color-orange-10);
606
- --salt-palette-warning-background-selected: var(--salt-color-orange-20);
607
- --salt-palette-warning-border: var(--salt-color-orange-700);
608
- --salt-palette-warning-border-disabled: var(--salt-color-orange-700-fade-border);
609
- --salt-palette-warning-foreground: var(--salt-color-orange-700);
610
- --salt-palette-navigate-primary-background: transparent;
611
- --salt-palette-navigate-primary-background-active: transparent;
612
- --salt-palette-navigate-primary-background-hover: var(--salt-color-gray-20);
613
- --salt-palette-navigate-secondary-background: transparent;
614
- --salt-palette-navigate-secondary-background-active: transparent;
615
- --salt-palette-navigate-secondary-background-hover: var(--salt-color-gray-30);
616
- --salt-palette-navigate-tertiary-background: transparent;
617
- --salt-palette-navigate-tertiary-background-active: transparent;
618
- --salt-palette-navigate-tertiary-background-hover: var(--salt-color-gray-20);
619
- --salt-palette-navigate-foreground-hover: var(--salt-color-blue-600);
620
- --salt-palette-navigate-foreground-active: var(--salt-color-blue-700);
621
- --salt-palette-navigate-foreground-visited: var(--salt-color-purple-800);
622
- --salt-palette-navigate-indicator-hover: var(--salt-color-gray-90);
623
- --salt-palette-navigate-indicator-active: var(--salt-color-orange-600);
624
- --salt-palette-navigate-indicator-activeDisabled: var(--salt-color-orange-600-fade-border);
625
- --salt-palette-negative-foreground: var(--salt-color-red-700);
626
- --salt-palette-negative-foreground-disabled: var(--salt-color-red-700-fade-foreground);
627
- --salt-palette-neutral-primary-background: var(--salt-color-white);
628
- --salt-palette-neutral-primary-background-disabled: var(--salt-color-white-fade-background);
629
- --salt-palette-neutral-primary-background-readonly: var(--salt-color-white-fade-background-readonly);
630
- --salt-palette-neutral-primary-foreground: var(--salt-color-gray-900);
631
- --salt-palette-neutral-primary-foreground-disabled: var(--salt-color-gray-900-fade-foreground);
632
- --salt-palette-neutral-primary-separator: var(--salt-color-black-fade-separatorOpacity-primary);
633
- --salt-palette-neutral-primary-border: var(--salt-color-gray-60);
634
- --salt-palette-neutral-primary-border-disabled: var(--salt-color-gray-60-fade-border);
635
- --salt-palette-neutral-secondary-background: var(--salt-color-gray-20);
636
- --salt-palette-neutral-secondary-background-disabled: var(--salt-color-gray-20-fade-background);
637
- --salt-palette-neutral-secondary-background-readonly: var(--salt-color-gray-20-fade-background-readonly);
638
- --salt-palette-neutral-secondary-border: var(--salt-color-gray-90);
639
- --salt-palette-neutral-secondary-border-disabled: var(--salt-color-gray-90-fade-border);
640
- --salt-palette-neutral-secondary-foreground: var(--salt-color-gray-200);
641
- --salt-palette-neutral-secondary-foreground-disabled: var(--salt-color-gray-200-fade-foreground);
642
- --salt-palette-neutral-backdrop: var(--salt-color-black-fade-backdrop);
643
- --salt-palette-neutral-secondary-separator: var(--salt-color-black-fade-separatorOpacity-secondary);
644
- --salt-palette-neutral-tertiary-background: transparent;
645
- --salt-palette-neutral-tertiary-background-disabled: transparent;
646
- --salt-palette-neutral-tertiary-border: transparent;
647
- --salt-palette-neutral-tertiary-border-disabled: transparent;
648
- --salt-palette-neutral-tertiary-separator: var(--salt-color-black-fade-separatorOpacity-tertiary);
649
- --salt-palette-positive-foreground: var(--salt-color-green-700);
650
- --salt-palette-positive-foreground-disabled: var(--salt-color-green-700-fade-foreground);
651
- --salt-palette-track-background: var(--salt-color-gray-60);
652
- --salt-palette-track-background-disabled: var(--salt-color-gray-60-fade-background);
653
- --salt-palette-track-border: var(--salt-color-gray-90);
654
- --salt-palette-track-border-disabled: var(--salt-color-gray-90-fade-border);
655
543
  }
656
544
  .salt-theme[data-mode=dark] {
657
- --salt-palette-accent-background: var(--salt-color-blue-500);
658
- --salt-palette-accent-background-disabled: var(--salt-color-blue-500-fade-background);
659
- --salt-palette-accent-border: var(--salt-color-blue-500);
660
- --salt-palette-accent-border-disabled: var(--salt-color-blue-500-fade-border);
661
- --salt-palette-accent-foreground: var(--salt-color-white);
662
- --salt-palette-accent-foreground-disabled: var(--salt-color-white-fade-foreground);
663
545
  --salt-palette-interact-background: transparent;
664
546
  --salt-palette-interact-background-active: var(--salt-color-blue-700);
665
547
  --salt-palette-interact-background-blurSelected: var(--salt-color-gray-600);
@@ -680,73 +562,78 @@
680
562
  --salt-palette-interact-outline: var(--salt-color-blue-100);
681
563
  --salt-palette-interact-cta-background: var(--salt-color-blue-600);
682
564
  --salt-palette-interact-cta-background-active: var(--salt-color-blue-700);
683
- --salt-palette-interact-cta-background-activeDisabled: var(--salt-color-blue-700-fade-background);
684
565
  --salt-palette-interact-cta-background-disabled: var(--salt-color-blue-600-fade-background);
685
566
  --salt-palette-interact-cta-background-hover: var(--salt-color-blue-500);
686
567
  --salt-palette-interact-cta-foreground: var(--salt-color-white);
687
568
  --salt-palette-interact-cta-foreground-active: var(--salt-color-white);
688
- --salt-palette-interact-cta-foreground-activeDisabled: var(--salt-color-white-fade-foreground);
689
569
  --salt-palette-interact-cta-foreground-disabled: var(--salt-color-white-fade-foreground);
690
570
  --salt-palette-interact-cta-foreground-hover: var(--salt-color-white);
691
571
  --salt-palette-interact-primary-background: var(--salt-color-gray-300);
692
572
  --salt-palette-interact-primary-background-active: var(--salt-color-gray-70);
693
- --salt-palette-interact-primary-background-activeDisabled: var(--salt-color-gray-70-fade-background);
694
573
  --salt-palette-interact-primary-background-disabled: var(--salt-color-gray-300-fade-background);
695
574
  --salt-palette-interact-primary-background-hover: var(--salt-color-gray-200);
696
575
  --salt-palette-interact-primary-foreground: var(--salt-color-white);
697
576
  --salt-palette-interact-primary-foreground-active: var(--salt-color-gray-900);
698
- --salt-palette-interact-primary-foreground-activeDisabled: var(--salt-color-gray-900-fade-foreground);
699
577
  --salt-palette-interact-primary-foreground-disabled: var(--salt-color-white-fade-foreground);
700
578
  --salt-palette-interact-primary-foreground-hover: var(--salt-color-white);
701
579
  --salt-palette-interact-secondary-background: transparent;
702
580
  --salt-palette-interact-secondary-background-active: var(--salt-color-gray-70);
703
- --salt-palette-interact-secondary-background-activeDisabled: var(--salt-color-gray-70-fade-background);
704
581
  --salt-palette-interact-secondary-background-disabled: transparent;
705
582
  --salt-palette-interact-secondary-background-hover: var(--salt-color-gray-200);
706
583
  --salt-palette-interact-secondary-foreground: var(--salt-color-white);
707
584
  --salt-palette-interact-secondary-foreground-active: var(--salt-color-gray-900);
708
- --salt-palette-interact-secondary-foreground-activeDisabled: var(--salt-color-gray-900-fade-foreground);
709
585
  --salt-palette-interact-secondary-foreground-disabled: var(--salt-color-white-fade-foreground);
710
586
  --salt-palette-interact-secondary-foreground-hover: var(--salt-color-white);
711
- --salt-palette-error-background: var(--salt-color-red-900);
712
- --salt-palette-error-background-selected: var(--salt-color-red-900);
713
- --salt-palette-error-border: var(--salt-color-red-500);
714
- --salt-palette-error-border-disabled: var(--salt-color-red-500-fade-border);
715
- --salt-palette-error-foreground: var(--salt-color-red-500);
716
- --salt-palette-error-foreground-disabled: var(--salt-color-red-500-fade-foreground);
717
- --salt-palette-info-background: var(--salt-color-blue-900);
718
- --salt-palette-info-border: var(--salt-color-blue-500);
719
- --salt-palette-info-border-disabled: var(--salt-color-blue-500-fade-border);
720
- --salt-palette-info-foreground: var(--salt-color-blue-500);
721
- --salt-palette-info-foreground-disabled: var(--salt-color-blue-500-fade-foreground);
722
- --salt-palette-success-background: var(--salt-color-green-900);
723
- --salt-palette-success-background-selected: var(--salt-color-green-900);
724
- --salt-palette-success-border: var(--salt-color-green-400);
725
- --salt-palette-success-border-disabled: var(--salt-color-green-400-fade-border);
726
- --salt-palette-success-foreground: var(--salt-color-green-400);
727
- --salt-palette-success-foreground-disabled: var(--salt-color-green-400-fade-foreground);
728
- --salt-palette-warning-background: var(--salt-color-orange-900);
729
- --salt-palette-warning-background-selected: var(--salt-color-orange-900);
730
- --salt-palette-warning-border: var(--salt-color-orange-500);
731
- --salt-palette-warning-border-disabled: var(--salt-color-orange-500-fade-border);
732
- --salt-palette-warning-foreground: var(--salt-color-orange-500);
733
- --salt-palette-navigate-primary-background: transparent;
734
- --salt-palette-navigate-primary-background-active: transparent;
735
- --salt-palette-navigate-primary-background-hover: var(--salt-color-gray-700);
736
- --salt-palette-navigate-secondary-background: transparent;
737
- --salt-palette-navigate-secondary-background-active: transparent;
738
- --salt-palette-navigate-secondary-background-hover: var(--salt-color-gray-600);
739
- --salt-palette-navigate-tertiary-background: transparent;
740
- --salt-palette-navigate-tertiary-background-active: transparent;
741
- --salt-palette-navigate-tertiary-background-hover: var(--salt-color-gray-700);
742
- --salt-palette-navigate-foreground-hover: var(--salt-color-blue-200);
587
+ }
588
+
589
+ /* css/palette/navigate.css */
590
+ .salt-theme[data-mode=light] {
591
+ --salt-palette-navigate-background-hover: var(--salt-color-black-fade-background-hover);
592
+ --salt-palette-navigate-foreground-hover: var(--salt-color-blue-600);
593
+ --salt-palette-navigate-foreground-active: var(--salt-color-blue-700);
594
+ --salt-palette-navigate-foreground-visited: var(--salt-color-purple-800);
595
+ --salt-palette-navigate-indicator-hover: var(--salt-color-gray-90);
596
+ --salt-palette-navigate-indicator-active: var(--salt-color-orange-600);
597
+ }
598
+ .salt-theme[data-mode=dark] {
599
+ --salt-palette-navigate-background-hover: var(--salt-color-white-fade-background-hover);
600
+ --salt-palette-navigate-foreground-hover: var(--salt-color-blue-200);
743
601
  --salt-palette-navigate-foreground-active: var(--salt-color-blue-300);
744
602
  --salt-palette-navigate-foreground-visited: var(--salt-color-purple-100);
745
603
  --salt-palette-navigate-indicator-hover: var(--salt-color-gray-90);
746
604
  --salt-palette-navigate-indicator-active: var(--salt-color-orange-400);
747
- --salt-palette-navigate-indicator-activeDisabled: var(--salt-color-orange-400-fade-border);
605
+ }
606
+
607
+ /* css/palette/negative.css */
608
+ .salt-theme[data-mode=light] {
609
+ --salt-palette-negative-foreground: var(--salt-color-red-700);
610
+ }
611
+ .salt-theme[data-mode=dark] {
748
612
  --salt-palette-negative-foreground: var(--salt-color-red-300);
749
- --salt-palette-negative-foreground-disabled: var(--salt-color-red-300-fade-foreground);
613
+ }
614
+
615
+ /* css/palette/neutral.css */
616
+ .salt-theme[data-mode=light] {
617
+ --salt-palette-neutral-primary-background: var(--salt-color-white);
618
+ --salt-palette-neutral-primary-background-disabled: var(--salt-color-white-fade-background);
619
+ --salt-palette-neutral-primary-background-readonly: var(--salt-color-white-fade-background-readonly);
620
+ --salt-palette-neutral-primary-foreground: var(--salt-color-gray-900);
621
+ --salt-palette-neutral-primary-foreground-disabled: var(--salt-color-gray-900-fade-foreground);
622
+ --salt-palette-neutral-primary-separator: var(--salt-color-black-fade-separatorOpacity-primary);
623
+ --salt-palette-neutral-primary-border: var(--salt-color-gray-60);
624
+ --salt-palette-neutral-primary-border-disabled: var(--salt-color-gray-60-fade-border);
625
+ --salt-palette-neutral-secondary-background: var(--salt-color-gray-20);
626
+ --salt-palette-neutral-secondary-background-disabled: var(--salt-color-gray-20-fade-background);
627
+ --salt-palette-neutral-secondary-background-readonly: var(--salt-color-gray-20-fade-background-readonly);
628
+ --salt-palette-neutral-secondary-border: var(--salt-color-gray-90);
629
+ --salt-palette-neutral-secondary-border-disabled: var(--salt-color-gray-90-fade-border);
630
+ --salt-palette-neutral-secondary-foreground: var(--salt-color-gray-200);
631
+ --salt-palette-neutral-secondary-foreground-disabled: var(--salt-color-gray-200-fade-foreground);
632
+ --salt-palette-neutral-backdrop: var(--salt-color-white-fade-backdrop);
633
+ --salt-palette-neutral-secondary-separator: var(--salt-color-black-fade-separatorOpacity-secondary);
634
+ --salt-palette-neutral-tertiary-separator: var(--salt-color-black-fade-separatorOpacity-tertiary);
635
+ }
636
+ .salt-theme[data-mode=dark] {
750
637
  --salt-palette-neutral-primary-background: var(--salt-color-gray-800);
751
638
  --salt-palette-neutral-primary-background-disabled: var(--salt-color-gray-800-fade-background);
752
639
  --salt-palette-neutral-primary-background-readonly: var(--salt-color-gray-800-fade-background-readonly);
@@ -764,74 +651,61 @@
764
651
  --salt-palette-neutral-secondary-foreground-disabled: var(--salt-color-gray-70-fade-foreground);
765
652
  --salt-palette-neutral-backdrop: var(--salt-color-black-fade-backdrop);
766
653
  --salt-palette-neutral-secondary-separator: var(--salt-color-white-fade-separatorOpacity-secondary);
767
- --salt-palette-neutral-tertiary-background: transparent;
768
- --salt-palette-neutral-tertiary-background-disabled: transparent;
769
- --salt-palette-neutral-tertiary-border: transparent;
770
- --salt-palette-neutral-tertiary-border-disabled: transparent;
771
654
  --salt-palette-neutral-tertiary-separator: var(--salt-color-white-fade-separatorOpacity-tertiary);
772
- --salt-palette-positive-foreground: var(--salt-color-green-300);
773
- --salt-palette-positive-foreground-disabled: var(--salt-color-green-300-fade-foreground);
774
- --salt-palette-track-background: var(--salt-color-gray-300);
775
- --salt-palette-track-background-disabled: var(--salt-color-gray-300-fade-background);
776
- --salt-palette-track-border: var(--salt-color-gray-90);
777
- --salt-palette-track-border-disabled: var(--salt-color-gray-90-fade-border);
778
655
  }
656
+
657
+ /* css/palette/opacity.css */
658
+ .salt-theme {
659
+ --salt-palette-opacity-backdrop: var(--salt-opacity-70);
660
+ --salt-palette-opacity-disabled: var(--salt-opacity-40);
661
+ --salt-palette-opacity-background-readonly: var(--salt-opacity-0);
662
+ --salt-palette-opacity-border-readonly: var(--salt-opacity-15);
663
+ --salt-palette-opacity-primary-border: var(--salt-opacity-40);
664
+ --salt-palette-opacity-secondary-border: var(--salt-opacity-25);
665
+ --salt-palette-opacity-tertiary-border: var(--salt-opacity-15);
666
+ }
667
+
668
+ /* css/palette/positive.css */
779
669
  .salt-theme[data-mode=light] {
780
- --salt-palette-interact-foreground-partial: var(--salt-color-blue-600);
781
- --salt-palette-interact-foreground-partialDisabled: var(--salt-color-blue-600-fade-foreground);
782
- --salt-palette-measured-fill: var(--salt-color-blue-500);
783
- --salt-palette-measured-fill-disabled: var(--salt-color-blue-500-fade-fill);
784
- --salt-palette-measured-foreground: var(--salt-color-gray-90);
785
- --salt-palette-measured-foreground-active: var(--salt-color-blue-500);
786
- --salt-palette-measured-foreground-disabled: var(--salt-color-gray-90-fade-foreground);
787
- --salt-palette-measured-foreground-activeDisabled: var(--salt-color-blue-500-fade-fill);
788
- --salt-palette-measured-background: var(--salt-color-gray-60);
789
- --salt-palette-measured-background-disabled: var(--salt-color-gray-60-fade-background);
790
- --salt-palette-measured-border: var(--salt-color-gray-90);
791
- --salt-palette-measured-border-disabled: var(--salt-color-gray-90-fade-border);
792
- --salt-palette-neutral-tertiary-background-readonly: transparent;
670
+ --salt-palette-positive-foreground: var(--salt-color-green-700);
793
671
  }
794
672
  .salt-theme[data-mode=dark] {
795
- --salt-palette-interact-foreground-partial: var(--salt-color-blue-100);
796
- --salt-palette-interact-foreground-partialDisabled: var(--salt-color-blue-100-fade-foreground);
797
- --salt-palette-measured-fill: var(--salt-color-blue-300);
798
- --salt-palette-measured-fill-disabled: var(--salt-color-blue-300-fade-fill);
799
- --salt-palette-measured-foreground: var(--salt-color-gray-90);
800
- --salt-palette-measured-foreground-active: var(--salt-color-blue-300);
801
- --salt-palette-measured-foreground-disabled: var(--salt-color-gray-90-fade-foreground);
802
- --salt-palette-measured-foreground-activeDisabled: var(--salt-color-blue-300-fade-fill);
803
- --salt-palette-measured-background: var(--salt-color-gray-300);
804
- --salt-palette-measured-background-disabled: var(--salt-color-gray-300-fade-background);
805
- --salt-palette-measured-border: var(--salt-color-gray-90);
806
- --salt-palette-measured-border-disabled: var(--salt-color-gray-90-fade-border);
807
- --salt-palette-neutral-tertiary-background-readonly: transparent;
673
+ --salt-palette-positive-foreground: var(--salt-color-green-300);
808
674
  }
809
675
 
810
- /* css/characteristics/accent.css */
811
- .salt-density-high {
812
- --salt-accent-fontSize: 8px;
813
- --salt-accent-lineHeight: 11px;
676
+ /* css/palette/success.css */
677
+ .salt-theme[data-mode=light] {
678
+ --salt-palette-success-background: var(--salt-color-green-10);
679
+ --salt-palette-success-background-selected: var(--salt-color-green-20);
680
+ --salt-palette-success-border: var(--salt-color-green-500);
681
+ --salt-palette-success-foreground: var(--salt-color-green-500);
814
682
  }
815
- .salt-density-medium {
816
- --salt-accent-fontSize: 10px;
817
- --salt-accent-lineHeight: 13px;
683
+ .salt-theme[data-mode=dark] {
684
+ --salt-palette-success-background: var(--salt-color-green-900);
685
+ --salt-palette-success-background-selected: var(--salt-color-green-900);
686
+ --salt-palette-success-border: var(--salt-color-green-400);
687
+ --salt-palette-success-foreground: var(--salt-color-green-400);
818
688
  }
819
- .salt-density-low {
820
- --salt-accent-fontSize: 12px;
821
- --salt-accent-lineHeight: 16px;
689
+
690
+ /* css/palette/warning.css */
691
+ .salt-theme[data-mode=light] {
692
+ --salt-palette-warning-background: var(--salt-color-orange-10);
693
+ --salt-palette-warning-background-selected: var(--salt-color-orange-20);
694
+ --salt-palette-warning-border: var(--salt-color-orange-700);
695
+ --salt-palette-warning-foreground: var(--salt-color-orange-700);
822
696
  }
823
- .salt-density-touch {
824
- --salt-accent-fontSize: 14px;
825
- --salt-accent-lineHeight: 18px;
697
+ .salt-theme[data-mode=dark] {
698
+ --salt-palette-warning-background: var(--salt-color-orange-900);
699
+ --salt-palette-warning-background-selected: var(--salt-color-orange-900);
700
+ --salt-palette-warning-border: var(--salt-color-orange-500);
701
+ --salt-palette-warning-foreground: var(--salt-color-orange-500);
826
702
  }
703
+
704
+ /* css/characteristics/accent.css */
827
705
  .salt-theme {
828
706
  --salt-accent-background: var(--salt-palette-accent-background);
829
- --salt-accent-background-disabled: var(--salt-palette-accent-background-disabled);
830
707
  --salt-accent-borderColor: var(--salt-palette-accent-border);
831
- --salt-accent-borderColor-disabled: var(--salt-palette-accent-border-disabled);
832
708
  --salt-accent-foreground: var(--salt-palette-accent-foreground);
833
- --salt-accent-foreground-disabled: var(--salt-palette-accent-foreground-disabled);
834
- --salt-accent-fontWeight: var(--salt-typography-fontWeight-semiBold);
835
709
  }
836
710
 
837
711
  /* css/characteristics/actionable.css */
@@ -839,9 +713,6 @@
839
713
  --salt-actionable-cursor-hover: pointer;
840
714
  --salt-actionable-cursor-active: pointer;
841
715
  --salt-actionable-cursor-disabled: not-allowed;
842
- --salt-actionable-letterSpacing: 0.6px;
843
- --salt-actionable-textAlign: center;
844
- --salt-actionable-textTransform: uppercase;
845
716
  --salt-actionable-primary-foreground: var(--salt-palette-interact-primary-foreground);
846
717
  --salt-actionable-primary-foreground-hover: var(--salt-palette-interact-primary-foreground-hover);
847
718
  --salt-actionable-primary-foreground-active: var(--salt-palette-interact-primary-foreground-active);
@@ -850,7 +721,6 @@
850
721
  --salt-actionable-primary-background-hover: var(--salt-palette-interact-primary-background-hover);
851
722
  --salt-actionable-primary-background-active: var(--salt-palette-interact-primary-background-active);
852
723
  --salt-actionable-primary-background-disabled: var(--salt-palette-interact-primary-background-disabled);
853
- --salt-actionable-primary-fontWeight: var(--salt-typography-fontWeight-bold);
854
724
  --salt-actionable-cta-foreground: var(--salt-palette-interact-cta-foreground);
855
725
  --salt-actionable-cta-foreground-hover: var(--salt-palette-interact-cta-foreground-hover);
856
726
  --salt-actionable-cta-foreground-active: var(--salt-palette-interact-cta-foreground-active);
@@ -859,7 +729,6 @@
859
729
  --salt-actionable-cta-background-hover: var(--salt-palette-interact-cta-background-hover);
860
730
  --salt-actionable-cta-background-active: var(--salt-palette-interact-cta-background-active);
861
731
  --salt-actionable-cta-background-disabled: var(--salt-palette-interact-cta-background-disabled);
862
- --salt-actionable-cta-fontWeight: var(--salt-typography-fontWeight-bold);
863
732
  --salt-actionable-secondary-foreground: var(--salt-palette-interact-secondary-foreground);
864
733
  --salt-actionable-secondary-foreground-hover: var(--salt-palette-interact-secondary-foreground-hover);
865
734
  --salt-actionable-secondary-foreground-active: var(--salt-palette-interact-secondary-foreground-active);
@@ -868,7 +737,6 @@
868
737
  --salt-actionable-secondary-background-hover: var(--salt-palette-interact-secondary-background-hover);
869
738
  --salt-actionable-secondary-background-active: var(--salt-palette-interact-secondary-background-active);
870
739
  --salt-actionable-secondary-background-disabled: var(--salt-palette-interact-secondary-background-disabled);
871
- --salt-actionable-secondary-fontWeight: var(--salt-typography-fontWeight-semiBold);
872
740
  }
873
741
 
874
742
  /* css/characteristics/container.css */
@@ -882,16 +750,6 @@
882
750
  --salt-container-secondary-background-disabled: var(--salt-palette-neutral-secondary-background-disabled);
883
751
  --salt-container-secondary-borderColor: var(--salt-palette-neutral-secondary-border);
884
752
  --salt-container-secondary-borderColor-disabled: var(--salt-palette-neutral-secondary-border-disabled);
885
- --salt-container-tertiary-background: var(--salt-palette-neutral-tertiary-background);
886
- --salt-container-tertiary-background-disabled: var(--salt-palette-neutral-tertiary-background-disabled);
887
- --salt-container-tertiary-borderColor: var(--salt-palette-neutral-tertiary-border);
888
- --salt-container-tertiary-borderColor-disabled: var(--salt-palette-neutral-tertiary-border-disabled);
889
- }
890
-
891
- /* css/characteristics/differential.css */
892
- .salt-theme {
893
- --salt-differential-positive-foreground: var(--salt-palette-positive-foreground);
894
- --salt-differential-negative-foreground: var(--salt-palette-negative-foreground);
895
753
  }
896
754
 
897
755
  /* css/characteristics/draggable.css */
@@ -942,11 +800,6 @@
942
800
  --salt-editable-secondary-background-hover: var(--salt-palette-neutral-secondary-background);
943
801
  --salt-editable-secondary-background-readonly: var(--salt-palette-neutral-secondary-background-readonly);
944
802
  --salt-editable-help-fontStyle: italic;
945
- --salt-editable-tertiary-background: var(--salt-palette-neutral-tertiary-background);
946
- --salt-editable-tertiary-background-active: var(--salt-palette-neutral-tertiary-background);
947
- --salt-editable-tertiary-background-disabled: var(--salt-palette-neutral-tertiary-background-disabled);
948
- --salt-editable-tertiary-background-hover: var(--salt-palette-neutral-tertiary-background);
949
- --salt-editable-tertiary-background-readonly: var(--salt-palette-neutral-tertiary-background-readonly);
950
803
  }
951
804
 
952
805
  /* css/characteristics/focused.css */
@@ -970,32 +823,6 @@
970
823
  position: absolute;
971
824
  }
972
825
 
973
- /* css/characteristics/measured.css */
974
- .salt-theme {
975
- --salt-measured-borderStyle: solid;
976
- --salt-measured-borderStyle-active: solid;
977
- --salt-measured-borderStyle-complete: solid;
978
- --salt-measured-borderStyle-incomplete: dotted;
979
- --salt-measured-borderWidth: 2px;
980
- --salt-measured-borderWidth-active: 2px;
981
- --salt-measured-borderWidth-complete: 2px;
982
- --salt-measured-borderWidth-incomplete: 2px;
983
- --salt-measured-fontWeight: var(--salt-typography-fontWeight-semiBold);
984
- --salt-measured-textAlign: center;
985
- --salt-measured-background: var(--salt-palette-measured-background);
986
- --salt-measured-background-disabled: var(--salt-palette-measured-background-disabled);
987
- --salt-measured-borderColor: var(--salt-palette-measured-border);
988
- --salt-measured-borderColor-disabled: var(--salt-palette-measured-border-disabled);
989
- --salt-measured-fill: var(--salt-palette-measured-fill);
990
- --salt-measured-fill-disabled: var(--salt-palette-measured-fill-disabled);
991
- --salt-measured-foreground: var(--salt-palette-measured-foreground);
992
- --salt-measured-foreground-hover: var(--salt-palette-measured-foreground-active);
993
- --salt-measured-foreground-active: var(--salt-palette-measured-foreground-active);
994
- --salt-measured-foreground-undo: var(--salt-palette-measured-foreground-active);
995
- --salt-measured-foreground-activeDisabled: var(--salt-palette-measured-foreground-activeDisabled);
996
- --salt-measured-foreground-disabled: var(--salt-palette-measured-foreground-disabled);
997
- }
998
-
999
826
  /* css/characteristics/navigable.css */
1000
827
  .salt-theme {
1001
828
  --salt-navigable-cursor-active: pointer;
@@ -1008,29 +835,22 @@
1008
835
  --salt-navigable-fontWeight-edit: var(--salt-typography-fontWeight-regular);
1009
836
  --salt-navigable-indicator-hover: var(--salt-palette-navigate-indicator-hover);
1010
837
  --salt-navigable-indicator-active: var(--salt-palette-navigate-indicator-active);
1011
- --salt-navigable-indicator-activeDisabled: var(--salt-palette-navigate-indicator-activeDisabled);
1012
- --salt-navigable-primary-background: var(--salt-palette-navigate-primary-background);
1013
- --salt-navigable-primary-background-hover: var(--salt-palette-navigate-primary-background-hover);
1014
- --salt-navigable-primary-background-active: var(--salt-palette-navigate-primary-background-active);
1015
- --salt-navigable-secondary-background: var(--salt-palette-navigate-secondary-background);
1016
- --salt-navigable-secondary-background-hover: var(--salt-palette-navigate-secondary-background-hover);
1017
- --salt-navigable-secondary-background-active: var(--salt-palette-navigate-secondary-background-active);
1018
- --salt-navigable-tertiary-background: var(--salt-palette-navigate-tertiary-background);
1019
- --salt-navigable-tertiary-background-hover: var(--salt-palette-navigate-tertiary-background-hover);
1020
- --salt-navigable-tertiary-background-active: var(--salt-palette-navigate-tertiary-background-active);
838
+ --salt-navigable-background-hover: var(--salt-palette-navigate-primary-background-hover);
839
+ --salt-navigable-textDecoration: underline;
840
+ --salt-navigable-textDecoration-hover: none;
841
+ --salt-navigable-textDecoration-selected: underline;
1021
842
  }
1022
843
 
1023
844
  /* css/characteristics/overlayable.css */
1024
845
  .salt-theme {
1025
- --salt-overlayable-shadow-scroll: var(--salt-shadow-1);
1026
- --salt-overlayable-shadow-borderRegion: var(--salt-shadow-2);
1027
- --salt-overlayable-shadow: var(--salt-shadow-2);
1028
- --salt-overlayable-shadow-hover: var(--salt-shadow-3);
1029
- --salt-overlayable-shadow-popout: var(--salt-shadow-4);
1030
- --salt-overlayable-shadow-drag: var(--salt-shadow-4);
1031
- --salt-overlayable-shadow-modal: var(--salt-shadow-5);
846
+ --salt-overlayable-shadow-scroll: var(--salt-shadow-100);
847
+ --salt-overlayable-shadow-region: var(--salt-shadow-200);
848
+ --salt-overlayable-shadow: var(--salt-shadow-200);
849
+ --salt-overlayable-shadow-hover: var(--salt-shadow-300);
850
+ --salt-overlayable-shadow-popout: var(--salt-shadow-400);
851
+ --salt-overlayable-shadow-drag: var(--salt-shadow-400);
852
+ --salt-overlayable-shadow-modal: var(--salt-shadow-500);
1032
853
  --salt-overlayable-background: var(--salt-palette-neutral-backdrop);
1033
- --salt-overlayable-shadow-scroll-color: var(--salt-shadow-1-color);
1034
854
  }
1035
855
 
1036
856
  /* css/characteristics/selectable.css */
@@ -1049,6 +869,7 @@
1049
869
  --salt-selectable-borderColor-selected: var(--salt-palette-interact-border-active);
1050
870
  --salt-selectable-borderColor-selectedDisabled: var(--salt-palette-interact-border-activeDisabled);
1051
871
  --salt-selectable-borderColor-disabled: var(--salt-palette-interact-border-disabled);
872
+ --salt-selectable-borderColor-readonly: var(--salt-palette-interact-border-readonly);
1052
873
  --salt-selectable-foreground: var(--salt-palette-interact-foreground);
1053
874
  --salt-selectable-foreground-disabled: var(--salt-palette-interact-foreground-disabled);
1054
875
  --salt-selectable-foreground-hover: var(--salt-palette-interact-foreground-hover);
@@ -1060,38 +881,6 @@
1060
881
  --salt-selectable-background-blurSelected: var(--salt-palette-interact-background-blurSelected);
1061
882
  --salt-selectable-background-disabled: var(--salt-palette-interact-background-disabled);
1062
883
  --salt-selectable-background-selectedDisabled: var(--salt-palette-interact-background-activeDisabled);
1063
- --salt-selectable-cta-foreground-hover: var(--salt-palette-interact-cta-foreground-hover);
1064
- --salt-selectable-cta-foreground-selected: var(--salt-palette-interact-cta-foreground-active);
1065
- --salt-selectable-cta-foreground-selectedDisabled: var(--salt-palette-interact-cta-foreground-activeDisabled);
1066
- --salt-selectable-cta-background: var(--salt-palette-interact-background);
1067
- --salt-selectable-cta-background-disabled: var(--salt-palette-interact-background-disabled);
1068
- --salt-selectable-cta-background-hover: var(--salt-palette-interact-cta-background-hover);
1069
- --salt-selectable-cta-background-selected: var(--salt-palette-interact-cta-background-active);
1070
- --salt-selectable-cta-background-selectedDisabled: var(--salt-palette-interact-cta-background-activeDisabled);
1071
- --salt-selectable-primary-foreground-hover: var(--salt-palette-interact-primary-foreground-hover);
1072
- --salt-selectable-primary-foreground-selected: var(--salt-palette-interact-primary-foreground-active);
1073
- --salt-selectable-primary-foreground-selectedDisabled: var(--salt-palette-interact-primary-foreground-activeDisabled);
1074
- --salt-selectable-primary-background: var(--salt-palette-interact-background);
1075
- --salt-selectable-primary-background-disabled: var(--salt-palette-interact-background-disabled);
1076
- --salt-selectable-primary-background-hover: var(--salt-palette-interact-primary-background-hover);
1077
- --salt-selectable-primary-background-selected: var(--salt-palette-interact-primary-background-active);
1078
- --salt-selectable-primary-background-selectedDisabled: var(--salt-palette-interact-primary-background-activeDisabled);
1079
- --salt-selectable-secondary-foreground-hover: var(--salt-palette-interact-secondary-foreground-hover);
1080
- --salt-selectable-secondary-foreground-selected: var(--salt-palette-interact-secondary-foreground-active);
1081
- --salt-selectable-secondary-foreground-selectedDisabled: var(--salt-palette-interact-secondary-foreground-activeDisabled);
1082
- --salt-selectable-secondary-background: var(--salt-palette-interact-background);
1083
- --salt-selectable-secondary-background-disabled: var(--salt-palette-interact-background-disabled);
1084
- --salt-selectable-secondary-background-hover: var(--salt-palette-interact-secondary-background-hover);
1085
- --salt-selectable-secondary-background-selected: var(--salt-palette-interact-secondary-background-active);
1086
- --salt-selectable-secondary-background-selectedDisabled: var(--salt-palette-interact-secondary-background-activeDisabled);
1087
- --salt-selectable-foreground-partial: var(--salt-palette-interact-foreground-partial);
1088
- --salt-selectable-foreground-partialDisabled: var(--salt-palette-interact-foreground-partialDisabled);
1089
- --salt-selectable-cta-foreground: var(--salt-palette-interact-foreground);
1090
- --salt-selectable-cta-foreground-disabled: var(--salt-palette-interact-foreground-disabled);
1091
- --salt-selectable-primary-foreground: var(--salt-palette-interact-foreground);
1092
- --salt-selectable-primary-foreground-disabled: var(--salt-palette-interact-foreground-disabled);
1093
- --salt-selectable-secondary-foreground: var(--salt-palette-interact-foreground);
1094
- --salt-selectable-secondary-foreground-disabled: var(--salt-palette-interact-foreground-disabled);
1095
884
  }
1096
885
 
1097
886
  /* css/characteristics/separable.css */
@@ -1111,21 +900,10 @@
1111
900
  --salt-status-static-foreground: var(--salt-palette-neutral-secondary-foreground);
1112
901
  --salt-status-negative-foreground: var(--salt-palette-negative-foreground);
1113
902
  --salt-status-positive-foreground: var(--salt-palette-positive-foreground);
1114
- --salt-status-info-foreground-disabled: var(--salt-palette-info-foreground-disabled);
1115
- --salt-status-success-foreground-disabled: var(--salt-palette-success-foreground-disabled);
1116
- --salt-status-warning-foreground-disabled: var(--salt-palette-warning-foreground-disabled);
1117
- --salt-status-error-foreground-disabled: var(--salt-palette-error-foreground-disabled);
1118
- --salt-status-static-foreground-disabled: var(--salt-palette-neutral-secondary-foreground-disabled);
1119
- --salt-status-negative-foreground-disabled: var(--salt-palette-negative-foreground-disabled);
1120
- --salt-status-positive-foreground-disabled: var(--salt-palette-positive-foreground-disabled);
1121
903
  --salt-status-info-borderColor: var(--salt-palette-info-border);
1122
904
  --salt-status-success-borderColor: var(--salt-palette-success-border);
1123
905
  --salt-status-warning-borderColor: var(--salt-palette-warning-border);
1124
906
  --salt-status-error-borderColor: var(--salt-palette-error-border);
1125
- --salt-status-info-borderColor-disabled: var(--salt-palette-info-border-disabled);
1126
- --salt-status-success-borderColor-disabled: var(--salt-palette-success-border-disabled);
1127
- --salt-status-warning-borderColor-disabled: var(--salt-palette-warning-border-disabled);
1128
- --salt-status-error-borderColor-disabled: var(--salt-palette-error-border-disabled);
1129
907
  --salt-status-info-background: var(--salt-palette-info-background);
1130
908
  --salt-status-success-background: var(--salt-palette-success-background);
1131
909
  --salt-status-warning-background: var(--salt-palette-warning-background);
@@ -1133,25 +911,6 @@
1133
911
  --salt-status-success-background-selected: var(--salt-palette-success-background-selected);
1134
912
  --salt-status-warning-background-selected: var(--salt-palette-warning-background-selected);
1135
913
  --salt-status-error-background-selected: var(--salt-palette-error-background-selected);
1136
- --salt-status-info-background-emphasize: var(--salt-status-info-background);
1137
- --salt-status-success-background-emphasize: var(--salt-status-success-background);
1138
- --salt-status-warning-background-emphasize: var(--salt-status-warning-background);
1139
- --salt-status-error-background-emphasize: var(--salt-status-error-background);
1140
- }
1141
-
1142
- /* css/characteristics/taggable.css */
1143
- .salt-theme {
1144
- --salt-taggable-cursor-hover: pointer;
1145
- --salt-taggable-cursor-active: pointer;
1146
- --salt-taggable-cursor-disabled: not-allowed;
1147
- --salt-taggable-background: var(--salt-palette-interact-primary-background);
1148
- --salt-taggable-background-hover: var(--salt-palette-interact-primary-background-hover);
1149
- --salt-taggable-background-active: var(--salt-palette-interact-primary-background-active);
1150
- --salt-taggable-background-disabled: var(--salt-palette-interact-primary-background-disabled);
1151
- --salt-taggable-foreground: var(--salt-palette-interact-primary-foreground);
1152
- --salt-taggable-foreground-hover: var(--salt-palette-interact-primary-foreground-hover);
1153
- --salt-taggable-foreground-active: var(--salt-palette-interact-primary-foreground-active);
1154
- --salt-taggable-foreground-disabled: var(--salt-palette-interact-primary-foreground-disabled);
1155
914
  }
1156
915
 
1157
916
  /* css/characteristics/text.css */
@@ -1161,10 +920,18 @@
1161
920
  --salt-text-textAlign-embedded: center;
1162
921
  --salt-text-textDecoration: none;
1163
922
  --salt-text-textTransform: none;
923
+ --salt-text-action-letterSpacing: 0.6px;
924
+ --salt-text-action-textTransform: uppercase;
925
+ --salt-text-action-textAlign: center;
926
+ --salt-text-action-fontWeight: var(--salt-typography-fontWeight-semiBold);
1164
927
  --salt-text-fontFamily: var(--salt-typography-fontFamily);
1165
928
  --salt-text-fontWeight: var(--salt-typography-fontWeight-regular);
1166
929
  --salt-text-fontWeight-small: var(--salt-typography-fontWeight-light);
1167
930
  --salt-text-fontWeight-strong: var(--salt-typography-fontWeight-semiBold);
931
+ --salt-text-notation-fontFamily: var(--salt-typography-fontFamily);
932
+ --salt-text-notation-fontWeight: var(--salt-typography-fontWeight-semiBold);
933
+ --salt-text-notation-fontWeight-small: var(--salt-typography-fontWeight-regular);
934
+ --salt-text-notation-fontWeight-strong: var(--salt-typography-fontWeight-bold);
1168
935
  --salt-text-h1-fontFamily: var(--salt-typography-fontFamily);
1169
936
  --salt-text-h1-fontWeight: var(--salt-typography-fontWeight-bold);
1170
937
  --salt-text-h1-fontWeight-small: var(--salt-typography-fontWeight-medium);
@@ -1197,17 +964,6 @@
1197
964
  --salt-text-display3-fontWeight: var(--salt-typography-fontWeight-semiBold);
1198
965
  --salt-text-display3-fontWeight-strong: var(--salt-typography-fontWeight-bold);
1199
966
  --salt-text-display3-fontWeight-small: var(--salt-typography-fontWeight-regular);
1200
- --salt-text-background-selected: var(--salt-palette-interact-background-active);
1201
- --salt-text-primary-foreground: var(--salt-palette-neutral-primary-foreground);
1202
- --salt-text-primary-foreground-disabled: var(--salt-palette-neutral-primary-foreground-disabled);
1203
- --salt-text-secondary-foreground: var(--salt-palette-neutral-secondary-foreground);
1204
- --salt-text-secondary-foreground-disabled: var(--salt-palette-neutral-secondary-foreground-disabled);
1205
- --salt-text-link-foreground-hover: var(--salt-palette-navigate-foreground-hover);
1206
- --salt-text-link-foreground-active: var(--salt-palette-navigate-foreground-active);
1207
- --salt-text-link-foreground-visited: var(--salt-palette-navigate-foreground-visited);
1208
- --salt-text-link-textDecoration: underline;
1209
- --salt-text-link-textDecoration-hover: none;
1210
- --salt-text-link-textDecoration-selected: underline;
1211
967
  --salt-text-code-fontFamily: var(--salt-typography-fontFamily-code);
1212
968
  }
1213
969
  .salt-density-touch {
@@ -1230,6 +986,8 @@
1230
986
  --salt-text-display2-lineHeight: 76px;
1231
987
  --salt-text-display3-fontSize: 42px;
1232
988
  --salt-text-display3-lineHeight: 54px;
989
+ --salt-text-notation-fontSize: 14px;
990
+ --salt-text-notation-lineHeight: 18px;
1233
991
  }
1234
992
  .salt-density-low {
1235
993
  --salt-text-h1-fontSize: 32px;
@@ -1251,6 +1009,8 @@
1251
1009
  --salt-text-display2-lineHeight: 60px;
1252
1010
  --salt-text-display3-fontSize: 32px;
1253
1011
  --salt-text-display3-lineHeight: 42px;
1012
+ --salt-text-notation-fontSize: 12px;
1013
+ --salt-text-notation-lineHeight: 16px;
1254
1014
  }
1255
1015
  .salt-density-medium {
1256
1016
  --salt-text-h1-fontSize: 24px;
@@ -1272,6 +1032,8 @@
1272
1032
  --salt-text-display2-lineHeight: 47px;
1273
1033
  --salt-text-display3-fontSize: 24px;
1274
1034
  --salt-text-display3-lineHeight: 32px;
1035
+ --salt-text-notation-fontSize: 10px;
1036
+ --salt-text-notation-lineHeight: 13px;
1275
1037
  }
1276
1038
  .salt-density-high {
1277
1039
  --salt-text-h1-fontSize: 18px;
@@ -1293,6 +1055,20 @@
1293
1055
  --salt-text-display2-lineHeight: 36px;
1294
1056
  --salt-text-display3-fontSize: 18px;
1295
1057
  --salt-text-display3-lineHeight: 24px;
1058
+ --salt-text-notation-fontSize: 8px;
1059
+ --salt-text-notation-lineHeight: 10px;
1060
+ }
1061
+
1062
+ /* css/characteristics/content.css */
1063
+ .salt-theme {
1064
+ --salt-content-primary-foreground: var(--salt-palette-neutral-primary-foreground);
1065
+ --salt-content-primary-foreground-disabled: var(--salt-palette-neutral-primary-foreground-disabled);
1066
+ --salt-content-secondary-foreground: var(--salt-palette-neutral-secondary-foreground);
1067
+ --salt-content-secondary-foreground-disabled: var(--salt-palette-neutral-secondary-foreground-disabled);
1068
+ --salt-content-foreground-hover: var(--salt-palette-navigate-foreground-hover);
1069
+ --salt-content-foreground-active: var(--salt-palette-navigate-foreground-active);
1070
+ --salt-content-foreground-visited: var(--salt-palette-navigate-foreground-visited);
1071
+ --salt-content-foreground-highlight: var(--salt-palette-interact-background-active);
1296
1072
  }
1297
1073
 
1298
1074
  /* css/characteristics/track.css */
@@ -1301,16 +1077,371 @@
1301
1077
  --salt-track-borderStyle-active: solid;
1302
1078
  --salt-track-borderStyle-complete: solid;
1303
1079
  --salt-track-borderStyle-incomplete: dotted;
1304
- --salt-track-borderWidth: 2px;
1305
- --salt-track-borderWidth-active: 2px;
1306
- --salt-track-borderWidth-complete: 2px;
1307
- --salt-track-borderWidth-incomplete: 2px;
1308
- --salt-track-fontWeight: var(--salt-typography-fontWeight-semiBold);
1309
- --salt-track-textAlign: center;
1080
+ }
1081
+
1082
+ /* css/deprecated/characteristics.css */
1083
+ .salt-theme {
1084
+ --salt-differential-positive-foreground: var(--salt-palette-positive-foreground);
1085
+ --salt-differential-negative-foreground: var(--salt-palette-negative-foreground);
1086
+ --salt-editable-tertiary-background: var(--salt-palette-neutral-tertiary-background);
1087
+ --salt-editable-tertiary-background-active: var(--salt-palette-neutral-tertiary-background);
1088
+ --salt-editable-tertiary-background-disabled: var(--salt-palette-neutral-tertiary-background-disabled);
1089
+ --salt-editable-tertiary-background-hover: var(--salt-palette-neutral-tertiary-background);
1090
+ --salt-editable-tertiary-background-readonly: var(--salt-palette-neutral-tertiary-background-readonly);
1091
+ --salt-measured-borderStyle: solid;
1092
+ --salt-measured-borderStyle-active: solid;
1093
+ --salt-measured-borderStyle-complete: solid;
1094
+ --salt-measured-borderStyle-incomplete: dotted;
1095
+ --salt-measured-borderWidth: 2px;
1096
+ --salt-measured-borderWidth-active: 2px;
1097
+ --salt-measured-borderWidth-complete: 2px;
1098
+ --salt-measured-borderWidth-incomplete: 2px;
1099
+ --salt-measured-fontWeight: var(--salt-typography-fontWeight-semiBold);
1100
+ --salt-measured-textAlign: center;
1101
+ --salt-measured-background: var(--salt-palette-measured-background);
1102
+ --salt-measured-background-disabled: var(--salt-palette-measured-background-disabled);
1103
+ --salt-measured-borderColor: var(--salt-palette-measured-border);
1104
+ --salt-measured-borderColor-disabled: var(--salt-palette-measured-border-disabled);
1105
+ --salt-measured-fill: var(--salt-palette-measured-fill);
1106
+ --salt-measured-fill-disabled: var(--salt-palette-measured-fill-disabled);
1107
+ --salt-measured-foreground: var(--salt-palette-measured-foreground);
1108
+ --salt-measured-foreground-hover: var(--salt-palette-measured-foreground-active);
1109
+ --salt-measured-foreground-active: var(--salt-palette-measured-foreground-active);
1110
+ --salt-measured-foreground-undo: var(--salt-palette-measured-foreground-active);
1111
+ --salt-measured-foreground-activeDisabled: var(--salt-palette-measured-foreground-activeDisabled);
1112
+ --salt-measured-foreground-disabled: var(--salt-palette-measured-foreground-disabled);
1113
+ --salt-overlayable-shadow-scroll-color: var(--salt-shadow-1-color);
1114
+ --salt-overlayable-shadow-borderRegion: var(--salt-shadow-2);
1115
+ --salt-selectable-foreground-partial: var(--salt-palette-interact-foreground-partial);
1116
+ --salt-selectable-foreground-partialDisabled: var(--salt-palette-interact-foreground-partialDisabled);
1117
+ --salt-selectable-cta-foreground: var(--salt-palette-interact-foreground);
1118
+ --salt-selectable-cta-foreground-disabled: var(--salt-palette-interact-foreground-disabled);
1119
+ --salt-selectable-cta-foreground-hover: var(--salt-palette-interact-cta-foreground-hover);
1120
+ --salt-selectable-cta-foreground-selected: var(--salt-palette-interact-cta-foreground-active);
1121
+ --salt-selectable-cta-foreground-selectedDisabled: var(--salt-palette-interact-cta-foreground-activeDisabled);
1122
+ --salt-selectable-cta-background: var(--salt-palette-interact-background);
1123
+ --salt-selectable-cta-background-disabled: var(--salt-palette-interact-background-disabled);
1124
+ --salt-selectable-cta-background-hover: var(--salt-palette-interact-cta-background-hover);
1125
+ --salt-selectable-cta-background-selected: var(--salt-palette-interact-cta-background-active);
1126
+ --salt-selectable-cta-background-selectedDisabled: var(--salt-palette-interact-cta-background-activeDisabled);
1127
+ --salt-selectable-primary-foreground: var(--salt-palette-interact-foreground);
1128
+ --salt-selectable-primary-foreground-disabled: var(--salt-palette-interact-foreground-disabled);
1129
+ --salt-selectable-primary-foreground-hover: var(--salt-palette-interact-primary-foreground-hover);
1130
+ --salt-selectable-primary-foreground-selected: var(--salt-palette-interact-primary-foreground-active);
1131
+ --salt-selectable-primary-foreground-selectedDisabled: var(--salt-palette-interact-primary-foreground-activeDisabled);
1132
+ --salt-selectable-primary-background: var(--salt-palette-interact-background);
1133
+ --salt-selectable-primary-background-disabled: var(--salt-palette-interact-background-disabled);
1134
+ --salt-selectable-primary-background-hover: var(--salt-palette-interact-primary-background-hover);
1135
+ --salt-selectable-primary-background-selected: var(--salt-palette-interact-primary-background-active);
1136
+ --salt-selectable-primary-background-selectedDisabled: var(--salt-palette-interact-primary-background-activeDisabled);
1137
+ --salt-selectable-secondary-foreground: var(--salt-palette-interact-foreground);
1138
+ --salt-selectable-secondary-foreground-disabled: var(--salt-palette-interact-foreground-disabled);
1139
+ --salt-selectable-secondary-foreground-hover: var(--salt-palette-interact-secondary-foreground-hover);
1140
+ --salt-selectable-secondary-foreground-selected: var(--salt-palette-interact-secondary-foreground-active);
1141
+ --salt-selectable-secondary-foreground-selectedDisabled: var(--salt-palette-interact-secondary-foreground-activeDisabled);
1142
+ --salt-selectable-secondary-background: var(--salt-palette-interact-background);
1143
+ --salt-selectable-secondary-background-disabled: var(--salt-palette-interact-background-disabled);
1144
+ --salt-selectable-secondary-background-hover: var(--salt-palette-interact-secondary-background-hover);
1145
+ --salt-selectable-secondary-background-selected: var(--salt-palette-interact-secondary-background-active);
1146
+ --salt-selectable-secondary-background-selectedDisabled: var(--salt-palette-interact-secondary-background-activeDisabled);
1147
+ --salt-status-info-background-emphasize: var(--salt-status-info-background);
1148
+ --salt-status-success-background-emphasize: var(--salt-status-success-background);
1149
+ --salt-status-warning-background-emphasize: var(--salt-status-warning-background);
1150
+ --salt-status-error-background-emphasize: var(--salt-status-error-background);
1151
+ --salt-status-info-foreground-disabled: var(--salt-palette-info-foreground-disabled);
1152
+ --salt-status-success-foreground-disabled: var(--salt-palette-success-foreground-disabled);
1153
+ --salt-status-warning-foreground-disabled: var(--salt-palette-warning-foreground-disabled);
1154
+ --salt-status-error-foreground-disabled: var(--salt-palette-error-foreground-disabled);
1155
+ --salt-status-static-foreground-disabled: var(--salt-palette-neutral-secondary-foreground-disabled);
1156
+ --salt-status-negative-foreground-disabled: var(--salt-palette-negative-foreground-disabled);
1157
+ --salt-status-positive-foreground-disabled: var(--salt-palette-positive-foreground-disabled);
1158
+ --salt-status-info-borderColor-disabled: var(--salt-palette-info-border-disabled);
1159
+ --salt-status-success-borderColor-disabled: var(--salt-palette-success-border-disabled);
1160
+ --salt-status-warning-borderColor-disabled: var(--salt-palette-warning-border-disabled);
1161
+ --salt-status-error-borderColor-disabled: var(--salt-palette-error-border-disabled);
1162
+ --salt-actionable-letterSpacing: 0.6px;
1163
+ --salt-actionable-textTransform: uppercase;
1164
+ --salt-actionable-textAlign: center;
1165
+ --salt-actionable-primary-fontWeight: var(--salt-typography-fontWeight-bold);
1166
+ --salt-actionable-cta-fontWeight: var(--salt-typography-fontWeight-bold);
1167
+ --salt-actionable-secondary-fontWeight: var(--salt-typography-fontWeight-semiBold);
1168
+ --salt-text-background-selected: var(--salt-content-foreground-highlight);
1169
+ --salt-text-link-foreground-hover: var(--salt-palette-navigate-foreground-hover);
1170
+ --salt-text-link-foreground-active: var(--salt-palette-navigate-foreground-active);
1171
+ --salt-text-link-foreground-visited: var(--salt-palette-navigate-foreground-visited);
1172
+ --salt-text-link-textDecoration: underline;
1173
+ --salt-text-link-textDecoration-hover: none;
1174
+ --salt-text-link-textDecoration-selected: underline;
1175
+ --salt-text-primary-foreground: var(--salt-palette-neutral-primary-foreground);
1176
+ --salt-text-primary-foreground-disabled: var(--salt-palette-neutral-primary-foreground-disabled);
1177
+ --salt-text-secondary-foreground: var(--salt-palette-neutral-secondary-foreground);
1178
+ --salt-text-secondary-foreground-disabled: var(--salt-palette-neutral-secondary-foreground-disabled);
1179
+ --salt-navigable-primary-background: var(--salt-palette-navigate-primary-background);
1180
+ --salt-navigable-primary-background-hover: var(--salt-palette-navigate-primary-background-hover);
1181
+ --salt-navigable-primary-background-active: var(--salt-palette-navigate-primary-background-active);
1182
+ --salt-navigable-secondary-background: var(--salt-palette-navigate-secondary-background);
1183
+ --salt-navigable-secondary-background-hover: var(--salt-palette-navigate-secondary-background-hover);
1184
+ --salt-navigable-secondary-background-active: var(--salt-palette-navigate-secondary-background-active);
1185
+ --salt-navigable-tertiary-background: var(--salt-palette-navigate-tertiary-background);
1186
+ --salt-navigable-tertiary-background-hover: var(--salt-palette-navigate-tertiary-background-hover);
1187
+ --salt-navigable-tertiary-background-active: var(--salt-palette-navigate-tertiary-background-active);
1188
+ --salt-navigable-indicator-activeDisabled: var(--salt-palette-navigate-indicator-activeDisabled);
1189
+ --salt-accent-fontWeight: var(--salt-typography-fontWeight-semiBold);
1190
+ --salt-accent-foreground-disabled: var(--salt-palette-accent-foreground-disabled);
1191
+ --salt-accent-background-disabled: var(--salt-palette-accent-background-disabled);
1192
+ --salt-accent-borderColor-disabled: var(--salt-palette-accent-border-disabled);
1193
+ --salt-track-borderWidth: 2px;
1194
+ --salt-track-borderWidth-active: 2px;
1195
+ --salt-track-borderWidth-complete: 2px;
1196
+ --salt-track-borderWidth-incomplete: 2px;
1197
+ --salt-track-fontWeight: var(--salt-typography-fontWeight-semiBold);
1198
+ --salt-track-textAlign: center;
1310
1199
  --salt-track-background: var(--salt-palette-track-background);
1311
1200
  --salt-track-background-disabled: var(--salt-palette-track-background-disabled);
1312
1201
  --salt-track-borderColor: var(--salt-palette-track-border);
1313
1202
  --salt-track-borderColor-disabled: var(--salt-palette-track-border-disabled);
1203
+ --salt-taggable-cursor-hover: pointer;
1204
+ --salt-taggable-cursor-active: pointer;
1205
+ --salt-taggable-cursor-disabled: not-allowed;
1206
+ --salt-taggable-background: var(--salt-palette-interact-primary-background);
1207
+ --salt-taggable-background-hover: var(--salt-palette-interact-primary-background-hover);
1208
+ --salt-taggable-background-active: var(--salt-palette-interact-primary-background-active);
1209
+ --salt-taggable-background-disabled: var(--salt-palette-interact-primary-background-disabled);
1210
+ --salt-taggable-foreground: var(--salt-palette-interact-primary-foreground);
1211
+ --salt-taggable-foreground-hover: var(--salt-palette-interact-primary-foreground-hover);
1212
+ --salt-taggable-foreground-active: var(--salt-palette-interact-primary-foreground-active);
1213
+ --salt-taggable-foreground-disabled: var(--salt-palette-interact-primary-foreground-disabled);
1214
+ --salt-container-tertiary-background: transparent;
1215
+ --salt-container-tertiary-background-disabled: transparent;
1216
+ --salt-container-tertiary-borderColor: transparent;
1217
+ --salt-container-tertiary-borderColor-disabled: transparent;
1218
+ }
1219
+ .salt-density-high {
1220
+ --salt-accent-fontSize: 8px;
1221
+ --salt-accent-lineHeight: 11px;
1222
+ }
1223
+ .salt-density-medium {
1224
+ --salt-accent-fontSize: 10px;
1225
+ --salt-accent-lineHeight: 13px;
1226
+ }
1227
+ .salt-density-low {
1228
+ --salt-accent-fontSize: 12px;
1229
+ --salt-accent-lineHeight: 16px;
1230
+ }
1231
+ .salt-density-touch {
1232
+ --salt-accent-fontSize: 14px;
1233
+ --salt-accent-lineHeight: 18px;
1234
+ }
1235
+
1236
+ /* css/deprecated/fade.css */
1237
+ .salt-theme {
1238
+ --salt-color-orange-500-fade-foreground: rgba(234, 115, 25, var(--salt-palette-opacity-foreground));
1239
+ --salt-color-orange-700-fade-foreground: rgba(214, 85, 19, var(--salt-palette-opacity-foreground));
1240
+ --salt-color-orange-400-fade-background: rgba(238, 133, 43, var(--salt-palette-opacity-background));
1241
+ --salt-color-orange-600-fade-background: rgba(224, 101, 25, var(--salt-palette-opacity-background));
1242
+ --salt-color-blue-300-fade-fill: rgba(51, 141, 205, var(--salt-palette-opacity-fill));
1243
+ --salt-color-blue-500-fade-fill: rgba(38, 112, 169, var(--salt-palette-opacity-fill));
1244
+ }
1245
+
1246
+ /* css/deprecated/foundations.css */
1247
+ .salt-theme {
1248
+ --salt-delay-instant: 100ms;
1249
+ --salt-delay-perceptible: 300ms;
1250
+ --salt-delay-notable: 1000ms;
1251
+ --salt-delay-cutoff: 10000ms;
1252
+ --salt-size-icon-base: var(--salt-icon-size-base);
1253
+ --salt-opacity-1: 0.15;
1254
+ --salt-opacity-2: 0.25;
1255
+ --salt-opacity-3: 0.4;
1256
+ --salt-opacity-4: 0.7;
1257
+ --salt-shadow-0: none;
1258
+ --salt-shadow-1: 0 1px 3px 0 var(--salt-shadow-1-color);
1259
+ --salt-shadow-2: 0 2px 4px 0 var(--salt-shadow-2-color);
1260
+ --salt-shadow-3: 0 4px 8px 0 var(--salt-shadow-3-color);
1261
+ --salt-shadow-4: 0 6px 10px 0 var(--salt-shadow-4-color);
1262
+ --salt-shadow-5: 0 12px 40px 0 var(--salt-shadow-5-color);
1263
+ }
1264
+ .salt-theme[data-mode=light] {
1265
+ --salt-shadow-1-color: rgba(0, 0, 0, 0.1);
1266
+ --salt-shadow-2-color: rgba(0, 0, 0, 0.1);
1267
+ --salt-shadow-3-color: rgba(0, 0, 0, 0.15);
1268
+ --salt-shadow-4-color: rgba(0, 0, 0, 0.2);
1269
+ --salt-shadow-5-color: rgba(0, 0, 0, 0.3);
1270
+ }
1271
+ .salt-theme[data-mode=dark] {
1272
+ --salt-shadow-1-color: rgba(0, 0, 0, 0.5);
1273
+ --salt-shadow-2-color: rgba(0, 0, 0, 0.5);
1274
+ --salt-shadow-3-color: rgba(0, 0, 0, 0.55);
1275
+ --salt-shadow-4-color: rgba(0, 0, 0, 0.55);
1276
+ --salt-shadow-5-color: rgba(0, 0, 0, 0.65);
1277
+ }
1278
+ .salt-density-touch,
1279
+ .salt-density-low,
1280
+ .salt-density-medium,
1281
+ .salt-density-high {
1282
+ --salt-size-selection: var(--salt-size-selectable);
1283
+ --salt-size-brandBar: 4px;
1284
+ --salt-size-graphic-small: 12px;
1285
+ --salt-size-graphic-medium: 24px;
1286
+ --salt-size-graphic-large: 48px;
1287
+ --salt-size-divider-height: var(--salt-size-separator-height);
1288
+ --salt-size-divider-strokeWidth: var(--salt-size-separator-strokeWidth);
1289
+ --salt-size-detail: var(--salt-size-compact);
1290
+ --salt-size-basis-unit: 4px;
1291
+ --salt-size-adornmentGap: calc(0.75 * var(--salt-size-unit));
1292
+ --salt-size-container-spacing: calc(3 * var(--salt-size-unit));
1293
+ --salt-size-separator-strokeWidth: 1px;
1294
+ --salt-size-selectable: calc(var(--salt-size-base) - (1.5 * var(--salt-size-unit)) - (0.5 * var(--salt-size-basis-unit)));
1295
+ --salt-size-separator-height: calc(var(--salt-size-compact) + 1.5 * var(--salt-size-basis-unit));
1296
+ --salt-size-sharktooth-height: 5px;
1297
+ --salt-size-sharktooth-width: 10px;
1298
+ --salt-size-stackable: calc(var(--salt-size-base) + var(--salt-size-unit));
1299
+ --salt-zIndex-docked: 1050;
1300
+ }
1301
+ .salt-density-high {
1302
+ --salt-size-unit: calc(var(--salt-size-basis-unit) * 1);
1303
+ --salt-size-compact: calc(var(--salt-size-basis-unit) * 1.5);
1304
+ --salt-size-accent: calc(var(--salt-size-basis-unit) * 0.5);
1305
+ --salt-icon-size-base: 10px;
1306
+ --salt-icon-size-status-adornment: 6px;
1307
+ }
1308
+ .salt-density-medium {
1309
+ --salt-size-unit: calc(var(--salt-size-basis-unit) * 2);
1310
+ --salt-size-compact: calc(var(--salt-size-basis-unit) * 2);
1311
+ --salt-size-accent: calc(var(--salt-size-basis-unit) * 1);
1312
+ --salt-icon-size-base: 12px;
1313
+ --salt-icon-size-status-adornment: 8px;
1314
+ }
1315
+ .salt-density-low {
1316
+ --salt-size-unit: calc(var(--salt-size-basis-unit) * 3);
1317
+ --salt-size-compact: calc(var(--salt-size-basis-unit) * 2.5);
1318
+ --salt-size-accent: calc(var(--salt-size-basis-unit) * 1.5);
1319
+ --salt-icon-size-base: 14px;
1320
+ --salt-icon-size-status-adornment: 10px;
1321
+ }
1322
+ .salt-density-touch {
1323
+ --salt-size-unit: calc(var(--salt-size-basis-unit) * 4);
1324
+ --salt-size-compact: calc(var(--salt-size-basis-unit) * 3);
1325
+ --salt-size-accent: calc(var(--salt-size-basis-unit) * 2);
1326
+ --salt-icon-size-base: 16px;
1327
+ --salt-icon-size-status-adornment: 12px;
1328
+ }
1329
+
1330
+ /* css/deprecated/palette.css */
1331
+ .salt-theme {
1332
+ --salt-palette-error-background-emphasize: var(--salt-palette-error-background);
1333
+ --salt-palette-warning-background-emphasize: var(--salt-palette-warning-background);
1334
+ --salt-palette-success-background-emphasize: var(--salt-palette-success-background);
1335
+ --salt-palette-info-background-emphasize: var(--salt-palette-info-background);
1336
+ --salt-palette-opacity-fill: var(--salt-palette-opacity-disabled);
1337
+ --salt-palette-opacity-stroke: var(--salt-palette-opacity-disabled);
1338
+ --salt-palette-opacity-background: var(--salt-palette-opacity-disabled);
1339
+ --salt-palette-opacity-border: var(--salt-palette-opacity-disabled);
1340
+ --salt-palette-opacity-foreground: var(--salt-palette-opacity-disabled);
1341
+ }
1342
+ .salt-theme[data-mode=light] {
1343
+ --salt-palette-interact-foreground-partial: var(--salt-color-blue-600);
1344
+ --salt-palette-interact-foreground-partialDisabled: var(--salt-color-blue-600-fade-foreground);
1345
+ --salt-palette-interact-cta-background-activeDisabled: var(--salt-color-blue-700-fade-background);
1346
+ --salt-palette-interact-cta-foreground-activeDisabled: var(--salt-color-white-fade-foreground);
1347
+ --salt-palette-interact-primary-foreground-activeDisabled: var(--salt-color-white-fade-foreground);
1348
+ --salt-palette-interact-primary-background-activeDisabled: var(--salt-color-gray-200-fade-background);
1349
+ --salt-palette-interact-secondary-foreground-activeDisabled: var(--salt-color-white-fade-foreground);
1350
+ --salt-palette-interact-secondary-background-activeDisabled: var(--salt-color-gray-200-fade-background);
1351
+ --salt-palette-measured-fill: var(--salt-color-blue-500);
1352
+ --salt-palette-measured-fill-disabled: var(--salt-color-blue-500-fade-fill);
1353
+ --salt-palette-measured-foreground: var(--salt-color-gray-90);
1354
+ --salt-palette-measured-foreground-active: var(--salt-color-blue-500);
1355
+ --salt-palette-measured-foreground-disabled: var(--salt-color-gray-90-fade-foreground);
1356
+ --salt-palette-measured-foreground-activeDisabled: var(--salt-color-blue-500-fade-fill);
1357
+ --salt-palette-measured-background: var(--salt-color-gray-60);
1358
+ --salt-palette-measured-background-disabled: var(--salt-color-gray-60-fade-background);
1359
+ --salt-palette-measured-border: var(--salt-color-gray-90);
1360
+ --salt-palette-measured-border-disabled: var(--salt-color-gray-90-fade-border);
1361
+ --salt-palette-neutral-tertiary-background-readonly: transparent;
1362
+ --salt-palette-neutral-tertiary-background: transparent;
1363
+ --salt-palette-neutral-tertiary-background-disabled: transparent;
1364
+ --salt-palette-neutral-tertiary-border: transparent;
1365
+ --salt-palette-neutral-tertiary-border-disabled: transparent;
1366
+ --salt-palette-error-foreground-disabled: var(--salt-color-red-500-fade-foreground);
1367
+ --salt-palette-error-border-disabled: var(--salt-color-red-500-fade-border);
1368
+ --salt-palette-info-border-disabled: var(--salt-color-blue-500-fade-border);
1369
+ --salt-palette-info-foreground-disabled: var(--salt-color-blue-500-fade-foreground);
1370
+ --salt-palette-negative-foreground-disabled: var(--salt-color-red-700-fade-foreground);
1371
+ --salt-palette-positive-foreground-disabled: var(--salt-color-green-700-fade-foreground);
1372
+ --salt-palette-success-border-disabled: var(--salt-color-green-500-fade-border);
1373
+ --salt-palette-success-foreground-disabled: var(--salt-color-green-500-fade-foreground);
1374
+ --salt-palette-warning-foreground-disabled: var(--salt-color-orange-700-fade-foreground);
1375
+ --salt-palette-warning-border-disabled: var(--salt-color-orange-700-fade-border);
1376
+ --salt-palette-navigate-primary-background: transparent;
1377
+ --salt-palette-navigate-primary-background-active: transparent;
1378
+ --salt-palette-navigate-primary-background-hover: var(--salt-color-gray-20);
1379
+ --salt-palette-navigate-secondary-background: transparent;
1380
+ --salt-palette-navigate-secondary-background-active: transparent;
1381
+ --salt-palette-navigate-secondary-background-hover: var(--salt-color-gray-30);
1382
+ --salt-palette-navigate-tertiary-background: transparent;
1383
+ --salt-palette-navigate-tertiary-background-active: transparent;
1384
+ --salt-palette-navigate-tertiary-background-hover: var(--salt-color-gray-20);
1385
+ --salt-palette-navigate-indicator-activeDisabled: var(--salt-color-orange-600-fade-border);
1386
+ --salt-palette-track-border: var(--salt-color-gray-90);
1387
+ --salt-palette-track-border-disabled: var(--salt-color-gray-90-fade-border);
1388
+ --salt-palette-track-background: var(--salt-color-gray-60);
1389
+ --salt-palette-track-background-disabled: var(--salt-color-gray-60-fade-background);
1390
+ --salt-palette-accent-background-disabled: var(--salt-color-blue-500-fade-background);
1391
+ --salt-palette-accent-foreground-disabled: var(--salt-color-white-fade-foreground);
1392
+ --salt-palette-accent-border-disabled: var(--salt-color-blue-500-fade-border);
1393
+ }
1394
+ .salt-theme[data-mode=dark] {
1395
+ --salt-palette-interact-foreground-partial: var(--salt-color-blue-100);
1396
+ --salt-palette-interact-foreground-partialDisabled: var(--salt-color-blue-100-fade-foreground);
1397
+ --salt-palette-interact-cta-background-activeDisabled: var(--salt-color-blue-700-fade-background);
1398
+ --salt-palette-interact-cta-foreground-activeDisabled: var(--salt-color-white-fade-foreground);
1399
+ --salt-palette-interact-primary-foreground-activeDisabled: var(--salt-color-gray-900-fade-foreground);
1400
+ --salt-palette-interact-primary-background-activeDisabled: var(--salt-color-gray-70-fade-background);
1401
+ --salt-palette-interact-secondary-foreground-activeDisabled: var(--salt-color-gray-900-fade-foreground);
1402
+ --salt-palette-interact-secondary-background-activeDisabled: var(--salt-color-gray-70-fade-background);
1403
+ --salt-palette-measured-fill: var(--salt-color-blue-300);
1404
+ --salt-palette-measured-fill-disabled: var(--salt-color-blue-300-fade-fill);
1405
+ --salt-palette-measured-foreground: var(--salt-color-gray-90);
1406
+ --salt-palette-measured-foreground-active: var(--salt-color-blue-300);
1407
+ --salt-palette-measured-foreground-disabled: var(--salt-color-gray-90-fade-foreground);
1408
+ --salt-palette-measured-foreground-activeDisabled: var(--salt-color-blue-300-fade-fill);
1409
+ --salt-palette-measured-background: var(--salt-color-gray-300);
1410
+ --salt-palette-measured-background-disabled: var(--salt-color-gray-300-fade-background);
1411
+ --salt-palette-measured-border: var(--salt-color-gray-90);
1412
+ --salt-palette-measured-border-disabled: var(--salt-color-gray-90-fade-border);
1413
+ --salt-palette-neutral-tertiary-background-readonly: transparent;
1414
+ --salt-palette-neutral-tertiary-background: transparent;
1415
+ --salt-palette-neutral-tertiary-background-disabled: transparent;
1416
+ --salt-palette-neutral-tertiary-border: transparent;
1417
+ --salt-palette-neutral-tertiary-border-disabled: transparent;
1418
+ --salt-palette-error-foreground-disabled: var(--salt-color-red-500-fade-foreground);
1419
+ --salt-palette-error-border-disabled: var(--salt-color-red-500-fade-border);
1420
+ --salt-palette-info-border-disabled: var(--salt-color-blue-500-fade-border);
1421
+ --salt-palette-info-foreground-disabled: var(--salt-color-blue-500-fade-foreground);
1422
+ --salt-palette-negative-foreground-disabled: var(--salt-color-red-300-fade-foreground);
1423
+ --salt-palette-positive-foreground-disabled: var(--salt-color-green-300-fade-foreground);
1424
+ --salt-palette-success-border-disabled: var(--salt-color-green-400-fade-border);
1425
+ --salt-palette-success-foreground-disabled: var(--salt-color-green-400-fade-foreground);
1426
+ --salt-palette-warning-foreground-disabled: var(--salt-color-orange-500-fade-foreground);
1427
+ --salt-palette-warning-border-disabled: var(--salt-color-orange-500-fade-border);
1428
+ --salt-palette-navigate-primary-background: transparent;
1429
+ --salt-palette-navigate-primary-background-active: transparent;
1430
+ --salt-palette-navigate-primary-background-hover: var(--salt-color-gray-700);
1431
+ --salt-palette-navigate-secondary-background: transparent;
1432
+ --salt-palette-navigate-secondary-background-active: transparent;
1433
+ --salt-palette-navigate-secondary-background-hover: var(--salt-color-gray-600);
1434
+ --salt-palette-navigate-tertiary-background: transparent;
1435
+ --salt-palette-navigate-tertiary-background-active: transparent;
1436
+ --salt-palette-navigate-tertiary-background-hover: var(--salt-color-gray-700);
1437
+ --salt-palette-navigate-indicator-activeDisabled: var(--salt-color-orange-400-fade-border);
1438
+ --salt-palette-track-border: var(--salt-color-gray-90);
1439
+ --salt-palette-track-border-disabled: var(--salt-color-gray-90-fade-border);
1440
+ --salt-palette-track-background: var(--salt-color-gray-300);
1441
+ --salt-palette-track-background-disabled: var(--salt-color-gray-300-fade-background);
1442
+ --salt-palette-accent-background-disabled: var(--salt-color-blue-500-fade-background);
1443
+ --salt-palette-accent-foreground-disabled: var(--salt-color-white-fade-foreground);
1444
+ --salt-palette-accent-border-disabled: var(--salt-color-blue-500-fade-border);
1314
1445
  }
1315
1446
 
1316
1447
  /* css/theme.css */