@dialpad/dialtone 6.32.1 → 6.34.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.
@@ -1,6 +1,6 @@
1
1
  //
2
2
  // DIALTONE
3
- // COMPONENTS: Tabs
3
+ // COMPONENTS: TABS
4
4
  //
5
5
  // These are tab classes for Dialpad's design system Dialtone.
6
6
  // For further documentation of these and other classes,
@@ -29,6 +29,7 @@ body {
29
29
  color: var(--base--text-color);
30
30
  font-size: var(--base--font-size); // [2]
31
31
  font-family: var(--base--font-family);
32
+ font-feature-settings: var(--base--font-feature-settings);
32
33
  line-height: var(--base--line-height);
33
34
  background-color: var(--base--background-color);
34
35
  font-kerning: normal;
@@ -49,6 +49,7 @@
49
49
 
50
50
  base--font-size: var(--fs16);
51
51
  base--font-family: @ff-custom;
52
+ base--font-feature-settings: 'calt' 0;
52
53
  base--line-height: var(--lh-normal);
53
54
  base--corner-radius: 0.25em;
54
55
  }
@@ -60,6 +60,12 @@
60
60
  .d-stack32 { > * + * { margin-top: @su32 !important; } }
61
61
  .d-stack48 { > * + * { margin-top: @su48 !important; } }
62
62
  .d-stack64 { > * + * { margin-top: @su64 !important; } }
63
+ .d-stack72 { > * + * { margin-top: @su72 !important; } }
64
+ .d-stack84 { > * + * { margin-top: @su84 !important; } }
65
+ .d-stack96 { > * + * { margin-top: @su96 !important; } }
66
+ .d-stack102 { > * + * { margin-top: @su102 !important; } }
67
+ .d-stack114 { > * + * { margin-top: @su114 !important; } }
68
+ .d-stack128 { > * + * { margin-top: @su128 !important; } }
63
69
 
64
70
  .d-flow0 { > * + * { margin-left: @su0 !important; } }
65
71
  .d-flow1 { > * + * { margin-left: @su1 !important; } }
@@ -73,6 +79,12 @@
73
79
  .d-flow32 { > * + * { margin-left: @su32 !important; } }
74
80
  .d-flow48 { > * + * { margin-left: @su48 !important; } }
75
81
  .d-flow64 { > * + * { margin-left: @su64 !important; } }
82
+ .d-flow72 { > * + * { margin-left: @su72 !important; } }
83
+ .d-flow84 { > * + * { margin-left: @su84 !important; } }
84
+ .d-flow96 { > * + * { margin-left: @su96 !important; } }
85
+ .d-flow102 { > * + * { margin-left: @su102 !important; } }
86
+ .d-flow114 { > * + * { margin-left: @su114 !important; } }
87
+ .d-flow128 { > * + * { margin-left: @su128 !important; } }
76
88
 
77
89
 
78
90
  // ============================================================================
@@ -86,7 +98,7 @@
86
98
  #d-internals #auto-generate(
87
99
  '.d-m',
88
100
  { .template(@value) { margin: @value !important; } },
89
- @su0 @su1 @su2 @su4 @su6 @su8 @su12 @su16 @su24 @su32 @su48 @su64 auto unset
101
+ @su0 @su1 @su2 @su4 @su6 @su8 @su12 @su16 @su24 @su32 @su48 @su64 @su72 @su84 @su96 @su102 @su114 @su128 auto unset
90
102
  );
91
103
 
92
104
  // $$ TOP MARGIN
@@ -94,7 +106,7 @@
94
106
  #d-internals #auto-generate(
95
107
  '.d-mt',
96
108
  { .template(@value) { margin-top: @value !important; } },
97
- @su0 @su1 @su2 @su4 @su6 @su8 @su12 @su16 @su24 @su32 @su48 @su64 auto unset
109
+ @su0 @su1 @su2 @su4 @su6 @su8 @su12 @su16 @su24 @su32 @su48 @su64 @su72 @su84 @su96 @su102 @su114 @su128 auto unset
98
110
  );
99
111
 
100
112
  // $$ RIGHT MARGIN
@@ -102,7 +114,7 @@
102
114
  #d-internals #auto-generate(
103
115
  '.d-mr',
104
116
  { .template(@value) { margin-right: @value !important; } },
105
- @su0 @su1 @su2 @su4 @su6 @su8 @su12 @su16 @su24 @su32 @su48 @su64 auto unset
117
+ @su0 @su1 @su2 @su4 @su6 @su8 @su12 @su16 @su24 @su32 @su48 @su64 @su72 @su84 @su96 @su102 @su114 @su128 auto unset
106
118
  );
107
119
 
108
120
  // $$ BOTTOM MARGIN
@@ -110,7 +122,7 @@
110
122
  #d-internals #auto-generate(
111
123
  '.d-mb',
112
124
  { .template(@value) { margin-bottom: @value !important; } },
113
- @su0 @su1 @su2 @su4 @su6 @su8 @su12 @su16 @su24 @su32 @su48 @su64 auto unset
125
+ @su0 @su1 @su2 @su4 @su6 @su8 @su12 @su16 @su24 @su32 @su48 @su64 @su72 @su84 @su96 @su102 @su114 @su128 auto unset
114
126
  );
115
127
 
116
128
  // $$ LEFT MARGIN
@@ -118,7 +130,7 @@
118
130
  #d-internals #auto-generate(
119
131
  '.d-ml',
120
132
  { .template(@value) { margin-left: @value !important; } },
121
- @su0 @su1 @su2 @su4 @su6 @su8 @su12 @su16 @su24 @su32 @su48 @su64 auto unset
133
+ @su0 @su1 @su2 @su4 @su6 @su8 @su12 @su16 @su24 @su32 @su48 @su64 @su72 @su84 @su96 @su102 @su114 @su128 auto unset
122
134
  );
123
135
 
124
136
  // $$ X-AXIS (LEFT & RIGHT)
@@ -126,7 +138,7 @@
126
138
  #d-internals #auto-generate(
127
139
  '.d-mx',
128
140
  { .template(@value) { margin-right: @value !important; margin-left: @value !important; } },
129
- @su0 @su1 @su2 @su4 @su6 @su8 @su12 @su16 @su24 @su32 @su48 @su64 auto unset
141
+ @su0 @su1 @su2 @su4 @su6 @su8 @su12 @su16 @su24 @su32 @su48 @su64 @su72 @su84 @su96 @su102 @su114 @su128 auto unset
130
142
  );
131
143
 
132
144
  // $$ Y-AXIS (TOP & BOTTOM)
@@ -134,7 +146,7 @@
134
146
  #d-internals #auto-generate(
135
147
  '.d-my',
136
148
  { .template(@value) { margin-top: @value !important; margin-bottom: @value !important; } },
137
- @su0 @su1 @su2 @su4 @su6 @su8 @su12 @su16 @su24 @su32 @su48 @su64 auto unset
149
+ @su0 @su1 @su2 @su4 @su6 @su8 @su12 @su16 @su24 @su32 @su48 @su64 @su72 @su84 @su96 @su102 @su114 @su128 auto unset
138
150
  );
139
151
 
140
152
 
@@ -146,7 +158,7 @@
146
158
  #d-internals #auto-generate(
147
159
  '.d-m',
148
160
  { .template(@value) { margin: @value !important; } },
149
- -@su1 -@su2 -@su4 -@su6 -@su8 -@su12 -@su16 -@su24 -@su32 -@su48 -@su64
161
+ -@su1 -@su2 -@su4 -@su6 -@su8 -@su12 -@su16 -@su24 -@su32 -@su48 -@su64 -@su72 -@su84 -@su96 -@su102 -@su114 -@su128
150
162
  );
151
163
 
152
164
 
@@ -155,7 +167,7 @@
155
167
  #d-internals #auto-generate(
156
168
  '.d-mt',
157
169
  { .template(@value) { margin-top: @value !important; } },
158
- -@su1 -@su2 -@su4 -@su6 -@su8 -@su12 -@su16 -@su24 -@su32 -@su48 -@su64
170
+ -@su1 -@su2 -@su4 -@su6 -@su8 -@su12 -@su16 -@su24 -@su32 -@su48 -@su64 -@su72 -@su84 -@su96 -@su102 -@su114 -@su128
159
171
  );
160
172
 
161
173
  // $$ RIGHT NEGATIVE MARGIN
@@ -163,7 +175,7 @@
163
175
  #d-internals #auto-generate(
164
176
  '.d-mr',
165
177
  { .template(@value) { margin-right: @value !important; } },
