Migrating Enterprise Portals to IBM Carbon Design System v11

The IBM Design Language and its operational implementation, Carbon Design System v11, represent a substantial evolution in modern enterprise interface engineering. In this deep-dive, we analyze how decoupling compile-time Sass variables in favor of CSS custom property tokens creates a dynamic, multi-theme architecture.

Token-Based CSS Custom Properties Engine

Rather than binding visual states to rigid compile-time SCSS variables, Carbon v11 bridges theme configurations to CSS custom properties. Site administrators can customize color palettes dynamically via Hugo’s central YAML configuration file:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

// Dynamic CSS Custom Property Mapping Engine
:root {
  --cds-background: var(--theme-custom-bg, #ffffff);
  --cds-layer-01: var(--theme-custom-layer-01, #f4f4f4);
  --cds-layer-02: var(--theme-custom-layer-02, #e0e0e0);
  --cds-text-primary: var(--theme-custom-text-primary, #161616);
  --cds-text-secondary: var(--theme-custom-text-secondary, #525252);
  --cds-link-primary: var(--theme-custom-link, #0f62fe);
  --cds-interactive-01: var(--theme-custom-interactive, #0f62fe);
  --cds-focus: var(--theme-custom-focus, #0f62fe);
}

Measurable Results