Responsive styles on global theme

[elliotschultz]

Hi there, really loving this library.

I'm trying to create a responsive theme and the example provided to demonstrate assignVars is exactly what I'm looking for.

(For quick reference, this is it:)

import { createThemeContract, style, assignVars } from '@vanilla-extract/css';

export const vars = createThemeContract({
  space: {
    small: null,
    medium: null,
    large: null
  }
});

export const responsiveSpaceTheme = style({
  vars: assignVars(vars.space, {
    small: '4px',
    medium: '8px',
    large: '16px'
  }),
  '@media': {
    'screen and (min-width: 1024px)': {
      vars: assignVars(vars.space, {
        small: '8px',
        medium: '16px',
        large: '32px'
      })
    }
  }
});

My question is: is it possible to have the same behaviour but target the :root element?

Essentially the goal is to have a globally scoped, responsive theme. I've been playing around a little with createGlobalTheme but I can't quite figure it out.

[mattcompiles]

The following should work.

globalStyle(':root', {
  vars: assignVars(vars.space, {
    small: '4px',
    medium: '8px',
    large: '16px'
  }),
  '@media': {
    'screen and (min-width: 1024px)': {
      vars: assignVars(vars.space, {
        small: '8px',
        medium: '16px',
        large: '32px'
      })
    }
  }
});

[elliotschultz]

Thanks Matt, worked a charm!

This is exactly what I was looking for.