Theme decisions

A theme starts with decisions such as “forest green actions,” “serif headings,” and “roomier controls.” Looma turns those decisions into shared CSS properties that your components use.

You can make those decisions in Customize, or edit the JSON recipe and regenerate the CSS. This guide follows one decision through that process, then maps each family in detail.

Follow a decision from recipe to component

The JSON keeps what you chose. The CSS carries what the application renders. Commit both, so you can reopen the customizer and reproduce the result.

Read the two files together

This is a small recipe with explicit choices. Omitted values use the generator's defaults; a starting theme supplies a fuller set.

{
  "schemaVersion": 1,
  "values": {
    "text-size": "16px",
    "control-roominess": "2.75",
    "scale-contrast": "1.2",
    "display-font": "Georgia, serif",
    "response-time": "150ms"
  }
}

The generated stylesheet includes these authoring properties:

:root {
  --ui-font-size: 16px;
  --ui-control-roominess: 2.75;
  --ui-scale-ratio: 1.2;
  --ui-font-display: Georgia, serif;
  --ui-motion-fast: 150ms;
}

That excerpt is only the input layer. The saved CSS also includes light and dark colors and the derivation rules for sizes, type, spacing, and material. Use the complete exported file in your application.

Choose the family you want to understand

• Color: brand seeds, light/dark palettes, semantic statuses, and readable foregrounds.
• Typography: body and heading fonts, base size, labels, and emphasis.
• Size & spacing: control height, the size ladder, rhythm, gaps, corners, and borders.
• Material & light: depth, reflection, transparency, and the light source.
• Motion: feedback duration, easing, and reduced motion.

Each page connects recipe keys to CSS properties and the result you can see. The token guide explains how to use public properties in your own component styles. The theme reference lists the complete property defaults and ranges.

Color has an extra generation step

A geometry decision such as control-roominess becomes a CSS property that the shared rules can use directly. A color decision can affect many resolved properties at once.

For example, an action seed contributes to the accent family, readable text on a solid action, contextual action text, and interaction states. warmth changes how the palette is generated; it has no matching --ui-warmth property. Edit that decision in the recipe or customizer, then regenerate.

See Color for the full path from seeds to usable roles.

Use the theme in your own components

Choose semantic roles for what the element means. A reading surface can use --ui-surface-raised and --ui-text-primary; supporting copy can use --ui-text-secondary. The generated palette supplies the right values for light and dark.

.reading-note {
  background: var(--ui-surface-raised);
  color: var(--ui-text-primary);
  border: var(--ui-border-width) solid var(--ui-border);
  border-radius: var(--ui-radius-md);
}

Put that CSS in your own HTML Next definition. Compose Looma controls through their props and supported public properties, so their shared layout and behavior stay consistent.

Keep the right source editable

• Change the recipe in Customize, save it, and load the generated CSS in your application.
• Put handwritten adjustments in a separate overrides file.
• Re-save the recipe after a Looma upgrade to adopt updated generation rules.
• Use data-theme="light" or data-theme="dark" for a fixed mode, or leave it off the root to follow the system.