@vimeo/iris
Version:
Vimeo Design System
309 lines (302 loc) • 24.6 kB
JavaScript
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var tslib_es6 = require('../../tslib.es6-3ec409b7.js');
var styled = require('styled-components');
var polished = require('polished');
var components_Button_Button_config = require('./Button.config.js');
var components_Button_FeaturedIcon = require('./FeaturedIcon.js');
var themes_index = require('../../themes/index.js');
var color_colors = require('../../color/colors.js');
var tokens_core = require('../../tokens/core.js');
require('../../tokens/color/index.js');
require('../../tokens/color/background/background.js');
require('../../tokens/util/readToken.js');
require('../../tokens/util/clamp.js');
require('../../tokens/color/format/format.js');
require('../../tokens/color/format/primary.js');
require('../../tokens/color/format/secondary.js');
require('../../tokens/color/format/tertiary.js');
require('../../tokens/color/rainbow/rainbow.js');
require('../../tokens/color/rainbow/conic/index.js');
require('../../tokens/color/rainbow/conic/sm.js');
require('../../tokens/color/rainbow/conic/xl.js');
require('../../tokens/color/rainbow/linear/index.js');
require('../../tokens/color/rainbow/linear/sm.js');
require('../../tokens/color/rainbow/linear/xl.js');
require('../../tokens/color/livestream/livestream.js');
require('../../tokens/color/status/status.js');
require('../../tokens/color/status/caution.js');
require('../../tokens/color/status/negative.js');
require('../../tokens/color/status/positive.js');
require('../../tokens/color/stroke/stroke.js');
require('../../tokens/color/surface/surface.js');
require('../../tokens/color/text/text.js');
require('../../tokens/util/round.js');
require('../../tokens/color/upsell/upsell.js');
require('../../tokens/color/upsell/sm.js');
require('../../tokens/color/upsell/xl.js');
require('../../tokens/color/upsell/new.js');
require('../../tokens/edge/edge.js');
require('../../tokens/space/space.js');
require('../../tokens/typography/index.js');
require('../../tokens/typography/size/size.js');
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
var buttonCore = styled.css(templateObject_1 || (templateObject_1 = tslib_es6.__makeTemplateObject(["\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n outline: none;\n border: none;\n text-decoration: none;\n font-weight: 600;\n white-space: nowrap;\n cursor: pointer;\n font-family: inherit;\n font-smoothing: antialiased;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n text-rendering: optimizelegibility;\n\n > span {\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n }\n"], ["\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n outline: none;\n border: none;\n text-decoration: none;\n font-weight: 600;\n white-space: nowrap;\n cursor: pointer;\n font-family: inherit;\n font-smoothing: antialiased;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n text-rendering: optimizelegibility;\n\n > span {\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n }\n"])));
var ButtonChildren = styled__default["default"].span(templateObject_3 || (templateObject_3 = tslib_es6.__makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (p) {
return (p.size === 'xxl' || p.size === 'xl') && styled.css(templateObject_2 || (templateObject_2 = tslib_es6.__makeTemplateObject(["\n transform: translateY(-1px);\n "], ["\n transform: translateY(-1px);\n "])));
});
var ButtonStyled = styled__default["default"].button(templateObject_4 || (templateObject_4 = tslib_es6.__makeTemplateObject(["\n ", ";\n ", ";\n ", ";\n ", ";\n ", ";\n ", ";\n ", ";\n ", ";\n ", ";\n ", ";\n ", ";\n ", ";\n ", ";\n ", ";\n"], ["\n ", ";\n ", ";\n ", ";\n ", ";\n ", ";\n ", ";\n ", ";\n ", ";\n ", ";\n ", ";\n ", ";\n ", ";\n ", ";\n ", ";\n"])), buttonCore, buttonIcon, buttonSizes, buttonFluid, buttonPadding, buttonShape, buttonElevation, buttonMotion, buttonLoading, buttonVariants, buttonDisabled, buttonTextShift, buttonChecked, buttonUpsell);
var sizePads = {
xxs: 0.125,
xs: 0.25,
sm: 0.5,
md: 0.75,
lg: 1,
xl: 1.25,
xxl: 1.5,
};
function buttonIcon(_a) {
var size = _a.size, iconOnly = _a.iconOnly, iconPosition = _a.iconPosition;
var pad = sizePads[size];
var iconMargin = {
left: "auto ".concat((pad + 0.75) / 2, "rem auto 0"),
right: "auto 0 auto ".concat((pad + 0.75) / 2, "rem"),
featured: "auto 0.75rem",
};
return iconOnly
? styled.css(templateObject_5 || (templateObject_5 = tslib_es6.__makeTemplateObject(["\n svg {\n width: ", "rem;\n height: ", "rem;\n display: inline-flex;\n overflow: visible;\n\n > * {\n fill: currentColor;\n }\n }\n "], ["\n svg {\n width: ", "rem;\n height: ", "rem;\n display: inline-flex;\n overflow: visible;\n\n > * {\n fill: currentColor;\n }\n }\n "])), pad / 1.25 + 0.75, pad / 1.25 + 0.75) : styled.css(templateObject_6 || (templateObject_6 = tslib_es6.__makeTemplateObject(["\n position: relative;\n\n svg {\n width: ", "rem;\n min-width: ", "rem;\n height: 100%;\n min-height: 100%;\n display: inline-flex;\n margin: ", ";\n position: ", ";\n right: ", ";\n overflow: visible;\n\n > * {\n fill: currentColor;\n }\n }\n "], ["\n position: relative;\n\n svg {\n width: ", "rem;\n min-width: ", "rem;\n height: 100%;\n min-height: 100%;\n display: inline-flex;\n margin: ", ";\n position: ", ";\n right: ", ";\n overflow: visible;\n\n > * {\n fill: currentColor;\n }\n }\n "])), pad / 1.25 + 0.75, pad / 1.25 + 0.75, iconMargin[iconPosition], iconPosition === 'action' && 'absolute', iconPosition === 'action' && '0.5rem');
}
function buttonLoading(_a) {
var $loading = _a.$loading;
return ($loading && styled.css(templateObject_7 || (templateObject_7 = tslib_es6.__makeTemplateObject(["\n cursor: wait !important;\n\n svg,\n ", ", ", " {\n opacity: 0;\n }\n "], ["\n cursor: wait !important;\n\n svg,\n ", ", ", " {\n opacity: 0;\n }\n "])), components_Button_FeaturedIcon.FeaturedIcon, ButtonChildren));
}
function buttonMotion(_a) {
var theme = _a.theme;
return {
transition: theme.a11y.motion
? 'none'
: 'all 170ms ease-in-out, font-size 50ms ease-in-out, width 0ms linear, padding 130ms ease-in-out',
};
}
function buttonPadding(_a) {
var icon = _a.icon, iconOnly = _a.iconOnly, iconPosition = _a.iconPosition, size = _a.size;
return (!iconOnly && iconButtonPadding(icon, iconPosition, sizePads[size]));
}
function iconButtonPadding(icon, iconPosition, pad) {
var minHeight = polished.rem(3);
var minWidth = "".concat(pad * 4 + 2, "rem");
switch (icon && iconPosition) {
case 'left':
return {
padding: '0 ' + pad + 'rem',
minHeight: minHeight,
minWidth: minWidth,
};
case 'right':
return {
padding: '0 ' + pad + 'rem',
minHeight: minHeight,
minWidth: minWidth,
};
case 'featured':
return {
padding: "0 ".concat(pad, "rem 0 ").concat(pad + 2.5, "rem"),
minHeight: minHeight,
minWidth: "".concat(pad * 12, "rem"),
};
case 'action':
return { padding: '0 2.5rem 0 0.5rem', minHeight: minHeight, minWidth: minWidth };
default:
return { padding: "0 ".concat(pad, "rem"), minHeight: minHeight, minWidth: minWidth };
}
}
function buttonElevation(_a) {
var _b = _a.floating, floating = _b === void 0 ? null : _b;
return (floating && styled.css(templateObject_8 || (templateObject_8 = tslib_es6.__makeTemplateObject(["\n box-shadow: 0 ", " ", " 0 ", ";\n\n &:active {\n transform: translateY(0) scale(0.98);\n }\n\n &:hover:not(:active) {\n transform: translateY(-1px) scale(1.01);\n box-shadow: 0 ", " ", " 0 ", ";\n }\n "], ["\n box-shadow: 0 ", " ", " 0 ", ";\n\n &:active {\n transform: translateY(0) scale(0.98);\n }\n\n &:hover:not(:active) {\n transform: translateY(-1px) scale(1.01);\n box-shadow: 0 ", " ", " 0 ", ";\n }\n "])), polished.rem(3), polished.rem(6), polished.rgba(color_colors.black, 0.125), polished.rem(5), polished.rem(7), polished.rgba(color_colors.black, 0.175)));
}
// 1. Deprecate pill Buttons (discuss with Design)
// 2. Consolidate buttonShape and buttonSize
function buttonShape(_a) {
var size = _a.size, pill = _a.pill, circular = _a.circular;
// DEPRECATED: Remove in Iris 9.0
if (circular)
pill = true;
var borderRadius = pill ? '2rem' : polished.rem(components_Button_Button_config.borderRadii[size]);
return { borderRadius: borderRadius };
}
function deriveButtonColor(customColor, format, theme) {
var color;
var hoverColor;
var activeColor;
var textColor;
if (customColor) {
if (typeof customColor === 'string') {
color = customColor;
hoverColor = polished.tint(0.15, color);
activeColor = polished.shade(0.15, color);
textColor = polished.readableColor(color);
}
else if (customColor.color) {
color = customColor.color;
hoverColor = customColor.hover
? customColor.hover
: polished.tint(0.15, color);
activeColor = customColor.active
? customColor.active
: polished.shade(0.15, color);
textColor = customColor.textColor
? customColor.textColor
: polished.readableColor(customColor.color);
}
}
else {
color = theme.formats[format];
hoverColor = polished.tint(0.15, color);
activeColor = polished.shade(0.15, color);
textColor = null;
}
return { color: color, hoverColor: hoverColor, activeColor: activeColor, textColor: textColor };
}
// const buttonVariants = memoize(buttonVariantsFn);
// function buttonVariantsFn({ format, variant, theme }) {
function buttonVariants(_a) {
var active = _a.active, customColor = _a.color, format = _a.format, theme = _a.theme, variant = _a.variant;
// Temporary until CSSVar design tokens are released and Button
// style logic is rewritten.
if (format.includes('upsell'))
return;
var _b = deriveButtonColor(customColor, format, theme), color = _b.color, hoverColor = _b.hoverColor, activeColor = _b.activeColor, textColor = _b.textColor;
var borderWidth = '1px';
var borderColor = color;
var contrastText = textColor || themes_index.a11yColor(color);
var contrastTextHover = customColor
? polished.readableColor(hoverColor)
: themes_index.a11yColor(hoverColor);
var contrastTextActive = customColor
? polished.readableColor(activeColor)
: themes_index.a11yColor(activeColor);
switch (variant) {
case 'outline':
return styled.css(templateObject_9 || (templateObject_9 = tslib_es6.__makeTemplateObject(["\n border: ", " solid ", ";\n background: transparent;\n color: ", ";\n\n &:hover {\n color: ", ";\n background: ", ";\n }\n "], ["\n border: ", " solid ", ";\n background: transparent;\n color: ", ";\n\n &:hover {\n color: ", ";\n background: ", ";\n }\n "])), borderWidth, borderColor, color, theme.name === 'light'
? polished.shade(0.1, color)
: polished.tint(0.5, color), theme.name === 'light'
? polished.rgba(activeColor, 0.2)
: polished.rgba(polished.tint(0.3, activeColor), 0.3));
case 'dashed':
return styled.css(templateObject_10 || (templateObject_10 = tslib_es6.__makeTemplateObject(["\n border: ", " dashed ", ";\n background: transparent;\n color: ", ";\n\n &:hover {\n color: ", ";\n background: ", ";\n }\n "], ["\n border: ", " dashed ", ";\n background: transparent;\n color: ", ";\n\n &:hover {\n color: ", ";\n background: ", ";\n }\n "])), borderWidth, borderColor, color, polished.shade(0.2, color), polished.rgba(activeColor, 0.2));
case 'minimal':
var minimalActiveCSS = styled.css(templateObject_11 || (templateObject_11 = tslib_es6.__makeTemplateObject(["\n background: ", ";\n color: ", ";\n "], ["\n background: ", ";\n color: ", ";\n "])), activeColor, contrastTextActive);
return styled.css(templateObject_12 || (templateObject_12 = tslib_es6.__makeTemplateObject(["\n border: ", " solid transparent;\n background: transparent;\n color: ", ";\n\n &:hover {\n color: ", ";\n background: ", ";\n }\n\n ", "\n\n ", "\n "], ["\n border: ", " solid transparent;\n background: transparent;\n color: ", ";\n\n &:hover {\n color: ", ";\n background: ", ";\n }\n\n ", "\n\n ", "\n "])), borderWidth, color, contrastTextHover, color, "&:active { ".concat(minimalActiveCSS, " }"), active && minimalActiveCSS);
case 'hyperminimal':
return styled.css(templateObject_13 || (templateObject_13 = tslib_es6.__makeTemplateObject(["\n border: ", " solid transparent;\n background: transparent;\n color: ", ";\n\n &:hover {\n border: ", " solid transparent;\n /* color: hoverColorDark */\n color: ", ";\n }\n "], ["\n border: ", " solid transparent;\n background: transparent;\n color: ", ";\n\n &:hover {\n border: ", " solid transparent;\n /* color: hoverColorDark */\n color: ", ";\n }\n "])), borderWidth, color, borderWidth, hoverColor);
case 'minimalTransparent':
var minimalTransparentActiveCSS = styled.css(templateObject_14 || (templateObject_14 = tslib_es6.__makeTemplateObject(["\n border: ", " solid transparent;\n background: ", ";\n "], ["\n border: ", " solid transparent;\n background: ", ";\n "])), borderWidth, polished.rgba(color, 0.1));
return styled.css(templateObject_15 || (templateObject_15 = tslib_es6.__makeTemplateObject(["\n border: ", " solid transparent;\n background: transparent;\n color: ", ";\n\n &:hover {\n border: ", " solid transparent;\n background: ", ";\n color: ", ";\n }\n\n ", "\n\n ", "\n "], ["\n border: ", " solid transparent;\n background: transparent;\n color: ", ";\n\n &:hover {\n border: ", " solid transparent;\n background: ", ";\n color: ", ";\n }\n\n ", "\n\n ", "\n "])), borderWidth, color, borderWidth, polished.rgba(color, 0.1), hoverColor, "&:active { ".concat(minimalTransparentActiveCSS, " }"), active && minimalTransparentActiveCSS);
case 'transparent':
var transparentActiveCSS = styled.css(templateObject_16 || (templateObject_16 = tslib_es6.__makeTemplateObject(["\n background: ", ";\n "], ["\n background: ", ";\n "])), polished.rgba(polished.shade(0.2, activeColor), 0.75));
return styled.css(templateObject_18 || (templateObject_18 = tslib_es6.__makeTemplateObject(["\n background: ", ";\n color: ", ";\n\n &:active {\n background: ", ";\n }\n\n ", "\n\n ", "\n\n &:hover:not(:active) {\n background: ", ";\n /* if: grow */\n /* transform: scale(1.01); */\n /* box-shadow: 0 0 0 0 rgba(black, 0.1); */\n }\n "], ["\n background: ", ";\n color: ", ";\n\n &:active {\n background: ", ";\n }\n\n ", "\n\n ", "\n\n &:hover:not(:active) {\n background: ", ";\n /* if: grow */\n /* transform: scale(1.01); */\n /* box-shadow: 0 0 0 0 rgba(black, 0.1); */\n }\n "])), polished.rgba(color, 0.6), color_colors.white, polished.rgba(polished.shade(0.2, activeColor), 0.75), "&:active { ".concat(transparentActiveCSS, " ").concat(styled.css(templateObject_17 || (templateObject_17 = tslib_es6.__makeTemplateObject(["\n transform: scale(0.98);\n "], ["\n transform: scale(0.98);\n "]))), " }"), active && transparentActiveCSS, polished.rgba(color, 0.675));
default:
var defaultActiveCSS = styled.css(templateObject_19 || (templateObject_19 = tslib_es6.__makeTemplateObject(["\n background: ", ";\n color: ", ";\n "], ["\n background: ", ";\n color: ", ";\n "])), activeColor, contrastTextActive);
return styled.css(templateObject_21 || (templateObject_21 = tslib_es6.__makeTemplateObject(["\n border: ", " solid ", ";\n background: ", ";\n color: ", ";\n\n ", "\n\n ", "\n\n &:hover:not(:active) {\n background: ", ";\n color: ", ";\n }\n "], ["\n border: ", " solid ", ";\n background: ", ";\n color: ", ";\n\n ", "\n\n ", "\n\n &:hover:not(:active) {\n background: ", ";\n color: ", ";\n }\n "])), color, color, color, contrastText, "&:active { ".concat(defaultActiveCSS, " ").concat(styled.css(templateObject_20 || (templateObject_20 = tslib_es6.__makeTemplateObject(["\n transform: scale(0.98);\n "], ["\n transform: scale(0.98);\n "]))), "}"), active && defaultActiveCSS, hoverColor, contrastTextHover);
}
}
var mediaQuery = function (_a) {
var _b = _a.min, min = _b === void 0 ? 0 : _b, max = _a.max, _c = _a.type, type = _c === void 0 ? 'only screen' : _c;
return !max || min === max
? "@media ".concat(type, " and (min-width: ").concat(polished.em(min), ")")
: "@media ".concat(type, " and (min-width: ").concat(polished.em(min), ") and (max-width: ").concat(polished.em(max), ")");
};
var fluidWidth = function (_a) {
var _b = _a.min, min = _b === void 0 ? 0 : _b, max = _a.max;
return styled.css(templateObject_22 || (templateObject_22 = tslib_es6.__makeTemplateObject(["\n ", " {\n width: 100%;\n }\n"], ["\n ", " {\n width: 100%;\n }\n"])), mediaQuery({ min: min, max: max }));
};
var fluidity = function (fluid) {
return fluid === true ? fluidWidth({}) : fluidWidth(fluid);
};
function buttonFluid(_a) {
var fluid = _a.fluid;
return fluid && fluidity(fluid);
}
function buttonSizes(_a) {
var size = _a.size;
switch (size) {
case 'xxl':
return {
fontSize: polished.rem(20),
lineHeight: polished.rem(72 - 2),
height: polished.rem(72),
minWidth: polished.rem(72),
};
case 'xl':
return {
fontSize: polished.rem(18),
lineHeight: polished.rem(56 - 2),
height: polished.rem(56),
minWidth: polished.rem(56),
};
case 'lg':
return {
fontSize: polished.rem(16),
lineHeight: polished.rem(48 - 2),
height: polished.rem(48),
minWidth: polished.rem(48),
};
case 'md':
return {
fontSize: polished.rem(14),
lineHeight: polished.rem(40 - 2),
height: polished.rem(40),
minWidth: polished.rem(40),
};
case 'sm':
return {
fontSize: polished.rem(14),
lineHeight: polished.rem(32 - 2),
height: polished.rem(32),
minWidth: polished.rem(32),
};
case 'xs':
return {
fontSize: polished.rem(12),
lineHeight: polished.rem(24 - 2),
height: polished.rem(24),
minWidth: polished.rem(24),
};
case 'xxs':
return {
fontSize: polished.rem(10),
lineHeight: polished.rem(20 - 2),
height: polished.rem(20),
minWidth: polished.rem(20),
};
}
}
function buttonDisabled(_a) {
var disabled = _a.disabled;
return styled.css(templateObject_23 || (templateObject_23 = tslib_es6.__makeTemplateObject(["\n &:disabled {\n ", "\n }\n ", "\n "], ["\n &:disabled {\n ", "\n }\n ", "\n "])), disabledCSS, disabled && disabledCSS);
}
var disabledCSS = styled.css(templateObject_24 || (templateObject_24 = tslib_es6.__makeTemplateObject(["\n opacity: 0.5;\n pointer-events: none;\n user-select: none;\n"], ["\n opacity: 0.5;\n pointer-events: none;\n user-select: none;\n"])));
function buttonChecked(_a) {
var checked = _a.checked;
return (checked && styled.css(templateObject_25 || (templateObject_25 = tslib_es6.__makeTemplateObject(["\n border: 2px solid ", ";\n\n &:hover:not(:active) {\n border: 2px solid ", ";\n }\n "], ["\n border: 2px solid ", ";\n\n &:hover:not(:active) {\n border: 2px solid ", ";\n }\n "])), color_colors.blue(500), color_colors.blue(500)));
}
function buttonTextShift(_a) {
var variant = _a.variant, textShift = _a.textShift, iconPosition = _a.iconPosition;
if (!variant.includes('minimal'))
return;
var side = iconPosition === 'right' ? 'left' : 'right';
var paddingSide = 'padding-' + side;
return (textShift && styled.css(templateObject_26 || (templateObject_26 = tslib_es6.__makeTemplateObject(["\n &:not(:hover):not(:focus):not(:focus-within) {\n ", ": 0;\n }\n "], ["\n &:not(:hover):not(:focus):not(:focus-within) {\n ", ": 0;\n }\n "])), paddingSide));
}
// Temporary until CSSVar design tokens are released and Button
// style logic is rewritten.
function buttonUpsell(_a) {
var format = _a.format;
if (!format.includes('upsell'))
return;
return styled.css(templateObject_27 || (templateObject_27 = tslib_es6.__makeTemplateObject(["\n border: 1px solid transparent;\n background: ", ";\n color: #fff;\n\n &:active {\n background: ", ";\n transform: scale(0.98);\n color: ", ";\n }\n\n &:hover:not(:active) {\n background: ", ";\n border: 1px solid transparent;\n color: ", ";\n }\n "], ["\n border: 1px solid transparent;\n background: ", ";\n color: #fff;\n\n &:active {\n background: ", ";\n transform: scale(0.98);\n color: ", ";\n }\n\n &:hover:not(:active) {\n background: ", ";\n border: 1px solid transparent;\n color: ", ";\n }\n "])), tokens_core.core.color.upsell.New, color_colors.violet(600), color_colors.violet(0), color_colors.violet(500), color_colors.violet(0));
}
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, templateObject_21, templateObject_22, templateObject_23, templateObject_24, templateObject_25, templateObject_26, templateObject_27;
exports.ButtonChildren = ButtonChildren;
exports.ButtonStyled = ButtonStyled;