@littlespoon/typography
Version:
Little Spoon typography
165 lines • 8.66 kB
JavaScript
;
var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
return cooked;
};
var __assign = (this && this.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
var desc = Object.getOwnPropertyDescriptor(m, k);
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
desc = { enumerable: true, get: function() { return m[k]; } };
}
Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
__setModuleDefault(result, mod);
return result;
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.TypographyBase = void 0;
var breakpoints_1 = require("@littlespoon/theme/lib/breakpoints");
var primary_1 = require("@littlespoon/theme/lib/fonts/primary");
var secondary_1 = require("@littlespoon/theme/lib/fonts/secondary");
var style_1 = require("@littlespoon/theme/lib/style");
var utils_1 = require("@littlespoon/theme/lib/utils");
var styled_components_1 = __importStar(require("styled-components"));
var constants_1 = require("./constants");
exports.TypographyBase = styled_components_1.default.p(function (props) { return (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n border: 0;\n margin: 0 0 ", " 0;\n padding: 0;\n text-align: ", ";\n text-transform: ", ";\n ", "\n ", "\n ", "\n "], ["\n border: 0;\n margin: 0 0 ", " 0;\n padding: 0;\n text-align: ", ";\n text-transform: ", ";\n ", "\n ", "\n ", "\n "])), props.noMargin ? '0' : (0, utils_1.rem)(0.8), props.center ? 'center' : '', props.uppercase ? 'uppercase' : '', getVariantCss(props), getResponsiveCss(props), (0, style_1.getStyle)(props)); });
/**
* Gets variant styles.
*/
function getVariantCss(options) {
if (typeof options.variant === 'string') {
var font = '';
var lineHeight = '';
if (Object.values(constants_1.DISPLAY_TYPE).includes(options.variant)) {
// See https://zeroheight.com/3ddd0f892/p/211297-typography/t/348dfa
var _a = secondary_1.display[options.variant], fontSize = _a.fontSize, displayLineHeight = _a.lineHeight;
font = "".concat(secondary_1.weight.bold, " ").concat(fontSize, " ").concat(secondary_1.family);
lineHeight = displayLineHeight;
}
else if (Object.values(constants_1.HEADING_TYPE).includes(options.variant)) {
// See https://zeroheight.com/3ddd0f892/p/211297-typography/t/440937
var _b = secondary_1.heading[options.variant], fontSize = _b.fontSize, headingLineHeight = _b.lineHeight;
font = "".concat(secondary_1.weight.bold, " ").concat(fontSize, " ").concat(secondary_1.family);
lineHeight = headingLineHeight;
}
else if (Object.values(constants_1.CAPTION_TYPE).includes(options.variant)) {
// See https://zeroheight.com/3ddd0f892/p/211297-typography/t/4725bd
var _c = primary_1.caption[options.variant], fontSize = _c.fontSize, captionLineHeight = _c.lineHeight;
font = "".concat(primary_1.weight.normal, " ").concat(fontSize, " ").concat(primary_1.family);
lineHeight = captionLineHeight;
}
else if (Object.values(constants_1.PARAGRAPH_TYPE).includes(options.variant)) {
// See https://zeroheight.com/3ddd0f892/p/211297-typography/t/294b11
var _d = primary_1.paragraph[options.variant], fontSize = _d.fontSize, paragraphLineHeight = _d.lineHeight;
font = "".concat(primary_1.weight.normal, " ").concat(fontSize, " ").concat(primary_1.family);
lineHeight = paragraphLineHeight;
}
else {
// See https://zeroheight.com/3ddd0f892/p/211297-typography/t/48491c
var _e = primary_1.paragraph.p3, fontSize = _e.fontSize, paragraphLineHeight = _e.lineHeight;
font = "".concat(primary_1.weight.normal, " ").concat(fontSize, " ").concat(primary_1.family);
lineHeight = paragraphLineHeight;
}
var letterSpacing = getLetterSpacing({
bold: options.bold,
uppercase: options.uppercase,
variant: options.variant,
});
return "\n font: ".concat(font, ";\n line-height: ").concat(lineHeight, ";\n letter-spacing: ").concat(letterSpacing, ";\n ");
}
else if (typeof options.variant === 'object') {
var breakpoints = Object.entries(options.variant);
return breakpoints.reduce(function (css, _a) {
var breakpoint = _a[0], variant = _a[1];
if (+breakpoint === 0) {
css += getVariantCss(__assign(__assign({}, options), { variant: variant }));
}
else {
css += "\n @media screen and (min-width: ".concat(breakpoint, "px) {\n ").concat(getVariantCss(__assign(__assign({}, options), { variant: variant })), " \n }\n ");
}
return css;
}, '');
}
return '';
}
/**
* Gets responsive styles.
*/
function getResponsiveCss(props) {
var _a;
if (typeof props.variant !== 'string') {
return '';
}
// See https://zeroheight.com/3ddd0f892/p/211297-typography/t/37ada3
var responsiveVariant = (_a = {},
_a[constants_1.DISPLAY_TYPE.DISPLAY1] = constants_1.HEADING_TYPE.H1,
_a[constants_1.DISPLAY_TYPE.DISPLAY2] = constants_1.HEADING_TYPE.H1,
_a[constants_1.HEADING_TYPE.H1] = constants_1.HEADING_TYPE.H2,
_a[constants_1.HEADING_TYPE.H2] = constants_1.HEADING_TYPE.H3,
_a[constants_1.HEADING_TYPE.H3] = constants_1.HEADING_TYPE.H4,
_a[constants_1.HEADING_TYPE.H4] = constants_1.HEADING_TYPE.H5,
_a[constants_1.HEADING_TYPE.H5] = constants_1.HEADING_TYPE.H6,
_a[constants_1.HEADING_TYPE.H6] = '',
_a[constants_1.HEADING_TYPE.H7] = constants_1.HEADING_TYPE.H7,
_a[constants_1.PARAGRAPH] = '',
_a[constants_1.PARAGRAPH_TYPE.P0] = constants_1.PARAGRAPH_TYPE.P1,
_a[constants_1.PARAGRAPH_TYPE.P1] = constants_1.PARAGRAPH_TYPE.P2,
_a[constants_1.PARAGRAPH_TYPE.P2] = constants_1.PARAGRAPH_TYPE.P3,
_a[constants_1.PARAGRAPH_TYPE.P3] = '',
_a[constants_1.PARAGRAPH_TYPE.P4] = '',
_a[constants_1.CAPTION_TYPE.CAPTION1] = '',
_a)[props.variant];
if (!responsiveVariant) {
return '';
}
var css = getVariantCss({
bold: props.bold,
uppercase: props.uppercase,
variant: responsiveVariant,
});
return (0, breakpoints_1.down)(breakpoints_1.desktop, css);
}
function getLetterSpacing(_a) {
var bold = _a.bold, uppercase = _a.uppercase, variant = _a.variant;
// Do not modify any of the `'normal'` values in this function.
// There are cases in which the value of the `letter-spacing`
// property must be overriden
var letterSpacing = 'normal';
if (uppercase) {
if (Object.values(constants_1.PARAGRAPH_TYPE).includes(variant)) {
// See https://zeroheight.com/3ddd0f892/p/211297-typography/t/294b11
letterSpacing = bold ? (0, utils_1.rem)(0.1) : (0, utils_1.rem)(0.05);
}
else if (Object.values(constants_1.CAPTION_TYPE).includes(variant)) {
// See https://zeroheight.com/3ddd0f892/p/211297-typography/t/36c339
letterSpacing = bold ? (0, utils_1.rem)(0.05) : 'normal';
}
}
return letterSpacing;
}
var templateObject_1;
//# sourceMappingURL=TypographyBase.js.map