@salt-ds/theme 1.2.0 → 1.4.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.
Files changed (4) hide show
  1. package/css/global.css +11 -0
  2. package/css/theme.css +62 -23
  3. package/index.css +73 -23
  4. package/package.json +1 -1
package/css/global.css CHANGED
@@ -20,3 +20,14 @@
20
20
  *::after {
21
21
  box-sizing: border-box;
22
22
  }
23
+ .salt-visuallyHidden {
24
+ position: absolute;
25
+ height: 1px;
26
+ width: 1px;
27
+ padding: 0;
28
+ margin: -1px;
29
+ overflow: hidden;
30
+ clip: rect(0, 0, 0, 0);
31
+ white-space: nowrap;
32
+ border-width: 0;
33
+ }
package/css/theme.css CHANGED
@@ -259,6 +259,14 @@
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));
@@ -324,16 +332,23 @@
324
332
 
325
333
  /* css/foundations/icon.css */
326
334
  .salt-density-touch {
327
- --salt-size-icon-base: 16px;
335
+ --salt-icon-size-base: 16px;
336
+ --salt-icon-size-status-adornment: 12px;
328
337
  }
329
338
  .salt-density-low {
330
- --salt-size-icon-base: 14px;
339
+ --salt-icon-size-base: 14px;
340
+ --salt-icon-size-status-adornment: 10px;
331
341
  }
332
342
  .salt-density-medium {
333
- --salt-size-icon-base: 12px;
343
+ --salt-icon-size-base: 12px;
344
+ --salt-icon-size-status-adornment: 8px;
334
345
  }
335
346
  .salt-density-high {
336
- --salt-size-icon-base: 10px;
347
+ --salt-icon-size-base: 10px;
348
+ --salt-icon-size-status-adornment: 6px;
349
+ }
350
+ .salt-theme {
351
+ --salt-size-icon-base: var(--salt-icon-size-base);
337
352
  }
338
353
 
339
354
  /* css/foundations/opacity.css */
@@ -374,12 +389,14 @@
374
389
  .salt-density-medium,
375
390
  .salt-density-high {
376
391
  --salt-size-basis-unit: 4px;
392
+ --salt-size-adornmentGap: calc(0.75 * var(--salt-size-unit));
377
393
  --salt-size-border: 1px;
378
- --salt-size-sharktooth-height: 5px;
379
- --salt-size-sharktooth-width: 10px;
394
+ --salt-size-container-spacing: calc(3 * var(--salt-size-unit));
380
395
  --salt-size-separator-strokeWidth: 1px;
381
- --salt-size-separator-height: calc(var(--salt-size-compact) + 1.5 * var(--salt-size-basis-unit));
382
396
  --salt-size-selectable: calc(var(--salt-size-base) - (1.5 * var(--salt-size-unit)) - (0.5 * var(--salt-size-basis-unit)));
397
+ --salt-size-separator-height: calc(var(--salt-size-compact) + 1.5 * var(--salt-size-basis-unit));
398
+ --salt-size-sharktooth-height: 5px;
399
+ --salt-size-sharktooth-width: 10px;
383
400
  --salt-size-stackable: calc(var(--salt-size-base) + var(--salt-size-unit));
384
401
  --salt-size-selection: var(--salt-size-selectable);
385
402
  --salt-size-brandBar: 4px;
@@ -460,12 +477,18 @@
460
477
  --salt-palette-opacity-primary-border: var(--salt-opacity-3);
461
478
  --salt-palette-opacity-secondary-border: var(--salt-opacity-2);
462
479
  --salt-palette-opacity-tertiary-border: var(--salt-opacity-1);
480
+ --salt-palette-error-background-emphasize: var(--salt-palette-error-background);
481
+ --salt-palette-warning-background-emphasize: var(--salt-palette-warning-background);
482
+ --salt-palette-success-background-emphasize: var(--salt-palette-success-background);
483
+ --salt-palette-info-background-emphasize: var(--salt-palette-info-background);
463
484
  }
