@vimeo/iris
Version:
Vimeo Design System
132 lines (125 loc) • 15.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 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 Wrapper = styled__default["default"].div(templateObject_1 || (templateObject_1 = tslib_es6.__makeTemplateObject(["\n position: relative;\n"], ["\n position: relative;\n"])));
var Badge = styled__default["default"].span(templateObject_2 || (templateObject_2 = tslib_es6.__makeTemplateObject(["\n display: block;\n outline: none;\n border-radius: ", ";\n letter-spacing: 0.02rem;\n color: inherit;\n text-shadow: none;\n text-align: center;\n text-transform: uppercase;\n text-decoration: none;\n white-space: nowrap;\n transition: 90ms ease-in-out;\n\n ", ";\n ", ";\n\n &::-moz-focus-inner {\n padding: 0;\n border: 0;\n }\n"], ["\n display: block;\n outline: none;\n border-radius: ", ";\n letter-spacing: 0.02rem;\n color: inherit;\n text-shadow: none;\n text-align: center;\n text-transform: uppercase;\n text-decoration: none;\n white-space: nowrap;\n transition: 90ms ease-in-out;\n\n ", ";\n ", ";\n\n &::-moz-focus-inner {\n padding: 0;\n border: 0;\n }\n"])), polished.rem(2), format, size);
function size(_a) {
var size = _a.size;
switch (size) {
case 'sm':
return styled.css(templateObject_3 || (templateObject_3 = tslib_es6.__makeTemplateObject(["\n padding: 0.1875rem 0.25rem;\n font-size: 0.5625rem;\n font-weight: 500;\n line-height: 1.2;\n "], ["\n padding: 0.1875rem 0.25rem;\n font-size: 0.5625rem;\n font-weight: 500;\n line-height: 1.2;\n "])));
case 'lg':
return styled.css(templateObject_4 || (templateObject_4 = tslib_es6.__makeTemplateObject(["\n padding: 0.3125rem;\n font-size: 1rem;\n font-weight: 500;\n line-height: 0.8;\n "], ["\n padding: 0.3125rem;\n font-size: 1rem;\n font-weight: 500;\n line-height: 0.8;\n "])));
case 'xl':
return styled.css(templateObject_5 || (templateObject_5 = tslib_es6.__makeTemplateObject(["\n border-width: 2px;\n border-radius: 0.25rem;\n padding: 0.5rem 0.75rem;\n font-weight: 600;\n line-height: 0.8;\n font-size: 1.125rem;\n "], ["\n border-width: 2px;\n border-radius: 0.25rem;\n padding: 0.5rem 0.75rem;\n font-weight: 600;\n line-height: 0.8;\n font-size: 1.125rem;\n "])));
}
}
function format(_a) {
var $format = _a.$format, _b = _a.href, href = _b === void 0 ? null : _b;
switch ($format) {
case 'alum':
return styled.css(templateObject_6 || (templateObject_6 = tslib_es6.__makeTemplateObject(["\n color: #503873;\n background-color: ", ";\n\n &:hover {\n background-color: ", ";\n }\n "], ["\n color: #503873;\n background-color: ", ";\n\n &:hover {\n background-color: ", ";\n }\n "])), polished.rgba('#503873', 0.25), polished.rgba('#503873', 0.3));
case 'beta':
return styled.css(templateObject_7 || (templateObject_7 = tslib_es6.__makeTemplateObject(["\n color: #ff8a00;\n "], ["\n color: #ff8a00;\n "])));
case 'business':
return basicBadge(color_colors.green(500));
case 'curation':
return styled.css(templateObject_8 || (templateObject_8 = tslib_es6.__makeTemplateObject(["\n color: #ff8a00;\n background-color: ", ";\n\n &:hover {\n color: ", ";\n background-color: ", ";\n }\n "], ["\n color: #ff8a00;\n background-color: ", ";\n\n &:hover {\n color: ", ";\n background-color: ", ";\n }\n "])), polished.rgba('#FFB21E', 0.15), polished.darken(0.1, '#FF8A00'), polished.rgba('#FFB21E', 0.25));
case 'staff':
return styled.css(templateObject_9 || (templateObject_9 = tslib_es6.__makeTemplateObject(["\n color: #ff8a00;\n background-color: ", ";\n\n &:hover {\n color: ", ";\n background-color: ", ";\n }\n "], ["\n color: #ff8a00;\n background-color: ", ";\n\n &:hover {\n color: ", ";\n background-color: ", ";\n }\n "])), polished.rgba('#FFB21E', 0.15), polished.darken(0.1, '#FF8A00'), polished.rgba('#FFB21E', 0.25));
case 'support':
return styled.css(templateObject_10 || (templateObject_10 = tslib_es6.__makeTemplateObject(["\n color: #ff8a00;\n background-color: ", ";\n\n &:hover {\n color: ", ";\n background-color: ", ";\n }\n "], ["\n color: #ff8a00;\n background-color: ", ";\n\n &:hover {\n color: ", ";\n background-color: ", ";\n }\n "])), polished.rgba('#FFB21E', 0.15), polished.darken(0.1, '#FF8A00'), polished.rgba('#FFB21E', 0.25));
case 'explicit':
return styled.css(templateObject_12 || (templateObject_12 = tslib_es6.__makeTemplateObject(["\n color: ", ";\n border: 1px solid ", ";\n background-color: transparent;\n\n ", "\n "], ["\n color: ", ";\n border: 1px solid ", ";\n background-color: transparent;\n\n ", "\n "])), color_colors.red(600), color_colors.red(600), href && styled.css(templateObject_11 || (templateObject_11 = tslib_es6.__makeTemplateObject(["\n &:focus,\n &:active,\n &:hover {\n color: ", ";\n background-color: ", ";\n }\n "], ["\n &:focus,\n &:active,\n &:hover {\n color: ", ";\n background-color: ", ";\n }\n "])), color_colors.red(600), color_colors.red(50)));
case 'featured':
return styled.css(templateObject_13 || (templateObject_13 = tslib_es6.__makeTemplateObject(["\n color: #ff9d9d;\n "], ["\n color: #ff9d9d;\n "])));
case 'hd':
return styled.css(templateObject_14 || (templateObject_14 = tslib_es6.__makeTemplateObject(["\n font-style: italic;\n color: #cceffc;\n "], ["\n font-style: italic;\n color: #cceffc;\n "])));
case 'help':
return styled.css(templateObject_15 || (templateObject_15 = tslib_es6.__makeTemplateObject(["\n cursor: help;\n\n &:hover,\n &:focus {\n color: ", ";\n background-color: #3a5161;\n }\n "], ["\n cursor: help;\n\n &:hover,\n &:focus {\n color: ", ";\n background-color: #3a5161;\n }\n "])), color_colors.white);
case 'info':
return styled.css(templateObject_16 || (templateObject_16 = tslib_es6.__makeTemplateObject(["\n color: #d0d8db;\n cursor: help;\n\n &:hover,\n &:focus {\n color: ", " !important;\n background: ", ";\n }\n "], ["\n color: #d0d8db;\n cursor: help;\n\n &:hover,\n &:focus {\n color: ", " !important;\n background: ", ";\n }\n "])), color_colors.white, color_colors.slate(500));
case 'live':
return styled.css(templateObject_17 || (templateObject_17 = tslib_es6.__makeTemplateObject(["\n color: ", ";\n background: #ff4d4d;\n\n &:hover {\n color: ", ";\n background: ", ";\n }\n "], ["\n color: ", ";\n background: #ff4d4d;\n\n &:hover {\n color: ", ";\n background: ", ";\n }\n "])), color_colors.white, color_colors.white, color_colors.red(600));
case 'live-archive':
return styled.css(templateObject_18 || (templateObject_18 = tslib_es6.__makeTemplateObject(["\n color: #8699a6;\n border: 1px solid #8699a6;\n\n &:hover {\n color: ", ";\n border-color: ", ";\n }\n "], ["\n color: #8699a6;\n border: 1px solid #8699a6;\n\n &:hover {\n color: ", ";\n border-color: ", ";\n }\n "])), color_colors.slate(800), color_colors.slate(800));
case 'mature': {
var color = tokens_core.core.color.status.negative;
return styled.css(templateObject_19 || (templateObject_19 = tslib_es6.__makeTemplateObject(["\n color: ", ";\n border: 1px solid ", ";\n "], ["\n color: ", ";\n border: 1px solid ", ";\n "])), color, color);
}
case 'new':
return styled.css(templateObject_20 || (templateObject_20 = tslib_es6.__makeTemplateObject(["\n color: ", ";\n vertical-align: top;\n "], ["\n color: ", ";\n vertical-align: top;\n "])), color_colors.red(500));
case 'not-yet-rated': {
var color = tokens_core.core.color.text(900);
return styled.css(templateObject_21 || (templateObject_21 = tslib_es6.__makeTemplateObject(["\n color: ", ";\n border: 1px solid ", ";\n "], ["\n color: ", ";\n border: 1px solid ", ";\n "])), color, color);
}
case 'restricted': {
return styled.css(templateObject_22 || (templateObject_22 = tslib_es6.__makeTemplateObject(["\n color: ", ";\n background-color: ", ";\n opacity: 0.7;\n "], ["\n color: ", ";\n background-color: ", ";\n opacity: 0.7;\n "])), color_colors.white, color_colors.red(500));
}
case 'sponsor':
return basicBadge(color_colors.green(500));
case 'partner':
return styled.css(templateObject_23 || (templateObject_23 = tslib_es6.__makeTemplateObject(["\n ", ";\n color: #a2afb8;\n background-color: ", ";\n "], ["\n ", ";\n color: #a2afb8;\n background-color: ", ";\n "])), basicBadge(color_colors.slate(800)), color_colors.slate(100));
case 'pro':
return basicBadge(color_colors.slate(800));
case 'plus':
return styled.css(templateObject_24 || (templateObject_24 = tslib_es6.__makeTemplateObject(["\n ", ";\n border: none;\n "], ["\n ", ";\n border: none;\n "])), basicBadge(color_colors.blue(500)));
case 'producer':
return styled.css(templateObject_25 || (templateObject_25 = tslib_es6.__makeTemplateObject(["\n ", ";\n border: none;\n "], ["\n ", ";\n border: none;\n "])), basicBadge('#503873'));
case 'spatial':
return styled.css(templateObject_26 || (templateObject_26 = tslib_es6.__makeTemplateObject(["\n color: ", ";\n border: 1px solid #d0d8db;\n background-color: transparent;\n\n &:focus,\n &:active,\n &:hover {\n background-color: ", ";\n }\n "], ["\n color: ", ";\n border: 1px solid #d0d8db;\n background-color: transparent;\n\n &:focus,\n &:active,\n &:hover {\n background-color: ", ";\n }\n "])), color_colors.slate(500), color_colors.grayscale(100));
case 'upgrade':
return styled.css(templateObject_27 || (templateObject_27 = tslib_es6.__makeTemplateObject(["\n color: ", ";\n background-color: ", ";\n\n &:hover {\n color: ", ";\n background-color: ", ";\n }\n "], ["\n color: ", ";\n background-color: ", ";\n\n &:hover {\n color: ", ";\n background-color: ", ";\n }\n "])), color_colors.white, color_colors.blue(500), color_colors.white, color_colors.blue(600));
case 'vod':
return styled.css(templateObject_28 || (templateObject_28 = tslib_es6.__makeTemplateObject(["\n color: rgba(247, 180, 44, 0.2);\n background: transparent;\n border: 1px dotted rgba(247, 180, 44, 0.5);\n "], ["\n color: rgba(247, 180, 44, 0.2);\n background: transparent;\n border: 1px dotted rgba(247, 180, 44, 0.5);\n "])));
default:
return '';
}
}
function basicBadge(color, hover) {
if (hover === void 0) { hover = true; }
return styled.css(templateObject_30 || (templateObject_30 = tslib_es6.__makeTemplateObject(["\n color: ", ";\n background-color: ", ";\n\n ", ";\n "], ["\n color: ", ";\n background-color: ", ";\n\n ", ";\n "])), color, polished.rgba(color, 0.15), hover && styled.css(templateObject_29 || (templateObject_29 = tslib_es6.__makeTemplateObject(["\n &:hover {\n color: ", ";\n background-color: ", ";\n }\n "], ["\n &:hover {\n color: ", ";\n background-color: ", ";\n }\n "])), polished.darken(0.1, color), polished.rgba(color, 0.2)));
}
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, templateObject_28, templateObject_29, templateObject_30;
exports.Badge = Badge;
exports.Wrapper = Wrapper;
exports.format = format;
exports.size = size;