CyberMind-FR
a0c8d65472
Created comprehensive theme package with: Core System: - CSS variable system (100+ design tokens) - Core styles (reset, typography, animations, utilities) - Responsive grid and dashboard layouts Components: - Cards with hover effects and variants (glass, success, warning, danger, primary) - Buttons (primary, secondary, danger, ghost) - Forms, tables, modals, tooltips, badges, alerts, navigation Theme Variants: - Dark mode (default) with gradient background - Light mode with clean white surfaces - Cyberpunk mode for futuristic aesthetic Multi-Language Support: - English (en), French (fr), German (de), Spanish (es) - 40+ translation keys covering common UI, dashboard, modules, settings, errors - Theme.t() method for parameter substitution JavaScript Theme Controller: - Theme.init() for initialization - Theme.apply() for theme switching - Theme.setLanguage() for i18n - Theme.createCard(), createButton(), createBadge() helpers - Theme.createPage() for full page composition Files Created: - 22 CSS files (core, components, layouts, themes) - 1 JavaScript controller (theme.js) - 4 translation files (all validated JSON) - 2 documentation files (README, USAGE) - 1 main bundle (secubox-theme.css + minified) - 1 Makefile (LuCI package definition) Usage: 'require secubox-theme/theme as Theme' See USAGE.md for complete API documentation. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com> |
||
|---|---|---|
| .. | ||
| htdocs/luci-static/resources/secubox-theme | ||
| Makefile | ||
| README.md | ||
| USAGE.md | ||
luci-theme-secubox
SecuBox's CyberMood design system packaged as a LuCI theme. Ships shared CSS variables, reusable components, responsive layouts, translations, and the browser-side theme controller used by every SecuBox module ('require secubox-theme/theme as Theme'). Install alongside SecuBox modules to ensure consistent styling, language switching, and light/dark/cyberpunk variants.
./feeds/luci/luci-theme-secubox/
├── Makefile
└── htdocs/luci-static/resources/secubox-theme/
├── core/ # Variables, reset, typography, animations, utilities
├── components/ # Buttons, cards, forms, tables, badges, alerts, etc.
├── layouts/ # Dashboard/grid/responsive helpers
├── themes/ # Dark (default), light, cyberpunk variants
├── i18n/ # en/fr/de/es JSON dictionaries
├── secubox-theme.css
├── secubox-theme.min.css
└── theme.js # Theme controller (init/apply/t/Theme.create*)
Usage
'use strict';
'require secubox-theme/theme as Theme';
return view.extend({
load: function() {
return Theme.init();
},
render: function() {
Theme.apply('dark'); // dark, light, cyberpunk
Theme.setLanguage('en'); // en, fr, de, es
return Theme.createPage({
title: Theme.t('dashboard.title'),
cards: [
Theme.createCard({
title: Theme.t('dashboard.overview'),
icon: '🚀',
content: this.renderOverview()
})
]
});
}
});
See DOCS/GLOBAL_THEME_SYSTEM.md for the full design reference. This package only contains the shared assets; each module is still responsible for importing secubox-theme.css (or .min.css) and using the exported helper methods.