Адаптация под текущую тему

Компонент в настройках должен содержать поля для хранения стилей. Такие как цвета, шрифты и д.р.

Для примера возьмем компонент Веб-элементы/Текст

Для того, чтобы текст можно было гибко настроить, ему необходимы следующие поля:

$fields['color'] = [
    'name' => [
        'ru' => 'Цвет текста'
    ],
    'required' => false,
    'type' => 'color',
];

$fields['colorLinks'] = [
    'name' => [
        'ru' => 'Цвет ссылок'
    ],
    'required' => false,
    'type' => 'color',
];

$fields['textDecorationLinks'] = [
    'name' => [
        'ru' => 'Подчеркивать ссылки'
    ],
    'required' => false,
    'type' => 'checkbox',
    'placeholder' => [
        'ru' => 'сделаем подчеркивание',
    ]
];

$fields['font'] = [
    'name' => [
        'ru' => 'Шрифт'
    ],
    'type' => 'fonts',
    'required' => true,
];

$fields['fontSize'] = [
    'name' => [
        'ru' => 'Размер шрифта (px)'
    ],
    'type' => 'int',
    'min' => 11,
    'max' => 90,
    'step' => '1',
    'required' => true,
];

$fields['lineHeight'] = [
    'name' => [
        'ru' => 'Интерлиньяж'
    ],
    'type' => 'int',
    'min' => 15,
    'max' => 35,
    'step' => '1',
    'required' => true,
];

$fields['paragraphMargin'] = [
    'name' => [
        'ru' => 'Расстояние между параграфами'
    ],
    'type' => 'int',
    'min' => 10,
    'max' => 40,
    'step' => '1',
    'required' => true,
];

Имея данные поля компонент гибко адаптируется под любой стиль.

Данные из полей применяются к стилям компонента в файле: /extensions/Components/WebElementsText/Views/Article/components/style.css.php

<?php
defined('PROLOGUE_CORE') or die;
/** @var array $data */
?>
.WebElementsTextArticleText-<?= $data['componentId'] ?> {
    font-size: <?= $data['fields']['fontSize'] ?>px;
    color: <?= $data['fields']['color'] ?>;
    font-family: <?= $this->getFont($data['fields']['font']) ?>;
    line-height: <?=$data['fields']['lineHeight']?>pt;
}
.WebElementsTextArticleText-<?= $data['componentId'] ?> p {
    margin-bottom: <?=$this -> getRemSize($data['fields']['paragraphMargin'])?>rem;
}
.WebElementsTextArticleText-<?= $data['componentId'] ?> a {
    color: <?=$data['fields']['colorLinks']?> !important;
    <? if($data['fields']['textDecorationLinks']) { ?>
    text-decoration: underline !important;
    <? }  else { ?>
    text-decoration: none !important;
    <? } ?>
}

Инкапсуляция css реализована за счет уникального класса обертки компонента и использования БЭМ

Если нам нужно стилизовать обертку компонента, то используем вот такой код:

.Component-<?= $data['componentId'] ?> {

}

*Component - название текущего компонента. К примеру WebElementsTextArticleText

Если нам нужно стилизовать какой либо блок в компоненте, к примеру заголовок:

.Component-<?= $data['componentId'] ?> .Component__title {

}

После таких настроек, мы можем зайти в настройки компонента и поменять к примеру шрифт и размер текста и это успешно применится именно к текущему компоненту.

Настройка связей для адаптации

В файле:

/extensions/Components/Компонент/Views/Шаблон/install.php

Находится массив relations

    'relations' => [
        'text.font' => 'font',
        'text.color' => 'color',
        'text.fontSize' => 'fontSize',
        'text.lineHeight' => 'lineHeight',
        'text.paragraphMargin' => 'paragraphMargin',
        'links.color' => 'colorLinks',
        'links.textDecorationLinks' => 'textDecorationLinks',
    ]

В файле описываются связи глобальных настроек темы и локальных полей компонента.

'глобальныйПараметр' => 'локальноеПоле',

Для связи полей, используйте таблицу с данными: https://dev.prologue-uni.ru/d/tablica-dannyh-temy-oformleniya.html

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