@salt-ds/theme 1.1.0 → 1.3.0
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.
- package/css/theme.css +156 -42
- package/index.css +156 -42
- package/package.json +1 -1
package/css/theme.css
CHANGED
|
@@ -259,23 +259,48 @@
|
|
|
259
259
|
--salt-delay-cutoff: 10000;
|
|
260
260
|
}
|
|
261
261
|
|
|
262
|
+
/* css/foundations/duration.css */
|
|
263
|
+
.salt-theme {
|
|
264
|
+
--salt-duration-instant: 100;
|
|
265
|
+
--salt-duration-perceptible: 300;
|
|
266
|
+
--salt-duration-notable: 1000;
|
|
267
|
+
--salt-duration-cutoff: 10000;
|
|
268
|
+
}
|
|
269
|
+
|
|
262
270
|
/* css/foundations/fade.css */
|
|
263
271
|
.salt-theme {
|
|
264
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));
|
|
265
274
|
--salt-color-blue-600-fade-foreground: rgba(21, 92, 147, var(--salt-palette-opacity-foreground));
|
|
266
|
-
--salt-color-gray-70-fade-foreground: rgba(180, 183, 190, var(--salt-palette-opacity-foreground));
|
|
267
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));
|
|
268
277
|
--salt-color-gray-90-fade-foreground: rgba(132, 135, 142, var(--salt-palette-opacity-foreground));
|
|
269
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));
|
|
270
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));
|
|
271
290
|
--salt-color-gray-60-fade-border: rgba(197, 201, 208, var(--salt-palette-opacity-border));
|
|
272
291
|
--salt-color-gray-90-fade-border: rgba(132, 135, 142, var(--salt-palette-opacity-border));
|
|
273
292
|
--salt-color-gray-200-fade-border: rgba(97, 101, 110, var(--salt-palette-opacity-border));
|
|
274
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));
|
|
275
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));
|
|
276
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));
|
|
277
301
|
--salt-color-gray-90-fade-border-readonly: rgba(132, 135, 142, var(--salt-palette-opacity-border-readonly));
|
|
278
302
|
--salt-color-gray-200-fade-border-readonly: rgba(97, 101, 110, var(--salt-palette-opacity-border-readonly));
|
|
303
|
+
--salt-color-blue-500-fade-background: rgba(38, 112, 169, var(--salt-palette-opacity-background));
|
|
279
304
|
--salt-color-blue-600-fade-background: rgba(21, 92, 147, var(--salt-palette-opacity-background));
|
|
280
305
|
--salt-color-blue-700-fade-background: rgba(0, 71, 123, var(--salt-palette-opacity-background));
|
|
281
306
|
--salt-color-gray-20-fade-background: rgba(234, 237, 239, var(--salt-palette-opacity-background));
|
|
@@ -357,12 +382,14 @@
|
|
|
357
382
|
.salt-density-medium,
|
|
358
383
|
.salt-density-high {
|
|
359
384
|
--salt-size-basis-unit: 4px;
|
|
385
|
+
--salt-size-adornmentGap: calc(0.75 * var(--salt-size-unit));
|
|
360
386
|
--salt-size-border: 1px;
|
|
361
|
-
--salt-size-
|
|
362
|
-
--salt-size-sharktooth-width: 10px;
|
|
387
|
+
--salt-size-container-spacing: calc(3 * var(--salt-size-unit));
|
|
363
388
|
--salt-size-separator-strokeWidth: 1px;
|
|
364
|
-
--salt-size-separator-height: calc(var(--salt-size-compact) + 1.5 * var(--salt-size-basis-unit));
|
|
365
389
|
--salt-size-selectable: calc(var(--salt-size-base) - (1.5 * var(--salt-size-unit)) - (0.5 * var(--salt-size-basis-unit)));
|
|
390
|
+
--salt-size-separator-height: calc(var(--salt-size-compact) + 1.5 * var(--salt-size-basis-unit));
|
|
391
|
+
--salt-size-sharktooth-height: 5px;
|
|
392
|
+
--salt-size-sharktooth-width: 10px;
|
|
366
393
|
--salt-size-stackable: calc(var(--salt-size-base) + var(--salt-size-unit));
|
|
367
394
|
--salt-size-selection: var(--salt-size-selectable);
|
|
368
395
|
--salt-size-brandBar: 4px;
|
|
@@ -446,8 +473,11 @@
|
|
|
446
473
|
}
|
|
447
474
|
.salt-theme[data-mode=light] {
|
|
448
475
|
--salt-palette-accent-background: var(--salt-color-blue-500);
|
|
476
|
+
--salt-palette-accent-background-disabled: var(--salt-color-blue-500-fade-background);
|
|
449
477
|
--salt-palette-accent-border: var(--salt-color-blue-500);
|
|
478
|
+
--salt-palette-accent-border-disabled: var(--salt-color-blue-500-fade-border);
|
|
450
479
|
--salt-palette-accent-foreground: var(--salt-color-white);
|
|
480
|
+
--salt-palette-accent-foreground-disabled: var(--salt-color-white-fade-foreground);
|
|
451
481
|
--salt-palette-interact-background: transparent;
|
|
452
482
|
--salt-palette-interact-background-blurSelected: var(--salt-color-gray-30);
|
|
453
483
|
--salt-palette-interact-background-hover: var(--salt-color-blue-10);
|
|
@@ -459,10 +489,11 @@
|
|
|
459
489
|
--salt-palette-interact-border-disabled: var(--salt-color-gray-200-fade-border);
|
|
460
490
|
--salt-palette-interact-border-hover: var(--salt-color-blue-500);
|
|
461
491
|
--salt-palette-interact-border-readonly: var(--salt-color-gray-200-fade-border-readonly);
|
|
462
|
-
--salt-palette-interact-foreground: var(--salt-color-gray-
|
|
463
|
-
--salt-palette-interact-foreground-
|
|
464
|
-
--salt-palette-interact-foreground-
|
|
465
|
-
--salt-palette-interact-foreground-
|
|
492
|
+
--salt-palette-interact-foreground: var(--salt-color-gray-200);
|
|
493
|
+
--salt-palette-interact-foreground-active: var(--salt-color-blue-600);
|
|
494
|
+
--salt-palette-interact-foreground-activeDisabled: var(--salt-color-blue-600-fade-foreground);
|
|
495
|
+
--salt-palette-interact-foreground-disabled: var(--salt-color-gray-200-fade-foreground);
|
|
496
|
+
--salt-palette-interact-foreground-hover: var(--salt-color-blue-500);
|
|
466
497
|
--salt-palette-interact-outline: var(--salt-color-blue-600);
|
|
467
498
|
--salt-palette-interact-cta-background: var(--salt-color-blue-600);
|
|
468
499
|
--salt-palette-interact-cta-background-active: var(--salt-color-blue-700);
|
|
@@ -497,28 +528,25 @@
|
|
|
497
528
|
--salt-palette-error-background-emphasize: var(--salt-color-red-10);
|
|
498
529
|
--salt-palette-error-background-selected: var(--salt-color-red-20);
|
|
499
530
|
--salt-palette-error-border: var(--salt-color-red-500);
|
|
531
|
+
--salt-palette-error-border-disabled: var(--salt-color-red-500-fade-border);
|
|
500
532
|
--salt-palette-error-foreground: var(--salt-color-red-500);
|
|
533
|
+
--salt-palette-error-foreground-disabled: var(--salt-color-red-500-fade-foreground);
|
|
501
534
|
--salt-palette-info-background-emphasize: var(--salt-color-blue-10);
|
|
502
535
|
--salt-palette-info-border: var(--salt-color-blue-500);
|
|
536
|
+
--salt-palette-info-border-disabled: var(--salt-color-blue-500-fade-border);
|
|
503
537
|
--salt-palette-info-foreground: var(--salt-color-blue-500);
|
|
538
|
+
--salt-palette-info-foreground-disabled: var(--salt-color-blue-500-fade-foreground);
|
|
504
539
|
--salt-palette-success-background-emphasize: var(--salt-color-green-10);
|
|
505
540
|
--salt-palette-success-background-selected: var(--salt-color-green-20);
|
|
506
541
|
--salt-palette-success-border: var(--salt-color-green-500);
|
|
542
|
+
--salt-palette-success-border-disabled: var(--salt-color-green-500-fade-border);
|
|
507
543
|
--salt-palette-success-foreground: var(--salt-color-green-500);
|
|
544
|
+
--salt-palette-success-foreground-disabled: var(--salt-color-green-500-fade-foreground);
|
|
508
545
|
--salt-palette-warning-background-emphasize: var(--salt-color-orange-10);
|
|
509
546
|
--salt-palette-warning-background-selected: var(--salt-color-orange-20);
|
|
510
547
|
--salt-palette-warning-border: var(--salt-color-orange-700);
|
|
548
|
+
--salt-palette-warning-border-disabled: var(--salt-color-orange-700-fade-border);
|
|
511
549
|
--salt-palette-warning-foreground: var(--salt-color-orange-700);
|
|
512
|
-
--salt-palette-measured-fill: var(--salt-color-blue-500);
|
|
513
|
-
--salt-palette-measured-fill-disabled: var(--salt-color-blue-500-fade-fill);
|
|
514
|
-
--salt-palette-measured-foreground: var(--salt-color-gray-90);
|
|
515
|
-
--salt-palette-measured-foreground-active: var(--salt-color-blue-500);
|
|
516
|
-
--salt-palette-measured-foreground-disabled: var(--salt-color-gray-90-fade-foreground);
|
|
517
|
-
--salt-palette-measured-foreground-activeDisabled: var(--salt-color-blue-500-fade-fill);
|
|
518
|
-
--salt-palette-measured-background: var(--salt-color-gray-60);
|
|
519
|
-
--salt-palette-measured-background-disabled: var(--salt-color-gray-60-fade-background);
|
|
520
|
-
--salt-palette-measured-border: var(--salt-color-gray-90);
|
|
521
|
-
--salt-palette-measured-border-disabled: var(--salt-color-gray-90-fade-border);
|
|
522
550
|
--salt-palette-navigate-primary-background: transparent;
|
|
523
551
|
--salt-palette-navigate-primary-background-active: transparent;
|
|
524
552
|
--salt-palette-navigate-primary-background-hover: var(--salt-color-gray-20);
|
|
@@ -535,6 +563,7 @@
|
|
|
535
563
|
--salt-palette-navigate-indicator-active: var(--salt-color-orange-600);
|
|
536
564
|
--salt-palette-navigate-indicator-activeDisabled: var(--salt-color-orange-600-fade-border);
|
|
537
565
|
--salt-palette-negative-foreground: var(--salt-color-red-700);
|
|
566
|
+
--salt-palette-negative-foreground-disabled: var(--salt-color-red-700-fade-foreground);
|
|
538
567
|
--salt-palette-neutral-primary-background: var(--salt-color-white);
|
|
539
568
|
--salt-palette-neutral-primary-background-disabled: var(--salt-color-white-fade-background);
|
|
540
569
|
--salt-palette-neutral-primary-background-readonly: var(--salt-color-white-fade-background-readonly);
|
|
@@ -559,11 +588,19 @@
|
|
|
559
588
|
--salt-palette-neutral-tertiary-border-disabled: transparent;
|
|
560
589
|
--salt-palette-neutral-tertiary-separator: var(--salt-color-black-fade-separatorOpacity-tertiary);
|
|
561
590
|
--salt-palette-positive-foreground: var(--salt-color-green-700);
|
|
591
|
+
--salt-palette-positive-foreground-disabled: var(--salt-color-green-700-fade-foreground);
|
|
592
|
+
--salt-palette-track-background: var(--salt-color-gray-60);
|
|
593
|
+
--salt-palette-track-background-disabled: var(--salt-color-gray-60-fade-background);
|
|
594
|
+
--salt-palette-track-border: var(--salt-color-gray-90);
|
|
595
|
+
--salt-palette-track-border-disabled: var(--salt-color-gray-90-fade-border);
|
|
562
596
|
}
|
|
563
597
|
.salt-theme[data-mode=dark] {
|
|
564
598
|
--salt-palette-accent-background: var(--salt-color-blue-500);
|
|
599
|
+
--salt-palette-accent-background-disabled: var(--salt-color-blue-500-fade-background);
|
|
565
600
|
--salt-palette-accent-border: var(--salt-color-blue-500);
|
|
601
|
+
--salt-palette-accent-border-disabled: var(--salt-color-blue-500-fade-border);
|
|
566
602
|
--salt-palette-accent-foreground: var(--salt-color-white);
|
|
603
|
+
--salt-palette-accent-foreground-disabled: var(--salt-color-white-fade-foreground);
|
|
567
604
|
--salt-palette-interact-background: transparent;
|
|
568
605
|
--salt-palette-interact-background-active: var(--salt-color-blue-700);
|
|
569
606
|
--salt-palette-interact-background-blurSelected: var(--salt-color-gray-600);
|
|
@@ -575,10 +612,11 @@
|
|
|
575
612
|
--salt-palette-interact-border-disabled: var(--salt-color-gray-90-fade-border);
|
|
576
613
|
--salt-palette-interact-border-hover: var(--salt-color-blue-500);
|
|
577
614
|
--salt-palette-interact-border-readonly: var(--salt-color-gray-90-fade-border-readonly);
|
|
578
|
-
--salt-palette-interact-foreground: var(--salt-color-
|
|
579
|
-
--salt-palette-interact-foreground-
|
|
580
|
-
--salt-palette-interact-foreground-
|
|
581
|
-
--salt-palette-interact-foreground-
|
|
615
|
+
--salt-palette-interact-foreground: var(--salt-color-gray-90);
|
|
616
|
+
--salt-palette-interact-foreground-active: var(--salt-color-blue-100);
|
|
617
|
+
--salt-palette-interact-foreground-activeDisabled: var(--salt-color-blue-100-fade-foreground);
|
|
618
|
+
--salt-palette-interact-foreground-disabled: var(--salt-color-gray-90-fade-foreground);
|
|
619
|
+
--salt-palette-interact-foreground-hover: var(--salt-color-blue-500);
|
|
582
620
|
--salt-palette-interact-outline: var(--salt-color-blue-100);
|
|
583
621
|
--salt-palette-interact-cta-background: var(--salt-color-blue-600);
|
|
584
622
|
--salt-palette-interact-cta-background-active: var(--salt-color-blue-700);
|
|
@@ -613,28 +651,25 @@
|
|
|
613
651
|
--salt-palette-error-background-emphasize: var(--salt-color-red-900);
|
|
614
652
|
--salt-palette-error-background-selected: var(--salt-color-red-900);
|
|
615
653
|
--salt-palette-error-border: var(--salt-color-red-500);
|
|
654
|
+
--salt-palette-error-border-disabled: var(--salt-color-red-500-fade-border);
|
|
616
655
|
--salt-palette-error-foreground: var(--salt-color-red-500);
|
|
656
|
+
--salt-palette-error-foreground-disabled: var(--salt-color-red-500-fade-foreground);
|
|
617
657
|
--salt-palette-info-background-emphasize: var(--salt-color-blue-900);
|
|
618
658
|
--salt-palette-info-border: var(--salt-color-blue-500);
|
|
659
|
+
--salt-palette-info-border-disabled: var(--salt-color-blue-500-fade-border);
|
|
619
660
|
--salt-palette-info-foreground: var(--salt-color-blue-500);
|
|
661
|
+
--salt-palette-info-foreground-disabled: var(--salt-color-blue-500-fade-foreground);
|
|
620
662
|
--salt-palette-success-background-emphasize: var(--salt-color-green-900);
|
|
621
663
|
--salt-palette-success-background-selected: var(--salt-color-green-900);
|
|
622
664
|
--salt-palette-success-border: var(--salt-color-green-400);
|
|
665
|
+
--salt-palette-success-border-disabled: var(--salt-color-green-400-fade-border);
|
|
623
666
|
--salt-palette-success-foreground: var(--salt-color-green-400);
|
|
667
|
+
--salt-palette-success-foreground-disabled: var(--salt-color-green-400-fade-foreground);
|
|
624
668
|
--salt-palette-warning-background-emphasize: var(--salt-color-orange-900);
|
|
625
669
|
--salt-palette-warning-background-selected: var(--salt-color-orange-900);
|
|
626
670
|
--salt-palette-warning-border: var(--salt-color-orange-500);
|
|
671
|
+
--salt-palette-warning-border-disabled: var(--salt-color-orange-500-fade-border);
|
|
627
672
|
--salt-palette-warning-foreground: var(--salt-color-orange-500);
|
|
628
|
-
--salt-palette-measured-fill: var(--salt-color-blue-300);
|
|
629
|
-
--salt-palette-measured-fill-disabled: var(--salt-color-blue-300-fade-fill);
|
|
630
|
-
--salt-palette-measured-foreground: var(--salt-color-gray-90);
|
|
631
|
-
--salt-palette-measured-foreground-active: var(--salt-color-blue-300);
|
|
632
|
-
--salt-palette-measured-foreground-disabled: var(--salt-color-gray-90-fade-foreground);
|
|
633
|
-
--salt-palette-measured-foreground-activeDisabled: var(--salt-color-blue-300-fade-fill);
|
|
634
|
-
--salt-palette-measured-background: var(--salt-color-gray-300);
|
|
635
|
-
--salt-palette-measured-background-disabled: var(--salt-color-gray-300-fade-background);
|
|
636
|
-
--salt-palette-measured-border: var(--salt-color-gray-90);
|
|
637
|
-
--salt-palette-measured-border-disabled: var(--salt-color-gray-90-fade-border);
|
|
638
673
|
--salt-palette-navigate-primary-background: transparent;
|
|
639
674
|
--salt-palette-navigate-primary-background-active: transparent;
|
|
640
675
|
--salt-palette-navigate-primary-background-hover: var(--salt-color-gray-700);
|
|
@@ -651,6 +686,7 @@
|
|
|
651
686
|
--salt-palette-navigate-indicator-active: var(--salt-color-orange-400);
|
|
652
687
|
--salt-palette-navigate-indicator-activeDisabled: var(--salt-color-orange-400-fade-border);
|
|
653
688
|
--salt-palette-negative-foreground: var(--salt-color-red-300);
|
|
689
|
+
--salt-palette-negative-foreground-disabled: var(--salt-color-red-300-fade-foreground);
|
|
654
690
|
--salt-palette-neutral-primary-background: var(--salt-color-gray-800);
|
|
655
691
|
--salt-palette-neutral-primary-background-disabled: var(--salt-color-gray-800-fade-background);
|
|
656
692
|
--salt-palette-neutral-primary-background-readonly: var(--salt-color-gray-800-fade-background-readonly);
|
|
@@ -675,6 +711,39 @@
|
|
|
675
711
|
--salt-palette-neutral-tertiary-border-disabled: transparent;
|
|
676
712
|
--salt-palette-neutral-tertiary-separator: var(--salt-color-white-fade-separatorOpacity-tertiary);
|
|
677
713
|
--salt-palette-positive-foreground: var(--salt-color-green-300);
|
|
714
|
+
--salt-palette-positive-foreground-disabled: var(--salt-color-green-300-fade-foreground);
|
|
715
|
+
--salt-palette-track-background: var(--salt-color-gray-300);
|
|
716
|
+
--salt-palette-track-background-disabled: var(--salt-color-gray-300-fade-background);
|
|
717
|
+
--salt-palette-track-border: var(--salt-color-gray-90);
|
|
718
|
+
--salt-palette-track-border-disabled: var(--salt-color-gray-90-fade-border);
|
|
719
|
+
}
|
|
720
|
+
.salt-theme[data-mode=light] {
|
|
721
|
+
--salt-palette-interact-foreground-partial: var(--salt-color-blue-600);
|
|
722
|
+
--salt-palette-interact-foreground-partialDisabled: var(--salt-color-blue-600-fade-foreground);
|
|
723
|
+
--salt-palette-measured-fill: var(--salt-color-blue-500);
|
|
724
|
+
--salt-palette-measured-fill-disabled: var(--salt-color-blue-500-fade-fill);
|
|
725
|
+
--salt-palette-measured-foreground: var(--salt-color-gray-90);
|
|
726
|
+
--salt-palette-measured-foreground-active: var(--salt-color-blue-500);
|
|
727
|
+
--salt-palette-measured-foreground-disabled: var(--salt-color-gray-90-fade-foreground);
|
|
728
|
+
--salt-palette-measured-foreground-activeDisabled: var(--salt-color-blue-500-fade-fill);
|
|
729
|
+
--salt-palette-measured-background: var(--salt-color-gray-60);
|
|
730
|
+
--salt-palette-measured-background-disabled: var(--salt-color-gray-60-fade-background);
|
|
731
|
+
--salt-palette-measured-border: var(--salt-color-gray-90);
|
|
732
|
+
--salt-palette-measured-border-disabled: var(--salt-color-gray-90-fade-border);
|
|
733
|
+
}
|
|
734
|
+
.salt-theme[data-mode=dark] {
|
|
735
|
+
--salt-palette-interact-foreground-partial: var(--salt-color-blue-100);
|
|
736
|
+
--salt-palette-interact-foreground-partialDisabled: var(--salt-color-blue-100-fade-foreground);
|
|
737
|
+
--salt-palette-measured-fill: var(--salt-color-blue-300);
|
|
738
|
+
--salt-palette-measured-fill-disabled: var(--salt-color-blue-300-fade-fill);
|
|
739
|
+
--salt-palette-measured-foreground: var(--salt-color-gray-90);
|
|
740
|
+
--salt-palette-measured-foreground-active: var(--salt-color-blue-300);
|
|
741
|
+
--salt-palette-measured-foreground-disabled: var(--salt-color-gray-90-fade-foreground);
|
|
742
|
+
--salt-palette-measured-foreground-activeDisabled: var(--salt-color-blue-300-fade-fill);
|
|
743
|
+
--salt-palette-measured-background: var(--salt-color-gray-300);
|
|
744
|
+
--salt-palette-measured-background-disabled: var(--salt-color-gray-300-fade-background);
|
|
745
|
+
--salt-palette-measured-border: var(--salt-color-gray-90);
|
|
746
|
+
--salt-palette-measured-border-disabled: var(--salt-color-gray-90-fade-border);
|
|
678
747
|
}
|
|
679
748
|
|
|
680
749
|
/* css/characteristics/accent.css */
|
|
@@ -696,8 +765,11 @@
|
|
|
696
765
|
}
|
|
697
766
|
.salt-theme {
|
|
698
767
|
--salt-accent-background: var(--salt-palette-accent-background);
|
|
768
|
+
--salt-accent-background-disabled: var(--salt-palette-accent-background-disabled);
|
|
699
769
|
--salt-accent-borderColor: var(--salt-palette-accent-border);
|
|
770
|
+
--salt-accent-borderColor-disabled: var(--salt-palette-accent-border-disabled);
|
|
700
771
|
--salt-accent-foreground: var(--salt-palette-accent-foreground);
|
|
772
|
+
--salt-accent-foreground-disabled: var(--salt-palette-accent-foreground-disabled);
|
|
701
773
|
--salt-accent-fontWeight: var(--salt-typography-fontWeight-semiBold);
|
|
702
774
|
}
|
|
703
775
|
|
|
@@ -915,43 +987,48 @@
|
|
|
915
987
|
--salt-selectable-borderColor-selected: var(--salt-palette-interact-border-active);
|
|
916
988
|
--salt-selectable-borderColor-selectedDisabled: var(--salt-palette-interact-border-activeDisabled);
|
|
917
989
|
--salt-selectable-borderColor-disabled: var(--salt-palette-interact-border-disabled);
|
|
918
|
-
--salt-selectable-foreground
|
|
919
|
-
--salt-selectable-foreground-
|
|
990
|
+
--salt-selectable-foreground: var(--salt-palette-interact-foreground);
|
|
991
|
+
--salt-selectable-foreground-disabled: var(--salt-palette-interact-foreground-disabled);
|
|
992
|
+
--salt-selectable-foreground-hover: var(--salt-palette-interact-foreground-hover);
|
|
993
|
+
--salt-selectable-foreground-selected: var(--salt-palette-interact-foreground-active);
|
|
994
|
+
--salt-selectable-foreground-selectedDisabled: var(--salt-palette-interact-foreground-activeDisabled);
|
|
920
995
|
--salt-selectable-background: var(--salt-palette-interact-background);
|
|
921
996
|
--salt-selectable-background-hover: var(--salt-palette-interact-background-hover);
|
|
922
997
|
--salt-selectable-background-selected: var(--salt-palette-interact-background-active);
|
|
923
998
|
--salt-selectable-background-blurSelected: var(--salt-palette-interact-background-blurSelected);
|
|
924
999
|
--salt-selectable-background-disabled: var(--salt-palette-interact-background-disabled);
|
|
925
|
-
--salt-selectable-cta-foreground: var(--salt-palette-interact-foreground);
|
|
926
1000
|
--salt-selectable-cta-foreground-hover: var(--salt-palette-interact-cta-foreground-hover);
|
|
927
1001
|
--salt-selectable-cta-foreground-selected: var(--salt-palette-interact-cta-foreground-active);
|
|
928
1002
|
--salt-selectable-cta-foreground-selectedDisabled: var(--salt-palette-interact-cta-foreground-activeDisabled);
|
|
929
|
-
--salt-selectable-cta-foreground-disabled: var(--salt-palette-interact-foreground-disabled);
|
|
930
1003
|
--salt-selectable-cta-background: var(--salt-palette-interact-background);
|
|
931
1004
|
--salt-selectable-cta-background-disabled: var(--salt-palette-interact-background-disabled);
|
|
932
1005
|
--salt-selectable-cta-background-hover: var(--salt-palette-interact-cta-background-hover);
|
|
933
1006
|
--salt-selectable-cta-background-selected: var(--salt-palette-interact-cta-background-active);
|
|
934
1007
|
--salt-selectable-cta-background-selectedDisabled: var(--salt-palette-interact-cta-background-activeDisabled);
|
|
935
|
-
--salt-selectable-primary-foreground: var(--salt-palette-interact-foreground);
|
|
1008
|
+
--salt-selectable-primary-foreground-hover: var(--salt-palette-interact-primary-foreground-hover);
|
|
936
1009
|
--salt-selectable-primary-foreground-selected: var(--salt-palette-interact-primary-foreground-active);
|
|
937
1010
|
--salt-selectable-primary-foreground-selectedDisabled: var(--salt-palette-interact-primary-foreground-activeDisabled);
|
|
938
|
-
--salt-selectable-primary-foreground-disabled: var(--salt-palette-interact-foreground-disabled);
|
|
939
|
-
--salt-selectable-primary-foreground-hover: var(--salt-palette-interact-primary-foreground-hover);
|
|
940
1011
|
--salt-selectable-primary-background: var(--salt-palette-interact-background);
|
|
941
1012
|
--salt-selectable-primary-background-disabled: var(--salt-palette-interact-background-disabled);
|
|
942
1013
|
--salt-selectable-primary-background-hover: var(--salt-palette-interact-primary-background-hover);
|
|
943
1014
|
--salt-selectable-primary-background-selected: var(--salt-palette-interact-primary-background-active);
|
|
944
1015
|
--salt-selectable-primary-background-selectedDisabled: var(--salt-palette-interact-primary-background-activeDisabled);
|
|
945
|
-
--salt-selectable-secondary-foreground: var(--salt-palette-interact-foreground);
|
|
1016
|
+
--salt-selectable-secondary-foreground-hover: var(--salt-palette-interact-secondary-foreground-hover);
|
|
946
1017
|
--salt-selectable-secondary-foreground-selected: var(--salt-palette-interact-secondary-foreground-active);
|
|
947
1018
|
--salt-selectable-secondary-foreground-selectedDisabled: var(--salt-palette-interact-secondary-foreground-activeDisabled);
|
|
948
|
-
--salt-selectable-secondary-foreground-disabled: var(--salt-palette-interact-foreground-disabled);
|
|
949
|
-
--salt-selectable-secondary-foreground-hover: var(--salt-palette-interact-secondary-foreground-hover);
|
|
950
1019
|
--salt-selectable-secondary-background: var(--salt-palette-interact-background);
|
|
951
1020
|
--salt-selectable-secondary-background-disabled: var(--salt-palette-interact-background-disabled);
|
|
952
1021
|
--salt-selectable-secondary-background-hover: var(--salt-palette-interact-secondary-background-hover);
|
|
953
1022
|
--salt-selectable-secondary-background-selected: var(--salt-palette-interact-secondary-background-active);
|
|
954
1023
|
--salt-selectable-secondary-background-selectedDisabled: var(--salt-palette-interact-secondary-background-activeDisabled);
|
|
1024
|
+
--salt-selectable-foreground-partial: var(--salt-palette-interact-foreground-partial);
|
|
1025
|
+
--salt-selectable-foreground-partialDisabled: var(--salt-palette-interact-foreground-partialDisabled);
|
|
1026
|
+
--salt-selectable-cta-foreground: var(--salt-palette-interact-foreground);
|
|
1027
|
+
--salt-selectable-cta-foreground-disabled: var(--salt-palette-interact-foreground-disabled);
|
|
1028
|
+
--salt-selectable-primary-foreground: var(--salt-palette-interact-foreground);
|
|
1029
|
+
--salt-selectable-primary-foreground-disabled: var(--salt-palette-interact-foreground-disabled);
|
|
1030
|
+
--salt-selectable-secondary-foreground: var(--salt-palette-interact-foreground);
|
|
1031
|
+
--salt-selectable-secondary-foreground-disabled: var(--salt-palette-interact-foreground-disabled);
|
|
955
1032
|
}
|
|
956
1033
|
|
|
957
1034
|
/* css/characteristics/separable.css */
|
|
@@ -971,10 +1048,21 @@
|
|
|
971
1048
|
--salt-status-static-foreground: var(--salt-palette-neutral-secondary-foreground);
|
|
972
1049
|
--salt-status-negative-foreground: var(--salt-palette-negative-foreground);
|
|
973
1050
|
--salt-status-positive-foreground: var(--salt-palette-positive-foreground);
|
|
1051
|
+
--salt-status-info-foreground-disabled: var(--salt-palette-info-foreground-disabled);
|
|
1052
|
+
--salt-status-success-foreground-disabled: var(--salt-palette-success-foreground-disabled);
|
|
1053
|
+
--salt-status-warning-foreground-disabled: var(--salt-palette-warning-foreground-disabled);
|
|
1054
|
+
--salt-status-error-foreground-disabled: var(--salt-palette-error-foreground-disabled);
|
|
1055
|
+
--salt-status-static-foreground-disabled: var(--salt-palette-neutral-secondary-foreground-disabled);
|
|
1056
|
+
--salt-status-negative-foreground-disabled: var(--salt-palette-negative-foreground-disabled);
|
|
1057
|
+
--salt-status-positive-foreground-disabled: var(--salt-palette-positive-foreground-disabled);
|
|
974
1058
|
--salt-status-info-borderColor: var(--salt-palette-info-border);
|
|
975
1059
|
--salt-status-success-borderColor: var(--salt-palette-success-border);
|
|
976
1060
|
--salt-status-warning-borderColor: var(--salt-palette-warning-border);
|
|
977
1061
|
--salt-status-error-borderColor: var(--salt-palette-error-border);
|
|
1062
|
+
--salt-status-info-borderColor-disabled: var(--salt-palette-info-border-disabled);
|
|
1063
|
+
--salt-status-success-borderColor-disabled: var(--salt-palette-success-border-disabled);
|
|
1064
|
+
--salt-status-warning-borderColor-disabled: var(--salt-palette-warning-border-disabled);
|
|
1065
|
+
--salt-status-error-borderColor-disabled: var(--salt-palette-error-border-disabled);
|
|
978
1066
|
--salt-status-info-background-emphasize: var(--salt-palette-info-background-emphasize);
|
|
979
1067
|
--salt-status-success-background-emphasize: var(--salt-palette-success-background-emphasize);
|
|
980
1068
|
--salt-status-warning-background-emphasize: var(--salt-palette-warning-background-emphasize);
|
|
@@ -1010,27 +1098,35 @@
|
|
|
1010
1098
|
--salt-text-fontWeight: var(--salt-typography-fontWeight-regular);
|
|
1011
1099
|
--salt-text-fontWeight-small: var(--salt-typography-fontWeight-light);
|
|
1012
1100
|
--salt-text-fontWeight-strong: var(--salt-typography-fontWeight-semiBold);
|
|
1101
|
+
--salt-text-h1-fontFamily: var(--salt-typography-fontFamily);
|
|
1013
1102
|
--salt-text-h1-fontWeight: var(--salt-typography-fontWeight-bold);
|
|
1014
1103
|
--salt-text-h1-fontWeight-small: var(--salt-typography-fontWeight-medium);
|
|
1015
1104
|
--salt-text-h1-fontWeight-strong: var(--salt-typography-fontWeight-extraBold);
|
|
1105
|
+
--salt-text-h2-fontFamily: var(--salt-typography-fontFamily);
|
|
1016
1106
|
--salt-text-h2-fontWeight: var(--salt-typography-fontWeight-semiBold);
|
|
1017
1107
|
--salt-text-h2-fontWeight-small: var(--salt-typography-fontWeight-regular);
|
|
1018
1108
|
--salt-text-h2-fontWeight-strong: var(--salt-typography-fontWeight-bold);
|
|
1109
|
+
--salt-text-h3-fontFamily: var(--salt-typography-fontFamily);
|
|
1019
1110
|
--salt-text-h3-fontWeight: var(--salt-typography-fontWeight-semiBold);
|
|
1020
1111
|
--salt-text-h3-fontWeight-small: var(--salt-typography-fontWeight-regular);
|
|
1021
1112
|
--salt-text-h3-fontWeight-strong: var(--salt-typography-fontWeight-bold);
|
|
1113
|
+
--salt-text-h4-fontFamily: var(--salt-typography-fontFamily);
|
|
1022
1114
|
--salt-text-h4-fontWeight: var(--salt-typography-fontWeight-semiBold);
|
|
1023
1115
|
--salt-text-h4-fontWeight-small: var(--salt-typography-fontWeight-regular);
|
|
1024
1116
|
--salt-text-h4-fontWeight-strong: var(--salt-typography-fontWeight-bold);
|
|
1117
|
+
--salt-text-label-fontFamily: var(--salt-typography-fontFamily);
|
|
1025
1118
|
--salt-text-label-fontWeight: var(--salt-typography-fontWeight-regular);
|
|
1026
1119
|
--salt-text-label-fontWeight-small: var(--salt-typography-fontWeight-light);
|
|
1027
1120
|
--salt-text-label-fontWeight-strong: var(--salt-typography-fontWeight-semiBold);
|
|
1121
|
+
--salt-text-display1-fontFamily: var(--salt-typography-fontFamily);
|
|
1028
1122
|
--salt-text-display1-fontWeight: var(--salt-typography-fontWeight-semiBold);
|
|
1029
1123
|
--salt-text-display1-fontWeight-strong: var(--salt-typography-fontWeight-bold);
|
|
1030
1124
|
--salt-text-display1-fontWeight-small: var(--salt-typography-fontWeight-regular);
|
|
1125
|
+
--salt-text-display2-fontFamily: var(--salt-typography-fontFamily);
|
|
1031
1126
|
--salt-text-display2-fontWeight: var(--salt-typography-fontWeight-semiBold);
|
|
1032
1127
|
--salt-text-display2-fontWeight-strong: var(--salt-typography-fontWeight-bold);
|
|
1033
1128
|
--salt-text-display2-fontWeight-small: var(--salt-typography-fontWeight-regular);
|
|
1129
|
+
--salt-text-display3-fontFamily: var(--salt-typography-fontFamily);
|
|
1034
1130
|
--salt-text-display3-fontWeight: var(--salt-typography-fontWeight-semiBold);
|
|
1035
1131
|
--salt-text-display3-fontWeight-strong: var(--salt-typography-fontWeight-bold);
|
|
1036
1132
|
--salt-text-display3-fontWeight-small: var(--salt-typography-fontWeight-regular);
|
|
@@ -1132,4 +1228,22 @@
|
|
|
1132
1228
|
--salt-text-display3-lineHeight: 24px;
|
|
1133
1229
|
}
|
|
1134
1230
|
|
|
1231
|
+
/* css/characteristics/track.css */
|
|
1232
|
+
.salt-theme {
|
|
1233
|
+
--salt-track-borderStyle: solid;
|
|
1234
|
+
--salt-track-borderStyle-active: solid;
|
|
1235
|
+
--salt-track-borderStyle-complete: solid;
|
|
1236
|
+
--salt-track-borderStyle-incomplete: dotted;
|
|
1237
|
+
--salt-track-borderWidth: 2px;
|
|
1238
|
+
--salt-track-borderWidth-active: 2px;
|
|
1239
|
+
--salt-track-borderWidth-complete: 2px;
|
|
1240
|
+
--salt-track-borderWidth-incomplete: 2px;
|
|
1241
|
+
--salt-track-fontWeight: var(--salt-typography-fontWeight-semiBold);
|
|
1242
|
+
--salt-track-textAlign: center;
|
|
1243
|
+
--salt-track-background: var(--salt-palette-track-background);
|
|
1244
|
+
--salt-track-background-disabled: var(--salt-palette-track-background-disabled);
|
|
1245
|
+
--salt-track-borderColor: var(--salt-palette-track-border);
|
|
1246
|
+
--salt-track-borderColor-disabled: var(--salt-palette-track-border-disabled);
|
|
1247
|
+
}
|
|
1248
|
+
|
|
1135
1249
|
/* css/theme.css */
|
package/index.css
CHANGED
|
@@ -282,23 +282,48 @@
|
|
|
282
282
|
--salt-delay-cutoff: 10000;
|
|
283
283
|
}
|
|
284
284
|
|
|
285
|
+
/* css/foundations/duration.css */
|
|
286
|
+
.salt-theme {
|
|
287
|
+
--salt-duration-instant: 100;
|
|
288
|
+
--salt-duration-perceptible: 300;
|
|
289
|
+
--salt-duration-notable: 1000;
|
|
290
|
+
--salt-duration-cutoff: 10000;
|
|
291
|
+
}
|
|
292
|
+
|
|
285
293
|
/* css/foundations/fade.css */
|
|
286
294
|
.salt-theme {
|
|
287
295
|
--salt-color-blue-100-fade-foreground: rgba(100, 177, 228, var(--salt-palette-opacity-foreground));
|
|
296
|
+
--salt-color-blue-500-fade-foreground: rgba(38, 112, 169, var(--salt-palette-opacity-foreground));
|
|
288
297
|
--salt-color-blue-600-fade-foreground: rgba(21, 92, 147, var(--salt-palette-opacity-foreground));
|
|
289
|
-
--salt-color-gray-70-fade-foreground: rgba(180, 183, 190, var(--salt-palette-opacity-foreground));
|
|
290
298
|
--salt-color-gray-200-fade-foreground: rgba(97, 101, 110, var(--salt-palette-opacity-foreground));
|
|
299
|
+
--salt-color-gray-70-fade-foreground: rgba(180, 183, 190, var(--salt-palette-opacity-foreground));
|
|
291
300
|
--salt-color-gray-90-fade-foreground: rgba(132, 135, 142, var(--salt-palette-opacity-foreground));
|
|
292
301
|
--salt-color-gray-900-fade-foreground: rgba(22, 22, 22, var(--salt-palette-opacity-foreground));
|
|
302
|
+
--salt-color-green-300-fade-foreground: rgba(60, 171, 96, var(--salt-palette-opacity-foreground));
|
|
303
|
+
--salt-color-green-400-fade-foreground: rgba(48, 156, 90, var(--salt-palette-opacity-foreground));
|
|
304
|
+
--salt-color-green-500-fade-foreground: rgba(36, 135, 75, var(--salt-palette-opacity-foreground));
|
|
305
|
+
--salt-color-green-700-fade-foreground: rgba(12, 93, 46, var(--salt-palette-opacity-foreground));
|
|
306
|
+
--salt-color-orange-500-fade-foreground: rgba(234, 115, 25, var(--salt-palette-opacity-foreground));
|
|
307
|
+
--salt-color-orange-700-fade-foreground: rgba(214, 85, 19, var(--salt-palette-opacity-foreground));
|
|
308
|
+
--salt-color-red-300-fade-foreground: rgba(255, 89, 66, var(--salt-palette-opacity-foreground));
|
|
309
|
+
--salt-color-red-500-fade-foreground: rgba(227, 43, 22, var(--salt-palette-opacity-foreground));
|
|
310
|
+
--salt-color-red-700-fade-foreground: rgba(166, 21, 11, var(--salt-palette-opacity-foreground));
|
|
293
311
|
--salt-color-white-fade-foreground: rgba(255, 255, 255, var(--salt-palette-opacity-foreground));
|
|
312
|
+
--salt-color-blue-500-fade-border: rgba(38, 112, 169, var(--salt-palette-opacity-border));
|
|
294
313
|
--salt-color-gray-60-fade-border: rgba(197, 201, 208, var(--salt-palette-opacity-border));
|
|
295
314
|
--salt-color-gray-90-fade-border: rgba(132, 135, 142, var(--salt-palette-opacity-border));
|
|
296
315
|
--salt-color-gray-200-fade-border: rgba(97, 101, 110, var(--salt-palette-opacity-border));
|
|
297
316
|
--salt-color-gray-300-fade-border: rgba(76, 80, 91, var(--salt-palette-opacity-border));
|
|
317
|
+
--salt-color-green-400-fade-border: rgba(48, 156, 90, var(--salt-palette-opacity-border));
|
|
318
|
+
--salt-color-green-500-fade-border: rgba(36, 135, 75, var(--salt-palette-opacity-border));
|
|
298
319
|
--salt-color-orange-400-fade-border: rgba(238, 133, 43, var(--salt-palette-opacity-border));
|
|
320
|
+
--salt-color-orange-500-fade-border: rgba(234, 115, 25, var(--salt-palette-opacity-border));
|
|
299
321
|
--salt-color-orange-600-fade-border: rgba(224, 101, 25, var(--salt-palette-opacity-border));
|
|
322
|
+
--salt-color-orange-700-fade-border: rgba(214, 85, 19, var(--salt-palette-opacity-border));
|
|
323
|
+
--salt-color-red-500-fade-border: rgba(227, 43, 22, var(--salt-palette-opacity-border));
|
|
300
324
|
--salt-color-gray-90-fade-border-readonly: rgba(132, 135, 142, var(--salt-palette-opacity-border-readonly));
|
|
301
325
|
--salt-color-gray-200-fade-border-readonly: rgba(97, 101, 110, var(--salt-palette-opacity-border-readonly));
|
|
326
|
+
--salt-color-blue-500-fade-background: rgba(38, 112, 169, var(--salt-palette-opacity-background));
|
|
302
327
|
--salt-color-blue-600-fade-background: rgba(21, 92, 147, var(--salt-palette-opacity-background));
|
|
303
328
|
--salt-color-blue-700-fade-background: rgba(0, 71, 123, var(--salt-palette-opacity-background));
|
|
304
329
|
--salt-color-gray-20-fade-background: rgba(234, 237, 239, var(--salt-palette-opacity-background));
|
|
@@ -380,12 +405,14 @@
|
|
|
380
405
|
.salt-density-medium,
|
|
381
406
|
.salt-density-high {
|
|
382
407
|
--salt-size-basis-unit: 4px;
|
|
408
|
+
--salt-size-adornmentGap: calc(0.75 * var(--salt-size-unit));
|
|
383
409
|
--salt-size-border: 1px;
|
|
384
|
-
--salt-size-
|
|
385
|
-
--salt-size-sharktooth-width: 10px;
|
|
410
|
+
--salt-size-container-spacing: calc(3 * var(--salt-size-unit));
|
|
386
411
|
--salt-size-separator-strokeWidth: 1px;
|
|
387
|
-
--salt-size-separator-height: calc(var(--salt-size-compact) + 1.5 * var(--salt-size-basis-unit));
|
|
388
412
|
--salt-size-selectable: calc(var(--salt-size-base) - (1.5 * var(--salt-size-unit)) - (0.5 * var(--salt-size-basis-unit)));
|
|
413
|
+
--salt-size-separator-height: calc(var(--salt-size-compact) + 1.5 * var(--salt-size-basis-unit));
|
|
414
|
+
--salt-size-sharktooth-height: 5px;
|
|
415
|
+
--salt-size-sharktooth-width: 10px;
|
|
389
416
|
--salt-size-stackable: calc(var(--salt-size-base) + var(--salt-size-unit));
|
|
390
417
|
--salt-size-selection: var(--salt-size-selectable);
|
|
391
418
|
--salt-size-brandBar: 4px;
|
|
@@ -469,8 +496,11 @@
|
|
|
469
496
|
}
|
|
470
497
|
.salt-theme[data-mode=light] {
|
|
471
498
|
--salt-palette-accent-background: var(--salt-color-blue-500);
|
|
499
|
+
--salt-palette-accent-background-disabled: var(--salt-color-blue-500-fade-background);
|
|
472
500
|
--salt-palette-accent-border: var(--salt-color-blue-500);
|
|
501
|
+
--salt-palette-accent-border-disabled: var(--salt-color-blue-500-fade-border);
|
|
473
502
|
--salt-palette-accent-foreground: var(--salt-color-white);
|
|
503
|
+
--salt-palette-accent-foreground-disabled: var(--salt-color-white-fade-foreground);
|
|
474
504
|
--salt-palette-interact-background: transparent;
|
|
475
505
|
--salt-palette-interact-background-blurSelected: var(--salt-color-gray-30);
|
|
476
506
|
--salt-palette-interact-background-hover: var(--salt-color-blue-10);
|
|
@@ -482,10 +512,11 @@
|
|
|
482
512
|
--salt-palette-interact-border-disabled: var(--salt-color-gray-200-fade-border);
|
|
483
513
|
--salt-palette-interact-border-hover: var(--salt-color-blue-500);
|
|
484
514
|
--salt-palette-interact-border-readonly: var(--salt-color-gray-200-fade-border-readonly);
|
|
485
|
-
--salt-palette-interact-foreground: var(--salt-color-gray-
|
|
486
|
-
--salt-palette-interact-foreground-
|
|
487
|
-
--salt-palette-interact-foreground-
|
|
488
|
-
--salt-palette-interact-foreground-
|
|
515
|
+
--salt-palette-interact-foreground: var(--salt-color-gray-200);
|
|
516
|
+
--salt-palette-interact-foreground-active: var(--salt-color-blue-600);
|
|
517
|
+
--salt-palette-interact-foreground-activeDisabled: var(--salt-color-blue-600-fade-foreground);
|
|
518
|
+
--salt-palette-interact-foreground-disabled: var(--salt-color-gray-200-fade-foreground);
|
|
519
|
+
--salt-palette-interact-foreground-hover: var(--salt-color-blue-500);
|
|
489
520
|
--salt-palette-interact-outline: var(--salt-color-blue-600);
|
|
490
521
|
--salt-palette-interact-cta-background: var(--salt-color-blue-600);
|
|
491
522
|
--salt-palette-interact-cta-background-active: var(--salt-color-blue-700);
|
|
@@ -520,28 +551,25 @@
|
|
|
520
551
|
--salt-palette-error-background-emphasize: var(--salt-color-red-10);
|
|
521
552
|
--salt-palette-error-background-selected: var(--salt-color-red-20);
|
|
522
553
|
--salt-palette-error-border: var(--salt-color-red-500);
|
|
554
|
+
--salt-palette-error-border-disabled: var(--salt-color-red-500-fade-border);
|
|
523
555
|
--salt-palette-error-foreground: var(--salt-color-red-500);
|
|
556
|
+
--salt-palette-error-foreground-disabled: var(--salt-color-red-500-fade-foreground);
|
|
524
557
|
--salt-palette-info-background-emphasize: var(--salt-color-blue-10);
|
|
525
558
|
--salt-palette-info-border: var(--salt-color-blue-500);
|
|
559
|
+
--salt-palette-info-border-disabled: var(--salt-color-blue-500-fade-border);
|
|
526
560
|
--salt-palette-info-foreground: var(--salt-color-blue-500);
|
|
561
|
+
--salt-palette-info-foreground-disabled: var(--salt-color-blue-500-fade-foreground);
|
|
527
562
|
--salt-palette-success-background-emphasize: var(--salt-color-green-10);
|
|
528
563
|
--salt-palette-success-background-selected: var(--salt-color-green-20);
|
|
529
564
|
--salt-palette-success-border: var(--salt-color-green-500);
|
|
565
|
+
--salt-palette-success-border-disabled: var(--salt-color-green-500-fade-border);
|
|
530
566
|
--salt-palette-success-foreground: var(--salt-color-green-500);
|
|
567
|
+
--salt-palette-success-foreground-disabled: var(--salt-color-green-500-fade-foreground);
|
|
531
568
|
--salt-palette-warning-background-emphasize: var(--salt-color-orange-10);
|
|
532
569
|
--salt-palette-warning-background-selected: var(--salt-color-orange-20);
|
|
533
570
|
--salt-palette-warning-border: var(--salt-color-orange-700);
|
|
571
|
+
--salt-palette-warning-border-disabled: var(--salt-color-orange-700-fade-border);
|
|
534
572
|
--salt-palette-warning-foreground: var(--salt-color-orange-700);
|
|
535
|
-
--salt-palette-measured-fill: var(--salt-color-blue-500);
|
|
536
|
-
--salt-palette-measured-fill-disabled: var(--salt-color-blue-500-fade-fill);
|
|
537
|
-
--salt-palette-measured-foreground: var(--salt-color-gray-90);
|
|
538
|
-
--salt-palette-measured-foreground-active: var(--salt-color-blue-500);
|
|
539
|
-
--salt-palette-measured-foreground-disabled: var(--salt-color-gray-90-fade-foreground);
|
|
540
|
-
--salt-palette-measured-foreground-activeDisabled: var(--salt-color-blue-500-fade-fill);
|
|
541
|
-
--salt-palette-measured-background: var(--salt-color-gray-60);
|
|
542
|
-
--salt-palette-measured-background-disabled: var(--salt-color-gray-60-fade-background);
|
|
543
|
-
--salt-palette-measured-border: var(--salt-color-gray-90);
|
|
544
|
-
--salt-palette-measured-border-disabled: var(--salt-color-gray-90-fade-border);
|
|
545
573
|
--salt-palette-navigate-primary-background: transparent;
|
|
546
574
|
--salt-palette-navigate-primary-background-active: transparent;
|
|
547
575
|
--salt-palette-navigate-primary-background-hover: var(--salt-color-gray-20);
|
|
@@ -558,6 +586,7 @@
|
|
|
558
586
|
--salt-palette-navigate-indicator-active: var(--salt-color-orange-600);
|
|
559
587
|
--salt-palette-navigate-indicator-activeDisabled: var(--salt-color-orange-600-fade-border);
|
|
560
588
|
--salt-palette-negative-foreground: var(--salt-color-red-700);
|
|
589
|
+
--salt-palette-negative-foreground-disabled: var(--salt-color-red-700-fade-foreground);
|
|
561
590
|
--salt-palette-neutral-primary-background: var(--salt-color-white);
|
|
562
591
|
--salt-palette-neutral-primary-background-disabled: var(--salt-color-white-fade-background);
|
|
563
592
|
--salt-palette-neutral-primary-background-readonly: var(--salt-color-white-fade-background-readonly);
|
|
@@ -582,11 +611,19 @@
|
|
|
582
611
|
--salt-palette-neutral-tertiary-border-disabled: transparent;
|
|
583
612
|
--salt-palette-neutral-tertiary-separator: var(--salt-color-black-fade-separatorOpacity-tertiary);
|
|
584
613
|
--salt-palette-positive-foreground: var(--salt-color-green-700);
|
|
614
|
+
--salt-palette-positive-foreground-disabled: var(--salt-color-green-700-fade-foreground);
|
|
615
|
+
--salt-palette-track-background: var(--salt-color-gray-60);
|
|
616
|
+
--salt-palette-track-background-disabled: var(--salt-color-gray-60-fade-background);
|
|
617
|
+
--salt-palette-track-border: var(--salt-color-gray-90);
|
|
618
|
+
--salt-palette-track-border-disabled: var(--salt-color-gray-90-fade-border);
|
|
585
619
|
}
|
|
586
620
|
.salt-theme[data-mode=dark] {
|
|
587
621
|
--salt-palette-accent-background: var(--salt-color-blue-500);
|
|
622
|
+
--salt-palette-accent-background-disabled: var(--salt-color-blue-500-fade-background);
|
|
588
623
|
--salt-palette-accent-border: var(--salt-color-blue-500);
|
|
624
|
+
--salt-palette-accent-border-disabled: var(--salt-color-blue-500-fade-border);
|
|
589
625
|
--salt-palette-accent-foreground: var(--salt-color-white);
|
|
626
|
+
--salt-palette-accent-foreground-disabled: var(--salt-color-white-fade-foreground);
|
|
590
627
|
--salt-palette-interact-background: transparent;
|
|
591
628
|
--salt-palette-interact-background-active: var(--salt-color-blue-700);
|
|
592
629
|
--salt-palette-interact-background-blurSelected: var(--salt-color-gray-600);
|
|
@@ -598,10 +635,11 @@
|
|
|
598
635
|
--salt-palette-interact-border-disabled: var(--salt-color-gray-90-fade-border);
|
|
599
636
|
--salt-palette-interact-border-hover: var(--salt-color-blue-500);
|
|
600
637
|
--salt-palette-interact-border-readonly: var(--salt-color-gray-90-fade-border-readonly);
|
|
601
|
-
--salt-palette-interact-foreground: var(--salt-color-
|
|
602
|
-
--salt-palette-interact-foreground-
|
|
603
|
-
--salt-palette-interact-foreground-
|
|
604
|
-
--salt-palette-interact-foreground-
|
|
638
|
+
--salt-palette-interact-foreground: var(--salt-color-gray-90);
|
|
639
|
+
--salt-palette-interact-foreground-active: var(--salt-color-blue-100);
|
|
640
|
+
--salt-palette-interact-foreground-activeDisabled: var(--salt-color-blue-100-fade-foreground);
|
|
641
|
+
--salt-palette-interact-foreground-disabled: var(--salt-color-gray-90-fade-foreground);
|
|
642
|
+
--salt-palette-interact-foreground-hover: var(--salt-color-blue-500);
|
|
605
643
|
--salt-palette-interact-outline: var(--salt-color-blue-100);
|
|
606
644
|
--salt-palette-interact-cta-background: var(--salt-color-blue-600);
|
|
607
645
|
--salt-palette-interact-cta-background-active: var(--salt-color-blue-700);
|
|
@@ -636,28 +674,25 @@
|
|
|
636
674
|
--salt-palette-error-background-emphasize: var(--salt-color-red-900);
|
|
637
675
|
--salt-palette-error-background-selected: var(--salt-color-red-900);
|
|
638
676
|
--salt-palette-error-border: var(--salt-color-red-500);
|
|
677
|
+
--salt-palette-error-border-disabled: var(--salt-color-red-500-fade-border);
|
|
639
678
|
--salt-palette-error-foreground: var(--salt-color-red-500);
|
|
679
|
+
--salt-palette-error-foreground-disabled: var(--salt-color-red-500-fade-foreground);
|
|
640
680
|
--salt-palette-info-background-emphasize: var(--salt-color-blue-900);
|
|
641
681
|
--salt-palette-info-border: var(--salt-color-blue-500);
|
|
682
|
+
--salt-palette-info-border-disabled: var(--salt-color-blue-500-fade-border);
|
|
642
683
|
--salt-palette-info-foreground: var(--salt-color-blue-500);
|
|
684
|
+
--salt-palette-info-foreground-disabled: var(--salt-color-blue-500-fade-foreground);
|
|
643
685
|
--salt-palette-success-background-emphasize: var(--salt-color-green-900);
|
|
644
686
|
--salt-palette-success-background-selected: var(--salt-color-green-900);
|
|
645
687
|
--salt-palette-success-border: var(--salt-color-green-400);
|
|
688
|
+
--salt-palette-success-border-disabled: var(--salt-color-green-400-fade-border);
|
|
646
689
|
--salt-palette-success-foreground: var(--salt-color-green-400);
|
|
690
|
+
--salt-palette-success-foreground-disabled: var(--salt-color-green-400-fade-foreground);
|
|
647
691
|
--salt-palette-warning-background-emphasize: var(--salt-color-orange-900);
|
|
648
692
|
--salt-palette-warning-background-selected: var(--salt-color-orange-900);
|
|
649
693
|
--salt-palette-warning-border: var(--salt-color-orange-500);
|
|
694
|
+
--salt-palette-warning-border-disabled: var(--salt-color-orange-500-fade-border);
|
|
650
695
|
--salt-palette-warning-foreground: var(--salt-color-orange-500);
|
|
651
|
-
--salt-palette-measured-fill: var(--salt-color-blue-300);
|
|
652
|
-
--salt-palette-measured-fill-disabled: var(--salt-color-blue-300-fade-fill);
|
|
653
|
-
--salt-palette-measured-foreground: var(--salt-color-gray-90);
|
|
654
|
-
--salt-palette-measured-foreground-active: var(--salt-color-blue-300);
|
|
655
|
-
--salt-palette-measured-foreground-disabled: var(--salt-color-gray-90-fade-foreground);
|
|
656
|
-
--salt-palette-measured-foreground-activeDisabled: var(--salt-color-blue-300-fade-fill);
|
|
657
|
-
--salt-palette-measured-background: var(--salt-color-gray-300);
|
|
658
|
-
--salt-palette-measured-background-disabled: var(--salt-color-gray-300-fade-background);
|
|
659
|
-
--salt-palette-measured-border: var(--salt-color-gray-90);
|
|
660
|
-
--salt-palette-measured-border-disabled: var(--salt-color-gray-90-fade-border);
|
|
661
696
|
--salt-palette-navigate-primary-background: transparent;
|
|
662
697
|
--salt-palette-navigate-primary-background-active: transparent;
|
|
663
698
|
--salt-palette-navigate-primary-background-hover: var(--salt-color-gray-700);
|
|
@@ -674,6 +709,7 @@
|
|
|
674
709
|
--salt-palette-navigate-indicator-active: var(--salt-color-orange-400);
|
|
675
710
|
--salt-palette-navigate-indicator-activeDisabled: var(--salt-color-orange-400-fade-border);
|
|
676
711
|
--salt-palette-negative-foreground: var(--salt-color-red-300);
|
|
712
|
+
--salt-palette-negative-foreground-disabled: var(--salt-color-red-300-fade-foreground);
|
|
677
713
|
--salt-palette-neutral-primary-background: var(--salt-color-gray-800);
|
|
678
714
|
--salt-palette-neutral-primary-background-disabled: var(--salt-color-gray-800-fade-background);
|
|
679
715
|
--salt-palette-neutral-primary-background-readonly: var(--salt-color-gray-800-fade-background-readonly);
|
|
@@ -698,6 +734,39 @@
|
|
|
698
734
|
--salt-palette-neutral-tertiary-border-disabled: transparent;
|
|
699
735
|
--salt-palette-neutral-tertiary-separator: var(--salt-color-white-fade-separatorOpacity-tertiary);
|
|
700
736
|
--salt-palette-positive-foreground: var(--salt-color-green-300);
|
|
737
|
+
--salt-palette-positive-foreground-disabled: var(--salt-color-green-300-fade-foreground);
|
|
738
|
+
--salt-palette-track-background: var(--salt-color-gray-300);
|
|
739
|
+
--salt-palette-track-background-disabled: var(--salt-color-gray-300-fade-background);
|
|
740
|
+
--salt-palette-track-border: var(--salt-color-gray-90);
|
|
741
|
+
--salt-palette-track-border-disabled: var(--salt-color-gray-90-fade-border);
|
|
742
|
+
}
|
|
743
|
+
.salt-theme[data-mode=light] {
|
|
744
|
+
--salt-palette-interact-foreground-partial: var(--salt-color-blue-600);
|
|
745
|
+
--salt-palette-interact-foreground-partialDisabled: var(--salt-color-blue-600-fade-foreground);
|
|
746
|
+
--salt-palette-measured-fill: var(--salt-color-blue-500);
|
|
747
|
+
--salt-palette-measured-fill-disabled: var(--salt-color-blue-500-fade-fill);
|
|
748
|
+
--salt-palette-measured-foreground: var(--salt-color-gray-90);
|
|
749
|
+
--salt-palette-measured-foreground-active: var(--salt-color-blue-500);
|
|
750
|
+
--salt-palette-measured-foreground-disabled: var(--salt-color-gray-90-fade-foreground);
|
|
751
|
+
--salt-palette-measured-foreground-activeDisabled: var(--salt-color-blue-500-fade-fill);
|
|
752
|
+
--salt-palette-measured-background: var(--salt-color-gray-60);
|
|
753
|
+
--salt-palette-measured-background-disabled: var(--salt-color-gray-60-fade-background);
|
|
754
|
+
--salt-palette-measured-border: var(--salt-color-gray-90);
|
|
755
|
+
--salt-palette-measured-border-disabled: var(--salt-color-gray-90-fade-border);
|
|
756
|
+
}
|
|
757
|
+
.salt-theme[data-mode=dark] {
|
|
758
|
+
--salt-palette-interact-foreground-partial: var(--salt-color-blue-100);
|
|
759
|
+
--salt-palette-interact-foreground-partialDisabled: var(--salt-color-blue-100-fade-foreground);
|
|
760
|
+
--salt-palette-measured-fill: var(--salt-color-blue-300);
|
|
761
|
+
--salt-palette-measured-fill-disabled: var(--salt-color-blue-300-fade-fill);
|
|
762
|
+
--salt-palette-measured-foreground: var(--salt-color-gray-90);
|
|
763
|
+
--salt-palette-measured-foreground-active: var(--salt-color-blue-300);
|
|
764
|
+
--salt-palette-measured-foreground-disabled: var(--salt-color-gray-90-fade-foreground);
|
|
765
|
+
--salt-palette-measured-foreground-activeDisabled: var(--salt-color-blue-300-fade-fill);
|
|
766
|
+
--salt-palette-measured-background: var(--salt-color-gray-300);
|
|
767
|
+
--salt-palette-measured-background-disabled: var(--salt-color-gray-300-fade-background);
|
|
768
|
+
--salt-palette-measured-border: var(--salt-color-gray-90);
|
|
769
|
+
--salt-palette-measured-border-disabled: var(--salt-color-gray-90-fade-border);
|
|
701
770
|
}
|
|
702
771
|
|
|
703
772
|
/* css/characteristics/accent.css */
|
|
@@ -719,8 +788,11 @@
|
|
|
719
788
|
}
|
|
720
789
|
.salt-theme {
|
|
721
790
|
--salt-accent-background: var(--salt-palette-accent-background);
|
|
791
|
+
--salt-accent-background-disabled: var(--salt-palette-accent-background-disabled);
|
|
722
792
|
--salt-accent-borderColor: var(--salt-palette-accent-border);
|
|
793
|
+
--salt-accent-borderColor-disabled: var(--salt-palette-accent-border-disabled);
|
|
723
794
|
--salt-accent-foreground: var(--salt-palette-accent-foreground);
|
|
795
|
+
--salt-accent-foreground-disabled: var(--salt-palette-accent-foreground-disabled);
|
|
724
796
|
--salt-accent-fontWeight: var(--salt-typography-fontWeight-semiBold);
|
|
725
797
|
}
|
|
726
798
|
|
|
@@ -938,43 +1010,48 @@
|
|
|
938
1010
|
--salt-selectable-borderColor-selected: var(--salt-palette-interact-border-active);
|
|
939
1011
|
--salt-selectable-borderColor-selectedDisabled: var(--salt-palette-interact-border-activeDisabled);
|
|
940
1012
|
--salt-selectable-borderColor-disabled: var(--salt-palette-interact-border-disabled);
|
|
941
|
-
--salt-selectable-foreground
|
|
942
|
-
--salt-selectable-foreground-
|
|
1013
|
+
--salt-selectable-foreground: var(--salt-palette-interact-foreground);
|
|
1014
|
+
--salt-selectable-foreground-disabled: var(--salt-palette-interact-foreground-disabled);
|
|
1015
|
+
--salt-selectable-foreground-hover: var(--salt-palette-interact-foreground-hover);
|
|
1016
|
+
--salt-selectable-foreground-selected: var(--salt-palette-interact-foreground-active);
|
|
1017
|
+
--salt-selectable-foreground-selectedDisabled: var(--salt-palette-interact-foreground-activeDisabled);
|
|
943
1018
|
--salt-selectable-background: var(--salt-palette-interact-background);
|
|
944
1019
|
--salt-selectable-background-hover: var(--salt-palette-interact-background-hover);
|
|
945
1020
|
--salt-selectable-background-selected: var(--salt-palette-interact-background-active);
|
|
946
1021
|
--salt-selectable-background-blurSelected: var(--salt-palette-interact-background-blurSelected);
|
|
947
1022
|
--salt-selectable-background-disabled: var(--salt-palette-interact-background-disabled);
|
|
948
|
-
--salt-selectable-cta-foreground: var(--salt-palette-interact-foreground);
|
|
949
1023
|
--salt-selectable-cta-foreground-hover: var(--salt-palette-interact-cta-foreground-hover);
|
|
950
1024
|
--salt-selectable-cta-foreground-selected: var(--salt-palette-interact-cta-foreground-active);
|
|
951
1025
|
--salt-selectable-cta-foreground-selectedDisabled: var(--salt-palette-interact-cta-foreground-activeDisabled);
|
|
952
|
-
--salt-selectable-cta-foreground-disabled: var(--salt-palette-interact-foreground-disabled);
|
|
953
1026
|
--salt-selectable-cta-background: var(--salt-palette-interact-background);
|
|
954
1027
|
--salt-selectable-cta-background-disabled: var(--salt-palette-interact-background-disabled);
|
|
955
1028
|
--salt-selectable-cta-background-hover: var(--salt-palette-interact-cta-background-hover);
|
|
956
1029
|
--salt-selectable-cta-background-selected: var(--salt-palette-interact-cta-background-active);
|
|
957
1030
|
--salt-selectable-cta-background-selectedDisabled: var(--salt-palette-interact-cta-background-activeDisabled);
|
|
958
|
-
--salt-selectable-primary-foreground: var(--salt-palette-interact-foreground);
|
|
1031
|
+
--salt-selectable-primary-foreground-hover: var(--salt-palette-interact-primary-foreground-hover);
|
|
959
1032
|
--salt-selectable-primary-foreground-selected: var(--salt-palette-interact-primary-foreground-active);
|
|
960
1033
|
--salt-selectable-primary-foreground-selectedDisabled: var(--salt-palette-interact-primary-foreground-activeDisabled);
|
|
961
|
-
--salt-selectable-primary-foreground-disabled: var(--salt-palette-interact-foreground-disabled);
|
|
962
|
-
--salt-selectable-primary-foreground-hover: var(--salt-palette-interact-primary-foreground-hover);
|
|
963
1034
|
--salt-selectable-primary-background: var(--salt-palette-interact-background);
|
|
964
1035
|
--salt-selectable-primary-background-disabled: var(--salt-palette-interact-background-disabled);
|
|
965
1036
|
--salt-selectable-primary-background-hover: var(--salt-palette-interact-primary-background-hover);
|
|
966
1037
|
--salt-selectable-primary-background-selected: var(--salt-palette-interact-primary-background-active);
|
|
967
1038
|
--salt-selectable-primary-background-selectedDisabled: var(--salt-palette-interact-primary-background-activeDisabled);
|
|
968
|
-
--salt-selectable-secondary-foreground: var(--salt-palette-interact-foreground);
|
|
1039
|
+
--salt-selectable-secondary-foreground-hover: var(--salt-palette-interact-secondary-foreground-hover);
|
|
969
1040
|
--salt-selectable-secondary-foreground-selected: var(--salt-palette-interact-secondary-foreground-active);
|
|
970
1041
|
--salt-selectable-secondary-foreground-selectedDisabled: var(--salt-palette-interact-secondary-foreground-activeDisabled);
|
|
971
|
-
--salt-selectable-secondary-foreground-disabled: var(--salt-palette-interact-foreground-disabled);
|
|
972
|
-
--salt-selectable-secondary-foreground-hover: var(--salt-palette-interact-secondary-foreground-hover);
|
|
973
1042
|
--salt-selectable-secondary-background: var(--salt-palette-interact-background);
|
|
974
1043
|
--salt-selectable-secondary-background-disabled: var(--salt-palette-interact-background-disabled);
|
|
975
1044
|
--salt-selectable-secondary-background-hover: var(--salt-palette-interact-secondary-background-hover);
|
|
976
1045
|
--salt-selectable-secondary-background-selected: var(--salt-palette-interact-secondary-background-active);
|
|
977
1046
|
--salt-selectable-secondary-background-selectedDisabled: var(--salt-palette-interact-secondary-background-activeDisabled);
|
|
1047
|
+
--salt-selectable-foreground-partial: var(--salt-palette-interact-foreground-partial);
|
|
1048
|
+
--salt-selectable-foreground-partialDisabled: var(--salt-palette-interact-foreground-partialDisabled);
|
|
1049
|
+
--salt-selectable-cta-foreground: var(--salt-palette-interact-foreground);
|
|
1050
|
+
--salt-selectable-cta-foreground-disabled: var(--salt-palette-interact-foreground-disabled);
|
|
1051
|
+
--salt-selectable-primary-foreground: var(--salt-palette-interact-foreground);
|
|
1052
|
+
--salt-selectable-primary-foreground-disabled: var(--salt-palette-interact-foreground-disabled);
|
|
1053
|
+
--salt-selectable-secondary-foreground: var(--salt-palette-interact-foreground);
|
|
1054
|
+
--salt-selectable-secondary-foreground-disabled: var(--salt-palette-interact-foreground-disabled);
|
|
978
1055
|
}
|
|
979
1056
|
|
|
980
1057
|
/* css/characteristics/separable.css */
|
|
@@ -994,10 +1071,21 @@
|
|
|
994
1071
|
--salt-status-static-foreground: var(--salt-palette-neutral-secondary-foreground);
|
|
995
1072
|
--salt-status-negative-foreground: var(--salt-palette-negative-foreground);
|
|
996
1073
|
--salt-status-positive-foreground: var(--salt-palette-positive-foreground);
|
|
1074
|
+
--salt-status-info-foreground-disabled: var(--salt-palette-info-foreground-disabled);
|
|
1075
|
+
--salt-status-success-foreground-disabled: var(--salt-palette-success-foreground-disabled);
|
|
1076
|
+
--salt-status-warning-foreground-disabled: var(--salt-palette-warning-foreground-disabled);
|
|
1077
|
+
--salt-status-error-foreground-disabled: var(--salt-palette-error-foreground-disabled);
|
|
1078
|
+
--salt-status-static-foreground-disabled: var(--salt-palette-neutral-secondary-foreground-disabled);
|
|
1079
|
+
--salt-status-negative-foreground-disabled: var(--salt-palette-negative-foreground-disabled);
|
|
1080
|
+
--salt-status-positive-foreground-disabled: var(--salt-palette-positive-foreground-disabled);
|
|
997
1081
|
--salt-status-info-borderColor: var(--salt-palette-info-border);
|
|
998
1082
|
--salt-status-success-borderColor: var(--salt-palette-success-border);
|
|
999
1083
|
--salt-status-warning-borderColor: var(--salt-palette-warning-border);
|
|
1000
1084
|
--salt-status-error-borderColor: var(--salt-palette-error-border);
|
|
1085
|
+
--salt-status-info-borderColor-disabled: var(--salt-palette-info-border-disabled);
|
|
1086
|
+
--salt-status-success-borderColor-disabled: var(--salt-palette-success-border-disabled);
|
|
1087
|
+
--salt-status-warning-borderColor-disabled: var(--salt-palette-warning-border-disabled);
|
|
1088
|
+
--salt-status-error-borderColor-disabled: var(--salt-palette-error-border-disabled);
|
|
1001
1089
|
--salt-status-info-background-emphasize: var(--salt-palette-info-background-emphasize);
|
|
1002
1090
|
--salt-status-success-background-emphasize: var(--salt-palette-success-background-emphasize);
|
|
1003
1091
|
--salt-status-warning-background-emphasize: var(--salt-palette-warning-background-emphasize);
|
|
@@ -1033,27 +1121,35 @@
|
|
|
1033
1121
|
--salt-text-fontWeight: var(--salt-typography-fontWeight-regular);
|
|
1034
1122
|
--salt-text-fontWeight-small: var(--salt-typography-fontWeight-light);
|
|
1035
1123
|
--salt-text-fontWeight-strong: var(--salt-typography-fontWeight-semiBold);
|
|
1124
|
+
--salt-text-h1-fontFamily: var(--salt-typography-fontFamily);
|
|
1036
1125
|
--salt-text-h1-fontWeight: var(--salt-typography-fontWeight-bold);
|
|
1037
1126
|
--salt-text-h1-fontWeight-small: var(--salt-typography-fontWeight-medium);
|
|
1038
1127
|
--salt-text-h1-fontWeight-strong: var(--salt-typography-fontWeight-extraBold);
|
|
1128
|
+
--salt-text-h2-fontFamily: var(--salt-typography-fontFamily);
|
|
1039
1129
|
--salt-text-h2-fontWeight: var(--salt-typography-fontWeight-semiBold);
|
|
1040
1130
|
--salt-text-h2-fontWeight-small: var(--salt-typography-fontWeight-regular);
|
|
1041
1131
|
--salt-text-h2-fontWeight-strong: var(--salt-typography-fontWeight-bold);
|
|
1132
|
+
--salt-text-h3-fontFamily: var(--salt-typography-fontFamily);
|
|
1042
1133
|
--salt-text-h3-fontWeight: var(--salt-typography-fontWeight-semiBold);
|
|
1043
1134
|
--salt-text-h3-fontWeight-small: var(--salt-typography-fontWeight-regular);
|
|
1044
1135
|
--salt-text-h3-fontWeight-strong: var(--salt-typography-fontWeight-bold);
|
|
1136
|
+
--salt-text-h4-fontFamily: var(--salt-typography-fontFamily);
|
|
1045
1137
|
--salt-text-h4-fontWeight: var(--salt-typography-fontWeight-semiBold);
|
|
1046
1138
|
--salt-text-h4-fontWeight-small: var(--salt-typography-fontWeight-regular);
|
|
1047
1139
|
--salt-text-h4-fontWeight-strong: var(--salt-typography-fontWeight-bold);
|
|
1140
|
+
--salt-text-label-fontFamily: var(--salt-typography-fontFamily);
|
|
1048
1141
|
--salt-text-label-fontWeight: var(--salt-typography-fontWeight-regular);
|
|
1049
1142
|
--salt-text-label-fontWeight-small: var(--salt-typography-fontWeight-light);
|
|
1050
1143
|
--salt-text-label-fontWeight-strong: var(--salt-typography-fontWeight-semiBold);
|
|
1144
|
+
--salt-text-display1-fontFamily: var(--salt-typography-fontFamily);
|
|
1051
1145
|
--salt-text-display1-fontWeight: var(--salt-typography-fontWeight-semiBold);
|
|
1052
1146
|
--salt-text-display1-fontWeight-strong: var(--salt-typography-fontWeight-bold);
|
|
1053
1147
|
--salt-text-display1-fontWeight-small: var(--salt-typography-fontWeight-regular);
|
|
1148
|
+
--salt-text-display2-fontFamily: var(--salt-typography-fontFamily);
|
|
1054
1149
|
--salt-text-display2-fontWeight: var(--salt-typography-fontWeight-semiBold);
|
|
1055
1150
|
--salt-text-display2-fontWeight-strong: var(--salt-typography-fontWeight-bold);
|
|
1056
1151
|
--salt-text-display2-fontWeight-small: var(--salt-typography-fontWeight-regular);
|
|
1152
|
+
--salt-text-display3-fontFamily: var(--salt-typography-fontFamily);
|
|
1057
1153
|
--salt-text-display3-fontWeight: var(--salt-typography-fontWeight-semiBold);
|
|
1058
1154
|
--salt-text-display3-fontWeight-strong: var(--salt-typography-fontWeight-bold);
|
|
1059
1155
|
--salt-text-display3-fontWeight-small: var(--salt-typography-fontWeight-regular);
|
|
@@ -1155,6 +1251,24 @@
|
|
|
1155
1251
|
--salt-text-display3-lineHeight: 24px;
|
|
1156
1252
|
}
|
|
1157
1253
|
|
|
1254
|
+
/* css/characteristics/track.css */
|
|
1255
|
+
.salt-theme {
|
|
1256
|
+
--salt-track-borderStyle: solid;
|
|
1257
|
+
--salt-track-borderStyle-active: solid;
|
|
1258
|
+
--salt-track-borderStyle-complete: solid;
|
|
1259
|
+
--salt-track-borderStyle-incomplete: dotted;
|
|
1260
|
+
--salt-track-borderWidth: 2px;
|
|
1261
|
+
--salt-track-borderWidth-active: 2px;
|
|
1262
|
+
--salt-track-borderWidth-complete: 2px;
|
|
1263
|
+
--salt-track-borderWidth-incomplete: 2px;
|
|
1264
|
+
--salt-track-fontWeight: var(--salt-typography-fontWeight-semiBold);
|
|
1265
|
+
--salt-track-textAlign: center;
|
|
1266
|
+
--salt-track-background: var(--salt-palette-track-background);
|
|
1267
|
+
--salt-track-background-disabled: var(--salt-palette-track-background-disabled);
|
|
1268
|
+
--salt-track-borderColor: var(--salt-palette-track-border);
|
|
1269
|
+
--salt-track-borderColor-disabled: var(--salt-palette-track-border-disabled);
|
|
1270
|
+
}
|
|
1271
|
+
|
|
1158
1272
|
/* css/theme.css */
|
|
1159
1273
|
|
|
1160
1274
|
/* index.css */
|