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/SCSS/Tokens`}),`
`,(0,c.jsx)(t.h1,{id:`scss-tokens`,children:`SCSS: Tokens`}),`
`,(0,c.jsxs)(`details`,{style:{marginBlock:`24px`},children:[(0,c.jsx)(`summary`,{children:`🚧 SCSS Support is experimental 🚧`}),(0,c.jsx)(t.p,{children:`SCSS support was introduced due to the lack of support for LESS in the Next.js app router.`}),(0,c.jsx)(t.p,{children:`Please avoid using it for other purposes, as the API may change or be removed in the future.`})]}),`
`,(0,c.jsxs)(t.p,{children:[`You can import the tokens directly from `,(0,c.jsx)(t.code,{children:`@preply/ds-web-core`}),`:`]}),`
`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-css`,children:`@use '@preply/ds-web-core/dist/generated/tokens' as *;

.MyComponent {
    color: $action-variant-primary-color;
    background-color: $action-variant-primary-bgColor;
    border-radius: $action-base-borderRadius;
}
`})}),`
`,(0,c.jsxs)(t.p,{children:[`This file declares one `,(0,c.jsx)(t.code,{children:`$variable`}),` per token, that simply points to the CSS var `,(0,c.jsx)(t.code,{children:`var(--12345)`}),`.`]}),`
`,(0,c.jsxs)(t.p,{children:[`Note that the actual value depends on the parent `,(0,c.jsx)(t.a,{href:`/story/api-ds-web-core-providers-themeprovider--page`,children:`ThemeProvider`}),` and `,(0,c.jsx)(t.a,{href:`/story/api-ds-web-core-providers-colorschemeprovider--page`,children:`ColorSchemeProvider`}),`.`]}),`
`,(0,c.jsxs)(t.p,{children:[`Use the `,(0,c.jsx)(t.a,{href:`/story/guides-token-explorer--page`,children:`Token Explorer`}),` to search tokens by name, id, or value
(make sure you have the correct theme selected).`]})]})}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};