@dialpad/dialtone 8.5.1-version8.1 → 8.6.0-version8.1

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 (10) hide show
  1. package/lib/build/less/components/avatar.less +21 -31
  2. package/lib/build/less/components/badge.less +10 -11
  3. package/lib/build/less/components/breadcrumbs.less +3 -3
  4. package/lib/build/less/components/chip.less +5 -5
  5. package/lib/build/less/components/radio-checkbox.less +14 -15
  6. package/lib/build/less/themes/default.less +0 -6
  7. package/lib/build/less/variables/layout.less +1 -40
  8. package/lib/dist/css/dialtone.css +90 -90
  9. package/lib/dist/css/dialtone.min.css +1 -1
  10. package/package.json +6 -6
package/lib/build/less/components/avatar.less CHANGED
@@ -19,14 +19,8 @@
19
19
  .d-avatar {
20
20
  // Component CSS Vars
21
21
  // ------------------------------------------------------------------------
22
- // Hard-coded. Identical in all theme modes.
23
- // To be replaced by `var (--dt-color-neutral-black)`,
24
- // or possibly an Avatar-specific Design Token
25
- --avatar-color-background: #e0e0e0;
26
- // Hard-coded. Identical in all theme modes.
27
- // To be replaced by `var (--dt-color-neutral-black)`,
28
- // or possibly an Avatar-specific Design Token
29
- --avatar-color-text: #000;
22
+ --avatar-color-background: var(--dt-avatar-color-background-000);
23
+ --avatar-color-text: var(--dt-avatar-color-foreground);
30
24
  --avatar-size-shape: var(--dt-size-600);
31
25
  --avatar-size-image: 100%;
32
26
  --avatar-size-text: var(--dt-font-size-200);
@@ -40,27 +34,24 @@
40
34
 
41
35
  // -- COLOR VARIANTS
42
36
  // ------------------------------------------------------------------------
43
-
44
- // hard-coded. identical in all theme modes.
45
- // To be replaced by Avatar-specific Design Tokens,
46
- &--color-100 { --avatar-color-background: #1aa340; }
47
- &--color-200 { --avatar-color-background: #aaff83; }
48
- &--color-300 { --avatar-color-background: #adea88; }
49
- &--color-400 { --avatar-color-background: #77eca6; }
50
- &--color-500 { --avatar-color-background: #7aedbd; }
51
- &--color-600 { --avatar-color-background: #77deec; }
52
- &--color-700 { --avatar-color-background: #5ed8ff; }
53
- &--color-800 { --avatar-color-background: #99e7ff; }
54
- &--color-900 { --avatar-color-background: #51a0fe; }
55
- &--color-1000 { --avatar-color-background: #b6cfff; }
56
- &--color-1100 { --avatar-color-background: #f1b7e8; }
57
- &--color-1200 { --avatar-color-background: #ec77bd; }
58
- &--color-1300 { --avatar-color-background: #ff67be; }
59
- &--color-1400 { --avatar-color-background: #f87e7e; }
60
- &--color-1500 { --avatar-color-background: #eca877; }
61
- &--color-1600 { --avatar-color-background: #ffbe41; }
62
- &--color-1700 { --avatar-color-background: #ffd646; }
63
- &--color-1800 { --avatar-color-background: #f1dab7; }
37
+ &--color-100 { --avatar-color-background: var(--dt-avatar-color-background-100); }
38
+ &--color-200 { --avatar-color-background: var(--dt-avatar-color-background-200); }
39
+ &--color-300 { --avatar-color-background: var(--dt-avatar-color-background-300); }
40
+ &--color-400 { --avatar-color-background: var(--dt-avatar-color-background-400); }
41
+ &--color-500 { --avatar-color-background: var(--dt-avatar-color-background-500); }
42
+ &--color-600 { --avatar-color-background: var(--dt-avatar-color-background-600); }
43
+ &--color-700 { --avatar-color-background: var(--dt-avatar-color-background-700); }
44
+ &--color-800 { --avatar-color-background: var(--dt-avatar-color-background-800); }
45
+ &--color-900 { --avatar-color-background: var(--dt-avatar-color-background-900); }
46
+ &--color-1000 { --avatar-color-background: var(--dt-avatar-color-background-1000); }
47
+ &--color-1100 { --avatar-color-background: var(--dt-avatar-color-background-1100); }
48
+ &--color-1200 { --avatar-color-background: var(--dt-avatar-color-background-1200); }
49
+ &--color-1300 { --avatar-color-background: var(--dt-avatar-color-background-1300); }
50
+ &--color-1400 { --avatar-color-background: var(--dt-avatar-color-background-1400); }
51
+ &--color-1500 { --avatar-color-background: var(--dt-avatar-color-background-1500); }
52
+ &--color-1600 { --avatar-color-background: var(--dt-avatar-color-background-1600); }
53
+ &--color-1700 { --avatar-color-background: var(--dt-avatar-color-background-1700); }
54
+ &--color-1800 { --avatar-color-background: var(--dt-avatar-color-background-1800); }
64
55
 
65
56
  // -- CHILDREN
66
57
  // ------------------------------------------------------------------------
@@ -73,7 +64,6 @@
73
64
  height: var(--avatar-size-shape);
74
65
  overflow: hidden;
75
66
  background-color: var(--avatar-color-background);
76
- background-image: var(--avatar-gradient);
77
67
  border-radius: var(--dt-size-radius-pill);
78
68
  }
79
69
 
@@ -117,7 +107,7 @@
117
107
  font-size: calc(var(--dt-font-size-100) - var(--dt-size-200));
118
108
  line-height: var(--dt-font-line-height-100);
119
109
  text-align: center;
120
- background-color: var(--dt-color-black-600);
110
+ background-color: var(--dt-color-surface-strong);
121
111
  border-radius: var(--dt-size-radius-pill);
122
112
  box-shadow: 0 0 0 var(--dt-size-200) var(--avatar-count-color-shadow);
123
113
 
package/lib/build/less/components/badge.less CHANGED
@@ -20,9 +20,8 @@
20
20
  .d-badge {
21
21
  // COMPONENT CSS VARIABLES
22
22
  // --------------------------------------------------------------------------
23
- --badge-color-text: var(--dt-color-foreground-primary);
24
- --badge-color-background: var(--dt-color-surface-moderate-opaque);
25
- --badge-color-background-ai: linear-gradient(to bottom right, var(--dt-color-magenta-300) 0%, var(--dt-color-purple-400) 100%);
23
+ --badge-color-text: var(--dt-badge-color-foreground-default);
24
+ --badge-color-background: var(--dt-badge-color-background-default);
26
25
  --badge-radius: var(--dt-size-300);
27
26
  --badge-line-height: calc(var(--dt-size-500) + var(--dt-size-200));
28
27
  --badge-font-size: var(--dt-font-size-100);
@@ -67,31 +66,31 @@
67
66
  // --------------------------------------------------------------------------
68
67
 
69
68
  &--info {
70
- --badge-color-background: var(--dt-color-surface-info);
69
+ --badge-color-background: var(--dt-badge-color-background-info);
71
70
  }
72
71
 
73
72
  &--success {
74
- --badge-color-background: var(--dt-color-surface-success);
73
+ --badge-color-background: var(--dt-badge-color-background-success);
75
74
  }
76
75
 
77
76
  &--warning {
78
- --badge-color-background: var(--dt-color-surface-warning);
77
+ --badge-color-background: var(--dt-badge-color-background-warning);
79
78
  }
80
79
 
81
80
  &--critical {
82
- --badge-color-background: var(--dt-color-surface-critical);
81
+ --badge-color-background: var(--dt-badge-color-background-critical);
83
82
  }
84
83
 
85
84
  &--bulletin {
86
- --badge-color-text: var(--theme-mention-color-foreground);
87
- --badge-color-background: var(--theme-mention-color-background);
85
+ --badge-color-text: var(--dt-badge-color-foreground-bulletin);
86
+ --badge-color-background: var(--dt-badge-color-background-bulletin);
88
87
  }
89
88
 
90
89
  &--ai {
91
- --badge-color-text: var(--theme-mention-color-foreground);
90
+ --badge-color-text: var(--dt-badge-color-foreground-bulletin); // missing token or is ok to use this one?
92
91
  --badge-color-background: var(--dt-color-magenta-300);
93
92
 
94
- background-image: var(--badge-color-background-ai);
93
+ background-image: var(--dt-badge-color-background-ai);
95
94
  }
96
95
 
97
96
  &--decorate-black-400 { --badge-decorative-color: var(--dt-color-black-400); }
package/lib/build/less/components/breadcrumbs.less CHANGED
@@ -15,14 +15,14 @@
15
15
  --breadcrumbs-font-size: var(--dt-font-size-200);
16
16
  --breadcrumbs-line-height: var(--dt-font-line-height-300);
17
17
  --breadcrumbs-color-separator: var(--dt-color-black-500);
18
- --breadcrumbs-color-text: var(--dt-color-foreground-secondary);
18
+ --breadcrumbs-color-text: var(--dt-color-link-muted);
19
19
 
20
20
  // ============================================================================
21
21
  // $ INVERTED STYLE
22
22
  // ----------------------------------------------------------------------------
23
23
  &--inverted {
24
- --breadcrumbs-color-separator: var(--dt-color-black-300);
25
- --breadcrumbs-color-text: var(--dt-color-foreground-secondary-inverted);
24
+ --breadcrumbs-color-separator: var(--dt-color-black-400);
25
+ --breadcrumbs-color-text: var(--dt-color-link-muted-inverted);
26
26
  }
27
27
 
28
28
  // ============================================================================
package/lib/build/less/components/chip.less CHANGED
@@ -46,8 +46,8 @@
46
46
  // not nested within the chip. Only apply if close button exists (more than one child).
47
47
  &:not(:only-child)::after {
48
48
  flex-shrink: 0;
49
- width: calc(var(--dt-size-500) + var(--dt-space-200));
50
- height: calc(var(--dt-size-500) + var(--dt-space-200));
49
+ width: calc(var(--dt-size-500) + var(--dt-size-200));
50
+ height: calc(var(--dt-size-500) + var(--dt-size-200));
51
51
  content: '';
52
52
  }
53
53
 
@@ -76,7 +76,7 @@
76
76
  }
77
77
 
78
78
  .d-avatar {
79
- --avatar-size-shape: var(--dt-space-550);
79
+ --avatar-size-shape: var(--dt-size-550);
80
80
 
81
81
  margin: var(--dt-space-200-negative) var(--dt-space-300) var(--dt-space-200-negative) var(--dt-space-350-negative);
82
82
  }
@@ -205,8 +205,8 @@
205
205
  padding: var(--dt-space-200);
206
206
 
207
207
  &::before {
208
- width: var(--dt-space-550);
209
- height: var(--dt-space-550);
208
+ width: var(--dt-size-550);
209
+ height: var(--dt-size-550);
210
210
  }
211
211
 
212
212
  .d-btn__icon .d-svg {
package/lib/build/less/components/radio-checkbox.less CHANGED
@@ -24,11 +24,12 @@
24
24
  .d-radio {
25
25
  // Component specific CSS Vars
26
26
  // ------------------------------------------------------------------------
27
- --check-radio-color: var(--dt-color-purple-400);
28
- --check-radio-color-border: var(--dt-color-black-400);
29
- --check-radio-color-border-disabled: hsla(var(--dt-color-black-900-hsl) / 0.09);
30
- --check-radio-color-background: hsla(var(--dt-color-black-900-hsl) / 0.03);
31
- --check-radio-color-background-disabled: hsla(var(--dt-color-black-900-hsl) / 0.12);
27
+ --check-radio-color-border: var(--dt-checkbox-color-border-unchecked);
28
+ --check-radio-color-border-checked: var(--dt-checkbox-color-border-checked);
29
+ --check-radio-color-border-disabled: var(--dt-inputs-color-border-disabled);
30
+ --check-radio-color-background: var(--dt-inputs-color-background-default);
31
+ --check-radio-color-background-checked: var(--dt-checkbox-color-background-checked);
32
+ --check-radio-color-background-disabled: var(--dt-inputs-color-background-disabled);
32
33
  --check-radio-border-width: calc(var(--dt-size-100) + var(--dt-size-50)); // 1.5
33
34
 
34
35
  // [1] Check to see if we can use custom styles, if so reset the defaults
@@ -56,14 +57,12 @@
56
57
 
57
58
  &:focus,
58
59
  &:checked:focus {
59
- --check-radio-color-border: var(--check-radio-color);
60
-
61
60
  outline: 0;
62
61
  box-shadow: var(--dt-shadow-focus);
63
62
  }
64
63
 
65
64
  &:checked {
66
- --check-radio-color-border: var(--check-radio-color);
65
+ --check-radio-color-border: var(--check-radio-color-border-checked);
67
66
  }
68
67
  }
69
68
 
@@ -132,7 +131,7 @@
132
131
  display: inline-flex;
133
132
  flex: 1 auto;
134
133
  flex-direction: column;
135
- color: var(--dt-color-black-800);
134
+ color: var(--dt-color-foreground-primary);
136
135
  font-weight: var(--dt-font-weight-normal);
137
136
  font-size: var(--dt-font-size-200);
138
137
  line-height: var(--dt-font-line-height-400);
@@ -155,7 +154,7 @@
155
154
  }
156
155
 
157
156
  &:checked {
158
- --check-radio-color-background: var(--check-radio-color);
157
+ --check-radio-color-background: var(--check-radio-color-background-checked);
159
158
 
160
159
  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='%23fff'/%3E%3C/svg%3E");
161
160
 
@@ -176,8 +175,8 @@
176
175
 
177
176
  &--indeterminate,
178
177
  &:indeterminate {
179
- --check-radio-color-background: var(--check-radio-color);
180
- --check-radio-color-border: var(--check-radio-color);
178
+ --check-radio-color-background: var(--check-radio-color-background-checked);
179
+ --check-radio-color-border: var(--check-radio-color-border-checked);
181
180
 
182
181
  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
182
 
@@ -228,19 +227,19 @@
228
227
  }
229
228
 
230
229
  &:checked {
231
- --check-radio-color-background: var(--check-radio-color);
230
+ --check-radio-color-background: var(--check-radio-color-background-checked);
232
231
 
233
232
  box-shadow: inset 0 0 0 var(--dt-size-200) var(--dt-color-neutral-white);
234
233
 
235
234
  // Disabled
236
235
  &[disabled] {
237
- --check-radio-color-background: var(--dt-color-black-400);
236
+ --check-radio-color-background: var(--check-radio-color-background-disabled);
238
237
  }
239
238
  }
240
239
 
241
240
  &--disabled:checked {
242
241
  --check-radio-color-border: var(--check-radio-color-border-disabled);
243
- --check-radio-color-background: var(--dt-color-black-400);
242
+ --check-radio-color-background: var(--check-radio-color-background-disabled);
244
243
  }
245
244
  }
246
245
  }
package/lib/build/less/themes/default.less CHANGED
@@ -128,12 +128,6 @@ body {
128
128
  --@{key}: @value;
129
129
  });
130
130
 
131
- // $$ Z-INDEX
132
- // ------------------------------------------------------------------------
133
- each(@zi-vars, {
134
- --@{key}: @value;
135
- });
136
-
137
131
  // $$ THEME VARS
138
132
  // These should always come last
139
133
  // ------------------------------------------------------------------------
package/lib/build/less/variables/layout.less CHANGED
@@ -1,46 +1,7 @@
1
1
  //
2
2
  // DIALTONE
3
- // TOKENS: Z-INDEX
3
+ // TOKENS: Grid-vars
4
4
  //
5
- // These are z-index constants for Dialpad's design system Dialtone.
6
- // For further documentation of these and other classes,
7
- // visit https://dialpad.design/tokens/z-index
8
- //
9
- // ============================================================================
10
- // $ Z-INDEX
11
- // ----------------------------------------------------------------------------
12
- @zi-hide: -1;
13
- @zi-base: 0;
14
- @zi-base1: 1;
15
- @zi-selected: 25;
16
- @zi-active: 50;
17
- @zi-navigation: 100;
18
- @zi-navigation-fixed: 150;
19
- @zi-dropdown: 200;
20
- @zi-popover: 300;
21
- @zi-tooltip: 400;
22
- @zi-drawer: 500;
23
- @zi-modal: 600;
24
- @zi-modal-element: 650;
25
- @zi-notification: 700;
26
-
27
- @zi-vars: {
28
- zi-hide: @zi-hide;
29
- zi-base: @zi-base;
30
- zi-base1: @zi-base1;
31
- zi-selected: @zi-selected;
32
- zi-active: @zi-active;
33
- zi-navigation: @zi-navigation;
34
- zi-navigation-fixed: @zi-navigation-fixed;
35
- zi-dropdown: @zi-dropdown;
36
- zi-popover: @zi-popover;
37
- zi-tooltip: @zi-tooltip;
38
- zi-drawer: @zi-drawer;
39
- zi-modal: @zi-modal;
40
- zi-modal-element: @zi-modal-element;
41
- zi-notification: @zi-notification;
42
- }
43
-
44
5
  // ============================================================================
45
6
  // $ GRID VARIABLES
46
7
  // ----------------------------------------------------------------------------