SWED-2279 style new color page SBP

SwedbankPay · Oct 26, 2023 · 1229459 · 1229459
1 parent f0fa9b3
commit 1229459
Show file tree

Hide file tree

Showing 5 changed files with 21 additions and 48 deletions.
diff --git a/src/App/Identity/identity/Color/index.js b/src/App/Identity/identity/Color/index.js
@@ -73,7 +73,7 @@ const SBPrimaryColors = () => (
 		)}
 		<div className="color-group pt-3">
 			{sbColors.primaryBrandColors.map((color, i) => (
-				<DisplayColor key={i} {...color} setColorViaSubtitle={false} />
+				<DisplayColor key={i} {...color} />
 			))}
 		</div>
 		<div className="container mt-5">
@@ -139,7 +139,7 @@ const SBBrandAccentColors = () => (
 		</p>
 		<div className="color-group">
 			{sbColors.accentBrandColors.map((color, i) => (
-				<DisplayColor key={i} {...color} setColorViaSubtitle={false} />
+				<DisplayColor key={i} {...color} />
 			))}
 		</div>
 		<div className="container mt-5">
@@ -251,7 +251,6 @@ const SBTextColors = () => (
 									key={i}
 									isSizeLarge={false}
 									isVertical={false}
-									setColorViaSubtitle={true}
 									{...color}
 								/>
 							))}
@@ -286,7 +285,6 @@ const SBTextColors = () => (
 									isSizeLarge={false}
 									isVertical={false}
 									{...color}
-									setColorViaSubtitle={true}
 								/>
 							))}
 					</ul>
@@ -318,7 +316,6 @@ const SBTextColors = () => (
 									key={i}
 									isSizeLarge={false}
 									isVertical={false}
-									setColorViaSubtitle={true}
 									{...color}
 								/>
 							))}
@@ -353,7 +350,6 @@ const SBBackgroundColors = () => (
 					{...color}
 					isSizeLarge={false}
 					isVertical={false}
-					setColorViaSubtitle={true}
 				/>
 			))}
 		</div>
@@ -378,7 +374,6 @@ const SBSystemColors = () => (
 								{...color}
 								isSizeLarge={false}
 								isVertical={false}
-								setColorViaSubtitle={true}
 							/>
 						))}
 				</div>
@@ -391,7 +386,6 @@ const SBSystemColors = () => (
 								{...color}
 								isSizeLarge={false}
 								isVertical={false}
-								setColorViaSubtitle={true}
 							/>
 						))}
 				</div>
@@ -415,7 +409,6 @@ const SBColorPool = () => (
 						{...color}
 						isSizeLarge={false}
 						isVertical={false}
-						setColorViaSubtitle={false}
 					/>
 				))}
 			</div>