464
485
  .salt-theme[data-mode=light] {
465
486
  --salt-palette-accent-background: var(--salt-color-blue-500);
466
487
  --salt-palette-accent-background-disabled: var(--salt-color-blue-500-fade-background);
467
488
  --salt-palette-accent-border: var(--salt-color-blue-500);
489
+ --salt-palette-accent-border-disabled: var(--salt-color-blue-500-fade-border);
468
490
  --salt-palette-accent-foreground: var(--salt-color-white);
491
+ --salt-palette-accent-foreground-disabled: var(--salt-color-white-fade-foreground);
469
492
  --salt-palette-interact-background: transparent;
470
493
  --salt-palette-interact-background-blurSelected: var(--salt-color-gray-30);
471
494
  --salt-palette-interact-background-hover: var(--salt-color-blue-10);
@@ -513,24 +536,24 @@
513
536
  --salt-palette-interact-secondary-foreground-activeDisabled: var(--salt-color-white-fade-foreground);
514
537
  --salt-palette-interact-secondary-foreground-disabled: var(--salt-color-gray-900-fade-foreground);
515
538
  --salt-palette-interact-secondary-foreground-hover: var(--salt-color-gray-900);
516
- --salt-palette-error-background-emphasize: var(--salt-color-red-10);
539
+ --salt-palette-error-background: var(--salt-color-red-10);
517
540
  --salt-palette-error-background-selected: var(--salt-color-red-20);
518
541
  --salt-palette-error-border: var(--salt-color-red-500);
519
542
  --salt-palette-error-border-disabled: var(--salt-color-red-500-fade-border);
520
543
  --salt-palette-error-foreground: var(--salt-color-red-500);
521
544
  --salt-palette-error-foreground-disabled: var(--salt-color-red-500-fade-foreground);
522
- --salt-palette-info-background-emphasize: var(--salt-color-blue-10);
545
+ --salt-palette-info-background: var(--salt-color-blue-10);
523
546
  --salt-palette-info-border: var(--salt-color-blue-500);
524
547
  --salt-palette-info-border-disabled: var(--salt-color-blue-500-fade-border);
525
548
  --salt-palette-info-foreground: var(--salt-color-blue-500);
526
549
  --salt-palette-info-foreground-disabled: var(--salt-color-blue-500-fade-foreground);
527
- --salt-palette-success-background-emphasize: var(--salt-color-green-10);
550
+ --salt-palette-success-background: var(--salt-color-green-10);
528
551
  --salt-palette-success-background-selected: var(--salt-color-green-20);
529
552
  --salt-palette-success-border: var(--salt-color-green-500);
530
553
  --salt-palette-success-border-disabled: var(--salt-color-green-500-fade-border);
531
554
  --salt-palette-success-foreground: var(--salt-color-green-500);
532
555
  --salt-palette-success-foreground-disabled: var(--salt-color-green-500-fade-foreground);
533
- --salt-palette-warning-background-emphasize: var(--salt-color-orange-10);
556
+ --salt-palette-warning-background: var(--salt-color-orange-10);
534
557
  --salt-palette-warning-background-selected: var(--salt-color-orange-20);
535
558
  --salt-palette-warning-border: var(--salt-color-orange-700);
536
559
  --salt-palette-warning-border-disabled: var(--salt-color-orange-700-fade-border);
@@ -571,7 +594,6 @@
571
594
  --salt-palette-neutral-secondary-separator: var(--salt-color-black-fade-separatorOpacity-secondary);
572
595
  --salt-palette-neutral-tertiary-background: transparent;
573
596
  --salt-palette-neutral-tertiary-background-disabled: transparent;
574
- --salt-palette-neutral-tertiary-background-readonly: transparent;
575
597
  --salt-palette-neutral-tertiary-border: transparent;
576
598
  --salt-palette-neutral-tertiary-border-disabled: transparent;
577
599
  --salt-palette-neutral-tertiary-separator: var(--salt-color-black-fade-separatorOpacity-tertiary);
@@ -586,7 +608,9 @@
586
608
  --salt-palette-accent-background: var(--salt-color-blue-500);
587
609
  --salt-palette-accent-background-disabled: var(--salt-color-blue-500-fade-background);
588
610
  --salt-palette-accent-border: var(--salt-color-blue-500);
611
+ --salt-palette-accent-border-disabled: var(--salt-color-blue-500-fade-border);
589
612
  --salt-palette-accent-foreground: var(--salt-color-white);
613
+ --salt-palette-accent-foreground-disabled: var(--salt-color-white-fade-foreground);
590
614
  --salt-palette-interact-background: transparent;
591
615
  --salt-palette-interact-background-active: var(--salt-color-blue-700);
592
616
  --salt-palette-interact-background-blurSelected: var(--salt-color-gray-600);
@@ -601,7 +625,7 @@
601
625
  --salt-palette-interact-foreground: var(--salt-color-gray-90);
602
626
  --salt-palette-interact-foreground-active: var(--salt-color-blue-100);
603
627
  --salt-palette-interact-foreground-activeDisabled: var(--salt-color-blue-100-fade-foreground);
604
- --salt-palette-interact-foreground-disabled: var(--salt-color-90-fade-foreground);
628
+ --salt-palette-interact-foreground-disabled: var(--salt-color-gray-90-fade-foreground);
605
629
  --salt-palette-interact-foreground-hover: var(--salt-color-blue-500);
606
630
  --salt-palette-interact-outline: var(--salt-color-blue-100);
607
631
  --salt-palette-interact-cta-background: var(--salt-color-blue-600);
@@ -634,24 +658,24 @@
634
658
  --salt-palette-interact-secondary-foreground-activeDisabled: var(--salt-color-gray-900-fade-foreground);
635
659
  --salt-palette-interact-secondary-foreground-disabled: var(--salt-color-white-fade-foreground);
636
660
  --salt-palette-interact-secondary-foreground-hover: var(--salt-color-white);
637
- --salt-palette-error-background-emphasize: var(--salt-color-red-900);
661
+ --salt-palette-error-background: var(--salt-color-red-900);
638
662
  --salt-palette-error-background-selected: var(--salt-color-red-900);
639
663
  --salt-palette-error-border: var(--salt-color-red-500);
640
664
  --salt-palette-error-border-disabled: var(--salt-color-red-500-fade-border);
641
665
  --salt-palette-error-foreground: var(--salt-color-red-500);
642
666
  --salt-palette-error-foreground-disabled: var(--salt-color-red-500-fade-foreground);
643
- --salt-palette-info-background-emphasize: var(--salt-color-blue-900);
667
+ --salt-palette-info-background: var(--salt-color-blue-900);
644
668
  --salt-palette-info-border: var(--salt-color-blue-500);
645
669
  --salt-palette-info-border-disabled: var(--salt-color-blue-500-fade-border);
646
670
  --salt-palette-info-foreground: var(--salt-color-blue-500);
647
671
  --salt-palette-info-foreground-disabled: var(--salt-color-blue-500-fade-foreground);
648
- --salt-palette-success-background-emphasize: var(--salt-color-green-900);
672
+ --salt-palette-success-background: var(--salt-color-green-900);
649
673
  --salt-palette-success-background-selected: var(--salt-color-green-900);
650
674
  --salt-palette-success-border: var(--salt-color-green-400);
651
675
  --salt-palette-success-border-disabled: var(--salt-color-green-400-fade-border);
652
676
  --salt-palette-success-foreground: var(--salt-color-green-400);
653
677
  --salt-palette-success-foreground-disabled: var(--salt-color-green-400-fade-foreground);
654
- --salt-palette-warning-background-emphasize: var(--salt-color-orange-900);
678
+ --salt-palette-warning-background: var(--salt-color-orange-900);
655
679
  --salt-palette-warning-background-selected: var(--salt-color-orange-900);
656
680
  --salt-palette-warning-border: var(--salt-color-orange-500);
657
681
  --salt-palette-warning-border-disabled: var(--salt-color-orange-500-fade-border);
@@ -692,7 +716,6 @@
692
716
  --salt-palette-neutral-secondary-separator: var(--salt-color-white-fade-separatorOpacity-secondary);
693
717
  --salt-palette-neutral-tertiary-background: transparent;
694
718
  --salt-palette-neutral-tertiary-background-disabled: transparent;
695
- --salt-palette-neutral-tertiary-background-readonly: transparent;
696
719
  --salt-palette-neutral-tertiary-border: transparent;
697
720
  --salt-palette-neutral-tertiary-border-disabled: transparent;
698
721
  --salt-palette-neutral-tertiary-separator: var(--salt-color-white-fade-separatorOpacity-tertiary);
@@ -716,6 +739,7 @@
716
739
  --salt-palette-measured-background-disabled: var(--salt-color-gray-60-fade-background);
717
740
  --salt-palette-measured-border: var(--salt-color-gray-90);
718
741
  --salt-palette-measured-border-disabled: var(--salt-color-gray-90-fade-border);
742
+ --salt-palette-neutral-tertiary-background-readonly: transparent;
719
743
  }
720
744
  .salt-theme[data-mode=dark] {
721
745
  --salt-palette-interact-foreground-partial: var(--salt-color-blue-100);
@@ -730,6 +754,7 @@
730
754
  --salt-palette-measured-background-disabled: var(--salt-color-gray-300-fade-background);
731
755
  --salt-palette-measured-border: var(--salt-color-gray-90);
732
756
  --salt-palette-measured-border-disabled: var(--salt-color-gray-90-fade-border);
757
+ --salt-palette-neutral-tertiary-background-readonly: transparent;
733
758
  }
734
759
 
735
760
  /* css/characteristics/accent.css */
@@ -753,7 +778,9 @@
753
778
  --salt-accent-background: var(--salt-palette-accent-background);
754
779
  --salt-accent-background-disabled: var(--salt-palette-accent-background-disabled);
755
780
  --salt-accent-borderColor: var(--salt-palette-accent-border);
781
+ --salt-accent-borderColor-disabled: var(--salt-palette-accent-border-disabled);
756
782
  --salt-accent-foreground: var(--salt-palette-accent-foreground);
783
+ --salt-accent-foreground-disabled: var(--salt-palette-accent-foreground-disabled);
757
784
  --salt-accent-fontWeight: var(--salt-typography-fontWeight-semiBold);
758
785
  }
759
786
 
@@ -864,12 +891,12 @@
864
891
  --salt-editable-secondary-background-disabled: var(--salt-palette-neutral-secondary-background-disabled);
865
892
  --salt-editable-secondary-background-hover: var(--salt-palette-neutral-secondary-background);
866
893
  --salt-editable-secondary-background-readonly: var(--salt-palette-neutral-secondary-background-readonly);
894
+ --salt-editable-help-fontStyle: italic;
867
895
  --salt-editable-tertiary-background: var(--salt-palette-neutral-tertiary-background);
868
896
  --salt-editable-tertiary-background-active: var(--salt-palette-neutral-tertiary-background);
869
897
  --salt-editable-tertiary-background-disabled: var(--salt-palette-neutral-tertiary-background-disabled);
870
898
  --salt-editable-tertiary-background-hover: var(--salt-palette-neutral-tertiary-background);
871
899
  --salt-editable-tertiary-background-readonly: var(--salt-palette-neutral-tertiary-background-readonly);
872
- --salt-editable-help-fontStyle: italic;
873
900
  }
874
901
 
875
902
  /* css/characteristics/focused.css */
@@ -1047,13 +1074,17 @@
1047
1074
  --salt-status-success-borderColor-disabled: var(--salt-palette-success-border-disabled);
1048
1075
  --salt-status-warning-borderColor-disabled: var(--salt-palette-warning-border-disabled);
1049
1076
  --salt-status-error-borderColor-disabled: var(--salt-palette-error-border-disabled);
