New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Trousers v4 - An idea #83
Labels
🚧 in progress
This issue is currently in development
Projects
Comments
Complete example: /** @jsx jsx */
import css from '@trousers/core';
import jsx from '@trousers/react';
import createTheme from '@trousers/theme';
const theme = createTheme({
default: 'blue,
primary: 'red',
});
const styles = css('button', `
background-color: var(--theme-default);
`)
.modifier('primary')`
background-color: var(--theme-primary);
`;
const Button = props => {
return <button
css={styles}
primary={props.primary}
theme={theme}
>
{props.children}
</button>;
};
export default Button; |
Precursor integration notes:
|
Could the macro support this?
It could, potentially with an additive API. |
Macro dynamic interpolation edge case:
|
Open
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Improvements ✅
Challenges ❌
Themes should now be mounted as classnames of css vars. Rather than depending on costly react context, we'll apply themes via a classname and css vars. The themes will be mounted to the head just like any other style.
For example:
is mounted as:
which is applied to a button like so:
The text was updated successfully, but these errors were encountered: