@fluentui/react-badge 9.0.4 → 9.0.6

Sign up to get free protection for your applications and to get access to all the features.
Files changed (8) hide show
  1. package/CHANGELOG.json +70 -2
  2. package/CHANGELOG.md +26 -3
  3. package/lib/components/Badge/useBadgeStyles.js +3 -3
  4. package/lib/components/Badge/useBadgeStyles.js.map +1 -1
  5. package/lib-commonjs/components/Badge/useBadgeStyles.js +3 -3
  6. package/lib-commonjs/components/Badge/useBadgeStyles.js.map +1 -1
  7. package/package.json +6 -6
  8. package/dist/tsdoc-metadata.json +0 -11
package/CHANGELOG.json CHANGED
@@ -2,7 +2,75 @@
2
2
  "name": "@fluentui/react-badge",
3
3
  "entries": [
4
4
  {
5
- "date": "Wed, 03 Aug 2022 16:00:06 GMT",
5
+ "date": "Tue, 20 Sep 2022 20:54:08 GMT",
6
+ "tag": "@fluentui/react-badge_v9.0.6",
7
+ "version": "9.0.6",
8
+ "comments": {
9
+ "patch": [
10
+ {
11
+ "author": "beachball",
12
+ "package": "@fluentui/react-badge",
13
+ "comment": "Bump @fluentui/react-conformance-griffel to v9.0.0-beta.14",
14
+ "commit": "9617a5a46ef4c5e310a066a5374ff2ed61db3c66"
15
+ }
16
+ ]
17
+ }
18
+ },
19
+ {
20
+ "date": "Thu, 15 Sep 2022 09:49:54 GMT",
21
+ "tag": "@fluentui/react-badge_v9.0.5",
22
+ "version": "9.0.5",
23
+ "comments": {
24
+ "patch": [
25
+ {
26
+ "author": "seanmonahan@microsoft.com",
27
+ "package": "@fluentui/react-badge",
28
+ "commit": "1d0a72865a151962362aa3e5054ac9bf8178f09c",
29
+ "comment": "fix: update color tokens"
30
+ },
31
+ {
32
+ "author": "miroslav.stastny@microsoft.com",
33
+ "package": "@fluentui/react-badge",
34
+ "commit": "0137f992b99b3b8ec927be8f7aef751d27cd5830",
35
+ "comment": "fix: Rename colorNeutralForegroundInvertedStatic token to colorNeutralForegroundStaticInverted"
36
+ },
37
+ {
38
+ "author": "olfedias@microsoft.com",
39
+ "package": "@fluentui/react-badge",
40
+ "commit": "e610024474cfe5d45f61501a8b6a21daf4c794a2",
41
+ "comment": "chore: Update Griffel to latest version"
42
+ },
43
+ {
44
+ "author": "beachball",
45
+ "package": "@fluentui/react-badge",
46
+ "comment": "Bump @fluentui/react-theme to v9.1.0",
47
+ "commit": "a33448fe4a0f4117686c378f80b893d1406d95a8"
48
+ },
49
+ {
50
+ "author": "beachball",
51
+ "package": "@fluentui/react-badge",
52
+ "comment": "Bump @fluentui/react-utilities to v9.1.0",
53
+ "commit": "a33448fe4a0f4117686c378f80b893d1406d95a8"
54
+ },
55
+ {
56
+ "author": "beachball",
57
+ "package": "@fluentui/react-badge",
58
+ "comment": "Bump @fluentui/react-conformance-griffel to v9.0.0-beta.13",
59
+ "commit": "a33448fe4a0f4117686c378f80b893d1406d95a8"
60
+ }
61
+ ],
62
+ "none": [
63
+ {
64
+ "author": "martinhochel@microsoft.com",
65
+ "package": "@fluentui/react-badge",
66
+ "commit": "e6cf183695d6d67a24e038c49a876224e5ed35e5",
67
+ "comment": "chore: update package scaffold"
68
+ }
69
+ ]
70
+ }
71
+ },
72
+ {
73
+ "date": "Wed, 03 Aug 2022 16:03:39 GMT",
6
74
  "tag": "@fluentui/react-badge_v9.0.4",
7
75
  "version": "9.0.4",
8
76
  "comments": {
@@ -25,7 +93,7 @@
25
93
  "author": "beachball",
26
94
  "package": "@fluentui/react-badge",
27
95
  "comment": "Bump @fluentui/react-conformance-griffel to v9.0.0-beta.12",
28
- "commit": "54bc6105c5c9c9023da35d4670239e44117ed4a5"
96
+ "commit": "ee4a8be0d0831a6615f878f98db6a97cc61a802d"
29
97
  }
30
98
  ]
31
99
  }
package/CHANGELOG.md CHANGED
@@ -1,18 +1,41 @@
1
1
  # Change Log - @fluentui/react-badge
2
2
 
3
- This log was last generated on Wed, 03 Aug 2022 16:00:06 GMT and should not be manually modified.
3
+ This log was last generated on Tue, 20 Sep 2022 20:54:08 GMT and should not be manually modified.
4
4
 
5
5
  <!-- Start content -->
6
6
 
