@vobs/ui 0.1.0

package/dist/theme.js

@@ -0,0 +1,262 @@
+/** @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

@@ -0,0 +1,449 @@
+@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;
+  }
+}