/* ========================================================================== TopShop — Design tokens Єдине джерело правди для кольорів, типографіки, відступів, радіусів. Нічого не хардкодити в компонентах — тільки через var(). ТЗ §40. ========================================================================== */ :root { /* ---------------------------------------------------------------------- КОЛІР — бренд Акцент: електрик-синій. Використовується для CTA, посилань, активних станів фільтрів. Свідомо НЕ помаранчевий — ТЗ §15/§41 забороняють повторювати фірмовий колір x-kom. ---------------------------------------------------------------------- */ --ts-color-primary: #0b63f6; --ts-color-primary-hover: #0a56d6; --ts-color-primary-active: #0948b2; --ts-color-primary-soft: #e8f0fe; /* фон бейджів/підсвітки */ --ts-color-primary-contrast: #ffffff; /* ---------------------------------------------------------------------- КОЛІР — текст Синюватий темний замість чистого чорного: м'якше для очей на білому і зв'язує текст з акцентом. ---------------------------------------------------------------------- */ --ts-color-text: #0a2540; /* основний */ --ts-color-text-strong: #04162a; /* заголовки, ціна */ --ts-color-muted: #4a5a6e; /* підписи, характеристики */ --ts-color-faint: #7b8898; /* плейсхолдери, дрібні мітки */ /* ---------------------------------------------------------------------- КОЛІР — поверхні Білі картки на світло-сірому тлі — так товар "виступає" вперед. ---------------------------------------------------------------------- */ --ts-color-bg: #ffffff; /* основне тло сторінки */ --ts-color-surface: #ffffff; /* картки */ --ts-color-surface-sunken: #eef1f6; /* сірі секції, зебра таблиць */ --ts-color-surface-hover: #f5f7fa; /* Ледь помітний відтінок — великі блоки на кшталт підвалу, яким сірий надає зайвої ваги. */ --ts-color-surface-tint: #f7fafc; /* ---------------------------------------------------------------------- КОЛІР — межі Темніші за типові для WP-тем, але без жорсткості: на зовсім світлих межах картки зливалися з тлом, а надто темні робили каталог схожим на таблицю. ---------------------------------------------------------------------- */ --ts-color-border: #d5dce6; /* стандартна межа картки */ --ts-color-border-strong: #b9c3d0; /* інпути, поділювачі */ --ts-color-border-focus: var(--ts-color-primary); /* ---------------------------------------------------------------------- СМУГИ ПРОКРУТКИ Тонкі й у колір рамок: у сайдбарі фільтрів, мега-меню й шухлядах системна смуга Windows завширшки 17px з'їдала місце й вибивалась із дизайну. Тримаємо в токенах, щоб колір був один на весь сайт. ---------------------------------------------------------------------- */ --ts-scrollbar-size: 8px; --ts-scrollbar-thumb: #c3ccd9; --ts-scrollbar-thumb-hover: var(--ts-color-border-strong); /* ---------------------------------------------------------------------- КОЛІР — семантика Статуси наявності (ТЗ §14) мають читатись миттєво і не конфліктувати з синім акцентом. ---------------------------------------------------------------------- */ --ts-color-success: #16a34a; /* Є в наявності */ --ts-color-success-soft: #e7f7ed; --ts-color-warning: #d97706; /* Мало / Під замовлення */ --ts-color-warning-soft: #fdf3e3; --ts-color-danger: #e11d48; /* Знижка, стара ціна, немає */ --ts-color-danger-soft: #fdeaef; --ts-color-info: #0b63f6; --ts-color-info-soft: var(--ts-color-primary-soft); /* Ціна та знижка — окремі токени, бо семантика не дорівнює "danger" */ --ts-color-price: var(--ts-color-text-strong); --ts-color-price-old: var(--ts-color-faint); --ts-color-discount: #e11d48; /* ---------------------------------------------------------------------- ТИПОГРАФІКА Inter — нейтральний гротеск з добрими цифрами й кирилицею; критично для цін, SKU і таблиць характеристик. tnum вмикає моноширинні цифри. ---------------------------------------------------------------------- */ --ts-font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --ts-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; /* Шкала 1.200 (minor third) — щільна, під насичений каталог */ --ts-text-2xs: 0.6875rem; /* 11px — мітки, SKU */ --ts-text-xs: 0.75rem; /* 12px — дрібні підписи */ --ts-text-sm: 0.8125rem; /* 13px — характеристики в картці */ --ts-text-base: 0.875rem; /* 14px — базовий UI-розмір */ --ts-text-md: 1rem; /* 16px — body тексту сторінок */ --ts-text-lg: 1.125rem; /* 18px */ --ts-text-xl: 1.375rem; /* 22px — ціна в картці */ --ts-text-2xl: 1.625rem; /* 26px — H2 */ --ts-text-3xl: 2rem; /* 32px — H1 / ціна на сторінці товару */ --ts-text-4xl: 2.5rem; /* 40px — hero */ --ts-weight-regular: 400; --ts-weight-medium: 500; --ts-weight-semibold: 600; --ts-weight-bold: 700; --ts-leading-tight: 1.2; /* заголовки */ --ts-leading-snug: 1.35; /* назви товарів */ --ts-leading-normal: 1.5; /* UI */ --ts-leading-relaxed: 1.65; /* довгі описи */ --ts-tracking-tight: -0.015em; /* великі заголовки */ --ts-tracking-normal: 0; --ts-tracking-wide: 0.02em; /* кепс-мітки */ /* ---------------------------------------------------------------------- ВІДСТУПИ — крок 4px ---------------------------------------------------------------------- */ --ts-space-0: 0; --ts-space-1: 0.25rem; /* 4 */ --ts-space-2: 0.5rem; /* 8 */ --ts-space-3: 0.75rem; /* 12 */ --ts-space-4: 1rem; /* 16 */ --ts-space-5: 1.25rem; /* 20 */ --ts-space-6: 1.5rem; /* 24 */ --ts-space-8: 2rem; /* 32 */ --ts-space-10: 2.5rem; /* 40 */ --ts-space-12: 3rem; /* 48 */ --ts-space-16: 4rem; /* 64 */ --ts-space-20: 5rem; /* 80 */ /* ---------------------------------------------------------------------- РАДІУСИ Помірні — техніка має виглядати точно, а не "м'яко". ---------------------------------------------------------------------- */ --ts-radius-sm: 4px; /* бейджі, дрібні контроли */ --ts-radius-md: 8px; /* кнопки, інпути */ --ts-radius-lg: 12px; /* картки */ --ts-radius-xl: 16px; /* модалки, великі блоки */ --ts-radius-full: 999px; /* чіпи, лічильники */ /* ---------------------------------------------------------------------- ТІНІ — стримані; глибина переважно межами, а не тінями ---------------------------------------------------------------------- */ --ts-shadow-xs: 0 1px 2px rgba(10, 37, 64, 0.05); --ts-shadow-sm: 0 1px 3px rgba(10, 37, 64, 0.08); --ts-shadow-md: 0 4px 12px rgba(10, 37, 64, 0.1); --ts-shadow-lg: 0 12px 32px rgba(10, 37, 64, 0.14); --ts-shadow-focus: 0 0 0 3px rgba(11, 99, 246, 0.25); /* ---------------------------------------------------------------------- МАКЕТ ---------------------------------------------------------------------- */ --ts-container-max: 1440px; /* широкий десктоп */ --ts-container-pad: var(--ts-space-4); /* бічні поля на мобільному */ --ts-sidebar-width: 268px; /* колонка фільтрів (ТЗ §26) */ --ts-header-height: 64px; --ts-gutter: var(--ts-space-4); /* проміжок сітки каталогу */ /* ---------------------------------------------------------------------- АНІМАЦІЯ ---------------------------------------------------------------------- */ --ts-duration-fast: 120ms; --ts-duration-base: 180ms; --ts-duration-slow: 280ms; --ts-ease: cubic-bezier(0.4, 0, 0.2, 1); --ts-ease-out: cubic-bezier(0, 0, 0.2, 1); /* ---------------------------------------------------------------------- Z-INDEX — єдина шкала, щоб не ловити війни z-index ---------------------------------------------------------------------- */ --ts-z-base: 1; --ts-z-sticky: 100; --ts-z-header: 200; --ts-z-dropdown: 300; --ts-z-megamenu: 350; --ts-z-overlay: 400; --ts-z-drawer: 450; --ts-z-modal: 500; --ts-z-toast: 600; } /* Поважаємо системне зменшення руху */ @media (prefers-reduced-motion: reduce) { :root { --ts-duration-fast: 0ms; --ts-duration-base: 0ms; --ts-duration-slow: 0ms; } }