@vuu-ui/vuu-theme 4.0.0-alpha.2 → 4.0.0-alpha.21

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 (40) hide show
  1. package/css/components/checkbox.css +5 -0
  2. package/css/deprecated/characteristics.css +39 -0
  3. package/css/deprecated/foundations.css +1 -0
  4. package/css/foundations/alpha.css +0 -1
  5. package/css/foundations/animation.css +2 -1
  6. package/css/foundations/borderStyle.css +0 -1
  7. package/css/foundations/color.css +1 -8
  8. package/css/foundations/cursor.css +0 -1
  9. package/css/foundations/curve.css +9 -4
  10. package/css/foundations/duration.css +0 -1
  11. package/css/foundations/size.css +3 -1
  12. package/css/foundations/spacing.css +33 -0
  13. package/css/foundations/typography.css +6 -2
  14. package/css/foundations/zindex.css +2 -1
  15. package/css/global.css +1 -4
  16. package/css/next/characteristics/actionable.css +35 -25
  17. package/css/next/characteristics/category.css +100 -60
  18. package/css/next/characteristics/container.css +9 -7
  19. package/css/next/characteristics/content.css +1 -1
  20. package/css/next/characteristics/editable.css +5 -6
  21. package/css/next/characteristics/focused.css +3 -2
  22. package/css/next/characteristics/layout.css +12 -0
  23. package/css/next/characteristics/selectable.css +3 -9
  24. package/css/next/characteristics/sentiment.css +11 -1
  25. package/css/next/characteristics/separable.css +1 -1
  26. package/css/next/characteristics/text.css +78 -67
  27. package/css/next/deprecated/characteristics.css +111 -21
  28. package/css/next/deprecated/foundations.css +5 -0
  29. package/css/next/deprecated/palette.css +49 -2
  30. package/css/next/foundations/alpha.css +0 -1
  31. package/css/next/foundations/color.css +188 -2
  32. package/css/next/palette/accent.css +0 -2
  33. package/css/next/palette/alpha.css +18 -2
  34. package/css/next/palette/brand.css +6 -0
  35. package/css/next/palette/foreground.css +0 -2
  36. package/css/next/palette/neutral.css +0 -2
  37. package/css/theme-next.css +2 -2
  38. package/index.css.d.ts +2 -0
  39. package/package.json +8 -1
  40. package/reset.css +12 -0
