Лучшие практики определения переменных темы оформления

В основе определения темы оформления лежит описание аспектов внешнего вида:

  • фон;
  • рамка;
  • режим чтения;
  • основной;
  • дополнительный;
  • и другие.

Для аспектов внешнего вида определяются конкретные значения стилей:

  • фон
    • цвет фона
  • рамка
    • цвет рамки
    • толщина рамки
  • режим чтения
    • цвет текста
    • цвет фона
    • цвет рамки
  • текст
    • цвет текста
    • размер текста
  • и другие.

В less-файле данные параметры будут объявлены следующим образом:

// Цвет фона элементов по умолчанию.
// Примечание: применяется в том числе к основному фону самой страницы.
@background-color: #FFF;
 
// Толщина обводки контрола.
@border-thickness: 1px;
// Цвет границы контрола
// Примечание: для задания цвета границы с каждой стороны можно использовать несколько значений через пробел.
@border-color: transparent;
 
// Цвет элементов в режиме "только для чтения".
// Пример: кнопки, переключатели, чекбоксы.
@readonly_color: #CCCCCC;
// Цвет фона контрола в состоянии "только для чтения".
// Примечание: равен цвету фона по умолчанию.
@readonly_background-color:  @background-color;
// Цвет границы контрола ввода в состоянии "только для чтения".
// Примечание: для задания цвета границы с каждой стороны можно использовать несколько значений через пробел.
// Примечание: по умолчанию равен цвету рамки по умолчанию
@readonly_border-color: @border-color;

Допустимо ссылаться на стили, определенные ранее. Например, в теме оформления "по умолчанию" параметр цвета @readonly_background-color ссылается на цвет @background-color. Но в другой теме оформления можно разорвать эту связь, определив абсолютное значение для параметра @readonly_background-color:

// Цвет фона элементов по умолчанию.
// Примечание: применяется в том числе к основному фону самой страницы.
@background-color: #FFF;
 
// Цвет фона контрола в состоянии "только для чтения".
@readonly_background-color:  transparent;

Каждый контрол может на своем уровне специфицировать любой из аспектов внешнего вида. В less-файле для определения стиля контрола к имени базового аспекта добавляется имя контрола. При этом значения параметров могут ссылаться на общие параметры. Это означает, что стили рамки, фона, текста и т.д. могут быть одинаковые у всех контролов.

// Толщина обводки полей ввода.
@border-thickness_input: @border-thickness;
// Цвет фона полей ввода.
@background-color_input: @background-color
 
// Толщина обводки кнопки.
@border-thickness_button: @border-thickness;
// Цвет фона кнопки.
@background-color_button: @background-color

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

// Цвет границы полей ввода.
@border-color_input: #EAEAEA #EAEAEA #CCCCCC #EAEAEA;
// Цвет границы полей ввода в состоянии "только для чтения".
@readonly_border-color_input:transparent transparent #E4E4E4 transparent;

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

  • общие параметры
    • строчные контролы
      • текстовые элементы
        • заголовки
          • заголовок 1 уровня
          • заголовок 2 уровня
          • заголовок 3 уровня
          • заголовок 4 уровня
      • кнопки
        • кнопка тулбара
        • контурная кнопка
      • поля ввода
        • текст
        • число
        • телефон
        • дата
        • многострочное поле
        • и другие
      • быстрый фильтр
      • хлебные крошки
        • флаг
        • переключатель
    • списки
      • плоский список
      • таблица
      • дерево
      • плитка
    • окна
      • диалог
      • стековая панель
      • всплывающая подсказка

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

Полный список параметров для каждого уровня описан в теме "по умолчанию", распространяемой вместе с исходным кодом контролов.

В пользовательской теме оформления достаточно будет определить значения только специфичных параметров темы.

Пример наследования стилей

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

@border-thickness_inputArea: @border-thickness_input;
@background-color_inputArea: @background-color_input;
@border-color_inputArea: @border-color_input;

При этом часть аспектов внешнего вида являются специфичными для многострочного поля:

// Цвет границы многострочных полей ввода в состоянии "только для чтения".
@readonly_border-color_inputArea: transparent;
 
// Вертикальные отступы до текста в многострочном поле ввода.
// Примечание: в однострочных полях вертикальный отступ не задается, текст в поле выравнивается по базовой линии.
@padding-vertical_inputArea: 2px;
 
// Высота строки в многострочном поле с размером шрифта s.
@line-height_s_inputArea: 17px;
// Высота строки в многострочном поле с размером шрифта m.
@line-height_m_inputArea: 18px;
// Высота строки в многострочном поле с размером шрифта l.
@line-height_l_inputArea: 19px;

Параметры для изменения цвета фона:

  • @background-color — при изменении параметра цвет фона поменяется сразу у всех контролов.
  • @background-color_input — цвет фона поменяется сразу у всех полей ввода.
  • @background-color_inputArea — цвет фона изменится только у многострочного поля ввода.

В рамках описания темы оформления "по умолчанию" физически описание переменных темы оформления может содержаться в нескольких файлах, повторяя структуру иерархии наследования стилей. Все стили подключаются к файлу _theme.less, который располагается в корне темы оформления. Именно его должны подключать прикладные разработчики для определения собственной темы оформления.