CSS & Styling

Lotus styles are built on Tailwind utilities and semantic CSS variables. The theme exposes --lotus-* tokens for layout and shell styling, while shared MDX components consume portable --pl-* variables.

Theme tokens

Use appearance for normal color and radius customization:

appearance: {
  accent: 'blue',
  gray: 'neutral',
  radius: 'medium',
}

Use semantic tokens only when a project needs lower-level CSS overrides for surfaces, text, or component geometry.

:root {
  --lotus-surface: color-mix(in oklab, var(--lotus-gray-100) 70%, white);
  --lotus-radius-md: 0.5rem;
}

Component bridge

Lotus maps component package variables to theme variables:

--pl-text-strong: var(--lotus-text-strong);
--pl-text: var(--lotus-text);
--pl-text-muted: var(--lotus-text-muted);
--pl-background: var(--lotus-background);
--pl-accent: var(--lotus-accent);

This keeps @prosefly/astro-components portable while letting Lotus own the site palette.