@foxeltech/angular-ui 0.4.0 → 0.7.75

package/components.css

@@ -77,7 +77,7 @@
   margin-right: 0px !important;
 }
 .mat-mdc-tooltip {
-  border-radius: 6px !important;
+  border-radius: var(--og-radius-control) !important;
   background-color: rgb(var(--bg-primary)) !important;
   --mdc-plain-tooltip-container-color: rgb(var(--bg-primary));
   --mdc-plain-tooltip-supporting-text-color: rgb(var(--text-primary));
@@ -88,7 +88,7 @@
 
 .mat-mdc-table {
   border: 1px solid rgb(var(--border-default)) !important;
-  border-radius: 12px !important;
+  border-radius: var(--og-radius-card) !important;
   overflow: hidden !important;
   border-collapse: separate !important;
   border-spacing: 0 !important;
@@ -106,7 +106,7 @@
   padding-top: 8px !important;
   padding-bottom: 8px !important;
   line-height: 24px !important;
-  font-family: 'Roboto';
+  font-family: var(--og-font-body);
 }
 
 .mdc-data-table__row {
@@ -122,7 +122,7 @@
 .mdc-data-table__cell {
   border-bottom: 1px solid rgb(var(--border-default)) !important;
   background-color: rgb(var(--bg-primary)) !important;
-  font-family: 'Roboto';
+  font-family: var(--og-font-body);
 }
 
 .mat-mdc-row:last-child .mdc-data-table__cell {
@@ -136,7 +136,7 @@
 .mat-mdc-select-panel {
   background-color: rgb(var(--bg-primary)) !important;
   border: 1px solid rgb(var(--border-default)) !important;
-  border-radius: 0.5rem !important;
+  border-radius: var(--og-radius-card) !important;
   box-shadow: 0 2px 4px rgb(var(--shadow-color) / 0.1) !important;
 }
 
@@ -145,11 +145,11 @@
 }
 
 .mat-mdc-menu-panel {
-  border-radius: 6px !important;
+  border-radius: var(--og-radius-card) !important;
   border-color: rgb(var(--border-default)) !important;
 }
 .mat-mdc-menu-panel .mat-mdc-menu-content {
-  @apply bg-bg-primary shadow-none border rounded-[6px] border-border-default flex flex-col;
+  @apply bg-bg-primary shadow-none border rounded-card border-border-default flex flex-col;
 }
 
 .mat-mdc-option .mat-pseudo-checkbox {
@@ -158,7 +158,7 @@
 
 .mat-mdc-dialog-surface {
   background-color: rgb(var(--bg-primary)) !important;
-  border-radius: 8px !important;
+  border-radius: var(--og-radius-card) !important;
 }
 .mat-mdc-dialog-container .mat-mdc-dialog-content {
   letter-spacing: 0 !important;
@@ -203,7 +203,7 @@ input[type='password'] {
   @apply font-semibold text-sm tracking-normal leading-5 text-text-primary;
 }
 .txt-heading-table {
-  @apply text-base font-roboto font-semibold text-text-primary tracking-tight;
+  @apply text-base font-body font-semibold text-text-primary tracking-tight;
 }
 .txt-heading-compact-02 {
   @apply font-semibold text-sm tracking-normal leading-5 text-text-primary;
@@ -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;
@@ -334,7 +346,268 @@ input[type='password'] {
   @apply btn-common bg-gradient-primary hover:opacity-75 text-text-focus;
 }
 .btn-success {
-  @apply btn-common bg-gradient-success hover:opacity-75 text-white;
+  @apply btn-common bg-gradient-success hover:opacity-75 text-surface;
+}
+/* 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;
+  box-shadow:
+    inset 0 1px 0 rgb(255 255 255 / 0.18),
+    0 1px 2px rgb(0 0 0 / 0.15);
 }
 .btn-alternative {
   @apply btn-common hover:bg-bg-hover text-text-primary border border-border-default;
@@ -376,43 +649,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;
@@ -474,7 +759,7 @@ input[type='password'] {
 .border-gradient-primary {
   border: 1px solid transparent;
   background:
-    linear-gradient(var(--surface, #fff), var(--surface, #fff)) padding-box,
+    linear-gradient(rgb(var(--og-surface)), rgb(var(--og-surface))) padding-box,
     linear-gradient(
       135deg,
       rgb(var(--gradient-primary-start)),
@@ -482,5 +767,22 @@ input[type='password'] {
     ) border-box;
 }
 .skeleton-load {
-  @apply rounded bg-gray-200 animate-pulse motion-reduce:animate-none;
+  @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/dialogs.css

@@ -1,6 +1,6 @@
 .fx-dialog {
   max-width: unset !important;
-  border-radius: 8px !important;
+  border-radius: var(--og-radius-card) !important;
   .mat-dialog-actions {
     border-top: 1px solid rgb(var(--border-default)) !important;
     margin-left: -24px;
@@ -40,7 +40,7 @@
 
     .mat-dialog-title {
       background-color: rgb(var(--bg-primary));
-      box-shadow: 0px 4px 8px rgba(26, 28, 38, 0.15);
+      box-shadow: 0px 4px 8px rgb(var(--shadow-color) / 0.15);
       color: rgb(var(--text-primary));
       padding: 12px 20px;
       min-height: 24px;