Admin & Vendor

One kit, two foundations

Ludo runs admin screens and vendor screens from the same components. A single attribute flips the look, so you never fork a component to change the brand on part of a page.

Foundation reskin

Wrap any subtree in data-foundation="vendor" and the primary surfaces inside it switch to amber. Everything outside stays Ludo purple. The theme scopes the override to the attribute, so it beats both light and dark mode.

Below is a live before and after. Both panels render the exact same StatCard, Button, and StatusPill. Only the wrapping attribute differs.

// Same components. The wrapping attribute decides the look.
<div data-foundation="admin">
  <Button>Open shift</Button>   {/* Ludo purple */}
</div>

<div data-foundation="vendor">
  <Button>Open shift</Button>   {/* Vendor amber */}
</div>

Admin is the default, so data-foundation="admin" and no attribute look the same. Reach for vendor only on the surfaces a vendor sees.

Density

Control density follows data-density. Compact suits dense admin tables, default suits everyday screens, and touch gives bigger hit targets for POS and kiosk hardware. Components opt in with the density-compact: and density-touch: variants, so a control only changes where it should.

// Set the density on a subtree, then opt components in.
<div data-density="touch">
  <button className="h-10 density-compact:h-8 density-touch:h-12">
    Charge $24.00
  </button>
</div>

Foundation and density are independent. You can set a vendor foundation and a touch density on the same kiosk subtree.