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'

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

Example usage:

import RemoveCircle from 'kuali-ui/icons/remove-circle'
import {Colors} from 'kuali-ui';

<div>
  <RemoveCircle
    color={Colors.green}
    size={22}
  />
</div>

Available props:

• className
• color - You're highly encouraged to use a color from the palette above
• size - in pixels (Default 24)
• style
• title - For accessibility (Default: component name with spaces. e.g. 'Remove Circle')

Each of these are available in the kuali-ui/icons directory.

add-circle

add

archive

arrow-back

arrow-circle

arrow-collapse

arrow-expand

arrow-redo

arrow-undo

arrow

attachment

audio

award-check

award

badge-alt

badge-check

badge

bandaid

basket

beaker

bell-alt

bell-nope

bell-ring

bell

bills-alt

bills

binoculars

bolt

book

bookmark

briefcase

brush

bubble

bug

bulb

calculator

calendar-check

calendar

calendars

car

caret

cart

certificate-alt

certificate

chart-bar

chart-pie

chat

check-circle

check

checkbox

checkout

clipboard-check

clipboard-edit

clipboard

cloud

clouds

coins

compass

computer

controls

creditcard

crosshairs

crown

currency-cents

currency-dollar

currency-euro

currency-pound

currency-yen

cursor

data-search

data

dialog-add

dialog-icons

dialog-text

dialog

dialogs

disaster

download

drop

edit

emoji-dead

emoji-happy

emoji-neutral

emoji-poop

emoji-sad

error-alt

error

expand-alt

expand

eye

eyedropper

file-add

file-image

file-pdf

file-text

file-video

file-zip

file

files-alt

files

filter

fingerprint

flag

folder-add

folder-open

folder

game

gauge

gear

gem

gift

glasses

graduate

heart

help

home

id-alt

id

image

inbox

info

key

keyboard

laptop

lasso

layers-alt

layers

link

location-alt

location

lock

logout

loop

magic-alt

magic

magnet

mail

map

marquee-arrow

marquee-plus

marquee

megaphone

menu

minus

mobile

music

news

nope

note-alt

note

org

paint-fill

paint

password

pin

play

presentation

printer

puzzle

quote

reload

remove-circle-alt

remove-circle

remove

rich-aligncenter

rich-alignleft

rich-alignright

rich-bold

rich-bullet

rich-font

rich-italic

rich-numberlist

rich-size

rich-strike

ruler

safe

scissors

screen-contract

screen-full

search

send

share-alt

share

signs

sms

star

stream

support

tablet

tag

target-alt

target

time-rewind

time

tools

trash

unlock

upload

user

users

video-alt

warning

watch

world-alt

world