@easemate/web-kit 0.2.0 → 0.3.0

package/build/theme/index.js

@@ -1,423 +0,0 @@
-import { defaultColors, defaultRadii, defaultSpacing, defaultTypography } from "./tokens.js";
-export * from "./presets.js";
-export * from "./registry.js";
-export * from "./tokens.js";
-/**
- * CSS variable prefix
- */
-const CSS_PREFIX = '--color';
-const RADII_PREFIX = '--radii';
-const SPACING_PREFIX = '--spacing';
-const TYPOGRAPHY_PREFIX = '--font';
-/**
- * Convert a nested object path to CSS variable name
- * e.g., ['gray', '100'] -> '--color-gray-100'
- */
-const toVarName = (prefix, ...parts) => `${prefix}-${parts.join('-')}`;
-/**
- * Generate CSS variables from a color scale
- */
-const generateColorScaleVars = (name, scale) => {
-    const vars = {};
-    for (const [level, value] of Object.entries(scale)) {
-        if (value !== undefined) {
-            vars[toVarName(CSS_PREFIX, name, level)] = value;
-        }
-    }
-    return vars;
-};
-/**
- * Add alpha to an OKLab/OKLCH color string.
- * Falls back to `color-mix()` for non-oklab/oklch formats.
- */
-const withAlpha = (color, alpha) => {
-    const trimmed = color.trim();
-    const match = /^(oklab|oklch)\((.+)\)$/.exec(trimmed);
-    if (match) {
-        const fn = match[1];
-        const innerRaw = match[2];
-        if (fn && innerRaw) {
-            const inner = innerRaw.trim();
-            // If the color already has an alpha, keep it as-is.
-            if (inner.includes('/')) {
-                return `${fn}(${inner})`;
-            }
-            return `${fn}(${inner} / ${alpha})`;
-        }
-    }
-    // Fallback: approximate alpha using color-mix
-    const pct = Math.round(alpha * 1000) / 10;
-    return `color-mix(in oklab, ${trimmed} ${pct}%, transparent)`;
-};
-/**
- * Generate CSS variables from a color palette
- */
-const generateColorVars = (colors) => {
-    const vars = {};
-    if (colors.gray) {
-        Object.assign(vars, generateColorScaleVars('gray', colors.gray));
-    }
-    if (colors.blue) {
-        Object.assign(vars, generateColorScaleVars('blue', colors.blue));
-    }
-    // Derived convenience tokens used by some components
-    const blue = colors.blue;
-    if (blue?.['200']) {
-        vars[toVarName(CSS_PREFIX, 'blue', '100-50')] = withAlpha(blue['200'], 0.5);
-    }
-    if (blue?.['300']) {
-        vars[toVarName(CSS_PREFIX, 'blue', '300-40')] = withAlpha(blue['300'], 0.4);
-    }
-    if (colors.green) {
-        Object.assign(vars, generateColorScaleVars('green', colors.green));
-    }
-    if (colors.red) {
-        Object.assign(vars, generateColorScaleVars('red', colors.red));
-    }
-    if (colors.orange) {
-        Object.assign(vars, generateColorScaleVars('orange', colors.orange));
-    }
-    if (colors.yellow) {
-        Object.assign(vars, generateColorScaleVars('yellow', colors.yellow));
-    }
-    if (colors.white) {
-        vars[toVarName(CSS_PREFIX, 'white')] = colors.white;
-    }
-    if (colors.black) {
-        vars[toVarName(CSS_PREFIX, 'black')] = colors.black;
-    }
-    if (colors.whiteAlpha) {
-        for (const [level, value] of Object.entries(colors.whiteAlpha)) {
-            if (value !== undefined) {
-                vars[toVarName(CSS_PREFIX, 'white', level)] = value;
-            }
-        }
-    }
-    // Ensure `--color-white-0` exists (used by slider thumb gradients)
-    if (!vars[toVarName(CSS_PREFIX, 'white', 0)] && colors.white) {
-        vars[toVarName(CSS_PREFIX, 'white', 0)] = withAlpha(colors.white, 0);
-    }
-    if (colors.blackAlpha) {
-        for (const [level, value] of Object.entries(colors.blackAlpha)) {
-            if (value !== undefined) {
-                vars[toVarName(CSS_PREFIX, 'black', level)] = value;
-            }
-        }
-    }
-    if (colors.foreground) {
-        vars[toVarName(CSS_PREFIX, 'foreground')] = colors.foreground;
-    }
-    return vars;
-};
-/**
- * Resolve the theme target element.
- * This keeps the theme API SSR-safe (no-ops when `document` is not available).
- */
-const resolveThemeTarget = (element) => {
-    if (element) {
-        return element;
-    }
-    if (typeof document === 'undefined') {
-        return null;
-    }
-    return document.documentElement;
-};
-/**
- * Generate CSS variables from radii config
- */
-const generateRadiiVars = (radii) => {
-    const vars = {};
-    for (const [name, value] of Object.entries(radii)) {
-        if (value !== undefined) {
-            vars[toVarName(RADII_PREFIX, name)] = value;
-        }
-    }
-    return vars;
-};
-/**
- * Generate CSS variables from spacing config
- */
-const generateSpacingVars = (spacing) => {
-    const vars = {};
-    for (const [name, value] of Object.entries(spacing)) {
-        if (value !== undefined) {
-            vars[toVarName(SPACING_PREFIX, name)] = value;
-        }
-    }
-    return vars;
-};
-/**
- * Generate CSS variables from typography config
- */
-const generateTypographyVars = (typography) => {
-    const vars = {};
-    if (typography.fontFamily) {
-        vars[toVarName(TYPOGRAPHY_PREFIX, 'family')] = typography.fontFamily;
-    }
-    if (typography.fontMono) {
-        vars[toVarName(TYPOGRAPHY_PREFIX, 'mono')] = typography.fontMono;
-    }
-    if (typography.fontSize) {
-        vars[toVarName(TYPOGRAPHY_PREFIX, 'size')] = typography.fontSize;
-    }
-    if (typography.lineHeight) {
-        vars[toVarName(TYPOGRAPHY_PREFIX, 'line-height')] = typography.lineHeight;
-    }
-    return vars;
-};
-const normalizeCustomVarName = (name) => {
-    const trimmed = name.trim();
-    if (!trimmed) {
-        return null;
-    }
-    return trimmed.startsWith('--') ? trimmed : `--${trimmed}`;
-};
-const generateCustomVars = (vars) => {
-    const out = {};
-    for (const [key, value] of Object.entries(vars)) {
-        if (value === null || value === undefined) {
-            continue;
-        }
-        const name = normalizeCustomVarName(key);
-        if (!name) {
-            continue;
-        }
-        out[name] = String(value);
-    }
-    return out;
-};
-/**
- * Generate all CSS variables from a theme config
- */
-const generateThemeVars = (config) => {
-    const vars = {};
-    if (config.colors) {
-        Object.assign(vars, generateColorVars(config.colors));
-    }
-    if (config.radii) {
-        Object.assign(vars, generateRadiiVars(config.radii));
-    }
-    if (config.spacing) {
-        Object.assign(vars, generateSpacingVars(config.spacing));
-    }
-    if (config.typography) {
-        Object.assign(vars, generateTypographyVars(config.typography));
-    }
-    if (config.vars) {
-        Object.assign(vars, generateCustomVars(config.vars));
-    }
-    return vars;
-};
-/**
- * Create a CSS string from theme configuration
- *
- * @param config - Theme configuration object
- * @param selector - CSS selector to apply variables to (default: ':root')
- * @returns CSS string with variables
- *
- * @example
- * ```typescript
- * const css = createTheme({
- *   colors: {
- *     blue: { 500: '#3b82f6' }
- *   }
- * });
- * // Returns: ':root { --color-blue-500: #3b82f6; }'
- * ```
- */
-export const createTheme = (config, selector = ':root') => {
-    const vars = generateThemeVars(config);
-    const declarations = Object.entries(vars)
-        .map(([name, value]) => `  ${name}: ${value};`)
-        .join('\n');
-    return `${selector} {\n${declarations}\n}`;
-};
-/**
- * Apply theme configuration to an element (default: document root)
- *
- * @param config - Theme configuration object
- * @param element - Target element (default: document.documentElement)
- *
- * @example
- * ```typescript
- * // Apply to document root
- * defineTheme({
- *   colors: {
- *     blue: { 500: '#3b82f6' }
- *   }
- * });
- *
- * // Apply to specific element
- * defineTheme({ colors: { gray: { 900: '#111' } } }, myElement);
- * ```
- */
-export const defineTheme = (config, element) => {
-    const target = resolveThemeTarget(element);
-    if (!target) {
-        return;
-    }
-    const vars = generateThemeVars(config);
-    for (const [name, value] of Object.entries(vars)) {
-        target.style.setProperty(name, value);
-    }
-};
-/**
- * Remove theme configuration from an element
- *
- * @param config - Theme configuration object (to know which variables to remove)
- * @param element - Target element (default: document.documentElement)
- */
-export const removeTheme = (config, element) => {
-    const target = resolveThemeTarget(element);
-    if (!target) {
-        return;
-    }
-    const vars = generateThemeVars(config);
-    for (const name of Object.keys(vars)) {
-        target.style.removeProperty(name);
-    }
-};
-/**
- * Get the current value of a CSS theme variable
- *
- * @param token - Variable name (with or without '--' prefix)
- * @param element - Element to read from (default: document.documentElement)
- * @returns The computed value or empty string if not found
- *
- * @example
- * ```typescript
- * const blue500 = getThemeValue('color-blue-500');
- * const radius = getThemeValue('--radii-md');
- * ```
- */
-export const getThemeValue = (token, element) => {
-    const target = resolveThemeTarget(element);
-    if (!target || typeof getComputedStyle === 'undefined') {
-        return '';
-    }
-    const varName = token.startsWith('--') ? token : `--${token}`;
-    return getComputedStyle(target).getPropertyValue(varName).trim();
-};
-/**
- * Set a single theme variable
- *
- * @param token - Variable name (with or without '--' prefix)
- * @param value - Value to set
- * @param element - Target element (default: document.documentElement)
- *
- * @example
- * ```typescript
- * setThemeValue('color-blue-500', '#3b82f6');
- * ```
- */
-export const setThemeValue = (token, value, element) => {
-    const target = resolveThemeTarget(element);
-    if (!target) {
-        return;
-    }
-    const varName = token.startsWith('--') ? token : `--${token}`;
-    target.style.setProperty(varName, value);
-};
-/** Attribute used for CSS-based theme switching */
-export const EASE_THEME_ATTRIBUTE = 'data-ease-theme';
-/**
- * Merge a theme with the library defaults (dark baseline).
- * Use this when you want to start from the built-in design tokens and override a few values.
- */
-export const mergeTheme = (overrides = {}) => {
-    return {
-        colors: {
-            ...defaultColors,
-            ...overrides.colors,
-            gray: { ...defaultColors.gray, ...overrides.colors?.gray },
-            blue: { ...defaultColors.blue, ...overrides.colors?.blue },
-            green: { ...defaultColors.green, ...overrides.colors?.green },
-            red: { ...defaultColors.red, ...overrides.colors?.red },
-            orange: { ...defaultColors.orange, ...overrides.colors?.orange },
-            yellow: { ...defaultColors.yellow, ...overrides.colors?.yellow },
-            whiteAlpha: { ...defaultColors.whiteAlpha, ...overrides.colors?.whiteAlpha },
-            blackAlpha: { ...defaultColors.blackAlpha, ...overrides.colors?.blackAlpha }
-        },
-        radii: { ...defaultRadii, ...overrides.radii },
-        spacing: { ...defaultSpacing, ...overrides.spacing },
-        typography: { ...defaultTypography, ...overrides.typography },
-        vars: overrides.vars ? { ...overrides.vars } : undefined
-    };
-};
-/**
- * Alias for `mergeTheme()`.
- * This package ships a dark baseline theme; light/custom themes should be provided by the consumer.
- */
-export const createDarkTheme = (overrides = {}) => mergeTheme(overrides);
-/**
- * Set the active theme name on an element via `[data-ease-theme="<name>"]`.
- * Useful for CSS-scoped themes.
- */
-export const setThemeName = (name, options = {}) => {
-    const target = resolveThemeTarget(options.element);
-    if (!target) {
-        return;
-    }
-    const attribute = options.attribute ?? EASE_THEME_ATTRIBUTE;
-    target.setAttribute(attribute, name);
-    if (options.colorScheme && options.setColorScheme !== false) {
-        target.style.colorScheme = options.colorScheme;
-    }
-};
-export const getThemeName = (element, attribute = EASE_THEME_ATTRIBUTE) => {
-    const target = resolveThemeTarget(element);
-    if (!target) {
-        return null;
-    }
-    return target.getAttribute(attribute);
-};
-/**
- * Apply a theme config (and optional theme name + color-scheme) to an element.
- * This is SSR-safe: it becomes a no-op when `document` is not available.
- */
-export const applyTheme = (theme, options = {}) => {
-    const target = resolveThemeTarget(options.element);
-    const attribute = options.attribute ?? EASE_THEME_ATTRIBUTE;
-    const config = options.mergeWithDefaults ? mergeTheme(theme) : theme;
-    defineTheme(config, target);
-    if (!target) {
-        return config;
-    }
-    if (options.name && options.setAttribute !== false) {
-        target.setAttribute(attribute, options.name);
-    }
-    if (options.colorScheme && options.setColorScheme !== false) {
-        target.style.colorScheme = options.colorScheme;
-    }
-    return config;
-};
-export const getSystemThemeMode = () => {
-    if (typeof window === 'undefined' || typeof window.matchMedia !== 'function') {
-        return 'dark';
-    }
-    return window.matchMedia('(prefers-color-scheme: light)').matches ? 'light' : 'dark';
-};
-/**
- * Follow `prefers-color-scheme` and apply the provided themes.
- *
- * This package does NOT ship a light theme preset; you supply both themes.
- * Returns a cleanup function to remove the media query listener.
- */
-export const followSystemTheme = (themes, options = {}) => {
-    if (typeof window === 'undefined' || typeof window.matchMedia !== 'function') {
-        return () => { };
-    }
-    const media = window.matchMedia('(prefers-color-scheme: light)');
-    const apply = () => {
-        const mode = media.matches ? 'light' : 'dark';
-        const theme = mode === 'light' ? themes.light : themes.dark;
-        applyTheme(theme, {
-            ...options,
-            name: mode === 'light' ? (options.lightName ?? 'light') : (options.darkName ?? 'dark'),
-            colorScheme: mode
-        });
-    };
-    apply();
-    media.addEventListener('change', apply);
-    return () => media.removeEventListener('change', apply);
-};

