@edmicro/olkit 1.1.1 → 1.1.3

package/package.json

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

package/styles/isolation.css

@@ -216,3 +216,95 @@ ol-icon-shape .rounded-md,
 ol-alert .rounded-md {
   border-radius: var(--radius-md, 12px) !important;
 }
+
+/* ---------------------------------------------------------------------------
+   THANH CUỘN — theo token, đổi cùng chế độ sáng/tối
+
+   `color-scheme` trong `tokens.css` đã làm thanh cuộn MẶC ĐỊNH của trình duyệt
+   chuyển màu đúng. Phần dưới đây đi thêm một bước: cho nó khớp thang màu của
+   design system thay vì màu hệ điều hành.
+
+   Dùng CẢ HAI cú pháp vì không trình duyệt nào hiểu đủ:
+     · `scrollbar-color` + `scrollbar-width` — chuẩn CSS, Firefox và Chrome 121+
+     · `::-webkit-scrollbar-*` — Safari và Chrome cũ
+
+   Không đặt `!important`: đây là kiểu dáng nền, nơi dùng ghi đè được. Khác các
+   luật trên trong file này — chúng chống CSS reset của consumer nên cần
+   `!important`.
+
+   KHÔNG đụng tới thanh cuộn của `<select>` gốc và vùng có `scrollbar-width:
+   none` (thanh ẩn có chủ ý, như dải tab cuộn ngang).
+   --------------------------------------------------------------------------- */
+* {
+  scrollbar-width: thin;
+  scrollbar-color: var(--border-default-strong, #d1d5db) transparent;
+}
+
+*::-webkit-scrollbar {
+  width: 10px;
+  height: 10px;
+}
+
+*::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+*::-webkit-scrollbar-thumb {
+  background-color: var(--border-default-strong, #d1d5db);
+  border-radius: var(--radius-full, 9999px);
+  /* Viền trong suốt + `background-clip` để tay cuộn mảnh hơn rãnh, không dính
+     sát mép. `padding` không có tác dụng trên phần tử giả này. */
+  border: 2px solid transparent;
+  background-clip: content-box;
+}
+
+*::-webkit-scrollbar-thumb:hover {
+  background-color: var(--text-body-subtle, #6b7280);
+}
+
+/* Góc giao giữa thanh dọc và thanh ngang — để trống thì Safari vẽ ô trắng. */
+*::-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;