Guide

Theming

How colors, shadows, typography, and component sizes are produced.

Theme variables

Nmorph writes theme variables to `:root` and switches the current palette with the `nmorph-data-theme` attribute on `html`. Common colors are shared, while light and dark palettes define `main`, `text`, `accent`, shade colors, placeholder, focus, and contrast text variables.

Dynamic shadows

If a theme has `main` but no `darkShade` and `lightShade`, Nmorph generates both shade colors from the main color. This keeps inset and outset shadows usable for custom themes without forcing every color token to be provided manually.

Global tokens

Common styles define font sizes, line heights, border radii, component heights, indentation, transition duration, shadow width, and wrapper padding. Components consume the same variables instead of hardcoding dimensions.

  • `thick`, `basic`, and `thin` heights are shared by inputs and selection controls; `extra-thin` is reserved for plain selection controls.
  • `nmorph--shadow-outset`, `nmorph--shadow-inset`, and `nmorph--shadow-combined` are shared utility classes.
  • Focus states switch to accent background and focus text color for readable active controls.

Resolution is not supported

Open the documentation on a device with a screen size of at least 375px by 640px.