Merge pull request #21441 from Yoast/1624-change-blue-to-indigo

Change 'blue' to 'indigo' in all AI branded components (Toast and AI …
Yoast · Jun 18, 2024 · 4041cc8 · 4041cc8
2 parents e123e78 + fc403e6
commit 4041cc8
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 17 deletions.
diff --git a/packages/components/src/AIFixesButton.js b/packages/components/src/AIFixesButton.js
@@ -7,23 +7,23 @@ 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 yoastIndigo300 = "#A5B4FC";
+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})`,
+	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;

diff --git 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
@@ -11,7 +11,8 @@ export const SparklesIcon = ( { pressed = false } ) => {
 			<svg width="16" height="16" viewBox="0 0 16 16" 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"
+					stroke={ pressed ? "white" : "url(#paint0_linear_1208_188)" } strokeWidth="1.33333"
+					strokeLinecap="round"
 					strokeLinejoin="round"
 				/>
 				<defs>
@@ -20,7 +21,7 @@ export const SparklesIcon = ( { pressed = false } ) => {
 						gradientUnits="userSpaceOnUse"
 					>
 						<stop stopColor="#A61E69" />
-						<stop offset="1" stopColor="#3B82F6" />
+						<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
@@ -30,7 +30,7 @@ exports[`SparklesIcon should render the SparklesIcon component when pressed is f
         />
         <stop
           offset="1"
-          stop-color="#3B82F6"
+          stop-color="#6366F1"
         />
       </lineargradient>
     </defs>
@@ -68,7 +68,7 @@ exports[`SparklesIcon should render the SparklesIcon component when pressed is t
         />
         <stop
           offset="1"
-          stop-color="#3B82F6"
+          stop-color="#6366F1"
         />
       </lineargradient>
     </defs>