@dialpad/dialtone 7.28.0 → 7.30.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/lib/build/less/components/datepicker.less +45 -17
  2. package/lib/build/less/components/emoji-picker.less +121 -47
  3. package/lib/build/less/components/item-layout.less +52 -0
  4. package/lib/build/less/dialtone.less +1 -0
  5. package/lib/dist/css/dialtone.css +96 -64
  6. package/lib/dist/css/dialtone.min.css +1 -1
  7. package/package.json +1 -1
package/lib/build/less/components/datepicker.less CHANGED
@@ -11,38 +11,52 @@
11
11
  // $ BASE STYLE
12
12
  // ----------------------------------------------------------------------------
13
13
  .d-datepicker {
14
- width: calc(var(--dt-size-925) - var(--dt-size-550));
15
- padding: var(--dt-size-500);
14
+ width: calc(var(--size-925) - var(--su24));
15
+ padding: var(--su16);
16
+ //dialtone8 ------------------------------
17
+ //width: calc(var(--dt-size-925) - var(--dt-size-550));
18
+ //padding: var(--dt-size-500);
16
19
 
17
20
  p {
18
21
  display: flex;
19
22
  margin: 0;
20
23
  font-weight: 400;
21
- font-size: var(--dt-size-450);
24
+ font-size: var(--su12);
22
25
  font-family: inherit;
23
26
  font-style: normal;
24
27
  text-transform: uppercase;
28
+ //dialtone8 ------------------------------
29
+ //font-size: var(--dt-size-450);
25
30
  }
26
31
 
27
32
  &--body {
28
- padding: 0 var(--dt-size-400);
33
+ padding: 0 var(--su8);
34
+ //dialtone8 ------------------------------
35
+ //padding: 0 var(--dt-size-400);
29
36
  }
30
37
 
31
38
  &__week-day {
32
39
  display: flex;
33
40
  justify-content: space-between;
34
- margin-bottom: var(--dt-size-500);
41
+ margin-bottom: var(--su16);
42
+ //dialtone8 ------------------------------
43
+ //margin-bottom: var(--dt-size-500);
35
44
 
36
45
  > div {
37
46
  display: flex;
38
47
  align-items: center;
39
48
  justify-content: center;
40
- width: var(--dt-size-550);
41
- height: var(--dt-size-550);
49
+ width: var(--su24);
50
+ height: var(--su24);
51
+ //dialtone8 ------------------------------
52
+ //width: var(--dt-size-550);
53
+ //height: var(--dt-size-550);
42
54
 
43
55
  p {
44
56
  margin: 0;
45
- color: var(--dt-color-surface-strong);
57
+ color: var(--black-600);
58
+ //dialtone8 ------------------------------
59
+ //color: var(--dt-color-surface-strong);
46
60
  }
47
61
  }
48
62
  }
@@ -51,26 +65,38 @@
51
65
  display: flex;
52
66
  align-items: center;
53
67
  justify-content: space-between;
54
- margin-bottom: var(--dt-size-400);
68
+ margin-bottom: var(--size8);
69
+ //dialtone8 ------------------------------
70
+ //margin-bottom: var(--dt-size-400);
55
71
  }
56
72
 
