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.

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

Non-default brands ship as override-only files. css/deep_sky_itkontoret.css 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. 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