Colors page crashes in production after dark mode feature (v20.5.0)

[TerranceKhumalo-absa]

Description

The dark mode feature introduced in v20.5.0 caused a production-only crash on the Colors page. The feature was rolled back in v20.5.1 due to this bug. This issue tracks the root cause and fix so the feature can be safely resubmitted.

The Colors page throws a TypeError: Cannot read properties of null (reading '1') in the production-hosted application. The error does not occur in the local dev server.

Root Cause

The isDark() function in colors-utils.ts uses a regex that only matches the legacy comma-separated CSS color format:

rgba(73, 185, 255, 0.16)

The hosted production build's CSS minifier converts rgba() values to the modern space-separated syntax:

rgb(73 185 255 / .16)

The regex returns null for this format, and accessing null[1] throws the TypeError.

This was not an issue before the dark mode feature because the light theme's --cps-color-* variables are all hex values. The dark theme (_colors-dark.scss) introduced rgba() values for info-bg, success-bg, warn-bg, error-bg, and highlight colors.

Steps to Reproduce

1. Deploy the application with a production build (CSS minification enabled)
2. Navigate to the Colors page
3. Open the browser console

Expected Behavior

The Colors page renders all color swatches without errors.

Actual Behavior

TypeError: Cannot read properties of null (reading '1')
    at isDark (colors-utils.ts)
    at getTextColor (colors-utils.ts)
    at ColorsPageComponent.ngOnInit

The page fails to render color swatches.

Fix

Updated the regex in isDark() from:

/^rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*(\d+(?:\.\d+)?))?\)$/

to:

/^rgba?\(\s*(\d+)[,\s]+(\d+)[,\s]+(\d+)/

This matches both legacy (rgba(r, g, b, a)) and modern (rgb(r g b / a)) CSS color syntax. A null guard was also added to prevent crashes on any other unrecognized format.

Affected Files

• projects/cps-ui-kit/src/lib/utils/colors-utils.ts