166
- -@su1 -@su2 -@su4 -@su6 -@su8 -@su12 -@su16 -@su24 -@su32 -@su48 -@su64
178
+ -@su1 -@su2 -@su4 -@su6 -@su8 -@su12 -@su16 -@su24 -@su32 -@su48 -@su64 -@su72 -@su84 -@su96 -@su102 -@su114 -@su128
167
179
  );
168
180
 
169
181
  // $$ BOTTOM NEGATIVE MARGIN
@@ -171,7 +183,7 @@
171
183
  #d-internals #auto-generate(
172
184
  '.d-mb',
173
185
  { .template(@value) { margin-bottom: @value !important; } },
174
- -@su1 -@su2 -@su4 -@su6 -@su8 -@su12 -@su16 -@su24 -@su32 -@su48 -@su64
186
+ -@su1 -@su2 -@su4 -@su6 -@su8 -@su12 -@su16 -@su24 -@su32 -@su48 -@su64 -@su72 -@su84 -@su96 -@su102 -@su114 -@su128
175
187
  );
176
188
 
177
189
  // $$ LEFT NEGATIVE MARGIN
@@ -179,7 +191,7 @@
179
191
  #d-internals #auto-generate(
180
192
  '.d-ml',
181
193
  { .template(@value) { margin-left: @value !important; } },
182
- -@su1 -@su2 -@su4 -@su6 -@su8 -@su12 -@su16 -@su24 -@su32 -@su48 -@su64
194
+ -@su1 -@su2 -@su4 -@su6 -@su8 -@su12 -@su16 -@su24 -@su32 -@su48 -@su64 -@su72 -@su84 -@su96 -@su102 -@su114 -@su128
183
195
  );
184
196
 
185
197
  // $$ X-AXIS NEGATIVE MARGIN (LEFT & RIGHT)
@@ -187,7 +199,7 @@
187
199
  #d-internals #auto-generate(
188
200
  '.d-mx',
189
201
  { .template(@value) { margin-right: @value !important; margin-left: @value !important; } },
190
- -@su1 -@su2 -@su4 -@su6 -@su8 -@su12 -@su16 -@su24 -@su32 -@su48 -@su64
202
+ -@su1 -@su2 -@su4 -@su6 -@su8 -@su12 -@su16 -@su24 -@su32 -@su48 -@su64 -@su72 -@su84 -@su96 -@su102 -@su114 -@su128
191
203
  );
192
204
 
193
205
  // $$ Y-AXIS NEGATIVE MARGIN (TOP & BOTTOM)
@@ -195,7 +207,7 @@
195
207
  #d-internals #auto-generate(
196
208
  '.d-my',
197
209
  { .template(@value) { margin-top: @value !important; margin-bottom: @value !important; } },
198
- -@su1 -@su2 -@su4 -@su6 -@su8 -@su12 -@su16 -@su24 -@su32 -@su48 -@su64
210
+ -@su1 -@su2 -@su4 -@su6 -@su8 -@su12 -@su16 -@su24 -@su32 -@su48 -@su64 -@su72 -@su84 -@su96 -@su102 -@su114 -@su128
199
211
  );
200
212
 
201
213
 
@@ -209,7 +221,7 @@
209
221
  #d-internals #auto-generate(
210
222
  '.d-p',
211
223
  { .template(@value) { padding: @value !important; } },
212
- @su0 @su1 @su2 @su4 @su6 @su8 @su12 @su16 @su24 @su32 @su48 @su64 unset
224
+ @su0 @su1 @su2 @su4 @su6 @su8 @su12 @su16 @su24 @su32 @su48 @su64 @su72 @su84 @su96 @su102 @su114 @su128 unset
213
225
  );
214
226
 
215
227
  // ============================================================================
@@ -218,7 +230,7 @@
218
230
  #d-internals #auto-generate(
219
231
  '.d-pt',
220
232
  { .template(@value) { padding-top: @value !important; } },
221
- @su0 @su1 @su2 @su4 @su6 @su8 @su12 @su16 @su24 @su32 @su48 @su64 unset
233
+ @su0 @su1 @su2 @su4 @su6 @su8 @su12 @su16 @su24 @su32 @su48 @su64 @su72 @su84 @su96 @su102 @su114 @su128 unset
222
234
  );
223
235
 
224
236
  // ============================================================================
@@ -227,7 +239,7 @@
227
239
  #d-internals #auto-generate(
228
240
  '.d-pr',
