packages/widget-dashboard/src/components/widget-chrome/widget-chrome.module.css - trunk - githubmirror/gutenberg

packages/widget-dashboard/src/components/widget-chrome/widget-chrome.module.css

37 строк1 KB

Damián Suárez

Widget Dashboard: host-tunable tile spacing via public custom properties (#81352)

11 авг 2026, 11:38

11 авг 2026, 11:381a1b94c

/*
 * Keep the structural layout local to the widget chrome. Host styles may reset
 * `section` elements and override the layered Card styles.
 */
.widget-chrome {
	display: flex;
	flex-direction: column;

	/* Host-tunable tile spacing; resolved here because Card.Root re-declares
	   its layout properties. The header gap follows the padding so the
	   header/content seam stays a single space. */
	--wp-ui-card-padding: var(--wp-widget-dashboard-tile-padding, var(--wpds-dimension-padding-2xl));
	--wp-ui-card-header-content-gap: var(--wp-widget-dashboard-tile-header-gap, var(--wp-widget-dashboard-tile-padding, var(--wpds-dimension-gap-xl)));
}

/* Outward tile focus ring; paint space reserved on `.grid`. */
.widget-chrome:has(:focus-visible) {
	outline: var(--wpds-border-width-focus) solid var(--wpds-color-stroke-focus);
	outline-offset: var(--wp-widget-dashboard-tile-focus-offset, 2px);
}

.widget-chrome-header-icon {
	display: inline-flex;
	color: var(--wpds-color-foreground-content-neutral);
}

/* Fill the tile so placeholder states center in the full height. */
.widget-chrome-content {
	flex: 1;
	height: 100%;
	min-width: 0;
	min-height: 0;
}

.unavailable {
	height: 100%;
}