Dev Tools

Ecosistema completo para organización y gestión de contenido con interfaces espaciales

@theme-dev-tools

Smart Styling Helpers

UxSmartStyleDirective (from runtime): auto-derives variables from present classes
- If an element has ux-bg-primary, it sets --ux-bg/--ux-bg-rgb/--ux-on-bg
- If it has ux-bg-primary ux-bg-secondary, it sets gradient vars
- Works with opacity and gradient utilities transparently

Usage:

<div uxSmartStyle class="ux-bg-primary ux-bg-gradient-to-r ux-primary-opacity-20">
  ...
  <!-- opacity and gradient adjust to primary automatically -->
</div>

Why a dedicated dev-tools library:

Keep production runtime lean; heavy inspectors and demos live here.
Provide visual debuggers, pickers, and editors for rapid iteration.

Components and tools:

ThemeDebuggerComponent: inspect variables, active theme, and live state.
ThemePickerComponent/ThemeSwitcherComponent: switch themes in-app.
ThemeEditorComponent: edit colors/typography and save themes.
ThemeUpdateWatcherComponent: observe and react to theme updates in dev.
GlassCardComponent: visual demo card for effects previews.

Use cases:

Design teams prototype and validate color/contrast live.
QA can verify CSS variables and duplicates via debugger.
Developers can create and persist default themes during setup.