@fluentui/react-badge 0.0.0-nightly-20240819-2137.1 → 0.0.0-nightly-20240820-2210.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.
- package/CHANGELOG.md +10 -10
- package/lib/components/Badge/useBadgeStyles.styles.js +56 -56
- package/lib/components/Badge/useBadgeStyles.styles.js.map +1 -1
- package/lib/components/PresenceBadge/usePresenceBadgeStyles.styles.js +12 -12
- package/lib/components/PresenceBadge/usePresenceBadgeStyles.styles.js.map +1 -1
- package/lib-commonjs/components/Badge/useBadgeStyles.styles.js +107 -107
- package/lib-commonjs/components/Badge/useBadgeStyles.styles.js.map +1 -1
- package/lib-commonjs/components/PresenceBadge/usePresenceBadgeStyles.styles.js +22 -22
- package/lib-commonjs/components/PresenceBadge/usePresenceBadgeStyles.styles.js.map +1 -1
- 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
|
|
3
|
+
This log was last generated on Tue, 20 Aug 2024 22:15:03 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
-
## [0.0.0-nightly-
|
|
7
|
+
## [0.0.0-nightly-20240820-2210.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-badge_v0.0.0-nightly-20240820-2210.1)
|
|
8
8
|
|
|
9
|
-
|
|
10
|
-
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-badge_v9.2.41..@fluentui/react-badge_v0.0.0-nightly-
|
|
9
|
+
Tue, 20 Aug 2024 22:15:03 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-badge_v9.2.41..@fluentui/react-badge_v0.0.0-nightly-20240820-2210.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-
|
|
16
|
-
- Bump @fluentui/react-shared-contexts to v0.0.0-nightly-
|
|
17
|
-
- Bump @fluentui/react-theme to v0.0.0-nightly-
|
|
18
|
-
- Bump @fluentui/react-utilities to v0.0.0-nightly-
|
|
19
|
-
- Bump @fluentui/react-conformance to v0.0.0-nightly-
|
|
20
|
-
- Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-
|
|
15
|
+
- Bump @fluentui/react-jsx-runtime to v0.0.0-nightly-20240820-2210.1 ([commit](https://github.com/microsoft/fluentui/commit/d2c24a363450afb0fe5172e63aa435770d001e9e) by beachball)
|
|
16
|
+
- Bump @fluentui/react-shared-contexts to v0.0.0-nightly-20240820-2210.1 ([commit](https://github.com/microsoft/fluentui/commit/d2c24a363450afb0fe5172e63aa435770d001e9e) by beachball)
|
|
17
|
+
- Bump @fluentui/react-theme to v0.0.0-nightly-20240820-2210.1 ([commit](https://github.com/microsoft/fluentui/commit/d2c24a363450afb0fe5172e63aa435770d001e9e) by beachball)
|
|
18
|
+
- Bump @fluentui/react-utilities to v0.0.0-nightly-20240820-2210.1 ([commit](https://github.com/microsoft/fluentui/commit/d2c24a363450afb0fe5172e63aa435770d001e9e) by beachball)
|
|
19
|
+
- Bump @fluentui/react-conformance to v0.0.0-nightly-20240820-2210.1 ([commit](https://github.com/microsoft/fluentui/commit/d2c24a363450afb0fe5172e63aa435770d001e9e) by beachball)
|
|
20
|
+
- Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20240820-2210.1 ([commit](https://github.com/microsoft/fluentui/commit/d2c24a363450afb0fe5172e63aa435770d001e9e) by beachball)
|
|
21
21
|
|
|
22
22
|
## [9.2.41](https://github.com/microsoft/fluentui/tree/@fluentui/react-badge_v9.2.41)
|
|
23
23
|
|
|
@@ -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("
|
|
10
|
+
const useRootClassName = /*#__PURE__*/__resetStyles("r10nfv4h", "ruauajt", [".r10nfv4h{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(--341, var(--342, var(--borderRadiusCircular)));border-color:var(--343, var(--344, var(--colorTransparentStroke)));}", ".r10nfv4h::after{content:\"\";position:absolute;top:0;left:0;bottom:0;right:0;border-style:solid;border-color:inherit;border-width:var(--345, var(--346, var(--strokeWidthThin)));border-radius:inherit;}", ".ruauajt{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(--341, var(--342, var(--borderRadiusCircular)));border-color:var(--343, var(--344, var(--colorTransparentStroke)));}", ".ruauajt::after{content:\"\";position:absolute;top:0;right:0;bottom:0;left:0;border-style:solid;border-color:inherit;border-width:var(--345, var(--346, 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: "
|
|
75
|
+
Dimara: "fai50ut"
|
|
76
76
|
},
|
|
77
77
|
rounded: {
|
|
78
78
|
Beyfa6y: 0,
|
|
79
79
|
Bbmb7ep: 0,
|
|
80
80
|
Btl43ni: 0,
|
|
81
81
|
B7oj6ja: 0,
|
|
82
|
-
Dimara: "
|
|
82
|
+
Dimara: "f1e5tea3"
|
|
83
83
|
},
|
|
84
84
|
roundedSmallToTiny: {
|
|
85
85
|
Beyfa6y: 0,
|
|
86
86
|
Bbmb7ep: 0,
|
|
87
87
|
Btl43ni: 0,
|
|
88
88
|
B7oj6ja: 0,
|
|
89
|
-
Dimara: "
|
|
89
|
+
Dimara: "f1mplvw1"
|
|
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: "
|
|
98
|
-
sj55zd: "
|
|
97
|
+
De3pzq: "f19hwuml",
|
|
98
|
+
sj55zd: "f7ou5un"
|
|
99
99
|
},
|
|
100
100
|
"filled-danger": {
|
|
101
|
-
De3pzq: "
|
|
102
|
-
sj55zd: "
|
|
101
|
+
De3pzq: "frr1ynz",
|
|
102
|
+
sj55zd: "fs397sr"
|
|
103
103
|
},
|
|
104
104
|
"filled-important": {
|
|
105
|
-
De3pzq: "
|
|
106
|
-
sj55zd: "
|
|
105
|
+
De3pzq: "f1vkul9e",
|
|
106
|
+
sj55zd: "f10deorr"
|
|
107
107
|
},
|
|
108
108
|
"filled-informative": {
|
|
109
|
-
De3pzq: "
|
|
110
|
-
sj55zd: "
|
|
109
|
+
De3pzq: "f12mr7aq",
|
|
110
|
+
sj55zd: "fc1lalz"
|
|
111
111
|
},
|
|
112
112
|
"filled-severe": {
|
|
113
|
-
De3pzq: "
|
|
114
|
-
sj55zd: "
|
|
113
|
+
De3pzq: "fso1mzb",
|
|
114
|
+
sj55zd: "f1apyimk"
|
|
115
115
|
},
|
|
116
116
|
"filled-subtle": {
|
|
117
|
-
De3pzq: "
|
|
118
|
-
sj55zd: "
|
|
117
|
+
De3pzq: "f1570tmq",
|
|
118
|
+
sj55zd: "f1ih66gz"
|
|
119
119
|
},
|
|
120
120
|
"filled-success": {
|
|
121
|
-
De3pzq: "
|
|
122
|
-
sj55zd: "
|
|
121
|
+
De3pzq: "f1xvu00u",
|
|
122
|
+
sj55zd: "f1a2a3s"
|
|
123
123
|
},
|
|
124
124
|
"filled-warning": {
|
|
125
|
-
De3pzq: "
|
|
126
|
-
sj55zd: "
|
|
125
|
+
De3pzq: "fopv15x",
|
|
126
|
+
sj55zd: "fyehek6"
|
|
127
127
|
},
|
|
128
128
|
ghost: {},
|
|
129
129
|
"ghost-brand": {
|
|
130
|
-
sj55zd: "
|
|
130
|
+
sj55zd: "fapxi05"
|
|
131
131
|
},
|
|
132
132
|
"ghost-danger": {
|
|
133
|
-
sj55zd: "
|
|
133
|
+
sj55zd: "fr2bi5m"
|
|
134
134
|
},
|
|
135
135
|
"ghost-important": {
|
|
136
|
-
sj55zd: "
|
|
136
|
+
sj55zd: "fkcwhv5"
|
|
137
137
|
},
|
|
138
138
|
"ghost-informative": {
|
|
139
|
-
sj55zd: "
|
|
139
|
+
sj55zd: "f1m2rgkd"
|
|
140
140
|
},
|
|
141
141
|
"ghost-severe": {
|
|
142
|
-
sj55zd: "
|
|
142
|
+
sj55zd: "f9r2fi"
|
|
143
143
|
},
|
|
144
144
|
"ghost-subtle": {
|
|
145
|
-
sj55zd: "
|
|
145
|
+
sj55zd: "f18ujb"
|
|
146
146
|
},
|
|
147
147
|
"ghost-success": {
|
|
148
|
-
sj55zd: "
|
|
148
|
+
sj55zd: "f1ip27zr"
|
|
149
149
|
},
|
|
150
150
|
"ghost-warning": {
|
|
151
|
-
sj55zd: "
|
|
151
|
+
sj55zd: "f1g3245m"
|
|
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: "
|
|
160
|
+
sj55zd: "f18fr6fe"
|
|
161
161
|
},
|
|
162
162
|
"outline-danger": {
|
|
163
|
-
sj55zd: "
|
|
163
|
+
sj55zd: "febqro7",
|
|
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: "
|
|
170
|
+
sj55zd: "ffs1hx6",
|
|
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: "
|
|
177
|
+
sj55zd: "f13yqyjw",
|
|
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: "
|
|
184
|
+
sj55zd: "f1ckjb0u"
|
|
185
185
|
},
|
|
186
186
|
"outline-subtle": {
|
|
187
|
-
sj55zd: "
|
|
187
|
+
sj55zd: "f12iazmu"
|
|
188
188
|
},
|
|
189
189
|
"outline-success": {
|
|
190
|
-
sj55zd: "
|
|
190
|
+
sj55zd: "f1sja6nl",
|
|
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: "
|
|
197
|
+
sj55zd: "f867xiw"
|
|
198
198
|
},
|
|
199
199
|
tint: {},
|
|
200
200
|
"tint-brand": {
|
|
201
|
-
De3pzq: "
|
|
202
|
-
sj55zd: "
|
|
201
|
+
De3pzq: "f146wntt",
|
|
202
|
+
sj55zd: "f1bfvynb",
|
|
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: "
|
|
210
|
-
sj55zd: "
|
|
209
|
+
De3pzq: "f1j7js5g",
|
|
210
|
+
sj55zd: "f88p1ow",
|
|
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: "
|
|
218
|
-
sj55zd: "
|
|
217
|
+
De3pzq: "fevsi08",
|
|
218
|
+
sj55zd: "foodvkd",
|
|
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: "
|
|
226
|
-
sj55zd: "
|
|
225
|
+
De3pzq: "f13o4ny3",
|
|
226
|
+
sj55zd: "f1kyw6sm",
|
|
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: "
|
|
234
|
-
sj55zd: "
|
|
233
|
+
De3pzq: "fdxi31b",
|
|
234
|
+
sj55zd: "f1le075t",
|
|
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: "
|
|
242
|
-
sj55zd: "
|
|
241
|
+
De3pzq: "f1f72teq",
|
|
242
|
+
sj55zd: "f76hxaz",
|
|
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: "
|
|
250
|
-
sj55zd: "
|
|
249
|
+
De3pzq: "f1xeb5ba",
|
|
250
|
+
sj55zd: "f17js1cg",
|
|
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: "
|
|
258
|
-
sj55zd: "
|
|
257
|
+
De3pzq: "f1wkb02k",
|
|
258
|
+
sj55zd: "f5u1fiz",
|
|
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
|
-
}], [".
|
|
275
|
+
}], [".fai50ut{border-radius:var(--347, var(--348, var(--borderRadiusNone)));}", {
|
|
276
276
|
p: -1
|
|
277
|
-
}], [".
|
|
277
|
+
}], [".f1e5tea3{border-radius:var(--349, var(--350, var(--borderRadiusMedium)));}", {
|
|
278
278
|
p: -1
|
|
279
|
-
}], [".
|
|
279
|
+
}], [".f1mplvw1{border-radius:var(--351, var(--352, var(--borderRadiusSmall)));}", {
|
|
280
280
|
p: -1
|
|
281
|
-
}], ".f10ludwy::after{display:none;}", ".
|
|
281
|
+
}], ".f10ludwy::after{display:none;}", ".f19hwuml{background-color:var(--353, var(--354, var(--colorBrandBackground)));}", ".f7ou5un{color:var(--355, var(--356, var(--colorNeutralForegroundOnBrand)));}", ".frr1ynz{background-color:var(--357, var(--358, var(--colorPaletteRedBackground3)));}", ".fs397sr{color:var(--359, var(--360, var(--colorNeutralForegroundOnBrand)));}", ".f1vkul9e{background-color:var(--361, var(--362, var(--colorNeutralForeground1)));}", ".f10deorr{color:var(--363, var(--364, var(--colorNeutralBackground1)));}", ".f12mr7aq{background-color:var(--365, var(--366, var(--colorNeutralBackground5)));}", ".fc1lalz{color:var(--367, var(--368, var(--colorNeutralForeground3)));}", ".fso1mzb{background-color:var(--369, var(--370, var(--colorPaletteDarkOrangeBackground3)));}", ".f1apyimk{color:var(--371, var(--372, var(--colorNeutralForegroundOnBrand)));}", ".f1570tmq{background-color:var(--373, var(--374, var(--colorNeutralBackground1)));}", ".f1ih66gz{color:var(--375, var(--376, var(--colorNeutralForeground1)));}", ".f1xvu00u{background-color:var(--377, var(--378, var(--colorPaletteGreenBackground3)));}", ".f1a2a3s{color:var(--379, var(--380, var(--colorNeutralForegroundOnBrand)));}", ".fopv15x{background-color:var(--381, var(--382, var(--colorPaletteYellowBackground3)));}", ".fyehek6{color:var(--383, var(--384, var(--colorNeutralForeground1Static)));}", ".fapxi05{color:var(--385, var(--386, var(--colorBrandForeground1)));}", ".fr2bi5m{color:var(--387, var(--388, var(--colorPaletteRedForeground3)));}", ".fkcwhv5{color:var(--389, var(--390, var(--colorNeutralForeground1)));}", ".f1m2rgkd{color:var(--391, var(--392, var(--colorNeutralForeground3)));}", ".f9r2fi{color:var(--393, var(--394, var(--colorPaletteDarkOrangeForeground3)));}", ".f18ujb{color:var(--395, var(--396, var(--colorNeutralForegroundStaticInverted)));}", ".f1ip27zr{color:var(--397, var(--398, var(--colorPaletteGreenForeground3)));}", ".f1g3245m{color:var(--399, var(--400, var(--colorPaletteYellowForeground2)));}", ".f23ftbb{border-top-color:currentColor;}", ".f1gkuv52{border-right-color:currentColor;}", ".f1p1bl80{border-left-color:currentColor;}", ".fioka3i{border-bottom-color:currentColor;}", ".f18fr6fe{color:var(--401, var(--402, var(--colorBrandForeground1)));}", ".febqro7{color:var(--403, var(--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);}", ".ffs1hx6{color:var(--405, var(--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);}", ".f13yqyjw{color:var(--407, var(--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);}", ".f1ckjb0u{color:var(--409, var(--410, var(--colorPaletteDarkOrangeForeground3)));}", ".f12iazmu{color:var(--411, var(--412, var(--colorNeutralForegroundStaticInverted)));}", ".f1sja6nl{color:var(--413, var(--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);}", ".f867xiw{color:var(--415, var(--416, var(--colorPaletteYellowForeground2)));}", ".f146wntt{background-color:var(--417, var(--418, var(--colorBrandBackground2)));}", ".f1bfvynb{color:var(--419, var(--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);}", ".f1j7js5g{background-color:var(--421, var(--422, var(--colorPaletteRedBackground1)));}", ".f88p1ow{color:var(--423, var(--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);}", ".fevsi08{background-color:var(--425, var(--426, var(--colorNeutralForeground3)));}", ".foodvkd{color:var(--427, var(--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);}", ".f13o4ny3{background-color:var(--429, var(--430, var(--colorNeutralBackground4)));}", ".f1kyw6sm{color:var(--431, var(--432, var(--colorNeutralForeground3)));}", ".fdxi31b{background-color:var(--433, var(--434, var(--colorPaletteDarkOrangeBackground1)));}", ".f1le075t{color:var(--435, var(--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);}", ".f1f72teq{background-color:var(--437, var(--438, var(--colorNeutralBackground1)));}", ".f76hxaz{color:var(--439, var(--440, var(--colorNeutralForeground3)));}", ".f1xeb5ba{background-color:var(--441, var(--442, var(--colorPaletteGreenBackground1)));}", ".f17js1cg{color:var(--443, var(--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);}", ".f1wkb02k{background-color:var(--445, var(--446, var(--colorPaletteYellowBackground1)));}", ".f5u1fiz{color:var(--447, var(--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);}"]
|
|
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({
|
|
@@ -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: `var(--341, var(--342, ${tokens.borderRadiusCircular}))`,\n // Use a transparent stroke (rather than no border) so the border is visible in high contrast\n borderColor: `var(--343, var(--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(--345, var(--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(--347, var(--348, ${tokens.borderRadiusNone}))`\n },\n rounded: {\n borderRadius: `var(--349, var(--350, ${tokens.borderRadiusMedium}))`\n },\n roundedSmallToTiny: {\n borderRadius: `var(--351, var(--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(--353, var(--354, ${tokens.colorBrandBackground}))`,\n color: `var(--355, var(--356, ${tokens.colorNeutralForegroundOnBrand}))`\n },\n 'filled-danger': {\n backgroundColor: `var(--357, var(--358, ${tokens.colorPaletteRedBackground3}))`,\n color: `var(--359, var(--360, ${tokens.colorNeutralForegroundOnBrand}))`\n },\n 'filled-important': {\n backgroundColor: `var(--361, var(--362, ${tokens.colorNeutralForeground1}))`,\n color: `var(--363, var(--364, ${tokens.colorNeutralBackground1}))`\n },\n 'filled-informative': {\n backgroundColor: `var(--365, var(--366, ${tokens.colorNeutralBackground5}))`,\n color: `var(--367, var(--368, ${tokens.colorNeutralForeground3}))`\n },\n 'filled-severe': {\n backgroundColor: `var(--369, var(--370, ${tokens.colorPaletteDarkOrangeBackground3}))`,\n color: `var(--371, var(--372, ${tokens.colorNeutralForegroundOnBrand}))`\n },\n 'filled-subtle': {\n backgroundColor: `var(--373, var(--374, ${tokens.colorNeutralBackground1}))`,\n color: `var(--375, var(--376, ${tokens.colorNeutralForeground1}))`\n },\n 'filled-success': {\n backgroundColor: `var(--377, var(--378, ${tokens.colorPaletteGreenBackground3}))`,\n color: `var(--379, var(--380, ${tokens.colorNeutralForegroundOnBrand}))`\n },\n 'filled-warning': {\n backgroundColor: `var(--381, var(--382, ${tokens.colorPaletteYellowBackground3}))`,\n color: `var(--383, var(--384, ${tokens.colorNeutralForeground1Static}))`\n },\n // appearance: ghost\n ghost: {\n },\n 'ghost-brand': {\n color: `var(--385, var(--386, ${tokens.colorBrandForeground1}))`\n },\n 'ghost-danger': {\n color: `var(--387, var(--388, ${tokens.colorPaletteRedForeground3}))`\n },\n 'ghost-important': {\n color: `var(--389, var(--390, ${tokens.colorNeutralForeground1}))`\n },\n 'ghost-informative': {\n color: `var(--391, var(--392, ${tokens.colorNeutralForeground3}))`\n },\n 'ghost-severe': {\n color: `var(--393, var(--394, ${tokens.colorPaletteDarkOrangeForeground3}))`\n },\n 'ghost-subtle': {\n color: `var(--395, var(--396, ${tokens.colorNeutralForegroundStaticInverted}))`\n },\n 'ghost-success': {\n color: `var(--397, var(--398, ${tokens.colorPaletteGreenForeground3}))`\n },\n 'ghost-warning': {\n color: `var(--399, var(--400, ${tokens.colorPaletteYellowForeground2}))`\n },\n // appearance: outline\n outline: {\n ...shorthands.borderColor('currentColor')\n },\n 'outline-brand': {\n color: `var(--401, var(--402, ${tokens.colorBrandForeground1}))`\n },\n 'outline-danger': {\n color: `var(--403, var(--404, ${tokens.colorPaletteRedForeground3}))`,\n ...shorthands.borderColor(tokens.colorPaletteRedBorder2)\n },\n 'outline-important': {\n color: `var(--405, var(--406, ${tokens.colorNeutralForeground3}))`,\n ...shorthands.borderColor(tokens.colorNeutralStrokeAccessible)\n },\n 'outline-informative': {\n color: `var(--407, var(--408, ${tokens.colorNeutralForeground3}))`,\n ...shorthands.borderColor(tokens.colorNeutralStroke2)\n },\n 'outline-severe': {\n color: `var(--409, var(--410, ${tokens.colorPaletteDarkOrangeForeground3}))`\n },\n 'outline-subtle': {\n color: `var(--411, var(--412, ${tokens.colorNeutralForegroundStaticInverted}))`\n },\n 'outline-success': {\n color: `var(--413, var(--414, ${tokens.colorPaletteGreenForeground3}))`,\n ...shorthands.borderColor(tokens.colorPaletteGreenBorder2)\n },\n 'outline-warning': {\n color: `var(--415, var(--416, ${tokens.colorPaletteYellowForeground2}))`\n },\n // appearance: tint\n tint: {\n },\n 'tint-brand': {\n backgroundColor: `var(--417, var(--418, ${tokens.colorBrandBackground2}))`,\n color: `var(--419, var(--420, ${tokens.colorBrandForeground2}))`,\n ...shorthands.borderColor(tokens.colorBrandStroke2)\n },\n 'tint-danger': {\n backgroundColor: `var(--421, var(--422, ${tokens.colorPaletteRedBackground1}))`,\n color: `var(--423, var(--424, ${tokens.colorPaletteRedForeground1}))`,\n ...shorthands.borderColor(tokens.colorPaletteRedBorder1)\n },\n 'tint-important': {\n backgroundColor: `var(--425, var(--426, ${tokens.colorNeutralForeground3}))`,\n color: `var(--427, var(--428, ${tokens.colorNeutralBackground1}))`,\n ...shorthands.borderColor(tokens.colorTransparentStroke)\n },\n 'tint-informative': {\n backgroundColor: `var(--429, var(--430, ${tokens.colorNeutralBackground4}))`,\n color: `var(--431, var(--432, ${tokens.colorNeutralForeground3}))`,\n ...shorthands.borderColor(tokens.colorNeutralStroke2)\n },\n 'tint-severe': {\n backgroundColor: `var(--433, var(--434, ${tokens.colorPaletteDarkOrangeBackground1}))`,\n color: `var(--435, var(--436, ${tokens.colorPaletteDarkOrangeForeground1}))`,\n ...shorthands.borderColor(tokens.colorPaletteDarkOrangeBorder1)\n },\n 'tint-subtle': {\n backgroundColor: `var(--437, var(--438, ${tokens.colorNeutralBackground1}))`,\n color: `var(--439, var(--440, ${tokens.colorNeutralForeground3}))`,\n ...shorthands.borderColor(tokens.colorNeutralStroke2)\n },\n 'tint-success': {\n backgroundColor: `var(--441, var(--442, ${tokens.colorPaletteGreenBackground1}))`,\n color: `var(--443, var(--444, ${tokens.colorPaletteGreenForeground1}))`,\n ...shorthands.borderColor(tokens.colorPaletteGreenBorder1)\n },\n 'tint-warning': {\n backgroundColor: `var(--445, var(--446, ${tokens.colorPaletteYellowBackground1}))`,\n color: `var(--447, var(--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":[]}
|
|
@@ -10,38 +10,38 @@ const getIsBusy = status => {
|
|
|
10
10
|
}
|
|
11
11
|
return false;
|
|
12
12
|
};
|
|
13
|
-
const useRootClassName = /*#__PURE__*/__resetStyles("
|
|
13
|
+
const useRootClassName = /*#__PURE__*/__resetStyles("r1711c1n", null, [".r1711c1n{display:inline-flex;box-sizing:border-box;align-items:center;justify-content:center;border-radius:var(--449, var(--450, var(--borderRadiusCircular)));background-color:var(--451, var(--452, 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: "
|
|
17
|
+
sj55zd: "f12aalvp"
|
|
18
18
|
},
|
|
19
19
|
statusAway: {
|
|
20
|
-
sj55zd: "
|
|
20
|
+
sj55zd: "f10owiir"
|
|
21
21
|
},
|
|
22
22
|
statusAvailable: {
|
|
23
|
-
sj55zd: "
|
|
23
|
+
sj55zd: "fahcler"
|
|
24
24
|
},
|
|
25
25
|
statusOffline: {
|
|
26
|
-
sj55zd: "
|
|
26
|
+
sj55zd: "f11odu81"
|
|
27
27
|
},
|
|
28
28
|
statusOutOfOffice: {
|
|
29
|
-
sj55zd: "
|
|
29
|
+
sj55zd: "f1ovxq8r"
|
|
30
30
|
},
|
|
31
31
|
statusUnknown: {
|
|
32
|
-
sj55zd: "
|
|
32
|
+
sj55zd: "f16r53qq"
|
|
33
33
|
},
|
|
34
34
|
outOfOffice: {
|
|
35
|
-
sj55zd: "
|
|
35
|
+
sj55zd: "f1lneuuo"
|
|
36
36
|
},
|
|
37
37
|
outOfOfficeAvailable: {
|
|
38
|
-
sj55zd: "
|
|
38
|
+
sj55zd: "f187kc00"
|
|
39
39
|
},
|
|
40
40
|
outOfOfficeBusy: {
|
|
41
|
-
sj55zd: "
|
|
41
|
+
sj55zd: "f1vz3tl8"
|
|
42
42
|
},
|
|
43
43
|
outOfOfficeUnknown: {
|
|
44
|
-
sj55zd: "
|
|
44
|
+
sj55zd: "f13mef6d"
|
|
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: [".
|
|
66
|
+
d: [".f12aalvp{color:var(--453, var(--454, var(--colorPaletteRedBackground3)));}", ".f10owiir{color:var(--455, var(--456, var(--colorPaletteMarigoldBackground3)));}", ".fahcler{color:var(--457, var(--458, var(--colorPaletteLightGreenForeground3)));}", ".f11odu81{color:var(--459, var(--460, var(--colorNeutralForeground3)));}", ".f1ovxq8r{color:var(--461, var(--462, var(--colorPaletteBerryForeground3)));}", ".f16r53qq{color:var(--463, var(--464, var(--colorNeutralForeground3)));}", ".f1lneuuo{color:var(--465, var(--466, var(--colorNeutralBackground1)));}", ".f187kc00{color:var(--467, var(--468, var(--colorPaletteLightGreenForeground3)));}", ".f1vz3tl8{color:var(--469, var(--470, var(--colorPaletteRedBackground3)));}", ".f13mef6d{color:var(--471, var(--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;}"]
|
|
67
67
|
});
|
|
68
68
|
/**
|
|
69
69
|
* Applies style classnames to slots
|
|
@@ -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(--
|
|
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(--449, var(--450, ${tokens.borderRadiusCircular}))`,\n backgroundColor: `var(--451, var(--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(--453, var(--454, ${tokens.colorPaletteRedBackground3}))`\n },\n statusAway: {\n color: `var(--455, var(--456, ${tokens.colorPaletteMarigoldBackground3}))`\n },\n statusAvailable: {\n color: `var(--457, var(--458, ${tokens.colorPaletteLightGreenForeground3}))`\n },\n statusOffline: {\n color: `var(--459, var(--460, ${tokens.colorNeutralForeground3}))`\n },\n statusOutOfOffice: {\n color: `var(--461, var(--462, ${tokens.colorPaletteBerryForeground3}))`\n },\n statusUnknown: {\n color: `var(--463, var(--464, ${tokens.colorNeutralForeground3}))`\n },\n outOfOffice: {\n color: `var(--465, var(--466, ${tokens.colorNeutralBackground1}))`\n },\n outOfOfficeAvailable: {\n color: `var(--467, var(--468, ${tokens.colorPaletteLightGreenForeground3}))`\n },\n outOfOfficeBusy: {\n color: `var(--469, var(--470, ${tokens.colorPaletteRedBackground3}))`\n },\n outOfOfficeUnknown: {\n color: `var(--471, var(--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":[]}
|