/* Оформление иконок Лавико. Геометрия — в assets/icons.js, здесь только размер, толщина и цвет, и всё это привязано к тексту рядом. Правила, которые нельзя нарушать: 1. Размер задаётся в em, а не в px: иконка растёт вместе с кеглем строки, в которую вставлена, и не разъезжается на крупном системном шрифте. 2. Цвет — только currentColor. Тогда в ночной теме иконка идёт за --ink, в приглушённой подписи — за --mut, а в опасной кнопке — за --danger-ink, и контраст проверяется тем же порогом, что и текст (ux_render_check.py). Хардкод цвета в path или в этом файле = потерянная читаемость. 3. vertical-align подобран так, чтобы оптический центр иконки совпал с серединой строчной буквы: эмодзи сидели на базовой линии сами, обводка без выравнивания «подпрыгивает». */ .ic { width: 1.15em; height: 1.15em; vertical-align: -0.19em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; /* Иконка не должна перехватывать тап у кнопки, внутри которой лежит. */ pointer-events: none; } /* Размеры. Ступени редкие намеренно: чем меньше вариантов, тем ровнее сетка. */ .ic-xs { width: .9em; height: .9em; vertical-align: -.13em; stroke-width: 1.9 } .ic-sm { width: 1em; height: 1em; vertical-align: -.15em } .ic-lg { width: 1.4em; height: 1.4em; vertical-align: -.26em; stroke-width: 1.6 } .ic-xl { width: 2em; height: 2em; vertical-align: -.4em; stroke-width: 1.5 } /* Крупный знак в пустом состоянии и на заглушках. */ .ic-hero { width: 44px; height: 44px; vertical-align: middle; stroke-width: 1.4 } /* Цвета — только через переменные темы, чтобы ночная тема работала сама. Цепочка запасных значений нужна потому, что набор обслуживает ДВА контура с разными именами переменных: витрина зовёт приглушённый цвет `--mut`, админка — `--muted`, и так по всем ролям. Свести их к одному имени значило бы переименовать переменные в двух больших файлах разом; вместо этого роль значка спрашивает оба имени и в самом конце падает на currentColor — тогда значок просто идёт за текстом, а не пропадает. Если добавляете третий контур со своими именами — дописывайте его имя в цепочку здесь, а не заводите отдельный класс. */ .ic-mut { color: var(--mut, var(--muted, currentColor)) } .ic-ok { color: var(--green, var(--ok, currentColor)) } .ic-warn { color: var(--star, var(--warn, currentColor)) } .ic-danger { color: var(--danger-ink, var(--err, currentColor)) } .ic-accent { color: var(--wine, currentColor) } /* Сплошной знак — там, где раньше эмодзи было залитым (звезда рейтинга, точка статуса). Обводку в этом случае снимаем, иначе знак толстеет. */ .ic-fill { fill: currentColor; stroke: none } /* Иконка в строке с текстом: ровный зазор без пробелов в разметке. */ .ic-gap { margin-right: .38em } .ic-gap-l { margin-left: .38em } /* Кнопка-иконка без подписи: квадратная область нажатия не меньше 34px, иначе на телефоне промахиваются мимо. */ .icon-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 34px; min-height: 34px; padding: 0; border: 0; background: none; color: inherit; cursor: pointer; } /* Вращение для индикатора обновления. */ @keyframes ic-spin { to { transform: rotate(360deg) } } .ic-spin { animation: ic-spin 1s linear infinite; transform-origin: 50% 50% } @media (prefers-reduced-motion: reduce) { .ic-spin { animation: none } } /* ------------------------------------------------------------------ Значки в псевдоэлементах (::before / ::after). Там, где значок рисует CSS, а не разметка — шеврон раскрытия у
, лупа в поле поиска, галочка «скопировано» — вставить некуда. Такие места берут ту же геометрию из набора, но маской: форма приходит из --icm-*, а ЦВЕТ даёт `background: currentColor`, то есть снова идёт за темой. Заливать маску конкретным цветом нельзя — ровно это и было не так с эмодзи. Как применять в правиле компонента: .foo>summary::after{ content:"";width:15px;height:15px;flex:none; background:currentColor;color:var(--mut); -webkit-mask:var(--icm-chevron-down) no-repeat center/contain; mask:var(--icm-chevron-down) no-repeat center/contain} Формы обязаны совпадать со спрайтом, иначе один и тот же знак разъедется между разметкой и псевдоэлементом — и увидеть это можно будет только глазами, на том экране, где оба варианта стоят рядом. Полагаться тут на память нельзя, поэтому блок ниже НЕ пишется руками: его собирает `scripts/build_icon_masks.py` из `icons.js`, а совпадение сторожит `tests/test_icon_set.py`. Поправили иконку — прогоните сборщик. ------------------------------------------------------------------ */ /* @icm:begin — блок собран scripts/build_icon_masks.py, руками не править */ :root{ --icm-chevron-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.4 9.4 12 15l5.6-5.6'/%3E%3C/svg%3E"); --icm-chevron-up: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.4 14.6 12 9l5.6 5.6'/%3E%3C/svg%3E"); --icm-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12.6l4.8 4.8L19.5 7'/%3E%3C/svg%3E"); --icm-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10.9' cy='10.9' r='6.4'/%3E%3Cpath d='m15.6 15.6 4.9 4.9'/%3E%3C/svg%3E"); --icm-gift: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.6' y='9.4' width='16.8' height='4.2' rx='1'/%3E%3Cpath d='M5 13.6V20a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-6.4'/%3E%3Cpath d='M12 9.4V21'/%3E%3Cpath d='M12 9.4S10.6 3.8 8.2 3.8a2.8 2.8 0 0 0 0 5.6zM12 9.4s1.4-5.6 3.8-5.6a2.8 2.8 0 0 1 0 5.6z'/%3E%3C/svg%3E"); --icm-clipboard: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4.9' y='5.4' width='14.2' height='15.7' rx='2.1'/%3E%3Crect x='8.6' y='2.8' width='6.8' height='3.8' rx='1.3'/%3E%3Cpath d='M8.8 12h6.4M8.8 16h4.2'/%3E%3C/svg%3E"); --icm-warning: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4.2 2.8 20h18.4z'/%3E%3Cpath d='M12 10v4.2'/%3E%3Cpath d='M12 17.4h.01'/%3E%3C/svg%3E"); --icm-bag: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.6 8h14.8l-1.1 11.2a2 2 0 0 1-2 1.8H7.7a2 2 0 0 1-2-1.8z'/%3E%3Cpath d='M8.6 8V6.6a3.4 3.4 0 0 1 6.8 0V8'/%3E%3C/svg%3E"); --icm-x: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E"); } /* @icm:end */ /* Частый случай — шеврон раскрытия у
. Отдельный класс, чтобы не повторять пять строк в каждом компоненте: вешается на сам
. */ .fold-ic>summary::after{ content:"";width:15px;height:15px;flex:none;margin-left:auto; background:currentColor;color:var(--mut); -webkit-mask:var(--icm-chevron-down) no-repeat center/contain; mask:var(--icm-chevron-down) no-repeat center/contain; transition:transform .18s} .fold-ic[open]>summary::after{transform:rotate(180deg)}