ehamlin-react-components v0.1.12

Daikin Design System in React

Installation

npm i @daikin-design/react-components

requires React, ReactDOM and Styled Components

If you don't already have a react project set up, npx create-react-app <<app-name>>

npm i styled-components

Styling

Fonts

Because some of the Daikin Design System fonts require licensing, we cannot include them in the library. Developers will have to supply them externally, using the @font-face CSS rule. The library uses a font-family property identifying the font as "DaikinThemeFont," regardless of whether the actual font is Univers, Roboto, San Francisco or something else. So your import should look something like this:

@font-face {
    font-family: 'DaikinThemeFont';
    src: url('./Univers.woff2') format('woff2');
}

Overriding styles

Most of the CSS rules can be overridden. You'll use the standard React method of styling by passing an object with camelCased properties, e.g.: style={ {backgroundColor: '#ffffff'} }

Units

The Dakin Design System uses rem units for all dimensions. This unit is a measurement relative to the global font size. If your global stylesheet reads:

html {
    font-size: 14px;
}

then 1rem = 14px, 2rem = 28px, etc.

Theming

<ThemeProvider></ThemeProvider>