Skip to content

size.select: галочка и фон опции из токенов - #123

Open
khaliulin wants to merge 1 commit into
mainfrom
size.select
Open

size.select: галочка и фон опции из токенов#123
khaliulin wants to merge 1 commit into
mainfrom
size.select

Conversation

@khaliulin

Copy link
Copy Markdown
Contributor

Ветка от main. Группа «сырые var() без слоя синонимов».

Что сделано

Три сырые var(--p-*) заменены. Имена писались руками и не проверялись ничем:

  • --p-select-option-selected-colordt('select.option.selectedColor')
  • --p-select-option-focus-colordt('select.option.focusColor')
  • --p-select-checkmark-content — не токен, а код-поинт глифа tabler с fallback. Переменной с таким именем тема не выпускает, var() всегда падал в fallback, поэтому оставлен только сам глиф.

Применены три токена, которые дизайн задал, а кит не использовал (WARN G8): фон опции select.extend.extOption.background, её gap и gap группы опций.

Убраны комментарии-разделители по правилу проекта.

Проверки

  • check-component select — было 3 FAIL (G3) и 6 WARN, стало 0 FAIL, 3 WARN
  • check-stories-bg select — подложек нет
  • check-dt-refs — мёртвых ссылок нет
  • рантайм: список открывается, выбранная опция помечена галочкой #2b2e33 16px из шрифта tabler, фон опции белый, gap 8px
  • prettier --check чист
  • границы ветки: один файл tokens/components/select.ts

Отдельно проверял цвет галочки в состоянии «выбрана + фокус». Пробовал перевести его на selectedFocusColor (по смыслу пары «фон + цвет»), но в реальном каскаде фон выбранной опции остаётся светлым — focusBackground, а не selectedBackground, — и галочка становилась белой на светлом. Оставлен focusColor, как и было по имени переменной; замер подтверждает: тёмная галочка на светлом фоне.

Осознанные WARN

  • G6, ссылки на inputtext.extend.extXlg.* — размер xlg у селекта повторяет лестницу текстового поля; связь намеренная.

Вопросы к дизайну

  • фон выбранной опции. В экспорте select.option.selectedBackground = neutral.strong.selected (тёмный) и selectedColor = белый, но PrimeNG не ставит класс p-select-option-selected, а Aura-правило фокуса перекрывает фон светлым. Из-за этого «выбранная» опция выглядит как обычная подсвеченная. Нужно решение: либо тёмная плашка выбранной опции (тогда правило надо усиливать), либо убрать тёмные токены из экспорта.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant