@littlespoon/tag/lib/styled.js

Little Spoon tag

"use strict";
var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
    return cooked;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.VisuallyHidden = exports.Button = exports.DeletableTag = exports.DefaultTag = void 0;
var colors_1 = require("@littlespoon/theme/lib/colors");
var colors_2 = require("@littlespoon/theme/lib/colors");
var fonts_1 = require("@littlespoon/theme/lib/fonts");
var styled_components_1 = __importDefault(require("styled-components"));
/**
 * Gets size styles.
 */
function getSizeCss(props) {
    switch (props.size) {
        case 'small':
            return "\n      font-size: ".concat(fonts_1.primary.paragraph.small.fontSize, ";\n      line-height: ").concat(fonts_1.primary.paragraph.small.lineHeight, ";\n      svg {\n        width: 1.6rem;\n        height: 1.6rem;\n      };\n    ");
        case 'medium':
            return "\n      font-size: ".concat(fonts_1.primary.paragraph.medium.fontSize, ";\n      line-height: ").concat(fonts_1.primary.paragraph.medium.lineHeight, ";\n      svg {\n        width: 1.65rem;\n        height: 1.65rem;\n      };\n    ");
        case 'large':
            return "\n      font-size: ".concat(fonts_1.primary.paragraph.large.fontSize, ";\n      line-height: ").concat(fonts_1.primary.paragraph.large.lineHeight, ";\n      svg {\n        width: 2.0rem;\n        height: 2.0rem;\n      };\n    ");
        default:
            return '';
    }
}
exports.DefaultTag = styled_components_1.default.button(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", "\n  font-family: ", ";\n  display: inline-flex;\n  align-items: center;\n  padding: 0.6rem;\n  background-color: ", ";\n  color: ", ";\n  border-radius: 0.5rem;\n  border: none;\n"], ["\n  ", "\n  font-family: ", ";\n  display: inline-flex;\n  align-items: center;\n  padding: 0.6rem;\n  background-color: ", ";\n  color: ", ";\n  border-radius: 0.5rem;\n  border: none;\n"])), getSizeCss, fonts_1.primary.family, colors_1.secondary.secondaryNeutralGrey.grey100(), colors_2.token.shadeWhite);
exports.DeletableTag = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  ", "\n  font-family: ", ";\n  display: inline-flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 0.6rem 0.6rem;\n  background-color: ", ";\n  color: ", ";\n  border-radius: 0.5rem;\n"], ["\n  ", "\n  font-family: ", ";\n  display: inline-flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 0.6rem 0.6rem;\n  background-color: ", ";\n  color: ", ";\n  border-radius: 0.5rem;\n"])), getSizeCss, fonts_1.primary.family, colors_1.secondary.secondaryNeutralGrey.grey100(), colors_2.token.shadeWhite);
exports.Button = styled_components_1.default.button(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  background-color: ", ";\n  padding: 0.2rem 0.2rem 0 0.8rem;\n  border: none;\n"], ["\n  background-color: ", ";\n  padding: 0.2rem 0.2rem 0 0.8rem;\n  border: none;\n"])), colors_1.secondary.secondaryNeutralGrey.grey100());
exports.VisuallyHidden = styled_components_1.default.span(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  clip: rect(0 0 0 0);\n  position: absolute;\n"], ["\n  clip: rect(0 0 0 0);\n  position: absolute;\n"])));
var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
//# sourceMappingURL=styled.js.map