7
+ ## [9.0.6](https://github.com/microsoft/fluentui/tree/@fluentui/react-badge_v9.0.6)
8
+
9
+ Tue, 20 Sep 2022 20:54:08 GMT
10
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-badge_v9.0.5..@fluentui/react-badge_v9.0.6)
11
+
12
+ ### Patches
13
+
14
+ - Bump @fluentui/react-conformance-griffel to v9.0.0-beta.14 ([PR #24870](https://github.com/microsoft/fluentui/pull/24870) by beachball)
15
+
16
+ ## [9.0.5](https://github.com/microsoft/fluentui/tree/@fluentui/react-badge_v9.0.5)
17
+
18
+ Thu, 15 Sep 2022 09:49:54 GMT
19
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-badge_v9.0.4..@fluentui/react-badge_v9.0.5)
20
+
21
+ ### Patches
22
+
23
+ - fix: update color tokens ([PR #24027](https://github.com/microsoft/fluentui/pull/24027) by seanmonahan@microsoft.com)
24
+ - fix: Rename colorNeutralForegroundInvertedStatic token to colorNeutralForegroundStaticInverted ([PR #24611](https://github.com/microsoft/fluentui/pull/24611) by miroslav.stastny@microsoft.com)
25
+ - chore: Update Griffel to latest version ([PR #24221](https://github.com/microsoft/fluentui/pull/24221) by olfedias@microsoft.com)
26
+ - Bump @fluentui/react-theme to v9.1.0 ([PR #24808](https://github.com/microsoft/fluentui/pull/24808) by beachball)
27
+ - Bump @fluentui/react-utilities to v9.1.0 ([PR #24808](https://github.com/microsoft/fluentui/pull/24808) by beachball)
28
+ - Bump @fluentui/react-conformance-griffel to v9.0.0-beta.13 ([PR #24808](https://github.com/microsoft/fluentui/pull/24808) by beachball)
29
+
7
30
  ## [9.0.4](https://github.com/microsoft/fluentui/tree/@fluentui/react-badge_v9.0.4)
8
31
 
9
- Wed, 03 Aug 2022 16:00:06 GMT
32
+ Wed, 03 Aug 2022 16:03:39 GMT
10
33
  [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-badge_v9.0.3..@fluentui/react-badge_v9.0.4)
11
34
 
12
35
  ### Patches
13
36
 
14
37
  - chore: Bump Griffel dependencies ([PR #24114](https://github.com/microsoft/fluentui/pull/24114) by miroslav.stastny@microsoft.com)
15
- - Bump @fluentui/react-conformance-griffel to v9.0.0-beta.12 ([PR #24201](https://github.com/microsoft/fluentui/pull/24201) by beachball)
38
+ - Bump @fluentui/react-conformance-griffel to v9.0.0-beta.12 ([PR #24131](https://github.com/microsoft/fluentui/pull/24131) by beachball)
16
39
 
17
40
  ## [9.0.3](https://github.com/microsoft/fluentui/tree/@fluentui/react-badge_v9.0.3)
18
41
 
package/lib/components/Badge/useBadgeStyles.js CHANGED
@@ -173,7 +173,7 @@ const useRootStyles = /*#__PURE__*/__styles({
173
173
  "sj55zd": "f1l8vj45"
174
174
  },
175
175
  "ghost-subtle": {
176
- "sj55zd": "fqpbvvt"
176
+ "sj55zd": "fonrgv7"
177
177
  },
178
178
  "ghost-success": {
179
179
  "sj55zd": "f1m7fhi8"
@@ -211,7 +211,7 @@ const useRootStyles = /*#__PURE__*/__styles({
211
211
  "sj55zd": "f1l8vj45"
212
212
  },
213
213
  "outline-subtle": {
214
- "sj55zd": "fqpbvvt"
214
+ "sj55zd": "fonrgv7"
215
215
  },
216
216
  "outline-success": {
217
217
  "sj55zd": "f1sms7z7"
@@ -285,7 +285,7 @@ const useRootStyles = /*#__PURE__*/__styles({
285
285
  "zhjwy3": ["f51if14", "f1aw8cx4"]
286
286
  }
287
287
  }, {
288
- "d": [".ftuwxu6{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}", ".f1ewtqcl{box-sizing:border-box;}", ".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;}", ".f10pi13n{position:relative;}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".fy9rknc{font-size:var(--fontSizeBase200);}", ".fl43uef{font-weight:var(--fontWeightSemibold);}", ".fwrc4pm{line-height:var(--lineHeightBase200);}", ".f13mqy1h{font-size:var(--fontSizeBase100);}", ".fcpl73t{line-height:var(--lineHeightBase100);}", ".f16dn6v3{width:6px;}", ".f3mu39s{height:6px;}", ".f130uwy9{font-size:4px;}", ".fod1mrr{line-height:4px;}", ".fpd43o0{width:10px;}", ".f30q22z{height:10px;}", ".f1tccstq{font-size:6px;}", ".f1y3arg5{line-height:6px;}", ".fq2vo04{min-width:16px;}", ".fd461yt{height:16px;}", ".f1g0x7ka{padding-top:0;}", ".fps1v9c{padding-right:calc(var(--spacingHorizontalXXS) + var(--spacingHorizontalXXS));}", ".f17ae1jz{padding-left:calc(var(--spacingHorizontalXXS) + var(--spacingHorizontalXXS));}", ".f1qch9an{padding-bottom:0;}", ".fjamq6b{height:20px;}", ".f11u7vat{min-width:20px;}", ".f17a92cs{padding-right:calc(var(--spacingHorizontalXS) + var(--spacingHorizontalXXS));}", ".f1pe0i86{padding-left:calc(var(--spacingHorizontalXS) + var(--spacingHorizontalXXS));}", ".f17fgpbq{min-width:24px;}", ".frvgh55{height:24px;}", ".fwbmr0d{min-width:32px;}", ".f1d2rq10{height:32px;}", ".fqznh8f{padding-right:calc(var(--spacingHorizontalSNudge) + var(--spacingHorizontalXXS));}", ".f1xile11{padding-left:calc(var(--spacingHorizontalSNudge) + var(--spacingHorizontalXXS));}", ".fzi6hpg{border-bottom-right-radius:var(--borderRadiusNone);}", ".fyowgf4{border-bottom-left-radius:var(--borderRadiusNone);}", ".f3fg2lr{border-top-right-radius:var(--borderRadiusNone);}", ".f13av6d4{border-top-left-radius:var(--borderRadiusNone);}", ".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);}", ".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);}", ".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);}", ".f13zj6fq::after{content:\"\";}", ".f1mdlcz9::after{position:absolute;}", ".frwkxtg::after{top:0;}", ".f1n6gb5g::after{left:0;}", ".f15yvnhg::after{right:0;}", ".fo72kxq::after{bottom:0;}", ".f8rth92::after{border-top-style:solid;}", ".flthirb::after{border-right-style:solid;}", ".ftkbnf5::after{border-left-style:solid;}", ".f1lh990p::after{border-bottom-style:solid;}", ".f6czdpx::after{border-top-width:var(--strokeWidthThin);}", ".f13hvwk3::after{border-right-width:var(--strokeWidthThin);}", ".f1en4csx::after{border-left-width:var(--strokeWidthThin);}", ".f1i1u9k0::after{border-bottom-width:var(--strokeWidthThin);}", ".fhtl3ys::after{border-top-color:inherit;}", ".f140b627::after{border-right-color:inherit;}", ".f1wihoeh::after{border-left-color:inherit;}", ".fplas78::after{border-bottom-color:inherit;}", ".f1lf1ovl::after{border-bottom-right-radius:inherit;}", ".f1ydfmkj::after{border-bottom-left-radius:inherit;}", ".feq0ynf::after{border-top-right-radius:inherit;}", ".f1ss7ivt::after{border-top-left-radius:inherit;}", ".fghlq4f{border-top-color:var(--colorTransparentStroke);}", ".f1gn591s{border-right-color:var(--colorTransparentStroke);}", ".fjscplz{border-left-color:var(--colorTransparentStroke);}", ".fb073pr{border-bottom-color:var(--colorTransparentStroke);}", ".ffp7eso{background-color:var(--colorBrandBackground);}", ".f1phragk{color:var(--colorNeutralForegroundOnBrand);}", ".fdl5y0r{background-color:var(--colorPaletteRedBackground3);}", ".f1c73kur{background-color:var(--colorNeutralForeground1);}", ".fr0bkrk{color:var(--colorNeutralBackground1);}", ".f3vzo32{background-color:var(--colorNeutralBackground5);}", ".f11d4kpn{color:var(--colorNeutralForeground3);}", ".f1s438gw{background-color:var(--colorPaletteDarkOrangeBackground3);}", ".fxugw4r{background-color:var(--colorNeutralBackground1);}", ".f19n0e5{color:var(--colorNeutralForeground1);}", ".flxk52p{background-color:var(--colorPaletteGreenBackground3);}", ".ffq97bm{background-color:var(--colorPaletteYellowBackground3);}", ".ff5vbop{color:var(--colorNeutralForeground1Static);}", ".f16muhyy{color:var(--colorBrandForeground1);}", ".f1whyuy6{color:var(--colorPaletteRedForeground3);}", ".f1l8vj45{color:var(--colorPaletteDarkOrangeForeground3);}", ".fqpbvvt{color:var(--colorNeutralForegroundInverted);}", ".f1m7fhi8{color:var(--colorPaletteGreenForeground3);}", ".fpti2h4{color:var(--colorPaletteYellowForeground2);}", ".f23ftbb{border-top-color:currentColor;}", ".f1gkuv52{border-right-color:currentColor;}", ".f1p1bl80{border-left-color:currentColor;}", ".fioka3i{border-bottom-color:currentColor;}", ".fq0vr37{border-top-color:var(--colorNeutralStrokeAccessible);}", ".f1byw159{border-right-color:var(--colorNeutralStrokeAccessible);}", ".f11cr0be{border-left-color:var(--colorNeutralStrokeAccessible);}", ".f1c1zstj{border-bottom-color:var(--colorNeutralStrokeAccessible);}", ".f68mrw8{border-top-color:var(--colorNeutralStroke2);}", ".f7pw515{border-right-color:var(--colorNeutralStroke2);}", ".fw35ms5{border-left-color:var(--colorNeutralStroke2);}", ".frpde29{border-bottom-color:var(--colorNeutralStroke2);}", ".f1sms7z7{color:var(--colorPaletteGreenForeground2);}", ".f16xkysk{background-color:var(--colorBrandBackground2);}", ".faj9fo0{color:var(--colorBrandForeground2);}", ".f161y7kd{border-top-color:var(--colorBrandStroke2);}", ".f1c8dzaj{border-right-color:var(--colorBrandStroke2);}", ".f1sl6hi9{border-left-color:var(--colorBrandStroke2);}", ".f1619yhw{border-bottom-color:var(--colorBrandStroke2);}", ".ff0poqj{background-color:var(--colorPaletteRedBackground1);}", ".f1hcrxcs{color:var(--colorPaletteRedForeground1);}", ".f1oqjm8o{border-top-color:var(--colorPaletteRedBorder1);}", ".fkgrb8g{border-right-color:var(--colorPaletteRedBorder1);}", ".frb5wm0{border-left-color:var(--colorPaletteRedBorder1);}", ".f1iai1ph{border-bottom-color:var(--colorPaletteRedBorder1);}", ".f945g0u{background-color:var(--colorNeutralForeground3);}", ".f1ctqxl6{background-color:var(--colorNeutralBackground4);}", ".f1xzsg4{background-color:var(--colorPaletteDarkOrangeBackground1);}", ".f1k5f75o{color:var(--colorPaletteDarkOrangeForeground1);}", ".fxy9dsj{border-top-color:var(--colorPaletteDarkOrangeBorder1);}", ".f54u6j2{border-right-color:var(--colorPaletteDarkOrangeBorder1);}", ".fcm23ze{border-left-color:var(--colorPaletteDarkOrangeBorder1);}", ".f4vf0uq{border-bottom-color:var(--colorPaletteDarkOrangeBorder1);}", ".f2vsrz6{background-color:var(--colorPaletteGreenBackground1);}", ".ffmvakt{color:var(--colorPaletteGreenForeground1);}", ".fdmic9h{border-top-color:var(--colorPaletteGreenBorder1);}", ".f196y6m{border-right-color:var(--colorPaletteGreenBorder1);}", ".fetptd8{border-left-color:var(--colorPaletteGreenBorder1);}", ".f1pev5xq{border-bottom-color:var(--colorPaletteGreenBorder1);}", ".f10s6hli{background-color:var(--colorPaletteYellowBackground1);}", ".fn9i3n{border-top-color:var(--colorPaletteYellowBorder1);}", ".f1aw8cx4{border-right-color:var(--colorPaletteYellowBorder1);}", ".f51if14{border-left-color:var(--colorPaletteYellowBorder1);}", ".fvq8iai{border-bottom-color:var(--colorPaletteYellowBorder1);}"]
288
+ "d": [".ftuwxu6{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}", ".f1ewtqcl{box-sizing:border-box;}", ".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;}", ".f10pi13n{position:relative;}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".fy9rknc{font-size:var(--fontSizeBase200);}", ".fl43uef{font-weight:var(--fontWeightSemibold);}", ".fwrc4pm{line-height:var(--lineHeightBase200);}", ".f13mqy1h{font-size:var(--fontSizeBase100);}", ".fcpl73t{line-height:var(--lineHeightBase100);}", ".f16dn6v3{width:6px;}", ".f3mu39s{height:6px;}", ".f130uwy9{font-size:4px;}", ".fod1mrr{line-height:4px;}", ".fpd43o0{width:10px;}", ".f30q22z{height:10px;}", ".f1tccstq{font-size:6px;}", ".f1y3arg5{line-height:6px;}", ".fq2vo04{min-width:16px;}", ".fd461yt{height:16px;}", ".f1g0x7ka{padding-top:0;}", ".fps1v9c{padding-right:calc(var(--spacingHorizontalXXS) + var(--spacingHorizontalXXS));}", ".f17ae1jz{padding-left:calc(var(--spacingHorizontalXXS) + var(--spacingHorizontalXXS));}", ".f1qch9an{padding-bottom:0;}", ".fjamq6b{height:20px;}", ".f11u7vat{min-width:20px;}", ".f17a92cs{padding-right:calc(var(--spacingHorizontalXS) + var(--spacingHorizontalXXS));}", ".f1pe0i86{padding-left:calc(var(--spacingHorizontalXS) + var(--spacingHorizontalXXS));}", ".f17fgpbq{min-width:24px;}", ".frvgh55{height:24px;}", ".fwbmr0d{min-width:32px;}", ".f1d2rq10{height:32px;}", ".fqznh8f{padding-right:calc(var(--spacingHorizontalSNudge) + var(--spacingHorizontalXXS));}", ".f1xile11{padding-left:calc(var(--spacingHorizontalSNudge) + var(--spacingHorizontalXXS));}", ".fzi6hpg{border-bottom-right-radius:var(--borderRadiusNone);}", ".fyowgf4{border-bottom-left-radius:var(--borderRadiusNone);}", ".f3fg2lr{border-top-right-radius:var(--borderRadiusNone);}", ".f13av6d4{border-top-left-radius:var(--borderRadiusNone);}", ".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);}", ".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);}", ".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);}", ".f13zj6fq::after{content:\"\";}", ".f1mdlcz9::after{position:absolute;}", ".frwkxtg::after{top:0;}", ".f1n6gb5g::after{left:0;}", ".f15yvnhg::after{right:0;}", ".fo72kxq::after{bottom:0;}", ".f8rth92::after{border-top-style:solid;}", ".flthirb::after{border-right-style:solid;}", ".ftkbnf5::after{border-left-style:solid;}", ".f1lh990p::after{border-bottom-style:solid;}", ".f6czdpx::after{border-top-width:var(--strokeWidthThin);}", ".f13hvwk3::after{border-right-width:var(--strokeWidthThin);}", ".f1en4csx::after{border-left-width:var(--strokeWidthThin);}", ".f1i1u9k0::after{border-bottom-width:var(--strokeWidthThin);}", ".fhtl3ys::after{border-top-color:inherit;}", ".f140b627::after{border-right-color:inherit;}", ".f1wihoeh::after{border-left-color:inherit;}", ".fplas78::after{border-bottom-color:inherit;}", ".f1lf1ovl::after{border-bottom-right-radius:inherit;}", ".f1ydfmkj::after{border-bottom-left-radius:inherit;}", ".feq0ynf::after{border-top-right-radius:inherit;}", ".f1ss7ivt::after{border-top-left-radius:inherit;}", ".fghlq4f{border-top-color:var(--colorTransparentStroke);}", ".f1gn591s{border-right-color:var(--colorTransparentStroke);}", ".fjscplz{border-left-color:var(--colorTransparentStroke);}", ".fb073pr{border-bottom-color:var(--colorTransparentStroke);}", ".ffp7eso{background-color:var(--colorBrandBackground);}", ".f1phragk{color:var(--colorNeutralForegroundOnBrand);}", ".fdl5y0r{background-color:var(--colorPaletteRedBackground3);}", ".f1c73kur{background-color:var(--colorNeutralForeground1);}", ".fr0bkrk{color:var(--colorNeutralBackground1);}", ".f3vzo32{background-color:var(--colorNeutralBackground5);}", ".f11d4kpn{color:var(--colorNeutralForeground3);}", ".f1s438gw{background-color:var(--colorPaletteDarkOrangeBackground3);}", ".fxugw4r{background-color:var(--colorNeutralBackground1);}", ".f19n0e5{color:var(--colorNeutralForeground1);}", ".flxk52p{background-color:var(--colorPaletteGreenBackground3);}", ".ffq97bm{background-color:var(--colorPaletteYellowBackground3);}", ".ff5vbop{color:var(--colorNeutralForeground1Static);}", ".f16muhyy{color:var(--colorBrandForeground1);}", ".f1whyuy6{color:var(--colorPaletteRedForeground3);}", ".f1l8vj45{color:var(--colorPaletteDarkOrangeForeground3);}", ".fonrgv7{color:var(--colorNeutralForegroundStaticInverted);}", ".f1m7fhi8{color:var(--colorPaletteGreenForeground3);}", ".fpti2h4{color:var(--colorPaletteYellowForeground2);}", ".f23ftbb{border-top-color:currentColor;}", ".f1gkuv52{border-right-color:currentColor;}", ".f1p1bl80{border-left-color:currentColor;}", ".fioka3i{border-bottom-color:currentColor;}", ".fq0vr37{border-top-color:var(--colorNeutralStrokeAccessible);}", ".f1byw159{border-right-color:var(--colorNeutralStrokeAccessible);}", ".f11cr0be{border-left-color:var(--colorNeutralStrokeAccessible);}", ".f1c1zstj{border-bottom-color:var(--colorNeutralStrokeAccessible);}", ".f68mrw8{border-top-color:var(--colorNeutralStroke2);}", ".f7pw515{border-right-color:var(--colorNeutralStroke2);}", ".fw35ms5{border-left-color:var(--colorNeutralStroke2);}", ".frpde29{border-bottom-color:var(--colorNeutralStroke2);}", ".f1sms7z7{color:var(--colorPaletteGreenForeground2);}", ".f16xkysk{background-color:var(--colorBrandBackground2);}", ".faj9fo0{color:var(--colorBrandForeground2);}", ".f161y7kd{border-top-color:var(--colorBrandStroke2);}", ".f1c8dzaj{border-right-color:var(--colorBrandStroke2);}", ".f1sl6hi9{border-left-color:var(--colorBrandStroke2);}", ".f1619yhw{border-bottom-color:var(--colorBrandStroke2);}", ".ff0poqj{background-color:var(--colorPaletteRedBackground1);}", ".f1hcrxcs{color:var(--colorPaletteRedForeground1);}", ".f1oqjm8o{border-top-color:var(--colorPaletteRedBorder1);}", ".fkgrb8g{border-right-color:var(--colorPaletteRedBorder1);}", ".frb5wm0{border-left-color:var(--colorPaletteRedBorder1);}", ".f1iai1ph{border-bottom-color:var(--colorPaletteRedBorder1);}", ".f945g0u{background-color:var(--colorNeutralForeground3);}", ".f1ctqxl6{background-color:var(--colorNeutralBackground4);}", ".f1xzsg4{background-color:var(--colorPaletteDarkOrangeBackground1);}", ".f1k5f75o{color:var(--colorPaletteDarkOrangeForeground1);}", ".fxy9dsj{border-top-color:var(--colorPaletteDarkOrangeBorder1);}", ".f54u6j2{border-right-color:var(--colorPaletteDarkOrangeBorder1);}", ".fcm23ze{border-left-color:var(--colorPaletteDarkOrangeBorder1);}", ".f4vf0uq{border-bottom-color:var(--colorPaletteDarkOrangeBorder1);}", ".f2vsrz6{background-color:var(--colorPaletteGreenBackground1);}", ".ffmvakt{color:var(--colorPaletteGreenForeground1);}", ".fdmic9h{border-top-color:var(--colorPaletteGreenBorder1);}", ".f196y6m{border-right-color:var(--colorPaletteGreenBorder1);}", ".fetptd8{border-left-color:var(--colorPaletteGreenBorder1);}", ".f1pev5xq{border-bottom-color:var(--colorPaletteGreenBorder1);}", ".f10s6hli{background-color:var(--colorPaletteYellowBackground1);}", ".fn9i3n{border-top-color:var(--colorPaletteYellowBorder1);}", ".f1aw8cx4{border-right-color:var(--colorPaletteYellowBorder1);}", ".f51if14{border-left-color:var(--colorPaletteYellowBorder1);}", ".fvq8iai{border-bottom-color:var(--colorPaletteYellowBorder1);}"]
289
289
  });
290
290
 
291
291
  const useIconStyles = /*#__PURE__*/__styles({
package/lib/components/Badge/useBadgeStyles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["components/Badge/useBadgeStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { shorthands, mergeClasses, makeStyles } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport type { BadgeSlots, BadgeState } from './Badge.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const badgeClassNames: SlotClassNames<BadgeSlots> = {\n root: 'fui-Badge',\n icon: 'fui-Badge__icon',\n};\n\n// The text content of the badge has additional horizontal padding, but there is no `text` slot to add that padding to.\n// Instead, add extra padding to the root, and a negative margin on the icon to \"remove\" the extra padding on the icon.\nconst textPadding = tokens.spacingHorizontalXXS;\n\nconst useRootStyles = makeStyles({\n base: {\n display: 'inline-flex',\n boxSizing: 'border-box',\n alignItems: 'center',\n justifyContent: 'center',\n position: 'relative',\n ...typographyStyles.caption1Strong,\n },\n\n fontSmallToTiny: {\n ...typographyStyles.caption2Strong,\n },\n\n // size\n\n tiny: {\n width: '6px',\n height: '6px',\n fontSize: '4px',\n lineHeight: '4px',\n },\n 'extra-small': {\n width: '10px',\n height: '10px',\n fontSize: '6px',\n lineHeight: '6px',\n },\n small: {\n minWidth: '16px',\n height: '16px',\n ...shorthands.padding(0, `calc(${tokens.spacingHorizontalXXS} + ${textPadding})`),\n },\n medium: {\n height: '20px',\n minWidth: '20px',\n ...shorthands.padding(0, `calc(${tokens.spacingHorizontalXS} + ${textPadding})`),\n },\n large: {\n minWidth: '24px',\n height: '24px',\n ...shorthands.padding(0, `calc(${tokens.spacingHorizontalXS} + ${textPadding})`),\n },\n 'extra-large': {\n minWidth: '32px',\n height: '32px',\n ...shorthands.padding(0, `calc(${tokens.spacingHorizontalSNudge} + ${textPadding})`),\n },\n\n // shape\n\n square: {\n ...shorthands.borderRadius(tokens.borderRadiusNone),\n },\n rounded: {\n ...shorthands.borderRadius(tokens.borderRadiusMedium),\n },\n roundedSmallToTiny: {\n ...shorthands.borderRadius(tokens.borderRadiusSmall),\n },\n circular: {\n ...shorthands.borderRadius(tokens.borderRadiusCircular),\n },\n\n // border (all appearances except ghost)\n\n border: {\n // The border is applied in an :after pseudo-element because it should not affect layout.\n // The padding and size of the badge should be the same regardless of whether or not it has a border.\n '::after': {\n content: '\"\"',\n position: 'absolute',\n top: 0,\n left: 0,\n bottom: 0,\n right: 0,\n ...shorthands.borderStyle('solid'),\n ...shorthands.borderWidth(tokens.strokeWidthThin),\n ...shorthands.borderColor('inherit'),\n ...shorthands.borderRadius('inherit'),\n },\n },\n\n // appearance: filled\n\n filled: {\n // Use a transparent stroke (rather than no border) so the border is visible in high contrast\n ...shorthands.borderColor(tokens.colorTransparentStroke),\n },\n 'filled-brand': {\n backgroundColor: tokens.colorBrandBackground,\n color: tokens.colorNeutralForegroundOnBrand,\n },\n 'filled-danger': {\n backgroundColor: tokens.colorPaletteRedBackground3,\n color: tokens.colorNeutralForegroundOnBrand,\n },\n 'filled-important': {\n backgroundColor: tokens.colorNeutralForeground1,\n color: tokens.colorNeutralBackground1,\n },\n 'filled-informative': {\n backgroundColor: tokens.colorNeutralBackground5,\n color: tokens.colorNeutralForeground3,\n },\n 'filled-severe': {\n backgroundColor: tokens.colorPaletteDarkOrangeBackground3,\n color: tokens.colorNeutralForegroundOnBrand,\n },\n 'filled-subtle': {\n backgroundColor: tokens.colorNeutralBackground1,\n color: tokens.colorNeutralForeground1,\n },\n 'filled-success': {\n backgroundColor: tokens.colorPaletteGreenBackground3,\n color: tokens.colorNeutralForegroundOnBrand,\n },\n 'filled-warning': {\n backgroundColor: tokens.colorPaletteYellowBackground3,\n color: tokens.colorNeutralForeground1Static,\n },\n\n // appearance: ghost\n\n ghost: {\n // No shared colors between ghost appearances\n },\n 'ghost-brand': {\n color: tokens.colorBrandForeground1,\n },\n 'ghost-danger': {\n color: tokens.colorPaletteRedForeground3,\n },\n 'ghost-important': {\n color: tokens.colorNeutralForeground1,\n },\n 'ghost-informative': {\n color: tokens.colorNeutralForeground3,\n },\n 'ghost-severe': {\n color: tokens.colorPaletteDarkOrangeForeground3,\n },\n 'ghost-subtle': {\n color: tokens.colorNeutralForegroundInverted,\n },\n 'ghost-success': {\n color: tokens.colorPaletteGreenForeground3,\n },\n 'ghost-warning': {\n color: tokens.colorPaletteYellowForeground2,\n },\n\n // appearance: outline\n\n outline: {\n ...shorthands.borderColor('currentColor'),\n },\n 'outline-brand': {\n color: tokens.colorBrandForeground1,\n },\n 'outline-danger': {\n color: tokens.colorPaletteRedForeground3,\n },\n 'outline-important': {\n color: tokens.colorNeutralForeground3,\n ...shorthands.borderColor(tokens.colorNeutralStrokeAccessible),\n },\n 'outline-informative': {\n color: tokens.colorNeutralForeground3,\n ...shorthands.borderColor(tokens.colorNeutralStroke2),\n },\n 'outline-severe': {\n color: tokens.colorPaletteDarkOrangeForeground3,\n },\n 'outline-subtle': {\n color: tokens.colorNeutralForegroundInverted,\n },\n 'outline-success': {\n color: tokens.colorPaletteGreenForeground2,\n },\n 'outline-warning': {\n color: tokens.colorPaletteYellowForeground2,\n },\n\n // appearance: tint\n\n tint: {\n // No shared colors between tint appearances\n },\n 'tint-brand': {\n backgroundColor: tokens.colorBrandBackground2,\n color: tokens.colorBrandForeground2,\n ...shorthands.borderColor(tokens.colorBrandStroke2),\n },\n 'tint-danger': {\n backgroundColor: tokens.colorPaletteRedBackground1,\n color: tokens.colorPaletteRedForeground1,\n ...shorthands.borderColor(tokens.colorPaletteRedBorder1),\n },\n 'tint-important': {\n backgroundColor: tokens.colorNeutralForeground3,\n color: tokens.colorNeutralBackground1,\n ...shorthands.borderColor(tokens.colorTransparentStroke),\n },\n 'tint-informative': {\n backgroundColor: tokens.colorNeutralBackground4,\n color: tokens.colorNeutralForeground3,\n ...shorthands.borderColor(tokens.colorNeutralStroke2),\n },\n 'tint-severe': {\n backgroundColor: tokens.colorPaletteDarkOrangeBackground1,\n color: tokens.colorPaletteDarkOrangeForeground1,\n ...shorthands.borderColor(tokens.colorPaletteDarkOrangeBorder1),\n },\n 'tint-subtle': {\n backgroundColor: tokens.colorNeutralBackground1,\n color: tokens.colorNeutralForeground3,\n ...shorthands.borderColor(tokens.colorNeutralStroke2),\n },\n 'tint-success': {\n backgroundColor: tokens.colorPaletteGreenBackground1,\n color: tokens.colorPaletteGreenForeground1,\n ...shorthands.borderColor(tokens.colorPaletteGreenBorder1),\n },\n 'tint-warning': {\n backgroundColor: tokens.colorPaletteYellowBackground1,\n color: tokens.colorPaletteYellowForeground2,\n ...shorthands.borderColor(tokens.colorPaletteYellowBorder1),\n },\n});\n\nconst useIconStyles = makeStyles({\n base: {\n display: 'flex',\n lineHeight: '1',\n ...shorthands.margin(0, `calc(-1 * ${textPadding})`), // Remove text padding added to root\n },\n\n beforeText: {\n marginRight: `calc(${tokens.spacingHorizontalXXS} + ${textPadding})`,\n },\n afterText: {\n marginLeft: `calc(${tokens.spacingHorizontalXXS} + ${textPadding})`,\n },\n\n beforeTextXL: {\n marginRight: `calc(${tokens.spacingHorizontalXS} + ${textPadding})`,\n },\n afterTextXL: {\n marginLeft: `calc(${tokens.spacingHorizontalXS} + ${textPadding})`,\n },\n\n // size\n\n tiny: {\n fontSize: '6px',\n },\n 'extra-small': {\n fontSize: '10px',\n },\n small: {\n fontSize: '12px',\n },\n medium: {\n fontSize: '12px',\n },\n large: {\n fontSize: '16px',\n },\n 'extra-large': {\n fontSize: '20px',\n },\n});\n\n/**\n * Applies style classnames to slots\n */\nexport const useBadgeStyles_unstable = (state: BadgeState): BadgeState => {\n const rootStyles = useRootStyles();\n\n const smallToTiny = state.size === 'small' || state.size === 'extra-small' || state.size === 'tiny';\n\n state.root.className = mergeClasses(\n badgeClassNames.root,\n rootStyles.base,\n smallToTiny && rootStyles.fontSmallToTiny,\n rootStyles[state.size],\n rootStyles[state.shape],\n state.shape === 'rounded' && smallToTiny && rootStyles.roundedSmallToTiny,\n state.appearance !== 'ghost' && rootStyles.border,\n rootStyles[state.appearance],\n rootStyles[`${state.appearance}-${state.color}` as const],\n state.root.className,\n );\n\n const iconStyles = useIconStyles();\n if (state.icon) {\n let iconPositionClass;\n if (state.root.children) {\n if (state.size === 'extra-large') {\n iconPositionClass = state.iconPosition === 'after' ? iconStyles.afterTextXL : iconStyles.beforeTextXL;\n } else {\n iconPositionClass = state.iconPosition === 'after' ? iconStyles.afterText : iconStyles.beforeText;\n }\n }\n\n state.icon.className = mergeClasses(\n badgeClassNames.icon,\n iconStyles.base,\n iconPositionClass,\n iconStyles[state.size],\n state.icon.className,\n );\n }\n\n return state;\n};\n"],"sourceRoot":"../src/"}
1
+ {"version":3,"sources":["components/Badge/useBadgeStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { shorthands, mergeClasses, makeStyles } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport type { BadgeSlots, BadgeState } from './Badge.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const badgeClassNames: SlotClassNames<BadgeSlots> = {\n root: 'fui-Badge',\n icon: 'fui-Badge__icon',\n};\n\n// The text content of the badge has additional horizontal padding, but there is no `text` slot to add that padding to.\n// Instead, add extra padding to the root, and a negative margin on the icon to \"remove\" the extra padding on the icon.\nconst textPadding = tokens.spacingHorizontalXXS;\n\nconst useRootStyles = makeStyles({\n base: {\n display: 'inline-flex',\n boxSizing: 'border-box',\n alignItems: 'center',\n justifyContent: 'center',\n position: 'relative',\n ...typographyStyles.caption1Strong,\n },\n\n fontSmallToTiny: {\n ...typographyStyles.caption2Strong,\n },\n\n // size\n\n tiny: {\n width: '6px',\n height: '6px',\n fontSize: '4px',\n lineHeight: '4px',\n },\n 'extra-small': {\n width: '10px',\n height: '10px',\n fontSize: '6px',\n lineHeight: '6px',\n },\n small: {\n minWidth: '16px',\n height: '16px',\n ...shorthands.padding(0, `calc(${tokens.spacingHorizontalXXS} + ${textPadding})`),\n },\n medium: {\n height: '20px',\n minWidth: '20px',\n ...shorthands.padding(0, `calc(${tokens.spacingHorizontalXS} + ${textPadding})`),\n },\n large: {\n minWidth: '24px',\n height: '24px',\n ...shorthands.padding(0, `calc(${tokens.spacingHorizontalXS} + ${textPadding})`),\n },\n 'extra-large': {\n minWidth: '32px',\n height: '32px',\n ...shorthands.padding(0, `calc(${tokens.spacingHorizontalSNudge} + ${textPadding})`),\n },\n\n // shape\n\n square: {\n ...shorthands.borderRadius(tokens.borderRadiusNone),\n },\n rounded: {\n ...shorthands.borderRadius(tokens.borderRadiusMedium),\n },\n roundedSmallToTiny: {\n ...shorthands.borderRadius(tokens.borderRadiusSmall),\n },\n circular: {\n ...shorthands.borderRadius(tokens.borderRadiusCircular),\n },\n\n // border (all appearances except ghost)\n\n border: {\n // The border is applied in an :after pseudo-element because it should not affect layout.\n // The padding and size of the badge should be the same regardless of whether or not it has a border.\n '::after': {\n content: '\"\"',\n position: 'absolute',\n top: 0,\n left: 0,\n bottom: 0,\n right: 0,\n ...shorthands.borderStyle('solid'),\n ...shorthands.borderWidth(tokens.strokeWidthThin),\n ...shorthands.borderColor('inherit'),\n ...shorthands.borderRadius('inherit'),\n },\n },\n\n // appearance: filled\n\n filled: {\n // Use a transparent stroke (rather than no border) so the border is visible in high contrast\n ...shorthands.borderColor(tokens.colorTransparentStroke),\n },\n 'filled-brand': {\n backgroundColor: tokens.colorBrandBackground,\n color: tokens.colorNeutralForegroundOnBrand,\n },\n 'filled-danger': {\n backgroundColor: tokens.colorPaletteRedBackground3,\n color: tokens.colorNeutralForegroundOnBrand,\n },\n 'filled-important': {\n backgroundColor: tokens.colorNeutralForeground1,\n color: tokens.colorNeutralBackground1,\n },\n 'filled-informative': {\n backgroundColor: tokens.colorNeutralBackground5,\n color: tokens.colorNeutralForeground3,\n },\n 'filled-severe': {\n backgroundColor: tokens.colorPaletteDarkOrangeBackground3,\n color: tokens.colorNeutralForegroundOnBrand,\n },\n 'filled-subtle': {\n backgroundColor: tokens.colorNeutralBackground1,\n color: tokens.colorNeutralForeground1,\n },\n 'filled-success': {\n backgroundColor: tokens.colorPaletteGreenBackground3,\n color: tokens.colorNeutralForegroundOnBrand,\n },\n 'filled-warning': {\n backgroundColor: tokens.colorPaletteYellowBackground3,\n color: tokens.colorNeutralForeground1Static,\n },\n\n // appearance: ghost\n\n ghost: {\n // No shared colors between ghost appearances\n },\n 'ghost-brand': {\n color: tokens.colorBrandForeground1,\n },\n 'ghost-danger': {\n color: tokens.colorPaletteRedForeground3,\n },\n 'ghost-important': {\n color: tokens.colorNeutralForeground1,\n },\n 'ghost-informative': {\n color: tokens.colorNeutralForeground3,\n },\n 'ghost-severe': {\n color: tokens.colorPaletteDarkOrangeForeground3,\n },\n 'ghost-subtle': {\n color: tokens.colorNeutralForegroundStaticInverted,\n },\n 'ghost-success': {\n color: tokens.colorPaletteGreenForeground3,\n },\n 'ghost-warning': {\n color: tokens.colorPaletteYellowForeground2,\n },\n\n // appearance: outline\n\n outline: {\n ...shorthands.borderColor('currentColor'),\n },\n 'outline-brand': {\n color: tokens.colorBrandForeground1,\n },\n 'outline-danger': {\n color: tokens.colorPaletteRedForeground3,\n },\n 'outline-important': {\n color: tokens.colorNeutralForeground3,\n ...shorthands.borderColor(tokens.colorNeutralStrokeAccessible),\n },\n 'outline-informative': {\n color: tokens.colorNeutralForeground3,\n ...shorthands.borderColor(tokens.colorNeutralStroke2),\n },\n 'outline-severe': {\n color: tokens.colorPaletteDarkOrangeForeground3,\n },\n 'outline-subtle': {\n color: tokens.colorNeutralForegroundStaticInverted,\n },\n 'outline-success': {\n color: tokens.colorPaletteGreenForeground2,\n },\n 'outline-warning': {\n color: tokens.colorPaletteYellowForeground2,\n },\n\n // appearance: tint\n\n tint: {\n // No shared colors between tint appearances\n },\n 'tint-brand': {\n backgroundColor: tokens.colorBrandBackground2,\n color: tokens.colorBrandForeground2,\n ...shorthands.borderColor(tokens.colorBrandStroke2),\n },\n 'tint-danger': {\n backgroundColor: tokens.colorPaletteRedBackground1,\n color: tokens.colorPaletteRedForeground1,\n ...shorthands.borderColor(tokens.colorPaletteRedBorder1),\n },\n 'tint-important': {\n backgroundColor: tokens.colorNeutralForeground3,\n color: tokens.colorNeutralBackground1,\n ...shorthands.borderColor(tokens.colorTransparentStroke),\n },\n 'tint-informative': {\n backgroundColor: tokens.colorNeutralBackground4,\n color: tokens.colorNeutralForeground3,\n ...shorthands.borderColor(tokens.colorNeutralStroke2),\n },\n 'tint-severe': {\n backgroundColor: tokens.colorPaletteDarkOrangeBackground1,\n color: tokens.colorPaletteDarkOrangeForeground1,\n ...shorthands.borderColor(tokens.colorPaletteDarkOrangeBorder1),\n },\n 'tint-subtle': {\n backgroundColor: tokens.colorNeutralBackground1,\n color: tokens.colorNeutralForeground3,\n ...shorthands.borderColor(tokens.colorNeutralStroke2),\n },\n 'tint-success': {\n backgroundColor: tokens.colorPaletteGreenBackground1,\n color: tokens.colorPaletteGreenForeground1,\n ...shorthands.borderColor(tokens.colorPaletteGreenBorder1),\n },\n 'tint-warning': {\n backgroundColor: tokens.colorPaletteYellowBackground1,\n color: tokens.colorPaletteYellowForeground2,\n ...shorthands.borderColor(tokens.colorPaletteYellowBorder1),\n },\n});\n\nconst useIconStyles = makeStyles({\n base: {\n display: 'flex',\n lineHeight: '1',\n ...shorthands.margin(0, `calc(-1 * ${textPadding})`), // Remove text padding added to root\n },\n\n beforeText: {\n marginRight: `calc(${tokens.spacingHorizontalXXS} + ${textPadding})`,\n },\n afterText: {\n marginLeft: `calc(${tokens.spacingHorizontalXXS} + ${textPadding})`,\n },\n\n beforeTextXL: {\n marginRight: `calc(${tokens.spacingHorizontalXS} + ${textPadding})`,\n },\n afterTextXL: {\n marginLeft: `calc(${tokens.spacingHorizontalXS} + ${textPadding})`,\n },\n\n // size\n\n tiny: {\n fontSize: '6px',\n },\n 'extra-small': {\n fontSize: '10px',\n },\n small: {\n fontSize: '12px',\n },\n medium: {\n fontSize: '12px',\n },\n large: {\n fontSize: '16px',\n },\n 'extra-large': {\n fontSize: '20px',\n },\n});\n\n/**\n * Applies style classnames to slots\n */\nexport const useBadgeStyles_unstable = (state: BadgeState): BadgeState => {\n const rootStyles = useRootStyles();\n\n const smallToTiny = state.size === 'small' || state.size === 'extra-small' || state.size === 'tiny';\n\n state.root.className = mergeClasses(\n badgeClassNames.root,\n rootStyles.base,\n smallToTiny && rootStyles.fontSmallToTiny,\n rootStyles[state.size],\n rootStyles[state.shape],\n state.shape === 'rounded' && smallToTiny && rootStyles.roundedSmallToTiny,\n state.appearance !== 'ghost' && rootStyles.border,\n rootStyles[state.appearance],\n rootStyles[`${state.appearance}-${state.color}` as const],\n state.root.className,\n );\n\n const iconStyles = useIconStyles();\n if (state.icon) {\n let iconPositionClass;\n if (state.root.children) {\n if (state.size === 'extra-large') {\n iconPositionClass = state.iconPosition === 'after' ? iconStyles.afterTextXL : iconStyles.beforeTextXL;\n } else {\n iconPositionClass = state.iconPosition === 'after' ? iconStyles.afterText : iconStyles.beforeText;\n }\n }\n\n state.icon.className = mergeClasses(\n badgeClassNames.icon,\n iconStyles.base,\n iconPositionClass,\n iconStyles[state.size],\n state.icon.className,\n );\n }\n\n return state;\n};\n"],"sourceRoot":"../src/"}
package/lib-commonjs/components/Badge/useBadgeStyles.js CHANGED
@@ -182,7 +182,7 @@ const useRootStyles = /*#__PURE__*/react_1.__styles({
182
182
  "sj55zd": "f1l8vj45"
183
183
  },
184
184
  "ghost-subtle": {
185
- "sj55zd": "fqpbvvt"
185
+ "sj55zd": "fonrgv7"
186
186
  },
187
187
  "ghost-success": {
188
188
  "sj55zd": "f1m7fhi8"
@@ -220,7 +220,7 @@ const useRootStyles = /*#__PURE__*/react_1.__styles({
220
220
  "sj55zd": "f1l8vj45"
221
221
  },
222
222
  "outline-subtle": {
223
- "sj55zd": "fqpbvvt"
223
+ "sj55zd": "fonrgv7"
224
224
  },
225
225
  "outline-success": {
226
226
  "sj55zd": "f1sms7z7"
@@ -294,7 +294,7 @@ const useRootStyles = /*#__PURE__*/react_1.__styles({
294
294
  "zhjwy3": ["f51if14", "f1aw8cx4"]
295
295
  }
296
296
  }, {
297
- "d": [".ftuwxu6{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}", ".f1ewtqcl{box-sizing:border-box;}", ".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;}", ".f10pi13n{position:relative;}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".fy9rknc{font-size:var(--fontSizeBase200);}", ".fl43uef{font-weight:var(--fontWeightSemibold);}", ".fwrc4pm{line-height:var(--lineHeightBase200);}", ".f13mqy1h{font-size:var(--fontSizeBase100);}", ".fcpl73t{line-height:var(--lineHeightBase100);}", ".f16dn6v3{width:6px;}", ".f3mu39s{height:6px;}", ".f130uwy9{font-size:4px;}", ".fod1mrr{line-height:4px;}", ".fpd43o0{width:10px;}", ".f30q22z{height:10px;}", ".f1tccstq{font-size:6px;}", ".f1y3arg5{line-height:6px;}", ".fq2vo04{min-width:16px;}", ".fd461yt{height:16px;}", ".f1g0x7ka{padding-top:0;}", ".fps1v9c{padding-right:calc(var(--spacingHorizontalXXS) + var(--spacingHorizontalXXS));}", ".f17ae1jz{padding-left:calc(var(--spacingHorizontalXXS) + var(--spacingHorizontalXXS));}", ".f1qch9an{padding-bottom:0;}", ".fjamq6b{height:20px;}", ".f11u7vat{min-width:20px;}", ".f17a92cs{padding-right:calc(var(--spacingHorizontalXS) + var(--spacingHorizontalXXS));}", ".f1pe0i86{padding-left:calc(var(--spacingHorizontalXS) + var(--spacingHorizontalXXS));}", ".f17fgpbq{min-width:24px;}", ".frvgh55{height:24px;}", ".fwbmr0d{min-width:32px;}", ".f1d2rq10{height:32px;}", ".fqznh8f{padding-right:calc(var(--spacingHorizontalSNudge) + var(--spacingHorizontalXXS));}", ".f1xile11{padding-left:calc(var(--spacingHorizontalSNudge) + var(--spacingHorizontalXXS));}", ".fzi6hpg{border-bottom-right-radius:var(--borderRadiusNone);}", ".fyowgf4{border-bottom-left-radius:var(--borderRadiusNone);}", ".f3fg2lr{border-top-right-radius:var(--borderRadiusNone);}", ".f13av6d4{border-top-left-radius:var(--borderRadiusNone);}", ".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);}", ".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);}", ".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);}", ".f13zj6fq::after{content:\"\";}", ".f1mdlcz9::after{position:absolute;}", ".frwkxtg::after{top:0;}", ".f1n6gb5g::after{left:0;}", ".f15yvnhg::after{right:0;}", ".fo72kxq::after{bottom:0;}", ".f8rth92::after{border-top-style:solid;}", ".flthirb::after{border-right-style:solid;}", ".ftkbnf5::after{border-left-style:solid;}", ".f1lh990p::after{border-bottom-style:solid;}", ".f6czdpx::after{border-top-width:var(--strokeWidthThin);}", ".f13hvwk3::after{border-right-width:var(--strokeWidthThin);}", ".f1en4csx::after{border-left-width:var(--strokeWidthThin);}", ".f1i1u9k0::after{border-bottom-width:var(--strokeWidthThin);}", ".fhtl3ys::after{border-top-color:inherit;}", ".f140b627::after{border-right-color:inherit;}", ".f1wihoeh::after{border-left-color:inherit;}", ".fplas78::after{border-bottom-color:inherit;}", ".f1lf1ovl::after{border-bottom-right-radius:inherit;}", ".f1ydfmkj::after{border-bottom-left-radius:inherit;}", ".feq0ynf::after{border-top-right-radius:inherit;}", ".f1ss7ivt::after{border-top-left-radius:inherit;}", ".fghlq4f{border-top-color:var(--colorTransparentStroke);}", ".f1gn591s{border-right-color:var(--colorTransparentStroke);}", ".fjscplz{border-left-color:var(--colorTransparentStroke);}", ".fb073pr{border-bottom-color:var(--colorTransparentStroke);}", ".ffp7eso{background-color:var(--colorBrandBackground);}", ".f1phragk{color:var(--colorNeutralForegroundOnBrand);}", ".fdl5y0r{background-color:var(--colorPaletteRedBackground3);}", ".f1c73kur{background-color:var(--colorNeutralForeground1);}", ".fr0bkrk{color:var(--colorNeutralBackground1);}", ".f3vzo32{background-color:var(--colorNeutralBackground5);}", ".f11d4kpn{color:var(--colorNeutralForeground3);}", ".f1s438gw{background-color:var(--colorPaletteDarkOrangeBackground3);}", ".fxugw4r{background-color:var(--colorNeutralBackground1);}", ".f19n0e5{color:var(--colorNeutralForeground1);}", ".flxk52p{background-color:var(--colorPaletteGreenBackground3);}", ".ffq97bm{background-color:var(--colorPaletteYellowBackground3);}", ".ff5vbop{color:var(--colorNeutralForeground1Static);}", ".f16muhyy{color:var(--colorBrandForeground1);}", ".f1whyuy6{color:var(--colorPaletteRedForeground3);}", ".f1l8vj45{color:var(--colorPaletteDarkOrangeForeground3);}", ".fqpbvvt{color:var(--colorNeutralForegroundInverted);}", ".f1m7fhi8{color:var(--colorPaletteGreenForeground3);}", ".fpti2h4{color:var(--colorPaletteYellowForeground2);}", ".f23ftbb{border-top-color:currentColor;}", ".f1gkuv52{border-right-color:currentColor;}", ".f1p1bl80{border-left-color:currentColor;}", ".fioka3i{border-bottom-color:currentColor;}", ".fq0vr37{border-top-color:var(--colorNeutralStrokeAccessible);}", ".f1byw159{border-right-color:var(--colorNeutralStrokeAccessible);}", ".f11cr0be{border-left-color:var(--colorNeutralStrokeAccessible);}", ".f1c1zstj{border-bottom-color:var(--colorNeutralStrokeAccessible);}", ".f68mrw8{border-top-color:var(--colorNeutralStroke2);}", ".f7pw515{border-right-color:var(--colorNeutralStroke2);}", ".fw35ms5{border-left-color:var(--colorNeutralStroke2);}", ".frpde29{border-bottom-color:var(--colorNeutralStroke2);}", ".f1sms7z7{color:var(--colorPaletteGreenForeground2);}", ".f16xkysk{background-color:var(--colorBrandBackground2);}", ".faj9fo0{color:var(--colorBrandForeground2);}", ".f161y7kd{border-top-color:var(--colorBrandStroke2);}", ".f1c8dzaj{border-right-color:var(--colorBrandStroke2);}", ".f1sl6hi9{border-left-color:var(--colorBrandStroke2);}", ".f1619yhw{border-bottom-color:var(--colorBrandStroke2);}", ".ff0poqj{background-color:var(--colorPaletteRedBackground1);}", ".f1hcrxcs{color:var(--colorPaletteRedForeground1);}", ".f1oqjm8o{border-top-color:var(--colorPaletteRedBorder1);}", ".fkgrb8g{border-right-color:var(--colorPaletteRedBorder1);}", ".frb5wm0{border-left-color:var(--colorPaletteRedBorder1);}", ".f1iai1ph{border-bottom-color:var(--colorPaletteRedBorder1);}", ".f945g0u{background-color:var(--colorNeutralForeground3);}", ".f1ctqxl6{background-color:var(--colorNeutralBackground4);}", ".f1xzsg4{background-color:var(--colorPaletteDarkOrangeBackground1);}", ".f1k5f75o{color:var(--colorPaletteDarkOrangeForeground1);}", ".fxy9dsj{border-top-color:var(--colorPaletteDarkOrangeBorder1);}", ".f54u6j2{border-right-color:var(--colorPaletteDarkOrangeBorder1);}", ".fcm23ze{border-left-color:var(--colorPaletteDarkOrangeBorder1);}", ".f4vf0uq{border-bottom-color:var(--colorPaletteDarkOrangeBorder1);}", ".f2vsrz6{background-color:var(--colorPaletteGreenBackground1);}", ".ffmvakt{color:var(--colorPaletteGreenForeground1);}", ".fdmic9h{border-top-color:var(--colorPaletteGreenBorder1);}", ".f196y6m{border-right-color:var(--colorPaletteGreenBorder1);}", ".fetptd8{border-left-color:var(--colorPaletteGreenBorder1);}", ".f1pev5xq{border-bottom-color:var(--colorPaletteGreenBorder1);}", ".f10s6hli{background-color:var(--colorPaletteYellowBackground1);}", ".fn9i3n{border-top-color:var(--colorPaletteYellowBorder1);}", ".f1aw8cx4{border-right-color:var(--colorPaletteYellowBorder1);}", ".f51if14{border-left-color:var(--colorPaletteYellowBorder1);}", ".fvq8iai{border-bottom-color:var(--colorPaletteYellowBorder1);}"]
297
+ "d": [".ftuwxu6{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}", ".f1ewtqcl{box-sizing:border-box;}", ".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;}", ".f10pi13n{position:relative;}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".fy9rknc{font-size:var(--fontSizeBase200);}", ".fl43uef{font-weight:var(--fontWeightSemibold);}", ".fwrc4pm{line-height:var(--lineHeightBase200);}", ".f13mqy1h{font-size:var(--fontSizeBase100);}", ".fcpl73t{line-height:var(--lineHeightBase100);}", ".f16dn6v3{width:6px;}", ".f3mu39s{height:6px;}", ".f130uwy9{font-size:4px;}", ".fod1mrr{line-height:4px;}", ".fpd43o0{width:10px;}", ".f30q22z{height:10px;}", ".f1tccstq{font-size:6px;}", ".f1y3arg5{line-height:6px;}", ".fq2vo04{min-width:16px;}", ".fd461yt{height:16px;}", ".f1g0x7ka{padding-top:0;}", ".fps1v9c{padding-right:calc(var(--spacingHorizontalXXS) + var(--spacingHorizontalXXS));}", ".f17ae1jz{padding-left:calc(var(--spacingHorizontalXXS) + var(--spacingHorizontalXXS));}", ".f1qch9an{padding-bottom:0;}", ".fjamq6b{height:20px;}", ".f11u7vat{min-width:20px;}", ".f17a92cs{padding-right:calc(var(--spacingHorizontalXS) + var(--spacingHorizontalXXS));}", ".f1pe0i86{padding-left:calc(var(--spacingHorizontalXS) + var(--spacingHorizontalXXS));}", ".f17fgpbq{min-width:24px;}", ".frvgh55{height:24px;}", ".fwbmr0d{min-width:32px;}", ".f1d2rq10{height:32px;}", ".fqznh8f{padding-right:calc(var(--spacingHorizontalSNudge) + var(--spacingHorizontalXXS));}", ".f1xile11{padding-left:calc(var(--spacingHorizontalSNudge) + var(--spacingHorizontalXXS));}", ".fzi6hpg{border-bottom-right-radius:var(--borderRadiusNone);}", ".fyowgf4{border-bottom-left-radius:var(--borderRadiusNone);}", ".f3fg2lr{border-top-right-radius:var(--borderRadiusNone);}", ".f13av6d4{border-top-left-radius:var(--borderRadiusNone);}", ".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);}", ".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);}", ".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);}", ".f13zj6fq::after{content:\"\";}", ".f1mdlcz9::after{position:absolute;}", ".frwkxtg::after{top:0;}", ".f1n6gb5g::after{left:0;}", ".f15yvnhg::after{right:0;}", ".fo72kxq::after{bottom:0;}", ".f8rth92::after{border-top-style:solid;}", ".flthirb::after{border-right-style:solid;}", ".ftkbnf5::after{border-left-style:solid;}", ".f1lh990p::after{border-bottom-style:solid;}", ".f6czdpx::after{border-top-width:var(--strokeWidthThin);}", ".f13hvwk3::after{border-right-width:var(--strokeWidthThin);}", ".f1en4csx::after{border-left-width:var(--strokeWidthThin);}", ".f1i1u9k0::after{border-bottom-width:var(--strokeWidthThin);}", ".fhtl3ys::after{border-top-color:inherit;}", ".f140b627::after{border-right-color:inherit;}", ".f1wihoeh::after{border-left-color:inherit;}", ".fplas78::after{border-bottom-color:inherit;}", ".f1lf1ovl::after{border-bottom-right-radius:inherit;}", ".f1ydfmkj::after{border-bottom-left-radius:inherit;}", ".feq0ynf::after{border-top-right-radius:inherit;}", ".f1ss7ivt::after{border-top-left-radius:inherit;}", ".fghlq4f{border-top-color:var(--colorTransparentStroke);}", ".f1gn591s{border-right-color:var(--colorTransparentStroke);}", ".fjscplz{border-left-color:var(--colorTransparentStroke);}", ".fb073pr{border-bottom-color:var(--colorTransparentStroke);}", ".ffp7eso{background-color:var(--colorBrandBackground);}", ".f1phragk{color:var(--colorNeutralForegroundOnBrand);}", ".fdl5y0r{background-color:var(--colorPaletteRedBackground3);}", ".f1c73kur{background-color:var(--colorNeutralForeground1);}", ".fr0bkrk{color:var(--colorNeutralBackground1);}", ".f3vzo32{background-color:var(--colorNeutralBackground5);}", ".f11d4kpn{color:var(--colorNeutralForeground3);}", ".f1s438gw{background-color:var(--colorPaletteDarkOrangeBackground3);}", ".fxugw4r{background-color:var(--colorNeutralBackground1);}", ".f19n0e5{color:var(--colorNeutralForeground1);}", ".flxk52p{background-color:var(--colorPaletteGreenBackground3);}", ".ffq97bm{background-color:var(--colorPaletteYellowBackground3);}", ".ff5vbop{color:var(--colorNeutralForeground1Static);}", ".f16muhyy{color:var(--colorBrandForeground1);}", ".f1whyuy6{color:var(--colorPaletteRedForeground3);}", ".f1l8vj45{color:var(--colorPaletteDarkOrangeForeground3);}", ".fonrgv7{color:var(--colorNeutralForegroundStaticInverted);}", ".f1m7fhi8{color:var(--colorPaletteGreenForeground3);}", ".fpti2h4{color:var(--colorPaletteYellowForeground2);}", ".f23ftbb{border-top-color:currentColor;}", ".f1gkuv52{border-right-color:currentColor;}", ".f1p1bl80{border-left-color:currentColor;}", ".fioka3i{border-bottom-color:currentColor;}", ".fq0vr37{border-top-color:var(--colorNeutralStrokeAccessible);}", ".f1byw159{border-right-color:var(--colorNeutralStrokeAccessible);}", ".f11cr0be{border-left-color:var(--colorNeutralStrokeAccessible);}", ".f1c1zstj{border-bottom-color:var(--colorNeutralStrokeAccessible);}", ".f68mrw8{border-top-color:var(--colorNeutralStroke2);}", ".f7pw515{border-right-color:var(--colorNeutralStroke2);}", ".fw35ms5{border-left-color:var(--colorNeutralStroke2);}", ".frpde29{border-bottom-color:var(--colorNeutralStroke2);}", ".f1sms7z7{color:var(--colorPaletteGreenForeground2);}", ".f16xkysk{background-color:var(--colorBrandBackground2);}", ".faj9fo0{color:var(--colorBrandForeground2);}", ".f161y7kd{border-top-color:var(--colorBrandStroke2);}", ".f1c8dzaj{border-right-color:var(--colorBrandStroke2);}", ".f1sl6hi9{border-left-color:var(--colorBrandStroke2);}", ".f1619yhw{border-bottom-color:var(--colorBrandStroke2);}", ".ff0poqj{background-color:var(--colorPaletteRedBackground1);}", ".f1hcrxcs{color:var(--colorPaletteRedForeground1);}", ".f1oqjm8o{border-top-color:var(--colorPaletteRedBorder1);}", ".fkgrb8g{border-right-color:var(--colorPaletteRedBorder1);}", ".frb5wm0{border-left-color:var(--colorPaletteRedBorder1);}", ".f1iai1ph{border-bottom-color:var(--colorPaletteRedBorder1);}", ".f945g0u{background-color:var(--colorNeutralForeground3);}", ".f1ctqxl6{background-color:var(--colorNeutralBackground4);}", ".f1xzsg4{background-color:var(--colorPaletteDarkOrangeBackground1);}", ".f1k5f75o{color:var(--colorPaletteDarkOrangeForeground1);}", ".fxy9dsj{border-top-color:var(--colorPaletteDarkOrangeBorder1);}", ".f54u6j2{border-right-color:var(--colorPaletteDarkOrangeBorder1);}", ".fcm23ze{border-left-color:var(--colorPaletteDarkOrangeBorder1);}", ".f4vf0uq{border-bottom-color:var(--colorPaletteDarkOrangeBorder1);}", ".f2vsrz6{background-color:var(--colorPaletteGreenBackground1);}", ".ffmvakt{color:var(--colorPaletteGreenForeground1);}", ".fdmic9h{border-top-color:var(--colorPaletteGreenBorder1);}", ".f196y6m{border-right-color:var(--colorPaletteGreenBorder1);}", ".fetptd8{border-left-color:var(--colorPaletteGreenBorder1);}", ".f1pev5xq{border-bottom-color:var(--colorPaletteGreenBorder1);}", ".f10s6hli{background-color:var(--colorPaletteYellowBackground1);}", ".fn9i3n{border-top-color:var(--colorPaletteYellowBorder1);}", ".f1aw8cx4{border-right-color:var(--colorPaletteYellowBorder1);}", ".f51if14{border-left-color:var(--colorPaletteYellowBorder1);}", ".fvq8iai{border-bottom-color:var(--colorPaletteYellowBorder1);}"]
298
298
  });
299
299
 
300
300
  const useIconStyles = /*#__PURE__*/react_1.__styles({
package/lib-commonjs/components/Badge/useBadgeStyles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["components/Badge/useBadgeStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { shorthands, mergeClasses, makeStyles } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport type { BadgeSlots, BadgeState } from './Badge.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const badgeClassNames: SlotClassNames<BadgeSlots> = {\n root: 'fui-Badge',\n icon: 'fui-Badge__icon',\n};\n\n// The text content of the badge has additional horizontal padding, but there is no `text` slot to add that padding to.\n// Instead, add extra padding to the root, and a negative margin on the icon to \"remove\" the extra padding on the icon.\nconst textPadding = tokens.spacingHorizontalXXS;\n\nconst useRootStyles = makeStyles({\n base: {\n display: 'inline-flex',\n boxSizing: 'border-box',\n alignItems: 'center',\n justifyContent: 'center',\n position: 'relative',\n ...typographyStyles.caption1Strong,\n },\n\n fontSmallToTiny: {\n ...typographyStyles.caption2Strong,\n },\n\n // size\n\n tiny: {\n width: '6px',\n height: '6px',\n fontSize: '4px',\n lineHeight: '4px',\n },\n 'extra-small': {\n width: '10px',\n height: '10px',\n fontSize: '6px',\n lineHeight: '6px',\n },\n small: {\n minWidth: '16px',\n height: '16px',\n ...shorthands.padding(0, `calc(${tokens.spacingHorizontalXXS} + ${textPadding})`),\n },\n medium: {\n height: '20px',\n minWidth: '20px',\n ...shorthands.padding(0, `calc(${tokens.spacingHorizontalXS} + ${textPadding})`),\n },\n large: {\n minWidth: '24px',\n height: '24px',\n ...shorthands.padding(0, `calc(${tokens.spacingHorizontalXS} + ${textPadding})`),\n },\n 'extra-large': {\n minWidth: '32px',\n height: '32px',\n ...shorthands.padding(0, `calc(${tokens.spacingHorizontalSNudge} + ${textPadding})`),\n },\n\n // shape\n\n square: {\n ...shorthands.borderRadius(tokens.borderRadiusNone),\n },\n rounded: {\n ...shorthands.borderRadius(tokens.borderRadiusMedium),\n },\n roundedSmallToTiny: {\n ...shorthands.borderRadius(tokens.borderRadiusSmall),\n },\n circular: {\n ...shorthands.borderRadius(tokens.borderRadiusCircular),\n },\n\n // border (all appearances except ghost)\n\n border: {\n // The border is applied in an :after pseudo-element because it should not affect layout.\n // The padding and size of the badge should be the same regardless of whether or not it has a border.\n '::after': {\n content: '\"\"',\n position: 'absolute',\n top: 0,\n left: 0,\n bottom: 0,\n right: 0,\n ...shorthands.borderStyle('solid'),\n ...shorthands.borderWidth(tokens.strokeWidthThin),\n ...shorthands.borderColor('inherit'),\n ...shorthands.borderRadius('inherit'),\n },\n },\n\n // appearance: filled\n\n filled: {\n // Use a transparent stroke (rather than no border) so the border is visible in high contrast\n ...shorthands.borderColor(tokens.colorTransparentStroke),\n },\n 'filled-brand': {\n backgroundColor: tokens.colorBrandBackground,\n color: tokens.colorNeutralForegroundOnBrand,\n },\n 'filled-danger': {\n backgroundColor: tokens.colorPaletteRedBackground3,\n color: tokens.colorNeutralForegroundOnBrand,\n },\n 'filled-important': {\n backgroundColor: tokens.colorNeutralForeground1,\n color: tokens.colorNeutralBackground1,\n },\n 'filled-informative': {\n backgroundColor: tokens.colorNeutralBackground5,\n color: tokens.colorNeutralForeground3,\n },\n 'filled-severe': {\n backgroundColor: tokens.colorPaletteDarkOrangeBackground3,\n color: tokens.colorNeutralForegroundOnBrand,\n },\n 'filled-subtle': {\n backgroundColor: tokens.colorNeutralBackground1,\n color: tokens.colorNeutralForeground1,\n },\n 'filled-success': {\n backgroundColor: tokens.colorPaletteGreenBackground3,\n color: tokens.colorNeutralForegroundOnBrand,\n },\n 'filled-warning': {\n backgroundColor: tokens.colorPaletteYellowBackground3,\n color: tokens.colorNeutralForeground1Static,\n },\n\n // appearance: ghost\n\n ghost: {\n // No shared colors between ghost appearances\n },\n 'ghost-brand': {\n color: tokens.colorBrandForeground1,\n },\n 'ghost-danger': {\n color: tokens.colorPaletteRedForeground3,\n },\n 'ghost-important': {\n color: tokens.colorNeutralForeground1,\n },\n 'ghost-informative': {\n color: tokens.colorNeutralForeground3,\n },\n 'ghost-severe': {\n color: tokens.colorPaletteDarkOrangeForeground3,\n },\n 'ghost-subtle': {\n color: tokens.colorNeutralForegroundInverted,\n },\n 'ghost-success': {\n color: tokens.colorPaletteGreenForeground3,\n },\n 'ghost-warning': {\n color: tokens.colorPaletteYellowForeground2,\n },\n\n // appearance: outline\n\n outline: {\n ...shorthands.borderColor('currentColor'),\n },\n 'outline-brand': {\n color: tokens.colorBrandForeground1,\n },\n 'outline-danger': {\n color: tokens.colorPaletteRedForeground3,\n },\n 'outline-important': {\n color: tokens.colorNeutralForeground3,\n ...shorthands.borderColor(tokens.colorNeutralStrokeAccessible),\n },\n 'outline-informative': {\n color: tokens.colorNeutralForeground3,\n ...shorthands.borderColor(tokens.colorNeutralStroke2),\n },\n 'outline-severe': {\n color: tokens.colorPaletteDarkOrangeForeground3,\n },\n 'outline-subtle': {\n color: tokens.colorNeutralForegroundInverted,\n },\n 'outline-success': {\n color: tokens.colorPaletteGreenForeground2,\n },\n 'outline-warning': {\n color: tokens.colorPaletteYellowForeground2,\n },\n\n // appearance: tint\n\n tint: {\n // No shared colors between tint appearances\n },\n 'tint-brand': {\n backgroundColor: tokens.colorBrandBackground2,\n color: tokens.colorBrandForeground2,\n ...shorthands.borderColor(tokens.colorBrandStroke2),\n },\n 'tint-danger': {\n backgroundColor: tokens.colorPaletteRedBackground1,\n color: tokens.colorPaletteRedForeground1,\n ...shorthands.borderColor(tokens.colorPaletteRedBorder1),\n },\n 'tint-important': {\n backgroundColor: tokens.colorNeutralForeground3,\n color: tokens.colorNeutralBackground1,\n ...shorthands.borderColor(tokens.colorTransparentStroke),\n },\n 'tint-informative': {\n backgroundColor: tokens.colorNeutralBackground4,\n color: tokens.colorNeutralForeground3,\n ...shorthands.borderColor(tokens.colorNeutralStroke2),\n },\n 'tint-severe': {\n backgroundColor: tokens.colorPaletteDarkOrangeBackground1,\n color: tokens.colorPaletteDarkOrangeForeground1,\n ...shorthands.borderColor(tokens.colorPaletteDarkOrangeBorder1),\n },\n 'tint-subtle': {\n backgroundColor: tokens.colorNeutralBackground1,\n color: tokens.colorNeutralForeground3,\n ...shorthands.borderColor(tokens.colorNeutralStroke2),\n },\n 'tint-success': {\n backgroundColor: tokens.colorPaletteGreenBackground1,\n color: tokens.colorPaletteGreenForeground1,\n ...shorthands.borderColor(tokens.colorPaletteGreenBorder1),\n },\n 'tint-warning': {\n backgroundColor: tokens.colorPaletteYellowBackground1,\n color: tokens.colorPaletteYellowForeground2,\n ...shorthands.borderColor(tokens.colorPaletteYellowBorder1),\n },\n});\n\nconst useIconStyles = makeStyles({\n base: {\n display: 'flex',\n lineHeight: '1',\n ...shorthands.margin(0, `calc(-1 * ${textPadding})`), // Remove text padding added to root\n },\n\n beforeText: {\n marginRight: `calc(${tokens.spacingHorizontalXXS} + ${textPadding})`,\n },\n afterText: {\n marginLeft: `calc(${tokens.spacingHorizontalXXS} + ${textPadding})`,\n },\n\n beforeTextXL: {\n marginRight: `calc(${tokens.spacingHorizontalXS} + ${textPadding})`,\n },\n afterTextXL: {\n marginLeft: `calc(${tokens.spacingHorizontalXS} + ${textPadding})`,\n },\n\n // size\n\n tiny: {\n fontSize: '6px',\n },\n 'extra-small': {\n fontSize: '10px',\n },\n small: {\n fontSize: '12px',\n },\n medium: {\n fontSize: '12px',\n },\n large: {\n fontSize: '16px',\n },\n 'extra-large': {\n fontSize: '20px',\n },\n});\n\n/**\n * Applies style classnames to slots\n */\nexport const useBadgeStyles_unstable = (state: BadgeState): BadgeState => {\n const rootStyles = useRootStyles();\n\n const smallToTiny = state.size === 'small' || state.size === 'extra-small' || state.size === 'tiny';\n\n state.root.className = mergeClasses(\n badgeClassNames.root,\n rootStyles.base,\n smallToTiny && rootStyles.fontSmallToTiny,\n rootStyles[state.size],\n rootStyles[state.shape],\n state.shape === 'rounded' && smallToTiny && rootStyles.roundedSmallToTiny,\n state.appearance !== 'ghost' && rootStyles.border,\n rootStyles[state.appearance],\n rootStyles[`${state.appearance}-${state.color}` as const],\n state.root.className,\n );\n\n const iconStyles = useIconStyles();\n if (state.icon) {\n let iconPositionClass;\n if (state.root.children) {\n if (state.size === 'extra-large') {\n iconPositionClass = state.iconPosition === 'after' ? iconStyles.afterTextXL : iconStyles.beforeTextXL;\n } else {\n iconPositionClass = state.iconPosition === 'after' ? iconStyles.afterText : iconStyles.beforeText;\n }\n }\n\n state.icon.className = mergeClasses(\n badgeClassNames.icon,\n iconStyles.base,\n iconPositionClass,\n iconStyles[state.size],\n state.icon.className,\n );\n }\n\n return state;\n};\n"],"sourceRoot":"../src/"}
1
+ {"version":3,"sources":["components/Badge/useBadgeStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { shorthands, mergeClasses, makeStyles } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport type { BadgeSlots, BadgeState } from './Badge.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const badgeClassNames: SlotClassNames<BadgeSlots> = {\n root: 'fui-Badge',\n icon: 'fui-Badge__icon',\n};\n\n// The text content of the badge has additional horizontal padding, but there is no `text` slot to add that padding to.\n// Instead, add extra padding to the root, and a negative margin on the icon to \"remove\" the extra padding on the icon.\nconst textPadding = tokens.spacingHorizontalXXS;\n\nconst useRootStyles = makeStyles({\n base: {\n display: 'inline-flex',\n boxSizing: 'border-box',\n alignItems: 'center',\n justifyContent: 'center',\n position: 'relative',\n ...typographyStyles.caption1Strong,\n },\n\n fontSmallToTiny: {\n ...typographyStyles.caption2Strong,\n },\n\n // size\n\n tiny: {\n width: '6px',\n height: '6px',\n fontSize: '4px',\n lineHeight: '4px',\n },\n 'extra-small': {\n width: '10px',\n height: '10px',\n fontSize: '6px',\n lineHeight: '6px',\n },\n small: {\n minWidth: '16px',\n height: '16px',\n ...shorthands.padding(0, `calc(${tokens.spacingHorizontalXXS} + ${textPadding})`),\n },\n medium: {\n height: '20px',\n minWidth: '20px',\n ...shorthands.padding(0, `calc(${tokens.spacingHorizontalXS} + ${textPadding})`),\n },\n large: {\n minWidth: '24px',\n height: '24px',\n ...shorthands.padding(0, `calc(${tokens.spacingHorizontalXS} + ${textPadding})`),\n },\n 'extra-large': {\n minWidth: '32px',\n height: '32px',\n ...shorthands.padding(0, `calc(${tokens.spacingHorizontalSNudge} + ${textPadding})`),\n },\n\n // shape\n\n square: {\n ...shorthands.borderRadius(tokens.borderRadiusNone),\n },\n rounded: {\n ...shorthands.borderRadius(tokens.borderRadiusMedium),\n },\n roundedSmallToTiny: {\n ...shorthands.borderRadius(tokens.borderRadiusSmall),\n },\n circular: {\n ...shorthands.borderRadius(tokens.borderRadiusCircular),\n },\n\n // border (all appearances except ghost)\n\n border: {\n // The border is applied in an :after pseudo-element because it should not affect layout.\n // The padding and size of the badge should be the same regardless of whether or not it has a border.\n '::after': {\n content: '\"\"',\n position: 'absolute',\n top: 0,\n left: 0,\n bottom: 0,\n right: 0,\n ...shorthands.borderStyle('solid'),\n ...shorthands.borderWidth(tokens.strokeWidthThin),\n ...shorthands.borderColor('inherit'),\n ...shorthands.borderRadius('inherit'),\n },\n },\n\n // appearance: filled\n\n filled: {\n // Use a transparent stroke (rather than no border) so the border is visible in high contrast\n ...shorthands.borderColor(tokens.colorTransparentStroke),\n },\n 'filled-brand': {\n backgroundColor: tokens.colorBrandBackground,\n color: tokens.colorNeutralForegroundOnBrand,\n },\n 'filled-danger': {\n backgroundColor: tokens.colorPaletteRedBackground3,\n color: tokens.colorNeutralForegroundOnBrand,\n },\n 'filled-important': {\n backgroundColor: tokens.colorNeutralForeground1,\n color: tokens.colorNeutralBackground1,\n },\n 'filled-informative': {\n backgroundColor: tokens.colorNeutralBackground5,\n color: tokens.colorNeutralForeground3,\n },\n 'filled-severe': {\n backgroundColor: tokens.colorPaletteDarkOrangeBackground3,\n color: tokens.colorNeutralForegroundOnBrand,\n },\n 'filled-subtle': {\n backgroundColor: tokens.colorNeutralBackground1,\n color: tokens.colorNeutralForeground1,\n },\n 'filled-success': {\n backgroundColor: tokens.colorPaletteGreenBackground3,\n color: tokens.colorNeutralForegroundOnBrand,\n },\n 'filled-warning': {\n backgroundColor: tokens.colorPaletteYellowBackground3,\n color: tokens.colorNeutralForeground1Static,\n },\n\n // appearance: ghost\n\n ghost: {\n // No shared colors between ghost appearances\n },\n 'ghost-brand': {\n color: tokens.colorBrandForeground1,\n },\n 'ghost-danger': {\n color: tokens.colorPaletteRedForeground3,\n },\n 'ghost-important': {\n color: tokens.colorNeutralForeground1,\n },\n 'ghost-informative': {\n color: tokens.colorNeutralForeground3,\n },\n 'ghost-severe': {\n color: tokens.colorPaletteDarkOrangeForeground3,\n },\n 'ghost-subtle': {\n color: tokens.colorNeutralForegroundStaticInverted,\n },\n 'ghost-success': {\n color: tokens.colorPaletteGreenForeground3,\n },\n 'ghost-warning': {\n color: tokens.colorPaletteYellowForeground2,\n },\n\n // appearance: outline\n\n outline: {\n ...shorthands.borderColor('currentColor'),\n },\n 'outline-brand': {\n color: tokens.colorBrandForeground1,\n },\n 'outline-danger': {\n color: tokens.colorPaletteRedForeground3,\n },\n 'outline-important': {\n color: tokens.colorNeutralForeground3,\n ...shorthands.borderColor(tokens.colorNeutralStrokeAccessible),\n },\n 'outline-informative': {\n color: tokens.colorNeutralForeground3,\n ...shorthands.borderColor(tokens.colorNeutralStroke2),\n },\n 'outline-severe': {\n color: tokens.colorPaletteDarkOrangeForeground3,\n },\n 'outline-subtle': {\n color: tokens.colorNeutralForegroundStaticInverted,\n },\n 'outline-success': {\n color: tokens.colorPaletteGreenForeground2,\n },\n 'outline-warning': {\n color: tokens.colorPaletteYellowForeground2,\n },\n\n // appearance: tint\n\n tint: {\n // No shared colors between tint appearances\n },\n 'tint-brand': {\n backgroundColor: tokens.colorBrandBackground2,\n color: tokens.colorBrandForeground2,\n ...shorthands.borderColor(tokens.colorBrandStroke2),\n },\n 'tint-danger': {\n backgroundColor: tokens.colorPaletteRedBackground1,\n color: tokens.colorPaletteRedForeground1,\n ...shorthands.borderColor(tokens.colorPaletteRedBorder1),\n },\n 'tint-important': {\n backgroundColor: tokens.colorNeutralForeground3,\n color: tokens.colorNeutralBackground1,\n ...shorthands.borderColor(tokens.colorTransparentStroke),\n },\n 'tint-informative': {\n backgroundColor: tokens.colorNeutralBackground4,\n color: tokens.colorNeutralForeground3,\n ...shorthands.borderColor(tokens.colorNeutralStroke2),\n },\n 'tint-severe': {\n backgroundColor: tokens.colorPaletteDarkOrangeBackground1,\n color: tokens.colorPaletteDarkOrangeForeground1,\n ...shorthands.borderColor(tokens.colorPaletteDarkOrangeBorder1),\n },\n 'tint-subtle': {\n backgroundColor: tokens.colorNeutralBackground1,\n color: tokens.colorNeutralForeground3,\n ...shorthands.borderColor(tokens.colorNeutralStroke2),\n },\n 'tint-success': {\n backgroundColor: tokens.colorPaletteGreenBackground1,\n color: tokens.colorPaletteGreenForeground1,\n ...shorthands.borderColor(tokens.colorPaletteGreenBorder1),\n },\n 'tint-warning': {\n backgroundColor: tokens.colorPaletteYellowBackground1,\n color: tokens.colorPaletteYellowForeground2,\n ...shorthands.borderColor(tokens.colorPaletteYellowBorder1),\n },\n});\n\nconst useIconStyles = makeStyles({\n base: {\n display: 'flex',\n lineHeight: '1',\n ...shorthands.margin(0, `calc(-1 * ${textPadding})`), // Remove text padding added to root\n },\n\n beforeText: {\n marginRight: `calc(${tokens.spacingHorizontalXXS} + ${textPadding})`,\n },\n afterText: {\n marginLeft: `calc(${tokens.spacingHorizontalXXS} + ${textPadding})`,\n },\n\n beforeTextXL: {\n marginRight: `calc(${tokens.spacingHorizontalXS} + ${textPadding})`,\n },\n afterTextXL: {\n marginLeft: `calc(${tokens.spacingHorizontalXS} + ${textPadding})`,\n },\n\n // size\n\n tiny: {\n fontSize: '6px',\n },\n 'extra-small': {\n fontSize: '10px',\n },\n small: {\n fontSize: '12px',\n },\n medium: {\n fontSize: '12px',\n },\n large: {\n fontSize: '16px',\n },\n 'extra-large': {\n fontSize: '20px',\n },\n});\n\n/**\n * Applies style classnames to slots\n */\nexport const useBadgeStyles_unstable = (state: BadgeState): BadgeState => {\n const rootStyles = useRootStyles();\n\n const smallToTiny = state.size === 'small' || state.size === 'extra-small' || state.size === 'tiny';\n\n state.root.className = mergeClasses(\n badgeClassNames.root,\n rootStyles.base,\n smallToTiny && rootStyles.fontSmallToTiny,\n rootStyles[state.size],\n rootStyles[state.shape],\n state.shape === 'rounded' && smallToTiny && rootStyles.roundedSmallToTiny,\n state.appearance !== 'ghost' && rootStyles.border,\n rootStyles[state.appearance],\n rootStyles[`${state.appearance}-${state.color}` as const],\n state.root.className,\n );\n\n const iconStyles = useIconStyles();\n if (state.icon) {\n let iconPositionClass;\n if (state.root.children) {\n if (state.size === 'extra-large') {\n iconPositionClass = state.iconPosition === 'after' ? iconStyles.afterTextXL : iconStyles.beforeTextXL;\n } else {\n iconPositionClass = state.iconPosition === 'after' ? iconStyles.afterText : iconStyles.beforeText;\n }\n }\n\n state.icon.className = mergeClasses(\n badgeClassNames.icon,\n iconStyles.base,\n iconPositionClass,\n iconStyles[state.size],\n state.icon.className,\n );\n }\n\n return state;\n};\n"],"sourceRoot":"../src/"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@fluentui/react-badge",
3
- "version": "9.0.4",
3
+ "version": "9.0.6",
4
4
  "description": "React components for building web experiences",
5
5
  "main": "lib-commonjs/index.js",
6
6
  "module": "lib/index.js",
@@ -22,20 +22,20 @@
22
22
  "test": "jest --passWithNoTests",
23
23
  "docs": "api-extractor run --config=config/api-extractor.local.json --local",
24
24
  "build:local": "tsc -p ./tsconfig.lib.json --module esnext --emitDeclarationOnly && node ../../../scripts/typescript/normalize-import --output ./dist/types/packages/react-components/react-badge/src && yarn docs",
25
- "storybook": "node ../../../scripts/storybook/runner",
25
+ "storybook": "start-storybook",
26
26
  "type-check": "tsc -b tsconfig.json"
27
27
  },
28
28
  "devDependencies": {
29
29
  "@fluentui/eslint-plugin": "*",
30
30
  "@fluentui/react-conformance": "*",
31
- "@fluentui/react-conformance-griffel": "9.0.0-beta.12",
31
+ "@fluentui/react-conformance-griffel": "9.0.0-beta.14",
32
32
  "@fluentui/scripts": "^1.0.0"
33
33
  },
34
34
  "dependencies": {
35
35
  "@fluentui/react-icons": "^2.0.175",
36
- "@griffel/react": "^1.2.3",
37
- "@fluentui/react-theme": "^9.0.0",
38
- "@fluentui/react-utilities": "^9.0.2",
36
+ "@griffel/react": "^1.3.0",
37
+ "@fluentui/react-theme": "^9.1.0",
38
+ "@fluentui/react-utilities": "^9.1.0",
39
39
  "tslib": "^2.1.0"
40
40
  },
41
41
  "peerDependencies": {
package/dist/tsdoc-metadata.json DELETED
@@ -1,11 +0,0 @@
1
- // This file is read by tools that parse documentation comments conforming to the TSDoc standard.
2
- // It should be published with your NPM package. It should not be tracked by Git.
3
- {
4
- "tsdocVersion": "0.12",
5
- "toolPackages": [
6
- {
7
- "packageName": "@microsoft/api-extractor",
8
- "packageVersion": "7.18.1"
9
- }
10
- ]
11
- }