@uxelle/themes

Theme CSS, design tokens, and an optional React provider for uxElle, Bayer's Generative Product Foundation (GPF). Pair with @uxelle/components.

The published package contains the Open Source and Marmalade themes (light and dark), self-hosted latin Open Sans, adapter override CSS, and UXelleThemeProvider. Open Source is the default.

Install

npm install @uxelle/themes

Import theme CSS

import '@uxelle/themes/open-source.css';

Quick Start in the root README covers pairing this with @uxelle/components/base.css. Both attributes below are required — every --uxl-* token is declared under [data-open-source="light"] or [data-open-source="dark"]:

• data-open-source — "light" or "dark" on a parent (typically <html>)
• data-color-switcher — "default", "default-subtle", "success", "warning", "danger", or "info"

The deep path @uxelle/themes/themes/open-source/open-source.css remains valid. Marmalade is @uxelle/themes/marmalade.css with data-marmalade.

React provider

UXelleThemeProvider sets the attributes on document.documentElement so you can switch mode and palette from React instead of hardcoding them:

import { UXelleThemeProvider } from '@uxelle/themes/react';

export function AppShell({ children }: { children: React.ReactNode }) {
  return (
    <UXelleThemeProvider
      theme="open-source"
      darkMode={false}
      colorSwitcher="default"
    >
      {children}
    </UXelleThemeProvider>
  );
}

Discovery

import manifest from '@uxelle/themes/manifest.json';
import metadata from '@uxelle/themes/metadata.json';

• manifest.json — CSS output manifest with color-switcher modes
• metadata.json — theme registry, data attributes, and adapter override paths. Prefix adapter paths with @uxelle/themes/overrides/ to import them.

Fonts

Open Source and Marmalade use Open Sans (variable, latin, roman + italic), self-hosted next to each theme CSS. The font files are SIL Open Font License 1.1.

License

GPL-3.0-only for this package. Open Sans is OFL-1.1 (see themes/open-source/fonts/LICENSE.txt in the published tarball).

Source

• Repository: Bayer-Group/bayer-uxelle
• Issues: github.com/Bayer-Group/bayer-uxelle/issues
• Contributing: DEVELOPER.md