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

Vimeo Design System

import { a as __makeTemplateObject, c as __assign } from '../../tslib.es6-7f0e734f.js';
import styled, { css } from 'styled-components';
import { themes } from '../../themes/index.esm.js';
import { GoogleGColor } from '../../icons/social/GoogleGColor.esm.js';
import { Facebook } from '../../icons/social/Facebook.esm.js';
import { Apple } from '../../icons/social/Apple.esm.js';
import 'polished';
import '../../color/colors.esm.js';
import 'react';

var Icon = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: absolute;\n  top: 1px;\n  left: 1px;\n  background: ", ";\n  margin: 0;\n  padding: 0;\n  height: ", "px;\n  width: ", "px;\n  border-radius: 0.125rem;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  svg {\n    margin: 0;\n    transform: scale(0.75);\n    ", ";\n  }\n"], ["\n  position: absolute;\n  top: 1px;\n  left: 1px;\n  background: ", ";\n  margin: 0;\n  padding: 0;\n  height: ", "px;\n  width: ", "px;\n  border-radius: 0.125rem;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  svg {\n    margin: 0;\n    transform: scale(0.75);\n    ", ";\n  }\n"])), function (p) { return p.theme.content.background; }, function (p) { return p.size - 4; }, function (p) { return p.size - 4; }, function (p) { return p.theme.iconStyles; });
var brandThemes = {
    google: __assign(__assign({}, themes.light), { name: 'Google', icon: GoogleGColor.render({}), formats: __assign(__assign({}, themes.light.formats), { primary: '#4285f4' }), focus: '#4285f4' }),
    facebook: __assign(__assign({}, themes.light), { name: 'Facebook', icon: Facebook.render({}), formats: __assign(__assign({}, themes.light.formats), { primary: '#4267b2' }), focus: '#4267b2', iconStyles: css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      transform: scale(0.9) translate(-15%, -3%);\n      rect {\n        display: none;\n      }\n      path {\n        fill: ", ";\n      }\n    "], ["\n      transform: scale(0.9) translate(-15%, -3%);\n      rect {\n        display: none;\n      }\n      path {\n        fill: ", ";\n      }\n    "])), function (p) { return p.theme.formats.primary; }) }),
    apple: {
        light: __assign(__assign({}, themes.dark), { name: 'Apple', icon: Apple.render({}), formats: __assign(__assign({}, themes.dark.formats), { primary: '#000' }), focus: '#000' }),
        dark: __assign(__assign({}, themes.light), { name: 'Apple', icon: Apple.render({}), formats: __assign(__assign({}, themes.dark.formats), { primary: '#FFF' }), focus: '#FFF' }),
    },
};
var templateObject_1, templateObject_2;

export { Icon, brandThemes };