@vobs/ui 0.1.0 → 0.3.0

package/dist/theme-data.d.ts

@@ -66,11 +66,15 @@ export declare const primitiveTokenValues: {
     readonly '--radius-10': "10px";
     readonly '--radius-full': "9999px";
     readonly '--spacer-0': "0px";
+    readonly '--spacer-2': "2px";
     readonly '--spacer-4': "4px";
     readonly '--spacer-6': "6px";
     readonly '--spacer-8': "8px";
+    readonly '--spacer-10': "10px";
     readonly '--spacer-12': "12px";
+    readonly '--spacer-14': "14px";
     readonly '--spacer-16': "16px";
+    readonly '--spacer-20': "20px";
     readonly '--spacer-24': "24px";
     readonly '--spacer-32': "32px";
     readonly '--spacer-40': "40px";
@@ -157,9 +161,11 @@ export declare const primitiveTokenValues: {
     readonly '--code-terminal-font-weight': "450";
     readonly '--code-terminal-line-height': "18px";
     readonly '--font-weight-default': "400";
+    readonly '--font-weight-regular': "var(--font-weight-default)";
     readonly '--font-weight-code': "450";
     readonly '--font-weight-medium': "500";
     readonly '--font-weight-strong': "600";
+    readonly '--font-weight-semibold': "var(--font-weight-strong)";
     readonly '--z-index-dropdown': "2000";
     readonly '--z-index-drawer': "2500";
     readonly '--z-index-modal': "3000";
@@ -207,6 +213,9 @@ export declare const themeTokenValues: {
         readonly '--color-warning': "var(--status-warning-default)";
         readonly '--color-error': "var(--status-error-default)";
         readonly '--color-error-soft': "var(--status-error-surface-l1)";
+        readonly '--color-foreground-muted': "var(--text-secondary)";
+        readonly '--accent-blue': "var(--status-primary-default)";
+        readonly '--code-string': "var(--code-text)";
         readonly '--bg-base-default': "#1A1B1D";
         readonly '--bg-base-secondary': "#222427";
         readonly '--bg-base-tertiary': "#2A2D31";
@@ -321,25 +330,46 @@ export declare const themeTokenValues: {
         readonly '--color-warning': "var(--status-warning-default)";
         readonly '--color-error': "var(--status-error-default)";
         readonly '--color-error-soft': "var(--status-error-surface-l1)";
+        readonly '--color-foreground-muted': "var(--text-secondary)";
+        readonly '--accent-blue': "var(--status-primary-default)";
+        readonly '--code-string': "var(--code-text)";
         readonly '--bg-base-default': "#FFFFFF";
         readonly '--bg-base-secondary': "#F5F6F8";
         readonly '--bg-base-tertiary': "#EDF0F5";
+        readonly '--bg-tooltip': "#0F1117";
+        readonly '--bg-menu': "#FFFFFF";
+        readonly '--bg-invert': "#0F1117";
+        readonly '--bg-invert-hover': "#1F2937";
+        readonly '--bg-invert-active': "#374151";
+        readonly '--bg-invert-disabled': "rgba(15, 17, 23, 0.12)";
         readonly '--bg-overlay-l1': "rgba(0, 0, 0, 0.04)";
         readonly '--bg-overlay-l2': "rgba(0, 0, 0, 0.06)";
         readonly '--bg-overlay-l3': "rgba(0, 0, 0, 0.08)";
         readonly '--bg-overlay-l4': "rgba(0, 0, 0, 0.12)";
         readonly '--text-default': "#0F1117";
+        readonly '--text-default-hover': "#000000";
+        readonly '--text-default-active': "#000000";
         readonly '--text-secondary': "#4B5563";
+        readonly '--text-secondary-hover': "#1F2937";
+        readonly '--text-secondary-active': "#1F2937";
         readonly '--text-tertiary': "#5B6370";
         readonly '--text-disabled': "#525A68";
         readonly '--text-onbrand': "#FFFFFF";
+        readonly '--text-onaccent': "#FFFFFF";
         readonly '--icon-default': "#0F1117";
+        readonly '--icon-default-hover': "#000000";
+        readonly '--icon-default-active': "#000000";
         readonly '--icon-secondary': "#4B5563";
+        readonly '--icon-secondary-hover': "#1F2937";
+        readonly '--icon-secondary-active': "#1F2937";
         readonly '--icon-tertiary': "#5B6370";
         readonly '--icon-disabled': "#525A68";
+        readonly '--icon-onbrand': "#FFFFFF";
+        readonly '--icon-onaccent': "#FFFFFF";
         readonly '--border-neutral-l1': "rgba(0, 0, 0, 0.12)";
         readonly '--border-neutral-l2': "rgba(0, 0, 0, 0.18)";
         readonly '--border-neutral-l3': "rgba(0, 0, 0, 0.25)";
+        readonly '--border-contrast': "#0F1117";
         readonly '--status-success-default': "#16A34A";
         readonly '--status-warning-default': "#CA8A04";
         readonly '--status-error-default': "#DC2626";
@@ -359,5 +389,6 @@ export interface BrandTokens {
 }
 export declare function resolveBrandColor(value?: BrandInput): BrandColor;
 export declare function deriveBrandTokens(color: string): BrandTokens;
+export declare function deriveBrandTextColor(color: string): string;
 export declare function normalizeHexColor(value: string): string;
 export declare function contrastRatio(left: string, right: string): number;

package/dist/theme-data.js

@@ -25,11 +25,15 @@ export const primitiveTokenValues = {
     '--radius-10': '10px',
     '--radius-full': '9999px',
     '--spacer-0': '0px',
+    '--spacer-2': '2px',
     '--spacer-4': '4px',
     '--spacer-6': '6px',
     '--spacer-8': '8px',
+    '--spacer-10': '10px',
     '--spacer-12': '12px',
+    '--spacer-14': '14px',
     '--spacer-16': '16px',
+    '--spacer-20': '20px',
     '--spacer-24': '24px',
     '--spacer-32': '32px',
     '--spacer-40': '40px',
@@ -116,9 +120,11 @@ export const primitiveTokenValues = {
     '--code-terminal-font-weight': '450',
     '--code-terminal-line-height': '18px',
     '--font-weight-default': '400',
+    '--font-weight-regular': 'var(--font-weight-default)',
     '--font-weight-code': '450',
     '--font-weight-medium': '500',
     '--font-weight-strong': '600',
+    '--font-weight-semibold': 'var(--font-weight-strong)',
     '--z-index-dropdown': '2000',
     '--z-index-drawer': '2500',
     '--z-index-modal': '3000',
@@ -165,6 +171,9 @@ const semanticAliases = {
     '--color-warning': 'var(--status-warning-default)',
     '--color-error': 'var(--status-error-default)',
     '--color-error-soft': 'var(--status-error-surface-l1)',
+    '--color-foreground-muted': 'var(--text-secondary)',
+    '--accent-blue': 'var(--status-primary-default)',
+    '--code-string': 'var(--code-text)',
 };
 export const themeTokenValues = {
     dark: {
@@ -254,22 +263,40 @@ export const themeTokenValues = {
         '--bg-base-default': '#FFFFFF',
         '--bg-base-secondary': '#F5F6F8',
         '--bg-base-tertiary': '#EDF0F5',
+        '--bg-tooltip': '#0F1117',
+        '--bg-menu': '#FFFFFF',
+        '--bg-invert': '#0F1117',
+        '--bg-invert-hover': '#1F2937',
+        '--bg-invert-active': '#374151',
+        '--bg-invert-disabled': 'rgba(15, 17, 23, 0.12)',
         '--bg-overlay-l1': 'rgba(0, 0, 0, 0.04)',
         '--bg-overlay-l2': 'rgba(0, 0, 0, 0.06)',
         '--bg-overlay-l3': 'rgba(0, 0, 0, 0.08)',
         '--bg-overlay-l4': 'rgba(0, 0, 0, 0.12)',
         '--text-default': '#0F1117',
+        '--text-default-hover': '#000000',
+        '--text-default-active': '#000000',
         '--text-secondary': '#4B5563',
+        '--text-secondary-hover': '#1F2937',
+        '--text-secondary-active': '#1F2937',
         '--text-tertiary': '#5B6370',
         '--text-disabled': '#525A68',
         '--text-onbrand': '#FFFFFF',
+        '--text-onaccent': '#FFFFFF',
         '--icon-default': '#0F1117',
+        '--icon-default-hover': '#000000',
+        '--icon-default-active': '#000000',
         '--icon-secondary': '#4B5563',
+        '--icon-secondary-hover': '#1F2937',
+        '--icon-secondary-active': '#1F2937',
         '--icon-tertiary': '#5B6370',
         '--icon-disabled': '#525A68',
+        '--icon-onbrand': '#FFFFFF',
+        '--icon-onaccent': '#FFFFFF',
         '--border-neutral-l1': 'rgba(0, 0, 0, 0.12)',
         '--border-neutral-l2': 'rgba(0, 0, 0, 0.18)',
         '--border-neutral-l3': 'rgba(0, 0, 0, 0.25)',
+        '--border-contrast': '#0F1117',
         '--status-success-default': '#16A34A',
         '--status-warning-default': '#CA8A04',
         '--status-error-default': '#DC2626',
@@ -319,6 +346,22 @@ export function deriveBrandTokens(color) {
             : '#0C0C0D',
     };
 }
+export function deriveBrandTextColor(color) {
+    const normalized = normalizeHexColor(color);
+    if (contrastRatio(normalized, '#FFFFFF') >= 4.5)
+        return normalized;
+    let low = 0;
+    let high = 1;
+    for (let index = 0; index < 24; index += 1) {
+        const amount = (low + high) / 2;
+        const candidate = mixHex(normalized, '#000000', amount);
+        if (contrastRatio(candidate, '#FFFFFF') >= 4.5)
+            high = amount;
+        else
+            low = amount;
+    }
+    return mixHex(normalized, '#000000', high);
+}
 export function normalizeHexColor(value) {
     const input = value.trim();
     const short = /^#?([0-9a-f]{3})$/iu.exec(input);

package/dist/theme.d.ts

@@ -3,7 +3,7 @@
  * @vobs/ui
  */
 import { type BrandColor, type BrandInput, type ThemeName } from './theme-data.js';
-export { brandPresets, contrastRatio, DEFAULT_BRAND_COLOR, DEFAULT_BRAND_ID, DEFAULT_THEME, deriveBrandTokens, normalizeHexColor, resolveBrandColor, type BrandColor, type BrandColorInput, type BrandInput, type BrandTokens, type ThemeName, } from './theme-data.js';
+export { brandPresets, contrastRatio, DEFAULT_BRAND_COLOR, DEFAULT_BRAND_ID, DEFAULT_THEME, deriveBrandTokens, deriveBrandTextColor, normalizeHexColor, resolveBrandColor, type BrandColor, type BrandColorInput, type BrandInput, type BrandTokens, type ThemeName, } from './theme-data.js';
 export interface ThemeStyleTarget {
     setProperty(name: string, value: string): void;
     removeProperty(name: string): string;
@@ -15,6 +15,7 @@ export interface ThemeTarget {
 export interface ThemePersistence {
     readTheme?(): unknown;
     writeTheme?(theme: ThemeName): void;
+    writeSystemTheme?(): void;
     readBrand?(): unknown;
     writeBrand?(brand: BrandColor): void;
 }
@@ -39,9 +40,24 @@ export interface ThemeState {
     readonly theme: ThemeName;
     readonly brand: BrandColor;
 }
+export type ThemePreference = ThemeName | 'system';
+export declare const THEME_PREFERENCE_CHANGE_EVENT = "vobs:theme-preference-change";
+export declare const THEME_STATE_CHANGE_EVENT = "vobs:theme-state-change";
+export interface ThemePreferenceChangeDetail {
+    readonly shellId?: string;
+    readonly theme?: ThemePreference;
+    readonly brand?: BrandInput;
+}
+export interface ThemeStateChangeDetail {
+    readonly shellId: string;
+    readonly theme: ThemeName;
+    readonly preference: ThemePreference;
+    readonly brand: BrandColor;
+}
 export interface ThemeControllerOptions {
     readonly target: ThemeTarget;
     readonly initialTheme?: ThemeName;
+    readonly initialPreference?: ThemePreference;
     readonly initialBrand?: BrandInput;
     readonly persistence?: ThemePersistence;
     readonly systemPreference?: SystemThemePreference;
@@ -49,9 +65,11 @@ export interface ThemeControllerOptions {
 }
 export interface ThemeController {
     readonly theme: ThemeName;
+    readonly preference: ThemePreference;
     readonly brand: BrandColor;
     readonly state: ThemeState;
     setTheme(theme: ThemeName): void;
+    setPreference(preference: ThemePreference): void;
     toggleTheme(): ThemeName;
     setBrand(brand: BrandInput): BrandColor;
     subscribe(listener: (state: ThemeState) => void): () => void;

package/dist/theme.js

@@ -2,8 +2,10 @@
  * Copyright (c) 2026 vobsjs
  * @vobs/ui
  */
-import { brandPresets, contrastRatio, DEFAULT_BRAND_ID, DEFAULT_THEME, deriveBrandTokens, resolveBrandColor, themeTokenValues, } from './theme-data.js';
-export { brandPresets, contrastRatio, DEFAULT_BRAND_COLOR, DEFAULT_BRAND_ID, DEFAULT_THEME, deriveBrandTokens, normalizeHexColor, resolveBrandColor, } from './theme-data.js';
+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',
@@ -26,24 +28,21 @@ const brandVariableNames = [
 ];
 export function createThemeController(options) {
     const listeners = new Set();
-    const persistedTheme = readPersistedTheme(options.persistence);
-    let followsSystem = persistedTheme === undefined && options.systemPreference !== undefined;
-    let theme = persistedTheme ?? options.systemPreference?.read() ?? options.initialTheme ?? DEFAULT_THEME;
+    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);
-    if (followsSystem) {
-        stopSystemPreference = options.systemPreference?.subscribe?.((nextTheme) => {
-            if (destroyed || !followsSystem)
-                return;
-            theme = nextTheme;
-            applyTheme(options.target, theme);
-            notify();
-        });
-    }
+    applyBrand(options.target, brand, theme);
+    subscribeToSystemPreference();
     function state() {
         return { theme, brand };
     }
@@ -53,19 +52,43 @@ export function createThemeController(options) {
             listener(value);
     }
     function setTheme(nextTheme) {
-        assertTheme(nextTheme);
-        followsSystem = false;
+        setPreference(nextTheme);
+    }
+    function setPreference(nextPreference) {
+        assertThemePreference(nextPreference);
+        followsSystem = nextPreference === 'system';
         stopSystemPreference?.();
         stopSystemPreference = undefined;
-        theme = nextTheme;
+        preference = nextPreference;
+        theme = resolveTheme(preference, options);
         applyTheme(options.target, theme);
-        options.persistence?.writeTheme?.(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;
         },
@@ -73,6 +96,7 @@ export function createThemeController(options) {
             return state();
         },
         setTheme,
+        setPreference,
         toggleTheme() {
             const nextTheme = theme === 'dark' ? 'light' : 'dark';
             setTheme(nextTheme);
@@ -80,7 +104,7 @@ export function createThemeController(options) {
         },
         setBrand(nextBrand) {
             brand = readBrand(nextBrand, options.onWarning);
-            applyBrand(options.target, brand);
+            applyBrand(options.target, brand, theme);
             options.persistence?.writeBrand?.(brand);
             notify();
             return brand;
@@ -110,6 +134,9 @@ export function createStorageThemePersistence(storage, keys = {}) {
         writeTheme(theme) {
             storage.setItem(themeKey, theme);
         },
+        writeSystemTheme() {
+            storage.setItem(themeKey, 'system');
+        },
         readBrand() {
             const stored = storage.getItem(brandKey);
             if (stored === null)
@@ -148,18 +175,23 @@ export function createThemeAttributes(state) {
     const attributes = {
         'data-theme': state.theme,
         'data-brand': state.brand.id,
-        ...(isPresetBrand(state.brand) ? {} : { style: serializeBrandStyle(state.brand) }),
+        ...(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);
+    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 : undefined;
+    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?.();
@@ -191,30 +223,32 @@ function readBrand(value, onWarning) {
 function applyTheme(target, theme) {
     target.setAttribute('data-theme', theme);
 }
-function applyBrand(target, brand) {
+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))) {
+    for (const [name, value] of Object.entries(brandCssVariables(brand, theme))) {
         target.style.setProperty(name, value);
     }
 }
-function brandCssVariables(brand) {
+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': tokens.background,
-        '--text-brand-hover': tokens.hover,
-        '--icon-brand': tokens.background,
-        '--icon-brand-hover': tokens.hover,
-        '--border-brand': tokens.background,
+        '--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,
@@ -225,8 +259,8 @@ function brandCssVariables(brand) {
         '--color-on-primary': tokens.onBrand,
     };
 }
-function serializeBrandStyle(brand) {
-    return Object.entries(brandCssVariables(brand))
+function serializeBrandStyle(brand, theme) {
+    return Object.entries(brandCssVariables(brand, theme))
         .map(([name, value]) => `${name}:${value}`)
         .join(';');
 }
@@ -245,6 +279,11 @@ 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).