/* ============================================================================= Relite Logistics — Design System : TOKENS (P1 Wave 0) ============================================================================= The single source of truth for colour, type, spacing, radii and elevation. This file declares custom properties ONLY. It paints nothing on its own, so it is safe to load anywhere. All visual rules live in components.css and consume these tokens — never hard-code a hex value in a panel view again. Palette anchor: the brand green #1ab394 is Inspinia's primary and is kept as --ds-brand-500 so the product still reads as itself. Everything around it (the neutral ramp, semantic colours, shadows, type) is rebuilt to a modern scale. Load order: this file first, then components.css AFTER bootstrap/theme CSS so component rules can win over vendor defaults without editing vendor files. Dark theme ships ready but not enabled: set data-theme="dark" on . ============================================================================= */ :root { /* --------------------------------------------------------------------- Brand ramp — built around Inspinia's #1ab394 (hue ~166) --------------------------------------------------------------------- */ --ds-brand-50: #eefbf6; --ds-brand-100: #d3f5e9; --ds-brand-200: #a9ead6; --ds-brand-300: #75d9bd; --ds-brand-400: #41c2a2; --ds-brand-500: #1ab394; /* anchor — legacy Inspinia primary */ --ds-brand-600: #109078; --ds-brand-700: #0e7361; --ds-brand-800: #0e5b4e; --ds-brand-900: #0d4b41; /* --------------------------------------------------------------------- Neutral ramp — cool slate. Replaces Inspinia's #e7eaec / #676a6c greys. --------------------------------------------------------------------- */ --ds-neutral-0: #ffffff; --ds-neutral-50: #f8fafc; --ds-neutral-100: #f1f5f9; --ds-neutral-200: #e2e8f0; --ds-neutral-300: #cbd5e1; --ds-neutral-400: #94a3b8; --ds-neutral-500: #64748b; --ds-neutral-600: #475569; --ds-neutral-700: #334155; --ds-neutral-800: #1e293b; --ds-neutral-900: #0f172a; --ds-neutral-950: #020617; /* --------------------------------------------------------------------- Semantic ramps. Inspinia overloaded its green for both "primary" and "success"; success is split out here so a saved record never looks like a branded button. --------------------------------------------------------------------- */ --ds-success-50: #ecfdf3; --ds-success-100: #d1fadf; --ds-success-500: #12b76a; --ds-success-600: #039855; --ds-success-700: #027a48; --ds-warning-50: #fffaeb; --ds-warning-100: #fef0c7; --ds-warning-500: #f79009; --ds-warning-600: #dc6803; --ds-warning-700: #b54708; --ds-danger-50: #fef3f2; --ds-danger-100: #fee4e2; --ds-danger-500: #f04438; --ds-danger-600: #d92d20; --ds-danger-700: #b42318; --ds-info-50: #f0f9ff; --ds-info-100: #e0f2fe; --ds-info-500: #0ba5ec; --ds-info-600: #0086c9; --ds-info-700: #026aa2; /* Purple — Angle's own #7266ba (.bg-purple), with tints derived for soft badge fills. Carries the RTO status family in status.css: a return is neither a success nor a failure, so green and red both mislead there. Semantic, so it does NOT follow the theme accent — a status must read the same on every panel. */ --ds-purple-50: #f2f1f9; --ds-purple-100: #ddd9f0; --ds-purple-500: #7266ba; --ds-purple-600: #5f52a6; --ds-purple-700: #4a3f82; /* Teal — Angle's #37bc9b (.bg-green). Kept SEPARATE from --ds-success-* (#12b76a) on purpose: the remittance cards used bg-green decoratively for "Deduction", and a deduction is not a success. Reusing the success green there would make a semantic colour mean nothing. Decorative only — never use it for a status. */ --ds-teal-500: #37bc9b; --ds-teal-700: #2b957a; /* Cyan — Angle's #23b7e5 (.bg-info in site-theme-member/app.css, 53 uses). Phase 596 Added because three dashboard tiles shared --ds-info-500 and three more shared --ds-purple-500, so the Member dashboard read as two big blocks of the same two hues. This is the one blue-family colour Angle already ships that is clearly distinct from --ds-info-500 (#0ba5ec) side by side. DECORATIVE ONLY, like --ds-teal-*. It carries no status meaning — do not use it to signal state, or the semantic colours in status.css stop meaning anything. */ --ds-cyan-500: #23b7e5; --ds-cyan-700: #1789b0; /* Blue — Angle's #5d9cec (.bg-primary in site-theme-member/app.css, 122 uses). Phase 598 A DECORATIVE blue that is deliberately NOT --ds-accent. Phase 596 got this wrong: it made "Total Shipment blue and New B2C Order blue" by overriding --ds-accent for the whole panel, which repainted all 51 accent surfaces — every btn-primary, the sidebar active item, links and focus rings — when two elements had been asked for. Having it as its own token means a tile or a button can be blue WITHOUT dragging the panel's primary colour with it, and the theme preset keeps owning --ds-accent. */ --ds-blue-500: #5d9cec; --ds-blue-700: #3a7bd5; /* --------------------------------------------------------------------- Semantic aliases — what views/components should actually reference. Re-pointed wholesale by the dark block below. --------------------------------------------------------------------- */ --ds-bg-canvas: var(--ds-neutral-100); /* app background behind cards */ --ds-bg-surface: var(--ds-neutral-0); /* cards, panels, menus */ --ds-bg-raised: var(--ds-neutral-0); /* popovers, dropdowns */ --ds-bg-sunken: var(--ds-neutral-50); /* table headers, wells */ --ds-bg-hover: var(--ds-neutral-100); --ds-bg-active: var(--ds-neutral-200); --ds-bg-inverse: var(--ds-neutral-900); /* sidebar — was #2f4050 */ --ds-text-primary: var(--ds-neutral-900); --ds-text-secondary: var(--ds-neutral-600); --ds-text-muted: var(--ds-neutral-500); --ds-text-disabled: var(--ds-neutral-400); --ds-text-inverse: var(--ds-neutral-0); --ds-text-brand: var(--ds-brand-600); --ds-text-on-brand: #ffffff; /* Foreground for any saturated semantic fill (success/warning/danger/info). Stays white in both themes — the fills are mid-ramp in both. */ --ds-text-on-color: #ffffff; --ds-border-subtle: var(--ds-neutral-200); --ds-border-default: var(--ds-neutral-300); --ds-border-strong: var(--ds-neutral-400); --ds-border-brand: var(--ds-brand-500); --ds-accent: var(--ds-brand-500); --ds-accent-hover: var(--ds-brand-600); --ds-accent-active: var(--ds-brand-700); --ds-accent-subtle: var(--ds-brand-50); /* RGB triplets of --ds-accent and --ds-text-brand, for tinted shadows and glows: rgba(var(--ds-accent-rgb), 0.35). A hex token cannot be used inside rgba(), so without these every "brand-tinted" shadow has to hard-code its colour — which is how the DirectUser views ended up with red glows that survived a theme change. Every preset overrides both. */ --ds-accent-rgb: 26, 179, 148; /* brand-500 */ --ds-brand-rgb: 16, 144, 120; /* brand-600 */ /* --------------------------------------------------------------------- Typography — Inter when available, system stack otherwise. The stack is deliberately usable with no webfont: nothing here blocks first paint. --------------------------------------------------------------------- */ --ds-font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif; --ds-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; /* Type scale — 14px base to suit dense logistics tables. --------------------------------------------------------------------- PX, NOT REM — deliberately. These tokens are shared by five panels whose vendor themes each set their own root font-size: Admin / guest (Inspinia custom.css:8985) html { font-size: 10px } (the 62.5% trick) DirectUser (its own layout) html { font-size: 15px } Member / MemberAdmin (Angle) unset -> 16px With rem, one token rendered at three different sizes: --ds-text-base was 8.75px on Admin, 13.1px on DirectUser and 14px on Member. That is exactly why the Admin panel came out unreadably small. The design system does not own , so it cannot rely on it. px makes a token mean one thing everywhere. Trade-off, stated honestly: px does not scale with the browser's font-size preference. Fixing that properly means normalising the root across all themes, which would rescale every rem in bootstrap.css (which Inspinia's 10px root is calibrated against) — a separate, riskier change. */ --ds-text-xs: 12px; /* table meta, badges */ --ds-text-sm: 13px; /* secondary */ --ds-text-base: 14px; /* body / grid default */ --ds-text-md: 16px; /* inputs (avoids iOS zoom)*/ --ds-text-lg: 18px; /* card titles */ --ds-text-xl: 22px; /* page headings */ --ds-text-2xl: 28px; /* KPI figures */ --ds-text-3xl: 36px; /* dashboard hero numbers */ --ds-font-normal: 400; --ds-font-medium: 500; --ds-font-semibold: 600; --ds-font-bold: 700; --ds-leading-tight: 1.25; --ds-leading-normal: 1.5; --ds-leading-loose: 1.7; --ds-tracking-tight: -0.011em; --ds-tracking-wide: 0.025em; /* --------------------------------------------------------------------- Spacing — 4px base. px for the same reason as the type scale above: at Inspinia's 10px root, 1rem of padding was 10px on Admin and 16px on the Angle panels, so shared components were silently 37% tighter on Admin. --------------------------------------------------------------------- */ --ds-space-0: 0; --ds-space-1: 4px; --ds-space-2: 8px; --ds-space-3: 12px; --ds-space-4: 16px; --ds-space-5: 20px; --ds-space-6: 24px; --ds-space-8: 32px; --ds-space-10: 40px; --ds-space-12: 48px; --ds-space-16: 64px; /* --------------------------------------------------------------------- Radii --------------------------------------------------------------------- */ --ds-radius-xs: 3px; --ds-radius-sm: 5px; --ds-radius-md: 8px; --ds-radius-lg: 12px; --ds-radius-xl: 16px; --ds-radius-pill: 999px; /* --------------------------------------------------------------------- Elevation — layered and low-alpha; Inspinia had almost none. --------------------------------------------------------------------- */ --ds-shadow-xs: 0 1px 2px 0 rgba(15, 23, 42, 0.05); --ds-shadow-sm: 0 1px 3px 0 rgba(15, 23, 42, 0.08), 0 1px 2px -1px rgba(15, 23, 42, 0.06); --ds-shadow-md: 0 4px 8px -2px rgba(15, 23, 42, 0.08), 0 2px 4px -2px rgba(15, 23, 42, 0.05); --ds-shadow-lg: 0 12px 20px -4px rgba(15, 23, 42, 0.10), 0 4px 8px -4px rgba(15, 23, 42, 0.05); --ds-shadow-xl: 0 22px 30px -6px rgba(15, 23, 42, 0.12), 0 8px 12px -6px rgba(15, 23, 42, 0.06); /* Focus ring — a visible ring is an accessibility requirement, not a style */ --ds-focus-ring: 0 0 0 3px rgba(26, 179, 148, 0.35); --ds-focus-danger: 0 0 0 3px rgba(240, 68, 56, 0.32); /* --------------------------------------------------------------------- Motion — respects prefers-reduced-motion via the block at the end. --------------------------------------------------------------------- */ --ds-duration-fast: 120ms; --ds-duration-base: 180ms; --ds-duration-slow: 260ms; --ds-ease: cubic-bezier(0.4, 0, 0.2, 1); --ds-transition: var(--ds-duration-base) var(--ds-ease); /* --------------------------------------------------------------------- Layout metrics — shared by the panel shells in Wave 1. --------------------------------------------------------------------- */ --ds-sidebar-width: 250px; --ds-sidebar-width-collapsed: 64px; --ds-topbar-height: 60px; /* --------------------------------------------------------------------- Shell colour slots — the parts a per-panel theme preset repaints. These are the same slots Angle's theme-a..h files hard-code, lifted out so ONE preset can recolour every panel instead of only Angle's chrome. themes.css overrides these; the Wave 1 shells consume them. Defaults below reproduce the current look, so nothing moves until a panel's shell is actually refactored onto them. --------------------------------------------------------------------- */ --ds-sidebar-bg: var(--ds-neutral-900); --ds-sidebar-fg: var(--ds-neutral-300); --ds-sidebar-fg-active: var(--ds-neutral-0); --ds-sidebar-active-bg: rgba(255, 255, 255, 0.08); --ds-sidebar-heading: var(--ds-neutral-500); /* Phase 644: the submenu tree rail and its ticks. Its own token because it has to read against the sidebar surface, not against the page — a themed sidebar can override it without touching the rest of the nav. */ --ds-sidebar-rail: rgba(255, 255, 255, 0.55); --ds-topbar-bg: var(--ds-bg-surface); --ds-topbar-from: var(--ds-brand-600); --ds-topbar-to: var(--ds-brand-500); --ds-topbar-fg: var(--ds-neutral-0); --ds-topbar-border: var(--ds-border-subtle); /* Z-index scale. Named so panels stop inventing z-index: 9999. */ --ds-z-base: 1; --ds-z-dropdown: 1000; --ds-z-sticky: 1020; --ds-z-sidebar: 1030; --ds-z-modal: 1050; --ds-z-popover: 1070; --ds-z-toast: 1090; } /* ============================================================================= Dark theme — opt-in: Only the semantic aliases are re-pointed; the ramps stay fixed. That is the whole reason components.css must never reference a ramp step directly. ============================================================================= */ :root[data-theme="dark"] { --ds-bg-canvas: var(--ds-neutral-950); --ds-bg-surface: var(--ds-neutral-900); --ds-bg-raised: var(--ds-neutral-800); --ds-bg-sunken: var(--ds-neutral-800); --ds-bg-hover: var(--ds-neutral-800); --ds-bg-active: var(--ds-neutral-700); --ds-bg-inverse: var(--ds-neutral-950); --ds-text-primary: var(--ds-neutral-50); --ds-text-secondary: var(--ds-neutral-300); --ds-text-muted: var(--ds-neutral-400); --ds-text-disabled: var(--ds-neutral-600); --ds-text-inverse: var(--ds-neutral-900); --ds-text-brand: var(--ds-brand-400); --ds-border-subtle: var(--ds-neutral-800); --ds-border-default: var(--ds-neutral-700); --ds-border-strong: var(--ds-neutral-600); --ds-accent: var(--ds-brand-400); --ds-accent-hover: var(--ds-brand-300); --ds-accent-active: var(--ds-brand-200); --ds-accent-subtle: rgba(26, 179, 148, 0.14); /* Shadows need more alpha to read at all on a dark canvas */ --ds-shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.30); --ds-shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.40), 0 1px 2px -1px rgba(0, 0, 0, 0.30); --ds-shadow-md: 0 4px 8px -2px rgba(0, 0, 0, 0.45), 0 2px 4px -2px rgba(0, 0, 0, 0.30); --ds-shadow-lg: 0 12px 20px -4px rgba(0, 0, 0, 0.50), 0 4px 8px -4px rgba(0, 0, 0, 0.35); --ds-shadow-xl: 0 22px 30px -6px rgba(0, 0, 0, 0.55), 0 8px 12px -6px rgba(0, 0, 0, 0.40); } @media (prefers-reduced-motion: reduce) { :root { --ds-duration-fast: 0ms; --ds-duration-base: 0ms; --ds-duration-slow: 0ms; } }