/* ═══════════════════════════════════════════════════════════════════════ ДИЗАЙН-ТОКЕНИ REALTBANK CRM — єдине джерело правди. Тут живуть УСІ системні величини: кольори, шрифт і його шкала, радіуси (зокрема радіус кнопок), тіні, відступи, висоти контролів, тривалості анімацій і шари z-index. Якщо величина описує «як виглядає система», а не «як виглядає ця конкретна сторінка» — її місце тут. Один файл, а не тека з десяти. Токени мусять бути в браузері ДО першого правила, яке на них посилається, а @import у CSS вантажиться послідовно: чотири «акуратні» файли — це чотири запити поспіль перед першим пікселем. Поки набір міститься в одному екрані змісту, ділити нічого. Підключений на КОЖНІЙ сторінці CRM (layouts/crm.blade.php), а також у guest-лейауті, друку договору, платіжках і запрошенні забудовника — тобто на токен можна посилатись звідусіль без запасного hex. White-label: клієнтський колір міняється в секції 1 і більше ніде. ЯК КОРИСТУВАТИСЬ • нове правило пише var(--token), а не число; • немає потрібного токена — це розмова про систему, а не привід вписати ще один hex у файл сторінки; • секція 7 (СПАДЩИНА) — не для нового коду, тільки для міграції. Карта, звідки що взялось, і план міграції: docs/design-tokens.md ═══════════════════════════════════════════════════════════════════════ */ :root{ /* ── 1. ФІРМОВИЙ ─────────────────────────────────────────────────── */ --primary: #3585F5; --primary-dark: #04254e; --primary-light: #5ba0ff; --primary-hover: #2A6FD4; --primary-soft: #E6F1FF; /* Напівпрозорий фірмовий — обведення, підсвітка рядка, ghost-стан. У коді це rgba(53,133,245,.7) 176 разів, вписане руками. Тепер має ім'я: змінити фірмовий колір і не забути про ці 176 місць інакше неможливо. */ --primary-fade: rgba(53, 133, 245, .70); /* ── 2. ТЕКСТ ────────────────────────────────────────────────────── */ --text: #111111; --text-muted: #5A6679; /* Контраст на білому: 4.83:1 (WCAG AA для звичайного тексту). Було #9CA3AF = 2.57:1 — підписи полів і мета-рядки не читалися. */ --text-subtle: #6B7280; --text-invert: #FFFFFF; /* ── 3. ПОВЕРХНІ ─────────────────────────────────────────────────── */ --bg: #F8FAFC; --surface: #FFFFFF; /* Підкладка під модалкою й drawer. У коді жила як rgba(0,0,0,.5) — і поруч як .2, .3, .7, тобто затемнення різної сили залежно від того, хто писав вікно. */ --overlay: rgba(0, 0, 0, .50); /* ── 4. МЕЖІ ─────────────────────────────────────────────────────── */ --border: #E2E8F0; --border-strong: #CBD5E1; /* ── 5. АКТИВНЕ ПОЛЕ — наведення й фокус ─────────────────────────── */ /* Один вигляд на будь-який контрол вводу: input, textarea, select, select2, кнопка-дисплей списку. Взятий із кнопки «Всі об'єкти» (.rb-type-control .multiple-menu-btn), бо саме її вигляд власник назвав зразком. Тримати саме тут: інакше два hex-и розповзаються по два десятки файлів і «однаково» живе рівно до наступної сторінки. */ --field-active: #A9CFF8; --field-active-bg: #F1F7FF; /* Кільце фокуса з клавіатури. Не декор: без нього навігація табом сліпа. Виражене через --primary, тому переїжджає разом із ним. */ --focus-ring: 0 0 0 3px rgba(53, 133, 245, .28); /* ── 6. СТАТУСИ ──────────────────────────────────────────────────── */ --success: #1F8A5B; /* Фіолетовий коментаря у стрічці дій. Не «ще один акцент на екран», а колір ОДНОГО типу подій: коментар мусить відрізнятись від задачі й дзвінка з першого погляду. Був хардкодом #7158d8 в activity-rail.css — тобто те саме число, тільки поза системою. */ --accent-violet: #7158D8; --warning: #C8791E; --danger: #DC3545; /* СИНІЙ, ЯКИМ МОЖНА ПИСАТИ. --primary #3585F5 задуманий як акцент — заливка кнопки, активний стан, смужка вкладки. На білому як ТЕКСТ він дає 3.61:1, тобто не дотягує до 4.5:1, які сам регламент і вимагає. Помітно це на «прозорих» кнопках (.btn-outline-primary): напис блідне рівно там, де його читають. Заливки лишаються на --primary, змінюється тільки текст. */ --primary-text: #2A6FD6; /* ТЕКСТ СТАТУСУ НА БІЛОМУ. --warning це колір заливки й межі: на білому він дає 3.38:1, а текст просить 4.5:1. Кнопка «Так, відкликати» була ще гірша — бутстрапівський #ffc107 дає 1.63:1, тобто жовтий напис на білому, який доводиться вгадувати. І це не декоративний підпис, а дія, яку людина мусить прочитати перед тим, як натиснути. Окремий токен, а не заміна --warning: підкладки й межі мають лишитись янтарними, змінюється тільки те, що читають. */ --warning-text: #9C580F; /* М'які підкладки статусів — щоб не хардкодити rgba/hex у шарах */ --success-soft: rgba(31, 138, 91, .10); --warning-soft: rgba(200, 121, 30, .10); --danger-soft: #FDECEC; /* ── 7. СПАДЩИНА — кольори, що вже в коді, але поза системою ─────── */ /* НЕ ВИКОРИСТОВУВАТИ В НОВОМУ КОДІ. Аудит показав другий, паралельний набір базових кольорів: своя межа, свій текст, свій зелений, свій червоний, свій синій. Це не відтінки — це друга система, старша за токени, і вона досі фарбує половину сторінок. #D5DBE3 як межа зустрічається 252 рази, тоді як системний --border — 56. Токени тут заведені НЕ щоб узаконити ці числа, а щоб міграція стала механічною: спершу hex → var(--legacy-*), потім --legacy-* → системний відповідник, по одній сторінці, з очима на екрані. Заміняти 252 межі наосліп одним sed — це змінити вигляд половини CRM однією командою. Колонка «ціль» — у docs/design-tokens.md. Порожня секція = міграція завершена, і тоді цей блок треба видалити. */ --legacy-border: #D5DBE3; /* → --border (межі, 252×) */ --legacy-border-soft: #DCE5F0; /* → --border (м'які межі) */ --legacy-scroll: #C2CDD8; /* → --border-strong (смуга прокрутки)*/ --legacy-text: #334553; /* → --text (основний текст) */ --legacy-text-2: #51677B; /* → --text-muted (другий план) */ --legacy-ink: #14264A; /* → --primary-dark (заголовки) */ --legacy-grey: #919191; /* → --text-subtle */ --legacy-green: #5FB343; /* → --success */ --legacy-red: #F97474; /* → --danger */ --legacy-red-soft: #FDA9A9; /* → --danger-soft */ --legacy-blue: #1478EE; /* → --primary */ /* ── 8. ТІНІ ─────────────────────────────────────────────────────── */ /* Три штуки на всю CRM, і більше не буде. До цього їх було 72 — вписаних руками в дванадцять файлів, і на одній /properties виходило тринадцять різних тіней на 134 елементи. Це не помилка верстальника: коли єдиного джерела немає, кожен пише свою, і сусідні картки починають лежати на різній висоті без жодної на те причини. Висота тут означає рівно одне — наскільки предмет підійнятий над сторінкою, і тому значень рівно стільки, скільки рівнів: 1 — лежить: картка, рядок, плитка; 2 — піднято над вмістом: дропдаун, попап, меню; 3 — поверх усього: модалка, drawer. Потрібен четвертий рівень — це розмова, а не новий rgba у файлі сторінки. */ --shadow-1: 0 1px 2px rgba(16, 24, 40, .06); --shadow-2: 0 4px 12px rgba(16, 24, 40, .10); --shadow-3: 0 12px 32px rgba(16, 24, 40, .14); /* ── 9. РАДІУСИ ──────────────────────────────────────────────────── */ --radius-sm: 4px; --radius: 6px; --radius-lg: 10px; --radius-xl: 16px; /* Дві форми, а не числа: «таблетка» і «коло». У коді це 999px (110×) і 50% (111×) — з варіаціями 50px, 30px, 9999px, які виглядають однаково лише доти, доки елемент не стане вищим. */ --radius-pill: 999px; --radius-circle: 50%; /* Радіус полів рядка фільтрів і пошуку в шапці розділу. Еталон — поля «Ціна від / до» в обʼєктах (0372): виміряно 10px, і це число тепер живе одним токеном. Поля в різних розділах не мають права мати різну форму, а «на око» вони її мали. */ --input-radius: 10px; /* Радіуси РОЛЕЙ. Посилаються на шкалу вище й існують окремо, бо питання «який радіус у кнопок» ставлять саме так — про кнопку, а не про 6px. Захотіли круглі кнопки на всю CRM — тут один рядок, а не пошук по 2811 оголошеннях border-radius. Заміряно в коді: 6px, 7px, 8px, 9px, 10px, 11px і 50px на кнопках сусідніх сторінок. Різниця в один піксель не читається як задум — вона читається як недбалість. */ --btn-radius: var(--radius); /* кнопка */ --btn-radius-pill: var(--radius-pill); /* кнопка-таблетка, чипи */ --card-radius: var(--radius-lg); /* картка, плитка, секція */ --modal-radius: var(--radius-lg); /* модалка, drawer, попап */ --badge-radius: var(--radius-pill); /* бейдж, лічильник, статус */ /* ── 10. ВІДСТУПИ ────────────────────────────────────────────────── */ --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; /* ── 11. ТИПОГРАФІКА ─────────────────────────────────────────────── */ /* Шрифт інтерфейсу. Самі @font-face — у css/base/fonts.css, він підключений поряд і раніше за цей файл. */ --font: "PTSans", system-ui, -apple-system, sans-serif; --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; /* РОЗМІРИ ТЕКСТУ. Шкала: 11 / 12 / 13 / 14 / 16 / 20 / 24. Базовий — 14px, саме він стоїть у коді 1258 разів числом. 11px (--t-2xs) — стеля дрібного: лічильник у вкладці, індекс на бейджі. Для тексту, який читають рядками, він замалий. Значень менше 11px у системі немає свідомо: 10px зустрічається в коді 151 раз і щоразу це підпис, який доводиться примружувати. */ --t-2xs:11px; --t-xs:12px; --t-sm:13px; --t-base:14px; --t-lg:16px; --t-xl:20px; --t-2xl:24px; /* ВАГИ — три, і цього вистачає. У коді 700 стоїть 1447 разів проти 628 у 400: жирним набрано більше половини інтерфейсу, тобто акцент перестав бути акцентом. 600 (--w-medium) — для заголовків секцій і активних станів, 700 — для заголовка сторінки й сум. */ --w-normal: 400; --w-medium: 600; --w-bold: 700; /* ІНТЕРЛІНЬЯЖ. У коді 583 рази стоїть line-height:100%, тобто рядки впритул: з кирилицею це зрізає підрядкові елементи в «Ц», «Щ», «р». --lh-tight (1.2) — найщільніше, що система дозволяє, і воно для одного рядка: заголовка, кнопки, бейджа. Абзаци — --lh-base і нижче. */ --lh-tight: 1.2; --lh-base: 1.4; --lh-loose: 1.55; /* ── 12. РОЗМІРИ КОНТРОЛІВ ───────────────────────────────────────── */ /* Висота — це те, від чого сторінка виглядає рівною або не виглядає. Виміряно: 34px (103×) — поля й селекти, 40px (54×) — головна кнопка, 30px (113×) — щільний варіант у таблицях і тулбарах. Ті самі числа вже описані в premium-core.css як --p-h-control / --p-h-btn; тут вони стають загальносистемними, а --p-* лишаються псевдонімами. */ --h-control: 34px; /* input, select, select2, чип, іконка-кнопка */ --h-btn: 40px; /* головна кнопка дії */ --h-control-sm: 30px; /* щільний ряд: таблиця, тулбар, фільтр */ /* Значки. Один набір розмірів на всю CRM — інакше сусідні іконки в одному рядку відрізняються на два пікселі й рядок «пливе». */ --icon-sm: 14px; --icon: 16px; --icon-md: 20px; --icon-lg: 24px; /* ── 13. РУХ ─────────────────────────────────────────────────────── */ /* Три тривалості. У коді 277 різних значень transition — від .1s linear до півсекундних кубічних кривих, і сусідні кнопки реагують з різною швидкістю. */ --motion-fast: .12s; /* наведення, зміна кольору */ --motion-base: .20s; /* розкриття, зсув, поява */ --motion-slow: .30s; /* панель, drawer, модалка */ --ease: cubic-bezier(.4, 0, .2, 1); --transition: all var(--motion-base) var(--ease); /* ── 14. ШАРИ (Z-INDEX) ──────────────────────────────────────────── */ /* Числа збігаються з бутстрапівськими навмисно: CRM живе всередині Bootstrap 5.3, і власна шкала, яка з ним не збігається, означає, що модалка інколи опиняється під тултіпом. У коді зараз є 9999, 99999, 10001 і 10620 — це не рівні, це «перебити попереднього». Шкала існує, щоб таку суперечку розв'язував список, а не найбільше число. */ --z-base: 1; --z-raised: 10; /* підняте всередині картки: бейдж, кнопка на фото */ --z-dropdown: 1000; --z-sticky: 1020; /* липка шапка таблиці, панель фільтрів */ --z-fixed: 1030; /* сайдбар, шапка CRM, нижній док */ --z-backdrop: 1040; --z-modal: 1050; --z-popover: 1060; --z-tooltip: 1070; --z-toast: 1080; /* сповіщення: поверх усього, зокрема модалки */ /* ── 15. ПЕРЕВИЗНАЧЕННЯ BOOTSTRAP ───────────────────────────────── */ --bs-body-color: var(--text); --bs-border-color: var(--border); --bs-primary: var(--primary); --bs-border-color-translucent: var(--border); --bs-emphasis-color: var(--text); --bs-dropdown-border-color: var(--border); --bs-btn-active-border-color: transparent; /* ── 16. ДРУК ────────────────────────────────────────────────────── */ /* Фарба на папері. Не `--text`: #111 на офісному принтері виходить сіруватим, а документ, який підписують, має бути чорним. Живе токеном, а не хардкодом у стилях друку, — щоб друк лишався частиною системи, а не винятком із неї. */ --print-ink: #000; } /* ═══════════════════════════════════════════════════════════════════════ НИЖЧЕ — НЕ ТОКЕНИ. Кілька правил, які опинились у цьому файлі з однієї причини: він підключений на кожній сторінці, а вони мусять діяти скрізь. Залишені дослівно — переїзд у css/base/ це окрема зміна з перевіркою тих сторінок, що вантажать tokens.css без решти каркаса (друк договору, платіжки, запрошення забудовника). ═══════════════════════════════════════════════════════════════════════ */ /* 3: input/select/textarea #000 */ input, select, textarea { color: var(--text); } /* ── Значок ЖК — синій скрізь ───────────────────────────────────────── Він малюється stroke="currentColor", тобто бере колір батька. Правило для нього стояло під .rb-premium — і на плитках спрацювало, а в мобільній версії й на картці обʼєкта, де цього класу немає, значок лишався темним від кольору тексту. Тому колір тепер на самому значку, а не на контейнері: один клас, одне правило, і жоден новий контейнер більше не зможе його перефарбувати. Файл токенів підключений на КОЖНІЙ сторінці CRM — саме тому правило тут, а не в посторінковому css. */ .rb-ico-jk { color: var(--primary); } /* Сусідні значки того ж рядка — телефон, пошта, агентство. Вони другий план, і мають бути тихішими за назву поруч, а не темнішими за неї. Раніше вони теж брали currentColor від батька й виходили майже чорними — саме через це набір читався як різнобій, а не як один стиль. */ .rb-ico-meta { color: var(--text-subtle); } /* Страхувальний пояс: те саме, але через КОНТЕЙНЕР бейджа, а не через клас значка. Клас з'явився в розмітці недавно, і якщо браузер віддає сторінку зі старого кеша, значка з класом там ще немає — а бейдж є завжди. Тому колір ловиться і за старою розміткою теж. Правило не скоуплене на .rb-premium свідомо: саме через цей скоуп попередня версія працювала на плитках і не працювала ніде більше. */ .pcard-jk svg, .pcard-jk svg path, .pcard-jk svg rect, .pcard-jk svg circle { color: var(--primary); stroke: var(--primary); } /* Заливка — лише там, де значок справді залитий: у контурного fill лишається none, інакше будиночок перетворюється на синю пляму. */ .pcard-jk svg [fill]:not([fill="none"]) { fill: var(--primary); } /* ── Підпис лише для читалок ────────────────────────────────────────── Був описаний тільки як `.rb .rb-sr`, тобто працював у межах однієї сторінки. Спільний компонент картки контакта рендериться і поза тим скоупом — і там підпис «Роль не вказана» не ховався, а плив навколо аватара: «Роль не [Н] а» (Вадим 27.08). Утиліта доступності не може бути посторінковою. Файл токенів підключений скрізь — тому вона тут. */ .rb-sr { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }