packages/ui/src/skeleton/style.module.css - trunk - githubmirror/gutenberg

packages/ui/src/skeleton/style.module.css

41 строка902 B

Juanfra Aldasoro

UI: Add Skeleton component (#79671)

03 июл 2026, 12:28

03 июл 2026, 12:28c3c95dd

@layer wp-ui {
	@layer utilities, components, compositions, overrides;

	@layer components {
		.skeleton {
			display: block;
			background-color: var(--wpds-color-background-surface-neutral-weak);

			/*
			 * Forced-colors mode substitutes `background-color` with
			 * `Canvas` (the page background), so a plain fill loses its
			 * boundary entirely. Add a visible border so the placeholder
			 * shape survives.
			 */
			@media ( forced-colors: active ) {
				border: var(--wpds-border-width-xs) solid CanvasText;
			}
		}

		.pulse {
			@media not ( prefers-reduced-motion ) {
				/*
				 * 1.5s reads better for a pulse than the motion token scale,
				 * which tops out at 400ms (--wpds-motion-duration-xl).
				 */
				animation: skeleton-pulse 1.5s ease-in-out infinite;
			}
		}

		@keyframes skeleton-pulse {
			0%,
			100% {
				opacity: 1;
			}

			50% {
				opacity: 0.4;
			}
		}
	}
}