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`,h2:`h2`,p:`p`,pre:`pre`,strong:`strong`,...i(),...e.components};return(0,c.jsxs)(c.Fragment,{children:[(0,c.jsx)(r,{title:`Guides/Custom Components/StyledComponents/Intro`}),`
`,(0,c.jsx)(t.h1,{id:`developing-custom-components-with-styledcomponents`,children:`Developing custom components with StyledComponents`}),`
`,(0,c.jsxs)(t.p,{children:[`Make sure you read `,(0,c.jsx)(t.a,{href:`/story/guides-custom-components-introduction--page`,children:`Guide: Developing custom components with DS primitives`})]}),`
`,(0,c.jsx)(t.h2,{id:`guidelines`,children:`Guidelines`}),`
`,(0,c.jsxs)(t.p,{children:[(0,c.jsx)(t.strong,{children:`Do:`}),` Use `,(0,c.jsx)(t.code,{children:`minWidth`}),` responsive mixin (`,(0,c.jsx)(t.a,{href:`/story/guides-custom-components-styledcomponents-responsive--page`,children:`Read more`}),`).`]}),`
`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-tsx`,children:`import { minWidth } from '@preply/ds-web-core';

export const MyStyledComponentWithBreakpoints = styled.div\`
    \${minWidth('medium-l')} {
        ...
    }
\`;
`})}),`
`,(0,c.jsxs)(t.p,{children:[(0,c.jsx)(t.strong,{children:`Do:`}),` Use token variables via `,(0,c.jsx)(t.code,{children:`getTokenVar()`}),` (`,(0,c.jsx)(t.a,{href:`/story/guides-custom-components-styledcomponents-tokens--page`,children:`Read more`}),`).`]}),`
`,(0,c.jsxs)(t.p,{children:[`If you're working with a designer you can see `,(0,c.jsx)(t.a,{href:`/story/quickstart-for-engineers--page#reading-figma-files`,children:`references to tokens`}),`
in their Figma files. 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).`]}),`
`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-css`,children:`@import '@preply/ds-web-core/dist/generated/tokens.less';
`})}),`
`,(0,c.jsxs)(t.p,{children:[(0,c.jsx)(t.strong,{children:`Don't`}),`: Use `,(0,c.jsx)(t.code,{children:`max-width`}),` breakpoints`]}),`
`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-css`,children:`@media (max-width: @breakpoints[medium-l]) {
    /* ... */
}
`})}),`
`,(0,c.jsxs)(t.p,{children:[(0,c.jsx)(t.strong,{children:`Don't`}),`: Use `,(0,c.jsx)(t.code,{children:`@preply/ui`}),` breakpoints or variables.`]}),`
`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-css`,children:`border-radius: @border-radius-m;

@media (min-width: @responsive-mobile-normal) {
    /* ... */
}
`})})]})}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};