@dialpad/dialtone 7.26.1 → 7.27.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 (4) hide show
  1. package/lib/build/less/components/avatar.less +33 -17
  2. package/lib/dist/css/dialtone.css +56 -10
  3. package/lib/dist/css/dialtone.min.css +1 -1
  4. package/package.json +2 -2
package/lib/build/less/components/avatar.less CHANGED
@@ -8,6 +8,7 @@
8
8
  //
9
9
  // TABLE OF CONTENTS
10
10
  // • BASE STYLE
11
+ // • COLOR VARIANTS
11
12
  // • CHILDREN
12
13
  // • SIZES
13
14
  // • VARIANTS
@@ -18,19 +19,14 @@
18
19
  .d-avatar {
19
20
  // Component CSS Vars
20
21
  // ------------------------------------------------------------------------
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
- );
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;
34
30
  --avatar-size-shape: var(--size-600);
35
31
  --avatar-size-image: 100%;
36
32
  --avatar-size-text: var(--fs-200);
@@ -42,6 +38,30 @@
42
38
  display: flex;
43
39
  color: var(--avatar-color-text);
44
40
 
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
+
45
65
  // -- CHILDREN
46
66
  // ------------------------------------------------------------------------
47
67
 
@@ -55,10 +75,6 @@
55
75
  background-color: var(--avatar-color-background);
56
76
  background-image: var(--avatar-gradient);
57
77
  border-radius: var(--br-pill);
58
-
59
- .d-avatar--no-gradient & {
60
- background-image: none;
61
- }
62
78
  }
63
79
 
64
80
  &__image {
package/lib/dist/css/dialtone.css CHANGED
@@ -1158,13 +1158,8 @@ body {
1158
1158
  --size-1200-negative-128: calc((12.8rem * 256) * -1);
1159
1159
  }
1160
1160
  .d-avatar {
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);
1161
+ --avatar-color-background: #e0e0e0;
1162
+ --avatar-color-text: #000;
1168
1163
  --avatar-size-shape: var(--size-600);
1169
1164
  --avatar-size-image: 100%;
1170
1165
  --avatar-size-text: var(--fs-200);
@@ -1175,6 +1170,60 @@ body {
1175
1170
  display: flex;
1176
1171
  color: var(--avatar-color-text);
1177
1172
  }
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
+ }
1178
1227
  .d-avatar__canvas {
1179
1228
  display: flex;
1180
1229
  align-items: center;
@@ -1186,9 +1235,6 @@ body {
1186
1235
  background-image: var(--avatar-gradient);
1187
1236
  border-radius: var(--br-pill);
1188
1237
  }
1189
- .d-avatar--no-gradient .d-avatar__canvas {
1190
- background-image: none;
1191
- }
1192
1238
  .d-avatar__image {
1193
1239
  width: var(--avatar-size-image);
1194
1240
  height: var(--avatar-size-image);