@fluentui/react-color-picker 9.1.3 → 9.2.0

package/CHANGELOG.md

@@ -1,12 +1,22 @@
 # Change Log - @fluentui/react-color-picker
 
-This log was last generated on Fri, 27 Jun 2025 13:36:33 GMT and should not be manually modified.
+This log was last generated on Thu, 17 Jul 2025 13:45:36 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.2.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-color-picker_v9.2.0)
+
+Thu, 17 Jul 2025 13:45:36 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-color-picker_v9.1.3..@fluentui/react-color-picker_v9.2.0)
+
+### Minor changes
+
+- feat: enable griffel raw styles ([PR #34853](https://github.com/microsoft/fluentui/pull/34853) by martinhochel@microsoft.com)
+- Bump @fluentui/react-tabster to v9.26.0 ([PR #34862](https://github.com/microsoft/fluentui/pull/34862) by beachball)
+
 ## [9.1.3](https://github.com/microsoft/fluentui/tree/@fluentui/react-color-picker_v9.1.3)
 
-Fri, 27 Jun 2025 13:36:33 GMT 
+Fri, 27 Jun 2025 13:39:41 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-color-picker_v9.1.2..@fluentui/react-color-picker_v9.1.3)
 
 ### Patches

package/lib/components/AlphaSlider/useAlphaSliderStyles.styles.raw.js

@@ -0,0 +1,56 @@
+import { makeStyles, mergeClasses } from '@griffel/react';
+import { tokens } from '@fluentui/react-theme';
+import { useColorSliderStyles_unstable } from '../ColorSlider/useColorSliderStyles.styles';
+const TRANSPARENT_IMAGE_URL = 'https://fabricweb.azureedge.net/fabric-website/assets/images/transparent-pattern.png';
+export const alphaSliderClassNames = {
+    root: 'fui-AlphaSlider',
+    rail: 'fui-AlphaSlider__rail',
+    thumb: 'fui-AlphaSlider__thumb',
+    input: 'fui-AlphaSlider__input'
+};
+export const alphaSliderCSSVars = {
+    sliderDirectionVar: `--fui-AlphaSlider--direction`,
+    sliderProgressVar: `--fui-AlphaSlider--progress`,
+    thumbColorVar: `--fui-AlphaSlider__thumb--color`,
+    railColorVar: `--fui-AlphaSlider__rail--color`
+};
+/**
+ * Styles for the root slot
+ */ const useStyles = makeStyles({
+    rail: {
+        border: `1px solid ${tokens.colorNeutralStroke1}`,
+        backgroundImage: `linear-gradient(var(${alphaSliderCSSVars.sliderDirectionVar}), transparent, var(${alphaSliderCSSVars.railColorVar})), url(${TRANSPARENT_IMAGE_URL})`
+    }
+});
+/**
+ * Styles for the thumb slot
+ */ const useThumbStyles = makeStyles({
+    thumb: {
+        backgroundColor: tokens.colorNeutralBackground1,
+        '::before': {
+            backgroundColor: `var(${alphaSliderCSSVars.thumbColorVar})`
+        }
+    },
+    horizontal: {
+        transform: 'translateX(-50%)',
+        left: `var(${alphaSliderCSSVars.sliderProgressVar})`
+    },
+    vertical: {
+        transform: 'translateY(50%)',
+        bottom: `var(${alphaSliderCSSVars.sliderProgressVar})`
+    }
+});
+/**
+ * Apply styling to the AlphaSlider slots based on the state
+ */ export const useAlphaSliderStyles_unstable = (state)=>{
+    'use no memo';
+    const styles = useStyles();
+    const thumbStyles = useThumbStyles();
+    state.root.className = mergeClasses(alphaSliderClassNames.root, state.root.className);
+    state.input.className = mergeClasses(alphaSliderClassNames.input, state.input.className);
+    state.rail.className = mergeClasses(alphaSliderClassNames.rail, styles.rail, state.rail.className);
+    state.thumb.className = mergeClasses(alphaSliderClassNames.thumb, thumbStyles.thumb, state.vertical ? thumbStyles.vertical : thumbStyles.horizontal, state.thumb.className);
+    state.thumb.className = mergeClasses(alphaSliderClassNames.thumb, thumbStyles.thumb, state.vertical ? thumbStyles.vertical : thumbStyles.horizontal, state.thumb.className);
+    useColorSliderStyles_unstable(state);
+    return state;
+};

package/lib/components/AlphaSlider/useAlphaSliderStyles.styles.raw.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/AlphaSlider/useAlphaSliderStyles.styles.ts"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { useColorSliderStyles_unstable } from '../ColorSlider/useColorSliderStyles.styles';\nimport type { AlphaSliderSlots, AlphaSliderState } from './AlphaSlider.types';\n\nconst TRANSPARENT_IMAGE_URL = 'https://fabricweb.azureedge.net/fabric-website/assets/images/transparent-pattern.png';\n\nexport const alphaSliderClassNames: SlotClassNames<AlphaSliderSlots> = {\n  root: 'fui-AlphaSlider',\n  rail: 'fui-AlphaSlider__rail',\n  thumb: 'fui-AlphaSlider__thumb',\n  input: 'fui-AlphaSlider__input',\n};\n\nexport const alphaSliderCSSVars = {\n  sliderDirectionVar: `--fui-AlphaSlider--direction`,\n  sliderProgressVar: `--fui-AlphaSlider--progress`,\n  thumbColorVar: `--fui-AlphaSlider__thumb--color`,\n  railColorVar: `--fui-AlphaSlider__rail--color`,\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  rail: {\n    border: `1px solid ${tokens.colorNeutralStroke1}`,\n    backgroundImage: `linear-gradient(var(${alphaSliderCSSVars.sliderDirectionVar}), transparent, var(${alphaSliderCSSVars.railColorVar})), url(${TRANSPARENT_IMAGE_URL})`,\n  },\n});\n\n/**\n * Styles for the thumb slot\n */\nconst useThumbStyles = makeStyles({\n  thumb: {\n    backgroundColor: tokens.colorNeutralBackground1,\n    '::before': {\n      backgroundColor: `var(${alphaSliderCSSVars.thumbColorVar})`,\n    },\n  },\n  horizontal: {\n    transform: 'translateX(-50%)',\n    left: `var(${alphaSliderCSSVars.sliderProgressVar})`,\n  },\n  vertical: {\n    transform: 'translateY(50%)',\n    bottom: `var(${alphaSliderCSSVars.sliderProgressVar})`,\n  },\n});\n\n/**\n * Apply styling to the AlphaSlider slots based on the state\n */\nexport const useAlphaSliderStyles_unstable = (state: AlphaSliderState): AlphaSliderState => {\n  'use no memo';\n\n  const styles = useStyles();\n  const thumbStyles = useThumbStyles();\n  state.root.className = mergeClasses(alphaSliderClassNames.root, state.root.className);\n  state.input.className = mergeClasses(alphaSliderClassNames.input, state.input.className);\n  state.rail.className = mergeClasses(alphaSliderClassNames.rail, styles.rail, state.rail.className);\n\n  state.thumb.className = mergeClasses(\n    alphaSliderClassNames.thumb,\n    thumbStyles.thumb,\n    state.vertical ? thumbStyles.vertical : thumbStyles.horizontal,\n    state.thumb.className,\n  );\n\n  state.thumb.className = mergeClasses(\n    alphaSliderClassNames.thumb,\n    thumbStyles.thumb,\n    state.vertical ? thumbStyles.vertical : thumbStyles.horizontal,\n    state.thumb.className,\n  );\n\n  useColorSliderStyles_unstable(state);\n  return state;\n};\n"],"names":["makeStyles","mergeClasses","tokens","useColorSliderStyles_unstable","TRANSPARENT_IMAGE_URL","alphaSliderClassNames","root","rail","thumb","input","alphaSliderCSSVars","sliderDirectionVar","sliderProgressVar","thumbColorVar","railColorVar","useStyles","border","colorNeutralStroke1","backgroundImage","useThumbStyles","backgroundColor","colorNeutralBackground1","horizontal","transform","left","vertical","bottom","useAlphaSliderStyles_unstable","state","styles","thumbStyles","className"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAC1D,SAASC,MAAM,QAAQ,wBAAwB;AAE/C,SAASC,6BAA6B,QAAQ,6CAA6C;AAG3F,MAAMC,wBAAwB;AAE9B,OAAO,MAAMC,wBAA0D;IACrEC,MAAM;IACNC,MAAM;IACNC,OAAO;IACPC,OAAO;AACT,EAAE;AAEF,OAAO,MAAMC,qBAAqB;IAChCC,oBAAoB,CAAC,4BAA4B,CAAC;IAClDC,mBAAmB,CAAC,2BAA2B,CAAC;IAChDC,eAAe,CAAC,+BAA+B,CAAC;IAChDC,cAAc,CAAC,8BAA8B,CAAC;AAChD,EAAE;AAEF;;CAEC,GACD,MAAMC,YAAYf,WAAW;IAC3BO,MAAM;QACJS,QAAQ,CAAC,UAAU,EAAEd,OAAOe,mBAAmB,CAAC,CAAC;QACjDC,iBAAiB,CAAC,oBAAoB,EAAER,mBAAmBC,kBAAkB,CAAC,oBAAoB,EAAED,mBAAmBI,YAAY,CAAC,QAAQ,EAAEV,sBAAsB,CAAC,CAAC;IACxK;AACF;AAEA;;CAEC,GACD,MAAMe,iBAAiBnB,WAAW;IAChCQ,OAAO;QACLY,iBAAiBlB,OAAOmB,uBAAuB;QAC/C,YAAY;YACVD,iBAAiB,CAAC,IAAI,EAAEV,mBAAmBG,aAAa,CAAC,CAAC,CAAC;QAC7D;IACF;IACAS,YAAY;QACVC,WAAW;QACXC,MAAM,CAAC,IAAI,EAAEd,mBAAmBE,iBAAiB,CAAC,CAAC,CAAC;IACtD;IACAa,UAAU;QACRF,WAAW;QACXG,QAAQ,CAAC,IAAI,EAAEhB,mBAAmBE,iBAAiB,CAAC,CAAC,CAAC;IACxD;AACF;AAEA;;CAEC,GACD,OAAO,MAAMe,gCAAgC,CAACC;IAC5C;IAEA,MAAMC,SAASd;IACf,MAAMe,cAAcX;IACpBS,MAAMtB,IAAI,CAACyB,SAAS,GAAG9B,aAAaI,sBAAsBC,IAAI,EAAEsB,MAAMtB,IAAI,CAACyB,SAAS;IACpFH,MAAMnB,KAAK,CAACsB,SAAS,GAAG9B,aAAaI,sBAAsBI,KAAK,EAAEmB,MAAMnB,KAAK,CAACsB,SAAS;IACvFH,MAAMrB,IAAI,CAACwB,SAAS,GAAG9B,aAAaI,sBAAsBE,IAAI,EAAEsB,OAAOtB,IAAI,EAAEqB,MAAMrB,IAAI,CAACwB,SAAS;IAEjGH,MAAMpB,KAAK,CAACuB,SAAS,GAAG9B,aACtBI,sBAAsBG,KAAK,EAC3BsB,YAAYtB,KAAK,EACjBoB,MAAMH,QAAQ,GAAGK,YAAYL,QAAQ,GAAGK,YAAYR,UAAU,EAC9DM,MAAMpB,KAAK,CAACuB,SAAS;IAGvBH,MAAMpB,KAAK,CAACuB,SAAS,GAAG9B,aACtBI,sBAAsBG,KAAK,EAC3BsB,YAAYtB,KAAK,EACjBoB,MAAMH,QAAQ,GAAGK,YAAYL,QAAQ,GAAGK,YAAYR,UAAU,EAC9DM,MAAMpB,KAAK,CAACuB,SAAS;IAGvB5B,8BAA8ByB;IAC9B,OAAOA;AACT,EAAE"}

package/lib/components/ColorArea/useColorAreaStyles.styles.raw.js

@@ -0,0 +1,107 @@
+import { makeResetStyles, makeStyles, mergeClasses, shorthands } from '@griffel/react';
+import { tokens } from '@fluentui/react-theme';
+import { createFocusOutlineStyle } from '@fluentui/react-tabster';
+export const colorAreaClassNames = {
+    root: 'fui-ColorArea',
+    thumb: 'fui-ColorArea__thumb',
+    inputX: 'fui-ColorArea__inputX',
+    inputY: 'fui-ColorArea__inputY'
+};
+export const colorAreaCSSVars = {
+    areaXProgressVar: `--fui-AreaX--progress`,
+    areaYProgressVar: `--fui-AreaY--progress`,
+    thumbColorVar: `--fui-Area__thumb--color`,
+    mainColorVar: `--fui-Area--main-color`
+};
+// Internal CSS variables
+const thumbSizeVar = `--fui-Slider__thumb--size`;
+/**
+ * Styles for the root slot
+ */ const useRootStyles = makeResetStyles({
+    position: 'relative',
+    border: `1px solid ${tokens.colorNeutralStroke1}`,
+    background: `linear-gradient(to bottom, transparent, #000), linear-gradient(to right, #fff, transparent), var(${colorAreaCSSVars.mainColorVar})`,
+    forcedColorAdjust: 'none',
+    display: 'inline-grid',
+    touchAction: 'none',
+    alignItems: 'start',
+    justifyItems: 'start',
+    [thumbSizeVar]: '20px',
+    minWidth: '300px',
+    minHeight: '300px',
+    boxSizing: 'border-box',
+    marginBottom: tokens.spacingVerticalSNudge
+});
+/**
+ * Styles for the thumb slot
+ */ const useThumbStyles = makeStyles({
+    thumb: {
+        position: 'absolute',
+        width: `var(${thumbSizeVar})`,
+        height: `var(${thumbSizeVar})`,
+        pointerEvents: 'none',
+        outlineStyle: 'none',
+        forcedColorAdjust: 'none',
+        borderRadius: tokens.borderRadiusCircular,
+        border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralForeground4}`,
+        boxShadow: tokens.shadow4,
+        backgroundColor: `var(${colorAreaCSSVars.thumbColorVar})`,
+        transform: 'translate(-50%, 50%)',
+        left: `var(${colorAreaCSSVars.areaXProgressVar})`,
+        bottom: `var(${colorAreaCSSVars.areaYProgressVar})`,
+        '::before': {
+            position: 'absolute',
+            inset: '0px',
+            borderRadius: tokens.borderRadiusCircular,
+            boxSizing: 'border-box',
+            content: "''",
+            border: `${tokens.strokeWidthThick} solid ${tokens.colorNeutralBackground1}`
+        }
+    },
+    focusIndicator: createFocusOutlineStyle({
+        selector: 'focus-within',
+        style: {
+            outlineWidth: tokens.strokeWidthThick,
+            ...shorthands.borderWidth(tokens.strokeWidthThick),
+            outlineRadius: tokens.borderRadiusCircular
+        }
+    })
+});
+/**
+ * Styles for the Input slot
+ */ const useInputStyles = makeStyles({
+    input: {
+        overflow: 'hidden',
+        position: 'absolute',
+        pointerEvents: 'none',
+        top: 0,
+        left: 0,
+        opacity: 0,
+        padding: '0',
+        margin: '0',
+        width: '100%',
+        height: '100%'
+    }
+});
+const useShapeStyles = makeStyles({
+    rounded: {
+        borderRadius: tokens.borderRadiusMedium
+    },
+    square: {
+        borderRadius: tokens.borderRadiusNone
+    }
+});
+/**
+ * Apply styling to the ColorArea slots based on the state
+ */ export const useColorAreaStyles_unstable = (state)=>{
+    'use no memo';
+    const rootStyles = useRootStyles();
+    const thumbStyles = useThumbStyles();
+    const inputStyles = useInputStyles();
+    const shapeStyles = useShapeStyles();
+    state.root.className = mergeClasses(colorAreaClassNames.root, rootStyles, shapeStyles[state.shape || 'rounded'], state.root.className);
+    state.thumb.className = mergeClasses(colorAreaClassNames.thumb, thumbStyles.thumb, thumbStyles.focusIndicator, state.thumb.className);
+    state.inputX.className = mergeClasses(colorAreaClassNames.inputX, inputStyles.input, state.inputX.className);
+    state.inputY.className = mergeClasses(colorAreaClassNames.inputY, inputStyles.input, state.inputY.className);
+    return state;
+};

package/lib/components/ColorArea/useColorAreaStyles.styles.raw.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/ColorArea/useColorAreaStyles.styles.ts"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { tokens } from '@fluentui/react-theme';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport type { ColorAreaSlots, ColorAreaState } from './ColorArea.types';\n\nexport const colorAreaClassNames: SlotClassNames<ColorAreaSlots> = {\n  root: 'fui-ColorArea',\n  thumb: 'fui-ColorArea__thumb',\n  inputX: 'fui-ColorArea__inputX',\n  inputY: 'fui-ColorArea__inputY',\n};\n\nexport const colorAreaCSSVars = {\n  areaXProgressVar: `--fui-AreaX--progress`,\n  areaYProgressVar: `--fui-AreaY--progress`,\n  thumbColorVar: `--fui-Area__thumb--color`,\n  mainColorVar: `--fui-Area--main-color`,\n};\n\n// Internal CSS variables\nconst thumbSizeVar = `--fui-Slider__thumb--size`;\n\n/**\n * Styles for the root slot\n */\nconst useRootStyles = makeResetStyles({\n  position: 'relative',\n  border: `1px solid ${tokens.colorNeutralStroke1}`,\n  background: `linear-gradient(to bottom, transparent, #000), linear-gradient(to right, #fff, transparent), var(${colorAreaCSSVars.mainColorVar})`,\n  forcedColorAdjust: 'none',\n  display: 'inline-grid',\n  touchAction: 'none',\n  alignItems: 'start',\n  justifyItems: 'start',\n  [thumbSizeVar]: '20px',\n  minWidth: '300px',\n  minHeight: '300px',\n  boxSizing: 'border-box',\n  marginBottom: tokens.spacingVerticalSNudge,\n});\n\n/**\n * Styles for the thumb slot\n */\nconst useThumbStyles = makeStyles({\n  thumb: {\n    position: 'absolute',\n    width: `var(${thumbSizeVar})`,\n    height: `var(${thumbSizeVar})`,\n    pointerEvents: 'none',\n    outlineStyle: 'none',\n    forcedColorAdjust: 'none',\n    borderRadius: tokens.borderRadiusCircular,\n    border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralForeground4}`,\n    boxShadow: tokens.shadow4,\n    backgroundColor: `var(${colorAreaCSSVars.thumbColorVar})`,\n    transform: 'translate(-50%, 50%)',\n    left: `var(${colorAreaCSSVars.areaXProgressVar})`,\n    bottom: `var(${colorAreaCSSVars.areaYProgressVar})`,\n    '::before': {\n      position: 'absolute',\n      inset: '0px',\n      borderRadius: tokens.borderRadiusCircular,\n      boxSizing: 'border-box',\n      content: \"''\",\n      border: `${tokens.strokeWidthThick} solid ${tokens.colorNeutralBackground1}`,\n    },\n  },\n  focusIndicator: createFocusOutlineStyle({\n    selector: 'focus-within',\n    style: {\n      outlineWidth: tokens.strokeWidthThick,\n      ...shorthands.borderWidth(tokens.strokeWidthThick),\n      outlineRadius: tokens.borderRadiusCircular,\n    },\n  }),\n});\n\n/**\n * Styles for the Input slot\n */\nconst useInputStyles = makeStyles({\n  input: {\n    overflow: 'hidden',\n    position: 'absolute',\n    pointerEvents: 'none',\n    top: 0,\n    left: 0,\n    opacity: 0,\n    padding: '0',\n    margin: '0',\n    width: '100%',\n    height: '100%',\n  },\n});\n\nconst useShapeStyles = makeStyles({\n  rounded: {\n    borderRadius: tokens.borderRadiusMedium,\n  },\n  square: {\n    borderRadius: tokens.borderRadiusNone,\n  },\n});\n\n/**\n * Apply styling to the ColorArea slots based on the state\n */\nexport const useColorAreaStyles_unstable = (state: ColorAreaState): ColorAreaState => {\n  'use no memo';\n\n  const rootStyles = useRootStyles();\n  const thumbStyles = useThumbStyles();\n  const inputStyles = useInputStyles();\n  const shapeStyles = useShapeStyles();\n\n  state.root.className = mergeClasses(\n    colorAreaClassNames.root,\n    rootStyles,\n    shapeStyles[state.shape || 'rounded'],\n    state.root.className,\n  );\n\n  state.thumb.className = mergeClasses(\n    colorAreaClassNames.thumb,\n    thumbStyles.thumb,\n    thumbStyles.focusIndicator,\n    state.thumb.className,\n  );\n\n  state.inputX.className = mergeClasses(colorAreaClassNames.inputX, inputStyles.input, state.inputX.className);\n\n  state.inputY.className = mergeClasses(colorAreaClassNames.inputY, inputStyles.input, state.inputY.className);\n  return state;\n};\n"],"names":["makeResetStyles","makeStyles","mergeClasses","shorthands","tokens","createFocusOutlineStyle","colorAreaClassNames","root","thumb","inputX","inputY","colorAreaCSSVars","areaXProgressVar","areaYProgressVar","thumbColorVar","mainColorVar","thumbSizeVar","useRootStyles","position","border","colorNeutralStroke1","background","forcedColorAdjust","display","touchAction","alignItems","justifyItems","minWidth","minHeight","boxSizing","marginBottom","spacingVerticalSNudge","useThumbStyles","width","height","pointerEvents","outlineStyle","borderRadius","borderRadiusCircular","strokeWidthThin","colorNeutralForeground4","boxShadow","shadow4","backgroundColor","transform","left","bottom","inset","content","strokeWidthThick","colorNeutralBackground1","focusIndicator","selector","style","outlineWidth","borderWidth","outlineRadius","useInputStyles","input","overflow","top","opacity","padding","margin","useShapeStyles","rounded","borderRadiusMedium","square","borderRadiusNone","useColorAreaStyles_unstable","state","rootStyles","thumbStyles","inputStyles","shapeStyles","className","shape"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}

package/lib/components/ColorPicker/useColorPickerStyles.styles.raw.js

@@ -0,0 +1,22 @@
+import { makeStyles, mergeClasses } from '@griffel/react';
+import { tokens } from '@fluentui/react-theme';
+export const colorPickerClassNames = {
+    root: 'fui-ColorPicker'
+};
+/**
+ * Styles for the root slot
+ */ const useStyles = makeStyles({
+    root: {
+        display: 'flex',
+        flexDirection: 'column',
+        gap: tokens.spacingVerticalXS
+    }
+});
+/**
+ * Apply styling to the ColorPicker slots based on the state
+ */ export const useColorPickerStyles_unstable = (state)=>{
+    'use no memo';
+    const styles = useStyles();
+    state.root.className = mergeClasses(colorPickerClassNames.root, styles.root, state.root.className);
+    return state;
+};

package/lib/components/ColorPicker/useColorPickerStyles.styles.raw.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/ColorPicker/useColorPickerStyles.styles.ts"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { ColorPickerSlots, ColorPickerState } from './ColorPicker.types';\nimport { tokens } from '@fluentui/react-theme';\n\nexport const colorPickerClassNames: SlotClassNames<ColorPickerSlots> = {\n  root: 'fui-ColorPicker',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  root: {\n    display: 'flex',\n    flexDirection: 'column',\n    gap: tokens.spacingVerticalXS,\n  },\n});\n\n/**\n * Apply styling to the ColorPicker slots based on the state\n */\nexport const useColorPickerStyles_unstable = (state: ColorPickerState): ColorPickerState => {\n  'use no memo';\n\n  const styles = useStyles();\n  state.root.className = mergeClasses(colorPickerClassNames.root, styles.root, state.root.className);\n\n  return state;\n};\n"],"names":["makeStyles","mergeClasses","tokens","colorPickerClassNames","root","useStyles","display","flexDirection","gap","spacingVerticalXS","useColorPickerStyles_unstable","state","styles","className"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAG1D,SAASC,MAAM,QAAQ,wBAAwB;AAE/C,OAAO,MAAMC,wBAA0D;IACrEC,MAAM;AACR,EAAE;AAEF;;CAEC,GACD,MAAMC,YAAYL,WAAW;IAC3BI,MAAM;QACJE,SAAS;QACTC,eAAe;QACfC,KAAKN,OAAOO,iBAAiB;IAC/B;AACF;AAEA;;CAEC,GACD,OAAO,MAAMC,gCAAgC,CAACC;IAC5C;IAEA,MAAMC,SAASP;IACfM,MAAMP,IAAI,CAACS,SAAS,GAAGZ,aAAaE,sBAAsBC,IAAI,EAAEQ,OAAOR,IAAI,EAAEO,MAAMP,IAAI,CAACS,SAAS;IAEjG,OAAOF;AACT,EAAE"}

package/lib/components/ColorSlider/useColorSliderStyles.styles.raw.js

@@ -0,0 +1,192 @@
+import { makeStyles, makeResetStyles, mergeClasses } from '@griffel/react';
+import { tokens } from '@fluentui/react-theme';
+export const colorSliderClassNames = {
+    root: 'fui-ColorSlider',
+    rail: 'fui-ColorSlider__rail',
+    thumb: 'fui-ColorSlider__thumb',
+    input: 'fui-ColorSlider__input'
+};
+export const colorSliderCSSVars = {
+    sliderDirectionVar: `--fui-Slider--direction`,
+    sliderProgressVar: `--fui-Slider--progress`,
+    thumbColorVar: `--fui-Slider__thumb--color`,
+    railColorVar: `--fui-Slider__rail--color`,
+    thumbSizeVar: `--fui-Slider__thumb--size`,
+    railSizeVar: `--fui-Slider__rail--size`
+};
+const hueBackground = `linear-gradient(${[
+    `var(${colorSliderCSSVars.sliderDirectionVar})`,
+    'red',
+    'fuchsia',
+    'blue',
+    'aqua',
+    'lime',
+    'yellow',
+    'red'
+].join(',')})`;
+/**
+ * Styles for the root slot
+ */ const useRootStyles = makeResetStyles({
+    position: 'relative',
+    display: 'inline-grid',
+    touchAction: 'none',
+    alignItems: 'center',
+    justifyItems: 'center',
+    [colorSliderCSSVars.thumbSizeVar]: '20px',
+    [colorSliderCSSVars.railSizeVar]: '20px',
+    minHeight: '32px'
+});
+const useStyles = makeStyles({
+    horizontal: {
+        minWidth: '200px',
+        // 3x3 grid with the rail and thumb in the center cell [2,2] and the hidden input stretching across all cells
+        gridTemplateRows: `1fr var(${colorSliderCSSVars.thumbSizeVar}) 1fr`,
+        gridTemplateColumns: `1fr 100% 1fr`
+    },
+    vertical: {
+        minHeight: '280px',
+        // 3x3 grid with the rail and thumb in the center cell [2,2] and the hidden input stretching across all cells
+        gridTemplateRows: `1fr 100% 1fr`,
+        gridTemplateColumns: `1fr var(${colorSliderCSSVars.thumbSizeVar}) 1fr`
+    }
+});
+const useChannelStyles = makeStyles({
+    hue: {
+        backgroundImage: hueBackground
+    },
+    saturation: {
+        backgroundImage: `linear-gradient(to right, #808080, var(${colorSliderCSSVars.railColorVar}))`
+    },
+    value: {
+        backgroundImage: `linear-gradient(to right, #000, var(${colorSliderCSSVars.railColorVar}))`
+    }
+});
+/**
+ * Styles for the rail slot
+ */ const useRailStyles = makeStyles({
+    rail: {
+        pointerEvents: 'none',
+        gridRowStart: '2',
+        gridRowEnd: '2',
+        gridColumnStart: '2',
+        gridColumnEnd: '2',
+        position: 'relative',
+        forcedColorAdjust: 'none',
+        outlineWidth: '1px',
+        outlineStyle: 'solid',
+        outlineColor: tokens.colorTransparentStroke,
+        '::before': {
+            content: "''",
+            position: 'absolute'
+        }
+    },
+    horizontal: {
+        width: '100%',
+        height: `var(${colorSliderCSSVars.railSizeVar})`,
+        '::before': {
+            left: '-1px',
+            right: '-1px',
+            height: `var(${colorSliderCSSVars.railSizeVar})`
+        }
+    },
+    vertical: {
+        width: `var(${colorSliderCSSVars.railSizeVar})`,
+        height: '100%',
+        '::before': {
+            width: `var(${colorSliderCSSVars.railSizeVar})`,
+            top: '-1px',
+            bottom: '1px'
+        }
+    }
+});
+/**
+ * Styles for the thumb slot
+ */ const useThumbStyles = makeStyles({
+    thumb: {
+        gridRowStart: '2',
+        gridRowEnd: '2',
+        gridColumnStart: '2',
+        gridColumnEnd: '2',
+        position: 'absolute',
+        width: `var(${colorSliderCSSVars.thumbSizeVar})`,
+        height: `var(${colorSliderCSSVars.thumbSizeVar})`,
+        pointerEvents: 'none',
+        outlineStyle: 'none',
+        forcedColorAdjust: 'none',
+        borderRadius: tokens.borderRadiusCircular,
+        border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralForeground4}`,
+        boxShadow: tokens.shadow4,
+        backgroundColor: `var(${colorSliderCSSVars.thumbColorVar})`,
+        '::before': {
+            position: 'absolute',
+            inset: '0px',
+            borderRadius: tokens.borderRadiusCircular,
+            boxSizing: 'border-box',
+            content: "''",
+            border: `${tokens.strokeWidthThick} solid ${tokens.colorNeutralBackground1}`
+        }
+    },
+    horizontal: {
+        transform: 'translateX(-50%)',
+        left: `var(${colorSliderCSSVars.sliderProgressVar})`
+    },
+    vertical: {
+        transform: 'translateY(50%)',
+        bottom: `var(${colorSliderCSSVars.sliderProgressVar})`
+    }
+});
+const useShapeStyles = makeStyles({
+    rounded: {
+        borderRadius: tokens.borderRadiusMedium
+    },
+    square: {
+        borderRadius: tokens.borderRadiusNone
+    }
+});
+/**
+ * Styles for the Input slot
+ */ const useInputStyles = makeStyles({
+    input: {
+        cursor: 'pointer',
+        opacity: 0,
+        gridRowStart: '1',
+        gridRowEnd: '-1',
+        gridColumnStart: '1',
+        gridColumnEnd: '-1',
+        padding: '0',
+        margin: '0',
+        [`:focus-visible ~ .${colorSliderClassNames.thumb}`]: {
+            border: `2px solid ${tokens.colorStrokeFocus2}`,
+            outline: `${tokens.strokeWidthThick} solid ${tokens.colorTransparentStroke}`,
+            borderRadius: tokens.borderRadiusCircular
+        }
+    },
+    horizontal: {
+        height: `var(${colorSliderCSSVars.thumbSizeVar})`,
+        width: '100%'
+    },
+    vertical: {
+        height: '100%',
+        width: `var(${colorSliderCSSVars.thumbSizeVar})`,
+        'writing-mode': 'vertical-lr',
+        direction: 'rtl'
+    }
+});
+/**
+ * Apply styling to the ColorSlider slots based on the state
+ */ export const useColorSliderStyles_unstable = (state)=>{
+    'use no memo';
+    const rootStyles = useRootStyles();
+    const styles = useStyles();
+    const railStyles = useRailStyles();
+    const thumbStyles = useThumbStyles();
+    const inputStyles = useInputStyles();
+    const shapeStyles = useShapeStyles();
+    const channelStyles = useChannelStyles();
+    const isVertical = state.vertical;
+    state.root.className = mergeClasses(colorSliderClassNames.root, rootStyles, isVertical ? styles.vertical : styles.horizontal, state.root.className);
+    state.rail.className = mergeClasses(colorSliderClassNames.rail, railStyles.rail, channelStyles[state.channel || 'hue'], shapeStyles[state.shape || 'rounded'], isVertical ? railStyles.vertical : railStyles.horizontal, state.rail.className);
+    state.thumb.className = mergeClasses(colorSliderClassNames.thumb, thumbStyles.thumb, isVertical ? thumbStyles.vertical : thumbStyles.horizontal, state.thumb.className);
+    state.input.className = mergeClasses(colorSliderClassNames.input, inputStyles.input, isVertical ? inputStyles.vertical : inputStyles.horizontal, state.input.className);
+    return state;
+};

package/lib/components/ColorSlider/useColorSliderStyles.styles.raw.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/ColorSlider/useColorSliderStyles.styles.ts"],"sourcesContent":["import { makeStyles, makeResetStyles, mergeClasses } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { tokens } from '@fluentui/react-theme';\nimport type { ColorSliderSlots, ColorSliderState } from './ColorSlider.types';\n\nexport const colorSliderClassNames: SlotClassNames<ColorSliderSlots> = {\n  root: 'fui-ColorSlider',\n  rail: 'fui-ColorSlider__rail',\n  thumb: 'fui-ColorSlider__thumb',\n  input: 'fui-ColorSlider__input',\n};\n\nexport const colorSliderCSSVars = {\n  sliderDirectionVar: `--fui-Slider--direction`,\n  sliderProgressVar: `--fui-Slider--progress`,\n  thumbColorVar: `--fui-Slider__thumb--color`,\n  railColorVar: `--fui-Slider__rail--color`,\n  thumbSizeVar: `--fui-Slider__thumb--size`,\n  railSizeVar: `--fui-Slider__rail--size`,\n};\n\nconst hueBackground = `linear-gradient(${[\n  `var(${colorSliderCSSVars.sliderDirectionVar})`,\n  'red',\n  'fuchsia',\n  'blue',\n  'aqua',\n  'lime',\n  'yellow',\n  'red',\n].join(',')})`;\n\n/**\n * Styles for the root slot\n */\nconst useRootStyles = makeResetStyles({\n  position: 'relative',\n  display: 'inline-grid',\n  touchAction: 'none',\n  alignItems: 'center',\n  justifyItems: 'center',\n  [colorSliderCSSVars.thumbSizeVar]: '20px',\n  [colorSliderCSSVars.railSizeVar]: '20px',\n  minHeight: '32px',\n});\n\nconst useStyles = makeStyles({\n  horizontal: {\n    minWidth: '200px',\n    // 3x3 grid with the rail and thumb in the center cell [2,2] and the hidden input stretching across all cells\n    gridTemplateRows: `1fr var(${colorSliderCSSVars.thumbSizeVar}) 1fr`,\n    gridTemplateColumns: `1fr 100% 1fr`,\n  },\n\n  vertical: {\n    minHeight: '280px',\n    // 3x3 grid with the rail and thumb in the center cell [2,2] and the hidden input stretching across all cells\n    gridTemplateRows: `1fr 100% 1fr`,\n    gridTemplateColumns: `1fr var(${colorSliderCSSVars.thumbSizeVar}) 1fr`,\n  },\n});\n\nconst useChannelStyles = makeStyles({\n  hue: {\n    backgroundImage: hueBackground,\n  },\n  saturation: {\n    backgroundImage: `linear-gradient(to right, #808080, var(${colorSliderCSSVars.railColorVar}))`,\n  },\n  value: {\n    backgroundImage: `linear-gradient(to right, #000, var(${colorSliderCSSVars.railColorVar}))`,\n  },\n});\n\n/**\n * Styles for the rail slot\n */\nconst useRailStyles = makeStyles({\n  rail: {\n    pointerEvents: 'none',\n    gridRowStart: '2',\n    gridRowEnd: '2',\n    gridColumnStart: '2',\n    gridColumnEnd: '2',\n    position: 'relative',\n    forcedColorAdjust: 'none',\n    outlineWidth: '1px',\n    outlineStyle: 'solid',\n    outlineColor: tokens.colorTransparentStroke,\n    '::before': {\n      content: \"''\",\n      position: 'absolute',\n    },\n  },\n\n  horizontal: {\n    width: '100%',\n    height: `var(${colorSliderCSSVars.railSizeVar})`,\n    '::before': {\n      left: '-1px',\n      right: '-1px',\n      height: `var(${colorSliderCSSVars.railSizeVar})`,\n    },\n  },\n\n  vertical: {\n    width: `var(${colorSliderCSSVars.railSizeVar})`,\n    height: '100%',\n    '::before': {\n      width: `var(${colorSliderCSSVars.railSizeVar})`,\n      top: '-1px',\n      bottom: '1px',\n    },\n  },\n});\n\n/**\n * Styles for the thumb slot\n */\nconst useThumbStyles = makeStyles({\n  thumb: {\n    gridRowStart: '2',\n    gridRowEnd: '2',\n    gridColumnStart: '2',\n    gridColumnEnd: '2',\n    position: 'absolute',\n    width: `var(${colorSliderCSSVars.thumbSizeVar})`,\n    height: `var(${colorSliderCSSVars.thumbSizeVar})`,\n    pointerEvents: 'none',\n    outlineStyle: 'none',\n    forcedColorAdjust: 'none',\n    borderRadius: tokens.borderRadiusCircular,\n    border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralForeground4}`,\n    boxShadow: tokens.shadow4,\n    backgroundColor: `var(${colorSliderCSSVars.thumbColorVar})`,\n    '::before': {\n      position: 'absolute',\n      inset: '0px',\n      borderRadius: tokens.borderRadiusCircular,\n      boxSizing: 'border-box',\n      content: \"''\",\n      border: `${tokens.strokeWidthThick} solid ${tokens.colorNeutralBackground1}`,\n    },\n  },\n  horizontal: {\n    transform: 'translateX(-50%)',\n    left: `var(${colorSliderCSSVars.sliderProgressVar})`,\n  },\n  vertical: {\n    transform: 'translateY(50%)',\n    bottom: `var(${colorSliderCSSVars.sliderProgressVar})`,\n  },\n});\n\nconst useShapeStyles = makeStyles({\n  rounded: {\n    borderRadius: tokens.borderRadiusMedium,\n  },\n  square: {\n    borderRadius: tokens.borderRadiusNone,\n  },\n});\n\n/**\n * Styles for the Input slot\n */\nconst useInputStyles = makeStyles({\n  input: {\n    cursor: 'pointer',\n    opacity: 0,\n    gridRowStart: '1',\n    gridRowEnd: '-1',\n    gridColumnStart: '1',\n    gridColumnEnd: '-1',\n    padding: '0',\n    margin: '0',\n    [`:focus-visible ~ .${colorSliderClassNames.thumb}`]: {\n      border: `2px solid ${tokens.colorStrokeFocus2}`,\n      outline: `${tokens.strokeWidthThick} solid ${tokens.colorTransparentStroke}`,\n      borderRadius: tokens.borderRadiusCircular,\n    },\n  },\n  horizontal: {\n    height: `var(${colorSliderCSSVars.thumbSizeVar})`,\n    width: '100%',\n  },\n  vertical: {\n    height: '100%',\n    width: `var(${colorSliderCSSVars.thumbSizeVar})`,\n    'writing-mode': 'vertical-lr',\n    direction: 'rtl',\n  },\n});\n\n/**\n * Apply styling to the ColorSlider slots based on the state\n */\nexport const useColorSliderStyles_unstable = (state: ColorSliderState): ColorSliderState => {\n  'use no memo';\n\n  const rootStyles = useRootStyles();\n  const styles = useStyles();\n  const railStyles = useRailStyles();\n  const thumbStyles = useThumbStyles();\n  const inputStyles = useInputStyles();\n  const shapeStyles = useShapeStyles();\n  const channelStyles = useChannelStyles();\n  const isVertical = state.vertical;\n\n  state.root.className = mergeClasses(\n    colorSliderClassNames.root,\n    rootStyles,\n    isVertical ? styles.vertical : styles.horizontal,\n    state.root.className,\n  );\n\n  state.rail.className = mergeClasses(\n    colorSliderClassNames.rail,\n    railStyles.rail,\n    channelStyles[state.channel || 'hue'],\n    shapeStyles[state.shape || 'rounded'],\n    isVertical ? railStyles.vertical : railStyles.horizontal,\n    state.rail.className,\n  );\n\n  state.thumb.className = mergeClasses(\n    colorSliderClassNames.thumb,\n    thumbStyles.thumb,\n    isVertical ? thumbStyles.vertical : thumbStyles.horizontal,\n    state.thumb.className,\n  );\n\n  state.input.className = mergeClasses(\n    colorSliderClassNames.input,\n    inputStyles.input,\n    isVertical ? inputStyles.vertical : inputStyles.horizontal,\n    state.input.className,\n  );\n  return state;\n};\n"],"names":["makeStyles","makeResetStyles","mergeClasses","tokens","colorSliderClassNames","root","rail","thumb","input","colorSliderCSSVars","sliderDirectionVar","sliderProgressVar","thumbColorVar","railColorVar","thumbSizeVar","railSizeVar","hueBackground","join","useRootStyles","position","display","touchAction","alignItems","justifyItems","minHeight","useStyles","horizontal","minWidth","gridTemplateRows","gridTemplateColumns","vertical","useChannelStyles","hue","backgroundImage","saturation","value","useRailStyles","pointerEvents","gridRowStart","gridRowEnd","gridColumnStart","gridColumnEnd","forcedColorAdjust","outlineWidth","outlineStyle","outlineColor","colorTransparentStroke","content","width","height","left","right","top","bottom","useThumbStyles","borderRadius","borderRadiusCircular","border","strokeWidthThin","colorNeutralForeground4","boxShadow","shadow4","backgroundColor","inset","boxSizing","strokeWidthThick","colorNeutralBackground1","transform","useShapeStyles","rounded","borderRadiusMedium","square","borderRadiusNone","useInputStyles","cursor","opacity","padding","margin","colorStrokeFocus2","outline","direction","useColorSliderStyles_unstable","state","rootStyles","styles","railStyles","thumbStyles","inputStyles","shapeStyles","channelStyles","isVertical","className","channel","shape"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}

package/lib-commonjs/components/AlphaSlider/useAlphaSliderStyles.styles.raw.js

@@ -0,0 +1,75 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    alphaSliderCSSVars: function() {
+        return alphaSliderCSSVars;
+    },
+    alphaSliderClassNames: function() {
+        return alphaSliderClassNames;
+    },
+    useAlphaSliderStyles_unstable: function() {
+        return useAlphaSliderStyles_unstable;
+    }
+});
+const _react = require("@griffel/react");
+const _reacttheme = require("@fluentui/react-theme");
+const _useColorSliderStylesstyles = require("../ColorSlider/useColorSliderStyles.styles");
+const TRANSPARENT_IMAGE_URL = 'https://fabricweb.azureedge.net/fabric-website/assets/images/transparent-pattern.png';
+const alphaSliderClassNames = {
+    root: 'fui-AlphaSlider',
+    rail: 'fui-AlphaSlider__rail',
+    thumb: 'fui-AlphaSlider__thumb',
+    input: 'fui-AlphaSlider__input'
+};
+const alphaSliderCSSVars = {
+    sliderDirectionVar: `--fui-AlphaSlider--direction`,
+    sliderProgressVar: `--fui-AlphaSlider--progress`,
+    thumbColorVar: `--fui-AlphaSlider__thumb--color`,
+    railColorVar: `--fui-AlphaSlider__rail--color`
+};
+/**
+ * Styles for the root slot
+ */ const useStyles = (0, _react.makeStyles)({
+    rail: {
+        border: `1px solid ${_reacttheme.tokens.colorNeutralStroke1}`,
+        backgroundImage: `linear-gradient(var(${alphaSliderCSSVars.sliderDirectionVar}), transparent, var(${alphaSliderCSSVars.railColorVar})), url(${TRANSPARENT_IMAGE_URL})`
+    }
+});
+/**
+ * Styles for the thumb slot
+ */ const useThumbStyles = (0, _react.makeStyles)({
+    thumb: {
+        backgroundColor: _reacttheme.tokens.colorNeutralBackground1,
+        '::before': {
+            backgroundColor: `var(${alphaSliderCSSVars.thumbColorVar})`
+        }
+    },
+    horizontal: {
+        transform: 'translateX(-50%)',
+        left: `var(${alphaSliderCSSVars.sliderProgressVar})`
+    },
+    vertical: {
+        transform: 'translateY(50%)',
+        bottom: `var(${alphaSliderCSSVars.sliderProgressVar})`
+    }
+});
+const useAlphaSliderStyles_unstable = (state)=>{
+    'use no memo';
+    const styles = useStyles();
+    const thumbStyles = useThumbStyles();
+    state.root.className = (0, _react.mergeClasses)(alphaSliderClassNames.root, state.root.className);
+    state.input.className = (0, _react.mergeClasses)(alphaSliderClassNames.input, state.input.className);
+    state.rail.className = (0, _react.mergeClasses)(alphaSliderClassNames.rail, styles.rail, state.rail.className);
+    state.thumb.className = (0, _react.mergeClasses)(alphaSliderClassNames.thumb, thumbStyles.thumb, state.vertical ? thumbStyles.vertical : thumbStyles.horizontal, state.thumb.className);
+    state.thumb.className = (0, _react.mergeClasses)(alphaSliderClassNames.thumb, thumbStyles.thumb, state.vertical ? thumbStyles.vertical : thumbStyles.horizontal, state.thumb.className);
+    (0, _useColorSliderStylesstyles.useColorSliderStyles_unstable)(state);
+    return state;
+};

package/lib-commonjs/components/AlphaSlider/useAlphaSliderStyles.styles.raw.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/AlphaSlider/useAlphaSliderStyles.styles.ts"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { useColorSliderStyles_unstable } from '../ColorSlider/useColorSliderStyles.styles';\nimport type { AlphaSliderSlots, AlphaSliderState } from './AlphaSlider.types';\n\nconst TRANSPARENT_IMAGE_URL = 'https://fabricweb.azureedge.net/fabric-website/assets/images/transparent-pattern.png';\n\nexport const alphaSliderClassNames: SlotClassNames<AlphaSliderSlots> = {\n  root: 'fui-AlphaSlider',\n  rail: 'fui-AlphaSlider__rail',\n  thumb: 'fui-AlphaSlider__thumb',\n  input: 'fui-AlphaSlider__input',\n};\n\nexport const alphaSliderCSSVars = {\n  sliderDirectionVar: `--fui-AlphaSlider--direction`,\n  sliderProgressVar: `--fui-AlphaSlider--progress`,\n  thumbColorVar: `--fui-AlphaSlider__thumb--color`,\n  railColorVar: `--fui-AlphaSlider__rail--color`,\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  rail: {\n    border: `1px solid ${tokens.colorNeutralStroke1}`,\n    backgroundImage: `linear-gradient(var(${alphaSliderCSSVars.sliderDirectionVar}), transparent, var(${alphaSliderCSSVars.railColorVar})), url(${TRANSPARENT_IMAGE_URL})`,\n  },\n});\n\n/**\n * Styles for the thumb slot\n */\nconst useThumbStyles = makeStyles({\n  thumb: {\n    backgroundColor: tokens.colorNeutralBackground1,\n    '::before': {\n      backgroundColor: `var(${alphaSliderCSSVars.thumbColorVar})`,\n    },\n  },\n  horizontal: {\n    transform: 'translateX(-50%)',\n    left: `var(${alphaSliderCSSVars.sliderProgressVar})`,\n  },\n  vertical: {\n    transform: 'translateY(50%)',\n    bottom: `var(${alphaSliderCSSVars.sliderProgressVar})`,\n  },\n});\n\n/**\n * Apply styling to the AlphaSlider slots based on the state\n */\nexport const useAlphaSliderStyles_unstable = (state: AlphaSliderState): AlphaSliderState => {\n  'use no memo';\n\n  const styles = useStyles();\n  const thumbStyles = useThumbStyles();\n  state.root.className = mergeClasses(alphaSliderClassNames.root, state.root.className);\n  state.input.className = mergeClasses(alphaSliderClassNames.input, state.input.className);\n  state.rail.className = mergeClasses(alphaSliderClassNames.rail, styles.rail, state.rail.className);\n\n  state.thumb.className = mergeClasses(\n    alphaSliderClassNames.thumb,\n    thumbStyles.thumb,\n    state.vertical ? thumbStyles.vertical : thumbStyles.horizontal,\n    state.thumb.className,\n  );\n\n  state.thumb.className = mergeClasses(\n    alphaSliderClassNames.thumb,\n    thumbStyles.thumb,\n    state.vertical ? thumbStyles.vertical : thumbStyles.horizontal,\n    state.thumb.className,\n  );\n\n  useColorSliderStyles_unstable(state);\n  return state;\n};\n"],"names":["alphaSliderCSSVars","alphaSliderClassNames","useAlphaSliderStyles_unstable","TRANSPARENT_IMAGE_URL","root","rail","thumb","input","sliderDirectionVar","sliderProgressVar","thumbColorVar","railColorVar","useStyles","makeStyles","border","tokens","colorNeutralStroke1","backgroundImage","useThumbStyles","backgroundColor","colorNeutralBackground1","horizontal","transform","left","vertical","bottom","state","styles","thumbStyles","className","mergeClasses","useColorSliderStyles_unstable"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAeaA,kBAAAA;eAAAA;;IAPAC,qBAAAA;eAAAA;;IA+CAC,6BAAAA;eAAAA;;;uBAvD4B;4BAClB;4CAEuB;AAG9C,MAAMC,wBAAwB;AAEvB,MAAMF,wBAA0D;IACrEG,MAAM;IACNC,MAAM;IACNC,OAAO;IACPC,OAAO;AACT;AAEO,MAAMP,qBAAqB;IAChCQ,oBAAoB,CAAC,4BAA4B,CAAC;IAClDC,mBAAmB,CAAC,2BAA2B,CAAC;IAChDC,eAAe,CAAC,+BAA+B,CAAC;IAChDC,cAAc,CAAC,8BAA8B,CAAC;AAChD;AAEA;;CAEC,GACD,MAAMC,YAAYC,IAAAA,iBAAAA,EAAW;IAC3BR,MAAM;QACJS,QAAQ,CAAC,UAAU,EAAEC,kBAAAA,CAAOC,mBAAmB,CAAC,CAAC;QACjDC,iBAAiB,CAAC,oBAAoB,EAAEjB,mBAAmBQ,kBAAkB,CAAC,oBAAoB,EAAER,mBAAmBW,YAAY,CAAC,QAAQ,EAAER,sBAAsB,CAAC,CAAC;IACxK;AACF;AAEA;;CAEC,GACD,MAAMe,iBAAiBL,IAAAA,iBAAAA,EAAW;IAChCP,OAAO;QACLa,iBAAiBJ,kBAAAA,CAAOK,uBAAuB;QAC/C,YAAY;YACVD,iBAAiB,CAAC,IAAI,EAAEnB,mBAAmBU,aAAa,CAAC,CAAC,CAAC;QAC7D;IACF;IACAW,YAAY;QACVC,WAAW;QACXC,MAAM,CAAC,IAAI,EAAEvB,mBAAmBS,iBAAiB,CAAC,CAAC,CAAC;IACtD;IACAe,UAAU;QACRF,WAAW;QACXG,QAAQ,CAAC,IAAI,EAAEzB,mBAAmBS,iBAAiB,CAAC,CAAC,CAAC;IACxD;AACF;AAKO,MAAMP,gCAAgC,CAACwB;IAC5C;IAEA,MAAMC,SAASf;IACf,MAAMgB,cAAcV;IACpBQ,MAAMtB,IAAI,CAACyB,SAAS,GAAGC,IAAAA,mBAAAA,EAAa7B,sBAAsBG,IAAI,EAAEsB,MAAMtB,IAAI,CAACyB,SAAS;IACpFH,MAAMnB,KAAK,CAACsB,SAAS,GAAGC,IAAAA,mBAAAA,EAAa7B,sBAAsBM,KAAK,EAAEmB,MAAMnB,KAAK,CAACsB,SAAS;IACvFH,MAAMrB,IAAI,CAACwB,SAAS,GAAGC,IAAAA,mBAAAA,EAAa7B,sBAAsBI,IAAI,EAAEsB,OAAOtB,IAAI,EAAEqB,MAAMrB,IAAI,CAACwB,SAAS;IAEjGH,MAAMpB,KAAK,CAACuB,SAAS,GAAGC,IAAAA,mBAAAA,EACtB7B,sBAAsBK,KAAK,EAC3BsB,YAAYtB,KAAK,EACjBoB,MAAMF,QAAQ,GAAGI,YAAYJ,QAAQ,GAAGI,YAAYP,UAAU,EAC9DK,MAAMpB,KAAK,CAACuB,SAAS;IAGvBH,MAAMpB,KAAK,CAACuB,SAAS,GAAGC,IAAAA,mBAAAA,EACtB7B,sBAAsBK,KAAK,EAC3BsB,YAAYtB,KAAK,EACjBoB,MAAMF,QAAQ,GAAGI,YAAYJ,QAAQ,GAAGI,YAAYP,UAAU,EAC9DK,MAAMpB,KAAK,CAACuB,SAAS;IAGvBE,IAAAA,yDAAAA,EAA8BL;IAC9B,OAAOA;AACT"}

package/lib-commonjs/components/ColorArea/useColorAreaStyles.styles.raw.js

@@ -0,0 +1,126 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    colorAreaCSSVars: function() {
+        return colorAreaCSSVars;
+    },
+    colorAreaClassNames: function() {
+        return colorAreaClassNames;
+    },
+    useColorAreaStyles_unstable: function() {
+        return useColorAreaStyles_unstable;
+    }
+});
+const _react = require("@griffel/react");
+const _reacttheme = require("@fluentui/react-theme");
+const _reacttabster = require("@fluentui/react-tabster");
+const colorAreaClassNames = {
+    root: 'fui-ColorArea',
+    thumb: 'fui-ColorArea__thumb',
+    inputX: 'fui-ColorArea__inputX',
+    inputY: 'fui-ColorArea__inputY'
+};
+const colorAreaCSSVars = {
+    areaXProgressVar: `--fui-AreaX--progress`,
+    areaYProgressVar: `--fui-AreaY--progress`,
+    thumbColorVar: `--fui-Area__thumb--color`,
+    mainColorVar: `--fui-Area--main-color`
+};
+// Internal CSS variables
+const thumbSizeVar = `--fui-Slider__thumb--size`;
+/**
+ * Styles for the root slot
+ */ const useRootStyles = (0, _react.makeResetStyles)({
+    position: 'relative',
+    border: `1px solid ${_reacttheme.tokens.colorNeutralStroke1}`,
+    background: `linear-gradient(to bottom, transparent, #000), linear-gradient(to right, #fff, transparent), var(${colorAreaCSSVars.mainColorVar})`,
+    forcedColorAdjust: 'none',
+    display: 'inline-grid',
+    touchAction: 'none',
+    alignItems: 'start',
+    justifyItems: 'start',
+    [thumbSizeVar]: '20px',
+    minWidth: '300px',
+    minHeight: '300px',
+    boxSizing: 'border-box',
+    marginBottom: _reacttheme.tokens.spacingVerticalSNudge
+});
+/**
+ * Styles for the thumb slot
+ */ const useThumbStyles = (0, _react.makeStyles)({
+    thumb: {
+        position: 'absolute',
+        width: `var(${thumbSizeVar})`,
+        height: `var(${thumbSizeVar})`,
+        pointerEvents: 'none',
+        outlineStyle: 'none',
+        forcedColorAdjust: 'none',
+        borderRadius: _reacttheme.tokens.borderRadiusCircular,
+        border: `${_reacttheme.tokens.strokeWidthThin} solid ${_reacttheme.tokens.colorNeutralForeground4}`,
+        boxShadow: _reacttheme.tokens.shadow4,
+        backgroundColor: `var(${colorAreaCSSVars.thumbColorVar})`,
+        transform: 'translate(-50%, 50%)',
+        left: `var(${colorAreaCSSVars.areaXProgressVar})`,
+        bottom: `var(${colorAreaCSSVars.areaYProgressVar})`,
+        '::before': {
+            position: 'absolute',
+            inset: '0px',
+            borderRadius: _reacttheme.tokens.borderRadiusCircular,
+            boxSizing: 'border-box',
+            content: "''",
+            border: `${_reacttheme.tokens.strokeWidthThick} solid ${_reacttheme.tokens.colorNeutralBackground1}`
+        }
+    },
+    focusIndicator: (0, _reacttabster.createFocusOutlineStyle)({
+        selector: 'focus-within',
+        style: {
+            outlineWidth: _reacttheme.tokens.strokeWidthThick,
+            ..._react.shorthands.borderWidth(_reacttheme.tokens.strokeWidthThick),
+            outlineRadius: _reacttheme.tokens.borderRadiusCircular
+        }
+    })
+});
+/**
+ * Styles for the Input slot
+ */ const useInputStyles = (0, _react.makeStyles)({
+    input: {
+        overflow: 'hidden',
+        position: 'absolute',
+        pointerEvents: 'none',
+        top: 0,
+        left: 0,
+        opacity: 0,
+        padding: '0',
+        margin: '0',
+        width: '100%',
+        height: '100%'
+    }
+});
+const useShapeStyles = (0, _react.makeStyles)({
+    rounded: {
+        borderRadius: _reacttheme.tokens.borderRadiusMedium
+    },
+    square: {
+        borderRadius: _reacttheme.tokens.borderRadiusNone
+    }
+});
+const useColorAreaStyles_unstable = (state)=>{
+    'use no memo';
+    const rootStyles = useRootStyles();
+    const thumbStyles = useThumbStyles();
+    const inputStyles = useInputStyles();
+    const shapeStyles = useShapeStyles();
+    state.root.className = (0, _react.mergeClasses)(colorAreaClassNames.root, rootStyles, shapeStyles[state.shape || 'rounded'], state.root.className);
+    state.thumb.className = (0, _react.mergeClasses)(colorAreaClassNames.thumb, thumbStyles.thumb, thumbStyles.focusIndicator, state.thumb.className);
+    state.inputX.className = (0, _react.mergeClasses)(colorAreaClassNames.inputX, inputStyles.input, state.inputX.className);
+    state.inputY.className = (0, _react.mergeClasses)(colorAreaClassNames.inputY, inputStyles.input, state.inputY.className);
+    return state;
+};

package/lib-commonjs/components/ColorArea/useColorAreaStyles.styles.raw.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/ColorArea/useColorAreaStyles.styles.ts"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { tokens } from '@fluentui/react-theme';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport type { ColorAreaSlots, ColorAreaState } from './ColorArea.types';\n\nexport const colorAreaClassNames: SlotClassNames<ColorAreaSlots> = {\n  root: 'fui-ColorArea',\n  thumb: 'fui-ColorArea__thumb',\n  inputX: 'fui-ColorArea__inputX',\n  inputY: 'fui-ColorArea__inputY',\n};\n\nexport const colorAreaCSSVars = {\n  areaXProgressVar: `--fui-AreaX--progress`,\n  areaYProgressVar: `--fui-AreaY--progress`,\n  thumbColorVar: `--fui-Area__thumb--color`,\n  mainColorVar: `--fui-Area--main-color`,\n};\n\n// Internal CSS variables\nconst thumbSizeVar = `--fui-Slider__thumb--size`;\n\n/**\n * Styles for the root slot\n */\nconst useRootStyles = makeResetStyles({\n  position: 'relative',\n  border: `1px solid ${tokens.colorNeutralStroke1}`,\n  background: `linear-gradient(to bottom, transparent, #000), linear-gradient(to right, #fff, transparent), var(${colorAreaCSSVars.mainColorVar})`,\n  forcedColorAdjust: 'none',\n  display: 'inline-grid',\n  touchAction: 'none',\n  alignItems: 'start',\n  justifyItems: 'start',\n  [thumbSizeVar]: '20px',\n  minWidth: '300px',\n  minHeight: '300px',\n  boxSizing: 'border-box',\n  marginBottom: tokens.spacingVerticalSNudge,\n});\n\n/**\n * Styles for the thumb slot\n */\nconst useThumbStyles = makeStyles({\n  thumb: {\n    position: 'absolute',\n    width: `var(${thumbSizeVar})`,\n    height: `var(${thumbSizeVar})`,\n    pointerEvents: 'none',\n    outlineStyle: 'none',\n    forcedColorAdjust: 'none',\n    borderRadius: tokens.borderRadiusCircular,\n    border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralForeground4}`,\n    boxShadow: tokens.shadow4,\n    backgroundColor: `var(${colorAreaCSSVars.thumbColorVar})`,\n    transform: 'translate(-50%, 50%)',\n    left: `var(${colorAreaCSSVars.areaXProgressVar})`,\n    bottom: `var(${colorAreaCSSVars.areaYProgressVar})`,\n    '::before': {\n      position: 'absolute',\n      inset: '0px',\n      borderRadius: tokens.borderRadiusCircular,\n      boxSizing: 'border-box',\n      content: \"''\",\n      border: `${tokens.strokeWidthThick} solid ${tokens.colorNeutralBackground1}`,\n    },\n  },\n  focusIndicator: createFocusOutlineStyle({\n    selector: 'focus-within',\n    style: {\n      outlineWidth: tokens.strokeWidthThick,\n      ...shorthands.borderWidth(tokens.strokeWidthThick),\n      outlineRadius: tokens.borderRadiusCircular,\n    },\n  }),\n});\n\n/**\n * Styles for the Input slot\n */\nconst useInputStyles = makeStyles({\n  input: {\n    overflow: 'hidden',\n    position: 'absolute',\n    pointerEvents: 'none',\n    top: 0,\n    left: 0,\n    opacity: 0,\n    padding: '0',\n    margin: '0',\n    width: '100%',\n    height: '100%',\n  },\n});\n\nconst useShapeStyles = makeStyles({\n  rounded: {\n    borderRadius: tokens.borderRadiusMedium,\n  },\n  square: {\n    borderRadius: tokens.borderRadiusNone,\n  },\n});\n\n/**\n * Apply styling to the ColorArea slots based on the state\n */\nexport const useColorAreaStyles_unstable = (state: ColorAreaState): ColorAreaState => {\n  'use no memo';\n\n  const rootStyles = useRootStyles();\n  const thumbStyles = useThumbStyles();\n  const inputStyles = useInputStyles();\n  const shapeStyles = useShapeStyles();\n\n  state.root.className = mergeClasses(\n    colorAreaClassNames.root,\n    rootStyles,\n    shapeStyles[state.shape || 'rounded'],\n    state.root.className,\n  );\n\n  state.thumb.className = mergeClasses(\n    colorAreaClassNames.thumb,\n    thumbStyles.thumb,\n    thumbStyles.focusIndicator,\n    state.thumb.className,\n  );\n\n  state.inputX.className = mergeClasses(colorAreaClassNames.inputX, inputStyles.input, state.inputX.className);\n\n  state.inputY.className = mergeClasses(colorAreaClassNames.inputY, inputStyles.input, state.inputY.className);\n  return state;\n};\n"],"names":["colorAreaCSSVars","colorAreaClassNames","useColorAreaStyles_unstable","root","thumb","inputX","inputY","areaXProgressVar","areaYProgressVar","thumbColorVar","mainColorVar","thumbSizeVar","useRootStyles","makeResetStyles","position","border","tokens","colorNeutralStroke1","background","forcedColorAdjust","display","touchAction","alignItems","justifyItems","minWidth","minHeight","boxSizing","marginBottom","spacingVerticalSNudge","useThumbStyles","makeStyles","width","height","pointerEvents","outlineStyle","borderRadius","borderRadiusCircular","strokeWidthThin","colorNeutralForeground4","boxShadow","shadow4","backgroundColor","transform","left","bottom","inset","content","strokeWidthThick","colorNeutralBackground1","focusIndicator","createFocusOutlineStyle","selector","style","outlineWidth","shorthands","borderWidth","outlineRadius","useInputStyles","input","overflow","top","opacity","padding","margin","useShapeStyles","rounded","borderRadiusMedium","square","borderRadiusNone","state","rootStyles","thumbStyles","inputStyles","shapeStyles","className","mergeClasses","shape"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}

package/lib-commonjs/components/ColorPicker/useColorPickerStyles.styles.raw.js

@@ -0,0 +1,38 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    colorPickerClassNames: function() {
+        return colorPickerClassNames;
+    },
+    useColorPickerStyles_unstable: function() {
+        return useColorPickerStyles_unstable;
+    }
+});
+const _react = require("@griffel/react");
+const _reacttheme = require("@fluentui/react-theme");
+const colorPickerClassNames = {
+    root: 'fui-ColorPicker'
+};
+/**
+ * Styles for the root slot
+ */ const useStyles = (0, _react.makeStyles)({
+    root: {
+        display: 'flex',
+        flexDirection: 'column',
+        gap: _reacttheme.tokens.spacingVerticalXS
+    }
+});
+const useColorPickerStyles_unstable = (state)=>{
+    'use no memo';
+    const styles = useStyles();
+    state.root.className = (0, _react.mergeClasses)(colorPickerClassNames.root, styles.root, state.root.className);
+    return state;
+};

package/lib-commonjs/components/ColorPicker/useColorPickerStyles.styles.raw.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/ColorPicker/useColorPickerStyles.styles.ts"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { ColorPickerSlots, ColorPickerState } from './ColorPicker.types';\nimport { tokens } from '@fluentui/react-theme';\n\nexport const colorPickerClassNames: SlotClassNames<ColorPickerSlots> = {\n  root: 'fui-ColorPicker',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  root: {\n    display: 'flex',\n    flexDirection: 'column',\n    gap: tokens.spacingVerticalXS,\n  },\n});\n\n/**\n * Apply styling to the ColorPicker slots based on the state\n */\nexport const useColorPickerStyles_unstable = (state: ColorPickerState): ColorPickerState => {\n  'use no memo';\n\n  const styles = useStyles();\n  state.root.className = mergeClasses(colorPickerClassNames.root, styles.root, state.root.className);\n\n  return state;\n};\n"],"names":["colorPickerClassNames","useColorPickerStyles_unstable","root","useStyles","makeStyles","display","flexDirection","gap","tokens","spacingVerticalXS","state","styles","className","mergeClasses"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAKaA,qBAAAA;eAAAA;;IAkBAC,6BAAAA;eAAAA;;;uBAvB4B;4BAGlB;AAEhB,MAAMD,wBAA0D;IACrEE,MAAM;AACR;AAEA;;CAEC,GACD,MAAMC,YAAYC,IAAAA,iBAAAA,EAAW;IAC3BF,MAAM;QACJG,SAAS;QACTC,eAAe;QACfC,KAAKC,kBAAAA,CAAOC,iBAAiB;IAC/B;AACF;AAKO,MAAMR,gCAAgC,CAACS;IAC5C;IAEA,MAAMC,SAASR;IACfO,MAAMR,IAAI,CAACU,SAAS,GAAGC,IAAAA,mBAAAA,EAAab,sBAAsBE,IAAI,EAAES,OAAOT,IAAI,EAAEQ,MAAMR,IAAI,CAACU,SAAS;IAEjG,OAAOF;AACT"}

package/lib-commonjs/components/ColorSlider/useColorSliderStyles.styles.raw.js

@@ -0,0 +1,211 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    colorSliderCSSVars: function() {
+        return colorSliderCSSVars;
+    },
+    colorSliderClassNames: function() {
+        return colorSliderClassNames;
+    },
+    useColorSliderStyles_unstable: function() {
+        return useColorSliderStyles_unstable;
+    }
+});
+const _react = require("@griffel/react");
+const _reacttheme = require("@fluentui/react-theme");
+const colorSliderClassNames = {
+    root: 'fui-ColorSlider',
+    rail: 'fui-ColorSlider__rail',
+    thumb: 'fui-ColorSlider__thumb',
+    input: 'fui-ColorSlider__input'
+};
+const colorSliderCSSVars = {
+    sliderDirectionVar: `--fui-Slider--direction`,
+    sliderProgressVar: `--fui-Slider--progress`,
+    thumbColorVar: `--fui-Slider__thumb--color`,
+    railColorVar: `--fui-Slider__rail--color`,
+    thumbSizeVar: `--fui-Slider__thumb--size`,
+    railSizeVar: `--fui-Slider__rail--size`
+};
+const hueBackground = `linear-gradient(${[
+    `var(${colorSliderCSSVars.sliderDirectionVar})`,
+    'red',
+    'fuchsia',
+    'blue',
+    'aqua',
+    'lime',
+    'yellow',
+    'red'
+].join(',')})`;
+/**
+ * Styles for the root slot
+ */ const useRootStyles = (0, _react.makeResetStyles)({
+    position: 'relative',
+    display: 'inline-grid',
+    touchAction: 'none',
+    alignItems: 'center',
+    justifyItems: 'center',
+    [colorSliderCSSVars.thumbSizeVar]: '20px',
+    [colorSliderCSSVars.railSizeVar]: '20px',
+    minHeight: '32px'
+});
+const useStyles = (0, _react.makeStyles)({
+    horizontal: {
+        minWidth: '200px',
+        // 3x3 grid with the rail and thumb in the center cell [2,2] and the hidden input stretching across all cells
+        gridTemplateRows: `1fr var(${colorSliderCSSVars.thumbSizeVar}) 1fr`,
+        gridTemplateColumns: `1fr 100% 1fr`
+    },
+    vertical: {
+        minHeight: '280px',
+        // 3x3 grid with the rail and thumb in the center cell [2,2] and the hidden input stretching across all cells
+        gridTemplateRows: `1fr 100% 1fr`,
+        gridTemplateColumns: `1fr var(${colorSliderCSSVars.thumbSizeVar}) 1fr`
+    }
+});
+const useChannelStyles = (0, _react.makeStyles)({
+    hue: {
+        backgroundImage: hueBackground
+    },
+    saturation: {
+        backgroundImage: `linear-gradient(to right, #808080, var(${colorSliderCSSVars.railColorVar}))`
+    },
+    value: {
+        backgroundImage: `linear-gradient(to right, #000, var(${colorSliderCSSVars.railColorVar}))`
+    }
+});
+/**
+ * Styles for the rail slot
+ */ const useRailStyles = (0, _react.makeStyles)({
+    rail: {
+        pointerEvents: 'none',
+        gridRowStart: '2',
+        gridRowEnd: '2',
+        gridColumnStart: '2',
+        gridColumnEnd: '2',
+        position: 'relative',
+        forcedColorAdjust: 'none',
+        outlineWidth: '1px',
+        outlineStyle: 'solid',
+        outlineColor: _reacttheme.tokens.colorTransparentStroke,
+        '::before': {
+            content: "''",
+            position: 'absolute'
+        }
+    },
+    horizontal: {
+        width: '100%',
+        height: `var(${colorSliderCSSVars.railSizeVar})`,
+        '::before': {
+            left: '-1px',
+            right: '-1px',
+            height: `var(${colorSliderCSSVars.railSizeVar})`
+        }
+    },
+    vertical: {
+        width: `var(${colorSliderCSSVars.railSizeVar})`,
+        height: '100%',
+        '::before': {
+            width: `var(${colorSliderCSSVars.railSizeVar})`,
+            top: '-1px',
+            bottom: '1px'
+        }
+    }
+});
+/**
+ * Styles for the thumb slot
+ */ const useThumbStyles = (0, _react.makeStyles)({
+    thumb: {
+        gridRowStart: '2',
+        gridRowEnd: '2',
+        gridColumnStart: '2',
+        gridColumnEnd: '2',
+        position: 'absolute',
+        width: `var(${colorSliderCSSVars.thumbSizeVar})`,
+        height: `var(${colorSliderCSSVars.thumbSizeVar})`,
+        pointerEvents: 'none',
+        outlineStyle: 'none',
+        forcedColorAdjust: 'none',
+        borderRadius: _reacttheme.tokens.borderRadiusCircular,
+        border: `${_reacttheme.tokens.strokeWidthThin} solid ${_reacttheme.tokens.colorNeutralForeground4}`,
+        boxShadow: _reacttheme.tokens.shadow4,
+        backgroundColor: `var(${colorSliderCSSVars.thumbColorVar})`,
+        '::before': {
+            position: 'absolute',
+            inset: '0px',
+            borderRadius: _reacttheme.tokens.borderRadiusCircular,
+            boxSizing: 'border-box',
+            content: "''",
+            border: `${_reacttheme.tokens.strokeWidthThick} solid ${_reacttheme.tokens.colorNeutralBackground1}`
+        }
+    },
+    horizontal: {
+        transform: 'translateX(-50%)',
+        left: `var(${colorSliderCSSVars.sliderProgressVar})`
+    },
+    vertical: {
+        transform: 'translateY(50%)',
+        bottom: `var(${colorSliderCSSVars.sliderProgressVar})`
+    }
+});
+const useShapeStyles = (0, _react.makeStyles)({
+    rounded: {
+        borderRadius: _reacttheme.tokens.borderRadiusMedium
+    },
+    square: {
+        borderRadius: _reacttheme.tokens.borderRadiusNone
+    }
+});
+/**
+ * Styles for the Input slot
+ */ const useInputStyles = (0, _react.makeStyles)({
+    input: {
+        cursor: 'pointer',
+        opacity: 0,
+        gridRowStart: '1',
+        gridRowEnd: '-1',
+        gridColumnStart: '1',
+        gridColumnEnd: '-1',
+        padding: '0',
+        margin: '0',
+        [`:focus-visible ~ .${colorSliderClassNames.thumb}`]: {
+            border: `2px solid ${_reacttheme.tokens.colorStrokeFocus2}`,
+            outline: `${_reacttheme.tokens.strokeWidthThick} solid ${_reacttheme.tokens.colorTransparentStroke}`,
+            borderRadius: _reacttheme.tokens.borderRadiusCircular
+        }
+    },
+    horizontal: {
+        height: `var(${colorSliderCSSVars.thumbSizeVar})`,
+        width: '100%'
+    },
+    vertical: {
+        height: '100%',
+        width: `var(${colorSliderCSSVars.thumbSizeVar})`,
+        'writing-mode': 'vertical-lr',
+        direction: 'rtl'
+    }
+});
+const useColorSliderStyles_unstable = (state)=>{
+    'use no memo';
+    const rootStyles = useRootStyles();
+    const styles = useStyles();
+    const railStyles = useRailStyles();
+    const thumbStyles = useThumbStyles();
+    const inputStyles = useInputStyles();
+    const shapeStyles = useShapeStyles();
+    const channelStyles = useChannelStyles();
+    const isVertical = state.vertical;
+    state.root.className = (0, _react.mergeClasses)(colorSliderClassNames.root, rootStyles, isVertical ? styles.vertical : styles.horizontal, state.root.className);
+    state.rail.className = (0, _react.mergeClasses)(colorSliderClassNames.rail, railStyles.rail, channelStyles[state.channel || 'hue'], shapeStyles[state.shape || 'rounded'], isVertical ? railStyles.vertical : railStyles.horizontal, state.rail.className);
+    state.thumb.className = (0, _react.mergeClasses)(colorSliderClassNames.thumb, thumbStyles.thumb, isVertical ? thumbStyles.vertical : thumbStyles.horizontal, state.thumb.className);
+    state.input.className = (0, _react.mergeClasses)(colorSliderClassNames.input, inputStyles.input, isVertical ? inputStyles.vertical : inputStyles.horizontal, state.input.className);
+    return state;
+};

