Ocelot-Social/assets/demo.html-DI2SHnL1.js

import{_ as a}from"./plugin-vue_export-helper-DlAUqK2U.js";import{c as e,a as i,o as t}from"./app-YeL2FPh5.js";const n={};function l(d,s){return t(),e("div",null,s[0]||(s[0]=[i(`<h2 id="tag-colors" tabindex="-1"><a class="header-anchor" href="#tag-colors"><span>Tag colors</span></a></h2><p>Use different colors to emphasize or provide meaning.</p><div class="language- line-numbers-mode" data-highlighter="shiki" data-ext="" data-title="" 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>&lt;ds-tag&gt;medium&lt;/ds-tag&gt;</span></span>
<span class="line"><span>&lt;ds-tag color=&quot;inverse&quot;&gt;inverse&lt;/ds-tag&gt;</span></span>
<span class="line"><span>&lt;ds-tag color=&quot;primary&quot;&gt;primary&lt;/ds-tag&gt;</span></span>
<span class="line"><span>&lt;ds-tag color=&quot;success&quot;&gt;success&lt;/ds-tag&gt;</span></span>
<span class="line"><span>&lt;ds-tag color=&quot;warning&quot;&gt;warning&lt;/ds-tag&gt;</span></span>
<span class="line"><span>&lt;ds-tag color=&quot;danger&quot;&gt;danger&lt;/ds-tag&gt;</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></div><h2 id="tag-sizes" tabindex="-1"><a class="header-anchor" href="#tag-sizes"><span>Tag sizes</span></a></h2><p>Use different sizes to create hierarchy (defaults to <code>base</code>).</p><div class="language- line-numbers-mode" data-highlighter="shiki" data-ext="" data-title="" 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>&lt;ds-tag size=&quot;small&quot;&gt;small&lt;/ds-tag&gt;</span></span>
<span class="line"><span>&lt;ds-tag size=&quot;base&quot;&gt;base&lt;/ds-tag&gt;</span></span>
<span class="line"><span>&lt;ds-tag size=&quot;large&quot;&gt;large&lt;/ds-tag&gt;</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="variations" tabindex="-1"><a class="header-anchor" href="#variations"><span>Variations</span></a></h2><p>Use a round tag to present small numbers.</p><div class="language- line-numbers-mode" data-highlighter="shiki" data-ext="" data-title="" 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>&lt;ds-tag color=&quot;primary&quot; round&gt;7&lt;/ds-tag&gt;</span></span>
<span class="line"><span>&lt;ds-tag color=&quot;primary&quot; round&gt;42&lt;/ds-tag&gt;</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></div>`,9)]))}const g=a(n,[["render",l],["__file","demo.html.vue"]]),c=JSON.parse('{"path":"/styleguide/src/system/components/typography/Tag/demo.html","title":"","lang":"en-US","frontmatter":{},"headers":[{"level":2,"title":"Tag colors","slug":"tag-colors","link":"#tag-colors","children":[]},{"level":2,"title":"Tag sizes","slug":"tag-sizes","link":"#tag-sizes","children":[]},{"level":2,"title":"Variations","slug":"variations","link":"#variations","children":[]}],"git":{"createdTime":1775388691000,"updatedTime":1775388691000,"contributors":[{"name":"dependabot[bot]","email":"49699333+dependabot[bot]@users.noreply.github.com","commits":1}]},"readingTime":{"minutes":0.36,"words":108},"filePathRelative":"styleguide/src/system/components/typography/Tag/demo.md","localizedDate":"April 5, 2026","excerpt":"<h2>Tag colors</h2>\\n<p>Use different colors to emphasize or provide meaning.</p>\\n<div class=\\"language- line-numbers-mode\\" data-highlighter=\\"shiki\\" data-ext=\\"\\" data-title=\\"\\" 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>&lt;ds-tag&gt;medium&lt;/ds-tag&gt;</span></span>\\n<span class=\\"line\\"><span>&lt;ds-tag color=\\"inverse\\"&gt;inverse&lt;/ds-tag&gt;</span></span>\\n<span class=\\"line\\"><span>&lt;ds-tag color=\\"primary\\"&gt;primary&lt;/ds-tag&gt;</span></span>\\n<span class=\\"line\\"><span>&lt;ds-tag color=\\"success\\"&gt;success&lt;/ds-tag&gt;</span></span>\\n<span class=\\"line\\"><span>&lt;ds-tag color=\\"warning\\"&gt;warning&lt;/ds-tag&gt;</span></span>\\n<span class=\\"line\\"><span>&lt;ds-tag color=\\"danger\\"&gt;danger&lt;/ds-tag&gt;</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 class=\\"line-number\\"></div><div class=\\"line-number\\"></div></div></div>"}');export{g as comp,c as data};