@fluentui/react-swatch-picker 9.1.0 → 9.1.2
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 +26 -4
- package/lib/components/ColorSwatch/useColorSwatchStyles.styles.js +64 -31
- package/lib/components/ColorSwatch/useColorSwatchStyles.styles.js.map +1 -1
- package/lib/components/EmptySwatch/useEmptySwatchStyles.styles.js +44 -26
- package/lib/components/EmptySwatch/useEmptySwatchStyles.styles.js.map +1 -1
- package/lib/components/ImageSwatch/useImageSwatchStyles.styles.js +64 -31
- package/lib/components/ImageSwatch/useImageSwatchStyles.styles.js.map +1 -1
- package/lib/components/SwatchPicker/useSwatchPickerStyles.styles.js +19 -10
- package/lib/components/SwatchPicker/useSwatchPickerStyles.styles.js.map +1 -1
- package/lib-commonjs/components/ColorSwatch/useColorSwatchStyles.styles.js +86 -131
- package/lib-commonjs/components/ColorSwatch/useColorSwatchStyles.styles.js.map +1 -1
- package/lib-commonjs/components/EmptySwatch/useEmptySwatchStyles.styles.js +66 -120
- package/lib-commonjs/components/EmptySwatch/useEmptySwatchStyles.styles.js.map +1 -1
- package/lib-commonjs/components/ImageSwatch/useImageSwatchStyles.styles.js +86 -131
- package/lib-commonjs/components/ImageSwatch/useImageSwatchStyles.styles.js.map +1 -1
- package/lib-commonjs/components/SwatchPicker/useSwatchPickerStyles.styles.js +29 -22
- package/lib-commonjs/components/SwatchPicker/useSwatchPickerStyles.styles.js.map +1 -1
- package/package.json +8 -8
package/CHANGELOG.md
CHANGED
|
@@ -1,12 +1,34 @@
|
|
|
1
1
|
# Change Log - @fluentui/react-swatch-picker
|
|
2
2
|
|
|
3
|
-
This log was last generated on
|
|
3
|
+
This log was last generated on Thu, 06 Jun 2024 15:22:21 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
+
## [9.1.2](https://github.com/microsoft/fluentui/tree/@fluentui/react-swatch-picker_v9.1.2)
|
|
8
|
+
|
|
9
|
+
Thu, 06 Jun 2024 15:22:21 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-swatch-picker_v9.1.1..@fluentui/react-swatch-picker_v9.1.2)
|
|
11
|
+
|
|
12
|
+
### Patches
|
|
13
|
+
|
|
14
|
+
- Bump @fluentui/react-context-selector to v9.1.61 ([PR #31586](https://github.com/microsoft/fluentui/pull/31586) by beachball)
|
|
15
|
+
- Bump @fluentui/react-jsx-runtime to v9.0.39 ([PR #31586](https://github.com/microsoft/fluentui/pull/31586) by beachball)
|
|
16
|
+
- Bump @fluentui/react-tabster to v9.21.5 ([PR #31586](https://github.com/microsoft/fluentui/pull/31586) by beachball)
|
|
17
|
+
- Bump @fluentui/react-utilities to v9.18.10 ([PR #31586](https://github.com/microsoft/fluentui/pull/31586) by beachball)
|
|
18
|
+
|
|
19
|
+
## [9.1.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-swatch-picker_v9.1.1)
|
|
20
|
+
|
|
21
|
+
Thu, 23 May 2024 08:02:48 GMT
|
|
22
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-swatch-picker_v9.1.0..@fluentui/react-swatch-picker_v9.1.1)
|
|
23
|
+
|
|
24
|
+
### Patches
|
|
25
|
+
|
|
26
|
+
- chore: replace usage of .shorthands() in styles ([PR #31448](https://github.com/microsoft/fluentui/pull/31448) by olfedias@microsoft.com)
|
|
27
|
+
- Bump @fluentui/react-tabster to v9.21.4 ([commit](https://github.com/microsoft/fluentui/commit/03599d609e8310b08c57d1f871cffbf717d79207) by beachball)
|
|
28
|
+
|
|
7
29
|
## [9.1.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-swatch-picker_v9.1.0)
|
|
8
30
|
|
|
9
|
-
Mon, 20 May 2024 12:
|
|
31
|
+
Mon, 20 May 2024 12:45:04 GMT
|
|
10
32
|
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-swatch-picker-preview_v0.6.0..@fluentui/react-swatch-picker_v9.1.0)
|
|
11
33
|
|
|
12
34
|
### Minor changes
|
|
@@ -24,7 +46,7 @@ Mon, 20 May 2024 12:36:40 GMT
|
|
|
24
46
|
|
|
25
47
|
## [0.6.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-swatch-picker-preview_v0.6.0)
|
|
26
48
|
|
|
27
|
-
Thu, 16 May 2024 09:25:18 GMT
|
|
49
|
+
Thu, 16 May 2024 09:25:18 GMT
|
|
28
50
|
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-swatch-picker-preview_v0.5.0..@fluentui/react-swatch-picker-preview_v0.6.0)
|
|
29
51
|
|
|
30
52
|
### Minor changes
|
|
@@ -33,7 +55,7 @@ Thu, 16 May 2024 09:25:18 GMT
|
|
|
33
55
|
|
|
34
56
|
### Patches
|
|
35
57
|
|
|
36
|
-
-
|
|
58
|
+
- chore: Upgrade react-icons version to 2.0.239 to pick up provider export map fix. ([PR #31287](https://github.com/microsoft/fluentui/pull/31287) by ololubek@microsoft.com)
|
|
37
59
|
|
|
38
60
|
## [0.5.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-swatch-picker-preview_v0.5.0)
|
|
39
61
|
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { __resetStyles, __styles, mergeClasses
|
|
1
|
+
import { __resetStyles, __styles, mergeClasses } from '@griffel/react';
|
|
2
2
|
import { tokens } from '@fluentui/react-theme';
|
|
3
3
|
import { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';
|
|
4
4
|
export const colorSwatchClassNames = {
|
|
@@ -27,10 +27,23 @@ const useStyles = /*#__PURE__*/__styles({
|
|
|
27
27
|
Bvxd0ez: "f1q3txrk"
|
|
28
28
|
},
|
|
29
29
|
selected: {
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
oivjwe:
|
|
33
|
-
|
|
30
|
+
Bgfg5da: 0,
|
|
31
|
+
B9xav0g: 0,
|
|
32
|
+
oivjwe: 0,
|
|
33
|
+
Bn0qgzm: 0,
|
|
34
|
+
B4g9neb: 0,
|
|
35
|
+
zhjwy3: 0,
|
|
36
|
+
wvpqe5: 0,
|
|
37
|
+
ibv6hh: 0,
|
|
38
|
+
u1mtju: 0,
|
|
39
|
+
h3c5rm: 0,
|
|
40
|
+
vrafjx: 0,
|
|
41
|
+
Bekrc4i: 0,
|
|
42
|
+
i8vvqc: 0,
|
|
43
|
+
g2u3we: 0,
|
|
44
|
+
icvyot: 0,
|
|
45
|
+
B4j52fo: 0,
|
|
46
|
+
irswps: "f3bhgqh",
|
|
34
47
|
E5pizo: "f8ps3yo",
|
|
35
48
|
Bvxd0ez: "f1txz9o1",
|
|
36
49
|
vajtyg: "f1frtkom",
|
|
@@ -39,7 +52,9 @@ const useStyles = /*#__PURE__*/__styles({
|
|
|
39
52
|
}
|
|
40
53
|
}, {
|
|
41
54
|
h: [".fphbwmw:hover{cursor:not-allowed;}", ".f1q3txrk:hover{box-shadow:none;}", ".f1txz9o1:hover{box-shadow:inset 0 0 0 var(--strokeWidthThickest) var(--colorBrandStroke1),inset 0 0 0 6px var(--colorStrokeFocus1);}", ".f1frtkom:hover:active{box-shadow:inset 0 0 0 var(--strokeWidthThickest) var(--colorBrandStroke1),inset 0 0 0 7px var(--colorStrokeFocus1);}"],
|
|
42
|
-
d: [".
|
|
55
|
+
d: [[".f3bhgqh{border:none;}", {
|
|
56
|
+
p: -2
|
|
57
|
+
}], ".f8ps3yo{box-shadow:inset 0 0 0 var(--strokeWidthThicker) var(--colorBrandStroke1),inset 0 0 0 5px var(--colorStrokeFocus1);}", ".f16jq8vy[data-fui-focus-visible]{box-shadow:inset 0 0 0 var(--strokeWidthThicker) var(--colorStrokeFocus2),inset 0 0 0 5px var(--colorStrokeFocus1);}"],
|
|
43
58
|
m: [["@media (forced-colors: active){.f18nq7tj{box-shadow:inset 0 0 0 var(--strokeWidthThicker) var(--colorBrandStroke2Pressed),inset 0 0 0 5px var(--colorStrokeFocus1);}}", {
|
|
44
59
|
m: "(forced-colors: active)"
|
|
45
60
|
}]]
|
|
@@ -66,37 +81,55 @@ const useSizeStyles = /*#__PURE__*/__styles({
|
|
|
66
81
|
});
|
|
67
82
|
const useShapeStyles = /*#__PURE__*/__styles({
|
|
68
83
|
rounded: {
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
Bw81rd7:
|
|
75
|
-
|
|
76
|
-
dm238s:
|
|
84
|
+
Beyfa6y: 0,
|
|
85
|
+
Bbmb7ep: 0,
|
|
86
|
+
Btl43ni: 0,
|
|
87
|
+
B7oj6ja: 0,
|
|
88
|
+
Dimara: "ft85np5",
|
|
89
|
+
Bw81rd7: 0,
|
|
90
|
+
kdpuga: 0,
|
|
91
|
+
dm238s: 0,
|
|
92
|
+
B6xbmo0: 0,
|
|
93
|
+
B3whbx2: "f2krc9w"
|
|
77
94
|
},
|
|
78
95
|
circular: {
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
Bw81rd7:
|
|
85
|
-
|
|
86
|
-
dm238s:
|
|
96
|
+
Beyfa6y: 0,
|
|
97
|
+
Bbmb7ep: 0,
|
|
98
|
+
Btl43ni: 0,
|
|
99
|
+
B7oj6ja: 0,
|
|
100
|
+
Dimara: "f44lkw9",
|
|
101
|
+
Bw81rd7: 0,
|
|
102
|
+
kdpuga: 0,
|
|
103
|
+
dm238s: 0,
|
|
104
|
+
B6xbmo0: 0,
|
|
105
|
+
B3whbx2: "f1062rbf"
|
|
87
106
|
},
|
|
88
107
|
square: {
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
Bw81rd7:
|
|
95
|
-
|
|
96
|
-
dm238s:
|
|
108
|
+
Beyfa6y: 0,
|
|
109
|
+
Bbmb7ep: 0,
|
|
110
|
+
Btl43ni: 0,
|
|
111
|
+
B7oj6ja: 0,
|
|
112
|
+
Dimara: "f1fabniw",
|
|
113
|
+
Bw81rd7: 0,
|
|
114
|
+
kdpuga: 0,
|
|
115
|
+
dm238s: 0,
|
|
116
|
+
B6xbmo0: 0,
|
|
117
|
+
B3whbx2: "fj0ryk1"
|
|
97
118
|
}
|
|
98
119
|
}, {
|
|
99
|
-
d: [
|
|
120
|
+
d: [[".ft85np5{border-radius:var(--borderRadiusMedium);}", {
|
|
121
|
+
p: -1
|
|
122
|
+
}], [".f2krc9w[data-fui-focus-visible]{border-radius:var(--borderRadiusMedium);}", {
|
|
123
|
+
p: -1
|
|
124
|
+
}], [".f44lkw9{border-radius:var(--borderRadiusCircular);}", {
|
|
125
|
+
p: -1
|
|
126
|
+
}], [".f1062rbf[data-fui-focus-visible]{border-radius:var(--borderRadiusCircular);}", {
|
|
127
|
+
p: -1
|
|
128
|
+
}], [".f1fabniw{border-radius:var(--borderRadiusNone);}", {
|
|
129
|
+
p: -1
|
|
130
|
+
}], [".fj0ryk1[data-fui-focus-visible]{border-radius:var(--borderRadiusNone);}", {
|
|
131
|
+
p: -1
|
|
132
|
+
}]]
|
|
100
133
|
});
|
|
101
134
|
const useIconStyles = /*#__PURE__*/__styles({
|
|
102
135
|
disabledIcon: {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["__resetStyles","__styles","mergeClasses","
|
|
1
|
+
{"version":3,"names":["__resetStyles","__styles","mergeClasses","tokens","createCustomFocusIndicatorStyle","colorSwatchClassNames","root","icon","disabledIcon","swatchCSSVars","color","borderColor","useResetStyles","r","s","useStyles","disabled","eoavqd","Bvxd0ez","selected","Bgfg5da","B9xav0g","oivjwe","Bn0qgzm","B4g9neb","zhjwy3","wvpqe5","ibv6hh","u1mtju","h3c5rm","vrafjx","Bekrc4i","i8vvqc","g2u3we","icvyot","B4j52fo","irswps","E5pizo","vajtyg","j6ew2k","Bspt33j","h","d","p","m","useSizeStyles","a9b677","Bqenvij","small","medium","large","useShapeStyles","rounded","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","Bw81rd7","kdpuga","dm238s","B6xbmo0","B3whbx2","circular","square","useIconStyles","sj55zd","Bhu2qc9","qhf8xq","mc9l5x","qb2dma","Be2twd7","useColorSwatchStyles_unstable","state","resetStyles","styles","sizeStyles","shapeStyles","iconStyles","size","shape","className"],"sources":["useColorSwatchStyles.styles.js"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nexport const colorSwatchClassNames = {\n root: 'fui-ColorSwatch',\n icon: 'fui-ColorSwatch__icon',\n disabledIcon: 'fui-ColorSwatch__disabledIcon'\n};\nexport const swatchCSSVars = {\n color: `--fui-SwatchPicker--color`,\n borderColor: `--fui-SwatchPicker--borderColor`\n};\nconst { color, borderColor } = swatchCSSVars;\n/**\n * Styles for the root slot\n */ const useResetStyles = makeResetStyles({\n display: 'inline-flex',\n flexShrink: 0,\n alignItems: 'center',\n justifyContent: 'center',\n boxSizing: 'border-box',\n border: `1px solid var(${borderColor})`,\n background: `var(${color})`,\n overflow: 'hidden',\n padding: '0',\n ':hover': {\n cursor: 'pointer',\n border: 'none',\n boxShadow: `inset 0 0 0 ${tokens.strokeWidthThick} ${tokens.colorBrandStroke1}, inset 0 0 0 ${tokens.strokeWidthThicker} ${tokens.colorStrokeFocus1}`\n },\n ':hover:active': {\n border: 'none',\n boxShadow: `inset 0 0 0 ${tokens.strokeWidthThicker} ${tokens.colorBrandStroke1}, inset 0 0 0 ${tokens.strokeWidthThickest} ${tokens.colorStrokeFocus1}`\n },\n ':focus': {\n outline: 'none'\n },\n ':focus-visible': {\n outline: 'none'\n },\n ...createCustomFocusIndicatorStyle({\n border: 'none',\n outline: 'none',\n boxShadow: `inset 0 0 0 ${tokens.strokeWidthThick} ${tokens.colorStrokeFocus2}, inset 0 0 0 ${tokens.strokeWidthThicker} ${tokens.colorStrokeFocus1}`\n }),\n // High contrast styles\n '@media (forced-colors: active)': {\n forcedColorAdjust: 'none',\n ':hover': {\n boxShadow: `inset 0 0 0 ${tokens.strokeWidthThick} ${tokens.colorBrandStroke2Hover}, inset 0 0 0 ${tokens.strokeWidthThicker} ${tokens.colorStrokeFocus1}`\n },\n ':hover:active': {\n boxShadow: `inset 0 0 0 ${tokens.strokeWidthThicker} ${tokens.colorBrandStroke2Pressed}, inset 0 0 0 ${tokens.strokeWidthThickest} ${tokens.colorStrokeFocus1}`\n }\n }\n});\nconst useStyles = makeStyles({\n disabled: {\n ':hover': {\n cursor: 'not-allowed',\n boxShadow: 'none'\n }\n },\n selected: {\n border: 'none',\n boxShadow: `inset 0 0 0 ${tokens.strokeWidthThicker} ${tokens.colorBrandStroke1}, inset 0 0 0 5px ${tokens.colorStrokeFocus1}`,\n ':hover': {\n boxShadow: `inset 0 0 0 ${tokens.strokeWidthThickest} ${tokens.colorBrandStroke1}, inset 0 0 0 6px ${tokens.colorStrokeFocus1}`\n },\n ':hover:active': {\n boxShadow: `inset 0 0 0 ${tokens.strokeWidthThickest} ${tokens.colorBrandStroke1}, inset 0 0 0 7px ${tokens.colorStrokeFocus1}`\n },\n ...createCustomFocusIndicatorStyle({\n boxShadow: `inset 0 0 0 ${tokens.strokeWidthThicker} ${tokens.colorStrokeFocus2}, inset 0 0 0 5px ${tokens.colorStrokeFocus1}`\n }),\n '@media (forced-colors: active)': {\n boxShadow: `inset 0 0 0 ${tokens.strokeWidthThicker} ${tokens.colorBrandStroke2Pressed}, inset 0 0 0 5px ${tokens.colorStrokeFocus1}`\n }\n }\n});\nconst useSizeStyles = makeStyles({\n 'extra-small': {\n width: '20px',\n height: '20px'\n },\n small: {\n width: '24px',\n height: '24px'\n },\n medium: {\n width: '28px',\n height: '28px'\n },\n large: {\n width: '32px',\n height: '32px'\n }\n});\nconst useShapeStyles = makeStyles({\n rounded: {\n borderRadius: tokens.borderRadiusMedium,\n ...createCustomFocusIndicatorStyle({\n borderRadius: tokens.borderRadiusMedium\n })\n },\n circular: {\n borderRadius: tokens.borderRadiusCircular,\n ...createCustomFocusIndicatorStyle({\n borderRadius: tokens.borderRadiusCircular\n })\n },\n square: {\n borderRadius: tokens.borderRadiusNone,\n ...createCustomFocusIndicatorStyle({\n borderRadius: tokens.borderRadiusNone\n })\n }\n});\nconst useIconStyles = makeStyles({\n disabledIcon: {\n color: tokens.colorNeutralForegroundInverted,\n filter: 'drop-shadow(0 1px 1px rgb(0 0 0 / 1))'\n },\n icon: {\n position: 'absolute',\n display: 'flex',\n alignSelf: 'center'\n },\n 'extra-small': {\n fontSize: '16px'\n },\n small: {\n fontSize: '16px'\n },\n medium: {\n fontSize: '20px'\n },\n large: {\n fontSize: '24px'\n }\n});\n/**\n * Apply styling to the ColorSwatch slots based on the state\n */ export const useColorSwatchStyles_unstable = (state)=>{\n const resetStyles = useResetStyles();\n const styles = useStyles();\n const sizeStyles = useSizeStyles();\n const shapeStyles = useShapeStyles();\n const iconStyles = useIconStyles();\n const { size = 'medium', shape = 'square' } = state;\n state.root.className = mergeClasses(colorSwatchClassNames.root, resetStyles, sizeStyles[size], shapeStyles[shape], state.selected && styles.selected, state.disabled && styles.disabled, state.root.className);\n if (state.disabled && state.disabledIcon) {\n state.disabledIcon.className = mergeClasses(iconStyles.icon, iconStyles[size], iconStyles.disabledIcon, state.disabledIcon.className);\n }\n if (state.icon) {\n state.icon.className = mergeClasses(iconStyles.icon, iconStyles[size], state.icon.className);\n }\n return state;\n};\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { __resetStyles, __styles, mergeClasses
|
|
1
|
+
import { __resetStyles, __styles, mergeClasses } from '@griffel/react';
|
|
2
2
|
import { tokens } from '@fluentui/react-theme';
|
|
3
3
|
import { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';
|
|
4
4
|
export const emptySwatchClassNames = {
|
|
@@ -30,37 +30,55 @@ const useSizeStyles = /*#__PURE__*/__styles({
|
|
|
30
30
|
});
|
|
31
31
|
const useShapeStyles = /*#__PURE__*/__styles({
|
|
32
32
|
rounded: {
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
Bw81rd7:
|
|
39
|
-
|
|
40
|
-
dm238s:
|
|
33
|
+
Beyfa6y: 0,
|
|
34
|
+
Bbmb7ep: 0,
|
|
35
|
+
Btl43ni: 0,
|
|
36
|
+
B7oj6ja: 0,
|
|
37
|
+
Dimara: "ft85np5",
|
|
38
|
+
Bw81rd7: 0,
|
|
39
|
+
kdpuga: 0,
|
|
40
|
+
dm238s: 0,
|
|
41
|
+
B6xbmo0: 0,
|
|
42
|
+
B3whbx2: "f2krc9w"
|
|
41
43
|
},
|
|
42
44
|
circular: {
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
Bw81rd7:
|
|
49
|
-
|
|
50
|
-
dm238s:
|
|
45
|
+
Beyfa6y: 0,
|
|
46
|
+
Bbmb7ep: 0,
|
|
47
|
+
Btl43ni: 0,
|
|
48
|
+
B7oj6ja: 0,
|
|
49
|
+
Dimara: "f44lkw9",
|
|
50
|
+
Bw81rd7: 0,
|
|
51
|
+
kdpuga: 0,
|
|
52
|
+
dm238s: 0,
|
|
53
|
+
B6xbmo0: 0,
|
|
54
|
+
B3whbx2: "f1062rbf"
|
|
51
55
|
},
|
|
52
56
|
square: {
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
Bw81rd7:
|
|
59
|
-
|
|
60
|
-
dm238s:
|
|
57
|
+
Beyfa6y: 0,
|
|
58
|
+
Bbmb7ep: 0,
|
|
59
|
+
Btl43ni: 0,
|
|
60
|
+
B7oj6ja: 0,
|
|
61
|
+
Dimara: "f1fabniw",
|
|
62
|
+
Bw81rd7: 0,
|
|
63
|
+
kdpuga: 0,
|
|
64
|
+
dm238s: 0,
|
|
65
|
+
B6xbmo0: 0,
|
|
66
|
+
B3whbx2: "fj0ryk1"
|
|
61
67
|
}
|
|
62
68
|
}, {
|
|
63
|
-
d: [
|
|
69
|
+
d: [[".ft85np5{border-radius:var(--borderRadiusMedium);}", {
|
|
70
|
+
p: -1
|
|
71
|
+
}], [".f2krc9w[data-fui-focus-visible]{border-radius:var(--borderRadiusMedium);}", {
|
|
72
|
+
p: -1
|
|
73
|
+
}], [".f44lkw9{border-radius:var(--borderRadiusCircular);}", {
|
|
74
|
+
p: -1
|
|
75
|
+
}], [".f1062rbf[data-fui-focus-visible]{border-radius:var(--borderRadiusCircular);}", {
|
|
76
|
+
p: -1
|
|
77
|
+
}], [".f1fabniw{border-radius:var(--borderRadiusNone);}", {
|
|
78
|
+
p: -1
|
|
79
|
+
}], [".fj0ryk1[data-fui-focus-visible]{border-radius:var(--borderRadiusNone);}", {
|
|
80
|
+
p: -1
|
|
81
|
+
}]]
|
|
64
82
|
});
|
|
65
83
|
/**
|
|
66
84
|
* Apply styling to the EmptySwatch slots based on the state
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["__resetStyles","__styles","mergeClasses","
|
|
1
|
+
{"version":3,"names":["__resetStyles","__styles","mergeClasses","tokens","createCustomFocusIndicatorStyle","emptySwatchClassNames","root","useStyles","useSizeStyles","a9b677","Bqenvij","small","medium","large","d","useShapeStyles","rounded","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","Bw81rd7","kdpuga","dm238s","B6xbmo0","B3whbx2","circular","square","p","useEmptySwatchStyles_unstable","state","styles","sizeStyles","shapeStyles","_state_size","size","_state_shape","className","shape"],"sources":["useEmptySwatchStyles.styles.js"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nexport const emptySwatchClassNames = {\n root: 'fui-EmptySwatch'\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeResetStyles({\n backgroundColor: tokens.colorTransparentBackground,\n border: `1px dashed ${tokens.colorNeutralForeground4}`\n});\nconst useSizeStyles = makeStyles({\n 'extra-small': {\n width: '20px',\n height: '20px'\n },\n small: {\n width: '24px',\n height: '24px'\n },\n medium: {\n width: '28px',\n height: '28px'\n },\n large: {\n width: '32px',\n height: '32px'\n }\n});\nconst useShapeStyles = makeStyles({\n rounded: {\n borderRadius: tokens.borderRadiusMedium,\n ...createCustomFocusIndicatorStyle({\n borderRadius: tokens.borderRadiusMedium\n })\n },\n circular: {\n borderRadius: tokens.borderRadiusCircular,\n ...createCustomFocusIndicatorStyle({\n borderRadius: tokens.borderRadiusCircular\n })\n },\n square: {\n borderRadius: tokens.borderRadiusNone,\n ...createCustomFocusIndicatorStyle({\n borderRadius: tokens.borderRadiusNone\n })\n }\n});\n/**\n * Apply styling to the EmptySwatch slots based on the state\n */ export const useEmptySwatchStyles_unstable = (state)=>{\n const styles = useStyles();\n const sizeStyles = useSizeStyles();\n const shapeStyles = useShapeStyles();\n var _state_size;\n const size = (_state_size = state.size) !== null && _state_size !== void 0 ? _state_size : 'medium';\n var _state_shape;\n state.root.className = mergeClasses(emptySwatchClassNames.root, styles, sizeStyles[size], shapeStyles[(_state_shape = state.shape) !== null && _state_shape !== void 0 ? _state_shape : 'square'], state.root.className);\n return state;\n};\n"],"mappings":"AAAA,SAAAA,aAAA,EAAAC,QAAA,EAAsCC,YAAY,QAAQ,gBAAgB;AAC1E,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,SAASC,+BAA+B,QAAQ,yBAAyB;AACzE,OAAO,MAAMC,qBAAqB,GAAG;EACjCC,IAAI,EAAE;AACV,CAAC;AACD;AACA;AACA;AAAI,MAAMC,SAAS,gBAAGP,aAAA,sIAGrB,CAAC;AACF,MAAMQ,aAAa,gBAAGP,QAAA;EAAA;IAAAQ,MAAA;IAAAC,OAAA;EAAA;EAAAC,KAAA;IAAAF,MAAA;IAAAC,OAAA;EAAA;EAAAE,MAAA;IAAAH,MAAA;IAAAC,OAAA;EAAA;EAAAG,KAAA;IAAAJ,MAAA;IAAAC,OAAA;EAAA;AAAA;EAAAI,CAAA;AAAA,CAiBrB,CAAC;AACF,MAAMC,cAAc,gBAAGd,QAAA;EAAAe,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;EAAAC,QAAA;IAAAV,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;EAAAE,MAAA;IAAAX,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;AAAA;EAAAZ,CAAA;IAAAe,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;AAAA,CAmBtB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,6BAA6B,GAAIC,KAAK,IAAG;EACtD,MAAMC,MAAM,GAAGzB,SAAS,CAAC,CAAC;EAC1B,MAAM0B,UAAU,GAAGzB,aAAa,CAAC,CAAC;EAClC,MAAM0B,WAAW,GAAGnB,cAAc,CAAC,CAAC;EACpC,IAAIoB,WAAW;EACf,MAAMC,IAAI,GAAG,CAACD,WAAW,GAAGJ,KAAK,CAACK,IAAI,MAAM,IAAI,IAAID,WAAW,KAAK,KAAK,CAAC,GAAGA,WAAW,GAAG,QAAQ;EACnG,IAAIE,YAAY;EAChBN,KAAK,CAACzB,IAAI,CAACgC,SAAS,GAAGpC,YAAY,CAACG,qBAAqB,CAACC,IAAI,EAAE0B,MAAM,EAAEC,UAAU,CAACG,IAAI,CAAC,EAAEF,WAAW,CAAC,CAACG,YAAY,GAAGN,KAAK,CAACQ,KAAK,MAAM,IAAI,IAAIF,YAAY,KAAK,KAAK,CAAC,GAAGA,YAAY,GAAG,QAAQ,CAAC,EAAEN,KAAK,CAACzB,IAAI,CAACgC,SAAS,CAAC;EACxN,OAAOP,KAAK;AAChB,CAAC","ignoreList":[]}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { __styles, mergeClasses, __resetStyles
|
|
1
|
+
import { __styles, mergeClasses, __resetStyles } from '@griffel/react';
|
|
2
2
|
import { tokens } from '@fluentui/react-theme';
|
|
3
3
|
import { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';
|
|
4
4
|
export const imageSwatchClassNames = {
|
|
@@ -13,10 +13,23 @@ const useStyles = /*#__PURE__*/__resetStyles("r1kt2fyq", null, {
|
|
|
13
13
|
});
|
|
14
14
|
const useStylesSelected = /*#__PURE__*/__styles({
|
|
15
15
|
selected: {
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
oivjwe:
|
|
19
|
-
|
|
16
|
+
Bgfg5da: 0,
|
|
17
|
+
B9xav0g: 0,
|
|
18
|
+
oivjwe: 0,
|
|
19
|
+
Bn0qgzm: 0,
|
|
20
|
+
B4g9neb: 0,
|
|
21
|
+
zhjwy3: 0,
|
|
22
|
+
wvpqe5: 0,
|
|
23
|
+
ibv6hh: 0,
|
|
24
|
+
u1mtju: 0,
|
|
25
|
+
h3c5rm: 0,
|
|
26
|
+
vrafjx: 0,
|
|
27
|
+
Bekrc4i: 0,
|
|
28
|
+
i8vvqc: 0,
|
|
29
|
+
g2u3we: 0,
|
|
30
|
+
icvyot: 0,
|
|
31
|
+
B4j52fo: 0,
|
|
32
|
+
irswps: "f3bhgqh",
|
|
20
33
|
E5pizo: "f8ps3yo",
|
|
21
34
|
Bvxd0ez: "f1txz9o1",
|
|
22
35
|
vajtyg: "f1frtkom",
|
|
@@ -24,7 +37,9 @@ const useStylesSelected = /*#__PURE__*/__styles({
|
|
|
24
37
|
Bspt33j: "f18nq7tj"
|
|
25
38
|
}
|
|
26
39
|
}, {
|
|
27
|
-
d: [".
|
|
40
|
+
d: [[".f3bhgqh{border:none;}", {
|
|
41
|
+
p: -2
|
|
42
|
+
}], ".f8ps3yo{box-shadow:inset 0 0 0 var(--strokeWidthThicker) var(--colorBrandStroke1),inset 0 0 0 5px var(--colorStrokeFocus1);}", ".f16jq8vy[data-fui-focus-visible]{box-shadow:inset 0 0 0 var(--strokeWidthThicker) var(--colorStrokeFocus2),inset 0 0 0 5px var(--colorStrokeFocus1);}"],
|
|
28
43
|
h: [".f1txz9o1:hover{box-shadow:inset 0 0 0 var(--strokeWidthThickest) var(--colorBrandStroke1),inset 0 0 0 6px var(--colorStrokeFocus1);}", ".f1frtkom:hover:active{box-shadow:inset 0 0 0 var(--strokeWidthThickest) var(--colorBrandStroke1),inset 0 0 0 7px var(--colorStrokeFocus1);}"],
|
|
29
44
|
m: [["@media (forced-colors: active){.f18nq7tj{box-shadow:inset 0 0 0 var(--strokeWidthThicker) var(--colorBrandStroke2Pressed),inset 0 0 0 5px var(--colorStrokeFocus1);}}", {
|
|
30
45
|
m: "(forced-colors: active)"
|
|
@@ -52,37 +67,55 @@ const useSizeStyles = /*#__PURE__*/__styles({
|
|
|
52
67
|
});
|
|
53
68
|
const useShapeStyles = /*#__PURE__*/__styles({
|
|
54
69
|
rounded: {
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
Bw81rd7:
|
|
61
|
-
|
|
62
|
-
dm238s:
|
|
70
|
+
Beyfa6y: 0,
|
|
71
|
+
Bbmb7ep: 0,
|
|
72
|
+
Btl43ni: 0,
|
|
73
|
+
B7oj6ja: 0,
|
|
74
|
+
Dimara: "ft85np5",
|
|
75
|
+
Bw81rd7: 0,
|
|
76
|
+
kdpuga: 0,
|
|
77
|
+
dm238s: 0,
|
|
78
|
+
B6xbmo0: 0,
|
|
79
|
+
B3whbx2: "f2krc9w"
|
|
63
80
|
},
|
|
64
81
|
circular: {
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
Bw81rd7:
|
|
71
|
-
|
|
72
|
-
dm238s:
|
|
82
|
+
Beyfa6y: 0,
|
|
83
|
+
Bbmb7ep: 0,
|
|
84
|
+
Btl43ni: 0,
|
|
85
|
+
B7oj6ja: 0,
|
|
86
|
+
Dimara: "f44lkw9",
|
|
87
|
+
Bw81rd7: 0,
|
|
88
|
+
kdpuga: 0,
|
|
89
|
+
dm238s: 0,
|
|
90
|
+
B6xbmo0: 0,
|
|
91
|
+
B3whbx2: "f1062rbf"
|
|
73
92
|
},
|
|
74
93
|
square: {
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
Bw81rd7:
|
|
81
|
-
|
|
82
|
-
dm238s:
|
|
94
|
+
Beyfa6y: 0,
|
|
95
|
+
Bbmb7ep: 0,
|
|
96
|
+
Btl43ni: 0,
|
|
97
|
+
B7oj6ja: 0,
|
|
98
|
+
Dimara: "f1fabniw",
|
|
99
|
+
Bw81rd7: 0,
|
|
100
|
+
kdpuga: 0,
|
|
101
|
+
dm238s: 0,
|
|
102
|
+
B6xbmo0: 0,
|
|
103
|
+
B3whbx2: "fj0ryk1"
|
|
83
104
|
}
|
|
84
105
|
}, {
|
|
85
|
-
d: [
|
|
106
|
+
d: [[".ft85np5{border-radius:var(--borderRadiusMedium);}", {
|
|
107
|
+
p: -1
|
|
108
|
+
}], [".f2krc9w[data-fui-focus-visible]{border-radius:var(--borderRadiusMedium);}", {
|
|
109
|
+
p: -1
|
|
110
|
+
}], [".f44lkw9{border-radius:var(--borderRadiusCircular);}", {
|
|
111
|
+
p: -1
|
|
112
|
+
}], [".f1062rbf[data-fui-focus-visible]{border-radius:var(--borderRadiusCircular);}", {
|
|
113
|
+
p: -1
|
|
114
|
+
}], [".f1fabniw{border-radius:var(--borderRadiusNone);}", {
|
|
115
|
+
p: -1
|
|
116
|
+
}], [".fj0ryk1[data-fui-focus-visible]{border-radius:var(--borderRadiusNone);}", {
|
|
117
|
+
p: -1
|
|
118
|
+
}]]
|
|
86
119
|
});
|
|
87
120
|
/**
|
|
88
121
|
* Apply styling to the ImageSwatch slots based on the state
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["__styles","mergeClasses","__resetStyles","
|
|
1
|
+
{"version":3,"names":["__styles","mergeClasses","__resetStyles","tokens","createCustomFocusIndicatorStyle","imageSwatchClassNames","root","useStyles","r","s","useStylesSelected","selected","Bgfg5da","B9xav0g","oivjwe","Bn0qgzm","B4g9neb","zhjwy3","wvpqe5","ibv6hh","u1mtju","h3c5rm","vrafjx","Bekrc4i","i8vvqc","g2u3we","icvyot","B4j52fo","irswps","E5pizo","Bvxd0ez","vajtyg","j6ew2k","Bspt33j","d","p","h","m","useSizeStyles","a9b677","Bqenvij","small","medium","large","useShapeStyles","rounded","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","Bw81rd7","kdpuga","dm238s","B6xbmo0","B3whbx2","circular","square","useImageSwatchStyles_unstable","state","styles","selectedStyles","sizeStyles","shapeStyles","size","shape","className"],"sources":["useImageSwatchStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses, makeResetStyles } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nexport const imageSwatchClassNames = {\n root: 'fui-ImageSwatch'\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeResetStyles({\n display: 'inline-flex',\n boxSizing: 'border-box',\n border: `1px solid ${tokens.colorTransparentStroke}`,\n backgroundSize: 'cover',\n backgroundRepeat: 'no-repeat',\n padding: '0',\n ':hover': {\n cursor: 'pointer',\n border: 'none',\n boxShadow: `inset 0 0 0 ${tokens.strokeWidthThick} ${tokens.colorBrandStroke1}, inset 0 0 0 ${tokens.strokeWidthThicker} ${tokens.colorStrokeFocus1}`\n },\n ':hover:active': {\n border: 'none',\n boxShadow: `inset 0 0 0 ${tokens.strokeWidthThicker} ${tokens.colorBrandStroke1}, inset 0 0 0 ${tokens.strokeWidthThickest} ${tokens.colorStrokeFocus1}`\n },\n ':focus': {\n outline: 'none'\n },\n ':focus-visible': {\n outline: 'none'\n },\n ...createCustomFocusIndicatorStyle({\n border: 'none',\n outline: 'none',\n boxShadow: `inset 0 0 0 ${tokens.strokeWidthThick} ${tokens.colorStrokeFocus2}, inset 0 0 0 ${tokens.strokeWidthThicker} ${tokens.colorStrokeFocus1}`\n }),\n // High contrast styles\n '@media (forced-colors: active)': {\n forcedColorAdjust: 'none',\n ':hover': {\n boxShadow: `inset 0 0 0 ${tokens.strokeWidthThick} ${tokens.colorBrandStroke2Hover}, inset 0 0 0 ${tokens.strokeWidthThicker} ${tokens.colorStrokeFocus1}`\n },\n ':hover:active': {\n boxShadow: `inset 0 0 0 ${tokens.strokeWidthThicker} ${tokens.colorBrandStroke2Pressed}, inset 0 0 0 ${tokens.strokeWidthThickest} ${tokens.colorStrokeFocus1}`\n }\n }\n});\nconst useStylesSelected = makeStyles({\n selected: {\n border: 'none',\n boxShadow: `inset 0 0 0 ${tokens.strokeWidthThicker} ${tokens.colorBrandStroke1}, inset 0 0 0 5px ${tokens.colorStrokeFocus1}`,\n ':hover': {\n boxShadow: `inset 0 0 0 ${tokens.strokeWidthThickest} ${tokens.colorBrandStroke1}, inset 0 0 0 6px ${tokens.colorStrokeFocus1}`\n },\n ':hover:active': {\n boxShadow: `inset 0 0 0 ${tokens.strokeWidthThickest} ${tokens.colorBrandStroke1}, inset 0 0 0 7px ${tokens.colorStrokeFocus1}`\n },\n ...createCustomFocusIndicatorStyle({\n boxShadow: `inset 0 0 0 ${tokens.strokeWidthThicker} ${tokens.colorStrokeFocus2}, inset 0 0 0 5px ${tokens.colorStrokeFocus1}`\n }),\n '@media (forced-colors: active)': {\n boxShadow: `inset 0 0 0 ${tokens.strokeWidthThicker} ${tokens.colorBrandStroke2Pressed}, inset 0 0 0 5px ${tokens.colorStrokeFocus1}`\n }\n }\n});\nconst useSizeStyles = makeStyles({\n 'extra-small': {\n width: '20px',\n height: '20px'\n },\n small: {\n width: '24px',\n height: '24px'\n },\n medium: {\n width: '28px',\n height: '28px'\n },\n large: {\n width: '32px',\n height: '32px'\n }\n});\nconst useShapeStyles = makeStyles({\n rounded: {\n borderRadius: tokens.borderRadiusMedium,\n ...createCustomFocusIndicatorStyle({\n borderRadius: tokens.borderRadiusMedium\n })\n },\n circular: {\n borderRadius: tokens.borderRadiusCircular,\n ...createCustomFocusIndicatorStyle({\n borderRadius: tokens.borderRadiusCircular\n })\n },\n square: {\n borderRadius: tokens.borderRadiusNone,\n ...createCustomFocusIndicatorStyle({\n borderRadius: tokens.borderRadiusNone\n })\n }\n});\n/**\n * Apply styling to the ImageSwatch slots based on the state\n */ export const useImageSwatchStyles_unstable = (state)=>{\n const styles = useStyles();\n const selectedStyles = useStylesSelected();\n const sizeStyles = useSizeStyles();\n const shapeStyles = useShapeStyles();\n const { size = 'medium', shape = 'square' } = state;\n state.root.className = mergeClasses(imageSwatchClassNames.root, styles, sizeStyles[size], shapeStyles[shape], state.selected && selectedStyles.selected, state.root.className);\n return state;\n};\n"],"mappings":"AAAA,SAAAA,QAAA,EAAqBC,YAAY,EAAAC,aAAA,QAAyB,gBAAgB;AAC1E,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,SAASC,+BAA+B,QAAQ,yBAAyB;AACzE,OAAO,MAAMC,qBAAqB,GAAG;EACjCC,IAAI,EAAE;AACV,CAAC;AACD;AACA;AACA;AAAI,MAAMC,SAAS,gBAAGL,aAAA;EAAAM,CAAA;EAAAC,CAAA;AAAA,CAqCrB,CAAC;AACF,MAAMC,iBAAiB,gBAAGV,QAAA;EAAAW,QAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;AAAA;EAAAC,CAAA;IAAAC,CAAA;EAAA;EAAAC,CAAA;EAAAC,CAAA;IAAAA,CAAA;EAAA;AAAA,CAiBzB,CAAC;AACF,MAAMC,aAAa,gBAAGtC,QAAA;EAAA;IAAAuC,MAAA;IAAAC,OAAA;EAAA;EAAAC,KAAA;IAAAF,MAAA;IAAAC,OAAA;EAAA;EAAAE,MAAA;IAAAH,MAAA;IAAAC,OAAA;EAAA;EAAAG,KAAA;IAAAJ,MAAA;IAAAC,OAAA;EAAA;AAAA;EAAAN,CAAA;AAAA,CAiBrB,CAAC;AACF,MAAMU,cAAc,gBAAG5C,QAAA;EAAA6C,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;EAAAC,QAAA;IAAAV,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;EAAAE,MAAA;IAAAX,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;AAAA;EAAArB,CAAA;IAAAC,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;AAAA,CAmBtB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMuB,6BAA6B,GAAIC,KAAK,IAAG;EACtD,MAAMC,MAAM,GAAGrD,SAAS,CAAC,CAAC;EAC1B,MAAMsD,cAAc,GAAGnD,iBAAiB,CAAC,CAAC;EAC1C,MAAMoD,UAAU,GAAGxB,aAAa,CAAC,CAAC;EAClC,MAAMyB,WAAW,GAAGnB,cAAc,CAAC,CAAC;EACpC,MAAM;IAAEoB,IAAI,GAAG,QAAQ;IAAEC,KAAK,GAAG;EAAS,CAAC,GAAGN,KAAK;EACnDA,KAAK,CAACrD,IAAI,CAAC4D,SAAS,GAAGjE,YAAY,CAACI,qBAAqB,CAACC,IAAI,EAAEsD,MAAM,EAAEE,UAAU,CAACE,IAAI,CAAC,EAAED,WAAW,CAACE,KAAK,CAAC,EAAEN,KAAK,CAAChD,QAAQ,IAAIkD,cAAc,CAAClD,QAAQ,EAAEgD,KAAK,CAACrD,IAAI,CAAC4D,SAAS,CAAC;EAC9K,OAAOP,KAAK;AAChB,CAAC","ignoreList":[]}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { __styles, mergeClasses
|
|
1
|
+
import { __styles, mergeClasses } from '@griffel/react';
|
|
2
2
|
import { tokens } from '@fluentui/react-theme';
|
|
3
3
|
export const swatchPickerClassNames = {
|
|
4
4
|
root: 'fui-SwatchPicker'
|
|
@@ -8,10 +8,11 @@ export const swatchPickerClassNames = {
|
|
|
8
8
|
*/
|
|
9
9
|
const useStyles = /*#__PURE__*/__styles({
|
|
10
10
|
root: {
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
11
|
+
Byoj8tv: 0,
|
|
12
|
+
uwmqm3: 0,
|
|
13
|
+
z189sj: 0,
|
|
14
|
+
z8tnut: 0,
|
|
15
|
+
B0ocmuz: "f14ufcw5",
|
|
15
16
|
mc9l5x: "f22iagw"
|
|
16
17
|
},
|
|
17
18
|
row: {
|
|
@@ -21,15 +22,23 @@ const useStyles = /*#__PURE__*/__styles({
|
|
|
21
22
|
Beiy3e4: "f1vx9l62"
|
|
22
23
|
},
|
|
23
24
|
spacingSmall: {
|
|
24
|
-
i8kkvl:
|
|
25
|
-
Belr9w4:
|
|
25
|
+
i8kkvl: 0,
|
|
26
|
+
Belr9w4: 0,
|
|
27
|
+
rmohyg: "f1t6b6ee"
|
|
26
28
|
},
|
|
27
29
|
spacingMedium: {
|
|
28
|
-
i8kkvl:
|
|
29
|
-
Belr9w4:
|
|
30
|
+
i8kkvl: 0,
|
|
31
|
+
Belr9w4: 0,
|
|
32
|
+
rmohyg: "f4xv25i"
|
|
30
33
|
}
|
|
31
34
|
}, {
|
|
32
|
-
d: [".
|
|
35
|
+
d: [[".f14ufcw5{padding:var(--spacingHorizontalNone) var(--spacingVerticalNone);}", {
|
|
36
|
+
p: -1
|
|
37
|
+
}], ".f22iagw{display:flex;}", ".f1063pyq{flex-direction:row;}", ".f1vx9l62{flex-direction:column;}", [".f1t6b6ee{gap:2px;}", {
|
|
38
|
+
p: -1
|
|
39
|
+
}], [".f4xv25i{gap:4px;}", {
|
|
40
|
+
p: -1
|
|
41
|
+
}]]
|
|
33
42
|
});
|
|
34
43
|
/**
|
|
35
44
|
* Apply styling to the SwatchPicker slots based on the state
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["__styles","mergeClasses","
|
|
1
|
+
{"version":3,"names":["__styles","mergeClasses","tokens","swatchPickerClassNames","root","useStyles","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","mc9l5x","row","Beiy3e4","grid","spacingSmall","i8kkvl","Belr9w4","rmohyg","spacingMedium","d","p","useSwatchPickerStyles_unstable","state","styles","layoutStyle","isGrid","spacingStyle","spacing","className"],"sources":["useSwatchPickerStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const swatchPickerClassNames = {\n root: 'fui-SwatchPicker'\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n root: {\n padding: `${tokens.spacingHorizontalNone} ${tokens.spacingVerticalNone}`,\n display: 'flex'\n },\n row: {\n flexDirection: 'row'\n },\n grid: {\n flexDirection: 'column'\n },\n spacingSmall: {\n gap: '2px'\n },\n spacingMedium: {\n gap: '4px'\n }\n});\n/**\n * Apply styling to the SwatchPicker slots based on the state\n */ export const useSwatchPickerStyles_unstable = (state)=>{\n const styles = useStyles();\n const layoutStyle = state.isGrid ? styles.grid : styles.row;\n const spacingStyle = state.spacing === 'small' ? styles.spacingSmall : styles.spacingMedium;\n state.root.className = mergeClasses(swatchPickerClassNames.root, styles.root, layoutStyle, spacingStyle, state.root.className);\n return state;\n};\n"],"mappings":"AAAA,SAAAA,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,OAAO,MAAMC,sBAAsB,GAAG;EAClCC,IAAI,EAAE;AACV,CAAC;AACD;AACA;AACA;AAAI,MAAMC,SAAS,gBAAGL,QAAA;EAAAI,IAAA;IAAAE,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAC,GAAA;IAAAC,OAAA;EAAA;EAAAC,IAAA;IAAAD,OAAA;EAAA;EAAAE,YAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAC,aAAA;IAAAH,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;AAAA;EAAAE,CAAA;IAAAC,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;AAAA,CAiBrB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,8BAA8B,GAAIC,KAAK,IAAG;EACvD,MAAMC,MAAM,GAAGnB,SAAS,CAAC,CAAC;EAC1B,MAAMoB,WAAW,GAAGF,KAAK,CAACG,MAAM,GAAGF,MAAM,CAACV,IAAI,GAAGU,MAAM,CAACZ,GAAG;EAC3D,MAAMe,YAAY,GAAGJ,KAAK,CAACK,OAAO,KAAK,OAAO,GAAGJ,MAAM,CAACT,YAAY,GAAGS,MAAM,CAACL,aAAa;EAC3FI,KAAK,CAACnB,IAAI,CAACyB,SAAS,GAAG5B,YAAY,CAACE,sBAAsB,CAACC,IAAI,EAAEoB,MAAM,CAACpB,IAAI,EAAEqB,WAAW,EAAEE,YAAY,EAAEJ,KAAK,CAACnB,IAAI,CAACyB,SAAS,CAAC;EAC9H,OAAON,KAAK;AAChB,CAAC","ignoreList":[]}
|