@financial-times/n-myft-ui 37.0.0 → 38.0.0

package/myft/main.scss

@@ -1,12 +1,9 @@
-@import '@financial-times/o-normalise/main';
-@import '@financial-times/o-colors/main';
+@import '@financial-times/o3-foundation/css/core.css';
+@import '@financial-times/o3-button/css/core.css';
 @import '@financial-times/o-grid/main';
-@import '@financial-times/o-icons/main';
-@import '@financial-times/o-buttons/main';
-@import '@financial-times/o-editorial-typography/main';
+@import '@financial-times/o3-editorial-typography/css/core.css';
 @import '@financial-times/o-forms/main';
 @import '@financial-times/o-overlay/main';
-@import '@financial-times/o-spacing/main';
 
 $n-notification-is-silent: false !default;
 @import '@financial-times/n-notification/main';
@@ -24,392 +21,435 @@ $spacing-unit: 20px;
 
 .myft-ui,
 .n-myft-ui {
-	display: inline-block;
+  display: inline-block;
 }
 
 // experimental flash animation on header icon
 @include myftHeaderIconFlash;
 
+// FIXME: We couldn't find any usecases for this class
 // 'unfollow' button
 .myft-ui__button--manage,
 .myft-ui__button--myft-manage {
-	&[aria-pressed='true']::before {
-		@include oIconsContent(
-			'cross',
-			oColorsByName('white'),
-			28,
-			$iconset-version: 1
-		);
-	}
+  &[aria-pressed='true']::before {
+		content: '';
+		display: inline-block;
+		mask-image: var(--o3-icon-cross);
+		mask-repeat: no-repeat;
+		mask-size: contain;
+		width: 24px;
+		height: 24px;
+		background-color: var(--o3-color-palette-white);
+  }
 }
 
 .n-myft-ui--article-saved__list-select {
-	margin-bottom: 10px;
+  margin-bottom: 10px;
 }
 
 .o-overlay.o-overlay--myft-lists {
-	height: 100%;
-	width: 100%;
-	max-width: 640px;
+  height: 100%;
+  width: 100%;
+  max-width: 640px;
 
-	@include oGridRespondTo(S) {
-		height: auto;
-	}
+  @include oGridRespondTo(S) {
+    height: auto;
+  }
 }
 
 .myft-list-form__wrapper {
-	margin-bottom: 20px;
+  margin-bottom: 20px;
 
-	@include oGridRespondTo(M) {
-		display: flex;
-	}
+  @include oGridRespondTo(M) {
+    display: flex;
+  }
 
-	.o-overlay__content & { margin-bottom: 0; }
+  .o-overlay__content & {
+    margin-bottom: 0;
+  }
 }
 
 .myft-list-form {
-	overflow: hidden; // clearfix
-	@include oGridRespondTo(M) {
-		flex: 1;
-	}
+  overflow: hidden; // clearfix
+  @include oGridRespondTo(M) {
+    flex: 1;
+  }
 }
 
 .myft-list-form__button {
-	float: right;
+  float: right;
 }
 
 //Specificity war with Origami
 .mypage .myft-list-form__message,
 .o-overlay .myft-list-form__message {
-	@include oTypographySans(1);
-	background: oColorsByName('paper');
-	border-radius: 0;
-	margin: 3px 0 0;
-	padding: $spacing-unit 20px;
-
-	h3 {
-		@include oTypographySans($scale: 2, $weight: 'semibold');
-		margin: 0 5px 0 0;
-	}
-
-	p {
-		@include oTypographySans($scale: 2);
-		padding: oSpacingByName('s2') 0;
-		margin: 0;
-	}
-
-	h3,
-	p {
-		display: inline-block;
-		padding: 0;
-	}
+
+  line-height: var(--o3-font-lineheight-metric2-0);
+  font-size: var(--o3-font-size-metric2-0);
+  font-family: var(--o3-font-family-metric);
+  background: var(--o3-color-palette-paper);
+  border-radius: 0;
+  margin: 3px 0 0;
+  padding: $spacing-unit 20px;
+
+  h3 {
+
+    font-weight: var(--o3-font-weight-semibold);
+    line-height: var(--o3-font-lineheight-metric2-1);
+    font-size: var(--o3-font-size-metric2-1);
+    font-family: var(--o3-font-family-metric);
+    margin: 0 5px 0 0;
+  }
+
+  p {
+
+    line-height: var(--o3-font-lineheight-metric2-1);
+    font-size: var(--o3-font-size-metric2-1);
+    font-family: var(--o3-font-family-metric);
+    padding: var(--o3-spacing-4xs) 0;
+    margin: 0;
+  }
+
+  h3,
+  p {
+    display: inline-block;
+    padding: 0;
+  }
 }
 
 .myft-list-form__message + .myft-list-form__wrapper {
-	margin-top: $spacing-unit;
+  margin-top: $spacing-unit;
 }
 
 .o-overlay .myft-list-form__message {
-	border-top: 1px solid oColorsByName('black-20');
-	margin: 0 -20px;
+  border-top: 1px solid var(--o3-color-palette-black-20);
+  margin: 0 -20px;
 
-	&:first-child {
-		border-top: 0;
-		margin-top: -20px;
-	}
+  &:first-child {
+    border-top: 0;
+    margin-top: -20px;
+  }
 }
 
