@africanies/angular-web-sdk 0.1.5 → 0.1.7

package/dist/libs/africanies-ui/types/africanies-africanies-ui.d.ts

@@ -17,13 +17,14 @@ import { IsActiveMatchOptions, ActivatedRouteSnapshot, Router, UrlTree } from '@
  * Visual emphasis for {@link ButtonComponent}.
  *
  * - `primary` — filled mode accent (SFN green / STN orange) for the main action
- * - `secondary` — outlined chrome for secondary actions
+ * - `secondary` — stroked mode accent (white + mode border/text; portal `.btn-stroked`)
+ * - `flat` — neutral chrome (white + ink + soft border; portal `.btn-flat`)
  * - `ghost` — neutral text-only for low-emphasis actions (Cancel, tertiary)
  * - `ghost-primary` — text-only mode accent (SFN green / STN orange)
  * - `ghost-danger` — text-only destructive actions (Clear, Remove)
  * - `danger` — destructive confirmations and deletes
  */
-type ButtonVariant = 'primary' | 'secondary' | 'ghost' | 'ghost-primary' | 'ghost-danger' | 'underline' | 'danger';
+type ButtonVariant = 'primary' | 'secondary' | 'flat' | 'ghost' | 'ghost-primary' | 'ghost-danger' | 'underline' | 'danger';
 /**
  * Control size for {@link ButtonComponent}.
  */
