npm - @foxeltech/angular-ui - Versions diffs - 0.4.0 → 0.7.75 - Mend

@foxeltech/angular-ui 0.4.0 → 0.7.75

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (189) hide show

package/src/lib/styles/tokens.css CHANGED Viewed

@@ -3,16 +3,60 @@
  * Replaces the old JS preset (tailwind.config.js / lodash.merge sharing).
  *
  * Colour tokens point at the runtime RGB-triplet variables from theme.css
- * (dark default on :root, light via .light_theme) so theme switching keeps
- * working; opacity modifiers like bg-critical/10 are handled by v4's
- * color-mix() and need no <alpha-value> plumbing.
+ * (OgeniumDashboards --og-* per [data-og-theme] on <html>, porcelain default)
+ * so theme switching keeps working; opacity modifiers like bg-critical/10 are
+ * handled by v4's color-mix() and need no <alpha-value> plumbing.
  */
 /* `inline` is load-bearing: without it the rgb(var(--x)) values are baked
-   into :root once, so .light_theme's runtime triplet overrides never reach
+   into :root once, so [data-og-theme]'s runtime triplet overrides never reach
    the utilities. inline makes every utility carry rgb(var(--x)) itself and
    resolve at the element that uses it — same behavior as v3. */
 @theme inline {
-  /* Colours (names match the v3 preset so every existing class keeps working) */
+  /* ---- OG palette — use these in new/restyled markup ---- */
+  --color-page: rgb(var(--og-page-bg));
+  --color-surface: rgb(var(--og-surface));
+  --color-surface-raised: rgb(var(--og-surface-raised));
+  --color-surface-sunken: rgb(var(--og-surface-sunken));
+  --color-border: rgb(var(--og-border));
+  --color-border-subtle: rgb(var(--og-border-subtle));
+  --color-strong: rgb(var(--og-text));
+  --color-body: rgb(var(--og-text-body));
+  --color-muted: rgb(var(--og-text-muted));
+  --color-faint: rgb(var(--og-text-faint));
+  --color-accent: rgb(var(--og-accent));
+  --color-accent-fg: rgb(var(--og-accent-fg));
+  --color-accent-contrast: rgb(var(--og-accent-contrast));
+  --color-accent-soft: rgb(var(--og-accent-soft-bg));
+  --color-accent-soft-fg: rgb(var(--og-accent-soft-fg));
+  --color-positive: rgb(var(--og-positive));
+  --color-positive-soft: rgb(var(--og-positive-soft-bg));
+  --color-negative: rgb(var(--og-negative));
+  --color-negative-soft: rgb(var(--og-negative-soft-bg));
+  --color-warning-soft: rgb(var(--og-warning-soft-bg));
+  --color-neutral-soft: rgb(var(--og-neutral-soft-bg));
+  --color-neutral-soft-fg: rgb(var(--og-neutral-soft-fg));
+  --color-track: rgb(var(--og-track));
+  /* ---- CTA (New Analysis / New Scan) ----
+     Demo dùng một màu CỐ ĐỊNH cho nút hành động chính (`.bi-newbtn`), không
+     đổi theo theme và KHÔNG phải accent — nên để literal ở đây thay vì thành
+     token theme. Nguồn: lớp override của design, #c2582a / hover #b34e24. */
+  /* ---- Severity ramp CHO CHART ----
+     Màu literal đo trên demo (Critical #7f1d1d · High #dc2626 · Medium
+     #f59e0b · Low #16a34a; bộ dark nâng L cho đủ tương phản). TÁCH khỏi
+     `--color-critical/danger/warning/success` — mấy tên đó trỏ vào bộ LEGACY
+     `--og-tone-*` dùng cho text/nền, không phải màu chart của design. */
+  --color-sev-critical: rgb(var(--og-sev-critical));
+  --color-sev-danger: rgb(var(--og-sev-danger));
+  --color-sev-warning: rgb(var(--og-sev-warning));
+  --color-sev-success: rgb(var(--og-sev-success));
+  --color-cta: #c2582a;
+  --color-cta-hover: #b34e24;
+  /* ---- Legacy colour names (@deprecated — remove after the V2 campaign;
+     they resolve through the alias layer in theme.css, so every existing
+     class already renders the OG palette) ---- */
   --color-gradient-primary-start: rgb(var(--gradient-primary-start));
   --color-gradient-primary-end: rgb(var(--gradient-primary-end));
   --color-gradient-success-start: rgb(var(--gradient-success-start));
@@ -46,6 +90,14 @@
   --color-button-primary: rgb(var(--button-primary));
   /* Breakpoints (v3 custom screens) */
+  /* ⚠️ THANG NÀY KHÔNG PHẢI MẶC ĐỊNH CỦA TAILWIND (640/768/1024/1280).
+     `lg` ở đây là **1080px**, không phải 1024px — đã gây lỗi "màn lg mà render
+     layout sm" (03/09): mọi viewport 1024-1079 (rất dễ gặp khi OS scaling
+     125-150% hoặc browser zoom) rơi xuống layout nhỏ. Anh Tú chốt GIỮ thang
+     này; đổi nó sẽ dịch ngưỡng của mọi `lg:`/`xl:` trong 5 app.
+     👉 Layout nào cần biết "có đủ chỗ thật hay không" thì dùng CONTAINER QUERY
+     theo bề rộng của chính nó (xem master-detail.component.css), đừng bám `lg:`.
+     `xl` là 1920px nên màn 1900px KHÔNG BAO GIỜ đạt `xl:`. */
   --breakpoint-sm: 480px;
   --breakpoint-md: 720px;
   --breakpoint-lg: 1080px;
@@ -61,14 +113,22 @@
   --shadow-2xl: 0 25px 50px -12px rgb(var(--shadow-color) / 0.25);
   --inset-shadow-sm: inset 0 2px 4px 0 rgb(var(--shadow-color) / 0.05);
-  /* v3 default border radii, incl. DEFAULT so bare `rounded` keeps working */
-  --radius-sm: 0.125rem;
-  --radius: 0.25rem;
-  --radius-md: 0.375rem;
-  --radius-lg: 0.5rem;
-  --radius-xl: 0.75rem;
-  --radius-2xl: 1rem;
-  --radius-3xl: 1.5rem;
+  /* Radius is a THEME variable in V2 (blueprint/terminal are square, ivory
+     controls are pills) — never hardcode border-radius in components. */
+  --radius-frame: var(--og-radius-frame);
+  --radius-card: var(--og-radius-card);
+  --radius-control: var(--og-radius-control);
+  --radius-pill: var(--og-radius-pill);
+  /* Legacy fixed scale remapped onto the theme radii so blueprint/terminal go
+     square with zero template edits. `rounded-full` stays Tailwind-native
+     9999px — avatars/dots must remain circular in every theme. */
+  --radius-sm: var(--og-radius-control);
+  --radius: var(--og-radius-control);
+  --radius-md: var(--og-radius-control);
+  --radius-lg: var(--og-radius-card);
+  --radius-xl: var(--og-radius-card);
+  --radius-2xl: var(--og-radius-card);
+  --radius-3xl: var(--og-radius-frame);
   /* Named spacing scale (gap-small, p-semi, mb-large, …) */
   --spacing-xs: 0.125rem;
@@ -79,12 +139,14 @@
   --spacing-xl: 1.25rem;
   --spacing-2xl: 1.5rem;
-  /* Font families */
-  --font-spmono: 'SpaceMonoRegular', monospace;
-  --font-dmsans: 'DMSans', sans-serif;
-  --font-orbitron: 'Orbitron', sans-serif;
-  --font-bevn: 'BeVietnamPro', sans-serif;
-  --font-roboto: 'Roboto', sans-serif;
+  /* Font families — theme variables (blueprint/terminal switch to mono).
+     V2 set: Archivo (body/display), JetBrains Mono / IBM Plex Mono (mono),
+     Source Serif 4 (prose), Newsreader (ivory/blueprint display). */
+  --font-body: var(--og-font-body);
+  --font-display: var(--og-font-display);
+  --font-mono: var(--og-font-mono);
+  --font-prose: var(--og-font-prose);
+  --font-figure: var(--og-font-figure);
   /* Font-size overrides (v3 preset values) */
   --text-xs: 0.75rem;

package/src/lib/styles/utilities.css CHANGED Viewed

@@ -8,13 +8,28 @@
 }
 @utility btn-common {
-  @apply flex text-sm h-10 font-semibold px-xl py-normal items-center justify-center rounded-lg shadow-sm transition-all duration-200 disabled:opacity-50 disabled:pointer-events-none disabled:cursor-not-allowed;
+  /* Compact size (anh Tú 29/08): h-8 + 13px label — the pre-V2 h-10 read too
+     large against the V2 density. leading-none: arbitrary text-[13px] inherits
+     lh 1.5 and Archivo's uneven leading floats the ink ~1px above center. */
+  @apply flex text-[13px] leading-none h-8 font-semibold px-large py-small items-center justify-center rounded-lg shadow-sm transition-all duration-200 disabled:opacity-50 disabled:pointer-events-none disabled:cursor-not-allowed;
 }
 @utility btn-menu-common {
   @apply flex flex-row items-center px-semi;
 }
+/* Nhãn "eyebrow" (tiêu đề panel, nhóm facet) — spec CUỐI của demo sau khi
+   lớp override đè lên base: font MONO, 11.5px, weight 600, letter-spacing
+   0.02em và KHÔNG viết hoa. Base DS viết hoa + tracking 0.08em, nhưng
+   override đặt `text-transform: none` nên demo hiển thị chữ thường. */
+@utility txt-eyebrow {
+  font-family: var(--og-font-mono);
+  font-size: var(--og-fs-xs);
+  font-weight: 600;
+  letter-spacing: 0.02em;
+  color: rgb(var(--og-text-muted));
+}
 @utility card-common {
   @apply text-left px-xl py-large border border-border-default rounded-lg shadow-sm transition-colors duration-500 ease-in-out;
 }

package/src/lib/ui/components/bar-list/bar-list.component.html ADDED Viewed

@@ -0,0 +1,29 @@
+<div class="flex flex-col gap-small">
+  @for (item of items(); track item.label) {
+    <button
+      type="button"
+      class="text-left rounded-control px-normal py-small -mx-normal transition-colors"
+      [class.hover:bg-surface-sunken]="interactive()"
+      [class.cursor-default]="!interactive()"
+      [tabindex]="interactive() ? 0 : -1"
+      (click)="onSelect(item)"
+    >
+      <div class="flex items-baseline justify-between gap-normal">
+        <span class="txt-body-medium-01 truncate">{{ item.label }}</span>
+        <span class="text-sm font-semibold text-strong shrink-0" style="font-family: var(--og-font-figure)">
+          {{ item.valueLabel ?? item.value }}
+        </span>
+      </div>
+      @if (item.meta) {
+        <div class="txt-utility-description truncate">{{ item.meta }}</div>
+      }
+      <div class="mt-xs h-[var(--og-track-h)] rounded-pill bg-track overflow-hidden">
+        <div
+          class="h-full rounded-pill transition-all duration-500"
+          [ngClass]="barClass(item)"
+          [style.width.%]="widthOf(item)"
+        ></div>
+      </div>
+    </button>
+  }
+</div>

