@vuu-ui/vuu-theme 4.0.0-alpha.20 → 4.0.0-alpha.22

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 (37) hide show
  1. package/css/deprecated/characteristics.css +39 -0
  2. package/css/deprecated/foundations.css +1 -0
  3. package/css/foundations/alpha.css +0 -1
  4. package/css/foundations/animation.css +2 -1
  5. package/css/foundations/borderStyle.css +0 -1
  6. package/css/foundations/color.css +1 -8
  7. package/css/foundations/cursor.css +0 -1
  8. package/css/foundations/curve.css +9 -4
  9. package/css/foundations/duration.css +0 -1
  10. package/css/foundations/size.css +3 -1
  11. package/css/foundations/spacing.css +33 -0
  12. package/css/foundations/typography.css +6 -2
  13. package/css/foundations/zindex.css +2 -1
  14. package/css/global.css +1 -4
  15. package/css/next/characteristics/actionable.css +34 -24
  16. package/css/next/characteristics/category.css +100 -60
  17. package/css/next/characteristics/container.css +9 -7
  18. package/css/next/characteristics/content.css +1 -1
  19. package/css/next/characteristics/editable.css +5 -6
  20. package/css/next/characteristics/focused.css +3 -2
  21. package/css/next/characteristics/layout.css +12 -0
  22. package/css/next/characteristics/selectable.css +3 -9
  23. package/css/next/characteristics/sentiment.css +11 -1
  24. package/css/next/characteristics/separable.css +1 -1
  25. package/css/next/characteristics/text.css +78 -67
  26. package/css/next/deprecated/characteristics.css +111 -21
  27. package/css/next/deprecated/foundations.css +5 -0
  28. package/css/next/deprecated/palette.css +49 -2
  29. package/css/next/foundations/alpha.css +0 -1
  30. package/css/next/foundations/color.css +188 -2
  31. package/css/next/palette/accent.css +0 -2
  32. package/css/next/palette/alpha.css +18 -2
  33. package/css/next/palette/brand.css +6 -0
  34. package/css/next/palette/foreground.css +0 -2
  35. package/css/next/palette/neutral.css +0 -2
  36. package/css/theme-next.css +2 -2
  37. package/package.json +1 -1
package/css/next/characteristics/container.css CHANGED
@@ -1,19 +1,21 @@
1
1
  .salt-theme.salt-theme-next.vuu-theme {
2
2
  --salt-container-primary-background: var(--salt-palette-background-primary);
3
3
  --salt-container-primary-background-disabled: var(--salt-palette-background-primary-disabled);
4
- --salt-container-primary-borderColor: var(--salt-palette-alpha-contrast-medium);
5
- --salt-container-primary-borderColor-disabled: var(--salt-palette-alpha-contrast-lower);
6
4
 
7
5
  --salt-container-secondary-background: var(--salt-palette-background-secondary);
8
6
  --salt-container-secondary-background-disabled: var(--salt-palette-background-secondary-disabled);
9
- --salt-container-secondary-borderColor: var(--salt-palette-alpha-contrast-medium);
10
- --salt-container-secondary-borderColor-disabled: var(--salt-palette-alpha-contrast-lower);
11
7
 
12
8
  --salt-container-tertiary-background: var(--salt-palette-background-tertiary);
13
9
  --salt-container-tertiary-background-disabled: var(--salt-palette-background-tertiary-disabled);
14
- --salt-container-tertiary-borderColor: var(--salt-palette-alpha-contrast-medium);
15
- --salt-container-tertiary-borderColor-disabled: var(--salt-palette-alpha-contrast-lower);
16
10
 
17
11
  --salt-container-ghost-background: var(--salt-palette-alpha-medium);
18
- --salt-container-ghost-borderColor: var(--salt-palette-alpha-contrast-medium);
12
+
13
+ --salt-container-bold-borderColor: var(--salt-palette-alpha-contrast-medium);
14
+ --salt-container-bold-borderColor-disabled: var(--salt-palette-alpha-contrast-lower);
15
+ --salt-container-borderColor: var(--salt-palette-alpha-contrast-mediumLow);
16
+ --salt-container-subtle-borderColor: var(--salt-palette-alpha-contrast-lower);
17
+
18
+ --salt-container-ghost-bold-borderColor: var(--salt-palette-alpha-contrast-medium);
19
+ --salt-container-ghost-borderColor: var(--salt-palette-alpha-contrast-mediumLow);
20
+ --salt-container-ghost-subtle-borderColor: var(--salt-palette-alpha-contrast-lower);
19
21
  }
package/css/next/characteristics/content.css CHANGED
@@ -5,9 +5,9 @@
5
5
  --salt-content-secondary-foreground-disabled: var(--salt-palette-foreground-secondary-disabled);
6
6
  --salt-content-accent-foreground: var(--salt-palette-accent-strong);
7
7
  --salt-content-attention-foreground: var(--salt-palette-negative-strong);
8
+ --salt-content-brand-foreground: var(--salt-palette-brand-strong);
8
9
 
9
10
  --salt-content-bold-foreground: var(--salt-palette-foreground-primary-alt);
10
- --salt-content-bold-foreground-disabled: var(--salt-palette-foreground-primary-alt-disabled);
11
11
 
12
12
  --salt-content-foreground-visited: var(--salt-palette-foreground-visited);
13
13
  }
package/css/next/characteristics/editable.css CHANGED
@@ -5,15 +5,14 @@
5
5
  --salt-editable-borderColor-hover: var(--salt-palette-accent);
6
6
  --salt-editable-borderColor-readonly: var(--salt-palette-neutral-readonly);
7
7
 
8
+ --salt-editable-background-readonly: var(--salt-color-transparent);
9
+
8
10
  --salt-editable-primary-background: var(--salt-palette-background-primary);
9
- --salt-editable-primary-background-active: var(--salt-palette-background-primary);
10
11
  --salt-editable-primary-background-disabled: var(--salt-palette-background-primary-disabled);
