/* * Тема личного кабинета. Обычный CSS, без Tailwind и без сборки: Filament публикует * этот файл сам (`Css::make()` в AppPanelProvider → `filament:assets`, который уже * вызывается из `filament:upgrade` при сборке образа). * * Цвета сюда почти не попадают: шкалы 50…950 уходят в `->colors()`, и Filament сам * выбирает доступную пару «фон + текст». Здесь — только то, что шкалами не выражается: * радиусы, размеры текста, границы контролов, кольцо фокуса и наведение кнопки. * * Переменные --af-* и @font-face печатает resources/views/design/tokens.blade.php * в конец , значения — из config/design.php. Шрифты живут там, а не здесь, * потому что страница выдачи подписки работает на другом домене и без этого файла. * * Скомпилированный CSS Filament ссылается на переменные Tailwind v4 * (`border-radius:var(--radius-lg)`, `font-size:var(--text-sm)`, `--tw-ring-color`), * поэтому переопределения ниже работают без пересборки Tailwind. */ /* --- Форма и размер ---------------------------------------------------------------- */ .fi-body { /* Радиусы Filament: md — бейджи, lg — кнопки и поля, xl — карточки. */ --radius-md: var(--af-radius-sm); --radius-lg: var(--af-radius-md); --radius-xl: var(--af-radius-lg); /* Шкала текста: xs — body-sm, sm и base — body, lg — subheading, xl — heading. Подписи полей (label, 12px) задаются отдельно ниже: это не размер общего назначения, а роль. */ --text-xs: 13px; --text-xs--line-height: 19px; --text-sm: 15px; --text-sm--line-height: 22px; --text-base: 15px; --text-base--line-height: 22px; --text-lg: 17px; --text-lg--line-height: 24px; --text-xl: 22px; --text-xl--line-height: 28px; /* Границу карточки держит hairline, а не тень: в тёмной теме тень не читается. */ --shadow-xs: var(--af-shadow-card); --shadow-sm: var(--af-shadow-card); /* Filament красит текст `gray-950` и `white`, а токен ink — мягче обоих. */ color: var(--af-ink); } /* Тень как слой — только у модальных окон и выпадающих меню. */ .fi-modal-window, .fi-dropdown-panel { box-shadow: var(--af-shadow-overlay); } /* --- Подписи полей и шапки колонок -------------------------------------------------- * Роль `label` из брендбука: прописные с межбуквенным 0.08em, больше нигде. */ .fi-fo-field-label, .fi-in-entry-label, .fi-ta-header-cell { font-size: var(--af-label-size); line-height: var(--af-label-line); letter-spacing: var(--af-label-tracking); text-transform: uppercase; } /* --- Границы контролов -------------------------------------------------------------- * У Filament это `ring-gray-950/10` — около 1,5:1 на белом. Брендбук требует 3:1, * поэтому поля, чекбоксы и селекты обводятся border-control (3,15:1 и выше во всех * сочетаниях, см. DesignContrastTest). */ .fi-body .fi-input-wrp, .fi-body .fi-fo-select-wrp, .fi-body .fi-checkbox-input, .fi-body .fi-radio-input { --tw-ring-color: var(--af-border-control); } /* Поле ввода — утопленная область, а не карточка. */ .fi-body .fi-input-wrp, .fi-body .fi-fo-select-wrp { background-color: var(--af-surface-sunken); } /* --- Границы карточек --------------------------------------------------------------- * «Границу карточки держит hairline, а не тень»: у Filament это кольцо gray-950 с * прозрачностью 5%, и в светлой теме белая карточка на почти белом фоне теряет края. */ .fi-body .fi-section, .fi-body .fi-simple-main, .fi-body .fi-modal-window, .fi-body .fi-dropdown-panel { --tw-ring-color: var(--af-hairline); } /* --- Кольцо фокуса ------------------------------------------------------------------ * Сплошное, 2px со смещением 2px, одним цветом на всех контролах. Фон при фокусе * не меняется: обводку не заменяем заливкой. * * У поля ввода это именно outline со смещением, а не перекрашенное кольцо Filament: * его кольцо прижато к границе, и брендовый красный вплотную к полю читается как * ошибка. Граница поля при фокусе остаётся border-control. */ .fi-body :focus-visible { outline: 2px solid var(--af-focus); outline-offset: 2px; } .fi-body .fi-input-wrp:focus-within { --tw-ring-color: var(--af-border-control); outline: 2px solid var(--af-focus); outline-offset: 2px; } /* --- Главная кнопка ----------------------------------------------------------------- * Filament на наведении светлеет (оттенок 500), брендбук требует темнеть до * brand-pressed. Шкалу ради этого не искривляем: оттенок 500 занят кольцом фокуса * кнопки и иконкой бейджа. */ .fi-body .fi-btn.fi-color-primary:not(.fi-outlined):not(.fi-disabled):hover { --hover-bg: var(--af-brand-pressed); --dark-hover-bg: var(--af-brand-pressed); background-color: var(--af-brand-pressed); } /* --- Данные, которые сверяют посимвольно -------------------------------------------- * Ссылка подписки, идентификатор платежа, суммы и даты. Моноширинный ставится в коде * (`->fontFamily(FontFamily::Mono)`), здесь — только цифры в колонку. */ .fi-body .fi-font-mono { font-variant-numeric: tabular-nums; }