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

Vimeo Design System

import { a as __makeTemplateObject } from '../../tslib.es6-7f0e734f.js';
import styled, { css } from 'styled-components';
import { rem, rgba } from 'polished';
import { core } from '../../tokens/core.esm.js';
import { Text } from '../../typography/Text/Text.esm.js';
import '../../tokens/color/index.esm.js';
import '../../tokens/color/background/background.esm.js';
import '../../tokens/util/readToken.esm.js';
import '../../color/colors.esm.js';
import '../../tokens/util/clamp.esm.js';
import '../../tokens/color/format/format.esm.js';
import '../../tokens/color/format/primary.esm.js';
import '../../tokens/color/format/secondary.esm.js';
import '../../tokens/color/format/tertiary.esm.js';
import '../../tokens/color/rainbow/rainbow.esm.js';
import '../../tokens/color/rainbow/conic/index.esm.js';
import '../../tokens/color/rainbow/conic/sm.esm.js';
import '../../tokens/color/rainbow/conic/xl.esm.js';
import '../../tokens/color/rainbow/linear/index.esm.js';
import '../../tokens/color/rainbow/linear/sm.esm.js';
import '../../tokens/color/rainbow/linear/xl.esm.js';
import '../../tokens/color/livestream/livestream.esm.js';
import '../../tokens/color/status/status.esm.js';
import '../../tokens/color/status/caution.esm.js';
import '../../tokens/color/status/negative.esm.js';
import '../../tokens/color/status/positive.esm.js';
import '../../tokens/color/stroke/stroke.esm.js';
import '../../tokens/color/surface/surface.esm.js';
import '../../tokens/color/text/text.esm.js';
import '../../tokens/util/round.esm.js';
import '../../tokens/color/upsell/upsell.esm.js';
import '../../tokens/color/upsell/sm.esm.js';
import '../../tokens/color/upsell/xl.esm.js';
import '../../tokens/color/upsell/new.esm.js';
import '../../tokens/edge/edge.esm.js';
import '../../tokens/space/space.esm.js';
import '../../tokens/typography/index.esm.js';
import '../../tokens/typography/size/size.esm.js';
import 'react';
import '../../typography/Text/Text.style.esm.js';
import '../../typography/typography.esm.js';
import '../../typography/Text/EditableText.esm.js';
import '../../utils/HOCs/withIris.esm.js';
import '../../utils/hooks/useLayoutStyles.esm.js';
import '../../utils/DOM/geometry.esm.js';
import '../../utils/css.esm.js';

var NoticeStyled = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n  width: 100%;\n  margin-bottom: ", ";\n  border-radius: ", ";\n  transition: 100ms ease-in-out;\n  color: ", ";\n\n  ", ";\n  ", ";\n\n  p:last-of-type {\n    max-width: 44rem;\n    margin-bottom: 0 !important;\n  }\n"], ["\n  position: relative;\n  width: 100%;\n  margin-bottom: ", ";\n  border-radius: ", ";\n  transition: 100ms ease-in-out;\n  color: ", ";\n\n  ", ";\n  ", ";\n\n  p:last-of-type {\n    max-width: 44rem;\n    margin-bottom: 0 !important;\n  }\n"])), rem(16), function (p) { return (p.pill ? '2rem' : rem(3)); }, core.color.text(0), padding, themeStyles);
var NoticeChildren = styled(Text)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  line-height: 1.25rem;\n  letter-spacing: 0.01rem;\n  color: ", ";\n  color: white;\n"], ["\n  line-height: 1.25rem;\n  letter-spacing: 0.01rem;\n  color: ", ";\n  color: white;\n"])), core.color.text(0));
function padding(_a) {
    var _b = _a.icon, icon = _b === void 0 ? null : _b, _c = _a.onClose, onClose = _c === void 0 ? null : _c, _d = _a.pill, pill = _d === void 0 ? null : _d;
    var pillPad = pill ? 1.5 : 1;
    var iconPad = icon ? 2 : 0;
    var dismissPad = onClose ? 2.25 : 0;
    return {
        paddingTop: '0.75rem',
        paddingRight: pillPad + dismissPad + 'rem',
        paddingBottom: '0.75rem',
        paddingLeft: pillPad + iconPad + 'rem',
    };
}
function themeColor(_a, opacity) {
    var theme = _a.theme, format = _a.format;
    if (opacity === void 0) { opacity = 1; }
    return rgba(theme.formats[format], opacity);
}
function themeStyles(_a) {
    var theme = _a.theme, format = _a.format;
    var color = themeColor({ theme: theme, format: format });
    var background = theme.name === 'dark' ? rgba(color, 0.3) : rgba(color, 0.15);
    var border = theme.name === 'dark' ? rgba(color, 0.4) : rgba(color, 0);
    return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    border: 1px solid ", ";\n    background-color: ", ";\n  "], ["\n    border: 1px solid ", ";\n    background-color: ", ";\n  "])), border, background);
}
var Icon = styled.span(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  position: absolute;\n  top: ", ";\n  left: ", ";\n\n  svg {\n    width: ", ";\n    height: ", ";\n\n    * {\n      fill: ", ";\n    }\n  }\n"], ["\n  position: absolute;\n  top: ", ";\n  left: ", ";\n\n  svg {\n    width: ", ";\n    height: ", ";\n\n    * {\n      fill: ", ";\n    }\n  }\n"])), function (p) { return (p.header ? rem(14) : rem(12)); }, function (p) { return (p.pill ? '1.5rem' : '1rem'); }, rem(20), rem(20), function (p) { return themeColor(p); });
var Dismiss = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  position: absolute;\n  top: ", ";\n  right: ", ";\n\n  svg * {\n    fill: ", " !important;\n  }\n\n  &:hover {\n    button {\n      background: ", " !important;\n    }\n  }\n"], ["\n  position: absolute;\n  top: ", ";\n  right: ", ";\n\n  svg * {\n    fill: ", " !important;\n  }\n\n  &:hover {\n    button {\n      background: ", " !important;\n    }\n  }\n"])), rem(4), function (p) { return (p.pill ? '0.75rem' : '0.25rem'); }, function (p) { return themeColor(p); }, function (p) { return themeColor(p, 0.1); });
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;

export { Dismiss, Icon, NoticeChildren, NoticeStyled };