/* ============================================================================ Design System Foundation — Iterasi B (2026-08-28) Ref: docs/02-gds-design.md §2.9 / §2.9.0 Dua skin: [data-skin="portal"] (stunning/premium/information-first) [data-skin="admin"] (operation-first/efficient/professional) Skin ditentukan pada atau elemen root aplikasi masing-masing. Iterasi B = TOKEN + PRIMITIVE saja. Halaman final dibangun Iterasi C+. ========================================================================== */ /* ---- Font stacks (self-hosted woff2 di public/assets/fonts/; fallback aman) ---- */ :root { --font-display: "Archivo", "Arial Narrow", "Helvetica Neue", system-ui, sans-serif; --font-body: "Public Sans", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --font-mono: ui-monospace, SFMono-Regular, "Cascadia Code", Consolas, "Liberation Mono", monospace; } /* ============================================================================ 1. TOKEN INTI — nilai netral (dipakai kedua skin kecuali di-override) ========================================================================== */ :root { /* ---- Spacing scale (4px base) ---- */ --space-0: 0; --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-7: 3rem; --space-8: 4rem; --space-9: 6rem; /* ---- Radius ---- */ --radius-xs: 3px; --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --radius-pill: 999px; /* ---- Type scale ---- */ --text-xs: 0.75rem; --text-sm: 0.875rem; --text-base: 1rem; --text-md: 1.125rem; --text-lg: 1.375rem; --text-xl: 1.75rem; --text-2xl: 2.25rem; --text-3xl: 3rem; --leading-tight: 1.2; --leading-snug: 1.4; --leading-normal: 1.6; --measure: 68ch; /* ---- Elevation ---- */ --elev-0: none; --elev-1: 0 1px 2px rgba(17, 20, 24, 0.06), 0 1px 3px rgba(17, 20, 24, 0.05); --elev-2: 0 2px 6px rgba(17, 20, 24, 0.07), 0 8px 24px rgba(17, 20, 24, 0.06); --elev-3: 0 8px 20px rgba(17, 20, 24, 0.10), 0 24px 48px rgba(17, 20, 24, 0.10); /* ---- Layout primitives ---- */ --container-max: 1180px; --container-narrow: 760px; --gutter: clamp(1rem, 4vw, 2.5rem); /* ---- Motion ---- */ --motion-fast: 120ms; --motion-base: 200ms; --motion-slow: 320ms; --ease-standard: cubic-bezier(0.2, 0, 0, 1); --ease-emphasized: cubic-bezier(0.2, 0, 0, 1.2); /* ---- Focus ring (dipakai kedua skin, warna mengikuti --accent) ---- */ --focus-ring: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent); --focus-ring-inset: inset 0 0 0 2px var(--accent); /* ---- Semantic status: percakapan (lepas dari --accent) ---- */ --status-new-fg: #55606f; --status-new-bg: #eef0f3; --status-ai-fg: #1b5fb0; --status-ai-bg: #e8f1fc; --status-wait-fg: #a9640a; --status-wait-bg: #fbefdd; --status-human-fg: #1c7a44; --status-human-bg: #e5f3ea; --status-resolved-fg: #6b7280; --status-resolved-bg: #eef0f2; --status-closed-fg: #4b5563; --status-closed-bg: #e3e6ea; /* ---- Semantic status: keberlakuan KB (dipakai Iterasi C+; ditetapkan di sini) ---- */ --valid-active-fg: #1c7a44; --valid-active-bg: #e5f3ea; --valid-pending-fg: #1b5fb0; --valid-pending-bg: #e8f1fc; --valid-inactive-fg: #6b7280; --valid-inactive-bg: #eef0f2; --valid-revoked-fg: #b0402b; --valid-revoked-bg: #f7e7e3; --valid-superseded-fg: #a9640a; --valid-superseded-bg: #fbefdd; --valid-archived-fg: #4b5563; --valid-archived-bg: #e3e6ea; /* ---- Semantic feedback ---- */ --ok-fg: #197a3d; --ok-bg: #e7f4ec; --warn-fg: #b26a00; --warn-bg: #fdf1df; --danger-fg: #b3261e; --danger-bg: #f9e6e5; --info-fg: #1b5fb0; --info-bg: #e8f1fc; } /* ============================================================================ 2. SKIN — PUBLIC PORTAL (V14 — port of scratchpad/mockup-home.html tokens) Light-only. The homepage/portal styling lives in portal.css (mockup CSS verbatim). These generic tokens are mapped to the exact V14 values so the shared Mido widget (mido-widget.css) re-skins consistently to V14. V14 tokens: --navy #12305C · --paper #FBFAF6 · --gold #A9812C … ========================================================================== */ [data-skin="portal"] { --bg: #FBFAF6; /* --paper */ --surface: #FFFFFF; /* --white */ --surface-2: #F3EFE4; /* --paper-2 */ --surface-3: #E9F1FA; /* --mist */ --border: #E7E1D0; /* --line */ --border-strong: #DBD3BE; /* --line-2 */ --ink: #13233E; /* --ink */ --ink-soft: #46536A; /* --body */ --ink-faint: #7E8B9E; /* --muted */ /* V14 named tokens (also declared in portal.css :root; kept here for the widget) */ --navy: #12305C; --navy-600: #1C4A86; --navy-800: #0A1E3B; --navy-strong: #0A1E3B; --navy-soft: #E9F1FA; --paper: #FBFAF6; --paper-2: #F3EFE4; --mist: #E9F1FA; --mist-2: #D6E4F4; --gold: #A9812C; --gold-soft: #C6A44E; --gold-strong: #8F6A20; --red: #BE2233; --accent-red: #BE2233; --line: #E7E1D0; --line-2: #DBD3BE; --line-mist: #D3E0F0; --accent: #12305C; /* navy */ --accent-strong: #0A1E3B; /* navy-800 */ --accent-soft: #E9F1FA; /* mist */ --accent-ink: #FFFFFF; --link: #12305C; --radius-sm: 12px; /* --r-sm */ --radius-md: 16px; /* --r */ --elev-1: 0 1px 2px rgba(10, 30, 59, 0.05), 0 1px 3px rgba(10, 30, 59, 0.04); --elev-2: 0 4px 12px rgba(10, 30, 59, 0.08), 0 16px 40px -20px rgba(10, 30, 59, 0.22); --elev-3: 0 22px 46px -28px rgba(10, 30, 59, 0.3); color-scheme: light; } /* Portal V14 = light-only. Bahkan bila sistem gelap, portal tetap terang. */ @media (prefers-color-scheme: dark) { [data-skin="portal"] { color-scheme: light; } } /* ============================================================================ 3. SKIN — ADMIN / PETUGAS (operation-first / efficient / professional) Palet: netral sejuk + aksen biru kerja. Lebih padat. ========================================================================== */ [data-skin="admin"] { --bg: #f5f6f8; --surface: #ffffff; --surface-2: #eef1f5; --surface-3: #e4e8ee; --border: #dbe0e7; --border-strong: #c3cad4; --ink: #1c2430; --ink-soft: #495365; --ink-faint: #7b8494; --accent: #2f5bd0; /* biru kerja untuk fokus/aksi (referensi workspace, bukan disalin literal) */ --accent-strong: #2547a8; --accent-soft: #e7edfb; --accent-ink: #ffffff; --link: #2547a8; /* Admin sedikit lebih rapat */ --gutter: clamp(0.75rem, 2vw, 1.5rem); color-scheme: light; } @media (prefers-color-scheme: dark) { [data-skin="admin"]:not([data-theme="light"]) { --bg: #12161c; --surface: #1a1f27; --surface-2: #212832; --surface-3: #29313d; --border: #2c3542; --border-strong: #3c4757; --ink: #e7eaef; --ink-soft: #b0b9c6; --ink-faint: #7e8899; --accent: #8fa9f2; --accent-strong: #a8bcf6; --accent-soft: #212a3d; --accent-ink: #0f1522; --link: #a8bcf6; --elev-1: 0 1px 2px rgba(0, 0, 0, 0.4); --elev-2: 0 2px 8px rgba(0, 0, 0, 0.45), 0 12px 32px rgba(0, 0, 0, 0.4); --elev-3: 0 12px 32px rgba(0, 0, 0, 0.55); color-scheme: dark; } } [data-skin="admin"][data-theme="dark"] { --bg: #12161c; --surface: #1a1f27; --surface-2: #212832; --surface-3: #29313d; --border: #2c3542; --border-strong: #3c4757; --ink: #e7eaef; --ink-soft: #b0b9c6; --ink-faint: #7e8899; --accent: #8fa9f2; --accent-strong: #a8bcf6; --accent-soft: #212a3d; --accent-ink: #0f1522; --link: #a8bcf6; --elev-1: 0 1px 2px rgba(0, 0, 0, 0.4); --elev-2: 0 2px 8px rgba(0, 0, 0, 0.45), 0 12px 32px rgba(0, 0, 0, 0.4); --elev-3: 0 12px 32px rgba(0, 0, 0, 0.55); color-scheme: dark; } /* ============================================================================ 4. PRIMITIVES — netral, minimal, dipakai semua skin via token (Bukan komponen halaman final; hanya dasar konsisten untuk Iterasi berikut.) ========================================================================== */ .ds-reset * { box-sizing: border-box; } /* Layout */ .ds-container { max-width: var(--container-max); margin-inline: auto; padding-inline: var(--gutter); } .ds-container--narrow { max-width: var(--container-narrow); } .ds-stack { display: flex; flex-direction: column; gap: var(--space-4); } .ds-stack--sm { gap: var(--space-2); } .ds-stack--lg { gap: var(--space-6); } .ds-row { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; } .ds-grid { display: grid; gap: var(--space-4); } .ds-grid--cards { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } /* Surface */ .ds-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--elev-1); } .ds-card--flat { box-shadow: var(--elev-0); } .ds-card--raised { box-shadow: var(--elev-2); } /* Typography helpers */ .ds-display { font-family: var(--font-display); font-weight: 500; line-height: var(--leading-tight); letter-spacing: 0.005em; text-wrap: balance; } .ds-h1 { font-family: var(--font-display); font-weight: 500; font-size: var(--text-2xl); line-height: var(--leading-tight); text-wrap: balance; margin: 0; } .ds-h2 { font-family: var(--font-display); font-weight: 500; font-size: var(--text-xl); line-height: var(--leading-snug); text-wrap: balance; margin: 0; } .ds-h3 { font-family: var(--font-body); font-weight: 600; font-size: var(--text-md); margin: 0; } .ds-body { font-family: var(--font-body); font-size: var(--text-base); line-height: var(--leading-normal); color: var(--ink); max-width: var(--measure); } .ds-muted { color: var(--ink-faint); } .ds-eyebrow { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-faint); } /* Button primitive */ .ds-btn { --_bg: var(--surface); --_fg: var(--ink); --_bd: var(--border-strong); appearance: none; font: inherit; font-weight: 600; line-height: 1; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); padding: var(--space-3) var(--space-4); border: 1px solid var(--_bd); border-radius: var(--radius-sm); background: var(--_bg); color: var(--_fg); cursor: pointer; transition: background var(--motion-fast) var(--ease-standard), border-color var(--motion-fast) var(--ease-standard), transform var(--motion-fast) var(--ease-standard), box-shadow var(--motion-fast) var(--ease-standard); } .ds-btn:hover { background: var(--surface-2); } .ds-btn:active { transform: translateY(1px); } .ds-btn--primary { --_bg: var(--accent); --_fg: var(--accent-ink); --_bd: var(--accent); } .ds-btn--primary:hover { --_bg: var(--accent-strong); } .ds-btn--ghost { --_bg: transparent; --_bd: transparent; } .ds-btn--sm { padding: var(--space-2) var(--space-3); font-size: var(--text-sm); } .ds-btn:disabled, .ds-btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; pointer-events: none; } /* Field primitive */ .ds-field { display: flex; flex-direction: column; gap: var(--space-1); } .ds-label { font-size: var(--text-sm); font-weight: 600; color: var(--ink-soft); } .ds-input, .ds-select, .ds-textarea { font: inherit; color: var(--ink); background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); padding: var(--space-3); width: 100%; transition: border-color var(--motion-fast) var(--ease-standard), box-shadow var(--motion-fast) var(--ease-standard); } .ds-input:hover, .ds-select:hover, .ds-textarea:hover { border-color: var(--accent); } .ds-input:disabled, .ds-select:disabled, .ds-textarea:disabled, .ds-input[readonly] { background: var(--surface-2); color: var(--ink-faint); cursor: not-allowed; } .ds-help { font-size: var(--text-xs); color: var(--ink-faint); } .ds-error { font-size: var(--text-sm); color: var(--danger-fg); min-height: 1.1em; } /* Chip / badge primitive */ .ds-chip { display: inline-flex; align-items: center; gap: var(--space-1); padding: 0.18rem 0.55rem; border-radius: var(--radius-pill); font-size: var(--text-xs); font-weight: 600; border: 1px solid transparent; white-space: nowrap; } .ds-chip::before { content: ""; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: currentColor; flex: none; } .ds-chip--dotless::before { display: none; } /* Conversation status chips (6-state) */ .ds-chip--status-NEW { color: var(--status-new-fg); background: var(--status-new-bg); } .ds-chip--status-AI_ACTIVE { color: var(--status-ai-fg); background: var(--status-ai-bg); } .ds-chip--status-WAITING_FOR_HUMAN { color: var(--status-wait-fg); background: var(--status-wait-bg); } .ds-chip--status-HUMAN_ACTIVE { color: var(--status-human-fg); background: var(--status-human-bg); } .ds-chip--status-RESOLVED { color: var(--status-resolved-fg); background: var(--status-resolved-bg); } .ds-chip--status-CLOSED { color: var(--status-closed-fg); background: var(--status-closed-bg); } /* KB validity chips (dipakai Iterasi C+) */ .ds-chip--valid-active { color: var(--valid-active-fg); background: var(--valid-active-bg); } .ds-chip--valid-pending { color: var(--valid-pending-fg); background: var(--valid-pending-bg); } .ds-chip--valid-inactive { color: var(--valid-inactive-fg); background: var(--valid-inactive-bg); } .ds-chip--valid-revoked { color: var(--valid-revoked-fg); background: var(--valid-revoked-bg); } .ds-chip--valid-superseded { color: var(--valid-superseded-fg); background: var(--valid-superseded-bg); } .ds-chip--valid-archived { color: var(--valid-archived-fg); background: var(--valid-archived-bg); } /* Interaction / focus / disabled states (global, token-driven) */ :where(a, button, input, select, textarea, [tabindex]):focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-xs); } [aria-disabled="true"] { cursor: not-allowed; } /* Motion — hormati preferensi pengguna */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } } /* Responsive foundations */ img, svg, video { max-width: 100%; height: auto; } .ds-scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; } @media (max-width: 640px) { :root { --gutter: 1rem; } }