tokens-pd

@acronis-platform/tokens-pd is the consumable home for the Acronis platform (PD) token artifacts. Everything in it is generated from @acronis-platform/design-tokens by the tools/style-dictionary pipeline and committed to git, so consumers (and npm) get the output with no build step.

It ships three kinds of artifact: the tiered CSS under css/, one full CSS bundle per brand under bundles/, and the DTCG intermediate under dtcg/.

Semantic tier

css/default.css is the default brand at full strength: every --ui-* custom property plus the .ui-typography-* utility classes. This is the file you load first.

@import '@acronis-platform/tokens-pd/css/default.css';

@acronis-platform/ui-react already pulls this in for you when you import its styles entry, so most apps never import it directly.

Alongside colors, typography, and spacing, the semantic tier ships elevation as --ui-shadow-{sm,md,lg}. The light/dark pair sits inside the shadow's color slot — 0px 8px 16px 0px light-dark(…, …) — because light-dark() is a color function and cannot wrap a whole shadow value.

Per-component tiers

Each component has its own CSS under css/<Component>/default.css (e.g. css/Button/default.css, css/Breadcrumb/default.css). These hold the component-scoped --ui-* tokens (such as --ui-button-global-radius) and are opt-in — load only the components a build needs.

@import '@acronis-platform/tokens-pd/css/Button/default.css';

Brand overrides

Besides default, the package ships 20 brands — blue_yellow_uss_signal, brown, dark_gray, deep_purple, deep_sky_itkontoret, green_also_choise_df, ingram_micro, light_blue_hp, light_gray, orange_tsukaeru_helpox, pinky, purple, purple_fusion_media, red_fire_brick, red_home_pl, sand, telstra, virtual_one, virtuozzo, and yellow_1c — each as an override-only file (css/<brand>.css for the semantic tier, css/<Component>/<brand>.css for a component tier). A brand file contains a token only when its value differs from default or is new in that brand. Brand selection is not a class toggle: within a tier, the last import wins.

Because each tier is overridden separately, a brand needs the override for every tier it loads — the semantic one and one per component:

@import '@acronis-platform/tokens-pd/css/default.css';
@import '@acronis-platform/tokens-pd/css/deep_sky_itkontoret.css';
@import '@acronis-platform/tokens-pd/css/Button/default.css';
@import '@acronis-platform/tokens-pd/css/Button/deep_sky_itkontoret.css';

The base (default) files carry the color-scheme shell; override files are bare :root {} blocks layered over it.

Full brand bundles

bundles/<brand>.css is one self-contained, full-strength file per brand — the semantic tier and every component tier merged into a single :root, :host {} block, alongside the [data-theme] light/dark blocks and the .ui-typography-* classes. Every brand has one, default included.

@import '@acronis-platform/tokens-pd/bundles/telstra.css';

Unlike css/<brand>.css, a bundle is not an override — you replace it rather than layer it, and it needs no default base underneath. That makes it the artifact for runtime brand switching, where a consumer swaps a single <style> element instead of choosing imports at build time. With Vite, import each brand's bundle using ?raw and swap the element's content at runtime:

import bundleTelstra from '@acronis-platform/tokens-pd/bundles/telstra.css?raw';

const el = document.createElement('style');
document.head.appendChild(el);
el.textContent = bundleTelstra; // swap to switch brands

In Vite's dev server the bundle is also served at /node_modules/@acronis-platform/tokens-pd/bundles/telstra.css, but that path is not available in production builds.

A bundle carries every component's tokens whether the app renders that component or not, so a build that knows its brand up front should keep the opt-in per-component imports above instead.

Dark mode

Colors are zipped into light-dark() and the active scheme switches via the [data-theme] attribute plus color-scheme. There is no separate dark stylesheet — one set of variables covers both:

<html data-theme="dark"></html>

The --ui-* naming convention

Every CSS custom property is prefixed ui and the token path is flattened with hyphens. The colors tier root is dropped:

DTCG intermediate

dtcg/*.json holds the per-mode, 100%-DTCG intermediate the CSS is generated from (e.g. primitives-light.json, semantics-default.json, components-default.json). It is rarely consumed directly but is published for tools that prefer DTCG over CSS.

For how to apply these tokens in an app, see Theming.