From ad3397ee3df07cdb28bae19ad7e8cd2d82eedc41 Mon Sep 17 00:00:00 2001
From: Firman Ramdhani <33869609+firmanramdhani@users.noreply.github.com>
Date: Fri, 27 Feb 2026 16:07:55 +0700
Subject: [PATCH] feat: enhance theme.css with Mantine color mapping, spacing,
 typography, and animation styles

---
 .vscode/settings.json     |   2 +-
 packages/ui/src/theme.css | 320 ++++++++++++++++++++++++++++----------
 2 files changed, 236 insertions(+), 86 deletions(-)

diff --git a/.vscode/settings.json b/.vscode/settings.json
index f692183..2970030 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -4,5 +4,5 @@
       "mode": "auto"
     }
   ],
-  "cSpell.words": ["Millis", "Pandang", "Ujung", "WITA"]
+  "cSpell.words": ["mantine", "Millis", "Pandang", "Ujung", "WITA"]
 }
diff --git a/packages/ui/src/theme.css b/packages/ui/src/theme.css
index aa14709..bd556d8 100644
--- a/packages/ui/src/theme.css
+++ b/packages/ui/src/theme.css
@@ -1,98 +1,248 @@
 @import 'tailwindcss';
 @source "../src";
 
-/* =========================================
-   MANTINE BASE STYLES
-   ========================================= */
 @import '@mantine/core/styles.css';
