Style Properties

Every styled element in a Meno project gets its look from a style() call in the class attribute. You never write a raw class="..." string — instead you pass a Meno StyleObject to style(), and the matching CSS is generated at build time by the meno() integration. This reference catalogs the StyleObject shape and the CSS properties you can set inside it.

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.

The StyleObject shape

A StyleObject has up to three responsive keys — base, tablet, and mobile. Each holds a flat object of CSS properties. Only base is required.

<div class={style({
    base: { display: "flex", gap: "12px", padding: "24px" },
    tablet: { padding: "16px" },
    mobile: { padding: "12px" }
  })}>

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 colors.json 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={style({ base: {
  color: "var(--text)",
  backgroundColor: "var(--bg-light)",
  borderColor: "var(--border)"
} })}>

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

Design tokens come from variables.json and are referenced the same way, with var(--name). This project defines a font-family token:

<p class={style({ base: { fontFamily: "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 exactly what you write as object keys; the example column shows a typical value string. This is a practical catalog, not the full CSS surface — any valid CSS property works as a camelCase key.

Layout and box

Flexbox

Grid

Spacing

Typography

Color and background

Border and radius

Effects and misc

Responsive breakpoints

base applies everywhere. Add tablet and mobile only to override specific properties at those widths — anything you omit inherits from base. The breakpoints are max-width thresholds:

You only include the breakpoint keys you actually override. In this Section component, base sets the inner padding once and the smaller breakpoints just tighten it:

<div class={style({
    base: { padding: "0 80px", margin: "auto" },
    tablet: { padding: "0 40px" },
    mobile: { padding: "0 20px" }
  }, __props)}>

A breakpoint key you do not need can be left out entirely, or left as an empty object — both are equivalent and round-trip to the same model.

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.

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.