@salt-ds/theme 0.0.0-snapshot-20240429174546 → 0.0.0-snapshot-20240517093057

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 (5) hide show
  1. package/css/global.css +1 -1
  2. package/css/theme-next.css +8 -0
  3. package/css/theme.css +68 -33
  4. package/index.css +69 -34
  5. package/package.json +1 -1
package/css/global.css CHANGED
@@ -1,7 +1,7 @@
1
1
  /* css/global.css */
2
2
  .salt-theme {
3
3
  color: var(--salt-content-primary-foreground);
4
- font-family: var(--salt-typography-fontFamily);
4
+ font-family: var(--salt-text-fontFamily);
5
5
  font-size: var(--salt-text-fontSize);
6
6
  letter-spacing: var(--salt-text-letterSpacing);
7
7
  line-height: var(--salt-text-lineHeight);
package/css/theme-next.css CHANGED
@@ -42,4 +42,12 @@
42
42
  --salt-palette-corner-strongest: var(--salt-curve-999);
43
43
  }
44
44
 
45
+ /* css/palette/text-next.css */
46
+ .salt-theme-next.salt-theme[data-heading-font="Open Sans"] {
47
+ --salt-palette-text-fontFamily-heading: var(--salt-typography-fontFamily-openSans);
48
+ }
49
+ .salt-theme-next.salt-theme[data-heading-font=Amplitude] {
50
+ --salt-palette-text-fontFamily-heading: var(--salt-typography-fontFamily-amplitude);
51
+ }
52
+
45
53
  /* css/theme-next.css */
package/css/theme.css CHANGED
@@ -174,6 +174,7 @@
174
174
  --salt-color-orange-600: rgb(224, 101, 25);
175
175
  --salt-color-orange-700: rgb(214, 85, 19);
176
176
  --salt-color-orange-800: rgb(204, 68, 13);
177
+ --salt-color-orange-850: rgb(194, 52, 7);
177
178
  --salt-color-orange-900: rgb(54, 44, 36);
178
179
  --salt-color-green-10: rgb(209, 244, 201);
179
180
  --salt-color-green-20: rgb(184, 232, 182);
@@ -436,8 +437,9 @@
436
437
 
437
438
  /* css/foundations/typography.css */
438
439
  .salt-theme {
439
- --salt-typography-fontFamily: "Open Sans";
440
- --salt-typography-fontFamily-code: "PT Mono";
440
+ --salt-typography-fontFamily-openSans: "Open Sans";
441
+ --salt-typography-fontFamily-amplitude: "Amplitude";
442
+ --salt-typography-fontFamily-ptMono: "PT Mono";
441
443
  --salt-typography-fontWeight-light: 300;
442
444
  --salt-typography-fontWeight-regular: 400;
443
445
  --salt-typography-fontWeight-medium: 500;
@@ -479,25 +481,29 @@
479
481
  --salt-palette-error-background: var(--salt-color-red-10);
480
482
  --salt-palette-error-background-selected: var(--salt-color-red-20);
481
483
  --salt-palette-error-border: var(--salt-color-red-500);
482
- --salt-palette-error-foreground: var(--salt-color-red-500);
484
+ --salt-palette-error-foreground-decorative: var(--salt-color-red-500);
485
+ --salt-palette-error-foreground-informative: var(--salt-color-red-600);
483
486
  }
484
487
  .salt-theme[data-mode=dark] {
485
488
  --salt-palette-error-background: var(--salt-color-red-900);
486
489
  --salt-palette-error-background-selected: var(--salt-color-red-900);
487
- --salt-palette-error-border: var(--salt-color-red-500);
488
- --salt-palette-error-foreground: var(--salt-color-red-500);
490
+ --salt-palette-error-border: var(--salt-color-red-400);
491
+ --salt-palette-error-foreground-decorative: var(--salt-color-red-400);
492
+ --salt-palette-error-foreground-informative: var(--salt-color-red-200);
489
493
  }
490
494
 
491
495
  /* css/palette/info.css */
492
496
  .salt-theme[data-mode=light] {
493
497
  --salt-palette-info-background: var(--salt-color-blue-10);
494
498
  --salt-palette-info-border: var(--salt-color-blue-500);
495
- --salt-palette-info-foreground: var(--salt-color-blue-500);
499
+ --salt-palette-info-foreground-decorative: var(--salt-color-blue-500);
500
+ --salt-palette-info-foreground-informative: var(--salt-color-blue-600);
496
501
  }
497
502
  .salt-theme[data-mode=dark] {
498
503
  --salt-palette-info-background: var(--salt-color-blue-900);
499
- --salt-palette-info-border: var(--salt-color-blue-500);
500
- --salt-palette-info-foreground: var(--salt-color-blue-500);
504
+ --salt-palette-info-border: var(--salt-color-blue-400);
505
+ --salt-palette-info-foreground-decorative: var(--salt-color-blue-400);
506
+ --salt-palette-info-foreground-informative: var(--salt-color-blue-200);
501
507
  }
502
508
 
503
509
  /* css/palette/interact.css */
@@ -684,13 +690,22 @@
684
690
  --salt-palette-success-background: var(--salt-color-green-10);
685
691
  --salt-palette-success-background-selected: var(--salt-color-green-20);