-
-/* =========================================
-   BASE RESETS (Minimal, let Mantine handle most)
-   ========================================= */
-@layer base {
-  body {
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-  }
-}
+@import 'tailwindcss';
 
 @theme {
-  /* -------------------------------
-     COLORS: PALETTE
-     ------------------------------- */
-  /* Brand (Purple based on your code) */
-  --color-brand-50: #f5f3fd;
-  --color-brand-100: #e6dbfb;
-  --color-brand-200: #d0b6f8;
-  --color-brand-300: #b78ff5;
-  --color-brand-400: #9f64f1;
-  --color-brand-500: #7d39ed; /* Primary */
-  --color-brand-600: #652ed9;
-  --color-brand-700: #4a23a5;
-  --color-brand-800: #321a7a;
-  --color-brand-900: #1b0f4a;
+  /* =========================================
+     1. COLORS (Strictly mapped to Mantine 0-9)
+     ========================================= */
+  --color-brand-50: var(--mantine-color-brand-0);
+  --color-brand-100: var(--mantine-color-brand-1);
+  --color-brand-200: var(--mantine-color-brand-2);
+  --color-brand-300: var(--mantine-color-brand-3);
+  --color-brand-400: var(--mantine-color-brand-4);
+  --color-brand-500: var(--mantine-color-brand-5);
+  --color-brand-600: var(--mantine-color-brand-6);
+  --color-brand-700: var(--mantine-color-brand-7);
+  --color-brand-800: var(--mantine-color-brand-8);
+  --color-brand-900: var(--mantine-color-brand-9);
 
-  /* Neutrals */
-  --color-gray-50: #f5f6f7;
-  --color-gray-100: #eceff1;
-  --color-gray-200: #e0e3e7;
-  --color-gray-300: #d1d5db;
-  --color-gray-400: #9ca3af;
-  --color-gray-500: #6b7280;
-  --color-gray-600: #4b5563;
-  --color-gray-700: #374151;
-  --color-gray-800: #1f2937;
-  --color-gray-900: #111827;
+  --color-error-50: var(--mantine-color-error-0);
+  --color-error-100: var(--mantine-color-error-1);
+  --color-error-200: var(--mantine-color-error-2);
+  --color-error-300: var(--mantine-color-error-3);
+  --color-error-400: var(--mantine-color-error-4);
+  --color-error-500: var(--mantine-color-error-5);
+  --color-error-600: var(--mantine-color-error-6);
+  --color-error-700: var(--mantine-color-error-7);
+  --color-error-800: var(--mantine-color-error-8);
+  --color-error-900: var(--mantine-color-error-9);
 
-  /* -------------------------------
-     COLORS: SEMANTICS (COMPLETED)
-     ------------------------------- */
+  --color-warning-50: var(--mantine-color-warning-0);
+  --color-warning-100: var(--mantine-color-warning-1);
+  --color-warning-200: var(--mantine-color-warning-2);
+  --color-warning-300: var(--mantine-color-warning-3);
+  --color-warning-400: var(--mantine-color-warning-4);
+  --color-warning-500: var(--mantine-color-warning-5);
+  --color-warning-600: var(--mantine-color-warning-6);
+  --color-warning-700: var(--mantine-color-warning-7);
+  --color-warning-800: var(--mantine-color-warning-8);
+  --color-warning-900: var(--mantine-color-warning-9);
 
-  /* Error (Red) */
-  --color-error-50: #fef2f2;
-  --color-error-100: #fee2e2;
-  --color-error-200: #fecaca;
-  --color-error-300: #fca5a5;
-  --color-error-400: #f87171;
-  --color-error-500: #ef4444;
-  --color-error-600: #dc2626;
-  --color-error-700: #b91c1c;
-  --color-error-800: #991b1b;
-  --color-error-900: #7f1d1d;
+  --color-success-50: var(--mantine-color-success-0);
+  --color-success-100: var(--mantine-color-success-1);
+  --color-success-200: var(--mantine-color-success-2);
+  --color-success-300: var(--mantine-color-success-3);
+  --color-success-400: var(--mantine-color-success-4);
+  --color-success-500: var(--mantine-color-success-5);
+  --color-success-600: var(--mantine-color-success-6);
+  --color-success-700: var(--mantine-color-success-7);
+  --color-success-800: var(--mantine-color-success-8);
+  --color-success-900: var(--mantine-color-success-9);
 
-  /* Warning (Amber/Orange) */
-  --color-warning-50: #fffbeb;
-  --color-warning-100: #fef3c7;
-  --color-warning-200: #fde68a;
-  --color-warning-300: #fcd34d;
-  --color-warning-400: #fbbf24;
-  --color-warning-500: #f59e0b;
-  --color-warning-600: #d97706;
-  --color-warning-700: #b45309;
-  --color-warning-800: #92400e;
-  --color-warning-900: #78350f;
+  --color-info-50: var(--mantine-color-info-0);
+  --color-info-100: var(--mantine-color-info-1);
+  --color-info-200: var(--mantine-color-info-2);
+  --color-info-300: var(--mantine-color-info-3);
+  --color-info-400: var(--mantine-color-info-4);
+  --color-info-500: var(--mantine-color-info-5);
+  --color-info-600: var(--mantine-color-info-6);
+  --color-info-700: var(--mantine-color-info-7);
+  --color-info-800: var(--mantine-color-info-8);
+  --color-info-900: var(--mantine-color-info-9);
 
-  /* Success (Green) */
-  --color-success-50: #f0fdf4;
-  --color-success-100: #dcfce7;
-  --color-success-200: #bbf7d0;
-  --color-success-300: #86efac;
-  --color-success-400: #4ade80;
-  --color-success-500: #22c55e;
-  --color-success-600: #16a34a;
-  --color-success-700: #15803d;
-  --color-success-800: #166534;
-  --color-success-900: #14532d;
+  /* =========================================
+     2. SPACING & CONTAINERS
+     ========================================= */
+  --spacing: 0.25rem;
 
-  /* Info (Blue/Sky) */
-  --color-info-50: #f0f9ff;
-  --color-info-100: #e0f2fe;
-  --color-info-200: #bae6fd;
-  --color-info-300: #7dd3fc;
-  --color-info-400: #38bdf8;
-  --color-info-500: #0ea5e9;
-  --color-info-600: #0284c7;
-  --color-info-700: #0369a1;
-  --color-info-800: #075985;
-  --color-info-900: #0c4a6e;
+  /* Core mapped to Mantine */
+  --spacing-xs: var(--mantine-spacing-xs);
+  --spacing-sm: var(--mantine-spacing-sm);
+  --spacing-md: var(--mantine-spacing-md);
+  --spacing-lg: var(--mantine-spacing-lg);
+  --spacing-xl: var(--mantine-spacing-xl);
+
+  --breakpoint-sm: 40rem;
+  --breakpoint-md: 48rem;
+  --breakpoint-lg: 64rem;
+  --breakpoint-xl: 80rem;
+  --breakpoint-2xl: 96rem;
+  --container-3xs: 16rem;
+  --container-2xs: 18rem;
+  --container-xs: 20rem;
+  --container-sm: 24rem;
+  --container-md: 28rem;
+  --container-lg: 32rem;
+  --container-xl: 36rem;
+  --container-2xl: 42rem;
+  --container-3xl: 48rem;
+  --container-4xl: 56rem;
+  --container-5xl: 64rem;
+  --container-6xl: 72rem;
+  --container-7xl: 80rem;
+
+  /* =========================================
+     3. TYPOGRAPHY
+     ========================================= */
+  /* Core text sizes mapped to Mantine, extended kept static */
+  --text-xs: var(--mantine-font-size-xs);
+  --text-xs--line-height: calc(1 / 0.75);
+  --text-sm: var(--mantine-font-size-sm);
+  --text-sm--line-height: calc(1.25 / 0.875);
+  --text-base: var(--mantine-font-size-md);
+  --text-base--line-height: calc(1.5 / 1);
+  --text-lg: var(--mantine-font-size-lg);
+  --text-lg--line-height: calc(1.75 / 1.125);
+  --text-xl: var(--mantine-font-size-xl);
+  --text-xl--line-height: calc(1.75 / 1.25);
+
+  --text-2xl: 1.5rem;
+  --text-2xl--line-height: calc(2 / 1.5);
+  --text-3xl: 1.875rem;
+  --text-3xl--line-height: calc(2.25 / 1.875);
+  --text-4xl: 2.25rem;
+  --text-4xl--line-height: calc(2.5 / 2.25);
+  --text-5xl: 3rem;
+  --text-5xl--line-height: 1;
+  --text-6xl: 3.75rem;
+  --text-6xl--line-height: 1;
+  --text-7xl: 4.5rem;
+  --text-7xl--line-height: 1;
+  --text-8xl: 6rem;
+  --text-8xl--line-height: 1;
+  --text-9xl: 8rem;
+  --text-9xl--line-height: 1;
+
+  --font-weight-thin: 100;
+  --font-weight-extralight: 200;
+  --font-weight-light: 300;
+  --font-weight-normal: 400;
+  --font-weight-medium: 500;
+  --font-weight-semibold: 600;
+  --font-weight-bold: 700;
+  --font-weight-extrabold: 800;
+  --font-weight-black: 900;
+
+  --tracking-tighter: -0.05em;
+  --tracking-tight: -0.025em;
+  --tracking-normal: 0em;
+  --tracking-wide: 0.025em;
+  --tracking-wider: 0.05em;
+  --tracking-widest: 0.1em;
+
+  --leading-tight: 1.25;
+  --leading-snug: 1.375;
+  --leading-normal: 1.5;
+  --leading-relaxed: 1.625;
+  --leading-loose: 2;
+
+  /* =========================================
+     4. RADIUS
+     ========================================= */
+  --radius-xs: var(--mantine-radius-xs);
+  --radius-sm: var(--mantine-radius-sm);
+  --radius-md: var(--mantine-radius-md);
+  --radius-lg: var(--mantine-radius-lg);
+  --radius-xl: var(--mantine-radius-xl);
+  --radius-2xl: 1rem;
+  --radius-3xl: 1.5rem;
+  --radius-4xl: 2rem;
+
+  /* =========================================
+     5. SHADOWS & BLURS
+     ========================================= */
+  --shadow-2xs: 0 1px rgb(0 0 0 / 0.05);
+  --shadow-xs: var(--mantine-shadow-xs);
+  --shadow-sm: var(--mantine-shadow-sm);
+  --shadow-md: var(--mantine-shadow-md);
+  --shadow-lg: var(--mantine-shadow-lg);
+  --shadow-xl: var(--mantine-shadow-xl);
+  --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
+
+  --inset-shadow-2xs: inset 0 1px rgb(0 0 0 / 0.05);
+  --inset-shadow-xs: inset 0 1px 1px rgb(0 0 0 / 0.05);
+  --inset-shadow-sm: inset 0 2px 4px rgb(0 0 0 / 0.05);
+
+  --drop-shadow-xs: 0 1px 1px rgb(0 0 0 / 0.05);
+  --drop-shadow-sm: 0 1px 2px rgb(0 0 0 / 0.15);
+  --drop-shadow-md: 0 3px 3px rgb(0 0 0 / 0.12);
+  --drop-shadow-lg: 0 4px 4px rgb(0 0 0 / 0.15);
+  --drop-shadow-xl: 0 9px 7px rgb(0 0 0 / 0.1);
+  --drop-shadow-2xl: 0 25px 25px rgb(0 0 0 / 0.15);
+
+  --text-shadow-2xs: 0px 1px 0px rgb(0 0 0 / 0.15);
+  --text-shadow-xs: 0px 1px 1px rgb(0 0 0 / 0.2);
+  --text-shadow-sm: 0px 1px 0px rgb(0 0 0 / 0.075), 0px 1px 1px rgb(0 0 0 / 0.075), 0px 2px 2px rgb(0 0 0 / 0.075);
+  --text-shadow-md: 0px 1px 1px rgb(0 0 0 / 0.1), 0px 1px 2px rgb(0 0 0 / 0.1), 0px 2px 4px rgb(0 0 0 / 0.1);
+  --text-shadow-lg: 0px 1px 2px rgb(0 0 0 / 0.1), 0px 3px 2px rgb(0 0 0 / 0.1), 0px 4px 8px rgb(0 0 0 / 0.1);
+
+  --blur-xs: 4px;
+  --blur-sm: 8px;
+  --blur-md: 12px;
+  --blur-lg: 16px;
+  --blur-xl: 24px;
+  --blur-2xl: 40px;
+  --blur-3xl: 64px;
+
+  /* =========================================
+     6. MISCELLANEOUS (Aspect, Anim, Perspective)
+     ========================================= */
+  --perspective-dramatic: 100px;
+  --perspective-near: 300px;
+  --perspective-normal: 500px;
+  --perspective-midrange: 800px;
+  --perspective-distant: 1200px;
+
+  --aspect-video: 16 / 9;
+
+  --ease-in: cubic-bezier(0.4, 0, 1, 1);
+  --ease-out: cubic-bezier(0, 0, 0.2, 1);
+  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
+
+  --animate-spin: spin 1s linear infinite;
+  --animate-ping: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
+  --animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+  --animate-bounce: bounce 1s infinite;
+
+  @keyframes spin {
+    to {
+      transform: rotate(360deg);
+    }
+  }
+  @keyframes ping {
+    75%,
+    100% {
+      transform: scale(2);
+      opacity: 0;
+    }
+  }
+  @keyframes pulse {
+    50% {
+      opacity: 0.5;
+    }
+  }
+  @keyframes bounce {
+    0%,
+    100% {
+      transform: translateY(-25%);
+      animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
+    }
+    50% {
+      transform: none;
+      animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
+    }
+  }
 }