@cimpress/react-components
Version:
React components to support the MCP styleguide
65 lines • 4.28 kB
JavaScript
"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const react_1 = __importDefault(require("react"));
const react_components_1 = require("@cimpress/react-components");
const colorBlockStyles = {
padding: '20px',
height: '70px',
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
};
const ColorDemo = () => {
const colorStack = (color, name, textColor = 'white') => (react_1.default.createElement("div", { style: { color: textColor, margin: '0 5px' } },
react_1.default.createElement("div", { style: Object.assign(Object.assign({}, colorBlockStyles), { background: color.base }) },
name,
".base"),
react_1.default.createElement("div", { style: Object.assign(Object.assign({}, colorBlockStyles), { background: color.darker }) },
name,
".darker"),
react_1.default.createElement("div", { style: Object.assign(Object.assign({}, colorBlockStyles), { background: color.darkest }) },
name,
".darkest")));
const colorBlock = (color, name, textColor = 'white') => (react_1.default.createElement("div", { style: Object.assign(Object.assign({}, colorBlockStyles), { color: textColor, margin: '0 5px', background: color }) }, name));
const remarks = (react_1.default.createElement("div", null,
react_1.default.createElement("p", null, "The colors of the styleguide are available as utility constants."),
react_1.default.createElement("p", null,
"All colors are exported from @cimpress/react-component as ",
react_1.default.createElement("code", null, "colors"),
". Colors with interaction stacks are stored as objects, greyscale variants are stored as plain strings."),
react_1.default.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_1.default.createElement("div", { style: { paddingBottom: '30px' } },
react_1.default.createElement("h2", null, "Colors"),
remarks,
react_1.default.createElement("h4", null, "Brand Primary"),
react_1.default.createElement("div", { style: { display: 'flex' } },
colorStack(react_components_1.colors.persimmon, 'persimmon'),
colorStack(react_components_1.colors.cobalt, 'cobalt')),
react_1.default.createElement("h4", null, "Greyscale"),
react_1.default.createElement("div", { style: { display: 'flex' } },
colorBlock(react_components_1.colors.coal, 'coal'),
colorBlock(react_components_1.colors.shale, 'shale'),
colorBlock(react_components_1.colors.slate, 'slate'),
colorBlock(react_components_1.colors.alloy, 'alloy', react_components_1.colors.coal),
colorBlock(react_components_1.colors.platinum, 'platinum', react_components_1.colors.coal),
colorBlock(react_components_1.colors.silver, 'silver', react_components_1.colors.coal),
colorBlock(react_components_1.colors.horizon, 'horizon', react_components_1.colors.coal),
colorBlock(react_components_1.colors.white, 'white', react_components_1.colors.coal)),
react_1.default.createElement("h4", null, "Interaction"),
react_1.default.createElement("div", { style: { display: 'flex' } },
colorStack(react_components_1.colors.ocean, 'ocean'),
colorStack(react_components_1.colors.teal, 'teal'),
colorStack(react_components_1.colors.sky, 'sky'),
colorStack(react_components_1.colors.granite, 'granite')),
react_1.default.createElement("h4", null, "Messaging"),
react_1.default.createElement("div", { style: { display: 'flex' } },
colorStack(react_components_1.colors.info, 'info'),
colorStack(react_components_1.colors.success, 'success'),
colorStack(react_components_1.colors.warning, 'warning'),
colorStack(react_components_1.colors.danger, 'danger'))));
};
exports.default = ColorDemo;
//# sourceMappingURL=colors.js.map