@salt-ds/theme 1.13.1 → 1.15.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 +1 -1
  2. package/css/theme.css +26 -17
  3. package/index.css +27 -18
  4. 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.css CHANGED
@@ -361,7 +361,7 @@
361
361
  --salt-size-base: 20px;
362
362
  --salt-size-border: 1px;
363
363
  --salt-size-icon: 10px;
364
- --salt-size-indicator: 1px;
364
+ --salt-size-indicator: 2px;
365
365
  --salt-size-selectable: 12px;
366
366
  --salt-size-bar-strong: 4px;
367
367
  --salt-size-bar-small: 2px;
@@ -373,7 +373,7 @@
373
373
  --salt-size-base: 28px;
374
374
  --salt-size-border: 1px;
375
375
  --salt-size-icon: 12px;
376
- --salt-size-indicator: 2px;
376
+ --salt-size-indicator: 3px;
377
377
  --salt-size-selectable: 14px;
378
378
  --salt-size-bar-strong: 8px;
379
379
  --salt-size-bar-small: 2px;
@@ -385,7 +385,7 @@
385
385
  --salt-size-base: 36px;
386
386
  --salt-size-border: 1px;
387
387
  --salt-size-icon: 14px;
388
- --salt-size-indicator: 3px;
388
+ --salt-size-indicator: 4px;
389
389
  --salt-size-selectable: 16px;
390
390
  --salt-size-bar-strong: 12px;
391
391
  --salt-size-bar-small: 2px;
@@ -397,7 +397,7 @@
397
397
  --salt-size-base: 44px;
398
398
  --salt-size-border: 1px;
399
399
  --salt-size-icon: 16px;
400
- --salt-size-indicator: 4px;
400
+ --salt-size-indicator: 5px;
401
401
  --salt-size-selectable: 18px;
402
402
  --salt-size-bar-strong: 16px;
403
403
  --salt-size-bar-small: 2px;
@@ -434,8 +434,8 @@
434
434
 
435
435
  /* css/foundations/typography.css */
436
436
  .salt-theme {
437
- --salt-typography-fontFamily: "Open Sans";
438
- --salt-typography-fontFamily-code: "PT Mono";
437
+ --salt-typography-fontFamily-openSans: "Open Sans";
438
+ --salt-typography-fontFamily-ptMono: "PT Mono";
439
439
  --salt-typography-fontWeight-light: 300;
440
440
  --salt-typography-fontWeight-regular: 400;
441
441
  --salt-typography-fontWeight-medium: 500;
@@ -689,6 +689,13 @@
689
689
  --salt-palette-success-foreground: var(--salt-color-green-400);
690
690
  }
691
691
 
692
+ /* css/palette/text.css */
693
+ .salt-theme {
694
+ --salt-palette-text-fontFamily: var(--salt-typography-fontFamily-openSans);
695
+ --salt-palette-text-fontFamily-heading: var(--salt-typography-fontFamily-openSans);
696
+ --salt-palette-text-fontFamily-code: var(--salt-typography-fontFamily-ptMono);
697
+ }
698
+
692
699
  /* css/palette/warning.css */
693
700
  .salt-theme[data-mode=light] {
694
701
  --salt-palette-warning-background: var(--salt-color-orange-10);
@@ -926,47 +933,47 @@
926
933
  --salt-text-action-textTransform: uppercase;
927
934
  --salt-text-action-textAlign: center;
928
935
  --salt-text-action-fontWeight: var(--salt-typography-fontWeight-semiBold);
929
- --salt-text-fontFamily: var(--salt-typography-fontFamily);
936
+ --salt-text-fontFamily: var(--salt-palette-text-fontFamily);
930
937
  --salt-text-fontWeight: var(--salt-typography-fontWeight-regular);
931
938
  --salt-text-fontWeight-small: var(--salt-typography-fontWeight-light);
932
939
  --salt-text-fontWeight-strong: var(--salt-typography-fontWeight-semiBold);
933
- --salt-text-notation-fontFamily: var(--salt-typography-fontFamily);
940
+ --salt-text-notation-fontFamily: var(--salt-palette-text-fontFamily);
934
941
  --salt-text-notation-fontWeight: var(--salt-typography-fontWeight-semiBold);
935
942
  --salt-text-notation-fontWeight-small: var(--salt-typography-fontWeight-regular);
936
943
  --salt-text-notation-fontWeight-strong: var(--salt-typography-fontWeight-bold);
937
- --salt-text-h1-fontFamily: var(--salt-typography-fontFamily);
944
+ --salt-text-h1-fontFamily: var(--salt-palette-text-fontFamily-heading);
938
945
  --salt-text-h1-fontWeight: var(--salt-typography-fontWeight-bold);
939
946
  --salt-text-h1-fontWeight-small: var(--salt-typography-fontWeight-medium);
940
947
  --salt-text-h1-fontWeight-strong: var(--salt-typography-fontWeight-extraBold);
941
- --salt-text-h2-fontFamily: var(--salt-typography-fontFamily);
948
+ --salt-text-h2-fontFamily: var(--salt-palette-text-fontFamily-heading);
942
949
  --salt-text-h2-fontWeight: var(--salt-typography-fontWeight-semiBold);
943
950
  --salt-text-h2-fontWeight-small: var(--salt-typography-fontWeight-regular);
944
951
  --salt-text-h2-fontWeight-strong: var(--salt-typography-fontWeight-bold);
945
- --salt-text-h3-fontFamily: var(--salt-typography-fontFamily);
952
+ --salt-text-h3-fontFamily: var(--salt-palette-text-fontFamily-heading);
946
953
  --salt-text-h3-fontWeight: var(--salt-typography-fontWeight-semiBold);
947
954
  --salt-text-h3-fontWeight-small: var(--salt-typography-fontWeight-regular);
948
955
  --salt-text-h3-fontWeight-strong: var(--salt-typography-fontWeight-bold);
949
- --salt-text-h4-fontFamily: var(--salt-typography-fontFamily);
956
+ --salt-text-h4-fontFamily: var(--salt-palette-text-fontFamily-heading);
950
957
  --salt-text-h4-fontWeight: var(--salt-typography-fontWeight-semiBold);
951
958
  --salt-text-h4-fontWeight-small: var(--salt-typography-fontWeight-regular);
952
959
  --salt-text-h4-fontWeight-strong: var(--salt-typography-fontWeight-bold);
953
- --salt-text-label-fontFamily: var(--salt-typography-fontFamily);
960
+ --salt-text-label-fontFamily: var(--salt-palette-text-fontFamily);
954
961
  --salt-text-label-fontWeight: var(--salt-typography-fontWeight-regular);
955
962
  --salt-text-label-fontWeight-small: var(--salt-typography-fontWeight-light);
956
963
  --salt-text-label-fontWeight-strong: var(--salt-typography-fontWeight-semiBold);
957
- --salt-text-display1-fontFamily: var(--salt-typography-fontFamily);
964
+ --salt-text-display1-fontFamily: var(--salt-palette-text-fontFamily-heading);
958
965
  --salt-text-display1-fontWeight: var(--salt-typography-fontWeight-semiBold);
959
966
  --salt-text-display1-fontWeight-strong: var(--salt-typography-fontWeight-bold);
960
967
  --salt-text-display1-fontWeight-small: var(--salt-typography-fontWeight-regular);
961
- --salt-text-display2-fontFamily: var(--salt-typography-fontFamily);
968
+ --salt-text-display2-fontFamily: var(--salt-palette-text-fontFamily-heading);
962
969
  --salt-text-display2-fontWeight: var(--salt-typography-fontWeight-semiBold);
963
970
  --salt-text-display2-fontWeight-strong: var(--salt-typography-fontWeight-bold);
964
971
  --salt-text-display2-fontWeight-small: var(--salt-typography-fontWeight-regular);
965
- --salt-text-display3-fontFamily: var(--salt-typography-fontFamily);
972
+ --salt-text-display3-fontFamily: var(--salt-palette-text-fontFamily-heading);
966
973
  --salt-text-display3-fontWeight: var(--salt-typography-fontWeight-semiBold);
967
974
  --salt-text-display3-fontWeight-strong: var(--salt-typography-fontWeight-bold);
968
975
  --salt-text-display3-fontWeight-small: var(--salt-typography-fontWeight-regular);
969
- --salt-text-code-fontFamily: var(--salt-typography-fontFamily-code);
976
+ --salt-text-code-fontFamily: var(--salt-palette-text-fontFamily-code);
970
977
  }
971
978
  .salt-density-touch {
972
979
  --salt-text-h1-fontSize: 42px;
@@ -1262,6 +1269,8 @@
1262
1269
  --salt-shadow-3: 0 4px 8px 0 var(--salt-shadow-3-color);
1263
1270
  --salt-shadow-4: 0 6px 10px 0 var(--salt-shadow-4-color);
1264
1271
  --salt-shadow-5: 0 12px 40px 0 var(--salt-shadow-5-color);
1272
+ --salt-typography-fontFamily: var(--salt-typography-fontFamily-openSans);
1273
+ --salt-typography-fontFamily-code: var(--salt-typography-fontFamily-ptMono);
1265
1274
  }
1266
1275
  .salt-theme[data-mode=light] {
1267
1276
  --salt-shadow-1-color: rgba(0, 0, 0, 0.1);
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);
@@ -390,7 +390,7 @@
390
390
  --salt-size-base: 20px;
