@foxeltech/angular-ui 0.4.0 → 0.7.75

package/src/lib/ui/components/section-card/section-card.component.html

@@ -1,9 +1,18 @@
 <div class="card-common">
-  <div class="flex items-center gap-normal mb-large">
-    @if (icon) {
-      <fx-ui-hero-icon [ngClass]="iconClass" [icon]="icon" [size]="18"></fx-ui-hero-icon>
-    }
-    <span class="txt-heading-06">{{ title() }}</span>
-  </div>
+  @if (titleStyle() === 'eyebrow') {
+    <div class="flex items-baseline justify-between gap-normal mb-large">
+      <span class="txt-eyebrow">{{ title() }}</span>
+      @if (aside()) {
+        <span class="txt-utility-description text-right">{{ aside() }}</span>
+      }
+    </div>
+  } @else {
+    <div class="flex items-center gap-normal mb-large">
+      @if (icon) {
+        <fx-ui-hero-icon [ngClass]="iconClass" [icon]="icon" [size]="18"></fx-ui-hero-icon>
+      }
+      <span class="txt-heading-06">{{ title() }}</span>
+    </div>
+  }
   <ng-content></ng-content>
 </div>

package/src/lib/ui/components/segmented/segmented.component.html

@@ -0,0 +1,42 @@
+<div
+  class="relative inline-grid max-w-full grid-flow-col auto-cols-fr items-stretch p-[3px] bg-surface-sunken border border-border rounded-full"
+  role="group"
+  [attr.aria-label]="ariaLabel()"
+>
+  <!-- Sliding thumb: one element that translates to the active option -->
+  @if (activeIndex() >= 0) {
+    <span
+      aria-hidden="true"
+      class="fx-segmented__thumb absolute top-[3px] bottom-[3px] left-[3px] rounded-full pointer-events-none"
+      [class]="thumbClass()"
+      [style.width]="thumbWidth()"
+      [style.transform]="thumbTransform()"
+    ></span>
+  }
+  @for (option of options(); track option.value) {
+    <button
+      type="button"
+      (click)="select(option)"
+      [disabled]="option.disabled"
+      [attr.aria-pressed]="option.value === value()"
+      class="relative z-[1] flex min-w-0 items-center justify-center gap-xs px-semi py-[5px] rounded-full text-[13px] leading-none font-medium whitespace-nowrap transition-colors duration-200 disabled:opacity-50 disabled:cursor-not-allowed"
+      [class]="optionClass(option)"
+    >
+      @if (option.icon) {
+        <fx-ui-hero-icon [icon]="option.icon" [size]="14" class="flex" />
+      }
+      <!-- text-box trims Archivo's uneven leading → true optical centering
+           (Chrome 128+/Safari 18.2+; older browsers ignore it harmlessly).
+           truncate adds overflow:hidden, and the trimmed box ends at cap
+           height / baseline — so the dot on "i" and the tail on "y" fall
+           outside it and get clipped. py/-my pair gives both back without
+           changing the control's height. -->
+      <span class="min-w-0 truncate py-[3px] -my-[3px] [text-box:trim-both_cap_alphabetic]">{{ option.label }}</span>
+      @if (option.count !== undefined) {
+        <span class="txt-tag-label px-small rounded-pill bg-neutral-soft text-neutral-soft-fg">
+          {{ option.count }}
+        </span>
+      }
+    </button>
+  }
+</div>

package/src/lib/ui/components/segmented/segmented.component.scss

@@ -0,0 +1,12 @@
+/* The thumb's motion is owned HERE, not by template utilities: consuming apps
+   can (and do — host theme fade) ship unlayered global `transition` rules that
+   override the Tailwind utilities layer and freeze the slide. Component styles
+   are unlayered + scoped, so they win. (anh Tú 29/08) */
+.fx-segmented__thumb {
+  transition: transform 0.2s cubic-bezier(0.2, 0.9, 0.2, 1), width 0.2s cubic-bezier(0.2, 0.9, 0.2, 1);
+  will-change: transform;
+
+  @media (prefers-reduced-motion: reduce) {
+    transition: none;
+  }
+}

