@salt-ds/theme 0.0.0-snapshot-20230623164123 → 0.0.0-snapshot-20230816152726

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 (3) hide show
  1. package/css/theme.css +357 -281
  2. package/index.css +357 -281
  3. package/package.json +1 -1
package/index.css CHANGED
@@ -49,10 +49,10 @@
49
49
  --salt-animation-slide-in-left: slide-in-left var(--salt-animation-duration) var(--salt-animation-timing-function);
50
50
  --salt-animation-slide-in-right: slide-in-right var(--salt-animation-duration) var(--salt-animation-timing-function);
51
51
  --salt-animation-slide-in-bottom: slide-in-bottom var(--salt-animation-duration) var(--salt-animation-timing-function);
52
- --salt-animation-slide-out-top: slide-out-top var(--salt-animation-duration) var(--salt-animation-timing-function);
53
- --salt-animation-slide-out-left: slide-out-left var(--salt-animation-duration) var(--salt-animation-timing-function);
54
- --salt-animation-slide-out-right: slide-out-right var(--salt-animation-duration) var(--salt-animation-timing-function);
55
- --salt-animation-slide-out-bottom: slide-out-bottom var(--salt-animation-duration) var(--salt-animation-timing-function);
52
+ --salt-animation-slide-out-top: slide-out-top var(--salt-animation-duration) var(--salt-animation-timing-function) both;
53
+ --salt-animation-slide-out-left: slide-out-left var(--salt-animation-duration) var(--salt-animation-timing-function) both;
54
+ --salt-animation-slide-out-right: slide-out-right var(--salt-animation-duration) var(--salt-animation-timing-function) both;
55
+ --salt-animation-slide-out-bottom: slide-out-bottom var(--salt-animation-duration) var(--salt-animation-timing-function) both;
56
56
  --salt-animation-fade-in-back: fade-in-back var(--salt-animation-duration) var(--salt-animation-timing-function);
57
57
  --salt-animation-fade-in-forward: fade-in-forward var(--salt-animation-duration) var(--salt-animation-timing-function);
58
58
  --salt-animation-fade-in-center: fade-in-center var(--salt-animation-duration) var(--salt-animation-timing-function);
@@ -285,17 +285,9 @@
285
285
  --salt-color-gray-900: rgb(22, 22, 22);
286
286
  }
287
287
 
288
- /* css/foundations/delay.css */
289
- .salt-theme {
290
- --salt-delay-instant: 100ms;
291
- --salt-delay-perceptible: 300ms;
292
- --salt-delay-notable: 1000ms;
293
- --salt-delay-cutoff: 10000ms;
294
- }
295
-
296
288
  /* css/foundations/duration.css */
