@cbpds/web-components
Version:
Web components for the CBP Design System.
35 lines (31 loc) • 6.08 kB
JavaScript
/*!
* CPB Design System web components - built with Stencil
*/
import { r as registerInstance, h, a as Host, g as getElement } from './index-6c11fa0c.js';
import { s as setCSSProps } from './utils-475ba472.js';
const cbpTypographyCss = ":root{--cbp-typography-color:inherit;--cbp-typography-color-dark:inherit;--cbp-typography-color-small-text:var(--cbp-color-text-darkest);--cbp-typography-color-small-text-dark:var(--cbp-color-text-lightest);--cbp-typography-color-large-text:var(--cbp-color-text-darker);--cbp-typography-color-large-text-dark:var(--cbp-color-text-lighter);--cbp-typography-color-divider-fill:var(--cbp-color-gray-cool-10);--cbp-typography-color-divider-fill-dark:var(--cbp-color-gray-cool-70);--cbp-typography-color-divider-underline:var(--cbp-color-gray-cool-30);--cbp-typography-color-divider-underline-dark:var(--cbp-color-gray-cool-50)}[data-cbp-theme=light] cbp-typography[context*=dark],[data-cbp-theme=dark] cbp-typography:not([context=dark-inverts]):not([context=light-always]){--cbp-typography-color-small-text:var(--cbp-typography-color-small-text-dark);--cbp-typography-color-large-text:var(--cbp-typography-color-large-text-dark);--cbp-typography-color-divider-fill:var(--cbp-typography-color-divider-fill-dark);--cbp-typography-color-divider-underline:var(--cbp-typography-color-divider-underline-dark)}cbp-typography{color:var(--cbp-typography-color)}cbp-typography>*{color:var(--cbp-typography-color)}cbp-typography[variant=masthead-1]>*,cbp-typography[variant=masthead-2]>*,cbp-typography[variant=heading-xxl]>*,cbp-typography h1,cbp-typography[variant=heading-xl]>*,cbp-typography h2,cbp-typography[variant=heading-lg]>*,cbp-typography h3,cbp-typography[variant=heading-md]>*,cbp-typography h4,cbp-typography[variant=heading-sm]>*,cbp-typography h5{--cbp-typography-color:var(--cbp-typography-color-large-text)}cbp-typography[divider=underline]>*{border-block-end:var(--cbp-typography-color-divider-underline) solid var(--cbp-border-size-md);padding-block:var(--cbp-space-3x)}cbp-typography[divider=underline][variant*=masthead]>*,cbp-typography[divider=underline][variant=heading-xxl]>*{padding-block-end:var(--cbp-space-4x);border-block-end-width:var(--cbp-border-size-xl)}cbp-typography[divider=underline][variant=heading-sm]>*,cbp-typography[divider=underline] h5{border-block-end-width:var(--cbp-border-size-sm)}cbp-typography[divider=underline][variant=heading-xs]>*,cbp-typography[divider=underline] h6{border-block-end-width:var(--cbp-border-size-sm);padding-block:var(--cbp-space-1x);padding-inline-end:var(--cbp-space-2x)}cbp-typography[divider=fill]>*{background-color:var(--cbp-typography-color-divider-fill);border-radius:var(--cbp-border-radius-soft);padding:var(--cbp-space-3x)}cbp-typography[divider=fill][variant=heading-xs]>*,cbp-typography[divider=fill] h6{padding-block:var(--cbp-space-1x);padding-inline:var(--cbp-space-2x)}cbp-typography[divider][variant=heading-md]>*,cbp-typography[divider] h4{padding-block:var(--cbp-space-2x)}cbp-typography[divider][variant=heading-sm]>*,cbp-typography[divider] h5{padding-block:var(--cbp-space-1x)}cbp-typography[variant=masthead-1]>*{font-size:var(--cbp-font-size-masthead-1);font-weight:var(--cbp-font-weight-thin);line-height:var(--cbp-space-11x)}cbp-typography[variant=masthead-2]>*{font-size:var(--cbp-font-size-masthead-2);font-weight:var(--cbp-font-weight-thin);line-height:var(--cbp-space-10x)}cbp-typography[variant=heading-xxl]>*,cbp-typography h1{font-size:var(--cbp-font-size-heading-xxl);font-weight:var(--cbp-font-weight-light);line-height:var(--cbp-space-9x)}cbp-typography[variant=heading-xl]>*,cbp-typography h2{font-size:var(--cbp-font-size-heading-xl);font-weight:var(--cbp-font-weight-regular);line-height:var(--cbp-space-8x)}cbp-typography[variant=heading-lg]>*,cbp-typography h3{font-size:var(--cbp-font-size-heading-lg);font-weight:var(--cbp-font-weight-regular);line-height:var(--cbp-space-7x)}cbp-typography[variant=heading-md]>*,cbp-typography h4{font-size:var(--cbp-font-size-heading-md);font-weight:var(--cbp-font-weight-medium);line-height:var(--cbp-space-6x)}cbp-typography[variant=heading-sm]>*,cbp-typography h5{font-size:var(--cbp-font-size-heading-sm);font-weight:var(--cbp-font-weight-medium);line-height:var(--cbp-space-6x)}cbp-typography[variant=heading-xs]>*,cbp-typography h6{color:var(--cbp-typography-color-small-text);font-size:var(--cbp-font-size-heading-xs);font-weight:var(--cbp-font-weight-bold);line-height:var(--cbp-space-5x)}cbp-typography[variant=body-text]>*,cbp-typography p{font-size:var(--cbp-font-size-body);font-weight:var(--cbp-font-weight-regular);line-height:var(--cbp-space-5x);max-width:var(--cbp-line-length-longer);text-wrap:pretty}cbp-typography[variant=subhead]>*{font-size:var(--cbp-font-size-subhead);font-weight:var(--cbp-font-weight-medium);line-height:var(--cbp-space-5x)}cbp-typography[variant=heading-dialog]>*{display:block;font-size:var(--cbp-font-size-heading-lg);font-weight:var(--cbp-font-weight-bold);line-height:var(--cbp-line-height-md);padding:0;padding-block-end:var(--cbp-space-2x);margin-block-end:var(--cbp-space-2x)}";
const CbpTypographyStyle0 = cbpTypographyCss;
const CbpTypography = class {
constructor(hostRef) {
registerInstance(this, hostRef);
this.tag = "span";
this.variant = undefined;
this.divider = undefined;
this.context = undefined;
this.sx = {};
}
componentDidLoad() {
if (typeof this.sx == 'string') {
this.sx = JSON.parse(this.sx) || {};
}
setCSSProps(this.renderedTag, Object.assign({}, this.sx));
}
render() {
const Tag = this.tag;
return (h(Host, { key: '5efe53299c88ae8f9eef2cb82758c3f20d1cc882' }, h(Tag, { key: '3bcba73d1d5ae047842a6e3343377201891aa30c', ref: (el) => this.renderedTag = el }, h("slot", { key: 'b99e109f57ea080e23c1f2658ed9c3e161016dbc' }))));
}
get host() { return getElement(this); }
};
CbpTypography.style = CbpTypographyStyle0;
export { CbpTypography as cbp_typography };
//# sourceMappingURL=cbp-typography.entry.js.map