ezfw-core 1.0.0

package/themes/ez-theme.scss

@@ -0,0 +1,179 @@
+// ==========================================================
+// Ez Framework - Theme System (Ocean Depths)
+// ==========================================================
+// Primary: Lyons Blue (#005871) + Limpet Shell (#98DDDF)
+// ==========================================================
+
+:root,
+[data-ez-theme="ocean-depths"] {
+    // Core Brand Colors
+    --ez-primary: #005871;
+    --ez-primary-hover: #004a5f;
+    --ez-primary-light: #e0f4f7;
+    --ez-primary-dark: #003d52;
+
+    --ez-secondary: #98DDDF;
+    --ez-secondary-hover: #7fd0d3;
+
+    --ez-accent: #2E5283;
+    --ez-accent-hover: #234169;
+
+    // Semantic Colors
+    --ez-success: #059669;
+    --ez-success-light: #d1fae5;
+    --ez-success-dark: #065f46;
+
+    --ez-warning: #E3BD33;
+    --ez-warning-light: #fef9e7;
+    --ez-warning-dark: #92400e;
+
+    --ez-danger: #dc2626;
+    --ez-danger-light: #fee2e2;
+    --ez-danger-dark: #991b1b;
+
+    --ez-info: #0891b2;
+    --ez-info-light: #cffafe;
+    --ez-info-dark: #155e75;
+
+    // Surface Colors
+    --ez-surface-primary: #f0f9fa;
+    --ez-surface-secondary: #ffffff;
+    --ez-surface-tertiary: #f8fcfc;
+    --ez-surface-elevated: #ffffff;
+    --ez-surface-overlay: rgba(0, 61, 82, 0.5);
+
+    // Text Colors
+    --ez-text-primary: #003d52;
+    --ez-text-secondary: #4a7c8c;
+    --ez-text-tertiary: #6b9aa8;
+    --ez-text-inverse: #ffffff;
+    --ez-text-on-primary: #ffffff;
+
+    // Border Colors
+    --ez-border-primary: #c8e6eb;
+    --ez-border-secondary: #e0f0f2;
+    --ez-border-focus: #005871;
+
+    // Sidebar
+    --ez-sidebar-bg: #003d52;
+    --ez-sidebar-text: #ffffff;
+    --ez-sidebar-text-muted: #7fb8c4;
+    --ez-sidebar-hover: rgba(152, 221, 223, 0.15);
+    --ez-sidebar-active: #005871;
+    --ez-sidebar-active-text: #98DDDF;
+    --ez-sidebar-border: #004a5f;
+
+    // Header
+    --ez-header-bg: #ffffff;
+    --ez-header-text: #003d52;
+    --ez-header-border: #e0f0f2;
+
+    // Cards & Panels
+    --ez-card-bg: #ffffff;
+    --ez-card-border: #e0f0f2;
+    --ez-card-shadow: 0 1px 3px rgba(0, 88, 113, 0.08);
+    --ez-card-header-bg: #f8fcfc;
+
+    // Inputs & Forms
+    --ez-input-bg: #ffffff;
+    --ez-input-border: #c8e6eb;
+    --ez-input-border-focus: #005871;
+    --ez-input-text: #003d52;
+    --ez-input-placeholder: #6b9aa8;
+
+    // Tables & Grids
+    --ez-table-header-bg: #f0f9fa;
+    --ez-table-header-text: #003d52;
+    --ez-table-row-bg: #ffffff;
+    --ez-table-row-alt-bg: #f8fcfc;
+    --ez-table-row-hover: #e8f6f7;
+    --ez-table-border: #e0f0f2;
+    --ez-table-row-selected: #cff3f5;
+
+    // Typography & Spacing
+    --ez-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+    --ez-font-mono: 'Monaco', 'Menlo', 'Consolas', monospace;
+
+    --ez-radius-sm: 4px;
+    --ez-radius-md: 6px;
+    --ez-radius-lg: 8px;
+    --ez-radius-xl: 12px;
+    --ez-radius-full: 9999px;
+
+    --ez-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
+    --ez-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07);
+    --ez-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
+
+    --ez-transition-fast: 0.1s ease;
+    --ez-transition-base: 0.15s ease;
+    --ez-transition-slow: 0.3s ease;
+}
+
+// Dark Mode
+[data-ez-theme="ocean-depths-dark"] {
+    --ez-surface-primary: #0a1a1f;
+    --ez-surface-secondary: #0f252c;
+    --ez-surface-tertiary: #142f38;
+    --ez-surface-elevated: #1a3a45;
+    --ez-surface-overlay: rgba(0, 0, 0, 0.7);
+
+    --ez-text-primary: #e8f6f7;
+    --ez-text-secondary: #98DDDF;
+    --ez-text-tertiary: #6b9aa8;
+    --ez-text-inverse: #003d52;
+
+    --ez-border-primary: #1a3a45;
+    --ez-border-secondary: #0f252c;
+
+    --ez-sidebar-bg: #061218;
+    --ez-sidebar-border: #0f252c;
+
+    --ez-header-bg: #0f252c;
+    --ez-header-border: #1a3a45;
+
+    --ez-card-bg: #0f252c;
+    --ez-card-border: #1a3a45;
+    --ez-card-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
+    --ez-card-header-bg: #142f38;
+
+    --ez-input-bg: #0f252c;
+    --ez-input-border: #1a3a45;
+    --ez-input-text: #e8f6f7;
+    --ez-input-placeholder: #4a7c8c;
+
+    --ez-table-header-bg: #0f252c;
+    --ez-table-header-text: #98DDDF;
+    --ez-table-row-bg: #0f252c;
+    --ez-table-row-alt-bg: #142f38;
+    --ez-table-row-hover: #1a3a45;
+    --ez-table-border: #1a3a45;
+    --ez-table-row-selected: rgba(152, 221, 223, 0.15);
+}
+
+// Utility Classes
+.ez-text-primary { color: var(--ez-text-primary); }
+.ez-text-secondary { color: var(--ez-text-secondary); }
+.ez-text-tertiary { color: var(--ez-text-tertiary); }
+.ez-text-inverse { color: var(--ez-text-inverse); }
+
+.ez-bg-primary { background-color: var(--ez-primary); color: var(--ez-text-on-primary); }
+.ez-bg-secondary { background-color: var(--ez-secondary); }
+.ez-bg-surface { background-color: var(--ez-surface-primary); }
+
+.ez-bg-success { background-color: var(--ez-success); color: white; }
+.ez-bg-success-light { background-color: var(--ez-success-light); color: var(--ez-success-dark); }
+.ez-bg-warning { background-color: var(--ez-warning); color: white; }
+.ez-bg-warning-light { background-color: var(--ez-warning-light); color: var(--ez-warning-dark); }
+.ez-bg-danger { background-color: var(--ez-danger); color: white; }
+.ez-bg-danger-light { background-color: var(--ez-danger-light); color: var(--ez-danger-dark); }
+
+.ez-border { border: 1px solid var(--ez-border-primary); }
+.ez-shadow-sm { box-shadow: var(--ez-shadow-sm); }
+.ez-shadow-md { box-shadow: var(--ez-shadow-md); }
+.ez-shadow-lg { box-shadow: var(--ez-shadow-lg); }
+
+.ez-rounded-sm { border-radius: var(--ez-radius-sm); }
+.ez-rounded-md { border-radius: var(--ez-radius-md); }
+.ez-rounded-lg { border-radius: var(--ez-radius-lg); }
+.ez-rounded-xl { border-radius: var(--ez-radius-xl); }
+.ez-rounded-full { border-radius: var(--ez-radius-full); }

