Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
32 changes: 15 additions & 17 deletions docs/DESIGN-SYSTEM.md
Original file line number Diff line number Diff line change
Expand Up @@ -20,8 +20,7 @@ Tanpa framework CSS, tanpa Node saat build/runtime. Font: Plus Jakarta Sans 400/
## 3. Token lapis 2 (nama tetap, nilai per palet)
Kegunaan tiap token sama dengan standar §3: `bg` latar halaman, `surface` kartu/header/sheet, `sunk` permukaan cekung (pill netral, wadah segmented),
`line`/`line-strong` pemisah/batas, `control` batas input/select (≥3:1 terhadap `surface`), `ink`/`ink2`/`muted` teks (muted hanya ≥12px),
`accent` teks/garis aksen, `accent-fill`+`on-accent` isian aksi utama, `accent-soft` hover/chip aktif, `brand2-fill`+`on-brand2` satu aksi pendamping per layar (Deploy App),
`brand2`/`brand2-soft` angka sekunder, `chart`/`chart-soft` bar dan grafik, `ok`/`warn`/`danger` + `-text` + `-bg` status, `danger-fill` isian tombol konfirmasi hapus, `shadow` satu-satunya bayangan.
`accent` teks/garis aksen, `accent-fill`+`on-accent` isian aksi utama, `accent-soft` hover/chip aktif, `brand2`/`brand2-soft` seri grafik kedua (RAM, disk, memori, jaringan) dari keluarga hue yang sama dengan aksen; `brand2-fill`+`on-brand2` disediakan tapi tidak dipakai tombol (keputusan user 2026-10-15: semua tombol aksi memakai `accent-fill`), `chart`/`chart-soft` bar dan grafik, `ok`/`warn`/`danger` + `-text` + `-bg` status, `danger-fill` isian tombol konfirmasi hapus, `shadow` satu-satunya bayangan.
Semua pasangan kontras sudah dihitung (38/38 lolos per palet, lihat `docs/design/kontras.md`). Jangan ubah nilai tanpa menghitung ulang.

