@fluentui/react-swatch-picker 0.0.0-nightly-20240731-0407.1 → 0.0.0-nightly-20240816-2133.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (14) hide show
  1. package/CHANGELOG.md +13 -13
  2. package/lib/components/ColorSwatch/useColorSwatchStyles.styles.js +14 -14
  3. package/lib/components/ColorSwatch/useColorSwatchStyles.styles.js.map +1 -1
  4. package/lib/components/EmptySwatch/useEmptySwatchStyles.styles.js +13 -13
  5. package/lib/components/EmptySwatch/useEmptySwatchStyles.styles.js.map +1 -1
  6. package/lib/components/ImageSwatch/useImageSwatchStyles.styles.js +12 -12
  7. package/lib/components/ImageSwatch/useImageSwatchStyles.styles.js.map +1 -1
  8. package/lib-commonjs/components/ColorSwatch/useColorSwatchStyles.styles.js +14 -14
  9. package/lib-commonjs/components/ColorSwatch/useColorSwatchStyles.styles.js.map +1 -1
  10. package/lib-commonjs/components/EmptySwatch/useEmptySwatchStyles.styles.js +14 -14
  11. package/lib-commonjs/components/EmptySwatch/useEmptySwatchStyles.styles.js.map +1 -1
  12. package/lib-commonjs/components/ImageSwatch/useImageSwatchStyles.styles.js +12 -12
  13. package/lib-commonjs/components/ImageSwatch/useImageSwatchStyles.styles.js.map +1 -1
  14. package/package.json +10 -10
package/CHANGELOG.md CHANGED
@@ -1,26 +1,26 @@
1
1
  # Change Log - @fluentui/react-swatch-picker
2
2
 
3
- This log was last generated on Wed, 31 Jul 2024 04:17:59 GMT and should not be manually modified.
3
+ This log was last generated on Fri, 16 Aug 2024 21:43:56 GMT and should not be manually modified.
4
4
 
5
5
  <!-- Start content -->
6
6
 
7
- ## [0.0.0-nightly-20240731-0407.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-swatch-picker_v0.0.0-nightly-20240731-0407.1)
7
+ ## [0.0.0-nightly-20240816-2133.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-swatch-picker_v0.0.0-nightly-20240816-2133.1)
8
8
 
