@financial-times/cp-content-pipeline-ui 7.11.0 → 8.0.0

package/src/components/content-tree/Clip/client/main.scss

@@ -1,6 +1,4 @@
-@import "@financial-times/o-icons/main";
-@import "@financial-times/o-colors/main";
-@import "@financial-times/o-typography/main";
+@import '@financial-times/o3-foundation/css/core.css';
 @import "@financial-times/o-grid/main";
 @import '@financial-times/o-loading/main';
 @import "./progressBar.scss";
@@ -57,10 +55,10 @@
 		position: absolute;
 		justify-content: space-between;
 		align-items: flex-end;
-		padding: oSpacingByName('s1') oSpacingByName('s2') oSpacingByName('s6') oSpacingByName('s2');
+		padding: var(--o3-spacing-5xs) var(--o3-spacing-4xs) var(--o3-spacing-s) var(--o3-spacing-4xs);
 		box-sizing: border-box;
 		@include oGridRespondTo($from: L) {
-			padding: oSpacingByName('s1') oSpacingByName('s6') oSpacingByName('s6') oSpacingByName('s6')
+			padding: var(--o3-spacing-5xs) var(--o3-spacing-s) var(--o3-spacing-s) var(--o3-spacing-s)
 		}
 		background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(0, 0, 0, 0.75) 100%);
 		&--fade-out:not(:has(button:focus)) {
@@ -75,21 +73,37 @@
 		top: 50%;
 		left: 50%;
 		transform: translate(-50%,-50%);
-		color: oColorsByName('white');
+		color: var(--o3-color-palette-white);
 		font-family: MetricWeb;
 		line-height: 1;
 	}
 
-	@mixin cp-clip__control-icon {
+	@mixin cp-clip__control-circle() {
 		background-color: rgba(0, 0, 0, 0.75);
 		border: 2px solid transparent;
 		border-radius: 50%;
 		margin: auto;
-		display: block;
+		display: flex;
+		justify-content: center;
+		align-items: center;
 		width: 72px;
 		height: 72px;
-		background-size: 44px;
-		margin-bottom: oSpacingByName('s2');
+		margin-bottom: var(--o3-spacing-4xs);
+	}
+
+	@mixin cp-clip__control-icon($icon){
+		&:hover, &:focus {
+			border-color: var(--o3-color-palette-white);
+		}
+
+		&::after {
+			content: "";
+			mask-image: var($icon);
+			height: 44px;
+			width: 44px;
+	
+			background-color: var(--o3-color-palette-white);
+			}
 	}
 
 
@@ -98,33 +112,20 @@
 	}
 
 	.cp-clip__play-icon {
-		// The icon will be cached in the FT-App
-		// See: https://github.com/Financial-Times/ft-app/blob/main/tools/webpack/client/webpack.config.common.js#L218
-		@include oIconsContent($icon-name: 'play', $size: 20%, $color: oColorsByName('white'));
-		@include cp-clip__control-icon;
-		&:hover, &:focus {
-			border-color: white;
-		}
-		background-position: 55%;
+		@include cp-clip__control-circle();
+		@include cp-clip__control-icon(--o3-icon-play);
 	}
 
 	.cp-clip__loading-text,
 	.cp-clip__play-text {
-		@include oTypographySans(-1, $weight: 'semibold');
-		padding: 0 oSpacingByName('s1');
+		padding: 0 var(--o3-spacing-5xs);
 		background-color: rgba(0, 0, 0, 0.75);
 		display: block;
 	}
 
 	.cp-clip__replay-icon {
-		// The icon will be cached in the FT-App
-		// See: https://github.com/Financial-Times/ft-app/blob/main/tools/webpack/client/webpack.config.common.js#L218
-		@include oIconsContent($icon-name: 'refresh', $size: 20%, $color: oColorsByName('white'));
-		@include cp-clip__control-icon;
-		&:hover, &:focus {
-			border-color: white;
-		}
-		background-position: 50%;
+		@include cp-clip__control-circle();
+		@include cp-clip__control-icon(--o3-icon-refresh);
 	}
 
 	// fade out the bottom controls only when they are not focussed
@@ -152,15 +153,23 @@
 	}
 
 	.cp-clip__playpause-icon-pause {
-		// The icon will be cached in the FT-App
-		// See: https://github.com/Financial-Times/ft-app/blob/main/tools/webpack/client/webpack.config.common.js#L218
-		@include oIconsContent($icon-name: 'pause', $size: 32px, $color: oColorsByName('white'));
+		display: inline-block;
+		width: 32px;
+		height: 32px;
+		background-color: var(--o3-color-palette-white);
+		mask-image: var(--o3-icon-pause);
+		mask-repeat: no-repeat;
+		mask-size: contain;
 	}
 
 	.cp-clip__playpause-icon-play {
-		// The icon will be cached in the FT-App
-		// See: https://github.com/Financial-Times/ft-app/blob/main/tools/webpack/client/webpack.config.common.js#L218
-		@include oIconsContent($icon-name: 'play', $size: 32px, $color: oColorsByName('white'));
+		display: inline-block;
+		width: 32px;
+		height: 32px;
+		background-color: var(--o3-color-palette-white);
+		mask-image: var(--o3-icon-play);
+		mask-repeat: no-repeat;
+		mask-size: contain;
 	}
 
 	.cp-clip__playpause-icon {
@@ -169,16 +178,16 @@
 
 	.cp-clip__playpause-icon-autoplay {
 		border-radius: 50%;
-		border: 2px solid oColorsByName('ft-grey');
+		border: 2px solid var(--o3-color-palette-ft-grey);
 		padding:0px;
-		margin-left:oSpacingByName('s2');
+		margin-left:var(--o3-spacing-4xs);
 	}
 
 	.cp-clip__playpause-icon-autoplay-progress {
 		width: 100%;
 		height: 100%;
 		border-radius: 50%;
-		border: solid 2px oColorsByName('white');
+		border: solid 2px var(--o3-color-palette-white);
 		display: inline-block;
 		margin: -2px;
 		box-sizing: content-box;
@@ -188,11 +197,24 @@
 		flex: 0 32px
 	}
 	.cp-clip__mute-icon {
-		@include oIconsContent($icon-name: 'audio', $size: 32px, $color: oColorsByName('white'));
+		display: inline-block;
+		width: 32px;
+		height: 32px;
+		background-color: var(--o3-color-palette-white);
+		mask-image: var(--o3-icon-volume);
+		mask-repeat: no-repeat;
+		mask-size: contain;
+
 		border: none;
 	}
 	.cp-clip__mute-icon[data-mute="true"] {
-		@include oIconsContent($icon-name: 'mute', $size: 32px, $color: oColorsByName('white'));
+		display: inline-block;
+		width: 32px;
+		height: 32px;
+		background-color: var(--o3-color-palette-white);
+		mask-image: var(--o3-icon-volume-mute);
+		mask-repeat: no-repeat;
+		mask-size: contain;
 	}
 	.cp-clip__video-overlay [data-test-id="cp-clip__mute-icon"] {
 		display: none;
@@ -200,24 +222,52 @@
 
 	.cp-clip__no-audio {
 		position: absolute;
-		@include oIconsContent($icon-name: 'mute', $size: 32px, $color: oColorsMix('black', 'white', 40));
+
+		display: inline-block;
+		width: 32px;
+		height: 32px;
+		background-color: #999999 /* mix: black, white, 40*/;
+		mask-image: var(--o3-icon-volume-mute);
+		mask-repeat: no-repeat;
+		mask-size: contain;
+
 		right: 20px;
 		border: none;
 	}
 
 	.cp-clip__closed-caption {
 		position: absolute;
-		@include oIconsContent($icon-name: 'closed-captions-off', $size: 32px, $color: oColorsByName('white'));
+
+		display: inline-block;
+		width: 32px;
+		height: 32px;
+		background-color: var(--o3-color-palette-white);
+		mask-image: var(--o3-icon-closed-captions-off);
+		mask-repeat: no-repeat;
+		mask-size: contain;
+
 		right: 50px;
 		border: none;
 	}
 
 	.cp-clip__closed-caption:hover {
-		@include oIconsContent($icon-name: 'closed-captions-on', $size: 32px, $color: oColorsByName('white'));
+		display: inline-block;
+		width: 32px;
+		height: 32px;
+		background-color: var(--o3-color-palette-white);
+		mask-image: var(--o3-icon-closed-captions-on);
+		mask-repeat: no-repeat;
+		mask-size: contain;
 	}
 
 	.cp-clip__closed-caption[data-display-closed-captions] {
-		@include oIconsContent($icon-name: 'closed-captions-on', $size: 32px, $color: oColorsByName('white'));
+		display: inline-block;
+		width: 32px;
+		height: 32px;
+		background-color: var(--o3-color-palette-white);
+		mask-image: var(--o3-icon-closed-captions-on);
+		mask-repeat: no-repeat;
+		mask-size: contain;
 	}
 
 	@keyframes fade-out {
@@ -231,10 +281,7 @@
 	}
 
 	.cp-clip__loading-icon-bg {
-		@include cp-clip__control-icon;
-		display: flex;
-		align-items: center;
-		justify-content: center;
+		@include cp-clip__control-circle();
 	}
 
 	.o-loading {

package/src/components/content-tree/Clip/client/progressBar.scss

@@ -1,3 +1,4 @@
+@import '@financial-times/o3-foundation/css/core.css';
 .cp-clip__video-progress-bar {
   pointer-events: none;
   position: absolute;
@@ -17,7 +18,7 @@
     width: 100%;
     height: 3px;
     transition: margin 0.1s linear, height 0.1s linear;
-    background-color: oColorsByName('ft-grey');
+    background-color: var(--o3-color-palette-ft-grey);
     
     @include oGridRespondTo(L) {
       height: 4px;
@@ -42,16 +43,16 @@
         display: block;
         position: absolute;
         transform: translate($progress-time-left-offset, calc($progress-time-height-offset - 2px));
-        color: oColorsByName('white');
-        font-size: 14px;
-        font-family: MetricWeb;
+        color: var(--o3-color-palette-white);
+        font-size: var(--o3-font-size-metric2-negative-1);
+        font-family: var(--o3-font-family-metric);
         @include oGridRespondTo(L) {
           transform: translate($progress-time-left-offset, $progress-time-height-offset);
         }
       }
     }
     div {
-      background-color: oColorsByName('teal-70');
+      background-color: var(--o3-color-palette-teal-70);
       height: 100%;
     }
     .cp-clip__progress-ended {

package/src/components/content-tree/Clip/components/Caption.tsx

@@ -11,7 +11,10 @@ export const Caption: React.FC<CaptionProps> = ({ caption, credits }) => {
   const separator = caption && credits ? ' ' : null
 
   return (
-    <div data-cp-clip-caption className="cp-clip__caption">
+    <div
+      data-cp-clip-caption
+      className="cp-clip__caption o3-editorial-typography-caption"
+    >
       {caption}
       {separator}
       {credits && <Credit credits={credits} />}

package/src/components/content-tree/Clip/components/VideoDescription.tsx

@@ -27,7 +27,7 @@ export const VideoDescription: React.FC<VideoDescriptionProps> = ({
       data-o-expander-expanded-toggle-text="<span class='o-expander__visually-hidden'>Hide video description</span>"
     >
       <button data-trackable="toggle-open-close" className="o-expander__toggle">
-        <span className="o-expander__visually-hidden">
+        <span className="o-expander__visually-hidden o3-type-detail">
           Show video description
         </span>
       </button>
@@ -35,28 +35,28 @@ export const VideoDescription: React.FC<VideoDescriptionProps> = ({
       {description && accessibility?.transcript && (
         <div className="o-expander__content">
           <div className="video-description__tabs">
-            <span>
-              <button
-                id="description-button"
-                className="video-description__tabs-description active"
-              >
-                Video description
-              </button>
-              <button
-                id="transcript-button"
-                className="video-description__tabs-transcript"
-              >
-                Transcript
-              </button>
-            </span>
+            <button
+              id="description-button"
+              className="video-description__tabs-description active"
+            >
+              Video description
+            </button>
+            <button
+              id="transcript-button"
+              className="video-description__tabs-transcript"
+            >
+              Transcript
+            </button>
           </div>
 
           <div className="video-description" id="description-tab">
-            <p className="video-description__text">{description}</p>
+            <p className="video-description__text o3-type-detail">
+              {description}
+            </p>
           </div>
 
           <div className="video-description" id="transcript-tab">
-            <div className="video-description__text">
+            <div className="video-description__text o3-type-detail">
               <RichTextComponent
                 structuredContent={accessibility.transcript.structured}
               />
@@ -70,10 +70,12 @@ export const VideoDescription: React.FC<VideoDescriptionProps> = ({
           <div className="video-description">
             <h4 className="video-description__title">{title}</h4>
             {description && (
-              <p className="video-description__text">{description}</p>
+              <p className="video-description__text o3-type-detail">
+                {description}
+              </p>
             )}
             {accessibility?.transcript && (
-              <div className="video-description__text transcript">
+              <div className="video-description__text o3-type-detail transcript">
                 <RichTextComponent
                   structuredContent={accessibility.transcript.structured}
                 />

package/src/components/content-tree/Clip/components/VideoInfoBox.tsx

@@ -14,7 +14,9 @@ export const VideoInfoBox: React.FC = () => {
         data-trackable="toggle-open-close"
         className="o-expander__toggle o-expander__toggle-empty"
       >
-        <span className="o-expander__visually-hidden">Show video info</span>
+        <span className="o-expander__visually-hidden o3-type-detail">
+          Show video info
+        </span>
       </button>
       <div className="o-expander__content video-info"></div>
     </div>

package/src/components/content-tree/Clip/components/_caption.scss

@@ -1,9 +1,8 @@
+@import '@financial-times/o3-foundation/css/core.css';
 .cp-clip__caption {
-  @include oTypographyCaption();
   margin-top: 0;
-  color: oColorsByName('black-70');
   z-index: -1;
-  margin-top: oSpacingByName('s1');
+  margin-top: var(--o3-spacing-5xs);
   position: relative;
 }
 // When caption is present with the button description

package/src/components/content-tree/Clip/components/_clip-tag.scss

@@ -1,3 +1,4 @@
+@import '@financial-times/o3-foundation/css/core.css';
 .cp-clip__video {
   object-fit: contain; // this will maintin the video's aspect ratio
   grid-row-start: 1;
@@ -23,7 +24,7 @@
   .o-expander__toggle[aria-expanded='false'] {
     background-image: url('https://www.ft.com/__origami/service/image/v2/images/raw/fticon-v1%3Amedia-description?source=cp-content-pipeline');
     background-repeat: no-repeat;
-    background-color: oColorsByName('black-5');
+    background-color: var(--o3-color-palette-black-5);
     background-position: center;
     display: block;
     // Icon size is used also in _caption.scss

package/src/components/content-tree/Clip/components/_video-description.scss

@@ -1,27 +1,31 @@
+@import '@financial-times/o3-foundation/css/core.css';
 .video-description {
-  background: oColorsByName('black-5');
+  background: var(--o3-color-palette-black-5);
   overflow-y: scroll;
-  min-width: oSpacingByName('s8');
+  min-width: var(--o3-spacing-m);
   width: 100%;
   box-sizing: border-box;
-  @include oTypographySans(-1);
-  color: oColorsByName('ft-grey');
-  padding: 6px oSpacingByName('s6') oSpacingByName('s2') 15px;
-  @include oGridRespondTo($from: L) {
-    @include oTypographySans(1);
-  }
+  
+  color: var(--o3-color-palette-ft-grey);
+  padding: 6px var(--o3-spacing-s) var(--o3-spacing-4xs) 15px;
+
   position: relative;
 
   &.o-expander__content--expanded {
     flex-direction: column;
-    margin-top: oSpacingByName('s1');
+    margin-top: var(--o3-spacing-5xs);
   }
 
-  .video-description__title {
+  .video-description__title { 
     margin: 0;
     line-height: 32px;
-    font-weight: 600;
     padding-right: 1ch;
+    margin-bottom: var(--o3-spacing-4xs);
+
+    font-weight: var(--o3-font-weight-semibold);
+    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);
   }
 
   &#transcript-tab {
@@ -39,57 +43,56 @@
       background: none;
     }
     &::-webkit-scrollbar-thumb {
-      background-color: oColorsByName('ft-grey');
+      background-color: var(--o3-color-palette-ft-grey);
       border-radius: 5px;
     }
-    &.transcript {
-      @include oTypographySans(0);
-    }
   }
 }
 
 .video-description::-webkit-scrollbar-thumb {
-  background: oColorsByName('black-50');
+  background: var(--o3-color-palette-black-50);
   border-radius: 10px;
 }
 
 .video-description::-webkit-scrollbar {
-  width: oSpacingByName('s1');
+  width: var(--o3-spacing-5xs);
 }
 
 .video-description__tabs {
-  @include oTypographySans(-1);
   display: flex;
-  justify-content: space-between;
-  margin-top: oSpacingByName('s1');
-  background: oColorsByName('black-5');
-  border-bottom: oColorsByName('black-20') solid;
-  font-size: 14px;
+  gap: var(--o3-spacing-s);
+
+  padding: 0 var(--o3-spacing-2xs);
+  margin-top: var(--o3-spacing-5xs);
+  background: var(--o3-color-palette-black-5);
+  border-bottom: var(--o3-color-palette-black-20) solid;
   height: 30px;
 
   .video-description__tabs-description,
   .video-description__tabs-transcript {
-    @include oTypographySans(-1, $weight: 'regular');
+    font-weight: var(--o3-type-detail-font-weight);
+    line-height: var(--o3-type-detail-line-height);
+    font-size: var(--o3-type-detail-font-size);
+    font-family: var(--o3-type-detail-font-family);
+
     background-color: transparent;
     border-width: 0;
     padding: 0;
 
     &.active {
-      @include oTypographySans(-1, $weight: 'semibold');
-      border-bottom: black solid 2px;
-      padding-bottom: 5px;
-      letter-spacing: -0.25px;
-    }
-  }
-  .video-description__tabs-description {
-    margin: oSpacingByName('s2') 0px 2px oSpacingByName('s4');
-    position: absolute;
-  }
+      font-weight: var(--o3-font-weight-semibold);
+      position: relative;
 
-  .video-description__tabs-transcript {
-    @include oTypographySans(-1, $weight: 'regular');
-    left: 140px;
-    margin-top: oSpacingByName('s2');
-    position: absolute;
+      &::after {
+        content: '';
+        display: block;
+        width: 100%;
+        height: 2px;
+        background-color: var(--o3-color-palette-black);
+        position: absolute;
+        bottom: 0;
+        left: 0;
+      }
+    }
   }
 }

package/src/components/content-tree/Clip/components/_video-info-box.scss

@@ -1,8 +1,9 @@
+@import '@financial-times/o3-foundation/css/core.css';
 .o-expander__info-box {
-  color: oColorsByName('white');
+  color: var(--o3-color-palette-white);
   height: fit-content;
   width: 100%;
-  min-width: oSpacingByName('s8');
+  min-width: var(--o3-spacing-m);
   z-index: 1;
   display: flex;
   grid-row-start: 1;
@@ -23,43 +24,30 @@
 }
 
 .video-info {
-  background: rgba(oColorsByName('black'), 0.6);
-  background: oColorsByName('wheat');
-  min-width: oSpacingByName('s8');
-  padding: oSpacingByName('s4');
+  background: var(--o3-color-palette-wheat);
+  min-width: var(--o3-spacing-m);
+  padding: var(--o3-spacing-2xs);
   width: 100%;
   box-sizing: border-box;
-  @include oTypographySans(0);
-  color: oColorsByName('black');
-  padding: oSpacingByName('s3') oSpacingByName('s4') oSpacingByName('s4');
-  @include oGridRespondTo($from: L) {
-    @include oTypographySans(1);
-  }
+  
+  color: var(--o3-color-use-case-support-text);
 
-  .video-info__title {
-    margin: 0;
-    line-height: 32px;
-  }
+  padding: var(--o3-spacing-3xs) var(--o3-spacing-2xs) var(--o3-spacing-2xs);
 
-  .video-info__content {
-    overflow-y: auto;
-    max-height: 100%;
-    margin: 0;
-    &::-webkit-scrollbar {
-      width: 5px;
-    }
-    &::-webkit-scrollbar-track {
-      background: none;
-    }
-    &::-webkit-scrollbar-thumb {
-      background-color: oColorsByName('white');
-      border-radius: 5px;
-    }
+  font-family: var(--o3-type-detail-font-family);
+  font-weight: var(--o3-type-detail-font-weight);
+  font-size: var(--o3-type-detail-font-size);
+  line-height: var(--o3-type-detail-line-height);
+
+  @include oGridRespondTo($from: L) {
+    font-family: var(--o3-type-body-base-font-family);
+    font-weight: var(--o3-type-body-base-font-weight);
+    font-size: var(--o3-type-body-base-font-size);
+    line-height: var(--o3-type-body-base-line-height);
   }
 }
 
 .o-expander__toggle {
-  @include oTypographySans(0);
   position: absolute;
   right: 0;
   border: none;
@@ -70,18 +58,25 @@
 }
 
 .o-expander__toggle[aria-expanded='true'] {
-  @include oIconsContent('cross', oColorsByName('black'), 30);
+  display: inline-block;
+  width: 30px;
+  height: 30px;
+  background-color: var(--o3-color-palette-black);
+  mask-image: var(--o3-icon-cross);
+  mask-repeat: no-repeat;
+  mask-size: 20px;
+  mask-position: center;
+
   z-index: 1;
-  background-size: 20px;
 }
 
 .o-expander__toggle[aria-expanded='false'] {
-  margin-top: oSpacingByName('s1');
+  margin-top: var(--o3-spacing-5xs);
 }
 
 .cp-clip__offline-message {
   // Prevent clash with the X button.
-  margin-right: oSpacingByName('s4');
+  margin-right: var(--o3-spacing-2xs);
   margin-left: -10px;
   display: flex;
   align-items: center;