@dialpad/dialtone 8.13.7 → 8.15.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.
Files changed (7) hide show
  1. package/README.md +24 -5
  2. package/lib/build/js/dialtone_migration_helper/configs/size-and-space.mjs +36 -36
  3. package/lib/build/less/components/emoji-picker.less +1 -1
  4. package/lib/dist/css/dialtone.css +1207 -1207
  5. package/lib/dist/css/dialtone.min.css +1 -1
  6. package/lib/dist/js/dialtone_migration_helper/configs/size-and-space.mjs +36 -36
  7. 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 via NPM
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
- Once installed, add the following line in your CSS/LESS file:
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
- @import "node_modules/@dialpad/dialtone/lib/dist/css/dialtone.css";
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).
package/lib/build/js/dialtone_migration_helper/configs/size-and-space.mjs CHANGED
@@ -73,43 +73,43 @@ export default {
73
73
  { from: /@icon32\b|var\(--icon32\)/g, to: 'var(--dt-icon-size-600)' },
74
74
  { from: /@icon48\b|var\(--icon48\)/g, to: 'var(--dt-size-650)' },
75
75
  { from: /@icon64\b|var\(--icon64\)/g, to: 'var(--dt-size-700)' },
76
+ // Variable prefixed with negative, must go before positive spacing
77
+ { from: /-@su1\b|-var\(--su1\)|[^-]var\(--sun1\)/g, to: 'var(--dt-space-100-negative)' },
78
+ { from: /-@su2\b|-var\(--su2\)|[^-]var\(--sun2\)/g, to: 'var(--dt-space-200-negative)' },
79
+ { from: /-@su4\b|-var\(--su4\)|[^-]var\(--sun4\)/g, to: 'var(--dt-space-300-negative)' },
80
+ { from: /-@su6\b|-var\(--su6\)|[^-]var\(--sun6\)/g, to: 'var(--dt-space-350-negative)' },
81
+ { from: /-@su8\b|-var\(--su8\)|[^-]var\(--sun8\)/g, to: 'var(--dt-space-400-negative)' },
82
+ { from: /-@su12\b|-var\(--su12\)|[^-]var\(--sun12\)/g, to: 'var(--dt-space-450-negative)' },
83
+ { from: /-@su16\b|-var\(--su16\)|[^-]var\(--sun16\)/g, to: 'var(--dt-space-500-negative)' },
84
+ { from: /-@su24\b|-var\(--su24\)|[^-]var\(--sun24\)/g, to: 'var(--dt-space-550-negative)' },
85
+ { from: /-@su32\b|-var\(--su32\)|[^-]var\(--sun32\)/g, to: 'var(--dt-space-600-negative)' },
86
+ { from: /-@su48\b|-var\(--su48\)|[^-]var\(--sun48\)/g, to: 'var(--dt-space-650-negative)' },
87
+ { from: /-@su64\b|-var\(--su64\)|[^-]var\(--sun64\)/g, to: 'var(--dt-space-700-negative)' },
88
+ { from: /-@su72\b|-var\(--su72\)|[^-]var\(--sun72\)/g, to: 'var(--dt-space-720-negative)' },
89
+ { from: /-@su84\b|-var\(--su84\)|[^-]var\(--sun84\)/g, to: 'var(--dt-space-730-negative)' },
90
+ { from: /-@su96\b|-var\(--su96\)|[^-]var\(--sun96\)/g, to: 'var(--dt-space-750-negative)' },
91
+ { from: /-@su102\b|-var\(--su102\)|[^-]var\(--sun102\)/g, to: 'var(--dt-space-760-negative)' },
92
+ { from: /-@su114\b|-var\(--su114\)|[^-]var\(--sun114\)/g, to: 'var(--dt-space-775-negative)' },
93
+ { from: /-@su128\b|-var\(--su128\)|[^-]var\(--sun128\)/g, to: 'var(--dt-space-800-negative)' },
76
94
  // Positive spacing
77
- { from: /@su0\b|var\(--su0\)/g, to: 'var(--dt-size-0)' },
78
- { from: /@su1\b|var\(--su1\)/g, to: 'var(--dt-size-100)' },
79
- { from: /@su2\b|var\(--su2\)/g, to: 'var(--dt-size-200)' },
80
- { from: /@su4\b|var\(--su4\)/g, to: 'var(--dt-size-300)' },
81
- { from: /@su6\b|var\(--su6\)/g, to: 'var(--dt-size-350)' },
82
- { from: /@su8\b|var\(--su8\)/g, to: 'var(--dt-size-400)' },
83
- { from: /@su12\b|var\(--su12\)/g, to: 'var(--dt-size-450)' },
84
- { from: /@su16\b|var\(--su16\)/g, to: 'var(--dt-size-500)' },
85
- { from: /@su24\b|var\(--su24\)/g, to: 'var(--dt-size-550)' },
86
- { from: /@su32\b|var\(--su32\)/g, to: 'var(--dt-size-600)' },
87
- { from: /@su48\b|var\(--su48\)/g, to: 'var(--dt-size-650)' },
88
- { from: /@su64\b|var\(--su64\)/g, to: 'var(--dt-size-700)' },
89
- { from: /@su72\b|var\(--su72\)/g, to: 'var(--dt-size-720)' },
90
- { from: /@su84\b|var\(--su84\)/g, to: 'var(--dt-size-730)' },
91
- { from: /@su96\b|var\(--su96\)/g, to: 'var(--dt-size-750)' },
92
- { from: /@su102\b|var\(--su102\)/g, to: 'var(--dt-size-760)' },
93
- { from: /@su114\b|var\(--su114\)/g, to: 'var(--dt-size-775)' },
94
- { from: /@su128\b|var\(--su128\)/g, to: 'var(--dt-size-800)' },
95
- // Negative spacing
96
- { from: /var\(--sun1\)/g, to: 'var(--dt-size-100-negative)' },
97
- { from: /var\(--sun2\)/g, to: 'var(--dt-size-200-negative)' },
98
- { from: /var\(--sun4\)/g, to: 'var(--dt-size-300-negative)' },
99
- { from: /var\(--sun6\)/g, to: 'var(--dt-size-350-negative)' },
100
- { from: /var\(--sun8\)/g, to: 'var(--dt-size-400-negative)' },
101
- { from: /var\(--sun12\)/g, to: 'var(--dt-size-450-negative)' },
102
- { from: /var\(--sun16\)/g, to: 'var(--dt-size-500-negative)' },
103
- { from: /var\(--sun24\)/g, to: 'var(--dt-size-550-negative)' },
104
- { from: /var\(--sun32\)/g, to: 'var(--dt-size-600-negative)' },
105
- { from: /var\(--sun48\)/g, to: 'var(--dt-size-650-negative)' },
106
- { from: /var\(--sun64\)/g, to: 'var(--dt-size-700-negative)' },
107
- { from: /var\(--sun72\)/g, to: 'var(--dt-size-720-negative)' },
108
- { from: /var\(--sun84\)/g, to: 'var(--dt-size-730-negative)' },
109
- { from: /var\(--sun96\)/g, to: 'var(--dt-size-750-negative)' },
110
- { from: /var\(--sun102\)/g, to: 'var(--dt-size-760-negative)' },
111
- { from: /var\(--sun114\)/g, to: 'var(--dt-size-775-negative)' },
112
- { from: /var\(--sun128\)/g, to: 'var(--dt-size-800-negative)' },
95
+ { from: /@su0\b|var\(--su0\)/g, to: 'var(--dt-space-0)' },
96
+ { from: /@su1\b|var\(--su1\)/g, to: 'var(--dt-space-100)' },
97
+ { from: /@su2\b|var\(--su2\)/g, to: 'var(--dt-space-200)' },
98
+ { from: /@su4\b|var\(--su4\)/g, to: 'var(--dt-space-300)' },
99
+ { from: /@su6\b|var\(--su6\)/g, to: 'var(--dt-space-350)' },
100
+ { from: /@su8\b|var\(--su8\)/g, to: 'var(--dt-space-400)' },
101
+ { from: /@su12\b|var\(--su12\)/g, to: 'var(--dt-space-450)' },
102
+ { from: /@su16\b|var\(--su16\)/g, to: 'var(--dt-space-500)' },
103
+ { from: /@su24\b|var\(--su24\)/g, to: 'var(--dt-space-550)' },
104
+ { from: /@su32\b|var\(--su32\)/g, to: 'var(--dt-space-600)' },
105
+ { from: /@su48\b|var\(--su48\)/g, to: 'var(--dt-space-650)' },
106
+ { from: /@su64\b|var\(--su64\)/g, to: 'var(--dt-space-700)' },
107
+ { from: /@su72\b|var\(--su72\)/g, to: 'var(--dt-space-720)' },
108
+ { from: /@su84\b|var\(--su84\)/g, to: 'var(--dt-space-730)' },
109
+ { from: /@su96\b|var\(--su96\)/g, to: 'var(--dt-space-750)' },
110
+ { from: /@su102\b|var\(--su102\)/g, to: 'var(--dt-space-760)' },
111
+ { from: /@su114\b|var\(--su114\)/g, to: 'var(--dt-space-775)' },
112
+ { from: /@su128\b|var\(--su128\)/g, to: 'var(--dt-space-800)' },
113
113
  // Border radius
114
114
  { from: /@br-(pill|circle)|var\(--br-(pill|circle)\)/g, to: 'var(--dt-size-radius-$1$2)' },
115
115
  { from: /@br0|var\(--br0\)/g, to: 'var(--dt-size-radius-0)' },
package/lib/build/less/components/emoji-picker.less CHANGED
@@ -136,7 +136,7 @@
136
136
  top: 0;
137
137
  width: 100%;
138
138
  padding-top: var(--dt-space-525);
139
- background: var(--dt-color-surface-secondary);
139
+ background: var(--dt-color-surface-primary);
140
140
  }
141
141
 
142
142
  &__list {