Simpler Theming Strategies (including agentic)

[thecrookster]

The Cognos Analytics Theming Evolution

From Legacy Limitations to Dynamic Carbon Integration

1. Executive Summary

IBM Cognos Analytics has successfully evolved its theming capabilities to fully integrate with the IBM Carbon Design System. This strategic shift moved beyond a limited, legacy system that only supported basic toolbar color changes.

This white paper outlines the Cognos Analytics approach, detailing a strategy to bridge legacy infrastructure with the power and flexibility of Carbon’s design tokens. Ultimately, this implementation serves as a model for a proposed official Carbon client API, empowering customers with a unified, dynamic theming solution that requires no technical expertise.

---

2. The Legacy Environment: Pre-Carbon UI and Limited Scope

The initial theming solution within Cognos Analytics was built for a legacy, pre-Carbon user interface. It was simple and effective for its scope, utilizing a configuration file (spec.json) processed by the backend to generate dynamic CSS.

Key Characteristics of the Legacy System:

• Pre-Carbon UI Context: Required only a few basic, flat colors for elements like the application bar and navigation bar.
• Narrow Focus: Theming was restricted to specific components and relied on a small number of configuration keys (e.g., "yellow").
• No Abstraction: Required direct color inputs without the ability to programmatically calculate shades for UI states (hover, active).

Even as Cognos Analytics adopted Carbon-compliant components, the original theming approach remained, resulting in a functional but aesthetically rigid experience until a recent update.

---

3. The Modernization Journey: Bridging Legacy and Carbon

The goal was to update the existing infrastructure to support the full Carbon token ecosystem, as implemented in Cognos 12.1.1. This involved enhancing the logic to align with modern design principles.

Stage 1: Expanding the Token Model

• Recognized that a single background color model was insufficient for rich Carbon components.
• Integrated Carbon’s role-based tokens (e.g., interactive-01, text-01, focus) into the data model alongside legacy keys.

Stage 2: Implementing a Rules-Based Shading Engine

• Decoupling Input from Output: Continued accepting simple inputs (e.g., "uiPrimary": "red").
• Introducing Offsets: Added a secondary config file to define algorithmic shade/tint generation using percentage offsets (e.g., +8% for hover, -10% for active).
• Ensuring Accessibility: Automatically generated hex codes that meet WCAG contrast standards.

Stage 3: Dynamic CSS Generation via Templating

Updated the dynamic CSS engine to produce Carbon-compatible CSS Custom Properties.

/* Before: Limited to legacy tokens */
--appbarBackground: #FF0000;

/* After: Comprehensive Carbon integration */
--cds-interactive-01: #FF0000;
--cds-hover-primary: #FF1A1A; /* Calculated shade */
--cds-text-01: #161616;
/* ... and many more Carbon tokens ... */

---

4. The Result: A Unified, Dynamic Theming Solution

The updated Cognos Analytics theming strategy delivers:

• Retained Infrastructure: Continued use of the proven server-side generation engine.
• Framework Agnostic: Pure CSS output applies seamlessly across UI frameworks.
• Empowered Stakeholders: Administrators can use simple configuration UIs to produce fully realized, accessible themes.

This modernization balances development efficiency with customer flexibility and brand integrity, leveraging the IBM Carbon Design System.

---

5. A Proposal to the IBM Carbon Design Team: An "Easy Alternative"

This proposal outlines a strategy for a simplified theming solution, recently implemented in Cognos Analytics, aimed at customers needing quick brand integration without technical expertise.

Objective

To offer a runtime-based, simplified theming method that ensures brand compliance and accessibility, while centralizing complexity within the Carbon Design team.

How the Alternative Works

The system includes three components:

1. Simplified Spec (spec.json): Captures high-level user color choices.
2. Centralized Rules Engine: A client-side JavaScript utility maintained by the Carbon team, handling color science (offsets, contrast checks).
3. Client-Side API: Processes the spec and applies resulting --cds- CSS properties to the DOM at runtime.

Why Centralize with the Carbon Team

• Guaranteed Compliance: Ensures WCAG and IBM design standards are met.
• Reduced Burden: Product teams consume a validated API, avoiding niche maintenance.
• Aesthetic Consistency: Maintains visual hierarchy and brand integrity across components.

---

6. The Future: Agentic Approaches for Fine-Tuning

As the client-side solution matures, AI-driven enhancements could include:

• Intelligent Color Picking: AI suggests accessible palettes from a single hex input.
• Guided Fine-Tuning: AI assists users in adjusting specific shades while preserving contrast and harmony.

---

7. Call to Action

We encourage the IBM Carbon Design team to evaluate the Cognos Analytics solution as a model for an official, client-side Theme Manager Utility. This would empower customers with a simple, quick theming solution, while retaining the full Carbon palette and documentation for expert users requiring maximum control.

---

Reference

For a live demonstration of Cognos 12.1.1 theming capabilities, see Tim Aston’s article:
👉 Theme the entire Cognos UI with your colours of choice

The short of it all is the Carbon team can consider capturing the designer knowledge that goes into creating themes and capture that in a client API that can allow simple dynamic theming like Cognos Analytics (CA). The challenge with CA is that it might be too limited and could suffer because it's just an attempt to simulate the theme designer thought that goes into defining palettes. The hope here is that that Carbon designer skills can be captured in an agentic means to scan a customers branding material and derive a theme on the fly with much more than just some simple shading % offsets that Cognos does to try to simulate the theming nuances. If things go as expected... everybody who comments on it is just gonna blow holes in the CA implementation because it's too limited. This is exactly what the issue is with the CA implementation and why I raised this idea to improve on things so Carbon consumers like CA don't have to do this and it's a native offering of Carbon.