package/lib-commonjs/components/ColorSlider/useColorSliderStyles.styles.raw.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/ColorSlider/useColorSliderStyles.styles.ts"],"sourcesContent":["import { makeStyles, makeResetStyles, mergeClasses } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { tokens } from '@fluentui/react-theme';\nimport type { ColorSliderSlots, ColorSliderState } from './ColorSlider.types';\n\nexport const colorSliderClassNames: SlotClassNames<ColorSliderSlots> = {\n  root: 'fui-ColorSlider',\n  rail: 'fui-ColorSlider__rail',\n  thumb: 'fui-ColorSlider__thumb',\n  input: 'fui-ColorSlider__input',\n};\n\nexport const colorSliderCSSVars = {\n  sliderDirectionVar: `--fui-Slider--direction`,\n  sliderProgressVar: `--fui-Slider--progress`,\n  thumbColorVar: `--fui-Slider__thumb--color`,\n  railColorVar: `--fui-Slider__rail--color`,\n  thumbSizeVar: `--fui-Slider__thumb--size`,\n  railSizeVar: `--fui-Slider__rail--size`,\n};\n\nconst hueBackground = `linear-gradient(${[\n  `var(${colorSliderCSSVars.sliderDirectionVar})`,\n  'red',\n  'fuchsia',\n  'blue',\n  'aqua',\n  'lime',\n  'yellow',\n  'red',\n].join(',')})`;\n\n/**\n * Styles for the root slot\n */\nconst useRootStyles = makeResetStyles({\n  position: 'relative',\n  display: 'inline-grid',\n  touchAction: 'none',\n  alignItems: 'center',\n  justifyItems: 'center',\n  [colorSliderCSSVars.thumbSizeVar]: '20px',\n  [colorSliderCSSVars.railSizeVar]: '20px',\n  minHeight: '32px',\n});\n\nconst useStyles = makeStyles({\n  horizontal: {\n    minWidth: '200px',\n    // 3x3 grid with the rail and thumb in the center cell [2,2] and the hidden input stretching across all cells\n    gridTemplateRows: `1fr var(${colorSliderCSSVars.thumbSizeVar}) 1fr`,\n    gridTemplateColumns: `1fr 100% 1fr`,\n  },\n\n  vertical: {\n    minHeight: '280px',\n    // 3x3 grid with the rail and thumb in the center cell [2,2] and the hidden input stretching across all cells\n    gridTemplateRows: `1fr 100% 1fr`,\n    gridTemplateColumns: `1fr var(${colorSliderCSSVars.thumbSizeVar}) 1fr`,\n  },\n});\n\nconst useChannelStyles = makeStyles({\n  hue: {\n    backgroundImage: hueBackground,\n  },\n  saturation: {\n    backgroundImage: `linear-gradient(to right, #808080, var(${colorSliderCSSVars.railColorVar}))`,\n  },\n  value: {\n    backgroundImage: `linear-gradient(to right, #000, var(${colorSliderCSSVars.railColorVar}))`,\n  },\n});\n\n/**\n * Styles for the rail slot\n */\nconst useRailStyles = makeStyles({\n  rail: {\n    pointerEvents: 'none',\n    gridRowStart: '2',\n    gridRowEnd: '2',\n    gridColumnStart: '2',\n    gridColumnEnd: '2',\n    position: 'relative',\n    forcedColorAdjust: 'none',\n    outlineWidth: '1px',\n    outlineStyle: 'solid',\n    outlineColor: tokens.colorTransparentStroke,\n    '::before': {\n      content: \"''\",\n      position: 'absolute',\n    },\n  },\n\n  horizontal: {\n    width: '100%',\n    height: `var(${colorSliderCSSVars.railSizeVar})`,\n    '::before': {\n      left: '-1px',\n      right: '-1px',\n      height: `var(${colorSliderCSSVars.railSizeVar})`,\n    },\n  },\n\n  vertical: {\n    width: `var(${colorSliderCSSVars.railSizeVar})`,\n    height: '100%',\n    '::before': {\n      width: `var(${colorSliderCSSVars.railSizeVar})`,\n      top: '-1px',\n      bottom: '1px',\n    },\n  },\n});\n\n/**\n * Styles for the thumb slot\n */\nconst useThumbStyles = makeStyles({\n  thumb: {\n    gridRowStart: '2',\n    gridRowEnd: '2',\n    gridColumnStart: '2',\n    gridColumnEnd: '2',\n    position: 'absolute',\n    width: `var(${colorSliderCSSVars.thumbSizeVar})`,\n    height: `var(${colorSliderCSSVars.thumbSizeVar})`,\n    pointerEvents: 'none',\n    outlineStyle: 'none',\n    forcedColorAdjust: 'none',\n    borderRadius: tokens.borderRadiusCircular,\n    border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralForeground4}`,\n    boxShadow: tokens.shadow4,\n    backgroundColor: `var(${colorSliderCSSVars.thumbColorVar})`,\n    '::before': {\n      position: 'absolute',\n      inset: '0px',\n      borderRadius: tokens.borderRadiusCircular,\n      boxSizing: 'border-box',\n      content: \"''\",\n      border: `${tokens.strokeWidthThick} solid ${tokens.colorNeutralBackground1}`,\n    },\n  },\n  horizontal: {\n    transform: 'translateX(-50%)',\n    left: `var(${colorSliderCSSVars.sliderProgressVar})`,\n  },\n  vertical: {\n    transform: 'translateY(50%)',\n    bottom: `var(${colorSliderCSSVars.sliderProgressVar})`,\n  },\n});\n\nconst useShapeStyles = makeStyles({\n  rounded: {\n    borderRadius: tokens.borderRadiusMedium,\n  },\n  square: {\n    borderRadius: tokens.borderRadiusNone,\n  },\n});\n\n/**\n * Styles for the Input slot\n */\nconst useInputStyles = makeStyles({\n  input: {\n    cursor: 'pointer',\n    opacity: 0,\n    gridRowStart: '1',\n    gridRowEnd: '-1',\n    gridColumnStart: '1',\n    gridColumnEnd: '-1',\n    padding: '0',\n    margin: '0',\n    [`:focus-visible ~ .${colorSliderClassNames.thumb}`]: {\n      border: `2px solid ${tokens.colorStrokeFocus2}`,\n      outline: `${tokens.strokeWidthThick} solid ${tokens.colorTransparentStroke}`,\n      borderRadius: tokens.borderRadiusCircular,\n    },\n  },\n  horizontal: {\n    height: `var(${colorSliderCSSVars.thumbSizeVar})`,\n    width: '100%',\n  },\n  vertical: {\n    height: '100%',\n    width: `var(${colorSliderCSSVars.thumbSizeVar})`,\n    'writing-mode': 'vertical-lr',\n    direction: 'rtl',\n  },\n});\n\n/**\n * Apply styling to the ColorSlider slots based on the state\n */\nexport const useColorSliderStyles_unstable = (state: ColorSliderState): ColorSliderState => {\n  'use no memo';\n\n  const rootStyles = useRootStyles();\n  const styles = useStyles();\n  const railStyles = useRailStyles();\n  const thumbStyles = useThumbStyles();\n  const inputStyles = useInputStyles();\n  const shapeStyles = useShapeStyles();\n  const channelStyles = useChannelStyles();\n  const isVertical = state.vertical;\n\n  state.root.className = mergeClasses(\n    colorSliderClassNames.root,\n    rootStyles,\n    isVertical ? styles.vertical : styles.horizontal,\n    state.root.className,\n  );\n\n  state.rail.className = mergeClasses(\n    colorSliderClassNames.rail,\n    railStyles.rail,\n    channelStyles[state.channel || 'hue'],\n    shapeStyles[state.shape || 'rounded'],\n    isVertical ? railStyles.vertical : railStyles.horizontal,\n    state.rail.className,\n  );\n\n  state.thumb.className = mergeClasses(\n    colorSliderClassNames.thumb,\n    thumbStyles.thumb,\n    isVertical ? thumbStyles.vertical : thumbStyles.horizontal,\n    state.thumb.className,\n  );\n\n  state.input.className = mergeClasses(\n    colorSliderClassNames.input,\n    inputStyles.input,\n    isVertical ? inputStyles.vertical : inputStyles.horizontal,\n    state.input.className,\n  );\n  return state;\n};\n"],"names":["colorSliderCSSVars","colorSliderClassNames","useColorSliderStyles_unstable","root","rail","thumb","input","sliderDirectionVar","sliderProgressVar","thumbColorVar","railColorVar","thumbSizeVar","railSizeVar","hueBackground","join","useRootStyles","makeResetStyles","position","display","touchAction","alignItems","justifyItems","minHeight","useStyles","makeStyles","horizontal","minWidth","gridTemplateRows","gridTemplateColumns","vertical","useChannelStyles","hue","backgroundImage","saturation","value","useRailStyles","pointerEvents","gridRowStart","gridRowEnd","gridColumnStart","gridColumnEnd","forcedColorAdjust","outlineWidth","outlineStyle","outlineColor","tokens","colorTransparentStroke","content","width","height","left","right","top","bottom","useThumbStyles","borderRadius","borderRadiusCircular","border","strokeWidthThin","colorNeutralForeground4","boxShadow","shadow4","backgroundColor","inset","boxSizing","strokeWidthThick","colorNeutralBackground1","transform","useShapeStyles","rounded","borderRadiusMedium","square","borderRadiusNone","useInputStyles","cursor","opacity","padding","margin","colorStrokeFocus2","outline","direction","state","rootStyles","styles","railStyles","thumbStyles","inputStyles","shapeStyles","channelStyles","isVertical","className","mergeClasses","channel","shape"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-color-picker",
-  "version": "9.1.3",
+  "version": "9.2.0",
   "description": "ColorPicker component for Fluent UI React.",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -28,7 +28,7 @@
     "@fluentui/react-context-selector": "^9.2.2",
     "@fluentui/react-jsx-runtime": "^9.1.2",
     "@fluentui/react-shared-contexts": "^9.24.0",
-    "@fluentui/react-tabster": "^9.25.3",
+    "@fluentui/react-tabster": "^9.26.0",
     "@fluentui/react-theme": "^9.1.24",
     "@fluentui/react-utilities": "^9.22.0",
     "@griffel/react": "^1.5.22",