297
289
  .salt-theme {
298
- --salt-duration-instant: 100ms;
290
+ --salt-duration-instant: 0ms;
299
291
  --salt-duration-perceptible: 300ms;
300
292
  --salt-duration-notable: 1000ms;
301
293
  --salt-duration-cutoff: 10000ms;
@@ -303,60 +295,54 @@
303
295
 
304
296
  /* css/foundations/fade.css */
305
297
  .salt-theme {
306
- --salt-color-blue-100-fade-foreground: rgba(100, 177, 228, var(--salt-palette-opacity-foreground));
307
- --salt-color-blue-500-fade-foreground: rgba(38, 112, 169, var(--salt-palette-opacity-foreground));
308
- --salt-color-blue-600-fade-foreground: rgba(21, 92, 147, var(--salt-palette-opacity-foreground));
309
- --salt-color-gray-200-fade-foreground: rgba(97, 101, 110, var(--salt-palette-opacity-foreground));
310
- --salt-color-gray-70-fade-foreground: rgba(180, 183, 190, var(--salt-palette-opacity-foreground));
311
- --salt-color-gray-90-fade-foreground: rgba(132, 135, 142, var(--salt-palette-opacity-foreground));
312
- --salt-color-gray-900-fade-foreground: rgba(22, 22, 22, var(--salt-palette-opacity-foreground));
313
- --salt-color-green-300-fade-foreground: rgba(60, 171, 96, var(--salt-palette-opacity-foreground));
314
- --salt-color-green-400-fade-foreground: rgba(48, 156, 90, var(--salt-palette-opacity-foreground));
315
- --salt-color-green-500-fade-foreground: rgba(36, 135, 75, var(--salt-palette-opacity-foreground));
316
- --salt-color-green-700-fade-foreground: rgba(12, 93, 46, var(--salt-palette-opacity-foreground));
317
- --salt-color-orange-500-fade-foreground: rgba(234, 115, 25, var(--salt-palette-opacity-foreground));
318
- --salt-color-orange-700-fade-foreground: rgba(214, 85, 19, var(--salt-palette-opacity-foreground));
319
- --salt-color-red-300-fade-foreground: rgba(255, 89, 66, var(--salt-palette-opacity-foreground));
320
- --salt-color-red-500-fade-foreground: rgba(227, 43, 22, var(--salt-palette-opacity-foreground));
321
- --salt-color-red-700-fade-foreground: rgba(166, 21, 11, var(--salt-palette-opacity-foreground));
322
- --salt-color-white-fade-foreground: rgba(255, 255, 255, var(--salt-palette-opacity-foreground));
323
- --salt-color-blue-500-fade-border: rgba(38, 112, 169, var(--salt-palette-opacity-border));
324
- --salt-color-gray-60-fade-border: rgba(197, 201, 208, var(--salt-palette-opacity-border));
325
- --salt-color-gray-90-fade-border: rgba(132, 135, 142, var(--salt-palette-opacity-border));
326
- --salt-color-gray-200-fade-border: rgba(97, 101, 110, var(--salt-palette-opacity-border));
327
- --salt-color-gray-300-fade-border: rgba(76, 80, 91, var(--salt-palette-opacity-border));
328
- --salt-color-green-400-fade-border: rgba(48, 156, 90, var(--salt-palette-opacity-border));
329
- --salt-color-green-500-fade-border: rgba(36, 135, 75, var(--salt-palette-opacity-border));
330
- --salt-color-orange-400-fade-border: rgba(238, 133, 43, var(--salt-palette-opacity-border));
331
- --salt-color-orange-500-fade-border: rgba(234, 115, 25, var(--salt-palette-opacity-border));
332
- --salt-color-orange-600-fade-border: rgba(224, 101, 25, var(--salt-palette-opacity-border));
333
- --salt-color-orange-700-fade-border: rgba(214, 85, 19, var(--salt-palette-opacity-border));
334
- --salt-color-red-500-fade-border: rgba(227, 43, 22, var(--salt-palette-opacity-border));
298
+ --salt-color-blue-100-fade-foreground: rgba(100, 177, 228, var(--salt-palette-opacity-disabled));
299
+ --salt-color-blue-500-fade-foreground: rgba(38, 112, 169, var(--salt-palette-opacity-disabled));
300
+ --salt-color-blue-600-fade-foreground: rgba(21, 92, 147, var(--salt-palette-opacity-disabled));
301
+ --salt-color-gray-200-fade-foreground: rgba(97, 101, 110, var(--salt-palette-opacity-disabled));
302
+ --salt-color-gray-70-fade-foreground: rgba(180, 183, 190, var(--salt-palette-opacity-disabled));
303
+ --salt-color-gray-90-fade-foreground: rgba(132, 135, 142, var(--salt-palette-opacity-disabled));
304
+ --salt-color-gray-900-fade-foreground: rgba(22, 22, 22, var(--salt-palette-opacity-disabled));
305
+ --salt-color-green-300-fade-foreground: rgba(60, 171, 96, var(--salt-palette-opacity-disabled));
306
+ --salt-color-green-400-fade-foreground: rgba(48, 156, 90, var(--salt-palette-opacity-disabled));
307
+ --salt-color-green-500-fade-foreground: rgba(36, 135, 75, var(--salt-palette-opacity-disabled));
308
+ --salt-color-green-700-fade-foreground: rgba(12, 93, 46, var(--salt-palette-opacity-disabled));
309
+ --salt-color-red-300-fade-foreground: rgba(255, 89, 66, var(--salt-palette-opacity-disabled));
310
+ --salt-color-red-500-fade-foreground: rgba(227, 43, 22, var(--salt-palette-opacity-disabled));
311
+ --salt-color-red-700-fade-foreground: rgba(166, 21, 11, var(--salt-palette-opacity-disabled));
312
+ --salt-color-white-fade-foreground: rgba(255, 255, 255, var(--salt-palette-opacity-disabled));
313
+ --salt-color-blue-500-fade-border: rgba(38, 112, 169, var(--salt-palette-opacity-disabled));
314
+ --salt-color-gray-60-fade-border: rgba(197, 201, 208, var(--salt-palette-opacity-disabled));
315
+ --salt-color-gray-90-fade-border: rgba(132, 135, 142, var(--salt-palette-opacity-disabled));
316
+ --salt-color-gray-200-fade-border: rgba(97, 101, 110, var(--salt-palette-opacity-disabled));
317
+ --salt-color-gray-300-fade-border: rgba(76, 80, 91, var(--salt-palette-opacity-disabled));
318
+ --salt-color-green-400-fade-border: rgba(48, 156, 90, var(--salt-palette-opacity-disabled));
319
+ --salt-color-green-500-fade-border: rgba(36, 135, 75, var(--salt-palette-opacity-disabled));
320
+ --salt-color-orange-400-fade-border: rgba(238, 133, 43, var(--salt-palette-opacity-disabled));
321
+ --salt-color-orange-500-fade-border: rgba(234, 115, 25, var(--salt-palette-opacity-disabled));
322
+ --salt-color-orange-600-fade-border: rgba(224, 101, 25, var(--salt-palette-opacity-disabled));
323
+ --salt-color-orange-700-fade-border: rgba(214, 85, 19, var(--salt-palette-opacity-disabled));
324
+ --salt-color-red-500-fade-border: rgba(227, 43, 22, var(--salt-palette-opacity-disabled));
335
325
  --salt-color-gray-90-fade-border-readonly: rgba(132, 135, 142, var(--salt-palette-opacity-border-readonly));
336
326
  --salt-color-gray-200-fade-border-readonly: rgba(97, 101, 110, var(--salt-palette-opacity-border-readonly));
337
- --salt-color-blue-30-fade-background: rgba(164, 213, 244, var(--salt-palette-opacity-background));
338
- --salt-color-blue-500-fade-background: rgba(38, 112, 169, var(--salt-palette-opacity-background));
339
- --salt-color-blue-600-fade-background: rgba(21, 92, 147, var(--salt-palette-opacity-background));
340
- --salt-color-blue-700-fade-background: rgba(0, 71, 123, var(--salt-palette-opacity-background));
341
- --salt-color-gray-20-fade-background: rgba(234, 237, 239, var(--salt-palette-opacity-background));
342
- --salt-color-gray-60-fade-background: rgba(197, 201, 208, var(--salt-palette-opacity-background));
343
- --salt-color-gray-70-fade-background: rgba(180, 183, 190, var(--salt-palette-opacity-background));
344
- --salt-color-gray-200-fade-background: rgba(97, 101, 110, var(--salt-palette-opacity-background));
345
- --salt-color-gray-300-fade-background: rgba(76, 80, 91, var(--salt-palette-opacity-background));
346
- --salt-color-gray-600-fade-background: rgba(47, 49, 54, var(--salt-palette-opacity-background));
347
- --salt-color-gray-800-fade-background: rgba(36, 37, 38, var(--salt-palette-opacity-background));
348
- --salt-color-orange-400-fade-background: rgba(238, 133, 43, var(--salt-palette-opacity-background));
349
- --salt-color-orange-600-fade-background: rgba(224, 101, 25, var(--salt-palette-opacity-background));
350
- --salt-color-white-fade-background: rgba(255, 255, 255, var(--salt-palette-opacity-background));
327
+ --salt-color-blue-30-fade-background: rgba(164, 213, 244, var(--salt-palette-opacity-disabled));
328
+ --salt-color-blue-500-fade-background: rgba(38, 112, 169, var(--salt-palette-opacity-disabled));
329
+ --salt-color-blue-600-fade-background: rgba(21, 92, 147, var(--salt-palette-opacity-disabled));
330
+ --salt-color-blue-700-fade-background: rgba(0, 71, 123, var(--salt-palette-opacity-disabled));
331
+ --salt-color-gray-20-fade-background: rgba(234, 237, 239, var(--salt-palette-opacity-disabled));
332
+ --salt-color-gray-60-fade-background: rgba(197, 201, 208, var(--salt-palette-opacity-disabled));
333
+ --salt-color-gray-70-fade-background: rgba(180, 183, 190, var(--salt-palette-opacity-disabled));
334
+ --salt-color-gray-200-fade-background: rgba(97, 101, 110, var(--salt-palette-opacity-disabled));
335
+ --salt-color-gray-300-fade-background: rgba(76, 80, 91, var(--salt-palette-opacity-disabled));
336
+ --salt-color-gray-600-fade-background: rgba(47, 49, 54, var(--salt-palette-opacity-disabled));
337
+ --salt-color-gray-800-fade-background: rgba(36, 37, 38, var(--salt-palette-opacity-disabled));
338
+ --salt-color-white-fade-background: rgba(255, 255, 255, var(--salt-palette-opacity-disabled));
351
339
  --salt-color-white-fade-background-readonly: rgba(255, 255, 255, var(--salt-palette-opacity-background-readonly));
352
340
  --salt-color-gray-20-fade-background-readonly: rgba(234, 237, 239, var(--salt-palette-opacity-background-readonly));
353
341
  --salt-color-gray-600-fade-background-readonly: rgba(47, 49, 54, var(--salt-palette-opacity-background-readonly));
354
342
  --salt-color-gray-800-fade-background-readonly: rgba(36, 37, 38, var(--salt-palette-opacity-background-readonly));
355
343
  --salt-color-black-fade-backdrop: rgba(36, 37, 38, var(--salt-palette-opacity-backdrop));
356
- --salt-color-blue-100-fade-fill: rgba(100, 177, 228, var(--salt-palette-opacity-fill));
357
- --salt-color-blue-300-fade-fill: rgba(51, 141, 205, var(--salt-palette-opacity-fill));
358
- --salt-color-blue-500-fade-fill: rgba(38, 112, 169, var(--salt-palette-opacity-fill));
359
- --salt-color-blue-600-fade-fill: rgba(21, 92, 147, var(--salt-palette-opacity-fill));
344
+ --salt-color-blue-100-fade-fill: rgba(100, 177, 228, var(--salt-palette-opacity-disabled));
345
+ --salt-color-blue-600-fade-fill: rgba(21, 92, 147, var(--salt-palette-opacity-disabled));
360
346
  --salt-color-white-fade-separatorOpacity-primary: rgba(255, 255, 255, var(--salt-palette-opacity-primary-border));
361
347
  --salt-color-white-fade-separatorOpacity-secondary: rgba(255, 255, 255, var(--salt-palette-opacity-secondary-border));
362
348
  --salt-color-white-fade-separatorOpacity-tertiary: rgba(255, 255, 255, var(--salt-palette-opacity-tertiary-border));
@@ -382,16 +368,15 @@
382
368
  --salt-icon-size-base: 10px;
383
369
  --salt-icon-size-status-adornment: 6px;
384
370
  }
385
- .salt-theme {
386
- --salt-size-icon-base: var(--salt-icon-size-base);
387
- }
388
371
 
389
372
  /* css/foundations/opacity.css */
390
373
  .salt-theme {
391
- --salt-opacity-1: 0.15;
392
- --salt-opacity-2: 0.25;
393
- --salt-opacity-3: 0.4;
394
- --salt-opacity-4: 0.7;
374
+ --salt-opacity-0: 0;
375
+ --salt-opacity-8: 0.08;
376
+ --salt-opacity-15: 0.15;
377
+ --salt-opacity-25: 0.25;
378
+ --salt-opacity-40: 0.4;
379
+ --salt-opacity-70: 0.7;
395
380
  }
396
381
 
397
382
  /* css/foundations/shadow.css */
@@ -432,13 +417,6 @@
432
417
  --salt-size-sharktooth-height: 5px;
433
418
  --salt-size-sharktooth-width: 10px;
434
419
  --salt-size-stackable: calc(var(--salt-size-base) + var(--salt-size-unit));
435
- --salt-size-selection: var(--salt-size-selectable);
436
- --salt-size-brandBar: 4px;
437
- --salt-size-graphic-small: 12px;
438
- --salt-size-graphic-medium: 24px;
439
- --salt-size-graphic-large: 48px;
440
- --salt-size-divider-height: var(--salt-size-separator-height);
441
- --salt-size-divider-strokeWidth: var(--salt-size-separator-strokeWidth);
442
420
  }
