/* ============================================================================= assistance.tokens.css - LAPISAN 1 dari 3 (styling umum) Sumber: nilai yang berulang di keempat solusi asal (app.css UAR/APY, *.razor.css tiap modul, dan style inline pada MainLayout Metronic). Tujuan: satu tempat untuk warna, radius, spacing, bayangan, dan tipografi sehingga modul tidak lagi menuliskan hex/px yang sama berulang kali. Token di sini SENGAJA memetakan ke nilai yang sudah dipakai, bukan nilai baru - supaya tampilan tidak berubah sedikit pun. Variabel milik Metronic (--background, --foreground, --primary, dst.) tetap berasal dari assets/css/core.bundle.css dan tidak ditimpa. ============================================================================= */ :root { /* ---------- warna merek & aksen -------------------------------------- */ --ast-brand: #2563eb; /* biru aksi (tombol utama, fokus) */ --ast-brand-strong: #1d4ed8; --ast-brand-soft: rgba(37, 99, 235, .18); --ast-success: #34a853; /* baris baru pada grid Ignite */ --ast-success-bg: #e7f7ed; --ast-danger: #b32121; --ast-danger-bg: #fdecea; /* highlight prioritas HIGH */ --ast-warning: #f59e0b; --ast-info: #0ea5e9; /* ---------- netral / permukaan --------------------------------------- */ --ast-surface: #ffffff; --ast-surface-muted: #f8fafc; --ast-border: #c0c4cc; /* border input Ignite */ --ast-border-hover: #9aa0aa; --ast-border-subtle: #e5e7eb; --ast-text: #1f2937; --ast-text-muted: #6b7280; --ast-text-placeholder: #98a2b3; /* ---------- tipografi ------------------------------------------------- */ --ast-font-sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; --ast-font-size-xs: 11px; --ast-font-size-sm: 12px; --ast-font-size-base: 13px; /* ukuran dasar tabel & form modul */ --ast-font-size-md: 14px; --ast-font-size-lg: 16px; --ast-line-tight: 1.4; /* angka pada kolom uang selalu rata kanan & lebar seragam */ --ast-numeric: tabular-nums; /* ---------- bentuk & jarak -------------------------------------------- */ --ast-radius-sm: 4px; --ast-radius: 6px; --ast-radius-lg: 10px; --ast-radius-pill: 999px; --ast-space-1: 4px; --ast-space-2: 8px; --ast-space-3: 12px; --ast-space-4: 16px; --ast-space-5: 24px; --ast-space-6: 32px; /* ---------- elevasi ---------------------------------------------------- */ --ast-shadow-sm: 0 1px 2px rgba(16, 24, 40, .06); --ast-shadow: 0 2px 8px rgba(16, 24, 40, .08); --ast-shadow-lg: 0 12px 32px rgba(16, 24, 40, .14); --ast-ring: 0 0 0 3px var(--ast-brand-soft); /* ---------- kerangka layout (dipakai MainLayout keempat modul) --------- */ --ast-header-height: 58px; --ast-sidebar-width: 58px; --ast-navbar-height: 56px; --ast-content-max: 1440px; /* ---------- transisi --------------------------------------------------- */ --ast-transition: .15s ease; } /* Mode gelap KTUI menambahkan class `dark` pada . Token permukaan diturunkan agar komponen bersama ikut menyesuaikan. */ html.dark { --ast-surface: #101828; --ast-surface-muted: #0b1220; --ast-border: #344054; --ast-border-hover: #475467; --ast-border-subtle: #1d2939; --ast-text: #e5e7eb; --ast-text-muted: #98a2b3; }