AbsaOSS · TerranceKhumalo-absa · Feb 16, 2026 · Feb 16, 2026 · Feb 16, 2026 · Feb 16, 2026
@@ -71,6 +71,7 @@
     "eslint-plugin-standard": "^5.0.0",
     "jest": "^30.3.0",
     "jest-environment-jsdom": "^30.3.0",
+    "jest-preset-angular": "^16.1.2",
     "ng-packagr": "^21.2.2",
     "pa11y-ci": "^4.0.1",
     "prettier": "^3.4.2",

@@ -26,7 +26,7 @@
                         "optional": false,
                         "readonly": false,
                         "type": "string",
-                        "default": "depth",
+                        "default": "var(--cps-accent-primary)",
                         "description": "Color of the label."
                     },
                     {

@@ -127,7 +127,7 @@
                         "optional": true,
                         "readonly": false,
                         "type": "number",
-                        "description": "The duration (in milliseconds) that the notification will be displayed before automatically closing.\nValue 0 means that the notification is persistent and will not be automatically closed."
+                        "description": "The duration (in milliseconds) that the notification will be displayed before automatically closing.\r\nValue 0 means that the notification is persistent and will not be automatically closed."
                     },
                     {
                         "name": "allowDuplicates",

@@ -26,7 +26,7 @@
                         "optional": false,
                         "readonly": false,
                         "type": "string",
-                        "default": "calm",
+                        "default": "var(--cps-accent-primary)",
                         "description": "Color of the progress bar."
                     },
                     {

@@ -107,22 +107,22 @@
                         "readonly": false,
                         "type": "boolean",
                         "default": "true",
-                        "description": "Determines whether the 'Remove' button should be displayed in the row menu.\nNote: This setting only takes effect if 'showRowMenu' is true and 'rowMenuItems' is not set."
+                        "description": "Determines whether the 'Remove' button should be displayed in the row menu.\r\nNote: This setting only takes effect if 'showRowMenu' is true and 'rowMenuItems' is not set."
                     },
                     {
                         "name": "showRowEditButton",
                         "optional": false,
                         "readonly": false,
                         "type": "boolean",
                         "default": "true",
-                        "description": "Determines whether the 'Edit' button should be displayed in the row menu.\nNote: This setting only takes effect if 'showRowMenu' is true and 'rowMenuItems' is not set."
+                        "description": "Determines whether the 'Edit' button should be displayed in the row menu.\r\nNote: This setting only takes effect if 'showRowMenu' is true and 'rowMenuItems' is not set."
                     },
                     {
                         "name": "rowMenuItems",
                         "optional": true,
                         "readonly": false,
                         "type": "CpsMenuItem[]",
-                        "description": "Custom items to be displayed in the row menu.\nNote: This setting only takes effect if 'showRowMenu' is true."
+                        "description": "Custom items to be displayed in the row menu.\r\nNote: This setting only takes effect if 'showRowMenu' is true."
                     },
                     {
                         "name": "reorderableRows",
@@ -178,7 +178,7 @@
                         "readonly": false,
                         "type": "boolean",
                         "default": "true",
-                        "description": "If true, automatically detects filter type based on values, otherwise sets 'text' filter type for all columns.\nNote: This setting only takes effect if 'filterableByColumns' is true."
+                        "description": "If true, automatically detects filter type based on values, otherwise sets 'text' filter type for all columns.\r\nNote: This setting only takes effect if 'filterableByColumns' is true."
                     },
                     {
                         "name": "sortMode",
@@ -570,15 +570,15 @@
                         "readonly": false,
                         "type": "boolean",
                         "default": "false",
-                        "description": "Determines whether columns are resizable.\nIn case of using a custom template for columns, it is also needed to add cpsTColResizable directive to th elements."
+                        "description": "Determines whether columns are resizable.\r\nIn case of using a custom template for columns, it is also needed to add cpsTColResizable directive to th elements."
                     },
                     {
                         "name": "columnResizeMode",
                         "optional": false,
                         "readonly": false,
                         "type": "\"expand\" | \"fit\"",
                         "default": "fit",
-                        "description": "Determines how the columns are resized. It can be 'fit' (total width of the table stays the same) or 'expand' (total width of the table changes when resizing columns).\nNote: This setting only takes effect if 'resizableColumns' is true."
+                        "description": "Determines how the columns are resized. It can be 'fit' (total width of the table stays the same) or 'expand' (total width of the table changes when resizing columns).\r\nNote: This setting only takes effect if 'resizableColumns' is true."
                     }
                 ]
             },

@@ -0,0 +1,30 @@
+{
+    "components": {},
+    "name": "CpsThemeService",
+    "description": "CpsThemeService manages application theming including dark mode support.\r\n\r\nThis service provides:\r\n- Light and dark theme switching with smooth transitions\r\n- Automatic persistence of theme preference in localStorage\r\n- Reactive state management using Angular signals",
+    "types": {
+        "description": "Defines the custom types used by the module.",
+        "values": [
+            {
+                "name": "CpsTheme",
+                "value": "\"light\" | \"dark\"",
+                "description": "Available theme options"
+            },
+            {
+                "name": "CpsColorTheme",
+                "value": "\"neutral\" | \"calm\" | \"energy\" | \"passion\"",
+                "description": "Available color theme options"
+            },
+            {
+                "name": "CpsBaseTheme",
+                "value": "\"default\" | \"graphite\" | \"midnight\" | \"aubergine\"",
+                "description": "Available dark-mode base theme options"
+            },
+            {
+                "name": "CpsRadiusTheme",
+                "value": "\"none\" | \"compact\" | \"rounded\" | \"pill\"",
+                "description": "Available radius theme options"
+            }
+        ]
+    }
+}
@@ -123,22 +123,22 @@
                         "readonly": false,
                         "type": "boolean",
                         "default": "true",
-                        "description": "Determines whether the 'Remove' button should be displayed in the row menu.\nNote: This setting only takes effect if 'showRowMenu' is true and 'rowMenuItems' is not set."
+                        "description": "Determines whether the 'Remove' button should be displayed in the row menu.\r\nNote: This setting only takes effect if 'showRowMenu' is true and 'rowMenuItems' is not set."
                     },
                     {
                         "name": "showRowEditButton",
                         "optional": false,
                         "readonly": false,
                         "type": "boolean",
                         "default": "true",
-                        "description": "Determines whether the 'Edit' button should be displayed in the row menu.\nNote: This setting only takes effect if 'showRowMenu' is true and 'rowMenuItems' is not set."
+                        "description": "Determines whether the 'Edit' button should be displayed in the row menu.\r\nNote: This setting only takes effect if 'showRowMenu' is true and 'rowMenuItems' is not set."
                     },
                     {
                         "name": "rowMenuItems",
                         "optional": true,
                         "readonly": false,
                         "type": "CpsMenuItem[]",
-                        "description": "Custom items to be displayed in the row menu.\nNote: This setting only takes effect if 'showRowMenu' is true."
+                        "description": "Custom items to be displayed in the row menu.\r\nNote: This setting only takes effect if 'showRowMenu' is true."
                     },
                     {
                         "name": "loading",
@@ -530,7 +530,7 @@
                         "readonly": false,
                         "type": "boolean",
                         "default": "true",
-                        "description": "If true, automatically detects filter type based on values, otherwise sets 'text' filter type for all columns.\nNote: This setting only takes effect if 'filterableByColumns' is true."
+                        "description": "If true, automatically detects filter type based on values, otherwise sets 'text' filter type for all columns.\r\nNote: This setting only takes effect if 'filterableByColumns' is true."
                     },
                     {
                         "name": "showExportBtn",
@@ -586,15 +586,15 @@
                         "readonly": false,
                         "type": "boolean",
                         "default": "false",
-                        "description": "Determines whether columns are resizable.\nIn case of using a custom template for columns, it is also needed to add cpsTTColResizable directive to th elements."
+                        "description": "Determines whether columns are resizable.\r\nIn case of using a custom template for columns, it is also needed to add cpsTTColResizable directive to th elements."
                     },
                     {
                         "name": "columnResizeMode",
                         "optional": false,
                         "readonly": false,
                         "type": "\"expand\" | \"fit\"",
                         "default": "fit",
-                        "description": "Determines how the columns are resized. It can be 'fit' (total width of the table stays the same) or 'expand' (total width of the table changes when resizing columns).\nNote: This setting only takes effect if 'resizableColumns' is true."
+                        "description": "Determines how the columns are resized. It can be 'fit' (total width of the table stays the same) or 'expand' (total width of the table changes when resizing columns).\r\nNote: This setting only takes effect if 'resizableColumns' is true."
                     }
                 ]
             },

