/* ============================================================ WatZap Clean — Design Tokens Spec: docs/superpowers/specs/2026-05-25-clean-design-system-design.md §5 Preview: docs/design-system-clean/preview.html ------------------------------------------------------------ Filosofi: brand di anchor saja (CTA, active, focus, link). Default neutral. One shadow. Weight 400–600 mostly. ============================================================ */ @import url("https://fonts.googleapis.com/css2?family=Mulish:ital,wght@0,300..700;1,300..700&display=swap"); :root { /* -------------------------------------------------------- Color — Brand (5 stop) -------------------------------------------------------- */ --color-brand-50: #fff1f4; --color-brand-100: #ffd8e0; --color-brand-500: #dc2360; /* primary */ --color-brand-600: #b00e44; /* hover */ --color-brand-700: #8a0a35; /* pressed */ /* -------------------------------------------------------- Color — Foreground -------------------------------------------------------- */ --color-fg-strong: #111827; --color-fg-default: #374151; --color-fg-muted: #6b7280; --color-fg-subtle: #9ca3af; --color-fg-on-brand: #ffffff; /* -------------------------------------------------------- Color — Background / Surface -------------------------------------------------------- */ --color-bg-canvas: #f9fafb; --color-bg-surface: #ffffff; --color-bg-subtle: #f4f5f7; --color-bg-muted: #eef0f3; --color-bg-emphasis: #e5e7eb; /* -------------------------------------------------------- Color — Border -------------------------------------------------------- */ --color-border-subtle: #f1f2f4; --color-border-default: #e5e7eb; --color-border-strong: #d1d5db; --color-border-focus: #dc2360; /* -------------------------------------------------------- Color — Accent (dekorasi & identitas kanal, BUKAN aksi) Ditambahkan 2026-09-01 untuk komponen produk (design-system-v3.md). -------------------------------------------------------- */ --color-accent-blue: #0078f8; /* centang logo · WABA/official — 4.16:1, fill & ikon saja */ --color-accent-blue-deep: #0a4fa8; /* varian aman untuk teks */ --color-accent-green: #25d366; /* WhatsApp · tersambung — 1.98:1, JANGAN untuk teks */ --color-accent-teal: #128c7e; /* chrome chat & preview */ --color-accent-amber: #f59e0b; /* kanal Email · warmup */ --color-accent-violet: #7c3aed; /* automation · smart bot */ /* Band gelap + brand di atasnya */ --color-band-deep: #082d54; /* hero/night band */ --color-brand-300: #ff5c8d; /* teks brand di atas band gelap — 4.74:1 */ --color-fg-on-dark: #ffffff; --color-fg-on-dark-muted: #c9d4e5; /* Bubble WhatsApp keluar — sengaja meniru aplikasi asli */ --color-bubble-out: #e7ffdb; /* -------------------------------------------------------- Color — Status -------------------------------------------------------- */ --color-success-500: #16a34a; --color-success-bg: #ecfdf5; --color-warning-500: #d97706; --color-warning-bg: #fffbeb; --color-danger-500: #dc2626; --color-danger-bg: #fef2f2; --color-info-500: #2563eb; --color-info-bg: #eff6ff; /* Teks di atas background status soft — semua lolos AA */ --color-success-ink: #065f46; --color-warning-ink: #92400e; --color-danger-ink: #991b1b; --color-info-ink: #1e40af; /* -------------------------------------------------------- Typography -------------------------------------------------------- */ --font-family-base: "Mulish", "Muli", system-ui, sans-serif; --font-family-mono: ui-monospace, SFMono-Regular, Menlo, monospace; --font-size-xs: 11px; --font-size-sm: 12px; --font-size-base: 14px; --font-size-md: 15px; --font-size-lg: 16px; --font-size-xl: 18px; --font-size-2xl: 22px; --font-size-3xl: 26px; --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --line-height-tight: 1.2; --line-height-normal: 1.45; --line-height-relaxed: 1.6; /* -------------------------------------------------------- Spacing (4px base grid) -------------------------------------------------------- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; /* -------------------------------------------------------- Radius -------------------------------------------------------- */ --radius-sm: 4px; --radius-md: 6px; --radius-lg: 8px; --radius-xl: 12px; --radius-2xl: 16px; --radius-pill: 999px; /* -------------------------------------------------------- Shadow (neutral only; focus-ring is the only colored one) -------------------------------------------------------- */ --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04); --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04); --shadow-md: 0 8px 24px rgba(15, 23, 42, 0.08), 0 2px 6px rgba(15, 23, 42, 0.04); --shadow-lg: 0 18px 40px rgba(15, 23, 42, 0.12), 0 4px 10px rgba(15, 23, 42, 0.06); /* Alfa 0,20 membuat cincinnya nyaris tak terlihat. Dikomposit di atas latar halaman #F7F8FA ia jadi rgb(242,205,219) — 1,36:1 terhadap latar itu, sementara WCAG 1.4.11 menuntut 3:1 untuk indikator fokus. Terukur pada halaman berjalan, bukan diperkirakan; cincinnya memang ADA (uji dengan Tab sungguhan, bukan .focus() programatik yang tidak memicu :focus-visible), hanya tidak terbaca. 0,70 adalah alfa terkecil yang lolos di ketiga latar tempat cincin ini muncul (latar halaman 3,05:1, kartu putih dan permukaan input 3,16:1). 0,75 diambil supaya ada sedikit jarak dari ambang. Token ini dipakai 10 tempat di 4 berkas — tombol, input, input-group, dan checkbox Clean v2 — jadi seluruh konsol ikut berubah. Itu memang yang diinginkan: fokus keyboard yang tak terlihat sama saja dengan tidak ada. DUA LAPIS, bukan satu. Menaikkan alfa saja masih menyisakan satu kasus yang gagal, dan justru pada kendali terpenting: .wzc-btn--primary berlatar rgb(220,35,96) — warna cincin ini sendiri. Terukur pada tombol "Add sender": tepi LUAR cincin 3,29:1 terhadap latar halaman (lulus), tapi tepi DALAM-nya cuma 1,35:1 terhadap tombolnya. Cincinnya larut ke dalam tombol; di tangkapan layar ia praktis tak terlihat. Lapis pertama 2px berwarna permukaan menyisipkan jarak, sehingga cincin brand selalu punya tepi yang kontras apa pun warna komponennya. Ini pola "focus ring with offset" yang lazim, dan di atas kartu putih lapis itu memang tak terlihat — tidak apa-apa, ia hanya perlu terlihat ketika komponennya berwarna. */ --focus-ring: 0 0 0 2px var(--color-bg-surface), 0 0 0 4px rgba(220, 35, 96, 0.75); /* Kolom isian (input, select, textarea, dan tombol yang berlaku sebagai select) BUKAN pemakai --focus-ring. Border mereka sendiri berubah ke --color-border-focus saat fokus — itu penandanya, dan ia lolos 3:1 terhadap permukaan input (#dc2360 di atas putih ≈ 4,8:1). Cincin dua lapis di luarnya menggambar border merah muda, celah putih, lalu merah muda lagi: persis "bingkai dobel" yang dilarang docs/design-system-v3.md (Accessibility › "Satu penanda, bukan dua"). Halo lembut ini hanya melunakkan tepinya, bukan penanda kedua. Kontrol tanpa border yang berubah (tombol, checkbox, ubin) tetap memakai --focus-ring. */ --focus-ring-input: 0 0 0 3px rgba(220, 35, 96, 0.25); /* -------------------------------------------------------- Motion -------------------------------------------------------- */ --duration-fast: 120ms; --duration-normal: 180ms; --duration-slow: 240ms; --easing-standard: cubic-bezier(0.2, 0, 0.2, 1); --easing-emphasized: cubic-bezier(0.2, 0, 0, 1); /* -------------------------------------------------------- Z-index -------------------------------------------------------- */ --z-base: 0; --z-dropdown: 1100; --z-sticky: 1200; --z-modal: 1300; --z-popover: 1400; --z-toast: 1500; }