@keenmate/web-multiselect 1.6.0 → 1.6.1

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 (7) hide show
  1. package/README.md +37 -37
  2. package/dist/multiselect.js +479 -479
  3. package/dist/multiselect.umd.js +19 -19
  4. package/dist/style.css +1 -1
  5. package/package.json +1 -1
  6. package/src/css/_options.css +1 -1
  7. package/src/css/_variables.css +94 -96
package/src/css/_variables.css CHANGED
@@ -41,6 +41,10 @@
41
41
  --ms-accent-color-hover: var(--base-accent-color-hover, #2563eb);
42
42
  --ms-accent-color-active: var(--base-accent-color-active, #1d4ed8);
43
43
 
44
+ /* Accent Color Light Variants (for backgrounds) */
45
+ --ms-accent-color-light: var(--base-accent-color-light, #eff6ff);
46
+ --ms-accent-color-light-hover: var(--base-accent-color-light-hover, #e0f2fe);
47
+
44
48
  /* Text Color Levels (FluentUI-style hierarchy) */
45
49
  --ms-text-color-1: var(--base-text-color-1, #111827);
46
50
  --ms-text-color-2: var(--base-text-color-2, #353b47);
@@ -82,7 +86,7 @@
82
86
  --ms-counter-badge-color: var(--ms-text-on-accent);
83
87
 
84
88
  /* Floating Hint Semantic Variables */
85
- --ms-hint-background: #ffffff;
89
+ --ms-hint-background: var(--base-hint-background, #ffffff);
86
90
  --ms-hint-color: var(--ms-text-color-4);
87
91
  --ms-hint-border-color: var(--ms-border-color);
88
92
 
@@ -93,7 +97,7 @@
93
97
  --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
98
 
95
99
  /* Dropdown Actions Semantic Variables */
96
- --ms-actions-background: #ffffff;
100
+ --ms-actions-background: var(--base-actions-background, #ffffff);
97
101
  --ms-actions-border-color: var(--ms-border-color);
98
102
 
99
103
  /* Action Button Semantic Variables */
@@ -115,15 +119,15 @@
115
119
  --ms-option-background-focused: var(--ms-primary-bg);
116
120
  --ms-option-color-focused: inherit;
117
121
  --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);
122
+ --ms-option-background-selected: color-mix(in srgb, var(--ms-accent-color) 10%, transparent);
123
+ --ms-option-background-matched: color-mix(in srgb, var(--ms-accent-color) 8%, transparent);
120
124
  --ms-option-color-matched: inherit;
121
- --ms-option-border-matched-color: rgba(59, 130, 246, 0.4);
125
+ --ms-option-border-matched-color: color-mix(in srgb, var(--ms-accent-color) 40%, transparent);
122
126
 
123
127
  /* Option Content Semantic Variables */
124
128
  --ms-option-title-color: var(--ms-text-color-1);
125
129
  --ms-option-subtitle-color: var(--ms-text-color-3);
126
- --ms-option-mark-background: rgba(59, 130, 246, 0.2);
130
+ --ms-option-mark-background: color-mix(in srgb, var(--ms-accent-color) 20%, transparent);
127
131
  --ms-option-mark-color: inherit;
128
132
 
129
133
  /* Empty/Loading State Semantic Variables */
@@ -131,14 +135,14 @@
131
135
  --ms-loading-color: var(--ms-text-color-3);
132
136
 
133
137
  /* Badge Semantic Variables */
134
- --ms-badge-background: #eff6ff;
135
- --ms-badge-background-hover: #ffffff;
136
- --ms-badge-background-active: #e0f2fe;
138
+ --ms-badge-background: var(--ms-accent-color-light);
139
+ --ms-badge-background-hover: var(--base-badge-background-hover, var(--ms-input-background));
140
+ --ms-badge-background-active: var(--ms-accent-color-light-hover);
137
141
 
138
142
  /* Badge Text Semantic Variables */
139
- --ms-badge-text-background: #eff6ff;
143
+ --ms-badge-text-background: var(--ms-accent-color-light);
140
144
  --ms-badge-text-color: var(--ms-accent-color);
141
- --ms-badge-text-background-hover: #ffffff;
145
+ --ms-badge-text-background-hover: var(--base-badge-background-hover, var(--ms-input-background));
142
146
  --ms-badge-text-color-hover: var(--ms-badge-text-color);
143
147
 
144
148
  /* Badge Remove Button Semantic Variables */
@@ -148,11 +152,11 @@
148
152
 
149
153
  /* Badge Counter Variant Semantic Variables */
150
154
  --ms-badge-counter-border-color: var(--ms-border-color);
151
- --ms-badge-counter-text-background: #d1d5db;
155
+ --ms-badge-counter-text-background: var(--ms-primary-bg);
152
156
  --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;
157
+ --ms-badge-counter-remove-background: var(--ms-text-color-3);
158
+ --ms-badge-counter-remove-background-hover: var(--ms-text-color-1);
159
+ --ms-badge-counter-remove-color: var(--ms-text-on-accent);
156
160
 
157
161
  /* Count Display Semantic Variables */
158
162
  --ms-counter-wrapper-background: transparent;
@@ -170,9 +174,9 @@
170
174
  --ms-tooltip-text-color: var(--base-tooltip-text-color, #ffffff);
171
175
 
172
176
  /* Selected Popover Semantic Variables */
173
- --ms-selected-popover-background: #ffffff;
177
+ --ms-selected-popover-background: var(--base-popover-background, #ffffff);
174
178
  --ms-selected-popover-border-color: var(--ms-border-color);
175
- --ms-selected-popover-header-background: rgba(59, 130, 246, 0.1);
179
+ --ms-selected-popover-header-background: color-mix(in srgb, var(--ms-accent-color) 10%, transparent);
176
180
  --ms-selected-popover-header-color: var(--ms-text-color-1);
177
181
  --ms-selected-popover-header-border-color: var(--ms-border-color);
178
182
  --ms-selected-popover-close-background: transparent;
@@ -189,8 +193,7 @@
189
193
  --ms-input-font-size: calc(var(--base-font-size-sm, 1.4) * var(--ms-rem));
190
194
  --ms-input-border-width: 1px;
191
195
  --ms-input-border-radius: var(--ms-border-radius-md);
192
- --ms-input-bg: #ffffff;
193
- --ms-input-text: #111827;
196
+ --ms-input-text: var(--ms-text-color-1);
194
197
  --ms-input-bg-disabled: rgba(107, 114, 128, 0.05);
195
198
 
196
199
  /* ==========================================================================
@@ -227,7 +230,7 @@
227
230
  TOGGLE ICON
228
231
  ========================================================================== */
229
232
  --ms-toggle-right: calc(1.2 * var(--ms-rem));
230
- --ms-toggle-color: #6b7280;
233
+ --ms-toggle-color: var(--ms-text-color-3);
231
234
  --ms-transform-center-y: translateY(-50%);
232
235
  --ms-transform-rotate-180: 180deg;
233
236
 
@@ -236,20 +239,19 @@
236
239
  ========================================================================== */
237
240
  --ms-counter-offset: calc(3.2 * var(--ms-rem));
238
241
  --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;
242
+ --ms-counter-bg: var(--ms-accent-color);
243
+ --ms-counter-color: var(--ms-text-on-accent);
241
244
  --ms-counter-font-size: calc(var(--base-font-size-xs, 1.2) * var(--ms-rem));
242
245
  --ms-counter-font-weight: var(--base-font-weight-semibold, 600);
243
246
  --ms-counter-border-radius: var(--ms-border-radius-sm);
244
- --ms-counter-bg-hover: #2563eb;
247
+ --ms-counter-bg-hover: var(--ms-accent-color-hover);
245
248
  --ms-transform-scale-hover: 1.1;
246
249
 
247
250
  /* ==========================================================================
248
251
  FLOATING HINT
249
252
  ========================================================================== */
250
253
  --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;
254
+ --ms-hint-border: 1px solid var(--ms-border-color);
253
255
  --ms-hint-border-radius: var(--ms-border-radius-lg);
254
256
  --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
257
  --ms-hint-font-size: calc(var(--base-font-size-xs, 1.2) * var(--ms-rem));
@@ -257,12 +259,11 @@
257
259
  /* ==========================================================================
258
260
  DROPDOWN
259
261
  ========================================================================== */
260
- --ms-dropdown-bg: #ffffff;
261
- --ms-dropdown-border: var(--base-dropdown-border, 1px solid #e5e7eb);
262
+ --ms-dropdown-border: var(--base-dropdown-border, 1px solid var(--ms-border-color));
262
263
  --ms-dropdown-border-radius: var(--ms-border-radius-lg);
263
264
  --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
265
  --ms-options-max-height: calc(32 * var(--ms-rem));
265
- --ms-option-color: #111827;
266
+ --ms-option-color: var(--ms-text-color-1);
266
267
  --ms-z-index-dropdown: 9999;
267
268
  --ms-z-index-sticky: 1;
268
269
 
@@ -271,18 +272,17 @@
271
272
  ========================================================================== */
272
273
  --ms-actions-gap: calc(0.4 * var(--ms-rem));
273
274
  --ms-actions-padding: calc(0.8 * var(--ms-rem));
274
- --ms-actions-border-bottom: 1px solid #e5e7eb;
275
- --ms-actions-bg: #ffffff;
275
+ --ms-actions-border-bottom: 1px solid var(--ms-border-color);
276
276
 
277
277
  /* Action Button */
278
278
  --ms-action-btn-padding: calc(0.4 * var(--ms-rem)) calc(0.8 * var(--ms-rem));
279
279
  --ms-action-btn-font-size: calc(var(--base-font-size-xs, 1.2) * var(--ms-rem));
280
- --ms-action-btn-border: 1px solid #e5e7eb;
280
+ --ms-action-btn-border: 1px solid var(--ms-border-color);
281
281
  --ms-action-btn-border-radius: var(--ms-border-radius-sm);
282
282
  --ms-action-btn-bg: transparent;
283
283
  --ms-action-btn-color: inherit;
284
- --ms-action-btn-bg-hover: #f3f4f6;
285
- --ms-action-btn-border-color-hover: #3b82f6;
284
+ --ms-action-btn-bg-hover: var(--ms-primary-bg);
285
+ --ms-action-btn-border-color-hover: var(--ms-accent-color);
286
286
  --ms-transform-scale-active: 0.98;
287
287
 
288
288
  /* ==========================================================================
@@ -291,7 +291,7 @@
291
291
  --ms-options-padding: 0;
292
292
 
293
293
  /* Group */
294
- --ms-group-border-top: 1px solid #e5e7eb;
294
+ --ms-group-border-top: 1px solid var(--ms-border-color);
295
295
  --ms-group-margin-top: calc(0.4 * var(--ms-rem));
296
296
  --ms-group-padding-top: calc(0.4 * var(--ms-rem));
297
297
 
@@ -299,7 +299,7 @@
299
299
  --ms-group-label-padding: calc(0.4 * var(--ms-rem)) calc(1.2 * var(--ms-rem));
300
300
  --ms-group-label-font-size: calc(var(--base-font-size-xs, 1.2) * var(--ms-rem));
301
301
  --ms-group-label-font-weight: var(--base-font-weight-semibold, 600);
302
- --ms-group-label-color: #6b7280;
302
+ --ms-group-label-color: var(--ms-text-color-3);
303
303
  --ms-group-label-transform: uppercase;
304
304
  --ms-group-label-letter-spacing: 0.05em;
305
305
 
@@ -310,20 +310,20 @@
310
310
  --ms-option-padding: calc(0.8 * var(--ms-rem)) calc(1.2 * var(--ms-rem));
311
311
  --ms-option-padding-h: calc(1.2 * var(--ms-rem));
312
312
  --ms-option-bg: transparent;
313
- --ms-option-bg-hover: #f9fafb;
314
- --ms-option-bg-focused: #f9fafb;
315
- --ms-option-outline-focused: 2px solid #3b82f6;
313
+ --ms-option-bg-hover: var(--ms-primary-bg);
314
+ --ms-option-bg-focused: var(--ms-primary-bg);
315
+ --ms-option-outline-focused: 2px solid var(--ms-accent-color);
316
316
  --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);
317
+ --ms-option-bg-matched: color-mix(in srgb, var(--ms-accent-color) 8%, transparent);
318
+ --ms-option-border-matched: 3px solid color-mix(in srgb, var(--ms-accent-color) 40%, transparent);
319
+ --ms-option-bg-selected: color-mix(in srgb, var(--ms-accent-color) 10%, transparent);
320
320
 
321
321
  /* 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);
322
+ --ms-option-bg-focused-hover: var(--ms-primary-bg);
323
+ --ms-option-bg-matched-hover: color-mix(in srgb, var(--ms-accent-color) 12%, transparent);
324
+ --ms-option-bg-selected-focused: color-mix(in srgb, var(--ms-accent-color) 15%, transparent);
325
+ --ms-option-bg-selected-matched: color-mix(in srgb, var(--ms-accent-color) 15%, transparent);
326
+ --ms-option-bg-disabled-selected: color-mix(in srgb, var(--ms-accent-color) 10%, transparent);
327
327
 
328
328
  --ms-disabled-opacity: 0.5;
329
329
 
@@ -338,7 +338,7 @@
338
338
 
339
339
  /* Option Title */
340
340
  --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);
341
+ --ms-option-mark-bg: color-mix(in srgb, var(--ms-accent-color) 20%, transparent);
342
342
  --ms-option-mark-color: inherit;
343
343
  --ms-option-mark-font-weight: var(--base-font-weight-semibold, 600);
344
344
 
@@ -357,26 +357,26 @@
357
357
  --ms-checkbox-align: center;
358
358
 
359
359
  /* Checkbox Styling */
360
- --ms-checkbox-bg: #ffffff;
361
- --ms-checkbox-border: 1px solid #d1d5db;
360
+ --ms-checkbox-bg: var(--ms-input-background);
361
+ --ms-checkbox-border: 1px solid var(--ms-border-color);
362
362
  --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;
363
+ --ms-checkbox-checked-bg: var(--ms-accent-color);
364
+ --ms-checkbox-checked-border: 1px solid var(--ms-accent-color);
365
+ --ms-checkbox-checkmark-color: var(--ms-text-on-accent);
366
+ --ms-checkbox-hover-border-color: var(--ms-accent-color);
367
+ --ms-checkbox-disabled-bg: var(--ms-primary-bg);
368
+ --ms-checkbox-disabled-border: 1px solid var(--ms-border-color);
369
369
 
370
370
  /* Checkbox State Combinations */
371
- --ms-checkbox-checked-bg-hover: #2563eb;
372
- --ms-checkbox-checked-border-color-hover: #2563eb;
371
+ --ms-checkbox-checked-bg-hover: var(--ms-accent-color-hover);
372
+ --ms-checkbox-checked-border-color-hover: var(--ms-accent-color-hover);
373
373
 
374
374
  /* ==========================================================================
375
375
  EMPTY & LOADING STATES
376
376
  ========================================================================== */
377
377
  --ms-empty-padding: calc(1.6 * var(--ms-rem)) calc(1.2 * var(--ms-rem));
378
378
  --ms-empty-font-size: calc(var(--base-font-size-sm, 1.4) * var(--ms-rem));
379
- --ms-empty-color: #6b7280;
379
+ --ms-empty-color: var(--ms-text-color-3);
380
380
 
381
381
  /* Loader */
382
382
  --ms-loader-padding: calc(1.6 * var(--ms-rem));
@@ -384,7 +384,7 @@
384
384
 
385
385
  /* Loading Text */
386
386
  --ms-loading-text-font-size: calc(var(--base-font-size-sm, 1.4) * var(--ms-rem));
387
- --ms-loading-text-color: #6b7280;
387
+ --ms-loading-text-color: var(--ms-text-color-3);
388
388
 
389
389
  /* ==========================================================================
390
390
  BADGES DISPLAY
@@ -401,9 +401,9 @@
401
401
  --ms-badge-font-size: calc(var(--base-font-size-xs, 1.2) * var(--ms-rem));
402
402
  --ms-badge-font-weight: var(--base-font-weight-semibold, 600);
403
403
  --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;
404
+ --ms-badge-bg: var(--ms-accent-color-light);
405
+ --ms-badge-bg-hover: var(--ms-badge-background-hover);
406
+ --ms-badge-bg-active: var(--ms-accent-color-light-hover);
407
407
  --ms-order-first: -1;
408
408
 
409
409
  /* ==========================================================================
@@ -411,36 +411,36 @@
411
411
  ========================================================================== */
412
412
  /* Badge Text */
413
413
  --ms-badge-text-padding: 0 calc(0.8 * var(--ms-rem));
414
- --ms-badge-text-bg: #eff6ff;
415
- --ms-badge-text-color: #3b82f6;
414
+ --ms-badge-text-bg: var(--ms-accent-color-light);
415
+ --ms-badge-text-color: var(--ms-accent-color);
416
416
  --ms-badge-text-border: none;
417
417
 
418
418
  /* Badge Remove Button */
419
419
  --ms-badge-remove-width: calc(2.7 * var(--ms-rem));
420
- --ms-badge-remove-bg: #3b82f6;
421
- --ms-badge-remove-color: #ffffff;
420
+ --ms-badge-remove-bg: var(--ms-accent-color);
421
+ --ms-badge-remove-color: var(--ms-text-on-accent);
422
422
  --ms-badge-remove-border: none;
423
423
  --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);
424
+ --ms-badge-remove-bg-hover: var(--ms-accent-color-hover);
425
+ --ms-badge-remove-box-shadow-focus: 0 0 0 2px color-mix(in srgb, var(--ms-accent-color) 50%, transparent);
426
426
  --ms-icon-remove: "×";
427
427
 
428
428
  /* Badge Indicator */
429
429
  --ms-badge-counter-bg: transparent;
430
- --ms-badge-counter-border: 1px solid #e5e7eb;
430
+ --ms-badge-counter-border: 1px solid var(--ms-border-color);
431
431
  --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;
432
+ --ms-badge-counter-text-color: var(--ms-text-color-3);
433
+ --ms-badge-counter-text-bg: var(--ms-badge-counter-text-background);
434
+ --ms-badge-counter-remove-bg: var(--ms-text-color-3);
435
+ --ms-badge-counter-remove-color: var(--ms-text-on-accent);
436
+ --ms-badge-counter-remove-bg-hover: var(--ms-badge-counter-remove-background-hover);
437
437
 
438
438
  /* ==========================================================================
439
439
  "+X MORE" BADGE
440
440
  ========================================================================== */
441
- --ms-more-badge-bg: #eff6ff;
442
- --ms-more-badge-hover-bg: #ffffff;
443
- --ms-more-badge-active-bg: #e0f2fe;
441
+ --ms-more-badge-bg: var(--ms-accent-color-light);
442
+ --ms-more-badge-hover-bg: var(--ms-badge-background-hover);
443
+ --ms-more-badge-active-bg: var(--ms-accent-color-light-hover);
444
444
 
445
445
  /* ==========================================================================
446
446
  COUNT DISPLAY MODE
@@ -452,12 +452,12 @@
452
452
 
453
453
  /* Count Badge Wrapper */
454
454
  --ms-counter-wrapper-bg: transparent;
455
- --ms-counter-wrapper-border: 1px solid #e5e7eb;
455
+ --ms-counter-wrapper-border: 1px solid var(--ms-border-color);
456
456
  --ms-counter-wrapper-border-radius: var(--ms-border-radius-sm);
457
457
  --ms-counter-wrapper-padding: calc(0.4 * var(--ms-rem)) calc(0.8 * var(--ms-rem));
458
458
  --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;
459
+ --ms-counter-wrapper-bg-hover: var(--ms-primary-bg);
460
+ --ms-counter-wrapper-border-color-hover: var(--ms-accent-color);
461
461
 
462
462
  /* ==========================================================================
463
463
  COUNT TEXT & CLEAR BUTTON
@@ -466,23 +466,22 @@
466
466
  --ms-count-text-bg: transparent;
467
467
  --ms-count-text-border: none;
468
468
  --ms-count-text-font-size: calc(var(--base-font-size-sm, 1.4) * var(--ms-rem));
469
- --ms-count-text-color: #111827;
469
+ --ms-count-text-color: var(--ms-text-color-1);
470
470
 
471
471
  /* Count Clear Button */
472
472
  --ms-count-clear-size: calc(1.6 * var(--ms-rem));
473
473
  --ms-count-clear-bg: transparent;
474
- --ms-count-clear-color: #6b7280;
474
+ --ms-count-clear-color: var(--ms-text-color-3);
475
475
  --ms-count-clear-font-size: calc(var(--base-font-size-lg, 1.8) * var(--ms-rem));
476
476
  --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;
477
+ --ms-count-clear-bg-hover: color-mix(in srgb, var(--ms-accent-color) 20%, transparent);
478
+ --ms-count-clear-color-hover: var(--ms-accent-color);
479
479
  --ms-icon-clear: "×";
480
480
 
481
481
  /* ==========================================================================
482
482
  TOOLTIPS
483
483
  ========================================================================== */
484
- --ms-tooltip-bg: #333333;
485
- --ms-tooltip-color: #ffffff;
484
+ --ms-tooltip-color: var(--ms-tooltip-text-color);
486
485
  --ms-tooltip-padding: calc(0.8 * var(--ms-rem)) calc(1.2 * var(--ms-rem));
487
486
  --ms-tooltip-border-radius: var(--ms-border-radius-lg);
488
487
  --ms-tooltip-font-size: calc(var(--base-font-size-sm, 1.4) * var(--ms-rem));
@@ -496,29 +495,28 @@
496
495
  --ms-z-index-popover: 10000;
497
496
  --ms-selected-popover-width: calc(32 * var(--ms-rem));
498
497
  --ms-selected-popover-max-height: calc(32 * var(--ms-rem));
499
- --ms-selected-popover-bg: #ffffff;
500
- --ms-selected-popover-border: 1px solid #e5e7eb;
498
+ --ms-selected-popover-border: 1px solid var(--ms-border-color);
501
499
  --ms-selected-popover-border-radius: var(--ms-border-radius-lg);
502
500
  --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
501
 
504
502
  /* Popover Header */
505
503
  --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;
504
+ --ms-selected-popover-header-bg: color-mix(in srgb, var(--ms-accent-color) 10%, transparent);
505
+ --ms-selected-popover-header-border-bottom: 1px solid var(--ms-border-color);
508
506
  --ms-selected-popover-header-font-size: calc(var(--base-font-size-sm, 1.4) * var(--ms-rem));
509
507
  --ms-selected-popover-header-font-weight: var(--base-font-weight-semibold, 600);
510
- --ms-selected-popover-header-color: #111827;
508
+ --ms-selected-popover-header-color: var(--ms-text-color-1);
511
509
 
512
510
  /* ==========================================================================
513
511
  POPOVER CLOSE BUTTON
514
512
  ========================================================================== */
515
513
  --ms-popover-close-size: calc(2.4 * var(--ms-rem));
516
514
  --ms-selected-popover-close-bg: transparent;
517
- --ms-selected-popover-close-color: #6b7280;
515
+ --ms-selected-popover-close-color: var(--ms-text-color-3);
518
516
  --ms-selected-popover-close-font-size: calc(var(--base-font-size-xl, 2) * var(--ms-rem));
519
517
  --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;
518
+ --ms-selected-popover-close-bg-hover: color-mix(in srgb, var(--ms-accent-color) 20%, transparent);
519
+ --ms-selected-popover-close-color-hover: var(--ms-accent-color);
522
520
 
523
521
  /* ==========================================================================
524
522
  POPOVER BODY
@@ -582,7 +580,7 @@
582
580
  ========================================================================== */
583
581
  --ms-scrollbar-width: 8px;
584
582
  --ms-scrollbar-track-bg: transparent;
585
- --ms-scrollbar-thumb-bg: #d1d5db;
586
- --ms-scrollbar-thumb-bg-hover: #6b7280;
583
+ --ms-scrollbar-thumb-bg: var(--ms-border-color);
584
+ --ms-scrollbar-thumb-bg-hover: var(--ms-text-color-3);
587
585
  --ms-scrollbar-thumb-border-radius: 4px;
588
586
  }