@fluentui/react-avatar 9.3.3 → 9.3.5
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.
- package/CHANGELOG.json +73 -1
- package/CHANGELOG.md +27 -2
- package/lib/components/Avatar/useAvatarStyles.js +16 -70
- package/lib/components/Avatar/useAvatarStyles.js.map +1 -1
- package/lib-amd/components/Avatar/useAvatarStyles.js +50 -15
- package/lib-amd/components/Avatar/useAvatarStyles.js.map +1 -1
- package/lib-commonjs/components/Avatar/useAvatarStyles.js +15 -69
- package/lib-commonjs/components/Avatar/useAvatarStyles.js.map +1 -1
- package/package.json +7 -7
package/CHANGELOG.json
CHANGED
|
@@ -2,7 +2,79 @@
|
|
|
2
2
|
"name": "@fluentui/react-avatar",
|
|
3
3
|
"entries": [
|
|
4
4
|
{
|
|
5
|
-
"date": "
|
|
5
|
+
"date": "Mon, 13 Feb 2023 23:40:49 GMT",
|
|
6
|
+
"tag": "@fluentui/react-avatar_v9.3.5",
|
|
7
|
+
"version": "9.3.5",
|
|
8
|
+
"comments": {
|
|
9
|
+
"patch": [
|
|
10
|
+
{
|
|
11
|
+
"author": "seanmonahan@microsoft.com",
|
|
12
|
+
"package": "@fluentui/react-avatar",
|
|
13
|
+
"commit": "70a8c39f33f5b5b9ca425ccb00c5c5eec8d7bb0d",
|
|
14
|
+
"comment": "chore: update Avatar to use makeResetStyles"
|
|
15
|
+
},
|
|
16
|
+
{
|
|
17
|
+
"author": "beachball",
|
|
18
|
+
"package": "@fluentui/react-avatar",
|
|
19
|
+
"comment": "Bump @fluentui/react-badge to v9.0.25",
|
|
20
|
+
"commit": "29e62b13706c2845b21d665d43cdacf1ef1b1513"
|
|
21
|
+
},
|
|
22
|
+
{
|
|
23
|
+
"author": "beachball",
|
|
24
|
+
"package": "@fluentui/react-avatar",
|
|
25
|
+
"comment": "Bump @fluentui/react-context-selector to v9.1.9",
|
|
26
|
+
"commit": "29e62b13706c2845b21d665d43cdacf1ef1b1513"
|
|
27
|
+
},
|
|
28
|
+
{
|
|
29
|
+
"author": "beachball",
|
|
30
|
+
"package": "@fluentui/react-avatar",
|
|
31
|
+
"comment": "Bump @fluentui/react-popover to v9.4.9",
|
|
32
|
+
"commit": "29e62b13706c2845b21d665d43cdacf1ef1b1513"
|
|
33
|
+
},
|
|
34
|
+
{
|
|
35
|
+
"author": "beachball",
|
|
36
|
+
"package": "@fluentui/react-avatar",
|
|
37
|
+
"comment": "Bump @fluentui/react-tabster to v9.5.2",
|
|
38
|
+
"commit": "29e62b13706c2845b21d665d43cdacf1ef1b1513"
|
|
39
|
+
},
|
|
40
|
+
{
|
|
41
|
+
"author": "beachball",
|
|
42
|
+
"package": "@fluentui/react-avatar",
|
|
43
|
+
"comment": "Bump @fluentui/react-tooltip to v9.1.16",
|
|
44
|
+
"commit": "29e62b13706c2845b21d665d43cdacf1ef1b1513"
|
|
45
|
+
},
|
|
46
|
+
{
|
|
47
|
+
"author": "beachball",
|
|
48
|
+
"package": "@fluentui/react-avatar",
|
|
49
|
+
"comment": "Bump @fluentui/react-utilities to v9.5.3",
|
|
50
|
+
"commit": "29e62b13706c2845b21d665d43cdacf1ef1b1513"
|
|
51
|
+
}
|
|
52
|
+
]
|
|
53
|
+
}
|
|
54
|
+
},
|
|
55
|
+
{
|
|
56
|
+
"date": "Mon, 13 Feb 2023 09:35:48 GMT",
|
|
57
|
+
"tag": "@fluentui/react-avatar_v9.3.4",
|
|
58
|
+
"version": "9.3.4",
|
|
59
|
+
"comments": {
|
|
60
|
+
"patch": [
|
|
61
|
+
{
|
|
62
|
+
"author": "beachball",
|
|
63
|
+
"package": "@fluentui/react-avatar",
|
|
64
|
+
"comment": "Bump @fluentui/react-popover to v9.4.8",
|
|
65
|
+
"commit": "b24aed22677cb12a74f185feee89edefd1601b9a"
|
|
66
|
+
},
|
|
67
|
+
{
|
|
68
|
+
"author": "beachball",
|
|
69
|
+
"package": "@fluentui/react-avatar",
|
|
70
|
+
"comment": "Bump @fluentui/react-tooltip to v9.1.15",
|
|
71
|
+
"commit": "b24aed22677cb12a74f185feee89edefd1601b9a"
|
|
72
|
+
}
|
|
73
|
+
]
|
|
74
|
+
}
|
|
75
|
+
},
|
|
76
|
+
{
|
|
77
|
+
"date": "Fri, 10 Feb 2023 08:49:58 GMT",
|
|
6
78
|
"tag": "@fluentui/react-avatar_v9.3.3",
|
|
7
79
|
"version": "9.3.3",
|
|
8
80
|
"comments": {
|
package/CHANGELOG.md
CHANGED
|
@@ -1,12 +1,37 @@
|
|
|
1
1
|
# Change Log - @fluentui/react-avatar
|
|
2
2
|
|
|
3
|
-
This log was last generated on
|
|
3
|
+
This log was last generated on Mon, 13 Feb 2023 23:40:49 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
+
## [9.3.5](https://github.com/microsoft/fluentui/tree/@fluentui/react-avatar_v9.3.5)
|
|
8
|
+
|
|
9
|
+
Mon, 13 Feb 2023 23:40:49 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-avatar_v9.3.4..@fluentui/react-avatar_v9.3.5)
|
|
11
|
+
|
|
12
|
+
### Patches
|
|
13
|
+
|
|
14
|
+
- chore: update Avatar to use makeResetStyles ([PR #26811](https://github.com/microsoft/fluentui/pull/26811) by seanmonahan@microsoft.com)
|
|
15
|
+
- Bump @fluentui/react-badge to v9.0.25 ([PR #26814](https://github.com/microsoft/fluentui/pull/26814) by beachball)
|
|
16
|
+
- Bump @fluentui/react-context-selector to v9.1.9 ([PR #26814](https://github.com/microsoft/fluentui/pull/26814) by beachball)
|
|
17
|
+
- Bump @fluentui/react-popover to v9.4.9 ([PR #26814](https://github.com/microsoft/fluentui/pull/26814) by beachball)
|
|
18
|
+
- Bump @fluentui/react-tabster to v9.5.2 ([PR #26814](https://github.com/microsoft/fluentui/pull/26814) by beachball)
|
|
19
|
+
- Bump @fluentui/react-tooltip to v9.1.16 ([PR #26814](https://github.com/microsoft/fluentui/pull/26814) by beachball)
|
|
20
|
+
- Bump @fluentui/react-utilities to v9.5.3 ([PR #26814](https://github.com/microsoft/fluentui/pull/26814) by beachball)
|
|
21
|
+
|
|
22
|
+
## [9.3.4](https://github.com/microsoft/fluentui/tree/@fluentui/react-avatar_v9.3.4)
|
|
23
|
+
|
|
24
|
+
Mon, 13 Feb 2023 09:35:48 GMT
|
|
25
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-avatar_v9.3.3..@fluentui/react-avatar_v9.3.4)
|
|
26
|
+
|
|
27
|
+
### Patches
|
|
28
|
+
|
|
29
|
+
- Bump @fluentui/react-popover to v9.4.8 ([PR #26800](https://github.com/microsoft/fluentui/pull/26800) by beachball)
|
|
30
|
+
- Bump @fluentui/react-tooltip to v9.1.15 ([PR #26800](https://github.com/microsoft/fluentui/pull/26800) by beachball)
|
|
31
|
+
|
|
7
32
|
## [9.3.3](https://github.com/microsoft/fluentui/tree/@fluentui/react-avatar_v9.3.3)
|
|
8
33
|
|
|
9
|
-
Fri, 10 Feb 2023 08:
|
|
34
|
+
Fri, 10 Feb 2023 08:49:58 GMT
|
|
10
35
|
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-avatar_v9.3.2..@fluentui/react-avatar_v9.3.3)
|
|
11
36
|
|
|
12
37
|
### Patches
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { __resetStyles, __styles, mergeClasses, shorthands } from '@griffel/react';
|
|
2
2
|
import { tokens } from '@fluentui/react-theme';
|
|
3
3
|
export const avatarClassNames = {
|
|
4
4
|
root: 'fui-Avatar',
|
|
@@ -18,36 +18,23 @@ const animations = {
|
|
|
18
18
|
normalEase: tokens.curveEasyEase,
|
|
19
19
|
nullEasing: tokens.curveLinear
|
|
20
20
|
};
|
|
21
|
+
const useRootClassName = /*#__PURE__*/__resetStyles("rz243wu", null, [".rz243wu{display:inline-block;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;position:relative;vertical-align:middle;border-radius:var(--borderRadiusCircular);font-family:var(--fontFamilyBase);font-weight:var(--fontWeightSemibold);font-size:var(--fontSizeBase300);width:32px;height:32px;}"]);
|
|
22
|
+
const useImageClassName = /*#__PURE__*/__resetStyles("r136dc0n", "rjly0nl", [".r136dc0n{position:absolute;top:0;left:0;width:100%;height:100%;border-radius:inherit;object-fit:cover;vertical-align:top;}", ".rjly0nl{position:absolute;top:0;right:0;width:100%;height:100%;border-radius:inherit;object-fit:cover;vertical-align:top;}"]);
|
|
23
|
+
const useIconInitialsClassName = /*#__PURE__*/__resetStyles("rip04v", "r31uzil", [".rip04v{position:absolute;box-sizing:border-box;top:0;left:0;width:100%;height:100%;line-height:1;border:var(--strokeWidthThin) solid var(--colorTransparentStroke);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;vertical-align:center;text-align:center;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;border-radius:inherit;}", ".r31uzil{position:absolute;box-sizing:border-box;top:0;right:0;width:100%;height:100%;line-height:1;border:var(--strokeWidthThin) solid var(--colorTransparentStroke);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;vertical-align:center;text-align:center;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;border-radius:inherit;}"]);
|
|
21
24
|
const useStyles = /*#__PURE__*/__styles({
|
|
22
|
-
root: {
|
|
23
|
-
mc9l5x: "f14t3ns0",
|
|
24
|
-
Bnnss6s: "fi64zpg",
|
|
25
|
-
qhf8xq: "f10pi13n",
|
|
26
|
-
ha4doy: "fmrv4ls",
|
|
27
|
-
Bbmb7ep: ["f8fbkgy", "f1nfllo7"],
|
|
28
|
-
Beyfa6y: ["f1nfllo7", "f8fbkgy"],
|
|
29
|
-
B7oj6ja: ["f1djnp8u", "f1s8kh49"],
|
|
30
|
-
Btl43ni: ["f1s8kh49", "f1djnp8u"],
|
|
31
|
-
Bahqtrf: "fk6fouc",
|
|
32
|
-
Bhrd7zp: "fl43uef"
|
|
33
|
-
},
|
|
34
25
|
textCaption2Strong: {
|
|
35
|
-
Be2twd7: "f13mqy1h"
|
|
36
|
-
Bhrd7zp: "fl43uef"
|
|
26
|
+
Be2twd7: "f13mqy1h"
|
|
37
27
|
},
|
|
38
28
|
textCaption1Strong: {
|
|
39
29
|
Be2twd7: "fy9rknc"
|
|
40
30
|
},
|
|
41
|
-
textBody1Strong: {
|
|
42
|
-
Be2twd7: "fkhj508"
|
|
43
|
-
},
|
|
44
31
|
textSubtitle2: {
|
|
45
32
|
Be2twd7: "fod5ikn"
|
|
46
33
|
},
|
|
47
34
|
textSubtitle1: {
|
|
48
35
|
Be2twd7: "f1pp30po"
|
|
49
36
|
},
|
|
50
|
-
|
|
37
|
+
textTitle3: {
|
|
51
38
|
Be2twd7: "f1x0m3f5"
|
|
52
39
|
},
|
|
53
40
|
squareSmall: {
|
|
@@ -172,50 +159,6 @@ const useStyles = /*#__PURE__*/__styles({
|
|
|
172
159
|
badgeLarge: {
|
|
173
160
|
E5pizo: "f1nayfl2"
|
|
174
161
|
},
|
|
175
|
-
image: {
|
|
176
|
-
qhf8xq: "f1euv43f",
|
|
177
|
-
Bhzewxz: "f15twtuk",
|
|
178
|
-
oyh7mz: ["f1vgc2s3", "f1e31b4d"],
|
|
179
|
-
a9b677: "fly5x3f",
|
|
180
|
-
Bqenvij: "f1l02sjl",
|
|
181
|
-
Bbmb7ep: ["f1d9uwra", "fzibvwi"],
|
|
182
|
-
Beyfa6y: ["fzibvwi", "f1d9uwra"],
|
|
183
|
-
B7oj6ja: ["fuoumxm", "f1vtqnvc"],
|
|
184
|
-
Btl43ni: ["f1vtqnvc", "fuoumxm"],
|
|
185
|
-
st4lth: "f1ps3kmd",
|
|
186
|
-
ha4doy: "f12kltsn"
|
|
187
|
-
},
|
|
188
|
-
iconInitials: {
|
|
189
|
-
qhf8xq: "f1euv43f",
|
|
190
|
-
B7ck84d: "f1ewtqcl",
|
|
191
|
-
Bhzewxz: "f15twtuk",
|
|
192
|
-
oyh7mz: ["f1vgc2s3", "f1e31b4d"],
|
|
193
|
-
a9b677: "fly5x3f",
|
|
194
|
-
Bqenvij: "f1l02sjl",
|
|
195
|
-
Bg96gwp: "fp6vxd",
|
|
196
|
-
B4j52fo: "f192inf7",
|
|
197
|
-
Bekrc4i: ["f5tn483", "f1ojsxk5"],
|
|
198
|
-
Bn0qgzm: "f1vxd6vx",
|
|
199
|
-
ibv6hh: ["f1ojsxk5", "f5tn483"],
|
|
200
|
-
icvyot: "fzkkow9",
|
|
201
|
-
vrafjx: ["fcdblym", "fjik90z"],
|
|
202
|
-
oivjwe: "fg706s2",
|
|
203
|
-
wvpqe5: ["fjik90z", "fcdblym"],
|
|
204
|
-
g2u3we: "fghlq4f",
|
|
205
|
-
h3c5rm: ["f1gn591s", "fjscplz"],
|
|
206
|
-
B9xav0g: "fb073pr",
|
|
207
|
-
zhjwy3: ["fjscplz", "f1gn591s"],
|
|
208
|
-
mc9l5x: "f22iagw",
|
|
209
|
-
Bt984gj: "f122n59",
|
|
210
|
-
Brf1p80: "f4d9j23",
|
|
211
|
-
ha4doy: "fa4t5tb",
|
|
212
|
-
fsow6f: "f17mccla",
|
|
213
|
-
famaaq: "f1xqy1su",
|
|
214
|
-
Bbmb7ep: ["f1d9uwra", "fzibvwi"],
|
|
215
|
-
Beyfa6y: ["fzibvwi", "f1d9uwra"],
|
|
216
|
-
B7oj6ja: ["fuoumxm", "f1vtqnvc"],
|
|
217
|
-
Btl43ni: ["f1vtqnvc", "fuoumxm"]
|
|
218
|
-
},
|
|
219
162
|
icon12: {
|
|
220
163
|
Be2twd7: "f1ugzwwg"
|
|
221
164
|
},
|
|
@@ -238,7 +181,7 @@ const useStyles = /*#__PURE__*/__styles({
|
|
|
238
181
|
Be2twd7: "f18m8u13"
|
|
239
182
|
}
|
|
240
183
|
}, {
|
|
241
|
-
d: [".
|
|
184
|
+
d: [".f13mqy1h{font-size:var(--fontSizeBase100);}", ".fy9rknc{font-size:var(--fontSizeBase200);}", ".fod5ikn{font-size:var(--fontSizeBase400);}", ".f1pp30po{font-size:var(--fontSizeBase500);}", ".f1x0m3f5{font-size:var(--fontSizeBase600);}", ".f1g3puop{border-bottom-right-radius:var(--borderRadiusSmall);}", ".fi2rrw2{border-bottom-left-radius:var(--borderRadiusSmall);}", ".f1rstyi9{border-top-right-radius:var(--borderRadiusSmall);}", ".f1s4nn1u{border-top-left-radius:var(--borderRadiusSmall);}", ".f1aa9q02{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f16jpd5f{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f1jar5jt{border-top-right-radius:var(--borderRadiusMedium);}", ".fyu767a{border-top-left-radius:var(--borderRadiusMedium);}", ".f1ldthgs{border-bottom-right-radius:var(--borderRadiusLarge);}", ".frrelxk{border-bottom-left-radius:var(--borderRadiusLarge);}", ".fobrfso{border-top-right-radius:var(--borderRadiusLarge);}", ".ffisxpw{border-top-left-radius:var(--borderRadiusLarge);}", ".fnivh3a{border-bottom-right-radius:var(--borderRadiusXLarge);}", ".fc7yr5o{border-bottom-left-radius:var(--borderRadiusXLarge);}", ".f1el4m67{border-top-right-radius:var(--borderRadiusXLarge);}", ".f8yange{border-top-left-radius:var(--borderRadiusXLarge);}", ".ftfx35i{-webkit-transform:perspective(1px);-moz-transform:perspective(1px);-ms-transform:perspective(1px);transform:perspective(1px);}", ".fv0atk9{transition-property:transform,opacity;}", ".f1iry5bo{transition-duration:var(--durationUltraSlow),var(--durationFaster);}", ".f1gyuh7d{transition-delay:var(--curveEasyEaseMax),var(--curveLinear);}", ".f1wl9k8s::before{content:\"\";}", ".f1j7ml58::before{position:absolute;}", ".ffi060y::before{top:0;}", ".f1fzr1x6::before{left:0;}", ".f1f351id::before{right:0;}", ".fchca7p::before{bottom:0;}", ".f1kd9phw::before{border-bottom-right-radius:inherit;}", ".fyf2ch2::before{border-bottom-left-radius:inherit;}", ".f1gnrg9b::before{border-top-right-radius:inherit;}", ".f1xx2lx6::before{border-top-left-radius:inherit;}", ".f1e9wvyh::before{transition-property:margin,opacity;}", ".f1vyz52m::before{transition-duration:var(--durationUltraSlow),var(--durationSlower);}", ".f1rjhkxy::before{transition-delay:var(--curveEasyEaseMax),var(--curveLinear);}", ".f163fonl::before{border-top-style:solid;}", ".f1yq6w5o::before{border-right-style:solid;}", ".f1jpmc5p::before{border-left-style:solid;}", ".f11yjt3y::before{border-bottom-style:solid;}", ".f1rbtjc9::before{margin-top:calc(-2 * var(--strokeWidthThick));}", ".f1wm0e7m::before{margin-right:calc(-2 * var(--strokeWidthThick));}", ".f1o0l8kp::before{margin-left:calc(-2 * var(--strokeWidthThick));}", ".f1tz5420::before{margin-bottom:calc(-2 * var(--strokeWidthThick));}", ".f1q30tuz::before{border-top-width:var(--strokeWidthThick);}", ".f9c0djs::before{border-right-width:var(--strokeWidthThick);}", ".fcwzx2y::before{border-left-width:var(--strokeWidthThick);}", ".f1hdqo1a::before{border-bottom-width:var(--strokeWidthThick);}", ".fk7ejgl::before{margin-top:calc(-2 * var(--strokeWidthThicker));}", ".f12sbt0w::before{margin-right:calc(-2 * var(--strokeWidthThicker));}", ".f1tnh028::before{margin-left:calc(-2 * var(--strokeWidthThicker));}", ".fcrsff4::before{margin-bottom:calc(-2 * var(--strokeWidthThicker));}", ".f1jrge4j::before{border-top-width:var(--strokeWidthThicker);}", ".fc2vpa6::before{border-right-width:var(--strokeWidthThicker);}", ".f133djwz::before{border-left-width:var(--strokeWidthThicker);}", ".f9hcsm3::before{border-bottom-width:var(--strokeWidthThicker);}", ".fl3e39p::before{margin-top:calc(-2 * var(--strokeWidthThickest));}", ".f14m8wrz::before{margin-right:calc(-2 * var(--strokeWidthThickest));}", ".fckzhtt::before{margin-left:calc(-2 * var(--strokeWidthThickest));}", ".fnxq6pw::before{margin-bottom:calc(-2 * var(--strokeWidthThickest));}", ".fr6r3yi::before{border-top-width:var(--strokeWidthThickest);}", ".ftxoq8w::before{border-right-width:var(--strokeWidthThickest);}", ".f4gs2h8::before{border-left-width:var(--strokeWidthThickest);}", ".f9gga8r::before{border-bottom-width:var(--strokeWidthThickest);}", ".f196qwgu::before{box-shadow:var(--shadow4);}", ".fut48mo::before{box-shadow:var(--shadow8);}", ".fh2kfig::before{box-shadow:var(--shadow16);}", ".f4c2u2p::before{box-shadow:var(--shadow28);}", ".fp25eh{opacity:0.8;}", ".f1clczzi{-webkit-transform:scale(0.875);-moz-transform:scale(0.875);-ms-transform:scale(0.875);transform:scale(0.875);}", ".fxm264b{transition-delay:var(--curveDecelerateMin),var(--curveLinear);}", ".fe3o830::before{margin-top:0;}", ".fzynn9s::before{margin-right:0;}", ".f1z0ukd1::before{margin-left:0;}", ".f1kyqvp9::before{margin-bottom:0;}", ".f1dhznln::before{opacity:0;}", ".f1yb2g89::before{transition-delay:var(--curveDecelerateMin),var(--curveLinear);}", ".f1euv43f{position:absolute;}", ".f1yab3r1{bottom:0;}", ".f1e31b4d{right:0;}", ".f1vgc2s3{left:0;}", ".ffo9j2l{box-shadow:0 0 0 var(--strokeWidthThin) var(--colorNeutralBackground1);}", ".f1nayfl2{box-shadow:0 0 0 var(--strokeWidthThick) var(--colorNeutralBackground1);}", ".f1ugzwwg{font-size:12px;}", ".f4ybsrx{font-size:16px;}", ".fe5j1ua{font-size:20px;}", ".f1rt2boy{font-size:24px;}", ".f24l1pt{font-size:28px;}", ".ffl51b{font-size:32px;}", ".f18m8u13{font-size:48px;}"],
|
|
242
185
|
m: [["@media screen and (prefers-reduced-motion: reduce){.f1onx1g3{transition-duration:0.01ms;}}", {
|
|
243
186
|
m: "screen and (prefers-reduced-motion: reduce)"
|
|
244
187
|
}], ["@media screen and (prefers-reduced-motion: reduce){.f1ak47q9::before{transition-duration:0.01ms;}}", {
|
|
@@ -487,22 +430,25 @@ export const useAvatarStyles_unstable = state => {
|
|
|
487
430
|
activeAppearance,
|
|
488
431
|
color
|
|
489
432
|
} = state;
|
|
433
|
+
const rootClassName = useRootClassName();
|
|
434
|
+
const imageClassName = useImageClassName();
|
|
435
|
+
const iconInitialsClassName = useIconInitialsClassName();
|
|
490
436
|
const styles = useStyles();
|
|
491
437
|
const sizeStyles = useSizeStyles();
|
|
492
438
|
const colorStyles = useColorStyles();
|
|
493
|
-
const rootClasses = [
|
|
439
|
+
const rootClasses = [rootClassName, size !== 32 && sizeStyles[size], colorStyles[color]];
|
|
494
440
|
if (size <= 24) {
|
|
495
441
|
rootClasses.push(styles.textCaption2Strong);
|
|
496
442
|
} else if (size <= 28) {
|
|
497
443
|
rootClasses.push(styles.textCaption1Strong);
|
|
498
444
|
} else if (size <= 40) {
|
|
499
|
-
|
|
445
|
+
// Default text size included in useRootClassName
|
|
500
446
|
} else if (size <= 56) {
|
|
501
447
|
rootClasses.push(styles.textSubtitle2);
|
|
502
448
|
} else if (size <= 96) {
|
|
503
449
|
rootClasses.push(styles.textSubtitle1);
|
|
504
450
|
} else {
|
|
505
|
-
rootClasses.push(styles.
|
|
451
|
+
rootClasses.push(styles.textTitle3);
|
|
506
452
|
}
|
|
507
453
|
if (shape === 'square') {
|
|
508
454
|
if (size <= 24) {
|
|
@@ -548,10 +494,10 @@ export const useAvatarStyles_unstable = state => {
|
|
|
548
494
|
state.badge.className = mergeClasses(avatarClassNames.badge, styles.badge, size >= 64 && styles.badgeLarge, state.badge.className);
|
|
549
495
|
}
|
|
550
496
|
if (state.image) {
|
|
551
|
-
state.image.className = mergeClasses(avatarClassNames.image,
|
|
497
|
+
state.image.className = mergeClasses(avatarClassNames.image, imageClassName, state.image.className);
|
|
552
498
|
}
|
|
553
499
|
if (state.initials) {
|
|
554
|
-
state.initials.className = mergeClasses(avatarClassNames.initials,
|
|
500
|
+
state.initials.className = mergeClasses(avatarClassNames.initials, iconInitialsClassName, state.initials.className);
|
|
555
501
|
}
|
|
556
502
|
if (state.icon) {
|
|
557
503
|
let iconSizeClass;
|
|
@@ -570,7 +516,7 @@ export const useAvatarStyles_unstable = state => {
|
|
|
570
516
|
} else {
|
|
571
517
|
iconSizeClass = styles.icon48;
|
|
572
518
|
}
|
|
573
|
-
state.icon.className = mergeClasses(avatarClassNames.icon,
|
|
519
|
+
state.icon.className = mergeClasses(avatarClassNames.icon, iconInitialsClassName, iconSizeClass, state.icon.className);
|
|
574
520
|
}
|
|
575
521
|
return state;
|
|
576
522
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"mappings":"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","names":["mergeClasses","shorthands","tokens","avatarClassNames","root","image","initials","icon","badge","animations","fastOutSlowInMax","curveDecelerateMax","fastOutSlowInMid","curveDecelerateMid","fastOutSlowInMin","curveDecelerateMin","slowOutFastInMax","curveAccelerateMax","slowOutFastInMid","curveAccelerateMid","slowOutFastInMin","curveAccelerateMin","fastEase","curveEasyEaseMax","normalEase","curveEasyEase","nullEasing","curveLinear","useStyles","useSizeStyles","useColorStyles","useAvatarStyles_unstable","state","size","shape","active","activeAppearance","color","styles","sizeStyles","colorStyles","rootClasses","push","textCaption2Strong","textCaption1Strong","textBody1Strong","textSubtitle2","textSubtitle1","textTitle","squareSmall","squareMedium","squareLarge","squareXLarge","activeOrInactive","ring","ringThick","ringThicker","ringThickest","shadow4","shadow8","shadow16","shadow28","inactive","className","badgeLarge","iconInitials","iconSizeClass","icon12","icon16","icon20","icon24","icon28","icon32","icon48"],"sourceRoot":"../src/","sources":["packages/react-components/react-avatar/src/components/Avatar/useAvatarStyles.ts"],"sourcesContent":["import { mergeClasses, makeStyles, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { AvatarSlots, AvatarState } from './Avatar.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const avatarClassNames: SlotClassNames<AvatarSlots> = {\n root: 'fui-Avatar',\n image: 'fui-Avatar__image',\n initials: 'fui-Avatar__initials',\n icon: 'fui-Avatar__icon',\n badge: 'fui-Avatar__badge',\n};\n\nconst animations = {\n fastOutSlowInMax: tokens.curveDecelerateMax,\n fastOutSlowInMid: tokens.curveDecelerateMid,\n fastOutSlowInMin: tokens.curveDecelerateMin,\n slowOutFastInMax: tokens.curveAccelerateMax,\n slowOutFastInMid: tokens.curveAccelerateMid,\n slowOutFastInMin: tokens.curveAccelerateMin,\n fastEase: tokens.curveEasyEaseMax,\n normalEase: tokens.curveEasyEase,\n nullEasing: tokens.curveLinear,\n};\n\nconst useStyles = makeStyles({\n root: {\n display: 'inline-block',\n flexShrink: 0,\n position: 'relative',\n verticalAlign: 'middle',\n ...shorthands.borderRadius(tokens.borderRadiusCircular),\n fontFamily: tokens.fontFamilyBase,\n fontWeight: tokens.fontWeightSemibold,\n },\n\n textCaption2Strong: {\n fontSize: tokens.fontSizeBase100,\n fontWeight: tokens.fontWeightSemibold,\n },\n textCaption1Strong: { fontSize: tokens.fontSizeBase200 },\n textBody1Strong: { fontSize: tokens.fontSizeBase300 },\n textSubtitle2: { fontSize: tokens.fontSizeBase400 },\n textSubtitle1: { fontSize: tokens.fontSizeBase500 },\n textTitle: { fontSize: tokens.fontSizeBase600 },\n\n squareSmall: {\n ...shorthands.borderRadius(tokens.borderRadiusSmall),\n },\n squareMedium: {\n ...shorthands.borderRadius(tokens.borderRadiusMedium),\n },\n squareLarge: {\n ...shorthands.borderRadius(tokens.borderRadiusLarge),\n },\n squareXLarge: {\n ...shorthands.borderRadius(tokens.borderRadiusXLarge),\n },\n\n activeOrInactive: {\n transform: 'perspective(1px)', // Work-around for text pixel snapping at the end of the animation\n transitionProperty: 'transform, opacity',\n transitionDuration: `${tokens.durationUltraSlow}, ${tokens.durationFaster}`,\n transitionDelay: `${animations.fastEase}, ${animations.nullEasing}`,\n\n '@media screen and (prefers-reduced-motion: reduce)': {\n transitionDuration: '0.01ms',\n },\n\n '::before': {\n content: '\"\"',\n position: 'absolute',\n top: 0,\n left: 0,\n bottom: 0,\n right: 0,\n\n ...shorthands.borderRadius('inherit'),\n transitionProperty: 'margin, opacity',\n transitionDuration: `${tokens.durationUltraSlow}, ${tokens.durationSlower}`,\n transitionDelay: `${animations.fastEase}, ${animations.nullEasing}`,\n\n '@media screen and (prefers-reduced-motion: reduce)': {\n transitionDuration: '0.01ms',\n transitionDelay: '0.01ms',\n },\n },\n },\n\n ring: {\n '::before': {\n ...shorthands.borderStyle('solid'),\n },\n },\n ringThick: {\n '::before': {\n ...shorthands.margin(`calc(-2 * ${tokens.strokeWidthThick})`),\n ...shorthands.borderWidth(tokens.strokeWidthThick),\n },\n },\n ringThicker: {\n '::before': {\n ...shorthands.margin(`calc(-2 * ${tokens.strokeWidthThicker})`),\n ...shorthands.borderWidth(tokens.strokeWidthThicker),\n },\n },\n ringThickest: {\n '::before': {\n ...shorthands.margin(`calc(-2 * ${tokens.strokeWidthThickest})`),\n ...shorthands.borderWidth(tokens.strokeWidthThickest),\n },\n },\n\n shadow4: { '::before': { boxShadow: tokens.shadow4 } },\n shadow8: { '::before': { boxShadow: tokens.shadow8 } },\n shadow16: { '::before': { boxShadow: tokens.shadow16 } },\n shadow28: { '::before': { boxShadow: tokens.shadow28 } },\n\n inactive: {\n opacity: '0.8',\n transform: 'scale(0.875)',\n\n transitionProperty: 'transform, opacity',\n transitionDuration: `${tokens.durationUltraSlow}, ${tokens.durationFaster}`,\n transitionDelay: `${animations.fastOutSlowInMin}, ${animations.nullEasing}`,\n\n '@media screen and (prefers-reduced-motion: reduce)': {\n transitionDuration: '0.01ms',\n transitionDelay: '0.01ms',\n },\n\n '::before': {\n ...shorthands.margin(0),\n opacity: 0,\n\n transitionProperty: 'margin, opacity',\n transitionDuration: `${tokens.durationUltraSlow}, ${tokens.durationSlower}`,\n transitionDelay: `${animations.fastOutSlowInMin}, ${animations.nullEasing}`,\n\n '@media screen and (prefers-reduced-motion: reduce)': {\n transitionDuration: '0.01ms',\n transitionDelay: '0.01ms',\n },\n },\n },\n\n badge: {\n position: 'absolute',\n bottom: 0,\n right: 0,\n boxShadow: `0 0 0 ${tokens.strokeWidthThin} ${tokens.colorNeutralBackground1}`,\n },\n badgeLarge: {\n boxShadow: `0 0 0 ${tokens.strokeWidthThick} ${tokens.colorNeutralBackground1}`,\n },\n\n image: {\n position: 'absolute',\n top: 0,\n left: 0,\n width: '100%',\n height: '100%',\n\n ...shorthands.borderRadius('inherit'),\n objectFit: 'cover',\n verticalAlign: 'top',\n },\n\n iconInitials: {\n position: 'absolute',\n boxSizing: 'border-box',\n top: 0,\n left: 0,\n width: '100%',\n height: '100%',\n lineHeight: '1',\n ...shorthands.border(tokens.strokeWidthThin, 'solid', tokens.colorTransparentStroke),\n\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n verticalAlign: 'center',\n textAlign: 'center',\n userSelect: 'none',\n ...shorthands.borderRadius('inherit'),\n },\n\n icon12: { fontSize: '12px' },\n icon16: { fontSize: '16px' },\n icon20: { fontSize: '20px' },\n icon24: { fontSize: '24px' },\n icon28: { fontSize: '28px' },\n icon32: { fontSize: '32px' },\n icon48: { fontSize: '48px' },\n});\n\nexport const useSizeStyles = makeStyles({\n 16: { width: '16px', height: '16px' },\n 20: { width: '20px', height: '20px' },\n 24: { width: '24px', height: '24px' },\n 28: { width: '28px', height: '28px' },\n 32: { width: '32px', height: '32px' },\n 36: { width: '36px', height: '36px' },\n 40: { width: '40px', height: '40px' },\n 48: { width: '48px', height: '48px' },\n 56: { width: '56px', height: '56px' },\n 64: { width: '64px', height: '64px' },\n 72: { width: '72px', height: '72px' },\n 96: { width: '96px', height: '96px' },\n 120: { width: '120px', height: '120px' },\n 128: { width: '128px', height: '128px' },\n});\n\nconst useColorStyles = makeStyles({\n neutral: {\n color: tokens.colorNeutralForeground3,\n backgroundColor: tokens.colorNeutralBackground6,\n // The ::before element is the ring when active\n '::before': { color: tokens.colorBrandStroke1 },\n },\n brand: {\n color: tokens.colorNeutralForegroundStaticInverted,\n backgroundColor: tokens.colorBrandBackgroundStatic,\n '::before': { color: tokens.colorBrandStroke1 },\n },\n 'dark-red': {\n color: tokens.colorPaletteDarkRedForeground2,\n backgroundColor: tokens.colorPaletteDarkRedBackground2,\n '::before': { color: tokens.colorPaletteDarkRedBorderActive },\n },\n cranberry: {\n color: tokens.colorPaletteCranberryForeground2,\n backgroundColor: tokens.colorPaletteCranberryBackground2,\n '::before': { color: tokens.colorPaletteCranberryBorderActive },\n },\n red: {\n color: tokens.colorPaletteRedForeground2,\n backgroundColor: tokens.colorPaletteRedBackground2,\n '::before': { color: tokens.colorPaletteRedBorderActive },\n },\n pumpkin: {\n color: tokens.colorPalettePumpkinForeground2,\n backgroundColor: tokens.colorPalettePumpkinBackground2,\n '::before': { color: tokens.colorPalettePumpkinBorderActive },\n },\n peach: {\n color: tokens.colorPalettePeachForeground2,\n backgroundColor: tokens.colorPalettePeachBackground2,\n '::before': { color: tokens.colorPalettePeachBorderActive },\n },\n marigold: {\n color: tokens.colorPaletteMarigoldForeground2,\n backgroundColor: tokens.colorPaletteMarigoldBackground2,\n '::before': { color: tokens.colorPaletteMarigoldBorderActive },\n },\n gold: {\n color: tokens.colorPaletteGoldForeground2,\n backgroundColor: tokens.colorPaletteGoldBackground2,\n '::before': { color: tokens.colorPaletteGoldBorderActive },\n },\n brass: {\n color: tokens.colorPaletteBrassForeground2,\n backgroundColor: tokens.colorPaletteBrassBackground2,\n '::before': { color: tokens.colorPaletteBrassBorderActive },\n },\n brown: {\n color: tokens.colorPaletteBrownForeground2,\n backgroundColor: tokens.colorPaletteBrownBackground2,\n '::before': { color: tokens.colorPaletteBrownBorderActive },\n },\n forest: {\n color: tokens.colorPaletteForestForeground2,\n backgroundColor: tokens.colorPaletteForestBackground2,\n '::before': { color: tokens.colorPaletteForestBorderActive },\n },\n seafoam: {\n color: tokens.colorPaletteSeafoamForeground2,\n backgroundColor: tokens.colorPaletteSeafoamBackground2,\n '::before': { color: tokens.colorPaletteSeafoamBorderActive },\n },\n 'dark-green': {\n color: tokens.colorPaletteDarkGreenForeground2,\n backgroundColor: tokens.colorPaletteDarkGreenBackground2,\n '::before': { color: tokens.colorPaletteDarkGreenBorderActive },\n },\n 'light-teal': {\n color: tokens.colorPaletteLightTealForeground2,\n backgroundColor: tokens.colorPaletteLightTealBackground2,\n '::before': { color: tokens.colorPaletteLightTealBorderActive },\n },\n teal: {\n color: tokens.colorPaletteTealForeground2,\n backgroundColor: tokens.colorPaletteTealBackground2,\n '::before': { color: tokens.colorPaletteTealBorderActive },\n },\n steel: {\n color: tokens.colorPaletteSteelForeground2,\n backgroundColor: tokens.colorPaletteSteelBackground2,\n '::before': { color: tokens.colorPaletteSteelBorderActive },\n },\n blue: {\n color: tokens.colorPaletteBlueForeground2,\n backgroundColor: tokens.colorPaletteBlueBackground2,\n '::before': { color: tokens.colorPaletteBlueBorderActive },\n },\n 'royal-blue': {\n color: tokens.colorPaletteRoyalBlueForeground2,\n backgroundColor: tokens.colorPaletteRoyalBlueBackground2,\n '::before': { color: tokens.colorPaletteRoyalBlueBorderActive },\n },\n cornflower: {\n color: tokens.colorPaletteCornflowerForeground2,\n backgroundColor: tokens.colorPaletteCornflowerBackground2,\n '::before': { color: tokens.colorPaletteCornflowerBorderActive },\n },\n navy: {\n color: tokens.colorPaletteNavyForeground2,\n backgroundColor: tokens.colorPaletteNavyBackground2,\n '::before': { color: tokens.colorPaletteNavyBorderActive },\n },\n lavender: {\n color: tokens.colorPaletteLavenderForeground2,\n backgroundColor: tokens.colorPaletteLavenderBackground2,\n '::before': { color: tokens.colorPaletteLavenderBorderActive },\n },\n purple: {\n color: tokens.colorPalettePurpleForeground2,\n backgroundColor: tokens.colorPalettePurpleBackground2,\n '::before': { color: tokens.colorPalettePurpleBorderActive },\n },\n grape: {\n color: tokens.colorPaletteGrapeForeground2,\n backgroundColor: tokens.colorPaletteGrapeBackground2,\n '::before': { color: tokens.colorPaletteGrapeBorderActive },\n },\n lilac: {\n color: tokens.colorPaletteLilacForeground2,\n backgroundColor: tokens.colorPaletteLilacBackground2,\n '::before': { color: tokens.colorPaletteLilacBorderActive },\n },\n pink: {\n color: tokens.colorPalettePinkForeground2,\n backgroundColor: tokens.colorPalettePinkBackground2,\n '::before': { color: tokens.colorPalettePinkBorderActive },\n },\n magenta: {\n color: tokens.colorPaletteMagentaForeground2,\n backgroundColor: tokens.colorPaletteMagentaBackground2,\n '::before': { color: tokens.colorPaletteMagentaBorderActive },\n },\n plum: {\n color: tokens.colorPalettePlumForeground2,\n backgroundColor: tokens.colorPalettePlumBackground2,\n '::before': { color: tokens.colorPalettePlumBorderActive },\n },\n beige: {\n color: tokens.colorPaletteBeigeForeground2,\n backgroundColor: tokens.colorPaletteBeigeBackground2,\n '::before': { color: tokens.colorPaletteBeigeBorderActive },\n },\n mink: {\n color: tokens.colorPaletteMinkForeground2,\n backgroundColor: tokens.colorPaletteMinkBackground2,\n '::before': { color: tokens.colorPaletteMinkBorderActive },\n },\n platinum: {\n color: tokens.colorPalettePlatinumForeground2,\n backgroundColor: tokens.colorPalettePlatinumBackground2,\n '::before': { color: tokens.colorPalettePlatinumBorderActive },\n },\n anchor: {\n color: tokens.colorPaletteAnchorForeground2,\n backgroundColor: tokens.colorPaletteAnchorBackground2,\n '::before': { color: tokens.colorPaletteAnchorBorderActive },\n },\n});\n\nexport const useAvatarStyles_unstable = (state: AvatarState): AvatarState => {\n const { size, shape, active, activeAppearance, color } = state;\n\n const styles = useStyles();\n const sizeStyles = useSizeStyles();\n const colorStyles = useColorStyles();\n\n const rootClasses = [styles.root, sizeStyles[size], colorStyles[color]];\n\n if (size <= 24) {\n rootClasses.push(styles.textCaption2Strong);\n } else if (size <= 28) {\n rootClasses.push(styles.textCaption1Strong);\n } else if (size <= 40) {\n rootClasses.push(styles.textBody1Strong);\n } else if (size <= 56) {\n rootClasses.push(styles.textSubtitle2);\n } else if (size <= 96) {\n rootClasses.push(styles.textSubtitle1);\n } else {\n rootClasses.push(styles.textTitle);\n }\n\n if (shape === 'square') {\n if (size <= 24) {\n rootClasses.push(styles.squareSmall);\n } else if (size <= 48) {\n rootClasses.push(styles.squareMedium);\n } else if (size <= 72) {\n rootClasses.push(styles.squareLarge);\n } else {\n rootClasses.push(styles.squareXLarge);\n }\n }\n\n if (active === 'active' || active === 'inactive') {\n rootClasses.push(styles.activeOrInactive);\n\n if (activeAppearance === 'ring' || activeAppearance === 'ring-shadow') {\n rootClasses.push(styles.ring);\n\n if (size <= 48) {\n rootClasses.push(styles.ringThick);\n } else if (size <= 64) {\n rootClasses.push(styles.ringThicker);\n } else {\n rootClasses.push(styles.ringThickest);\n }\n }\n\n if (activeAppearance === 'shadow' || activeAppearance === 'ring-shadow') {\n if (size <= 28) {\n rootClasses.push(styles.shadow4);\n } else if (size <= 48) {\n rootClasses.push(styles.shadow8);\n } else if (size <= 64) {\n rootClasses.push(styles.shadow16);\n } else {\n rootClasses.push(styles.shadow28);\n }\n }\n\n // Note: The inactive style overrides some of the activeAppearance styles and must be applied after them\n if (active === 'inactive') {\n rootClasses.push(styles.inactive);\n }\n }\n\n state.root.className = mergeClasses(avatarClassNames.root, ...rootClasses, state.root.className);\n\n if (state.badge) {\n state.badge.className = mergeClasses(\n avatarClassNames.badge,\n styles.badge,\n size >= 64 && styles.badgeLarge,\n state.badge.className,\n );\n }\n\n if (state.image) {\n state.image.className = mergeClasses(avatarClassNames.image, styles.image, state.image.className);\n }\n\n if (state.initials) {\n state.initials.className = mergeClasses(avatarClassNames.initials, styles.iconInitials, state.initials.className);\n }\n\n if (state.icon) {\n let iconSizeClass;\n if (size <= 16) {\n iconSizeClass = styles.icon12;\n } else if (size <= 24) {\n iconSizeClass = styles.icon16;\n } else if (size <= 40) {\n iconSizeClass = styles.icon20;\n } else if (size <= 48) {\n iconSizeClass = styles.icon24;\n } else if (size <= 56) {\n iconSizeClass = styles.icon28;\n } else if (size <= 72) {\n iconSizeClass = styles.icon32;\n } else {\n iconSizeClass = styles.icon48;\n }\n\n state.icon.className = mergeClasses(\n avatarClassNames.icon,\n styles.iconInitials,\n iconSizeClass,\n state.icon.className,\n );\n }\n\n return state;\n};\n"]}
|
|
1
|
+
{"version":3,"mappings":"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","names":["mergeClasses","shorthands","tokens","avatarClassNames","root","image","initials","icon","badge","animations","fastOutSlowInMax","curveDecelerateMax","fastOutSlowInMid","curveDecelerateMid","fastOutSlowInMin","curveDecelerateMin","slowOutFastInMax","curveAccelerateMax","slowOutFastInMid","curveAccelerateMid","slowOutFastInMin","curveAccelerateMin","fastEase","curveEasyEaseMax","normalEase","curveEasyEase","nullEasing","curveLinear","useRootClassName","useImageClassName","useIconInitialsClassName","useStyles","useSizeStyles","useColorStyles","useAvatarStyles_unstable","state","size","shape","active","activeAppearance","color","rootClassName","imageClassName","iconInitialsClassName","styles","sizeStyles","colorStyles","rootClasses","push","textCaption2Strong","textCaption1Strong","textSubtitle2","textSubtitle1","textTitle3","squareSmall","squareMedium","squareLarge","squareXLarge","activeOrInactive","ring","ringThick","ringThicker","ringThickest","shadow4","shadow8","shadow16","shadow28","inactive","className","badgeLarge","iconSizeClass","icon12","icon16","icon20","icon24","icon28","icon32","icon48"],"sourceRoot":"../src/","sources":["packages/react-components/react-avatar/src/components/Avatar/useAvatarStyles.ts"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { AvatarSlots, AvatarState } from './Avatar.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const avatarClassNames: SlotClassNames<AvatarSlots> = {\n root: 'fui-Avatar',\n image: 'fui-Avatar__image',\n initials: 'fui-Avatar__initials',\n icon: 'fui-Avatar__icon',\n badge: 'fui-Avatar__badge',\n};\n\nconst animations = {\n fastOutSlowInMax: tokens.curveDecelerateMax,\n fastOutSlowInMid: tokens.curveDecelerateMid,\n fastOutSlowInMin: tokens.curveDecelerateMin,\n slowOutFastInMax: tokens.curveAccelerateMax,\n slowOutFastInMid: tokens.curveAccelerateMid,\n slowOutFastInMin: tokens.curveAccelerateMin,\n fastEase: tokens.curveEasyEaseMax,\n normalEase: tokens.curveEasyEase,\n nullEasing: tokens.curveLinear,\n};\n\nconst useRootClassName = makeResetStyles({\n display: 'inline-block',\n flexShrink: 0,\n position: 'relative',\n verticalAlign: 'middle',\n borderRadius: tokens.borderRadiusCircular,\n fontFamily: tokens.fontFamilyBase,\n fontWeight: tokens.fontWeightSemibold,\n fontSize: tokens.fontSizeBase300,\n width: '32px',\n height: '32px',\n});\n\nconst useImageClassName = makeResetStyles({\n position: 'absolute',\n top: 0,\n left: 0,\n width: '100%',\n height: '100%',\n\n borderRadius: 'inherit',\n objectFit: 'cover',\n verticalAlign: 'top',\n});\n\nconst useIconInitialsClassName = makeResetStyles({\n position: 'absolute',\n boxSizing: 'border-box',\n top: 0,\n left: 0,\n width: '100%',\n height: '100%',\n lineHeight: '1',\n border: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStroke}`,\n\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n verticalAlign: 'center',\n textAlign: 'center',\n userSelect: 'none',\n borderRadius: 'inherit',\n});\n\nconst useStyles = makeStyles({\n textCaption2Strong: { fontSize: tokens.fontSizeBase100 },\n textCaption1Strong: { fontSize: tokens.fontSizeBase200 },\n textSubtitle2: { fontSize: tokens.fontSizeBase400 },\n textSubtitle1: { fontSize: tokens.fontSizeBase500 },\n textTitle3: { fontSize: tokens.fontSizeBase600 },\n\n squareSmall: {\n ...shorthands.borderRadius(tokens.borderRadiusSmall),\n },\n squareMedium: {\n ...shorthands.borderRadius(tokens.borderRadiusMedium),\n },\n squareLarge: {\n ...shorthands.borderRadius(tokens.borderRadiusLarge),\n },\n squareXLarge: {\n ...shorthands.borderRadius(tokens.borderRadiusXLarge),\n },\n\n activeOrInactive: {\n transform: 'perspective(1px)', // Work-around for text pixel snapping at the end of the animation\n transitionProperty: 'transform, opacity',\n transitionDuration: `${tokens.durationUltraSlow}, ${tokens.durationFaster}`,\n transitionDelay: `${animations.fastEase}, ${animations.nullEasing}`,\n\n '@media screen and (prefers-reduced-motion: reduce)': {\n transitionDuration: '0.01ms',\n },\n\n '::before': {\n content: '\"\"',\n position: 'absolute',\n top: 0,\n left: 0,\n bottom: 0,\n right: 0,\n\n ...shorthands.borderRadius('inherit'),\n transitionProperty: 'margin, opacity',\n transitionDuration: `${tokens.durationUltraSlow}, ${tokens.durationSlower}`,\n transitionDelay: `${animations.fastEase}, ${animations.nullEasing}`,\n\n '@media screen and (prefers-reduced-motion: reduce)': {\n transitionDuration: '0.01ms',\n transitionDelay: '0.01ms',\n },\n },\n },\n\n ring: {\n '::before': {\n ...shorthands.borderStyle('solid'),\n },\n },\n ringThick: {\n '::before': {\n ...shorthands.margin(`calc(-2 * ${tokens.strokeWidthThick})`),\n ...shorthands.borderWidth(tokens.strokeWidthThick),\n },\n },\n ringThicker: {\n '::before': {\n ...shorthands.margin(`calc(-2 * ${tokens.strokeWidthThicker})`),\n ...shorthands.borderWidth(tokens.strokeWidthThicker),\n },\n },\n ringThickest: {\n '::before': {\n ...shorthands.margin(`calc(-2 * ${tokens.strokeWidthThickest})`),\n ...shorthands.borderWidth(tokens.strokeWidthThickest),\n },\n },\n\n shadow4: { '::before': { boxShadow: tokens.shadow4 } },\n shadow8: { '::before': { boxShadow: tokens.shadow8 } },\n shadow16: { '::before': { boxShadow: tokens.shadow16 } },\n shadow28: { '::before': { boxShadow: tokens.shadow28 } },\n\n inactive: {\n opacity: '0.8',\n transform: 'scale(0.875)',\n\n transitionProperty: 'transform, opacity',\n transitionDuration: `${tokens.durationUltraSlow}, ${tokens.durationFaster}`,\n transitionDelay: `${animations.fastOutSlowInMin}, ${animations.nullEasing}`,\n\n '@media screen and (prefers-reduced-motion: reduce)': {\n transitionDuration: '0.01ms',\n transitionDelay: '0.01ms',\n },\n\n '::before': {\n ...shorthands.margin(0),\n opacity: 0,\n\n transitionProperty: 'margin, opacity',\n transitionDuration: `${tokens.durationUltraSlow}, ${tokens.durationSlower}`,\n transitionDelay: `${animations.fastOutSlowInMin}, ${animations.nullEasing}`,\n\n '@media screen and (prefers-reduced-motion: reduce)': {\n transitionDuration: '0.01ms',\n transitionDelay: '0.01ms',\n },\n },\n },\n\n badge: {\n position: 'absolute',\n bottom: 0,\n right: 0,\n boxShadow: `0 0 0 ${tokens.strokeWidthThin} ${tokens.colorNeutralBackground1}`,\n },\n\n badgeLarge: {\n boxShadow: `0 0 0 ${tokens.strokeWidthThick} ${tokens.colorNeutralBackground1}`,\n },\n\n icon12: { fontSize: '12px' },\n icon16: { fontSize: '16px' },\n icon20: { fontSize: '20px' },\n icon24: { fontSize: '24px' },\n icon28: { fontSize: '28px' },\n icon32: { fontSize: '32px' },\n icon48: { fontSize: '48px' },\n});\n\nexport const useSizeStyles = makeStyles({\n 16: { width: '16px', height: '16px' },\n 20: { width: '20px', height: '20px' },\n 24: { width: '24px', height: '24px' },\n 28: { width: '28px', height: '28px' },\n 32: { width: '32px', height: '32px' },\n 36: { width: '36px', height: '36px' },\n 40: { width: '40px', height: '40px' },\n 48: { width: '48px', height: '48px' },\n 56: { width: '56px', height: '56px' },\n 64: { width: '64px', height: '64px' },\n 72: { width: '72px', height: '72px' },\n 96: { width: '96px', height: '96px' },\n 120: { width: '120px', height: '120px' },\n 128: { width: '128px', height: '128px' },\n});\n\nconst useColorStyles = makeStyles({\n neutral: {\n color: tokens.colorNeutralForeground3,\n backgroundColor: tokens.colorNeutralBackground6,\n // The ::before element is the ring when active\n '::before': { color: tokens.colorBrandStroke1 },\n },\n brand: {\n color: tokens.colorNeutralForegroundStaticInverted,\n backgroundColor: tokens.colorBrandBackgroundStatic,\n '::before': { color: tokens.colorBrandStroke1 },\n },\n 'dark-red': {\n color: tokens.colorPaletteDarkRedForeground2,\n backgroundColor: tokens.colorPaletteDarkRedBackground2,\n '::before': { color: tokens.colorPaletteDarkRedBorderActive },\n },\n cranberry: {\n color: tokens.colorPaletteCranberryForeground2,\n backgroundColor: tokens.colorPaletteCranberryBackground2,\n '::before': { color: tokens.colorPaletteCranberryBorderActive },\n },\n red: {\n color: tokens.colorPaletteRedForeground2,\n backgroundColor: tokens.colorPaletteRedBackground2,\n '::before': { color: tokens.colorPaletteRedBorderActive },\n },\n pumpkin: {\n color: tokens.colorPalettePumpkinForeground2,\n backgroundColor: tokens.colorPalettePumpkinBackground2,\n '::before': { color: tokens.colorPalettePumpkinBorderActive },\n },\n peach: {\n color: tokens.colorPalettePeachForeground2,\n backgroundColor: tokens.colorPalettePeachBackground2,\n '::before': { color: tokens.colorPalettePeachBorderActive },\n },\n marigold: {\n color: tokens.colorPaletteMarigoldForeground2,\n backgroundColor: tokens.colorPaletteMarigoldBackground2,\n '::before': { color: tokens.colorPaletteMarigoldBorderActive },\n },\n gold: {\n color: tokens.colorPaletteGoldForeground2,\n backgroundColor: tokens.colorPaletteGoldBackground2,\n '::before': { color: tokens.colorPaletteGoldBorderActive },\n },\n brass: {\n color: tokens.colorPaletteBrassForeground2,\n backgroundColor: tokens.colorPaletteBrassBackground2,\n '::before': { color: tokens.colorPaletteBrassBorderActive },\n },\n brown: {\n color: tokens.colorPaletteBrownForeground2,\n backgroundColor: tokens.colorPaletteBrownBackground2,\n '::before': { color: tokens.colorPaletteBrownBorderActive },\n },\n forest: {\n color: tokens.colorPaletteForestForeground2,\n backgroundColor: tokens.colorPaletteForestBackground2,\n '::before': { color: tokens.colorPaletteForestBorderActive },\n },\n seafoam: {\n color: tokens.colorPaletteSeafoamForeground2,\n backgroundColor: tokens.colorPaletteSeafoamBackground2,\n '::before': { color: tokens.colorPaletteSeafoamBorderActive },\n },\n 'dark-green': {\n color: tokens.colorPaletteDarkGreenForeground2,\n backgroundColor: tokens.colorPaletteDarkGreenBackground2,\n '::before': { color: tokens.colorPaletteDarkGreenBorderActive },\n },\n 'light-teal': {\n color: tokens.colorPaletteLightTealForeground2,\n backgroundColor: tokens.colorPaletteLightTealBackground2,\n '::before': { color: tokens.colorPaletteLightTealBorderActive },\n },\n teal: {\n color: tokens.colorPaletteTealForeground2,\n backgroundColor: tokens.colorPaletteTealBackground2,\n '::before': { color: tokens.colorPaletteTealBorderActive },\n },\n steel: {\n color: tokens.colorPaletteSteelForeground2,\n backgroundColor: tokens.colorPaletteSteelBackground2,\n '::before': { color: tokens.colorPaletteSteelBorderActive },\n },\n blue: {\n color: tokens.colorPaletteBlueForeground2,\n backgroundColor: tokens.colorPaletteBlueBackground2,\n '::before': { color: tokens.colorPaletteBlueBorderActive },\n },\n 'royal-blue': {\n color: tokens.colorPaletteRoyalBlueForeground2,\n backgroundColor: tokens.colorPaletteRoyalBlueBackground2,\n '::before': { color: tokens.colorPaletteRoyalBlueBorderActive },\n },\n cornflower: {\n color: tokens.colorPaletteCornflowerForeground2,\n backgroundColor: tokens.colorPaletteCornflowerBackground2,\n '::before': { color: tokens.colorPaletteCornflowerBorderActive },\n },\n navy: {\n color: tokens.colorPaletteNavyForeground2,\n backgroundColor: tokens.colorPaletteNavyBackground2,\n '::before': { color: tokens.colorPaletteNavyBorderActive },\n },\n lavender: {\n color: tokens.colorPaletteLavenderForeground2,\n backgroundColor: tokens.colorPaletteLavenderBackground2,\n '::before': { color: tokens.colorPaletteLavenderBorderActive },\n },\n purple: {\n color: tokens.colorPalettePurpleForeground2,\n backgroundColor: tokens.colorPalettePurpleBackground2,\n '::before': { color: tokens.colorPalettePurpleBorderActive },\n },\n grape: {\n color: tokens.colorPaletteGrapeForeground2,\n backgroundColor: tokens.colorPaletteGrapeBackground2,\n '::before': { color: tokens.colorPaletteGrapeBorderActive },\n },\n lilac: {\n color: tokens.colorPaletteLilacForeground2,\n backgroundColor: tokens.colorPaletteLilacBackground2,\n '::before': { color: tokens.colorPaletteLilacBorderActive },\n },\n pink: {\n color: tokens.colorPalettePinkForeground2,\n backgroundColor: tokens.colorPalettePinkBackground2,\n '::before': { color: tokens.colorPalettePinkBorderActive },\n },\n magenta: {\n color: tokens.colorPaletteMagentaForeground2,\n backgroundColor: tokens.colorPaletteMagentaBackground2,\n '::before': { color: tokens.colorPaletteMagentaBorderActive },\n },\n plum: {\n color: tokens.colorPalettePlumForeground2,\n backgroundColor: tokens.colorPalettePlumBackground2,\n '::before': { color: tokens.colorPalettePlumBorderActive },\n },\n beige: {\n color: tokens.colorPaletteBeigeForeground2,\n backgroundColor: tokens.colorPaletteBeigeBackground2,\n '::before': { color: tokens.colorPaletteBeigeBorderActive },\n },\n mink: {\n color: tokens.colorPaletteMinkForeground2,\n backgroundColor: tokens.colorPaletteMinkBackground2,\n '::before': { color: tokens.colorPaletteMinkBorderActive },\n },\n platinum: {\n color: tokens.colorPalettePlatinumForeground2,\n backgroundColor: tokens.colorPalettePlatinumBackground2,\n '::before': { color: tokens.colorPalettePlatinumBorderActive },\n },\n anchor: {\n color: tokens.colorPaletteAnchorForeground2,\n backgroundColor: tokens.colorPaletteAnchorBackground2,\n '::before': { color: tokens.colorPaletteAnchorBorderActive },\n },\n});\n\nexport const useAvatarStyles_unstable = (state: AvatarState): AvatarState => {\n const { size, shape, active, activeAppearance, color } = state;\n\n const rootClassName = useRootClassName();\n const imageClassName = useImageClassName();\n const iconInitialsClassName = useIconInitialsClassName();\n const styles = useStyles();\n const sizeStyles = useSizeStyles();\n const colorStyles = useColorStyles();\n\n const rootClasses = [rootClassName, size !== 32 && sizeStyles[size], colorStyles[color]];\n\n if (size <= 24) {\n rootClasses.push(styles.textCaption2Strong);\n } else if (size <= 28) {\n rootClasses.push(styles.textCaption1Strong);\n } else if (size <= 40) {\n // Default text size included in useRootClassName\n } else if (size <= 56) {\n rootClasses.push(styles.textSubtitle2);\n } else if (size <= 96) {\n rootClasses.push(styles.textSubtitle1);\n } else {\n rootClasses.push(styles.textTitle3);\n }\n\n if (shape === 'square') {\n if (size <= 24) {\n rootClasses.push(styles.squareSmall);\n } else if (size <= 48) {\n rootClasses.push(styles.squareMedium);\n } else if (size <= 72) {\n rootClasses.push(styles.squareLarge);\n } else {\n rootClasses.push(styles.squareXLarge);\n }\n }\n\n if (active === 'active' || active === 'inactive') {\n rootClasses.push(styles.activeOrInactive);\n\n if (activeAppearance === 'ring' || activeAppearance === 'ring-shadow') {\n rootClasses.push(styles.ring);\n\n if (size <= 48) {\n rootClasses.push(styles.ringThick);\n } else if (size <= 64) {\n rootClasses.push(styles.ringThicker);\n } else {\n rootClasses.push(styles.ringThickest);\n }\n }\n\n if (activeAppearance === 'shadow' || activeAppearance === 'ring-shadow') {\n if (size <= 28) {\n rootClasses.push(styles.shadow4);\n } else if (size <= 48) {\n rootClasses.push(styles.shadow8);\n } else if (size <= 64) {\n rootClasses.push(styles.shadow16);\n } else {\n rootClasses.push(styles.shadow28);\n }\n }\n\n // Note: The inactive style overrides some of the activeAppearance styles and must be applied after them\n if (active === 'inactive') {\n rootClasses.push(styles.inactive);\n }\n }\n\n state.root.className = mergeClasses(avatarClassNames.root, ...rootClasses, state.root.className);\n\n if (state.badge) {\n state.badge.className = mergeClasses(\n avatarClassNames.badge,\n styles.badge,\n size >= 64 && styles.badgeLarge,\n state.badge.className,\n );\n }\n\n if (state.image) {\n state.image.className = mergeClasses(avatarClassNames.image, imageClassName, state.image.className);\n }\n\n if (state.initials) {\n state.initials.className = mergeClasses(avatarClassNames.initials, iconInitialsClassName, state.initials.className);\n }\n\n if (state.icon) {\n let iconSizeClass;\n if (size <= 16) {\n iconSizeClass = styles.icon12;\n } else if (size <= 24) {\n iconSizeClass = styles.icon16;\n } else if (size <= 40) {\n iconSizeClass = styles.icon20;\n } else if (size <= 48) {\n iconSizeClass = styles.icon24;\n } else if (size <= 56) {\n iconSizeClass = styles.icon28;\n } else if (size <= 72) {\n iconSizeClass = styles.icon32;\n } else {\n iconSizeClass = styles.icon48;\n }\n\n state.icon.className = mergeClasses(\n avatarClassNames.icon,\n iconInitialsClassName,\n iconSizeClass,\n state.icon.className,\n );\n }\n\n return state;\n};\n"]}
|
|
@@ -20,17 +20,51 @@ define(["require", "exports", "tslib", "@griffel/react", "@fluentui/react-theme"
|
|
|
20
20
|
normalEase: react_theme_1.tokens.curveEasyEase,
|
|
21
21
|
nullEasing: react_theme_1.tokens.curveLinear,
|
|
22
22
|
};
|
|
23
|
+
var useRootClassName = react_1.makeResetStyles({
|
|
24
|
+
display: 'inline-block',
|
|
25
|
+
flexShrink: 0,
|
|
26
|
+
position: 'relative',
|
|
27
|
+
verticalAlign: 'middle',
|
|
28
|
+
borderRadius: react_theme_1.tokens.borderRadiusCircular,
|
|
29
|
+
fontFamily: react_theme_1.tokens.fontFamilyBase,
|
|
30
|
+
fontWeight: react_theme_1.tokens.fontWeightSemibold,
|
|
31
|
+
fontSize: react_theme_1.tokens.fontSizeBase300,
|
|
32
|
+
width: '32px',
|
|
33
|
+
height: '32px',
|
|
34
|
+
});
|
|
35
|
+
var useImageClassName = react_1.makeResetStyles({
|
|
36
|
+
position: 'absolute',
|
|
37
|
+
top: 0,
|
|
38
|
+
left: 0,
|
|
39
|
+
width: '100%',
|
|
40
|
+
height: '100%',
|
|
41
|
+
borderRadius: 'inherit',
|
|
42
|
+
objectFit: 'cover',
|
|
43
|
+
verticalAlign: 'top',
|
|
44
|
+
});
|
|
45
|
+
var useIconInitialsClassName = react_1.makeResetStyles({
|
|
46
|
+
position: 'absolute',
|
|
47
|
+
boxSizing: 'border-box',
|
|
48
|
+
top: 0,
|
|
49
|
+
left: 0,
|
|
50
|
+
width: '100%',
|
|
51
|
+
height: '100%',
|
|
52
|
+
lineHeight: '1',
|
|
53
|
+
border: react_theme_1.tokens.strokeWidthThin + " solid " + react_theme_1.tokens.colorTransparentStroke,
|
|
54
|
+
display: 'flex',
|
|
55
|
+
alignItems: 'center',
|
|
56
|
+
justifyContent: 'center',
|
|
57
|
+
verticalAlign: 'center',
|
|
58
|
+
textAlign: 'center',
|
|
59
|
+
userSelect: 'none',
|
|
60
|
+
borderRadius: 'inherit',
|
|
61
|
+
});
|
|
23
62
|
var useStyles = react_1.makeStyles({
|
|
24
|
-
|
|
25
|
-
textCaption2Strong: {
|
|
26
|
-
fontSize: react_theme_1.tokens.fontSizeBase100,
|
|
27
|
-
fontWeight: react_theme_1.tokens.fontWeightSemibold,
|
|
28
|
-
},
|
|
63
|
+
textCaption2Strong: { fontSize: react_theme_1.tokens.fontSizeBase100 },
|
|
29
64
|
textCaption1Strong: { fontSize: react_theme_1.tokens.fontSizeBase200 },
|
|
30
|
-
textBody1Strong: { fontSize: react_theme_1.tokens.fontSizeBase300 },
|
|
31
65
|
textSubtitle2: { fontSize: react_theme_1.tokens.fontSizeBase400 },
|
|
32
66
|
textSubtitle1: { fontSize: react_theme_1.tokens.fontSizeBase500 },
|
|
33
|
-
|
|
67
|
+
textTitle3: { fontSize: react_theme_1.tokens.fontSizeBase600 },
|
|
34
68
|
squareSmall: tslib_1.__assign({}, react_1.shorthands.borderRadius(react_theme_1.tokens.borderRadiusSmall)),
|
|
35
69
|
squareMedium: tslib_1.__assign({}, react_1.shorthands.borderRadius(react_theme_1.tokens.borderRadiusMedium)),
|
|
36
70
|
squareLarge: tslib_1.__assign({}, react_1.shorthands.borderRadius(react_theme_1.tokens.borderRadiusLarge)),
|
|
@@ -88,8 +122,6 @@ define(["require", "exports", "tslib", "@griffel/react", "@fluentui/react-theme"
|
|
|
88
122
|
badgeLarge: {
|
|
89
123
|
boxShadow: "0 0 0 " + react_theme_1.tokens.strokeWidthThick + " " + react_theme_1.tokens.colorNeutralBackground1,
|
|
90
124
|
},
|
|
91
|
-
image: tslib_1.__assign(tslib_1.__assign({ position: 'absolute', top: 0, left: 0, width: '100%', height: '100%' }, react_1.shorthands.borderRadius('inherit')), { objectFit: 'cover', verticalAlign: 'top' }),
|
|
92
|
-
iconInitials: tslib_1.__assign(tslib_1.__assign(tslib_1.__assign({ position: 'absolute', boxSizing: 'border-box', top: 0, left: 0, width: '100%', height: '100%', lineHeight: '1' }, react_1.shorthands.border(react_theme_1.tokens.strokeWidthThin, 'solid', react_theme_1.tokens.colorTransparentStroke)), { display: 'flex', alignItems: 'center', justifyContent: 'center', verticalAlign: 'center', textAlign: 'center', userSelect: 'none' }), react_1.shorthands.borderRadius('inherit')),
|
|
93
125
|
icon12: { fontSize: '12px' },
|
|
94
126
|
icon16: { fontSize: '16px' },
|
|
95
127
|
icon20: { fontSize: '20px' },
|
|
@@ -279,10 +311,13 @@ define(["require", "exports", "tslib", "@griffel/react", "@fluentui/react-theme"
|
|
|
279
311
|
});
|
|
280
312
|
var useAvatarStyles_unstable = function (state) {
|
|
281
313
|
var size = state.size, shape = state.shape, active = state.active, activeAppearance = state.activeAppearance, color = state.color;
|
|
314
|
+
var rootClassName = useRootClassName();
|
|
315
|
+
var imageClassName = useImageClassName();
|
|
316
|
+
var iconInitialsClassName = useIconInitialsClassName();
|
|
282
317
|
var styles = useStyles();
|
|
283
318
|
var sizeStyles = exports.useSizeStyles();
|
|
284
319
|
var colorStyles = useColorStyles();
|
|
285
|
-
var rootClasses = [
|
|
320
|
+
var rootClasses = [rootClassName, size !== 32 && sizeStyles[size], colorStyles[color]];
|
|
286
321
|
if (size <= 24) {
|
|
287
322
|
rootClasses.push(styles.textCaption2Strong);
|
|
288
323
|
}
|
|
@@ -290,7 +325,7 @@ define(["require", "exports", "tslib", "@griffel/react", "@fluentui/react-theme"
|
|
|
290
325
|
rootClasses.push(styles.textCaption1Strong);
|
|
291
326
|
}
|
|
292
327
|
else if (size <= 40) {
|
|
293
|
-
|
|
328
|
+
// Default text size included in useRootClassName
|
|
294
329
|
}
|
|
295
330
|
else if (size <= 56) {
|
|
296
331
|
rootClasses.push(styles.textSubtitle2);
|
|
@@ -299,7 +334,7 @@ define(["require", "exports", "tslib", "@griffel/react", "@fluentui/react-theme"
|
|
|
299
334
|
rootClasses.push(styles.textSubtitle1);
|
|
300
335
|
}
|
|
301
336
|
else {
|
|
302
|
-
rootClasses.push(styles.
|
|
337
|
+
rootClasses.push(styles.textTitle3);
|
|
303
338
|
}
|
|
304
339
|
if (shape === 'square') {
|
|
305
340
|
if (size <= 24) {
|
|
@@ -353,10 +388,10 @@ define(["require", "exports", "tslib", "@griffel/react", "@fluentui/react-theme"
|
|
|
353
388
|
state.badge.className = react_1.mergeClasses(exports.avatarClassNames.badge, styles.badge, size >= 64 && styles.badgeLarge, state.badge.className);
|
|
354
389
|
}
|
|
355
390
|
if (state.image) {
|
|
356
|
-
state.image.className = react_1.mergeClasses(exports.avatarClassNames.image,
|
|
391
|
+
state.image.className = react_1.mergeClasses(exports.avatarClassNames.image, imageClassName, state.image.className);
|
|
357
392
|
}
|
|
358
393
|
if (state.initials) {
|
|
359
|
-
state.initials.className = react_1.mergeClasses(exports.avatarClassNames.initials,
|
|
394
|
+
state.initials.className = react_1.mergeClasses(exports.avatarClassNames.initials, iconInitialsClassName, state.initials.className);
|
|
360
395
|
}
|
|
361
396
|
if (state.icon) {
|
|
362
397
|
var iconSizeClass = void 0;
|
|
@@ -381,7 +416,7 @@ define(["require", "exports", "tslib", "@griffel/react", "@fluentui/react-theme"
|
|
|
381
416
|
else {
|
|
382
417
|
iconSizeClass = styles.icon48;
|
|
383
418
|
}
|
|
384
|
-
state.icon.className = react_1.mergeClasses(exports.avatarClassNames.icon,
|
|
419
|
+
state.icon.className = react_1.mergeClasses(exports.avatarClassNames.icon, iconInitialsClassName, iconSizeClass, state.icon.className);
|
|
385
420
|
}
|
|
386
421
|
return state;
|
|
387
422
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useAvatarStyles.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-avatar/src/components/Avatar/useAvatarStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { mergeClasses, makeStyles, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { AvatarSlots, AvatarState } from './Avatar.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const avatarClassNames: SlotClassNames<AvatarSlots> = {\n root: 'fui-Avatar',\n image: 'fui-Avatar__image',\n initials: 'fui-Avatar__initials',\n icon: 'fui-Avatar__icon',\n badge: 'fui-Avatar__badge',\n};\n\nconst animations = {\n fastOutSlowInMax: tokens.curveDecelerateMax,\n fastOutSlowInMid: tokens.curveDecelerateMid,\n fastOutSlowInMin: tokens.curveDecelerateMin,\n slowOutFastInMax: tokens.curveAccelerateMax,\n slowOutFastInMid: tokens.curveAccelerateMid,\n slowOutFastInMin: tokens.curveAccelerateMin,\n fastEase: tokens.curveEasyEaseMax,\n normalEase: tokens.curveEasyEase,\n nullEasing: tokens.curveLinear,\n};\n\nconst useStyles = makeStyles({\n root: {\n display: 'inline-block',\n flexShrink: 0,\n position: 'relative',\n verticalAlign: 'middle',\n ...shorthands.borderRadius(tokens.borderRadiusCircular),\n fontFamily: tokens.fontFamilyBase,\n fontWeight: tokens.fontWeightSemibold,\n },\n\n textCaption2Strong: {\n fontSize: tokens.fontSizeBase100,\n fontWeight: tokens.fontWeightSemibold,\n },\n textCaption1Strong: { fontSize: tokens.fontSizeBase200 },\n textBody1Strong: { fontSize: tokens.fontSizeBase300 },\n textSubtitle2: { fontSize: tokens.fontSizeBase400 },\n textSubtitle1: { fontSize: tokens.fontSizeBase500 },\n textTitle: { fontSize: tokens.fontSizeBase600 },\n\n squareSmall: {\n ...shorthands.borderRadius(tokens.borderRadiusSmall),\n },\n squareMedium: {\n ...shorthands.borderRadius(tokens.borderRadiusMedium),\n },\n squareLarge: {\n ...shorthands.borderRadius(tokens.borderRadiusLarge),\n },\n squareXLarge: {\n ...shorthands.borderRadius(tokens.borderRadiusXLarge),\n },\n\n activeOrInactive: {\n transform: 'perspective(1px)', // Work-around for text pixel snapping at the end of the animation\n transitionProperty: 'transform, opacity',\n transitionDuration: `${tokens.durationUltraSlow}, ${tokens.durationFaster}`,\n transitionDelay: `${animations.fastEase}, ${animations.nullEasing}`,\n\n '@media screen and (prefers-reduced-motion: reduce)': {\n transitionDuration: '0.01ms',\n },\n\n '::before': {\n content: '\"\"',\n position: 'absolute',\n top: 0,\n left: 0,\n bottom: 0,\n right: 0,\n\n ...shorthands.borderRadius('inherit'),\n transitionProperty: 'margin, opacity',\n transitionDuration: `${tokens.durationUltraSlow}, ${tokens.durationSlower}`,\n transitionDelay: `${animations.fastEase}, ${animations.nullEasing}`,\n\n '@media screen and (prefers-reduced-motion: reduce)': {\n transitionDuration: '0.01ms',\n transitionDelay: '0.01ms',\n },\n },\n },\n\n ring: {\n '::before': {\n ...shorthands.borderStyle('solid'),\n },\n },\n ringThick: {\n '::before': {\n ...shorthands.margin(`calc(-2 * ${tokens.strokeWidthThick})`),\n ...shorthands.borderWidth(tokens.strokeWidthThick),\n },\n },\n ringThicker: {\n '::before': {\n ...shorthands.margin(`calc(-2 * ${tokens.strokeWidthThicker})`),\n ...shorthands.borderWidth(tokens.strokeWidthThicker),\n },\n },\n ringThickest: {\n '::before': {\n ...shorthands.margin(`calc(-2 * ${tokens.strokeWidthThickest})`),\n ...shorthands.borderWidth(tokens.strokeWidthThickest),\n },\n },\n\n shadow4: { '::before': { boxShadow: tokens.shadow4 } },\n shadow8: { '::before': { boxShadow: tokens.shadow8 } },\n shadow16: { '::before': { boxShadow: tokens.shadow16 } },\n shadow28: { '::before': { boxShadow: tokens.shadow28 } },\n\n inactive: {\n opacity: '0.8',\n transform: 'scale(0.875)',\n\n transitionProperty: 'transform, opacity',\n transitionDuration: `${tokens.durationUltraSlow}, ${tokens.durationFaster}`,\n transitionDelay: `${animations.fastOutSlowInMin}, ${animations.nullEasing}`,\n\n '@media screen and (prefers-reduced-motion: reduce)': {\n transitionDuration: '0.01ms',\n transitionDelay: '0.01ms',\n },\n\n '::before': {\n ...shorthands.margin(0),\n opacity: 0,\n\n transitionProperty: 'margin, opacity',\n transitionDuration: `${tokens.durationUltraSlow}, ${tokens.durationSlower}`,\n transitionDelay: `${animations.fastOutSlowInMin}, ${animations.nullEasing}`,\n\n '@media screen and (prefers-reduced-motion: reduce)': {\n transitionDuration: '0.01ms',\n transitionDelay: '0.01ms',\n },\n },\n },\n\n badge: {\n position: 'absolute',\n bottom: 0,\n right: 0,\n boxShadow: `0 0 0 ${tokens.strokeWidthThin} ${tokens.colorNeutralBackground1}`,\n },\n badgeLarge: {\n boxShadow: `0 0 0 ${tokens.strokeWidthThick} ${tokens.colorNeutralBackground1}`,\n },\n\n image: {\n position: 'absolute',\n top: 0,\n left: 0,\n width: '100%',\n height: '100%',\n\n ...shorthands.borderRadius('inherit'),\n objectFit: 'cover',\n verticalAlign: 'top',\n },\n\n iconInitials: {\n position: 'absolute',\n boxSizing: 'border-box',\n top: 0,\n left: 0,\n width: '100%',\n height: '100%',\n lineHeight: '1',\n ...shorthands.border(tokens.strokeWidthThin, 'solid', tokens.colorTransparentStroke),\n\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n verticalAlign: 'center',\n textAlign: 'center',\n userSelect: 'none',\n ...shorthands.borderRadius('inherit'),\n },\n\n icon12: { fontSize: '12px' },\n icon16: { fontSize: '16px' },\n icon20: { fontSize: '20px' },\n icon24: { fontSize: '24px' },\n icon28: { fontSize: '28px' },\n icon32: { fontSize: '32px' },\n icon48: { fontSize: '48px' },\n});\n\nexport const useSizeStyles = makeStyles({\n 16: { width: '16px', height: '16px' },\n 20: { width: '20px', height: '20px' },\n 24: { width: '24px', height: '24px' },\n 28: { width: '28px', height: '28px' },\n 32: { width: '32px', height: '32px' },\n 36: { width: '36px', height: '36px' },\n 40: { width: '40px', height: '40px' },\n 48: { width: '48px', height: '48px' },\n 56: { width: '56px', height: '56px' },\n 64: { width: '64px', height: '64px' },\n 72: { width: '72px', height: '72px' },\n 96: { width: '96px', height: '96px' },\n 120: { width: '120px', height: '120px' },\n 128: { width: '128px', height: '128px' },\n});\n\nconst useColorStyles = makeStyles({\n neutral: {\n color: tokens.colorNeutralForeground3,\n backgroundColor: tokens.colorNeutralBackground6,\n // The ::before element is the ring when active\n '::before': { color: tokens.colorBrandStroke1 },\n },\n brand: {\n color: tokens.colorNeutralForegroundStaticInverted,\n backgroundColor: tokens.colorBrandBackgroundStatic,\n '::before': { color: tokens.colorBrandStroke1 },\n },\n 'dark-red': {\n color: tokens.colorPaletteDarkRedForeground2,\n backgroundColor: tokens.colorPaletteDarkRedBackground2,\n '::before': { color: tokens.colorPaletteDarkRedBorderActive },\n },\n cranberry: {\n color: tokens.colorPaletteCranberryForeground2,\n backgroundColor: tokens.colorPaletteCranberryBackground2,\n '::before': { color: tokens.colorPaletteCranberryBorderActive },\n },\n red: {\n color: tokens.colorPaletteRedForeground2,\n backgroundColor: tokens.colorPaletteRedBackground2,\n '::before': { color: tokens.colorPaletteRedBorderActive },\n },\n pumpkin: {\n color: tokens.colorPalettePumpkinForeground2,\n backgroundColor: tokens.colorPalettePumpkinBackground2,\n '::before': { color: tokens.colorPalettePumpkinBorderActive },\n },\n peach: {\n color: tokens.colorPalettePeachForeground2,\n backgroundColor: tokens.colorPalettePeachBackground2,\n '::before': { color: tokens.colorPalettePeachBorderActive },\n },\n marigold: {\n color: tokens.colorPaletteMarigoldForeground2,\n backgroundColor: tokens.colorPaletteMarigoldBackground2,\n '::before': { color: tokens.colorPaletteMarigoldBorderActive },\n },\n gold: {\n color: tokens.colorPaletteGoldForeground2,\n backgroundColor: tokens.colorPaletteGoldBackground2,\n '::before': { color: tokens.colorPaletteGoldBorderActive },\n },\n brass: {\n color: tokens.colorPaletteBrassForeground2,\n backgroundColor: tokens.colorPaletteBrassBackground2,\n '::before': { color: tokens.colorPaletteBrassBorderActive },\n },\n brown: {\n color: tokens.colorPaletteBrownForeground2,\n backgroundColor: tokens.colorPaletteBrownBackground2,\n '::before': { color: tokens.colorPaletteBrownBorderActive },\n },\n forest: {\n color: tokens.colorPaletteForestForeground2,\n backgroundColor: tokens.colorPaletteForestBackground2,\n '::before': { color: tokens.colorPaletteForestBorderActive },\n },\n seafoam: {\n color: tokens.colorPaletteSeafoamForeground2,\n backgroundColor: tokens.colorPaletteSeafoamBackground2,\n '::before': { color: tokens.colorPaletteSeafoamBorderActive },\n },\n 'dark-green': {\n color: tokens.colorPaletteDarkGreenForeground2,\n backgroundColor: tokens.colorPaletteDarkGreenBackground2,\n '::before': { color: tokens.colorPaletteDarkGreenBorderActive },\n },\n 'light-teal': {\n color: tokens.colorPaletteLightTealForeground2,\n backgroundColor: tokens.colorPaletteLightTealBackground2,\n '::before': { color: tokens.colorPaletteLightTealBorderActive },\n },\n teal: {\n color: tokens.colorPaletteTealForeground2,\n backgroundColor: tokens.colorPaletteTealBackground2,\n '::before': { color: tokens.colorPaletteTealBorderActive },\n },\n steel: {\n color: tokens.colorPaletteSteelForeground2,\n backgroundColor: tokens.colorPaletteSteelBackground2,\n '::before': { color: tokens.colorPaletteSteelBorderActive },\n },\n blue: {\n color: tokens.colorPaletteBlueForeground2,\n backgroundColor: tokens.colorPaletteBlueBackground2,\n '::before': { color: tokens.colorPaletteBlueBorderActive },\n },\n 'royal-blue': {\n color: tokens.colorPaletteRoyalBlueForeground2,\n backgroundColor: tokens.colorPaletteRoyalBlueBackground2,\n '::before': { color: tokens.colorPaletteRoyalBlueBorderActive },\n },\n cornflower: {\n color: tokens.colorPaletteCornflowerForeground2,\n backgroundColor: tokens.colorPaletteCornflowerBackground2,\n '::before': { color: tokens.colorPaletteCornflowerBorderActive },\n },\n navy: {\n color: tokens.colorPaletteNavyForeground2,\n backgroundColor: tokens.colorPaletteNavyBackground2,\n '::before': { color: tokens.colorPaletteNavyBorderActive },\n },\n lavender: {\n color: tokens.colorPaletteLavenderForeground2,\n backgroundColor: tokens.colorPaletteLavenderBackground2,\n '::before': { color: tokens.colorPaletteLavenderBorderActive },\n },\n purple: {\n color: tokens.colorPalettePurpleForeground2,\n backgroundColor: tokens.colorPalettePurpleBackground2,\n '::before': { color: tokens.colorPalettePurpleBorderActive },\n },\n grape: {\n color: tokens.colorPaletteGrapeForeground2,\n backgroundColor: tokens.colorPaletteGrapeBackground2,\n '::before': { color: tokens.colorPaletteGrapeBorderActive },\n },\n lilac: {\n color: tokens.colorPaletteLilacForeground2,\n backgroundColor: tokens.colorPaletteLilacBackground2,\n '::before': { color: tokens.colorPaletteLilacBorderActive },\n },\n pink: {\n color: tokens.colorPalettePinkForeground2,\n backgroundColor: tokens.colorPalettePinkBackground2,\n '::before': { color: tokens.colorPalettePinkBorderActive },\n },\n magenta: {\n color: tokens.colorPaletteMagentaForeground2,\n backgroundColor: tokens.colorPaletteMagentaBackground2,\n '::before': { color: tokens.colorPaletteMagentaBorderActive },\n },\n plum: {\n color: tokens.colorPalettePlumForeground2,\n backgroundColor: tokens.colorPalettePlumBackground2,\n '::before': { color: tokens.colorPalettePlumBorderActive },\n },\n beige: {\n color: tokens.colorPaletteBeigeForeground2,\n backgroundColor: tokens.colorPaletteBeigeBackground2,\n '::before': { color: tokens.colorPaletteBeigeBorderActive },\n },\n mink: {\n color: tokens.colorPaletteMinkForeground2,\n backgroundColor: tokens.colorPaletteMinkBackground2,\n '::before': { color: tokens.colorPaletteMinkBorderActive },\n },\n platinum: {\n color: tokens.colorPalettePlatinumForeground2,\n backgroundColor: tokens.colorPalettePlatinumBackground2,\n '::before': { color: tokens.colorPalettePlatinumBorderActive },\n },\n anchor: {\n color: tokens.colorPaletteAnchorForeground2,\n backgroundColor: tokens.colorPaletteAnchorBackground2,\n '::before': { color: tokens.colorPaletteAnchorBorderActive },\n },\n});\n\nexport const useAvatarStyles_unstable = (state: AvatarState): AvatarState => {\n const { size, shape, active, activeAppearance, color } = state;\n\n const styles = useStyles();\n const sizeStyles = useSizeStyles();\n const colorStyles = useColorStyles();\n\n const rootClasses = [styles.root, sizeStyles[size], colorStyles[color]];\n\n if (size <= 24) {\n rootClasses.push(styles.textCaption2Strong);\n } else if (size <= 28) {\n rootClasses.push(styles.textCaption1Strong);\n } else if (size <= 40) {\n rootClasses.push(styles.textBody1Strong);\n } else if (size <= 56) {\n rootClasses.push(styles.textSubtitle2);\n } else if (size <= 96) {\n rootClasses.push(styles.textSubtitle1);\n } else {\n rootClasses.push(styles.textTitle);\n }\n\n if (shape === 'square') {\n if (size <= 24) {\n rootClasses.push(styles.squareSmall);\n } else if (size <= 48) {\n rootClasses.push(styles.squareMedium);\n } else if (size <= 72) {\n rootClasses.push(styles.squareLarge);\n } else {\n rootClasses.push(styles.squareXLarge);\n }\n }\n\n if (active === 'active' || active === 'inactive') {\n rootClasses.push(styles.activeOrInactive);\n\n if (activeAppearance === 'ring' || activeAppearance === 'ring-shadow') {\n rootClasses.push(styles.ring);\n\n if (size <= 48) {\n rootClasses.push(styles.ringThick);\n } else if (size <= 64) {\n rootClasses.push(styles.ringThicker);\n } else {\n rootClasses.push(styles.ringThickest);\n }\n }\n\n if (activeAppearance === 'shadow' || activeAppearance === 'ring-shadow') {\n if (size <= 28) {\n rootClasses.push(styles.shadow4);\n } else if (size <= 48) {\n rootClasses.push(styles.shadow8);\n } else if (size <= 64) {\n rootClasses.push(styles.shadow16);\n } else {\n rootClasses.push(styles.shadow28);\n }\n }\n\n // Note: The inactive style overrides some of the activeAppearance styles and must be applied after them\n if (active === 'inactive') {\n rootClasses.push(styles.inactive);\n }\n }\n\n state.root.className = mergeClasses(avatarClassNames.root, ...rootClasses, state.root.className);\n\n if (state.badge) {\n state.badge.className = mergeClasses(\n avatarClassNames.badge,\n styles.badge,\n size >= 64 && styles.badgeLarge,\n state.badge.className,\n );\n }\n\n if (state.image) {\n state.image.className = mergeClasses(avatarClassNames.image, styles.image, state.image.className);\n }\n\n if (state.initials) {\n state.initials.className = mergeClasses(avatarClassNames.initials, styles.iconInitials, state.initials.className);\n }\n\n if (state.icon) {\n let iconSizeClass;\n if (size <= 16) {\n iconSizeClass = styles.icon12;\n } else if (size <= 24) {\n iconSizeClass = styles.icon16;\n } else if (size <= 40) {\n iconSizeClass = styles.icon20;\n } else if (size <= 48) {\n iconSizeClass = styles.icon24;\n } else if (size <= 56) {\n iconSizeClass = styles.icon28;\n } else if (size <= 72) {\n iconSizeClass = styles.icon32;\n } else {\n iconSizeClass = styles.icon48;\n }\n\n state.icon.className = mergeClasses(\n avatarClassNames.icon,\n styles.iconInitials,\n iconSizeClass,\n state.icon.className,\n );\n }\n\n return state;\n};\n"]}
|
|
1
|
+
{"version":3,"file":"useAvatarStyles.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-avatar/src/components/Avatar/useAvatarStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { AvatarSlots, AvatarState } from './Avatar.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const avatarClassNames: SlotClassNames<AvatarSlots> = {\n root: 'fui-Avatar',\n image: 'fui-Avatar__image',\n initials: 'fui-Avatar__initials',\n icon: 'fui-Avatar__icon',\n badge: 'fui-Avatar__badge',\n};\n\nconst animations = {\n fastOutSlowInMax: tokens.curveDecelerateMax,\n fastOutSlowInMid: tokens.curveDecelerateMid,\n fastOutSlowInMin: tokens.curveDecelerateMin,\n slowOutFastInMax: tokens.curveAccelerateMax,\n slowOutFastInMid: tokens.curveAccelerateMid,\n slowOutFastInMin: tokens.curveAccelerateMin,\n fastEase: tokens.curveEasyEaseMax,\n normalEase: tokens.curveEasyEase,\n nullEasing: tokens.curveLinear,\n};\n\nconst useRootClassName = makeResetStyles({\n display: 'inline-block',\n flexShrink: 0,\n position: 'relative',\n verticalAlign: 'middle',\n borderRadius: tokens.borderRadiusCircular,\n fontFamily: tokens.fontFamilyBase,\n fontWeight: tokens.fontWeightSemibold,\n fontSize: tokens.fontSizeBase300,\n width: '32px',\n height: '32px',\n});\n\nconst useImageClassName = makeResetStyles({\n position: 'absolute',\n top: 0,\n left: 0,\n width: '100%',\n height: '100%',\n\n borderRadius: 'inherit',\n objectFit: 'cover',\n verticalAlign: 'top',\n});\n\nconst useIconInitialsClassName = makeResetStyles({\n position: 'absolute',\n boxSizing: 'border-box',\n top: 0,\n left: 0,\n width: '100%',\n height: '100%',\n lineHeight: '1',\n border: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStroke}`,\n\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n verticalAlign: 'center',\n textAlign: 'center',\n userSelect: 'none',\n borderRadius: 'inherit',\n});\n\nconst useStyles = makeStyles({\n textCaption2Strong: { fontSize: tokens.fontSizeBase100 },\n textCaption1Strong: { fontSize: tokens.fontSizeBase200 },\n textSubtitle2: { fontSize: tokens.fontSizeBase400 },\n textSubtitle1: { fontSize: tokens.fontSizeBase500 },\n textTitle3: { fontSize: tokens.fontSizeBase600 },\n\n squareSmall: {\n ...shorthands.borderRadius(tokens.borderRadiusSmall),\n },\n squareMedium: {\n ...shorthands.borderRadius(tokens.borderRadiusMedium),\n },\n squareLarge: {\n ...shorthands.borderRadius(tokens.borderRadiusLarge),\n },\n squareXLarge: {\n ...shorthands.borderRadius(tokens.borderRadiusXLarge),\n },\n\n activeOrInactive: {\n transform: 'perspective(1px)', // Work-around for text pixel snapping at the end of the animation\n transitionProperty: 'transform, opacity',\n transitionDuration: `${tokens.durationUltraSlow}, ${tokens.durationFaster}`,\n transitionDelay: `${animations.fastEase}, ${animations.nullEasing}`,\n\n '@media screen and (prefers-reduced-motion: reduce)': {\n transitionDuration: '0.01ms',\n },\n\n '::before': {\n content: '\"\"',\n position: 'absolute',\n top: 0,\n left: 0,\n bottom: 0,\n right: 0,\n\n ...shorthands.borderRadius('inherit'),\n transitionProperty: 'margin, opacity',\n transitionDuration: `${tokens.durationUltraSlow}, ${tokens.durationSlower}`,\n transitionDelay: `${animations.fastEase}, ${animations.nullEasing}`,\n\n '@media screen and (prefers-reduced-motion: reduce)': {\n transitionDuration: '0.01ms',\n transitionDelay: '0.01ms',\n },\n },\n },\n\n ring: {\n '::before': {\n ...shorthands.borderStyle('solid'),\n },\n },\n ringThick: {\n '::before': {\n ...shorthands.margin(`calc(-2 * ${tokens.strokeWidthThick})`),\n ...shorthands.borderWidth(tokens.strokeWidthThick),\n },\n },\n ringThicker: {\n '::before': {\n ...shorthands.margin(`calc(-2 * ${tokens.strokeWidthThicker})`),\n ...shorthands.borderWidth(tokens.strokeWidthThicker),\n },\n },\n ringThickest: {\n '::before': {\n ...shorthands.margin(`calc(-2 * ${tokens.strokeWidthThickest})`),\n ...shorthands.borderWidth(tokens.strokeWidthThickest),\n },\n },\n\n shadow4: { '::before': { boxShadow: tokens.shadow4 } },\n shadow8: { '::before': { boxShadow: tokens.shadow8 } },\n shadow16: { '::before': { boxShadow: tokens.shadow16 } },\n shadow28: { '::before': { boxShadow: tokens.shadow28 } },\n\n inactive: {\n opacity: '0.8',\n transform: 'scale(0.875)',\n\n transitionProperty: 'transform, opacity',\n transitionDuration: `${tokens.durationUltraSlow}, ${tokens.durationFaster}`,\n transitionDelay: `${animations.fastOutSlowInMin}, ${animations.nullEasing}`,\n\n '@media screen and (prefers-reduced-motion: reduce)': {\n transitionDuration: '0.01ms',\n transitionDelay: '0.01ms',\n },\n\n '::before': {\n ...shorthands.margin(0),\n opacity: 0,\n\n transitionProperty: 'margin, opacity',\n transitionDuration: `${tokens.durationUltraSlow}, ${tokens.durationSlower}`,\n transitionDelay: `${animations.fastOutSlowInMin}, ${animations.nullEasing}`,\n\n '@media screen and (prefers-reduced-motion: reduce)': {\n transitionDuration: '0.01ms',\n transitionDelay: '0.01ms',\n },\n },\n },\n\n badge: {\n position: 'absolute',\n bottom: 0,\n right: 0,\n boxShadow: `0 0 0 ${tokens.strokeWidthThin} ${tokens.colorNeutralBackground1}`,\n },\n\n badgeLarge: {\n boxShadow: `0 0 0 ${tokens.strokeWidthThick} ${tokens.colorNeutralBackground1}`,\n },\n\n icon12: { fontSize: '12px' },\n icon16: { fontSize: '16px' },\n icon20: { fontSize: '20px' },\n icon24: { fontSize: '24px' },\n icon28: { fontSize: '28px' },\n icon32: { fontSize: '32px' },\n icon48: { fontSize: '48px' },\n});\n\nexport const useSizeStyles = makeStyles({\n 16: { width: '16px', height: '16px' },\n 20: { width: '20px', height: '20px' },\n 24: { width: '24px', height: '24px' },\n 28: { width: '28px', height: '28px' },\n 32: { width: '32px', height: '32px' },\n 36: { width: '36px', height: '36px' },\n 40: { width: '40px', height: '40px' },\n 48: { width: '48px', height: '48px' },\n 56: { width: '56px', height: '56px' },\n 64: { width: '64px', height: '64px' },\n 72: { width: '72px', height: '72px' },\n 96: { width: '96px', height: '96px' },\n 120: { width: '120px', height: '120px' },\n 128: { width: '128px', height: '128px' },\n});\n\nconst useColorStyles = makeStyles({\n neutral: {\n color: tokens.colorNeutralForeground3,\n backgroundColor: tokens.colorNeutralBackground6,\n // The ::before element is the ring when active\n '::before': { color: tokens.colorBrandStroke1 },\n },\n brand: {\n color: tokens.colorNeutralForegroundStaticInverted,\n backgroundColor: tokens.colorBrandBackgroundStatic,\n '::before': { color: tokens.colorBrandStroke1 },\n },\n 'dark-red': {\n color: tokens.colorPaletteDarkRedForeground2,\n backgroundColor: tokens.colorPaletteDarkRedBackground2,\n '::before': { color: tokens.colorPaletteDarkRedBorderActive },\n },\n cranberry: {\n color: tokens.colorPaletteCranberryForeground2,\n backgroundColor: tokens.colorPaletteCranberryBackground2,\n '::before': { color: tokens.colorPaletteCranberryBorderActive },\n },\n red: {\n color: tokens.colorPaletteRedForeground2,\n backgroundColor: tokens.colorPaletteRedBackground2,\n '::before': { color: tokens.colorPaletteRedBorderActive },\n },\n pumpkin: {\n color: tokens.colorPalettePumpkinForeground2,\n backgroundColor: tokens.colorPalettePumpkinBackground2,\n '::before': { color: tokens.colorPalettePumpkinBorderActive },\n },\n peach: {\n color: tokens.colorPalettePeachForeground2,\n backgroundColor: tokens.colorPalettePeachBackground2,\n '::before': { color: tokens.colorPalettePeachBorderActive },\n },\n marigold: {\n color: tokens.colorPaletteMarigoldForeground2,\n backgroundColor: tokens.colorPaletteMarigoldBackground2,\n '::before': { color: tokens.colorPaletteMarigoldBorderActive },\n },\n gold: {\n color: tokens.colorPaletteGoldForeground2,\n backgroundColor: tokens.colorPaletteGoldBackground2,\n '::before': { color: tokens.colorPaletteGoldBorderActive },\n },\n brass: {\n color: tokens.colorPaletteBrassForeground2,\n backgroundColor: tokens.colorPaletteBrassBackground2,\n '::before': { color: tokens.colorPaletteBrassBorderActive },\n },\n brown: {\n color: tokens.colorPaletteBrownForeground2,\n backgroundColor: tokens.colorPaletteBrownBackground2,\n '::before': { color: tokens.colorPaletteBrownBorderActive },\n },\n forest: {\n color: tokens.colorPaletteForestForeground2,\n backgroundColor: tokens.colorPaletteForestBackground2,\n '::before': { color: tokens.colorPaletteForestBorderActive },\n },\n seafoam: {\n color: tokens.colorPaletteSeafoamForeground2,\n backgroundColor: tokens.colorPaletteSeafoamBackground2,\n '::before': { color: tokens.colorPaletteSeafoamBorderActive },\n },\n 'dark-green': {\n color: tokens.colorPaletteDarkGreenForeground2,\n backgroundColor: tokens.colorPaletteDarkGreenBackground2,\n '::before': { color: tokens.colorPaletteDarkGreenBorderActive },\n },\n 'light-teal': {\n color: tokens.colorPaletteLightTealForeground2,\n backgroundColor: tokens.colorPaletteLightTealBackground2,\n '::before': { color: tokens.colorPaletteLightTealBorderActive },\n },\n teal: {\n color: tokens.colorPaletteTealForeground2,\n backgroundColor: tokens.colorPaletteTealBackground2,\n '::before': { color: tokens.colorPaletteTealBorderActive },\n },\n steel: {\n color: tokens.colorPaletteSteelForeground2,\n backgroundColor: tokens.colorPaletteSteelBackground2,\n '::before': { color: tokens.colorPaletteSteelBorderActive },\n },\n blue: {\n color: tokens.colorPaletteBlueForeground2,\n backgroundColor: tokens.colorPaletteBlueBackground2,\n '::before': { color: tokens.colorPaletteBlueBorderActive },\n },\n 'royal-blue': {\n color: tokens.colorPaletteRoyalBlueForeground2,\n backgroundColor: tokens.colorPaletteRoyalBlueBackground2,\n '::before': { color: tokens.colorPaletteRoyalBlueBorderActive },\n },\n cornflower: {\n color: tokens.colorPaletteCornflowerForeground2,\n backgroundColor: tokens.colorPaletteCornflowerBackground2,\n '::before': { color: tokens.colorPaletteCornflowerBorderActive },\n },\n navy: {\n color: tokens.colorPaletteNavyForeground2,\n backgroundColor: tokens.colorPaletteNavyBackground2,\n '::before': { color: tokens.colorPaletteNavyBorderActive },\n },\n lavender: {\n color: tokens.colorPaletteLavenderForeground2,\n backgroundColor: tokens.colorPaletteLavenderBackground2,\n '::before': { color: tokens.colorPaletteLavenderBorderActive },\n },\n purple: {\n color: tokens.colorPalettePurpleForeground2,\n backgroundColor: tokens.colorPalettePurpleBackground2,\n '::before': { color: tokens.colorPalettePurpleBorderActive },\n },\n grape: {\n color: tokens.colorPaletteGrapeForeground2,\n backgroundColor: tokens.colorPaletteGrapeBackground2,\n '::before': { color: tokens.colorPaletteGrapeBorderActive },\n },\n lilac: {\n color: tokens.colorPaletteLilacForeground2,\n backgroundColor: tokens.colorPaletteLilacBackground2,\n '::before': { color: tokens.colorPaletteLilacBorderActive },\n },\n pink: {\n color: tokens.colorPalettePinkForeground2,\n backgroundColor: tokens.colorPalettePinkBackground2,\n '::before': { color: tokens.colorPalettePinkBorderActive },\n },\n magenta: {\n color: tokens.colorPaletteMagentaForeground2,\n backgroundColor: tokens.colorPaletteMagentaBackground2,\n '::before': { color: tokens.colorPaletteMagentaBorderActive },\n },\n plum: {\n color: tokens.colorPalettePlumForeground2,\n backgroundColor: tokens.colorPalettePlumBackground2,\n '::before': { color: tokens.colorPalettePlumBorderActive },\n },\n beige: {\n color: tokens.colorPaletteBeigeForeground2,\n backgroundColor: tokens.colorPaletteBeigeBackground2,\n '::before': { color: tokens.colorPaletteBeigeBorderActive },\n },\n mink: {\n color: tokens.colorPaletteMinkForeground2,\n backgroundColor: tokens.colorPaletteMinkBackground2,\n '::before': { color: tokens.colorPaletteMinkBorderActive },\n },\n platinum: {\n color: tokens.colorPalettePlatinumForeground2,\n backgroundColor: tokens.colorPalettePlatinumBackground2,\n '::before': { color: tokens.colorPalettePlatinumBorderActive },\n },\n anchor: {\n color: tokens.colorPaletteAnchorForeground2,\n backgroundColor: tokens.colorPaletteAnchorBackground2,\n '::before': { color: tokens.colorPaletteAnchorBorderActive },\n },\n});\n\nexport const useAvatarStyles_unstable = (state: AvatarState): AvatarState => {\n const { size, shape, active, activeAppearance, color } = state;\n\n const rootClassName = useRootClassName();\n const imageClassName = useImageClassName();\n const iconInitialsClassName = useIconInitialsClassName();\n const styles = useStyles();\n const sizeStyles = useSizeStyles();\n const colorStyles = useColorStyles();\n\n const rootClasses = [rootClassName, size !== 32 && sizeStyles[size], colorStyles[color]];\n\n if (size <= 24) {\n rootClasses.push(styles.textCaption2Strong);\n } else if (size <= 28) {\n rootClasses.push(styles.textCaption1Strong);\n } else if (size <= 40) {\n // Default text size included in useRootClassName\n } else if (size <= 56) {\n rootClasses.push(styles.textSubtitle2);\n } else if (size <= 96) {\n rootClasses.push(styles.textSubtitle1);\n } else {\n rootClasses.push(styles.textTitle3);\n }\n\n if (shape === 'square') {\n if (size <= 24) {\n rootClasses.push(styles.squareSmall);\n } else if (size <= 48) {\n rootClasses.push(styles.squareMedium);\n } else if (size <= 72) {\n rootClasses.push(styles.squareLarge);\n } else {\n rootClasses.push(styles.squareXLarge);\n }\n }\n\n if (active === 'active' || active === 'inactive') {\n rootClasses.push(styles.activeOrInactive);\n\n if (activeAppearance === 'ring' || activeAppearance === 'ring-shadow') {\n rootClasses.push(styles.ring);\n\n if (size <= 48) {\n rootClasses.push(styles.ringThick);\n } else if (size <= 64) {\n rootClasses.push(styles.ringThicker);\n } else {\n rootClasses.push(styles.ringThickest);\n }\n }\n\n if (activeAppearance === 'shadow' || activeAppearance === 'ring-shadow') {\n if (size <= 28) {\n rootClasses.push(styles.shadow4);\n } else if (size <= 48) {\n rootClasses.push(styles.shadow8);\n } else if (size <= 64) {\n rootClasses.push(styles.shadow16);\n } else {\n rootClasses.push(styles.shadow28);\n }\n }\n\n // Note: The inactive style overrides some of the activeAppearance styles and must be applied after them\n if (active === 'inactive') {\n rootClasses.push(styles.inactive);\n }\n }\n\n state.root.className = mergeClasses(avatarClassNames.root, ...rootClasses, state.root.className);\n\n if (state.badge) {\n state.badge.className = mergeClasses(\n avatarClassNames.badge,\n styles.badge,\n size >= 64 && styles.badgeLarge,\n state.badge.className,\n );\n }\n\n if (state.image) {\n state.image.className = mergeClasses(avatarClassNames.image, imageClassName, state.image.className);\n }\n\n if (state.initials) {\n state.initials.className = mergeClasses(avatarClassNames.initials, iconInitialsClassName, state.initials.className);\n }\n\n if (state.icon) {\n let iconSizeClass;\n if (size <= 16) {\n iconSizeClass = styles.icon12;\n } else if (size <= 24) {\n iconSizeClass = styles.icon16;\n } else if (size <= 40) {\n iconSizeClass = styles.icon20;\n } else if (size <= 48) {\n iconSizeClass = styles.icon24;\n } else if (size <= 56) {\n iconSizeClass = styles.icon28;\n } else if (size <= 72) {\n iconSizeClass = styles.icon32;\n } else {\n iconSizeClass = styles.icon48;\n }\n\n state.icon.className = mergeClasses(\n avatarClassNames.icon,\n iconInitialsClassName,\n iconSizeClass,\n state.icon.className,\n );\n }\n\n return state;\n};\n"]}
|
|
@@ -24,36 +24,23 @@ const animations = {
|
|
|
24
24
|
normalEase: react_theme_1.tokens.curveEasyEase,
|
|
25
25
|
nullEasing: react_theme_1.tokens.curveLinear
|
|
26
26
|
};
|
|
27
|
+
const useRootClassName = /*#__PURE__*/react_1.__resetStyles("rz243wu", null, [".rz243wu{display:inline-block;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;position:relative;vertical-align:middle;border-radius:var(--borderRadiusCircular);font-family:var(--fontFamilyBase);font-weight:var(--fontWeightSemibold);font-size:var(--fontSizeBase300);width:32px;height:32px;}"]);
|
|
28
|
+
const useImageClassName = /*#__PURE__*/react_1.__resetStyles("r136dc0n", "rjly0nl", [".r136dc0n{position:absolute;top:0;left:0;width:100%;height:100%;border-radius:inherit;object-fit:cover;vertical-align:top;}", ".rjly0nl{position:absolute;top:0;right:0;width:100%;height:100%;border-radius:inherit;object-fit:cover;vertical-align:top;}"]);
|
|
29
|
+
const useIconInitialsClassName = /*#__PURE__*/react_1.__resetStyles("rip04v", "r31uzil", [".rip04v{position:absolute;box-sizing:border-box;top:0;left:0;width:100%;height:100%;line-height:1;border:var(--strokeWidthThin) solid var(--colorTransparentStroke);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;vertical-align:center;text-align:center;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;border-radius:inherit;}", ".r31uzil{position:absolute;box-sizing:border-box;top:0;right:0;width:100%;height:100%;line-height:1;border:var(--strokeWidthThin) solid var(--colorTransparentStroke);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;vertical-align:center;text-align:center;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;border-radius:inherit;}"]);
|
|
27
30
|
const useStyles = /*#__PURE__*/react_1.__styles({
|
|
28
|
-
root: {
|
|
29
|
-
mc9l5x: "f14t3ns0",
|
|
30
|
-
Bnnss6s: "fi64zpg",
|
|
31
|
-
qhf8xq: "f10pi13n",
|
|
32
|
-
ha4doy: "fmrv4ls",
|
|
33
|
-
Bbmb7ep: ["f8fbkgy", "f1nfllo7"],
|
|
34
|
-
Beyfa6y: ["f1nfllo7", "f8fbkgy"],
|
|
35
|
-
B7oj6ja: ["f1djnp8u", "f1s8kh49"],
|
|
36
|
-
Btl43ni: ["f1s8kh49", "f1djnp8u"],
|
|
37
|
-
Bahqtrf: "fk6fouc",
|
|
38
|
-
Bhrd7zp: "fl43uef"
|
|
39
|
-
},
|
|
40
31
|
textCaption2Strong: {
|
|
41
|
-
Be2twd7: "f13mqy1h"
|
|
42
|
-
Bhrd7zp: "fl43uef"
|
|
32
|
+
Be2twd7: "f13mqy1h"
|
|
43
33
|
},
|
|
44
34
|
textCaption1Strong: {
|
|
45
35
|
Be2twd7: "fy9rknc"
|
|
46
36
|
},
|
|
47
|
-
textBody1Strong: {
|
|
48
|
-
Be2twd7: "fkhj508"
|
|
49
|
-
},
|
|
50
37
|
textSubtitle2: {
|
|
51
38
|
Be2twd7: "fod5ikn"
|
|
52
39
|
},
|
|
53
40
|
textSubtitle1: {
|
|
54
41
|
Be2twd7: "f1pp30po"
|
|
55
42
|
},
|
|
56
|
-
|
|
43
|
+
textTitle3: {
|
|
57
44
|
Be2twd7: "f1x0m3f5"
|
|
58
45
|
},
|
|
59
46
|
squareSmall: {
|
|
@@ -178,50 +165,6 @@ const useStyles = /*#__PURE__*/react_1.__styles({
|
|
|
178
165
|
badgeLarge: {
|
|
179
166
|
E5pizo: "f1nayfl2"
|
|
180
167
|
},
|
|
181
|
-
image: {
|
|
182
|
-
qhf8xq: "f1euv43f",
|
|
183
|
-
Bhzewxz: "f15twtuk",
|
|
184
|
-
oyh7mz: ["f1vgc2s3", "f1e31b4d"],
|
|
185
|
-
a9b677: "fly5x3f",
|
|
186
|
-
Bqenvij: "f1l02sjl",
|
|
187
|
-
Bbmb7ep: ["f1d9uwra", "fzibvwi"],
|
|
188
|
-
Beyfa6y: ["fzibvwi", "f1d9uwra"],
|
|
189
|
-
B7oj6ja: ["fuoumxm", "f1vtqnvc"],
|
|
190
|
-
Btl43ni: ["f1vtqnvc", "fuoumxm"],
|
|
191
|
-
st4lth: "f1ps3kmd",
|
|
192
|
-
ha4doy: "f12kltsn"
|
|
193
|
-
},
|
|
194
|
-
iconInitials: {
|
|
195
|
-
qhf8xq: "f1euv43f",
|
|
196
|
-
B7ck84d: "f1ewtqcl",
|
|
197
|
-
Bhzewxz: "f15twtuk",
|
|
198
|
-
oyh7mz: ["f1vgc2s3", "f1e31b4d"],
|
|
199
|
-
a9b677: "fly5x3f",
|
|
200
|
-
Bqenvij: "f1l02sjl",
|
|
201
|
-
Bg96gwp: "fp6vxd",
|
|
202
|
-
B4j52fo: "f192inf7",
|
|
203
|
-
Bekrc4i: ["f5tn483", "f1ojsxk5"],
|
|
204
|
-
Bn0qgzm: "f1vxd6vx",
|
|
205
|
-
ibv6hh: ["f1ojsxk5", "f5tn483"],
|
|
206
|
-
icvyot: "fzkkow9",
|
|
207
|
-
vrafjx: ["fcdblym", "fjik90z"],
|
|
208
|
-
oivjwe: "fg706s2",
|
|
209
|
-
wvpqe5: ["fjik90z", "fcdblym"],
|
|
210
|
-
g2u3we: "fghlq4f",
|
|
211
|
-
h3c5rm: ["f1gn591s", "fjscplz"],
|
|
212
|
-
B9xav0g: "fb073pr",
|
|
213
|
-
zhjwy3: ["fjscplz", "f1gn591s"],
|
|
214
|
-
mc9l5x: "f22iagw",
|
|
215
|
-
Bt984gj: "f122n59",
|
|
216
|
-
Brf1p80: "f4d9j23",
|
|
217
|
-
ha4doy: "fa4t5tb",
|
|
218
|
-
fsow6f: "f17mccla",
|
|
219
|
-
famaaq: "f1xqy1su",
|
|
220
|
-
Bbmb7ep: ["f1d9uwra", "fzibvwi"],
|
|
221
|
-
Beyfa6y: ["fzibvwi", "f1d9uwra"],
|
|
222
|
-
B7oj6ja: ["fuoumxm", "f1vtqnvc"],
|
|
223
|
-
Btl43ni: ["f1vtqnvc", "fuoumxm"]
|
|
224
|
-
},
|
|
225
168
|
icon12: {
|
|
226
169
|
Be2twd7: "f1ugzwwg"
|
|
227
170
|
},
|
|
@@ -244,7 +187,7 @@ const useStyles = /*#__PURE__*/react_1.__styles({
|
|
|
244
187
|
Be2twd7: "f18m8u13"
|
|
245
188
|
}
|
|
246
189
|
}, {
|
|
247
|
-
d: [".
|
|
190
|
+
d: [".f13mqy1h{font-size:var(--fontSizeBase100);}", ".fy9rknc{font-size:var(--fontSizeBase200);}", ".fod5ikn{font-size:var(--fontSizeBase400);}", ".f1pp30po{font-size:var(--fontSizeBase500);}", ".f1x0m3f5{font-size:var(--fontSizeBase600);}", ".f1g3puop{border-bottom-right-radius:var(--borderRadiusSmall);}", ".fi2rrw2{border-bottom-left-radius:var(--borderRadiusSmall);}", ".f1rstyi9{border-top-right-radius:var(--borderRadiusSmall);}", ".f1s4nn1u{border-top-left-radius:var(--borderRadiusSmall);}", ".f1aa9q02{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f16jpd5f{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f1jar5jt{border-top-right-radius:var(--borderRadiusMedium);}", ".fyu767a{border-top-left-radius:var(--borderRadiusMedium);}", ".f1ldthgs{border-bottom-right-radius:var(--borderRadiusLarge);}", ".frrelxk{border-bottom-left-radius:var(--borderRadiusLarge);}", ".fobrfso{border-top-right-radius:var(--borderRadiusLarge);}", ".ffisxpw{border-top-left-radius:var(--borderRadiusLarge);}", ".fnivh3a{border-bottom-right-radius:var(--borderRadiusXLarge);}", ".fc7yr5o{border-bottom-left-radius:var(--borderRadiusXLarge);}", ".f1el4m67{border-top-right-radius:var(--borderRadiusXLarge);}", ".f8yange{border-top-left-radius:var(--borderRadiusXLarge);}", ".ftfx35i{-webkit-transform:perspective(1px);-moz-transform:perspective(1px);-ms-transform:perspective(1px);transform:perspective(1px);}", ".fv0atk9{transition-property:transform,opacity;}", ".f1iry5bo{transition-duration:var(--durationUltraSlow),var(--durationFaster);}", ".f1gyuh7d{transition-delay:var(--curveEasyEaseMax),var(--curveLinear);}", ".f1wl9k8s::before{content:\"\";}", ".f1j7ml58::before{position:absolute;}", ".ffi060y::before{top:0;}", ".f1fzr1x6::before{left:0;}", ".f1f351id::before{right:0;}", ".fchca7p::before{bottom:0;}", ".f1kd9phw::before{border-bottom-right-radius:inherit;}", ".fyf2ch2::before{border-bottom-left-radius:inherit;}", ".f1gnrg9b::before{border-top-right-radius:inherit;}", ".f1xx2lx6::before{border-top-left-radius:inherit;}", ".f1e9wvyh::before{transition-property:margin,opacity;}", ".f1vyz52m::before{transition-duration:var(--durationUltraSlow),var(--durationSlower);}", ".f1rjhkxy::before{transition-delay:var(--curveEasyEaseMax),var(--curveLinear);}", ".f163fonl::before{border-top-style:solid;}", ".f1yq6w5o::before{border-right-style:solid;}", ".f1jpmc5p::before{border-left-style:solid;}", ".f11yjt3y::before{border-bottom-style:solid;}", ".f1rbtjc9::before{margin-top:calc(-2 * var(--strokeWidthThick));}", ".f1wm0e7m::before{margin-right:calc(-2 * var(--strokeWidthThick));}", ".f1o0l8kp::before{margin-left:calc(-2 * var(--strokeWidthThick));}", ".f1tz5420::before{margin-bottom:calc(-2 * var(--strokeWidthThick));}", ".f1q30tuz::before{border-top-width:var(--strokeWidthThick);}", ".f9c0djs::before{border-right-width:var(--strokeWidthThick);}", ".fcwzx2y::before{border-left-width:var(--strokeWidthThick);}", ".f1hdqo1a::before{border-bottom-width:var(--strokeWidthThick);}", ".fk7ejgl::before{margin-top:calc(-2 * var(--strokeWidthThicker));}", ".f12sbt0w::before{margin-right:calc(-2 * var(--strokeWidthThicker));}", ".f1tnh028::before{margin-left:calc(-2 * var(--strokeWidthThicker));}", ".fcrsff4::before{margin-bottom:calc(-2 * var(--strokeWidthThicker));}", ".f1jrge4j::before{border-top-width:var(--strokeWidthThicker);}", ".fc2vpa6::before{border-right-width:var(--strokeWidthThicker);}", ".f133djwz::before{border-left-width:var(--strokeWidthThicker);}", ".f9hcsm3::before{border-bottom-width:var(--strokeWidthThicker);}", ".fl3e39p::before{margin-top:calc(-2 * var(--strokeWidthThickest));}", ".f14m8wrz::before{margin-right:calc(-2 * var(--strokeWidthThickest));}", ".fckzhtt::before{margin-left:calc(-2 * var(--strokeWidthThickest));}", ".fnxq6pw::before{margin-bottom:calc(-2 * var(--strokeWidthThickest));}", ".fr6r3yi::before{border-top-width:var(--strokeWidthThickest);}", ".ftxoq8w::before{border-right-width:var(--strokeWidthThickest);}", ".f4gs2h8::before{border-left-width:var(--strokeWidthThickest);}", ".f9gga8r::before{border-bottom-width:var(--strokeWidthThickest);}", ".f196qwgu::before{box-shadow:var(--shadow4);}", ".fut48mo::before{box-shadow:var(--shadow8);}", ".fh2kfig::before{box-shadow:var(--shadow16);}", ".f4c2u2p::before{box-shadow:var(--shadow28);}", ".fp25eh{opacity:0.8;}", ".f1clczzi{-webkit-transform:scale(0.875);-moz-transform:scale(0.875);-ms-transform:scale(0.875);transform:scale(0.875);}", ".fxm264b{transition-delay:var(--curveDecelerateMin),var(--curveLinear);}", ".fe3o830::before{margin-top:0;}", ".fzynn9s::before{margin-right:0;}", ".f1z0ukd1::before{margin-left:0;}", ".f1kyqvp9::before{margin-bottom:0;}", ".f1dhznln::before{opacity:0;}", ".f1yb2g89::before{transition-delay:var(--curveDecelerateMin),var(--curveLinear);}", ".f1euv43f{position:absolute;}", ".f1yab3r1{bottom:0;}", ".f1e31b4d{right:0;}", ".f1vgc2s3{left:0;}", ".ffo9j2l{box-shadow:0 0 0 var(--strokeWidthThin) var(--colorNeutralBackground1);}", ".f1nayfl2{box-shadow:0 0 0 var(--strokeWidthThick) var(--colorNeutralBackground1);}", ".f1ugzwwg{font-size:12px;}", ".f4ybsrx{font-size:16px;}", ".fe5j1ua{font-size:20px;}", ".f1rt2boy{font-size:24px;}", ".f24l1pt{font-size:28px;}", ".ffl51b{font-size:32px;}", ".f18m8u13{font-size:48px;}"],
|
|
248
191
|
m: [["@media screen and (prefers-reduced-motion: reduce){.f1onx1g3{transition-duration:0.01ms;}}", {
|
|
249
192
|
m: "screen and (prefers-reduced-motion: reduce)"
|
|
250
193
|
}], ["@media screen and (prefers-reduced-motion: reduce){.f1ak47q9::before{transition-duration:0.01ms;}}", {
|
|
@@ -493,22 +436,25 @@ const useAvatarStyles_unstable = state => {
|
|
|
493
436
|
activeAppearance,
|
|
494
437
|
color
|
|
495
438
|
} = state;
|
|
439
|
+
const rootClassName = useRootClassName();
|
|
440
|
+
const imageClassName = useImageClassName();
|
|
441
|
+
const iconInitialsClassName = useIconInitialsClassName();
|
|
496
442
|
const styles = useStyles();
|
|
497
443
|
const sizeStyles = exports.useSizeStyles();
|
|
498
444
|
const colorStyles = useColorStyles();
|
|
499
|
-
const rootClasses = [
|
|
445
|
+
const rootClasses = [rootClassName, size !== 32 && sizeStyles[size], colorStyles[color]];
|
|
500
446
|
if (size <= 24) {
|
|
501
447
|
rootClasses.push(styles.textCaption2Strong);
|
|
502
448
|
} else if (size <= 28) {
|
|
503
449
|
rootClasses.push(styles.textCaption1Strong);
|
|
504
450
|
} else if (size <= 40) {
|
|
505
|
-
|
|
451
|
+
// Default text size included in useRootClassName
|
|
506
452
|
} else if (size <= 56) {
|
|
507
453
|
rootClasses.push(styles.textSubtitle2);
|
|
508
454
|
} else if (size <= 96) {
|
|
509
455
|
rootClasses.push(styles.textSubtitle1);
|
|
510
456
|
} else {
|
|
511
|
-
rootClasses.push(styles.
|
|
457
|
+
rootClasses.push(styles.textTitle3);
|
|
512
458
|
}
|
|
513
459
|
if (shape === 'square') {
|
|
514
460
|
if (size <= 24) {
|
|
@@ -554,10 +500,10 @@ const useAvatarStyles_unstable = state => {
|
|
|
554
500
|
state.badge.className = react_1.mergeClasses(exports.avatarClassNames.badge, styles.badge, size >= 64 && styles.badgeLarge, state.badge.className);
|
|
555
501
|
}
|
|
556
502
|
if (state.image) {
|
|
557
|
-
state.image.className = react_1.mergeClasses(exports.avatarClassNames.image,
|
|
503
|
+
state.image.className = react_1.mergeClasses(exports.avatarClassNames.image, imageClassName, state.image.className);
|
|
558
504
|
}
|
|
559
505
|
if (state.initials) {
|
|
560
|
-
state.initials.className = react_1.mergeClasses(exports.avatarClassNames.initials,
|
|
506
|
+
state.initials.className = react_1.mergeClasses(exports.avatarClassNames.initials, iconInitialsClassName, state.initials.className);
|
|
561
507
|
}
|
|
562
508
|
if (state.icon) {
|
|
563
509
|
let iconSizeClass;
|
|
@@ -576,7 +522,7 @@ const useAvatarStyles_unstable = state => {
|
|
|
576
522
|
} else {
|
|
577
523
|
iconSizeClass = styles.icon48;
|
|
578
524
|
}
|
|
579
|
-
state.icon.className = react_1.mergeClasses(exports.avatarClassNames.icon,
|
|
525
|
+
state.icon.className = react_1.mergeClasses(exports.avatarClassNames.icon, iconInitialsClassName, iconSizeClass, state.icon.className);
|
|
580
526
|
}
|
|
581
527
|
return state;
|
|
582
528
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"mappings":"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","names":["exports","root","image","initials","icon","badge","animations","fastOutSlowInMax","react_theme_1","curveDecelerateMax","fastOutSlowInMid","curveDecelerateMid","fastOutSlowInMin","curveDecelerateMin","slowOutFastInMax","curveAccelerateMax","slowOutFastInMid","curveAccelerateMid","slowOutFastInMin","curveAccelerateMin","fastEase","curveEasyEaseMax","normalEase","curveEasyEase","nullEasing","curveLinear","useStyles","react_1","useColorStyles","useAvatarStyles_unstable","state","size","shape","active","activeAppearance","color","styles","sizeStyles","colorStyles","rootClasses","push","textCaption2Strong","textCaption1Strong","textBody1Strong","textSubtitle2","textSubtitle1","textTitle","squareSmall","squareMedium","squareLarge","squareXLarge","activeOrInactive","ring","ringThick","ringThicker","ringThickest","shadow4","shadow8","shadow16","shadow28","inactive","className","badgeLarge","iconInitials","iconSizeClass","icon12","icon16","icon20","icon24","icon28","icon32","icon48"],"sourceRoot":"../src/","sources":["packages/react-components/react-avatar/src/components/Avatar/useAvatarStyles.ts"],"sourcesContent":["import { mergeClasses, makeStyles, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { AvatarSlots, AvatarState } from './Avatar.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const avatarClassNames: SlotClassNames<AvatarSlots> = {\n root: 'fui-Avatar',\n image: 'fui-Avatar__image',\n initials: 'fui-Avatar__initials',\n icon: 'fui-Avatar__icon',\n badge: 'fui-Avatar__badge',\n};\n\nconst animations = {\n fastOutSlowInMax: tokens.curveDecelerateMax,\n fastOutSlowInMid: tokens.curveDecelerateMid,\n fastOutSlowInMin: tokens.curveDecelerateMin,\n slowOutFastInMax: tokens.curveAccelerateMax,\n slowOutFastInMid: tokens.curveAccelerateMid,\n slowOutFastInMin: tokens.curveAccelerateMin,\n fastEase: tokens.curveEasyEaseMax,\n normalEase: tokens.curveEasyEase,\n nullEasing: tokens.curveLinear,\n};\n\nconst useStyles = makeStyles({\n root: {\n display: 'inline-block',\n flexShrink: 0,\n position: 'relative',\n verticalAlign: 'middle',\n ...shorthands.borderRadius(tokens.borderRadiusCircular),\n fontFamily: tokens.fontFamilyBase,\n fontWeight: tokens.fontWeightSemibold,\n },\n\n textCaption2Strong: {\n fontSize: tokens.fontSizeBase100,\n fontWeight: tokens.fontWeightSemibold,\n },\n textCaption1Strong: { fontSize: tokens.fontSizeBase200 },\n textBody1Strong: { fontSize: tokens.fontSizeBase300 },\n textSubtitle2: { fontSize: tokens.fontSizeBase400 },\n textSubtitle1: { fontSize: tokens.fontSizeBase500 },\n textTitle: { fontSize: tokens.fontSizeBase600 },\n\n squareSmall: {\n ...shorthands.borderRadius(tokens.borderRadiusSmall),\n },\n squareMedium: {\n ...shorthands.borderRadius(tokens.borderRadiusMedium),\n },\n squareLarge: {\n ...shorthands.borderRadius(tokens.borderRadiusLarge),\n },\n squareXLarge: {\n ...shorthands.borderRadius(tokens.borderRadiusXLarge),\n },\n\n activeOrInactive: {\n transform: 'perspective(1px)', // Work-around for text pixel snapping at the end of the animation\n transitionProperty: 'transform, opacity',\n transitionDuration: `${tokens.durationUltraSlow}, ${tokens.durationFaster}`,\n transitionDelay: `${animations.fastEase}, ${animations.nullEasing}`,\n\n '@media screen and (prefers-reduced-motion: reduce)': {\n transitionDuration: '0.01ms',\n },\n\n '::before': {\n content: '\"\"',\n position: 'absolute',\n top: 0,\n left: 0,\n bottom: 0,\n right: 0,\n\n ...shorthands.borderRadius('inherit'),\n transitionProperty: 'margin, opacity',\n transitionDuration: `${tokens.durationUltraSlow}, ${tokens.durationSlower}`,\n transitionDelay: `${animations.fastEase}, ${animations.nullEasing}`,\n\n '@media screen and (prefers-reduced-motion: reduce)': {\n transitionDuration: '0.01ms',\n transitionDelay: '0.01ms',\n },\n },\n },\n\n ring: {\n '::before': {\n ...shorthands.borderStyle('solid'),\n },\n },\n ringThick: {\n '::before': {\n ...shorthands.margin(`calc(-2 * ${tokens.strokeWidthThick})`),\n ...shorthands.borderWidth(tokens.strokeWidthThick),\n },\n },\n ringThicker: {\n '::before': {\n ...shorthands.margin(`calc(-2 * ${tokens.strokeWidthThicker})`),\n ...shorthands.borderWidth(tokens.strokeWidthThicker),\n },\n },\n ringThickest: {\n '::before': {\n ...shorthands.margin(`calc(-2 * ${tokens.strokeWidthThickest})`),\n ...shorthands.borderWidth(tokens.strokeWidthThickest),\n },\n },\n\n shadow4: { '::before': { boxShadow: tokens.shadow4 } },\n shadow8: { '::before': { boxShadow: tokens.shadow8 } },\n shadow16: { '::before': { boxShadow: tokens.shadow16 } },\n shadow28: { '::before': { boxShadow: tokens.shadow28 } },\n\n inactive: {\n opacity: '0.8',\n transform: 'scale(0.875)',\n\n transitionProperty: 'transform, opacity',\n transitionDuration: `${tokens.durationUltraSlow}, ${tokens.durationFaster}`,\n transitionDelay: `${animations.fastOutSlowInMin}, ${animations.nullEasing}`,\n\n '@media screen and (prefers-reduced-motion: reduce)': {\n transitionDuration: '0.01ms',\n transitionDelay: '0.01ms',\n },\n\n '::before': {\n ...shorthands.margin(0),\n opacity: 0,\n\n transitionProperty: 'margin, opacity',\n transitionDuration: `${tokens.durationUltraSlow}, ${tokens.durationSlower}`,\n transitionDelay: `${animations.fastOutSlowInMin}, ${animations.nullEasing}`,\n\n '@media screen and (prefers-reduced-motion: reduce)': {\n transitionDuration: '0.01ms',\n transitionDelay: '0.01ms',\n },\n },\n },\n\n badge: {\n position: 'absolute',\n bottom: 0,\n right: 0,\n boxShadow: `0 0 0 ${tokens.strokeWidthThin} ${tokens.colorNeutralBackground1}`,\n },\n badgeLarge: {\n boxShadow: `0 0 0 ${tokens.strokeWidthThick} ${tokens.colorNeutralBackground1}`,\n },\n\n image: {\n position: 'absolute',\n top: 0,\n left: 0,\n width: '100%',\n height: '100%',\n\n ...shorthands.borderRadius('inherit'),\n objectFit: 'cover',\n verticalAlign: 'top',\n },\n\n iconInitials: {\n position: 'absolute',\n boxSizing: 'border-box',\n top: 0,\n left: 0,\n width: '100%',\n height: '100%',\n lineHeight: '1',\n ...shorthands.border(tokens.strokeWidthThin, 'solid', tokens.colorTransparentStroke),\n\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n verticalAlign: 'center',\n textAlign: 'center',\n userSelect: 'none',\n ...shorthands.borderRadius('inherit'),\n },\n\n icon12: { fontSize: '12px' },\n icon16: { fontSize: '16px' },\n icon20: { fontSize: '20px' },\n icon24: { fontSize: '24px' },\n icon28: { fontSize: '28px' },\n icon32: { fontSize: '32px' },\n icon48: { fontSize: '48px' },\n});\n\nexport const useSizeStyles = makeStyles({\n 16: { width: '16px', height: '16px' },\n 20: { width: '20px', height: '20px' },\n 24: { width: '24px', height: '24px' },\n 28: { width: '28px', height: '28px' },\n 32: { width: '32px', height: '32px' },\n 36: { width: '36px', height: '36px' },\n 40: { width: '40px', height: '40px' },\n 48: { width: '48px', height: '48px' },\n 56: { width: '56px', height: '56px' },\n 64: { width: '64px', height: '64px' },\n 72: { width: '72px', height: '72px' },\n 96: { width: '96px', height: '96px' },\n 120: { width: '120px', height: '120px' },\n 128: { width: '128px', height: '128px' },\n});\n\nconst useColorStyles = makeStyles({\n neutral: {\n color: tokens.colorNeutralForeground3,\n backgroundColor: tokens.colorNeutralBackground6,\n // The ::before element is the ring when active\n '::before': { color: tokens.colorBrandStroke1 },\n },\n brand: {\n color: tokens.colorNeutralForegroundStaticInverted,\n backgroundColor: tokens.colorBrandBackgroundStatic,\n '::before': { color: tokens.colorBrandStroke1 },\n },\n 'dark-red': {\n color: tokens.colorPaletteDarkRedForeground2,\n backgroundColor: tokens.colorPaletteDarkRedBackground2,\n '::before': { color: tokens.colorPaletteDarkRedBorderActive },\n },\n cranberry: {\n color: tokens.colorPaletteCranberryForeground2,\n backgroundColor: tokens.colorPaletteCranberryBackground2,\n '::before': { color: tokens.colorPaletteCranberryBorderActive },\n },\n red: {\n color: tokens.colorPaletteRedForeground2,\n backgroundColor: tokens.colorPaletteRedBackground2,\n '::before': { color: tokens.colorPaletteRedBorderActive },\n },\n pumpkin: {\n color: tokens.colorPalettePumpkinForeground2,\n backgroundColor: tokens.colorPalettePumpkinBackground2,\n '::before': { color: tokens.colorPalettePumpkinBorderActive },\n },\n peach: {\n color: tokens.colorPalettePeachForeground2,\n backgroundColor: tokens.colorPalettePeachBackground2,\n '::before': { color: tokens.colorPalettePeachBorderActive },\n },\n marigold: {\n color: tokens.colorPaletteMarigoldForeground2,\n backgroundColor: tokens.colorPaletteMarigoldBackground2,\n '::before': { color: tokens.colorPaletteMarigoldBorderActive },\n },\n gold: {\n color: tokens.colorPaletteGoldForeground2,\n backgroundColor: tokens.colorPaletteGoldBackground2,\n '::before': { color: tokens.colorPaletteGoldBorderActive },\n },\n brass: {\n color: tokens.colorPaletteBrassForeground2,\n backgroundColor: tokens.colorPaletteBrassBackground2,\n '::before': { color: tokens.colorPaletteBrassBorderActive },\n },\n brown: {\n color: tokens.colorPaletteBrownForeground2,\n backgroundColor: tokens.colorPaletteBrownBackground2,\n '::before': { color: tokens.colorPaletteBrownBorderActive },\n },\n forest: {\n color: tokens.colorPaletteForestForeground2,\n backgroundColor: tokens.colorPaletteForestBackground2,\n '::before': { color: tokens.colorPaletteForestBorderActive },\n },\n seafoam: {\n color: tokens.colorPaletteSeafoamForeground2,\n backgroundColor: tokens.colorPaletteSeafoamBackground2,\n '::before': { color: tokens.colorPaletteSeafoamBorderActive },\n },\n 'dark-green': {\n color: tokens.colorPaletteDarkGreenForeground2,\n backgroundColor: tokens.colorPaletteDarkGreenBackground2,\n '::before': { color: tokens.colorPaletteDarkGreenBorderActive },\n },\n 'light-teal': {\n color: tokens.colorPaletteLightTealForeground2,\n backgroundColor: tokens.colorPaletteLightTealBackground2,\n '::before': { color: tokens.colorPaletteLightTealBorderActive },\n },\n teal: {\n color: tokens.colorPaletteTealForeground2,\n backgroundColor: tokens.colorPaletteTealBackground2,\n '::before': { color: tokens.colorPaletteTealBorderActive },\n },\n steel: {\n color: tokens.colorPaletteSteelForeground2,\n backgroundColor: tokens.colorPaletteSteelBackground2,\n '::before': { color: tokens.colorPaletteSteelBorderActive },\n },\n blue: {\n color: tokens.colorPaletteBlueForeground2,\n backgroundColor: tokens.colorPaletteBlueBackground2,\n '::before': { color: tokens.colorPaletteBlueBorderActive },\n },\n 'royal-blue': {\n color: tokens.colorPaletteRoyalBlueForeground2,\n backgroundColor: tokens.colorPaletteRoyalBlueBackground2,\n '::before': { color: tokens.colorPaletteRoyalBlueBorderActive },\n },\n cornflower: {\n color: tokens.colorPaletteCornflowerForeground2,\n backgroundColor: tokens.colorPaletteCornflowerBackground2,\n '::before': { color: tokens.colorPaletteCornflowerBorderActive },\n },\n navy: {\n color: tokens.colorPaletteNavyForeground2,\n backgroundColor: tokens.colorPaletteNavyBackground2,\n '::before': { color: tokens.colorPaletteNavyBorderActive },\n },\n lavender: {\n color: tokens.colorPaletteLavenderForeground2,\n backgroundColor: tokens.colorPaletteLavenderBackground2,\n '::before': { color: tokens.colorPaletteLavenderBorderActive },\n },\n purple: {\n color: tokens.colorPalettePurpleForeground2,\n backgroundColor: tokens.colorPalettePurpleBackground2,\n '::before': { color: tokens.colorPalettePurpleBorderActive },\n },\n grape: {\n color: tokens.colorPaletteGrapeForeground2,\n backgroundColor: tokens.colorPaletteGrapeBackground2,\n '::before': { color: tokens.colorPaletteGrapeBorderActive },\n },\n lilac: {\n color: tokens.colorPaletteLilacForeground2,\n backgroundColor: tokens.colorPaletteLilacBackground2,\n '::before': { color: tokens.colorPaletteLilacBorderActive },\n },\n pink: {\n color: tokens.colorPalettePinkForeground2,\n backgroundColor: tokens.colorPalettePinkBackground2,\n '::before': { color: tokens.colorPalettePinkBorderActive },\n },\n magenta: {\n color: tokens.colorPaletteMagentaForeground2,\n backgroundColor: tokens.colorPaletteMagentaBackground2,\n '::before': { color: tokens.colorPaletteMagentaBorderActive },\n },\n plum: {\n color: tokens.colorPalettePlumForeground2,\n backgroundColor: tokens.colorPalettePlumBackground2,\n '::before': { color: tokens.colorPalettePlumBorderActive },\n },\n beige: {\n color: tokens.colorPaletteBeigeForeground2,\n backgroundColor: tokens.colorPaletteBeigeBackground2,\n '::before': { color: tokens.colorPaletteBeigeBorderActive },\n },\n mink: {\n color: tokens.colorPaletteMinkForeground2,\n backgroundColor: tokens.colorPaletteMinkBackground2,\n '::before': { color: tokens.colorPaletteMinkBorderActive },\n },\n platinum: {\n color: tokens.colorPalettePlatinumForeground2,\n backgroundColor: tokens.colorPalettePlatinumBackground2,\n '::before': { color: tokens.colorPalettePlatinumBorderActive },\n },\n anchor: {\n color: tokens.colorPaletteAnchorForeground2,\n backgroundColor: tokens.colorPaletteAnchorBackground2,\n '::before': { color: tokens.colorPaletteAnchorBorderActive },\n },\n});\n\nexport const useAvatarStyles_unstable = (state: AvatarState): AvatarState => {\n const { size, shape, active, activeAppearance, color } = state;\n\n const styles = useStyles();\n const sizeStyles = useSizeStyles();\n const colorStyles = useColorStyles();\n\n const rootClasses = [styles.root, sizeStyles[size], colorStyles[color]];\n\n if (size <= 24) {\n rootClasses.push(styles.textCaption2Strong);\n } else if (size <= 28) {\n rootClasses.push(styles.textCaption1Strong);\n } else if (size <= 40) {\n rootClasses.push(styles.textBody1Strong);\n } else if (size <= 56) {\n rootClasses.push(styles.textSubtitle2);\n } else if (size <= 96) {\n rootClasses.push(styles.textSubtitle1);\n } else {\n rootClasses.push(styles.textTitle);\n }\n\n if (shape === 'square') {\n if (size <= 24) {\n rootClasses.push(styles.squareSmall);\n } else if (size <= 48) {\n rootClasses.push(styles.squareMedium);\n } else if (size <= 72) {\n rootClasses.push(styles.squareLarge);\n } else {\n rootClasses.push(styles.squareXLarge);\n }\n }\n\n if (active === 'active' || active === 'inactive') {\n rootClasses.push(styles.activeOrInactive);\n\n if (activeAppearance === 'ring' || activeAppearance === 'ring-shadow') {\n rootClasses.push(styles.ring);\n\n if (size <= 48) {\n rootClasses.push(styles.ringThick);\n } else if (size <= 64) {\n rootClasses.push(styles.ringThicker);\n } else {\n rootClasses.push(styles.ringThickest);\n }\n }\n\n if (activeAppearance === 'shadow' || activeAppearance === 'ring-shadow') {\n if (size <= 28) {\n rootClasses.push(styles.shadow4);\n } else if (size <= 48) {\n rootClasses.push(styles.shadow8);\n } else if (size <= 64) {\n rootClasses.push(styles.shadow16);\n } else {\n rootClasses.push(styles.shadow28);\n }\n }\n\n // Note: The inactive style overrides some of the activeAppearance styles and must be applied after them\n if (active === 'inactive') {\n rootClasses.push(styles.inactive);\n }\n }\n\n state.root.className = mergeClasses(avatarClassNames.root, ...rootClasses, state.root.className);\n\n if (state.badge) {\n state.badge.className = mergeClasses(\n avatarClassNames.badge,\n styles.badge,\n size >= 64 && styles.badgeLarge,\n state.badge.className,\n );\n }\n\n if (state.image) {\n state.image.className = mergeClasses(avatarClassNames.image, styles.image, state.image.className);\n }\n\n if (state.initials) {\n state.initials.className = mergeClasses(avatarClassNames.initials, styles.iconInitials, state.initials.className);\n }\n\n if (state.icon) {\n let iconSizeClass;\n if (size <= 16) {\n iconSizeClass = styles.icon12;\n } else if (size <= 24) {\n iconSizeClass = styles.icon16;\n } else if (size <= 40) {\n iconSizeClass = styles.icon20;\n } else if (size <= 48) {\n iconSizeClass = styles.icon24;\n } else if (size <= 56) {\n iconSizeClass = styles.icon28;\n } else if (size <= 72) {\n iconSizeClass = styles.icon32;\n } else {\n iconSizeClass = styles.icon48;\n }\n\n state.icon.className = mergeClasses(\n avatarClassNames.icon,\n styles.iconInitials,\n iconSizeClass,\n state.icon.className,\n );\n }\n\n return state;\n};\n"]}
|
|
1
|
+
{"version":3,"mappings":"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","names":["exports","root","image","initials","icon","badge","animations","fastOutSlowInMax","react_theme_1","curveDecelerateMax","fastOutSlowInMid","curveDecelerateMid","fastOutSlowInMin","curveDecelerateMin","slowOutFastInMax","curveAccelerateMax","slowOutFastInMid","curveAccelerateMid","slowOutFastInMin","curveAccelerateMin","fastEase","curveEasyEaseMax","normalEase","curveEasyEase","nullEasing","curveLinear","useRootClassName","react_1","useImageClassName","useIconInitialsClassName","useStyles","useColorStyles","useAvatarStyles_unstable","state","size","shape","active","activeAppearance","color","rootClassName","imageClassName","iconInitialsClassName","styles","sizeStyles","colorStyles","rootClasses","push","textCaption2Strong","textCaption1Strong","textSubtitle2","textSubtitle1","textTitle3","squareSmall","squareMedium","squareLarge","squareXLarge","activeOrInactive","ring","ringThick","ringThicker","ringThickest","shadow4","shadow8","shadow16","shadow28","inactive","className","badgeLarge","iconSizeClass","icon12","icon16","icon20","icon24","icon28","icon32","icon48"],"sourceRoot":"../src/","sources":["packages/react-components/react-avatar/src/components/Avatar/useAvatarStyles.ts"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { AvatarSlots, AvatarState } from './Avatar.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const avatarClassNames: SlotClassNames<AvatarSlots> = {\n root: 'fui-Avatar',\n image: 'fui-Avatar__image',\n initials: 'fui-Avatar__initials',\n icon: 'fui-Avatar__icon',\n badge: 'fui-Avatar__badge',\n};\n\nconst animations = {\n fastOutSlowInMax: tokens.curveDecelerateMax,\n fastOutSlowInMid: tokens.curveDecelerateMid,\n fastOutSlowInMin: tokens.curveDecelerateMin,\n slowOutFastInMax: tokens.curveAccelerateMax,\n slowOutFastInMid: tokens.curveAccelerateMid,\n slowOutFastInMin: tokens.curveAccelerateMin,\n fastEase: tokens.curveEasyEaseMax,\n normalEase: tokens.curveEasyEase,\n nullEasing: tokens.curveLinear,\n};\n\nconst useRootClassName = makeResetStyles({\n display: 'inline-block',\n flexShrink: 0,\n position: 'relative',\n verticalAlign: 'middle',\n borderRadius: tokens.borderRadiusCircular,\n fontFamily: tokens.fontFamilyBase,\n fontWeight: tokens.fontWeightSemibold,\n fontSize: tokens.fontSizeBase300,\n width: '32px',\n height: '32px',\n});\n\nconst useImageClassName = makeResetStyles({\n position: 'absolute',\n top: 0,\n left: 0,\n width: '100%',\n height: '100%',\n\n borderRadius: 'inherit',\n objectFit: 'cover',\n verticalAlign: 'top',\n});\n\nconst useIconInitialsClassName = makeResetStyles({\n position: 'absolute',\n boxSizing: 'border-box',\n top: 0,\n left: 0,\n width: '100%',\n height: '100%',\n lineHeight: '1',\n border: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStroke}`,\n\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n verticalAlign: 'center',\n textAlign: 'center',\n userSelect: 'none',\n borderRadius: 'inherit',\n});\n\nconst useStyles = makeStyles({\n textCaption2Strong: { fontSize: tokens.fontSizeBase100 },\n textCaption1Strong: { fontSize: tokens.fontSizeBase200 },\n textSubtitle2: { fontSize: tokens.fontSizeBase400 },\n textSubtitle1: { fontSize: tokens.fontSizeBase500 },\n textTitle3: { fontSize: tokens.fontSizeBase600 },\n\n squareSmall: {\n ...shorthands.borderRadius(tokens.borderRadiusSmall),\n },\n squareMedium: {\n ...shorthands.borderRadius(tokens.borderRadiusMedium),\n },\n squareLarge: {\n ...shorthands.borderRadius(tokens.borderRadiusLarge),\n },\n squareXLarge: {\n ...shorthands.borderRadius(tokens.borderRadiusXLarge),\n },\n\n activeOrInactive: {\n transform: 'perspective(1px)', // Work-around for text pixel snapping at the end of the animation\n transitionProperty: 'transform, opacity',\n transitionDuration: `${tokens.durationUltraSlow}, ${tokens.durationFaster}`,\n transitionDelay: `${animations.fastEase}, ${animations.nullEasing}`,\n\n '@media screen and (prefers-reduced-motion: reduce)': {\n transitionDuration: '0.01ms',\n },\n\n '::before': {\n content: '\"\"',\n position: 'absolute',\n top: 0,\n left: 0,\n bottom: 0,\n right: 0,\n\n ...shorthands.borderRadius('inherit'),\n transitionProperty: 'margin, opacity',\n transitionDuration: `${tokens.durationUltraSlow}, ${tokens.durationSlower}`,\n transitionDelay: `${animations.fastEase}, ${animations.nullEasing}`,\n\n '@media screen and (prefers-reduced-motion: reduce)': {\n transitionDuration: '0.01ms',\n transitionDelay: '0.01ms',\n },\n },\n },\n\n ring: {\n '::before': {\n ...shorthands.borderStyle('solid'),\n },\n },\n ringThick: {\n '::before': {\n ...shorthands.margin(`calc(-2 * ${tokens.strokeWidthThick})`),\n ...shorthands.borderWidth(tokens.strokeWidthThick),\n },\n },\n ringThicker: {\n '::before': {\n ...shorthands.margin(`calc(-2 * ${tokens.strokeWidthThicker})`),\n ...shorthands.borderWidth(tokens.strokeWidthThicker),\n },\n },\n ringThickest: {\n '::before': {\n ...shorthands.margin(`calc(-2 * ${tokens.strokeWidthThickest})`),\n ...shorthands.borderWidth(tokens.strokeWidthThickest),\n },\n },\n\n shadow4: { '::before': { boxShadow: tokens.shadow4 } },\n shadow8: { '::before': { boxShadow: tokens.shadow8 } },\n shadow16: { '::before': { boxShadow: tokens.shadow16 } },\n shadow28: { '::before': { boxShadow: tokens.shadow28 } },\n\n inactive: {\n opacity: '0.8',\n transform: 'scale(0.875)',\n\n transitionProperty: 'transform, opacity',\n transitionDuration: `${tokens.durationUltraSlow}, ${tokens.durationFaster}`,\n transitionDelay: `${animations.fastOutSlowInMin}, ${animations.nullEasing}`,\n\n '@media screen and (prefers-reduced-motion: reduce)': {\n transitionDuration: '0.01ms',\n transitionDelay: '0.01ms',\n },\n\n '::before': {\n ...shorthands.margin(0),\n opacity: 0,\n\n transitionProperty: 'margin, opacity',\n transitionDuration: `${tokens.durationUltraSlow}, ${tokens.durationSlower}`,\n transitionDelay: `${animations.fastOutSlowInMin}, ${animations.nullEasing}`,\n\n '@media screen and (prefers-reduced-motion: reduce)': {\n transitionDuration: '0.01ms',\n transitionDelay: '0.01ms',\n },\n },\n },\n\n badge: {\n position: 'absolute',\n bottom: 0,\n right: 0,\n boxShadow: `0 0 0 ${tokens.strokeWidthThin} ${tokens.colorNeutralBackground1}`,\n },\n\n badgeLarge: {\n boxShadow: `0 0 0 ${tokens.strokeWidthThick} ${tokens.colorNeutralBackground1}`,\n },\n\n icon12: { fontSize: '12px' },\n icon16: { fontSize: '16px' },\n icon20: { fontSize: '20px' },\n icon24: { fontSize: '24px' },\n icon28: { fontSize: '28px' },\n icon32: { fontSize: '32px' },\n icon48: { fontSize: '48px' },\n});\n\nexport const useSizeStyles = makeStyles({\n 16: { width: '16px', height: '16px' },\n 20: { width: '20px', height: '20px' },\n 24: { width: '24px', height: '24px' },\n 28: { width: '28px', height: '28px' },\n 32: { width: '32px', height: '32px' },\n 36: { width: '36px', height: '36px' },\n 40: { width: '40px', height: '40px' },\n 48: { width: '48px', height: '48px' },\n 56: { width: '56px', height: '56px' },\n 64: { width: '64px', height: '64px' },\n 72: { width: '72px', height: '72px' },\n 96: { width: '96px', height: '96px' },\n 120: { width: '120px', height: '120px' },\n 128: { width: '128px', height: '128px' },\n});\n\nconst useColorStyles = makeStyles({\n neutral: {\n color: tokens.colorNeutralForeground3,\n backgroundColor: tokens.colorNeutralBackground6,\n // The ::before element is the ring when active\n '::before': { color: tokens.colorBrandStroke1 },\n },\n brand: {\n color: tokens.colorNeutralForegroundStaticInverted,\n backgroundColor: tokens.colorBrandBackgroundStatic,\n '::before': { color: tokens.colorBrandStroke1 },\n },\n 'dark-red': {\n color: tokens.colorPaletteDarkRedForeground2,\n backgroundColor: tokens.colorPaletteDarkRedBackground2,\n '::before': { color: tokens.colorPaletteDarkRedBorderActive },\n },\n cranberry: {\n color: tokens.colorPaletteCranberryForeground2,\n backgroundColor: tokens.colorPaletteCranberryBackground2,\n '::before': { color: tokens.colorPaletteCranberryBorderActive },\n },\n red: {\n color: tokens.colorPaletteRedForeground2,\n backgroundColor: tokens.colorPaletteRedBackground2,\n '::before': { color: tokens.colorPaletteRedBorderActive },\n },\n pumpkin: {\n color: tokens.colorPalettePumpkinForeground2,\n backgroundColor: tokens.colorPalettePumpkinBackground2,\n '::before': { color: tokens.colorPalettePumpkinBorderActive },\n },\n peach: {\n color: tokens.colorPalettePeachForeground2,\n backgroundColor: tokens.colorPalettePeachBackground2,\n '::before': { color: tokens.colorPalettePeachBorderActive },\n },\n marigold: {\n color: tokens.colorPaletteMarigoldForeground2,\n backgroundColor: tokens.colorPaletteMarigoldBackground2,\n '::before': { color: tokens.colorPaletteMarigoldBorderActive },\n },\n gold: {\n color: tokens.colorPaletteGoldForeground2,\n backgroundColor: tokens.colorPaletteGoldBackground2,\n '::before': { color: tokens.colorPaletteGoldBorderActive },\n },\n brass: {\n color: tokens.colorPaletteBrassForeground2,\n backgroundColor: tokens.colorPaletteBrassBackground2,\n '::before': { color: tokens.colorPaletteBrassBorderActive },\n },\n brown: {\n color: tokens.colorPaletteBrownForeground2,\n backgroundColor: tokens.colorPaletteBrownBackground2,\n '::before': { color: tokens.colorPaletteBrownBorderActive },\n },\n forest: {\n color: tokens.colorPaletteForestForeground2,\n backgroundColor: tokens.colorPaletteForestBackground2,\n '::before': { color: tokens.colorPaletteForestBorderActive },\n },\n seafoam: {\n color: tokens.colorPaletteSeafoamForeground2,\n backgroundColor: tokens.colorPaletteSeafoamBackground2,\n '::before': { color: tokens.colorPaletteSeafoamBorderActive },\n },\n 'dark-green': {\n color: tokens.colorPaletteDarkGreenForeground2,\n backgroundColor: tokens.colorPaletteDarkGreenBackground2,\n '::before': { color: tokens.colorPaletteDarkGreenBorderActive },\n },\n 'light-teal': {\n color: tokens.colorPaletteLightTealForeground2,\n backgroundColor: tokens.colorPaletteLightTealBackground2,\n '::before': { color: tokens.colorPaletteLightTealBorderActive },\n },\n teal: {\n color: tokens.colorPaletteTealForeground2,\n backgroundColor: tokens.colorPaletteTealBackground2,\n '::before': { color: tokens.colorPaletteTealBorderActive },\n },\n steel: {\n color: tokens.colorPaletteSteelForeground2,\n backgroundColor: tokens.colorPaletteSteelBackground2,\n '::before': { color: tokens.colorPaletteSteelBorderActive },\n },\n blue: {\n color: tokens.colorPaletteBlueForeground2,\n backgroundColor: tokens.colorPaletteBlueBackground2,\n '::before': { color: tokens.colorPaletteBlueBorderActive },\n },\n 'royal-blue': {\n color: tokens.colorPaletteRoyalBlueForeground2,\n backgroundColor: tokens.colorPaletteRoyalBlueBackground2,\n '::before': { color: tokens.colorPaletteRoyalBlueBorderActive },\n },\n cornflower: {\n color: tokens.colorPaletteCornflowerForeground2,\n backgroundColor: tokens.colorPaletteCornflowerBackground2,\n '::before': { color: tokens.colorPaletteCornflowerBorderActive },\n },\n navy: {\n color: tokens.colorPaletteNavyForeground2,\n backgroundColor: tokens.colorPaletteNavyBackground2,\n '::before': { color: tokens.colorPaletteNavyBorderActive },\n },\n lavender: {\n color: tokens.colorPaletteLavenderForeground2,\n backgroundColor: tokens.colorPaletteLavenderBackground2,\n '::before': { color: tokens.colorPaletteLavenderBorderActive },\n },\n purple: {\n color: tokens.colorPalettePurpleForeground2,\n backgroundColor: tokens.colorPalettePurpleBackground2,\n '::before': { color: tokens.colorPalettePurpleBorderActive },\n },\n grape: {\n color: tokens.colorPaletteGrapeForeground2,\n backgroundColor: tokens.colorPaletteGrapeBackground2,\n '::before': { color: tokens.colorPaletteGrapeBorderActive },\n },\n lilac: {\n color: tokens.colorPaletteLilacForeground2,\n backgroundColor: tokens.colorPaletteLilacBackground2,\n '::before': { color: tokens.colorPaletteLilacBorderActive },\n },\n pink: {\n color: tokens.colorPalettePinkForeground2,\n backgroundColor: tokens.colorPalettePinkBackground2,\n '::before': { color: tokens.colorPalettePinkBorderActive },\n },\n magenta: {\n color: tokens.colorPaletteMagentaForeground2,\n backgroundColor: tokens.colorPaletteMagentaBackground2,\n '::before': { color: tokens.colorPaletteMagentaBorderActive },\n },\n plum: {\n color: tokens.colorPalettePlumForeground2,\n backgroundColor: tokens.colorPalettePlumBackground2,\n '::before': { color: tokens.colorPalettePlumBorderActive },\n },\n beige: {\n color: tokens.colorPaletteBeigeForeground2,\n backgroundColor: tokens.colorPaletteBeigeBackground2,\n '::before': { color: tokens.colorPaletteBeigeBorderActive },\n },\n mink: {\n color: tokens.colorPaletteMinkForeground2,\n backgroundColor: tokens.colorPaletteMinkBackground2,\n '::before': { color: tokens.colorPaletteMinkBorderActive },\n },\n platinum: {\n color: tokens.colorPalettePlatinumForeground2,\n backgroundColor: tokens.colorPalettePlatinumBackground2,\n '::before': { color: tokens.colorPalettePlatinumBorderActive },\n },\n anchor: {\n color: tokens.colorPaletteAnchorForeground2,\n backgroundColor: tokens.colorPaletteAnchorBackground2,\n '::before': { color: tokens.colorPaletteAnchorBorderActive },\n },\n});\n\nexport const useAvatarStyles_unstable = (state: AvatarState): AvatarState => {\n const { size, shape, active, activeAppearance, color } = state;\n\n const rootClassName = useRootClassName();\n const imageClassName = useImageClassName();\n const iconInitialsClassName = useIconInitialsClassName();\n const styles = useStyles();\n const sizeStyles = useSizeStyles();\n const colorStyles = useColorStyles();\n\n const rootClasses = [rootClassName, size !== 32 && sizeStyles[size], colorStyles[color]];\n\n if (size <= 24) {\n rootClasses.push(styles.textCaption2Strong);\n } else if (size <= 28) {\n rootClasses.push(styles.textCaption1Strong);\n } else if (size <= 40) {\n // Default text size included in useRootClassName\n } else if (size <= 56) {\n rootClasses.push(styles.textSubtitle2);\n } else if (size <= 96) {\n rootClasses.push(styles.textSubtitle1);\n } else {\n rootClasses.push(styles.textTitle3);\n }\n\n if (shape === 'square') {\n if (size <= 24) {\n rootClasses.push(styles.squareSmall);\n } else if (size <= 48) {\n rootClasses.push(styles.squareMedium);\n } else if (size <= 72) {\n rootClasses.push(styles.squareLarge);\n } else {\n rootClasses.push(styles.squareXLarge);\n }\n }\n\n if (active === 'active' || active === 'inactive') {\n rootClasses.push(styles.activeOrInactive);\n\n if (activeAppearance === 'ring' || activeAppearance === 'ring-shadow') {\n rootClasses.push(styles.ring);\n\n if (size <= 48) {\n rootClasses.push(styles.ringThick);\n } else if (size <= 64) {\n rootClasses.push(styles.ringThicker);\n } else {\n rootClasses.push(styles.ringThickest);\n }\n }\n\n if (activeAppearance === 'shadow' || activeAppearance === 'ring-shadow') {\n if (size <= 28) {\n rootClasses.push(styles.shadow4);\n } else if (size <= 48) {\n rootClasses.push(styles.shadow8);\n } else if (size <= 64) {\n rootClasses.push(styles.shadow16);\n } else {\n rootClasses.push(styles.shadow28);\n }\n }\n\n // Note: The inactive style overrides some of the activeAppearance styles and must be applied after them\n if (active === 'inactive') {\n rootClasses.push(styles.inactive);\n }\n }\n\n state.root.className = mergeClasses(avatarClassNames.root, ...rootClasses, state.root.className);\n\n if (state.badge) {\n state.badge.className = mergeClasses(\n avatarClassNames.badge,\n styles.badge,\n size >= 64 && styles.badgeLarge,\n state.badge.className,\n );\n }\n\n if (state.image) {\n state.image.className = mergeClasses(avatarClassNames.image, imageClassName, state.image.className);\n }\n\n if (state.initials) {\n state.initials.className = mergeClasses(avatarClassNames.initials, iconInitialsClassName, state.initials.className);\n }\n\n if (state.icon) {\n let iconSizeClass;\n if (size <= 16) {\n iconSizeClass = styles.icon12;\n } else if (size <= 24) {\n iconSizeClass = styles.icon16;\n } else if (size <= 40) {\n iconSizeClass = styles.icon20;\n } else if (size <= 48) {\n iconSizeClass = styles.icon24;\n } else if (size <= 56) {\n iconSizeClass = styles.icon28;\n } else if (size <= 72) {\n iconSizeClass = styles.icon32;\n } else {\n iconSizeClass = styles.icon48;\n }\n\n state.icon.className = mergeClasses(\n avatarClassNames.icon,\n iconInitialsClassName,\n iconSizeClass,\n state.icon.className,\n );\n }\n\n return state;\n};\n"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluentui/react-avatar",
|
|
3
|
-
"version": "9.3.
|
|
3
|
+
"version": "9.3.5",
|
|
4
4
|
"description": "React components for building Microsoft web experiences.",
|
|
5
5
|
"main": "lib-commonjs/index.js",
|
|
6
6
|
"module": "lib/index.js",
|
|
@@ -36,15 +36,15 @@
|
|
|
36
36
|
"@fluentui/scripts-tasks": "*"
|
|
37
37
|
},
|
|
38
38
|
"dependencies": {
|
|
39
|
-
"@fluentui/react-badge": "^9.0.
|
|
40
|
-
"@fluentui/react-context-selector": "^9.1.
|
|
39
|
+
"@fluentui/react-badge": "^9.0.25",
|
|
40
|
+
"@fluentui/react-context-selector": "^9.1.9",
|
|
41
41
|
"@fluentui/react-icons": "^2.0.175",
|
|
42
|
-
"@fluentui/react-popover": "^9.4.
|
|
42
|
+
"@fluentui/react-popover": "^9.4.9",
|
|
43
43
|
"@fluentui/react-shared-contexts": "^9.2.0",
|
|
44
|
-
"@fluentui/react-tabster": "^9.5.
|
|
44
|
+
"@fluentui/react-tabster": "^9.5.2",
|
|
45
45
|
"@fluentui/react-theme": "^9.1.5",
|
|
46
|
-
"@fluentui/react-tooltip": "^9.1.
|
|
47
|
-
"@fluentui/react-utilities": "^9.5.
|
|
46
|
+
"@fluentui/react-tooltip": "^9.1.16",
|
|
47
|
+
"@fluentui/react-utilities": "^9.5.3",
|
|
48
48
|
"@griffel/react": "^1.5.2",
|
|
49
49
|
"tslib": "^2.1.0"
|
|
50
50
|
},
|