/* ================================================================ Dev Tools - Steampunk Base Palette ================================================================ SSOT для всіх steampunk-токенів Dev Tools. ⚠️ КРИТИЧНО: палітра ізольована у .dev-tools-scope НІЯКИХ токенів на :root (вони протечуть на адмін-панель). Використання: 1. Цей файл імпортується ТІЛЬКИ на сторінках Dev Tools (hub + всі інструменти), НЕ глобально в шаблонах адмін-панелі 2. Кожна сторінка Dev Tools має: 3. Токени стають доступні через var(--bg-surface) тощо всередині .dev-tools-scope і його нащадків SSOT документ: memory/project_devtools_steampunk_palette.md Дата прийняття: 2026-04-12 ================================================================ */ /* ╔═══════════════════════════════════════════════════════════════╗ ║ SHAR 0: ШРИФТИ DEV TOOLS (@font-face - top-level) ║ ╚═══════════════════════════════════════════════════════════════╝ Три дедиковані шрифти Dev Tools. Файли в /admin/admin-discord/fonts/. @font-face поза .dev-tools-scope, бо CSS не дозволяє nested @font-face. */ @font-face { font-family: 'f-dev-tools-title-h1'; src: url('/admin/admin-discord/fonts/f-dev-tools-title-h1.woff2') format('woff2'); font-weight: normal; font-style: normal; font-display: swap; } @font-face { font-family: 'f-dev-tools-status'; src: url('/admin/admin-discord/fonts/f-dev-tools-status.woff2') format('woff2'); font-weight: normal; font-style: normal; font-display: swap; } /* Для числових полів - існуючий f-stat-time (часи, стати). Декларуємо локально, щоб сторінки Dev Tools не залежали від main-style-adc.css. */ @font-face { font-family: 'f-stat-time'; src: url('/admin/admin-discord/fonts/f-stat-time.woff2') format('woff2'); font-weight: normal; font-style: normal; font-display: swap; } .dev-tools-scope { /* ╔═══════════════════════════════════════════════════════════╗ ║ SHAR 1: CORE TOKENS ║ ╚═══════════════════════════════════════════════════════════╝ */ /* ─── Поверхні (ієрархія знизу вгору) ─── */ --bg-void: #0d0907; /* фон за модалками, найглибші тіні */ --bg-base: #14100c; /* фон сторінки */ --bg-surface: #1f1812; /* картки, панелі, таблиці */ --bg-elevated: #2a2018; /* модалки, dropdown, tooltip, popover */ --bg-hover: #332618; /* hover на рядках таблиць, пунктах меню */ /* ─── Межі ─── */ --border-dim: #3a2e22; /* роздільники ВСЕРЕДИНІ картки */ --border-metal: #5c4430; /* ДЕФОЛТ: зовнішні межі карток/таблиць/інпутів */ --border-bright: #8c6b46; /* hover на інтерактивних елементах */ --border-focus: #c58b3a; /* focus ring - ТІЛЬКИ для :focus-visible */ /* ─── Текст ─── */ --text-disabled: #4a3f32; /* вимкнені елементи - ніколи для активного */ --text-muted: #7a6a54; /* підписи, timestamps, help-text, placeholder */ --text-body: #bfa37a; /* основний текст, опис, значення полів */ --text-bright: #f3efdc; /* H1-H3, числові значення, важливі мітки */ /* ─── Бренд Dev Tools ─── */ /* СТАТИКА: бренд, primary CTA, active tabs, іконки Dev Tools */ --accent-brass: #c58b3a; --accent-brass-hover: #d89d48; --accent-brass-dim: #8c6328; /* :active, :disabled */ /* РУХ: running процеси, live-індикатори, streaming, прогрес у роботі */ --accent-ember: #e36f3d; --accent-ember-hover: #ef7f4d; --accent-ember-dim: #a34e24; /* brass = статика, ember = рух. Не змішувати в одному елементі. */ /* ╔═══════════════════════════════════════════════════════════╗ ║ SHAR 2: СЕМАНТИКА ║ ╚═══════════════════════════════════════════════════════════╝ */ /* --success - здорові процеси, успішні операції, healthy-статуси */ --success: #56a3a6; --success-bg: rgba(86, 163, 166, 0.15); --success-border: #56a3a6; /* --warning - попередження, m'які проблеми, черги близько до ліміту */ --warning: #e0c489; --warning-bg: rgba(224, 196, 137, 0.15); --warning-border: #e0c489; /* --danger - помилки, критичні стани, деструктивні дії (Delete, Reset) */ --danger: #a3471b; --danger-bg: rgba(163, 71, 27, 0.18); --danger-border: #a3471b; --danger-text: #e36f3d; /* текст поверх danger-фону */ /* --info - нейтральні повідомлення, tooltips, підказки */ --info: #7c8f88; --info-bg: rgba(124, 143, 136, 0.15); --info-border: #7c8f88; /* ╔═══════════════════════════════════════════════════════════╗ ║ SHAR 3: МОДУЛІ (steampunk-версії акцентів 7 модулів) ║ ╚═══════════════════════════════════════════════════════════╝ ⚠️ Це steampunk-версії кольорів модулів, адаптовані до теплої палітри Dev Tools. Використовуються ТІЛЬКИ всередині Dev Tools для ідентифікації (border-left, badge, іконка). Справжні оригінальні кольори модулів (#2ecc71 Observer тощо) залишаються недоторканими у самих модулях адмін-панелі. */ --mod-observer: #7a9e5a; /* зелений, приглушений */ --mod-publisher: #d4a24a; /* стара позолота */ --mod-executor: #b85434; /* іржавий червоний */ --mod-applicant: #5a8299; /* окислена сталь */ --mod-nexus: #4a9590; /* verdigris teal */ --mod-challenger: #c86a1c; /* розпечена мідь */ --mod-paymaster: #2d4a6b; /* вороновий синій */ --mod-devtools: #c58b3a; /* латунь (= accent-brass) */ /* ╔═══════════════════════════════════════════════════════════╗ ║ SHAR 4: РІВНІ ЛОГІВ / SEVERITY ║ ╚═══════════════════════════════════════════════════════════╝ ПРАВИЛО: для severity беремо з родини --log-*, для стану бренд-елементів - з родини --accent-*. Родини не перетинаються. --log-error і --accent-ember можуть мати однаковий хекс - це нормально, але завжди використовуй правильне СЕМАНТИЧНЕ ім'я. */ --log-trace: #5c5046; --log-debug: #7a6a54; --log-info: #7c8f88; --log-notice: #bfa37a; --log-warn: #e0c489; --log-error: #e36f3d; --log-critical: #c14418; --log-fatal-bg: #5a1a0a; --log-fatal-text: #f3efdc; /* ╔═══════════════════════════════════════════════════════════╗ ║ SHAR 5: PEWTER (декоративне олово) ║ ╚═══════════════════════════════════════════════════════════╝ ТІЛЬКИ для декоративних металевих елементів БЕЗ функціонального значення (герб на балці, важкі орнаменти). НЕ перетинається з --border-* (UI-межі) чи --accent-brass (бренд). */ --pewter-dark: #3a322a; --pewter-mid: #5a5048; --pewter-light: #8a8074; --pewter-highlight: #a8998a; /* ╔═══════════════════════════════════════════════════════════╗ ║ SHAR 6: ТИПОГРАФІКА DEV TOOLS ║ ╚═══════════════════════════════════════════════════════════╝ Три роль-базовані токени. Завжди використовуй через var(), ніколи не хардкодь font-family на сторінках інструментів. */ /* Титул сторінки інструменту (h1, dt-title, al-title тощо) */ --font-dt-title: 'f-dev-tools-title-h1', 'Cinzel', 'Oswald', serif; /* Опис/субтитул під титулом (meta, short description, lead-row) */ --font-dt-status: 'f-dev-tools-status', 'IBM Plex Mono', monospace; /* Числові поля (input type=number, timers, counters, digit-only) */ --font-dt-digits: 'f-stat-time', 'IBM Plex Mono', 'Courier New', monospace; /* ╔═══════════════════════════════════════════════════════════╗ ║ SHAR 7: SPACING (ритмічна шкала 4/8/12/16/24/32/48px) ║ ╚═══════════════════════════════════════════════════════════╝ Канонічна шкала spacing - використовується через var(--sp-space-N) у padding/margin/gap. Розрахована на 4-step base (4, 8, 12, 16) + 16-step jumps (24, 32, 48). canon-rule spacing-rhythm перевіряє що raw px у spacing properties обернутий у var(). */ --sp-space-1: 4px; --sp-space-2: 8px; --sp-space-3: 12px; --sp-space-4: 16px; --sp-space-5: 24px; --sp-space-6: 32px; --sp-space-7: 48px; /* ╔═══════════════════════════════════════════════════════════╗ ║ SHAR 8: VISUAL RHYTHM SSOT (semantic tokens v2.1) ║ ╚═══════════════════════════════════════════════════════════╝ Семантичні токени поверх raw scale (--sp-space-*). Префікс --vr-* щоб НЕ конфліктувати з existing pollution `var(--sp-card-pad, X)` / `var(--radius-ui, X)` fallback-patterns (1162 declarations). Нові 4 worst-offender сторінки використовують ці токени явно через var(--vr-*). Канон-правила card-padding-canon / section-padding-canon / gap-rhythm-canon / radius-consistency приймають як --vr-*, так і literal значення з allowlist. */ --vr-card-pad: 12px 16px; /* малі cards/items (.X-card, .X-item, .X-row) */ --vr-section-pad: 16px 20px; /* великі panels/sections (.X-section, .X-panel) */ --vr-gap-micro: 4px; /* tight inline groups (chips, dots, mini-list) */ --vr-gap-default: 8px; /* стандартні flex/grid списки */ --vr-gap-section: 16px; /* між великими секціями */ --vr-radius: 8px; /* стандарт для cards/inputs (alerts industrial 2px залишається) */ --vr-input-inset: inset 0 2px 4px rgba(0,0,0,0.30); /* SSOT для всіх shadow */ /* ╔═══════════════════════════════════════════════════════════╗ ║ SHAR 9: АЛІАСИ - сумісність зі сторінками що не мігровані ╚═══════════════════════════════════════════════════════════╝ 🔧 sys-1004: --font-mono/--font-ui - changelog/emoji-ref/agent-journal 🔧 sys-1005: --color-ok/warn/error - changelog/emoji-ref/test-runner 🔧 sys-1031: --radius-sm - devtools-style-adc.css kbd/search */ --font-mono: 'JetBrains Mono', 'IBM Plex Mono', monospace; --font-ui: 'Barlow', sans-serif; --color-ok: var(--success); --color-warn: var(--warning); --color-error: var(--danger-text); --radius-sm: 8px; --log-ok: var(--success); /* 🔧 sys-1012: z-index токени для tooltip/dropdown/modal (замість magic-числ 10540/10550) */ --z-tooltip: 10550; --z-dropdown: 10540; --z-modal-overlay: 10000; --z-modal-content: 10001; --z-toast: 10002; /* FIX cc-746, cc-749, cc-750, cc-753, cc-756: відсутні токени що використовуються в devtools-style */ --forge-radius: 2px; /* 🔧 cc-746: forge box-shadow токени (inset/shadow/bevel) - SSOT для Dev Tools Hub карток */ --forge-inset: inset 0 1px 0 rgba(197, 139, 58, 0.18), inset 0 -1px 0 rgba(0, 0, 0, 0.45); --forge-shadow: 0 4px 14px rgba(0, 0, 0, 0.45); --forge-bevel: inset 0 1px 0 rgba(197, 139, 58, 0.22), 0 2px 6px rgba(0, 0, 0, 0.40); --bg-critical: rgba(193, 68, 24, 0.10); --border-critical: rgba(193, 68, 24, 0.42); --font-dt-ui: 'Barlow', sans-serif; /* 🔧 css-audit: undefined-токени у changelog/emoji-ref/log-registry/project-map/hub (debugger-аудит) */ --bg-surface-1: var(--bg-surface); /* картки/панелі */ --bg-surface-2: var(--bg-elevated); /* друга поверхня (модалки/dropdown) */ --bg-code: var(--bg-base); /* заглиблене поле коду/textarea */ --chr-glass-hover: var(--bg-hover); /* hover-поверхня (chronograph glass) */ --font-display: var(--font-dt-title); /* титульний шрифт сторінки */ } /* ╔═══════════════════════════════════════════════════════════════╗ ║ BODY FONT FALLBACK - закриває Times New Roman дрейф ║ ╚═══════════════════════════════════════════════════════════════╝ Раніше font-family на body встановлювався у page-specific CSS (alerts-style та ін.) через .al-page селектор. Сторінки без .al-page (canon-audit, design-audit, design-map) падали на браузерний default = Times New Roman. Цей блок гарантує Barlow на ЛЮБІЙ Dev Tools сторінці. */ body.dev-tools-scope { font-family: 'Barlow', sans-serif; } /* ╔═══════════════════════════════════════════════════════════════╗ ║ UTILITY - застосування шрифтів за роллю ║ ╚═══════════════════════════════════════════════════════════════╝ Класи для поступового впровадження. Нові інструменти ставлять одразу .dt-title-h1 / .dt-status; старі - мігрують поетапно. */ /* Титул сторінки інструменту */ .dev-tools-scope .dt-title-h1, .dev-tools-scope [data-dt-role="title"] { font-family: var(--font-dt-title); } /* Опис під титулом */ .dev-tools-scope .dt-status, .dev-tools-scope [data-dt-role="status"] { font-family: var(--font-dt-status); } /* Числові поля - input типу number + utility-клас .dt-digits */ .dev-tools-scope .dt-digits, .dev-tools-scope input[type="number"], .dev-tools-scope input[inputmode="numeric"], .dev-tools-scope [data-dt-role="digits"] { font-family: var(--font-dt-digits); font-variant-numeric: tabular-nums; }