State Layer

A state layer is a semi-transparent covering on an element that indicates its state.

Purpose

State layers provide a systematic approach to visualizing states by using opacity. A layer can be applied to an entire element or in a circular shape and only one state layer can be applied at a given time.

On colors

By default, a component’s state layer color is derived from the color of its content, either the color of an icon or label text if no icon is present.

An on color is a color role used by the content. Each container color has its own corresponding on color.

For example, if a container color is secondary container, the content will use the on secondary container color role.

Tokens & values

The state layer uses a fixed percentage for the opacity for each state. A state layer uses the color used by content (usually the on color) and the percentage opacity for its respective state.

Usage

<button type="button">
	<fl-state-layer class="state-layer" />
</button>

button {
	position: relative;
	background-color: var(--fl-sys-color-secondary-container);
	color: var(--fl-sys-color-on-secondary-container);

	@media (hover: hover) {
		&:hover .state-layer {
			--fl-state-layer-background-color: rgba(
				var(--fl-sys-color-on-secondary-container-rgb),
				var(--fl-sys-state-hover-state-layer-opacity)
			);
		}
	}

	&:active .state-layer {
		--fl-state-layer-background-color: rgba(
			var(--fl-sys-color-on-secondary-container-rgb),
			var(--fl-sys-state-pressed-state-layer-opacity)
		);
	}

	&:focus-visible .state-layer {
		--fl-state-layer-background-color: rgba(
			var(--fl-sys-color-on-secondary-container-rgb),
			var(--fl-sys-state-focus-state-layer-opacity)
		);
	}
}