tokens-pd

Generated, themeable CSS custom properties and Tailwind presets for the Acronis platform design tokens.

@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 under css/, tailwind/, and 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 deep_sky_itkontoret, light-gray, telstra, 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 import-order based — last import wins — not a class toggle:

@import '@acronis-platform/tokens-pd/css/default.css';
@import '@acronis-platform/tokens-pd/css/deep_sky_itkontoret.css'; /* layers on top */

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

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>

Tailwind presets

tailwind/<brand>/tokens.js is a Tailwind preset of the shared semantic vocabulary, with baked literal values (no --ui-* dependency), consumed via @config. Each component also ships its own preset under tailwind/<brand>/components/<Component>.js, kept separate so component utilities stay opt-in.

/* in your app's CSS entry */
@config "../tailwind.config.ts";

// tailwind.config.ts
import tokens from '@acronis-platform/tokens-pd/tailwind/default/tokens.js';
import buttonTokens from '@acronis-platform/tokens-pd/tailwind/default/components/Button.js';

export default {
  presets: [tokens, buttonTokens],
};

Color roles land in Tailwind's role-namespaced keys with the role word and the ui- prefix dropped — bg-surface-primary, text-on-surface-primary, border-on-surface-border, ring-brand. Shadows land in boxShadow, so the preset's shadow-sm/shadow-md/shadow-lg carry the design-system elevation instead of Tailwind's defaults. Because the values are baked, a preset is self-contained, but brand selection happens at build time.

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:

Token path	CSS variable
`colors.background.surface.primary`	`--ui-background-surface-primary`
`colors.text.on-surface.primary`	`--ui-text-on-surface-primary`
`button._global.radius`	`--ui-button-global-radius`

DTCG intermediate

dtcg/*.json holds the per-mode, 100%-DTCG intermediate the CSS and presets are 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.

All files in this package are generated and carry a DO-NOT-EDIT header. To change a value, edit @acronis-platform/design-tokens and rebuild — never hand-edit the output.

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

Edit on GitHub