@salt-ds/theme 1.2.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.
Files changed (3) hide show
  1. package/css/theme.css +28 -4
  2. package/index.css +28 -4
  3. package/package.json +1 -1
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));
@@ -374,12 +382,14 @@
374
382
  .salt-density-medium,
375
383
  .salt-density-high {
376
384
  --salt-size-basis-unit: 4px;
385
+ --salt-size-adornmentGap: calc(0.75 * var(--salt-size-unit));
377
386
  --salt-size-border: 1px;
378
- --salt-size-sharktooth-height: 5px;
379
- --salt-size-sharktooth-width: 10px;
387
+ --salt-size-container-spacing: calc(3 * var(--salt-size-unit));
380
388
  --salt-size-separator-strokeWidth: 1px;
381
- --salt-size-separator-height: calc(var(--salt-size-compact) + 1.5 * var(--salt-size-basis-unit));
382
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;
383
393
  --salt-size-stackable: calc(var(--salt-size-base) + var(--salt-size-unit));
384
394
  --salt-size-selection: var(--salt-size-selectable);
385
395
  --salt-size-brandBar: 4px;
@@ -465,7 +475,9 @@
465
475
  --salt-palette-accent-background: var(--salt-color-blue-500);
466
476
  --salt-palette-accent-background-disabled: var(--salt-color-blue-500-fade-background);
467
477
  --salt-palette-accent-border: var(--salt-color-blue-500);
478
+ --salt-palette-accent-border-disabled: var(--salt-color-blue-500-fade-border);
468
479
  --salt-palette-accent-foreground: var(--salt-color-white);
480
+ --salt-palette-accent-foreground-disabled: var(--salt-color-white-fade-foreground);
469
481
  --salt-palette-interact-background: transparent;
470
482
  --salt-palette-interact-background-blurSelected: var(--salt-color-gray-30);
471
483
  --salt-palette-interact-background-hover: var(--salt-color-blue-10);
@@ -586,7 +598,9 @@
586
598
  --salt-palette-accent-background: var(--salt-color-blue-500);
587
599
  --salt-palette-accent-background-disabled: var(--salt-color-blue-500-fade-background);
588
600
  --salt-palette-accent-border: var(--salt-color-blue-500);
601
+ --salt-palette-accent-border-disabled: var(--salt-color-blue-500-fade-border);
589
602
  --salt-palette-accent-foreground: var(--salt-color-white);
603
+ --salt-palette-accent-foreground-disabled: var(--salt-color-white-fade-foreground);
590
604
  --salt-palette-interact-background: transparent;
591
605
  --salt-palette-interact-background-active: var(--salt-color-blue-700);
592
606
  --salt-palette-interact-background-blurSelected: var(--salt-color-gray-600);
@@ -601,7 +615,7 @@
601
615
  --salt-palette-interact-foreground: var(--salt-color-gray-90);
602
616
  --salt-palette-interact-foreground-active: var(--salt-color-blue-100);
603
617
  --salt-palette-interact-foreground-activeDisabled: var(--salt-color-blue-100-fade-foreground);
604
- --salt-palette-interact-foreground-disabled: var(--salt-color-90-fade-foreground);
618
+ --salt-palette-interact-foreground-disabled: var(--salt-color-gray-90-fade-foreground);
605
619
  --salt-palette-interact-foreground-hover: var(--salt-color-blue-500);
606
620
  --salt-palette-interact-outline: var(--salt-color-blue-100);
607
621
  --salt-palette-interact-cta-background: var(--salt-color-blue-600);
@@ -753,7 +767,9 @@
753
767
  --salt-accent-background: var(--salt-palette-accent-background);
754
768
  --salt-accent-background-disabled: var(--salt-palette-accent-background-disabled);
755
769
  --salt-accent-borderColor: var(--salt-palette-accent-border);
770
+ --salt-accent-borderColor-disabled: var(--salt-palette-accent-border-disabled);
756
771
  --salt-accent-foreground: var(--salt-palette-accent-foreground);
772
+ --salt-accent-foreground-disabled: var(--salt-palette-accent-foreground-disabled);
757
773
  --salt-accent-fontWeight: var(--salt-typography-fontWeight-semiBold);
758
774
  }
759
775
 
@@ -1082,27 +1098,35 @@
1082
1098
  --salt-text-fontWeight: var(--salt-typography-fontWeight-regular);
1083
1099
  --salt-text-fontWeight-small: var(--salt-typography-fontWeight-light);
1084
1100
  --salt-text-fontWeight-strong: var(--salt-typography-fontWeight-semiBold);
1101
+ --salt-text-h1-fontFamily: var(--salt-typography-fontFamily);
1085
1102
  --salt-text-h1-fontWeight: var(--salt-typography-fontWeight-bold);
1086
1103
  --salt-text-h1-fontWeight-small: var(--salt-typography-fontWeight-medium);
1087
1104
  --salt-text-h1-fontWeight-strong: var(--salt-typography-fontWeight-extraBold);
1105
+ --salt-text-h2-fontFamily: var(--salt-typography-fontFamily);
1088
1106
  --salt-text-h2-fontWeight: var(--salt-typography-fontWeight-semiBold);
1089
1107
  --salt-text-h2-fontWeight-small: var(--salt-typography-fontWeight-regular);
1090
1108
  --salt-text-h2-fontWeight-strong: var(--salt-typography-fontWeight-bold);
1109
+ --salt-text-h3-fontFamily: var(--salt-typography-fontFamily);
1091
1110
  --salt-text-h3-fontWeight: var(--salt-typography-fontWeight-semiBold);
1092
1111
  --salt-text-h3-fontWeight-small: var(--salt-typography-fontWeight-regular);
1093
1112
  --salt-text-h3-fontWeight-strong: var(--salt-typography-fontWeight-bold);
1113
+ --salt-text-h4-fontFamily: var(--salt-typography-fontFamily);
1094
1114
  --salt-text-h4-fontWeight: var(--salt-typography-fontWeight-semiBold);
1095
1115
  --salt-text-h4-fontWeight-small: var(--salt-typography-fontWeight-regular);
1096
1116
  --salt-text-h4-fontWeight-strong: var(--salt-typography-fontWeight-bold);
1117
+ --salt-text-label-fontFamily: var(--salt-typography-fontFamily);
1097
1118
  --salt-text-label-fontWeight: var(--salt-typography-fontWeight-regular);
1098
1119
  --salt-text-label-fontWeight-small: var(--salt-typography-fontWeight-light);
1099
1120
  --salt-text-label-fontWeight-strong: var(--salt-typography-fontWeight-semiBold);
1121
+ --salt-text-display1-fontFamily: var(--salt-typography-fontFamily);
1100
1122
  --salt-text-display1-fontWeight: var(--salt-typography-fontWeight-semiBold);
1101
1123
  --salt-text-display1-fontWeight-strong: var(--salt-typography-fontWeight-bold);
1102
1124
  --salt-text-display1-fontWeight-small: var(--salt-typography-fontWeight-regular);
1125
+ --salt-text-display2-fontFamily: var(--salt-typography-fontFamily);
1103
1126
  --salt-text-display2-fontWeight: var(--salt-typography-fontWeight-semiBold);
1104
1127
  --salt-text-display2-fontWeight-strong: var(--salt-typography-fontWeight-bold);
1105
1128
  --salt-text-display2-fontWeight-small: var(--salt-typography-fontWeight-regular);
1129
+ --salt-text-display3-fontFamily: var(--salt-typography-fontFamily);
1106
1130
  --salt-text-display3-fontWeight: var(--salt-typography-fontWeight-semiBold);
1107
1131
  --salt-text-display3-fontWeight-strong: var(--salt-typography-fontWeight-bold);
1108
1132
  --salt-text-display3-fontWeight-small: var(--salt-typography-fontWeight-regular);
package/index.css CHANGED
@@ -282,6 +282,14 @@
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));
@@ -397,12 +405,14 @@
397
405
  .salt-density-medium,
398
406
  .salt-density-high {
399
407
  --salt-size-basis-unit: 4px;
408
+ --salt-size-adornmentGap: calc(0.75 * var(--salt-size-unit));
400
409
  --salt-size-border: 1px;
401
- --salt-size-sharktooth-height: 5px;
402
- --salt-size-sharktooth-width: 10px;
410
+ --salt-size-container-spacing: calc(3 * var(--salt-size-unit));
403
411
  --salt-size-separator-strokeWidth: 1px;
404
- --salt-size-separator-height: calc(var(--salt-size-compact) + 1.5 * var(--salt-size-basis-unit));
405
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;
406
416
  --salt-size-stackable: calc(var(--salt-size-base) + var(--salt-size-unit));
407
417
  --salt-size-selection: var(--salt-size-selectable);
408
418
  --salt-size-brandBar: 4px;
@@ -488,7 +498,9 @@
488
498
  --salt-palette-accent-background: var(--salt-color-blue-500);
489
499
  --salt-palette-accent-background-disabled: var(--salt-color-blue-500-fade-background);
490
500
  --salt-palette-accent-border: var(--salt-color-blue-500);
501
+ --salt-palette-accent-border-disabled: var(--salt-color-blue-500-fade-border);
491
502
  --salt-palette-accent-foreground: var(--salt-color-white);
503
+ --salt-palette-accent-foreground-disabled: var(--salt-color-white-fade-foreground);
492
504
  --salt-palette-interact-background: transparent;
493
505
  --salt-palette-interact-background-blurSelected: var(--salt-color-gray-30);
494
506
  --salt-palette-interact-background-hover: var(--salt-color-blue-10);
@@ -609,7 +621,9 @@
609
621
  --salt-palette-accent-background: var(--salt-color-blue-500);
610
622
  --salt-palette-accent-background-disabled: var(--salt-color-blue-500-fade-background);
611
623
  --salt-palette-accent-border: var(--salt-color-blue-500);
624
+ --salt-palette-accent-border-disabled: var(--salt-color-blue-500-fade-border);
612
625
  --salt-palette-accent-foreground: var(--salt-color-white);
626
+ --salt-palette-accent-foreground-disabled: var(--salt-color-white-fade-foreground);
613
627
  --salt-palette-interact-background: transparent;
614
628
  --salt-palette-interact-background-active: var(--salt-color-blue-700);
615
629
  --salt-palette-interact-background-blurSelected: var(--salt-color-gray-600);
@@ -624,7 +638,7 @@
624
638
  --salt-palette-interact-foreground: var(--salt-color-gray-90);
625
639
  --salt-palette-interact-foreground-active: var(--salt-color-blue-100);
626
640
  --salt-palette-interact-foreground-activeDisabled: var(--salt-color-blue-100-fade-foreground);
627
- --salt-palette-interact-foreground-disabled: var(--salt-color-90-fade-foreground);
641
+ --salt-palette-interact-foreground-disabled: var(--salt-color-gray-90-fade-foreground);
628
642
  --salt-palette-interact-foreground-hover: var(--salt-color-blue-500);
629
643
  --salt-palette-interact-outline: var(--salt-color-blue-100);
630
644
  --salt-palette-interact-cta-background: var(--salt-color-blue-600);
@@ -776,7 +790,9 @@
776
790
  --salt-accent-background: var(--salt-palette-accent-background);
777
791
  --salt-accent-background-disabled: var(--salt-palette-accent-background-disabled);
778
792
  --salt-accent-borderColor: var(--salt-palette-accent-border);
793
+ --salt-accent-borderColor-disabled: var(--salt-palette-accent-border-disabled);
779
794
  --salt-accent-foreground: var(--salt-palette-accent-foreground);
795
+ --salt-accent-foreground-disabled: var(--salt-palette-accent-foreground-disabled);
780
796
  --salt-accent-fontWeight: var(--salt-typography-fontWeight-semiBold);
781
797
  }
782
798
 
@@ -1105,27 +1121,35 @@
1105
1121
  --salt-text-fontWeight: var(--salt-typography-fontWeight-regular);
1106
1122
  --salt-text-fontWeight-small: var(--salt-typography-fontWeight-light);
1107
1123
  --salt-text-fontWeight-strong: var(--salt-typography-fontWeight-semiBold);
1124
+ --salt-text-h1-fontFamily: var(--salt-typography-fontFamily);
1108
1125
  --salt-text-h1-fontWeight: var(--salt-typography-fontWeight-bold);
1109
1126
  --salt-text-h1-fontWeight-small: var(--salt-typography-fontWeight-medium);
1110
1127
  --salt-text-h1-fontWeight-strong: var(--salt-typography-fontWeight-extraBold);
1128
+ --salt-text-h2-fontFamily: var(--salt-typography-fontFamily);
1111
1129
  --salt-text-h2-fontWeight: var(--salt-typography-fontWeight-semiBold);
1112
1130
  --salt-text-h2-fontWeight-small: var(--salt-typography-fontWeight-regular);
1113
1131
  --salt-text-h2-fontWeight-strong: var(--salt-typography-fontWeight-bold);
1132
+ --salt-text-h3-fontFamily: var(--salt-typography-fontFamily);
1114
1133
  --salt-text-h3-fontWeight: var(--salt-typography-fontWeight-semiBold);
1115
1134
  --salt-text-h3-fontWeight-small: var(--salt-typography-fontWeight-regular);
1116
1135
  --salt-text-h3-fontWeight-strong: var(--salt-typography-fontWeight-bold);
1136
+ --salt-text-h4-fontFamily: var(--salt-typography-fontFamily);
1117
1137
  --salt-text-h4-fontWeight: var(--salt-typography-fontWeight-semiBold);
1118
1138
  --salt-text-h4-fontWeight-small: var(--salt-typography-fontWeight-regular);
1119
1139
  --salt-text-h4-fontWeight-strong: var(--salt-typography-fontWeight-bold);
1140
+ --salt-text-label-fontFamily: var(--salt-typography-fontFamily);
1120
1141
  --salt-text-label-fontWeight: var(--salt-typography-fontWeight-regular);
1121
1142
  --salt-text-label-fontWeight-small: var(--salt-typography-fontWeight-light);
1122
1143
  --salt-text-label-fontWeight-strong: var(--salt-typography-fontWeight-semiBold);
1144
+ --salt-text-display1-fontFamily: var(--salt-typography-fontFamily);
1123
1145
  --salt-text-display1-fontWeight: var(--salt-typography-fontWeight-semiBold);
1124
1146
  --salt-text-display1-fontWeight-strong: var(--salt-typography-fontWeight-bold);
1125
1147
  --salt-text-display1-fontWeight-small: var(--salt-typography-fontWeight-regular);
1148
+ --salt-text-display2-fontFamily: var(--salt-typography-fontFamily);
1126
1149
  --salt-text-display2-fontWeight: var(--salt-typography-fontWeight-semiBold);
1127
1150
  --salt-text-display2-fontWeight-strong: var(--salt-typography-fontWeight-bold);
1128
1151
  --salt-text-display2-fontWeight-small: var(--salt-typography-fontWeight-regular);
1152
+ --salt-text-display3-fontFamily: var(--salt-typography-fontFamily);
1129
1153
  --salt-text-display3-fontWeight: var(--salt-typography-fontWeight-semiBold);
1130
1154
  --salt-text-display3-fontWeight-strong: var(--salt-typography-fontWeight-bold);
1131
1155
  --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.3.0",
4
4
  "license": "Apache-2.0",
5
5
  "style": "index.css",
6
6
  "files": [