@dialpad/dialtone 6.3.0 → 6.4.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 (25) hide show
  1. package/lib/build/less/components/banner.less +2 -0
  2. package/lib/build/less/components/button.less +2 -0
  3. package/lib/build/less/components/forms.less +2 -0
  4. package/lib/build/less/components/input.less +6 -2
  5. package/lib/build/less/components/modal.less +2 -0
  6. package/lib/build/less/components/notice.less +3 -0
  7. package/lib/build/less/components/radio-checkbox.less +39 -18
  8. package/lib/build/less/components/selects.less +14 -2
  9. package/lib/build/less/components/table.less +2 -0
  10. package/lib/build/less/components/toast.less +3 -0
  11. package/lib/build/less/themes/default.less +12 -0
  12. package/lib/build/less/themes/example.less +2 -2
  13. package/lib/build/less/utilities/backgrounds.less +3 -0
  14. package/lib/build/less/utilities/borders.less +4 -0
  15. package/lib/build/less/utilities/colors.less +2 -0
  16. package/lib/build/less/utilities/effects.less +2 -0
  17. package/lib/build/less/utilities/grid.less +2 -0
  18. package/lib/build/less/utilities/layout.less +4 -0
  19. package/lib/build/less/utilities/sizing.less +3 -0
  20. package/lib/build/less/utilities/spacing.less +3 -0
  21. package/lib/build/less/utilities/svg.less +2 -0
  22. package/lib/build/less/utilities/typography.less +5 -0
  23. package/lib/dist/css/dialtone.css +45 -19
  24. package/lib/dist/css/dialtone.min.css +1 -1
  25. package/package.json +5 -1
package/lib/build/less/components/banner.less CHANGED
@@ -1,3 +1,5 @@
1
+ @import (reference) "../utilities/spacing.less";
2
+
1
3
  //
2
4
  // DIALTONE
3
5
  // COMPONENTS: BANNERS
package/lib/build/less/components/button.less CHANGED
@@ -1,3 +1,5 @@
1
+ @import (reference) "../variables/icons.less";
2
+
1
3
  //
2
4
  // DIALTONE
3
5
  // COMPONENTS: BUTTONS
package/lib/build/less/components/forms.less CHANGED
@@ -1,3 +1,5 @@
1
+ @import (reference) "../variables/typography.less";
2
+
1
3
  //
2
4
  // DIALTONE
3
5
  // COMPONENTS: FORMS
package/lib/build/less/components/input.less CHANGED
@@ -1,3 +1,6 @@
1
+ @import (reference) '../variables/icons.less';
2
+ @import (reference) '../variables/sizes.less';
3
+
1
4
  //
2
5
  // DIALTONE
3
6
  // COMPONENTS: INPUTS
@@ -86,8 +89,9 @@
86
89
  // -- DISABLED / READ-ONLY
87
90
  &[disabled],
88
91
  &[read-only] {
89
- --input--bc: var(--black-500)!important;
90
- --input--bgc: var(--black-200);
92
+ --input--bc: var(--black-200)!important;
93
+ --input--bgc: var(--black-075);
94
+ --input--fc: var(--black-400);
91
95
 
92
96
  &:focus {
93
97
  box-shadow: none!important;
package/lib/build/less/components/modal.less CHANGED
@@ -1,3 +1,5 @@
1
+ @import (reference) '../utilities/spacing.less';
2
+
1
3
  //
2
4
  // DIALTONE
3
5
  // COMPONENTS: MODALS
package/lib/build/less/components/notice.less CHANGED
@@ -1,3 +1,5 @@
1
+ @import (reference) '../utilities/spacing.less';
2
+
1
3
  //
2
4
  // DIALTONE
3
5
  // COMPONENTS: NOTICES
@@ -9,6 +11,7 @@
9
11
  // ============================================================================
10
12
  // $ BASE WRAPPER
11
13
  // ----------------------------------------------------------------------------
14
+
12
15
  .d-notice {
13
16
  // Component CSS Vars
14
17
  // ------------------------------------------------------------------------
package/lib/build/less/components/radio-checkbox.less CHANGED
@@ -68,10 +68,12 @@
68
68
  align-self: flex-start;
69
69
 
70
70
  // -- DISABLED
71
- &[disabled] {
72
- --check-radio--bc: var(--black-200);
73
- --check-radio--bgc: var(--black-100);
74
- cursor: not-allowed;
71
+ &[disabled],
72
+ &--disabled {
73
+ --check-radio--color: var(--black-200);
74
+ --check-radio--bc: var(--black-200);
75
+ --check-radio--bgc: var(--black-075);
76
+ cursor: not-allowed;
75
77
  }
76
78
  }
77
79
 
@@ -91,7 +93,7 @@
91
93
  &.d-radio-group--disabled {
92
94
  .d-checkbox__label,
93
95
  .d-radio__label {
94
- color: var(--black-400);
96
+ color: var(--black-200);
95
97
  cursor: not-allowed;
96
98
  }
97
99
  }
@@ -148,12 +150,6 @@
148
150
  background-repeat: no-repeat;
149
151
  background-size: contain;
150
152
 
151
- // Disabled
152
- &[disabled] {
153
- --check-radio--bc: var(--black-400);
154
- --check-radio--bgc: var(--black-200);
155
- }
156
-
157
153
  &:focus,
158
154
  &:checked:focus {
159
155
  border-radius: var(--br2);
@@ -165,22 +161,41 @@
165
161
 
166
162
  // Disabled
167
163
  &[disabled] {
168
- --check-radio--bgc: var(--black-200);
164
+ --check-radio--bgc: var(--black-075);
169
165
  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");
170
166
  }
171
167
  }
172
168
 
169
+ &--disabled:checked {
170
+ --check-radio--bgc: var(--black-075);
171
+ 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");
172
+ }
173
+
173
174
  &--indeterminate,
174
175
  &:indeterminate {
175
176
  --check-radio--bgc: var(--check-radio--color);
176
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='M19 13H5v-2h14v2z' fill='%23fff'/%3E%3C/svg%3E");
177
178
 
178
179
  &[disabled] {
179
- --check-radio--bgc: var(--black-200);
180
+ --check-radio--bgc: var(--black-075);
180
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='hsl(240, 10%, 51%)'/%3E%3C/svg%3E");
181
182
  }
182
183
  }
183
184
 
185
+ &--indeterminate&--disabled,
186
+ &:indeterminate&--disabled {
187
+ --check-radio--bgc: var(--black-075);
188
+ 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");
189
+ }
190
+
191
+ // Disabled
192
+ &[disabled],
193
+ &--disabled {
194
+ --check-radio--color: var(--black-200);
195
+ --check-radio--bc: var(--black-200);
196
+ --check-radio--bgc: var(--black-075);
197
+ }
198
+
184
199
  }
185
200
  }
186
201
 
@@ -223,9 +238,11 @@
223
238
  border-radius: var(--br-circle);
224
239
 
225
240
  // Disabled
226
- &[disabled] {
227
- --check-radio--bc: var(--black-400);
228
- --check-radio--bgc: var(--black-200);
241
+ &[disabled],
242
+ &--disabled {
243
+ --check-radio--color: var(--black-200);
244
+ --check-radio--bc: var(--black-200);
245
+ --check-radio--bgc: var(--black-075);
229
246
  }
230
247
 
231
248
  &:focus,
@@ -239,9 +256,13 @@
239
256
 
240
257
  // Disabled
241
258
  &[disabled] {
242
- --check-radio--bgc: var(--black-400);
259
+ --check-radio--bgc: var(--black-200);
243
260
  }
244
261
  }
262
+
263
+ &--disabled:checked {
264
+ --check-radio--bgc: var(--black-200);
265
+ }
245
266
  }
246
267
  }
247
268
 
@@ -275,4 +296,4 @@
275
296
  &:checked:focus {
276
297
  box-shadow: var(--bs-focus-ring-success), inset 0 0 0 var(--su2) var(--white);
277
298
  }
278
- }
299
+ }
package/lib/build/less/components/selects.less CHANGED
@@ -1,3 +1,7 @@
1
+ @import (reference) '../variables/sizes.less';
2
+ @import (reference) '../variables/icons.less';
3
+ @import (reference) 'input.less';
4
+
1
5
  //
2
6
  // DIALTONE
3
7
  // COMPONENTS: SELECT MENUS
@@ -119,8 +123,9 @@
119
123
  box-shadow: var(--bs-focus-ring);
