@dialpad/dialtone 7.12.0 → 7.13.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 (13) hide show
  1. package/lib/build/less/components/breadcrumbs.less +48 -42
  2. package/lib/build/less/components/button.less +1 -1
  3. package/lib/build/less/components/chip.less +1 -1
  4. package/lib/build/less/components/input.less +1 -1
  5. package/lib/build/less/components/link.less +62 -82
  6. package/lib/build/less/components/radio-checkbox.less +24 -18
  7. package/lib/build/less/components/skeleton.less +15 -12
  8. package/lib/build/less/components/table.less +9 -5
  9. package/lib/build/less/components/tabs.less +77 -25
  10. package/lib/build/less/components/toggle.less +1 -1
  11. package/lib/dist/css/dialtone.css +1487 -8512
  12. package/lib/dist/css/dialtone.min.css +1 -1
  13. package/package.json +1 -1
package/lib/build/less/components/breadcrumbs.less CHANGED
@@ -7,33 +7,46 @@
7
7
  //
8
8
  // TABLE OF CONTENTS
9
9
  // • WRAPPER
10
- // • ITEMS & LINKS
11
10
  // • INVERTED STYLE
11
+ // • ITEMS & LINKS
12
12
  //
13
- // ============================================================================
14
- // $ WRAPPER
15
- // ----------------------------------------------------------------------------
16
- .d-breadcrumbs > ol {
17
- display: flex;
18
- flex-wrap: wrap;
19
- align-items: flex-start;
20
- box-sizing: border-box;
21
- margin: 0;
22
- padding: 0;
23
- font-size: var(--fs-200);
24
- line-height: var(--lh6);
25
- list-style: none;
26
- }
27
13
 
28
- // ============================================================================
29
- // $ ITEMS & LINKS
30
- // ----------------------------------------------------------------------------
31
14
  .d-breadcrumbs {
32
- // -- INDIVIDUAL ITEMS
33
- .d-breadcrumbs__item {
34
- position: relative;
15
+ --breadcrumbs-font-size: var(--fs-200);
16
+ --breadcrumbs-line-height: var(--lh-300);
17
+ --breadcrumbs-color-separator: var(--black-500);
18
+ --breadcrumbs-color-text: var(--fc-secondary);
19
+
20
+ // ============================================================================
21
+ // $ INVERTED STYLE
22
+ // ----------------------------------------------------------------------------
23
+ &--inverted {
24
+ --breadcrumbs-color-separator: var(--black-300);
25
+ --breadcrumbs-color-text: var(--fc-secondary-inverted);
26
+ }
27
+
28
+ // ============================================================================
29
+ // $ WRAPPER
30
+ // ----------------------------------------------------------------------------
31
+
32
+ > ol {
33
+ display: flex;
34
+ flex-wrap: wrap;
35
+ align-items: flex-start;
36
+ box-sizing: border-box;
35
37
  margin: 0;
36
- margin-left: var(--space-400);
38
+ padding: 0;
39
+ font-size: var(--breadcrumbs-font-size);
40
+ line-height: var(--breadcrumbs-line-height);
41
+ list-style: none;
42
+ }
43
+
44
+ // ============================================================================
45
+ // $ ITEMS & LINKS
46
+ // ----------------------------------------------------------------------------
47
+ &__item {
48
+ position: relative;
49
+ margin: 0 0 0 var(--space-400);
37
50
  padding: 0;
38
51
  list-style: none;
39
52
 
@@ -45,33 +58,26 @@
45
58
  position: absolute;
46
59
  right: calc(calc(var(--space-400) + var(--space-300)) * -1);
47
60
  margin-top: calc(var(--space-100) * -1);
48
- color: var(--fc-tertiary);
61
+ color: var(--breadcrumbs-color-separator);
49
62
  content: '/';
50
63
  }
51
64
  }
52
- }
53
65
 
54
- // -- SELECTED STATE (CURRENT PAGE)
55
- .d-breadcrumbs__item--selected .d-link {
56
- text-decoration: none;
57
- cursor: default;
58
- }
59
- }
66
+ .d-link {
67
+ color: var(--breadcrumbs-color-text);
68
+ }
60
69
 
70
+ // -- SELECTED STATE (CURRENT PAGE)
71
+ &--selected {
72
+ --breadcrumbs-color-text: var(--fc-primary);
61
73
 
62
- // ============================================================================
63
- // $ INVERTED STYLE
64
- // ----------------------------------------------------------------------------
65
- .d-breadcrumbs.d-breadcrumbs--inverted {
66
- // -- ITEM
67
- .d-breadcrumbs__item:not(:last-of-type)::before {
68
- color: var(--fc-primary-inverted);
69
- }
74
+ font-weight: var(--fw-medium);
75
+ cursor: default;
70
76
 
71
- // -- SELECTED STATE (CURRENT PAGE)
72
- .d-breadcrumbs__item--selected .d-link {
73
- &:hover {
74
- color: var(--fc-primary-inverted);
77
+ .d-breadcrumbs--inverted & {
78
+ --breadcrumbs-color-text: var(--fc-primary-inverted);
79
+ }
75
80
  }
76
81
  }
77
82
  }
83
+
package/lib/build/less/components/button.less CHANGED
@@ -72,7 +72,7 @@
72
72
  box-shadow: var(--button--bs);
73
73
  cursor: pointer;
74
74
  transition-timing-function: var(--ttf-out-quint);
75
- transition-duration: var(--td300);
75
+ transition-duration: var(--td200);
76
76
  transition-property: background-color, border, box-shadow;
77
77
  user-select: none;
78
78
  fill: currentColor;
package/lib/build/less/components/chip.less CHANGED
@@ -39,7 +39,7 @@
39
39
  border: none;
40
40
  border-radius: var(--chip-border-radius);
41
41
  transition-timing-function: var(--ttf-in-out);
42
- transition-duration: 75ms;
42
+ transition-duration: var(--td200);
43
43
  transition-property: background-color;
44
44
 
45
45
  // Reserves space within the chip for the close button, since the close button is
package/lib/build/less/components/input.less CHANGED
@@ -58,7 +58,7 @@
58
58
  outline: none;
59
59
  box-shadow: none;
60
60
  transition-timing-function: var(--ttf-in-out);
61
- transition-duration: 100ms;
61
+ transition-duration: var(--td100);
62
62
  transition-property: box-shadow, background-color;
63
63
  appearance: none;
64
64
 
package/lib/build/less/components/link.less CHANGED
@@ -14,20 +14,24 @@
14
14
  // $ BASE STYLE
15
15
  // ----------------------------------------------------------------------------
16
16
  .d-link {
17
+ --link-color-default: var(--purple-400);
18
+ --link-color-default-hover: hsl(var(--purple-400-h) var(--purple-400-s) calc(var(--purple-400-l) - 10%));
19
+
17
20
  position: relative;
18
21
  display: inline-flex;
22
+ gap: var(--space-300);
19
23
  align-items: center;
20
24
  justify-content: center;
21
25
  box-sizing: border-box;
22
26
  margin: 0;
23
27
  padding: 0;
24
- color: var(--purple-400);
28
+ color: var(--link-color-default);
25
29
  font: inherit;
26
- text-decoration: underline;
30
+ text-decoration: none;
27
31
  background-color: transparent;
28
32
  border: 0;
29
33
  transition-timing-function: var(--ttf-out-quint);
30
- transition-duration: var(--td300);
34
+ transition-duration: var(--td200);
31
35
  transition-property: background-color, border, box-shadow;
32
36
 
33
37
  // Reset button appearance
@@ -37,8 +41,8 @@
37
41
  fill: currentColor;
38
42
 
39
43
  &:hover {
40
- color: hsl(var(--purple-400-h) var(--purple-400-s) calc(var(--purple-400-l) - 10%));
41
- text-decoration: none;
44
+ color: var(--link-color-default-hover);
45
+ text-decoration: underline;
42
46
  cursor: pointer;
43
47
  }
44
48
 
@@ -46,95 +50,71 @@
46
50
  outline: none;
47
51
  box-shadow: var(--bs-focus-ring);
48
52
  }
49
- }
50
-
51
-
52
- // ============================================================================
53
- // $ ALTERNATE STYLES
54
- // ============================================================================
55
- // $$ WARNING
56
- // ----------------------------------------------------------------------------
57
- .d-link--warning {
58
- color: var(--fc-warning);
59
53
 
60
- &:hover {
61
- color: var(--fc-warning-hover);
54
+ // ============================================================================
55
+ // $ ALTERNATE STYLES
56
+ // ============================================================================
57
+ // $$ WARNING
58
+ // ----------------------------------------------------------------------------
59
+ &--warning {
60
+ --link-color-default: var(--fc-warning);
61
+ --link-color-default-hover: var(--fc-warning-hover);
62
62
  }
63
- }
64
63
 
65
- // $$ DANGER
66
- // ----------------------------------------------------------------------------
67
- .d-link--danger {
68
- color: var(--fc-critical);
69
-
70
- &:hover {
71
- color: hsl(var(--red-300-h), var(--red-300-s), calc(var(--red-300-l) - 8%));
64
+ // $$ DANGER
65
+ // ----------------------------------------------------------------------------
66
+ &--danger {
67
+ --link-color-default: var(--fc-critical);
68
+ --link-color-default-hover: hsl(var(--red-300-h), var(--red-300-s), calc(var(--red-300-l) - 8%));
72
69
  }
73
- }
74
-
75
- // $$ SUCCESS
76
- // ----------------------------------------------------------------------------
77
- .d-link--success {
78
- color: var(--fc-success);
79
70
 
80
- &:hover {
81
- color: var(--green-500);
71
+ // $$ SUCCESS
72
+ // ----------------------------------------------------------------------------
73
+ &--success {
74
+ --link-color-default: var(--fc-success);
75
+ --link-color-default-hover: var(--green-500);
82
76
  }
83
- }
84
-
85
- // $$ MUTED
86
- // ----------------------------------------------------------------------------
87
- .d-link--muted {
88
- color: var(--fc-secondary);
89
77
 
90
- &:hover {
91
- color: var(--fc-primary);
92
- }
93
- }
94
-
95
- // $$ DISABLED
96
- // ----------------------------------------------------------------------------
97
- // We don't expose these in the documentation because they're meant to be consumed
98
- // by buttons using .d-link. Links with a disabled attribute are not valid mark-up.
99
- .d-link[disabled],
100
- .d-link--disabled {
101
- color: var(--fc-disabled);
102
-
103
- &:hover {
104
- color: var(--fc-disabled);
105
- text-decoration: underline;
106
- cursor: not-allowed;
78
+ // $$ MUTED
79
+ // ----------------------------------------------------------------------------
80
+ &--muted {
81
+ --link-color-default: var(--fc-secondary);
82
+ --link-color-default-hover: var(--fc-primary);
107
83
  }
108
84
 
109
- &:focus {
110
- box-shadow: none;
85
+ // $$ DISABLED
86
+ // ----------------------------------------------------------------------------
87
+ // We don't expose these in the documentation because they're meant to be consumed
88
+ // by buttons using .d-link. Links with a disabled attribute are not valid mark-up.
89
+ &[disabled],
90
+ &--disabled {
91
+ --link-color-default: var(--fc-disabled);
92
+ --link-color-default-hover: var(--link-color-default);
93
+
94
+ &:hover {
95
+ text-decoration: none;
96
+ cursor: not-allowed;
97
+ }
111
98
  }
112
- }
113
99
 
114
- // $$ INVERTED
115
- // ----------------------------------------------------------------------------
116
- .d-link--inverted {
117
- color: var(--fc-primary-inverted);
118
-
119
- &:hover {
120
- color: var(--fc-secondary-inverted);
121
- }
122
- }
123
-
124
- // $$ INVERTED DISABLED
125
- // ----------------------------------------------------------------------------
126
- // We don't expose these in the documentation because they're meant to be consumed
127
- // by buttons using .d-link. Links with a disabled attribute are not valid mark-up.
128
- .d-link--inverted-disabled {
129
- color: var(--black-500);
130
-
131
- &:hover {
132
- color: var(--black-500);
133
- text-decoration: underline;
134
- cursor: not-allowed;
100
+ // $$ INVERTED
101
+ // ----------------------------------------------------------------------------
102
+ &--inverted {
103
+ --link-color-default: var(--fc-secondary-inverted);
104
+ --link-color-default-hover: var(--fc-primary-inverted);
135
105
  }
136
106
 
137
- &:focus {
138
- box-shadow: none;
107
+ // $$ INVERTED DISABLED
108
+ // ----------------------------------------------------------------------------
109
+ // We don't expose these in the documentation because they're meant to be consumed
110
+ // by buttons using .d-link. Links with a disabled attribute are not valid mark-up.
111
+ &--inverted-disabled {
112
+ --link-color-default: var(--black-400);
113
+ --link-color-default-hover: var(--link-color-default);
114
+
115
+ &:hover {
116
+ text-decoration: none;
117
+ cursor: not-allowed;
118
+ }
139
119
  }
140
120
  }
package/lib/build/less/components/radio-checkbox.less CHANGED
@@ -21,13 +21,17 @@
21
21
  // ============================================================================
22
22
  // $ RADIOS & CHECKBOXES
23
23
  // ----------------------------------------------------------------------------
24
+
24
25
  .d-checkbox,
25
26
  .d-radio {
26
27
  // Component specific CSS Vars
27
28
  // ------------------------------------------------------------------------
28
29
  --check-radio-color: var(--purple-400);
29
- --check-radio-color-border: var(--black-600);
30
+ --check-radio-color-border: var(--black-400);
31
+ --check-radio-color-border-disabled: hsla(var(--black-900-hsl) / 0.09);
30
32
  --check-radio-color-background: var(--white);
33
+ --check-radio-color-background-disabled: hsla(var(--black-900-hsl) / 0.12);
34
+ --check-radio-border-width: calc(var(--size-100) + calc(var(--size-100) / 2)); // 1.5
31
35
 
32
36
  // [1] Check to see if we can use custom styles, if so reset the defaults
33
37
  // ------------------------------------------------------------------------
@@ -40,7 +44,7 @@
40
44
  margin: 0;
41
45
  font-size: inherit;
42
46
  background-color: var(--check-radio-color-background);
43
- border: var(--size-100) solid var(--check-radio-color-border);
47
+ border: var(--check-radio-border-width) solid var(--check-radio-color-border);
44
48
  outline: 0;
45
49
  box-shadow: none;
46
50
  cursor: pointer;
@@ -68,15 +72,15 @@
68
72
  flex: 0 auto;
69
73
  align-self: flex-start;
70
74
  transition-timing-function: var(--ttf-out-quint);
71
- transition-duration: var(--td300);
75
+ transition-duration: var(--td200);
72
76
  transition-property: box-shadow;
73
77
 
74
78
  // -- DISABLED
75
79
  &[disabled],
76
80
  &--disabled {
77
81
  --check-radio-color: var(--fc-disabled);
78
- --check-radio-color-border: var(--black-400);
79
- --check-radio-color-background: var(--black-300);
82
+ --check-radio-color-border: var(--check-radio-color-border-disabled);
83
+ --check-radio-color-background: var(--check-radio-color-background-disabled);
80
84
 
81
85
  cursor: not-allowed;
82
86
  }
@@ -90,9 +94,6 @@
90
94
  .d-radio-group {
91
95
  display: flex;
92
96
  gap: var(--space-400); // 8
93
- padding-right: var(--space-100); // 1
94
- padding-bottom: var(--space-200); // 2
95
- padding-left: var(--space-100); // 1
96
97
 
97
98
  // -- Wrapper Disabled State
98
99
  &.d-checkbox-group--disabled,
@@ -114,7 +115,7 @@
114
115
  .d-radio__input {
115
116
  display: flex;
116
117
  align-self: flex-start;
117
- padding-top: calc(var(--space-200) + var(--space-100)); // 3
118
+ padding-top: var(--space-300);
118
119
  }
119
120
 
120
121
 
@@ -136,7 +137,7 @@
136
137
  color: var(--black-800);
137
138
  font-weight: var(--fw-normal);
138
139
  font-size: var(--fs-200);
139
- line-height: calc(20/14);
140
+ line-height: var(--lh-400);
140
141
  cursor: pointer;
141
142
  }
142
143
 
@@ -163,14 +164,15 @@
163
164
 
164
165
  // Disabled
165
166
  &[disabled] {
166
- --check-radio-color-background: var(--black-300);
167
+ --check-radio-color-background: var(--check-radio-color-background-disabled);
167
168
 
168
169
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z' fill='hsl(240, 10%, 51%)'/%3E%3C/svg%3E");
169
170
  }
170
171
  }
171
172
 
172
173
  &--disabled:checked {
173
- --check-radio-color-background: var(--black-300);
174
+ --check-radio-color-background: var(--check-radio-color-background-disabled);
175
+ --check-radio-color-border: var(--check-radio-color-border-disabled);
174
176
 
175
177
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z' fill='hsl(240, 10%, 51%)'/%3E%3C/svg%3E");
176
178
  }
@@ -178,11 +180,13 @@
178
180
  &--indeterminate,
179
181
  &:indeterminate {
180
182
  --check-radio-color-background: var(--check-radio-color);
183
+ --check-radio-color-border: var(--check-radio-color);
181
184
 
182
185
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M19 13H5v-2h14v2z' fill='%23fff'/%3E%3C/svg%3E");
183
186
 
184
187
  &[disabled] {
185
- --check-radio-color-background: var(--black-300);
188
+ --check-radio-color-background: var(--check-radio-color-background-disabled);
189
+ --check-radio-color-border: var(--check-radio-color-border-disabled);
186
190
 
187
191
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M19 13H5v-2h14v2z' fill='hsl(240, 10%, 51%)'/%3E%3C/svg%3E");
188
192
  }
@@ -190,7 +194,8 @@
190
194
 
191
195
  &--indeterminate&--disabled,
192
196
  &:indeterminate&--disabled {
193
- --check-radio-color-background: var(--black-300);
197
+ --check-radio-color-background: var(--check-radio-color-background-disabled);
198
+ --check-radio-color-border: var(--check-radio-color-border-disabled);
194
199
 
195
200
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M19 13H5v-2h14v2z' fill='hsl(240, 10%, 51%)'/%3E%3C/svg%3E");
196
201
  }
@@ -199,8 +204,8 @@
199
204
  &[disabled],
200
205
  &--disabled {
201
206
  --check-radio-color: var(--fc-disabled);
202
- --check-radio-color-border: var(--black-400);
203
- --check-radio-color-background: var(--black-300);
207
+ --check-radio-color-border: var(--check-radio-color-border-disabled);
208
+ --check-radio-color-background: var(--check-radio-color-background-disabled);
204
209
  }
205
210
  }
206
211
  }
@@ -233,8 +238,8 @@
233
238
  &[disabled],
234
239
  &--disabled {
235
240
  --check-radio-color: var(--fc-disabled);
236
- --check-radio-color-border: var(--black-400);
237
- --check-radio-color-background: var(--black-300);
241
+ --check-radio-color-border: var(--check-radio-color-border-disabled);
242
+ --check-radio-color-background: var(--check-radio-color-background-disabled);
238
243
  }
239
244
 
240
245
  &:focus-visible,
@@ -254,6 +259,7 @@
254
259
  }
255
260
 
256
261
  &--disabled:checked {
262
+ --check-radio-color-border: var(--check-radio-color-border-disabled);
257
263
  --check-radio-color-background: var(--black-400);
258
264
  }
259
265
  }
package/lib/build/less/components/skeleton.less CHANGED
@@ -11,33 +11,36 @@
11
11
  // @ SKELETON CONTAINER
12
12
  // ----------------------------------------------------------------------------
13
13
  .skeleton-placeholder {
14
+ --placeholder-from-color: hsla(var(--black-900-hsl) / 0.2);
15
+ --placeholder-to-color: hsla(var(--black-900-hsl) / 0.1);
16
+
14
17
  display: flex;
15
18
  width: 100%;
16
- background: var(--placeholder-from-color, var(--black-300));
19
+ background: var(--placeholder-from-color);
17
20
  animation-duration: 1000ms;
18
- fill: var(--placeholder-from-color, var(--black-300));
21
+ fill: var(--placeholder-from-color);
19
22
  stroke: none;
20
23
 
21
24
  &--animate {
22
- animation-name: placeholder-throb;
25
+ animation-name: skeleton-placeholder-throb;
23
26
  animation-iteration-count: infinite;
24
27
  }
25
28
  }
26
29
 
27
30
  // the animation is used by the skeleton component
28
- @keyframes placeholder-throb {
29
- 10% {
30
- background: var(--placeholder-from-color, var(--black-300));
31
- fill: var(--placeholder-from-color, var(--black-300));
31
+ @keyframes skeleton-placeholder-throb {
32
+ 20% {
33
+ background: var(--placeholder-from-color);
34
+ fill: var(--placeholder-from-color);
32
35
  }
33
36
 
34
37
  50% {
35
- background: var(--placeholder-to-color, var(--black-200));
36
- fill: var(--placeholder-to-color, var(--black-200));
38
+ background: var(--placeholder-to-color);
39
+ fill: var(--placeholder-to-color);
37
40
  }
38
41
 
39
- 90% {
40
- background: var(--placeholder-from-color, var(--black-300));
41
- fill: var(--placeholder-from-color, var(--black-300));
42
+ 80% {
43
+ background: var(--placeholder-from-color);
44
+ fill: var(--placeholder-from-color);
42
45
  }
43
46
  }
package/lib/build/less/components/table.less CHANGED
@@ -20,14 +20,17 @@
20
20
  --table-color-border: var(--black-300);
21
21
  --table-th-color-text: var(--fc-secondary);
22
22
  --table-td-color-text: var(--fc-tertiary);
23
+ --table-font-size: var(--fs-200);
24
+ --table-th-font-size: var(--fs-100);
25
+ --table-line-height: var(--lh-200);
23
26
 
24
27
  display: table;
25
28
  box-sizing: border-box;
26
29
  width: 100%;
27
30
  max-width: 100%;
28
31
  margin: 0;
29
- font-size: var(--fs-200);
30
- line-height: var(--lh2);
32
+ font-size: var(--table-font-size);
33
+ line-height: var(--table-line-height);
31
34
  border-collapse: collapse;
32
35
  border-spacing: 0;
33
36
 
@@ -36,7 +39,7 @@
36
39
  margin-bottom: var(--space-400); // 8
37
40
  color: var(--table-th-color-text);
38
41
  font-weight: var(--fw-bold);
39
- font-size: var(--fs-200);
42
+ font-size: var(--table-font-size);
40
43
  .d-ta-unset();
41
44
  }
42
45
 
@@ -46,7 +49,8 @@
46
49
 
47
50
  // Column Header Styles
48
51
  th {
49
- font-size: var(--fs-100);
52
+ font-size: var(--table-th-font-size);
53
+ line-height: var(--lh-100);
50
54
  text-transform: uppercase;
51
55
  }
52
56
  }
@@ -110,7 +114,7 @@
110
114
  &.d-table--inverted {
111
115
  // Row Styles
112
116
  tr:nth-child(even) {
113
- background-color: hsla(var(--bgc-primary-hsl) / 0.08);
117
+ background-color: hsla(var(--bgc-primary-hsl) / 0.1);
114
118
  }
115
119
  }
116
120
  }