import{n as e}from"./chunk-BneVvdWh.js";import{t}from"./jsx-runtime-C2wGStra.js";import{l as n,o as r}from"./iframe-D-oZzXNK.js";import{r as i}from"./react-B8jdHdWa.js";import{t as a}from"./mdx-react-shim-8vvjMMnP.js";function o(e){let t={a:`a`,code:`code`,h1:`h1`,p:`p`,pre:`pre`,...i(),...e.components};return(0,c.jsxs)(c.Fragment,{children:[(0,c.jsx)(r,{title:`Guides/Custom Components/StyledComponents/Tokens`}),`
`,(0,c.jsx)(t.h1,{id:`styledcomponents-tokens`,children:`StyledComponents: Tokens`}),`
`,(0,c.jsxs)(t.p,{children:[`The `,(0,c.jsx)(t.a,{href:`/docs/utilities-gettokenvar--docs`,children:`getTokenVar`}),` utility gives you access to design tokens:`]}),`
`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-tsx`,children:`import styled from 'styled-components';
import { action, root } from '@preply/ds-core';
import { getTokenVar as t } from '@preply/ds-web-core';

export const MyComponent = styled.div\`
    padding: \${t(root.space[padding])};
    color: \${t(action.variant.primary.color)};
    background-color: \${t(action.variant.primary.bgColor)};
    border-radius: \${t(action.base.borderRadius)};
\`;
`})}),`
`,(0,c.jsxs)(t.p,{children:[`This function actually returns the CSS variable for a token—eg. `,(0,c.jsx)(t.code,{children:`var(--12345)`}),`.`]})]})}function s(e={}){let{wrapper:t}={...i(),...e.components};return t?(0,c.jsx)(t,{...e,children:(0,c.jsx)(o,{...e})}):o(e)}var c;e((()=>{c=t(),a(),n()}))();export{s as default};