Global css vars

[rtkaaho]

Hi Friends,

Loving VE right now. Just been playing around with it over the weekend and considering a migration to it from css modules in our design system. One issue I am finding is that there is no way to create global css vars with a specific name.

Suppose I am defining dark/light themes in an application using the following selector:

html[data-theme-mode="light"]

Currently we are using style-dictionary to generate css vars that have a particular name, for example:

html[data-theme-mode="light"] {
 --brand-blue-primary-base: #23618E
}

Other applications are using these variables to drive specific styles that are unrelated to components in the design system. So in order for me to not break those styles, I want to be able to define global css vars in vanilla extract that are a custom name that doesnt get hashed.

Is this possible? From what I can see createVar doesnt allow me to pass a custom var name.

[daryawood]

Seems like you can use globalStyle. For example:

globalStyle(':root', {
  vars: {
    '--brand-blue-primary-base': '#23618E',
  }
});

globalStyle('*', {
  boxSizing: 'border-box',
});

For switching variables I'd suggest:

globalStyle('html[data-theme-mode="light"]', {
   vars: {
    '--brand-blue-primary-base': 'blue',
  }
});

[rtkaaho]

This does work. But I was hoping there would be something included in the createGlobalTheme api because that also allows us to utilize typescript when consuming the variables.

[daryawood]

I have an object with global variables and a helper for doing it :)

const globalVariableNames = {
  background: '--background',
  textColor: '--text-color'
}

globalStyle(':root', {
  vars: {
    [globalVariableNames.textColor]: 'gray',
  }
});

// helper
const getVar = (variableName: keyof typeof globalVariableNames): string => {
  return `var(${globalVariableNames[variableName]})`;
};

// usage
const text = style({
  color: getVar('textColor'),
})

[mattcompiles]

If you don't want hashed variables you could build your own abstraction to achieve this. All the createVar API does is return a hashed identifier, disabling hashing would make it completely pointless. The var isn't actually added to the CSS until you consuming it within a style.