some notes of components

notes.md

Component Library:

css modules

```css` .button { width: 1em; }

React:
```jsx
import styles from './button.css';

return button() {
    return <wayfair-button className={styles.button}>Click me</button>;
}

Component library in React/Angular + wrapper for web components

LESS/SASS (variables) - don't use

Design Tokens

How they're layered: themed variables -> css to define the states of a component -> implementation

Akin to: DB client -> respository -> code

Chromatic + storybook

Font size + standard spacing + typography (tackle first)

Base: 16px

Padding always em (everything else rem)

vw vh size of browser window (width, height) rem = base font size / 16 em = base font size of parent / 16 % px -> hights

css grid (provide css for the grid)

publish NPM packages

• css package
• react package (consumes css)
• web component