Firman Ramdhani
b52e458a9d
- Updated ExamplePage to use a single Showcase component instead of separate InputShowCase and FormShowcase components. - Added CheckboxShowcase, FormShowcase, and InputShowCase components to the showcase directory. - Implemented Checkbox component with various states and styles. - Enhanced InputShowCase to demonstrate different input types and states. - Integrated new styles for checkbox variants and states. - Updated package dependencies to include @rc-component/checkbox.
184 lines
5.3 KiB
CSS
184 lines
5.3 KiB
CSS
@import 'tailwindcss';
|
|
@source "../src";
|
|
|
|
/* Import Component Styles */
|
|
@import './components/forms/styles/form.style.css';
|
|
|
|
/* =========================================
|
|
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 */
|
|
|
|
/* -------------------------------
|
|
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;
|
|
|
|
/* -------------------------------
|
|
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;
|
|
}
|
|
|
|
/* =========================================
|
|
BASE RESETS
|
|
========================================= */
|
|
@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;
|
|
}
|
|
}
|