Package

For React apps, Storybook setups, sandboxes, and any project with its own build pipeline outside AEM, install the styleguide as an npm package.

Install

npm
pnpm

npm install --save-dev @tmedxp/styleguide

pnpm add --save-dev @tmedxp/styleguide

Import

Pick the entry that matches your needs. The unbranded entries give you the styleguide without brand tokens — useful if you’re applying brand tokens at runtime. The branded entries bundle a brand’s tokens with the styleguide.

import '@tmedxp/styleguide/main.css'; // styleguide without tokens
import '@tmedxp/styleguide/toyota.css'; // styleguide with Toyota tokens
import '@tmedxp/styleguide/lexus.css'; // styleguide with Lexus tokens

import '@tmedxp/styleguide/toyota/icons'; // Toyota icons reference
import '@tmedxp/styleguide/lexus/icons'; // Lexus icons reference

The package also exposes brand namespaces from its JS entry:

import { Toyota } from '@tmedxp/styleguide';
import * as Toyota from '@tmedxp/styleguide/toyota';
let Toyota.ICONS: Toyota.Icon[];

All exports

Entry	Contents
`@tmedxp/styleguide`	Global consts and brand namespaces
`@tmedxp/styleguide/assets.css`	Styleguide assets
`@tmedxp/styleguide/styles.css`	Styleguide styles without brand tokens
`@tmedxp/styleguide/lexus`	Lexus namespace
`@tmedxp/styleguide/lexus/assets.css`	Styleguide and Lexus brand assets
`@tmedxp/styleguide/lexus/styles.css`	Styleguide styles with Lexus tokens
`@tmedxp/styleguide/toyota`	Toyota namespace
`@tmedxp/styleguide/toyota/assets.css`	Styleguide and Toyota brand assets
`@tmedxp/styleguide/toyota/styles.css`	Styleguide styles with Toyota tokens

Set the active brand

The active brand is selected via a data-brand attribute on the <html> element. Set it once at the host level — your app, your Storybook preview, your sandbox — and every token resolves accordingly.

<html data-brand="lexus">
  ...
</html>

See Brands for how the attribute drives token resolution.

Fonts

The brand fonts ship with the package. For a quick drop-in, reference the font-face stylesheet the styleguide exposes; the Storybook section below shows where to load it.

Storybook

Update your previewHead with the assets and styles for the brand you’re showing:

<link
  rel="stylesheet"
  href="/node_modules/@tmedxp/styleguide/toyota/assets.css"
/>
<link
  rel="stylesheet"
  href="/node_modules/@tmedxp/styleguide/toyota/styles.css"
/>

React component library

If you’re using React, you may also want the headless component library that consumes the styleguide.

npm
pnpm

npm install --save-dev @tmdxp/dxp-headless-components

pnpm add --save-dev @tmdxp/dxp-headless-components

import { Overlay } from '@tmdxp/dxp-headless-components';

export const Component = () => <Overlay />;

What else to know

The runtime concepts in Architecture — CSS layers, the root reset, brand switching, and how drafts work — apply once the styleguide is loaded, regardless of how you installed it.