@vellira-ui/tokens 2.31.0 → 2.33.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (40) hide show
  1. package/dist/css/tokens.css +998 -98
  2. package/dist/dark/components/dropdown.d.ts +255 -0
  3. package/dist/dark/components/dropdown.d.ts.map +1 -1
  4. package/dist/dark/components/dropdown.js +106 -0
  5. package/dist/dark/components/select.d.ts +733 -6
  6. package/dist/dark/components/select.d.ts.map +1 -1
  7. package/dist/dark/components/select.js +57 -14
  8. package/dist/dark/theme.d.ts +7 -7
  9. package/dist/factories/createDropdownPalette.d.ts +69 -0
  10. package/dist/factories/createDropdownPalette.d.ts.map +1 -0
  11. package/dist/factories/createDropdownPalette.js +46 -0
  12. package/dist/factories/createSelectPalette.d.ts +156 -0
  13. package/dist/factories/createSelectPalette.d.ts.map +1 -1
  14. package/dist/factories/createSelectPalette.js +52 -33
  15. package/dist/generated/token-types.d.ts +4 -4
  16. package/dist/generated/token-types.d.ts.map +1 -1
  17. package/dist/generated/token-types.js +1200 -0
  18. package/dist/highContrast/components/dropdown.d.ts +255 -0
  19. package/dist/highContrast/components/dropdown.d.ts.map +1 -1
  20. package/dist/highContrast/components/dropdown.js +78 -0
  21. package/dist/highContrast/components/select.d.ts +731 -4
  22. package/dist/highContrast/components/select.d.ts.map +1 -1
  23. package/dist/highContrast/components/select.js +49 -1
  24. package/dist/highContrast/theme.d.ts +7 -7
  25. package/dist/index.d.ts +7 -7
  26. package/dist/light/components/contextMenu.d.ts +1 -1
  27. package/dist/light/components/dropdown.d.ts +256 -1
  28. package/dist/light/components/dropdown.d.ts.map +1 -1
  29. package/dist/light/components/dropdown.js +103 -0
  30. package/dist/light/components/input.d.ts +1 -1
  31. package/dist/light/components/select.d.ts +731 -4
  32. package/dist/light/components/select.d.ts.map +1 -1
  33. package/dist/light/components/select.js +24 -1
  34. package/dist/light/semantic/menu.d.ts +1 -1
  35. package/dist/light/semantic/status.d.ts +1 -1
  36. package/dist/light/semantic/status.js +1 -1
  37. package/dist/light/theme.d.ts +7 -7
  38. package/dist/tokens/typography.d.ts +7 -7
  39. package/dist/tokens/typography.js +7 -7
  40. package/package.json +1 -1