686
692
  --salt-palette-success-border: var(--salt-color-green-500);
687
- --salt-palette-success-foreground: var(--salt-color-green-500);
693
+ --salt-palette-success-foreground-decorative: var(--salt-color-green-500);
694
+ --salt-palette-success-foreground-informative: var(--salt-color-green-600);
688
695
  }
689
696
  .salt-theme[data-mode=dark] {
690
697
  --salt-palette-success-background: var(--salt-color-green-900);
691
698
  --salt-palette-success-background-selected: var(--salt-color-green-900);
692
699
  --salt-palette-success-border: var(--salt-color-green-400);
693
- --salt-palette-success-foreground: var(--salt-color-green-400);
700
+ --salt-palette-success-foreground-decorative: var(--salt-color-green-400);
701
+ --salt-palette-success-foreground-informative: var(--salt-color-green-200);
702
+ }
703
+
704
+ /* css/palette/text.css */
705
+ .salt-theme {
706
+ --salt-palette-text-fontFamily: var(--salt-typography-fontFamily-openSans);
707
+ --salt-palette-text-fontFamily-heading: var(--salt-typography-fontFamily-openSans);
708
+ --salt-palette-text-fontFamily-code: var(--salt-typography-fontFamily-ptMono);
694
709
  }
695
710
 
696
711
  /* css/palette/warning.css */
@@ -698,13 +713,15 @@
698
713
  --salt-palette-warning-background: var(--salt-color-orange-10);
699
714
  --salt-palette-warning-background-selected: var(--salt-color-orange-20);
700
715
  --salt-palette-warning-border: var(--salt-color-orange-700);
701
- --salt-palette-warning-foreground: var(--salt-color-orange-700);
716
+ --salt-palette-warning-foreground-decorative: var(--salt-color-orange-700);
717
+ --salt-palette-warning-foreground-informative: var(--salt-color-orange-850);
702
718
  }
703
719
  .salt-theme[data-mode=dark] {
704
720
  --salt-palette-warning-background: var(--salt-color-orange-900);
705
721
  --salt-palette-warning-background-selected: var(--salt-color-orange-900);
706
722
  --salt-palette-warning-border: var(--salt-color-orange-500);
707
- --salt-palette-warning-foreground: var(--salt-color-orange-500);
723
+ --salt-palette-warning-foreground-decorative: var(--salt-color-orange-500);
724
+ --salt-palette-warning-foreground-informative: var(--salt-color-orange-400);
708
725
  }
709
726
 
710
727
  /* css/characteristics/accent.css */
@@ -900,24 +917,28 @@
900
917
 
901
918
  /* css/characteristics/status.css */
902
919
  .salt-theme {
903
- --salt-status-info-foreground: var(--salt-palette-info-foreground);
904
- --salt-status-success-foreground: var(--salt-palette-success-foreground);
905
- --salt-status-warning-foreground: var(--salt-palette-warning-foreground);
906
- --salt-status-error-foreground: var(--salt-palette-error-foreground);
907
920
  --salt-status-static-foreground: var(--salt-palette-neutral-secondary-foreground);
908
921
  --salt-status-negative-foreground: var(--salt-palette-negative-foreground);
909
922
  --salt-status-positive-foreground: var(--salt-palette-positive-foreground);
923
+ --salt-status-info-foreground-decorative: var(--salt-palette-info-foreground-decorative);
924
+ --salt-status-error-foreground-decorative: var(--salt-palette-error-foreground-decorative);
925
+ --salt-status-warning-foreground-decorative: var(--salt-palette-warning-foreground-decorative);
926
+ --salt-status-success-foreground-decorative: var(--salt-palette-success-foreground-decorative);
927
+ --salt-status-info-foreground-informative: var(--salt-palette-info-foreground-informative);
928
+ --salt-status-error-foreground-informative: var(--salt-palette-error-foreground-informative);
929
+ --salt-status-warning-foreground-informative: var(--salt-palette-warning-foreground-informative);
930
+ --salt-status-success-foreground-informative: var(--salt-palette-success-foreground-informative);
910
931
  --salt-status-info-borderColor: var(--salt-palette-info-border);
911
- --salt-status-success-borderColor: var(--salt-palette-success-border);
912
- --salt-status-warning-borderColor: var(--salt-palette-warning-border);
913
932
  --salt-status-error-borderColor: var(--salt-palette-error-border);
933
+ --salt-status-warning-borderColor: var(--salt-palette-warning-border);
934
+ --salt-status-success-borderColor: var(--salt-palette-success-border);
914
935
  --salt-status-info-background: var(--salt-palette-info-background);
915
- --salt-status-success-background: var(--salt-palette-success-background);
916
- --salt-status-warning-background: var(--salt-palette-warning-background);
917
936
  --salt-status-error-background: var(--salt-palette-error-background);
918
- --salt-status-success-background-selected: var(--salt-palette-success-background-selected);
919
- --salt-status-warning-background-selected: var(--salt-palette-warning-background-selected);
937
+ --salt-status-warning-background: var(--salt-palette-warning-background);
938
+ --salt-status-success-background: var(--salt-palette-success-background);
920
939
  --salt-status-error-background-selected: var(--salt-palette-error-background-selected);
940
+ --salt-status-warning-background-selected: var(--salt-palette-warning-background-selected);
941
+ --salt-status-success-background-selected: var(--salt-palette-success-background-selected);
921
942
  }
922
943
 
923
944
  /* css/characteristics/text.css */
@@ -931,47 +952,47 @@
931
952
  --salt-text-action-textTransform: uppercase;
932
953
  --salt-text-action-textAlign: center;
933
954
  --salt-text-action-fontWeight: var(--salt-typography-fontWeight-semiBold);
934
- --salt-text-fontFamily: var(--salt-typography-fontFamily);
955
+ --salt-text-fontFamily: var(--salt-palette-text-fontFamily);
935
956
  --salt-text-fontWeight: var(--salt-typography-fontWeight-regular);
936
957
  --salt-text-fontWeight-small: var(--salt-typography-fontWeight-light);
937
958
  --salt-text-fontWeight-strong: var(--salt-typography-fontWeight-semiBold);
938
- --salt-text-notation-fontFamily: var(--salt-typography-fontFamily);
959
+ --salt-text-notation-fontFamily: var(--salt-palette-text-fontFamily);
939
960
  --salt-text-notation-fontWeight: var(--salt-typography-fontWeight-semiBold);
940
961
  --salt-text-notation-fontWeight-small: var(--salt-typography-fontWeight-regular);
941
962
  --salt-text-notation-fontWeight-strong: var(--salt-typography-fontWeight-bold);
942
- --salt-text-h1-fontFamily: var(--salt-typography-fontFamily);
963
+ --salt-text-h1-fontFamily: var(--salt-palette-text-fontFamily-heading);
943
964
  --salt-text-h1-fontWeight: var(--salt-typography-fontWeight-bold);
944
965
  --salt-text-h1-fontWeight-small: var(--salt-typography-fontWeight-medium);
945
966
  --salt-text-h1-fontWeight-strong: var(--salt-typography-fontWeight-extraBold);
946
- --salt-text-h2-fontFamily: var(--salt-typography-fontFamily);
967
+ --salt-text-h2-fontFamily: var(--salt-palette-text-fontFamily-heading);
947
968
  --salt-text-h2-fontWeight: var(--salt-typography-fontWeight-semiBold);
948
969
  --salt-text-h2-fontWeight-small: var(--salt-typography-fontWeight-regular);
949
970
  --salt-text-h2-fontWeight-strong: var(--salt-typography-fontWeight-bold);
950
- --salt-text-h3-fontFamily: var(--salt-typography-fontFamily);
971
+ --salt-text-h3-fontFamily: var(--salt-palette-text-fontFamily-heading);
951
972
  --salt-text-h3-fontWeight: var(--salt-typography-fontWeight-semiBold);
952
973
  --salt-text-h3-fontWeight-small: var(--salt-typography-fontWeight-regular);
953
974
  --salt-text-h3-fontWeight-strong: var(--salt-typography-fontWeight-bold);
954
- --salt-text-h4-fontFamily: var(--salt-typography-fontFamily);
975
+ --salt-text-h4-fontFamily: var(--salt-palette-text-fontFamily-heading);
955
976
  --salt-text-h4-fontWeight: var(--salt-typography-fontWeight-semiBold);
956
977
  --salt-text-h4-fontWeight-small: var(--salt-typography-fontWeight-regular);
957
978
  --salt-text-h4-fontWeight-strong: var(--salt-typography-fontWeight-bold);
958
- --salt-text-label-fontFamily: var(--salt-typography-fontFamily);
979
+ --salt-text-label-fontFamily: var(--salt-palette-text-fontFamily);
959
980
  --salt-text-label-fontWeight: var(--salt-typography-fontWeight-regular);
960
981
  --salt-text-label-fontWeight-small: var(--salt-typography-fontWeight-light);
961
982
  --salt-text-label-fontWeight-strong: var(--salt-typography-fontWeight-semiBold);
962
- --salt-text-display1-fontFamily: var(--salt-typography-fontFamily);
983
+ --salt-text-display1-fontFamily: var(--salt-palette-text-fontFamily-heading);
963
984
  --salt-text-display1-fontWeight: var(--salt-typography-fontWeight-semiBold);
964
985
  --salt-text-display1-fontWeight-strong: var(--salt-typography-fontWeight-bold);
965
986
  --salt-text-display1-fontWeight-small: var(--salt-typography-fontWeight-regular);
966
- --salt-text-display2-fontFamily: var(--salt-typography-fontFamily);
987
+ --salt-text-display2-fontFamily: var(--salt-palette-text-fontFamily-heading);
967
988
  --salt-text-display2-fontWeight: var(--salt-typography-fontWeight-semiBold);
968
989
  --salt-text-display2-fontWeight-strong: var(--salt-typography-fontWeight-bold);
969
990
  --salt-text-display2-fontWeight-small: var(--salt-typography-fontWeight-regular);
970
- --salt-text-display3-fontFamily: var(--salt-typography-fontFamily);
991
+ --salt-text-display3-fontFamily: var(--salt-palette-text-fontFamily-heading);
971
992
  --salt-text-display3-fontWeight: var(--salt-typography-fontWeight-semiBold);
972
993
  --salt-text-display3-fontWeight-strong: var(--salt-typography-fontWeight-bold);
973
994
  --salt-text-display3-fontWeight-small: var(--salt-typography-fontWeight-regular);
974
- --salt-text-code-fontFamily: var(--salt-typography-fontFamily-code);
995
+ --salt-text-code-fontFamily: var(--salt-palette-text-fontFamily-code);
975
996
  }
976
997
  .salt-density-touch {
977
998
  --salt-text-h1-fontSize: 42px;
@@ -1167,6 +1188,10 @@
1167
1188
  --salt-status-success-borderColor-disabled: var(--salt-palette-success-border-disabled);
1168
1189
  --salt-status-warning-borderColor-disabled: var(--salt-palette-warning-border-disabled);
1169
1190
  --salt-status-error-borderColor-disabled: var(--salt-palette-error-border-disabled);
1191
+ --salt-status-info-foreground: var(--salt-palette-info-foreground);
1192
+ --salt-status-error-foreground: var(--salt-palette-error-foreground);
1193
+ --salt-status-warning-foreground: var(--salt-palette-warning-foreground);
1194
+ --salt-status-success-foreground: var(--salt-palette-success-foreground);
1170
1195
  --salt-actionable-letterSpacing: 0.6px;
1171
1196
  --salt-actionable-textTransform: uppercase;
1172
1197
  --salt-actionable-textAlign: center;
@@ -1267,6 +1292,8 @@
1267
1292
  --salt-shadow-3: 0 4px 8px 0 var(--salt-shadow-3-color);
1268
1293
  --salt-shadow-4: 0 6px 10px 0 var(--salt-shadow-4-color);
1269
1294
  --salt-shadow-5: 0 12px 40px 0 var(--salt-shadow-5-color);
1295
+ --salt-typography-fontFamily: var(--salt-typography-fontFamily-openSans);
1296
+ --salt-typography-fontFamily-code: var(--salt-typography-fontFamily-ptMono);
1270
1297
  }
