/* ============================================================ Я зову — дизайн-токены Один источник правды для цвета, типографики и теней. Порядок подключения: tokens → base → invitation → страница ============================================================ */ :root{ /* поверхности */ --paper:#FBF7EF; /* фон страницы — тёплая бумага */ --paper-2:#F4EDE1; /* врезки, панели */ --card:#FFFDF9; /* карточки, поля ввода */ /* текст */ --ink:#221B24; /* основной, глубокий баклажан вместо чёрного */ --ink-2:#564D53; /* вторичный */ --ink-3:#70676C; /* подписи, лейблы */ /* ПОЧЕМУ СЕРЫЕ СТАЛИ ТЕМНЕЕ ------------------------------------------------------------ Было #6B6067 и #948A90. Второй не проходил норму читаемости нигде: 2.87 на врезке, 3.12 на фоне страницы, 3.28 на карточке — при 4.5. А это цвет подписей полей, слова «необязательно», дат под статьями, шапок таблиц и ярлыков разделов. То есть плохо читалось не украшение, а то, чем подписано, куда что вписывать. Разъехались они не сразу: --ink-3 задумывался как «тише основного», и тише получилось за счёт контраста, которого у текста быть не может. Норма 4.5 — это и есть граница «тише, но читается». Уровней осталось три, но расставлены они теперь по контрасту, а не на глаз: примерно 14 / 7 / 4.7. Верхний не трогали. Нашла это tokeny.cjs — проверка, которой раньше не было: kontrast.cjs меряет приглашения, а цвета самого сайта не мерил никто. */ /* линии */ --rule:#E3D8C6; --rule-2:#D2C4AE; /* ВЫБРАННОЕ В ФИЛЬТРЕ — НЕ АКЦЕНТОМ ------------------------------------------------------------ Нажатый пункт фильтра был залит брендовым. На «Бумаге» это еловый, на «Празднике» — малиновый, и в каталоге таких пунктов разом бывает пять: повод наверху, возраст, кому, тема, цвет. Пять малиновых пилюль вокруг выдачи — самое яркое на странице, и ярче самих дизайнов, которые человек пришёл смотреть. Решение владельца: цвет нейтральный, как у полосы объявления в самом верху. Поэтому тон берём именно у неё: та же --paper-2, подмешанная основным цветом текста. Не отдельное число на палитру, а вычисление от двух, которые в каждой палитре уже свои, — иначе четыре палитры означали бы четыре новых числа, и тёмная тема отставала бы от светлой до первого взгляда на неё. Проверка tokeny меряет контраст сама и скажет, если подмес окажется мал. 14 % — чтобы заливка отличалась от невыбранного чипа (--card); 38 % — рамка, которая и на подложке видна. Буквы остаются основным цветом текста: контраст у них тот же, что у обычного текста страницы, то есть заведомо проходит. */ --pick:color-mix(in srgb, var(--ink) 14%, var(--paper-2)); --pick-rule:color-mix(in srgb, var(--ink) 38%, var(--paper-2)); /* акценты */ --brand:#1B5C4A; /* еловый — кнопки, ссылки, «да» */ --brand-2:#2A7A63; /* ховер */ --brand-soft:#E4EFE9; --amber:#C67F16; /* второй акцент — выделения, «не сможет» */ --amber-soft:#FAEBD1; --brick:#A2453A; /* отказ */ /* Семантика отдельно от бренда: «придёт», «бесплатно», «готово». В «Бумаге» совпадает с брендом, в «Празднике» — нет, иначе положительный статус читался бы малиновым. */ --good:#1B5C4A; --good-soft:#E4EFE9; /* ЧЕМ ПИСАТЬ ПОВЕРХ -soft ------------------------------------------------------------ Статус «придут / не смогут» — это пилюля: мягкая подложка -soft и буквы цветом статуса. Смотрится так, как надо, и до сих пор читалось плохо: янтарь на янтарной подложке давал 2.8 при норме 4.5, а в «Празднике» — 2.2. Цвет сообщал статус, а слово, которое его называет, было почти не разобрать. Хуже всего там, где статус и есть данные, — в списке гостей. Тон тот же, изменена насыщенность, и ровно настолько, чтобы дотянуть до 4.5. На тёмной теме подложки тёмные, а буквы и так светлые — там менять нечего, и -ink равен основному. */ /* --good-ink — ЭТО ЦВЕТ БУКВ, --good — ЦВЕТ ПОВЕРХНОСТИ Правило появилось для пилюль «придут / не смогут» и теперь распространено на весь сайт: буквами пишем только -ink, а --good остаётся для заливок, рамок и подмешивания. Разделить пришлось потому, что в «Празднике» зелёный достаточно светлый: #1E9E6A буквами давал 3.04–3.41 при норме 4.5, а белым по нему — те же 3.41. Один цвет не может быть одновременно достаточно светлым для заливки и достаточно тёмным для букв поверх светлого. В «Бумаге» они совпадают, и это не совпадение: там зелёный изначально тёмный. Совпадение значений — не повод считать, что переменная лишняя. */ --good-ink:#1B5C4A; --amber-ink:#935E10; /* ЧЕМ ПИСАТЬ ПОВЕРХ ЗАЛИВКИ БРЕНДОМ ------------------------------------------------------------ Главная кнопка залита --brand, и буквы на ней обязаны быть противоположными по светлоте. В светлой теме бренд тёмный, значит буквы светлые; в тёмной бренд светлый, значит тёмные. Раньше это стояло не здесь, а двумя правилами в base.css: :root[data-theme="dark"] .btn-primary{color:#141112} и ровно из-за этого «В корзине» в тёмной теме не читалось. Кнопка после добавления перестаёт быть залитой — становится обводкой с зелёными буквами (.btn.is-added), — но правило выше весомее по специфичности и продолжало красить её буквы в почти чёрный. На тёмно-зелёной подложке выходил контраст 1,37 при норме 4,5. Переменная лечит это не исключением, а устройством: правило .btn-primary теперь весит меньше, чем состояние .btn.is-added, и состояние побеждает само. А цвет лежит там же, где вся остальная палитра, и меняется вместе с ней. */ --on-brand:#FBF7EF; /* ============================================================ РОЛИ КНОПОК ------------------------------------------------------------ Красная заливка означает одно: «вот следующий главный шаг». До этого выпуска она означала просто «кнопка». Замерено на живом сайте: четырнадцать красных заливок на главной, одиннадцать из них в одном блоке; на странице шаблона рядом с «В корзину» красной же кнопкой стояло «Добавить „Праздник“ · +341 ₽» — то есть доплата выглядела ровно как «продолжить». Ролей с заливкой четыре, и у каждой своя пара «заливка / буквы»: главное --brand / --on-brand (одна на блок) второстепенное прозрачная / --ink (обводка) дополнительное --extra-soft / --extra-ink (посмотреть, примерить) допродажа --up-soft / --up-ink (стоит денег) Плюс две роли без заливки вовсе: незаметный переход — просто ссылка, удаление — буквы цветом --brick. ПОЧЕМУ ДОПРОДАЖА ЗЕЛЁНАЯ, А РОЛИ «УСПЕХ» БОЛЬШЕ НЕТ Допродажа была синей, и по системе это верно: синий не спорит ни с брендом, ни с отказом. Но на этом сайте синего нет больше нигде — ни в одном другом элементе, — и кнопка «Добавить „Праздник“» читалась как вставленная из чужого интерфейса. Владелец попросил зелёный, тот же, что у галочки перед «Разовый платёж», и это решение лучше: зелёный на сайте уже значит «хорошее и необязательное». Ценой пришлось убрать шестую роль. Зелёная заливка «успех» стояла в base.css как .btn-ok, не использовалась ни одной кнопкой и после этой правки стала бы вторым зелёным той же насыщенности. Двух одинаковых заливок с разным смыслом на сайте быть не должно, поэтому правило удалено, а не переименовано. Зелёный как ОТМЕТКА остался и не конфликтует: у отметки нет заливки — это галочка, обводка или цвет букв. ПОЧЕМУ У ДОПРОДАЖИ ЕЩЁ И ОБВОДКА Две мягкие заливки рядом различаются плохо. Замерено: в светлом «Празднике» первые подобранные цвета отстояли друг от друга на 8 единиц RGB — это не различие, это оттенок. Цвета разведены (стало 37), но одного цвета мало: обводка делает допродажу отдельным предметом, а не чипом. Это тот случай, когда путаница стоит человеку денег, и полагаться на оттенок нельзя. ВСЕ ЧЕТЫРЕ ПАЛИТРЫ Значения подобраны замером, а не на глаз: контраст букв к своей заливке не ниже 4.5 в каждой из четырёх палитр (светлая и тёмная × «Праздник» и «Бумага»), заливки отличимы друг от друга и обе не похожи на бренд. ============================================================ */ --extra-soft:#EFEBDF; --extra-ink:#4C4534; --up-soft:#CFE9DA; --up-ink:#2E684A; /* Лиловый — только для конфетти. Больше его на сайте нет нигде, и это не упущение: в палитре три акцента (бренд, янтарь, зелёный), и все три что-то значат. Конфетти не значат ничего — они разноцветные по своей природе, и третьего-четвёртого цвета им не хватало. Отдельная переменная, а не число в правиле: тёмной теме нужен свой, посветлее. */ --lilac:#B9A6DE; /* ============================================================ ПОЛОСА ПРИЗЫВА ПЕРЕД ПОДВАЛОМ ------------------------------------------------------------ Полоса была залита брендом целиком: красный прямоугольник во всю ширину и белая кнопка на нём. Это единственное место на сайте, где фирменный цвет работал ФОНОМ, а не кнопкой, — то есть седьмая роль сверх четырёх заведённых, и вдобавок самая громкая на странице. Теперь наоборот: полоса светлая, а красная на ней ровно одна вещь — кнопка. Ради этого и заводились роли. ПОЧЕМУ ЗДЕСЬ ПЕРЕМЕННЫЕ, А НЕ ЧИСЛА ИЗ МАКЕТА Числа в задании даны для одного случая — светлого «Праздника», и в нём они стоят ровно так, как присланы. Написать их прямо в правилах значило бы получить тёмно-синий заголовок #111538 на почти чёрном фоне в тёмной теме: макет про неё ничего не знает, а человек, у которого она включена, увидел бы нечитаемую полосу. Поэтому у полосы своя семёрка переменных, и каждая палитра называет их сама. ============================================================ */ --final-a:#FBF5EA; --final-b:#F7F2E8; --final-c:#F2F1E9; --final-edge:#E7DCC8; --final-ink:#221B24; --final-ink-2:#564D53; --final-line:#7FA898; --final-gold:#C9973A; /* тени */ --shadow-s:0 1px 2px rgba(34,27,36,.06); --shadow-m:0 2px 4px rgba(34,27,36,.05), 0 14px 34px -18px rgba(34,27,36,.35); --shadow-l:0 3px 8px rgba(34,27,36,.07), 0 28px 60px -28px rgba(34,27,36,.45); /* шрифты */ --serif:"Cormorant Garamond",Georgia,"Times New Roman",serif; --sans:"Onest","Segoe UI",system-ui,-apple-system,sans-serif; --hand:"Caveat","Segoe Script",cursive; /* ЗДЕСЬ БЫЛИ --yz-serif, --yz-sans И --yz-hand Три гарнитуры карточки приглашения, написанные как var(--serif) и так далее. Комментарий рядом объяснял, что префикс нужен, «чтобы карточка от чужого объявления не поменяла гарнитуру втихую», — и тут же привязывал её к --serif, который переопределяет оформление «Праздник». Переопределяет оно для заголовков сайта, а доставалось это карточке: у тринадцати дизайнов из двадцати четырёх имя набиралось Unbounded вместо Cormorant и менялось от переключателя в подвале. На оплаченном листе, где темы нет вовсе, не работало ни то ни другое — печаталась Georgia. Переехали в fonts.css, к самим начертаниям, литералами. Подробности там. Короткие --serif/--sans/--hand остаются теме: их меняет оформление, и это правильно — но только для сайта вокруг карточки. */ --max:70rem; } /* тёмная тема: системная настройка */ @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --paper:#191517; --paper-2:#221D20; --card:#262023; --ink:#F2EAE2; --ink-2:#B3A7AC; --ink-3:#92898E; --rule:#332B2F; --rule-2:#453B40; --brand:#6CC6A7; --brand-2:#8AD8BC; --brand-soft:#16302A; --amber:#E5AC5D; --amber-soft:#33260F; --brick:#D98476; --good:#6CC6A7; --good-soft:#16302A; --good-ink:#6CC6A7; --amber-ink:#E5AC5D; --on-brand:#141112; --extra-soft:#2E2920; --extra-ink:#DACFB6; --up-soft:#14302A; --up-ink:#79D2AC; --lilac:#A995D4; --final-a:#211D19; --final-b:#1E1B18; --final-c:#1C1A18; --final-edge:#33302B; --final-ink:#F2EAE2; --final-ink-2:#B3A7AC; --final-line:#4E7A6A; --final-gold:#C08C33; --shadow-s:0 1px 2px rgba(0,0,0,.5); --shadow-m:0 2px 4px rgba(0,0,0,.4), 0 14px 34px -18px rgba(0,0,0,.9); --shadow-l:0 3px 8px rgba(0,0,0,.5), 0 28px 60px -28px rgba(0,0,0,1); } } /* Системные элементы — календарь в input[type=date], скроллбары — должны следовать теме, иначе на тёмном всплывает белый календарь. */ :root[data-theme="light"]{color-scheme:light} :root[data-theme="dark"]{color-scheme:dark} @media (prefers-color-scheme: dark){:root:not([data-theme="light"]){color-scheme:dark}} /* тёмная тема: явный выбор пользователя */ :root[data-theme="dark"]{ --paper:#191517; --paper-2:#221D20; --card:#262023; --ink:#F2EAE2; --ink-2:#B3A7AC; --ink-3:#92898E; --rule:#332B2F; --rule-2:#453B40; --brand:#6CC6A7; --brand-2:#8AD8BC; --brand-soft:#16302A; --amber:#E5AC5D; --amber-soft:#33260F; --brick:#D98476; --good:#6CC6A7; --good-soft:#16302A; --good-ink:#6CC6A7; --amber-ink:#E5AC5D; --on-brand:#141112; --extra-soft:#2E2920; --extra-ink:#DACFB6; --up-soft:#14302A; --up-ink:#79D2AC; --lilac:#A995D4; --final-a:#211D19; --final-b:#1E1B18; --final-c:#1C1A18; --final-edge:#33302B; --final-ink:#F2EAE2; --final-ink-2:#B3A7AC; --final-line:#4E7A6A; --final-gold:#C08C33; --shadow-s:0 1px 2px rgba(0,0,0,.5); --shadow-m:0 2px 4px rgba(0,0,0,.4), 0 14px 34px -18px rgba(0,0,0,.9); --shadow-l:0 3px 8px rgba(0,0,0,.5), 0 28px 60px -28px rgba(0,0,0,1); }