11
- --salt-editable-primary-background-hover: var(--salt-palette-background-primary);
12
- --salt-editable-primary-background-readonly: var(--salt-palette-alpha-none);
13
12
 
14
13
  --salt-editable-secondary-background: var(--salt-palette-background-secondary);
15
- --salt-editable-secondary-background-active: var(--salt-palette-background-secondary);
16
14
  --salt-editable-secondary-background-disabled: var(--salt-palette-background-secondary-disabled);
17
- --salt-editable-secondary-background-hover: var(--salt-palette-background-secondary);
18
- --salt-editable-secondary-background-readonly: var(--salt-palette-alpha-none);
15
+
16
+ --salt-editable-tertiary-background: var(--salt-palette-background-tertiary);
17
+ --salt-editable-tertiary-background-disabled: var(--salt-palette-background-tertiary-disabled);
19
18
  }
package/css/next/characteristics/focused.css CHANGED
@@ -1,9 +1,10 @@
1
1
  .salt-theme.salt-theme-next.vuu-theme {
2
2
  --salt-focused-outlineColor: var(--salt-palette-accent-stronger);
3
+ --salt-focused-onSolid-outlineColor: var(--salt-palette-alpha-light-highest);
3
4
  --salt-focused-outlineStyle: var(--salt-borderStyle-dotted);
4
5
  --salt-focused-outlineWidth: var(--salt-size-fixed-200);
5
- --salt-focused-outlineInset: 0;
6
- --salt-focused-outlineOffset: 0;
6
+ --salt-focused-outlineInset: 0px;
7
+ --salt-focused-outlineOffset: 0px;
7
8
 
8
9
  --salt-focused-outline: var(--salt-focused-outlineWidth) var(--salt-focused-outlineStyle) var(--salt-focused-outlineColor); /* CSS shortcut token: not in Figma */
9
10
  }
package/css/next/characteristics/layout.css ADDED
@@ -0,0 +1,12 @@
1
+ .salt-density-low,
2
+ .salt-density-medium,
3
+ .salt-density-high,
4
+ .salt-density-touch {
5
+ --salt-layout-page-margin: var(--salt-spacing-300);
6
+ --salt-layout-gap: var(--salt-spacing-300);
7
+ }
8
+
9
+ .salt-density-mobile {
10
+ --salt-layout-page-margin: var(--salt-spacing-100);
11
+ --salt-layout-gap: var(--salt-spacing-100);
12
+ }
package/css/next/characteristics/selectable.css CHANGED
@@ -1,19 +1,13 @@
1
1
  .salt-theme.salt-theme-next.vuu-theme {
2
2
  --salt-selectable-borderColor: var(--salt-palette-neutral);
3
- --salt-selectable-borderColor-hover: var(--salt-palette-accent-weak);
3
+ --salt-selectable-borderColor-hover: var(--salt-palette-accent);
4
4
  --salt-selectable-borderColor-selected: var(--salt-palette-accent);
5
- --salt-selectable-borderColor-selectedDisabled: var(--salt-palette-accent-disabled);
6
- --salt-selectable-borderColor-disabled: var(--salt-palette-neutral-disabled);
7
5
  --salt-selectable-borderColor-readonly: var(--salt-palette-neutral);
8
6
 
9
7
  --salt-selectable-foreground: var(--salt-palette-neutral-strong);
10
- --salt-selectable-foreground-disabled: var(--salt-palette-neutral-strong-disabled);
11
- --salt-selectable-foreground-hover: var(--salt-palette-accent-weak);
8
+ --salt-selectable-foreground-hover: var(--salt-palette-accent);
12
9
  --salt-selectable-foreground-selected: var(--salt-palette-accent);
13
- --salt-selectable-foreground-selectedDisabled: var(--salt-palette-accent-disabled);
14
- --salt-selectable-background: var(--salt-palette-alpha-none);
10
+ --salt-selectable-background: var(--salt-color-transparent);
15
11
  --salt-selectable-background-hover: var(--salt-palette-accent-weakest);
16
12
  --salt-selectable-background-selected: var(--salt-palette-accent-weaker);
17
- --salt-selectable-background-disabled: var(--salt-palette-alpha-none);
18
- --salt-selectable-background-selectedDisabled: var(--salt-palette-accent-weaker-disabled);
19
13
  }
package/css/next/characteristics/sentiment.css CHANGED
@@ -6,5 +6,15 @@
6
6
  --salt-sentiment-positive-foreground-decorative: var(--salt-palette-positive);
7
7
 
8
8
  --salt-sentiment-neutral-track: var(--salt-palette-alpha-contrast-high);
9
- --salt-sentiment-neutral-track-disabled: var(--salt-palette-alpha-contrast-lower);
9
+
10
+ --salt-sentiment-caution-dataviz: var(--salt-palette-warning);
11
+ --salt-sentiment-negative-dataviz: var(--salt-palette-negative);
12
+ --salt-sentiment-positive-dataviz: var(--salt-palette-positive);
13
+ --salt-sentiment-neutral-dataviz: var(--salt-palette-neutral);
14
+ --salt-sentiment-accent-dataviz: var(--salt-palette-accent);
15
+
16
+ --salt-sentiment-neutral-background: var(--salt-palette-neutral);
17
+
18
+ --salt-sentiment-accent-background: var(--salt-palette-accent);
19
+ --salt-sentiment-accent-borderColor: var(--salt-palette-accent);
10
20
  }
package/css/next/characteristics/separable.css CHANGED
@@ -6,6 +6,6 @@
6
6
  --salt-separable-foreground: var(--salt-palette-foreground-primary);
7
7
  --salt-separable-foreground-hover: var(--salt-palette-foreground-primary);
8
8
  --salt-separable-foreground-active: var(--salt-palette-foreground-primary-alt);
9
- --salt-separable-background-hover: var(--salt-palette-alpha-weak);
9
+ --salt-separable-background-hover: var(--salt-palette-alpha-contrast-lower);
10
10
  --salt-separable-background-active: var(--salt-palette-accent);
11
11
  }
