Multi-purpose CSS Toolkit that uses Emotion. Contains basic CSS setup, mixins, utils and debug mode (separate package).

## What it does?

* Converts TS config into CSS variables
* Functions to access those variables
* Functions that extend CSS functionality
* Integrated `normalize.css` import
* Provides basic global styles
* Provides basic utils
* Extension points for utils & global styles
* Debug sidebar with all CSS vars and utils (separate package)

## Installation

**Note:** this is a private package so the installation requires you to use **prototypdigital** account. You can use `npm logout` and `npm login` to switch accounts. Make sure to switch back to your account after npm install has been finished.

```
yarn add --dev @prototyp/gatsby-plugin-gumball @prototyp/gatsby-plugin-gumball-debug
```

## Requirements
* normalize.css
* Absolute imports - configured in Gatsby


## Configuration

Add the following snippet to `gatsby-config.js`

```js
const activeEnv =
  process.env.GATSBY_ACTIVE_ENV || process.env.NODE_ENV || "development"

const isDev = activeEnv === "development"

module.exports = {
  plugins: [
    "@prototyp/gatsby-plugin-gumball",
    ...(isDev
      ? [
          {
            resolve: "@prototyp/gatsby-plugin-gumball-debug",
            options: {
              debug: true,
            },
          },
        ]
      : [])
  ],
}
```

Add the following line to `tsconfig.json`

```json
{
  "compilerOptions": {
    "typeRoots": ["node_modules/@prototyp/"]
  }
}
```

Required files in `src/style`:
* `variables.ts` - use `variables.ts.example` as a template from the package.
* `global.styles.ts` - use the following starting starter template:
```js
import { css } from "@emotion/react"

export const global = css``;
```
* `utils.styles.ts` - use the following starter template:
```js
export {};
```