SWED-2279 remove img system + container color-pool

- remove images system-color - replace CSS variables by hex in color swatches for color-pool - comment out CSS variables from color-pool - containerize grid color-pool
SwedbankPay · Oct 25, 2023 · f0fa9b3 · f0fa9b3
1 parent 619fd55
commit f0fa9b3
Show file tree

Hide file tree

Showing 5 changed files with 95 additions and 107 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} />
+				<DisplayColor key={i} {...color} setColorViaSubtitle={false} />
 			))}
 		</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} />
+				<DisplayColor key={i} {...color} setColorViaSubtitle={false} />
 			))}
 		</div>
 		<div className="container mt-5">
@@ -251,6 +251,7 @@ const SBTextColors = () => (
 									key={i}
 									isSizeLarge={false}
 									isVertical={false}
+									setColorViaSubtitle={true}
 									{...color}
 								/>
 							))}
@@ -285,6 +286,7 @@ const SBTextColors = () => (
 									isSizeLarge={false}
 									isVertical={false}
 									{...color}
+									setColorViaSubtitle={true}
 								/>
 							))}
 					</ul>
@@ -316,6 +318,7 @@ const SBTextColors = () => (
 									key={i}
 									isSizeLarge={false}
 									isVertical={false}
+									setColorViaSubtitle={true}
 									{...color}
 								/>
 							))}
@@ -350,6 +353,7 @@ const SBBackgroundColors = () => (
 					{...color}
 					isSizeLarge={false}
 					isVertical={false}
+					setColorViaSubtitle={true}
 				/>
 			))}
 		</div>
@@ -374,6 +378,7 @@ const SBSystemColors = () => (
 								{...color}
 								isSizeLarge={false}
 								isVertical={false}
+								setColorViaSubtitle={true}
 							/>
 						))}
 				</div>
@@ -386,28 +391,11 @@ const SBSystemColors = () => (
 								{...color}
 								isSizeLarge={false}
 								isVertical={false}
+								setColorViaSubtitle={true}
 							/>
 						))}
 				</div>
 			</div>
-			<div className="row pt-4">
-				<div className="col-sm pl-sm-0">
-					<img
-						className="w-100"
-						// src={`${basename}img/documentation/colors/identity-color-system-1.png`}
-						src={`${basename}designguide/assets/colors/identity-color-system-1.png`}
-						alt=""
-					/>
-				</div>
-				<div className="col-sm pr-sm-0 pt-3 pt-sm-0">
-					<img
-						className="w-100"
-						// src={`${basename}img/documentation/colors/identity-color-system-2.png`}
-						src={`${basename}designguide/assets/colors/identity-color-system-2.png`}
-						alt=""
-					/>
-				</div>
-			</div>
 		</div>
 	</section>
 );
@@ -419,47 +407,17 @@ const SBColorPool = () => (
 			This pool of colors can be picked from when more colors are needed, rather
 			than making up new ones.
 		</p>
-		<div className="container color-group">
-			<div className="row w-100">
-				<div className="col-sm pl-0">
-					{sbColors.colorPool
-						.slice(0, Math.ceil(sbColors.colorPool.length / 3))
-						.map((color, i) => (
-							<DisplayColor
-								key={i}
-								{...color}
-								isSizeLarge={false}
-								isVertical={false}
-							/>
-						))}
-				</div>
-				<div className="col-sm pl-0">
-					{sbColors.colorPool
-						.slice(
-							Math.ceil(sbColors.colorPool.length / 3),
-							Math.ceil((2 * sbColors.colorPool.length) / 3)
-						)
-						.map((color, i) => (
-							<DisplayColor
-								key={i}
-								{...color}
-								isSizeLarge={false}
-								isVertical={false}
-							/>
-						))}
-				</div>
-				<div className="col-sm pl-0">
-					{sbColors.colorPool
-						.slice(Math.ceil((2 * sbColors.colorPool.length) / 3))
-						.map((color, i) => (
-							<DisplayColor
-								key={i}
-								{...color}
-								isSizeLarge={false}
-								isVertical={false}
-							/>
-						))}
-				</div>
+		<div className="container px-0 color-group color-grid grid-columns">
+			<div className="containerized-grid">
+				{sbColors.colorPool.map((color, i) => (
+					<DisplayColor
+						key={i}
+						{...color}
+						isSizeLarge={false}
+						isVertical={false}
+						setColorViaSubtitle={false}
+					/>
+				))}
 			</div>
 		</div>
 	</section>
@@ -474,7 +432,7 @@ const MainColors = () => (
 		</p>
 		<div className="color-group flex-wrap">
 			{pxColors.mainText.map((color, i) => (
-				<DisplayColor key={i} {...color} />
+				<DisplayColor key={i} {...color} setColorViaSubtitle={false} />
 			))}
 		</div>
 	</section>
@@ -491,7 +449,7 @@ const PayexComplementaryColors = () => (
 		</p>
 		<div className="color-group">
 			{pxColors.complementaryColors.map((color, i) => (
-				<DisplayColor key={i} {...color} />
+				<DisplayColor key={i} {...color} setColorViaSubtitle={false} />
 			))}
 		</div>
 	</section>
@@ -506,7 +464,7 @@ const PayexButtonColors = () => (
 		</p>
 		<div className="color-group">
 			{pxColors.buttonColors.map((color, i) => (
-				<DisplayColor key={i} {...color} />
+				<DisplayColor key={i} {...color} setColorViaSubtitle={false} />
 			))}
 		</div>
 	</section>
@@ -522,7 +480,7 @@ const PayexBackgroundColors = () => (
 		</p>
 		<div className="color-group">
 			{pxColors.backgroundColors.map((color, i) => (
-				<DisplayColor key={i} {...color} />
+				<DisplayColor key={i} {...color} setColorViaSubtitle={false} />
 			))}
 		</div>
 	</section>
@@ -537,7 +495,7 @@ const PayexSystemColors = () => (
 		</p>
 		<div className="color-group">
 			{pxColors.systemColors.map((color, i) => (
-				<DisplayColor key={i} {...color} />
+				<DisplayColor key={i} {...color} setColorViaSubtitle={false} />
 			))}
 		</div>
 	</section>

diff --git a/src/App/Identity/identity/Color/swedbankpay-colors.js b/src/App/Identity/identity/Color/swedbankpay-colors.js
@@ -222,32 +222,32 @@ export const functionalColors = [
 export const colorPool = [
 	{
 		title: "Primary",
-		subTitle: "brand-yellow",
+		subTitle: "yellow-primary",
 		hex: "#FDC129",
 	},
 	{
 		title: "Yellow light",
-		subTitle: "brand-yellow-light",
+		subTitle: "yellow-light",
 		hex: "#FCE4A1",
 	},
 	{
 		title: "Yellow lighter",
-		subTitle: "brand-yellow-lighter",
+		subTitle: "yellow-lighter",
 		hex: "#FFF3D5",
 	},
 	{
 		title: "Turquoise",
-		subTitle: "brand-turquoise",
+		subTitle: "turquoise",
 		hex: "#31A3AE",
 	},
 	{
 		title: "Turquoise light",
-		subTitle: "brand-turquoise-light",
+		subTitle: "turquoise-light",
 		hex: "#8ACDC3",
 	},
 	{
 		title: "Turquoise lighter",
-		subTitle: "brand-turquoise-lighter",
+		subTitle: "turquoise-lighter",
 		hex: "#EBF8F2",
 	},
 	{
@@ -257,102 +257,102 @@ export const colorPool = [
 	},
 	{
 		title: "Purple light",
-		subTitle: "brand-purple-light",
+		subTitle: "purple-light",
 		hex: "#C58AF9",
 	},
 	{
 		title: "Purple lighter",
-		subTitle: "brand-purple-lighter",
+		subTitle: "purple-lighter",
 		hex: "#F1E0FF",
 	},
 	{
 		title: "Orange",
-		subTitle: "brand-orange",
+		subTitle: "orange",
 		hex: "#EE7023",
 	},
 	{
 		title: "Orange light",
-		subTitle: "brand-orange-light",
+		subTitle: "orange-light",
 		hex: "#FFBA69",
 	},
 	{
 		title: "Orange lighter",
-		subTitle: "brand-orange-lighter",
+		subTitle: "orange-lighter",
 		hex: "#FBEADB",
 	},
 	{
 		title: "Green",
-		subTitle: "brand-green",
+		subTitle: "green",
 		hex: "#497125",
 	},
 	{
 		title: "Green light",
-		subTitle: "brand-green-light",
+		subTitle: "green-light",
 		hex: "#70B63A",
 	},
 	{
 		title: "Green lighter",
-		subTitle: "brand-green-lighter",
+		subTitle: "green-lighter",
 		hex: "#E7F8D2",
 	},
 	{
 		title: "Mahogany",
-		subTitle: "brand-mahogany",
+		subTitle: "mahogany",
 		hex: "#4C2D2C",
 	},
 	{
 		title: "Mahogany light",
-		subTitle: "brand-mahogany-light",
+		subTitle: "mahogany-light",
 		hex: "#965E5C",
 	},
 	{
 		title: "Mahogany lighter",
-		subTitle: "brand-mahogany-lighter",
+		subTitle: "mahogany-lighter",
 		hex: "#EEC4C4",
 	},
 	{
 		title: "Red",
-		subTitle: "brand-red",
+		subTitle: "red",
 		hex: "#A62825",
 	},
 	{
 		title: "Red light",
-		subTitle: "brand-red-light",
+		subTitle: "red-light",
 		hex: "#EFB7B6",
 	},
 	{
 		title: "Red lighter",
-		subTitle: "brand-red-lighter",
+		subTitle: "red-lighter",
 		hex: "#FFE9E9",
 	},
 	{
 		title: "Blue",
-		subTitle: "brand-blue",
+		subTitle: "blue",
 		hex: "#335BB1",
 	},
 	{
 		title: "Blue light",
-		subTitle: "brand-blue-light",
+		subTitle: "blue-light",
 		hex: "#65A0E4",
 	},
 	{
 		title: "Blue lighter",
-		subTitle: "brand-blue-lighter",
+		subTitle: "blue-lighter",
 		hex: "#E0EAF9",
 	},
 	{
 		title: "Fuchsia",
-		subTitle: "brand-fuchsia",
+		subTitle: "fuchsia",
 		hex: "#B9297F",
 	},
 	{
 		title: "Fuchsia light",
-		subTitle: "brand-fuchsia-light",
+		subTitle: "fuchsia-light",
 		hex: "#FBBBE1",
 	},
 	{
 		title: "Fuchsia lighter",
-		subTitle: "brand-fuchsia-lighter",
+		subTitle: "fuchsia-lighter",
 		hex: "#FFEEFC",
 	},
 ];
diff --git a/src/App/components/DisplayColor/index.js b/src/App/components/DisplayColor/index.js
@@ -8,6 +8,7 @@ const DisplayColor = ({
 	hasBorderOverWhiteBG = false,
 	isSizeLarge = true,
 	isVertical = true,
+	setColorViaSubtitle = false,
 }) => {
 	if (isSizeLarge) {
 		return (
@@ -34,7 +35,9 @@ const DisplayColor = ({
 					className={`color-swatch color-box-small ${
 						hasBorderOverWhiteBG ? "border" : ""
 					}`}
-					style={{ "--bg-color": `var(--${subTitle})` }}
+					style={{
+						"--bg-color": setColorViaSubtitle ? `var(--${subTitle})` : hex,
+					}}
 				></div>
 				<div className="d-flex flex-column">
 					<small>