@salt-ds/theme 1.11.0 → 1.12.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 +11 -10
  3. package/index.css +12 -11
  4. package/package.json +1 -1
package/css/global.css CHANGED
@@ -6,7 +6,7 @@
6
6
  letter-spacing: var(--salt-text-letterSpacing);
7
7
  line-height: var(--salt-text-lineHeight);
8
8
  }
9
- ::selection {
9
+ .salt-theme ::selection {
10
10
  background: var(--salt-content-foreground-highlight);
11
11
  }
12
12
  .salt-theme[data-mode=light] {
package/css/theme.css CHANGED
@@ -9,8 +9,8 @@
9
9
  --salt-animation-scale-end: 1;
10
10
  --salt-animation-transform-start: 100%;
11
11
  --salt-animation-transform-end: 0;
12
- --salt-animation-duration: 0.3s;
13
- --salt-animation-timing-function: ease-in;
12
+ --salt-animation-duration: var(--salt-duration-perceptible);
13
+ --salt-animation-timing-function: ease-in-out;
14
14
  --salt-animation-slide-in-top: slide-in-top var(--salt-animation-duration) var(--salt-animation-timing-function);
15
15
  --salt-animation-slide-in-left: slide-in-left var(--salt-animation-duration) var(--salt-animation-timing-function);
16
16
  --salt-animation-slide-in-right: slide-in-right var(--salt-animation-duration) var(--salt-animation-timing-function);
@@ -22,7 +22,7 @@
22
22
  --salt-animation-fade-in-back: fade-in-back var(--salt-animation-duration) var(--salt-animation-timing-function);
23
23
  --salt-animation-fade-in-forward: fade-in-forward var(--salt-animation-duration) var(--salt-animation-timing-function);
24
24
  --salt-animation-fade-in-center: fade-in-center var(--salt-animation-duration) var(--salt-animation-timing-function);
25
- --salt-animation-fade-out-back: fade-out-back var(--salt-animation-duration) ease-out both;
25
+ --salt-animation-fade-out-back: fade-out-back var(--salt-animation-duration) ease-in-out both;
26
26
  }
27
27
  @keyframes slide-in-top {
28
28
  0% {
@@ -277,6 +277,7 @@
277
277
  --salt-color-red-700-fade-foreground: rgba(166, 21, 11, var(--salt-palette-opacity-disabled));
278
278
  --salt-color-white-fade-foreground: rgba(255, 255, 255, var(--salt-palette-opacity-disabled));
279
279
  --salt-color-blue-500-fade-border: rgba(38, 112, 169, var(--salt-palette-opacity-disabled));
280
+ --salt-color-gray-50-fade-border: rgba(206, 210, 217, var(--salt-palette-opacity-disabled));
280
281
  --salt-color-gray-60-fade-border: rgba(197, 201, 208, var(--salt-palette-opacity-disabled));
281
282
  --salt-color-gray-90-fade-border: rgba(132, 135, 142, var(--salt-palette-opacity-disabled));
282
283
  --salt-color-gray-200-fade-border: rgba(97, 101, 110, var(--salt-palette-opacity-disabled));
@@ -621,13 +622,13 @@
621
622
  --salt-palette-neutral-primary-foreground: var(--salt-color-gray-900);
622
623
  --salt-palette-neutral-primary-foreground-disabled: var(--salt-color-gray-900-fade-foreground);
623
624
  --salt-palette-neutral-primary-separator: var(--salt-color-black-fade-separatorOpacity-primary);
624
- --salt-palette-neutral-primary-border: var(--salt-color-gray-60);
625
- --salt-palette-neutral-primary-border-disabled: var(--salt-color-gray-60-fade-border);
625
+ --salt-palette-neutral-primary-border: var(--salt-color-gray-50);
626
+ --salt-palette-neutral-primary-border-disabled: var(--salt-color-gray-50-fade-border);
626
627
  --salt-palette-neutral-secondary-background: var(--salt-color-gray-20);
627
628
  --salt-palette-neutral-secondary-background-disabled: var(--salt-color-gray-20-fade-background);
628
629
  --salt-palette-neutral-secondary-background-readonly: var(--salt-color-gray-20-fade-background-readonly);
629
- --salt-palette-neutral-secondary-border: var(--salt-color-gray-90);
630
- --salt-palette-neutral-secondary-border-disabled: var(--salt-color-gray-90-fade-border);
630
+ --salt-palette-neutral-secondary-border: var(--salt-color-gray-50);
631
+ --salt-palette-neutral-secondary-border-disabled: var(--salt-color-gray-50-fade-border);
631
632
  --salt-palette-neutral-secondary-foreground: var(--salt-color-gray-200);
632
633
  --salt-palette-neutral-secondary-foreground-disabled: var(--salt-color-gray-200-fade-foreground);
633
634
  --salt-palette-neutral-backdrop: var(--salt-color-white-fade-backdrop);
@@ -646,8 +647,8 @@
646
647
  --salt-palette-neutral-secondary-background: var(--salt-color-gray-600);
647
648
  --salt-palette-neutral-secondary-background-disabled: var(--salt-color-gray-600-fade-background);
648
649
  --salt-palette-neutral-secondary-background-readonly: var(--salt-color-gray-600-fade-background-readonly);
649
- --salt-palette-neutral-secondary-border: var(--salt-color-gray-90);
650
- --salt-palette-neutral-secondary-border-disabled: var(--salt-color-gray-90-fade-border);
650
+ --salt-palette-neutral-secondary-border: var(--salt-color-gray-300);
651
+ --salt-palette-neutral-secondary-border-disabled: var(--salt-color-gray-300-fade-border);
651
652
  --salt-palette-neutral-secondary-foreground: var(--salt-color-gray-70);
652
653
  --salt-palette-neutral-secondary-foreground-disabled: var(--salt-color-gray-70-fade-foreground);
653
654
  --salt-palette-neutral-backdrop: var(--salt-color-black-fade-backdrop);
@@ -1078,6 +1079,7 @@
1078
1079
  --salt-track-borderStyle-active: solid;
1079
1080
  --salt-track-borderStyle-complete: solid;
1080
1081
  --salt-track-borderStyle-incomplete: dotted;
1082
+ --salt-track-borderColor: var(--salt-palette-neutral-secondary-border);
1081
1083
  }
1082
1084
 
1083
1085
  /* css/deprecated/characteristics.css */
@@ -1199,7 +1201,6 @@
1199
1201
  --salt-track-textAlign: center;
1200
1202
  --salt-track-background: var(--salt-palette-track-background);
1201
1203
  --salt-track-background-disabled: var(--salt-palette-track-background-disabled);
1202
- --salt-track-borderColor: var(--salt-palette-track-border);
1203
1204
  --salt-track-borderColor-disabled: var(--salt-palette-track-border-disabled);
1204
1205
  --salt-taggable-cursor-hover: pointer;
1205
1206
  --salt-taggable-cursor-active: pointer;
package/index.css CHANGED
@@ -6,7 +6,7 @@
6
6
  letter-spacing: var(--salt-text-letterSpacing);
7
7
  line-height: var(--salt-text-lineHeight);
8
8
  }
9
- ::selection {
9
+ .salt-theme ::selection {
10
10
  background: var(--salt-content-foreground-highlight);
11
11
  }
12
12
  .salt-theme[data-mode=light] {
@@ -43,8 +43,8 @@
43
43
  --salt-animation-scale-end: 1;
44
44
  --salt-animation-transform-start: 100%;
45
45
  --salt-animation-transform-end: 0;
46
- --salt-animation-duration: 0.3s;
47
- --salt-animation-timing-function: ease-in;
46
+ --salt-animation-duration: var(--salt-duration-perceptible);
47
+ --salt-animation-timing-function: ease-in-out;
48
48
  --salt-animation-slide-in-top: slide-in-top var(--salt-animation-duration) var(--salt-animation-timing-function);
49
49
  --salt-animation-slide-in-left: slide-in-left var(--salt-animation-duration) var(--salt-animation-timing-function);
50
50
  --salt-animation-slide-in-right: slide-in-right var(--salt-animation-duration) var(--salt-animation-timing-function);
@@ -56,7 +56,7 @@
56
56
  --salt-animation-fade-in-back: fade-in-back var(--salt-animation-duration) var(--salt-animation-timing-function);
57
57
  --salt-animation-fade-in-forward: fade-in-forward var(--salt-animation-duration) var(--salt-animation-timing-function);
58
58
  --salt-animation-fade-in-center: fade-in-center var(--salt-animation-duration) var(--salt-animation-timing-function);
59
- --salt-animation-fade-out-back: fade-out-back var(--salt-animation-duration) ease-out both;
59
+ --salt-animation-fade-out-back: fade-out-back var(--salt-animation-duration) ease-in-out both;
60
60
  }
61
61
  @keyframes slide-in-top {
62
62
  0% {
@@ -311,6 +311,7 @@
311
311
  --salt-color-red-700-fade-foreground: rgba(166, 21, 11, var(--salt-palette-opacity-disabled));
312
312
  --salt-color-white-fade-foreground: rgba(255, 255, 255, var(--salt-palette-opacity-disabled));
313
313
  --salt-color-blue-500-fade-border: rgba(38, 112, 169, var(--salt-palette-opacity-disabled));
314
+ --salt-color-gray-50-fade-border: rgba(206, 210, 217, var(--salt-palette-opacity-disabled));
314
315
  --salt-color-gray-60-fade-border: rgba(197, 201, 208, var(--salt-palette-opacity-disabled));
315
316
  --salt-color-gray-90-fade-border: rgba(132, 135, 142, var(--salt-palette-opacity-disabled));
316
317
  --salt-color-gray-200-fade-border: rgba(97, 101, 110, var(--salt-palette-opacity-disabled));
@@ -655,13 +656,13 @@
655
656
  --salt-palette-neutral-primary-foreground: var(--salt-color-gray-900);
656
657
  --salt-palette-neutral-primary-foreground-disabled: var(--salt-color-gray-900-fade-foreground);
657
658
  --salt-palette-neutral-primary-separator: var(--salt-color-black-fade-separatorOpacity-primary);
658
- --salt-palette-neutral-primary-border: var(--salt-color-gray-60);
659
- --salt-palette-neutral-primary-border-disabled: var(--salt-color-gray-60-fade-border);
659
+ --salt-palette-neutral-primary-border: var(--salt-color-gray-50);
660
+ --salt-palette-neutral-primary-border-disabled: var(--salt-color-gray-50-fade-border);
660
661
  --salt-palette-neutral-secondary-background: var(--salt-color-gray-20);
661
662
  --salt-palette-neutral-secondary-background-disabled: var(--salt-color-gray-20-fade-background);
662
663
  --salt-palette-neutral-secondary-background-readonly: var(--salt-color-gray-20-fade-background-readonly);
663
- --salt-palette-neutral-secondary-border: var(--salt-color-gray-90);
664
- --salt-palette-neutral-secondary-border-disabled: var(--salt-color-gray-90-fade-border);
664
+ --salt-palette-neutral-secondary-border: var(--salt-color-gray-50);
665
+ --salt-palette-neutral-secondary-border-disabled: var(--salt-color-gray-50-fade-border);
665
666
  --salt-palette-neutral-secondary-foreground: var(--salt-color-gray-200);
666
667
  --salt-palette-neutral-secondary-foreground-disabled: var(--salt-color-gray-200-fade-foreground);
667
668
  --salt-palette-neutral-backdrop: var(--salt-color-white-fade-backdrop);
@@ -680,8 +681,8 @@
680
681
  --salt-palette-neutral-secondary-background: var(--salt-color-gray-600);
681
682
  --salt-palette-neutral-secondary-background-disabled: var(--salt-color-gray-600-fade-background);
682
683
  --salt-palette-neutral-secondary-background-readonly: var(--salt-color-gray-600-fade-background-readonly);
683
- --salt-palette-neutral-secondary-border: var(--salt-color-gray-90);
684
- --salt-palette-neutral-secondary-border-disabled: var(--salt-color-gray-90-fade-border);
684
+ --salt-palette-neutral-secondary-border: var(--salt-color-gray-300);
685
+ --salt-palette-neutral-secondary-border-disabled: var(--salt-color-gray-300-fade-border);
685
686
  --salt-palette-neutral-secondary-foreground: var(--salt-color-gray-70);
686
687
  --salt-palette-neutral-secondary-foreground-disabled: var(--salt-color-gray-70-fade-foreground);
687
688
  --salt-palette-neutral-backdrop: var(--salt-color-black-fade-backdrop);
@@ -1112,6 +1113,7 @@
1112
1113
  --salt-track-borderStyle-active: solid;
1113
1114
  --salt-track-borderStyle-complete: solid;
1114
1115
  --salt-track-borderStyle-incomplete: dotted;
1116
+ --salt-track-borderColor: var(--salt-palette-neutral-secondary-border);
1115
1117
  }
1116
1118
 
1117
1119
  /* css/deprecated/characteristics.css */
@@ -1233,7 +1235,6 @@
1233
1235
  --salt-track-textAlign: center;
1234
1236
  --salt-track-background: var(--salt-palette-track-background);
1235
1237
  --salt-track-background-disabled: var(--salt-palette-track-background-disabled);
1236
- --salt-track-borderColor: var(--salt-palette-track-border);
1237
1238
  --salt-track-borderColor-disabled: var(--salt-palette-track-border-disabled);
1238
1239
  --salt-taggable-cursor-hover: pointer;
1239
1240
  --salt-taggable-cursor-active: pointer;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@salt-ds/theme",
3
- "version": "1.11.0",
3
+ "version": "1.12.0",
4
4
  "license": "Apache-2.0",
5
5
  "repository": {
6
6
  "type": "git",