@vobs/ui 0.2.0 → 1.0.0

package/dist/theme.js

@@ -1,262 +0,0 @@
-/** @license MIT
- * 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';
-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 persistedTheme = readPersistedTheme(options.persistence);
-    let followsSystem = persistedTheme === undefined && options.systemPreference !== undefined;
-    let theme = persistedTheme ?? options.systemPreference?.read() ?? options.initialTheme ?? DEFAULT_THEME;
-    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();
-        });
-    }
-    function state() {
-        return { theme, brand };
-    }
-    function notify() {
-        const value = state();
-        for (const listener of listeners)
-            listener(value);
-    }
-    function setTheme(nextTheme) {
-        assertTheme(nextTheme);
-        followsSystem = false;
-        stopSystemPreference?.();
-        stopSystemPreference = undefined;
-        theme = nextTheme;
-        applyTheme(options.target, theme);
-        options.persistence?.writeTheme?.(theme);
-        notify();
-    }
-    return {
-        get theme() {
-            return theme;
-        },
-        get brand() {
-            return brand;
-        },
-        get state() {
-            return state();
-        },
-        setTheme,
-        toggleTheme() {
-            const nextTheme = theme === 'dark' ? 'light' : 'dark';
-            setTheme(nextTheme);
-            return nextTheme;
-        },
-        setBrand(nextBrand) {
-            brand = readBrand(nextBrand, options.onWarning);
-            applyBrand(options.target, brand);
-            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);
-        },
-        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) }),
-    };
-    return attributes;
-}
-export function createThemeBootstrapScript(state) {
-    const attributes = createThemeAttributes(state);
-    const variables = isPresetBrand(state.brand) ? {} : brandCssVariables(state.brand);
-    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;
-}
-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) {
-    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))) {
-        target.style.setProperty(name, value);
-    }
-}
-function brandCssVariables(brand) {
-    const tokens = deriveBrandTokens(brand.color);
-    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-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) {
-    return Object.entries(brandCssVariables(brand))
-        .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}`);
-}
-/**
- * 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;
-}

package/dist/tokens.css

@@ -1,449 +0,0 @@
-@layer vobs.tokens, vobs.base, vobs.components, vobs.utilities, vobs.application;
-@layer vobs.tokens {
-  :root {
-    --radius-2: 2px;
-    --radius-4: 4px;
-    --radius-6: 6px;
-    --radius-8: 8px;
-    --radius-10: 10px;
-    --radius-full: 9999px;
-    --spacer-0: 0px;
-    --spacer-4: 4px;
-    --spacer-6: 6px;
-    --spacer-8: 8px;
-    --spacer-12: 12px;
-    --spacer-16: 16px;
-    --spacer-24: 24px;
-    --spacer-32: 32px;
-    --spacer-40: 40px;
-    --k-icon-xs: 14px;
-    --k-icon-sm: 16px;
-    --k-icon-md: 20px;
-    --k-icon-lg: 24px;
-    --font-family-default: SF Pro Text;
-    --font-family-heading: SF Pro;
-    --font-family-mono: JetBrains Mono;
-    --font-family-base: var(--font-family-default);
-    --font-family-heading-alias: var(--font-family-heading);
-    --font-family-mono-alias: var(--font-family-mono);
-    --body-xs-font-family: "SF Pro Text", system-ui, -apple-system, sans-serif;
-    --body-xs-font-size: 10px;
-    --body-xs-font-weight: 400;
-    --body-xs-line-height: 14px;
-    --body-sm-font-family: "SF Pro Text", system-ui, -apple-system, sans-serif;
-    --body-sm-font-size: 11px;
-    --body-sm-font-weight: 400;
-    --body-sm-line-height: 16px;
-    --body-sm-strong-font-family: "SF Pro Text", system-ui, -apple-system, sans-serif;
-    --body-sm-strong-font-size: 11px;
-    --body-sm-strong-font-weight: 500;
-    --body-sm-strong-line-height: 16px;
-    --body-md-font-family: "SF Pro Text", system-ui, -apple-system, sans-serif;
-    --body-md-font-size: 12px;
-    --body-md-font-weight: 400;
-    --body-md-line-height: 18px;
-    --body-md-strong-font-family: "SF Pro Text", system-ui, -apple-system, sans-serif;
-    --body-md-strong-font-size: 12px;
-    --body-md-strong-font-weight: 500;
-    --body-md-strong-line-height: 18px;
-    --body-base-font-family: "SF Pro Text", system-ui, -apple-system, sans-serif;
-    --body-base-font-size: 13px;
-    --body-base-font-weight: 400;
-    --body-base-line-height: 20px;
-    --body-base-strong-font-family: "SF Pro Text", system-ui, -apple-system, sans-serif;
-    --body-base-strong-font-size: 13px;
-    --body-base-strong-font-weight: 500;
-    --body-base-strong-line-height: 20px;
-    --heading-3xs-font-family: "SF Pro Text", system-ui, -apple-system, sans-serif;
-    --heading-3xs-font-size: 11px;
-    --heading-3xs-font-weight: 600;
-    --heading-3xs-line-height: 16px;
-    --heading-2xs-font-family: "SF Pro Text", system-ui, -apple-system, sans-serif;
-    --heading-2xs-font-size: 12px;
-    --heading-2xs-font-weight: 600;
-    --heading-2xs-line-height: 18px;
-    --heading-xs-font-family: "SF Pro Text", system-ui, -apple-system, sans-serif;
-    --heading-xs-font-size: 13px;
-    --heading-xs-font-weight: 600;
-    --heading-xs-line-height: 20px;
-    --heading-sm-font-family: "SF Pro Text", system-ui, -apple-system, sans-serif;
-    --heading-sm-font-size: 16px;
-    --heading-sm-font-weight: 600;
-    --heading-sm-line-height: 24px;
-    --heading-md-font-family: "SF Pro", system-ui, -apple-system, sans-serif;
-    --heading-md-font-size: 20px;
-    --heading-md-font-weight: 600;
-    --heading-md-line-height: 28px;
-    --heading-lg-font-family: "SF Pro", system-ui, -apple-system, sans-serif;
-    --heading-lg-font-size: 22px;
-    --heading-lg-font-weight: 600;
-    --heading-lg-line-height: 30px;
-    --heading-xl-font-family: "SF Pro", system-ui, -apple-system, sans-serif;
-    --heading-xl-font-size: 24px;
-    --heading-xl-font-weight: 600;
-    --heading-xl-line-height: 32px;
-    --heading-2xl-font-family: "SF Pro", system-ui, -apple-system, sans-serif;
-    --heading-2xl-font-size: 28px;
-    --heading-2xl-font-weight: 600;
-    --heading-2xl-line-height: 36px;
-    --heading-3xl-font-family: "SF Pro", system-ui, -apple-system, sans-serif;
-    --heading-3xl-font-size: 32px;
-    --heading-3xl-font-weight: 600;
-    --heading-3xl-line-height: 40px;
-    --code-editor-font-family: "JetBrains Mono", system-ui, -apple-system, sans-serif;
-    --code-editor-font-size: 13px;
-    --code-editor-font-weight: 450;
-    --code-editor-line-height: 20px;
-    --code-terminal-font-family: "JetBrains Mono", system-ui, -apple-system, sans-serif;
-    --code-terminal-font-size: 12px;
-    --code-terminal-font-weight: 450;
-    --code-terminal-line-height: 18px;
-    --font-weight-default: 400;
-    --font-weight-code: 450;
-    --font-weight-medium: 500;
-    --font-weight-strong: 600;
-    --z-index-dropdown: 2000;
-    --z-index-drawer: 2500;
-    --z-index-modal: 3000;
-    --z-index-notification: 3500;
-    --z-index-tooltip: 4000;
-    --transition-fast: 0.12s ease;
-    --transition-normal: 0.2s ease;
-    --transition-slow: 0.3s ease;
-    --breakpoint-sm: 576px;
-    --breakpoint-md: 768px;
-    --breakpoint-lg: 1024px;
-    --breakpoint-xl: 1280px;
-  }
-
-  :root,
-  [data-theme="dark"] {
-    color-scheme: dark;
-    --bg-base-default: #1A1B1D;
-    --bg-base-secondary: #222427;
-    --bg-base-tertiary: #2A2D31;
-    --bg-tooltip: #1A1B1D;
-    --bg-menu: #202123;
-    --bg-invert: #DADDE5;
-    --bg-invert-hover: #EDEFF2;
-    --bg-invert-active: #979AA4;
-    --bg-invert-disabled: rgba(224, 226, 242, 0.12);
-    --bg-overlay-l1: rgba(224, 226, 242, 0.04);
-    --bg-overlay-l2: rgba(224, 226, 242, 0.06);
-    --bg-overlay-l3: rgba(224, 226, 242, 0.08);
-    --bg-overlay-l4: rgba(224, 226, 242, 0.12);
-    --text-default: #D1D3DB;
-    --text-default-hover: #F5F9FE;
-    --text-default-active: #F5F9FE;
-    --text-secondary: #9599A6;
-    --text-secondary-hover: #D1D3DB;
-    --text-secondary-active: #D1D3DB;
-    --text-tertiary: #666B75;
-    --text-disabled: #666B75;
-    --text-onbrand: #0C0C0D;
-    --text-onaccent: #0C0C0D;
-    --icon-default: #D1D3DB;
-    --icon-default-hover: #F5F9FE;
-    --icon-default-active: #F5F9FE;
-    --icon-secondary: #9599A6;
-    --icon-secondary-hover: #D1D3DB;
-    --icon-secondary-active: #D1D3DB;
-    --icon-tertiary: #666B75;
-    --icon-disabled: #666B75;
-    --icon-onbrand: #0C0C0D;
-    --icon-onaccent: #0C0C0D;
-    --border-neutral-l1: rgba(224, 226, 242, 0.1);
-    --border-neutral-l2: rgba(224, 226, 242, 0.16);
-    --border-neutral-l3: rgba(224, 226, 242, 0.2);
-    --border-contrast: #FFFFFF;
-    --status-primary-default: #387BFF;
-    --status-primary-hover: #4C88FF;
-    --status-primary-active: #1759DD;
-    --status-primary-surface-l1: rgba(53, 121, 255, 0.18);
-    --status-primary-surface-l2: rgba(53, 121, 255, 0.28);
-    --status-primary-surface-l3: rgba(53, 121, 255, 0.36);
-    --status-info-default: var(--status-primary-default);
-    --status-info-surface-l1: var(--status-primary-surface-l1);
-    --status-success-default: #33C192;
-    --status-success-hover: #5ED4AD;
-    --status-success-active: #27B082;
-    --status-success-surface-l1: rgba(0, 165, 110, 0.18);
-    --status-success-surface-l2: rgba(0, 165, 110, 0.28);
-    --status-success-surface-l3: rgba(0, 165, 110, 0.36);
-    --status-alert-default: #D29D00;
-    --status-alert-hover: #DFB949;
-    --status-alert-active: #AB8820;
-    --status-alert-surface-l1: rgba(210, 157, 0, 0.16);
-    --status-alert-surface-l2: rgba(210, 157, 0, 0.28);
-    --status-alert-surface-l3: rgba(210, 157, 0, 0.36);
-    --status-warning-default: #D27E24;
-    --status-warning-hover: #D78B28;
-    --status-warning-active: #B46510;
-    --status-warning-surface-l1: rgba(210, 126, 36, 0.16);
-    --status-warning-surface-l2: rgba(210, 126, 36, 0.28);
-    --status-warning-surface-l3: rgba(210, 126, 36, 0.36);
-    --status-error-default: #F65A5A;
-    --status-error-hover: #F86262;
-    --status-error-active: #B33636;
-    --status-error-surface-l1: rgba(246, 70, 70, 0.18);
-    --status-error-surface-l2: rgba(246, 70, 70, 0.28);
-    --status-error-surface-l3: rgba(246, 70, 70, 0.36);
-    --code-text: #E0E3EE;
-    --code-doc: #7F838C;
-    --code-link: #3C7EFF;
-    --code-number: #F48CCA;
-    --code-action: #B38CFF;
-    --code-instruction: #F0D8FF;
-    --code-function: #F29D79;
-    --code-constant: #80BBFF;
-    --code-parameter: #82D99F;
-    --code-attribute: #DED47E;
-    --code-tag: #F2858C;
-    --color-background: var(--bg-base-default);
-    --color-surface: var(--bg-base-secondary);
-    --color-surface-variant: var(--bg-base-tertiary);
-    --color-overlay-1: var(--bg-overlay-l1);
-    --color-overlay-2: var(--bg-overlay-l2);
-    --color-overlay-3: var(--bg-overlay-l3);
-    --color-overlay-4: var(--bg-overlay-l4);
-    --color-card: var(--bg-base-secondary);
-    --color-tooltip: var(--bg-tooltip);
-    --color-menu: var(--bg-menu);
-    --color-foreground: var(--text-default);
-    --color-foreground-hover: var(--text-default-hover);
-    --color-on-surface: var(--text-default);
-    --color-on-surface-variant: var(--text-secondary);
-    --color-muted-foreground: var(--text-secondary);
-    --color-disabled-foreground: var(--text-disabled);
-    --color-border: var(--border-neutral-l1);
-    --color-border-strong: var(--border-neutral-l2);
-    --color-border-stronger: var(--border-neutral-l3);
-    --color-border-contrast: var(--border-contrast);
-    --color-outline: var(--border-neutral-l1);
-    --color-primary: var(--bg-brand);
-    --color-primary-hover: var(--bg-brand-hover);
-    --color-primary-disabled: var(--bg-brand-disabled);
-    --color-primary-soft: var(--bg-brand-popup);
-    --color-accent: var(--bg-brand);
-    --color-on-primary: var(--text-onbrand);
-    --color-info: var(--status-primary-default);
-    --color-success: var(--status-success-default);
-    --color-warning: var(--status-warning-default);
-    --color-error: var(--status-error-default);
-    --color-error-soft: var(--status-error-surface-l1);
-  }
-
-  [data-theme="light"] {
-    color-scheme: light;
-    --bg-base-default: #FFFFFF;
-    --bg-base-secondary: #F5F6F8;
-    --bg-base-tertiary: #EDF0F5;
-    --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-secondary: #4B5563;
-    --text-tertiary: #5B6370;
-    --text-disabled: #525A68;
-    --text-onbrand: #FFFFFF;
-    --icon-default: #0F1117;
-    --icon-secondary: #4B5563;
-    --icon-tertiary: #5B6370;
-    --icon-disabled: #525A68;
-    --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);
-    --status-success-default: #16A34A;
-    --status-warning-default: #CA8A04;
-    --status-error-default: #DC2626;
-    --status-info-default: #2E69FF;
-    --status-success-surface-l1: rgba(22, 163, 74, 0.08);
-    --status-warning-surface-l1: rgba(202, 138, 4, 0.08);
-    --status-error-surface-l1: rgba(220, 38, 38, 0.08);
-    --status-info-surface-l1: rgba(46, 105, 255, 0.08);
-    --color-background: var(--bg-base-default);
-    --color-surface: var(--bg-base-secondary);
-    --color-surface-variant: var(--bg-base-tertiary);
-    --color-overlay-1: var(--bg-overlay-l1);
-    --color-overlay-2: var(--bg-overlay-l2);
-    --color-overlay-3: var(--bg-overlay-l3);
-    --color-overlay-4: var(--bg-overlay-l4);
-    --color-card: var(--bg-base-secondary);
-    --color-tooltip: var(--bg-tooltip);
-    --color-menu: var(--bg-menu);
-    --color-foreground: var(--text-default);
-    --color-foreground-hover: var(--text-default-hover);
-    --color-on-surface: var(--text-default);
-    --color-on-surface-variant: var(--text-secondary);
-    --color-muted-foreground: var(--text-secondary);
-    --color-disabled-foreground: var(--text-disabled);
-    --color-border: var(--border-neutral-l1);
-    --color-border-strong: var(--border-neutral-l2);
-    --color-border-stronger: var(--border-neutral-l3);
-    --color-border-contrast: var(--border-contrast);
-    --color-outline: var(--border-neutral-l1);
-    --color-primary: var(--bg-brand);
-    --color-primary-hover: var(--bg-brand-hover);
-    --color-primary-disabled: var(--bg-brand-disabled);
-    --color-primary-soft: var(--bg-brand-popup);
-    --color-accent: var(--bg-brand);
-    --color-on-primary: var(--text-onbrand);
-    --color-info: var(--status-primary-default);
-    --color-success: var(--status-success-default);
-    --color-warning: var(--status-warning-default);
-    --color-error: var(--status-error-default);
-    --color-error-soft: var(--status-error-surface-l1);
-  }
-
-  :root,
-  [data-brand="green"] {
-    --bg-brand: #32F08C;
-    --bg-brand-hover: #0FDC78;
-    --bg-brand-disabled: rgba(50, 240, 140, 0.2);
-    --bg-brand-popup: rgba(50, 240, 140, 0.12);
-    --bg-brand-overlay: rgba(50, 240, 140, 0.12);
-    --text-brand: #32F08C;
-    --text-brand-hover: #0FDC78;
-    --icon-brand: #32F08C;
-    --icon-brand-hover: #0FDC78;
-    --border-brand: #32F08C;
-    --text-onbrand: #0C0C0D;
-    --icon-onbrand: #0C0C0D;
-  }
-
-  [data-brand="blue"] {
-    --bg-brand: #80C1FF;
-    --bg-brand-hover: #6EA6DB;
-    --bg-brand-disabled: rgba(128, 193, 255, 0.3);
-    --bg-brand-popup: rgba(128, 193, 255, 0.12);
-    --bg-brand-overlay: rgba(128, 193, 255, 0.12);
-    --text-brand: #80C1FF;
-    --text-brand-hover: #6EA6DB;
-    --icon-brand: #80C1FF;
-    --icon-brand-hover: #6EA6DB;
-    --border-brand: #80C1FF;
-    --text-onbrand: #0C0C0D;
-    --icon-onbrand: #0C0C0D;
-  }
-
-  [data-brand="purple"] {
-    --bg-brand: #8E80FF;
-    --bg-brand-hover: #9E92FF;
-    --bg-brand-disabled: rgba(142, 128, 255, 0.3);
-    --bg-brand-popup: rgba(142, 128, 255, 0.12);
-    --bg-brand-overlay: rgba(142, 128, 255, 0.12);
-    --text-brand: #8E80FF;
-    --text-brand-hover: #9E92FF;
-    --icon-brand: #8E80FF;
-    --icon-brand-hover: #9E92FF;
-    --border-brand: #8E80FF;
-    --text-onbrand: #0C0C0D;
-    --icon-onbrand: #0C0C0D;
-  }
-
-  [data-brand="yellow"] {
-    --bg-brand: #FFD080;
-    --bg-brand-hover: #DBB36E;
-    --bg-brand-disabled: rgba(255, 208, 128, 0.3);
-    --bg-brand-popup: rgba(255, 208, 128, 0.12);
-    --bg-brand-overlay: rgba(255, 208, 128, 0.12);
-    --text-brand: #FFD080;
-    --text-brand-hover: #DBB36E;
-    --icon-brand: #FFD080;
-    --icon-brand-hover: #DBB36E;
-    --border-brand: #FFD080;
-    --text-onbrand: #0C0C0D;
-    --icon-onbrand: #0C0C0D;
-  }
-
-  [data-brand="red"] {
-    --bg-brand: #FF8080;
-    --bg-brand-hover: #DB6E6E;
-    --bg-brand-disabled: rgba(255, 128, 128, 0.3);
-    --bg-brand-popup: rgba(255, 128, 128, 0.12);
-    --bg-brand-overlay: rgba(255, 128, 128, 0.12);
-    --text-brand: #FF8080;
-    --text-brand-hover: #DB6E6E;
-    --icon-brand: #FF8080;
-    --icon-brand-hover: #DB6E6E;
-    --border-brand: #FF8080;
-    --text-onbrand: #0C0C0D;
-    --icon-onbrand: #0C0C0D;
-  }
-
-  [data-brand="teal"] {
-    --bg-brand: #2DD288;
-    --bg-brand-hover: #27B575;
-    --bg-brand-disabled: rgba(45, 210, 136, 0.3);
-    --bg-brand-popup: rgba(45, 210, 136, 0.12);
-    --bg-brand-overlay: rgba(45, 210, 136, 0.12);
-    --text-brand: #2DD288;
-    --text-brand-hover: #27B575;
-    --icon-brand: #2DD288;
-    --icon-brand-hover: #27B575;
-    --border-brand: #2DD288;
-    --text-onbrand: #0C0C0D;
-    --icon-onbrand: #0C0C0D;
-  }
-
-  [data-brand="cyan"] {
-    --bg-brand: #04CBE5;
-    --bg-brand-hover: #27D2E9;
-    --bg-brand-disabled: rgba(4, 203, 229, 0.3);
-    --bg-brand-popup: rgba(4, 203, 229, 0.12);
-    --bg-brand-overlay: rgba(4, 203, 229, 0.12);
-    --text-brand: #04CBE5;
-    --text-brand-hover: #27D2E9;
-    --icon-brand: #04CBE5;
-    --icon-brand-hover: #27D2E9;
-    --border-brand: #04CBE5;
-    --text-onbrand: #0C0C0D;
-    --icon-onbrand: #0C0C0D;
-  }
-
-  [data-brand="violet"] {
-    --bg-brand: #BFA5FF;
-    --bg-brand-hover: #A48EDB;
-    --bg-brand-disabled: rgba(191, 165, 255, 0.3);
-    --bg-brand-popup: rgba(191, 165, 255, 0.12);
-    --bg-brand-overlay: rgba(191, 165, 255, 0.12);
-    --text-brand: #BFA5FF;
-    --text-brand-hover: #A48EDB;
-    --icon-brand: #BFA5FF;
-    --icon-brand-hover: #A48EDB;
-    --border-brand: #BFA5FF;
-    --text-onbrand: #0C0C0D;
-    --icon-onbrand: #0C0C0D;
-  }
-
-  [data-brand="slate"] {
-    --bg-brand: #AFB9CF;
-    --bg-brand-hover: #979FB2;
-    --bg-brand-disabled: rgba(175, 185, 207, 0.3);
-    --bg-brand-popup: rgba(175, 185, 207, 0.12);
-    --bg-brand-overlay: rgba(175, 185, 207, 0.12);
-    --text-brand: #AFB9CF;
-    --text-brand-hover: #979FB2;
-    --icon-brand: #AFB9CF;
-    --icon-brand-hover: #979FB2;
-    --border-brand: #AFB9CF;
-    --text-onbrand: #0C0C0D;
-    --icon-onbrand: #0C0C0D;
-  }
-
-  [data-brand="neutral"] {
-    --bg-brand: #BABABA;
-    --bg-brand-hover: #A0A0A0;
-    --bg-brand-disabled: rgba(186, 186, 186, 0.3);
-    --bg-brand-popup: rgba(186, 186, 186, 0.12);
-    --bg-brand-overlay: rgba(186, 186, 186, 0.12);
-    --text-brand: #BABABA;
-    --text-brand-hover: #A0A0A0;
-    --icon-brand: #BABABA;
-    --icon-brand-hover: #A0A0A0;
-    --border-brand: #BABABA;
-    --text-onbrand: #0C0C0D;
-    --icon-onbrand: #0C0C0D;
-  }
-}