1271
1298
  .salt-theme[data-mode=light] {
1272
1299
  --salt-shadow-1-color: rgba(0, 0, 0, 0.1);
@@ -1372,14 +1399,18 @@
1372
1399
  --salt-palette-neutral-tertiary-border-disabled: transparent;
1373
1400
  --salt-palette-error-foreground-disabled: var(--salt-color-red-500-fade-foreground);
1374
1401
  --salt-palette-error-border-disabled: var(--salt-color-red-500-fade-border);
1402
+ --salt-palette-error-foreground: var(--salt-color-red-500);
1375
1403
  --salt-palette-info-border-disabled: var(--salt-color-blue-500-fade-border);
1376
1404
  --salt-palette-info-foreground-disabled: var(--salt-color-blue-500-fade-foreground);
1405
+ --salt-palette-info-foreground: var(--salt-color-blue-500);
1377
1406
  --salt-palette-negative-foreground-disabled: var(--salt-color-red-700-fade-foreground);
1378
1407
  --salt-palette-positive-foreground-disabled: var(--salt-color-green-700-fade-foreground);
1379
1408
  --salt-palette-success-border-disabled: var(--salt-color-green-500-fade-border);
1380
1409
  --salt-palette-success-foreground-disabled: var(--salt-color-green-500-fade-foreground);
1410
+ --salt-palette-success-foreground: var(--salt-color-green-500);
1381
1411
  --salt-palette-warning-foreground-disabled: var(--salt-color-orange-700-fade-foreground);
1382
1412
  --salt-palette-warning-border-disabled: var(--salt-color-orange-700-fade-border);
1413
+ --salt-palette-warning-foreground: var(--salt-color-orange-700);
1383
1414
  --salt-palette-navigate-primary-background: transparent;
1384
1415
  --salt-palette-navigate-primary-background-active: transparent;
1385
1416
  --salt-palette-navigate-primary-background-hover: var(--salt-color-gray-20);
@@ -1424,14 +1455,18 @@
1424
1455
  --salt-palette-neutral-tertiary-border-disabled: transparent;
1425
1456
  --salt-palette-error-foreground-disabled: var(--salt-color-red-500-fade-foreground);
1426
1457
  --salt-palette-error-border-disabled: var(--salt-color-red-500-fade-border);
1458
+ --salt-palette-error-foreground: var(--salt-color-red-500);
1427
1459
  --salt-palette-info-border-disabled: var(--salt-color-blue-500-fade-border);
1428
1460
  --salt-palette-info-foreground-disabled: var(--salt-color-blue-500-fade-foreground);
1461
+ --salt-palette-info-foreground: var(--salt-color-blue-500);
1429
1462
  --salt-palette-negative-foreground-disabled: var(--salt-color-red-300-fade-foreground);
1430
1463
  --salt-palette-positive-foreground-disabled: var(--salt-color-green-300-fade-foreground);
1431
1464
  --salt-palette-success-border-disabled: var(--salt-color-green-400-fade-border);
1432
1465
  --salt-palette-success-foreground-disabled: var(--salt-color-green-400-fade-foreground);
1466
+ --salt-palette-success-foreground: var(--salt-color-green-400);
1433
1467
  --salt-palette-warning-foreground-disabled: var(--salt-color-orange-500-fade-foreground);
1434
1468
  --salt-palette-warning-border-disabled: var(--salt-color-orange-500-fade-border);
1469
+ --salt-palette-warning-foreground: var(--salt-color-orange-500);
1435
1470
  --salt-palette-navigate-primary-background: transparent;
1436
1471
  --salt-palette-navigate-primary-background-active: transparent;
1437
1472
  --salt-palette-navigate-primary-background-hover: var(--salt-color-gray-700);
package/index.css CHANGED
@@ -1,7 +1,7 @@
1
1
  /* css/global.css */
2
2
  .salt-theme {
3
3
  color: var(--salt-content-primary-foreground);
4
- font-family: var(--salt-typography-fontFamily);
4
+ font-family: var(--salt-text-fontFamily);
5
5
  font-size: var(--salt-text-fontSize);
6
6
  letter-spacing: var(--salt-text-letterSpacing);
7
7
  line-height: var(--salt-text-lineHeight);
@@ -203,6 +203,7 @@
203
203
  --salt-color-orange-600: rgb(224, 101, 25);
204
204
  --salt-color-orange-700: rgb(214, 85, 19);
205
205
  --salt-color-orange-800: rgb(204, 68, 13);
206
+ --salt-color-orange-850: rgb(194, 52, 7);
206
207
  --salt-color-orange-900: rgb(54, 44, 36);
207
208
  --salt-color-green-10: rgb(209, 244, 201);
208
209
  --salt-color-green-20: rgb(184, 232, 182);
@@ -465,8 +466,9 @@
465
466
 
466
467
  /* css/foundations/typography.css */
467
468
  .salt-theme {
468
- --salt-typography-fontFamily: "Open Sans";
469
- --salt-typography-fontFamily-code: "PT Mono";
469
+ --salt-typography-fontFamily-openSans: "Open Sans";
470
+ --salt-typography-fontFamily-amplitude: "Amplitude";
471
+ --salt-typography-fontFamily-ptMono: "PT Mono";
470
472
  --salt-typography-fontWeight-light: 300;
471
473
  --salt-typography-fontWeight-regular: 400;
472
474
  --salt-typography-fontWeight-medium: 500;
@@ -508,25 +510,29 @@
508
510
  --salt-palette-error-background: var(--salt-color-red-10);
509
511
  --salt-palette-error-background-selected: var(--salt-color-red-20);
510
512
  --salt-palette-error-border: var(--salt-color-red-500);
511
- --salt-palette-error-foreground: var(--salt-color-red-500);
513
+ --salt-palette-error-foreground-decorative: var(--salt-color-red-500);
514
+ --salt-palette-error-foreground-informative: var(--salt-color-red-600);
512
515
  }
513
516
  .salt-theme[data-mode=dark] {
514
517
  --salt-palette-error-background: var(--salt-color-red-900);
515
518
  --salt-palette-error-background-selected: var(--salt-color-red-900);
516
- --salt-palette-error-border: var(--salt-color-red-500);
517
- --salt-palette-error-foreground: var(--salt-color-red-500);
519
+ --salt-palette-error-border: var(--salt-color-red-400);
520
+ --salt-palette-error-foreground-decorative: var(--salt-color-red-400);
521
+ --salt-palette-error-foreground-informative: var(--salt-color-red-200);
518
522
  }
519
523
 
520
524
  /* css/palette/info.css */
521
525
  .salt-theme[data-mode=light] {
522
526
  --salt-palette-info-background: var(--salt-color-blue-10);
523
527
  --salt-palette-info-border: var(--salt-color-blue-500);
524
- --salt-palette-info-foreground: var(--salt-color-blue-500);
528
+ --salt-palette-info-foreground-decorative: var(--salt-color-blue-500);
529
+ --salt-palette-info-foreground-informative: var(--salt-color-blue-600);
525
530
  }
526
531
  .salt-theme[data-mode=dark] {
527
532
  --salt-palette-info-background: var(--salt-color-blue-900);
528
- --salt-palette-info-border: var(--salt-color-blue-500);
529
- --salt-palette-info-foreground: var(--salt-color-blue-500);
533
+ --salt-palette-info-border: var(--salt-color-blue-400);
534
+ --salt-palette-info-foreground-decorative: var(--salt-color-blue-400);
535
+ --salt-palette-info-foreground-informative: var(--salt-color-blue-200);
530
536
  }
531
537
 
532
538
  /* css/palette/interact.css */
@@ -713,13 +719,22 @@
713
719
  --salt-palette-success-background: var(--salt-color-green-10);
714
720
  --salt-palette-success-background-selected: var(--salt-color-green-20);
715
721
  --salt-palette-success-border: var(--salt-color-green-500);
716
- --salt-palette-success-foreground: var(--salt-color-green-500);
722
+ --salt-palette-success-foreground-decorative: var(--salt-color-green-500);
723
+ --salt-palette-success-foreground-informative: var(--salt-color-green-600);
717
724
  }
718
725
  .salt-theme[data-mode=dark] {
719
726
  --salt-palette-success-background: var(--salt-color-green-900);
720
727
  --salt-palette-success-background-selected: var(--salt-color-green-900);
721
728
  --salt-palette-success-border: var(--salt-color-green-400);
722
- --salt-palette-success-foreground: var(--salt-color-green-400);
729
+ --salt-palette-success-foreground-decorative: var(--salt-color-green-400);
730
+ --salt-palette-success-foreground-informative: var(--salt-color-green-200);
731
+ }
732
+
733
+ /* css/palette/text.css */
734
+ .salt-theme {
735
+ --salt-palette-text-fontFamily: var(--salt-typography-fontFamily-openSans);
736
+ --salt-palette-text-fontFamily-heading: var(--salt-typography-fontFamily-openSans);
737
+ --salt-palette-text-fontFamily-code: var(--salt-typography-fontFamily-ptMono);
723
738
  }
724
739
 
725
740
  /* css/palette/warning.css */
@@ -727,13 +742,15 @@
727
742
  --salt-palette-warning-background: var(--salt-color-orange-10);
728
743
  --salt-palette-warning-background-selected: var(--salt-color-orange-20);
729
744
  --salt-palette-warning-border: var(--salt-color-orange-700);
730
- --salt-palette-warning-foreground: var(--salt-color-orange-700);
745
+ --salt-palette-warning-foreground-decorative: var(--salt-color-orange-700);
746
+ --salt-palette-warning-foreground-informative: var(--salt-color-orange-850);
731
747
  }
