From 296341ef1f590a88ced9e213eff0573c44c71210 Mon Sep 17 00:00:00 2001
From: Mykola Shlyakhtun <mykola.shlyakhtun@gmail.com>
Date: Fri, 14 Jun 2024 10:27:15 +0300
Subject: [PATCH 1/9] Change 'blue' to 'indigo' in all AI branded components
 (Toast and AI sparkle buttons) #1624

---
 packages/components/src/AIFixesButton.js | 15 ++++++---------
 1 file changed, 6 insertions(+), 9 deletions(-)

diff --git a/packages/components/src/AIFixesButton.js b/packages/components/src/AIFixesButton.js
index 4f3e96d7ef6..262bbcb0e4f 100644
--- a/packages/components/src/AIFixesButton.js
+++ b/packages/components/src/AIFixesButton.js
@@ -4,21 +4,18 @@ import IconButtonBase from "./IconButtonBase";
 
 const yoastPrimary50 = "#FAF3F7";
 const yoastPrimary100 = "#F3E5ED";
-const yoastPrimary300 = "#CD82AB";
 const yoastPrimary400 = "#B94986";
 const yoastPrimary500 = "#A61E69";
-const blue50 = "#EFF6FF";
-const blue100 = "#DBEAFE";
-const blue300 = "#93C5FD";
-const blue500 = "#3B82F6";
+const yoastIndigo50 = "EEF2FF";
+const yoastIndigo100 = "E0E7FF";
+const yoastIndigo500 = "6366F1";
 
 const direction = "to bottom right";
 
 const gradientEffect = {
-	defaultStateBackground: `linear-gradient(${direction}, ${yoastPrimary50}, ${blue50})`,
-	defaultStateBorder: `linear-gradient(${direction}, ${yoastPrimary300}, ${blue300}) 1`,
-	hoverStateBackground: `linear-gradient(${direction}, ${yoastPrimary100}, ${blue100})`,
-	pressedStateBackground: `linear-gradient(${direction}, ${yoastPrimary500}, ${blue500})`,
+	defaultStateBackground: `linear-gradient(${direction}, ${yoastPrimary50}, ${yoastIndigo50})`,
+	hoverStateBackground: `linear-gradient(${direction}, ${yoastPrimary100}, ${yoastIndigo100})`,
+	pressedStateBackground: `linear-gradient(${direction}, ${yoastPrimary500}, ${yoastIndigo500})`,
 };
 
 const AIFixesButtonBase = styled( IconButtonBase )`

From dbcd2e038ee51c4825d0f5cf0badcb0dda755782 Mon Sep 17 00:00:00 2001
From: Mykola Shlyakhtun <mykola.shlyakhtun@gmail.com>
Date: Fri, 14 Jun 2024 12:34:48 +0300
Subject: [PATCH 2/9] Change 'blue' to 'indigo' in all AI branded components
 (Toast and AI sparkle buttons) #1624 Screeshots updated. Sparkles icon
 updated.

---
 .../IconAIFixesButtonTest.js.snap             |  8 ++--
 .../components/sparkles-icon.js               | 19 ++++-----
 .../__snapshots__/SparklesIcon.test.js.snap   | 40 +++++++++----------
 3 files changed, 32 insertions(+), 35 deletions(-)

diff --git a/packages/components/tests/__snapshots__/IconAIFixesButtonTest.js.snap b/packages/components/tests/__snapshots__/IconAIFixesButtonTest.js.snap
index e0c89238aad..97341d37ef6 100644
--- a/packages/components/tests/__snapshots__/IconAIFixesButtonTest.js.snap
+++ b/packages/components/tests/__snapshots__/IconAIFixesButtonTest.js.snap
@@ -35,12 +35,12 @@ exports[`the pressed IconAIFixesButton matches the snapshot 1`] = `
 .c1 {
   overflow: hidden;
   border: none;
-  background-image: linear-gradient(to bottom right,#A61E69,#3B82F6) !important;
+  background-image: linear-gradient(to bottom right,#A61E69,6366F1) !important;
   box-shadow: inset 0 -2px 0 #B94986;
 }
 
 .c1:hover {
-  background-image: linear-gradient(to bottom right,#A61E69,#3B82F6) !important;
+  background-image: linear-gradient(to bottom right,#A61E69,6366F1) !important;
 }
 
 <button
@@ -91,12 +91,12 @@ exports[`the unpressed IconAIFixesButton matches the snapshot 1`] = `
 .c1 {
   overflow: hidden;
   border: 1px solid #A5B4FC;
-  background-image: linear-gradient(to bottom right,#FAF3F7,#EFF6FF) !important;
+  background-image: linear-gradient(to bottom right,#FAF3F7,EEF2FF) !important;
   box-shadow: 0 1px 0 rgba( 204,204,204,0.7 );
 }
 
 .c1:hover {
-  background-image: linear-gradient(to bottom right,#F3E5ED,#DBEAFE) !important;
+  background-image: linear-gradient(to bottom right,#F3E5ED,E0E7FF) !important;
 }
 
 <button
diff --git a/packages/js/src/ai-assessment-fixes/components/sparkles-icon.js b/packages/js/src/ai-assessment-fixes/components/sparkles-icon.js
index 6a1f99aa78c..52c1e0c27cb 100644
--- a/packages/js/src/ai-assessment-fixes/components/sparkles-icon.js
+++ b/packages/js/src/ai-assessment-fixes/components/sparkles-icon.js
@@ -8,19 +8,16 @@ import propTypes from "prop-types";
 export const SparklesIcon = ( { pressed = false } ) => {
 	return (
 		<>
-			<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+			<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
 				<path
-					d="M3.33284 2V4.66667M1.99951 3.33333H4.66618M3.99951 11.3333V14M2.66618 12.6667H5.33284M8.66618 2L10.19 6.57143L13.9995 8L10.19 9.42857L8.66618 14L7.14237 9.42857L3.33284 8L7.14237 6.57143L8.66618 2Z"
-					stroke={ pressed ? "white" : "url(#paint0_linear_1208_188)" } strokeWidth="1.33333" strokeLinecap="round"
-					strokeLinejoin="round"
-				/>
+					d="M3.33284 2.96991V5.63658M1.99951 4.30324H4.66618M3.99951 12.3032V14.9699M2.66618 13.6366H5.33284M8.66618 2.96991L10.19 7.54134L13.9995 8.96991L10.19 10.3985L8.66618 14.9699L7.14237 10.3985L3.33284 8.96991L7.14237 7.54134L8.66618 2.96991Z"
+					stroke="url(#paint0_linear_1538_754)" strokeWidth="1.33333" strokeLinecap="round"
+					strokeLinejoin="round"/>
 				<defs>
-					<linearGradient
-						id="paint0_linear_1208_188" x1="0" y1="0" x2="16" y2="16"
-						gradientUnits="userSpaceOnUse"
-					>
-						<stop stopColor="#A61E69" />
-						<stop offset="1" stopColor="#3B82F6" />
+					<linearGradient id="paint0_linear_1538_754" x1="1.99951" y1="2.96991" x2="15.3308" y2="4.69764"
+									gradientUnits="userSpaceOnUse">
+						<stop stopColor="#A61E69"/>
+						<stop offset="1" stopColor="#6366F1"/>
 					</linearGradient>
 				</defs>
 			</svg>
diff --git a/packages/js/tests/ai-assessment-fixes/components/__snapshots__/SparklesIcon.test.js.snap b/packages/js/tests/ai-assessment-fixes/components/__snapshots__/SparklesIcon.test.js.snap
index c76b7656d7f..fed21b6e39d 100644
--- a/packages/js/tests/ai-assessment-fixes/components/__snapshots__/SparklesIcon.test.js.snap
+++ b/packages/js/tests/ai-assessment-fixes/components/__snapshots__/SparklesIcon.test.js.snap
@@ -4,14 +4,14 @@ exports[`SparklesIcon should render the SparklesIcon component when pressed is f
 <div>
   <svg
     fill="none"
-    height="16"
-    viewBox="0 0 16 16"
+    height="17"
+    viewBox="0 0 16 17"
     width="16"
     xmlns="http://www.w3.org/2000/svg"
   >
     <path
-      d="M3.33284 2V4.66667M1.99951 3.33333H4.66618M3.99951 11.3333V14M2.66618 12.6667H5.33284M8.66618 2L10.19 6.57143L13.9995 8L10.19 9.42857L8.66618 14L7.14237 9.42857L3.33284 8L7.14237 6.57143L8.66618 2Z"
-      stroke="url(#paint0_linear_1208_188)"
+      d="M3.33284 2.96991V5.63658M1.99951 4.30324H4.66618M3.99951 12.3032V14.9699M2.66618 13.6366H5.33284M8.66618 2.96991L10.19 7.54134L13.9995 8.96991L10.19 10.3985L8.66618 14.9699L7.14237 10.3985L3.33284 8.96991L7.14237 7.54134L8.66618 2.96991Z"
+      stroke="url(#paint0_linear_1538_754)"
       stroke-linecap="round"
       stroke-linejoin="round"
       stroke-width="1.33333"
@@ -19,18 +19,18 @@ exports[`SparklesIcon should render the SparklesIcon component when pressed is f
     <defs>
       <lineargradient
         gradientUnits="userSpaceOnUse"
-        id="paint0_linear_1208_188"
-        x1="0"
-        x2="16"
-        y1="0"
-        y2="16"
+        id="paint0_linear_1538_754"
+        x1="1.99951"
+        x2="15.3308"
+        y1="2.96991"
+        y2="4.69764"
       >
         <stop
           stop-color="#A61E69"
         />
         <stop
           offset="1"
-          stop-color="#3B82F6"
+          stop-color="#6366F1"
         />
       </lineargradient>
     </defs>
@@ -42,14 +42,14 @@ exports[`SparklesIcon should render the SparklesIcon component when pressed is t
 <div>
   <svg
     fill="none"
-    height="16"
-    viewBox="0 0 16 16"
+    height="17"
+    viewBox="0 0 16 17"
     width="16"
     xmlns="http://www.w3.org/2000/svg"
   >
     <path
-      d="M3.33284 2V4.66667M1.99951 3.33333H4.66618M3.99951 11.3333V14M2.66618 12.6667H5.33284M8.66618 2L10.19 6.57143L13.9995 8L10.19 9.42857L8.66618 14L7.14237 9.42857L3.33284 8L7.14237 6.57143L8.66618 2Z"
-      stroke="white"
+      d="M3.33284 2.96991V5.63658M1.99951 4.30324H4.66618M3.99951 12.3032V14.9699M2.66618 13.6366H5.33284M8.66618 2.96991L10.19 7.54134L13.9995 8.96991L10.19 10.3985L8.66618 14.9699L7.14237 10.3985L3.33284 8.96991L7.14237 7.54134L8.66618 2.96991Z"
+      stroke="url(#paint0_linear_1538_754)"
       stroke-linecap="round"
       stroke-linejoin="round"
       stroke-width="1.33333"
@@ -57,18 +57,18 @@ exports[`SparklesIcon should render the SparklesIcon component when pressed is t
     <defs>
       <lineargradient
         gradientUnits="userSpaceOnUse"
-        id="paint0_linear_1208_188"
-        x1="0"
-        x2="16"
-        y1="0"
-        y2="16"
+        id="paint0_linear_1538_754"
+        x1="1.99951"
+        x2="15.3308"
+        y1="2.96991"
+        y2="4.69764"
       >
         <stop
           stop-color="#A61E69"
         />
         <stop
           offset="1"
-          stop-color="#3B82F6"
+          stop-color="#6366F1"
         />
       </lineargradient>
     </defs>

From 058dc43c9eea77927908b4a2ccb747f47d7d4359 Mon Sep 17 00:00:00 2001
From: Mykola Shlyakhtun <mykola.shlyakhtun@gmail.com>
Date: Fri, 14 Jun 2024 13:09:42 +0300
Subject: [PATCH 3/9] Change 'blue' to 'indigo' in all AI branded components
 (Toast and AI sparkle buttons) #1624 Fix color values.

---
 packages/components/src/AIFixesButton.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/components/src/AIFixesButton.js b/packages/components/src/AIFixesButton.js
index 262bbcb0e4f..e19566f2055 100644
--- a/packages/components/src/AIFixesButton.js
+++ b/packages/components/src/AIFixesButton.js
@@ -6,9 +6,9 @@ const yoastPrimary50 = "#FAF3F7";
 const yoastPrimary100 = "#F3E5ED";
 const yoastPrimary400 = "#B94986";
 const yoastPrimary500 = "#A61E69";
-const yoastIndigo50 = "EEF2FF";
-const yoastIndigo100 = "E0E7FF";
-const yoastIndigo500 = "6366F1";
+const yoastIndigo50 = "#EEF2FF";
+const yoastIndigo100 = "#E0E7FF";
+const yoastIndigo500 = "#6366F1";
 
 const direction = "to bottom right";
 

From 1a0f699027660cd12cfdc3198d083652ab460bd9 Mon Sep 17 00:00:00 2001
From: Mykola Shlyakhtun <mykola.shlyakhtun@gmail.com>
Date: Fri, 14 Jun 2024 13:12:15 +0300
Subject: [PATCH 4/9] Change 'blue' to 'indigo' in all AI branded components
 (Toast and AI sparkle buttons) #1624 Snapshot updated.

---
 .../tests/__snapshots__/IconAIFixesButtonTest.js.snap     | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/components/tests/__snapshots__/IconAIFixesButtonTest.js.snap b/packages/components/tests/__snapshots__/IconAIFixesButtonTest.js.snap
index 97341d37ef6..2ec0c849f66 100644
--- a/packages/components/tests/__snapshots__/IconAIFixesButtonTest.js.snap
+++ b/packages/components/tests/__snapshots__/IconAIFixesButtonTest.js.snap
@@ -35,12 +35,12 @@ exports[`the pressed IconAIFixesButton matches the snapshot 1`] = `
 .c1 {
   overflow: hidden;
   border: none;
-  background-image: linear-gradient(to bottom right,#A61E69,6366F1) !important;
+  background-image: linear-gradient(to bottom right,#A61E69,#6366F1) !important;
   box-shadow: inset 0 -2px 0 #B94986;
 }
 
 .c1:hover {
-  background-image: linear-gradient(to bottom right,#A61E69,6366F1) !important;
+  background-image: linear-gradient(to bottom right,#A61E69,#6366F1) !important;
 }
 
 <button
@@ -91,12 +91,12 @@ exports[`the unpressed IconAIFixesButton matches the snapshot 1`] = `
 .c1 {
   overflow: hidden;
   border: 1px solid #A5B4FC;
-  background-image: linear-gradient(to bottom right,#FAF3F7,EEF2FF) !important;
+  background-image: linear-gradient(to bottom right,#FAF3F7,#EEF2FF) !important;
   box-shadow: 0 1px 0 rgba( 204,204,204,0.7 );
 }
 
 .c1:hover {
-  background-image: linear-gradient(to bottom right,#F3E5ED,E0E7FF) !important;
+  background-image: linear-gradient(to bottom right,#F3E5ED,#E0E7FF) !important;
 }
 
 <button

From 00c5c23f2414ae6f71ee15717963af6f3fc1e709 Mon Sep 17 00:00:00 2001
From: Mykola Shlyakhtun <mykola.shlyakhtun@gmail.com>
Date: Fri, 14 Jun 2024 14:26:10 +0300
Subject: [PATCH 5/9] Change 'blue' to 'indigo' in all AI branded components
 (Toast and AI sparkle buttons) #1624 Fix button press.

---
 packages/js/src/ai-assessment-fixes/components/sparkles-icon.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/js/src/ai-assessment-fixes/components/sparkles-icon.js b/packages/js/src/ai-assessment-fixes/components/sparkles-icon.js
index 52c1e0c27cb..18fe84599d5 100644
--- a/packages/js/src/ai-assessment-fixes/components/sparkles-icon.js
+++ b/packages/js/src/ai-assessment-fixes/components/sparkles-icon.js
@@ -11,7 +11,7 @@ export const SparklesIcon = ( { pressed = false } ) => {
 			<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
 				<path
 					d="M3.33284 2.96991V5.63658M1.99951 4.30324H4.66618M3.99951 12.3032V14.9699M2.66618 13.6366H5.33284M8.66618 2.96991L10.19 7.54134L13.9995 8.96991L10.19 10.3985L8.66618 14.9699L7.14237 10.3985L3.33284 8.96991L7.14237 7.54134L8.66618 2.96991Z"
-					stroke="url(#paint0_linear_1538_754)" strokeWidth="1.33333" strokeLinecap="round"
+					stroke={ pressed ? "white" : "url(#paint0_linear_1538_754)" } strokeWidth="1.33333" strokeLinecap="round"
 					strokeLinejoin="round"/>
 				<defs>
 					<linearGradient id="paint0_linear_1538_754" x1="1.99951" y1="2.96991" x2="15.3308" y2="4.69764"

From e4962a6593b57942e5b9b528275a65b57ccb744b Mon Sep 17 00:00:00 2001
From: Mykola Shlyakhtun <mykola.shlyakhtun@gmail.com>
Date: Fri, 14 Jun 2024 15:20:00 +0300
Subject: [PATCH 6/9] Change 'blue' to 'indigo' in all AI branded components
 (Toast and AI sparkle buttons) #1624 Fix snapshots.

---
 packages/components/src/AIFixesButton.js           | 10 +++++++++-
 .../__snapshots__/IconAIFixesButtonTest.js.snap    | 14 ++++++++++++++
 .../__snapshots__/SparklesIcon.test.js.snap        |  2 +-
 3 files changed, 24 insertions(+), 2 deletions(-)

diff --git a/packages/components/src/AIFixesButton.js b/packages/components/src/AIFixesButton.js
index e19566f2055..4bda9f580cf 100644
--- a/packages/components/src/AIFixesButton.js
+++ b/packages/components/src/AIFixesButton.js
@@ -4,23 +4,26 @@ import IconButtonBase from "./IconButtonBase";
 
 const yoastPrimary50 = "#FAF3F7";
 const yoastPrimary100 = "#F3E5ED";
+const yoastPrimary300 = "#CD82AB";
 const yoastPrimary400 = "#B94986";
 const yoastPrimary500 = "#A61E69";
 const yoastIndigo50 = "#EEF2FF";
 const yoastIndigo100 = "#E0E7FF";
+const yoastIndigo300 = "#A5B4FC";
 const yoastIndigo500 = "#6366F1";
 
 const direction = "to bottom right";
 
 const gradientEffect = {
 	defaultStateBackground: `linear-gradient(${direction}, ${yoastPrimary50}, ${yoastIndigo50})`,
+	defaultStateBorder: `linear-gradient(${direction}, ${yoastPrimary300}, ${yoastIndigo300}) 1`,
 	hoverStateBackground: `linear-gradient(${direction}, ${yoastPrimary100}, ${yoastIndigo100})`,
 	pressedStateBackground: `linear-gradient(${direction}, ${yoastPrimary500}, ${yoastIndigo500})`,
 };
 
 const AIFixesButtonBase = styled( IconButtonBase )`
 	overflow: hidden;
-	border: ${ props => props.pressed ? "none" : "1px solid #A5B4FC" }; /*indigo-300*/
+	border: ${ props => props.pressed ? "none" : `1px solid ${yoastIndigo300}` }; /*indigo-300*/
 	background-image: ${ props => props.pressed
 		? gradientEffect.pressedStateBackground
 		: gradientEffect.defaultStateBackground } !important;
@@ -32,6 +35,11 @@ const AIFixesButtonBase = styled( IconButtonBase )`
 		? gradientEffect.pressedStateBackground
 		: gradientEffect.hoverStateBackground } !important;
 	}
+
+	@supports ((border-image: ${gradientEffect.defaultStateBorder}) and (border-radius: 3px)) {
+		border: ${props => props.pressed ? "none" : "1px solid transparent"};
+		border-image: ${props => props.pressed ? "none" : gradientEffect.defaultStateBorder};
+	}
 `;
 
 export default AIFixesButtonBase;
diff --git a/packages/components/tests/__snapshots__/IconAIFixesButtonTest.js.snap b/packages/components/tests/__snapshots__/IconAIFixesButtonTest.js.snap
index 2ec0c849f66..a6edb5cdd8e 100644
--- a/packages/components/tests/__snapshots__/IconAIFixesButtonTest.js.snap
+++ b/packages/components/tests/__snapshots__/IconAIFixesButtonTest.js.snap
@@ -43,6 +43,13 @@ exports[`the pressed IconAIFixesButton matches the snapshot 1`] = `
   background-image: linear-gradient(to bottom right,#A61E69,#6366F1) !important;
 }
 
+@supports ((border-image:linear-gradient(to bottom right,#CD82AB,#A5B4FC) 1) and (border-radius:3px)) {
+  .c1 {
+    border: none;
+    border-image: none;
+  }
+}
+
 <button
   aria-label="Fix with AI"
   aria-pressed={true}
@@ -99,6 +106,13 @@ exports[`the unpressed IconAIFixesButton matches the snapshot 1`] = `
   background-image: linear-gradient(to bottom right,#F3E5ED,#E0E7FF) !important;
 }
 
+@supports ((border-image:linear-gradient(to bottom right,#CD82AB,#A5B4FC) 1) and (border-radius:3px)) {
+  .c1 {
+    border: 1px solid transparent;
+    border-image: linear-gradient(to bottom right,#CD82AB,#A5B4FC) 1;
+  }
+}
+
 <button
   aria-label="Fix with AI"
   aria-pressed={false}
diff --git a/packages/js/tests/ai-assessment-fixes/components/__snapshots__/SparklesIcon.test.js.snap b/packages/js/tests/ai-assessment-fixes/components/__snapshots__/SparklesIcon.test.js.snap
index fed21b6e39d..4e7f36a3b72 100644
--- a/packages/js/tests/ai-assessment-fixes/components/__snapshots__/SparklesIcon.test.js.snap
+++ b/packages/js/tests/ai-assessment-fixes/components/__snapshots__/SparklesIcon.test.js.snap
@@ -49,7 +49,7 @@ exports[`SparklesIcon should render the SparklesIcon component when pressed is t
   >
     <path
       d="M3.33284 2.96991V5.63658M1.99951 4.30324H4.66618M3.99951 12.3032V14.9699M2.66618 13.6366H5.33284M8.66618 2.96991L10.19 7.54134L13.9995 8.96991L10.19 10.3985L8.66618 14.9699L7.14237 10.3985L3.33284 8.96991L7.14237 7.54134L8.66618 2.96991Z"
-      stroke="url(#paint0_linear_1538_754)"
+      stroke="white"
       stroke-linecap="round"
       stroke-linejoin="round"
       stroke-width="1.33333"

From 1583f8e1d4dad9fd8c08a191ae9fbe32347b316e Mon Sep 17 00:00:00 2001
From: Mykola Shlyakhtun <mykola.shlyakhtun@gmail.com>
Date: Fri, 14 Jun 2024 15:25:47 +0300
Subject: [PATCH 7/9] Change 'blue' to 'indigo' in all AI branded components
 (Toast and AI sparkle buttons) #1624 Fix linting issues.

---
 .../ai-assessment-fixes/components/sparkles-icon.js | 13 ++++++++-----
 1 file changed, 8 insertions(+), 5 deletions(-)

diff --git a/packages/js/src/ai-assessment-fixes/components/sparkles-icon.js b/packages/js/src/ai-assessment-fixes/components/sparkles-icon.js
index 18fe84599d5..7213bf3cdb8 100644
--- a/packages/js/src/ai-assessment-fixes/components/sparkles-icon.js
+++ b/packages/js/src/ai-assessment-fixes/components/sparkles-icon.js
@@ -12,12 +12,15 @@ export const SparklesIcon = ( { pressed = false } ) => {
 				<path
 					d="M3.33284 2.96991V5.63658M1.99951 4.30324H4.66618M3.99951 12.3032V14.9699M2.66618 13.6366H5.33284M8.66618 2.96991L10.19 7.54134L13.9995 8.96991L10.19 10.3985L8.66618 14.9699L7.14237 10.3985L3.33284 8.96991L7.14237 7.54134L8.66618 2.96991Z"
 					stroke={ pressed ? "white" : "url(#paint0_linear_1538_754)" } strokeWidth="1.33333" strokeLinecap="round"
-					strokeLinejoin="round"/>
+					strokeLinejoin="round"
+				/>
 				<defs>
-					<linearGradient id="paint0_linear_1538_754" x1="1.99951" y1="2.96991" x2="15.3308" y2="4.69764"
-									gradientUnits="userSpaceOnUse">
-						<stop stopColor="#A61E69"/>
-						<stop offset="1" stopColor="#6366F1"/>
+					<linearGradient
+						id="paint0_linear_1538_754" x1="1.99951" y1="2.96991" x2="15.3308" y2="4.69764"
+						gradientUnits="userSpaceOnUse"
+					>
+						<stop stopColor="#A61E69" />
+						<stop offset="1" stopColor="#6366F1" />
 					</linearGradient>
 				</defs>
 			</svg>

From a29dae289621b71e7c711fd5e4aa45da5948741e Mon Sep 17 00:00:00 2001
From: Mykola Shlyakhtun <mykola.shlyakhtun@gmail.com>
Date: Fri, 14 Jun 2024 15:32:48 +0300
Subject: [PATCH 8/9] Change 'blue' to 'indigo' in all AI branded components
 (Toast and AI sparkle buttons) #1624 Return solid border.

---
 packages/components/src/AIFixesButton.js           |  5 -----
 .../__snapshots__/IconAIFixesButtonTest.js.snap    | 14 --------------
 2 files changed, 19 deletions(-)

diff --git a/packages/components/src/AIFixesButton.js b/packages/components/src/AIFixesButton.js
index 4bda9f580cf..f169f203762 100644
--- a/packages/components/src/AIFixesButton.js
+++ b/packages/components/src/AIFixesButton.js
@@ -35,11 +35,6 @@ const AIFixesButtonBase = styled( IconButtonBase )`
 		? gradientEffect.pressedStateBackground
 		: gradientEffect.hoverStateBackground } !important;
 	}
-
-	@supports ((border-image: ${gradientEffect.defaultStateBorder}) and (border-radius: 3px)) {
-		border: ${props => props.pressed ? "none" : "1px solid transparent"};
-		border-image: ${props => props.pressed ? "none" : gradientEffect.defaultStateBorder};
-	}
 `;
 
 export default AIFixesButtonBase;
diff --git a/packages/components/tests/__snapshots__/IconAIFixesButtonTest.js.snap b/packages/components/tests/__snapshots__/IconAIFixesButtonTest.js.snap
index a6edb5cdd8e..2ec0c849f66 100644
--- a/packages/components/tests/__snapshots__/IconAIFixesButtonTest.js.snap
+++ b/packages/components/tests/__snapshots__/IconAIFixesButtonTest.js.snap
@@ -43,13 +43,6 @@ exports[`the pressed IconAIFixesButton matches the snapshot 1`] = `
   background-image: linear-gradient(to bottom right,#A61E69,#6366F1) !important;
 }
 
-@supports ((border-image:linear-gradient(to bottom right,#CD82AB,#A5B4FC) 1) and (border-radius:3px)) {
-  .c1 {
-    border: none;
-    border-image: none;
-  }
-}
-
 <button
   aria-label="Fix with AI"
   aria-pressed={true}
@@ -106,13 +99,6 @@ exports[`the unpressed IconAIFixesButton matches the snapshot 1`] = `
   background-image: linear-gradient(to bottom right,#F3E5ED,#E0E7FF) !important;
 }
 
-@supports ((border-image:linear-gradient(to bottom right,#CD82AB,#A5B4FC) 1) and (border-radius:3px)) {
-  .c1 {
-    border: 1px solid transparent;
-    border-image: linear-gradient(to bottom right,#CD82AB,#A5B4FC) 1;
-  }
-}
-
 <button
   aria-label="Fix with AI"
   aria-pressed={false}

From fc403e6c0f5207c84b65f5902d7729c53ebdbf46 Mon Sep 17 00:00:00 2001
From: Mykola Shlyakhtun <mykola.shlyakhtun@gmail.com>
Date: Fri, 14 Jun 2024 21:31:15 +0300
Subject: [PATCH 9/9] AI: AI fixes buttons in the sidebar go blank after
 opening and closing the metabox #1621 Revert image.

---
 .../components/sparkles-icon.js               |  9 ++---
 .../__snapshots__/SparklesIcon.test.js.snap   | 34 +++++++++----------
 2 files changed, 22 insertions(+), 21 deletions(-)

diff --git a/packages/js/src/ai-assessment-fixes/components/sparkles-icon.js b/packages/js/src/ai-assessment-fixes/components/sparkles-icon.js
index 7213bf3cdb8..99e2045bbea 100644
--- a/packages/js/src/ai-assessment-fixes/components/sparkles-icon.js
+++ b/packages/js/src/ai-assessment-fixes/components/sparkles-icon.js
@@ -8,15 +8,16 @@ import propTypes from "prop-types";
 export const SparklesIcon = ( { pressed = false } ) => {
 	return (
 		<>
-			<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+			<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
 				<path
-					d="M3.33284 2.96991V5.63658M1.99951 4.30324H4.66618M3.99951 12.3032V14.9699M2.66618 13.6366H5.33284M8.66618 2.96991L10.19 7.54134L13.9995 8.96991L10.19 10.3985L8.66618 14.9699L7.14237 10.3985L3.33284 8.96991L7.14237 7.54134L8.66618 2.96991Z"
-					stroke={ pressed ? "white" : "url(#paint0_linear_1538_754)" } strokeWidth="1.33333" strokeLinecap="round"
+					d="M3.33284 2V4.66667M1.99951 3.33333H4.66618M3.99951 11.3333V14M2.66618 12.6667H5.33284M8.66618 2L10.19 6.57143L13.9995 8L10.19 9.42857L8.66618 14L7.14237 9.42857L3.33284 8L7.14237 6.57143L8.66618 2Z"
+					stroke={ pressed ? "white" : "url(#paint0_linear_1208_188)" } strokeWidth="1.33333"
+					strokeLinecap="round"
 					strokeLinejoin="round"
 				/>
 				<defs>
 					<linearGradient
-						id="paint0_linear_1538_754" x1="1.99951" y1="2.96991" x2="15.3308" y2="4.69764"
+						id="paint0_linear_1208_188" x1="0" y1="0" x2="16" y2="16"
 						gradientUnits="userSpaceOnUse"
 					>
 						<stop stopColor="#A61E69" />
diff --git a/packages/js/tests/ai-assessment-fixes/components/__snapshots__/SparklesIcon.test.js.snap b/packages/js/tests/ai-assessment-fixes/components/__snapshots__/SparklesIcon.test.js.snap
index 4e7f36a3b72..516b221fa17 100644
--- a/packages/js/tests/ai-assessment-fixes/components/__snapshots__/SparklesIcon.test.js.snap
+++ b/packages/js/tests/ai-assessment-fixes/components/__snapshots__/SparklesIcon.test.js.snap
@@ -4,14 +4,14 @@ exports[`SparklesIcon should render the SparklesIcon component when pressed is f
 <div>
   <svg
     fill="none"
-    height="17"
-    viewBox="0 0 16 17"
+    height="16"
+    viewBox="0 0 16 16"
     width="16"
     xmlns="http://www.w3.org/2000/svg"
   >
     <path
-      d="M3.33284 2.96991V5.63658M1.99951 4.30324H4.66618M3.99951 12.3032V14.9699M2.66618 13.6366H5.33284M8.66618 2.96991L10.19 7.54134L13.9995 8.96991L10.19 10.3985L8.66618 14.9699L7.14237 10.3985L3.33284 8.96991L7.14237 7.54134L8.66618 2.96991Z"
-      stroke="url(#paint0_linear_1538_754)"
+      d="M3.33284 2V4.66667M1.99951 3.33333H4.66618M3.99951 11.3333V14M2.66618 12.6667H5.33284M8.66618 2L10.19 6.57143L13.9995 8L10.19 9.42857L8.66618 14L7.14237 9.42857L3.33284 8L7.14237 6.57143L8.66618 2Z"
+      stroke="url(#paint0_linear_1208_188)"
       stroke-linecap="round"
       stroke-linejoin="round"
       stroke-width="1.33333"
@@ -19,11 +19,11 @@ exports[`SparklesIcon should render the SparklesIcon component when pressed is f
     <defs>
       <lineargradient
         gradientUnits="userSpaceOnUse"
-        id="paint0_linear_1538_754"
-        x1="1.99951"
-        x2="15.3308"
-        y1="2.96991"
-        y2="4.69764"
+        id="paint0_linear_1208_188"
+        x1="0"
+        x2="16"
+        y1="0"
+        y2="16"
       >
         <stop
           stop-color="#A61E69"
@@ -42,13 +42,13 @@ exports[`SparklesIcon should render the SparklesIcon component when pressed is t
 <div>
   <svg
     fill="none"
-    height="17"
-    viewBox="0 0 16 17"
+    height="16"
+    viewBox="0 0 16 16"
     width="16"
     xmlns="http://www.w3.org/2000/svg"
   >
     <path
-      d="M3.33284 2.96991V5.63658M1.99951 4.30324H4.66618M3.99951 12.3032V14.9699M2.66618 13.6366H5.33284M8.66618 2.96991L10.19 7.54134L13.9995 8.96991L10.19 10.3985L8.66618 14.9699L7.14237 10.3985L3.33284 8.96991L7.14237 7.54134L8.66618 2.96991Z"
+      d="M3.33284 2V4.66667M1.99951 3.33333H4.66618M3.99951 11.3333V14M2.66618 12.6667H5.33284M8.66618 2L10.19 6.57143L13.9995 8L10.19 9.42857L8.66618 14L7.14237 9.42857L3.33284 8L7.14237 6.57143L8.66618 2Z"
       stroke="white"
       stroke-linecap="round"
       stroke-linejoin="round"
@@ -57,11 +57,11 @@ exports[`SparklesIcon should render the SparklesIcon component when pressed is t
     <defs>
       <lineargradient
         gradientUnits="userSpaceOnUse"
-        id="paint0_linear_1538_754"
-        x1="1.99951"
-        x2="15.3308"
-        y1="2.96991"
-        y2="4.69764"
+        id="paint0_linear_1208_188"
+        x1="0"
+        x2="16"
+        y1="0"
+        y2="16"
       >
         <stop
           stop-color="#A61E69"