Skip to contentEnma

EnmaRoot

Live demo

graphite

Push day

paper

Push day

ember

Push day

How to use it

Sets the theme and mode for everything inside it; put exactly one at the root of an app, page or artifact.

Provide theme (graphite, glass, paper, mineral, enamel, ember) and optionally mode (home by default, light, dark, or inherit).
home picks the theme's best mode: Graphite and Ember dark, the rest light. Offer a light/dark toggle only when the product needs one.
canvas (default on) paints the theme background: Graphite's dot grid, Glass's soft light sources, Ember's glow.
Without React: put data-enma="ember" data-theme="dark" on <html> and add the class e-canvas to <body>.

Do: one theme per product. Don't: mix two themes on one screen, or nest roots to restyle a single card.

In every theme

Follows the mode picked in the header.

Graphite

Push dayThe canvas, ink and fonts of each theme.

Glass

Push dayThe canvas, ink and fonts of each theme.

Paper

Push dayThe canvas, ink and fonts of each theme.

Mineral

Push dayThe canvas, ink and fonts of each theme.

Enamel

Push dayThe canvas, ink and fonts of each theme.

Ember

Push dayThe canvas, ink and fonts of each theme.

Code

React

import { EnmaRoot } from 'enma/react';

export function App() {
  return (
    <EnmaRoot theme="ember" as="main">
      {/* every screen */}
    </EnmaRoot>
  );
}

Plain HTML

<html lang="en" data-enma="ember" data-theme="dark">
  <body class="e-canvas">...</body>
</html>

Props

`EnmaRootProps`

Also accepts every attribute of React.HTMLAttributes<HTMLElement>.

Props of EnmaRootProps
Prop	Type	Default	Description
`theme`	EnmaTheme	'graphite'	Which theme. Default 'graphite'.
`mode`	EnmaMode	'home'	'home' uses the theme's best mode (Graphite and Ember dark, the rest light). 'inherit' leaves data-theme to an ancestor. Default 'home'.
`canvas`	boolean	true	Paint the theme canvas (bg plus Glass glows, Ember light, Graphite dot grid). Default true.
`as`	keyof React.JSX.IntrinsicElements