@fluentui/react-swatch-picker 9.2.3 → 9.2.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/CHANGELOG.md +26 -2
  2. package/lib/components/ColorSwatch/useColorSwatchStyles.styles.js +58 -10
  3. package/lib/components/ColorSwatch/useColorSwatchStyles.styles.js.map +1 -1
  4. package/lib-commonjs/components/ColorSwatch/useColorSwatchStyles.styles.js +68 -6
  5. package/lib-commonjs/components/ColorSwatch/useColorSwatchStyles.styles.js.map +1 -1
  6. package/package.json +6 -6
package/CHANGELOG.md CHANGED
@@ -1,12 +1,36 @@
1
1
  # Change Log - @fluentui/react-swatch-picker
2
2
 
3
- This log was last generated on Thu, 27 Mar 2025 21:08:38 GMT and should not be manually modified.
3
+ This log was last generated on Wed, 16 Apr 2025 19:37:13 GMT and should not be manually modified.
4
4
 
5
5
  <!-- Start content -->
6
6
 
7
+ ## [9.2.5](https://github.com/microsoft/fluentui/tree/@fluentui/react-swatch-picker_v9.2.5)
8
+
9
+ Wed, 16 Apr 2025 19:37:13 GMT
10
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-swatch-picker_v9.2.4..@fluentui/react-swatch-picker_v9.2.5)
11
+
12
+ ### Patches
13
+
14
+ - fix: design change of selected state for ColorSwatch ([PR #34214](https://github.com/microsoft/fluentui/pull/34214) by v.kozlova13@gmail.com)
15
+ - Bump @fluentui/react-context-selector to v9.1.76 ([PR #34166](https://github.com/microsoft/fluentui/pull/34166) by beachball)
16
+ - Bump @fluentui/react-field to v9.2.5 ([PR #34166](https://github.com/microsoft/fluentui/pull/34166) by beachball)
17
+ - Bump @fluentui/react-jsx-runtime to v9.0.54 ([PR #34166](https://github.com/microsoft/fluentui/pull/34166) by beachball)
18
+ - Bump @fluentui/react-tabster to v9.24.5 ([PR #34166](https://github.com/microsoft/fluentui/pull/34166) by beachball)
19
+ - Bump @fluentui/react-utilities to v9.19.0 ([PR #34166](https://github.com/microsoft/fluentui/pull/34166) by beachball)
20
+
21
+ ## [9.2.4](https://github.com/microsoft/fluentui/tree/@fluentui/react-swatch-picker_v9.2.4)
22
+
23
+ Tue, 01 Apr 2025 15:08:02 GMT
24
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-swatch-picker_v9.2.3..@fluentui/react-swatch-picker_v9.2.4)
25
+
26
+ ### Patches
27
+
28
+ - Bump @fluentui/react-field to v9.2.4 ([PR #33909](https://github.com/microsoft/fluentui/pull/33909) by beachball)
29
+ - Bump @fluentui/react-tabster to v9.24.4 ([PR #33909](https://github.com/microsoft/fluentui/pull/33909) by beachball)
30
+
7
31
  ## [9.2.3](https://github.com/microsoft/fluentui/tree/@fluentui/react-swatch-picker_v9.2.3)
8
32
 
9
- Thu, 27 Mar 2025 21:08:38 GMT
33
+ Thu, 27 Mar 2025 21:12:51 GMT
10
34
  [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-swatch-picker_v9.2.2..@fluentui/react-swatch-picker_v9.2.3)
11
35
 
12
36
  ### Patches
package/lib/components/ColorSwatch/useColorSwatchStyles.styles.js CHANGED
@@ -50,9 +50,14 @@ const useStyles = /*#__PURE__*/__styles({
50
50
  vajtyg: "ft0nc49",
51
51
  j6ew2k: "f16jq8vy",
52
52
  Bspt33j: "f18nq7tj"
53
+ },
54
+ selectedSmall: {
55
+ E5pizo: "fxflcoq",
56
+ Bvxd0ez: "fha7ylp",
57
+ vajtyg: "fb3iqi"
53
58
  }
54
59
  }, {
55
- h: [".fphbwmw:hover{cursor:not-allowed;}", ".f1q3txrk:hover{box-shadow:none;}", ".f106r15f:hover{box-shadow:inset 0 0 0 var(--strokeWidthThickest) var(--colorCompoundBrandStrokeHover),inset 0 0 0 6px var(--colorStrokeFocus1);}", ".ft0nc49:hover:active{box-shadow:inset 0 0 0 var(--strokeWidthThickest) var(--colorCompoundBrandStrokePressed),inset 0 0 0 7px var(--colorStrokeFocus1);}"],
60
+ h: [".fphbwmw:hover{cursor:not-allowed;}", ".f1q3txrk:hover{box-shadow:none;}", ".f106r15f:hover{box-shadow:inset 0 0 0 var(--strokeWidthThickest) var(--colorCompoundBrandStrokeHover),inset 0 0 0 6px var(--colorStrokeFocus1);}", ".ft0nc49:hover:active{box-shadow:inset 0 0 0 var(--strokeWidthThickest) var(--colorCompoundBrandStrokePressed),inset 0 0 0 7px var(--colorStrokeFocus1);}", ".fha7ylp:hover{box-shadow:inset 0 0 0 var(--strokeWidthThick) var(--colorCompoundBrandStrokeHover),inset 0 0 0 var(--strokeWidthThicker) var(--colorStrokeFocus1);}", ".fb3iqi:hover:active{box-shadow:inset 0 0 0 var(--strokeWidthThicker) var(--colorCompoundBrandStrokePressed),inset 0 0 0 var(--strokeWidthThickest) var(--colorStrokeFocus1);}"],
56
61
  m: [["@media (forced-colors: active){.f1hjbkfk:hover{box-shadow:none;}}", {
57
62
  m: "(forced-colors: active)"
58
63
  }], ["@media (forced-colors: active){.f18nq7tj{box-shadow:inset 0 0 0 var(--strokeWidthThicker) var(--colorBrandStroke2Pressed),inset 0 0 0 5px var(--colorStrokeFocus1);}}", {
@@ -60,16 +65,53 @@ const useStyles = /*#__PURE__*/__styles({
60
65
  }]],
61
66
  d: [[".f3bhgqh{border:none;}", {
62
67
  p: -2
63
- }], ".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);}"]
68
+ }], ".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);}", ".fxflcoq{box-shadow:inset 0 0 0 var(--strokeWidthThick) var(--colorBrandStroke1),inset 0 0 0 var(--strokeWidthThicker) var(--colorStrokeFocus1);}"]
64
69
  });
65
70
  const useSizeStyles = /*#__PURE__*/__styles({
66
71
  "extra-small": {
67
72
  a9b677: "f64fuq3",
68
- Bqenvij: "fjamq6b"
73
+ Bqenvij: "fjamq6b",
74
+ Bvxd0ez: "fnzblak",
75
+ Bfsrqk8: 0,
76
+ B9zn80p: 0,
77
+ libdba: 0,
78
+ qi15n7: 0,
79
+ G6mxvm: 0,
80
+ Bpld233: 0,
81
+ B2v0cj4: 0,
82
+ qv9p00: 0,
83
+ Bg6oviu: 0,
84
+ Bk6r4ia: 0,
85
+ Bckajt6: 0,
86
+ Bone85h: 0,
87
+ hkxzgu: 0,
88
+ b661bw: 0,
89
+ kpb45w: 0,
90
+ uiygdg: 0,
91
+ rljib7: "f18wa7jm",
92
+ vajtyg: "faswyoo"
69
93
  },
70
94
  small: {
71
95
  a9b677: "fq4mcun",
72
- Bqenvij: "frvgh55"
96
+ Bqenvij: "frvgh55",
97
+ Bfsrqk8: 0,
98
+ B9zn80p: 0,
99
+ libdba: 0,
100
+ qi15n7: 0,
101
+ G6mxvm: 0,
102
+ Bpld233: 0,
103
+ B2v0cj4: 0,
104
+ qv9p00: 0,
105
+ Bg6oviu: 0,
106
+ Bk6r4ia: 0,
107
+ Bckajt6: 0,
108
+ Bone85h: 0,
109
+ hkxzgu: 0,
110
+ b661bw: 0,
111
+ kpb45w: 0,
112
+ uiygdg: 0,
113
+ rljib7: "f18wa7jm",
114
+ vajtyg: "faswyoo"
73
115
  },
74
116
  medium: {
75
117
  a9b677: "f1w9dchk",
@@ -80,7 +122,12 @@ const useSizeStyles = /*#__PURE__*/__styles({
80
122
  Bqenvij: "f1d2rq10"
81
123
  }
82
124
  }, {
83
- d: [".f64fuq3{width:20px;}", ".fjamq6b{height:20px;}", ".fq4mcun{width:24px;}", ".frvgh55{height:24px;}", ".f1w9dchk{width:28px;}", ".fxldao9{height:28px;}", ".f1szoe96{width:32px;}", ".f1d2rq10{height:32px;}"]
125
+ d: [".f64fuq3{width:20px;}", ".fjamq6b{height:20px;}", ".fq4mcun{width:24px;}", ".frvgh55{height:24px;}", ".f1w9dchk{width:28px;}", ".fxldao9{height:28px;}", ".f1szoe96{width:32px;}", ".f1d2rq10{height:32px;}"],
126
+ h: [".fnzblak:hover{box-shadow:inset 0 0 0 var(--strokeWidthThin) var(--colorBrandStroke1),inset 0 0 0 var(--strokeWidthThick) var(--colorStrokeFocus1);}", [".f18wa7jm:hover:active{border:none;}", {
127
+ p: -2
128
+ }], ".faswyoo:hover:active{box-shadow:inset 0 0 0 var(--strokeWidthThick) var(--colorCompoundBrandStrokePressed),inset 0 0 0 var(--strokeWidthThicker) var(--colorStrokeFocus1);}", [".f18wa7jm:hover:active{border:none;}", {
129
+ p: -2
130
+ }]]
84
131
  });
85
132
  const useShapeStyles = /*#__PURE__*/__styles({
86
133
  rounded: {
@@ -165,16 +212,17 @@ const useIconStyles = /*#__PURE__*/__styles({
165
212
  export const useColorSwatchStyles_unstable = state => {
166
213
  'use no memo';
167
214
 
215
+ const {
216
+ size = 'medium',
217
+ shape = 'square'
218
+ } = state;
168
219
  const resetStyles = useResetStyles();
169
220
  const styles = useStyles();
170
221
  const sizeStyles = useSizeStyles();
171
222
  const shapeStyles = useShapeStyles();
172
223
  const iconStyles = useIconStyles();
173
- const {
174
- size = 'medium',
175
- shape = 'square'
176
- } = state;
177
- state.root.className = mergeClasses(colorSwatchClassNames.root, resetStyles, sizeStyles[size], shapeStyles[shape], state.selected && styles.selected, state.disabled && styles.disabled, state.root.className);
224
+ const smallerSelectedStyles = size === 'small' || size === 'extra-small' ? styles.selectedSmall : '';
225
+ state.root.className = mergeClasses(colorSwatchClassNames.root, resetStyles, sizeStyles[size], shapeStyles[shape], state.selected && styles.selected, state.selected && smallerSelectedStyles, state.disabled && styles.disabled, state.root.className);
178
226
  if (state.disabled && state.disabledIcon) {
179
227
  state.disabledIcon.className = mergeClasses(iconStyles.icon, iconStyles[size], iconStyles.disabledIcon, state.disabledIcon.className);
180
228
  }
package/lib/components/ColorSwatch/useColorSwatchStyles.styles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"names":["__resetStyles","__styles","mergeClasses","tokens","createCustomFocusIndicatorStyle","colorSwatchClassNames","root","icon","disabledIcon","swatchCSSVars","color","borderColor","useResetStyles","r","s","useStyles","disabled","eoavqd","Bvxd0ez","Bs5ihcz","selected","Bgfg5da","B9xav0g","oivjwe","Bn0qgzm","B4g9neb","zhjwy3","wvpqe5","ibv6hh","u1mtju","h3c5rm","vrafjx","Bekrc4i","i8vvqc","g2u3we","icvyot","B4j52fo","irswps","E5pizo","vajtyg","j6ew2k","Bspt33j","h","m","d","p","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.colorCompoundBrandStrokePressed}, 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 '@media (forced-colors: active)': {\n ':hover': {\n boxShadow: 'none'\n }\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.colorCompoundBrandStrokeHover}, inset 0 0 0 6px ${tokens.colorStrokeFocus1}`\n },\n ':hover:active': {\n boxShadow: `inset 0 0 0 ${tokens.strokeWidthThickest} ${tokens.colorCompoundBrandStrokePressed}, 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 'use no memo';\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
+ {"version":3,"names":["__resetStyles","__styles","mergeClasses","tokens","createCustomFocusIndicatorStyle","colorSwatchClassNames","root","icon","disabledIcon","swatchCSSVars","color","borderColor","useResetStyles","r","s","useStyles","disabled","eoavqd","Bvxd0ez","Bs5ihcz","selected","Bgfg5da","B9xav0g","oivjwe","Bn0qgzm","B4g9neb","zhjwy3","wvpqe5","ibv6hh","u1mtju","h3c5rm","vrafjx","Bekrc4i","i8vvqc","g2u3we","icvyot","B4j52fo","irswps","E5pizo","vajtyg","j6ew2k","Bspt33j","selectedSmall","h","m","d","p","useSizeStyles","a9b677","Bqenvij","Bfsrqk8","B9zn80p","libdba","qi15n7","G6mxvm","Bpld233","B2v0cj4","qv9p00","Bg6oviu","Bk6r4ia","Bckajt6","Bone85h","hkxzgu","b661bw","kpb45w","uiygdg","rljib7","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","size","shape","resetStyles","styles","sizeStyles","shapeStyles","iconStyles","smallerSelectedStyles","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.colorCompoundBrandStrokePressed}, 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 '@media (forced-colors: active)': {\n ':hover': {\n boxShadow: 'none'\n }\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.colorCompoundBrandStrokeHover}, inset 0 0 0 6px ${tokens.colorStrokeFocus1}`\n },\n ':hover:active': {\n boxShadow: `inset 0 0 0 ${tokens.strokeWidthThickest} ${tokens.colorCompoundBrandStrokePressed}, 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 selectedSmall: {\n boxShadow: `inset 0 0 0 ${tokens.strokeWidthThick} ${tokens.colorBrandStroke1}, inset 0 0 0 ${tokens.strokeWidthThicker} ${tokens.colorStrokeFocus1}`,\n ':hover': {\n boxShadow: `inset 0 0 0 ${tokens.strokeWidthThick} ${tokens.colorCompoundBrandStrokeHover}, inset 0 0 0 ${tokens.strokeWidthThicker} ${tokens.colorStrokeFocus1}`\n },\n ':hover:active': {\n boxShadow: `inset 0 0 0 ${tokens.strokeWidthThicker} ${tokens.colorCompoundBrandStrokePressed}, inset 0 0 0 ${tokens.strokeWidthThickest} ${tokens.colorStrokeFocus1}`\n }\n }\n});\nconst useSizeStyles = makeStyles({\n 'extra-small': {\n width: '20px',\n height: '20px',\n ':hover': {\n boxShadow: `inset 0 0 0 ${tokens.strokeWidthThin} ${tokens.colorBrandStroke1}, inset 0 0 0 ${tokens.strokeWidthThick} ${tokens.colorStrokeFocus1}`\n },\n ':hover:active': {\n border: 'none',\n boxShadow: `inset 0 0 0 ${tokens.strokeWidthThick} ${tokens.colorCompoundBrandStrokePressed}, inset 0 0 0 ${tokens.strokeWidthThicker} ${tokens.colorStrokeFocus1}`\n }\n },\n small: {\n width: '24px',\n height: '24px',\n ':hover:active': {\n border: 'none',\n boxShadow: `inset 0 0 0 ${tokens.strokeWidthThick} ${tokens.colorCompoundBrandStrokePressed}, inset 0 0 0 ${tokens.strokeWidthThicker} ${tokens.colorStrokeFocus1}`\n }\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 'use no memo';\n const { size = 'medium', shape = 'square' } = state;\n const resetStyles = useResetStyles();\n const styles = useStyles();\n const sizeStyles = useSizeStyles();\n const shapeStyles = useShapeStyles();\n const iconStyles = useIconStyles();\n const smallerSelectedStyles = size === 'small' || size === 'extra-small' ? styles.selectedSmall : '';\n state.root.className = mergeClasses(colorSwatchClassNames.root, resetStyles, sizeStyles[size], shapeStyles[shape], state.selected && styles.selected, state.selected && smallerSelectedStyles, 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":[]}
package/lib-commonjs/components/ColorSwatch/useColorSwatchStyles.styles.js CHANGED
@@ -74,13 +74,20 @@ const useStyles = /*#__PURE__*/ (0, _react.__styles)({
74
74
  vajtyg: "ft0nc49",
75
75
  j6ew2k: "f16jq8vy",
76
76
  Bspt33j: "f18nq7tj"
77
+ },
78
+ selectedSmall: {
79
+ E5pizo: "fxflcoq",
80
+ Bvxd0ez: "fha7ylp",
81
+ vajtyg: "fb3iqi"
77
82
  }
78
83
  }, {
79
84
  h: [
80
85
  ".fphbwmw:hover{cursor:not-allowed;}",
81
86
  ".f1q3txrk:hover{box-shadow:none;}",
82
87
  ".f106r15f:hover{box-shadow:inset 0 0 0 var(--strokeWidthThickest) var(--colorCompoundBrandStrokeHover),inset 0 0 0 6px var(--colorStrokeFocus1);}",
83
- ".ft0nc49:hover:active{box-shadow:inset 0 0 0 var(--strokeWidthThickest) var(--colorCompoundBrandStrokePressed),inset 0 0 0 7px var(--colorStrokeFocus1);}"
88
+ ".ft0nc49:hover:active{box-shadow:inset 0 0 0 var(--strokeWidthThickest) var(--colorCompoundBrandStrokePressed),inset 0 0 0 7px var(--colorStrokeFocus1);}",
89
+ ".fha7ylp:hover{box-shadow:inset 0 0 0 var(--strokeWidthThick) var(--colorCompoundBrandStrokeHover),inset 0 0 0 var(--strokeWidthThicker) var(--colorStrokeFocus1);}",
90
+ ".fb3iqi:hover:active{box-shadow:inset 0 0 0 var(--strokeWidthThicker) var(--colorCompoundBrandStrokePressed),inset 0 0 0 var(--strokeWidthThickest) var(--colorStrokeFocus1);}"
84
91
  ],
85
92
  m: [
86
93
  [
@@ -104,17 +111,55 @@ const useStyles = /*#__PURE__*/ (0, _react.__styles)({
104
111
  }
105
112
  ],
106
113
  ".f8ps3yo{box-shadow:inset 0 0 0 var(--strokeWidthThicker) var(--colorBrandStroke1),inset 0 0 0 5px var(--colorStrokeFocus1);}",
107
- ".f16jq8vy[data-fui-focus-visible]{box-shadow:inset 0 0 0 var(--strokeWidthThicker) var(--colorStrokeFocus2),inset 0 0 0 5px var(--colorStrokeFocus1);}"
114
+ ".f16jq8vy[data-fui-focus-visible]{box-shadow:inset 0 0 0 var(--strokeWidthThicker) var(--colorStrokeFocus2),inset 0 0 0 5px var(--colorStrokeFocus1);}",
115
+ ".fxflcoq{box-shadow:inset 0 0 0 var(--strokeWidthThick) var(--colorBrandStroke1),inset 0 0 0 var(--strokeWidthThicker) var(--colorStrokeFocus1);}"
108
116
  ]
109
117
  });
110
118
  const useSizeStyles = /*#__PURE__*/ (0, _react.__styles)({
111
119
  "extra-small": {
112
120
  a9b677: "f64fuq3",
113
- Bqenvij: "fjamq6b"
121
+ Bqenvij: "fjamq6b",
122
+ Bvxd0ez: "fnzblak",
123
+ Bfsrqk8: 0,
124
+ B9zn80p: 0,
125
+ libdba: 0,
126
+ qi15n7: 0,
127
+ G6mxvm: 0,
128
+ Bpld233: 0,
129
+ B2v0cj4: 0,
130
+ qv9p00: 0,
131
+ Bg6oviu: 0,
132
+ Bk6r4ia: 0,
133
+ Bckajt6: 0,
134
+ Bone85h: 0,
135
+ hkxzgu: 0,
136
+ b661bw: 0,
137
+ kpb45w: 0,
138
+ uiygdg: 0,
139
+ rljib7: "f18wa7jm",
140
+ vajtyg: "faswyoo"
114
141
  },
115
142
  small: {
116
143
  a9b677: "fq4mcun",
117
- Bqenvij: "frvgh55"
144
+ Bqenvij: "frvgh55",
145
+ Bfsrqk8: 0,
146
+ B9zn80p: 0,
147
+ libdba: 0,
148
+ qi15n7: 0,
149
+ G6mxvm: 0,
150
+ Bpld233: 0,
151
+ B2v0cj4: 0,
152
+ qv9p00: 0,
153
+ Bg6oviu: 0,
154
+ Bk6r4ia: 0,
155
+ Bckajt6: 0,
156
+ Bone85h: 0,
157
+ hkxzgu: 0,
158
+ b661bw: 0,
159
+ kpb45w: 0,
160
+ uiygdg: 0,
161
+ rljib7: "f18wa7jm",
162
+ vajtyg: "faswyoo"
118
163
  },
119
164
  medium: {
120
165
  a9b677: "f1w9dchk",
@@ -134,6 +179,22 @@ const useSizeStyles = /*#__PURE__*/ (0, _react.__styles)({
134
179
  ".fxldao9{height:28px;}",
135
180
  ".f1szoe96{width:32px;}",
136
181
  ".f1d2rq10{height:32px;}"
182
+ ],
183
+ h: [
184
+ ".fnzblak:hover{box-shadow:inset 0 0 0 var(--strokeWidthThin) var(--colorBrandStroke1),inset 0 0 0 var(--strokeWidthThick) var(--colorStrokeFocus1);}",
185
+ [
186
+ ".f18wa7jm:hover:active{border:none;}",
187
+ {
188
+ p: -2
189
+ }
190
+ ],
191
+ ".faswyoo:hover:active{box-shadow:inset 0 0 0 var(--strokeWidthThick) var(--colorCompoundBrandStrokePressed),inset 0 0 0 var(--strokeWidthThicker) var(--colorStrokeFocus1);}",
192
+ [
193
+ ".f18wa7jm:hover:active{border:none;}",
194
+ {
195
+ p: -2
196
+ }
197
+ ]
137
198
  ]
138
199
  });
139
200
  const useShapeStyles = /*#__PURE__*/ (0, _react.__styles)({
@@ -249,13 +310,14 @@ const useIconStyles = /*#__PURE__*/ (0, _react.__styles)({
249
310
  });
250
311
  const useColorSwatchStyles_unstable = (state)=>{
251
312
  'use no memo';
313
+ const { size = 'medium', shape = 'square' } = state;
252
314
  const resetStyles = useResetStyles();
253
315
  const styles = useStyles();
254
316
  const sizeStyles = useSizeStyles();
255
317
  const shapeStyles = useShapeStyles();
256
318
  const iconStyles = useIconStyles();
257
- const { size = 'medium', shape = 'square' } = state;
258
- state.root.className = (0, _react.mergeClasses)(colorSwatchClassNames.root, resetStyles, sizeStyles[size], shapeStyles[shape], state.selected && styles.selected, state.disabled && styles.disabled, state.root.className);
319
+ const smallerSelectedStyles = size === 'small' || size === 'extra-small' ? styles.selectedSmall : '';
320
+ state.root.className = (0, _react.mergeClasses)(colorSwatchClassNames.root, resetStyles, sizeStyles[size], shapeStyles[shape], state.selected && styles.selected, state.selected && smallerSelectedStyles, state.disabled && styles.disabled, state.root.className);
259
321
  if (state.disabled && state.disabledIcon) {
260
322
  state.disabledIcon.className = (0, _react.mergeClasses)(iconStyles.icon, iconStyles[size], iconStyles.disabledIcon, state.disabledIcon.className);
261
323
  }
package/lib-commonjs/components/ColorSwatch/useColorSwatchStyles.styles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"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.colorCompoundBrandStrokePressed}, 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 '@media (forced-colors: active)': {\n ':hover': {\n boxShadow: 'none'\n }\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.colorCompoundBrandStrokeHover}, inset 0 0 0 6px ${tokens.colorStrokeFocus1}`\n },\n ':hover:active': {\n boxShadow: `inset 0 0 0 ${tokens.strokeWidthThickest} ${tokens.colorCompoundBrandStrokePressed}, 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 'use no memo';\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"],"names":["colorSwatchClassNames","swatchCSSVars","useColorSwatchStyles_unstable","root","icon","disabledIcon","color","borderColor","useResetStyles","__resetStyles","r","s","useStyles","__styles","disabled","eoavqd","Bvxd0ez","Bs5ihcz","selected","Bgfg5da","B9xav0g","oivjwe","Bn0qgzm","B4g9neb","zhjwy3","wvpqe5","ibv6hh","u1mtju","h3c5rm","vrafjx","Bekrc4i","i8vvqc","g2u3we","icvyot","B4j52fo","irswps","E5pizo","vajtyg","j6ew2k","Bspt33j","h","m","d","p","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","state","resetStyles","styles","sizeStyles","shapeStyles","iconStyles","size","shape","className","mergeClasses"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
1
+ {"version":3,"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.colorCompoundBrandStrokePressed}, 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 '@media (forced-colors: active)': {\n ':hover': {\n boxShadow: 'none'\n }\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.colorCompoundBrandStrokeHover}, inset 0 0 0 6px ${tokens.colorStrokeFocus1}`\n },\n ':hover:active': {\n boxShadow: `inset 0 0 0 ${tokens.strokeWidthThickest} ${tokens.colorCompoundBrandStrokePressed}, 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 selectedSmall: {\n boxShadow: `inset 0 0 0 ${tokens.strokeWidthThick} ${tokens.colorBrandStroke1}, inset 0 0 0 ${tokens.strokeWidthThicker} ${tokens.colorStrokeFocus1}`,\n ':hover': {\n boxShadow: `inset 0 0 0 ${tokens.strokeWidthThick} ${tokens.colorCompoundBrandStrokeHover}, inset 0 0 0 ${tokens.strokeWidthThicker} ${tokens.colorStrokeFocus1}`\n },\n ':hover:active': {\n boxShadow: `inset 0 0 0 ${tokens.strokeWidthThicker} ${tokens.colorCompoundBrandStrokePressed}, inset 0 0 0 ${tokens.strokeWidthThickest} ${tokens.colorStrokeFocus1}`\n }\n }\n});\nconst useSizeStyles = makeStyles({\n 'extra-small': {\n width: '20px',\n height: '20px',\n ':hover': {\n boxShadow: `inset 0 0 0 ${tokens.strokeWidthThin} ${tokens.colorBrandStroke1}, inset 0 0 0 ${tokens.strokeWidthThick} ${tokens.colorStrokeFocus1}`\n },\n ':hover:active': {\n border: 'none',\n boxShadow: `inset 0 0 0 ${tokens.strokeWidthThick} ${tokens.colorCompoundBrandStrokePressed}, inset 0 0 0 ${tokens.strokeWidthThicker} ${tokens.colorStrokeFocus1}`\n }\n },\n small: {\n width: '24px',\n height: '24px',\n ':hover:active': {\n border: 'none',\n boxShadow: `inset 0 0 0 ${tokens.strokeWidthThick} ${tokens.colorCompoundBrandStrokePressed}, inset 0 0 0 ${tokens.strokeWidthThicker} ${tokens.colorStrokeFocus1}`\n }\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 'use no memo';\n const { size = 'medium', shape = 'square' } = state;\n const resetStyles = useResetStyles();\n const styles = useStyles();\n const sizeStyles = useSizeStyles();\n const shapeStyles = useShapeStyles();\n const iconStyles = useIconStyles();\n const smallerSelectedStyles = size === 'small' || size === 'extra-small' ? styles.selectedSmall : '';\n state.root.className = mergeClasses(colorSwatchClassNames.root, resetStyles, sizeStyles[size], shapeStyles[shape], state.selected && styles.selected, state.selected && smallerSelectedStyles, 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"],"names":["colorSwatchClassNames","swatchCSSVars","useColorSwatchStyles_unstable","root","icon","disabledIcon","color","borderColor","useResetStyles","__resetStyles","r","s","useStyles","__styles","disabled","eoavqd","Bvxd0ez","Bs5ihcz","selected","Bgfg5da","B9xav0g","oivjwe","Bn0qgzm","B4g9neb","zhjwy3","wvpqe5","ibv6hh","u1mtju","h3c5rm","vrafjx","Bekrc4i","i8vvqc","g2u3we","icvyot","B4j52fo","irswps","E5pizo","vajtyg","j6ew2k","Bspt33j","selectedSmall","h","m","d","p","useSizeStyles","a9b677","Bqenvij","Bfsrqk8","B9zn80p","libdba","qi15n7","G6mxvm","Bpld233","B2v0cj4","qv9p00","Bg6oviu","Bk6r4ia","Bckajt6","Bone85h","hkxzgu","b661bw","kpb45w","uiygdg","rljib7","small","medium","large","useShapeStyles","rounded","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","Bw81rd7","kdpuga","dm238s","B6xbmo0","B3whbx2","circular","square","useIconStyles","sj55zd","Bhu2qc9","qhf8xq","mc9l5x","qb2dma","Be2twd7","state","size","shape","resetStyles","styles","sizeStyles","shapeStyles","iconStyles","smallerSelectedStyles","className","mergeClasses"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@fluentui/react-swatch-picker",
3
- "version": "9.2.3",
3
+ "version": "9.2.5",
4
4
  "description": "New fluentui react package",
5
5
  "main": "lib-commonjs/index.js",
6
6
  "module": "lib/index.js",
@@ -20,14 +20,14 @@
20
20
  "@fluentui/scripts-cypress": "*"
21
21
  },
22
22
  "dependencies": {
23
- "@fluentui/react-context-selector": "^9.1.75",
24
- "@fluentui/react-field": "^9.2.3",
23
+ "@fluentui/react-context-selector": "^9.1.76",
24
+ "@fluentui/react-field": "^9.2.5",
25
25
  "@fluentui/react-icons": "^2.0.245",
26
- "@fluentui/react-jsx-runtime": "^9.0.53",
26
+ "@fluentui/react-jsx-runtime": "^9.0.54",
27
27
  "@fluentui/react-shared-contexts": "^9.23.1",
28
- "@fluentui/react-tabster": "^9.24.3",
28
+ "@fluentui/react-tabster": "^9.24.5",
29
29
  "@fluentui/react-theme": "^9.1.24",
30
- "@fluentui/react-utilities": "^9.18.23",
30
+ "@fluentui/react-utilities": "^9.19.0",
31
31
  "@griffel/react": "^1.5.22",
32
32
  "@swc/helpers": "^0.5.1"
33
33
  },