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 --pf-* 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.

Create a project CSS file:

:root {
  --lotus-background: oklch(99% 0.01 82);
  --lotus-header-background: oklch(100% 0 0);
  --lotus-footer-background: oklch(97% 0.012 82);
  --lotus-surface: oklch(96% 0.02 82);
  --lotus-text-strong: oklch(24% 0.03 58);
  --lotus-text: oklch(35% 0.03 58);
  --lotus-text-muted: oklch(49% 0.026 58);
  --lotus-accent: oklch(50% 0.115 52);
  --lotus-accent-soft: color-mix(in oklab, var(--lotus-accent) 11%, var(--lotus-background));
}

Load it through theme.config.json:

{
  "head": [
    { "tag": "style", "src": "./src/styles/lotus.css" }
  ]
}

head entries with tag: "style" and src load CSS files after Lotus default styles. Relative paths are resolved from the project root.

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

Copyable presets

The Lotus repository includes copyable CSS examples outside the published package:

src/styles/presets/
  claude.css
  github.css
  linear.css
  neutral.css
  stripe.css
  vercel.css

Copy one into your project, adjust the tokens, and load it with a head style.src entry. These presets are examples, not package exports.

Component bridge

Lotus maps component package variables to theme variables:

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

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