6.1.0 • Published 10 months ago

@lifeomic/chroma-react v6.1.0

Weekly downloads
1,801
License
MIT
Repository
github
Last release
10 months ago

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.

Usage

To get started with Chroma, follow these steps:

  1. Install dependencies
yarn add @lifeomic/chroma @material-ui/styles react-router-dom

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

  1. Wrap your application with the ThemeProvider provided by Chroma.
import { ThemeProvider } from '@lifeomic/chroma-react/styles';

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

<Button variant="contained">Button</Button>;

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 { createTheme } from '@lifeomic/chroma-react/styles';
import { Overrides } from '@lifeomic/chroma-react/styles/overrides';
import { Theme } from '@lifeomic/chroma-react/styles';
import { createPalette } from '@lifeomic/chroma-react/styles';

// 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,
});
  1. Update your theme provider.
import { ThemeProvider } from '@lifeomic/chroma-react/styles';
import { theme } from './theme';

function App({ children }) {
  return <ThemeProvider theme={theme}>{children}</ThemeProvider>;
}
@emotion/react@emotion/styled@mui/material@mui/styles@radix-ui/react-sliderclsxdeepmergefocus-visibleframer-motionreact-day-pickerreact-focus-lockreact-hotkeysreact-merge-refsreact-phone-number-inputreact-remove-scrollreakit
@everything-registry/sub-chunk-547@infinitebrahmanuniverse/nolb-_lif@zalastax/nolb-_lif
6.1.0

10 months ago

6.0.0

12 months ago

5.7.0

1 year ago

5.3.0

2 years ago

4.4.3

2 years ago

4.4.2

2 years ago

5.4.0

2 years ago

5.0.2

2 years ago

5.0.1

2 years ago

5.0.0

2 years ago

4.4.4

2 years ago

1.22.3

2 years ago

5.1.7

2 years ago

5.1.6

2 years ago

5.1.5

2 years ago

5.5.0

2 years ago

5.1.4

2 years ago

5.1.3

2 years ago

5.1.2

2 years ago

5.1.1

2 years ago

5.1.0

2 years ago

5.2.10

2 years ago

4.6.0

2 years ago

5.2.9

2 years ago

5.2.8

2 years ago

5.2.7

2 years ago

5.2.6

2 years ago

5.2.5

2 years ago

5.6.0

2 years ago

5.2.4

2 years ago

5.2.3

2 years ago

5.2.2

2 years ago

5.2.1

2 years ago

5.2.0

2 years ago

4.5.0

2 years ago

4.1.8

2 years ago

4.4.1

2 years ago

4.4.0

2 years ago

4.3.0

2 years ago

4.2.0

2 years ago

4.1.7

2 years ago

4.0.2

2 years ago

4.1.4

2 years ago

4.1.3

2 years ago

4.1.6

2 years ago

4.1.5

2 years ago

4.1.0

2 years ago

4.1.2

2 years ago

4.1.1

2 years ago

4.0.1

2 years ago

3.7.3

3 years ago

3.7.2

3 years ago

3.6.0

3 years ago

4.0.0

3 years ago

3.7.1

3 years ago

3.7.0

3 years ago

3.5.0

3 years ago

3.4.3

3 years ago

3.4.2

3 years ago

3.4.1

3 years ago

3.4.0

3 years ago

3.3.4

3 years ago

3.3.3

3 years ago

2.0.2

3 years ago

1.21.0

3 years ago

2.0.1

3 years ago

2.0.0

3 years ago

3.2.0

3 years ago

1.22.0

3 years ago

1.22.1

3 years ago

3.1.0

3 years ago

1.22.2

3 years ago

3.0.1

3 years ago

3.0.0

3 years ago

2.1.2

3 years ago

2.1.1

3 years ago

2.1.0

3 years ago

3.3.1

3 years ago

3.3.0

3 years ago

3.3.2

3 years ago

1.18.1

3 years ago

1.18.0

3 years ago

1.16.0

3 years ago

1.14.2

3 years ago

1.15.0

3 years ago

1.19.0

3 years ago

1.17.0

3 years ago

1.15.2

3 years ago

1.15.1

3 years ago

1.20.0

3 years ago

1.14.1

3 years ago

1.14.0

3 years ago

1.13.2

3 years ago

1.10.5

3 years ago

1.10.4

3 years ago

1.12.0

3 years ago

1.11.0

3 years ago

1.13.1

3 years ago

1.13.0

3 years ago

1.10.3

3 years ago

1.10.2

4 years ago

1.8.0

4 years ago

1.9.4

4 years ago

1.9.3

4 years ago

1.9.2

4 years ago

1.9.1

4 years ago

1.9.0

4 years ago

1.7.1

4 years ago

1.7.0

4 years ago

1.10.1

4 years ago

1.10.0

4 years ago

1.6.2

4 years ago

1.6.1

4 years ago

1.6.0

4 years ago

1.4.0

4 years ago

1.5.2

4 years ago

1.5.1

4 years ago

1.5.0

4 years ago

1.3.2

4 years ago

1.3.1

4 years ago

1.3.0

4 years ago

1.2.0

4 years ago

1.2.1

4 years ago

1.1.4

4 years ago

1.1.3

4 years ago

1.1.2

4 years ago

1.1.1

4 years ago

1.1.0

4 years ago

1.0.1

4 years ago

1.0.0

4 years ago

0.6.10

4 years ago

0.6.9

4 years ago

0.6.8

4 years ago

0.6.7

4 years ago

0.6.6

4 years ago

0.6.5

4 years ago

0.6.3

4 years ago

0.6.4

4 years ago

0.6.2

4 years ago

0.6.1

4 years ago

0.6.0

4 years ago

0.5.4

4 years ago

0.5.2

4 years ago

0.5.1

4 years ago

0.5.0

4 years ago

0.4.6

4 years ago

0.4.5

4 years ago

0.4.4

4 years ago

0.4.3

4 years ago

0.4.2

4 years ago

0.4.1

4 years ago

0.4.0

4 years ago

0.3.0

4 years ago

0.2.7

4 years ago

0.2.6

4 years ago

0.2.5

4 years ago

0.2.4

4 years ago

0.2.3

4 years ago

0.2.2

4 years ago

0.2.1

4 years ago

0.2.0

5 years ago

0.1.12

5 years ago

0.1.11

5 years ago

0.1.10

5 years ago

0.1.9

5 years ago

0.1.8

5 years ago

0.1.7

5 years ago

0.1.6

5 years ago

0.1.5

5 years ago

0.1.4

5 years ago

0.1.3

5 years ago

0.1.2

5 years ago

0.1.1

5 years ago

0.1.0

5 years ago