Кастомизация дизайн системы

Для удобного использования фреймворка Steroids, рекомендуем настроить дизайн систему под ваш проект. Есть несколько возможностей кастомизации дизайн системы Steroids:

• Настройка scss переменных.
• Переопределение view части компонентов.
• Создание своего npm-пакета для ui-kit на основе @steroidsjs/bootstrap.
• Кастомизация дизайн макета в Figma (мы предоставляем открытые макеты).

Далее рассмотрим отдельно каждый способ.

Настройка scss переменных

Стилизация компонентов в Steroids построена на scss переменных, что позволяет полностью настроить их под конкретный проект.

1. Подключение кастомных переменных

На первом шаге нужно создать файловую структуру для добавление кастомных переменных. Ниже представлен пример такой структуры:

└── src
1    └── style
2        ├── custom-variables
3        │   ├── colors.scss - файл с переменными цветов
4        │   ├── media.scss - файл с переменными для media выражений
5        │   ├── typography.scss - файл с переменными для типографики
6        │   └── index.scss - файл для подключения всех файлов с кастомными переменными
7        └── variables.scss - scss переменные (уже есть в boilerplate)

В файл variables.scss подключаем кастомные переменные таким образом:

@import '~@steroidsjs/bootstrap/scss/mixins';
1@import '~@steroidsjs/bootstrap/scss/variables';
2@import './custom-variables';

Теперь, осталось только добавить нужные переменные в соответствующие файлы.

2. Переопределение цветов приложения

Цвета в Steroids определяются через root-переменные, а после эти значения присваиваются scss-переменным. Root-переменные позволяют динамически менять цвета для разных тем приложения (например темной и светлой). При этом в коде используются только одноименные scss-переменные.

Например, чтобы переопределить primary и secondary цвета нужно добавить в файл custom-variables/colors.scss такую конструкцию:

:root {
1  --primary: red;
2  --secondary: blue;
3}

Если у вас в проекте есть темная тема, то для переопределения цветов в этой теме нужно добавить еще одну конструкцию:

html[data-theme="dark"] {
1    --primary: orange;
2    --secondary: purple;
3}

В дальнейшем в коде проекта можно будет использовать переменные цветов таким образом:

@use "style/variables";
1
2.Block {
3    color: variables.$primary; // переменной $primary в Steroids присваивается значение var(--primary) - и так со всеми цветами
4}

3. Добавление и переопределение цветовых тем для кнопок

Для стилизации компонента Button в Steroids используется scss-переменная $color-themes. В ней обозначены четыре основных цвета для кнопки:

• color: background цвет кнопки.
• color-light: background цвет в состоянии active.
• color-dark: background цвет в состоянии hover.
• text-color: цвет текста в кнопке.

С помощью кастомной переменной $color-themes можно как переназначать цветовые темы кнопок из Steroids, так и создавать новые. Например, чтобы переназначить тему primary и добавить тему sub-button для кнопки, нужно добавить в файл custom-variables/colors.scss такую конструкцию:

@use "sass:map"; // без этой строчки не будет работать scss-функция map.merge()
1@use "~@steroidsjs/bootstrap/scss/variables"; // использование переменных цветов из Steroids (по надобности)
2
3$color-themes: (); // определение переменной color-themes (нужно по правилам scss при назначении переменной map.merge())
4$color-themes: map.merge(
5    (
6        "primary": (
7            "color": red,
8            "color-dark": red,
9            "color-light": orange,
10            "text-color": white,
11        ),
12        "sub-button": (
13            "color": variables.$blue,
14            "color-dark": variables.$blue-dark,
15            "color-light": variables.$blue-light,
16            "text-color": white,
17        ),
18    ),
19    $color-themes
20);

При этом, нужно учитывать, что переменная $color-themes полностью перезаписывается. Это значит, что при написании конструкции выше, в проекте будут определены только две темы для кнопок - primary и sub-button.

4. Кастомизация типографики

Для компонентов типографики Text и Title есть пропс type, который задает не только html-тег, но и определенные стили. За это отвечают scss-переменные $text-types, $title-types. Чтобы их переназначить, нужно добавить в файл custom-variables/typography.scss соответствующие конструкции для каждой переменной, например:

