@dialpad/dialtone 8.13.7 → 8.14.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +24 -5
- package/lib/build/less/components/emoji-picker.less +1 -1
- package/lib/dist/css/dialtone.css +1193 -1193
- package/lib/dist/css/dialtone.min.css +1 -1
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -2,19 +2,38 @@
|
|
|
2
2
|
|
|
3
3
|
This is the home for Dialtone, Dialpad's design system. It includes the resources needed to create consistent, predictable interfaces that conform to Dialpad’s design principles, language, styles, and best practices.
|
|
4
4
|
|
|
5
|
-
## Install Dialtone
|
|
6
|
-
|
|
7
|
-
To add Dialtone into your project, you can install it via NPM:
|
|
5
|
+
## Install Dialtone
|
|
8
6
|
|
|
7
|
+
### Install it via NPM:
|
|
9
8
|
```
|
|
10
9
|
npm install @dialpad/dialtone
|
|
11
10
|
```
|
|
12
11
|
|
|
13
|
-
|
|
12
|
+
### Import dialtone:
|
|
13
|
+
- CSS/LESS:
|
|
14
|
+
```less
|
|
15
|
+
@import "node_modules/@dialpad/dialtone/lib/dist/css/dialtone.min.css";
|
|
16
|
+
```
|
|
17
|
+
- Javascript:
|
|
18
|
+
```js
|
|
19
|
+
import '@dialpad/dialtone/lib/dist/css/dialtone.min.css';
|
|
14
20
|
```
|
|
15
|
-
|
|
21
|
+
|
|
22
|
+
### Add dialtone's theme class to the `<body>`
|
|
23
|
+
|
|
24
|
+
- Light mode
|
|
25
|
+
```html
|
|
26
|
+
<body class="dialtone-theme-light">...</body>
|
|
16
27
|
```
|
|
17
28
|
|
|
29
|
+
- Dark mode
|
|
30
|
+
```html
|
|
31
|
+
<body class="dialtone-theme-dark">...</body>
|
|
32
|
+
```
|
|
33
|
+
|
|
34
|
+
This will define the Dialtone CSS variables for your desired theme.
|
|
35
|
+
It is required to do this for Dialtone to function.
|
|
36
|
+
|
|
18
37
|
## Building Dialtone locally
|
|
19
38
|
|
|
20
39
|
To build Dialtone locally, visit our [installation instructions](https://dialpad.design/guides/getting-started/#build-dialtone-locally).
|