443
421
  .salt-density-high {
444
422
  --salt-size-unit: calc(var(--salt-size-basis-unit) * 1);
@@ -450,7 +428,6 @@
450
428
  --salt-size-border: 1px;
451
429
  --salt-size-selectable: 12px;
452
430
  --salt-size-icon: 12px;
453
- --salt-size-detail: var(--salt-size-compact);
454
431
  }
455
432
  .salt-density-medium {
456
433
  --salt-size-unit: calc(var(--salt-size-basis-unit) * 2);
@@ -462,7 +439,6 @@
462
439
  --salt-size-border: 1px;
463
440
  --salt-size-selectable: 14px;
464
441
  --salt-size-icon: 12px;
465
- --salt-size-detail: var(--salt-size-compact);
466
442
  }
467
443
  .salt-density-low {
468
444
  --salt-size-unit: calc(var(--salt-size-basis-unit) * 3);
@@ -474,7 +450,6 @@
474
450
  --salt-size-border: 1px;
475
451
  --salt-size-selectable: 16px;
476
452
  --salt-size-icon: 14px;
477
- --salt-size-detail: var(--salt-size-compact);
478
453
  }
479
454
  .salt-density-touch {
480
455
  --salt-size-unit: calc(var(--salt-size-basis-unit) * 4);
@@ -486,7 +461,6 @@
486
461
  --salt-size-border: 1px;
487
462
  --salt-size-selectable: 18px;
488
463
  --salt-size-icon: 16px;
489
- --salt-size-detail: var(--salt-size-compact);
490
464
  }
491
465
 
492
466
  /* css/foundations/spacing.css */
@@ -536,7 +510,6 @@
536
510
  .salt-density-high {
537
511
  --salt-zIndex-default: 1;
538
512
  --salt-zIndex-popout: 1000;
539
- --salt-zIndex-docked: 1050;
540
513
  --salt-zIndex-appHeader: 1100;
541
514
  --salt-zIndex-drawer: 1200;
542
515
  --salt-zIndex-modal: 1300;
@@ -546,24 +519,7 @@
546
519
  --salt-zIndex-flyover: 1500;
547
520
  }
548
521
 
549
- /* css/foundations/palette.css */
550
- .salt-theme {
551
- --salt-palette-opacity-background: var(--salt-opacity-3);
552
- --salt-palette-opacity-background-readonly: var(--salt-opacity-1);
553
- --salt-palette-opacity-border: var(--salt-opacity-3);
554
- --salt-palette-opacity-border-readonly: var(--salt-opacity-2);
555
- --salt-palette-opacity-fill: var(--salt-opacity-3);
556
- --salt-palette-opacity-foreground: var(--salt-opacity-4);
557
- --salt-palette-opacity-backdrop: var(--salt-opacity-4);
558
- --salt-palette-opacity-stroke: var(--salt-opacity-3);
559
- --salt-palette-opacity-primary-border: var(--salt-opacity-3);
560
- --salt-palette-opacity-secondary-border: var(--salt-opacity-2);
561
- --salt-palette-opacity-tertiary-border: var(--salt-opacity-1);
562
- --salt-palette-error-background-emphasize: var(--salt-palette-error-background);
563
- --salt-palette-warning-background-emphasize: var(--salt-palette-warning-background);
564
- --salt-palette-success-background-emphasize: var(--salt-palette-success-background);
565
- --salt-palette-info-background-emphasize: var(--salt-palette-info-background);
566
- }
522
+ /* css/palette/accent.css */
567
523
  .salt-theme[data-mode=light] {
568
524
  --salt-palette-accent-background: var(--salt-color-blue-500);
569
525
  --salt-palette-accent-background-disabled: var(--salt-color-blue-500-fade-background);
@@ -571,6 +527,44 @@
571
527
  --salt-palette-accent-border-disabled: var(--salt-color-blue-500-fade-border);
572
528
  --salt-palette-accent-foreground: var(--salt-color-white);
573
529
  --salt-palette-accent-foreground-disabled: var(--salt-color-white-fade-foreground);
530
+ }
531
+ .salt-theme[data-mode=dark] {
532
+ --salt-palette-accent-background: var(--salt-color-blue-500);
533
+ --salt-palette-accent-background-disabled: var(--salt-color-blue-500-fade-background);
534
+ --salt-palette-accent-border: var(--salt-color-blue-500);
535
+ --salt-palette-accent-border-disabled: var(--salt-color-blue-500-fade-border);
536
+ --salt-palette-accent-foreground: var(--salt-color-white);
537
+ --salt-palette-accent-foreground-disabled: var(--salt-color-white-fade-foreground);
538
+ }
539
+
540
+ /* css/palette/error.css */
541
+ .salt-theme[data-mode=light] {
542
+ --salt-palette-error-background: var(--salt-color-red-10);
543
+ --salt-palette-error-background-selected: var(--salt-color-red-20);
544
+ --salt-palette-error-border: var(--salt-color-red-500);
545
+ --salt-palette-error-foreground: var(--salt-color-red-500);
546
+ }
547
+ .salt-theme[data-mode=dark] {
548
+ --salt-palette-error-background: var(--salt-color-red-900);
549
+ --salt-palette-error-background-selected: var(--salt-color-red-900);
550
+ --salt-palette-error-border: var(--salt-color-red-500);
551
+ --salt-palette-error-foreground: var(--salt-color-red-500);
552
+ }
553
+
554
+ /* css/palette/info.css */
555
+ .salt-theme[data-mode=light] {
556
+ --salt-palette-info-background: var(--salt-color-blue-10);
557
+ --salt-palette-info-border: var(--salt-color-blue-500);
558
+ --salt-palette-info-foreground: var(--salt-color-blue-500);
559
+ }
560
+ .salt-theme[data-mode=dark] {
561
+ --salt-palette-info-background: var(--salt-color-blue-900);
562
+ --salt-palette-info-border: var(--salt-color-blue-500);
563
+ --salt-palette-info-foreground: var(--salt-color-blue-500);
564
+ }
565
+
566
+ /* css/palette/interact.css */
567
+ .salt-theme[data-mode=light] {
574
568
  --salt-palette-interact-background: transparent;
575
569
  --salt-palette-interact-background-blurSelected: var(--salt-color-gray-30);
576
570
  --salt-palette-interact-background-hover: var(--salt-color-blue-10);
@@ -619,81 +613,8 @@
619
613
  --salt-palette-interact-secondary-foreground-activeDisabled: var(--salt-color-white-fade-foreground);
620
614
  --salt-palette-interact-secondary-foreground-disabled: var(--salt-color-gray-900-fade-foreground);
621
615
  --salt-palette-interact-secondary-foreground-hover: var(--salt-color-gray-900);
622
- --salt-palette-error-background: var(--salt-color-red-10);
623
- --salt-palette-error-background-selected: var(--salt-color-red-20);
624
- --salt-palette-error-border: var(--salt-color-red-500);
625
- --salt-palette-error-border-disabled: var(--salt-color-red-500-fade-border);
626
- --salt-palette-error-foreground: var(--salt-color-red-500);
627
- --salt-palette-error-foreground-disabled: var(--salt-color-red-500-fade-foreground);
628
- --salt-palette-info-background: var(--salt-color-blue-10);
629
- --salt-palette-info-border: var(--salt-color-blue-500);
630
- --salt-palette-info-border-disabled: var(--salt-color-blue-500-fade-border);
631
- --salt-palette-info-foreground: var(--salt-color-blue-500);
632
- --salt-palette-info-foreground-disabled: var(--salt-color-blue-500-fade-foreground);
633
- --salt-palette-success-background: var(--salt-color-green-10);
634
- --salt-palette-success-background-selected: var(--salt-color-green-20);
635
- --salt-palette-success-border: var(--salt-color-green-500);
636
- --salt-palette-success-border-disabled: var(--salt-color-green-500-fade-border);
637
- --salt-palette-success-foreground: var(--salt-color-green-500);
638
- --salt-palette-success-foreground-disabled: var(--salt-color-green-500-fade-foreground);
639
- --salt-palette-warning-background: var(--salt-color-orange-10);
640
- --salt-palette-warning-background-selected: var(--salt-color-orange-20);
641
- --salt-palette-warning-border: var(--salt-color-orange-700);
642
- --salt-palette-warning-border-disabled: var(--salt-color-orange-700-fade-border);
643
- --salt-palette-warning-foreground: var(--salt-color-orange-700);
644
- --salt-palette-navigate-primary-background: transparent;
645
- --salt-palette-navigate-primary-background-active: transparent;
646
- --salt-palette-navigate-primary-background-hover: var(--salt-color-gray-20);
647
- --salt-palette-navigate-secondary-background: transparent;
648
- --salt-palette-navigate-secondary-background-active: transparent;
649
- --salt-palette-navigate-secondary-background-hover: var(--salt-color-gray-30);
650
- --salt-palette-navigate-tertiary-background: transparent;
651
- --salt-palette-navigate-tertiary-background-active: transparent;
652
- --salt-palette-navigate-tertiary-background-hover: var(--salt-color-gray-20);
653
- --salt-palette-navigate-foreground-hover: var(--salt-color-blue-600);
654
- --salt-palette-navigate-foreground-active: var(--salt-color-blue-700);
655
- --salt-palette-navigate-foreground-visited: var(--salt-color-purple-800);
656
- --salt-palette-navigate-indicator-hover: var(--salt-color-gray-90);
657
- --salt-palette-navigate-indicator-active: var(--salt-color-orange-600);
658
- --salt-palette-navigate-indicator-activeDisabled: var(--salt-color-orange-600-fade-border);
659
- --salt-palette-negative-foreground: var(--salt-color-red-700);
660
- --salt-palette-negative-foreground-disabled: var(--salt-color-red-700-fade-foreground);
661
- --salt-palette-neutral-primary-background: var(--salt-color-white);
662
- --salt-palette-neutral-primary-background-disabled: var(--salt-color-white-fade-background);
663
- --salt-palette-neutral-primary-background-readonly: var(--salt-color-white-fade-background-readonly);
664
- --salt-palette-neutral-primary-foreground: var(--salt-color-gray-900);
665
- --salt-palette-neutral-primary-foreground-disabled: var(--salt-color-gray-900-fade-foreground);
666
- --salt-palette-neutral-primary-separator: var(--salt-color-black-fade-separatorOpacity-primary);
667
- --salt-palette-neutral-primary-border: var(--salt-color-gray-60);
668
- --salt-palette-neutral-primary-border-disabled: var(--salt-color-gray-60-fade-border);
669
- --salt-palette-neutral-secondary-background: var(--salt-color-gray-20);
670
- --salt-palette-neutral-secondary-background-disabled: var(--salt-color-gray-20-fade-background);
671
- --salt-palette-neutral-secondary-background-readonly: var(--salt-color-gray-20-fade-background-readonly);
672
- --salt-palette-neutral-secondary-border: var(--salt-color-gray-90);
673
- --salt-palette-neutral-secondary-border-disabled: var(--salt-color-gray-90-fade-border);
674
- --salt-palette-neutral-secondary-foreground: var(--salt-color-gray-200);
675
- --salt-palette-neutral-secondary-foreground-disabled: var(--salt-color-gray-200-fade-foreground);
676
- --salt-palette-neutral-backdrop: var(--salt-color-black-fade-backdrop);
677
- --salt-palette-neutral-secondary-separator: var(--salt-color-black-fade-separatorOpacity-secondary);
678
- --salt-palette-neutral-tertiary-background: transparent;
679
- --salt-palette-neutral-tertiary-background-disabled: transparent;
680
- --salt-palette-neutral-tertiary-border: transparent;
681
- --salt-palette-neutral-tertiary-border-disabled: transparent;
682
- --salt-palette-neutral-tertiary-separator: var(--salt-color-black-fade-separatorOpacity-tertiary);
683
- --salt-palette-positive-foreground: var(--salt-color-green-700);
684
- --salt-palette-positive-foreground-disabled: var(--salt-color-green-700-fade-foreground);
685
- --salt-palette-track-background: var(--salt-color-gray-60);
686
- --salt-palette-track-background-disabled: var(--salt-color-gray-60-fade-background);
687
- --salt-palette-track-border: var(--salt-color-gray-90);
688
- --salt-palette-track-border-disabled: var(--salt-color-gray-90-fade-border);
689
616
  }
