@financial-times/n-conversion-forms 41.3.1 → 42.0.0

package/styles/_shared.scss

@@ -1,101 +1,126 @@
 @mixin bigRadioButton($className) {
-	// Overrides o-forms styling for round radio buttons
-	.o-forms-input--radio-round {
-		.o-forms-input__label {
-			box-sizing: border-box;
-			padding: 14px 20px;
-			min-height: 110px;
-			border: 2px solid oColorsByName('teal');
-			text-align: left;
-			width: 100%;
-			position: relative;
-
-			// radio button styling
-			&::before {
-				border: 1px solid oColorsByName('teal');
-				left: auto;
-				top: 43px;
-				right: 14px;
-			}
-
-			&::after {
-				left: auto;
-				top: 43px;
-				right: 14px;
-			}
-		}
-		.ncf__delivery-option__label {
-			background-color: oColorsByName('white');
-			color: oColorsByName('black-80');;
-		}
-		.no-title__delivery-option__box {
-			min-height: 80px;
-		}
-		.o-forms-input__address-type__label {
-			padding: 2px 2px 2px 35px;
-			min-height: 0;
-			border: 0;
-
-			// radio button styling
-			&::before {
-				border: 1px solid oColorsByName('black-80');
-				left: 0;
-				top: 0;
-			}
-
-			&::after {
-				left: 0;
-				top: 0;
-			}
-		}
-	}
-
-	// Overrides o-forms styling for round radio buttons in the checked state.
-	/* stylelint-disable */
-	/* prettier-ignore */
-	.o-forms-input--radio-round input[type=radio]:checked {
-		+ .o-forms-input__label {
-			background-color: oColorsByName('teal');
-			color: oColorsByName('white');
-
-			// radio button styling
-			&::before {
-				border: 1px solid oColorsByName('white');
-			}
-
-			&::after {
-				background-color: oColorsByName('white');
-			}
-		}
-		+.o-forms-input__address-type__label {
-			background-color: oColorsByName('white');
-			color: oColorsByName('black-80');
-			// radio button styling
-			&::before {
-				border: 1px solid oColorsByName('teal');
-				left: 0;
-				top: 0;
-			}
-
-			&::after {
-				background-color: oColorsByName('teal');
-				left: 0;
-				top: 0;
-			}
-		}
-	}
-	/* stylelint-enable */
-
-	#{$className}__item--discount {
-		margin-top: 26px;
-	}
-
-	#{$className}__title {
-		font-weight: oFontsWeight('semibold');
-		@include oTypographySans($scale: 2);
-	}
-
-	#{$className}__description {
-		padding-top: 14px;
-	}
-}
+
+  // Overrides o-forms styling for round radio buttons
+  .o-forms-input--radio-round {
+    .o-forms-input__label {
+      box-sizing: border-box;
+      padding: 14px 20px;
+      min-height: 110px;
+      border: 2px solid var(--o3-color-palette-teal);
+      text-align: left;
+      width: 100%;
+      position: relative;
+
+      // radio button styling
+      &::before {
+        border: 1px solid var(--o3-color-palette-teal);
+        left: auto;
+        top: 43px;
+        right: 14px;
+      }
+
+      &::after {
+        left: auto;
+        top: 43px;
+        right: 14px;
+      }
+    }
+
+    .ncf__delivery-option__label {
+      background-color: var(--o3-color-palette-white);
+      color: var(--o3-color-use-case-body-text);
+    }
+
+    .no-title__delivery-option__box {
+      min-height: 80px;
+    }
+
+    .o-forms-input__address-type__label {
+      padding: 2px 2px 2px 35px;
+      min-height: 0;
+      border: 0;
+
+      // radio button styling
+      &::before {
+        border: 1px solid var(--o3-color-use-case-body-text);
+        left: 0;
+        top: 0;
+      }
+
+      &::after {
+        left: 0;
+        top: 0;
+      }
+    }
+  }
+
+  // Overrides o-forms styling for round radio buttons in the checked state.
+  /* stylelint-disable */
+  /* prettier-ignore */
+  .o-forms-input--radio-round input[type=radio]:checked {
+    +.o-forms-input__label {
+      background-color: var(--o3-color-palette-teal);
+      color: var(--o3-color-palette-white);
+
+      // radio button styling
+      &::before {
+        border: 1px solid var(--o3-color-palette-white);
+      }
+
+      &::after {
+        background-color: var(--o3-color-palette-white);
+      }
+    }
+
+    +.o-forms-input__address-type__label {
+      background-color: var(--o3-color-palette-white);
+      color: var(--o3-color-use-case-body-text);
+
+      // radio button styling
+      &::before {
+        border: 1px solid var(--o3-color-palette-teal);
+        left: 0;
+        top: 0;
+      }
+
+      &::after {
+        background-color: var(--o3-color-palette-teal);
+        left: 0;
+        top: 0;
+      }
+    }
+  }
+
+  /* stylelint-enable */
+
+  .ncf__payment-term__item--discount {
+    margin-top: 26px;
+  }
+
+  .ncf__payment-term__title {
+    font-size: var(--o3-font-size-metric2-2);
+    line-height: var(--o3-font-lineheight-metric2-2);
+    font-weight: var(--o3-font-weight-semibold);
+
+  }
+
+  .ncf__payment-term__description {
+    padding-top: 14px;
+  }
+
+
+  .ncf__delivery-option__item--discount {
+    margin-top: 26px;
+  }
+
+  .ncf__delivery-option__title {
+    font-size: var(--o3-font-size-metric2-2);
+    line-height: var(--o3-font-lineheight-metric2-2);
+    font-weight: var(--o3-font-weight-semibold);
+
+  }
+
+  .ncf__delivery-option__description {
+    padding-top: 14px;
+  }
+}