package/css/next/characteristics/text.css CHANGED
@@ -4,80 +4,55 @@
4
4
  --salt-text-textAlign: left;
5
5
  --salt-text-textAlign-embedded: center;
6
6
 
7
- /* Action */
8
- --salt-text-action-fontFamily: var(--salt-palette-text-fontFamily-action);
9
- --salt-text-action-letterSpacing: 0.6px;
10
- --salt-text-action-textTransform: uppercase;
11
- --salt-text-action-textAlign: center;
12
- --salt-text-action-fontWeight: var(--salt-palette-text-action-fontWeight);
13
- --salt-text-action-fontWeight-small: var(--salt-palette-text-action-fontWeight-small);
14
- --salt-text-action-fontWeight-strong: var(--salt-palette-text-action-fontWeight-strong);
15
-
16
7
  /* Body text (should be used as default) */
17
- --salt-text-fontFamily: var(--salt-palette-text-fontFamily);
18
- --salt-text-fontWeight: var(--salt-palette-text-body-fontWeight);
19
- --salt-text-fontWeight-small: var(--salt-palette-text-body-fontWeight-small);
20
- --salt-text-fontWeight-strong: var(--salt-palette-text-body-fontWeight-strong);
8
+ --salt-text-fontFamily: var(--salt-typography-fontFamily-nunito);
9
+ --salt-text-fontWeight: var(--salt-typography-fontWeight-regular);
10
+ --salt-text-fontWeight-small: var(--salt-typography-fontWeight-light);
11
+ --salt-text-fontWeight-strong: var(--salt-typography-fontWeight-semiBold);
21
12
 
22
13
  /* Notation */
23
- --salt-text-notation-fontFamily: var(--salt-palette-text-fontFamily);
24
- --salt-text-notation-fontWeight: var(--salt-palette-text-notation-fontWeight);
25
- --salt-text-notation-fontWeight-small: var(--salt-palette-text-notation-fontWeight-small);
26
- --salt-text-notation-fontWeight-strong: var(--salt-palette-text-notation-fontWeight-strong);
27
-
28
- /* H1 */
29
- --salt-text-h1-fontFamily: var(--salt-palette-text-fontFamily-heading);
30
- --salt-text-h1-fontWeight: var(--salt-palette-text-heading-fontWeight);
31
- --salt-text-h1-fontWeight-small: var(--salt-palette-text-heading-fontWeight-small);
32
- --salt-text-h1-fontWeight-strong: var(--salt-palette-text-heading-fontWeight-strong);
33
-
34
- /* H2 */
35
- --salt-text-h2-fontFamily: var(--salt-palette-text-fontFamily-heading);
36
- --salt-text-h2-fontWeight: var(--salt-palette-text-heading-fontWeight);
37
- --salt-text-h2-fontWeight-small: var(--salt-palette-text-heading-fontWeight-small);
38
- --salt-text-h2-fontWeight-strong: var(--salt-palette-text-heading-fontWeight-strong);
39
-
40
- /* H3 */
41
- --salt-text-h3-fontFamily: var(--salt-palette-text-fontFamily-heading);
42
- --salt-text-h3-fontWeight: var(--salt-palette-text-heading-fontWeight);
43
- --salt-text-h3-fontWeight-small: var(--salt-palette-text-heading-fontWeight-small);
44
- --salt-text-h3-fontWeight-strong: var(--salt-palette-text-heading-fontWeight-strong);
45
-
46
- /* H4 */
47
- --salt-text-h4-fontFamily: var(--salt-palette-text-fontFamily-heading);
48
- --salt-text-h4-fontWeight: var(--salt-palette-text-heading-fontWeight);
49
- --salt-text-h4-fontWeight-small: var(--salt-palette-text-heading-fontWeight-small);
50
- --salt-text-h4-fontWeight-strong: var(--salt-palette-text-heading-fontWeight-strong);
14
+ --salt-text-notation-fontWeight: var(--salt-typography-fontWeight-semiBold);
15
+ --salt-text-notation-fontWeight-small: var(--salt-typography-fontWeight-regular);
16
+ --salt-text-notation-fontWeight-strong: var(--salt-typography-fontWeight-bold);
51
17
 
52
18
  /* Label */
53
- --salt-text-label-fontFamily: var(--salt-palette-text-fontFamily);
54
- --salt-text-label-fontWeight: var(--salt-palette-text-body-fontWeight);
55
- --salt-text-label-fontWeight-small: var(--salt-palette-text-body-fontWeight-small);
56
- --salt-text-label-fontWeight-strong: var(--salt-palette-text-body-fontWeight-strong);
57
-
58
- /* Display text */
59
- --salt-text-display1-fontFamily: var(--salt-palette-text-fontFamily-heading);
60
- --salt-text-display1-fontWeight: var(--salt-palette-text-display-fontWeight);
61
- --salt-text-display1-fontWeight-strong: var(--salt-palette-text-display-fontWeight-strong);
62
- --salt-text-display1-fontWeight-small: var(--salt-palette-text-display-fontWeight-small);
63
-
64
- --salt-text-display2-fontFamily: var(--salt-palette-text-fontFamily-heading);
65
- --salt-text-display2-fontWeight: var(--salt-palette-text-display-fontWeight);
66
- --salt-text-display2-fontWeight-strong: var(--salt-palette-text-display-fontWeight-strong);
67
- --salt-text-display2-fontWeight-small: var(--salt-palette-text-display-fontWeight-small);
68
-
69
- --salt-text-display3-fontFamily: var(--salt-palette-text-fontFamily-heading);
70
- --salt-text-display3-fontWeight: var(--salt-palette-text-display-fontWeight);
71
- --salt-text-display3-fontWeight-strong: var(--salt-palette-text-display-fontWeight-strong);
72
- --salt-text-display3-fontWeight-small: var(--salt-palette-text-display-fontWeight-small);
73
-
74
- --salt-text-display4-fontFamily: var(--salt-palette-text-fontFamily-heading);
75
- --salt-text-display4-fontWeight: var(--salt-palette-text-display-fontWeight);
76
- --salt-text-display4-fontWeight-strong: var(--salt-palette-text-display-fontWeight-strong);
77
- --salt-text-display4-fontWeight-small: var(--salt-palette-text-display-fontWeight-small);
19
+ --salt-text-label-fontWeight: var(--salt-typography-fontWeight-regular);
20
+ --salt-text-label-fontWeight-small: var(--salt-typography-fontWeight-light);
21
+ --salt-text-label-fontWeight-strong: var(--salt-typography-fontWeight-semiBold);
78
22
 
79
23
  /* Code */
80
- --salt-text-code-fontFamily: var(--salt-palette-text-fontFamily-code);
24
+ --salt-text-code-fontFamily: var(--salt-typography-fontFamily-ptMono);
25
+ }
26
+
27
+ /*
28
+ * vuu-theme uses Nunito Sans for all text. SaltProvider only ever sets
29
+ * data-action-font / data-heading-font to "Open Sans" or "Amplitude", so
30
+ * these values are applied unconditionally rather than by attribute.
31
+ */
32
+ .salt-theme-next.salt-theme.vuu-theme {
33
+ /* Action */
34
+ --salt-text-action-letterSpacing: 0.6px;
35
+ --salt-text-action-textTransform: uppercase;
36
+ --salt-text-action-textAlign: center;
37
+ --salt-text-action-fontFamily: var(--salt-typography-fontFamily-nunito);
38
+ --salt-text-action-fontWeight: var(--salt-typography-fontWeight-semiBold);
39
+ --salt-text-action-fontWeight-small: var(--salt-typography-fontWeight-regular);
40
+ --salt-text-action-fontWeight-strong: var(--salt-typography-fontWeight-bold);
41
+
42
+ /* Heading */
43
+ --salt-text-heading-fontFamily: var(--salt-typography-fontFamily-nunito);
44
+ --salt-text-heading-fontWeight: var(--salt-typography-fontWeight-semiBold);
45
+ --salt-text-heading-fontWeight-small: var(--salt-typography-fontWeight-regular);
46
+ --salt-text-heading-fontWeight-strong: var(--salt-typography-fontWeight-bold);
47
+
48
+ /* Display */
49
+ --salt-text-display-fontFamily: var(--salt-typography-fontFamily-nunito);
50
+ --salt-text-display-letterSpacing: 0;
51
+ --salt-text-display-textTransform: none;
52
+ --salt-text-display-fontStyle: var(--salt-typography-fontStyle-normal);
53
+ --salt-text-display-fontWeight: var(--salt-typography-fontWeight-semiBold);
54
+ --salt-text-display-fontWeight-small: var(--salt-typography-fontWeight-regular);
55
+ --salt-text-display-fontWeight-strong: var(--salt-typography-fontWeight-bold);
81
56
  }
82
57
 
83
58
  /* Sizes by density */
@@ -224,3 +199,39 @@
224
199
  --salt-text-notation-fontSize: 8px;
225
200
  --salt-text-notation-lineHeight: 10px;
226
201
  }
202
+
203
+ .salt-density-mobile {
204
+ --salt-text-h1-fontSize: 24px;
205
+ --salt-text-h1-lineHeight: 31px;
206
+
207
+ --salt-text-h2-fontSize: 22px;
208
+ --salt-text-h2-lineHeight: 29px;
209
+
210
+ --salt-text-h3-fontSize: 20px;
211
+ --salt-text-h3-lineHeight: 26px;
212
+
213
+ --salt-text-h4-fontSize: 16px;
214
+ --salt-text-h4-lineHeight: 21px;
215
+
216
+ --salt-text-label-fontSize: 14px;
217
+ --salt-text-label-lineHeight: 18px;
218
+
219
+ --salt-text-fontSize: 16px;
220
+ --salt-text-lineHeight: 21px;
221
+ --salt-text-minHeight: 21px;
222
+
223
+ --salt-text-display1-fontSize: 40px;
224
+ --salt-text-display1-lineHeight: 52px;
225
+
226
+ --salt-text-display2-fontSize: 36px;
227
+ --salt-text-display2-lineHeight: 47px;
228
+
229
+ --salt-text-display3-fontSize: 32px;
230
+ --salt-text-display3-lineHeight: 42px;
231
+
232
+ --salt-text-display4-fontSize: 28px;
233
+ --salt-text-display4-lineHeight: 36px;
234
+
235
+ --salt-text-notation-fontSize: 12px;
236
+ --salt-text-notation-lineHeight: 16px;
237
+ }
package/css/next/deprecated/characteristics.css CHANGED
@@ -4,6 +4,8 @@
4
4
  --salt-navigable-background-hover: var(--salt-palette-alpha-contrast-lowest);
5
5
 
6
6
  --salt-selectable-background-blurSelected: var(--salt-palette-neutral-weakest);
7
+ --salt-selectable-borderColor-disabled: var(--salt-palette-neutral-disabled);
8
+ --salt-selectable-foreground-disabled: var(--salt-palette-neutral-strong-disabled);
7
9
 
8
10
  --salt-status-static-foreground: var(--salt-palette-foreground-secondary); /* Use --salt-content-secondary-foreground */
9
11
 
@@ -14,52 +16,52 @@
14
16
  --salt-track-borderColor-disabled: var(--salt-palette-alpha-contrast-lower); /* Use --salt-sentiment-neutral-track-disabled */
15
17
 
16
18
  --salt-actionable-accented-bold-background-disabled: var(--salt-palette-accent-disabled);
17
- --salt-actionable-accented-bold-borderColor-disabled: var(--salt-palette-alpha-none);
19
+ --salt-actionable-accented-bold-borderColor-disabled: var(--salt-color-transparent);
18
20
  --salt-actionable-accented-bold-foreground-disabled: var(--salt-palette-foreground-primary-alt-disabled);
19
- --salt-actionable-accented-background-disabled: var(--salt-palette-alpha-none);
21
+ --salt-actionable-accented-background-disabled: var(--salt-color-transparent);
20
22
  --salt-actionable-accented-borderColor-disabled: var(--salt-palette-accent-disabled);
21
23
  --salt-actionable-accented-foreground-disabled: var(--salt-palette-accent-strong-disabled);
22
- --salt-actionable-accented-subtle-background-disabled: var(--salt-palette-alpha-none);
23
- --salt-actionable-accented-subtle-borderColor-disabled: var(--salt-palette-alpha-none);
24
+ --salt-actionable-accented-subtle-background-disabled: var(--salt-color-transparent);
25
+ --salt-actionable-accented-subtle-borderColor-disabled: var(--salt-color-transparent);
24
26
  --salt-actionable-accented-subtle-foreground-disabled: var(--salt-palette-accent-strong-disabled);
25
27
  --salt-actionable-bold-background-disabled: var(--salt-palette-neutral-disabled);
26
- --salt-actionable-bold-borderColor-disabled: var(--salt-palette-alpha-none);
28
+ --salt-actionable-bold-borderColor-disabled: var(--salt-color-transparent);
27
29
  --salt-actionable-bold-foreground-disabled: var(--salt-palette-foreground-primary-alt-disabled);
28
- --salt-actionable-background-disabled: var(--salt-palette-alpha-none);
30
+ --salt-actionable-background-disabled: var(--salt-color-transparent);
29
31
  --salt-actionable-borderColor-disabled: var(--salt-palette-neutral-disabled);
30
32
  --salt-actionable-foreground-disabled: var(--salt-palette-foreground-primary-disabled);
31
- --salt-actionable-subtle-background-disabled: var(--salt-palette-alpha-none);
32
- --salt-actionable-subtle-borderColor-disabled: var(--salt-palette-alpha-none);
33
+ --salt-actionable-subtle-background-disabled: var(--salt-color-transparent);
34
+ --salt-actionable-subtle-borderColor-disabled: var(--salt-color-transparent);
33
35
  --salt-actionable-subtle-foreground-disabled: var(--salt-palette-foreground-primary-disabled);
34
36
  --salt-actionable-negative-bold-background-disabled: var(--salt-palette-negative-disabled);
35
- --salt-actionable-negative-bold-borderColor-disabled: var(--salt-palette-alpha-none);
37
+ --salt-actionable-negative-bold-borderColor-disabled: var(--salt-color-transparent);
36
38
  --salt-actionable-negative-bold-foreground-disabled: var(--salt-palette-foreground-primary-alt-disabled);
37
- --salt-actionable-negative-background-disabled: var(--salt-palette-alpha-none);
39
+ --salt-actionable-negative-background-disabled: var(--salt-color-transparent);
38
40
  --salt-actionable-negative-borderColor-disabled: var(--salt-palette-negative-disabled);
39
41
  --salt-actionable-negative-foreground-disabled: var(--salt-palette-negative-strong-disabled);
40
- --salt-actionable-negative-subtle-background-disabled: var(--salt-palette-alpha-none);
41
- --salt-actionable-negative-subtle-borderColor-disabled: var(--salt-palette-alpha-none);
42
+ --salt-actionable-negative-subtle-background-disabled: var(--salt-color-transparent);
43
+ --salt-actionable-negative-subtle-borderColor-disabled: var(--salt-color-transparent);
42
44
  --salt-actionable-negative-subtle-foreground-disabled: var(--salt-palette-negative-strong-disabled);
43
45
  --salt-actionable-positive-bold-background-disabled: var(--salt-palette-positive-disabled);
44
- --salt-actionable-positive-bold-borderColor-disabled: var(--salt-palette-alpha-none);
46
+ --salt-actionable-positive-bold-borderColor-disabled: var(--salt-color-transparent);
45
47
  --salt-actionable-positive-bold-foreground-disabled: var(--salt-palette-foreground-primary-alt-disabled);
46
- --salt-actionable-positive-background-disabled: var(--salt-palette-alpha-none);
48
+ --salt-actionable-positive-background-disabled: var(--salt-color-transparent);
47
49
  --salt-actionable-positive-borderColor-disabled: var(--salt-palette-positive-disabled);
48
50
  --salt-actionable-positive-foreground-disabled: var(--salt-palette-positive-strong-disabled);
49
- --salt-actionable-positive-subtle-background-disabled: var(--salt-palette-alpha-none);
50
- --salt-actionable-positive-subtle-borderColor-disabled: var(--salt-palette-alpha-none);
51
+ --salt-actionable-positive-subtle-background-disabled: var(--salt-color-transparent);
52
+ --salt-actionable-positive-subtle-borderColor-disabled: var(--salt-color-transparent);
51
53
  --salt-actionable-positive-subtle-foreground-disabled: var(--salt-palette-positive-strong-disabled);
52
54
  --salt-actionable-caution-bold-background-disabled: var(--salt-palette-warning-disabled);
53
- --salt-actionable-caution-bold-borderColor-disabled: var(--salt-palette-alpha-none);
55
+ --salt-actionable-caution-bold-borderColor-disabled: var(--salt-color-transparent);
54
56
  --salt-actionable-caution-bold-foreground-disabled: var(--salt-palette-foreground-primary-alt-disabled);
55
- --salt-actionable-caution-background-disabled: var(--salt-palette-alpha-none);
57
+ --salt-actionable-caution-background-disabled: var(--salt-color-transparent);
56
58
  --salt-actionable-caution-borderColor-disabled: var(--salt-palette-warning-disabled);
57
59
  --salt-actionable-caution-foreground-disabled: var(--salt-palette-warning-strong-disabled);
58
- --salt-actionable-caution-subtle-background-disabled: var(--salt-palette-alpha-none);
59
- --salt-actionable-caution-subtle-borderColor-disabled: var(--salt-palette-alpha-none);
60
+ --salt-actionable-caution-subtle-background-disabled: var(--salt-color-transparent);
61
+ --salt-actionable-caution-subtle-borderColor-disabled: var(--salt-color-transparent);
60
62
  --salt-actionable-caution-subtle-foreground-disabled: var(--salt-palette-warning-strong-disabled);
