@africanies/angular-web-sdk 0.1.6 → 0.1.8

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: '#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,50 +224,86 @@ module.exports = {
       colors: {
         black: '#000000',
         white: '#ffffff',
+        surface: {
+          DEFAULT: '#ffffff',
+          subtle: '#f8fafc',
+          hover: '#e9eef5',
+          sunken: '#eef2f6',
+        },
         ink: {
-          DEFAULT: '#212529',
+          // 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: {
-          // Light chrome on white — match form field borders (`neutral-300`).
-          // Previous `#f0f2f5` was too close to white and washed out.
-          DEFAULT: '#c9d5e1',
+          // 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: {
-          welcome: '#f9fafb',
+          // Cooler canvas and a clearer inset level beneath white surfaces.
+          chrome: '#f4f6f8',
+          // Nested wells inside white cards.
+          well: '#eef2f6',
+          // Auth / welcome / soft hover.
+          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: ['Arial', 'sans-serif'],
+        sans: ['Inter', 'system-ui', 'sans-serif'],
       },
       fontSize: {
         // PROVISIONAL — see THEME.md; sizes may tighten after design QA.
@@ -248,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

@@ -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'
@@ -151,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> = {
@@ -167,20 +169,22 @@ 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';
+        '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';
     }

package/libs/africanies-ui/src/lib/content-stack/content-stack.component.ts

@@ -35,7 +35,7 @@ import { ChangeDetectionStrategy, Component, input } from '@angular/core';
         </p>
       }
       @if (extraLine()) {
-        <p class="m-0 text-caption text-neutral-500 dark:text-neutral-400">
+        <p class="m-0 text-caption text-neutral-600 dark:text-neutral-400">
           {{ extraLine() }}
         </p>
       }

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-indicator.component.ts

@@ -132,10 +132,10 @@ import { ButtonComponent } from '../button/button.component';
           aria-hidden="true"
         >
           <span
-            class="africanies-error-indicator-dot-ping absolute inset-0 rounded-full bg-red-400 opacity-75"
+            class="africanies-error-indicator-dot-ping absolute inset-0 rounded-full bg-danger-dark opacity-75"
           ></span>
           <span
-            class="africanies-error-indicator-dot-core relative size-3 rounded-full bg-red-500"
+            class="africanies-error-indicator-dot-core relative size-3 rounded-full bg-danger-dark"
           ></span>
         </span>
 
@@ -150,7 +150,7 @@ import { ButtonComponent } from '../button/button.component';
           type="button"
           variant="ghost"
           size="sm"
-          class="africanies-error-indicator-retry shrink-0 !min-h-0 !border-transparent !bg-transparent !px-1.5 !py-0.5 !text-danger hover:!bg-danger/10 dark:hover:!bg-danger/20"
+          class="africanies-error-indicator-retry shrink-0 !min-h-0 !border-transparent !bg-transparent !px-1.5 !py-0.5 !text-danger-dark hover:!bg-danger/10 dark:hover:!bg-danger/20"
           [class.opacity-50]="disabled()"
           [disabled]="disabled()"
           (click)="onRetry()"

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

@@ -35,12 +35,12 @@ import { ButtonComponent } from '../button/button.component';
       class="flex flex-col items-center justify-center gap-3 py-10 px-4 text-center text-ink dark:text-white"
       role="alert"
     >
-      <africanies-icon name="warning" [size]="32" class="text-danger" />
-      <p class="m-0 text-body text-danger max-w-md">{{ message() }}</p>
+      <africanies-icon name="warning" [size]="32" class="text-danger-dark dark:text-danger" />
+      <p class="m-0 text-body text-danger-dark max-w-md dark:text-danger">{{ message() }}</p>
       <button
         africanies-button
         type="button"
-        variant="secondary"
+        variant="flat"
         [disabled]="refreshing()"
         (click)="retry.emit()"
       >

package/libs/africanies-ui/src/lib/filters/filter-drawer.panel.ts

@@ -26,10 +26,6 @@ import {
 
 import { ButtonComponent } from '../button/button.component';
 import { DatePickerComponent } from '../forms/date-picker/date-picker.component';
-import {
-  RadioComponent,
-  type RadioOption,
-} from '../forms/radio/radio.component';
 import { SelectComponent } from '../forms/select/select.component';
 import type { SelectOption } from '../forms/select/select.types';
 import { TextInputComponent } from '../forms/text-input/text-input.component';
@@ -62,7 +58,6 @@ import { FilterQueryService } from './filter-query.service';
     AfricaniesIconComponent,
     ButtonComponent,
     DatePickerComponent,
-    RadioComponent,
     SelectComponent,
     TextInputComponent,
   ],
@@ -220,12 +215,37 @@ import { FilterQueryService } from './filter-query.service';
                   </div>
                 }
                 @case ('boolean') {
-                  <africanies-radio
-                    label=""
-                    [options]="toRadioOptions(field.options)"
-                    [value]="draft().values[field.key] ?? null"
-                    (valueChange)="onRadioChange(field.key, $event)"
-                  />
+                  <div class="flex flex-wrap gap-2">
+                    @for (opt of booleanOptions(field); track opt.value) {
+                      <button
+                        type="button"
+                        class="cursor-pointer rounded-md border px-2.5 py-1.5 text-body-sm transition-colors"
+                        [style.color]="
+                          draft().values[field.key] === opt.value
+                            ? opt.color ?? null
+                            : null
+                        "
+                        [style.border-color]="
+                          draft().values[field.key] === opt.value
+                            ? opt.color ?? null
+                            : null
+                        "
+                        [style.background-color]="
+                          draft().values[field.key] === opt.value && opt.color
+                            ? opt.color + '1A'
+                            : null
+                        "
+                        [class]="
+                          draft().values[field.key] === opt.value
+                            ? 'font-medium'
+                            : 'border-neutral-300 text-neutral-600 hover:border-neutral-400 dark:border-white/15 dark:text-neutral-300'
+                        "
+                        (click)="setFieldValue(field.key, opt.value)"
+                      >
+                        {{ opt.label }}
+                      </button>
+                    }
+                  </div>
                 }
                 @case ('select') {
                   <!-- Label already shown in the section header — avoid double label. -->
@@ -284,7 +304,7 @@ import { FilterQueryService } from './filter-query.service';
               type="button"
               variant="ghost"
               size="sm"
-              class="shrink-0 !min-h-0 self-start !px-1 !py-0 text-neutral-500 hover:text-ink dark:text-neutral-400 dark:hover:text-white"
+              class="shrink-0 !min-h-0 self-start !px-1 !py-0 text-neutral-600 hover:text-ink dark:text-neutral-400 dark:hover:text-white"
               aria-label="Dismiss"
               (click)="applyError.set(null)"
             >
@@ -507,14 +527,6 @@ export class FilterDrawerPanel {
     this.draft.update((s) => ({ ...s, order: opt?.value }));
   }
 
-  protected onRadioChange(key: string, value: string | null): void {
-    if (value == null) {
-      this.clearField(key);
-      return;
-    }
-    this.setFieldValue(key, value);
-  }
-
   protected onSelectChange(
     key: string,
     selected: SelectOption<string> | SelectOption<string>[] | null,
@@ -678,13 +690,18 @@ export class FilterDrawerPanel {
     );
   }
 
-  protected toRadioOptions(
-    options: FilterOptionModel[] | undefined,
-  ): RadioOption<string>[] {
-    return (options ?? []).map((o) => ({
-      label: o.label,
-      value: o.value,
-    }));
+  /**
+   * Boolean Yes/No chips. Prefer field.options when present; otherwise default
+   * colored Yes/No so every boolean filter stays visually distinct.
+   */
+  protected booleanOptions(field: FilterFieldModel): FilterOptionModel[] {
+    if (field.options?.length) {
+      return field.options;
+    }
+    return [
+      { value: '1', label: 'Yes', color: '#25945c' },
+      { value: '0', label: 'No', color: '#FF001C' },
+    ];
   }
 
   protected onReset(): void {

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

@@ -19,6 +19,7 @@ import { ModeColorService } from '@africanies/africanies-theme';
 
 import {
   FORM_ERROR_CLASS,
+  FORM_FOCUS_VISIBLE_PEER_CLASS,
   FORM_HINT_CLASS,
 } from '../form-field.classes';
 
@@ -132,7 +133,7 @@ export class CheckboxComponent implements ControlValueAccessor {
   protected readonly markClass = computed(() => {
     const base =
       'pointer-events-none flex size-4 items-center justify-center rounded border text-white transition-colors ' +
-      'peer-focus-visible:outline peer-focus-visible:outline-2 peer-focus-visible:outline-offset-2 peer-focus-visible:outline-ink';
+      FORM_FOCUS_VISIBLE_PEER_CLASS;
     const err = this.error() ? ' !border-danger dark:!border-danger' : '';
     if (this.value()) {
       const c = this.modeColor.classes();

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

@@ -77,13 +77,13 @@ 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
             class="flex flex-col items-center gap-3 rounded-md bg-background-welcome px-6 py-10 text-center ring-1 ring-border dark:bg-white/5 dark:ring-white/15"
           >
-            <africanies-icon name="eye-slash" [size]="32" class="text-neutral-500" />
+            <africanies-icon name="eye-slash" [size]="32" class="text-neutral-600" />
             <p class="m-0 text-body font-medium text-ink dark:text-white">
               Preview not available
             </p>

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()"
@@ -341,7 +341,7 @@ let nextFileUploadId = 0;
                   <span> · </span>
                   <button
                     type="button"
-                    class="cursor-pointer bg-transparent p-0 text-caption font-medium text-ink underline underline-offset-2 hover:text-neutral-700 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ink dark:text-white dark:hover:text-neutral-200"
+                    class="cursor-pointer bg-transparent p-0 text-caption font-medium text-ink underline underline-offset-2 hover:text-neutral-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ink dark:text-white dark:hover:text-neutral-200"
                     (click)="openPreview(item); $event.stopPropagation()"
                   >
                     View