@kalamazoo/theme
Version:
The Atlaskit theme framework
56 lines • 5.38 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var styled_components_1 = require("styled-components");
var colors = tslib_1.__importStar(require("./colors"));
var constants_1 = require("./constants");
var baseHeading = function (size, lineHeight) { return "\n font-size: " + size / constants_1.fontSize() + "em;\n font-style: inherit;\n line-height: " + lineHeight / size + ";\n"; };
exports.headingSizes = {
h900: {
size: 35,
lineHeight: 40,
},
h800: {
size: 29,
lineHeight: 32,
},
h700: {
size: 24,
lineHeight: 28,
},
h600: {
size: 20,
lineHeight: 24,
},
h500: {
size: 16,
lineHeight: 20,
},
h400: {
size: 14,
lineHeight: 16,
},
h300: {
size: 12,
lineHeight: 16,
},
h200: {
size: 12,
lineHeight: 16,
},
h100: {
size: 11,
lineHeight: 16,
},
};
exports.h900 = function () { return styled_components_1.css(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n ", "\n color: ", ";\n font-weight: 500;\n letter-spacing: -0.01em;\n margin-top: ", "px;\n"], ["\n ", "\n color: ", ";\n font-weight: 500;\n letter-spacing: -0.01em;\n margin-top: ", "px;\n"])), baseHeading(exports.headingSizes.h900.size, exports.headingSizes.h900.lineHeight), colors.heading, constants_1.gridSize() * 6.5); };
exports.h800 = function () { return styled_components_1.css(templateObject_2 || (templateObject_2 = tslib_1.__makeTemplateObject(["\n ", "\n color: ", ";\n font-weight: 600;\n letter-spacing: -0.01em;\n margin-top: ", "px;\n"], ["\n ", "\n color: ", ";\n font-weight: 600;\n letter-spacing: -0.01em;\n margin-top: ", "px;\n"])), baseHeading(exports.headingSizes.h800.size, exports.headingSizes.h800.lineHeight), colors.heading, constants_1.gridSize() * 5); };
exports.h700 = function () { return styled_components_1.css(templateObject_3 || (templateObject_3 = tslib_1.__makeTemplateObject(["\n ", "\n color: ", ";\n font-weight: 500;\n letter-spacing: -0.01em;\n margin-top: ", "px;\n"], ["\n ", "\n color: ", ";\n font-weight: 500;\n letter-spacing: -0.01em;\n margin-top: ", "px;\n"])), baseHeading(exports.headingSizes.h700.size, exports.headingSizes.h700.lineHeight), colors.heading, constants_1.gridSize() * 5); };
exports.h600 = function () { return styled_components_1.css(templateObject_4 || (templateObject_4 = tslib_1.__makeTemplateObject(["\n ", "\n color: ", ";\n font-weight: 500;\n letter-spacing: -0.008em;\n margin-top: ", "px;\n"], ["\n ", "\n color: ", ";\n font-weight: 500;\n letter-spacing: -0.008em;\n margin-top: ", "px;\n"])), baseHeading(exports.headingSizes.h600.size, exports.headingSizes.h600.lineHeight), colors.heading, constants_1.gridSize() * 3.5); };
exports.h500 = function () { return styled_components_1.css(templateObject_5 || (templateObject_5 = tslib_1.__makeTemplateObject(["\n ", "\n color: ", ";\n font-weight: 600;\n letter-spacing: -0.006em;\n margin-top: ", "px;\n"], ["\n ", "\n color: ", ";\n font-weight: 600;\n letter-spacing: -0.006em;\n margin-top: ", "px;\n"])), baseHeading(exports.headingSizes.h500.size, exports.headingSizes.h500.lineHeight), colors.heading, constants_1.gridSize() * 3); };
exports.h400 = function () { return styled_components_1.css(templateObject_6 || (templateObject_6 = tslib_1.__makeTemplateObject(["\n ", "\n color: ", ";\n font-weight: 600;\n letter-spacing: -0.003em;\n margin-top: ", "px;\n"], ["\n ", "\n color: ", ";\n font-weight: 600;\n letter-spacing: -0.003em;\n margin-top: ", "px;\n"])), baseHeading(exports.headingSizes.h400.size, exports.headingSizes.h400.lineHeight), colors.heading, constants_1.gridSize() * 2); };
exports.h300 = function () { return styled_components_1.css(templateObject_7 || (templateObject_7 = tslib_1.__makeTemplateObject(["\n ", "\n color: ", ";\n font-weight: 600;\n margin-top: ", "px;\n text-transform: uppercase;\n"], ["\n ", "\n color: ", ";\n font-weight: 600;\n margin-top: ", "px;\n text-transform: uppercase;\n"])), baseHeading(exports.headingSizes.h300.size, exports.headingSizes.h300.lineHeight), colors.heading, constants_1.gridSize() * 2.5); };
exports.h200 = function () { return styled_components_1.css(templateObject_8 || (templateObject_8 = tslib_1.__makeTemplateObject(["\n ", "\n color: ", ";\n font-weight: 600;\n margin-top: ", "px;\n"], ["\n ", "\n color: ", ";\n font-weight: 600;\n margin-top: ", "px;\n"])), baseHeading(exports.headingSizes.h200.size, exports.headingSizes.h200.lineHeight), colors.subtleHeading, constants_1.gridSize() * 2); };
exports.h100 = function () { return styled_components_1.css(templateObject_9 || (templateObject_9 = tslib_1.__makeTemplateObject(["\n ", "\n color: ", ";\n font-weight: 700;\n margin-top: ", "px;\n"], ["\n ", "\n color: ", ";\n font-weight: 700;\n margin-top: ", "px;\n"])), baseHeading(exports.headingSizes.h100.size, exports.headingSizes.h100.lineHeight), colors.subtleHeading, constants_1.gridSize() * 2); };
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9;
//# sourceMappingURL=typography.js.map