{"version":3,"sources":["../src/components/ColorArea/useColorAreaStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { 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';\nimport { colorAreaCSSVars } from './ColorArea.constants';\n\nexport const colorAreaClassNames: SlotClassNames = {\n root: 'fui-ColorArea',\n thumb: 'fui-ColorArea__thumb',\n inputX: 'fui-ColorArea__inputX',\n inputY: 'fui-ColorArea__inputY',\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 const rootStyles = useRootStyles();\n const thumbStyles = useThumbStyles();\n const inputStyles = useInputStyles();\n const shapeStyles = useShapeStyles();\n\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(\n colorAreaClassNames.root,\n rootStyles,\n shapeStyles[state.shape || 'rounded'],\n state.root.className,\n );\n\n // eslint-disable-next-line react-hooks/immutability\n state.thumb.className = mergeClasses(\n colorAreaClassNames.thumb,\n thumbStyles.thumb,\n thumbStyles.focusIndicator,\n state.thumb.className,\n );\n\n // eslint-disable-next-line react-hooks/immutability\n state.inputX.className = mergeClasses(colorAreaClassNames.inputX, inputStyles.input, state.inputX.className);\n\n // eslint-disable-next-line react-hooks/immutability\n state.inputY.className = mergeClasses(colorAreaClassNames.inputY, inputStyles.input, state.inputY.className);\n return state;\n};\n"],"names":["makeResetStyles","makeStyles","mergeClasses","shorthands","tokens","createFocusOutlineStyle","colorAreaCSSVars","colorAreaClassNames","root","thumb","inputX","inputY","thumbSizeVar","useRootStyles","position","border","colorNeutralStroke1","background","mainColorVar","forcedColorAdjust","display","touchAction","alignItems","justifyItems","minWidth","minHeight","boxSizing","marginBottom","spacingVerticalSNudge","useThumbStyles","width","height","pointerEvents","outlineStyle","borderRadius","borderRadiusCircular","strokeWidthThin","colorNeutralForeground4","boxShadow","shadow4","backgroundColor","thumbColorVar","transform","left","areaXProgressVar","bottom","areaYProgressVar","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"],"mappings":"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"}