ezfw-core 1.0.84 → 1.0.85

package/core/STYLES_IMPLEMENTATION.md

@@ -0,0 +1,194 @@
+# EzStyles - Sistema de Override de Estilos
+
+## Resumen
+
+Sistema para permitir override de CSS variables por componente sin modificar el framework.
+El usuario define variantes de estilo en `ez.styles.config.js` y las usa directamente como `eztype`.
+
+## API Final
+
+```javascript
+// ez.styles.config.js (root del proyecto)
+export default {
+    // Variables globales → se aplican a :root
+    theme: {
+        '--ez-primary': '#8b5cf6',
+        '--ez-radius-md': '12px',
+    },
+
+    // Variantes de componentes → se aplican inline al elemento
+    EzButton: {
+        ToolButton: {
+            '--ez-primary': '#10b981',
+            '--ez-primary-hover': '#059669',
+        },
+        CancelButton: {
+            '--ez-primary': '#ef4444',
+        },
+    },
+
+    EzInput: {
+        SearchInput: {
+            '--ez-radius-md': '9999px',
+        },
+    },
+};
+```
+
+```javascript
+// Uso - directo como eztype
+{ eztype: 'ToolButton', text: 'Tool' }      // ← No necesita variant prop
+{ eztype: 'CancelButton', text: 'Cancel' }
+{ eztype: 'SearchInput', placeholder: 'Buscar...' }
+
+// También funciona el componente base
+{ eztype: 'EzButton', text: 'Normal' }
+```
+
+## Decisiones de Diseño
+
+### ¿Por qué no `variant` prop?
+- Más verboso: `{ eztype: 'EzButton', variant: 'ToolButton' }`
+- El usuario pidió poder usar `eztype: 'ToolButton'` directamente
+
+### ¿Por qué solo CSS variables, no CSS crudo?
+- Los componentes ya usan variables del theme (`--ez-primary`, etc.)
+- Cambiar la variable cambia el estilo sin tocar CSS
+- Más simple, menos propenso a errores
+
+### ¿Por qué config síncrono?
+- Los aliases deben existir ANTES de que el loader intente resolver componentes
+- El config es pequeño (~1-2KB), impacto mínimo
+- "Mal necesario" aceptado por el usuario
+
+### Separación de registries
+- `ez._registry` → Componentes reales (archivos .js)
+- `ez.styles` → Variantes de estilo (virtuales, solo CSS vars)
+- No mezclamos "componentes fake" en el registry principal
+
+## Flujo de Resolución
+
+```
+1. Usuario escribe: { eztype: 'ToolButton' }
+                            ↓
+2. loader.resolve('ToolButton')
+                            ↓
+3. ¿ez.styles.getVariant('ToolButton')?
+   → SÍ: { base: 'EzButton', vars: { '--ez-primary': '#10b981' } }
+                            ↓
+4. loader.load('EzButton')  ← lazy load normal del componente base
+                            ↓
+5. renderer crea instancia de EzButton
+                            ↓
+6. renderer aplica vars inline: style="--ez-primary: #10b981;"
+                            ↓
+7. Elemento final con estilos custom
+```
+
+## Consideraciones SSR
+
+### Theme variables
+- NO usar `document.documentElement.style.setProperty()` en SSR
+- Generar `<style id="ez-theme-vars">:root { ... }</style>` en el HTML
+
+### Inline vars (variantes)
+- Funcionan sin cambios: `style="--ez-primary: #10b981;"` se serializa normal
+
+### Aliases en SSR
+- El config debe cargarse antes del render SSR
+- Vite plugin debe procesar `ez.styles.config.js` en buildStart
+
+### Hydration
+- Cliente debe importar mismo config síncronamente
+- Evita mismatch entre server HTML y client render
+
+---
+
+## TODO - Implementación
+
+### Fase 1: Core (styles.ts) ✅
+- [x] Crear `ez/core/styles.ts`
+- [x] Implementar clase `EzStyles`:
+  ```typescript
+  class EzStyles {
+      private variants: Map<string, { base: string; vars: Record<string, string> }>;
+      private theme: Record<string, string>;
+
+      define(config): void        // Procesa el config
+      getVariant(name): Variant   // Retorna variante o undefined
+      getTheme(): Record          // Retorna theme vars
+      applyTheme(): void          // Aplica a :root (solo cliente)
+  }
+  ```
+- [x] Exportar instancia singleton
+
+### Fase 2: Integración ez.ts ✅
+- [x] Importar `EzStyles` en `ez.ts`
+- [x] Exponer `ez.styles` (instancia)
+- [x] Exponer `ez.defineStyles(config)` como shorthand
+
+### Fase 3: Integración loader.ts ✅
+- [x] Modificar método de resolución
+- [x] Antes de buscar archivo, checar `ez.styles.getVariant(name)`
+- [x] Si es variante: retornar `{ component: base, styleVars: vars }`
+- [x] Si no: continuar flujo normal de lazy loading
+- [x] Pasar `styleVars` al renderer via `_resolvedStyleVariants` Map
+- [x] Método `getStyleVars(eztype)` para obtener vars de una variante
+
+### Fase 4: Integración renderer.ts ✅
+- [x] Recibir `styleVars` del loader
+- [x] Después de crear elemento, aplicar vars como inline styles:
+  ```typescript
+  if (styleVars) {
+      for (const [key, value] of Object.entries(styleVars)) {
+          el.style.setProperty(key, value);
+      }
+  }
+  ```
+
+### Fase 5: SSR Support
+- [ ] Modificar `StaticHtmlRenderer.ts` o Vite plugin
+- [ ] Cargar `ez.styles.config.js` en buildStart
+- [ ] Generar `<style>` tag con theme vars en HTML output
+- [ ] Asegurar que variantes se resuelven correctamente en SSR
+
+### Fase 6: Template del config ✅
+- [x] Crear template `template/ez.styles.config.js`
+- [x] Incluir todos los componentes (vacíos)
+- [x] Incluir comentario con TODAS las variables disponibles del theme
+- [ ] El CLI `npx ezfw init` debería copiar este template
+
+### Fase 7: Documentación
+- [ ] Documentar en CLAUDE.md o docs
+- [ ] Ejemplos de uso
+- [ ] Lista de variables por componente
+
+---
+
+## Estado Actual
+
+**Fase:** Implementación client-side completada
+**Último paso:** Crear template `ez.styles.config.js`
+**Siguiente paso:** SSR support (Fase 5) o publicar versión actual
+
+---
+
+## Archivos a Modificar/Crear
+
+| Archivo | Acción | Descripción |
+|---------|--------|-------------|
+| `ez/core/styles.ts` | CREAR | Clase EzStyles |
+| `ez/core/ez.ts` | MODIFICAR | Exponer ez.styles |
+| `ez/core/loader.ts` | MODIFICAR | Checar variantes antes de load |
+| `ez/core/renderer.ts` | MODIFICAR | Aplicar styleVars inline |
+| `islands/StaticHtmlRenderer.ts` | MODIFICAR | SSR support |
+| `islands/ViteIslandsPlugin.ts` | MODIFICAR | Cargar config en build |
+
+---
+
+## Notas Adicionales
+
+- El config NO puede ser lazy loaded - debe estar en bundle inicial
+- Las variantes NO son componentes reales, no tienen archivo .js
+- El theme se aplica a :root, las variantes se aplican inline (mayor especificidad)
+- Inline styles con CSS vars funcionan: `style="--ez-primary: red"` override :root

package/core/ez.ts

@@ -6,6 +6,7 @@ import { EzState, ControllerDefinition, GridControllerDefinition, GridBehaviorDe
 import { EzModel, ModelDefinition, Model } from './EzModel.js';
 import { EzServices } from './services.js';
 import { EzEventBus, EventHandler } from './eventBus.js';
+import { ezStyles, StylesConfig, StyleVariant } from './styles.js';
 import { deepSignal } from 'deepsignal';
 import * as EzGridQuery from '../components/grid/query/EzGridQuery.js';
 import dayjs from 'dayjs';
@@ -249,6 +250,19 @@ export interface EzFramework {
     truncate(str: string, length: number, suffix?: string): string;
     pluralize(count: number, singular: string, plural?: string): string;
     utils: typeof EzUtils;
+
+    // Style overrides system
+    styles: {
+        define(config: StylesConfig): void;
+        getVariant(name: string): StyleVariant | undefined;
+        hasVariant(name: string): boolean;
+        getTheme(): Record<string, string>;
+        applyTheme(): void;
+        getThemeStyleTag(): string;
+        list(): Map<string, StyleVariant>;
+        isInitialized(): boolean;
+    };
+    defineStyles(config: StylesConfig): void;
 }
 
 const ez: EzFramework = {
@@ -740,7 +754,13 @@ const ez: EzFramework = {
     capitalizeWords,
     truncate,
     pluralize,
-    utils: EzUtils
+    utils: EzUtils,
+
+    // Style overrides system
+    styles: ezStyles,
+    defineStyles(config: StylesConfig): void {
+        ezStyles.define(config);
+    }
 };
 
 // Initialize framework

package/core/loader.ts

@@ -1,4 +1,5 @@
 import { EzError } from './EzError.js';
+import { ezStyles, StyleVariant } from './styles.js';
 
 export interface ModuleMeta {
     path: string;
@@ -109,6 +110,8 @@ export class EzLoader {
     };
     private _retryAttempts: Map<string, number> = new Map();
     private _failedModules: Set<string> = new Set();
+    // Track style variants that have been resolved (name -> styleVars)
+    private _resolvedStyleVariants: Map<string, Record<string, string>> = new Map();
 
     constructor(ez: EzInstance) {
         this.ez = ez;
@@ -331,6 +334,22 @@ export class EzLoader {
     async resolveEzType(eztype: string): Promise<void> {
         if (this.ez._registry[eztype]) return;
 
+        // Check if this is a style variant first
+        const styleVariant = ezStyles.getVariant(eztype);
+        if (styleVariant) {
+            // Resolve the base component
+            await this.resolveEzType(styleVariant.base);
+
+            // Register variant as alias to base component
+            const baseComponent = this.ez._registry[styleVariant.base];
+            if (baseComponent) {
+                this.ez._registry[eztype] = baseComponent;
+                // Store the styleVars for this variant
+                this._resolvedStyleVariants.set(eztype, styleVariant.vars);
+            }
+            return;
+        }
+
         const lowerEztype = eztype.toLowerCase();
         const breakpoint = this.ez._currentBreakpoint;
 
@@ -418,6 +437,21 @@ export class EzLoader {
         return this.ez._internal.variants[componentName] || [];
     }
 
+    /**
+     * Get style vars for a resolved style variant
+     * Returns the CSS variables to apply inline, or null if not a style variant
+     */
+    getStyleVars(eztype: string): Record<string, string> | null {
+        return this._resolvedStyleVariants.get(eztype) || null;
+    }
+
+    /**
+     * Check if an eztype is a style variant
+     */
+    isStyleVariant(eztype: string): boolean {
+        return this._resolvedStyleVariants.has(eztype) || ezStyles.hasVariant(eztype);
+    }
+
     async resolveController(name: string | object | null): Promise<unknown> {
         if (!name) return null;
 

package/core/renderer.ts

@@ -171,6 +171,7 @@ interface EzInstance {
         loadWithPriority(name: string, priority: string): Promise<void>;
         getCurrentModulePath(): string | null;
         hasVariants(name: string): boolean;
+        getStyleVars(eztype: string): Record<string, string> | null;
     };
     getController(name: string): Promise<ControllerInstance>;
     getStore(name: string): unknown;
@@ -1066,6 +1067,16 @@ export class EzRenderer {
             this._setupRepaintEffect(el, eztype, config, instance);
         }
 
+        // Apply style variant CSS variables if this is a style variant
+        if (el instanceof HTMLElement && eztype) {
+            const styleVars = this.ez._loader?.getStyleVars(eztype);
+            if (styleVars) {
+                for (const [key, value] of Object.entries(styleVars)) {
+                    el.style.setProperty(key, value);
+                }
+            }
+        }
+
         return el;
     }
 

package/core/styles.ts

@@ -0,0 +1,137 @@
+/**
+ * EzStyles - Sistema de Override de Estilos
+ *
+ * Permite definir variantes de estilo para componentes del framework
+ * sin modificar el código fuente. Las variantes se definen en
+ * ez.styles.config.js y se usan directamente como eztype.
+ *
+ * @see STYLES_IMPLEMENTATION.md para documentación completa
+ */
+
+export interface StyleVariant {
+    base: string;
+    vars: Record<string, string>;
+}
+
+export interface StylesConfig {
+    theme?: Record<string, string>;
+    [component: string]: Record<string, Record<string, string> | string> | undefined;
+}
+
+class EzStyles {
+    private variants: Map<string, StyleVariant> = new Map();
+    private theme: Record<string, string> = {};
+    private _initialized = false;
+
+    /**
+     * Define estilos desde el config
+     *
+     * @example
+     * ez.defineStyles({
+     *     theme: { '--ez-primary': '#8b5cf6' },
+     *     EzButton: {
+     *         ToolButton: { '--ez-primary': '#10b981' }
+     *     }
+     * });
+     */
+    define(config: StylesConfig): void {
+        // Theme → guardar y aplicar a :root
+        if (config.theme) {
+            this.theme = { ...this.theme, ...config.theme };
+            this.applyTheme();
+        }
+
+        // Procesar variantes de componentes
+        for (const [component, variants] of Object.entries(config)) {
+            if (component === 'theme' || !variants) continue;
+
+            for (const [variantName, vars] of Object.entries(variants)) {
+                // Solo procesar si es un objeto (variante), no string
+                if (typeof vars === 'object') {
+                    this.variants.set(variantName, {
+                        base: component,
+                        vars: vars as Record<string, string>
+                    });
+                }
+            }
+        }
+
+        this._initialized = true;
+    }
+
+    /**
+     * Obtiene una variante por nombre
+     *
+     * @returns La variante o undefined si no existe
+     */
+    getVariant(name: string): StyleVariant | undefined {
+        return this.variants.get(name);
+    }
+
+    /**
+     * Verifica si un nombre es una variante de estilo
+     */
+    hasVariant(name: string): boolean {
+        return this.variants.has(name);
+    }
+
+    /**
+     * Obtiene las variables del theme
+     */
+    getTheme(): Record<string, string> {
+        return { ...this.theme };
+    }
+
+    /**
+     * Aplica las variables del theme a :root
+     * Solo funciona en cliente (browser)
+     */
+    applyTheme(): void {
+        if (typeof document === 'undefined') return;
+
+        const root = document.documentElement;
+        for (const [key, value] of Object.entries(this.theme)) {
+            root.style.setProperty(key, value);
+        }
+    }
+
+    /**
+     * Genera CSS string para SSR
+     * Retorna el contenido para un <style> tag
+     */
+    getThemeStyleTag(): string {
+        if (Object.keys(this.theme).length === 0) return '';
+
+        const vars = Object.entries(this.theme)
+            .map(([key, value]) => `    ${key}: ${value};`)
+            .join('\n');
+
+        return `:root {\n${vars}\n}`;
+    }
+
+    /**
+     * Lista todas las variantes registradas (para debug)
+     */
+    list(): Map<string, StyleVariant> {
+        return new Map(this.variants);
+    }
+
+    /**
+     * Verifica si el sistema fue inicializado
+     */
+    isInitialized(): boolean {
+        return this._initialized;
+    }
+
+    /**
+     * Limpia todas las variantes y theme (para testing)
+     */
+    reset(): void {
+        this.variants.clear();
+        this.theme = {};
+        this._initialized = false;
+    }
+}
+
+// Singleton
+export const ezStyles = new EzStyles();

package/islands/runtime.ts

@@ -137,8 +137,8 @@ async function hydrateIsland(instance: IslandInstance): Promise<void> {
     const startTime = performance.now();
 
     try {
-        // Load the island module (plain object export)
-        const componentDef = await loadIslandModule(instance.name) as IslandDefinition | null;
+        // Load the island module (plain object export or class component)
+        const componentDef = await loadIslandModule(instance.name) as IslandDefinition | (new () => unknown) | null;
 
         if (!componentDef) {
             console.error(`[Ez Islands] Failed to load module: ${instance.name}`);
@@ -158,9 +158,10 @@ async function hydrateIsland(instance: IslandInstance): Promise<void> {
         instance.element.classList.remove('ez-island-loading');
 
         // Check if it's a class component (has prototype with render method)
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
         const isClassComponent = typeof componentDef === 'function' &&
-            componentDef.prototype &&
-            typeof componentDef.prototype.render === 'function';
+            (componentDef as any).prototype &&
+            typeof (componentDef as any).prototype.render === 'function';
 
         if (isClassComponent) {
             // Class components: register directly, no preparation needed

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ezfw-core",
-  "version": "1.0.84",
+  "version": "1.0.85",
   "description": "Ez Framework - A declarative component framework for building modern web applications",
   "type": "module",
   "main": "./core/ez.ts",

package/template/ez.styles.config.js

@@ -0,0 +1,315 @@
+/**
+ * Ez Framework - Style Overrides Configuration
+ *
+ * This file allows you to customize component styles without modifying the framework.
+ * Define variants by specifying CSS variables that will be applied inline to elements.
+ *
+ * Usage:
+ * 1. Define variants under each component name
+ * 2. Use the variant name directly as eztype: { eztype: 'ToolButton', text: 'Tool' }
+ *
+ * @see https://ezfw.dev/docs/styles for full documentation
+ */
+
+export default {
+    // ================================================================
+    // Global Theme Variables
+    // Applied to :root - affects all components
+    // ================================================================
+    theme: {
+        // '--ez-primary': '#8b5cf6',
+        // '--ez-radius-md': '12px',
+    },
+
+    // ================================================================
+    // Component Variants
+    // Each variant becomes usable as an eztype
+    // ================================================================
+
+    // Buttons
+    EzButton: {
+        // Example:
+        // ToolButton: {
+        //     '--ez-btn-primary-bg': '#10b981',
+        //     '--ez-btn-primary-bg-hover': '#059669',
+        // },
+        // DangerButton: {
+        //     '--ez-btn-primary-bg': '#ef4444',
+        //     '--ez-btn-primary-bg-hover': '#dc2626',
+        // },
+    },
+
+    EzButtonGroup: {
+        //
+    },
+
+    // Inputs & Forms
+    EzInput: {
+        // Example:
+        // SearchInput: {
+        //     '--ez-radius-md': '9999px',
+        // },
+    },
+
+    EzTextarea: {
+        //
+    },
+
+    EzSelect: {
+        //
+    },
+
+    EzCheckbox: {
+        //
+    },
+
+    EzRadio: {
+        //
+    },
+
+    EzSwitch: {
+        //
+    },
+
+    EzDatePicker: {
+        //
+    },
+
+    EzTimePicker: {
+        //
+    },
+
+    EzPicker: {
+        //
+    },
+
+    EzDropdown: {
+        //
+    },
+
+    EzForm: {
+        //
+    },
+
+    // Layout & Containers
+    EzCard: {
+        //
+    },
+
+    EzPanel: {
+        //
+    },
+
+    EzPaper: {
+        //
+    },
+
+    EzTabPanel: {
+        //
+    },
+
+    EzDialog: {
+        //
+    },
+
+    EzDrawer: {
+        //
+    },
+
+    // Data Display
+    EzGrid: {
+        //
+    },
+
+    EzDataView: {
+        //
+    },
+
+    EzKanban: {
+        //
+    },
+
+    EzTree: {
+        //
+    },
+
+    EzChart: {
+        //
+    },
+
+    // Feedback & Status
+    EzBadge: {
+        //
+    },
+
+    EzAvatar: {
+        //
+    },
+
+    EzSkeleton: {
+        //
+    },
+
+    EzTooltip: {
+        //
+    },
+
+    EzActivityFeed: {
+        //
+    },
+
+    // Organization
+    EzOrgChart: {
+        //
+    },
+};
+
+// ================================================================
+// AVAILABLE CSS VARIABLES REFERENCE
+// ================================================================
+// Copy any of these variables into your variants to override them.
+//
+// ======================== BRAND COLORS ========================
+// --ez-primary              Primary brand color
+// --ez-primary-hover        Primary hover state
+// --ez-primary-active       Primary active/pressed state
+// --ez-primary-light        Light primary (for backgrounds)
+// --ez-primary-subtle       Subtle primary tint
+// --ez-secondary            Secondary brand color
+// --ez-secondary-hover      Secondary hover state
+// --ez-accent               Accent color for special elements
+// --ez-accent-hover         Accent hover state
+//
+// ===================== SEMANTIC COLORS =======================
+// --ez-success              Success state color
+// --ez-success-hover        Success hover state
+// --ez-success-light        Light success background
+// --ez-warning              Warning state color
+// --ez-warning-hover        Warning hover state
+// --ez-warning-light        Light warning background
+// --ez-danger               Danger/error state color
+// --ez-danger-hover         Danger hover state
+// --ez-danger-light         Light danger background
+// --ez-info                 Info state color
+// --ez-info-hover           Info hover state
+// --ez-info-light           Light info background
+//
+// ===================== SURFACE COLORS ========================
+// --ez-bg                   Main page background
+// --ez-surface              Cards, panels background
+// --ez-surface-hover        Surface hover state
+// --ez-surface-active       Surface active/pressed state
+// --ez-overlay              Modal/dialog overlay
+//
+// ======================== TEXT COLORS ========================
+// --ez-text                 Primary text color
+// --ez-text-secondary       Secondary text color
+// --ez-text-tertiary        Tertiary/subtle text
+// --ez-text-muted           Muted/disabled text
+// --ez-text-placeholder     Input placeholder text
+// --ez-text-inverse         Inverse text (on dark bg)
+// --ez-text-on-primary      Text on primary colored bg
+//
+// ======================= BORDER COLORS =======================
+// --ez-border               Default border color
+// --ez-border-light         Subtle/light border
+// --ez-border-strong        Strong/emphasis border
+// --ez-border-focus         Focus ring color
+//
+// ====================== INPUT VARIABLES ======================
+// --ez-input-bg             Input background
+// --ez-input-bg-disabled    Disabled input background
+// --ez-input-border         Input border color
+// --ez-input-border-hover   Input border on hover
+// --ez-input-border-focus   Input border on focus
+// --ez-input-text           Input text color
+// --ez-input-placeholder    Input placeholder color
+// --ez-input-shadow-focus   Input focus shadow
+//
+// ====================== BUTTON VARIABLES =====================
+// --ez-btn-primary-bg       Primary button background
+// --ez-btn-primary-bg-hover Primary button hover bg
+// --ez-btn-primary-text     Primary button text
+// --ez-btn-primary-shadow   Primary button shadow
+// --ez-btn-secondary-bg     Secondary button background
+// --ez-btn-secondary-bg-hover Secondary button hover bg
+// --ez-btn-secondary-text   Secondary button text
+// --ez-btn-secondary-border Secondary button border
+// --ez-btn-ghost-bg         Ghost button background
+// --ez-btn-ghost-bg-hover   Ghost button hover bg
+// --ez-btn-ghost-text       Ghost button text
+// --ez-btn-danger-bg        Danger button background
+// --ez-btn-danger-bg-hover  Danger button hover bg
+// --ez-btn-danger-text      Danger button text
+//
+// ======================= TABLE/GRID ==========================
+// --ez-table-header-bg      Table header background
+// --ez-table-header-text    Table header text
+// --ez-table-row-bg         Table row background
+// --ez-table-row-alt-bg     Alternate row background
+// --ez-table-row-hover      Row hover background
+// --ez-table-row-selected   Selected row background
+// --ez-table-border         Table border color
+//
+// ========================= CARDS =============================
+// --ez-card-bg              Card background
+// --ez-card-border          Card border color
+// --ez-card-shadow          Card box shadow
+// --ez-card-shadow-hover    Card hover shadow
+// --ez-card-header-bg       Card header background
+//
+// ========================= BADGES ============================
+// --ez-badge-primary-bg     Primary badge background
+// --ez-badge-primary-text   Primary badge text
+// --ez-badge-secondary-bg   Secondary badge background
+// --ez-badge-secondary-text Secondary badge text
+// --ez-badge-success-bg     Success badge background
+// --ez-badge-success-text   Success badge text
+// --ez-badge-warning-bg     Warning badge background
+// --ez-badge-warning-text   Warning badge text
+// --ez-badge-danger-bg      Danger badge background
+// --ez-badge-danger-text    Danger badge text
+//
+// ======================== DROPDOWN ===========================
+// --ez-dropdown-bg          Dropdown background
+// --ez-dropdown-border      Dropdown border
+// --ez-dropdown-shadow      Dropdown box shadow
+// --ez-dropdown-item-hover  Dropdown item hover bg
+// --ez-dropdown-divider     Dropdown divider color
+//
+// ========================= DIALOG ============================
+// --ez-dialog-bg            Dialog background
+// --ez-dialog-border        Dialog border
+// --ez-dialog-shadow        Dialog box shadow
+// --ez-dialog-header-bg     Dialog header background
+// --ez-dialog-footer-bg     Dialog footer background
+//
+// ======================== TOOLTIP ============================
+// --ez-tooltip-bg           Tooltip background
+// --ez-tooltip-text         Tooltip text color
+// --ez-tooltip-shadow       Tooltip box shadow
+//
+// ========================= SPACING ===========================
+// --ez-radius-sm            Small border radius (4px)
+// --ez-radius-md            Medium border radius (8px)
+// --ez-radius-lg            Large border radius (12px)
+// --ez-radius-xl            Extra large radius (16px)
+// --ez-radius-full          Full/pill radius (9999px)
+//
+// ======================= TYPOGRAPHY ==========================
+// --ez-font-family          Base font family
+// --ez-font-mono            Monospace font family
+// --ez-text-xs              Extra small text (0.75rem)
+// --ez-text-sm              Small text (0.875rem)
+// --ez-text-base            Base text (1rem)
+// --ez-text-lg              Large text (1.125rem)
+// --ez-text-xl              Extra large text (1.25rem)
+//
+// ======================== SHADOWS ============================
+// --ez-shadow-sm            Small shadow
+// --ez-shadow-md            Medium shadow
+// --ez-shadow-lg            Large shadow
+// --ez-shadow-xl            Extra large shadow
+// --ez-focus-ring           Focus ring shadow
+//
+// ================================================================