@molecule/app-theme-css-variables 1.0.0

package/LICENSE

@@ -0,0 +1,115 @@
+                                 Apache License
+                           Version 2.0, January 2004
+                        http://www.apache.org/licenses/
+
+   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+   1. Definitions.
+
+      "License" shall mean the terms and conditions for use, reproduction,
+      and distribution as defined by Sections 1 through 9 of this document.
+
+      "Licensor" shall mean the copyright owner or entity authorized by
+      the copyright owner that is granting the License.
+
+      "Legal Entity" shall mean the union of the acting entity and all
+      other entities that control, are controlled by, or are under common
+      control with that entity. For the purposes of this definition,
+      "control" means (i) the power, direct or indirect, to cause the
+      direction or management of such entity, whether by contract or
+      otherwise, or (ii) ownership of fifty percent (50%) or more of the
+      outstanding shares, or (iii) beneficial ownership of such entity.
+
+      "You" (or "Your") shall mean an individual or Legal Entity
+      exercising permissions granted by this License.
+
+      "Source" form shall mean the preferred form for making modifications,
+      including but not limited to software source code, documentation
+      source, and configuration files.
+
+      "Object" form shall mean any form resulting from mechanical
+      transformation or translation of a Source form, including but
+      not limited to compiled object code, generated documentation,
+      and conversions to other media types.
+
+      "Work" shall mean the work of authorship, whether in Source or
+      Object form, made available under the License, as indicated by a
+      copyright notice that is included in or attached to the work.
+
+      "Derivative Works" shall mean any work, whether in Source or Object
+      form, that is based on (or derived from) the Work and for which the
+      editorial revisions, annotations, elaborations, or other modifications
+      represent, as a whole, an original work of authorship.
+
+      "Contribution" shall mean any work of authorship, including the
+      original version of the Work and any modifications or additions
+      to that Work, that is intentionally submitted to the Licensor for
+      inclusion in the Work by the copyright owner or by an individual or
+      Legal Entity authorized to submit on behalf of the copyright owner.
+
+      "Contributor" shall mean Licensor and any individual or Legal Entity
+      on behalf of whom a Contribution has been received by the Licensor and
+      subsequently incorporated within the Work.
+
+   2. Grant of Copyright License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      copyright license to reproduce, prepare Derivative Works of,
+      publicly display, publicly perform, sublicense, and distribute the
+      Work and such Derivative Works in Source or Object form.
+
+   3. Grant of Patent License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      patent license to make, have made, use, offer to sell, sell, import,
+      and otherwise transfer the Work.
+
+   4. Redistribution. You may reproduce and distribute copies of the
+      Work or Derivative Works thereof in any medium, with or without
+      modifications, and in Source or Object form, provided that You
+      meet the following conditions:
+
+      (a) You must give any other recipients of the Work or
+          Derivative Works a copy of this License; and
+
+      (b) You must cause any modified files to carry prominent notices
+          stating that You changed the files; and
+
+      (c) You must retain, in the Source form of any Derivative Works
+          that You distribute, all copyright, patent, trademark, and
+          attribution notices from the Source form of the Work,
+          excluding those notices that do not pertain to any part of
+          the Derivative Works; and
+
+      (d) If the Work includes a "NOTICE" text file as part of its
+          distribution, then any Derivative Works that You distribute must
+          include a readable copy of the attribution notices contained
+          within such NOTICE file.
+
+   5. Submission of Contributions.
+
+   6. Trademarks. This License does not grant permission to use the trade
+      names, trademarks, service marks, or product names of the Licensor.
+
+   7. Disclaimer of Warranty. Unless required by applicable law or
+      agreed to in writing, Licensor provides the Work on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND.
+
+   8. Limitation of Liability. In no event and under no legal theory shall
+      any Contributor be liable to You for damages.
+
+   9. Accepting Warranty or Additional Liability.
+
+   Copyright 2026 Molecule Dev, Inc.
+
+   Licensed under the Apache License, Version 2.0 (the "License");
+   you may not use this file except in compliance with the License.
+   You may obtain a copy of the License at
+
+       http://www.apache.org/licenses/LICENSE-2.0
+
+   Unless required by applicable law or agreed to in writing, software
+   distributed under the License is distributed on an "AS IS" BASIS,
+   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   See the License for the specific language governing permissions and
+   limitations under the License.

package/dist/index.d.ts

@@ -0,0 +1,65 @@
+/**
+ * CSS custom properties theme provider for molecule.dev.
+ *
+ * Provides a framework-agnostic ThemeProvider implementation that applies
+ * theme tokens as CSS custom properties (variables) to the document root.
+ * Works with any framework -- React, Vue, Svelte, Angular, Solid, or vanilla JS.
+ *
+ * @example
+ * ```typescript
+ * import {
+ *   createCSSVariablesThemeProvider,
+ *   lightTheme,
+ *   darkTheme,
+ * } from '@molecule/app-theme-css-variables'
+ * import { setProvider } from '@molecule/app-theme'
+ *
+ * const provider = createCSSVariablesThemeProvider({
+ *   themes: [lightTheme, darkTheme],
+ *   defaultTheme: 'light',
+ *   persistKey: 'molecule-theme',
+ * })
+ *
+ * setProvider(provider)
+ * ```
+ *
+ * Then use CSS variables in your stylesheets:
+ * ```css
+ * .button {
+ *   background-color: var(--mol-color-primary);
+ *   color: var(--mol-color-text-inverse);
+ *   padding: var(--mol-spacing-sm) var(--mol-spacing-md);
+ *   border-radius: var(--mol-radius-md);
+ *   transition: background-color var(--mol-transition-fast);
+ * }
+ * ```
+ *
+ * @remarks
+ * Recoloring a scaffolded app — where the palette actually lives:
+ *
+ * This bond writes `--mol-color-*` variables and toggles light/dark via a
+ * `data-mol-mode` attribute. In `@molecule/app-ui-tailwind`'s `base.css` the
+ * Tailwind `@theme` reads each core token as
+ * `--color-primary: var(--mol-color-primary, <default>)`, so for a CUSTOM build
+ * (no per-app `theme.css`) this bond's `Theme` objects ARE the palette — edit
+ * `colors` here to recolor.
+ *
+ * BUT template-based apps ship `app/src/theme.css` that hardcodes `--color-*` on
+ * `:root` / `[data-mol-mode='dark']`. Those have the same `:root` specificity and
+ * load last, so they SHADOW the `var(--mol-color-*)` reference — the visible
+ * colors come only from `theme.css`. When `theme.css` defines colors, editing
+ * this bond has NO visible effect; recolor by editing `app/src/theme.css`. This
+ * bond still drives light/dark mode and is the palette for non-Tailwind targets
+ * (e.g. React Native). Precedence: `theme.css` > this bond > base defaults.
+ *
+ * The provider also toggles a `.dark` class on `<html>` (alongside the
+ * `data-mol-mode` attribute) so Tailwind `dark:` variants react to theme
+ * toggles — if `dark:` utilities aren't switching, check that this bond is
+ * wired and applying to the document.
+ *
+ * @module
+ */
+export * from './provider.js';
+export * from './themes.js';
+export * from './types.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4DG;AAEH,cAAc,eAAe,CAAA;AAC7B,cAAc,aAAa,CAAA;AAC3B,cAAc,YAAY,CAAA"}

package/dist/index.js

@@ -0,0 +1,65 @@
+/**
+ * CSS custom properties theme provider for molecule.dev.
+ *
+ * Provides a framework-agnostic ThemeProvider implementation that applies
+ * theme tokens as CSS custom properties (variables) to the document root.
+ * Works with any framework -- React, Vue, Svelte, Angular, Solid, or vanilla JS.
+ *
+ * @example
+ * ```typescript
+ * import {
+ *   createCSSVariablesThemeProvider,
+ *   lightTheme,
+ *   darkTheme,
+ * } from '@molecule/app-theme-css-variables'
+ * import { setProvider } from '@molecule/app-theme'
+ *
+ * const provider = createCSSVariablesThemeProvider({
+ *   themes: [lightTheme, darkTheme],
+ *   defaultTheme: 'light',
+ *   persistKey: 'molecule-theme',
+ * })
+ *
+ * setProvider(provider)
+ * ```
+ *
+ * Then use CSS variables in your stylesheets:
+ * ```css
+ * .button {
+ *   background-color: var(--mol-color-primary);
+ *   color: var(--mol-color-text-inverse);
+ *   padding: var(--mol-spacing-sm) var(--mol-spacing-md);
+ *   border-radius: var(--mol-radius-md);
+ *   transition: background-color var(--mol-transition-fast);
+ * }
+ * ```
+ *
+ * @remarks
+ * Recoloring a scaffolded app — where the palette actually lives:
+ *
+ * This bond writes `--mol-color-*` variables and toggles light/dark via a
+ * `data-mol-mode` attribute. In `@molecule/app-ui-tailwind`'s `base.css` the
+ * Tailwind `@theme` reads each core token as
+ * `--color-primary: var(--mol-color-primary, <default>)`, so for a CUSTOM build
+ * (no per-app `theme.css`) this bond's `Theme` objects ARE the palette — edit
+ * `colors` here to recolor.
+ *
+ * BUT template-based apps ship `app/src/theme.css` that hardcodes `--color-*` on
+ * `:root` / `[data-mol-mode='dark']`. Those have the same `:root` specificity and
+ * load last, so they SHADOW the `var(--mol-color-*)` reference — the visible
+ * colors come only from `theme.css`. When `theme.css` defines colors, editing
+ * this bond has NO visible effect; recolor by editing `app/src/theme.css`. This
+ * bond still drives light/dark mode and is the palette for non-Tailwind targets
+ * (e.g. React Native). Precedence: `theme.css` > this bond > base defaults.
+ *
+ * The provider also toggles a `.dark` class on `<html>` (alongside the
+ * `data-mol-mode` attribute) so Tailwind `dark:` variants react to theme
+ * toggles — if `dark:` utilities aren't switching, check that this bond is
+ * wired and applying to the document.
+ *
+ * @module
+ */
+export * from './provider.js';
+export * from './themes.js';
+export * from './types.js';
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4DG;AAEH,cAAc,eAAe,CAAA;AAC7B,cAAc,aAAa,CAAA;AAC3B,cAAc,YAAY,CAAA"}

package/dist/provider.d.ts

@@ -0,0 +1,35 @@
+/**
+ * CSS variables theme provider implementation.
+ *
+ * Applies theme values as CSS custom properties to the document root,
+ * enabling framework-agnostic theming via standard CSS.
+ *
+ * @module
+ */
+import type { ThemeProvider } from '@molecule/app-theme';
+import type { CSSVariablesThemeConfig } from './types.js';
+/**
+ * Creates a framework-agnostic ThemeProvider that applies theme tokens
+ * as CSS custom properties on the document root element.
+ *
+ * @example
+ * ```typescript
+ * import { createCSSVariablesThemeProvider, lightTheme, darkTheme } from '`@molecule/app-theme-css-variables`'
+ * import { setProvider } from '`@molecule/app-theme`'
+ *
+ * const provider = createCSSVariablesThemeProvider({
+ *   themes: [lightTheme, darkTheme],
+ *   defaultTheme: 'light',
+ *   prefix: 'mol',
+ *   persistKey: 'molecule-theme',
+ * })
+ *
+ * setProvider(provider)
+ * ```
+ * @param config - Theme provider configuration (available themes, default theme, CSS variable prefix, persistence).
+ * @returns A ThemeProvider that applies themes as CSS custom properties on the document root.
+ */
+export declare function createCSSVariablesThemeProvider(config: CSSVariablesThemeConfig): ThemeProvider;
+/** Default CSS variables theme provider with light and dark themes. */
+export declare const provider: ThemeProvider;
+//# sourceMappingURL=provider.d.ts.map

package/dist/provider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"provider.d.ts","sourceRoot":"","sources":["../src/provider.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,KAAK,EAAS,aAAa,EAAE,MAAM,qBAAqB,CAAA;AAG/D,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,YAAY,CAAA;AAmHzD;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,wBAAgB,+BAA+B,CAAC,MAAM,EAAE,uBAAuB,GAAG,aAAa,CAqF9F;AAED,uEAAuE;AACvE,eAAO,MAAM,QAAQ,EAAE,aAGrB,CAAA"}

package/dist/provider.js

