Effects

Introduction

Effect tokens define the composite visual treatments applied to components, primarily shadows, and the opacity treatments used for disabled and loading states. Rather than raw color or size values, effect tokens combine multiple properties (color, offset, blur, spread for shadows; opacity for states) into a single reusable token.

Effect categories

Effect tokens fall into four categories:

Shadow

Variants: evGlow, glow, heavy, light, null, regular.

• glow — used for active or highlighted states, such as an active FAB floating over the map
• evGlow — reserved for a specific use case: the active state of the EV charge-finder FAB

Shadows are composite tokens, meaning each shadow is built from individual tokens for:

• X offset
• Y offset
• Blur
• Color

Shadows adapt to color mode: the shadow color tokens are part of Light and Dark mode, so a shadow automatically follows the active color mode through its color token reference.

Inner shadow

Used to create the impression of depth on extruded (raised) or depressed (inset) surfaces. Variants: heavy_selected, heavy_unselected, light_selected, light_unselected, null, regular_selected, regular_unselected.

Disabled

The visual treatment applied to a disabled component. Variants: opacity (dims the component), shadow (removes or flattens elevation so a disabled component doesn’t appear interactive).

Loading

The opacity treatment applied to a component while it’s in a loading state.

Theming

Shadow and inner shadow: Shadow and inner shadow colors have separate Light and Dark mode variants. Because effect tokens reference these mode-aware color tokens internally, they automatically adapt when the active color mode changes, with no separate light/dark handling needed at the component level.

Disabled and loading: Disabled and loading effects use opacity tokens, which remain constant across color modes. The visual adaptation to Light and Dark mode comes from the underlying component colors, not from the effect tokens themselves.