Colors
color
string | undefined
className
string | undefined
<div style={{ display: 'flex', alignItems: 'center' }}><divstyle={{display: 'grid',gridTemplateRows: 'repeat(3, fit-content(100%))',gridRowGap: '16px',marginRight: 64,}}><Header as="h3" color="lightBlue">Blue</Header><Header as="h3" color="red">Red</Header><Header as="h3" color="grey">Grey</Header></div><div style={{ display: 'flex', justifyContent: 'space-between' }}><divstyle={{ width: 64, height: 64, borderRadius: 4, marginRight: 8 }}className="f5-bg-color-black"/><divstyle={{ width: 64, height: 64, borderRadius: 4, marginRight: 8 }}className="f5-bg-color-grey"/><divstyle={{width: 64,height: 64,borderRadius: 4,border: '1px solid black',marginRight: 8,}}className="f5-bg-color-white"/><divstyle={{ width: 64, height: 64, borderRadius: 4, marginRight: 8 }}className="f5-bg-color-blue"/><divstyle={{ width: 64, height: 64, borderRadius: 4, marginRight: 8 }}className="f5-bg-color-light-blue"/><divstyle={{ width: 64, height: 64, borderRadius: 4, marginRight: 8 }}className="f5-bg-color-red"/></div></div>
Palette
() => {const palette = ['a', 'b', 'c', 'd']const colors = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]const textStyle = { marginLeft: 4 }const rectColorStyle = { width: 48, height: 48, color: '#fff' }return palette.map(p => (<div style={{ display: 'flex', justifyContent: 'space-between' }}><div>{colors.map(color => (<span style={textStyle} className={`f5-color-${p}${color}`}>{`${p}${color}`}</span>))}</div><div style={{ display: 'flex' }}>{colors.map(color => (<span className={`f5-bg-color-${p}${color}`} style={rectColorStyle}>{`${p}${color}`}</span>))}</div></div>))}