Open
Conversation
TerranceKhumalo-absa
requested review from
fateeand,
korel-san and
lukasmatta
as code owners
Coverage report for library
Test suite run success429 tests passing in 22 suites. Report generated by 🧪jest coverage report action from fbe4121 |
Playwright test results
Details
|
fateeand
reviewed
Apr 1, 2026
projects/cps-ui-kit/src/lib/services/cps-theme/cps-theme.service.ts
Outdated
Show resolved
Hide resolved
…stency across components
…stency and accessibility
… navigation sidebar styles for better theming consistency
…ormance and clarity
…default values, and improve descriptions for clarity
- Added a new "kafka" icon to the icons.svg file. - Updated the iconNames array in cps-icon.component.ts to include "kafka". - Improved regex matching for RGB color parsing in colors-utils.ts to support modern syntax.
TerranceKhumalo-absa
force-pushed
the
feature/512-dark-mode
branch
from
7ac2ce6 to
cf682e7
Compare
Contributor
There was a problem hiding this comment.
Pull request overview
This PR reintroduces dark mode support for the CPS Shared UI library by adding a theme service and dark theme token overrides, migrating multiple component styles to semantic CSS variables, and addressing the previously reported production crash on the Colors page by hardening RGB(A) parsing.
Changes:
- Add dark theme token overrides and semantic design tokens (surfaces, text, borders, radius, motion) based on CSS variables.
- Introduce
CpsThemeServicefor toggling/persisting theme settings and add a Composition “appearance” toggle UI. - Fix Colors page production crash by updating
isDark()to handle modern minifiedrgb(r g b / a)syntax (and add a null guard).
Reviewed changes
Copilot reviewed 40 out of 42 changed files in this pull request and generated 8 comments.
Show a summary per file
| File | Description |
|---|---|
| projects/cps-ui-kit/styles/styles.scss | Imports dark theme tokens; adds global scrollbar + base background/text styling + transition hook. |
| projects/cps-ui-kit/styles/_colors.scss | Adds semantic tokens (surfaces/text/borders/radius/motion) and theme attribute variants; updates error base color. |
| projects/cps-ui-kit/styles/_colors-dark.scss | New dark theme overrides keyed off data-theme='dark' and related attribute combinations. |
| projects/cps-ui-kit/src/public-api.ts | Reorders exports and exposes CpsThemeService publicly. |
| projects/cps-ui-kit/src/lib/utils/colors-utils.ts | Updates isDark() regex + null guard; restricts getCpsColors() selector filtering. |
| projects/cps-ui-kit/src/lib/services/cps-theme/cps-theme.service.ts | New theming service using signals + DOM attributes + localStorage persistence. |
| projects/cps-ui-kit/src/lib/services/cps-theme/cps-theme.service.spec.ts | New unit tests for theme service defaults and persistence. |
| projects/cps-ui-kit/src/lib/components/cps-progress-linear/cps-progress-linear.component.ts | Makes default progress color theme-aware via CSS variable. |
| projects/cps-ui-kit/src/lib/components/cps-loader/cps-loader.component.ts | Updates loader label/background defaults toward semantic tokens. |
| projects/cps-ui-kit/src/lib/components/cps-loader/cps-loader.component.scss | Swaps loader ring colors to semantic accent variables. |
| projects/cps-ui-kit/src/lib/components/cps-input/cps-input.component.ts | Import ordering adjustments only. |
| projects/cps-ui-kit/src/lib/components/cps-input/cps-input.component.scss | Migrates input styling to semantic variables; adds focus ring/disabled/borderless tweaks. |
| projects/cps-ui-kit/src/lib/components/cps-input/cps-input.component.html | Replaces ngClass with class bindings; adjusts icon color + progress opacity. |
| projects/cps-ui-kit/src/lib/components/cps-icon/cps-icon.component.ts | Adds new icon names (sun/moon/kafka); import ordering adjustment. |
| projects/cps-ui-kit/src/lib/components/cps-chip/cps-chip.component.scss | Migrates chip styling to semantic surface/border/text variables. |
| projects/cps-ui-kit/src/lib/components/cps-chip/cps-chip.component.html | Switches close icon color to semantic text variable. |
| projects/cps-ui-kit/src/lib/components/cps-autocomplete/cps-autocomplete.component.scss | Migrates autocomplete styling to semantic tokens; improves focus/hover visuals. |
| projects/cps-ui-kit/src/lib/components/cps-autocomplete/cps-autocomplete.component.html | Improves keyboard tabbing behavior; adds aria-labels; updates disabled icon color. |
| projects/cps-ui-kit/assets/icons.svg | Adds SVG symbols for sun, moon, and kafka icons. |
| projects/composition/src/variables.scss | Updates Composition variables to semantic tokens. |
| projects/composition/src/styles.scss | Migrates Composition table/page styling to semantic tokens; adds row hover styling. |
| projects/composition/src/app/pages/icons-page/icons-page/icons-page.component.scss | Updates icon row text color for dark mode compatibility. |
| projects/composition/src/app/pages/icons-page/icons-page/icons-page.component.html | Makes icon color theme-aware for the icons page. |
| projects/composition/src/app/components/theme-toggle/theme-toggle.component.ts | New appearance + theme toggle UI wiring to CpsThemeService. |
| projects/composition/src/app/components/theme-toggle/theme-toggle.component.scss | New styling for the appearance settings popover/menu. |
| projects/composition/src/app/components/theme-toggle/theme-toggle.component.html | New template for appearance menu + dark mode toggle button. |
| projects/composition/src/app/components/navigation-sidebar/navigation-sidebar.component.scss | Migrates sidebar styling to semantic background/highlight/text tokens. |
| projects/composition/src/app/components/component-docs-viewer/component-docs-viewer.component.html | Updates tab group background value to a new theme token. |
| projects/composition/src/app/app.module.ts | Registers ThemeToggleComponent in Composition app module. |
| projects/composition/src/app/app.component.spec.ts | Updates test imports to include ThemeToggleComponent. |
| projects/composition/src/app/app.component.scss | Migrates toolbar/body toolbar styles to semantic tokens; positions theme toggle. |
| projects/composition/src/app/app.component.html | Adds logo alt text; inserts the theme toggle into the top toolbar. |
| projects/composition/src/app/api-data/types_map.json | Maps new theme types into the “theme” API docs section. |
| projects/composition/src/app/api-data/cron-validation.service.json | Normalizes description line endings in API docs JSON. |
| projects/composition/src/app/api-data/cps-tree-table.json | Normalizes description line endings in API docs JSON. |
| projects/composition/src/app/api-data/cps-theme.json | New API doc entry describing CpsThemeService and theme-related types. |
| projects/composition/src/app/api-data/cps-table.json | Normalizes description line endings in API docs JSON. |
| projects/composition/src/app/api-data/cps-progress-linear.json | Updates default prop value to match new theme-aware default. |
| projects/composition/src/app/api-data/cps-notification.json | Normalizes description line endings in API docs JSON. |
| projects/composition/src/app/api-data/cps-loader.json | Updates documented default for loader label color. |
| package.json | Adds jest-preset-angular dev dependency. |
| package-lock.json | Lockfile updates for added dependency and metadata normalization. |
Comments suppressed due to low confidence (1)
projects/cps-ui-kit/src/lib/components/cps-loader/cps-loader.component.ts:47
backgroundColoris set tovar(--cps-surface-overlay)but then overwritten inngOnInit()withrgba(0, 0, 0, ...), so the new theme-aware token is never used (and dark mode will still get a light-mode overlay). Use the semantic token for the base color (and apply opacity separately if needed), or remove the overwrite.
...ts/composition/src/app/components/component-docs-viewer/component-docs-viewer.component.html
Outdated
Show resolved
Hide resolved
projects/composition/src/app/components/theme-toggle/theme-toggle.component.html
Show resolved
Hide resolved
projects/cps-ui-kit/src/lib/services/cps-theme/cps-theme.service.spec.ts
Show resolved
Hide resolved
…roving theme service functionality
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Dark Mode Support
This pull request introduces dark mode theming support for the CPS Shared UI library, including a theme toggle component, CSS variable-based styling, and updated API documentation.
Theming & UI Enhancements
ThemeToggleComponentto the top toolbar, allowing users to switch between light and dark modes.app.component.scssandnavigation-sidebar.component.scssto use CSS variables (e.g.,--cps-surface-body,--cps-text-primary) for backgrounds, borders, and text, ensuring theme consistency across both modes.component-docs-viewer.component.htmlto use the new theme variable.alttext to the logo image for accessibility.Theming API Documentation
cps-theme.jsonAPI doc describingCpsThemeServiceand new types:CpsTheme,CpsColorTheme,CpsBaseTheme, andCpsRadiusTheme.types_map.jsonto map the new theme types to the "theme" section.Component Updates
cps-loaderandcps-progress-linearto use theme-aware CSS variables.cps-notification.json,cps-table.json,cps-tree-table.json,cron-validation.service.json).Bug Fix
The original dark mode release (v20.5.0) introduced a production-only crash on the Colors page:
Root cause: The
isDark()function used a regex that only matched the legacy comma-separated CSS color format (rgba(73, 185, 255, 0.16)). In production builds, the CSS minifier converts these to the modern space-separated syntax (rgb(73 185 255 / .16)), causing the regex to returnnull. This was not an issue before dark mode because the light theme's--cps-color-*variables are all hex values. The dark theme (_colors-dark.scss) introducedrgba()values forinfo-bg,success-bg,warn-bg,error-bg, and highlight colors.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 and modern 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.tsRelease notes: