@vobs/ui 0.3.0 → 1.0.0

package/dist/theme.js

@@ -1,301 +0,0 @@
-/** @license MIT
- * Copyright (c) 2026 vobsjs
- * @vobs/ui
- */
-import { brandPresets, contrastRatio, DEFAULT_BRAND_ID, DEFAULT_THEME, deriveBrandTokens, deriveBrandTextColor, resolveBrandColor, themeTokenValues, } from './theme-data.js';
-export { brandPresets, contrastRatio, DEFAULT_BRAND_COLOR, DEFAULT_BRAND_ID, DEFAULT_THEME, deriveBrandTokens, deriveBrandTextColor, normalizeHexColor, resolveBrandColor, } from './theme-data.js';
-export const THEME_PREFERENCE_CHANGE_EVENT = 'vobs:theme-preference-change';
-export const THEME_STATE_CHANGE_EVENT = 'vobs:theme-state-change';
-const brandVariableNames = [
-    '--bg-brand',
-    '--bg-brand-hover',
-    '--bg-brand-disabled',
-    '--bg-brand-popup',
-    '--bg-brand-overlay',
-    '--text-brand',
-    '--text-brand-hover',
-    '--icon-brand',
-    '--icon-brand-hover',
-    '--border-brand',
-    '--text-onbrand',
-    '--icon-onbrand',
-    '--color-primary',
-    '--color-primary-hover',
-    '--color-primary-disabled',
-    '--color-primary-soft',
-    '--color-accent',
-    '--color-on-primary',
-];
-export function createThemeController(options) {
-    const listeners = new Set();
-    const persistedPreference = readPersistedTheme(options.persistence);
-    let preference = persistedPreference ??
-        options.initialPreference ??
-        (options.initialTheme === undefined && options.systemPreference !== undefined
-            ? 'system'
-            : (options.initialTheme ?? DEFAULT_THEME));
-    let followsSystem = preference === 'system';
-    let theme = resolveTheme(preference, options);
-    let brand = readPersistedBrand(options.persistence, options.onWarning) ??
-        readBrand(options.initialBrand ?? DEFAULT_BRAND_ID, options.onWarning);
-    let stopSystemPreference;
-    let destroyed = false;
-    applyTheme(options.target, theme);
-    applyBrand(options.target, brand, theme);
-    subscribeToSystemPreference();
-    function state() {
-        return { theme, brand };
-    }
-    function notify() {
-        const value = state();
-        for (const listener of listeners)
-            listener(value);
-    }
-    function setTheme(nextTheme) {
-        setPreference(nextTheme);
-    }
-    function setPreference(nextPreference) {
-        assertThemePreference(nextPreference);
-        followsSystem = nextPreference === 'system';
-        stopSystemPreference?.();
-        stopSystemPreference = undefined;
-        preference = nextPreference;
-        theme = resolveTheme(preference, options);
-        applyTheme(options.target, theme);
-        applyBrand(options.target, brand, theme);
-        if (preference === 'system')
-            options.persistence?.writeSystemTheme?.();
-        else
-            options.persistence?.writeTheme?.(theme);
-        subscribeToSystemPreference();
-        notify();
-    }
-    function subscribeToSystemPreference() {
-        if (!followsSystem || options.systemPreference?.subscribe === undefined)
-            return;
-        stopSystemPreference = options.systemPreference.subscribe((nextTheme) => {
-            if (destroyed || !followsSystem)
-                return;
-            theme = nextTheme;
-            applyTheme(options.target, theme);
-            applyBrand(options.target, brand, theme);
-            notify();
-        });
-    }
-    return {
-        get theme() {
-            return theme;
-        },
-        get preference() {
-            return preference;
-        },
-        get brand() {
-            return brand;
-        },
-        get state() {
-            return state();
-        },
-        setTheme,
-        setPreference,
-        toggleTheme() {
-            const nextTheme = theme === 'dark' ? 'light' : 'dark';
-            setTheme(nextTheme);
-            return nextTheme;
-        },
-        setBrand(nextBrand) {
-            brand = readBrand(nextBrand, options.onWarning);
-            applyBrand(options.target, brand, theme);
-            options.persistence?.writeBrand?.(brand);
-            notify();
-            return brand;
-        },
-        subscribe(listener) {
-            listeners.add(listener);
-            return () => listeners.delete(listener);
-        },
-        destroy() {
-            if (destroyed)
-                return;
-            destroyed = true;
-            followsSystem = false;
-            stopSystemPreference?.();
-            stopSystemPreference = undefined;
-            listeners.clear();
-        },
-    };
-}
-export function createStorageThemePersistence(storage, keys = {}) {
-    const themeKey = keys.theme ?? 'vobs-theme';
-    const brandKey = keys.brand ?? 'vobs-brand-color';
-    return {
-        readTheme() {
-            return storage.getItem(themeKey);
-        },
-        writeTheme(theme) {
-            storage.setItem(themeKey, theme);
-        },
-        writeSystemTheme() {
-            storage.setItem(themeKey, 'system');
-        },
-        readBrand() {
-            const stored = storage.getItem(brandKey);
-            if (stored === null)
-                return undefined;
-            try {
-                return JSON.parse(stored);
-            }
-            catch {
-                return stored;
-            }
-        },
-        writeBrand(brand) {
-            storage.setItem(brandKey, JSON.stringify(brand));
-        },
-    };
-}
-export function createMediaThemePreference(query) {
-    return {
-        read() {
-            return query.matches ? 'light' : 'dark';
-        },
-        subscribe(listener) {
-            const handleChange = (event) => {
-                listener(event.matches ? 'light' : 'dark');
-            };
-            query.addEventListener('change', handleChange);
-            return () => query.removeEventListener('change', handleChange);
-        },
-    };
-}
-export function createThemeState(theme = DEFAULT_THEME, brand = DEFAULT_BRAND_ID) {
-    assertTheme(theme);
-    return { theme, brand: resolveBrandColor(brand) };
-}
-export function createThemeAttributes(state) {
-    const attributes = {
-        'data-theme': state.theme,
-        'data-brand': state.brand.id,
-        ...(isPresetBrand(state.brand) ? {} : { style: serializeBrandStyle(state.brand, state.theme) }),
-    };
-    return attributes;
-}
-export function createThemeBootstrapScript(state) {
-    const attributes = createThemeAttributes(state);
-    const variables = isPresetBrand(state.brand) ? {} : brandCssVariables(state.brand, state.theme);
-    return `(function(){var d=document.documentElement;d.setAttribute("data-theme",${JSON.stringify(attributes['data-theme'])});d.setAttribute("data-brand",${JSON.stringify(attributes['data-brand'])});var v=${JSON.stringify(variables)};for(var k in v){d.style.setProperty(k,v[k])}})()`;
-}
-function readPersistedTheme(persistence) {
-    const value = persistence?.readTheme?.();
-    return value === 'dark' || value === 'light' || value === 'system' ? value : undefined;
-}
-function resolveTheme(preference, options) {
-    return preference === 'system'
-        ? (options.systemPreference?.read() ?? options.initialTheme ?? DEFAULT_THEME)
-        : preference;
-}
-function readPersistedBrand(persistence, onWarning) {
-    const value = persistence?.readBrand?.();
-    try {
-        if (typeof value === 'string')
-            return readBrand(value, onWarning);
-        if (isBrandColorInput(value))
-            return readBrand(value, onWarning);
-    }
-    catch {
-        onWarning?.('Ignored invalid persisted brand color');
-        return undefined;
-    }
-    if (value !== undefined && value !== null)
-        onWarning?.('Ignored invalid persisted brand color');
-    return undefined;
-}
-function readBrand(value, onWarning) {
-    const brand = resolveBrandColor(value);
-    if (!isPresetBrand(brand)) {
-        const darkContrast = contrastRatio(brand.color, themeTokenValues.dark['--bg-base-default']);
-        const lightContrast = contrastRatio(brand.color, themeTokenValues.light['--bg-base-default']);
-        if (Math.min(darkContrast, lightContrast) < 3) {
-            onWarning?.(`Custom brand ${brand.color} has low contrast against a theme background`);
-        }
-    }
-    return brand;
-}
-function applyTheme(target, theme) {
-    target.setAttribute('data-theme', theme);
-}
-function applyBrand(target, brand, theme) {
-    target.setAttribute('data-brand', brand.id);
-    if (isPresetBrand(brand)) {
-        for (const name of brandVariableNames)
-            target.style.removeProperty(name);
-        return;
-    }
-    for (const [name, value] of Object.entries(brandCssVariables(brand, theme))) {
-        target.style.setProperty(name, value);
-    }
-}
-function brandCssVariables(brand, theme = DEFAULT_THEME) {
-    const tokens = deriveBrandTokens(brand.color);
-    const readable = theme === 'light' ? deriveBrandTextColor(brand.color) : tokens.background;
-    const readableHover = theme === 'light' ? deriveBrandTextColor(tokens.hover) : tokens.hover;
-    return {
-        '--bg-brand': tokens.background,
-        '--bg-brand-hover': tokens.hover,
-        '--bg-brand-disabled': tokens.disabled,
-        '--bg-brand-popup': tokens.soft,
-        '--bg-brand-overlay': tokens.soft,
-        '--text-brand': readable,
-        '--text-brand-hover': readableHover,
-        '--icon-brand': readable,
-        '--icon-brand-hover': readableHover,
-        '--border-brand': readable,
-        '--text-onbrand': tokens.onBrand,
-        '--icon-onbrand': tokens.onBrand,
-        '--color-primary': tokens.background,
-        '--color-primary-hover': tokens.hover,
-        '--color-primary-disabled': tokens.disabled,
-        '--color-primary-soft': tokens.soft,
-        '--color-accent': tokens.background,
-        '--color-on-primary': tokens.onBrand,
-    };
-}
-function serializeBrandStyle(brand, theme) {
-    return Object.entries(brandCssVariables(brand, theme))
-        .map(([name, value]) => `${name}:${value}`)
-        .join(';');
-}
-function isPresetBrand(brand) {
-    return brandPresets.some((preset) => preset.id === brand.id && preset.color === brand.color);
-}
-function isBrandColorInput(value) {
-    return (typeof value === 'object' &&
-        value !== null &&
-        'color' in value &&
-        typeof value.color === 'string' &&
-        (!('id' in value) || value.id === undefined || typeof value.id === 'string') &&
-        (!('label' in value) || value.label === undefined || typeof value.label === 'string'));
-}
-function assertTheme(theme) {
-    if (theme !== 'dark' && theme !== 'light')
-        throw new TypeError(`Invalid theme: ${theme}`);
-}
-function assertThemePreference(preference) {
-    if (preference !== 'dark' && preference !== 'light' && preference !== 'system') {
-        throw new TypeError(`Invalid theme preference: ${preference}`);
-    }
-}
-/**
- * Reads a design-token value (CSS variable) for the active theme, for third-party adapters (contract ui-adapters.md §3.1).
- * Data source: tokens.css variables on html[data-theme] (getComputedStyle reads the latest effective value).
- * Returns undefined without a document (SSR/non-browser) or when the variable is undefined — adapters must degrade gracefully.
- */
-export function resolveUiToken(name) {
-    const doc = globalThis.document;
-    if (doc === undefined)
-        return undefined;
-    const value = doc.defaultView
-        ?.getComputedStyle(doc.documentElement)
-        .getPropertyValue(name)
-        .trim();
-    return value === undefined || value === '' ? undefined : value;
-}