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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@financial-times/cp-content-pipeline-ui",
-  "version": "7.11.0",
+  "version": "8.0.0",
   "description": "",
   "main": "lib/index.js",
   "scripts": {
@@ -15,16 +15,11 @@
   "devDependencies": {
     "@babel/preset-env": "^7.22.5",
     "@babel/preset-react": "^7.22.5",
-    "@dotcom-tool-kit/npm": "^3.3.2",
     "@financial-times/content-tree": "github:financial-times/content-tree#056af70",
     "@financial-times/n-scrollytelling-image": "^1.1.0",
-    "@financial-times/o-colors": "^6.6.2",
-    "@financial-times/o-grid": "^6.1.5",
-    "@financial-times/o-icons": "^7.7.0",
-    "@financial-times/o-share": "^10.0.1",
-    "@financial-times/o-spacing": "^3.2.3",
+    "@financial-times/o-grid": "^6.1.8",
+    "@financial-times/o-share": "^11.0.0",
     "@financial-times/o-tracking": "^4.5.0",
-    "@financial-times/o-typography": "^7.4.1",
     "@financial-times/x-engine": "^14.6.5",
     "@storybook/addon-essentials": "^7.0.24",
     "@storybook/addon-interactions": "^7.0.24",
@@ -53,17 +48,22 @@
     "webpack": "^5.88.1"
   },
   "dependencies": {
+    "@dotcom-tool-kit/npm": "^4.2.11",
     "@financial-times/ft-date-format": "^2.1.0",
-    "@financial-times/o-expander": "^6.3.1",
-    "@financial-times/o-labels": "^6.5.8",
+    "@financial-times/o-expander": "^7.0.0",
+    "@financial-times/o-labels": "^7.0.0",
     "@financial-times/o-loading": "^5.2.3",
-    "@financial-times/o-teaser": "^6.4.1",
+    "@financial-times/o-teaser": "^7.0.1",
+    "@financial-times/o3-button": "^3.0.1",
+    "@financial-times/o3-editorial-typography": "^3.1.1",
+    "@financial-times/o3-foundation": "^3.2.2",
     "@financial-times/o3-tooltip": "^1.0.4",
+    "@financial-times/o-visual-effects": "^4.2.1",
+    "@financial-times/x-interaction": "^15.0.0",
     "@financial-times/x-teaser": "^14.6.5",
     "classnames": "^2.5.1"
   },
   "peerDependencies": {
-    "@financial-times/x-interaction": ">=14",
     "react": "16 || 17 || 18"
   },
   "x-dash": {

package/src/components/ArticleInfo/index.tsx

@@ -1,24 +1,24 @@
-import React from "react"
-import Byline from "../Byline"
-import type { ArticleQuery } from "@financial-times/cp-content-pipeline-client"
-import ftDateFormat from "@financial-times/ft-date-format"
+import React from 'react'
+import Byline from '../Byline'
+import type { ArticleQuery } from '@financial-times/cp-content-pipeline-client'
+import ftDateFormat from '@financial-times/ft-date-format'
 
 type ArticleInfoProps = {
-  content: ArticleQuery["content"]
+  content: ArticleQuery['content']
 }
 
 const ArticleInfo: React.FC<React.PropsWithChildren<ArticleInfoProps>> = ({
   children,
   content,
 }) => {
-  const isLiveBlogPackage = content.__typename === "LiveBlogPackage"
+  const isLiveBlogPackage = content.__typename === 'LiveBlogPackage'
   const formattedFirstPublishedDate = ftDateFormat.format(
     new Date(content.firstPublishedDate),
-    "date"
+    'date'
   )
   const formattedPublishedDate = ftDateFormat.format(
     new Date(content.publishedTimestamp),
-    "date"
+    'date'
   )
 
   const displayPublishedDate = content.publishedDate && !isLiveBlogPackage
@@ -33,7 +33,7 @@ const ArticleInfo: React.FC<React.PropsWithChildren<ArticleInfoProps>> = ({
     <div className="article-info">
       <div className="article-info__time-byline-row">
         <div className="article-info__time-byline-content">
-          {content.byline && content.__typename !== "Audio" && (
+          {content.byline && content.__typename !== 'Audio' && (
             <Byline
               structuredContent={content.byline}
               showEditedBy={isLiveBlogPackage}
@@ -50,9 +50,9 @@ const ArticleInfo: React.FC<React.PropsWithChildren<ArticleInfoProps>> = ({
               <time
                 data-o-component="o-date"
                 {...(isPublishedMoreThanOneDayAgo
-                  ? { "data-o-date-format": "MMM d yyyy" }
+                  ? { 'data-o-date-format': 'MMM d yyyy' }
                   : {})}
-                className="article-info__timestamp o-date"
+                className="article-info__timestamp o3-editorial-typography-byline-timestamp o-date"
                 dateTime={content.firstPublishedDate}
               >
                 {formattedFirstPublishedDate}
@@ -64,9 +64,9 @@ const ArticleInfo: React.FC<React.PropsWithChildren<ArticleInfoProps>> = ({
                 <time
                   data-o-component="o-date"
                   data-o-date-format={
-                    isPublishedMoreThanOneDayAgo ? "MMM d yyyy, HH:mm" : "HH:mm"
+                    isPublishedMoreThanOneDayAgo ? 'MMM d yyyy, HH:mm' : 'HH:mm'
                   }
-                  className="article-info__timestamp o-date"
+                  className="article-info__timestamp o3-editorial-typography-byline-timestamp o-date"
                   dateTime={content.publishedDate}
                 >
                   {formattedPublishedDate}

package/src/components/BackToTopButton/client/index.tsx

@@ -120,8 +120,9 @@ const BackToTop: React.FC<BackToTopProps> = ({
         ref={element}
         type="button"
         onClick={handleClick}
-        className="back-to-top__button o-buttons o-visual-effects-shadow-high o-buttons--big o-buttons--primary o-buttons--mono o-buttons-icon o-buttons-icon--arrow-up"
+        className="o3-button o-visual-effects-shadow-high o3-button--big o3-button--primary o3-button-icon o3-button-icon--chevron-up"
         aria-live="polite"
+        data-o3-theme="mono"
         {...attributes}
       >
         Back to top

package/src/components/BackToTopButton/client/main.scss

@@ -1,22 +1,10 @@
-@import '@financial-times/o-buttons/main';
+@import '@financial-times/o3-foundation/css/core.css';
+@import '@financial-times/o3-button/css/core.css';
 @import '@financial-times/o-visual-effects/main';
 @import '@financial-times/o-header/main';
-@import '@financial-times/o-spacing/main';
 @import '@financial-times/o-grid/main';
 @import 'n-ui-foundations/mixins';
-@include oButtons(
-	$opts: (
-		'sizes': (
-			'big'
-		),
-		'types': (
-			'primary'
-		),
-		'icons': (
-			'arrow-up'
-		)
-	)
-);
+
 @include oVisualEffects(
 	$opts: (
 		'shadows': (
@@ -26,21 +14,15 @@
 );
 
 $button-height: 40px;
-$notification-top: calc(100vh - $button-height - oSpacingByName('s6'));
-
-.back-to-top__button {	
-  height: $button-height;
-  background-color: oColorsByName('black');
-}
+$notification-top: calc(100vh - $button-height - var(--o3-spacing-s));
 
 .back-to-top__container {
   text-align: center;
   width: 100%;
   height: 0;
-  @include nUiZIndexFor('sticky-header');
   position: sticky;
   top: $notification-top;
-  z-index:90!important; 
+  z-index: var(--o3-z-nav-popover);
   @media print {
 		display: none;
 	}

package/src/components/Body/__snapshots__/index.test.tsx.snap

@@ -33,7 +33,7 @@ exports[`Body content type override renderers renders override renderer for Vide
 exports[`Body default renderers renders default renderer for Article 1`] = `
 <DocumentFragment>
   <article
-    class="n-content-body"
+    class="n-content-body o3-type-body-content-base"
   >
     <p>
       Lorem ipsum dolor sit amet
@@ -45,7 +45,7 @@ exports[`Body default renderers renders default renderer for Article 1`] = `
 exports[`Body default renderers renders default renderer for Audio 1`] = `
 <DocumentFragment>
   <div
-    class="article__content-body n-content-body js-article__content-body"
+    class="article__content-body n-content-body js-article__content-body o3-type-body-content-base"
     data-attribute="article-content-body"
     data-trackable="article-body"
   >
@@ -75,7 +75,7 @@ exports[`Body default renderers renders default renderer for Audio 1`] = `
       </audio>
     </div>
     <article
-      class="n-content-body"
+      class="n-content-body o3-type-body-content-base"
     >
       <p>
         Lorem ipsum dolor sit amet
@@ -96,7 +96,7 @@ exports[`Body default renderers renders default renderer for Audio 1`] = `
 exports[`Body default renderers renders default renderer for ContentPackage 1`] = `
 <DocumentFragment>
   <article
-    class="article n-content-body js-article__content-body n-content-body"
+    class="article n-content-body js-article__content-body o3-type-body-content-base"
     data-attribute="article-content-body"
     data-content-id="00000000-0000-0000-0000-000000000000"
     id="site-content"
@@ -169,10 +169,10 @@ exports[`Body default renderers renders default renderer for LiveBlogPackage 1`]
           >
             <span>
               <span
-                class="x-live-blog-post__timestamp-container"
+                class="x-live-blog-post__timestamp-container o3-type-detail"
               >
                 <time
-                  class="o-date x-live-blog-post__timestamp"
+                  class="o-date"
                   data-o-component="o-date"
                   data-o-date-format="MMM dd, HH:mm"
                   data-o-date-text-case="sentence"
@@ -192,18 +192,18 @@ exports[`Body default renderers renders default renderer for LiveBlogPackage 1`]
             class="x-live-blog-post__byline"
           >
             <p
-              class="article-info__byline"
+              class="article-info__byline o3-editorial-typography-byline"
             />
           </div>
         </div>
       </div>
       <h2
-        class="x-live-blog-post__title"
+        class="o3-type-display-sm"
       >
         live post 1
       </h2>
       <div
-        class="x-live-blog-post__body n-content-body article--body"
+        class="x-live-blog-post__body n-content-body article--body o3-type-body-content-base"
         data-trackable="truncated-post"
         data-trackable-category="live-blog"
         data-trackable-context-post="00000000-0000-0000-0000-000000000000"
@@ -369,7 +369,7 @@ exports[`Body default renderers renders default renderer for LiveBlogPackage 1`]
 exports[`Body default renderers renders default renderer for Video 1`] = `
 <DocumentFragment>
   <article
-    class="n-content-body"
+    class="n-content-body o3-type-body-content-base"
   >
     <p>
       Lorem ipsum dolor sit amet

package/src/components/Byline/index.tsx

@@ -15,7 +15,7 @@ interface AuthorLinkProps extends ContentProps<ComponentWorkarounds.Author> {}
 const AuthorLink: React.FC<PropsWithChildren<AuthorLinkProps>> = (props) =>
   props.content.concept ? (
     <a
-      className="n-content-tag--author"
+      className="o3-editorial-typography-byline-author"
       href={props.content.concept.relativeUrl}
       data-trackable="author"
     >
@@ -29,7 +29,7 @@ const bylineComponents = {
 
 const Byline: React.FC<BylineProps> = ({ structuredContent, showEditedBy }) => {
   return (
-    <p className="article-info__byline">
+    <p className="article-info__byline o3-editorial-typography-byline">
       {showEditedBy && (
         <span>
           Edited by <br />

package/src/components/Expander/client/main.scss

@@ -1,7 +1,5 @@
-@import '@financial-times/o-icons/main';
-@import '@financial-times/o-colors/main';
+@import '@financial-times/o3-foundation/css/core.css';
 @import '@financial-times/o-grid/main';
-@import '@financial-times/o-spacing/main';
 
 $dataComponentVisibleElements: (
   'clip-set',
@@ -129,16 +127,18 @@ $dataComponentVisibleElements: (
       .cp-expander__expand,
         .cp-expander__collapse {
           display: block;
-          padding-bottom: oSpacingByName('s6');
+          padding-bottom: var(--o3-spacing-s);
           > a {
-            $icon-color: oColorsByName('ft-grey');
-            --_o-typography-body-color: $icon-color;
+            color: var(--o3-color-palette-ft-grey);
             font-feature-settings: 'clig' off, 'liga' off;
             
-            @include oTypographyBody();
-            font-weight: 400;
+            font-family: var(--o3-font-family-metric);
+            font-size: var(--o3-font-size-metric2-1);
+            line-height: var(--o3-font-lineheight-metric2-1);
+            font-weight: var(--o3-font-weight-regular);
+
             text-decoration: none;
-            font-size: 20px;
+
             &:hover {
               
               cursor: pointer;
@@ -146,8 +146,15 @@ $dataComponentVisibleElements: (
       
             &:after {
               content: '';
-              @include oIconsContent('arrow-down', $icon-color, $size: 20);
-              padding: 0 4px;
+              display: inline-block;
+              width: 18px;
+              height: 18px;
+              background-color: var(--o3-color-palette-ft-grey);
+              mask-image: var(--o3-icon-chevron-down);
+              mask-repeat: no-repeat;
+              mask-size: contain;
+
+              margin: 0 6px;
               vertical-align: middle;
             }
           }

package/src/components/LiveBlogPost/ShareLinkButton.tsx

@@ -30,10 +30,13 @@ const ShareLinkButton: React.FC<ShareLinkButtonProps> = ({
   }
 
   return (
-    <div className="x-live-blog-post__link-container" data-tooltip="hide">
+    <div
+      className="x-live-blog-post__link-container o3-type-detail"
+      data-tooltip="hide"
+    >
       <span className="x-live-blog-post__link-copied-message">Link copied</span>
       <button
-        className="x-live-blog-post__link-icon"
+        className="x-live-blog-post__link-icon o3-button o3-button--ghost o3-button-icon o3-button-icon--icon-only"
         data-component="share-link-button"
         aria-label="Share link"
         data-trackable="share-link"

package/src/components/LiveBlogPost/Timestamp.tsx

@@ -27,10 +27,10 @@ const TimeStamp: React.FC<TimestampProps> = ({
   }
 
   return (
-    <span className="x-live-blog-post__timestamp-container">
+    <span className="x-live-blog-post__timestamp-container o3-type-detail">
       <time
         data-o-component="o-date"
-        className="o-date x-live-blog-post__timestamp"
+        className="o-date"
         dateTime={publishedTimestamp}
         data-o-date-format={format}
         data-o-date-text-case={textCase}

package/src/components/LiveBlogPost/index.tsx

@@ -26,7 +26,7 @@ const TruncatedPost: React.FC<React.PropsWithChildren<{ id: string }>> = ({
       data-trackable="truncated-post"
       data-trackable-context-post={id}
       data-trackable-category="live-blog"
-      className="x-live-blog-post__body n-content-body article--body"
+      className="x-live-blog-post__body n-content-body article--body o3-type-body-content-base"
     >
       <Expander
         expandLabel="Expand post"
@@ -66,14 +66,7 @@ export type LiveBlogPostProps = {
   body: any // cp-content-pipeline
   publishedTimestamp: string // Remove once wordpress is no longer in use
   publishedDate: string
-  isBreakingNews: boolean // Remove once wordpress is no longer in use
   isPinned: boolean
-  standout?: {
-    breakingNews?: boolean
-    editorsChoice?: boolean
-    exclusive?: boolean
-    scoop?: boolean
-  }
   articleUrl: string
   showShareButtons: boolean
   showShareLinkButton: boolean
@@ -91,8 +84,6 @@ const LiveBlogPost: React.FC<LiveBlogPostProps> = ({
   body, // cp-content-pipeline
   publishedTimestamp, // Remove once wordpress is no longer in use
   publishedDate,
-  isBreakingNews, // Remove once wordpress is no longer in use
-  standout = {},
   articleUrl,
   showShareButtons = false,
   showShareLinkButton = false,
@@ -102,8 +93,6 @@ const LiveBlogPost: React.FC<LiveBlogPostProps> = ({
   indicators = {},
   authors,
 }) => {
-  const showBreakingNewsLabel = standout.breakingNews || isBreakingNews
-
   let postBody
   if (body && 'structured' in body) {
     // Content comes from cp-content-pipeline-api
@@ -116,7 +105,7 @@ const LiveBlogPost: React.FC<LiveBlogPostProps> = ({
     // Content comes from next-es or wordpress
     postBody = (
       <div
-        className="x-live-blog-post__body n-content-body article--body"
+        className="x-live-blog-post__body n-content-body article--body o3-editorial-typography-body"
         dangerouslySetInnerHTML={{ __html: bodyHTML || content }}
       />
     )
@@ -132,7 +121,9 @@ const LiveBlogPost: React.FC<LiveBlogPostProps> = ({
       >
         <div className="o-expander__content">{postBody}</div>
         <a className="o-expander__toggle o-expander__text--custom">
-          <span className="o-expander__visually-hidden">&nbsp;</span>
+          <span className="o-expander__visually-hidden o3-type-detail">
+            &nbsp;
+          </span>
         </a>
       </div>
     ) : (
@@ -175,11 +166,13 @@ const LiveBlogPost: React.FC<LiveBlogPostProps> = ({
         <div className="x-live-blog-post__meta-container">
           <div className="x-live-blog-post__meta">
             {indicators.isOpinion ? (
-              <span className="x-live-blog-post__label--opinion x-live-blog-post__label">
+              <span className="x-live-blog-post__label--opinion x-live-blog-post__label o3-type-label">
                 Live Opinion
               </span>
             ) : isPinned ? (
-              <span className="x-live-blog-post__label">Editor's pick</span>
+              <span className="x-live-blog-post__label o3-type-label">
+                Editor's pick
+              </span>
             ) : (
               ''
             )}
@@ -199,10 +192,7 @@ const LiveBlogPost: React.FC<LiveBlogPostProps> = ({
         )}
       </div>
 
-      {showBreakingNewsLabel && (
-        <div className="x-live-blog-post__breaking-news">Breaking news</div>
-      )}
-      {title && <h2 className="x-live-blog-post__title">{title}</h2>}
+      {title && <h2 className="o3-type-display-sm">{title}</h2>}
       {postBody}
       <div className="x-live-blog-post__controls">
         {showShareButtons && (

package/src/components/LiveBlogWrapper/test/index.spec.tsx

@@ -10,7 +10,6 @@ const post1 = {
   title: 'Post 1 Title',
   bodyHTML: '<p>Post 1 body</p>',
   publishedDate: '2020-10-09T10:00:00.000Z',
-  isBreakingNews: true,
   articleUrl: 'https://www.ft.com',
   showShareButtons: true,
   showShareLinkButton: true,
@@ -21,7 +20,6 @@ const post2 = {
   title: 'Post 2 Title',
   bodyHTML: '<p>Post 2 body</p>',
   publishedDate: '2020-10-09T11:00:00.000Z',
-  isBreakingNews: false,
   articleUrl: 'https://www.ft.com',
   showShareButtons: true,
   showShareLinkButton: true,

package/src/components/RichText/BasicComponents.tsx

@@ -6,7 +6,11 @@ import { ContentProps } from '../types'
 export const List: React.FC<
   React.PropsWithChildren<ContentProps<ContentTree.List>>
 > = (props) =>
-  props.content.ordered ? <ol>{props.children}</ol> : <ul>{props.children}</ul>
+  props.content.ordered ? (
+    <ol className="o3-editorial-typography-list-ordered">{props.children}</ol>
+  ) : (
+    <ul className="o3-editorial-typography-list-unordered">{props.children}</ul>
+  )
 
 export const ListItem: React.FC<
   React.PropsWithChildren<ContentProps<ContentTree.ListItem>>
@@ -24,14 +28,20 @@ export const Blockquote: React.FC<
   React.PropsWithChildren<ContentProps<ContentTree.Blockquote>>
 > = (props) => {
   return (
-    <blockquote className="n-content-blockquote">{props.children}</blockquote>
+    <blockquote className="n-content-blockquote o3-editorial-typography-blockquote">
+      {props.children}
+    </blockquote>
   )
 }
 
 export const Cite: React.FC<
   React.PropsWithChildren<ContentProps<ContentTreeWorkarounds.Cite>>
 > = (props) => {
-  return <cite>{props.children}</cite>
+  return (
+    <cite className="o3-editorial-typography-blockquote__author">
+      {props.children}
+    </cite>
+  )
 }
 
 export const LineBreak: React.FC = () => <br />
@@ -73,7 +83,7 @@ export const TableFooter: React.FC<
 export const TableCaption: React.FC<
   React.PropsWithChildren<ContentProps<ContentTreeWorkarounds.TableCaption>>
 > = (props) => (
-  <caption className="n-content-body__caption n-content-body__caption--auto">
+  <caption className="n-content-body__caption n-content-body__caption--auto o3-editorial-typography-subheading">
     {props.children}
   </caption>
 )

package/src/components/Topper/LiveBlogIndicator.tsx

@@ -35,7 +35,7 @@ const LiveBlogIndicator: React.FC<LiveBlogIndicatorProps> = ({
       <time
         id="live-blog-updated-timestamp"
         data-o-component="o-date"
-        className="o-date live-blog-indicator__timestamp"
+        className="o-date live-blog-indicator__timestamp o3-type-label"
         dateTime={lastUpdatedDateTime}
         data-o-date-format="time-ago-no-seconds"
       >

package/src/components/Topper/__snapshots__/LiveBlogIndicator.spec.tsx.snap

@@ -6,7 +6,7 @@ exports[`LiveBlogIndicator component does not show a label but does show the las
     class="live-blog-indicator"
   >
     <time
-      class="o-date live-blog-indicator__timestamp"
+      class="o-date live-blog-indicator__timestamp o3-type-label"
       data-o-component="o-date"
       data-o-date-format="time-ago-no-seconds"
       datetime="2024-11-05T10:48:03.442Z"
@@ -42,7 +42,7 @@ exports[`LiveBlogIndicator component shows a live label and the last updated tim
       </span>
     </span>
     <time
-      class="o-date live-blog-indicator__timestamp"
+      class="o-date live-blog-indicator__timestamp o3-type-label"
       data-o-component="o-date"
       data-o-date-format="time-ago-no-seconds"
       datetime="2024-11-15T10:38:03.442Z"

package/src/components/body-components/ArticleBody/index.tsx

@@ -9,7 +9,7 @@ const ArticleBody: React.FC<BodyProps> = ({ content, richTextComponents }) => {
 
   return (
     <ComponentsContext.Provider value={richTextComponents}>
-      <article className="n-content-body">
+      <article className="n-content-body o3-type-body-content-base">
         <RichText
           structuredContent={content.body.structured}
           components={richTextComponents}

package/src/components/body-components/ContentPackageBody/index.tsx

@@ -72,8 +72,8 @@ const ContentPackageBody: React.FC<ContentPackageBodyProps> = ({
         data-syndicatable={content.canBeSyndicated}
         className={
           design && design.theme
-            ? `design-theme--${design.theme} article`
-            : 'article n-content-body js-article__content-body n-content-body'
+            ? `design-theme--${design.theme} article o3-type-body-content-base`
+            : 'article n-content-body js-article__content-body o3-type-body-content-base'
         }
       >
         <PackageTeasers

package/src/components/body-components/PodcastBody/index.tsx

@@ -24,7 +24,7 @@ const PodcastBody: React.FC<PodcastBodyProps> = ({
   return (
     <div
       // HACK:20230712:IM use next-article's CSS classes until we bundle styles
-      className="article__content-body n-content-body js-article__content-body"
+      className="article__content-body n-content-body js-article__content-body o3-type-body-content-base"
       data-trackable="article-body"
       data-attribute="article-content-body"
     >
@@ -47,7 +47,7 @@ const PodcastBody: React.FC<PodcastBodyProps> = ({
       )}
 
       {content.body?.structured && (
-        <article className="n-content-body">
+        <article className="n-content-body o3-type-body-content-base">
           <RichText
             structuredContent={content.body.structured}
             components={richTextComponents}

package/src/components/content-tree/BigNumber/index.tsx

@@ -13,9 +13,11 @@ const BigNumber: React.FC<BigNumberProps> = ({
   content: { description, number },
 }) => {
   return (
-    <div className="n-content-big-number">
-      <span className="n-content-big-number__title">{number}</span>
-      <span className="n-content-big-number__content">{description}</span>
+    <div className="o3-editorial-typography-big-number n-content-big-number">
+      <div className="o3-editorial-typography-big-number__title">{number}</div>
+      <div className="o3-editorial-typography-big-number__content">
+        {description}
+      </div>
     </div>
   )
 }

package/src/components/content-tree/Clip/client/index.ts

@@ -505,6 +505,7 @@ class Clip extends ClipInterface {
 
     const playIconContainer = document.createElement('div')
     playIconContainer.classList.add('cp-clip__play-icon-container')
+    playIconContainer.setAttribute('data-o3-theme', 'inverse')
     playIconContainer.append(playIcon)
 
     const loadingIndicator = document.createElement('div')
@@ -516,13 +517,14 @@ class Clip extends ClipInterface {
 
     const loadingIconContainer = document.createElement('div')
     loadingIconContainer.classList.add('cp-clip__loading-icon-container')
+    loadingIconContainer.setAttribute('data-o3-theme', 'inverse')
     const loadingIconBg = document.createElement('div')
     loadingIconBg.classList.add('cp-clip__loading-icon-bg')
     loadingIconContainer.append(loadingIconBg)
     loadingIconBg.append(loadingIndicator)
     const loadingText = document.createElement('span')
     loadingText.innerText = 'LOADING'
-    loadingText.classList.add('cp-clip__loading-text')
+    loadingText.classList.add('cp-clip__loading-text', 'o3-type-label')
     loadingIconContainer.append(loadingText)
     this.loadingText = loadingText
 
@@ -672,7 +674,7 @@ class Clip extends ClipInterface {
       const duration = formatTime(this.getDuration())
       this.playText = document.createElement('span')
       this.playText.innerText = `PLAY | ${duration}`
-      this.playText.classList.add('cp-clip__play-text')
+      this.playText.classList.add('cp-clip__play-text', 'o3-type-label')
       playIconContainer.append(this.playText)
       this.containerEl.classList.add('cp-clip--ready')
     }