SWED-2379 fix links icon migration & pure CSS

SwedbankPay · Jan 15, 2024 · a7c0b7f · a7c0b7f
1 parent be049bc
commit a7c0b7f
Show file tree

Hide file tree

Showing 9 changed files with 18 additions and 14 deletions.
diff --git a/src/App/ComponentsDocumentation/components/Links/constants.js b/src/App/ComponentsDocumentation/components/Links/constants.js
@@ -216,7 +216,7 @@ export const overviewLinks = {
 							{
 								name: "Back",
 								value: {
-									leftIcon: "swepay-icon-chevron-left small",
+									leftIcon: "swepay-icon-chevron-left",
 								},
 							},
 							{

diff --git a/src/less/components/card.less b/src/less/components/card.less
@@ -194,8 +194,9 @@
 		}
 	}
 
+	// TODO: to be removed. Not used anymore (Old card). Remove it in next major release
 	&.card-primary {
-		background-color: @brand-bg-1;
+		background-color: var(--bg-primary);
 
 		.card-header {
 			position: relative;

diff --git a/src/less/components/code-tags.less b/src/less/components/code-tags.less
@@ -24,7 +24,7 @@ code {
 	}
 
 	&.code-tags-secondary {
-		background-color: @brand-bg-1;
+		background-color: var(--bg-primary);
 	}
 
 	&.code-tags-tertiary {
@@ -41,7 +41,7 @@ code {
 	margin-right: 0.5rem;
 
 	&.tag-secondary {
-		background-color: @brand-bg-1;
+		background-color: var(--bg-primary);
 	}
 
 	&.tag-tertiary {

diff --git a/src/less/components/code-view.less b/src/less/components/code-view.less
@@ -67,7 +67,7 @@
 			.kd,
 			.k,
 			.kc {
-				color: @blue-syntax-highlight;
+				color: var(--blue-syntax-highlight);
 			}
 
 			.nb,

diff --git a/src/less/components/links.less b/src/less/components/links.less
@@ -20,7 +20,7 @@ a {
 	}
 
 	&.bright {
-		color: @blue-syntax-highlight;
+		color: var(--blue-syntax-highlight);
 
 		&:focus-visible {
 			outline: 2px solid var(--brand-primary);
@@ -65,7 +65,7 @@ a {
 		padding-left: 1rem;
 		border: 1px solid transparent;
 		text-decoration: none;
-		background-color: @brand-bg-1;
+		background-color: var(--bg-primary);
 		color: var(--brand-secondary);
 		margin-bottom: 1rem;
 		border-radius: 4px;
@@ -130,11 +130,11 @@ a {
 			display: flex;
 			align-items: center;
 			background-image: url("../../icons/shapes/chevron_down.svg");
-			transform: rotate(90deg);
+			transform: rotate(-90deg);
 			background-repeat: no-repeat;
 			background-position: center;
 			background-size: contain;
-			width: 18px;
+			width: 24px;
 			height: auto;
 			margin: 0 0.5rem;
 		}

diff --git a/src/less/components/payex/badge.less b/src/less/components/payex/badge.less
@@ -12,7 +12,7 @@ span {
 	&.status-badge {
 		&.status-badge-javascript {
 			color: @brand-secondary;
-			background-color: @brand-bg-1;
+			background-color: var(--bg-primary);
 		}
 	}
 }
diff --git a/src/less/documentation-payex.less b/src/less/documentation-payex.less
@@ -15,7 +15,7 @@
 
 	.dg-front-page-container {
 		.dg-version-indicator span {
-			background-color: var(--brand-bg-1);
+			background-color: var(--bg-primary);
 		}
 
 		header .dg-title-big.my-0 {

diff --git a/src/less/variables-payex.less b/src/less/variables-payex.less
@@ -102,7 +102,6 @@
 /* Other colors */
 @yellow-faded: #fbdd91;
 @green-syntax-highlight: #99cc66;
-@blue-syntax-highlight: #43d0dd;
 @yellow-syntax-highlight: #fff3d5;
 @dark-brown: @brand-secondary;
 @light-brown: @brand-secondary-light-3;
@@ -163,7 +162,8 @@ body {
 	--payex-dark-blue: #1e3a6e;
 
 	/* Background Colors */
-	--brand-bg-1: #e8f3e6;
+	--bg-primary: #e8f3e6;
+	--brand-bg-1: var(--bg-primary);
 	--brand-bg-2: #e8f3e6;
 	--brand-bg-3: #fbedf4;
 	--brand-bg-4: #eaf8fc;

diff --git a/src/less/variables-swedbankpay.less b/src/less/variables-swedbankpay.less
@@ -141,7 +141,6 @@
 /* Other colors */
 @yellow-faded: #fbdd91;
 @green-syntax-highlight: #99cc66;
-@blue-syntax-highlight: #43d0dd;
 @yellow-syntax-highlight: @brand-primary-light-3;
 
 /* ==================================CSS VARIABLES========================================
@@ -234,6 +233,10 @@
 	// Button colors
 	--secondary-disabled-bg: #e3d1c3;
 
+	// Other colors
+	--blue-syntax-highlight: #43d0dd;
+	--bg-primary: #fbf2ea;
+
 	// Universal utilities
 	--border-radius: 8px;
-Original file line number
+Diff line change
@@ Expand Up / @@ -67,7 +67,7 @@ @@
     			.kd,
     			.k,
     			.kc {
-    				color: @blue-syntax-highlight;
+    				color: var(--blue-syntax-highlight);
     			}
     			.nb,
@@ Expand Down @@