Aura

Module — import actual-css/css/effects/aura or actual-css/css/effects.

Aura adds a decorative intent-colored border and halo around one direct child. It is visual emphasis only and does not change the child's semantics.

.aura sends a short accent of light travelling around the frame, over a permanent halo that keeps the object present between two passes. Add .aura-glow to light the whole perimeter evenly instead, as a halo that breathes slowly.

Aura reads best when it has enough perimeter to travel around, and is naturally more pronounced on dark surfaces. It still composes on small shapes:

Note the intent on the wrapper, not on the child: .aura is an intent boundary, so the badge or alert inside keeps its own color and the frame keeps the one you gave the wrapper. Matching them reads as one object; deliberately mismatching them reads as two.

Motion changes how the light lives, never whether the effect is there: when the user has requested reduced motion, the travelling accent becomes two opposite lit corners — a deliberate composition rather than a rotation frozen at an arbitrary angle — and the glow stays a full, still halo.

The frame color comes from an intent such as .primary, .success, or .danger; there are no separate aura color variants. The intent is sovereign: a neutral intent produces a neutral aura. Use a chromatic intent when you want a visibly luminous effect.

The default is a thin lit line with a faint halo. Three hooks tune how loud it is: --aura-width sets the line, --aura-intensity scales both halos at once, resting and breathing alike, and --aura-duration sets one full rotation of the accent, or one breath of the glow.

Keep exactly one direct child and set --aura-radius when its shape differs from the common button, card, alert, and badge shapes detected as a visual enhancement.

A transparent or translucent child — an .outline alert, a .ghost button, a glass surface — shows --surface-opaque beneath it, the theme's opaque neutral, rather than the frame color. On a differently painted band, give the child its own surface so it matches the band.

CSS hooks

• --aura-color — frame and halo color; follows the local intent.
• --aura-width — frame thickness.
• --aura-blur — near halo blur; the far halo derives its own blur and its spread beyond the frame from this value, so one hook scales both.
• --aura-intensity — multiplies both halo strengths, resting and breathing. It does not touch the frame itself, which stays a crisp line at any setting.
• --aura-radius — child corner radius used to derive the outer radius.
• --aura-duration — one rotation of the accent, or one breath of the glow.