@@ -0,0 +1,215 @@
+/**
+ * CSS variables theme provider implementation.
+ *
+ * Applies theme values as CSS custom properties to the document root,
+ * enabling framework-agnostic theming via standard CSS.
+ *
+ * @module
+ */
+import { darkTheme, lightTheme } from './themes.js';
+/**
+ * Converts a camelCase string to kebab-case (e.g. `'primaryColor'` → `'primary-color'`).
+ * @param str - The camelCase string to convert.
+ * @returns The kebab-case string.
+ */
+function camelToKebab(str) {
+    return str.replace(/[A-Z]/g, (m) => `-${m.toLowerCase()}`);
+}
+/**
+ * Build the declaration body (CSS custom-property lines) for a single theme.
+ */
+function buildDeclarations(theme, prefix) {
+    const lines = [];
+    for (const [key, value] of Object.entries(theme.colors)) {
+        lines.push(`  --${prefix}-color-${camelToKebab(key)}: ${value};`);
+    }
+    for (const [key, value] of Object.entries(theme.spacing)) {
+        lines.push(`  --${prefix}-spacing-${key}: ${value};`);
+    }
+    for (const [key, value] of Object.entries(theme.borderRadius)) {
+        lines.push(`  --${prefix}-radius-${key}: ${value};`);
+    }
+    for (const [key, value] of Object.entries(theme.shadows)) {
+        lines.push(`  --${prefix}-shadow-${key}: ${value};`);
+    }
+    for (const [key, value] of Object.entries(theme.typography.fontFamily)) {
+        lines.push(`  --${prefix}-font-${key}: ${value};`);
+    }
+    for (const [key, value] of Object.entries(theme.typography.fontSize)) {
+        lines.push(`  --${prefix}-text-${key}: ${value};`);
+    }
+    for (const [key, value] of Object.entries(theme.typography.fontWeight)) {
+        lines.push(`  --${prefix}-font-weight-${key}: ${String(value)};`);
+    }
+    for (const [key, value] of Object.entries(theme.typography.lineHeight)) {
+        lines.push(`  --${prefix}-leading-${key}: ${String(value)};`);
+    }
+    for (const [key, value] of Object.entries(theme.breakpoints)) {
+        lines.push(`  --${prefix}-breakpoint-${camelToKebab(key)}: ${value};`);
+    }
+    for (const [key, value] of Object.entries(theme.transitions)) {
+        lines.push(`  --${prefix}-transition-${key}: ${value};`);
+    }
+    for (const [key, value] of Object.entries(theme.zIndex)) {
+        lines.push(`  --${prefix}-z-${key}: ${String(value)};`);
+    }
+    return lines.join('\n');
+}
+/**
+ * Apply the active theme to the document.
+ *
+ * Strategy: inject a single `<style>` element holding ONE rule per
+ * registered theme, each scoped with `:where(...)` so the rules have ZERO
+ * specificity. This lets an app's own `theme.css` (e.g. plain
+ * `:root { … }` or `[data-mol-mode="dark"] { … }`, both specificity 0,1,0)
+ * always win, while still giving apps that ship no theme.css a working
+ * baseline. The selector for the mode-matching theme bumps to the active
+ * mode via the `data-{prefix}-mode` attribute the function also writes.
+ *
+ * Without `:where()` the provider's inline / high-specificity styles
+ * defeated every per-app `[data-mol-mode="dark"]` block, leaving the
+ * fleet's brand-specific dark palettes unreachable. See
+ * `__tests__/provider.test.ts` for the regression that pinned this.
+ *
+ * @param themes - All themes registered with the provider.
+ * @param activeTheme - The currently-selected theme (drives data-attrs + class).
+ * @param prefix - CSS variable prefix (e.g. `'mol'` → `--mol-color-primary`).
+ */
+function applyThemeToDocument(themes, activeTheme, prefix) {
+    if (typeof document === 'undefined')
+        return;
+    const root = document.documentElement;
+    const styleId = `${prefix}-theme-vars`;
+    // Build/refresh the single stylesheet with one :where()-wrapped rule per theme.
+    let style = document.getElementById(styleId);
+    if (!style) {
+        style = document.createElement('style');
+        style.id = styleId;
+        // Insert as early as possible so source-order ties go to app stylesheets
+        // imported later. The :where() wrapper makes specificity moot, but
+        // injecting at <head> top is the safest belt-and-braces.
+        const head = document.head || document.documentElement;
+        head.insertBefore(style, head.firstChild);
+    }
+    const rules = [];
+    // Default (light/baseline) rule — always present, selects :root unconditionally
+    // but inside :where(), so specificity is 0,0,0.
+    const baseline = themes.find((t) => t.mode === 'light') || themes[0];
+    if (baseline) {
+        rules.push(`:where(:root) {\n${buildDeclarations(baseline, prefix)}\n}`);
+    }
+    // Per-mode rules — fire when the active mode attribute matches.
+    for (const t of themes) {
+        rules.push(`:where([data-${prefix}-mode="${t.mode}"]) {\n${buildDeclarations(t, prefix)}\n}`);
+    }
+    style.textContent = rules.join('\n\n');
+    // Set data attributes for CSS selectors
+    root.setAttribute(`data-${prefix}-theme`, activeTheme.name);
+    root.setAttribute(`data-${prefix}-mode`, activeTheme.mode);
+    // Also toggle a `.dark` class on <html>. Many app templates rely on the
+    // Tailwind `dark:` modifier — which the generator wires via
+    // `@custom-variant dark (&:where(.dark, .dark *))` in index.css — so
+    // without this class on the root, every `dark:bg-*` / `dark:text-*` etc.
+    // utility silently no-ops on theme toggle.
+    root.classList.toggle('dark', activeTheme.mode === 'dark');
+}
+/**
+ * Creates a framework-agnostic ThemeProvider that applies theme tokens
+ * as CSS custom properties on the document root element.
+ *
+ * @example
+ * ```typescript
+ * import { createCSSVariablesThemeProvider, lightTheme, darkTheme } from '`@molecule/app-theme-css-variables`'
+ * import { setProvider } from '`@molecule/app-theme`'
+ *
+ * const provider = createCSSVariablesThemeProvider({
+ *   themes: [lightTheme, darkTheme],
+ *   defaultTheme: 'light',
+ *   prefix: 'mol',
+ *   persistKey: 'molecule-theme',
+ * })
+ *
+ * setProvider(provider)
+ * ```
+ * @param config - Theme provider configuration (available themes, default theme, CSS variable prefix, persistence).
+ * @returns A ThemeProvider that applies themes as CSS custom properties on the document root.
+ */
+export function createCSSVariablesThemeProvider(config) {
+    const { themes, defaultTheme, prefix = 'mol', applyToDocument = true, persistKey } = config;
+    // If a persistKey is set without an explicit storage adapter, fall back to
+    // window.localStorage. The previous behavior — persistKey but no storage =
+    // silent no-op — was the source of "I toggled dark mode and it reset on
+    // reload" bugs across multiple flagships. SSR/non-browser environments
+    // still get undefined and skip persistence.
+    // Guard against partial localStorage shims (some test runners stub
+    // `globalThis.localStorage = {}` without methods); only adopt it when
+    // both getItem and setItem are real functions.
+    const browserStorage = globalThis.localStorage;
+    const storage = config.storage ??
+        (browserStorage &&
+            typeof browserStorage.getItem === 'function' &&
+            typeof browserStorage.setItem === 'function'
+            ? {
+                getItem: (key) => browserStorage.getItem(key),
+                setItem: (key, value) => {
+                    ;
+                    browserStorage.setItem(key, value);
+                },
+            }
+            : undefined);
+    let currentTheme = themes.find((t) => t.name === defaultTheme) || themes[0];
+    const listeners = new Set();
+    // Try to restore from storage adapter
+    if (persistKey && storage) {
+        const saved = storage.getItem(persistKey);
+        if (saved) {
+            const found = themes.find((t) => t.name === saved);
+            if (found)
+                currentTheme = found;
+        }
+    }
+    // Apply initial theme
+    if (applyToDocument) {
+        applyThemeToDocument(themes, currentTheme, prefix);
+    }
+    const provider = {
+        getTheme() {
+            return currentTheme;
+        },
+        setTheme(theme) {
+            const newTheme = typeof theme === 'string' ? themes.find((t) => t.name === theme) : theme;
+            if (!newTheme)
+                return;
+            currentTheme = newTheme;
+            if (applyToDocument) {
+                applyThemeToDocument(themes, currentTheme, prefix);
+            }
+            if (persistKey && storage) {
+                storage.setItem(persistKey, currentTheme.name);
+            }
+            listeners.forEach((fn) => fn(currentTheme));
+        },
+        toggleMode() {
+            const targetMode = currentTheme.mode === 'light' ? 'dark' : 'light';
+            const newTheme = themes.find((t) => t.mode === targetMode);
+            if (newTheme)
+                provider.setTheme(newTheme);
+        },
+        subscribe(callback) {
+            listeners.add(callback);
+            return () => {
+                listeners.delete(callback);
+            };
+        },
+        getThemes() {
+            return themes;
+        },
+    };
+    return provider;
+}
+/** Default CSS variables theme provider with light and dark themes. */
+export const provider = createCSSVariablesThemeProvider({
+    themes: [lightTheme, darkTheme],
+    defaultTheme: 'light',
+});
+//# sourceMappingURL=provider.js.map

package/dist/provider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"provider.js","sourceRoot":"","sources":["../src/provider.ts"],"names":[],"mappings":"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"}

package/dist/themes.d.ts

@@ -0,0 +1,24 @@
+/**
+ * Built-in light and dark theme definitions for CSS variables provider.
+ *
+ * These themes use a modern color palette with blue as the primary brand color.
+ * Colors are specified as hex/rgba values and will be applied as CSS custom
+ * properties by the provider.
+ *
+ * @module
+ */
+import type { Theme } from '@molecule/app-theme';
+/**
+ * Default light theme.
+ *
+ * Near-white backgrounds (#f6f6f6 background, #ffffff surface), dark text,
+ * blue primary (#4070e0).
+ */
+export declare const lightTheme: Theme;
+/**
+ * Default dark theme.
+ *
+ * Dark backgrounds (#0f172a, #1e293b), light text, blue primary (#60a5fa).
+ */
+export declare const darkTheme: Theme;
+//# sourceMappingURL=themes.d.ts.map

package/dist/themes.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"themes.d.ts","sourceRoot":"","sources":["../src/themes.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAEH,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,qBAAqB,CAAA;AAEhD;;;;;GAKG;AACH,eAAO,MAAM,UAAU,EAAE,KAyHxB,CAAA;AAED;;;;GAIG;AACH,eAAO,MAAM,SAAS,EAAE,KAsHvB,CAAA"}

