Update Account

2026-03-30 14:09:41 +07:00
parent e7e8f0b38a
commit e1b9d9c15d
11 changed files with 1029 additions and 280 deletions
--- a/assets/styles/_variables.scss
+++ b/assets/styles/_variables.scss
@@ -0,0 +1,73 @@
+:root {
+  /* ===== PRIMARY (GREEN) ===== */
+  --primary-50: #f0fdf4;
+  --primary-100: #dcfce7;
+  --primary-200: #bbf7d0;
+  --primary-300: #86efac;
+  --primary-400: #4ade80;
+  --primary-500: #22c55e;
+  --primary-600: #16a34a; /* MAIN */
+  --primary-700: #15803d;
+  --primary-800: #166534;
+  --primary-900: #14532d;
+
+  /* ===== SEMANTIC ===== */
+  --color-primary: var(--primary-600);
+  --color-primary-hover: var(--primary-700);
+  --color-primary-active: var(--primary-800);
+
+  /* ===== TEXT (NEUTRAL - QUAN TRỌNG) ===== */
+  --text-primary: #1f2937; /* gray-800 */
+  --text-secondary: #6b7280; /* gray-500 */
+  --text-light: #ffffff;
+
+  /* ===== BACKGROUND ===== */
+  --bg-primary: #ffffff;
+  --bg-secondary: #f9fafb; /* nhẹ hơn để không bị xanh quá */
+  --bg-accent: var(--primary-50);
+
+  /* ===== BORDER ===== */
+  --border-light: #e5e7eb;
+  --border-default: #d1d5db;
+
+  /* ===== STATE ===== */
+  --color-error: #ef4444;
+  --color-success: #22c55e;
+
+  /* ===== SHADOW ===== */
+  --shadow-card: 0 4px 20px rgba(0, 0, 0, 0.08);
+
+  /* ===== BUTTON ===== */
+  --btn-primary-bg: var(--primary-600);
+  --btn-primary-hover: var(--primary-700);
+  --btn-primary-active: var(--primary-800);
+  --btn-primary-text: #ffffff;
+
+  --btn-secondary-bg: var(--primary-100);
+  --btn-secondary-hover: var(--primary-200);
+  --btn-secondary-text: var(--primary-700);
+
+  --btn-disabled-bg: #e5e7eb;
+  --btn-disabled-text: #9ca3af;
+
+  /* ===== TEXT ===== */
+  --text-primary: #1f2937;
+  --text-secondary: #6b7280;
+  --text-muted: #9ca3af;
+
+  --text-on-primary: #ffffff; /* chữ trên nền xanh */
+  --text-link: var(--primary-600);
+  --text-link-hover: var(--primary-700);
+
+  /* ===== BORDER ===== */
+  --border-default: #d1d5db;
+  --border-focus: var(--primary-600);
+
+  /* ===== STATE ===== */
+  --state-success: var(--primary-500);
+  --state-error: #ef4444;
+  --state-warning: #f59e0b;
+
+  /* ===== LAYOUT ===== */
+  --layout-full-height: 100dvh;
+}