ปรับ look and feel

2026-08-20 21:34:45 +07:00 · 2026-08-20 21:34:45 +07:00 · b47667f918
commit b47667f918
parent 0148f48204
15 changed files with 915 additions and 523 deletions
--- a/web/app/assets/css/tailwind.css
+++ b/web/app/assets/css/tailwind.css
@ -1,3 +1,160 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
+
+/* ── Design tokens (derive จาก scheme ของ admincourt.go.th) ─────────────
+   เป็น RGB triplet (เว้นวรรค) เท่านั้น — ห้าม hex เพราะ pattern
+   rgb(var(--x) / <alpha-value>) ใน tailwind.config.ts จะพังเงียบๆ
+   Light = ค่าจาก scheme · Dark = derive (ครีม → warm near-black, #0000EE → indigo สว่าง) */
+:root {
+  color-scheme: light;
+
+  /* brand */
+  --c-primary: 0 0 238; /* #0000EE — CTA, link */
+  --c-primary-hover: 0 0 190; /* #0000BE */
+  --c-on-primary: 255 255 255; /* ข้อความบนพื้น primary */
+  --c-accent: 143 114 38; /* #8F7226 — ใช้น้อย: badge เตือน/decorative */
+
+  /* semantic */
+  --c-success: 83 163 54; /* #53A336 action-green */
+  --c-success-strong: 41 109 24; /* เขียวเข้มสำหรับ text บน tint (contrast AA) */
+  --c-error: 219 55 0; /* #DB3700 */
+  --c-error-strong: 184 43 0; /* แดงเข้มสำหรับ text บน tint */
+  --c-focus: 41 119 255; /* #2977FF — ring บนพื้นขาว (#6CB5F9 จางไป ~2:1) */
+
+  /* surfaces */
+  --c-surface: 255 255 255; /* พื้นหน้า */
+  --c-elevated: 251 247 236; /* #FBF7EC card/ตาราง/navbar */
+  --c-surface-muted: 243 237 220; /* #F3EDDC hover fill/แถวขยาย/file button */
+
+  /* content */
+  --c-ink: 0 0 0;
+  --c-muted: 78 78 78; /* #4E4E4E */
+  --c-line: 204 206 209; /* #CCCED1 เส้นขอบ/Divider */
+}
+
+.dark {
+  color-scheme: dark;
+
+  --c-primary: 143 143 255; /* #8F8FFF */
+  --c-primary-hover: 170 170 255; /* #AAAAFF */
+  --c-on-primary: 23 20 15; /* ข้อความเข้มบนพื้น primary สว่าง */
+  --c-accent: 210 179 106; /* #D2B36A */
+
+  --c-success: 148 205 128;
+  --c-success-strong: 154 214 134;
+  --c-error: 255 128 96;
+  --c-error-strong: 255 157 126;
+  --c-focus: 108 181 249; /* #6CB5F9 — ring บนพื้นมืด */
+
+  --c-surface: 23 20 15; /* #17140F */
+  --c-elevated: 36 31 22; /* #241F16 */
+  --c-surface-muted: 44 38 27; /* #2C261B */
+
+  --c-ink: 247 243 233; /* #F7F3E9 */
+  --c-muted: 174 166 148; /* #AEA694 */
+  --c-line: 62 56 43; /* #3E382B */
+}
+
+@layer base {
+  html {
+    @apply font-sans antialiased;
+  }
+  body {
+    @apply bg-surface text-ink;
+  }
+}
+
+/* ── Component classes ─────────────────────────────────────────────────
+   กติกา: variant compose ใน markup (class="btn btn-primary") — Tailwind v3
+   ห้าม @apply custom class ซ้อนในอีก custom class
+   .btn-xs ต้องอยู่หลัง .btn ในไฟล์เดียวกัน (source order ชนะ padding) */
+@layer components {
+  /* buttons */
+  .btn {
+    @apply inline-flex items-center justify-center gap-2 rounded-pill px-4 py-2 text-sm font-medium
+      transition-colors focus-visible:ring-2 focus-visible:ring-focus focus-visible:ring-offset-2
+      focus-visible:ring-offset-surface disabled:cursor-not-allowed disabled:opacity-50;
+  }
+  .btn-primary {
+    @apply bg-primary text-on-primary hover:bg-primary-hover;
+  }
+  .btn-secondary {
+    @apply border border-line bg-transparent text-ink hover:bg-surface-muted;
+  }
+  .btn-outline-danger {
+    @apply border border-error/50 text-error-strong hover:bg-error/10;
+  }
+  .btn-outline-success {
+    @apply border border-success/50 text-success-strong hover:bg-success/10;
+  }
+  .btn-sm {
+    @apply px-3 py-1.5;
+  }
+  .btn-xs {
+    @apply px-2.5 py-1 text-xs;
+  }
+
+  /* forms */
+  .input {
+    @apply w-full rounded-card border border-line bg-surface px-3 py-2 text-sm text-ink
+      placeholder:text-muted focus:border-focus focus:ring-1 focus:ring-focus;
+  }
+  .label {
+    @apply mb-1 block text-sm font-medium text-ink;
+  }
+
+  /* surfaces */
+  .card {
+    @apply rounded-card border border-line bg-elevated shadow-soft;
+  }
+  .table-card {
+    @apply overflow-x-auto rounded-card border border-line bg-elevated shadow-soft;
+  }
+  .table-head {
+    @apply border-b border-line text-left text-xs uppercase tracking-wide text-muted;
+  }
+  .empty-state {
+    @apply rounded-card border border-dashed border-line p-8 text-center text-sm text-muted;
+  }
+
+  /* badges / spinner / links */
+  .badge {
+    @apply inline-block rounded-pill px-2.5 py-0.5 text-xs font-medium;
+  }
+  .badge-success {
+    @apply bg-success/15 text-success-strong;
+  }
+  .badge-neutral {
+    @apply bg-surface-muted text-muted;
+  }
+  .badge-accent {
+    @apply bg-accent/15 text-accent;
+  }
+  .spinner {
+    @apply h-4 w-4 animate-spin rounded-full border-2 border-line border-t-primary;
+  }
+  .link {
+    @apply font-medium text-primary hover:underline;
+  }
+  .nav-link {
+    @apply rounded-pill px-3 py-1.5 text-muted transition-colors hover:bg-surface-muted hover:text-ink;
+  }
+
+  /* alerts + info panel */
+  .alert {
+    @apply rounded-card border px-4 py-3 text-sm;
+  }
+  .alert-error {
+    @apply border-error/40 bg-error/10 text-error-strong;
+  }
+  .alert-success {
+    @apply border-success/40 bg-success/10 text-success-strong;
+  }
+  .alert-info {
+    @apply border-primary/30 bg-primary/5 text-ink;
+  }
+  .panel-info {
+    @apply rounded-card border border-primary/30 bg-primary/5 p-4 text-sm text-ink;
+  }
+}