Style Properties

Every styled element in a Meno project gets its static look from a utility class="…" string — Meno's own Tailwind-looking engine. Each utility maps to a CSS property, and the matching CSS is generated at build time by the meno() integration. Dynamic values a static class can't express use a style() call with a StyleObject instead. This reference catalogs those CSS properties and their values.

For the bigger picture of how styling works, see Styling. For pseudo-states and JS-triggered states, see Interactive Styles. To vary styles per instance from a component prop, see Component Props.

Class strings and StyleObjects

On disk, static styling is a utility class string: unprefixed utilities are the desktop base, and max-lg: (tablet) / max-sm: (mobile) prefixes override at and below those widths. The editor and dynamic style() calls use the equivalent StyleObject — up to three responsive keys (base, tablet, mobile), each a flat object of CSS properties, with only base required.

<div class="flex gap-3 p-6 max-lg:p-4 max-sm:p-3">

Inside each breakpoint object:

• Keys are CSS property names in camelCase — backgroundColor, fontSize, borderRadius, marginTop. Never kebab-case (background-color is wrong).

• Values are always strings — even numeric ones, like zIndex: "10" or opacity: "0.8".

You can also pass a flat object (no breakpoint keys) when you only need base styles. The two forms are equivalent:

<span class={style({ fontStyle: "italic" })}>
<span class={style({ base: { fontStyle: "italic" } })}>

Values: colors and tokens

Colors come from theme.css and are referenced with var(--name). Raw hex values are not part of the theme system — always use the variable. The names in this project include:

<div class="text-(--text) bg-(--bg-light) border-(--border)">

Because colors are variables, an element automatically follows whichever theme (dark or light) is active.

Design tokens live in the same theme.css as plain custom properties on :root, referenced the same way with var(--name). This project defines a font-family token:

<p class="[font-family:var(--ff)]">

Everything else — lengths, keywords, shorthands — is a plain string: padding: "12px 22px", display: "flex", transition: "all 0.2s", border: "1px solid".

Property catalog

These tables list the most common properties grouped by purpose — the names are the CSS properties behind the utilities, and the keys you write in a StyleObject; the example column shows a typical value. This is a practical catalog, not the full CSS surface — any valid CSS property is available.

Layout and box

Flexbox

Grid

Spacing

Typography

Color and background

Border and radius

Effects and misc

Responsive breakpoints

Unprefixed utilities apply everywhere. Add a max-lg: or max-sm: variant only to override specific utilities at those widths — anything without a variant keeps its base value. The prefixes are max-width thresholds:

You only add the variants you actually override. In this Section component, the unprefixed padding is set once and the smaller breakpoints just tighten it:

<div class="px-20 mx-auto max-lg:px-10 max-sm:px-5">

A utility with no max-lg: or max-sm: variant simply keeps its base value at every width.

Prop-bound values (_mapping)

Inside a component, a property value can vary per instance based on a prop. Instead of a plain string, use a mapping object — { _mapping: true, prop, values } — and the runtime picks the value matching the current prop. A losslessly-convertible mapping emits instead as a variants(__props, table) class on the element.

This Button varies its background color by a variant prop:

<Link href={link} class={style({
    base: {
      backgroundColor: {
        _mapping: true,
        prop: "variant",
        values: { primary: "var(--text)", secondary: "var(--bg)" }
      },
      borderRadius: "8px"
    }
  }, __props, { root: true })}>

A boolean prop maps on true / false keys, and a select prop maps on each of its options:

marginTop: {
  _mapping: true,
  prop: "isMarginTop",
  values: { true: "40px", false: "0" }
}

Mappings can appear anywhere a value can, in any breakpoint. The prop named must be declared in the component's resolveProps(Astro, {…}) argument — see Component Props.

The second style() argument

style() takes an optional second argument carrying editor metadata that is not part of the visual style itself:

• interactive — an array of pseudo-state and conditional-state rules (:hover, :focus, class-toggle selectors). This is the main use of the second argument; see Interactive Styles for the full rule shape.

• label — a friendly name shown for the element in the editor's structure tree.

<h2 class={style({
    base: { fontWeight: "500" }
  }, {
    interactive: [
      { name: "on hover", postfix: ":hover", style: { base: { opacity: "0.8" } } }
    ],
    label: "Heading"
  })}>

On a component's structure root, the second argument is __props (the resolved props, so mappings can read them) and the metadata moves to a third argument. The root always carries a root: true marker:

<div class={style({ base: { /* … */ } }, __props, { root: true, label: "Section" })}>

You rarely write these markers by hand — the editor manages root, label, and interactive for you. What matters when hand-editing is the first argument: the StyleObject of CSS properties.

For how these properties surface in the visual editor, see Styling. For pseudo-states and state-class rules, see Interactive Styles. For declaring the props that _mapping reads, see Component Props.