@vobs/ui 0.2.0 → 0.3.0

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).

package/dist/tokens.css

@@ -8,11 +8,15 @@
     --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;
@@ -99,9 +103,11 @@
     --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;
@@ -231,6 +237,9 @@
     --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);
   }
 
   [data-theme="light"] {
@@ -238,22 +247,40 @@
     --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;
@@ -294,6 +321,9 @@
     --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);
   }
 
   :root,
@@ -312,6 +342,16 @@
     --icon-onbrand: #0C0C0D;
   }
 
+  [data-theme="light"],
+  [data-theme="light"][data-brand="green"],
+  [data-theme="light"] [data-brand="green"] {
+    --text-brand: #1C874F;
+    --text-brand-hover: #09884A;
+    --icon-brand: #1C874F;
+    --icon-brand-hover: #09884A;
+    --border-brand: #1C874F;
+  }
+
   [data-brand="blue"] {
     --bg-brand: #80C1FF;
     --bg-brand-hover: #6EA6DB;
@@ -327,6 +367,15 @@
     --icon-onbrand: #0C0C0D;
   }
 
+  [data-theme="light"][data-brand="blue"],
+  [data-theme="light"] [data-brand="blue"] {
+    --text-brand: #517AA2;
+    --text-brand-hover: #517AA2;
+    --icon-brand: #517AA2;
+    --icon-brand-hover: #517AA2;
+    --border-brand: #517AA2;
+  }
+
   [data-brand="purple"] {
     --bg-brand: #8E80FF;
     --bg-brand-hover: #9E92FF;
@@ -342,6 +391,15 @@
     --icon-onbrand: #0C0C0D;
   }
 
+  [data-theme="light"][data-brand="purple"],
+  [data-theme="light"] [data-brand="purple"] {
+    --text-brand: #7468D0;
+    --text-brand-hover: #756CBE;
+    --icon-brand: #7468D0;
+    --icon-brand-hover: #756CBE;
+    --border-brand: #7468D0;
+  }
+
   [data-brand="yellow"] {
     --bg-brand: #FFD080;
     --bg-brand-hover: #DBB36E;
@@ -357,6 +415,15 @@
     --icon-onbrand: #0C0C0D;
   }
 
+  [data-theme="light"][data-brand="yellow"],
+  [data-theme="light"] [data-brand="yellow"] {
+    --text-brand: #8C7347;
+    --text-brand-hover: #8C7347;
+    --icon-brand: #8C7347;
+    --icon-brand-hover: #8C7347;
+    --border-brand: #8C7347;
+  }
+
   [data-brand="red"] {
     --bg-brand: #FF8080;
     --bg-brand-hover: #DB6E6E;
@@ -372,6 +439,15 @@
     --icon-onbrand: #0C0C0D;
   }
 
+  [data-theme="light"][data-brand="red"],
+  [data-theme="light"] [data-brand="red"] {
+    --text-brand: #B65B5B;
+    --text-brand-hover: #B65B5B;
+    --icon-brand: #B65B5B;
+    --icon-brand-hover: #B65B5B;
+    --border-brand: #B65B5B;
+  }
+
   [data-brand="teal"] {
     --bg-brand: #2DD288;
     --bg-brand-hover: #27B575;
@@ -387,6 +463,15 @@
     --icon-onbrand: #0C0C0D;
   }
 
+  [data-theme="light"][data-brand="teal"],
+  [data-theme="light"] [data-brand="teal"] {
+    --text-brand: #1D8758;
+    --text-brand-hover: #1D8758;
+    --icon-brand: #1D8758;
+    --icon-brand-hover: #1D8758;
+    --border-brand: #1D8758;
+  }
+
   [data-brand="cyan"] {
     --bg-brand: #04CBE5;
     --bg-brand-hover: #27D2E9;
@@ -402,6 +487,15 @@
     --icon-onbrand: #0C0C0D;
   }
 
+  [data-theme="light"][data-brand="cyan"],
+  [data-theme="light"] [data-brand="cyan"] {
+    --text-brand: #038293;
+    --text-brand-hover: #188291;
+    --icon-brand: #038293;
+    --icon-brand-hover: #188291;
+    --border-brand: #038293;
+  }
+
   [data-brand="violet"] {
     --bg-brand: #BFA5FF;
     --bg-brand-hover: #A48EDB;
@@ -417,6 +511,15 @@
     --icon-onbrand: #0C0C0D;
   }
 
+  [data-theme="light"][data-brand="violet"],
+  [data-theme="light"] [data-brand="violet"] {
+    --text-brand: #7F6DA9;
+    --text-brand-hover: #7E6DA9;
+    --icon-brand: #7F6DA9;
+    --icon-brand-hover: #7E6DA9;
+    --border-brand: #7F6DA9;
+  }
+
   [data-brand="slate"] {
     --bg-brand: #AFB9CF;
     --bg-brand-hover: #979FB2;
@@ -432,6 +535,15 @@
     --icon-onbrand: #0C0C0D;
   }
 
+  [data-theme="light"][data-brand="slate"],
+  [data-theme="light"] [data-brand="slate"] {
+    --text-brand: #707785;
+    --text-brand-hover: #717685;
+    --icon-brand: #707785;
+    --icon-brand-hover: #717685;
+    --border-brand: #707785;
+  }
+
   [data-brand="neutral"] {
     --bg-brand: #BABABA;
     --bg-brand-hover: #A0A0A0;
@@ -446,4 +558,13 @@
     --text-onbrand: #0C0C0D;
     --icon-onbrand: #0C0C0D;
   }
+
+  [data-theme="light"][data-brand="neutral"],
+  [data-theme="light"] [data-brand="neutral"] {
+    --text-brand: #767676;
+    --text-brand-hover: #767676;
+    --icon-brand: #767676;
+    --icon-brand-hover: #767676;
+    --border-brand: #767676;
+  }
 }

package/dist/tree.js

@@ -102,13 +102,17 @@ export function createTreeLazyLoadStateContract(options) {
     const loadedIds = normalizeTreeIds(options.loadedIds, knownIds);
     const errorIds = normalizeTreeIds(options.errorIds, knownIds);
     const retryableIds = normalizeTreeIds(options.retryableIds, knownIds);
+    const loadingSet = new Set(loadingIds);
+    const loadedSet = new Set(loadedIds);
+    const errorSet = new Set(errorIds);
+    const retryableSet = new Set(retryableIds);
     const nodeContracts = options.nodes.map((node) => treeLazyLoadNodeContract(node, {
         disabled,
         error: options.errors?.[node.id],
-        loading: loadingIds.includes(node.id),
-        loaded: loadedIds.includes(node.id),
-        errored: errorIds.includes(node.id),
-        retryable: retryableIds.includes(node.id),
+        loading: loadingSet.has(node.id),
+        loaded: loadedSet.has(node.id),
+        errored: errorSet.has(node.id),
+        retryable: retryableSet.has(node.id),
     }));
     const nodes = options.nodes.map((node, index) => treeNodeWithLazyContract(node, nodeContracts[index]));
     const loadableCount = nodeContracts.filter((node) => node.lazy).length;
@@ -405,9 +409,11 @@ function normalizeTreeIds(ids, knownIds) {
     if (ids === undefined)
         return [];
     const result = [];
+    const seen = new Set();
     for (const id of ids) {
-        if (!knownIds.has(id) || result.includes(id))
+        if (!knownIds.has(id) || seen.has(id))
             continue;
+        seen.add(id);
         result.push(id);
     }
     return result;