package/build/theme/presets.cjs

@@ -1,54 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.DARK_THEME_ALIAS = exports.DEFAULT_THEME_NAME = exports.defaultThemeConfig = exports.defaultEaseVars = void 0;
-const tokens_1 = require("./tokens.cjs");
-/**
- * Default ease UI kit CSS variables (--ease-*).
- * These are component-level design tokens that components consume.
- */
-exports.defaultEaseVars = {
-    // Typography aliases
-    '--ease-font-family': 'var(--font-family)',
-    '--ease-font-mono': 'var(--font-mono)',
-    '--ease-font-size': 'var(--font-size)',
-    '--ease-font-size-sm': '12px',
-    '--ease-line-height': 'var(--font-line-height)',
-    // Panel (ease-state)
-    '--ease-panel-max-width': '332px',
-    '--ease-panel-padding': 'var(--spacing-md)',
-    '--ease-panel-radius': 'var(--radii-lg)',
-    '--ease-panel-border-color': 'var(--color-white-6)',
-    '--ease-panel-background': 'var(--color-gray-1000)',
-    '--ease-panel-shadow': '0 0 40px 0 var(--color-white-2) inset',
-    '--ease-panel-title-font-size': '14px',
-    '--ease-panel-title-font-weight': '500',
-    '--ease-panel-title-line-height': '24px',
-    '--ease-panel-title-color': 'var(--color-blue-100)',
-    // Field (ease-field)
-    '--ease-field-label-width': '36%',
-    '--ease-field-column-gap': 'var(--spacing-md)',
-    '--ease-field-row-gap': '6px',
-    '--ease-field-min-height': '30px',
-    '--ease-field-label-font-size': 'var(--ease-font-size-sm)',
-    '--ease-field-label-color': 'var(--color-gray-600)',
-    '--ease-field-label-padding-left': '4px'
-};
-/**
- * The complete default (dark) theme configuration.
- * Includes colors, radii, spacing, typography, and component-level --ease-* vars.
- */
-exports.defaultThemeConfig = {
-    colors: tokens_1.defaultColors,
-    radii: tokens_1.defaultRadii,
-    spacing: tokens_1.defaultSpacing,
-    typography: tokens_1.defaultTypography,
-    vars: exports.defaultEaseVars
-};
-/**
- * Default built-in theme name.
- */
-exports.DEFAULT_THEME_NAME = 'default';
-/**
- * Legacy alias for the built-in dark theme.
- */
-exports.DARK_THEME_ALIAS = 'dark';