732
748
  .salt-theme[data-mode=dark] {
733
749
  --salt-palette-warning-background: var(--salt-color-orange-900);
734
750
  --salt-palette-warning-background-selected: var(--salt-color-orange-900);
735
751
  --salt-palette-warning-border: var(--salt-color-orange-500);
736
- --salt-palette-warning-foreground: var(--salt-color-orange-500);
752
+ --salt-palette-warning-foreground-decorative: var(--salt-color-orange-500);
753
+ --salt-palette-warning-foreground-informative: var(--salt-color-orange-400);
737
754
  }
738
755
 
739
756
  /* css/characteristics/accent.css */
@@ -929,24 +946,28 @@
929
946
 
930
947
  /* css/characteristics/status.css */
931
948
  .salt-theme {
932
- --salt-status-info-foreground: var(--salt-palette-info-foreground);
933
- --salt-status-success-foreground: var(--salt-palette-success-foreground);
934
- --salt-status-warning-foreground: var(--salt-palette-warning-foreground);
935
- --salt-status-error-foreground: var(--salt-palette-error-foreground);
936
949
  --salt-status-static-foreground: var(--salt-palette-neutral-secondary-foreground);
937
950
  --salt-status-negative-foreground: var(--salt-palette-negative-foreground);
938
951
  --salt-status-positive-foreground: var(--salt-palette-positive-foreground);
952
+ --salt-status-info-foreground-decorative: var(--salt-palette-info-foreground-decorative);
953
+ --salt-status-error-foreground-decorative: var(--salt-palette-error-foreground-decorative);
954
+ --salt-status-warning-foreground-decorative: var(--salt-palette-warning-foreground-decorative);
955
+ --salt-status-success-foreground-decorative: var(--salt-palette-success-foreground-decorative);
956
+ --salt-status-info-foreground-informative: var(--salt-palette-info-foreground-informative);
957
+ --salt-status-error-foreground-informative: var(--salt-palette-error-foreground-informative);
958
+ --salt-status-warning-foreground-informative: var(--salt-palette-warning-foreground-informative);
959
+ --salt-status-success-foreground-informative: var(--salt-palette-success-foreground-informative);
939
960
  --salt-status-info-borderColor: var(--salt-palette-info-border);
940
- --salt-status-success-borderColor: var(--salt-palette-success-border);
941
- --salt-status-warning-borderColor: var(--salt-palette-warning-border);
942
961
  --salt-status-error-borderColor: var(--salt-palette-error-border);
962
+ --salt-status-warning-borderColor: var(--salt-palette-warning-border);
963
+ --salt-status-success-borderColor: var(--salt-palette-success-border);
943
964
  --salt-status-info-background: var(--salt-palette-info-background);
944
- --salt-status-success-background: var(--salt-palette-success-background);
945
- --salt-status-warning-background: var(--salt-palette-warning-background);
946
965
  --salt-status-error-background: var(--salt-palette-error-background);
947
- --salt-status-success-background-selected: var(--salt-palette-success-background-selected);
948
- --salt-status-warning-background-selected: var(--salt-palette-warning-background-selected);
966
+ --salt-status-warning-background: var(--salt-palette-warning-background);
967
+ --salt-status-success-background: var(--salt-palette-success-background);
949
968
  --salt-status-error-background-selected: var(--salt-palette-error-background-selected);
969
+ --salt-status-warning-background-selected: var(--salt-palette-warning-background-selected);
970
+ --salt-status-success-background-selected: var(--salt-palette-success-background-selected);
950
971
  }
951
972
 
952
973
  /* css/characteristics/text.css */
@@ -960,47 +981,47 @@
960
981
  --salt-text-action-textTransform: uppercase;
961
982
  --salt-text-action-textAlign: center;
962
983
  --salt-text-action-fontWeight: var(--salt-typography-fontWeight-semiBold);
963
- --salt-text-fontFamily: var(--salt-typography-fontFamily);
984
+ --salt-text-fontFamily: var(--salt-palette-text-fontFamily);
964
985
  --salt-text-fontWeight: var(--salt-typography-fontWeight-regular);