package/styles/accept-terms.scss

@@ -2,10 +2,11 @@
 	// Overwrite the native Origami styles to create a list which is more visually consistent with the previous T&Cs paragraphs.
 	&__accept-terms-list {
 		list-style-type: none;
-		margin: 0 0 oSpacingByName('s3') 0;
+        padding-left: 0;
+		margin: 0 0 var(--o3-spacing-3xs) 0;
 
 		& > li {
-			margin-bottom: oSpacingByName('s2');
+			margin-bottom: var(--o3-spacing-4xs);
 			padding-left: 0;
 		}
 	}
@@ -26,11 +27,11 @@
   .consent-text {
     &--top {
       order: -1;
-      margin-bottom: oSpacingByName('s4');
+      margin-bottom: var(--o3-spacing-2xs);
     }
 
     &--bottom {
-      margin-top: oSpacingByName('s4');
+      margin-top: var(--o3-spacing-2xs);
       order: 99;
     }
   }
@@ -38,6 +39,6 @@
   .children-container {
     display: flex;
     flex-direction: column;
-    margin-top: oSpacingByName('s4');
+    margin-top: var(--o3-spacing-2xs);
   }
 }

package/styles/banner.scss

@@ -1,73 +1,79 @@
 @mixin ncfBanner() {
-	&__trial-banner {
-		@include oTypographySerif($scale: 0);
-		background-color: #262a33;
-		color: white;
-		text-align: center;
-		line-height: 40px;
+  &__trial-banner {
+    font-family: var(--o3-type-body-base-font-family);
+    font-size: var(--o3-type-body-base-font-size);
+    font-weight: var(--o3-type-body-base-font-weight);
+    line-height: var(--o3-type-body-base-line-height);
 
-		&-img {
-			vertical-align: middle;
-			margin: 0 0 0 30px;
+    background-color: #262a33;
+    color: white;
+    text-align: center;
+    line-height: 40px;
 
-			@include oGridRespondTo($until: S) {
-				display: none;
-			}
-		}
+    &-img {
+      vertical-align: middle;
+      margin: 0 0 0 30px;
 
-		&-content {
-			margin: 0;
-		}
-	}
+      @include oGridRespondTo($until: S) {
+        display: none;
+      }
+    }
 
-	&__app-banner {
-		background: oColorsByName('wheat');
-		border-top: 1px solid oColorsByName('black-10');
-		border-bottom: 1px solid oColorsByName('black-10');
+    &-content {
+      margin: 0;
+    }
+  }
 
-		&-inner {
-			display: grid;
-			grid-template-columns: 100px 1fr;
-			grid-template-rows: 1fr 1fr;
-			column-gap: 14px;
-			overflow: hidden;
-			max-width: 700px;
-			align-items: center;
-			margin: 0 auto;
-			padding: 10px;
+  &__app-banner {
+    background: var(--o3-color-palette-wheat);
+    border-top: 1px solid var(--o3-color-palette-black-10);
+    border-bottom: 1px solid var(--o3-color-palette-black-10);
 
-			@include oGridRespondTo($from: M) {
-				grid-template-columns: 100px 1fr 240px;
-				grid-template-rows: 140px;
-			}
-		}
+    &-inner {
+      display: grid;
+      grid-template-columns: 100px 1fr;
+      grid-template-rows: 1fr 1fr;
+      column-gap: 14px;
+      overflow: hidden;
+      max-width: 700px;
+      align-items: center;
+      margin: 0 auto;
+      padding: 10px;
 
-		&-image {
-			img {
-				width: 100px;
-			}
+      @include oGridRespondTo($from: M) {
+        grid-template-columns: 100px 1fr 240px;
+        grid-template-rows: 140px;
+      }
+    }
 
-			@include oGridRespondTo($until: M) {
-				grid-row: span 2;
-			}
-		}
+    &-image {
+      img {
+        width: 100px;
+      }
 
-		&-strong {
-			font-weight: oFontsWeight('semibold');
-		}
+      @include oGridRespondTo($until: M) {
+        grid-row: span 2;
+      }
+    }
 
-		&-header {
-			@include oTypographySerif($scale: 0, $include-font-family: false);
-			font-weight: oFontsWeight('semibold');
-			margin: 0 0 4px;
-		}
+    &-strong {
+      font-weight: var(--o3-font-weight-semibold);
+    }
 
-		&-action {
-			display: inline-block;
+    &-header {
+      font-family: var(--o3-type-body-highlight-font-family);
+      font-size: var(--o3-type-body-highlight-font-size);
+      font-weight: var(--o3-type-body-highlight-font-weight);
+      line-height: var(--o3-type-body-highlight-line-height);
+      margin: 0 0 4px;
+    }
 
-			a {
-				border: 0;
-			}
-		}
-	}
-}
+    &-action {
+      display: inline-block;
+
+      a {
+        border: 0;
+      }
+    }
+  }
+}

