@vimeo/iris
Version:
Vimeo Design System
122 lines (119 loc) • 10.4 kB
JavaScript
import { a as __makeTemplateObject } from '../../tslib.es6-7f0e734f.js';
import styled, { css } from 'styled-components';
import { rgba, rem } from 'polished';
import { blue, white } from '../../color/colors.esm.js';
var isDev = process.env.NODE_ENV === 'development';
function inputColors(_a) {
var theme = _a.theme, _b = _a.disabled, disabled = _b === void 0 ? false : _b, format = _a.format;
if (!format || !theme.formats[format])
format = 'basic';
var color = theme.formats[format];
var opacity = format === 'basic' ? 0 : 0.4;
return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n color: ", ";\n background-color: ", ";\n border: 1px solid ", ";\n transition: 120ms ease-in-out;\n\n &:hover {\n border: 1px solid ", ";\n }\n\n ", "\n\n ", "\n "], ["\n color: ", ";\n background-color: ", ";\n border: 1px solid ", ";\n transition: 120ms ease-in-out;\n\n &:hover {\n border: 1px solid ", ";\n }\n\n ", "\n\n ", "\n "])), theme.content.color, theme.content.background, rgba(color, 0.25 + opacity), rgba(color, 0.5 + opacity), !disabled && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n &:hover {\n border: 1px solid ", ";\n }\n "], ["\n &:hover {\n border: 1px solid ", ";\n }\n "])), rgba(color, 0.5 + opacity)), disabled && css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n background-color: ", ";\n border-color: ", ";\n pointer-events: none;\n "], ["\n background-color: ", ";\n border-color: ", ";\n pointer-events: none;\n "])), theme.content.disabled, rgba(color, 0.1 + opacity)));
}
var sizes = {
xxs: 0.5,
xs: 0.75,
sm: 0.75,
md: 1,
lg: 1.5,
xl: 1.75,
xxl: 2,
};
var paddings = {
xxs: 0.75,
xs: 0.875,
sm: 1.25,
md: 1.375,
lg: 1.5,
xl: 2,
xxl: 2.5,
};
// const sizes = {
// xs: 1.625,
// sm: 2,
// md: 2.375,
// lg: 3,
// xl: 3.75,
// };
function inputShape(_a) {
var inputSize = _a.inputSize, floating = _a.floating, _b = _a.variant, variant = _b === void 0 ? null : _b, _c = _a.pill, pill = _c === void 0 ? false : _c;
var variantPadding = variant === 'underline' ? 2.5 : 1;
var padding = (paddings[inputSize] / 2 - 0.175) / variantPadding;
return css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n border-radius: ", ";\n padding: ", "rem;\n width: 100%;\n margin: 0;\n font-size: ", "rem;\n outline: none;\n ", ";\n\n ", ";\n "], ["\n border-radius: ", ";\n padding: ", "rem;\n width: 100%;\n margin: 0;\n font-size: ", "rem;\n outline: none;\n ", ";\n\n ", ";\n "])), pill ? '2rem' : '0.25rem', padding, sizes[inputSize], inputVariant, floating && css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n padding-top: ", "rem;\n "], ["\n padding-top: ", "rem;\n "])), padding * 3));
}
var underline = css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n border-radius: 0;\n border-top-color: rgba(0, 0, 0, 0);\n border-left-color: rgba(0, 0, 0, 0);\n border-right-color: rgba(0, 0, 0, 0);\n"], ["\n border-radius: 0;\n border-top-color: rgba(0, 0, 0, 0);\n border-left-color: rgba(0, 0, 0, 0);\n border-right-color: rgba(0, 0, 0, 0);\n"])));
function inputVariant(_a) {
var _b = _a.variant, variant = _b === void 0 ? null : _b;
return (variant === 'underline' && css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n ", ";\n\n &:hover {\n ", ";\n }\n "], ["\n ", ";\n\n &:hover {\n ", ";\n }\n "])), underline, underline));
}
var SquareInput = function (size) { return css(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n width: ", ";\n height: ", ";\n border-width: ", ";\n border-style: solid;\n border-radius: ", ";\n"], ["\n width: ", ";\n height: ", ";\n border-width: ", ";\n border-style: solid;\n border-radius: ", ";\n"])), rem(size), rem(size), rem(1), rem(2)); };
var RoundInput = function (size) { return css(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n ", ";\n border-radius: 50%;\n"], ["\n ", ";\n border-radius: 50%;\n"])), SquareInput(size)); };
var ToggleInput = function (size) { return css(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n ", ";\n width: ", ";\n border-radius: 3rem;\n"], ["\n ", ";\n width: ", ";\n border-radius: 3rem;\n"])), SquareInput(size), rem(size * 2)); };
var FauxInput = css(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n display: block;\n position: absolute;\n z-index: 3;\n top: 0;\n left: 0;\n"], ["\n display: block;\n position: absolute;\n z-index: 3;\n top: 0;\n left: 0;\n"])));
var FauxMark = function (type, mirror) {
return css(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n pointer-events: none;\n ", ";\n\n ", ";\n\n &:after {\n content: '';\n display: block;\n background: ", ";\n opacity: 0;\n transition: 200ms ease-in-out;\n transform: scale(0);\n\n ", ";\n }\n "], ["\n pointer-events: none;\n ", ";\n\n ", ";\n\n &:after {\n content: '';\n display: block;\n background: ", ";\n opacity: 0;\n transition: 200ms ease-in-out;\n transform: scale(0);\n\n ", ";\n }\n "])), fauxPositioning(mirror), type === 'toggle' && css(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n background: ", ";\n "], ["\n background: ", ";\n "])), function (_a) {
var theme = _a.theme;
return theme.name === 'dark'
? theme.content.background
: theme.formats.alternative;
}), blue(500), type === 'toggle' && css(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n background: ", ";\n opacity: 1;\n transition: 120ms ease-in-out;\n transform: scale(1);\n width: 50%;\n "], ["\n background: ", ";\n opacity: 1;\n transition: 120ms ease-in-out;\n transform: scale(1);\n width: 50%;\n "])), white));
};
function fauxPositioning(mirror) {
return css(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n position: absolute;\n top: 50%;\n transform: translateY(-50%);\n ", ";\n "], ["\n position: absolute;\n top: 50%;\n transform: translateY(-50%);\n ", ";\n "])), mirror ? 'right: 0' : 'left: 0');
}
var Hidden = css(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n position: absolute;\n top: 0;\n left: 0;\n width: 0;\n height: 0;\n outline: 0;\n opacity: 0;\n appearance: none;\n"], ["\n position: absolute;\n top: 0;\n left: 0;\n width: 0;\n height: 0;\n outline: 0;\n opacity: 0;\n appearance: none;\n"])));
function formatStyles(_a) {
var theme = _a.theme, _b = _a.format, format = _b === void 0 ? 'basic' : _b;
// const { color } = readTheme({ format, ...props });
var color = theme.formats[format];
return css(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n color: ", ";\n letter-spacing: 0.01rem;\n "], ["\n color: ", ";\n letter-spacing: 0.01rem;\n "])), color);
}
var Label = styled.label(templateObject_20 || (templateObject_20 = __makeTemplateObject(["\n display: inline-flex;\n line-height: 1.25rem;\n font-size: 0.875rem;\n padding: 0.5rem;\n width: 100%;\n\n ", ";\n ", ";\n\n ", ";\n"], ["\n display: inline-flex;\n line-height: 1.25rem;\n font-size: 0.875rem;\n padding: 0.5rem;\n width: 100%;\n\n ", ";\n ", ";\n\n ", ";\n"])), typePadding, formatStyles, function (p) {
return !p.disabled
? css(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n cursor: pointer;\n\n &:hover ~ ", " {\n border: 1px solid\n ", ";\n }\n "], ["\n cursor: pointer;\n\n &:hover ~ ", " {\n border: 1px solid\n ", ";\n }\n "])), p.fauxMark, function (_a) {
var theme = _a.theme;
return rgba(theme.content.color, 0.5);
}) : css(templateObject_19 || (templateObject_19 = __makeTemplateObject(["\n cursor: not-allowed;\n "], ["\n cursor: not-allowed;\n "])));
});
var paddingSizes = {
sm: 12,
md: 14,
lg: 18,
xl: 24,
};
function typePadding(_a) {
var _b = _a.children, children = _b === void 0 ? null : _b, size = _a.size, type = _a.type, _c = _a.mirror, mirror = _c === void 0 ? null : _c;
if (!children)
return;
switch (type) {
case 'toggle':
return mirror
? { paddingRight: paddingSizes[size] * 2 + 20 }
: { paddingLeft: paddingSizes[size] * 2 + 20 };
default:
return mirror
? { paddingRight: paddingSizes[size] * 1.5 + 16 }
: { paddingLeft: paddingSizes[size] * 1.5 + 16 };
}
}
function compareNames(string, comparison) {
return string === null || string === void 0 ? void 0 : string.toLowerCase().includes(comparison);
}
function compareMetas(inputType) {
return function (_a) {
var _b = _a.type, displayName = _b.displayName, $$iris = _b.$$iris;
return compareNames(displayName, inputType) ||
compareNames($$iris === null || $$iris === void 0 ? void 0 : $$iris.component, inputType);
};
}
function validate(children, type) {
var Name = type.charAt(0).toUpperCase() + type.slice(1);
var valid = children.every(compareMetas(type));
if (!valid && isDev) {
console.warn("<".concat(Name, "Set /> children must be <").concat(Name, " />."), children);
}
return valid;
}
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19, templateObject_20;
export { FauxInput, FauxMark, Hidden, Label, RoundInput, SquareInput, ToggleInput, inputColors, inputShape, validate };