@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.
- package/css/components/checkbox.css +5 -0
- package/css/deprecated/characteristics.css +39 -0
- package/css/deprecated/foundations.css +1 -0
- package/css/foundations/alpha.css +0 -1
- package/css/foundations/animation.css +2 -1
- package/css/foundations/borderStyle.css +0 -1
- package/css/foundations/color.css +1 -8
- package/css/foundations/cursor.css +0 -1
- package/css/foundations/curve.css +9 -4
- package/css/foundations/duration.css +0 -1
- package/css/foundations/size.css +3 -1
- package/css/foundations/spacing.css +33 -0
- package/css/foundations/typography.css +6 -2
- package/css/foundations/zindex.css +2 -1
- package/css/global.css +1 -4
- package/css/next/characteristics/actionable.css +35 -25
- package/css/next/characteristics/category.css +100 -60
- package/css/next/characteristics/container.css +9 -7
- package/css/next/characteristics/content.css +1 -1
- package/css/next/characteristics/editable.css +5 -6
- package/css/next/characteristics/focused.css +3 -2
- package/css/next/characteristics/layout.css +12 -0
- package/css/next/characteristics/selectable.css +3 -9
- package/css/next/characteristics/sentiment.css +11 -1
- package/css/next/characteristics/separable.css +1 -1
- package/css/next/characteristics/text.css +78 -67
- package/css/next/deprecated/characteristics.css +111 -21
- package/css/next/deprecated/foundations.css +5 -0
- package/css/next/deprecated/palette.css +49 -2
- package/css/next/foundations/alpha.css +0 -1
- package/css/next/foundations/color.css +188 -2
- package/css/next/palette/accent.css +0 -2
- package/css/next/palette/alpha.css +18 -2
- package/css/next/palette/brand.css +6 -0
- package/css/next/palette/foreground.css +0 -2
- package/css/next/palette/neutral.css +0 -2
- package/css/theme-next.css +2 -2
- package/index.css.d.ts +2 -0
- package/package.json +8 -1
- package/reset.css +12 -0
|
@@ -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-
|
|
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-
|
|
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-
|
|
23
|
-
--salt-actionable-accented-subtle-borderColor-disabled: var(--salt-
|
|
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-
|
|
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-
|
|
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-
|
|
32
|
-
--salt-actionable-subtle-borderColor-disabled: var(--salt-
|
|
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-
|
|
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-
|
|
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-
|
|
41
|
-
--salt-actionable-negative-subtle-borderColor-disabled: var(--salt-
|
|
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-
|
|
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-
|
|
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-
|
|
50
|
-
--salt-actionable-positive-subtle-borderColor-disabled: var(--salt-
|
|
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-
|
|
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-
|
|
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-
|
|
59
|
-
--salt-actionable-caution-subtle-borderColor-disabled: var(--salt-
|
|
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-
|
|
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
|
}
|
|
@@ -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
|
}
|
|
@@ -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
|
}
|
|
@@ -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);
|
|
@@ -5,14 +5,18 @@
|
|
|
5
5
|
--vuu-color-gray-15: rgb(228, 227, 231);
|
|
6
6
|
--vuu-color-gray-20: rgb(214, 215, 218);
|
|
7
7
|
--vuu-color-gray-25: rgb(155, 158, 168);
|
|
8
|
+
--vuu-color-gray-28: rgb(249, 249, 251);
|
|
8
9
|
--vuu-color-gray-30: rgb(119, 124, 148);
|
|
9
10
|
--vuu-color-gray-40: rgb(96, 100, 119);
|
|
10
11
|
--vuu-color-gray-50: rgb(21, 23, 27);
|
|
12
|
+
--vuu-color-orange-50: rgb(244, 202, 51);
|
|
11
13
|
--vuu-color-red-error: rgb(226, 52, 52);
|
|
12
14
|
--vuu-color-purple: rgb(109, 24, 189);
|
|
13
15
|
--vuu-color-deep-purple: rgb(42, 1, 95);
|
|
14
16
|
--vuu-color-white: rgb(255, 255, 255);
|
|
17
|
+
}
|
|
15
18
|
|
|
19
|
+
.salt-theme.salt-theme-next.vuu-theme {
|
|
16
20
|
--salt-color-gray-100-rgb: 230, 233, 235;
|
|
17
21
|
--salt-color-gray-200-rgb: 211, 213, 216;
|
|
18
22
|
--salt-color-gray-300-rgb: 177, 181, 185;
|
|
@@ -92,7 +96,7 @@
|
|
|
92
96
|
--salt-color-background-jet-rgb: 16, 24, 32;
|
|
93
97
|
--salt-color-background-granite-rgb: 26, 34, 41;
|
|
94
98
|
--salt-color-background-leather-rgb: 38, 41, 43;
|
|
95
|
-
--salt-color-
|
|
99
|
+
--salt-color-jpmBrown-rgb: 58, 34, 6;
|
|
96
100
|
--salt-color-gray-100: rgb(var(--salt-color-gray-100-rgb));
|
|
97
101
|
--salt-color-gray-200: rgb(var(--salt-color-gray-200-rgb));
|
|
98
102
|
--salt-color-gray-300: rgb(var(--salt-color-gray-300-rgb));
|
|
@@ -172,5 +176,187 @@
|
|
|
172
176
|
--salt-color-background-jet: rgb(var(--salt-color-background-jet-rgb));
|
|
173
177
|
--salt-color-background-granite: rgb(var(--salt-color-background-granite-rgb));
|
|
174
178
|
--salt-color-background-leather: rgb(var(--salt-color-background-leather-rgb));
|
|
175
|
-
--salt-color-
|
|
179
|
+
--salt-color-jpmBrown: rgb(var(--salt-color-jpmBrown-rgb));
|
|
180
|
+
|
|
181
|
+
/* Categorical palette */
|
|
182
|
+
--salt-color-cobalt-100: rgb(237, 244, 255);
|
|
183
|
+
--salt-color-cobalt-200: rgb(198, 211, 239);
|
|
184
|
+
--salt-color-cobalt-300: rgb(159, 179, 223);
|
|
185
|
+
--salt-color-cobalt-400: rgb(118, 148, 207);
|
|
186
|
+
--salt-color-cobalt-500: rgb(70, 118, 191);
|
|
187
|
+
--salt-color-cobalt-600: rgb(53, 95, 161);
|
|
188
|
+
--salt-color-cobalt-700: rgb(36, 72, 133);
|
|
189
|
+
--salt-color-cobalt-800: rgb(19, 51, 105);
|
|
190
|
+
--salt-color-cobalt-900: rgb(0, 31, 79);
|
|
191
|
+
--salt-color-cider-100: rgb(255, 235, 217);
|
|
192
|
+
--salt-color-cider-200: rgb(255, 201, 158);
|
|
193
|
+
--salt-color-cider-300: rgb(242, 172, 116);
|
|
194
|
+
--salt-color-cider-400: rgb(219, 138, 72);
|
|
195
|
+
--salt-color-cider-500: rgb(171, 101, 40);
|
|
196
|
+
--salt-color-cider-600: rgb(143, 82, 31);
|
|
197
|
+
--salt-color-cider-700: rgb(116, 64, 21);
|
|
198
|
+
--salt-color-cider-800: rgb(90, 47, 13);
|
|
199
|
+
--salt-color-cider-900: rgb(66, 31, 0);
|
|
200
|
+
--salt-color-plum-100: rgb(245, 224, 255);
|
|
201
|
+
--salt-color-plum-200: rgb(230, 185, 250);
|
|
202
|
+
--salt-color-plum-300: rgb(209, 148, 235);
|
|
203
|
+
--salt-color-plum-400: rgb(188, 115, 222);
|
|
204
|
+
--salt-color-plum-500: rgb(159, 85, 194);
|
|
205
|
+
--salt-color-plum-600: rgb(131, 67, 161);
|
|
206
|
+
--salt-color-plum-700: rgb(105, 50, 130);
|
|
207
|
+
--salt-color-plum-800: rgb(79, 34, 100);
|
|
208
|
+
--salt-color-plum-900: rgb(55, 18, 71);
|
|
209
|
+
--salt-color-aqua-100: rgb(220, 247, 247);
|
|
210
|
+
--salt-color-aqua-200: rgb(177, 229, 229);
|
|
211
|
+
--salt-color-aqua-300: rgb(135, 200, 201);
|
|
212
|
+
--salt-color-aqua-400: rgb(90, 171, 173);
|
|
213
|
+
--salt-color-aqua-500: rgb(42, 130, 133);
|
|
214
|
+
--salt-color-aqua-600: rgb(31, 109, 111);
|
|
215
|
+
--salt-color-aqua-700: rgb(19, 88, 90);
|
|
216
|
+
--salt-color-aqua-800: rgb(8, 68, 70);
|
|
217
|
+
--salt-color-aqua-900: rgb(0, 49, 51);
|
|
218
|
+
--salt-color-slate-100: rgb(225, 232, 247);
|
|
219
|
+
--salt-color-slate-200: rgb(194, 202, 221);
|
|
220
|
+
--salt-color-slate-300: rgb(164, 173, 196);
|
|
221
|
+
--salt-color-slate-400: rgb(134, 145, 172);
|
|
222
|
+
--salt-color-slate-500: rgb(105, 118, 148);
|
|
223
|
+
--salt-color-slate-600: rgb(84, 95, 122);
|
|
224
|
+
--salt-color-slate-700: rgb(64, 73, 97);
|
|
225
|
+
--salt-color-slate-800: rgb(44, 53, 74);
|
|
226
|
+
--salt-color-slate-900: rgb(26, 33, 51);
|
|
227
|
+
--salt-color-rose-100: rgb(255, 227, 249);
|
|
228
|
+
--salt-color-rose-200: rgb(250, 190, 237);
|
|
229
|
+
--salt-color-rose-300: rgb(229, 154, 212);
|
|
230
|
+
--salt-color-rose-400: rgb(209, 117, 189);
|
|
231
|
+
--salt-color-rose-500: rgb(176, 84, 157);
|
|
232
|
+
--salt-color-rose-600: rgb(146, 67, 130);
|
|
233
|
+
--salt-color-rose-700: rgb(118, 50, 104);
|
|
234
|
+
--salt-color-rose-800: rgb(90, 32, 78);
|
|
235
|
+
--salt-color-rose-900: rgb(64, 16, 54);
|
|
236
|
+
--salt-color-olive-100: rgb(234, 240, 223);
|
|
237
|
+
--salt-color-olive-200: rgb(210, 222, 184);
|
|
238
|
+
--salt-color-olive-300: rgb(180, 194, 149);
|
|
239
|
+
--salt-color-olive-400: rgb(149, 166, 113);
|
|
240
|
+
--salt-color-olive-500: rgb(109, 124, 77);
|
|
241
|
+
--salt-color-olive-600: rgb(88, 103, 58);
|
|
242
|
+
--salt-color-olive-700: rgb(68, 83, 39);
|
|
243
|
+
--salt-color-olive-800: rgb(49, 64, 21);
|
|
244
|
+
--salt-color-olive-900: rgb(31, 46, 0);
|
|
245
|
+
--salt-color-salmon-100: rgb(255, 232, 233);
|
|
246
|
+
--salt-color-salmon-200: rgb(255, 194, 194);
|
|
247
|
+
--salt-color-salmon-300: rgb(240, 155, 153);
|
|
248
|
+
--salt-color-salmon-400: rgb(222, 120, 120);
|
|
249
|
+
--salt-color-salmon-500: rgb(189, 85, 88);
|
|
250
|
+
--salt-color-salmon-600: rgb(154, 64, 67);
|
|
251
|
+
--salt-color-salmon-700: rgb(121, 44, 48);
|
|
252
|
+
--salt-color-salmon-800: rgb(89, 25, 29);
|
|
253
|
+
--salt-color-salmon-900: rgb(59, 6, 8);
|
|
254
|
+
--salt-color-indigo-100: rgb(231, 227, 255);
|
|
255
|
+
--salt-color-indigo-200: rgb(208, 194, 252);
|
|
256
|
+
--salt-color-indigo-300: rgb(180, 162, 242);
|
|
257
|
+
--salt-color-indigo-400: rgb(149, 129, 229);
|
|
258
|
+
--salt-color-indigo-500: rgb(118, 101, 207);
|
|
259
|
+
--salt-color-indigo-600: rgb(98, 85, 170);
|
|
260
|
+
--salt-color-indigo-700: rgb(77, 66, 135);
|
|
261
|
+
--salt-color-indigo-800: rgb(57, 49, 102);
|
|
262
|
+
--salt-color-indigo-900: rgb(38, 32, 71);
|
|
263
|
+
--salt-color-jade-100: rgb(225, 245, 230);
|
|
264
|
+
--salt-color-jade-200: rgb(179, 229, 187);
|
|
265
|
+
--salt-color-jade-300: rgb(137, 201, 146);
|
|
266
|
+
--salt-color-jade-400: rgb(92, 173, 106);
|
|
267
|
+
--salt-color-jade-500: rgb(45, 133, 67);
|
|
268
|
+
--salt-color-jade-600: rgb(33, 111, 53);
|
|
269
|
+
--salt-color-jade-700: rgb(21, 90, 39);
|
|
270
|
+
--salt-color-jade-800: rgb(8, 70, 26);
|
|
271
|
+
--salt-color-jade-900: rgb(0, 51, 13);
|
|
272
|
+
--salt-color-citrine-100: rgb(255, 249, 217);
|
|
273
|
+
--salt-color-citrine-200: rgb(240, 225, 165);
|
|
274
|
+
--salt-color-citrine-300: rgb(209, 189, 115);
|
|
275
|
+
--salt-color-citrine-400: rgb(178, 156, 66);
|
|
276
|
+
--salt-color-citrine-500: rgb(135, 116, 16);
|
|
277
|
+
--salt-color-citrine-600: rgb(114, 98, 12);
|
|
278
|
+
--salt-color-citrine-700: rgb(94, 80, 9);
|
|
279
|
+
--salt-color-citrine-800: rgb(74, 63, 6);
|
|
280
|
+
--salt-color-citrine-900: rgb(51, 43, 0);
|
|
281
|
+
--salt-color-autumn-100: rgb(255, 233, 217);
|
|
282
|
+
--salt-color-autumn-200: rgb(255, 197, 161);
|
|
283
|
+
--salt-color-autumn-300: rgb(242, 163, 114);
|
|
284
|
+
--salt-color-autumn-400: rgb(222, 126, 64);
|
|
285
|
+
--salt-color-autumn-500: rgb(189, 90, 19);
|
|
286
|
+
--salt-color-autumn-600: rgb(153, 73, 18);
|
|
287
|
+
--salt-color-autumn-700: rgb(119, 55, 14);
|
|
288
|
+
--salt-color-autumn-800: rgb(86, 39, 10);
|
|
289
|
+
--salt-color-autumn-900: rgb(56, 23, 0);
|
|
290
|
+
--salt-color-lavender-100: rgb(250, 235, 250);
|
|
291
|
+
--salt-color-lavender-200: rgb(237, 199, 237);
|
|
292
|
+
--salt-color-lavender-300: rgb(212, 167, 212);
|
|
293
|
+
--salt-color-lavender-400: rgb(186, 134, 186);
|
|
294
|
+
--salt-color-lavender-500: rgb(148, 102, 148);
|
|
295
|
+
--salt-color-lavender-600: rgb(126, 80, 126);
|
|
296
|
+
--salt-color-lavender-700: rgb(105, 58, 105);
|
|
297
|
+
--salt-color-lavender-800: rgb(84, 37, 84);
|
|
298
|
+
--salt-color-lavender-900: rgb(64, 15, 64);
|
|
299
|
+
--salt-color-ocean-100: rgb(227, 251, 255);
|
|
300
|
+
--salt-color-ocean-200: rgb(180, 229, 240);
|
|
301
|
+
--salt-color-ocean-300: rgb(131, 197, 212);
|
|
302
|
+
--salt-color-ocean-400: rgb(80, 167, 186);
|
|
303
|
+
--salt-color-ocean-500: rgb(0, 128, 148);
|
|
304
|
+
--salt-color-ocean-600: rgb(0, 106, 122);
|
|
305
|
+
--salt-color-ocean-700: rgb(0, 84, 97);
|
|
306
|
+
--salt-color-ocean-800: rgb(0, 64, 74);
|
|
307
|
+
--salt-color-ocean-900: rgb(0, 44, 51);
|
|
308
|
+
--salt-color-smoke-100: rgb(242, 245, 250);
|
|
309
|
+
--salt-color-smoke-200: rgb(208, 211, 216);
|
|
310
|
+
--salt-color-smoke-300: rgb(176, 179, 184);
|
|
311
|
+
--salt-color-smoke-400: rgb(144, 147, 152);
|
|
312
|
+
--salt-color-smoke-500: rgb(114, 117, 122);
|
|
313
|
+
--salt-color-smoke-600: rgb(93, 96, 101);
|
|
314
|
+
--salt-color-smoke-700: rgb(73, 76, 81);
|
|
315
|
+
--salt-color-smoke-800: rgb(53, 56, 61);
|
|
316
|
+
--salt-color-smoke-900: rgb(35, 38, 43);
|
|
317
|
+
--salt-color-fuchsia-100: rgb(255, 232, 247);
|
|
318
|
+
--salt-color-fuchsia-200: rgb(255, 191, 229);
|
|
319
|
+
--salt-color-fuchsia-300: rgb(240, 151, 203);
|
|
320
|
+
--salt-color-fuchsia-400: rgb(222, 109, 178);
|
|
321
|
+
--salt-color-fuchsia-500: rgb(194, 71, 149);
|
|
322
|
+
--salt-color-fuchsia-600: rgb(167, 54, 125);
|
|
323
|
+
--salt-color-fuchsia-700: rgb(140, 37, 101);
|
|
324
|
+
--salt-color-fuchsia-800: rgb(114, 19, 79);
|
|
325
|
+
--salt-color-fuchsia-900: rgb(89, 0, 57);
|
|
326
|
+
--salt-color-lime-100: rgb(239, 245, 220);
|
|
327
|
+
--salt-color-lime-200: rgb(215, 227, 168);
|
|
328
|
+
--salt-color-lime-300: rgb(182, 196, 120);
|
|
329
|
+
--salt-color-lime-400: rgb(146, 166, 71);
|
|
330
|
+
--salt-color-lime-500: rgb(102, 125, 21);
|
|
331
|
+
--salt-color-lime-600: rgb(85, 106, 16);
|
|
332
|
+
--salt-color-lime-700: rgb(69, 87, 11);
|
|
333
|
+
--salt-color-lime-800: rgb(53, 68, 6);
|
|
334
|
+
--salt-color-lime-900: rgb(36, 46, 0);
|
|
335
|
+
--salt-color-fur-100: rgb(255, 244, 235);
|
|
336
|
+
--salt-color-fur-200: rgb(245, 214, 191);
|
|
337
|
+
--salt-color-fur-300: rgb(219, 178, 147);
|
|
338
|
+
--salt-color-fur-400: rgb(194, 144, 107);
|
|
339
|
+
--salt-color-fur-500: rgb(153, 106, 69);
|
|
340
|
+
--salt-color-fur-600: rgb(130, 85, 52);
|
|
341
|
+
--salt-color-fur-700: rgb(107, 65, 36);
|
|
342
|
+
--salt-color-fur-800: rgb(85, 46, 20);
|
|
343
|
+
--salt-color-fur-900: rgb(64, 28, 0);
|
|
344
|
+
--salt-color-violet-100: rgb(237, 239, 255);
|
|
345
|
+
--salt-color-violet-200: rgb(202, 203, 252);
|
|
346
|
+
--salt-color-violet-300: rgb(167, 169, 235);
|
|
347
|
+
--salt-color-violet-400: rgb(134, 139, 219);
|
|
348
|
+
--salt-color-violet-500: rgb(99, 110, 191);
|
|
349
|
+
--salt-color-violet-600: rgb(81, 90, 159);
|
|
350
|
+
--salt-color-violet-700: rgb(63, 71, 128);
|
|
351
|
+
--salt-color-violet-800: rgb(47, 53, 99);
|
|
352
|
+
--salt-color-violet-900: rgb(31, 36, 71);
|
|
353
|
+
--salt-color-forest-100: rgb(237, 250, 245);
|
|
354
|
+
--salt-color-forest-200: rgb(188, 232, 211);
|
|
355
|
+
--salt-color-forest-300: rgb(141, 204, 174);
|
|
356
|
+
--salt-color-forest-400: rgb(91, 176, 136);
|
|
357
|
+
--salt-color-forest-500: rgb(35, 133, 94);
|
|
358
|
+
--salt-color-forest-600: rgb(25, 111, 77);
|
|
359
|
+
--salt-color-forest-700: rgb(15, 90, 61);
|
|
360
|
+
--salt-color-forest-800: rgb(6, 70, 46);
|
|
361
|
+
--salt-color-forest-900: rgb(0, 51, 31);
|
|
176
362
|
}
|
|
@@ -10,7 +10,6 @@
|
|
|
10
10
|
--salt-palette-accent-weakest: var(--salt-color-blue-100);
|
|
11
11
|
}
|
|
12
12
|
|
|
13
|
-
|
|
14
13
|
.salt-theme.salt-theme-next.vuu-theme[data-mode="dark"] {
|
|
15
14
|
--salt-palette-accent: var(--vuu-color-purple);
|
|
16
15
|
--salt-palette-accent-disabled: var(--salt-color-teal-500-40a);
|
|
@@ -22,4 +21,3 @@
|
|
|
22
21
|
--salt-palette-accent-weaker-disabled: var(--salt-color-teal-200-40a);
|
|
23
22
|
--salt-palette-accent-weakest: var(--salt-color-teal-100);
|
|
24
23
|
}
|
|
25
|
-
|
|
@@ -29,7 +29,15 @@
|
|
|
29
29
|
--salt-palette-alpha-dark-lower: var(--salt-color-black-10a);
|
|
30
30
|
--salt-palette-alpha-dark-lowest: var(--salt-color-black-5a);
|
|
31
31
|
|
|
32
|
-
--salt-palette-alpha-
|
|
32
|
+
--salt-palette-alpha-light-highest: var(--salt-color-white-80a);
|
|
33
|
+
--salt-palette-alpha-light-higher: var(--salt-color-white-65a);
|
|
34
|
+
--salt-palette-alpha-light-high: var(--salt-color-white-50a);
|
|
35
|
+
--salt-palette-alpha-light-mediumHigh: var(--salt-color-white-40a);
|
|
36
|
+
--salt-palette-alpha-light-medium: var(--salt-color-white-30a);
|
|
37
|
+
--salt-palette-alpha-light-mediumLow: var(--salt-color-white-20a);
|
|
38
|
+
--salt-palette-alpha-light-low: var(--salt-color-white-15a);
|
|
39
|
+
--salt-palette-alpha-light-lower: var(--salt-color-white-10a);
|
|
40
|
+
--salt-palette-alpha-light-lowest: var(--salt-color-white-5a);
|
|
33
41
|
}
|
|
34
42
|
|
|
35
43
|
.salt-theme-next[data-mode="dark"] {
|
|
@@ -63,5 +71,13 @@
|
|
|
63
71
|
--salt-palette-alpha-dark-lower: var(--salt-color-black-10a);
|
|
64
72
|
--salt-palette-alpha-dark-lowest: var(--salt-color-black-5a);
|
|
65
73
|
|
|
66
|
-
--salt-palette-alpha-
|
|
74
|
+
--salt-palette-alpha-light-highest: var(--salt-color-white-80a);
|
|
75
|
+
--salt-palette-alpha-light-higher: var(--salt-color-white-65a);
|
|
76
|
+
--salt-palette-alpha-light-high: var(--salt-color-white-50a);
|
|
77
|
+
--salt-palette-alpha-light-mediumHigh: var(--salt-color-white-40a);
|
|
78
|
+
--salt-palette-alpha-light-medium: var(--salt-color-white-30a);
|
|
79
|
+
--salt-palette-alpha-light-mediumLow: var(--salt-color-white-20a);
|
|
80
|
+
--salt-palette-alpha-light-low: var(--salt-color-white-15a);
|
|
81
|
+
--salt-palette-alpha-light-lower: var(--salt-color-white-10a);
|
|
82
|
+
--salt-palette-alpha-light-lowest: var(--salt-color-white-5a);
|
|
67
83
|
}
|
|
@@ -2,7 +2,6 @@
|
|
|
2
2
|
--salt-palette-foreground-primary: var(--salt-color-black);
|
|
3
3
|
--salt-palette-foreground-primary-disabled: var(--salt-color-black-40a);
|
|
4
4
|
--salt-palette-foreground-primary-alt: var(--vuu-color-white);
|
|
5
|
-
--salt-palette-foreground-primary-alt-disabled: var(--salt-color-white-40a);
|
|
6
5
|
--salt-palette-foreground-secondary: var(--salt-color-gray-700);
|
|
7
6
|
--salt-palette-foreground-secondary-disabled: var(--salt-color-gray-700-40a);
|
|
8
7
|
--salt-palette-foreground-visited: var(--salt-color-purple-800);
|
|
@@ -11,7 +10,6 @@
|
|
|
11
10
|
--salt-palette-foreground-primary: var(--salt-color-white);
|
|
12
11
|
--salt-palette-foreground-primary-disabled: var(--salt-color-white-40a);
|
|
13
12
|
--salt-palette-foreground-primary-alt: var(--salt-color-white);
|
|
14
|
-
--salt-palette-foreground-primary-alt-disabled: var(--salt-color-white-40a);
|
|
15
13
|
--salt-palette-foreground-secondary: var(--salt-color-gray-300);
|
|
16
14
|
--salt-palette-foreground-secondary-disabled: var(--salt-color-gray-300-40a);
|
|
17
15
|
--salt-palette-foreground-visited: var(--salt-color-purple-200);
|
|
@@ -3,7 +3,6 @@
|
|
|
3
3
|
--salt-palette-neutral-disabled: var(--salt-color-gray-500-40a);
|
|
4
4
|
--salt-palette-neutral-readonly: var(--salt-color-gray-500-10a);
|
|
5
5
|
--salt-palette-neutral-strong: var(--vuu-color-gray-30);
|
|
6
|
-
--salt-palette-neutral-strong-disabled: var(--salt-color-gray-600-40a);
|
|
7
6
|
--salt-palette-neutral-stronger: var(--salt-color-gray-700);
|
|
8
7
|
--salt-palette-neutral-strongest: var(--salt-color-gray-800);
|
|
9
8
|
--salt-palette-neutral-weak: var(--salt-color-gray-400);
|
|
@@ -15,7 +14,6 @@
|
|
|
15
14
|
--salt-palette-neutral-disabled: var(--salt-color-gray-500-40a);
|
|
16
15
|
--salt-palette-neutral-readonly: var(--salt-color-gray-500-10a);
|
|
17
16
|
--salt-palette-neutral-strong: var(--salt-color-gray-400);
|
|
18
|
-
--salt-palette-neutral-strong-disabled: var(--salt-color-gray-400-40a);
|
|
19
17
|
--salt-palette-neutral-stronger: var(--salt-color-gray-200);
|
|
20
18
|
--salt-palette-neutral-strongest: var(--salt-color-gray-100);
|
|
21
19
|
--salt-palette-neutral-weak: var(--salt-color-gray-600);
|
package/css/theme-next.css
CHANGED
|
@@ -8,6 +8,7 @@
|
|
|
8
8
|
@import url(next/palette/accent.css);
|
|
9
9
|
@import url(next/palette/alpha.css);
|
|
10
10
|
@import url(next/palette/background.css);
|
|
11
|
+
@import url(next/palette/brand.css);
|
|
11
12
|
@import url(next/palette/categorical.css);
|
|
12
13
|
@import url(next/palette/corner.css);
|
|
13
14
|
@import url(next/palette/foreground.css);
|
|
@@ -16,17 +17,16 @@
|
|
|
16
17
|
@import url(next/palette/neutral.css);
|
|
17
18
|
@import url(next/palette/positive.css);
|
|
18
19
|
@import url(next/palette/shadow.css);
|
|
19
|
-
@import url(next/palette/text.css);
|
|
20
20
|
@import url(next/palette/warning.css);
|
|
21
21
|
|
|
22
22
|
/* Each characteristic file references values from above foundations */
|
|
23
|
-
@import url(next/characteristics/accent.css);
|
|
24
23
|
@import url(next/characteristics/actionable.css);
|
|
25
24
|
@import url(next/characteristics/category.css);
|
|
26
25
|
@import url(next/characteristics/container.css);
|
|
27
26
|
@import url(next/characteristics/content.css);
|
|
28
27
|
@import url(next/characteristics/editable.css);
|
|
29
28
|
@import url(next/characteristics/focused.css);
|
|
29
|
+
@import url(next/characteristics/layout.css);
|
|
30
30
|
@import url(next/characteristics/navigable.css);
|
|
31
31
|
@import url(next/characteristics/overlayable.css);
|
|
32
32
|
@import url(next/characteristics/selectable.css);
|
package/index.css.d.ts
ADDED