9
- Wed, 31 Jul 2024 04:17:59 GMT
10
- [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-swatch-picker_v9.1.6..@fluentui/react-swatch-picker_v0.0.0-nightly-20240731-0407.1)
9
+ Fri, 16 Aug 2024 21:43:56 GMT
10
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-swatch-picker_v9.1.6..@fluentui/react-swatch-picker_v0.0.0-nightly-20240816-2133.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-context-selector to v0.0.0-nightly-20240731-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/85947bd0979efeeddb849c91c07c547e8d562781) by beachball)
16
- - Bump @fluentui/react-jsx-runtime to v0.0.0-nightly-20240731-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/85947bd0979efeeddb849c91c07c547e8d562781) by beachball)
17
- - Bump @fluentui/react-shared-contexts to v0.0.0-nightly-20240731-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/85947bd0979efeeddb849c91c07c547e8d562781) by beachball)
18
- - Bump @fluentui/react-tabster to v0.0.0-nightly-20240731-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/85947bd0979efeeddb849c91c07c547e8d562781) by beachball)
19
- - Bump @fluentui/react-theme to v0.0.0-nightly-20240731-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/85947bd0979efeeddb849c91c07c547e8d562781) by beachball)
20
- - Bump @fluentui/react-utilities to v0.0.0-nightly-20240731-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/85947bd0979efeeddb849c91c07c547e8d562781) by beachball)
21
- - Bump @fluentui/react-provider to v0.0.0-nightly-20240731-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/85947bd0979efeeddb849c91c07c547e8d562781) by beachball)
22
- - Bump @fluentui/react-conformance to v0.0.0-nightly-20240731-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/85947bd0979efeeddb849c91c07c547e8d562781) by beachball)
23
- - Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20240731-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/85947bd0979efeeddb849c91c07c547e8d562781) by beachball)
15
+ - Bump @fluentui/react-context-selector to v0.0.0-nightly-20240816-2133.1 ([commit](https://github.com/microsoft/fluentui/commit/7d70de62d1ba4ce393c9c6839e67ecb3f1c3d7f4) by beachball)
16
+ - Bump @fluentui/react-jsx-runtime to v0.0.0-nightly-20240816-2133.1 ([commit](https://github.com/microsoft/fluentui/commit/7d70de62d1ba4ce393c9c6839e67ecb3f1c3d7f4) by beachball)
17
+ - Bump @fluentui/react-shared-contexts to v0.0.0-nightly-20240816-2133.1 ([commit](https://github.com/microsoft/fluentui/commit/7d70de62d1ba4ce393c9c6839e67ecb3f1c3d7f4) by beachball)
18
+ - Bump @fluentui/react-tabster to v0.0.0-nightly-20240816-2133.1 ([commit](https://github.com/microsoft/fluentui/commit/7d70de62d1ba4ce393c9c6839e67ecb3f1c3d7f4) by beachball)
19
+ - Bump @fluentui/react-theme to v0.0.0-nightly-20240816-2133.1 ([commit](https://github.com/microsoft/fluentui/commit/7d70de62d1ba4ce393c9c6839e67ecb3f1c3d7f4) by beachball)
20
+ - Bump @fluentui/react-utilities to v0.0.0-nightly-20240816-2133.1 ([commit](https://github.com/microsoft/fluentui/commit/7d70de62d1ba4ce393c9c6839e67ecb3f1c3d7f4) by beachball)
21
+ - Bump @fluentui/react-provider to v0.0.0-nightly-20240816-2133.1 ([commit](https://github.com/microsoft/fluentui/commit/7d70de62d1ba4ce393c9c6839e67ecb3f1c3d7f4) by beachball)
22
+ - Bump @fluentui/react-conformance to v0.0.0-nightly-20240816-2133.1 ([commit](https://github.com/microsoft/fluentui/commit/7d70de62d1ba4ce393c9c6839e67ecb3f1c3d7f4) by beachball)
23
+ - Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20240816-2133.1 ([commit](https://github.com/microsoft/fluentui/commit/7d70de62d1ba4ce393c9c6839e67ecb3f1c3d7f4) by beachball)
24
24
 
25
25
  ## [9.1.6](https://github.com/microsoft/fluentui/tree/@fluentui/react-swatch-picker_v9.1.6)
26
26
 
package/lib/components/ColorSwatch/useColorSwatchStyles.styles.js CHANGED
@@ -88,55 +88,55 @@ const useShapeStyles = /*#__PURE__*/__styles({
88
88
  Bbmb7ep: 0,
89
89
  Btl43ni: 0,
90
90
  B7oj6ja: 0,
91
- Dimara: "ft85np5",
91
+ Dimara: "f2hrd7n",
92
92
  Bw81rd7: 0,
93
93
  kdpuga: 0,
94
94
  dm238s: 0,
95
95
  B6xbmo0: 0,
96
- B3whbx2: "f2krc9w"
96
+ B3whbx2: "f194p5tz"
97
97
  },
98
98
  circular: {
99
99
  Beyfa6y: 0,
100
100
  Bbmb7ep: 0,
101
101
  Btl43ni: 0,
102
102
  B7oj6ja: 0,
103
- Dimara: "f44lkw9",
103
+ Dimara: "fjmdk2l",
104
104
  Bw81rd7: 0,
105
105
  kdpuga: 0,
106
106
  dm238s: 0,
107
107
  B6xbmo0: 0,
108
- B3whbx2: "f1062rbf"
108
+ B3whbx2: "f1kz8kca"
109
109
  },
110
110
  square: {
111
111
  Beyfa6y: 0,
112
112
  Bbmb7ep: 0,
113
113
  Btl43ni: 0,
114
114
  B7oj6ja: 0,
115
- Dimara: "f1fabniw",
115
+ Dimara: "fvdnzc",
116
116
  Bw81rd7: 0,
117
117
  kdpuga: 0,
118
118
  dm238s: 0,
119
119
  B6xbmo0: 0,
120
- B3whbx2: "fj0ryk1"
120
+ B3whbx2: "fyopk7b"
121
121
  }
122
122
  }, {
123
- d: [[".ft85np5{border-radius:var(--borderRadiusMedium);}", {
123
+ d: [[".f2hrd7n{border-radius:var(--ctrl-token-ColorSwatch-1857, var(--semantic-token-ColorSwatch-1858, var(--borderRadiusMedium)));}", {
124
124
  p: -1
125
- }], [".f2krc9w[data-fui-focus-visible]{border-radius:var(--borderRadiusMedium);}", {
125
+ }], [".f194p5tz[data-fui-focus-visible]{border-radius:var(--ctrl-token-ColorSwatch-1859, var(--semantic-token-ColorSwatch-1860, var(--borderRadiusMedium)));}", {
126
126
  p: -1
127
- }], [".f44lkw9{border-radius:var(--borderRadiusCircular);}", {
127
+ }], [".fjmdk2l{border-radius:var(--ctrl-token-ColorSwatch-1861, var(--semantic-token-ColorSwatch-1862, var(--borderRadiusCircular)));}", {
128
128
  p: -1
129
- }], [".f1062rbf[data-fui-focus-visible]{border-radius:var(--borderRadiusCircular);}", {
129
+ }], [".f1kz8kca[data-fui-focus-visible]{border-radius:var(--ctrl-token-ColorSwatch-1863, var(--semantic-token-ColorSwatch-1864, var(--borderRadiusCircular)));}", {
130
130
  p: -1
131
- }], [".f1fabniw{border-radius:var(--borderRadiusNone);}", {
131
+ }], [".fvdnzc{border-radius:var(--ctrl-token-ColorSwatch-1865, var(--semantic-token-ColorSwatch-1866, var(--borderRadiusNone)));}", {
132
132
  p: -1
133
- }], [".fj0ryk1[data-fui-focus-visible]{border-radius:var(--borderRadiusNone);}", {
133
+ }], [".fyopk7b[data-fui-focus-visible]{border-radius:var(--ctrl-token-ColorSwatch-1867, var(--semantic-token-ColorSwatch-1868, var(--borderRadiusNone)));}", {
134
134
  p: -1
135
135
  }]]
136
136
  });
137
137
  const useIconStyles = /*#__PURE__*/__styles({
138
138
  disabledIcon: {
139
- sj55zd: "fqpbvvt",
139
+ sj55zd: "f1utpkla",
140
140
  Bhu2qc9: "f14y0k3d"
141
141
  },
142
142
  icon: {
@@ -157,7 +157,7 @@ const useIconStyles = /*#__PURE__*/__styles({
157
157
  Be2twd7: "f1rt2boy"
158
158
  }
159
159
  }, {
160
- d: [".fqpbvvt{color:var(--colorNeutralForegroundInverted);}", ".f14y0k3d{filter:drop-shadow(0 1px 1px rgb(0 0 0 / 1));}", ".f1euv43f{position:absolute;}", ".f22iagw{display:flex;}", ".f7nlbp4{align-self:center;}", ".f4ybsrx{font-size:16px;}", ".fe5j1ua{font-size:20px;}", ".f1rt2boy{font-size:24px;}"]
160
+ d: [".f1utpkla{color:var(--ctrl-token-ColorSwatch-1869, var(--semantic-token-ColorSwatch-1870, var(--colorNeutralForegroundInverted)));}", ".f14y0k3d{filter:drop-shadow(0 1px 1px rgb(0 0 0 / 1));}", ".f1euv43f{position:absolute;}", ".f22iagw{display:flex;}", ".f7nlbp4{align-self:center;}", ".f4ybsrx{font-size:16px;}", ".fe5j1ua{font-size:20px;}", ".f1rt2boy{font-size:24px;}"]
161
161
  });
162
162
  /**
163
163
  * Apply styling to the ColorSwatch slots based on the state
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","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: `var(--ctrl-token-ColorSwatch-1857, var(--semantic-token-ColorSwatch-1858, ${tokens.borderRadiusMedium}))`,\n ...createCustomFocusIndicatorStyle({\n borderRadius: `var(--ctrl-token-ColorSwatch-1859, var(--semantic-token-ColorSwatch-1860, ${tokens.borderRadiusMedium}))`\n })\n },\n circular: {\n borderRadius: `var(--ctrl-token-ColorSwatch-1861, var(--semantic-token-ColorSwatch-1862, ${tokens.borderRadiusCircular}))`,\n ...createCustomFocusIndicatorStyle({\n borderRadius: `var(--ctrl-token-ColorSwatch-1863, var(--semantic-token-ColorSwatch-1864, ${tokens.borderRadiusCircular}))`\n })\n },\n square: {\n borderRadius: `var(--ctrl-token-ColorSwatch-1865, var(--semantic-token-ColorSwatch-1866, ${tokens.borderRadiusNone}))`,\n ...createCustomFocusIndicatorStyle({\n borderRadius: `var(--ctrl-token-ColorSwatch-1867, var(--semantic-token-ColorSwatch-1868, ${tokens.borderRadiusNone}))`\n })\n }\n});\nconst useIconStyles = makeStyles({\n disabledIcon: {\n color: `var(--ctrl-token-ColorSwatch-1869, var(--semantic-token-ColorSwatch-1870, ${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":[]}
package/lib/components/EmptySwatch/useEmptySwatchStyles.styles.js CHANGED
@@ -7,7 +7,7 @@ export const emptySwatchClassNames = {
7
7
  /**
8
8
  * Styles for the root slot
9
9
  */
10
- const useStyles = /*#__PURE__*/__resetStyles("r1top892", null, [".r1top892{background-color:var(--colorTransparentBackground);border:1px dashed var(--colorNeutralForeground4);}"]);
10
+ const useStyles = /*#__PURE__*/__resetStyles("r621u4i", null, [".r621u4i{background-color:var(--ctrl-token-EmptySwatch-1871, var(--semantic-token-EmptySwatch-1872, var(--colorTransparentBackground)));border:1px dashed var(--colorNeutralForeground4);}"]);
11
11
  const useSizeStyles = /*#__PURE__*/__styles({
12
12
  "extra-small": {
13
13
  a9b677: "f64fuq3",
@@ -34,49 +34,49 @@ const useShapeStyles = /*#__PURE__*/__styles({
34
34
  Bbmb7ep: 0,
35
35
  Btl43ni: 0,
36
36
  B7oj6ja: 0,
37
- Dimara: "ft85np5",
37
+ Dimara: "f1ew9f06",
38
38
  Bw81rd7: 0,
39
39
  kdpuga: 0,
40
40
  dm238s: 0,
41
41
  B6xbmo0: 0,
42
- B3whbx2: "f2krc9w"
42
+ B3whbx2: "f16invch"
43
43
  },
44
44
  circular: {
45
45
  Beyfa6y: 0,
46
46
  Bbmb7ep: 0,
47
47
  Btl43ni: 0,
48
48
  B7oj6ja: 0,
49
- Dimara: "f44lkw9",
49
+ Dimara: "fa4eixl",
50
50
  Bw81rd7: 0,
51
51
  kdpuga: 0,
52
52
  dm238s: 0,
53
53
  B6xbmo0: 0,
54
- B3whbx2: "f1062rbf"
54
+ B3whbx2: "ff05epl"
55
55
  },
56
56
  square: {
57
57
  Beyfa6y: 0,
58
58
  Bbmb7ep: 0,
59
59
  Btl43ni: 0,
60
60
  B7oj6ja: 0,
61
- Dimara: "f1fabniw",
61
+ Dimara: "fr3mano",
62
62
  Bw81rd7: 0,
63
63
  kdpuga: 0,
64
64
  dm238s: 0,
65
65
  B6xbmo0: 0,
66
- B3whbx2: "fj0ryk1"
66
+ B3whbx2: "f17bm0zt"
67
67
  }
68
68
  }, {
69
- d: [[".ft85np5{border-radius:var(--borderRadiusMedium);}", {
69
+ d: [[".f1ew9f06{border-radius:var(--ctrl-token-EmptySwatch-1873, var(--semantic-token-EmptySwatch-1874, var(--borderRadiusMedium)));}", {
70
70
  p: -1
71
- }], [".f2krc9w[data-fui-focus-visible]{border-radius:var(--borderRadiusMedium);}", {
71
+ }], [".f16invch[data-fui-focus-visible]{border-radius:var(--ctrl-token-EmptySwatch-1875, var(--semantic-token-EmptySwatch-1876, var(--borderRadiusMedium)));}", {
72
72
  p: -1
73
- }], [".f44lkw9{border-radius:var(--borderRadiusCircular);}", {
73
+ }], [".fa4eixl{border-radius:var(--ctrl-token-EmptySwatch-1877, var(--semantic-token-EmptySwatch-1878, var(--borderRadiusCircular)));}", {
74
74
  p: -1
75
- }], [".f1062rbf[data-fui-focus-visible]{border-radius:var(--borderRadiusCircular);}", {
75
+ }], [".ff05epl[data-fui-focus-visible]{border-radius:var(--ctrl-token-EmptySwatch-1879, var(--semantic-token-EmptySwatch-1880, var(--borderRadiusCircular)));}", {
76
76
  p: -1
77
- }], [".f1fabniw{border-radius:var(--borderRadiusNone);}", {
77
+ }], [".fr3mano{border-radius:var(--ctrl-token-EmptySwatch-1881, var(--semantic-token-EmptySwatch-1882, var(--borderRadiusNone)));}", {
78
78
  p: -1
79
- }], [".fj0ryk1[data-fui-focus-visible]{border-radius:var(--borderRadiusNone);}", {
79
+ }], [".f17bm0zt[data-fui-focus-visible]{border-radius:var(--ctrl-token-EmptySwatch-1883, var(--semantic-token-EmptySwatch-1884, var(--borderRadiusNone)));}", {
80
80
  p: -1
81
81
  }]]
82
82
  });
package/lib/components/EmptySwatch/useEmptySwatchStyles.styles.js.map CHANGED
@@ -1 +1 @@
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 'use no memo';\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,aAAa;;EACb,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
+ {"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: `var(--ctrl-token-EmptySwatch-1871, var(--semantic-token-EmptySwatch-1872, ${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: `var(--ctrl-token-EmptySwatch-1873, var(--semantic-token-EmptySwatch-1874, ${tokens.borderRadiusMedium}))`,\n ...createCustomFocusIndicatorStyle({\n borderRadius: `var(--ctrl-token-EmptySwatch-1875, var(--semantic-token-EmptySwatch-1876, ${tokens.borderRadiusMedium}))`\n })\n },\n circular: {\n borderRadius: `var(--ctrl-token-EmptySwatch-1877, var(--semantic-token-EmptySwatch-1878, ${tokens.borderRadiusCircular}))`,\n ...createCustomFocusIndicatorStyle({\n borderRadius: `var(--ctrl-token-EmptySwatch-1879, var(--semantic-token-EmptySwatch-1880, ${tokens.borderRadiusCircular}))`\n })\n },\n square: {\n borderRadius: `var(--ctrl-token-EmptySwatch-1881, var(--semantic-token-EmptySwatch-1882, ${tokens.borderRadiusNone}))`,\n ...createCustomFocusIndicatorStyle({\n borderRadius: `var(--ctrl-token-EmptySwatch-1883, var(--semantic-token-EmptySwatch-1884, ${tokens.borderRadiusNone}))`\n })\n }\n});\n/**\n * Apply styling to the EmptySwatch slots based on the state\n */ export const useEmptySwatchStyles_unstable = (state)=>{\n 'use no memo';\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,gNAGrB,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,aAAa;;EACb,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":[]}
package/lib/components/ImageSwatch/useImageSwatchStyles.styles.js CHANGED
@@ -71,49 +71,49 @@ const useShapeStyles = /*#__PURE__*/__styles({
71
71
  Bbmb7ep: 0,
72
72
  Btl43ni: 0,
73
73
  B7oj6ja: 0,
74
- Dimara: "ft85np5",
74
+ Dimara: "f9ohv6d",
75
75
  Bw81rd7: 0,
76
76
  kdpuga: 0,
77
77
  dm238s: 0,
78
78
  B6xbmo0: 0,
79
- B3whbx2: "f2krc9w"
79
+ B3whbx2: "fw2d1ge"
80
80
  },
81
81
  circular: {
82
82
  Beyfa6y: 0,
83
83
  Bbmb7ep: 0,
84
84
  Btl43ni: 0,
85
85
  B7oj6ja: 0,
86
- Dimara: "f44lkw9",
86
+ Dimara: "fhdsvwe",
87
87
  Bw81rd7: 0,
88
88
  kdpuga: 0,
89
89
  dm238s: 0,
90
90
  B6xbmo0: 0,
91
- B3whbx2: "f1062rbf"
91
+ B3whbx2: "f1h95b9s"
92
92
  },
93
93
  square: {
94
94
  Beyfa6y: 0,
95
95
  Bbmb7ep: 0,
96
96
  Btl43ni: 0,
97
97
  B7oj6ja: 0,
98
- Dimara: "f1fabniw",
98
+ Dimara: "f5mmp9l",
99
99
  Bw81rd7: 0,
100
100
  kdpuga: 0,
101
101
  dm238s: 0,
102
102
  B6xbmo0: 0,
103
- B3whbx2: "fj0ryk1"
103
+ B3whbx2: "frbz790"
104
104
  }
105
105
  }, {
106
- d: [[".ft85np5{border-radius:var(--borderRadiusMedium);}", {
106
+ d: [[".f9ohv6d{border-radius:var(--ctrl-token-ImageSwatch-1885, var(--semantic-token-ImageSwatch-1886, var(--borderRadiusMedium)));}", {
107
107
  p: -1
108
- }], [".f2krc9w[data-fui-focus-visible]{border-radius:var(--borderRadiusMedium);}", {
108
+ }], [".fw2d1ge[data-fui-focus-visible]{border-radius:var(--ctrl-token-ImageSwatch-1887, var(--semantic-token-ImageSwatch-1888, var(--borderRadiusMedium)));}", {
109
109
  p: -1
110
- }], [".f44lkw9{border-radius:var(--borderRadiusCircular);}", {
110
+ }], [".fhdsvwe{border-radius:var(--ctrl-token-ImageSwatch-1889, var(--semantic-token-ImageSwatch-1890, var(--borderRadiusCircular)));}", {
111
111
  p: -1
112
- }], [".f1062rbf[data-fui-focus-visible]{border-radius:var(--borderRadiusCircular);}", {
112
+ }], [".f1h95b9s[data-fui-focus-visible]{border-radius:var(--ctrl-token-ImageSwatch-1891, var(--semantic-token-ImageSwatch-1892, var(--borderRadiusCircular)));}", {
113
113
  p: -1
114
- }], [".f1fabniw{border-radius:var(--borderRadiusNone);}", {
114
+ }], [".f5mmp9l{border-radius:var(--ctrl-token-ImageSwatch-1893, var(--semantic-token-ImageSwatch-1894, var(--borderRadiusNone)));}", {
115
115
  p: -1
116
- }], [".fj0ryk1[data-fui-focus-visible]{border-radius:var(--borderRadiusNone);}", {
116
+ }], [".frbz790[data-fui-focus-visible]{border-radius:var(--ctrl-token-ImageSwatch-1895, var(--semantic-token-ImageSwatch-1896, var(--borderRadiusNone)));}", {
117
117
  p: -1
118
118
  }]]
119
119
  });
package/lib/components/ImageSwatch/useImageSwatchStyles.styles.js.map CHANGED
@@ -1 +1 @@
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.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 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.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});\n/**\n * Apply styling to the ImageSwatch slots based on the state\n */ export const useImageSwatchStyles_unstable = (state)=>{\n 'use no memo';\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,aAAa;;EACb,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
+ {"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.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 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.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: `var(--ctrl-token-ImageSwatch-1885, var(--semantic-token-ImageSwatch-1886, ${tokens.borderRadiusMedium}))`,\n ...createCustomFocusIndicatorStyle({\n borderRadius: `var(--ctrl-token-ImageSwatch-1887, var(--semantic-token-ImageSwatch-1888, ${tokens.borderRadiusMedium}))`\n })\n },\n circular: {\n borderRadius: `var(--ctrl-token-ImageSwatch-1889, var(--semantic-token-ImageSwatch-1890, ${tokens.borderRadiusCircular}))`,\n ...createCustomFocusIndicatorStyle({\n borderRadius: `var(--ctrl-token-ImageSwatch-1891, var(--semantic-token-ImageSwatch-1892, ${tokens.borderRadiusCircular}))`\n })\n },\n square: {\n borderRadius: `var(--ctrl-token-ImageSwatch-1893, var(--semantic-token-ImageSwatch-1894, ${tokens.borderRadiusNone}))`,\n ...createCustomFocusIndicatorStyle({\n borderRadius: `var(--ctrl-token-ImageSwatch-1895, var(--semantic-token-ImageSwatch-1896, ${tokens.borderRadiusNone}))`\n })\n }\n});\n/**\n * Apply styling to the ImageSwatch slots based on the state\n */ export const useImageSwatchStyles_unstable = (state)=>{\n 'use no memo';\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,aAAa;;EACb,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":[]}
package/lib-commonjs/components/ColorSwatch/useColorSwatchStyles.styles.js CHANGED
@@ -142,71 +142,71 @@ const useShapeStyles = /*#__PURE__*/ (0, _react.__styles)({
142
142
  Bbmb7ep: 0,
143
143
  Btl43ni: 0,
144
144
  B7oj6ja: 0,
145
- Dimara: "ft85np5",
145
+ Dimara: "f2hrd7n",
146
146
  Bw81rd7: 0,
147
147
  kdpuga: 0,
148
148
  dm238s: 0,
149
149
  B6xbmo0: 0,
150
- B3whbx2: "f2krc9w"
150
+ B3whbx2: "f194p5tz"
151
151
  },
152
152
  circular: {
153
153
  Beyfa6y: 0,
154
154
  Bbmb7ep: 0,
155
155
  Btl43ni: 0,
156
156
  B7oj6ja: 0,
157
- Dimara: "f44lkw9",
157
+ Dimara: "fjmdk2l",
158
158
  Bw81rd7: 0,
159
159
  kdpuga: 0,
160
160
  dm238s: 0,
161
161
  B6xbmo0: 0,
162
- B3whbx2: "f1062rbf"
162
+ B3whbx2: "f1kz8kca"
163
163
  },
164
164
  square: {
165
165
  Beyfa6y: 0,
166
166
  Bbmb7ep: 0,
167
167
  Btl43ni: 0,
168
168
  B7oj6ja: 0,
169
- Dimara: "f1fabniw",
169
+ Dimara: "fvdnzc",
170
170
  Bw81rd7: 0,
171
171
  kdpuga: 0,
172
172
  dm238s: 0,
173
173
  B6xbmo0: 0,
174
- B3whbx2: "fj0ryk1"
174
+ B3whbx2: "fyopk7b"
175
175
  }
176
176
  }, {
177
177
  d: [
178
178
  [
179
- ".ft85np5{border-radius:var(--borderRadiusMedium);}",
179
+ ".f2hrd7n{border-radius:var(--ctrl-token-ColorSwatch-1857, var(--semantic-token-ColorSwatch-1858, var(--borderRadiusMedium)));}",
180
180
  {
181
181
  p: -1
182
182
  }
183
183
  ],
184
184
  [
185
- ".f2krc9w[data-fui-focus-visible]{border-radius:var(--borderRadiusMedium);}",
185
+ ".f194p5tz[data-fui-focus-visible]{border-radius:var(--ctrl-token-ColorSwatch-1859, var(--semantic-token-ColorSwatch-1860, var(--borderRadiusMedium)));}",
186
186
  {
187
187
  p: -1
188
188
  }
189
189
  ],
190
190
  [
191
- ".f44lkw9{border-radius:var(--borderRadiusCircular);}",
191
+ ".fjmdk2l{border-radius:var(--ctrl-token-ColorSwatch-1861, var(--semantic-token-ColorSwatch-1862, var(--borderRadiusCircular)));}",
192
192
  {
193
193
  p: -1
194
194
  }
195
195
  ],
196
196
  [
197
- ".f1062rbf[data-fui-focus-visible]{border-radius:var(--borderRadiusCircular);}",
197
+ ".f1kz8kca[data-fui-focus-visible]{border-radius:var(--ctrl-token-ColorSwatch-1863, var(--semantic-token-ColorSwatch-1864, var(--borderRadiusCircular)));}",
198
198
  {
199
199
  p: -1
200
200
  }
201
201
  ],
202
202
  [
203
- ".f1fabniw{border-radius:var(--borderRadiusNone);}",
203
+ ".fvdnzc{border-radius:var(--ctrl-token-ColorSwatch-1865, var(--semantic-token-ColorSwatch-1866, var(--borderRadiusNone)));}",
204
204
  {
205
205
  p: -1
206
206
  }
207
207
  ],
208
208
  [
209
- ".fj0ryk1[data-fui-focus-visible]{border-radius:var(--borderRadiusNone);}",
209
+ ".fyopk7b[data-fui-focus-visible]{border-radius:var(--ctrl-token-ColorSwatch-1867, var(--semantic-token-ColorSwatch-1868, var(--borderRadiusNone)));}",
210
210
  {
211
211
  p: -1
212
212
  }
@@ -215,7 +215,7 @@ const useShapeStyles = /*#__PURE__*/ (0, _react.__styles)({
215
215
  });
216
216
  const useIconStyles = /*#__PURE__*/ (0, _react.__styles)({
217
217
  disabledIcon: {
218
- sj55zd: "fqpbvvt",
218
+ sj55zd: "f1utpkla",
219
219
  Bhu2qc9: "f14y0k3d"
220
220
  },
221
221
  icon: {
@@ -237,7 +237,7 @@ const useIconStyles = /*#__PURE__*/ (0, _react.__styles)({
237
237
  }
238
238
  }, {
239
239
  d: [
240
- ".fqpbvvt{color:var(--colorNeutralForegroundInverted);}",
240
+ ".f1utpkla{color:var(--ctrl-token-ColorSwatch-1869, var(--semantic-token-ColorSwatch-1870, var(--colorNeutralForegroundInverted)));}",
241
241
  ".f14y0k3d{filter:drop-shadow(0 1px 1px rgb(0 0 0 / 1));}",
242
242
  ".f1euv43f{position:absolute;}",
243
243
  ".f22iagw{display:flex;}",
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});\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: `var(--ctrl-token-ColorSwatch-1857, var(--semantic-token-ColorSwatch-1858, ${tokens.borderRadiusMedium}))`,\n ...createCustomFocusIndicatorStyle({\n borderRadius: `var(--ctrl-token-ColorSwatch-1859, var(--semantic-token-ColorSwatch-1860, ${tokens.borderRadiusMedium}))`\n })\n },\n circular: {\n borderRadius: `var(--ctrl-token-ColorSwatch-1861, var(--semantic-token-ColorSwatch-1862, ${tokens.borderRadiusCircular}))`,\n ...createCustomFocusIndicatorStyle({\n borderRadius: `var(--ctrl-token-ColorSwatch-1863, var(--semantic-token-ColorSwatch-1864, ${tokens.borderRadiusCircular}))`\n })\n },\n square: {\n borderRadius: `var(--ctrl-token-ColorSwatch-1865, var(--semantic-token-ColorSwatch-1866, ${tokens.borderRadiusNone}))`,\n ...createCustomFocusIndicatorStyle({\n borderRadius: `var(--ctrl-token-ColorSwatch-1867, var(--semantic-token-ColorSwatch-1868, ${tokens.borderRadiusNone}))`\n })\n }\n});\nconst useIconStyles = makeStyles({\n disabledIcon: {\n color: `var(--ctrl-token-ColorSwatch-1869, var(--semantic-token-ColorSwatch-1870, ${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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"}
package/lib-commonjs/components/EmptySwatch/useEmptySwatchStyles.styles.js CHANGED
@@ -22,8 +22,8 @@ const emptySwatchClassNames = {
22
22
  };
23
23
  /**
24
24
  * Styles for the root slot
25
- */ const useStyles = /*#__PURE__*/ (0, _react.__resetStyles)("r1top892", null, [
26
- ".r1top892{background-color:var(--colorTransparentBackground);border:1px dashed var(--colorNeutralForeground4);}"
25
+ */ const useStyles = /*#__PURE__*/ (0, _react.__resetStyles)("r621u4i", null, [
26
+ ".r621u4i{background-color:var(--ctrl-token-EmptySwatch-1871, var(--semantic-token-EmptySwatch-1872, var(--colorTransparentBackground)));border:1px dashed var(--colorNeutralForeground4);}"
27
27
  ]);
28
28
  const useSizeStyles = /*#__PURE__*/ (0, _react.__styles)({
29
29
  "extra-small": {
@@ -60,71 +60,71 @@ const useShapeStyles = /*#__PURE__*/ (0, _react.__styles)({
60
60
  Bbmb7ep: 0,
61
61
  Btl43ni: 0,
62
62
  B7oj6ja: 0,
63
- Dimara: "ft85np5",
63
+ Dimara: "f1ew9f06",
64
64
  Bw81rd7: 0,
65
65
  kdpuga: 0,
66
66
  dm238s: 0,
67
67
  B6xbmo0: 0,
68
- B3whbx2: "f2krc9w"
68
+ B3whbx2: "f16invch"
69
69
  },
70
70
  circular: {
71
71
  Beyfa6y: 0,
72
72
  Bbmb7ep: 0,
73
73
  Btl43ni: 0,
74
74
  B7oj6ja: 0,
75
- Dimara: "f44lkw9",
75
+ Dimara: "fa4eixl",
76
76
  Bw81rd7: 0,
77
77
  kdpuga: 0,
78
78
  dm238s: 0,
79
79
  B6xbmo0: 0,
80
- B3whbx2: "f1062rbf"
80
+ B3whbx2: "ff05epl"
81
81
  },
82
82
  square: {
83
83
  Beyfa6y: 0,
84
84
  Bbmb7ep: 0,
85
85
  Btl43ni: 0,
86
86
  B7oj6ja: 0,
87
- Dimara: "f1fabniw",
87
+ Dimara: "fr3mano",
88
88
  Bw81rd7: 0,
89
89
  kdpuga: 0,
90
90
  dm238s: 0,
91
91
  B6xbmo0: 0,
92
- B3whbx2: "fj0ryk1"
92
+ B3whbx2: "f17bm0zt"
93
93
  }
94
94
  }, {
95
95
  d: [
96
96
  [
97
- ".ft85np5{border-radius:var(--borderRadiusMedium);}",
97
+ ".f1ew9f06{border-radius:var(--ctrl-token-EmptySwatch-1873, var(--semantic-token-EmptySwatch-1874, var(--borderRadiusMedium)));}",
98
98
  {
99
99
  p: -1
100
100
  }
101
101
  ],
102
102
  [
103
- ".f2krc9w[data-fui-focus-visible]{border-radius:var(--borderRadiusMedium);}",
103
+ ".f16invch[data-fui-focus-visible]{border-radius:var(--ctrl-token-EmptySwatch-1875, var(--semantic-token-EmptySwatch-1876, var(--borderRadiusMedium)));}",
104
104
  {
105
105
  p: -1
106
106
  }
107
107
  ],
108
108
  [
109
- ".f44lkw9{border-radius:var(--borderRadiusCircular);}",
109
+ ".fa4eixl{border-radius:var(--ctrl-token-EmptySwatch-1877, var(--semantic-token-EmptySwatch-1878, var(--borderRadiusCircular)));}",
110
110
  {
111
111
  p: -1
112
112
  }
113
113
  ],
114
114
  [
115
- ".f1062rbf[data-fui-focus-visible]{border-radius:var(--borderRadiusCircular);}",
115
+ ".ff05epl[data-fui-focus-visible]{border-radius:var(--ctrl-token-EmptySwatch-1879, var(--semantic-token-EmptySwatch-1880, var(--borderRadiusCircular)));}",
116
116
  {
117
117
  p: -1
118
118
  }
119
119
  ],
120
120
  [
121
- ".f1fabniw{border-radius:var(--borderRadiusNone);}",
121
+ ".fr3mano{border-radius:var(--ctrl-token-EmptySwatch-1881, var(--semantic-token-EmptySwatch-1882, var(--borderRadiusNone)));}",
122
122
  {
123
123
  p: -1
124
124
  }
125
125
  ],
126
126
  [
127
- ".fj0ryk1[data-fui-focus-visible]{border-radius:var(--borderRadiusNone);}",
127
+ ".f17bm0zt[data-fui-focus-visible]{border-radius:var(--ctrl-token-EmptySwatch-1883, var(--semantic-token-EmptySwatch-1884, var(--borderRadiusNone)));}",
128
128
  {
129
129
  p: -1
130
130
  }
package/lib-commonjs/components/EmptySwatch/useEmptySwatchStyles.styles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"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 'use no memo';\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"],"names":["emptySwatchClassNames","useEmptySwatchStyles_unstable","root","useStyles","__resetStyles","useSizeStyles","__styles","a9b677","Bqenvij","small","medium","large","d","useShapeStyles","rounded","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","Bw81rd7","kdpuga","dm238s","B6xbmo0","B3whbx2","circular","square","p","state","styles","sizeStyles","shapeStyles","_state_size","size","_state_shape","className","mergeClasses","shape"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAGaA,qBAAqB;eAArBA;;IAiDIC,6BAA6B;eAA7BA;;;uBApDyC;AAGnD,MAAMD,wBAAwB;IACjCE,MAAM;AACV;AACA;;CAEA,GAAI,MAAMC,YAAS,WAAA,GAAGC,IAAAA,oBAAA,EAAA,YAAA,MAAA;IAAA;CAGrB;AACD,MAAMC,gBAAa,WAAA,GAAGC,IAAAA,eAAA,EAAA;IAAA,eAAA;QAAAC,QAAA;QAAAC,SAAA;IAAA;IAAAC,OAAA;QAAAF,QAAA;QAAAC,SAAA;IAAA;IAAAE,QAAA;QAAAH,QAAA;QAAAC,SAAA;IAAA;IAAAG,OAAA;QAAAJ,QAAA;QAAAC,SAAA;IAAA;AAAA,GAAA;IAAAI,GAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;KAAA;AAAA;AAkBtB,MAAMC,iBAAc,WAAA,GAAGP,IAAAA,eAAA,EAAA;IAAAQ,SAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,QAAA;QAAAC,SAAA;QAAAC,QAAA;QAAAC,QAAA;QAAAC,SAAA;QAAAC,SAAA;IAAA;IAAAC,UAAA;QAAAV,SAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,QAAA;QAAAC,SAAA;QAAAC,QAAA;QAAAC,QAAA;QAAAC,SAAA;QAAAC,SAAA;IAAA;IAAAE,QAAA;QAAAX,SAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,QAAA;QAAAC,SAAA;QAAAC,QAAA;QAAAC,QAAA;QAAAC,SAAA;QAAAC,SAAA;IAAA;AAAA,GAAA;IAAAZ,GAAA;QAAA;YAAA;YAAA;gBAAAe,GAAA,CAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,GAAA,CAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,GAAA,CAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,GAAA,CAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,GAAA,CAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,GAAA,CAAA;YAAA;SAAA;KAAA;AAAA;AAsBZ,MAAM1B,gCAAiC2B,CAAAA;IAC9C;IACA,MAAMC,SAAS1B;IACf,MAAM2B,aAAazB;IACnB,MAAM0B,cAAclB;IACpB,IAAImB;IACJ,MAAMC,OAAO,AAACD,CAAAA,cAAcJ,MAAMK,IAAI,AAAJA,MAAU,QAAQD,gBAAgB,KAAK,IAAIA,cAAc;IAC3F,IAAIE;IACJN,MAAM1B,IAAI,CAACiC,SAAS,GAAGC,IAAAA,mBAAY,EAACpC,sBAAsBE,IAAI,EAAE2B,QAAQC,UAAU,CAACG,KAAK,EAAEF,WAAW,CAAC,AAACG,CAAAA,eAAeN,MAAMS,KAAK,AAALA,MAAW,QAAQH,iBAAiB,KAAK,IAAIA,eAAe,SAAS,EAAEN,MAAM1B,IAAI,CAACiC,SAAS;IACvN,OAAOP;AACX"}
1
+ {"version":3,"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: `var(--ctrl-token-EmptySwatch-1871, var(--semantic-token-EmptySwatch-1872, ${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: `var(--ctrl-token-EmptySwatch-1873, var(--semantic-token-EmptySwatch-1874, ${tokens.borderRadiusMedium}))`,\n ...createCustomFocusIndicatorStyle({\n borderRadius: `var(--ctrl-token-EmptySwatch-1875, var(--semantic-token-EmptySwatch-1876, ${tokens.borderRadiusMedium}))`\n })\n },\n circular: {\n borderRadius: `var(--ctrl-token-EmptySwatch-1877, var(--semantic-token-EmptySwatch-1878, ${tokens.borderRadiusCircular}))`,\n ...createCustomFocusIndicatorStyle({\n borderRadius: `var(--ctrl-token-EmptySwatch-1879, var(--semantic-token-EmptySwatch-1880, ${tokens.borderRadiusCircular}))`\n })\n },\n square: {\n borderRadius: `var(--ctrl-token-EmptySwatch-1881, var(--semantic-token-EmptySwatch-1882, ${tokens.borderRadiusNone}))`,\n ...createCustomFocusIndicatorStyle({\n borderRadius: `var(--ctrl-token-EmptySwatch-1883, var(--semantic-token-EmptySwatch-1884, ${tokens.borderRadiusNone}))`\n })\n }\n});\n/**\n * Apply styling to the EmptySwatch slots based on the state\n */ export const useEmptySwatchStyles_unstable = (state)=>{\n 'use no memo';\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"],"names":["emptySwatchClassNames","useEmptySwatchStyles_unstable","root","useStyles","__resetStyles","useSizeStyles","__styles","a9b677","Bqenvij","small","medium","large","d","useShapeStyles","rounded","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","Bw81rd7","kdpuga","dm238s","B6xbmo0","B3whbx2","circular","square","p","state","styles","sizeStyles","shapeStyles","_state_size","size","_state_shape","className","mergeClasses","shape"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAGaA,qBAAqB;eAArBA;;IAiDIC,6BAA6B;eAA7BA;;;uBApDyC;AAGnD,MAAMD,wBAAwB;IACjCE,MAAM;AACV;AACA;;CAEA,GAAI,MAAMC,YAAS,WAAA,GAAGC,IAAAA,oBAAA,EAAA,WAAA,MAAA;IAAA;CAGrB;AACD,MAAMC,gBAAa,WAAA,GAAGC,IAAAA,eAAA,EAAA;IAAA,eAAA;QAAAC,QAAA;QAAAC,SAAA;IAAA;IAAAC,OAAA;QAAAF,QAAA;QAAAC,SAAA;IAAA;IAAAE,QAAA;QAAAH,QAAA;QAAAC,SAAA;IAAA;IAAAG,OAAA;QAAAJ,QAAA;QAAAC,SAAA;IAAA;AAAA,GAAA;IAAAI,GAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;KAAA;AAAA;AAkBtB,MAAMC,iBAAc,WAAA,GAAGP,IAAAA,eAAA,EAAA;IAAAQ,SAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,QAAA;QAAAC,SAAA;QAAAC,QAAA;QAAAC,QAAA;QAAAC,SAAA;QAAAC,SAAA;IAAA;IAAAC,UAAA;QAAAV,SAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,QAAA;QAAAC,SAAA;QAAAC,QAAA;QAAAC,QAAA;QAAAC,SAAA;QAAAC,SAAA;IAAA;IAAAE,QAAA;QAAAX,SAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,QAAA;QAAAC,SAAA;QAAAC,QAAA;QAAAC,QAAA;QAAAC,SAAA;QAAAC,SAAA;IAAA;AAAA,GAAA;IAAAZ,GAAA;QAAA;YAAA;YAAA;gBAAAe,GAAA,CAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,GAAA,CAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,GAAA,CAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,GAAA,CAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,GAAA,CAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,GAAA,CAAA;YAAA;SAAA;KAAA;AAAA;AAsBZ,MAAM1B,gCAAiC2B,CAAAA;IAC9C;IACA,MAAMC,SAAS1B;IACf,MAAM2B,aAAazB;IACnB,MAAM0B,cAAclB;IACpB,IAAImB;IACJ,MAAMC,OAAO,AAACD,CAAAA,cAAcJ,MAAMK,IAAI,AAAJA,MAAU,QAAQD,gBAAgB,KAAK,IAAIA,cAAc;IAC3F,IAAIE;IACJN,MAAM1B,IAAI,CAACiC,SAAS,GAAGC,IAAAA,mBAAY,EAACpC,sBAAsBE,IAAI,EAAE2B,QAAQC,UAAU,CAACG,KAAK,EAAEF,WAAW,CAAC,AAACG,CAAAA,eAAeN,MAAMS,KAAK,AAALA,MAAW,QAAQH,iBAAiB,KAAK,IAAIA,eAAe,SAAS,EAAEN,MAAM1B,IAAI,CAACiC,SAAS;IACvN,OAAOP;AACX"}
package/lib-commonjs/components/ImageSwatch/useImageSwatchStyles.styles.js CHANGED
@@ -119,71 +119,71 @@ const useShapeStyles = /*#__PURE__*/ (0, _react.__styles)({
119
119
  Bbmb7ep: 0,
120
120
  Btl43ni: 0,
121
121
  B7oj6ja: 0,
122
- Dimara: "ft85np5",
122
+ Dimara: "f9ohv6d",
123
123
  Bw81rd7: 0,
124
124
  kdpuga: 0,
125
125
  dm238s: 0,
126
126
  B6xbmo0: 0,
127
- B3whbx2: "f2krc9w"
127
+ B3whbx2: "fw2d1ge"
128
128
  },
129
129
  circular: {
130
130
  Beyfa6y: 0,
131
131
  Bbmb7ep: 0,
132
132
  Btl43ni: 0,
133
133
  B7oj6ja: 0,
134
- Dimara: "f44lkw9",
134
+ Dimara: "fhdsvwe",
135
135
  Bw81rd7: 0,
136
136
  kdpuga: 0,
137
137
  dm238s: 0,
138
138
  B6xbmo0: 0,
139
- B3whbx2: "f1062rbf"
139
+ B3whbx2: "f1h95b9s"
140
140
  },
141
141
  square: {
142
142
  Beyfa6y: 0,
143
143
  Bbmb7ep: 0,
144
144
  Btl43ni: 0,
145
145
  B7oj6ja: 0,
146
- Dimara: "f1fabniw",
146
+ Dimara: "f5mmp9l",
147
147
  Bw81rd7: 0,
148
148
  kdpuga: 0,
149
149
  dm238s: 0,
150
150
  B6xbmo0: 0,
151
- B3whbx2: "fj0ryk1"
151
+ B3whbx2: "frbz790"
152
152
  }
153
153
  }, {
154
154
  d: [
155
155
  [
156
- ".ft85np5{border-radius:var(--borderRadiusMedium);}",
156
+ ".f9ohv6d{border-radius:var(--ctrl-token-ImageSwatch-1885, var(--semantic-token-ImageSwatch-1886, var(--borderRadiusMedium)));}",
157
157
  {
158
158
  p: -1
159
159
  }
160
160
  ],
161
161
  [
162
- ".f2krc9w[data-fui-focus-visible]{border-radius:var(--borderRadiusMedium);}",
162
+ ".fw2d1ge[data-fui-focus-visible]{border-radius:var(--ctrl-token-ImageSwatch-1887, var(--semantic-token-ImageSwatch-1888, var(--borderRadiusMedium)));}",
163
163
  {
164
164
  p: -1
165
165
  }
166
166
  ],
167
167
  [
168
- ".f44lkw9{border-radius:var(--borderRadiusCircular);}",
168
+ ".fhdsvwe{border-radius:var(--ctrl-token-ImageSwatch-1889, var(--semantic-token-ImageSwatch-1890, var(--borderRadiusCircular)));}",
169
169
  {
170
170
  p: -1
171
171
  }
172
172
  ],
173
173
  [
174
- ".f1062rbf[data-fui-focus-visible]{border-radius:var(--borderRadiusCircular);}",
174
+ ".f1h95b9s[data-fui-focus-visible]{border-radius:var(--ctrl-token-ImageSwatch-1891, var(--semantic-token-ImageSwatch-1892, var(--borderRadiusCircular)));}",
175
175
  {
176
176
  p: -1
177
177
  }
178
178
  ],
179
179
  [
180
- ".f1fabniw{border-radius:var(--borderRadiusNone);}",
180
+ ".f5mmp9l{border-radius:var(--ctrl-token-ImageSwatch-1893, var(--semantic-token-ImageSwatch-1894, var(--borderRadiusNone)));}",
181
181
  {
182
182
  p: -1
183
183
  }
184
184
  ],
185
185
  [
186
- ".fj0ryk1[data-fui-focus-visible]{border-radius:var(--borderRadiusNone);}",
186
+ ".frbz790[data-fui-focus-visible]{border-radius:var(--ctrl-token-ImageSwatch-1895, var(--semantic-token-ImageSwatch-1896, var(--borderRadiusNone)));}",
187
187
  {
188
188
  p: -1
189
189
  }
package/lib-commonjs/components/ImageSwatch/useImageSwatchStyles.styles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"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.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 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.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});\n/**\n * Apply styling to the ImageSwatch slots based on the state\n */ export const useImageSwatchStyles_unstable = (state)=>{\n 'use no memo';\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"],"names":["imageSwatchClassNames","useImageSwatchStyles_unstable","root","useStyles","__resetStyles","r","s","useStylesSelected","__styles","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","state","styles","selectedStyles","sizeStyles","shapeStyles","size","shape","className","mergeClasses"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
1
+ {"version":3,"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.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 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.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: `var(--ctrl-token-ImageSwatch-1885, var(--semantic-token-ImageSwatch-1886, ${tokens.borderRadiusMedium}))`,\n ...createCustomFocusIndicatorStyle({\n borderRadius: `var(--ctrl-token-ImageSwatch-1887, var(--semantic-token-ImageSwatch-1888, ${tokens.borderRadiusMedium}))`\n })\n },\n circular: {\n borderRadius: `var(--ctrl-token-ImageSwatch-1889, var(--semantic-token-ImageSwatch-1890, ${tokens.borderRadiusCircular}))`,\n ...createCustomFocusIndicatorStyle({\n borderRadius: `var(--ctrl-token-ImageSwatch-1891, var(--semantic-token-ImageSwatch-1892, ${tokens.borderRadiusCircular}))`\n })\n },\n square: {\n borderRadius: `var(--ctrl-token-ImageSwatch-1893, var(--semantic-token-ImageSwatch-1894, ${tokens.borderRadiusNone}))`,\n ...createCustomFocusIndicatorStyle({\n borderRadius: `var(--ctrl-token-ImageSwatch-1895, var(--semantic-token-ImageSwatch-1896, ${tokens.borderRadiusNone}))`\n })\n }\n});\n/**\n * Apply styling to the ImageSwatch slots based on the state\n */ export const useImageSwatchStyles_unstable = (state)=>{\n 'use no memo';\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"],"names":["imageSwatchClassNames","useImageSwatchStyles_unstable","root","useStyles","__resetStyles","r","s","useStylesSelected","__styles","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","state","styles","selectedStyles","sizeStyles","shapeStyles","size","shape","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": "0.0.0-nightly-20240731-0407.1",
3
+ "version": "0.0.0-nightly-20240816-2133.1",
4
4
  "description": "New fluentui react package",
5
5
  "main": "lib-commonjs/index.js",
6
6
  "module": "lib/index.js",
@@ -25,22 +25,22 @@
25
25
  "bundle-size": "monosize measure"
26
26
  },
27
27
  "devDependencies": {
28
- "@fluentui/react-provider": "0.0.0-nightly-20240731-0407.1",
28
+ "@fluentui/react-provider": "0.0.0-nightly-20240816-2133.1",
29
29
  "@fluentui/eslint-plugin": "*",
30
- "@fluentui/react-conformance": "0.0.0-nightly-20240731-0407.1",
31
- "@fluentui/react-conformance-griffel": "0.0.0-nightly-20240731-0407.1",
30
+ "@fluentui/react-conformance": "0.0.0-nightly-20240816-2133.1",
31
+ "@fluentui/react-conformance-griffel": "0.0.0-nightly-20240816-2133.1",
32
32
  "@fluentui/scripts-api-extractor": "*",
33
33
  "@fluentui/scripts-cypress": "*",
34
34
  "@fluentui/scripts-tasks": "*"
35
35
  },
36
36
  "dependencies": {
37
- "@fluentui/react-context-selector": "0.0.0-nightly-20240731-0407.1",
37
+ "@fluentui/react-context-selector": "0.0.0-nightly-20240816-2133.1",
38
38
  "@fluentui/react-icons": "^2.0.245",
39
- "@fluentui/react-jsx-runtime": "0.0.0-nightly-20240731-0407.1",
40
- "@fluentui/react-shared-contexts": "0.0.0-nightly-20240731-0407.1",
41
- "@fluentui/react-tabster": "0.0.0-nightly-20240731-0407.1",
42
- "@fluentui/react-theme": "0.0.0-nightly-20240731-0407.1",
43
- "@fluentui/react-utilities": "0.0.0-nightly-20240731-0407.1",
39
+ "@fluentui/react-jsx-runtime": "0.0.0-nightly-20240816-2133.1",
40
+ "@fluentui/react-shared-contexts": "0.0.0-nightly-20240816-2133.1",
41
+ "@fluentui/react-tabster": "0.0.0-nightly-20240816-2133.1",
42
+ "@fluentui/react-theme": "0.0.0-nightly-20240816-2133.1",
43
+ "@fluentui/react-utilities": "0.0.0-nightly-20240816-2133.1",
44
44
  "@griffel/react": "^1.5.22",
45
45
  "@swc/helpers": "^0.5.1"
46
46
  },