@@ -3590,9 +3591,10 @@ interface AfricaniesSideNavItem {
 /**
  * App shell side navigation with icons, nested items, and a collapsible rail.
  *
- * **Design - ink spine:** a continuous mode-accent edge with soft active
- * highlights. Collapsed mode keeps icons; hover opens a floating label blade
- * (name + children) instead of a plain tooltip.
+ * **Design - ink spine:** a continuous mode-accent edge; active leaves use
+ * primary fill + white text (portal parity); expanded parents of an active
+ * child use primary text on white. Collapsed mode keeps icons; hover opens a
+ * floating label blade (name + children) instead of a plain tooltip.
  *
  * ## Parent items with children
  * **Expanded rail:** branches start open by default (`expandBranchesByDefault`).
@@ -3923,7 +3925,7 @@ declare class ShippingModeSwitchComponent {
     /** Active mode from {@link ShippingModeService}. */
     protected readonly mode: _angular_core.Signal<ShippingMode>;
     /** Host padding / divider — tighter when the rail is collapsed. */
-    protected readonly hostClass: _angular_core.Signal<"block shrink-0 border-t border-border px-1.5 py-3 dark:border-white/10" | "block shrink-0 border-t border-border px-2 py-3 dark:border-white/10">;
+    protected readonly hostClass: _angular_core.Signal<"block shrink-0 border-t border-strong px-1.5 py-3 dark:border-white/10" | "block shrink-0 border-t border-strong px-2 py-3 dark:border-white/10">;
     /**
      * Requests a mode change through {@link ShippingModeService.requestModeChange}
      * so feature guards (e.g. Create Shipment confirm) can run first.
@@ -4122,6 +4124,7 @@ declare class NotificationDrawerPanel {
     private observer;
     protected readonly viewLinkClass: _angular_core.Signal<"inline-flex cursor-pointer items-center gap-1 self-start text-caption font-semibold underline underline-offset-[3px] transition-colors text-import decoration-import/35 hover:decoration-import dark:text-import-light dark:decoration-import-light/40 dark:hover:decoration-import-light" | "inline-flex cursor-pointer items-center gap-1 self-start text-caption font-semibold underline underline-offset-[3px] transition-colors text-export decoration-export/35 hover:decoration-export dark:text-export-light dark:decoration-export-light/40 dark:hover:decoration-export-light">;
     protected readonly title: _angular_core.Signal<string>;
+    private readonly seededItems;
     protected readonly items: _angular_core.WritableSignal<AfricaniesNotification[]>;
     protected readonly markingId: _angular_core.WritableSignal<string | null>;
     protected readonly markingAll: _angular_core.WritableSignal<boolean>;
@@ -4291,7 +4294,7 @@ declare class AppShellComponent {
     protected readonly showContentChrome: _angular_core.Signal<boolean>;
     /** Full height in preview embeds so absolute drawers stay inside the frame. */
     protected readonly hostClass: _angular_core.Signal<"block h-full" | "block min-h-full">;
-    protected readonly shellRootClass: _angular_core.Signal<"relative flex h-full min-h-0" | "relative flex min-h-full">;
+    protected readonly shellRootClass: _angular_core.Signal<"relative flex h-full min-h-0 bg-background-chrome dark:bg-ink-950" | "relative flex min-h-full bg-background-chrome dark:bg-ink-950">;
     protected readonly headerDensity: _angular_core.Signal<"desktop" | "mobile" | "tablet">;
     protected readonly showMobileBar: _angular_core.Signal<boolean>;
     protected readonly sidenavHostClass: _angular_core.Signal<"z-50 shrink-0 self-start sticky top-0 block h-full" | "z-50 shrink-0 self-start absolute inset-y-0 left-0 h-full shadow-xl" | "hidden" | "z-50 shrink-0 self-start h-dvh fixed inset-y-0 left-0 shadow-xl lg:sticky lg:top-0 lg:block" | "z-50 shrink-0 self-start h-dvh hidden lg:sticky lg:top-0 lg:block">;
@@ -4976,7 +4979,7 @@ declare class TableComponent<T = unknown> {
     protected readonly colSpan: _angular_core.Signal<number>;
     protected readonly errorMessage: _angular_core.Signal<string>;
     protected readonly staleError: _angular_core.Signal<string | null>;
-    protected readonly bodyKind: _angular_core.Signal<"loading" | "error" | "empty" | "rows">;
+    protected readonly bodyKind: _angular_core.Signal<"error" | "loading" | "empty" | "rows">;
     protected readonly paginationLoading: _angular_core.Signal<boolean>;
     /** Top-left Refresh — only when rows are on screen (empty/error use in-body Retry). */
     protected readonly showToolbarRefresh: _angular_core.Signal<boolean>;

package/libs/africanies-core/src/index.ts

@@ -212,6 +212,7 @@ export {
 export {
   mapNotification,
   mapNotificationInboxItem,
+  isNotificationExternalLink,
   mapNotificationList,
   mapNotificationPayload,
   NOTIFICATION_READ_PATH,

package/libs/africanies-core/src/lib/notification/index.ts

@@ -7,4 +7,4 @@ export {
   NOTIFICATION_UPDATE_PATH,
 } from './notification.mapper';
 export { NotificationService } from './notification.service';
-export { resolveNotificationLinkForMode } from './notification-link';
+export { isNotificationExternalLink, resolveNotificationLinkForMode } from './notification-link';

package/libs/africanies-core/src/lib/notification/notification-link.spec.ts

@@ -1,25 +1,58 @@
-import { resolveNotificationLinkForMode } from './notification-link';
+import {
+  isNotificationExternalLink,
+  resolveNotificationLinkForMode,
+} from './notification-link';
 
 describe('resolveNotificationLinkForMode', () => {
   const exportLink =
     'https://test-admin-export.africaniestest.com/portal/customer/deliveries?page=1&shipment_app=shipfromnaija';
 
-  it('rewrites export links for STN import mode', () => {
+  it('preserves shipment_app and strips legacy host to a relative portal path', () => {
     expect(resolveNotificationLinkForMode(exportLink, 'stn')).toBe(
-      'https://test-admin-import.africaniestest.com/portal/customer/deliveries?page=1&shipment_app=shiptonaija',
+      '/portal/customer/deliveries?page=1&shipment_app=shipfromnaija',
     );
   });
 
-  it('rewrites import links for SFN export mode', () => {
+  it('preserves shipment_app on import portal links', () => {
     const importLink =
       'https://test-customer-import.africaniestest.com/portal/shipment/track-shipment/items/90?shipment_app=shiptonaija';
 
     expect(resolveNotificationLinkForMode(importLink, 'sfn')).toBe(
-      'https://test-customer-export.africaniestest.com/portal/shipment/track-shipment/items/90?shipment_app=shipfromnaija',
+      '/portal/shipment/track-shipment/items/90?shipment_app=shiptonaija',
+    );
+  });
+
+  it('leaves relative portal links with shipment_app unchanged', () => {
+    expect(resolveNotificationLinkForMode(exportLink, 'sfn')).toBe(
+      '/portal/customer/deliveries?page=1&shipment_app=shipfromnaija',
+    );
+  });
+
+  it('strips shipment_app from S3 export links', () => {
+    const url =
+      'https://africanies-staging-test.s3.amazonaws.com/var/www/html/storage/tmp/payouts.xlsx?X-Amz-Signature=abc&shipment_app=shipfromnaija';
+
+    expect(resolveNotificationLinkForMode(url, 'sfn')).toBe(
+      'https://africanies-staging-test.s3.amazonaws.com/var/www/html/storage/tmp/payouts.xlsx?X-Amz-Signature=abc',
     );
   });
 
-  it('leaves SFN export links unchanged when mode is SFN', () => {
-    expect(resolveNotificationLinkForMode(exportLink, 'sfn')).toBe(exportLink);
+  it('adds shipment_app when missing on absolute portal URLs', () => {
+    const link =
+      'https://test-admin-export.africaniestest.com/portal/customer/deliveries?page=1';
+
+    expect(resolveNotificationLinkForMode(link, 'stn')).toBe(
+      'https://test-admin-import.africaniestest.com/portal/customer/deliveries?page=1&shipment_app=shiptonaija',
+    );
+  });
+});
+
+describe('isNotificationExternalLink', () => {
+  it('treats S3 spreadsheet exports as external', () => {
+    expect(
+      isNotificationExternalLink(
+        'https://africanies-staging-test.s3.amazonaws.com/tmp/export.xlsx?X-Amz-Signature=abc',
+      ),
+    ).toBe(true);
   });
 });

package/libs/africanies-core/src/lib/notification/notification-link.ts

@@ -7,26 +7,68 @@ const SHIPMENT_APP_BY_MODE: Record<ShippingMode, string> = {
   sfn: 'shipfromnaija',
 };
 
+const QUERY_SHIPMENT_APP = 'shipment_app';
+
+const LEGACY_PORTAL_HOST =
+  /^(?:test-)?(?:admin|customer)-(?:export|import)\.africaniestest\.com$/i;
+
+/** Signed export downloads and other hosts that must not be rewritten in-app. */
+export function isNotificationExternalLink(link: string): boolean {
+  const trimmed = decodeNotificationLink(link).trim();
+  if (!trimmed) {
+    return false;
+  }
+  try {
+    const url = new URL(trimmed);
+    if (/\.(xlsx|xls|csv)(\?|$)/i.test(url.pathname)) {
+      return true;
+    }
+    if (/\.amazonaws\.com$/i.test(url.hostname)) {
+      return true;
+    }
+    return !isLegacyPortalHost(url.hostname);
+  } catch {
+    return false;
+  }
+}
+
 /**
- * Rewrite a notification portal URL for the active {@link ShippingMode}.
+ * Rewrite a notification href for the active {@link ShippingMode}.
  *
- * Swaps `-export` / `-import` host segments and sets `shipment_app` to
- * `shipfromnaija` (SFN) or `shiptonaija` (STN).
- * @param link
- * @param mode
+ * - Export / download URLs (S3, spreadsheets) pass through unchanged (no `shipment_app`).
+ * - Legacy portal hosts become relative `/portal/...` paths with query preserved.
+ * - When the notification already includes `shipment_app`, it is kept as-is.
+ * - Otherwise classic host / `shipment_app` rewriting applies for portal URLs.
  */
 export function resolveNotificationLinkForMode(
   link: string | null | undefined,
   mode: ShippingMode,
 ): string {
-  const trimmed = asString(link).trim();
+  const trimmed = decodeNotificationLink(asString(link)).trim();
   if (!trimmed) {
     return trimmed;
   }
 
+  if (isNotificationExternalLink(trimmed)) {
+    return stripShipmentAppFromLink(trimmed);
+  }
+
+  const relativePortal = toRelativePortalNotificationLink(trimmed);
+  if (relativePortal && hasShipmentAppQuery(relativePortal)) {
+    return relativePortal;
+  }
+
+  const relative = normalizeRelativePortalLink(trimmed);
+  if (relative && hasShipmentAppQuery(relative)) {
+    return relative;
+  }
+
   try {
     const url = new URL(trimmed);
-    url.searchParams.set('shipment_app', SHIPMENT_APP_BY_MODE[mode]);
+    if (url.searchParams.has(QUERY_SHIPMENT_APP)) {
+      return trimmed;
+    }
+    url.searchParams.set(QUERY_SHIPMENT_APP, SHIPMENT_APP_BY_MODE[mode]);
     url.hostname = rewriteNotificationHostForMode(url.hostname, mode);
     return url.toString();
   } catch {
@@ -48,6 +90,10 @@ function rewriteNotificationLinkFallback(
   link: string,
   mode: ShippingMode,
 ): string {
+  if (hasShipmentAppQuery(link)) {
+    return link;
+  }
+
   let out = link.replace(
     /shipment_app=(?:shipfromnaija|shiptonaija)/gi,
     `shipment_app=${SHIPMENT_APP_BY_MODE[mode]}`,
@@ -63,3 +109,93 @@ function rewriteNotificationLinkFallback(
   }
   return out.replace(/-import/gi, '-export');
 }
+
+function toRelativePortalNotificationLink(link: string): string | null {
+  try {
+    const url = new URL(link);
+    if (!isLegacyPortalHost(url.hostname)) {
+      return null;
+    }
+
+    let path = url.pathname.replace(/^\/+/, '');
+    if (path.startsWith('ng/portal/')) {
+      path = path.slice('ng/'.length);
+    }
+    if (!path.startsWith('portal/') && path !== 'portal') {
+      return null;
+    }
+
+    const query = url.searchParams.toString();
+    return `/${path}${query ? `?${query}` : ''}`;
+  } catch {
+    return null;
+  }
+}
+
+function normalizeRelativePortalLink(link: string): string | null {
+  let path = link.split('?')[0]?.split('#')[0] ?? '';
+  const query = link.includes('?') ? link.slice(link.indexOf('?')) : '';
+  path = path.replace(/^\/+/, '');
+  if (path.startsWith('ng/portal/')) {
+    path = path.slice('ng/'.length);
+  }
+  if (!path.startsWith('portal/') && path !== 'portal') {
+    return null;
+  }
+  return `/${path}${query}`;
+}
+
+function stripShipmentAppFromLink(link: string): string {
+  const trimmed = link.trim();
+  if (!trimmed) {
+    return trimmed;
+  }
+  try {
+    const url = new URL(trimmed);
+    if (!url.searchParams.has(QUERY_SHIPMENT_APP)) {
+      return trimmed;
+    }
+    url.searchParams.delete(QUERY_SHIPMENT_APP);
+    return url.toString();
+  } catch {
+    const params = new URLSearchParams(
+      trimmed.includes('?') ? trimmed.slice(trimmed.indexOf('?') + 1) : '',
+    );
+    if (!params.has(QUERY_SHIPMENT_APP)) {
+      return trimmed;
+    }
+    params.delete(QUERY_SHIPMENT_APP);
+    const query = params.toString();
+    const base = trimmed.split('?')[0] ?? trimmed;
+    return query ? `${base}?${query}` : base;
+  }
+}
+
+function hasShipmentAppQuery(link: string): boolean {
+  try {
+    const query = link.includes('?') ? link.slice(link.indexOf('?') + 1) : '';
+    return new URLSearchParams(query).has(QUERY_SHIPMENT_APP);
+  } catch {
+    return /(?:^|[?&])shipment_app=/i.test(link);
+  }
+}
+
+function decodeNotificationLink(link: string): string {
+  let value = (link ?? '').trim();
+  if (!value.includes('%')) {
+    return value;
+  }
+  try {
+    const decoded = decodeURIComponent(value);
+    if (decoded !== value) {
+      value = decoded;
+    }
+  } catch {
+    // Keep original when not valid URI encoding.
+  }
+  return value;
+}
+
+function isLegacyPortalHost(hostname: string): boolean {
+  return LEGACY_PORTAL_HOST.test(hostname);
+}

package/libs/africanies-theme/src/lib/mode-color.safelist.ts

@@ -11,12 +11,12 @@
  * SFN (export / green):
  * text-export bg-export bg-export-subtle bg-export-light border-export
  * hover:bg-export-light hover:bg-export-subtle dark:bg-export/15 dark:hover:bg-export/15
- * dark:bg-[color-mix(in_srgb,#1cbd5d_15%,#212529)]
+ * dark:bg-[color-mix(in_srgb,#1cbd5d_15%,#212529)] dark:bg-export dark:text-export dark:border-export
  *
  * STN (import / orange):
  * text-import bg-import bg-import-subtle bg-import-light border-import
  * hover:bg-import-light hover:bg-import-subtle dark:bg-import/15 dark:hover:bg-import/15
- * dark:bg-[color-mix(in_srgb,#f08829_15%,#212529)]
+ * dark:bg-[color-mix(in_srgb,#f08829_15%,#212529)] dark:bg-import dark:text-import dark:border-import
  */
 export const MODE_COLOR_SAFELIST = [
   'text-export',
@@ -29,6 +29,9 @@ export const MODE_COLOR_SAFELIST = [
   'dark:bg-export/15',
   'dark:hover:bg-export/15',
   'dark:bg-[color-mix(in_srgb,#1cbd5d_15%,#212529)]',
+  'dark:bg-export',
+  'dark:text-export',
+  'dark:border-export',
   'text-import',
   'bg-import',
   'bg-import-subtle',
@@ -39,4 +42,7 @@ export const MODE_COLOR_SAFELIST = [
   'dark:bg-import/15',
   'dark:hover:bg-import/15',
   'dark:bg-[color-mix(in_srgb,#f08829_15%,#212529)]',
+  'dark:bg-import',
+  'dark:text-import',
+  'dark:border-import',
 ] as const;

package/libs/africanies-theme/src/lib/mode-color.service.ts

@@ -42,6 +42,14 @@ export interface ModeColorClasses {
    * Soft hover highlight for menus and lists.
    */
   softHover: string;
+  /**
+   * Active nav leaf / collapsed rail — solid mode fill + white text.
+   */
+  activeFill: string;
+  /**
+   * Stroked secondary CTA — white fill, mode border + text (portal `.btn-stroked`).
+   */
+  stroked: string;
 }
 
 /**
@@ -84,6 +92,10 @@ export class ModeColorService {
         softSolid:
           'bg-export-subtle dark:bg-[color-mix(in_srgb,#1cbd5d_15%,#212529)]',
         softHover: 'hover:bg-export-subtle dark:hover:bg-export/15',
+        activeFill:
+          'bg-export text-white border-transparent dark:bg-export dark:text-white',
+        stroked:
+          'bg-white text-export border-export hover:bg-export-subtle dark:bg-ink-950 dark:text-export dark:border-export dark:hover:bg-export/15',
       };
     }
     return {
@@ -99,6 +111,10 @@ export class ModeColorService {
       softSolid:
         'bg-import-subtle dark:bg-[color-mix(in_srgb,#f08829_15%,#212529)]',
       softHover: 'hover:bg-import-subtle dark:hover:bg-import/15',
+      activeFill:
+        'bg-import text-white border-transparent dark:bg-import dark:text-white',
+      stroked:
+        'bg-white text-import border-import hover:bg-import-subtle dark:bg-ink-950 dark:text-import dark:border-import dark:hover:bg-import/15',
     };
   });
 }

package/libs/africanies-theme/tailwind-preset.cjs

@@ -92,8 +92,8 @@ function africaniesAutofillPlugin({ addBase }) {
   const rules = {};
   for (const selector of autofillSelectors) {
     rules[selector] = {
-      WebkitTextFillColor: '#212529',
-      caretColor: '#212529',
+      WebkitTextFillColor: '#1c2b3f',
+      caretColor: '#1c2b3f',
       boxShadow: '0 0 0 1000px #ffffff inset',
       transition: 'background-color 99999s ease-in-out 0s',
     };
@@ -194,9 +194,12 @@ module.exports = {
         black: '#000000',
         white: '#ffffff',
         ink: {
-          DEFAULT: '#212529',
+          // Portal `.txt-primary` navy — primary body / heading text (light).
+          DEFAULT: '#1c2b3f',
           blue: '#192a3e',
           brand: '#1c2b3f',
+          // Previous ink DEFAULT — dark elevated cards / panels (`dark:bg-ink-surface`).
+          surface: '#212529',
           950: '#272729',
         },
         neutral: {
@@ -205,11 +208,17 @@ module.exports = {
           600: '#667185',
         },
         border: {
-          // Light chrome on white — match form field borders (`neutral-300`).
-          // Previous `#f0f2f5` was too close to white and washed out.
-          DEFAULT: '#c9d5e1',
+          // Soft hairline on white (portal `$border-bottom-gray`).
+          DEFAULT: '#f0f2f5',
+          // Nav pins / stronger chrome dividers.
+          strong: '#e0e6f0',
         },
         background: {
+          // Portal page shell (`container-wrap`).
+          chrome: '#f6f7f9',
+          // Nested wells inside white cards.
+          well: '#f3f3f3',
+          // Auth / welcome / soft hover.
           welcome: '#f9fafb',
         },
         export: {
@@ -236,7 +245,7 @@ module.exports = {
         },
       },
       fontFamily: {
-        sans: ['Arial', 'sans-serif'],
+        sans: ['Inter', 'system-ui', 'sans-serif'],
       },
       fontSize: {
         // PROVISIONAL — see THEME.md; sizes may tighten after design QA.

package/libs/africanies-ui/src/lib/button/button.component.ts

@@ -14,7 +14,8 @@ import { ModeColorService } from '@africanies/africanies-theme';
  * Visual emphasis for {@link ButtonComponent}.
  *
  * - `primary` — filled mode accent (SFN green / STN orange) for the main action
- * - `secondary` — outlined chrome for secondary actions
+ * - `secondary` — stroked mode accent (white + mode border/text; portal `.btn-stroked`)
+ * - `flat` — neutral chrome (white + ink + soft border; portal `.btn-flat`)
  * - `ghost` — neutral text-only for low-emphasis actions (Cancel, tertiary)
  * - `ghost-primary` — text-only mode accent (SFN green / STN orange)
  * - `ghost-danger` — text-only destructive actions (Clear, Remove)
@@ -23,6 +24,7 @@ import { ModeColorService } from '@africanies/africanies-theme';
 export type ButtonVariant =
   | 'primary'
   | 'secondary'
+  | 'flat'
   | 'ghost'
   | 'ghost-primary'
   | 'ghost-danger'
@@ -167,6 +169,8 @@ export class ButtonComponent {
     } else if (variant === 'ghost-primary') {
       variantClass = this.modeColor.classes().ghostPrimary;
     } else if (variant === 'secondary') {
+      variantClass = this.modeColor.classes().stroked;
+    } else if (variant === 'flat') {
       variantClass =
         'bg-white dark:bg-ink-950 text-ink dark:text-white border-border dark:border-white/15 hover:bg-background-welcome dark:hover:bg-white/10';
     } else if (variant === 'ghost') {

package/libs/africanies-ui/src/lib/feedback/empty-state.component.ts

@@ -40,7 +40,7 @@ import { ButtonComponent } from '../button/button.component';
       <button
         africanies-button
         type="button"
-        variant="secondary"
+        variant="flat"
         [disabled]="refreshing()"
         (click)="retry.emit()"
       >

package/libs/africanies-ui/src/lib/feedback/error-state.component.ts

@@ -40,7 +40,7 @@ import { ButtonComponent } from '../button/button.component';
       <button
         africanies-button
         type="button"
-        variant="secondary"
+        variant="flat"
         [disabled]="refreshing()"
         (click)="retry.emit()"
       >

package/libs/africanies-ui/src/lib/forms/file-upload/file-preview.dialog.ts

@@ -77,7 +77,7 @@ type PreviewKind = 'image' | 'unavailable';
           <img
             [src]="src()"
             [alt]="data.file.name"
-            class="max-h-[min(70vh,40rem)] w-full rounded-md object-contain bg-background-welcome ring-1 ring-border dark:bg-ink dark:ring-white/15"
+            class="max-h-[min(70vh,40rem)] w-full rounded-md object-contain bg-background-welcome ring-1 ring-border dark:bg-ink-950 dark:ring-white/15"
           />
         } @else {
           <div

package/libs/africanies-ui/src/lib/forms/file-upload/file-upload.component.ts

@@ -125,7 +125,7 @@ let nextFileUploadId = 0;
                 <button
                   africanies-button
                   type="button"
-                  variant="secondary"
+                  variant="flat"
                   size="sm"
                   [disabled]="disabled()"
                   (click)="openFilePicker()"
@@ -138,7 +138,7 @@ let nextFileUploadId = 0;
                 <button
                   africanies-button
                   type="button"
-                  variant="secondary"
+                  variant="flat"
                   size="sm"
                   [disabled]="disabled()"
                   (click)="openCamera()"
@@ -193,7 +193,7 @@ let nextFileUploadId = 0;
                 <button
                   africanies-button
                   type="button"
-                  variant="secondary"
+                  variant="flat"
                   size="sm"
                   [disabled]="disabled()"
                   (click)="openFilePicker()"
@@ -262,7 +262,7 @@ let nextFileUploadId = 0;
                 <button
                   africanies-button
                   type="button"
-                  variant="secondary"
+                  variant="flat"
                   size="sm"
                   [disabled]="disabled()"
                   (click)="openFilePicker(); $event.stopPropagation()"

package/libs/africanies-ui/src/lib/forms/form-field.classes.ts

@@ -12,11 +12,11 @@ export const FORM_LABEL_CLASS =
 
 /** Default control shell — `h-10` matches md `africanies-button`. */
 export const FORM_FIELD_CLASS =
-  'flex items-center w-full h-10 box-border rounded-md border border-neutral-300 bg-white dark:bg-ink-950 text-ink dark:text-white dark:border-white/25 ' +
+  'flex items-center w-full h-10 box-border rounded-md border border-border bg-white dark:bg-ink-950 text-ink dark:text-white dark:border-white/25 ' +
   'focus-within:outline focus-within:outline-2 focus-within:outline-offset-2 focus-within:outline-ink';
 
 /**
- * Error border — `!` so it wins over shell `border-neutral-300` /
+ * Error border — `!` so it wins over shell `border-border` /
  * `dark:border-white/25` (same specificity; those utilities sort later in the
  * generated CSS and otherwise paint over `border-danger`).
  *

package/libs/africanies-ui/src/lib/forms/select/select.component.ts

@@ -186,7 +186,7 @@ const SELECT_PANEL_POSITIONS: ConnectedPosition[] = [
         @if (multiple() && selectedList().length) {
           @for (chip of selectedList(); track trackOption(chip)) {
             <span
-              class="inline-flex items-center gap-1 rounded-md border border-neutral-300 bg-background-welcome dark:border-white/20 dark:bg-ink text-body-sm text-ink dark:text-white px-2 py-0.5"
+              class="inline-flex items-center gap-1 rounded-md border border-neutral-300 bg-background-welcome dark:border-white/20 dark:bg-ink-950 text-body-sm text-ink dark:text-white px-2 py-0.5"
             >
               @if (chip.prefix; as prefixIcon) {
                 <africanies-icon [name]="prefixIcon" [size]="14" class="shrink-0" />

package/libs/africanies-ui/src/lib/layout/app-shell-header.component.ts

@@ -349,7 +349,7 @@ export class AppShellHeaderComponent {
     this.notificationsDrawer
       .open({
         title: this.notificationsTitle(),
-        notifications: onLoadPage ? undefined : this.notifications(),
+        notifications: this.notifications(),
         onLoadPage,
         onMarkRead,
         onMarkAllRead,

package/libs/africanies-ui/src/lib/layout/app-shell.component.ts

@@ -199,8 +199,8 @@ export class AppShellComponent {
 
   protected readonly shellRootClass = computed(() =>
     this.layoutPreview()
-      ? 'relative flex h-full min-h-0'
-      : 'relative flex min-h-full',
+      ? 'relative flex h-full min-h-0 bg-background-chrome dark:bg-ink-950'
+      : 'relative flex min-h-full bg-background-chrome dark:bg-ink-950',
   );
 
   protected readonly headerDensity = computed((): 'mobile' | 'tablet' | 'desktop' => {

package/libs/africanies-ui/src/lib/navigation/shipping-mode-switch/shipping-mode-switch.component.ts

@@ -131,8 +131,8 @@ export class ShippingModeSwitchComponent {
   /** Host padding / divider — tighter when the rail is collapsed. */
   protected readonly hostClass = computed(() =>
     this.collapsed()
-      ? 'block shrink-0 border-t border-border px-1.5 py-3 dark:border-white/10'
-      : 'block shrink-0 border-t border-border px-2 py-3 dark:border-white/10',
+      ? 'block shrink-0 border-t border-strong px-1.5 py-3 dark:border-white/10'
+      : 'block shrink-0 border-t border-strong px-2 py-3 dark:border-white/10',
   );
 
   /**

package/libs/africanies-ui/src/lib/navigation/side-nav/africanies-side-nav.component.html

@@ -1,5 +1,5 @@
     <aside
-      class="relative flex h-full flex-col overflow-visible border-r border-border bg-white transition-[width] duration-200 ease-out dark:border-white/10 dark:bg-ink"
+      class="relative flex h-full flex-col overflow-visible border-r border-border bg-white transition-[width] duration-200 ease-out dark:border-white/10 dark:bg-ink-950"
       [style.width]="collapsed() ? '3.75rem' : '15rem'"
       [attr.aria-label]="ariaLabel()"
     >
@@ -61,7 +61,7 @@
         @if (!collapsed() && expandParents() && hasOpenBranches()) {
           <button
             type="button"
-            class="absolute right-1.5 top-1.5 z-10 inline-flex size-7 cursor-pointer items-center justify-center rounded-md bg-white text-neutral-500 shadow-sm ring-1 ring-border/80 transition-colors hover:bg-background-welcome hover:text-ink focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ink dark:bg-ink dark:text-neutral-400 dark:ring-white/15 dark:hover:bg-white/10 dark:hover:text-white"
+            class="absolute right-1.5 top-1.5 z-10 inline-flex size-7 cursor-pointer items-center justify-center rounded-md bg-white text-neutral-500 shadow-sm ring-1 ring-border/80 transition-colors hover:bg-background-welcome hover:text-ink focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ink dark:bg-ink-950 dark:text-neutral-400 dark:ring-white/15 dark:hover:bg-white/10 dark:hover:text-white"
             aria-label="Collapse all"
             (click)="collapseAllBranches()"
           >