690
617
  .salt-theme[data-mode=dark] {
691
- --salt-palette-accent-background: var(--salt-color-blue-500);
692
- --salt-palette-accent-background-disabled: var(--salt-color-blue-500-fade-background);
693
- --salt-palette-accent-border: var(--salt-color-blue-500);
694
- --salt-palette-accent-border-disabled: var(--salt-color-blue-500-fade-border);
695
- --salt-palette-accent-foreground: var(--salt-color-white);
696
- --salt-palette-accent-foreground-disabled: var(--salt-color-white-fade-foreground);
697
618
  --salt-palette-interact-background: transparent;
698
619
  --salt-palette-interact-background-active: var(--salt-color-blue-700);
699
620
  --salt-palette-interact-background-blurSelected: var(--salt-color-gray-600);
@@ -742,28 +663,27 @@
742
663
  --salt-palette-interact-secondary-foreground-activeDisabled: var(--salt-color-gray-900-fade-foreground);
743
664
  --salt-palette-interact-secondary-foreground-disabled: var(--salt-color-white-fade-foreground);
744
665
  --salt-palette-interact-secondary-foreground-hover: var(--salt-color-white);
745
- --salt-palette-error-background: var(--salt-color-red-900);
746
- --salt-palette-error-background-selected: var(--salt-color-red-900);
747
- --salt-palette-error-border: var(--salt-color-red-500);
748
- --salt-palette-error-border-disabled: var(--salt-color-red-500-fade-border);
749
- --salt-palette-error-foreground: var(--salt-color-red-500);
750
- --salt-palette-error-foreground-disabled: var(--salt-color-red-500-fade-foreground);
751
- --salt-palette-info-background: var(--salt-color-blue-900);
752
- --salt-palette-info-border: var(--salt-color-blue-500);
753
- --salt-palette-info-border-disabled: var(--salt-color-blue-500-fade-border);
754
- --salt-palette-info-foreground: var(--salt-color-blue-500);
755
- --salt-palette-info-foreground-disabled: var(--salt-color-blue-500-fade-foreground);
756
- --salt-palette-success-background: var(--salt-color-green-900);
757
- --salt-palette-success-background-selected: var(--salt-color-green-900);
758
- --salt-palette-success-border: var(--salt-color-green-400);
759
- --salt-palette-success-border-disabled: var(--salt-color-green-400-fade-border);
760
- --salt-palette-success-foreground: var(--salt-color-green-400);
761
- --salt-palette-success-foreground-disabled: var(--salt-color-green-400-fade-foreground);
762
- --salt-palette-warning-background: var(--salt-color-orange-900);
763
- --salt-palette-warning-background-selected: var(--salt-color-orange-900);
764
- --salt-palette-warning-border: var(--salt-color-orange-500);
765
- --salt-palette-warning-border-disabled: var(--salt-color-orange-500-fade-border);
766
- --salt-palette-warning-foreground: var(--salt-color-orange-500);
666
+ }
667
+
668
+ /* css/palette/navigate.css */
669
+ .salt-theme[data-mode=light] {
670
+ --salt-palette-navigate-primary-background: transparent;
671
+ --salt-palette-navigate-primary-background-active: transparent;
672
+ --salt-palette-navigate-primary-background-hover: var(--salt-color-gray-20);
673
+ --salt-palette-navigate-secondary-background: transparent;
674
+ --salt-palette-navigate-secondary-background-active: transparent;
675
+ --salt-palette-navigate-secondary-background-hover: var(--salt-color-gray-30);
676
+ --salt-palette-navigate-tertiary-background: transparent;
677
+ --salt-palette-navigate-tertiary-background-active: transparent;
678
+ --salt-palette-navigate-tertiary-background-hover: var(--salt-color-gray-20);
679
+ --salt-palette-navigate-foreground-hover: var(--salt-color-blue-600);
680
+ --salt-palette-navigate-foreground-active: var(--salt-color-blue-700);
681
+ --salt-palette-navigate-foreground-visited: var(--salt-color-purple-800);
682
+ --salt-palette-navigate-indicator-hover: var(--salt-color-gray-90);
683
+ --salt-palette-navigate-indicator-active: var(--salt-color-orange-600);
684
+ --salt-palette-navigate-indicator-activeDisabled: var(--salt-color-orange-600-fade-border);
685
+ }
686
+ .salt-theme[data-mode=dark] {
767
687
  --salt-palette-navigate-primary-background: transparent;
768
688
  --salt-palette-navigate-primary-background-active: transparent;
769
689
  --salt-palette-navigate-primary-background-hover: var(--salt-color-gray-700);
@@ -779,8 +699,42 @@
779
699
  --salt-palette-navigate-indicator-hover: var(--salt-color-gray-90);
780
700
  --salt-palette-navigate-indicator-active: var(--salt-color-orange-400);
781
701
  --salt-palette-navigate-indicator-activeDisabled: var(--salt-color-orange-400-fade-border);
702
+ }
703
+
704
+ /* css/palette/negative.css */
705
+ .salt-theme[data-mode=light] {
706
+ --salt-palette-negative-foreground: var(--salt-color-red-700);
707
+ }
708
+ .salt-theme[data-mode=dark] {
782
709
  --salt-palette-negative-foreground: var(--salt-color-red-300);
783
- --salt-palette-negative-foreground-disabled: var(--salt-color-red-300-fade-foreground);
710
+ }
711
+
712
+ /* css/palette/neutral.css */
713
+ .salt-theme[data-mode=light] {
714
+ --salt-palette-neutral-primary-background: var(--salt-color-white);
715
+ --salt-palette-neutral-primary-background-disabled: var(--salt-color-white-fade-background);
716
+ --salt-palette-neutral-primary-background-readonly: var(--salt-color-white-fade-background-readonly);
717
+ --salt-palette-neutral-primary-foreground: var(--salt-color-gray-900);
718
+ --salt-palette-neutral-primary-foreground-disabled: var(--salt-color-gray-900-fade-foreground);
719
+ --salt-palette-neutral-primary-separator: var(--salt-color-black-fade-separatorOpacity-primary);
720
+ --salt-palette-neutral-primary-border: var(--salt-color-gray-60);
721
+ --salt-palette-neutral-primary-border-disabled: var(--salt-color-gray-60-fade-border);
722
+ --salt-palette-neutral-secondary-background: var(--salt-color-gray-20);
723
+ --salt-palette-neutral-secondary-background-disabled: var(--salt-color-gray-20-fade-background);
724
+ --salt-palette-neutral-secondary-background-readonly: var(--salt-color-gray-20-fade-background-readonly);
725
+ --salt-palette-neutral-secondary-border: var(--salt-color-gray-90);
726
+ --salt-palette-neutral-secondary-border-disabled: var(--salt-color-gray-90-fade-border);
727
+ --salt-palette-neutral-secondary-foreground: var(--salt-color-gray-200);
728
+ --salt-palette-neutral-secondary-foreground-disabled: var(--salt-color-gray-200-fade-foreground);
729
+ --salt-palette-neutral-backdrop: var(--salt-color-black-fade-backdrop);
730
+ --salt-palette-neutral-secondary-separator: var(--salt-color-black-fade-separatorOpacity-secondary);
731
+ --salt-palette-neutral-tertiary-background: transparent;
732
+ --salt-palette-neutral-tertiary-background-disabled: transparent;
733
+ --salt-palette-neutral-tertiary-border: transparent;
734
+ --salt-palette-neutral-tertiary-border-disabled: transparent;
735
+ --salt-palette-neutral-tertiary-separator: var(--salt-color-black-fade-separatorOpacity-tertiary);
736
+ }
737
+ .salt-theme[data-mode=dark] {
784
738
  --salt-palette-neutral-primary-background: var(--salt-color-gray-800);
785
739
  --salt-palette-neutral-primary-background-disabled: var(--salt-color-gray-800-fade-background);
786
740
  --salt-palette-neutral-primary-background-readonly: var(--salt-color-gray-800-fade-background-readonly);
@@ -803,42 +757,67 @@
803
757
  --salt-palette-neutral-tertiary-border: transparent;
804
758
  --salt-palette-neutral-tertiary-border-disabled: transparent;
805
759
  --salt-palette-neutral-tertiary-separator: var(--salt-color-white-fade-separatorOpacity-tertiary);
760
+ }
761
+
762
+ /* css/palette/opacity.css */
763
+ .salt-theme {
764
+ --salt-palette-opacity-backdrop: var(--salt-opacity-70);
765
+ --salt-palette-opacity-disabled: var(--salt-opacity-40);
766
+ --salt-palette-opacity-background-readonly: var(--salt-opacity-0);
767
+ --salt-palette-opacity-border-readonly: var(--salt-opacity-15);
768
+ --salt-palette-opacity-primary-border: var(--salt-opacity-40);
769
+ --salt-palette-opacity-secondary-border: var(--salt-opacity-25);
770
+ --salt-palette-opacity-tertiary-border: var(--salt-opacity-15);
771
+ }
772
+
773
+ /* css/palette/positive.css */
774
+ .salt-theme[data-mode=light] {
775
+ --salt-palette-positive-foreground: var(--salt-color-green-700);
776
+ }
777
+ .salt-theme[data-mode=dark] {
806
778
  --salt-palette-positive-foreground: var(--salt-color-green-300);
807
- --salt-palette-positive-foreground-disabled: var(--salt-color-green-300-fade-foreground);
779
+ }
780
+
781
+ /* css/palette/success.css */
782
+ .salt-theme[data-mode=light] {
783
+ --salt-palette-success-background: var(--salt-color-green-10);
784
+ --salt-palette-success-background-selected: var(--salt-color-green-20);
785
+ --salt-palette-success-border: var(--salt-color-green-500);
786
+ --salt-palette-success-foreground: var(--salt-color-green-500);
787
+ }
788
+ .salt-theme[data-mode=dark] {
789
+ --salt-palette-success-background: var(--salt-color-green-900);
790
+ --salt-palette-success-background-selected: var(--salt-color-green-900);
791
+ --salt-palette-success-border: var(--salt-color-green-400);
792
+ --salt-palette-success-foreground: var(--salt-color-green-400);
793
+ }
794
+
795
+ /* css/palette/track.css */
796
+ .salt-theme[data-mode=light] {
797
+ --salt-palette-track-background: var(--salt-color-gray-60);
798
+ --salt-palette-track-background-disabled: var(--salt-color-gray-60-fade-background);
799
+ --salt-palette-track-border: var(--salt-color-gray-90);
800
+ --salt-palette-track-border-disabled: var(--salt-color-gray-90-fade-border);
801
+ }
802
+ .salt-theme[data-mode=dark] {
808
803
  --salt-palette-track-background: var(--salt-color-gray-300);
809
804
  --salt-palette-track-background-disabled: var(--salt-color-gray-300-fade-background);
810
805
  --salt-palette-track-border: var(--salt-color-gray-90);
811
806
  --salt-palette-track-border-disabled: var(--salt-color-gray-90-fade-border);
812
807
  }
