@vimeo/iris/components/Ribbon/Ribbon.style.js

Vimeo Design System

'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');

function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);

var Ribbon = styled__default["default"].div(templateObject_1 || (templateObject_1 = tslib_es6.__makeTemplateObject(["\n  width: 100%;\n  ", ";\n  ", ";\n  ", ";\n"], ["\n  width: 100%;\n  ", ";\n  ", ";\n  ", ";\n"])), background, height, animate);
function background(_a) {
    var _b = _a.variant, variant = _b === void 0 ? 'rainbow' : _b;
    switch (variant) {
        case 'mod':
            return gradient(['#dce35b', '#45b649'], '270deg');
        case 'possessed':
            return gradient(['#7b4397', '#dc2430']);
        case 'rainbow':
            return gradient([
                '#45c3ff',
                '#0088cc',
                '#7fc400',
                '#ffc86c',
                '#ffb21e',
                '#ff4d4d',
                '#6447b6',
            ]);
        case 'primary': {
            return gradient([color_colors.blue(300), polished.saturate(1, color_colors.blue(650))]);
        }
        case 'success': {
            return gradient([color_colors.green(300), polished.saturate(1, color_colors.green(700))]);
        }
    }
}
function gradient(colorsArray, direction) {
    if (direction === void 0) { direction = 'to right'; }
    return function (_a) {
        var _b = _a.animate, animate = _b === void 0 ? true : _b;
        var colors;
        if (animate) {
            var _c = tslib_es6.__read(colorsArray), first = _c[0], rest = _c.slice(1);
            colors = tslib_es6.__spreadArray(tslib_es6.__spreadArray([first], tslib_es6.__read(rest), false), [first], false).join(',');
        }
        else {
            colors = colorsArray.join(',');
        }
        return styled.css(templateObject_2 || (templateObject_2 = tslib_es6.__makeTemplateObject(["\n      background-image: linear-gradient(", ", ", ");\n    "], ["\n      background-image: linear-gradient(", ", ", ");\n    "])), direction, colors);
    };
}
var scroll = styled.keyframes(templateObject_3 || (templateObject_3 = tslib_es6.__makeTemplateObject(["\n  0% { background-position: 0% 50%; }\n  100% { background-position: 200% 50%; }\n"], ["\n  0% { background-position: 0% 50%; }\n  100% { background-position: 200% 50%; }\n"])));
function animate(_a) {
    var _b = _a.animate, animate = _b === void 0 ? true : _b;
    return (animate && styled.css(templateObject_4 || (templateObject_4 = tslib_es6.__makeTemplateObject(["\n      animation: ", " 5s linear infinite;\n      background-size: 200% !important;\n    "], ["\n      animation: ", " 5s linear infinite;\n      background-size: 200% !important;\n    "])), scroll));
}
function height(_a) {
    var _b = _a.size, size = _b === void 0 ? 'md' : _b;
    switch (size) {
        case 'xs':
            return { height: '0.375rem' };
        case 'sm':
            return { height: '0.5rem' };
        case 'md':
            return { height: '0.75rem' };
        case 'lg':
            return { height: '1rem' };
        case 'xl':
            return { height: '1.5rem' };
    }
}
var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

exports.Ribbon = Ribbon;