+// FIXME: we couldn't find usecases for these classes
 .myft-list-form__message--success {
-	h3 {
-		color: oColorsByName('jade');
-
-		&::before {
-			@include oIconsContent('tick', oColorsByName('jade'), 14, $iconset-version: 1);
-			content: '';
-			margin-right: 3px;
-		}
-	}
+  h3 {
+    color: var(--o3-color-palette-teal);
+
+    &::before {
+      display: inline-block;
+      mask-image: var(--o3-icon-tick);
+      mask-repeat: no-repeat;
+      mask-size: contain;
+      width: 24px;
+      height: 24px;
+      background-color: var(--o3-color-palette-teal);
+      content: '';
+      margin-right: 3px;
+    }
+  }
 }
 
 .myft-list-form-divider {
-	text-align: center;
-	margin-bottom: oSpacingByName('s8');
-	padding: oSpacingByName('s6') 0;
-
-	@include oGridRespondTo(M) {
-		display: flex;
-		position: relative;
-		justify-content: center;
-		align-items: center;
-		margin: 0;
-		padding: 0 oSpacingByName('s2');
-	}
-
-	&::after {
-		content: '';
-		display: block;
-		border-top: 1px solid oColorsByName('black-20');
-		margin-top: -10px;
-
-		@include oGridRespondTo(M) {
-			position: absolute;
-			top: 0;
-			height: 100%;
-			width: 1px;
-			margin-top: 0;
-			border-top: 0;
-			border-left: 1px solid oColorsByName('black-20');
-		}
-	}
+  text-align: center;
+  margin-bottom: var(--o3-spacing-m);
+  padding: var(--o3-spacing-s) 0;
+
+  @include oGridRespondTo(M) {
+    display: flex;
+    position: relative;
+    justify-content: center;
+    align-items: center;
+    margin: 0;
+    padding: 0 var(--o3-spacing-4xs);
+  }
+
+  &::after {
+    content: '';
+    display: block;
+    border-top: 1px solid var(--o3-color-palette-black-20);
+    margin-top: -10px;
+
+    @include oGridRespondTo(M) {
+      position: absolute;
+      top: 0;
+      height: 100%;
+      width: 1px;
+      margin-top: 0;
+      border-top: 0;
+      border-left: 1px solid var(--o3-color-palette-black-20);
+    }
+  }
 }
 
 .myft-list-form-divider__inner {
-	padding: 10px;
-	background-color: oColorsByName('white-60');
-
-	@include oGridRespondTo(M) {
-		z-index: 10;
-	}
+  padding: 10px;
+  background-color: var(--o3-color-palette-white-60);
 
-	.o-overlay__content & {
-		background-color: oColorsByName('white');
-	}
+  @include oGridRespondTo(M) {
+    z-index: 10;
+  }
 
+  .o-overlay__content & {
+    background-color: var(--o3-color-palette-white);
+  }
 }
 
 .myft-ui-create-list {
-	border-radius: 10px;
-	border: 1px solid oColorsByName('black-5');
-	background: oColorsByName('white-80');
-
-	&-content {
-		display: flex;
-		flex-direction: column;
-
-		h3 {
-			margin: 0;
-		}
-	}
-
-	&-buttons {
-		text-align: center;
-	}
+  border-radius: 10px;
+  border: 1px solid var(--o3-color-palette-black-5);
+  background: var(--o3-color-palette-white-80);
+
+  &-content {
+    display: flex;
+    flex-direction: column;
+
+    h3 {
+      margin: 0;
+    }
+  }
+
+  &-buttons {
+    text-align: center;
+  }
 }
 
 .myft-ui-create-list {
-	@include oButtons($opts: (
-		'sizes': ('big'),
-		'types': ('primary', 'secondary'),
-		'themes': ('inverse')
-	));
-
-	@include oForms($opts: (
-		'elements': ('text', 'checkbox', 'toggle')
-	));
-
-	border-radius: 10px;
-	border: 1px solid oColorsByName('black-5');
-	background: oColorsByName('white-80');
-
-	.o-overlay__heading {
-		border-radius: 10px 10px 0 0;
-		background: oColorsByName('white-60');
-		@include oTypographySans($scale: 2);
-		color: oColorsByName('black-80');
-	}
-
-	.o-overlay__content {
-		@include oTypographySans($scale: 0);
-		color: oColorsByName('black-80');
-		padding: 0;
-	}
-
-	.o-overlay__title {
-		margin: 8px 14px 0 8px;
-	}
-
-	&-container {
-		display: block;
-		width: 340px;
-		top: 115.5px;
-		left: 50px;
-	}
-
-	&-add {
-		border: 0;
-		background: none;
-		@include oTypographySans($scale: 1, $weight: 'semibold');
-		color: oColorsByName('black-80');
-
-		padding-left: 0;
-
-		&:hover {
-			text-decoration: underline;
-		}
-
-		&-collapsed::before {
-			content: '';
-			@include oIconsContent(
-				'plus',
-				oColorsByName('black-80'),
-				28,
-				$iconset-version: 1
-			);
-			vertical-align: middle;
-			margin-top: -2px;
-			margin-left: -8px;
-		}
-	}
-
-	&-add-description {
-		margin: oSpacingByName('s1') 0;
-	}
-
-	&-heading {
-		&::before {
-			content: '';
-			@include oIconsContent(
-				'tick',
-				oColorsByName('teal'),
-				32,
-				$iconset-version: 1
-				);
-				vertical-align: middle;
-				margin-top: -2px;
-			}
-		}
-
-	&-footer {
-		border-top: 1px solid oColorsByName('black-5');
-		padding: oSpacingByName('s4');
-	}
-
-	&-icon {
-		&::before {
-			content: "";
-			display: inline-block;
-			background-repeat: no-repeat;
-			background-size: contain;
-			background-position: 50%;
-			background-color: transparent;
-			background-image: url(https://www.ft.com/__origami/service/image/v2/images/raw/ftlogo-v1:brand-myft?source=next-article);
-			width: 42px;
-			height: 42px;
-			vertical-align: middle;
-			margin-top: -2px;
-		}
-
-		&-visually-hidden {
-			clip: rect(0 0 0 0);
-			clip-path: inset(50%);
-			height: 1px;
-			overflow: hidden;
-			position: absolute;
-			white-space: nowrap;
-			width: 1px;
-		}
-		}
-
-	&-form {
-		$field-spacing: 's4';
-		display: flex;
-		flex-direction: column;
-		width: calc(100% - 32px);
-		gap: oSpacingByName($field-spacing);
-		padding: 0 oSpacingByName($field-spacing) oSpacingByName('s3');
-
-		& >* {
-			flex: 1 1 auto;
-			margin-bottom: 0;
-		}
-
-		& >*.o-forms-field {
-			margin-bottom: 0;
-		}
-
-		.o-forms-input {
-			margin-top: 0;
-		}
-
-		&-toggle {
-			position: absolute;
-		}
-
-		&-toggle-label.o-forms-input__label::after {
-			background-color: oColorsByName('white');
-		}
-
-		&-buttons {
-			display: flex;
-			justify-content: flex-end;
-			@include oTypographySans($scale: 2);
-		}
-
-		&-public {
-			max-width: 300px;
-			padding: 0 3px;
-		}
-	}
-
-	&-lists {
-		padding: oSpacingByName('s4') oSpacingByName('s4') 0;
-		@include oTypographySans($scale: 1);
-		&-text {
-			@include oTypographySans($weight: 'semibold');
-			color: oColorsByName('black-80');
-			margin-bottom: oSpacingByName('s3');
-		}
-		&-container {
-			margin-top: 0;
-			max-height: 92px;
-			padding: 4px 2px;
-			overflow-y: auto;
-			@include oGridRespondTo($from: M) {
-				max-height: 126px;
-			}
-		}
-	}
-
-	&-label {
-		margin-top: 10px;
-	}
+
+  @include oForms(
+    $opts: (
+      'elements': (
+        'text',
+        'checkbox',
+        'toggle',
+      ),
+    )
+  );
+
+  border-radius: 10px;
+  border: 1px solid var(--o3-color-palette-black-5);
+  background: var(--o3-color-palette-white-80);
+
+  .o-overlay__heading {
+    border-radius: 10px 10px 0 0;
+    background: var(--o3-color-palette-white-60);
+
+    line-height: var(--o3-font-lineheight-metric2-1);
+    font-size: var(--o3-font-size-metric2-1);
+    font-family: var(--o3-font-family-metric);
+    color: var(--o3-color-palette-black-80);
+  }
+
+  .o-overlay__content {
+
+    line-height: var(--o3-font-lineheight-metric2-negative-1);
+    font-size: var(--o3-font-size-metric2-negative-1);
+    font-family: var(--o3-font-family-metric);
+    color: var(--o3-color-palette-black-80);
+    padding: 0;
+  }
+
+  .o-overlay__title {
+    margin: 8px 14px 0 8px;
+  }
+
+  &-container {
+    display: block;
+    width: 340px;
+    top: 115.5px;
+    left: 50px;
+  }
+
+  &-add {
+    border: 0;
+    background: none;
+
+    font-weight: var(--o3-font-weight-semibold);
+    line-height: var(--o3-font-lineheight-metric2-0);
+    font-size: var(--o3-font-size-metric2-0);
+    font-family: var(--o3-font-family-metric);
+    color: var(--o3-color-palette-black-80);
+
+    padding-left: 0;
+
+    &:hover {
+      text-decoration: underline;
+    }
+
+    &-collapsed::before {
+      --icon-size: 24px;
+      display: inline-block;
+      content: '';
+      mask-image: var(--o3-icon-plus);
+      mask-repeat: no-repeat;
+      mask-size: contain;
+      width: var(--icon-size);
+      height: var(--icon-size);
+      background-color: var(--o3-color-palette-black-80);
+      vertical-align: middle;
+      margin-top: -2px;
+      margin-left: -8px;
+    }
+  }
+
+  &-add-description {
+    margin: var(--o3-spacing-5xs) 0;
+  }
+
+  &-heading {
+    &::before {
+      --icon-size: 24px;
+      display: inline-block;
+      content: '';
+      mask-image: var(--o3-icon-tick);
+      mask-repeat: no-repeat;
+      mask-size: contain;
+      width: var(--icon-size);
+      height: var(--icon-size);
+      background-color: var(--o3-color-palette-teal);
+      vertical-align: middle;
+      margin-top: -2px;
+    }
+  }
+
+  &-footer {
+    border-top: 1px solid var(--o3-color-palette-black-5);
+    padding: var(--o3-spacing-2xs);
+  }
+
+  &-icon {
+    &::before {
+      content: '';
+      display: inline-block;
+      background-repeat: no-repeat;
+      background-size: contain;
+      background-position: 50%;
+      background-color: transparent;
+      background-image: url('https://www.ft.com/__origami/service/image/v2/images/raw/ftlogo-v1:brand-myft?source=next-article');
+      width: 42px;
+      height: 42px;
+      vertical-align: middle;
+      margin-top: -2px;
+    }
+
+    &-visually-hidden {
+      clip: rect(0 0 0 0);
+      clip-path: inset(50%);
+      height: 1px;
+      overflow: hidden;
+      position: absolute;
+      white-space: nowrap;
+      width: 1px;
+    }
+  }
+
+  &-form {
+    display: flex;
+    flex-direction: column;
+    width: calc(100% - 32px);
+    gap: var(--o3-spacing-2xs);
+    padding: 0 var(--o3-spacing-2xs) var(--o3-spacing-3xs);
+
+    & > * {
+      flex: 1 1 auto;
+      margin-bottom: 0;
+    }
+
+    & > *.o-forms-field {
+      margin-bottom: 0;
+    }
+
+    .o-forms-input {
+      margin-top: 0;
+    }
+
+    &-toggle {
+      position: absolute;
+    }
+
+    &-toggle-label.o-forms-input__label::after {
+      background-color: var(--o3-color-palette-white);
+    }
+
+    &-buttons {
+      display: flex;
+      justify-content: flex-end;
+
+      line-height: var(--o3-font-lineheight-metric2-1);
+      font-size: var(--o3-font-size-metric2-1);
+      font-family: var(--o3-font-family-metric);
+    }
+
+    &-public {
+      max-width: 300px;
+      padding: 0 3px;
+    }
+  }
+
+  &-lists {
+    padding: var(--o3-spacing-2xs) var(--o3-spacing-2xs) 0;
+
+    line-height: var(--o3-font-lineheight-metric2-0);
+    font-size: var(--o3-font-size-metric2-0);
+    font-family: var(--o3-font-family-metric);
+    &-text {
+
+      font-weight: var(--o3-font-weight-semibold);
+      font-family: var(--o3-font-family-metric);
+      color: var(--o3-color-palette-black-80);
+      margin-bottom: var(--o3-spacing-3xs);
+    }
+    &-container {
+      margin-top: 0;
+      max-height: 92px;
+      padding: 4px 2px;
+      overflow-y: auto;
+      @include oGridRespondTo($from: M) {
+        max-height: 126px;
+      }
+    }
+  }
+
+  &-label {
+    margin-top: 10px;
+  }
 }
 
 .share-nav {
-	&.data-overlap-initialised {
-		.o-overlay {
-			transition: opacity 0.15s ease-in;
-			opacity: 0;
-			z-index: -1;
-		}
-	}
-	.myft-notification {
-		background: oColorsByName('white-80');
-		box-sizing: border-box;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		position: absolute;
-		border-radius: 5px;
-		font-family: MetricWeb, sans-serif;
-		font-size: 18px;
-	}
-
-	.share-nav__vertical {
-		.myft-notification {
-			top: 175px;
-			width: 340px;
-			height: 44px;
-			left: 50px;
-		}
-	}
-
-	.share-nav__horizontal {
-		.myft-notification {
-			top: -52px;
-			width: 340px;
-			height: 44px;
-			z-index: 10;
-		}
-	}
+  &.data-overlap-initialised {
+    .o-overlay {
+      transition: opacity 0.15s ease-in;
+      opacity: 0;
+      z-index: -1;
+    }
+  }
+  .myft-notification {
+    background: var(--o3-color-palette-white-80);
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: absolute;
+    border-radius: 5px;
+    font-family: MetricWeb, sans-serif;
+    font-size: 18px;
+  }
+
+  .share-nav__vertical {
+    .myft-notification {
+      top: 175px;
+      width: 340px;
+      height: 44px;
+      left: 50px;
+    }
+  }
+
+  .share-nav__horizontal {
+    .myft-notification {
+      top: -52px;
+      width: 340px;
+      height: 44px;
+      z-index: 10;
+    }
+  }
 }