Ocelot-Social/assets/index.html-CIdfEOK6.js

import{_ as i}from"./plugin-vue_export-helper-DlAUqK2U.js";import{c as a,a as s,o as n}from"./app-BBCRiIXu.js";const l="/assets/customize-a-KtvxVU.png",t={};function r(d,e){return n(),a("div",null,e[0]||(e[0]=[s('<h1 id="human-connection-styleguide" tabindex="-1"><a class="header-anchor" href="#human-connection-styleguide"><span>Human-Connection Styleguide</span></a></h1><p><a href="https://travis-ci.com/Human-Connection/Nitro-Styleguide" target="_blank" rel="noopener noreferrer"><img src="https://img.shields.io/travis/com/Human-Connection/Nitro-Styleguide/master.svg" alt="Build Status" loading="lazy"></a><a href="https://www.npmjs.com/package/@human-connection/styleguide" target="_blank" rel="noopener noreferrer"><img src="https://img.shields.io/npm/v/@human-connection/styleguide.svg" alt="npm" loading="lazy"></a></p><p>CION is a Design System build primary for Vue applications. You can use it as a starting point for building your own Design System.</p><p>The system utilizes design tokens, a living styleguide with integrated code playgrounds and reusable components for common UI tasks.</p><p>Living styleguide demo: https://styleguide.human-connection.org</p><p>Landing page demo: https://cion.visualjerk.de</p><p>Integrate it in your application: <a href="https://github.com/visualjerk/vue-cion-design-system/wiki/Quick-Start" target="_blank" rel="noopener noreferrer">Quick Start</a></p><figure><a href="https://github.com/visualjerk/vue-cion-design-system/raw/master/preview/customize.png" target="_blank" rel="noopener noreferrer"><img src="'+l+'" alt="Screenshot" tabindex="0" loading="lazy"></a><figcaption>Screenshot</figcaption></figure><h2 id="project-setup" tabindex="-1"><a class="header-anchor" href="#project-setup"><span>Project setup</span></a></h2><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>yarn install</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="developing" tabindex="-1"><a class="header-anchor" href="#developing"><span>Developing</span></a></h2><p>Compiles and hot-reloads living styleguide</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>yarn dev</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="building" tabindex="-1"><a class="header-anchor" href="#building"><span>Building</span></a></h2><h3 id="living-styleguide" tabindex="-1"><a class="header-anchor" href="#living-styleguide"><span>Living styleguide</span></a></h3><p>Compiles living styleguide to <code>./docs</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>yarn build</span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div></div></div><h3 id="library" tabindex="-1"><a class="header-anchor" href="#library"><span>Library</span></a></h3><p>Compiles design system as a library to <code>./dist</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>yarn build:lib</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="helper" tabindex="-1"><a class="header-anchor" href="#helper"><span>Helper</span></a></h2><h3 id="serve-living-styleguide-locally" tabindex="-1"><a class="header-anchor" href="#serve-living-styleguide-locally"><span>Serve living styleguide locally</span></a></h3><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>yarn serve</span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div></div></div><h3 id="lints-and-fixes-files" tabindex="-1"><a class="header-anchor" href="#lints-and-fixes-files"><span>Lints and fixes files</span></a></h3><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>yarn lint</span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div></div></div>',25)]))}const c=i(t,[["render",r],["__file","index.html.vue"]]),g=JSON.parse('{"path":"/styleguide/","title":"Human-Connection Styleguide","lang":"en-US","frontmatter":{},"headers":[{"level":2,"title":"Project setup","slug":"project-setup","link":"#project-setup","children":[]},{"level":2,"title":"Developing","slug":"developing","link":"#developing","children":[]},{"level":2,"title":"Building","slug":"building","link":"#building","children":[{"level":3,"title":"Living styleguide","slug":"living-styleguide","link":"#living-styleguide","children":[]},{"level":3,"title":"Library","slug":"library","link":"#library","children":[]}]},{"level":2,"title":"Helper","slug":"helper","link":"#helper","children":[{"level":3,"title":"Serve living styleguide locally","slug":"serve-living-styleguide-locally","link":"#serve-living-styleguide-locally","children":[]},{"level":3,"title":"Lints and fixes files","slug":"lints-and-fixes-files","link":"#lints-and-fixes-files","children":[]}]}],"git":{"createdTime":1768847780000,"updatedTime":1768847780000,"contributors":[{"name":"Ulf Gebhardt","email":"ulf.gebhardt@webcraft-media.de","commits":1}]},"readingTime":{"minutes":0.48,"words":143},"filePathRelative":"styleguide/README.md","localizedDate":"January 19, 2026","excerpt":"\\n<p><a href=\\"https://travis-ci.com/Human-Connection/Nitro-Styleguide\\" target=\\"_blank\\" rel=\\"noopener noreferrer\\"><img src=\\"https://img.shields.io/travis/com/Human-Connection/Nitro-Styleguide/master.svg\\" alt=\\"Build Status\\" loading=\\"lazy\\"></a>\\n<a href=\\"https://www.npmjs.com/package/@human-connection/styleguide\\" target=\\"_blank\\" rel=\\"noopener noreferrer\\"><img src=\\"https://img.shields.io/npm/v/@human-connection/styleguide.svg\\" alt=\\"npm\\" loading=\\"lazy\\"></a></p>"}');export{c as comp,g as data};