Function generateBackground

packages/react-aria/src/color/useColorSlider.ts:88–127

()

  let value = state.getDisplayColor();
  let generateBackground = () => {
    let to: string;
    if (orientation === 'vertical') {
      to = 'top';
    } else if (direction === 'ltr') {
      to = 'right';
    } else {
      to = 'left';
    }
    switch (channel) {
      case 'hue': {
        let stops = [0, 60, 120, 180, 240, 300, 360]
          .map(hue => value.withChannelValue('hue', hue).toString('css'))
          .join(', ');
        return `linear-gradient(to ${to}, ${stops})`;
      }
      case 'lightness': {
        // We have to add an extra color stop in the middle so that the hue shows up at all.
        // Otherwise it will always just be black to white.
        let min = state.getThumbMinValue(0);
        let max = state.getThumbMaxValue(0);
        let start = value.withChannelValue(channel, min).toString('css');
        let middle = value.withChannelValue(channel, (max - min) / 2).toString('css');
        let end = value.withChannelValue(channel, max).toString('css');
        return `linear-gradient(to ${to}, ${start}, ${middle}, ${end})`;
      }
      case 'saturation':
      case 'brightness':
      case 'red':
      case 'green':
      case 'blue':
      case 'alpha': {
        let start = value.withChannelValue(channel, state.getThumbMinValue(0)).toString('css');
        let end = value.withChannelValue(channel, state.getThumbMaxValue(0)).toString('css');
        return `linear-gradient(to ${to}, ${start}, ${end})`;
      }
      default:
        throw new Error('Unknown color channel: ' + channel);
    }
  };

  let forcedColorAdjustNoneStyle = {forcedColorAdjust: 'none'};