feat: refresh snippet table, preview and notice presentation

src/css/common/_cards.scss

@@ -1,3 +1,4 @@
+@use 'checkbox';
 @use 'theme';
 
 .code-snippets-cards {
@@ -84,34 +85,7 @@
 	}
 
 	input[type='checkbox'].snippet-card-select {
-		appearance: none;
-		display: grid;
-		place-content: center;
-		inline-size: 20px;
-		block-size: 20px;
-		padding: 0;
-		box-sizing: border-box;
-		background: #fff;
-		border: 1.5px solid theme.$accent;
-		border-radius: 5px;
-		box-shadow: 0 2px 2px rgb(0 0 0 / 5%);
-		cursor: pointer;
-
-		&::before {
-			content: none;
-		}
-
-		&:checked {
-			background: theme.$accent;
-
-			&::before {
-				content: '';
-				inline-size: 14px;
-				block-size: 14px;
-				margin: 0;
-				background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M14.83 4.89l1.34.94-5.81 8.38H9.02L5.78 9.67l1.34-1.25 2.57 2.4z' fill='%23fff'/%3E%3C/svg%3E") center/14px no-repeat;
-			}
-		}
+		@include checkbox.canonical;
 	}
 
 	&.is-selectable .card-inner > h3 {

src/css/common/_checkbox.scss

@@ -0,0 +1,35 @@
+@use 'theme';
+
+@mixin canonical {
+	appearance: none;
+	display: inline-grid;
+	place-content: center;
+	vertical-align: middle;
+	inline-size: 20px;
+	block-size: 20px;
+	padding: 0;
+	margin: 0;
+	box-sizing: border-box;
+	background: #fff;
+	border: 1.5px solid theme.$control-border;
+	border-radius: 5px;
+	box-shadow: 0 2px 2px rgb(0 0 0 / 5%);
+	cursor: pointer;
+
+	&::before {
+		content: none;
+	}
+
+	&:checked {
+		background: theme.$accent;
+		border-color: theme.$accent;
+
+		&::before {
+			content: '';
+			inline-size: 20px;
+			block-size: 20px;
+			margin: 0;
+			background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M14.83 4.89l1.34.94-5.81 8.38H9.02L5.78 9.67l1.34-1.25 2.57 2.4z' fill='%23fff'/%3E%3C/svg%3E") center/20px no-repeat;
+		}
+	}
+}

src/css/common/_modal.scss

@@ -66,13 +66,10 @@
 		border-block-end-color: #ddd;
 	}
 
-	// The badge lives in the modal content because the minimum-supported
-	// WordPress Modal (5.5–6.3) has no headerActions prop; shift it up into
-	// the header area, clear of the close button.
 	.code-snippets-preview-modal__badge {
-		position: absolute;
-		inset-block-start: 18px;
-		inset-inline-end: 56px;
+		display: flex;
+		flex-shrink: 0;
+		margin-inline-end: 8px;
 	}
 
 	// Header and footer stay pinned; the CodeMirror editor is the only
@@ -85,8 +82,7 @@
 		overflow: hidden;
 	}
 
-	// The modal component wraps its children in an unstyled focus container;
-	// it must join the flex chain or the editor grows to its content height.
+	// Newer Modal versions wrap children in an unstyled focus container.
 	.components-modal__header + div {
 		display: flex;
 		flex-flow: column;
@@ -151,11 +147,21 @@
 		}
 
 		.button-link.code-snippets-preview-modal__trash {
+			min-block-size: 38px;
+			padding-block: 0;
+			padding-inline: 16px;
+			border: 1px solid #b32d2e;
+			border-radius: 5px;
+			background: #f6f7f7;
+			line-height: 2.5715;
+			font-weight: 400;
 			color: #b32d2e;
 			text-decoration: none;
 
 			&:hover,
 			&:focus {
+				border-color: #d63638;
+				background: #f0f0f1;
 				color: #d63638;
 			}
 		}

src/css/common/_wp-admin.scss