package/src/lib/ui/components/button/button.component.html CHANGED Viewed

@@ -7,6 +7,7 @@
     'btn-default': buttonVariant() === 'default',
     'btn-primary': buttonVariant() === 'primary',
     'btn-success': buttonVariant() === 'success',
+    'btn-cta': buttonVariant() === 'cta',
     'btn-alternative': buttonVariant() === 'alternative',
   }"
   [disabled]="disabled() || loading()"
@@ -18,8 +19,8 @@
         [attr.fill]="
           buttonVariant() !== 'alternative' ? 'rgb(var(--text-primary))' : 'rgb(var(--primary))'
         "
-        width="20"
-        height="20"
+        width="16"
+        height="16"
         viewBox="0 0 24 24"
         xmlns="http://www.w3.org/2000/svg"
       >
@@ -219,17 +220,20 @@
         @if (icon) {
           <fx-ui-hero-icon
             [icon]="icon"
-            [size]="20"
+            [size]="16"
             class="flex"
             [ngClass]="{
               'text-text-inverse': buttonVariant() === 'default',
               'text-text-primary': buttonVariant() === 'alternative',
-              'text-white': buttonVariant() === 'primary' || buttonVariant() === 'success',
+              'text-accent-contrast': buttonVariant() === 'primary',
+              'text-surface': buttonVariant() === 'success',
+              'text-white': buttonVariant() === 'cta',
             }"
           ></fx-ui-hero-icon>
         }
         @if (label) {
-          <div>{{ label }}</div>
+          <!-- text-box: optical centering — Archivo's leading floats ink up otherwise -->
+          <div class="[text-box:trim-both_cap_alphabetic]">{{ label }}</div>
         }
       </div>
     </ng-container>

