# @zurich/dev-utils

<p align="center">
  <a href="https://npmjs.com/package/@zurich/dev-utils">
    <img
      src="https://img.shields.io/npm/v/@zurich/dev-utils?style=for-the-badge&color=yellow&label=npm%20version&logo=npm"
      alt="npm package"
    >
  </a>
  &nbsp;
  &nbsp;
  <a href="https://npmjs.com/package/@zurich/dev-utils">
    <img
      src="https://img.shields.io/npm/dm/@zurich/dev-utils?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"/>
  <img src="https://img.shields.io/badge/JavaScript-F7DF1E?style=for-the-badge&logo=javascript&logoColor=000" alt="JS"/>
  <a href="https://www.typescriptlang.org/" target="_blank">
    <img src="https://img.shields.io/badge/TypeScript-3178C6?style=for-the-badge&logo=typescript&logoColor=fff" alt="TS"/>
  </a>
  <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/dev-utils` provides development utilities, SCSS mixins, helper functions, and tooling
for building applications with the Zurich Design System (ZDS).

### Features

  - **SCSS Mixins**: Responsive breakpoints, typography, spacing helpers
  - **TypeScript utilities**: Helper functions for working with ZDS components
  - **Component data**: Lists of icons, pictograms, flags, and component metadata
  - **CLI tools**: Development utilities for ZDS projects

## Installation

```bash
npm install @zurich/dev-utils
```

## 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/dev-utils?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>.