Packages

@acronis-platform/ui-react does not stand alone. It sits on top of a small ecosystem of published packages that carry the design data, generate the themeable CSS, and ship the icons. This section documents those building blocks so you can consume them directly or understand how a token or icon flows from design into a component.

The pipeline

Two source packages hold hand-curated design data exported from Figma:

• @acronis-platform/design-tokens — DTCG JSON: colors, typography, spacing, radii, and the per-component token values.
• @acronis-platform/design-assets — JSON manifests plus the bundled icon and illustration binaries they point at.

Build tooling under tools/ transforms that data:

• tools/style-dictionary translates design-tokens into CSS custom properties, Tailwind presets, and a DTCG intermediate.
• The icon generator turns the design-assets / icon SVG sources into React components and SVG sprites.

The result is three generated, published packages:

• @acronis-platform/tokens-pd — per-brand CSS (--ui-* custom properties), per-component CSS, and Tailwind presets.
• @acronis-platform/icons-react — tree-shakeable React icon components.
• @acronis-platform/icons-sprite — committed SVG sprites.

Finally, @acronis-platform/ui-react consumes tokens-pd for theming and icons-react for composed icons.

design-tokens ─┐                        ┌─► tokens-pd ──┐
               ├─► (tools/style-dict.) ─┤               ├─► ui-react
design-assets ─┘   (icon generator)     └─► icons-react ─┘
                                        └─► icons-sprite

Published packages