kuali-ui

Colors

The Kuali approved palette consists of these colors.

Colors.lightBlue or --kuali-light-blue

Colors.blue or --kuali-blue

Colors.pink or --kuali-pink

Colors.yellow or --kuali-yellow

Colors.green or --kuali-green

Colors.purple or --kuali-purple

Colors.orange or --kuali-orange

Colors.red or --kuali-red

Colors.grey or --kuali-grey

Colors.darkGrey or --kuali-dark-grey

They can be used in Javascript like this

import Colors from 'kuali-ui/colors';

function ColorExample() {
  return (
    <div style={{backgroundColor: Colors.orange}} />
  )
}

or in CSS like this (assumes you are using postcss)

@import 'kuali-ui/colors';

.example {
  background-color: var(--kuali-orange);
}

Icons

Kuali-UI utilizes the material-icons font. You will need to load the font on any page needing icons.

Components

• AddButton
• FilterEditor
• KualiHeader