### 3.1 Palet `indigo` (Indigo Dockify, default)
Expand All @@ -40,10 +39,10 @@ Semua pasangan kontras sudah dihitung (38/38 lolos per palet, lihat `docs/design
| accent-fill | `#4f46e5` | `#5850ec` |
| on-accent | `#ffffff` | `#ffffff` |
| accent-soft | `#eef0ff` | `#252a55` |
| brand2-fill | `#14b8a6` | `#2dd4bf` |
| on-brand2 | `#042f2e` | `#042f2e` |
| brand2 | `#0f766e` | `#5eead4` |
| brand2-soft | `#dcf5f1` | `#103633` |
| brand2-fill | `#6d28d9` | `#6d28d9` |
| on-brand2 | `#ffffff` | `#ffffff` |
| brand2 | `#6d28d9` | `#c4b5fd` |
| brand2-soft | `#ede9fe` | `#2a1d55` |
| chart | `#6366f1` | `#818cf8` |
| chart-soft | `#e3e5fc` | `#252a55` |
| ok | `#15803d` | `#4ade80` |
Expand Down Expand Up @@ -74,10 +73,10 @@ Semua pasangan kontras sudah dihitung (38/38 lolos per palet, lihat `docs/design
| accent-fill | `#2b3486` | `#4a54c9` |
| on-accent | `#ffffff` | `#ffffff` |
| accent-soft | `#e7e9f8` | `#242a5c` |
| brand2-fill | `#f26a21` | `#f26a21` |
| on-brand2 | `#1b1f3b` | `#1b1f3b` |
| brand2 | `#c2410c` | `#ff9a5c` |
| brand2-soft | `#fdeee4` | `#3a2418` |
| brand2-fill | `#1e40af` | `#1e40af` |
| on-brand2 | `#ffffff` | `#ffffff` |
| brand2 | `#1e40af` | `#93c5fd` |
| brand2-soft | `#dbeafe` | `#1a2a55` |
| chart | `#4a54c9` | `#8c96ff` |
| chart-soft | `#e3e5fb` | `#242a5c` |
| ok | `#15803d` | `#4ade80` |
Expand Down Expand Up @@ -108,10 +107,10 @@ Semua pasangan kontras sudah dihitung (38/38 lolos per palet, lihat `docs/design
| accent-fill | `#0e6e78` | `#0e6e78` |
| on-accent | `#ffffff` | `#ffffff` |
| accent-soft | `#e0f1f2` | `#103338` |
| brand2-fill | `#f5a524` | `#f5a524` |
| on-brand2 | `#1a1305` | `#1a1305` |
| brand2 | `#a35a00` | `#f8b95a` |
| brand2-soft | `#fdf0d9` | `#33270f` |
| brand2-fill | `#075985` | `#075985` |
| on-brand2 | `#ffffff` | `#ffffff` |
| brand2 | `#075985` | `#7dd3fc` |
| brand2-soft | `#e0f2fe` | `#0f2a3a` |
| chart | `#0891b2` | `#38bdf8` |
| chart-soft | `#dcf0f6` | `#0f2c3a` |
| ok | `#15803d` | `#4ade80` |
Expand Down Expand Up @@ -143,7 +142,7 @@ Radius: kartu 16, kontrol/tombol 12, lencana 6, chip/pill penuh. Target sentuh a
## 5. Komponen (partial bersama, varian di partial bukan di pemakaian)
| Kebutuhan | Partial / kelas | Catatan |
| :--- | :--- | :--- |
| Tombol | `.btn` + varian `primary` `brand` `secondary` `ghost` `destructive` `destructive-outline` `link`; ukuran 44 (default) / 36 (`sm`) / 48 (`lg`); ikon 44/40 | satu `primary` per layar/panel; `brand` maksimal satu; dalam satu kelompok varian harus berbeda |
| Tombol | `.btn` + varian `primary` `secondary` `ghost` `destructive` `destructive-outline` `link`; ukuran 44 (default) / 36 (`sm`) / 48 (`lg`); ikon 44/40 | satu `primary` per layar/panel; dalam satu kelompok varian harus berbeda |
| Input + label | `.field` (label 12.8px/600 + input 16px, border `control`, fokus outline 3px `accent`) | tanpa titik dua di label |
| Select | `<select class="select">` native digayakan + chevron SVG | penyimpangan K4 yang disetujui |
| Dialog / alert-dialog / drawer | `ui_sheet`: `<dialog class="sheet">` + `openSheet(id)`/`closeSheet(id)`; ≥700px popup tengah max-w 560 radius 16 max-h 86dvh; <700px panel bawah max-w 560 radius atas 16 handle 40×4 max-h 92dvh + safe-area; animasi ≤240 ms; hormati `prefers-reduced-motion`; tutup via X, backdrop, Escape; **tanpa tautan "Tutup" di bawah** | menggantikan semua `confirm()` dan modal inline |
Expand All @@ -157,8 +156,7 @@ Radius: kartu 16, kontrol/tombol 12, lencana 6, chip/pill penuh. Target sentuh a
| Ikon | `ui_icon` nama: sun moon monitor logout menu x check alert refresh plus trash external chevron | SVG inline stroke 2 |

### 5.1 Hierarki aksi (K9)
- **Primary** (`accent-fill`): satu per layar: Edit (app/server running), Start (stopped), Deploy (draft), Save, Sign in.
- **Brand** (`brand2-fill`): Deploy App di daftar Apps, Add Server di daftar Servers.
- **Primary** (`accent-fill`): satu per layar: Edit (app/server running), Start (stopped), Deploy (draft), Save, Sign in, Deploy App (daftar Apps), Add Server (daftar Servers). Tidak ada warna tombol kedua; semua palet memakai keluarga hue aksennya sendiri.
- **Secondary**: Stop, Cancel, Save as Draft, tombol ikon header.
- **Ghost**: Console, Tail 50/200/500, Copy, Show.
- **Aksi berbahaya = merah**: Redeploy, Rollback, Init Worker, Prune Disk, Undeploy, Remove Server, Delete Draft, Clear History, Roll Secret, Update Dockify, Redeploy All. Pemicu = `destructive-outline` di **zona bahaya** terpisah (judul "Danger zone", garis atas); konfirmasi selalu lewat alert-dialog dengan kalimat akibat; tombol konfirmasi = `destructive` (isian `danger-fill`, teks putih).
Expand Down
24 changes: 12 additions & 12 deletions docs/design/kontras.md
Original file line number Diff line number Diff line change
Expand Up @@ -45,10 +45,10 @@ Lencana Dockify: running/online = ok (`ok-bg` + `ok-text`); pending/initializing
| accent-fill | `#4f46e5` | `#5850ec` |
| on-accent | `#ffffff` | `#ffffff` |
| accent-soft | `#eef0ff` | `#252a55` |
| brand2-fill | `#14b8a6` | `#2dd4bf` |
| on-brand2 | `#042f2e` | `#042f2e` |
| brand2 | `#0f766e` | `#5eead4` |
| brand2-soft | `#dcf5f1` | `#103633` |
| brand2-fill | `#6d28d9` | `#6d28d9` |
| on-brand2 | `#ffffff` | `#ffffff` |
| brand2 | `#6d28d9` | `#c4b5fd` |
| brand2-soft | `#ede9fe` | `#2a1d55` |
| chart | `#6366f1` | `#818cf8` |
| chart-soft | `#e3e5fc` | `#252a55` |
| ok | `#15803d` | `#4ade80` |
Expand Down Expand Up @@ -102,10 +102,10 @@ Lencana Dockify: running/online = ok (`ok-bg` + `ok-text`); pending/initializing
| accent-fill | `#2b3486` | `#4a54c9` |
| on-accent | `#ffffff` | `#ffffff` |
| accent-soft | `#e7e9f8` | `#242a5c` |
| brand2-fill | `#f26a21` | `#f26a21` |
| on-brand2 | `#1b1f3b` | `#1b1f3b` |
| brand2 | `#c2410c` | `#ff9a5c` |
| brand2-soft | `#fdeee4` | `#3a2418` |
| brand2-fill | `#1e40af` | `#1e40af` |
| on-brand2 | `#ffffff` | `#ffffff` |
| brand2 | `#1e40af` | `#93c5fd` |
| brand2-soft | `#dbeafe` | `#1a2a55` |
| chart | `#4a54c9` | `#8c96ff` |
| chart-soft | `#e3e5fb` | `#242a5c` |
| ok | `#15803d` | `#4ade80` |
Expand Down Expand Up @@ -159,10 +159,10 @@ Lencana Dockify: running/online = ok (`ok-bg` + `ok-text`); pending/initializing
| accent-fill | `#0e6e78` | `#0e6e78` |
| on-accent | `#ffffff` | `#ffffff` |
| accent-soft | `#e0f1f2` | `#103338` |
| brand2-fill | `#f5a524` | `#f5a524` |
| on-brand2 | `#1a1305` | `#1a1305` |
| brand2 | `#a35a00` | `#f8b95a` |
| brand2-soft | `#fdf0d9` | `#33270f` |
| brand2-fill | `#075985` | `#075985` |
| on-brand2 | `#ffffff` | `#ffffff` |
| brand2 | `#075985` | `#7dd3fc` |
| brand2-soft | `#e0f2fe` | `#0f2a3a` |
| chart | `#0891b2` | `#38bdf8` |
| chart-soft | `#dcf0f6` | `#0f2c3a` |
| ok | `#15803d` | `#4ade80` |
Expand Down
50 changes: 24 additions & 26 deletions internal/http/static/app.css
Original file line number Diff line number Diff line change
Expand Up @@ -14,10 +14,10 @@
--accent-fill: #4f46e5;
--on-accent: #ffffff;
--accent-soft: #eef0ff;
--brand2-fill: #14b8a6;
--on-brand2: #042f2e;
--brand2: #0f766e;
--brand2-soft: #dcf5f1;
--brand2-fill: #6d28d9;
--on-brand2: #ffffff;
--brand2: #6d28d9;
--brand2-soft: #ede9fe;
--chart: #6366f1;
--chart-soft: #e3e5fc;
--ok: #15803d;
Expand Down Expand Up @@ -48,10 +48,10 @@
--accent-fill: #5850ec;
--on-accent: #ffffff;
--accent-soft: #252a55;
--brand2-fill: #2dd4bf;
--on-brand2: #042f2e;
--brand2: #5eead4;
--brand2-soft: #103633;
--brand2-fill: #6d28d9;
--on-brand2: #ffffff;
--brand2: #c4b5fd;
--brand2-soft: #2a1d55;
--chart: #818cf8;
--chart-soft: #252a55;
--ok: #4ade80;
Expand Down Expand Up @@ -82,10 +82,10 @@
--accent-fill: #2b3486;
--on-accent: #ffffff;
--accent-soft: #e7e9f8;
--brand2-fill: #f26a21;
--on-brand2: #1b1f3b;
--brand2: #c2410c;
--brand2-soft: #fdeee4;
--brand2-fill: #1e40af;
--on-brand2: #ffffff;
--brand2: #1e40af;
--brand2-soft: #dbeafe;
--chart: #4a54c9;
--chart-soft: #e3e5fb;
--ok: #15803d;
Expand Down Expand Up @@ -116,10 +116,10 @@
--accent-fill: #4a54c9;
--on-accent: #ffffff;
--accent-soft: #242a5c;
--brand2-fill: #f26a21;
--on-brand2: #1b1f3b;
--brand2: #ff9a5c;
--brand2-soft: #3a2418;
--brand2-fill: #1e40af;
--on-brand2: #ffffff;
--brand2: #93c5fd;
--brand2-soft: #1a2a55;
--chart: #8c96ff;
--chart-soft: #242a5c;
--ok: #4ade80;
Expand Down Expand Up @@ -150,10 +150,10 @@
--accent-fill: #0e6e78;
--on-accent: #ffffff;
--accent-soft: #e0f1f2;
--brand2-fill: #f5a524;
--on-brand2: #1a1305;
--brand2: #a35a00;
--brand2-soft: #fdf0d9;
--brand2-fill: #075985;
--on-brand2: #ffffff;
--brand2: #075985;
--brand2-soft: #e0f2fe;
--chart: #0891b2;
--chart-soft: #dcf0f6;
--ok: #15803d;
Expand Down Expand Up @@ -184,10 +184,10 @@
--accent-fill: #0e6e78;
--on-accent: #ffffff;
--accent-soft: #103338;
--brand2-fill: #f5a524;
--on-brand2: #1a1305;
--brand2: #f8b95a;
--brand2-soft: #33270f;
--brand2-fill: #075985;
--on-brand2: #ffffff;
--brand2: #7dd3fc;
--brand2-soft: #0f2a3a;
--chart: #38bdf8;
--chart-soft: #0f2c3a;
--ok: #4ade80;
Expand Down Expand Up @@ -379,8 +379,6 @@ form .grid { gap: 1.2em; margin-bottom: 0.9em; }
.btn-lg { min-height: 48px; padding: 0 20px; }
.btn-primary, .btn-primary:hover { background: var(--accent-fill); border-color: var(--accent-fill); color: var(--on-accent); }
.btn-primary:hover { filter: brightness(1.1); }
.btn-brand, .btn-brand:hover { background: var(--brand2-fill); border-color: var(--brand2-fill); color: var(--on-brand2); }
.btn-brand:hover { filter: brightness(1.06); }
.btn-secondary { background: var(--surface); border-color: var(--control); color: var(--ink); }
.btn-ghost, .btn-ghost:hover { background: transparent; border-color: transparent; color: var(--ink2); }
.btn-ghost:hover { background: var(--accent-soft); color: var(--ink); }
Expand Down
2 changes: 1 addition & 1 deletion internal/http/templates/apps.html
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
<hgroup>
<h1>Apps</h1>
<div class="page-actions">
<a href="apps/add" class="btn btn-brand">Deploy App</a>
<a href="apps/add" class="btn btn-primary">Deploy App</a>
<button type="button" class="btn btn-destructive-outline" onclick="openSheet('redeploy-all')">Redeploy All</button>
</div>
</hgroup>
Expand Down
2 changes: 1 addition & 1 deletion internal/http/templates/servers.html
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
<div class="container">
<hgroup>
<h1>Servers</h1>
<p><a href="servers/add" class="btn btn-brand">Add Server</a></p>
<p><a href="servers/add" class="btn btn-primary">Add Server</a></p>
</hgroup>

{{template "servers_list" .}}
Expand Down
Loading