1050
- --salt-status-info-background-emphasize: var(--salt-palette-info-background-emphasize);
1051
- --salt-status-success-background-emphasize: var(--salt-palette-success-background-emphasize);
1052
- --salt-status-warning-background-emphasize: var(--salt-palette-warning-background-emphasize);
1053
- --salt-status-error-background-emphasize: var(--salt-palette-error-background-emphasize);
1077
+ --salt-status-info-background: var(--salt-palette-info-background);
1078
+ --salt-status-success-background: var(--salt-palette-success-background);
1079
+ --salt-status-warning-background: var(--salt-palette-warning-background);
1080
+ --salt-status-error-background: var(--salt-palette-error-background);
1054
1081
  --salt-status-success-background-selected: var(--salt-palette-success-background-selected);
1055
1082
  --salt-status-warning-background-selected: var(--salt-palette-warning-background-selected);
1056
1083
  --salt-status-error-background-selected: var(--salt-palette-error-background-selected);
1084
+ --salt-status-info-background-emphasize: var(--salt-status-info-background);
1085
+ --salt-status-success-background-emphasize: var(--salt-status-success-background);
1086
+ --salt-status-warning-background-emphasize: var(--salt-status-warning-background);
1087
+ --salt-status-error-background-emphasize: var(--salt-status-error-background);
1057
1088
  }
1058
1089
 
1059
1090
  /* css/characteristics/taggable.css */
@@ -1082,27 +1113,35 @@
1082
1113
  --salt-text-fontWeight: var(--salt-typography-fontWeight-regular);
1083
1114
  --salt-text-fontWeight-small: var(--salt-typography-fontWeight-light);
1084
1115
  --salt-text-fontWeight-strong: var(--salt-typography-fontWeight-semiBold);
1116
+ --salt-text-h1-fontFamily: var(--salt-typography-fontFamily);
1085
1117
  --salt-text-h1-fontWeight: var(--salt-typography-fontWeight-bold);
1086
1118
  --salt-text-h1-fontWeight-small: var(--salt-typography-fontWeight-medium);
1087
1119
  --salt-text-h1-fontWeight-strong: var(--salt-typography-fontWeight-extraBold);
1120
+ --salt-text-h2-fontFamily: var(--salt-typography-fontFamily);
1088
1121
  --salt-text-h2-fontWeight: var(--salt-typography-fontWeight-semiBold);
1089
1122
  --salt-text-h2-fontWeight-small: var(--salt-typography-fontWeight-regular);
1090
1123
  --salt-text-h2-fontWeight-strong: var(--salt-typography-fontWeight-bold);
1124
+ --salt-text-h3-fontFamily: var(--salt-typography-fontFamily);
1091
1125
  --salt-text-h3-fontWeight: var(--salt-typography-fontWeight-semiBold);
1092
1126
  --salt-text-h3-fontWeight-small: var(--salt-typography-fontWeight-regular);
1093
1127
  --salt-text-h3-fontWeight-strong: var(--salt-typography-fontWeight-bold);
1128
+ --salt-text-h4-fontFamily: var(--salt-typography-fontFamily);
1094
1129
  --salt-text-h4-fontWeight: var(--salt-typography-fontWeight-semiBold);
1095
1130
  --salt-text-h4-fontWeight-small: var(--salt-typography-fontWeight-regular);
1096
1131
  --salt-text-h4-fontWeight-strong: var(--salt-typography-fontWeight-bold);
1132
+ --salt-text-label-fontFamily: var(--salt-typography-fontFamily);
1097
1133
  --salt-text-label-fontWeight: var(--salt-typography-fontWeight-regular);
1098
1134
  --salt-text-label-fontWeight-small: var(--salt-typography-fontWeight-light);
1099
1135
  --salt-text-label-fontWeight-strong: var(--salt-typography-fontWeight-semiBold);
1136
+ --salt-text-display1-fontFamily: var(--salt-typography-fontFamily);
1100
1137
  --salt-text-display1-fontWeight: var(--salt-typography-fontWeight-semiBold);
1101
1138
  --salt-text-display1-fontWeight-strong: var(--salt-typography-fontWeight-bold);
1102
1139
  --salt-text-display1-fontWeight-small: var(--salt-typography-fontWeight-regular);
1140
+ --salt-text-display2-fontFamily: var(--salt-typography-fontFamily);
1103
1141
  --salt-text-display2-fontWeight: var(--salt-typography-fontWeight-semiBold);
1104
1142
  --salt-text-display2-fontWeight-strong: var(--salt-typography-fontWeight-bold);
1105
1143
  --salt-text-display2-fontWeight-small: var(--salt-typography-fontWeight-regular);
1144
+ --salt-text-display3-fontFamily: var(--salt-typography-fontFamily);
1106
1145
  --salt-text-display3-fontWeight: var(--salt-typography-fontWeight-semiBold);
1107
1146
  --salt-text-display3-fontWeight-strong: var(--salt-typography-fontWeight-bold);
1108
1147
  --salt-text-display3-fontWeight-small: var(--salt-typography-fontWeight-regular);
package/index.css CHANGED
@@ -20,6 +20,17 @@
20
20
  *::after {
21
21
  box-sizing: border-box;
22
22
  }
