@cimpress/react-components
Version:
React components to support the MCP styleguide
60 lines • 3.39 kB
JavaScript
import React from 'react';
import { colors } from '@cimpress/react-components';
const colorBlockStyles = {
padding: '20px',
height: '70px',
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
};
const ColorDemo = () => {
const colorStack = (color, name, textColor = 'white') => (React.createElement("div", { style: { color: textColor, margin: '0 5px' } },
React.createElement("div", { style: Object.assign(Object.assign({}, colorBlockStyles), { background: color.base }) },
name,
".base"),
React.createElement("div", { style: Object.assign(Object.assign({}, colorBlockStyles), { background: color.darker }) },
name,
".darker"),
React.createElement("div", { style: Object.assign(Object.assign({}, colorBlockStyles), { background: color.darkest }) },
name,
".darkest")));
const colorBlock = (color, name, textColor = 'white') => (React.createElement("div", { style: Object.assign(Object.assign({}, colorBlockStyles), { color: textColor, margin: '0 5px', background: color }) }, name));
const remarks = (React.createElement("div", null,
React.createElement("p", null, "The colors of the styleguide are available as utility constants."),
React.createElement("p", null,
"All colors are exported from @cimpress/react-component as ",
React.createElement("code", null, "colors"),
". Colors with interaction stacks are stored as objects, greyscale variants are stored as plain strings."),
React.createElement("p", null, "You generally should not need to use these, but there may be cases where an application-specific piece of UI needs to be colored.")));
return (React.createElement("div", { style: { paddingBottom: '30px' } },
React.createElement("h2", null, "Colors"),
remarks,
React.createElement("h4", null, "Brand Primary"),
React.createElement("div", { style: { display: 'flex' } },
colorStack(colors.persimmon, 'persimmon'),
colorStack(colors.cobalt, 'cobalt')),
React.createElement("h4", null, "Greyscale"),
React.createElement("div", { style: { display: 'flex' } },
colorBlock(colors.coal, 'coal'),
colorBlock(colors.shale, 'shale'),
colorBlock(colors.slate, 'slate'),
colorBlock(colors.alloy, 'alloy', colors.coal),
colorBlock(colors.platinum, 'platinum', colors.coal),
colorBlock(colors.silver, 'silver', colors.coal),
colorBlock(colors.horizon, 'horizon', colors.coal),
colorBlock(colors.white, 'white', colors.coal)),
React.createElement("h4", null, "Interaction"),
React.createElement("div", { style: { display: 'flex' } },
colorStack(colors.ocean, 'ocean'),
colorStack(colors.teal, 'teal'),
colorStack(colors.sky, 'sky'),
colorStack(colors.granite, 'granite')),
React.createElement("h4", null, "Messaging"),
React.createElement("div", { style: { display: 'flex' } },
colorStack(colors.info, 'info'),
colorStack(colors.success, 'success'),
colorStack(colors.warning, 'warning'),
colorStack(colors.danger, 'danger'))));
};
export default ColorDemo;
//# sourceMappingURL=colors.js.map