@vimeo/iris/tokens/edge/edge.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 tokens_util_readToken = require('../util/readToken.js');
var color_colors = require('../../color/colors.js');

var edge = function (grade) { return tokens_util_readToken.readToken(token, grade); };
var token = {
    default: 'light',
    type: 'COLOR',
    modes: { dark: dark, light: light },
};
function dark(grade) {
    var opacity = 0.15 + grade / 7500;
    var width = 0.75 + grade / 1000;
    return styled.css(templateObject_1 || (templateObject_1 = tslib_es6.__makeTemplateObject(["\n    border: ", "px solid rgba(255, 255, 255, ", ");\n    box-shadow: ", ", ", ";\n  "], ["\n    border: ", "px solid rgba(255, 255, 255, ", ");\n    box-shadow: ", ", ", ";\n  "])), width, opacity, keyLight(grade), fillLight(grade));
}
function light(grade) {
    var width = 1 + grade / 2000;
    return styled.css(templateObject_2 || (templateObject_2 = tslib_es6.__makeTemplateObject(["\n    border: ", "px solid ", ";\n    box-shadow: ", ", ", ";\n  "], ["\n    border: ", "px solid ", ";\n    box-shadow: ", ", ", ";\n  "])), width, polished.rgba(color_colors.black, 0.025), keyLight(grade), fillLight(grade));
}
function fillLight(grade) {
    return shadow({
        blur: 10 + grade / 500,
        spread: 0.5 + grade / 2000,
        opacity: grade / 100000 + grade / 7500,
    });
}
function keyLight(grade) {
    return shadow({
        offsetY: 10,
        blur: 6 + grade / 500,
        spread: -5 + grade / 2000,
        opacity: grade / 20000 + grade / 9000,
    });
}
function shadow(_a) {
    var _b = _a.offsetX, offsetX = _b === void 0 ? 0 : _b, _c = _a.offsetY, offsetY = _c === void 0 ? 0 : _c, _d = _a.blur, blur = _d === void 0 ? 3 : _d, _e = _a.spread, spread = _e === void 0 ? 1 : _e, _f = _a.color, color = _f === void 0 ? color_colors.black : _f, _g = _a.opacity, opacity = _g === void 0 ? 0.2 : _g;
    return "\n  ".concat(offsetX, "px\n  ").concat(offsetY, "px\n  ").concat(blur, "px\n  ").concat(spread, "px\n  ").concat(polished.rgba(color, opacity), "\n");
}
var templateObject_1, templateObject_2;

exports.edge = edge;