@@ -1,7 +1,7 @@
 {
     "components": {},
     "name": "CronValidationService",
-    "description": "Service for validating 6-field cron expressions with extended features.\n\nThis service handles cron validation logic for extended cron expression formats\nthat support additional features beyond standard Unix cron for more flexible\nscheduling capabilities.\n\nFormat: minutes hours day-of-month month day-of-week year\n\nKey Features:\n- Wildcards: asterisk (any value), question mark (any value for day fields)\n- Ranges: 1-5, MON-FRI, JAN-MAR\n- Steps: asterisk/15, 5/10, 1-5/2\n- Lists: 1,3,5, MON,WED,FRI\n- Special chars: L (last), W (weekday), hash (nth occurrence)",
+    "description": "Service for validating 6-field cron expressions with extended features.\r\n\r\nThis service handles cron validation logic for extended cron expression formats\r\nthat support additional features beyond standard Unix cron for more flexible\r\nscheduling capabilities.\r\n\r\nFormat: minutes hours day-of-month month day-of-week year\r\n\r\nKey Features:\r\n- Wildcards: asterisk (any value), question mark (any value for day fields)\r\n- Ranges: 1-5, MON-FRI, JAN-MAR\r\n- Steps: asterisk/15, 5/10, 1-5/2\r\n- Lists: 1,3,5, MON,WED,FRI\r\n- Special chars: L (last), W (weekday), hash (nth occurrence)",
     "methods": {
         "description": "Methods used in service.",
         "values": [

@@ -32,5 +32,9 @@
     "CpsTooltipOpenOn": "tooltip",
     "CpsNotificationConfig": "notification",
     "CpsNotificationAppearance": "notification",
-    "CpsNotificationPosition": "notification"
+    "CpsNotificationPosition": "notification",
+    "CpsTheme": "theme",
+    "CpsColorTheme": "theme",
+    "CpsBaseTheme": "theme",
+    "CpsRadiusTheme": "theme"
 }
@@ -1,11 +1,14 @@
 <div class="top-toolbar">
-  <img src="assets/ui_logo.svg" />
+  <img src="assets/ui_logo.svg" alt="CPS UI Kit logo" />
   <span>Consumer Products UI Kit</span>
   @if (version) {
     <span
       ><b>v{{ version }}</b></span
     >
   }
+  @if (showThemeToggle) {
+    <app-theme-toggle />
+  }
 </div>
 <div class="composition-container">
   <app-navigation-sidebar
@@ -16,7 +19,6 @@
     <div class="composition-body-toolbar">
       <cps-icon
         icon="burger-arrow"
-        color="white"
         class="sidebar-toggle-icon"
         (click)="toggleSidebar()"></cps-icon>
       <span class="composition-body-toolbar-title">{{ componentTitle }}</span>

@@ -2,19 +2,37 @@
 
 .top-toolbar {
   height: vars.$top-tbar-height;
-  background-color: white;
+  background-color: var(--cps-surface-body);
   display: flex;
-  padding-left: 20px;
+  padding: 0 14px;
   align-items: center;
-  border-bottom: 1px solid lightgrey;
+  border-bottom: 1px solid var(--cps-border-color);
+  gap: 8px;
   img {
     width: 42px;
     height: 42px;
   }
+
   span {
-    margin-left: 16px;
     font-size: 18px;
-    color: vars.$color-calm;
+    color: var(--cps-accent-primary);
+    line-height: 1;
+
+    &:first-of-type {
+      flex: 1;
+      font-weight: lighter;
+      letter-spacing: 0.01em;
+    }
+
+    b {
+      color: var(--cps-accent-primary);
+      font-weight: 700;
+      font-size: 18px;
+    }
+  }
+
+  app-theme-toggle {
+    margin-left: auto;
   }
 }
 .composition-container {
@@ -29,11 +47,12 @@
     background-color: vars.$composition-background;
     .composition-body-toolbar {
       height: vars.$inner-tbar-height;
-      background: vars.$color-calm;
+      background: var(--cps-surface-elevated);
+      border-bottom: 1px solid var(--cps-border-color);
       display: flex;
       align-items: center;
       justify-content: space-between;
-      color: white;
+      color: var(--cps-text-primary);
       font-size: 20px;
       .composition-body-toolbar-title {
         margin: 0 auto;

@@ -1,8 +1,9 @@
 import { TestBed } from '@angular/core/testing';
-import { AppComponent } from './app.component';
 import { ActivatedRoute, RouterOutlet } from '@angular/router';
 import { CpsIconComponent } from 'cps-ui-kit';
+import { AppComponent } from './app.component';
 import { NavigationSidebarComponent } from './components/navigation-sidebar/navigation-sidebar.component';
+import { ThemeToggleComponent } from './components/theme-toggle/theme-toggle.component';
 
 jest.mock('projects/cps-ui-kit/package.json', () => ({ version: '1.0.0' }), {
   virtual: true
@@ -12,7 +13,12 @@ describe('AppComponent', () => {
   beforeEach(async () => {
     await TestBed.configureTestingModule({
       declarations: [AppComponent],
-      imports: [NavigationSidebarComponent, CpsIconComponent, RouterOutlet],
+      imports: [
+        NavigationSidebarComponent,
+        CpsIconComponent,
+        ThemeToggleComponent,
+        RouterOutlet
+      ],
       providers: [{ provide: ActivatedRoute, useValue: {} }]
     }).compileComponents();
   });

@@ -1,7 +1,7 @@
 import { Component } from '@angular/core';
 import { ActivatedRoute, NavigationEnd, Router } from '@angular/router';
-import { filter, map } from 'rxjs/operators';
 import packageJson from 'projects/cps-ui-kit/package.json';
+import { filter, map } from 'rxjs/operators';
 
 @Component({
   selector: 'app-root',
@@ -9,11 +9,14 @@
  styleUrls: ['./app.component.scss'],
  standalone: false
 })
 export class AppComponent {
  componentTitle = '';
 
   sidebarExpanded = true;
 
+  showThemeToggle =
+    new URLSearchParams(window.location.search).get('experimental') === 'true';
+
   version = packageJson?.version;
 
   constructor(
@@ -27,7 +30,7 @@
        map((route) => route?.firstChild),
        map((route) => route?.snapshot?.routeConfig)
      )
      .subscribe((data: any) => {
        this.componentTitle = data?.title?.toUpperCase() || '';
      });
  }

@@ -4,12 +4,13 @@
   // provideClientHydration
 } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { TitleStrategy } from '@angular/router';
+import { CpsIconComponent } from 'cps-ui-kit';
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
-import { NavigationSidebarComponent } from './components/navigation-sidebar/navigation-sidebar.component';
-import { TitleStrategy } from '@angular/router';
 import { AppPrefixTitleStrategy } from './app.prefix-title-strategy';
-import { CpsIconComponent } from 'cps-ui-kit';
+import { NavigationSidebarComponent } from './components/navigation-sidebar/navigation-sidebar.component';
+import { ThemeToggleComponent } from './components/theme-toggle/theme-toggle.component';
 
 @NgModule({
   declarations: [AppComponent],
@@ -18,7 +19,8 @@
     BrowserAnimationsModule,
     AppRoutingModule,
     NavigationSidebarComponent,
-    CpsIconComponent
+    CpsIconComponent,
+    ThemeToggleComponent
   ],
   providers: [
     { provide: TitleStrategy, useClass: AppPrefixTitleStrategy }

@@ -1,5 +1,5 @@
 <cps-tab-group
-  tabsBackground="bg-light"
+  tabsBackground="var(--cps-background-color)"
   animationType="fade"
   (afterTabChanged)="changeTab($event)"
   [selectedIndex]="selectedTabIndex">