24e2708d98
Provides design tokens (variables.scss), main bank-rec stylesheet, AI suggestion strip + alternatives panel styling, and dark mode overrides. CSS classes (.o_fusion_*) will be consumed by OWL components in Tasks 28-36. Verified: all 4 SCSS files compile via libsass; web.assets_backend bundle picks up all 4 entries; 134/134 module tests pass. Made-with: Cursor
92 lines
4.0 KiB
SCSS
92 lines
4.0 KiB
SCSS
// Fusion bank reconciliation design tokens.
|
|
//
|
|
// Mirrors Enterprise's color/spacing scale where it makes sense, with
|
|
// fusion-specific additions for AI confidence bands and the suggestion
|
|
// strip. All values can be overridden in dark_mode.scss.
|
|
|
|
// ============================================================
|
|
// Colors — semantic
|
|
// ============================================================
|
|
$fusion-color-bg-primary: #ffffff;
|
|
$fusion-color-bg-secondary: #f9fafb;
|
|
$fusion-color-bg-tertiary: #f3f4f6;
|
|
$fusion-color-border: #e5e7eb;
|
|
$fusion-color-border-strong: #d1d5db;
|
|
|
|
$fusion-color-text-primary: #111827;
|
|
$fusion-color-text-secondary: #6b7280;
|
|
$fusion-color-text-muted: #9ca3af;
|
|
$fusion-color-text-inverse: #ffffff;
|
|
|
|
$fusion-color-accent: #3b82f6; // primary brand blue
|
|
$fusion-color-accent-hover: #2563eb;
|
|
$fusion-color-accent-bg: #eff6ff;
|
|
|
|
// ============================================================
|
|
// AI Confidence band colors
|
|
// ============================================================
|
|
$fusion-confidence-high: #10b981; // green
|
|
$fusion-confidence-high-bg: #ecfdf5;
|
|
$fusion-confidence-medium: #f59e0b; // amber
|
|
$fusion-confidence-medium-bg: #fffbeb;
|
|
$fusion-confidence-low: #ef4444; // red
|
|
$fusion-confidence-low-bg: #fef2f2;
|
|
$fusion-confidence-none: #9ca3af; // gray
|
|
$fusion-confidence-none-bg: #f3f4f6;
|
|
|
|
// ============================================================
|
|
// Reconciliation state colors
|
|
// ============================================================
|
|
$fusion-state-pending-bg: #fef3c7; // amber-100
|
|
$fusion-state-reconciled-bg: #d1fae5; // emerald-100
|
|
$fusion-state-partial-bg: #fde68a; // amber-200
|
|
|
|
// ============================================================
|
|
// Spacing scale (4px increments)
|
|
// ============================================================
|
|
$fusion-space-1: 0.25rem; // 4px
|
|
$fusion-space-2: 0.5rem; // 8px
|
|
$fusion-space-3: 0.75rem; // 12px
|
|
$fusion-space-4: 1rem; // 16px
|
|
$fusion-space-5: 1.25rem; // 20px
|
|
$fusion-space-6: 1.5rem; // 24px
|
|
$fusion-space-8: 2rem; // 32px
|
|
|
|
// ============================================================
|
|
// Typography
|
|
// ============================================================
|
|
$fusion-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
|
$fusion-font-size-xs: 0.75rem; // 12px
|
|
$fusion-font-size-sm: 0.875rem; // 14px
|
|
$fusion-font-size-base: 1rem; // 16px
|
|
$fusion-font-size-lg: 1.125rem; // 18px
|
|
$fusion-font-size-xl: 1.25rem; // 20px
|
|
|
|
$fusion-font-weight-normal: 400;
|
|
$fusion-font-weight-medium: 500;
|
|
$fusion-font-weight-semibold: 600;
|
|
$fusion-font-weight-bold: 700;
|
|
|
|
// ============================================================
|
|
// Borders + radii
|
|
// ============================================================
|
|
$fusion-border-radius-sm: 0.25rem;
|
|
$fusion-border-radius: 0.375rem;
|
|
$fusion-border-radius-md: 0.5rem;
|
|
$fusion-border-radius-lg: 0.75rem;
|
|
|
|
// ============================================================
|
|
// Shadows
|
|
// ============================================================
|
|
$fusion-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
|
|
$fusion-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
|
|
$fusion-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
|
|
$fusion-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
|
|
|
|
// ============================================================
|
|
// Animation
|
|
// ============================================================
|
|
$fusion-transition-fast: 150ms ease-in-out;
|
|
$fusion-transition-base: 200ms ease-in-out;
|
|
$fusion-transition-slow: 300ms ease-in-out;
|