feat: Integrate Mantine UI library, establish a theme provider, and refactor core UI components.
This commit is contained in:
Firman Ramdhani
+6
-208
@@ -1,219 +1,17 @@
|
||||
@import 'tailwindcss';
|
||||
@source "../src";
|
||||
|
||||
/* =========================================
|
||||
THEME VARIABLES (CENTRALIZED)
|
||||
MANTINE BASE STYLES
|
||||
========================================= */
|
||||
@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;
|
||||
|
||||
/* -------------------------------
|
||||
BASE FONT & TYPOGRAPHY
|
||||
------------------------------- */
|
||||
--base-font-size: 13px;
|
||||
|
||||
/* Scale */
|
||||
--text-xs: calc(var(--base-font-size) * 0.846); /* ~11px */
|
||||
--text-sm: calc(var(--base-font-size) * 0.923); /* ~12px */
|
||||
--text-base: var(--base-font-size); /* 13px */
|
||||
--text-lg: calc(var(--base-font-size) * 1.154); /* ~15px */
|
||||
--text-xl: calc(var(--base-font-size) * 1.385); /* ~18px */
|
||||
--text-2xl: calc(var(--base-font-size) * 1.692); /* ~22px */
|
||||
|
||||
/* Weights */
|
||||
--font-weight-normal: 400;
|
||||
--font-weight-medium: 500;
|
||||
--font-weight-semibold: 600;
|
||||
--font-weight-bold: 700;
|
||||
|
||||
/* -------------------------------
|
||||
SHAPE & DEPTH
|
||||
------------------------------- */
|
||||
--radius-sm: 0.125rem; /* 2px */
|
||||
--radius-md: 0.25rem; /* 4px */
|
||||
--radius-lg: 0.5rem; /* 8px */
|
||||
--radius-xl: 0.75rem; /* 12px */
|
||||
|
||||
/* -------------------------------
|
||||
FORM ITEM SPECIFICS
|
||||
------------------------------- */
|
||||
/* Form Item Spacing */
|
||||
--form-item-margin-bottom: 1.25rem; /* 20px */
|
||||
|
||||
/* Label Configuration */
|
||||
--form-label-font-size: var(--text-sm); /* Uses scale text-sm (~12px) */
|
||||
--form-label-color: var(--color-gray-700);
|
||||
--form-label-font-weight: var(--font-weight-medium);
|
||||
--form-label-margin-bottom: 0.375rem; /* ~6px */
|
||||
|
||||
/* Error/Warning Message Configuration */
|
||||
--form-msg-font-size: var(--text-xs); /* Uses scale text-xs (~11px) */
|
||||
--form-msg-margin-top: 0.375rem; /* ~6px */
|
||||
|
||||
--input-height: 2.6rem; /* ~34px */
|
||||
--input-font-size: var(--text-base);
|
||||
--input-padding-x: 0.92rem; /* ~12px */
|
||||
--input-padding-y: 0.62rem; /* ~8px */
|
||||
--input-radius: 0.375rem; /* 6px */
|
||||
|
||||
/* Input Number Specific */
|
||||
--input-handler-width: 1.5rem; /* 24px (Slightly wider for better clickable) */
|
||||
/* Textarea Specific */
|
||||
--textarea-min-height: 6.15rem; /* 80px */
|
||||
--textarea-padding-x: 0.92rem; /* 12px */
|
||||
--textarea-padding-y: 0.62rem; /* 8px */
|
||||
|
||||
/* Input Colors */
|
||||
--input-bg: #ffffff;
|
||||
--input-border: var(--color-gray-300);
|
||||
--input-border-hover: var(--color-brand-400);
|
||||
--input-text: var(--color-gray-800);
|
||||
--input-placeholder: var(--color-gray-400);
|
||||
|
||||
--focus-ring-color: var(--color-brand-100);
|
||||
--focus-border-color: var(--color-brand-500);
|
||||
|
||||
--disabled-bg: #f3f4f6;
|
||||
--disabled-text: var(--color-gray-400);
|
||||
--disabled-border: #e5e7eb;
|
||||
|
||||
/* CHECKBOX & RADIO COMPONENT VARIABLES*/
|
||||
|
||||
/* 16px is a perfect fit for a 13px font size.
|
||||
It's easier to read than 14px, but not overpowering. */
|
||||
--checkbox-size: 16px; /* ~16px (relative to 13px base) */
|
||||
--checkbox-radius: var(--radius-md);
|
||||
|
||||
/* * Position the check mark icon precisely in the center of the 16px box */
|
||||
--checkbox-check-width: 5px;
|
||||
--checkbox-check-height: 9px;
|
||||
--checkbox-check-top: 1.5px; /* Fine-tuning vertical position */
|
||||
--checkbox-check-left: 4.5px; /* Fine-tuning horizontal position */
|
||||
|
||||
/* SWITCH COMPONENT VARIABLES */
|
||||
|
||||
/* Using pixels (px) for Switch is often safer
|
||||
to avoid sub-pixel rendering artifacts (circles becoming oval)
|
||||
on low screen resolutions, while still maintaining proportion to the rest scale. */
|
||||
|
||||
/* A height of 20px fits with a line-height of 13px text,
|
||||
A width of 36px provides a compact and modern ratio. */
|
||||
--switch-width: 36px;
|
||||
--switch-height: 20px;
|
||||
|
||||
/* Handle (lingkaran) = Height - (Padding * 2) */
|
||||
/* 20px - (2px * 2) = 16px */
|
||||
--switch-handle-size: 16px;
|
||||
--switch-padding: 2px; /* Distance between handle and edge */
|
||||
|
||||
/* Calculate active position (Checked) */
|
||||
/* 36px - 16px - 2px = 18px */
|
||||
--switch-checked-pos: calc(var(--switch-width) - var(--switch-handle-size) - var(--switch-padding));
|
||||
|
||||
/* Additional variable for label inside switch (ON/OFF text) if any */
|
||||
--switch-inner-margin-left: 6px;
|
||||
--switch-inner-margin-right: 20px;
|
||||
/* Margin Calculation for Inner Text */
|
||||
/* Handle edge spacing: Handle size (16px) + Padding (2px) + Gap (4px) = 22px */
|
||||
--switch-inner-indent-handle: 22px;
|
||||
/* Empty edge spacing: Padding (2px) + Gap (4px) = 6px */
|
||||
--switch-inner-indent-edge: 6px;
|
||||
}
|
||||
@import '@mantine/core/styles.css';
|
||||
|
||||
/* =========================================
|
||||
BASE RESETS
|
||||
BASE RESETS (Minimal, let Mantine handle most)
|
||||
========================================= */
|
||||
@layer base {
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
|
||||
background-color: #ffffff;
|
||||
color: var(--color-gray-800);
|
||||
font-size: var(--base-font-size);
|
||||
line-height: var(--text-base--line-height);
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
input,
|
||||
textarea,
|
||||
select,
|
||||
button {
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user