secubox-openwrt/.codex/THEME_CONTEXT.md

Codex Context: Global Theme Implementation

FOR CODEX CODING AGENT

🎯 When Asked to Work on Theme/UI

If the user asks you to:

• “Create a global theme”
• “Unify the design”
• “Implement CyberMood theme”
• “Add multi-language support”
• “Make it look like the website”

IMPORTANT: Read DOCS/GLOBAL_THEME_SYSTEM.md first!

🎨 Quick Design Reference

Color Palette

/* Use these variables in all new code */
Primary: var(--cyber-accent-primary)      /* #667eea */
Secondary: var(--cyber-accent-secondary)  /* #06b6d4 */
Background: var(--cyber-bg-primary)       /* #0a0e27 */
Surface: var(--cyber-surface)             /* #252b4a */
Text: var(--cyber-text-primary)           /* #e2e8f0 */
Success: var(--cyber-success)             /* #10b981 */
Danger: var(--cyber-danger)               /* #ef4444 */

Typography

Display/Headers: var(--cyber-font-display)  /* Orbitron */
Body Text: var(--cyber-font-body)           /* Inter */
Code/Metrics: var(--cyber-font-mono)        /* JetBrains Mono */

Component Classes

<!-- Cards -->
<div class="cyber-card">
  <div class="cyber-card-header">
    <h3 class="cyber-card-title">Title</h3>
  </div>
  <div class="cyber-card-body">Content</div>
</div>

<!-- Buttons -->
<button class="cyber-btn cyber-btn--primary">Primary</button>
<button class="cyber-btn cyber-btn--secondary">Secondary</button>

<!-- Badges -->
<span class="cyber-badge cyber-badge--success">Active</span>

<!-- Forms -->
<input type="text" class="cyber-input" />
<select class="cyber-select"></select>

🧭 SecuBox Implementation Notes

Mirror the current SecuBox/System Hub styling (see luci-app-system-hub/htdocs/luci-static/resources/system-hub/common.css) until every module is fully migrated to cybermood.

Token Names & Stylesheets

• Modules that still import system-hub/common.css rely on the --sh-* variables. Map any new tokens to both namespaces (--sh-primary ↔ --cyber-accent-primary) so palettes stay aligned.
• Always inject secubox-theme/secubox-theme.css (or system-hub/common.css for legacy screens) before page-specific CSS. Never inline @import statements inside a view.

Navigation & Headers

• Tabs must use system-hub/nav.js (sh-nav-tabs, sh-nav-tab). This helper handles sticky positioning, scroll, and theme color updates—don’t recreate it with plain flex rows.
• Page headers follow the sh-page-header block: icon+title, subtitle paragraph, and right-aligned chips (sh-header-chip inside .sh-header-meta). Keep padding at 24px and gaps at 20px.

Cards, Grids, and Spacing

• Primary content belongs in .sh-card containers with .sh-card-header / .sh-card-body. Avoid custom borders/shadows: rely on the shared variables.
• Default grid recipe: grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) with gap: 20px. This matches .sh-info-grid, .sh-monitor-grid, and keeps breakpoint behavior predictable.
• Use .sh-btn, .sh-toggle, .sh-alert components; don’t invent new button or toggle markup unless the component library expands.

State Colors & Semantics

• Statuses draw from --sh-success, --sh-warning, --sh-danger; pair with emojis (✅, ⚠️, ❌) for quick scanning.
• Alerts and badges should include textual state labels (e.g., “Critical”, “Warning”) for accessibility. Use .sh-alert.error|warning|success.
• Loading states = .spinning indicator plus localized copy; Empty states = icon (32px), headline, muted description using var(--sh-text-secondary).

Localization & Copy

• Wrap user-visible strings with Theme.t() even if translations haven’t shipped; namespace keys by module (system_hub.diagnostics.generate_button).
• Emojis precede the text ('⚙️ ' + Theme.t(...)) so translators can drop them if culturally inappropriate.

🌍 Multi-Language Support

Usage Pattern

'require cybermood/theme as Theme';

// Initialize theme
Theme.init();

// Set language
Theme.setLanguage('fr');  // en, fr, de, es

// Translate strings
var title = Theme.t('dashboard.title');
var welcome = Theme.t('dashboard.welcome', { name: 'SecuBox' });

Translation Keys Structure

common.*        - Common UI strings (loading, error, success, etc.)
dashboard.*     - Dashboard-specific strings
modules.*       - Module names
settings.*      - Settings page strings
[module_name].* - Module-specific strings

🏗️ Creating New Components

Always Use Theme System

// ❌ DON'T: Create components manually
E('div', { style: 'background: #667eea; padding: 16px;' }, 'Content');

// ✅ DO: Use theme components
Theme.createCard({
  title: Theme.t('card.title'),
  icon: '🎯',
  content: E('div', {}, 'Content'),
  variant: 'primary'
});

Component Template

// Create a new themed component
renderMyComponent: function() {
  return E('div', { 'class': 'cyber-container' }, [
    // Always load theme CSS first
    E('link', {
      'rel': 'stylesheet',
      'href': L.resource('cybermood/cybermood.css')
    }),

    // Use theme components
    Theme.createCard({
      title: Theme.t('component.title'),
      icon: '⚡',
      content: this.renderContent(),
      variant: 'success'
    })
  ]);
}

📋 Implementation Prompts

Prompt 1: Create Global Theme Package

Create the luci-theme-cybermood package following the structure in
DOCS/GLOBAL_THEME_SYSTEM.md. Include:

1. Package structure with Makefile
2. CSS variable system (variables.css)
3. Core components (cards.css, buttons.css, forms.css)
4. Theme controller JavaScript (cybermood.js)
5. Default translations (en.json, fr.json)

Use the ready-to-use templates from the documentation.
Apply CyberMood design aesthetic (metallic, glass effects, neon accents).
Ensure dark theme as default with light and cyberpunk variants.

Prompt 2: Migrate Module to Global Theme

Migrate luci-app-[MODULE-NAME] to use the global CyberMood theme:

1. Remove module-specific CSS files (keep only module-unique styles)
2. Import cybermood.css in all views
3. Update all components to use cyber-* classes
4. Replace E() calls with Theme.create*() methods where appropriate
5. Replace hardcoded strings with Theme.t() translations
6. Test dark/light theme switching
7. Verify responsive design

Prompt 3: Add Multi-Language Support

Add multi-language support to [MODULE-NAME]:

1. Extract all user-facing strings to translation keys
2. Create translation files for en, fr, de, es
3. Use Theme.t() for all strings
4. Add language selector to settings
5. Test language switching

Prompt 4: Create New Themed Component

Create a new [COMPONENT-TYPE] component following CyberMood design:

1. Use CSS variables for all colors (var(--cyber-*))
2. Apply glass effect with backdrop-filter
3. Add hover animations (transform, glow effects)
4. Support dark/light themes
5. Make it responsive
6. Add to cybermood/components/

Prompt 5: Implement Responsive Dashboard

Create a responsive dashboard layout using CyberMood theme:

1. Use Theme.createCard for each section
2. Add quick stats, charts placeholders, alerts, and actions
3. Support breakpoints at 1440px, 1024px, 768px, 480px
4. Use CSS grid + flex combos from GLOBAL_THEME_SYSTEM.md
5. Ensure all copy uses Theme.t()

Always align new work with cybermood/theme.js, cybermood.css, and the prompts above.