Прозрачность

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

Зачем полупрозрачный цвет

Полупрозрачный цвет — не «цвет посветлее». Плашка статуса, подсветка строки под курсором, граница поля, подпись отключённого элемента — всё это один тон, пропущенный через поверхность в разной степени.

Главное свойство: полупрозрачная роль правильна на любом фоне, а непрозрачная — только на том, под который её подбирали. Залитое поле на белой странице, на сером фоне и на поднятой панели отличается от подложки одинаково; сплошной серый на одном фоне сольётся, на другом станет слишком заметным.

Поэтому состояния, плашки и границы во Framework полупрозрачны, а основной текст — нет.

Одна шкала

Ступень прозрачности — процент непрозрачности, и он пишется в имени: --sf-primary-50--alfa-12 — тон 50 при 12 %.

Шкала одна на весь Framework. В ней одиннадцать ступеней: 4, 8, 12, 16, 20, 24, 28, 32, 48, 64, 80. Ступени вне шкалы не проходят контракт alpha-scale, как и примитив, у которого имя и фактическая непрозрачность не совпадают.

До 32 шкала растёт по четыре, дальше делает три длинных шага. Ниже 32 важно, сколько тона просвечивает, — там разница в четыре процента заметна. Выше 32 важно, насколько линия читаема, а читаемость с шагом в четыре процента не меняется.

Три семейства

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

Слой состояния — 4, 8, 12. Реакция поверхности на указатель.

Ступень одинакова в светлой и тёмной теме. Меняется тон под ступенью — 50 в светлой теме, 90 в тёмной.

Заливка — 12–32. Плашка в тоне роли и её состояния.

Два правила:

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

Зная оба правила, ступень для новой роли не подбирают, а выводят.

Штрих — 48, 64, 80. То, что читают или по чему находят.

Здесь ступени подобраны по порогу контраста и проверяются измерением (Контраст). Например, --sf-neutral-50 на белом даёт 4,47 : 1 сплошным, а при 80 % линия опускается до 3,1 : 1 — спокойнее, но выше порога. В тёмной теме тот же порог даёт тон 60 при 64 %.

Нейтральные поверхности

У полупрозрачных нейтральных поверхностей тон меняется вместе с темой: neutral-50 в светлой, neutral-90 в тёмной. Светлая тема подмешивает к поверхности серое, тёмная — почти белое, и обе читаются как та же поверхность с лёгким оттенком. Поэтому ступени здесь одинаковы в обеих темах:

Никакие две роли не делят ступень: каждую нужно отличить глазом. Плашка начинается с 16, а не с 12, чтобы не совпадать с нажатой поверхностью; вуаль стоит выше самой сильной плашки, потому что плашка лежит на странице, а вуаль её накрывает.

Исключение — вуаль сцены --sf-surface-overlay под модальным окном. Она построена из чистого чёрного (светлая тема) и белого (тёмная): её задача — притушить то, что под ней, а не подкрасить поверхность.

Край области --sf-outline-variant — 24 % в обеих темах.

Нейтральная половина шкалы

Иногда нужна нейтральная полупрозрачность без смысла роли: «чуть темнее подложки». Для этого есть --sf-alpha-* — ступени от одной базы --sf-alpha-base, которая сама выбирает сторону: чёрный в светлой теме, белый в тёмной. Пример задаёт панели лёгкое затемнение подложки:

.project-panel {
  background-color: var(--sf-alpha-4);
}

Шкала задаёт степень контраста, а не цвет, поэтому одна запись верна в обеих темах. Ступени — те же, что у всей шкалы; объявлены только используемые: 4, 8, 12 и 16. Если нужен смысл (состояние, плашка, граница), берите роль, а не --sf-alpha-*.

Как выбрать ступень для новой роли

1. Определите задачу цвета: след жеста, плашка или то, что читают.
2. Возьмите ступень своего семейства. Для состояния — одну и ту же в обеих темах; для плашки — светлая, а тёмная на двенадцать выше.
3. Для штриха измерьте контраст к поверхности и проверьте порог.
4. Если нужной пары «тон × ступень» среди примитивов нет, её добавляют — но ступень берут из шкалы.

Чего не делать

• Нельзя приглушать текст или иконку прозрачностью. Прозрачный знак читается как отключённый, и сквозь него видно то, что под ним. Для приглушённого есть непрозрачные --sf-on-surface-variant и --sf-on-disable.
• Нельзя складывать две полупрозрачные роли ради третьего оттенка. Результат нельзя ни назвать, ни проверить.
• Нельзя брать роль границы для того, что читают, и наоборот. Тема, перенастроившая границы, не должна менять текст.

Смотрите также

• Правило имени примитива — имена полупрозрачных примитивов;
• Цветовые роли — роли, построенные на ступенях;
• Контраст — пороги контраста для штриха;
• Проверки — контракт alpha-scale.