Skip to content

Chroma React

Source location - lifeomic/chroma-react

Chroma logo


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 Storybook

Usage

To get started with Chroma, follow these steps:

  1. Install dependencies

    yarn add @lifeomic/chroma-react @material-ui/styles react-router-dom
    

    Chroma leverages @material-ui/styles for CSS-in-JS and react-router-dom for link-related components.

  2. Wrap your application with the ThemeProvider provided by Chroma.

    import { ThemeProvider } from '@lifeomic/chroma-react/styles';
    
    function App({ children }) {
        return <ThemeProvider>{children}</ThemeProvider>;
    }
    
  3. Start using components!

    import { Button } from '@lifeomic/chroma-react/components/Button';
    
    <Button variant="contained">Button</Button>;
    
  4. 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).

Theming

Want to override the default theme of Chroma? No problem!

  1. 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,
    });
    
  2. Update your theme provider.

    import { ThemeProvider } from '@lifeomic/chroma-react/styles';
    import { theme } from './theme';
    
    function App({ children }) {
        return <ThemeProvider theme={theme}>{children}</ThemeProvider>;
    }
    

Importing Component Styles Only?

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>;
};

Development

Getting Started

First you'll need to install the dependencies for the repository.

yarn

Running Storybook

To run the Storybook for Chroma, run the following command.

yarn start

After some time, the Storybook will open. Any local changes made will be reflected in Storybook.

Build

To run the build for the repository, run the following command.

yarn build

This will generate an output in the dist/ directory.

Linking

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 link

Now you can navigate to your application and run the following command.

yarn link @lifeomic/chroma-react

After running the above command, your local version of Chroma is now linked and all changes locally should reflect in your application.


Last update: 2022-05-19
Created: 2022-05-19