61
63
 
62
- --salt-separable-background: var(--salt-palette-alpha-none);
64
+ --salt-separable-background: var(--salt-color-transparent);
63
65
 
64
66
  --salt-category-1-bold-foreground: var(--salt-palette-foreground-primary-alt);
65
67
  --salt-category-2-bold-foreground: var(--salt-palette-foreground-primary-alt);
@@ -81,10 +83,98 @@
81
83
  --salt-category-18-bold-foreground: var(--salt-palette-foreground-primary-alt);
82
84
  --salt-category-19-bold-foreground: var(--salt-palette-foreground-primary-alt);
83
85
  --salt-category-20-bold-foreground: var(--salt-palette-foreground-primary-alt);
86
+ --salt-category-1-subtle-foreground: var(--salt-palette-categorical-1-strong);
87
+ --salt-category-1-subtle-background: var(--salt-palette-categorical-1-weakest);
88
+ --salt-category-1-subtle-borderColor: var(--salt-palette-categorical-1);
89
+ --salt-category-2-subtle-foreground: var(--salt-palette-categorical-2-strong);
90
+ --salt-category-2-subtle-background: var(--salt-palette-categorical-2-weakest);
91
+ --salt-category-2-subtle-borderColor: var(--salt-palette-categorical-2);
92
+ --salt-category-3-subtle-foreground: var(--salt-palette-categorical-3-strong);
93
+ --salt-category-3-subtle-background: var(--salt-palette-categorical-3-weakest);
94
+ --salt-category-3-subtle-borderColor: var(--salt-palette-categorical-3);
95
+ --salt-category-4-subtle-foreground: var(--salt-palette-categorical-4-strong);
96
+ --salt-category-4-subtle-background: var(--salt-palette-categorical-4-weakest);
97
+ --salt-category-4-subtle-borderColor: var(--salt-palette-categorical-4);
98
+ --salt-category-5-subtle-foreground: var(--salt-palette-categorical-5-strong);
99
+ --salt-category-5-subtle-background: var(--salt-palette-categorical-5-weakest);
100
+ --salt-category-5-subtle-borderColor: var(--salt-palette-categorical-5);
101
+ --salt-category-6-subtle-foreground: var(--salt-palette-categorical-6-strong);
102
+ --salt-category-6-subtle-background: var(--salt-palette-categorical-6-weakest);
103
+ --salt-category-6-subtle-borderColor: var(--salt-palette-categorical-6);
104
+ --salt-category-7-subtle-foreground: var(--salt-palette-categorical-7-strong);
105
+ --salt-category-7-subtle-background: var(--salt-palette-categorical-7-weakest);
106
+ --salt-category-7-subtle-borderColor: var(--salt-palette-categorical-7);
107
+ --salt-category-8-subtle-foreground: var(--salt-palette-categorical-8-strong);
108
+ --salt-category-8-subtle-background: var(--salt-palette-categorical-8-weakest);
109
+ --salt-category-8-subtle-borderColor: var(--salt-palette-categorical-8);
110
+ --salt-category-9-subtle-foreground: var(--salt-palette-categorical-9-strong);
111
+ --salt-category-9-subtle-background: var(--salt-palette-categorical-9-weakest);
112
+ --salt-category-9-subtle-borderColor: var(--salt-palette-categorical-9);
113
+ --salt-category-10-subtle-foreground: var(--salt-palette-categorical-10-strong);
114
+ --salt-category-10-subtle-background: var(--salt-palette-categorical-10-weakest);
115
+ --salt-category-10-subtle-borderColor: var(--salt-palette-categorical-10);
116
+ --salt-category-11-subtle-foreground: var(--salt-palette-categorical-11-strong);
117
+ --salt-category-11-subtle-background: var(--salt-palette-categorical-11-weakest);
118
+ --salt-category-11-subtle-borderColor: var(--salt-palette-categorical-11);
119
+ --salt-category-12-subtle-foreground: var(--salt-palette-categorical-12-strong);
120
+ --salt-category-12-subtle-background: var(--salt-palette-categorical-12-weakest);
121
+ --salt-category-12-subtle-borderColor: var(--salt-palette-categorical-12);
122
+ --salt-category-13-subtle-foreground: var(--salt-palette-categorical-13-strong);
123
+ --salt-category-13-subtle-background: var(--salt-palette-categorical-13-weakest);
124
+ --salt-category-13-subtle-borderColor: var(--salt-palette-categorical-13);
125
+ --salt-category-14-subtle-foreground: var(--salt-palette-categorical-14-strong);
126
+ --salt-category-14-subtle-background: var(--salt-palette-categorical-14-weakest);
127
+ --salt-category-14-subtle-borderColor: var(--salt-palette-categorical-14);
128
+ --salt-category-15-subtle-foreground: var(--salt-palette-categorical-15-strong);
129
+ --salt-category-15-subtle-background: var(--salt-palette-categorical-15-weakest);
130
+ --salt-category-15-subtle-borderColor: var(--salt-palette-categorical-15);
131
+ --salt-category-16-subtle-foreground: var(--salt-palette-categorical-16-strong);
132
+ --salt-category-16-subtle-background: var(--salt-palette-categorical-16-weakest);
133
+ --salt-category-16-subtle-borderColor: var(--salt-palette-categorical-16);
134
+ --salt-category-17-subtle-foreground: var(--salt-palette-categorical-17-strong);
135
+ --salt-category-17-subtle-background: var(--salt-palette-categorical-17-weakest);
136
+ --salt-category-17-subtle-borderColor: var(--salt-palette-categorical-17);
137
+ --salt-category-18-subtle-foreground: var(--salt-palette-categorical-18-strong);
138
+ --salt-category-18-subtle-background: var(--salt-palette-categorical-18-weakest);
139
+ --salt-category-18-subtle-borderColor: var(--salt-palette-categorical-18);
140
+ --salt-category-19-subtle-foreground: var(--salt-palette-categorical-19-strong);
141
+ --salt-category-19-subtle-background: var(--salt-palette-categorical-19-weakest);
142
+ --salt-category-19-subtle-borderColor: var(--salt-palette-categorical-19);
143
+ --salt-category-20-subtle-foreground: var(--salt-palette-categorical-20-strong);
144
+ --salt-category-20-subtle-background: var(--salt-palette-categorical-20-weakest);
145
+ --salt-category-20-subtle-borderColor: var(--salt-palette-categorical-20);
84
146
 
