Opacity

Use the semantic opacity tokens, --nbhd-opacity-*, in your CSS. Each one is named for what it does, not for its number, so a brand can change how faded a disabled button looks in one place. Components use the same tokens.

• --nbhd-opacity-disabled fades a control that can’t be used.
• --nbhd-opacity-overlay-media darkens media so text on top of it stays readable. Pair it with --nbhd-color-overlay.
• --nbhd-opacity-overlay-backdrop dims the page behind a dialog or drawer. Pair it with --nbhd-color-overlay.

.tile[aria-disabled='true'] {
  opacity: var(--nbhd-opacity-disabled);
}

.tile-backdrop {
  background: rgb(from var(--nbhd-color-overlay) r g b / var(--nbhd-opacity-overlay-backdrop));
}