{"version":3,"sources":["../src/components/ColorSlider/useColorSliderStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { 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';\nimport { colorSliderCSSVars } from './ColorSlider.constants';\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\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  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  // eslint-disable-next-line react-hooks/immutability\n  state.root.className = mergeClasses(\n    colorSliderClassNames.root,\n    rootStyles,\n    isVertical ? styles.vertical : styles.horizontal,\n    state.root.className,\n  );\n\n  // eslint-disable-next-line react-hooks/immutability\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  // eslint-disable-next-line react-hooks/immutability\n  state.thumb.className = mergeClasses(\n    colorSliderClassNames.thumb,\n    thumbStyles.thumb,\n    isVertical ? thumbStyles.vertical : thumbStyles.horizontal,\n    state.thumb.className,\n  );\n\n  // eslint-disable-next-line react-hooks/immutability\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","colorSliderCSSVars","colorSliderClassNames","root","rail","thumb","input","hueBackground","sliderDirectionVar","join","useRootStyles","position","display","touchAction","alignItems","justifyItems","thumbSizeVar","railSizeVar","minHeight","useStyles","horizontal","minWidth","gridTemplateRows","gridTemplateColumns","vertical","useChannelStyles","hue","backgroundImage","saturation","railColorVar","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","thumbColorVar","inset","boxSizing","strokeWidthThick","colorNeutralBackground1","transform","sliderProgressVar","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"],"mappings":"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"}