import { injectGlobal } from 'styled-components';
import { buildGlobalStyles, theme }  from 'koine-ui-utils';

injectGlobal([buildGlobalStyles(theme)]);

import { padScale } from 'koine-ui-utils';
import { rem } from 'polished';

// `padScale` returns a raw number
// given `theme.dimensions.basePad` is `8`, a scale of 3 would return `24`
// wrapping this in `rem()` keeps the units consistent
// this example would return `padding: 2rem 3rem;`
const WideButton = styled.button`
  padding: ${rem(padScale(2))} ${rem(padScale(3))};
`;

{
  animations: {
    // css keyframes
    bounce
    slidedown
  },
  colors:
    base: {
      // graytones
      chrome000: STRING,
      chrome050: STRING,
      chrome100: STRING,
      chrome200: STRING,
      chrome300: STRING,
      chrome400: STRING,
      chrome500: STRING,
      chrome600: STRING,
      chrome700: STRING,
      chrome800: STRING,
      chrome900: STRING,

      // ui colors
      background: STRING,
      link: STRING,
      linkHover: STRING,
      linkVisited: STRING,
      overlay: STRING,
      shadow: STRING,
      shadowLight: STRING,
      text: STRING,
      textLight: STRING,
    },
    brand: {
      primary: STRING,
      secondary: STRING,
      tertiary: STRING,
      blue: STRING,
       purple: STRING,
      pink: STRING,
      orange: STRING,
      green: STRING,
      yellow: STRING,
    },
    status: {
      danger: STRING,
      default: STRING,
      info: STRING,
      success: STRING,
      warning: STRING,
    },
  },
  dimensions: {
    baseFontSize: NUMBER,
    basePad: NUMBER,
  },
  fonts: {
    primary: STRING,
    primaryFallback: STRING,
  },
  fontWeights: {
    light: NUMBER,
    normal: NUMBER,
    semiBold: NUMBER,
    bold: NUMBER,
  },
}