@keenmate/web-multiselect 1.6.0 → 1.7.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 (8) hide show
  1. package/README.md +39 -38
  2. package/dist/multiselect.js +535 -531
  3. package/dist/multiselect.umd.js +8 -8
  4. package/dist/style.css +1 -1
  5. package/package.json +1 -1
  6. package/src/css/_input-dropdown.css +20 -10
  7. package/src/css/_options.css +1 -1
  8. package/src/css/_variables.css +103 -96
package/src/css/_variables.css CHANGED
@@ -28,6 +28,12 @@
28
28
  ========================================================================== */
29
29
  font-family: var(--ms-font-family, var(--base-font-family, inherit));
30
30
 
31
+ /* ==========================================================================
32
+ HOST ELEMENT SIZING
33
+ ==========================================================================
34
+ Allows external width/height styling on <web-multiselect> element */
35
+ display: block;
36
+
31
37
  /* ==========================================================================
32
38
  COLORS & THEME
33
39
  ==========================================================================
@@ -41,6 +47,10 @@
41
47
  --ms-accent-color-hover: var(--base-accent-color-hover, #2563eb);
42
48
  --ms-accent-color-active: var(--base-accent-color-active, #1d4ed8);
43
49
 
50
+ /* Accent Color Light Variants (for backgrounds) */
51
+ --ms-accent-color-light: var(--base-accent-color-light, #eff6ff);
52
+ --ms-accent-color-light-hover: var(--base-accent-color-light-hover, #e0f2fe);
53
+
44
54
  /* Text Color Levels (FluentUI-style hierarchy) */
45
55
  --ms-text-color-1: var(--base-text-color-1, #111827);
46
56
  --ms-text-color-2: var(--base-text-color-2, #353b47);
@@ -55,7 +65,10 @@
55
65
  /* Background Colors */
56
66
  --ms-primary-bg: var(--base-primary-bg, #f3f4f6);
57
67
  --ms-primary-bg-hover: var(--base-primary-bg-hover, #e5e7eb);
68
+
69
+ /* Border Base Variables */
58
70
  --ms-border-color: var(--base-border-color, #e5e7eb);
71
+ --ms-border: var(--base-border, 1px solid var(--ms-border-color));
59
72
 
60
73
  /* ==========================================================================
61
74
  SEMANTIC VARIABLES - Component-Specific Theming
@@ -82,7 +95,7 @@
82
95
  --ms-counter-badge-color: var(--ms-text-on-accent);
83
96
 
84
97
  /* Floating Hint Semantic Variables */
85
- --ms-hint-background: #ffffff;
98
+ --ms-hint-background: var(--base-hint-background, #ffffff);
86
99
  --ms-hint-color: var(--ms-text-color-4);
87
100
  --ms-hint-border-color: var(--ms-border-color);
88
101
 
@@ -93,7 +106,7 @@
93
106
  --ms-dropdown-box-shadow-semantic: var(--base-dropdown-box-shadow, 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1));
94
107
 
95
108
  /* Dropdown Actions Semantic Variables */
96
- --ms-actions-background: #ffffff;
109
+ --ms-actions-background: var(--base-actions-background, #ffffff);
97
110
  --ms-actions-border-color: var(--ms-border-color);
98
111
 
99
112
  /* Action Button Semantic Variables */
@@ -115,15 +128,15 @@
115
128
  --ms-option-background-focused: var(--ms-primary-bg);
116
129
  --ms-option-color-focused: inherit;
117
130
  --ms-option-outline-color-focused: var(--ms-accent-color);
118
- --ms-option-background-selected: rgba(59, 130, 246, 0.1);
119
- --ms-option-background-matched: rgba(59, 130, 246, 0.08);
131
+ --ms-option-background-selected: color-mix(in srgb, var(--ms-accent-color) 10%, transparent);
132
+ --ms-option-background-matched: color-mix(in srgb, var(--ms-accent-color) 8%, transparent);
120
133
  --ms-option-color-matched: inherit;
121
- --ms-option-border-matched-color: rgba(59, 130, 246, 0.4);
134
+ --ms-option-border-matched-color: color-mix(in srgb, var(--ms-accent-color) 40%, transparent);
122
135
 
123
136
  /* Option Content Semantic Variables */
124
137
  --ms-option-title-color: var(--ms-text-color-1);
125
138
  --ms-option-subtitle-color: var(--ms-text-color-3);
126
- --ms-option-mark-background: rgba(59, 130, 246, 0.2);
139
+ --ms-option-mark-background: color-mix(in srgb, var(--ms-accent-color) 20%, transparent);
127
140
  --ms-option-mark-color: inherit;
128
141
 
129
142
  /* Empty/Loading State Semantic Variables */
@@ -131,14 +144,14 @@
131
144
  --ms-loading-color: var(--ms-text-color-3);
132
145
 
133
146
  /* Badge Semantic Variables */
134
- --ms-badge-background: #eff6ff;
135
- --ms-badge-background-hover: #ffffff;
136
- --ms-badge-background-active: #e0f2fe;
147
+ --ms-badge-background: var(--ms-accent-color-light);
148
+ --ms-badge-background-hover: var(--base-badge-background-hover, var(--ms-input-background));
149
+ --ms-badge-background-active: var(--ms-accent-color-light-hover);
137
150
 
138
151
  /* Badge Text Semantic Variables */
139
- --ms-badge-text-background: #eff6ff;
152
+ --ms-badge-text-background: var(--ms-accent-color-light);
140
153
  --ms-badge-text-color: var(--ms-accent-color);
141
- --ms-badge-text-background-hover: #ffffff;
154
+ --ms-badge-text-background-hover: var(--base-badge-background-hover, var(--ms-input-background));
142
155
  --ms-badge-text-color-hover: var(--ms-badge-text-color);
143
156
 
144
157
  /* Badge Remove Button Semantic Variables */
@@ -148,11 +161,11 @@
148
161
 
149
162
  /* Badge Counter Variant Semantic Variables */
150
163
  --ms-badge-counter-border-color: var(--ms-border-color);
151
- --ms-badge-counter-text-background: #d1d5db;
164
+ --ms-badge-counter-text-background: var(--ms-primary-bg);
152
165
  --ms-badge-counter-text-color: var(--ms-text-color-3);
153
- --ms-badge-counter-remove-background: #6b7280;
154
- --ms-badge-counter-remove-background-hover: #111827;
155
- --ms-badge-counter-remove-color: #ffffff;
166
+ --ms-badge-counter-remove-background: var(--ms-text-color-3);
167
+ --ms-badge-counter-remove-background-hover: var(--ms-text-color-1);
168
+ --ms-badge-counter-remove-color: var(--ms-text-on-accent);
156
169
 
157
170
  /* Count Display Semantic Variables */
158
171
  --ms-counter-wrapper-background: transparent;
@@ -170,9 +183,9 @@
170
183
  --ms-tooltip-text-color: var(--base-tooltip-text-color, #ffffff);
171
184
 
172
185
  /* Selected Popover Semantic Variables */
173
- --ms-selected-popover-background: #ffffff;
186
+ --ms-selected-popover-background: var(--base-popover-background, #ffffff);
174
187
  --ms-selected-popover-border-color: var(--ms-border-color);
175
- --ms-selected-popover-header-background: rgba(59, 130, 246, 0.1);
188
+ --ms-selected-popover-header-background: color-mix(in srgb, var(--ms-accent-color) 10%, transparent);
176
189
  --ms-selected-popover-header-color: var(--ms-text-color-1);
177
190
  --ms-selected-popover-header-border-color: var(--ms-border-color);
178
191
  --ms-selected-popover-close-background: transparent;
@@ -189,8 +202,7 @@
189
202
  --ms-input-font-size: calc(var(--base-font-size-sm, 1.4) * var(--ms-rem));
190
203
  --ms-input-border-width: 1px;
191
204
  --ms-input-border-radius: var(--ms-border-radius-md);
192
- --ms-input-bg: #ffffff;
193
- --ms-input-text: #111827;
205
+ --ms-input-text: var(--ms-text-color-1);
194
206
  --ms-input-bg-disabled: rgba(107, 114, 128, 0.05);
195
207
 
196
208
  /* ==========================================================================
@@ -227,7 +239,7 @@
227
239
  TOGGLE ICON
228
240
  ========================================================================== */
229
241
  --ms-toggle-right: calc(1.2 * var(--ms-rem));
230
- --ms-toggle-color: #6b7280;
242
+ --ms-toggle-color: var(--ms-text-color-3);
231
243
  --ms-transform-center-y: translateY(-50%);
232
244
  --ms-transform-rotate-180: 180deg;
233
245
 
@@ -236,20 +248,19 @@
236
248
  ========================================================================== */
237
249
  --ms-counter-offset: calc(3.2 * var(--ms-rem));
238
250
  --ms-counter-padding: calc(0.2 * var(--ms-rem)) calc(0.4 * var(--ms-rem));
239
- --ms-counter-bg: #3b82f6;
240
- --ms-counter-color: #ffffff;
251
+ --ms-counter-bg: var(--ms-accent-color);
252
+ --ms-counter-color: var(--ms-text-on-accent);
241
253
  --ms-counter-font-size: calc(var(--base-font-size-xs, 1.2) * var(--ms-rem));
242
254
  --ms-counter-font-weight: var(--base-font-weight-semibold, 600);
243
255
  --ms-counter-border-radius: var(--ms-border-radius-sm);
244
- --ms-counter-bg-hover: #2563eb;
256
+ --ms-counter-bg-hover: var(--ms-accent-color-hover);
245
257
  --ms-transform-scale-hover: 1.1;
246
258
 
247
259
  /* ==========================================================================
248
260
  FLOATING HINT
249
261
  ========================================================================== */
250
262
  --ms-hint-padding: calc(0.8 * var(--ms-rem)) calc(1.2 * var(--ms-rem));
251
- --ms-hint-bg: #ffffff;
252
- --ms-hint-border: 1px solid #e5e7eb;
263
+ --ms-hint-border: var(--ms-border);
253
264
  --ms-hint-border-radius: var(--ms-border-radius-lg);
254
265
  --ms-hint-box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
255
266
  --ms-hint-font-size: calc(var(--base-font-size-xs, 1.2) * var(--ms-rem));
@@ -257,12 +268,11 @@
257
268
  /* ==========================================================================
258
269
  DROPDOWN
259
270
  ========================================================================== */
260
- --ms-dropdown-bg: #ffffff;
261
- --ms-dropdown-border: var(--base-dropdown-border, 1px solid #e5e7eb);
271
+ --ms-dropdown-border: var(--base-dropdown-border, 1px solid var(--ms-border-color));
262
272
  --ms-dropdown-border-radius: var(--ms-border-radius-lg);
263
273
  --ms-dropdown-box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
264
274
  --ms-options-max-height: calc(32 * var(--ms-rem));
265
- --ms-option-color: #111827;
275
+ --ms-option-color: var(--ms-text-color-1);
266
276
  --ms-z-index-dropdown: 9999;
267
277
  --ms-z-index-sticky: 1;
268
278
 
@@ -271,18 +281,17 @@
271
281
  ========================================================================== */
272
282
  --ms-actions-gap: calc(0.4 * var(--ms-rem));
273
283
  --ms-actions-padding: calc(0.8 * var(--ms-rem));
274
- --ms-actions-border-bottom: 1px solid #e5e7eb;
275
- --ms-actions-bg: #ffffff;
284
+ --ms-actions-border-bottom: var(--ms-border);
276
285
 
277
286
  /* Action Button */
278
287
  --ms-action-btn-padding: calc(0.4 * var(--ms-rem)) calc(0.8 * var(--ms-rem));
279
288
  --ms-action-btn-font-size: calc(var(--base-font-size-xs, 1.2) * var(--ms-rem));
280
- --ms-action-btn-border: 1px solid #e5e7eb;
289
+ --ms-action-btn-border: var(--ms-border);
281
290
  --ms-action-btn-border-radius: var(--ms-border-radius-sm);
282
291
  --ms-action-btn-bg: transparent;
283
292
  --ms-action-btn-color: inherit;
284
- --ms-action-btn-bg-hover: #f3f4f6;
285
- --ms-action-btn-border-color-hover: #3b82f6;
293
+ --ms-action-btn-bg-hover: var(--ms-primary-bg);
294
+ --ms-action-btn-border-color-hover: var(--ms-accent-color);
286
295
  --ms-transform-scale-active: 0.98;
287
296
 
288
297
  /* ==========================================================================
@@ -291,7 +300,7 @@
291
300
  --ms-options-padding: 0;
292
301
 
293
302
  /* Group */
294
- --ms-group-border-top: 1px solid #e5e7eb;
303
+ --ms-group-border-top: var(--ms-border);
295
304
  --ms-group-margin-top: calc(0.4 * var(--ms-rem));
296
305
  --ms-group-padding-top: calc(0.4 * var(--ms-rem));
297
306
 
@@ -299,7 +308,7 @@
299
308
  --ms-group-label-padding: calc(0.4 * var(--ms-rem)) calc(1.2 * var(--ms-rem));
300
309
  --ms-group-label-font-size: calc(var(--base-font-size-xs, 1.2) * var(--ms-rem));
301
310
  --ms-group-label-font-weight: var(--base-font-weight-semibold, 600);
302
- --ms-group-label-color: #6b7280;
311
+ --ms-group-label-color: var(--ms-text-color-3);
303
312
  --ms-group-label-transform: uppercase;
304
313
  --ms-group-label-letter-spacing: 0.05em;
305
314
 
@@ -310,20 +319,20 @@
310
319
  --ms-option-padding: calc(0.8 * var(--ms-rem)) calc(1.2 * var(--ms-rem));
311
320
  --ms-option-padding-h: calc(1.2 * var(--ms-rem));
312
321
  --ms-option-bg: transparent;
313
- --ms-option-bg-hover: #f9fafb;
314
- --ms-option-bg-focused: #f9fafb;
315
- --ms-option-outline-focused: 2px solid #3b82f6;
322
+ --ms-option-bg-hover: var(--ms-primary-bg);
323
+ --ms-option-bg-focused: var(--ms-primary-bg);
324
+ --ms-option-outline-focused: 2px solid var(--ms-accent-color);
316
325
  --ms-option-focus-outline-offset: -2px;
317
- --ms-option-bg-matched: rgba(59, 130, 246, 0.08);
318
- --ms-option-border-matched: 3px solid rgba(59, 130, 246, 0.4);
319
- --ms-option-bg-selected: rgba(59, 130, 246, 0.1);
326
+ --ms-option-bg-matched: color-mix(in srgb, var(--ms-accent-color) 8%, transparent);
327
+ --ms-option-border-matched: 3px solid color-mix(in srgb, var(--ms-accent-color) 40%, transparent);
328
+ --ms-option-bg-selected: color-mix(in srgb, var(--ms-accent-color) 10%, transparent);
320
329
 
321
330
  /* Option State Combinations */
322
- --ms-option-bg-focused-hover: #f9fafb;
323
- --ms-option-bg-matched-hover: rgba(59, 130, 246, 0.12);
324
- --ms-option-bg-selected-focused: rgba(59, 130, 246, 0.15);
325
- --ms-option-bg-selected-matched: rgba(59, 130, 246, 0.15);
326
- --ms-option-bg-disabled-selected: rgba(59, 130, 246, 0.1);
331
+ --ms-option-bg-focused-hover: var(--ms-primary-bg);
332
+ --ms-option-bg-matched-hover: color-mix(in srgb, var(--ms-accent-color) 12%, transparent);
333
+ --ms-option-bg-selected-focused: color-mix(in srgb, var(--ms-accent-color) 15%, transparent);
334
+ --ms-option-bg-selected-matched: color-mix(in srgb, var(--ms-accent-color) 15%, transparent);
335
+ --ms-option-bg-disabled-selected: color-mix(in srgb, var(--ms-accent-color) 10%, transparent);
327
336
 
328
337
  --ms-disabled-opacity: 0.5;
329
338
 
@@ -338,7 +347,7 @@
338
347
 
339
348
  /* Option Title */
340
349
  --ms-option-title-font-size: calc(var(--base-font-size-sm, 1.4) * var(--ms-rem));
341
- --ms-option-mark-bg: rgba(59, 130, 246, 0.2);
350
+ --ms-option-mark-bg: color-mix(in srgb, var(--ms-accent-color) 20%, transparent);
342
351
  --ms-option-mark-color: inherit;
343
352
  --ms-option-mark-font-weight: var(--base-font-weight-semibold, 600);
344
353
 
@@ -357,26 +366,26 @@
357
366
  --ms-checkbox-align: center;
358
367
 
359
368
  /* Checkbox Styling */
360
- --ms-checkbox-bg: #ffffff;
361
- --ms-checkbox-border: 1px solid #d1d5db;
369
+ --ms-checkbox-bg: var(--ms-input-background);
370
+ --ms-checkbox-border: var(--ms-border);
362
371
  --ms-checkbox-border-radius: calc(0.3 * var(--ms-rem));
363
- --ms-checkbox-checked-bg: #3b82f6;
364
- --ms-checkbox-checked-border: 1px solid #3b82f6;
365
- --ms-checkbox-checkmark-color: #ffffff;
366
- --ms-checkbox-hover-border-color: #3b82f6;
367
- --ms-checkbox-disabled-bg: #e5e7eb;
368
- --ms-checkbox-disabled-border: 1px solid #e5e7eb;
372
+ --ms-checkbox-checked-bg: var(--ms-accent-color);
373
+ --ms-checkbox-checked-border: 1px solid var(--ms-accent-color);
374
+ --ms-checkbox-checkmark-color: var(--ms-text-on-accent);
375
+ --ms-checkbox-hover-border-color: var(--ms-accent-color);
376
+ --ms-checkbox-disabled-bg: var(--ms-primary-bg);
377
+ --ms-checkbox-disabled-border: var(--ms-border);
369
378
 
370
379
  /* Checkbox State Combinations */
371
- --ms-checkbox-checked-bg-hover: #2563eb;
372
- --ms-checkbox-checked-border-color-hover: #2563eb;
380
+ --ms-checkbox-checked-bg-hover: var(--ms-accent-color-hover);
381
+ --ms-checkbox-checked-border-color-hover: var(--ms-accent-color-hover);
373
382
 
374
383
  /* ==========================================================================
375
384
  EMPTY & LOADING STATES
376
385
  ========================================================================== */
377
386
  --ms-empty-padding: calc(1.6 * var(--ms-rem)) calc(1.2 * var(--ms-rem));
378
387
  --ms-empty-font-size: calc(var(--base-font-size-sm, 1.4) * var(--ms-rem));
379
- --ms-empty-color: #6b7280;
388
+ --ms-empty-color: var(--ms-text-color-3);
380
389
 
381
390
  /* Loader */
382
391
  --ms-loader-padding: calc(1.6 * var(--ms-rem));
@@ -384,7 +393,7 @@
384
393
 
385
394
  /* Loading Text */
386
395
  --ms-loading-text-font-size: calc(var(--base-font-size-sm, 1.4) * var(--ms-rem));
387
- --ms-loading-text-color: #6b7280;
396
+ --ms-loading-text-color: var(--ms-text-color-3);
388
397
 
389
398
  /* ==========================================================================
390
399
  BADGES DISPLAY
@@ -401,9 +410,9 @@
401
410
  --ms-badge-font-size: calc(var(--base-font-size-xs, 1.2) * var(--ms-rem));
402
411
  --ms-badge-font-weight: var(--base-font-weight-semibold, 600);
403
412
  --ms-badge-border-radius: var(--ms-border-radius-sm);
404
- --ms-badge-bg: #eff6ff;
405
- --ms-badge-bg-hover: #ffffff;
406
- --ms-badge-bg-active: #e0f2fe;
413
+ --ms-badge-bg: var(--ms-accent-color-light);
414
+ --ms-badge-bg-hover: var(--ms-badge-background-hover);
415
+ --ms-badge-bg-active: var(--ms-accent-color-light-hover);
407
416
  --ms-order-first: -1;
408
417
 
409
418
  /* ==========================================================================
@@ -411,36 +420,36 @@
411
420
  ========================================================================== */
412
421
  /* Badge Text */
413
422
  --ms-badge-text-padding: 0 calc(0.8 * var(--ms-rem));
414
- --ms-badge-text-bg: #eff6ff;
415
- --ms-badge-text-color: #3b82f6;
423
+ --ms-badge-text-bg: var(--ms-accent-color-light);
424
+ --ms-badge-text-color: var(--ms-accent-color);
416
425
  --ms-badge-text-border: none;
417
426
 
418
427
  /* Badge Remove Button */
419
428
  --ms-badge-remove-width: calc(2.7 * var(--ms-rem));
420
- --ms-badge-remove-bg: #3b82f6;
421
- --ms-badge-remove-color: #ffffff;
429
+ --ms-badge-remove-bg: var(--ms-accent-color);
430
+ --ms-badge-remove-color: var(--ms-text-on-accent);
422
431
  --ms-badge-remove-border: none;
423
432
  --ms-badge-remove-font-size: calc(var(--base-font-size-xs, 1.2) * var(--ms-rem));
424
- --ms-badge-remove-bg-hover: #2563eb;
425
- --ms-badge-remove-box-shadow-focus: 0 0 0 2px rgba(59, 130, 246, 0.5);
433
+ --ms-badge-remove-bg-hover: var(--ms-accent-color-hover);
434
+ --ms-badge-remove-box-shadow-focus: 0 0 0 2px color-mix(in srgb, var(--ms-accent-color) 50%, transparent);
426
435
  --ms-icon-remove: "×";
427
436
 
428
437
  /* Badge Indicator */
429
438
  --ms-badge-counter-bg: transparent;
430
- --ms-badge-counter-border: 1px solid #e5e7eb;
439
+ --ms-badge-counter-border: var(--ms-border);
431
440
  --ms-badge-counter-border-radius: var(--ms-border-radius-sm);
432
- --ms-badge-counter-text-color: #6b7280;
433
- --ms-badge-counter-text-bg: #d1d5db;
434
- --ms-badge-counter-remove-bg: #6b7280;
435
- --ms-badge-counter-remove-color: #ffffff;
436
- --ms-badge-counter-remove-bg-hover: #111827;
441
+ --ms-badge-counter-text-color: var(--ms-text-color-3);
442
+ --ms-badge-counter-text-bg: var(--ms-badge-counter-text-background);
443
+ --ms-badge-counter-remove-bg: var(--ms-text-color-3);
444
+ --ms-badge-counter-remove-color: var(--ms-text-on-accent);
445
+ --ms-badge-counter-remove-bg-hover: var(--ms-badge-counter-remove-background-hover);
437
446
 
438
447
  /* ==========================================================================
439
448
  "+X MORE" BADGE
440
449
  ========================================================================== */
441
- --ms-more-badge-bg: #eff6ff;
442
- --ms-more-badge-hover-bg: #ffffff;
443
- --ms-more-badge-active-bg: #e0f2fe;
450
+ --ms-more-badge-bg: var(--ms-accent-color-light);
451
+ --ms-more-badge-hover-bg: var(--ms-badge-background-hover);
452
+ --ms-more-badge-active-bg: var(--ms-accent-color-light-hover);
444
453
 
445
454
  /* ==========================================================================
446
455
  COUNT DISPLAY MODE
@@ -452,12 +461,12 @@
452
461
 
453
462
  /* Count Badge Wrapper */
454
463
  --ms-counter-wrapper-bg: transparent;
455
- --ms-counter-wrapper-border: 1px solid #e5e7eb;
464
+ --ms-counter-wrapper-border: var(--ms-border);
456
465
  --ms-counter-wrapper-border-radius: var(--ms-border-radius-sm);
457
466
  --ms-counter-wrapper-padding: calc(0.4 * var(--ms-rem)) calc(0.8 * var(--ms-rem));
458
467
  --ms-counter-wrapper-gap: calc(0.4 * var(--ms-rem));
459
- --ms-counter-wrapper-bg-hover: #f9fafb;
460
- --ms-counter-wrapper-border-color-hover: #3b82f6;
468
+ --ms-counter-wrapper-bg-hover: var(--ms-primary-bg);
469
+ --ms-counter-wrapper-border-color-hover: var(--ms-accent-color);
461
470
 
462
471
  /* ==========================================================================
463
472
  COUNT TEXT & CLEAR BUTTON
@@ -466,23 +475,22 @@
466
475
  --ms-count-text-bg: transparent;
467
476
  --ms-count-text-border: none;
468
477
  --ms-count-text-font-size: calc(var(--base-font-size-sm, 1.4) * var(--ms-rem));
469
- --ms-count-text-color: #111827;
478
+ --ms-count-text-color: var(--ms-text-color-1);
470
479
 
471
480
  /* Count Clear Button */
472
481
  --ms-count-clear-size: calc(1.6 * var(--ms-rem));
473
482
  --ms-count-clear-bg: transparent;
474
- --ms-count-clear-color: #6b7280;
483
+ --ms-count-clear-color: var(--ms-text-color-3);
475
484
  --ms-count-clear-font-size: calc(var(--base-font-size-lg, 1.8) * var(--ms-rem));
476
485
  --ms-count-clear-border-radius: 50%;
477
- --ms-count-clear-bg-hover: rgba(59, 130, 246, 0.2);
478
- --ms-count-clear-color-hover: #3b82f6;
486
+ --ms-count-clear-bg-hover: color-mix(in srgb, var(--ms-accent-color) 20%, transparent);
487
+ --ms-count-clear-color-hover: var(--ms-accent-color);
479
488
  --ms-icon-clear: "×";
480
489
 
481
490
  /* ==========================================================================
482
491
  TOOLTIPS
483
492
  ========================================================================== */
484
- --ms-tooltip-bg: #333333;
485
- --ms-tooltip-color: #ffffff;
493
+ --ms-tooltip-color: var(--ms-tooltip-text-color);
486
494
  --ms-tooltip-padding: calc(0.8 * var(--ms-rem)) calc(1.2 * var(--ms-rem));
487
495
  --ms-tooltip-border-radius: var(--ms-border-radius-lg);
488
496
  --ms-tooltip-font-size: calc(var(--base-font-size-sm, 1.4) * var(--ms-rem));
@@ -496,29 +504,28 @@
496
504
  --ms-z-index-popover: 10000;
497
505
  --ms-selected-popover-width: calc(32 * var(--ms-rem));
498
506
  --ms-selected-popover-max-height: calc(32 * var(--ms-rem));
499
- --ms-selected-popover-bg: #ffffff;
500
- --ms-selected-popover-border: 1px solid #e5e7eb;
507
+ --ms-selected-popover-border: var(--ms-border);
501
508
  --ms-selected-popover-border-radius: var(--ms-border-radius-lg);
502
509
  --ms-selected-popover-box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
503
510
 
504
511
  /* Popover Header */
505
512
  --ms-selected-popover-header-padding: calc(0.8 * var(--ms-rem)) calc(1.2 * var(--ms-rem));
506
- --ms-selected-popover-header-bg: rgba(59, 130, 246, 0.1);
507
- --ms-selected-popover-header-border-bottom: 1px solid #e5e7eb;
513
+ --ms-selected-popover-header-bg: color-mix(in srgb, var(--ms-accent-color) 10%, transparent);
514
+ --ms-selected-popover-header-border-bottom: var(--ms-border);
508
515
  --ms-selected-popover-header-font-size: calc(var(--base-font-size-sm, 1.4) * var(--ms-rem));
509
516
  --ms-selected-popover-header-font-weight: var(--base-font-weight-semibold, 600);
510
- --ms-selected-popover-header-color: #111827;
517
+ --ms-selected-popover-header-color: var(--ms-text-color-1);
511
518
 
512
519
  /* ==========================================================================
513
520
  POPOVER CLOSE BUTTON
514
521
  ========================================================================== */
515
522
  --ms-popover-close-size: calc(2.4 * var(--ms-rem));
516
523
  --ms-selected-popover-close-bg: transparent;
517
- --ms-selected-popover-close-color: #6b7280;
524
+ --ms-selected-popover-close-color: var(--ms-text-color-3);
518
525
  --ms-selected-popover-close-font-size: calc(var(--base-font-size-xl, 2) * var(--ms-rem));
519
526
  --ms-selected-popover-close-border-radius: 50%;
520
- --ms-selected-popover-close-bg-hover: rgba(59, 130, 246, 0.2);
521
- --ms-selected-popover-close-color-hover: #3b82f6;
527
+ --ms-selected-popover-close-bg-hover: color-mix(in srgb, var(--ms-accent-color) 20%, transparent);
528
+ --ms-selected-popover-close-color-hover: var(--ms-accent-color);
522
529
 
523
530
  /* ==========================================================================
524
531
  POPOVER BODY
@@ -582,7 +589,7 @@
582
589
  ========================================================================== */
583
590
  --ms-scrollbar-width: 8px;
584
591
  --ms-scrollbar-track-bg: transparent;
585
- --ms-scrollbar-thumb-bg: #d1d5db;
586
- --ms-scrollbar-thumb-bg-hover: #6b7280;
592
+ --ms-scrollbar-thumb-bg: var(--ms-border-color);
593
+ --ms-scrollbar-thumb-bg-hover: var(--ms-text-color-3);
587
594
  --ms-scrollbar-thumb-border-radius: 4px;
588
595
  }