@educabot/styles
v0.5.7
Published
<p align="center"> <img style="border-radius:8px" width="200" src="https://pbs.twimg.com/ext_tw_video_thumb/1299738248999309312/pu/img/f103bAbHeEFHhJLO.jpg:large" /> </p>
Downloads
6
Readme
Educabot styles library
The Educabot Styles Library is a utility library designed to streamline and standardize the management of styles in all applications across the Educabot organization. This library allows you to create consistent and maintainable styles while ensuring a unified theme is applied globally.
✨ Features
- Same Language: All team developers understand and follow the same rules and methodologies.
- Enhanced Developer Experience (DX): Fully typed and easy to learn.
- Global Theming: Easily set and manage a global theme for your applications.
- Reusable Styles: Define and reuse styles consistently across educabot projects.
- JS in CSS: Write your styles using TypeScript, following the same pattern in all applications.
📦 Installation
npm install @educabot/styles
Usage
- Setting Up the Global Theme In your application's entry point, set up the global theme using ThemeProvider provided:
import { ThemeProvider, defaultTheme } from '@educabot/styles'
ReactDOM.render(
<ThemeProvider theme={createTheme(defaultTheme)}>
<App />
</ThemeProvider>,
document.getElementById('root')
)
- Stylized componente using makeStyles function. In your components, you can use the makeStyles function to define and apply styles based on the global theme:
import { makeStyles } from '@educabot/styles'
const useStyles = makeStyles((theme) => ({
button: {
border: 0
padding: theme.spacing(2, 2, 4, 4),
background: theme.palette.primary.main,
},
}))
const Button = () => {
const styles = useStyles()
return <button className={styles.button}>Continue</button>
}
- Stylized componente using useTheme hook.
import { useTheme } from '@educabot/styles'
const Text = () => {
const theme = useTheme()
return <span style={{ color: theme.palette.primary.main }}>Yay!</span>
}
- Combine multiple styles.
import { cx, makeStyles } from '@educabot/styles'
const useStyles = makeStyles((theme) => ({
text: {
color: theme.palette.primary.main,
},
textBorder: {
color: theme.palette.secondary.main,
},
}))
const Text = () => {
const styles = useStyles()
const [selected, setSelected] = useState(false)
return <span className={cx(styles.text, styles.textBorder)}>Yay!</span>
}
- Use Fonts and CSS Typography. Include fonts in the project
import '@educabot/styles/dist/styles/fonts.css'