85
147
  --salt-accent-foreground: var(--salt-palette-foreground-primary-alt);
148
+ --salt-accent-borderColor-disabled: var(--salt-palette-accent-disabled);
149
+ --salt-accent-background: var(--salt-palette-accent);
150
+ --salt-accent-background-disabled: var(--salt-palette-accent-disabled);
151
+ --salt-accent-borderColor: var(--salt-palette-accent);
86
152
 
87
153
  --salt-content-foreground-highlight: var(--salt-palette-accent-weaker);
88
154
  --salt-content-foreground-active: var(--salt-palette-accent-stronger);
89
155
  --salt-content-foreground-hover: var(--salt-palette-accent-strong);
156
+
157
+ --salt-editable-primary-background-active: var(--salt-palette-background-primary);
158
+ --salt-editable-primary-background-hover: var(--salt-palette-background-primary);
159
+ --salt-editable-primary-background-readonly: var(--salt-color-transparent);
160
+ --salt-editable-secondary-background-active: var(--salt-palette-background-secondary);
161
+ --salt-editable-secondary-background-hover: var(--salt-palette-background-secondary);
162
+ --salt-editable-secondary-background-readonly: var(--salt-color-transparent);
163
+
164
+ --salt-sentiment-neutral-track-disabled: var(--salt-palette-alpha-contrast-lower);
165
+
166
+ --salt-container-primary-borderColor: var(--salt-palette-alpha-contrast-medium); /* Use --salt-container-bold-borderColor */
167
+ --salt-container-primary-borderColor-disabled: var(--salt-palette-alpha-contrast-lower); /* Use --salt-container-bold-borderColor-disabled */
168
+ --salt-container-secondary-borderColor: var(--salt-palette-alpha-contrast-medium); /* Use --salt-container-bold-borderColor */
169
+ --salt-container-secondary-borderColor-disabled: var(--salt-palette-alpha-contrast-lower); /* Use --salt-container-bold-borderColor-disabled */
170
+ --salt-container-tertiary-borderColor: var(--salt-palette-alpha-contrast-medium); /* Use --salt-container-bold-borderColor */
171
+ --salt-container-tertiary-borderColor-disabled: var(--salt-palette-alpha-contrast-lower); /* Use --salt-container-bold-borderColor-disabled */
172
+ --salt-content-bold-foreground-disabled: var(--salt-palette-foreground-primary-alt-disabled);
173
+ --salt-selectable-borderColor-selectedDisabled: var(--salt-palette-accent-disabled);
174
+ --salt-selectable-foreground-selectedDisabled: var(--salt-palette-accent-disabled);
175
+ --salt-selectable-background-disabled: var(--salt-color-transparent);
176
+ --salt-selectable-background-selectedDisabled: var(--salt-palette-accent-weaker-disabled);
177
+ }
178
+ .salt-theme-next.salt-theme.vuu-theme {
179
+ --salt-sentiment-accent-background-disabled: var(--salt-palette-accent-disabled);
90
180
  }
package/css/next/deprecated/foundations.css CHANGED
@@ -1,4 +1,9 @@
1
1
  .salt-theme.salt-theme-next.vuu-theme {
2
2
  --salt-color-background-gradientlight-rgb: var(--salt-color-background-titanium-rgb);
3
3
  --salt-color-background-gradientlight: var(--salt-color-background-titanium);
4
+
5
+ --salt-color-gray-400-40a: rgba(var(--salt-color-gray-400-rgb), 0.4);
6
+
7
+ --salt-color-logo-brown-rgb: var(--salt-color-jpmBrown-rgb);
8
+ --salt-color-logo-brown: var(--salt-color-jpmBrown);
4
9
  }
