@edmicro/olkit 1.1.2 → 1.1.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@edmicro/olkit",
-  "version": "1.1.2",
+  "version": "1.1.3",
   "description": "Ôn Luyện Design System UI Component Library for Angular",
   "author": "EDMICRO",
   "license": "MIT",

package/styles/isolation.css

@@ -266,3 +266,45 @@ ol-alert .rounded-md {
 *::-webkit-scrollbar-corner {
   background: transparent;
 }
+
+/* ---------------------------------------------------------------------------
+   ol-app-nav — MỤC ĐANG CHỌN
+
+   Figma `ol-app-sidebar-item` (#5301:338): Active = nền `bg-warning`, chữ đậm.
+
+   Vì sao không viết thẳng `bg-warning` vào class string của component:
+   `routerLinkActive` gắn class lúc chạy, nên trạng thái active có HAI đường —
+   qua router và qua input `activeId`. Một tên class cho cả hai đường thì luật
+   ở đây là chỗ duy nhất định nghĩa màu, không phải hai chỗ.
+
+   Chữ và icon chuyển sang xanh đậm: nền vàng `#ffc022` với chữ trắng cho
+   tương phản 1,9 — dưới chuẩn AA. Đo với `--text-brand-strong` (brand-900):
+   **9,4**.
+
+   `!important` ở đây là cần: luật `hover:bg-*` của chính component có cùng độ
+   đặc hiệu và đứng sau trong tệp Tailwind sinh ra, nên rê chuột vào mục đang
+   chọn sẽ thấy nó đổi sang màu hover — đúng lỗi đã gặp ở `ol-sidebar-item`.
+   --------------------------------------------------------------------------- */
+.ol-app-nav-item-active {
+  background-color: var(--bg-warning, #ffc022) !important;
+}
+
+/*
+   Chữ trên nền vàng dùng `--color-brand-900` — màu GỐC, không phải token ngữ
+   nghĩa.
+
+   `--text-brand-strong` lật theo chế độ: sáng là brand-900 `#152147`, tối là
+   brand-300 `#a3baff`. Lật vậy đúng cho chữ brand trên nền TRANG, nhưng nền
+   mục active luôn VÀNG ở cả hai chế độ — nó ghim `--bg-warning`, không lật.
+
+   Hậu quả đo được ở chế độ tối: chữ `rgb(163,186,255)` trên nền
+   `rgb(255,176,0)` cho tương phản **1,04** — gần như không đọc được.
+
+   Màu gốc không lật nên đúng ở cả hai chế độ: đo lại được 9,56 (sáng) và
+   8,73 (tối, nền vàng đậm hơn một bậc).
+*/
+.ol-app-nav-item-active,
+.ol-app-nav-item-active ol-icon,
+.ol-app-nav-item-active span {
+  color: var(--color-brand-900, #152147) !important;
+}

package/styles/primitives.css

@@ -14,6 +14,23 @@
   --color-brand-900: #152147;
   --color-brand-950: #0d142b;
 
+  /* --------------------------------------------------------------------------
+     NAVY GRADIENT — nền thanh điều hướng ứng dụng
+
+     Hai màu này KHÔNG nằm trên thang brand: đo khoảng cách RGB tới bậc gần
+     nhất đều là **26 đơn vị** (`#445a9a` ↔ brand-600, `#0f2977` ↔ brand-800),
+     tức khác nhìn thấy được chứ không phải ai đó gõ lệch một bậc.
+
+     Figma `ol-app-nav` (#5303:30109) chốt
+     `linear-gradient(164.52deg, #445A9A, #0F2977)`.
+
+     Khai ở đây thay vì ghim hex trong template vì đó là chỗ MỌI màu gốc nằm —
+     ghim trong template thì `check:tokens` không thấy (guard chỉ quét class
+     Tailwind bậc số, không quét `style=`), và đổi màu phải sửa từng nơi dùng.
+     -------------------------------------------------------------------------- */
+  --color-navy-from: #445a9a;
+  --color-navy-to: #0f2977;
+
   /* Slate */
   --color-slate-50: #f8fafc;
   --color-slate-100: #f1f5f9;

package/styles/tokens.css

@@ -116,6 +116,16 @@
   --bg-brand-medium: var(--color-brand-200);
   --bg-brand-strong: var(--color-brand-800);
 
+  /* --------------------------------------------------------------------------
+     Nền thanh điều hướng ứng dụng (`ol-app-nav`).
+
+     KHÔNG đổi ở chế độ tối: thanh này vốn đã tối, và Figma chốt một màu duy
+     nhất cho cả hai chế độ. Chữ trên đó luôn trắng.
+     -------------------------------------------------------------------------- */
+  --bg-app-nav-from: var(--color-navy-from);
+  --bg-app-nav-to: var(--color-navy-to);
+  --bg-app-nav-hover: var(--color-brand-600);
+
   /* Dark Background Tokens */
   --bg-dark: var(--color-gray-800);
   --bg-dark-strong: var(--color-gray-900);