@use "sass:map";
1@use "~@steroidsjs/bootstrap/scss/variables";
2
3$title-types: ();
4$title-types: map.merge(
5    (
6        "h1": (
7            "font-size": variables.$font-size-2xl,
8            "font-weight": variables.$font-weight-lg,
9            "line-height": variables.$line-height-2xl,
10            "color": variables.$text-color,
11        ),
12        "h2": (
13            "font-size": variables.$font-size-xl,
14            "font-weight": variables.$font-weight-lg,
15            "line-height": variables.$line-height-xl,
16            "color": blue,
17        ),
18        "sub": (
19            "font-size": 14px,
20            "font-weight": variables.$font-weight-lg,
21            "line-height": variables.$line-height-lg,
22            "color": blue,
23        ),
24    ),
25    $title-types
26);

Таким образом можно создавать кастомные типы для текста и заголовков. Использование типов в коде будет такое:

<Title
1    type='custom-title'
2    content='some content'
3>

Стили, которые можно записать в типы текста и заголовка:

• font-family
• font-size
• font-weight
• line-height
• color
• text-align
• text-transform
• text-decoration

Кроме того, можно добавлять к ним префикс mobile или tablet для определения значений свойств на разных размерах экрана. Например, при добавлении префикса mobile свойства применятся в медиа выражении @media (max-width: media.$mobile-width), где $mobile-width можно задать прямо в проекте.

5. Переназначение переменных для media выражений

Чтобы переназначить media переменные, можно добавить их в файл custom-variables/media.scss, например:

$mobile-width: 500px;
1$tablet-width: 1023px;

Теперь все scss переменные настроены под ваш проект. Для более точной настройки отображения компонентов можно использовать другие способы кастомизации дизайн системы.

Переопределение view части компонентов

Чтобы изменить внешний вид компонента нужно заменить его view часть, а именно *.scss и *.tsx файлы. Можно заменить как оба файла так и только один из них - в зависимости от того, какие изменения нужны в отображении компонента.

1. Переопределение *.scss файлов.

Все файлы стилей подключаются в файле src/style/index.scss. Для переопределения стиля необходимо изменить import интересующего компонента, например:

// Было
1@use '~@steroidsjs/bootstrap/form/Button/ButtonView';
2// Стало
3@use './custom-bootstrap/ButtonView';

Таким образом, у нас в проекте получится следующая структура:

└── style
1   ├── index.scss - главный файл стилей, в нем подключаем 'ui/index.scss'
2   └── variables.scss - scss переменные
3   └── custom-bootstrap
4       └── ButtonView.scss

2. Переопределение *.tsx файлов.

Если изменение стилей недостаточно и необходимо изменить tsx код компонента, то в этом случае полностью копируется *.tsx файл компонента. Подключаются эти файлы в src/ui/bootstrap.ts. Итоговая структура:

└── ui
1   ├── bootstrap.tsx - главный файл, в нем переопределяем импорт компонента (например ButtonView)
2   └── form - группа компонентов, в котором располагается изменяемый компонент
3       └── Button - название компонента
4           └── ButtonView.tsx - файл с переопределением компонента

Создание npm-пакета для ui-kit на основе Steroids

Чтобы создать свой npm-пакет для ui-kit проекта нужно:

1. Cклонировать репозиторий Steroids

Все файлы для отображения компонентов хранятся в репозитории react-bootstrap.

2. Изменить файлы компонентов

В репозитории react-bootstrap такая архитектура:

└── src
1    └── content/ - папки с группами компонентов
2    └── form/
3        └── Button/ - папка компонента
4            ├── ButtonView.tsx - файл с версткой компонента, в который можно внести изменения
5            └── ButtonView.scss - файл со стилями компонента, в который можно внести изменения

Изменение view файлов компонентов никак не повлияет на логику их работы.

3. Выгрузить получившийся репозиторий как npm-пакет

Подробнее как это сделать можно прочитать в статье Creating Node.js modules.

Кастомизация дизайн макета в Figma

Подробная инструкция по кастомизации дизайн макета доступна по этой ссылке.