@patreon/studio/module/utilities/breakpoints.js

Patreon Studio Design System

import { breakpoints } from './breakpoint-definitions';
/**
 * This helper function makes it easy to generate media queries at specific breakpoints.
 * It is intended to be used inside of styled components.
 *
 * @example
 * // Create a div with responsive padding
 * const MyBox = styled.div`
 *    width: auto;
 *    margin: 0 16px;
 *
 *    @media ${mediaForBreakpoint('sm')} {
 *      max-width: 524px;
 *      margin: 0 40px;
 *    }
 * `;
 */
export function mediaForBreakpoint(breakpoint) {
    return `(min-width: ${breakpoints[breakpoint]}rem)`;
}
//# sourceMappingURL=breakpoints.js.map