From 00b8bee32db6ea4c87c263868af118097c1d1596 Mon Sep 17 00:00:00 2001 From: Indra Gunawan Date: Fri, 16 Oct 2026 07:47:26 +0700 Subject: [PATCH] =?UTF-8?q?docs:=20regenerate=20design=20preview=20from=20?= =?UTF-8?q?DESIGN-SYSTEM.md=20=C2=A73=20tokens?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit gen.mjs reads the final token tables instead of the S0 values; Deploy App uses the primary button. Old brand2 hex (teal/orange/amber, teal chart) gone; contrast 38/38 per palette. Co-Authored-By: Claude Opus 5.5 --- docs/design/gen.mjs | 103 +++++++-------------------------- docs/design/kontras.md | 14 ++--- docs/design/preview-warna.html | 75 ++++++++++++------------ 3 files changed, 66 insertions(+), 126 deletions(-) diff --git a/docs/design/gen.mjs b/docs/design/gen.mjs index 75a8dcd..070bc47 100644 --- a/docs/design/gen.mjs +++ b/docs/design/gen.mjs @@ -1,88 +1,30 @@ -// Generator preview 3 opsi warna Dockify (S0). Hasil: preview-warna.html (statis, tanpa JS, font data URI) + kontras.md. +// Generator preview 3 palet Dockify (nilai token dari docs/DESIGN-SYSTEM.md §3). Hasil: preview-warna.html (statis, tanpa JS, font data URI) + kontras.md. // Jalankan: node gen.mjs (butuh akses ke fonts.googleapis.com untuk menanam font) -import { writeFileSync } from "node:fs"; +import { readFileSync, writeFileSync } from "node:fs"; -// ---------- Token lapis 2 per opsi (nama persis standar §3) ---------- +// ---------- Token lapis 2 per opsi: dibaca dari docs/DESIGN-SYSTEM.md §3 (sumber tunggal nilai final) ---------- +const DS = readFileSync(new URL("../DESIGN-SYSTEM.md", import.meta.url), "utf8"); +function palet(slug) { + const sec = DS.split(/^### /m).find((x) => x.startsWith(`3.`) && x.includes("`" + slug + "`")); + if (!sec) throw new Error(`palet ${slug} tidak ada di DESIGN-SYSTEM.md §3`); + const light = {}, dark = {}; + for (const m of sec.matchAll(/^\| ([a-z0-9-]+) \| `([^`]+)` \| `([^`]+)` \|$/gm)) [light[m[1]], dark[m[1]]] = [m[2], m[3]]; + return { light, dark }; +} const OPSI = [ - { - id: "1", - nama: "1 · Indigo Dockify", - catatan: "Brand Dockify sekarang (indigo) dirapikan: netral slate, indigo untuk aksi utama, teal untuk Deploy App. Paling akrab bagi pengguna lama.", - light: { - bg: "#f5f7fb", surface: "#ffffff", sunk: "#f1f4f9", line: "#e2e8f0", "line-strong": "#cbd5e1", control: "#7a8699", - ink: "#0f172a", ink2: "#334155", muted: "#5b677a", - accent: "#4f46e5", "accent-fill": "#4f46e5", "on-accent": "#ffffff", "accent-soft": "#eef0ff", - "brand2-fill": "#14b8a6", "on-brand2": "#042f2e", brand2: "#0f766e", "brand2-soft": "#dcf5f1", - chart: "#6366f1", "chart-soft": "#e3e5fc" - }, - dark: { - bg: "#0b1020", surface: "#151b2e", sunk: "#0f1426", line: "#262e48", "line-strong": "#36405f", control: "#6e7a9c", - ink: "#e8ebf5", ink2: "#c0c7dc", muted: "#929bb8", - accent: "#a5b4fc", "accent-fill": "#5850ec", "on-accent": "#ffffff", "accent-soft": "#252a55", - "brand2-fill": "#2dd4bf", "on-brand2": "#042f2e", brand2: "#5eead4", "brand2-soft": "#103633", - chart: "#818cf8", "chart-soft": "#252a55" - } - }, - { - id: "2", - nama: "2 · Navy Brosur", - catatan: "Palet contoh standar (hadir): navy tua untuk aksi, oranye untuk Deploy App, teal untuk grafik CPU/RAM/Disk. Paling hangat dan berkarakter.", - light: { - bg: "#eef1f8", surface: "#ffffff", sunk: "#f5f7fc", line: "#e1e5f0", "line-strong": "#c8cede", control: "#7c83ad", - ink: "#141a33", ink2: "#3d4566", muted: "#656d8c", - accent: "#2b3486", "accent-fill": "#2b3486", "on-accent": "#ffffff", "accent-soft": "#e7e9f8", - "brand2-fill": "#f26a21", "on-brand2": "#1b1f3b", brand2: "#c2410c", "brand2-soft": "#fdeee4", - chart: "#178a8c", "chart-soft": "#dff3f3" - }, - dark: { - bg: "#0c0f1e", surface: "#161a2f", sunk: "#11142a", line: "#272c48", "line-strong": "#363c5e", control: "#6b7399", - ink: "#e9ebf7", ink2: "#bfc4de", muted: "#8f95b4", - accent: "#a9b2ff", "accent-fill": "#4a54c9", "on-accent": "#ffffff", "accent-soft": "#242a5c", - "brand2-fill": "#f26a21", "on-brand2": "#1b1f3b", brand2: "#ff9a5c", "brand2-soft": "#3a2418", - chart: "#4fd1d3", "chart-soft": "#143339" - } - }, - { - id: "3", - nama: "3 · Slate Teal Ops", - catatan: "Netral abu-biru dingin, teal gelap untuk aksi, amber untuk Deploy App. Kesan layar monitoring: tenang, status dan angka paling menonjol.", - light: { - bg: "#f0f3f5", surface: "#ffffff", sunk: "#f3f6f8", line: "#dde3e8", "line-strong": "#c5cfd7", control: "#74828f", - ink: "#0f1a22", ink2: "#34434f", muted: "#5b6975", - accent: "#0e6e78", "accent-fill": "#0e6e78", "on-accent": "#ffffff", "accent-soft": "#e0f1f2", - "brand2-fill": "#f5a524", "on-brand2": "#1a1305", brand2: "#a35a00", "brand2-soft": "#fdf0d9", - chart: "#0891b2", "chart-soft": "#dcf0f6" - }, - dark: { - bg: "#0a1116", surface: "#131c23", sunk: "#0e161c", line: "#22303a", "line-strong": "#314350", control: "#687b89", - ink: "#e6eef2", ink2: "#b9c8d1", muted: "#8a9ba7", - accent: "#5fd4dd", "accent-fill": "#0e6e78", "on-accent": "#ffffff", "accent-soft": "#103338", - "brand2-fill": "#f5a524", "on-brand2": "#1a1305", brand2: "#f8b95a", "brand2-soft": "#33270f", - chart: "#38bdf8", "chart-soft": "#0f2c3a" - } - } + { id: "1", nama: "1 · Indigo Dockify (default)", catatan: "Netral slate, indigo untuk semua aksi utama (termasuk Deploy App), violet untuk seri grafik kedua.", ...palet("indigo") }, + { id: "2", nama: "2 · Navy Brosur", catatan: "Navy tua untuk aksi, biru untuk seri grafik kedua, grafik indigo-navy. Paling formal.", ...palet("navy") }, + { id: "3", nama: "3 · Slate Teal Ops", catatan: "Netral abu-biru dingin, teal gelap untuk aksi, biru langit untuk seri kedua. Kesan layar monitoring.", ...palet("teal") } ]; -// Token status sama di semua opsi (kontras tetap dihitung per opsi karena surface berbeda). -const SEM = { - light: { - ok: "#15803d", "ok-text": "#166534", "ok-bg": "#dcfce7", - warn: "#b45309", "warn-text": "#92400e", "warn-bg": "#fef3c7", - danger: "#c81e1e", "danger-text": "#991b1b", "danger-bg": "#fee2e2", "danger-fill": "#c81e1e", - shadow: "0 1px 2px rgba(16,24,40,.06),0 1px 3px rgba(16,24,40,.05)" - }, - dark: { - ok: "#4ade80", "ok-text": "#86efac", "ok-bg": "#10301e", - warn: "#fbbf24", "warn-text": "#fcd34d", "warn-bg": "#33270a", - danger: "#f87171", "danger-text": "#fca5a5", "danger-bg": "#3b1618", "danger-fill": "#c81e1e", - shadow: "0 1px 2px rgba(0,0,0,.45)" - } -}; - const ORDER = ["bg", "surface", "sunk", "line", "line-strong", "control", "ink", "ink2", "muted", "accent", "accent-fill", "on-accent", "accent-soft", "brand2-fill", "on-brand2", "brand2", "brand2-soft", "chart", "chart-soft", "ok", "ok-text", "ok-bg", "warn", "warn-text", "warn-bg", "danger", "danger-text", "danger-bg", "danger-fill", "shadow"]; -const tok = (o, mode) => ({ ...o[mode], ...SEM[mode] }); +const tok = (o, mode) => o[mode]; +for (const o of OPSI) for (const mode of ["light", "dark"]) { + const miss = ORDER.filter((k) => !o[mode][k]); + if (miss.length) throw new Error(`opsi ${o.id} ${mode}: token hilang ${miss.join(", ")}`); +} // ---------- Kontras WCAG ---------- const lum = (hex) => { @@ -194,7 +136,7 @@ const dashboard = (dark) => `${header(dark)} const apps = (dark) => `${header(dark)}
-

Apps

${ic("plus")}Deploy App
+

Apps

${ic("plus")}Deploy App
Allrunningstoppeddraft

3 apps on 2 servers

@@ -316,7 +258,6 @@ h1{font-size:22px;font-weight:800;letter-spacing:-.02em;line-height:1.2} .btn{height:44px;border-radius:12px;padding:0 16px;display:flex;align-items:center;justify-content:center;gap:7px;font-weight:700;font-size:14px;white-space:nowrap} .btn .icon{width:17px;height:17px} .btn-primary{background:var(--accent-fill);color:var(--on-accent);box-shadow:var(--shadow)} -.btn-brand{background:var(--brand2-fill);color:var(--on-brand2)} .btn-secondary{background:var(--surface);color:var(--ink);border:1px solid var(--control)} .btn-ghost{color:var(--ink2)} .btn-dout{color:var(--danger);border:1.5px solid var(--danger);padding:0 8px;background:transparent} @@ -388,9 +329,9 @@ const desktop = (o) => `

Pola ResponsiveSheet di desktop

`; const html = (fonts) => ` -Dockify · 3 opsi warna +Dockify · 3 palet
-

Dockify: pilih 1, 2, atau 3

+

Dockify: tiga palet (Settings → Appearance)

Semua kontras sudah dihitung (WCAG, terang dan gelap): teks ≥4.5:1, batas kontrol ≥3:1, semua pasangan lolos (${OPSI.map((o) => `opsi ${o.id}: ${lolos(o.id)}`).join(", ")}).

Struktur sama di ketiga opsi; yang berbeda hanya warna. Tiap layar: HP 360px, terang dan gelap berdampingan. Isi dari data mock Dockify (prod-heavy-1, staging-1, web-shop, api-core, worker-mail). Aksi berbahaya merah garis di zona bahaya, isian merah hanya di konfirmasi (K9). Label UI tetap bahasa Inggris.

${OPSI.map((o) => `

${o.nama}

${o.catatan}

diff --git a/docs/design/kontras.md b/docs/design/kontras.md index 9b6884d..1750186 100644 --- a/docs/design/kontras.md +++ b/docs/design/kontras.md @@ -6,7 +6,7 @@ Ringkasan: opsi 1 38/38 lolos · opsi 2 38/38 lolos · opsi 3 38/38 lolos (12 pa Lencana Dockify: running/online = ok (`ok-bg` + `ok-text`); pending/initializing/deploying = warn (`warn-bg` + `warn-text`); stopped/draft = netral (`sunk` + `ink2`, garis `line`); error/failed/offline = danger (`danger-bg` + `danger-text`). -## Opsi 1 · Indigo Dockify +## Opsi 1 · Indigo Dockify (default) | Pasangan | Min | Terang | Gelap | Catatan | | :--- | ---: | ---: | ---: | :--- | @@ -21,13 +21,13 @@ Lencana Dockify: running/online = ok (`ok-bg` + `ok-text`); pending/initializing | danger-text / danger-bg | 4.5 | 6.80 | 8.42 | | | ok-text / ok-bg | 4.5 | 6.49 | 10.22 | | | warn-text / warn-bg | 4.5 | 6.37 | 10.15 | | -| on-brand2 / brand2-fill | 4.5 | 5.81 | 7.77 | | +| on-brand2 / brand2-fill | 4.5 | 7.10 | 7.10 | | | muted / bg | 4.5 | 5.34 | 6.85 | meta di latar halaman | | accent / accent-soft | 4.5 | 5.55 | 6.84 | chip aktif | | ink2 / sunk | 4.5 | 9.39 | 10.84 | lencana netral | | ok / surface | 4.5 | 5.02 | 9.81 | angka KPI Online/Running | | white / danger-fill | 4.5 | 5.74 | 5.74 | tombol Undeploy di konfirmasi | -| brand2 / surface | 4.5 | 5.47 | 11.56 | angka sekunder | +| brand2 / surface | 4.5 | 7.10 | 9.26 | angka sekunder | | chart / chart-soft | 3 | 3.59 | 4.57 | bar CPU/RAM/Disk (grafis) | | Token | Terang | Gelap | @@ -78,13 +78,13 @@ Lencana Dockify: running/online = ok (`ok-bg` + `ok-text`); pending/initializing | danger-text / danger-bg | 4.5 | 6.80 | 8.42 | | | ok-text / ok-bg | 4.5 | 6.49 | 10.22 | | | warn-text / warn-bg | 4.5 | 6.37 | 10.15 | | -| on-brand2 / brand2-fill | 4.5 | 5.25 | 5.25 | | +| on-brand2 / brand2-fill | 4.5 | 8.72 | 8.72 | | | muted / bg | 4.5 | 4.51 | 6.46 | meta di latar halaman | | accent / accent-soft | 4.5 | 8.98 | 6.73 | chip aktif | | ink2 / sunk | 4.5 | 8.74 | 10.51 | lencana netral | | ok / surface | 4.5 | 5.02 | 9.85 | angka KPI Online/Running | | white / danger-fill | 4.5 | 5.74 | 5.74 | tombol Undeploy di konfirmasi | -| brand2 / surface | 4.5 | 5.18 | 8.20 | angka sekunder | +| brand2 / surface | 4.5 | 8.72 | 9.52 | angka sekunder | | chart / chart-soft | 3 | 4.96 | 5.08 | bar CPU/RAM/Disk (grafis) | | Token | Terang | Gelap | @@ -135,13 +135,13 @@ Lencana Dockify: running/online = ok (`ok-bg` + `ok-text`); pending/initializing | danger-text / danger-bg | 4.5 | 6.80 | 8.42 | | | ok-text / ok-bg | 4.5 | 6.49 | 10.22 | | | warn-text / warn-bg | 4.5 | 6.37 | 10.15 | | -| on-brand2 / brand2-fill | 4.5 | 9.03 | 9.03 | | +| on-brand2 / brand2-fill | 4.5 | 7.56 | 7.56 | | | muted / bg | 4.5 | 5.06 | 6.63 | meta di latar halaman | | accent / accent-soft | 4.5 | 5.12 | 7.70 | chip aktif | | ink2 / sunk | 4.5 | 9.38 | 10.65 | lencana netral | | ok / surface | 4.5 | 5.02 | 9.89 | angka KPI Online/Running | | white / danger-fill | 4.5 | 5.74 | 5.74 | tombol Undeploy di konfirmasi | -| brand2 / surface | 4.5 | 5.22 | 9.92 | angka sekunder | +| brand2 / surface | 4.5 | 7.56 | 10.34 | angka sekunder | | chart / chart-soft | 3 | 3.13 | 6.80 | bar CPU/RAM/Disk (grafis) | | Token | Terang | Gelap | diff --git a/docs/design/preview-warna.html b/docs/design/preview-warna.html index 25eeeb8..089a50e 100644 --- a/docs/design/preview-warna.html +++ b/docs/design/preview-warna.html @@ -1,5 +1,5 @@ -Dockify · 3 opsi warna +Dockify · 3 palet
-

Dockify: pilih 1, 2, atau 3

+

Dockify: tiga palet (Settings → Appearance)

Semua kontras sudah dihitung (WCAG, terang dan gelap): teks ≥4.5:1, batas kontrol ≥3:1, semua pasangan lolos (opsi 1: 38/38, opsi 2: 38/38, opsi 3: 38/38).

Struktur sama di ketiga opsi; yang berbeda hanya warna. Tiap layar: HP 360px, terang dan gelap berdampingan. Isi dari data mock Dockify (prod-heavy-1, staging-1, web-shop, api-core, worker-mail). Aksi berbahaya merah garis di zona bahaya, isian merah hanya di konfirmasi (K9). Label UI tetap bahasa Inggris.

-

1 · Indigo Dockify

Brand Dockify sekarang (indigo) dirapikan: netral slate, indigo untuk aksi utama, teal untuk Deploy App. Paling akrab bagi pengguna lama.

+

1 · Indigo Dockify (default)

Netral slate, indigo untuk semua aksi utama (termasuk Deploy App), violet untuk seri grafik kedua.

A. Dashboard
Terang
-
+
DDockify
@@ -150,7 +149,7 @@

Dockify: pilih 1, 2, atau 3

Gelap
-
+
DDockify
@@ -175,13 +174,13 @@

Dockify: pilih 1, 2, atau 3

B. Apps
Terang
-
+
DDockify
-

Apps

Deploy App
+

Apps

Deploy App
Allrunningstoppeddraft

3 apps on 2 servers

@@ -216,13 +215,13 @@

Dockify: pilih 1, 2, atau 3

Gelap
-
+
DDockify
-

Apps

Deploy App
+

Apps

Deploy App
Allrunningstoppeddraft

3 apps on 2 servers

@@ -257,7 +256,7 @@

Dockify: pilih 1, 2, atau 3

C. App detail
Terang
-
+
DDockify
@@ -286,7 +285,7 @@

DANGER ZONE

Gelap
-
+
DDockify
@@ -315,7 +314,7 @@

DANGER ZONE

D. Confirm Undeploy (HP)
Terang
-
+
DDockify
@@ -349,7 +348,7 @@

DANGER ZONE

Undeploy web-shop?

This will stop and remove web-shop from prod-heavy-1. shop.example.com stops serving traffic until you deploy it again.

CancelUndeploy
Gelap
-
+
DDockify
@@ -383,9 +382,9 @@

DANGER ZONE

Undeploy web-shop?

This will stop and remove web-shop from prod-heavy-1. shop.example.com stops serving traffic until you deploy it again.

CancelUndeploy
-

LENCANA STATUS

runningonlinependingdeployingstoppeddraftfailedoffline
runningonlinependingdeployingstoppeddraftfailedoffline

TOKEN TERANG

bg #f5f7fbsurface #ffffffsunk #f1f4f9line #e2e8f0line-strong #cbd5e1control #7a8699ink #0f172aink2 #334155muted #5b677aaccent #4f46e5accent-fill #4f46e5on-accent #ffffffaccent-soft #eef0ffbrand2-fill #14b8a6on-brand2 #042f2ebrand2 #0f766ebrand2-soft #dcf5f1chart #6366f1chart-soft #e3e5fcok #15803dok-text #166534ok-bg #dcfce7warn #b45309warn-text #92400ewarn-bg #fef3c7danger #c81e1edanger-text #991b1bdanger-bg #fee2e2danger-fill #c81e1e

TOKEN GELAP

bg #0b1020surface #151b2esunk #0f1426line #262e48line-strong #36405fcontrol #6e7a9cink #e8ebf5ink2 #c0c7dcmuted #929bb8accent #a5b4fcaccent-fill #5850econ-accent #ffffffaccent-soft #252a55brand2-fill #2dd4bfon-brand2 #042f2ebrand2 #5eead4brand2-soft #103633chart #818cf8chart-soft #252a55ok #4ade80ok-text #86efacok-bg #10301ewarn #fbbf24warn-text #fcd34dwarn-bg #33270adanger #f87171danger-text #fca5a5danger-bg #3b1618danger-fill #c81e1e

2 · Navy Brosur

Palet contoh standar (hadir): navy tua untuk aksi, oranye untuk Deploy App, teal untuk grafik CPU/RAM/Disk. Paling hangat dan berkarakter.

+

LENCANA STATUS

runningonlinependingdeployingstoppeddraftfailedoffline
runningonlinependingdeployingstoppeddraftfailedoffline

TOKEN TERANG

bg #f5f7fbsurface #ffffffsunk #f1f4f9line #e2e8f0line-strong #cbd5e1control #7a8699ink #0f172aink2 #334155muted #5b677aaccent #4f46e5accent-fill #4f46e5on-accent #ffffffaccent-soft #eef0ffbrand2-fill #6d28d9on-brand2 #ffffffbrand2 #6d28d9brand2-soft #ede9fechart #6366f1chart-soft #e3e5fcok #15803dok-text #166534ok-bg #dcfce7warn #b45309warn-text #92400ewarn-bg #fef3c7danger #c81e1edanger-text #991b1bdanger-bg #fee2e2danger-fill #c81e1e

TOKEN GELAP

bg #0b1020surface #151b2esunk #0f1426line #262e48line-strong #36405fcontrol #6e7a9cink #e8ebf5ink2 #c0c7dcmuted #929bb8accent #a5b4fcaccent-fill #5850econ-accent #ffffffaccent-soft #252a55brand2-fill #6d28d9on-brand2 #ffffffbrand2 #c4b5fdbrand2-soft #2a1d55chart #818cf8chart-soft #252a55ok #4ade80ok-text #86efacok-bg #10301ewarn #fbbf24warn-text #fcd34dwarn-bg #33270adanger #f87171danger-text #fca5a5danger-bg #3b1618danger-fill #c81e1e

2 · Navy Brosur

Navy tua untuk aksi, biru untuk seri grafik kedua, grafik indigo-navy. Paling formal.

A. Dashboard
Terang
-
+
DDockify
@@ -410,7 +409,7 @@

Undeploy web-shop?

Gelap
-
+
DDockify
@@ -435,13 +434,13 @@

Undeploy web-shop?

B. Apps
Terang
-
+
DDockify
-

Apps

Deploy App
+

Apps

Deploy App
Allrunningstoppeddraft

3 apps on 2 servers

@@ -476,13 +475,13 @@

Undeploy web-shop?

Gelap
-
+
DDockify
-

Apps

Deploy App
+

Apps

Deploy App
Allrunningstoppeddraft

3 apps on 2 servers

@@ -517,7 +516,7 @@

Undeploy web-shop?

C. App detail
Terang
-
+
DDockify
@@ -546,7 +545,7 @@

DANGER ZONE

Gelap
-
+
DDockify
@@ -575,7 +574,7 @@

DANGER ZONE

D. Confirm Undeploy (HP)
Terang
-
+
DDockify
@@ -609,7 +608,7 @@

DANGER ZONE

Undeploy web-shop?

This will stop and remove web-shop from prod-heavy-1. shop.example.com stops serving traffic until you deploy it again.

CancelUndeploy
Gelap
-
+
DDockify
@@ -643,9 +642,9 @@

DANGER ZONE

Undeploy web-shop?

This will stop and remove web-shop from prod-heavy-1. shop.example.com stops serving traffic until you deploy it again.

CancelUndeploy
-

LENCANA STATUS

runningonlinependingdeployingstoppeddraftfailedoffline
runningonlinependingdeployingstoppeddraftfailedoffline

TOKEN TERANG

bg #eef1f8surface #ffffffsunk #f5f7fcline #e1e5f0line-strong #c8cedecontrol #7c83adink #141a33ink2 #3d4566muted #656d8caccent #2b3486accent-fill #2b3486on-accent #ffffffaccent-soft #e7e9f8brand2-fill #f26a21on-brand2 #1b1f3bbrand2 #c2410cbrand2-soft #fdeee4chart #178a8cchart-soft #dff3f3ok #15803dok-text #166534ok-bg #dcfce7warn #b45309warn-text #92400ewarn-bg #fef3c7danger #c81e1edanger-text #991b1bdanger-bg #fee2e2danger-fill #c81e1e

TOKEN GELAP

bg #0c0f1esurface #161a2fsunk #11142aline #272c48line-strong #363c5econtrol #6b7399ink #e9ebf7ink2 #bfc4demuted #8f95b4accent #a9b2ffaccent-fill #4a54c9on-accent #ffffffaccent-soft #242a5cbrand2-fill #f26a21on-brand2 #1b1f3bbrand2 #ff9a5cbrand2-soft #3a2418chart #4fd1d3chart-soft #143339ok #4ade80ok-text #86efacok-bg #10301ewarn #fbbf24warn-text #fcd34dwarn-bg #33270adanger #f87171danger-text #fca5a5danger-bg #3b1618danger-fill #c81e1e

3 · Slate Teal Ops

Netral abu-biru dingin, teal gelap untuk aksi, amber untuk Deploy App. Kesan layar monitoring: tenang, status dan angka paling menonjol.

+

LENCANA STATUS

runningonlinependingdeployingstoppeddraftfailedoffline
runningonlinependingdeployingstoppeddraftfailedoffline

TOKEN TERANG

bg #eef1f8surface #ffffffsunk #f5f7fcline #e1e5f0line-strong #c8cedecontrol #7c83adink #141a33ink2 #3d4566muted #656d8caccent #2b3486accent-fill #2b3486on-accent #ffffffaccent-soft #e7e9f8brand2-fill #1e40afon-brand2 #ffffffbrand2 #1e40afbrand2-soft #dbeafechart #4a54c9chart-soft #e3e5fbok #15803dok-text #166534ok-bg #dcfce7warn #b45309warn-text #92400ewarn-bg #fef3c7danger #c81e1edanger-text #991b1bdanger-bg #fee2e2danger-fill #c81e1e

TOKEN GELAP

bg #0c0f1esurface #161a2fsunk #11142aline #272c48line-strong #363c5econtrol #6b7399ink #e9ebf7ink2 #bfc4demuted #8f95b4accent #a9b2ffaccent-fill #4a54c9on-accent #ffffffaccent-soft #242a5cbrand2-fill #1e40afon-brand2 #ffffffbrand2 #93c5fdbrand2-soft #1a2a55chart #8c96ffchart-soft #242a5cok #4ade80ok-text #86efacok-bg #10301ewarn #fbbf24warn-text #fcd34dwarn-bg #33270adanger #f87171danger-text #fca5a5danger-bg #3b1618danger-fill #c81e1e

3 · Slate Teal Ops

Netral abu-biru dingin, teal gelap untuk aksi, biru langit untuk seri kedua. Kesan layar monitoring.

A. Dashboard
Terang
-
+
DDockify
@@ -670,7 +669,7 @@

Undeploy web-shop?

Gelap
-
+
DDockify
@@ -695,13 +694,13 @@

Undeploy web-shop?

B. Apps
Terang
-
+
DDockify
-

Apps

Deploy App
+

Apps

Deploy App
Allrunningstoppeddraft

3 apps on 2 servers

@@ -736,13 +735,13 @@

Undeploy web-shop?

Gelap
-
+
DDockify
-

Apps

Deploy App
+

Apps

Deploy App
Allrunningstoppeddraft

3 apps on 2 servers

@@ -777,7 +776,7 @@

Undeploy web-shop?

C. App detail
Terang
-
+
DDockify
@@ -806,7 +805,7 @@

DANGER ZONE

Gelap
-
+
DDockify
@@ -835,7 +834,7 @@

DANGER ZONE

D. Confirm Undeploy (HP)
Terang
-
+
DDockify
@@ -869,7 +868,7 @@

DANGER ZONE

Undeploy web-shop?

This will stop and remove web-shop from prod-heavy-1. shop.example.com stops serving traffic until you deploy it again.

CancelUndeploy
Gelap
-
+
DDockify
@@ -903,10 +902,10 @@

DANGER ZONE

Undeploy web-shop?

This will stop and remove web-shop from prod-heavy-1. shop.example.com stops serving traffic until you deploy it again.

CancelUndeploy
-

LENCANA STATUS

runningonlinependingdeployingstoppeddraftfailedoffline
runningonlinependingdeployingstoppeddraftfailedoffline

TOKEN TERANG

bg #f0f3f5surface #ffffffsunk #f3f6f8line #dde3e8line-strong #c5cfd7control #74828fink #0f1a22ink2 #34434fmuted #5b6975accent #0e6e78accent-fill #0e6e78on-accent #ffffffaccent-soft #e0f1f2brand2-fill #f5a524on-brand2 #1a1305brand2 #a35a00brand2-soft #fdf0d9chart #0891b2chart-soft #dcf0f6ok #15803dok-text #166534ok-bg #dcfce7warn #b45309warn-text #92400ewarn-bg #fef3c7danger #c81e1edanger-text #991b1bdanger-bg #fee2e2danger-fill #c81e1e

TOKEN GELAP

bg #0a1116surface #131c23sunk #0e161cline #22303aline-strong #314350control #687b89ink #e6eef2ink2 #b9c8d1muted #8a9ba7accent #5fd4ddaccent-fill #0e6e78on-accent #ffffffaccent-soft #103338brand2-fill #f5a524on-brand2 #1a1305brand2 #f8b95abrand2-soft #33270fchart #38bdf8chart-soft #0f2c3aok #4ade80ok-text #86efacok-bg #10301ewarn #fbbf24warn-text #fcd34dwarn-bg #33270adanger #f87171danger-text #fca5a5danger-bg #3b1618danger-fill #c81e1e
+

LENCANA STATUS

runningonlinependingdeployingstoppeddraftfailedoffline
runningonlinependingdeployingstoppeddraftfailedoffline

TOKEN TERANG

bg #f0f3f5surface #ffffffsunk #f3f6f8line #dde3e8line-strong #c5cfd7control #74828fink #0f1a22ink2 #34434fmuted #5b6975accent #0e6e78accent-fill #0e6e78on-accent #ffffffaccent-soft #e0f1f2brand2-fill #075985on-brand2 #ffffffbrand2 #075985brand2-soft #e0f2fechart #0891b2chart-soft #dcf0f6ok #15803dok-text #166534ok-bg #dcfce7warn #b45309warn-text #92400ewarn-bg #fef3c7danger #c81e1edanger-text #991b1bdanger-bg #fee2e2danger-fill #c81e1e

TOKEN GELAP

bg #0a1116surface #131c23sunk #0e161cline #22303aline-strong #314350control #687b89ink #e6eef2ink2 #b9c8d1muted #8a9ba7accent #5fd4ddaccent-fill #0e6e78on-accent #ffffffaccent-soft #103338brand2-fill #075985on-brand2 #ffffffbrand2 #7dd3fcbrand2-soft #0f2a3achart #38bdf8chart-soft #0f2c3aok #4ade80ok-text #86efacok-bg #10301ewarn #fbbf24warn-text #fcd34dwarn-bg #33270adanger #f87171danger-text #fca5a5danger-bg #3b1618danger-fill #c81e1e

Pola ResponsiveSheet di desktop (≥700px)

Konfirmasi yang sama di layar lebar jadi popup tengah max-w 560 (contoh memakai opsi 1, terang). Tutup lewat X, backdrop, atau Escape. Di HP (<700px) jadi panel bawah seperti layar D.

-
+