CSS

The reference stylesheet - energy-aware chrome classes, presence attributes, and CSS custom properties.

The package ships a reference stylesheet that implements the UI visibility strategy in pure CSS. Set data-energy-level on a root element (the DOM adapter or React provider does this for you) and annotated elements adapt automatically.

Import

import '@kumbatio/energy-system/css'

The stylesheet is one way to consume energy state, not the only one. You can instead resolve uiVisibilityStrategy in JS and style however you want - both paths use the same values, so they always agree.

Chrome classes

Apply these classes to your layout; the stylesheet progressively de-emphasizes and hides them as the level drops:

Class	Use for
`.energy-chrome`	Any chrome element (titlebar, toolbar, status bar) - fades with level, restores on hover
`.energy-sidebar`	Sidebar container - hidden at 25 and 0
`.energy-tab-bar`	Tab bar - hidden at 25 and 0
`.energy-status-bar`	Status bar - hidden at 25 and 0
`.energy-toolbar`	App/editor toolbar - hidden at 0
`.energy-content`	Main content area - narrows and scales up type at lower levels

<body data-energy-level="25">
  <aside class="energy-sidebar">…hidden at this level…</aside>
  <header class="energy-chrome energy-toolbar">…at 10% opacity, 100% on hover…</header>
  <main class="energy-content">…80ch wide, slightly larger type…</main>
</body>

Presence attributes: data-energy-min / data-energy-max

Annotate any element with the energy range it belongs to. No JS needed - the stylesheet hides it whenever the root's data-energy-level falls outside the range:

<div data-energy-min="75">AI chat - needs 75+ energy</div>
<div data-energy-max="25">Recovery hint - low energy only</div>

data-energy-min="75" - hidden whenever the current level is below 75
data-energy-max="25" - hidden whenever the current level is above 25

This is the CSS mirror of presenceAtOrAbove / presenceAtOrBelow - the two paths agree by definition. See Presence.

Resolved-presence hooks: data-energy-presence

When you resolve presence in JS (resolveEnergyPresence, useEnergyPresence) and want CSS to handle the treatment, stamp the result on the element:

<div data-energy-presence="muted">De-emphasized at 50% opacity</div>
<div data-energy-presence="hidden">Not rendered</div>

The muted opacity is controlled by --energy-muted-opacity (default 0.5).

Custom properties

The stylesheet defines these per level, mirroring uiVisibilityStrategy - use them in your own rules:

Property	100	75	50	25	0
`--energy-chrome-opacity`	1	0.7	0.4	0.1	0.05
`--energy-chrome-opacity-hover`	1	1	1	1	0.8
`--energy-content-max-width`	none	none	90ch	80ch	75ch
`--energy-content-font-scale`	1	1	1	1.05	1.1

.my-panel {
  opacity: var(--energy-chrome-opacity, 1);
}

Reduced motion

The stylesheet honours prefers-reduced-motion: reduce for its own opacity transitions. If your app animates presence changes, honour the same preference.