package/css/next/characteristics/category.css CHANGED
@@ -1,121 +1,161 @@
1
1
  .salt-theme.salt-theme-next.vuu-theme {
2
- --salt-category-1-subtle-foreground: var(--salt-palette-categorical-1-strong);
3
- --salt-category-1-subtle-background: var(--salt-palette-categorical-1-weakest);
4
- --salt-category-1-subtle-borderColor: var(--salt-palette-categorical-1);
2
+ --salt-category-1-foreground: var(--salt-palette-categorical-1-strong);
3
+ --salt-category-1-background: var(--salt-palette-categorical-1-weakest);
4
+ --salt-category-1-borderColor: var(--salt-palette-categorical-1);
5
5
 
6
6
  --salt-category-1-bold-background: var(--salt-palette-categorical-1);
7
7
 
8
- --salt-category-2-subtle-foreground: var(--salt-palette-categorical-2-strong);
9
- --salt-category-2-subtle-background: var(--salt-palette-categorical-2-weakest);
10
- --salt-category-2-subtle-borderColor: var(--salt-palette-categorical-2);
8
+ --salt-category-1-dataviz: var(--salt-palette-categorical-1);
9
+
10
+ --salt-category-2-foreground: var(--salt-palette-categorical-2-strong);
11
+ --salt-category-2-background: var(--salt-palette-categorical-2-weakest);
12
+ --salt-category-2-borderColor: var(--salt-palette-categorical-2);
11
13
 
12
14
  --salt-category-2-bold-background: var(--salt-palette-categorical-2);
13
15
 
14
- --salt-category-3-subtle-foreground: var(--salt-palette-categorical-3-strong);
15
- --salt-category-3-subtle-background: var(--salt-palette-categorical-3-weakest);
16
- --salt-category-3-subtle-borderColor: var(--salt-palette-categorical-3);
16
+ --salt-category-2-dataviz: var(--salt-palette-categorical-2);
17
+
18
+ --salt-category-3-foreground: var(--salt-palette-categorical-3-strong);
19
+ --salt-category-3-background: var(--salt-palette-categorical-3-weakest);
20
+ --salt-category-3-borderColor: var(--salt-palette-categorical-3);
17
21
 
18
22
  --salt-category-3-bold-background: var(--salt-palette-categorical-3);
19
23
 
20
- --salt-category-4-subtle-foreground: var(--salt-palette-categorical-4-strong);
21
- --salt-category-4-subtle-background: var(--salt-palette-categorical-4-weakest);
22
- --salt-category-4-subtle-borderColor: var(--salt-palette-categorical-4);
24
+ --salt-category-3-dataviz: var(--salt-palette-categorical-3);
25
+
26
+ --salt-category-4-foreground: var(--salt-palette-categorical-4-strong);
27
+ --salt-category-4-background: var(--salt-palette-categorical-4-weakest);
28
+ --salt-category-4-borderColor: var(--salt-palette-categorical-4);
23
29
 
24
30
  --salt-category-4-bold-background: var(--salt-palette-categorical-4);
25
31
 
26
- --salt-category-5-subtle-foreground: var(--salt-palette-categorical-5-strong);
27
- --salt-category-5-subtle-background: var(--salt-palette-categorical-5-weakest);
28
- --salt-category-5-subtle-borderColor: var(--salt-palette-categorical-5);
32
+ --salt-category-4-dataviz: var(--salt-palette-categorical-4);
33
+
34
+ --salt-category-5-foreground: var(--salt-palette-categorical-5-strong);
35
+ --salt-category-5-background: var(--salt-palette-categorical-5-weakest);
36
+ --salt-category-5-borderColor: var(--salt-palette-categorical-5);
29
37
 
30
38
  --salt-category-5-bold-background: var(--salt-palette-categorical-5);
31
39
 
32
- --salt-category-6-subtle-foreground: var(--salt-palette-categorical-6-strong);
33
- --salt-category-6-subtle-background: var(--salt-palette-categorical-6-weakest);
34
- --salt-category-6-subtle-borderColor: var(--salt-palette-categorical-6);
40
+ --salt-category-5-dataviz: var(--salt-palette-categorical-5);
41
+
42
+ --salt-category-6-foreground: var(--salt-palette-categorical-6-strong);
43
+ --salt-category-6-background: var(--salt-palette-categorical-6-weakest);
44
+ --salt-category-6-borderColor: var(--salt-palette-categorical-6);
35
45
 
36
46
  --salt-category-6-bold-background: var(--salt-palette-categorical-6);
37
47
 
38
- --salt-category-7-subtle-foreground: var(--salt-palette-categorical-7-strong);
39
- --salt-category-7-subtle-background: var(--salt-palette-categorical-7-weakest);
40
- --salt-category-7-subtle-borderColor: var(--salt-palette-categorical-7);
48
+ --salt-category-6-dataviz: var(--salt-palette-categorical-6);
49
+
50
+ --salt-category-7-foreground: var(--salt-palette-categorical-7-strong);
51
+ --salt-category-7-background: var(--salt-palette-categorical-7-weakest);
52
+ --salt-category-7-borderColor: var(--salt-palette-categorical-7);
41
53
 
42
54
  --salt-category-7-bold-background: var(--salt-palette-categorical-7);
43
55
 
44
- --salt-category-8-subtle-foreground: var(--salt-palette-categorical-8-strong);
45
- --salt-category-8-subtle-background: var(--salt-palette-categorical-8-weakest);
46
- --salt-category-8-subtle-borderColor: var(--salt-palette-categorical-8);
56
+ --salt-category-7-dataviz: var(--salt-palette-categorical-7);
57
+
58
+ --salt-category-8-foreground: var(--salt-palette-categorical-8-strong);
59
+ --salt-category-8-background: var(--salt-palette-categorical-8-weakest);
60
+ --salt-category-8-borderColor: var(--salt-palette-categorical-8);
47
61
 
48
62
  --salt-category-8-bold-background: var(--salt-palette-categorical-8);
49
63
 
50
- --salt-category-9-subtle-foreground: var(--salt-palette-categorical-9-strong);
51
- --salt-category-9-subtle-background: var(--salt-palette-categorical-9-weakest);
52
- --salt-category-9-subtle-borderColor: var(--salt-palette-categorical-9);
64
+ --salt-category-8-dataviz: var(--salt-palette-categorical-8);
65
+
66
+ --salt-category-9-foreground: var(--salt-palette-categorical-9-strong);
67
+ --salt-category-9-background: var(--salt-palette-categorical-9-weakest);
68
+ --salt-category-9-borderColor: var(--salt-palette-categorical-9);
53
69
 
54
70
  --salt-category-9-bold-background: var(--salt-palette-categorical-9);
55
71
 
56
- --salt-category-10-subtle-foreground: var(--salt-palette-categorical-10-strong);
57
- --salt-category-10-subtle-background: var(--salt-palette-categorical-10-weakest);
58
- --salt-category-10-subtle-borderColor: var(--salt-palette-categorical-10);
72
+ --salt-category-9-dataviz: var(--salt-palette-categorical-9);
73
+
74
+ --salt-category-10-foreground: var(--salt-palette-categorical-10-strong);
75
+ --salt-category-10-background: var(--salt-palette-categorical-10-weakest);
76
+ --salt-category-10-borderColor: var(--salt-palette-categorical-10);
59
77
 
60
78
  --salt-category-10-bold-background: var(--salt-palette-categorical-10);
61
79
 
62
- --salt-category-11-subtle-foreground: var(--salt-palette-categorical-11-strong);
63
- --salt-category-11-subtle-background: var(--salt-palette-categorical-11-weakest);
64
- --salt-category-11-subtle-borderColor: var(--salt-palette-categorical-11);
80
+ --salt-category-10-dataviz: var(--salt-palette-categorical-10);
81
+
82
+ --salt-category-11-foreground: var(--salt-palette-categorical-11-strong);
83
+ --salt-category-11-background: var(--salt-palette-categorical-11-weakest);
84
+ --salt-category-11-borderColor: var(--salt-palette-categorical-11);
65
85
 
66
86
  --salt-category-11-bold-background: var(--salt-palette-categorical-11);
67
87
 
68
- --salt-category-12-subtle-foreground: var(--salt-palette-categorical-12-strong);
69
- --salt-category-12-subtle-background: var(--salt-palette-categorical-12-weakest);
70
- --salt-category-12-subtle-borderColor: var(--salt-palette-categorical-12);
88
+ --salt-category-11-dataviz: var(--salt-palette-categorical-11);
89
+
90
+ --salt-category-12-foreground: var(--salt-palette-categorical-12-strong);
91
+ --salt-category-12-background: var(--salt-palette-categorical-12-weakest);
92
+ --salt-category-12-borderColor: var(--salt-palette-categorical-12);
71
93
 
72
94
  --salt-category-12-bold-background: var(--salt-palette-categorical-12);
73
95
 
74
- --salt-category-13-subtle-foreground: var(--salt-palette-categorical-13-strong);
75
- --salt-category-13-subtle-background: var(--salt-palette-categorical-13-weakest);
76
- --salt-category-13-subtle-borderColor: var(--salt-palette-categorical-13);
96
+ --salt-category-12-dataviz: var(--salt-palette-categorical-12);
97
+
98
+ --salt-category-13-foreground: var(--salt-palette-categorical-13-strong);
99
+ --salt-category-13-background: var(--salt-palette-categorical-13-weakest);
100
+ --salt-category-13-borderColor: var(--salt-palette-categorical-13);
77
101
 
78
102
  --salt-category-13-bold-background: var(--salt-palette-categorical-13);
79
103
 
80
- --salt-category-14-subtle-foreground: var(--salt-palette-categorical-14-strong);
81
- --salt-category-14-subtle-background: var(--salt-palette-categorical-14-weakest);
82
- --salt-category-14-subtle-borderColor: var(--salt-palette-categorical-14);
104
+ --salt-category-13-dataviz: var(--salt-palette-categorical-13);
105
+
106
+ --salt-category-14-foreground: var(--salt-palette-categorical-14-strong);
107
+ --salt-category-14-background: var(--salt-palette-categorical-14-weakest);
108
+ --salt-category-14-borderColor: var(--salt-palette-categorical-14);
83
109
 
84
110
  --salt-category-14-bold-background: var(--salt-palette-categorical-14);
85
111
 
86
- --salt-category-15-subtle-foreground: var(--salt-palette-categorical-15-strong);
87
- --salt-category-15-subtle-background: var(--salt-palette-categorical-15-weakest);
88
- --salt-category-15-subtle-borderColor: var(--salt-palette-categorical-15);
112
+ --salt-category-14-dataviz: var(--salt-palette-categorical-14);
113
+
114
+ --salt-category-15-foreground: var(--salt-palette-categorical-15-strong);
115
+ --salt-category-15-background: var(--salt-palette-categorical-15-weakest);
116
+ --salt-category-15-borderColor: var(--salt-palette-categorical-15);
89
117
 
90
118
  --salt-category-15-bold-background: var(--salt-palette-categorical-15);
91
119
 
92
- --salt-category-16-subtle-foreground: var(--salt-palette-categorical-16-strong);
93
- --salt-category-16-subtle-background: var(--salt-palette-categorical-16-weakest);
94
- --salt-category-16-subtle-borderColor: var(--salt-palette-categorical-16);
120
+ --salt-category-15-dataviz: var(--salt-palette-categorical-15);
121
+
122
+ --salt-category-16-foreground: var(--salt-palette-categorical-16-strong);
123
+ --salt-category-16-background: var(--salt-palette-categorical-16-weakest);
124
+ --salt-category-16-borderColor: var(--salt-palette-categorical-16);
95
125
 
96
126
  --salt-category-16-bold-background: var(--salt-palette-categorical-16);
97
127
 
98
- --salt-category-17-subtle-foreground: var(--salt-palette-categorical-17-strong);
99
- --salt-category-17-subtle-background: var(--salt-palette-categorical-17-weakest);
100
- --salt-category-17-subtle-borderColor: var(--salt-palette-categorical-17);
128
+ --salt-category-16-dataviz: var(--salt-palette-categorical-16);
129
+
130
+ --salt-category-17-foreground: var(--salt-palette-categorical-17-strong);
131
+ --salt-category-17-background: var(--salt-palette-categorical-17-weakest);
132
+ --salt-category-17-borderColor: var(--salt-palette-categorical-17);
101
133
 
102
134
  --salt-category-17-bold-background: var(--salt-palette-categorical-17);
103
135
 
104
- --salt-category-18-subtle-foreground: var(--salt-palette-categorical-18-strong);
105
- --salt-category-18-subtle-background: var(--salt-palette-categorical-18-weakest);
106
- --salt-category-18-subtle-borderColor: var(--salt-palette-categorical-18);
136
+ --salt-category-17-dataviz: var(--salt-palette-categorical-17);
137
+
138
+ --salt-category-18-foreground: var(--salt-palette-categorical-18-strong);
139
+ --salt-category-18-background: var(--salt-palette-categorical-18-weakest);
140
+ --salt-category-18-borderColor: var(--salt-palette-categorical-18);
107
141
 
108
142
  --salt-category-18-bold-background: var(--salt-palette-categorical-18);
109
143
 
110
- --salt-category-19-subtle-foreground: var(--salt-palette-categorical-19-strong);
111
- --salt-category-19-subtle-background: var(--salt-palette-categorical-19-weakest);
112
- --salt-category-19-subtle-borderColor: var(--salt-palette-categorical-19);
144
+ --salt-category-18-dataviz: var(--salt-palette-categorical-18);
145
+
146
+ --salt-category-19-foreground: var(--salt-palette-categorical-19-strong);
147
+ --salt-category-19-background: var(--salt-palette-categorical-19-weakest);
148
+ --salt-category-19-borderColor: var(--salt-palette-categorical-19);
113
149
 
114
150
  --salt-category-19-bold-background: var(--salt-palette-categorical-19);
115
151
 
116
- --salt-category-20-subtle-foreground: var(--salt-palette-categorical-20-strong);
117
- --salt-category-20-subtle-background: var(--salt-palette-categorical-20-weakest);
118
- --salt-category-20-subtle-borderColor: var(--salt-palette-categorical-20);
152
+ --salt-category-19-dataviz: var(--salt-palette-categorical-19);
153
+
154
+ --salt-category-20-foreground: var(--salt-palette-categorical-20-strong);
155
+ --salt-category-20-background: var(--salt-palette-categorical-20-weakest);
156
+ --salt-category-20-borderColor: var(--salt-palette-categorical-20);
119
157
 
120
158
  --salt-category-20-bold-background: var(--salt-palette-categorical-20);
159
+
160
+ --salt-category-20-dataviz: var(--salt-palette-categorical-20);
121
161
  }
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
+ }