@fluentui/react-badge 0.0.0-nightly-20240819-2137.1 → 0.0.0-nightly-20240822-0407.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (10) hide show
  1. package/CHANGELOG.md +10 -10
  2. package/lib/components/Badge/useBadgeStyles.styles.js +56 -56
  3. package/lib/components/Badge/useBadgeStyles.styles.js.map +1 -1
  4. package/lib/components/PresenceBadge/usePresenceBadgeStyles.styles.js +12 -12
  5. package/lib/components/PresenceBadge/usePresenceBadgeStyles.styles.js.map +1 -1
  6. package/lib-commonjs/components/Badge/useBadgeStyles.styles.js +90 -107
  7. package/lib-commonjs/components/Badge/useBadgeStyles.styles.js.map +1 -1
  8. package/lib-commonjs/components/PresenceBadge/usePresenceBadgeStyles.styles.js +18 -22
  9. package/lib-commonjs/components/PresenceBadge/usePresenceBadgeStyles.styles.js.map +1 -1
  10. package/package.json +7 -7
package/CHANGELOG.md CHANGED
@@ -1,23 +1,23 @@
1
1
  # Change Log - @fluentui/react-badge
2
2
 
3
- This log was last generated on Mon, 19 Aug 2024 21:48:21 GMT and should not be manually modified.
3
+ This log was last generated on Thu, 22 Aug 2024 04:12:08 GMT and should not be manually modified.
4
4
 
5
5
  <!-- Start content -->
6
6
 
7
- ## [0.0.0-nightly-20240819-2137.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-badge_v0.0.0-nightly-20240819-2137.1)
7
+ ## [0.0.0-nightly-20240822-0407.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-badge_v0.0.0-nightly-20240822-0407.1)
8
8
 
9
- Mon, 19 Aug 2024 21:48:21 GMT
10
- [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-badge_v9.2.41..@fluentui/react-badge_v0.0.0-nightly-20240819-2137.1)
9
+ Thu, 22 Aug 2024 04:12:08 GMT
10
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-badge_v9.2.41..@fluentui/react-badge_v0.0.0-nightly-20240822-0407.1)
11
11
 
12
12
  ### Changes
13
13
 