package/dist/themes.js

@@ -0,0 +1,252 @@
+/**
+ * Built-in light and dark theme definitions for CSS variables provider.
+ *
+ * These themes use a modern color palette with blue as the primary brand color.
+ * Colors are specified as hex/rgba values and will be applied as CSS custom
+ * properties by the provider.
+ *
+ * @module
+ */
+/**
+ * Default light theme.
+ *
+ * Near-white backgrounds (#f6f6f6 background, #ffffff surface), dark text,
+ * blue primary (#4070e0).
+ */
+export const lightTheme = {
+    name: 'light',
+    mode: 'light',
+    colors: {
+        background: '#f6f6f6',
+        backgroundSecondary: '#eeeeee',
+        backgroundTertiary: '#e8e8e8',
+        surface: '#ffffff',
+        surfaceSecondary: '#f8f8f8',
+        inputBackground: '#ffffff',
+        text: '#333333',
+        // #686868 = the lightest grey passing WCAG AA 4.5:1 on EVERY light surface
+        // (#f6f6f6 bg 5.16, #eeeeee 4.80, #e8e8e8 4.55, #ffffff 5.57) — #808080
+        // was 3.65 on the page background and failed axe color-contrast.
+        textSecondary: '#686868',
+        textTertiary: '#555555',
+        textInverse: '#ffffff',
+        primary: '#4070e0',
+        primaryLight: '#6090f0',
+        primaryDark: '#3060c0',
+        secondary: '#808080',
+        secondaryLight: '#a0a0a0',
+        secondaryDark: '#606060',
+        success: '#309000',
+        successLight: '#dcfce7',
+        warning: '#e0e040',
+        warningLight: '#fef3c7',
+        error: '#d02000',
+        errorLight: '#fee2e2',
+        info: '#17a2b8',
+        infoLight: '#cffafe',
+        border: '#e0e0e0',
+        borderSecondary: '#d0d0d0',
+        borderFocus: '#4070e0',
+        overlay: 'rgba(0, 0, 0, 0.5)',
+        shadow: 'rgba(0, 0, 0, 0.1)',
+    },
+    breakpoints: {
+        mobileS: '320px',
+        mobileM: '375px',
+        mobileL: '425px',
+        tablet: '768px',
+        laptop: '1024px',
+        laptopL: '1440px',
+        desktop: '2560px',
+    },
+    spacing: {
+        xs: '4px',
+        sm: '8px',
+        md: '16px',
+        lg: '24px',
+        xl: '32px',
+        xxl: '48px',
+        xxxl: '64px',
+    },
+    typography: {
+        fontFamily: {
+            sans: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif',
+            serif: 'Georgia, "Times New Roman", Times, serif',
+            mono: 'SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace',
+        },
+        fontSize: {
+            xs: '0.75rem',
+            sm: '0.875rem',
+            base: '1rem',
+            lg: '1.125rem',
+            xl: '1.25rem',
+            '2xl': '1.5rem',
+            '3xl': '1.875rem',
+            '4xl': '2.25rem',
+            '5xl': '3rem',
+        },
+        fontWeight: {
+            light: 300,
+            normal: 400,
+            medium: 500,
+            semibold: 600,
+            bold: 700,
+        },
+        lineHeight: {
+            tight: 1.25,
+            normal: 1.5,
+            relaxed: 1.75,
+        },
+    },
+    borderRadius: {
+        none: '0',
+        sm: '4px',
+        md: '8px',
+        lg: '12px',
+        xl: '16px',
+        full: '9999px',
+    },
+    shadows: {
+        none: 'none',
+        sm: '0 1px 2px 0 rgba(0, 0, 0, 0.05)',
+        md: '0 4px 6px -1px rgba(0, 0, 0, 0.1)',
+        lg: '0 10px 15px -3px rgba(0, 0, 0, 0.1)',
+        xl: '0 20px 25px -5px rgba(0, 0, 0, 0.15)',
+    },
+    transitions: {
+        fast: '150ms ease',
+        normal: '300ms ease',
+        slow: '500ms ease',
+    },
+    zIndex: {
+        hide: -1,
+        base: 0,
+        dropdown: 1000,
+        sticky: 1100,
+        fixed: 1200,
+        modal: 1300,
+        popover: 1400,
+        tooltip: 1500,
+        toast: 1600,
+    },
+};
+/**
+ * Default dark theme.
+ *
+ * Dark backgrounds (#0f172a, #1e293b), light text, blue primary (#60a5fa).
+ */
+export const darkTheme = {
+    name: 'dark',
+    mode: 'dark',
+    colors: {
+        background: '#0f172a',
+        backgroundSecondary: '#1e293b',
+        backgroundTertiary: '#334155',
+        surface: '#1e293b',
+        surfaceSecondary: '#293548',
+        inputBackground: '#0a1020',
+        text: '#f8fafc',
+        textSecondary: '#cbd5e1',
+        textTertiary: '#64748b',
+        textInverse: '#0f172a',
+        primary: '#60a5fa',
+        primaryLight: '#93c5fd',
+        primaryDark: '#3b82f6',
+        secondary: '#94a3b8',
+        secondaryLight: '#cbd5e1',
+        secondaryDark: '#64748b',
+        success: '#4ade80',
+        successLight: '#14532d',
+        warning: '#fbbf24',
+        warningLight: '#422006',
+        error: '#f87171',
+        errorLight: '#450a0a',
+        info: '#22d3ee',
+        infoLight: '#083344',
+        border: '#334155',
+        borderSecondary: '#475569',
+        borderFocus: '#60a5fa',
+        overlay: 'rgba(0, 0, 0, 0.7)',
+        shadow: 'rgba(0, 0, 0, 0.4)',
+    },
+    breakpoints: {
+        mobileS: '320px',
+        mobileM: '375px',
+        mobileL: '425px',
+        tablet: '768px',
+        laptop: '1024px',
+        laptopL: '1440px',
+        desktop: '2560px',
+    },
+    spacing: {
+        xs: '4px',
+        sm: '8px',
+        md: '16px',
+        lg: '24px',
+        xl: '32px',
+        xxl: '48px',
+        xxxl: '64px',
+    },
+    typography: {
+        fontFamily: {
+            sans: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif',
+            serif: 'Georgia, "Times New Roman", Times, serif',
+            mono: 'SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace',
+        },
+        fontSize: {
+            xs: '0.75rem',
+            sm: '0.875rem',
+            base: '1rem',
+            lg: '1.125rem',
+            xl: '1.25rem',
+            '2xl': '1.5rem',
+            '3xl': '1.875rem',
+            '4xl': '2.25rem',
+            '5xl': '3rem',
+        },
+        fontWeight: {
+            light: 300,
+            normal: 400,
+            medium: 500,
+            semibold: 600,
+            bold: 700,
+        },
+        lineHeight: {
+            tight: 1.25,
+            normal: 1.5,
+            relaxed: 1.75,
+        },
+    },
+    borderRadius: {
+        none: '0',
+        sm: '4px',
+        md: '8px',
+        lg: '12px',
+        xl: '16px',
+        full: '9999px',
+    },
+    shadows: {
+        none: 'none',
+        sm: '0 1px 2px 0 rgba(0, 0, 0, 0.15)',
+        md: '0 4px 6px -1px rgba(0, 0, 0, 0.25)',
+        lg: '0 10px 15px -3px rgba(0, 0, 0, 0.3)',
+        xl: '0 20px 25px -5px rgba(0, 0, 0, 0.35)',
+    },
+    transitions: {
+        fast: '150ms ease',
+        normal: '300ms ease',
+        slow: '500ms ease',
+    },
+    zIndex: {
+        hide: -1,
+        base: 0,
+        dropdown: 1000,
+        sticky: 1100,
+        fixed: 1200,
+        modal: 1300,
+        popover: 1400,
+        tooltip: 1500,
+        toast: 1600,
+    },
+};
+//# sourceMappingURL=themes.js.map

package/dist/themes.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"themes.js","sourceRoot":"","sources":["../src/themes.ts"],"names":[],"mappings":"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"}

package/dist/types.d.ts

@@ -0,0 +1,41 @@
+/**
+ * Configuration types for the CSS variables theme provider.
+ *
+ * @module
+ */
+import type { Theme } from '@molecule/app-theme';
+/**
+ * Minimal storage adapter for theme persistence. Compatible with
+ * localStorage, sessionStorage, or any custom implementation
+ * (e.g., React Native AsyncStorage wrapper, SSR no-op).
+ */
+export interface ThemeStorageAdapter {
+    getItem(key: string): string | null;
+    setItem(key: string, value: string): void;
+}
+/**
+ * Configuration for css variables theme.
+ */
+export interface CSSVariablesThemeConfig {
+    /** Available themes. */
+    themes: Theme[];
+    /** Name of the default theme to use. */
+    defaultTheme?: string;
+    /** CSS variable prefix (default: 'mol'). */
+    prefix?: string;
+    /** Whether to auto-apply CSS variables to :root (default: true). */
+    applyToDocument?: boolean;
+    /**
+     * Key for persisting the selected theme name across reloads. When `storage`
+     * is omitted, persistence falls back to `window.localStorage` in browser
+     * environments; in SSR / non-browser environments persistence is skipped.
+     */
+    persistKey?: string;
+    /**
+     * Storage adapter for persisting theme preference. Optional — when omitted
+     * and `persistKey` is set, `window.localStorage` is used when available.
+     * Provide an adapter for React Native (AsyncStorage wrapper) or custom stores.
+     */
+    storage?: ThemeStorageAdapter;
+}
+//# sourceMappingURL=types.d.ts.map

