CSS & Styling

Dahlia styles are built on Tailwind utilities and semantic CSS variables. The theme exposes --dahlia-* 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.

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

Component bridge

Dahlia maps component package variables to theme variables:

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

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