Обновляет демки в backdrop

[StarHamster]

Описание

https://content-5900.dev.doka.guide/css/backdrop/

Немного добавил адаптива, приглушил цвета и переосмыслил вторую демку: хотел показать пример на поповере

╰(*°▽°*)╯

Первая демка

Было	Стало

Вторая демка

[skorobaeus]

С адаптивом и переосмыслением согласна!

А вот кнопка во всплывающем окне должна быть белая :)

[StarHamster]

А вот кнопка во всплывающем окне должна быть белая :)

@skorobaeus, давай обсудим, почему так?

Если придём к тому, что нужна белая кнопка, кнопку открытия dialog сделаю голубой, а не розовой

Покрасил в белый 💪

[Inventoris]

Привет-привет)

Смотри, у нас были синие кнопки (основной цвет раздела CSS), белые всплывающие плашки. Всё как по стайлгайду (почти). Давай останемся тут в рамках стилей демок в Доке и сделаем вообще идеально:

1. Обе демки оформим с синими кнопками, потому что розовый это дополнительный, когда синий уже есть и его нельзя использовать.
2. Плашки сделаем белыми, вот пример. С учетом комментария Светы =)

[StarHamster]

@Inventoris, заглянул ещё раз в стайлгайд:

1. Первую кнопку в первой демке я сделал розовой, потому что мне показалось неправильным делать розовой кнопку в <dialog>: в ней используется эмодзи 💅, и мне не очень нравится контраст с этим эмодзи и розовым. Поэтому она будет белая, как написала Света. Ниже объяснил, почему к этому пришёл.
2. Да, в стайлгайде упоминается черно-белость всплывающих элементов* (а ещё они должны быть вытянутыми). Но имелись ли в виду модальные окна при написании стайлгайда? Демки мы делаем в темной теме. И если речь идёт о каких-то небольших попапах, то белый фон использовать уместно, но диалоговые окна часто большие, они могут и ослепить 📸

*наверное, именно по этой причине Света сказала, что кнопка должна быть белой... ну вот, сам себя и убедил 😅

@skorobaeus, а вот про вытянутость диалоговых окон: мне кажется, что они выглядят как-то несуразно:

Опять таки для маленьких элементов хорошо выглядит, а для больших — уже не очень. Что думаешь?

[StarHamster]

@skorobaeus, а стилей для белых кнопок нет в стайлгайде 🥹

Для фокуса покрасил бордер в основной цвет раздела:

.button-white:focus-visible {
  border: 2px solid #2E9AFF;
}

.button-white:focus {
  border: 2px solid #2E9AFF;
}

А для наведения кнопку сделал темной, а бордер с текстом белыми:

.button-white:hover {
  border: 2px solid #FFFFFF;
  background-color: #18191C;
  color: #FFFFFF;
}

Что думаешь?

[github-actions]

Превью контента из 9cc82d8 опубликовано.

[Inventoris]

@Inventoris, заглянул ещё раз в стайлгайд:

1. Первую кнопку в первой демке я сделал розовой, потому что мне показалось неправильным делать розовой кнопку в <dialog>: в ней используется эмодзи 💅, и мне не очень нравится контраст с этим эмодзи и розовым. Поэтому она будет белая, как написала Света. Ниже объяснил, почему к этому пришёл.
2. Да, в стайлгайде упоминается черно-белость всплывающих элементов* (а ещё они должны быть вытянутыми). Но имелись ли в виду модальные окна при написании стайлгайда? Демки мы делаем в темной теме. И если речь идёт о каких-то небольших попапах, то белый фон использовать уместно, но диалоговые окна часто большие, они могут и ослепить 📸

*наверное, именно по этой причине Света сказала, что кнопка должна быть белой... ну вот, сам себя и убедил 😅

@skorobaeus, а вот про вытянутость диалоговых окон: мне кажется, что они выглядят как-то несуразно:

Опять таки для маленьких элементов хорошо выглядит, а для больших — уже не очень. Что думаешь?

Ну по первому пункту могу сказать, что если эмодзи не подходит к кнопке, то лучше всё таки менять эмодзи, чем отклоняться от стайлгайда по цветам кнопок)

А по второму тут лучше Света подскажет. Мне кажется стоило бы действительно обновить стайлгайд, чтобы не оставалось сомнений. Но пока лучше делать, как в других доках, а там крашено в белый) Если правила нет, или оно непонятное, лучше делать, как уже где-то сделано.

[StarHamster]

Если правила нет, или оно непонятное, лучше делать, как уже где-то сделано.

Ну, не соглашусь 🙅‍♀️

Это скорее повод обсудить как правильно 😅

[skorobaeus]

@skorobaeus, а вот про вытянутость диалоговых окон: мне кажется, что они выглядят как-то несуразно

Они не кажутся мне несуразными, это вкусовщина. Но ты абсолютно прав насчёт того, что когда я писала стайлгайд, я попросту не учла модальные окна 😅 И вот эти белые контрастные edgy всплывашки хорошо работают только пока маленькие.

По большому счёту нет никакой причины стилизовать полноценные модалки иначе, чем аналогичные блоки / формы в "основном теле" демки. Нужно тогда сформулировать как мы их будем стилизовать by default и зафиксировать это в дизайн-системе. У тебя уже есть какое-то соображение на этот счёт?