Skip to main content

Webapp UI

Browser UI helpers and contracts without product components.

Install​

npm install @omgjs/labkit-webapp-ui

Runtime: browser UI. Package format: CommonJS and ESM.

Public API Groups​

  • cx.
  • isWebappThemeName.
  • WebappThemeValuesFor.
  • defineWebappThemes.
  • createWebappThemeController.
  • theme storage, document, and controller types.

Owns​

This package owns class-name composition, typed theme derivation, theme-name validation, persisted theme selection, document root class application, and theme subscription mechanics.

App Still Owns​

The app owns components, design tokens, generated CSS theme classes, visual values, layout, navigation, Storybook stories, and product interaction design.

Minimal Usage​

import {
  createWebappThemeController,
  defineWebappThemes,
} from "@omgjs/labkit-webapp-ui";

const themes = defineWebappThemes({
  createThemeClass: (values) => createTheme(vars, values),
  defaultThemeName: "dark",
  themes: {
    dark: { label: "Dark", values: darkThemeValues },
    light: { label: "Light", values: lightThemeValues },
  },
});

export const themeController = createWebappThemeController({
  defaultThemeName: themes.defaultThemeName,
  storageKey: "webapp:theme",
  themeClassByName: themes.themeClassByName,
  themeNames: themes.themeNames,
});

Runtime Notes​

Keep vanilla-extract defineWebappThemes calls in .css.ts files when they create CSS classes. Create the persisted controller in a normal app adapter.

Package README and source: ../../packages/webapp-ui/README.md, ../../packages/webapp-ui/src/index.ts.