package/themes/nature-fresh.scss

@@ -0,0 +1,169 @@
+// ==========================================================
+// Ez Framework - Nature Fresh Theme
+// ==========================================================
+// An eco-friendly, fresh palette inspired by nature.
+// Primary: Kashmir (#6F8D6A) + White Grape (#A6BE47)
+// ==========================================================
+
+// Theme Name: nature-fresh
+// Author: Ez Framework
+// Version: 1.0.0
+// Status: Reserved for future implementation
+
+[data-ez-theme="nature-fresh"] {
+    // ======================================================
+    // Core Brand Colors
+    // ======================================================
+    --theme-primary: #6F8D6A;
+    --theme-primary-hover: #5d7a59;
+    --theme-primary-light: #e8f0e7;
+    --theme-primary-dark: #2d4a2d;
+
+    --theme-secondary: #A6BE47;
+    --theme-secondary-hover: #94ab3a;
+
+    --theme-accent: #E3BD33;
+    --theme-accent-hover: #d4ad24;
+
+    // ======================================================
+    // Semantic Colors
+    // ======================================================
+    --theme-success: #22c55e;
+    --theme-success-light: #dcfce7;
+    --theme-success-dark: #166534;
+
+    --theme-warning: #E3BD33;
+    --theme-warning-light: #fef9e7;
+    --theme-warning-dark: #92400e;
+
+    --theme-danger: #dc2626;
+    --theme-danger-light: #fee2e2;
+    --theme-danger-dark: #991b1b;
+
+    --theme-info: #0891b2;
+    --theme-info-light: #cffafe;
+    --theme-info-dark: #155e75;
+
+    // ======================================================
+    // Surface Colors (Light Mode)
+    // ======================================================
+    --theme-surface-primary: #f8faf5;
+    --theme-surface-secondary: #ffffff;
+    --theme-surface-tertiary: #f3f7f0;
+    --theme-surface-elevated: #ffffff;
+    --theme-surface-overlay: rgba(45, 74, 45, 0.5);
+
+    // ======================================================
+    // Text Colors
+    // ======================================================
+    --theme-text-primary: #1a2e1a;
+    --theme-text-secondary: #4a6a4a;
+    --theme-text-tertiary: #6b8a6b;
+    --theme-text-inverse: #ffffff;
+    --theme-text-on-primary: #ffffff;
+
+    // ======================================================
+    // Border Colors
+    // ======================================================
+    --theme-border-primary: #d4e4d0;
+    --theme-border-secondary: #e4ebd8;
+    --theme-border-focus: #6F8D6A;
+
+    // ======================================================
+    // Sidebar
+    // ======================================================
+    --theme-sidebar-bg: #1a2e1a;
+    --theme-sidebar-text: #ffffff;
+    --theme-sidebar-text-muted: #8aaa8a;
+    --theme-sidebar-hover: rgba(166, 190, 71, 0.1);
+    --theme-sidebar-active: #2d4a2d;
+    --theme-sidebar-active-text: #A6BE47;
+    --theme-sidebar-border: #2d4a2d;
+
+    // ======================================================
+    // Header
+    // ======================================================
+    --theme-header-bg: #ffffff;
+    --theme-header-text: #1a2e1a;
+    --theme-header-border: #e4ebd8;
+
+    // ======================================================
+    // Cards & Panels
+    // ======================================================
+    --theme-card-bg: #ffffff;
+    --theme-card-border: #e4ebd8;
+    --theme-card-shadow: 0 1px 3px rgba(45, 74, 45, 0.08);
+    --theme-card-header-bg: #f8faf5;
+
+    // ======================================================
+    // Inputs & Forms
+    // ======================================================
+    --theme-input-bg: #ffffff;
+    --theme-input-border: #d4e4d0;
+    --theme-input-border-focus: #6F8D6A;
+    --theme-input-text: #1a2e1a;
+    --theme-input-placeholder: #6b8a6b;
+
+    // ======================================================
+    // Tables & Grids
+    // ======================================================
+    --theme-table-header-bg: #f3f7f0;
+    --theme-table-header-text: #1a2e1a;
+    --theme-table-row-bg: #ffffff;
+    --theme-table-row-alt-bg: #f8faf5;
+    --theme-table-row-hover: #ecf3e8;
+    --theme-table-border: #e4ebd8;
+    --theme-table-row-selected: #d7e8bc;
+}
+
+// ==========================================================
+// Dark Mode Variant
+// ==========================================================
+
+[data-ez-theme="nature-fresh-dark"] {
+    // Surface Colors (Dark Mode)
+    --theme-surface-primary: #0a120a;
+    --theme-surface-secondary: #121e12;
+    --theme-surface-tertiary: #1a2e1a;
+    --theme-surface-elevated: #243824;
+    --theme-surface-overlay: rgba(0, 0, 0, 0.7);
+
+    // Text Colors
+    --theme-text-primary: #e8f0e7;
+    --theme-text-secondary: #A6BE47;
+    --theme-text-tertiary: #6b8a6b;
+    --theme-text-inverse: #1a2e1a;
+
+    // Border Colors
+    --theme-border-primary: #2d4a2d;
+    --theme-border-secondary: #1a2e1a;
+
+    // Sidebar
+    --theme-sidebar-bg: #0a120a;
+    --theme-sidebar-border: #1a2e1a;
+
+    // Header
+    --theme-header-bg: #121e12;
+    --theme-header-border: #2d4a2d;
+
+    // Cards
+    --theme-card-bg: #121e12;
+    --theme-card-border: #2d4a2d;
+    --theme-card-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
+    --theme-card-header-bg: #1a2e1a;
+
+    // Inputs
+    --theme-input-bg: #121e12;
+    --theme-input-border: #2d4a2d;
+    --theme-input-text: #e8f0e7;
+    --theme-input-placeholder: #4a6a4a;
+
+    // Tables
+    --theme-table-header-bg: #121e12;
+    --theme-table-header-text: #A6BE47;
+    --theme-table-row-bg: #121e12;
+    --theme-table-row-alt-bg: #1a2e1a;
+    --theme-table-row-hover: #243824;
+    --theme-table-border: #2d4a2d;
+    --theme-table-row-selected: rgba(166, 190, 71, 0.15);
+}