391
391
  --salt-size-border: 1px;
392
392
  --salt-size-icon: 10px;
393
- --salt-size-indicator: 1px;
393
+ --salt-size-indicator: 2px;
394
394
  --salt-size-selectable: 12px;
395
395
  --salt-size-bar-strong: 4px;
396
396
  --salt-size-bar-small: 2px;
@@ -402,7 +402,7 @@
402
402
  --salt-size-base: 28px;
403
403
  --salt-size-border: 1px;
404
404
  --salt-size-icon: 12px;
405
- --salt-size-indicator: 2px;
405
+ --salt-size-indicator: 3px;
406
406
  --salt-size-selectable: 14px;
407
407
  --salt-size-bar-strong: 8px;
408
408
  --salt-size-bar-small: 2px;
@@ -414,7 +414,7 @@
414
414
  --salt-size-base: 36px;
415
415
  --salt-size-border: 1px;
416
416
  --salt-size-icon: 14px;
417
- --salt-size-indicator: 3px;
417
+ --salt-size-indicator: 4px;
418
418
  --salt-size-selectable: 16px;
419
419
  --salt-size-bar-strong: 12px;
420
420
  --salt-size-bar-small: 2px;
@@ -426,7 +426,7 @@
426
426
  --salt-size-base: 44px;
427
427
  --salt-size-border: 1px;
428
428
  --salt-size-icon: 16px;
429
- --salt-size-indicator: 4px;
429
+ --salt-size-indicator: 5px;
430
430
  --salt-size-selectable: 18px;
431
431
  --salt-size-bar-strong: 16px;
432
432
  --salt-size-bar-small: 2px;
@@ -463,8 +463,8 @@
463
463
 
464
464
  /* css/foundations/typography.css */
465
465
  .salt-theme {
466
- --salt-typography-fontFamily: "Open Sans";
467
- --salt-typography-fontFamily-code: "PT Mono";
466
+ --salt-typography-fontFamily-openSans: "Open Sans";
467
+ --salt-typography-fontFamily-ptMono: "PT Mono";
468
468
  --salt-typography-fontWeight-light: 300;
469
469
  --salt-typography-fontWeight-regular: 400;
470
470
  --salt-typography-fontWeight-medium: 500;
@@ -718,6 +718,13 @@
718
718
  --salt-palette-success-foreground: var(--salt-color-green-400);
719
719
  }
720
720
 
721
+ /* css/palette/text.css */
722
+ .salt-theme {
723
+ --salt-palette-text-fontFamily: var(--salt-typography-fontFamily-openSans);
724
+ --salt-palette-text-fontFamily-heading: var(--salt-typography-fontFamily-openSans);
725
+ --salt-palette-text-fontFamily-code: var(--salt-typography-fontFamily-ptMono);
726
+ }
727
+
721
728
  /* css/palette/warning.css */
722
729
  .salt-theme[data-mode=light] {
723
730
  --salt-palette-warning-background: var(--salt-color-orange-10);
@@ -955,47 +962,47 @@
955
962
  --salt-text-action-textTransform: uppercase;
956
963
  --salt-text-action-textAlign: center;
957
964
  --salt-text-action-fontWeight: var(--salt-typography-fontWeight-semiBold);
958
- --salt-text-fontFamily: var(--salt-typography-fontFamily);
965
+ --salt-text-fontFamily: var(--salt-palette-text-fontFamily);
959
966
  --salt-text-fontWeight: var(--salt-typography-fontWeight-regular);
960
967
  --salt-text-fontWeight-small: var(--salt-typography-fontWeight-light);
961
968
  --salt-text-fontWeight-strong: var(--salt-typography-fontWeight-semiBold);
962
- --salt-text-notation-fontFamily: var(--salt-typography-fontFamily);
969
+ --salt-text-notation-fontFamily: var(--salt-palette-text-fontFamily);
963
970
  --salt-text-notation-fontWeight: var(--salt-typography-fontWeight-semiBold);
964
971
  --salt-text-notation-fontWeight-small: var(--salt-typography-fontWeight-regular);
965
972
  --salt-text-notation-fontWeight-strong: var(--salt-typography-fontWeight-bold);
966
- --salt-text-h1-fontFamily: var(--salt-typography-fontFamily);
973
+ --salt-text-h1-fontFamily: var(--salt-palette-text-fontFamily-heading);
967
974
  --salt-text-h1-fontWeight: var(--salt-typography-fontWeight-bold);
968
975
  --salt-text-h1-fontWeight-small: var(--salt-typography-fontWeight-medium);
969
976
  --salt-text-h1-fontWeight-strong: var(--salt-typography-fontWeight-extraBold);
970
- --salt-text-h2-fontFamily: var(--salt-typography-fontFamily);
977
+ --salt-text-h2-fontFamily: var(--salt-palette-text-fontFamily-heading);
971
978
  --salt-text-h2-fontWeight: var(--salt-typography-fontWeight-semiBold);
972
979
  --salt-text-h2-fontWeight-small: var(--salt-typography-fontWeight-regular);
973
980
  --salt-text-h2-fontWeight-strong: var(--salt-typography-fontWeight-bold);
974
- --salt-text-h3-fontFamily: var(--salt-typography-fontFamily);
981
+ --salt-text-h3-fontFamily: var(--salt-palette-text-fontFamily-heading);
975
982
  --salt-text-h3-fontWeight: var(--salt-typography-fontWeight-semiBold);
976
983
  --salt-text-h3-fontWeight-small: var(--salt-typography-fontWeight-regular);
977
984
  --salt-text-h3-fontWeight-strong: var(--salt-typography-fontWeight-bold);
978
- --salt-text-h4-fontFamily: var(--salt-typography-fontFamily);
985
+ --salt-text-h4-fontFamily: var(--salt-palette-text-fontFamily-heading);
979
986
  --salt-text-h4-fontWeight: var(--salt-typography-fontWeight-semiBold);
980
987
  --salt-text-h4-fontWeight-small: var(--salt-typography-fontWeight-regular);
981
988
  --salt-text-h4-fontWeight-strong: var(--salt-typography-fontWeight-bold);
982
- --salt-text-label-fontFamily: var(--salt-typography-fontFamily);
989
+ --salt-text-label-fontFamily: var(--salt-palette-text-fontFamily);
983
990
  --salt-text-label-fontWeight: var(--salt-typography-fontWeight-regular);
984
991
  --salt-text-label-fontWeight-small: var(--salt-typography-fontWeight-light);
985
992
  --salt-text-label-fontWeight-strong: var(--salt-typography-fontWeight-semiBold);
986
- --salt-text-display1-fontFamily: var(--salt-typography-fontFamily);
993
+ --salt-text-display1-fontFamily: var(--salt-palette-text-fontFamily-heading);
987
994
  --salt-text-display1-fontWeight: var(--salt-typography-fontWeight-semiBold);
988
995
  --salt-text-display1-fontWeight-strong: var(--salt-typography-fontWeight-bold);
989
996
  --salt-text-display1-fontWeight-small: var(--salt-typography-fontWeight-regular);
990
- --salt-text-display2-fontFamily: var(--salt-typography-fontFamily);
997
+ --salt-text-display2-fontFamily: var(--salt-palette-text-fontFamily-heading);
991
998
  --salt-text-display2-fontWeight: var(--salt-typography-fontWeight-semiBold);
992
999
  --salt-text-display2-fontWeight-strong: var(--salt-typography-fontWeight-bold);
993
1000
  --salt-text-display2-fontWeight-small: var(--salt-typography-fontWeight-regular);
994
- --salt-text-display3-fontFamily: var(--salt-typography-fontFamily);
1001
+ --salt-text-display3-fontFamily: var(--salt-palette-text-fontFamily-heading);
995
1002
  --salt-text-display3-fontWeight: var(--salt-typography-fontWeight-semiBold);
996
1003
  --salt-text-display3-fontWeight-strong: var(--salt-typography-fontWeight-bold);
997
1004
  --salt-text-display3-fontWeight-small: var(--salt-typography-fontWeight-regular);
998
- --salt-text-code-fontFamily: var(--salt-typography-fontFamily-code);
1005
+ --salt-text-code-fontFamily: var(--salt-palette-text-fontFamily-code);
999
1006
  }
1000
1007
  .salt-density-touch {
1001
1008
  --salt-text-h1-fontSize: 42px;
@@ -1291,6 +1298,8 @@
1291
1298
  --salt-shadow-3: 0 4px 8px 0 var(--salt-shadow-3-color);
1292
1299
  --salt-shadow-4: 0 6px 10px 0 var(--salt-shadow-4-color);
1293
1300
  --salt-shadow-5: 0 12px 40px 0 var(--salt-shadow-5-color);
1301
+ --salt-typography-fontFamily: var(--salt-typography-fontFamily-openSans);
1302
+ --salt-typography-fontFamily-code: var(--salt-typography-fontFamily-ptMono);
1294
1303
  }
1295
1304
  .salt-theme[data-mode=light] {
1296
1305
  --salt-shadow-1-color: rgba(0, 0, 0, 0.1);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@salt-ds/theme",
3
- "version": "1.13.1",
3
+ "version": "1.15.0",
4
4
  "license": "Apache-2.0",
5
5
  "repository": {
6
6
  "type": "git",