Mark

Foundations · src/components/Mark/Mark.tsx

The Redrob lockup, sized by height and swapped by theme.

Both lockups are in the DOM and the stylesheet shows one, which is why the height is set inline: an inline display here would beat the stylesheet's display: none and render both at once. That is how this first shipped, so the sizing stays confined to height and width.

Import

import { Mark } from '@redrob-labs/ui';

Rendered

The design system's own preview case, run against this package's build. The parity gate compares this rendering to the reference bundle's.

Props

Prop	Type	Notes
src	string	The light-theme lockup.
darkSrc	string	The dark-theme lockup. Omit it and the light one is used on both grounds.
height	number	Height in pixels. Width follows. The only size control: the lockup is never stretched.
alt	string	Accessible name. Pass '' when a heading beside it already says "Redrob".
tone	'light' | 'dark'	Forces a ground rather than following data-theme. For a panel whose ground does not follow the page: a dark band on a light page, a light card on a dark one.
className	string