Dante 82242f1b00 refactor: add Badge component and fix twMerge font-size detection (#10580) ...

## Summary
- Rename `text-xxxs`/`text-xxs` to `text-3xs`/`text-2xs` in design
system CSS — fixes `tailwind-merge` incorrectly classifying custom
font-size utilities as color classes, which clobbered text color
- Add `Badge` component with updated severity colors matching Figma
design (white text on colored backgrounds)
- Add Badge stories under `Components/Badges/Badge`
- Add unit tests including twMerge regression coverage

Split from #10438 per review feedback — this PR contains the
foundational Badge component; migration of consumers follows in a
separate PR.

## Test plan
- [x] Unit tests pass (`Badge.test.ts` — 12 tests)
- [x] Typecheck passes
- [x] Lint passes
- [ ] Verify Badge stories render correctly in Storybook
- [ ] Verify existing components using `text-2xs`/`text-3xs` render
unchanged

Fixes #10438 (partial)

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-10580-refactor-add-Badge-component-and-fix-twMerge-font-size-detection-32f6d73d3650810dae7cd0d4af67fd1c)
by [Unito](https://www.unito.io)

2026-03-27 19:23:59 -07:00

..

BackgroundImageUpload.vue

feat: use cloud backend thumbnail resize for image previews (#9298)

2026-03-03 02:56:06 +00:00

Badge.stories.ts

refactor: add Badge component and fix twMerge font-size detection (#10580)

2026-03-27 19:23:59 -07:00

Badge.test.ts

refactor: add Badge component and fix twMerge font-size detection (#10580)

2026-03-27 19:23:59 -07:00

badge.variants.ts

refactor: add Badge component and fix twMerge font-size detection (#10580)

2026-03-27 19:23:59 -07:00

Badge.vue

refactor: add Badge component and fix twMerge font-size detection (#10580)

2026-03-27 19:23:59 -07:00

BadgePill.test.ts

test: migrate 13 component tests from VTU to VTL (Phase 1) (#10471)

2026-03-26 18:15:11 -07:00

BadgePill.vue

refactor: add Badge component and fix twMerge font-size detection (#10580)

2026-03-27 19:23:59 -07:00

ColorCustomizationSelector.test.ts

test: migrate 11 interactive component tests from VTU to VTL (Phase 2) (#10490)

2026-03-26 19:46:31 -07:00

ColorCustomizationSelector.vue

[lint] Enable plugin vue recommended rules (#3403)

2025-04-11 12:53:20 -04:00

ComfyImage.vue

fix: high-res image preview overflowing screen and hiding close button (#10129)

2026-03-17 13:15:53 +09:00

ContentDivider.vue

[Manager] Modal UI Adjustment (Align with Design) (#4222)

2025-06-23 21:30:56 -07:00

CustomFormValue.vue

[lint] Enable plugin vue recommended rules (#3403)

2025-04-11 12:53:20 -04:00

CustomizationDialog.vue

Component: The Rest of the PrimeVue buttons (#7649)

2025-12-29 15:03:34 -08:00

DeviceInfo.vue

Road to No Explicit Any Part 10 (#8499)

2026-02-02 17:16:40 +01:00

Dialogue.vue

Even further app fixes (#9617)

2026-03-09 09:35:31 -07:00

DotSpinner.vue

Upstream ComfyUI Manager frontend and add custom node conflict detection (#5291)

2025-09-02 19:14:36 -07:00

DraggableList.vue

fix: enable enforce-consistent-class-order tailwind lint rule (#9428)

2026-03-05 17:24:34 -08:00

DropdownItem.vue

refactor: add Badge component and fix twMerge font-size detection (#10580)

2026-03-27 19:23:59 -07:00

DropdownMenu.vue

feat: import/export keybinding presets (#9681)

2026-03-20 12:24:31 +01:00

EditableText.test.ts

test: migrate 11 interactive component tests from VTU to VTL (Phase 2) (#10490)

2026-03-26 19:46:31 -07:00

EditableText.vue

feat: App mode - double click to rename widget (#10341)

2026-03-20 14:35:09 -07:00

ExtensionSlot.vue

Lint: Turn on rules that should allow for verbatimModuleSyntax (#5616)

2025-09-16 22:03:41 -07:00

FormColorPicker.vue

Devex: Linter updates (#7309)

2025-12-10 11:08:47 -08:00

FormImageUpload.vue

fix: enable enforce-canonical-classes tailwind lint rule (#9427)

2026-03-05 17:07:46 -08:00

FormItem.vue

fix: eradicate tailwind @apply usage in vue styles (#9146)

2026-02-24 21:23:52 -08:00

FormRadioGroup.test.ts

test: migrate 13 component tests from VTU to VTL (Phase 1) (#10471)

2026-03-26 18:15:11 -07:00

FormRadioGroup.vue

Road to No Explicit Any Part 10 (#8499)

2026-02-02 17:16:40 +01:00

ImageLightbox.test.ts

test: migrate 13 component tests from VTU to VTL (Phase 1) (#10471)

2026-03-26 18:15:11 -07:00

ImageLightbox.vue

feat: App mode - add lightbox to view image in drop zone (#9888)

2026-03-19 09:22:06 -07:00

InputKnob.vue

[lint] Enable plugin vue recommended rules (#3403)

2025-04-11 12:53:20 -04:00

InputSlider.vue

[lint] Enable plugin vue recommended rules (#3403)

2025-04-11 12:53:20 -04:00

LazyImage.vue

fix: enable enforce-canonical-classes tailwind lint rule (#9427)

2026-03-05 17:07:46 -08:00

LoadingOverlay.vue

Add asset deletion progress indicator (#7906)

2026-01-27 21:21:50 -07:00

MarqueeLine.test.ts

feat: implement NodeLibrarySidebarTabV2 with Reka UI components (#8548)

2026-02-20 22:06:09 -08:00

MarqueeLine.vue

fix: enable enforce-consistent-class-order tailwind lint rule (#9428)

2026-03-05 17:24:34 -08:00

NoResultsPlaceholder.vue

feat/fix: App mode QA feedback 2 (#9511)

2026-03-06 18:57:03 -08:00

NotificationPopup.test.ts

feat: App mode - Switch to Nodes 2.0 when entering builder (#10337)

2026-03-21 10:38:59 -07:00

NotificationPopup.vue

feat: App mode - Switch to Nodes 2.0 when entering builder (#10337)

2026-03-21 10:38:59 -07:00

OverlayIcon.vue

fix: enable enforce-consistent-class-order tailwind lint rule (#9428)

2026-03-05 17:24:34 -08:00

ScrubableNumberInput.stories.ts

feat: add text widget stories and Number input stories (#9527)

2026-03-11 08:34:57 +09:00

ScrubableNumberInput.vue

Mobile input tweaks (#9686)

2026-03-09 23:08:42 -07:00

SearchFilterChip.vue

fix: eradicate tailwind @apply usage in vue styles (#9146)

2026-02-24 21:23:52 -08:00

statusBadge.variants.ts

refactor: add Badge component and fix twMerge font-size detection (#10580)

2026-03-27 19:23:59 -07:00

StatusBadge.vue

feat: workflow sharing and ComfyHub publish flow (#8951)

2026-03-05 16:33:06 -08:00

SystemStatsPanel.vue

feat: bake frontend commit hash into build (#9832)

2026-03-12 21:07:07 -04:00

TextDivider.vue

Upgrade: Tailwind v4 (#5246)

2025-09-03 12:37:43 -07:00

TextTicker.test.ts

V2 Node Search (+ hidden Node Library changes) (#8987)

2026-02-20 01:10:03 -08:00

TextTicker.vue

V2 Node Search (+ hidden Node Library changes) (#8987)

2026-02-20 01:10:03 -08:00

TextTickerMultiLine.test.ts

feat: implement NodeLibrarySidebarTabV2 with Reka UI components (#8548)

2026-02-20 22:06:09 -08:00

TextTickerMultiLine.vue

fix: enable enforce-consistent-class-order tailwind lint rule (#9428)

2026-03-05 17:24:34 -08:00

TreeExplorer.vue

fix: enable enforce-consistent-class-order tailwind lint rule (#9428)

2026-03-05 17:24:34 -08:00

TreeExplorerTreeNode.test.ts

test: migrate 11 interactive component tests from VTU to VTL (Phase 2) (#10490)

2026-03-26 19:46:31 -07:00

TreeExplorerTreeNode.vue

fix: enable enforce-consistent-class-order tailwind lint rule (#9428)

2026-03-05 17:24:34 -08:00

TreeExplorerV2.vue

fix: tree explorer row height and width overflow (#10501)

2026-03-26 09:20:42 +09:00

TreeExplorerV2Node.test.ts

feat: Node Library sidebar and V2 Search dialog UI/UX updates (#9085)

2026-02-28 22:34:27 +08:00

TreeExplorerV2Node.vue

fix: tree explorer row height and width overflow (#10501)

2026-03-26 09:20:42 +09:00

UrlInput.test.ts

test: migrate 11 interactive component tests from VTU to VTL (Phase 2) (#10490)

2026-03-26 19:46:31 -07:00

UrlInput.vue

[bugfix] Fix double-click required after pasting URL in upload model dialog (#6801)

2025-11-21 11:05:36 -08:00

UserAvatar.test.ts

test: migrate 13 component tests from VTU to VTL (Phase 1) (#10471)

2026-03-26 18:15:11 -07:00

UserAvatar.vue

test: migrate 13 component tests from VTU to VTL (Phase 1) (#10471)

2026-03-26 18:15:11 -07:00

UserCredit.test.ts

refactor: rename firebaseAuthStore to authStore with shared test fixtures (#10483)

2026-03-27 00:31:11 -07:00

UserCredit.vue

refactor: rename firebaseAuthStore to authStore with shared test fixtures (#10483)

2026-03-27 00:31:11 -07:00

VirtualGrid.test.ts

fix: virtual scroll pagination not working in media asset list view (#9646)

2026-03-10 11:29:42 +09:00

VirtualGrid.vue

fix: enable enforce-consistent-class-order tailwind lint rule (#9428)

2026-03-05 17:24:34 -08:00

WaveAudioPlayer.stories.ts

feat: add WaveAudioPlayer with waveform visualization and authenticated audio fetch (#10158)

2026-03-20 16:48:28 -07:00

WaveAudioPlayer.vue

feat: add WaveAudioPlayer with waveform visualization and authenticated audio fetch (#10158)

2026-03-20 16:48:28 -07:00

WorkflowActionsDropdown.vue

fix: set topbar menus to non-modal so they dismiss on canvas interaction (#10310)

2026-03-20 00:17:28 +08:00

WorkflowActionsList.test.ts

feat: App mode enter builder menu item (#9341)

2026-03-03 08:35:47 -08:00

WorkflowActionsList.vue

refactor: add Badge component and fix twMerge font-size detection (#10580)

2026-03-27 19:23:59 -07:00