package/build/theme/presets.d.cts

@@ -1,19 +0,0 @@
-import type { ThemeConfig, ThemeVars } from "./tokens.cjs";
-/**
- * Default ease UI kit CSS variables (--ease-*).
- * These are component-level design tokens that components consume.
- */
-export declare const defaultEaseVars: ThemeVars;
-/**
- * The complete default (dark) theme configuration.
- * Includes colors, radii, spacing, typography, and component-level --ease-* vars.
- */
-export declare const defaultThemeConfig: ThemeConfig;
-/**
- * Default built-in theme name.
- */
-export declare const DEFAULT_THEME_NAME: "default";
-/**
- * Legacy alias for the built-in dark theme.
- */
-export declare const DARK_THEME_ALIAS: "dark";

package/build/theme/presets.d.ts

@@ -1,19 +0,0 @@
-import type { ThemeConfig, ThemeVars } from "./tokens.js";
-/**
- * Default ease UI kit CSS variables (--ease-*).
- * These are component-level design tokens that components consume.
- */
-export declare const defaultEaseVars: ThemeVars;
-/**
- * The complete default (dark) theme configuration.
- * Includes colors, radii, spacing, typography, and component-level --ease-* vars.
- */
-export declare const defaultThemeConfig: ThemeConfig;
-/**
- * Default built-in theme name.
- */
-export declare const DEFAULT_THEME_NAME: "default";
-/**
- * Legacy alias for the built-in dark theme.
- */
-export declare const DARK_THEME_ALIAS: "dark";

