Replies: 1 comment 2 replies
-
Hey Bud 👋
The following should work. export const [themeClass, themeVars] = createTheme({
borderColor: palette.trueGray900,
borderColorFocus: palette.blue700,
borderColorInvalid: palette.redError,
borderFocusColorInvalid: palette.blue700,
borderWidth: '2px',
bfFocus: palette.blue100,
bgInvalid: palette.redError,
});
export const input = style({
border: `${themeVars.borderWidth} solid ${themeVars.borderColor}`,
selectors: {
':focus': {
background: themeVars.bfFocus,
},
'.invalid': {
background: themeVars.bgInvalid,
borderColor: themeVars.borderColorInvalid,
},
'.invalid &:focus': {
borderColor: themeVars.borderColorFocus,
},
},
}); Then to create a different version of the theme you can do the following. export const altThemeClass = createTheme(themeVars, {
borderColor: palette2.trueGray900,
borderColorFocus: palette2.blue700,
borderColorInvalid: palette2.redError,
borderFocusColorInvalid: palette2.blue700,
borderWidth: '5px',
bfFocus: palette2.blue100,
bgInvalid: palette2.redError,
}); Passing existing vars to |
Beta Was this translation helpful? Give feedback.
2 replies
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
-
@Vanilla-Extract looks really awesome so major props for this.
I am confused about
createThemeContract
or how I can achieve the goal of creating a component library as a 3rd party npm package that others can then change the styling at the component level. If we take the example of an input, I might have ainput.css.ts
file like this:I don't know how I can use the
inputVars
returned fromcreateTheme
because if I supply 2 arguments tocreateTheme
then it returns a string, according to the type definitionAlso how can consumers of the package then change the theme to their needs?
Beta Was this translation helpful? Give feedback.
All reactions