23
+ .salt-visuallyHidden {
24
+ position: absolute;
25
+ height: 1px;
26
+ width: 1px;
27
+ padding: 0;
28
+ margin: -1px;
29
+ overflow: hidden;
30
+ clip: rect(0, 0, 0, 0);
31
+ white-space: nowrap;
32
+ border-width: 0;
33
+ }
23
34
 
24
35
  /* css/foundations/animation.css */
25
36
  .salt-density-touch,
@@ -282,6 +293,14 @@
282
293
  --salt-delay-cutoff: 10000;
283
294
  }
284
295
 
296
+ /* css/foundations/duration.css */
297
+ .salt-theme {
298
+ --salt-duration-instant: 100;
299
+ --salt-duration-perceptible: 300;
300
+ --salt-duration-notable: 1000;
301
+ --salt-duration-cutoff: 10000;
302
+ }
303
+
285
304
  /* css/foundations/fade.css */
286
305
  .salt-theme {
287
306
  --salt-color-blue-100-fade-foreground: rgba(100, 177, 228, var(--salt-palette-opacity-foreground));
@@ -347,16 +366,23 @@
347
366
 
348
367
  /* css/foundations/icon.css */
349
368
  .salt-density-touch {
350
- --salt-size-icon-base: 16px;
369
+ --salt-icon-size-base: 16px;
370
+ --salt-icon-size-status-adornment: 12px;
351
371
  }
352
372
  .salt-density-low {
353
- --salt-size-icon-base: 14px;
373
+ --salt-icon-size-base: 14px;
374
+ --salt-icon-size-status-adornment: 10px;
354
375
  }
355
376
  .salt-density-medium {
356
- --salt-size-icon-base: 12px;
377
+ --salt-icon-size-base: 12px;
378
+ --salt-icon-size-status-adornment: 8px;
357
379
  }
358
380
  .salt-density-high {
359
- --salt-size-icon-base: 10px;
381
+ --salt-icon-size-base: 10px;
382
+ --salt-icon-size-status-adornment: 6px;
383
+ }
384
+ .salt-theme {
385
+ --salt-size-icon-base: var(--salt-icon-size-base);
360
386
  }
361
387
 
362
388
  /* css/foundations/opacity.css */
@@ -397,12 +423,14 @@
397
423
  .salt-density-medium,
398
424
  .salt-density-high {
399
425
  --salt-size-basis-unit: 4px;
426
+ --salt-size-adornmentGap: calc(0.75 * var(--salt-size-unit));
400
427
  --salt-size-border: 1px;
401
- --salt-size-sharktooth-height: 5px;
402
- --salt-size-sharktooth-width: 10px;
428
+ --salt-size-container-spacing: calc(3 * var(--salt-size-unit));
403
429
  --salt-size-separator-strokeWidth: 1px;
404
- --salt-size-separator-height: calc(var(--salt-size-compact) + 1.5 * var(--salt-size-basis-unit));
405
430
  --salt-size-selectable: calc(var(--salt-size-base) - (1.5 * var(--salt-size-unit)) - (0.5 * var(--salt-size-basis-unit)));
431
+ --salt-size-separator-height: calc(var(--salt-size-compact) + 1.5 * var(--salt-size-basis-unit));
432
+ --salt-size-sharktooth-height: 5px;
433
+ --salt-size-sharktooth-width: 10px;
406
434
  --salt-size-stackable: calc(var(--salt-size-base) + var(--salt-size-unit));
407
435
  --salt-size-selection: var(--salt-size-selectable);
408
436
  --salt-size-brandBar: 4px;
@@ -483,12 +511,18 @@
483
511
  --salt-palette-opacity-primary-border: var(--salt-opacity-3);
484
512
  --salt-palette-opacity-secondary-border: var(--salt-opacity-2);
485
513
  --salt-palette-opacity-tertiary-border: var(--salt-opacity-1);
514
+ --salt-palette-error-background-emphasize: var(--salt-palette-error-background);
515
+ --salt-palette-warning-background-emphasize: var(--salt-palette-warning-background);
516
+ --salt-palette-success-background-emphasize: var(--salt-palette-success-background);
517
+ --salt-palette-info-background-emphasize: var(--salt-palette-info-background);
486
518
  }
487
519
  .salt-theme[data-mode=light] {
488
520
  --salt-palette-accent-background: var(--salt-color-blue-500);
489
521
  --salt-palette-accent-background-disabled: var(--salt-color-blue-500-fade-background);
490
522
  --salt-palette-accent-border: var(--salt-color-blue-500);
523
+ --salt-palette-accent-border-disabled: var(--salt-color-blue-500-fade-border);
491
524
  --salt-palette-accent-foreground: var(--salt-color-white);
525
+ --salt-palette-accent-foreground-disabled: var(--salt-color-white-fade-foreground);
492
526
  --salt-palette-interact-background: transparent;
493
527
  --salt-palette-interact-background-blurSelected: var(--salt-color-gray-30);
494
528
  --salt-palette-interact-background-hover: var(--salt-color-blue-10);
@@ -536,24 +570,24 @@
536
570
  --salt-palette-interact-secondary-foreground-activeDisabled: var(--salt-color-white-fade-foreground);
537
571
  --salt-palette-interact-secondary-foreground-disabled: var(--salt-color-gray-900-fade-foreground);
538
572
  --salt-palette-interact-secondary-foreground-hover: var(--salt-color-gray-900);
539
- --salt-palette-error-background-emphasize: var(--salt-color-red-10);
573
+ --salt-palette-error-background: var(--salt-color-red-10);
540
574
  --salt-palette-error-background-selected: var(--salt-color-red-20);
541
575
  --salt-palette-error-border: var(--salt-color-red-500);
542
576
  --salt-palette-error-border-disabled: var(--salt-color-red-500-fade-border);
543
577
  --salt-palette-error-foreground: var(--salt-color-red-500);
544
578
  --salt-palette-error-foreground-disabled: var(--salt-color-red-500-fade-foreground);
545
- --salt-palette-info-background-emphasize: var(--salt-color-blue-10);
579
+ --salt-palette-info-background: var(--salt-color-blue-10);
546
580
  --salt-palette-info-border: var(--salt-color-blue-500);
547
581
  --salt-palette-info-border-disabled: var(--salt-color-blue-500-fade-border);
548
582
  --salt-palette-info-foreground: var(--salt-color-blue-500);
549
583
  --salt-palette-info-foreground-disabled: var(--salt-color-blue-500-fade-foreground);
550
- --salt-palette-success-background-emphasize: var(--salt-color-green-10);
584
+ --salt-palette-success-background: var(--salt-color-green-10);
551
585
  --salt-palette-success-background-selected: var(--salt-color-green-20);
552
586
  --salt-palette-success-border: var(--salt-color-green-500);
553
587
  --salt-palette-success-border-disabled: var(--salt-color-green-500-fade-border);
554
588
  --salt-palette-success-foreground: var(--salt-color-green-500);
555
589
  --salt-palette-success-foreground-disabled: var(--salt-color-green-500-fade-foreground);
556
- --salt-palette-warning-background-emphasize: var(--salt-color-orange-10);
590
+ --salt-palette-warning-background: var(--salt-color-orange-10);
557
591
  --salt-palette-warning-background-selected: var(--salt-color-orange-20);
558
592
  --salt-palette-warning-border: var(--salt-color-orange-700);
559
593
  --salt-palette-warning-border-disabled: var(--salt-color-orange-700-fade-border);
@@ -594,7 +628,6 @@
594
628
  --salt-palette-neutral-secondary-separator: var(--salt-color-black-fade-separatorOpacity-secondary);
595
629
  --salt-palette-neutral-tertiary-background: transparent;
596
630
  --salt-palette-neutral-tertiary-background-disabled: transparent;
597
- --salt-palette-neutral-tertiary-background-readonly: transparent;
598
631
  --salt-palette-neutral-tertiary-border: transparent;
599
632
  --salt-palette-neutral-tertiary-border-disabled: transparent;
600
633
  --salt-palette-neutral-tertiary-separator: var(--salt-color-black-fade-separatorOpacity-tertiary);
@@ -609,7 +642,9 @@
609
642
  --salt-palette-accent-background: var(--salt-color-blue-500);
610
643
  --salt-palette-accent-background-disabled: var(--salt-color-blue-500-fade-background);
611
644
  --salt-palette-accent-border: var(--salt-color-blue-500);
645
+ --salt-palette-accent-border-disabled: var(--salt-color-blue-500-fade-border);
612
646
  --salt-palette-accent-foreground: var(--salt-color-white);
647
+ --salt-palette-accent-foreground-disabled: var(--salt-color-white-fade-foreground);
613
648
  --salt-palette-interact-background: transparent;
614
649
  --salt-palette-interact-background-active: var(--salt-color-blue-700);
615
650
  --salt-palette-interact-background-blurSelected: var(--salt-color-gray-600);
@@ -624,7 +659,7 @@
624
659
  --salt-palette-interact-foreground: var(--salt-color-gray-90);
625
660
  --salt-palette-interact-foreground-active: var(--salt-color-blue-100);
626
661
  --salt-palette-interact-foreground-activeDisabled: var(--salt-color-blue-100-fade-foreground);
627
- --salt-palette-interact-foreground-disabled: var(--salt-color-90-fade-foreground);
662
+ --salt-palette-interact-foreground-disabled: var(--salt-color-gray-90-fade-foreground);
628
663
  --salt-palette-interact-foreground-hover: var(--salt-color-blue-500);
629
664
  --salt-palette-interact-outline: var(--salt-color-blue-100);
630
665
  --salt-palette-interact-cta-background: var(--salt-color-blue-600);
@@ -657,24 +692,24 @@
657
692
  --salt-palette-interact-secondary-foreground-activeDisabled: var(--salt-color-gray-900-fade-foreground);
658
693
  --salt-palette-interact-secondary-foreground-disabled: var(--salt-color-white-fade-foreground);
659
694
  --salt-palette-interact-secondary-foreground-hover: var(--salt-color-white);
660
- --salt-palette-error-background-emphasize: var(--salt-color-red-900);
695
+ --salt-palette-error-background: var(--salt-color-red-900);
661
696
  --salt-palette-error-background-selected: var(--salt-color-red-900);
662
697
  --salt-palette-error-border: var(--salt-color-red-500);
663
698
  --salt-palette-error-border-disabled: var(--salt-color-red-500-fade-border);
664
699
  --salt-palette-error-foreground: var(--salt-color-red-500);
665
700
  --salt-palette-error-foreground-disabled: var(--salt-color-red-500-fade-foreground);
666
- --salt-palette-info-background-emphasize: var(--salt-color-blue-900);
701
+ --salt-palette-info-background: var(--salt-color-blue-900);
667
702
  --salt-palette-info-border: var(--salt-color-blue-500);
668
703
  --salt-palette-info-border-disabled: var(--salt-color-blue-500-fade-border);
669
704
  --salt-palette-info-foreground: var(--salt-color-blue-500);
670
705
  --salt-palette-info-foreground-disabled: var(--salt-color-blue-500-fade-foreground);
671
- --salt-palette-success-background-emphasize: var(--salt-color-green-900);
706
+ --salt-palette-success-background: var(--salt-color-green-900);
672
707
  --salt-palette-success-background-selected: var(--salt-color-green-900);
673
708
  --salt-palette-success-border: var(--salt-color-green-400);
674
709
  --salt-palette-success-border-disabled: var(--salt-color-green-400-fade-border);
675
710
  --salt-palette-success-foreground: var(--salt-color-green-400);
676
711
  --salt-palette-success-foreground-disabled: var(--salt-color-green-400-fade-foreground);
677
- --salt-palette-warning-background-emphasize: var(--salt-color-orange-900);
712
+ --salt-palette-warning-background: var(--salt-color-orange-900);
678
713
  --salt-palette-warning-background-selected: var(--salt-color-orange-900);
679
714
  --salt-palette-warning-border: var(--salt-color-orange-500);
680
715
  --salt-palette-warning-border-disabled: var(--salt-color-orange-500-fade-border);
@@ -715,7 +750,6 @@
715
750
  --salt-palette-neutral-secondary-separator: var(--salt-color-white-fade-separatorOpacity-secondary);
716
751
  --salt-palette-neutral-tertiary-background: transparent;
717
752
  --salt-palette-neutral-tertiary-background-disabled: transparent;
718
- --salt-palette-neutral-tertiary-background-readonly: transparent;
719
753
  --salt-palette-neutral-tertiary-border: transparent;
720
754
  --salt-palette-neutral-tertiary-border-disabled: transparent;
721
755
  --salt-palette-neutral-tertiary-separator: var(--salt-color-white-fade-separatorOpacity-tertiary);
@@ -739,6 +773,7 @@
739
773
  --salt-palette-measured-background-disabled: var(--salt-color-gray-60-fade-background);
740
774
  --salt-palette-measured-border: var(--salt-color-gray-90);
741
775
  --salt-palette-measured-border-disabled: var(--salt-color-gray-90-fade-border);
776
+ --salt-palette-neutral-tertiary-background-readonly: transparent;
742
777
  }
743
778
  .salt-theme[data-mode=dark] {
744
779
  --salt-palette-interact-foreground-partial: var(--salt-color-blue-100);
@@ -753,6 +788,7 @@
753
788
  --salt-palette-measured-background-disabled: var(--salt-color-gray-300-fade-background);
754
789
  --salt-palette-measured-border: var(--salt-color-gray-90);
755
790
  --salt-palette-measured-border-disabled: var(--salt-color-gray-90-fade-border);
791
+ --salt-palette-neutral-tertiary-background-readonly: transparent;
756
792
  }
757
793
 
758
794
  /* css/characteristics/accent.css */
@@ -776,7 +812,9 @@
776
812
  --salt-accent-background: var(--salt-palette-accent-background);
777
813
  --salt-accent-background-disabled: var(--salt-palette-accent-background-disabled);
778
814
  --salt-accent-borderColor: var(--salt-palette-accent-border);
815
+ --salt-accent-borderColor-disabled: var(--salt-palette-accent-border-disabled);
779
816
  --salt-accent-foreground: var(--salt-palette-accent-foreground);
817
+ --salt-accent-foreground-disabled: var(--salt-palette-accent-foreground-disabled);
780
818
  --salt-accent-fontWeight: var(--salt-typography-fontWeight-semiBold);
781
819
  }
