@trimble-oss/moduswebcomponents
Version:
Modus Web Components is a modern, accessible UI library built with Stencil JS that provides reusable web components following Trimble's Modus design system. This updated version focuses on improved flexibility, enhanced theming options, comprehensive cust
1 lines • 4.89 kB
JavaScript
import{r as t,h as o,H as e,g as s}from"./p-D_4hbGjA.js";import{i as h}from"./p-BLBSdonk.js";const p=class{constructor(o){t(this,o),this.inheritedAttributes={},this.customClass="",this.hierarchy="p",this.size="md",this.weight="normal"}componentWillLoad(){this.inheritedAttributes=h(this.el)}getClasses(){const t=["modus-wc-typography"];["h1","h2","h3","h4","h5","h6"].includes(this.hierarchy)&&("md"!==this.size||"normal"!==this.weight)&&t.push("modus-wc-typography-override");const o=(({size:t,weight:o})=>{let e="";return t&&(e=`${e} modus-wc-text-${t}`),o&&(e=`${e} modus-wc-typography-weight-${o}`),e.trim()})({size:this.size,weight:this.weight});return o&&t.push(o),this.customClass&&t.push(this.customClass),t.join(" ")}render(){return o(e,{key:"31b4e8264de9f6380e96fc4dcce85636a6fe3c7b"},o(this.hierarchy,Object.assign({key:"16edca15a37852e6fcceb5147ffcf3cbf02ad148",class:this.getClasses()},this.inheritedAttributes),this.label))}get el(){return s(this)}};p.style="modus-wc-typography h1.modus-wc-typography:not(.modus-wc-typography-override){font-size:var(--modus-wc-font-size-3xl);font-weight:var(--modus-wc-font-weight-normal);letter-spacing:0.5px;line-height:36px}modus-wc-typography h2.modus-wc-typography:not(.modus-wc-typography-override){font-size:var(--modus-wc-font-size-2xl);font-weight:var(--modus-wc-font-weight-normal);letter-spacing:0.15px;line-height:30px}modus-wc-typography h3.modus-wc-typography:not(.modus-wc-typography-override){font-size:var(--modus-wc-font-size-xl);font-weight:var(--modus-wc-font-weight-semibold);letter-spacing:0.15px;line-height:27px}modus-wc-typography h4.modus-wc-typography:not(.modus-wc-typography-override){font-size:var(--modus-wc-font-size-lg);font-weight:var(--modus-wc-font-weight-semibold);letter-spacing:0.15px;line-height:24px}modus-wc-typography h5.modus-wc-typography:not(.modus-wc-typography-override){font-size:var(--modus-wc-font-size-md);font-weight:var(--modus-wc-font-weight-bold);letter-spacing:0.45px;line-height:24px}modus-wc-typography h6.modus-wc-typography:not(.modus-wc-typography-override){font-size:var(--modus-wc-font-size-sm);font-weight:var(--modus-wc-font-weight-bold);letter-spacing:0.45px;line-height:18px}modus-wc-typography .modus-wc-typography-weight-light{font-weight:var(--modus-wc-font-weight-light)}modus-wc-typography .modus-wc-typography-weight-normal{font-weight:var(--modus-wc-font-weight-normal)}modus-wc-typography .modus-wc-typography-weight-semibold{font-weight:var(--modus-wc-font-weight-semibold)}modus-wc-typography .modus-wc-typography-weight-bold{font-weight:var(--modus-wc-font-weight-bold)}modus-wc-typography .modus-wc-text-xs{font-size:var(--modus-wc-font-size-xs)}modus-wc-typography .modus-wc-text-sm{font-size:var(--modus-wc-font-size-sm)}modus-wc-typography .modus-wc-text-md{font-size:var(--modus-wc-font-size-md)}modus-wc-typography .modus-wc-text-lg{font-size:var(--modus-wc-font-size-lg)}modus-wc-typography .modus-wc-text-xl{font-size:var(--modus-wc-font-size-xl)}modus-wc-typography .modus-wc-text-2xl{font-size:var(--modus-wc-font-size-2xl)}modus-wc-typography .modus-wc-text-3xl{font-size:var(--modus-wc-font-size-3xl)}[data-theme=connect-light] modus-wc-typography *,[data-theme=connect-dark] modus-wc-typography *{color:var(--modus-wc-color-base-content-low-contrast)}[data-theme=connect-light] modus-wc-typography h1.modus-wc-typography,[data-theme=connect-dark] modus-wc-typography h1.modus-wc-typography{font-size:var(--modus-wc-font-size-4xl);font-weight:var(--modus-wc-font-weight-normal);letter-spacing:0.5px;line-height:30px}[data-theme=connect-light] modus-wc-typography h2.modus-wc-typography,[data-theme=connect-dark] modus-wc-typography h2.modus-wc-typography{font-size:var(--modus-wc-font-size-3xl);font-weight:var(--modus-wc-font-weight-semibold);letter-spacing:0.15px;line-height:24px}[data-theme=connect-light] modus-wc-typography h3.modus-wc-typography,[data-theme=connect-dark] modus-wc-typography h3.modus-wc-typography{font-size:var(--modus-wc-font-size-xl);font-weight:var(--modus-wc-font-weight-semibold);letter-spacing:0.15px;line-height:18px}[data-theme=connect-light] modus-wc-typography h4.modus-wc-typography,[data-theme=connect-dark] modus-wc-typography h4.modus-wc-typography{font-size:var(--modus-wc-font-size-lg);letter-spacing:0.15px;line-height:24px}[data-theme=connect-light] modus-wc-typography h5.modus-wc-typography,[data-theme=connect-dark] modus-wc-typography h5.modus-wc-typography{font-size:var(--modus-wc-font-size-md);font-weight:var(--modus-wc-font-weight-bold);letter-spacing:0.45px;line-height:24px}[data-theme=connect-light] modus-wc-typography h6.modus-wc-typography,[data-theme=connect-dark] modus-wc-typography h6.modus-wc-typography{font-size:var(--modus-wc-font-size-xs);font-weight:var(--modus-wc-font-weight-bold);letter-spacing:0.45px;line-height:18px;text-transform:uppercase}";export{p as modus_wc_typography}