Перейти к содержимому
MildportMildport

Тематизация

Виджет тематизируется через CSS-custom-property в light-DOM — токены --mildport-*, которые вы задаёте на элементе (или выше него). Любая дизайн-система, тёмная тема включена. Никакого пробивания Shadow DOM, никаких войн !important.

.mildport {
  --mildport-bg: #0b0e16;
  --mildport-fg: #e9e4d8;
  --mildport-surface: #141a26;
  --mildport-border: rgba(233, 228, 216, 0.14);
  --mildport-primary: #f2c97d;
  --mildport-primary-fg: #1a1206;
  --mildport-radius: 12px;
  --mildport-font: 'Inter Variable', system-ui, sans-serif;


  /* review grid */
  --mildport-grid-header-bg: #1a2230;
  --mildport-grid-cell-bg: #0f1620;
  --mildport-grid-selection: #f2c97d;
}

Репрезентативный набор токенов:

Токен Назначение
--mildport-bg / --mildport-fg Базовый фон и текст.
--mildport-surface / --mildport-border Карточки, панели, тонкие линии.
--mildport-primary / --mildport-primary-fg Акцент и его контрастный цвет.
--mildport-success / --mildport-warning / --mildport-danger Состояния валидации.
--mildport-radius / --mildport-font Радиус скругления и шрифт.
--mildport-grid-* Заголовок, ячейки и выделение сетки проверки.