LearnInk Design System — Apple Liquid Glass

Filosofi Desain

LearnInk mengikuti estetika Apple Liquid Glass yang terinspirasi dari visionOS dan iOS 26. Prinsip utamanya:

• •Ultra-subtle transparency: Elemen terlihat "melayang" di atas background.
• •Depth through blur: Gunakan backdrop-filter: blur() untuk menciptakan kedalaman.
• •Minimal borders: Gunakan inset box-shadow untuk hairline border, bukan border property.

Utilitas CSS Utama

.glass-liquid (Wajib untuk card, dialog, popover)

/* Light Mode */
.glass-liquid {
    background: rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(25px) saturate(180%);
    box-shadow:
        0 8px 40px -10px rgba(0, 0, 0, 0.1),
        inset 0 0 0 1px rgba(255, 255, 255, 0.6);
}

/* Dark Mode */
.dark .glass-liquid {
    background: rgba(22, 22, 24, 0.70);
    box-shadow:
        0 8px 40px -10px rgba(0, 0, 0, 0.4),
        inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}

.shadow-glow (Untuk elemen aksen/primary)

.shadow-glow {
    box-shadow:
        0 0 20px -5px hsl(var(--primary) / 0.4),
        0 0 40px -10px hsl(var(--primary) / 0.2);
}

.gradient-text (Untuk heading premium)

.gradient-text {
    background: linear-gradient(135deg, hsl(var(--primary)), hsl(217 91% 60%), hsl(192 91% 60%));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

Variabel Warna

• •Primary: hsl(217.2 91.2% 59.8%) (Blue) → Dark Mode
• •Background: hsl(240 10% 3.9%) → Dark Mode (#0b0c0e)
• •Muted Foreground: hsl(240 5% 64.9%) → Dark Mode

Tipografi

• •Font utama: 'Inter', system-ui, -apple-system, sans-serif
• •Heading: font-black tracking-tighter (sangat tebal, sangat rapat)
• •Body content: text-[1.15rem] leading-[1.8] (nyaman dibaca)

Animasi

• •Durasi standar: 300ms untuk hover, 500ms untuk transisi layout.
• •Easing: cubic-bezier(0.32, 0.72, 0, 1) untuk micro-interactions.
• •Reduced motion: Selalu hormati prefers-reduced-motion: reduce.

Komponen Spesial

Superadmin Border (superadmin-border)

Efek "Energy Crawl" dengan gradient animasi untuk avatar/card Superadmin. Menggunakan mask-composite: exclude untuk efek border transparan.

Transparent Mode (Mobile Only)

Mode transparansi ekstra yang hanya aktif di viewport ≤ 768px. Mengubah card menjadi 25% opacity dan sidebar menjadi 15% opacity.

Konfigurasi Tailwind

• •Dark Mode: class strategy (toggle manual).
• •Font: Inter sebagai fontFamily.sans default.
• •HSL Color System: Semua warna menggunakan CSS variables (hsl(var(--primary))).
• •Plugins: tailwindcss-animate + @tailwindcss/typography.
• •Radius: var(--radius) sebagai basis border-radius.

Penggunaan di Komponen (19+ file)

glass-liquid digunakan di:

• •UI primitif: card.tsx, dialog.tsx, sheet.tsx, popover.tsx, dropdown-menu.tsx
• •Layout: Navbar.tsx, DashboardLayout.tsx
• •Pages: ContentApproval.tsx, SystemControl.tsx, SecurityLogs.tsx, ManageSources.tsx, DashboardModules.tsx
• •Features: AdminDashboard.tsx, ErrorLogsPanel.tsx, PremiumStore.tsx

Yang TIDAK Boleh Dilakukan

• •❌ Menggunakan warna solid tanpa transparansi untuk card/panel.
• •❌ Menggunakan border property langsung — gunakan inset box-shadow.
• •❌ Menggunakan font selain Inter untuk body text.
• •❌ Menghilangkan backdrop-filter dari elemen glass.
• •❌ Membuat komponen baru TANPA menggunakan glass-liquid untuk panel/card.