1import{_ as v}from"./DevLayout-R78KLsQD.js";import{n as C,H as b,J as k,c as m,o as r,w as f,b as e,t as i,f as n,e as x,F as H,r as B,K as c,P as S}from"./app-Bd0jZ4nk.js";import"./PopToast-BZZuRC-I.js";import"./Icon-Si08zmMr.js";const _={class:"text-samples"},w={class:"sample-head ff-dm-sans"},L="The Mighty Mango jumps over the one-eyed Mushroom.",V={__name:"Typography",setup(M){C({});let s=!1;const h=[{name:"DM Sans",tag:"h1",containerClass:"ff-dm-sans",class:"",theme:"dark",content:"Ag"},{name:"H1",tag:"h1",containerClass:"ff-dm-sans",class:"",theme:"dark",content:""},{name:"H2",tag:"h2",containerClass:"ff-dm-sans",class:"",theme:"dark",content:""},{name:"H3",tag:"h3",containerClass:"ff-dm-sans",class:"",theme:"dark",content:""},{name:"H4",tag:"h4",containerClass:"ff-dm-sans",class:"",theme:"dark",content:""},{name:"Inter",tag:"h1",containerClass:"ff-inter",class:"",theme:"dark",content:"Ag"},{name:"H5",tag:"h5",containerClass:"ff-inter",class:"",theme:"dark",content:""},{name:"H6",tag:"h6",containerClass:"ff-inter",class:"",theme:"dark",content:""},{name:"Body L Heavy",tag:"p",containerClass:"ff-inter",class:"body-l-heavy",theme:"dark",content:""},{name:"Body L Light",tag:"p",containerClass:"ff-inter",class:"body-l-light",theme:"dark",content:""},{name:"Body M Heavy",tag:"p",containerClass:"ff-inter",class:"body-m-heavy",theme:"dark",content:""},{name:"Body M Light",tag:"p",containerClass:"ff-inter",class:"body-m-light",theme:"dark",content:""},{name:"Body S Heavy",tag:"p",containerClass:"ff-inter",class:"body-s-heavy",theme:"dark",content:""},{name:"Body S Light",tag:"p",containerClass:"ff-inter",class:"body-s-light",theme:"dark",content:""},{name:"Body XS Heavy",tag:"p",containerClass:"ff-inter",class:"body-xs-heavy",theme:"dark",content:""},{name:"Body XXS Heavy",tag:"p",containerClass:"ff-inter",class:"body-xxs-heavy",theme:"dark",content:""}],o=()=>{const l=document.querySelectorAll(".ff-sample");for(const a of l){let t=window.getComputedStyle(a),p=a.parentElement.clientWidth+"px";const y={"font-size":t.fontSize,"font-family":t.fontFamily,"font-weight":t.fontWeight,"text-transform":t.textTransform,"letter-spacing":t.letterSpacing,"line-height":t.lineHeight,"text-decoration":t.textDecoration.split(" ")[0],"Container Width":p};let d="";for(const[g,u]of Object.entries(y))d+="<div><b>"+g+"</b><span></span>"+u+"</span></div>";a.parentElement.nextElementSibling.innerHTML=d}};return b(()=>{o(),s||(window.addEventListener("resize",o),s=!0)}),k(()=>{s&&(window.removeEventListener("resize",o),s=!1)}),(l,a)=>(r(),m(v,{id:"page-dev-typography"},{default:f(()=>[e("h1",null,i(l.$page.props.title)+" Page",1),a[2]||(a[2]=e("div",{class:"head"},[e("p",null,"Type styles are class-driven. The classes group related text styles together."),e("p",null,"Classes must be applied in a container-child heirarchy. The font family gets applied to a container and the child element has a specific tag or class name that corresponds to its variant within the font family."),e("code",null,[n(' <div class="ff-dm-sans">'),e("br"),n(" <h1>Variant styles target tag name</h1>"),e("br"),n(' <p class="body-heavy">Variant styles target class name</p>'),e("br"),n(" </div> ")]),e("p",null,"Each font family can have its own break-point based on its container size (.ff-*).")],-1)),e("div",_,[(r(),x(H,null,B(h,t=>e("div",{class:c(["sample",{["theme-"+t.theme]:!0}])},[e("div",w,[e("h5",null,i(t.name),1),a[0]||(a[0]=e("br",null,null,-1))]),e("div",{class:c(["container",t.containerClass])},[(r(),m(S(t.tag),{class:c(["ff-sample",t.class])},{default:f(()=>[n(i(t.content||L||t.name),1)]),_:2},1032,["class"]))],2),a[1]||(a[1]=e("code",null,null,-1))],2)),64))])]),_:1,__:[2]}))}};export{V as default};
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.