@vellira-ui/tokens 2.30.0 → 2.32.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 (17) hide show
  1. package/dist/css/tokens.css +1589 -8
  2. package/dist/dark/components/select.d.ts +1702 -3
  3. package/dist/dark/components/select.d.ts.map +1 -1
  4. package/dist/dark/components/select.js +163 -6
  5. package/dist/factories/createSelectPalette.d.ts +347 -0
  6. package/dist/factories/createSelectPalette.d.ts.map +1 -0
  7. package/dist/factories/createSelectPalette.js +41 -0
  8. package/dist/generated/token-types.d.ts +4 -4
  9. package/dist/generated/token-types.d.ts.map +1 -1
  10. package/dist/generated/token-types.js +2108 -0
  11. package/dist/highContrast/components/select.d.ts +1701 -2
  12. package/dist/highContrast/components/select.d.ts.map +1 -1
  13. package/dist/highContrast/components/select.js +187 -5
  14. package/dist/light/components/select.d.ts +1702 -3
  15. package/dist/light/components/select.d.ts.map +1 -1
  16. package/dist/light/components/select.js +164 -6
  17. package/package.json +1 -1
package/dist/dark/components/select.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"select.d.ts","sourceRoot":"","sources":["../../../src/dark/components/select.ts"],"names":[],"mappings":"AAQA,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2ET,CAAC"}
1
+ {"version":3,"file":"select.d.ts","sourceRoot":"","sources":["../../../src/dark/components/select.ts"],"names":[],"mappings":"AAyEA,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyLT,CAAC"}
package/dist/dark/components/select.js CHANGED
@@ -1,25 +1,141 @@
1
+ import { createInputColorPalette } from '../../factories/createInputPalette.js';
2
+ import { createSelectPalette } from '../../factories/createSelectPalette.js';
3
+ import { colors } from '../../primitives/colors.js';
1
4
  import { border } from '../semantic/border.js';
2
5
  import { control } from '../semantic/control.js';
3
6
  import { focus } from '../semantic/focus.js';
7
+ import { icons } from '../semantic/icons.js';
4
8
  import { menu } from '../semantic/menu.js';
5
- import { shadow } from '../semantic/shadow.js';
6
9
  import { status } from '../semantic/status.js';
10
+ import { surface } from '../semantic/surface.js';
7
11
  import { text } from '../semantic/text.js';
