mirror of
https://github.com/Ocelot-Social-Community/Ocelot-Social.git
synced 2026-01-20 20:01:25 +00:00
15 lines
18 KiB
JavaScript
15 lines
18 KiB
JavaScript
import{_ as i}from"./plugin-vue_export-helper-DlAUqK2U.js";import{c as a,a as t,o as e}from"./app-BnOEODOX.js";const h={};function l(n,s){return e(),a("div",null,s[0]||(s[0]=[t(`<h2 id="text-sizes" tabindex="-1"><a class="header-anchor" href="#text-sizes"><span>Text sizes</span></a></h2><p>Use different sizes to create hierarchy.</p><div class="language-html line-numbers-mode" data-highlighter="shiki" data-ext="html" data-title="html" style="--shiki-light:#383A42;--shiki-dark:#abb2bf;--shiki-light-bg:#FAFAFA;--shiki-dark-bg:#282c34;"><pre class="shiki shiki-themes one-light one-dark-pro vp-code"><code><span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;"><</span><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;">ds-text</span><span style="--shiki-light:#986801;--shiki-dark:#D19A66;"> size</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">=</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;">"x-large"</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">>The quick brown fox (x-large)</</span><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;">ds-text</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">></span></span>
|
|
<span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;"><</span><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;">ds-text</span><span style="--shiki-light:#986801;--shiki-dark:#D19A66;"> size</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">=</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;">"large"</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">>The quick brown fox (large)</</span><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;">ds-text</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">></span></span>
|
|
<span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;"><</span><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;">ds-text</span><span style="--shiki-light:#986801;--shiki-dark:#D19A66;"> size</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">=</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;">"base"</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">>The quick brown fox (base)</</span><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;">ds-text</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">></span></span>
|
|
<span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;"><</span><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;">ds-text</span><span style="--shiki-light:#986801;--shiki-dark:#D19A66;"> size</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">=</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;">"small"</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">>The quick brown fox (small)</</span><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;">ds-text</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">></span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="text-colors" tabindex="-1"><a class="header-anchor" href="#text-colors"><span>Text colors</span></a></h2><p>Use colors to highlight or deemphasize.</p><div class="language-html line-numbers-mode" data-highlighter="shiki" data-ext="html" data-title="html" style="--shiki-light:#383A42;--shiki-dark:#abb2bf;--shiki-light-bg:#FAFAFA;--shiki-dark-bg:#282c34;"><pre class="shiki shiki-themes one-light one-dark-pro vp-code"><code><span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;"><</span><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;">ds-text</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">>The quick brown fox</</span><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;">ds-text</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">></span></span>
|
|
<span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;"><</span><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;">ds-text</span><span style="--shiki-light:#986801;--shiki-dark:#D19A66;"> color</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">=</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;">"soft"</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">>The quick brown fox</</span><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;">ds-text</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">></span></span>
|
|
<span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;"><</span><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;">ds-text</span><span style="--shiki-light:#986801;--shiki-dark:#D19A66;"> color</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">=</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;">"softer"</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">>The quick brown fox</</span><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;">ds-text</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">></span></span>
|
|
<span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;"><</span><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;">ds-text</span><span style="--shiki-light:#986801;--shiki-dark:#D19A66;"> color</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">=</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;">"primary"</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">>The quick brown fox</</span><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;">ds-text</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">></span></span>
|
|
<span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;"><</span><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;">ds-text</span><span style="--shiki-light:#986801;--shiki-dark:#D19A66;"> color</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">=</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;">"success"</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">>The quick brown fox</</span><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;">ds-text</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">></span></span>
|
|
<span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;"><</span><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;">ds-text</span><span style="--shiki-light:#986801;--shiki-dark:#D19A66;"> color</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">=</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;">"danger"</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">>The quick brown fox</</span><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;">ds-text</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">></span></span>
|
|
<span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;"><</span><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;">ds-text</span><span style="--shiki-light:#986801;--shiki-dark:#D19A66;"> color</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">=</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;">"warning"</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">>The quick brown fox</</span><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;">ds-text</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">></span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="text-align" tabindex="-1"><a class="header-anchor" href="#text-align"><span>Text align</span></a></h2><p>Align text to left, center or right.</p><div class="language-html line-numbers-mode" data-highlighter="shiki" data-ext="html" data-title="html" style="--shiki-light:#383A42;--shiki-dark:#abb2bf;--shiki-light-bg:#FAFAFA;--shiki-dark-bg:#282c34;"><pre class="shiki shiki-themes one-light one-dark-pro vp-code"><code><span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;"><</span><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;">ds-text</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">>The quick brown fox</</span><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;">ds-text</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">></span></span>
|
|
<span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;"><</span><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;">ds-text</span><span style="--shiki-light:#000000;--shiki-dark:#D19A66;"> align</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">=</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;">"center"</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">>The quick brown fox</</span><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;">ds-text</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">></span></span>
|
|
<span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;"><</span><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;">ds-text</span><span style="--shiki-light:#000000;--shiki-dark:#D19A66;"> align</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">=</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;">"right"</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">>The quick brown fox</</span><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;">ds-text</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">></span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="text-uppercase" tabindex="-1"><a class="header-anchor" href="#text-uppercase"><span>Text uppercase</span></a></h2><p>Display text in uppercase.</p><div class="language-html line-numbers-mode" data-highlighter="shiki" data-ext="html" data-title="html" style="--shiki-light:#383A42;--shiki-dark:#abb2bf;--shiki-light-bg:#FAFAFA;--shiki-dark-bg:#282c34;"><pre class="shiki shiki-themes one-light one-dark-pro vp-code"><code><span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;"><</span><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;">ds-text</span><span style="--shiki-light:#986801;--shiki-dark:#D19A66;"> uppercase</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">>The quick brown fox</</span><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;">ds-text</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">></span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div></div></div><h2 id="nesting-styles" tabindex="-1"><a class="header-anchor" href="#nesting-styles"><span>Nesting styles</span></a></h2><p>Nested text components use their parents format by default.</p><div class="language-html line-numbers-mode" data-highlighter="shiki" data-ext="html" data-title="html" style="--shiki-light:#383A42;--shiki-dark:#abb2bf;--shiki-light-bg:#FAFAFA;--shiki-dark-bg:#282c34;"><pre class="shiki shiki-themes one-light one-dark-pro vp-code"><code><span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;"><</span><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;">ds-text</span><span style="--shiki-light:#986801;--shiki-dark:#D19A66;"> color</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">=</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;">"primary"</span><span style="--shiki-light:#986801;--shiki-dark:#D19A66;"> size</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">=</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;">"large"</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">></span></span>
|
|
<span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;"> The quick <</span><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;">ds-text</span><span style="--shiki-light:#986801;--shiki-dark:#D19A66;"> bold</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">>brown</</span><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;">ds-text</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">> fox</span></span>
|
|
<span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;"></</span><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;">ds-text</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">></span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div>`,15)]))}const d=i(h,[["render",l],["__file","demo.html.vue"]]),r=JSON.parse('{"path":"/styleguide/src/system/components/typography/Text/demo.html","title":"","lang":"en-US","frontmatter":{},"headers":[{"level":2,"title":"Text sizes","slug":"text-sizes","link":"#text-sizes","children":[]},{"level":2,"title":"Text colors","slug":"text-colors","link":"#text-colors","children":[]},{"level":2,"title":"Text align","slug":"text-align","link":"#text-align","children":[]},{"level":2,"title":"Text uppercase","slug":"text-uppercase","link":"#text-uppercase","children":[]},{"level":2,"title":"Nesting styles","slug":"nesting-styles","link":"#nesting-styles","children":[]}],"git":{"createdTime":1765361042000,"updatedTime":1765361042000,"contributors":[{"name":"dependabot[bot]","email":"49699333+dependabot[bot]@users.noreply.github.com","commits":1}]},"readingTime":{"minutes":0.72,"words":215},"filePathRelative":"styleguide/src/system/components/typography/Text/demo.md","localizedDate":"December 10, 2025","excerpt":"<h2>Text sizes</h2>\\n<p>Use different sizes to create hierarchy.</p>\\n<div class=\\"language-html line-numbers-mode\\" data-highlighter=\\"shiki\\" data-ext=\\"html\\" data-title=\\"html\\" style=\\"--shiki-light:#383A42;--shiki-dark:#abb2bf;--shiki-light-bg:#FAFAFA;--shiki-dark-bg:#282c34\\"><pre class=\\"shiki shiki-themes one-light one-dark-pro vp-code\\"><code><span class=\\"line\\"><span style=\\"--shiki-light:#383A42;--shiki-dark:#ABB2BF\\"><</span><span style=\\"--shiki-light:#E45649;--shiki-dark:#E06C75\\">ds-text</span><span style=\\"--shiki-light:#986801;--shiki-dark:#D19A66\\"> size</span><span style=\\"--shiki-light:#383A42;--shiki-dark:#ABB2BF\\">=</span><span style=\\"--shiki-light:#50A14F;--shiki-dark:#98C379\\">\\"x-large\\"</span><span style=\\"--shiki-light:#383A42;--shiki-dark:#ABB2BF\\">>The quick brown fox (x-large)</</span><span style=\\"--shiki-light:#E45649;--shiki-dark:#E06C75\\">ds-text</span><span style=\\"--shiki-light:#383A42;--shiki-dark:#ABB2BF\\">></span></span>\\n<span class=\\"line\\"><span style=\\"--shiki-light:#383A42;--shiki-dark:#ABB2BF\\"><</span><span style=\\"--shiki-light:#E45649;--shiki-dark:#E06C75\\">ds-text</span><span style=\\"--shiki-light:#986801;--shiki-dark:#D19A66\\"> size</span><span style=\\"--shiki-light:#383A42;--shiki-dark:#ABB2BF\\">=</span><span style=\\"--shiki-light:#50A14F;--shiki-dark:#98C379\\">\\"large\\"</span><span style=\\"--shiki-light:#383A42;--shiki-dark:#ABB2BF\\">>The quick brown fox (large)</</span><span style=\\"--shiki-light:#E45649;--shiki-dark:#E06C75\\">ds-text</span><span style=\\"--shiki-light:#383A42;--shiki-dark:#ABB2BF\\">></span></span>\\n<span class=\\"line\\"><span style=\\"--shiki-light:#383A42;--shiki-dark:#ABB2BF\\"><</span><span style=\\"--shiki-light:#E45649;--shiki-dark:#E06C75\\">ds-text</span><span style=\\"--shiki-light:#986801;--shiki-dark:#D19A66\\"> size</span><span style=\\"--shiki-light:#383A42;--shiki-dark:#ABB2BF\\">=</span><span style=\\"--shiki-light:#50A14F;--shiki-dark:#98C379\\">\\"base\\"</span><span style=\\"--shiki-light:#383A42;--shiki-dark:#ABB2BF\\">>The quick brown fox (base)</</span><span style=\\"--shiki-light:#E45649;--shiki-dark:#E06C75\\">ds-text</span><span style=\\"--shiki-light:#383A42;--shiki-dark:#ABB2BF\\">></span></span>\\n<span class=\\"line\\"><span style=\\"--shiki-light:#383A42;--shiki-dark:#ABB2BF\\"><</span><span style=\\"--shiki-light:#E45649;--shiki-dark:#E06C75\\">ds-text</span><span style=\\"--shiki-light:#986801;--shiki-dark:#D19A66\\"> size</span><span style=\\"--shiki-light:#383A42;--shiki-dark:#ABB2BF\\">=</span><span style=\\"--shiki-light:#50A14F;--shiki-dark:#98C379\\">\\"small\\"</span><span style=\\"--shiki-light:#383A42;--shiki-dark:#ABB2BF\\">>The quick brown fox (small)</</span><span style=\\"--shiki-light:#E45649;--shiki-dark:#E06C75\\">ds-text</span><span style=\\"--shiki-light:#383A42;--shiki-dark:#ABB2BF\\">></span></span></code></pre>\\n<div class=\\"line-numbers\\" aria-hidden=\\"true\\" style=\\"counter-reset:line-number 0\\"><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div></div></div>"}');export{d as comp,r as data};
|