feat(badge): support styles

[marcjulian]

PR Checklist

Please check if your PR fulfills the following requirements:

• The commit message follows our
  guidelines: https://github.com/spartan-ng/spartan/blob/main/CONTRIBUTING.md#-commit-message-guidelines
• Tests for the changes have been added (for bug fixes / features)
• Docs have been added / updated (for bug fixes / features)

PR Type

What kind of change does this PR introduce?

• Bugfix
• Feature
• Code style update (formatting, local variables)
• Refactoring (no functional changes, no api changes)
• Build related changes
• CI related changes
• Documentation content changes
• Other... Please describe:

Which package are you modifying?

Primitives

• accordion
• alert
• alert-dialog
• aspect-ratio
• autocomplete
• avatar
• badge
• breadcrumb
• button
• button-group
• calendar
• card
• carousel
• checkbox
• collapsible
• combobox
• command
• context-menu
• data-table
• date-picker
• dialog
• empty
• dropdown-menu
• field
• form-field
• hover-card
• icon
• input
• input-group
• input-otp
• item
• kbd
• label
• menubar
• native-select
• navigation-menu
• pagination
• popover
• progress
• radio-group
• resizable
• scroll-area
• select
• separator
• sheet
• sidebar
• skeleton
• slider
• sonner
• spinner
• switch
• table
• tabs
• textarea
• toggle
• toggle-group
• tooltip
• typography

Others

• trpc
• nx
• repo
• cli

What is the current behavior?

Closes #

What is the new behavior?

Does this PR introduce a breaking change?

• Yes
• No

Other information

[greptile-apps]

Greptile Summary

This PR refactors the badge primitive to support multi-theme styling by moving visual Tailwind classes out of the Angular directive and into per-theme CSS files. Each of the five themes (vega, nova, maia, mira, lyra) now owns .spartan-badge and .spartan-badge-variant-* rules, while the HlmBadge directive retains only structural and accessibility utilities (inline-flex, focus-visible:*, aria-invalid:*, etc.).

Key changes:

• hlm-badge.ts / hlm-badge.ts.template: Variant values are replaced with semantic class names (spartan-badge-variant-{name}) instead of hardcoded Tailwind strings; the CLI generator template is kept in sync.
• All five theme CSS files: The icon-sizing selector is updated from [&>svg]:size-3! (targets raw SVGs with !important) to [&>ng-icon]:text-[--spacing(n)] (targets the ng-icon custom element via font-size, matching how the component renders); mira correctly uses a smaller spacing value (2.5) to match its 0.625rem badge text.
• style-vega.css: Physical padding utilities (pl-1.5/pr-1.5) are replaced with RTL-safe logical equivalents (ps-1.5/pe-1.5), consistent with the other themes.
• Badge demo page: showThemeToggle is added to the section header and [showOnlyVega]="false" is set on the install tabs to expose all theme options now that every theme provides badge styles.
• Spinner preview: Updated to use the destructive variant with "Deleting" label as a more representative demo.

Confidence Score: 5/5

Safe to merge — clean architectural refactoring with no logic changes or regressions found

All changes are a straightforward extraction of visual utilities from the TypeScript directive into per-theme CSS files. The directive retains its structural and accessibility classes unchanged. The template file is kept in sync with the source. The icon-selector migration from [&>svg]:size-3! to [&>ng-icon]:text-[--spacing(n)] is semantically equivalent for the ng-icon component model, and the mira-specific smaller spacing value is correct. No P0 or P1 issues were found across any of the 9 changed files.

No files require special attention

Important Files Changed

Filename	Overview
libs/helm/badge/src/lib/hlm-badge.ts	Replaces hardcoded Tailwind classes with semantic spartan-badge / spartan-badge-variant-* class names; structural and a11y utilities are kept inline
libs/cli/src/generators/ui/libs/badge/files/lib/hlm-badge.ts.template	CLI generator template kept in sync with the updated hlm-badge.ts; identical change to use semantic class names
libs/registry/src/styles/style-vega.css	Switches icon selector from [&>svg]:size-3! to [&>ng-icon]:text-[--spacing(3)]; also corrects physical padding properties (pr/pl) to RTL-safe logical equivalents (pe/ps)
libs/registry/src/styles/style-lyra.css	Same [&>svg]:size-3! → [&>ng-icon]:text-[--spacing(3)] icon selector update for the lyra theme
libs/registry/src/styles/style-mira.css	Icon selector updated to [&>ng-icon]:text-[--spacing(2.5)] (smaller, consistent with the mira badge's reduced 0.625rem font size)
libs/registry/src/styles/style-maia.css	Same icon selector update as vega/nova; no other changes
libs/registry/src/styles/style-nova.css	Same icon selector update as vega/maia; no other changes
apps/app/src/app/pages/(components)/components/(badge)/badge--spinner.preview.ts	Preview updated to use destructive variant with 'Deleting' label for a more representative demo
apps/app/src/app/pages/(components)/components/(badge)/badge.page.ts	Adds showThemeToggle to the section intro and [showOnlyVega]="false" to install-tabs so all themes are shown now that multi-theme badge styles exist

Flowchart

%%{init: {'theme': 'neutral'}}%%
flowchart TD
    A[hlmBadge Directive] -->|applies| B["spartan-badge\n(structural + a11y classes)"]
    A -->|applies variant class| C{variant input}
    C --> D[spartan-badge-variant-default]
    C --> E[spartan-badge-variant-secondary]
    C --> F[spartan-badge-variant-destructive]
    C --> G[spartan-badge-variant-outline]
    C --> H[spartan-badge-variant-ghost]
    C --> I[spartan-badge-variant-link]

    subgraph "Theme CSS Files (per theme)"
        J[style-vega.css]
        K[style-nova.css]
        L[style-maia.css]
        M[style-mira.css]
        N[style-lyra.css]
    end

    D & E & F & G & H & I --> J
    D & E & F & G & H & I --> K
    D & E & F & G & H & I --> L
    D & E & F & G & H & I --> M
    D & E & F & G & H & I --> N

Loading

_{Reviews (1): Last reviewed commit: "chore: copy helm badge to cli" | Re-trigger Greptile}

[MerlinMoos]

LGTM