/* ===================================================================== finaxis-tokens.css · v3.0 --------------------------------------------------------------------- Single source of truth for every design token used by the Finaxis NextGen kit. Components MUST consume these variables; pages MUST NOT hard-code colours, font sizes, paddings, radii, or shadows. Naming: --fnx-- e.g. --fnx-brand-600, --fnx-ink-800 --fnx- e.g. --fnx-text-h, --fnx-success --fnx-- e.g. --fnx-bg-card, --fnx-bg-soft Dark mode is activated by adding `class="dark"` to . The finaxis-theme.js module manages persistence and brand swap. ===================================================================== */ :root { /* ---------- Brand · Royal Blue (default) ---------- */ /* finaxis-theme.js rewrites --fnx-brand-* when a different palette is picked. Components must consume --fnx-brand-*, never literal hex. */ --fnx-brand-50: #EFF6FF; --fnx-brand-100: #DBEAFE; --fnx-brand-200: #BFDBFE; --fnx-brand-300: #93C5FD; --fnx-brand-400: #60A5FA; --fnx-brand-500: #3B82F6; --fnx-brand-600: #2563EB; --fnx-brand-700: #1D4ED8; --fnx-brand-800: #1E40AF; --fnx-brand-900: #1E3A8A; /* ---------- Ink (neutral text/UI scale) ---------- */ --fnx-ink-900: #0B1220; --fnx-ink-800: #0F172A; --fnx-ink-700: #1E293B; --fnx-ink-600: #334155; --fnx-ink-500: #475569; --fnx-ink-400: #64748B; --fnx-ink-300: #94A3B8; --fnx-ink-200: #CBD5E1; --fnx-ink-100: #E2E8F0; --fnx-ink-50: #F1F5F9; --fnx-ink-0: #F8FAFC; /* ---------- Surface (backgrounds) ---------- */ --fnx-bg-page: #F4F7FB; /* outermost page colour */ --fnx-bg-card: #FFFFFF; /* tiles, cards, sheets */ --fnx-bg-soft: #F8FAFC; /* table heads, callouts */ --fnx-bg-soft-2: #F1F5F9; /* hover / muted chips */ --fnx-bg-soft-3: #FAFBFC; /* form-card head sheen */ --fnx-border: #E2E8F0; --fnx-border-2: #CBD5E1; --fnx-border-3: #F1F5F9; /* very faint divider for cart rows */ /* ---------- Semantic text ---------- */ --fnx-text-h: #0F172A; /* headings */ --fnx-text-b: #1E293B; /* body */ --fnx-text-m: #475569; /* meta */ --fnx-text-d: #64748B; /* dim */ --fnx-text-faint: #94A3B8; /* placeholder, breadcrumb separator */ --fnx-text-inv: #FFFFFF; /* on dark bg */ /* ---------- Semantic palettes (status / accent) ---------- */ --fnx-success: #16A34A; --fnx-success-600: #15803D; --fnx-success-700: #166534; --fnx-success-bg: #ECFDF5; --fnx-success-bg-2:#D1FAE5; --fnx-success-bd: #A7F3D0; --fnx-warning: #D97706; --fnx-warning-600: #B45309; --fnx-warning-700: #92400E; --fnx-warning-bg: #FFFBEB; --fnx-warning-bg-2:#FEF3C7; --fnx-warning-bd: #FDE68A; --fnx-danger: #DC2626; --fnx-danger-600: #B91C1C; --fnx-danger-700: #991B1B; --fnx-danger-bg: #FEF2F2; --fnx-danger-bg-2: #FEE2E2; --fnx-danger-bd: #FECACA; --fnx-purple: #9333EA; --fnx-purple-600: #7E22CE; --fnx-purple-700: #6B21A8; --fnx-purple-bg: #FAF5FF; --fnx-purple-bg-2: #F3E8FF; --fnx-purple-bd: #E9D5FF; --fnx-accent: #06B6D4; --fnx-accent-600: #0891B2; --fnx-accent-700: #0E7490; --fnx-accent-bg: #ECFEFF; --fnx-accent-bg-2: #CFFAFE; --fnx-accent-bd: #A5F3FC; --fnx-gold: #D97706; --fnx-gold-bg: #FFFBEB; /* ---------- Typography ---------- */ --fnx-font-sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --fnx-font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace; --fnx-font-receipt: 'Roboto Mono', ui-monospace, monospace; /* ---------- Type scale (in px to keep visual fidelity vs design) ---------- */ --fnx-fs-2xs: 9.5px; --fnx-fs-xs: 10.5px; --fnx-fs-sm: 11.5px; --fnx-fs-md: 12.5px; --fnx-fs-base: 13px; --fnx-fs-lg: 13.5px; --fnx-fs-xl: 14px; --fnx-fs-2xl: 14.5px; --fnx-fs-3xl: 15.5px; --fnx-fs-h4: 16px; --fnx-fs-h3: 18px; --fnx-fs-h2: 20px; --fnx-fs-h1: 24px; --fnx-fs-display: 32px; --fnx-lh-tight: 1.15; --fnx-lh-snug: 1.3; --fnx-lh-base: 1.5; /* ---------- Spacing (4px base) ---------- */ --fnx-space-0: 0; --fnx-space-1: 4px; --fnx-space-2: 8px; --fnx-space-3: 12px; --fnx-space-4: 16px; --fnx-space-5: 20px; --fnx-space-6: 24px; --fnx-space-8: 32px; --fnx-space-10: 40px; --fnx-space-12: 48px; /* ---------- Radius ---------- */ --fnx-radius-xs: 4px; --fnx-radius-sm: 6px; --fnx-radius-md: 8px; --fnx-radius-lg: 10px; --fnx-radius-xl: 12px; --fnx-radius-2xl: 14px; /* the canonical "card" radius */ --fnx-radius-3xl: 18px; /* modals */ --fnx-radius-pill: 999px; /* ---------- Elevation ---------- */ --fnx-shadow-1: 0 1px 2px rgba(15,23,42,0.04), 0 1px 3px rgba(15,23,42,0.06); --fnx-shadow-2: 0 4px 12px rgba(15,23,42,0.06), 0 1px 3px rgba(15,23,42,0.04); --fnx-shadow-3: 0 12px 32px -8px rgba(15,23,42,0.18), 0 4px 12px rgba(15,23,42,0.06); --fnx-shadow-4: 0 24px 64px rgba(15,23,42,0.25); --fnx-shadow-5: 0 28px 80px -16px rgba(15,23,42,0.45); --fnx-shadow-primary: 0 4px 12px rgba(37,99,235,0.30); --fnx-shadow-primary-lg: 0 8px 22px rgba(37,99,235,0.42); --fnx-shadow-success: 0 4px 12px rgba(22,163,74,0.32); --fnx-shadow-success-lg: 0 8px 22px rgba(22,163,74,0.42); --fnx-focus-ring: 0 0 0 3px rgba(59,130,246,0.18); --fnx-focus-ring-2: 0 0 0 3px rgba(59,130,246,0.35); /* ---------- Motion ---------- */ --fnx-ease: cubic-bezier(0.4, 0, 0.2, 1); --fnx-ease-out: cubic-bezier(0.16, 1, 0.3, 1); --fnx-dur-fast: 120ms; --fnx-dur-base: 180ms; --fnx-dur-slow: 250ms; /* ---------- Z-index scale ---------- */ --fnx-z-sticky: 30; --fnx-z-drawer: 50; --fnx-z-overlay: 55; --fnx-z-modal: 60; --fnx-z-toast: 80; --fnx-z-palette: 90; --fnx-z-chip: 9998; --fnx-z-tooltip: 100; } /* ===================================================================== Dark mode — keep semantic names identical; only colours change. Components do not need to know whether they are in dark mode. ===================================================================== */ html.dark { --fnx-bg-page: #0B1220; --fnx-bg-card: #0F1B2E; --fnx-bg-soft: #152238; --fnx-bg-soft-2: #1A2742; --fnx-bg-soft-3: #152238; --fnx-border: #1E2D4A; --fnx-border-2: #2E3F60; --fnx-border-3: #152238; --fnx-text-h: #F1F5F9; --fnx-text-b: #E2E8F0; --fnx-text-m: #94A3B8; --fnx-text-d: #64748B; --fnx-text-faint: #475569; --fnx-text-inv: #0F172A; --fnx-ink-50: #1A2742; --fnx-ink-100: #1E2D4A; --fnx-ink-200: #2E3F60; --fnx-brand-50: #152238; --fnx-brand-100: #1E2D4A; --fnx-brand-200: #2E3F60; --fnx-brand-500: #60A5FA; --fnx-brand-600: #3B82F6; --fnx-brand-700: #2563EB; --fnx-brand-800: #1D4ED8; --fnx-success: #22C55E; --fnx-success-bg: #0F2A1A; --fnx-success-bd: #14532D; --fnx-warning: #F59E0B; --fnx-warning-bg: #2A1F0F; --fnx-warning-bd: #78350F; --fnx-danger: #EF4444; --fnx-danger-bg: #2A0F12; --fnx-danger-bd: #7F1D1D; --fnx-purple: #A855F7; --fnx-purple-bg: #1F1230; --fnx-purple-bd: #581C87; --fnx-accent: #22D3EE; --fnx-accent-bg: #0F2229; --fnx-accent-bd: #155E75; --fnx-shadow-1: 0 1px 2px rgba(0,0,0,0.32); --fnx-shadow-2: 0 4px 12px rgba(0,0,0,0.32); --fnx-shadow-3: 0 12px 32px -8px rgba(0,0,0,0.5); --fnx-shadow-4: 0 24px 60px -12px rgba(0,0,0,0.62); --fnx-shadow-5: 0 28px 80px -16px rgba(0,0,0,0.75); --fnx-focus-ring: 0 0 0 3px rgba(96,165,250,0.32); --fnx-focus-ring-2: 0 0 0 3px rgba(96,165,250,0.55); } /* ===================================================================== Posting-status semantic tokens (SAP FI/CO + Oracle SLA lifecycle). --------------------------------------------------------------------- Added in M1 fix-round-2 (architect SA-SAP P0). M2+ FI/AP/AR surfaces consume these directly instead of overloading generic success/warning. Each status carries an fg, bg, and bd triplet. ===================================================================== */ :root { /* Parked — drafted, not yet submitted for posting. */ --fnx-posting-parked: #94A3B8; --fnx-posting-parked-bg: #F1F5F9; --fnx-posting-parked-bd: #CBD5E1; /* Posted — successfully posted to GL. */ --fnx-posting-posted: #15803D; --fnx-posting-posted-bg: #DCFCE7; --fnx-posting-posted-bd: #BBF7D0; /* Reversed — has been negated by a counter-entry. */ --fnx-posting-reversed: #B91C1C; --fnx-posting-reversed-bg: #FEE2E2; --fnx-posting-reversed-bd: #FECACA; /* Cleared — fully matched / reconciled. */ --fnx-posting-cleared: #0E7490; --fnx-posting-cleared-bg: #CFFAFE; --fnx-posting-cleared-bd: #A5F3FC; /* Open — open item (unmatched / outstanding). */ --fnx-posting-open: #B45309; --fnx-posting-open-bg: #FEF3C7; --fnx-posting-open-bd: #FDE68A; /* Hold — blocked, awaiting clearing. */ --fnx-posting-hold: #6B21A8; --fnx-posting-hold-bg: #F3E8FF; --fnx-posting-hold-bd: #E9D5FF; /* Released — approved and released for downstream processing. */ --fnx-posting-released: #1D4ED8; --fnx-posting-released-bg: #DBEAFE; --fnx-posting-released-bd: #BFDBFE; /* Hero-strip translucent chips (used over the brand-gradient login hero). */ --fnx-hero-chip-bg: rgba(255,255,255,0.16); --fnx-hero-chip-border: rgba(255,255,255,0.28); --fnx-hero-chip-text: #FFFFFF; --fnx-hero-overlay-soft: rgba(255,255,255,0.10); /* KPI sparkline fill tints (M1 round-2 SA-SAP P2 — token-ised rgba). */ --fnx-spark-stroke-blue: var(--fnx-brand-600); --fnx-spark-fill-blue: rgba(37,99,235,0.10); --fnx-spark-stroke-success: var(--fnx-success); --fnx-spark-fill-success: rgba(22,163,74,0.10); --fnx-spark-stroke-warning: var(--fnx-warning); --fnx-spark-fill-warning: rgba(217,119,6,0.10); --fnx-spark-stroke-danger: var(--fnx-danger); --fnx-spark-fill-danger: rgba(220,38,38,0.10); --fnx-spark-stroke-purple: var(--fnx-purple); --fnx-spark-fill-purple: rgba(147,51,234,0.10); --fnx-spark-stroke-accent: var(--fnx-accent); --fnx-spark-fill-accent: rgba(6,182,212,0.10); /* Density base — overridden per data-density below. */ --fnx-row-h: 46px; --fnx-cell-px: 14px; --fnx-cell-py: 10px; --fnx-density-gap: 12px; } html.dark { --fnx-posting-parked: #94A3B8; --fnx-posting-parked-bg: #1A2742; --fnx-posting-parked-bd: #2E3F60; --fnx-posting-posted: #22C55E; --fnx-posting-posted-bg: #0F2A1A; --fnx-posting-posted-bd: #14532D; --fnx-posting-reversed: #EF4444; --fnx-posting-reversed-bg: #2A0F12; --fnx-posting-reversed-bd: #7F1D1D; --fnx-posting-cleared: #22D3EE; --fnx-posting-cleared-bg: #0F2229; --fnx-posting-cleared-bd: #155E75; --fnx-posting-open: #F59E0B; --fnx-posting-open-bg: #2A1F0F; --fnx-posting-open-bd: #78350F; --fnx-posting-hold: #A855F7; --fnx-posting-hold-bg: #1F1230; --fnx-posting-hold-bd: #581C87; --fnx-posting-released: #60A5FA; --fnx-posting-released-bg: #152238; --fnx-posting-released-bd: #1E40AF; --fnx-hero-chip-bg: rgba(255,255,255,0.10); --fnx-hero-chip-border: rgba(255,255,255,0.18); --fnx-hero-chip-text: #F1F5F9; --fnx-hero-overlay-soft: rgba(255,255,255,0.06); } /* ===================================================================== Density modes — Fiori-aligned (1=Cozy, 2=Compact, 3=Condensed). --------------------------------------------------------------------- Added in M1 fix-round-2 (architect SA-SAP P1). The pip control toggles ; consumers read these vars. ===================================================================== */ html[data-density="1"] { --fnx-row-h: 52px; --fnx-cell-px: 18px; --fnx-cell-py: 14px; --fnx-density-gap: 16px; --fnx-fs-base: 14px; --fnx-fs-lg: 14.5px; } html[data-density="2"] { --fnx-row-h: 44px; --fnx-cell-px: 14px; --fnx-cell-py: 10px; --fnx-density-gap: 12px; --fnx-fs-base: 13px; --fnx-fs-lg: 13.5px; } html[data-density="3"] { --fnx-row-h: 34px; --fnx-cell-px: 10px; --fnx-cell-py: 6px; --fnx-density-gap: 8px; --fnx-fs-base: 12.5px; --fnx-fs-lg: 13px; } /* Respect users who prefer reduced motion. */ @media (prefers-reduced-motion: reduce) { :root { --fnx-dur-fast: 0ms; --fnx-dur-base: 0ms; --fnx-dur-slow: 0ms; } }