<commit_before>import {
  getLuminance,
  transparentize
} from 'polished'
import _round from 'lodash/round'

import {generateInteractionColor} from '../utilStyles'

const reactSelectTheme = (theme, outerTheme) => ({
  ...theme,
  borderRadius: outerTheme.radii.regular,
  colors: {
    ...theme.colors,
    primary: outerTheme.colors.signal.info.text,
    primary75: outerTheme.colors.signal.info.text,
    primary50: outerTheme.colors.signal.info.paper,
    primary25: outerTheme.colors.signal.info.paper,
    danger: outerTheme.colors.signal.danger.text,
    dangerLight: outerTheme.colors.signal.danger.paper
  }
})

const reactSelectStyles = outerTheme => {
  const spaceScale = exponent =>
    `${_round(exponentiate(outerTheme.space.base, exponent, outerTheme.space.factor), 3)}rem`

  const exponentiate = (base, exponent, factor) =>
    Math.pow(factor, exponent) * base

  const paper = generateInteractionColor(outerTheme.colors.paper)
  const text = generateInteractionColor(outerTheme.colors.text, {
    action: getLuminance(outerTheme.colors.paper) > 0.5 ? 'darken' : 'lighten'
  })
  const infoText = outerTheme.colors.signal.info.text
  const typography = {
    color: text[0],
    fontFamily: outerTheme.fontFamily.regular,
    fontSize: `${outerTheme.fontSize.base}rem`,
    fontWeight: outerTheme.fontWeights.regular,
    lineHeight: outerTheme.lineHeights.regular
  }
  return {
    container: (base, state) => ({
      ...base,
      ...typography,
      outline: 0
    }),
    control: (base, state) => ({
      ...base,
      backgroundColor: state.isDisabled ? paper[1] : paper[0],
      borderColor: state.isFocused
        ? infoText
        : state.theme.colors.neutral20,
      boxShadow: state.isFocused
        ? `0 0 8px ${transparentize(0.4, infoText)}`
        : null,
      '&:hover': {
        borderColor: state.isFocused ? infoText : state.theme.colors.neutral30
      }
    }),
    noOptionsMessage: (base, state) => ({
      ...base,
      color: outerTheme.colors.signal.warning.text,
      cursor: 'default',
      textAlign: 'left'
    }),
    loadingMessage: (base, state) => ({
      ...base,
      color: outerTheme.colors.signal.warning.text,
      cursor: 'default',
      textAlign: 'left'
    }),
    option: (base, state) => ({
      ...base,
      backgroundColor: state.isSelected
        ? paper[2]
        : state.isFocused
          ? paper[1]
          : paper[0],
      cursor: 'pointer',
      ':active': {
        backgroundColor: state.isSelected
          ? paper[2]
          : paper[1]
      }
    }),
    indicatorsContainer: (base, state) => ({
      ...base,
      '> span': {
        marginRight: `${spaceScale(-2)}`
      },
      '> span > button': {
        width: '2.6rem'
      }
    }),
    input: (base, state) => ({
      margin: `0 0 ${spaceScale(-2)} 0`
    }),
    menuList: (base, state) => ({
      ...base,
      ...typography
    }),
    multiValue: (base, state) => ({
      ...base,
      borderRadius: outerTheme.radii.regular,
      margin: `0 ${spaceScale(-2)} ${spaceScale(-2)} 0`
    }),
    multiValueLabel: (base, state) => ({
      ...base,
      borderRadius: outerTheme.radii.regular,
      color: text[0],
      fontSize: 'inherit'
    }),
    multiValueRemove: (base, state) => ({
      ...base,
      borderRadius: outerTheme.radii.regular,
      color: text[0],
      display: state.isDisabled ? 'none' : 'flex',
      ':hover': {
        ...base[':hover'],
        color: text[1],
        backgroundColor: paper[2],
        cursor: 'pointer'
      }
    }),
    singleValue: (base, state) => ({
      ...base,
      color: text[0],
      margin: `0 ${spaceScale(-2)}`
    }),
    valueContainer: (base, state) => ({
      ...base,
      padding: `${spaceScale(-2)} ${spaceScale(-1)} 0 ${spaceScale(-2)}`
    })
  }
}

