Personal Research

angular-material

4 min read

Angular Material

1. Why this system is relevant

Angular Material exposes one of the most explicit multi-step density systems in production code. Density is a first-class theme dimension, but it can also be emitted for a single component or a CSS-scoped region. Its source shows exactly which component metrics shrink and where accessibility-oriented touch targets stop following the visual size.

2. Density terminology

The system uses density scale. 0 is the default/most spacious supported setting and negative integers increase density. Public guidance documents 0 through -5; each whole step subtracts 4dp until a component-specific lower bound is reached. Angular Material theming

3. Density model

  • Density is a theme dimension alongside color and typography.
  • It can be applied to the full library, an individual component, or a selector-scoped part of an application by emitting the relevant Sass mixin there.
  • Components clamp the global scale to their own safe/usable minimum. Therefore -5 does not mean every component is 20px shorter.
  • Task-based or popup experiences such as date pickers intentionally do not densify because they do not compete for persistent layout space.
  • Multiple densities can coexist if separately generated density CSS is scoped to different selectors. Angular Material theming

4. Token architecture

The pipeline is:

theme density scale → Sass density functions/clamping → component density token map → emitted component CSS custom properties → MDC/Material component selectors

_definition.scss stores density in the theme map. Each component’s _m3-*.scss creates scale-dependent token values, and its theme mixin emits the applicable custom properties. Typography is a different dimension and is not implicitly changed by density.

Exact values from the pinned M3 source:

Component token/metricDensity values
Button container-height40, 36, 32, 28px for scales 0, -1, -2, -3 (then clamped)
Button touch-target-size48px; displayed at 0 and -1, disabled at -2 and -3
Form field container-height56, 52, 48, 44, 40, 36px for 0 through -5
Form field vertical padding16, 14, 12, 10, 8, 6px
Table header height56, 52, 48, 44, 40px for 0 through -4
Table row/footer height52, 48, 44, 40, 36px for 0 through -4

The button lower bound is -3, table -4, and field -5. Field source also suppresses an internal filled-label display treatment at denser levels, demonstrating that density can change component layout logic, not only numeric padding. _m3-button.scss _m3-form-field.scss _m3-table.scss

6. Typography behaviour

Density does not automatically use a smaller type ramp. Button density continues to reference the label-large typography role; typography has its own theme configuration and mixins. A product can combine a denser geometry with a different typography configuration, but that is an independent choice rather than an effect of density. Theme dimensions

7. Representative component examples

  • Button: container height decreases in 4px steps; horizontal padding and shape/type tokens are otherwise controlled through their own token groups.
  • Form field/input/select: the shared form-field container height and vertical padding shrink through all six levels; MDC override variables receive the result.
  • Table: header, data row, and footer heights shrink independently and clamp at -4.
  • List: exposes a component density mixin and scale-derived list tokens.
  • Dialog/date picker: task/pop-up contexts are intentionally excluded from global densification guidance.

8. Design/Figma implementation

Material design kits are public, but no official public source was found that establishes a one-to-one Figma density-variable-mode implementation matching Angular Material’s Sass scale. The code evidence should not be converted into an inferred Figma architecture.

9. Code implementation

The public Sass API supports both global and local activation:

html {
  @include mat.all-component-densities($theme);
}
 
.compact-zone {
  @include mat.button-density(-2);
  @include mat.form-field-density(-2);
}

Current M3 theming can place density: (scale: -2) in the theme definition; component-specific mixins provide local overrides. This is generated CSS, not a React-style density runtime prop. Theming guide

10. Accessibility constraints

Angular Material explicitly warns that density below 0 can make components harder to interact with. Button source separates the 40/36/32/28px visual container from a 48px touch target, but that invisible target is only emitted for density 0 and -1; at -2 and -3 it is disabled to prevent overlap. This makes the accessibility tradeoff explicit rather than claiming every dense control retains a 48px target. Keyboard focus styles are component behavior independent of the scale. _m3-button.scss

11. Limitations / unavailable evidence

  • Angular Material is an implementation of Material for Angular, not proof that every Material platform uses the same API or limits.
  • Not every component supports every negative step; source must be checked per component.
  • CSS generation allows coexisting scoped regions, but there is no universal runtime context/provider prop in the captured implementation.
  • Exact Figma activation remains unverified.

Graph View

Backlinks