package/css/next/deprecated/palette.css CHANGED
@@ -1,4 +1,4 @@
1
- .salt-theme.vuu-theme[data-mode="light"] {
1
+ .salt-theme-next.salt-theme.vuu-theme[data-mode="light"] {
2
2
  --salt-palette-foreground-active: var(--salt-color-blue-700);
3
3
  --salt-palette-foreground-hover: var(--salt-color-blue-600);
4
4
 
@@ -27,9 +27,10 @@
27
27
  --salt-palette-neutral-weaker-disabled: var(--salt-color-gray-300-40a);
28
28
  --salt-palette-neutral-weaker-readonly: var(--salt-color-gray-300-10a);
29
29
  --salt-palette-neutral-weak-disabled: var(--salt-color-gray-400-40a);
30
+ --salt-palette-neutral-strong-disabled: var(--salt-color-gray-600-40a);
30
31
  }
31
32
 
32
- .salt-theme.vuu-theme[data-mode="dark"] {
33
+ .salt-theme-next.salt-theme.vuu-theme[data-mode="dark"] {
33
34
  --salt-palette-foreground-active: var(--salt-color-blue-300);
34
35
  --salt-palette-foreground-hover: var(--salt-color-blue-400);
35
36
 
@@ -58,6 +59,11 @@
58
59
  --salt-palette-neutral-weaker-disabled: var(--salt-color-gray-700-40a);
59
60
  --salt-palette-neutral-weaker-readonly: var(--salt-color-gray-700-10a);
60
61
  --salt-palette-neutral-weak-disabled: var(--salt-color-gray-600-40a);
62
+ --salt-palette-neutral-strong-disabled: var(--salt-color-gray-400-40a);
63
+ }
64
+
65
+ .salt-theme-next.salt-theme.vuu-theme {
66
+ --salt-palette-alpha-none: transparent;
61
67
  }
62
68
 
63
69
  .salt-theme.salt-theme-next.vuu-theme[data-mode="light"][data-accent="blue"] {
@@ -65,6 +71,8 @@
65
71
  --salt-palette-accent-action-hover: var(--salt-color-blue-600);
66
72
  --salt-palette-accent-strong-disabled: var(--salt-color-blue-600-40a);
67
73
  --salt-palette-accent-stronger-disabled: var(--salt-color-blue-700-40a);
74
+ --salt-palette-accent-disabled: var(--salt-color-blue-500-40a);
75
+ --salt-palette-accent-weaker-disabled: var(--salt-color-blue-200-40a);
68
76
  }
69
77
 
70
78
  .salt-theme.salt-theme-next.vuu-theme[data-mode="dark"][data-accent="blue"] {
@@ -72,6 +80,8 @@
72
80
  --salt-palette-accent-action-hover: var(--salt-color-blue-600);
73
81
  --salt-palette-accent-strong-disabled: var(--salt-color-blue-400-40a);
74
82
  --salt-palette-accent-stronger-disabled: var(--salt-color-blue-300-40a);
83
+ --salt-palette-accent-disabled: var(--salt-color-blue-500-40a);
84
+ --salt-palette-accent-weaker-disabled: var(--salt-color-blue-800-40a);
75
85
  }
76
86
 
77
87
  .salt-theme.salt-theme-next.vuu-theme[data-mode="light"][data-accent="teal"] {
@@ -79,6 +89,8 @@
79
89
  --salt-palette-accent-action-hover: var(--salt-color-teal-600);
80
90
  --salt-palette-accent-strong-disabled: var(--salt-color-teal-600-40a);
81
91
  --salt-palette-accent-stronger-disabled: var(--salt-color-teal-700-40a);
92
+ --salt-palette-accent-disabled: var(--salt-color-teal-500-40a);
93
+ --salt-palette-accent-weaker-disabled: var(--salt-color-teal-200-40a);
82
94
  }
83
95
 
84
96
  .salt-theme.salt-theme-next.vuu-theme[data-mode="dark"][data-accent="teal"] {
@@ -86,4 +98,39 @@
86
98
  --salt-palette-accent-action-hover: var(--salt-color-teal-600);
87
99
  --salt-palette-accent-strong-disabled: var(--salt-color-teal-400-40a);
88
100
  --salt-palette-accent-stronger-disabled: var(--salt-color-teal-300-40a);
101
+ --salt-palette-accent-disabled: var(--salt-color-teal-500-40a);
102
+ --salt-palette-accent-weaker-disabled: var(--salt-color-teal-800-40a);
103
+ }
104
+
105
+ .salt-theme-next.salt-theme.vuu-theme {
106
+ --salt-palette-text-fontFamily: var(--salt-typography-fontFamily-nunito);
107
+ --salt-palette-text-fontFamily-heading: var(--salt-typography-fontFamily-nunito);
108
+ --salt-palette-text-fontFamily-action: var(--salt-typography-fontFamily-nunito);
109
+ --salt-palette-text-fontFamily-code: var(--salt-typography-fontFamily-ptMono);
110
+
111
+ --salt-palette-text-display-fontWeight: var(--salt-typography-fontWeight-semiBold);
112
+ --salt-palette-text-display-fontWeight-small: var(--salt-typography-fontWeight-regular);
113
+ --salt-palette-text-display-fontWeight-strong: var(--salt-typography-fontWeight-bold);
114
+
115
+ --salt-palette-text-heading-fontWeight: var(--salt-typography-fontWeight-semiBold);
116
+ --salt-palette-text-heading-fontWeight-small: var(--salt-typography-fontWeight-regular);
117
+ --salt-palette-text-heading-fontWeight-strong: var(--salt-typography-fontWeight-bold);
118
+
119
+ --salt-palette-text-body-fontWeight: var(--salt-typography-fontWeight-regular);
120
+ --salt-palette-text-body-fontWeight-small: var(--salt-typography-fontWeight-light);
121
+ --salt-palette-text-body-fontWeight-strong: var(--salt-typography-fontWeight-semiBold);
122
+
123
+ --salt-palette-text-notation-fontWeight: var(--salt-typography-fontWeight-semiBold);
124
+ --salt-palette-text-notation-fontWeight-small: var(--salt-typography-fontWeight-regular);
125
+ --salt-palette-text-notation-fontWeight-strong: var(--salt-typography-fontWeight-bold);
126
+
127
+ --salt-palette-text-action-fontWeight: var(--salt-typography-fontWeight-semiBold);
128
+ --salt-palette-text-action-fontWeight-small: var(--salt-typography-fontWeight-regular);
129
+ --salt-palette-text-action-fontWeight-strong: var(--salt-typography-fontWeight-bold);
130
+ }
131
+ .salt-theme.salt-theme-next.vuu-theme[data-mode="light"] {
132
+ --salt-palette-foreground-primary-alt-disabled: var(--salt-color-white-40a);
133
+ }
134
+ .salt-theme.salt-theme-next.vuu-theme[data-mode="dark"] {
135
+ --salt-palette-foreground-primary-alt-disabled: var(--salt-color-white-40a);
89
136
  }
package/css/next/foundations/alpha.css CHANGED
@@ -8,7 +8,6 @@
8
8
  --salt-color-blue-800-40a: rgba(var(--salt-color-blue-800-rgb), 0.4);
9
9
  --salt-color-gray-300-10a: rgba(var(--salt-color-gray-300-rgb), 0.1);
10
10
  --salt-color-gray-300-40a: rgba(var(--salt-color-gray-300-rgb), 0.4);
11
- --salt-color-gray-400-40a: rgba(var(--salt-color-gray-400-rgb), 0.4);
12
11
  --salt-color-gray-500-10a: rgba(var(--salt-color-gray-500-rgb), 0.1);
13
12
  --salt-color-gray-500-40a: rgba(var(--salt-color-gray-500-rgb), 0.4);
14
13
  --salt-color-gray-600-40a: rgba(var(--salt-color-gray-600-rgb), 0.4);