782
820
 
@@ -887,12 +925,12 @@
887
925
  --salt-editable-secondary-background-disabled: var(--salt-palette-neutral-secondary-background-disabled);
888
926
  --salt-editable-secondary-background-hover: var(--salt-palette-neutral-secondary-background);
889
927
  --salt-editable-secondary-background-readonly: var(--salt-palette-neutral-secondary-background-readonly);
928
+ --salt-editable-help-fontStyle: italic;
890
929
  --salt-editable-tertiary-background: var(--salt-palette-neutral-tertiary-background);
891
930
  --salt-editable-tertiary-background-active: var(--salt-palette-neutral-tertiary-background);
892
931
  --salt-editable-tertiary-background-disabled: var(--salt-palette-neutral-tertiary-background-disabled);
893
932
  --salt-editable-tertiary-background-hover: var(--salt-palette-neutral-tertiary-background);
894
933
  --salt-editable-tertiary-background-readonly: var(--salt-palette-neutral-tertiary-background-readonly);
895
- --salt-editable-help-fontStyle: italic;
896
934
  }
897
935
 
898
936
  /* css/characteristics/focused.css */
@@ -1070,13 +1108,17 @@
1070
1108
  --salt-status-success-borderColor-disabled: var(--salt-palette-success-border-disabled);
