packages/framework/level2/color.xcss
/**
* COLOURS
*/
/* Foreground colours */
${x.fn.each(x.color, (key, value) => xcss`
.${key} { color: ${value}; }
`)}
/* Background colours */
${x.fn.each(x.color, (key, value) => xcss`
.bg-${key} { background-color: ${value}; }
`)}
// Zebra stripes (alternating coloured backgrounds)
.bg-zebra:nth-child(even) {
background-color: ${x.color.zebraBackground};
}
/* Border colours */
.border { border-style: solid }
.border-dash { border-style: dashed }
${x.fn.each(x.color, (key, value) => xcss`
.border-${key} { border-color: ${value}; }
`)}
/* Transparency */
.alpha100 { opacity: 1; }
.alpha85 { opacity: 0.85; }
.alpha75 { opacity: 0.75; }
.alpha50 { opacity: 0.5; }
.alpha25 { opacity: 0.25; }
.alpha15 { opacity: 0.15; }
.alpha0 { opacity: 0; }
/* Utility colours */
.plain { color: ${x.color.text}; }
.muted { color: ${x.color.muted}; }
.bg-muted { background-color: ${x.color.muted}; }
.inherit { color: inherit; }
.inherit-i { color: inherit !important; }