# `@volvo-cars/css`

The CSS library for the Volvo Cars Web Design System. Works with any tech stack — no framework required. At its most basic, it functions like a Design System-compliant browser default stylesheet backed by a novel approach to CSS type safety.

## What's included

- **Design tokens** — CSS custom properties for colours, typography, spacing, and more (`tokens.css`)
- **Utility classes** — A curated, type-safe set of utility classes for layout, spacing, typography, and colours (`styles.css`)
- **Responsive variants** — Breakpoint-prefixed utility classes (`md:`, `lg:`, `xl:`) for responsive design
- **Font face** — Official Volvo Cars typeface declarations (`font-face.css`)
- **Breakpoints** — Shared breakpoint definitions (`breakpoints.css`)
- **JavaScript utilities**:
  - `cssJoin` / `cssMerge` — Type-safe helpers for composing CSS class names
  - `tokens` — Design tokens as typed JavaScript/TypeScript values
  - `media-queries` — Breakpoint media query strings for use in JS
  - `links` — Framework-agnostic `<link>` tag helpers for stylesheet injection (with server-side support)

## Installation

```sh
yarn add @volvo-cars/css
```

## Usage

```ts
import '@volvo-cars/css/styles.css';
import '@volvo-cars/css/tokens.css';
import '@volvo-cars/css/font-face.css';
```

For JavaScript utilities:

```ts
import { cssJoin } from '@volvo-cars/css/utils';
import tokens from '@volvo-cars/css/tokens';
import mediaQueries from '@volvo-cars/css/media-queries';
```

## Documentation

[Read the docs](https://developer.volvocars.com/design-system/web/)