{"id":19732233,"url":"https://github.com/lifeomic/chroma-react","last_synced_at":"2025-04-05T13:04:06.482Z","repository":{"id":37295385,"uuid":"295449692","full_name":"lifeomic/chroma-react","owner":"lifeomic","description":"Open source design system from LifeOmic, built with React","archived":false,"fork":false,"pushed_at":"2025-03-28T22:27:56.000Z","size":7923,"stargazers_count":48,"open_issues_count":8,"forks_count":10,"subscribers_count":18,"default_branch":"master","last_synced_at":"2025-03-29T12:10:00.965Z","etag":null,"topics":["a11y","accessible","material-ui","react","react-components","reactjs","storybook","team-phc-platform","typescript","ui-library","uikit"],"latest_commit_sha":null,"homepage":"https://lifeomic.github.io/chroma-react/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/lifeomic.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-09-14T14:56:00.000Z","updated_at":"2025-02-15T10:03:06.000Z","dependencies_parsed_at":"2023-02-16T10:46:03.038Z","dependency_job_id":"a3eaf83a-c5f4-4548-acdb-8f6b8e53f824","html_url":"https://github.com/lifeomic/chroma-react","commit_stats":{"total_commits":622,"total_committers":28,"mean_commits":"22.214285714285715","dds":0.6832797427652733,"last_synced_commit":"29166b1e9be3914d709ad4164f16e254b11ad666"},"previous_names":[],"tags_count":177,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lifeomic%2Fchroma-react","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lifeomic%2Fchroma-react/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lifeomic%2Fchroma-react/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lifeomic%2Fchroma-react/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/lifeomic","download_url":"https://codeload.github.com/lifeomic/chroma-react/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247339153,"owners_count":20923014,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["a11y","accessible","material-ui","react","react-components","reactjs","storybook","team-phc-platform","typescript","ui-library","uikit"],"created_at":"2024-11-12T00:25:22.618Z","updated_at":"2025-04-05T13:04:06.463Z","avatar_url":"https://github.com/lifeomic.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Chroma React\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://github.com/lifeomic/chroma-react\"\u003e\n    \u003cimg src=\"https://github.com/lifeomic/chroma-react/blob/master/.github/chroma@2x.png?raw=true\" alt=\"Chroma logo\" width=\"300\" /\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n\u003cbr\u003e\n\nChroma 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.\n\n\u003ca href=\"https://lifeomic.github.io/chroma-react\" target=\"_blank\" rel=\"noopener noreferrer\"\u003e\n  View our Storybook\n\u003c/a\u003e\n\n## Usage\n\nTo get started with Chroma, follow these steps:\n\n1. Install dependencies\n\n   ```bash\n   yarn add @lifeomic/chroma-react @material-ui/styles react-router-dom\n   ```\n\n   Chroma leverages `@material-ui/styles` for CSS-in-JS and `react-router-dom` for link-related components.\n\n2. Wrap your application with the `StyledEngineProvider` and `ThemeProvider` provided by Chroma.\n\n   ```jsx\n   import {\n     StyledEngineProvider,\n     ThemeProvider,\n   } from '@lifeomic/chroma-react/styles';\n\n   function App({ children }) {\n     return (\n       \u003cStyledEngineProvider injectFirst\u003e\n         \u003cThemeProvider theme={theme}\u003e{children}\u003c/ThemeProvider\u003e\n       \u003c/StyledEngineProvider\u003e\n     );\n   }\n   ```\n\n3. Start using components!\n\n   ```jsx\n   import { Button } from '@lifeomic/chroma-react/components/Button';\n\n   \u003cButton variant=\"contained\"\u003eButton\u003c/Button\u003e;\n   ```\n\n4. Add jest config (optional)\n\n   To include the jest configuration setup, add the following:\n\n   ```js\n   setupFilesAfterEnv: ['@lifeomic/chroma-react/jest'];\n   ```\n\n   **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](https://webpack.js.org/loaders/css-loader/)).\n\n## Theming\n\nWant to override the default theme of Chroma? No problem!\n\n1. Create your component-level overrides and palette overrides. Chroma leverages Material-UI's global theme variation [to override specific component styles](https://material-ui.com/customization/components/#5-global-theme-variation).\n\n   ```js\n   // theme.ts\n   import {\n     createPalette,\n     createTheme,\n     Theme,\n   } from '@lifeomic/chroma-react/styles';\n   import { Overrides } from '@lifeomic/chroma-react/styles/overrides';\n\n   // The overrides specified here will be *global* component overrides!\n   export const overrides = (theme: Theme): Overrides =\u003e ({\n     ChromButton: {\n       root: {\n         background: 'red',\n       },\n       outlined: {\n         border: '1px solid red',\n       },\n     },\n   });\n\n   export const palette = createPalette({\n     primary: {\n       main: '#02bff1',\n     },\n   });\n\n   export const theme = createTheme({\n     overrides,\n     palette,\n   });\n   ```\n\n2. Update your theme provider.\n\n   ```jsx\n   import { ThemeProvider } from '@lifeomic/chroma-react/styles';\n   import { theme } from './theme';\n\n   function App({ children }) {\n     return (\n       \u003cStyledEngineProvider injectFirst\u003e\n         \u003cThemeProvider theme={theme}\u003e{children}\u003c/ThemeProvider\u003e\n       \u003c/StyledEngineProvider\u003e\n     );\n   }\n   ```\n\n## Importing Component Styles Only?\n\nNeed to build a custom component, but want to use the styles hook of an existing Chroma component?\n\n```jsx\nimport { useStyles } from '@lifeomic/chroma-react/components/Button/Button';\n\nconst CustomButton = ({}) =\u003e {\n  const classes = useStyles({});\n  return \u003cbutton className={classes.root}\u003eCustom Button\u003c/button\u003e;\n};\n```\n\n## Development\n\n### Getting Started\n\nFirst you'll need to install the dependencies for the repository.\n\n```bash\nyarn\n```\n\n### Running Storybook\n\nTo run the Storybook for Chroma, run the following command.\n\n```bash\nyarn start\n```\n\nAfter some time, the Storybook will open. Any local changes made will be reflected in Storybook.\n\n### Build\n\nTo run the build for the repository, run the following command.\n\n```bash\nyarn build\n```\n\nThis will generate an output in the `dist/` directory.\n\n### Linking\n\n#### **Yarn**\n\nSometimes linking your local changes is helpful when developing new features or bug fixes. To do so, run the following commands.\n\n```bash\nyarn build # Run a build so your changes are included\ncd dist # You must link from the `dist` directory; otherwise, this will not work\nyarn link\n```\n\nNow you can navigate to your application and run the following command.\n\n```bash\nyarn link @lifeomic/chroma-react\n```\n\nAfter running the above command, your local version of Chroma is now linked and all changes locally should reflect in your application.\n\n#### **Yalc**\n\n`yarn link` not working? You may want to try `yalc`.\n\nFirst you need to global install `yalc` with: `yarn global add yalc`.\n\nIn your local version of Chroma:\n\n```bash\nyarn build # Run a build so your changes are included\ncd dist # You must link from the `dist` directory; otherwise, this will not work\nyalc publish\n```\n\nIn your application, run the following:\n\n```bash\nyalc add @lifeomic/chroma-react@0.0.0\nyarn install\nyarn start\n```\n\nAt 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.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flifeomic%2Fchroma-react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flifeomic%2Fchroma-react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flifeomic%2Fchroma-react/lists"}