oscript-ui
oscript-ui

Своё оформление

Всё, что проект хочет изменить — правило, файл статики, палитру, — он меняет штатно, не трогая библиотеку. Здесь три таких пути, от лёгкого к сильному.

Свой акцент#

Самое лёгкое — задать акцент. Вся схема Material выводится из него на сервере: primary, контейнеры, поверхности с его оттенком, тёмная тема. Акцент по умолчанию инсталляция даёт контрактом ОформлениеИнсталляции, посетитель — своей cookie.

Функция Оформление() Экспорт
	Возврат Новый Структура("Тема, Акцент", "светлая", "#00639b");
КонецФункции

Попробуйте прямо здесь: цвет уйдёт в cookie сайта, и документация перекрасится вся, без перезагрузки страницы. Форма помечена признаком тихой отправки: палитру по новому акценту считает сервер, а скрипт кита подменяет блок токенов в голове страницы.

Подробнее о ролях и о том, почему любой акцент остаётся читаемым, — на странице Цвет и тема.

Свой лист стилей#

Лист инсталляции встаёт вторым в каскаде, после базового листа кита. Поэтому её правило той же специфичности побеждает без !important. Адрес листа даёт обрамление полем АдресСтилей.

/* ромашка.css — лист инсталляции */
.brand { font-weight: 700; }
.card { border-radius: var(--md-sys-shape-corner-large); }

Пишите правила токенами: var(--md-sys-color-primary) вместо #6750a4. Тогда правило переключится вместе с темой и акцентом. Прежние имена --color-*, --space-*, --radius-* тоже работают — это псевдонимы ролей Material.

Свой файл вместо файла кита#

Раскладка статики кладёт файлы инсталляции поверх файлов кита: файл, объявленный под именем китового, вытесняет его целиком. Так подменяют то, что кит отдаёт по адресу /static: базовый лист, скрипт, значок провайдера входа.

Функция Файлы() Экспорт
	Результат = Новый Соответствие();
	// свой значок входа через GitHub вместо значка кита
	Результат.Вставить("github.svg", Новый Структура("Подкаталог, ТипКонтента", "значки", "image/svg+xml"));
	Возврат Результат;
КонецФункции

Глифы интерфейса так не подменяются: их кит вставляет прямо в разметку из своего каталога глифов, а не отдаёт файлами. Нужен новый глиф — его кладут в сам кит, см. Иконки.

Адрес каждого файла несёт отпечаток содержимого, например /static/oscript-ui-6f6f40e195011e44.css. Правка файла меняет адрес сама, поэтому файлы кэшируются навсегда, а «правки без сброса кэша» не бывает.

Плотность и радиус#

Оформление посетителя несёт ещё два множителя от 0,5 до 2. Плотность умножает шаг сетки, радиус — шкалу скруглений. Пилюля остаётся пилюлей при любом радиусе. Множители приходят из cookie посетителя; контракт инсталляции задаёт только тему и акцент.

Гайдлайны#

  • Меняйте акцент, а не роли по одной: схема из одной затравки держит контраст всех пар, ручная правка одной роли — нет.
  • Не пишите цвет литералом в своём листе: он не переключится вместе с темой.
  • Не перебивайте правила кита через !important: лист инсталляции и так стоит вторым.