Density

[zZHorizonZz]

I can see in the official docs that there should be a density option in the components, for example, for text fields or buttons. Is this something that's already built-in or not?

[asyncLiz]

A full fledged density system isn't available, but many of the spacing and height tokens that density changes are available.

For example, you can set the top/bottom padding of a text field to make it more dense. Density decreases vertical space by 4px for each level. For text field, we can remove 2px from the top/bottom space at each level.

md-outlined-text-field.dense-1 {
  --md-outlined-text-field-top-space: 14px;
  --md-outlined-text-field-bottom-space: 14px;
}

md-outlined-text-field.dense-2 {
  --md-outlined-text-field-top-space: 12px;
  --md-outlined-text-field-bottom-space: 12px;
}

md-outlined-text-field.dense-3 {
  --md-outlined-text-field-top-space: 10px;
  --md-outlined-text-field-bottom-space: 10px;
}

md-outlined-text-field.dense-4 {
  --md-outlined-text-field-top-space: 8px;
  --md-outlined-text-field-bottom-space: 8px;
}

For context, this was originally intended to be offered as a Sass API. A density function would take a level and return the appropriate token values to set.

md-outlined-text-field.dense-1 {
  $theme: outlined_text_field.density(-1);
  // Returns
  // (
  //   'top-space': 14px,
  //   'bottom-space': 14px,
  // )
  @include outlined_text_field.theme($theme);
  // Emits
  // --md-outlined-text-field-top-space: 14px;
  // --md-outlined-text-field-bottom-space: 14px;
}

So "yes" you can do it, but it's a lot of manual work right now :(

[zZHorizonZz]

Thank you, even though it's a little tedious, at least it can be done. 👍