package/dist/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,qBAAqB,CAAA;AAEhD;;;;GAIG;AACH,MAAM,WAAW,mBAAmB;IAClC,OAAO,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAAA;IACnC,OAAO,CAAC,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,GAAG,IAAI,CAAA;CAC1C;AAED;;GAEG;AACH,MAAM,WAAW,uBAAuB;IACtC,wBAAwB;IACxB,MAAM,EAAE,KAAK,EAAE,CAAA;IACf,wCAAwC;IACxC,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,4CAA4C;IAC5C,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,oEAAoE;IACpE,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB;;;;OAIG;IACH,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB;;;;OAIG;IACH,OAAO,CAAC,EAAE,mBAAmB,CAAA;CAC9B"}

package/dist/types.js

@@ -0,0 +1,7 @@
+/**
+ * Configuration types for the CSS variables theme provider.
+ *
+ * @module
+ */
+export {};
+//# sourceMappingURL=types.js.map

package/dist/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA;;;;GAIG"}

package/package.json

@@ -0,0 +1,48 @@
+{
+  "name": "@molecule/app-theme-css-variables",
+  "version": "1.0.0",
+  "description": "CSS custom properties theme provider for molecule.dev",
+  "type": "module",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "scripts": {
+    "build": "tsc",
+    "test": "vitest run",
+    "test:watch": "vitest"
+  },
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "keywords": [
+    "molecule",
+    "theme",
+    "css-variables",
+    "css-custom-properties",
+    "dark-mode"
+  ],
+  "license": "Apache-2.0",
+  "devDependencies": {
+    "@types/node": "26.1.2",
+    "typescript": "6.0.3",
+    "vitest": "4.1.10"
+  },
+  "peerDependencies": {
+    "@molecule/app-theme": "^1.0.0"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/molecule-dev/molecule.git",
+    "directory": "packages/app/bonds/theme/css-variables"
+  },
+  "homepage": "https://github.com/molecule-dev/molecule/tree/main/packages/app/bonds/theme/css-variables",
+  "bugs": "https://github.com/molecule-dev/molecule/issues",
+  "publishConfig": {
+    "access": "public"
+  }
+}