package/src/lib/ui/components/checkbox/checkbox.component.html CHANGED Viewed

@@ -25,7 +25,7 @@
     <span class="absolute inset-0 flex items-center justify-center">
       <svg
         xmlns="http://www.w3.org/2000/svg"
-        class="text-white w-4 h-4 transition-opacity duration-150"
+        class="text-accent-contrast w-4 h-4 transition-opacity duration-150"
         viewBox="0 0 24 24"
         fill="none"
         stroke="currentColor"

package/src/lib/ui/components/code-block/code-block.component.html ADDED Viewed

@@ -0,0 +1,8 @@
+@if (label()) {
+  <div class="txt-utility-caption font-bold text-text-secondary mb-normal">{{ label() }}</div>
+}
+<pre
+  class="m-0 p-large rounded-control border border-border bg-surface overflow-auto txt-body-compact-01 text-strong"
+  [style.max-height]="maxHeight() || null"
+  style="font-family: var(--og-font-mono); white-space: pre; tab-size: 2"
+>{{ code() }}</pre>

package/src/lib/ui/components/drawer/drawer.component.html CHANGED Viewed

@@ -1,18 +1,19 @@
 <div class="drawer-host-wrapper">
-  <a
-    href="/"
-    class="h-[60px]"
-    [ngClass]="{ 'flex items-center justify-center': !isExpanded, 'p-4': isExpanded }"
-    >
+  <a href="/" class="drawer-brand" [class.is-collapsed]="!isExpanded">
     @if (logo) {
-      <img
-        [src]="logo"
-        alt="Home"
-        class="h-[20px] w-auto transition-all duration-300 ease-in-out"
-        [ngClass]="{ 'scale-90': !isExpanded, 'ml-5': isExpanded }"
-        />
+      <img [src]="logo" alt="Home" class="drawer-brand-mark" />
     } @else {
-      <div class="h-[30px] w-auto transition-all duration-300 ease-in-out"></div>
+      <div class="drawer-brand-mark"></div>
+    }
+    @if (isExpanded && (logoText || logoSubtext)) {
+      <span class="drawer-brand-copy">
+        @if (logoText) {
+          <span class="drawer-brand-text">{{ logoText }}</span>
+        }
+        @if (logoSubtext) {
+          <span class="drawer-brand-subtext">{{ logoSubtext }}</span>
+        }
+      </span>
     }
   </a>
   <div class="drawer-container" [@drawerExpand]="getDrawerState()">
@@ -25,6 +26,20 @@
       }
     </nav>
