@loidolt/theme-svelte 0.6.0 → 0.8.0

package/dist/components/PresetPicker.svelte

@@ -0,0 +1,62 @@
+<script lang="ts" generics="P extends string = string">
+  import { builtInPresets } from '@loidolt/theme-tokens';
+  import type { ControlSize, Option } from '../types.js';
+  import type { Theme } from '../theme.svelte.js';
+  import Select from './Select.svelte';
+  import ToggleGroup from './ToggleGroup.svelte';
+
+  interface Props {
+    /** The store from `createTheme({ presets })`. */
+    theme: Theme<P>;
+    /**
+     * Label per preset. Defaults to the built-in presets' own labels, and to the capitalised
+     * name for any preset of your own.
+     */
+    options?: Option<P>[];
+    /** Accessible name of the control. */
+    label?: string;
+    /** `segmented` keeps every preset in view; `select` folds a longer list into a dropdown. */
+    variant?: 'segmented' | 'select';
+    size?: ControlSize;
+    class?: string;
+  }
+
+  let {
+    theme,
+    options,
+    label = 'Style',
+    variant = 'segmented',
+    size = 'sm',
+    class: className,
+  }: Props = $props();
+
+  const builtInLabels = new Map<string, string>(
+    builtInPresets.map((preset) => [preset.name, preset.label])
+  );
+
+  const items = $derived(
+    options ??
+      theme.presets.map((name) => ({
+        value: name,
+        label: builtInLabels.get(name) ?? name.charAt(0).toUpperCase() + name.slice(1),
+      }))
+  );
+
+  // Bound through the theme rather than passed down: a segmented control lets the pressed item
+  // be pressed again to clear it, and there is no "no preset". The theme ignores the empty
+  // value, and the getter hands the control the preset that is still in force.
+  const getPreset = () => theme.preset;
+  const setPreset = (next: P | P[] | '' | undefined) => {
+    if (typeof next === 'string' && next !== '') theme.preset = next;
+  };
+</script>
+
+<!--
+  The preset half of a theme switcher; ThemeToggle is the scheme half. Both drive the same
+  `createTheme()` store, so they can sit side by side in a topbar.
+-->
+{#if variant === 'select'}
+  <Select options={items} bind:value={getPreset, setPreset} {label} boxed class={className} />
+{:else}
+  <ToggleGroup options={items} bind:value={getPreset, setPreset} {label} {size} class={className} />
+{/if}

package/dist/components/PresetPicker.svelte.d.ts

@@ -0,0 +1,40 @@
+import type { ControlSize, Option } from '../types.js';
+import type { Theme } from '../theme.svelte.js';
+declare function $$render<P extends string = string>(): {
+    props: {
+        /** The store from `createTheme({ presets })`. */
+        theme: Theme<P>;
+        /**
+         * Label per preset. Defaults to the built-in presets' own labels, and to the capitalised
+         * name for any preset of your own.
+         */
+        options?: Option<P>[];
+        /** Accessible name of the control. */
+        label?: string;
+        /** `segmented` keeps every preset in view; `select` folds a longer list into a dropdown. */
+        variant?: "segmented" | "select";
+        size?: ControlSize;
+        class?: string;
+    };
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<P extends string = string> {
+    props(): ReturnType<typeof $$render<P>>['props'];
+    events(): ReturnType<typeof $$render<P>>['events'];
+    slots(): ReturnType<typeof $$render<P>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <P extends string = string>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<P>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<P>['props']>, ReturnType<__sveltets_Render<P>['events']>, ReturnType<__sveltets_Render<P>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<P>['bindings']>;
+    } & ReturnType<__sveltets_Render<P>['exports']>;
+    <P extends string = string>(internal: unknown, props: ReturnType<__sveltets_Render<P>['props']> & {}): ReturnType<__sveltets_Render<P>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const PresetPicker: $$IsomorphicComponent;
+type PresetPicker<P extends string = string> = InstanceType<typeof PresetPicker<P>>;
+export default PresetPicker;

package/dist/components/ToggleGroup.svelte

@@ -51,6 +51,14 @@
     value = next as T | T[];
     onValueChange?.(next as T | T[]);
   };
+
+  /*
+   * Bound rather than passed, so Bits holds no copy of its own: whatever `value` reads after a
+   * press is what shows as pressed. A parent that refuses a change — PresetPicker refusing the
+   * empty value a second press on the pressed item produces — then keeps its item pressed.
+   */
+  const single = () => (value ?? '') as string;
+  const many = () => (value ?? []) as string[];
 </script>
 
 <!--
@@ -73,8 +81,7 @@
   <ToggleGroupPrimitive.Root
     bind:ref
     type="multiple"
-    value={(value ?? []) as string[]}
-    onValueChange={change}
+    bind:value={many, change}
     {orientation}
     {disabled}
     class={classes}
@@ -92,8 +99,7 @@
   <ToggleGroupPrimitive.Root
     bind:ref
     type="single"
-    value={(value ?? '') as string}
-    onValueChange={change}
+    bind:value={single, change}
     {orientation}
     {disabled}
     class={classes}

package/dist/index.d.ts

@@ -50,6 +50,7 @@ export { default as Pagination } from './components/Pagination.svelte';
 export { default as Panel } from './components/Panel.svelte';
 export { default as PasswordInput } from './components/PasswordInput.svelte';
 export { default as Popover } from './components/Popover.svelte';
+export { default as PresetPicker } from './components/PresetPicker.svelte';
 export { default as Progress } from './components/Progress.svelte';
 export { default as RadioGroup } from './components/RadioGroup.svelte';
 export { default as RecordStepper } from './components/RecordStepper.svelte';
@@ -105,6 +106,8 @@ export { strokeLength, strokePath, strokesToSvg, validateSignature } from './sig
 export type { SignatureError, SignaturePoint, SignatureStroke, SignatureValue, } from './signature.js';
 export { createDataTable } from './data-table.svelte.js';
 export type { DataTableColumn, DataTableFilterValue, DataTableOptions, DataTableRow, DataTableSort, DataTableState, } from './data-table.svelte.js';
+export { colorSchemeOf, createTokenColors, normalizeColor, observeColorScheme, readRoleColor, } from './token-colors.svelte.js';
+export type { TokenColors, TokenColorsOptions } from './token-colors.svelte.js';
 export { createAnnouncer } from './announcer.svelte.js';
 export type { Announcer, AnnouncerOptions, Politeness } from './announcer.svelte.js';
 export { createToaster } from './toaster.svelte.js';

package/dist/index.js

@@ -50,6 +50,7 @@ export { default as Pagination } from './components/Pagination.svelte';
 export { default as Panel } from './components/Panel.svelte';
 export { default as PasswordInput } from './components/PasswordInput.svelte';
 export { default as Popover } from './components/Popover.svelte';
+export { default as PresetPicker } from './components/PresetPicker.svelte';
 export { default as Progress } from './components/Progress.svelte';
 export { default as RadioGroup } from './components/RadioGroup.svelte';
 export { default as RecordStepper } from './components/RecordStepper.svelte';
@@ -96,6 +97,7 @@ export { canPlayHlsNatively, loadHls, setHlsLoader } from './hls.js';
 export { createHlsSource } from './hls.svelte.js';
 export { strokeLength, strokePath, strokesToSvg, validateSignature } from './signature.js';
 export { createDataTable } from './data-table.svelte.js';
+export { colorSchemeOf, createTokenColors, normalizeColor, observeColorScheme, readRoleColor, } from './token-colors.svelte.js';
 export { createAnnouncer } from './announcer.svelte.js';
 export { createToaster } from './toaster.svelte.js';
 export { createTheme, themeScript } from './theme.svelte.js';

package/dist/theme.svelte.d.ts

@@ -2,7 +2,7 @@
 export type ThemePreference = 'light' | 'dark' | 'system';
 /** What that choice resolves to right now — the value written to the DOM. */
 export type ColorScheme = 'light' | 'dark';
-export interface ThemeOptions {
+export interface ThemeOptions<P extends string = string> {
     /** `localStorage` key holding the preference. Set to `null` to keep the choice in memory. */
     storageKey?: string | null;
     /** Attribute the resolved scheme is written to. Must match the stylesheet's selector. */
@@ -18,14 +18,34 @@ export interface ThemeOptions {
      * if separate windows should be able to hold different themes.
      */
     sync?: boolean;
+    /**
+     * The style presets the app ships — the names of the preset stylesheets it imports. Setting
+     * this turns on the preset axis: the chosen preset is stored and written to `presetAttribute`
+     * alongside the colour scheme. Leave it out and the preset attribute is never touched, so a
+     * static `<html data-preset="soft">` keeps working.
+     */
+    presets?: readonly P[];
+    /** Preset before anything is stored. Defaults to the first of `presets`. */
+    defaultPreset?: NoInfer<P>;
+    /** `localStorage` key holding the preset. Set to `null` to keep the choice in memory. */
+    presetStorageKey?: string | null;
+    /** Attribute the preset is written to. Must match the preset stylesheets' selector. */
+    presetAttribute?: string;
 }
-export interface Theme {
+export interface Theme<P extends string = string> {
     /** The stored choice. Assignable: `theme.preference = 'dark'`. */
     preference: ThemePreference;
     /** The scheme in force — `preference`, or the system scheme when that is `system`. */
     readonly resolved: ColorScheme;
     /** What the system currently prefers, regardless of the choice. */
     readonly system: ColorScheme;
+    /**
+     * The style preset in force, or `undefined` when the theme was created without `presets`.
+     * Assignable: `theme.preset = 'soft'`; a name outside `presets` is ignored.
+     */
+    preset: P | undefined;
+    /** The presets this theme switches between, as given. */
+    readonly presets: readonly P[];
     /** Flips between explicit light and dark, starting from whatever is showing. */
     toggle(): void;
     /** Removes the media and storage listeners. Automatic for a component-scoped instance. */
@@ -52,8 +72,8 @@ export interface Theme {
  *
  * Pair it with {@link themeScript} in `app.html`, or the first paint of a reload is light.
  */
-export declare function createTheme(options?: ThemeOptions): Theme;
-export interface ThemeScriptOptions extends Pick<ThemeOptions, 'storageKey' | 'attribute' | 'defaultPreference' | 'defaultScheme'> {
+export declare function createTheme<const P extends string = string>(options?: ThemeOptions<P>): Theme<P>;
+export interface ThemeScriptOptions extends Pick<ThemeOptions, 'storageKey' | 'attribute' | 'defaultPreference' | 'defaultScheme' | 'presets' | 'defaultPreset' | 'presetStorageKey' | 'presetAttribute'> {
     /** Wrap the source in a `<script>` tag. Off by default, so it can go inside your own tag. */
     tag?: boolean;
 }

package/dist/theme.svelte.js

@@ -23,7 +23,11 @@ const isPreference = (value) => typeof value === 'string' && SCHEMES.includes(va
  * Pair it with {@link themeScript} in `app.html`, or the first paint of a reload is light.
  */
 export function createTheme(options = {}) {
-    const { storageKey = 'loidolt-theme', attribute = 'data-theme', element, defaultPreference = 'system', defaultScheme = 'light', sync = true, } = options;
+    const { storageKey = 'loidolt-theme', attribute = 'data-theme', element, defaultPreference = 'system', defaultScheme = 'light', sync = true, presets = [], presetStorageKey = 'loidolt-preset', presetAttribute = 'data-preset', } = options;
+    const defaultPreset = options.defaultPreset ?? presets[0];
+    if (defaultPreset !== undefined && !presets.includes(defaultPreset)) {
+        throw new Error(`defaultPreset "${defaultPreset}" is not one of presets`);
+    }
     const browser = typeof document !== 'undefined';
     const target = element ?? (browser ? document.documentElement : null);
     const read = () => {
@@ -39,7 +43,22 @@ export function createTheme(options = {}) {
             return defaultPreference;
         }
     };
+    const isPreset = (value) => typeof value === 'string' && presets.includes(value);
+    const readPreset = () => {
+        if (defaultPreset === undefined)
+            return undefined;
+        if (!browser || presetStorageKey === null)
+            return defaultPreset;
+        try {
+            const stored = localStorage.getItem(presetStorageKey);
+            return isPreset(stored) ? stored : defaultPreset;
+        }
+        catch {
+            return defaultPreset; // see `read`
+        }
+    };
     let preference = $state(read());
+    let preset = $state(readPreset());
     let system = $state(defaultScheme);
     let media;
     const onSystemChange = (event) => {
@@ -54,35 +73,57 @@ export function createTheme(options = {}) {
     const resolve = () => (preference === 'system' ? system : preference);
     function apply() {
         target?.setAttribute(attribute, resolve());
+        if (preset !== undefined)
+            target?.setAttribute(presetAttribute, preset);
     }
     const onStorage = (event) => {
-        if (event.key !== storageKey)
+        if (storageKey !== null && event.key === storageKey) {
+            // A cleared key means another tab reset to the default rather than picking a scheme.
+            preference = isPreference(event.newValue) ? event.newValue : defaultPreference;
+        }
+        else if (defaultPreset !== undefined &&
+            presetStorageKey !== null &&
+            event.key === presetStorageKey) {
+            preset = isPreset(event.newValue) ? event.newValue : defaultPreset;
+        }
+        else
             return;
-        // A cleared key means another tab reset to the default rather than picking a scheme.
-        preference = isPreference(event.newValue) ? event.newValue : defaultPreference;
         apply();
     };
-    if (browser && sync && storageKey !== null)
+    const listens = browser &&
+        sync &&
+        (storageKey !== null || (defaultPreset !== undefined && presetStorageKey !== null));
+    if (listens)
         window.addEventListener('storage', onStorage);
     // Written on creation, not in an effect: `createTheme()` is meant to be callable at module
     // scope, where there is no reactive context to own an effect.
     apply();
+    const persist = (key, value) => {
+        if (!browser || key === null)
+            return;
+        try {
+            localStorage.setItem(key, value);
+        }
+        catch {
+            /* see `read`: unavailable storage degrades to a memory-only choice */
+        }
+    };
     function set(next) {
         preference = next;
-        if (browser && storageKey !== null) {
-            try {
-                localStorage.setItem(storageKey, next);
-            }
-            catch {
-                /* see `read`: unavailable storage degrades to a memory-only choice */
-            }
-        }
+        persist(storageKey, next);
+        apply();
+    }
+    function setPreset(next) {
+        if (defaultPreset === undefined || !isPreset(next))
+            return;
+        preset = next;
+        persist(presetStorageKey, next);
         apply();
     }
     const destroy = () => {
         media?.removeEventListener('change', onSystemChange);
         media = undefined;
-        if (browser && sync && storageKey !== null)
+        if (listens)
             window.removeEventListener('storage', onStorage);
     };
     try {
@@ -104,6 +145,13 @@ export function createTheme(options = {}) {
         get system() {
             return system;
         },
+        get preset() {
+            return preset;
+        },
+        set preset(next) {
+            setPreset(next);
+        },
+        presets,
         toggle() {
             set(resolve() === 'dark' ? 'light' : 'dark');
         },
@@ -137,7 +185,7 @@ export function createTheme(options = {}) {
  * inline in an HTML `<script>` element without further escaping.
  */
 export function themeScript(options = {}) {
-    const { storageKey = 'loidolt-theme', attribute = 'data-theme', defaultPreference = 'system', defaultScheme = 'light', tag = false, } = options;
+    const { storageKey = 'loidolt-theme', attribute = 'data-theme', defaultPreference = 'system', defaultScheme = 'light', presets = [], presetStorageKey = 'loidolt-preset', presetAttribute = 'data-preset', tag = false, } = options;
     // JSON string escaping alone leaves `<` intact, including a literal `</script>` that would end
     // an inline script element. Escaping HTML-significant characters and the two JavaScript line
     // separators keeps every option inside its string literal in both source-only and tagged forms.
@@ -151,6 +199,12 @@ export function themeScript(options = {}) {
     const attr = serialize(attribute);
     const fallback = serialize(defaultPreference);
     const scheme = serialize(defaultScheme);
+    // Only emitted when the preset axis is on, so the scheme-only script stays byte-identical.
+    const preset = presets.length
+        ? `try{var q=${serialize(options.defaultPreset ?? presets[0])},l=${serialize(presets)},k=${serialize(presetStorageKey)};` +
+            `try{var w=k===null?null:localStorage.getItem(k);if(l.indexOf(w)>-1)q=w;}catch(e){}` +
+            `document.documentElement.setAttribute(${serialize(presetAttribute)},q);}catch(e){}`
+        : '';
     const source = `(function(){try{` +
         `var p=${fallback};` +
         // Storage failure must not skip system resolution and attribute application.
@@ -161,6 +215,6 @@ export function themeScript(options = {}) {
         `document.documentElement.setAttribute(${attr},p==="system"?s:p);` +
         // A theme is cosmetic; a throw here would abort a blocking head script and take the page
         // down with it. Swallow and let the stylesheet's own default stand.
-        `}catch(e){}})()`;
+        `}catch(e){}${preset}})()`;
     return tag ? `<script>${source}</script>` : source;
 }

package/dist/token-colors.svelte.d.ts

@@ -0,0 +1,49 @@
+import { type ColorScheme, type ResolvedRoles, type RoleSpec, type SemanticRole } from '@loidolt/theme-tokens';
+/**
+ * A computed colour as `#rrggbb`, or `#rrggbbaa` when it is translucent. Accepts what browsers
+ * return from `getComputedStyle`: `rgb()`/`rgba()` in either syntax, and `color(srgb …)`, which
+ * is what a `color-mix()` token computes to. Anything else is `null`.
+ */
+export declare function normalizeColor(value: string): string | null;
+/**
+ * Reads one role's live value from the page, as the element would paint it — so a scoped
+ * `[data-theme]` subtree or an app's own overrides are honoured. `null` when the environment
+ * cannot say (the server, or a DOM without custom-property support such as jsdom).
+ */
+export declare function readRoleColor(element: Element, role: SemanticRole): string | null;
+/**
+ * Which theme an element is in: an explicit `data-theme` on it or an ancestor wins, then the
+ * computed `color-scheme` (which the dark stylesheets set, including the system-following one).
+ */
+export declare function colorSchemeOf(element: Element | null | undefined): ColorScheme;
+/**
+ * Calls `callback` whenever the page's colour scheme may have changed: a `data-theme` anywhere,
+ * a class or inline style on `<html>`, or the system preference. Returns the unsubscribe.
+ */
+export declare function observeColorScheme(callback: () => void): () => void;
+export interface TokenColorsOptions {
+    /** Where to read from. Defaults to `<html>`; pass the chart or map element to honour a scoped theme. */
+    element?: () => Element | null | undefined;
+}
+export interface TokenColors<S extends RoleSpec> {
+    /** Every role in the spec as a concrete colour. Reactive. */
+    readonly colors: ResolvedRoles<S>;
+    readonly scheme: ColorScheme;
+    /** Goes up by one each time `colors` changes, for effects that repaint a canvas. */
+    readonly version: number;
+    /** Re-reads the page now — call it once the element has mounted. */
+    refresh(): void;
+    destroy(): void;
+}
+/**
+ * Semantic token values for renderers that cannot read CSS — a chart canvas, a WebGL map. Reads
+ * the live values off the page, so an app's own theme reaches the canvas, and follows theme
+ * changes. On the server, and wherever values cannot be read, it falls back to the reference
+ * light or dark theme.
+ *
+ * ```ts
+ * const palette = createTokenColors({ series: ['chart1', 'chart2'], ink: 'text' }, { element: () => node });
+ * $effect(() => chart?.setOption(build(palette.colors)));
+ * ```
+ */
+export declare function createTokenColors<S extends RoleSpec>(spec: S, options?: TokenColorsOptions): TokenColors<S>;

package/dist/token-colors.svelte.js

@@ -0,0 +1,165 @@
+import { onDestroy } from 'svelte';
+import { resolveRoles, roleVar, } from '@loidolt/theme-tokens';
+const hex = (value) => Math.round(Math.min(255, Math.max(0, value)))
+    .toString(16)
+    .padStart(2, '0');
+/**
+ * A computed colour as `#rrggbb`, or `#rrggbbaa` when it is translucent. Accepts what browsers
+ * return from `getComputedStyle`: `rgb()`/`rgba()` in either syntax, and `color(srgb …)`, which
+ * is what a `color-mix()` token computes to. Anything else is `null`.
+ */
+export function normalizeColor(value) {
+    const text = value.trim().toLowerCase();
+    if (/^#[0-9a-f]{6}([0-9a-f]{2})?$/.test(text))
+        return text;
+    const rgb = /^rgba?\(([^)]+)\)$/.exec(text);
+    const srgb = /^color\(srgb ([^)]+)\)$/.exec(text);
+    const parts = (rgb?.[1] ?? srgb?.[1])?.split(/[\s,/]+/).filter(Boolean);
+    if (!parts || parts.length < 3)
+        return null;
+    const numbers = parts.map((part) => part.endsWith('%') ? Number.parseFloat(part) / 100 : Number(part));
+    if (numbers.some((number) => !Number.isFinite(number)))
+        return null;
+    const channels = numbers.slice(0, 3).map((number, index) => 
+    // `rgb()` channels are 0–255 unless written as percentages; `color(srgb)` channels are 0–1.
+    srgb || parts[index].endsWith('%') ? number * 255 : number);
+    const alpha = numbers.length > 3 ? numbers[3] : 1;
+    const base = `#${channels.map(hex).join('')}`;
+    return alpha >= 1 ? base : `${base}${hex(alpha * 255)}`;
+}
+/**
+ * Reads one role's live value from the page, as the element would paint it — so a scoped
+ * `[data-theme]` subtree or an app's own overrides are honoured. `null` when the environment
+ * cannot say (the server, or a DOM without custom-property support such as jsdom).
+ */
+export function readRoleColor(element, role) {
+    const view = element.ownerDocument?.defaultView;
+    if (!view)
+        return null;
+    const probe = element.ownerDocument.createElement('span');
+    probe.hidden = true;
+    probe.style.color = `var(${roleVar(role)})`;
+    element.appendChild(probe);
+    try {
+        return normalizeColor(view.getComputedStyle(probe).color);
+    }
+    finally {
+        probe.remove();
+    }
+}
+/**
+ * Which theme an element is in: an explicit `data-theme` on it or an ancestor wins, then the
+ * computed `color-scheme` (which the dark stylesheets set, including the system-following one).
+ */
+export function colorSchemeOf(element) {
+    if (!element)
+        return 'light';
+    const explicit = element.closest('[data-theme]')?.getAttribute('data-theme');
+    if (explicit === 'dark' || explicit === 'light')
+        return explicit;
+    const view = element.ownerDocument?.defaultView;
+    const computed = view?.getComputedStyle(element).colorScheme ?? '';
+    return /\bdark\b/.test(computed) && !/\blight\b/.test(computed) ? 'dark' : 'light';
+}
+// eslint-disable-next-line svelte/prefer-svelte-reactivity -- subscriber bookkeeping, never rendered
+const listeners = new Set();
+let teardown;
+/** One set of observers for the whole page, however many charts and maps are listening. */
+function subscribe(listener) {
+    listeners.add(listener);
+    if (!teardown && typeof document !== 'undefined') {
+        let queued = false;
+        const notify = () => {
+            if (queued)
+                return;
+            queued = true;
+            queueMicrotask(() => {
+                queued = false;
+                for (const each of [...listeners])
+                    each();
+            });
+        };
+        const root = document.documentElement;
+        const scoped = new MutationObserver(notify);
+        // A theme can be scoped to any subtree, so `data-theme` is watched everywhere; `class` and
+        // `style` only on the root, where apps toggle theme classes and inline overrides.
+        scoped.observe(root, { attributes: true, attributeFilter: ['data-theme'], subtree: true });
+        const rootObserver = new MutationObserver(notify);
+        rootObserver.observe(root, { attributes: true, attributeFilter: ['class', 'style'] });
+        const media = typeof window.matchMedia === 'function'
+            ? window.matchMedia('(prefers-color-scheme: dark)')
+            : undefined;
+        media?.addEventListener('change', notify);
+        teardown = () => {
+            scoped.disconnect();
+            rootObserver.disconnect();
+            media?.removeEventListener('change', notify);
+            teardown = undefined;
+        };
+    }
+    return () => {
+        listeners.delete(listener);
+        if (listeners.size === 0)
+            teardown?.();
+    };
+}
+/**
+ * Calls `callback` whenever the page's colour scheme may have changed: a `data-theme` anywhere,
+ * a class or inline style on `<html>`, or the system preference. Returns the unsubscribe.
+ */
+export function observeColorScheme(callback) {
+    return subscribe(callback);
+}
+/**
+ * Semantic token values for renderers that cannot read CSS — a chart canvas, a WebGL map. Reads
+ * the live values off the page, so an app's own theme reaches the canvas, and follows theme
+ * changes. On the server, and wherever values cannot be read, it falls back to the reference
+ * light or dark theme.
+ *
+ * ```ts
+ * const palette = createTokenColors({ series: ['chart1', 'chart2'], ink: 'text' }, { element: () => node });
+ * $effect(() => chart?.setOption(build(palette.colors)));
+ * ```
+ */
+export function createTokenColors(spec, options = {}) {
+    const target = () => options.element?.() ?? (typeof document === 'undefined' ? undefined : document.documentElement);
+    const compute = () => {
+        const element = target();
+        const scheme = colorSchemeOf(element);
+        const read = (role) => (element && readRoleColor(element, role)) || resolveRoles({ role }, scheme).role;
+        return { scheme, colors: resolveRoles(spec, scheme, read) };
+    };
+    const initial = compute();
+    let colors = $state.raw(initial.colors);
+    let scheme = $state(initial.scheme);
+    let version = $state(0);
+    const refresh = () => {
+        const next = compute();
+        scheme = next.scheme;
+        if (JSON.stringify(next.colors) === JSON.stringify(colors))
+            return;
+        colors = next.colors;
+        version += 1;
+    };
+    const unsubscribe = subscribe(refresh);
+    const destroy = () => unsubscribe();
+    try {
+        onDestroy(destroy);
+    }
+    catch {
+        /* module scope: the caller owns `destroy()` */
+    }
+    return {
+        get colors() {
+            return colors;
+        },
+        get scheme() {
+            return scheme;
+        },
+        get version() {
+            return version;
+        },
+        refresh,
+        destroy,
+    };
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@loidolt/theme-svelte",
-  "version": "0.6.0",
+  "version": "0.8.0",
   "description": "Accessible Svelte 5 components for Loidolt applications",
   "license": "MIT",
   "type": "module",
@@ -31,8 +31,8 @@
     "clean": "rimraf dist"
   },
   "dependencies": {
-    "@loidolt/theme-styles": "^0.6.0",
-    "@loidolt/theme-tokens": "^0.6.0",
+    "@loidolt/theme-styles": "^0.8.0",
+    "@loidolt/theme-tokens": "^0.8.0",
     "bits-ui": "^2.19.0"
   },
   "peerDependencies": {