feat: Integrate Mantine UI library, establish a theme provider, and refactor core UI components.

2026-02-27 15:00:17 +07:00
parent 8181bd61ec
commit 1d38a188b7
23 changed files with 646 additions and 344 deletions
@@ -0,0 +1,50 @@
+import { MantineColorsTuple } from '@mantine/core';
+
+export const brandColors: MantineColorsTuple = [
+  '#f5f3fd', // 50
+  '#e6dbfb', // 100
+  '#d0b6f8', // 200
+  '#b78ff5', // 300
+  '#9f64f1', // 400
+  '#7d39ed', // 500 (Primary)
+  '#652ed9', // 600
+  '#4a23a5', // 700
+  '#321a7a', // 800
+  '#1b0f4a', // 900
+];
+
+export const errorColors: MantineColorsTuple = [
+  '#fef2f2', '#fee2e2', '#fecaca', '#fca5a5', '#f87171',
+  '#ef4444', '#dc2626', '#b91c1c', '#991b1b', '#7f1d1d',
+];
+
+export const warningColors: MantineColorsTuple = [
+  '#fffbeb', '#fef3c7', '#fde68a', '#fcd34d', '#fbbf24',
+  '#f59e0b', '#d97706', '#b45309', '#92400e', '#78350f',
+];
+
+export const successColors: MantineColorsTuple = [
+  '#f0fdf4', '#dcfce7', '#bbf7d0', '#86efac', '#4ade80',
+  '#22c55e', '#16a34a', '#15803d', '#166534', '#14532d',
+];
+
+export const infoColors: MantineColorsTuple = [
+  '#f0f9ff', '#e0f2fe', '#bae6fd', '#7dd3fc', '#38bdf8',
+  '#0ea5e9', '#0284c7', '#0369a1', '#075985', '#0c4a6e',
+];
+
+export const draculaColors: MantineColorsTuple = [
+  '#f8f8f2', '#f1fa8c', '#8be9fd', '#50fa7b', '#ffb86c',
+  '#ff79c6', '#bd93f9', '#6272a4', '#44475a', '#282a36',
+]; // Reusing standard dracula palette as a tuple for simplicity, 
+   // usually this would be mapped to specific grays/primary.
+
+export const blueColors: MantineColorsTuple = [
+  '#e3f2fd', '#bbdefb', '#90caf9', '#64b5f6', '#42a5f5',
+  '#2196f3', '#1e88e5', '#1976d2', '#1565c0', '#0d47a1',
+];
+
+export const grayColors: MantineColorsTuple = [
+  '#f5f6f7', '#eceff1', '#e0e3e7', '#d1d5db', '#9ca3af',
+  '#6b7280', '#4b5563', '#374151', '#1f2937', '#111827',
+];
@@ -0,0 +1,3 @@
+export * from './colors';
+export * from './typography';
+export * from './radius';
@@ -0,0 +1,7 @@
+export const radius = {
+  xs: '0.125rem', // 2px
+  sm: '0.25rem',  // 4px
+  md: '0.375rem', // 6px (Input radius)
+  lg: '0.5rem',   // 8px
+  xl: '0.75rem',  // 12px
+};
@@ -0,0 +1,28 @@
+export const typography = {
+  fontFamily: "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif",
+  fontSizes: {
+    xs: 'calc(13px * 0.846)',
+    sm: 'calc(13px * 0.923)',
+    md: '13px',
+    lg: 'calc(13px * 1.154)',
+    xl: 'calc(13px * 1.385)',
+  },
+  lineHeights: {
+    xs: '1.4',
+    sm: '1.45',
+    md: '1.5',
+    lg: '1.55',
+    xl: '1.6',
+  },
+  headings: {
+    fontFamily: "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif",
+    sizes: {
+      h1: { fontSize: 'calc(13px * 2.5)' },
+      h2: { fontSize: 'calc(13px * 2)' },
+      h3: { fontSize: 'calc(13px * 1.75)' },
+      h4: { fontSize: 'calc(13px * 1.5)' },
+      h5: { fontSize: 'calc(13px * 1.25)' },
+      h6: { fontSize: '13px' },
+    },
+  },
+};