package/styles/confirmation.scss

@@ -1,3 +1,4 @@
+@import '@financial-times/o3-foundation/css/core.css';
 @import '@financial-times/o-social-follow/main';
 @import '@financial-times/o-grid/main';
 
@@ -35,17 +36,17 @@
 			display: flex;
 			flex-direction: column;
 			align-items: flex-start;
-			gap: oSpacingByName('s2');
-			padding: oSpacingByName('s6') oSpacingByName('s4');
-			padding-left: calc(oSpacingByName('m12') + oSpacingByName('s1'));
-			background-color: oColorsByName('slate');
-			color: oColorsByName('white');
-			margin: oSpacingByName('s8') calc((oSpacingByName('m12') + oSpacingByName('s1')));
+			gap: var(--o3-spacing-4xs);
+			padding: var(--o3-spacing-s) var(--o3-spacing-2xs);
+			padding-left: calc(var(--o3-spacing-xl) + var(--o3-spacing-5xs));
+			background-color: var(--o3-color-use-case-page-inverse-background);
+			color: var(--o3-color-use-case-body-inverse-text);
+			margin: var(--o3-spacing-m) 52px; // Using hardcoded values to allow it align with icon since icon size has changed to 24px and using --o3-spacing-xl breaks the design
 
 			@include oGridRespondTo($until: M) {
 				align-items: stretch;
-				padding: oSpacingByName('s4');
-				margin: oSpacingByName('s8') 0px;
+				padding: var(--o3-spacing-2xs);
+				margin: var(--o3-spacing-m) 0px;
 			}
 
 			&-header {
@@ -53,56 +54,47 @@
 			}
 
 			&-title {
-				text-indent: calc(-1 * (oSpacingByName('m12') + oSpacingByName('s1')));
+				text-indent: calc(-1 * (var(--o3-spacing-xl) + var(--o3-spacing-5xs)));
 				margin: 0px;
 
-				@include oTypographySans(
-					$scale: 1,
-					$weight: 'semibold',
-					$include-font-family: false
-				);
+				
 
 				@include oGridRespondTo($until: M) {
 					display: flex;
 					align-items: center;
 					text-indent: 0px;
-
-					@include oTypographySans(
-						$scale: 0,
-						$weight: 'semibold',
-						$include-font-family: false
-					);
 				}
 
 				&::before {
-					@include oIconsContent(
-						$icon-name: 'info',
-						$color: oColorsByName('white'),
-						$size: 32
-					);
+					display: inline-block;
+					width: 26px;
+					height: 26px;
+					margin: 6px;
+					/* Set the icon colour, In this case match the
+                     current foreground text colour. */
+					background-color: var(--o3-color-palette-white);
+					/* Mask the square with an Origami icon. */
+					mask-image: var(--o3-icon-info);
+					mask-repeat: no-repeat;
+					mask-size: contain;
 					content: '';
-					color: oColorsByName('white');
 					vertical-align: middle;
-					margin-right: oSpacingByName('s2');
-					margin-left: oSpacingByName('s3');
+					margin-right: 10px;
+					margin-left: var(--o3-spacing-3xs);
 
 					@include oGridRespondTo($until: M) {
 						flex-shrink: 0;
-						margin: 0px;
+						margin: 0 var(--o3-spacing-5xs) 0 0;
 					}
 				}
 			}
 
 			&-text {
-				@include oTypographySans(
-					$scale: -1,
-					$weight: 'regular',
-					$include-font-family: false
-				);
-				margin: oSpacingByName('s2') 0px 0px;
+				
+				margin: var(--o3-spacing-4xs) 0px 0px;
 
 				&--bold {
-					font-weight: oFontsWeight('semibold');
+					font-weight: var(--o3-font-weight-semibold);
 				}
 			}
 
