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

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

52 строки2 KB

Marco Ciampini

Theme: Remove elevation tokens (#80099)

10 июл 2026, 17:51

10 июл 2026, 17:51716c6e9

.grid {
	container-type: inline-size;
	container-name: widget-dashboard;
	width: 100%;
	/* Placeholder and drag-preview radii: match `.tile` and `@wordpress/ui` Card (`--wpds-border-radius-lg`). */
	--wp-grid-placeholder-radius: var(--wpds-border-radius-lg);
	--wp-grid-drag-preview-radius: var(--wpds-border-radius-lg);
	/* Reserve top paint space so scroll containers do not clip tile focus rings. */
	--wp-widget-dashboard-tile-focus-offset: 2px;
	--wp-widget-dashboard-focus-ring-reserve: calc(var(--wpds-border-width-focus) + var(--wp-widget-dashboard-tile-focus-offset));
	padding-block-start: var(--wp-widget-dashboard-focus-ring-reserve);
}

.tile {
	height: 100%;
	border-radius: var(--wpds-border-radius-lg);
}

/*
 * Edit-mode tiles keep their resting shadow on hover; only the drag preview
 * (`.drag-preview-frame` on `@wordpress/grid`) uses a stronger shadow.
 */
.tile-edit-mode {
	--_wp-widget-dashboard-elevation-xs:
		0 1px 1px rgba(0, 0, 0, 0.03),
		0 1px 2px rgba(0, 0, 0, 0.02),
		0 3px 3px rgba(0, 0, 0, 0.02),
		0 4px 4px rgba(0, 0, 0, 0.01);

	box-shadow: var(--_wp-widget-dashboard-elevation-xs);
}

.tile-edit-mode:focus-visible {
	outline: var(--wpds-border-width-focus) solid var(--wpds-color-stroke-focus);
	outline-offset: var(--wp-widget-dashboard-tile-focus-offset, 2px);
}

/*
 * Wrapper applied through `renderDragPreview` on @wordpress/grid.
 * `height: 100%` keeps the inner `.tile` height: 100% chain alive
 * (without it, the wrapper auto-sizes and the cloned tile collapses
 * to content height). Drag elevation is owned by the grid
 * `.drag-preview-frame`; strip the cloned tile shadow so it does not stack on
 * the frame.
 */
.drag-preview {
	height: 100%;
}

.drag-preview .tile {
	box-shadow: none;
}