@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&family=Unbounded:wght@600;700&display=optional'); /* Kuznya app-ui-kit — вендорована збірка для цього демо. Джерело: D:/Dev/app-ui-kit/ (tokens.css + components/). Розійшлося -> кіт правий. Склеєно в один файл, щоб не тримати render-blocking запити на кожен компонент. Єдина правка проти джерела: display=swap -> display=optional у Google Fonts (канон Kuznya_Web_Build_Canon 4.2). */ /* ==== tokens.css ==== */ /* ========================================================================== Design OS — Шар 2: App UI Kit — tokens.css Джерело правди токенів для продуктових застосунків Кузні (NES, Telegram Mini App, дашборди/кабінети). Походить від forge.css (Brand_Core) — розійшлося → forge.css правий. Source of truth бренду: D:/Dev/kuznya-astro/src/styles/forge.css Патерн theme-able (рішення Тараса 23.07: єдина база + легка зміна теми/акценту під проект): - Нейтральна база (dark/light) → атрибут data-theme на - Акцент (--acc) → атрибут data-acc на Компоненти НІКОЛИ не хардкодять hex — тільки var(--токен). ========================================================================== */ :root { /* --------------------------------------------------------------------- Шрифтова трійка --------------------------------------------------------------------- */ --body: 'Manrope', system-ui, -apple-system, sans-serif; --mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', monospace; /* forge.css цю змінну ще НЕ має (прогалина, закриває T1.6) */ --disp: 'Unbounded', 'Manrope', sans-serif; /* лише лого / одне слово в empty-state, ≥24px. НІКОЛИ body/UI */ /* --------------------------------------------------------------------- Металева геометрія --------------------------------------------------------------------- */ --rad: 20px; /* картки */ --rad-sm: 12px; /* контроли: кнопки, інпути, badge */ /* Тришарова шкала елевації — картка(hover) < база(toast/app-shell) < оверлей(modal/dropdown). Не множимо ВІДТІНКИ, лише СИЛУ — той самий чорний, три глибини. */ --shadow-sm: 0 6px 16px -6px rgba(0, 0, 0, 0.30), 0 2px 6px -2px rgba(0, 0, 0, 0.20); --shadow: 0 8px 24px -8px rgba(0, 0, 0, 0.35), 0 2px 8px -2px rgba(0, 0, 0, 0.25); --shadow-lg: 0 16px 40px -12px rgba(0, 0, 0, 0.50), 0 4px 14px -4px rgba(0, 0, 0, 0.32); /* --------------------------------------------------------------------- Фірмовий рух — тільки у відповідь на дію користувача --------------------------------------------------------------------- */ --e-out: cubic-bezier(0.16, 1, 0.3, 1); --e-soft: cubic-bezier(0.22, 0.61, 0.36, 1); --dur-fast: 150ms; /* hover / press / toggle */ --dur-base: 200ms; /* drawer / sheet */ --dur-slow: 250ms; /* dialog */ /* --------------------------------------------------------------------- Нейтральна база — DARK (default). Джерело: D:/Dev/dwr/app/globals.css --------------------------------------------------------------------- */ --bg: #0f1117; --surface: #171a22; --surface-2: #1e222c; --border: #262b36; --ink: #e8ecf3; --mut: #8891a0; /* --------------------------------------------------------------------- Акцент — СЛОТ (theme-able). Default preset = sky (NES). Вживається ЛИШЕ на: primary-кнопка, активний пункт nav, лінк, каретка, focus-ring. ⛔ НІКОЛИ заливка площин (>10% площі). --------------------------------------------------------------------- */ --acc: #38bdf8; --acc-ink: #04121a; /* текст/іконка поверх СУЦІЛЬНОЇ заливки акцентом (напр. primary-кнопка) */ --acc-tint: color-mix(in srgb, var(--acc) 12%, transparent); /* hover/active фон — НЕ заливка, НЕ side-stripe */ --acc-tint-strong: color-mix(in srgb, var(--acc) 20%, transparent); /* active/pressed, трохи сильніше */ --focus-ring: color-mix(in srgb, var(--acc) 45%, transparent); /* Двоколірний градієнт акценту — ГЕРОЙ-елементи (primary-кнопка, брендовані CTA). Дрібний UI (focus-ring/tint/nav) лишається суцільним --acc — градієнт не всюди. */ --acc-grad: linear-gradient(135deg, #38bdf8, #7dd3fc); /* --------------------------------------------------------------------- Бренд-момент — фірмовий Кузня-перехід (ember→gold→cyan), НЕЗАЛЕЖНИЙ від theme/acc-слоту: це ідентичність, не UI-стан. Вживання: лого-марка, badge «Зроблено в Кузні» (dot, НЕ заливка тексту — ⛔ gradient-text). --------------------------------------------------------------------- */ --brand-molten: linear-gradient(135deg, #ff5e00, #d4af37 55%, #00d2d3); /* --------------------------------------------------------------------- Data-палітра — ТІЛЬКИ на даних (чарти/статуси/категорії/аватар-фони) ⚠️ звірити з D:/Dev/dwr/app/globals.css при уніфікації T1.6 --------------------------------------------------------------------- */ --c1: #8b5cf6; --c2: #22c55e; --c3: #818cf8; --c4: #f59e0b; --c5: #ec4899; --c6: #2dd4bf; /* Semantic (статуси, badge) */ --ok: #22c55e; --warn: #f59e0b; --danger: #f04444; --ok-tint: color-mix(in srgb, var(--ok) 14%, transparent); --warn-tint: color-mix(in srgb, var(--warn) 14%, transparent); --danger-tint: color-mix(in srgb, var(--danger) 14%, transparent); --danger-ink: #fff5f5; /* текст/іконка поверх СУЦІЛЬНОЇ заливки --danger (кнопка danger), за аналогією з --acc-ink */ /* --------------------------------------------------------------------- Стани контролів + похідні для компонентів (додано T1.3, components/) --------------------------------------------------------------------- */ --disabled-opacity: 0.45; /* уніфікована непрозорість для будь-якого disabled-контролу */ --skeleton-shine: color-mix(in srgb, var(--ink) 8%, transparent); /* блиск, що пробігає по skeleton (база = --surface-2) */ --scrim: rgba(4, 6, 10, 0.64); /* підложка модалки/оверлею — DARK, світлішає в :root[data-theme='light'] */ /* Ink-пара для тексту на насиченому --c1…--c6 (аватари, data-свотчі) — контраст залежить від яскравості кожного кольору, НЕ від теми, тому це окрема пара, а не похідна --ink (яка сама міняється темою). */ --c-ink-light: #f7f8fa; /* на темних c1/c2/c3/c5 */ --c-ink-dark: #14151b; /* на світлих c4/c6 */ /* --------------------------------------------------------------------- Типографічна шкала (px). Semibold 600 — максимум для заголовків UI, жодного 800/900. line-height 1.45 body / 1.2 заголовки. --------------------------------------------------------------------- */ --fs-caption: 12px; --fs-secondary: 13px; --fs-body: 15px; /* база */ --fs-section: 17px; /* заголовок секції */ --fs-title: 20px; /* титул сторінки */ --fs-display: 24px; /* display, лише --disp, ≥24px */ --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; /* стеля для заголовків UI */ --fw-bold: 700; /* дозволено лише в body-контексті (напр. виділення), не в заголовках */ --lh-body: 1.45; --lh-heading: 1.2; /* --------------------------------------------------------------------- Простір — 4px base grid --------------------------------------------------------------------- */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-6: 24px; --sp-8: 32px; --sp-12: 48px; /* Висота контролів */ --ctrl-h-compact: 36px; --ctrl-h-default: 40px; --ctrl-h-mobile: 44px; /* tap-мінімум */ } /* ========================================================================== LIGHT тема — дзеркальна нейтральна база. Перемикається data-theme="light" на . Акцент (--acc) сюди НЕ входить — він незалежний слот. ========================================================================== */ :root[data-theme='light'] { /* 23.07 фідбек власника: попередня light «виїдала очі» (чистий #fff, майже-чорний ink). Пом'якшено — нижчий контраст поверхонь, ink НЕ #000, тіні світліші. Перевірено: --mut на --bg/--surface ще ≥ AA (4.5:1). */ --bg: #e8ebf0; --surface: #f5f7fa; --surface-2: #eceff4; --border: #d3d9e3; --ink: #1a1e26; --mut: #5b6472; --shadow-sm: 0 6px 16px -6px rgba(26, 30, 38, 0.07), 0 2px 6px -2px rgba(26, 30, 38, 0.04); --shadow: 0 8px 24px -8px rgba(26, 30, 38, 0.08), 0 2px 8px -2px rgba(26, 30, 38, 0.05); --shadow-lg: 0 16px 40px -12px rgba(26, 30, 38, 0.16), 0 4px 14px -4px rgba(26, 30, 38, 0.09); --scrim: rgba(26, 30, 38, 0.44); /* темніша за світлий --bg, щоб діалог виділявся без глибокого dark-затемнення */ } /* ========================================================================== Акцент-пресети — theme-able слот, ортогональний до dark/light. Додати новий проект = новий блок тут, решта системи не змінюється. ========================================================================== */ :root[data-acc='sky'] { /* default — NES */ --acc: #38bdf8; --acc-ink: #04121a; --acc-tint: color-mix(in srgb, var(--acc) 12%, transparent); --acc-tint-strong: color-mix(in srgb, var(--acc) 20%, transparent); --focus-ring: color-mix(in srgb, var(--acc) 45%, transparent); --acc-grad: linear-gradient(135deg, #38bdf8, #7dd3fc); } :root[data-acc='ember'] { /* Kuznya Inbox Mini App — плаский ember замінено на molten-перехід (фідбек: "у Кузні оранжеве з переходом, плавніше, зеленим"). */ --acc: #ff5e00; --acc-ink: #1a0900; --acc-tint: color-mix(in srgb, var(--acc) 12%, transparent); --acc-tint-strong: color-mix(in srgb, var(--acc) 20%, transparent); --focus-ring: color-mix(in srgb, var(--acc) 45%, transparent); --acc-grad: linear-gradient(135deg, #ff5e00, #ff8533); } /* -------------------------------------------------------------------------- Design OS v3 — 4 accent-пресети на вибір користувача (рішення Тараса 24.07, виведено з дропу 265 референсів: колірний кластер тяжів до синьо-teal; ember прибрано з UI-акценту → лишається ЛИШЕ бренд-badge через --brand-molten). Усі 4 — прохолодні jewel-тони на weight-600 (біла --acc-ink проходить APCA), когерентні, теплий ember за брендом не конфліктує. -------------------------------------------------------------------------- */ :root[data-acc='teal'] { /* спокійний-дорогий, відмінний від sky(NES) */ --acc: #0d9488; --acc-ink: #ecfffb; --acc-tint: color-mix(in srgb, var(--acc) 12%, transparent); --acc-tint-strong: color-mix(in srgb, var(--acc) 20%, transparent); --focus-ring: color-mix(in srgb, var(--acc) 45%, transparent); --acc-grad: linear-gradient(135deg, #0d9488, #14b8a6); } :root[data-acc='indigo'] { /* сучасний SaaS, "built for thinkers" */ --acc: #4f46e5; --acc-ink: #f5f4ff; --acc-tint: color-mix(in srgb, var(--acc) 12%, transparent); --acc-tint-strong: color-mix(in srgb, var(--acc) 20%, transparent); --focus-ring: color-mix(in srgb, var(--acc) 45%, transparent); --acc-grad: linear-gradient(135deg, #4f46e5, #6366f1); } :root[data-acc='blue'] { /* класичний довіра-синій (truer за sky) */ --acc: #2563eb; --acc-ink: #f0f6ff; --acc-tint: color-mix(in srgb, var(--acc) 12%, transparent); --acc-tint-strong: color-mix(in srgb, var(--acc) 20%, transparent); --focus-ring: color-mix(in srgb, var(--acc) 45%, transparent); --acc-grad: linear-gradient(135deg, #2563eb, #3b82f6); } :root[data-acc='violet'] { /* характерний, преміум-креатив */ --acc: #7c3aed; --acc-ink: #f8f4ff; --acc-tint: color-mix(in srgb, var(--acc) 12%, transparent); --acc-tint-strong: color-mix(in srgb, var(--acc) 20%, transparent); --focus-ring: color-mix(in srgb, var(--acc) 45%, transparent); --acc-grad: linear-gradient(135deg, #7c3aed, #8b5cf6); } /* ========================================================================== Autofill — браузер малює власний фон поверх поля; перекриваємо під тему, інакше "білий текст на білому" (форми — найчастіша дірка контрасту). ========================================================================== */ input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill { -webkit-text-fill-color: var(--ink); -webkit-box-shadow: 0 0 0 1000px var(--surface-2) inset; box-shadow: 0 0 0 1000px var(--surface-2) inset; transition: background-color 9999s ease-in-out 0s; } /* Базовий скидання шрифту/кольору полотна — зручно для preview.html і хостів, що імпортують tokens.css напряму (не обов'язково для Tailwind-проектів). Глибина (фідбек «плоско, нема нічого на задній формі»): дуже тонкий radial-wash акценту у кутку (~4%, реагує на data-acc САМ, бо color-mix бере поточний --acc) + var(--bg) як другий шар — НЕ заливка, ледь помітно. */ body { background: radial-gradient(1200px circle at 88% -12%, color-mix(in srgb, var(--acc) 4%, transparent), transparent 60%), var(--bg); color: var(--ink); font-family: var(--body); font-size: var(--fs-body); line-height: var(--lh-body); font-variant-numeric: normal; } /* Grain-текстура — фірмовий шар глибини (джерело: forge.css .grain). Опційна, вмикається САМА через body::before — жодної розмітки не треба. Statично видима (не анімована) → prefers-reduced-motion не застосовний. */ body::before { content: ''; position: fixed; inset: 0; z-index: 90; /* навмисно високо (як forge.css) — opacity 0.02 усе одно непомітна, pointer-events:none гарантує, що ніщо під нею не блокується */ pointer-events: none; opacity: 0.02; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } .mono, .tabular { font-family: var(--mono); font-variant-numeric: tabular-nums; } /* ==== button.css ==== */ /* ========================================================================== App UI Kit — Button Варіанти: .btn-primary · .btn-ghost · .btn-danger Розміри: .btn-sm (36px) · .btn (40px, default) · .btn-lg (44px, tap-мінімум) Стани: default · hover · active(:active) · disabled · .is-loading Правило: акцент (--acc) лише на primary; danger — семантична дія (delete/reject), НЕ брендовий акцент, тому суцільна заливка ОК. Жодного спінера — loading показує пульсуючий skeleton-бар замість лейбла. ========================================================================== */ .btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); height: var(--ctrl-h-default); padding: 0 var(--sp-4); border-radius: var(--rad-sm); border: 1px solid transparent; font-family: var(--body); font-size: var(--fs-body); font-weight: 600; line-height: 1; white-space: nowrap; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background var(--dur-fast) var(--e-out), border-color var(--dur-fast) var(--e-out), color var(--dur-fast) var(--e-out), transform var(--dur-fast) var(--e-out), filter var(--dur-fast) var(--e-out), box-shadow var(--dur-fast) var(--e-out); } .btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--focus-ring); } /* ---- Розміри ---- */ .btn-sm { height: var(--ctrl-h-compact); padding: 0 var(--sp-3); font-size: var(--fs-secondary); } .btn-lg { height: var(--ctrl-h-mobile); padding: 0 var(--sp-6); } /* ---- Primary: єдине місце суцільної заливки акцентом — ГЕРОЙ-елемент, тому заливка = --acc-grad (molten-перехід), не плаский --acc. Дрібний акцент (focus-ring/tint/nav) лишається суцільним --acc. ---- */ .btn-primary { background: var(--acc-grad); color: var(--acc-ink); } .btn-primary:hover:not(:disabled):not(.is-loading) { filter: brightness(1.07); transform: translateY(-1px); box-shadow: 0 8px 22px -8px color-mix(in srgb, var(--acc) 50%, transparent); } .btn-primary:active:not(:disabled):not(.is-loading) { transform: scale(0.97); box-shadow: none; } /* ---- Ghost: базова дія без заливки ---- */ .btn-ghost { background: transparent; border-color: var(--border); color: var(--ink); } .btn-ghost:hover:not(:disabled):not(.is-loading) { background: var(--acc-tint); border-color: var(--acc); color: var(--acc); } .btn-ghost:active:not(:disabled):not(.is-loading) { transform: scale(0.97); } /* ---- Danger: деструктивна дія (delete/reject), не брендовий акцент ---- */ .btn-danger { background: var(--danger); color: var(--danger-ink); } .btn-danger:hover:not(:disabled):not(.is-loading) { filter: brightness(1.08); } .btn-danger:active:not(:disabled):not(.is-loading) { transform: scale(0.97); } /* ---- Disabled ---- */ .btn:disabled, .btn.is-disabled { opacity: var(--disabled-opacity); cursor: not-allowed; filter: none; transform: none; } /* ---- Loading: без спінера — лейбл ховається, показується skeleton-бар ---- */ .btn.is-loading { cursor: progress; } .btn.is-loading .btn-label { opacity: 0; } .btn-skeleton { position: absolute; inset: 0; margin: auto; width: 46%; height: 10px; border-radius: 999px; background: color-mix(in srgb, currentColor 22%, transparent); overflow: hidden; display: none; } .btn.is-loading .btn-skeleton { display: block; } .btn-skeleton::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, color-mix(in srgb, currentColor 35%, transparent), transparent); animation: btn-shine 1.1s var(--e-soft) infinite; } @keyframes btn-shine { from { transform: translateX(-100%); } to { transform: translateX(100%); } } @media (prefers-reduced-motion: reduce) { .btn-skeleton::after { animation: none; } .btn-primary:hover:not(:disabled):not(.is-loading) { transform: none; } .btn-primary:active:not(:disabled):not(.is-loading), .btn-ghost:active:not(:disabled):not(.is-loading), .btn-danger:active:not(:disabled):not(.is-loading) { transform: none; } } /* ---- Демо-обгортка (тільки для показу в каталозі/фрагменті, не є API кнопки) ---- */ .demo-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); } /* ==== form-controls.css ==== */ /* ========================================================================== App UI Kit — Form controls: Input / Textarea / Select Спільна обгортка .field (лейбл + контроль + hint/error). Стани: default · hover · focus · .has-error · disabled Помилка = НЕ лише колір: товщий бордер (2px) + іконка-трикутник + текст. Autofill вже перекритий у tokens.css (inset box-shadow --surface-2). ========================================================================== */ .field { display: flex; flex-direction: column; gap: var(--sp-2); width: 100%; } .field-label { font-size: var(--fs-secondary); font-weight: 500; color: var(--mut); } .field-label .req { color: var(--danger); margin-left: 2px; } /* ---- Спільна база для input/textarea/select ---- */ .field-control { height: var(--ctrl-h-default); padding: 0 var(--sp-3); border-radius: var(--rad-sm); border: 1px solid var(--border); background: var(--surface-2); color: var(--ink); font-family: var(--body); font-size: var(--fs-body); width: 100%; outline: none; transition: border-color var(--dur-fast) var(--e-out), box-shadow var(--dur-fast) var(--e-out), background var(--dur-fast) var(--e-out); } .field-control::placeholder { color: var(--mut); } .field-control:hover:not(:disabled):not(.has-error) { border-color: var(--mut); } .field-control:focus, .field-control.is-focus-demo { border-color: var(--acc); box-shadow: 0 0 0 3px var(--focus-ring); } /* .is-focus-demo — лише симуляція :focus для статичного каталогу/скріншота */ .field-control:disabled { opacity: var(--disabled-opacity); cursor: not-allowed; border-style: dashed; /* не лише колір — і форма бордера сигналізує "неактивно" */ } .field-control.has-error { border-width: 2px; border-color: var(--danger); padding: 0 calc(var(--sp-3) - 1px); /* компенсація +1px бордера, щоб текст не «стрибав» */ } .field-control.has-error:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 45%, transparent); } /* Textarea — своя висота, без фіксованого --ctrl-h-* */ textarea.field-control { height: auto; min-height: 96px; padding-top: var(--sp-3); padding-bottom: var(--sp-3); resize: vertical; line-height: var(--lh-body); font-family: var(--body); } textarea.field-control.has-error { padding-top: calc(var(--sp-3) - 1px); padding-bottom: calc(var(--sp-3) - 1px); } /* ---- Select: нативний елемент (доступність/клавіатура з коробки), стилізований мінімально; шеврон — окремий inline SVG (currentColor), НЕ background-image data-URI (там колір неможливо задати через var()). ---- */ .select-wrap { position: relative; } select.field-control { appearance: none; -webkit-appearance: none; padding-right: var(--sp-8); cursor: pointer; } select.field-control:disabled { cursor: not-allowed; } .select-chevron { position: absolute; top: 50%; right: var(--sp-3); transform: translateY(-50%); color: var(--mut); pointer-events: none; } .select-wrap:has(select:disabled) .select-chevron { opacity: var(--disabled-opacity); } .field-hint { font-size: var(--fs-caption); color: var(--mut); } .field-error { display: flex; align-items: center; gap: 6px; font-size: var(--fs-caption); color: var(--danger); font-weight: 500; } .field-error svg { flex-shrink: 0; } /* ---- Демо-обгортка ---- */ .demo-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); } @media (max-width: 640px) { .demo-grid-2 { grid-template-columns: 1fr; } } /* ==== card.css ==== */ /* ========================================================================== App UI Kit — Card Flat surface + 1px border (⛔ glassmorphism, ⛔ тінь за замовчуванням — тінь лише для оверлеїв: modal/dropdown/app-shell, не для рядових карток). Стани: default · hover (.is-hoverable) · loading (.is-loading, skeleton) · порожня картка — див. окремий компонент empty-state.html. ========================================================================== */ .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--rad); padding: var(--sp-6); transition: background var(--dur-base) var(--e-out), border-color var(--dur-fast) var(--e-out), transform var(--dur-fast) var(--e-out), box-shadow var(--dur-fast) var(--e-out); } .card-header { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-4); } .card-title { font-size: var(--fs-section); font-weight: 600; color: var(--ink); } .card-subtitle { font-size: var(--fs-secondary); color: var(--mut); margin-top: 2px; } .card-body { font-size: var(--fs-body); color: var(--ink); line-height: var(--lh-body); } .card-footer { display: flex; align-items: center; gap: var(--sp-3); margin-top: var(--sp-4); } /* ---- Hover: тільки для карток, що клікабельні (список/список-елемент). Підйом + --shadow-sm — елевація "відривається" від flat-каркасу, не декор. ---- */ .card.is-hoverable { cursor: pointer; } .card.is-hoverable:hover, .card.is-hover-demo { border-color: var(--acc); background: var(--surface); transform: translateY(-3px); box-shadow: var(--shadow-sm); } @media (prefers-reduced-motion: reduce) { .card.is-hoverable:hover, .card.is-hover-demo { transform: none; } } /* ---- Loading: skeleton-лінії замість вмісту, картка тримає розмір ---- */ .card.is-loading .card-body, .card.is-loading .card-title, .card.is-loading .card-subtitle { display: none; } .card-skel-line + .card-skel-line { margin-top: var(--sp-3); } /* ---- Демо-обгортка ---- */ .demo-stack { display: flex; flex-direction: column; gap: var(--sp-3); } .demo-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); } @media (max-width: 860px) { .demo-grid-3 { grid-template-columns: 1fr; } } /* ==== badge.css ==== */ /* ========================================================================== App UI Kit — Badge Варіанти: ok / warn / danger / neutral. Статичний елемент (без interactive-станів). Neutral не має власного кольору-акценту → отримує 1px бордер, щоб лишатись помітним на surface-2-фоні (не лише "сірий текст на сірому"). ========================================================================== */ .badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: var(--rad-sm); font-size: var(--fs-caption); font-weight: 600; line-height: 1.4; white-space: nowrap; } .badge-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; } .badge-ok { background: var(--ok-tint); color: var(--ok); } .badge-warn { background: var(--warn-tint); color: var(--warn); } .badge-danger { background: var(--danger-tint); color: var(--danger); } .badge-neutral { background: var(--surface-2); color: var(--mut); border: 1px solid var(--border); padding: 3px 9px; } /* ---- Brand: «Зроблено в Кузні» — фон/текст нейтральні (AA), бренд-момент лише у крапці (--brand-molten). ⛔ НЕ заливка тексту градієнтом — контраст білого/ink на gold/cyan-кінцях градієнта провалюється. ---- */ .badge-brand { background: var(--surface-2); color: var(--ink); border: 1px solid var(--border); padding: 3px 9px; } .badge-brand .badge-dot { background: var(--brand-molten); } /* ---- Демо-обгортка ---- */ .demo-row { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; } /* ==== tabs.css ==== */ /* ========================================================================== App UI Kit — Tabs Underline-патерн: базова лінія --border, активний таб — 2px --acc знизу (легітимне вживання акценту — "каретка"). Border-bottom прозорий на неактивних табах, щоб уникнути стрибка висоти при перемиканні. ========================================================================== */ .tabs { display: flex; gap: var(--sp-6); border-bottom: 1px solid var(--border); } .tab { display: inline-flex; align-items: center; gap: 6px; padding: var(--sp-3) 2px; margin-bottom: -1px; background: none; border: none; border-bottom: 2px solid transparent; color: var(--mut); font-family: var(--body); font-size: var(--fs-body); font-weight: 500; cursor: pointer; transition: color var(--dur-fast) var(--e-out), border-color var(--dur-fast) var(--e-out); } .tab:hover:not(.is-active):not(.is-disabled) { color: var(--ink); } .tab:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--focus-ring); border-radius: 4px; } .tab.is-active { color: var(--ink); font-weight: 600; border-bottom-color: var(--acc); } .tab.is-disabled { opacity: var(--disabled-opacity); cursor: not-allowed; pointer-events: none; } .tab-count { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: var(--fs-caption); color: var(--mut); background: var(--surface-2); border-radius: 999px; padding: 1px 7px; } .tab.is-active .tab-count { color: var(--acc); background: var(--acc-tint); } .tab-panel { padding-top: var(--sp-4); color: var(--ink); font-size: var(--fs-body); } /* ==== table.css ==== */ /* ========================================================================== App UI Kit — Table Обгортка .table-wrap = overflow-x:auto (обов'язково — таблиці ширші за мобільний viewport НЕ ламають layout). Числа — .mono.tabular (з tokens.css). Стани: default · zebra (опційно, .is-zebra) · hover рядка · loading (skeleton-рядки) · empty (порожній рядок на всю ширину). ========================================================================== */ .table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--rad); background: var(--surface); } .table { width: 100%; border-collapse: collapse; font-size: var(--fs-body); min-width: 560px; /* нижче — горизонтальний скрол в обгортці, а не стиснення колонок */ } .table th { text-align: left; padding: var(--sp-3) var(--sp-4); font-size: var(--fs-caption); font-weight: 600; color: var(--mut); text-transform: uppercase; letter-spacing: .04em; border-bottom: 1px solid var(--border); white-space: nowrap; } .table td { padding: var(--sp-3) var(--sp-4); color: var(--ink); border-bottom: 1px solid var(--border); } .table tbody tr:last-child td { border-bottom: none; } .table tbody tr:hover { background: var(--surface-2); } .table th.num, .table td.num { text-align: right; } .table.is-zebra tbody tr:nth-child(even) { background: var(--surface-2); } .table.is-zebra tbody tr:nth-child(even):hover { background: var(--border); } /* ---- Loading: skeleton-рядки замість даних ---- */ .table-skel-cell { padding: var(--sp-3) var(--sp-4); } /* ---- Empty: один рядок на всю ширину ---- */ .table-empty-row td { padding: var(--sp-12) var(--sp-4); text-align: center; } .table-empty { display: flex; flex-direction: column; align-items: center; gap: var(--sp-2); color: var(--mut); } .table-empty svg { color: var(--mut); } .table-empty-title { font-size: var(--fs-body); font-weight: 500; color: var(--ink); } /* ==== nav-item.css ==== */ /* ========================================================================== App UI Kit — NavItem Стани: default · hover · active (.is-active) · disabled/locked (.is-disabled) Активний пункт — одне з ЛЕГІТИМНИХ місць вживання --acc (bg-tint, ≤10%). Іконка — inline SVG stroke=currentColor, тому сама підхоплює колір стану без жодного хардкоду. ========================================================================== */ .nav-item { display: flex; align-items: center; gap: var(--sp-3); height: var(--ctrl-h-default); padding: 0 var(--sp-3); border-radius: var(--rad-sm); color: var(--mut); font-size: var(--fs-body); font-weight: 500; cursor: pointer; text-decoration: none; transition: background var(--dur-fast) var(--e-out), color var(--dur-fast) var(--e-out); } .nav-item .ic { flex-shrink: 0; display: inline-flex; } .nav-item:hover:not(.is-disabled), .nav-item.is-hover-demo { background: var(--surface-2); color: var(--ink); } /* .is-hover-demo — лише симуляція :hover для статичного каталогу */ .nav-item:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--focus-ring); } .nav-item.is-active { background: var(--acc-tint); color: var(--acc); font-weight: 600; } .nav-item.is-disabled { opacity: var(--disabled-opacity); cursor: not-allowed; pointer-events: none; } .nav-item .lock { margin-left: auto; flex-shrink: 0; } /* ---- Демо-обгортка ---- */ .demo-stack { display: flex; flex-direction: column; gap: var(--sp-1); width: 232px; } /* ==== app-shell.css ==== */ /* ========================================================================== App UI Kit — AppShell-layout Канон: Kuznya_Web_Build_Canon §3.5 — сайдбар у 3 СТАНАХ (не є/нема): ≥1280px full --sb:248px (лейбли+іконки) 768–1279px collapsed --sb:72px (лише іконки, лейбли font-size:0) <768px off-canvas --sb:250px, transform:translateX(-100%) + .is-open --sb — локальна custom property НА .shell (не :root) — компонент інкапсульований, не забруднює глобальний простір токенів. margin-left на .shell-main (НЕ CSS grid) — контент ніколи не «затирається» під fixed-сайдбаром при звуженні (задокументована граблина canon). Лейбли пунктів меню — текстові вузли (див. nav-item.html: …Текст), тому font-size:0 на .nav-item коректно ховає ЛИШЕ текст, іконка має власний px-розмір через атрибути width/height у SVG (не em) і не зменшується. ========================================================================== */ .shell { --sb: 248px; position: relative; min-height: 100vh; background: var(--bg); overflow-x: hidden; } .shell-sidebar { position: fixed; top: 0; left: 0; bottom: 0; width: var(--sb); background: var(--surface); border-right: 1px solid var(--border); padding: var(--sp-6) var(--sp-4); display: flex; flex-direction: column; overflow-y: auto; overflow-x: hidden; z-index: 30; transition: width var(--dur-base) var(--e-out), transform var(--dur-base) var(--e-out); } .shell-brand { display: flex; align-items: center; gap: var(--sp-3); font-family: var(--disp); font-size: var(--fs-title); font-weight: 600; color: var(--ink); margin-bottom: var(--sp-8); white-space: nowrap; overflow: hidden; } /* ---- Brand-момент: лого-марка на --brand-molten (форма, НЕ текст — контраст тексту поверх усього градієнта не тримається на gold/cyan). ---- */ .shell-brand-mark { width: 28px; height: 28px; flex-shrink: 0; border-radius: 8px; background: var(--brand-molten); } /* Collapsed/off-canvas стани вже гасять текст через font-size:0 на .shell-brand (нижче) — марка лишається (px, не em), текст зникає. */ .shell-foot { margin-top: auto; font-size: var(--fs-caption); color: var(--mut); white-space: nowrap; overflow: hidden; } .shell-main { margin-left: var(--sb); min-width: 0; display: flex; flex-direction: column; min-height: 100vh; transition: margin-left var(--dur-base) var(--e-out); } .shell-topbar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: var(--sp-3); height: var(--ctrl-h-mobile); padding: 0 var(--sp-6); background: var(--surface); border-bottom: 1px solid var(--border); } .shell-topbar h1 { font-size: var(--fs-title); font-weight: 600; color: var(--ink); margin-right: auto; } .shell-burger { display: none; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: var(--rad-sm); border: 1px solid var(--border); background: var(--surface-2); color: var(--ink); cursor: pointer; } .shell-content { padding: var(--sp-6); flex: 1; } .shell-scrim { display: none; position: fixed; inset: 0; background: var(--scrim); z-index: 25; } /* ---- Стан 2: collapse до іконок, ДІАПАЗОННА медіа (не конфліктує з mobile) ---- */ @media (min-width: 768px) and (max-width: 1279px) { .shell { --sb: 72px; } .shell-sidebar .nav-item { font-size: 0; justify-content: center; } .shell-sidebar .nav-item .ic { font-size: initial; } .shell-sidebar .nav-item .lock { display: none; } .shell-brand, .shell-foot { font-size: 0; } } /* ---- Стан 3: off-canvas ---- */ @media (max-width: 767px) { .shell { --sb: 250px; } .shell-sidebar { transform: translateX(-100%); } .shell-sidebar.is-open { transform: none; } .shell-main { margin-left: 0; } .shell-burger { display: inline-flex; } .shell-scrim.is-open { display: block; } } /* ========================================================================== ⬇ ТІЛЬКИ для статичного каталогу (catalog.html): примусові стани через [data-sb] замість media query, щоб побачити всі 3 стани БЕЗ ресайзу вікна. .shell-frame обмежує сайдбар/контент рамкою прев'ю (position:absolute замість fixed) — у реальному застосунку цей блок НЕ підключається. ========================================================================== */ .shell-frame { position: relative; overflow: hidden; height: 460px; border: 1px solid var(--border); border-radius: var(--rad); background: var(--bg); } .shell-frame .shell-sidebar { position: absolute; } .shell-frame .shell-main { position: absolute; inset: 0; overflow-y: auto; } .shell-frame .shell-topbar { position: sticky; } .shell-frame .shell-scrim { position: absolute; } .shell-frame[data-sb='full'] { --sb: 248px; } .shell-frame[data-sb='collapsed'] { --sb: 72px; } .shell-frame[data-sb='collapsed'] .nav-item { font-size: 0; justify-content: center; } .shell-frame[data-sb='collapsed'] .nav-item .ic { font-size: initial; } .shell-frame[data-sb='collapsed'] .nav-item .lock { display: none; } .shell-frame[data-sb='collapsed'] .shell-brand, .shell-frame[data-sb='collapsed'] .shell-foot { font-size: 0; } .shell-frame[data-sb='off'] { --sb: 250px; } .shell-frame[data-sb='off'] .shell-sidebar { transform: translateX(-100%); } .shell-frame[data-sb='off'].is-open .shell-sidebar { transform: none; } .shell-frame[data-sb='off'] .shell-main { margin-left: 0; } .shell-frame[data-sb='off'] .shell-burger { display: inline-flex; } .shell-frame[data-sb='off'].is-open .shell-scrim { display: block; }