@@ -18,7 +18,11 @@
 // plugin's own more-specific per-control rules, which are emitted later in each bundle and so
 // win on equal specificity. This lets bespoke controls (conditions button, row-action links,
 // priority input, etc.) keep their intended styling without per-element exclusions here.
-.wrap {
+.wrap,
+// Modals render through a portal on `document.body`, outside the page wrapper, so
+// the plugin's own dialogs are listed here to pick up the same control tokens.
+.code-snippets-preview-modal,
+.code-snippets-modal {
 	// Native single-line text controls and selects: token height + border.
 	// `@wordpress/components` inputs/selects (`.components-*`) keep their own design — they
 	// are excluded so React widgets such as the tags token field are left untouched.
@@ -77,7 +81,8 @@
 	// so its solid fill below is not overwritten. The line-height centres text vertically
 	// in anchor-based buttons, which lack a button element's automatic centring.
 	.button:not(.button-primary, .button-link),
-	.button-secondary {
+	.button-secondary,
+	.page-title-action {
 		min-block-size: theme.$control-height;
 		padding-block: 0;
 		padding-inline: 12px;

src/css/common/list-table/_layout.scss

@@ -1,3 +1,4 @@
+@use '../checkbox';
 @use '../theme';
 
 .column-name {
@@ -43,6 +44,17 @@
 }
 
 .wp-list-table {
+	.check-column input[type='checkbox'] {
+		@include checkbox.canonical;
+	}
+
+	// Shared horizontal rhythm for every snippet table, so the cloud table lines
+	// up with the snippets table rather than keeping the wider WordPress default.
+	th:not(.check-column),
+	td:not(.check-column) {
+		padding-inline: 9px;
+	}
+
 	td.column-id {
 		text-align: center;
 	}
@@ -78,7 +90,8 @@
 		cursor: pointer;
 		text-align: start;
 		overflow: hidden;
-		padding: 8px;
+		padding-block: 8px;
+		padding-inline: 0;
 	}
 
 	th.sortable .list-table-sort-button:focus-visible,
@@ -88,11 +101,38 @@
 		border-radius: 2px;
 	}
 
+	// The type badge is wrapped in an unclassed link that lays out as an inline
+	// box shorter than the badge, so wrap the badge exactly and draw our own
+	// focus ring: the inherited one resolves to a transparent outline.
+	.column-type a {
+		display: inline-flex;
+		border-radius: 3px;
+
+		// Matches the activation switch: a white ring separates the badge from
+		// the accent ring, so the indicator does not sit tight on the border.
+		// Applied to `:focus` as well, since a click leaves the WordPress ring
+		// behind, which hugs the badge.
+		&:focus,
+		&:focus-visible {
+			outline: none;
+			box-shadow: 0 0 0 2px #fff, 0 0 0 4px theme.$accent;
+		}
+	}
+
 	.row-actions {
 		color: #646970;
 		position: relative;
 		inset-inline-start: 0;
 
+		a:not(.delete) {
+			color: theme.$accent;
+
+			&:hover,
+			&:focus {
+				color: theme.$accent-hover;
+			}
+		}
+
 		// Row-action buttons render as plain inline links. On WP 7.0 the generic `.button`
 		// compatibility styling would otherwise give them a fill, border, radius and fixed
 		// height, so fully neutralise it here (this rule is emitted after the wp-admin layer
@@ -107,6 +147,7 @@
 			box-shadow: none;
 			line-height: inherit;
 			font-weight: 400;
+			color: theme.$accent;
 
 			&:hover:not(:disabled),
 			&:focus:not(:disabled) {
@@ -115,6 +156,11 @@
 				box-shadow: none;
 			}
 
+			&:hover:not(:disabled, .delete, .snippet-cloud-update),
+			&:focus:not(:disabled, .delete, .snippet-cloud-update) {
+				color: theme.$accent-hover;
+			}
+
 			&.delete {
 				color: #b32d2e;
 			}
@@ -151,27 +197,47 @@
 	}
 
 	.column-activate {
-		padding-inline-end: 0 !important;
+		text-align: center;
+
+		.snippet-activation-switch,
+		input[type='checkbox'].switch {
+			margin-inline: auto;
+		}
 	}
 
 	.clear-filters {
 		vertical-align: middle;
 	}
 
-	tfoot th.check-column {
-		padding: 13px 0 0 3px;
+	thead th.check-column,
+	thead td.check-column,
+	tfoot th.check-column,
+	tfoot td.check-column,
+	tbody th.check-column,
+	tbody td.check-column {
+		padding-block: 0;
+		padding-inline-start: 9px;
+		vertical-align: middle;
 	}
 
+	// Line every checkbox up on the same starting edge. Rows flagged as active
+	// draw a 2px accent border on this cell, so the same width is reserved as a
+	// transparent border elsewhere; without it the header, footer and inactive
+	// rows sit 2px further in, and rows shift as snippets are toggled.
 	thead th.check-column,
+	thead td.check-column,
 	tfoot th.check-column,
-	.inactive-snippet th.check-column {
-		padding-inline-start: 5px;
+	tfoot td.check-column,
+	tbody tr:not(.active-snippet) th.check-column,
+	tbody tr:not(.active-snippet) td.check-column {
+		border-inline-start: 2px solid transparent;
 	}
 
 	.active-snippet, .inactive-snippet {
 		td, th {
 			padding: 10px 9px;
 			box-shadow: inset 0 -1px 0 rgb(0 0 0 / 10%);
+			vertical-align: middle;
 		}
 	}
 
@@ -225,6 +291,7 @@
 	}
 }
 
+
 .snippets-table-toolbar {
 	display: flex;
 	justify-content: space-between;

src/css/common/list-table/_pagination.scss

@@ -1,4 +1,4 @@
-@use '../theme';
+@use '../checkbox';
 
 // The pagination group and view toggle wrap together as one end-pinned
 // cluster so narrow viewports never split them across rows.
@@ -30,12 +30,7 @@
 	font-size: 14px;
 
 	input[type='checkbox'] {
-		inline-size: 20px;
-		block-size: 20px;
-		margin: 0;
-		border: 1px solid theme.$control-border;
-		border-radius: 5px;
-		box-shadow: 0 2px 2px rgb(0 0 0 / 5%);
+		@include checkbox.canonical;
 	}
 }
 

src/css/import.scss

@@ -1,3 +1,4 @@
+@use 'common/checkbox';
 @use 'common/toolbar';
 @use 'common/subnav';
 @use 'common/wp-admin';
@@ -6,3 +7,7 @@
 @use 'import/card';
 @use 'import/upload';
 @use 'import/migrate';
+
+.wp-list-table .check-column input[type='checkbox'] {
+	@include checkbox.canonical;
+}

src/css/manage/_cloud-community.scss

@@ -106,7 +106,10 @@ $status-colors: (
 }
 
 .cloud-snippets-table {
-	td {
+	// Body rows only: the header row also holds a `td` for the select-all cell,
+	// and a fixed height there would make this header taller than the one on the
+	// snippets table.
+	tbody td {
 		box-sizing: border-box;
 		block-size: 60px;
 		vertical-align: middle;

src/css/menu.scss

@@ -42,6 +42,8 @@
 		.dashicons {
 			vertical-align: text-bottom;
 			color: inherit;
+			font-size: 16px;
+			padding-block-start: 2px;
 
 			// WP 7.0's taller button line-height (≈38px) leaks onto the icon and pushes it out
 			// of alignment; reset it so the glyph stays centred within the flex pill.

src/css/settings.scss

@@ -1,3 +1,4 @@
+@use 'common/checkbox';
 @use 'common/codemirror';
 @use 'common/subnav';
 @use 'common/theme';
@@ -7,6 +8,11 @@
 
 $sections: general, editor, debug, version-switch;
 
+.settings-section input[type='checkbox']:not(.switch) {
+	@include checkbox.canonical;
+	margin-inline-end: 8px;
+}
+
 .snippets-page-header h1 {
 	color: #2c3337;
 }