@placeholderco/placeholder-ui 2.6.6 → 2.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 (36) hide show
  1. package/README.md +58 -10
  2. package/dist/app.css +70 -37
  3. package/dist/cards/GitCard.svelte +1 -1
  4. package/dist/display/Avatar.svelte +2 -2
  5. package/dist/display/LinkCollection.svelte +1 -1
  6. package/dist/display/Paper.svelte +8 -0
  7. package/dist/display/alert/Alert.svelte +1 -1
  8. package/dist/display/filetree/FileTreeItem.svelte +1 -1
  9. package/dist/editors/tiptap/LinkActionMenu.svelte +11 -6
  10. package/dist/editors/tiptap/TipTap.svelte +3 -3
  11. package/dist/editors/tiptap/TipTapBubble.svelte +5 -5
  12. package/dist/editors/tiptap/buttonLink.d.ts +1 -1
  13. package/dist/editors/tiptap/buttonLink.js +3 -1
  14. package/dist/editors/tiptap/toolbar/AlertButton.svelte +2 -2
  15. package/dist/editors/tiptap/toolbar/ButtonLinkButton.svelte +5 -3
  16. package/dist/editors/tiptap/toolbar/ColorButton.svelte +6 -6
  17. package/dist/editors/tiptap/toolbar/LinkButton.svelte +9 -9
  18. package/dist/editors/tiptap/toolbar/TableButton.svelte +2 -2
  19. package/dist/editors/tiptap/toolbar/ToolbarButton.svelte +3 -3
  20. package/dist/form/CronBuilder.svelte +3 -3
  21. package/dist/form/DatePicker.svelte +8 -8
  22. package/dist/form/DateRangePicker.svelte +9 -9
  23. package/dist/form/DateTimePicker.svelte +8 -8
  24. package/dist/layout/Navbar.svelte +5 -5
  25. package/dist/layout/NavbarItemView.svelte +4 -4
  26. package/dist/ui/AccordionItem.svelte +20 -14
  27. package/dist/ui/Badge.svelte +69 -41
  28. package/dist/ui/Button.svelte +69 -52
  29. package/dist/ui/ButtonVariant.d.ts +1 -1
  30. package/dist/ui/Dropdown.svelte +1 -1
  31. package/dist/ui/Loader.svelte +1 -1
  32. package/dist/ui/ProgressBar.svelte +3 -3
  33. package/dist/ui/Tabs.svelte +1 -1
  34. package/dist/uiTheme.svelte.d.ts +39 -25
  35. package/dist/uiTheme.svelte.js +39 -45
  36. package/package.json +7 -7
package/dist/editors/tiptap/toolbar/TableButton.svelte CHANGED
@@ -248,12 +248,12 @@
248
248
 
249
249
  .size-cell.highlighted {
250
250
  background: var(--ui-tertiary);
251
- border-color: var(--ui-tertiary-dark);
251
+ border-color: var(--ui-tertiary-text-color);
252
252
  }
253
253
 
254
254
  :global(.dark) .size-cell.highlighted {
255
255
  background: var(--ui-accent);
256
- border-color: var(--ui-accent-dark);
256
+ border-color: var(--ui-accent-text-color);
257
257
  }
258
258
 
