From 436e83693dfb10145133941411d651a616f86328 Mon Sep 17 00:00:00 2001
From: Adam Wood <1017872+adamwoodnz@users.noreply.github.com>
Date: Wed, 6 Dec 2023 10:31:46 +1300
Subject: [PATCH 1/8] Add labels to user note textareas

---
 .../themes/wporg-developer-2023/inc/user-content.php        | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/source/wp-content/themes/wporg-developer-2023/inc/user-content.php b/source/wp-content/themes/wporg-developer-2023/inc/user-content.php
index 46896f4d4..c09b3160a 100644
--- a/source/wp-content/themes/wporg-developer-2023/inc/user-content.php
+++ b/source/wp-content/themes/wporg-developer-2023/inc/user-content.php
@@ -298,6 +298,7 @@ public static function wp_editor_comments( $comment = false ) {
 			echo "<ul class='tablist' style='display: none;'>";
 			echo '<li><a href="#comment-form-comment">' . __( 'Write', 'wporg' ) . '</a></li>';
 			echo '<li><a href="#comment-preview">' . __( 'Preview', 'wporg' ) . '</a></li></ul>';
+			echo '<label class="screen-reader-text" for="comment">' . esc_html__( 'Note', 'wporg' ) . '</label>';
 		}
 
 		echo '<div class="comment-form-comment tab-section" id="comment-form-comment">';
