feat: refactor setup tailwind and css

2026-02-27 13:34:59 +07:00
parent 8bfa66111a
commit 8181bd61ec
8 changed files with 28 additions and 59 deletions
@@ -0,0 +1,219 @@
+/* =========================================
+   THEME VARIABLES (CENTRALIZED)
+   ========================================= */
+@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;
+}
+
+/* =========================================
+   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;
+  }
+}