@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/select.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"select.d.ts","sourceRoot":"","sources":["../../../src/highContrast/components/select.ts"],"names":[],"mappings":"AAuHA,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyLT,CAAC"}
1
+ {"version":3,"file":"select.d.ts","sourceRoot":"","sources":["../../../src/highContrast/components/select.ts"],"names":[],"mappings":"AAwHA,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyOT,CAAC"}
package/dist/highContrast/components/select.js CHANGED
@@ -6,6 +6,7 @@ import { control } from '../semantic/control.js';
6
6
  import { focus } from '../semantic/focus.js';
7
7
  import { icons } from '../semantic/icons.js';
8
8
  import { menu } from '../semantic/menu.js';
9
+ import { shadow } from '../semantic/shadow.js';
9
10
  import { status } from '../semantic/status.js';
10
11
  import { surface } from '../semantic/surface.js';
11
12
  import { text } from '../semantic/text.js';
@@ -87,6 +88,8 @@ const danger = createInputColorPalette({
87
88
  export const select = {
88
89
  primary: createSelectPalette(primary, {
89
90
  optionActiveBorder: 'transparent',
91
+ optionActiveBg: menu.item.active.bg,
92
+ optionActiveFg: menu.item.active.fg,
90
93
  optionActiveRing: 'transparent',
91
94
  optionHoverBg: menu.item.hover.bg,
92
95
  optionHoverBorder: 'transparent',
@@ -94,9 +97,17 @@ export const select = {
94
97
  optionPressedBg: menu.item.pressed.bg,
95
98
  optionPressedBorder: 'transparent',
96
99
  optionPressedFg: menu.item.pressed.fg,
100
+ optionSelectedActiveBg: menu.item.active.bg,
101
+ optionSelectedActiveFg: menu.item.active.fg,
102
+ optionSelectedHoverBg: menu.item.hover.bg,
103
+ optionSelectedHoverFg: menu.item.hover.fg,
104
+ optionSelectedPressedBg: menu.item.pressed.bg,
105
+ optionSelectedPressedFg: menu.item.pressed.fg,
97
106
  }),
98
107
  neutral: createSelectPalette(neutral, {
99
108
  optionActiveBorder: 'transparent',
109
+ optionActiveBg: menu.item.active.bg,
110
+ optionActiveFg: menu.item.active.fg,
100
111
  optionActiveRing: 'transparent',
101
112
  optionHoverBg: menu.item.hover.bg,
102
113
  optionHoverBorder: 'transparent',
@@ -104,9 +115,17 @@ export const select = {
104
115
  optionPressedBg: menu.item.pressed.bg,
105
116
  optionPressedBorder: 'transparent',
106
117
  optionPressedFg: menu.item.pressed.fg,
118
+ optionSelectedActiveBg: menu.item.active.bg,
119
+ optionSelectedActiveFg: menu.item.active.fg,
120
+ optionSelectedHoverBg: menu.item.hover.bg,
121
+ optionSelectedHoverFg: menu.item.hover.fg,
122
+ optionSelectedPressedBg: menu.item.pressed.bg,
123
+ optionSelectedPressedFg: menu.item.pressed.fg,
107
124
  }),
108
125
  success: createSelectPalette(success, {
109
126
  optionActiveBorder: 'transparent',
127
+ optionActiveBg: menu.item.active.bg,
128
+ optionActiveFg: menu.item.active.fg,
110
129
  optionActiveRing: 'transparent',
111
130
  optionHoverBg: menu.item.hover.bg,
112
131
  optionHoverBorder: 'transparent',
@@ -114,9 +133,17 @@ export const select = {
114
133
  optionPressedBg: menu.item.pressed.bg,
115
134
  optionPressedBorder: 'transparent',
116
135
  optionPressedFg: menu.item.pressed.fg,
136
+ optionSelectedActiveBg: menu.item.active.bg,
137
+ optionSelectedActiveFg: menu.item.active.fg,
138
+ optionSelectedHoverBg: menu.item.hover.bg,
139
+ optionSelectedHoverFg: menu.item.hover.fg,
140
+ optionSelectedPressedBg: menu.item.pressed.bg,
141
+ optionSelectedPressedFg: menu.item.pressed.fg,
117
142
  }),
118
143
  warning: createSelectPalette(warning, {
119
144
  optionActiveBorder: 'transparent',
145
+ optionActiveBg: menu.item.active.bg,
146
+ optionActiveFg: menu.item.active.fg,
120
147
  optionActiveRing: 'transparent',
121
148
  optionHoverBg: menu.item.hover.bg,
122
149
  optionHoverBorder: 'transparent',
@@ -124,9 +151,17 @@ export const select = {
124
151
  optionPressedBg: menu.item.pressed.bg,
125
152
  optionPressedBorder: 'transparent',
126
153
  optionPressedFg: menu.item.pressed.fg,
154
+ optionSelectedActiveBg: menu.item.active.bg,
155
+ optionSelectedActiveFg: menu.item.active.fg,
156
+ optionSelectedHoverBg: menu.item.hover.bg,
157
+ optionSelectedHoverFg: menu.item.hover.fg,
158
+ optionSelectedPressedBg: menu.item.pressed.bg,
159
+ optionSelectedPressedFg: menu.item.pressed.fg,
127
160
  }),
128
161
  danger: createSelectPalette(danger, {
129
162
  optionActiveBorder: 'transparent',
163
+ optionActiveBg: menu.item.active.bg,
164
+ optionActiveFg: menu.item.active.fg,
130
165
  optionActiveRing: 'transparent',
131
166
  optionHoverBg: menu.item.hover.bg,
132
167
  optionHoverBorder: 'transparent',
@@ -134,6 +169,12 @@ export const select = {
134
169
  optionPressedBg: menu.item.pressed.bg,
135
170
  optionPressedBorder: 'transparent',
136
171
  optionPressedFg: menu.item.pressed.fg,
172
+ optionSelectedActiveBg: menu.item.active.bg,
173
+ optionSelectedActiveFg: menu.item.active.fg,
174
+ optionSelectedHoverBg: menu.item.hover.bg,
175
+ optionSelectedHoverFg: menu.item.hover.fg,
176
+ optionSelectedPressedBg: menu.item.pressed.bg,
177
+ optionSelectedPressedFg: menu.item.pressed.fg,
137
178
  }),
138
179
  trigger: {
139
180
  default: {
@@ -173,7 +214,7 @@ export const select = {
173
214
  bg: menu.background,
174
215
  fg: menu.item.default.fg,
175
216
  border: menu.border,
176
- shadow: 'none',
217
+ shadow: shadow.lg,
177
218
  search: {
178
219
  bg: surface.default,
179
220
  fg: text.primary,
@@ -191,6 +232,13 @@ export const select = {
191
232
  bg: border.muted,
192
233
  },
193
234
  },
235
+ clearButton: {
236
+ fg: icons.muted,
237
+ hoverFg: status.error.fg,
238
+ hoverBg: status.error.bg,
239
+ focusBg: surface.subtle,
240
+ pressedBg: surface.active,
241
+ },
194
242
  option: {
195
243
  default: {
196
244
  ...menu.item.default,
package/dist/highContrast/theme.d.ts CHANGED
@@ -192,11 +192,11 @@ export declare const highContrastTheme: {
192
192
  };
193
193
  readonly typography: {
194
194
  readonly family: {
195
- readonly base: "KantumruyPro, Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif";
196
- readonly extraLight: "KantumruyPro-ExtraLight";
197
- readonly regular: "KantumruyPro-Regular";
198
- readonly medium: "KantumruyPro-Medium";
199
- readonly semibold: "KantumruyPro-SemiBold";
195
+ readonly base: "VelliraSans, Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif";
196
+ readonly extraLight: "VelliraSans-ExtraLight";
197
+ readonly regular: "VelliraSans-Regular";
198
+ readonly medium: "VelliraSans-Medium";
199
+ readonly semibold: "VelliraSans-SemiBold";
200
200
  };
201
201
  readonly size: {
202
202
  readonly xs: 12;
@@ -209,8 +209,8 @@ export declare const highContrastTheme: {
209
209
  readonly weight: {
210
210
  readonly light: "200";
211
211
  readonly regular: "400";
212
- readonly medium: "600";
213
- readonly semibold: "700";
212
+ readonly medium: "500";
213
+ readonly semibold: "600";
214
214
  };
215
215
  readonly lineHeight: {
216
216
  readonly xs: 16;
package/dist/index.d.ts CHANGED
@@ -58,11 +58,11 @@ export declare const theme: {
58
58
  };
59
59
  readonly typography: {
60
60
  readonly family: {
61
- readonly base: "KantumruyPro, Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif";
62
- readonly extraLight: "KantumruyPro-ExtraLight";
63
- readonly regular: "KantumruyPro-Regular";
64
- readonly medium: "KantumruyPro-Medium";
65
- readonly semibold: "KantumruyPro-SemiBold";
61
+ readonly base: "VelliraSans, Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif";
62
+ readonly extraLight: "VelliraSans-ExtraLight";
63
+ readonly regular: "VelliraSans-Regular";
64
+ readonly medium: "VelliraSans-Medium";
65
+ readonly semibold: "VelliraSans-SemiBold";
66
66
  };
67
67
  readonly size: {
68
68
  readonly xs: 12;
@@ -75,8 +75,8 @@ export declare const theme: {
75
75
  readonly weight: {
76
76
  readonly light: "200";
77
77
  readonly regular: "400";
78
- readonly medium: "600";
79
- readonly semibold: "700";
78
+ readonly medium: "500";
79
+ readonly semibold: "600";
80
80
  };
81
81
  readonly lineHeight: {
82
82
  readonly xs: 16;
package/dist/light/components/contextMenu.d.ts CHANGED
@@ -40,7 +40,7 @@ export declare const contextMenu: {
40
40
  readonly fg: "#BE123C";
41
41
  };
42
42
  readonly hover: {
43
- readonly bg: "#FFF1F2";
43
+ readonly bg: "#FFE4E6";
44
44
  readonly fg: "#BE123C";
45
45
  };
46
46
  readonly active: {
package/dist/light/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";
@@ -70,7 +325,7 @@ export declare const dropdown: {
70
325
  readonly fg: "#BE123C";
71
326
  };
72
327
  readonly hover: {
73
- readonly bg: "#FFF1F2";
328
+ readonly bg: "#FFE4E6";
74
329
  readonly fg: "#BE123C";
75
330
  };
76
331
  readonly active: {
package/dist/light/components/dropdown.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"dropdown.d.ts","sourceRoot":"","sources":["../../../src/light/components/dropdown.ts"],"names":[],"mappings":"AAOA,eAAO,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0EX,CAAC"}
1
+ {"version":3,"file":"dropdown.d.ts","sourceRoot":"","sources":["../../../src/light/components/dropdown.ts"],"names":[],"mappings":"AAwEA,eAAO,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuHX,CAAC"}
package/dist/light/components/dropdown.js CHANGED
@@ -1,10 +1,113 @@
1
+ import { createDropdownPalette } from '../../factories/createDropdownPalette.js';
2
+ import { createInputColorPalette } from '../../factories/createInputPalette.js';
3
+ import { colors } from '../../primitives/colors.js';
4
+ import { withAlpha } from '../../utils/color.js';
1
5
  import { border } from '../semantic/border.js';
2
6
  import { focus } from '../semantic/focus.js';
3
7
  import { menu } from '../semantic/menu.js';
4
8
  import { shadow } from '../semantic/shadow.js';
5
9
  import { surface } from '../semantic/surface.js';
6
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[500],
20
+ accentHover: colors.primary[700],
21
+ accentSoft: colors.primary[50],
22
+ filledBg: colors.primary[100],
23
+ filledHoverBg: colors.primary[200],
24
+ ring: colors.primary[400],
25
+ });
26
+ const neutral = createInputColorPalette({
27
+ ...dropdownPaletteDefaults,
28
+ accent: colors.vellira[400],
29
+ accentHover: colors.vellira[600],
30
+ accentSoft: colors.vellira[100],
31
+ filledBg: colors.vellira[150],
32
+ filledHoverBg: colors.vellira[200],
33
+ hoverBg: colors.vellira[100],
34
+ ring: colors.vellira[400],
35
+ });
36
+ const success = createInputColorPalette({
37
+ ...dropdownPaletteDefaults,
38
+ accent: colors.success[600],
39
+ accentHover: colors.success[800],
40
+ accentSoft: colors.success[50],
41
+ filledBg: colors.success[100],
42
+ filledHoverBg: colors.success[200],
43
+ hoverBg: colors.success[50],
44
+ ring: colors.success[500],
45
+ });
46
+ const warning = createInputColorPalette({
47
+ ...dropdownPaletteDefaults,
48
+ accent: colors.warning[600],
49
+ accentHover: colors.warning[800],
50
+ accentSoft: colors.warning[50],
51
+ filledBg: colors.warning[100],
52
+ filledHoverBg: colors.warning[200],
53
+ hoverBg: colors.warning[50],
54
+ ring: colors.warning[500],
55
+ });
56
+ const danger = createInputColorPalette({
57
+ ...dropdownPaletteDefaults,
58
+ accent: colors.error[600],
59
+ accentHover: colors.error[800],
60
+ accentSoft: colors.error[50],
61
+ filledBg: colors.error[100],
62
+ filledHoverBg: colors.error[200],
63
+ hoverBg: colors.error[50],
64
+ ring: colors.error[500],
65
+ });
7
66
  export const dropdown = {
67
+ primary: createDropdownPalette(primary, {
68
+ contentBorder: 'transparent',
69
+ itemActiveBg: colors.primary[100],
70
+ itemActiveRing: 'transparent',
71
+ itemHoverBg: colors.primary[50],
72
+ itemPressedBg: colors.primary[200],
73
+ }),
74
+ neutral: createDropdownPalette(neutral, {
75
+ contentBorder: 'transparent',
76
+ itemActiveBg: colors.vellira[150],
77
+ itemActiveRing: 'transparent',
78
+ itemHoverBg: colors.vellira[100],
79
+ itemPressedBg: colors.vellira[200],
80
+ }),
81
+ success: createDropdownPalette(success, {
82
+ contentBorder: 'transparent',
83
+ itemActiveBg: withAlpha(colors.success[600], 0.14),
84
+ itemActiveFg: colors.success[700],
85
+ itemActiveRing: 'transparent',
86
+ itemHoverBg: withAlpha(colors.success[600], 0.1),
87
+ itemHoverFg: colors.success[700],
88
+ itemPressedBg: withAlpha(colors.success[600], 0.18),
89
+ itemPressedFg: colors.success[800],
90
+ }),
91
+ warning: createDropdownPalette(warning, {
92
+ contentBorder: 'transparent',
93
+ itemActiveBg: withAlpha(colors.warning[600], 0.14),
94
+ itemActiveFg: colors.warning[700],
95
+ itemActiveRing: 'transparent',
96
+ itemHoverBg: withAlpha(colors.warning[600], 0.1),
97
+ itemHoverFg: colors.warning[700],
98
+ itemPressedBg: withAlpha(colors.warning[600], 0.18),
99
+ itemPressedFg: colors.warning[800],
100
+ }),
101
+ danger: createDropdownPalette(danger, {
102
+ contentBorder: 'transparent',
103
+ itemActiveBg: withAlpha(colors.error[600], 0.14),
104
+ itemActiveFg: colors.error[700],
105
+ itemActiveRing: 'transparent',
106
+ itemHoverBg: withAlpha(colors.error[600], 0.1),
107
+ itemHoverFg: colors.error[700],
108
+ itemPressedBg: withAlpha(colors.error[600], 0.18),
109
+ itemPressedFg: colors.error[800],
110
+ }),
8
111
  trigger: {
9
112
  default: {
10
113
  bg: 'transparent',
package/dist/light/components/input.d.ts CHANGED
@@ -142,7 +142,7 @@ export declare const input: {
142
142
  readonly clearButton: {
143
143
  readonly fg: "#958CB0";
144
144
  readonly hoverFg: "#BE123C";
145
- readonly hoverBg: "#FFF1F2";
145
+ readonly hoverBg: "#FFE4E6";
146
146
  readonly focusBg: "#FDFCFF";
147
147
  readonly pressedBg: "#EEE8FA";
148
148
  };