Token reference
Media queries
Named responsive conditions derived from canonical breakpoints and user preferences.
Overview
Named responsive conditions derived from canonical breakpoints and user preferences. Values come from canonical DTCG JSON or are derived from governed responsive and preference contracts. Published names are versioned APIs. This page is a structural counterpart of the audited reference information architecture.
Token Reference
| Alias | Query | Purpose |
|---|---|---|
compact | @media (max-width: 39.999rem) | Single-column and compact-control layouts. |
medium | @media (min-width: 40rem) and (max-width: 63.999rem) | Intermediate layouts with selective multi-column composition. |
expanded | @media (min-width: 64rem) | Expanded layouts with persistent navigation and wider comparison views. |
reduced-motion | @media (prefers-reduced-motion: reduce) | Removes non-essential movement while preserving immediate state feedback. |
forced-colors | @media (forced-colors: active) | Uses system colors and preserves component structure in high-contrast modes. |
coarse-pointer | @media (pointer: coarse) | Preserves touch-friendly targets without changing semantic behavior. |
hover-capable | @media (hover: hover) | Applies hover enhancement only where hover input is available. |
dark-scheme | @media (prefers-color-scheme: dark) | Selects the supported dark expression when the application follows system preference. |
Usage
- Consume semantic or component aliases in application code.
- Use global values only to author or review foundation aliases.
- Keep responsive and preference behavior aligned across Web and Flutter.
- Do not edit generated outputs or introduce an unregistered literal.
Accessibility
Changes require cross-theme contrast, text-scaling, reflow, forced-colors, reduced-motion, and input-modality review where applicable. A token cannot make essential meaning depend on color, opacity, motion, elevation, or viewport size alone.
Web and Flutter API
/* Web */
@media (max-width: 39.999rem) { /* compact */ }
// Flutter
final value = HeTokens.breakpointCompact;The example uses an exact generated name. The table is the complete Web reference; global and semantic Flutter constants are generated in he_tokens.g.dart, while component contracts own component-level values.