6c6f24409e
* feat: let a collection name the attribute its modes switch by Manually switched modes were always selected by data-<collection name>, so a collection called New wrote data-new and a codebase already using data-color-scheme could not be matched. A collection can now name its attribute in the inspector, validated so a stylesheet can select it as is. The stylesheet and exported code use it, setting it is undoable, and .fig files keep it in the collection's plugin data. * fix: show the switch attribute only where there are modes to switch * fix: return to the list after committing the switch attribute * fix: keep a collection's switch attribute when a new one is refused setModeAttribute cleared the attribute when given a name a stylesheet cannot select on; it now leaves the current one, and only an empty name restores the default. In the inspector, Enter on a refused name keeps the focus so it can be corrected. * docs: describe the switch attribute in the mode conditions The Switched manually row still said the attribute is named after the collection. The changelog had collected four copies of the variables dialog entry through rebases; one remains, with the switch attribute in it.
13 KiB
| title | description |
|---|---|
| Переменные | Переменные дизайна, коллекции, режимы и привязка цветов в OpenPencil. |
Переменные
Переменные хранят повторно используемые токены дизайна: цвета, интервалы и другие свойства, которые можно привязать к объектам. Если изменить значение переменной, обновятся все объекты, которые её используют.
Открытие диалога переменных
Откройте его через Вид → Переменные…, найдите «Переменные» в палитре команд или, если ничего не выделено, откройте раздел «Переменные» на вкладке «Дизайн». Кнопка Развернуть в углу диалога отдаёт ему большую часть окна.
Слева диалог показывает переменные активной коллекции, справа позволяет редактировать выбранную переменную или коллекцию, а внизу показывает таблицу стилей, которую они образуют. В узком окне или на телефоне он показывает один режим за раз, а переменная, настройки коллекции или таблица стилей открываются поверх списка с кнопкой «Назад».
Коллекции
Переменные объединяются в коллекции. В широком диалоге они перечислены на боковой панели с числом переменных в каждой; в более узком — вкладками, а на телефоне — меню.
- Переключить коллекцию: щёлкните её на боковой панели или её вкладку
- Создать коллекцию: нажмите + рядом с Коллекции или кнопку с папкой на панели инструментов (Создать коллекцию)
- Переименовать или удалить: если переменная не выбрана, справа редактируется коллекция: измените её имя или удалите её через меню ⋯ рядом с именем (Удалить коллекцию)
- Атрибут переключения: атрибут, который включает режимы, переключаемые вручную, по умолчанию
data-themeдля коллекции Theme; укажите другое имя, напримерdata-color-scheme, чтобы оно совпадало с существующим кодом
Режимы
В каждой коллекции может быть несколько режимов (например, Light и Dark). Режимы отображаются в списке столбцами значений, а у переменной есть значение для каждого режима. Управлять ими можно в разделе Настройки коллекции:
- Добавить режим: нажмите + рядом с разделом Режимы
- Переименовать: измените имя режима
- Дублировать, сделать основным, удалить: используйте меню ⋯ рядом с режимом (Дублировать режим, Сделать основным, Удалить режим)
Основной режим — Всегда включён, он попадает в :root. У каждого другого режима есть Применяется, когда: это определяет, когда режим вступает в силу в экспортированной таблице стилей; получающийся CSS показан ниже:
| Применяется, когда | CSS |
|---|---|
| переключено вручную | атрибут переключения коллекции со значением режима, например [data-theme="dark"] для режима Dark коллекции Theme |
| система в тёмном режиме / система в светлом режиме | @media (prefers-color-scheme: dark) / light |
| включён высокий контраст | @media (prefers-contrast: more) |
| включено уменьшение движения | @media (prefers-reduced-motion: reduce) |
| экран уже, чем / экран шире, чем ширина | @media (max-width: 640px) / min-width |
| контейнер уже, чем / контейнер шире, чем ширина | @container (max-width: 640px) / min-width |
| Свой CSS | любой селектор или запрос @media, @supports либо @container |
На холсте слой показывает режим, когда вы задали его слою, независимо от условия. В экспортированном коде режим, переключаемый вручную, включается добавлением его атрибута элементу, поэтому слои с этим режимом экспортируются с этим атрибутом. Слои с режимом с любым другим условием, включая собственные селекторы, экспортируются с буквальными значениями вместо токенов, потому что когда режим применяется, решает таблица стилей, а не слой.
Работа с переменными
Переменные группируются по папкам в их именах (Brand/Primary отображается как Primary в папке Brand) и показываются с именем CSS и значением для каждого режима.
- Создать переменную: нажмите Создать переменную (или +) и выберите тип; новая переменная откроется для редактирования
- Выбрать: щёлкните строку или перемещайтесь стрелками и нажмите Enter. Щелчок с Shift выделяет диапазон, а щелчок с Cmd (Ctrl в Windows и Linux) добавляет строку или убирает её из выделения
- Фильтровать: введите текст в строке поиска, чтобы отфильтровать по имени, CSS-имени, описанию или значению, например
--color-brand, шестнадцатеричному цвету или переменной, на которую указывает алиас, с той же терпимостью к опечаткам, что и в палитре команд; щёлкните группу на боковой панели, чтобы показать только её и вложенные в неё группы, или нажмите кнопку фильтра (Фильтр по типу), чтобы показать только некоторые типы - Переименовать или изменить на месте: дважды щёлкните имя или числовое или текстовое значение в списке
- Правая кнопка мыши: переименовать, дублировать (Дублировать), переместить в группу или в новую группу (Переместить в группу, Новая группа…) либо удалить (Удалить переменные) выбранные переменные; их удаляют также Delete и Backspace
- Изменить порядок: перетащите строку; порядок сохраняется в файле
- Выбрано несколько: справа их можно переместить в группу, дублировать или удалить
- Отмена и повтор: Cmd+Z и Cmd+Shift+Z или Cmd+Y (Ctrl в Windows и Linux) работают в диалоге так же, как на холсте, по одному шагу на изменение. Enter применяет поле и возвращает к списку; пока в поле есть неприменённый текст, Cmd+Z отменяет ввод
При выборе переменной можно редактировать:
- Имя и Имя CSS: оставьте имя CSS пустым, чтобы получить его из имени и областей применения, например
--color-brand-primary. Вводите имя без--; имя, которое CSS не может использовать, помечается и не сохраняется - Единица: для чисел
px,rem,%,ms,s,degили без единицы; значения вводятся в этой единице - Значение или Значения: по одному для каждого режима; цвет открывает выбор цвета. Кнопка переменной (Использовать переменную) рядом со значением направляет его на другую переменную того же типа — псевдоним, который следует за этой переменной; Открепить переменную возвращает значение, которое он показывал
- Выражение CSS: для чисел значение вроде
clamp(1rem, 4vw, 1.5rem), которое записывается в CSS вместо числа, а холст продолжает рисовать число - Области применения: для каких свойств предлагается переменная
- Описание
- Скрыть при публикации: файлы, которые используют этот как библиотеку, не видят переменную
Таблица стилей
Внизу диалога активная коллекция показана как пользовательские свойства CSS. Кнопка копирования (Копировать все переменные как CSS) копирует переменные всего документа как CSS или как тему Tailwind v4 (Копировать все переменные как тему Tailwind), поэтому ссылки на другие коллекции разрешаются.
Привязка переменных к заливке
В разделе «Заливка» панели свойств используйте выбор переменной, чтобы привязать цветовую переменную к заливке объекта.
- Привязать: выберите цветовую переменную в списке. У заливки появится фиолетовая метка с именем переменной.
- Отвязать: нажмите кнопку отвязки на метке, чтобы удалить привязку. Заливка вернётся к вычисленному значению цвета.
Когда значение переменной меняется (или при переключении режима), все привязанные заливки обновляются автоматически.
Советы
- Объединяйте связанные токены в коллекции, например
Primitivesдля исходных цветов,Semanticдля смысловых псевдонимов иSpacingдля значений макета. - Режимы удобны для переключения тем: значения Light и Dark можно задать в одной коллекции.
- Переменные поддерживают псевдонимы: коллекция
Semanticможет ссылаться на значения из коллекцииPrimitives. - Работа с заливками и выбором цвета описана в разделе Фигуры.