This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).

* React
* Styled-components
* Typescript

```
import { Button, Input } from '@rea-hole/core';
```

## Темизация
 
  В библиотеке реализована возможность темизации компонентов. Компоненты используют в своих стилях переменные, заданные в дефолтной теме (import { DefaultTheme } from '@rea-hole/core';), с помощью темизации значения данных переменных можно перезадать, тем самым изменив внешний вид компонентов. Механизм темизации позаимствован из styled-components.

  Как внедрить темизацию в свой проект:
  1) с помощью функции createTheme нужно создать новую тему. Для этого в функцию необходимо передать объект, с теми свойствами, которые вы хотите перезадать. Внутри себя createTheme смерджит заданные вами опции с дефолтной темой.
  2) затем нужно импортировать компонент ThemeProvider из @rea-hole/core или styled-components. В ThemeProvider вы можете обернуть тот компонент, который хотите стилизовать, или сразу целую часть приложения, тогда тема будет применена сразу к нескольким компонентам.
  3) В ThemeProvider задайте параметр theme, в который передайте результат выполнения функции createTheme

  Подробнее о механизме темизации можно прочесть здесь https://styled-components.com/docs/advanced. Возможен вариант, когда один ThemeProvider вложен в другой и так далее. 

  Примеры темизации:

  1) 
  import { ThemeProvider, createTheme, Button } from '@rea-hole/core';

  render (
    <ThemeProvider theme={createTheme({ borderWidth: '4px', shape: { borderRadiusSmall: '5px' } })}>
      <Button view="rounded">Привет</Button>
    </ThemeProvider>
  );

  2) Если вы используйте в своем приложении ThemeProvider из styled-components и оборачиваете в него компоненты, но не передаете в нем дефолтную тему, возникнут ошибки в компонентах. Обязательно передайте в компоненты DefaultTheme, как в примере ниже!

  import { ThemeProvider } from 'styled-components';
  import { DefaultTheme } from '@rea-hole/core';

    const globalTheme = {
      primary: {
        bg: '#fff',
        logo: '#fff',
        colorText: '#000',
      },
      secondary: {
        bg: '#fff',
        logo: '#000',
        colorText: '#000',
      },
    };

    render (
      <ThemeProvider theme={{ ...globalTheme, ...DefaultTheme }}>
        // содержит компоненты из '@rea-hole/core'
        <AppComponent/>
      <ThemeProvider theme={{ ...globalTheme, ...DefaultTheme }}>
    );