808
+
809
+ /* css/palette/warning.css */
813
810
  .salt-theme[data-mode=light] {
814
- --salt-palette-interact-foreground-partial: var(--salt-color-blue-600);
815
- --salt-palette-interact-foreground-partialDisabled: var(--salt-color-blue-600-fade-foreground);
816
- --salt-palette-measured-fill: var(--salt-color-blue-500);
817
- --salt-palette-measured-fill-disabled: var(--salt-color-blue-500-fade-fill);
818
- --salt-palette-measured-foreground: var(--salt-color-gray-90);
819
- --salt-palette-measured-foreground-active: var(--salt-color-blue-500);
820
- --salt-palette-measured-foreground-disabled: var(--salt-color-gray-90-fade-foreground);
821
- --salt-palette-measured-foreground-activeDisabled: var(--salt-color-blue-500-fade-fill);
822
- --salt-palette-measured-background: var(--salt-color-gray-60);
823
- --salt-palette-measured-background-disabled: var(--salt-color-gray-60-fade-background);
824
- --salt-palette-measured-border: var(--salt-color-gray-90);
825
- --salt-palette-measured-border-disabled: var(--salt-color-gray-90-fade-border);
826
- --salt-palette-neutral-tertiary-background-readonly: transparent;
811
+ --salt-palette-warning-background: var(--salt-color-orange-10);
812
+ --salt-palette-warning-background-selected: var(--salt-color-orange-20);
813
+ --salt-palette-warning-border: var(--salt-color-orange-700);
814
+ --salt-palette-warning-foreground: var(--salt-color-orange-700);
827
815
  }
828
816
  .salt-theme[data-mode=dark] {
829
- --salt-palette-interact-foreground-partial: var(--salt-color-blue-100);
830
- --salt-palette-interact-foreground-partialDisabled: var(--salt-color-blue-100-fade-foreground);
831
- --salt-palette-measured-fill: var(--salt-color-blue-300);
832
- --salt-palette-measured-fill-disabled: var(--salt-color-blue-300-fade-fill);
833
- --salt-palette-measured-foreground: var(--salt-color-gray-90);
834
- --salt-palette-measured-foreground-active: var(--salt-color-blue-300);
835
- --salt-palette-measured-foreground-disabled: var(--salt-color-gray-90-fade-foreground);
836
- --salt-palette-measured-foreground-activeDisabled: var(--salt-color-blue-300-fade-fill);
837
- --salt-palette-measured-background: var(--salt-color-gray-300);
838
- --salt-palette-measured-background-disabled: var(--salt-color-gray-300-fade-background);
839
- --salt-palette-measured-border: var(--salt-color-gray-90);
840
- --salt-palette-measured-border-disabled: var(--salt-color-gray-90-fade-border);
841
- --salt-palette-neutral-tertiary-background-readonly: transparent;
817
+ --salt-palette-warning-background: var(--salt-color-orange-900);
818
+ --salt-palette-warning-background-selected: var(--salt-color-orange-900);
819
+ --salt-palette-warning-border: var(--salt-color-orange-500);
820
+ --salt-palette-warning-foreground: var(--salt-color-orange-500);
842
821
  }
843
822
 
844
823
  /* css/characteristics/accent.css */
@@ -922,12 +901,6 @@
922
901
  --salt-container-tertiary-borderColor-disabled: var(--salt-palette-neutral-tertiary-border-disabled);
923
902
  }
924
903
 
925
- /* css/characteristics/differential.css */
926
- .salt-theme {
927
- --salt-differential-positive-foreground: var(--salt-palette-positive-foreground);
928
- --salt-differential-negative-foreground: var(--salt-palette-negative-foreground);
929
- }
930
-
931
904
  /* css/characteristics/draggable.css */
932
905
  .salt-theme {
933
906
  --salt-draggable-horizontal-cursor-hover: row-resize;
@@ -976,11 +949,6 @@
976
949
  --salt-editable-secondary-background-hover: var(--salt-palette-neutral-secondary-background);
977
950
  --salt-editable-secondary-background-readonly: var(--salt-palette-neutral-secondary-background-readonly);
978
951
  --salt-editable-help-fontStyle: italic;
979
- --salt-editable-tertiary-background: var(--salt-palette-neutral-tertiary-background);
980
- --salt-editable-tertiary-background-active: var(--salt-palette-neutral-tertiary-background);
981
- --salt-editable-tertiary-background-disabled: var(--salt-palette-neutral-tertiary-background-disabled);
982
- --salt-editable-tertiary-background-hover: var(--salt-palette-neutral-tertiary-background);
983
- --salt-editable-tertiary-background-readonly: var(--salt-palette-neutral-tertiary-background-readonly);
984
952
  }
985
953
 
986
954
  /* css/characteristics/focused.css */
@@ -1004,32 +972,6 @@
1004
972
  position: absolute;
1005
973
  }
1006
974
 
1007
- /* css/characteristics/measured.css */
1008
- .salt-theme {
1009
- --salt-measured-borderStyle: solid;
1010
- --salt-measured-borderStyle-active: solid;
1011
- --salt-measured-borderStyle-complete: solid;
1012
- --salt-measured-borderStyle-incomplete: dotted;
1013
- --salt-measured-borderWidth: 2px;
1014
- --salt-measured-borderWidth-active: 2px;
1015
- --salt-measured-borderWidth-complete: 2px;
1016
- --salt-measured-borderWidth-incomplete: 2px;
1017
- --salt-measured-fontWeight: var(--salt-typography-fontWeight-semiBold);
1018
- --salt-measured-textAlign: center;
1019
- --salt-measured-background: var(--salt-palette-measured-background);
1020
- --salt-measured-background-disabled: var(--salt-palette-measured-background-disabled);
1021
- --salt-measured-borderColor: var(--salt-palette-measured-border);
1022
- --salt-measured-borderColor-disabled: var(--salt-palette-measured-border-disabled);
1023
- --salt-measured-fill: var(--salt-palette-measured-fill);
1024
- --salt-measured-fill-disabled: var(--salt-palette-measured-fill-disabled);
1025
- --salt-measured-foreground: var(--salt-palette-measured-foreground);
1026
- --salt-measured-foreground-hover: var(--salt-palette-measured-foreground-active);
1027
- --salt-measured-foreground-active: var(--salt-palette-measured-foreground-active);
1028
- --salt-measured-foreground-undo: var(--salt-palette-measured-foreground-active);
1029
- --salt-measured-foreground-activeDisabled: var(--salt-palette-measured-foreground-activeDisabled);
1030
- --salt-measured-foreground-disabled: var(--salt-palette-measured-foreground-disabled);
1031
- }
1032
-
1033
975
  /* css/characteristics/navigable.css */
1034
976
  .salt-theme {
1035
977
  --salt-navigable-cursor-active: pointer;
@@ -1064,7 +1006,6 @@
1064
1006
  --salt-overlayable-shadow-drag: var(--salt-shadow-4);
1065
1007
  --salt-overlayable-shadow-modal: var(--salt-shadow-5);
1066
1008
  --salt-overlayable-background: var(--salt-palette-neutral-backdrop);
1067
- --salt-overlayable-shadow-scroll-color: var(--salt-shadow-1-color);
1068
1009
  }
1069
1010
 
1070
1011
  /* css/characteristics/selectable.css */
@@ -1083,6 +1024,7 @@
1083
1024
  --salt-selectable-borderColor-selected: var(--salt-palette-interact-border-active);
1084
1025
  --salt-selectable-borderColor-selectedDisabled: var(--salt-palette-interact-border-activeDisabled);
1085
1026
  --salt-selectable-borderColor-disabled: var(--salt-palette-interact-border-disabled);
1027
+ --salt-selectable-borderColor-readonly: var(--salt-palette-interact-border-readonly);
1086
1028
  --salt-selectable-foreground: var(--salt-palette-interact-foreground);
1087
1029
  --salt-selectable-foreground-disabled: var(--salt-palette-interact-foreground-disabled);
1088
1030
  --salt-selectable-foreground-hover: var(--salt-palette-interact-foreground-hover);