@@ -432,7 +425,7 @@ const MainColors = () => (
 		</p>
 		<div className="color-group flex-wrap">
 			{pxColors.mainText.map((color, i) => (
-				<DisplayColor key={i} {...color} setColorViaSubtitle={false} />
+				<DisplayColor key={i} {...color} />
 			))}
 		</div>
 	</section>
@@ -449,7 +442,7 @@ const PayexComplementaryColors = () => (
 		</p>
 		<div className="color-group">
 			{pxColors.complementaryColors.map((color, i) => (
-				<DisplayColor key={i} {...color} setColorViaSubtitle={false} />
+				<DisplayColor key={i} {...color} />
 			))}
 		</div>
 	</section>
@@ -464,7 +457,7 @@ const PayexButtonColors = () => (
 		</p>
 		<div className="color-group">
 			{pxColors.buttonColors.map((color, i) => (
-				<DisplayColor key={i} {...color} setColorViaSubtitle={false} />
+				<DisplayColor key={i} {...color} />
 			))}
 		</div>
 	</section>
@@ -480,7 +473,7 @@ const PayexBackgroundColors = () => (
 		</p>
 		<div className="color-group">
 			{pxColors.backgroundColors.map((color, i) => (
-				<DisplayColor key={i} {...color} setColorViaSubtitle={false} />
+				<DisplayColor key={i} {...color} />
 			))}
 		</div>
 	</section>
@@ -495,7 +488,7 @@ const PayexSystemColors = () => (
 		</p>
 		<div className="color-group">
 			{pxColors.systemColors.map((color, i) => (
-				<DisplayColor key={i} {...color} setColorViaSubtitle={false} />
+				<DisplayColor key={i} {...color} />
 			))}
 		</div>
 	</section>

diff --git a/src/App/Identity/identity/Color/swedbankpay-colors.js b/src/App/Identity/identity/Color/swedbankpay-colors.js
@@ -222,37 +222,37 @@ export const functionalColors = [
 export const colorPool = [
 	{
 		title: "Primary",
-		subTitle: "yellow-primary",
+		subTitle: "brand-yellow",
 		hex: "#FDC129",
 	},
 	{
 		title: "Yellow light",
-		subTitle: "yellow-light",
+		subTitle: "brand-yellow-light",
 		hex: "#FCE4A1",
 	},
 	{
 		title: "Yellow lighter",
-		subTitle: "yellow-lighter",
+		subTitle: "brand-yellow-lighter",
 		hex: "#FFF3D5",
 	},
 	{
 		title: "Turquoise",
-		subTitle: "turquoise",
+		subTitle: "brand-turquoise",
 		hex: "#31A3AE",
 	},
 	{
 		title: "Turquoise light",
-		subTitle: "turquoise-light",
+		subTitle: "brand-turquoise-light",
 		hex: "#8ACDC3",
 	},
 	{
 		title: "Turquoise lighter",
-		subTitle: "turquoise-lighter",
+		subTitle: "brand-turquoise-lighter",
 		hex: "#EBF8F2",
 	},
 	{
 		title: "Purple",
-		subTitle: "brand-purple",
+		subTitle: "purple",
 		hex: "#642f93",
 	},
 	{
@@ -267,7 +267,7 @@ export const colorPool = [
 	},
 	{
 		title: "Orange",
-		subTitle: "orange",
+		subTitle: "brand-orange",
 		hex: "#EE7023",
 	},
 	{
@@ -277,7 +277,7 @@ export const colorPool = [
 	},
 	{
 		title: "Orange lighter",
-		subTitle: "orange-lighter",
+		subTitle: "brand-orange-lighter",
 		hex: "#FBEADB",
 	},
 	{
@@ -292,7 +292,7 @@ export const colorPool = [
 	},
 	{
 		title: "Green lighter",
-		subTitle: "green-lighter",
+		subTitle: "brand-green-lighter",
 		hex: "#E7F8D2",
 	},
 	{
@@ -322,12 +322,12 @@ export const colorPool = [
 	},
 	{
 		title: "Red lighter",
-		subTitle: "red-lighter",
+		subTitle: "brand-red-lighter",
 		hex: "#FFE9E9",
 	},
 	{
 		title: "Blue",
-		subTitle: "blue",
+		subTitle: "brand-blue",
 		hex: "#335BB1",
 	},
 	{
@@ -337,7 +337,7 @@ export const colorPool = [
 	},
 	{
 		title: "Blue lighter",
-		subTitle: "blue-lighter",
+		subTitle: "brand-blue-lighter",
 		hex: "#E0EAF9",
 	},
 	{

diff --git a/src/App/components/DisplayColor/index.js b/src/App/components/DisplayColor/index.js
@@ -8,7 +8,6 @@ const DisplayColor = ({
 	hasBorderOverWhiteBG = false,
 	isSizeLarge = true,
 	isVertical = true,
-	setColorViaSubtitle = false,
 }) => {
 	if (isSizeLarge) {
 		return (
@@ -36,7 +35,7 @@ const DisplayColor = ({
 						hasBorderOverWhiteBG ? "border" : ""
 					}`}
 					style={{
-						"--bg-color": setColorViaSubtitle ? `var(--${subTitle})` : hex,
+						"--bg-color": `var(--${subTitle}, ${hex})`,
 					}}
 				></div>
 				<div className="d-flex flex-column">

diff --git a/src/less/variables-payex.less b/src/less/variables-payex.less
@@ -105,7 +105,6 @@
 @green-syntax-highlight: #99cc66;
 @blue-syntax-highlight: #43d0dd;
 @yellow-syntax-highlight: #fff3d5;
-@pink-cards-details: #c5569a;
 @dark-brown: @brand-secondary;
 @light-brown: @brand-secondary-light-3;
 @help-block-text: #707070;
@@ -261,7 +260,6 @@ body {
 	--green-syntax-highlight: #99cc66;
 	--blue-syntax-highlight: #43d0dd;
 	--yellow-syntax-highlight: #fff3d5;
-	--pink-cards-details: #c5569a;
 	--dark-brown: var(--brand-secondary, #3c3c3c);
 	--light-brown: var(--brand-secondary-light-3, #c8c8c8);
 	--help-block-text: #707070;

diff --git a/src/less/variables-swedbankpay.less b/src/less/variables-swedbankpay.less
@@ -145,7 +145,6 @@
 @green-syntax-highlight: #99cc66;
 @blue-syntax-highlight: #43d0dd;
 @yellow-syntax-highlight: @brand-primary-light-3;
-@pink-cards-details: #c5569a;
 
 /* ==================================CSS VARIABLES========================================
 *
@@ -194,26 +193,11 @@
 
 	// Color pool
 	--brand-turquoise-lighter: #ebf8f2;
-	// --brand-purple: #642f93;
-	// --brand-purple-light: #c58af9;
-	--brand-purple-lighter: #f1e0ff;
-	// --brand-orange-light: #ffba69;
 	--brand-orange-lighter: #fbeadb;
-	// --brand-green: #497125;
-	// --brand-green-light: #70b63a;
 	--brand-green-lighter: #e7f8d2;
-	// --brand-mahogany: #4c2d2c;
-	// --brand-mahogany-light: #965e5c;
-	// --brand-mahogany-lighter: #eec4c4;
-	// --brand-red: #a62825;
-	// --brand-red-light: #efb7b6;
 	--brand-red-lighter: #ffe9e9;
 	--brand-blue: #335bb1;
-	// --brand-blue-light: #65a0e4;
 	--brand-blue-lighter: #e0eaf9;
-	// --brand-fuchsia: #b9297f;
-	// --brand-fuchsia-light: #fbbbe1;
-	// --brand-fuchsia-lighter: #ffeefc;
 
 	// Functional colors
 	--base-1: var(--text-default);
@@ -230,7 +214,6 @@
 	--bg-orange: #fff1e4;
 	--bg-white: var(--white, #ffffff);
 	--bg-turquoise: var(--brand-turquoise-lighter, #ebf8f2);
-	// TODO: update bg colors in LESS variables and in component
 
 	// System colors
 	--system-success: #4d9c0f;