965
986
  --salt-text-fontWeight-small: var(--salt-typography-fontWeight-light);
966
987
  --salt-text-fontWeight-strong: var(--salt-typography-fontWeight-semiBold);
967
- --salt-text-notation-fontFamily: var(--salt-typography-fontFamily);
988
+ --salt-text-notation-fontFamily: var(--salt-palette-text-fontFamily);
968
989
  --salt-text-notation-fontWeight: var(--salt-typography-fontWeight-semiBold);
969
990
  --salt-text-notation-fontWeight-small: var(--salt-typography-fontWeight-regular);
970
991
  --salt-text-notation-fontWeight-strong: var(--salt-typography-fontWeight-bold);
971
- --salt-text-h1-fontFamily: var(--salt-typography-fontFamily);
992
+ --salt-text-h1-fontFamily: var(--salt-palette-text-fontFamily-heading);
972
993
  --salt-text-h1-fontWeight: var(--salt-typography-fontWeight-bold);
973
994
  --salt-text-h1-fontWeight-small: var(--salt-typography-fontWeight-medium);
974
995
  --salt-text-h1-fontWeight-strong: var(--salt-typography-fontWeight-extraBold);
975
- --salt-text-h2-fontFamily: var(--salt-typography-fontFamily);
996
+ --salt-text-h2-fontFamily: var(--salt-palette-text-fontFamily-heading);
976
997
  --salt-text-h2-fontWeight: var(--salt-typography-fontWeight-semiBold);
977
998
  --salt-text-h2-fontWeight-small: var(--salt-typography-fontWeight-regular);
978
999
  --salt-text-h2-fontWeight-strong: var(--salt-typography-fontWeight-bold);
979
- --salt-text-h3-fontFamily: var(--salt-typography-fontFamily);
1000
+ --salt-text-h3-fontFamily: var(--salt-palette-text-fontFamily-heading);
980
1001
  --salt-text-h3-fontWeight: var(--salt-typography-fontWeight-semiBold);
981
1002
  --salt-text-h3-fontWeight-small: var(--salt-typography-fontWeight-regular);
982
1003
  --salt-text-h3-fontWeight-strong: var(--salt-typography-fontWeight-bold);
983
- --salt-text-h4-fontFamily: var(--salt-typography-fontFamily);
1004
+ --salt-text-h4-fontFamily: var(--salt-palette-text-fontFamily-heading);
984
1005
  --salt-text-h4-fontWeight: var(--salt-typography-fontWeight-semiBold);
985
1006
  --salt-text-h4-fontWeight-small: var(--salt-typography-fontWeight-regular);
986
1007
  --salt-text-h4-fontWeight-strong: var(--salt-typography-fontWeight-bold);
987
- --salt-text-label-fontFamily: var(--salt-typography-fontFamily);
1008
+ --salt-text-label-fontFamily: var(--salt-palette-text-fontFamily);
988
1009
  --salt-text-label-fontWeight: var(--salt-typography-fontWeight-regular);
989
1010
  --salt-text-label-fontWeight-small: var(--salt-typography-fontWeight-light);
990
1011
  --salt-text-label-fontWeight-strong: var(--salt-typography-fontWeight-semiBold);
991
- --salt-text-display1-fontFamily: var(--salt-typography-fontFamily);
1012
+ --salt-text-display1-fontFamily: var(--salt-palette-text-fontFamily-heading);
992
1013
  --salt-text-display1-fontWeight: var(--salt-typography-fontWeight-semiBold);
993
1014
  --salt-text-display1-fontWeight-strong: var(--salt-typography-fontWeight-bold);
994
1015
  --salt-text-display1-fontWeight-small: var(--salt-typography-fontWeight-regular);
995
- --salt-text-display2-fontFamily: var(--salt-typography-fontFamily);
1016
+ --salt-text-display2-fontFamily: var(--salt-palette-text-fontFamily-heading);
996
1017
  --salt-text-display2-fontWeight: var(--salt-typography-fontWeight-semiBold);
997
1018
  --salt-text-display2-fontWeight-strong: var(--salt-typography-fontWeight-bold);
998
1019
  --salt-text-display2-fontWeight-small: var(--salt-typography-fontWeight-regular);
999
- --salt-text-display3-fontFamily: var(--salt-typography-fontFamily);
1020
+ --salt-text-display3-fontFamily: var(--salt-palette-text-fontFamily-heading);
1000
1021
  --salt-text-display3-fontWeight: var(--salt-typography-fontWeight-semiBold);
1001
1022
  --salt-text-display3-fontWeight-strong: var(--salt-typography-fontWeight-bold);
1002
1023
  --salt-text-display3-fontWeight-small: var(--salt-typography-fontWeight-regular);
1003
- --salt-text-code-fontFamily: var(--salt-typography-fontFamily-code);
1024
+ --salt-text-code-fontFamily: var(--salt-palette-text-fontFamily-code);
1004
1025
  }
1005
1026
  .salt-density-touch {
1006
1027
  --salt-text-h1-fontSize: 42px;
@@ -1196,6 +1217,10 @@
1196
1217
  --salt-status-success-borderColor-disabled: var(--salt-palette-success-border-disabled);
1197
1218
  --salt-status-warning-borderColor-disabled: var(--salt-palette-warning-border-disabled);
1198
1219
  --salt-status-error-borderColor-disabled: var(--salt-palette-error-border-disabled);
1220
+ --salt-status-info-foreground: var(--salt-palette-info-foreground);
1221
+ --salt-status-error-foreground: var(--salt-palette-error-foreground);
1222
+ --salt-status-warning-foreground: var(--salt-palette-warning-foreground);
1223
+ --salt-status-success-foreground: var(--salt-palette-success-foreground);
1199
1224
  --salt-actionable-letterSpacing: 0.6px;
1200
1225
  --salt-actionable-textTransform: uppercase;
1201
1226
  --salt-actionable-textAlign: center;
@@ -1296,6 +1321,8 @@
1296
1321
  --salt-shadow-3: 0 4px 8px 0 var(--salt-shadow-3-color);
1297
1322
  --salt-shadow-4: 0 6px 10px 0 var(--salt-shadow-4-color);
1298
1323
  --salt-shadow-5: 0 12px 40px 0 var(--salt-shadow-5-color);
1324
+ --salt-typography-fontFamily: var(--salt-typography-fontFamily-openSans);
1325
+ --salt-typography-fontFamily-code: var(--salt-typography-fontFamily-ptMono);
1299
1326
  }
1300
1327
  .salt-theme[data-mode=light] {
1301
1328
  --salt-shadow-1-color: rgba(0, 0, 0, 0.1);
@@ -1401,14 +1428,18 @@
1401
1428
  --salt-palette-neutral-tertiary-border-disabled: transparent;
1402
1429
  --salt-palette-error-foreground-disabled: var(--salt-color-red-500-fade-foreground);
1403
1430
  --salt-palette-error-border-disabled: var(--salt-color-red-500-fade-border);
1431
+ --salt-palette-error-foreground: var(--salt-color-red-500);
1404
1432
  --salt-palette-info-border-disabled: var(--salt-color-blue-500-fade-border);
1405
1433
  --salt-palette-info-foreground-disabled: var(--salt-color-blue-500-fade-foreground);
1434
+ --salt-palette-info-foreground: var(--salt-color-blue-500);
1406
1435
  --salt-palette-negative-foreground-disabled: var(--salt-color-red-700-fade-foreground);
1407
1436
  --salt-palette-positive-foreground-disabled: var(--salt-color-green-700-fade-foreground);
1408
1437
  --salt-palette-success-border-disabled: var(--salt-color-green-500-fade-border);
1409
1438
  --salt-palette-success-foreground-disabled: var(--salt-color-green-500-fade-foreground);
1439
+ --salt-palette-success-foreground: var(--salt-color-green-500);
1410
1440
  --salt-palette-warning-foreground-disabled: var(--salt-color-orange-700-fade-foreground);
1411
1441
  --salt-palette-warning-border-disabled: var(--salt-color-orange-700-fade-border);
1442
+ --salt-palette-warning-foreground: var(--salt-color-orange-700);
1412
1443
  --salt-palette-navigate-primary-background: transparent;
1413
1444
  --salt-palette-navigate-primary-background-active: transparent;
1414
1445
  --salt-palette-navigate-primary-background-hover: var(--salt-color-gray-20);
@@ -1453,14 +1484,18 @@
1453
1484
  --salt-palette-neutral-tertiary-border-disabled: transparent;
1454
1485
  --salt-palette-error-foreground-disabled: var(--salt-color-red-500-fade-foreground);
1455
1486
  --salt-palette-error-border-disabled: var(--salt-color-red-500-fade-border);
1487
+ --salt-palette-error-foreground: var(--salt-color-red-500);
1456
1488
  --salt-palette-info-border-disabled: var(--salt-color-blue-500-fade-border);
1457
1489
  --salt-palette-info-foreground-disabled: var(--salt-color-blue-500-fade-foreground);
1490
+ --salt-palette-info-foreground: var(--salt-color-blue-500);
1458
1491
  --salt-palette-negative-foreground-disabled: var(--salt-color-red-300-fade-foreground);
1459
1492
  --salt-palette-positive-foreground-disabled: var(--salt-color-green-300-fade-foreground);
1460
1493
  --salt-palette-success-border-disabled: var(--salt-color-green-400-fade-border);
1461
1494
  --salt-palette-success-foreground-disabled: var(--salt-color-green-400-fade-foreground);
1495
+ --salt-palette-success-foreground: var(--salt-color-green-400);
1462
1496
  --salt-palette-warning-foreground-disabled: var(--salt-color-orange-500-fade-foreground);
1463
1497
  --salt-palette-warning-border-disabled: var(--salt-color-orange-500-fade-border);
1498
+ --salt-palette-warning-foreground: var(--salt-color-orange-500);
1464
1499
  --salt-palette-navigate-primary-background: transparent;
1465
1500
  --salt-palette-navigate-primary-background-active: transparent;
1466
1501
  --salt-palette-navigate-primary-background-hover: var(--salt-color-gray-700);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@salt-ds/theme",
3
- "version": "0.0.0-snapshot-20240429174546",
3
+ "version": "0.0.0-snapshot-20240517093057",
4
4
  "license": "Apache-2.0",
5
5
  "repository": {
6
6
  "type": "git",