@@ -1118,14 +1060,6 @@
1118
1060
  --salt-selectable-secondary-background-hover: var(--salt-palette-interact-secondary-background-hover);
1119
1061
  --salt-selectable-secondary-background-selected: var(--salt-palette-interact-secondary-background-active);
1120
1062
  --salt-selectable-secondary-background-selectedDisabled: var(--salt-palette-interact-secondary-background-activeDisabled);
1121
- --salt-selectable-foreground-partial: var(--salt-palette-interact-foreground-partial);
1122
- --salt-selectable-foreground-partialDisabled: var(--salt-palette-interact-foreground-partialDisabled);
1123
- --salt-selectable-cta-foreground: var(--salt-palette-interact-foreground);
1124
- --salt-selectable-cta-foreground-disabled: var(--salt-palette-interact-foreground-disabled);
1125
- --salt-selectable-primary-foreground: var(--salt-palette-interact-foreground);
1126
- --salt-selectable-primary-foreground-disabled: var(--salt-palette-interact-foreground-disabled);
1127
- --salt-selectable-secondary-foreground: var(--salt-palette-interact-foreground);
1128
- --salt-selectable-secondary-foreground-disabled: var(--salt-palette-interact-foreground-disabled);
1129
1063
  }
1130
1064
 
1131
1065
  /* css/characteristics/separable.css */
@@ -1145,21 +1079,10 @@
1145
1079
  --salt-status-static-foreground: var(--salt-palette-neutral-secondary-foreground);
1146
1080
  --salt-status-negative-foreground: var(--salt-palette-negative-foreground);
1147
1081
  --salt-status-positive-foreground: var(--salt-palette-positive-foreground);
1148
- --salt-status-info-foreground-disabled: var(--salt-palette-info-foreground-disabled);
1149
- --salt-status-success-foreground-disabled: var(--salt-palette-success-foreground-disabled);
1150
- --salt-status-warning-foreground-disabled: var(--salt-palette-warning-foreground-disabled);
1151
- --salt-status-error-foreground-disabled: var(--salt-palette-error-foreground-disabled);
1152
- --salt-status-static-foreground-disabled: var(--salt-palette-neutral-secondary-foreground-disabled);
1153
- --salt-status-negative-foreground-disabled: var(--salt-palette-negative-foreground-disabled);
1154
- --salt-status-positive-foreground-disabled: var(--salt-palette-positive-foreground-disabled);
1155
1082
  --salt-status-info-borderColor: var(--salt-palette-info-border);
1156
1083
  --salt-status-success-borderColor: var(--salt-palette-success-border);
1157
1084
  --salt-status-warning-borderColor: var(--salt-palette-warning-border);
1158
1085
  --salt-status-error-borderColor: var(--salt-palette-error-border);
1159
- --salt-status-info-borderColor-disabled: var(--salt-palette-info-border-disabled);
1160
- --salt-status-success-borderColor-disabled: var(--salt-palette-success-border-disabled);
1161
- --salt-status-warning-borderColor-disabled: var(--salt-palette-warning-border-disabled);
1162
- --salt-status-error-borderColor-disabled: var(--salt-palette-error-border-disabled);
1163
1086
  --salt-status-info-background: var(--salt-palette-info-background);
1164
1087
  --salt-status-success-background: var(--salt-palette-success-background);
1165
1088
  --salt-status-warning-background: var(--salt-palette-warning-background);
@@ -1167,10 +1090,6 @@
1167
1090
  --salt-status-success-background-selected: var(--salt-palette-success-background-selected);
1168
1091
  --salt-status-warning-background-selected: var(--salt-palette-warning-background-selected);
1169
1092
  --salt-status-error-background-selected: var(--salt-palette-error-background-selected);
1170
- --salt-status-info-background-emphasize: var(--salt-status-info-background);
1171
- --salt-status-success-background-emphasize: var(--salt-status-success-background);
1172
- --salt-status-warning-background-emphasize: var(--salt-status-warning-background);
1173
- --salt-status-error-background-emphasize: var(--salt-status-error-background);
1174
1093
  }
1175
1094
 
1176
1095
  /* css/characteristics/taggable.css */
@@ -1347,6 +1266,163 @@
1347
1266
  --salt-track-borderColor-disabled: var(--salt-palette-track-border-disabled);
1348
1267
  }
1349
1268
 
