Restyle chapter list

source/wp-content/themes/wporg-developer-2023/src/chapter-list/block.php

@@ -58,8 +58,8 @@ function render( $attributes, $content, $block ) {
 	$content = wp_list_pages( $args );
 
 	$title = do_blocks(
-		'<!-- wp:heading {"style":{"spacing":{"margin":{"top":"0","bottom":"var:preset|spacing|20"}}},"fontFamily":"inter"} -->
-			<h2 class="wp-block-heading has-inter-font-family" style="margin-top:0;margin-bottom:var(--wp--preset--spacing--20)">' . __( 'Chapters', 'wporg' ) . '</h2>
+		'<!-- wp:heading {"style":{"typography":{"fontStyle":"normal","fontWeight":"400"}},"fontSize":"small","fontFamily":"inter"} -->
+		<h2 class="wp-block-heading has-inter-font-family has-small-font-size" style="font-style:normal;font-weight:400">' . __( 'Chapters', 'wporg' ) . '</h2>
 		<!-- /wp:heading -->'
 	);
 

source/wp-content/themes/wporg-developer-2023/src/chapter-list/style.scss

@@ -10,13 +10,13 @@
 	}
 
 	ul ul {
-		margin-left: calc(var(--local--button-size) / 2);
-		padding-left: calc(var(--wp--preset--spacing--20) / 4);
-		border-left: 1px solid var(--wp--preset--color--light-grey-1);
+		padding-left: var(--wp--preset--spacing--30);
+		list-style-type: disc;
 	}
 
 	li {
 		margin-block: calc(var(--wp--preset--spacing--20) / 4);
+		color: var(--wp--preset--color--charcoal-4);
 	}
 
 	> ul {
@@ -27,6 +27,10 @@
 		}
 	}
 
+	a {
+		text-decoration: none;
+	}
+
 	&.has-js-control ul ul {
 		display: none;
 
@@ -36,7 +40,6 @@
 	}
 
 	// Style the dash & chevron, most of the styles can be shared.
-	&.has-js-control li:not(.page_item_has_children),
 	.wporg-chapter-list--button-group {
 		display: flex;
 		align-items: flex-start;
@@ -56,30 +59,22 @@
 		height: 0.8em;
 	}
 
-	&:not(.has-js-control) li::before,
-	&.has-js-control li:not(.page_item_has_children)::before,
-	.wporg-chapter-list--button-group > button::before {
-		content: "";
-		display: inline-block;
-		mask-image: url(../../images/line.svg);
-		mask-repeat: no-repeat;
-		mask-position: center;
-		background-color: var(--wp--preset--color--light-grey-1);
-	}
-
 	.wporg-chapter-list--button-group > button {
 		background-color: transparent;
 		border: none;
 		padding: 0;
 		cursor: pointer;
 
 		&::before {
+			content: "";
+			display: inline-block;
 			height: var(--local--button-size);
 			width: var(--local--button-size);
 			mask-image: url(../../images/chevron.svg);
-			mask-size: 0.8em 0.4em;
+			mask-repeat: no-repeat;
+			mask-position: center;
 			transform: rotate(180deg);
-			background-color: var(--wp--preset--color--blueberry-1);
+			background-color: var(--wp--preset--color--charcoal-4);
 		}
 
 		&[aria-expanded="true"]::before {
@@ -92,10 +87,13 @@
 	}
 
 	// Descendent is `span` if there are children, or `a` if not.
-	.current_page_ancestor > span,
-	.current_page_ancestor > a,
-	.current_page_item > span,
+	.current_page_item > span a,
 	.current_page_item > a {
-		font-weight: 600;
+		font-weight: 700;
+		color: var(--wp--preset--color--charcoal-1);
+	}
+
+	.current_page_item > span button::before {
+		background-color: var(--wp--preset--color--charcoal-1);
 	}
 }

source/wp-content/themes/wporg-developer-2023/theme.json

@@ -202,7 +202,7 @@
 					},
 					"link": {
 						"color": {
-							"text": "var(--wp--preset--color--blueberry-1)"
+							"text": "var(--wp--preset--color--charcoal-4)"
 						}
 					}
 				}