export {
  reactSelectStyles,<commit_msg>refactor(tocco-ui): remove duplicate of scaling function<commit_after>import {
  getLuminance,
  transparentize
} from 'polished'

import {
  generateInteractionColor,
  scale
} from '../utilStyles'

const reactSelectTheme = (theme, outerTheme) => ({
  ...theme,
  borderRadius: outerTheme.radii.regular,
  colors: {
    ...theme.colors,
    primary: outerTheme.colors.signal.info.text,
    primary75: outerTheme.colors.signal.info.text,
    primary50: outerTheme.colors.signal.info.paper,
    primary25: outerTheme.colors.signal.info.paper,
    danger: outerTheme.colors.signal.danger.text,
    dangerLight: outerTheme.colors.signal.danger.paper
  }
})

const reactSelectStyles = outerTheme => {
  const fakeProps = {theme: outerTheme}
  const paper = generateInteractionColor(outerTheme.colors.paper)
  const text = generateInteractionColor(outerTheme.colors.text, {
    action: getLuminance(outerTheme.colors.paper) > 0.5 ? 'darken' : 'lighten'
  })
  const infoText = outerTheme.colors.signal.info.text
  const typography = {
    color: text[0],
    fontFamily: outerTheme.fontFamily.regular,
    fontSize: `${outerTheme.fontSize.base}rem`,
    fontWeight: outerTheme.fontWeights.regular,
    lineHeight: outerTheme.lineHeights.regular
  }
  return {
    container: (base, state) => ({
      ...base,
      ...typography,
      outline: 0
    }),
    control: (base, state) => ({
      ...base,
      backgroundColor: state.isDisabled ? paper[1] : paper[0],
      borderColor: state.isFocused
        ? infoText
        : state.theme.colors.neutral20,
      boxShadow: state.isFocused
        ? `0 0 8px ${transparentize(0.4, infoText)}`
        : null,
      '&:hover': {
        borderColor: state.isFocused ? infoText : state.theme.colors.neutral30
      }
    }),
    noOptionsMessage: (base, state) => ({
      ...base,
      color: outerTheme.colors.signal.warning.text,
      cursor: 'default',
      textAlign: 'left'
    }),
    loadingMessage: (base, state) => ({
      ...base,
      color: outerTheme.colors.signal.warning.text,
      cursor: 'default',
      textAlign: 'left'
    }),
    option: (base, state) => ({
      ...base,
      backgroundColor: state.isSelected
        ? paper[2]
        : state.isFocused
          ? paper[1]
          : paper[0],
      cursor: 'pointer',
      ':active': {
        backgroundColor: state.isSelected
          ? paper[2]
          : paper[1]
      }
    }),
    indicatorsContainer: (base, state) => ({
      ...base,
      '> span': {
        marginRight: `${scale.space(fakeProps, -2)}`
      },
      '> span > button': {
        width: '2.6rem'
      }
    }),
    input: (base, state) => ({
      margin: `0 0 ${scale.space(fakeProps, -2)} 0`
    }),
    menuList: (base, state) => ({
      ...base,
      ...typography
    }),
    multiValue: (base, state) => ({
      ...base,
      borderRadius: outerTheme.radii.regular,
      margin: `0 ${scale.space(fakeProps, -2)} ${scale.space(fakeProps, -2)} 0`
    }),
    multiValueLabel: (base, state) => ({
      ...base,
      borderRadius: outerTheme.radii.regular,
      color: text[0],
      fontSize: 'inherit'
    }),
    multiValueRemove: (base, state) => ({
      ...base,
      borderRadius: outerTheme.radii.regular,
      color: text[0],
      display: state.isDisabled ? 'none' : 'flex',
      ':hover': {
        ...base[':hover'],
        color: text[1],
        backgroundColor: paper[2],
        cursor: 'pointer'
      }
    }),
    singleValue: (base, state) => ({
      ...base,
      color: text[0],
      margin: `0 ${scale.space(fakeProps, -2)}`
    }),
    valueContainer: (base, state) => ({
      ...base,
      padding: `${scale.space(fakeProps, -2)} ${scale.space(fakeProps, -1)} 0 ${scale.space(fakeProps, -2)}`
    })
  }
}

export {
  reactSelectStyles,
{'fraction_non_alphanumeric': 0.1610501567398119, 'fraction_numerical': 0.012669801462904912, 'mean_word_length': 2.432093231734648, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 43, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '2006461', 'n_tokens_mistral': 2470, 'n_tokens_neox': 2441, 'n_words': 464}