# Фишечки со стиляшечками

## Юниты

В StartupJS/UI изначально используется 8-ми пиксельная сетка для отступов. Это значит, что единица измерения для отступов - юнит(u). Один юнит равняется 8px. Следует все размеры в стилях указывать в юнитах. Дробные юниты (2.5u) следует указывать только в крайнем случае. В ситуациях, когда надо указать 1px к примеру, можно отойти от использования юнитов.
В юнитах указываются все стили, которые могли бы быть указаны в пикселях.

Пример:

```css
.card
  padding 2u 3u // 16px 24px
  margin 3u // 24px
```


## Миксины
Вы уже знакомы с реализацией миксинов в Stylus и теперь можете познакомиться с готовыми миксинами внутри пакета @StartupJS/UI

## Миксин font()

Первый миксин это `font()`, он принимает в себя один из следующих параметров `[h1, h2, h3, h4, h5, h6, body1, body2, caption]`, по умолчанию принимает `body2`.
`font()` используется для текстовых элементов и при компиляции заменяется на `font-size` и `line-height` в зависимости от выбранного значения.

**Таблица возможных значение:**

| Значение | font-size | line-height |
| -------- | --------- | ----------- |
| h1       | 72px      | 96px        |
| h2       | 48px      | 64px        |
| h3       | 36px      | 48px        |
| h4       | 24px      | 32px        |
| h5       | 20px      | 28px        |
| h6       | 16px      | 24px        |
| body1    | 16px      | 24px        |
| body2    | 14px      | 20px        |
| caption  | 12px      | 16px        |

## Миксин `shadow()`

React Native имеет свои особенности в работе с тенями (`box-shadow`). Чтобы избежать этих сложностей в повседневной жизни `StartupJS/UI` предоставляет набор готовых стилей теней для ваших компонентов.
Миксин `shadow()` имеет 5 уровней теней и принимает в себя себя число от `0` до `4`, по умолчанию `1`, которые и регулируют уровень тени, и разворачивает в селектор набор стилей `box-shadow` по следующей схеме:

| Значение  | Стили                                                    |
| -------- | ------------------------------------------------------- |
| 0        | box-shadow: none и elevation: 0                         |
| 1        | box-shadow: 0 1px 2px rgba(black, 0.2) и elevation: 3   |
| 2        | box-shadow: 0 3px 5px rgba(black, 0.15) и elevation: 6  |
| 3        | box-shadow: 0 5px 8px rgba(black, 0.15) и elevation: 12 |
| 4        | box-shadow: 0 8px 12px rgba(black, 0.2) и elevation: 18 |

> Наглядные примеры, как каждый уровень тени будет выглядеть смотрите справа

## Миксин `radius()`
Миксин `radius()` задает значение `border-radius` для нужного элемента. Он используется чтобы сохранить единообразие языка дизайна. Он принимает в себя значения `[m, l, circle]`, по умолчанию идет `m`.

Миксин `radius()` разворачивается в следующие значение:

| Значение  | Стиль                 |
| -------- | -------------------- |
| m        | border-radius 4px    |
| l        | border-radius 8px    |
| circle   | border-radius 9999px |

Значение `circle` сделает ваш элемент круглой формы.

