Overview

@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 is an overview of that whole inventory — ui-react included — so you can consume any of 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 manifests and binaries into React components.

The result is two 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.

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 ─┘

Published packages