# @zurich/design-tokens

<p align="center">
  <a href="https://npmjs.com/package/@zurich/design-tokens">
    <img
      src="https://img.shields.io/npm/v/@zurich/design-tokens?style=for-the-badge&color=yellow&label=npm%20version&logo=npm"
      alt="npm package"
    >
  </a>
  &nbsp;
  &nbsp;
  <a href="https://npmjs.com/package/@zurich/design-tokens">
    <img
      src="https://img.shields.io/npm/dm/@zurich/design-tokens?style=for-the-badge&color=white&label=npm%20downloads&logo=npm"
      alt="npm downloads"
    >
  </a>
<p>

<p align="center">
  <b>Made for:</b>
</p>

<p align="center">
  <img src="https://img.shields.io/badge/HTML-%23E34F26.svg?style=for-the-badge&logo=html5&logoColor=white" alt="HTML"/>
  <img src="https://img.shields.io/badge/CSS-1572B6?style=for-the-badge&logo=css3&logoColor=fff" alt="CSS"/>
  <a href="https://sass-lang.com/" target="_blank">
    <img src="https://img.shields.io/badge/Sass-C69?style=for-the-badge&logo=sass&logoColor=fff" alt="SCSS"/>
  </a>
</p>

## About

`@zurich/design-tokens` is the foundation package for the Zurich Design System (ZDS).
It provides design tokens, CSS variables, icons, pictograms, flags, and fonts.

### Features

  - **Design tokens**: Colors, spacing, typography, shadows, etc. as CSS variables
  - **Icons**: 500+ icons in line and solid variants
  - **Pictograms**: Brand pictograms for visual communication
  - **Flags**: Country and region flags
  - **Fonts**: ZurichSans and Ogg fonts bundled
  - **Standalone mode**: All assets embedded - no CDN required (v0.8.0+)

## Installation

```bash
npm install @zurich/design-tokens
```

## Package Structure

```
@zurich/design-tokens/
├── dist/
│   ├── index.css          # All styles combined
│   ├── Icons.css           # Icon definitions
│   ├── Pictograms.css      # Pictogram definitions
│   ├── Flags.css           # Flag definitions
│   └── fonts/
│       ├── ZurichSans/     # ZurichSans font files
│       └── Ogg/            # Ogg font files
└── scss/                   # SCSS source files
```

## Standalone Mode (v0.8.0+)

All assets are embedded directly in the CSS files as data URIs:

  - No external CDN dependency
  - Works offline and in air-gapped environments
  - No CORS issues

**Trade-offs:**

  - Larger initial CSS payload
  - Better caching with your application bundle

## ZDS Ecosystem

This package is part of the [Zurich Design System (ZDS)](https://www.npmjs.com/search?q=%40zurich%20ZDS):

  - [`@zurich/design-tokens`](https://www.npmjs.com/package/@zurich/design-tokens)
  - [`@zurich/css-components`](https://www.npmjs.com/package/@zurich/css-components)
  - [`@zurich/web-components`](https://www.npmjs.com/package/@zurich/web-components)
  - [`@zurich/angular-components`](https://www.npmjs.com/package/@zurich/angular-components)
  - [`@zurich/dev-utils`](https://www.npmjs.com/package/@zurich/dev-utils)

## License

[![NPM License](https://img.shields.io/npm/l/@zurich/design-tokens?style=for-the-badge&logo=cachet&logoColor=fff)](http://opensource.org/licenses/ISC)

___

Made with 💙 by Pablo Pérez Chueca and Traian Constantin Dida
for <a href="https://www.zurich.com/" target="_blank">Zurich Insurance Company</a>.