Styling Themes

[ebonow]

Based on feedback from #3692, I thought it might be interesting to see what themes the community has built. It would be nice to compile these into one place and start a show and tell with codesandbox showing off different colors and styles the community has built or give others a starting point.

Credit goes to @jqueryisamonad for compiling this list of where the colors in the theme are used

const colors = {
 /*
  * multiValue(remove)/color:hover
  */
  danger: 'var(--danger)',

 /*
  * multiValue(remove)/backgroundColor(focused)
  * multiValue(remove)/backgroundColor:hover
  */
  dangerLight: 'var(--danger-light)',

 /*
  * control/backgroundColor
  * menu/backgroundColor
  * option/color(selected)
  */
  neutral0: 'var(--neutral-0)',

 /*
   * control/backgroundColor(disabled)
  */
  neutral5: 'var(--neutral-5)',

 /*
  * control/borderColor(disabled)
  * multiValue/backgroundColor
  * indicators(separator)/backgroundColor(disabled)
  */
  neutral10: 'var(--neutral-10)',

 /*
  * control/borderColor
  * option/color(disabled)
  * indicators/color
  * indicators(separator)/backgroundColor
  * indicators(loading)/color
  */
  neutral20: 'var(--neutral-20)',

 /*
  * control/borderColor(focused)
  * control/borderColor:hover
  */
  neutral30: 'var(--neutral-30)',

 /*
  * menu(notice)/color
  * singleValue/color(disabled)
  * indicators/color:hover
  */
  neutral40: 'var(--neutral-40)',

 /*
  * placeholder/color
  */
  neutral50: 'var(--neutral-50)',

 /*
  * indicators/color(focused)
  * indicators(loading)/color(focused)
  */
  neutral60: 'var(--neutral-60)',

  neutral70: 'var(--neutral-70)',

 /*
  * input/color
  * multiValue(label)/color
   * singleValue/color
  * indicators/color(focused)
  * indicators/color:hover(focused)
  */
  neutral80: 'var(--neutral-80)',

  neutral90: 'var(--neutral-90)',

 /*
  * control/boxShadow(focused)
  * control/borderColor(focused)
  * control/borderColor:hover(focused)
  * option/backgroundColor(selected)
  * option/backgroundColor:active(selected)
  */
  primary: 'var(--primary)',

 /*
  * option/backgroundColor(focused)
  */
  primary25: 'var(--primary-25)',

 /*
  * option/backgroundColor:active
  */
  primary50: 'var(--primary-50)',

  primary75: 'var(--primary-75)',
};