# Dialtone CSS

This is the library for Dialtone's CSS. Any classes or styles used within Dialtone should
be stored here and documented on our site under `apps/dialtone-documentation`.

> **Dialtone v10:** see [DLT-2979](https://dialpad.atlassian.net/browse/DLT-2979) / [#1426](https://github.com/dialpad/dialtone/pull/1426) for the v10 upgrade and its breaking changes. This is a MAJOR version release.

## Installation

### Install it via NPM

```shell
npm install @dialpad/dialtone-css@latest
```

### Import dialtone

- CSS/LESS:

```less
@import "@dialpad/dialtone-css";
```

- Javascript:

```js
import '@dialpad/dialtone-css';
```

#### No-Layers Build

If your project cannot use CSS Cascade Layers, import the no-layers variant. You will likely need to use the no-layers build if you are upgrading from Dialtone <=9, unless you migrate your application CSS to support layers. See the [CSS Cascade Layers migration guide](https://dialtone.dialpad.com/guides/migration/css-cascade-layers/) for more details.

```js
import '@dialpad/dialtone-css/no-layers';
```

### Add dialtone's theme class to the `<body>`

- Light mode

```html
<body class="dialtone-theme-light">...</body>
```

- Dark mode

```html
<body class="dialtone-theme-dark">...</body>
```

This will define the Dialtone CSS variables for your desired theme.
It is required to do this for Dialtone to function.

## Building Dialtone locally

To build Dialtone locally, visit
our [installation instructions](https://dialtone.dialpad.com/guides/getting-started/#build-dialtone-locally).

## Contributing

If you're interested in contributing to Dialtone, please read our [contributing docs](.github/CONTRIBUTING.md) **before
submitting a pull request**.

## Requesting features / reporting bugs

Requesting a feature or reporting a bug? Please do so at the below links:

- [Request Feature](https://dialpad.atlassian.net/secure/CreateIssue.jspa?issuetype=10975&pid=12508)
- [Report Bug](https://dialpad.atlassian.net/secure/CreateIssue.jspa?issuetype=1&pid=12508)

Please also feel free to contact us via the #dialtone Dialpad channel with any questions.