From 118bf3ca6aa52fab02df817f2508dd5bf403e1e9 Mon Sep 17 00:00:00 2001
From: Vicente Canales <1157901+vcanales@users.noreply.github.com>
Date: Wed, 21 Aug 2024 22:25:44 -0400
Subject: [PATCH] Update stylebook designs

Reference: https://github.com/WordPress/gutenberg/issues/53431
[Figma](https://www.figma.com/file/guZBzJKVdWLcNeWCZ7Rvx1/Style-Book?type=design&node-id=0%3A1&mode=design&t=JtUpwwDWUrnIlvOy-1)
---
 .../src/components/style-book/index.js        | 23 ++++++++++++++-----
 1 file changed, 17 insertions(+), 6 deletions(-)

diff --git a/packages/edit-site/src/components/style-book/index.js b/packages/edit-site/src/components/style-book/index.js
index 7ee8eed375f9a9..7719f79440d23e 100644
--- a/packages/edit-site/src/components/style-book/index.js
+++ b/packages/edit-site/src/components/style-book/index.js
@@ -66,17 +66,17 @@ const STYLE_BOOK_IFRAME_STYLES = `
 	}
 
 	.edit-site-style-book__example {
-		border-radius: 2px;
 		cursor: pointer;
 		display: flex;
 		flex-direction: column;
 		gap: 40px;
 		margin-bottom: 40px;
-		padding: 16px;
+		padding: 16px 0;
 		width: 100%;
 		box-sizing: border-box;
 		scroll-margin-top: 32px;
 		scroll-margin-bottom: 32px;
+		border-top: 1px solid var(--wp--preset--color--contrast);
 	}
 
 	.edit-site-style-book__example.is-selected {
@@ -89,21 +89,20 @@ const STYLE_BOOK_IFRAME_STYLES = `
 	}
 
 	.edit-site-style-book__examples.is-wide .edit-site-style-book__example {
-		flex-direction: row;
+		flex-direction: column;
 	}
 
 	.edit-site-style-book__example-title {
 		font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
-		font-size: 11px;
+		font-size: 13px;
 		font-weight: 500;
+		color: var(--wp--preset--color--contrast);
 		line-height: normal;
 		margin: 0;
 		text-align: left;
-		text-transform: uppercase;
 	}
 
 	.edit-site-style-book__examples.is-wide .edit-site-style-book__example-title {
-		text-align: right;
 		width: 120px;
 	}
 
@@ -413,6 +412,18 @@ const Examples = memo(
 	}
 );
 
+/**
+ * Example component.
+ *
+ * @param {{
+ *  id: string;
+ *  title: string;
+ *  blocks: WPBlock[];
+ *  isSelected: boolean;
+ *  onClick: () => void;
+ * }} ExampleProps
+ * @return {JSX.Element} The rendered Example component.
+ */
 const Example = ( { id, title, blocks, isSelected, onClick } ) => {
 	const originalSettings = useSelect(
 		( select ) => select( blockEditorStore ).getSettings(),