229
241
  { .template(@value) { padding-right: @value !important; } },
230
- @su0 @su1 @su2 @su4 @su6 @su8 @su12 @su16 @su24 @su32 @su48 @su64 unset
242
+ @su0 @su1 @su2 @su4 @su6 @su8 @su12 @su16 @su24 @su32 @su48 @su64 @su72 @su84 @su96 @su102 @su114 @su128 unset
231
243
  );
232
244
 
233
245
  // ============================================================================
@@ -236,7 +248,7 @@
236
248
  #d-internals #auto-generate(
237
249
  '.d-pb',
238
250
  { .template(@value) { padding-bottom: @value !important; } },
239
- @su0 @su1 @su2 @su4 @su6 @su8 @su12 @su16 @su24 @su32 @su48 @su64 unset
251
+ @su0 @su1 @su2 @su4 @su6 @su8 @su12 @su16 @su24 @su32 @su48 @su64 @su72 @su84 @su96 @su102 @su114 @su128 unset
240
252
  );
241
253
 
242
254
  // ============================================================================
@@ -245,7 +257,7 @@
245
257
  #d-internals #auto-generate(
246
258
  '.d-pl',
247
259
  { .template(@value) { padding-left: @value !important; } },
248
- @su0 @su1 @su2 @su4 @su6 @su8 @su12 @su16 @su24 @su32 @su48 @su64 unset
260
+ @su0 @su1 @su2 @su4 @su6 @su8 @su12 @su16 @su24 @su32 @su48 @su64 @su72 @su84 @su96 @su102 @su114 @su128 unset
249
261
  );
250
262
 
251
263
  // ============================================================================
@@ -254,7 +266,7 @@
254
266
  #d-internals #auto-generate(
255
267
  '.d-px',
256
268
  { .template(@value) { padding-right: @value !important; padding-left: @value !important; } },
257
- @su0 @su1 @su2 @su4 @su6 @su8 @su12 @su16 @su24 @su32 @su48 @su64 unset
269
+ @su0 @su1 @su2 @su4 @su6 @su8 @su12 @su16 @su24 @su32 @su48 @su64 @su72 @su84 @su96 @su102 @su114 @su128 unset
258
270
  );
259
271
 
260
272
  // ============================================================================
@@ -263,5 +275,5 @@
263
275
  #d-internals #auto-generate(
264
276
  '.d-py',
265
277
  { .template(@value) { padding-top: @value !important; padding-bottom: @value !important; } },
266
- @su0 @su1 @su2 @su4 @su6 @su8 @su12 @su16 @su24 @su32 @su48 @su64 unset
278
+ @su0 @su1 @su2 @su4 @su6 @su8 @su12 @su16 @su24 @su32 @su48 @su64 @su72 @su84 @su96 @su102 @su114 @su128 unset
267
279
  );
