@framesquared/theme 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 John Carbone
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/index.d.ts

@@ -0,0 +1,101 @@
+/**
+ * @framesquared/theme – Theme
+ *
+ * A design token container.  Tokens are a nested object of values
+ * (colors, spacing, typography, etc.).  Themes can inherit from
+ * a parent — child tokens override parent tokens.  apply() sets
+ * all tokens as CSS custom properties on :root.
+ */
+interface ThemeConfig {
+    name: string;
+    parent?: Theme;
+    tokens: Record<string, unknown>;
+}
+declare class Theme {
+    private _name;
+    private _parent;
+    private _tokens;
+    private _appliedVars;
+    constructor(config: ThemeConfig);
+    getName(): string;
+    getToken(path: string): unknown;
+    setToken(path: string, value: unknown): void;
+    apply(): void;
+    unapply(): void;
+    getVariableNames(): string[];
+    private flatten;
+    private getMergedTokens;
+    private flattenObj;
+    private getByPath;
+    private setByPath;
+    private deepClone;
+    private deepMerge;
+}
+
+/**
+ * @framesquared/theme – ThemeManager
+ *
+ * Singleton that manages registered themes.  setTheme() unapplies
+ * the current theme, applies the new one, and fires 'themechange'.
+ */
+
+declare const ThemeManager: {
+    register(theme: Theme): void;
+    setTheme(name: string): void;
+    getTheme(name?: string): Theme | null;
+    getActiveThemeName(): string;
+    getToken(path: string): unknown;
+    on(event: string, fn: Function): void;
+    off(event: string, fn: Function): void;
+    reset(): void;
+};
+
+/**
+ * @framesquared/theme – StyleSheet
+ *
+ * Manages CSS rule injection via a <style> element.  Supports
+ * addRule/removeRule with camelCase→kebab-case conversion.
+ */
+declare class StyleSheet {
+    private _styleEl;
+    private _rules;
+    constructor(name: string);
+    getStyleElement(): HTMLStyleElement;
+    /**
+     * Add a CSS rule.  Returns an ID that can be used to remove it.
+     */
+    addRule(selector: string, styles: Record<string, string | number>): number;
+    /**
+     * Remove a previously added rule by its ID.
+     */
+    removeRule(id: number): void;
+    /**
+     * Remove the style element from DOM and clear all rules.
+     */
+    destroy(): void;
+    private rebuild;
+}
+
+/**
+ * @framesquared/theme – ClassicTheme
+ * ExtJS classic look — blue tones, subtle gradients, traditional feel.
+ */
+
+declare const ClassicTheme: Theme;
+
+/**
+ * @framesquared/theme – ModernTheme
+ * Clean, flat design — Material-inspired colors, generous spacing.
+ */
+
+declare const ModernTheme: Theme;
+
+/**
+ * @framesquared/theme – DarkTheme
+ * Dark mode — inherits from ModernTheme, inverts backgrounds
+ * and text colors for dark environments.
+ */
+
+declare const DarkTheme: Theme;
+
+export { ClassicTheme, DarkTheme, ModernTheme, StyleSheet, Theme, type ThemeConfig, ThemeManager };

package/dist/index.js

