react-uki
Version:
React UI styled components
86 lines • 7.84 kB
JavaScript
;
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const styled_components_1 = __importDefault(require("styled-components"));
const styled_system_1 = require("styled-system");
var styles_1 = require("./styles");
exports.theme = styles_1.theme;
exports.normalize = styles_1.normalize;
exports.themed = (key) => (props) => props.theme[key];
// Box
exports.Box = styled_components_1.default('div')({
boxSizing: 'border-box'
}, styled_system_1.space, styled_system_1.color, styled_system_1.display, styled_system_1.width, styled_system_1.height, styled_system_1.maxHeight, styled_system_1.minHeight, styled_system_1.maxWidth, styled_system_1.minWidth, styled_system_1.borders, styled_system_1.flex, styled_system_1.order, styled_system_1.alignSelf, styled_system_1.position, styled_system_1.zIndex, styled_system_1.top, styled_system_1.right, styled_system_1.bottom, styled_system_1.left, styled_system_1.overflow, styled_system_1.background, styled_system_1.backgroundImage, styled_system_1.backgroundSize, styled_system_1.backgroundPosition, styled_system_1.backgroundRepeat, styled_system_1.fontSize, styled_system_1.fontStyle, styled_system_1.textStyle, styled_system_1.opacity, styled_system_1.boxShadow, styled_system_1.lineHeight, styled_system_1.verticalAlign, exports.themed('Box'));
// Flexbox
exports.Flex = styled_components_1.default(exports.Box)({
display: 'flex'
}, styled_system_1.flexWrap, styled_system_1.flexDirection, styled_system_1.alignItems, styled_system_1.justifyContent, exports.themed('Flex'));
// Grid
exports.Grid = styled_components_1.default(exports.Box)({
display: 'grid'
}, styled_system_1.gridGap, styled_system_1.gridColumnGap, styled_system_1.gridRowGap, styled_system_1.gridColumn, styled_system_1.gridRow, styled_system_1.gridAutoFlow, styled_system_1.gridAutoColumns, styled_system_1.gridAutoRows, styled_system_1.gridTemplateColumns, styled_system_1.gridTemplateRows, styled_system_1.gridTemplateAreas, styled_system_1.gridArea, exports.themed('Grid'));
// Button
const buttons = styled_system_1.variant({ key: 'buttons' });
exports.Button = styled_components_1.default(exports.Flex)({
appearance: 'none',
display: 'inline-block',
textAlign: 'center',
lineHeight: 'inherit',
textDecoration: 'none'
}, styled_system_1.fontWeight, styled_system_1.buttonStyle, buttons, exports.themed('Button'));
exports.Button.defaultProps = {
as: 'button',
fontSize: 'inherit',
fontWeight: 4,
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
m: 0,
px: 3,
py: 3,
color: 'white',
bg: 'blue',
border: 0
};
// Text
exports.Text = styled_components_1.default(exports.Box)(styled_system_1.fontStyle, styled_system_1.fontFamily, styled_system_1.fontWeight, styled_system_1.textAlign, styled_system_1.letterSpacing, exports.themed('Text'));
exports.Text.defaultProps = {
as: 'span',
fontSize: '14px',
fontWeight: 'normal'
};
const headings = styled_system_1.variant({ key: 'headings' });
// Heading
exports.Heading = styled_components_1.default(exports.Text)(headings, exports.themed('Heading'));
exports.Heading.defaultProps = {
as: 'h2',
m: 0,
fontSize: '24px',
fontWeight: 'bold'
};
// Image
exports.Image = styled_components_1.default(exports.Box)({
maxWidth: '100%',
height: 'auto'
}, exports.themed('Image'));
exports.Image.defaultProps = {
as: 'img'
};
// Link
exports.Link = styled_components_1.default(exports.Box)(exports.themed('Link'));
exports.Link.defaultProps = {
as: 'a',
color: 'dark'
};
// Svg
exports.Svg = styled_components_1.default(exports.Box)(exports.themed('Svg'));
exports.Svg.defaultProps = {
as: 'svg',
width: 16,
height: 16,
viewBox: '0 0 48 48',
display: 'inline-block'
};
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi9zcmMvaW5kZXgudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7Ozs7QUFDQSwwRUFBdUM7QUFDdkMsaURBaUV1QjtBQWN2QixtQ0FBNEM7QUFBbkMseUJBQUEsS0FBSyxDQUFBO0FBQUUsNkJBQUEsU0FBUyxDQUFBO0FBZ0JaLFFBQUEsTUFBTSxHQUFHLENBQUksR0FBVyxFQUFFLEVBQUUsQ0FBQyxDQUFDLEtBQXFCLEVBQUUsRUFBRSxDQUFDLEtBQUssQ0FBQyxLQUFLLENBQUMsR0FBRyxDQUFDLENBQUM7QUFFdEYsTUFBTTtBQUNPLFFBQUEsR0FBRyxHQUFpQiwyQkFBTSxDQUFDLEtBQUssQ0FBQyxDQUM1QztJQUNFLFNBQVMsRUFBRSxZQUFZO0NBQ3hCLEVBQ0QscUJBQUssRUFDTCxxQkFBSyxFQUNMLHVCQUFPLEVBQ1AscUJBQUssRUFDTCxzQkFBTSxFQUNOLHlCQUFTLEVBQ1QseUJBQVMsRUFDVCx3QkFBUSxFQUNSLHdCQUFRLEVBQ1IsdUJBQU8sRUFDUCxvQkFBSSxFQUNKLHFCQUFLLEVBQ0wseUJBQVMsRUFDVCx3QkFBUSxFQUNSLHNCQUFNLEVBQ04sbUJBQUcsRUFDSCxxQkFBSyxFQUNMLHNCQUFNLEVBQ04sb0JBQUksRUFDSix3QkFBUSxFQUNSLDBCQUFVLEVBQ1YsK0JBQWUsRUFDZiw4QkFBYyxFQUNkLGtDQUFrQixFQUNsQixnQ0FBZ0IsRUFDaEIsd0JBQVEsRUFDUix5QkFBUyxFQUNULHlCQUFTLEVBQ1QsdUJBQU8sRUFDUCx5QkFBUyxFQUNULDBCQUFVLEVBQ1YsNkJBQWEsRUFDYixjQUFNLENBQUMsS0FBSyxDQUFDLENBQ2QsQ0FBQztBQUVGLFVBQVU7QUFDRyxRQUFBLElBQUksR0FBcUIsMkJBQU0sQ0FBQyxXQUFHLENBQUMsQ0FDL0M7SUFDRSxPQUFPLEVBQUUsTUFBTTtDQUNoQixFQUNELHdCQUFRLEVBQ1IsNkJBQWEsRUFDYiwwQkFBVSxFQUNWLDhCQUFjLEVB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