@dialpad/dialtone 7.19.0 → 7.20.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 (17) hide show
  1. package/lib/build/less/components/banner.less +7 -7
  2. package/lib/build/less/components/input.less +6 -6
  3. package/lib/build/less/components/link.less +2 -2
  4. package/lib/build/less/components/modal.less +1 -1
  5. package/lib/build/less/components/notice.less +5 -5
  6. package/lib/build/less/components/popover.less +1 -1
  7. package/lib/build/less/components/selects.less +3 -3
  8. package/lib/build/less/components/table.less +3 -3
  9. package/lib/build/less/components/tabs.less +2 -2
  10. package/lib/build/less/components/toast.less +4 -4
  11. package/lib/build/less/themes/default.less +6 -0
  12. package/lib/build/less/utilities/borders.less +30 -7
  13. package/lib/build/less/utilities/colors.less +17 -0
  14. package/lib/build/less/variables/colors.less +46 -1
  15. package/lib/dist/css/dialtone.css +218 -49
  16. package/lib/dist/css/dialtone.min.css +1 -1
  17. package/package.json +1 -1
package/lib/build/less/components/banner.less CHANGED
@@ -18,7 +18,7 @@
18
18
  --banner-color-background: var(--bgc-secondary);
19
19
  --banner-color-text: var(--fc-primary);
20
20
  --notice-color-icon: var(--toast-color-text);
21
- --banner-color-border: hsla(var(--black-900-hsl) / 0.1);
21
+ --banner-color-border: var(--bc-subtle);
22
22
  --banner-font-size: var(--fs-200);
23
23
  --banner-line-height: var(--lh-200);
24
24
  --banner-dialog-padding-y: var(--space-400);
@@ -91,9 +91,9 @@
91
91
  // $$ DEFAULT IMPORTANT
92
92
  // ----------------------------------------------------------------------------
93
93
  .d-banner.d-banner--important {
94
- --banner-color-background: var(--bgc-contrast);
95
- --banner-color-text: var(--black-100);
96
- --notice-color-icon: var(--black-100);
94
+ --banner-color-background: var(--bgc-strong);
95
+ --banner-color-text: var(--fc-primary-inverted);
96
+ --notice-color-icon: var(--fc-primary-inverted);
97
97
  --banner-color-border: transparent;
98
98
  }
99
99
 
@@ -103,7 +103,7 @@
103
103
  --banner-color-background: var(--bgc-critical);
104
104
 
105
105
  &.d-banner--important {
106
- --banner-color-background: var(--red-400);
106
+ --banner-color-background: var(--bgc-critical-strong);
107
107
  --banner-color-text: var(--fc-primary-inverted);
108
108
  }
109
109
  }
@@ -114,7 +114,7 @@
114
114
  --banner-color-background: var(--bgc-info);
115
115
 
116
116
  &.d-banner--important {
117
- --banner-color-background: var(--blue-400);
117
+ --banner-color-background: var(--bgc-info-strong);
118
118
  --banner-color-text: var(--fc-primary-inverted);
119
119
  }
120
120
  }
@@ -125,7 +125,7 @@
125
125
  --banner-color-background: var(--bgc-success);
126
126
 
127
127
  &.d-banner--important {
128
- --banner-color-background: var(--green-400);
128
+ --banner-color-background: var(--bgc-success-strong);
129
129
  --banner-color-text: var(--fc-primary-inverted);
130
130
  }
131
131
  }
package/lib/build/less/components/input.less CHANGED
@@ -29,7 +29,7 @@
29
29
  .d-input__wrapper {
30
30
  // Component CSS Vars
31
31
  // ------------------------------------------------------------------------
32
- --input-color-border: hsla(var(--black-900-hsl) / 0.1);
32
+ --input-color-border: var(--bc-subtle);
33
33
  --input-color-background: hsla(var(--black-900-hsl) / 0.03);
34
34
  --input-color-background-disabled: hsla(var(--black-900-hsl) / 0.12);
35
35
  --input-color-text: var(--fc-secondary);
@@ -74,9 +74,9 @@
74
74
  &:focus,
75
75
  &:focus-within {
76
76
  --input-color-background: hsla(var(--black-900-hsl) / 0.01);
77
- --input-color-border: var(--color-focus-ring) !important;
77
+ --input-color-border: var(--bc-focus) !important;
78
78
 
79
- box-shadow: 0 0 0 var(--size-100) var(--color-focus-ring) inset;
79
+ box-shadow: 0 0 0 var(--size-100) var(--input-color-border) inset;
80
80
  }
81
81
  // -- DISABLED / READ-ONLY
82
82
  &[disabled],
@@ -211,17 +211,17 @@
211
211
  // ----------------------------------------------------------------------------
212
212
  .d-input--warning,
213
213
  .d-textarea--warning {
214
- --input-color-border: var(--gold-400) !important;
214
+ --input-color-border: var(--bc-warning) !important;
215
215
  }
216
216
 
217
217
  .d-input--error,
218
218
  .d-textarea--error {
219
- --input-color-border: var(--red-300) !important;
219
+ --input-color-border: var(--bc-critical) !important;
220
220
  }
221
221
 
222
222
  .d-input--success,
223
223
  .d-textarea--success {
224
- --input-color-border: var(--green-400) !important;
224
+ --input-color-border: var(--bc-success) !important;
225
225
  }
226
226
 
227
227
  // ============================================================================
package/lib/build/less/components/link.less CHANGED
@@ -73,14 +73,14 @@
73
73
  // ----------------------------------------------------------------------------
74
74
  &--danger {
75
75
  --link-color-default: var(--fc-critical);
76
- --link-color-default-hover: hsl(var(--red-300-h), var(--red-300-s), calc(var(--red-300-l) - 8%));
76
+ --link-color-default-hover: var(--fc-critical-strong);
77
77
  }
78
78
 
79
79
  // $$ SUCCESS
80
80
  // ----------------------------------------------------------------------------
81
81
  &--success {
82
82
  --link-color-default: var(--fc-success);
83
- --link-color-default-hover: var(--green-500);
83
+ --link-color-default-hover: var(--fc-success-strong);
84
84
  }
85
85
 
86
86
  // $$ MUTED
package/lib/build/less/components/modal.less CHANGED
@@ -30,7 +30,7 @@
30
30
  --modal-backdrop-color-background: hsla(var(--bgc-contrast-hsl) / 0.7);
31
31
  --modal-dialog-padding: var(--space-600);
32
32
  --modal-dialog-color-background: var(--bgc-primary);
33
- --modal-dialog-color-border: hsla(var(--black-900-hsl) / 0.1);
33
+ --modal-dialog-color-border: var(--bc-subtle);
34
34
  --modal-dialog-color-text: var(--fc-tertiary);
35
35
  --modal-header-color-text: var(--fc-secondary);
36
36
  --modal-dialog-shadow: var(--bs-card);
package/lib/build/less/components/notice.less CHANGED
@@ -101,8 +101,8 @@
101
101
  // $$ DEFAULT IMPORTANT
102
102
  // ----------------------------------------------------------------------------
103
103
  .d-notice.d-notice--important {
104
- --notice-color-background: var(--bgc-contrast);
105
- --notice-color-text: var(--black-100);
104
+ --notice-color-background: var(--bgc-strong);
105
+ --notice-color-text: var(--fc-primary-inverted);
106
106
  --notice-color-shadow: transparent;
107
107
  --notice-color-icon: var(--fc-primary-inverted);
108
108
  }
@@ -118,7 +118,7 @@
118
118
  &.d-notice--important,
119
119
  &.d-banner--important,
120
120
  &.d-toast--important {
121
- --notice-color-background: var(--red-400);
121
+ --notice-color-background: var(--bgc-critical-strong);
122
122
  --notice-color-text: var(--fc-primary-inverted);
123
123
  }
124
124
  }
@@ -134,7 +134,7 @@
134
134
  &.d-notice--important,
135
135
  &.d-banner--important,
136
136
  &.d-toast--important {
137
- --notice-color-background: var(--blue-400);
137
+ --notice-color-background: var(--bgc-info-strong);
138
138
  --notice-color-text: var(--fc-primary-inverted);
139
139
  }
140
140
  }
@@ -150,7 +150,7 @@
150
150
  &.d-notice--important,
151
151
  &.d-banner--important,
152
152
  &.d-toast--important {
153
- --notice-color-background: var(--green-400);
153
+ --notice-color-background: var(--bgc-success-strong);
154
154
  --notice-color-text: var(--fc-primary-inverted);
155
155
  }
156
156
  }
package/lib/build/less/components/popover.less CHANGED
@@ -27,7 +27,7 @@
27
27
  --popover-color-background: var(--bgc-secondary);
28
28
  --popover-border-width: var(--size-100); // 8
29
29
  --popover-border-radius: var(--size-400);
30
- --popover-color-border: hsla(var(--black-900-hsl) / 0.1);
30
+ --popover-color-border: var(--bc-subtle);
31
31
  --popover-shadow: var(--bs-card);
32
32
 
33
33
  &,
package/lib/build/less/components/selects.less CHANGED
@@ -131,15 +131,15 @@
131
131
  // $$ VALIDATION STATES
132
132
  // ------------------------------------------------------------------------
133
133
  .d-select__input--success {
134
- --input-color-border: var(--green-400);
134
+ --input-color-border: var(--bc-success);
135
135
  }
136
136
 
137
137
  .d-select__input--error {
138
- --input-color-border: var(--red-300);
138
+ --input-color-border: var(--bc-critical);
139
139
  }
140
140
 
141
141
  .d-select__input--warning {
142
- --input-color-border: var(--gold-400);
142
+ --input-color-border: var(--bc-warning);
143
143
  }
144
144
 
145
145
  .d-select--disabled {
package/lib/build/less/components/table.less CHANGED
@@ -17,7 +17,7 @@
17
17
  .d-table {
18
18
  // Component CSS Vars
19
19
  // ------------------------------------------------------------------------
20
- --table-color-border: hsla(var(--black-900-hsl) / 0.18);
20
+ --table-color-border: var(--bc-default);
21
21
  --table-th-color-text: var(--fc-secondary);
22
22
  --table-td-color-text: var(--fc-tertiary);
23
23
  --table-font-size: var(--fs-200);
@@ -98,8 +98,8 @@
98
98
  // ----------------------------------------------------------------------------
99
99
  .d-table--inverted {
100
100
  --table-th-color-text: var(--fc-secondary-inverted);
101
- --table-td-color-text: var(--black-400);
102
- --table-color-border: hsla(var(--white-hsl) / 0.18);
101
+ --table-td-color-text: var(--fc-tertiary-inverted);
102
+ --table-color-border: var(--bc-inverted-default);
103
103
  }
104
104
 
105
105
  // ============================================================================
package/lib/build/less/components/tabs.less CHANGED
@@ -33,7 +33,7 @@
33
33
  left: 0;
34
34
  z-index: var(--zi-base1);
35
35
  height: var(--size-100);
36
- background-color: hsla(var(--black-900-hsl) / 0.34);
36
+ background-color: var(--bc-moderate);
37
37
  content: '';
38
38
  }
39
39
 
@@ -164,7 +164,7 @@
164
164
 
165
165
  &::after,
166
166
  &:hover::after {
167
- --tab-color-background: var(--purple-400);
167
+ --tab-color-background: var(--bc-brand);
168
168
 
169
169
  .d-tablist--no-border & {
170
170
  background-color: var(--tab-color-background);
package/lib/build/less/components/toast.less CHANGED
@@ -91,8 +91,8 @@
91
91
  // $$ DEFAULT IMPORTANT
92
92
  // ----------------------------------------------------------------------------
93
93
  .d-toast.d-toast--important {
94
- --toast-color-background: var(--bgc-contrast);
95
- --toast-color-text: var(--black-100);
94
+ --toast-color-background: var(--bgc-strong);
95
+ --toast-color-text: var(--fc-primary-inverted);
96
96
  --notice-color-icon: var(--toast-color-text);
97
97
  }
98
98
 
@@ -113,7 +113,7 @@
113
113
  --toast-color-background: var(--bgc-info);
114
114
 
115
115
  &.d-toast--important {
116
- --toast-color-background: var(--blue-400);
116
+ --toast-color-background: var(--bgc-info-strong);
117
117
  --toast-color-text: var(--fc-primary-inverted);
118
118
  }
119
119
  }
@@ -124,7 +124,7 @@
124
124
  --toast-color-background: var(--bgc-success);
125
125
 
126
126
  &.d-toast--important {
127
- --toast-color-background: var(--green-400);
127
+ --toast-color-background: var(--bgc-success-strong);
128
128
  --toast-color-text: var(--fc-primary-inverted);
129
129
  }
130
130
  }
package/lib/build/less/themes/default.less CHANGED
@@ -275,6 +275,12 @@ body {
275
275
  --@{key}: @value;
276
276
  });
277
277
 
278
+ // $$ BORDER COLORS
279
+ // ------------------------------------------------------------------------
280
+ each(@border-colors, {
281
+ --@{key}: @value;
282
+ });
283
+
278
284
  // $$ Z-INDEX
279
285
  // ------------------------------------------------------------------------
280
286
  each(@zi-vars, {
package/lib/build/less/utilities/borders.less CHANGED
@@ -23,13 +23,6 @@
23
23
  // ============================================================================
24
24
  // $ BORDERS
25
25
  // ============================================================================
26
- // $$ COLOR
27
- // ----------------------------------------------------------------------------
28
- .d-bc-transparent { border-color: transparent !important; }
29
- .d-bc-current { border-color: currentColor !important; }
30
- .d-bc-unset { border-color: unset !important; }
31
-
32
-
33
26
  // $$ DIRECTION
34
27
  // ----------------------------------------------------------------------------
35
28
  .d-ba { border: var(--size-100) solid !important; }
@@ -42,6 +35,36 @@
42
35
  .d-ba-none { border: none !important; }
43
36
  .d-ba-unset { border: unset !important; }
44
37
 
38
+ // ============================================================================
39
+ // $$ COLOR
40
+ // ----------------------------------------------------------------------------
41
+ .d-bc-transparent { border-color: transparent !important; }
42
+ .d-bc-current { border-color: currentColor !important; }
43
+ .d-bc-unset { border-color: unset !important; }
44
+
45
+ .d-bc-subtle { border-color: var(--bc-subtle) !important; }
46
+ .d-bc-default { border-color: var(--bc-default) !important; }
47
+ .d-bc-moderate { border-color: var(--bc-moderate) !important; }
48
+ .d-bc-bold { border-color: var(--bc-bold) !important; }
49
+
50
+ .d-bc-inverted-subtle { border-color: var(--bc-inverted-subtle) !important; }
51
+ .d-bc-inverted-default { border-color: var(--bc-inverted-default) !important; }
52
+ .d-bc-inverted-moderate { border-color: var(--bc-inverted-moderate) !important; }
53
+ .d-bc-inverted-bold { border-color: var(--bc-inverted-bold) !important; }
54
+
55
+ .d-bc-focus { border-color: var(--bc-focus) !important; }
56
+ .d-bc-critical { border-color: var(--bc-critical) !important; }
57
+ .d-bc-critical-subtle { border-color: var(--bc-critical-subtle) !important; }
58
+ .d-bc-critical-strong { border-color: var(--bc-critical-strong) !important; }
59
+ .d-bc-success { border-color: var(--bc-success) !important; }
60
+ .d-bc-success-subtle { border-color: var(--bc-success-subtle) !important; }
61
+ .d-bc-success-strong { border-color: var(--bc-success-strong) !important; }
62
+ .d-bc-warning { border-color: var(--bc-warning) !important; }
63
+ .d-bc-warning-subtle { border-color: var(--bc-warning-subtle) !important; }
64
+ .d-bc-warning-strong { border-color: var(--bc-warning-strong) !important; }
65
+ .d-bc-brand { border-color: var(--bc-brand) !important; }
66
+ .d-bc-brand-subtle { border-color: var(--bc-brand-subtle) !important; }
67
+ .d-bc-brand-strong { border-color: var(--bc-brand-strong) !important; }
45
68
 
46
69
  // ============================================================================
47
70
  // $ BORDER RADIUS
package/lib/build/less/utilities/colors.less CHANGED
@@ -60,15 +60,24 @@
60
60
  .d-fc-success { &:extend(.d-fc-green-400); }
61
61
  #d-internals #generate-hover-focus(d-fc-success, {.d-fc-success();});
62
62
 
63
+ .d-fc-success-strong { &:extend(.d-fc-green-500); }
64
+ #d-internals #generate-hover-focus(d-fc-success-strong, {.d-fc-success-strong();});
65
+
63
66
  .d-fc-warning { &:extend(.d-fc-gold-500); }
64
67
  #d-internals #generate-hover-focus(d-fc-warning, {.d-fc-warning();});
65
68
 
66
69
  .d-fc-error { &:extend(.d-fc-red-300); }
67
70
  #d-internals #generate-hover-focus(d-fc-error, {.d-fc-error();});
68
71
 
72
+ .d-fc-error-strong { &:extend(.d-fc-red-400); }
73
+ #d-internals #generate-hover-focus(d-fc-error-strong, {.d-fc-error-strong();});
74
+
69
75
  .d-fc-critical { &:extend(.d-fc-red-300); }
70
76
  #d-internals #generate-hover-focus(d-fc-critical, {.d-fc-critical();});
71
77
 
78
+ .d-fc-critical-strong { &:extend(.d-fc-red-400); }
79
+ #d-internals #generate-hover-focus(d-fc-critical-strong, {.d-fc-critical-strong();});
80
+
72
81
  .d-fc-current { color: currentColor !important; }
73
82
  #d-internals #generate-hover-focus(d-fc-current, {.d-fc-current();});
74
83
 
@@ -101,18 +110,26 @@
101
110
 
102
111
  .d-bgc-success { &:extend(.d-bgc-green-100); }
103
112
  #d-internals #generate-hover-focus(d-bgc-success, {.d-bgc-success();});
113
+ .d-bgc-success-subtle { background-color: var(--bgc-success-subtle) !important; }
114
+ .d-bgc-success-strong { background-color: var(--bgc-success-strong) !important; }
104
115
 
105
116
  .d-bgc-warning { &:extend(.d-bgc-gold-100); }
106
117
  #d-internals #generate-hover-focus(d-bgc-warning, {.d-bgc-warning();});
118
+ .d-bgc-warning-subtle { background-color: var(--bgc-warning-subtle) !important; }
119
+ .d-bgc-warning-strong { background-color: var(--bgc-warning-strong) !important; }
107
120
 
108
121
  .d-bgc-info { &:extend(.d-bgc-blue-100); }
109
122
  #d-internals #generate-hover-focus(d-bgc-info, {.d-bgc-info();});
123
+ .d-bgc-info-subtle { background-color: var(--bgc-info-subtle) !important; }
124
+ .d-bgc-info-strong { background-color: var(--bgc-info-strong) !important; }
110
125
 
111
126
  .d-bgc-critical,
112
127
  .d-bgc-error,
113
128
  .d-bgc-danger { &:extend(.d-bgc-red-100); }
114
129
  #d-internals #generate-hover-focus(d-bgc-error, {.d-bgc-error();});
115
130
  #d-internals #generate-hover-focus(d-bgc-danger, {.d-bgc-danger();});
131
+ .d-bgc-critical-subtle { background-color: var(--bgc-critical-subtle) !important; }
132
+ .d-bgc-critical-strong { background-color: var(--bgc-critical-strong) !important; }
116
133
 
117
134
  .d-bgc-transparent { background-color: transparent !important; background-image: none !important; }
118
135
  #d-internals #generate-hover-focus(d-bgc-transparent, {.d-bgc-transparent();});
package/lib/build/less/variables/colors.less CHANGED
@@ -80,7 +80,7 @@
80
80
  // ----------------------------------------------------------------------------
81
81
  @focus-rings: {
82
82
  color-focus-ring: hsla(var(--blue-300-hsl) / 1); // redundant for backwards compatibility
83
- focus-ring: var(--color-focus-ring);
83
+ focus-ring: var(--bc-focus);
84
84
  }
85
85
 
86
86
  // ============================================================================
@@ -90,15 +90,23 @@
90
90
  @surface-colors: {
91
91
  bgc-critical: var(--red-100);
92
92
  bgc-critical-hsl: var(--red-100-hsl);
93
+ bgc-critical-subtle: #fff2f3;
94
+ bgc-critical-strong: var(--red-400);
93
95
 
94
96
  bgc-info: var(--blue-100);
95
97
  bgc-info-hsl: var(--blue-100-hsl);
98
+ bgc-info-subtle: #f5f9fd;
99
+ bgc-info-strong: var(--blue-400);
96
100
 
97
101
  bgc-warning: var(--gold-100);
98
102
  bgc-warning-hsl: var(--gold-100-hsl);
103
+ bgc-warning-subtle: #fffae5;
104
+ bgc-warning-strong: var(--gold-500);
99
105
 
100
106
  bgc-success: var(--green-100);
101
107
  bgc-success-hsl: var(--green-100-hsl);
108
+ bgc-success-subtle: #f8fdf7;
109
+ bgc-success-strong: var(--green-400);
102
110
 
103
111
  bgc-primary: var(--white);
104
112
  bgc-primary-hsl: var(--white-hsl);
@@ -119,6 +127,34 @@
119
127
  bgc-contrast-hsl: var(--black-800-hsl);
120
128
  }
121
129
 
130
+ // ============================================================================
131
+ // $ BORDER COLORS
132
+ // Semantic border colors
133
+ // ----------------------------------------------------------------------------
134
+ @border-colors: {
135
+ bc-subtle: rgba(0, 0, 0, 0.1);
136
+ bc-default: rgba(0, 0, 0, 0.18);
137
+ bc-moderate: rgba(0, 0, 0, 0.34);
138
+ bc-bold: rgba(0, 0, 0, 0.5);
139
+ bc-inverted-subtle: rgba(255, 255, 255, 0.14);
140
+ bc-inverted-default: rgba(255, 255, 255, 0.22);
141
+ bc-inverted-moderate: rgba(255, 255, 255, 0.38);
142
+ bc-inverted-bold: rgba(255, 255, 255, 0.5);
143
+ bc-focus: var(--blue-300);
144
+ bc-critical: var(--red-300);
145
+ bc-critical-subtle: var(--red-200);
146
+ bc-critical-strong: var(--red-400);
147
+ bc-success: var(--green-400);
148
+ bc-success-subtle: var(--green-200);
149
+ bc-success-strong: var(--green-500);
150
+ bc-warning: var(--gold-400);
151
+ bc-warning-subtle: var(--gold-200);
152
+ bc-warning-strong: var(--gold-500);
153
+ bc-brand: var(--purple-400);
154
+ bc-brand-subtle: var(--purple-200);
155
+ bc-brand-strong: var(--purple-500);
156
+ }
157
+
122
158
  // ============================================================================
123
159
  // $ TYPE COLORS
124
160
  // Various type color names
@@ -137,6 +173,9 @@
137
173
  fc-secondary-inverted: var(--black-200);
138
174
  fc-secondary-inverted-hsl: var(--black-200-hsl);
139
175
 
176
+ fc-tertiary-inverted: var(--black-300);
177
+ fc-tertiary-inverted-hsl: var(--black-300-hsl);
178
+
140
179
  fc-tertiary: var(--black-600);
141
180
  fc-tertiary-hsl: var(--black-600-hsl);
142
181
 
@@ -149,13 +188,19 @@
149
188
  fc-disabled-hsl: var(--black-500-hsl);
150
189
 
151
190
  fc-critical: var(--red-300);
191
+ fc-critical-strong: var(--red-400);
152
192
  fc-critical-hsl: var(--red-300-hsl);
193
+ fc-critical-strong-hsl: var(--red-400-hsl);
153
194
 
154
195
  fc-error: var(--fc-critical);
196
+ fc-error-strong: var(--fc-critical-strong);
155
197
  fc-error-hsl: var(--fc-critical-hsl);
198
+ fc-error-strong-hsl: var(--fc-critical-strong-hsl);
156
199
 
157
200
  fc-success: var(--green-400);
201
+ fc-success-strong: var(--green-500);
158
202
  fc-success-hsl: var(--green-400-hsl);
203
+ fc-success-strong-hsl: var(--green-500-hsl);
159
204
 
160
205
  fc-warning: var(--gold-500);
161
206
  fc-warning-hsl: var(--gold-500-hsl);