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

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

40 строк1 KB

Marco Ciampini

Theme: Remove elevation tokens (#80099)

10 июл 2026, 17:51

10 июл 2026, 17:51716c6e9

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

	@layer components {
		.positioner {
			z-index: var(--wp-ui-tooltip-z-index, initial);
		}

		.popup {
			--_wp-ui-elevation-sm:
				0 1px 2px rgba(0, 0, 0, 0.05),
				0 2px 3px rgba(0, 0, 0, 0.04),
				0 6px 6px rgba(0, 0, 0, 0.03),
				0 8px 8px rgba(0, 0, 0, 0.02);

			background-color: var(--wpds-color-background-surface-neutral-strong);
			padding:
				var(--wpds-dimension-padding-xs)
				var(--wpds-dimension-padding-sm);
			border-radius: var(--wpds-border-radius-md);
			font-family: var(--wpds-typography-font-family-body);
			font-size: var(--wpds-typography-font-size-sm);
			line-height: 1.4; /* TODO: use DS token for line height */
			color: var(--wpds-color-foreground-content-neutral);
			box-shadow: var(--_wp-ui-elevation-sm);

			/*
			 * Forced-colors mode strips `box-shadow` and replaces the
			 * `background-color` with `Canvas`, so the tooltip would merge
			 * into the page. A 1px `CanvasText` border restores the edge.
			 * The popup inherits `box-sizing: border-box` from the
			 * positioner (via the shared `.box-sizing` reset utility), so
			 * the 1px is absorbed and non-FC layout is unchanged.
			 */
			@media ( forced-colors: active ) {
				border: 1px solid CanvasText;
			}
		}
	}
}