+    <!-- V2: bottom section (Administration group, user block, …) -->
+    <div class="mt-auto">
+      @if (footerItems().length) {
+        <nav class="drawer-footer-nav">
+          @for (item of footerItems(); track item) {
+            <ng-container
+              *ngTemplateOutlet="drawerItem; context: { $implicit: item, level: 0 }"
+            ></ng-container>
+          }
+        </nav>
+      }
+      <ng-content select="[drawerFooter]"></ng-content>
+    </div>
     <!-- Version -->
     @if (version) {
       <div class="drawer-version" [matTooltip]="!isExpanded ? version : ''" matTooltipPosition="right">
@@ -59,6 +74,13 @@
 <!-- Recursive Template for Drawer Items -->
 <ng-template #drawerItem let-item let-level="level">
+  @if (item.heading) {
+    @if (isExpanded) {
+      <div class="drawer-section-label">{{ item.label }}</div>
+    } @else {
+      <div class="drawer-section-rule"></div>
+    }
+  } @else {
   <div class="drawer-item-wrapper">
     <!-- Item Button/Link -->
     @if (item.route && !item.children) {
@@ -125,4 +147,5 @@
       </div>
     }
   </div>
+  }
 </ng-template>

package/src/lib/ui/components/drawer/drawer.component.scss CHANGED Viewed

@@ -6,11 +6,75 @@
 }
 .drawer-host-wrapper {
-  @apply relative h-full border-r border-border-default;
+  /* Column flex: logo (fixed) + container (flex-1). The container was h-full
+     UNDER a 60px logo -> the drawer overflowed the viewport by 60px and the
+     footer (account block) sagged below the fold; opening its menu then
+     scroll-jumped the page. */
+  /* Nền SECONDARY (--og-page-bg) đặt ở WRAPPER chứ không ở .drawer-container:
+     hàng brand nằm ngoài container, nếu tô ở container thì 60px trên cùng
+     lộ nền của trang. Sáng: drawer xám, nội dung trắng; tối: drawer tối hơn
+     surface — đúng quy ước sidebar của cả hai chiều. */
+  @apply relative h-full border-r border-border-default flex flex-col bg-page;
+}
+/* Brand row — phải thẳng hàng với icon của nav item.
+   Icon nav nằm ở 24px tính từ mép drawer: 8px của .drawer-container (px-2)
+   + 16px padding-left inline của .drawer-item. Brand nằm NGOÀI container
+   nên phải tự cộng đủ 24px (trước đây p-4 + ml-5 = 36px → lệch 12px). */
+.drawer-brand {
+  @apply h-[60px] shrink-0 flex items-center gap-3 no-underline overflow-hidden;
+  padding-left: 24px;
+  padding-right: 8px;
+  transition: padding 300ms cubic-bezier(0.4, 0, 0.2, 1);
+  /* max-width là BẮT BUỘC: .drawer-host-wrapper là flex column có width auto
+     nên bề rộng của nó = max bề rộng các con. Chỉ .drawer-container được
+     animate 70/260px, còn hàng brand thì tự do — một tagline dài (VD "Binary
+     Exploit Intelligence Platform") sẽ NỚI RỘNG cả drawer thay vì xuống dòng.
+     Hai con số dưới đây phải khớp trigger drawerExpand trong drawer.component.ts. */
+  max-width: 260px;
+  /* Thu gọn: drawer rộng 70px, icon nav (20px @ 24px) có tâm 34px ≈ tâm
+     drawer 35px → căn giữa là khớp, không cần trừ bì. */
+  &.is-collapsed {
+    @apply justify-center;
+    padding-left: 0;
+    padding-right: 0;
+    max-width: 70px;
+  }
+}
+.drawer-brand-mark {
+  @apply h-[20px] w-auto shrink-0;
+}
+/* Cột chữ: title + subtitle xếp dọc. min-w-0 để truncate hoạt động khi
+   drawer bị bóp — thiếu nó thì chữ đẩy tràn ra ngoài thay vì cắt. */
+.drawer-brand-copy {
+  @apply flex flex-col min-w-0 leading-tight;
+}
+/* Wordmark: dùng CHỮ THẬT chứ không phải ảnh text_logo.png — ảnh đó là
+   navy đặc nên chìm hẳn trên theme dark; chữ ăn --og-text nên đúng cả 6. */
+.drawer-brand-text {
+  @apply truncate text-[15px] font-semibold text-text-primary select-none;
+  font-family: var(--og-font-display);
+  letter-spacing: -0.01em;
+}
+/* Subtitle: 11px muted, cùng cỡ với .drawer-version và caption
+   ADMINISTRATION nên không tự sinh ra một bậc typography mới. */
+/* line-clamp-2 chứ không phải truncate: tagline dài (VD "Binary Exploit
+   Intelligence Platform") không lọt một dòng trong cột chữ ~188px của drawer
+   260px, truncate sẽ cắt mất chữ. Hai dòng vẫn nằm gọn trong 60px của
+   .drawer-brand (18.75 + 1 + 27.5 = 47px). */
+.drawer-brand-subtext {
+  @apply line-clamp-2 text-[11px] text-text-placeholder select-none mt-[1px];
+  letter-spacing: var(--og-tracking-label);
 }
 .drawer-container {
-  @apply px-2 h-full bg-bg-primary flex flex-col overflow-auto;
+  /* Nền do .drawer-host-wrapper lo — container để trong suốt. */
+  @apply px-2 flex-1 min-h-0 flex flex-col overflow-hidden;
   transition: width 300ms cubic-bezier(0.4, 0, 0.2, 1);
 }
@@ -33,6 +97,10 @@
   }
 }
+.drawer-footer-nav {
+  @apply border-t border-border-default pt-2 pb-1 px-0;
+}
 .drawer-nav {
   @apply flex-1 overflow-y-auto overflow-x-hidden py-2;
@@ -54,6 +122,17 @@
   }
 }