14
14
  - Release nightly v9 ([commit](https://github.com/microsoft/fluentui/commit/not available) by fluentui-internal@service.microsoft.com)
15
- - Bump @fluentui/react-jsx-runtime to v0.0.0-nightly-20240819-2137.1 ([commit](https://github.com/microsoft/fluentui/commit/58023e0682dfefa133a691f330cc309911710cc7) by beachball)
16
- - Bump @fluentui/react-shared-contexts to v0.0.0-nightly-20240819-2137.1 ([commit](https://github.com/microsoft/fluentui/commit/58023e0682dfefa133a691f330cc309911710cc7) by beachball)
17
- - Bump @fluentui/react-theme to v0.0.0-nightly-20240819-2137.1 ([commit](https://github.com/microsoft/fluentui/commit/58023e0682dfefa133a691f330cc309911710cc7) by beachball)
18
- - Bump @fluentui/react-utilities to v0.0.0-nightly-20240819-2137.1 ([commit](https://github.com/microsoft/fluentui/commit/58023e0682dfefa133a691f330cc309911710cc7) by beachball)
19
- - Bump @fluentui/react-conformance to v0.0.0-nightly-20240819-2137.1 ([commit](https://github.com/microsoft/fluentui/commit/58023e0682dfefa133a691f330cc309911710cc7) by beachball)
20
- - Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20240819-2137.1 ([commit](https://github.com/microsoft/fluentui/commit/58023e0682dfefa133a691f330cc309911710cc7) by beachball)
15
+ - Bump @fluentui/react-jsx-runtime to v0.0.0-nightly-20240822-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/d7009747796a586507e4c4ebd32c74df222feac4) by beachball)
16
+ - Bump @fluentui/react-shared-contexts to v0.0.0-nightly-20240822-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/d7009747796a586507e4c4ebd32c74df222feac4) by beachball)
17
+ - Bump @fluentui/react-theme to v0.0.0-nightly-20240822-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/d7009747796a586507e4c4ebd32c74df222feac4) by beachball)
18
+ - Bump @fluentui/react-utilities to v0.0.0-nightly-20240822-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/d7009747796a586507e4c4ebd32c74df222feac4) by beachball)
19
+ - Bump @fluentui/react-conformance to v0.0.0-nightly-20240822-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/d7009747796a586507e4c4ebd32c74df222feac4) by beachball)
20
+ - Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20240822-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/d7009747796a586507e4c4ebd32c74df222feac4) by beachball)
21
21
 
22
22
  ## [9.2.41](https://github.com/microsoft/fluentui/tree/@fluentui/react-badge_v9.2.41)
23
23
 
package/lib/components/Badge/useBadgeStyles.styles.js CHANGED
@@ -7,7 +7,7 @@ export const badgeClassNames = {
7
7
  // The text content of the badge has additional horizontal padding, but there is no `text` slot to add that padding to.
8
8
  // Instead, add extra padding to the root, and a negative margin on the icon to "remove" the extra padding on the icon.
9
9
  const textPadding = tokens.spacingHorizontalXXS;
10
- const useRootClassName = /*#__PURE__*/__resetStyles("r1wz0xho", "r1waubuv", [".r1wz0xho{display:inline-flex;box-sizing:border-box;align-items:center;justify-content:center;position:relative;font-family:var(--fontFamilyBase);font-size:var(--fontSizeBase200);font-weight:var(--fontWeightSemibold);line-height:var(--lineHeightBase200);height:20px;width:20px;min-width:max-content;padding:0 calc(var(--spacingHorizontalXS) + var(--spacingHorizontalXXS));border-radius:var(--ctrl-token-Badge-341, var(--semantic-token-Badge-342, var(--borderRadiusCircular)));border-color:var(--ctrl-token-Badge-343, var(--semantic-token-Badge-344, var(--colorTransparentStroke)));}", ".r1wz0xho::after{content:\"\";position:absolute;top:0;left:0;bottom:0;right:0;border-style:solid;border-color:inherit;border-width:var(--ctrl-token-Badge-345, var(--semantic-token-Badge-346, var(--strokeWidthThin)));border-radius:inherit;}", ".r1waubuv{display:inline-flex;box-sizing:border-box;align-items:center;justify-content:center;position:relative;font-family:var(--fontFamilyBase);font-size:var(--fontSizeBase200);font-weight:var(--fontWeightSemibold);line-height:var(--lineHeightBase200);height:20px;width:20px;min-width:max-content;padding:0 calc(var(--spacingHorizontalXS) + var(--spacingHorizontalXXS));border-radius:var(--ctrl-token-Badge-341, var(--semantic-token-Badge-342, var(--borderRadiusCircular)));border-color:var(--ctrl-token-Badge-343, var(--semantic-token-Badge-344, var(--colorTransparentStroke)));}", ".r1waubuv::after{content:\"\";position:absolute;top:0;right:0;bottom:0;left:0;border-style:solid;border-color:inherit;border-width:var(--ctrl-token-Badge-345, var(--semantic-token-Badge-346, var(--strokeWidthThin)));border-radius:inherit;}"]);
10
+ const useRootClassName = /*#__PURE__*/__resetStyles("r1l7mb74", "rntuq2r", [".r1l7mb74{display:inline-flex;box-sizing:border-box;align-items:center;justify-content:center;position:relative;font-family:var(--fontFamilyBase);font-size:var(--fontSizeBase200);font-weight:var(--fontWeightSemibold);line-height:var(--lineHeightBase200);height:20px;width:20px;min-width:max-content;padding:0 calc(var(--spacingHorizontalXS) + var(--spacingHorizontalXXS));border-radius:var(--borderRadiusCircular);border-color:var(--colorTransparentStroke);}", ".r1l7mb74::after{content:\"\";position:absolute;top:0;left:0;bottom:0;right:0;border-style:solid;border-color:inherit;border-width:var(--strokeWidthThin);border-radius:inherit;}", ".rntuq2r{display:inline-flex;box-sizing:border-box;align-items:center;justify-content:center;position:relative;font-family:var(--fontFamilyBase);font-size:var(--fontSizeBase200);font-weight:var(--fontWeightSemibold);line-height:var(--lineHeightBase200);height:20px;width:20px;min-width:max-content;padding:0 calc(var(--spacingHorizontalXS) + var(--spacingHorizontalXXS));border-radius:var(--borderRadiusCircular);border-color:var(--colorTransparentStroke);}", ".rntuq2r::after{content:\"\";position:absolute;top:0;right:0;bottom:0;left:0;border-style:solid;border-color:inherit;border-width:var(--strokeWidthThin);border-radius:inherit;}"]);
11
11
  const useRootStyles = /*#__PURE__*/__styles({
12
12
  fontSmallToTiny: {
13
13
  Bahqtrf: "fk6fouc",
@@ -72,21 +72,21 @@ const useRootStyles = /*#__PURE__*/__styles({
72
72
  Bbmb7ep: 0,
73
73
  Btl43ni: 0,
74
74
  B7oj6ja: 0,
75
- Dimara: "f7abyiv"
75
+ Dimara: "f1fabniw"
76
76
  },
77
77
  rounded: {
78
78
  Beyfa6y: 0,
79
79
  Bbmb7ep: 0,
80
80
  Btl43ni: 0,
81
81
  B7oj6ja: 0,
82
- Dimara: "fou3nt3"
82
+ Dimara: "ft85np5"
83
83
  },
84
84
  roundedSmallToTiny: {
85
85
  Beyfa6y: 0,
86
86
  Bbmb7ep: 0,
87
87
  Btl43ni: 0,
88
88
  B7oj6ja: 0,
89
- Dimara: "fzlx6wr"
89
+ Dimara: "fq9zq91"
90
90
  },
91
91
  circular: {},
92
92
  borderGhost: {
@@ -94,61 +94,61 @@ const useRootStyles = /*#__PURE__*/__styles({
94
94
  },
95
95
  filled: {},
96
96
  "filled-brand": {
97
- De3pzq: "fdqjzqe",
98
- sj55zd: "fnyk02w"
97
+ De3pzq: "ffp7eso",
98
+ sj55zd: "f1phragk"
99
99
  },
100
100
  "filled-danger": {
101
- De3pzq: "flx86sn",
102
- sj55zd: "fgvu3al"
101
+ De3pzq: "fdl5y0r",
102
+ sj55zd: "f1phragk"
103
103
  },
104
104
  "filled-important": {
105
- De3pzq: "f15xs996",
106
- sj55zd: "f1vch7lf"
105
+ De3pzq: "f1c73kur",
106
+ sj55zd: "fr0bkrk"
107
107
  },
108
108
  "filled-informative": {
109
- De3pzq: "f3d2lzq",
110
- sj55zd: "fq41cgs"
109
+ De3pzq: "f3vzo32",
110
+ sj55zd: "f11d4kpn"
111
111
  },
112
112
  "filled-severe": {
113
- De3pzq: "f1k98sz0",
114
- sj55zd: "ftq7wa"
113
+ De3pzq: "f1s438gw",
114
+ sj55zd: "f1phragk"
115
115
  },
116
116
  "filled-subtle": {
117
- De3pzq: "fwbw61e",
118
- sj55zd: "ffv5pt6"
117
+ De3pzq: "fxugw4r",
118
+ sj55zd: "f19n0e5"
119
119
  },
120
120
  "filled-success": {
121
- De3pzq: "fqovzr4",
122
- sj55zd: "f1b7taaf"
121
+ De3pzq: "flxk52p",
122
+ sj55zd: "f1phragk"
123
123
  },
124
124
  "filled-warning": {
125
- De3pzq: "fkkae45",
126
- sj55zd: "fuk51dr"
125
+ De3pzq: "ffq97bm",
126
+ sj55zd: "ff5vbop"
127
127
  },
128
128
  ghost: {},
129
129
  "ghost-brand": {
130
- sj55zd: "fn0grvs"
130
+ sj55zd: "f16muhyy"
131
131
  },
132
132
  "ghost-danger": {
133
- sj55zd: "f1ymzm00"
133
+ sj55zd: "f1whyuy6"
134
134
  },
135
135
  "ghost-important": {
136
- sj55zd: "f1l7x15h"
136
+ sj55zd: "f19n0e5"
137
137
  },
138
138
  "ghost-informative": {
139
- sj55zd: "f1g3ccf2"
139
+ sj55zd: "f11d4kpn"
140
140
  },
141
141
  "ghost-severe": {
142
- sj55zd: "f1ry7oaq"
142
+ sj55zd: "f1l8vj45"
143
143
  },
144
144
  "ghost-subtle": {
145
- sj55zd: "f14dtlz5"
145
+ sj55zd: "fonrgv7"
146
146
  },
147
147
  "ghost-success": {
148
- sj55zd: "f1dl7s23"
148
+ sj55zd: "f1m7fhi8"
149
149
  },
150
150
  "ghost-warning": {
151
- sj55zd: "f139i9j4"
151
+ sj55zd: "fpti2h4"
152
152
  },
153
153
  outline: {
154
154
  g2u3we: "f23ftbb",
@@ -157,105 +157,105 @@ const useRootStyles = /*#__PURE__*/__styles({
157
157
  zhjwy3: ["f1p1bl80", "f1gkuv52"]
158
158
  },
159
159
  "outline-brand": {
160
- sj55zd: "f1u0h5xc"
160
+ sj55zd: "f16muhyy"
161
161
  },
162
162
  "outline-danger": {
163
- sj55zd: "fy5c1di",
163
+ sj55zd: "f1whyuy6",
164
164
  g2u3we: "fyqpifd",
165
165
  h3c5rm: ["f3ukxca", "f1k7dugc"],
166
166
  B9xav0g: "f1njxb2b",
167
167
  zhjwy3: ["f1k7dugc", "f3ukxca"]
168
168
  },
169
169
  "outline-important": {
170
- sj55zd: "f17om6wp",
170
+ sj55zd: "f11d4kpn",
171
171
  g2u3we: "fq0vr37",
172
172
  h3c5rm: ["f1byw159", "f11cr0be"],
173
173
  B9xav0g: "f1c1zstj",
174
174
  zhjwy3: ["f11cr0be", "f1byw159"]
175
175
  },
176
176
  "outline-informative": {
177
- sj55zd: "f1px5c6m",
177
+ sj55zd: "f11d4kpn",
178
178
  g2u3we: "f68mrw8",
179
179
  h3c5rm: ["f7pw515", "fw35ms5"],
180
180
  B9xav0g: "frpde29",
181
181
  zhjwy3: ["fw35ms5", "f7pw515"]
182
182
  },
183
183
  "outline-severe": {
184
- sj55zd: "f1eq2dgn"
184
+ sj55zd: "f1l8vj45"
185
185
  },
186
186
  "outline-subtle": {
187
- sj55zd: "f1r5gmdf"
187
+ sj55zd: "fonrgv7"
188
188
  },
189
189
  "outline-success": {
190
- sj55zd: "f14ta1hi",
190
+ sj55zd: "f1m7fhi8",
191
191
  g2u3we: "f1mmhl11",
192
192
  h3c5rm: ["f1tjpp2f", "f1ocn5n7"],
193
193
  B9xav0g: "f1gjv25d",
194
194
  zhjwy3: ["f1ocn5n7", "f1tjpp2f"]
195
195
  },
196
196
  "outline-warning": {
197
- sj55zd: "f175uq3x"
197
+ sj55zd: "fpti2h4"
198
198
  },
199
199
  tint: {},
200
200
  "tint-brand": {
201
- De3pzq: "f1eumk4b",
202
- sj55zd: "f1yfpvl9",
201
+ De3pzq: "f16xkysk",
202
+ sj55zd: "faj9fo0",
203
203
  g2u3we: "f161y7kd",
204
204
  h3c5rm: ["f1c8dzaj", "f1sl6hi9"],
205
205
  B9xav0g: "f1619yhw",
206
206
  zhjwy3: ["f1sl6hi9", "f1c8dzaj"]
207
207
  },
208
208
  "tint-danger": {
209
- De3pzq: "f1ieeejy",
210
- sj55zd: "fbaokgc",
209
+ De3pzq: "ff0poqj",
210
+ sj55zd: "f1hcrxcs",
211
211
  g2u3we: "f1oqjm8o",
212
212
  h3c5rm: ["fkgrb8g", "frb5wm0"],
213
213
  B9xav0g: "f1iai1ph",
214
214
  zhjwy3: ["frb5wm0", "fkgrb8g"]
215
215
  },
216
216
  "tint-important": {
217
- De3pzq: "f1qepuxg",
218
- sj55zd: "fwpt6fm",
217
+ De3pzq: "f945g0u",
218
+ sj55zd: "fr0bkrk",
219
219
  g2u3we: "fghlq4f",
220
220
  h3c5rm: ["f1gn591s", "fjscplz"],
221
221
  B9xav0g: "fb073pr",
222
222
  zhjwy3: ["fjscplz", "f1gn591s"]
223
223
  },
224
224
  "tint-informative": {
225
- De3pzq: "fxa5gpb",
226
- sj55zd: "f6s6cv4",
225
+ De3pzq: "f1ctqxl6",
226
+ sj55zd: "f11d4kpn",
227
227
  g2u3we: "f68mrw8",
228
228
  h3c5rm: ["f7pw515", "fw35ms5"],
229
229
  B9xav0g: "frpde29",
230
230
  zhjwy3: ["fw35ms5", "f7pw515"]
231
231
  },
232
232
  "tint-severe": {
233
- De3pzq: "frjxuu5",
234
- sj55zd: "fl6s856",
233
+ De3pzq: "f1xzsg4",
234
+ sj55zd: "f1k5f75o",
235
235
  g2u3we: "fxy9dsj",
236
236
  h3c5rm: ["f54u6j2", "fcm23ze"],
237
237
  B9xav0g: "f4vf0uq",
238
238
  zhjwy3: ["fcm23ze", "f54u6j2"]
239
239
  },
240
240
  "tint-subtle": {
241
- De3pzq: "foy4zr5",
242
- sj55zd: "f1g6xc6w",
241
+ De3pzq: "fxugw4r",
242
+ sj55zd: "f11d4kpn",
243
243
  g2u3we: "f68mrw8",
244
244
  h3c5rm: ["f7pw515", "fw35ms5"],
245
245
  B9xav0g: "frpde29",
246
246
  zhjwy3: ["fw35ms5", "f7pw515"]
247
247
  },
248
248
  "tint-success": {
249
- De3pzq: "fsq3r5k",
250
- sj55zd: "fc5dy85",
249
+ De3pzq: "f2vsrz6",
250
+ sj55zd: "ffmvakt",
251
251
  g2u3we: "fdmic9h",
252
252
  h3c5rm: ["f196y6m", "fetptd8"],
253
253
  B9xav0g: "f1pev5xq",
254
254
  zhjwy3: ["fetptd8", "f196y6m"]
255
255
  },
256
256
  "tint-warning": {
257
- De3pzq: "f1ijqsw1",
258
- sj55zd: "f1n1qx92",
257
+ De3pzq: "f10s6hli",
258
+ sj55zd: "f42v8de",
259
259
  g2u3we: "fn9i3n",
260
260
  h3c5rm: ["f1aw8cx4", "f51if14"],
261
261
  B9xav0g: "fvq8iai",
@@ -272,13 +272,13 @@ const useRootStyles = /*#__PURE__*/__styles({
272
272
  p: -1
273
273
  }], ".f1szoe96{width:32px;}", ".f1d2rq10{height:32px;}", [".fty64o7{padding:0 calc(var(--spacingHorizontalSNudge) + var(--spacingHorizontalXXS));}", {
274
274
  p: -1
275
- }], [".f7abyiv{border-radius:var(--ctrl-token-Badge-347, var(--semantic-token-Badge-348, var(--borderRadiusNone)));}", {
275
+ }], [".f1fabniw{border-radius:var(--borderRadiusNone);}", {
276
276
  p: -1
277
- }], [".fou3nt3{border-radius:var(--ctrl-token-Badge-349, var(--semantic-token-Badge-350, var(--borderRadiusMedium)));}", {
277
+ }], [".ft85np5{border-radius:var(--borderRadiusMedium);}", {
278
278
  p: -1
279
- }], [".fzlx6wr{border-radius:var(--ctrl-token-Badge-351, var(--semantic-token-Badge-352, var(--borderRadiusSmall)));}", {
279
+ }], [".fq9zq91{border-radius:var(--borderRadiusSmall);}", {
280
280
  p: -1
281
- }], ".f10ludwy::after{display:none;}", ".fdqjzqe{background-color:var(--ctrl-token-Badge-353, var(--semantic-token-Badge-354, var(--colorBrandBackground)));}", ".fnyk02w{color:var(--ctrl-token-Badge-355, var(--semantic-token-Badge-356, var(--colorNeutralForegroundOnBrand)));}", ".flx86sn{background-color:var(--ctrl-token-Badge-357, var(--semantic-token-Badge-358, var(--colorPaletteRedBackground3)));}", ".fgvu3al{color:var(--ctrl-token-Badge-359, var(--semantic-token-Badge-360, var(--colorNeutralForegroundOnBrand)));}", ".f15xs996{background-color:var(--ctrl-token-Badge-361, var(--semantic-token-Badge-362, var(--colorNeutralForeground1)));}", ".f1vch7lf{color:var(--ctrl-token-Badge-363, var(--semantic-token-Badge-364, var(--colorNeutralBackground1)));}", ".f3d2lzq{background-color:var(--ctrl-token-Badge-365, var(--semantic-token-Badge-366, var(--colorNeutralBackground5)));}", ".fq41cgs{color:var(--ctrl-token-Badge-367, var(--semantic-token-Badge-368, var(--colorNeutralForeground3)));}", ".f1k98sz0{background-color:var(--ctrl-token-Badge-369, var(--semantic-token-Badge-370, var(--colorPaletteDarkOrangeBackground3)));}", ".ftq7wa{color:var(--ctrl-token-Badge-371, var(--semantic-token-Badge-372, var(--colorNeutralForegroundOnBrand)));}", ".fwbw61e{background-color:var(--ctrl-token-Badge-373, var(--semantic-token-Badge-374, var(--colorNeutralBackground1)));}", ".ffv5pt6{color:var(--ctrl-token-Badge-375, var(--semantic-token-Badge-376, var(--colorNeutralForeground1)));}", ".fqovzr4{background-color:var(--ctrl-token-Badge-377, var(--semantic-token-Badge-378, var(--colorPaletteGreenBackground3)));}", ".f1b7taaf{color:var(--ctrl-token-Badge-379, var(--semantic-token-Badge-380, var(--colorNeutralForegroundOnBrand)));}", ".fkkae45{background-color:var(--ctrl-token-Badge-381, var(--semantic-token-Badge-382, var(--colorPaletteYellowBackground3)));}", ".fuk51dr{color:var(--ctrl-token-Badge-383, var(--semantic-token-Badge-384, var(--colorNeutralForeground1Static)));}", ".fn0grvs{color:var(--ctrl-token-Badge-385, var(--semantic-token-Badge-386, var(--colorBrandForeground1)));}", ".f1ymzm00{color:var(--ctrl-token-Badge-387, var(--semantic-token-Badge-388, var(--colorPaletteRedForeground3)));}", ".f1l7x15h{color:var(--ctrl-token-Badge-389, var(--semantic-token-Badge-390, var(--colorNeutralForeground1)));}", ".f1g3ccf2{color:var(--ctrl-token-Badge-391, var(--semantic-token-Badge-392, var(--colorNeutralForeground3)));}", ".f1ry7oaq{color:var(--ctrl-token-Badge-393, var(--semantic-token-Badge-394, var(--colorPaletteDarkOrangeForeground3)));}", ".f14dtlz5{color:var(--ctrl-token-Badge-395, var(--semantic-token-Badge-396, var(--colorNeutralForegroundStaticInverted)));}", ".f1dl7s23{color:var(--ctrl-token-Badge-397, var(--semantic-token-Badge-398, var(--colorPaletteGreenForeground3)));}", ".f139i9j4{color:var(--ctrl-token-Badge-399, var(--semantic-token-Badge-400, var(--colorPaletteYellowForeground2)));}", ".f23ftbb{border-top-color:currentColor;}", ".f1gkuv52{border-right-color:currentColor;}", ".f1p1bl80{border-left-color:currentColor;}", ".fioka3i{border-bottom-color:currentColor;}", ".f1u0h5xc{color:var(--ctrl-token-Badge-401, var(--semantic-token-Badge-402, var(--colorBrandForeground1)));}", ".fy5c1di{color:var(--ctrl-token-Badge-403, var(--semantic-token-Badge-404, var(--colorPaletteRedForeground3)));}", ".fyqpifd{border-top-color:var(--colorPaletteRedBorder2);}", ".f3ukxca{border-right-color:var(--colorPaletteRedBorder2);}", ".f1k7dugc{border-left-color:var(--colorPaletteRedBorder2);}", ".f1njxb2b{border-bottom-color:var(--colorPaletteRedBorder2);}", ".f17om6wp{color:var(--ctrl-token-Badge-405, var(--semantic-token-Badge-406, var(--colorNeutralForeground3)));}", ".fq0vr37{border-top-color:var(--colorNeutralStrokeAccessible);}", ".f1byw159{border-right-color:var(--colorNeutralStrokeAccessible);}", ".f11cr0be{border-left-color:var(--colorNeutralStrokeAccessible);}", ".f1c1zstj{border-bottom-color:var(--colorNeutralStrokeAccessible);}", ".f1px5c6m{color:var(--ctrl-token-Badge-407, var(--semantic-token-Badge-408, var(--colorNeutralForeground3)));}", ".f68mrw8{border-top-color:var(--colorNeutralStroke2);}", ".f7pw515{border-right-color:var(--colorNeutralStroke2);}", ".fw35ms5{border-left-color:var(--colorNeutralStroke2);}", ".frpde29{border-bottom-color:var(--colorNeutralStroke2);}", ".f1eq2dgn{color:var(--ctrl-token-Badge-409, var(--semantic-token-Badge-410, var(--colorPaletteDarkOrangeForeground3)));}", ".f1r5gmdf{color:var(--ctrl-token-Badge-411, var(--semantic-token-Badge-412, var(--colorNeutralForegroundStaticInverted)));}", ".f14ta1hi{color:var(--ctrl-token-Badge-413, var(--semantic-token-Badge-414, var(--colorPaletteGreenForeground3)));}", ".f1mmhl11{border-top-color:var(--colorPaletteGreenBorder2);}", ".f1tjpp2f{border-right-color:var(--colorPaletteGreenBorder2);}", ".f1ocn5n7{border-left-color:var(--colorPaletteGreenBorder2);}", ".f1gjv25d{border-bottom-color:var(--colorPaletteGreenBorder2);}", ".f175uq3x{color:var(--ctrl-token-Badge-415, var(--semantic-token-Badge-416, var(--colorPaletteYellowForeground2)));}", ".f1eumk4b{background-color:var(--ctrl-token-Badge-417, var(--semantic-token-Badge-418, var(--colorBrandBackground2)));}", ".f1yfpvl9{color:var(--ctrl-token-Badge-419, var(--semantic-token-Badge-420, 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);}", ".f1ieeejy{background-color:var(--ctrl-token-Badge-421, var(--semantic-token-Badge-422, var(--colorPaletteRedBackground1)));}", ".fbaokgc{color:var(--ctrl-token-Badge-423, var(--semantic-token-Badge-424, 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);}", ".f1qepuxg{background-color:var(--ctrl-token-Badge-425, var(--semantic-token-Badge-426, var(--colorNeutralForeground3)));}", ".fwpt6fm{color:var(--ctrl-token-Badge-427, var(--semantic-token-Badge-428, var(--colorNeutralBackground1)));}", ".fghlq4f{border-top-color:var(--colorTransparentStroke);}", ".f1gn591s{border-right-color:var(--colorTransparentStroke);}", ".fjscplz{border-left-color:var(--colorTransparentStroke);}", ".fb073pr{border-bottom-color:var(--colorTransparentStroke);}", ".fxa5gpb{background-color:var(--ctrl-token-Badge-429, var(--semantic-token-Badge-430, var(--colorNeutralBackground4)));}", ".f6s6cv4{color:var(--ctrl-token-Badge-431, var(--semantic-token-Badge-432, var(--colorNeutralForeground3)));}", ".frjxuu5{background-color:var(--ctrl-token-Badge-433, var(--semantic-token-Badge-434, var(--colorPaletteDarkOrangeBackground1)));}", ".fl6s856{color:var(--ctrl-token-Badge-435, var(--semantic-token-Badge-436, 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);}", ".foy4zr5{background-color:var(--ctrl-token-Badge-437, var(--semantic-token-Badge-438, var(--colorNeutralBackground1)));}", ".f1g6xc6w{color:var(--ctrl-token-Badge-439, var(--semantic-token-Badge-440, var(--colorNeutralForeground3)));}", ".fsq3r5k{background-color:var(--ctrl-token-Badge-441, var(--semantic-token-Badge-442, var(--colorPaletteGreenBackground1)));}", ".fc5dy85{color:var(--ctrl-token-Badge-443, var(--semantic-token-Badge-444, 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);}", ".f1ijqsw1{background-color:var(--ctrl-token-Badge-445, var(--semantic-token-Badge-446, var(--colorPaletteYellowBackground1)));}", ".f1n1qx92{color:var(--ctrl-token-Badge-447, var(--semantic-token-Badge-448, var(--colorPaletteYellowForeground1)));}", ".fn9i3n{border-top-color:var(--colorPaletteYellowBorder1);}", ".f1aw8cx4{border-right-color:var(--colorPaletteYellowBorder1);}", ".f51if14{border-left-color:var(--colorPaletteYellowBorder1);}", ".fvq8iai{border-bottom-color:var(--colorPaletteYellowBorder1);}"]
281
+ }], ".f10ludwy::after{display:none;}", ".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;}", ".fyqpifd{border-top-color:var(--colorPaletteRedBorder2);}", ".f3ukxca{border-right-color:var(--colorPaletteRedBorder2);}", ".f1k7dugc{border-left-color:var(--colorPaletteRedBorder2);}", ".f1njxb2b{border-bottom-color:var(--colorPaletteRedBorder2);}", ".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);}", ".f1mmhl11{border-top-color:var(--colorPaletteGreenBorder2);}", ".f1tjpp2f{border-right-color:var(--colorPaletteGreenBorder2);}", ".f1ocn5n7{border-left-color:var(--colorPaletteGreenBorder2);}", ".f1gjv25d{border-bottom-color:var(--colorPaletteGreenBorder2);}", ".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);}", ".fghlq4f{border-top-color:var(--colorTransparentStroke);}", ".f1gn591s{border-right-color:var(--colorTransparentStroke);}", ".fjscplz{border-left-color:var(--colorTransparentStroke);}", ".fb073pr{border-bottom-color:var(--colorTransparentStroke);}", ".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);}", ".f42v8de{color:var(--colorPaletteYellowForeground1);}", ".fn9i3n{border-top-color:var(--colorPaletteYellowBorder1);}", ".f1aw8cx4{border-right-color:var(--colorPaletteYellowBorder1);}", ".f51if14{border-left-color:var(--colorPaletteYellowBorder1);}", ".fvq8iai{border-bottom-color:var(--colorPaletteYellowBorder1);}"]
282
282
  });
283
283
  const useIconRootClassName = /*#__PURE__*/__resetStyles("rttl5z0", null, [".rttl5z0{display:flex;line-height:1;margin:0 calc(-1 * var(--spacingHorizontalXXS));font-size:12px;}"]);
284
284
  const useIconStyles = /*#__PURE__*/__styles({
package/lib/components/Badge/useBadgeStyles.styles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"names":["shorthands","__resetStyles","__styles","mergeClasses","tokens","typographyStyles","badgeClassNames","root","icon","textPadding","spacingHorizontalXXS","useRootClassName","useRootStyles","fontSmallToTiny","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","tiny","a9b677","Bqenvij","Bf4jedk","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","small","medium","large","square","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","rounded","roundedSmallToTiny","circular","borderGhost","ap17g6","filled","De3pzq","sj55zd","ghost","outline","g2u3we","h3c5rm","B9xav0g","zhjwy3","tint","d","p","useIconRootClassName","useIconStyles","beforeText","t21cq0","afterText","Frg6f3","beforeTextXL","afterTextXL","useBadgeStyles_unstable","state","rootClassName","rootStyles","smallToTiny","size","className","shape","appearance","color","iconRootClassName","iconStyles","iconPositionClass","children","iconPosition"],"sources":["useBadgeStyles.styles.js"],"sourcesContent":["import { shorthands, makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nexport const badgeClassNames = {\n root: 'fui-Badge',\n icon: 'fui-Badge__icon'\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;\nconst useRootClassName = makeResetStyles({\n display: 'inline-flex',\n boxSizing: 'border-box',\n alignItems: 'center',\n justifyContent: 'center',\n position: 'relative',\n ...typographyStyles.caption1Strong,\n height: '20px',\n width: '20px',\n minWidth: 'max-content',\n padding: `0 calc(${tokens.spacingHorizontalXS} + ${textPadding})`,\n borderRadius: `var(--ctrl-token-Badge-341, var(--semantic-token-Badge-342, ${tokens.borderRadiusCircular}))`,\n // Use a transparent stroke (rather than no border) so the border is visible in high contrast\n borderColor: `var(--ctrl-token-Badge-343, var(--semantic-token-Badge-344, ${tokens.colorTransparentStroke}))`,\n '::after': {\n content: '\"\"',\n position: 'absolute',\n top: 0,\n left: 0,\n bottom: 0,\n right: 0,\n borderStyle: 'solid',\n borderColor: 'inherit',\n borderWidth: `var(--ctrl-token-Badge-345, var(--semantic-token-Badge-346, ${tokens.strokeWidthThin}))`,\n borderRadius: 'inherit'\n }\n});\nconst useRootStyles = makeStyles({\n fontSmallToTiny: {\n ...typographyStyles.caption2Strong\n },\n // size\n tiny: {\n width: '6px',\n height: '6px',\n fontSize: '4px',\n lineHeight: '4px',\n minWidth: 'unset',\n padding: 'unset'\n },\n 'extra-small': {\n width: '10px',\n height: '10px',\n fontSize: '6px',\n lineHeight: '6px',\n minWidth: 'unset',\n padding: 'unset'\n },\n small: {\n width: '16px',\n height: '16px',\n padding: `0 calc(${tokens.spacingHorizontalXXS} + ${textPadding})`\n },\n medium: {\n },\n large: {\n width: '24px',\n height: '24px',\n padding: `0 calc(${tokens.spacingHorizontalXS} + ${textPadding})`\n },\n 'extra-large': {\n width: '32px',\n height: '32px',\n padding: `0 calc(${tokens.spacingHorizontalSNudge} + ${textPadding})`\n },\n // shape\n square: {\n borderRadius: `var(--ctrl-token-Badge-347, var(--semantic-token-Badge-348, ${tokens.borderRadiusNone}))`\n },\n rounded: {\n borderRadius: `var(--ctrl-token-Badge-349, var(--semantic-token-Badge-350, ${tokens.borderRadiusMedium}))`\n },\n roundedSmallToTiny: {\n borderRadius: `var(--ctrl-token-Badge-351, var(--semantic-token-Badge-352, ${tokens.borderRadiusSmall}))`\n },\n circular: {\n },\n // hide the boder when appearance is \"ghost\"\n borderGhost: {\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 display: 'none'\n }\n },\n // appearance: filled\n filled: {\n },\n 'filled-brand': {\n backgroundColor: `var(--ctrl-token-Badge-353, var(--semantic-token-Badge-354, ${tokens.colorBrandBackground}))`,\n color: `var(--ctrl-token-Badge-355, var(--semantic-token-Badge-356, ${tokens.colorNeutralForegroundOnBrand}))`\n },\n 'filled-danger': {\n backgroundColor: `var(--ctrl-token-Badge-357, var(--semantic-token-Badge-358, ${tokens.colorPaletteRedBackground3}))`,\n color: `var(--ctrl-token-Badge-359, var(--semantic-token-Badge-360, ${tokens.colorNeutralForegroundOnBrand}))`\n },\n 'filled-important': {\n backgroundColor: `var(--ctrl-token-Badge-361, var(--semantic-token-Badge-362, ${tokens.colorNeutralForeground1}))`,\n color: `var(--ctrl-token-Badge-363, var(--semantic-token-Badge-364, ${tokens.colorNeutralBackground1}))`\n },\n 'filled-informative': {\n backgroundColor: `var(--ctrl-token-Badge-365, var(--semantic-token-Badge-366, ${tokens.colorNeutralBackground5}))`,\n color: `var(--ctrl-token-Badge-367, var(--semantic-token-Badge-368, ${tokens.colorNeutralForeground3}))`\n },\n 'filled-severe': {\n backgroundColor: `var(--ctrl-token-Badge-369, var(--semantic-token-Badge-370, ${tokens.colorPaletteDarkOrangeBackground3}))`,\n color: `var(--ctrl-token-Badge-371, var(--semantic-token-Badge-372, ${tokens.colorNeutralForegroundOnBrand}))`\n },\n 'filled-subtle': {\n backgroundColor: `var(--ctrl-token-Badge-373, var(--semantic-token-Badge-374, ${tokens.colorNeutralBackground1}))`,\n color: `var(--ctrl-token-Badge-375, var(--semantic-token-Badge-376, ${tokens.colorNeutralForeground1}))`\n },\n 'filled-success': {\n backgroundColor: `var(--ctrl-token-Badge-377, var(--semantic-token-Badge-378, ${tokens.colorPaletteGreenBackground3}))`,\n color: `var(--ctrl-token-Badge-379, var(--semantic-token-Badge-380, ${tokens.colorNeutralForegroundOnBrand}))`\n },\n 'filled-warning': {\n backgroundColor: `var(--ctrl-token-Badge-381, var(--semantic-token-Badge-382, ${tokens.colorPaletteYellowBackground3}))`,\n color: `var(--ctrl-token-Badge-383, var(--semantic-token-Badge-384, ${tokens.colorNeutralForeground1Static}))`\n },\n // appearance: ghost\n ghost: {\n },\n 'ghost-brand': {\n color: `var(--ctrl-token-Badge-385, var(--semantic-token-Badge-386, ${tokens.colorBrandForeground1}))`\n },\n 'ghost-danger': {\n color: `var(--ctrl-token-Badge-387, var(--semantic-token-Badge-388, ${tokens.colorPaletteRedForeground3}))`\n },\n 'ghost-important': {\n color: `var(--ctrl-token-Badge-389, var(--semantic-token-Badge-390, ${tokens.colorNeutralForeground1}))`\n },\n 'ghost-informative': {\n color: `var(--ctrl-token-Badge-391, var(--semantic-token-Badge-392, ${tokens.colorNeutralForeground3}))`\n },\n 'ghost-severe': {\n color: `var(--ctrl-token-Badge-393, var(--semantic-token-Badge-394, ${tokens.colorPaletteDarkOrangeForeground3}))`\n },\n 'ghost-subtle': {\n color: `var(--ctrl-token-Badge-395, var(--semantic-token-Badge-396, ${tokens.colorNeutralForegroundStaticInverted}))`\n },\n 'ghost-success': {\n color: `var(--ctrl-token-Badge-397, var(--semantic-token-Badge-398, ${tokens.colorPaletteGreenForeground3}))`\n },\n 'ghost-warning': {\n color: `var(--ctrl-token-Badge-399, var(--semantic-token-Badge-400, ${tokens.colorPaletteYellowForeground2}))`\n },\n // appearance: outline\n outline: {\n ...shorthands.borderColor('currentColor')\n },\n 'outline-brand': {\n color: `var(--ctrl-token-Badge-401, var(--semantic-token-Badge-402, ${tokens.colorBrandForeground1}))`\n },\n 'outline-danger': {\n color: `var(--ctrl-token-Badge-403, var(--semantic-token-Badge-404, ${tokens.colorPaletteRedForeground3}))`,\n ...shorthands.borderColor(tokens.colorPaletteRedBorder2)\n },\n 'outline-important': {\n color: `var(--ctrl-token-Badge-405, var(--semantic-token-Badge-406, ${tokens.colorNeutralForeground3}))`,\n ...shorthands.borderColor(tokens.colorNeutralStrokeAccessible)\n },\n 'outline-informative': {\n color: `var(--ctrl-token-Badge-407, var(--semantic-token-Badge-408, ${tokens.colorNeutralForeground3}))`,\n ...shorthands.borderColor(tokens.colorNeutralStroke2)\n },\n 'outline-severe': {\n color: `var(--ctrl-token-Badge-409, var(--semantic-token-Badge-410, ${tokens.colorPaletteDarkOrangeForeground3}))`\n },\n 'outline-subtle': {\n color: `var(--ctrl-token-Badge-411, var(--semantic-token-Badge-412, ${tokens.colorNeutralForegroundStaticInverted}))`\n },\n 'outline-success': {\n color: `var(--ctrl-token-Badge-413, var(--semantic-token-Badge-414, ${tokens.colorPaletteGreenForeground3}))`,\n ...shorthands.borderColor(tokens.colorPaletteGreenBorder2)\n },\n 'outline-warning': {\n color: `var(--ctrl-token-Badge-415, var(--semantic-token-Badge-416, ${tokens.colorPaletteYellowForeground2}))`\n },\n // appearance: tint\n tint: {\n },\n 'tint-brand': {\n backgroundColor: `var(--ctrl-token-Badge-417, var(--semantic-token-Badge-418, ${tokens.colorBrandBackground2}))`,\n color: `var(--ctrl-token-Badge-419, var(--semantic-token-Badge-420, ${tokens.colorBrandForeground2}))`,\n ...shorthands.borderColor(tokens.colorBrandStroke2)\n },\n 'tint-danger': {\n backgroundColor: `var(--ctrl-token-Badge-421, var(--semantic-token-Badge-422, ${tokens.colorPaletteRedBackground1}))`,\n color: `var(--ctrl-token-Badge-423, var(--semantic-token-Badge-424, ${tokens.colorPaletteRedForeground1}))`,\n ...shorthands.borderColor(tokens.colorPaletteRedBorder1)\n },\n 'tint-important': {\n backgroundColor: `var(--ctrl-token-Badge-425, var(--semantic-token-Badge-426, ${tokens.colorNeutralForeground3}))`,\n color: `var(--ctrl-token-Badge-427, var(--semantic-token-Badge-428, ${tokens.colorNeutralBackground1}))`,\n ...shorthands.borderColor(tokens.colorTransparentStroke)\n },\n 'tint-informative': {\n backgroundColor: `var(--ctrl-token-Badge-429, var(--semantic-token-Badge-430, ${tokens.colorNeutralBackground4}))`,\n color: `var(--ctrl-token-Badge-431, var(--semantic-token-Badge-432, ${tokens.colorNeutralForeground3}))`,\n ...shorthands.borderColor(tokens.colorNeutralStroke2)\n },\n 'tint-severe': {\n backgroundColor: `var(--ctrl-token-Badge-433, var(--semantic-token-Badge-434, ${tokens.colorPaletteDarkOrangeBackground1}))`,\n color: `var(--ctrl-token-Badge-435, var(--semantic-token-Badge-436, ${tokens.colorPaletteDarkOrangeForeground1}))`,\n ...shorthands.borderColor(tokens.colorPaletteDarkOrangeBorder1)\n },\n 'tint-subtle': {\n backgroundColor: `var(--ctrl-token-Badge-437, var(--semantic-token-Badge-438, ${tokens.colorNeutralBackground1}))`,\n color: `var(--ctrl-token-Badge-439, var(--semantic-token-Badge-440, ${tokens.colorNeutralForeground3}))`,\n ...shorthands.borderColor(tokens.colorNeutralStroke2)\n },\n 'tint-success': {\n backgroundColor: `var(--ctrl-token-Badge-441, var(--semantic-token-Badge-442, ${tokens.colorPaletteGreenBackground1}))`,\n color: `var(--ctrl-token-Badge-443, var(--semantic-token-Badge-444, ${tokens.colorPaletteGreenForeground1}))`,\n ...shorthands.borderColor(tokens.colorPaletteGreenBorder1)\n },\n 'tint-warning': {\n backgroundColor: `var(--ctrl-token-Badge-445, var(--semantic-token-Badge-446, ${tokens.colorPaletteYellowBackground1}))`,\n color: `var(--ctrl-token-Badge-447, var(--semantic-token-Badge-448, ${tokens.colorPaletteYellowForeground1}))`,\n ...shorthands.borderColor(tokens.colorPaletteYellowBorder1)\n }\n});\nconst useIconRootClassName = makeResetStyles({\n display: 'flex',\n lineHeight: '1',\n margin: `0 calc(-1 * ${textPadding})`,\n fontSize: '12px'\n});\nconst useIconStyles = makeStyles({\n beforeText: {\n marginRight: `calc(${tokens.spacingHorizontalXXS} + ${textPadding})`\n },\n afterText: {\n marginLeft: `calc(${tokens.spacingHorizontalXXS} + ${textPadding})`\n },\n beforeTextXL: {\n marginRight: `calc(${tokens.spacingHorizontalXS} + ${textPadding})`\n },\n afterTextXL: {\n marginLeft: `calc(${tokens.spacingHorizontalXS} + ${textPadding})`\n },\n // size\n tiny: {\n fontSize: '6px'\n },\n 'extra-small': {\n fontSize: '10px'\n },\n small: {\n fontSize: '12px'\n },\n medium: {\n },\n large: {\n fontSize: '16px'\n },\n 'extra-large': {\n fontSize: '20px'\n }\n});\n/**\n * Applies style classnames to slots\n */ export const useBadgeStyles_unstable = (state)=>{\n 'use no memo';\n const rootClassName = useRootClassName();\n const rootStyles = useRootStyles();\n const smallToTiny = state.size === 'small' || state.size === 'extra-small' || state.size === 'tiny';\n state.root.className = mergeClasses(badgeClassNames.root, rootClassName, smallToTiny && rootStyles.fontSmallToTiny, rootStyles[state.size], rootStyles[state.shape], state.shape === 'rounded' && smallToTiny && rootStyles.roundedSmallToTiny, state.appearance === 'ghost' && rootStyles.borderGhost, rootStyles[state.appearance], rootStyles[`${state.appearance}-${state.color}`], state.root.className);\n const iconRootClassName = useIconRootClassName();\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 state.icon.className = mergeClasses(badgeClassNames.icon, iconRootClassName, iconPositionClass, iconStyles[state.size], state.icon.className);\n }\n return state;\n};\n"],"mappings":"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","ignoreList":[]}
1
+ {"version":3,"names":["shorthands","__resetStyles","__styles","mergeClasses","tokens","typographyStyles","badgeClassNames","root","icon","textPadding","spacingHorizontalXXS","useRootClassName","useRootStyles","fontSmallToTiny","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","tiny","a9b677","Bqenvij","Bf4jedk","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","small","medium","large","square","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","rounded","roundedSmallToTiny","circular","borderGhost","ap17g6","filled","De3pzq","sj55zd","ghost","outline","g2u3we","h3c5rm","B9xav0g","zhjwy3","tint","d","p","useIconRootClassName","useIconStyles","beforeText","t21cq0","afterText","Frg6f3","beforeTextXL","afterTextXL","useBadgeStyles_unstable","state","rootClassName","rootStyles","smallToTiny","size","className","shape","appearance","color","iconRootClassName","iconStyles","iconPositionClass","children","iconPosition"],"sources":["useBadgeStyles.styles.js"],"sourcesContent":["import { shorthands, makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nexport const badgeClassNames = {\n root: 'fui-Badge',\n icon: 'fui-Badge__icon'\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;\nconst useRootClassName = makeResetStyles({\n display: 'inline-flex',\n boxSizing: 'border-box',\n alignItems: 'center',\n justifyContent: 'center',\n position: 'relative',\n ...typographyStyles.caption1Strong,\n height: '20px',\n width: '20px',\n minWidth: 'max-content',\n padding: `0 calc(${tokens.spacingHorizontalXS} + ${textPadding})`,\n borderRadius: tokens.borderRadiusCircular,\n // Use a transparent stroke (rather than no border) so the border is visible in high contrast\n borderColor: tokens.colorTransparentStroke,\n '::after': {\n content: '\"\"',\n position: 'absolute',\n top: 0,\n left: 0,\n bottom: 0,\n right: 0,\n borderStyle: 'solid',\n borderColor: 'inherit',\n borderWidth: tokens.strokeWidthThin,\n borderRadius: 'inherit'\n }\n});\nconst useRootStyles = makeStyles({\n fontSmallToTiny: {\n ...typographyStyles.caption2Strong\n },\n // size\n tiny: {\n width: '6px',\n height: '6px',\n fontSize: '4px',\n lineHeight: '4px',\n minWidth: 'unset',\n padding: 'unset'\n },\n 'extra-small': {\n width: '10px',\n height: '10px',\n fontSize: '6px',\n lineHeight: '6px',\n minWidth: 'unset',\n padding: 'unset'\n },\n small: {\n width: '16px',\n height: '16px',\n padding: `0 calc(${tokens.spacingHorizontalXXS} + ${textPadding})`\n },\n medium: {\n },\n large: {\n width: '24px',\n height: '24px',\n padding: `0 calc(${tokens.spacingHorizontalXS} + ${textPadding})`\n },\n 'extra-large': {\n width: '32px',\n height: '32px',\n padding: `0 calc(${tokens.spacingHorizontalSNudge} + ${textPadding})`\n },\n // shape\n square: {\n borderRadius: tokens.borderRadiusNone\n },\n rounded: {\n borderRadius: tokens.borderRadiusMedium\n },\n roundedSmallToTiny: {\n borderRadius: tokens.borderRadiusSmall\n },\n circular: {\n },\n // hide the boder when appearance is \"ghost\"\n borderGhost: {\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 display: 'none'\n }\n },\n // appearance: filled\n filled: {\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 // appearance: ghost\n ghost: {\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 // appearance: outline\n outline: {\n ...shorthands.borderColor('currentColor')\n },\n 'outline-brand': {\n color: tokens.colorBrandForeground1\n },\n 'outline-danger': {\n color: tokens.colorPaletteRedForeground3,\n ...shorthands.borderColor(tokens.colorPaletteRedBorder2)\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.colorPaletteGreenForeground3,\n ...shorthands.borderColor(tokens.colorPaletteGreenBorder2)\n },\n 'outline-warning': {\n color: tokens.colorPaletteYellowForeground2\n },\n // appearance: tint\n tint: {\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.colorPaletteYellowForeground1,\n ...shorthands.borderColor(tokens.colorPaletteYellowBorder1)\n }\n});\nconst useIconRootClassName = makeResetStyles({\n display: 'flex',\n lineHeight: '1',\n margin: `0 calc(-1 * ${textPadding})`,\n fontSize: '12px'\n});\nconst useIconStyles = makeStyles({\n beforeText: {\n marginRight: `calc(${tokens.spacingHorizontalXXS} + ${textPadding})`\n },\n afterText: {\n marginLeft: `calc(${tokens.spacingHorizontalXXS} + ${textPadding})`\n },\n beforeTextXL: {\n marginRight: `calc(${tokens.spacingHorizontalXS} + ${textPadding})`\n },\n afterTextXL: {\n marginLeft: `calc(${tokens.spacingHorizontalXS} + ${textPadding})`\n },\n // size\n tiny: {\n fontSize: '6px'\n },\n 'extra-small': {\n fontSize: '10px'\n },\n small: {\n fontSize: '12px'\n },\n medium: {\n },\n large: {\n fontSize: '16px'\n },\n 'extra-large': {\n fontSize: '20px'\n }\n});\n/**\n * Applies style classnames to slots\n */ export const useBadgeStyles_unstable = (state)=>{\n 'use no memo';\n const rootClassName = useRootClassName();\n const rootStyles = useRootStyles();\n const smallToTiny = state.size === 'small' || state.size === 'extra-small' || state.size === 'tiny';\n state.root.className = mergeClasses(badgeClassNames.root, rootClassName, smallToTiny && rootStyles.fontSmallToTiny, rootStyles[state.size], rootStyles[state.shape], state.shape === 'rounded' && smallToTiny && rootStyles.roundedSmallToTiny, state.appearance === 'ghost' && rootStyles.borderGhost, rootStyles[state.appearance], rootStyles[`${state.appearance}-${state.color}`], state.root.className);\n const iconRootClassName = useIconRootClassName();\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 state.icon.className = mergeClasses(badgeClassNames.icon, iconRootClassName, iconPositionClass, iconStyles[state.size], state.icon.className);\n }\n return state;\n};\n"],"mappings":"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","ignoreList":[]}
package/lib/components/PresenceBadge/usePresenceBadgeStyles.styles.js CHANGED
@@ -10,38 +10,38 @@ const getIsBusy = status => {
10
10
  }
11
11
  return false;
12
12
  };
13
- const useRootClassName = /*#__PURE__*/__resetStyles("r16xh2wq", null, [".r16xh2wq{display:inline-flex;box-sizing:border-box;align-items:center;justify-content:center;border-radius:var(--ctrl-token-PresenceBadge-449, var(--semantic-token-PresenceBadge-450, var(--borderRadiusCircular)));background-color:var(--ctrl-token-PresenceBadge-451, var(--semantic-token-PresenceBadge-452, var(--colorNeutralBackground1)));padding:1px;background-clip:content-box;}"]);
13
+ const useRootClassName = /*#__PURE__*/__resetStyles("r832ydo", null, [".r832ydo{display:inline-flex;box-sizing:border-box;align-items:center;justify-content:center;border-radius:var(--borderRadiusCircular);background-color:var(--colorNeutralBackground1);padding:1px;background-clip:content-box;}"]);
14
14
  const useIconClassName = /*#__PURE__*/__resetStyles("r11ag4qr", null, [".r11ag4qr{display:flex;margin:-1px;}"]);
15
15
  const useStyles = /*#__PURE__*/__styles({
16
16
  statusBusy: {
17
- sj55zd: "fjj7m6t"
17
+ sj55zd: "fvi85wt"
18
18
  },
19
19
  statusAway: {
20
- sj55zd: "fp6zxrg"
20
+ sj55zd: "f14k8a89"
21
21
  },
22
22
  statusAvailable: {
23
- sj55zd: "fyr71qh"
23
+ sj55zd: "fqa5hgp"
24
24
  },
25
25
  statusOffline: {
26
- sj55zd: "f1mrss32"
26
+ sj55zd: "f11d4kpn"
27
27
  },
28
28
  statusOutOfOffice: {
29
- sj55zd: "fyh3q86"
29
+ sj55zd: "fdce8r3"
30
30
  },
31
31
  statusUnknown: {
32
- sj55zd: "f1w5nunp"
32
+ sj55zd: "f11d4kpn"
33
33
  },
34
34
  outOfOffice: {
35
- sj55zd: "frj3a8e"
35
+ sj55zd: "fr0bkrk"
36
36
  },
37
37
  outOfOfficeAvailable: {
38
- sj55zd: "fif43yf"
38
+ sj55zd: "fqa5hgp"
39
39
  },
40
40
  outOfOfficeBusy: {
41
- sj55zd: "f9kshtx"
41
+ sj55zd: "fvi85wt"
42
42
  },
43
43
  outOfOfficeUnknown: {
44
- sj55zd: "fizqual"
44
+ sj55zd: "f11d4kpn"
45
45
  },
46
46
  tiny: {
47
47
  Bubjx69: "f9ikmtg",
@@ -63,7 +63,7 @@ const useStyles = /*#__PURE__*/__styles({
63
63
  p4uzdd: "fhipgdu"
64
64
  }
65
65
  }, {
66
- d: [".fjj7m6t{color:var(--ctrl-token-PresenceBadge-453, var(--semantic-token-PresenceBadge-454, var(--colorPaletteRedBackground3)));}", ".fp6zxrg{color:var(--ctrl-token-PresenceBadge-455, var(--semantic-token-PresenceBadge-456, var(--colorPaletteMarigoldBackground3)));}", ".fyr71qh{color:var(--ctrl-token-PresenceBadge-457, var(--semantic-token-PresenceBadge-458, var(--colorPaletteLightGreenForeground3)));}", ".f1mrss32{color:var(--ctrl-token-PresenceBadge-459, var(--semantic-token-PresenceBadge-460, var(--colorNeutralForeground3)));}", ".fyh3q86{color:var(--ctrl-token-PresenceBadge-461, var(--semantic-token-PresenceBadge-462, var(--colorPaletteBerryForeground3)));}", ".f1w5nunp{color:var(--ctrl-token-PresenceBadge-463, var(--semantic-token-PresenceBadge-464, var(--colorNeutralForeground3)));}", ".frj3a8e{color:var(--ctrl-token-PresenceBadge-465, var(--semantic-token-PresenceBadge-466, var(--colorNeutralBackground1)));}", ".fif43yf{color:var(--ctrl-token-PresenceBadge-467, var(--semantic-token-PresenceBadge-468, var(--colorPaletteLightGreenForeground3)));}", ".f9kshtx{color:var(--ctrl-token-PresenceBadge-469, var(--semantic-token-PresenceBadge-470, var(--colorPaletteRedBackground3)));}", ".fizqual{color:var(--ctrl-token-PresenceBadge-471, var(--semantic-token-PresenceBadge-472, var(--colorNeutralForeground3)));}", ".f9ikmtg{aspect-ratio:1;}", ".f16dn6v3{width:6px;}", ".f1w2irj7{background-clip:unset;}", ".fab5kbq svg{width:6px!important;}", ".f1ms1d91 svg{height:6px!important;}", ".f64fuq3{width:20px;}", ".f1vfi1yj svg{width:20px!important;}", ".f15s34gz svg{height:20px!important;}", ".f1w9dchk{width:28px;}", ".f14efy9b svg{width:28px!important;}", ".fhipgdu svg{height:28px!important;}"]
66
+ d: [".fvi85wt{color:var(--colorPaletteRedBackground3);}", ".f14k8a89{color:var(--colorPaletteMarigoldBackground3);}", ".fqa5hgp{color:var(--colorPaletteLightGreenForeground3);}", ".f11d4kpn{color:var(--colorNeutralForeground3);}", ".fdce8r3{color:var(--colorPaletteBerryForeground3);}", ".fr0bkrk{color:var(--colorNeutralBackground1);}", ".f9ikmtg{aspect-ratio:1;}", ".f16dn6v3{width:6px;}", ".f1w2irj7{background-clip:unset;}", ".fab5kbq svg{width:6px!important;}", ".f1ms1d91 svg{height:6px!important;}", ".f64fuq3{width:20px;}", ".f1vfi1yj svg{width:20px!important;}", ".f15s34gz svg{height:20px!important;}", ".f1w9dchk{width:28px;}", ".f14efy9b svg{width:28px!important;}", ".fhipgdu svg{height:28px!important;}"]
67
67
  });
68
68
  /**
69
69
  * Applies style classnames to slots
package/lib/components/PresenceBadge/usePresenceBadgeStyles.styles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"names":["__resetStyles","__styles","mergeClasses","tokens","presenceBadgeClassNames","root","icon","getIsBusy","status","useRootClassName","useIconClassName","useStyles","statusBusy","sj55zd","statusAway","statusAvailable","statusOffline","statusOutOfOffice","statusUnknown","outOfOffice","outOfOfficeAvailable","outOfOfficeBusy","outOfOfficeUnknown","tiny","Bubjx69","a9b677","B2eet1l","B5pe6w7","p4uzdd","large","extraLarge","d","usePresenceBadgeStyles_unstable","state","rootClassName","iconClassName","styles","isBusy","className","size"],"sources":["usePresenceBadgeStyles.styles.js"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const presenceBadgeClassNames = {\n root: 'fui-PresenceBadge',\n icon: 'fui-PresenceBadge__icon'\n};\nconst getIsBusy = (status)=>{\n if (status === 'busy' || status === 'do-not-disturb' || status === 'blocked') {\n return true;\n }\n return false;\n};\nconst useRootClassName = makeResetStyles({\n display: 'inline-flex',\n boxSizing: 'border-box',\n alignItems: 'center',\n justifyContent: 'center',\n borderRadius: `var(--ctrl-token-PresenceBadge-449, var(--semantic-token-PresenceBadge-450, ${tokens.borderRadiusCircular}))`,\n backgroundColor: `var(--ctrl-token-PresenceBadge-451, var(--semantic-token-PresenceBadge-452, ${tokens.colorNeutralBackground1}))`,\n // The background color bleeds around the edge of the icon due to antialiasing on the svg and element background.\n // Since all presence icons have a border around the edge that is at least 1px wide*, we can inset the background\n // using padding and backgroundClip. The icon has margin: -1px to account for the padding.\n // (* except size=\"tiny\", where backgroundClip is unset)\n padding: '1px',\n backgroundClip: 'content-box'\n});\nconst useIconClassName = makeResetStyles({\n display: 'flex',\n margin: '-1px'\n});\nconst useStyles = makeStyles({\n statusBusy: {\n color: `var(--ctrl-token-PresenceBadge-453, var(--semantic-token-PresenceBadge-454, ${tokens.colorPaletteRedBackground3}))`\n },\n statusAway: {\n color: `var(--ctrl-token-PresenceBadge-455, var(--semantic-token-PresenceBadge-456, ${tokens.colorPaletteMarigoldBackground3}))`\n },\n statusAvailable: {\n color: `var(--ctrl-token-PresenceBadge-457, var(--semantic-token-PresenceBadge-458, ${tokens.colorPaletteLightGreenForeground3}))`\n },\n statusOffline: {\n color: `var(--ctrl-token-PresenceBadge-459, var(--semantic-token-PresenceBadge-460, ${tokens.colorNeutralForeground3}))`\n },\n statusOutOfOffice: {\n color: `var(--ctrl-token-PresenceBadge-461, var(--semantic-token-PresenceBadge-462, ${tokens.colorPaletteBerryForeground3}))`\n },\n statusUnknown: {\n color: `var(--ctrl-token-PresenceBadge-463, var(--semantic-token-PresenceBadge-464, ${tokens.colorNeutralForeground3}))`\n },\n outOfOffice: {\n color: `var(--ctrl-token-PresenceBadge-465, var(--semantic-token-PresenceBadge-466, ${tokens.colorNeutralBackground1}))`\n },\n outOfOfficeAvailable: {\n color: `var(--ctrl-token-PresenceBadge-467, var(--semantic-token-PresenceBadge-468, ${tokens.colorPaletteLightGreenForeground3}))`\n },\n outOfOfficeBusy: {\n color: `var(--ctrl-token-PresenceBadge-469, var(--semantic-token-PresenceBadge-470, ${tokens.colorPaletteRedBackground3}))`\n },\n outOfOfficeUnknown: {\n color: `var(--ctrl-token-PresenceBadge-471, var(--semantic-token-PresenceBadge-472, ${tokens.colorNeutralForeground3}))`\n },\n // Icons are not resizeable, and these sizes are currently missing\n // use `!important` to size the currently available icons to the missing ones\n //\n tiny: {\n aspectRatio: '1',\n width: '6px',\n backgroundClip: 'unset',\n '& svg': {\n width: '6px !important',\n height: '6px !important'\n }\n },\n large: {\n aspectRatio: '1',\n width: '20px',\n '& svg': {\n width: '20px !important',\n height: '20px !important'\n }\n },\n extraLarge: {\n aspectRatio: '1',\n width: '28px',\n '& svg': {\n width: '28px !important',\n height: '28px !important'\n }\n }\n});\n/**\n * Applies style classnames to slots\n */ export const usePresenceBadgeStyles_unstable = (state)=>{\n 'use no memo';\n const rootClassName = useRootClassName();\n const iconClassName = useIconClassName();\n const styles = useStyles();\n const isBusy = getIsBusy(state.status);\n state.root.className = mergeClasses(presenceBadgeClassNames.root, rootClassName, isBusy && styles.statusBusy, state.status === 'away' && styles.statusAway, state.status === 'available' && styles.statusAvailable, state.status === 'offline' && styles.statusOffline, state.status === 'out-of-office' && styles.statusOutOfOffice, state.status === 'unknown' && styles.statusUnknown, state.outOfOffice && styles.outOfOffice, state.outOfOffice && state.status === 'available' && styles.outOfOfficeAvailable, state.outOfOffice && isBusy && styles.outOfOfficeBusy, state.outOfOffice && (state.status === 'out-of-office' || state.status === 'away' || state.status === 'offline') && styles.statusOutOfOffice, state.outOfOffice && state.status === 'unknown' && styles.outOfOfficeUnknown, state.size === 'tiny' && styles.tiny, state.size === 'large' && styles.large, state.size === 'extra-large' && styles.extraLarge, state.root.className);\n if (state.icon) {\n state.icon.className = mergeClasses(presenceBadgeClassNames.icon, iconClassName, state.icon.className);\n }\n return state;\n};\n"],"mappings":"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","ignoreList":[]}
1
+ {"version":3,"names":["__resetStyles","__styles","mergeClasses","tokens","presenceBadgeClassNames","root","icon","getIsBusy","status","useRootClassName","useIconClassName","useStyles","statusBusy","sj55zd","statusAway","statusAvailable","statusOffline","statusOutOfOffice","statusUnknown","outOfOffice","outOfOfficeAvailable","outOfOfficeBusy","outOfOfficeUnknown","tiny","Bubjx69","a9b677","B2eet1l","B5pe6w7","p4uzdd","large","extraLarge","d","usePresenceBadgeStyles_unstable","state","rootClassName","iconClassName","styles","isBusy","className","size"],"sources":["usePresenceBadgeStyles.styles.js"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const presenceBadgeClassNames = {\n root: 'fui-PresenceBadge',\n icon: 'fui-PresenceBadge__icon'\n};\nconst getIsBusy = (status)=>{\n if (status === 'busy' || status === 'do-not-disturb' || status === 'blocked') {\n return true;\n }\n return false;\n};\nconst useRootClassName = makeResetStyles({\n display: 'inline-flex',\n boxSizing: 'border-box',\n alignItems: 'center',\n justifyContent: 'center',\n borderRadius: tokens.borderRadiusCircular,\n backgroundColor: tokens.colorNeutralBackground1,\n // The background color bleeds around the edge of the icon due to antialiasing on the svg and element background.\n // Since all presence icons have a border around the edge that is at least 1px wide*, we can inset the background\n // using padding and backgroundClip. The icon has margin: -1px to account for the padding.\n // (* except size=\"tiny\", where backgroundClip is unset)\n padding: '1px',\n backgroundClip: 'content-box'\n});\nconst useIconClassName = makeResetStyles({\n display: 'flex',\n margin: '-1px'\n});\nconst useStyles = makeStyles({\n statusBusy: {\n color: tokens.colorPaletteRedBackground3\n },\n statusAway: {\n color: tokens.colorPaletteMarigoldBackground3\n },\n statusAvailable: {\n color: tokens.colorPaletteLightGreenForeground3\n },\n statusOffline: {\n color: tokens.colorNeutralForeground3\n },\n statusOutOfOffice: {\n color: tokens.colorPaletteBerryForeground3\n },\n statusUnknown: {\n color: tokens.colorNeutralForeground3\n },\n outOfOffice: {\n color: tokens.colorNeutralBackground1\n },\n outOfOfficeAvailable: {\n color: tokens.colorPaletteLightGreenForeground3\n },\n outOfOfficeBusy: {\n color: tokens.colorPaletteRedBackground3\n },\n outOfOfficeUnknown: {\n color: tokens.colorNeutralForeground3\n },\n // Icons are not resizeable, and these sizes are currently missing\n // use `!important` to size the currently available icons to the missing ones\n //\n tiny: {\n aspectRatio: '1',\n width: '6px',\n backgroundClip: 'unset',\n '& svg': {\n width: '6px !important',\n height: '6px !important'\n }\n },\n large: {\n aspectRatio: '1',\n width: '20px',\n '& svg': {\n width: '20px !important',\n height: '20px !important'\n }\n },\n extraLarge: {\n aspectRatio: '1',\n width: '28px',\n '& svg': {\n width: '28px !important',\n height: '28px !important'\n }\n }\n});\n/**\n * Applies style classnames to slots\n */ export const usePresenceBadgeStyles_unstable = (state)=>{\n 'use no memo';\n const rootClassName = useRootClassName();\n const iconClassName = useIconClassName();\n const styles = useStyles();\n const isBusy = getIsBusy(state.status);\n state.root.className = mergeClasses(presenceBadgeClassNames.root, rootClassName, isBusy && styles.statusBusy, state.status === 'away' && styles.statusAway, state.status === 'available' && styles.statusAvailable, state.status === 'offline' && styles.statusOffline, state.status === 'out-of-office' && styles.statusOutOfOffice, state.status === 'unknown' && styles.statusUnknown, state.outOfOffice && styles.outOfOffice, state.outOfOffice && state.status === 'available' && styles.outOfOfficeAvailable, state.outOfOffice && isBusy && styles.outOfOfficeBusy, state.outOfOffice && (state.status === 'out-of-office' || state.status === 'away' || state.status === 'offline') && styles.statusOutOfOffice, state.outOfOffice && state.status === 'unknown' && styles.outOfOfficeUnknown, state.size === 'tiny' && styles.tiny, state.size === 'large' && styles.large, state.size === 'extra-large' && styles.extraLarge, state.root.className);\n if (state.icon) {\n state.icon.className = mergeClasses(presenceBadgeClassNames.icon, iconClassName, state.icon.className);\n }\n return state;\n};\n"],"mappings":"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","ignoreList":[]}
package/lib-commonjs/components/Badge/useBadgeStyles.styles.js CHANGED
@@ -25,11 +25,11 @@ const badgeClassNames = {
25
25
  // The text content of the badge has additional horizontal padding, but there is no `text` slot to add that padding to.
26
26
  // Instead, add extra padding to the root, and a negative margin on the icon to "remove" the extra padding on the icon.
27
27
  const textPadding = _reacttheme.tokens.spacingHorizontalXXS;
28
- const useRootClassName = /*#__PURE__*/ (0, _react.__resetStyles)("r1wz0xho", "r1waubuv", [
29
- ".r1wz0xho{display:inline-flex;box-sizing:border-box;align-items:center;justify-content:center;position:relative;font-family:var(--fontFamilyBase);font-size:var(--fontSizeBase200);font-weight:var(--fontWeightSemibold);line-height:var(--lineHeightBase200);height:20px;width:20px;min-width:max-content;padding:0 calc(var(--spacingHorizontalXS) + var(--spacingHorizontalXXS));border-radius:var(--ctrl-token-Badge-341, var(--semantic-token-Badge-342, var(--borderRadiusCircular)));border-color:var(--ctrl-token-Badge-343, var(--semantic-token-Badge-344, var(--colorTransparentStroke)));}",
30
- ".r1wz0xho::after{content:\"\";position:absolute;top:0;left:0;bottom:0;right:0;border-style:solid;border-color:inherit;border-width:var(--ctrl-token-Badge-345, var(--semantic-token-Badge-346, var(--strokeWidthThin)));border-radius:inherit;}",
31
- ".r1waubuv{display:inline-flex;box-sizing:border-box;align-items:center;justify-content:center;position:relative;font-family:var(--fontFamilyBase);font-size:var(--fontSizeBase200);font-weight:var(--fontWeightSemibold);line-height:var(--lineHeightBase200);height:20px;width:20px;min-width:max-content;padding:0 calc(var(--spacingHorizontalXS) + var(--spacingHorizontalXXS));border-radius:var(--ctrl-token-Badge-341, var(--semantic-token-Badge-342, var(--borderRadiusCircular)));border-color:var(--ctrl-token-Badge-343, var(--semantic-token-Badge-344, var(--colorTransparentStroke)));}",
32
- ".r1waubuv::after{content:\"\";position:absolute;top:0;right:0;bottom:0;left:0;border-style:solid;border-color:inherit;border-width:var(--ctrl-token-Badge-345, var(--semantic-token-Badge-346, var(--strokeWidthThin)));border-radius:inherit;}"
28
+ const useRootClassName = /*#__PURE__*/ (0, _react.__resetStyles)("r1l7mb74", "rntuq2r", [
29
+ ".r1l7mb74{display:inline-flex;box-sizing:border-box;align-items:center;justify-content:center;position:relative;font-family:var(--fontFamilyBase);font-size:var(--fontSizeBase200);font-weight:var(--fontWeightSemibold);line-height:var(--lineHeightBase200);height:20px;width:20px;min-width:max-content;padding:0 calc(var(--spacingHorizontalXS) + var(--spacingHorizontalXXS));border-radius:var(--borderRadiusCircular);border-color:var(--colorTransparentStroke);}",
30
+ ".r1l7mb74::after{content:\"\";position:absolute;top:0;left:0;bottom:0;right:0;border-style:solid;border-color:inherit;border-width:var(--strokeWidthThin);border-radius:inherit;}",
31
+ ".rntuq2r{display:inline-flex;box-sizing:border-box;align-items:center;justify-content:center;position:relative;font-family:var(--fontFamilyBase);font-size:var(--fontSizeBase200);font-weight:var(--fontWeightSemibold);line-height:var(--lineHeightBase200);height:20px;width:20px;min-width:max-content;padding:0 calc(var(--spacingHorizontalXS) + var(--spacingHorizontalXXS));border-radius:var(--borderRadiusCircular);border-color:var(--colorTransparentStroke);}",
32
+ ".rntuq2r::after{content:\"\";position:absolute;top:0;right:0;bottom:0;left:0;border-style:solid;border-color:inherit;border-width:var(--strokeWidthThin);border-radius:inherit;}"
33
33
  ]);
34
34
  const useRootStyles = /*#__PURE__*/ (0, _react.__styles)({
35
35
  fontSmallToTiny: {
@@ -95,21 +95,21 @@ const useRootStyles = /*#__PURE__*/ (0, _react.__styles)({
95
95
  Bbmb7ep: 0,
96
96
  Btl43ni: 0,
97
97
  B7oj6ja: 0,
98
- Dimara: "f7abyiv"
98
+ Dimara: "f1fabniw"
99
99
  },
100
100
  rounded: {
101
101
  Beyfa6y: 0,
102
102
  Bbmb7ep: 0,
103
103
  Btl43ni: 0,
104
104
  B7oj6ja: 0,
105
- Dimara: "fou3nt3"
105
+ Dimara: "ft85np5"
106
106
  },
107
107
  roundedSmallToTiny: {
108
108
  Beyfa6y: 0,
109
109
  Bbmb7ep: 0,
110
110
  Btl43ni: 0,
111
111
  B7oj6ja: 0,
112
- Dimara: "fzlx6wr"
112
+ Dimara: "fq9zq91"
113
113
  },
114
114
  circular: {},
115
115
  borderGhost: {
@@ -117,61 +117,61 @@ const useRootStyles = /*#__PURE__*/ (0, _react.__styles)({
117
117
  },
118
118
  filled: {},
119
119
  "filled-brand": {
120
- De3pzq: "fdqjzqe",
121
- sj55zd: "fnyk02w"
120
+ De3pzq: "ffp7eso",
121
+ sj55zd: "f1phragk"
122
122
  },
123
123
  "filled-danger": {
124
- De3pzq: "flx86sn",
125
- sj55zd: "fgvu3al"
124
+ De3pzq: "fdl5y0r",
125
+ sj55zd: "f1phragk"
126
126
  },
127
127
  "filled-important": {
128
- De3pzq: "f15xs996",
129
- sj55zd: "f1vch7lf"
128
+ De3pzq: "f1c73kur",
129
+ sj55zd: "fr0bkrk"
130
130
  },
131
131
  "filled-informative": {
132
- De3pzq: "f3d2lzq",
133
- sj55zd: "fq41cgs"
132
+ De3pzq: "f3vzo32",
133
+ sj55zd: "f11d4kpn"
134
134
  },
135
135
  "filled-severe": {
136
- De3pzq: "f1k98sz0",
137
- sj55zd: "ftq7wa"
136
+ De3pzq: "f1s438gw",
137
+ sj55zd: "f1phragk"
138
138
  },
139
139
  "filled-subtle": {
140
- De3pzq: "fwbw61e",
141
- sj55zd: "ffv5pt6"
140
+ De3pzq: "fxugw4r",
141
+ sj55zd: "f19n0e5"
142
142
  },
143
143
  "filled-success": {
144
- De3pzq: "fqovzr4",
145
- sj55zd: "f1b7taaf"
144
+ De3pzq: "flxk52p",
145
+ sj55zd: "f1phragk"
146
146
  },
147
147
  "filled-warning": {
148
- De3pzq: "fkkae45",
149
- sj55zd: "fuk51dr"
148
+ De3pzq: "ffq97bm",
149
+ sj55zd: "ff5vbop"
150
150
  },
151
151
  ghost: {},
152
152
  "ghost-brand": {
153
- sj55zd: "fn0grvs"
153
+ sj55zd: "f16muhyy"
154
154
  },
155
155
  "ghost-danger": {
156
- sj55zd: "f1ymzm00"
156
+ sj55zd: "f1whyuy6"
157
157
  },
158
158
  "ghost-important": {
159
- sj55zd: "f1l7x15h"
159
+ sj55zd: "f19n0e5"
160
160
  },
161
161
  "ghost-informative": {
162
- sj55zd: "f1g3ccf2"
162
+ sj55zd: "f11d4kpn"
163
163
  },
164
164
  "ghost-severe": {
165
- sj55zd: "f1ry7oaq"
165
+ sj55zd: "f1l8vj45"
166
166
  },
167
167
  "ghost-subtle": {
168
- sj55zd: "f14dtlz5"
168
+ sj55zd: "fonrgv7"
169
169
  },
170
170
  "ghost-success": {
171
- sj55zd: "f1dl7s23"
171
+ sj55zd: "f1m7fhi8"
172
172
  },
173
173
  "ghost-warning": {
174
- sj55zd: "f139i9j4"
174
+ sj55zd: "fpti2h4"
175
175
  },
176
176
  outline: {
177
177
  g2u3we: "f23ftbb",
@@ -186,10 +186,10 @@ const useRootStyles = /*#__PURE__*/ (0, _react.__styles)({
186
186
  ]
187
187
  },
188
188
  "outline-brand": {
189
- sj55zd: "f1u0h5xc"
189
+ sj55zd: "f16muhyy"
190
190
  },
191
191
  "outline-danger": {
192
- sj55zd: "fy5c1di",
192
+ sj55zd: "f1whyuy6",
193
193
  g2u3we: "fyqpifd",
194
194
  h3c5rm: [
195
195
  "f3ukxca",
@@ -202,7 +202,7 @@ const useRootStyles = /*#__PURE__*/ (0, _react.__styles)({
202
202
  ]
203
203
  },
204
204
  "outline-important": {
205
- sj55zd: "f17om6wp",
205
+ sj55zd: "f11d4kpn",
206
206
  g2u3we: "fq0vr37",
207
207
  h3c5rm: [
208
208
  "f1byw159",
@@ -215,7 +215,7 @@ const useRootStyles = /*#__PURE__*/ (0, _react.__styles)({
215
215
  ]
216
216
  },
217
217
  "outline-informative": {
218
- sj55zd: "f1px5c6m",
218
+ sj55zd: "f11d4kpn",
219
219
  g2u3we: "f68mrw8",
220
220
  h3c5rm: [
221
221
  "f7pw515",
@@ -228,13 +228,13 @@ const useRootStyles = /*#__PURE__*/ (0, _react.__styles)({
228
228
  ]
229
229
  },
230
230
  "outline-severe": {
231
- sj55zd: "f1eq2dgn"
231
+ sj55zd: "f1l8vj45"
232
232
  },
233
233
  "outline-subtle": {
234
- sj55zd: "f1r5gmdf"
234
+ sj55zd: "fonrgv7"
235
235
  },
236
236
  "outline-success": {
237
- sj55zd: "f14ta1hi",
237
+ sj55zd: "f1m7fhi8",
238
238
  g2u3we: "f1mmhl11",
239
239
  h3c5rm: [
240
240
  "f1tjpp2f",
@@ -247,12 +247,12 @@ const useRootStyles = /*#__PURE__*/ (0, _react.__styles)({
247
247
  ]
248
248
  },
249
249
  "outline-warning": {
250
- sj55zd: "f175uq3x"
250
+ sj55zd: "fpti2h4"
251
251
  },
252
252
  tint: {},
253
253
  "tint-brand": {
254
- De3pzq: "f1eumk4b",
255
- sj55zd: "f1yfpvl9",
254
+ De3pzq: "f16xkysk",
255
+ sj55zd: "faj9fo0",
256
256
  g2u3we: "f161y7kd",
257
257
  h3c5rm: [
258
258
  "f1c8dzaj",
@@ -265,8 +265,8 @@ const useRootStyles = /*#__PURE__*/ (0, _react.__styles)({
265
265
  ]
266
266
  },
267
267
  "tint-danger": {
268
- De3pzq: "f1ieeejy",
269
- sj55zd: "fbaokgc",
268
+ De3pzq: "ff0poqj",
269
+ sj55zd: "f1hcrxcs",
270
270
  g2u3we: "f1oqjm8o",
271
271
  h3c5rm: [
272
272
  "fkgrb8g",
@@ -279,8 +279,8 @@ const useRootStyles = /*#__PURE__*/ (0, _react.__styles)({
279
279
  ]
280
280
  },
281
281
  "tint-important": {
282
- De3pzq: "f1qepuxg",
283
- sj55zd: "fwpt6fm",
282
+ De3pzq: "f945g0u",
283
+ sj55zd: "fr0bkrk",
284
284
  g2u3we: "fghlq4f",
285
285
  h3c5rm: [
286
286
  "f1gn591s",
@@ -293,8 +293,8 @@ const useRootStyles = /*#__PURE__*/ (0, _react.__styles)({
293
293
  ]
294
294
  },
295
295
  "tint-informative": {
296
- De3pzq: "fxa5gpb",
297
- sj55zd: "f6s6cv4",
296
+ De3pzq: "f1ctqxl6",
297
+ sj55zd: "f11d4kpn",
298
298
  g2u3we: "f68mrw8",
299
299
  h3c5rm: [
300
300
  "f7pw515",
@@ -307,8 +307,8 @@ const useRootStyles = /*#__PURE__*/ (0, _react.__styles)({
307
307
  ]
308
308
  },
309
309
  "tint-severe": {
310
- De3pzq: "frjxuu5",
311
- sj55zd: "fl6s856",
310
+ De3pzq: "f1xzsg4",
311
+ sj55zd: "f1k5f75o",
312
312
  g2u3we: "fxy9dsj",
313
313
  h3c5rm: [
314
314
  "f54u6j2",
@@ -321,8 +321,8 @@ const useRootStyles = /*#__PURE__*/ (0, _react.__styles)({
321
321
  ]
322
322
  },
323
323
  "tint-subtle": {
324
- De3pzq: "foy4zr5",
325
- sj55zd: "f1g6xc6w",
324
+ De3pzq: "fxugw4r",
325
+ sj55zd: "f11d4kpn",
326
326
  g2u3we: "f68mrw8",
327
327
  h3c5rm: [
328
328
  "f7pw515",
@@ -335,8 +335,8 @@ const useRootStyles = /*#__PURE__*/ (0, _react.__styles)({
335
335
  ]
336
336
  },
337
337
  "tint-success": {
338
- De3pzq: "fsq3r5k",
339
- sj55zd: "fc5dy85",
338
+ De3pzq: "f2vsrz6",
339
+ sj55zd: "ffmvakt",
340
340
  g2u3we: "fdmic9h",
341
341
  h3c5rm: [
342
342
  "f196y6m",
@@ -349,8 +349,8 @@ const useRootStyles = /*#__PURE__*/ (0, _react.__styles)({
349
349
  ]
350
350
  },
351
351
  "tint-warning": {
352
- De3pzq: "f1ijqsw1",
353
- sj55zd: "f1n1qx92",
352
+ De3pzq: "f10s6hli",
353
+ sj55zd: "f42v8de",
354
354
  g2u3we: "fn9i3n",
355
355
  h3c5rm: [
356
356
  "f1aw8cx4",
@@ -414,112 +414,95 @@ const useRootStyles = /*#__PURE__*/ (0, _react.__styles)({
414
414
  }
415
415
  ],
416
416
  [
417
- ".f7abyiv{border-radius:var(--ctrl-token-Badge-347, var(--semantic-token-Badge-348, var(--borderRadiusNone)));}",
417
+ ".f1fabniw{border-radius:var(--borderRadiusNone);}",
418
418
  {
419
419
  p: -1
420
420
  }
421
421
  ],
422
422
  [
423
- ".fou3nt3{border-radius:var(--ctrl-token-Badge-349, var(--semantic-token-Badge-350, var(--borderRadiusMedium)));}",
423
+ ".ft85np5{border-radius:var(--borderRadiusMedium);}",
424
424
  {
425
425
  p: -1
426
426
  }
427
427
  ],
428
428
  [
429
- ".fzlx6wr{border-radius:var(--ctrl-token-Badge-351, var(--semantic-token-Badge-352, var(--borderRadiusSmall)));}",
429
+ ".fq9zq91{border-radius:var(--borderRadiusSmall);}",
430
430
  {
431
431
  p: -1
432
432
  }
433
433
  ],
434
434
  ".f10ludwy::after{display:none;}",
435
- ".fdqjzqe{background-color:var(--ctrl-token-Badge-353, var(--semantic-token-Badge-354, var(--colorBrandBackground)));}",
436
- ".fnyk02w{color:var(--ctrl-token-Badge-355, var(--semantic-token-Badge-356, var(--colorNeutralForegroundOnBrand)));}",
437
- ".flx86sn{background-color:var(--ctrl-token-Badge-357, var(--semantic-token-Badge-358, var(--colorPaletteRedBackground3)));}",
438
- ".fgvu3al{color:var(--ctrl-token-Badge-359, var(--semantic-token-Badge-360, var(--colorNeutralForegroundOnBrand)));}",
439
- ".f15xs996{background-color:var(--ctrl-token-Badge-361, var(--semantic-token-Badge-362, var(--colorNeutralForeground1)));}",
440
- ".f1vch7lf{color:var(--ctrl-token-Badge-363, var(--semantic-token-Badge-364, var(--colorNeutralBackground1)));}",
441
- ".f3d2lzq{background-color:var(--ctrl-token-Badge-365, var(--semantic-token-Badge-366, var(--colorNeutralBackground5)));}",
442
- ".fq41cgs{color:var(--ctrl-token-Badge-367, var(--semantic-token-Badge-368, var(--colorNeutralForeground3)));}",
443
- ".f1k98sz0{background-color:var(--ctrl-token-Badge-369, var(--semantic-token-Badge-370, var(--colorPaletteDarkOrangeBackground3)));}",
444
- ".ftq7wa{color:var(--ctrl-token-Badge-371, var(--semantic-token-Badge-372, var(--colorNeutralForegroundOnBrand)));}",
445
- ".fwbw61e{background-color:var(--ctrl-token-Badge-373, var(--semantic-token-Badge-374, var(--colorNeutralBackground1)));}",
446
- ".ffv5pt6{color:var(--ctrl-token-Badge-375, var(--semantic-token-Badge-376, var(--colorNeutralForeground1)));}",
447
- ".fqovzr4{background-color:var(--ctrl-token-Badge-377, var(--semantic-token-Badge-378, var(--colorPaletteGreenBackground3)));}",
448
- ".f1b7taaf{color:var(--ctrl-token-Badge-379, var(--semantic-token-Badge-380, var(--colorNeutralForegroundOnBrand)));}",
449
- ".fkkae45{background-color:var(--ctrl-token-Badge-381, var(--semantic-token-Badge-382, var(--colorPaletteYellowBackground3)));}",
450
- ".fuk51dr{color:var(--ctrl-token-Badge-383, var(--semantic-token-Badge-384, var(--colorNeutralForeground1Static)));}",
451
- ".fn0grvs{color:var(--ctrl-token-Badge-385, var(--semantic-token-Badge-386, var(--colorBrandForeground1)));}",
452
- ".f1ymzm00{color:var(--ctrl-token-Badge-387, var(--semantic-token-Badge-388, var(--colorPaletteRedForeground3)));}",
453
- ".f1l7x15h{color:var(--ctrl-token-Badge-389, var(--semantic-token-Badge-390, var(--colorNeutralForeground1)));}",
454
- ".f1g3ccf2{color:var(--ctrl-token-Badge-391, var(--semantic-token-Badge-392, var(--colorNeutralForeground3)));}",
455
- ".f1ry7oaq{color:var(--ctrl-token-Badge-393, var(--semantic-token-Badge-394, var(--colorPaletteDarkOrangeForeground3)));}",
456
- ".f14dtlz5{color:var(--ctrl-token-Badge-395, var(--semantic-token-Badge-396, var(--colorNeutralForegroundStaticInverted)));}",
457
- ".f1dl7s23{color:var(--ctrl-token-Badge-397, var(--semantic-token-Badge-398, var(--colorPaletteGreenForeground3)));}",
458
- ".f139i9j4{color:var(--ctrl-token-Badge-399, var(--semantic-token-Badge-400, var(--colorPaletteYellowForeground2)));}",
435
+ ".ffp7eso{background-color:var(--colorBrandBackground);}",
436
+ ".f1phragk{color:var(--colorNeutralForegroundOnBrand);}",
437
+ ".fdl5y0r{background-color:var(--colorPaletteRedBackground3);}",
438
+ ".f1c73kur{background-color:var(--colorNeutralForeground1);}",
439
+ ".fr0bkrk{color:var(--colorNeutralBackground1);}",
440
+ ".f3vzo32{background-color:var(--colorNeutralBackground5);}",
441
+ ".f11d4kpn{color:var(--colorNeutralForeground3);}",
442
+ ".f1s438gw{background-color:var(--colorPaletteDarkOrangeBackground3);}",
443
+ ".fxugw4r{background-color:var(--colorNeutralBackground1);}",
444
+ ".f19n0e5{color:var(--colorNeutralForeground1);}",
445
+ ".flxk52p{background-color:var(--colorPaletteGreenBackground3);}",
446
+ ".ffq97bm{background-color:var(--colorPaletteYellowBackground3);}",
447
+ ".ff5vbop{color:var(--colorNeutralForeground1Static);}",
448
+ ".f16muhyy{color:var(--colorBrandForeground1);}",
449
+ ".f1whyuy6{color:var(--colorPaletteRedForeground3);}",
450
+ ".f1l8vj45{color:var(--colorPaletteDarkOrangeForeground3);}",
451
+ ".fonrgv7{color:var(--colorNeutralForegroundStaticInverted);}",
452
+ ".f1m7fhi8{color:var(--colorPaletteGreenForeground3);}",
453
+ ".fpti2h4{color:var(--colorPaletteYellowForeground2);}",
459
454
  ".f23ftbb{border-top-color:currentColor;}",
460
455
  ".f1gkuv52{border-right-color:currentColor;}",
461
456
  ".f1p1bl80{border-left-color:currentColor;}",
462
457
  ".fioka3i{border-bottom-color:currentColor;}",
463
- ".f1u0h5xc{color:var(--ctrl-token-Badge-401, var(--semantic-token-Badge-402, var(--colorBrandForeground1)));}",
464
- ".fy5c1di{color:var(--ctrl-token-Badge-403, var(--semantic-token-Badge-404, var(--colorPaletteRedForeground3)));}",
465
458
  ".fyqpifd{border-top-color:var(--colorPaletteRedBorder2);}",
466
459
  ".f3ukxca{border-right-color:var(--colorPaletteRedBorder2);}",
467
460
  ".f1k7dugc{border-left-color:var(--colorPaletteRedBorder2);}",
468
461
  ".f1njxb2b{border-bottom-color:var(--colorPaletteRedBorder2);}",
469
- ".f17om6wp{color:var(--ctrl-token-Badge-405, var(--semantic-token-Badge-406, var(--colorNeutralForeground3)));}",
470
462
  ".fq0vr37{border-top-color:var(--colorNeutralStrokeAccessible);}",
471
463
  ".f1byw159{border-right-color:var(--colorNeutralStrokeAccessible);}",
472
464
  ".f11cr0be{border-left-color:var(--colorNeutralStrokeAccessible);}",
473
465
  ".f1c1zstj{border-bottom-color:var(--colorNeutralStrokeAccessible);}",
474
- ".f1px5c6m{color:var(--ctrl-token-Badge-407, var(--semantic-token-Badge-408, var(--colorNeutralForeground3)));}",
475
466
  ".f68mrw8{border-top-color:var(--colorNeutralStroke2);}",
476
467
  ".f7pw515{border-right-color:var(--colorNeutralStroke2);}",
477
468
  ".fw35ms5{border-left-color:var(--colorNeutralStroke2);}",
478
469
  ".frpde29{border-bottom-color:var(--colorNeutralStroke2);}",
479
- ".f1eq2dgn{color:var(--ctrl-token-Badge-409, var(--semantic-token-Badge-410, var(--colorPaletteDarkOrangeForeground3)));}",
480
- ".f1r5gmdf{color:var(--ctrl-token-Badge-411, var(--semantic-token-Badge-412, var(--colorNeutralForegroundStaticInverted)));}",
481
- ".f14ta1hi{color:var(--ctrl-token-Badge-413, var(--semantic-token-Badge-414, var(--colorPaletteGreenForeground3)));}",
482
470
  ".f1mmhl11{border-top-color:var(--colorPaletteGreenBorder2);}",
483
471
  ".f1tjpp2f{border-right-color:var(--colorPaletteGreenBorder2);}",
484
472
  ".f1ocn5n7{border-left-color:var(--colorPaletteGreenBorder2);}",
485
473
  ".f1gjv25d{border-bottom-color:var(--colorPaletteGreenBorder2);}",
486
- ".f175uq3x{color:var(--ctrl-token-Badge-415, var(--semantic-token-Badge-416, var(--colorPaletteYellowForeground2)));}",
487
- ".f1eumk4b{background-color:var(--ctrl-token-Badge-417, var(--semantic-token-Badge-418, var(--colorBrandBackground2)));}",
488
- ".f1yfpvl9{color:var(--ctrl-token-Badge-419, var(--semantic-token-Badge-420, var(--colorBrandForeground2)));}",
474
+ ".f16xkysk{background-color:var(--colorBrandBackground2);}",
475
+ ".faj9fo0{color:var(--colorBrandForeground2);}",
489
476
  ".f161y7kd{border-top-color:var(--colorBrandStroke2);}",
490
477
  ".f1c8dzaj{border-right-color:var(--colorBrandStroke2);}",
491
478
  ".f1sl6hi9{border-left-color:var(--colorBrandStroke2);}",
492
479
  ".f1619yhw{border-bottom-color:var(--colorBrandStroke2);}",
493
- ".f1ieeejy{background-color:var(--ctrl-token-Badge-421, var(--semantic-token-Badge-422, var(--colorPaletteRedBackground1)));}",
494
- ".fbaokgc{color:var(--ctrl-token-Badge-423, var(--semantic-token-Badge-424, var(--colorPaletteRedForeground1)));}",
480
+ ".ff0poqj{background-color:var(--colorPaletteRedBackground1);}",
481
+ ".f1hcrxcs{color:var(--colorPaletteRedForeground1);}",
495
482
  ".f1oqjm8o{border-top-color:var(--colorPaletteRedBorder1);}",
496
483
  ".fkgrb8g{border-right-color:var(--colorPaletteRedBorder1);}",
497
484
  ".frb5wm0{border-left-color:var(--colorPaletteRedBorder1);}",
498
485
  ".f1iai1ph{border-bottom-color:var(--colorPaletteRedBorder1);}",
499
- ".f1qepuxg{background-color:var(--ctrl-token-Badge-425, var(--semantic-token-Badge-426, var(--colorNeutralForeground3)));}",
500
- ".fwpt6fm{color:var(--ctrl-token-Badge-427, var(--semantic-token-Badge-428, var(--colorNeutralBackground1)));}",
486
+ ".f945g0u{background-color:var(--colorNeutralForeground3);}",
501
487
  ".fghlq4f{border-top-color:var(--colorTransparentStroke);}",
502
488
  ".f1gn591s{border-right-color:var(--colorTransparentStroke);}",
503
489
  ".fjscplz{border-left-color:var(--colorTransparentStroke);}",
504
490
  ".fb073pr{border-bottom-color:var(--colorTransparentStroke);}",
505
- ".fxa5gpb{background-color:var(--ctrl-token-Badge-429, var(--semantic-token-Badge-430, var(--colorNeutralBackground4)));}",
506
- ".f6s6cv4{color:var(--ctrl-token-Badge-431, var(--semantic-token-Badge-432, var(--colorNeutralForeground3)));}",
507
- ".frjxuu5{background-color:var(--ctrl-token-Badge-433, var(--semantic-token-Badge-434, var(--colorPaletteDarkOrangeBackground1)));}",
508
- ".fl6s856{color:var(--ctrl-token-Badge-435, var(--semantic-token-Badge-436, var(--colorPaletteDarkOrangeForeground1)));}",
491
+ ".f1ctqxl6{background-color:var(--colorNeutralBackground4);}",
492
+ ".f1xzsg4{background-color:var(--colorPaletteDarkOrangeBackground1);}",
493
+ ".f1k5f75o{color:var(--colorPaletteDarkOrangeForeground1);}",
509
494
  ".fxy9dsj{border-top-color:var(--colorPaletteDarkOrangeBorder1);}",
510
495
  ".f54u6j2{border-right-color:var(--colorPaletteDarkOrangeBorder1);}",
511
496
  ".fcm23ze{border-left-color:var(--colorPaletteDarkOrangeBorder1);}",
512
497
  ".f4vf0uq{border-bottom-color:var(--colorPaletteDarkOrangeBorder1);}",
513
- ".foy4zr5{background-color:var(--ctrl-token-Badge-437, var(--semantic-token-Badge-438, var(--colorNeutralBackground1)));}",
514
- ".f1g6xc6w{color:var(--ctrl-token-Badge-439, var(--semantic-token-Badge-440, var(--colorNeutralForeground3)));}",
515
- ".fsq3r5k{background-color:var(--ctrl-token-Badge-441, var(--semantic-token-Badge-442, var(--colorPaletteGreenBackground1)));}",
516
- ".fc5dy85{color:var(--ctrl-token-Badge-443, var(--semantic-token-Badge-444, var(--colorPaletteGreenForeground1)));}",
498
+ ".f2vsrz6{background-color:var(--colorPaletteGreenBackground1);}",
499
+ ".ffmvakt{color:var(--colorPaletteGreenForeground1);}",
517
500
  ".fdmic9h{border-top-color:var(--colorPaletteGreenBorder1);}",
518
501
  ".f196y6m{border-right-color:var(--colorPaletteGreenBorder1);}",
519
502
  ".fetptd8{border-left-color:var(--colorPaletteGreenBorder1);}",
520
503
  ".f1pev5xq{border-bottom-color:var(--colorPaletteGreenBorder1);}",
521
- ".f1ijqsw1{background-color:var(--ctrl-token-Badge-445, var(--semantic-token-Badge-446, var(--colorPaletteYellowBackground1)));}",
522
- ".f1n1qx92{color:var(--ctrl-token-Badge-447, var(--semantic-token-Badge-448, var(--colorPaletteYellowForeground1)));}",
504
+ ".f10s6hli{background-color:var(--colorPaletteYellowBackground1);}",
505
+ ".f42v8de{color:var(--colorPaletteYellowForeground1);}",
523
506
  ".fn9i3n{border-top-color:var(--colorPaletteYellowBorder1);}",
524
507
  ".f1aw8cx4{border-right-color:var(--colorPaletteYellowBorder1);}",
525
508
  ".f51if14{border-left-color:var(--colorPaletteYellowBorder1);}",
package/lib-commonjs/components/Badge/useBadgeStyles.styles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["useBadgeStyles.styles.js"],"sourcesContent":["import { shorthands, makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nexport const badgeClassNames = {\n root: 'fui-Badge',\n icon: 'fui-Badge__icon'\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;\nconst useRootClassName = makeResetStyles({\n display: 'inline-flex',\n boxSizing: 'border-box',\n alignItems: 'center',\n justifyContent: 'center',\n position: 'relative',\n ...typographyStyles.caption1Strong,\n height: '20px',\n width: '20px',\n minWidth: 'max-content',\n padding: `0 calc(${tokens.spacingHorizontalXS} + ${textPadding})`,\n borderRadius: `var(--ctrl-token-Badge-341, var(--semantic-token-Badge-342, ${tokens.borderRadiusCircular}))`,\n // Use a transparent stroke (rather than no border) so the border is visible in high contrast\n borderColor: `var(--ctrl-token-Badge-343, var(--semantic-token-Badge-344, ${tokens.colorTransparentStroke}))`,\n '::after': {\n content: '\"\"',\n position: 'absolute',\n top: 0,\n left: 0,\n bottom: 0,\n right: 0,\n borderStyle: 'solid',\n borderColor: 'inherit',\n borderWidth: `var(--ctrl-token-Badge-345, var(--semantic-token-Badge-346, ${tokens.strokeWidthThin}))`,\n borderRadius: 'inherit'\n }\n});\nconst useRootStyles = makeStyles({\n fontSmallToTiny: {\n ...typographyStyles.caption2Strong\n },\n // size\n tiny: {\n width: '6px',\n height: '6px',\n fontSize: '4px',\n lineHeight: '4px',\n minWidth: 'unset',\n padding: 'unset'\n },\n 'extra-small': {\n width: '10px',\n height: '10px',\n fontSize: '6px',\n lineHeight: '6px',\n minWidth: 'unset',\n padding: 'unset'\n },\n small: {\n width: '16px',\n height: '16px',\n padding: `0 calc(${tokens.spacingHorizontalXXS} + ${textPadding})`\n },\n medium: {\n },\n large: {\n width: '24px',\n height: '24px',\n padding: `0 calc(${tokens.spacingHorizontalXS} + ${textPadding})`\n },\n 'extra-large': {\n width: '32px',\n height: '32px',\n padding: `0 calc(${tokens.spacingHorizontalSNudge} + ${textPadding})`\n },\n // shape\n square: {\n borderRadius: `var(--ctrl-token-Badge-347, var(--semantic-token-Badge-348, ${tokens.borderRadiusNone}))`\n },\n rounded: {\n borderRadius: `var(--ctrl-token-Badge-349, var(--semantic-token-Badge-350, ${tokens.borderRadiusMedium}))`\n },\n roundedSmallToTiny: {\n borderRadius: `var(--ctrl-token-Badge-351, var(--semantic-token-Badge-352, ${tokens.borderRadiusSmall}))`\n },\n circular: {\n },\n // hide the boder when appearance is \"ghost\"\n borderGhost: {\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 display: 'none'\n }\n },\n // appearance: filled\n filled: {\n },\n 'filled-brand': {\n backgroundColor: `var(--ctrl-token-Badge-353, var(--semantic-token-Badge-354, ${tokens.colorBrandBackground}))`,\n color: `var(--ctrl-token-Badge-355, var(--semantic-token-Badge-356, ${tokens.colorNeutralForegroundOnBrand}))`\n },\n 'filled-danger': {\n backgroundColor: `var(--ctrl-token-Badge-357, var(--semantic-token-Badge-358, ${tokens.colorPaletteRedBackground3}))`,\n color: `var(--ctrl-token-Badge-359, var(--semantic-token-Badge-360, ${tokens.colorNeutralForegroundOnBrand}))`\n },\n 'filled-important': {\n backgroundColor: `var(--ctrl-token-Badge-361, var(--semantic-token-Badge-362, ${tokens.colorNeutralForeground1}))`,\n color: `var(--ctrl-token-Badge-363, var(--semantic-token-Badge-364, ${tokens.colorNeutralBackground1}))`\n },\n 'filled-informative': {\n backgroundColor: `var(--ctrl-token-Badge-365, var(--semantic-token-Badge-366, ${tokens.colorNeutralBackground5}))`,\n color: `var(--ctrl-token-Badge-367, var(--semantic-token-Badge-368, ${tokens.colorNeutralForeground3}))`\n },\n 'filled-severe': {\n backgroundColor: `var(--ctrl-token-Badge-369, var(--semantic-token-Badge-370, ${tokens.colorPaletteDarkOrangeBackground3}))`,\n color: `var(--ctrl-token-Badge-371, var(--semantic-token-Badge-372, ${tokens.colorNeutralForegroundOnBrand}))`\n },\n 'filled-subtle': {\n backgroundColor: `var(--ctrl-token-Badge-373, var(--semantic-token-Badge-374, ${tokens.colorNeutralBackground1}))`,\n color: `var(--ctrl-token-Badge-375, var(--semantic-token-Badge-376, ${tokens.colorNeutralForeground1}))`\n },\n 'filled-success': {\n backgroundColor: `var(--ctrl-token-Badge-377, var(--semantic-token-Badge-378, ${tokens.colorPaletteGreenBackground3}))`,\n color: `var(--ctrl-token-Badge-379, var(--semantic-token-Badge-380, ${tokens.colorNeutralForegroundOnBrand}))`\n },\n 'filled-warning': {\n backgroundColor: `var(--ctrl-token-Badge-381, var(--semantic-token-Badge-382, ${tokens.colorPaletteYellowBackground3}))`,\n color: `var(--ctrl-token-Badge-383, var(--semantic-token-Badge-384, ${tokens.colorNeutralForeground1Static}))`\n },\n // appearance: ghost\n ghost: {\n },\n 'ghost-brand': {\n color: `var(--ctrl-token-Badge-385, var(--semantic-token-Badge-386, ${tokens.colorBrandForeground1}))`\n },\n 'ghost-danger': {\n color: `var(--ctrl-token-Badge-387, var(--semantic-token-Badge-388, ${tokens.colorPaletteRedForeground3}))`\n },\n 'ghost-important': {\n color: `var(--ctrl-token-Badge-389, var(--semantic-token-Badge-390, ${tokens.colorNeutralForeground1}))`\n },\n 'ghost-informative': {\n color: `var(--ctrl-token-Badge-391, var(--semantic-token-Badge-392, ${tokens.colorNeutralForeground3}))`\n },\n 'ghost-severe': {\n color: `var(--ctrl-token-Badge-393, var(--semantic-token-Badge-394, ${tokens.colorPaletteDarkOrangeForeground3}))`\n },\n 'ghost-subtle': {\n color: `var(--ctrl-token-Badge-395, var(--semantic-token-Badge-396, ${tokens.colorNeutralForegroundStaticInverted}))`\n },\n 'ghost-success': {\n color: `var(--ctrl-token-Badge-397, var(--semantic-token-Badge-398, ${tokens.colorPaletteGreenForeground3}))`\n },\n 'ghost-warning': {\n color: `var(--ctrl-token-Badge-399, var(--semantic-token-Badge-400, ${tokens.colorPaletteYellowForeground2}))`\n },\n // appearance: outline\n outline: {\n ...shorthands.borderColor('currentColor')\n },\n 'outline-brand': {\n color: `var(--ctrl-token-Badge-401, var(--semantic-token-Badge-402, ${tokens.colorBrandForeground1}))`\n },\n 'outline-danger': {\n color: `var(--ctrl-token-Badge-403, var(--semantic-token-Badge-404, ${tokens.colorPaletteRedForeground3}))`,\n ...shorthands.borderColor(tokens.colorPaletteRedBorder2)\n },\n 'outline-important': {\n color: `var(--ctrl-token-Badge-405, var(--semantic-token-Badge-406, ${tokens.colorNeutralForeground3}))`,\n ...shorthands.borderColor(tokens.colorNeutralStrokeAccessible)\n },\n 'outline-informative': {\n color: `var(--ctrl-token-Badge-407, var(--semantic-token-Badge-408, ${tokens.colorNeutralForeground3}))`,\n ...shorthands.borderColor(tokens.colorNeutralStroke2)\n },\n 'outline-severe': {\n color: `var(--ctrl-token-Badge-409, var(--semantic-token-Badge-410, ${tokens.colorPaletteDarkOrangeForeground3}))`\n },\n 'outline-subtle': {\n color: `var(--ctrl-token-Badge-411, var(--semantic-token-Badge-412, ${tokens.colorNeutralForegroundStaticInverted}))`\n },\n 'outline-success': {\n color: `var(--ctrl-token-Badge-413, var(--semantic-token-Badge-414, ${tokens.colorPaletteGreenForeground3}))`,\n ...shorthands.borderColor(tokens.colorPaletteGreenBorder2)\n },\n 'outline-warning': {\n color: `var(--ctrl-token-Badge-415, var(--semantic-token-Badge-416, ${tokens.colorPaletteYellowForeground2}))`\n },\n // appearance: tint\n tint: {\n },\n 'tint-brand': {\n backgroundColor: `var(--ctrl-token-Badge-417, var(--semantic-token-Badge-418, ${tokens.colorBrandBackground2}))`,\n color: `var(--ctrl-token-Badge-419, var(--semantic-token-Badge-420, ${tokens.colorBrandForeground2}))`,\n ...shorthands.borderColor(tokens.colorBrandStroke2)\n },\n 'tint-danger': {\n backgroundColor: `var(--ctrl-token-Badge-421, var(--semantic-token-Badge-422, ${tokens.colorPaletteRedBackground1}))`,\n color: `var(--ctrl-token-Badge-423, var(--semantic-token-Badge-424, ${tokens.colorPaletteRedForeground1}))`,\n ...shorthands.borderColor(tokens.colorPaletteRedBorder1)\n },\n 'tint-important': {\n backgroundColor: `var(--ctrl-token-Badge-425, var(--semantic-token-Badge-426, ${tokens.colorNeutralForeground3}))`,\n color: `var(--ctrl-token-Badge-427, var(--semantic-token-Badge-428, ${tokens.colorNeutralBackground1}))`,\n ...shorthands.borderColor(tokens.colorTransparentStroke)\n },\n 'tint-informative': {\n backgroundColor: `var(--ctrl-token-Badge-429, var(--semantic-token-Badge-430, ${tokens.colorNeutralBackground4}))`,\n color: `var(--ctrl-token-Badge-431, var(--semantic-token-Badge-432, ${tokens.colorNeutralForeground3}))`,\n ...shorthands.borderColor(tokens.colorNeutralStroke2)\n },\n 'tint-severe': {\n backgroundColor: `var(--ctrl-token-Badge-433, var(--semantic-token-Badge-434, ${tokens.colorPaletteDarkOrangeBackground1}))`,\n color: `var(--ctrl-token-Badge-435, var(--semantic-token-Badge-436, ${tokens.colorPaletteDarkOrangeForeground1}))`,\n ...shorthands.borderColor(tokens.colorPaletteDarkOrangeBorder1)\n },\n 'tint-subtle': {\n backgroundColor: `var(--ctrl-token-Badge-437, var(--semantic-token-Badge-438, ${tokens.colorNeutralBackground1}))`,\n color: `var(--ctrl-token-Badge-439, var(--semantic-token-Badge-440, ${tokens.colorNeutralForeground3}))`,\n ...shorthands.borderColor(tokens.colorNeutralStroke2)\n },\n 'tint-success': {\n backgroundColor: `var(--ctrl-token-Badge-441, var(--semantic-token-Badge-442, ${tokens.colorPaletteGreenBackground1}))`,\n color: `var(--ctrl-token-Badge-443, var(--semantic-token-Badge-444, ${tokens.colorPaletteGreenForeground1}))`,\n ...shorthands.borderColor(tokens.colorPaletteGreenBorder1)\n },\n 'tint-warning': {\n backgroundColor: `var(--ctrl-token-Badge-445, var(--semantic-token-Badge-446, ${tokens.colorPaletteYellowBackground1}))`,\n color: `var(--ctrl-token-Badge-447, var(--semantic-token-Badge-448, ${tokens.colorPaletteYellowForeground1}))`,\n ...shorthands.borderColor(tokens.colorPaletteYellowBorder1)\n }\n});\nconst useIconRootClassName = makeResetStyles({\n display: 'flex',\n lineHeight: '1',\n margin: `0 calc(-1 * ${textPadding})`,\n fontSize: '12px'\n});\nconst useIconStyles = makeStyles({\n beforeText: {\n marginRight: `calc(${tokens.spacingHorizontalXXS} + ${textPadding})`\n },\n afterText: {\n marginLeft: `calc(${tokens.spacingHorizontalXXS} + ${textPadding})`\n },\n beforeTextXL: {\n marginRight: `calc(${tokens.spacingHorizontalXS} + ${textPadding})`\n },\n afterTextXL: {\n marginLeft: `calc(${tokens.spacingHorizontalXS} + ${textPadding})`\n },\n // size\n tiny: {\n fontSize: '6px'\n },\n 'extra-small': {\n fontSize: '10px'\n },\n small: {\n fontSize: '12px'\n },\n medium: {\n },\n large: {\n fontSize: '16px'\n },\n 'extra-large': {\n fontSize: '20px'\n }\n});\n/**\n * Applies style classnames to slots\n */ export const useBadgeStyles_unstable = (state)=>{\n 'use no memo';\n const rootClassName = useRootClassName();\n const rootStyles = useRootStyles();\n const smallToTiny = state.size === 'small' || state.size === 'extra-small' || state.size === 'tiny';\n state.root.className = mergeClasses(badgeClassNames.root, rootClassName, smallToTiny && rootStyles.fontSmallToTiny, rootStyles[state.size], rootStyles[state.shape], state.shape === 'rounded' && smallToTiny && rootStyles.roundedSmallToTiny, state.appearance === 'ghost' && rootStyles.borderGhost, rootStyles[state.appearance], rootStyles[`${state.appearance}-${state.color}`], state.root.className);\n const iconRootClassName = useIconRootClassName();\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 state.icon.className = mergeClasses(badgeClassNames.icon, iconRootClassName, iconPositionClass, iconStyles[state.size], state.icon.className);\n }\n return state;\n};\n"],"names":["badgeClassNames","useBadgeStyles_unstable","root","icon","textPadding","tokens","spacingHorizontalXXS","useRootClassName","__resetStyles","useRootStyles","__styles","fontSmallToTiny","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","tiny","a9b677","Bqenvij","Bf4jedk","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","small","medium","large","square","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","rounded","roundedSmallToTiny","circular","borderGhost","ap17g6","filled","De3pzq","sj55zd","ghost","outline","g2u3we","h3c5rm","B9xav0g","zhjwy3","tint","d","p","useIconRootClassName","useIconStyles","beforeText","t21cq0","afterText","Frg6f3","beforeTextXL","afterTextXL","state","rootClassName","rootStyles","smallToTiny","size","className","mergeClasses","shape","appearance","color","iconRootClassName","iconStyles","iconPositionClass","children","iconPosition"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
1
+ {"version":3,"sources":["useBadgeStyles.styles.js"],"sourcesContent":["import { shorthands, makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nexport const badgeClassNames = {\n root: 'fui-Badge',\n icon: 'fui-Badge__icon'\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;\nconst useRootClassName = makeResetStyles({\n display: 'inline-flex',\n boxSizing: 'border-box',\n alignItems: 'center',\n justifyContent: 'center',\n position: 'relative',\n ...typographyStyles.caption1Strong,\n height: '20px',\n width: '20px',\n minWidth: 'max-content',\n padding: `0 calc(${tokens.spacingHorizontalXS} + ${textPadding})`,\n borderRadius: tokens.borderRadiusCircular,\n // Use a transparent stroke (rather than no border) so the border is visible in high contrast\n borderColor: tokens.colorTransparentStroke,\n '::after': {\n content: '\"\"',\n position: 'absolute',\n top: 0,\n left: 0,\n bottom: 0,\n right: 0,\n borderStyle: 'solid',\n borderColor: 'inherit',\n borderWidth: tokens.strokeWidthThin,\n borderRadius: 'inherit'\n }\n});\nconst useRootStyles = makeStyles({\n fontSmallToTiny: {\n ...typographyStyles.caption2Strong\n },\n // size\n tiny: {\n width: '6px',\n height: '6px',\n fontSize: '4px',\n lineHeight: '4px',\n minWidth: 'unset',\n padding: 'unset'\n },\n 'extra-small': {\n width: '10px',\n height: '10px',\n fontSize: '6px',\n lineHeight: '6px',\n minWidth: 'unset',\n padding: 'unset'\n },\n small: {\n width: '16px',\n height: '16px',\n padding: `0 calc(${tokens.spacingHorizontalXXS} + ${textPadding})`\n },\n medium: {\n },\n large: {\n width: '24px',\n height: '24px',\n padding: `0 calc(${tokens.spacingHorizontalXS} + ${textPadding})`\n },\n 'extra-large': {\n width: '32px',\n height: '32px',\n padding: `0 calc(${tokens.spacingHorizontalSNudge} + ${textPadding})`\n },\n // shape\n square: {\n borderRadius: tokens.borderRadiusNone\n },\n rounded: {\n borderRadius: tokens.borderRadiusMedium\n },\n roundedSmallToTiny: {\n borderRadius: tokens.borderRadiusSmall\n },\n circular: {\n },\n // hide the boder when appearance is \"ghost\"\n borderGhost: {\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 display: 'none'\n }\n },\n // appearance: filled\n filled: {\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 // appearance: ghost\n ghost: {\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 // appearance: outline\n outline: {\n ...shorthands.borderColor('currentColor')\n },\n 'outline-brand': {\n color: tokens.colorBrandForeground1\n },\n 'outline-danger': {\n color: tokens.colorPaletteRedForeground3,\n ...shorthands.borderColor(tokens.colorPaletteRedBorder2)\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.colorPaletteGreenForeground3,\n ...shorthands.borderColor(tokens.colorPaletteGreenBorder2)\n },\n 'outline-warning': {\n color: tokens.colorPaletteYellowForeground2\n },\n // appearance: tint\n tint: {\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.colorPaletteYellowForeground1,\n ...shorthands.borderColor(tokens.colorPaletteYellowBorder1)\n }\n});\nconst useIconRootClassName = makeResetStyles({\n display: 'flex',\n lineHeight: '1',\n margin: `0 calc(-1 * ${textPadding})`,\n fontSize: '12px'\n});\nconst useIconStyles = makeStyles({\n beforeText: {\n marginRight: `calc(${tokens.spacingHorizontalXXS} + ${textPadding})`\n },\n afterText: {\n marginLeft: `calc(${tokens.spacingHorizontalXXS} + ${textPadding})`\n },\n beforeTextXL: {\n marginRight: `calc(${tokens.spacingHorizontalXS} + ${textPadding})`\n },\n afterTextXL: {\n marginLeft: `calc(${tokens.spacingHorizontalXS} + ${textPadding})`\n },\n // size\n tiny: {\n fontSize: '6px'\n },\n 'extra-small': {\n fontSize: '10px'\n },\n small: {\n fontSize: '12px'\n },\n medium: {\n },\n large: {\n fontSize: '16px'\n },\n 'extra-large': {\n fontSize: '20px'\n }\n});\n/**\n * Applies style classnames to slots\n */ export const useBadgeStyles_unstable = (state)=>{\n 'use no memo';\n const rootClassName = useRootClassName();\n const rootStyles = useRootStyles();\n const smallToTiny = state.size === 'small' || state.size === 'extra-small' || state.size === 'tiny';\n state.root.className = mergeClasses(badgeClassNames.root, rootClassName, smallToTiny && rootStyles.fontSmallToTiny, rootStyles[state.size], rootStyles[state.shape], state.shape === 'rounded' && smallToTiny && rootStyles.roundedSmallToTiny, state.appearance === 'ghost' && rootStyles.borderGhost, rootStyles[state.appearance], rootStyles[`${state.appearance}-${state.color}`], state.root.className);\n const iconRootClassName = useIconRootClassName();\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 state.icon.className = mergeClasses(badgeClassNames.icon, iconRootClassName, iconPositionClass, iconStyles[state.size], state.icon.className);\n }\n return state;\n};\n"],"names":["badgeClassNames","useBadgeStyles_unstable","root","icon","textPadding","tokens","spacingHorizontalXXS","useRootClassName","__resetStyles","useRootStyles","__styles","fontSmallToTiny","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","tiny","a9b677","Bqenvij","Bf4jedk","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","small","medium","large","square","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","rounded","roundedSmallToTiny","circular","borderGhost","ap17g6","filled","De3pzq","sj55zd","ghost","outline","g2u3we","h3c5rm","B9xav0g","zhjwy3","tint","d","p","useIconRootClassName","useIconStyles","beforeText","t21cq0","afterText","Frg6f3","beforeTextXL","afterTextXL","state","rootClassName","rootStyles","smallToTiny","size","className","mergeClasses","shape","appearance","color","iconRootClassName","iconStyles","iconPositionClass","children","iconPosition"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
package/lib-commonjs/components/PresenceBadge/usePresenceBadgeStyles.styles.js CHANGED
@@ -27,42 +27,42 @@ const getIsBusy = (status)=>{
27
27
  }
28
28
  return false;
29
29
  };
30
- const useRootClassName = /*#__PURE__*/ (0, _react.__resetStyles)("r16xh2wq", null, [
31
- ".r16xh2wq{display:inline-flex;box-sizing:border-box;align-items:center;justify-content:center;border-radius:var(--ctrl-token-PresenceBadge-449, var(--semantic-token-PresenceBadge-450, var(--borderRadiusCircular)));background-color:var(--ctrl-token-PresenceBadge-451, var(--semantic-token-PresenceBadge-452, var(--colorNeutralBackground1)));padding:1px;background-clip:content-box;}"
30
+ const useRootClassName = /*#__PURE__*/ (0, _react.__resetStyles)("r832ydo", null, [
31
+ ".r832ydo{display:inline-flex;box-sizing:border-box;align-items:center;justify-content:center;border-radius:var(--borderRadiusCircular);background-color:var(--colorNeutralBackground1);padding:1px;background-clip:content-box;}"
32
32
  ]);
33
33
  const useIconClassName = /*#__PURE__*/ (0, _react.__resetStyles)("r11ag4qr", null, [
34
34
  ".r11ag4qr{display:flex;margin:-1px;}"
35
35
  ]);
36
36
  const useStyles = /*#__PURE__*/ (0, _react.__styles)({
37
37
  statusBusy: {
38
- sj55zd: "fjj7m6t"
38
+ sj55zd: "fvi85wt"
39
39
  },
40
40
  statusAway: {
41
- sj55zd: "fp6zxrg"
41
+ sj55zd: "f14k8a89"
42
42
  },
43
43
  statusAvailable: {
44
- sj55zd: "fyr71qh"
44
+ sj55zd: "fqa5hgp"
45
45
  },
46
46
  statusOffline: {
47
- sj55zd: "f1mrss32"
47
+ sj55zd: "f11d4kpn"
48
48
  },
49
49
  statusOutOfOffice: {
50
- sj55zd: "fyh3q86"
50
+ sj55zd: "fdce8r3"
51
51
  },
52
52
  statusUnknown: {
53
- sj55zd: "f1w5nunp"
53
+ sj55zd: "f11d4kpn"
54
54
  },
55
55
  outOfOffice: {
56
- sj55zd: "frj3a8e"
56
+ sj55zd: "fr0bkrk"
57
57
  },
58
58
  outOfOfficeAvailable: {
59
- sj55zd: "fif43yf"
59
+ sj55zd: "fqa5hgp"
60
60
  },
61
61
  outOfOfficeBusy: {
62
- sj55zd: "f9kshtx"
62
+ sj55zd: "fvi85wt"
63
63
  },
64
64
  outOfOfficeUnknown: {
65
- sj55zd: "fizqual"
65
+ sj55zd: "f11d4kpn"
66
66
  },
67
67
  tiny: {
68
68
  Bubjx69: "f9ikmtg",
@@ -85,16 +85,12 @@ const useStyles = /*#__PURE__*/ (0, _react.__styles)({
85
85
  }
86
86
  }, {
87
87
  d: [
88
- ".fjj7m6t{color:var(--ctrl-token-PresenceBadge-453, var(--semantic-token-PresenceBadge-454, var(--colorPaletteRedBackground3)));}",
89
- ".fp6zxrg{color:var(--ctrl-token-PresenceBadge-455, var(--semantic-token-PresenceBadge-456, var(--colorPaletteMarigoldBackground3)));}",
90
- ".fyr71qh{color:var(--ctrl-token-PresenceBadge-457, var(--semantic-token-PresenceBadge-458, var(--colorPaletteLightGreenForeground3)));}",
91
- ".f1mrss32{color:var(--ctrl-token-PresenceBadge-459, var(--semantic-token-PresenceBadge-460, var(--colorNeutralForeground3)));}",
92
- ".fyh3q86{color:var(--ctrl-token-PresenceBadge-461, var(--semantic-token-PresenceBadge-462, var(--colorPaletteBerryForeground3)));}",
93
- ".f1w5nunp{color:var(--ctrl-token-PresenceBadge-463, var(--semantic-token-PresenceBadge-464, var(--colorNeutralForeground3)));}",
94
- ".frj3a8e{color:var(--ctrl-token-PresenceBadge-465, var(--semantic-token-PresenceBadge-466, var(--colorNeutralBackground1)));}",
95
- ".fif43yf{color:var(--ctrl-token-PresenceBadge-467, var(--semantic-token-PresenceBadge-468, var(--colorPaletteLightGreenForeground3)));}",
96
- ".f9kshtx{color:var(--ctrl-token-PresenceBadge-469, var(--semantic-token-PresenceBadge-470, var(--colorPaletteRedBackground3)));}",
97
- ".fizqual{color:var(--ctrl-token-PresenceBadge-471, var(--semantic-token-PresenceBadge-472, var(--colorNeutralForeground3)));}",
88
+ ".fvi85wt{color:var(--colorPaletteRedBackground3);}",
89
+ ".f14k8a89{color:var(--colorPaletteMarigoldBackground3);}",
90
+ ".fqa5hgp{color:var(--colorPaletteLightGreenForeground3);}",
91
+ ".f11d4kpn{color:var(--colorNeutralForeground3);}",
92
+ ".fdce8r3{color:var(--colorPaletteBerryForeground3);}",
93
+ ".fr0bkrk{color:var(--colorNeutralBackground1);}",
98
94
  ".f9ikmtg{aspect-ratio:1;}",
99
95
  ".f16dn6v3{width:6px;}",
100
96
  ".f1w2irj7{background-clip:unset;}",
package/lib-commonjs/components/PresenceBadge/usePresenceBadgeStyles.styles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["usePresenceBadgeStyles.styles.js"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const presenceBadgeClassNames = {\n root: 'fui-PresenceBadge',\n icon: 'fui-PresenceBadge__icon'\n};\nconst getIsBusy = (status)=>{\n if (status === 'busy' || status === 'do-not-disturb' || status === 'blocked') {\n return true;\n }\n return false;\n};\nconst useRootClassName = makeResetStyles({\n display: 'inline-flex',\n boxSizing: 'border-box',\n alignItems: 'center',\n justifyContent: 'center',\n borderRadius: `var(--ctrl-token-PresenceBadge-449, var(--semantic-token-PresenceBadge-450, ${tokens.borderRadiusCircular}))`,\n backgroundColor: `var(--ctrl-token-PresenceBadge-451, var(--semantic-token-PresenceBadge-452, ${tokens.colorNeutralBackground1}))`,\n // The background color bleeds around the edge of the icon due to antialiasing on the svg and element background.\n // Since all presence icons have a border around the edge that is at least 1px wide*, we can inset the background\n // using padding and backgroundClip. The icon has margin: -1px to account for the padding.\n // (* except size=\"tiny\", where backgroundClip is unset)\n padding: '1px',\n backgroundClip: 'content-box'\n});\nconst useIconClassName = makeResetStyles({\n display: 'flex',\n margin: '-1px'\n});\nconst useStyles = makeStyles({\n statusBusy: {\n color: `var(--ctrl-token-PresenceBadge-453, var(--semantic-token-PresenceBadge-454, ${tokens.colorPaletteRedBackground3}))`\n },\n statusAway: {\n color: `var(--ctrl-token-PresenceBadge-455, var(--semantic-token-PresenceBadge-456, ${tokens.colorPaletteMarigoldBackground3}))`\n },\n statusAvailable: {\n color: `var(--ctrl-token-PresenceBadge-457, var(--semantic-token-PresenceBadge-458, ${tokens.colorPaletteLightGreenForeground3}))`\n },\n statusOffline: {\n color: `var(--ctrl-token-PresenceBadge-459, var(--semantic-token-PresenceBadge-460, ${tokens.colorNeutralForeground3}))`\n },\n statusOutOfOffice: {\n color: `var(--ctrl-token-PresenceBadge-461, var(--semantic-token-PresenceBadge-462, ${tokens.colorPaletteBerryForeground3}))`\n },\n statusUnknown: {\n color: `var(--ctrl-token-PresenceBadge-463, var(--semantic-token-PresenceBadge-464, ${tokens.colorNeutralForeground3}))`\n },\n outOfOffice: {\n color: `var(--ctrl-token-PresenceBadge-465, var(--semantic-token-PresenceBadge-466, ${tokens.colorNeutralBackground1}))`\n },\n outOfOfficeAvailable: {\n color: `var(--ctrl-token-PresenceBadge-467, var(--semantic-token-PresenceBadge-468, ${tokens.colorPaletteLightGreenForeground3}))`\n },\n outOfOfficeBusy: {\n color: `var(--ctrl-token-PresenceBadge-469, var(--semantic-token-PresenceBadge-470, ${tokens.colorPaletteRedBackground3}))`\n },\n outOfOfficeUnknown: {\n color: `var(--ctrl-token-PresenceBadge-471, var(--semantic-token-PresenceBadge-472, ${tokens.colorNeutralForeground3}))`\n },\n // Icons are not resizeable, and these sizes are currently missing\n // use `!important` to size the currently available icons to the missing ones\n //\n tiny: {\n aspectRatio: '1',\n width: '6px',\n backgroundClip: 'unset',\n '& svg': {\n width: '6px !important',\n height: '6px !important'\n }\n },\n large: {\n aspectRatio: '1',\n width: '20px',\n '& svg': {\n width: '20px !important',\n height: '20px !important'\n }\n },\n extraLarge: {\n aspectRatio: '1',\n width: '28px',\n '& svg': {\n width: '28px !important',\n height: '28px !important'\n }\n }\n});\n/**\n * Applies style classnames to slots\n */ export const usePresenceBadgeStyles_unstable = (state)=>{\n 'use no memo';\n const rootClassName = useRootClassName();\n const iconClassName = useIconClassName();\n const styles = useStyles();\n const isBusy = getIsBusy(state.status);\n state.root.className = mergeClasses(presenceBadgeClassNames.root, rootClassName, isBusy && styles.statusBusy, state.status === 'away' && styles.statusAway, state.status === 'available' && styles.statusAvailable, state.status === 'offline' && styles.statusOffline, state.status === 'out-of-office' && styles.statusOutOfOffice, state.status === 'unknown' && styles.statusUnknown, state.outOfOffice && styles.outOfOffice, state.outOfOffice && state.status === 'available' && styles.outOfOfficeAvailable, state.outOfOffice && isBusy && styles.outOfOfficeBusy, state.outOfOffice && (state.status === 'out-of-office' || state.status === 'away' || state.status === 'offline') && styles.statusOutOfOffice, state.outOfOffice && state.status === 'unknown' && styles.outOfOfficeUnknown, state.size === 'tiny' && styles.tiny, state.size === 'large' && styles.large, state.size === 'extra-large' && styles.extraLarge, state.root.className);\n if (state.icon) {\n state.icon.className = mergeClasses(presenceBadgeClassNames.icon, iconClassName, state.icon.className);\n }\n return state;\n};\n"],"names":["presenceBadgeClassNames","usePresenceBadgeStyles_unstable","root","icon","getIsBusy","status","useRootClassName","__resetStyles","useIconClassName","useStyles","__styles","statusBusy","sj55zd","statusAway","statusAvailable","statusOffline","statusOutOfOffice","statusUnknown","outOfOffice","outOfOfficeAvailable","outOfOfficeBusy","outOfOfficeUnknown","tiny","Bubjx69","a9b677","B2eet1l","B5pe6w7","p4uzdd","large","extraLarge","d","state","rootClassName","iconClassName","styles","isBusy","className","mergeClasses","size"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
1
+ {"version":3,"sources":["usePresenceBadgeStyles.styles.js"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const presenceBadgeClassNames = {\n root: 'fui-PresenceBadge',\n icon: 'fui-PresenceBadge__icon'\n};\nconst getIsBusy = (status)=>{\n if (status === 'busy' || status === 'do-not-disturb' || status === 'blocked') {\n return true;\n }\n return false;\n};\nconst useRootClassName = makeResetStyles({\n display: 'inline-flex',\n boxSizing: 'border-box',\n alignItems: 'center',\n justifyContent: 'center',\n borderRadius: tokens.borderRadiusCircular,\n backgroundColor: tokens.colorNeutralBackground1,\n // The background color bleeds around the edge of the icon due to antialiasing on the svg and element background.\n // Since all presence icons have a border around the edge that is at least 1px wide*, we can inset the background\n // using padding and backgroundClip. The icon has margin: -1px to account for the padding.\n // (* except size=\"tiny\", where backgroundClip is unset)\n padding: '1px',\n backgroundClip: 'content-box'\n});\nconst useIconClassName = makeResetStyles({\n display: 'flex',\n margin: '-1px'\n});\nconst useStyles = makeStyles({\n statusBusy: {\n color: tokens.colorPaletteRedBackground3\n },\n statusAway: {\n color: tokens.colorPaletteMarigoldBackground3\n },\n statusAvailable: {\n color: tokens.colorPaletteLightGreenForeground3\n },\n statusOffline: {\n color: tokens.colorNeutralForeground3\n },\n statusOutOfOffice: {\n color: tokens.colorPaletteBerryForeground3\n },\n statusUnknown: {\n color: tokens.colorNeutralForeground3\n },\n outOfOffice: {\n color: tokens.colorNeutralBackground1\n },\n outOfOfficeAvailable: {\n color: tokens.colorPaletteLightGreenForeground3\n },\n outOfOfficeBusy: {\n color: tokens.colorPaletteRedBackground3\n },\n outOfOfficeUnknown: {\n color: tokens.colorNeutralForeground3\n },\n // Icons are not resizeable, and these sizes are currently missing\n // use `!important` to size the currently available icons to the missing ones\n //\n tiny: {\n aspectRatio: '1',\n width: '6px',\n backgroundClip: 'unset',\n '& svg': {\n width: '6px !important',\n height: '6px !important'\n }\n },\n large: {\n aspectRatio: '1',\n width: '20px',\n '& svg': {\n width: '20px !important',\n height: '20px !important'\n }\n },\n extraLarge: {\n aspectRatio: '1',\n width: '28px',\n '& svg': {\n width: '28px !important',\n height: '28px !important'\n }\n }\n});\n/**\n * Applies style classnames to slots\n */ export const usePresenceBadgeStyles_unstable = (state)=>{\n 'use no memo';\n const rootClassName = useRootClassName();\n const iconClassName = useIconClassName();\n const styles = useStyles();\n const isBusy = getIsBusy(state.status);\n state.root.className = mergeClasses(presenceBadgeClassNames.root, rootClassName, isBusy && styles.statusBusy, state.status === 'away' && styles.statusAway, state.status === 'available' && styles.statusAvailable, state.status === 'offline' && styles.statusOffline, state.status === 'out-of-office' && styles.statusOutOfOffice, state.status === 'unknown' && styles.statusUnknown, state.outOfOffice && styles.outOfOffice, state.outOfOffice && state.status === 'available' && styles.outOfOfficeAvailable, state.outOfOffice && isBusy && styles.outOfOfficeBusy, state.outOfOffice && (state.status === 'out-of-office' || state.status === 'away' || state.status === 'offline') && styles.statusOutOfOffice, state.outOfOffice && state.status === 'unknown' && styles.outOfOfficeUnknown, state.size === 'tiny' && styles.tiny, state.size === 'large' && styles.large, state.size === 'extra-large' && styles.extraLarge, state.root.className);\n if (state.icon) {\n state.icon.className = mergeClasses(presenceBadgeClassNames.icon, iconClassName, state.icon.className);\n }\n return state;\n};\n"],"names":["presenceBadgeClassNames","usePresenceBadgeStyles_unstable","root","icon","getIsBusy","status","useRootClassName","__resetStyles","useIconClassName","useStyles","__styles","statusBusy","sj55zd","statusAway","statusAvailable","statusOffline","statusOutOfOffice","statusUnknown","outOfOffice","outOfOfficeAvailable","outOfOfficeBusy","outOfOfficeUnknown","tiny","Bubjx69","a9b677","B2eet1l","B5pe6w7","p4uzdd","large","extraLarge","d","state","rootClassName","iconClassName","styles","isBusy","className","mergeClasses","size"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@fluentui/react-badge",
3
- "version": "0.0.0-nightly-20240819-2137.1",
3
+ "version": "0.0.0-nightly-20240822-0407.1",
4
4
  "description": "React components for building web experiences",
5
5
  "main": "lib-commonjs/index.js",
6
6
  "module": "lib/index.js",
@@ -26,17 +26,17 @@
26
26
  },
27
27
  "devDependencies": {
28
28
  "@fluentui/eslint-plugin": "*",
29
- "@fluentui/react-conformance": "0.0.0-nightly-20240819-2137.1",
30
- "@fluentui/react-conformance-griffel": "0.0.0-nightly-20240819-2137.1",
29
+ "@fluentui/react-conformance": "0.0.0-nightly-20240822-0407.1",
30
+ "@fluentui/react-conformance-griffel": "0.0.0-nightly-20240822-0407.1",
31
31
  "@fluentui/scripts-api-extractor": "*",
32
32
  "@fluentui/scripts-tasks": "*"
33
33
  },
34
34
  "dependencies": {
35
35
  "@fluentui/react-icons": "^2.0.245",
36
- "@fluentui/react-jsx-runtime": "0.0.0-nightly-20240819-2137.1",
37
- "@fluentui/react-shared-contexts": "0.0.0-nightly-20240819-2137.1",
38
- "@fluentui/react-theme": "0.0.0-nightly-20240819-2137.1",
39
- "@fluentui/react-utilities": "0.0.0-nightly-20240819-2137.1",
36
+ "@fluentui/react-jsx-runtime": "0.0.0-nightly-20240822-0407.1",
37
+ "@fluentui/react-shared-contexts": "0.0.0-nightly-20240822-0407.1",
38
+ "@fluentui/react-theme": "0.0.0-nightly-20240822-0407.1",
39
+ "@fluentui/react-utilities": "0.0.0-nightly-20240822-0407.1",
40
40
  "@griffel/react": "^1.5.22",
41
41
  "@swc/helpers": "^0.5.1"
42
42
  },