57
73
  &__day {
58
- width: var(--dt-size-550);
59
- height: var(--dt-size-550);
74
+ width: var(--size24);
75
+ height: var(--size24);
60
76
  padding: 0;
61
- font-size: var(--dt-size-450);
77
+ font-size: var(--size12);
62
78
  background-color: transparent;
63
79
  border: none;
64
- border-radius: calc(var(--dt-size-650) + var(--dt-size-200));
80
+ border-radius: calc(var(--size48) + var(--size2));
65
81
  cursor: pointer;
82
+ //dialtone8 ------------------------------
83
+ //width: var(--dt-size-550);
84
+ //height: var(--dt-size-550);
85
+ //font-size: var(--dt-size-450);
86
+ //border-radius: calc(var(--dt-size-650) + var(--dt-size-200));
66
87
 
67
88
  &--disabled {
68
- color: var(--dt-color-surface-bold);
89
+ color: var(--black-300);
90
+ //dialtone8 ------------------------------
91
+ //color: var(--dt-color-surface-bold);
69
92
  }
70
93
 
71
94
  &--selected {
72
- color: var(--dt-color-foreground-primary);
73
- background: var(--dt-color-border-brand);
95
+ color: #fff;
96
+ background: #7C52FF;
97
+ //dialtone8 ------------------------------
98
+ //color: var(--dt-color-foreground-primary);
99
+ //background: var(--dt-color-border-brand);
74
100
  }
75
101
 
76
102
  &:focus {
@@ -84,7 +110,9 @@
84
110
  justify-content: space-between;
85
111
  width: 100%;
86
112
  height: 100%;
87
- margin-bottom: var(--dt-size-525);
113
+ margin-bottom: var(--size20);
114
+ //dialtone8 ------------------------------
115
+ //margin-bottom: var(--dt-size-525);
88
116
 
89
117
  > div {
90
118
  display: inline-flex;
package/lib/build/less/components/emoji-picker.less CHANGED
@@ -14,30 +14,41 @@
14
14
  flex-direction: column;
15
15
  // fixed with to achieve accessibility in keyboard (372px)
16
16
  // with this width we have 9 emoji per row
17
- width: calc(var(--dt-size-925) + var(--dt-size-600) + var(--dt-size-400));
17
+ width: calc(var(--size332) + var(--size32) + var(--size8));
18
18
  height: 100%;
19
- background-color: var(--dt-color-surface-primary);
20
- border-radius: var(--dt-size-300);
19
+ background-color: #FFF;
20
+ border-radius: var(--size4);
21
+ //dialtone8 ------------------------------
22
+ //width: calc(var(--dt-size-925) + var(--dt-size-600) + var(--dt-size-400));
23
+ //background-color: var(--dt-color-surface-primary);
24
+ //border-radius: var(--dt-size-300);
21
25
 
22
26
  &--header {
23
27
  position: relative;
24
- padding: var(--dt-space-300) var(--dt-space-300) 0 var(--dt-space-400);
28
+ padding: var(--su4) var(--su4) 0 var(--su8);
29
+ //dialtone8 ------------------------------
30
+ //padding: var(--dt-space-300) var(--dt-space-300) 0 var(--dt-space-400);
25
31
 
26
32
  &::after {
27
33
  position: absolute;
28
34
  right: 0;
29
35
  bottom: 0;
30
36
  left: 0;
31
- height: var(--dt-size-100);
37
+ height: var(--size1);
32
38
  background-color: var(--bgc-moderate) !important;
39
+ //dialtone8 ------------------------------
40
+ //height: var(--dt-size-100);
33
41
  content: '';
34
42
  }
35
43
  }
36
44
 
37
45
  &__alignment {
38
46
  width: auto;
39
- max-width: calc(var(--dt-size-925) + var(--dt-size-400));
40
- margin: 0 var(--dt-size-500);
47
+ max-width: calc(var(--size332) + var(--size8));
48
+ margin: 0 var(--size16);
49
+ //dialtone8 ------------------------------
50
+ //max-width: calc(var(--dt-size-925) + var(--dt-size-400));
51
+ //margin: 0 var(--dt-size-500);
41
52
  }
42
53
 
43
54
  &--footer {
@@ -45,25 +56,38 @@
45
56
  display: flex;
46
57
  align-items: center;
47
58
  justify-content: space-between;
48
- height: calc(var(--dt-size-650) + var(--dt-size-400) + var(--dt-size-200));
49
- padding: 0 var(--dt-size-500);
50
- background: var(--dt-color-surface-secondary);
51
- border-top: var(--dt-size-100) solid var(--bc-subtle);
59
+ height: calc(var(--size48) + var(--size8) + var(--size2));
60
+ padding: 0 var(--size16);
61
+ background: #F9F9F9;
62
+ border-top: var(--size1) solid var(--bc-subtle);
63
+ //dialtone8 ------------------------------
64
+ //height: calc(var(--dt-size-650) + var(--dt-size-400) + var(--dt-size-200));
65
+ //padding: 0 var(--dt-size-500);
66
+ //background: var(--dt-color-surface-secondary);
67
+ //border-top: var(--dt-size-100) solid var(--bc-subtle);
52
68
  }
53
69
 
54
70
  &__tabset-list {
55
- gap: var(--dt-size-300);
71
+ gap: var(--size4);
72
+ //dialtone8 ------------------------------
73
+ //gap: var(--dt-size-300);
56
74
 
57
75
  &::after {
58
- background-color: var(--dt-color-surface-moderate) !important;
76
+ background-color: var(--black-200) !important;
77
+ //dialtone8 ------------------------------
78
+ //background-color: var(--dt-color-surface-moderate) !important;
59
79
  }
60
80
 
61
81
  button {
62
- padding: var(--dt-size-400);
82
+ padding: var(--space-400);
83
+ //dialtone8 ------------------------------
84
+ //padding: var(--dt-size-400);
63
85
 
64
86
  &.d-tab--selected {
65
87
  &::after {
66
- height: var(--dt-size-200);
88
+ height: var(--size-200);
89
+ //dialtone8 ------------------------------
90
+ //height: var(--dt-size-200);
67
91
  }
68
92
  }
69
93
  }
@@ -72,31 +96,45 @@
72
96
  &__skin-list {
73
97
  display: inline-flex;
74
98
  flex-direction: row;
75
- gap: var(--dt-size-300);
99
+ gap: var(--size4);
76
100
  align-items: flex-start;
77
- padding: var(--dt-size-300);
101
+ padding: var(--size4);
78
102
  background: rgba(0, 0, 0, 0.05);
79
- border-radius: calc(var(--dt-size-600) + var(--dt-size-400));
103
+ border-radius: calc(var(--size32) + var(--size8));
104
+ //dialtone8 ------------------------------
105
+ //border-radius: calc(var(--dt-size-600) + var(--dt-size-400));
106
+ //gap: var(--dt-size-300);
107
+ //padding: var(--dt-size-300);
80
108
 
81
109
  button {
82
- width: calc(var(--dt-size-600) + var(--dt-size-200));
83
- height: calc(var(--dt-size-600) + var(--dt-size-200));
110
+ width: var(--size32);
111
+ height: var(--size32);
84
112
  margin: 0;
85
113
  padding: 0;
86
114
  background: none;
87
115
  border: none;
88
- border-radius: calc(var(--dt-size-550) + var(--dt-size-300));
116
+ border-radius: calc(var(--size24) + var(--size4));
89
117
  outline: none;
90
118
  cursor: pointer;
119
+ //dialtone8 ------------------------------
120
+ //width: calc(var(--dt-size-600) + var(--dt-size-200));
121
+ //height: calc(var(--dt-size-600) + var(--dt-size-200));
122
+ //border-radius: calc(var(--dt-size-550) + var(--dt-size-300));
123
+
91
124
 
92
125
  &:hover {
93
126
  background: rgba(0, 0, 0, 0.1);
94
- border-radius: calc(var(--dt-size-550) + var(--dt-size-300));
127
+ border-radius: calc(var(--size24) + var(--size4));
128
+ //dialtone8 ------------------------------
129
+ //border-radius: calc(var(--dt-size-550) + var(--dt-size-300));
95
130
  }
96
131
 
97
132
  &.selected {
98
- border: var(--dt-size-100) solid rgba(0, 0, 0, 0.25);
99
- border-radius: calc(var(--dt-size-550) + var(--dt-size-300));
133
+ border: var(--size1) solid rgba(0, 0, 0, 0.25);
134
+ border-radius: calc(var(--size24) + var(--size4));
135
+ //dialtone8 ------------------------------
136
+ //border: var(--dt-size-100) solid rgba(0, 0, 0, 0.25);
137
+ //border-radius: calc(var(--dt-size-550) + var(--dt-size-300));
100
138
  }
101
139
  }
102
140
  }
@@ -104,30 +142,42 @@
104
142
  &__skin-selected {
105
143
  button {
106
144
  display: inline-block;
107
- width: var(--dt-size-625);
108
- height: var(--dt-size-625);
145
+ width: var(--size42);
146
+ height: var(--size42);
109
147
  margin: 0;
110
- padding: calc(var(--dt-size-350) + var(--dt-size-100));
148
+ padding: calc(var(--size6) + var(--size1));
111
149
  background: rgba(0, 0, 0, 0.1);
112
150
  border: none;
113
- border-radius: calc(var(--dt-size-550) + var(--dt-size-300));
151
+ border-radius: calc(var(--size24) + var(--size4));
114
152
  outline: none;
115
153
  cursor: pointer;
154
+ //dialtone8 ------------------------------
155
+ //width: var(--dt-size-625);
156
+ //height: var(--dt-size-625);
157
+ //padding: calc(var(--dt-size-350) + var(--dt-size-100));
158
+ //border-radius: calc(var(--dt-size-550) + var(--dt-size-300));
116
159
 
117
160
  &:hover {
118
- background: var(--dt-color-surface-bold);
161
+ background: #D2D2D2;
162
+ //dialtone8 ------------------------------
163
+ //background: var(--dt-color-surface-bold);
119
164
  }
120
165
  }
121
166
  }
122
167
 
123
168
  &__selector {
124
- min-height: calc(var(--dt-size-905) + var(--dt-size-600) + var(--dt-size-100));
169
+ min-height: calc(var(--size264) + var(--size32) + var(--size1));
170
+ //dialtone8 ------------------------------
171
+ //min-height: calc(var(--dt-size-905) + var(--dt-size-600) + var(--dt-size-100));
125
172
 
126
173
  p {
127
- margin-bottom: var(--dt-size-300);
174
+ margin-bottom: var(--size4);
128
175
  font-weight: 700;
129
- font-size: var(--dt-size-450);
176
+ font-size: var(--size12);
130
177
  letter-spacing: -0.01em;
178
+ //dialtone8 ------------------------------
179
+ //margin-bottom: var(--dt-size-300);
180
+ //font-size: var(--dt-size-450);
131
181
  }
132
182
  }
133
183
 
@@ -135,44 +185,59 @@
135
185
  position: sticky;
136
186
  top: 0;
137
187
  width: 100%;
138
- padding-top: var(--dt-size-525);
139
- background: var(--dt-color-surface-secondary);
188
+ padding-top: var(--size20);
189
+ background: rgba(255, 255, 255, 0.9);
190
+ //dialtone8 ------------------------------
191
+ //padding-top: var(--dt-size-525);
192
+ //background: var(--dt-color-surface-secondary);
140
193
  }
141
194
 
142
195
  &__list {
143
196
  position: relative;
144
197
  height: 100%;
145
- max-height: calc(var(--dt-size-905) + var(--dt-size-600) + var(--dt-size-100));
146
- padding-bottom: calc(var(--dt-size-300) + var(--dt-size-100));
198
+ max-height: calc(var(--size264) + var(--size32) + var(--size1));
199
+ padding-bottom: calc(var(--size4) + var(--size1));
147
200
  overflow-x: hidden;
148
201
  overflow-y: auto;
202
+ //dialtone8 ------------------------------
203
+ //max-height: calc(var(--dt-size-905) + var(--dt-size-600) + var(--dt-size-100));
204
+ //padding-bottom: calc(var(--dt-size-300) + var(--dt-size-100));
149
205
 
150
206
  div:not(:first-child) {
151
207
  p {
152
- margin-top: calc(var(--dt-size-525) + var(--dt-size-200));
208
+ margin-top: calc(var(--size20) + var(--size2));
209
+ //dialtone8 ------------------------------
210
+ //margin-top: calc(var(--dt-size-525) + var(--dt-size-200));
153
211
  }
154
212
  }
155
213
  }
156
214
 
157
215
  &__search-label {
158
- margin-top: calc(var(--dt-size-525));
216
+ margin-top: calc(var(--size20));
217
+ //dialtone8 ------------------------------
218
+ //margin-top: calc(var(--dt-size-525));
159
219
  }
160
220
 
161
221
  &__tab {
162
222
  display: flex;
163
223
  flex-wrap: wrap;
164
- gap: var(--dt-size-200);
165
- width: calc(100% + calc(var(--dt-size-500) - var(--dt-size-100)));
166
- max-width: calc(var(--dt-size-925) + var(--dt-size-400));
224
+ gap: var(--size2);
225
+ width: calc(100% + calc(var(--size16) - var(--size1)));
226
+ max-width: calc(var(--size332) + var(--size8));
167
227
  // We use this margin left to align the emoji list with the tabset label
168
- margin-left: var(--dt-size-350-negative);
228
+ margin-left: var(--sun6);
229
+ //dialtone8 ------------------------------
230
+ //width: calc(100% + calc(var(--dt-size-500) - var(--dt-size-100)));
231
+ //max-width: calc(var(--dt-size-925) + var(--dt-size-400));
232
+ //gap: var(--dt-size-200);
233
+ //margin-left: var(--dt-size-350-negative);
169
234
 
170
235
  button {
171
236
  display: flex;
172
237
  align-items: center;
173
238
  justify-content: center;
174
- width: calc(var(--dt-size-600) + var(--dt-size-300));
175
- height: calc(var(--dt-size-600) + var(--dt-size-300));
239
+ width: calc(var(--size32) + var(--size4));
240
+ height: calc(var(--size32) + var(--size4));
176
241
  margin: 0;
177
242
  padding: 0;
178
243
  background: none;
@@ -180,6 +245,9 @@
180
245
  border-radius: 50%;
181
246
  outline: none;
182
247
  cursor: pointer;
248
+ //dialtone8 ------------------------------
249
+ //width: calc(var(--dt-size-600) + var(--dt-size-300));
250
+ //height: calc(var(--dt-size-600) + var(--dt-size-300));
183
251
 
184
252
  &:hover,
185
253
  &:active {
@@ -200,7 +268,10 @@
200
268
  position: relative;
201
269
  z-index: 1;
202
270
  margin: var(--su16) var(--su24) 0 var(--su16);
203
- background-color: var(--dt-color-surface-primary);
271
+ background-color: #FFF;
272
+ //dialtone8 ------------------------------
273
+ //margin: var(--su16) var(--su24) 0 var(--su16);
274
+ //background-color: var(--dt-color-surface-primary);
204
275
  }
205
276
 
206
277
  &__search-button {
@@ -215,9 +286,12 @@
215
286
 
216
287
  &__data {
217
288
  display: flex;
218
- gap: var(--dt-size-100);
289
+ gap: var(--size1);
219
290
  align-items: center;
220
291
  width: 100%;
221
- max-width: calc(var(--dt-size-905) + var(--dt-size-550) + var(--dt-size-200));
292
+ max-width: calc(var(--size264) + var(--size24) + var(--size2));
293
+ //dialtone8 ------------------------------
294
+ //max-width: calc(var(--dt-size-905) + var(--dt-size-550) + var(--dt-size-200));
295
+ //gap: var(--dt-size-100);
222
296
  }
223
297
  }
package/lib/build/less/components/item-layout.less ADDED
@@ -0,0 +1,52 @@
1
+ //
2
+ // DIALTONE
3
+ // COMPONENTS: ITEM LAYOUT
4
+ //
5
+ // Custom layout to enable developer to use list-item like stack.
6
+ // It is used as base for `dt-list-item` component
7
+ // visit https://dialpad.design/components/item_layout
8
+ //
9
+ // TABLE OF CONTENTS
10
+ // • BASE STYLE
11
+ //
12
+ // ============================================================================
13
+ // $ BASE STYLE
14
+ // ----------------------------------------------------------------------------
15
+ .dt-item-layout {
16
+ min-height: calc(var(--size-550) + var(--size-300));
17
+ padding: var(--space-300) var(--space-400);
18
+ font-size: var(--fs-200);
19
+ line-height: var(--lh-300);
20
+
21
+ &--content {
22
+ flex-grow: 1;
23
+ }
24
+
25
+ &--subtitle {
26
+ color: var(--fc-tertiary);
27
+ font-size: var(--fs-100);
28
+ }
29
+
30
+ &,
31
+ &--right,
32
+ &--left {
33
+ display: flex;
34
+ align-items: center;
35
+ min-width: var(--size-600);
36
+ }
37
+
38
+ &--right {
39
+ align-self: flex-start;
40
+ padding-left: var(--space-400);
41
+ }
42
+
43
+ &--left {
44
+ align-self: flex-start;
45
+ justify-content: flex-end;
46
+ padding-right: var(--space-400);
47
+ }
48
+
49
+ &--bottom {
50
+ margin-top: var(--space-200);
51
+ }
52
+ }
package/lib/build/less/dialtone.less CHANGED
@@ -39,6 +39,7 @@
39
39
  @import 'components/icon';
40
40
  @import 'components/root-layout';
41
41
  @import 'components/stack';
42
+ @import 'components/item-layout';
42
43
 
43
44
  // -- CONFIG
44
45
  @import 'utilities/internals';