@vimeo/iris/utils/css.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 centered = {
    position: 'absolute',
    top: '50%',
    left: '50%',
    transform: 'translate(-50%, -50%)',
};
var hidden = {
    position: 'absolute',
    height: '1px',
    width: '1px',
    overflow: 'hidden',
    clip: 'rect(1px, 1px, 1px, 1px)',
};
var Focus = styled__default["default"].div(templateObject_4 || (templateObject_4 = tslib_es6.__makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (_a) {
    var parent = _a.parent, focused = _a.focused, variant = _a.variant, _b = _a.radius, radius = _b === void 0 ? 6 : _b, _c = _a.distance, distance = _c === void 0 ? 4 : _c, _d = _a.isKeyboardOnly, isKeyboardOnly = _d === void 0 ? false : _d;
    var underline = variant === 'underline' && styled.css(templateObject_1 || (templateObject_1 = tslib_es6.__makeTemplateObject(["\n        border-radius: 0;\n        border-top-color: rgba(0, 0, 0, 0) !important;\n        border-left-color: rgba(0, 0, 0, 0) !important;\n        border-right-color: rgba(0, 0, 0, 0) !important;\n      "], ["\n        border-radius: 0;\n        border-top-color: rgba(0, 0, 0, 0) !important;\n        border-left-color: rgba(0, 0, 0, 0) !important;\n        border-right-color: rgba(0, 0, 0, 0) !important;\n      "])));
    var focusPseudoSelector = isKeyboardOnly
        ? ':focus-visible'
        : ':focus';
    return styled.css(templateObject_3 || (templateObject_3 = tslib_es6.__makeTemplateObject(["\n      z-index: 1;\n      top: ", ";\n      left: ", ";\n      position: absolute;\n      width: calc(100% + ", ");\n      height: calc(100% + ", ");\n      pointer-events: none;\n      border-radius: ", ";\n      border: ", " solid ", ";\n      opacity: 0;\n      transition: 150ms ease-in-out;\n\n      ", "", " > &,\n      ", "", " ~ &,\n      ", "", " ~ div > & {\n        opacity: 1;\n      }\n\n      ", "\n\n      ", ";\n    "], ["\n      z-index: 1;\n      top: ", ";\n      left: ", ";\n      position: absolute;\n      width: calc(100% + ", ");\n      height: calc(100% + ", ");\n      pointer-events: none;\n      border-radius: ", ";\n      border: ", " solid ", ";\n      opacity: 0;\n      transition: 150ms ease-in-out;\n\n      ", "", " > &,\n      ", "", " ~ &,\n      ", "", " ~ div > & {\n        opacity: 1;\n      }\n\n      ", "\n\n      ", ";\n    "])), polished.rem(distance * -1), polished.rem(distance * -1), polished.rem(distance * 2), polished.rem(distance * 2), polished.rem(radius), polished.rem(2), color_colors.blue(500), parent, focusPseudoSelector, parent, focusPseudoSelector, parent, focusPseudoSelector, focused && styled.css(templateObject_2 || (templateObject_2 = tslib_es6.__makeTemplateObject(["\n        opacity: 1;\n      "], ["\n        opacity: 1;\n      "]))), underline);
});
// const systemFont = `-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;`;
var vimeoFont = "'Helvetica Neue', Helvetica, Arial, sans-serif;";
var GlobalStyles = styled.createGlobalStyle(templateObject_5 || (templateObject_5 = tslib_es6.__makeTemplateObject(["\n\n  :root {\n    color-scheme: ", "\n  }\n\n  html {\n    box-sizing: border-box;\n    padding: 0;\n    margin: 0;\n    font-size: 16px;\n    font-family: ", ";\n    min-height: 100%;\n    color: ", ";\n    background: ", ";\n  }\n\n  body {\n    padding: 0;\n    margin: 0;\n    min-height: 100%;\n    overflow-x: hidden;\n  }\n\n  *, *:before, *:after {\n    box-sizing: inherit\n  }\n\n  blockquote, dl, dd, h1, h2, h3, h4, h5, h6, figure, p, pre, ul, li {\n    margin: 0;\n    padding: 0;\n  }\n\n  input {\n    font-family: ", ";\n  }\n\n  button {\n    background: transparent;\n    border-color: transparent;\n    padding: 0;\n    margin: 0;\n  }\n\n  a {\n    text-decoration: none;\n  }\n"], ["\n\n  :root {\n    color-scheme: ", "\n  }\n\n  html {\n    box-sizing: border-box;\n    padding: 0;\n    margin: 0;\n    font-size: 16px;\n    font-family: ", ";\n    min-height: 100%;\n    color: ", ";\n    background: ", ";\n  }\n\n  body {\n    padding: 0;\n    margin: 0;\n    min-height: 100%;\n    overflow-x: hidden;\n  }\n\n  *, *:before, *:after {\n    box-sizing: inherit\n  }\n\n  blockquote, dl, dd, h1, h2, h3, h4, h5, h6, figure, p, pre, ul, li {\n    margin: 0;\n    padding: 0;\n  }\n\n  input {\n    font-family: ", ";\n  }\n\n  button {\n    background: transparent;\n    border-color: transparent;\n    padding: 0;\n    margin: 0;\n  }\n\n  a {\n    text-decoration: none;\n  }\n"])), function (_a) {
    var theme = _a.theme;
    return theme.name;
}, vimeoFont, function (_a) {
    var theme = _a.theme;
    return theme.content.color2;
}, function (_a) {
    var theme = _a.theme;
    return theme.content.background;
}, vimeoFont);
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;

exports.Focus = Focus;
exports.GlobalStyles = GlobalStyles;
exports.centered = centered;
exports.hidden = hidden;