@vimeo/iris/utils/css.esm.js

Vimeo Design System

import { a as __makeTemplateObject } from '../tslib.es6-7f0e734f.js';
import styled, { css, createGlobalStyle } from 'styled-components';
import { rem } from 'polished';
import { blue } from '../color/colors.esm.js';

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.div(templateObject_4 || (templateObject_4 = __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' && css(templateObject_1 || (templateObject_1 = __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 css(templateObject_3 || (templateObject_3 = __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    "])), rem(distance * -1), rem(distance * -1), rem(distance * 2), rem(distance * 2), rem(radius), rem(2), blue(500), parent, focusPseudoSelector, parent, focusPseudoSelector, parent, focusPseudoSelector, focused && css(templateObject_2 || (templateObject_2 = __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 = createGlobalStyle(templateObject_5 || (templateObject_5 = __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;

export { Focus, GlobalStyles, centered, hidden };