Quick Styled-Components Interactions

interactive.js

import ColorUtils from './colors';

const interactive = (attr, color) =>
  `
  &:hover {
    ${attr}: ${ColorUtils.hover(color)};
  }
  &:active {
    ${attr}: ${ColorUtils.active(color)};
  }
  &:focus {
    ${attr}: ${ColorUtils.focus(color)};
  }
  &:disabled {
    ${attr}: ${ColorUtils.disabled(color)};
  }
  ${attr}: ${color};
`;

export default interactive;