@dialpad/dialtone 7.26.1-beta.1 → 7.26.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 (5) hide show
  1. package/lib/build/less/components/avatar.less +17 -33
  2. package/lib/build/less/components/button.less +1 -0
  3. package/lib/dist/css/dialtone.css +11 -56
  4. package/lib/dist/css/dialtone.min.css +1 -1
  5. package/package.json +3 -3
package/lib/build/less/components/avatar.less CHANGED
@@ -8,7 +8,6 @@
8
8
  //
9
9
  // TABLE OF CONTENTS
10
10
  // • BASE STYLE
11
- // • COLOR VARIANTS
12
11
  // • CHILDREN
13
12
  // • SIZES
14
13
  // • VARIANTS
@@ -19,14 +18,19 @@
19
18
  .d-avatar {
20
19
  // Component CSS Vars
21
20
  // ------------------------------------------------------------------------
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;
21
+ --avatar-color-background: var(--bgc-moderate);
22
+ --avatar-color-text: var(--fc-secondary);
23
+ --avatar-gradient-angle: -180deg;
24
+ --avatar-gradient-stop-1: var(--blue-200);
25
+ --avatar-gradient-stop-2: var(--purple-100);
26
+ --avatar-gradient-stop-3: var(--gold-100);
27
+ --avatar-gradient:
28
+ conic-gradient(
29
+ from var(--avatar-gradient-angle) at 50% 50%,
30
+ var(--avatar-gradient-stop-1) 0deg,
31
+ var(--avatar-gradient-stop-2) 180deg,
32
+ var(--avatar-gradient-stop-3) 360deg
33
+ );
30
34
  --avatar-size-shape: var(--size-600);
31
35
  --avatar-size-image: 100%;
32
36
  --avatar-size-text: var(--fs-200);
@@ -38,30 +42,6 @@
38
42
  display: flex;
39
43
  color: var(--avatar-color-text);
40
44
 
41
- // -- COLOR VARIANTS
42
- // ------------------------------------------------------------------------
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; }
64
-
65
45
  // -- CHILDREN
66
46
  // ------------------------------------------------------------------------
67
47
 
@@ -75,6 +55,10 @@
75
55
  background-color: var(--avatar-color-background);
76
56
  background-image: var(--avatar-gradient);
77
57
  border-radius: var(--br-pill);
58
+
59
+ .d-avatar--no-gradient & {
60
+ background-image: none;
61
+ }
78
62
  }
79
63
 
80
64
  &__image {
package/lib/build/less/components/button.less CHANGED
@@ -186,6 +186,7 @@
186
186
  // ----------------------------------------------------------------------------
187
187
  .d-btn__label {
188
188
  display: inline-flex;
189
+ flex: 1 auto;
189
190
  align-items: center;
190
191
  justify-content: center;
191
192
  // background-color: rgba(0,0,0,.5);
package/lib/dist/css/dialtone.css CHANGED
@@ -1158,8 +1158,13 @@ body {
1158
1158
  --size-1200-negative-128: calc((12.8rem * 256) * -1);
1159
1159
  }
1160
1160
  .d-avatar {
1161
- --avatar-color-background: #e0e0e0;
1162
- --avatar-color-text: #000;
1161
+ --avatar-color-background: var(--bgc-moderate);
1162
+ --avatar-color-text: var(--fc-secondary);
1163
+ --avatar-gradient-angle: -180deg;
1164
+ --avatar-gradient-stop-1: var(--blue-200);
1165
+ --avatar-gradient-stop-2: var(--purple-100);
1166
+ --avatar-gradient-stop-3: var(--gold-100);
1167
+ --avatar-gradient: conic-gradient(from var(--avatar-gradient-angle) at 50% 50%, var(--avatar-gradient-stop-1) 0deg, var(--avatar-gradient-stop-2) 180deg, var(--avatar-gradient-stop-3) 360deg);
1163
1168
  --avatar-size-shape: var(--size-600);
1164
1169
  --avatar-size-image: 100%;
1165
1170
  --avatar-size-text: var(--fs-200);
@@ -1170,60 +1175,6 @@ body {
1170
1175
  display: flex;
1171
1176
  color: var(--avatar-color-text);
1172
1177
  }
1173
- .d-avatar--color-100 {
1174
- --avatar-color-background: #1aa340;
1175
- }
1176
- .d-avatar--color-200 {
1177
- --avatar-color-background: #aaff83;
1178
- }
1179
- .d-avatar--color-300 {
1180
- --avatar-color-background: #adea88;
1181
- }
1182
- .d-avatar--color-400 {
1183
- --avatar-color-background: #77eca6;
1184
- }
1185
- .d-avatar--color-500 {
1186
- --avatar-color-background: #7aedbd;
1187
- }
1188
- .d-avatar--color-600 {
1189
- --avatar-color-background: #77deec;
1190
- }
1191
- .d-avatar--color-700 {
1192
- --avatar-color-background: #5ed8ff;
1193
- }
1194
- .d-avatar--color-800 {
1195
- --avatar-color-background: #99e7ff;
1196
- }
1197
- .d-avatar--color-900 {
1198
- --avatar-color-background: #51a0fe;
1199
- }
1200
- .d-avatar--color-1000 {
1201
- --avatar-color-background: #b6cfff;
1202
- }
1203
- .d-avatar--color-1100 {
1204
- --avatar-color-background: #f1b7e8;
1205
- }
1206
- .d-avatar--color-1200 {
1207
- --avatar-color-background: #ec77bd;
1208
- }
1209
- .d-avatar--color-1300 {
1210
- --avatar-color-background: #ff67be;
1211
- }
1212
- .d-avatar--color-1400 {
1213
- --avatar-color-background: #f87e7e;
1214
- }
1215
- .d-avatar--color-1500 {
1216
- --avatar-color-background: #eca877;
1217
- }
1218
- .d-avatar--color-1600 {
1219
- --avatar-color-background: #ffbe41;
1220
- }
1221
- .d-avatar--color-1700 {
1222
- --avatar-color-background: #ffd646;
1223
- }
1224
- .d-avatar--color-1800 {
1225
- --avatar-color-background: #f1dab7;
1226
- }
1227
1178
  .d-avatar__canvas {
1228
1179
  display: flex;
1229
1180
  align-items: center;
@@ -1235,6 +1186,9 @@ body {
1235
1186
  background-image: var(--avatar-gradient);
1236
1187
  border-radius: var(--br-pill);
1237
1188
  }
1189
+ .d-avatar--no-gradient .d-avatar__canvas {
1190
+ background-image: none;
1191
+ }
1238
1192
  .d-avatar__image {
1239
1193
  width: var(--avatar-size-image);
1240
1194
  height: var(--avatar-size-image);
@@ -1732,6 +1686,7 @@ body {
1732
1686
  }
1733
1687
  .d-btn__label {
1734
1688
  display: inline-flex;
1689
+ flex: 1 auto;
1735
1690
  align-items: center;
1736
1691
  justify-content: center;
1737
1692
  }