https://gonatura11y.com/v4/component---src-pages-type-scale-js-8515a57b1605631922f6.js

1"use strict";(self.webpackChunknatura11y_docs=self.webpackChunknatura11y_docs||[]).push([[9520],{3138:function(e,a,t){t.d(a,{A:function(){return i}});var l=t(6540),n=t(6942),r=t.n(n),s=t(7849);var c=()=>{const{0:e,1:a}=(0,l.useState)(new Date("2024-01-01T12:00:00"));(0,l.useEffect)(()=>{a(new Date);const e=setInterval(()=>{a(new Date)},1e3);return()=>clearInterval(e)},[]);const t=e.toLocaleTimeString([],{hour:"numeric",minute:"2-digit",hour12:!0,hourCycle:"h12"}).replace(/(am|pm)/i,"");return l.createElement("p",{className:"text-shadow"},t)};var m=()=>l.createElement("svg",{id:"a","data-name":"Layer 1",xmlns:"http://www.w3.org/2000/svg",width:"62",height:"16",viewBox:"0 0 62 16"},l.createElement("rect",{x:"41",y:"4",width:"16",height:"8",rx:"1",ry:"1"}),l.createElement("path",{className:"e",d:"m59,6v-2c0-1.1046-.8954-2-2-2h-16c-1.1046,0-2,.8954-2,2v8c0,1.1046.8954,2,2,2h16c1.1046,0,2-.8954,2-2v-2c1.1046,0,2-.8954,2-2s-.8954-2-2-2Zm-1,6c0,.5514-.4486,1-1,1h-16c-.5514,0-1-.4486-1-1V4c0-.5514.4486-1,1-1h16c.5514,0,1,.4486,1,1v8Z"}),l.createElement("g",{id:"b","data-name":"Icons"},l.createElement("g",null,l.createElement("path",{className:"d",d:"m14.5,2h0c.8279,0,1.5.6721,1.5,1.5v10.5h-3V3.5c0-.8279.6721-1.5,1.5-1.5Z"}),l.createElement("path",{className:"d",d:"m12,14h-3V5.5c0-.8284.6716-1.5,1.5-1.5h0c.8284,0,1.5.6716,1.5,1.5v8.5Z"}),l.createElement("path",{className:"d",d:"m6.5,6h0c.8279,0,1.5.6721,1.5,1.5v6.5h-3v-6.5c0-.8279.6721-1.5,1.5-1.5Z"}),l.createElement("path",{className:"d",d:"m2.5,8h0c.8279,0,1.5.6721,1.5,1.5v4.5H1v-4.5c0-.8279.6721-1.5,1.5-1.5Z"})),l.createElement("g",{id:"c","data-name":"WiFi"},l.createElement("g",null,l.createElement("path",{className:"d",d:"m27.5,6.9286c-1.8446,0-3.4691.9792-4.4261,2.4667l2.0797,1.8112c.4478-.8828,1.326-1.4922,2.3464-1.4922s1.8986.6095,2.3464,1.4922l2.0797-1.8112c-.957-1.4875-2.5815-2.4667-4.4261-2.4667Z"}),l.createElement("path",{className:"d",d:"m22.0552,8.5082c1.2068-1.7922,3.193-2.9725,5.4448-2.9725s4.238,1.1803,5.4448,2.9725l2.0552-1.7898c-1.6992-2.4032-4.4212-3.9684-7.5-3.9684s-5.8008,1.5653-7.5,3.9684l2.0552,1.7898Z"}),l.createElement("path",{className:"d",d:"m26.235,12.1483l1.265,1.1017,1.265-1.1017c-.1521-.5944-.6483-1.0412-1.265-1.0412s-1.1129.4469-1.265,1.0412Z"})))));var i=e=>{const{viewportType:a="desktop",visualExample:t=null,exampleName:n="Example",utilities:i=null}=e,o=r()("browser","container margin-y-5",{[""+i]:null!==i}),h=r()({"natura11y-context":"mobile"===a});return l.createElement("div",{className:o},"mobile"===a?l.createElement("div",{className:"browser__mobile box-shadow-3 "+h},l.createElement("div",{className:"browser__mobile__viewport"},l.createElement("ul",{className:"browser__mobile__bar"},l.createElement("li",null,l.createElement(c,null)),l.createElement("li",null,l.createElement("div",{className:"browser__mobile__notch"})),l.createElement("li",null,l.createElement(m,null))),t)):l.createElement("div",{className:"browser__dektop box-shadow-3"},l.createElement("div",{className:"browser__desktop__bar"},l.createElement("div",{className:"browser__desktop__buttons"},l.createElement("span",null),l.createElement("span",null),l.createElement("span",null)),l.createElement("div",{className:"browser__desktop__tab"},l.createElement("p",null,n))),l.createElement("div",{className:"browser__desktop__viewport",style:s.TQ},t)))}},5963:function(e,a,t){t.r(a),t.d(a,{Head:function(){return h},default:function(){return o}});var l=t(6540),n=t(3138),r=t(7849);var s=e=>{var a,t;let{baseFontSize:s,typeScale:c}=e;const m=e=>(e/16).toFixed(2),i=(0,l.useMemo)(()=>{const e=s,a=e*c,t=a*c,l=t*c,n=t,r=n*c,i=r*c,o=i*c,h=o*c,d=h*c,u=d*c;return{"banner-headline":{px:Math.round(u)+"px",rem:m(u)+"rem"},h1:{px:Math.round(d)+"px",rem:m(d)+"rem"},h2:{px:Math.round(h)+"px",rem:m(h)+"rem"},h3:{px:Math.round(o)+"px",rem:m(o)+"rem"},h4:{px:Math.round(i)+"px",rem:m(i)+"rem"},h5:{px:Math.round(r)+"px",rem:m(r)+"rem"},h6:{px:Math.round(n)+"px",rem:m(n)+"rem"},"font-size-lg":{px:Math.round(l)+"px",rem:m(l)+"rem"},"font-size-rg":{px:Math.round(t)+"px",rem:m(t)+"rem"},"font-size-md":{px:Math.round(a)+"px",rem:m(a)+"rem"},"font-size-sm":{px:Math.round(e)+"px",rem:m(e)+"rem"}}},[s,c]),o=(0,l.useMemo)(()=>{const e=s*c,a=e*c,t=a,l=t*c,n=l*c,r=n*c,m=r*c,i=m*c,o=i*c;return{"--base-font-size":s+"px","--type-scale":c,"--font-size-sm":s+"px","--font-size-md":e+"px","--font-size-rg":a+"px","--font-size-lg":a*c+"px","--h1-font-size":Math.round(i)+"px","--h2-font-size":Math.round(m)+"px","--h3-font-size":Math.round(r)+"px","--h4-font-size":Math.round(n)+"px","--h5-font-size":Math.round(l)+"px","--h6-font-size":Math.round(t)+"px","--banner-headline-font-size":Math.round(o)+"px"}},[s,c]);return l.createElement("div",{className:"type-scale"},l.createElement("section",{className:"container wide grid gap-4 padding-y-5"},l.createElement("h2",{className:"screen-reader-only"},"Type Scale Specimens"),l.createElement("table",{className:"table type-scale__example box-shadow-2 border-radius-2","aria-live":"polite",style:Object.assign({},o,r.TQ)},l.createElement("thead",null,l.createElement("tr",null,l.createElement("th",

1null,"Heading"),l.createElement("th",{className:"type-scale__value"},"Pixels"),l.createElement("th",{className:"type-scale__value"},"REM"))),l.createElement("tbody",null,l.createElement("tr",null,l.createElement("td",null,l.createElement("div",{className:"type-scale__specimen"},l.createElement("p",{className:"banner-headline"},"Banner Headline"))),l.createElement("td",{className:"type-scale__value"},null===(a=i["banner-headline"])||void 0===a?void 0:a.px),l.createElement("td",{className:"type-scale__value"},null===(t=i["banner-headline"])||void 0===t?void 0:t.rem))),l.createElement("tbody",null,["h1","h2","h3","h4","h5","h6"].map((e,a)=>{var t,n;return l.createElement("tr",{key:e},l.createElement("td",null,l.createElement("div",{className:"type-scale__specimen"},l.createElement("p",{className:e},"Header "+(a+1)))),l.createElement("td",{className:"type-scale__value"},null===(t=i[e])||void 0===t?void 0:t.px),l.createElement("td",{className:"type-scale__value"},null===(n=i[e])||void 0===n?void 0:n.rem))}))),l.createElement("table",{className:"table type-scale__example box-shadow-2 border-radius-2","aria-live":"polite",style:Object.assign({},o,r.TQ)},l.createElement("thead",null,l.createElement("tr",null,l.createElement("th",

1null,"Body"),l.createElement("th",{className:"type-scale__value"},"Pixels"),l.createElement("th",{className:"type-scale__value"},"REM"))),l.createElement("tbody",null,["font-size-lg","font-size-rg","font-size-md","font-size-sm"].map((e,a)=>{var t,n;return l.createElement("tr",{key:e},l.createElement("td",null,l.createElement("div",{className:"type-scale__specimen"},l.createElement("p",{className:e},["Large","Regular (body)","Medium","Small"][a]))),l.createElement("td",{className:"type-scale__value"},null===(t=i[e])||void 0===t?void 0:t.px),l.createElement("td",{className:"type-scale__value"},null===(n=i[e])||void 0===n?void 0:n.rem))})))),l.createElement("hr",null),l.createElement("section",null,l.createElement("h2",{className:"screen-reader-only"},"Example • Article"),l.createElement(n.A,{exampleName:"Example • Sample Article",utilities:"wide",visualExample:l.createElement("article",{className:"type-scale__example",style:Object.assign({},o,r.TQ)},l.createElement("header",{className:"border-bottom padding-y-5"},l.createElement("div",{className:"container medium"},l.createElement("p",{className:"banner-headline"},"Western Namibia"))),l.createElement("div",{className:"container medium margin-y-4"},l.createElement("p",{className:"h2"},"Namib-Naukluft National Park"),l.createElement("p",{className:"font-size-rg"},"The ",l.createElement("strong",null,"Namib-Naukluft Park")," is a ",l.createElement("a",{href:"#1"},"national park")," in western ",l.createElement("a",{href:"#1"},"Namibia")," situated between the coast of the ",l.createElement("a",{href:"#1"},"Atlantic Ocean")," and the edge of the ",l.createElement("a",{href:"#1"},"Great Escarpment"),". It encompasses part of the ",l.createElement("a",{href:"#1"},"Namib Desert")," (considered the world's oldest desert), the ",l.createElement("a",{href:"#1",title:"Namibia"},"Naukluft mountain range"),", and the lagoon at ",l.createElement("a",{href:"/wiki/Sandwich_Harbour"},"Sandwich Harbour"),"."),l.createElement("p",{className:"font-size-rg"},"The best known area of the park and one of the main visitor attractions in Namibia is ",l.createElement("a",{href:"#1"},"Sossusvlei"),", a clay pan surrounded by sand dunes, and ",l.createElement("a",{href:"#1"},"Sesriem"),", a small canyon of the ",l.createElement("a",{href:"#1"},"Tsauchab"),". The desert research station of ",l.createElement("a",{href:"#1"},"Gobabeb")," is situated within the park."),l.createElement("p",{className:"h3"},"Location and description"),l.createElement("p",{className:"font-size-rg"},"With an overall area of 49,768 km (19,216 sq mi), the Namib-Naukluft National Park was at the time of its last ",l.createElement("span",{className:"term"},"expansion")," the largest game park in ",l.createElement("a",{href:"#1"},"Africa")," and the fourth largest in the world. It consists of a strip of land on the Atlantic Ocean, including 1,609 kilometres (1,000 mi) of sea, that extends roughly 600 kilometres (370 mi) north-to-south from the ",l.createElement("a",{href:"#1"},"Swakop River")," to the ",l.createElement("a",{href:"#1"},"B4 road")," to ",l.createElement("a",{href:"#1"},"Lüderitz"),"."),l.createElement("blockquote",{className:"blockquote",cite:"https://www.huxley.net/bnw/four.html"},l.createElement("p",{className:"font-size-lg"},l.createElement("em",null,"Namib")," means ",l.createElement("em",null,"Open Space"),', and the Namib Desert gave its name to form Namibia – "land of open spaces".')),l.createElement("p",{className:"h4"},"Wildlife"),l.createElement("p",{className:"font-size-rg"},"A surprising collection of creatures survives in the hyper-arid region, including:"),l.createElement("ul",null,l.createElement("li",null,l.createElement("p",{className:"font-size-rg"},l.createElement("a",{href:"#1"},l.createElement("strong",null,"Snakes"))," are elongated, limbless, carnivorous reptiles of the suborder Serpentes. Like all other squamates, snakes are ectothermic, amniote vertebrates covered in overlapping scales.")),l.createElement("li",null,l.createElement("p",{className:"font-size-rg"},l.createElement("a",{href:"#1"},l.createElement("strong",null,"Geckos"))," are small lizards belonging to the infraorder Gekkota, found in warm climates throughout the world. They range from 1.6 to 60 cm.")),l.createElement("li",null,l.createElement("p",{className:"font-size-rg"},l.createElement("a",{href:"#1"},l.createElement("strong",null,"Hyenas")),", or hyaenas, are feliform c

1arnivoran mammals of the family Hyaenidae. With only four extant species, it is the fifth-smallest biological family in the Carnivora and one of the smallest in the class Mammalia.")),l.createElement("li",null,l.createElement("p",{className:"font-size-rg"},l.createElement("a",{href:"#1"},l.createElement("strong",null,"Gemsbok")),", gemsbok, gemsbuck or South African oryx is a large antelope in the genus Oryx. It is native to the arid regions of Southern Africa, such as the Kalahari Desert. Some authorities formerly included the East African oryx as a subspecies.")),l.createElement("li",null,l.createElement("p",{className:"font-size-rg"},l.createElement("a",{href:"#1"},l.createElement("strong",null,"Leopards"))," are one of the five extant species in the genus Panthera, a member of the cat family, Felidae. It occurs in a wide range in sub-Saharan Africa, in some parts of Western and Central Asia, Southern Russia, and on the Indian subcontinent to Southeast and East Asia."))),l.createElement("h4",null,"Geography"),l.createElement("p",{className:"font-size-rg"},"The region is characterised by high, isolated ",l.createElement("a",{href:"#1"},"inselbergs")," and ",l.createElement("a",{href:"#1"},"kopjes")," (the ",l.createElement("a",{href:"#1"},"Afrikaans")," term for rocky outcrops), made up of dramatic blood red ",l.createElement("a",{href:"#1"},"granites"),", rich in ",l.createElement("a",{href:"#1"},"feldspars")," and ",l.createElement("a",{href:"#1"},"sandstone"),". The easternmost part of the park covers the ",l.createElement("a",{href:"#1"},"Naukluft Mountains"),"."),l.createElement("p",{className:"font-size-rg"},"More moisture comes in as a ",l.createElement("a",{href:"#1"},"fog")," off the ",l.createElement("a",{href:"#1"},"Atlantic Ocean")," than falls as rain, with the average 106 millimeters of rainfall per year concentrated in the months of February and April."),l.createElement("p",{className:"h6"},"History"),l.createElement("p",{className:"font-size-rg"},"The park was established in 1907 when the German Colonial Administration proclaimed three game reserves in ",l.createElement("a",{href:"#1"},"German South West Africa"),":"),l.createElement("ol",null,l.createElement("li",null,l.createElement("p",{className:"font-size-rg"},l.createElement("a",{href:"#1"},l.createElement("strong",null,"Namib-Naukluft park")),' was proclaimed as "Game Reserve No. 3", the other two were:')),l.createElement("li",null,l.createElement("p",{className:"font-size-rg"},l.createElement("a",{href:"#1"},l.createElement("strong",null,"Omuramba"))," is the term for ancient river-beds found in the Kalahari Desert of Africa, notably in the North Eastern part of Namibia and North Western part of Botswana.")),l.createElement("li",null,l.createElement("p",{className:"font-size-rg"},l.createElement("a",{href:"#1"},l.createElement("strong",null,"Etosha National Park"))," is a national park in northwestern Namibia. It was proclaimed a game reserve in March 1907 in Ordinance 88 by the Governor of German South West Africa, Dr. Friedrich von Lindequist."))),l.createElement("p",{className:"h5"},"External links"),l.createElement("ul",null,l.createElement("li",null,l.createElement("p",{className:"font-size-rg"},l.createElement("a",{href:"#1"},"Namib-Naukluft National Park, Namibia (1)"))),l.createElement("li",null,l.createElement("p",{className:"font-size-rg"},l.createElement("a",{href:"#1"},"Namib-Naukluft National Park, Namibia (1)"))),l.createElement("li",null,l.createElement("p",{className:"font-size-rg"},l.createElement("a",{href:"#1"},"Namib-Naukluft National Park, Namibia (1)"))))))})))},c=t(2827),m=t(8900);var i=e=>{let{baseFontSize:a,typeScale:t,onFontSizeChange:n,onTypeScaleChange:r}=e;const s=e=>{let{label:a,id:t,options:n,value:r,onChange:s}=e;return l.createElement("div",{className:"form-entry"},l.createElement("label",{className:"form-entry__field",htmlFor:t},l.createElement("span",{className:"form-entry__field__label"},a),l.createElement("span",{className:"form-entry__field__select"},l.createElement("select",{id:t,name:t,value:r,onChange:s},n.map(e=>l.createElement("option",{key:e.value,value:e.value},e.label))))))};return l.createElement("div",{className:"position-sticky-top--lg container narrow padding-y-4 font-size-md"}

1,l.createElement("div",{className:"grid grid--divider gap-4"},l.createElement("article",null,l.createElement("p",null,"Natura11y makes managing font sizes easy. With just two properties: ",l.createElement("em",null,"base font size")," and ",l.createElement("em",null,"type scale"),", you can scale font sizes consistently across pages or breakpoints.")),l.createElement("div",{className:"grid gap-3 font-size-sm"},l.createElement(s,{label:"Base Font Size",id:"fontSizeSelect",options:[{value:"14",label:"14px"},{value:"16",label:"16px"},{value:"18",label:"18px"},{value:"20",label:"20px"}],value:a,onChange:n}),l.createElement(s,{label:"Type Scale",id:"typeScaleSelect",options:[{value:"1.125",label:"1.125 – Major Second"},{value:"1.2",label:"1.2 – Minor Third"},{value:"1.25",label:"1.25 – Major Third"},{value:"1.333",label:"1.333 – Perfect Fourth"}],value:t,onChange:r})),l.createElement(m.A,{codeToolbar:!1,codeLanguage:"scss",codeExample:"\n            --base-font-size: "+(i=a,(i/16).toFixed(2)+"rem;\n            --type-scale: ")+t+";\n          "}),l.createElement(c.A,{tag:"link",title:"Typography Docs",iconEndHandle:"arrow-right",linkUrl:"/docs/typography",utilities:"theme-primary"})));var i};var o=()=>{const{0:e,1:a}=(0,l.useState)(16),{0:t,1:n}=(0,l.useState)(1.25);return l.createElement(l.Fragment,null,l.createElement("div",{className:"article article--column-2",style:{"--article-sidebar-width":"400px"}},l.createElement("header",{className:"article__header padding-y-4 subtle-fill-1 text-color-primary"},l.createElement("div",{className:"article__header__shift"},l.createElement("div",{className:"container narrow"},l.createElement("h1",null,"Natura11y's Type Scale")))),l.createElement("aside",{className:"article__sidebar"},l.createElement(i,{baseFontSize:e,typeScale:t,onFontSizeChange:e=>{a(Number(e.target.value))},onTypeScaleChange:e=>{n(Number(e.target.value))}})),l.createElement("div",{className:"article__body border-left--lg"},l.createElement(s,{baseFontSize:e,typeScale:t}))))};const h=()=>l.createElement(l.Fragment,null,l.createElement("title",null,"Type Scale • Natura11y Inclusive Framework"),l.createElement("meta",{name:"description",content:"Natura11y makes managing font sizes easy. With just two properties: base font size and type scale, you can scale font sizes consistently across pages or breakpoints."}))}}]);
2//# sourceMappingURL=component---src-pages-type-scale-js-8515a57b1605631922f6.js.map