Change 'blue' to 'indigo' in all AI branded components (Toast and AI …

…sparkle buttons) #1624 Fix snapshots.
Yoast · Jun 14, 2024 · e4962a6 · e4962a6
1 parent 00c5c23
commit e4962a6
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 2 deletions.
diff --git 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
@@ -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
@@ -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"