1 | "use strict";
|
2 |
|
3 | exports.__esModule = true;
|
4 | exports.genericStyles = exports.evalStyle = exports.placeholderStyle = exports.overflowStyle = exports.inputStyle = exports.focusStyle = exports.edgeStyle = exports.controlBorderStyle = exports.baseStyle = void 0;
|
5 |
|
6 | var _styledComponents = require("styled-components");
|
7 |
|
8 | var _colors = require("./colors");
|
9 |
|
10 | var _mixins = require("./mixins");
|
11 |
|
12 | var baseStyle = (0, _styledComponents.css)(["font-family:", ";font-size:", ";line-height:", ";font-weight:", ";", " box-sizing:border-box;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;"], function (props) {
|
13 | return props.theme.global.font.family;
|
14 | }, function (props) {
|
15 | return props.theme.global.font.size;
|
16 | }, function (props) {
|
17 | return props.theme.global.font.height;
|
18 | }, function (props) {
|
19 | return props.theme.global.font.weight;
|
20 | }, function (props) {
|
21 | return !props.plain && props.theme.global.colors.background && (0, _styledComponents.css)(["background:", ";color:", ";"], (0, _colors.normalizeColor)('background', props.theme, true), (0, _colors.normalizeColor)('text', props.theme, true));
|
22 | });
|
23 | exports.baseStyle = baseStyle;
|
24 | var controlBorderStyle = (0, _styledComponents.css)(["border:", " solid ", ";border-radius:", ";"], function (props) {
|
25 | return props.theme.global.control.border.width;
|
26 | }, function (props) {
|
27 | return (0, _colors.normalizeColor)('border', props.theme);
|
28 | }, function (props) {
|
29 | return props.theme.global.control.border.radius;
|
30 | });
|
31 | exports.controlBorderStyle = controlBorderStyle;
|
32 |
|
33 | var edgeStyle = function edgeStyle(kind, data, responsive, responsiveBreakpoint, theme) {
|
34 | var breakpoint = responsiveBreakpoint && theme.global.breakpoints[responsiveBreakpoint];
|
35 |
|
36 | if (typeof data === 'string') {
|
37 | return (0, _styledComponents.css)(["", ":", ";", ";"], kind, theme.global.edgeSize[data] || data, responsive && breakpoint ? (0, _mixins.breakpointStyle)(breakpoint, "\n " + kind + ": " + (breakpoint.edgeSize[data] || data) + ";\n ") : '');
|
38 | }
|
39 |
|
40 | var result = [];
|
41 |
|
42 | if (data.horizontal) {
|
43 | result.push((0, _styledComponents.css)(["", "-left:", ";", "-right:", ";", ";"], kind, theme.global.edgeSize[data.horizontal] || data.horizontal, kind, theme.global.edgeSize[data.horizontal] || data.horizontal, responsive && breakpoint ? (0, _mixins.breakpointStyle)(breakpoint, "\n " + kind + "-left: " + (breakpoint.edgeSize[data.horizontal] || data.horizontal) + ";\n " + kind + "-right: " + (breakpoint.edgeSize[data.horizontal] || data.horizontal) + ";\n ") : ''));
|
44 | }
|
45 |
|
46 | if (data.vertical) {
|
47 | result.push((0, _styledComponents.css)(["", "-top:", ";", "-bottom:", ";", ";"], kind, theme.global.edgeSize[data.vertical] || data.vertical, kind, theme.global.edgeSize[data.vertical] || data.vertical, responsive && breakpoint ? (0, _mixins.breakpointStyle)(breakpoint, "\n " + kind + "-top: " + (breakpoint.edgeSize[data.vertical] || data.vertical) + ";\n " + kind + "-bottom: " + (breakpoint.edgeSize[data.vertical] || data.vertical) + ";\n ") : ''));
|
48 | }
|
49 |
|
50 | if (data.top) {
|
51 | result.push((0, _styledComponents.css)(["", "-top:", ";", ";"], kind, theme.global.edgeSize[data.top] || data.top, responsive && breakpoint ? (0, _mixins.breakpointStyle)(breakpoint, "\n " + kind + "-top: " + (breakpoint.edgeSize[data.top] || data.top) + ";\n ") : ''));
|
52 | }
|
53 |
|
54 | if (data.bottom) {
|
55 | result.push((0, _styledComponents.css)(["", "-bottom:", ";", ";"], kind, theme.global.edgeSize[data.bottom] || data.bottom, responsive && breakpoint ? (0, _mixins.breakpointStyle)(breakpoint, "\n " + kind + "-bottom: " + (breakpoint.edgeSize[data.bottom] || data.bottom) + ";\n ") : ''));
|
56 | }
|
57 |
|
58 | if (data.left) {
|
59 | result.push((0, _styledComponents.css)(["", "-left:", ";", ";"], kind, theme.global.edgeSize[data.left] || data.left, responsive && breakpoint ? (0, _mixins.breakpointStyle)(breakpoint, "\n " + kind + "-left: " + (breakpoint.edgeSize[data.left] || data.left) + ";\n ") : ''));
|
60 | }
|
61 |
|
62 | if (data.right) {
|
63 | result.push((0, _styledComponents.css)(["", "-right:", ";", ";"], kind, theme.global.edgeSize[data.right] || data.right, responsive && breakpoint ? (0, _mixins.breakpointStyle)(breakpoint, "\n " + kind + "-right: " + (breakpoint.edgeSize[data.right] || data.right) + ";\n ") : ''));
|
64 | }
|
65 |
|
66 | return result;
|
67 | };
|
68 |
|
69 |
|
70 | exports.edgeStyle = edgeStyle;
|
71 | var focusStyle = (0, _styledComponents.css)(["> circle,> ellipse,> line,> path,> polygon,> polyline,> rect{outline:", " solid 2px;}border-color:", ";box-shadow:0 0 2px 2px ", ";::-moz-focus-inner{border:0;}"], function (props) {
|
72 | return (0, _colors.normalizeColor)(props.theme.global.focus.border.color, props.theme);
|
73 | }, function (props) {
|
74 | return (0, _colors.normalizeColor)(props.theme.global.focus.border.color, props.theme);
|
75 | }, function (props) {
|
76 | return (0, _colors.normalizeColor)(props.theme.global.focus.border.color, props.theme);
|
77 | });
|
78 | exports.focusStyle = focusStyle;
|
79 | var inputStyle = (0, _styledComponents.css)(["box-sizing:border-box;font-size:inherit;border:none;-webkit-appearance:none;padding:", "px;outline:none;background:transparent;color:inherit;", " margin:0;", " ", "::-webkit-search-decoration{-webkit-appearance:none;}"], function (props) {
|
80 | return (0, _mixins.parseMetricToNum)(props.theme.global.input.padding) - (0, _mixins.parseMetricToNum)(props.theme.global.control.border.width);
|
81 | }, function (props) {
|
82 | return props.theme.global.input.weight && (0, _styledComponents.css)(["font-weight:", ";"], props.theme.global.input.weight);
|
83 | }, function (props) {
|
84 | return props.focus && (!props.plain || props.focusIndicator) && focusStyle;
|
85 | }, controlBorderStyle);
|
86 | exports.inputStyle = inputStyle;
|
87 |
|
88 | var overflowStyle = function overflowStyle(overflowProp) {
|
89 | if (typeof overflowProp === 'string') {
|
90 | return (0, _styledComponents.css)(["overflow:", ";"], overflowProp);
|
91 | }
|
92 |
|
93 | return (0, _styledComponents.css)(["", " ", ";"], overflowProp.horizontal && "overflow-x: " + overflowProp.horizontal + ";", overflowProp.vertical && "overflow-y: " + overflowProp.vertical + ";");
|
94 | };
|
95 |
|
96 | exports.overflowStyle = overflowStyle;
|
97 | var placeholderColor = (0, _styledComponents.css)(["color:", ";"], function (props) {
|
98 | return props.theme.global.colors.placeholder;
|
99 | });
|
100 | var placeholderStyle = (0, _styledComponents.css)(["&::-webkit-input-placeholder{", ";}&::-moz-placeholder{", ";}&:-ms-input-placeholder{", ";}"], placeholderColor, placeholderColor, placeholderColor);
|
101 |
|
102 | exports.placeholderStyle = placeholderStyle;
|
103 |
|
104 | var evalStyle = function evalStyle(arg, theme) {
|
105 | if (arg && Array.isArray(arg) && typeof arg[0] === 'function') {
|
106 | return arg[0]({
|
107 | theme: theme
|
108 | });
|
109 | }
|
110 |
|
111 | return arg;
|
112 | };
|
113 |
|
114 | exports.evalStyle = evalStyle;
|
115 | var ALIGN_SELF_MAP = {
|
116 | center: 'center',
|
117 | end: 'flex-end',
|
118 | start: 'flex-start',
|
119 | stretch: 'stretch'
|
120 | };
|
121 | var genericStyles = (0, _styledComponents.css)(["", " ", " ", ""], function (props) {
|
122 | return props.alignSelf && "align-self: " + ALIGN_SELF_MAP[props.alignSelf] + ";";
|
123 | }, function (props) {
|
124 | return props.gridArea && "grid-area: " + props.gridArea + ";";
|
125 | }, function (props) {
|
126 | return props.margin && edgeStyle('margin', props.margin, props.responsive, props.theme.global.edgeSize.responsiveBreakpoint, props.theme);
|
127 | });
|
128 | exports.genericStyles = genericStyles; |
\ | No newline at end of file |