259
259
  .size-label {
package/dist/editors/tiptap/toolbar/ToolbarButton.svelte CHANGED
@@ -42,7 +42,7 @@
42
42
 
43
43
  .toolbar-button:hover:not(:disabled) {
44
44
  background: rgba(var(--ui-primary-rgbc), 0.1);
45
- color: var(--ui-primary);
45
+ color: var(--ui-primary-text-color);
46
46
  }
47
47
 
48
48
  :global(.dark) .toolbar-button:hover:not(:disabled) {
@@ -60,11 +60,11 @@
60
60
 
61
61
  .toolbar-button.active {
62
62
  background: var(--ui-primary);
63
- color: white;
63
+ color: var(--ui-primary-contrast-color);
64
64
  }
65
65
 
66
66
  .toolbar-button.active:hover {
67
- background: var(--ui-tertiary-dark);
67
+ background: var(--ui-primary-hover-color);
68
68
  }
69
69
 
70
70
  .toolbar-button:disabled {
package/dist/form/CronBuilder.svelte CHANGED
@@ -514,7 +514,7 @@
514
514
 
515
515
  .weekday-btn.selected {
516
516
  background: var(--ui-primary);
517
- color: white;
517
+ color: var(--ui-primary-contrast-color);
518
518
  border-color: var(--ui-primary);
519
519
  }
520
520
 
@@ -582,7 +582,7 @@
582
582
  background: var(--input-bg);
583
583
  border: 1px solid var(--border-color);
584
584
  border-radius: 0.25rem;
585
- color: var(--ui-primary);
585
+ color: var(--ui-primary-text-color);
586
586
  font-weight: 600;
587
587
  }
588
588
 
@@ -603,7 +603,7 @@
603
603
 
604
604
  :global(.dark) .weekday-btn.selected {
605
605
  background: var(--ui-accent);
606
- color: var(--ui-primary);
606
+ color: var(--ui-accent-contrast-color);
607
607
  border-color: var(--ui-accent);
608
608
  }
609
609
 
package/dist/form/DatePicker.svelte CHANGED
@@ -478,18 +478,18 @@
478
478
 
479
479
  .year-button:hover:not(.disabled) {
480
480
  background-color: rgba(var(--ui-primary-rgbc), 0.1);
481
- color: var(--ui-primary);
481
+ color: var(--ui-primary-text-color);
482
482
  }
483
483
 
484
484
  .year-button.current-year {
485
485
  background-color: rgba(var(--ui-primary-rgbc), 0.15);
486
- color: var(--ui-primary);
486
+ color: var(--ui-primary-text-color);
487
487
  font-weight: 600;
488
488
  }
489
489
 
490
490
  .year-button.selected {
491
491
  background-color: var(--ui-primary);
492
- color: white;
492
+ color: var(--ui-primary-contrast-color);
493
493
  font-weight: 600;
494
494
  }
495
495
 
@@ -540,18 +540,18 @@
540
540
 
541
541
  .day-button:hover {
542
542
  background-color: rgba(var(--ui-primary-rgbc), 0.1);
543
- color: var(--ui-primary);
543
+ color: var(--ui-primary-text-color);
544
544
  }
545
545
 
546
546
  .today {
547
547
  background-color: rgba(var(--ui-primary-rgbc), 0.15);
548
- color: var(--ui-primary);
548
+ color: var(--ui-primary-text-color);
549
549
  font-weight: 600;
550
550
  }
551
551
 
552
552
  .selected {
553
553
  background-color: var(--ui-primary);
554
- color: white;
554
+ color: var(--ui-primary-contrast-color);
555
555
  font-weight: 600;
556
556
  }
557
557
 
@@ -596,7 +596,7 @@
596
596
 
597
597
  .selected {
598
598
  background-color: var(--ui-accent);
599
- color: var(--ui-primary);
599
+ color: var(--ui-accent-contrast-color);
600
600
  }
601
601
 
602
602
  .text-grey {
@@ -631,7 +631,7 @@
631
631
 
632
632
  .year-button.selected {
633
633
  background-color: var(--ui-accent);
634
- color: var(--ui-primary);
634
+ color: var(--ui-accent-contrast-color);
635
635
  }
636
636
 
637
637
  .year-button.disabled {
package/dist/form/DateRangePicker.svelte CHANGED
@@ -537,7 +537,7 @@
537
537
 
538
538
  .selecting-hint {
539
539
  font-size: 0.75rem;
540
- color: var(--ui-primary);
540
+ color: var(--ui-primary-text-color);
541
541
  font-style: italic;
542
542
  margin-bottom: 0.25rem;
543
543
  opacity: 0.75;
@@ -566,18 +566,18 @@
566
566
 
567
567
  .year-button:hover:not(.disabled) {
568
568
  background-color: rgba(var(--ui-primary-rgbc), 0.1);
569
- color: var(--ui-primary);
569
+ color: var(--ui-primary-text-color);
570
570
  }
571
571
 
572
572
  .year-button.current-year {
573
573
  background-color: rgba(var(--ui-primary-rgbc), 0.15);
574
- color: var(--ui-primary);
574
+ color: var(--ui-primary-text-color);
575
575
  font-weight: 600;
576
576
  }
577
577
 
578
578
  .year-button.selected {
579
579
  background-color: var(--ui-primary);
580
- color: white;
580
+ color: var(--ui-primary-contrast-color);
581
581
  font-weight: 600;
582
582
  }
583
583
 
@@ -676,18 +676,18 @@
676
676
 
677
677
  .day-button:hover:not(.disabled):not(.selected) {
678
678
  background-color: rgba(var(--ui-primary-rgbc), 0.12);
679
- color: var(--ui-primary);
679
+ color: var(--ui-primary-text-color);
680
680
  }
681
681
 
682
682
  .today {
683
683
  background-color: rgba(var(--ui-primary-rgbc), 0.15);
684
- color: var(--ui-primary);
684
+ color: var(--ui-primary-text-color);
685
685
  font-weight: 600;
686
686
  }
687
687
 
688
688
  .selected {
689
689
  background-color: var(--ui-primary);
690
- color: white;
690
+ color: var(--ui-primary-contrast-color);
691
691
  font-weight: 600;
692
692
  }
693
693
 
@@ -734,7 +734,7 @@
734
734
 
735
735
  .selected {
736
736
  background-color: var(--ui-accent);
737
- color: var(--ui-primary);
737
+ color: var(--ui-accent-contrast-color);
738
738
  }
739
739
 
740
740
  .day-cell.in-range::before {
@@ -777,7 +777,7 @@
777
777
 
778
778
  .year-button.selected {
779
779
  background-color: var(--ui-accent);
780
- color: var(--ui-primary);
780
+ color: var(--ui-accent-contrast-color);
781
781
  }
782
782
 
783
783
  .year-button.disabled {
package/dist/form/DateTimePicker.svelte CHANGED
@@ -491,18 +491,18 @@
491
491
 
492
492
  .year-button:hover:not(.disabled) {
493
493
  background-color: rgba(var(--ui-primary-rgbc), 0.1);
494
- color: var(--ui-primary);
494
+ color: var(--ui-primary-text-color);
495
495
  }
496
496
 
497
497
  .year-button.current-year {
498
498
  background-color: rgba(var(--ui-primary-rgbc), 0.15);
499
- color: var(--ui-primary);
499
+ color: var(--ui-primary-text-color);
500
500
  font-weight: 600;
501
501
  }
502
502
 
503
503
  .year-button.selected {
504
504
  background-color: var(--ui-primary);
505
- color: white;
505
+ color: var(--ui-primary-contrast-color);
506
506
  font-weight: 600;
507
507
  }
508
508
 
@@ -553,18 +553,18 @@
553
553
 
554
554
  .day-button:hover {
555
555
  background-color: rgba(var(--ui-primary-rgbc), 0.1);
556
- color: var(--ui-primary);
556
+ color: var(--ui-primary-text-color);
557
557
  }
558
558
 
559
559
  .today {
560
560
  background-color: rgba(var(--ui-primary-rgbc), 0.15);
561
- color: var(--ui-primary);
561
+ color: var(--ui-primary-text-color);
562
562
  font-weight: 600;
563
563
  }
564
564
 
565
565
  .selected {
566
566
  background-color: var(--ui-primary);
567
- color: white;
567
+ color: var(--ui-primary-contrast-color);
568
568
  font-weight: 600;
569
569
  }
570
570
 
@@ -609,7 +609,7 @@
609
609
 
610
610
  .selected {
611
611
  background-color: var(--ui-accent);
612
- color: var(--ui-primary);
612
+ color: var(--ui-accent-contrast-color);
613
613
  }
614
614
 
615
615
  .text-grey {
@@ -644,7 +644,7 @@
644
644
 
645
645
  .year-button.selected {
646
646
  background-color: var(--ui-accent);
647
- color: var(--ui-primary);
647
+ color: var(--ui-accent-contrast-color);
648
648
  }
649
649
 
650
650
  .year-button.disabled {
package/dist/layout/Navbar.svelte CHANGED
@@ -194,10 +194,10 @@
194
194
  }
195
195
 
196
196
  header.primary .inner-navbar {
197
- color: white;
197
+ color: var(--ui-primary-contrast-color);
198
198
  }
199
199
 
200
- /* Top-level links/triggers: white, turning accent on hover (matches dark navbar).
200
+ /* Top-level links/triggers use primary contrast, turning accent on hover.
201
201
  Use `>` so these rules don't leak into the fold-out sub-list panels, which keep
202
202
  their own (paper) colour scheme regardless of the primary variant. */
203
203
  header.primary .inner-navbar .links-container > :global(a),
@@ -207,7 +207,7 @@
207
207
  > :global(.navbar-parent)
208
208
  > :global(.navbar-parent-trigger),
209
209
  header.primary .inner-navbar .header-hero :global(a) {
210
- color: white;
210
+ color: var(--ui-primary-contrast-color);
211
211
  transition: color 200ms;
212
212
  }
213
213
 
@@ -247,7 +247,7 @@
247
247
  .links-container
248
248
  > :global(.navbar-parent)
249
249
  > :global(.navbar-parent-trigger:hover) {
250
- color: var(--ui-tertiary-dark);
250
+ color: var(--ui-link-hover-color);
251
251
  }
252
252
 
253
253
  :global(.dark) header.site .inner-navbar .links-container > :global(a:hover),
@@ -336,7 +336,7 @@
336
336
  padding: 0 1em;
337
337
  height: 100%;
338
338
  width: 100%;
339
- color: var(--ui-primary);
339
+ color: var(--ui-primary-text-color);
340
340
  }
341
341
 
342
342
  .middle {
package/dist/layout/NavbarItemView.svelte CHANGED
@@ -103,13 +103,13 @@
103
103
  padding: 0;
104
104
  margin: 0;
105
105
  font: inherit;
106
- color: var(--ui-primary);
106
+ color: var(--ui-primary-text-color);
107
107
  cursor: pointer;
108
108
  transition: color 200ms;
109
109
  }
110
110
 
111
111
  .navbar-parent-trigger:hover {
112
- color: var(--ui-accent-dark);
112
+ color: var(--ui-link-hover-color);
113
113
  }
114
114
 
115
115
  :global(.dark) .navbar-parent-trigger {
@@ -159,7 +159,7 @@
159
159
  .navbar-submenu :global(.navbar-item) {
160
160
  width: 100%;
161
161
  padding: 0.4rem 0.6rem;
162
- color: var(--ui-primary);
162
+ color: var(--ui-primary-text-color);
163
163
  text-decoration: none;
164
164
  transition: background-color 0.15s ease;
165
165
  }
@@ -176,7 +176,7 @@
176
176
 
177
177
  .navbar-submenu :global(.navbar-item:hover) {
178
178
  background-color: var(--border-color);
179
- color: var(--ui-primary);
179
+ color: var(--ui-primary-text-color);
180
180
  }
181
181
 
182
182
  :global(.dark) .navbar-submenu :global(.navbar-item) {
package/dist/ui/AccordionItem.svelte CHANGED
@@ -190,7 +190,7 @@
190
190
  `auto-subtle` defines nothing and falls through to the theme-aware defaults. */
191
191
  .variant-white {
192
192
  --accordion-open-bg: white;
193
- --accordion-open-color: var(--ui-primary);
193
+ --accordion-open-color: var(--ui-primary-text-color);
194
194
  }
195
195
 
196
196
  .variant-secondary,
@@ -221,50 +221,56 @@
221
221
 
222
222
  .variant-accent {
223
223
  --accordion-open-bg: var(--ui-accent);
224
- --accordion-open-color: var(--ui-primary);
224
+ --accordion-open-color: var(--ui-accent-contrast-color);
225
225
  }
226
226
 
227
227
  .variant-accent-subtle {
228
228
  --accordion-open-bg: rgba(var(--ui-accent-rgbc), 0.15);
229
- --accordion-open-color: var(--text-color);
229
+ --accordion-open-color: var(--ui-accent-text-color);
230
230
  }
231
231
 
232
232
  .variant-accent-outline {
233
233
  --accordion-open-bg: transparent;
234
- --accordion-open-color: var(--ui-accent);
235
- --accordion-open-border-color: var(--ui-accent);
234
+ --accordion-open-color: var(--ui-accent-text-color);
235
+ --accordion-open-border-color: var(--ui-accent-text-color);
236
236
  }
237
237
 
238
238
  .variant-primary {
239
239
  --accordion-open-bg: var(--ui-primary);
240
- --accordion-open-color: white;
240
+ --accordion-open-color: var(--ui-primary-contrast-color);
241
241
  }
242
242
 
243
243
  .variant-primary-subtle {
244
244
  --accordion-open-bg: rgba(var(--ui-primary-rgbc), 0.1);
245
- --accordion-open-color: var(--text-color);
245
+ --accordion-open-color: var(--ui-primary-text-color);
246
246
  }
247
247
 
248
248
  .variant-primary-outline {
249
249
  --accordion-open-bg: transparent;
250
- --accordion-open-color: var(--ui-primary);
251
- --accordion-open-border-color: var(--ui-primary);
250
+ --accordion-open-color: var(--ui-primary-text-color);
251
+ --accordion-open-border-color: var(--ui-primary-text-color);
252
252
  }
253
253
 
254
254
  .variant-tertiary {
255
255
  --accordion-open-bg: var(--ui-tertiary);
256
- --accordion-open-color: var(--ui-primary);
256
+ --accordion-open-color: var(--ui-tertiary-contrast-color);
257
+ }
258
+
259
+ .variant-tertiary-outline {
260
+ --accordion-open-bg: transparent;
261
+ --accordion-open-color: var(--ui-tertiary-text-color);
262
+ --accordion-open-border-color: var(--ui-tertiary-text-color);
257
263
  }
258
264
 
259
265
  .variant-tertiary-subtle {
260
- --accordion-open-bg: rgba(var(--ui-tertiary-dark-rgbc), 0.25);
261
- --accordion-open-color: var(--ui-tertiary-dark);
266
+ --accordion-open-bg: color-mix(in srgb, var(--ui-tertiary-text-color) 25%, transparent);
267
+ --accordion-open-color: var(--ui-tertiary-text-color);
262
268
  }
263
269
 
264
270
  .variant-auto-outline {
265
271
  --accordion-open-bg: transparent;
266
- --accordion-open-color: var(--ui-primary);
267
- --accordion-open-border-color: var(--ui-primary);
272
+ --accordion-open-color: var(--ui-primary-text-color);
273
+ --accordion-open-border-color: var(--ui-primary-text-color);
268
274
  }
269
275
 
270
276
  :global(.dark) .variant-secondary-selected {
package/dist/ui/Badge.svelte CHANGED
@@ -126,34 +126,35 @@
126
126
 
127
127
  .accent {
128
128
  --badge-bg-color: var(--ui-accent);
129
- --badge-text-color: var(--ui-primary);
130
- --badge-hover-bg-color: var(--ui-tertiary);
131
- --badge-border-color: var(--ui-accent-dark);
132
- --badge-outline-color: var(--ui-tertiary);
129
+ --badge-text-color: var(--ui-accent-contrast-color);
130
+ --badge-hover-bg-color: var(--ui-accent-hover-color);
131
+ --badge-border-color: var(--ui-accent-text-color);
132
+ --badge-outline-color: var(--ui-focus-color);
133
133
  }
134
134
 
135
135
  .accent :global(.loader) {
136
- color: var(--ui-primary);
136
+ color: var(--ui-accent-contrast-color);
137
137
  }
138
138
 
139
139
  .primary {
140
140
  --badge-bg-color: var(--ui-primary);
141
- --badge-text-color: #fff;
142
- --badge-hover-bg-color: var(--ui-accent-dark);
143
- --badge-border-color: var(--ui-tertiary-dark);
144
- --badge-outline-color: var(--ui-accent-dark);
141
+ --badge-text-color: var(--ui-primary-contrast-color);
142
+ --badge-hover-bg-color: var(--ui-primary-hover-color);
143
+ --badge-border-color: var(--ui-tertiary-text-color);
144
+ --badge-outline-color: var(--ui-focus-color);
145
145
  }
146
146
 
147
147
  .primary :global(.loader) {
148
- color: var(--ui-accent);
148
+ color: var(--ui-primary-contrast-color);
149
149
  }
150
150
 
151
151
  .white {
152
152
  --badge-bg-color: white;
153
- --badge-text-color: var(--ui-primary);
154
- --badge-hover-bg-color: var(--ui-tertiary);
153
+ --badge-text-color: var(--ui-primary-text-color);
154
+ --badge-hover-bg-color: var(--ui-accent-hover-color);
155
+ --badge-hover-text-color: var(--ui-accent-contrast-color);
155
156
  --badge-border-color: #eee;
156
- --badge-outline-color: var(--ui-tertiary);
157
+ --badge-outline-color: var(--ui-focus-color);
157
158
  }
158
159
 
159
160
  .secondary {
@@ -183,7 +184,7 @@
183
184
  --badge-text-color: white;
184
185
  --badge-bg-color: var(--danger-bg);
185
186
  --badge-hover-bg-color: var(--danger-bg-hover);
186
- --badge-outline-color: var(--ui-tertiary);
187
+ --badge-outline-color: var(--ui-focus-color);
187
188
  --badge-border-color: var(--danger-bg-hover);
188
189
  }
189
190
 
@@ -192,13 +193,14 @@
192
193
  }
193
194
 
194
195
  .auto-outline {
195
- --badge-text-color: var(--ui-primary);
196
+ --badge-text-color: var(--ui-primary-text-color);
196
197
  --badge-bg-color: initial;
197
- --badge-border: 1px solid var(--ui-primary);
198
- --badge-border-color: var(--ui-primary);
199
- --badge-hover-bg-color: var(--ui-accent-dark);
200
- --badge-hover-border: 1px solid var(--ui-accent-dark);
201
- --badge-outline-color: var(--ui-accent-dark);
198
+ --badge-border: 1px solid var(--ui-primary-text-color);
199
+ --badge-border-color: var(--ui-primary-text-color);
200
+ --badge-hover-bg-color: var(--ui-primary-hover-color);
201
+ --badge-hover-text-color: var(--ui-primary-contrast-color);
202
+ --badge-hover-border: 1px solid var(--ui-primary-hover-color);
203
+ --badge-outline-color: var(--ui-focus-color);
202
204
  }
203
205
 
204
206
  :global(.dark) .auto-outline {
@@ -206,37 +208,57 @@
206
208
  --badge-bg-color: initial;
207
209
  --badge-border: 1px solid var(--ui-accent);
208
210
  --badge-border-color: var(--ui-accent);
209
- --badge-hover-bg-color: var(--ui-tertiary);
210
- --badge-hover-border: 1px solid var(--ui-tertiary);
211
- --badge-outline-color: var(--ui-tertiary);
211
+ --badge-hover-bg-color: var(--ui-accent-hover-color);
212
+ --badge-hover-text-color: var(--ui-accent-contrast-color);
213
+ --badge-hover-border: 1px solid var(--ui-accent-hover-color);
214
+ --badge-outline-color: var(--ui-focus-color);
212
215
  }
213
216
 
214
217
  .accent-outline {
215
- --badge-text-color: var(--ui-accent);
218
+ --badge-text-color: var(--ui-accent-text-color);
216
219
  --badge-bg-color: initial;
217
- --badge-border: 1px solid var(--ui-accent);
218
- --badge-border-color: var(--ui-accent);
219
- --badge-hover-bg-color: var(--ui-tertiary);
220
- --badge-hover-border: 1px solid var(--ui-tertiary);
221
- --badge-outline-color: var(--ui-tertiary);
220
+ --badge-border: 1px solid var(--ui-accent-text-color);
221
+ --badge-border-color: var(--ui-accent-text-color);
222
+ --badge-hover-bg-color: var(--ui-accent-hover-color);
223
+ --badge-hover-text-color: var(--ui-accent-contrast-color);
224
+ --badge-hover-border: 1px solid var(--ui-accent-hover-color);
225
+ --badge-outline-color: var(--ui-focus-color);
222
226
  }
223
227
 
224
228
  .primary-outline {
225
- --badge-text-color: var(--ui-primary);
229
+ --badge-text-color: var(--ui-primary-text-color);
226
230
  --badge-bg-color: initial;
227
- --badge-border: 1px solid var(--ui-primary);
228
- --badge-border-color: var(--ui-primary);
229
- --badge-hover-bg-color: var(--ui-accent-dark);
230
- --badge-hover-border: 1px solid var(--ui-accent-dark);
231
- --badge-outline-color: var(--ui-accent-dark);
231
+ --badge-border: 1px solid var(--ui-primary-text-color);
232
+ --badge-border-color: var(--ui-primary-text-color);
233
+ --badge-hover-bg-color: var(--ui-primary-hover-color);
234
+ --badge-hover-text-color: var(--ui-primary-contrast-color);
235
+ --badge-hover-border: 1px solid var(--ui-primary-hover-color);
236
+ --badge-outline-color: var(--ui-focus-color);
232
237
  }
233
238
 
234
239
  .tertiary {
235
- --badge-text-color: black;
240
+ --badge-text-color: var(--ui-tertiary-contrast-color);
236
241
  --badge-bg-color: var(--ui-tertiary);
237
- --badge-hover-bg-color: var(--ui-tertiary-dark);
238
- --badge-outline-color: var(--ui-tertiary);
239
- --badge-border-color: var(--ui-tertiary-dark);
242
+ --badge-hover-bg-color: var(--ui-tertiary-hover-color);
243
+ --badge-outline-color: var(--ui-focus-color);
244
+ --badge-border-color: var(--ui-tertiary-text-color);
245
+ }
246
+
247
+ .tertiary-outline {
248
+ --badge-text-color: var(--ui-tertiary-text-color);
249
+ --badge-bg-color: transparent;
250
+ --badge-border: 1px solid var(--ui-tertiary-text-color);
251
+ --badge-border-color: var(--ui-tertiary-text-color);
252
+ --badge-hover-bg-color: color-mix(in srgb, var(--ui-tertiary-hover-color) 25%, transparent);
253
+ --badge-outline-color: var(--ui-focus-color);
254
+ }
255
+
256
+ .tertiary-subtle {
257
+ --badge-text-color: var(--ui-tertiary-text-color);
258
+ --badge-bg-color: color-mix(in srgb, var(--ui-tertiary) 15%, transparent);
259
+ --badge-hover-bg-color: color-mix(in srgb, var(--ui-tertiary-hover-color) 30%, transparent);
260
+ --badge-border-color: var(--ui-tertiary-text-color);
261
+ --badge-outline-color: var(--ui-focus-color);
240
262
  }
241
263
 
242
264
  button,
@@ -256,6 +278,11 @@
256
278
  button:hover:not(:disabled),
257
279
  a:hover:not(:disabled) {
258
280
  background-color: var(--badge-hover-bg-color, var(--badge-bg-color));
281
+ color: var(--badge-hover-text-color, var(--badge-text-color));
282
+ }
283
+
284
+ a:hover:not(:disabled) {
285
+ color: var(--badge-hover-text-color, var(--badge-text-color)) !important;
259
286
  }
260
287
 
261
288
  .badge-container:has(button, a):hover:not(:has(:disabled)) {
@@ -264,7 +291,7 @@
264
291
 
265
292
  button:focus-visible,
266
293
  a:focus-visible {
267
- outline: solid 0.125rem var(--badge-outline-color, var(--ui-accent-dark));
294
+ outline: solid 0.125rem var(--badge-outline-color, var(--ui-focus-color));
268
295
  outline-offset: 0.125rem;
269
296
  }
270
297
 
@@ -288,7 +315,8 @@
288
315
  .auto-subtle {
289
316
  --badge-text-color: white;
290
317
  --badge-hover-bg-color: var(--ui-primary);
291
- --badge-outline-color: var(--ui-accent);
318
+ --badge-hover-text-color: var(--ui-primary-contrast-color);
319
+ --badge-outline-color: var(--ui-focus-color);
292
320
  }
293
321
  }
294
322