From 7cf9f8fab5da30bb40effa43a394ec37d6fac317 Mon Sep 17 00:00:00 2001
From: Firman Ramdhani <33869609+firmanramdhani@users.noreply.github.com>
Date: Fri, 27 Feb 2026 15:54:20 +0700
Subject: [PATCH] feat: simplify color scheme options, enhance theme provider,
 and add density styles

---
 apps/web/src/apps/showcase/showcase-view.tsx |  4 +-
 packages/ui/src/provider/theme-provider.tsx  | 45 +++--------
 packages/ui/src/theme.css                    | 81 ++++++++++++++++++++
 packages/ui/src/theme/tokens/colors.ts       | 71 ++++++++++++-----
 packages/ui/src/theme/tokens/density.ts      | 11 +++
 5 files changed, 153 insertions(+), 59 deletions(-)
 create mode 100644 packages/ui/src/theme/tokens/density.ts

diff --git a/apps/web/src/apps/showcase/showcase-view.tsx b/apps/web/src/apps/showcase/showcase-view.tsx
index 33bcbfa..db003f2 100644
--- a/apps/web/src/apps/showcase/showcase-view.tsx
+++ b/apps/web/src/apps/showcase/showcase-view.tsx
@@ -27,8 +27,6 @@ export default function ShowcaseView({ colorScheme, setColorScheme, density, set
               data={[
                 { value: 'light', label: 'Light' },
                 { value: 'dark', label: 'Dark' },
-                { value: 'dracula', label: 'Dracula' },
-                { value: 'blue', label: 'Blue' },
               ]}
             />
             <Select
@@ -47,7 +45,7 @@ export default function ShowcaseView({ colorScheme, setColorScheme, density, set
         {/* Showcase Area */}
         <Card withBorder shadow="sm" radius="md" p="md">
           <Stack gap="lg">
-            <div>
+            <div className="bg-brand-100">
               <Title order={3} mb="sm">
                 Typography
               </Title>
diff --git a/packages/ui/src/provider/theme-provider.tsx b/packages/ui/src/provider/theme-provider.tsx
index 84a226d..eabd25f 100644
--- a/packages/ui/src/provider/theme-provider.tsx
+++ b/packages/ui/src/provider/theme-provider.tsx
@@ -1,10 +1,11 @@
 import { MantineProvider, createTheme, MantineThemeOverride } from '@mantine/core';
 import React from 'react';
-import { brandColors, errorColors, warningColors, successColors, infoColors, draculaColors, blueColors } from '../theme/tokens/colors';
+import { brandColors, errorColors, warningColors, successColors, infoColors } from '../theme/tokens/colors';
 import { typography } from '../theme/tokens/typography';
 import { radius } from '../theme/tokens/radius';
+import { densityStyles } from '../theme/tokens/density';
 
-export type ColorSchemeType = 'light' | 'dark' | 'dracula' | 'blue';
+export type ColorSchemeType = 'light' | 'dark';
 export type DensityType = 'compact' | 'standard' | 'spacious';
 
 interface ThemeProviderProps {
@@ -14,18 +15,6 @@ interface ThemeProviderProps {
 }
 
 export function ThemeProvider({ children, colorScheme = 'light', density = 'standard' }: ThemeProviderProps) {
-  const densityStyles = {
-    compact: {
-      spacing: { xs: '0.25rem', sm: '0.5rem', md: '0.75rem', lg: '1rem', xl: '1.25rem' },
-    },
-    standard: {
-      spacing: { xs: '0.5rem', sm: '0.75rem', md: '1rem', lg: '1.5rem', xl: '2rem' },
-    },
-    spacious: {
-      spacing: { xs: '0.75rem', sm: '1rem', md: '1.5rem', lg: '2rem', xl: '3rem' },
-    }
-  };
-
   const baseTheme = createTheme({
     colors: {
       brand: brandColors,
@@ -33,8 +22,6 @@ export function ThemeProvider({ children, colorScheme = 'light', density = 'stan
       warning: warningColors,
       success: successColors,
       info: infoColors,
-      dracula: draculaColors,
-      bluetheme: blueColors,
     },
     primaryColor: 'brand',
     fontFamily: typography.fontFamily,
@@ -43,27 +30,15 @@ export function ThemeProvider({ children, colorScheme = 'light', density = 'stan
     radius: radius,
   });
 
-  let mantineColorScheme: 'light' | 'dark' = 'light';
-  let themeOverride: MantineThemeOverride = baseTheme;
-
-  if (colorScheme === 'dark') {
-    mantineColorScheme = 'dark';
-  } else if (colorScheme === 'dracula') {
-    mantineColorScheme = 'dark';
-    themeOverride = createTheme({
-      ...baseTheme,
-      primaryColor: 'dracula',
-    });
-  } else if (colorScheme === 'blue') {
-    mantineColorScheme = 'light';
-    themeOverride = createTheme({
-      ...baseTheme,
-      primaryColor: 'bluetheme',
-    });
-  }
+  const mantineColorScheme: 'light' | 'dark' = colorScheme;
+  const themeOverride: MantineThemeOverride = baseTheme;
 
   return (
-    <MantineProvider theme={themeOverride} forceColorScheme={mantineColorScheme} defaultColorScheme={mantineColorScheme}>
+    <MantineProvider
+      theme={themeOverride}
+      forceColorScheme={mantineColorScheme}
+      defaultColorScheme={mantineColorScheme}
+    >
       {children}
     </MantineProvider>
   );
diff --git a/packages/ui/src/theme.css b/packages/ui/src/theme.css
index 927fed0..aa14709 100644
--- a/packages/ui/src/theme.css
+++ b/packages/ui/src/theme.css
@@ -15,3 +15,84 @@
     -moz-osx-font-smoothing: grayscale;
   }
 }
+
+@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;
+
+  /* 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;
+
+  /* -------------------------------
+     COLORS: SEMANTICS (COMPLETED)
+     ------------------------------- */
+
+  /* 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;
+
+  /* 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;
+
+  /* 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;
+
+  /* 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;
+}
diff --git a/packages/ui/src/theme/tokens/colors.ts b/packages/ui/src/theme/tokens/colors.ts
index 30424a6..4f99530 100644
--- a/packages/ui/src/theme/tokens/colors.ts
+++ b/packages/ui/src/theme/tokens/colors.ts
@@ -14,37 +14,66 @@ export const brandColors: MantineColorsTuple = [
 ];
 
 export const errorColors: MantineColorsTuple = [
-  '#fef2f2', '#fee2e2', '#fecaca', '#fca5a5', '#f87171',
-  '#ef4444', '#dc2626', '#b91c1c', '#991b1b', '#7f1d1d',
+  '#fef2f2',
+  '#fee2e2',
+  '#fecaca',
+  '#fca5a5',
+  '#f87171',
+  '#ef4444',
+  '#dc2626',
+  '#b91c1c',
+  '#991b1b',
+  '#7f1d1d',
 ];
 
 export const warningColors: MantineColorsTuple = [
-  '#fffbeb', '#fef3c7', '#fde68a', '#fcd34d', '#fbbf24',
-  '#f59e0b', '#d97706', '#b45309', '#92400e', '#78350f',
+  '#fffbeb',
+  '#fef3c7',
+  '#fde68a',
+  '#fcd34d',
+  '#fbbf24',
+  '#f59e0b',
+  '#d97706',
+  '#b45309',
+  '#92400e',
+  '#78350f',
 ];
 
 export const successColors: MantineColorsTuple = [
-  '#f0fdf4', '#dcfce7', '#bbf7d0', '#86efac', '#4ade80',
-  '#22c55e', '#16a34a', '#15803d', '#166534', '#14532d',
+  '#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',
+  '#f0f9ff',
+  '#e0f2fe',
+  '#bae6fd',
+  '#7dd3fc',
+  '#38bdf8',
+  '#0ea5e9',
+  '#0284c7',
+  '#0369a1',
+  '#075985',
+  '#0c4a6e',
 ];
 
 export const grayColors: MantineColorsTuple = [
-  '#f5f6f7', '#eceff1', '#e0e3e7', '#d1d5db', '#9ca3af',
-  '#6b7280', '#4b5563', '#374151', '#1f2937', '#111827',
+  '#f5f6f7',
+  '#eceff1',
+  '#e0e3e7',
+  '#d1d5db',
+  '#9ca3af',
+  '#6b7280',
+  '#4b5563',
+  '#374151',
+  '#1f2937',
+  '#111827',
 ];
diff --git a/packages/ui/src/theme/tokens/density.ts b/packages/ui/src/theme/tokens/density.ts
new file mode 100644
index 0000000..04238bd
--- /dev/null
+++ b/packages/ui/src/theme/tokens/density.ts
@@ -0,0 +1,11 @@
+export const densityStyles = {
+  compact: {
+    spacing: { xs: '0.25rem', sm: '0.5rem', md: '0.75rem', lg: '1rem', xl: '1.25rem' },
+  },
+  standard: {
+    spacing: { xs: '0.5rem', sm: '0.75rem', md: '1rem', lg: '1.5rem', xl: '2rem' },
+  },
+  spacious: {
+    spacing: { xs: '0.75rem', sm: '1rem', md: '1.5rem', lg: '2rem', xl: '3rem' },
+  },
+};