/** * CBTAPPS Design System - Multi-Tenant Theming * Version: 1.0.0 * * This file provides theming capabilities for multi-tenant * white-label customization in the CBTAPPS platform. */ /* ============================================ * TENANT THEME OVERRIDES * ============================================ */ /** * Tenant-specific themes are applied via data attributes. * Default theme is the standard CBTAPPS blue. * * Usage: * * * * */ /* Default Theme (already defined in tokens.css) */ :root { --tenant-primary-500: var(--color-primary-500); --tenant-primary-600: var(--color-primary-600); --tenant-secondary-500: var(--color-secondary-500); --tenant-accent-500: var(--color-accent-500); --tenant-logo-url: none; --tenant-favicon-url: none; --tenant-brand-name: 'CBTAPPS'; } /* ============================================ * THEME PRESETS * ============================================ */ /* Professional Blue (Default - already set) */ [data-theme="professional-blue"] { --tenant-primary-500: #0073e6; --tenant-primary-600: #005cb8; --tenant-secondary-500: #00bb9d; --tenant-accent-500: #ffb966; } /* Serene Green */ [data-theme="serene-green"] { --tenant-primary-500: #2d936c; --tenant-primary-600: #1f6b4d; --tenant-secondary-500: #4ecdc4; --tenant-accent-500: #ffd93d; } /* Warm Sunset */ [data-theme="warm-sunset"] { --tenant-primary-500: #e76f51; --tenant-primary-600: #c5533b; --tenant-secondary-500: #f4a261; --tenant-accent-500: #e9c46a; } /* Calm Lavender */ [data-theme="calm-lavender"] { --tenant-primary-500: #9b5de5; --tenant-primary-600: #7c3cb8; --tenant-secondary-500: #00bb9d; --tenant-accent-500: #f15bb5; } /* Ocean Depths */ [data-theme="ocean-depths"] { --tenant-primary-500: #006994; --tenant-primary-600: #004d6b; --tenant-secondary-500: #48cae4; --tenant-accent-500: #ffb966; } /* Forest Retreat */ [data-theme="forest-retreat"] { --tenant-primary-500: #2d6a4f; --tenant-primary-600: #1b4332; --tenant-secondary-500: #52b788; --tenant-accent-500: #d8f3dc; } /* Minimal Grayscale */ [data-theme="minimal-grayscale"] { --tenant-primary-500: #404040; --tenant-primary-600: #262626; --tenant-secondary-500: #737373; --tenant-accent-500: #a3a3a3; } /* ============================================ * APPLYING THEME TOKENS * ============================================ */ :root { /* Override color-primary with tenant theme */ --color-primary-500: var(--tenant-primary-500); --color-primary-600: var(--tenant-primary-600); --color-secondary-500: var(--tenant-secondary-500); --color-accent-500: var(--tenant-accent-500); } /* ============================================ * DYNAMIC THEME GENERATION * ============================================ */ /** * These CSS variables can be set dynamically via JavaScript * to support completely custom tenant themes without * modifying the CSS file. * * JavaScript API: * document.documentElement.style.setProperty('--tenant-primary-500', '#your-color'); * document.documentElement.style.setProperty('--tenant-secondary-500', '#your-color'); * document.documentElement.style.setProperty('--tenant-accent-500', '#your-color'); */ /* ============================================ * HIGH CONTRAST THEME (Accessibility) * ============================================ */ [data-theme="high-contrast"] { --tenant-primary-500: #0000ff; --tenant-primary-600: #00008b; --tenant-secondary-500: #008000; --tenant-accent-500: #ff8c00; /* Force high contrast text */ --color-text-primary: #000000; --color-text-secondary: #1a1a1a; --color-background-primary: #ffffff; --color-border-default: #000000; } [data-theme="high-contrast"][data-theme="dark"] { --tenant-primary-500: #00ffff; --tenant-primary-600: #00cccc; --tenant-secondary-500: #00ff00; --tenant-accent-500: #ffff00; /* Force high contrast dark mode */ --color-text-primary: #ffffff; --color-text-secondary: #f0f0f0; --color-background-primary: #000000; --color-border-default: #ffffff; } /* ============================================ * PRINT STYLES * ============================================ */ @media print { :root { /* Force light theme for printing */ --color-background-primary: #ffffff; --color-text-primary: #000000; --color-text-secondary: #1a1a1a; /* Remove shadows and backgrounds */ --shadow-xs: none; --shadow-sm: none; --shadow-base: none; --shadow-md: none; --shadow-lg: none; --shadow-xl: none; --shadow-2xl: none; } } /* ============================================ * TENANT-SPECIFIC OVERRIDES * ============================================ */ /** * Example tenant-specific customizations. * In production, these would be generated dynamically * based on tenant configuration stored in the database. */ /* Example: Acme Corporation */ [data-tenant="acme-corp"] { --tenant-primary-500: #0047ab; --tenant-primary-600: #003380; --tenant-secondary-500: #00a86b; --tenant-accent-500: #ff6347; --tenant-brand-name: 'Acme Wellness'; } /* Example: Therapy XYZ */ [data-tenant="therapy-xyz"] { --tenant-primary-500: #7b68ee; --tenant-primary-600: #6345ce; --tenant-secondary-500: #20b2aa; --tenant-accent-500: #ffa07a; --tenant-brand-name: 'TherapyXYZ'; } /* Example: Mindful Health */ [data-tenant="mindful-health"] { --tenant-primary-500: #3a7d44; --tenant-primary-600: #2d5f34; --tenant-secondary-500: #6b8e23; --tenant-accent-500: #daa520; --tenant-brand-name: 'Mindful Health'; }