@wordpress/components
Version:
UI components for WordPress.
152 lines (146 loc) • 3.11 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.text = void 0;
var _fontFamily = require("./font-family");
var _emotionCss = _interopRequireDefault(require("./emotion-css"));
var _colorsValues = require("../../utils/colors-values");
/**
* Internal dependencies
*/
const fontWeightNormal = `font-weight: 400;`;
const fontWeightMedium = `font-weight: 500;`;
const fontWeightSemibold = `font-weight: 600;`;
const title = `
${fontWeightNormal}
`;
const titleLarge = `
font-size: 32px;
line-height: 40px;
`;
const titleMedium = `
font-size: 24px;
line-height: 32px;
`;
const titleSmall = `
font-size: 20px;
line-height: 28px;
`;
const subtitle = `
${fontWeightSemibold}
font-size: 14px;
line-height: 20px;
`;
const subtitleLarge = `
font-size: 16px;
line-height: 24px;
`;
const subtitleSmall = `
font-size: 14px;
line-height: 20px;
`;
const body = `
${fontWeightNormal}
`;
const bodyLarge = `
font-size: 16px;
line-height: 24px;
`;
const bodySmall = `
font-size: 14px;
line-height: 20px;
`;
const button = `
${fontWeightSemibold}
font-size: 14px;
line-height: 20px;
`;
const caption = `
${fontWeightNormal}
font-size: 12px;
line-height: 16px;
`;
const label = `
${fontWeightSemibold}
font-size: 12px;
line-height: 16px;
`;
const sectionHeading = `
${fontWeightMedium}
font-size: 11px;
line-height: 1.4;
text-transform: uppercase;
color: ${_colorsValues.COLORS.gray[700]}
`;
/**
* @typedef {'title.large'|'title.medium'|'title.small'|'subtitle'|'subtitle.small'|'body'|'body.large'|'body.small'|'button'|'caption'|'label'|'sectionheading'} TextVariant
*/
/**
* @param {TextVariant} variantName
*/
const variant = (variantName = 'body') => {
switch (variantName) {
case 'title.large':
return (0, _emotionCss.default)`
${title}
${titleLarge}
`;
case 'title.medium':
return (0, _emotionCss.default)`
${title}
${titleMedium}
`;
case 'title.small':
return (0, _emotionCss.default)`
${title}
${titleSmall}
`;
case 'subtitle':
return (0, _emotionCss.default)`
${subtitle}
${subtitleLarge}
`;
case 'subtitle.small':
return (0, _emotionCss.default)`
${subtitle}
${subtitleSmall}
`;
case 'body':
return (0, _emotionCss.default)`
${body}
`;
case 'body.large':
return (0, _emotionCss.default)`
${body}
${bodyLarge}
`;
case 'body.small':
return (0, _emotionCss.default)`
${body}
${bodySmall}
`;
case 'button':
return button;
case 'caption':
return caption;
case 'label':
return label;
case 'sectionheading':
return sectionHeading;
}
};
/**
* @typedef {Object} TextProps
* @property {TextVariant} variant one of TextVariant to be used
*/
/**
* @param {TextProps} props
*/
const text = props => (0, _emotionCss.default)`
${_fontFamily.fontFamily}
${variant(props.variant)}
`;
exports.text = text;
//# sourceMappingURL=text-mixins.native.js.map