Skip to content

NC33: CSS feedback color variables semantic change breaks error/warning/success/info rendering #140

Description

@printminion-co

Problem

Between NC31 and NC33, DefaultTheme::getCSSVariables() underwent a semantic shift in how feedback colors are defined. The model changed from a single vivid element/icon color to a background + text + element split.

Variable NC31 NC33
--color-error vivid red (element/icon) light pink background
--color-error-text darker vivid red dark contrasting text
--color-element-error (didn't exist) vivid red for icons/borders

The same pattern applies to warning, success, and info.

Impact

OverrideDefaultTheme::getCSSVariables() still overrides with NC31-style vivid values (e.g. '--color-error' => $ionColorRoseR3 = #ff6159). On NC33 this causes:

  • Components using --color-error as a background render vivid red instead of light pink
  • --color-error-text is near-identical vivid red → near-zero contrast on that background
  • The new --color-element-error/warning/success/info tokens are never overridden, so NC33 defaults are used instead of IONOS brand colors

This affects all feedback UI: notification banners, form validation highlights, alert cards, etc.

Since it is a CSS contract change, Psalm and PHP lint cannot detect it — all CI checks pass green.

Suggested Fix

Update OverrideDefaultTheme::getCSSVariables() to align with NC33's three-token model for each feedback state:

  • --color-error → light tint background
  • --color-error-text → dark contrasting text
  • --color-element-error → vivid IONOS brand red

Repeat for warning, success, and info.

References

Identified during code review of #139 (NC32/NC33 compatibility bump).

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions