Skip to content

feat(card): support styles#1294

Merged
MerlinMoos merged 3 commits intospartan-ng:mainfrom
marcjulian:feat/card-styles
Mar 31, 2026
Merged

feat(card): support styles#1294
MerlinMoos merged 3 commits intospartan-ng:mainfrom
marcjulian:feat/card-styles

Conversation

@marcjulian
Copy link
Copy Markdown
Collaborator

PR Checklist

Please check if your PR fulfills the following requirements:

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?

What is the new behavior?

Does this PR introduce a breaking change?

  • Yes
  • No

Other information

@marcjulian marcjulian requested a review from MerlinMoos March 31, 2026 10:13
@greptile-apps
Copy link
Copy Markdown

greptile-apps bot commented Mar 31, 2026

Greptile Summary

This PR introduces multi-theme style support for the card primitive by replacing inline Tailwind utility classes with semantic spartan-card-* CSS class names that are defined per-theme in the five registry style sheets (style-vega.css, style-lyra.css, style-maia.css, style-mira.css, style-nova.css). Structural / layout Tailwind classes that do not vary between themes are intentionally kept inline. The demo page is also updated to expose the theme-switcher dropdown and show installation instructions for all themes.

Key changes:

  • hlm-card.ts / .template: replaces the full inline class string with spartan-card group/card flex flex-col; per-theme visual styles are now owned by each theme's .spartan-card rule.
  • hlm-card-header.ts / .template: replaces padding/border/rounding classes with spartan-card-header; structural grid/container classes kept inline.
  • hlm-card-content.ts, hlm-card-title.ts, hlm-card-description.ts (+ templates): fully replace inline Tailwind with the corresponding spartan-card-* class.
  • hlm-card-footer.ts / .template: replaces theme-specific spacing/border classes with spartan-card-footer; flex items-center kept inline.
  • hlm-card-action.ts / .template: adds spartan-card-action as a prefix marker alongside kept positioning Tailwind classes, but .spartan-card-action is not yet defined in any of the five theme CSS files.
  • section-intro.ts: adds ChangeDetectionStrategy.OnPush and tightens BooleanInput typing on showThemeToggle.
  • install-tabs.ts: tightens BooleanInput typing on showOnlyVega.
  • card.page.ts: enables showThemeToggle and sets [showOnlyVega]="false" to show all themes in the installation docs.

Confidence Score: 5/5

Safe to merge; the card renders correctly across all themes and the only finding is a minor class-naming inconsistency that does not affect runtime behaviour.

All spartan-card-* semantic classes are properly defined in each of the five theme CSS files. The spartan-card-action marker is the sole inconsistency but layout is fully preserved by kept Tailwind positioning classes. No data-integrity, security, or runtime-breakage risk detected. All remaining findings are P2.

libs/helm/card/src/lib/hlm-card-action.ts and its CLI template counterpart — .spartan-card-action is referenced but not defined in any theme CSS file.

Important Files Changed

Filename Overview
libs/helm/card/src/lib/hlm-card.ts Replaces inline Tailwind classes with spartan-card semantic class (defined in all 5 theme CSS files) plus structural helpers; group/card flex flex-col kept inline.
libs/helm/card/src/lib/hlm-card-action.ts Adds spartan-card-action class prefix but this class is not defined in any theme style file, making it a no-op marker; layout still works via kept Tailwind classes.
libs/helm/card/src/lib/hlm-card-header.ts Replaces theme-specific padding/border classes with spartan-card-header and keeps structural grid/container classes inline; CSS definitions are present in all style files.
libs/helm/card/src/lib/hlm-card-content.ts Fully replaces Tailwind padding classes with spartan-card-content; class is defined in all 5 theme CSS files with appropriate per-theme padding.
libs/helm/card/src/lib/hlm-card-footer.ts Replaces theme-specific padding/border classes with spartan-card-footer, keeps flex items-center inline; CSS definitions present in all style files.
libs/helm/card/src/lib/hlm-card-title.ts Fully replaces inline Tailwind typography classes with spartan-card-title; defined in all 5 theme CSS files.
libs/helm/card/src/lib/hlm-card-description.ts Fully replaces inline Tailwind typography classes with spartan-card-description; defined in all 5 theme CSS files.
apps/app/src/app/shared/layout/section-intro.ts Adds ChangeDetectionStrategy.OnPush and improves showThemeToggle input typing with explicit BooleanInput generic — clean improvements.
apps/app/src/app/shared/layout/install-tabs.ts Improves showOnlyVega input typing with explicit BooleanInput generic, consistent with the section-intro change.
apps/app/src/app/pages/(components)/components/(card)/card.page.ts Enables the style theme toggle and sets showOnlyVega="false" so all themes are shown in the card installation docs, matching the new multi-theme card support.

Flowchart

%%{init: {'theme': 'neutral'}}%%
flowchart TD
    subgraph After
        A2["HlmCard\nspartan-card + structural TW"]
        B2["HlmCardHeader\nspartan-card-header + structural TW"]
        C2["HlmCardContent\nspartan-card-content"]
        D2["HlmCardFooter\nspartan-card-footer + flex/items"]
        E2["HlmCardTitle\nspartan-card-title"]
        F2["HlmCardDescription\nspartan-card-description"]
        G2["HlmCardAction\nspartan-card-action + layout TW"]
    end

    subgraph ThemeCSS["Theme CSS Files (5 themes)"]
        T1[".spartan-card { @apply ... }"]
        T2[".spartan-card-header { @apply ... }"]
        T3[".spartan-card-content { @apply ... }"]
        T4[".spartan-card-footer { @apply ... }"]
        T5[".spartan-card-title { @apply ... }"]
        T6[".spartan-card-description { @apply ... }"]
        T7["❌ .spartan-card-action (missing)"]
    end

    A2 --> T1
    B2 --> T2
    C2 --> T3
    D2 --> T4
    E2 --> T5
    F2 --> T6
    G2 -.->|no CSS definition| T7
Loading

Reviews (1): Last reviewed commit: "chore: fix lint" | Re-trigger Greptile

Copy link
Copy Markdown
Collaborator

@MerlinMoos MerlinMoos left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

@MerlinMoos MerlinMoos merged commit f4ad600 into spartan-ng:main Mar 31, 2026
6 checks passed
@marcjulian marcjulian deleted the feat/card-styles branch March 31, 2026 12:54
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants