Skip to content

Pending Review

Pending Review from User Experience (UX)

Root Component

Overview

The PWC Root is the foundational container component in the Progress Web Components design system that provides global configuration and theme management for entire applications. It serves as the top-level wrapper that initializes design system settings, manages theming, localization, and asset paths across React and Angular applications.

Core Capabilities

  • Global Configuration Management - Centralized initialization of design system settings including themes, locales, and asset paths
  • Theme System Integration - Automatic application of design tokens and theme variables throughout the component tree
  • Localization Support - Built-in internationalization configuration with support for multiple locales and languages
  • Asset Path Configuration - Centralized management of static asset locations for icons, fonts, and other resources
  • Product Context Management - Support for different product configurations within the same design system
  • Design Token Distribution - Automatic propagation of CSS custom properties and design tokens to child components

When to use Root:

  • Initialize PWC Design System at the application level with proper configuration and theming
  • Provide global context for theme switching, localization, and asset management across the entire application
  • Establish consistent design token application and CSS custom property distribution
  • Create a foundation for multi-tenant applications with different product configurations

When not to use Root:

  • Component-level implementations where global configuration is not needed
  • Library or widget development where the parent application already provides Root context
  • Server-side rendering scenarios where global state initialization might conflict with hydration

Basic Implementation

import React from 'react';
import { PwcRoot, PwcButton } from "@progress-i360/pwc-react";

function App() {
  return (
    <PwcRoot
      defaultTheme="light"
      locale="en"
      product="analytics"
      assetPath={`${import.meta.env.BASE_URL}node_modules/@progress-i360/progress-web-components/dist/`}
    >
      <div style={{ padding: '20px' }}>
        <h1 style={{ color: 'var(--color-text-base)' }}>My PWC Application</h1>

        <div style={{ 
          padding: '16px', 
          backgroundColor: 'var(--color-background-surface-raised-default)', 
          border: '1px solid var(--color-border-disabled)', 
          borderRadius: '8px',
          marginBottom: '16px'
        }}>
          <h3 style={{ margin: '0 0 8px 0', color: 'var(--color-text-base)' }}>Dashboard</h3>
          <p style={{ margin: 0, color: 'var(--color-text-subtle)' }}>
            View your analytics and key performance metrics.
          </p>
        </div>

        <PwcButton label="Get Started" variant="primary" />
      </div>
    </PwcRoot>
  );
}

```tsx import { useState } from 'react'; import '@progress-i360/progress-web-components/root'; import '@progress-i360/progress-web-components/button';

function ThemedApp() {
  const [theme, setTheme] = useState('light');

  return (
    <pwc-root
      defaultTheme={theme}
      locale="en"
      product="workspace"
      assetPath={`${import.meta.env.BASE_URL}node_modules/@progress-i360/progress-web-components/dist/`}
    >
      <div style={{ padding: '20px' }}>
        <div style={{ marginBottom: '16px' }}>
          <label style={{ marginRight: '8px' }}>Theme:</label>
          <select value={theme} onChange={(e) => setTheme(e.target.value)}>
            <option value="light">Light</option>
            <option value="dark">Dark</option>
          </select>
        </div>

        <h1 style={{ color: 'var(--color-text-base)' }}>Themed Application</h1>
        <p style={{ color: 'var(--color-text-subtle)' }}>Theme changes will be applied automatically.</p>

        <pwc-button label="Theme Test Button" variant="primary"></pwc-button>
      </div>
    </pwc-root>
  );
}
```

```typescript

import { Component, CUSTOM_ELEMENTS_SCHEMA } from "@angular/core"; import "@progress-i360/progress-web-components/root"; import "@progress-i360/progress-web-components/flex"; import "@progress-i360/progress-web-components/heading"; import "@progress-i360/progress-web-components/body"; import "@progress-i360/progress-web-components/button";

@Component({
  selector: 'root-demo',
  template: `
    <pwc-root 
      [assetPath]="assetPath" 
      [defaultTheme]="currentTheme" 
      [locale]="currentLocale"
      product="progress">
      <pwc-flex direction="column" gap="l" padding="l">
        <pwc-heading content="PWC Root Configuration" size="xl"></pwc-heading>
        <pwc-body content="Global theme and locale management demonstration."></pwc-body>
        <pwc-flex gap="s">
          <pwc-button label="Light Theme" variant="outline" (pwc-click)="switchTheme('light')"></pwc-button>
          <pwc-button label="Dark Theme" variant="outline" (pwc-click)="switchTheme('dark')"></pwc-button>
        </pwc-flex>
        <pwc-body [content]="'Current theme: ' + currentTheme"></pwc-body>
      </pwc-flex>
    </pwc-root>
  `,
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class RootDemo {
  assetPath = '/assets';
  currentTheme = 'light';
  currentLocale = 'en';

  switchTheme(theme: string) {
    this.currentTheme = theme;
  }
}
```

import '../../../src/layout/root/root.ts';

// Create PWC Root demo
function createRootDemo() {

    .app-header {
      background-color: var(--color-background-surface-raised-default);
      border-bottom: 1px solid var(--color-border-disabled);
      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
      position: sticky;
      top: 0;
      z-index: 100;
    }

    .header-content {
      max-width: 1400px;
      margin: 0 auto;
      padding: 0 24px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 64px;
    }

    .brand-section {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .app-title {
      margin: 0;
      font-size: 20px;
      font-weight: 600;
      color: var(--color-text-base);
    }

    .version-badge {
      background-color: var(--color-background-brand-subtle);
      color: var(--color-text-brand);
      padding: 2px 8px;
      border-radius: 12px;
      font-size: 11px;
      font-weight: 500;
    }

    .main-navigation {
      display: flex;
      gap: 8px;
    }

    .nav-link {
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 8px 16px;
      color: var(--color-text-subtle);
      text-decoration: none;
      border-radius: 6px;
      transition: all 0.2s ease;
      font-weight: 500;
    }

    .nav-link:hover {
      background-color: var(--color-background-surface-hovered);
      color: var(--color-text-base);
    }

    .nav-link.active {
      background-color: var(--color-background-brand-subtle);
      color: var(--color-text-brand);
    }

    .nav-icon {
      font-size: 16px;
    }

    .user-controls {
      display: flex;
      align-items: center;
      gap: 16px;
    }

    .theme-selector {
      padding: 6px 10px;
      background-color: var(--color-background-surface-default);
      color: var(--color-text-base);
      border: 1px solid var(--color-border-disabled);
      border-radius: 4px;
      font-size: 14px;
    }

    .user-menu {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 6px 12px;
      background-color: var(--color-background-surface-default);
      border-radius: 20px;
      cursor: pointer;
    }

    .user-avatar {
      width: 28px;
      height: 28px;
      background-color: var(--color-background-brand-default);
      color: var(--color-text-on-brand);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 12px;
      font-weight: 600;
    }

    .user-name {
      color: var(--color-text-base);
      font-size: 14px;
      font-weight: 500;
    }

    .app-main {
      flex: 1;
      padding: 24px;
    }

    .content-container {
      max-width: 1400px;
      margin: 0 auto;
    }

    .dashboard-section {
      margin-bottom: 32px;
    }

    .section-title {
      margin: 0 0 16px 0;
      font-size: 18px;
      font-weight: 600;
      color: var(--color-text-base);
    }

    .section-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 16px;
    }

    .view-all-btn {
      padding: 6px 12px;
      background-color: transparent;
      color: var(--color-text-brand);
      border: 1px solid var(--color-border-brand);
      border-radius: 4px;
      cursor: pointer;
      font-size: 14px;
      transition: all 0.2s ease;
    }

    .view-all-btn:hover {
      background-color: var(--color-background-brand-subtle);
    }

    .metrics-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
      gap: 20px;
    }

    .metric-card {
      padding: 20px;
      background-color: var(--color-background-surface-raised-default);
      border: 1px solid var(--color-border-disabled);
      border-radius: 8px;
      transition: transform 0.2s ease;
    }

    .metric-card:hover {
      transform: translateY(-2px);
    }

    .metric-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 12px;
    }

    .metric-icon {
      font-size: 24px;
    }

    .metric-change {
      font-size: 12px;
      font-weight: 600;
      padding: 2px 6px;
      border-radius: 4px;
    }

    .up-trend {
      background-color: var(--color-background-success-subtle);
      color: var(--color-text-success);
    }

    .down-trend {
      background-color: var(--color-background-danger-subtle);
      color: var(--color-text-danger);
    }

    .metric-value {
      font-size: 28px;
      font-weight: bold;
      color: var(--color-text-base);
      margin-bottom: 4px;
    }

    .metric-label {
      font-size: 14px;
      color: var(--color-text-subtle);
    }

    .activity-list {
      background-color: var(--color-background-surface-raised-default);
      border: 1px solid var(--color-border-disabled);
      border-radius: 8px;
      overflow: hidden;
    }

    .activity-item {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 16px;
      border-bottom: 1px solid var(--color-border-subtle);
    }

    .activity-item:last-child {
      border-bottom: none;
    }

    .activity-avatar {
      width: 36px;
      height: 36px;
      background-color: var(--color-background-brand-default);
      color: var(--color-text-on-brand);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      font-weight: 600;
    }

    .activity-content {
      flex: 1;
    }

    .activity-message {
      color: var(--color-text-base);
      font-size: 14px;
      margin-bottom: 4px;
    }

    .activity-timestamp {
      color: var(--color-text-subtle);
      font-size: 12px;
    }

    .activity-type {
      display: flex;
      align-items: center;
    }

    .type-indicator {
      width: 20px;
      height: 20px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 12px;
    }

    .type-indicator.create {
      background-color: var(--color-background-success-subtle);
    }

    .type-indicator.update {
      background-color: var(--color-background-warning-subtle);
    }

    .type-indicator.delete {
      background-color: var(--color-background-danger-subtle);
    }

    .actions-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: 16px;
    }

    .action-button {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
      padding: 20px;
      background-color: var(--color-background-surface-raised-default);
      border: 1px solid var(--color-border-disabled);
      border-radius: 8px;
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .action-button:hover {
      background-color: var(--color-background-surface-hovered);
      transform: translateY(-1px);
    }

    .action-icon {
      font-size: 32px;
    }

    .action-label {
      font-size: 14px;
      font-weight: 600;
      color: var(--color-text-base);
    }

    .action-description {
      font-size: 12px;
      color: var(--color-text-subtle);
      text-align: center;
    }

    .app-footer {
      background-color: var(--color-background-surface-raised-default);
      border-top: 1px solid var(--color-border-disabled);
      padding: 16px 24px;
    }

    .footer-content {
      max-width: 1400px;
      margin: 0 auto;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .footer-info {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 14px;
      color: var(--color-text-subtle);
    }

    .separator {
      color: var(--color-border-disabled);
    }

    .footer-link {
      color: var(--color-text-brand);
      text-decoration: none;
    }

    .footer-link:hover {
      text-decoration: underline;
    }

    .footer-status {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 14px;
      color: var(--color-text-subtle);
    }

    .status-indicator {
      width: 8px;
      height: 8px;
      border-radius: 50%;
    }

    .status-indicator.online {
      background-color: var(--color-background-success-default);
    }
  `]
})
export class AppComponent {
  appTheme = 'light';
  appLocale = 'en';
  appProduct = 'enterprise';
  assetPath = '/assets';

  currentUser = {
    name: 'Sarah Wilson',
    email: 'sarah.wilson@company.com',
    initials: 'SW'
  };

  navigationItems = [
    { label: 'Dashboard', icon: '📊', href: '#', route: 'dashboard', active: true },
    { label: 'Projects', icon: '📋', href: '#', route: 'projects', active: false },
    { label: 'Team', icon: '👥', href: '#', route: 'team', active: false },
    { label: 'Reports', icon: '📈', href: '#', route: 'reports', active: false }
  ];

  dashboardMetrics = [
    { 
      label: 'Total Revenue', 
      value: '$124,567', 
      change: '+12%', 
      trend: 'up',
      icon: '💰'
    },
    { 
      label: 'Active Projects', 
      value: '23', 
      change: '+3', 
      trend: 'up',
      icon: '📋'
    },
    { 
      label: 'Team Members', 
      value: '48', 
      change: '+5', 
      trend: 'up',
      icon: '👥'
    },
    { 
      label: 'Completion Rate', 
      value: '94%', 
      change: '-2%', 
      trend: 'down',
      icon: '✅'
    }
  ];

  recentActivities = [
    {
      message: 'Created new project "Mobile App Redesign"',
      timestamp: '2 minutes ago',
      userAvatar: 'JD',
      type: 'create'
    },
    {
      message: 'Updated task status in "Website Launch"',
      timestamp: '15 minutes ago',
      userAvatar: 'SM',
      type: 'update'
    },
    {
      message: 'Completed milestone "Phase 1 Development"',
      timestamp: '1 hour ago',
      userAvatar: 'AL',
      type: 'create'
    },
    {
      message: 'Removed outdated document from shared folder',
      timestamp: '2 hours ago',
      userAvatar: 'BW',
      type: 'delete'
    }
  ];

  quickActions = [
    {
      id: 'new-project',
      label: 'New Project',
      description: 'Start a new project',
      icon: '➕'
    },
    {
      id: 'invite-team',
      label: 'Invite Team',
      description: 'Add team members',
      icon: '👥'
    },
    {
      id: 'generate-report',
      label: 'Generate Report',
      description: 'Create analytics report',
      icon: '📊'
    },
    {
      id: 'settings',
      label: 'Settings',
      description: 'Configure preferences',
      icon: '⚙️'
    }
  ];

  getCurrentUserInitials(): string {
    return this.currentUser.initials;
  }

  navigateTo(route: string, event: Event): void {
    event.preventDefault();
    this.navigationItems.forEach(item => {
      item.active = item.route === route;
    });
    console.log('Navigate to:', route);
  }

  onThemeChange(): void {
    console.log('Theme changed to:', this.appTheme);
    // Theme change will be handled by PWC Root component
  }

  getActivityIcon(type: string): string {
    const icons = {
      create: '➕',
      update: '✏️',
      delete: '🗑️'
    };
    return icons[type] || '📝';
  }

  executeAction(actionId: string): void {
    console.log('Execute action:', actionId);
  }

  viewAllActivity(): void {
    console.log('View all activity');
  }
}

import '../../../src/layout/root/root.ts';

// Create application with PWC Root configuration
function createApplication() {
  // Create root container
  const rootElement = document.createElement('pwc-root');
  rootElement.setAttribute('defaultTheme', 'light');
  rootElement.setAttribute('locale', 'en');
  rootElement.setAttribute('product', 'platform');
  rootElement.setAttribute('assetPath', '/static');

  // Application container
  const appContainer = document.createElement('div');
  appContainer.style.cssText = `
    min-height: 100vh;
    background-color: var(--color-background-sunken);
    color: var(--color-text-base);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    display: flex;
    flex-direction: column;
  `;

  // Create header
  const header = document.createElement('header');
  header.style.cssText = `
    background-color: var(--color-background-surface-raised-default);
    border-bottom: 1px solid var(--color-border-disabled);
    padding: 16px 24px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  `;

  header.innerHTML = `
    <div style="
      max-width: 1200px;
      margin: 0 auto;
      display: flex;
      justify-content: space-between;
      align-items: center;
    ">
      <div style="display: flex; align-items: center; gap: 16px;">
        <h1 style="
          margin: 0;
          font-size: 24px;
          color: var(--color-text-base);
          font-weight: 700;
        ">Platform Dashboard</h1>
        <span style="
          background-color: var(--color-background-brand-subtle);
          color: var(--color-text-brand);
          padding: 4px 10px;
          border-radius: 12px;
          font-size: 12px;
          font-weight: 600;
        ">BETA</span>
      </div>

      <div style="display: flex; align-items: center; gap: 12px;">
        <button id="theme-toggle" style="
          padding: 8px 12px;
          background-color: var(--color-background-surface-default);
          color: var(--color-text-base);
          border: 1px solid var(--color-border-disabled);
          border-radius: 6px;
          cursor: pointer;
          display: flex;
          align-items: center;
          gap: 6px;
          transition: all 0.2s ease;
        ">
          <span id="theme-icon">☀️</span>
          <span id="theme-label">Light</span>
        </button>

        <div style="
          display: flex;
          align-items: center;
          gap: 8px;
          padding: 6px 12px;
          background-color: var(--color-background-surface-default);
          border-radius: 20px;
        ">
          <div style="
            width: 32px;
            height: 32px;
            background-color: var(--color-background-brand-default);
            color: var(--color-text-on-brand);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 600;
            font-size: 14px;
          ">JD</div>
          <span style="
            color: var(--color-text-base);
            font-weight: 500;
            font-size: 14px;
          ">John Doe</span>
        </div>
      </div>
    </div>
  `;

  // Create main content
  const main = document.createElement('main');
  main.style.cssText = `
    flex: 1;
    padding: 32px 24px;
  `;

  const contentContainer = document.createElement('div');
  contentContainer.style.cssText = `
    max-width: 1200px;
    margin: 0 auto;
  `;

  // Welcome section
  const welcomeSection = document.createElement('section');
  welcomeSection.style.cssText = `
    margin-bottom: 40px;
    text-align: center;
    padding: 40px;
    background: linear-gradient(135deg, var(--color-background-brand-subtle) 0%, var(--color-background-surface-raised-default) 100%);
    border-radius: 12px;
    border: 1px solid var(--color-border-disabled);
  `;

  welcomeSection.innerHTML = `
    <h2 style="
      margin: 0 0 16px 0;
      font-size: 32px;
      color: var(--color-text-base);
      font-weight: 700;
    ">Welcome to PWC Platform</h2>

    <p style="
      margin: 0 0 24px 0;
      font-size: 18px;
      color: var(--color-text-subtle);
      max-width: 600px;
      margin-left: auto;
      margin-right: auto;
      line-height: 1.6;
    ">Experience the power of PWC Design System with consistent theming, responsive design, and seamless component integration.</p>

    <button id="get-started-btn" style="
      padding: 12px 24px;
      background-color: var(--color-background-brand-default);
      color: var(--color-text-on-brand);
      border: none;
      border-radius: 8px;
      font-size: 16px;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.2s ease;
      box-shadow: 0 2px 8px rgba(0,123,255,0.3);
    ">Get Started</button>
  `;

  // Features grid
  const featuresSection = document.createElement('section');
  featuresSection.style.cssText = `
    margin-bottom: 40px;
  `;

  const featuresTitle = document.createElement('h3');
  featuresTitle.textContent = 'Platform Features';
  featuresTitle.style.cssText = `
    margin: 0 0 24px 0;
    font-size: 24px;
    color: var(--color-text-base);
    font-weight: 600;
  `;

  const featuresGrid = document.createElement('div');
  featuresGrid.style.cssText = `
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 24px;
  `;

  const features = [
    {
      icon: '🎨',
      title: 'Design System',
      description: 'Consistent UI components and design tokens for scalable applications.',
      stats: '50+ Components'
    },
    {
      icon: '🌍',
      title: 'Internationalization',
      description: 'Built-in support for multiple languages and locales.',
      stats: '12 Languages'
    },
    {
      icon: '🎯',
      title: 'Accessibility',
      description: 'WCAG compliant components with screen reader support.',
      stats: 'AA Compliant'
    },
    {
      icon: '⚡',
      title: 'Performance',
      description: 'Optimized components with minimal bundle size impact.',
      stats: '< 50KB Gzipped'
    },
    {
      icon: '🔧',
      title: 'Customizable',
      description: 'Flexible theming system with CSS custom properties.',
      stats: '100+ Tokens'
    },
    {
      icon: '📱',
      title: 'Responsive',
      description: 'Mobile-first responsive design across all components.',
      stats: 'All Devices'
    }
  ];

  features.forEach(feature => {
    const featureCard = document.createElement('div');
    featureCard.style.cssText = `
      padding: 24px;
      background-color: var(--color-background-surface-raised-default);
      border: 1px solid var(--color-border-disabled);
      border-radius: 10px;
      transition: all 0.3s ease;
      cursor: pointer;
      position: relative;
      overflow: hidden;
    `;

    featureCard.innerHTML = `
      <div style="
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 16px;
      ">
        <span style="font-size: 36px;">${feature.icon}</span>
        <span style="
          background-color: var(--color-background-brand-subtle);
          color: var(--color-text-brand);
          padding: 4px 8px;
          border-radius: 8px;
          font-size: 11px;
          font-weight: 600;
        ">${feature.stats}</span>
      </div>

      <h4 style="
        margin: 0 0 12px 0;
        font-size: 18px;
        color: var(--color-text-base);
        font-weight: 600;
      ">${feature.title}</h4>

      <p style="
        margin: 0;
        color: var(--color-text-subtle);
        line-height: 1.5;
        font-size: 14px;
      ">${feature.description}</p>
    `;

    featureCard.addEventListener('mouseenter', () => {
      featureCard.style.transform = 'translateY(-4px)';
      featureCard.style.boxShadow = '0 8px 24px rgba(0,0,0,0.15)';
    });

    featureCard.addEventListener('mouseleave', () => {
      featureCard.style.transform = 'translateY(0)';
      featureCard.style.boxShadow = 'none';
    });

    featuresGrid.appendChild(featureCard);
  });

  featuresSection.appendChild(featuresTitle);
  featuresSection.appendChild(featuresGrid);

  // Status section
  const statusSection = document.createElement('section');
  statusSection.style.cssText = `
    padding: 24px;
    background-color: var(--color-background-surface-raised-default);
    border: 1px solid var(--color-border-disabled);
    border-radius: 10px;
    margin-bottom: 40px;
  `;

  statusSection.innerHTML = `
    <div style="
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 16px;
    ">
      <h3 style="
        margin: 0;
        font-size: 20px;
        color: var(--color-text-base);
        font-weight: 600;
      ">System Status</h3>

      <div style="
        display: flex;
        align-items: center;
        gap: 6px;
      ">
        <div style="
          width: 8px;
          height: 8px;
          background-color: var(--color-background-success-default);
          border-radius: 50%;
        "></div>
        <span style="
          color: var(--color-text-success);
          font-size: 14px;
          font-weight: 500;
        ">All Systems Operational</span>
      </div>
    </div>

    <div style="
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: 16px;
    ">
      <div style="
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 12px;
        background-color: var(--color-background-surface-default);
        border-radius: 6px;
      ">
        <span style="color: var(--color-text-base); font-size: 14px;">API Status</span>
        <span style="
          color: var(--color-text-success);
          font-size: 12px;
          font-weight: 600;
        ">Online</span>
      </div>

      <div style="
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 12px;
        background-color: var(--color-background-surface-default);
        border-radius: 6px;
      ">
        <span style="color: var(--color-text-base); font-size: 14px;">Database</span>
        <span style="
          color: var(--color-text-success);
          font-size: 12px;
          font-weight: 600;
        ">Connected</span>
      </div>

      <div style="
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 12px;
        background-color: var(--color-background-surface-default);
        border-radius: 6px;
      ">
        <span style="color: var(--color-text-base); font-size: 14px;">CDN</span>
        <span style="
          color: var(--color-text-success);
          font-size: 12px;
          font-weight: 600;
        ">Fast</span>
      </div>

      <div style="
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 12px;
        background-color: var(--color-background-surface-default);
        border-radius: 6px;
      ">
        <span style="color: var(--color-text-base); font-size: 14px;">Uptime</span>
        <span style="
          color: var(--color-text-success);
          font-size: 12px;
          font-weight: 600;
        ">99.9%</span>
      </div>
    </div>
  `;

  // Assemble content
  contentContainer.appendChild(welcomeSection);
  contentContainer.appendChild(featuresSection);
  contentContainer.appendChild(statusSection);
  main.appendChild(contentContainer);

  // Create footer
  const footer = document.createElement('footer');
  footer.style.cssText = `
    background-color: var(--color-background-surface-raised-default);
    border-top: 1px solid var(--color-border-disabled);
    padding: 20px 24px;
    text-align: center;
  `;

  footer.innerHTML = `
    <div style="
      max-width: 1200px;
      margin: 0 auto;
      color: var(--color-text-subtle);
      font-size: 14px;
    ">
      <p style="margin: 0;">
        © 2024 PWC Design System - 
        <a href="#" style="color: var(--color-text-brand); text-decoration: none;">Documentation</a> - 
        <a href="#" style="color: var(--color-text-brand); text-decoration: none;">GitHub</a>
      </p>
    </div>
  `;

  // Assemble application
  appContainer.appendChild(header);
  appContainer.appendChild(main);
  appContainer.appendChild(footer);
  rootElement.appendChild(appContainer);

  // Add interactivity
  let currentTheme = 'light';
  const themeToggle = header.querySelector('#theme-toggle');
  const themeIcon = header.querySelector('#theme-icon');
  const themeLabel = header.querySelector('#theme-label');

  themeToggle.addEventListener('click', () => {
    currentTheme = currentTheme === 'light' ? 'dark' : 'light';
    rootElement.setAttribute('defaultTheme', currentTheme);

    themeIcon.textContent = currentTheme === 'light' ? '☀️' : '🌙';
    themeLabel.textContent = currentTheme === 'light' ? 'Light' : 'Dark';
  });

  const getStartedBtn = welcomeSection.querySelector('#get-started-btn');
  getStartedBtn.addEventListener('click', () => {
    alert('Welcome to PWC Design System! 🎉');
  });

  getStartedBtn.addEventListener('mouseenter', () => {
    getStartedBtn.style.backgroundColor = 'var(--color-background-brand-hovered)';
    getStartedBtn.style.transform = 'translateY(-1px)';
  });

  getStartedBtn.addEventListener('mouseleave', () => {
    getStartedBtn.style.backgroundColor = 'var(--color-background-brand-default)';
    getStartedBtn.style.transform = 'translateY(0)';
  });

  return rootElement;
}

// Initialize application
document.body.appendChild(createApplication());

Usage Patterns

  • Application-Level Setup - Initialize PWC Design System at the root level of applications to provide global configuration and theme management
  • Theme-Aware Applications - Build applications with dynamic theme switching capabilities using the theme configuration system
  • Multi-Locale Applications - Create internationalized applications with proper locale configuration and asset path management
  • Product-Specific Configurations - Implement multi-tenant or product-specific applications with different design system configurations

Best Practices

Content Strategy Guidelines

  • Single Root Instance - Use only one PWC Root component per application to ensure consistent global configuration
  • Early Initialization - Place Root component at the top level of your application hierarchy for proper design token distribution
  • Configuration Consistency - Maintain consistent configuration values across different deployment environments
  • Asset Path Management - Use relative or absolute asset paths that work across different deployment scenarios

Performance Optimization

  • CSS Custom Properties - Leverage the automatic CSS custom property distribution for efficient theme updates
  • Minimal Configuration - Provide only necessary configuration properties to avoid unnecessary processing overhead
  • Asset Optimization - Optimize asset paths and ensure assets are properly cached for better loading performance
  • Theme Loading - Consider lazy loading for theme resources that are not immediately needed

Integration Architecture

  • Framework Integration - Ensure Root component integrates properly with your chosen framework's lifecycle and state management
  • Global State Management - Coordinate Root configuration with application-level state management systems
  • Build System Integration - Configure build systems to properly handle asset paths and theme resources
  • Testing Strategies - Implement proper testing strategies for different theme and locale configurations

Common Use Cases

Enterprise Applications

  • Initialize comprehensive enterprise applications with consistent branding and theme management across multiple modules
  • Provide global configuration for complex business applications with different product lines and user roles
  • Establish foundation for white-label applications with customizable themes and branding

Multi-Tenant Platforms

  • Configure platform applications that serve different clients with unique branding and theme requirements
  • Implement SaaS applications with per-tenant theme customization and localization support
  • Build marketplace or portal applications with configurable design system settings

International Applications

  • Create globally accessible applications with proper internationalization and locale-specific asset management
  • Implement applications that dynamically switch between different languages and cultural preferences
  • Build applications that serve users across different regions with appropriate theme and content adaptations

Troubleshooting

Common Issues

Design Tokens Not Applied

Problem: CSS custom properties and design tokens are not available in child components or appear with default values.

Solution:

  • Ensure the PWC Root component is properly positioned at the top level of your application. Verify that the theme configuration is valid and that CSS custom properties are being distributed correctly. Check for CSS specificity issues that might override design tokens.

Theme Changes Not Reflecting

Problem: Changing the defaultTheme property doesn't update the application appearance or design tokens.

Solution:

  • Verify that the theme change is properly triggering component updates. Check that the theme configuration is valid and that all theme resources are available. Ensure that child components are using design tokens rather than hardcoded values.

Asset Path Issues

Problem: Icons, fonts, or other assets are not loading correctly or showing 404 errors.

Solution:

  • Verify that the assetPath configuration matches your deployment structure. Check that assets are properly bundled and available at the specified paths. Ensure that relative paths are resolved correctly in your deployment environment.

Locale Configuration Problems

Problem: Localization is not working correctly or locale-specific content is not displaying properly.

Solution:

  • Confirm that the locale configuration matches available locale resources. Check that locale files are properly loaded and accessible. Verify that the locale string format matches the expected format for your internationalization system.

Implementation Support

  • Global Configuration System - Comprehensive configuration management for themes, locales, products, and asset paths with automatic distribution
  • Design Token Distribution - Automatic CSS custom property injection and management for consistent styling across component hierarchies
  • Framework Integration - Seamless integration with React, Angular, and vanilla JavaScript applications with proper lifecycle management

Resources

Storybook Documentation

For comprehensive API documentation, interactive examples, and testing tools: 📖 View Complete API Documentation in Storybook →

For additional implementation guidance or framework-specific questions, consult the PWC Design System documentation or reach out to the component library team.