@allakando/allakando-web-ui
Version:
Allakando's web component library
160 lines (155 loc) • 6.04 kB
JavaScript
import"./DialogManager-abca015e.js";import{i as d}from"./StyleInjection-7d750a8d.js";const a=`# Typography
Allakando's design system typography can be imported using typography.css.
This will apply changes to native elements like headings (h1, h2, etc), but also allow access to utility css classes. Check the story code to see all classes and how they can be applied.
You can use markup to style your text according to different needs. The following element types are supported:
- strong
- b
- i
- em
- s
- u
- sub
- sup
- del
- ins
- abbr
- kbd
- mark
- code
- blockquote (+ added styles for contained cite elements)
`,p={title:"Style Injection/Typography",component:"Typography",tags:["autodocs"],parameters:{docs:{description:{component:a}}}},e=()=>(window.AllakandoWebUI={injectStyle:d},`
<script>
AllakandoWebUI.injectStyle({
typography: true
})
<\/script>
<style>
#typography-parent *:not(cite) {
margin: 0;
}
p {
margin-bottom: 0.5rem ;
}
</style>
<div id="typography-parent">
<h1>Typography</h1>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
<div class="body-xl">Body XL</div>
<div class="body-l">Body L</div>
<div class="body-m">Body M</div>
<div class="body-s">Body S</div>
<div class="caption-m">Caption M</div>
<div class="caption-s">Caption S</div>
<div class="cta-m">CTA-M</div>
<div class="cta-s">CTA-S</div>
<div><a href="#">Link</a></div>
<div><a href="#">Link</a></div>
<br /><br />
H Group:
<hgroup>
<h2>Heading</h2>
<h3>Sub-Heading</h3>
</hgroup>
<br /><br />
Text types:
<div>
<p class="faded-text">Faded Text (.faded-text)</p>
<p><strong>Bold</strong> (strong, b)</p>
<p><em>Italic</em> (i, em)</p>
<p><s>Strikethrough</s> (s)</p>
<p><u>Underline</u> (u)</p>
<p>Text <sub>Sub</sub> (sub)</p>
<p>Text <sup>Sup</sup> (sup)</p>
<p><del>Deleted</del> (del)</p>
<p><ins>Inserted</ins> (ins)</p>
<p><abbr title="Abbreviation">Abbr.</abbr> (abbr)</p>
<p><kbd>Ctrl + S</kbd> (kbd)</p>
<p><mark>Highlighted</mark> (mark)</p>
<p><code>Code block</code> (code)</p>
</div>
<br /><br />
Quote:
<div>
<blockquote>
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
<cite>- The Developer</cite>
</blockquote>
</div>
</div>
`);var n,i,t;e.parameters={...e.parameters,docs:{...(n=e.parameters)==null?void 0:n.docs,source:{originalSource:`() => {
window.AllakandoWebUI = {
injectStyle
};
return \`
<script>
AllakandoWebUI.injectStyle({
typography: true
})
<\/script>
<style>
#typography-parent *:not(cite) {
margin: 0;
}
p {
margin-bottom: 0.5rem ;
}
</style>
<div id="typography-parent">
<h1>Typography</h1>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
<div class="body-xl">Body XL</div>
<div class="body-l">Body L</div>
<div class="body-m">Body M</div>
<div class="body-s">Body S</div>
<div class="caption-m">Caption M</div>
<div class="caption-s">Caption S</div>
<div class="cta-m">CTA-M</div>
<div class="cta-s">CTA-S</div>
<div><a href="#">Link</a></div>
<div><a href="#">Link</a></div>
<br /><br />
H Group:
<hgroup>
<h2>Heading</h2>
<h3>Sub-Heading</h3>
</hgroup>
<br /><br />
Text types:
<div>
<p class="faded-text">Faded Text (.faded-text)</p>
<p><strong>Bold</strong> (strong, b)</p>
<p><em>Italic</em> (i, em)</p>
<p><s>Strikethrough</s> (s)</p>
<p><u>Underline</u> (u)</p>
<p>Text <sub>Sub</sub> (sub)</p>
<p>Text <sup>Sup</sup> (sup)</p>
<p><del>Deleted</del> (del)</p>
<p><ins>Inserted</ins> (ins)</p>
<p><abbr title="Abbreviation">Abbr.</abbr> (abbr)</p>
<p><kbd>Ctrl + S</kbd> (kbd)</p>
<p><mark>Highlighted</mark> (mark)</p>
<p><code>Code block</code> (code)</p>
</div>
<br /><br />
Quote:
<div>
<blockquote>
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
<cite>- The Developer</cite>
</blockquote>
</div>
</div>
\`;
}`,...(t=(i=e.parameters)==null?void 0:i.docs)==null?void 0:t.source}}};const r=["Template"];export{e as Template,r as __namedExportsOrder,p as default};