@africanies/angular-web-sdk 0.1.7 → 0.1.9

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

@@ -210,9 +210,9 @@ export {
 
 // User notifications (auth required)
 export {
+  isNotificationExternalLink,
   mapNotification,
   mapNotificationInboxItem,
-  isNotificationExternalLink,
   mapNotificationList,
   mapNotificationPayload,
   NOTIFICATION_READ_PATH,

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

@@ -12,7 +12,10 @@ 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. */
+/**
+ * Signed export downloads and other hosts that must not be rewritten in-app.
+ * @param link
+ */
 export function isNotificationExternalLink(link: string): boolean {
   const trimmed = decodeNotificationLink(link).trim();
   if (!trimmed) {
@@ -39,6 +42,8 @@ export function isNotificationExternalLink(link: string): boolean {
  * - 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.
+ * @param link
+ * @param mode
  */
 export function resolveNotificationLinkForMode(
   link: string | null | undefined,

package/libs/africanies-icons/src/assets/icons.sprite.svg

@@ -744,6 +744,13 @@
 <path d="M14 8H10C9.5 8 9 8.5 9 9V13C9 13.5 9.5 14 10 14V20H14V14C14.5 14 15 13.5 15 13V9C15 8.5 14.5 8 14 8Z" fill="currentColor"/></symbol>
 <symbol id="hammer" viewBox="0 0 24 24"><path d="M9.99707 6L16.9971 13L19.9971 10L15.5171 5.52C15.5171 5.52 12.5471 6.55 10.9971 5L9.99707 6Z" fill="currentColor"/>
 <path d="M12.797 9.79004L4.267 18.31C4.102 18.488 4 18.727 4 18.99C4 19.253 4.101 19.492 4.267 19.671C4.448 19.854 4.7 19.968 4.978 19.968C5.231 19.968 5.462 19.874 5.638 19.72L14.207 11.201L12.797 9.79004Z" fill="currentColor"/></symbol>
+<symbol id="hand-coins" viewBox="0 0 16 15"><path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M0.142433 5.8125C0.142433 6.8115 0.394433 7.74975 0.836933 8.5695C0.62996 8.65739 0.447722 8.79474 0.30621 8.96949C0.164697 9.14424 0.0682364 9.35105 0.0252912 9.57178C-0.0176541 9.7925 -0.00577094 10.0204 0.0598977 10.2354C0.125566 10.4505 0.243013 10.6462 0.401933 10.8053L3.64643 14.049C3.95198 14.3546 4.32385 14.5858 4.73318 14.7244C5.14251 14.8631 5.57829 14.9055 6.00668 14.8485L10.4924 14.25H12.8924V15H15.5174V13.875H14.0174V8.25H15.5174V7.125H12.8924V7.875H11.3909C11.7249 6.99496 11.8402 6.04697 11.7269 5.11253C11.6135 4.17809 11.2749 3.28516 10.7402 2.51051C10.2054 1.73585 9.49058 1.10266 8.65704 0.665352C7.8235 0.228047 6.89622 -0.00028052 5.95493 2.58646e-07C4.41336 2.58646e-07 2.93493 0.612387 1.84488 1.70244C0.75482 2.7925 0.142433 4.27093 0.142433 5.8125ZM5.95493 1.125C5.0719 1.12517 4.20686 1.37472 3.45942 1.84492C2.71198 2.31512 2.11253 2.98685 1.73009 3.78277C1.34765 4.57869 1.19776 5.46644 1.29769 6.3438C1.39762 7.22116 1.7433 8.05247 2.29493 8.742L4.64768 9.7995C4.6685 9.54613 4.74629 9.30073 4.87525 9.08164C5.00421 8.86255 5.18101 8.67542 5.39243 8.53425V8.25H4.64243V7.125H6.14243C6.24189 7.125 6.33727 7.08549 6.4076 7.01517C6.47792 6.94484 6.51743 6.84946 6.51743 6.75C6.51743 6.65054 6.47792 6.55516 6.4076 6.48483C6.33727 6.41451 6.24189 6.375 6.14243 6.375H5.76743C5.40208 6.37536 5.04916 6.24237 4.77491 6.00099C4.50066 5.7596 4.32393 5.42642 4.2779 5.06398C4.23187 4.70155 4.3197 4.33477 4.52491 4.03249C4.73012 3.73022 5.03859 3.51323 5.39243 3.42225V2.625H6.51743V3.375H7.26743V4.5H5.76743C5.66798 4.5 5.57259 4.53951 5.50227 4.60984C5.43194 4.68016 5.39243 4.77554 5.39243 4.875C5.39243 4.97446 5.43194 5.06984 5.50227 5.14017C5.57259 5.21049 5.66798 5.25 5.76743 5.25H6.14243C6.50778 5.24964 6.8607 5.38263 7.13496 5.62402C7.40921 5.8654 7.58593 6.19858 7.63196 6.56102C7.67799 6.92345 7.59016 7.29023 7.38495 7.59251C7.17975 7.89478 6.87127 8.11177 6.51743 8.20275V8.25H9.23843L10.1249 7.9545C10.4921 7.23989 10.6693 6.44291 10.6398 5.64006C10.6102 4.8372 10.3748 4.05542 9.95615 3.36973C9.53748 2.68405 8.94961 2.11748 8.24894 1.72439C7.54827 1.33131 6.75833 1.12491 5.95493 1.125ZM5.62343 11.4705L1.47593 9.60675C1.42279 9.58303 1.36303 9.57868 1.30701 9.59444C1.25099 9.6102 1.20227 9.64509 1.16929 9.69304C1.13632 9.74098 1.12118 9.79897 1.1265 9.85691C1.13182 9.91486 1.15727 9.96911 1.19843 10.0103L4.44143 13.2533C4.6248 13.4368 4.84801 13.5756 5.09372 13.6588C5.33943 13.7421 5.60103 13.7675 5.85818 13.7333L10.4182 13.125H12.8924V9H10.5464L9.42143 9.375H6.32993C6.18075 9.375 6.03767 9.43426 5.93219 9.53975C5.8267 9.64524 5.76743 9.78832 5.76743 9.9375C5.76743 10.0867 5.8267 10.2298 5.93219 10.3352C6.03767 10.4407 6.18075 10.5 6.32993 10.5H9.56243L10.4774 11.415L9.68243 12.21L9.09743 11.625H6.32993C6.07793 11.625 5.83793 11.5695 5.62343 11.4705Z"
+    fill="currentColor"
+   
+  /></symbol>
 <symbol id="hand" viewBox="0 0 24 24"><path d="M17.4612 6.45C17.0612 6.05 16.4612 5.95 15.9612 6.15C15.9612 5.85 15.8612 5.55 15.5612 5.25C15.3612 5.05 14.9612 4.85 14.4612 4.85C14.1612 4.85 13.9612 4.95 13.7612 4.95C13.7612 4.75 13.6612 4.65 13.5612 4.45C13.0612 3.85 12.0612 3.85 11.5612 4.45C11.3612 4.65 11.1612 4.85 11.1612 5.05C10.9612 5.05 10.7612 4.95 10.5612 4.95C10.0612 4.95 9.76122 5.15 9.46122 5.45C8.96122 5.95 8.96122 6.75 8.96122 6.75V10.55C8.66122 10.25 8.16122 9.75 7.46122 9.75C7.26122 9.75 6.96122 9.85 6.76122 9.95C6.36122 10.15 6.16122 10.45 6.06122 10.85C5.76122 11.85 6.66122 13.25 6.66122 13.35C6.76122 13.45 7.86122 16.05 8.86122 17.15C9.86122 18.35 10.9612 19.05 13.7612 19.05C16.6612 19.05 17.9612 17.45 17.9612 13.95V8.45C17.9612 8.35 18.0612 7.15 17.4612 6.45ZM11.9612 6.05C11.9612 5.75 11.8612 5.05 12.4612 5.05C12.9612 5.05 12.9612 5.55 12.9612 6.05V10.05C12.9612 10.35 13.1612 10.55 13.4612 10.55C13.7612 10.55 13.9612 10.35 13.9612 10.05V6.25C13.9612 6.25 13.9612 5.85 14.4612 5.85C15.0612 5.85 14.9612 6.75 14.9612 6.75V10.05C14.9612 10.35 15.1612 10.55 15.4612 10.55C15.7612 10.55 15.9612 10.35 15.9612 10.05V7.65C15.9612 7.55 15.9612 7.05 16.4612 7.05C16.9612 7.05 16.9612 8.05 16.9612 8.05V13.95C16.9612 17.35 15.6612 18.05 13.7612 18.05C11.3612 18.05 10.4612 17.55 9.66122 16.45C8.76122 15.45 7.56122 12.85 7.56122 12.75C7.26122 12.45 6.86122 11.55 6.96122 11.15C6.96122 11.05 7.06122 10.95 7.16122 10.85C7.26122 10.85 7.36122 10.75 7.36122 10.75C7.76122 10.75 8.16122 11.25 8.26122 11.45L8.86122 12.35C8.96122 12.55 9.26122 12.65 9.46122 12.55C9.86122 12.55 9.96122 12.35 9.96122 12.15V6.95C9.96122 6.55 9.96122 5.95 10.4612 5.95C10.8612 5.95 10.9612 6.25 10.9612 6.75V10.05C10.9612 10.35 11.1612 10.55 11.4612 10.55C11.7612 10.55 11.9612 10.35 11.9612 10.05V6.05Z" fill="currentColor"/></symbol>
 <symbol id="handle-corner" viewBox="0 0 24 24"><path d="M8.4 17.7L17.7 8.4V7L7 17.7H8.4Z" fill="currentColor"/>
 <path d="M11.4 17.7L17.7 11.4V10L10 17.7H11.4Z" fill="currentColor"/>

package/libs/africanies-icons/src/lib/icon-name.ts

@@ -336,6 +336,7 @@ export const ICON_NAMES = [
   'grid',
   'group',
   'hammer',
+  'hand-coins',
   'hand',
   'handle-corner',
   'hands-up',

package/libs/africanies-models/src/lib/filters/configs/seed-configs.ts

@@ -122,7 +122,7 @@ export const updateShipmentsFilterConfig: ModuleFilterConfigModel = {
     },
     {
       key: 'shipment_method_id',
-      label: 'Shipment Carrier',
+      label: 'Shipment Methods',
       type: 'select',
       optionsSource: 'shipmentMethods',
       placeholder: 'Shipment Methods',
@@ -133,6 +133,7 @@ export const updateShipmentsFilterConfig: ModuleFilterConfigModel = {
       type: 'select',
       optionsSource: 'static',
       options: [
+        { value: '', label: 'None' },
         { value: 'individual', label: 'Individual' },
         { value: 'business', label: 'Business' },
       ],
@@ -148,17 +149,20 @@ export const updateShipmentsFilterConfig: ModuleFilterConfigModel = {
     {
       key: 'shipment_manifest_id',
       label: 'Shipment Manifest',
-      type: 'select',
-      optionsSource: 'shipmentManifests',
-      placeholder: 'Shipment Manifest',
+      type: 'enum',
+      exclusive: true,
+      options: [
+        { value: 'not_null', label: 'Manifest Added', color: '#25945c' },
+        { value: 'null', label: 'Manifest Not Added', color: '#667185' },
+      ],
     },
     {
       key: 'api_request',
       label: 'API Request',
       type: 'boolean',
       options: [
-        { value: '1', label: 'Yes' },
-        { value: '0', label: 'No' },
+        { value: '1', label: 'Yes', color: '#25945c' },
+        { value: '0', label: 'No', color: '#FF001C' },
       ],
     },
     {
@@ -166,8 +170,18 @@ export const updateShipmentsFilterConfig: ModuleFilterConfigModel = {
       label: 'Insured',
       type: 'boolean',
       options: [
-        { value: '1', label: 'Yes' },
-        { value: '0', label: 'No' },
+        { value: '1', label: 'Yes', color: '#3B82F6' },
+        { value: '0', label: 'No', color: '#f48220' },
+      ],
+    },
+    {
+      key: 'pay_later',
+      label: 'Pay Later',
+      type: 'enum',
+      exclusive: true,
+      options: [
+        { value: 'credit', label: 'Credit', color: '#25945c' },
+        { value: 'debit', label: 'Debit', color: '#667185' },
       ],
     },
   ],

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

@@ -9,38 +9,50 @@
  * Do not rename these strings without updating ModeColorService and THEME.md.
  *
  * SFN (export / green):
+ * text-export-strong bg-export-strong hover:bg-export-hover border-export-strong
  * 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-export dark:text-export dark:border-export
  *
  * STN (import / orange):
+ * text-import-strong bg-import-strong hover:bg-import-hover border-import-strong
  * 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-import dark:text-import dark:border-import
  */
 export const MODE_COLOR_SAFELIST = [
   'text-export',
+  'text-export-strong',
   'bg-export',
+  'bg-export-strong',
   'bg-export-subtle',
   'bg-export-light',
   'border-export',
+  'border-export-strong',
+  'hover:bg-export-hover',
   'hover:bg-export-light',
   'hover:bg-export-subtle',
   'dark:bg-export/15',
   'dark:hover:bg-export/15',
+  'dark:hover:bg-export-light',
   'dark:bg-[color-mix(in_srgb,#1cbd5d_15%,#212529)]',
   'dark:bg-export',
   'dark:text-export',
   'dark:border-export',
   'text-import',
+  'text-import-strong',
   'bg-import',
+  'bg-import-strong',
   'bg-import-subtle',
   'bg-import-light',
   'border-import',
+  'border-import-strong',
+  'hover:bg-import-hover',
   'hover:bg-import-light',
   'hover:bg-import-subtle',
   'dark:bg-import/15',
   'dark:hover:bg-import/15',
+  'dark:hover:bg-import-light',
   'dark:bg-[color-mix(in_srgb,#f08829_15%,#212529)]',
   'dark:bg-import',
   'dark:text-import',

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

@@ -0,0 +1,55 @@
+import { signal } from '@angular/core';
+import { TestBed } from '@angular/core/testing';
+
+import { ShippingModeService } from '@africanies/africanies-core';
+import type { ShippingMode } from '@africanies/africanies-models';
+
+import { ModeColorService } from './mode-color.service';
+
+describe('ModeColorService', () => {
+  let mode: ReturnType<typeof signal<ShippingMode>>;
+  let service: ModeColorService;
+
+  beforeEach(() => {
+    mode = signal<ShippingMode>('sfn');
+    TestBed.configureTestingModule({
+      providers: [
+        ModeColorService,
+        {
+          provide: ShippingModeService,
+          useValue: {
+            mode: mode.asReadonly(),
+          },
+        },
+      ],
+    });
+    service = TestBed.inject(ModeColorService);
+  });
+
+  it('uses accessible export-strong fills and text in SFN light mode', () => {
+    const classes = service.classes();
+    expect(classes.text).toContain('text-export-strong');
+    expect(classes.primary).toContain('bg-export-strong');
+    expect(classes.ghostPrimary).toContain('text-export-strong');
+    expect(classes.activeFill).toContain('bg-export-strong');
+    expect(classes.stroked).toContain('text-export-strong');
+    expect(classes.stroked).toContain('border-export-strong');
+  });
+
+  it('keeps bright export accents for dark-mode companions in SFN', () => {
+    const classes = service.classes();
+    expect(classes.primary).toContain('dark:bg-export');
+    expect(classes.ghostPrimary).toContain('dark:text-export');
+  });
+
+  it('uses accessible import-strong fills and text in STN light mode', () => {
+    mode.set('stn');
+    const classes = service.classes();
+    expect(classes.text).toContain('text-import-strong');
+    expect(classes.primary).toContain('bg-import-strong');
+    expect(classes.ghostPrimary).toContain('text-import-strong');
+    expect(classes.activeFill).toContain('bg-import-strong');
+    expect(classes.stroked).toContain('text-import-strong');
+    expect(classes.primary).not.toContain('bg-export-strong');
+  });
+});

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

@@ -9,7 +9,7 @@ import { ShippingModeService } from '@africanies/africanies-core';
  * and accent text. Semantic colors (danger / warning) stay mode-independent.
  */
 export interface ModeColorClasses {
-  /** Text color utility, e.g. `text-export`. */
+  /** Accessible accent text — `text-export-strong` in light, `text-export` in dark. */
   text: string;
   /** Solid background utility, e.g. `bg-export`. */
   bg: string;
@@ -80,41 +80,41 @@ export class ModeColorService {
     // Literal strings required for Tailwind content detection — do not interpolate.
     if (this.shippingMode.mode() === 'sfn') {
       return {
-        text: 'text-export',
+        text: 'text-export-strong dark:text-export',
         bg: 'bg-export',
         bgSubtle: 'bg-export-subtle',
         border: 'border-export',
         primary:
-          'bg-export text-white border-transparent hover:bg-export-light',
+          'bg-export-strong text-white border-transparent hover:bg-export-hover dark:bg-export dark:hover:bg-export-light',
         ghostPrimary:
-          'bg-transparent text-export border-transparent hover:bg-export-subtle dark:hover:bg-export/15',
+          'bg-transparent text-export-strong border-transparent hover:bg-export-subtle dark:text-export dark:hover:bg-export/15',
         soft: 'bg-export-subtle dark:bg-export/15',
         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',
+          'bg-export-strong text-white border-transparent hover:bg-export-hover dark:bg-export dark:text-white dark:hover:bg-export-light',
         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',
+          'bg-surface text-export-strong border-export-strong hover:bg-export-subtle dark:bg-ink-950 dark:text-export dark:border-export dark:hover:bg-export/15',
       };
     }
     return {
-      text: 'text-import',
+      text: 'text-import-strong dark:text-import',
       bg: 'bg-import',
       bgSubtle: 'bg-import-subtle',
       border: 'border-import',
       primary:
-        'bg-import text-white border-transparent hover:bg-import-light',
+        'bg-import-strong text-white border-transparent hover:bg-import-hover dark:bg-import dark:hover:bg-import-light',
       ghostPrimary:
-        'bg-transparent text-import border-transparent hover:bg-import-subtle dark:hover:bg-import/15',
+        'bg-transparent text-import-strong border-transparent hover:bg-import-subtle dark:text-import dark:hover:bg-import/15',
       soft: 'bg-import-subtle dark:bg-import/15',
       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',
+        'bg-import-strong text-white border-transparent hover:bg-import-hover dark:bg-import dark:text-white dark:hover:bg-import-light',
       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',
+        'bg-surface text-import-strong border-import-strong 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: '#1c2b3f',
-      caretColor: '#1c2b3f',
+      WebkitTextFillColor: '#172033',
+      caretColor: '#172033',
       boxShadow: '0 0 0 1000px #ffffff inset',
       transition: 'background-color 99999s ease-in-out 0s',
     };
@@ -143,6 +143,36 @@ function africaniesOverlayStackPlugin({ addBase }) {
   });
 }
 
+/**
+ * Shared elevated card shell so list/detail pages keep one light-theme recipe.
+ *
+ * @param {import('tailwindcss/types/config').PluginAPI} api
+ */
+function africaniesSurfacePlugin({ addComponents }) {
+  addComponents({
+    '.africanies-card': {
+      borderRadius: '0.75rem',
+      borderWidth: '1px',
+      borderStyle: 'solid',
+      borderColor: '#dde3ea',
+      backgroundColor: '#ffffff',
+      padding: '1.25rem',
+      color: '#172033',
+      boxShadow:
+        '0 1px 2px rgb(23 32 51 / 0.04), 0 1px 3px rgb(23 32 51 / 0.06)',
+      '@media (min-width: 640px)': {
+        padding: '1.5rem',
+      },
+    },
+    '.dark .africanies-card': {
+      borderColor: 'rgba(255, 255, 255, 0.1)',
+      backgroundColor: '#272729',
+      color: '#ffffff',
+      boxShadow: 'none',
+    },
+  });
+}
+
 /**
  * Keep overlay scrollbars off close buttons and other end-aligned chrome.
  *
@@ -186,6 +216,7 @@ module.exports = {
     africaniesSpinPlugin,
     africaniesOverlayStackPlugin,
     africaniesOverlayScrollPlugin,
+    africaniesSurfacePlugin,
     africaniesAutofillPlugin,
   ],
   theme: {
@@ -193,56 +224,83 @@ module.exports = {
       colors: {
         black: '#000000',
         white: '#ffffff',
+        surface: {
+          DEFAULT: '#ffffff',
+          subtle: '#f8fafc',
+          hover: '#e9eef5',
+          sunken: '#eef2f6',
+        },
         ink: {
-          // Portal `.txt-primary` navy — primary body / heading text (light).
-          DEFAULT: '#1c2b3f',
+          // High-contrast cool navy for light-theme body and heading text.
+          DEFAULT: '#172033',
           blue: '#192a3e',
-          brand: '#1c2b3f',
+          brand: '#172033',
           // Previous ink DEFAULT — dark elevated cards / panels (`dark:bg-ink-surface`).
           surface: '#212529',
           950: '#272729',
         },
         neutral: {
+          50: '#f8fafc',
+          100: '#eef2f6',
+          200: '#dde3ea',
           300: '#c9d5e1',
+          // Keep 300/400 stable: they are the established dark-theme foregrounds.
           400: '#a9b5cb',
-          600: '#667185',
+          500: '#667185',
+          600: '#526071',
+          700: '#3e4a59',
+          800: '#2c3644',
+          900: '#172033',
         },
         border: {
-          // Soft hairline on white (portal `$border-bottom-gray`).
-          DEFAULT: '#f0f2f5',
-          // Nav pins / stronger chrome dividers.
-          strong: '#e0e6f0',
+          // Quiet card/divider chrome. Controls use the stronger `control` token.
+          DEFAULT: '#dde3ea',
+          strong: '#c4cdd8',
         },
+        // 3.1:1 against white: visible enough for meaningful control boundaries.
+        control: '#8793a3',
+        focus: '#175cd3',
         background: {
-          // Portal page shell (`container-wrap`).
-          chrome: '#f6f7f9',
+          // Cooler canvas and a clearer inset level beneath white surfaces.
+          chrome: '#f4f6f8',
           // Nested wells inside white cards.
-          well: '#f3f3f3',
+          well: '#eef2f6',
           // Auth / welcome / soft hover.
-          welcome: '#f9fafb',
+          welcome: '#f8fafc',
+          hover: '#e9eef5',
         },
         export: {
           DEFAULT: '#1cbd5d',
           light: '#24dc6d',
           subtle: '#e4fff3',
           tint: '#f2fff8',
+          // Accessible normal-text / white-text-control foreground (5.43:1).
+          strong: '#0b7a3e',
+          hover: '#096833',
         },
         import: {
           DEFAULT: '#f08829',
           light: '#ffa95b',
           subtle: '#fffcef',
+          // Accessible normal-text / white-text-control foreground (6.20:1).
+          strong: '#9a4b0b',
+          hover: '#7f3e09',
         },
         danger: {
           DEFAULT: '#ff001c',
-          dark: '#b41433',
+          dark: '#b4233c',
           strong: '#C00B19',
           subtle: '#FFF2F2',
         },
         warning: {
           DEFAULT: '#DBB316',
-          dark: '#EF8833',
+          dark: '#8a5a00',
           subtle: '#FFF6E6',
         },
+        info: {
+          DEFAULT: '#175cd3',
+          subtle: '#eff6ff',
+        },
       },
       fontFamily: {
         sans: ['Inter', 'system-ui', 'sans-serif'],
@@ -257,6 +315,16 @@ module.exports = {
         'body-sm': ['0.875rem', { lineHeight: 1.4, fontWeight: 400 }],
         caption: ['0.75rem', { lineHeight: 1.3, fontWeight: 400 }],
       },
+      borderRadius: {
+        control: '0.5rem',
+        panel: '0.75rem',
+      },
+      boxShadow: {
+        card:
+          '0 1px 2px rgb(23 32 51 / 0.04), 0 1px 3px rgb(23 32 51 / 0.06)',
+        floating:
+          '0 12px 32px rgb(23 32 51 / 0.12), 0 2px 8px rgb(23 32 51 / 0.06)',
+      },
     },
   },
 };

package/libs/africanies-ui/src/lib/action-menu/action-menu.component.ts

@@ -158,7 +158,7 @@ const MENU_PANEL_POSITIONS: ConnectedPosition[] = [
     >
       <div
         #panel
-        class="min-w-44 rounded-md border border-border bg-white py-1 shadow-lg outline-none dark:border-white/15 dark:bg-ink-950"
+        class="min-w-44 rounded-md border border-border bg-surface py-1 shadow-floating outline-none dark:border-white/15 dark:bg-ink-950"
         role="menu"
         tabindex="-1"
         [attr.aria-label]="ariaLabel()"
@@ -246,10 +246,10 @@ export class ActionMenuComponent {
     const base =
       'flex w-full cursor-pointer items-center gap-2 px-3 py-2 text-body-sm no-underline transition-colors ' +
       'disabled:cursor-not-allowed disabled:opacity-50 ' +
-      'focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-[-2px] focus-visible:outline-ink';
+      'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-focus';
     if (item.danger) {
       return (
-        `${base} text-danger ` +
+        `${base} text-danger-dark dark:text-danger ` +
         (active
           ? 'bg-danger-subtle dark:bg-danger/15'
           : 'hover:bg-danger-subtle dark:hover:bg-danger/15')

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

@@ -144,11 +144,11 @@ export class AlertComponent {
   protected readonly iconClass = computed(() => {
     switch (this.variant()) {
       case 'success':
-        return 'text-export dark:text-export-light';
+        return 'text-export-strong dark:text-export-light';
       case 'warning':
         return 'text-warning-dark dark:text-warning';
       case 'danger':
-        return 'text-danger';
+        return 'text-danger-dark dark:text-danger';
       default:
         return 'text-ink-blue dark:text-neutral-300';
     }
@@ -158,11 +158,11 @@ export class AlertComponent {
     const base = 'm-0 text-body font-medium';
     switch (this.variant()) {
       case 'success':
-        return `${base} text-export dark:text-export-light`;
+        return `${base} text-export-strong dark:text-export-light`;
       case 'warning':
         return `${base} text-warning-dark dark:text-warning`;
       case 'danger':
-        return `${base} text-danger`;
+        return `${base} text-danger-dark dark:text-danger`;
       default:
         return `${base} text-ink dark:text-white`;
     }

package/libs/africanies-ui/src/lib/avatar/avatar-menu.component.ts

@@ -45,7 +45,7 @@ import { AvatarComponent, type AvatarSize } from './avatar.component';
       <button
         type="button"
         africaniesActionMenuTrigger
-        class="inline-flex cursor-pointer items-center gap-1 rounded-lg p-0.5 pr-1 transition-colors hover:bg-background-welcome focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ink disabled:cursor-not-allowed disabled:opacity-50 dark:hover:bg-white/10"
+        class="inline-flex cursor-pointer items-center gap-1 rounded-lg p-0.5 pr-1 transition-colors hover:bg-background-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-focus disabled:cursor-not-allowed disabled:opacity-50 dark:hover:bg-white/10"
         [attr.aria-label]="ariaLabel()"
       >
         <africanies-avatar [name]="name()" [src]="src()" [size]="size()" />
@@ -53,7 +53,7 @@ import { AvatarComponent, type AvatarSize } from './avatar.component';
           <africanies-icon
             name="chevron-down"
             [size]="14"
-            class="shrink-0 text-neutral-500 dark:text-neutral-400"
+            class="shrink-0 text-neutral-600 dark:text-neutral-400"
             aria-hidden="true"
           />
         }

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

@@ -65,7 +65,7 @@ describe('ButtonComponent', () => {
   });
 
   it('should apply primary variant classes by default (SFN / export)', () => {
-    expect(button.className).toContain('bg-export');
+    expect(button.className).toContain('bg-export-strong');
     expect(button.className).toContain('text-white');
   });
 
@@ -73,21 +73,21 @@ describe('ButtonComponent', () => {
     mode.set('stn');
     fixture.detectChanges();
 
-    expect(button.className).toContain('bg-import');
-    expect(button.className).not.toContain('bg-export');
+    expect(button.className).toContain('bg-import-strong');
+    expect(button.className).not.toContain('bg-export-strong');
   });
 
   it('should switch ghost-primary text accent with shipping mode', () => {
     host.variant.set('ghost-primary');
     fixture.detectChanges();
-    expect(button.className).toContain('text-export');
+    expect(button.className).toContain('text-export-strong');
     expect(button.className).toContain('bg-transparent');
 
     mode.set('stn');
     fixture.detectChanges();
 
-    expect(button.className).toContain('text-import');
-    expect(button.className).not.toContain('text-export');
+    expect(button.className).toContain('text-import-strong');
+    expect(button.className).not.toContain('text-export-strong');
   });
 
   it('should switch variant and size classes', () => {
@@ -95,7 +95,7 @@ describe('ButtonComponent', () => {
     host.size.set('sm');
     fixture.detectChanges();
 
-    expect(button.className).toContain('bg-danger');
+    expect(button.className).toContain('bg-danger-dark');
     expect(button.className).toContain('h-8');
   });
 

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

@@ -153,7 +153,7 @@ export class ButtonComponent {
   protected readonly hostClass = computed(() => {
     const base =
       'relative inline-flex items-center justify-center gap-2 box-border font-sans font-medium rounded-md border transition-colors cursor-pointer ' +
-      'focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ink ' +
+      'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-focus ' +
       'disabled:opacity-50 disabled:cursor-not-allowed aria-disabled:opacity-50 aria-disabled:cursor-not-allowed';
 
     const sizes: Record<ButtonSize, string> = {
@@ -172,19 +172,19 @@ export class ButtonComponent {
       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';
+        'bg-surface dark:bg-ink-950 text-ink dark:text-white border-control dark:border-white/15 hover:bg-background-hover dark:hover:bg-white/10';
     } else if (variant === 'ghost') {
       variantClass =
-        'bg-transparent text-ink dark:text-white border-transparent hover:bg-background-welcome dark:hover:bg-white/10';
+        'bg-transparent text-ink dark:text-white border-transparent hover:bg-background-hover dark:hover:bg-white/10';
     } else if (variant === 'ghost-danger') {
       variantClass =
-        'bg-transparent text-danger border-transparent hover:bg-danger-subtle dark:hover:bg-danger/10';
+        'bg-transparent text-danger-dark border-transparent hover:bg-danger-subtle dark:text-danger dark:hover:bg-danger/10';
     } else if (variant === 'underline') {
       variantClass =
         'bg-transparent text-ink dark:text-white border-transparent underline underline-offset-2 hover:opacity-80 !px-0 !h-auto !min-h-0';
     } else {
       variantClass =
-        'bg-danger text-white border-transparent hover:bg-danger-dark';
+        'bg-danger-dark text-white border-transparent hover:bg-danger-strong dark:bg-danger dark:hover:bg-danger-dark';
     }
 
     return `${base} ${sizes[this.size()]} ${variantClass}`;

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

@@ -63,7 +63,7 @@ export type ChipSize = 'sm' | 'md';
     @if (removable()) {
       <button
         type="button"
-        class="inline-flex shrink-0 cursor-pointer items-center justify-center rounded-sm opacity-70 transition-opacity hover:opacity-100 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-ink"
+        class="inline-flex shrink-0 cursor-pointer items-center justify-center rounded-sm opacity-70 transition-opacity hover:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-focus"
         [attr.aria-label]="removeLabel()"
         (click)="onRemove($event)"
       >
@@ -118,13 +118,13 @@ export class ChipComponent {
     switch (this.variant()) {
       case 'success':
       case 'export':
-        return 'bg-export-subtle text-export dark:bg-export/15 dark:text-export-light';
+        return 'bg-export-subtle text-export-strong dark:bg-export/15 dark:text-export-light';
       case 'import':
-        return 'bg-import-subtle text-import dark:bg-import/15 dark:text-import-light';
+        return 'bg-import-subtle text-import-strong dark:bg-import/15 dark:text-import-light';
       case 'warning':
         return 'bg-warning-subtle text-warning-dark dark:bg-warning/15 dark:text-warning';
       case 'danger':
-        return 'bg-danger-subtle text-danger dark:bg-danger/15 dark:text-danger';
+        return 'bg-danger-subtle text-danger-dark dark:bg-danger/15 dark:text-danger';
       default:
         return 'bg-border/60 text-ink dark:bg-white/10 dark:text-neutral-200';
     }