Responsive utilities styled components

responsive.ts

import { CSSObject } from "styled-components"

export type BreakPointStyles<B> = { [K in keyof B]: CSSObject }

const breakpoints = {
  sm: "768px",
  md: "992px",
}

const responsive = (styles: BreakPointStyles<typeof breakpoints>) => {
  const output: CSSObject = {}

  Object.keys(styles).forEach(breakpoint => {
    output[
      `@media (min-width: ${(breakpoints as any)[breakpoint]})`
    ] = (styles as any)[breakpoint]
  })

  return output
}

const mixins = {
  responsive,
}

const colors = {
  primary: "yellow",
}

export const theme = {
  colors,
  mixins,
}



// Usage:
// const StyledPreviewDateContainer = styled.div(({ theme }) => ({
//   color: '#000',
//   display: "flex",
//   ...theme.mixins.responsive({
//     sm: {
//       margin: "0 0 0 1rem"
//     }
//   })
// }));