Theming
Twigs ships with maximum flexibility to customize the look and feel of your application.
Once you wrap your application inside ThemeProvider, you will have access to theme object which can be used to modify the colors and other aspects of the components.
Default theme object
Below is the complete default theme object
Using theme variables
You can consume thene variables in your components using $ before the variable name. Below is an example on how to use theme variables in your components.
import { Button } from '@sparrowengg/twigs-react';
<Button
css={{
backgroundColor: '$primary100',
color: '$white900',
borderRadius: '$pill',
width: '200px',
padding: '$6 $10',
cursor: 'pointer',
fontSize: '$md',
'&:hover': {
backgroundColor: '$primary200'
},
'&:active': {
backgroundColor: '$primary900'
}
}}
> Submit </Button>
Colors
Font size
Font weights
Line heights
Border width
Radius
Spacing
Size
Customize component style
Twigs exposes an prop css which can be used to pass your own styles to modify the components.
You can pass your theme variables in css attributes to css object. Below is an example on how to use that. In order to use your primary100 as background color, use a $ before the theme variable. Example below,
<Button
css={{
backgroundColor: '$primary100'
}}>
Submit
</Button>
Below is an example which modifies our primary button using custom css and theme variables.
<Button
css={{
backgroundColor: '$positive500',
color: '$white900',
borderRadius: '$pill',
width: '200px',
padding: '$6 $10',
cursor: 'pointer',
fontSize: '$md',
'&:hover': {
backgroundColor: '$positive600'
},
'&:active': {
backgroundColor: '$positive900'
}
}}>
Submit
</Button>
Output
Customize theme
The recommended way to customize the theme is to create a twigs.config.js file in the root of your project and then using that in the ThemeProvider. Below is an example on how you can customize the theme.
export default {
theme: {
extends: {
colors: {
primary: "#2E666D",
secondary: "#363A43",
},
fontSizes: {
xxs: "0.5rem",
xs: "0.7rem",
sm: "0.85rem",
md: "1rem",
lg: "1.2rem",
xl: "1.44rem",
"2xl": "2rem",
"3xl": "2.5rem",
"4xl": "3.6rem",
"5xl": "5rem",
},
}
}
};
import { theme } from '@root/twigs.config.js';
<ThemeProvider theme={theme.extends}>
<App>
</ThemeProvider>
You can always directly pass the theme object to the ThemeProvider as well, however, it is recommended to use a separate file as it will be helpful in providing better VSCode intellisense support if you are using our VSCode plugin.