@foxeltech/angular-ui 0.7.44 → 0.7.83

package/fonts.css

@@ -1,6 +1,11 @@
-/* Self-hosted V2 fonts (Archivo / JetBrains Mono / IBM Plex Mono / Newsreader /
-   Source Serif 4) — woff2 extracted from the V2 design bundle by
-   tools/extract-og-tokens.mjs; re-run it to regenerate this file.
+/* @font-face cho bộ font của design V2 (Familjen Grotesk, JetBrains Mono,
+   Archivo, IBM Plex Mono, Newsreader, Source Serif 4) — woff2 bóc từ bundle
+   design bởi tools/extract-og-tokens.mjs; chạy lại script để sinh lại file.
+
+   Familjen Grotesk là font THÂN + TIÊU ĐỀ thực tế của demo (lớp override đè
+   lên mọi theme); JetBrains Mono dùng cho mono + figure. Bốn họ còn lại là
+   mặc định của lớp base OgeniumDashboards, hiện KHÔNG theme nào trỏ tới —
+   giữ lại để đổi theme không phải bóc lại font.
 
    NOT imported by tailwind.css: v4 inlines imports and rebases font url()s
    against the entry file, breaking resolution in consumers. Consumers add
@@ -545,6 +550,102 @@
   src: url('source-serif-4/source-serif-4-600-latin.woff2') format('woff2');
   unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
 }
+@font-face {
+  font-family: 'Familjen Grotesk';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url('familjen-grotesk/familjen-grotesk-400-vietnamese.woff2') format('woff2');
+  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
+}
+@font-face {
+  font-family: 'Familjen Grotesk';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url('familjen-grotesk/familjen-grotesk-400-latin-ext.woff2') format('woff2');
+  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+@font-face {
+  font-family: 'Familjen Grotesk';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url('familjen-grotesk/familjen-grotesk-400-latin.woff2') format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+@font-face {
+  font-family: 'Familjen Grotesk';
+  font-style: normal;
+  font-weight: 500;
+  font-display: swap;
+  src: url('familjen-grotesk/familjen-grotesk-500-vietnamese.woff2') format('woff2');
+  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
+}
+@font-face {
+  font-family: 'Familjen Grotesk';
+  font-style: normal;
+  font-weight: 500;
+  font-display: swap;
+  src: url('familjen-grotesk/familjen-grotesk-500-latin-ext.woff2') format('woff2');
+  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+@font-face {
+  font-family: 'Familjen Grotesk';
+  font-style: normal;
+  font-weight: 500;
+  font-display: swap;
+  src: url('familjen-grotesk/familjen-grotesk-500-latin.woff2') format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+@font-face {
+  font-family: 'Familjen Grotesk';
+  font-style: normal;
+  font-weight: 600;
+  font-display: swap;
+  src: url('familjen-grotesk/familjen-grotesk-600-vietnamese.woff2') format('woff2');
+  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
+}
+@font-face {
+  font-family: 'Familjen Grotesk';
+  font-style: normal;
+  font-weight: 600;
+  font-display: swap;
+  src: url('familjen-grotesk/familjen-grotesk-600-latin-ext.woff2') format('woff2');
+  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+@font-face {
+  font-family: 'Familjen Grotesk';
+  font-style: normal;
+  font-weight: 600;
+  font-display: swap;
+  src: url('familjen-grotesk/familjen-grotesk-600-latin.woff2') format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+@font-face {
+  font-family: 'Familjen Grotesk';
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src: url('familjen-grotesk/familjen-grotesk-700-vietnamese.woff2') format('woff2');
+  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
+}
+@font-face {
+  font-family: 'Familjen Grotesk';
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src: url('familjen-grotesk/familjen-grotesk-700-latin-ext.woff2') format('woff2');
+  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+@font-face {
+  font-family: 'Familjen Grotesk';
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src: url('familjen-grotesk/familjen-grotesk-700-latin.woff2') format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
 @font-face {
   font-family: 'JetBrains Mono';
   font-style: normal;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@foxeltech/angular-ui",
-  "version": "0.7.44",
+  "version": "0.7.83",
   "license": "MIT",
   "publishConfig": {
     "access": "public"

package/src/lib/styles/components.css

@@ -299,23 +299,35 @@ input[type='password'] {
 .txt-tag-default {
   @apply txt-tag-common text-text-secondary;
 }
+/* ---- fx-ui-tag: tông theo hệ MỚI ------------------------------------
+   `fx-ui-tag` là tag DÙNG CHUNG (priority, status, category…), không phải
+   badge severity đứng một mình — nên nền mềm theo THANG ĐO (`--og-sev-*` pha
+   loãng), KHÔNG dùng pill đen đặc của `.tone-tint-critical`. Trước đây trỏ
+   vào bộ LEGACY vivid (`bg-critical/20` → hồng #fe0453) nên mọi badge trong
+   list ở mọi tab vẫn ra màu cũ (anh Tú báo 03/09). */
 .txt-tag-success {
-  @apply txt-tag-common text-success;
+  @apply txt-tag-common;
+  color: rgb(var(--og-positive));
 }
 .txt-tag-warning {
-  @apply txt-tag-common text-warning;
+  @apply txt-tag-common;
+  color: rgb(var(--og-warning));
 }
 .txt-tag-critical {
-  @apply txt-tag-common text-critical;
+  @apply txt-tag-common;
+  color: rgb(var(--og-sev-critical));
 }
 .txt-tag-danger {
-  @apply txt-tag-common text-danger;
+  @apply txt-tag-common;
+  color: rgb(var(--og-sev-danger));
 }
 .txt-tag-information {
-  @apply txt-tag-common text-information;
+  @apply txt-tag-common;
+  color: rgb(var(--og-neutral-soft-fg));
 }
 .txt-tag-discovery {
-  @apply txt-tag-common text-discovery;
+  @apply txt-tag-common;
+  color: rgb(var(--og-accent-soft-fg));
 }
 .txt-link {
   @apply font-semibold text-text-link text-sm tracking-normal;
@@ -327,17 +339,302 @@ input[type='password'] {
   @apply font-mono text-sm text-text-primary tracking-normal;
 }
 
+/* ---- Nút: viền hairline + bóng mờ ở MỌI biến thể (anh Tú 04/09) --------
+   Demo `.og-button`: border `--og-rule`, hover `0 2px 7px rgba(0,0,0,.12)`;
+   `.bi-newbtn`: viền tối hơn nền 1 bậc + `0 1px 2px rgba(0,0,0,.15)`. Nút nền
+   đặc dùng viền inset tối 8% để không phải khai màu viền riêng cho gradient. */
 .btn-default {
   @apply btn-common bg-button-default hover:opacity-75 text-text-inverse;
+  box-shadow:
+    inset 0 0 0 1px rgb(0 0 0 / 0.08),
+    0 1px 2px rgb(0 0 0 / 0.12);
 }
 .btn-primary {
   @apply btn-common bg-gradient-primary hover:opacity-75 text-text-focus;
+  box-shadow:
+    inset 0 0 0 1px rgb(0 0 0 / 0.08),
+    0 1px 2px rgb(0 0 0 / 0.12);
 }
 .btn-success {
   @apply btn-common bg-gradient-success hover:opacity-75 text-surface;
+  box-shadow:
+    inset 0 0 0 1px rgb(0 0 0 / 0.08),
+    0 1px 2px rgb(0 0 0 / 0.12);
+}
+/* Nút hành động chính theo demo (`.bi-newbtn`): màu cố định, không phải accent. */
+/* ---- Tông severity theo ĐÚNG mô hình demo (đo 03/09) -----------------
+   Demo KHÔNG tô badge bằng màu rực. Nó dùng token semantic, và bậc nặng
+   nhất được nhấn bằng ĐỘ ĐẬM chứ không bằng màu:
+     Critical → nền --og-text (#26282c), chữ --og-surface  (pill đen đặc)
+     High     → nền --og-negative-soft-bg, chữ --og-negative
+     Medium   → nền --og-warning-soft-bg,  chữ --og-warning
+     Low      → nền --og-positive-soft-bg, chữ --og-positive
+     Info     → nền --og-neutral-soft-bg,  chữ --og-neutral-soft-fg
+     Neutral  → nền --og-surface-sunken,   chữ --og-text-muted
+
+   Dùng class thay vì utility Tailwind vì tên `warning`/`critical` trong theme
+   Tailwind đang trỏ vào bộ LEGACY `--og-tone-*`, không phải token semantic —
+   gọi `text-warning` ở đây sẽ lấy sai màu.
+
+   MÀU (`tone-tint-*`) tách khỏi HÌNH DẠNG (`tone-badge`) có chủ đích: ô icon
+   vuông của stat-card và chip filter cần đúng màu nhưng KHÔNG được nhận
+   `border-radius:999px` + padding của pill. */
+/* ---- Tông THANG ĐO cho filter chip -----------------------------------
+   Filter chip severity là một THANG ĐO (giống chấm legend), không phải badge
+   của một finding — nên KHÔNG dùng `.tone-tint-critical` (pill đen đặc, dành
+   riêng cho badge Critical theo `.og-badge--solid`). Ở đây Critical phải đọc
+   ra ĐỎ SẪM: nền mềm pha từ ramp `--og-sev-*`, chữ lấy bản dễ đọc nhất.
+   (Demo không có mẫu để copy: filter chip của demo theo TRẠNG THÁI —
+   "Confirmed / Reachable / Blocked" — chứ không theo severity.) */
+.tone-scale-critical {
+  background: color-mix(in srgb, rgb(var(--og-sev-critical)) 12%, rgb(var(--og-surface)));
+  color: rgb(var(--og-sev-critical));
+}
+.tone-scale-danger {
+  background: color-mix(in srgb, rgb(var(--og-sev-danger)) 12%, rgb(var(--og-surface)));
+  color: rgb(var(--og-sev-danger));
+}
+.tone-scale-warning {
+  background: color-mix(in srgb, rgb(var(--og-sev-warning)) 16%, rgb(var(--og-surface)));
+  color: rgb(var(--og-warning));
+}
+.tone-scale-success {
+  background: color-mix(in srgb, rgb(var(--og-sev-success)) 12%, rgb(var(--og-surface)));
+  color: rgb(var(--og-positive));
+}
+.tone-scale-information {
+  background: rgb(var(--og-neutral-soft-bg));
+  color: rgb(var(--og-neutral-soft-fg));
+}
+.tone-scale-discovery {
+  background: rgb(var(--og-accent-soft-bg));
+  color: rgb(var(--og-accent-soft-fg));
+}
+.tone-scale-neutral {
+  background: rgb(var(--og-surface-sunken));
+  color: rgb(var(--og-text-muted));
+}
+/* ---- Nền ĐẶC theo tông ------------------------------------------------
+   Cho trạng thái ĐANG CHỌN (chip filter active) — nơi cần khối màu đậm kèm
+   chữ tương phản. Khác `.tone-tint-*`: cái đó là bộ badge severity theo demo
+   (Critical = đen), còn đây là màu của chính bậc severity. */
+.tone-solid-critical {
+  background: rgb(var(--og-sev-critical));
+  color: rgb(var(--og-surface));
+}
+.tone-solid-danger {
+  background: rgb(var(--og-sev-danger));
+  color: rgb(var(--og-surface));
+}
+.tone-solid-warning {
+  background: rgb(var(--og-warning));
+  color: rgb(var(--og-surface));
+}
+.tone-solid-success {
+  background: rgb(var(--og-positive));
+  color: rgb(var(--og-surface));
+}
+.tone-solid-information {
+  background: rgb(var(--og-neutral-soft-fg));
+  color: rgb(var(--og-surface));
+}
+.tone-solid-discovery {
+  background: rgb(var(--og-accent));
+  color: rgb(var(--og-surface));
+}
+.tone-solid-neutral {
+  background: rgb(var(--og-text-faint));
+  color: rgb(var(--og-surface));
+}
+
+/* ---- Viền theo tông ---------------------------------------------------
+   Tách riêng vì `border-color` là thuộc tính khác: panel trạng thái (dropzone
+   upload) cần viền + nền + chữ cùng tông. `tone-hover-border-*` cho chỗ chỉ
+   đổi viền khi hover (KPI card) — modifier `hover:` của Tailwind không áp
+   được lên class CSS thật nên khai thẳng pseudo-class. */
+.tone-border-critical {
+  border-color: rgb(var(--og-sev-critical));
+}
+.tone-border-danger {
+  border-color: rgb(var(--og-sev-danger));
 }
+.tone-border-warning {
+  border-color: rgb(var(--og-warning));
+}
+.tone-border-success {
+  border-color: rgb(var(--og-positive));
+}
+.tone-border-information {
+  border-color: rgb(var(--og-neutral-soft-fg));
+}
+.tone-border-discovery {
+  border-color: rgb(var(--og-accent));
+}
+.tone-border-neutral {
+  border-color: rgb(var(--og-border));
+}
+.tone-hover-border-critical:hover {
+  border-color: rgb(var(--og-sev-critical));
+}
+.tone-hover-border-danger:hover {
+  border-color: rgb(var(--og-sev-danger));
+}
+.tone-hover-border-warning:hover {
+  border-color: rgb(var(--og-warning));
+}
+.tone-hover-border-success:hover {
+  border-color: rgb(var(--og-positive));
+}
+.tone-hover-border-information:hover {
+  border-color: rgb(var(--og-neutral-soft-fg));
+}
+.tone-hover-border-discovery:hover {
+  border-color: rgb(var(--og-accent));
+}
+.tone-hover-border-neutral:hover {
+  border-color: rgb(var(--og-border));
+}
+
+.tone-tint-critical {
+  background: rgb(var(--og-text));
+  color: rgb(var(--og-surface));
+}
+.tone-tint-danger {
+  background: rgb(var(--og-negative-soft-bg));
+  color: rgb(var(--og-negative));
+}
+.tone-tint-warning {
+  background: rgb(var(--og-warning-soft-bg));
+  color: rgb(var(--og-warning));
+}
+.tone-tint-success {
+  background: rgb(var(--og-positive-soft-bg));
+  color: rgb(var(--og-positive));
+}
+.tone-tint-information {
+  background: rgb(var(--og-neutral-soft-bg));
+  color: rgb(var(--og-neutral-soft-fg));
+}
+.tone-tint-discovery {
+  /* demo: `.og-badge--accent` */
+  background: rgb(var(--og-accent-soft-bg));
+  color: rgb(var(--og-accent-soft-fg));
+}
+.tone-tint-neutral {
+  background: rgb(var(--og-surface-sunken));
+  color: rgb(var(--og-text-muted));
+}
+
+/* ---- Chữ / chấm theo tông (tầng 3 của mô hình demo) -----------------
+   Demo tách RÕ ba tầng (nguồn: `sevMeta` + `.og-badge--*` + `.og-statusdot--*`):
+     ① chart      → màu literal `--og-sev-*`
+     ② badge/pill → `.tone-tint-*` (token semantic, Critical = solid)
+     ③ chữ & chấm → màu SEMANTIC, không phải ramp chart
+
+   `.tone-fg-*` chọn thành viên DỄ ĐỌC NHẤT trong mỗi họ severity (contrast
+   trên surface trắng): critical #7f1d1d 10.0:1 · danger #dc2626 4.83:1 ·
+   warning --og-warning #a8741f 4.0:1 (ramp #f59e0b chỉ 2.15:1 → không dùng
+   cho chữ) · success --og-positive #3f7d55 4.4:1 (ramp #16a34a 3.30:1). */
+.tone-fg-critical {
+  color: rgb(var(--og-sev-critical));
+}
+.tone-fg-danger {
+  color: rgb(var(--og-sev-danger));
+}
+.tone-fg-warning {
+  color: rgb(var(--og-warning));
+}
+.tone-fg-success {
+  color: rgb(var(--og-positive));
+}
+.tone-fg-information {
+  color: rgb(var(--og-neutral-soft-fg));
+}
+.tone-fg-discovery {
+  color: rgb(var(--og-accent-soft-fg));
+}
+.tone-fg-neutral {
+  color: rgb(var(--og-text-faint));
+}
+
+/* Chấm trạng thái trong HÀNG (`● Confirmed`) — demo dùng màu semantic. */
+.tone-dot-critical {
+  background: rgb(var(--og-sev-critical));
+}
+.tone-dot-danger {
+  background: rgb(var(--og-negative));
+}
+.tone-dot-warning {
+  background: rgb(var(--og-warning));
+}
+.tone-dot-success {
+  background: rgb(var(--og-positive));
+}
+.tone-dot-information {
+  background: rgb(var(--og-neutral-soft-fg));
+}
+.tone-dot-discovery {
+  background: rgb(var(--og-accent));
+}
+.tone-dot-neutral {
+  background: rgb(var(--og-text-faint));
+}
+
+/* Chấm LEGEND của chart — phải TRÙNG màu cung nên dùng ramp `--og-sev-*`. */
+.tone-dot-chart-critical {
+  background: rgb(var(--og-sev-critical));
+}
+.tone-dot-chart-danger {
+  background: rgb(var(--og-sev-danger));
+}
+.tone-dot-chart-warning {
+  background: rgb(var(--og-sev-warning));
+}
+.tone-dot-chart-success {
+  background: rgb(var(--og-sev-success));
+}
+.tone-dot-chart-information {
+  background: rgb(var(--og-neutral-soft-fg));
+}
+.tone-dot-chart-discovery {
+  background: rgb(var(--og-accent));
+}
+.tone-dot-chart-neutral {
+  background: rgb(var(--og-text-faint));
+}
+
+/* Hình dạng pill của badge severity — demo: 999px · 11.5px · weight 400. */
+.tone-badge {
+  display: inline-flex;
+  align-items: center;
+  border-radius: var(--og-radius-pill);
+  gap: 5px;
+  padding: 3px 10px;
+  font-size: var(--og-fs-xs);
+  font-weight: 400;
+  line-height: 1.5;
+  white-space: nowrap;
+}
+
+.btn-cta {
+  @apply btn-common bg-cta hover:bg-cta-hover text-white border border-cta-hover;
+  box-shadow:
+    inset 0 1px 0 rgb(255 255 255 / 0.18),
+    0 1px 2px rgb(0 0 0 / 0.15);
+}
+.btn-cta:hover {
+  box-shadow:
+    inset 0 1px 0 rgb(255 255 255 / 0.18),
+    0 2px 6px rgb(0 0 0 / 0.2);
+}
+/* Outline = `.og-button--outline`: nền surface, viền --og-border, bóng 1px;
+   hover nổi lên 0 2px 7px như demo. */
 .btn-alternative {
-  @apply btn-common hover:bg-bg-hover text-text-primary border border-border-default;
+  @apply btn-common bg-surface hover:bg-bg-hover text-text-primary border border-border-default;
+  box-shadow: 0 1px 2px rgb(0 0 0 / 0.05);
+}
+.btn-alternative:hover {
+  box-shadow: 0 2px 7px rgb(0 0 0 / 0.12);
 }
 .btn-menu-top {
   @apply btn-menu-common border-b border-border-default pt-small pb-semi;
@@ -376,43 +673,55 @@ input[type='password'] {
   @apply tag-common bg-bg-hover;
 }
 .tag-success {
-  @apply tag-common bg-success/20;
+  @apply tag-common;
+  background: color-mix(in srgb, rgb(var(--og-sev-success)) 12%, rgb(var(--og-surface)));
 }
 .tag-warning {
-  @apply tag-common bg-warning/20;
+  @apply tag-common;
+  background: color-mix(in srgb, rgb(var(--og-sev-warning)) 16%, rgb(var(--og-surface)));
 }
 .tag-danger {
-  @apply tag-common bg-danger/20;
+  @apply tag-common;
+  background: color-mix(in srgb, rgb(var(--og-sev-danger)) 12%, rgb(var(--og-surface)));
 }
 .tag-critical {
-  @apply tag-common bg-critical/20;
+  @apply tag-common;
+  background: color-mix(in srgb, rgb(var(--og-sev-critical)) 12%, rgb(var(--og-surface)));
 }
 .tag-discovery {
-  @apply tag-common bg-discovery/20;
+  @apply tag-common;
+  background: rgb(var(--og-accent-soft-bg));
 }
 .tag-information {
-  @apply tag-common bg-information/20;
+  @apply tag-common;
+  background: rgb(var(--og-neutral-soft-bg));
 }
 .tag-default-solid {
   @apply tag-common bg-bg-hover;
 }
 .tag-success-solid {
-  @apply tag-common bg-success;
+  @apply tag-common;
+  background: rgb(var(--og-positive));
 }
 .tag-warning-solid {
-  @apply tag-common bg-warning;
+  @apply tag-common;
+  background: rgb(var(--og-warning));
 }
 .tag-danger-solid {
-  @apply tag-common bg-danger;
+  @apply tag-common;
+  background: rgb(var(--og-sev-danger));
 }
 .tag-critical-solid {
-  @apply tag-common bg-critical;
+  @apply tag-common;
+  background: rgb(var(--og-sev-critical));
 }
 .tag-discovery-solid {
-  @apply tag-common bg-discovery;
+  @apply tag-common;
+  background: rgb(var(--og-accent));
 }
 .tag-information-solid {
-  @apply tag-common bg-information;
+  @apply tag-common;
+  background: rgb(var(--og-neutral-soft-fg));
 }
 .tag-square {
   @apply rounded-md px-semi py-small;
@@ -484,3 +793,20 @@ input[type='password'] {
 .skeleton-load {
   @apply rounded bg-track animate-pulse motion-reduce:animate-none;
 }
+
+/* ============================================================================
+   Route skeleton — ẩn nội dung CŨ trong lúc skeleton của route mới đang hiện.
+
+   ⚠️ PHẢI ĐỂ Ở CSS TOÀN CỤC, không đặt trong .scss của component.
+   Component đang active do ROUTER tạo, nên nó KHÔNG mang attribute
+   `_ngcontent-*` của template chứa `<router-outlet>`. View encapsulation
+   (emulated) thêm attribute đó vào selector con, nên rule viết trong
+   component .scss chỉ ẩn được `<router-outlet>` — chính component thật thì
+   không. Đã bị đúng bẫy này khi test standalone (`app-projects` vẫn hiện).
+
+   `<router-outlet>` và component active là hai node NGANG CẤP nên không bọc
+   được, phải loại trừ theo selector.
+   ============================================================================ */
+.fx-rs-busy > *:not(fx-ui-route-skeleton) {
+  display: none !important;
+}

package/src/lib/styles/fonts.css

@@ -1,6 +1,11 @@
-/* Self-hosted V2 fonts (Archivo / JetBrains Mono / IBM Plex Mono / Newsreader /
-   Source Serif 4) — woff2 extracted from the V2 design bundle by
-   tools/extract-og-tokens.mjs; re-run it to regenerate this file.
+/* @font-face cho bộ font của design V2 (Familjen Grotesk, JetBrains Mono,
+   Archivo, IBM Plex Mono, Newsreader, Source Serif 4) — woff2 bóc từ bundle
+   design bởi tools/extract-og-tokens.mjs; chạy lại script để sinh lại file.
+
+   Familjen Grotesk là font THÂN + TIÊU ĐỀ thực tế của demo (lớp override đè
+   lên mọi theme); JetBrains Mono dùng cho mono + figure. Bốn họ còn lại là
+   mặc định của lớp base OgeniumDashboards, hiện KHÔNG theme nào trỏ tới —
+   giữ lại để đổi theme không phải bóc lại font.
 
    NOT imported by tailwind.css: v4 inlines imports and rebases font url()s
    against the entry file, breaking resolution in consumers. Consumers add
@@ -545,6 +550,102 @@
   src: url('source-serif-4/source-serif-4-600-latin.woff2') format('woff2');
   unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
 }
+@font-face {
+  font-family: 'Familjen Grotesk';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url('familjen-grotesk/familjen-grotesk-400-vietnamese.woff2') format('woff2');
+  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
+}
+@font-face {
+  font-family: 'Familjen Grotesk';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url('familjen-grotesk/familjen-grotesk-400-latin-ext.woff2') format('woff2');
+  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+@font-face {
+  font-family: 'Familjen Grotesk';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url('familjen-grotesk/familjen-grotesk-400-latin.woff2') format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+@font-face {
+  font-family: 'Familjen Grotesk';
+  font-style: normal;
+  font-weight: 500;
+  font-display: swap;
+  src: url('familjen-grotesk/familjen-grotesk-500-vietnamese.woff2') format('woff2');
+  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
+}
+@font-face {
+  font-family: 'Familjen Grotesk';
+  font-style: normal;
+  font-weight: 500;
+  font-display: swap;
+  src: url('familjen-grotesk/familjen-grotesk-500-latin-ext.woff2') format('woff2');
+  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+@font-face {
+  font-family: 'Familjen Grotesk';
+  font-style: normal;
+  font-weight: 500;
+  font-display: swap;
+  src: url('familjen-grotesk/familjen-grotesk-500-latin.woff2') format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+@font-face {
+  font-family: 'Familjen Grotesk';
+  font-style: normal;
+  font-weight: 600;
+  font-display: swap;
+  src: url('familjen-grotesk/familjen-grotesk-600-vietnamese.woff2') format('woff2');
+  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
+}
+@font-face {
+  font-family: 'Familjen Grotesk';
+  font-style: normal;
+  font-weight: 600;
+  font-display: swap;
+  src: url('familjen-grotesk/familjen-grotesk-600-latin-ext.woff2') format('woff2');
+  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+@font-face {
+  font-family: 'Familjen Grotesk';
+  font-style: normal;
+  font-weight: 600;
+  font-display: swap;
+  src: url('familjen-grotesk/familjen-grotesk-600-latin.woff2') format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+@font-face {
+  font-family: 'Familjen Grotesk';
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src: url('familjen-grotesk/familjen-grotesk-700-vietnamese.woff2') format('woff2');
+  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
+}
+@font-face {
+  font-family: 'Familjen Grotesk';
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src: url('familjen-grotesk/familjen-grotesk-700-latin-ext.woff2') format('woff2');
+  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+@font-face {
+  font-family: 'Familjen Grotesk';
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src: url('familjen-grotesk/familjen-grotesk-700-latin.woff2') format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
 @font-face {
   font-family: 'JetBrains Mono';
   font-style: normal;