> Также вы можете добавить свои значения или изменить существующие. Сделать это можно в файле `styles/helpers.styl`. Как именно править миксины можете прочитать в официальной документации Stylus - [Mixins](https://stylus-lang.com/docs/mixins.html)


## Миксины размеров экрана и устройств

На чистом ***CSS*** у вас есть возможность использовать @media-запросы для добавления стилей только определенным размерам экрана у пользователя.
StartupJS имеет в себе миксины, которые уже заточены под необходимые размеры экранов юзеров и даже их устройства и системы.

Разберем их по порядку:

| Миксин       | Среда                         |
| ------------ | ---------------------------- |
| +tablet()    | min-width >=768px            |
| +desktop()   | min-width >=1024px           |
| +wide()      | min-width >=1280px           |
| +portrait()  | Портретная ориентация экрана      |
| +landscape() | Альбомная ориентация экрана       |
| +web()       | Веб-окружение                  |
| +android()   | ОС Android                   |
| +ios()       | OC iOS                       |
| +native()    | !web                         |

> Среди миксинов также есть миксин +mobile(), которым задаются стили для мобильного размера экрана (\<=480px), но так как мы придерживаемся принципа mobile-first при разработке, то все стили по умолчанию задаются для мобильного разрешения экрана.

> Для того чтобы переопределить значение какого-нибудь миксина самостоятельно достаточно изменить его в папке `styles/` вашего проекта. Например размеры для экранов для миксинов `tablet, desktop, wide` находятся в файле `variables.styl`

Пример использования:
```css
.card
  padding 2u
  margin 0 2u
  +tablet()
    padding 3u
    margin 0 3u
  +desktop()
    padding 4u
    margin 0 4u
```

## Объект `$UI`

`$UI` это объект конфигурации `startupjs/ui`. Изменение переменных конфигурации - это наиболее эффективный способ привести интерфейс в соответствие с вашими потребностями.

### Свойства `$UI`

- `$UI.palette` - содержит основные цвета пользовательского интерфейса. Все остальные стандартные цвета являются производными от этих.

- `$UI.colors` - содержит множество цветов, образованных от `$UI.palette`. Правило одно для всех цветов, кроме `$UI.palette.black` (этот. цвет превращается в два: mainText и secondaryText). Каждый цвет имеет следующие аналоги (обратите внимание на то, что `colorName` и свойство `palleteColorName` могут не совпадать):
  - colorName: $UI.palette.palleteColorName,
  - colorNameLight: rgba($UI.palette.palleteColorName, 0.5),
  - colorNameLighter: rgba($UI.palette.palleteColorName, 0.25),
  - colorNameLightest: rgba($UI.palette.palleteColorName, 0.05)
- `$UI.shadows` - содержит константы для теней. По умолчанию заданны значения для чисел от 0 до 4.

- `$UI.media` - содержит размеры экранов. Эти размеры используются для миксинов определяющих размер экрана(например tablet()). Здесь содержатся константы для tablet, desktop и wide.

- `$UI.fontFamilies`:
  - `normal` - задает имена шрифтов для основного текста (компонент `Span`)
  - `heading` - задает имена шрифтов для текста заголовков (компоненты `H1-H6`)

- `$UI.fontSizes` - содержит константы размеров шрифтов, которые можно увидеть в таблице выше.
- `$UI.lineHeights` - содержит константы высоты строк, которые можно увидеть в таблице выше.


### Расширение глобального компонента `$UI`

Глобальный обьект `$UI` можно расширять и переопределять его свойства. Это позволяет реализовывать любые дизайнерские решения в вашем проекте. Для того чтобы модифицировать `$UI` необходимо использовать функцию [merge](https://stylus-lang.com/docs/hashes.html). Например, если вам необходимо добавить новый цвет `pink`, то это можно сделать следующим образом:

```js
$UI = merge($UI, {
  colors: {
    pink: #fc69ff,
  }
}, true)

```

или можно переопределить цвет `primary`  и `warning` на актуальные для вашего проекта и добавить новый размер для `Button`.

```js
$UI = merge($UI, {
  colors: {
    primary: #4a76a8,
    warning: #880000
  },
  Button: {
    heights: {
      xxl: 10u
    }
  }
}, true)
```

Такие преобразования `$UI` объекта следует производить в главном файле стилей проекта, который вы можете найти по пути `styles/index.styl`.

### Экспорт стилей в javascript код

С помощью команды `:export` в файле стилей можно экспортировать стили в javascript код.

```js
.root
  padding 1u

:export
  colors: $UI.colors
  height: 5u
```

Мы экспортировали объект с полями `colors` и `height`. Теперь импортируем этот объект в файл javascript.

```js
import STYLES from './index.styl'

const {
  colors,
  height
} = STYLES
```

Вот таким простым способом можно получить любые константы из стилей в javascript коде.