feat: Refactor TextArea component and styles for improved usability and consistency
- Updated textarea styles to utilize CSS variables for dimensions and padding. - Enhanced placeholder styling and added disabled state styles. - Refactored TextArea component to use forwardRef and updated status handling. - Changed input statuses from 'normal' to 'default' for better clarity. - Introduced global decimal separator management in CurrencyService. - Updated tests to cover new decimal separator functionality. - Cleaned up global CSS for better organization and readability. - Removed deprecated rc-component dependencies in favor of @rc-component packages.
This commit is contained in:
Firman Ramdhani
+117
-134
@@ -1,25 +1,136 @@
|
||||
@import 'tailwindcss';
|
||||
@source "../src";
|
||||
|
||||
/* Vendor overrides */
|
||||
/* Import Component Styles */
|
||||
@import './components/forms/styles/form.style.css';
|
||||
|
||||
/* =========================================
|
||||
BASE STYLES & RESETS
|
||||
Ensures consistent typography and form styling
|
||||
THEME VARIABLES (CENTRALIZED)
|
||||
========================================= */
|
||||
@theme {
|
||||
/* -------------------------------
|
||||
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 DIMENSIONS (INPUT / TEXTAREA)
|
||||
------------------------------- */
|
||||
--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 (Agak diperlebar dikit agar clickable) */
|
||||
|
||||
/* Textarea Specific */
|
||||
--textarea-min-height: 6.15rem; /* 80px */
|
||||
--textarea-padding-x: 0.92rem; /* 12px */
|
||||
--textarea-padding-y: 0.62rem; /* 8px */
|
||||
|
||||
/* -------------------------------
|
||||
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;
|
||||
|
||||
/* Semantics */
|
||||
--color-error-50: #fef2f2;
|
||||
--color-error-100: #fee2e2;
|
||||
--color-error-500: #ef4444;
|
||||
--color-error-600: #dc2626;
|
||||
|
||||
--color-warning-50: #fffbeb;
|
||||
--color-warning-100: #fef3c7;
|
||||
--color-warning-500: #f59e0b;
|
||||
--color-warning-600: #d97706;
|
||||
|
||||
--color-success-50: #f0fdf4;
|
||||
--color-success-100: #dcfce7;
|
||||
--color-success-500: #22c55e;
|
||||
--color-success-600: #16a34a;
|
||||
|
||||
--color-info-50: #f0f9ff;
|
||||
--color-info-100: #e0f2fe;
|
||||
--color-info-500: #0ea5e9;
|
||||
--color-info-600: #0284c7;
|
||||
|
||||
/* -------------------------------
|
||||
COLORS: COMPONENT MAPPING
|
||||
------------------------------- */
|
||||
--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;
|
||||
}
|
||||
|
||||
/* =========================================
|
||||
BASE RESETS
|
||||
========================================= */
|
||||
@layer base {
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
|
||||
/* background-color: var(--color-gray-50); */
|
||||
background-color: #ffffff;
|
||||
color: var(--color-gray-800);
|
||||
@apply text-base; /* Set global base font to 13px */
|
||||
font-size: var(--base-font-size);
|
||||
line-height: var(--text-base--line-height);
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
/* Form elements inherit base font styles */
|
||||
input,
|
||||
textarea,
|
||||
select,
|
||||
@@ -28,132 +139,4 @@
|
||||
font-size: inherit;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
/* Table headers: consistent style with enterprise Fiori design */
|
||||
th {
|
||||
@apply text-gray-500 font-medium text-left border-b border-gray-200 py-2 px-3;
|
||||
}
|
||||
}
|
||||
|
||||
@theme {
|
||||
/* =========================================
|
||||
1. BRAND COLORS (Company Identity)
|
||||
========================================= */
|
||||
--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 for main ERP actions */
|
||||
--color-brand-600: #652ed9;
|
||||
--color-brand-700: #4a23a5;
|
||||
--color-brand-800: #321a7a;
|
||||
--color-brand-900: #1b0f4a;
|
||||
--color-brand-950: #0d0726;
|
||||
|
||||
/* =========================================
|
||||
2. ENTERPRISE NEUTRALS (SAP Fiori Inspired)
|
||||
Override default Tailwind gray palette to match enterprise style
|
||||
========================================= */
|
||||
--color-gray-50: #f5f6f7; /* Canvas or background of pages */
|
||||
--color-gray-100: #eceff1; /* Shell/Header background */
|
||||
--color-gray-200: #e0e3e7; /* Subtle borders for tables/separators */
|
||||
--color-gray-300: #d1d5db; /* Strong borders, e.g., input fields */
|
||||
--color-gray-400: #9ca3af; /* Disabled elements */
|
||||
--color-gray-500: #6b7280; /* Metadata, labels */
|
||||
--color-gray-600: #4b5563; /* Secondary body text */
|
||||
--color-gray-700: #374151; /* Primary body text */
|
||||
--color-gray-800: #1f2937; /* Section headers */
|
||||
--color-gray-900: #111827; /* Page titles */
|
||||
|
||||
/* =========================================
|
||||
3. SEMANTIC COLORS (Status Indicators)
|
||||
Professional colors for business contexts (errors, success, warnings)
|
||||
========================================= */
|
||||
/* Error - Rose/Ruby Soft Palette */
|
||||
--color-error-50: #fef2f2;
|
||||
--color-error-100: #fee2e2;
|
||||
--color-error-500: #ef4444; /* Standard Modern Red */
|
||||
--color-error-600: #dc2626;
|
||||
|
||||
/* Success - Emerald/Mint Soft Palette */
|
||||
--color-success-50: #f0fdf4;
|
||||
--color-success-100: #dcfce7;
|
||||
--color-success-500: #22c55e; /* Modern Green, more vibrant but clean */
|
||||
--color-success-600: #16a34a;
|
||||
|
||||
/* Warning - Amber/Honey Soft Palette */
|
||||
--color-warning-50: #fffbeb;
|
||||
--color-warning-100: #fef3c7;
|
||||
--color-warning-500: #f59e0b; /* Warm Amber, less "harsh" than pure orange */
|
||||
--color-warning-600: #d97706;
|
||||
|
||||
/* Info - Sky/Azure Soft Palette (Optional for ERP) */
|
||||
--color-info-50: #f0f9ff;
|
||||
--color-info-100: #e0f2fe;
|
||||
--color-info-500: #0ea5e9;
|
||||
--color-info-600: #0284c7;
|
||||
|
||||
/* =========================================
|
||||
4. TYPOGRAPHY (Base font size: 13px)
|
||||
Override Tailwind default text sizes for consistent UI
|
||||
========================================= */
|
||||
--text-xs: 0.6875rem; /* 11px - Captions or minor labels */
|
||||
--text-xs--line-height: 1rem;
|
||||
|
||||
--text-sm: 0.75rem; /* 12px - Secondary text */
|
||||
--text-sm--line-height: 1.125rem;
|
||||
|
||||
--text-base: 0.8125rem; /* 13px - Default body text */
|
||||
--text-base--line-height: 1.25rem; /* Comfortable reading spacing */
|
||||
|
||||
--text-lg: 0.9375rem; /* 15px - Section headers */
|
||||
--text-lg--line-height: 1.5rem;
|
||||
|
||||
--text-xl: 1.125rem; /* 18px - Card or page titles */
|
||||
--text-xl--line-height: 1.75rem;
|
||||
|
||||
--text-2xl: 1.375rem; /* 22px - Dashboard headers */
|
||||
--text-2xl--line-height: 2rem;
|
||||
|
||||
/* Font weights */
|
||||
--font-weight-normal: 400;
|
||||
--font-weight-medium: 500; /* Recommended for table headers */
|
||||
--font-weight-semibold: 600; /* Highlight important data points */
|
||||
--font-weight-bold: 700;
|
||||
|
||||
/* =========================================
|
||||
5. SHAPE & DEPTH (UI Consistency)
|
||||
Border radius and shadow presets for consistent UI
|
||||
========================================= */
|
||||
--radius-sm: 0.125rem; /* 2px - small elements like badges/checkboxes */
|
||||
--radius-md: 0.25rem; /* 4px - default buttons/inputs */
|
||||
--radius-lg: 0.5rem; /* 8px - card containers */
|
||||
--radius-xl: 0.75rem; /* 12px - modal dialogs */
|
||||
|
||||
/* Shadow presets for depth */
|
||||
--shadow-xs: 0 1px 1px rgba(0, 0, 0, 0.05);
|
||||
--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
|
||||
--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
|
||||
|
||||
/* =========================================
|
||||
FORM VARIABLES (Compact ERP Settings)
|
||||
========================================= */
|
||||
--input-height: 34px; /* Compact height for ERP */
|
||||
--input-radius: 6px; /* Modern slightly rounded */
|
||||
--input-font-size: 14px;
|
||||
--input-padding-x: 11px;
|
||||
--input-handler-width: 22px;
|
||||
--input-bg: #ffffff;
|
||||
--input-border: #d1d5db; /* Slate-300 equivalent */
|
||||
--input-border-hover: var(--color-brand-400);
|
||||
--input-placeholder: #9ca3af; /* Slate-400 equivalent */
|
||||
--input-text: #1f2937; /* Slate-800 equivalent */
|
||||
|
||||
--focus-ring-color: var(--color-brand-100);
|
||||
--focus-border-color: var(--color-brand-500);
|
||||
|
||||
--disabled-bg: #f3f4f6;
|
||||
--disabled-text: #9ca3af;
|
||||
--disabled-border: #e5e7eb;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user