@fluentui/react-avatar 9.3.4 → 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.
Files changed (9) hide show
  1. package/CHANGELOG.json +52 -1
  2. package/CHANGELOG.md +17 -2
  3. package/lib/components/Avatar/useAvatarStyles.js +16 -70
  4. package/lib/components/Avatar/useAvatarStyles.js.map +1 -1
  5. package/lib-amd/components/Avatar/useAvatarStyles.js +50 -15
  6. package/lib-amd/components/Avatar/useAvatarStyles.js.map +1 -1
  7. package/lib-commonjs/components/Avatar/useAvatarStyles.js +15 -69
  8. package/lib-commonjs/components/Avatar/useAvatarStyles.js.map +1 -1
  9. package/package.json +7 -7
package/CHANGELOG.json CHANGED
@@ -2,7 +2,58 @@
2
2
  "name": "@fluentui/react-avatar",
3
3
  "entries": [
4
4
  {
5
- "date": "Mon, 13 Feb 2023 09:34:36 GMT",
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",
6
57
  "tag": "@fluentui/react-avatar_v9.3.4",
7
58
  "version": "9.3.4",
8
59
  "comments": {
package/CHANGELOG.md CHANGED
@@ -1,12 +1,27 @@
1
1
  # Change Log - @fluentui/react-avatar
2
2
 
3
- This log was last generated on Mon, 13 Feb 2023 09:34:36 GMT and should not be manually modified.
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
+
7
22
  ## [9.3.4](https://github.com/microsoft/fluentui/tree/@fluentui/react-avatar_v9.3.4)
8
23
 
9
- Mon, 13 Feb 2023 09:34:36 GMT
24
+ Mon, 13 Feb 2023 09:35:48 GMT
10
25
  [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-avatar_v9.3.3..@fluentui/react-avatar_v9.3.4)
11
26
 
12
27
  ### Patches
package/lib/components/Avatar/useAvatarStyles.js CHANGED
@@ -1,4 +1,4 @@
1
- import { mergeClasses, __styles, shorthands } from '@griffel/react';
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
- textTitle: {
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: [".f14t3ns0{display:inline-block;}", ".fi64zpg{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;}", ".f10pi13n{position:relative;}", ".fmrv4ls{vertical-align:middle;}", ".f8fbkgy{border-bottom-right-radius:var(--borderRadiusCircular);}", ".f1nfllo7{border-bottom-left-radius:var(--borderRadiusCircular);}", ".f1djnp8u{border-top-right-radius:var(--borderRadiusCircular);}", ".f1s8kh49{border-top-left-radius:var(--borderRadiusCircular);}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".fl43uef{font-weight:var(--fontWeightSemibold);}", ".f13mqy1h{font-size:var(--fontSizeBase100);}", ".fy9rknc{font-size:var(--fontSizeBase200);}", ".fkhj508{font-size:var(--fontSizeBase300);}", ".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);}", ".f15twtuk{top:0;}", ".fly5x3f{width:100%;}", ".f1l02sjl{height:100%;}", ".f1d9uwra{border-bottom-right-radius:inherit;}", ".fzibvwi{border-bottom-left-radius:inherit;}", ".fuoumxm{border-top-right-radius:inherit;}", ".f1vtqnvc{border-top-left-radius:inherit;}", ".f1ps3kmd{object-fit:cover;}", ".f12kltsn{vertical-align:top;}", ".f1ewtqcl{box-sizing:border-box;}", ".fp6vxd{line-height:1;}", ".f192inf7{border-top-width:var(--strokeWidthThin);}", ".f5tn483{border-right-width:var(--strokeWidthThin);}", ".f1ojsxk5{border-left-width:var(--strokeWidthThin);}", ".f1vxd6vx{border-bottom-width:var(--strokeWidthThin);}", ".fzkkow9{border-top-style:solid;}", ".fcdblym{border-right-style:solid;}", ".fjik90z{border-left-style:solid;}", ".fg706s2{border-bottom-style:solid;}", ".fghlq4f{border-top-color:var(--colorTransparentStroke);}", ".f1gn591s{border-right-color:var(--colorTransparentStroke);}", ".fjscplz{border-left-color:var(--colorTransparentStroke);}", ".fb073pr{border-bottom-color:var(--colorTransparentStroke);}", ".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".f4d9j23{-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;}", ".fa4t5tb{vertical-align:center;}", ".f17mccla{text-align:center;}", ".f1xqy1su{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}", ".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;}"],
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 = [styles.root, sizeStyles[size], colorStyles[color]];
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
- rootClasses.push(styles.textBody1Strong);
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.textTitle);
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, styles.image, state.image.className);
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, styles.iconInitials, state.initials.className);
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, styles.iconInitials, iconSizeClass, state.icon.className);
519
+ state.icon.className = mergeClasses(avatarClassNames.icon, iconInitialsClassName, iconSizeClass, state.icon.className);
574
520
  }
575
521
  return state;
576
522
  };
package/lib/components/Avatar/useAvatarStyles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"mappings":"AAAA,SAASA,YAAY,YAAcC,UAAU,QAAQ,gBAAgB;AACrE,SAASC,MAAM,QAAQ,uBAAuB;AAI9C,OAAO,MAAMC,gBAAgB,GAAgC;EAC3DC,IAAI,EAAE,YAAY;EAClBC,KAAK,EAAE,mBAAmB;EAC1BC,QAAQ,EAAE,sBAAsB;EAChCC,IAAI,EAAE,kBAAkB;EACxBC,KAAK,EAAE;CACR;AAED,MAAMC,UAAU,GAAG;EACjBC,gBAAgB,EAAER,MAAM,CAACS,kBAAkB;EAC3CC,gBAAgB,EAAEV,MAAM,CAACW,kBAAkB;EAC3CC,gBAAgB,EAAEZ,MAAM,CAACa,kBAAkB;EAC3CC,gBAAgB,EAAEd,MAAM,CAACe,kBAAkB;EAC3CC,gBAAgB,EAAEhB,MAAM,CAACiB,kBAAkB;EAC3CC,gBAAgB,EAAElB,MAAM,CAACmB,kBAAkB;EAC3CC,QAAQ,EAAEpB,MAAM,CAACqB,gBAAgB;EACjCC,UAAU,EAAEtB,MAAM,CAACuB,aAAa;EAChCC,UAAU,EAAExB,MAAM,CAACyB;CACpB;AAED,MAAMC,SAAS,gBAAG;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;AAAA;EAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;AAAA,EAyKhB;AAEF,OAAO,MAAMC,aAAa,gBAAG;EAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAe3B;AAEF,MAAMC,cAAc,gBAAG;EAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAkKrB;AAEF,OAAO,MAAMC,wBAAwB,GAAIC,KAAkB,IAAiB;EAC1E,MAAM;IAAEC,IAAI;IAAEC,KAAK;IAAEC,MAAM;IAAEC,gBAAgB;IAAEC;EAAK,CAAE,GAAGL,KAAK;EAE9D,MAAMM,MAAM,GAAGV,SAAS,EAAE;EAC1B,MAAMW,UAAU,GAAGV,aAAa,EAAE;EAClC,MAAMW,WAAW,GAAGV,cAAc,EAAE;EAEpC,MAAMW,WAAW,GAAG,CAACH,MAAM,CAAClC,IAAI,EAAEmC,UAAU,CAACN,IAAI,CAAC,EAAEO,WAAW,CAACH,KAAK,CAAC,CAAC;EAEvE,IAAIJ,IAAI,IAAI,EAAE,EAAE;IACdQ,WAAW,CAACC,IAAI,CAACJ,MAAM,CAACK,kBAAkB,CAAC;GAC5C,MAAM,IAAIV,IAAI,IAAI,EAAE,EAAE;IACrBQ,WAAW,CAACC,IAAI,CAACJ,MAAM,CAACM,kBAAkB,CAAC;GAC5C,MAAM,IAAIX,IAAI,IAAI,EAAE,EAAE;IACrBQ,WAAW,CAACC,IAAI,CAACJ,MAAM,CAACO,eAAe,CAAC;GACzC,MAAM,IAAIZ,IAAI,IAAI,EAAE,EAAE;IACrBQ,WAAW,CAACC,IAAI,CAACJ,MAAM,CAACQ,aAAa,CAAC;GACvC,MAAM,IAAIb,IAAI,IAAI,EAAE,EAAE;IACrBQ,WAAW,CAACC,IAAI,CAACJ,MAAM,CAACS,aAAa,CAAC;GACvC,MAAM;IACLN,WAAW,CAACC,IAAI,CAACJ,MAAM,CAACU,SAAS,CAAC;;EAGpC,IAAId,KAAK,KAAK,QAAQ,EAAE;IACtB,IAAID,IAAI,IAAI,EAAE,EAAE;MACdQ,WAAW,CAACC,IAAI,CAACJ,MAAM,CAACW,WAAW,CAAC;KACrC,MAAM,IAAIhB,IAAI,IAAI,EAAE,EAAE;MACrBQ,WAAW,CAACC,IAAI,CAACJ,MAAM,CAACY,YAAY,CAAC;KACtC,MAAM,IAAIjB,IAAI,IAAI,EAAE,EAAE;MACrBQ,WAAW,CAACC,IAAI,CAACJ,MAAM,CAACa,WAAW,CAAC;KACrC,MAAM;MACLV,WAAW,CAACC,IAAI,CAACJ,MAAM,CAACc,YAAY,CAAC;;;EAIzC,IAAIjB,MAAM,KAAK,QAAQ,IAAIA,MAAM,KAAK,UAAU,EAAE;IAChDM,WAAW,CAACC,IAAI,CAACJ,MAAM,CAACe,gBAAgB,CAAC;IAEzC,IAAIjB,gBAAgB,KAAK,MAAM,IAAIA,gBAAgB,KAAK,aAAa,EAAE;MACrEK,WAAW,CAACC,IAAI,CAACJ,MAAM,CAACgB,IAAI,CAAC;MAE7B,IAAIrB,IAAI,IAAI,EAAE,EAAE;QACdQ,WAAW,CAACC,IAAI,CAACJ,MAAM,CAACiB,SAAS,CAAC;OACnC,MAAM,IAAItB,IAAI,IAAI,EAAE,EAAE;QACrBQ,WAAW,CAACC,IAAI,CAACJ,MAAM,CAACkB,WAAW,CAAC;OACrC,MAAM;QACLf,WAAW,CAACC,IAAI,CAACJ,MAAM,CAACmB,YAAY,CAAC;;;IAIzC,IAAIrB,gBAAgB,KAAK,QAAQ,IAAIA,gBAAgB,KAAK,aAAa,EAAE;MACvE,IAAIH,IAAI,IAAI,EAAE,EAAE;QACdQ,WAAW,CAACC,IAAI,CAACJ,MAAM,CAACoB,OAAO,CAAC;OACjC,MAAM,IAAIzB,IAAI,IAAI,EAAE,EAAE;QACrBQ,WAAW,CAACC,IAAI,CAACJ,MAAM,CAACqB,OAAO,CAAC;OACjC,MAAM,IAAI1B,IAAI,IAAI,EAAE,EAAE;QACrBQ,WAAW,CAACC,IAAI,CAACJ,MAAM,CAACsB,QAAQ,CAAC;OAClC,MAAM;QACLnB,WAAW,CAACC,IAAI,CAACJ,MAAM,CAACuB,QAAQ,CAAC;;;IAIrC;IACA,IAAI1B,MAAM,KAAK,UAAU,EAAE;MACzBM,WAAW,CAACC,IAAI,CAACJ,MAAM,CAACwB,QAAQ,CAAC;;;EAIrC9B,KAAK,CAAC5B,IAAI,CAAC2D,SAAS,GAAG/D,YAAY,CAACG,gBAAgB,CAACC,IAAI,EAAE,GAAGqC,WAAW,EAAET,KAAK,CAAC5B,IAAI,CAAC2D,SAAS,CAAC;EAEhG,IAAI/B,KAAK,CAACxB,KAAK,EAAE;IACfwB,KAAK,CAACxB,KAAK,CAACuD,SAAS,GAAG/D,YAAY,CAClCG,gBAAgB,CAACK,KAAK,EACtB8B,MAAM,CAAC9B,KAAK,EACZyB,IAAI,IAAI,EAAE,IAAIK,MAAM,CAAC0B,UAAU,EAC/BhC,KAAK,CAACxB,KAAK,CAACuD,SAAS,CACtB;;EAGH,IAAI/B,KAAK,CAAC3B,KAAK,EAAE;IACf2B,KAAK,CAAC3B,KAAK,CAAC0D,SAAS,GAAG/D,YAAY,CAACG,gBAAgB,CAACE,KAAK,EAAEiC,MAAM,CAACjC,KAAK,EAAE2B,KAAK,CAAC3B,KAAK,CAAC0D,SAAS,CAAC;;EAGnG,IAAI/B,KAAK,CAAC1B,QAAQ,EAAE;IAClB0B,KAAK,CAAC1B,QAAQ,CAACyD,SAAS,GAAG/D,YAAY,CAACG,gBAAgB,CAACG,QAAQ,EAAEgC,MAAM,CAAC2B,YAAY,EAAEjC,KAAK,CAAC1B,QAAQ,CAACyD,SAAS,CAAC;;EAGnH,IAAI/B,KAAK,CAACzB,IAAI,EAAE;IACd,IAAI2D,aAAa;IACjB,IAAIjC,IAAI,IAAI,EAAE,EAAE;MACdiC,aAAa,GAAG5B,MAAM,CAAC6B,MAAM;KAC9B,MAAM,IAAIlC,IAAI,IAAI,EAAE,EAAE;MACrBiC,aAAa,GAAG5B,MAAM,CAAC8B,MAAM;KAC9B,MAAM,IAAInC,IAAI,IAAI,EAAE,EAAE;MACrBiC,aAAa,GAAG5B,MAAM,CAAC+B,MAAM;KAC9B,MAAM,IAAIpC,IAAI,IAAI,EAAE,EAAE;MACrBiC,aAAa,GAAG5B,MAAM,CAACgC,MAAM;KAC9B,MAAM,IAAIrC,IAAI,IAAI,EAAE,EAAE;MACrBiC,aAAa,GAAG5B,MAAM,CAACiC,MAAM;KAC9B,MAAM,IAAItC,IAAI,IAAI,EAAE,EAAE;MACrBiC,aAAa,GAAG5B,MAAM,CAACkC,MAAM;KAC9B,MAAM;MACLN,aAAa,GAAG5B,MAAM,CAACmC,MAAM;;IAG/BzC,KAAK,CAACzB,IAAI,CAACwD,SAAS,GAAG/D,YAAY,CACjCG,gBAAgB,CAACI,IAAI,EACrB+B,MAAM,CAAC2B,YAAY,EACnBC,aAAa,EACblC,KAAK,CAACzB,IAAI,CAACwD,SAAS,CACrB;;EAGH,OAAO/B,KAAK;AACd,CAAC","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"]}
package/lib-amd/components/Avatar/useAvatarStyles.js CHANGED
@@ -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
- root: tslib_1.__assign(tslib_1.__assign({ display: 'inline-block', flexShrink: 0, position: 'relative', verticalAlign: 'middle' }, react_1.shorthands.borderRadius(react_theme_1.tokens.borderRadiusCircular)), { fontFamily: react_theme_1.tokens.fontFamilyBase, fontWeight: react_theme_1.tokens.fontWeightSemibold }),
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
- textTitle: { fontSize: react_theme_1.tokens.fontSizeBase600 },
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 = [styles.root, sizeStyles[size], colorStyles[color]];
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
- rootClasses.push(styles.textBody1Strong);
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.textTitle);
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, styles.image, state.image.className);
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, styles.iconInitials, state.initials.className);
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, styles.iconInitials, iconSizeClass, state.icon.className);
419
+ state.icon.className = react_1.mergeClasses(exports.avatarClassNames.icon, iconInitialsClassName, iconSizeClass, state.icon.className);
385
420
  }
