@dialpad/dialtone 6.32.0 → 6.33.3

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
  }
@@ -14,6 +14,9 @@
14
14
  #d-internal-config {
15
15
  // Do we want to generate font-face CSS?
16
16
  @generate-font-face: true;
17
+
18
+ // Path of the fonts that Dialtone provides
19
+ @define-font-path: '../../fonts/';
17
20
  }
18
21
 
19
22
  // ============================================================================
@@ -378,15 +381,12 @@
378
381
  #font-face(@type, @name, @style: normal) {
379
382
  #d-internal-config();
380
383
 
381
- // Path of the fonts that Dialtone provides
382
- @define-font-path: '../../fonts/';
383
-
384
384
  if((@generate-font-face = true), each(@type, {
385
385
  @font-face {
386
386
  font-style: @style;
387
387
  font-weight: @key;
388
388
  font-family: @name;
389
- src: url("./@{define-font-path}@{value}.woff2") format("woff2");
389
+ src: url("@{define-font-path}@{value}.woff2") format("woff2");
390
390
  };
391
391
  }));
392
392
  }
@@ -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,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>