Skip to content

feat(core): accept custom-generated colors in component inputs#693

Open
giulio-leone wants to merge 2 commits into
italia:mainfrom
giulio-leone:feat/564-custom-color-support
Open

feat(core): accept custom-generated colors in component inputs#693
giulio-leone wants to merge 2 commits into
italia:mainfrom
giulio-leone:feat/564-custom-color-support

Conversation

@giulio-leone

Copy link
Copy Markdown
Contributor

Closes #564

Extends all color type aliases to accept Bootstrap Italia auto-generated color tokens (e.g. primary-a1, primary-a2, analogue-1-a1, analogue-2-a2) alongside the fixed color set.

Problem

Bootstrap Italia generates custom color tokens via HSB triads (docs), but the Angular kit's color types only accepted the fixed set (primary, secondary, etc.), causing TypeScript errors when using generated colors.

Solution

Add | (string & {}) to each color type alias:

  • AlertColor, ButtonColor, CalloutColor, ChipColor
  • ProgressBarColor, BadgeColor, TableColor, IconColor

This TypeScript pattern:

  • ✅ Preserves IDE autocomplete for known values
  • ✅ Accepts any custom color string without type errors
  • ✅ Zero runtime overhead — purely a type-level change

Tests

  • 2 new tests: custom-generated color rendering (primary-a1, analogue-1-a2)
  • 111/111 tests passing, 0 lint errors, double gate verified

⚠️ This reopens #649 which was accidentally closed due to fork deletion.

giulio-leone and others added 2 commits March 25, 2026 11:56
Extend all color type aliases (AlertColor, ButtonColor, CalloutColor,
ChipColor, ProgressBarColor, BadgeColor, TableColor, IconColor) with
`| (string & {})` to allow custom Bootstrap Italia auto-generated
colors (primary-a1, analogue-1-a2, etc.) while preserving IDE
autocomplete for the well-known values.

Closes italia#564

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Show (string & {}) pattern allowing custom CSS-generated colors
alongside predefined theme colors. Demonstrates teal and indigo
custom colors with the generated alert-* class.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
@vercel

vercel Bot commented Mar 25, 2026

Copy link
Copy Markdown

@giulio-leone is attempting to deploy a commit to the dip-trasformazione-digitale Team on Vercel.

A member of the Team first needs to authorize it.

@vercel

vercel Bot commented Mar 27, 2026

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
design-angular-kit Error Error Mar 27, 2026 3:37pm

Request Review

@simionato-ennovaresearch

Copy link
Copy Markdown

@giulio-leone questa modifica si applica trasversalmente a tutti i componenti?

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.

[Feat] Possibilità di passare ai componenti i colori generati automaticamente dalla libreria

2 participants