386
421
  return state;
387
422
  };
package/lib-amd/components/Avatar/useAvatarStyles.js.map CHANGED
@@ -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"]}
package/lib-commonjs/components/Avatar/useAvatarStyles.js CHANGED
@@ -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
- textTitle: {
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: [".f14t3ns0{display:inline-block;}", ".fi64zpg{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;}", ".f10pi13n{position:relative;}", ".fmrv4ls{vertical-align:middle;}", ".f8fbkgy{border-bottom-right-radius:var(--borderRadiusCircular);}", ".f1nfllo7{border-bottom-left-radius:var(--borderRadiusCircular);}", ".f1djnp8u{border-top-right-radius:var(--borderRadiusCircular);}", ".f1s8kh49{border-top-left-radius:var(--borderRadiusCircular);}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".fl43uef{font-weight:var(--fontWeightSemibold);}", ".f13mqy1h{font-size:var(--fontSizeBase100);}", ".fy9rknc{font-size:var(--fontSizeBase200);}", ".fkhj508{font-size:var(--fontSizeBase300);}", ".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);}", ".f15twtuk{top:0;}", ".fly5x3f{width:100%;}", ".f1l02sjl{height:100%;}", ".f1d9uwra{border-bottom-right-radius:inherit;}", ".fzibvwi{border-bottom-left-radius:inherit;}", ".fuoumxm{border-top-right-radius:inherit;}", ".f1vtqnvc{border-top-left-radius:inherit;}", ".f1ps3kmd{object-fit:cover;}", ".f12kltsn{vertical-align:top;}", ".f1ewtqcl{box-sizing:border-box;}", ".fp6vxd{line-height:1;}", ".f192inf7{border-top-width:var(--strokeWidthThin);}", ".f5tn483{border-right-width:var(--strokeWidthThin);}", ".f1ojsxk5{border-left-width:var(--strokeWidthThin);}", ".f1vxd6vx{border-bottom-width:var(--strokeWidthThin);}", ".fzkkow9{border-top-style:solid;}", ".fcdblym{border-right-style:solid;}", ".fjik90z{border-left-style:solid;}", ".fg706s2{border-bottom-style:solid;}", ".fghlq4f{border-top-color:var(--colorTransparentStroke);}", ".f1gn591s{border-right-color:var(--colorTransparentStroke);}", ".fjscplz{border-left-color:var(--colorTransparentStroke);}", ".fb073pr{border-bottom-color:var(--colorTransparentStroke);}", ".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".f4d9j23{-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;}", ".fa4t5tb{vertical-align:center;}", ".f17mccla{text-align:center;}", ".f1xqy1su{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}", ".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;}"],
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 = [styles.root, sizeStyles[size], colorStyles[color]];
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
- rootClasses.push(styles.textBody1Strong);
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.textTitle);
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, styles.image, state.image.className);
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, styles.iconInitials, state.initials.className);
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, styles.iconInitials, iconSizeClass, state.icon.className);
525
+ state.icon.className = react_1.mergeClasses(exports.avatarClassNames.icon, iconInitialsClassName, iconSizeClass, state.icon.className);
580
526
  }
581
527
  return state;
582
528
  };
package/lib-commonjs/components/Avatar/useAvatarStyles.js.map CHANGED
@@ -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":";;;;;;AAAA;AACA;AAIaA,wBAAgB,GAAgC;EAC3DC,IAAI,EAAE,YAAY;EAClBC,KAAK,EAAE,mBAAmB;EAC1BC,QAAQ,EAAE,sBAAsB;EAChCC,IAAI,EAAE,kBAAkB;EACxBC,KAAK,EAAE;CACR;AAED,MAAMC,UAAU,GAAG;EACjBC,gBAAgB,EAAEC,oBAAM,CAACC,kBAAkB;EAC3CC,gBAAgB,EAAEF,oBAAM,CAACG,kBAAkB;EAC3CC,gBAAgB,EAAEJ,oBAAM,CAACK,kBAAkB;EAC3CC,gBAAgB,EAAEN,oBAAM,CAACO,kBAAkB;EAC3CC,gBAAgB,EAAER,oBAAM,CAACS,kBAAkB;EAC3CC,gBAAgB,EAAEV,oBAAM,CAACW,kBAAkB;EAC3CC,QAAQ,EAAEZ,oBAAM,CAACa,gBAAgB;EACjCC,UAAU,EAAEd,oBAAM,CAACe,aAAa;EAChCC,UAAU,EAAEhB,oBAAM,CAACiB;CACpB;AAED,MAAMC,gBAAgB,gBAAGC,qBAAe,gUAWtC;AAEF,MAAMC,iBAAiB,gBAAGD,qBAAe,uRAUvC;AAEF,MAAME,wBAAwB,gBAAGF,qBAAe,qqCAiB9C;AAEF,MAAMG,SAAS,gBAAGH,gBAAU;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;AAAA;EAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;AAAA,EA6H1B;AAEW3B,qBAAa,gBAAG2B,gBAAU;EAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAerC;AAEF,MAAMI,cAAc,gBAAGJ,gBAAU;EAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAkK/B;AAEK,MAAMK,wBAAwB,GAAIC,KAAkB,IAAiB;EAC1E,MAAM;IAAEC,IAAI;IAAEC,KAAK;IAAEC,MAAM;IAAEC,gBAAgB;IAAEC;EAAK,CAAE,GAAGL,KAAK;EAE9D,MAAMM,aAAa,GAAGb,gBAAgB,EAAE;EACxC,MAAMc,cAAc,GAAGZ,iBAAiB,EAAE;EAC1C,MAAMa,qBAAqB,GAAGZ,wBAAwB,EAAE;EACxD,MAAMa,MAAM,GAAGZ,SAAS,EAAE;EAC1B,MAAMa,UAAU,GAAG3C,qBAAa,EAAE;EAClC,MAAM4C,WAAW,GAAGb,cAAc,EAAE;EAEpC,MAAMc,WAAW,GAAG,CAACN,aAAa,EAAEL,IAAI,KAAK,EAAE,IAAIS,UAAU,CAACT,IAAI,CAAC,EAAEU,WAAW,CAACN,KAAK,CAAC,CAAC;EAExF,IAAIJ,IAAI,IAAI,EAAE,EAAE;IACdW,WAAW,CAACC,IAAI,CAACJ,MAAM,CAACK,kBAAkB,CAAC;GAC5C,MAAM,IAAIb,IAAI,IAAI,EAAE,EAAE;IACrBW,WAAW,CAACC,IAAI,CAACJ,MAAM,CAACM,kBAAkB,CAAC;GAC5C,MAAM,IAAId,IAAI,IAAI,EAAE,EAAE;IACrB;EAAA,CACD,MAAM,IAAIA,IAAI,IAAI,EAAE,EAAE;IACrBW,WAAW,CAACC,IAAI,CAACJ,MAAM,CAACO,aAAa,CAAC;GACvC,MAAM,IAAIf,IAAI,IAAI,EAAE,EAAE;IACrBW,WAAW,CAACC,IAAI,CAACJ,MAAM,CAACQ,aAAa,CAAC;GACvC,MAAM;IACLL,WAAW,CAACC,IAAI,CAACJ,MAAM,CAACS,UAAU,CAAC;;EAGrC,IAAIhB,KAAK,KAAK,QAAQ,EAAE;IACtB,IAAID,IAAI,IAAI,EAAE,EAAE;MACdW,WAAW,CAACC,IAAI,CAACJ,MAAM,CAACU,WAAW,CAAC;KACrC,MAAM,IAAIlB,IAAI,IAAI,EAAE,EAAE;MACrBW,WAAW,CAACC,IAAI,CAACJ,MAAM,CAACW,YAAY,CAAC;KACtC,MAAM,IAAInB,IAAI,IAAI,EAAE,EAAE;MACrBW,WAAW,CAACC,IAAI,CAACJ,MAAM,CAACY,WAAW,CAAC;KACrC,MAAM;MACLT,WAAW,CAACC,IAAI,CAACJ,MAAM,CAACa,YAAY,CAAC;;;EAIzC,IAAInB,MAAM,KAAK,QAAQ,IAAIA,MAAM,KAAK,UAAU,EAAE;IAChDS,WAAW,CAACC,IAAI,CAACJ,MAAM,CAACc,gBAAgB,CAAC;IAEzC,IAAInB,gBAAgB,KAAK,MAAM,IAAIA,gBAAgB,KAAK,aAAa,EAAE;MACrEQ,WAAW,CAACC,IAAI,CAACJ,MAAM,CAACe,IAAI,CAAC;MAE7B,IAAIvB,IAAI,IAAI,EAAE,EAAE;QACdW,WAAW,CAACC,IAAI,CAACJ,MAAM,CAACgB,SAAS,CAAC;OACnC,MAAM,IAAIxB,IAAI,IAAI,EAAE,EAAE;QACrBW,WAAW,CAACC,IAAI,CAACJ,MAAM,CAACiB,WAAW,CAAC;OACrC,MAAM;QACLd,WAAW,CAACC,IAAI,CAACJ,MAAM,CAACkB,YAAY,CAAC;;;IAIzC,IAAIvB,gBAAgB,KAAK,QAAQ,IAAIA,gBAAgB,KAAK,aAAa,EAAE;MACvE,IAAIH,IAAI,IAAI,EAAE,EAAE;QACdW,WAAW,CAACC,IAAI,CAACJ,MAAM,CAACmB,OAAO,CAAC;OACjC,MAAM,IAAI3B,IAAI,IAAI,EAAE,EAAE;QACrBW,WAAW,CAACC,IAAI,CAACJ,MAAM,CAACoB,OAAO,CAAC;OACjC,MAAM,IAAI5B,IAAI,IAAI,EAAE,EAAE;QACrBW,WAAW,CAACC,IAAI,CAACJ,MAAM,CAACqB,QAAQ,CAAC;OAClC,MAAM;QACLlB,WAAW,CAACC,IAAI,CAACJ,MAAM,CAACsB,QAAQ,CAAC;;;IAIrC;IACA,IAAI5B,MAAM,KAAK,UAAU,EAAE;MACzBS,WAAW,CAACC,IAAI,CAACJ,MAAM,CAACuB,QAAQ,CAAC;;;EAIrChC,KAAK,CAAChC,IAAI,CAACiE,SAAS,GAAGvC,oBAAY,CAAC3B,wBAAgB,CAACC,IAAI,EAAE,GAAG4C,WAAW,EAAEZ,KAAK,CAAChC,IAAI,CAACiE,SAAS,CAAC;EAEhG,IAAIjC,KAAK,CAAC5B,KAAK,EAAE;IACf4B,KAAK,CAAC5B,KAAK,CAAC6D,SAAS,GAAGvC,oBAAY,CAClC3B,wBAAgB,CAACK,KAAK,EACtBqC,MAAM,CAACrC,KAAK,EACZ6B,IAAI,IAAI,EAAE,IAAIQ,MAAM,CAACyB,UAAU,EAC/BlC,KAAK,CAAC5B,KAAK,CAAC6D,SAAS,CACtB;;EAGH,IAAIjC,KAAK,CAAC/B,KAAK,EAAE;IACf+B,KAAK,CAAC/B,KAAK,CAACgE,SAAS,GAAGvC,oBAAY,CAAC3B,wBAAgB,CAACE,KAAK,EAAEsC,cAAc,EAAEP,KAAK,CAAC/B,KAAK,CAACgE,SAAS,CAAC;;EAGrG,IAAIjC,KAAK,CAAC9B,QAAQ,EAAE;IAClB8B,KAAK,CAAC9B,QAAQ,CAAC+D,SAAS,GAAGvC,oBAAY,CAAC3B,wBAAgB,CAACG,QAAQ,EAAEsC,qBAAqB,EAAER,KAAK,CAAC9B,QAAQ,CAAC+D,SAAS,CAAC;;EAGrH,IAAIjC,KAAK,CAAC7B,IAAI,EAAE;IACd,IAAIgE,aAAa;IACjB,IAAIlC,IAAI,IAAI,EAAE,EAAE;MACdkC,aAAa,GAAG1B,MAAM,CAAC2B,MAAM;KAC9B,MAAM,IAAInC,IAAI,IAAI,EAAE,EAAE;MACrBkC,aAAa,GAAG1B,MAAM,CAAC4B,MAAM;KAC9B,MAAM,IAAIpC,IAAI,IAAI,EAAE,EAAE;MACrBkC,aAAa,GAAG1B,MAAM,CAAC6B,MAAM;KAC9B,MAAM,IAAIrC,IAAI,IAAI,EAAE,EAAE;MACrBkC,aAAa,GAAG1B,MAAM,CAAC8B,MAAM;KAC9B,MAAM,IAAItC,IAAI,IAAI,EAAE,EAAE;MACrBkC,aAAa,GAAG1B,MAAM,CAAC+B,MAAM;KAC9B,MAAM,IAAIvC,IAAI,IAAI,EAAE,EAAE;MACrBkC,aAAa,GAAG1B,MAAM,CAACgC,MAAM;KAC9B,MAAM;MACLN,aAAa,GAAG1B,MAAM,CAACiC,MAAM;;IAG/B1C,KAAK,CAAC7B,IAAI,CAAC8D,SAAS,GAAGvC,oBAAY,CACjC3B,wBAAgB,CAACI,IAAI,EACrBqC,qBAAqB,EACrB2B,aAAa,EACbnC,KAAK,CAAC7B,IAAI,CAAC8D,SAAS,CACrB;;EAGH,OAAOjC,KAAK;AACd,CAAC;AArHYjC,gCAAwB","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.4",
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.24",
40
- "@fluentui/react-context-selector": "^9.1.8",
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.8",
42
+ "@fluentui/react-popover": "^9.4.9",
43
43
  "@fluentui/react-shared-contexts": "^9.2.0",
44
- "@fluentui/react-tabster": "^9.5.1",
44
+ "@fluentui/react-tabster": "^9.5.2",
45
45
  "@fluentui/react-theme": "^9.1.5",
46
- "@fluentui/react-tooltip": "^9.1.15",
47
- "@fluentui/react-utilities": "^9.5.2",
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
  },