package/types/global.d.ts

@@ -0,0 +1,21 @@
+// CSS Module declarations
+declare module '*.module.scss' {
+    const classes: { [key: string]: string };
+    export default classes;
+}
+
+declare module '*.module.css' {
+    const classes: { [key: string]: string };
+    export default classes;
+}
+
+// Vite environment
+interface ImportMetaEnv {
+    readonly DEV: boolean;
+    readonly PROD: boolean;
+    readonly MODE: string;
+}
+
+interface ImportMeta {
+    readonly env: ImportMetaEnv;
+}

package/utils/cssModules.js

@@ -0,0 +1,81 @@
+/**
+ * CSS Modules Utility
+ *
+ * Creates a helper function for working with CSS Module class names.
+ * Supports BEM-style naming and automatic fallback for global classes.
+ *
+ * @example
+ * import styles from './EzButton.module.scss';
+ * import { cx } from '../../utils/cssModules.js';
+ *
+ * const cls = cx(styles);
+ *
+ * // Single class
+ * el.className = cls('button');  // => 'EzButton_button_x7ks2'
+ *
+ * // Multiple classes
+ * el.className = cls('button', 'button--primary');  // => 'EzButton_button_x7ks2 EzButton_button--primary_a3f1'
+ *
+ * // Conditional classes
+ * el.className = cls('button', isActive && 'button--active');  // falsy values ignored
+ *
+ * // Mixed with global classes (FontAwesome, theme classes)
+ * el.className = cls('icon', 'fa-solid fa-check');  // Global classes pass through
+ */
+
+/**
+ * Creates a class name helper bound to a CSS Module styles object.
+ *
+ * @param {Object} styles - CSS Module styles object
+ * @returns {Function} Helper function that resolves class names
+ */
+export function cx(styles = {}) {
+    /**
+     * Resolves class names from the CSS Module or passes through global classes.
+     *
+     * @param {...(string|boolean|null|undefined)} names - Class names or falsy values
+     * @returns {string} Space-separated class names
+     */
+    return function (...names) {
+        return names
+            .filter(Boolean)
+            .flatMap(name => {
+                // Handle space-separated class strings (e.g., 'fa-solid fa-check')
+                if (typeof name === 'string' && name.includes(' ')) {
+                    return name.split(/\s+/).map(n => styles[n] || n);
+                }
+                // Single class - lookup in styles or pass through
+                return styles[name] || name;
+            })
+            .join(' ');
+    };
+}
+
+/**
+ * Merges multiple class names (like clsx/classnames library).
+ * Works without CSS Modules - just combines class names.
+ *
+ * @param {...(string|boolean|null|undefined|Object)} args - Class names or condition objects
+ * @returns {string} Space-separated class names
+ *
+ * @example
+ * clsx('foo', 'bar');                    // => 'foo bar'
+ * clsx('foo', isActive && 'active');     // => 'foo active' or 'foo'
+ * clsx({ active: isActive, disabled });  // => 'active' if isActive is true
+ */
+export function clsx(...args) {
+    return args
+        .flatMap(arg => {
+            if (!arg) return [];
+            if (typeof arg === 'string') return arg;
+            if (typeof arg === 'object') {
+                return Object.entries(arg)
+                    .filter(([, value]) => Boolean(value))
+                    .map(([key]) => key);
+            }
+            return [];
+        })
+        .join(' ');
+}
+
+export default cx;