package/build/theme/presets.js

@@ -1,51 +0,0 @@
-import { defaultColors, defaultRadii, defaultSpacing, defaultTypography } from "./tokens.js";
-/**
- * Default ease UI kit CSS variables (--ease-*).
- * These are component-level design tokens that components consume.
- */
-export const defaultEaseVars = {
-    // Typography aliases
-    '--ease-font-family': 'var(--font-family)',
-    '--ease-font-mono': 'var(--font-mono)',
-    '--ease-font-size': 'var(--font-size)',
-    '--ease-font-size-sm': '12px',
-    '--ease-line-height': 'var(--font-line-height)',
-    // Panel (ease-state)
-    '--ease-panel-max-width': '332px',
-    '--ease-panel-padding': 'var(--spacing-md)',
-    '--ease-panel-radius': 'var(--radii-lg)',
-    '--ease-panel-border-color': 'var(--color-white-6)',
-    '--ease-panel-background': 'var(--color-gray-1000)',
-    '--ease-panel-shadow': '0 0 40px 0 var(--color-white-2) inset',
-    '--ease-panel-title-font-size': '14px',
-    '--ease-panel-title-font-weight': '500',
-    '--ease-panel-title-line-height': '24px',
-    '--ease-panel-title-color': 'var(--color-blue-100)',
-    // Field (ease-field)
-    '--ease-field-label-width': '36%',
-    '--ease-field-column-gap': 'var(--spacing-md)',
-    '--ease-field-row-gap': '6px',
-    '--ease-field-min-height': '30px',
-    '--ease-field-label-font-size': 'var(--ease-font-size-sm)',
-    '--ease-field-label-color': 'var(--color-gray-600)',
-    '--ease-field-label-padding-left': '4px'
-};
-/**
- * The complete default (dark) theme configuration.
- * Includes colors, radii, spacing, typography, and component-level --ease-* vars.
- */
-export const defaultThemeConfig = {
-    colors: defaultColors,
-    radii: defaultRadii,
-    spacing: defaultSpacing,
-    typography: defaultTypography,
-    vars: defaultEaseVars
-};
-/**
- * Default built-in theme name.
- */
-export const DEFAULT_THEME_NAME = 'default';
-/**
- * Legacy alias for the built-in dark theme.
- */
-export const DARK_THEME_ALIAS = 'dark';