# Описание
Yggdrassil — это дизайн-система продуктов Гринатома.<br>
Правила, которых мы придерживались при разработке, легли в основу принципов дизайн-системы.
1) Простота: Мы стремимся к интуитивному взаимодействию пользователя с продуктом.
2) Отзывчивость: Интерфейс должен находиться в контакте с пользователем — отвечать на его вопросы и подсказывать верный путь.
3) Эффективность: Функциональность в приоритете над стилистикой.
4) Развитие: Мы совершенствуем нашу дизайн-систему каждый день.

В основе стилизации компонентов лежит <a href="https://styled-components.com/">`styled-components`</a>

# Поддержка браузеров
| <center>[<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br/>Firefox </center>| <center>[<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br/>Chrome </center>| <center>[<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br/>Safari </center>|
| --------- | --------- | --------- |
| Последние 2 версии | Последние 2 версии | Последние 2 версии




# Быстрый старт

## Установка
npm: <br>
 `npm i @greenatom/components`

yarn: <br>
 `yarn add greenatom/components`
## Подключение стилей и шрифтов
<br>
Выберите один из вариантов подключения стилей.
### Подключение стилей в корне проекта

```
import React from "react";
import "@greenatom/components/styles/index.css";

const App: React.FC = () => (
  <div>
     <...>
  </div>
)
```
### Подключение в файле стилей 

```
@import "~@greenatom/components/styles/index.css";
```

## Использование компонентов
```
import { Button } from "@greenatom/components";

  <...>
    <Button viewType="primary">Кнопка</Button>
  <...>
```



# Иконки
Для использования иконок - необходимо установить <a href="https://www.npmjs.com/package/@greenatom/icons">`@greenatom/icons`</a> в свой проект.

## Установка
`npm i --save @greenatom/icons`


# Темизация

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

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

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

Примеры темизации:
```
import { ThemeProvider, createTheme, Button } from '@greenatom/components';

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