1071
1109
  --salt-status-warning-borderColor-disabled: var(--salt-palette-warning-border-disabled);
1072
1110
  --salt-status-error-borderColor-disabled: var(--salt-palette-error-border-disabled);
1073
- --salt-status-info-background-emphasize: var(--salt-palette-info-background-emphasize);
1074
- --salt-status-success-background-emphasize: var(--salt-palette-success-background-emphasize);
1075
- --salt-status-warning-background-emphasize: var(--salt-palette-warning-background-emphasize);
1076
- --salt-status-error-background-emphasize: var(--salt-palette-error-background-emphasize);
1111
+ --salt-status-info-background: var(--salt-palette-info-background);
1112
+ --salt-status-success-background: var(--salt-palette-success-background);
1113
+ --salt-status-warning-background: var(--salt-palette-warning-background);
1114
+ --salt-status-error-background: var(--salt-palette-error-background);
1077
1115
  --salt-status-success-background-selected: var(--salt-palette-success-background-selected);
1078
1116
  --salt-status-warning-background-selected: var(--salt-palette-warning-background-selected);
1079
1117
  --salt-status-error-background-selected: var(--salt-palette-error-background-selected);
1118
+ --salt-status-info-background-emphasize: var(--salt-status-info-background);
1119
+ --salt-status-success-background-emphasize: var(--salt-status-success-background);
1120
+ --salt-status-warning-background-emphasize: var(--salt-status-warning-background);
1121
+ --salt-status-error-background-emphasize: var(--salt-status-error-background);
1080
1122
  }