package/dist/highContrast/components/dropdown.d.ts CHANGED
@@ -1,4 +1,259 @@
1
1
  export declare const dropdown: {
2
+ readonly primary: {
3
+ readonly ring: string;
4
+ readonly content: {
5
+ readonly border: string;
6
+ readonly ring: string;
7
+ };
8
+ readonly trigger: {
9
+ readonly default: {
10
+ readonly fg: string;
11
+ readonly border: "transparent";
12
+ readonly bg: string;
13
+ readonly placeholder: string;
14
+ readonly icon: string;
15
+ };
16
+ readonly hover: {
17
+ readonly bg: "transparent";
18
+ readonly fg: string;
19
+ readonly border: "transparent";
20
+ readonly placeholder: string;
21
+ readonly icon: string;
22
+ };
23
+ readonly focus: {
24
+ readonly fg: string;
25
+ readonly border: "transparent";
26
+ readonly bg: string;
27
+ readonly placeholder: string;
28
+ readonly icon: string;
29
+ };
30
+ };
31
+ readonly item: {
32
+ readonly fg: string;
33
+ readonly active: {
34
+ readonly bg: string;
35
+ readonly fg: string;
36
+ readonly ring: string;
37
+ };
38
+ readonly hover: {
39
+ readonly bg: string;
40
+ readonly fg: string;
41
+ };
42
+ readonly pressed: {
43
+ readonly bg: string;
44
+ readonly fg: string;
45
+ };
46
+ readonly badge: {
47
+ readonly bg: string;
48
+ readonly fg: string;
49
+ readonly border: string;
50
+ };
51
+ };
52
+ };
53
+ readonly neutral: {
54
+ readonly ring: string;
55
+ readonly content: {
56
+ readonly border: string;
57
+ readonly ring: string;
58
+ };
59
+ readonly trigger: {
60
+ readonly default: {
61
+ readonly fg: string;
62
+ readonly border: "transparent";
63
+ readonly bg: string;
64
+ readonly placeholder: string;
65
+ readonly icon: string;
66
+ };
67
+ readonly hover: {
68
+ readonly bg: "transparent";
69
+ readonly fg: string;
70
+ readonly border: "transparent";
71
+ readonly placeholder: string;
72
+ readonly icon: string;
73
+ };
74
+ readonly focus: {
75
+ readonly fg: string;
76
+ readonly border: "transparent";
77
+ readonly bg: string;
78
+ readonly placeholder: string;
79
+ readonly icon: string;
80
+ };
81
+ };
82
+ readonly item: {
83
+ readonly fg: string;
84
+ readonly active: {
85
+ readonly bg: string;
86
+ readonly fg: string;
87
+ readonly ring: string;
88
+ };
89
+ readonly hover: {
90
+ readonly bg: string;
91
+ readonly fg: string;
92
+ };
93
+ readonly pressed: {
94
+ readonly bg: string;
95
+ readonly fg: string;
96
+ };
97
+ readonly badge: {
98
+ readonly bg: string;
99
+ readonly fg: string;
100
+ readonly border: string;
101
+ };
102
+ };
103
+ };
104
+ readonly success: {
105
+ readonly ring: string;
106
+ readonly content: {
107
+ readonly border: string;
108
+ readonly ring: string;
109
+ };
110
+ readonly trigger: {
111
+ readonly default: {
112
+ readonly fg: string;
113
+ readonly border: "transparent";
114
+ readonly bg: string;
115
+ readonly placeholder: string;
116
+ readonly icon: string;
117
+ };
118
+ readonly hover: {
119
+ readonly bg: "transparent";
120
+ readonly fg: string;
121
+ readonly border: "transparent";
122
+ readonly placeholder: string;
123
+ readonly icon: string;
124
+ };
125
+ readonly focus: {
126
+ readonly fg: string;
127
+ readonly border: "transparent";
128
+ readonly bg: string;
129
+ readonly placeholder: string;
130
+ readonly icon: string;
131
+ };
132
+ };
133
+ readonly item: {
134
+ readonly fg: string;
135
+ readonly active: {
136
+ readonly bg: string;
137
+ readonly fg: string;
138
+ readonly ring: string;
139
+ };
140
+ readonly hover: {
141
+ readonly bg: string;
142
+ readonly fg: string;
143
+ };
144
+ readonly pressed: {
145
+ readonly bg: string;
146
+ readonly fg: string;
147
+ };
148
+ readonly badge: {
149
+ readonly bg: string;
150
+ readonly fg: string;
151
+ readonly border: string;
152
+ };
153
+ };
154
+ };
155
+ readonly warning: {
156
+ readonly ring: string;
157
+ readonly content: {
158
+ readonly border: string;
159
+ readonly ring: string;
160
+ };
161
+ readonly trigger: {
162
+ readonly default: {
163
+ readonly fg: string;
164
+ readonly border: "transparent";
165
+ readonly bg: string;
166
+ readonly placeholder: string;
167
+ readonly icon: string;
168
+ };
169
+ readonly hover: {
170
+ readonly bg: "transparent";
171
+ readonly fg: string;
172
+ readonly border: "transparent";
173
+ readonly placeholder: string;
174
+ readonly icon: string;
175
+ };
176
+ readonly focus: {
177
+ readonly fg: string;
178
+ readonly border: "transparent";
179
+ readonly bg: string;
180
+ readonly placeholder: string;
181
+ readonly icon: string;
182
+ };
183
+ };
184
+ readonly item: {
185
+ readonly fg: string;
186
+ readonly active: {
187
+ readonly bg: string;
188
+ readonly fg: string;
189
+ readonly ring: string;
190
+ };
191
+ readonly hover: {
192
+ readonly bg: string;
193
+ readonly fg: string;
194
+ };
195
+ readonly pressed: {
196
+ readonly bg: string;
197
+ readonly fg: string;
198
+ };
199
+ readonly badge: {
200
+ readonly bg: string;
201
+ readonly fg: string;
202
+ readonly border: string;
203
+ };
204
+ };
205
+ };
206
+ readonly danger: {
207
+ readonly ring: string;
208
+ readonly content: {
209
+ readonly border: string;
210
+ readonly ring: string;
211
+ };
212
+ readonly trigger: {
213
+ readonly default: {
214
+ readonly fg: string;
215
+ readonly border: "transparent";
216
+ readonly bg: string;
217
+ readonly placeholder: string;
218
+ readonly icon: string;
219
+ };
220
+ readonly hover: {
221
+ readonly bg: "transparent";
222
+ readonly fg: string;
223
+ readonly border: "transparent";
224
+ readonly placeholder: string;
225
+ readonly icon: string;
226
+ };
227
+ readonly focus: {
228
+ readonly fg: string;
229
+ readonly border: "transparent";
230
+ readonly bg: string;
231
+ readonly placeholder: string;
232
+ readonly icon: string;
233
+ };
234
+ };
235
+ readonly item: {
236
+ readonly fg: string;
237
+ readonly active: {
238
+ readonly bg: string;
239
+ readonly fg: string;
240
+ readonly ring: string;
241
+ };
242
+ readonly hover: {
243
+ readonly bg: string;
244
+ readonly fg: string;
245
+ };
246
+ readonly pressed: {
247
+ readonly bg: string;
248
+ readonly fg: string;
249
+ };
250
+ readonly badge: {
251
+ readonly bg: string;
252
+ readonly fg: string;
253
+ readonly border: string;
254
+ };
255
+ };
256
+ };
2
257
  readonly trigger: {
3
258
  readonly default: {
4
259
  readonly bg: "transparent";
package/dist/highContrast/components/dropdown.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"dropdown.d.ts","sourceRoot":"","sources":["../../../src/highContrast/components/dropdown.ts"],"names":[],"mappings":"AAQA,eAAO,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0EX,CAAC"}
1
+ {"version":3,"file":"dropdown.d.ts","sourceRoot":"","sources":["../../../src/highContrast/components/dropdown.ts"],"names":[],"mappings":"AAwEA,eAAO,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+FX,CAAC"}
package/dist/highContrast/components/dropdown.js CHANGED
@@ -1,3 +1,6 @@
1
+ import { createDropdownPalette } from '../../factories/createDropdownPalette.js';
2
+ import { createInputColorPalette } from '../../factories/createInputPalette.js';
3
+ import { colors } from '../../primitives/colors.js';
1
4
  import { border } from '../semantic/border.js';
2
5
  import { focus } from '../semantic/focus.js';
3
6
  import { menu } from '../semantic/menu.js';
@@ -5,7 +8,82 @@ import { shadow } from '../semantic/shadow.js';
5
8
  import { status } from '../semantic/status.js';
6
9
  import { surface } from '../semantic/surface.js';
7
10
  import { text } from '../semantic/text.js';
11
+ const dropdownPaletteDefaults = {
12
+ fg: text.primary,
13
+ placeholder: text.secondary,
14
+ filledFocusBg: surface.subtle,
15
+ hoverBg: surface.hover,
16
+ };
17
+ const primary = createInputColorPalette({
18
+ ...dropdownPaletteDefaults,
19
+ accent: colors.primary[300],
20
+ accentHover: colors.primary[200],
21
+ accentSoft: colors.primary[950],
22
+ filledBg: colors.primary[900],
23
+ filledHoverBg: colors.primary[800],
24
+ ring: colors.primary[300],
25
+ });
26
+ const neutral = createInputColorPalette({
27
+ ...dropdownPaletteDefaults,
28
+ accent: colors.vellira[100],
29
+ accentHover: colors.vellira[50],
30
+ accentSoft: colors.vellira[900],
31
+ filledBg: colors.vellira[850],
32
+ filledHoverBg: colors.vellira[800],
33
+ hoverBg: colors.vellira[850],
34
+ ring: colors.vellira[100],
35
+ });
36
+ const success = createInputColorPalette({
37
+ ...dropdownPaletteDefaults,
38
+ accent: colors.success[300],
39
+ accentHover: colors.success[200],
40
+ accentSoft: colors.success[950],
41
+ filledBg: colors.success[900],
42
+ filledHoverBg: colors.success[800],
43
+ hoverBg: colors.success[950],
44
+ ring: colors.success[300],
45
+ });
46
+ const warning = createInputColorPalette({
47
+ ...dropdownPaletteDefaults,
48
+ accent: colors.warning[300],
49
+ accentHover: colors.warning[200],
50
+ accentSoft: colors.warning[950],
51
+ filledBg: colors.warning[900],
52
+ filledHoverBg: colors.warning[800],
53
+ hoverBg: colors.warning[950],
54
+ ring: colors.warning[300],
55
+ });
56
+ const danger = createInputColorPalette({
57
+ ...dropdownPaletteDefaults,
58
+ accent: colors.error[300],
59
+ accentHover: colors.error[200],
60
+ accentSoft: colors.error[950],
61
+ filledBg: colors.error[900],
62
+ filledHoverBg: colors.error[800],
63
+ hoverBg: colors.error[950],
64
+ ring: colors.error[300],
65
+ });
8
66
  export const dropdown = {
67
+ primary: createDropdownPalette(primary, {
68
+ contentBorder: border.default,
69
+ itemActiveRing: status.warning.border,
70
+ }),
71
+ neutral: createDropdownPalette(neutral, {
72
+ contentBorder: border.default,
73
+ itemActiveRing: status.warning.border,
74
+ }),
75
+ success: createDropdownPalette(success, {
76
+ contentBorder: border.default,
77
+ itemActiveRing: status.warning.border,
78
+ }),
79
+ warning: createDropdownPalette(warning, {
80
+ contentBorder: border.default,
81
+ itemActiveRing: status.warning.border,
82
+ }),
83
+ danger: createDropdownPalette(danger, {
84
+ contentBorder: border.default,
85
+ itemActiveRing: status.warning.border,
86
+ }),
9
87
  trigger: {
10
88
  default: {
11
89
  bg: 'transparent',