@vimeo/iris/tokens/edge/edge.esm.js

Vimeo Design System

import { a as __makeTemplateObject } from '../../tslib.es6-7f0e734f.js';
import { css } from 'styled-components';
import { rgba } from 'polished';
import { readToken } from '../util/readToken.esm.js';
import { black } from '../../color/colors.esm.js';

var edge = function (grade) { return 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 css(templateObject_1 || (templateObject_1 = __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 css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    border: ", "px solid ", ";\n    box-shadow: ", ", ", ";\n  "], ["\n    border: ", "px solid ", ";\n    box-shadow: ", ", ", ";\n  "])), width, rgba(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 ? 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(rgba(color, opacity), "\n");
}
var templateObject_1, templateObject_2;

export { edge };