1081
1123
 
1082
1124
  /* css/characteristics/taggable.css */
@@ -1105,27 +1147,35 @@
1105
1147
  --salt-text-fontWeight: var(--salt-typography-fontWeight-regular);
1106
1148
  --salt-text-fontWeight-small: var(--salt-typography-fontWeight-light);
1107
1149
  --salt-text-fontWeight-strong: var(--salt-typography-fontWeight-semiBold);
1150
+ --salt-text-h1-fontFamily: var(--salt-typography-fontFamily);
1108
1151
  --salt-text-h1-fontWeight: var(--salt-typography-fontWeight-bold);
1109
1152
  --salt-text-h1-fontWeight-small: var(--salt-typography-fontWeight-medium);
1110
1153
  --salt-text-h1-fontWeight-strong: var(--salt-typography-fontWeight-extraBold);
1154
+ --salt-text-h2-fontFamily: var(--salt-typography-fontFamily);
1111
1155
  --salt-text-h2-fontWeight: var(--salt-typography-fontWeight-semiBold);
1112
1156
  --salt-text-h2-fontWeight-small: var(--salt-typography-fontWeight-regular);
1113
1157
  --salt-text-h2-fontWeight-strong: var(--salt-typography-fontWeight-bold);
1158
+ --salt-text-h3-fontFamily: var(--salt-typography-fontFamily);
1114
1159
  --salt-text-h3-fontWeight: var(--salt-typography-fontWeight-semiBold);
1115
1160
  --salt-text-h3-fontWeight-small: var(--salt-typography-fontWeight-regular);
1116
1161
  --salt-text-h3-fontWeight-strong: var(--salt-typography-fontWeight-bold);
1162
+ --salt-text-h4-fontFamily: var(--salt-typography-fontFamily);
1117
1163
  --salt-text-h4-fontWeight: var(--salt-typography-fontWeight-semiBold);
1118
1164
  --salt-text-h4-fontWeight-small: var(--salt-typography-fontWeight-regular);
1119
1165
  --salt-text-h4-fontWeight-strong: var(--salt-typography-fontWeight-bold);
1166
+ --salt-text-label-fontFamily: var(--salt-typography-fontFamily);
1120
1167
  --salt-text-label-fontWeight: var(--salt-typography-fontWeight-regular);
1121
1168
  --salt-text-label-fontWeight-small: var(--salt-typography-fontWeight-light);
1122
1169
  --salt-text-label-fontWeight-strong: var(--salt-typography-fontWeight-semiBold);
1170
+ --salt-text-display1-fontFamily: var(--salt-typography-fontFamily);
1123
1171
  --salt-text-display1-fontWeight: var(--salt-typography-fontWeight-semiBold);
1124
1172
  --salt-text-display1-fontWeight-strong: var(--salt-typography-fontWeight-bold);
1125
1173
  --salt-text-display1-fontWeight-small: var(--salt-typography-fontWeight-regular);
1174
+ --salt-text-display2-fontFamily: var(--salt-typography-fontFamily);
1126
1175
  --salt-text-display2-fontWeight: var(--salt-typography-fontWeight-semiBold);
1127
1176
  --salt-text-display2-fontWeight-strong: var(--salt-typography-fontWeight-bold);
1128
1177
  --salt-text-display2-fontWeight-small: var(--salt-typography-fontWeight-regular);
1178
+ --salt-text-display3-fontFamily: var(--salt-typography-fontFamily);
1129
1179
  --salt-text-display3-fontWeight: var(--salt-typography-fontWeight-semiBold);
1130
1180
  --salt-text-display3-fontWeight-strong: var(--salt-typography-fontWeight-bold);
1131
1181
  --salt-text-display3-fontWeight-small: var(--salt-typography-fontWeight-regular);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@salt-ds/theme",
3
- "version": "1.2.0",
3
+ "version": "1.4.0",
4
4
  "license": "Apache-2.0",
5
5
  "style": "index.css",
6
6
  "files": [