@cbpds/web-components
Version:
Web components for the CBP Design System.
5 lines • 5.95 kB
JavaScript
/*!
* CPB Design System web components - built with Stencil
*/
import{p,H as a,h as r,c as t}from"./p-9caf8482.js";import{s as e}from"./p-9c1b2f31.js";const o=":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 i=o;const c=p(class p extends a{constructor(){super();this.__registerHost();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)||{}}e(this.renderedTag,Object.assign({},this.sx))}render(){const p=this.tag;return r(t,{key:"5efe53299c88ae8f9eef2cb82758c3f20d1cc882"},r(p,{key:"3bcba73d1d5ae047842a6e3343377201891aa30c",ref:p=>this.renderedTag=p},r("slot",{key:"b99e109f57ea080e23c1f2658ed9c3e161016dbc"})))}get host(){return this}static get style(){return i}},[4,"cbp-typography",{tag:[1],variant:[513],divider:[513],context:[513],sx:[8]}]);function h(){if(typeof customElements==="undefined"){return}const p=["cbp-typography"];p.forEach((p=>{switch(p){case"cbp-typography":if(!customElements.get(p)){customElements.define(p,c)}break}}))}export{c as C,h as d};
//# sourceMappingURL=p-13e54793.js.map