It can combine with CSS-in-JS?

[kacMadushan]

Open Props is super awesome and CSS variables easy to manage styling and useful. but my issues is it can combine with any CSS-in-JS libraries ?

[argyleink]

you can! the props are also importable from javascript for use as static values within css-in-js

import OpenProps from 'open-props';

console.log(OpenProps.size3);
console.log(OpenProps.gradient5);
console.log(OpenProps['--size-3']);

you could also import the props globally in a main CSS file, then use them in your css-in-js as css variables

[kacMadushan]

Yah it's so cool

`import { createGlobalStyle } from 'styled-components'; import Colors from 'open-props/src/colors'; import Fonts from 'open-props/src/fonts'

export const GlobalStyles = createGlobalStyle body { background-color: ${Colors['--gray-9']}; color: ${Colors['--gray-0']}; font-size: ${Fonts['--font-size-3']}; } ;`

thanks argyleink

[argyleink]

here's a demo / starter I made that uses the props from JS in vanilla extract https://twitter.com/argyleink/status/1559408336851742720?s=20&t=hU2CGIgXVb6RlSfDm_jfdw

i'm going to close this now as i think we resolved your question?