@@ -379,6 +380,11 @@ public static function wp_editor_feedback( $comment, $display = 'show', $edit =
 		ob_start();
 		echo "<div id='feedback-editor-{$comment_id}' class='feedback-editor{$class}'{$display}>\n";
 		echo "<form id='feedback-form-{$instance}{$form_type}' class='feedback-form' method='post' action='{$action}' name='feedback-form-{$instance}'>\n";
+		printf(
+			"<label class='screen-reader-text' for='feedback-comment-%s'>%s</label>",
+			esc_attr( $instance ),
+			esc_html__( 'Feedback', 'wporg' ),
+		);
 		wp_editor( $content, 'feedback-comment-' . $instance, array(
 				'media_buttons' => false,
 				'textarea_name' => 'comment',

From 88565ddd6730a42d4e61a1d5f86cf91ec6a62276 Mon Sep 17 00:00:00 2001
From: Adam Wood <1017872+adamwoodnz@users.noreply.github.com>
Date: Wed, 6 Dec 2023 11:43:55 +1300
Subject: [PATCH 2/8] Fix contrast issues with code reference title labels

---
 .../src/code-short-title/style.scss           | 21 +++++++++++++------
 1 file changed, 15 insertions(+), 6 deletions(-)

diff --git a/source/wp-content/themes/wporg-developer-2023/src/code-short-title/style.scss b/source/wp-content/themes/wporg-developer-2023/src/code-short-title/style.scss
index 2dc43c442..45b366b94 100644
--- a/source/wp-content/themes/wporg-developer-2023/src/code-short-title/style.scss
+++ b/source/wp-content/themes/wporg-developer-2023/src/code-short-title/style.scss
@@ -1,3 +1,4 @@
+/* stylelint-disable scss/no-global-function-names */
 .wp-block-wporg-code-short-title {
 	align-items: flex-start;
 	display: flex;
@@ -29,7 +30,6 @@
 	border-radius: 2px;
 	margin-right: 8px;
 	padding: 2px 8px;
-	font-size: var(--wp--preset--font-size--small);
 	font-weight: 500;
 	word-break: keep-all;
 }
@@ -51,34 +51,43 @@
 }
 
 .function {
+	$color-function: #008a20;
+
 	&.wp-block-wporg-code-short-title,
 	a {
-		color: #008a20;
+		color: $color-function;
 	}
 
 	.wp-block-wporg-code-short-title__type {
-		background: rgba(0, 138, 32, 0.1);
+		color: darken($color-function, 2%);
+		background: rgba(0, 138, 32, 0.05);
 	}
 }
 
 .hook {
+	$color-hook: #d63638;
+
 	&.wp-block-wporg-code-short-title,
 	a {
-		color: #d63638;
+		color: $color-hook;
 	}
 
 	.wp-block-wporg-code-short-title__type {
-		background: rgba(214, 54, 56, 0.1);
+		color: darken($color-hook, 1%);
+		background: rgba(214, 54, 56, 0.05);
 	}
 }
 
 .class {
+	$color-class: #bd8600;
+
 	&.wp-block-wporg-code-short-title,
 	a {
-		color: #bd8600;
+		color: $color-class;
 	}
 
 	.wp-block-wporg-code-short-title__type {
+		color: darken($color-class, 8%);
 		background: rgba(189, 134, 0, 0.05);
 	}
 }

From f95f136cfe884e1c183911f3f74819544effa30a Mon Sep 17 00:00:00 2001
From: Adam Wood <1017872+adamwoodnz@users.noreply.github.com>
Date: Mon, 11 Dec 2023 17:38:03 +1300
Subject: [PATCH 3/8] Create semantic colors palette

---
 .../scss/settings/_semantic-colors.scss              | 12 ++++++++++++
 1 file changed, 12 insertions(+)
 create mode 100644 source/wp-content/themes/wporg-developer-2023/scss/settings/_semantic-colors.scss

diff --git a/source/wp-content/themes/wporg-developer-2023/scss/settings/_semantic-colors.scss b/source/wp-content/themes/wporg-developer-2023/scss/settings/_semantic-colors.scss
new file mode 100644
index 000000000..6af963dac
--- /dev/null
+++ b/source/wp-content/themes/wporg-developer-2023/scss/settings/_semantic-colors.scss
@@ -0,0 +1,12 @@
+@import "colors";
+
+$color-code-title-function: get-color(green-50);
+$color-code-title-function-type: get-color(green-60);
+$color-code-title-hook: get-color(red-50);
+$color-code-title-hook-type: get-color(red-60);
+$color-code-title-class: get-color(yellow-40);
+$color-code-title-class-type: get-color(yellow-50);
+$color-code-title-method: get-color(blue-60);
+
+$color-command-github-open: get-color(green-60);
+$color-command-github-closed: get-color(red-60);

From d133e25879673012ec611481ca36efe992b57ed1 Mon Sep 17 00:00:00 2001
From: Adam Wood <1017872+adamwoodnz@users.noreply.github.com>
Date: Mon, 11 Dec 2023 17:38:25 +1300
Subject: [PATCH 4/8] Use semantic colors for code titles

---
 .../src/code-short-title/style.scss           | 23 ++++++++-----------
 1 file changed, 9 insertions(+), 14 deletions(-)

diff --git a/source/wp-content/themes/wporg-developer-2023/src/code-short-title/style.scss b/source/wp-content/themes/wporg-developer-2023/src/code-short-title/style.scss
index 45b366b94..a33cda6ab 100644
--- a/source/wp-content/themes/wporg-developer-2023/src/code-short-title/style.scss
+++ b/source/wp-content/themes/wporg-developer-2023/src/code-short-title/style.scss
@@ -1,4 +1,5 @@
-/* stylelint-disable scss/no-global-function-names */
+@import "../../scss/settings/semantic-colors";
+
 .wp-block-wporg-code-short-title {
 	align-items: flex-start;
 	display: flex;
@@ -51,43 +52,37 @@
 }
 
 .function {
-	$color-function: #008a20;
-
 	&.wp-block-wporg-code-short-title,
 	a {
-		color: $color-function;
+		color: $color-code-title-function;
 	}
 
 	.wp-block-wporg-code-short-title__type {
-		color: darken($color-function, 2%);
+		color: $color-code-title-function-type;
 		background: rgba(0, 138, 32, 0.05);
 	}
 }
 
 .hook {
-	$color-hook: #d63638;
-
 	&.wp-block-wporg-code-short-title,
 	a {
-		color: $color-hook;
+		color: $color-code-title-hook;
 	}
 
 	.wp-block-wporg-code-short-title__type {
-		color: darken($color-hook, 1%);
+		color: $color-code-title-hook-type;
 		background: rgba(214, 54, 56, 0.05);
 	}
 }
 
 .class {
-	$color-class: #bd8600;
-
 	&.wp-block-wporg-code-short-title,
 	a {
-		color: $color-class;
+		color: $color-code-title-class;
 	}
 
 	.wp-block-wporg-code-short-title__type {
-		color: darken($color-class, 8%);
+		color: $color-code-title-class-type;
 		background: rgba(189, 134, 0, 0.05);
 	}
 }
@@ -95,7 +90,7 @@
 .method {
 	&.wp-block-wporg-code-short-title,
 	a {
-		color: #135e96;
+		color: $color-code-title-method;
 	}
 
 	.wp-block-wporg-code-short-title__type {

From 8e61474446cbd269b3ad34ed9a03b55b0f8f3d82 Mon Sep 17 00:00:00 2001
From: Adam Wood <1017872+adamwoodnz@users.noreply.github.com>
Date: Mon, 11 Dec 2023 17:39:06 +1300
Subject: [PATCH 5/8] Fix contrast issues with Command GitHub UI

---
 .../wporg-developer-2023/src/command-github/style.scss      | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/source/wp-content/themes/wporg-developer-2023/src/command-github/style.scss b/source/wp-content/themes/wporg-developer-2023/src/command-github/style.scss
index c1262d154..dc48b6dd5 100644
--- a/source/wp-content/themes/wporg-developer-2023/src/command-github/style.scss
+++ b/source/wp-content/themes/wporg-developer-2023/src/command-github/style.scss
@@ -1,3 +1,5 @@
+@import "../../scss/settings/semantic-colors";
+
 .wp-block-wporg-command-github {
 	// override standard block gap between sections in the content
 	margin-block-start: 0 !important;
@@ -37,11 +39,11 @@
 			}
 
 			.green {
-				color: var(--wp--preset--color--syntax-green);
+				color: $color-command-github-open;
 			}
 
 			.red {
-				color: var(--wp--preset--color--syntax-red);
+				color: $color-command-github-closed;
 			}
 
 			@media screen and (min-width: 380px) {

From 9c8e048dd0d35a52d818a966da7a5de62d98337c Mon Sep 17 00:00:00 2001
From: Adam Wood <1017872+adamwoodnz@users.noreply.github.com>
Date: Tue, 12 Dec 2023 10:42:29 +1300
Subject: [PATCH 6/8] Replace sass semantics colors with theme vars

---
 .../scss/settings/_semantic-colors.scss       | 12 -----
 .../src/code-short-title/style.scss           | 16 +++---
 .../src/command-github/style.scss             |  6 +--
 .../themes/wporg-developer-2023/theme.json    | 53 +++++++++++++++----
 4 files changed, 51 insertions(+), 36 deletions(-)
 delete mode 100644 source/wp-content/themes/wporg-developer-2023/scss/settings/_semantic-colors.scss

diff --git a/source/wp-content/themes/wporg-developer-2023/scss/settings/_semantic-colors.scss b/source/wp-content/themes/wporg-developer-2023/scss/settings/_semantic-colors.scss
deleted file mode 100644
index 6af963dac..000000000
--- a/source/wp-content/themes/wporg-developer-2023/scss/settings/_semantic-colors.scss
+++ /dev/null
@@ -1,12 +0,0 @@
-@import "colors";
-
-$color-code-title-function: get-color(green-50);
-$color-code-title-function-type: get-color(green-60);
-$color-code-title-hook: get-color(red-50);
-$color-code-title-hook-type: get-color(red-60);
-$color-code-title-class: get-color(yellow-40);
-$color-code-title-class-type: get-color(yellow-50);
-$color-code-title-method: get-color(blue-60);
-
-$color-command-github-open: get-color(green-60);
-$color-command-github-closed: get-color(red-60);
diff --git a/source/wp-content/themes/wporg-developer-2023/src/code-short-title/style.scss b/source/wp-content/themes/wporg-developer-2023/src/code-short-title/style.scss
index a33cda6ab..d66dcce8a 100644
--- a/source/wp-content/themes/wporg-developer-2023/src/code-short-title/style.scss
+++ b/source/wp-content/themes/wporg-developer-2023/src/code-short-title/style.scss
@@ -1,5 +1,3 @@
-@import "../../scss/settings/semantic-colors";
-
 .wp-block-wporg-code-short-title {
 	align-items: flex-start;
 	display: flex;
@@ -54,11 +52,11 @@
 .function {
 	&.wp-block-wporg-code-short-title,
 	a {
-		color: $color-code-title-function;
+		color: var(--wp--custom--wporg-code-short-title--color--function);
 	}
 
 	.wp-block-wporg-code-short-title__type {
-		color: $color-code-title-function-type;
+		color: var(--wp--custom--wporg-code-short-title--color--function-type);
 		background: rgba(0, 138, 32, 0.05);
 	}
 }
@@ -66,11 +64,11 @@
 .hook {
 	&.wp-block-wporg-code-short-title,
 	a {
-		color: $color-code-title-hook;
+		color: var(--wp--custom--wporg-code-short-title--color--hook);
 	}
 
 	.wp-block-wporg-code-short-title__type {
-		color: $color-code-title-hook-type;
+		color: var(--wp--custom--wporg-code-short-title--color--hook-type);
 		background: rgba(214, 54, 56, 0.05);
 	}
 }
@@ -78,11 +76,11 @@
 .class {
 	&.wp-block-wporg-code-short-title,
 	a {
-		color: $color-code-title-class;
+		color: var(--wp--custom--wporg-code-short-title--color--class);
 	}
 
 	.wp-block-wporg-code-short-title__type {
-		color: $color-code-title-class-type;
+		color: var(--wp--custom--wporg-code-short-title--color--class-type);
 		background: rgba(189, 134, 0, 0.05);
 	}
 }
@@ -90,7 +88,7 @@
 .method {
 	&.wp-block-wporg-code-short-title,
 	a {
-		color: $color-code-title-method;
+		color: var(--wp--custom--wporg-code-short-title--color--method);
 	}
 
 	.wp-block-wporg-code-short-title__type {
diff --git a/source/wp-content/themes/wporg-developer-2023/src/command-github/style.scss b/source/wp-content/themes/wporg-developer-2023/src/command-github/style.scss
index dc48b6dd5..721ff2001 100644
--- a/source/wp-content/themes/wporg-developer-2023/src/command-github/style.scss
+++ b/source/wp-content/themes/wporg-developer-2023/src/command-github/style.scss
@@ -1,5 +1,3 @@
-@import "../../scss/settings/semantic-colors";
-
 .wp-block-wporg-command-github {
 	// override standard block gap between sections in the content
 	margin-block-start: 0 !important;
@@ -39,11 +37,11 @@
 			}
 
 			.green {
-				color: $color-command-github-open;
+				color: var(--wp--custom--wporg-command-github--color--open);
 			}
 
 			.red {
-				color: $color-command-github-closed;
+				color: var(--wp--custom--wporg-command-github--color--closed);
 			}
 
 			@media screen and (min-width: 380px) {
diff --git a/source/wp-content/themes/wporg-developer-2023/theme.json b/source/wp-content/themes/wporg-developer-2023/theme.json
index 4eeac3866..66fc2836a 100644
--- a/source/wp-content/themes/wporg-developer-2023/theme.json
+++ b/source/wp-content/themes/wporg-developer-2023/theme.json
@@ -13,36 +13,50 @@
 					"slug": "linen",
 					"color": "#fbfaf7",
 					"name": "Linen"
-
 				},
 				{
 					"slug": "syntax-black",
-					"color": "#000000",
-					"name": "Black"
+					"color": "var(--wp--preset--color--black)",
+					"name": "Syntax Black"
 				},
 				{
 					"slug": "syntax-red",
-					"color": "#d63638",
-					"name": "Red"
+					"color": "var(--wp--custom--color--red-50)",
+					"name": "Syntax Red"
 				},
 				{
 					"slug": "syntax-green",
-					"color": "#008a20",
-					"name": "Green"
+					"color": "var(--wp--custom--color--green-50)",
+					"name": "Syntax Green"
 				},
 				{
 					"slug": "syntax-blue",
-					"color": "#135e96",
-					"name": "Blue"
+					"color": "var(--wp--custom--color--blue-60)",
+					"name": "Syntax Blue"
 				},
 				{
 					"slug": "syntax-grey",
-					"color": "#646970",
-					"name": "Grey"
+					"color": "var(--wp--custom--color--grey-50)",
+					"name": "Syntax Grey"
+				},
+				{
+					"slug": "syntax-yellow",
+					"color": "var(--wp--custom--color--yellow-50)",
+					"name": "Syntax Yellow"
 				}
 			]
 		},
 		"custom": {
+			"color": {
+				"blue-60": "#135e96",
+				"green-50": "#008a20",
+				"green-60": "#007017",
+				"grey-50": "#646970",
+				"red-50": "#d63638",
+				"red-60": "#b32d2e",
+				"yellow-40": "#bd8600",
+				"yellow-50": "#996800"
+			},
 			"heading": {
 				"typography": {
 					"fontFamily": "var(--wp--preset--font-family--ibm-plex-sans)",
@@ -151,6 +165,23 @@
 						"top": "150px"
 					}
 				}
+			},
+			"wporg-command-github": {
+				"color": {
+					"open": "var(--wp--custom--color--green-60)",
+					"closed": "var(--wp--custom--color--red-60)"
+				}
+			},
+			"wporg-code-short-title": {
+				"color": {
+					"class": "var(--wp--custom--color--yellow-40)",
+					"class-type": "var(--wp--custom--color--yellow-50)",
+					"function": "var(--wp--custom--color--green-50)",
+					"function-type": "var(--wp--custom--color--green-60)",
+					"hook": "var(--wp--custom--color--red-50)",
+					"hook-type": "var(--wp--custom--color--red-60)",
+					"method": "var(--wp--custom--color--blue-60)"
+				}
 			}
 		},
 		"typography": {

From 653386d6daf6fe19b6fdfc79ffba55e479c9d77d Mon Sep 17 00:00:00 2001
From: Adam Wood <1017872+adamwoodnz@users.noreply.github.com>
Date: Tue, 12 Dec 2023 11:15:44 +1300
Subject: [PATCH 7/8] Add code title type chip background colors to theme vars

---
 .../src/code-short-title/style.scss                    |  8 ++++----
 .../wp-content/themes/wporg-developer-2023/theme.json  | 10 ++++++++++
 2 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/source/wp-content/themes/wporg-developer-2023/src/code-short-title/style.scss b/source/wp-content/themes/wporg-developer-2023/src/code-short-title/style.scss
index d66dcce8a..6dcf82796 100644
--- a/source/wp-content/themes/wporg-developer-2023/src/code-short-title/style.scss
+++ b/source/wp-content/themes/wporg-developer-2023/src/code-short-title/style.scss
@@ -57,7 +57,7 @@
 
 	.wp-block-wporg-code-short-title__type {
 		color: var(--wp--custom--wporg-code-short-title--color--function-type);
-		background: rgba(0, 138, 32, 0.05);
+		background: var(--wp--custom--wporg-code-short-title--background-color--function-type);
 	}
 }
 
@@ -69,7 +69,7 @@
 
 	.wp-block-wporg-code-short-title__type {
 		color: var(--wp--custom--wporg-code-short-title--color--hook-type);
-		background: rgba(214, 54, 56, 0.05);
+		background: var(--wp--custom--wporg-code-short-title--background-color--hook-type);
 	}
 }
 
@@ -81,7 +81,7 @@
 
 	.wp-block-wporg-code-short-title__type {
 		color: var(--wp--custom--wporg-code-short-title--color--class-type);
-		background: rgba(189, 134, 0, 0.05);
+		background: var(--wp--custom--wporg-code-short-title--background-color--class-type);
 	}
 }
 
@@ -92,6 +92,6 @@
 	}
 
 	.wp-block-wporg-code-short-title__type {
-		background: rgba(19, 94, 150, 0.1);
+		background: var(--wp--custom--wporg-code-short-title--background-color--method-type);
 	}
 }
diff --git a/source/wp-content/themes/wporg-developer-2023/theme.json b/source/wp-content/themes/wporg-developer-2023/theme.json
index 66fc2836a..85005ef44 100644
--- a/source/wp-content/themes/wporg-developer-2023/theme.json
+++ b/source/wp-content/themes/wporg-developer-2023/theme.json
@@ -49,12 +49,16 @@
 		"custom": {
 			"color": {
 				"blue-60": "#135e96",
+				"blue-60-alpha-10": "#135e9619",
 				"green-50": "#008a20",
+				"green-50-alpha-5": "#008a200C",
 				"green-60": "#007017",
 				"grey-50": "#646970",
 				"red-50": "#d63638",
+				"red-50-alpha-5": "#d636380C",
 				"red-60": "#b32d2e",
 				"yellow-40": "#bd8600",
+				"yellow-40-alpha-5": "#bd86000C",
 				"yellow-50": "#996800"
 			},
 			"heading": {
@@ -181,6 +185,12 @@
 					"hook": "var(--wp--custom--color--red-50)",
 					"hook-type": "var(--wp--custom--color--red-60)",
 					"method": "var(--wp--custom--color--blue-60)"
+				},
+				"background-color": {
+					"class-type": "var(--wp--custom--color--yellow-40-alpha-5)",
+					"function-type": "var(--wp--custom--color--green-50-alpha-5)",
+					"hook-type": "var(--wp--custom--color--red-50-alpha-5)",
+					"method-type": "var(--wp--custom--color--blue-60-alpha-10)"
 				}
 			}
 		},

From ec82acf31d9f475a078258a2d9b990d946f5feaa Mon Sep 17 00:00:00 2001
From: Adam Wood <1017872+adamwoodnz@users.noreply.github.com>
Date: Tue, 12 Dec 2023 11:22:29 +1300
Subject: [PATCH 8/8] Remove syntax yellow from color palette

---
 source/wp-content/themes/wporg-developer-2023/theme.json | 5 -----
 1 file changed, 5 deletions(-)

diff --git a/source/wp-content/themes/wporg-developer-2023/theme.json b/source/wp-content/themes/wporg-developer-2023/theme.json
index 85005ef44..3591bd3e4 100644
--- a/source/wp-content/themes/wporg-developer-2023/theme.json
+++ b/source/wp-content/themes/wporg-developer-2023/theme.json
@@ -38,11 +38,6 @@
 					"slug": "syntax-grey",
 					"color": "var(--wp--custom--color--grey-50)",
 					"name": "Syntax Grey"
-				},
-				{
-					"slug": "syntax-yellow",
-					"color": "var(--wp--custom--color--yellow-50)",
-					"name": "Syntax Yellow"
 				}
 			]
 		},