Add color pairings to theme

Would be good to add set color pairings to the theme so that components like Badge & Banner can use them.

An example & reference can be found in @jxnblk’s styled-system.

colorStyles: {
  warning: {
    color: 'text',
    backgroundColor: 'orange'
  },
  error: {
    color: 'white',
    backgroundColor: 'red'
  },
}

[odmln]

Updated naming convention.

colorStyles: {
  whiteOnText: {
    color: 'white',
    backgroundColor: 'text'
  },
  whiteOnGray: {
    color: 'white',
    backgroundColor: 'gray'
  },
  textOnLightGray: {
    color: 'text',
    backgroundColor: 'lightGray'
  },
  whiteOnBlue: {
    color: 'white',
    backgroundColor: 'blue',
  },
  blueOnLightBlue: {
    color: 'blue',
    backgroundColor: 'lightBlue',
  },
  whiteOnGreen: {
    color: 'white',
    backgroundColor: 'green',
  },
  greenOnLightGreen: {
    color: 'green',
    backgroundColor: 'lightGreen',
  },
  whiteOnRed: {
    color: 'white',
    backgroundColor: 'red',
  },
  redOnLightRed: {
    color: 'red',
    backgroundColor: 'lightRed',
  },
  textOnOrange: {
    color: 'text',
    backgroundColor: 'orange',
  },
  textOnLightOrange: {
    color: 'text',
    backgroundColor: 'lightOrange',
  },
  whiteOnPurple: {
    color: 'white',
    backgroundColor: 'purple',
  },
  purpleOnLightPurple: {
    color: 'purple',
    backgroundColor: 'lightPurple',
  },
  textOnWhite: {
    color: 'text',
    backgroundColor: 'white',
  },
  grayOnWhite: {
    color: 'gray',
    backgroundColor: 'white',
  },
  blueOnWhite: {
    color: 'blue',
    backgroundColor: 'white',
  },
  greenOnWhite: {
    color: 'green',
    backgroundColor: 'white',
  },
  redOnWhite: {
    color: 'red',
    backgroundColor: 'white',
  },
  purpleOnWhite: {
    color: 'purple',
    backgroundColor: 'white',
  },
}

[jxnblk]

Closing this since it’s now in the v2 branch