/* Токены витрины — отдельным листом, с 1.9.0. --------------------------------------------------------------------------- Жили в начале `estiprint-frontend.css` и грузились только там, где стоит калькулятор. Кабинет клиента рисуется тем же языком — шрифт, акцент, скругления, состояния, — и копировать их туда значило бы развести две палитры, которые однажды разойдутся. Теперь лист один, и от него зависят и калькулятор, и всякая поверхность аддона. Корень `.estiprint-surface` — для таких поверхностей: аддон ставит класс на свой корень и получает токены, не притворяясь калькулятором. Цвета студии из Storefront → Colours приклеены к этому листу, так что действуют везде, где он подключён. */ /* Токены объявлены на своих корнях, а не на `:root`, и все до одного с приставкой `--ep-`. --------------------------------------------------------------------------- Раньше здесь стояли `--color-accent`, `--color-gray`, `--radius-card`, `--font-family-primary` — на `:root` и общими именами. Половина современных тем и конструкторов объявляет ровно такие же, и совпадение имени перекрашивало кнопки калькулятора без единой строки про кнопки. Хуже того, тема, ставящая `--color-accent` на `body`, выигрывала по специфичности у нашего `:root` — то есть побеждала всегда. Корней три, потому что всплывающая форма и окно согласия живут вне секции: их выводит `estiprint3d_after_calculator`, и до них наследование от секции не доходит. Магазину оставлен именованный крючок: `--estiprint-accent` и соседи. Кто хочет перекрасить калькулятор — делает это одним объявлением и осознанно, а не случайным совпадением имён. */ .estiprint-calculator-section, .estiprint-popup, .estiprint-scrim, .estiprint-surface { --ep-font-family: var(--estiprint-font, 'Montserrat', sans-serif); /* Drawn, not typed: a glyph inherits the text font and drifts with it, and an emoji renders differently on every platform. Painted with currentColor through a mask, so it follows whatever colour its owner has. */ --ep-warning-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm-1 5h2v8h-2V7zm0 10h2v2h-2v-2z'/%3E%3C/svg%3E"); --ep-color-accent: var(--estiprint-accent, #DD0B2F); --ep-color-accent-hover: var(--estiprint-accent-hover, #BB0F26); --ep-color-disabled: #D9D9D9; --ep-color-light-gray: #EDEDED; --ep-color-gray: #D9D9D9; --ep-color-graphite: #4C5359; --ep-color-placeholder: #77828C; --ep-color-title: var(--estiprint-ink, #000); --ep-color-gradient-red: linear-gradient(288deg, #BB0F26 16.92%, #DD0B2F 83.91%); --ep-color-gradient-gray: linear-gradient(90deg, #3E3D40 3.13%, #58585A 97.59%); --ep-shadow-calculator: 0 4px 124px rgba(0, 0, 0, 0.1); --ep-radius-card: var(--estiprint-radius-card, 30px); --ep-frame-max: var(--estiprint-max-width, 1170px); --ep-radius-field: 15px; --ep-radius-btn-sm: 10px; } /* ── Мост к раскладке макета ───────────────────────────────────────────────── Макеты калькулятора (`docs/design/`) написаны своими именами — `--ink`, `--line`, `--accent`, `--r-sm`, — и в них своя палитра: Hanken Grotesk, розовый `#e54b63`, лавандовые поверхности. Витрина остаётся на своей: Montserrat, `#DD0B2F`, нейтральные серые. Здесь имена макета получают значения витрины, и раскладку можно верстать по макету, не таща его цвета. Радиусы взяты по месту, а не буквально: внешние карточки и поля остаются крупными, как были, а строки списка и чипы — на мелкой шкале. Радиус 30px на строке высотой 46px съел бы ту плотность, ради которой макет и рисовался: по замеру из BRIEF.md, сорок одинаковых деталей стоили 242 клика, а в этой раскладке — 9. ------------------------------------------------------------------------- */ .estiprint-calculator-section, .estiprint-popup, .estiprint-scrim, .estiprint-surface { --ep-font: var(--ep-font-family); --ep-ink: var(--ep-color-title); --ep-ink-2: var(--ep-color-graphite); --ep-ink-3: var(--ep-color-placeholder); --ep-line: var(--ep-color-light-gray); --ep-line-strong: var(--ep-color-gray); --ep-accent: var(--ep-color-accent); --ep-accent-hover: var(--ep-color-accent-hover); /* Тинт акцента: 6% от #DD0B2F на белом. Для наведения и «горячей» зоны перетаскивания — не для выбранной строки: красная подложка под выбором читалась бы ошибкой. Выбранную метит полоса слева на нейтральном фоне, как в макете. */ --ep-accent-soft: #fdf0f3; --ep-surface: #fff; --ep-surface-alt: #f7f7f8; --ep-r-card: var(--ep-radius-card); --ep-r-field: var(--ep-radius-field); --ep-r-sm: var(--ep-radius-btn-sm); --ep-r-chip: 6px; /* Рост управляющих элементов. Кнопки набирали высоту из своих отступов, и в одном ряду стояли 14, 24 и 26 пикселей — ряд читался неровным, хотя каждая кнопка по отдельности выглядела прилично. */ --ep-h-lg: 52px; --ep-h-md: 44px; --ep-h-sm: 32px; --ep-h-row: 26px; --ep-shadow-card: var(--ep-shadow-calculator); } /* Состояния: наведение, фокус, выбор, затемнение. --------------------------------------------------------------------------- По одному значению на каждое — было пять наведений, четыре написания рамки фокуса, два вида выбора и два затемнения, хотя вопросов всего четыре: где курсор, где фокус, что выбрано, что накрыто. **Цвета — из палитры плагина, а не из моста к макетам.** Мост переводит раскладку: `--ep-surface-alt` и его соседи пришли из артбордов вместе с сеткой. Состояния — это уже не раскладка, и красятся они тем же, чем красится всё остальное на витрине: серый `#EDEDED`, чернила `#000`, акцент `#DD0B2F` и его шестипроцентный оттенок. **Каждое перекрывается одним объявлением.** У каждого токена свой именованный крючок `--estiprint-*`, как у акцента и шрифта, и объявить их магазин может где угодно выше по дереву — хоть на `body`: body { --estiprint-hover-surface: #eef4ff; --estiprint-hover-danger: rgba(0, 90, 200, .08); --estiprint-focus: #0057d8; --estiprint-selected: #0057d8; --estiprint-scrim: rgba(10, 20, 40, .5); } Умолчание у каждого — старое значение витрины, так что молчание магазина ничего не меняет. */ .estiprint-calculator-section, .estiprint-popup, .estiprint-scrim, .estiprint-surface { /* Наведение нейтральное и опасное разведены нарочно: дубль и «плюс» ведут себя как кнопки, удаление — как удаление, и цвет говорит об этом раньше подписи. Опасное — оттенок, а не плотный цвет: он ложится на любую подложку, в том числе на выбранную строку. */ --ep-hover-surface: var(--estiprint-hover-surface, var(--ep-color-light-gray)); --ep-hover-ink: var(--estiprint-hover-ink, var(--ep-color-title)); --ep-hover-danger: var(--estiprint-hover-danger, rgba(221, 11, 47, 0.06)); /* Обводка под курсором у того, у кого вместо подложки рамка: плитка заполнения, полоса сроков, кнопки групповых действий. */ --ep-hover-line: var(--estiprint-hover-line, var(--ep-line-strong)); /* Рамка обхода с клавиатуры. Толщину и смещение тоже можно назначить: на тёмной теме двух пикселей чернил не видно. */ --ep-focus-color: var(--estiprint-focus, var(--ep-color-title)); --ep-focus-width: var(--estiprint-focus-width, 2px); --ep-focus-ring: var(--ep-focus-width) solid var(--ep-focus-color); --ep-focus-offset: var(--estiprint-focus-offset, 2px); /* Выбор в списках настроек — обводкой и бледной подложкой, как у полосы сроков: ячейка остаётся читаемой, а помечен её край. Заливка чернилами осталась там, где ячейка сама по себе метка, — у переключателя валюты. */ --ep-selected-line: var(--estiprint-selected, var(--ep-color-accent)); --ep-selected-surface: var(--estiprint-selected-surface, var(--ep-accent-soft)); --ep-selected-ink: var(--estiprint-selected-ink, var(--ep-color-title)); --ep-selected-shadow: var(--estiprint-selected-shadow, 0 1px 3px rgba(0, 0, 0, .06)); /* Состояние строки заявки: готова, требует настройки, требует внимания, меряется. У каждого два цвета — подложка пилюли и её чернила, — и полоса слева на строке берёт вторые: три пикселя бледной подложки на белом фоне не видно вовсе. Токенами, потому что цвет один, а мест два, и разойтись им негде. */ --ep-state-ready: var(--estiprint-state-ready, #1c5e19); --ep-state-ready-bg: var(--estiprint-state-ready-bg, #e8fbe7); --ep-state-todo: var(--estiprint-state-todo, #6b6b6b); --ep-state-todo-bg: var(--estiprint-state-todo-bg, #f0f0f0); --ep-state-warn: var(--estiprint-state-warn, #7a5300); --ep-state-warn-bg: var(--estiprint-state-warn-bg, #fff4d6); --ep-state-busy: var(--estiprint-state-busy, var(--ep-color-placeholder)); --ep-state-busy-bg: var(--estiprint-state-busy-bg, var(--ep-surface-alt)); --ep-scrim: var(--estiprint-scrim, rgba(20, 23, 26, 0.4)); --ep-shadow-pop: var(--estiprint-shadow-pop, 0 6px 20px rgba(0, 0, 0, .12)); --ep-shadow-dialog: var(--estiprint-shadow-dialog, 0 18px 60px rgba(0, 0, 0, .22)); --ep-z-pop: var(--estiprint-z-pop, 30); --ep-z-overlay: var(--estiprint-z-overlay, 9999); } /* Перекрасил магазин акцент — перекрасился и его бледный оттенок, без второго объявления. Числом оттенок остаётся там, где браузер не умеет смешивать цвета: 6% от #DD0B2F это ровно то, что стояло на витрине до сих пор. */ @supports (background: color-mix(in srgb, red 6%, transparent)) { .estiprint-calculator-section, .estiprint-popup, .estiprint-scrim, .estiprint-surface { --ep-hover-danger: var(--estiprint-hover-danger, color-mix(in srgb, var(--ep-color-accent) 6%, transparent)); /* Тем же следом идёт бледная подложка выбранной ячейки и плашек: магазин, сменивший один акцент, получал синюю обводку на розовой подложке — числом она за акцентом не ходит. */ --ep-accent-soft: color-mix(in srgb, var(--ep-color-accent) 6%, #fff); } }