@@ -0,0 +1,7 @@
1
+ <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <path d="M22 9V7H20V9H18V11H20V13H22V11H24V9H22Z" fill="#000"/>
3
+ <path d="M8 12C10.21 12 12 10.21 12 8C12 5.79 10.21 4 8 4C5.79 4 4 5.79 4 8C4 10.21 5.79 12 8 12Z" fill="#000"/>
4
+ <path d="M8 13C5.33 13 0 14.34 0 17V20H16V17C16 14.34 10.67 13 8 13Z" fill="#000"/>
5
+ <path d="M12.51 4.04999C13.43 5.10999 14 6.48999 14 7.99999C14 9.50999 13.43 10.89 12.51 11.95C14.47 11.7 16 10.04 16 7.99999C16 5.95999 14.47 4.29999 12.51 4.04999Z" fill="#000"/>
6
+ <path d="M16.53 13.83C17.42 14.66 18 15.7 18 17V20H20V17C20 15.55 18.41 14.49 16.53 13.83Z" fill="#000"/>
7
+ </svg>
@@ -0,0 +1,7 @@
1
+ <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <path d="M22 9H20H18V11H20H22H24V9H22Z" fill="#000"/>
3
+ <path d="M8 12C10.21 12 12 10.21 12 8C12 5.79 10.21 4 8 4C5.79 4 4 5.79 4 8C4 10.21 5.79 12 8 12Z" fill="#000"/>
4
+ <path d="M8 13C5.33 13 0 14.34 0 17V20H16V17C16 14.34 10.67 13 8 13Z" fill="#000"/>
5
+ <path d="M12.51 4.04999C13.43 5.10999 14 6.48999 14 7.99999C14 9.50999 13.43 10.89 12.51 11.95C14.47 11.7 16 10.04 16 7.99999C16 5.95999 14.47 4.29999 12.51 4.04999Z" fill="#000"/>
6
+ <path d="M16.53 13.83C17.42 14.66 18 15.7 18 17V20H20V17C20 15.55 18.41 14.49 16.53 13.83Z" fill="#000"/>
7
+ </svg>
@@ -0,0 +1,3 @@
1
+ <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <path d="M11.99 2C6.47 2 2 6.48 2 12C2 17.52 6.47 22 11.99 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 11.99 2ZM8.5 8C9.33 8 10 8.67 10 9.5C10 10.33 9.33 11 8.5 11C7.67 11 7 10.33 7 9.5C7 8.67 7.67 8 8.5 8ZM12 18C9.72 18 7.78 16.34 7 14H17C16.22 16.34 14.28 18 12 18ZM15.5 11C14.67 11 14 10.33 14 9.5C14 8.67 14.67 8 15.5 8C16.33 8 17 8.67 17 9.5C17 10.33 16.33 11 15.5 11Z" fill="#000"/>
3
+ </svg>
@@ -0,0 +1,3 @@
1
+ <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <path d="M20 5H4C2.9 5 2.01 5.9 2.01 7L2 17C2 18.1 2.9 19 4 19H20C21.1 19 22 18.1 22 17V7C22 5.9 21.1 5 20 5ZM11 8H13V10H11V8ZM11 11H13V13H11V11ZM8 8H10V10H8V8ZM8 11H10V13H8V11ZM7 13H5V11H7V13ZM7 10H5V8H7V10ZM16 17H8V15H16V17ZM16 13H14V11H16V13ZM16 10H14V8H16V10ZM19 13H17V11H19V13ZM19 10H17V8H19V10Z" fill="#000"/>
3
+ </svg>
@@ -0,0 +1,3 @@
1
+ <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <path d="M13 24C9.74001 24 6.81001 22.01 5.60001 18.98L2.57001 11.37C2.26001 10.58 3.00001 9.79 3.81001 10.05L4.60001 10.31C5.16001 10.49 5.62001 10.92 5.84001 11.47L7.25001 15H8.00001V3.25C8.00001 2.56 8.56001 2 9.25001 2C9.94001 2 10.5 2.56 10.5 3.25V12H11.5V1.25C11.5 0.56 12.06 0 12.75 0C13.44 0 14 0.56 14 1.25V12H15V2.75C15 2.06 15.56 1.5 16.25 1.5C16.94 1.5 17.5 2.06 17.5 2.75V12H18.5V5.75C18.5 5.06 19.06 4.5 19.75 4.5C20.44 4.5 21 5.06 21 5.75V16C21 20.42 17.42 24 13 24Z" fill="#000"/>
3
+ </svg>
@@ -0,0 +1,3 @@
1
+ <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <path d="M19.1111 3.22222L20 2.33333C18.4444 0.777778 16.4444 0 14.4444 0C12.4444 0 10.4444 0.777778 8.88889 2.33333L9.77778 3.22222C11.1111 2 12.7778 1.33333 14.4444 1.33333C16.1111 1.33333 17.7778 2 19.1111 3.22222ZM18.1111 4.11111C17.1111 3.11111 15.7778 2.55556 14.4444 2.55556C13.1111 2.55556 11.7778 3.11111 10.7778 4.11111L11.6667 5C12.4444 4.22222 13.4444 3.88889 14.4444 3.88889C15.4444 3.88889 16.4444 4.22222 17.2222 5L18.1111 4.11111ZM17.7778 11.1111H15.5556V6.66667H13.3333V11.1111H2.22222C1 11.1111 0 12.1111 0 13.3333V17.7778C0 19 1 20 2.22222 20H17.7778C19 20 20 19 20 17.7778V13.3333C20 12.1111 19 11.1111 17.7778 11.1111ZM5.55556 16.6667H3.33333V14.4444H5.55556V16.6667ZM9.44444 16.6667H7.22222V14.4444H9.44444V16.6667ZM13.3333 16.6667H11.1111V14.4444H13.3333V16.6667Z" fill="#0D0C0F"/>
3
+ </svg>