Ocelot-Social/assets/DesignTokens.html-BrW2H39B.js

import{_ as t}from"./plugin-vue_export-helper-DlAUqK2U.js";import{c as a,a as i,e as n,o,r}from"./app-BBCRiIXu.js";const l={};function d(c,e){const s=r("design-tokens");return o(),a("div",null,[e[0]||(e[0]=i('<p>Design tokens are the visual design atoms of the design system — specifically, they are named entities that store visual design attributes. We use them in place of hard-coded values (such as hex values for color or pixel values for spacing) in order to maintain a scalable and consistent visual system for UI development.</p><p>You can use tokens as SCSS variables or import them in your JS:</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>import { tokens } from &#39;system&#39;</span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div></div></div>',3)),n(s)])}const h=t(l,[["render",d],["__file","DesignTokens.html.vue"]]),p=JSON.parse('{"path":"/styleguide/src/styleguide/docs/DesignTokens.html","title":"","lang":"en-US","frontmatter":{},"headers":[],"git":{"createdTime":1768847780000,"updatedTime":1768847780000,"contributors":[{"name":"Ulf Gebhardt","email":"ulf.gebhardt@webcraft-media.de","commits":1}]},"readingTime":{"minutes":0.25,"words":74},"filePathRelative":"styleguide/src/styleguide/docs/DesignTokens.md","localizedDate":"January 19, 2026","excerpt":"<p>Design tokens are the visual design atoms of the design system — specifically, they are named entities that store visual design attributes. We use them in place of hard-coded values (such as hex values for color or pixel values for spacing) in order to maintain a scalable and consistent visual system for UI development.</p>"}');export{h as comp,p as data};