@@ -112,26 +104,29 @@
 				padding: 0px;
 				margin: 0px;
 
-				@include oTypographySans(
-					$scale: -1,
-					$weight: 'regular',
-					$include-font-family: false
-				);
+				
 
 				&-item {
-					margin: oSpacingByName('s1') 0px;
-					border-bottom: 1px solid oColorsMix('white-80', 'slate', 20);
+					margin: var(--o3-spacing-5xs) 0px;
+                    border-bottom: 1px solid #858b95; // Fallback for browsers that don’t support color-mix()
+					border-bottom: 1px solid color-mix(in srgb, var(--o3-color-palette-white-80) 20%, var(--o3-color-palette-slate));
 
 					&:last-child {
 						border-bottom: none;
 					}
 
 					&::before {
-						@include oIconsContent(
-							$icon-name: 'tick',
-							$color: oColorsByName('mint'),
-							$size: 32
-						);
+						display: inline-block;
+						width: 26px;
+						height: 26px;
+						margin: 0 6px;
+						/* Set the icon colour, In this case match the
+                         current foreground text colour. */
+						background-color: var(--o3-color-palette-mint);
+						/* Mask the square with an Origami icon. */
+						mask-image: var(--o3-icon-tick);
+						mask-repeat: no-repeat;
+						mask-size: contain;
 						content: '';
 						vertical-align: middle;
 					}
@@ -142,19 +137,19 @@
 		&--links {
 			display: grid;
 			grid-template-rows: 1fr 1fr;
-			gap: oSpacingByName('s4');
-			margin-top: oSpacingByName('s6');
+			gap: var(--o3-spacing-2xs);
+			margin-top: var(--o3-spacing-s);
 
 			@include oGridRespondTo(M) {
 				grid-template-rows: unset;
 				grid-template-columns: 1fr 1fr;
-				gap: oSpacingByName('s8');
+				gap: var(--o3-spacing-m);
 			}
 		}
 
 		&--socials {
 			@include oGridRespondTo(M) {
-				padding: oSpacingByName('s6') oSpacingByName('s4');
+				padding: var(--o3-spacing-s) var(--o3-spacing-2xs);
 			}
 		}
 
@@ -162,7 +157,7 @@
 			@include oGridRespondTo($until: M) {
 				display: grid;
 				grid-template-columns: 1fr 1fr;
-				gap: oSpacingByName('s6');
+				gap: var(--o3-spacing-s);
 				margin: auto;
 				max-width: 256px;
 			}
@@ -180,10 +175,10 @@
 			display: flex;
 			flex-direction: column;
 			padding: 24px 20px;
-			background-color: oColorsByName('white-60');
+			background-color: var(--o3-color-palette-white-60);
 
 			a {
-				color: oColorsByName('black-90');
+				color: var(--o3-color-palette-black-90);
 				border-color: currentColor;
 				position: sticky;
 				top: 100vh;