package/src/lib/ui/components/skeleton-dashboard/skeleton-dashboard.component.html

@@ -0,0 +1,24 @@
+<div class="flex flex-col gap-xl">
+  <div class="grid gap-xl grid-cols-2 md:grid-cols-4">
+    @for (k of kpiList(); track k) {
+      <div class="card-common flex flex-col gap-normal">
+        <div class="h-3 w-16 rounded skeleton-load"></div>
+        <div class="h-7 w-24 rounded skeleton-load"></div>
+        <div class="h-3 w-20 rounded skeleton-load"></div>
+      </div>
+    }
+  </div>
+
+  <div class="grid gap-xl grid-cols-1 md:grid-cols-2">
+    @for (p of panelList(); track p) {
+      <div class="card-common flex flex-col gap-large">
+        <div class="h-4 w-1/3 rounded skeleton-load"></div>
+        <div class="flex items-end gap-normal h-40">
+          @for (b of barList(); track b) {
+            <div class="flex-1 rounded-t skeleton-load" [style.height.%]="barHeight(b)"></div>
+          }
+        </div>
+      </div>
+    }
+  </div>
+</div>

package/src/lib/ui/components/skeleton-detail/skeleton-detail.component.html

@@ -1,20 +1,20 @@
-<div class="flex flex-col gap-xl animate-pulse">
+<div class="flex flex-col gap-xl">
   <div class="card-common">
     <div class="flex items-start gap-normal">
-      <div class="w-10 h-10 rounded-lg bg-bg-hover shrink-0"></div>
+      <div class="w-10 h-10 rounded-lg skeleton-load shrink-0"></div>
       <div class="flex-1 min-w-0 flex flex-col gap-normal">
-        <div class="h-5 w-1/2 rounded bg-bg-hover"></div>
-        <div class="h-3 w-3/4 rounded bg-bg-hover"></div>
+        <div class="h-5 w-1/2 rounded skeleton-load"></div>
+        <div class="h-3 w-3/4 rounded skeleton-load"></div>
       </div>
     </div>
   </div>
 
-  @for (c of range(cards()); track c) {
+  @for (c of cardList(); track c) {
     <div class="card-common flex flex-col gap-large">
-      <div class="h-4 w-1/3 rounded bg-bg-hover"></div>
+      <div class="h-4 w-1/3 rounded skeleton-load"></div>
       <div class="flex flex-col gap-normal">
-        @for (r of range(rows()); track r) {
-          <div class="h-3 rounded bg-bg-hover" [style.width.%]="rowWidth(r)"></div>
+        @for (r of rowList(); track r) {
+          <div class="h-3 rounded skeleton-load" [style.width.%]="rowWidth(r)"></div>
         }
       </div>
     </div>

package/src/lib/ui/components/skeleton-facets/skeleton-facets.component.html

@@ -0,0 +1,15 @@
+<div class="flex flex-col gap-xl">
+  @for (g of groupList(); track g) {
+    <div class="flex flex-col gap-normal">
+      <div class="h-3 w-20 rounded skeleton-load"></div>
+      <div class="flex flex-col gap-small">
+        @for (r of rowList(); track r) {
+          <div class="flex items-center gap-normal">
+            <div class="w-3.5 h-3.5 rounded skeleton-load shrink-0"></div>
+            <div class="h-3 rounded skeleton-load" [style.width.%]="rowWidth(r)"></div>
+          </div>
+        }
+      </div>
+    </div>
+  }
+</div>

package/src/lib/ui/components/skeleton-frame/skeleton-frame.component.html

@@ -0,0 +1,59 @@
+<div class="flex h-screen w-full overflow-hidden bg-bg-primary">
+  <!-- drawer -->
+  <div
+    class="hidden md:flex w-[260px] shrink-0 flex-col gap-xl border-r border-border-subtle p-semi"
+  >
+    <div class="flex items-center gap-normal">
+      <div class="w-6 h-6 rounded skeleton-load shrink-0"></div>
+      <div class="flex flex-col gap-small flex-1 min-w-0">
+        <div class="h-3.5 w-20 rounded skeleton-load"></div>
+        <div class="h-2.5 w-full rounded skeleton-load"></div>
+      </div>
+    </div>
+
+    <div class="flex flex-col gap-small">
+      @for (n of navList(); track n) {
+        <div class="flex items-center gap-normal py-1">
+          <div class="w-4 h-4 rounded skeleton-load shrink-0"></div>
+          <div class="h-3 rounded skeleton-load" [style.width.%]="navWidth(n)"></div>
+        </div>
+      }
+    </div>
+
+    <div class="mt-auto flex items-center gap-normal border-t border-border-subtle pt-semi">
+      <div class="w-8 h-8 rounded-full skeleton-load shrink-0"></div>
+      <div class="flex flex-col gap-small flex-1 min-w-0">
+        <div class="h-3 w-24 rounded skeleton-load"></div>
+        <div class="h-2.5 w-32 rounded skeleton-load"></div>
+      </div>
+    </div>
+  </div>
+
+  <div class="flex flex-1 min-w-0 flex-col">
+    <!-- topbar -->
+    <div
+      class="flex h-14 shrink-0 items-center gap-normal border-b border-border-subtle px-semi"
+    >
+      <div class="h-3.5 w-40 rounded skeleton-load"></div>
+      <div class="ml-auto h-8 w-32 rounded-lg skeleton-load"></div>
+    </div>
+
+    <!-- content: dựng đúng composition của route đích nếu đã biết -->
+    <div class="flex-1 min-h-0 overflow-hidden p-semi">
+      @if (contentHint(); as hint) {
+        <fx-ui-route-skeleton [hint]="hint" />
+      } @else {
+        <div class="flex flex-col gap-xl">
+          <div class="h-6 w-1/4 rounded skeleton-load"></div>
+          <div class="grid gap-xl grid-cols-2 md:grid-cols-4">
+            <div class="h-24 rounded-lg skeleton-load"></div>
+            <div class="h-24 rounded-lg skeleton-load"></div>
+            <div class="h-24 rounded-lg skeleton-load"></div>
+            <div class="h-24 rounded-lg skeleton-load"></div>
+          </div>
+          <div class="h-64 rounded-lg skeleton-load"></div>
+        </div>
+      }
+    </div>
+  </div>
+</div>

package/src/lib/ui/components/skeleton-list/skeleton-list.component.html

@@ -1,12 +1,12 @@
-<div class="flex flex-col gap-normal animate-pulse">
-  @for (r of range(rows()); track r) {
+<div class="flex flex-col gap-normal">
+  @for (r of rowList(); track r) {
     <div class="rounded-lg border border-border-default p-semi">
       <div class="flex items-center gap-normal mb-small">
-        <div class="w-8 h-8 rounded-lg bg-bg-hover shrink-0"></div>
-        <div class="h-4 flex-1 rounded bg-bg-hover"></div>
-        <div class="h-5 w-12 rounded-full bg-bg-hover shrink-0"></div>
+        <div class="w-8 h-8 rounded-lg skeleton-load shrink-0"></div>
+        <div class="h-4 flex-1 rounded skeleton-load"></div>
+        <div class="h-5 w-12 rounded-full skeleton-load shrink-0"></div>
       </div>
-      <div class="h-3 w-3/4 rounded bg-bg-hover"></div>
+      <div class="h-3 w-3/4 rounded skeleton-load"></div>
     </div>
   }
 </div>

package/src/lib/ui/components/slider/slider.component.html

@@ -18,8 +18,8 @@
       [ngClass]="{ 'flex-col h-48': vertical() }"
       >
       <div
-        class="relative flex-1 rounded-full bg-gray-600 h-2"
-        [ngClass]="{ 'w-1 rotate-0 h-full w-auto bg-border-gray-700': vertical() }"
+        class="relative flex-1 rounded-full bg-track h-2"
+        [ngClass]="{ 'w-1 rotate-0 h-full w-auto bg-track': vertical() }"
         >
         @if (!vertical()) {
           <div

package/src/lib/ui/components/sparkbar/sparkbar.component.html

@@ -0,0 +1,14 @@
+<div
+  class="flex items-end gap-[2px]"
+  [style.height.px]="height()"
+  role="img"
+  [attr.aria-label]="'Trend: ' + values().join(', ')"
+>
+  @for (bar of bars(); track $index) {
+    <div
+      class="flex-1 min-w-[3px] rounded-[1px] opacity-80"
+      [ngClass]="barClass()"
+      [style.height.%]="bar"
+    ></div>
+  }
+</div>

package/src/lib/ui/components/stage-dots/stage-dots.component.html

@@ -0,0 +1,13 @@
+<div class="flex items-center gap-xs" role="tablist">
+  @for (i of dots(); track i) {
+    <button
+      type="button"
+      role="tab"
+      [attr.aria-selected]="i === current()"
+      [attr.aria-label]="'Stage ' + (i + 1)"
+      class="h-1.5 rounded-full cursor-pointer transition-all duration-150 hover:opacity-70"
+      [ngClass]="dotClass(i)"
+      (click)="dotClick.emit(i)"
+    ></button>
+  }
+</div>

package/src/lib/ui/components/stat-cards/stat-cards.component.html

@@ -1,18 +1,51 @@
 <div class="grid gap-normal" [ngStyle]="{ 'grid-template-columns': gridColumns }">
   @for (card of cards(); track card.label) {
-    <div class="card-common flex items-center gap-normal">
-      @if (card.icon) {
-        <div
-          class="w-10 h-10 rounded-lg flex items-center justify-center shrink-0"
-          [ngClass]="boxClass(card)"
+    @if (variant() === 'figure') {
+      <div class="card-common flex flex-col gap-small min-w-0">
+        <span class="txt-utility-caption text-text-secondary truncate">{{ card.label }}</span>
+        <span
+          class="txt-heading-03"
+          [ngClass]="numClass(card)"
+          style="font-family: var(--og-font-figure)"
+          >{{ card.value }}</span
         >
-          <fx-ui-hero-icon [icon]="card.icon" [size]="20"></fx-ui-hero-icon>
+        @if (card.sub) {
+          <span class="txt-utility-caption" [ngClass]="subClass(card)">{{ card.sub }}</span>
+        }
+        @if (card.spark?.length) {
+          <fx-ui-sparkbar class="mt-xs" [values]="card.spark!" [height]="16" [tone]="card.tone ?? null" />
+        }
+      </div>
+    } @else {
+      <div class="card-common flex items-center gap-normal">
+        @if (card.icon) {
+          <div
+            class="w-10 h-10 rounded-lg flex items-center justify-center shrink-0"
+            [ngClass]="boxClass(card)"
+          >
+            <fx-ui-hero-icon [icon]="card.icon" [size]="20"></fx-ui-hero-icon>
+          </div>
+        }
+        <div class="flex flex-col min-w-0 flex-1">
+          <div class="flex items-baseline gap-small">
+            <span
+              class="txt-heading-04"
+              [ngClass]="numClass(card)"
+              style="font-family: var(--og-font-figure)"
+              >{{ card.value }}</span
+            >
+            @if (card.delta) {
+              <span class="text-xs font-semibold" [ngClass]="deltaClass(card)">
+                {{ card.delta.direction === 'up' ? '▲' : '▼' }} {{ card.delta.value }}
+              </span>
+            }
+          </div>
+          <span class="txt-utility-caption text-text-secondary truncate">{{ card.label }}</span>
+          @if (card.spark?.length) {
+            <fx-ui-sparkbar class="mt-xs" [values]="card.spark!" [height]="16" [tone]="card.tone ?? null" />
+          }
         </div>
-      }
-      <div class="flex flex-col min-w-0">
-        <span class="txt-heading-04" [ngClass]="numClass(card)">{{ card.value }}</span>
-        <span class="txt-utility-caption text-text-secondary truncate">{{ card.label }}</span>
       </div>
-    </div>
+    }
   }
 </div>

package/src/lib/ui/components/status-dot/status-dot.component.html

@@ -0,0 +1,13 @@
+<span
+  class="relative inline-flex shrink-0"
+  [style.width.px]="size()"
+  [style.height.px]="size()"
+>
+  @if (pulse()) {
+    <span
+      class="absolute inline-flex h-full w-full rounded-full opacity-60 animate-ping motion-reduce:animate-none"
+      [ngClass]="dotClass()"
+    ></span>
+  }
+  <span class="relative inline-flex h-full w-full rounded-full" [ngClass]="dotClass()"></span>
+</span>

package/src/lib/ui/components/switch/switch.component.html

@@ -6,7 +6,7 @@
   [disabled]="disabled"
   class="relative flex items-center w-10 h-5 rounded-full transition-colors duration-300 cursor-pointer disabled:cursor-not-allowed focus-visible:ring-2 focus-visible:ring-primary/50"
   [ngClass]="{
-    'bg-success': value && !disabled,
+    'tone-solid-success': value && !disabled,
     'bg-button-default': !value && !disabled,
     'bg-bg-hover': disabled
   }"

package/src/lib/ui/components/tab-group/tab-group.component.html

@@ -26,8 +26,14 @@
     #tabList
     role="tablist"
     class="relative flex overflow-x-auto no-scrollbar scroll-smooth"
+    [class.fx-tabs-frame]="variant() === 'page'"
     (scroll)="onScroll()"
     >
+    <!-- 'page' variant: one raised pill that SLIDES to the active tab
+         (anh Tú 29/08 — same motion as fx-ui-segmented) -->
+    @if (variant() === 'page') {
+      <span #pagePill aria-hidden="true" class="fx-tabs-pill"></span>
+    }
     @for (tab of tabs(); track tab; let i = $index) {
       <button
         type="button"
@@ -37,31 +43,54 @@
         (click)="selectTab(i)"
         (keydown)="onTabKeydown($event, i)"
         class="tab-btn tab-bar-btn"
+        [class.tab-bar-btn-page]="variant() === 'page'"
         >
-        <div class="flex flex-row items-center justify-center">
+        <div class="flex flex-row items-center justify-center gap-xs">
           @if (tab.icon) {
             <fx-ui-hero-icon
               [icon]="tab.icon"
-              [size]="20"
+              [size]="variant() === 'page' ? 14 : 20"
               class="flex mr-[2px]"
-            [ngClass]="{
-              'text-gradient-primary-start mb-small': i === activeIndex,
-              'text-text-placeholder': i !== activeIndex,
-            }"
+              [ngClass]="
+                variant() === 'page'
+                  ? i === activeIndex
+                    ? 'text-strong'
+                    : 'text-text-placeholder'
+                  : i === activeIndex
+                    ? 'text-accent-fg mb-small'
+                    : 'text-text-placeholder'
+              "
             ></fx-ui-hero-icon>
           }
           <div
           [ngClass]="
-            i === activeIndex ? 'txt-field-label text-gradient-primary-start' : 'txt-placeholder'
+            variant() === 'page'
+              ? i === activeIndex
+                ? 'text-[13px] leading-none font-semibold text-strong [text-box:trim-both_cap_alphabetic]'
+                : 'text-[13px] leading-none font-medium text-muted [text-box:trim-both_cap_alphabetic]'
+              : i === activeIndex
+                ? 'txt-field-label text-accent-fg'
+                : 'txt-placeholder'
           "
             >
             {{ tab.label() }}
           </div>
+          @if (tab.count() !== null) {
+            <span
+              class="txt-tag-label px-normal py-[1px] rounded-pill"
+              [ngClass]="badgeClass(tab)"
+              style="font-family: var(--og-font-figure)"
+              >
+              {{ tab.count() }}
+            </span>
+          }
         </div>
       </button>
     }
 
-    <span #underline class="underline" style="width: 0; transform: translateX(0)"></span>
+    @if (variant() !== 'page') {
+      <span #underline class="underline" style="width: 0; transform: translateX(0)"></span>
+    }
   </div>
 
   <button

package/src/lib/ui/components/tab-group/tab-group.component.scss

@@ -28,7 +28,7 @@
   position: absolute;
   bottom: 0;
   height: 2px;
-  background-color: rgb(var(--gradient-primary-start));
+  background-color: rgb(var(--og-accent));
   transition: transform 0.25s cubic-bezier(0.2, 0.9, 0.2, 1),
     width 0.25s cubic-bezier(0.2, 0.9, 0.2, 1);
   will-change: transform, width;
@@ -49,3 +49,43 @@
 .tab-bar-btn {
   @apply relative px-large py-normal text-sm whitespace-nowrap transition-colors duration-200;
 }
+
+/* V2 'page' variant: workspace tab strip — pills inside a rounded frame
+   (design refs 02..04), active pill lifted on the raised surface. */
+.fx-tabs-frame {
+  /* w-fit: the frame hugs its tabs (design refs 02..04) instead of spanning the
+     page; max-w-full keeps the inner scroll working when tabs overflow.
+     rounded-full: the design strip is a capsule in every theme, not the
+     theme control radius (refs 02..04 — anh Tú 28/08). */
+  @apply gap-xs p-[3px] w-fit max-w-full bg-surface-sunken border border-border rounded-full;
+}
+
+.tab-bar-btn-page {
+  /* py 5px: the design strip is slim (~36px capsule) — anh Tú 28/08.
+     The active background lives on .fx-tabs-pill (sliding thumb), so the
+     button itself only switches text colour. z-index keeps it above the pill. */
+  @apply px-semi py-[5px] rounded-full border border-transparent text-muted z-[1];
+
+  &[aria-selected='false']:hover {
+    @apply text-strong;
+  }
+}
+
+/* Sliding active pill for the 'page' variant — positioned from the active
+   tab's offsetLeft/offsetWidth (tabs hug content, widths differ), so it
+   scrolls with the strip and needs no scroll-time recompute. */
+.fx-tabs-pill {
+  @apply absolute rounded-full bg-surface-raised border border-border shadow-sm pointer-events-none;
+  top: 3px; /* frame p-[3px] inset */
+  bottom: 3px;
+  left: 0;
+  width: 0;
+  transform: translateX(0);
+  transition:
+    transform 0.25s cubic-bezier(0.2, 0.9, 0.2, 1),
+    width 0.25s cubic-bezier(0.2, 0.9, 0.2, 1);
+  will-change: transform, width;
+  @media (prefers-reduced-motion: reduce) {
+    transition: none;
+  }
+}

package/src/lib/ui/components/tag/tag.component.html

@@ -11,13 +11,13 @@
 >
   @if (icon) {
     <fx-ui-hero-icon
-      [class]="`flex txt-tag-${type()} ${solid() && type() !== 'default' ? 'text-white' : ''}`"
+      [class]="`flex txt-tag-${type()} ${solid() && type() !== 'default' ? 'text-surface' : ''}`"
       [icon]="icon"
       [size]="18"
     ></fx-ui-hero-icon>
   }
 
-  <div [class]="`txt-tag-${type()} ${solid() && type() !== 'default' ? 'text-white font-medium' : ''}`">
+  <div [class]="`txt-tag-${type()} ${solid() && type() !== 'default' ? 'text-surface font-medium' : ''}`">
     {{ label() }}
   </div>
 </div>

package/src/lib/ui/components/theme-picker/theme-picker.component.html

@@ -0,0 +1,44 @@
+<button
+  type="button"
+  [matMenuTriggerFor]="themeMenu"
+  class="flex items-center gap-small px-normal py-small rounded-control border border-border-default bg-transparent cursor-pointer hover:bg-bg-hover transition-colors"
+  aria-label="Change theme"
+>
+  <span
+    class="w-4 h-4 rounded-full border border-border-strong/30 shrink-0"
+    [style.background]="
+      'linear-gradient(135deg, ' +
+      currentMeta().accent +
+      ' 50%, ' +
+      currentMeta().pageBg +
+      ' 50%)'
+    "
+  ></span>
+  <span class="txt-body-01 hidden md:inline">{{ currentMeta().label }}</span>
+  <fx-ui-hero-icon icon="chevron-down" [size]="14" class="flex text-text-secondary" />
+</button>
+
+<mat-menu #themeMenu="matMenu">
+  @for (theme of themes; track theme.name) {
+    <button
+      mat-menu-item
+      type="button"
+      (click)="select(theme.name)"
+      [attr.aria-current]="theme.name === current() ? 'true' : null"
+    >
+      <div class="flex items-center gap-normal min-w-40">
+        <span
+          class="w-5 h-5 rounded-full border border-border-strong/30 shrink-0"
+          [style.background]="
+            'linear-gradient(135deg, ' + theme.accent + ' 50%, ' + theme.pageBg + ' 50%)'
+          "
+        ></span>
+        <span class="txt-body-01 flex-1">{{ theme.label }}</span>
+        <span class="txt-utility-description">{{ theme.dark ? 'Dark' : 'Light' }}</span>
+        @if (theme.name === current()) {
+          <fx-ui-hero-icon icon="check" [size]="16" class="flex text-text-selected" />
+        }
+      </div>
+    </button>
+  }
+</mat-menu>

package/src/lib/ui/components/toast/toast.component.html

@@ -4,8 +4,8 @@
   [attr.role]="type() === 'error' ? 'alert' : 'status'"
   class="flex border-l-[3px] items-center bg-bg-primary gap-semi min-w-[250px] max-w-[400px] px-large py-semi rounded shadow-lg transition-all duration-300 ease-in-out transform opacity-100 translate-y-0"
   [ngClass]="{
-    'border-success': type() === 'success',
-    'border-critical': type() === 'error',
+    'tone-border-success': type() === 'success',
+    'tone-border-danger': type() === 'error',
     'border-warning': type() === 'warning',
     'border-information': type() === 'info'
   }"
@@ -16,28 +16,28 @@
         icon="check-circle"
         [solid]="true"
         [size]="30"
-        class="text-success"
+        class="tone-fg-success"
       ></fx-ui-hero-icon>
       } @case('error') {
       <fx-ui-hero-icon
         icon="exclamation-circle"
         [solid]="true"
         [size]="30"
-        class="text-critical"
+        class="tone-fg-danger"
       ></fx-ui-hero-icon>
       } @case('warning') {
       <fx-ui-hero-icon
         icon="exclamation-triangle"
         [solid]="true"
         [size]="30"
-        class="text-warning"
+        class="tone-fg-warning"
       ></fx-ui-hero-icon>
       } @default {
       <fx-ui-hero-icon
         icon="information-circle"
         [solid]="true"
         [size]="30"
-        class="text-information"
+        class="tone-fg-information"
       ></fx-ui-hero-icon>
       } }
     </div>

package/src/lib/ui/components/tree-diagram/tree-diagram.component.html

@@ -3,7 +3,7 @@
   <!-- ROOT -->
   <div
     #root
-    class="mx-auto w-fit bg-blue-600 text-white px-7 py-3 rounded-md font-semibold text-center"
+    class="mx-auto w-fit bg-accent text-accent-contrast px-7 py-3 rounded-md font-semibold text-center"
     >
     {{ data().label }}
   </div>
@@ -13,7 +13,7 @@
     @for (child of data().children; track child) {
       <div
         #child
-        class="w-48 bg-rose-600 text-white px-4 py-4 rounded-lg text-center"
+        class="w-48 bg-surface-raised text-strong border border-border px-4 py-4 rounded-lg text-center"
         >
         <div class="font-semibold text-lg">{{ child.label }}</div>
         <div class="mt-1 text-sm opacity-90">{{ child.status }}</div>
@@ -33,7 +33,7 @@
         [attr.y1]="line.y1"
         [attr.x2]="line.x2"
         [attr.y2]="line.y2"
-        stroke="#1f2937"
+        stroke="rgb(var(--og-border-strong))"
         stroke-width="2"
         />
     }