@atelier-ui/styles

The component CSS of Atelier UI, written once. One file per component, rooted at the component's own class (.atl-button, .atl-badge, .atl-dialog), driven by the --ui-* design tokens.

@import '@atelier-ui/styles/button/atl-button.css';

Who uses it

• @atelier-ui/react depends on this package at runtime. Its components import '@atelier-ui/styles/<dir>/atl-<name>.css', and your bundler resolves that specifier.
• @atelier-ui/angular and @atelier-ui/vue consume it at build time only: Angular inlines it into the component styles (ViewEncapsulation.None), Vue extracts it into index.css. They do not depend on this package at runtime.

The design tokens (--ui-*: colour, type, spacing, radius, shadow, light and dark) are published here too, and this is their source of truth:

@import '@atelier-ui/styles/tokens.css';

Most apps should import the framework package's own copy instead, which needs no extra install: @import '@atelier-ui/react/styles/tokens.css' (or the angular / vue equivalent). Use the import above for apps that mix frameworks or want this package directly; with Angular or Vue, install it yourself first.

Layout

Every file is served as @atelier-ui/styles/<dir>/atl-<name>.css. The CSS files are side-effectful ("sideEffects": ["**/*.css"]); keep them when tree-shaking.