# @maggioli-design-system/styles > This module contains SCSS and CSS styles used by Maggioli Design System, it also makes available a Tailwind config based on Maggioli design tokens. Latest version **16.0.1** (published 2026-06-08) · ISC license · 0 weekly downloads ## Install ```sh npm install @maggioli-design-system/styles pnpm add @maggioli-design-system/styles yarn add @maggioli-design-system/styles bun add @maggioli-design-system/styles ``` ## Health **Score 55/100 (C)** — status: active. Positive: no vulnerabilities; has provenance; high maintenance score. Warnings: low downloads; no types; no esm support. ## Facts | | | |---|---| | Version | 16.0.1 | | Published | 2026-06-08 | | First published | 2021-04-02 | | Weekly downloads | 0 | | License | ISC | | TypeScript types | none | | Module format | CommonJS | | Dependencies | 6 | | Unpacked size | 260.8 KB | | Known vulnerabilities | 0 | | Install scripts | no | | Provenance | attested (GitHub Actions) | | GitHub stars | 0 | | Author | Vittorio Vittori | | Maintainers | vitto, moodysmiles, nicola.tamburini.maggioli | | Keywords | scss, css, tailwindcss | ## Links - npm: https://www.npmjs.com/package/@maggioli-design-system/styles - Repository: https://github.com/magma-design-system/magma - Homepage: https://github.com/magma-design-system/magma#readme - Issues: https://github.com/magma-design-system/magma/issues - npm.io page: https://npm.io/package/@maggioli-design-system/styles ## Dependencies (6) - [normalize.css](https://npm.io/package/normalize.css.md) 8.0.1 - [@fontsource/karla](https://npm.io/package/@fontsource/karla.md) 5.1.0 - [@fontsource/roboto](https://npm.io/package/@fontsource/roboto.md) 5.1.0 - [@fontsource/roboto-mono](https://npm.io/package/@fontsource/roboto-mono.md) 5.1.0 - [@fontsource/merriweather](https://npm.io/package/@fontsource/merriweather.md) 5.1.0 - [@maggioli-design-system/design-tokens](https://npm.io/package/@maggioli-design-system/design-tokens.md) 14.1.0 ## Alternatives - [@sveltejs/kit](https://npm.io/package/@sveltejs/kit.md) — 2.2M weekly downloads - [@atlaskit/theme](https://npm.io/package/@atlaskit/theme.md) — 402.0K weekly downloads - [@tangle-network/brand](https://npm.io/package/@tangle-network/brand.md) — 10.0K weekly downloads - [seneca](https://npm.io/package/seneca.md) — 7.4K weekly downloads - [@bsb/base](https://npm.io/package/@bsb/base.md) — 7.2K weekly downloads ## Recent versions - 16.0.1 (latest) — 2026-06-08 - 16.0.0 — 2026-06-08 - 15.11.1 — 2026-04-20 - 15.11.0 — 2025-06-03 - 15.10.0 — 2025-05-14 - 15.9.1 — 2025-04-02 - 15.9.0 — 2025-03-05 - 15.8.1 — 2025-02-26 - 15.8.0 — 2025-02-25 - 15.7.0 — 2025-02-06 - 15.6.0 — 2024-12-19 - 15.5.0 — 2024-11-25 - 15.4.0 — 2024-11-14 - 15.3.2 — 2024-09-17 - 15.3.1 — 2024-09-13 - … 86 more at https://npm.io/package/@maggioli-design-system/styles/versions ## README # Magma — Maggioli Design System Magma is the [Maggioli Design System][docs]: a library of ~115 web components (StencilJS), design tokens, SVG icons, brand assets and CSS/Tailwind 4 styles, each published as a separate npm package. [docs]: https://design-system.maggiolicloud.it/ ## Stack - **Monorepo**: [NX](https://nx.dev/) + npm workspaces - **Web components**: [StencilJS](https://stenciljs.com/) + TypeScript - **Styles**: Tailwind 4 (CSS custom properties) + CSS cascade layers - **Design tokens**: Style Dictionary + Adobe Leonardo - **Documentation**: Storybook ## Repository structure ``` . ├── docs/ # Cross-project documentation (architecture, workflow, standards) │ └── agents/ # Install/usage guides for consumer apps (web components, React, Angular) ├── docker/ # nginx config used by the Storybook Docker image ├── projects/ # The sub-projects (npm workspaces, published npm packages) │ ├── codemod/ # @maggioli-design-system/magma-codemods — v1 → v2 consumer migration │ ├── design-tokens/ # @maggioli-design-system/design-tokens — token source + build + playground │ ├── icons/ # @maggioli-design-system/icons — icon font (Material Design based) │ ├── identity/ # @maggioli-design-system/identity — Maggioli brand identity assets │ ├── stencil/ # @maggioli-design-system/magma — the web components library │ ├── stencil-angular/ # @maggioli-design-system/magma-angular — Angular wrappers (generated by stencil) │ ├── stencil-react/ # @maggioli-design-system/magma-react — React wrappers (generated by stencil) │ ├── styles/ # @maggioli-design-system/styles — CSS + Tailwind config │ └── svg-icons/ # @maggioli-design-system/svg-icons — optimized SVG icon set ├── scripts/ # Repo-level utility scripts (release helpers, logging) ├── Dockerfile # Serves the built Storybook through nginx ├── nx.json # NX workspace configuration └── package.json # Root workspace: shared devDependencies, lint-staged, changelog scripts ``` ### Sub-projects | Project | Package | What it contains | | ----------------- | ---------------------------------------- | --------------------------------------------------------------------------------------------- | | `design-tokens` | `@maggioli-design-system/design-tokens` | Design token source (Style Dictionary), Figma token export, a CLI and a Vite-based playground | | `styles` | `@maggioli-design-system/styles` | CSS layers, reset, typography utilities and the Tailwind configuration built on the tokens | | `icons` | `@maggioli-design-system/icons` | Icon font generated from Google Material Design / Material Design Icons community sets | | `svg-icons` | `@maggioli-design-system/svg-icons` | The same icon set as optimized standalone SVG files (SVGO) | | `identity` | `@maggioli-design-system/identity` | Maggioli brand identity assets (logos, favicons, fonts) | | `stencil` | `@maggioli-design-system/magma` | The web components library and its Storybook; its build also generates the wrapper sources | | `stencil-react` | `@maggioli-design-system/magma-react` | React wrappers of the web components (sources generated by the `stencil` build) | | `stencil-angular` | `@maggioli-design-system/magma-angular` | Angular wrappers of the web components (sources generated by the `stencil` build) | | `codemod` | `@maggioli-design-system/magma-codemods` | Codemods that migrate consumer code (HTML, React, Angular, CSS) from Magma v1 to v2 | ### Dependencies between projects ``` design-tokens → no internal dependencies identity → no internal dependencies svg-icons → no internal dependencies styles → design-tokens stencil → design-tokens, styles, svg-icons, identity stencil-react → stencil (wrapper sources generated by the stencil build) stencil-angular → stencil (wrapper sources generated by the stencil build) ``` **Required build order**: `design-tokens` → `styles` → `icons` → `stencil` → `stencil-react`, `stencil-angular` ## Getting started ### Requirements - **Node**: see [.nvmrc](.nvmrc) (minimum `22.15.0`); with NVM run `nvm use` - **npm** as package manager — always npm, never Yarn - **NX** and **ESLint** installed globally ```bash npm install -g eslint nx ``` > Note: if you are using NVM and you change the Node version, you must reinstall global packages for the version you are using. ### Installation Clone the repository and install the dependencies from the project root: ```bash git clone git@github.com:magma-design-system/magma.git cd magma npm install ``` ### Build Build everything (NX resolves the dependency graph and build order): ```bash nx run magma:all # Or nx run-many --target=build --all ``` The `magma:all` target (defined in the root `project.json`) depends on every project's `build`, so NX schedules them topologically: `design-tokens`, `svg-icons`, `identity` and `codemod` first, then `styles` and `icons`, then `stencil`, and finally `stencil-react` and `stencil-angular`. Or build a single project: ```bash nx run design-tokens:build nx run styles:build nx run icons:build nx run svg-icons:build nx run identity:build nx run stencil:build ``` NX caches build results. If you need to bypass the cache (e.g. to verify a clean build), add `--skip-nx-cache` — be aware it will slow the build down considerably. ## Running the projects ### Storybook (web components) The main development environment: it builds the components in watch mode and serves the Storybook documentation on . ```bash nx run stencil:storybook.start ``` Make sure `design-tokens`, `styles` and `icons` have been built at least once first (see [Build](#build)). Other useful `stencil` targets: ```bash nx run stencil:dev # Stencil build in watch mode (dev config, no Storybook) nx run stencil:generate mds-component-name # scaffold a new component nx run stencil:test # unit + browser tests (Vitest) nx run stencil:build.docs # regenerate component readme docs ``` ### Design tokens playground An interactive playground to explore and tune the token configuration, served on : ```bash nx run design-tokens:playground ``` The project also ships a CLI (`nx run design-tokens:cli`) and a test suite (`nx run design-tokens:test`, Vitest). ### Codemods (v1 → v2 migration) Migrates consumer code from Magma v1 to v2. Runs in dry-run mode by default; see [projects/codemod/README.md](projects/codemod/README.md) for all the options. ```bash npx @maggioli-design-system/magma-codemods --path ./src ``` ### Lint and format From the repo root: ```bash npm run lint # ESLint + Stylelint on every project npm run lint:fix # same, autofixing what it can npm run format # Prettier on the whole repo npm run format:check ``` CI runs the same `npm run lint` on every pull request (`lint` workflow), so a lint error fails the `lint` check. ## Development setup Using VSCode you should install at least the ESLint extension (Dirk Baeumer) and configure the editor: create `.vscode/settings.json` with the following content: ```json { "eslint.workingDirectories": [ { "pattern": "./projects/*/" } ] } ``` Commits follow the [Conventional Commits](https://www.conventionalcommits.org/) convention, enforced by commitlint + husky — see [docs/COMMITS.md](docs/COMMITS.md). ## Documentation | Topic | File | | -------------------------------------------------------------- | -------------------------------------------------------- | | Monorepo architecture and sub-project relationships | [docs/ARCHITECTURE.md](docs/ARCHITECTURE.md) | | Contribution workflow and git governance | [docs/WORKFLOW.md](docs/WORKFLOW.md) | | Commit message convention | [docs/COMMITS.md](docs/COMMITS.md) | | Lint rules for TypeScript/JS and CSS | [docs/CODING_STANDARDS.md](docs/CODING_STANDARDS.md) | | Navigable catalogue of all components | [docs/COMPONENTS.md](docs/COMPONENTS.md) | | Design token system: structure, naming, semantic levels | [docs/TOKENS.md](docs/TOKENS.md) | | Editor autocomplete for tokens: setup, generated sheet, extensions | [docs/EDITOR_TOKENS.md](docs/EDITOR_TOKENS.md) | | Installing Magma into a consumer app (all targets) | [docs/agents/SPEC.md](docs/agents/SPEC.md) | | Guidance for AI coding agents working on this repo | [AGENTS.md](AGENTS.md) | Each sub-project also has its own `README.md`, and `design-tokens`, `styles` and `stencil` have a `SPEC.md` with in-depth conventions. --- _Source: https://npm.io/package/@maggioli-design-system/styles · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._