+.drawer-section-label {
+  /* Demo (.og-sidebar__section sau override): 10.5px, text-faint, giãn chữ
+     .08em và KHÔNG viết hoa — override đặt `text-transform: none`. */
+  @apply px-large pt-4 pb-1 text-[10.5px]/[1.4] font-semibold text-faint select-none;
+  letter-spacing: var(--og-tracking-label);
+}
+.drawer-section-rule {
+  @apply mx-3 my-3 border-t border-border-default;
+}
 .drawer-item-wrapper {
   @apply relative;
 }
@@ -62,15 +141,35 @@
   @apply flex items-center mt-1 w-full min-h-8 py-2 px-large border-none bg-transparent cursor-pointer no-underline text-text-primary relative rounded;
   transition: all 200ms ease;
+  /* Hover = glass mờ hơn: chỉ translucent, chưa có viền/shadow, để không
+     nhầm với hàng đang chọn. */
   &:hover {
-    @apply bg-bg-hover text-text-primary scale-95;
+    @apply text-text-primary scale-95;
+    background: rgb(var(--og-surface-raised) / 0.5);
   }
+  /* Hàng đang chọn = GLASS, KHÔNG dùng màu primary (anh Tú chốt 31/08):
+     một tấm surface trong suốt nổi trên nền secondary của drawer + viền
+     hairline + shadow nhẹ. Chữ/icon giữ màu text thường.
+     - surface-RAISED (không phải surface) vì ở charcoal raised (#211c1b)
+       sáng hơn page-bg (#0e0e10) nên tấm kính vẫn nổi; ở porcelain cả hai
+       đều là trắng nên không khác gì.
+     - Viền vẽ bằng inset box-shadow chứ không phải `border`: .drawer-item
+       khai border-none, thêm border thật sẽ đẩy layout 1px.
+     - backdrop-blur chỉ có tác dụng khi nền sau có hoạ tiết/gradient; nền
+       phẳng thì hiệu ứng đến từ độ trong + viền + shadow. */
   &.active {
-    @apply bg-gradient-primary text-white font-medium;
+    @apply text-text-primary font-medium;
+    background: rgb(var(--og-surface-raised) / 0.8);
+    backdrop-filter: blur(12px);
+    /* shadow viết literal chứ không dùng var(--shadow-sm): biến đó do @theme
+       của Tailwind sinh, không chắc có mặt trong scope của component SCSS. */
+    box-shadow:
+      inset 0 0 0 1px rgb(var(--og-border)),
+      0 1px 2px 0 rgb(var(--shadow-color) / 0.05);
-    .item-icon {
-      @apply text-white;
+    &:hover {
+      background: rgb(var(--og-surface-raised) / 0.95);
     }
   }
@@ -114,21 +213,10 @@
 .drawer-version {
   @apply flex items-center justify-center py-3 px-4 text-text-placeholder text-[11px] border-t border-border-default select-none;
-  font-family: 'Roboto', monospace;
+  font-family: var(--og-font-mono);
 }
 .drawer-version-dot {
   @apply block w-1.5 h-1.5 rounded-full bg-text-placeholder;
 }
-/* Collapsed mode: center the icons */
-.drawer-container[style*='width: 64px'] {
-  .drawer-item {
-    @apply justify-center;
-    padding-left: 16px !important;
-  }
-  .item-content {
-    @apply justify-center;
-  }
-}

package/src/lib/ui/components/facets-rail/facets-rail.component.html ADDED Viewed

@@ -0,0 +1,37 @@
+<div class="flex flex-col gap-large">
+  @if (hasSelection()) {
+    <button type="button" class="txt-link self-end" (click)="reset()">
+      {{ resetLabel() }}
+    </button>
+  }
+  @for (group of groups(); track group.id) {
+    <div role="group" [attr.aria-label]="group.label">
+      <div class="txt-eyebrow mb-small">{{ group.label }}</div>
+      <div class="flex flex-col gap-xs">
+        @for (option of group.options; track option.value) {
+          <button
+            type="button"
+            (click)="toggle(group, option)"
+            [attr.aria-pressed]="isSelected(group, option)"
+            class="flex items-center gap-normal px-normal py-small rounded-control text-left transition-colors"
+            [ngClass]="
+              isSelected(group, option)
+                ? 'bg-accent-soft text-accent-soft-fg font-medium'
+                : 'text-body hover:bg-surface-sunken'
+            "
+          >
+            @if (option.tone) {
+              <fx-ui-status-dot [tone]="option.tone" [size]="7" />
+            }
+            <span class="text-sm truncate flex-1">{{ option.label }}</span>
+            @if (option.count !== undefined) {
+              <span class="txt-tag-label text-faint" style="font-family: var(--og-font-figure)">
+                {{ option.count }}
+              </span>
+            }
+          </button>
+        }
+      </div>
+    </div>
+  }
+</div>

package/src/lib/ui/components/filter-pills/filter-pills.component.html ADDED Viewed

@@ -0,0 +1,16 @@
+<div class="flex flex-wrap items-center gap-small">
+  @for (option of options(); track option.value) {
+    <button
+      type="button"
+      [attr.aria-pressed]="isActive(option)"
+      class="flex items-center gap-small px-semi py-xs rounded-full border txt-utility-caption font-bold cursor-pointer transition-colors"
+      [ngClass]="pillClass(option)"
+      (click)="valueChange.emit(option.value)"
+    >
+      {{ option.label }}
+      @if (option.count !== null && option.count !== undefined) {
+        <span [ngClass]="countClass(option)" style="font-family: var(--og-font-figure)">{{ option.count }}</span>
+      }
+    </button>
+  }
+</div>

package/src/lib/ui/components/kanban-board/kanban-board.component.scss CHANGED Viewed

@@ -10,20 +10,20 @@
 }
 .kanban-column {
-  @apply flex flex-col min-w-[300px] bg-gray-50 dark:bg-gray-800 rounded-lg;
+  @apply flex flex-col min-w-[300px] bg-surface-sunken rounded-lg;
   flex-shrink: 0;
 }
 .kanban-column-header {
-  @apply flex items-center justify-between p-4 border-b border-gray-200 dark:border-gray-700;
+  @apply flex items-center justify-between p-4 border-b border-border;
 }
 .kanban-column-title {
-  @apply text-lg font-semibold text-gray-900 dark:text-gray-100 m-0;
+  @apply text-lg font-semibold text-strong m-0;
 }
 .kanban-column-count {
-  @apply px-2 py-1 text-sm font-medium bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 rounded-full;
+  @apply px-2 py-1 text-sm font-medium bg-neutral-soft text-neutral-soft-fg rounded-full;
 }
 .kanban-column-content {
@@ -32,7 +32,7 @@
 }
 .kanban-item {
-  @apply bg-white dark:bg-gray-700 rounded-lg shadow-sm border border-gray-200 dark:border-gray-600;
+  @apply bg-surface-raised rounded-lg shadow-sm border border-border;
   @apply transition-shadow duration-200;
   cursor: move;
@@ -42,18 +42,18 @@
 }
 .kanban-item-default {
-  @apply p-4 text-gray-900 dark:text-gray-100;
+  @apply p-4 text-strong;
 }
 .kanban-item-placeholder {
-  @apply bg-gray-200 dark:bg-gray-600 rounded-lg border-2 border-dashed border-gray-400 dark:border-gray-500;
+  @apply bg-neutral-soft rounded-lg border-2 border-dashed border-border-strong;
   @apply opacity-50;
   min-height: 60px;
 }
 .kanban-column-empty {
-  @apply flex items-center justify-center h-32 text-gray-400 dark:text-gray-500 text-sm;
-  @apply border-2 border-dashed border-gray-300 dark:border-gray-600 rounded-lg;
+  @apply flex items-center justify-center h-32 text-faint text-sm;
+  @apply border-2 border-dashed border-border rounded-lg;
 }
 // CDK Drag and Drop Styles

package/src/lib/ui/components/list-row/list-row.component.html ADDED Viewed

@@ -0,0 +1,20 @@
+<div class="flex items-center gap-normal min-w-0">
+  @if (dotTone() !== undefined) {
+    <fx-ui-status-dot [tone]="dotTone() ?? null" [pulse]="dotPulse()" />
+  }
+  <span class="txt-body-medium-01 truncate flex-1">{{ title() }}</span>
+  @for (badge of badges(); track badge.label) {
+    <span
+      class="txt-tag-label px-normal py-[1px] rounded-pill whitespace-nowrap"
+      [ngClass]="badgeClass(badge)"
+    >
+      {{ badge.label }}
+    </span>
+  }
+</div>
+@if (meta()) {
+  <div class="txt-utility-description mt-xs truncate" [class.ml-large]="dotTone() !== undefined">
+    {{ meta() }}
+  </div>
+}
+<ng-content></ng-content>