1269
+ /* css/deprecated/characteristics.css */
1270
+ .salt-theme {
1271
+ --salt-differential-positive-foreground: var(--salt-palette-positive-foreground);
1272
+ --salt-differential-negative-foreground: var(--salt-palette-negative-foreground);
1273
+ --salt-editable-tertiary-background: var(--salt-palette-neutral-tertiary-background);
1274
+ --salt-editable-tertiary-background-active: var(--salt-palette-neutral-tertiary-background);
1275
+ --salt-editable-tertiary-background-disabled: var(--salt-palette-neutral-tertiary-background-disabled);
1276
+ --salt-editable-tertiary-background-hover: var(--salt-palette-neutral-tertiary-background);
1277
+ --salt-editable-tertiary-background-readonly: var(--salt-palette-neutral-tertiary-background-readonly);
1278
+ --salt-measured-borderStyle: solid;
1279
+ --salt-measured-borderStyle-active: solid;
1280
+ --salt-measured-borderStyle-complete: solid;
1281
+ --salt-measured-borderStyle-incomplete: dotted;
1282
+ --salt-measured-borderWidth: 2px;
1283
+ --salt-measured-borderWidth-active: 2px;
1284
+ --salt-measured-borderWidth-complete: 2px;
1285
+ --salt-measured-borderWidth-incomplete: 2px;
1286
+ --salt-measured-fontWeight: var(--salt-typography-fontWeight-semiBold);
1287
+ --salt-measured-textAlign: center;
1288
+ --salt-measured-background: var(--salt-palette-measured-background);
1289
+ --salt-measured-background-disabled: var(--salt-palette-measured-background-disabled);
1290
+ --salt-measured-borderColor: var(--salt-palette-measured-border);
1291
+ --salt-measured-borderColor-disabled: var(--salt-palette-measured-border-disabled);
1292
+ --salt-measured-fill: var(--salt-palette-measured-fill);
1293
+ --salt-measured-fill-disabled: var(--salt-palette-measured-fill-disabled);
1294
+ --salt-measured-foreground: var(--salt-palette-measured-foreground);
1295
+ --salt-measured-foreground-hover: var(--salt-palette-measured-foreground-active);
1296
+ --salt-measured-foreground-active: var(--salt-palette-measured-foreground-active);
1297
+ --salt-measured-foreground-undo: var(--salt-palette-measured-foreground-active);
1298
+ --salt-measured-foreground-activeDisabled: var(--salt-palette-measured-foreground-activeDisabled);
1299
+ --salt-measured-foreground-disabled: var(--salt-palette-measured-foreground-disabled);
1300
+ --salt-overlayable-shadow-scroll-color: var(--salt-shadow-1-color);
1301
+ --salt-selectable-foreground-partial: var(--salt-palette-interact-foreground-partial);
1302
+ --salt-selectable-foreground-partialDisabled: var(--salt-palette-interact-foreground-partialDisabled);
1303
+ --salt-selectable-cta-foreground: var(--salt-palette-interact-foreground);
1304
+ --salt-selectable-cta-foreground-disabled: var(--salt-palette-interact-foreground-disabled);
1305
+ --salt-selectable-primary-foreground: var(--salt-palette-interact-foreground);
1306
+ --salt-selectable-primary-foreground-disabled: var(--salt-palette-interact-foreground-disabled);
1307
+ --salt-selectable-secondary-foreground: var(--salt-palette-interact-foreground);
1308
+ --salt-selectable-secondary-foreground-disabled: var(--salt-palette-interact-foreground-disabled);
1309
+ --salt-status-info-background-emphasize: var(--salt-status-info-background);
1310
+ --salt-status-success-background-emphasize: var(--salt-status-success-background);
1311
+ --salt-status-warning-background-emphasize: var(--salt-status-warning-background);
1312
+ --salt-status-error-background-emphasize: var(--salt-status-error-background);
1313
+ --salt-status-info-foreground-disabled: var(--salt-palette-info-foreground-disabled);
1314
+ --salt-status-success-foreground-disabled: var(--salt-palette-success-foreground-disabled);
1315
+ --salt-status-warning-foreground-disabled: var(--salt-palette-warning-foreground-disabled);
1316
+ --salt-status-error-foreground-disabled: var(--salt-palette-error-foreground-disabled);
1317
+ --salt-status-static-foreground-disabled: var(--salt-palette-neutral-secondary-foreground-disabled);
1318
+ --salt-status-negative-foreground-disabled: var(--salt-palette-negative-foreground-disabled);
1319
+ --salt-status-positive-foreground-disabled: var(--salt-palette-positive-foreground-disabled);
1320
+ --salt-status-info-borderColor-disabled: var(--salt-palette-info-border-disabled);
1321
+ --salt-status-success-borderColor-disabled: var(--salt-palette-success-border-disabled);
1322
+ --salt-status-warning-borderColor-disabled: var(--salt-palette-warning-border-disabled);
1323
+ --salt-status-error-borderColor-disabled: var(--salt-palette-error-border-disabled);
1324
+ }
1325
+
1326
+ /* css/deprecated/fade.css */
1327
+ .salt-theme {
1328
+ --salt-color-orange-500-fade-foreground: rgba(234, 115, 25, var(--salt-palette-opacity-foreground));
1329
+ --salt-color-orange-700-fade-foreground: rgba(214, 85, 19, var(--salt-palette-opacity-foreground));
1330
+ --salt-color-orange-400-fade-background: rgba(238, 133, 43, var(--salt-palette-opacity-background));
1331
+ --salt-color-orange-600-fade-background: rgba(224, 101, 25, var(--salt-palette-opacity-background));
1332
+ --salt-color-blue-300-fade-fill: rgba(51, 141, 205, var(--salt-palette-opacity-fill));
1333
+ --salt-color-blue-500-fade-fill: rgba(38, 112, 169, var(--salt-palette-opacity-fill));
1334
+ }
1335
+
1336
+ /* css/deprecated/foundations.css */
1337
+ .salt-theme {
1338
+ --salt-delay-instant: 100ms;
1339
+ --salt-delay-perceptible: 300ms;
1340
+ --salt-delay-notable: 1000ms;
1341
+ --salt-delay-cutoff: 10000ms;
1342
+ --salt-size-icon-base: var(--salt-icon-size-base);
1343
+ --salt-opacity-1: 0.15;
1344
+ --salt-opacity-2: 0.25;
1345
+ --salt-opacity-3: 0.4;
1346
+ --salt-opacity-4: 0.7;
1347
+ }
1348
+ .salt-density-touch,
1349
+ .salt-density-low,
1350
+ .salt-density-medium,
1351
+ .salt-density-high {
1352
+ --salt-size-selection: var(--salt-size-selectable);
1353
+ --salt-size-brandBar: 4px;
1354
+ --salt-size-graphic-small: 12px;
1355
+ --salt-size-graphic-medium: 24px;
1356
+ --salt-size-graphic-large: 48px;
1357
+ --salt-size-divider-height: var(--salt-size-separator-height);
1358
+ --salt-size-divider-strokeWidth: var(--salt-size-separator-strokeWidth);
1359
+ --salt-size-detail: var(--salt-size-compact);
1360
+ --salt-zIndex-docked: 1050;
1361
+ }
1362
+
1363
+ /* css/deprecated/palette.css */
1364
+ .salt-theme {
1365
+ --salt-palette-error-background-emphasize: var(--salt-palette-error-background);
1366
+ --salt-palette-warning-background-emphasize: var(--salt-palette-warning-background);
1367
+ --salt-palette-success-background-emphasize: var(--salt-palette-success-background);
1368
+ --salt-palette-info-background-emphasize: var(--salt-palette-info-background);
1369
+ --salt-palette-opacity-fill: var(--salt-palette-opacity-disabled);
1370
+ --salt-palette-opacity-stroke: var(--salt-palette-opacity-disabled);
1371
+ --salt-palette-opacity-background: var(--salt-palette-opacity-disabled);
1372
+ --salt-palette-opacity-border: var(--salt-palette-opacity-disabled);
1373
+ --salt-palette-opacity-foreground: var(--salt-palette-opacity-disabled);
1374
+ }
1375
+ .salt-theme[data-mode=light] {
1376
+ --salt-palette-interact-foreground-partial: var(--salt-color-blue-600);
1377
+ --salt-palette-interact-foreground-partialDisabled: var(--salt-color-blue-600-fade-foreground);
1378
+ --salt-palette-measured-fill: var(--salt-color-blue-500);
1379
+ --salt-palette-measured-fill-disabled: var(--salt-color-blue-500-fade-fill);
1380
+ --salt-palette-measured-foreground: var(--salt-color-gray-90);
1381
+ --salt-palette-measured-foreground-active: var(--salt-color-blue-500);
1382
+ --salt-palette-measured-foreground-disabled: var(--salt-color-gray-90-fade-foreground);
1383
+ --salt-palette-measured-foreground-activeDisabled: var(--salt-color-blue-500-fade-fill);
1384
+ --salt-palette-measured-background: var(--salt-color-gray-60);
1385
+ --salt-palette-measured-background-disabled: var(--salt-color-gray-60-fade-background);
1386
+ --salt-palette-measured-border: var(--salt-color-gray-90);
1387
+ --salt-palette-measured-border-disabled: var(--salt-color-gray-90-fade-border);
1388
+ --salt-palette-neutral-tertiary-background-readonly: transparent;
1389
+ --salt-palette-error-foreground-disabled: var(--salt-color-red-500-fade-foreground);
1390
+ --salt-palette-error-border-disabled: var(--salt-color-red-500-fade-border);
1391
+ --salt-palette-info-border-disabled: var(--salt-color-blue-500-fade-border);
1392
+ --salt-palette-info-foreground-disabled: var(--salt-color-blue-500-fade-foreground);
1393
+ --salt-palette-negative-foreground-disabled: var(--salt-color-red-700-fade-foreground);
1394
+ --salt-palette-positive-foreground-disabled: var(--salt-color-green-700-fade-foreground);
1395
+ --salt-palette-success-border-disabled: var(--salt-color-green-500-fade-border);
1396
+ --salt-palette-success-foreground-disabled: var(--salt-color-green-500-fade-foreground);
1397
+ --salt-palette-warning-foreground-disabled: var(--salt-color-orange-700-fade-foreground);
1398
+ --salt-palette-warning-border-disabled: var(--salt-color-orange-700-fade-border);
1399
+ }
1400
+ .salt-theme[data-mode=dark] {
1401
+ --salt-palette-interact-foreground-partial: var(--salt-color-blue-100);
1402
+ --salt-palette-interact-foreground-partialDisabled: var(--salt-color-blue-100-fade-foreground);
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-error-foreground-disabled: var(--salt-color-red-500-fade-foreground);
1415
+ --salt-palette-error-border-disabled: var(--salt-color-red-500-fade-border);
1416
+ --salt-palette-info-border-disabled: var(--salt-color-blue-500-fade-border);
1417
+ --salt-palette-info-foreground-disabled: var(--salt-color-blue-500-fade-foreground);
1418
+ --salt-palette-negative-foreground-disabled: var(--salt-color-red-300-fade-foreground);
1419
+ --salt-palette-positive-foreground-disabled: var(--salt-color-green-300-fade-foreground);
1420
+ --salt-palette-success-border-disabled: var(--salt-color-green-400-fade-border);
1421
+ --salt-palette-success-foreground-disabled: var(--salt-color-green-400-fade-foreground);
1422
+ --salt-palette-warning-foreground-disabled: var(--salt-color-orange-500-fade-foreground);
1423
+ --salt-palette-warning-border-disabled: var(--salt-color-orange-500-fade-border);
1424
+ }
1425
+
1350
1426
  /* css/theme.css */
1351
1427
 
1352
1428
  /* index.css */