import { css } from 'styled-components' ; import Color from 'color' ; export const color = { primary : '#0052cc' , success : '#0B875B' , danger : '#E13C3C' , warning : '#F89C1C' , secondary : '#F4F5F7' , textDarkest : '#172b4d' , textDark : '#42526E' , textMedium : '#5E6C84' , textLight : '#8993a4' , textLink : '#0052cc' , backgroundDarkPrimary : '#0747A6' , backgroundMedium : '#dfe1e6' , backgroundLight : '#ebecf0' , backgroundLightest : '#F4F5F7' , backgroundLightPrimary : '#D2E5FE' , backgroundLightSuccess : '#E4FCEF' , borderLightest : '#dfe1e6' , borderLight : '#C1C7D0' , borderInputFocus : '#4c9aff' , } ; export const font = { regular : 'font-family: "Open Sans", Roboto, sans-serif; font-weight: normal;' , size : ( size ) => `font-size: ${ size }px;` , bold : 'font-family: "Open Sans", Roboto, sans-serif; font-weight: normal;' , medium : 'font-family: "Open Sans", Roboto, sans-serif; font-weight: normal;' , } ; export const mixin = { darken : ( colorValue , amount ) => Color ( colorValue ) . darken ( amount ) . string ( ) , lighten : ( colorValue , amount ) => Color ( colorValue ) . lighten ( amount ) . string ( ) , rgba : ( colorValue , opacity ) => Color ( colorValue ) . alpha ( opacity ) . string ( ) , boxShadowCard : css `
    box-shadow: rgba(9, 30, 66, 0.25) 0px 1px 2px 0px;
  ` , boxShadowMedium : css `
    box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.1);
  ` , boxShadowDropdown : css `
    box-shadow: rgba(9, 30, 66, 0.25) 0px 4px 8px -2px, rgba(9, 30, 66, 0.31) 0px 0px 1px;
  ` , truncateText : css `
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  ` , clickable : css `
    cursor: pointer;
    user-select: none;
  ` , hardwareAccelerate : css `
    transform: translateZ(0);
  ` , cover : css `
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
  ` , link : ( colorValue = color . textLink ) => css `
    cursor: pointer;
    color: ${ colorValue };
    ${ font . medium }
    &:hover, &:visited, &:active {
      color: ${ colorValue };
    }
    &:hover {
      text-decoration: underline;
    }
  ` , placeholderColor : ( colorValue ) => css `
    ::-webkit-input-placeholder {
      color: ${ colorValue } !important;
      opacity: 1 !important;
    }
    :-moz-placeholder {
      color: ${ colorValue } !important;
      opacity: 1 !important;
    }
    ::-moz-placeholder {
      color: ${ colorValue } !important;
      opacity: 1 !important;
    }
    :-ms-input-placeholder {
      color: ${ colorValue } !important;
      opacity: 1 !important;
    }
  ` , } ;