harmony

Harmony is design system focused on collaboration, reusability, and scalability.

It aims to harmonize code and Figma, provide a shared language for designers and developers, and provide consistent, reusable components for use across our platforms.

built with ❤️ from the team @Audius.

Docs

Full documentation can be found here: Harmony Docs

Installation

Install @audius/harmony:

npm install --save @audius/harmony

Setup

Import styles exported by Harmony

import '@audius/harmony/dist/harmony.css'

Setup the ThemeProvider exported by Harmony

import { ThemeProvider as HarmonyThemeProvider } from '@audius/harmony'

const App = () => {
  return <HarmonyThemeProvider theme='day'>...</HarmonyThemeProvider>
}

In order use emotion yourself, follow their documentation for setting up the css-prop

If using typescript you will need to:

1. Add an emotion.d.ts file and include the following for access to harmony's theme type

import '@emotion/react'
import type { HarmonyTheme } from '@audius/harmony'

declare module '@emotion/react' {
  export interface Theme extends HarmonyTheme {}
}

2. Update your tsconfig to specify the jsxImportLocation:

{
  "compilerOptions": {
    "jsxImportSource": "@emotion/react",
    ...
  }
}

Usage

import { Button, Flex } from '@audius/harmony'

const App = () => {
  return (
    <Flex gap='m'>
      <Button variant='secondary'>Click This!</Button>
      <Button>Click That!</Button>
    </Flex>
  )
}

Development

Run storybook (docs site):

npm run storybook

Contribution

A Contribution Guide is available here.