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

Vimeo Design System

import { a as __makeTemplateObject, _ as __read, e as __spreadArray } from '../../tslib.es6-7f0e734f.js';
import styled, { css, keyframes } from 'styled-components';
import { saturate } from 'polished';
import { green, blue } from '../../color/colors.esm.js';

var Ribbon = styled.div(templateObject_1 || (templateObject_1 = __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([blue(300), saturate(1, blue(650))]);
        }
        case 'success': {
            return gradient([green(300), saturate(1, 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 = __read(colorsArray), first = _c[0], rest = _c.slice(1);
            colors = __spreadArray(__spreadArray([first], __read(rest), false), [first], false).join(',');
        }
        else {
            colors = colorsArray.join(',');
        }
        return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      background-image: linear-gradient(", ", ", ");\n    "], ["\n      background-image: linear-gradient(", ", ", ");\n    "])), direction, colors);
    };
}
var scroll = keyframes(templateObject_3 || (templateObject_3 = __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 && css(templateObject_4 || (templateObject_4 = __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;

export { Ribbon };