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.