120
124
  }
121
125
  &:disabled {
122
- background: var(--black-200);
123
- border: 1px solid var(--black-500);
126
+ color: var(--black-400);
127
+ background: var(--black-075);
128
+ border: 1px solid var(--black-200);
124
129
  }
125
130
  &::-moz-focus-inner {
126
131
  outline: none !important;
@@ -162,3 +167,10 @@
162
167
  box-shadow: var(--bs-focus-ring-warning);
163
168
  }
164
169
  }
170
+
171
+ .d-select--disabled {
172
+ &:before,
173
+ &:after {
174
+ border-color: var(--black-400) transparent;
175
+ }
176
+ }
package/lib/build/less/components/table.less CHANGED
@@ -1,3 +1,5 @@
1
+ @import (reference) '../utilities/typography.less';
2
+
1
3
  //
2
4
  // DIALTONE
3
5
  // COMPONENTS: TABLES
package/lib/build/less/components/toast.less CHANGED
@@ -1,3 +1,6 @@
1
+ @import (reference) "../utilities/spacing.less";
2
+ @import (reference) "../utilities/effects.less";
3
+
1
4
  //
2
5
  // DIALTONE
3
6
  // COMPONENTS: TOAST
package/lib/build/less/themes/default.less CHANGED
@@ -1,3 +1,13 @@
1
+ @import (reference) "../variables/colors.less";
2
+ @import (reference) "../variables/layout.less";
3
+ @import (reference) "../variables/borders.less";
4
+ @import (reference) "../variables/visual-styles.less";
5
+ @import (reference) "../variables/icons.less";
6
+ @import (reference) "../variables/sizes.less";
7
+ @import (reference) "../variables/typography.less";
8
+ @import (reference) "../utilities/internals.less";
9
+ @import (reference) "../utilities/grid.less";
10
+
1
11
  //
2
12
  // DIALTONE
3
13
  // THEME VARIABLES
@@ -21,6 +31,8 @@
21
31
  // ============================================================================
22
32
  // $ SET VARIABLES
23
33
  // ----------------------------------------------------------------------------
34
+
35
+
24
36
  @theme-vars: {
25
37
  primary-color-h: var(--purple-500-h);
26
38
  primary-color-s: var(--purple-500-s);
package/lib/build/less/themes/example.less CHANGED
@@ -33,9 +33,9 @@
33
33
  //
34
34
  // @nav__background-color: This sets the navigation background color.
35
35
  // ----------------------------------------------------------------------------
36
- @primary-color: @navy;
36
+ @primary-color: @purple-500;
37
37
  @primary-color--hover: darken(@primary-color, 10%);
38
- @nav__background-color: @ash;
38
+ @nav__background-color: @black-400;
39
39
 
40
40
  // \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\
41
41
  // ----------------------------------------------------------------------------
package/lib/build/less/utilities/backgrounds.less CHANGED
@@ -1,3 +1,6 @@
1
+ @import (reference) "../variables/colors.less";
2
+ @import (reference) "../utilities/internals.less";
3
+
1
4
  //
2
5
  // DIALTONE
3
6
  // UTILITIES: BACKGROUNDS
package/lib/build/less/utilities/borders.less CHANGED
@@ -1,3 +1,7 @@
1
+ @import (reference) "../variables/spacing.less";
2
+ @import (reference) "../utilities/internals.less";
3
+ @import (reference) "../variables/borders.less";
4
+
1
5
  //
2
6
  // DIALTONE
3
7
  // UTILITIES: BORDERS
package/lib/build/less/utilities/colors.less CHANGED
@@ -1,3 +1,5 @@
1
+ @import (reference) "../utilities/internals.less";
2
+
1
3
  //
2
4
  // DIALTONE
3
5
  // UTILITIES: COLORS
package/lib/build/less/utilities/effects.less CHANGED
@@ -1,3 +1,5 @@
1
+ @import (reference) "../variables/spacing.less";
2
+
1
3
  //
2
4
  // DIALTONE
3
5
  // UTILITIES: EFFECTS
package/lib/build/less/utilities/grid.less CHANGED
@@ -1,3 +1,5 @@
1
+ @import (reference) "../utilities/spacing.less";
2
+
1
3
  //
2
4
  // DIALTONE
3
5
  // UTILITIES: GRID
package/lib/build/less/utilities/layout.less CHANGED
@@ -1,3 +1,7 @@
1
+ @import (reference) "../variables/spacing.less";
2
+ @import (reference) "../utilities/internals.less";
3
+ @import (reference) "../utilities/responsive.less";
4
+
1
5
  //
2
6
  // DIALTONE
3
7
  // UTILITIES: LAYOUT
package/lib/build/less/utilities/sizing.less CHANGED
@@ -1,3 +1,6 @@
1
+ @import (reference) "../variables/layout.less";
2
+ @import (reference) "../utilities/internals.less";
3
+
1
4
  //
2
5
  // DIALTONE
3
6
  // UTILITIES: SIZING
package/lib/build/less/utilities/spacing.less CHANGED
@@ -1,3 +1,6 @@
1
+ @import (reference) "../variables/spacing.less";
2
+ @import (reference) "internals.less";
3
+
1
4
  //
2
5
  // DIALTONE
3
6
  // UTILITIES: SPACING
package/lib/build/less/utilities/svg.less CHANGED
@@ -1,3 +1,5 @@
1
+ @import (reference) "../variables/icons.less";
2
+
1
3
  //
2
4
  // DIALTONE
3
5
  // UTILITIES: SVG
package/lib/build/less/utilities/typography.less CHANGED
@@ -1,3 +1,8 @@
1
+ @import (reference) '../variables/typography.less';
2
+ @import (reference) '../variables/spacing.less';
3
+ @import (reference) '../utilities/internals.less';
4
+ @import (reference) '../utilities/grid.less';
5
+
1
6
  //
2
7
  // DIALTONE
3
8
  // UTILTIES: TYPOGRAPHY
package/lib/dist/css/dialtone.css CHANGED
@@ -1136,8 +1136,9 @@ legend .d-label {
1136
1136
  .d-textarea[disabled],
1137
1137
  .d-input[read-only],
1138
1138
  .d-textarea[read-only] {
1139
- --input--bc: var(--black-500)!important;
1140
- --input--bgc: var(--black-200);
1139
+ --input--bc: var(--black-200)!important;
1140
+ --input--bgc: var(--black-075);
1141
+ --input--fc: var(--black-400);
1141
1142
  }
1142
1143
  .d-input[disabled]:focus,
1143
1144
  .d-textarea[disabled]:focus,
@@ -1973,9 +1974,12 @@ legend .d-label {
1973
1974
  }
1974
1975
  }
1975
1976
  .d-checkbox[disabled],
1976
- .d-radio[disabled] {
1977
+ .d-radio[disabled],
1978
+ .d-checkbox--disabled,
1979
+ .d-radio--disabled {
1980
+ --check-radio--color: var(--black-200);
1977
1981
  --check-radio--bc: var(--black-200);
1978
- --check-radio--bgc: var(--black-100);
1982
+ --check-radio--bgc: var(--black-075);
1979
1983
  cursor: not-allowed;
1980
1984
  }
1981
1985
  .d-checkbox-group,
@@ -1993,7 +1997,7 @@ legend .d-label {
1993
1997
  .d-radio-group.d-checkbox-group--disabled .d-radio__label,
1994
1998
  .d-checkbox-group.d-radio-group--disabled .d-radio__label,
1995
1999
  .d-radio-group.d-radio-group--disabled .d-radio__label {
1996
- color: var(--black-400);
2000
+ color: var(--black-200);
1997
2001
  cursor: not-allowed;
1998
2002
  }
1999
2003
  .d-checkbox__input,
@@ -2027,10 +2031,6 @@ legend .d-label {
2027
2031
  background-repeat: no-repeat;
2028
2032
  background-size: contain;
2029
2033
  }
2030
- .d-checkbox[disabled] {
2031
- --check-radio--bc: var(--black-400);
2032
- --check-radio--bgc: var(--black-200);
2033
- }
2034
2034
  .d-checkbox:focus,
2035
2035
  .d-checkbox:checked:focus {
2036
2036
  border-radius: var(--br2);
@@ -2040,7 +2040,11 @@ legend .d-label {
2040
2040
  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");
2041
2041
  }
2042
2042
  .d-checkbox:checked[disabled] {
2043
- --check-radio--bgc: var(--black-200);
2043
+ --check-radio--bgc: var(--black-075);
2044
+ 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");
2045
+ }
2046
+ .d-checkbox--disabled:checked {
2047
+ --check-radio--bgc: var(--black-075);
2044
2048
  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");
2045
2049
  }
2046
2050
  .d-checkbox--indeterminate,
@@ -2050,9 +2054,20 @@ legend .d-label {
2050
2054
  }
2051
2055
  .d-checkbox--indeterminate[disabled],
2052
2056
  .d-checkbox:indeterminate[disabled] {
2053
- --check-radio--bgc: var(--black-200);
2057
+ --check-radio--bgc: var(--black-075);
2058
+ 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");
2059
+ }
2060
+ .d-checkbox--indeterminate.d-checkbox--disabled,
2061
+ .d-checkbox:indeterminate.d-checkbox--disabled {
2062
+ --check-radio--bgc: var(--black-075);
2054
2063
  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");
2055
2064
  }
2065
+ .d-checkbox[disabled],
2066
+ .d-checkbox--disabled {
2067
+ --check-radio--color: var(--black-200);
2068
+ --check-radio--bc: var(--black-200);
2069
+ --check-radio--bgc: var(--black-075);
2070
+ }
2056
2071
  }
2057
2072
  .d-checkbox--warning {
2058
2073
  --check-radio--color: var(--warning-color);
@@ -2082,9 +2097,11 @@ legend .d-label {
2082
2097
  .d-radio {
2083
2098
  border-radius: var(--br-circle);
2084
2099
  }
2085
- .d-radio[disabled] {
2086
- --check-radio--bc: var(--black-400);
2087
- --check-radio--bgc: var(--black-200);
2100
+ .d-radio[disabled],
2101
+ .d-radio--disabled {
2102
+ --check-radio--color: var(--black-200);
2103
+ --check-radio--bc: var(--black-200);
2104
+ --check-radio--bgc: var(--black-075);
2088
2105
  }
2089
2106
  .d-radio:focus,
2090
2107
  .d-radio:checked:focus {
@@ -2095,7 +2112,10 @@ legend .d-label {
2095
2112
  box-shadow: inset 0 0 0 var(--su2) var(--white);
2096
2113
  }
2097
2114
  .d-radio:checked[disabled] {
2098
- --check-radio--bgc: var(--black-400);
2115
+ --check-radio--bgc: var(--black-200);
2116
+ }
2117
+ .d-radio--disabled:checked {
2118
+ --check-radio--bgc: var(--black-200);
2099
2119
  }
2100
2120
  }
2101
2121
  .d-radio--warning {
@@ -2270,8 +2290,9 @@ legend .d-label {
2270
2290
  }
2271
2291
  .d-select__input[disabled],
2272
2292
  .d-select__input[read-only] {
2273
- --input--bc: var(--black-500)!important;
2274
- --input--bgc: var(--black-200);
2293
+ --input--bc: var(--black-200)!important;
2294
+ --input--bgc: var(--black-075);
2295
+ --input--fc: var(--black-400);
2275
2296
  }
2276
2297
  .d-select__input[disabled]:focus,
2277
2298
  .d-select__input[read-only]:focus {
@@ -2313,8 +2334,9 @@ legend .d-label {
2313
2334
  box-shadow: var(--bs-focus-ring);
2314
2335
  }
2315
2336
  .d-select__input:disabled {
2316
- border: 1px solid var(--black-500);
2317
- background: var(--black-200);
2337
+ border: 1px solid var(--black-200);
2338
+ background: var(--black-075);
2339
+ color: var(--black-400);
2318
2340
  }
2319
2341
  .d-select__input::-moz-focus-inner {
2320
2342
  outline: none !important;
@@ -2347,6 +2369,10 @@ legend .d-label {
2347
2369
  --select--bc: var(--warning-color);
2348
2370
  box-shadow: var(--bs-focus-ring-warning);
2349
2371
  }
2372
+ .d-select--disabled:before,
2373
+ .d-select--disabled:after {
2374
+ border-color: var(--black-400) transparent;
2375
+ }
2350
2376
  .d-table {
2351
2377
  --table--th: var(--black-700);
2352
2378
  --table--td: var(--black-600);