@wordpress/dataviews 16.0.1 → 17.0.0

package/src/components/dataviews-filters/style.scss

@@ -52,7 +52,7 @@
 	}
 
 	.dataviews-filters__summary-operators-filter-name {
-		color: var(--wpds-color-fg-content-neutral-weak);
+		color: var(--wpds-color-foreground-content-neutral-weak);
 		white-space: nowrap;
 		overflow: hidden;
 		text-overflow: ellipsis;
@@ -76,8 +76,8 @@
 		border: var(--wpds-border-width-xs) solid var(--wpds-color-stroke-interactive-neutral);
 		cursor: var(--wpds-cursor-control);
 		padding: var(--wpds-dimension-padding-xs) var(--wpds-dimension-padding-md);
-		min-height: calc(var(--wpds-dimension-base) * 8); // TODO: use size token when available
-		color: var(--wpds-color-fg-interactive-neutral);
+		min-height: var(--wpds-dimension-size-md);
+		color: var(--wpds-color-foreground-interactive-neutral);
 		position: relative;
 		display: flex;
 		align-items: center;
@@ -88,26 +88,26 @@
 		}
 
 		&.has-reset {
-			padding-inline-end: calc(#{vars.$icon-size} + var(--wpds-dimension-padding-xs));
+			padding-inline-end: calc(var(--wpds-dimension-size-sm) + var(--wpds-dimension-padding-xs));
 		}
 
 		&:hover:not(&.is-not-clickable),
 		&:focus-visible,
 		&[aria-expanded="true"] {
-			color: var(--wpds-color-fg-interactive-neutral);
+			color: var(--wpds-color-foreground-interactive-neutral);
 			border-color: var(--wpds-color-stroke-interactive-neutral-active);
-			background-color: var(--wpds-color-bg-interactive-neutral-weak-active);
+			background-color: var(--wpds-color-background-interactive-neutral-weak-active);
 		}
 
 		&.has-values {
-			color: var(--wpds-color-fg-interactive-brand);
-			background: var(--wpds-color-bg-interactive-brand-weak);
+			color: var(--wpds-color-foreground-interactive-brand);
+			background: var(--wpds-color-background-interactive-brand-weak);
 			border-color: var(--wpds-color-stroke-interactive-brand);
 
 			&:hover:not(&.is-not-clickable),
 			&[aria-expanded="true"] {
-				color: var(--wpds-color-fg-interactive-brand-active);
-				background: var(--wpds-color-bg-interactive-brand-weak-active);
+				color: var(--wpds-color-foreground-interactive-brand-active);
+				background: var(--wpds-color-background-interactive-brand-weak-active);
 				border-color: var(--wpds-color-stroke-interactive-brand-active);
 			}
 		}
@@ -116,7 +116,7 @@
 			outline: none;
 			box-shadow:
 				0 0 0 var(--wpds-border-width-focus)
-				var(--wpds-color-stroke-focus-brand);
+				var(--wpds-color-stroke-focus);
 		}
 
 		.dataviews-filters-__summary-filter-text-name {
@@ -125,9 +125,8 @@
 	}
 
 	.dataviews-filters__summary-chip-remove {
-		// TODO: use size token when available.
-		width: vars.$icon-size;
-		height: vars.$icon-size;
+		width: var(--wpds-dimension-size-sm);
+		height: var(--wpds-dimension-size-sm);
 		border-radius: var(--wpds-border-radius-md);
 		border: 0;
 		padding: 0;
@@ -142,23 +141,23 @@
 		cursor: var(--wpds-cursor-control);
 
 		svg {
-			fill: var(--wpds-color-fg-interactive-neutral);
+			fill: var(--wpds-color-foreground-interactive-neutral);
 		}
 
 		&:hover,
 		&:focus {
-			background: var(--wpds-color-bg-interactive-neutral-weak-active);
+			background: var(--wpds-color-background-interactive-neutral-weak-active);
 			svg {
-				fill: var(--wpds-color-fg-interactive-neutral-active);
+				fill: var(--wpds-color-foreground-interactive-neutral-active);
 			}
 		}
 
 		&.has-values {
 			svg {
-				fill: var(--wpds-color-fg-interactive-brand);
+				fill: var(--wpds-color-foreground-interactive-brand);
 			}
 			&:hover {
-				background: var(--wpds-color-bg-interactive-brand-weak-active);
+				background: var(--wpds-color-background-interactive-brand-weak-active);
 			}
 		}
 
@@ -166,13 +165,13 @@
 			outline: none;
 			box-shadow:
 				0 0 0 var(--wpds-border-width-focus)
-				var(--wpds-color-stroke-focus-brand);
+				var(--wpds-color-stroke-focus);
 		}
 	}
 }
 
 .dataviews-filters__search-widget-filter-combobox-list {
-	max-height: calc(var(--wpds-dimension-base) * 46);
+	max-height: 184px;
 	padding: var(--wpds-dimension-padding-xs);
 	overflow: auto;
 	border-top: 1px solid var(--wpds-color-stroke-surface-neutral);
@@ -197,7 +196,7 @@
 	box-sizing: border-box;
 	padding: var(--wpds-dimension-padding-xs) var(--wpds-dimension-padding-md);
 	cursor: default;
-	min-height: calc(var(--wpds-dimension-base) * 8); // TODO: use size token when available
+	min-height: var(--wpds-dimension-size-md);
 	@include body-medium();
 
 	&:last-child {
@@ -207,24 +206,24 @@
 	&:hover,
 	&[data-active-item],
 	&:focus {
-		background-color: var(--wpds-color-bg-interactive-brand-weak-active);
+		background-color: var(--wpds-color-background-interactive-brand-weak-active);
 
 		.dataviews-filters__search-widget-listitem-single-selection {
 			border-color: var(--wpds-color-stroke-interactive-brand-active);
-			background: var(--wpds-color-bg-surface-neutral-strong);
+			background: var(--wpds-color-background-surface-neutral-strong);
 			&.is-selected {
 				border-color: var(--wpds-color-stroke-interactive-brand-active);
-				background: var(--wpds-color-bg-interactive-brand-strong-active);
+				background: var(--wpds-color-background-interactive-brand-strong-active);
 			}
 		}
 
 		.dataviews-filters__search-widget-listitem-multi-selection {
 			border-color: var(--wpds-color-stroke-interactive-brand-active);
-			background: var(--wpds-color-bg-surface-neutral-strong);
+			background: var(--wpds-color-background-surface-neutral-strong);
 
 			&.is-selected {
 				border-color: var(--wpds-color-stroke-interactive-brand-active);
-				background: var(--wpds-color-bg-interactive-brand-strong-active);
+				background: var(--wpds-color-background-interactive-brand-strong-active);
 			}
 		}
 	}
@@ -242,7 +241,7 @@
 		text-overflow: ellipsis;
 		font-size: var(--wpds-typography-font-size-sm);
 		line-height: 16px;
-		color: var(--wpds-color-fg-content-neutral-weak);
+		color: var(--wpds-color-foreground-content-neutral-weak);
 	}
 
 	.dataviews-filters__search-widget-listitem-single-selection {
@@ -251,7 +250,7 @@
 		padding: 0;
 
 		&.is-selected {
-			background: var(--wpds-color-bg-interactive-brand-strong);
+			background: var(--wpds-color-background-interactive-brand-strong);
 			border-color: var(--wpds-color-stroke-interactive-brand);
 
 			&::before {
@@ -265,10 +264,10 @@
 				left: 50%;
 				transform: translate(-50%, -50%);
 				margin: 0;
-				background-color: var(--wpds-color-fg-interactive-brand-strong);
+				background-color: var(--wpds-color-foreground-interactive-brand-strong);
 
 				// This border serves as a background color in Windows High Contrast mode.
-				border: 4px solid var(--wpds-color-fg-interactive-brand-strong);
+				border: 4px solid var(--wpds-color-foreground-interactive-brand-strong);
 
 				@include break-small() {
 					width: vars.$radio-input-size * 0.5;
@@ -284,8 +283,8 @@
 
 		@include checkbox-control;
 		position: relative;
-		background: var(--wpds-color-bg-interactive-neutral-weak);
-		color: var(--wpds-color-fg-content-neutral);
+		background: var(--wpds-color-background-interactive-neutral-weak);
+		color: var(--wpds-color-foreground-content-neutral);
 		margin: 0;
 		padding: 0;
 		width: var(--checkbox-size);
@@ -300,13 +299,13 @@
 		}
 
 		&.is-selected {
-			background: var(--wpds-color-bg-interactive-brand-strong);
+			background: var(--wpds-color-background-interactive-brand-strong);
 			border-color: var(--wpds-color-stroke-interactive-brand);
 
 			svg {
 				--checkmark-size: var(--checkbox-size);
 
-				fill: var(--wpds-color-fg-interactive-neutral-strong);
+				fill: var(--wpds-color-foreground-interactive-neutral-strong);
 				position: absolute;
 				left: 50%;
 				top: 50%;
@@ -329,9 +328,9 @@
 	.dataviews-filters__search-widget-filter-combobox__input {
 		@include input-control;
 		display: block;
-		padding: 0 var(--wpds-dimension-padding-sm) 0 calc(var(--wpds-dimension-base) * 8);
+		padding: 0 var(--wpds-dimension-padding-sm) 0 var(--wpds-dimension-size-md);
 		width: 100%;
-		height: calc(var(--wpds-dimension-base) * 8); // TODO: use size token when available
+		height: var(--wpds-dimension-size-md);
 
 		// Unset inherited values.
 		margin-left: 0;
@@ -344,14 +343,14 @@
 		}
 
 		&:focus {
-			background: var(--wpds-color-bg-surface-neutral-strong);
+			background: var(--wpds-color-background-surface-neutral-strong);
 			box-shadow:
 				inset 0 0 0 var(--wpds-border-width-focus)
-				var(--wpds-color-stroke-focus-brand);
+				var(--wpds-color-stroke-focus);
 		}
 
 		&::placeholder {
-			color: var(--wpds-color-fg-content-neutral-weak);
+			color: var(--wpds-color-foreground-content-neutral-weak);
 		}
 
 		&::-webkit-search-decoration,
@@ -370,7 +369,7 @@
 		display: flex;
 		align-items: center;
 		justify-content: center;
-		width: vars.$icon-size;
+		width: var(--wpds-dimension-size-sm);
 
 		&:dir(ltr) {
 			transform: scaleX(-1);
@@ -388,16 +387,16 @@
 	top: 0;
 	right: 0;
 	transform: translate(50%, -50%);
-	background: var(--wpds-color-bg-interactive-brand-strong);
-	height: calc(var(--wpds-dimension-base) * 4); // TODO: use size token when available
-	min-width: calc(var(--wpds-dimension-base) * 4); // TODO: use size token when available
+	background: var(--wpds-color-background-interactive-brand-strong);
+	height: var(--wpds-dimension-size-2xs);
+	min-width: var(--wpds-dimension-size-2xs);
 	line-height: var(--wpds-typography-line-height-xs);
 	padding: 0 var(--wpds-dimension-padding-xs);
 	text-align: center;
 	border-radius: var(--wpds-border-radius-lg);
 	font-size: 11px;
-	outline: var(--wpds-border-width-focus) solid var(--wpds-color-bg-surface-neutral-strong);
-	color: var(--wpds-color-fg-interactive-neutral-strong);
+	outline: var(--wpds-border-width-focus) solid var(--wpds-color-background-surface-neutral-strong);
+	color: var(--wpds-color-foreground-interactive-neutral-strong);
 	box-sizing: border-box;
 }
 

package/src/components/dataviews-layouts/activity/style.scss

@@ -7,13 +7,13 @@
 	.dataviews-view-activity__group-header {
 		font-size: var(--wpds-typography-font-size-lg);
 		font-weight: var(--wpds-typography-font-weight-medium);
-		color: var(--wpds-color-fg-content-neutral-weak);
+		color: var(--wpds-color-foreground-content-neutral-weak);
 		margin: 0 0 var(--wpds-dimension-gap-sm) 0;
 		padding: 0;
 	}
 
 	.dataviews-view-activity__item-actions {
-		min-width: calc(var(--wpds-dimension-base) * 6); // TODO: use size token when available
+		min-width: var(--wpds-dimension-size-sm);
 	}
 
 	.dataviews-view-activity__item-content {
@@ -22,7 +22,7 @@
 		.dataviews-view-activity__item-title,
 		.dataviews-view-activity__item-description,
 		.dataviews-view-activity__item-fields {
-			min-height: calc(var(--wpds-dimension-base) * 4); // TODO: use size token when available
+			min-height: var(--wpds-dimension-size-2xs);
 		}
 
 		.dataviews-view-activity__item-title {
@@ -36,7 +36,7 @@
 				cursor: var(--wpds-cursor-control);
 
 				&:focus-visible {
-					outline: var(--wp-admin-border-width-focus) solid var(--wpds-color-stroke-focus-brand);
+					outline: var(--wp-admin-border-width-focus) solid var(--wpds-color-stroke-focus);
 					outline-offset: var(--wp-admin-border-width-focus);
 					border-radius: var(--wpds-border-radius-sm);
 				}
@@ -55,7 +55,7 @@
 		}
 
 		.dataviews-view-activity__item-fields {
-			color: var(--wpds-color-fg-content-neutral-weak);
+			color: var(--wpds-color-foreground-content-neutral-weak);
 			display: flex;
 			gap: var(--wpds-dimension-gap-md);
 			row-gap: var(--wpds-dimension-gap-xs);
@@ -105,12 +105,12 @@
 				width: var(--wpds-dimension-padding-md);
 
 				&::before {
-					height: calc(var(--wpds-dimension-base) * 3);
+					height: var(--wpds-dimension-size-3xs);
 				}
 			}
 			.dataviews-view-activity__item-type-icon {
-				width: calc(var(--wpds-dimension-base) * 3 - 1px);
-				height: calc(var(--wpds-dimension-base) * 3 - 1px);
+				width: calc(var(--wpds-dimension-size-3xs) - 1px);
+				height: calc(var(--wpds-dimension-size-3xs) - 1px);
 			}
 			.dataviews-view-activity__item-content {
 				margin: var(--wpds-dimension-gap-md) 0;
@@ -119,15 +119,15 @@
 
 		&.is-balanced {
 			.dataviews-view-activity__item-type {
-				width: calc(var(--wpds-dimension-base) * 6); // TODO: use size token when available
+				width: var(--wpds-dimension-size-sm);
 
 				&::before {
-					height: calc(var(--wpds-dimension-base) * 3);
+					height: var(--wpds-dimension-size-3xs);
 				}
 			}
 			.dataviews-view-activity__item-type-icon {
-				width: calc(var(--wpds-dimension-base) * 6 + 1px);
-				height: calc(var(--wpds-dimension-base) * 6 + 1px);
+				width: calc(var(--wpds-dimension-size-sm) + 1px);
+				height: calc(var(--wpds-dimension-size-sm) + 1px);
 			}
 			.dataviews-view-activity__item-content {
 				margin: var(--wpds-dimension-gap-md) 0;
@@ -137,15 +137,15 @@
 
 		&.is-comfortable {
 			.dataviews-view-activity__item-type {
-				width: calc(var(--wpds-dimension-base) * 8); // TODO: use size token when available
+				width: var(--wpds-dimension-size-md);
 
 				&::before {
-					height: calc(var(--wpds-dimension-base) * 2);
+					height: var(--wpds-dimension-size-4xs);
 				}
 			}
 			.dataviews-view-activity__item-type-icon {
-				width: calc(var(--wpds-dimension-base) * 8 + 1px);
-				height: calc(var(--wpds-dimension-base) * 8 + 1px);
+				width: calc(var(--wpds-dimension-size-md) + 1px);
+				height: calc(var(--wpds-dimension-size-md) + 1px);
 			}
 			.dataviews-view-activity__item-content {
 				margin: var(--wpds-dimension-gap-sm) 0 var(--wpds-dimension-gap-lg);
@@ -156,8 +156,8 @@
 		&.is-comfortable,
 		&.is-balanced {
 			.dataviews-view-activity__item-bullet {
-				width: calc(var(--wpds-dimension-base) * 2 + 1px);
-				height: calc(var(--wpds-dimension-base) * 2 + 1px);
+				width: calc(var(--wpds-dimension-size-4xs) + 1px);
+				height: calc(var(--wpds-dimension-size-4xs) + 1px);
 				position: relative;
 				top: 50%;
 				transform: translateY(-50%);
@@ -185,7 +185,7 @@
 	.dataviews-view-activity__item-type-icon {
 		overflow: hidden;
 		flex-shrink: 0;
-		background-color: var(--wpds-color-bg-surface-neutral-strong);
+		background-color: var(--wpds-color-background-surface-neutral-strong);
 
 		img,
 		svg,

package/src/components/dataviews-layouts/grid/composite-grid.tsx

@@ -13,7 +13,6 @@ import {
 	Composite,
 	privateApis as componentsPrivateApis,
 } from '@wordpress/components';
-// eslint-disable-next-line @wordpress/use-recommended-components -- `Tooltip` is not yet on the recommended `@wordpress/ui` allow-list; landing as a migration step ahead of the wider rollout.
 import { Stack, Tooltip } from '@wordpress/ui';
 import { __, sprintf } from '@wordpress/i18n';
 import { useInstanceId } from '@wordpress/compose';

package/src/components/dataviews-layouts/grid/style.scss

@@ -44,7 +44,7 @@
 				left: 0;
 				width: 100%;
 				height: 100%;
-				box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wpds-color-stroke-focus-brand);
+				box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wpds-color-stroke-focus);
 				border-radius: var(--wpds-border-radius-md);
 				pointer-events: none;
 
@@ -69,7 +69,7 @@
 		}
 
 		.dataviews-view-grid__title-field {
-			min-height: calc(var(--wpds-dimension-base) * 6); // TODO: use size token when available. Preserve layout when there is no ellipsis button
+			min-height: var(--wpds-dimension-size-sm); // TODO: Preserve layout when there is no ellipsis button
 			overflow: hidden;
 			align-content: center;
 			text-align: start;
@@ -82,23 +82,23 @@
 
 		&.is-selected {
 			.dataviews-view-grid__fields .dataviews-view-grid__field .dataviews-view-grid__field-value {
-				color: var(--wpds-color-fg-content-neutral);
+				color: var(--wpds-color-foreground-content-neutral);
 			}
 		}
 		&.is-selected .dataviews-view-grid__media::after {
 			box-shadow:
 				inset 0 0 0 var(--wpds-border-width-xs) var(--wpds-color-stroke-interactive-brand),
-				inset 0 0 0 var(--wpds-border-width-sm) var(--wpds-color-bg-surface-neutral-strong);
+				inset 0 0 0 var(--wpds-border-width-sm) var(--wpds-color-background-surface-neutral-strong);
 		}
 		.dataviews-view-grid__media:focus::after {
-			box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wpds-color-stroke-focus-brand);
+			box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wpds-color-stroke-focus);
 		}
 	}
 
 	.dataviews-view-grid__media {
 		width: 100%;
 		aspect-ratio: 1/1;
-		background-color: var(--wpds-color-bg-surface-neutral-strong);
+		background-color: var(--wpds-color-background-surface-neutral-strong);
 		border-radius: var(--wpds-border-radius-md);
 		overflow: hidden;
 		position: relative;
@@ -131,7 +131,7 @@
 			display: block;
 			border-radius: var(--wpds-border-radius-md);
 			box-shadow: none;
-			background: var(--wpds-color-bg-surface-neutral);
+			background: var(--wpds-color-background-surface-neutral);
 		}
 	}
 
@@ -145,18 +145,24 @@
 		}
 
 		.dataviews-view-grid__field-value:not(:empty) {
-			min-height: calc(var(--wpds-dimension-base) * 6); // TODO: use size token when available
+			min-height: var(--wpds-dimension-size-sm);
 			line-height: var(--wpds-typography-line-height-sm);
-			padding-top: calc(var(--wpds-dimension-base) / 2);
+			// Top half of the slack between the row height and the line box,
+			// optically centering a single line within the row.
+			padding-top:
+				calc((
+					var(--wpds-dimension-size-sm) -
+					var(--wpds-typography-line-height-sm)
+				) / 2);
 		}
 
 		.dataviews-view-grid__field {
-			min-height: calc(var(--wpds-dimension-base) * 6); // TODO: use size token when available
+			min-height: var(--wpds-dimension-size-sm);
 			align-items: center;
 
 			.dataviews-view-grid__field-name {
 				width: 35%;
-				color: var(--wpds-color-fg-content-neutral-weak);
+				color: var(--wpds-color-foreground-content-neutral-weak);
 				overflow: hidden;
 				text-overflow: ellipsis;
 				white-space: nowrap;
@@ -225,7 +231,7 @@
 	right: var(--wpds-dimension-padding-xs);
 
 	.dataviews-all-actions-button {
-		background-color: var(--wpds-color-bg-surface-neutral-strong);
+		background-color: var(--wpds-color-background-surface-neutral-strong);
 	}
 
 	@media not (prefers-reduced-motion) {
@@ -252,7 +258,7 @@
 .dataviews-view-grid__group-header {
 	font-size: var(--wpds-typography-font-size-lg);
 	font-weight: var(--wpds-typography-font-weight-medium);
-	color: var(--wpds-color-fg-content-neutral);
+	color: var(--wpds-color-foreground-content-neutral);
 	margin: 0 0 var(--wpds-dimension-gap-sm) 0;
 	padding: 0 var(--wpds-dimension-padding-2xl);
 	container-type: inline-size;

package/src/components/dataviews-layouts/list/style.scss

@@ -1,6 +1,14 @@
-@use "@wordpress/base-styles/variables" as vars;
 @use "../../../dataviews/style" as *;
 
+// Square media (thumbnail) size per density. The compact density uses the
+// `--wpds-dimension-size-md` token; these larger densities have no matching
+// token, so they're kept as local constants. The field wrapper reuses the
+// same value as its `min-height` to keep the title centered against the media.
+// TODO: Replace with `--wpds-dimension-size-*` tokens if 48px and 64px are
+// added to the WPDS element size scale.
+$media-size: 48px;
+$media-size-comfortable: 64px;
+
 div.dataviews-view-list {
 	list-style-type: none;
 }
@@ -32,7 +40,7 @@ div.dataviews-view-list {
 			}
 
 			> div {
-				height: vars.$button-size-small;
+				height: var(--wpds-dimension-size-sm);
 			}
 
 			> :not(:last-child) {
@@ -72,12 +80,12 @@ div.dataviews-view-list {
 			&:hover,
 			&.is-hovered,
 			&:focus-within {
-				color: var(--wpds-color-fg-interactive-brand);
-				background-color: var(--wpds-color-bg-interactive-brand-weak);
+				color: var(--wpds-color-foreground-interactive-brand);
+				background-color: var(--wpds-color-background-interactive-brand-weak);
 
 				.dataviews-title-field,
 				.dataviews-view-list__field {
-					color: var(--wpds-color-fg-interactive-brand);
+					color: var(--wpds-color-foreground-interactive-brand);
 				}
 			}
 		}
@@ -89,12 +97,12 @@ div.dataviews-view-list {
 	div[role="article"].is-selected,
 	div[role="article"].is-selected:focus-within {
 		.dataviews-view-list__item-wrapper {
-			background-color: var(--wpds-color-bg-interactive-brand-weak-active);
-			color: var(--wpds-color-fg-interactive-neutral);
+			background-color: var(--wpds-color-background-interactive-brand-weak-active);
+			color: var(--wpds-color-foreground-interactive-neutral);
 
 			.dataviews-title-field,
 			.dataviews-view-list__field {
-				color: var(--wpds-color-fg-interactive-neutral-active);
+				color: var(--wpds-color-foreground-interactive-neutral-active);
 			}
 		}
 	}
@@ -117,7 +125,7 @@ div.dataviews-view-list {
 				position: absolute;
 				content: "";
 				inset: var(--wp-admin-border-width-focus);
-				box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wpds-color-stroke-focus-brand);
+				box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wpds-color-stroke-focus);
 				border-radius: var(--wpds-border-radius-sm);
 				// Windows High Contrast mode will show this outline, but not the box-shadow.
 				outline: 2px solid transparent;
@@ -126,7 +134,7 @@ div.dataviews-view-list {
 	}
 	.dataviews-view-list__title-field {
 		flex: 1;
-		min-height: calc(var(--wpds-dimension-base) * 6); // TODO: use size token when available
+		min-height: var(--wpds-dimension-size-sm);
 		line-height: var(--wpds-typography-line-height-md);
 		overflow: hidden;
 		// The field should be in front of the main button in case it has a link/button.
@@ -136,12 +144,12 @@ div.dataviews-view-list {
 	}
 
 	.dataviews-view-list__media-wrapper {
-		width: calc(var(--wpds-dimension-base) * 13);
-		height: calc(var(--wpds-dimension-base) * 13);
+		width: $media-size;
+		height: $media-size;
 		overflow: hidden;
 		position: relative;
 		flex-shrink: 0;
-		background-color: var(--wpds-color-bg-surface-neutral-strong);
+		background-color: var(--wpds-color-background-surface-neutral-strong);
 		border-radius: var(--wpds-border-radius-md);
 
 		img {
@@ -163,13 +171,13 @@ div.dataviews-view-list {
 	}
 
 	.dataviews-view-list__field-wrapper {
-		min-height: calc(var(--wpds-dimension-base) * 13); // Ensures title is centrally aligned when all fields are hidden
+		min-height: $media-size; // Ensures title is centrally aligned when all fields are hidden
 		flex-grow: 1;
 		min-width: 0;
 	}
 
 	.dataviews-view-list__field {
-		color: var(--wpds-color-fg-interactive-neutral-weak);
+		color: var(--wpds-color-foreground-interactive-neutral-weak);
 	}
 
 	.dataviews-view-list__fields {
@@ -190,7 +198,7 @@ div.dataviews-view-list {
 		}
 
 		.dataviews-view-list__field-value {
-			min-height: calc(var(--wpds-dimension-base) * 6); // TODO: use size token when available
+			min-height: var(--wpds-dimension-size-sm);
 			line-height: var(--wpds-typography-line-height-sm);
 			display: flex;
 			align-items: center;
@@ -209,17 +217,17 @@ div.dataviews-view-list {
 			}
 
 			.dataviews-view-list__title-field {
-				min-height: calc(var(--wpds-dimension-base) * 4); // TODO: use size token when available
+				min-height: var(--wpds-dimension-size-2xs);
 				line-height: var(--wpds-typography-line-height-xs);
 			}
 
 			.dataviews-view-list__media-wrapper {
-				width: calc(var(--wpds-dimension-base) * 8); // TODO: use size token when available
-				height: calc(var(--wpds-dimension-base) * 8); // TODO: use size token when available
+				width: var(--wpds-dimension-size-md);
+				height: var(--wpds-dimension-size-md);
 			}
 
 			.dataviews-view-list__field-wrapper {
-				min-height: calc(var(--wpds-dimension-base) * 8); // TODO: use size token when available
+				min-height: var(--wpds-dimension-size-md);
 			}
 
 			.dataviews-view-list__fields {
@@ -227,7 +235,7 @@ div.dataviews-view-list {
 				row-gap: var(--wpds-dimension-gap-xs);
 
 				.dataviews-view-list__field-value {
-					min-height: calc(var(--wpds-dimension-base) * 4); // TODO: use size token when available
+					min-height: var(--wpds-dimension-size-2xs);
 					line-height: var(--wpds-typography-line-height-xs);
 				}
 			}
@@ -241,17 +249,17 @@ div.dataviews-view-list {
 			}
 
 			.dataviews-view-list__title-field {
-				min-height: calc(var(--wpds-dimension-base) * 8); // TODO: use size token when available
+				min-height: var(--wpds-dimension-size-md);
 				line-height: var(--wpds-typography-line-height-xl);
 			}
 
 			.dataviews-view-list__media-wrapper {
-				width: calc(var(--wpds-dimension-base) * 16);
-				height: calc(var(--wpds-dimension-base) * 16);
+				width: $media-size-comfortable;
+				height: $media-size-comfortable;
 			}
 
 			.dataviews-view-list__field-wrapper {
-				min-height: calc(var(--wpds-dimension-base) * 16);
+				min-height: $media-size-comfortable;
 			}
 
 			.dataviews-view-list__fields {
@@ -259,7 +267,7 @@ div.dataviews-view-list {
 				row-gap: var(--wpds-dimension-gap-sm);
 
 				.dataviews-view-list__field-value {
-					min-height: calc(var(--wpds-dimension-base) * 8); // TODO: use size token when available
+					min-height: var(--wpds-dimension-size-md);
 					line-height: var(--wpds-typography-line-height-md);
 				}
 			}
@@ -274,7 +282,7 @@ div.dataviews-view-list {
 .dataviews-view-list__group-header {
 	font-size: var(--wpds-typography-font-size-lg);
 	font-weight: var(--wpds-typography-font-weight-medium);
-	color: var(--wpds-color-fg-content-neutral);
+	color: var(--wpds-color-foreground-content-neutral);
 	margin: 0 0 var(--wpds-dimension-gap-sm) 0;
 	padding: 0 var(--wpds-dimension-padding-2xl);
 }