@africanies/angular-web-sdk 0.1.2 → 0.1.3

package/.nx/cache/12276756491762927325/dist/libs/africanies-theme/README.md

@@ -0,0 +1,46 @@
+# @africanies/africanies-theme
+
+AFRICANIES design tokens (Tailwind preset), light/dark {@link ThemeService}, and shipping-mode accent helpers ({@link ModeColorService}).
+
+## Install
+
+```bash
+npm install @africanies/africanies-theme @africanies/africanies-storage @africanies/africanies-core
+```
+
+## Tailwind
+
+```js
+// tailwind.config.js
+module.exports = {
+  presets: [require('@africanies/africanies-theme/tailwind-preset')],
+  content: [
+    './src/**/*.{html,ts}',
+    './node_modules/@africanies/africanies-ui/**/*.{js,mjs}',
+  ],
+};
+```
+
+> The preset file is published as `tailwind-preset.cjs` (package is ESM) but resolved via the `./tailwind-preset` export above.
+
+See [THEME.md](./THEME.md) for the full palette, provisional typography scale, and legacy `$border-gray` mapping notes.
+
+## ThemeService
+
+```ts
+import { inject, provideAppInitializer } from '@angular/core';
+import { ThemeService } from '@africanies/africanies-theme';
+
+provideAppInitializer(() => {
+  inject(ThemeService);
+});
+```
+
+## ModeColorService
+
+```ts
+const modeColor = inject(ModeColorService);
+const { text, bg, bgSubtle } = modeColor.classes();
+```
+
+Class strings are literals so Tailwind does not purge them.

package/.nx/cache/12276756491762927325/dist/libs/africanies-theme/fesm2022/africanies-africanies-theme.mjs

@@ -0,0 +1,215 @@
+import * as i0 from '@angular/core';
+import { inject, computed, Injectable, signal } from '@angular/core';
+import { ShippingModeService } from '@africanies/africanies-core';
+import { DOCUMENT } from '@angular/common';
+import { STORAGE_TOKEN, AFRICANIES_THEME_KEY } from '@africanies/africanies-storage';
+
+/**
+ * Tailwind safelist side-effect for shipping-mode color utilities.
+ *
+ * WHY this file exists: JIT/content scanning only keeps class names that appear
+ * as *literal strings* in scanned sources. {@link ModeColorService} already
+ * returns these literals, but keeping a dedicated comment list makes the
+ * contract obvious for consumers who configure `safelist` or purge plugins.
+ *
+ * Do not rename these strings without updating ModeColorService and THEME.md.
+ *
+ * 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
+ *
+ * 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
+ */
+const MODE_COLOR_SAFELIST = [
+    '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',
+    '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',
+];
+
+/**
+ * Maps {@link ShippingModeService} to mode-accent Tailwind classes.
+ *
+ * - **SFN** → export green is primary
+ * - **STN** → import orange is primary
+ *
+ * WHY literal class strings: Tailwind's scanner cannot see dynamically built
+ * names like `` `text-${token}` ``. Returning full literals (`text-export`, …)
+ * keeps utilities in the compiled CSS. See {@link MODE_COLOR_SAFELIST}.
+ *
+ * @example
+ * ```html
+ * @let colors = modeColor.classes();
+ * <button type="button" [class]="colors.primary">Save</button>
+ * <span [class]="colors.text">Mode accent</span>
+ * ```
+ */
+class ModeColorService {
+    shippingMode = inject(ShippingModeService);
+    /**
+     * Mode-dependent utility classes. Recomputes when shipping mode changes.
+     */
+    classes = computed(() => {
+        // Literal strings required for Tailwind content detection — do not interpolate.
+        if (this.shippingMode.mode() === 'sfn') {
+            return {
+                text: 'text-export',
+                bg: 'bg-export',
+                bgSubtle: 'bg-export-subtle',
+                border: 'border-export',
+                primary: 'bg-export text-white border-transparent hover:bg-export-light',
+                ghostPrimary: 'bg-transparent text-export border-transparent hover:bg-export-subtle dark:hover:bg-export/15',
+                soft: 'bg-export-subtle dark:bg-export/15',
+                softHover: 'hover:bg-export-subtle dark:hover:bg-export/15',
+            };
+        }
+        return {
+            text: 'text-import',
+            bg: 'bg-import',
+            bgSubtle: 'bg-import-subtle',
+            border: 'border-import',
+            primary: 'bg-import text-white border-transparent hover:bg-import-light',
+            ghostPrimary: 'bg-transparent text-import border-transparent hover:bg-import-subtle dark:hover:bg-import/15',
+            soft: 'bg-import-subtle dark:bg-import/15',
+            softHover: 'hover:bg-import-subtle dark:hover:bg-import/15',
+        };
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ModeColorService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ModeColorService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ModeColorService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+/**
+ * Application light/dark theme preference.
+ *
+ * WHY signals (not BehaviorSubject): theme is synchronous UI state read from
+ * templates and other services; a signal avoids RxJS subscription boilerplate
+ * and matches Angular 22 change detection. Persistence goes through
+ * {@link STORAGE_TOKEN} so tests can swap storage without touching `localStorage`.
+ *
+ * Applies the Tailwind `darkMode: 'class'` contract by toggling `dark` on
+ * `document.documentElement`, and sets `color-scheme` so native UI (date
+ * pickers, scrollbars, form controls) matches the app theme — class-based
+ * dark mode alone does not restyle browser chrome.
+ *
+ * @example
+ * ```ts
+ * // app.config.ts
+ * import { inject, provideAppInitializer } from '@angular/core';
+ * import { ThemeService } from '@africanies/africanies-theme';
+ *
+ * export const appConfig = {
+ *   providers: [
+ *     provideAppInitializer(() => {
+ *       inject(ThemeService); // applies stored / system theme once
+ *     }),
+ *   ],
+ * };
+ *
+ * // In a component
+ * const theme = inject(ThemeService);
+ * theme.toggle();
+ * theme.setTheme('dark');
+ * const current = theme.theme(); // 'light' | 'dark'
+ * ```
+ */
+class ThemeService {
+    storage = inject(STORAGE_TOKEN);
+    document = inject(DOCUMENT);
+    /**
+     * Current theme. Prefer reading via `theme()` in templates / computed values
+     * rather than caching the string, so dark-class consumers stay in sync.
+     */
+    theme = signal(this.resolveInitialTheme(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "theme" }] : /* istanbul ignore next */ []));
+    constructor() {
+        this.applyToDocument(this.theme());
+    }
+    /**
+     * Sets and persists the theme, updating the `dark` class and `color-scheme`
+     * on `<html>`.
+     *
+     * @param theme - Absolute preference to store.
+     */
+    setTheme(theme) {
+        this.theme.set(theme);
+        this.applyToDocument(theme);
+        try {
+            this.storage.set(AFRICANIES_THEME_KEY, theme);
+        }
+        catch {
+            // Persistence failure must not block the in-session visual toggle —
+            // private browsing / quota issues are transient for theme preference.
+        }
+    }
+    /**
+     * Flips between light and dark.
+     *
+     * @returns The theme after the toggle.
+     */
+    toggle() {
+        const next = this.theme() === 'light' ? 'dark' : 'light';
+        this.setTheme(next);
+        return next;
+    }
+    resolveInitialTheme() {
+        try {
+            const stored = this.storage.get(AFRICANIES_THEME_KEY);
+            if (stored === 'light' || stored === 'dark') {
+                return stored;
+            }
+        }
+        catch {
+            // Fall through to system preference when storage is unavailable.
+        }
+        return this.prefersDark() ? 'dark' : 'light';
+    }
+    prefersDark() {
+        const win = this.document.defaultView;
+        return !!win?.matchMedia?.('(prefers-color-scheme: dark)').matches;
+    }
+    applyToDocument(theme) {
+        const root = this.document.documentElement;
+        if (theme === 'dark') {
+            root.classList.add('dark');
+        }
+        else {
+            root.classList.remove('dark');
+        }
+        // Native date/time pickers follow `color-scheme`, not Tailwind's `dark` class.
+        root.style.colorScheme = theme;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ThemeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ThemeService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ThemeService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { MODE_COLOR_SAFELIST, ModeColorService, ThemeService };
+//# sourceMappingURL=africanies-africanies-theme.mjs.map

package/.nx/cache/12276756491762927325/dist/libs/africanies-theme/fesm2022/africanies-africanies-theme.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"africanies-africanies-theme.mjs","sources":["../../../../libs/africanies-theme/src/lib/mode-color.safelist.ts","../../../../libs/africanies-theme/src/lib/mode-color.service.ts","../../../../libs/africanies-theme/src/lib/theme.service.ts","../../../../libs/africanies-theme/src/africanies-africanies-theme.ts"],"sourcesContent":["/**\n * Tailwind safelist side-effect for shipping-mode color utilities.\n *\n * WHY this file exists: JIT/content scanning only keeps class names that appear\n * as *literal strings* in scanned sources. {@link ModeColorService} already\n * returns these literals, but keeping a dedicated comment list makes the\n * contract obvious for consumers who configure `safelist` or purge plugins.\n *\n * Do not rename these strings without updating ModeColorService and THEME.md.\n *\n * SFN (export / green):\n * text-export bg-export bg-export-subtle bg-export-light border-export\n * hover:bg-export-light hover:bg-export-subtle dark:bg-export/15 dark:hover:bg-export/15\n *\n * STN (import / orange):\n * text-import bg-import bg-import-subtle bg-import-light border-import\n * hover:bg-import-light hover:bg-import-subtle dark:bg-import/15 dark:hover:bg-import/15\n */\nexport const MODE_COLOR_SAFELIST = [\n  'text-export',\n  'bg-export',\n  'bg-export-subtle',\n  'bg-export-light',\n  'border-export',\n  'hover:bg-export-light',\n  'hover:bg-export-subtle',\n  'dark:bg-export/15',\n  'dark:hover:bg-export/15',\n  'text-import',\n  'bg-import',\n  'bg-import-subtle',\n  'bg-import-light',\n  'border-import',\n  'hover:bg-import-light',\n  'hover:bg-import-subtle',\n  'dark:bg-import/15',\n  'dark:hover:bg-import/15',\n] as const;\n","import { computed, inject, Injectable } from '@angular/core';\n\nimport { ShippingModeService } from '@africanies/africanies-core';\n\n/**\n * Tailwind class bundle for the active shipping mode (SFN export / STN import).\n *\n * Use these for **primary** product chrome: CTAs, selected controls, progress,\n * and accent text. Semantic colors (danger / warning) stay mode-independent.\n */\nexport interface ModeColorClasses {\n  /** Text color utility, e.g. `text-export`. */\n  text: string;\n  /** Solid background utility, e.g. `bg-export`. */\n  bg: string;\n  /** Soft background utility, e.g. `bg-export-subtle`. */\n  bgSubtle: string;\n  /** Border matching the mode accent, e.g. `border-export`. */\n  border: string;\n  /**\n   * Filled primary CTA — `variant=\"primary\"` on buttons.\n   * Includes hover utility as a literal so Tailwind keeps it.\n   */\n  primary: string;\n  /**\n   * Transparent / text-only CTA — `variant=\"ghost-primary\"` on buttons.\n   * Mode accent text + soft hover fill.\n   */\n  ghostPrimary: string;\n  /**\n   * Soft highlight for selected / active rows (works in dark mode).\n   */\n  soft: string;\n  /**\n   * Soft hover highlight for menus and lists.\n   */\n  softHover: string;\n}\n\n/**\n * Maps {@link ShippingModeService} to mode-accent Tailwind classes.\n *\n * - **SFN** → export green is primary\n * - **STN** → import orange is primary\n *\n * WHY literal class strings: Tailwind's scanner cannot see dynamically built\n * names like `` `text-${token}` ``. Returning full literals (`text-export`, …)\n * keeps utilities in the compiled CSS. See {@link MODE_COLOR_SAFELIST}.\n *\n * @example\n * ```html\n * @let colors = modeColor.classes();\n * <button type=\"button\" [class]=\"colors.primary\">Save</button>\n * <span [class]=\"colors.text\">Mode accent</span>\n * ```\n */\n@Injectable({ providedIn: 'root' })\nexport class ModeColorService {\n  private readonly shippingMode = inject(ShippingModeService);\n\n  /**\n   * Mode-dependent utility classes. Recomputes when shipping mode changes.\n   */\n  readonly classes = computed<ModeColorClasses>(() => {\n    // Literal strings required for Tailwind content detection — do not interpolate.\n    if (this.shippingMode.mode() === 'sfn') {\n      return {\n        text: 'text-export',\n        bg: 'bg-export',\n        bgSubtle: 'bg-export-subtle',\n        border: 'border-export',\n        primary:\n          'bg-export text-white border-transparent hover:bg-export-light',\n        ghostPrimary:\n          'bg-transparent text-export border-transparent hover:bg-export-subtle dark:hover:bg-export/15',\n        soft: 'bg-export-subtle dark:bg-export/15',\n        softHover: 'hover:bg-export-subtle dark:hover:bg-export/15',\n      };\n    }\n    return {\n      text: 'text-import',\n      bg: 'bg-import',\n      bgSubtle: 'bg-import-subtle',\n      border: 'border-import',\n      primary:\n        'bg-import text-white border-transparent hover:bg-import-light',\n      ghostPrimary:\n        'bg-transparent text-import border-transparent hover:bg-import-subtle dark:hover:bg-import/15',\n      soft: 'bg-import-subtle dark:bg-import/15',\n      softHover: 'hover:bg-import-subtle dark:hover:bg-import/15',\n    };\n  });\n}\n","import { DOCUMENT } from '@angular/common';\nimport { inject, Injectable, signal } from '@angular/core';\n\nimport { AFRICANIES_THEME_KEY, STORAGE_TOKEN } from '@africanies/africanies-storage';\n\nimport type { Theme } from './theme.types';\n\n/**\n * Application light/dark theme preference.\n *\n * WHY signals (not BehaviorSubject): theme is synchronous UI state read from\n * templates and other services; a signal avoids RxJS subscription boilerplate\n * and matches Angular 22 change detection. Persistence goes through\n * {@link STORAGE_TOKEN} so tests can swap storage without touching `localStorage`.\n *\n * Applies the Tailwind `darkMode: 'class'` contract by toggling `dark` on\n * `document.documentElement`, and sets `color-scheme` so native UI (date\n * pickers, scrollbars, form controls) matches the app theme — class-based\n * dark mode alone does not restyle browser chrome.\n *\n * @example\n * ```ts\n * // app.config.ts\n * import { inject, provideAppInitializer } from '@angular/core';\n * import { ThemeService } from '@africanies/africanies-theme';\n *\n * export const appConfig = {\n *   providers: [\n *     provideAppInitializer(() => {\n *       inject(ThemeService); // applies stored / system theme once\n *     }),\n *   ],\n * };\n *\n * // In a component\n * const theme = inject(ThemeService);\n * theme.toggle();\n * theme.setTheme('dark');\n * const current = theme.theme(); // 'light' | 'dark'\n * ```\n */\n@Injectable({ providedIn: 'root' })\nexport class ThemeService {\n  private readonly storage = inject(STORAGE_TOKEN);\n  private readonly document = inject(DOCUMENT);\n\n  /**\n   * Current theme. Prefer reading via `theme()` in templates / computed values\n   * rather than caching the string, so dark-class consumers stay in sync.\n   */\n  readonly theme = signal<Theme>(this.resolveInitialTheme());\n\n  constructor() {\n    this.applyToDocument(this.theme());\n  }\n\n  /**\n   * Sets and persists the theme, updating the `dark` class and `color-scheme`\n   * on `<html>`.\n   *\n   * @param theme - Absolute preference to store.\n   */\n  setTheme(theme: Theme): void {\n    this.theme.set(theme);\n    this.applyToDocument(theme);\n    try {\n      this.storage.set(AFRICANIES_THEME_KEY, theme);\n    } catch {\n      // Persistence failure must not block the in-session visual toggle —\n      // private browsing / quota issues are transient for theme preference.\n    }\n  }\n\n  /**\n   * Flips between light and dark.\n   *\n   * @returns The theme after the toggle.\n   */\n  toggle(): Theme {\n    const next: Theme = this.theme() === 'light' ? 'dark' : 'light';\n    this.setTheme(next);\n    return next;\n  }\n\n  private resolveInitialTheme(): Theme {\n    try {\n      const stored = this.storage.get<Theme>(AFRICANIES_THEME_KEY);\n      if (stored === 'light' || stored === 'dark') {\n        return stored;\n      }\n    } catch {\n      // Fall through to system preference when storage is unavailable.\n    }\n    return this.prefersDark() ? 'dark' : 'light';\n  }\n\n  private prefersDark(): boolean {\n    const win = this.document.defaultView;\n    return !!win?.matchMedia?.('(prefers-color-scheme: dark)').matches;\n  }\n\n  private applyToDocument(theme: Theme): void {\n    const root = this.document.documentElement;\n    if (theme === 'dark') {\n      root.classList.add('dark');\n    } else {\n      root.classList.remove('dark');\n    }\n    // Native date/time pickers follow `color-scheme`, not Tailwind's `dark` class.\n    root.style.colorScheme = theme;\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/.nx/cache/12276756491762927325/dist/libs/africanies-theme/package.json

@@ -0,0 +1,35 @@
+{
+  "name": "@africanies/africanies-theme",
+  "version": "0.0.2",
+  "peerDependencies": {
+    "@angular/common": "^22.0.0",
+    "@angular/core": "^22.0.0",
+    "@africanies/africanies-core": ">=0.0.2 <0.1.0",
+    "@africanies/africanies-storage": ">=0.0.1 <0.1.0"
+  },
+  "sideEffects": false,
+  "publishConfig": {
+    "access": "public"
+  },
+  "exports": {
+    "./tailwind-preset": "./tailwind-preset.cjs",
+    "./package.json": {
+      "default": "./package.json"
+    },
+    ".": {
+      "types": "./types/africanies-africanies-theme.d.ts",
+      "default": "./fesm2022/africanies-africanies-theme.mjs"
+    }
+  },
+  "files": [
+    "**/*",
+    "tailwind-preset.cjs",
+    "THEME.md"
+  ],
+  "module": "fesm2022/africanies-africanies-theme.mjs",
+  "typings": "types/africanies-africanies-theme.d.ts",
+  "type": "module",
+  "dependencies": {
+    "tslib": "^2.3.0"
+  }
+}

package/.nx/cache/12276756491762927325/dist/libs/africanies-theme/tailwind-preset.cjs

@@ -0,0 +1,245 @@
+/**
+ * Shared Tailwind preset for AFRICANIES product UIs.
+ *
+ * WHY a preset (not only CSS variables): consuming apps and `@africanies/africanies-ui`
+ * already use Tailwind utility classes. Shipping the palette as a preset keeps
+ * class names (`text-export`, `bg-import-subtle`, …) consistent and scannable
+ * by Tailwind's content detection across packages.
+ *
+ * Shipped as `.cjs` because ng-packagr publishes this package with
+ * `"type": "module"` — a `.js` CommonJS file would break
+ * `require('@africanies/africanies-theme/tailwind-preset')`.
+ *
+ * Consumer setup (see THEME.md):
+ *   presets: [require('@africanies/africanies-theme/tailwind-preset')]
+ *   content: app sources + ./node_modules/@africanies/africanies-ui (js/mjs)
+ *
+ * Also injects base autofill overrides so Chrome/Safari do not paint a
+ * yellow/blue fill over AFRICANIES form shells (`bg-white` / `dark:bg-ink-950`),
+ * and a pointer cursor on interactive controls.
+ *
+ * @type {import('tailwindcss').Config}
+ */
+
+/**
+ * Pointer cursor on clickable controls.
+ *
+ * WHY base CSS (not only `cursor-pointer` utilities): browsers use
+ * `cursor: default` on `button`, and Tailwind v4 content detection often
+ * skips pnpm-linked `@africanies/africanies-ui` bundles so the utility is never emitted.
+ *
+ * @param {import('tailwindcss/types/config').PluginAPI} api
+ */
+function africaniesInteractiveCursorPlugin({ addBase }) {
+  addBase({
+    [[
+      'a[href]',
+      'button:not(:disabled):not([aria-disabled="true"])',
+      'summary',
+      'label[for]',
+      'select:not(:disabled)',
+      'input[type="button"]:not(:disabled)',
+      'input[type="submit"]:not(:disabled)',
+      'input[type="reset"]:not(:disabled)',
+      'input[type="checkbox"]:not(:disabled)',
+      'input[type="radio"]:not(:disabled)',
+      'input[type="file"]:not(:disabled)',
+      '[role="button"]:not([aria-disabled="true"])',
+      '[role="link"]:not([aria-disabled="true"])',
+      '[role="menuitem"]:not([aria-disabled="true"])',
+      '[role="option"]:not([aria-disabled="true"])',
+      '[role="tab"]:not([aria-disabled="true"])',
+      '[role="checkbox"]:not([aria-disabled="true"])',
+      '[role="radio"]:not([aria-disabled="true"])',
+      '[role="switch"]:not([aria-disabled="true"])',
+    ].join(', ')]: {
+      cursor: 'pointer',
+    },
+    ':disabled, [aria-disabled="true"]': {
+      cursor: 'not-allowed',
+    },
+  });
+}
+
+/**
+ * Neutralize browser autofill chrome so fields keep AFRICANIES tokens.
+ *
+ * WHY inset box-shadow (not `background-color`): WebKit ignores background
+ * on `:-webkit-autofill`. A large inset shadow matches the field shell
+ * (`white` / `ink-950`) and `-webkit-text-fill-color` keeps body text on
+ * `ink` / white. `.dark` matches `ThemeService` (`class` on `<html>`).
+ *
+ * @param {import('tailwindcss/types/config').PluginAPI} api
+ */
+function africaniesAutofillPlugin({ addBase }) {
+  const autofillSelectors = [
+    'input:-webkit-autofill',
+    'input:-webkit-autofill:hover',
+    'input:-webkit-autofill:focus',
+    'input:-webkit-autofill:active',
+    'textarea:-webkit-autofill',
+    'textarea:-webkit-autofill:hover',
+    'textarea:-webkit-autofill:focus',
+    'textarea:-webkit-autofill:active',
+  ].join(', ');
+
+  addBase({
+    [autofillSelectors]: {
+      WebkitTextFillColor: '#212529',
+      caretColor: '#212529',
+      boxShadow: '0 0 0 1000px #ffffff inset',
+      transition: 'background-color 99999s ease-in-out 0s',
+    },
+    [`.dark ${autofillSelectors}`]: {
+      WebkitTextFillColor: '#ffffff',
+      caretColor: '#ffffff',
+      boxShadow: '0 0 0 1000px #272729 inset',
+    },
+  });
+}
+
+/**
+ * Always emit spinner motion.
+ *
+ * WHY: Tailwind v4 content detection often skips pnpm-linked `@africanies/africanies-ui`
+ * bundles, so `animate-spin` on button loading never lands in consumer CSS.
+ *
+ * @param {import('tailwindcss/types/config').PluginAPI} api
+ */
+function africaniesSpinPlugin({ addBase }) {
+  addBase({
+    '@keyframes africanies-spin': {
+      to: { transform: 'rotate(360deg)' },
+    },
+    '.animate-spin': {
+      animation: 'africanies-spin 1s linear infinite',
+    },
+  });
+}
+
+/**
+ * Keep toasts above dialogs, drawers, and other CDK overlays.
+ *
+ * WHY: CDK sets `z-index: 1000` on overlay wrappers, panes, and backdrops.
+ * This covers overlays outside the popover top layer; inside it, ToastService
+ * re-shows the toast popover to stay in front.
+ *
+ * @param {import('tailwindcss/types/config').PluginAPI} api
+ */
+function africaniesOverlayStackPlugin({ addBase }) {
+  addBase({
+    '.cdk-global-overlay-wrapper.africanies-toast-overlay, .cdk-overlay-pane.africanies-toast-panel':
+      {
+        zIndex: '1100',
+      },
+  });
+}
+
+/**
+ * Keep overlay scrollbars off close buttons and other end-aligned chrome.
+ *
+ * WHY: modal/drawer panes used to scroll themselves. Overlay (and some
+ * classic) scrollbars paint in the padding box and cover a top-right close
+ * control. The pane stays `overflow: hidden`; the hosted component scrolls
+ * with `scrollbar-gutter: stable` so the track is reserved even before
+ * content overflows. Dialogs that split header/body can set `overflow-hidden`
+ * on the host (a utility, so it wins this base rule) and put
+ * `.africanies-overlay-scroll` on the body.
+ *
+ * @param {import('tailwindcss/types/config').PluginAPI} api
+ */
+function africaniesOverlayScrollPlugin({ addBase }) {
+  addBase({
+    '.africanies-modal-panel, .africanies-drawer-panel': {
+      overflow: 'hidden',
+      overscrollBehavior: 'contain',
+    },
+    '.africanies-modal-panel > *, .africanies-drawer-panel > *': {
+      minHeight: 0,
+      overflowX: 'hidden',
+      overflowY: 'auto',
+      overscrollBehavior: 'contain',
+      scrollbarGutter: 'stable',
+    },
+    '.africanies-drawer-panel > *': {
+      height: '100%',
+    },
+    '.africanies-overlay-scroll': {
+      overscrollBehavior: 'contain',
+      scrollbarGutter: 'stable',
+    },
+  });
+}
+
+module.exports = {
+  darkMode: 'class',
+  plugins: [
+    africaniesInteractiveCursorPlugin,
+    africaniesSpinPlugin,
+    africaniesOverlayStackPlugin,
+    africaniesOverlayScrollPlugin,
+    africaniesAutofillPlugin,
+  ],
+  theme: {
+    extend: {
+      colors: {
+        black: '#000000',
+        white: '#ffffff',
+        ink: {
+          DEFAULT: '#212529',
+          blue: '#192a3e',
+          brand: '#1c2b3f',
+          950: '#272729',
+        },
+        neutral: {
+          300: '#c9d5e1',
+          400: '#a9b5cb',
+          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',
+        },
+        background: {
+          welcome: '#f9fafb',
+        },
+        export: {
+          DEFAULT: '#1cbd5d',
+          light: '#24dc6d',
+          subtle: '#e4fff3',
+          tint: '#f2fff8',
+        },
+        import: {
+          DEFAULT: '#f08829',
+          light: '#ffa95b',
+          subtle: '#fffcef',
+        },
+        danger: {
+          DEFAULT: '#ff001c',
+          dark: '#b41433',
+          strong: '#C00B19',
+          subtle: '#FFF2F2',
+        },
+        warning: {
+          DEFAULT: '#DBB316',
+          dark: '#EF8833',
+          subtle: '#FFF6E6',
+        },
+      },
+      fontFamily: {
+        sans: ['Arial', 'sans-serif'],
+      },
+      fontSize: {
+        // PROVISIONAL — see THEME.md; sizes may tighten after design QA.
+        'heading-1': ['2.5rem', { lineHeight: 1.2, fontWeight: 700 }],
+        'heading-2': ['2rem', { lineHeight: 1.25, fontWeight: 700 }],
+        'heading-3': ['1.5rem', { lineHeight: 1.3, fontWeight: 600 }],
+        'body-lg': ['1.125rem', { lineHeight: 1.5, fontWeight: 400 }],
+        body: ['1rem', { lineHeight: 1.5, fontWeight: 400 }],
+        'body-sm': ['0.875rem', { lineHeight: 1.4, fontWeight: 400 }],
+        caption: ['0.75rem', { lineHeight: 1.3, fontWeight: 400 }],
+      },
+    },
+  },
+};