@@ -0,0 +1,318 @@
+// src/Theme.ts
+var Theme = class {
+  _name;
+  _parent;
+  _tokens;
+  _appliedVars = [];
+  constructor(config) {
+    this._name = config.name;
+    this._parent = config.parent ?? null;
+    this._tokens = this.deepClone(config.tokens);
+  }
+  getName() {
+    return this._name;
+  }
+  // -----------------------------------------------------------------------
+  // Token access
+  // -----------------------------------------------------------------------
+  getToken(path) {
+    const local = this.getByPath(this._tokens, path);
+    if (local !== void 0) return local;
+    if (this._parent) return this._parent.getToken(path);
+    return void 0;
+  }
+  setToken(path, value) {
+    this.setByPath(this._tokens, path, value);
+  }
+  // -----------------------------------------------------------------------
+  // CSS custom properties
+  // -----------------------------------------------------------------------
+  apply() {
+    this._appliedVars = [];
+    const flat = this.flatten();
+    const root = document.documentElement;
+    for (const [varName, value] of flat) {
+      root.style.setProperty(varName, String(value));
+      this._appliedVars.push(varName);
+    }
+  }
+  unapply() {
+    const root = document.documentElement;
+    for (const varName of this._appliedVars) {
+      root.style.removeProperty(varName);
+    }
+    this._appliedVars = [];
+  }
+  getVariableNames() {
+    return this.flatten().map(([name]) => name);
+  }
+  // -----------------------------------------------------------------------
+  // Flatten tokens to CSS variable pairs
+  // -----------------------------------------------------------------------
+  flatten() {
+    const result = [];
+    const merged = this.getMergedTokens();
+    this.flattenObj(merged, "--ext", result);
+    return result;
+  }
+  getMergedTokens() {
+    if (!this._parent) return this._tokens;
+    const parentTokens = this._parent.getMergedTokens();
+    return this.deepMerge(parentTokens, this._tokens);
+  }
+  flattenObj(obj, prefix, result) {
+    for (const [key, value] of Object.entries(obj)) {
+      const varName = `${prefix}-${key}`;
+      if (value !== null && typeof value === "object" && !Array.isArray(value)) {
+        this.flattenObj(value, varName, result);
+      } else {
+        result.push([varName, value]);
+      }
+    }
+  }
+  // -----------------------------------------------------------------------
+  // Helpers
+  // -----------------------------------------------------------------------
+  getByPath(obj, path) {
+    const parts = path.split(".");
+    let current = obj;
+    for (const part of parts) {
+      if (current == null || typeof current !== "object") return void 0;
+      current = current[part];
+    }
+    return current;
+  }
+  setByPath(obj, path, value) {
+    const parts = path.split(".");
+    let current = obj;
+    for (let i = 0; i < parts.length - 1; i++) {
+      if (current[parts[i]] == null || typeof current[parts[i]] !== "object") {
+        current[parts[i]] = {};
+      }
+      current = current[parts[i]];
+    }
+    current[parts[parts.length - 1]] = value;
+  }
+  deepClone(obj) {
+    return JSON.parse(JSON.stringify(obj));
+  }
+  deepMerge(target, source) {
+    const result = { ...target };
+    for (const key of Object.keys(source)) {
+      if (source[key] !== null && typeof source[key] === "object" && !Array.isArray(source[key]) && target[key] !== null && typeof target[key] === "object" && !Array.isArray(target[key])) {
+        result[key] = this.deepMerge(target[key], source[key]);
+      } else {
+        result[key] = source[key];
+      }
+    }
+    return result;
+  }
+};
+
+// src/ThemeManager.ts
+var themes = /* @__PURE__ */ new Map();
+var activeTheme = null;
+var activeName = "";
+var listeners = {};
+function fire(event, ...args) {
+  (listeners[event] ?? []).forEach((fn) => fn(...args));
+}
+var ThemeManager = {
+  register(theme) {
+    themes.set(theme.getName(), theme);
+  },
+  setTheme(name) {
+    const theme = themes.get(name);
+    if (!theme) return;
+    if (activeTheme) activeTheme.unapply();
+    activeTheme = theme;
+    activeName = name;
+    theme.apply();
+    fire("themechange", theme, name);
+  },
+  getTheme(name) {
+    if (name) return themes.get(name) ?? null;
+    return activeTheme;
+  },
+  getActiveThemeName() {
+    return activeName;
+  },
+  getToken(path) {
+    return activeTheme?.getToken(path) ?? void 0;
+  },
+  on(event, fn) {
+    (listeners[event] ??= []).push(fn);
+  },
+  off(event, fn) {
+    const list = listeners[event];
+    if (!list) return;
+    const idx = list.indexOf(fn);
+    if (idx >= 0) list.splice(idx, 1);
+  },
+  reset() {
+    if (activeTheme) activeTheme.unapply();
+    activeTheme = null;
+    activeName = "";
+    themes.clear();
+    for (const key of Object.keys(listeners)) {
+      listeners[key] = [];
+    }
+  }
+};
+
+// src/StyleSheet.ts
+var ruleCounter = 0;
+function toKebab(str) {
+  return str.replace(/([A-Z])/g, "-$1").toLowerCase();
+}
+var StyleSheet = class {
+  _styleEl;
+  _rules = /* @__PURE__ */ new Map();
+  constructor(name) {
+    this._styleEl = document.createElement("style");
+    this._styleEl.setAttribute("data-ext-stylesheet", name);
+  }
+  getStyleElement() {
+    return this._styleEl;
+  }
+  /**
+   * Add a CSS rule.  Returns an ID that can be used to remove it.
+   */
+  addRule(selector, styles) {
+    const id = ruleCounter++;
+    const declarations = Object.entries(styles).map(([prop, val]) => `${toKebab(prop)}: ${val}`).join("; ");
+    const ruleText = `${selector} { ${declarations}; }`;
+    this._rules.set(id, ruleText);
+    this.rebuild();
+    return id;
+  }
+  /**
+   * Remove a previously added rule by its ID.
+   */
+  removeRule(id) {
+    this._rules.delete(id);
+    this.rebuild();
+  }
+  /**
+   * Remove the style element from DOM and clear all rules.
+   */
+  destroy() {
+    if (this._styleEl.parentNode) {
+      this._styleEl.parentNode.removeChild(this._styleEl);
+    }
+    this._rules.clear();
+  }
+  rebuild() {
+    this._styleEl.textContent = Array.from(this._rules.values()).join("\n");
+  }
+};
+
+// src/themes/ClassicTheme.ts
+var ClassicTheme = new Theme({
+  name: "classic",
+  tokens: {
+    color: {
+      primary: "#157fcc",
+      secondary: "#486085",
+      success: "#4caf50",
+      warning: "#ff9800",
+      error: "#cf4c35",
+      background: "#f0f0f0",
+      surface: "#ffffff",
+      text: { primary: "#333333", secondary: "#666666", disabled: "#999999" }
+    },
+    spacing: { xs: 2, sm: 4, md: 8, lg: 12, xl: 16 },
+    borderRadius: { sm: 1, md: 2, lg: 4, xl: 8, round: "50%" },
+    shadow: {
+      sm: "0 1px 2px rgba(0,0,0,0.15)",
+      md: "0 2px 4px rgba(0,0,0,0.2)",
+      lg: "0 4px 8px rgba(0,0,0,0.25)",
+      xl: "0 8px 16px rgba(0,0,0,0.3)"
+    },
+    typography: {
+      fontFamily: { sans: "Tahoma, Arial, Verdana, sans-serif", mono: "Consolas, monospace" },
+      fontSize: { xs: 11, sm: 12, md: 13, lg: 14, xl: 18, xxl: 24 },
+      fontWeight: { normal: 400, medium: 500, bold: 700 },
+      lineHeight: { tight: 1.2, normal: 1.4, relaxed: 1.6 }
+    },
+    component: {
+      button: { height: 28, padding: "0 12px", borderRadius: 2 },
+      panel: { headerHeight: 32, borderWidth: 1, borderColor: "#99bce8" },
+      field: { height: 26, labelWidth: 100 },
+      grid: { rowHeight: 26, headerHeight: 30 }
+    },
+    breakpoints: { xs: 0, sm: 600, md: 960, lg: 1280, xl: 1920 },
+    transition: { fast: "100ms", normal: "200ms", slow: "300ms" },
+    zIndex: { dropdown: 1e3, modal: 1050, tooltip: 1100, notification: 1200 }
+  }
+});
+
+// src/themes/ModernTheme.ts
+var ModernTheme = new Theme({
+  name: "modern",
+  tokens: {
+    color: {
+      primary: "#1976d2",
+      secondary: "#dc004e",
+      success: "#4caf50",
+      warning: "#ff9800",
+      error: "#f44336",
+      background: "#ffffff",
+      surface: "#f5f5f5",
+      text: { primary: "#212121", secondary: "#757575", disabled: "#bdbdbd" }
+    },
+    spacing: { xs: 4, sm: 8, md: 16, lg: 24, xl: 32 },
+    borderRadius: { sm: 2, md: 4, lg: 8, xl: 16, round: "50%" },
+    shadow: {
+      sm: "0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24)",
+      md: "0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23)",
+      lg: "0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23)",
+      xl: "0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22)"
+    },
+    typography: {
+      fontFamily: { sans: "Inter, -apple-system, sans-serif", mono: "Fira Code, monospace" },
+      fontSize: { xs: 12, sm: 14, md: 16, lg: 18, xl: 24, xxl: 32 },
+      fontWeight: { normal: 400, medium: 500, bold: 700 },
+      lineHeight: { tight: 1.2, normal: 1.5, relaxed: 1.75 }
+    },
+    component: {
+      button: { height: 36, padding: "0 16px", borderRadius: 4 },
+      panel: { headerHeight: 40, borderWidth: 1, borderColor: "#e0e0e0" },
+      field: { height: 32, labelWidth: 150 },
+      grid: { rowHeight: 32, headerHeight: 36 }
+    },
+    breakpoints: { xs: 0, sm: 600, md: 960, lg: 1280, xl: 1920 },
+    transition: { fast: "150ms", normal: "250ms", slow: "400ms" },
+    zIndex: { dropdown: 1e3, modal: 1050, tooltip: 1100, notification: 1200 }
+  }
+});
+
+// src/themes/DarkTheme.ts
+var DarkTheme = new Theme({
+  name: "dark",
+  parent: ModernTheme,
+  tokens: {
+    color: {
+      primary: "#90caf9",
+      secondary: "#f48fb1",
+      success: "#81c784",
+      warning: "#ffb74d",
+      error: "#e57373",
+      background: "#121212",
+      surface: "#1e1e1e",
+      text: { primary: "#e0e0e0", secondary: "#aaaaaa", disabled: "#666666" }
+    },
+    component: {
+      panel: { borderColor: "#333333" }
+    }
+  }
+});
+export {
+  ClassicTheme,
+  DarkTheme,
+  ModernTheme,
+  StyleSheet,
+  Theme,
+  ThemeManager
+};
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/Theme.ts","../src/ThemeManager.ts","../src/StyleSheet.ts","../src/themes/ClassicTheme.ts","../src/themes/ModernTheme.ts","../src/themes/DarkTheme.ts"],"sourcesContent":["/**\n * @framesquared/theme – Theme\n *\n * A design token container.  Tokens are a nested object of values\n * (colors, spacing, typography, etc.).  Themes can inherit from\n * a parent — child tokens override parent tokens.  apply() sets\n * all tokens as CSS custom properties on :root.\n */\n\n/* eslint-disable @typescript-eslint/no-explicit-any */\n\nexport interface ThemeConfig {\n  name: string;\n  parent?: Theme;\n  tokens: Record<string, unknown>;\n}\n\nexport class Theme {\n  private _name: string;\n  private _parent: Theme | null;\n  private _tokens: Record<string, unknown>;\n  private _appliedVars: string[] = [];\n\n  constructor(config: ThemeConfig) {\n    this._name = config.name;\n    this._parent = config.parent ?? null;\n    this._tokens = this.deepClone(config.tokens);\n  }\n\n  getName(): string {\n    return this._name;\n  }\n\n  // -----------------------------------------------------------------------\n  // Token access\n  // -----------------------------------------------------------------------\n\n  getToken(path: string): unknown {\n    // Check local tokens first\n    const local = this.getByPath(this._tokens, path);\n    if (local !== undefined) return local;\n    // Fall back to parent\n    if (this._parent) return this._parent.getToken(path);\n    return undefined;\n  }\n\n  setToken(path: string, value: unknown): void {\n    this.setByPath(this._tokens, path, value);\n  }\n\n  // -----------------------------------------------------------------------\n  // CSS custom properties\n  // -----------------------------------------------------------------------\n\n  apply(): void {\n    this._appliedVars = [];\n    const flat = this.flatten();\n    const root = document.documentElement;\n    for (const [varName, value] of flat) {\n      root.style.setProperty(varName, String(value));\n      this._appliedVars.push(varName);\n    }\n  }\n\n  unapply(): void {\n    const root = document.documentElement;\n    for (const varName of this._appliedVars) {\n      root.style.removeProperty(varName);\n    }\n    this._appliedVars = [];\n  }\n\n  getVariableNames(): string[] {\n    return this.flatten().map(([name]) => name);\n  }\n\n  // -----------------------------------------------------------------------\n  // Flatten tokens to CSS variable pairs\n  // -----------------------------------------------------------------------\n\n  private flatten(): [string, unknown][] {\n    const result: [string, unknown][] = [];\n    // Merge parent tokens first, then local tokens override\n    const merged = this.getMergedTokens();\n    this.flattenObj(merged, '--ext', result);\n    return result;\n  }\n\n  private getMergedTokens(): Record<string, unknown> {\n    if (!this._parent) return this._tokens;\n    const parentTokens = (this._parent as any).getMergedTokens();\n    return this.deepMerge(parentTokens, this._tokens);\n  }\n\n  private flattenObj(obj: any, prefix: string, result: [string, unknown][]): void {\n    for (const [key, value] of Object.entries(obj)) {\n      const varName = `${prefix}-${key}`;\n      if (value !== null && typeof value === 'object' && !Array.isArray(value)) {\n        this.flattenObj(value, varName, result);\n      } else {\n        result.push([varName, value]);\n      }\n    }\n  }\n\n  // -----------------------------------------------------------------------\n  // Helpers\n  // -----------------------------------------------------------------------\n\n  private getByPath(obj: any, path: string): unknown {\n    const parts = path.split('.');\n    let current = obj;\n    for (const part of parts) {\n      if (current == null || typeof current !== 'object') return undefined;\n      current = current[part];\n    }\n    return current;\n  }\n\n  private setByPath(obj: any, path: string, value: unknown): void {\n    const parts = path.split('.');\n    let current = obj;\n    for (let i = 0; i < parts.length - 1; i++) {\n      if (current[parts[i]] == null || typeof current[parts[i]] !== 'object') {\n        current[parts[i]] = {};\n      }\n      current = current[parts[i]];\n    }\n    current[parts[parts.length - 1]] = value;\n  }\n\n  private deepClone(obj: Record<string, unknown>): Record<string, unknown> {\n    return JSON.parse(JSON.stringify(obj));\n  }\n\n  private deepMerge(target: any, source: any): any {\n    const result = { ...target };\n    for (const key of Object.keys(source)) {\n      if (\n        source[key] !== null &&\n        typeof source[key] === 'object' &&\n        !Array.isArray(source[key]) &&\n        target[key] !== null &&\n        typeof target[key] === 'object' &&\n        !Array.isArray(target[key])\n      ) {\n        result[key] = this.deepMerge(target[key], source[key]);\n      } else {\n        result[key] = source[key];\n      }\n    }\n    return result;\n  }\n}\n","/**\n * @framesquared/theme – ThemeManager\n *\n * Singleton that manages registered themes.  setTheme() unapplies\n * the current theme, applies the new one, and fires 'themechange'.\n */\n\nimport type { Theme } from './Theme.js';\n\nconst themes = new Map<string, Theme>();\nlet activeTheme: Theme | null = null;\nlet activeName = '';\nconst listeners: Record<string, Function[]> = {};\n\nfunction fire(event: string, ...args: unknown[]): void {\n  (listeners[event] ?? []).forEach(fn => fn(...args));\n}\n\nexport const ThemeManager = {\n  register(theme: Theme): void {\n    themes.set(theme.getName(), theme);\n  },\n\n  setTheme(name: string): void {\n    const theme = themes.get(name);\n    if (!theme) return;\n\n    // Unapply current\n    if (activeTheme) activeTheme.unapply();\n\n    // Apply new\n    activeTheme = theme;\n    activeName = name;\n    theme.apply();\n\n    fire('themechange', theme, name);\n  },\n\n  getTheme(name?: string): Theme | null {\n    if (name) return themes.get(name) ?? null;\n    return activeTheme;\n  },\n\n  getActiveThemeName(): string {\n    return activeName;\n  },\n\n  getToken(path: string): unknown {\n    return activeTheme?.getToken(path) ?? undefined;\n  },\n\n  on(event: string, fn: Function): void {\n    (listeners[event] ??= []).push(fn);\n  },\n\n  off(event: string, fn: Function): void {\n    const list = listeners[event];\n    if (!list) return;\n    const idx = list.indexOf(fn);\n    if (idx >= 0) list.splice(idx, 1);\n  },\n\n  reset(): void {\n    if (activeTheme) activeTheme.unapply();\n    activeTheme = null;\n    activeName = '';\n    themes.clear();\n    for (const key of Object.keys(listeners)) {\n      listeners[key] = [];\n    }\n  },\n};\n","/**\n * @framesquared/theme – StyleSheet\n *\n * Manages CSS rule injection via a <style> element.  Supports\n * addRule/removeRule with camelCase→kebab-case conversion.\n */\n\nlet ruleCounter = 0;\n\nfunction toKebab(str: string): string {\n  return str.replace(/([A-Z])/g, '-$1').toLowerCase();\n}\n\nexport class StyleSheet {\n  private _styleEl: HTMLStyleElement;\n  private _rules = new Map<number, string>();\n\n  constructor(name: string) {\n    this._styleEl = document.createElement('style');\n    this._styleEl.setAttribute('data-ext-stylesheet', name);\n  }\n\n  getStyleElement(): HTMLStyleElement {\n    return this._styleEl;\n  }\n\n  /**\n   * Add a CSS rule.  Returns an ID that can be used to remove it.\n   */\n  addRule(selector: string, styles: Record<string, string | number>): number {\n    const id = ruleCounter++;\n    const declarations = Object.entries(styles)\n      .map(([prop, val]) => `${toKebab(prop)}: ${val}`)\n      .join('; ');\n    const ruleText = `${selector} { ${declarations}; }`;\n    this._rules.set(id, ruleText);\n    this.rebuild();\n    return id;\n  }\n\n  /**\n   * Remove a previously added rule by its ID.\n   */\n  removeRule(id: number): void {\n    this._rules.delete(id);\n    this.rebuild();\n  }\n\n  /**\n   * Remove the style element from DOM and clear all rules.\n   */\n  destroy(): void {\n    if (this._styleEl.parentNode) {\n      this._styleEl.parentNode.removeChild(this._styleEl);\n    }\n    this._rules.clear();\n  }\n\n  private rebuild(): void {\n    this._styleEl.textContent = Array.from(this._rules.values()).join('\\n');\n  }\n}\n","/**\n * @framesquared/theme – ClassicTheme\n * ExtJS classic look — blue tones, subtle gradients, traditional feel.\n */\n\nimport { Theme } from '../Theme.js';\n\nexport const ClassicTheme = new Theme({\n  name: 'classic',\n  tokens: {\n    color: {\n      primary: '#157fcc',\n      secondary: '#486085',\n      success: '#4caf50',\n      warning: '#ff9800',\n      error: '#cf4c35',\n      background: '#f0f0f0',\n      surface: '#ffffff',\n      text: { primary: '#333333', secondary: '#666666', disabled: '#999999' },\n    },\n    spacing: { xs: 2, sm: 4, md: 8, lg: 12, xl: 16 },\n    borderRadius: { sm: 1, md: 2, lg: 4, xl: 8, round: '50%' },\n    shadow: {\n      sm: '0 1px 2px rgba(0,0,0,0.15)',\n      md: '0 2px 4px rgba(0,0,0,0.2)',\n      lg: '0 4px 8px rgba(0,0,0,0.25)',\n      xl: '0 8px 16px rgba(0,0,0,0.3)',\n    },\n    typography: {\n      fontFamily: { sans: 'Tahoma, Arial, Verdana, sans-serif', mono: 'Consolas, monospace' },\n      fontSize: { xs: 11, sm: 12, md: 13, lg: 14, xl: 18, xxl: 24 },\n      fontWeight: { normal: 400, medium: 500, bold: 700 },\n      lineHeight: { tight: 1.2, normal: 1.4, relaxed: 1.6 },\n    },\n    component: {\n      button: { height: 28, padding: '0 12px', borderRadius: 2 },\n      panel: { headerHeight: 32, borderWidth: 1, borderColor: '#99bce8' },\n      field: { height: 26, labelWidth: 100 },\n      grid: { rowHeight: 26, headerHeight: 30 },\n    },\n    breakpoints: { xs: 0, sm: 600, md: 960, lg: 1280, xl: 1920 },\n    transition: { fast: '100ms', normal: '200ms', slow: '300ms' },\n    zIndex: { dropdown: 1000, modal: 1050, tooltip: 1100, notification: 1200 },\n  },\n});\n","/**\n * @framesquared/theme – ModernTheme\n * Clean, flat design — Material-inspired colors, generous spacing.\n */\n\nimport { Theme } from '../Theme.js';\n\nexport const ModernTheme = new Theme({\n  name: 'modern',\n  tokens: {\n    color: {\n      primary: '#1976d2',\n      secondary: '#dc004e',\n      success: '#4caf50',\n      warning: '#ff9800',\n      error: '#f44336',\n      background: '#ffffff',\n      surface: '#f5f5f5',\n      text: { primary: '#212121', secondary: '#757575', disabled: '#bdbdbd' },\n    },\n    spacing: { xs: 4, sm: 8, md: 16, lg: 24, xl: 32 },\n    borderRadius: { sm: 2, md: 4, lg: 8, xl: 16, round: '50%' },\n    shadow: {\n      sm: '0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24)',\n      md: '0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23)',\n      lg: '0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23)',\n      xl: '0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22)',\n    },\n    typography: {\n      fontFamily: { sans: 'Inter, -apple-system, sans-serif', mono: 'Fira Code, monospace' },\n      fontSize: { xs: 12, sm: 14, md: 16, lg: 18, xl: 24, xxl: 32 },\n      fontWeight: { normal: 400, medium: 500, bold: 700 },\n      lineHeight: { tight: 1.2, normal: 1.5, relaxed: 1.75 },\n    },\n    component: {\n      button: { height: 36, padding: '0 16px', borderRadius: 4 },\n      panel: { headerHeight: 40, borderWidth: 1, borderColor: '#e0e0e0' },\n      field: { height: 32, labelWidth: 150 },\n      grid: { rowHeight: 32, headerHeight: 36 },\n    },\n    breakpoints: { xs: 0, sm: 600, md: 960, lg: 1280, xl: 1920 },\n    transition: { fast: '150ms', normal: '250ms', slow: '400ms' },\n    zIndex: { dropdown: 1000, modal: 1050, tooltip: 1100, notification: 1200 },\n  },\n});\n","/**\n * @framesquared/theme – DarkTheme\n * Dark mode — inherits from ModernTheme, inverts backgrounds\n * and text colors for dark environments.\n */\n\nimport { Theme } from '../Theme.js';\nimport { ModernTheme } from './ModernTheme.js';\n\nexport const DarkTheme = new Theme({\n  name: 'dark',\n  parent: ModernTheme,\n  tokens: {\n    color: {\n      primary: '#90caf9',\n      secondary: '#f48fb1',\n      success: '#81c784',\n      warning: '#ffb74d',\n      error: '#e57373',\n      background: '#121212',\n      surface: '#1e1e1e',\n      text: { primary: '#e0e0e0', secondary: '#aaaaaa', disabled: '#666666' },\n    },\n    component: {\n      panel: { borderColor: '#333333' },\n    },\n  },\n});\n"],"mappings":"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","names":[]}

package/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "@framesquared/theme",
+  "version": "0.1.0",
+  "description": "Theming and CSS-in-JS token system",
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "dependencies": {
+    "@framesquared/core": "0.1.0"
+  },
+  "scripts": {
+    "build": "tsup",
+    "test": "vitest run",
+    "clean": "rm -rf dist",
+    "typecheck": "tsc --noEmit --project tsconfig.build.json"
+  }
+}