@multisystemsuite/timezone-engine-ui

Shared CSS design tokens and class names for timezone-engine React and Angular components.

What it is used for

• Consistent styling across microfrontends and design systems
• World clock, timezone picker, live clock, and scheduler UI
• Module Federation / shared UI modules without duplicating CSS
• White-label enterprise apps that need a neutral default theme

Install

npm install @multisystemsuite/timezone-engine-ui

Usage

CSS stylesheet

import "@multisystemsuite/timezone-engine-ui/styles.css";

Apply class names to your components or use the built-in React/Angular components (they use these classes internally).

Design tokens (JavaScript)

import { tokens, classNames } from "@multisystemsuite/timezone-engine-ui";

console.log(tokens.colors.primary); // #2563eb
console.log(classNames.clock); // "te-clock"

CSS classes

| Class | Used by | | ------------------ | ----------------------- | | .te-clock | World clock container | | .te-clock__entry | Single timezone row | | .te-picker | Timezone select input | | .te-live-clock | Live time display | | .te-scheduler | Meeting scheduler panel | | .te-date | Formatted date text |

Custom theming

Override CSS variables in your app:

:root {
  --te-primary: #0066cc;
  --te-surface: #ffffff;
  --te-text: #1a1a1a;
}

Related packages

• @multisystemsuite/timezone-engine-react — React components using these styles
• @multisystemsuite/timezone-engine-angular — Angular components

Keywords

timezone, css, design-tokens, ui, styling, components

License

MIT