Customisable/Themeable Breakpoints

[Conviley]

Feature Description

I'm working on a component library that provides a base configuration including e.g. theme and media. Via createTheme i'm able to allow consumers of the library to create their own theme, but i have found no way to allow them to do the same for the breakpoints defined in media.

Suggested Solution

• Allow modification of media values with createTheme
• Add createMedia that would work the same way as createTheme but allow setting of values of the media breakpoints

Additional context

I'm okay with the fact that the shape of the theme and media needs to be the same as the one defined in the base configuration. This is probably even a good thing as it provides a predictable way for the components to rely on the theme should they need to.

[ivanbanov]

It may sound crazy but it is already possible, it's a bit hacky buuut anyway, stitches config is mutable and you can change it before starting the app consuming your components

import type { ConfigType } from '@stitches/react/types/config'

import { config } from './stitches'

export function setMedia<Media extends {} = {}>(
  media: ConfigType.Media<Media>
): void {
  config.media = {
    ...config.media,
    ...media,
  }
}

export function setStyleUtils<Utils extends {} = {}>(
  utils: ConfigType.Utils<Utils>
): void {
  config.utils = {
    ...config.utils,
    ...utils,
  }
}

In your app

import { setMedia } from 'your-stitches-package'

setMedia({
  bp1: "(min-width: 500px)",
  bp2: "(min-width: 1000px)",
})

const Component = styled('div', {
  variants: {
    foo: {
      true: {
        color: 'red'
      }
    }
  }
})

function App() {
  return (
    <Component foo={{
      '@bp1': true,
      '@bp2': false,
    }} />
  )
} 

Yeah I know, TS wont offer these new medias in the autocomplete, but at least it wont fail when typecheking 😅 For sure it's just a workaround, hopefully we will get something from the lib itself