TLDR; how can I use @layer with createTheme?

[olivierpascal]

TLDR; how can I use @layer with createTheme?

Hello, I am using vanilla extract and sprinkles, and I really appreciate both.

When we use sprinkles, we usually want that sprinkles styles have a higher priority than base styles. So we use CSS layers, which is well supported by style() and defineProperties().

Problems start when we use theme vars inside sprinkles. createTheme() does not support layer. So theme vars always have a higher priority than any layer.

What I would like is being able to provide a CSS layer to createTheme() so that the CSS class is created inside that layer.

Thanks!

[olivierpascal]

Hello 🥺

[askoufis]

Unfortunately you can't do this with the current createTheme API. You can define a global theme inside a layer, though that may not suit your use case:

import { layer, createGlobalTheme } from "@vanilla-extract/css";

export const app = layer("app");

export const vars = createGlobalTheme(`@layer ${app}`, {
  color: {
    brand: "blue",
  },
  font: {
    body: "arial",
  },
});

I'm struggling to think of a nice API to define a theme within a layer without a breaking change. Will have to get back to you on this one.

[olivierpascal]

Hugh. Thank you so much

[olivierpascal]

Hello @askoufis, by any chance, did you find that nice API yet? 🙏🏼

[olivierpascal]

Hello, may I ask if we can use @layer with createTheme() yet or if this is planned soon? This is for me the missing part of the sprinkles. Many thanks 🙏🏼

[askoufis]

Sorry for the delayed response. I think a special @layer key inside createTheme would be the way to go. This is consistent with how sprinkles are assigned to layers too.

I didn't realize this in my original response to your questio, but you can manually create a theme inside a layer using a combination of style, layer, createThemeContract and assignVars:

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

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

const themeLayer = layer("theme");

export const themeInLayer = style({
  "@layer": {
    [themeLayer]: {
      vars: assignVars(vars, {
        colors: {
          primary: "red",
          secondary: "blue",
        },
        space: {
          small: "10px",
          large: "20px",
        },
      }),
    },
  },
});