feat: UI review implementation

package.json

@@ -53,6 +53,7 @@
   },
   "dependencies": {
     "@codemirror/fold": "^0.19.4",
+    "@tabler/icons-react": "^3.46.0",
     "@wordpress/components": "^29.3.0",
     "@wordpress/date": "^5.43.0",
     "@wordpress/dom-ready": "^4.17.0",

src/css/common/_kebab-menu.scss

@@ -45,6 +45,7 @@
 	background: #fff;
 	border: 1px solid #e2e2e4;
 	border-radius: 5px;
+	overflow: hidden;
 	box-shadow: 0 3px 16px rgb(0 0 0 / 15%);
 
 	&.kebab-menu-popover-top {

src/css/common/_page-header.scss

@@ -15,10 +15,17 @@
 	h2 {
 		margin: 0;
 		padding: 0;
-		font-size: 32px;
+		font-size: 26px;
 		font-weight: 510;
 		line-height: 1.25;
-		color: #000;
+	}
+
+	h1 {
+		color: #1d2327;
+	}
+
+	h2 {
+		color: theme.$control-text;
 	}
 }
 

src/css/common/_subnav.scss

@@ -3,60 +3,92 @@
 // Snippet-type navigation: a boxed segmented control on a white band, with
 // each tab separated by a vertical rule and the active tab shown as a
 // filled tile.
-.snippet-type-nav {
-	// The tab band scrolls sideways instead of wrapping at any width.
-	overflow-x: auto;
-	scrollbar-width: thin;
-	background: #fff;
+.snippet-type-nav-wrapper {
+	position: relative;
 
-	// The toolbar band above already draws the 1px separator, so only a
-	// bottom border here — a top border would double the line weight.
-	border-block-end: 1px solid #e2e2e4;
-	min-block-size: 53px;
-
-	// Bleed across the full admin content width, flush against the plugin
-	// toolbar above: counteract the .wrap top margin (10px) plus its 2px /
-	// 20px inline margins and the #wpcontent 20px inline padding.
+	// Bleed across the full admin content width, flush against the plugin toolbar.
 	box-sizing: border-box;
-	margin-block-start: -10px;
+	min-block-size: 53px;
+	margin-block-start: -1px;
 	margin-inline-start: -22px;
 	inline-size: calc(100% + 42px);
+	overflow: hidden;
+	background: #fff;
+
+	&::before,
+	&::after {
+		position: absolute;
+		inset-block: 0;
+		z-index: 1;
+		inline-size: 32px;
+		content: '';
+		opacity: 0;
+		pointer-events: none;
+		transition: opacity 150ms ease;
+	}
+
+	&::before {
+		inset-inline-start: 0;
+		background: linear-gradient(to right, #fff, transparent);
+	}
+
+	&::after {
+		inset-inline-end: 0;
+		background: linear-gradient(to left, #fff, transparent);
+	}
+
+	&.has-scroll-start::before,
+	&.has-scroll-end::after {
+		opacity: 1;
+	}
 
-	// Core admin switches to 10px #wpcontent padding, 0/12px .wrap margins
-	// below 782px; mirror them so the bar stays flush without overflowing
-	// the viewport. The tabs scroll horizontally on a single row rather than
-	// stacking, with the scrollbar chrome hidden.
 	@media (width <= 782px) {
 		margin-inline-start: -10px;
 		inline-size: calc(100% + 22px);
-		overflow-x: auto;
-		scrollbar-width: none;
+	}
+}
 
-		&::-webkit-scrollbar {
-			display: none;
-		}
+.snippet-type-nav {
+	// The tab band scrolls sideways instead of wrapping at any width.
+	overflow-x: auto;
+	scrollbar-width: thin;
+
+	// The row line is painted on the scrollport so it remains fixed while tabs scroll.
+	background: linear-gradient(to top, #e2e2e4 1px, #fff 1px);
 
-		ul {
-			flex-wrap: nowrap;
+	@media (width <= 960px) {
+		li {
+			flex: 1 1 0;
 		}
 
 		.snippet-type-link {
-			white-space: nowrap;
+			inline-size: 100%;
+			min-inline-size: 100px;
+			padding-inline: 4px;
+		}
+	}
+
+	@media (width <= 782px) {
+		scrollbar-width: none;
+
+		&::-webkit-scrollbar {
+			display: none;
 		}
 	}
 
 	ul {
 		display: flex;
 		align-items: stretch;
 		flex-wrap: nowrap;
-		min-block-size: 52px;
+		min-block-size: 53px;
 		margin: 0;
 		padding: 0;
 		list-style: none;
 	}
 
 	li {
 		display: flex;
+		flex: 0 0 auto;
 		margin: 0;
 	}
 
@@ -85,6 +117,7 @@
 		font-size: 14px;
 		font-weight: 600;
 		line-height: 1.5;
+		white-space: nowrap;
 		color: #646970;
 		text-decoration: none;
 		box-sizing: border-box;
@@ -110,12 +143,7 @@
 
 		&.active-type {
 			background: #f0f0f1;
-			border-color: #f0f0f1;
 			color: theme.$accent;
-
-			// Children paint over the parent nav's border, so this recolours
-			// the 1px band separator beneath the active tab to match its fill.
-			box-shadow: 0 1px 0 0 #f0f0f1;
 		}
 
 		// Suppress the persistent focus ring left behind after a mouse click;
@@ -189,24 +217,30 @@
 		display: flex;
 		justify-content: flex-end;
 		margin: 0;
+		border-color: #e2e2e4;
+
+		.show-settings {
+			border-color: #e2e2e4;
+		}
 	}
 
 	#screen-meta {
 		margin: 0;
 	}
 }
 
-// Item count shown after a subnav tab's label, as muted text.
+// Item count shown after a subnav tab's label, using the label colour at reduced opacity.
 .snippet-type-nav .subnav-count {
 	font-size: 14px;
 	font-weight: 600;
 	line-height: 1.5;
-	color: #646970;
+	color: currentcolor;
+	opacity: 0.65;
 }
 
-// The active tab's count adopts the accent alongside its label.
+// Keep the active count tied to its active label rather than assigning a separate colour.
 .snippet-type-nav .snippet-type-link.active-type .subnav-count {
-	color: theme.$accent;
+	color: currentcolor;
 }
 
 // The short "All" form of the all-snippets label only replaces "All Snippets"
@@ -234,9 +268,8 @@
 	}
 }
 
-// When an admin notice pushes the page content down, restore the gap and top
-// border above the subnav bar.
-.notice + .wrap .snippet-type-nav {
-	margin-block-start: 20px;
-	border-block-start: 1px solid theme.$control-border;
+// When an admin notice pushes the page content down, restore the top border
+// above the subnav bar (no extra margin — the wrapper sits flush).
+.notice + .wrap .snippet-type-nav-wrapper {
+	border-block-start: 1px solid #e2e2e4;
 }

src/css/common/_theme.scss

@@ -13,10 +13,27 @@ $cloud-update: #ff9800;
 // screens regardless of WordPress version (see common/_wp-admin.scss).
 $accent-hover: #0a4b78;
 $control-border: #c3c4c7;
-$control-text: #2c3338;
+$control-text: #2c3337;
 $control-height: 38px;
 $control-radius: 5px;
 
+// Runtime design tokens. Sass variables keep compile-time helpers available;
+// custom properties expose the approved system to every rendered component.
+:root {
+	--cs-color-accent: #2271b1;
+	--cs-color-accent-hover: #0a4b78;
+	--cs-color-text: #2c3337;
+	--cs-color-text-muted: #646970;
+	--cs-color-surface: #fff;
+	--cs-color-surface-subtle: #f6f7f7;
+	--cs-color-border: #c3c4c7;
+	--cs-color-border-subtle: #dcdcde;
+	--cs-control-height: 38px;
+	--cs-control-radius: 5px;
+	--cs-font-size-body: 14px;
+	--cs-line-height-body: 1.5;
+}
+
 /* format: background-color [color] */
 $badges: (
 	// php/html/cond darkened for WCAG AA — at least 4.5:1 against white 12px
@@ -26,12 +43,12 @@ $badges: (
 	css: #9b59b6,
 	js: #f7d67a #1c1f20,
 	cond: #22826f,
-	core: #61c5cb,
+	core: #4fa1a6,
 	pro: #f7e8e3 #df9279,
-	cloud: $cloud,
+	cloud: #009fb4,
 	bundles: #50575e,
-	cloud_search: #ff9800,
-	private: #f7e6be #ca961b,
+	cloud_search: #d27c00,
+	private: #f7e6be #a27813,
 	public: #dbebf7 $accent,
 	success: #d3e8d1 #447340,
 	failure: #fad7c1 #a24b16,