<commit_before>import {darken, lighten, readableColor, tint} from 'polished'
import {css} from 'styled-components'

import {theme as themeSelector} from './index'

const getBackgroundColor = (ink, look, theme) => {
  if (ink === 'primary' && look === 'raised') {
    return themeSelector.color('primary')({theme})
  }
  return themeSelector.color('paper')({theme})
}

const getFontColor = (ink, look, theme, backgroundColor) => {
  if (ink === 'primary' && look !== 'raised') {
    return themeSelector.color('primary')({theme})
  }
  return getMatchingFontColor(backgroundColor, theme)
}

const getBorder = (ink, look, theme) => {
  if (ink !== 'primary' && look === 'raised') {
    return `1px solid ${themeSelector.color('secondaryLight')({theme})}`
  }
  return 'none'
}

const getHoverBackgroundColor = (ink, look, theme) => {
  if (look === 'raised') {
    if (ink === 'primary') {
      return lighten(0.1, themeSelector.color('primary')({theme}))
    }
    return themeSelector.color('secondaryLight')({theme})
  }

  return darken(0.1, themeSelector.color('paper')({theme}))
}

const getMatchingFontColor = (color, theme) => {
  return readableColor(
    color,
    themeSelector.color('text')({theme}),
    themeSelector.color('paper')({theme})
  )
}

export default props => {
  const {ink, look, theme} = props
  const backgroundColor = getBackgroundColor(ink, look, theme)
  const fontColor = getFontColor(ink, look, theme, backgroundColor)
  const border = getBorder(ink, look, theme)
  const hoverBackgroundColor = getHoverBackgroundColor(ink, look, theme)

  return css`
          background: ${backgroundColor}
          color: ${fontColor};
          border: ${border};
          outline: none;
          
          &:focus,
          &:hover {
            background: ${hoverBackgroundColor}
          }
            
         
          &:active,
          &[aria-pressed="true"] {
            background:  ${lighten(0.1, hoverBackgroundColor)};
          }
          
          &:disabled {
            background: ${tint(0.5, backgroundColor)};
            color: ${tint(0.5, fontColor)};
            cursor: not-allowed;
          }
        `
}
<commit_msg>style(tocco-ui): format interactiveStyling<commit_after>import {darken, lighten, readableColor, tint} from 'polished'
import {css} from 'styled-components'

import {theme as themeSelector} from './index'

const getBackgroundColor = (ink, look, theme) => {
  if (ink === 'primary' && look === 'raised') {
    return themeSelector.color('primary')({theme})
  }
  return themeSelector.color('paper')({theme})
}

const getFontColor = (ink, look, theme, backgroundColor) => {
  if (ink === 'primary' && look !== 'raised') {
    return themeSelector.color('primary')({theme})
  }
  return getMatchingFontColor(backgroundColor, theme)
}

const getBorder = (ink, look, theme) => {
  if (ink !== 'primary' && look === 'raised') {
    return `1px solid ${themeSelector.color('secondaryLight')({theme})}`
  }
  return 'none'
}

const getHoverBackgroundColor = (ink, look, theme) => {
  if (look === 'raised') {
    if (ink === 'primary') {
      return lighten(0.1, themeSelector.color('primary')({theme}))
    }
    return themeSelector.color('secondaryLight')({theme})
  }

  return darken(0.1, themeSelector.color('paper')({theme}))
}

const getMatchingFontColor = (color, theme) =>
  readableColor(
    color,
    themeSelector.color('text')({theme}),
    themeSelector.color('paper')({theme})
  )

export default props => {
  const {ink, look, theme} = props
  const backgroundColor = getBackgroundColor(ink, look, theme)
  const fontColor = getFontColor(ink, look, theme, backgroundColor)
  const border = getBorder(ink, look, theme)
  const hoverBackgroundColor = getHoverBackgroundColor(ink, look, theme)

  return css`
    background: ${backgroundColor}
    color: ${fontColor};
    border: ${border};
    outline: none;
    
    &:focus,
    &:hover {
      background: ${hoverBackgroundColor}
    }
      
   
    &:active,
    &[aria-pressed="true"] {
      background:  ${lighten(0.1, hoverBackgroundColor)};
    }
    
    &:disabled {
      background: ${tint(0.5, backgroundColor)};
      color: ${tint(0.5, fontColor)};
      cursor: not-allowed;
    }`
}

{'fraction_non_alphanumeric': 0.16081112945060128, 'fraction_numerical': 0.005187455788729073, 'mean_word_length': 3.400414937759336, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 15, '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': '2364710', 'n_tokens_mistral': 1313, 'n_tokens_neox': 1314, 'n_words': 297}