12
+ const selectPaletteDefaults = {
13
+ fg: text.primary,
14
+ placeholder: text.secondary,
15
+ filledFocusBg: surface.subtle,
16
+ hoverBg: surface.hover,
17
+ };
18
+ const primary = createInputColorPalette({
19
+ ...selectPaletteDefaults,
20
+ accent: colors.primary[400],
21
+ accentHover: colors.primary[500],
22
+ accentSoft: colors.primary[900],
23
+ filledBg: colors.primary[950],
24
+ filledHoverBg: colors.primary[900],
25
+ ring: colors.primary[400],
26
+ });
27
+ const neutral = createInputColorPalette({
28
+ ...selectPaletteDefaults,
29
+ accent: colors.vellira[300],
30
+ accentHover: colors.vellira[400],
31
+ accentSoft: colors.vellira[800],
32
+ filledBg: colors.vellira[900],
33
+ filledHoverBg: colors.vellira[800],
34
+ hoverBg: colors.vellira[900],
35
+ ring: colors.vellira[400],
36
+ });
37
+ const success = createInputColorPalette({
38
+ ...selectPaletteDefaults,
39
+ accent: colors.success[400],
40
+ accentHover: colors.success[500],
41
+ accentSoft: colors.success[900],
42
+ filledBg: colors.success[950],
43
+ filledHoverBg: colors.success[900],
44
+ hoverBg: colors.success[950],
45
+ ring: colors.success[500],
46
+ });
47
+ const warning = createInputColorPalette({
48
+ ...selectPaletteDefaults,
49
+ accent: colors.warning[400],
50
+ accentHover: colors.warning[500],
51
+ accentSoft: colors.warning[900],
52
+ filledBg: colors.warning[950],
53
+ filledHoverBg: colors.warning[900],
54
+ hoverBg: colors.warning[950],
55
+ ring: colors.warning[500],
56
+ });
57
+ const danger = createInputColorPalette({
58
+ ...selectPaletteDefaults,
59
+ accent: colors.error[400],
60
+ accentHover: colors.error[500],
61
+ accentSoft: colors.error[900],
62
+ filledBg: colors.error[950],
63
+ filledHoverBg: colors.error[900],
64
+ hoverBg: colors.error[950],
65
+ ring: colors.error[500],
66
+ });
8
67
  export const select = {
68
+ primary: createSelectPalette(primary, {
69
+ dropdownBorder: 'transparent',
70
+ optionActiveBorder: 'transparent',
71
+ optionActiveRing: 'transparent',
72
+ optionHoverBorder: 'transparent',
73
+ optionPressedBg: colors.primary[700],
74
+ optionPressedBorder: 'transparent',
75
+ optionSelectedBg: colors.primary[800],
76
+ }),
77
+ neutral: createSelectPalette(neutral, {
78
+ dropdownBorder: 'transparent',
79
+ optionActiveBorder: 'transparent',
80
+ optionActiveRing: 'transparent',
81
+ optionHoverBorder: 'transparent',
82
+ optionPressedBg: colors.vellira[800],
83
+ optionPressedBorder: 'transparent',
84
+ optionSelectedBg: colors.vellira[850],
85
+ }),
86
+ success: createSelectPalette(success, {
87
+ dropdownBorder: 'transparent',
88
+ optionActiveBorder: 'transparent',
89
+ optionActiveRing: 'transparent',
90
+ optionHoverBorder: 'transparent',
91
+ optionPressedBg: colors.success[800],
92
+ optionPressedBorder: 'transparent',
93
+ optionSelectedBg: colors.success[900],
94
+ }),
95
+ warning: createSelectPalette(warning, {
96
+ dropdownBorder: 'transparent',
97
+ optionActiveBorder: 'transparent',
98
+ optionActiveRing: 'transparent',
99
+ optionHoverBorder: 'transparent',
100
+ optionPressedBg: colors.warning[800],
101
+ optionPressedBorder: 'transparent',
102
+ optionSelectedBg: colors.warning[900],
103
+ }),
104
+ danger: createSelectPalette(danger, {
105
+ dropdownBorder: 'transparent',
106
+ optionActiveBorder: 'transparent',
107
+ optionActiveRing: 'transparent',
108
+ optionHoverBorder: 'transparent',
109
+ optionPressedBg: colors.error[800],
110
+ optionPressedBorder: 'transparent',
111
+ optionSelectedBg: colors.error[900],
112
+ }),
9
113
  trigger: {
10
114
  default: {
11
115
  bg: 'transparent',
12
116
  fg: text.primary,
13
117
  border: border.default,
118
+ icon: icons.brand,
119
+ placeholder: text.secondary,
120
+ },
121
+ hover: {
122
+ ...control.hover,
123
+ icon: icons.hover,
124
+ placeholder: text.secondary,
14
125
  },
15
- hover: control.hover,
16
126
  focus: {
17
127
  bg: 'transparent',
18
128
  fg: text.primary,
19
129
  border: border.focus,
20
130
  ring: focus.ring.color,
131
+ icon: icons.brand,
132
+ placeholder: text.secondary,
133
+ },
134
+ disabled: {
135
+ ...control.disabled,
136
+ icon: icons.disabled,
137
+ placeholder: text.disabled,
21
138
  },
22
- disabled: control.disabled,
23
139
  placeholder: {
24
140
  fg: text.secondary,
25
141
  },
@@ -31,8 +147,24 @@ export const select = {
31
147
  dropdown: {
32
148
  bg: menu.background,
33
149
  fg: menu.item.default.fg,
34
- border: menu.border,
35
- shadow: shadow.lg,
150
+ border: 'transparent',
151
+ shadow: 'none',
152
+ search: {
153
+ bg: surface.default,
154
+ fg: text.primary,
155
+ border: border.muted,
156
+ placeholder: text.secondary,
157
+ ring: focus.ring.color,
158
+ },
159
+ empty: {
160
+ fg: text.secondary,
161
+ },
162
+ groupLabel: {
163
+ fg: colors.primary[300],
164
+ },
165
+ separator: {
166
+ bg: border.muted,
167
+ },
36
168
  },
37
169
  option: {
38
170
  default: {
@@ -60,12 +192,37 @@ export const select = {
60
192
  bg: control.selected.muted.bg,
61
193
  fg: control.selected.muted.fg,
62
194
  border: control.selected.muted.border,
63
- shadow: shadow.inset,
195
+ shadow: 'none',
64
196
  },
65
197
  disabled: {
66
198
  bg: menu.item.disabled.bg,
67
199
  fg: menu.item.disabled.fg,
68
200
  border: 'transparent',
69
201
  },
202
+ description: {
203
+ fg: text.secondary,
204
+ },
205
+ icon: {
206
+ fg: icons.default,
207
+ },
208
+ badge: {
209
+ bg: surface.subtle,
210
+ fg: text.secondary,
211
+ border: border.muted,
212
+ },
213
+ shortcut: {
214
+ bg: surface.subtle,
215
+ fg: text.secondary,
216
+ border: border.muted,
217
+ },
218
+ success: {
219
+ fg: status.success.fg,
220
+ },
221
+ warning: {
222
+ fg: status.warning.fg,
223
+ },
224
+ danger: {
225
+ fg: status.error.fg,
226
+ },
70
227
  },
71
228
  };
package/dist/factories/createSelectPalette.d.ts ADDED
@@ -0,0 +1,347 @@
1
+ import type { createInputColorPalette } from './createInputPalette.js';
2
+ type SelectBasePalette = ReturnType<typeof createInputColorPalette>;
3
+ type SelectPaletteConfig = {
4
+ dropdownBorder?: string;
5
+ optionActiveBorder?: string;
6
+ optionActiveRing?: string;
7
+ optionHoverBg?: string;
8
+ optionHoverBorder?: string;
9
+ optionHoverFg?: string;
10
+ optionPressedBg?: string;
11
+ optionPressedBorder?: string;
12
+ optionPressedFg?: string;
13
+ optionSelectedBg?: string;
14
+ optionSelectedBorder?: string;
15
+ };
16
+ export declare const createSelectPalette: (palette: SelectBasePalette, config?: SelectPaletteConfig) => {
17
+ readonly ring: string;
18
+ readonly outline: {
19
+ dropdown: {
20
+ border: string;
21
+ ring: string;
22
+ };
23
+ option: {
24
+ active: {
25
+ bg: string;
26
+ fg: string;
27
+ border: string;
28
+ ring: string;
29
+ };
30
+ hover: {
31
+ bg: string;
32
+ fg: string;
33
+ border: string;
34
+ };
35
+ selected: {
36
+ bg: string;
37
+ fg: string;
38
+ border: string;
39
+ };
40
+ pressed: {
41
+ bg: string;
42
+ fg: string;
43
+ border: string;
44
+ };
45
+ badge: {
46
+ bg: string;
47
+ fg: string;
48
+ border: string;
49
+ };
50
+ };
51
+ default: import("./createInputPalette.js").InputState;
52
+ hover: import("./createInputPalette.js").InputState;
53
+ focus: import("./createInputPalette.js").InputState;
54
+ } | {
55
+ dropdown: {
56
+ border: string;
57
+ ring: string;
58
+ };
59
+ option: {
60
+ active: {
61
+ bg: string;
62
+ fg: string;
63
+ border: string;
64
+ ring: string;
65
+ };
66
+ hover: {
67
+ bg: string;
68
+ fg: string;
69
+ border: string;
70
+ };
71
+ selected: {
72
+ bg: string;
73
+ fg: string;
74
+ border: string;
75
+ };
76
+ pressed: {
77
+ bg: string;
78
+ fg: string;
79
+ border: string;
80
+ };
81
+ badge: {
82
+ bg: string;
83
+ fg: string;
84
+ border: string;
85
+ };
86
+ };
87
+ default: import("./createInputPalette.js").InputState;
88
+ hover: import("./createInputPalette.js").InputState;
89
+ focus: import("./createInputPalette.js").InputState;
90
+ } | {
91
+ dropdown: {
92
+ border: string;
93
+ ring: string;
94
+ };
95
+ option: {
96
+ active: {
97
+ bg: string;
98
+ fg: string;
99
+ border: string;
100
+ ring: string;
101
+ };
102
+ hover: {
103
+ bg: string;
104
+ fg: string;
105
+ border: string;
106
+ };
107
+ selected: {
108
+ bg: string;
109
+ fg: string;
110
+ border: string;
111
+ };
112
+ pressed: {
113
+ bg: string;
114
+ fg: string;
115
+ border: string;
116
+ };
117
+ badge: {
118
+ bg: string;
119
+ fg: string;
120
+ border: string;
121
+ };
122
+ };
123
+ default: import("./createInputPalette.js").InputState;
124
+ hover: import("./createInputPalette.js").InputState;
125
+ focus: import("./createInputPalette.js").InputState;
126
+ };
127
+ readonly filled: {
128
+ dropdown: {
129
+ border: string;
130
+ ring: string;
131
+ };
132
+ option: {
133
+ active: {
134
+ bg: string;
135
+ fg: string;
136
+ border: string;
137
+ ring: string;
138
+ };
139
+ hover: {
140
+ bg: string;
141
+ fg: string;
142
+ border: string;
143
+ };
144
+ selected: {
145
+ bg: string;
146
+ fg: string;
147
+ border: string;
148
+ };
149
+ pressed: {
150
+ bg: string;
151
+ fg: string;
152
+ border: string;
153
+ };
154
+ badge: {
155
+ bg: string;
156
+ fg: string;
157
+ border: string;
158
+ };
159
+ };
160
+ default: import("./createInputPalette.js").InputState;
161
+ hover: import("./createInputPalette.js").InputState;
162
+ focus: import("./createInputPalette.js").InputState;
163
+ } | {
164
+ dropdown: {
165
+ border: string;
166
+ ring: string;
167
+ };
168
+ option: {
169
+ active: {
170
+ bg: string;
171
+ fg: string;
172
+ border: string;
173
+ ring: string;
174
+ };
175
+ hover: {
176
+ bg: string;
177
+ fg: string;
178
+ border: string;
179
+ };
180
+ selected: {
181
+ bg: string;
182
+ fg: string;
183
+ border: string;
184
+ };
185
+ pressed: {
186
+ bg: string;
187
+ fg: string;
188
+ border: string;
189
+ };
190
+ badge: {
191
+ bg: string;
192
+ fg: string;
193
+ border: string;
194
+ };
195
+ };
196
+ default: import("./createInputPalette.js").InputState;
197
+ hover: import("./createInputPalette.js").InputState;
198
+ focus: import("./createInputPalette.js").InputState;
199
+ } | {
200
+ dropdown: {
201
+ border: string;
202
+ ring: string;
203
+ };
204
+ option: {
205
+ active: {
206
+ bg: string;
207
+ fg: string;
208
+ border: string;
209
+ ring: string;
210
+ };
211
+ hover: {
212
+ bg: string;
213
+ fg: string;
214
+ border: string;
215
+ };
216
+ selected: {
217
+ bg: string;
218
+ fg: string;
219
+ border: string;
220
+ };
221
+ pressed: {
222
+ bg: string;
223
+ fg: string;
224
+ border: string;
225
+ };
226
+ badge: {
227
+ bg: string;
228
+ fg: string;
229
+ border: string;
230
+ };
231
+ };
232
+ default: import("./createInputPalette.js").InputState;
233
+ hover: import("./createInputPalette.js").InputState;
234
+ focus: import("./createInputPalette.js").InputState;
235
+ };
236
+ readonly soft: {
237
+ dropdown: {
238
+ border: string;
239
+ ring: string;
240
+ };
241
+ option: {
242
+ active: {
243
+ bg: string;
244
+ fg: string;
245
+ border: string;
246
+ ring: string;
247
+ };
248
+ hover: {
249
+ bg: string;
250
+ fg: string;
251
+ border: string;
252
+ };
253
+ selected: {
254
+ bg: string;
255
+ fg: string;
256
+ border: string;
257
+ };
258
+ pressed: {
259
+ bg: string;
260
+ fg: string;
261
+ border: string;
262
+ };
263
+ badge: {
264
+ bg: string;
265
+ fg: string;
266
+ border: string;
267
+ };
268
+ };
269
+ default: import("./createInputPalette.js").InputState;
270
+ hover: import("./createInputPalette.js").InputState;
271
+ focus: import("./createInputPalette.js").InputState;
272
+ } | {
273
+ dropdown: {
274
+ border: string;
275
+ ring: string;
276
+ };
277
+ option: {
278
+ active: {
279
+ bg: string;
280
+ fg: string;
281
+ border: string;
282
+ ring: string;
283
+ };
284
+ hover: {
285
+ bg: string;
286
+ fg: string;
287
+ border: string;
288
+ };
289
+ selected: {
290
+ bg: string;
291
+ fg: string;
292
+ border: string;
293
+ };
294
+ pressed: {
295
+ bg: string;
296
+ fg: string;
297
+ border: string;
298
+ };
299
+ badge: {
300
+ bg: string;
301
+ fg: string;
302
+ border: string;
303
+ };
304
+ };
305
+ default: import("./createInputPalette.js").InputState;
306
+ hover: import("./createInputPalette.js").InputState;
307
+ focus: import("./createInputPalette.js").InputState;
308
+ } | {
309
+ dropdown: {
310
+ border: string;
311
+ ring: string;
312
+ };
313
+ option: {
314
+ active: {
315
+ bg: string;
316
+ fg: string;
317
+ border: string;
318
+ ring: string;
319
+ };
320
+ hover: {
321
+ bg: string;
322
+ fg: string;
323
+ border: string;
324
+ };
325
+ selected: {
326
+ bg: string;
327
+ fg: string;
328
+ border: string;
329
+ };
330
+ pressed: {
331
+ bg: string;
332
+ fg: string;
333
+ border: string;
334
+ };
335
+ badge: {
336
+ bg: string;
337
+ fg: string;
338
+ border: string;
339
+ };
340
+ };
341
+ default: import("./createInputPalette.js").InputState;
342
+ hover: import("./createInputPalette.js").InputState;
343
+ focus: import("./createInputPalette.js").InputState;
344
+ };
345
+ };
346
+ export {};
347
+ //# sourceMappingURL=createSelectPalette.d.ts.map
package/dist/factories/createSelectPalette.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"createSelectPalette.d.ts","sourceRoot":"","sources":["../../src/factories/createSelectPalette.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,yBAAyB,CAAC;AAEvE,KAAK,iBAAiB,GAAG,UAAU,CAAC,OAAO,uBAAuB,CAAC,CAAC;AAEpE,KAAK,mBAAmB,GAAG;IACzB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,oBAAoB,CAAC,EAAE,MAAM,CAAC;CAC/B,CAAC;AA0CF,eAAO,MAAM,mBAAmB,GAC9B,SAAS,iBAAiB,EAC1B,SAAQ,mBAAwB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAOrB,CAAC"}
package/dist/factories/createSelectPalette.js ADDED
@@ -0,0 +1,41 @@
1
+ const createSelectVariant = (palette, variant, config) => ({
2
+ ...palette[variant],
3
+ dropdown: {
4
+ border: config.dropdownBorder ?? palette.outline.default.border,
5
+ ring: palette.ring,
6
+ },
7
+ option: {
8
+ active: {
9
+ bg: palette[variant].hover.bg,
10
+ fg: palette[variant].hover.fg,
11
+ border: config.optionActiveBorder ?? palette[variant].hover.border,
12
+ ring: config.optionActiveRing ?? palette.ring,
13
+ },
14
+ hover: {
15
+ bg: config.optionHoverBg ?? palette[variant].hover.bg,
16
+ fg: config.optionHoverFg ?? palette[variant].hover.fg,
17
+ border: config.optionHoverBorder ?? palette[variant].hover.border,
18
+ },
19
+ selected: {
20
+ bg: config.optionSelectedBg ?? palette.soft.default.bg,
21
+ fg: palette.soft.default.fg,
22
+ border: config.optionSelectedBorder ?? palette.outline.default.border,
23
+ },
24
+ pressed: {
25
+ bg: config.optionPressedBg ?? palette[variant].focus.bg,
26
+ fg: config.optionPressedFg ?? palette[variant].focus.fg,
27
+ border: config.optionPressedBorder ?? palette[variant].focus.border,
28
+ },
29
+ badge: {
30
+ bg: palette.soft.default.bg,
31
+ fg: palette.soft.default.fg,
32
+ border: palette.soft.default.border,
33
+ },
34
+ },
35
+ });
36
+ export const createSelectPalette = (palette, config = {}) => ({
37
+ ring: palette.ring,
38
+ outline: createSelectVariant(palette, 'outline', config),
39
+ filled: createSelectVariant(palette, 'filled', config),
40
+ soft: createSelectVariant(palette, 'soft', config),
41
+ });