Chroma is an open source design system from the team at LifeOmic. It is built with React and TypeScript. The goal of Chroma is to provide design-approved components to developers to speed up their development process and build visual consistency throughout web applications.
View our StorybookTo get started with Chroma, follow these steps:
-
Install dependencies
yarn add @lifeomic/chroma-react @material-ui/styles react-router-dom
Chroma leverages
@material-ui/stylesfor CSS-in-JS andreact-router-domfor link-related components. -
Wrap your application with the
StyledEngineProviderandThemeProviderprovided by Chroma.import { StyledEngineProvider, ThemeProvider, } from '@lifeomic/chroma-react/styles'; function App({ children }) { return ( <StyledEngineProvider injectFirst> <ThemeProvider theme={theme}>{children}</ThemeProvider> </StyledEngineProvider> ); }
-
Start using components!
import { Button } from '@lifeomic/chroma-react/components/Button'; <Button variant="contained">Button</Button>;
-
Add jest config (optional)
To include the jest configuration setup, add the following:
setupFilesAfterEnv: ['@lifeomic/chroma-react/jest'];
Note: Some components may require support for CSS imports (e.g.
import 'some-module/styles.css). All major bundlers can support this behavior (example: webpack's css-loader).
Want to override the default theme of Chroma? No problem!
-
Create your component-level overrides and palette overrides. Chroma leverages Material-UI's global theme variation to override specific component styles.
// theme.ts import { createPalette, createTheme, Theme, } from '@lifeomic/chroma-react/styles'; import { Overrides } from '@lifeomic/chroma-react/styles/overrides'; // The overrides specified here will be *global* component overrides! export const overrides = (theme: Theme): Overrides => ({ ChromButton: { root: { background: 'red', }, outlined: { border: '1px solid red', }, }, }); export const palette = createPalette({ primary: { main: '#02bff1', }, }); export const theme = createTheme({ overrides, palette, });
-
Update your theme provider.
import { ThemeProvider } from '@lifeomic/chroma-react/styles'; import { theme } from './theme'; function App({ children }) { return ( <StyledEngineProvider injectFirst> <ThemeProvider theme={theme}>{children}</ThemeProvider> </StyledEngineProvider> ); }
Need to build a custom component, but want to use the styles hook of an existing Chroma component?
import { useStyles } from '@lifeomic/chroma-react/components/Button/Button';
const CustomButton = ({}) => {
const classes = useStyles({});
return <button className={classes.root}>Custom Button</button>;
};First you'll need to install the dependencies for the repository.
yarnTo run the Storybook for Chroma, run the following command.
yarn startAfter some time, the Storybook will open. Any local changes made will be reflected in Storybook.
To run the build for the repository, run the following command.
yarn buildThis will generate an output in the dist/ directory.
Sometimes linking your local changes is helpful when developing new features or bug fixes. To do so, run the following commands.
yarn build # Run a build so your changes are included
cd dist # You must link from the `dist` directory; otherwise, this will not work
yarn linkNow you can navigate to your application and run the following command.
yarn link @lifeomic/chroma-reactAfter running the above command, your local version of Chroma is now linked and all changes locally should reflect in your application.
yarn link not working? You may want to try yalc.
First you need to global install yalc with: yarn global add yalc.
In your local version of Chroma:
yarn build # Run a build so your changes are included
cd dist # You must link from the `dist` directory; otherwise, this will not work
yalc publishIn your application, run the following:
yalc add @lifeomic/[email protected]
yarn install
yarn startAt the time of this writing, yalc update was not working properly so anytime you make changes in Chroma (after already linking) you'll need to repeat the steps above.
![dependabot[bot] avatar](https://avatars.githubusercontent.com/in/29110?v=4 "dependabot[bot]")
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent