chore(CardPrimary): 🤖 Migrate component to CSS Modules

[punkbit]

Why?

Migrate the component CardPrimary from Styled-Components to CSS Modules.

⚠️ Depends on #1002 (should merge first)

How?

• Migrates Styled Components styles onto CSS Modules
• Use utility CVA for variants
• Use CSS Variables for tokens

Tickets?

N/A

Contribution checklist?

• You've done enough research before writing
• You have reviewed the PR
• The commit messages are detailed
• The build command runs locally
• Assets or static content are linked and stored in the project
• For documentation, guides or references, you've tested the commands

Preview?

demo-cardprimary-css-mod.mov

[changeset-bot]

⚠️ No Changeset found

Latest commit: 292adbb

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[github-actions]

Claude finished @punkbit's task in 1m 37s —— View job

---

Code Review

Great migration overall — the structure is clean, token usage is solid, and the CVA integration works nicely. A couple of things need fixing before merge.

---

🚨 Must Fix

• CardPrimaryTopBadge.module.css:23 — broken cross-module sibling selector

  .card-primary:active ~ .card-primary-top-badge

  CSS Modules scopes .card-primary to this file with a unique hash, so it will never match the .card-primary rendered by CardPrimary.module.css. The "active → badge highlight" behaviour is silently dead. Fix by adding an [data-active] attribute on the card root when it's active (via JS / onMouseDown/onMouseUp), then select .card-primary-top-badge off that in the wrapper — or move the rule into CardPrimary.module.css where both classes are in scope. Fix this →

• CardPrimary.module.css — BEM modifier value separator inconsistent with project convention
  Per CONVENTIONS.md and existing Button.module.css, modifier values use hyphens: .button_align-center. This PR uses underscores: .card-primary_size_sm, .card-primary_align_start, .card-primary__header_align_start, etc. Should be .card-primary_size-sm, .card-primary_align-start, .card-primary__header_align-start, etc. Requires updating both the CSS file and the styles[...] lookups in CardPrimary.tsx. Fix this →

---

♿ Accessibility

• CardPrimary.tsx:84,99 — interactive div with no ARIA role
  When hasConsumerClick is true, the div gets tabIndex={0} but no role. Screen readers see a focusable div with no semantic meaning. When there's no inner infoText Button, add role="button" to the wrapper. When there is an inner Button, the outer div shouldn't be separately focusable. Fix this →

• CardPrimary.tsx:29 — isSelected has no ARIA state
  isSelected changes the border visually but nothing is communicated to assistive tech. Add aria-pressed={isSelected} (if the card acts as a toggle) or aria-selected={isSelected} (if used in a grid/listbox context). At minimum one of these should be wired up.

• CardPrimary.tsx:114-118 — conflicting alt and aria-hidden on icon image
  <img aria-hidden /> is contradictory: aria-hidden removes the element from the accessibility tree entirely, making the alt text irrelevant (it only appears if the image fails to load). Use alt="" for decorative images, or provide a meaningful alt prop passed from the consumer.

---

💡 Suggestions (non-blocking)

• CardPrimary.tsx:31-33 — dead CVA variant: disabled: { true: undefined } maps to nothing and is never passed to cardVariants({…}). Safe to delete.

• CardPrimary.module.css:89-95 — redundant disabled title styles: .card-primary__header_disabled .card-primary__title and .card-primary[aria-disabled='true'] .card-primary__title set the same colour. The JS-applied class can be dropped since the attribute selector already covers it.

• CardPrimary.module.css:53-54 — dead cursor: not-allowed: pointer-events: none is set on the same rule, which suppresses all pointer events and prevents the cursor from changing. Either drop pointer-events: none (relying on tabIndex=-1 + ARIA to block interaction) or remove cursor: not-allowed.

• CardPrimary.module.css:193 — hover token mismatch: .card-primary:hover uses --click-card-secondary-color-background-hover. Verify this is intentional — a card-primary hover token would be more semantically correct if one exists.

• Missing changeset: Run yarn changeset:add (patch) before merging — the changeset bot is flagging this. A one-liner description is enough for a refactor.

---

[workflow-authentication-public]

📚 Storybook Preview Deployed

✅ Preview URL: https://click-nqe09862b-clickhouse.vercel.app

Built from commit: f7d6960bd89c339c0cb850702e3552e130b9451a

[DreaminDani]

Closing in favor of #1038